/* ============================================================
   Plataforma SARLAFT · estilos
   Sobria y legible: es una herramienta de cumplimiento que se usa
   horas seguidas. El color se reserva para estados y riesgo.
   ============================================================ */

:root {
  --fondo: #f4f6f9;
  --panel: #ffffff;
  --tinta: #13203a;
  --suave: #5a6577;
  --tenue: #8a93a3;
  --linea: #dfe4ec;
  --linea-fuerte: #c9d0dc;
  --barra: #0f1b33;
  --barra-tinta: #c9d3e6;
  --barra-activo: #1f3159;
  --acento: #0f766e;
  --acento-suave: #e3f3f1;
  --acento-tinta: #0b5c56;
  --bajo: #15803d;    --bajo-f: #e6f4ea;
  --medio: #b45309;   --medio-f: #fdf1e1;
  --alto: #b91c1c;    --alto-f: #fde8e8;
  --info: #1d4ed8;    --info-f: #e5edfd;
  --gris-f: #eef1f5;
  --sombra: 0 1px 2px rgba(15, 27, 51, .06), 0 4px 16px rgba(15, 27, 51, .05);
  --radio: 10px;
  --fuente: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0d1424; --panel: #141d31; --tinta: #e6ebf4; --suave: #a6b0c2; --tenue: #7c879b;
    --linea: #24304a; --linea-fuerte: #34425f; --barra: #0a1020; --barra-tinta: #aeb9cf; --barra-activo: #1b2846;
    --acento: #2dd4bf; --acento-suave: #12332f; --acento-tinta: #5eead4;
    --bajo: #4ade80; --bajo-f: #12301d; --medio: #fbbf24; --medio-f: #33270d; --alto: #f87171; --alto-f: #3a1515;
    --info: #93b4fb; --info-f: #16244a; --gris-f: #1b2540; --sombra: 0 1px 2px rgba(0,0,0,.3);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14px/1.5 var(--fuente); color: var(--tinta); background: var(--fondo); -webkit-font-smoothing: antialiased; }
a { color: var(--acento-tinta); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 16px; margin: 0 0 10px; }
h3 { font-size: 14px; margin: 0 0 8px; }
p { margin: 0 0 10px; }
.mono, code { font-family: var(--mono); font-size: 12px; }
.suave { color: var(--suave); }
.tenue { color: var(--tenue); font-size: 12px; }
.oculto { display: none !important; }

/* ---------- estructura ---------- */
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.barra { background: var(--barra); color: var(--barra-tinta); padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.marca { display: flex; gap: 10px; align-items: center; padding: 4px 8px 16px; color: #fff; }
.marca .logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #0f766e, #2563eb); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.marca b { display: block; font-size: 14px; } .marca small { color: var(--barra-tinta); font-size: 11px; }
.barra .grupo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #6f7c96; padding: 14px 10px 4px; }
.barra a { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--barra-tinta); padding: 7px 10px; border-radius: 7px; font-size: 13.5px; }
.barra a:hover { background: var(--barra-activo); text-decoration: none; color: #fff; }
.barra a.activo { background: var(--barra-activo); color: #fff; box-shadow: inset 3px 0 0 var(--acento); }
.barra .contador { background: #b91c1c; color: #fff; border-radius: 10px; font-size: 11px; padding: 0 7px; min-width: 20px; text-align: center; }
.barra .pie { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid #1d2a47; font-size: 12px; }
.principal { min-width: 0; }
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 28px; background: var(--panel); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 5; }
.cabecera .empresa { font-weight: 600; } .cabecera .empresa small { color: var(--suave); font-weight: 400; }
.contenido { padding: 24px 28px 60px; max-width: 1280px; }
.menu-movil { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .barra { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 30; transform: translateX(-100%); transition: transform .2s; }
  .app.menu-abierto .barra { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
  .menu-movil { display: inline-flex; }
  .cabecera { padding: 10px 16px; }
  .contenido { padding: 16px 16px 60px; }
}

/* ---------- piezas ---------- */
.tarjeta { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px; margin-bottom: 16px; }
.tarjeta > h2:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.titulo-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.titulo-pagina .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.rejilla { display: grid; gap: 16px; }
.rejilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla.kpis { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
@media (max-width: 900px) { .rejilla.dos, .rejilla.tres { grid-template-columns: 1fr; } }
.kpi { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; display: block; color: inherit; }
a.kpi:hover { border-color: var(--acento); text-decoration: none; }
.kpi .valor { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi .etiqueta { color: var(--suave); font-size: 12.5px; }
.kpi.alerta .valor { color: var(--alto); } .kpi.aviso .valor { color: var(--medio); } .kpi.bien .valor { color: var(--bajo); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 500; font-size: 13.5px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--linea-fuerte); background: var(--panel); color: var(--tinta); cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--acento); text-decoration: none; }
.btn.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
@media (prefers-color-scheme: dark) { .btn.primario { color: #062420; } }
.btn.primario:hover { filter: brightness(1.08); }
.btn.peligro { color: var(--alto); border-color: color-mix(in srgb, var(--alto) 40%, transparent); }
.btn.chico { padding: 4px 10px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.fantasma { border-color: transparent; background: transparent; }

.etiqueta { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--gris-f); color: var(--suave); white-space: nowrap; }
.etiqueta.bajo, .etiqueta.ok, .etiqueta.aprobada, .etiqueta.vinculado, .etiqueta.sin_coincidencia, .etiqueta.cerrada, .etiqueta.presentado, .etiqueta.falso_positivo { background: var(--bajo-f); color: var(--bajo); }
.etiqueta.medio, .etiqueta.por_vencer, .etiqueta.por_revisar, .etiqueta.pendiente, .etiqueta.en_revision, .etiqueta.pendiente_aprobacion, .etiqueta.en_analisis, .etiqueta.media, .etiqueta.en_investigacion, .etiqueta.en_preparacion, .etiqueta.diligenciada, .etiqueta.sin_fecha, .etiqueta.antiguo { background: var(--medio-f); color: var(--medio); }
.etiqueta.alto, .etiqueta.extremo, .etiqueta.falta, .etiqueta.vencido, .etiqueta.rechazado, .etiqueta.rechazada, .etiqueta.bloqueado, .etiqueta.coincidencia_potencial, .etiqueta.coincidencia_confirmada, .etiqueta.alta, .etiqueta.critica, .etiqueta.abierta, .etiqueta.error { background: var(--alto-f); color: var(--alto); }
.etiqueta.enviada, .etiqueta.en_vinculacion, .etiqueta.info, .etiqueta.abierto, .etiqueta.borrador { background: var(--info-f); color: var(--info); }
.etiqueta.pep { background: #f3e8ff; color: #7e22ce; }
@media (prefers-color-scheme: dark) { .etiqueta.pep { background: #2e1650; color: #d8b4fe; } }

table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th { text-align: left; font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); padding: 8px 10px; border-bottom: 1px solid var(--linea-fuerte); white-space: nowrap; }
.tabla td { padding: 9px 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tr.clic { cursor: pointer; } .tabla tr.clic:hover td { background: var(--gris-f); }
.tabla td.n, .tabla th.n { text-align: right; font-variant-numeric: tabular-nums; }
.desliza { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vacio { text-align: center; padding: 28px 12px; color: var(--suave); }

/* ---------- formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--suave); }
.campo .req { color: var(--alto); }
input, select, textarea { font: inherit; font-size: 14px; color: var(--tinta); background: var(--panel); border: 1px solid var(--linea-fuerte); border-radius: 7px; padding: 7px 10px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--acento) 35%, transparent); border-color: var(--acento); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--acento); }
textarea { min-height: 72px; resize: vertical; }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 16px; }
.campos .ancho { grid-column: 1 / -1; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filtros input, .filtros select { width: auto; min-width: 160px; }
.sino { display: flex; gap: 6px; }
.sino label { display: flex; align-items: center; gap: 4px; padding: 5px 12px; border: 1px solid var(--linea-fuerte); border-radius: 7px; cursor: pointer; font-weight: 500; color: var(--tinta); }
.sino input { display: none; }
.sino label:has(input:checked) { background: var(--acento-suave); border-color: var(--acento); color: var(--acento-tinta); }
.multi { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.multi label { display: flex; gap: 6px; align-items: center; color: var(--tinta); font-weight: 400; font-size: 13.5px; }
.lista-campo table { width: 100%; border-collapse: collapse; }
.lista-campo td { padding: 3px; vertical-align: top; } .lista-campo th { font-size: 11px; color: var(--suave); text-align: left; padding: 3px; font-weight: 600; }
.lista-campo input, .lista-campo select { padding: 5px 7px; font-size: 13px; min-width: 90px; }
.seccion-form { border-top: 1px solid var(--linea); padding-top: 16px; margin-top: 16px; }
.seccion-form:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.seccion-form h3 { display: flex; justify-content: space-between; }
.ref-norma { font-size: 10.5px; color: var(--tenue); font-weight: 400; }

/* ---------- estado, pasos, checklist ---------- */
.pasos { display: flex; gap: 0; margin: 4px 0 16px; overflow-x: auto; }
.paso { flex: 1; min-width: 110px; text-align: center; font-size: 12px; color: var(--tenue); position: relative; padding-top: 22px; }
.paso::before { content: ''; position: absolute; top: 6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--linea-fuerte); z-index: 1; }
.paso::after { content: ''; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--linea-fuerte); }
.paso:first-child::after { display: none; }
.paso.hecho { color: var(--suave); } .paso.hecho::before, .paso.hecho::after { background: var(--acento); }
.paso.actual { color: var(--tinta); font-weight: 600; } .paso.actual::before { background: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linea); align-items: flex-start; }
.checklist li:last-child { border-bottom: 0; }
.punto { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--alto); margin-top: 1px; }
.punto.ok { background: var(--bajo); }
.checklist .det { font-size: 12px; color: var(--suave); }

.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--linea-fuerte); margin-bottom: 16px; overflow-x: auto; }
.pestanas a { padding: 9px 14px; color: var(--suave); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 500; }
.pestanas a:hover { color: var(--tinta); text-decoration: none; }
.pestanas a.activo { color: var(--acento-tinta); border-color: var(--acento); }

.ficha { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13.5px; }
.ficha dt { color: var(--suave); } .ficha dd { margin: 0; }
.aviso { padding: 10px 14px; border-radius: 8px; background: var(--info-f); color: var(--info); font-size: 13px; margin-bottom: 12px; }
.aviso.malo { background: var(--alto-f); color: var(--alto); } .aviso.medio { background: var(--medio-f); color: var(--medio); } .aviso.bueno { background: var(--bajo-f); color: var(--bajo); }
.linea-tiempo { list-style: none; padding: 0; margin: 0; }
.linea-tiempo li { padding: 8px 0 8px 18px; border-left: 2px solid var(--linea-fuerte); position: relative; font-size: 13px; }
.linea-tiempo li::before { content: ''; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); }
.hash { font-family: var(--mono); font-size: 11px; color: var(--tenue); word-break: break-all; }
.mapa { display: grid; grid-template-columns: 28px repeat(5, 1fr); gap: 3px; font-size: 12px; }
.mapa .c { aspect-ratio: 1.6; display: grid; place-items: center; border-radius: 5px; font-weight: 600; }
.mapa .eje { color: var(--suave); display: grid; place-items: center; font-size: 11px; }

/* ---------- diálogos y avisos ---------- */
dialog { border: 0; border-radius: 12px; padding: 0; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--panel); color: var(--tinta); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(10, 18, 36, .5); }
dialog .cab { padding: 16px 20px; border-bottom: 1px solid var(--linea); display: flex; justify-content: space-between; align-items: center; }
dialog .cuerpo { padding: 18px 20px; overflow-y: auto; max-height: calc(100vh - 200px); }
dialog .pie { padding: 12px 20px; border-top: 1px solid var(--linea); display: flex; justify-content: flex-end; gap: 8px; }
dialog.ancho { width: min(960px, calc(100vw - 32px)); }
.tostada { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--tinta); color: var(--panel); padding: 10px 18px; border-radius: 8px; z-index: 100; box-shadow: var(--sombra); max-width: calc(100vw - 32px); }
.tostada.error { background: var(--alto); color: #fff; }
.cargando { padding: 40px; text-align: center; color: var(--suave); }

/* ---------- acceso ---------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: radial-gradient(1200px 600px at 10% -10%, #123a52 0, transparent 60%), var(--barra); }
.acceso .caja { background: var(--panel); border-radius: 14px; padding: 30px; width: min(400px, 100%); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.acceso h1 { font-size: 20px; } .acceso form { display: grid; gap: 14px; margin-top: 18px; }
.qr { display: grid; place-items: center; padding: 12px; background: #fff; border-radius: 8px; margin: 10px 0; }