/* ============================================================
   Sistema de design — Intranet FinanBank
   Cores da marca extraídas do logo:
     Azul-marinho  #06193F
     Vermelho      #F21A3F
   Um arquivo único, usado por todas as páginas.
   ============================================================ */

:root{
  /* Marca */
  --navy:#06193F;
  --navy-700:#0b2350;
  --navy-600:#123063;
  --red:#F21A3F;
  --red-600:#d81334;
  --red-050:#fdeef1;

  /* Neutros */
  --bg:#f5f7fa;
  --surface:#ffffff;
  --border:#e4e6ea;
  --text:#1b2430;
  --text-2:#5c6b7a;
  --text-3:#8a97a5;

  /* Estados */
  --ok:#1f9d55;
  --ok-050:#e7f6ee;
  --warn:#b7791f;
  --warn-050:#fdf6e3;

  /* Medidas */
  --radius:14px;
  --radius-sm:9px;
  --sidebar-w:248px;
  --shadow-sm:0 1px 2px rgba(6,25,63,.06),0 1px 3px rgba(6,25,63,.08);
  --shadow-md:0 4px 12px rgba(6,25,63,.08),0 10px 30px rgba(6,25,63,.06);
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
/* Respeita o atributo hidden (corrige o botão invisível do assistente 2FA) */
[hidden]{display:none !important}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);
  line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--red-600);text-decoration:none}
a:hover{text-decoration:underline}

/* Foco visível — acessibilidade (navegação por teclado) */
:focus-visible{outline:3px solid rgba(242,26,63,.35);outline-offset:2px;border-radius:6px}

/* ---------- Layout base (app shell) ---------- */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}

