/* InterSA — linguagem MODERNA (HOME, central, gerencial). Usa os tokens de gcoc.css. */
.pagina { flex: 1; width: min(1280px, 100%); margin: 0 auto; padding: 18px 16px 28px; display: grid; gap: 18px; align-content: start; }
.pagina h1 { margin: 0; font-size: 1.6rem; }
.pagina h2 { margin: 0 0 8px; font-size: 1.1rem; }
.sub { color: var(--texto-2); margin: 2px 0 0; }
.cartao { background: var(--janela); border: 1px solid var(--borda); border-radius: 8px; padding: 14px 16px; }
.grade-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
a.pendencia { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; text-decoration: none; color: var(--texto); background: var(--janela); border: 1px solid var(--borda); border-left: 5px solid var(--acento); border-radius: 8px; padding: 12px 14px; min-height: 76px; }
a.pendencia:hover, a.pendencia:focus-visible { border-color: var(--acento); background: var(--acento-claro); }
a.pendencia .n { grid-row: span 2; font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: right; color: var(--acento); }
a.pendencia .r { font-weight: 600; }
a.pendencia .d { font-size: .85rem; color: var(--texto-2); }
a.pendencia.alerta { border-left-color: var(--alerta); } a.pendencia.alerta .n { color: var(--alerta); }
a.pendencia.erro { border-left-color: var(--erro); } a.pendencia.erro .n { color: var(--erro); }
.duas { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
@media (max-width: 900px) { .duas { grid-template-columns: 1fr; } }
.lista-links { list-style: none; margin: 0; padding: 0; }
.lista-links li { border-bottom: 1px solid var(--borda); }
.lista-links a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 2px; text-decoration: none; color: var(--texto); }
.lista-links a:hover { color: var(--acento); }
.lista-links small { color: var(--texto-2); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.kpi { background: var(--janela); border: 1px solid var(--borda); border-radius: 8px; padding: 12px 14px; display: grid; gap: 4px; }
.kpi .v { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi .l { font-weight: 600; }
.kpi .o { font-size: .78rem; color: var(--texto-2); border-top: 1px dashed var(--borda); padding-top: 4px; }
.barras { display: grid; gap: 6px; }
.barra { display: grid; grid-template-columns: 150px 1fr 48px; align-items: center; gap: 8px; font-size: .92rem; }
.barra .trilho { background: var(--painel); border: 1px solid var(--borda); height: 16px; border-radius: 3px; overflow: hidden; }
.barra .trilho, .barra .cheio { display: block; }
.barra .cheio { background: var(--acento); height: 100%; }
.barra .cheio.alerta { background: var(--alerta); } .barra .cheio.erro { background: var(--erro); }
.barra .num { text-align: right; font-variant-numeric: tabular-nums; }
.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w80{width:80%}.w90{width:90%}.w100{width:100%}
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.aviso-ilustrativo { background: #fff4d6; color: #5a3e00; border: 1px solid #e3c77a; border-radius: 6px; padding: 6px 10px; font-size: .9rem; }
:root[data-contraste="alto"] .aviso-ilustrativo { background: #000; color: #ff0; border-color: #ff0; }

/* Central de documentos: lista · visualização · análise */
.central { display: grid; grid-template-columns: 300px 1fr 360px; gap: 12px; min-height: 560px; }
@media (max-width: 1100px) { .central { grid-template-columns: 1fr; } }
.fila { list-style: none; margin: 0; padding: 0; overflow: auto; }
.fila button { width: 100%; text-align: left; font: inherit; background: var(--janela); color: var(--texto); border: 0; border-bottom: 1px solid var(--borda); padding: 8px 10px; cursor: pointer; display: grid; gap: 2px; }
.fila button[aria-pressed="true"] { background: var(--acento-claro); box-shadow: inset 4px 0 0 var(--acento); }
.fila small { color: var(--texto-2); }
.doc-visual { background: #5b6470; border-radius: 8px; display: grid; place-items: center; padding: 18px; }
.doc-cnh { width: min(460px, 100%); aspect-ratio: 1.45; background: linear-gradient(135deg, #e8f1e4, #cfe0d6); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.35); padding: 16px; display: grid; grid-template-columns: 90px 1fr; gap: 10px; color: #1b2430; font-size: .85rem; }
.doc-cnh .foto-doc { background: #b9c3cf; border-radius: 4px; display: grid; place-items: center; font-size: .75rem; }
.doc-cnh dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; }
.doc-cnh dt { font-weight: 700; font-size: .72rem; text-transform: uppercase; opacity: .8; }
.doc-cnh dd { margin: 0; }
.doc-cnh mark { background: #ffd24d; padding: 0 2px; }
.sugestao { border: 1px dashed #6b3fa0; border-radius: 6px; padding: 8px 10px; background: color-mix(in srgb, #6b3fa0 7%, var(--janela)); }
.divergencia { border-left: 4px solid var(--alerta); background: color-mix(in srgb, var(--alerta) 10%, var(--janela)); padding: 6px 10px; margin: 6px 0; }
.acoes-analise { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.aprovar { border-color: var(--ok); color: var(--ok); font-weight: 700; }
.btn.rejeitar { border-color: var(--erro); color: var(--erro); font-weight: 700; }
.versoes { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.versoes li { padding: 3px 0; border-bottom: 1px solid var(--borda); }

/* Login */
.login-fundo { flex: 1; display: grid; place-items: center; padding: 24px 16px; background: var(--bg); }
.login { width: min(420px, 100%); background: var(--janela); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 15px 50px #15385512; padding: 26px 28px; display: grid; gap: 12px; }
.login h1 { margin: 0; font-size: 32px; letter-spacing: -1px; }
.login label { font-weight: 600; display: grid; gap: 4px; }
.login input { height: 40px; font-size: 1.05rem; width: 100%; }
.login .entrar { height: 44px; font: inherit; font-size: 1.05rem; font-weight: 700; background: var(--acento); color: #fff; border: 0; border-radius: 6px; cursor: pointer; }
.login .mfa { border-top: 1px solid var(--borda); padding-top: 10px; }
.login .mfa-codigo { display: flex; gap: 6px; }
.login .mfa-codigo input { width: 44px; text-align: center; font-size: 1.3rem; }
.login small { color: var(--texto-2); }