/* ═══════════════════════════════════════════════════════════════════════════
   CAMPUS VIRTUAL — Sistema de diseño
   Única fuente de verdad: tokens + componentes. Ninguna vista define colores.
   Paleta del proyecto: azul institucional (#0e223b en las bandas oscuras).
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 1. PALETA (lo único que cambia por proyecto) ───────────────────────── */
:root {
    --color-accent:  #1e5fa8;   /* azul institucional (matiz de #0e223b) */
    --color-bg:      #f4f7fb;
    --color-surface: #ffffff;
    --color-text:    #111827;
    --rojo:          #dc2626;

    /* Rampa del acento */
    --a-100: #eef4fb;
    --a-200: #d4e3f5;
    --a-300: #93bde6;
    --a-500: #2f7fd0;
    --a-600: #17497f;
    --a-700: #123a66;

    /* Neutrales (tinte frío) */
    --n-100: #f7f9fc;
    --n-200: #edf1f7;
    --n-300: #dce3ed;
    --n-400: #b6c0cf;
    --n-500: #929db0;
    --n-600: #697487;
    --n-700: #4a5568;
    --n-800: #323c4b;
    --n-900: #1c2532;

    --color-divider: #e4eaf3;

    /* Banda oscura: hero del portal y reproductor del aula.
       Es la única zona que NO se invierte con el tema: siempre oscura.
       El azul de marca del proyecto vive aquí. */
    --oscuro-bg:     #0e223b;
    --oscuro-bg-2:   #17385e;
    --oscuro-texto:  #e9f0f8;
    --oscuro-tenue:  #97aec7;
    --oscuro-borde:  #234873;
    --oscuro-chip:   #1a3557;

    /* Alerta suave */
    --amb-100: #fef3c7;
    --amb-700: #92400e;
    /* Positivo */
    --ok-100: #ecfdf5;
    --ok-700: #047857;
    /* Destructivo suave */
    --rojo-100: #fef2f2;

    --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-6: 24px; --space-8: 32px;
    --radius: 14px; --radius-sm: 10px; --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(14, 34, 59, .06);
    --shadow-md: 0 8px 24px rgba(14, 34, 59, .12);

    --sidebar-ancho: 236px;
    --sidebar-min: 68px;
    --topbar-alto: 57px;
}

/* ── 2. TEMA OSCURO (mismos tokens, otros valores) ──────────────────────── */
html[data-tema="oscuro"] {
    --color-accent:  #2f7fd0;
    --color-bg:      #08131f;
    --color-surface: #0e1c2c;
    --color-text:    #e7eef7;

    --a-100: #10263c;
    --a-200: #163d63;
    --a-300: #6aa9e0;
    --a-500: #4090dd;
    --a-600: #8fc4ee;
    --a-700: #b6daf5;

    --n-100: #101d2c;
    --n-200: #172736;
    --n-300: #223447;
    --n-400: #3a5169;
    --n-500: #7d90a8;
    --n-600: #a0b1c6;
    --n-700: #c2cfdd;
    --n-800: #dbe4ee;
    --n-900: #eef3f9;

    --color-divider: #1a2a3b;

    --oscuro-bg:     #0a1728;
    --oscuro-bg-2:   #10263f;
    --oscuro-texto:  #e7eef7;
    --oscuro-tenue:  #8ea4bd;
    --oscuro-borde:  #1d344f;
    --oscuro-chip:   #152b45;

    --amb-100: #3a2c08; --amb-700: #fcd34d;
    --ok-100: #082e22;  --ok-700: #6ee7b7;
    --rojo: #f87171;    --rojo-100: #3a1414;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
}

/* ── 3. TIPOGRAFÍA ──────────────────────────────────────────────────────── */
body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font);
    font-size: 13.5px;
}

body, body * { font-family: var(--font); }
code, pre, .mono { font-family: ui-monospace, Consolas, 'Courier New', monospace; }