/* ---------- Sidebar ---------- */
.sidebar{background:var(--navy);color:#fff;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh}
.sidebar-logo{display:flex;align-items:center;gap:11px;padding:20px 20px 18px}
.sidebar-logo .mono{width:38px;height:38px;border-radius:10px;background:var(--red);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;
  color:#fff;letter-spacing:-1px;flex-shrink:0}
.sidebar-logo b{font-size:17px;font-weight:700;letter-spacing:.2px}
.sidebar-logo small{display:block;font-size:9px;letter-spacing:1.5px;color:#8ba0c4;
  text-transform:uppercase;font-weight:600;margin-top:1px}

.nav{padding:8px 12px;display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
.nav-sep{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#5f7499;
  padding:16px 12px 6px;font-weight:700}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;
  color:#c7d2e6;font-size:14px;font-weight:500;cursor:pointer;transition:.12s;text-decoration:none}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.nav-item.active{background:var(--red);color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(242,26,63,.35)}
.nav-item .ic{width:20px;text-align:center;font-size:16px;flex-shrink:0}

.sidebar-foot{border-top:1px solid rgba(255,255,255,.1);padding:14px}
.user-box{display:flex;align-items:center;gap:11px}
.user-box .avatar{width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.user-box .u-nome{font-size:13px;font-weight:600;color:#fff;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.user-box .u-setor{font-size:11px;color:#8ba0c4}
.user-acoes{display:flex;gap:8px;margin-top:12px}
.user-acoes a,.user-acoes button{flex:1;text-align:center;font-family:inherit;
  font-size:11.5px;font-weight:600;padding:7px 6px;border-radius:8px;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#c7d2e6}
.user-acoes a:hover,.user-acoes button:hover{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}

/* ---------- Main ---------- */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{background:var(--surface);border-bottom:1px solid var(--border);
  padding:0 28px;height:64px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20}
.hamburger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--navy)}
.topbar .titulo{font-size:18px;font-weight:700;color:var(--navy)}
.breadcrumb{font-size:12.5px;color:var(--text-3);margin-top:1px}
.breadcrumb a{color:var(--text-2)}
.topbar .spacer{margin-left:auto}
.search{position:relative;display:flex;align-items:center}
/* Seletor mais específico (.topbar) para não ser sobrescrito pela regra
   geral de inputs — era o que empurrava o texto para baixo da lupa. */
.topbar .search input{background:var(--bg);border:1px solid var(--border);border-radius:22px;
  padding:9px 16px 9px 40px;font-size:13px;width:240px;font-family:inherit;color:var(--text)}
.topbar .search input:focus{outline:none;border-color:var(--red);background:#fff}
.topbar .search .lupa{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:var(--text-3);font-size:13px;line-height:1;pointer-events:none}

.content{padding:26px 28px;max-width:1120px;width:100%}

/* ---------- Componentes ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm)}
.card-pad{padding:22px}
.card-head{padding:16px 22px;border-bottom:1px solid var(--border);font-size:15px;font-weight:700;
  color:var(--navy);display:flex;align-items:center;gap:10px}

.h-page{font-size:24px;font-weight:800;color:var(--navy);letter-spacing:-.3px}
.sub{color:var(--text-2);font-size:14px;margin-top:2px}

.grid{display:grid;gap:16px}
.g-quick{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.g-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

.quick{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);
  transition:.15s}
.quick:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#cfd6df;text-decoration:none}
.quick .ico{width:46px;height:46px;border-radius:12px;background:var(--red-050);color:var(--red);
  display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.quick b{font-size:15px;color:var(--navy);display:block}
.quick small{font-size:12px;color:var(--text-2)}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;
  font-size:14px;font-weight:600;padding:11px 18px;border-radius:10px;border:none;cursor:pointer;
  transition:.15s;text-decoration:none}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-700);text-decoration:none;color:#fff}
.btn-accent{background:var(--red);color:#fff}
.btn-accent:hover{background:var(--red-600);text-decoration:none;color:#fff}
.btn-ghost{background:var(--bg);color:var(--navy);border:1px solid var(--border)}
.btn-ghost:hover{background:#eef1f5;text-decoration:none;color:var(--navy)}
.btn-block{width:100%}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:20px}
.badge-navy{background:#eaf0f9;color:var(--navy-600)}
.badge-accent{background:var(--red-050);color:var(--red-600)}
.badge-warn{background:var(--warn-050);color:var(--warn)}
.badge-ok{background:var(--ok-050);color:var(--ok)}

/* Tabelas */
.tabela{width:100%;border-collapse:collapse;font-size:13.5px}
.tabela th{text-align:left;padding:12px 16px;background:#fafbfc;color:var(--text-2);
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;border-bottom:1px solid var(--border)}
.tabela td{padding:13px 16px;border-bottom:1px solid var(--border)}
.tabela tr:last-child td{border-bottom:none}
.tabela tbody tr:hover td{background:#fafbfc}

/* Itens de lista (comunicados/documentos) */
.item{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);transition:.13s}
.item:hover{border-color:#cfd6df;box-shadow:var(--shadow-md);text-decoration:none}
.item-row{display:flex;align-items:center;gap:16px}

/* Formulários */
.campo{margin-bottom:16px}
.campo label{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.input,input[type=text],input[type=password],input[type=email],input[type=number],input[type=tel],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:10px;font-size:14.5px;
  font-family:inherit;background:#fff;color:var(--text)}
.input:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(242,26,63,.14)}

/* Mensagens (Django messages) */
.msgs{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.msg{padding:12px 16px;border-radius:10px;font-size:13.5px;display:flex;align-items:center;gap:9px;
  border:1px solid transparent}
.msg-success{background:var(--ok-050);color:#166534;border-color:#bbe7cd}
.msg-error{background:#fdeef0;color:#9b1c2e;border-color:#f6c9d1}
.msg-info{background:#eaf0f9;color:var(--navy-600);border-color:#cddcf2}
.msg-warning{background:var(--warn-050);color:#8a5a00;border-color:#f2e2b5}

/* Estado vazio */
.vazio{background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);
  padding:34px;text-align:center;color:var(--text-2);font-size:14px}
.vazio .ico{font-size:34px;display:block;margin-bottom:8px;opacity:.6}

.footer-nota{color:var(--text-3);font-size:12px;margin-top:18px}

/* ---------- Páginas de autenticação (login, 2FA, erros) ---------- */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%,#0d2a5e 0%,var(--navy) 55%)}
.auth-card{background:#fff;width:400px;max-width:100%;border-radius:18px;padding:36px 34px;
  box-shadow:0 30px 80px rgba(0,0,0,.35)}
.auth-logo{display:block;margin:2px auto 22px;width:210px;max-width:70%;height:auto;object-fit:contain}
.auth h1{font-size:20px;color:var(--navy);text-align:center;margin-bottom:4px}
.auth .auth-sub{text-align:center;color:var(--text-2);font-size:13px;margin-bottom:24px}
.auth-back{display:block;text-align:center;margin-top:18px;font-size:13px}
.auth-nota{margin-top:18px;font-size:12px;color:var(--text-2);text-align:center;
  background:var(--bg);padding:11px;border-radius:10px}
/* Botões nas telas de auth. O fluxo de 2FA usa as classes
   btn-link (Cancelar), btn-secondary (Voltar) e btn-primary (Avançar). */
.auth-card .btn,
.auth-card button,
.auth-card input[type=submit]{
  display:inline-block;width:auto;font-family:inherit;font-size:14px;font-weight:600;
  padding:10px 20px;border-radius:10px;border:none;cursor:pointer;margin:14px 0 0}
.auth-card .btn + .btn,
.auth-card button + button{margin-left:8px}
/* Ação principal (Entrar / Avançar) */
.auth-card .btn-primary,
.auth-card input[type=submit]{background:var(--red);color:#fff}
.auth-card .btn-primary:hover,
.auth-card input[type=submit]:hover{background:var(--red-600);text-decoration:none}
/* Ação secundária (Voltar) */
.auth-card .btn-secondary{background:#eef1f5;color:var(--navy)}
.auth-card .btn-secondary:hover{background:#e3e8ef;text-decoration:none}
/* Cancelar — apenas um link discreto */
.auth-card .btn-link{background:none;color:var(--text-2);font-weight:500;padding:10px 6px}
.auth-card .btn-link:hover{color:var(--red-600)}
/* Botão desabilitado (ex.: Voltar no 1º passo) */
.auth-card button[disabled]{background:#f2f4f7;color:var(--text-3);cursor:default}
.auth-card .float-right{float:right}
.auth-card .btn-block{width:100%;margin-left:0}
.auth-card p{font-size:13.5px;color:var(--text-2);margin:6px 0}
.auth-card table{width:100%}
.auth-card img[alt="QR Code"]{display:block;margin:14px auto;max-width:190px;
  border:1px solid var(--border);border-radius:10px;padding:8px;background:#fff}

/* ---------- Responsivo ---------- */
#nav-toggle{display:none}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;z-index:60;width:var(--sidebar-w);
    transform:translateX(-100%);transition:transform .22s ease}
  #nav-toggle:checked ~ .app .sidebar{transform:translateX(0);box-shadow:0 0 0 100vw rgba(0,0,0,.45)}
  .hamburger{display:block}
  .topbar .search input{width:150px}
  .content{padding:20px 16px}
  .topbar{padding:0 16px}
}