﻿/* â”€â”€ Inputs e labels (partilhados por todos os formulÃ¡rios do portal) â”€â”€ */
.portal-input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    font-size: 0.9rem;
    color: #1E293B;
    background: #F8FAFC;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    font-family: inherit;
}
.portal-input:focus {
    border-color: #cc0000;
    box-shadow: 0 0 0 3px rgba(204,0,0,0.08);
    background: white;
}
.portal-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
.portal-file-wrapper {
    border: 1.5px dashed #CBD5E1;
    border-radius: 12px;
    padding: 16px;
    transition: border-color 0.2s;
    cursor: pointer;
}
.portal-file-wrapper:hover { border-color: #cc0000; }

/* â”€â”€ CartÃµes de selecÃ§Ã£o de destinatÃ¡rio (portal_audiencia) â”€â”€ */
.admin-card {
    border: 1.5px solid #E2E8F0;
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    text-align: center;
    position: relative;
}
.admin-card:hover { border-color: #cc0000; }
.admin-card input[type="radio"]:checked ~ .admin-check { display: flex; }
.admin-check {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    background: #cc0000;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}
.admin-card:has(input:checked) {
    border-color: #cc0000;
    background: #FFF5F5;
    box-shadow: 0 0 0 3px rgba(204,0,0,0.08);
}

/* â”€â”€ Dashboard do cidadÃ£o â”€â”€ */
.portal-card {
    background: white;
    border: 1.5px solid #F1F5F9;
    border-radius: 20px;
    overflow: hidden;
}
.estado-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.portal-row {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #F1F5F9;
}
.portal-row:last-child { border-bottom: none; }
.portal-subheader {
    padding: 10px 20px;
    background: #F8FAFC;
    border-bottom: 1px solid #F1F5F9;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748B;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ─── portal_acesso inline (extracted) ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; font-family: 'Raleway', -apple-system, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
    a { text-decoration: none; color: inherit; }
    img { display: block; max-width: 100%; }
    button { font-family: inherit; cursor: pointer; }

    /* ─── SPLIT LAYOUT ─── */
    .lc-wrap {
      display: flex;
      min-height: 100vh;
    }

    /* ─── LEFT — blue side ─── */
    .lc-left {
      flex: 0 0 45%;
      background: linear-gradient(145deg, #7a0000 0%, #990000 50%, #cc0000 100%);
      color: #fff;
      padding: 52px 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .lc-left::before {
      content: '';
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 Z" fill="rgba(255,255,255,0.03)"/></svg>') cover;
      z-index: 0;
    }
    .lc-left::after {
      content: '';
      position: absolute;
      bottom: -40%; right: -8%;
      width: 320px; height: 320px;
      background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%);
      border-radius: 50%;
      z-index: 0;
    }
    .lc-left-inner { position: relative; z-index: 1; }

    .lc-logo-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 36px;
      padding-bottom: 28px;
      border-bottom: 1px solid rgba(255,255,255,.18);
    }
    .lc-logo-box {
      width: 72px; height: 72px;
      background: rgba(255,255,255,.18);
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.25);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
      backdrop-filter: blur(8px);
    }
    .lc-logo-box img { width: 54px; height: 54px; object-fit: contain; }
    .lc-logo-text h2 { font-size: 20px; font-weight: 700; margin-bottom: 4px; text-shadow: 0 2px 4px rgba(0,0,0,.2); }
    .lc-logo-text p { font-size: 13px; opacity: .85; }

    .lc-title { font-size: 30px; font-weight: 800; line-height: 1.25; margin-bottom: 16px; text-shadow: 0 2px 6px rgba(0,0,0,.2); }
    .lc-desc { font-size: 15px; opacity: .88; line-height: 1.7; margin-bottom: 32px; }

    .lc-features { margin-bottom: 40px; }
    .lc-feature {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 14px;
      font-size: 14px; font-weight: 500; opacity: .92;
    }
    .lc-feature i { color: #fcd34d; font-size: 17px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }

    .lc-contact {
      border-top: 1px solid rgba(255,255,255,.18);
      padding-top: 22px;
    }
    .lc-contact-item {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 10px; font-size: 13px; opacity: .88;
    }
    .lc-contact-item i { color: #fcd34d; width: 18px; text-align: center; }

    /* ─── RIGHT — white side ─── */
    .lc-right {
      flex: 1;
      background: #fafcff;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
    }
    .lc-right-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 22px 40px;
    }
    .lc-logo-mobile {
      display: none;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      color: #7a0000;
      font-size: 15px;
    }
    .lc-logo-mobile img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; }
    .lc-back-link {
      display: flex; align-items: center; gap: 6px;
      color: #6b7280; font-size: 13px; font-weight: 500;
      padding: 8px 14px; border-radius: 8px;
      background: rgba(0,0,0,.04);
      transition: color .2s, background .2s;
    }
    .lc-back-link:hover { color: #990000; background: rgba(204,0,0,.07); }

    .lc-logo-center {
      display: flex; justify-content: center;
      margin-bottom: 20px;
    }
    .lc-logo-center img {
      width: 76px; height: 76px; object-fit: contain;
      filter: drop-shadow(0 4px 8px rgba(122,0,0,.12));
    }

    .lc-form-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px 40px 40px;
    }
    .lc-form-inner { width: 100%; max-width: 420px; }

    /* ─── FORM ELEMENTS OVERRIDE ─── */
    .lc-step-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 64px; height: 64px;
      background: #fff0f0; border-radius: 16px;
      margin-bottom: 16px;
    }
    .lc-step-icon svg { width: 32px; height: 32px; color: #cc0000; }
    .lc-step-icon.green { background: #f0fdf4; }
    .lc-step-icon.green svg { color: #16a34a; }
    .lc-step-icon i { font-size: 28px; color: #cc0000; }

    .lc-h1 { font-size: 26px; font-weight: 800; color: #111827; margin-bottom: 6px; }
    .lc-sub { font-size: 14px; color: #6b7280; line-height: 1.6; }

    .lc-btn-primary {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; padding: 14px;
      background: linear-gradient(135deg, #cc0000, #aa0000);
      color: #fff; border: none; border-radius: 12px;
      font-size: 15px; font-weight: 700;
      cursor: pointer; transition: transform .2s, box-shadow .2s;
      position: relative; overflow: hidden;
    }
    .lc-btn-primary::before {
      content: ''; position: absolute; top: 0; left: -100%;
      width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
      transition: left .5s;
    }
    .lc-btn-primary:hover::before { left: 100%; }
    .lc-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(204,0,0,.35); }
    .lc-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

    .lc-btn-ghost {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      background: transparent; border: none;
      color: #cc0000; font-size: 13px; font-weight: 600;
      cursor: pointer; transition: color .2s;
      text-decoration: underline; text-underline-offset: 3px;
    }
    .lc-btn-ghost:hover { color: #aa0000; }

    /* Override existing portal classes to match new design */
    .portal-input {
      background: #fff !important;
      border-color: #e2e8f0 !important;
      border-width: 2px !important;
    }
    .portal-input:focus { border-color: #cc0000 !important; }
    .portal-label { font-size: 13px !important; }

    /* Override Tailwind-generated styles from base inline */
    .mt-8 { margin-top: 2rem; }
    .space-y-5 > * + * { margin-top: 1.25rem; }
    .space-y-4 > * + * { margin-top: 1rem; }

    /* ─── FOOTER NOTE ─── */
    .lc-footer-note {
      text-align: center; font-size: 11px; color: #9ca3af;
      padding: 16px 40px 24px;
    }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 900px) {
      .lc-left { display: none; }
      .lc-logo-mobile { display: flex; }
      .lc-logo-center img { width: 64px; height: 64px; }
      .lc-form-wrap { padding: 16px 24px 32px; }
      .lc-right-header { padding: 16px 24px; }
    }
    @media (max-width: 480px) {
      .lc-form-wrap { padding: 12px 16px 28px; }
      .lc-h1 { font-size: 22px; }
    }

/* ─── Alert boxes (portal_acesso) ─── */
.lc-alert {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.lc-alert i { flex-shrink: 0; margin-top: 1px; }
.lc-alert p { font-size: 13px; margin: 0; }
.lc-alert-error { background: #fef2f2; border-color: #fecaca; }
.lc-alert-error i, .lc-alert-error p { color: #dc2626; }
.lc-alert-success { background: #f0fdf4; border-color: #bbf7d0; }
.lc-alert-success i, .lc-alert-success p { color: #16a34a; }