::selection { background: var(--a-200); }

/* Barras de desplazamiento discretas: la nativa de Windows es un bloque gris
   de 17 px con flechas que arruina el menú y cualquier caja con scroll. */
* { scrollbar-width: thin; scrollbar-color: var(--n-300) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--n-400); }
::-webkit-scrollbar-corner { background: transparent; }

.kicker {
    font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--n-500);
}
.titulo-vista { font-size: 19px; font-weight: 800; letter-spacing: -.015em; }
.meta { font-size: 11px; color: var(--n-500); }
.ayuda { font-size: 11.5px; color: var(--n-500); }
.fuerte { font-weight: 800; }
.acento { color: var(--a-600); }
.tenue { color: var(--n-600); }
.num-kpi { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── 4. SHELL DEL PANEL ─────────────────────────────────────────────────── */
.app { display: flex; min-height: 100dvh; }

.sidebar {
    width: var(--sidebar-ancho);
    flex: 0 0 var(--sidebar-ancho);
    background: var(--color-surface);
    border-right: 1px solid var(--color-divider);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100dvh;
    transition: width .18s ease, flex-basis .18s ease;
    z-index: 40;
}
.sidebar.comprimido { width: var(--sidebar-min); flex-basis: var(--sidebar-min); }

.marca {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 0 var(--space-4); height: var(--topbar-alto);
    border-bottom: 1px solid var(--color-divider); flex: 0 0 auto;
}
.marca-caja {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--radius-sm);
    background: var(--color-accent); color: #fff;
    display: grid; place-items: center; font-weight: 800; font-size: 13px;
}
/* Marca del sitio: logo cargado o caja con iniciales */
.logo-sitio { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; }
.logo-sitio img { width: auto; max-width: 190px; object-fit: contain; }
.logo-sitio b { font-size: 15px; font-weight: 800; letter-spacing: -.015em; white-space: nowrap; }
/* Un logo pensado para fondo claro necesita ayuda sobre las bandas oscuras. */
.logo-sitio img.invertir-oscuro { filter: brightness(0) invert(1); }

.marca-texto { display: flex; flex-direction: column; overflow: hidden; }
.marca-texto b { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.marca-texto span { font-size: 10.5px; color: var(--n-500); white-space: nowrap; }

.nav { flex: 1 1 auto; overflow-y: auto; padding: var(--space-3) var(--space-2); }
.nav-grupo + .nav-grupo { margin-top: var(--space-4); }
.nav-grupo > p { padding: 0 var(--space-3) var(--space-2); }

.nav-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 8px var(--space-3); border-radius: var(--radius-sm);
    color: var(--n-700); font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden;
}
.nav-item svg { flex: 0 0 17px; }
.nav-item:hover { background: var(--n-100); color: var(--color-text); }
.nav-item.activo { background: var(--a-100); color: var(--a-600); font-weight: 800; }
.nav-item .contador {
    margin-left: auto; font-size: 10.5px; font-weight: 800;
    background: var(--n-200); color: var(--n-600);
    border-radius: var(--radius-pill); padding: 1px 7px;
}
.nav-item.activo .contador { background: var(--color-accent); color: #fff; }

.sidebar.comprimido .marca-texto,
.sidebar.comprimido .nav-grupo > p,
.sidebar.comprimido .nav-item span,
.sidebar.comprimido .nav-item .contador,
.sidebar.comprimido .pie-datos { display: none; }
.sidebar.comprimido .nav-item { justify-content: center; padding: 9px 0; }
.sidebar.comprimido .marca { justify-content: center; padding: 0; }
.sidebar.comprimido .pie { flex-direction: column; gap: var(--space-2); }

.pie {
    flex: 0 0 auto; border-top: 1px solid var(--color-divider);
    padding: var(--space-3); display: flex; align-items: center; gap: var(--space-3);
}
.pie-datos { overflow: hidden; }
.pie-datos b { display: block; font-size: 12.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.pie-datos span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--n-500); }
.pie .salir { margin-left: auto; color: var(--n-500); display: grid; place-items: center; padding: 6px; border-radius: 8px; }
.pie .salir:hover { color: var(--rojo); background: var(--rojo-100); }

