/* ============================
   FNEL — Validador Público
   Layout limpo e responsivo
   ============================ */

:root{
  --bg: #f7f7f8;
  --card: #ffffff;
  --border: #e5e7eb;
  --ink: #111827;
  --muted: #6b7280;
  --muted-2: #374151;

  --ok: #065f46;        /* ativa */
  --warn: #92400e;      /* bloqueada */
  --error: #991b1b;     /* vencida */
  --cancel: #7c3aed;    /* cancelada */

  --focus: #0ea5e9;
  --btn: #111827;
  --btn-ink: #ffffff;

  --radius-lg: 12px;
  --radius-md: 10px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);

  --container: 1120px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* =========================================
   HEADER (logo à esquerda, menu à direita)
   ========================================= */
.header-site{
  background:#fff;
  border-bottom:1px solid #eef0f2;
}
.header-site .container{
  max-width:var(--container);
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.logo-area{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.logo-area img{
  height:90px;
  width:auto;
  display:block;
}
.logo-area .titulo{
  font-size:14px;
  color:#374151;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.menu{
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap;
}
.menu a{
  text-decoration:none;
  color:#2b2f36;
  font-weight:600;
  font-size:15px;
  line-height:1;
  padding:8px 2px;
  border-bottom:3px solid transparent;
  transition:color .15s ease, border-color .15s ease, opacity .15s;
}
.menu a:hover{ color:#0b1324; opacity:.9; }
.menu a.ativo{
  color:#0b1324;
  border-color:#8fb1ff;  /* sublinhado estilo print */
}
.menu .btn-entrar{
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:9px 14px;
  line-height:1;
}
.menu .btn-entrar:hover{ background:#e9eaee; }

/* Responsivo header */
@media (max-width:860px){
  .logo-area .titulo{ display:none; }
}
@media (max-width:640px){
  .header-site .container{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .menu{ gap:16px; }
}

/* ======================
   Área de conteúdo .wrap
   ====================== */
.wrap{
  max-width:var(--container);
  margin:24px auto;
  padding:0 16px;
}
h1{
  margin:0 0 16px;
  font-size:22px;
  font-weight:800;
}

/* ======== Card de busca (form topo) ======== */
.search-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  box-shadow: var(--shadow-sm);
  margin: 8px 0 28px;
}

.search-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}

.search-head .mark{
  width:42px; height:42px;
  border-radius:12px;
  background:#eef6ff;
  display:grid; place-items:center;
  flex: 0 0 42px;
}
.search-head .mark svg{
  width:22px; height:22px;
  fill:#2463eb;
}

.search-head .head-text h2{
  margin:0; font-size:20px; font-weight:800; color:#3e4095;
}
.search-head .head-text p{
  margin:2px 0 0; color:#6b7280; font-size:13px;
}

/* grid do formulário */
.search-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:start; /* alinhamento superior dos campos */
}

.field{ display:block; }
.field label{
  display:block;
  font-size:20px;
  color:var(--muted-2);
  margin-bottom:6px;
  font-weight:600;
}

.control{
  position:relative;
}
.control.with-icon .icon{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; opacity:.65;
}
.control.with-icon .icon svg{ width:100%; height:100%; fill:#6b7280; }

.control input{
  width:100%;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px 12px 38px; /* espaço pro ícone */
  font-size:15px;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.control input::placeholder{ color:#a3a3a3; }
.control input:focus{
  border-color:#93c5fd;
  box-shadow:0 0 0 4px rgba(59,130,246,.15);
  outline:0;
}

.hint{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:#6b7280;
  min-height:18px; /* fix do desalinhamento */
}

/* Ações */
.actions{
  grid-column: 1 / -1;
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:2px;
}

.btn-primary{
  appearance:none;
  background:#111827;
  color:#fff;
  border:0;
  border-radius:12px;
  padding:12px 18px;
  font-size:15px; font-weight:700;
  cursor:pointer;
  transition: transform .02s ease, opacity .2s ease, box-shadow .2s ease;
  box-shadow:0 6px 14px rgba(17,24,39,.08);
}
.btn-primary:hover{ opacity:.95 }
.btn-primary:active{ transform: translateY(1px) }

/* ===== Botão secundário (Limpar) ===== */
.btn-secondary{
  appearance:none;
  background:#f3f4f6;
  color:#111827;
  border:1px solid #d1d5db;
  border-radius:12px;
  padding:12px 18px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:transform .02s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-secondary:hover{
  background:#e5e7eb;
  border-color:#cbd5e1;
}
.btn-secondary:active{
  transform:translateY(1px);
}

.alert-inline{
  background:#fef2f2;
  color:#991b1b;
  border:1px solid #fecaca;
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
}

/* ===== Status ===== */
.status{
  font-weight:800;
  margin:14px 0 10px 4px;
}
.status.ativa{ color:var(--ok) }
.status.bloqueada{ color:var(--warn) }
.status.vencida{ color:var(--error) }
.status.cancel{ color:var(--cancel) }

/* =========================================
   Carteirinha com fundo (posicionamento)
   ========================================= */
.carteirinha-wrap{
  display:grid;
  justify-content:center;
  margin:12px 0 24px;
}

/* Proporção do fundo: 434 x 275 */
.carteirinha{
  position:relative;
  width:min(860px, 95vw);
  aspect-ratio:434 / 275;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  background:#e9eef0 url("https://fnel.org.br/painel/imagens/bg_carteira2025-solicitacao-nonumero.png") center/cover no-repeat;

  /* Tipografia (ligeiro aumento) */
  --fs-base: clamp(12px, 1.8vw, 14px);
  --fs-nome: clamp(13px, 2vw, 15px);

  /* Coordenadas (ajuste fino) */
  --x-nome: 34.0%;   --y-nome: 30%;
  --x-inst: 34.0%;   --y-inst: 37%;
  --x-curso:34.0%;   --y-curso: 41%;

  --x-cpf:  42.5%;   --y-cpf:  51.0%;
  --x-rg:   45.0%;   --y-rg:   56.9%;
  --x-nasc: 49.5%;   --y-nasc: 63.0%;
  --x-cod:  54.5%;   --y-cod:  77.6%;
}

/* Foto */
.carteirinha .foto{
  position:absolute;
  top:27.5%;
  left:5.8%;
  width:23%;
  height:47%;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
}
.carteirinha .foto img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* QR Code */
.carteirinha .qr{
  position:absolute;
  left:9%;
  bottom:-1%;
  width:13%;
  aspect-ratio:1/1;
}
.carteirinha .qr img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Topo direito */
.carteirinha .nome{
  position:absolute;
  left:var(--x-nome);
  top: var(--y-nome);
  width:58%;
  font-size:var(--fs-nome);
  font-weight:900;
  text-transform:uppercase;
  line-height:1.15;
  color:#0b1324;
}
.carteirinha .instituicao,
.carteirinha .curso{
  position:absolute;
  left:var(--x-inst);
  width:58%;
  font-size:var(--fs-base);
  font-weight:600;
  text-transform:uppercase;
  line-height:1.15;
  color:#0b1324;
}
.carteirinha .instituicao{ top:var(--y-inst); }
.carteirinha .curso{ top:var(--y-curso); }

/* Valores alinhados à arte de fundo */
.carteirinha .valor{
  position:absolute;
  font-size:var(--fs-base);
  font-weight:800;
  color:#0b1324;
  line-height:1.1;
  letter-spacing:.3px;
  text-transform:none;
}
.carteirinha .valor-cpf  { left:var(--x-cpf);  top:var(--y-cpf); }
.carteirinha .valor-rg   { left:var(--x-rg);   top:var(--y-rg); }
.carteirinha .valor-nasc { left:var(--x-nasc); top:var(--y-nasc); }
.carteirinha .valor-coduso{left:var(--x-cod);  top:var(--y-cod); }

/* ===== Responsivo ===== */
@media (max-width:820px){
  .search-form{ grid-template-columns:1fr; }
  .actions{ justify-content:flex-start; }
  .carteirinha{
    --fs-base: clamp(11px, 2vw, 13px);
    --fs-nome: clamp(12px, 2.2vw, 14px);
  }
}

/* ===== Botão Voltar ===== */
.voltar-site{ text-align:center; margin-top:36px; }
.btn-voltar{
  display:inline-block;
  background:var(--btn);
  color:var(--btn-ink);
  padding:10px 18px;
  border-radius:var(--radius-md);
  text-decoration:none;
  font-weight:700;
  transition:opacity .2s, transform .1s;
}
.btn-voltar:hover{ opacity:.9; }
.btn-voltar:active{ transform:translateY(1px); }

/* ===== Acessibilidade mínima ===== */
img{ color:transparent; }

/* ===== Impressão (opcional) ===== */
@media print{
  .header-site, .search-card, .actions, .voltar-site{ display:none !important; }
  .wrap{ margin:0; padding:0; max-width:none; }
  body{ background:#fff; }
}

/* ============================
   Rodapé FNEL
   ============================ */
.footer-fnel{
  background:#2f3438;
  color:#fff;
  margin-top:60px;
  padding:40px 0 0;
  font-size:14px;
}

.footer-container{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  max-width:1120px;
  margin:0 auto;
  padding:0 16px;
  gap:32px;
}

.footer-col h3{
  text-transform:uppercase;
  font-size:15px;
  letter-spacing:.5px;
  margin-bottom:14px;
  font-weight:700;
}

.footer-col ul{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-col ul li{
  margin:8px 0;
}
.footer-col ul li a{
  color:#e5e7eb;
  text-decoration:none;
  transition:color .2s;
}
.footer-col ul li a:hover{
  color:#fff;
}

/* Certificados */
.footer-cert img{
  width:120px;
  height:auto;
  margin-top:6px;
}

/* Pagamentos */
.footer-pagamento .pagamentos{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.footer-pagamento img{
  background:#fff;
  border-radius:6px;
  height:36px;
  padding:6px;
  box-shadow:0 1px 2px rgba(255,255,255,.2);
}

/* Linha inferior */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  text-align:center;
  padding:18px 0;
  margin-top:30px;
}

.footer-bottom .social{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:10px;
}
.footer-bottom .social a{
  color:#fff;
  text-decoration:none;
  font-size:18px;
  transition:opacity .2s;
}
.footer-bottom .social a:hover{ opacity:.7; }

.footer-bottom p{
  font-size:13px;
  color:#d1d5db;
  margin:0;
}

/* Responsivo rodapé */
@media (max-width:820px){
  .footer-container{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .footer-cert img{
    margin:0 auto;
  }
  .footer-pagamento .pagamentos{
    justify-content:center;
  }
}