/* =============================================================================
   atulado-cosmos.css — Tema "Cosmos ATULADO" del Motor de Decisión de Crédito
   Entorno oscuro azul ATULADO + fondo geométrico interactivo (assets/fondo-geo.js).
   Naranja ATULADO = único color de acción principal. Amarillo = acentos.
   Se carga DESPUÉS de styles.css y del <style> de cada pantalla (para ganarles).
   Pantallas: body.cz-publico (simulador, radicar, login) y body.cz-admin (panel).
   ========================================================================== */

:root {
  --cz-bg-0: #000a1a;
  --cz-bg-1: #001a38;
  --cz-bg-2: #00264d;
  --cz-navy: #00386b;
  --cz-naranja: #f5821f;
  --cz-naranja-2: #ff6e05;
  --cz-naranja-hover: #e05f00;
  --cz-amarillo: #ffcc00;
  --cz-snow: #ffffff;
  --cz-fog: #b9c7e0;
  --cz-fog-2: #8ea1c2;
  --cz-vidrio: rgba(9, 30, 64, .72);
  --cz-vidrio-2: rgba(255, 255, 255, .05);
  --cz-borde: rgba(255, 255, 255, .12);
  --cz-borde-2: rgba(255, 255, 255, .22);
  --cz-campo: rgba(0, 10, 26, .55);
  --cz-ok: #4fd18b;
  --cz-mal: #ff7b6b;
  --cz-aviso: #ffcc4d;
  --cz-display: 'Nunito', 'Segoe UI', Roboto, sans-serif;
  --cz-texto: 'Nunito', 'Segoe UI', Roboto, sans-serif;
  --cz-r-boton: 12px;
  --cz-r-tarjeta: 20px;
  --cz-r-panel: 24px;
}

/* ---------- Entorno ---------- */
html {
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(245, 130, 31, .16), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(0, 120, 220, .22), transparent 60%),
    linear-gradient(180deg, var(--cz-bg-2) 0%, var(--cz-bg-1) 45%, var(--cz-bg-0) 100%);
  background-attachment: fixed;
  min-height: 100%;
}
body.cz-publico, body.cz-admin {
  background: transparent;
  font-family: var(--cz-texto);
  color: var(--cz-snow);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
#fondo-geo {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
}
body.cz-publico main, body.cz-admin main { position: relative; z-index: 1; }
#app-header { position: sticky; top: 0; z-index: 20; }
body.cz-admin .modal-bg { z-index: 50; }

/* ---------- Encabezado (layout.js) ---------- */
header.cz-header {
  position: relative;
  background: rgba(0, 16, 36, .62) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--cz-borde);
  box-shadow: none !important;
  padding: 12px clamp(16px, 4vw, 40px) !important;
  overflow: visible;
}
header.cz-header::before, header.cz-header::after { content: none !important; }
.cz-header .brand { display: flex; align-items: center; gap: 14px; }
.cz-logo-placa {
  background: #fff; border-radius: 14px; padding: 2px 10px;
  display: flex; align-items: center; height: 48px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 8px 24px -10px rgba(245, 130, 31, .55);
}
/* La imagen trae mucho margen blanco: se recorta al área del logo */
.cz-logo-placa img { height: 44px; width: 160px; object-fit: cover; object-position: 50% 51%; display: block; }
.cz-header h1 {
  font-family: var(--cz-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.01em; font-size: clamp(13px, 1.6vw, 16px); line-height: 1.1; margin: 0; color: #fff;
}
.cz-header p { margin: 3px 0 0; font-size: 12px; color: var(--cz-fog); letter-spacing: .015em; }
.cz-btn-salir {
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .7);
  padding: 9px 16px; border-radius: var(--cz-r-boton); font-weight: 700; font-size: 13px;
  cursor: pointer; font-family: var(--cz-texto); transition: background .15s ease, color .15s ease;
}
.cz-btn-salir:hover { background: #fff; color: var(--cz-bg-1); }
@media (max-width: 560px) { .cz-header p { display: none; } .cz-logo-placa { height: 40px; } .cz-logo-placa img { height: 36px; width: 130px; } }

/* ---------- Héroe (reemplaza las fotos) ---------- */
.cz-hero { padding: clamp(28px, 6vw, 64px) 0 clamp(24px, 4vw, 40px); }
.cz-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 104px; border: 1px solid var(--cz-borde-2);
  background: rgba(255, 255, 255, .06); color: var(--cz-fog);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.cz-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cz-amarillo); box-shadow: 0 0 12px var(--cz-amarillo); }