.contenido { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    height: var(--topbar-alto); flex: 0 0 var(--topbar-alto);
    background: var(--color-surface); border-bottom: 1px solid var(--color-divider);
    display: flex; align-items: center; gap: var(--space-3);
    padding: 0 var(--space-6); position: sticky; top: 0; z-index: 30;
}
.topbar h1 { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.topbar .lema {
    font-size: 12px; color: var(--n-500);
    padding-left: var(--space-3); border-left: 1px solid var(--color-divider);
}
.topbar .derecha { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

/* Sin tope de ancho: las tablas del panel aprovechan toda la pantalla. */
main.vista { padding: var(--space-6); width: 100%; }

/* ── 5. BOTONES ─────────────────────────────────────────────────────────── */
.btn, .btn-sec, .btn-mini, .btn-icono {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    border-radius: var(--radius-sm); font-weight: 700; line-height: 1;
    transition: background .15s ease, border-color .15s ease, color .15s ease,
                box-shadow .15s ease, transform .1s ease;
    white-space: nowrap; cursor: pointer;
}
.btn svg, .btn-sec svg, .btn-mini svg { flex: 0 0 auto; }

/* Primario: uno por zona. Lleva sombra de color para separarse del fondo. */
.btn {
    background: var(--color-accent); color: #fff; font-weight: 800;
    padding: 11px 20px; font-size: 13.5px; border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(14, 34, 59, .16), 0 6px 16px -6px rgba(30, 95, 168, .55);
}
.btn:hover { background: var(--a-600); box-shadow: 0 2px 4px rgba(14, 34, 59, .2), 0 10px 22px -8px rgba(30, 95, 168, .6); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(14, 34, 59, .2); }
html[data-tema="oscuro"] .btn { color: #06121e; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
html[data-tema="oscuro"] .btn:hover { background: var(--a-500); }

.btn:disabled, .btn-sec:disabled, .btn-mini:disabled {
    opacity: .45; cursor: not-allowed; box-shadow: none; transform: none;
}

/* Secundario: mismo alto que el primario para que la pareja no baile */
.btn-sec {
    background: var(--color-surface); color: var(--n-700);
    border: 1px solid var(--n-300); padding: 10px 18px; font-size: 13.5px; font-weight: 700;
}
.btn-sec:hover { border-color: var(--a-300); color: var(--a-600); background: var(--a-100); }
.btn-sec:active { transform: translateY(1px); }

.btn-mini {
    font-size: 11.5px; padding: 6px 11px; border-radius: 8px;
    border: 1px solid var(--n-300); color: var(--n-700); background: var(--color-surface);
}
.btn-mini:hover { border-color: var(--a-300); color: var(--a-600); background: var(--a-100); }
.btn-mini.peligro:hover { border-color: var(--rojo); color: var(--rojo); background: var(--rojo-100); }

.btn-icono {
    width: 36px; height: 36px; padding: 0;
    border: 1px solid var(--n-300); color: var(--n-600); background: var(--color-surface);
}
.btn-icono:hover { color: var(--a-600); border-color: var(--a-300); background: var(--a-100); }
.btn-icono.plano { border-color: transparent; background: none; }
.btn-icono.plano:hover { background: var(--n-100); }

.btn.btn-rojo, .btn-sec.btn-rojo {
    background: transparent; color: var(--rojo); border: 1px solid var(--rojo); box-shadow: none;
}
.btn.btn-rojo:hover, .btn-sec.btn-rojo:hover { background: var(--rojo-100); box-shadow: none; }

.btn-bloque { width: 100%; }
/* Un botón grande para la acción que cierra la compra */
.btn-lg { padding: 14px 24px; font-size: 15px; border-radius: var(--radius-sm); }

/* ── 6. CAMPOS ──────────────────────────────────────────────────────────── */
.campo-form { display: flex; flex-direction: column; gap: var(--space-1); }
.campo-form > label, .etiqueta {
    font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--n-600);
}
.campo-form input[type=text], .campo-form input[type=email], .campo-form input[type=password],
.campo-form input[type=number], .campo-form input[type=date], .campo-form input[type=datetime-local],
.campo-form input[type=url], .campo-form input[type=tel], .campo-form input[type=search],
.campo-form input[type=file], .campo-form select, .campo-form textarea {
    width: 100%; background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--n-300); border-radius: var(--radius-sm);
    padding: 9px 11px; font-size: 13px;
}
.campo-form textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.campo-form input:focus, .campo-form select:focus, .campo-form textarea:focus {
    outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--a-200);
}
.campo-form input:disabled, .campo-form select:disabled, .campo-form textarea:disabled { opacity: .55; }
.campo-form .error { color: var(--rojo); font-size: 11.5px; font-weight: 600; }

.check {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: 12.5px; font-weight: 600; color: var(--n-700); cursor: pointer;
}
.check input[type=checkbox], .check input[type=radio] {
    width: 16px; height: 16px; accent-color: var(--color-accent); cursor: pointer;
}

.buscador { position: relative; flex: 1 1 260px; max-width: 340px; }
.buscador svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--n-500); pointer-events: none; }
.buscador input {
    width: 100%; background: var(--n-200); border: 1px solid transparent;
    border-radius: var(--radius-sm); padding: 9px 12px 9px 34px; font-size: 13px; color: var(--color-text);
}
.buscador input:focus { outline: none; background: var(--color-surface); border-color: var(--color-accent); }

/* ── Campo de contraseña: el ojo va DENTRO del campo ─────────────────────── */
.campo-clave { position: relative; }
.campo-clave input { width: 100%; padding-right: 44px !important; }
.campo-clave .ojo {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; display: grid; place-items: center;
    border-radius: 8px; color: var(--n-500); background: none; border: 0;
}
.campo-clave .ojo:hover { color: var(--a-600); background: var(--n-100); }

/* Medidor de fuerza y requisitos en vivo */
.clave-fuerza { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.clave-fuerza .pistas { display: flex; gap: 4px; flex: 1 1 auto; }
.clave-fuerza .pistas i {
    height: 4px; flex: 1 1 auto; border-radius: var(--radius-pill);
    background: var(--n-200); transition: background .2s ease;
}
.clave-fuerza .pistas i.on-1 { background: var(--rojo); }
.clave-fuerza .pistas i.on-2 { background: var(--amb-700); }
.clave-fuerza .pistas i.on-3 { background: var(--a-500); }
.clave-fuerza .pistas i.on-4 { background: var(--ok-700); }
.clave-fuerza .nivel { font-size: 11.5px; font-weight: 800; white-space: nowrap; }

.clave-reglas { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-2); }
.clave-reglas li {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--n-500); transition: color .16s ease;
}
.clave-reglas li svg { flex: 0 0 14px; }
.clave-reglas li.ok { color: var(--ok-700); font-weight: 700; }

/* ── Revisar un pago: voucher a la izquierda, datos a la derecha ─────────── */
.revisar-pago { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-6); align-items: start; }
.revisar-pago .datos-pago { display: flex; flex-direction: column; gap: var(--space-2); font-size: 13px; }
.revisar-pago .datos-pago .fila { gap: var(--space-3); }

@media (max-width: 760px) {
    .revisar-pago { grid-template-columns: 1fr; }
}