.cz-hero h2 {
  font-family: var(--cz-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(34px, 6.4vw, 60px); line-height: .92; letter-spacing: -.01em;
  margin: 18px 0 16px; color: #fff; max-width: 14ch;
}
.cz-hero h2 em { font-style: normal; color: var(--cz-naranja); }
.cz-hero p.cz-lead { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.5; color: var(--cz-fog); max-width: 52ch; margin: 0; }
.cz-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cz-chip {
  font-size: 12px; font-weight: 700; color: #fff; padding: 7px 12px; border-radius: 104px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--cz-borde);
}
.cz-volver { display: inline-flex; align-items: center; gap: 6px; color: var(--cz-fog); font-size: 13px; font-weight: 700; text-decoration: none; margin-bottom: 14px; }
.cz-volver:hover { color: #fff; }

/* =============================================================================
   PANTALLAS PÚBLICAS (oscuro completo)
   ========================================================================== */
body.cz-publico {
  --navy: #ffffff; --navy2: #dfe8f7; --ink: #eef3fb; --muted: var(--cz-fog);
  --line: var(--cz-borde); --card: var(--cz-vidrio); --bg: transparent;
  --orange: var(--cz-naranja); --orange2: var(--cz-naranja-2); --yellow: var(--cz-amarillo);
  --green: var(--cz-ok); --red: var(--cz-mal); --amber: var(--cz-aviso);
  --radius: var(--cz-r-tarjeta);
  color-scheme: dark;
}
body.cz-publico main { padding: 0 clamp(16px, 4vw, 28px) 72px; }

/* Tarjetas de vidrio */
body.cz-publico .sim-card,
body.cz-publico .rad-card,
body.cz-publico .card {
  background: var(--cz-vidrio);
  border: 1px solid var(--cz-borde);
  border-radius: var(--cz-r-tarjeta);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
  color: var(--ink);
}
body.cz-publico .sim-card h2, body.cz-publico .step-head h2 {
  font-family: var(--cz-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.01em; font-size: 17px; color: #fff;
}
body.cz-publico .sub, body.cz-publico .small.muted, body.cz-publico .muted { color: var(--cz-fog); }

/* Campos */
body.cz-publico input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
body.cz-publico select,
body.cz-publico textarea {
  background: var(--cz-campo) !important; color: #fff !important;
  border: 1.5px solid var(--cz-borde-2) !important; border-radius: var(--cz-r-boton) !important;
  font-family: var(--cz-texto);
}
body.cz-publico .input-icon-wrap { background: var(--cz-campo); border: 1.5px solid var(--cz-borde-2); border-radius: var(--cz-r-boton); }
body.cz-publico .input-icon-wrap input { background: transparent !important; border: none !important; }
body.cz-publico .input-icon-wrap span { color: var(--cz-fog); }
body.cz-publico input:focus, body.cz-publico select:focus, body.cz-publico .input-icon-wrap:focus-within {
  outline: none !important; border-color: var(--cz-naranja) !important;
  box-shadow: 0 0 0 3px rgba(245, 130, 31, .25) !important;
}
body.cz-publico select option { background: #071a36; color: #fff; }
body.cz-publico input::placeholder { color: var(--cz-fog-2); }
body.cz-publico label, body.cz-publico .rad-card label, body.cz-publico .sim-field-head label { color: var(--cz-fog); }
body.cz-publico .rad-card label .req { color: var(--cz-naranja); }
body.cz-publico input[type=range] { accent-color: var(--cz-naranja); }
body.cz-publico .range-limits { color: var(--cz-fog-2); }

/* Simulador */
body.cz-publico .sim-info-list li { color: var(--cz-fog); border-top-color: var(--cz-borde); }
body.cz-publico .sim-info-list li b { color: #fff; }
body.cz-publico .monto-input-wrap input { color: #fff !important; }
body.cz-publico .sim-result {
  background:
    radial-gradient(600px 240px at 100% 0%, rgba(245, 130, 31, .35), transparent 70%),
    linear-gradient(135deg, #0a3a78 0%, #00264d 60%, #001634 100%);
  border: 1px solid rgba(245, 130, 31, .45);
  border-radius: var(--cz-r-panel);
  padding: clamp(22px, 4vw, 36px);
}
body.cz-publico .sim-result .headline-label { color: var(--cz-amarillo); }
body.cz-publico .sim-result .headline { font-family: var(--cz-display); font-weight: 900; font-size: clamp(36px, 7vw, 56px); letter-spacing: -.01em; }
body.cz-publico .result-row span:first-child { color: var(--cz-fog); }
body.cz-publico .sim-warn { background: rgba(255, 204, 0, .10); border-color: rgba(255, 204, 0, .35); color: #ffe9a6; border-radius: 14px; }
body.cz-publico .sim-disclaimer { color: var(--cz-fog-2); }
body.cz-publico .sim-disclaimer strong { color: #fff; }

/* Botones (naranja = acción principal; blanco = secundaria) */
body.cz-publico .sim-btn, body.cz-publico .rad-btn, body.cz-publico .btn {
  border-radius: var(--cz-r-boton); font-family: var(--cz-texto); font-weight: 800; letter-spacing: .015em;
}
body.cz-publico .sim-btn-primary, body.cz-publico .rad-btn-primary, body.cz-publico .btn:not(.secondary):not(.ghost) {
  background: var(--cz-naranja-2); color: #fff; padding-top: 17px; padding-bottom: 17px;
  box-shadow: 0 10px 28px -12px rgba(255, 110, 5, .8);
}
body.cz-publico .sim-btn-primary:hover:not(:disabled), body.cz-publico .rad-btn-primary:hover:not(:disabled) { background: var(--cz-naranja-hover); }
body.cz-publico .sim-btn-ghost { background: #fff; color: var(--cz-bg-1); border: 1px solid #fff; }
body.cz-publico .sim-btn-ghost:hover { background: #e9eef8; }
body.cz-publico .rad-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .7); }
body.cz-publico .rad-btn-ghost:hover { background: #fff; color: var(--cz-bg-1); }

/* Radicar */
body.cz-publico .step-badge {
  background: var(--cz-naranja-2); color: #fff; width: 34px; height: 34px;
  font-family: var(--cz-display); font-weight: 900; box-shadow: 0 0 0 4px rgba(255, 110, 5, .18);
}
body.cz-publico .readonly-box { background: rgba(255, 255, 255, .05); border: 1.5px dashed var(--cz-borde-2); border-radius: var(--cz-r-boton); color: var(--cz-fog); }
body.cz-publico .readonly-box b { color: #fff; }
body.cz-publico .file-drop { background: rgba(255, 255, 255, .04); border: 2px dashed var(--cz-borde-2); border-radius: 16px; color: var(--cz-fog); }
body.cz-publico .file-drop:hover, body.cz-publico .file-drop.dragover { border-color: var(--cz-naranja); background: rgba(245, 130, 31, .10); }
body.cz-publico .file-drop .browse { color: var(--cz-naranja); }
body.cz-publico .fileList li { background: rgba(255, 255, 255, .05); border-color: var(--cz-borde); border-radius: 12px; }
body.cz-publico .fileList li.error { background: rgba(255, 123, 107, .12); border-color: rgba(255, 123, 107, .5); }
body.cz-publico .file-icon { background: rgba(245, 130, 31, .18); color: var(--cz-amarillo); }
body.cz-publico .file-name { color: #fff; }
body.cz-publico .file-remove { background: rgba(255, 255, 255, .1); color: #fff; }
body.cz-publico .file-remove:hover { background: rgba(255, 123, 107, .35); }
body.cz-publico .check-row { color: var(--cz-fog); }
body.cz-publico .check-row input { accent-color: var(--cz-naranja); width: 18px; height: 18px; }
body.cz-publico .check-row label { color: var(--cz-fog) !important; }
body.cz-publico [id^="mesNomina"] { color: #fff !important; }
body.cz-publico .field-error { color: var(--cz-mal); }
body.cz-publico .rad-disclaimer { color: var(--cz-fog-2); }
body.cz-publico .rad-disclaimer strong { color: #fff; }

/* Resultados y avisos (generados por JavaScript) */
body.cz-publico .result { border-radius: 16px; border-width: 1px; color: #fff; }
body.cz-publico .result.ok { background: rgba(79, 209, 139, .12); border-color: rgba(79, 209, 139, .55); }
body.cz-publico .result.bad { background: rgba(255, 123, 107, .12); border-color: rgba(255, 123, 107, .55); }
body.cz-publico .result.warn { background: rgba(255, 204, 77, .12); border-color: rgba(255, 204, 77, .55); }
body.cz-publico .result h3 { color: #fff !important; font-family: var(--cz-display); font-weight: 900; }
body.cz-publico #radicar-resultado .result.ok h3 { color: var(--cz-amarillo) !important; letter-spacing: .02em !important; }

/* =============================================================================
   PANEL ADMIN (entorno oscuro; los datos en tarjetas claras)
   ========================================================================== */
body.cz-admin main { max-width: 1240px; padding: 26px clamp(16px, 3vw, 28px) 72px; }
body.cz-admin .top-tabs {
  display: inline-flex; gap: 6px; padding: 6px; margin-bottom: 22px;
  background: rgba(0, 16, 36, .55); border: 1px solid var(--cz-borde); border-radius: 16px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); flex-wrap: wrap;
}
body.cz-admin .top-tab {
  background: transparent; border: none; color: var(--cz-fog); border-radius: var(--cz-r-boton);
  font-family: var(--cz-texto); font-weight: 800; padding: 10px 18px;
}
body.cz-admin .top-tab:hover { color: #fff; background: rgba(255, 255, 255, .07); }
body.cz-admin .top-tab.active { background: var(--cz-naranja-2); color: #fff; border: none; }

/* Tarjetas claras sobre el entorno oscuro */
body.cz-admin .card,
body.cz-admin .dash-chart-card,
body.cz-admin .doc-page {
  background: #f6f8fc; border: none; border-radius: var(--cz-r-panel);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
body.cz-admin .card, body.cz-admin .dash-chart-card, body.cz-admin .doc-page,
body.cz-admin .modal, body.cz-admin .dash-kpi, body.cz-admin .sol-kpi { color: var(--ink); }
body.cz-admin .card { padding: clamp(18px, 3vw, 28px); }
body.cz-admin .card > h2, body.cz-admin .card > div > h2 {
  font-family: var(--cz-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; font-size: 18px;
}
body.cz-admin .dash-kpi, body.cz-admin .sol-kpi { border-radius: 16px; box-shadow: none; border: 1px solid #e3e8f1; }
body.cz-admin .dash-kpi { background: #f6f8fc; }
body.cz-admin .sol-kpi-n, body.cz-admin .dash-kpi-n { font-family: var(--cz-display); font-weight: 900; }
body.cz-admin .btn { border-radius: var(--cz-r-boton); font-family: var(--cz-texto); font-weight: 800; }
body.cz-admin .btn:not(.secondary):not(.ghost) { background: var(--cz-naranja-2); }
body.cz-admin .btn:not(.secondary):not(.ghost):hover { background: var(--cz-naranja-hover); }
body.cz-admin .sol-icon-btn { border-radius: 10px; }
body.cz-admin .modal-bg { background: rgba(0, 8, 22, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.cz-admin .modal { border-radius: var(--cz-r-panel); }
body.cz-admin .filters input, body.cz-admin .filters select { border-radius: 10px; }

/* ---------- Pantalla de acceso (admin-login.html) ---------- */
.cz-login-wrap { min-height: calc(100vh - 80px); display: grid; place-items: center; padding: 32px 16px; }
.cz-login {
  width: 100%; max-width: 420px; background: var(--cz-vidrio); border: 1px solid var(--cz-borde);
  border-radius: var(--cz-r-panel); padding: clamp(24px, 5vw, 40px);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.cz-login h2 { font-family: var(--cz-display); font-weight: 900; text-transform: uppercase; font-size: clamp(28px, 5vw, 36px); line-height: .95; letter-spacing: -.01em; margin: 16px 0 8px; }
.cz-login p { color: var(--cz-fog); font-size: 14px; line-height: 1.5; margin: 0 0 22px; }
.cz-login label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cz-fog); margin-bottom: 8px; }
.cz-login button {
  width: 100%; margin-top: 16px; padding: 17px 24px; border: none; border-radius: var(--cz-r-boton);
  background: var(--cz-naranja-2); color: #fff; font-family: var(--cz-texto); font-weight: 800; font-size: 15px; cursor: pointer;
}
.cz-login button:hover:not(:disabled) { background: var(--cz-naranja-hover); }
.cz-login button:disabled { opacity: .6; cursor: wait; }
.cz-login .cz-error { margin-top: 14px; color: var(--cz-mal); font-size: 13px; min-height: 18px; }

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  body.cz-publico *, body.cz-admin * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* Impresión del documento metodológico: sin fondo oscuro */
@media print {
  html { background: #fff !important; }
  #fondo-geo, header.cz-header { display: none !important; }
  body.cz-admin .doc-page { box-shadow: none; }
}
.cz-login input[type=password] { padding: 15px 14px !important; font-size: 15px; }

/* Panel admin: oculto hasta que layout.js confirme la sesión (evita ver la estructura sin acceso) */
body.cz-admin:not(.cz-autorizado) main { visibility: hidden; }


/* =============================================================================
   v3 (14/10/2026) — Refinamiento corporativo del estilo Cosmos
   Referencias: guía DESIGN 3 (oscuro cósmico, titulares en mayúsculas peso 800-900,
   un solo color de acción), Material Design dark theme (elevación por luminosidad,
   texto no blanco puro para lectura larga) y WCAG 2.2 (contraste mínimo 4.5:1).
   ========================================================================== */
:root {
  --cz-r-tarjeta: 16px;
  --cz-r-panel: 24px;
  --cz-sup-1: rgba(8, 28, 60, .74);
  --cz-sup-2: rgba(14, 40, 80, .82);
  --cz-texto-1: #F4F7FC;
  --cz-texto-2: #B9C7E0;
  --cz-texto-3: #8EA1C2;
}
html {
  background:
    radial-gradient(1400px 800px at 90% -20%, rgba(245, 130, 31, .10), transparent 60%),
    linear-gradient(180deg, #002350 0%, #001834 38%, #000C1F 100%);
  background-attachment: fixed;
  scrollbar-color: rgba(185, 199, 224, .28) transparent;
}
::selection { background: rgba(255, 110, 5, .55); color: #fff; }
body.cz-publico :focus-visible, body.cz-admin :focus-visible { outline: 2px solid var(--cz-naranja-2); outline-offset: 2px; }
body.cz-publico { color: var(--cz-texto-1); letter-spacing: .013em; }

/* Encabezado: barra de vidrio fina, sin brillos */
header.cz-header { background: rgba(0, 14, 32, .58) !important; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.cz-logo-placa { box-shadow: none; border-radius: 12px; }
.cz-header h1 { font-weight: 900; letter-spacing: .01em; }
.cz-header p { color: var(--cz-texto-3); }

/* Héroe */
.cz-kicker { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .16); color: var(--cz-texto-2); letter-spacing: .12em; font-weight: 800; }
.cz-kicker::before { box-shadow: 0 0 0 4px rgba(255, 204, 0, .14); }
.cz-hero h2 { font-weight: 900; line-height: .9; letter-spacing: -.01em; }
.cz-hero h2 em { color: var(--cz-naranja-2); }
.cz-hero p.cz-lead { color: var(--cz-texto-2); letter-spacing: .015em; }
.cz-chip { background: transparent; border-color: rgba(255, 255, 255, .16); color: var(--cz-texto-2); font-weight: 700; }

/* Tarjetas: sin sombras; la profundidad viene del contraste de color */
body.cz-publico .sim-card, body.cz-publico .rad-card, body.cz-publico .card {
  background: var(--cz-sup-1); border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--cz-r-tarjeta); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
body.cz-publico .sim-card { padding: clamp(20px, 3vw, 28px); }
body.cz-publico .sim-card h2 { font-size: 16px; font-weight: 900; letter-spacing: .01em; margin-bottom: 6px; }
body.cz-publico .sim-card .sub { color: var(--cz-texto-3); font-size: 13px; line-height: 1.5; }
body.cz-publico .sim-field-head label { color: var(--cz-texto-2); font-weight: 800; letter-spacing: .08em; font-size: 12px; }
body.cz-publico .sim-info-list li { border-top-color: rgba(255, 255, 255, .08); color: var(--cz-texto-3); }
body.cz-publico .sim-info-list li b { font-size: 15px; font-weight: 800; }
body.cz-publico select, body.cz-publico .sim-select { height: 48px; }

/* Panel de resultado: panel destacado de 24px con identidad propia */
body.cz-publico .sim-result {
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(255, 110, 5, .32), transparent 70%),
    radial-gradient(420px 260px at 0% 100%, rgba(0, 120, 220, .28), transparent 70%),
    linear-gradient(135deg, #0B3A75 0%, #002A57 55%, #001834 100%);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--cz-r-panel);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.cz-publico .sim-result .headline-label { letter-spacing: .14em; font-weight: 800; }
body.cz-publico .sim-result .headline { font-size: clamp(40px, 7.5vw, 64px); line-height: 1; margin-bottom: 22px; }
body.cz-publico .result-row { border-bottom-color: rgba(255, 255, 255, .10); }
body.cz-publico .sim-warn { background: rgba(0, 10, 26, .35); border: 1px solid rgba(255, 204, 0, .30); color: #FFE7A3; border-radius: 12px; }

/* Botones: naranja = única acción principal; blanco = secundaria; contorno = terciaria */
body.cz-publico .sim-btn-primary, body.cz-publico .rad-btn-primary, body.cz-publico .btn:not(.secondary):not(.ghost) {
  background: var(--cz-naranja-2); box-shadow: none; border-radius: 12px; letter-spacing: .02em;
  transition: background .18s ease, transform .18s ease;
}
body.cz-publico .sim-btn-primary:hover:not(:disabled) { background: #E86200; transform: translateY(-1px); }
body.cz-publico .sim-btn-ghost { background: #fff; color: #00264D; border: 1px solid #fff; border-radius: 12px; }
body.cz-publico .sim-btn-ghost:hover { background: #E9EEF8; transform: translateY(-1px); }
body.cz-publico .sim-btn:disabled { background: rgba(255, 255, 255, .10) !important; color: rgba(255, 255, 255, .5); }
body.cz-publico .sim-disclaimer { color: var(--cz-texto-3); max-width: 760px; margin-left: auto; margin-right: auto; }

/* Cómo funciona: tres tarjetas con degradado propio (identidad por sección) */
.cz-como { margin: 44px 0 8px; }
.cz-como h3 { font-family: var(--cz-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(22px, 3.4vw, 32px); line-height: 1; color: #fff; margin: 0 0 18px; }
.cz-como-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .cz-como-grid { grid-template-columns: 1fr; } }
.cz-como-item { position: relative; overflow: hidden; border-radius: var(--cz-r-tarjeta); padding: 22px 22px 24px; border: 1px solid rgba(255, 255, 255, .10); min-height: 168px; }
.cz-como-item:nth-child(1) { background: linear-gradient(150deg, #0E3F7E 0%, #072752 100%); }
.cz-como-item:nth-child(2) { background: linear-gradient(150deg, #173A8A 0%, #0A1F4D 100%); }
.cz-como-item:nth-child(3) { background: linear-gradient(150deg, #7A3A10 0%, #2A1A2E 55%, #0A1E45 100%); }
.cz-como-item::after { content: ""; position: absolute; right: -36px; bottom: -36px; width: 120px; height: 120px; border: 1px solid rgba(255, 255, 255, .12); transform: rotate(30deg); border-radius: 18px; }
.cz-como-item b { display: block; font-family: var(--cz-display); font-weight: 900; font-size: 13px; letter-spacing: .14em; color: var(--cz-amarillo); margin-bottom: 10px; }
.cz-como-item h4 { margin: 0 0 8px; font-family: var(--cz-display); font-weight: 900; text-transform: uppercase; font-size: 20px; line-height: 1.05; letter-spacing: -.01em; color: #fff; }
.cz-como-item p { margin: 0; color: #CFDAEE; font-size: 14px; line-height: 1.5; }

/* Pie de página institucional */
.cz-pie { position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 10, 24, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cz-pie-in { max-width: 1100px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 28px); display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; color: var(--cz-texto-3); font-size: 12.5px; line-height: 1.5; }
.cz-pie-in b { color: #fff; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
.cz-pie-in a { color: var(--cz-texto-2); text-decoration: none; font-weight: 700; }
.cz-pie-in a:hover { color: #fff; }

/* Acceso */
.cz-login { background: var(--cz-sup-1); border-color: rgba(255, 255, 255, .10); }
.cz-login h2 { font-size: clamp(32px, 6vw, 44px); line-height: .9; }
.cz-login button { letter-spacing: .02em; transition: background .18s ease; }
.cz-login input[type=password] { height: 52px; }
@media print { .cz-pie { display: none !important; } }