/* ── Perfil ─────────────────────────────────────────────────────────────── */
.perfil { display: flex; flex-direction: column; gap: var(--space-4); }
.perfil-cab { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.perfil-cab h2 { font-size: 19px; font-weight: 800; letter-spacing: -.015em; }
.avatar.xl { width: 68px; height: 68px; flex-basis: 68px; font-size: 22px; }

/* Foto: la vista previa manda, el input de archivo se esconde */
.foto-campo { display: flex; align-items: center; gap: var(--space-4); }
.foto-campo .avatar { border: 2px solid var(--color-divider); }

/* ── 7. PANELES ─────────────────────────────────────────────────────────── */
.panel {
    background: var(--color-surface); border: 1px solid var(--color-divider);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.panel-p { padding: var(--space-4); }
.panel.aviso-borde { border-left: 3px solid var(--color-accent); }
.panel.destacado { border-top: 3px solid var(--color-accent); }

.panel-cab {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4); border-bottom: 1px solid var(--color-divider);
    flex-wrap: wrap;
}
.panel-cab .crece { flex: 1 1 auto; min-width: 0; }
.panel-cab h2, .panel-cab h3 { font-size: 13.5px; font-weight: 800; }
.panel-icono {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--radius-sm);
    background: var(--a-100); color: var(--a-600); display: grid; place-items: center;
}

.rejilla { display: grid; gap: var(--space-4); }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
/* auto-fill y no auto-fit: con una o dos tarjetas, auto-fit las estira a todo
   el ancho y las portadas quedan enormes. Así conservan su tamaño natural. */
.cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(264px, 100%), 1fr)); }
.fila { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.fila-fin { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.pila { display: flex; flex-direction: column; gap: var(--space-4); }
.pila-2 { display: flex; flex-direction: column; gap: var(--space-2); }

/* ── 8. TABLAS ──────────────────────────────────────────────────────────── */
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; min-width: 560px; font-size: 13px; table-layout: auto; }
.tabla thead th {
    text-align: left; font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .07em; color: var(--n-500); background: var(--n-100);
    padding: 10px var(--space-4); white-space: nowrap;
}
/* Estado y acciones ocupan lo justo; el ancho sobrante se lo queda la primera
   columna, que es la que describe la fila. */
.tabla th.der, .tabla td.der { width: 1%; white-space: nowrap; }
.tabla tbody td { padding: 12px var(--space-4); border-top: 1px solid var(--n-200); vertical-align: middle; }
.tabla tbody tr { transition: background .12s ease; }
.tabla tbody tr:hover { background: var(--n-100); }
.tabla .der { text-align: right; }
.tabla .acciones { display: flex; gap: var(--space-1); justify-content: flex-end; }
.tabla .principal { font-weight: 700; }

.paginacion {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-divider);
    font-size: 12px; color: var(--n-600); flex-wrap: wrap;
}
.paginacion .controles { display: flex; align-items: center; gap: var(--space-2); }

/* ── 9. CHIPS, BADGES, ESTADOS ──────────────────────────────────────────── */
.chip {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
    padding: 5px 12px; border-radius: var(--radius-pill);
    background: var(--n-200); color: var(--n-700); border: 1px solid transparent;
}
.chip:hover { background: var(--a-100); color: var(--a-600); }
.chip.activo { background: var(--n-900); color: var(--color-bg); }
.chip .cuenta { opacity: .7; font-weight: 800; }

.badge {
    display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em; padding: 3px 7px; border-radius: 6px;
    background: var(--n-200); color: var(--n-700);
}
.badge.ok { background: var(--ok-100); color: var(--ok-700); }
.badge.alerta { background: var(--amb-100); color: var(--amb-700); }
.badge.peligro { background: var(--rojo-100); color: var(--rojo); }
.badge.acento { background: var(--a-100); color: var(--a-600); }

.chip-estado {
    display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
    padding: 3px 10px; border-radius: var(--radius-pill);
    background: var(--n-200); color: var(--n-700);
}
.chip-estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-estado.ok { background: var(--ok-100); color: var(--ok-700); }
.chip-estado.alerta { background: var(--amb-100); color: var(--amb-700); }
.chip-estado.peligro { background: var(--rojo-100); color: var(--rojo); }
.chip-estado.acento { background: var(--a-100); color: var(--a-600); }

/* ── 10. KPIs ───────────────────────────────────────────────────────────── */
.stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    background: var(--color-surface); border: 1px solid var(--color-divider);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}
.stat { padding: var(--space-4); border-left: 1px solid var(--color-divider); }
.stat:first-child { border-left: 0; }
.stat .icono-caja {
    width: 30px; height: 30px; border-radius: 9px; background: var(--a-100); color: var(--a-600);
    display: grid; place-items: center; margin-bottom: var(--space-3);
}
.stat b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.stat .kicker { margin-top: 3px; }
.stat .detalle { font-size: 11.5px; color: var(--n-500); margin-top: 5px; }

@media (max-width: 860px) {
    .stat { border-left: 0; border-top: 1px solid var(--color-divider); }
    .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── 11. AVATAR ─────────────────────────────────────────────────────────── */
.avatar {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
    background: var(--a-100); color: var(--a-600);
    display: grid; place-items: center; font-size: 12px; font-weight: 800;
    overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.solido { background: var(--n-900); color: var(--color-bg); }
.avatar.entidad { border-radius: 10px; }
.avatar.sm { width: 28px; height: 28px; flex-basis: 28px; font-size: 10.5px; }
.avatar.lg { width: 46px; height: 46px; flex-basis: 46px; font-size: 15px; }

/* ── 12. ESTADOS Y AVISOS ───────────────────────────────────────────────── */
/* Estado vacío: columna centrada. En bloque el botón se quedaba en la misma
   línea que el texto, porque un enlace es inline y el margen no le aplicaba. */
.vacio {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: var(--space-8) var(--space-4); text-align: center;
    color: var(--n-500); font-size: 12.5px;
}
.vacio > svg {
    width: 22px; height: 22px; padding: 13px; margin-bottom: var(--space-3);
    box-sizing: content-box; border-radius: 50%;
    background: var(--n-100); color: var(--n-400);
}
.vacio b { color: var(--n-700); font-size: 14.5px; font-weight: 800; }
.vacio span { max-width: 44ch; line-height: 1.6; }
.vacio .btn, .vacio .btn-sec { margin-top: var(--space-4); }

.aviso { font-size: 12.5px; font-weight: 600; color: var(--n-600); display: flex; align-items: center; gap: var(--space-2); }
.aviso.ok { color: var(--a-600); }
.aviso.error { color: var(--rojo); }
.aviso.caja {
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
    background: var(--n-100); border: 1px solid var(--color-divider);
}
.aviso.caja.ok { background: var(--ok-100); border-color: transparent; color: var(--ok-700); }
.aviso.caja.alerta { background: var(--amb-100); border-color: transparent; color: var(--amb-700); }
.aviso.caja.error { background: var(--rojo-100); border-color: transparent; color: var(--rojo); }

/* ── 13. MODAL ──────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--space-4); }
.modal-fondo { position: absolute; inset: 0; background: rgba(17, 24, 39, .5); }
.modal-caja {
    position: relative; width: 100%; max-width: 440px; background: var(--color-surface);
    border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden;
    display: flex; flex-direction: column; max-height: 90dvh;
}
.modal-caja.ancho { max-width: 720px; }
.modal-caja.xl { max-width: 960px; }
/* El formulario es el único hijo de la caja: sin esto no hereda el límite de
   altura, el cuerpo nunca activa su scroll y el contenido se corta. */
.modal-caja > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.modal-cab {
    display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto;
    padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-divider);
}
.modal-cab h3 { font-size: 15px; font-weight: 800; flex: 1 1 auto; }
.modal-cuerpo {
    padding: var(--space-6); display: flex; flex-direction: column;
    gap: var(--space-4); font-size: 13.5px;
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.modal-pie {
    display: flex; justify-content: flex-end; gap: var(--space-3); flex: 0 0 auto;
    padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-divider);
    background: var(--n-100);
}

/* ── 14. TOAST ──────────────────────────────────────────────────────────── */
#toasts { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 100; display: flex; flex-direction: column; gap: var(--space-2); }
.toast {
    display: flex; align-items: center; gap: var(--space-2);
    background: var(--n-900); color: var(--color-bg);
    padding: 11px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
    font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease; max-width: 340px;
}
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--rojo); color: #fff; }

/* ── 15. DROPDOWN ───────────────────────────────────────────────────────── */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; z-index: 50;
    background: var(--color-surface); border: 1px solid var(--color-divider);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: var(--space-1); overflow: hidden;
}
.dropdown-menu a, .dropdown-menu button {
    display: flex; align-items: center; gap: var(--space-2); width: 100%;
    padding: 9px 12px; font-size: 13px; border-radius: 8px; color: var(--n-700); text-align: left;
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--n-100); color: var(--color-text); }
.dropdown-menu .peligro { color: var(--rojo); }
.dropdown-menu .separador { height: 1px; background: var(--color-divider); margin: var(--space-1) 0; }

/* ── 16. SKELETON ───────────────────────────────────────────────────────── */
.skeleton { background: var(--n-200); border-radius: 8px; animation: pulso 1.4s ease-in-out infinite; }
.skeleton.linea { height: 12px; }
.skeleton.titulo { height: 18px; width: 45%; }
@keyframes pulso { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

/* ── 17. TABS ───────────────────────────────────────────────────────────── */
.tabs {
    display: flex; gap: var(--space-1); padding: var(--space-1); overflow-x: auto;
    background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius);
}
.tabs a, .tabs button {
    padding: 8px 14px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 700;
    color: var(--n-600); white-space: nowrap; display: inline-flex; align-items: center; gap: 7px;
}
.tabs a:hover, .tabs button:hover { background: var(--n-100); color: var(--color-text); }
.tabs a.activo, .tabs button.activo { background: var(--a-100); color: var(--a-600); font-weight: 800; }

/* ── 18. PASOS ──────────────────────────────────────────────────────────── */
.paso { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 12.5px; color: var(--n-600); }
.paso .num {
    width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
    background: var(--a-100); color: var(--a-600); display: grid; place-items: center;
    font-size: 11px; font-weight: 800;
}

/* ── 19. PROGRESO ───────────────────────────────────────────────────────── */
.barra { height: 6px; background: var(--n-200); border-radius: var(--radius-pill); overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--color-accent); border-radius: inherit; transition: width .3s ease; }
.barra.gruesa { height: 9px; }

/* ── 20. LOGIN / AUTH ───────────────────────────────────────────────────── */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6); background: var(--color-bg); }
.auth-caja { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: var(--space-6); }
.auth-marca { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.auth-marca .marca-caja { width: 44px; height: 44px; flex-basis: 44px; font-size: 16px; }
.auth-marca b { font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
.auth-marca p { font-size: 12.5px; color: var(--n-500); }
.auth-panel { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.auth-pie { text-align: center; font-size: 12px; color: var(--n-500); }
.auth-pie a { color: var(--a-600); font-weight: 700; }

/* ── 21. DISEÑADOR DE CERTIFICADO ───────────────────────────────────────── */
.disenador { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-4); align-items: start; }

.lienzo-marco {
    background: var(--n-200); border: 1px solid var(--color-divider); border-radius: var(--radius);
    padding: var(--space-6); display: grid; place-items: center; overflow: auto;
}
/* El lienzo mantiene la proporción de la hoja; todo dentro se posiciona en % */
.lienzo {
    position: relative; width: 100%; max-width: 100%; background: #fff;
    box-shadow: var(--shadow-md); overflow: hidden; user-select: none;
}
.lienzo .fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
/* Cuadrícula de apoyo, no se imprime */
.lienzo.con-guias::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(to right, rgba(30, 95, 168, .12) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(30, 95, 168, .12) 1px, transparent 1px);
    background-size: 10% 10%;
}

.el {
    position: absolute; cursor: move; outline: 1px dashed transparent;
    outline-offset: 3px; transition: outline-color .12s ease;
}
.el:hover { outline-color: var(--a-300); }
.el.sel { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.el img { display: block; width: 100%; pointer-events: none; }
.el .tirador {
    position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px;
    background: var(--color-accent); border: 2px solid #fff; border-radius: 50%;
    cursor: ew-resize; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.lienzo-barra {
    display: flex; align-items: center; gap: var(--space-2);
    flex-wrap: wrap; margin-bottom: var(--space-3);
}
.divisor-v { width: 1px; height: 26px; background: var(--color-divider); }

/* Marco decorativo dibujado sobre el lienzo */
.marco-hoja { position: absolute; pointer-events: none; }

/* Panel de propiedades */
.props { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.props .bloque { padding: var(--space-4); border-bottom: 1px solid var(--color-divider); }
.props .bloque:last-child { border-bottom: 0; }
.props .rej-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.capas { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.capa {
    display: flex; align-items: center; gap: var(--space-2); padding: 7px var(--space-3);
    font-size: 12px; border-radius: 8px; cursor: pointer; color: var(--n-700);
}
.capa:hover { background: var(--n-100); }
.capa.sel { background: var(--a-100); color: var(--a-600); font-weight: 700; }
.capa svg { flex: 0 0 auto; color: var(--n-500); }
.capa.sel svg { color: var(--a-600); }
.capa .txt { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Fichas de variables, para insertarlas en el texto */
.variables { display: flex; flex-wrap: wrap; gap: 5px; }
.variables button {
    font-size: 11px; font-weight: 700; font-family: ui-monospace, Consolas, monospace;
    padding: 4px 8px; border-radius: 6px; border: 1px solid var(--n-300);
    background: var(--color-surface); color: var(--n-700);
}
.variables button:hover { border-color: var(--color-accent); color: var(--a-600); background: var(--a-100); }

@media (max-width: 1100px) {
    .disenador { grid-template-columns: 1fr; }
    .props { position: static; }
}

/* ── 22. UTILIDADES ─────────────────────────────────────────────────────── */
.oculto { display: none !important; }
.crece { flex: 1 1 auto; min-width: 0; }
.centrado { text-align: center; }
.derecha { text-align: right; }
.nowrap { white-space: nowrap; }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.divisor { height: 1px; background: var(--color-divider); }
.mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); }
.miniatura { width: 54px; height: 36px; border-radius: 8px; object-fit: cover; background: var(--n-200); }
.spin { animation: girar .9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ── 22. RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    main.vista { padding: var(--space-4); }
}
@media (max-width: 860px) {
    .sidebar { width: 64px; flex-basis: 64px; }
    .sidebar .marca-texto, .sidebar .nav-grupo > p, .sidebar .nav-item span,
    .sidebar .nav-item .contador, .sidebar .pie-datos { display: none; }
    .sidebar .nav-item { justify-content: center; padding: 9px 0; }
    .sidebar .marca { justify-content: center; padding: 0; }
    .sidebar .pie { flex-direction: column; }
    .topbar { padding: 0 var(--space-4); }
    .topbar .lema { display: none; }
    /* En pantallas cortas el modal aprovecha casi todo el alto y su cuerpo hace scroll. */
    .modal { padding: var(--space-3); }
    .modal-caja { max-height: 94dvh; }
    .modal-cuerpo, .modal-cab, .modal-pie { padding-left: var(--space-4); padding-right: var(--space-4); }
    .modal-cuerpo { padding-top: var(--space-4); padding-bottom: var(--space-4); }
    .rejilla-2, .rejilla-3 { grid-template-columns: 1fr; }
    #toasts { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }
    .toast { max-width: none; }
}