/* ==========================================================================
   SIRA — Sistema Integral de Rendición Administrativa: hoja de estilos principal
   Sin frameworks ni fuentes externas (compatible con la CSP del sistema).
   Paleta tomada del logo: azul marino, azul del escudo y dorado.
   ========================================================================== */

:root {
    --marca: #0b2a5b;
    --marca-2: #1565c0;
    --marca-suave: #eef3fc;
    --dorado: #f5b301;
    --acento: #1d63d6;
    --acento-hover: #164fb0;
    --menu-fondo: #0a1f44;
    --menu-texto: #c9d6f2;
    --menu-activo: #16336b;

    --fondo: #f3f5f9;
    --superficie: #ffffff;
    --borde: #e2e8f0;
    --borde-fuerte: #cbd5e1;
    --texto: #1f2937;
    --texto-suave: #64748b;

    --verde: #15803d;
    --verde-fondo: #ecfdf3;
    --rojo: #b91c1c;
    --rojo-fondo: #fef2f2;
    --ambar: #a16207;
    --ambar-fondo: #fefce8;
    --azul-fondo: #eff6ff;

    /* Compatibilidad con estilos anteriores */
    --azul: var(--marca);
    --azul-claro: var(--acento);
    --gris-fondo: var(--fondo);
    --gris-borde: var(--borde);
    --blanco: var(--superficie);
    --amarillo: var(--ambar);

    --radio: 10px;
    --radio-chico: 7px;
    --sombra: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
    --sombra-alta: 0 10px 30px rgba(15, 23, 42, 0.15);
    --menu-ancho: 252px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    background: var(--fondo);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.45rem; line-height: 1.25; margin: 0 0 18px; letter-spacing: -0.01em; }
h2 { font-size: 1.1rem; margin: 26px 0 12px; }
h3 { font-size: 1rem; margin: 20px 0 10px; }

.icono { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------------------------------------------------------------- Layout */

.layout { display: flex; min-height: 100vh; }

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--menu-ancho);
    background: var(--menu-fondo);
    color: var(--menu-texto);
    display: flex;
    flex-direction: column;
    z-index: 30;
    overflow-y: auto;
}

.marca-sistema {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 20px 18px 18px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.marca-sistema:hover { text-decoration: none; }
.marca-sistema img { flex-shrink: 0; }
.marca-sistema strong { display: block; font-size: 1.3rem; letter-spacing: 0.06em; line-height: 1.1; }
.marca-sistema small { display: block; font-size: 0.72rem; color: #94a3b8; line-height: 1.3; }

.menu { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; flex-grow: 1; }
.menu a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--menu-texto);
    font-size: 0.92rem;
    font-weight: 500;
}
.menu a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; }
.menu a.activo { background: var(--menu-activo); color: #fff; box-shadow: inset 3px 0 0 var(--dorado); }
.menu a span { flex-grow: 1; }
.menu-grupo { margin: 14px 12px 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #7f93bd; }
.contador {
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f59e0b;
    color: #1f2937;
    text-align: center;
}

.sidebar-pie { padding: 12px 20px 16px; font-size: 0.72rem; color: #64748b; }
/* Acceso discreto a Actualizaciones y respaldos: la versión al pie del menú (1.24.0). */
.sidebar-pie > a, .sidebar-pie > span { display: flex; align-items: center; gap: 6px; color: #64748b; }
.sidebar-pie > a + a, .sidebar-pie > span + a { margin-top: 4px; }
.sidebar-pie > a:hover, .sidebar-pie > a.activo { color: #cbd5e1; text-decoration: none; }
.sidebar-pie > a.sidebar-licencia.con-aviso { color: #fbbf24; }
.punto-actualizacion { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25); }
.aviso-actualizacion { position: relative; display: flex; align-items: center; padding: 8px; border-radius: 10px; color: var(--texto); margin-left: auto; }
.aviso-actualizacion:hover { background: var(--marca-suave); }
.aviso-actualizacion .icono { width: 22px; height: 22px; }
.aviso-actualizacion .punto-actualizacion { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; }
.aviso-actualizacion + .campana { margin-left: 0; }
.sesion-icono.aviso-act-icono { background: #e0ecff; color: var(--marca); }
.aviso-act-icono .icono { width: 28px; height: 28px; }
.respaldos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.respaldo-bloque { border: 1px solid var(--borde); border-radius: 12px; padding: 4px 16px 16px; }
.respaldo-bloque h3 { margin: 12px 0 10px; }
.aviso-act-omitir { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; font-size: .85rem; color: var(--texto-suave); font-weight: 500; }

.principal { flex-grow: 1; margin-left: var(--menu-ancho); min-width: 0; display: flex; flex-direction: column; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 60px;
    padding: 0 28px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--borde);
}
.topbar-contexto { flex-grow: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-contexto strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.95rem; }
/* El organismo es lo principal; la escuela va debajo y más discreta. */
.topbar-identidad { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.topbar-identidad small { color: var(--texto-suave); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--marca-suave);
    color: var(--marca);
    white-space: nowrap;
}

.menu-toggle {
    display: none;
    border: 1px solid var(--borde);
    background: var(--superficie);
    border-radius: 8px;
    padding: 7px;
    cursor: pointer;
    color: var(--texto);
}

.usuario-menu { position: relative; }
.usuario-menu summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 10px;
}
.usuario-menu summary::-webkit-details-marker { display: none; }
.usuario-menu summary:hover { background: var(--fondo); }
.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--marca), var(--marca-2));
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
}
.usuario-datos { display: flex; flex-direction: column; line-height: 1.2; }
.usuario-datos strong { font-size: 0.88rem; }
.usuario-datos small { font-size: 0.75rem; color: var(--texto-suave); }
.usuario-desplegable {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 220px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
    padding: 6px;
}
.usuario-desplegable a,
.usuario-desplegable button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    background: none;
    border-radius: 7px;
    color: var(--texto);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
}
.usuario-desplegable a:hover,
.usuario-desplegable button:hover { background: var(--fondo); text-decoration: none; }
.usuario-desplegable form { margin: 0; }
.usuario-desplegable .icono { width: 18px; height: 18px; color: var(--texto-suave); }

.contenido { padding: 26px 28px 40px; max-width: 1280px; width: 100%; }

.velo { display: none; }

/* Selector de ciclo y modo de solo consulta */
.selector-ciclo { position: relative; }
.selector-ciclo > summary { list-style: none; cursor: pointer; }
.selector-ciclo > summary::-webkit-details-marker { display: none; }
.selector-ciclo-lista {
    position: absolute; left: 0; top: calc(100% + 8px); z-index: 45; min-width: 260px; background: var(--superficie);
    border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra-alta); padding: 8px;
}
.selector-ciclo-lista a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--texto); font-weight: 600; }
.selector-ciclo-lista a:hover { background: var(--marca-suave); text-decoration: none; }
.selector-ciclo-lista a.activo { background: var(--marca-suave); color: var(--marca); }
.chip-consulta { background: #fff4d6 !important; color: #8a5a00 !important; border-color: #f5d38a !important; }
.franja-consulta {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -8px 0 20px; padding: 12px 16px; border-radius: 12px;
    background: repeating-linear-gradient(135deg, #fff8e1, #fff8e1 12px, #fff3cc 12px, #fff3cc 24px); border: 1px solid #f5d38a; color: #6b4500;
}
.franja-consulta > span { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; }
.franja-consulta .boton { background: #6b4500; border-color: #6b4500; }
/* Licencia (1.25.0) */
.chip-prueba { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
.franja-licencia { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -8px 0 20px; padding: 12px 16px; border-radius: 12px; border: 1px solid; }
.franja-licencia > span { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; }
.franja-licencia-aviso { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.franja-licencia-aviso .boton { background: #3730a3; border-color: #3730a3; }
.franja-licencia-gracia { background: #fff8e1; border-color: #f5d38a; color: #6b4500; }
.franja-licencia-gracia .boton { background: #6b4500; border-color: #6b4500; }
.franja-licencia-bloqueo { background: #fdecea; border-color: #f5c6c2; color: #8f1d14; }
.franja-licencia-bloqueo .boton { background: #8f1d14; border-color: #8f1d14; }
.licencia-cabecera { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.05rem; }
.licencia-datos { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 18px 0; }
.licencia-datos dt { color: var(--texto-suave); font-size: .85rem; }
.licencia-datos dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
/* Organismo APF / CEPS (1.28.0) */
.opciones-organismo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-bottom: 6px; }
.opcion-organismo { display: flex !important; gap: 10px; align-items: flex-start; border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-weight: 500 !important; }
.opcion-organismo:has(input:checked) { border-color: var(--acento); background: #f3f7ff; }
.opcion-organismo input { width: auto !important; margin-top: 3px; }
.opcion-organismo span strong { display: block; }
.opcion-organismo span small { display: block; color: var(--texto-suave); font-size: .82rem; font-weight: 400; margin-top: 2px; }
[data-nivel-solo][hidden] { display: none !important; }
/* Reglamentos */
.lista-documentos { list-style: none; margin: 0; padding: 0; }
.lista-documentos li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--borde); }
.lista-documentos li:first-child { border-top: none; padding-top: 0; }
.documento-icono { width: 40px; height: 40px; border-radius: 10px; background: var(--marca-suave); color: var(--marca); display: grid; place-items: center; flex-shrink: 0; }
.documento-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; }
/* Configuración inicial */
.arranque { max-width: 900px; margin: 0 auto; }
.arranque-pasos { list-style: none; display: flex; gap: 6px; flex-wrap: wrap; padding: 0; margin: 0 0 18px; }
.arranque-pasos li { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borde); color: var(--texto-suave); font-size: .85rem; }
.arranque-pasos li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #eef2f7; font-weight: 700; font-size: .78rem; }
.arranque-pasos li.actual { border-color: var(--acento); color: var(--texto); font-weight: 700; }
.arranque-pasos li.actual span { background: var(--dorado); color: var(--marca); }
.arranque-pasos li.hecho span { background: var(--verde, #15803d); color: #fff; }
.arranque-pasos li a { color: inherit; text-decoration: none; }
.arranque-resumen { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0 0 18px; }
.arranque-resumen dt { color: var(--texto-suave); font-size: .88rem; }
.arranque-resumen dd { margin: 0; font-weight: 500; }
.arranque-resumen dd a { font-weight: 400; font-size: .85rem; margin-left: 6px; }
@media (max-width: 640px) { .arranque-resumen { grid-template-columns: 1fr; gap: 2px; } .arranque-resumen dd { margin-bottom: 8px; } }
.codigo-arranque { font-family: ui-monospace, Consolas, monospace; letter-spacing: .12em; font-size: 1.15rem; text-transform: uppercase; }
.form-arranque-codigo { max-width: 360px; }
.aviso-codigo-perdido { margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: #f8fafc; border: 1px solid var(--borde); display: flex; flex-direction: column; gap: 2px; font-size: .9rem; }
.aviso-codigo-perdido span { color: var(--texto-suave); }
.opcion-dual { background: #f8fafc; border: 1px dashed var(--borde-fuerte); border-radius: 12px; padding: 12px 14px; }
.opcion-dual input { width: auto !important; }
.soporte-datos { background: #f8fafc; border: 1px dashed var(--borde-fuerte); border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; }
.soporte-datos pre { margin: 0; font: .85rem/1.6 ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-all; color: var(--marca); }
.texto-licencia { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; word-break: break-all; }
.aviso-privacidad-texto { max-width: 820px; margin: 0 auto; line-height: 1.65; }
.aviso-privacidad-texto h2 { font-size: 1.05rem; margin: 22px 0 6px; }
.aviso-privacidad-texto p { margin: 0 0 10px; }
/* En modo consulta no se muestran formularios de captura (el servidor además los rechaza). */
.modo-consulta .contenido form[method="post"]:not([data-consulta]),
.modo-consulta .contenido form[method="POST"]:not([data-consulta]),
.modo-consulta .contenido details.cancelar,
.modo-consulta .contenido .acciones-rapidas { display: none !important; }
@media (max-width: 900px) { .selector-ciclo-lista { position: fixed; left: 12px; right: 12px; top: 60px; } }

/* Gráficas (SVG generado en el servidor) */
.graficas-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 0 20px; }
.grafica-tarjeta.ancha { grid-column: 1 / -1; }
.grafica { width: 100%; height: auto; display: block; }
.grafica-guia { stroke: #e2e8f0; stroke-width: 1; }
.grafica-eje { font-size: 11px; fill: #64748b; font-family: inherit; }
.grafica-linea { fill: none; stroke: #1565c0; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.grafica-area { fill: rgba(21, 101, 192, 0.12); }
.grafica-punto { fill: #fff; stroke: #1565c0; stroke-width: 2.5; }
.grafica rect:hover, .grafica-punto:hover { opacity: 0.8; }
.grafica-leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; padding: 0; font-size: 0.85rem; }
.grafica-leyenda li { display: flex; align-items: center; gap: 6px; }
.grafica-leyenda span { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.grafica-leyenda.vertical { flex-direction: column; }
.grafica-dona { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.grafica-dona svg { width: 170px; height: 170px; flex-shrink: 0; }
.grafica-dona-total { font-size: 22px; font-weight: 800; fill: #0b2a5b; }
.grafica-medidor { text-align: center; }
.grafica-medidor svg { width: 100%; max-width: 280px; }
.grafica-medidor-valor { font-size: 30px; font-weight: 800; fill: #0b2a5b; }
.grafica-medidor p { margin: 0; color: var(--texto-suave); font-size: 0.9rem; }
.grafica-barras-h { display: grid; gap: 8px; }
.gbh-fila { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: 0.86rem; }
.gbh-etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbh-barras { display: grid; gap: 3px; background: #f1f5f9; border-radius: 6px; padding: 3px; }
.gbh-barras i { display: block; height: 10px; border-radius: 4px; min-width: 2px; }
.gbh-texto { color: var(--texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.grafica-datos { margin-top: 10px; font-size: 0.86rem; }
.grafica-datos summary { cursor: pointer; color: var(--acento); }
@media (max-width: 520px) {
    .gbh-fila { grid-template-columns: 1fr auto; } .gbh-barras { grid-column: 1 / -1; grid-row: 2; }
    /* En celular las gráficas de barras y línea conservan un tamaño legible y se desplazan dentro de su tarjeta. */
    svg.grafica { min-width: 600px; }
}
@media print { .grafica-tarjeta { break-inside: avoid; } }

/* Convocatorias "Voz de la comunidad" */
.convocatorias-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.convocatoria-tarjeta { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.convocatoria-tarjeta strong { font-size: 1.05rem; }
.convocatoria-tarjeta .badge { align-self: flex-start; }
.compartir-convocatoria { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.compartir-qr svg { width: 150px; height: 150px; display: block; }
.compartir-convocatoria > div:last-child { flex: 1 1 320px; min-width: 0; }
.enlace-copiar input { width: 100%; padding: 9px 12px; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-chico); background: #f8fafc; font: inherit; color: var(--marca); }
.boton.boton-whatsapp { background: #16a34a; border-color: #16a34a; }
.boton.boton-whatsapp:hover { background: #15803d; border-color: #15803d; }
.idea { border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; margin-top: 12px; background: #fbfcfe; }
.idea-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--borde); }
.idea-acciones select, .idea-acciones input[type=text] { padding: 6px 8px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); font: inherit; font-size: 0.85rem; }
.idea-acciones input[type=text] { min-width: 180px; }
.campo-trampa { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.voz { max-width: 1000px; margin: 0 auto; }
.voz-cabecera {
    text-align: center; padding: 34px 22px 28px; margin-bottom: 20px; border-radius: 18px; color: #fff;
    background: radial-gradient(90% 120% at 100% 0%, rgba(245, 179, 1, 0.3), transparent 60%), linear-gradient(135deg, #0b2a5b, #1565c0);
}
.voz-cabecera h1 { color: #fff; font-size: 1.9rem; margin: 6px 0 10px; }
.voz-plantel { margin: 0; font-size: 0.85rem; opacity: 0.85; }
.voz-etiqueta { display: inline-block; margin: 10px 0 0; padding: 4px 14px; border-radius: 999px; background: var(--dorado); color: #0b2a5b; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.voz-objetivo { max-width: 640px; margin: 0 auto 12px; font-size: 1.05rem; opacity: 0.95; }
.voz-fechas { margin: 0; font-size: 0.92rem; }
.voz-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0 20px; align-items: start; }
.voz-imagen { width: 100%; border-radius: 12px; margin-bottom: 12px; }
.voz-bases { line-height: 1.6; }
.voz-gracias { text-align: center; border-left: 5px solid var(--verde); }
.aviso-privacidad label { font-weight: 500; }
@media (max-width: 800px) { .voz-cuerpo { grid-template-columns: 1fr; } .voz-cabecera h1 { font-size: 1.5rem; } }
.cartel-convocatoria .cartel-cintillo { font-size: 0.85rem; letter-spacing: 0.04em; color: var(--marca); margin: 0; }
.cartel-convocatoria .cartel-voz { display: inline-block; margin: 14px 0 0; padding: 4px 16px; border-radius: 999px; background: var(--dorado); color: #0b2a5b; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.cartel-convocatoria h1 { font-size: 2.2rem; color: var(--marca); }
.cartel-convocatoria .cartel-objetivo { font-size: 1.15rem; max-width: 560px; margin: 0 auto 10px; }
.cartel-convocatoria .cartel-fechas { font-size: 1.1rem; }

/* Mesa Directiva */
.pregunta-mesa { border-left: 5px solid var(--dorado); }
.fila-integrante { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--borde); cursor: pointer; }
.fila-integrante span { flex: 1; }
.tabla-integrantes input, .tabla-integrantes select { width: 100%; padding: 7px 9px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); font: inherit; min-width: 110px; }
.clave-temporal { font-size: 1.05em; font-weight: 700; letter-spacing: 0.04em; background: #fff8e1; padding: 2px 6px; border-radius: 4px; }
.gestion-ciclo { padding: 10px 0; border-bottom: 1px dashed var(--borde); }
@media print { .accesos-nuevos { border: none; box-shadow: none; } }

/* Observaciones de auditoría */
.observacion { border: 1px solid var(--borde); border-left: 4px solid var(--ambar); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: #fffdf7; }
.observacion.atendida { border-left-color: var(--verde); background: #fbfefc; }
.observacion-cab { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.observacion-respuesta { margin-top: 10px; padding: 10px 12px; background: var(--verde-fondo); border-radius: 8px; font-size: 0.9rem; }
.observacion-responder { display: grid; gap: 8px; margin-top: 10px; }
.observacion-responder textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); font: inherit; }
.observacion-responder .boton { justify-self: start; }

/* Aviso para registrar y confirmar el correo del usuario. */
.aviso-correo {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: -8px 0 20px; padding: 12px 16px; border-radius: 12px;
    background: linear-gradient(135deg, #fff8e1, #fffbeb); border: 1px solid #fde68a; color: #78350f; font-size: 0.9rem;
}
.aviso-correo > span:nth-child(2) { flex: 1 1 260px; }
.aviso-correo-icono { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--dorado); color: #0b2a5b; flex-shrink: 0; }
.aviso-correo .boton { background: #0b2a5b; border-color: #0b2a5b; }

/* Aviso de inactividad ("¿Sigues ahí?") */
.sesion-velo {
    position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px;
    background: rgba(6, 21, 47, 0.55); backdrop-filter: blur(3px); animation: velo-entra 0.25s ease-out both;
}
.sesion-modal {
    width: min(420px, 100%); background: var(--superficie); border-radius: 18px; padding: 26px 24px 22px; text-align: center;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5); animation: aviso-entra 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.sesion-icono { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 10px; border-radius: 50%; background: #fff8e1; font-size: 1.8rem; }
.sesion-modal h2 { margin: 0 0 8px; font-size: 1.25rem; }
.sesion-modal p { margin: 0 0 18px; color: #475569; line-height: 1.5; }
.sesion-cuenta { color: var(--marca); font-variant-numeric: tabular-nums; }
.sesion-acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@keyframes velo-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sesion-velo, .sesion-modal { animation: none; } }
.recordar-equipo label { font-weight: 500; display: flex; align-items: center; gap: 2px; }
.recordar-equipo small { margin-left: 24px; }
.equipos { list-style: none; margin: 0 0 14px; padding: 0; }
.equipos li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--borde); font-size: 0.9rem; }

/* Actualizaciones: estado de la conexión con el servidor */
.estado-servidor { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--borde); background: #f8fafc; }
.estado-servidor strong { display: block; }
.estado-servidor span:not(.estado-punto) { display: block; font-size: 0.86rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.estado-punto { flex-shrink: 0; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--borde-fuerte); }
.estado-servidor.conectado { background: var(--verde-fondo); border-color: #bbf7d0; }
.estado-servidor.conectado strong { color: #166534; }
.estado-servidor.conectado .estado-punto { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2); animation: punto-latido 2s ease-in-out infinite; }
.estado-servidor.error { background: var(--rojo-fondo); border-color: #fecaca; }
.estado-servidor.error strong { color: #991b1b; }
.estado-servidor.error .estado-punto { background: var(--rojo); }
@keyframes punto-latido { 50% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.05); } }
@media (prefers-reduced-motion: reduce) { .estado-servidor.conectado .estado-punto { animation: none; } }
.al-dia { margin: 14px 0 0; font-weight: 600; color: var(--verde); }
.novedad-version { border-left: 3px solid var(--acento); background: #fbfcfe; border-radius: 0 10px 10px 0; padding: 10px 14px; margin-bottom: 12px; }
.novedad-version div { white-space: pre-line; font-size: 0.9rem; margin-top: 4px; }
.opciones-avanzadas { margin-top: 16px; border-top: 1px dashed var(--borde); padding-top: 12px; }
.opciones-avanzadas summary { cursor: pointer; color: var(--texto-suave); font-size: 0.88rem; font-weight: 600; }
.opciones-avanzadas form { margin-top: 12px; }

.ciclo-fijo { font-size: 1.3rem; font-weight: 800; color: var(--marca); letter-spacing: 0.04em; padding: 6px 0; }

/* Código de verificación de 6 dígitos */
.campo-codigo {
    width: 100%; text-align: center; font: 700 1.7rem/1 Consolas, Menlo, monospace; letter-spacing: 0.5em; padding: 12px 0 12px 0.5em !important;
}

/* ------------------------------------------------------------- Pestañas */

.pestanas {
    display: flex;
    gap: 4px;
    margin: -6px 0 22px;
    border-bottom: 1px solid var(--borde);
    overflow-x: auto;
    scrollbar-width: thin;
}
.pestanas a {
    padding: 10px 14px;
    color: var(--texto-suave);
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}
.pestanas a:hover { color: var(--texto); text-decoration: none; }
.pestanas a.activa { color: var(--marca); border-bottom-color: var(--acento); }

/* ----------------------------------------------------- Público (login) */

.contenido-publico { max-width: 440px; margin: 0 auto; padding: 48px 20px 24px; }
.contenido-publico.amplia { max-width: 1100px; padding-top: 28px; }
.portal-encabezado { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.portal-encabezado h1 { margin-bottom: 4px; }
.portal-encabezado .filtros { margin: 0; }
.grafica-barras { display: grid; gap: 12px; margin-bottom: 18px; }
.grafica-barras > div { display: grid; grid-template-columns: 170px 1fr auto; align-items: center; gap: 10px; font-size: .9rem; }
.grafica-barras .barra { height: 14px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.grafica-barras i { display: block; height: 100%; border-radius: 999px; }
.grafica-barras i.entrada { background: #16a34a; }
.grafica-barras i.salida { background: #dc2626; }
@media (max-width: 560px) { .grafica-barras > div { grid-template-columns: 1fr auto; } .grafica-barras .barra { grid-column: 1 / -1; grid-row: 2; } }
.cartel { text-align: center; }
.cartel h1 { font-size: 2.1rem; margin: 18px 0 6px; }
.cartel .cartel-qr svg { width: 300px; height: 300px; margin: 18px auto; display: block; }
.cartel .cartel-url { font-size: 1.05rem; word-break: break-all; }
.marca-publica { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; }
.marca-publica img { border-radius: 14px; box-shadow: var(--sombra); }
.marca-publica strong { display: block; font-size: 1.25rem; letter-spacing: -0.01em; }
.marca-publica small { display: block; color: var(--texto-suave); font-size: 0.82rem; }
.marca-publica.completa { margin-bottom: 18px; }
.marca-publica.completa img { box-shadow: none; border-radius: 0; width: 220px; height: auto; }
.marca-publica img[width="56"] { box-shadow: none; }
.pie-publico { text-align: center; color: var(--texto-suave); font-size: 0.78rem; margin-top: 22px; }

.login-tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 30px;
    box-shadow: var(--sombra);
}
.login-tarjeta h1 { text-align: center; font-size: 1.2rem; margin-bottom: 6px; }

/* Acceso y recuperación: fondo degradado institucional y escudo dentro de la tarjeta. */
body.acceso {
    min-height: 100vh;
    background-color: #0a1f44;
    background-image:
        radial-gradient(60% 45% at 85% 0%, rgba(245, 179, 1, 0.16), transparent 70%),
        radial-gradient(70% 55% at 0% 100%, rgba(21, 101, 192, 0.55), transparent 70%),
        linear-gradient(160deg, #06152f 0%, #0b2a5b 45%, #123f86 100%);
    background-attachment: fixed;
}
body.acceso::before {
    /* Trama muy sutil para dar textura sin distraer. */
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 75%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 75%);
}
body.acceso .contenido-publico { position: relative; padding-top: 56px; }
body.acceso .login-tarjeta {
    position: relative;
    padding-top: 26px;
    border: none;
    border-radius: 18px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
body.acceso .login-tarjeta::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--marca-2), var(--dorado));
}
.login-marca { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 14px; }
.login-marca img { width: 86px; height: auto; filter: drop-shadow(0 8px 14px rgba(11, 42, 91, 0.25)); }
.login-marca span { font-weight: 800; font-size: 1.35rem; letter-spacing: 0.12em; color: var(--marca); }
body.acceso .login-tarjeta h1 { font-size: 1.1rem; color: var(--texto); }
.acceso-enlace { text-align: center; margin-top: 18px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); }
.acceso-enlace a { color: #fff; font-weight: 600; }
.pie-acceso { text-align: center; margin-top: 28px; color: rgba(255, 255, 255, 0.78); font-size: 0.82rem; line-height: 1.5; }
.pie-acceso strong { color: #fff; letter-spacing: 0.06em; }
.pie-acceso span { display: block; color: rgba(255, 255, 255, 0.6); }
.pie-acceso small { display: block; margin-top: 6px; color: rgba(255, 255, 255, 0.45); font-size: 0.75rem; }
body.acceso .instalar-app { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: none; backdrop-filter: blur(6px); }
.login-subtitulo { text-align: center; color: var(--texto-suave); font-size: 0.87rem; margin: 0 0 22px; }

/* ------------------------------------------------------------- Tarjetas */

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: var(--sombra);
}
.tarjeta > h2:first-child, .tarjeta > h3:first-child { margin-top: 0; }

.encabezado-pagina { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.encabezado-pagina h1 { margin: 0; }
.encabezado-pagina p { margin: 4px 0 0; color: var(--texto-suave); }

.grid-metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
.metrica {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 18px;
    box-shadow: var(--sombra);
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.metrica .metrica-icono {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--marca-suave);
    color: var(--marca);
    flex-shrink: 0;
}
.metrica .metrica-icono.verde { background: var(--verde-fondo); color: var(--verde); }
.metrica .metrica-icono.rojo { background: var(--rojo-fondo); color: var(--rojo); }
.metrica .metrica-icono.ambar { background: var(--ambar-fondo); color: var(--ambar); }
.metrica .valor { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.metrica .etiqueta { font-size: 0.8rem; color: var(--texto-suave); font-weight: 600; }
.metrica.destacada { background: linear-gradient(135deg, var(--marca), var(--marca-2)); border: none; color: #fff; }
.metrica.destacada .etiqueta { color: #c7d2fe; }
.metrica.destacada .metrica-icono { background: rgba(255, 255, 255, 0.15); color: #fff; }
.metrica.alerta-borde { border-left: 4px solid var(--ambar); }

.acciones-rapidas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }

/* --------------------------------------------------------------- Tablas */

table { width: 100%; border-collapse: collapse; background: var(--superficie); }
th, td {
    text-align: left;
    padding: 11px 12px;
    border-bottom: 1px solid var(--borde);
    font-size: 0.9rem;
    vertical-align: top;
}
thead th {
    background: #f8fafc;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--texto-suave);
    white-space: nowrap;
}
tbody tr:hover td { background: #fafbfe; }
tbody tr:last-child td { border-bottom: none; }
.tarjeta > table:only-child, .tarjeta > div > table { margin: -4px 0; }
.tabla-scroll { overflow-x: auto; }

/* ---------------------------------------------------------- Formularios */

.form-grupo { margin-bottom: 16px; }
.form-grupo label { display: block; font-size: 0.84rem; font-weight: 600; margin-bottom: 6px; color: #334155; }
.form-grupo input:not([type=checkbox]):not([type=radio]),
.form-grupo select,
.form-grupo textarea,
.filtros input, .filtros select,
td input[type=text] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-chico);
    font-size: 0.93rem;
    font-family: inherit;
    background: #fff;
    color: var(--texto);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-grupo input:focus, .form-grupo select:focus, .form-grupo textarea:focus,
.filtros input:focus, .filtros select:focus, td input:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.form-grupo input[type=file] { padding: 7px; background: #f8fafc; }
.form-grupo small { display: block; margin-top: 4px; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--acento); vertical-align: -3px; margin-right: 6px; }

.form-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 18px; }
.filtros .form-grupo { margin-bottom: 0; min-width: 150px; }
.filtros form { display: contents; }

/* -------------------------------------------------------------- Botones */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--acento);
    color: #fff;
    border: 1px solid var(--acento);
    padding: 9px 18px;
    border-radius: var(--radio-chico);
    font-size: 0.92rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.boton:hover { background: var(--acento-hover); border-color: var(--acento-hover); text-decoration: none; color: #fff; }
.boton:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3); }
.boton .icono { width: 18px; height: 18px; }
.boton-secundario { background: #fff; color: var(--texto); border-color: var(--borde-fuerte); }
.boton-secundario:hover { background: #f8fafc; color: var(--texto); border-color: var(--texto-suave); }
.boton-peligro { background: var(--rojo); border-color: var(--rojo); }
.boton-peligro:hover { background: #991b1b; border-color: #991b1b; }
.boton-chico { padding: 5px 11px; font-size: 0.8rem; }
.boton:disabled, .boton[aria-disabled=true] {
    background: #e2e8f0;
    border-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
}
.link-boton { background: none; border: none; color: var(--acento); cursor: pointer; font: inherit; padding: 0; }

/* -------------------------------------------------------------- Alertas */

/* Alertas fijas dentro de las páginas: icono dibujado con CSS a la izquierda. */
.alerta {
    position: relative;
    padding: 12px 16px 12px 44px;
    border-radius: var(--radio);
    margin-bottom: 16px;
    font-size: 0.9rem;
    line-height: 1.45;
    border: 1px solid transparent;
    border-left-width: 4px;
}
.alerta::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 12px;
    width: 20px;
    height: 20px;
    background: no-repeat center / contain;
}
.alerta a { font-weight: 600; margin-left: 4px; }
.alerta-error { background: var(--rojo-fondo); color: #991b1b; border-color: #fecaca; border-left-color: var(--rojo); }
.alerta-exito { background: var(--verde-fondo); color: #166534; border-color: #bbf7d0; border-left-color: var(--verde); }
.alerta-info  { background: var(--azul-fondo); color: #1e40af; border-color: #bfdbfe; border-left-color: var(--acento); }
.alerta-error::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E"); }
.alerta-exito::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m7.5 12.5 3 3 6-7'/%3E%3C/svg%3E"); }
.alerta-info::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d63d6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v5.5M12 7.5h.01'/%3E%3C/svg%3E"); }

/* Avisos del sistema (resultado de una acción): tarjeta flotante, animada y con cierre. */
.avisos {
    position: fixed;
    top: 74px;
    right: 22px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}
.alerta[data-aviso] {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 44px 16px 14px;
    border: none;
    border-radius: 14px;
    background: var(--superficie);
    color: var(--texto);
    box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.35), 0 2px 6px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    animation: aviso-entra 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.alerta[data-aviso]::before { display: none; }
.alerta[data-aviso]::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.alerta-exito[data-aviso]::after { background: linear-gradient(180deg, #22c55e, var(--verde)); }
.alerta-error[data-aviso]::after { background: linear-gradient(180deg, #f87171, var(--rojo)); }
.alerta-info[data-aviso]::after  { background: linear-gradient(180deg, #60a5fa, var(--acento)); }
.aviso-icono {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    animation: aviso-icono 0.7s 0.2s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.aviso-icono .icono { width: 24px; height: 24px; stroke-width: 2.2; }
.alerta-exito .aviso-icono { background: linear-gradient(135deg, #22c55e, var(--verde)); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.15); }
.alerta-error .aviso-icono { background: linear-gradient(135deg, #f87171, var(--rojo)); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.15); }
.alerta-info .aviso-icono  { background: linear-gradient(135deg, #60a5fa, var(--acento)); box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.15); }
.alerta-error[data-aviso] .aviso-icono { animation-name: aviso-icono, aviso-sacude; animation-duration: 0.7s, 0.5s; animation-delay: 0.2s, 0.8s; }
.aviso-cuerpo { flex-grow: 1; min-width: 0; padding-top: 2px; }
.aviso-titulo { display: block; font-size: 1rem; margin-bottom: 2px; }
.alerta-exito .aviso-titulo { color: #166534; }
.alerta-error .aviso-titulo { color: #991b1b; }
.alerta-info .aviso-titulo  { color: #1e40af; }
.aviso-texto { display: block; color: #334155; font-size: 0.9rem; overflow-wrap: anywhere; }
.aviso-cerrar {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    color: var(--texto-suave);
}
.aviso-cerrar::before, .aviso-cerrar::after {
    content: ""; position: absolute; left: 7px; top: 13px; width: 14px; height: 2px; border-radius: 2px; background: currentColor;
}
.aviso-cerrar::before { transform: rotate(45deg); }
.aviso-cerrar::after { transform: rotate(-45deg); }
.aviso-cerrar:hover { background: #f1f5f9; color: var(--texto); }
.aviso-tiempo { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(34, 197, 94, 0.55); transform-origin: left; animation: aviso-tiempo 6s linear both; }
.alerta[data-aviso]:hover .aviso-tiempo { animation-play-state: paused; }
.alerta[data-aviso].saliendo { animation: aviso-sale 0.35s ease-in both; }

@keyframes aviso-entra { from { opacity: 0; transform: translateX(40px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes aviso-sale { to { opacity: 0; transform: translateX(40px) scale(0.92); } }
@keyframes aviso-icono { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
@keyframes aviso-sacude { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@keyframes aviso-tiempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 900px) {
    .avisos { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; }
    @keyframes aviso-entra { from { opacity: 0; transform: translateY(40px) scale(0.95); } to { opacity: 1; transform: none; } }
    @keyframes aviso-sale { to { opacity: 0; transform: translateY(40px) scale(0.95); } }
}
@media (prefers-reduced-motion: reduce) {
    .alerta[data-aviso], .aviso-icono, .alerta[data-aviso].saliendo { animation: none !important; }
    .aviso-tiempo { display: none; }
}

/* ------------------------------------------------- Zona para subir archivos */

.subir {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 2px dashed var(--borde-fuerte);
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.subir:hover, .subir.arrastrando { border-color: var(--acento); background: var(--azul-fondo); }
.subir.arrastrando { box-shadow: 0 0 0 4px rgba(29, 99, 214, 0.15); }
.subir:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(29, 99, 214, 0.18); }
.subir input[type=file] {
    position: absolute; inset: 0; width: 100% !important; height: 100%; opacity: 0; cursor: pointer; padding: 0 !important; border: 0 !important;
}
.subir-icono {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
    background: var(--marca-suave); color: var(--acento); overflow: hidden;
}
.subir-icono .icono { width: 24px; height: 24px; }
.subir-icono img { width: 100%; height: 100%; object-fit: cover; }
.subir-texto { min-width: 0; flex-grow: 1; line-height: 1.35; }
.subir-texto strong { display: block; font-size: 0.92rem; color: var(--texto); }
.subir-texto small { display: block; color: var(--texto-suave); font-size: 0.8rem; margin: 0; overflow-wrap: anywhere; }
.subir-boton {
    flex-shrink: 0; padding: 7px 14px; border-radius: 999px; background: var(--acento); color: #fff; font-size: 0.82rem; font-weight: 600;
}
.subir.con-archivo { border-style: solid; border-color: #86efac; background: var(--verde-fondo); }
.subir.con-archivo .subir-icono { background: #dcfce7; color: var(--verde); }
.subir.con-archivo .subir-boton { background: #fff; color: var(--texto); border: 1px solid var(--borde-fuerte); }
.subir.invalido { border-color: #fca5a5; background: var(--rojo-fondo); }
.subir.invalido .subir-texto small { color: var(--rojo); }
td .subir { padding: 8px 10px; gap: 10px; min-width: 220px; }
td .subir .subir-icono { width: 34px; height: 34px; }
td .subir .subir-boton { display: none; }
@media (max-width: 520px) { .subir-boton { display: none; } }

/* ------------------------------------------- Tarjeta "siguiente paso" (proyectos) */

.paso-destacado {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 22px 24px;
    margin-bottom: 20px;
    border-radius: 16px;
    color: #fff;
    background: radial-gradient(120% 140% at 100% 0%, rgba(245, 179, 1, 0.25), transparent 55%), linear-gradient(135deg, var(--marca), var(--marca-2));
    box-shadow: 0 16px 36px -16px rgba(11, 42, 91, 0.7);
    overflow: hidden;
}
.paso-destacado.atencion { background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%), linear-gradient(135deg, #9a3412, #dc2626); }
.paso-destacado.listo { background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%), linear-gradient(135deg, #166534, #16a34a); }
.paso-icono { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); }
.paso-icono .icono { width: 32px; height: 32px; }
.paso-destacado h2 { color: #fff; margin: 0 0 4px; font-size: 1.2rem; }
.paso-destacado p { margin: 0; color: rgba(255, 255, 255, 0.88); font-size: 0.92rem; }
.paso-avance { margin-top: 12px; }
.paso-avance-barra { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.paso-avance-barra span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--dorado), #fde68a); }
.paso-avance small { display: block; margin-top: 6px; color: rgba(255, 255, 255, 0.85); font-size: 0.8rem; }
.paso-pendientes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.paso-pendientes li { background: rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 3px 10px; font-size: 0.78rem; }
.boton-paso {
    display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; cursor: pointer; font-family: inherit;
    background: var(--dorado); color: #0b2a5b; font-weight: 800; font-size: 1rem;
    padding: 14px 22px; border-radius: 999px; border: none; text-decoration: none;
    box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s, box-shadow 0.15s;
}
.boton-paso:hover { transform: translateY(-2px); text-decoration: none; color: #0b2a5b; box-shadow: 0 14px 26px -8px rgba(0, 0, 0, 0.55); }
.boton-paso .icono { width: 20px; height: 20px; }
.paso-destacado.pulsa .boton-paso { animation: paso-pulso 2.4s ease-in-out infinite; }
@keyframes paso-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 179, 1, 0.55); } 50% { box-shadow: 0 0 0 12px rgba(245, 179, 1, 0); } }
@media (prefers-reduced-motion: reduce) { .paso-destacado.pulsa .boton-paso { animation: none; } }
@media (max-width: 700px) {
    .paso-destacado { grid-template-columns: 1fr; padding: 18px; gap: 12px; }
    .paso-icono { display: none; }
    .boton-paso { justify-content: center; width: 100%; }
}
.pestanas .conteo { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #e2e8f0; color: var(--texto-suave); font-size: 0.72rem; text-align: center; }
.pestanas a.activa .conteo { background: var(--marca-suave); color: var(--marca); }
.pestanas .punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); margin-left: 6px; vertical-align: 2px; }

/* ------------------------------------------------------ Asistente (nuevo proyecto) */

.asistente-activo .paso-asistente { display: none; }
.asistente-activo .paso-asistente.actual { display: block; animation: paso-entra 0.3s ease-out both; }
@keyframes paso-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.paso-asistente h2:focus { outline: none; }
.asistente-pasos {
    list-style: none; margin: 0 0 18px; padding: 4px 2px 10px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; counter-reset: paso;
}
.asistente-pasos li { flex: 1 1 0; min-width: 96px; position: relative; }
.asistente-pasos li + li::before {
    content: ""; position: absolute; top: 17px; left: calc(-50% + 20px); right: calc(50% + 20px); height: 2px; background: var(--borde-fuerte);
}
.asistente-pasos li.hecho + li::before, .asistente-pasos li.hecho + li.actual::before { background: var(--acento); }
.asistente-pasos button {
    width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--texto-suave);
}
.asistente-num {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.9rem;
    background: var(--superficie); border: 2px solid var(--borde-fuerte); position: relative; z-index: 1; transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.asistente-nombre { font-size: 0.78rem; font-weight: 600; text-align: center; line-height: 1.2; }
.asistente-pasos li.hecho .asistente-num { background: var(--acento); border-color: var(--acento); color: #fff; }
.asistente-pasos li.actual .asistente-num { background: var(--marca); border-color: var(--marca); color: #fff; box-shadow: 0 0 0 4px rgba(29, 99, 214, 0.18); }
.asistente-pasos li.actual .asistente-nombre { color: var(--marca); }
.asistente-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 0 24px;
}
.asistente-nav [hidden] { display: none; }
.asistente-nav .boton:last-child { margin-left: auto; }
.asistente-contador { color: var(--texto-suave); font-size: 0.85rem; }
.asistente-error { background: var(--rojo-fondo); color: #991b1b; border-radius: 10px; padding: 10px 14px; font-size: 0.9rem; }
.asistente-total { text-align: right; font-size: 1.05rem; margin: 12px 0 4px; }
.asistente-total strong { color: var(--marca); font-size: 1.25rem; }
.opciones-propuesta { display: grid; gap: 10px; }
.opcion-propuesta {
    display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 2px solid var(--borde); border-radius: 12px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.opcion-propuesta:hover { border-color: var(--borde-fuerte); }
.opcion-propuesta:has(input:checked) { border-color: var(--acento); background: var(--azul-fondo); }
.opcion-propuesta input { margin-top: 3px; accent-color: var(--acento); }
.opcion-propuesta strong { display: block; }
.opcion-propuesta small { display: block; color: var(--texto-suave); }
.opcion-propuesta em { display: block; font-style: normal; font-size: 0.87rem; margin-top: 4px; color: #475569; }
.asistente-resumen { display: grid; gap: 10px; margin-bottom: 18px; }
.resumen-bloque { border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; background: #fbfcfe; }
.resumen-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.resumen-cab strong { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-suave); }
.resumen-bloque p { margin: 2px 0; white-space: pre-line; }
.resumen-lista { list-style: none; margin: 0; padding: 0; }
.resumen-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px dashed var(--borde); }
.resumen-lista .resumen-total { font-weight: 700; border-bottom: 0; color: var(--marca); }
.boton-registrar { padding: 12px 22px; font-size: 1rem; }
/* Cotizaciones del asistente: tarjetas que se agregan una por una */
.cotizaciones { display: grid; gap: 14px; }
.cotizacion-tarjeta {
    margin: 0; min-width: 0; padding: 0 18px 4px; border: 1px solid var(--borde); border-radius: 14px; background: #fbfcfe;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cotizacion-tarjeta[hidden] { display: none; }
.cotizacion-tarjeta.elegida { border-color: #86efac; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12); background: #fcfffd; }
.cotizacion-cab {
    display: flex; align-items: center; gap: 12px; width: 100%; float: left; padding: 14px 0 12px; margin-bottom: 4px; border-bottom: 1px dashed var(--borde);
}
.cotizacion-cab + * { clear: both; }
.cotizacion-titulo { font-weight: 700; color: var(--marca); }
.chip-elegida {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--borde-fuerte);
    font-size: 0.82rem; font-weight: 600; color: var(--texto-suave); cursor: pointer; background: #fff;
}
.chip-elegida input { margin: 0; accent-color: var(--verde); }
.elegida .chip-elegida { border-color: #86efac; background: var(--verde-fondo); color: var(--verde); }
.cotizacion-quitar { margin-left: auto; color: var(--rojo); font-size: 0.85rem; }
.cotizacion-campos { display: grid; grid-template-columns: 2fr 1fr; gap: 0 16px; padding-top: 12px; }
.cotizacion-campos .cot-completo { grid-column: 1 / -1; }
.cotizacion-campos [hidden] { display: none; }
.boton-agregar { margin: 14px 0 6px; border-style: dashed; width: 100%; padding: 12px; color: var(--acento); }
.boton-agregar[hidden] { display: none; }
@media (max-width: 620px) { .cotizacion-campos { grid-template-columns: 1fr; } }
.borrador-estado { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
@media (max-width: 520px) {
    .asistente-nombre { display: none; }
    .asistente-pasos li { min-width: 40px; }
    .asistente-pasos li.actual .asistente-nombre { display: block; position: absolute; top: 40px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
    .asistente-pasos li:first-child.actual .asistente-nombre { left: 0; transform: none; }
    .asistente-pasos li:last-child.actual .asistente-nombre { left: auto; right: 0; transform: none; }
    .asistente-pasos { padding-bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) { .asistente-activo .paso-asistente.actual { animation: none; } }

/* ------------------------------------------------------ Instalar la app (login) */

.instalar-app {
    display: none;
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--marca), var(--marca-2));
    color: #fff;
    box-shadow: var(--sombra-alta);
    animation: aviso-entra 0.5s ease-out both;
}
.instalar-app.visible { display: block; }
.instalar-app-fila { display: flex; gap: 14px; align-items: center; }
.instalar-app img { width: 52px; height: 52px; border-radius: 13px; flex-shrink: 0; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3); }
.instalar-app strong { display: block; font-size: 1rem; }
.instalar-app p { margin: 2px 0 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.88); }
.instalar-app-acciones { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.instalar-app .boton-paso { padding: 10px 18px; font-size: 0.92rem; }
.instalar-app .boton-ligero { background: transparent; border: 1px solid rgba(255, 255, 255, 0.45); color: #fff; border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 0.85rem; cursor: pointer; }
.instalar-app .boton-ligero:hover { background: rgba(255, 255, 255, 0.12); }
.instalar-app ol { margin: 10px 0 0; padding-left: 20px; font-size: 0.86rem; }
.instalar-app ol li { margin: 3px 0; }
.instalar-app [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .instalar-app { animation: none; } }
@media (display-mode: standalone) { .instalar-app { display: none !important; } }

.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge-activo { background: var(--verde-fondo); color: var(--verde); }
.badge-inactivo { background: #f1f5f9; color: var(--texto-suave); }
.badge-pendiente { background: var(--ambar-fondo); color: var(--ambar); }
.badge-error { background: var(--rojo-fondo); color: var(--rojo); }

/* ---------------------------------------------------------- Utilidades */

.derecha, td.monto, th.monto { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.texto-suave { color: var(--texto-suave); font-size: 0.85rem; }
.positivo { color: var(--verde); }
.negativo { color: var(--rojo); }
.tachado { text-decoration: line-through; color: var(--texto-suave); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 16px; }
.galeria figure { margin: 0; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; background: #fff; }
.galeria img { display: block; width: 100%; height: 150px; object-fit: cover; }
.galeria figcaption { padding: 8px 10px; font-size: .85rem; }
.galeria figcaption form { display: inline; }
.enlace-peligro { background: none; border: 0; padding: 0; color: #b91c1c; cursor: pointer; font: inherit; font-size: .85rem; text-decoration: underline; }
.lista-pendientes { margin: 0 0 12px; padding-left: 20px; }
.recibo-fondo { border-left: 4px solid var(--dorado); }
.validacion-titulo { text-align: center; font-weight: 700; font-size: .85rem; letter-spacing: .04em; margin: 0 0 10px; }
.validacion-mensaje { text-align: center; font-style: italic; margin: 12px 0 4px; }
/* Campana de notificaciones (barra superior) */
.campana { position: relative; margin-left: auto; margin-right: 10px; }
.campana > summary { list-style: none; cursor: pointer; display: flex; align-items: center; padding: 8px; border-radius: 10px; color: var(--texto); position: relative; }
.campana > summary::-webkit-details-marker { display: none; }
.campana > summary:hover { background: var(--marca-suave); }
.campana > summary .icono { width: 22px; height: 22px; }
.campana-contador { position: absolute; top: 2px; right: 0; }
.campana-desplegable { position: absolute; right: 0; top: calc(100% + 6px); width: 290px; background: var(--superficie); border: 1px solid var(--borde);
    border-radius: 12px; box-shadow: var(--sombra-alta); padding: 8px; z-index: 40; }
.campana-titulo { margin: 4px 8px 6px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.campana-desplegable a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--texto); }
.campana-desplegable a:hover { background: var(--marca-suave); text-decoration: none; }
.campana-desplegable a span { flex-grow: 1; }
.campana-desplegable .icono { width: 18px; height: 18px; }
.campana-escribir { border-top: 1px solid var(--borde); margin-top: 4px; }
/* Conversaciones (mensajes y seguimiento de propuestas) */
.hilo { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.hilo-mensaje { max-width: 80%; background: #f1f5f9; border-radius: 12px; padding: 10px 14px; }
.hilo-mensaje.propio { align-self: flex-end; background: var(--marca-suave); }
.hilo-autor { font-size: .82rem; margin-bottom: 4px; }
.hilo-estado { font-size: .85rem; margin-bottom: 4px; }
.bandeja { list-style: none; margin: 0; padding: 0; }
.bandeja li a { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 10px; padding: 10px 6px; border-bottom: 1px solid var(--borde); color: var(--texto); }
.bandeja li a:hover { background: #f8fafc; text-decoration: none; }
.bandeja li.sin-leer strong { color: var(--marca); }
.bandeja-extracto { grid-column: 1 / -1; font-size: .88rem; }
.bandeja-fecha { font-size: .8rem; }
.alcance-caja { border: 1px solid var(--borde); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; min-width: 0; }
.alcance-caja legend { font-weight: 600; padding: 0 6px; }
.alcance-caja > label { display: block; margin: 4px 0; }
.grupos-caja { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 8px 24px; }
.opciones-ticket { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 14px; }
.opciones-ticket fieldset { border: 1px solid var(--borde); border-radius: 10px; padding: 10px 14px; margin: 0; min-width: 0; }
.opciones-ticket legend { font-weight: 600; padding: 0 6px; }
.opcion-ticket { display: block; margin: 4px 0; font-size: .92rem; }
/* Tabulador de cooperaciones periódicas: alumnos × periodos */
.tabulador { border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.tabulador th, .tabulador td { padding: 6px 8px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--borde); }
.tabulador .tab-alumno { text-align: left; position: sticky; left: 0; background: var(--superficie); z-index: 1; min-width: 170px; }
.tabulador thead .tab-alumno { background: #f8fafc; }
.tabulador .tab-mes { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); border-left: 1px solid var(--borde); }
.tabulador th.tab-futuro { color: #a0aec0; }
.tab-celda { font-weight: 700; min-width: 34px; }
.tab-celda.cubierto { color: #15803d; background: #ecfdf3; }
.tab-celda.parcial { color: #a16207; background: #fefce8; }
.tab-celda.vencido { background: #fef2f2; }
.tab-celda.tab-futuro { background: #f8fafc; }
.tabulador .tab-total th { font-size: .8rem; background: #f8fafc; }
.leyenda-tabulador .tab-celda { display: inline-block; min-width: 22px; text-align: center; border-radius: 4px; padding: 0 4px; }
@media print { .tabulador .tab-alumno { position: static; } }
.form-publicar { display: block; margin-top: 4px; font-size: .82rem; }
.form-publicar label { display: block; }
.enlace-accion { background: none; border: 0; padding: 0; color: var(--marca-2, #2563eb); cursor: pointer; font: inherit; font-size: .82rem; text-decoration: underline; }
.lista-pendientes li { margin: 3px 0; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
td.acciones { display: table-cell; white-space: nowrap; }
td.acciones > * { display: inline-block; vertical-align: middle; margin: 0 10px 4px 0; }
td.acciones details[open] { display: block; white-space: normal; }
details.cancelar summary { cursor: pointer; color: var(--rojo); font-size: 0.85rem; }
details.cancelar form { display: flex; gap: 6px; margin-top: 6px; }
details.cancelar form input { min-width: 160px; }
.vacio { text-align: center; color: var(--texto-suave); padding: 26px 10px; margin: 0; }
.firmas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; margin-top: 64px; text-align: center; }
.firmas div { border-top: 1px solid var(--texto); padding-top: 6px; font-size: 0.85rem; }
.solo-impresion { display: none; }

/* --------------------------------------------------------------- Cobro */

.caja-actual {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px;
    background: var(--marca-suave); border: 1px solid #c7d2fe; border-radius: var(--radio);
    padding: 12px 16px; margin-bottom: 16px; color: var(--marca);
}
.caja-actual .icono { vertical-align: -4px; }
.busqueda-cobro { display: flex; gap: 8px; margin-bottom: 16px; }
.busqueda-cobro input {
    flex-grow: 1; min-width: 0; padding: 13px 14px; font-size: 1rem; font-family: inherit;
    border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico);
}
.busqueda-cobro input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.tarjeta-familia { display: flex; flex-direction: column; gap: 4px; color: var(--texto); padding: 16px 18px; }
.tarjeta-familia:hover { border-color: var(--acento); text-decoration: none; }
.fila-montos { display: flex; justify-content: space-between; gap: 10px; font-size: 0.88rem; margin-top: 6px; }
.monto-grande { font-size: 1.6rem !important; font-weight: 700; text-align: center; padding: 14px !important; }
.tarjeta-enlace { display: block; color: var(--texto); }
.tarjeta-enlace:hover { text-decoration: none; border-color: var(--acento); }
.barra-avance { height: 10px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin: -8px 0 22px; }
.barra-avance span { display: block; height: 100%; background: linear-gradient(90deg, var(--marca-2), #22c55e); border-radius: 999px; }

.comprobante-vista { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.comprobante-acciones { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }

/* Ticket para impresora térmica (58 u 80 mm) */
.ticket {
    background: #fff; color: #000; font-family: "Courier New", Consolas, monospace; font-size: 12px; line-height: 1.35;
    padding: 12px 10px; border: 1px dashed var(--borde-fuerte); border-radius: 6px; margin: 0 auto;
}
.ticket-80 { width: 80mm; }
.ticket-58 { width: 58mm; font-size: 10.5px; }
.ticket-centro { text-align: center; }
.ticket-titulo { text-align: center; font-weight: 700; margin: 8px 0; padding: 4px 0; border-top: 1px dashed #000; border-bottom: 1px dashed #000; }
.ticket-datos { width: 100%; border-collapse: collapse; background: none; }
.ticket-datos td { border: none; padding: 1px 0; font-size: inherit; }
.ticket-datos td:last-child { text-align: right; }
.ticket-monto { text-align: center; font-size: 1.9em; font-weight: 700; margin: 8px 0; }
.ticket-qr svg { display: block; margin: 4px auto; }
.ticket-chico { font-size: 0.85em; margin-top: 4px; }
.ticket-mensaje { margin: 8px 0 4px; font-weight: 700; }
.ticket-cancelado { text-align: center; font-size: 1.5em; font-weight: 700; border: 2px solid #000; margin: 6px 0; }
body.solo-ticket { background: #fff; padding: 10px; }
.solo-escritorio { display: inline; }

/* Validación pública */
.validacion { text-align: center; }
.validacion table { text-align: left; margin: 12px 0; }
.validacion-icono {
    width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
    margin: 0 auto 12px; font-size: 2rem; font-weight: 700; color: #fff;
}
.validacion-icono.valido { background: var(--verde); }
.validacion-icono.invalido { background: var(--rojo); }

/* ------------------------------------------------ Documentos (carta) */

body.documento { background: #e5e7eb; padding: 16px; }
.doc-hoja { background: #fff; max-width: 216mm; margin: 0 auto; padding: 14mm; box-shadow: var(--sombra-alta); font-size: 12.5px; color: #111; }
.doc-encabezado { display: flex; align-items: center; gap: 12px; border-bottom: 3px solid var(--marca); padding-bottom: 8px; }
.doc-encabezado > div:nth-child(2) { flex-grow: 1; color: var(--marca); }
.doc-folio { text-align: right; font-size: 0.9em; }
.doc-titulo { font-size: 1.05rem; background: #eef2f7; border-left: 5px solid var(--marca); padding: 8px 12px; margin: 14px 0 8px; }
.doc-hoja h2 { font-size: 0.92rem; color: var(--marca); margin: 16px 0 6px; text-transform: uppercase; letter-spacing: 0.02em; }
.doc-derecha { text-align: right; margin: 0; }
.doc-tabla { width: 100%; border-collapse: collapse; }
.doc-tabla th, .doc-tabla td { border: 1px solid #cbd5e1; padding: 5px 7px; font-size: 12px; text-transform: none; letter-spacing: 0; color: #111; }
.doc-tabla th { background: #f1f5f9; text-align: left; font-weight: 600; white-space: nowrap; }
.doc-caja { border: 1px solid #cbd5e1; border-radius: 4px; padding: 8px 10px; min-height: 40px; }
.cotizacion-opcion { border: 1px solid var(--borde, #e2e8f0); border-radius: 10px; padding: 12px 16px 4px; margin: 0 0 14px; min-width: 0; }
.cotizacion-opcion legend { font-weight: 600; padding: 0 6px; }
.cotizacion-opcion legend label { font-weight: 400; margin-left: 10px; }
.doc-tabla tbody tr:last-child td { border-bottom: 1px solid #cbd5e1; }
.doc-casilla { display: inline-block; margin-right: 12px; white-space: nowrap; }
.doc-marca { display: inline-block; width: 11px; height: 11px; border: 1px solid #334155; vertical-align: -1px; margin-right: 3px; position: relative; }
.doc-marca.marcada::after { content: "X"; position: absolute; inset: -2px 0 0 0; font-size: 10px; font-weight: 700; line-height: 13px; text-align: center; color: #111; }
.doc-nota { font-size: 0.9em; margin: 4px 0; }
.doc-renglon td { height: 26px; }
.doc-lineamientos { border-left: 4px solid var(--acento); background: var(--azul-fondo); padding: 8px 12px; margin: 14px 0; font-size: 0.92em; }
.doc-lineamientos ul { margin: 4px 0 0; padding-left: 18px; }
.doc-tesoreria { margin-top: 14px; }
.doc-hoja .firmas { margin-top: 56px; }

@media print {
    body.documento { background: #fff; padding: 0; }
    .doc-hoja { box-shadow: none; padding: 0; max-width: none; }
}

/* -------------------------------------------------------------- Móvil */

@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: var(--sombra-alta); }
    body.menu-abierto .sidebar { transform: none; }
    body.menu-abierto .velo { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 25; }
    .principal { margin-left: 0; }
    .menu-toggle { display: inline-flex; }
    .topbar { padding: 0 14px; }
    .contenido { padding: 18px 14px 32px; }
    .usuario-datos { display: none; }
}

@media (max-width: 900px) {
    /* Ninguna tabla ni formulario ancho debe provocar desplazamiento horizontal de toda la página. */
    .tarjeta { overflow-x: auto; }
    .encabezado-pagina .acciones { width: 100%; }
    .hilo-mensaje { max-width: 92%; }
    .campana-desplegable { position: fixed; top: 60px; right: 12px; left: 12px; width: auto; }
}

@media (max-width: 520px) {
    /* En una sola columna, los campos que ocupan dos columnas no deben crear una columna extra. */
    .form-fila { grid-template-columns: 1fr; }
    .form-fila > * { grid-column: auto !important; }
    /* Listados: se desplazan dentro de su tarjeta en lugar de partir fechas y folios en varias líneas. */
    .tabla-scroll > table, .tabla-scroll > div > table { min-width: 600px; }
    th, td { padding: 9px 8px; }
    .filtros .form-grupo { min-width: 0; flex: 1 1 140px; }
    .encabezado-pagina .acciones .boton { flex: 1 1 auto; }
    .boton { padding: 10px 14px; }
    .pestanas a { padding: 10px 11px; }
    .grid-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .metrica { padding: 12px; gap: 10px; }
    .metrica .valor { font-size: 1.1rem; overflow-wrap: anywhere; }
    .metrica .metrica-icono { display: none; }
    .solo-escritorio { display: none; }
    .comprobante-vista { gap: 16px; }
    .tarjeta { padding: 16px; }
    .login-tarjeta { padding: 22px; }
    .topbar-contexto > span.chip:not(.chip-consulta):not(.chip-prueba) { display: none; }
    .topbar-identidad small { display: none; }
    .topbar-identidad strong { font-size: 0.85rem; }
    h1 { font-size: 1.25rem; }
}

/* ----------------------------------------------------------- Impresión */

@media print {
    .sidebar, .topbar, .velo, .no-imprimir, .alerta, .pestanas { display: none !important; }
    .principal { margin: 0; }
    .contenido { padding: 0; max-width: none; }
    .tarjeta, .metrica { border: none; box-shadow: none; padding: 0; }
    .solo-impresion { display: block; }
    body { background: #fff; font-size: 12px; }
    tbody tr:hover td { background: none; }
    body.solo-ticket { padding: 0; }
    .solo-ticket .ticket { border: none; border-radius: 0; padding: 2mm; width: auto; }
    .comprobante-vista .ticket { border: none; }
}

/* ---------------------------------------------------------------------------
   Conoce SIRA (página informativa del sistema)
   --------------------------------------------------------------------------- */
a.login-marca, a.marca-publica { text-decoration: none; color: inherit; }
a.login-marca:hover, a.marca-publica:hover { text-decoration: none; opacity: .92; }
.conoce { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 44px; padding-bottom: 24px; }
.conoce h2 { font-size: 1.55rem; letter-spacing: -0.01em; color: var(--marca); margin: 0 0 14px; }
.conoce-titulo { text-align: center; }
.conoce-hero { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 28px; padding: 44px; border-radius: 22px;
    color: #fff; background: radial-gradient(circle at 85% 20%, rgba(245, 179, 1, .25), transparent 40%), linear-gradient(135deg, #0a1f44 0%, #0b2a5b 55%, #1d4f9e 100%);
    box-shadow: var(--sombra-alta); overflow: hidden; }
.conoce-hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; margin: 12px 0 14px; color: #fff; letter-spacing: -0.02em; }
.conoce-hero p { font-size: 1.08rem; line-height: 1.6; color: #dbe6fb; margin: 0; }
.conoce-hero strong { color: #fff; }
.conoce-sello { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--dorado); font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.conoce-hero-escudo { text-align: center; }
.conoce-hero-escudo img { width: min(220px, 100%); height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
.conoce-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.conoce-acciones .boton-grande { padding: 13px 22px; font-size: 1rem; }
.conoce-hero .boton-secundario { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.conoce-promesas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.conoce-promesas > div { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 18px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 6px; }
.conoce-promesas .icono { width: 30px; height: 30px; color: var(--acento); }
.conoce-promesas strong { font-size: 1.02rem; color: var(--marca); }
.conoce-promesas span { color: var(--texto-suave); font-size: .9rem; line-height: 1.45; }
.conoce-historia h2 { text-align: center; }
.conoce-contraste { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.conoce-contraste > div { border-radius: 16px; padding: 22px 24px; }
.conoce-contraste h3 { margin: 0 0 10px; font-size: 1.1rem; }
.conoce-contraste ul { margin: 0; padding-left: 20px; line-height: 1.8; }
.conoce-antes { background: #f8fafc; border: 1px dashed var(--borde-fuerte); color: var(--texto-suave); }
.conoce-despues { background: linear-gradient(135deg, var(--marca-suave), #fff); border: 1px solid #c7d7f5; }
.conoce-despues h3 { color: var(--marca); }
.conoce-funciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.conoce-funcion { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 20px; box-shadow: var(--sombra); transition: transform .15s ease, box-shadow .15s ease; }
.conoce-funcion:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.conoce-funcion h3 { margin: 12px 0 6px; font-size: 1.05rem; color: var(--marca); }
.conoce-funcion p { margin: 0 0 10px; color: var(--texto-suave); font-size: .92rem; }
.conoce-funcion ul { margin: 0; padding-left: 18px; font-size: .88rem; line-height: 1.55; }
.conoce-icono { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--marca-suave); color: var(--acento); }
.conoce-icono .icono { width: 26px; height: 26px; }
.conoce-icono-chico { width: 40px; height: 40px; flex-shrink: 0; }
.conoce-para { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; padding: 28px; }
.conoce-para p { line-height: 1.6; }
.conoce-niveles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.conoce-niveles li { padding: 7px 12px; border-radius: 999px; background: var(--marca-suave); color: var(--marca); font-weight: 600; font-size: .86rem; }
.conoce-seguridad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.conoce-seguridad > div { display: flex; gap: 12px; align-items: flex-start; }
.conoce-seguridad strong { color: var(--marca); }
.conoce-seguridad p { margin: 4px 0 0; color: var(--texto-suave); font-size: .9rem; line-height: 1.45; }
.conoce-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.conoce-pasos li { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 18px 16px; }
.conoce-pasos li > span { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; background: var(--dorado); color: var(--marca); font-weight: 800; }
.conoce-pasos strong { display: block; margin: 10px 0 4px; color: var(--marca); }
.conoce-pasos p { margin: 0; color: var(--texto-suave); font-size: .88rem; line-height: 1.45; }
.conoce-cierre { text-align: center; padding: 40px 28px; border-radius: 22px; background: linear-gradient(135deg, var(--marca-suave), #fff 60%); border: 1px solid #c7d7f5; }
.conoce-cierre p { max-width: 640px; margin: 0 auto; line-height: 1.6; color: var(--texto-suave); }
.conoce-cierre .conoce-acciones { justify-content: center; }
.conoce-pie { margin-top: 18px !important; font-size: .8rem; }
@media (max-width: 900px) {
    .conoce-hero, .conoce-para { grid-template-columns: 1fr; padding: 28px 22px; }
    .conoce-hero-escudo { order: -1; }
    .conoce-hero-escudo img { width: 140px; }
    .conoce-promesas, .conoce-seguridad { grid-template-columns: 1fr 1fr; }
    .conoce-pasos, .conoce-contraste { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .conoce-promesas, .conoce-seguridad { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Portal web: editor por bloques y pantallas de administración (1.35.0)
   --------------------------------------------------------------------------- */
.pe { display: flex; flex-direction: column; gap: 12px; }
.pe-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 14px; }
.pe-barra-pagina, .pe-barra-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pe-barra select { padding: 7px 10px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); font: inherit; font-weight: 600; }
.pe-estado { font-size: .85rem; color: var(--verde); }
.pe-estado.pe-error { color: var(--rojo); font-weight: 700; }
.pe-dispositivo { display: inline-flex; border: 1px solid var(--borde-fuerte); border-radius: 999px; overflow: hidden; }
.pe-dispositivo button { border: 0; background: #fff; padding: 6px 12px; font: inherit; font-size: .85rem; cursor: pointer; }
.pe-dispositivo button.activo { background: var(--marca); color: #fff; }
.pe-cuerpo { display: grid; grid-template-columns: 250px minmax(0, 1fr) 320px; gap: 12px; align-items: start; }
.pe-biblioteca, .pe-ajustes { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px; position: sticky; top: 74px; max-height: calc(100vh - 90px); overflow: auto; }
.pe-biblioteca h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); margin: 14px 0 6px; }
.pe-ayuda { color: var(--texto-suave); font-size: .85rem; margin: 0; }
.pe-tipo { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; border: 1px solid transparent; background: none; border-radius: 10px; padding: 8px; cursor: pointer; font: inherit; }
.pe-tipo:hover { background: var(--marca-suave); border-color: #c7d7f5; }
.pe-tipo-icono { display: inline-flex; width: 34px; height: 34px; border-radius: 9px; align-items: center; justify-content: center; background: var(--marca-suave); color: var(--acento); flex-shrink: 0; }
.pe-tipo-icono .icono { width: 20px; height: 20px; }
.pe-tipo-texto strong { display: block; font-size: .9rem; }
.pe-tipo-texto small { display: block; color: var(--texto-suave); font-size: .76rem; line-height: 1.35; }
.pe-lienzo-marco { background: #e9edf3; border-radius: var(--radio); padding: 14px; min-height: 60vh; }
.pe-lienzo { background: #fff; border-radius: 10px; box-shadow: var(--sombra); margin: 0 auto; min-height: 50vh; overflow: hidden; container-type: inline-size; transition: max-width .2s; max-width: 100%; }
.pe-lienzo.pe-celular { max-width: 390px; }
.pe-vacio { color: var(--texto-suave); text-align: center; padding: 60px 20px; margin: 0; }
.pe-bloque { position: relative; outline: 2px solid transparent; outline-offset: -2px; cursor: pointer; }
.pe-bloque:hover { outline-color: #c7d7f5; }
.pe-bloque.activo { outline-color: var(--acento); }
.pe-bloque.arrastrando { opacity: .4; }
.pe-bloque.antes { box-shadow: inset 0 4px 0 var(--dorado); }
.pe-bloque.despues { box-shadow: inset 0 -4px 0 var(--dorado); }
.pe-bloque-barra { position: absolute; top: 6px; right: 8px; z-index: 5; display: none; align-items: center; gap: 6px; background: var(--marca); color: #fff; border-radius: 8px; padding: 3px 6px; font-size: .78rem; box-shadow: var(--sombra); }
.pe-bloque:hover .pe-bloque-barra, .pe-bloque.activo .pe-bloque-barra { display: flex; }
.pe-asa { cursor: grab; padding: 0 4px; font-size: 1rem; }
.pe-bloque-acciones { display: inline-flex; gap: 2px; }
.pe-mini { border: 0; background: rgba(255, 255, 255, .15); color: inherit; border-radius: 6px; padding: 2px 7px; cursor: pointer; font: inherit; font-size: .8rem; }
.pe-mini:hover { background: rgba(255, 255, 255, .3); }
.pe-ajustes .pe-mini { background: var(--fondo); color: var(--texto); }
.pe-mini.pe-peligro { color: #fecaca; }
.pe-ajustes .pe-mini.pe-peligro { color: var(--rojo); }
.pe-vista { pointer-events: none; }
.pe-vista .ps-portada-caja { padding: 44px 0; }
.pe-ajustes-cabecera { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--borde); }
.pe-ajustes-cabecera strong, .pe-ajustes-cabecera small { display: block; }
.pe-ajustes-cabecera small { color: var(--texto-suave); font-size: .8rem; }
.pe-campo { margin-bottom: 12px; }
.pe-campo input[type=text], .pe-campo input[type=url], .pe-campo input[type=number], .pe-campo textarea, .pe-campo select { width: 100%; }
.pe-casilla { display: flex; gap: 6px; align-items: flex-start; font-weight: 400 !important; }
.pe-muestra { max-width: 100%; max-height: 120px; border-radius: 8px; margin-top: 6px; display: block; }
.pe-subir { display: inline-block; margin-top: 6px; font-size: .85rem; color: var(--acento); cursor: pointer; font-weight: 600 !important; }
.pe-subir input { display: none; }
.pe-imagenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pe-imagen-opcion { position: relative; display: block; }
.pe-imagen-opcion img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; border: 2px solid transparent; }
.pe-imagen-opcion input { position: absolute; top: 4px; left: 4px; }
.pe-imagen-opcion input:checked + img { border-color: var(--acento); }
.pe-item { border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px 4px; margin: 0 0 10px; }
.pe-item legend { font-size: .8rem; color: var(--texto-suave); padding: 0 4px; }
.pe-item-acciones { display: flex; gap: 4px; justify-content: flex-end; margin-bottom: 6px; }
.pe-ajustes-pie { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--borde); padding-top: 12px; margin-top: 6px; }
.pe-boton-peligro { background: var(--rojo-fondo); color: var(--rojo); border-color: #fecaca; }
/* El lienzo simula el ancho de un celular: se adaptan los bloques por el ancho del contenedor. */
@container (max-width: 600px) {
    .ps-portada-fila { flex-direction: column; align-items: flex-start; }
    .ps-portada-img { width: 100%; }
    .ps-recaudacion { grid-template-columns: 1fr; }
    .ps-galeria, .ps-galeria.ps-col-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1180px) {
    .pe-cuerpo { grid-template-columns: 1fr; }
    .pe-biblioteca, .pe-ajustes { position: static; max-height: none; }
    .pe-biblioteca > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; }
    .pe-ajustes { order: 3; }
}

/* Pantallas de administración del portal */
.portal-estado, .portal-publicar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.portal-publicar.con-cambios { border-color: var(--dorado); background: #fffbeb; }
.portal-renombrar { display: flex; gap: 8px; align-items: center; }
.portal-renombrar input { padding: 6px 8px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); font: inherit; min-width: 160px; }
.portal-paginas td small { display: block; }
.portal-plantillas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.portal-plantilla { border: 1px solid var(--borde); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.portal-plantilla strong { font-size: 1.05rem; color: var(--marca); }
.portal-plantilla p { margin: 0; color: var(--texto-suave); font-size: .9rem; }
.portal-plantilla small { color: var(--texto-suave); }
.portal-medios { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-top: 14px; }
.portal-medios figure { margin: 0; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
.portal-medios img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--fondo); }
.portal-medios figcaption { padding: 8px 10px; font-size: .85rem; }
.portal-medios figcaption strong, .portal-medios figcaption small { display: block; }
.portal-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.portal-foto { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--borde); border-radius: 12px; padding: 12px; }
.portal-foto img, .portal-foto-iniciales { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--marca); color: #fff; font-weight: 700; }
.portal-foto strong, .portal-foto small { display: block; }
.portal-foto form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.portal-autoriza { font-size: .85rem; font-weight: 400 !important; }
.portal-paletas { display: flex; flex-wrap: wrap; gap: 10px; }
.portal-paleta { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-weight: 600 !important; font-size: .85rem; }
.portal-paleta:has(input:checked) { border-color: var(--acento); box-shadow: 0 0 0 2px var(--marca-suave); }
.portal-paleta input { margin: 0; }
.portal-muestra { display: flex; }
.portal-muestra i { width: 22px; height: 22px; display: block; border-radius: 50%; margin-left: -4px; border: 2px solid #fff; }

/* ---------------------------------------------------------------------------
   Logo del organismo (1.37.0) y reportes finales
   --------------------------------------------------------------------------- */
.logo-organismo-fila { display: flex; gap: 14px; align-items: flex-start; }
.logo-organismo-fila img { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--borde); border-radius: 12px; padding: 6px; background: #fff; flex-shrink: 0; }
.logo-organismo-fila small { display: block; margin-top: 4px; }
.logo-quitar { display: block; margin-top: 6px; font-weight: 400 !important; font-size: .88rem; }
.aviso-logo { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--radio-chico); background: var(--ambar-fondo); color: var(--ambar); font-size: .86rem; }
.formato-logo { width: 54px; height: 54px; object-fit: contain; }
.ticket-logo { display: block; width: 46px; height: 46px; object-fit: contain; margin: 0 auto 4px; filter: grayscale(1); }
.encabezado-formato { display: flex; align-items: center; gap: 12px; }
.reporte-pasos { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 18px; }
.reporte-pasos li { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--fondo); color: var(--texto-suave); font-size: .86rem; font-weight: 600; }
.reporte-pasos li span { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--borde-fuerte); font-size: .78rem; }
.reporte-pasos li.actual { background: var(--marca); color: #fff; }
.reporte-pasos li.actual span { color: var(--marca); }
.reporte-pasos li.hecho span { background: var(--verde); border-color: var(--verde); color: #fff; }
.reporte-pasos a { color: inherit; }
.reporte-plantillas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.reporte-plantilla { border: 1px solid var(--borde); border-radius: 14px; padding: 14px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; }
.reporte-plantilla:has(input:checked) { border-color: var(--acento); box-shadow: 0 0 0 2px var(--marca-suave); }
.reporte-plantilla strong { display: block; color: var(--marca); }
.reporte-plantilla small { display: block; color: var(--texto-suave); margin-top: 2px; }
.reporte-secciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reporte-seccion { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; background: #fff; }
.reporte-seccion.excluida { background: var(--fondo); opacity: .75; }
.reporte-seccion-orden { display: flex; flex-direction: column; gap: 2px; }
.reporte-seccion-orden button { border: 1px solid var(--borde); background: #fff; border-radius: 6px; width: 28px; height: 24px; cursor: pointer; line-height: 1; }
.reporte-seccion-orden button:disabled { opacity: .35; cursor: default; }
.reporte-seccion-cuerpo { flex: 1; }
.reporte-seccion-cuerpo label { font-weight: 400 !important; }
.reporte-seccion-cuerpo strong { color: var(--marca); }
.reporte-seccion-cuerpo small { display: block; color: var(--texto-suave); }
.reporte-opciones { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; font-size: .86rem; }
.reporte-resumen dt { font-weight: 700; color: var(--texto-suave); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; margin-top: 10px; }
.reporte-resumen dd { margin: 2px 0 0; }
.reporte-generado { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.reporte-generado svg { border: 1px solid var(--borde); border-radius: 8px; }
.verificar-resultado { border-radius: 12px; padding: 14px 16px; margin-top: 14px; }
.verificar-ok { background: var(--verde-fondo); color: var(--verde); }
.verificar-mal { background: var(--rojo-fondo); color: var(--rojo); }

/* Cargo fijo en la captura de la Mesa Directiva (1.38.0): se escribe según el género elegido. */
.cargo-fijo { display: inline-block; color: var(--marca); white-space: nowrap; padding: 8px 0; }

/* ---------------------------------------------------------------------------
   1.39.0: menú con grupos plegables y pestañas fijas con forma de botones
   --------------------------------------------------------------------------- */
.menu-seccion { margin-top: 6px; }
.menu-seccion > summary.menu-grupo {
    list-style: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 8px; cursor: pointer; user-select: none;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #8fa3cc;
}
.menu-seccion > summary.menu-grupo::-webkit-details-marker { display: none; }
.menu-seccion > summary.menu-grupo span { flex-grow: 1; }
.menu-seccion > summary.menu-grupo:hover { background: rgba(255, 255, 255, 0.05); color: #dbe6fb; }
.menu-seccion > summary.menu-grupo:focus-visible { outline: 2px solid var(--dorado); outline-offset: 1px; }
.menu-flecha { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.18s ease; transform: rotate(-90deg); }
.menu-seccion[open] > summary .menu-flecha { transform: none; }
.menu-seccion[open] > summary .contador { display: none; }
.menu-seccion[data-activo] > summary.menu-grupo { color: #dbe6fb; }
.menu-items { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 4px; }
.menu-seccion[open] > .menu-items { animation: menuAbrir 0.16s ease; }
@keyframes menuAbrir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Barra de pestañas de la sección: fija debajo de la barra superior, a todo lo ancho del contenido. */
.barra-pestanas {
    position: sticky; top: 60px; z-index: 15; display: flex; align-items: center; gap: 14px;
    margin: -26px -28px 22px; padding: 10px 28px; background: rgba(243, 245, 249, 0.94); backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--borde); box-shadow: 0 6px 14px -12px rgba(15, 23, 42, 0.35);
}
.barra-pestanas-seccion { display: inline-flex; align-items: center; gap: 8px; color: var(--marca); font-weight: 700; font-size: 0.92rem; white-space: nowrap; flex-shrink: 0; }
.barra-pestanas-seccion .icono { width: 20px; height: 20px; color: var(--acento); }
.barra-pestanas-seccion::after { content: ""; width: 1px; height: 22px; background: var(--borde-fuerte); margin-left: 6px; }
.barra-pestanas-lista { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding: 2px; min-width: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
.barra-pestanas-lista::-webkit-scrollbar { display: none; }
.barra-pestanas-lista a, .pestanas a {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; white-space: nowrap;
    background: var(--superficie); border: 1px solid var(--borde); color: var(--texto); font-weight: 600; font-size: 0.87rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.barra-pestanas-lista a:hover, .pestanas a:hover { background: var(--marca-suave); border-color: #c7d7f5; color: var(--marca); text-decoration: none; }
.barra-pestanas-lista a.activa, .pestanas a.activa { background: var(--marca); border-color: var(--marca); color: #fff; box-shadow: 0 4px 10px -4px rgba(11, 42, 91, 0.55); }
.barra-pestanas-lista a.activa:hover, .pestanas a.activa:hover { color: #fff; background: var(--marca); }
/* Pestañas internas de una pantalla (proyecto, convocatoria, fondo de grupo): mismo estilo, sin quedar fijas. */
.pestanas { gap: 6px; margin: 0 0 18px; border-bottom: 0; padding: 2px; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a { margin-bottom: 0; border-bottom-width: 1px; }
.pestanas a.activa .conteo { background: rgba(255, 255, 255, 0.22); color: #fff; }

@media (max-width: 900px) {
    .barra-pestanas { margin: -18px -14px 18px; padding: 8px 14px; gap: 10px; }
    .barra-pestanas-seccion span { display: none; }
    .barra-pestanas-seccion::after { margin-left: 2px; }
}
@media print { .barra-pestanas { display: none !important; } }
.barra-pestanas-lista { position: relative; }

/* 1.41.0: novedades de la versión instalada (página Licencia). */
.novedades-version { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.novedades-version li { border-left: 3px solid var(--acento); padding: 2px 0 2px 12px; }
.novedades-version li div { margin-top: 2px; font-size: .92rem; }

/* 1.42.0: Soporte (tickets con SAGA). */
.soporte-cabecera { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.soporte-conversacion { display: flex; flex-direction: column; gap: 12px; }
.soporte-mensaje { border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; line-height: 1.6; overflow-wrap: anywhere; }
.soporte-mensaje.de-escuela { background: #f8fafc; margin-right: 36px; }
.soporte-mensaje.de-soporte { background: var(--azul-fondo); border-color: #bfdbfe; border-left: 4px solid var(--acento); margin-left: 36px; }
.soporte-mensaje-autor { margin-bottom: 4px; font-size: 0.88rem; }
.soporte-adjuntos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.soporte-adjuntos a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--borde); font-size: 0.86rem; }
.soporte-adjuntos .icono { width: 16px; height: 16px; }
@media (max-width: 640px) { .soporte-mensaje.de-escuela, .soporte-mensaje.de-soporte { margin-left: 0; margin-right: 0; } }

/* 1.46.0: pestañas de la sección. En la computadora, botones en una fila; en el celular, cuadrícula de 3 columnas con
   ícono y nombre corto, todas a la vista (sin deslizar) y sin quedar fija para no ocupar la pantalla. */
.barra-pestanas-lista a .icono { display: none; }
.barra-pestanas-lista .pestana-corta { display: none; }
@media (max-width: 760px) {
    .barra-pestanas { position: static; flex-direction: column; align-items: stretch; gap: 8px; backdrop-filter: none; }
    .barra-pestanas-seccion span { display: inline; }
    .barra-pestanas-seccion::after { display: none; }
    .barra-pestanas-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 0; }
    .barra-pestanas-lista a { flex-direction: column; justify-content: center; gap: 3px; min-height: 58px; padding: 7px 4px; border-radius: 12px;
        white-space: normal; text-align: center; font-size: 0.78rem; line-height: 1.15; }
    .barra-pestanas-lista a .icono { display: block; width: 20px; height: 20px; flex-shrink: 0; }
    .barra-pestanas-lista .pestana-larga { display: none; }
    .barra-pestanas-lista .pestana-corta { display: block; overflow-wrap: anywhere; }
}

/* 1.47.0: formato vacío de proyecto (para llenar a mano) en una sola hoja carta: los títulos de los campos ocupan solo
   lo necesario y el resto del renglón queda para escribir. */
.formato-vacio .doc-hoja { font-size: 11px; padding: 10mm; }
.formato-vacio .doc-encabezado { padding-bottom: 5px; }
.formato-vacio .doc-encabezado img { width: 38px; height: 38px; }
.formato-vacio .doc-titulo { font-size: 0.98rem; padding: 6px 10px; margin: 8px 0 4px; }
.formato-vacio .doc-derecha { margin: 2px 0; }
.formato-vacio .doc-hoja h2 { font-size: 0.84rem; margin: 9px 0 4px; }
.formato-vacio .doc-tabla th, .formato-vacio .doc-tabla td { font-size: 11px; padding: 3px 6px; }
.formato-vacio .doc-tabla:not(.doc-cotizaciones) th { width: 1%; white-space: nowrap; }
.formato-vacio .doc-tabla:not(.doc-cotizaciones) td { height: 22px; }
.formato-vacio .doc-casilla { margin-right: 8px; }
.formato-vacio .doc-cotizaciones td { height: 27px; }
.formato-vacio .doc-cotizaciones td:nth-child(2), .formato-vacio .doc-cotizaciones td:nth-child(3) { width: 20%; }
.formato-vacio .doc-cotizaciones td:nth-child(4) { width: 10%; }
.formato-vacio .doc-cotizaciones td:nth-child(5) { white-space: nowrap; font-size: 10px; }
.formato-vacio .doc-cotizaciones .doc-casilla { margin-right: 5px; }
.formato-vacio .doc-justificacion { min-height: 88px; }
.formato-vacio .doc-lineamientos { padding: 5px 10px; margin: 8px 0; font-size: 9.5px; }
.formato-vacio .doc-lineamientos ul { margin-top: 2px; }
.formato-vacio .doc-caja { padding: 5px 8px; line-height: 1.45; }
.formato-vacio .doc-tesoreria { margin-top: 8px; }
.formato-vacio .doc-hoja .firmas { margin-top: 32px; gap: 24px; }
.formato-vacio .firmas div, .formato-vacio .firmas .texto-suave { font-size: 10.5px; }
@media print { .formato-vacio .doc-hoja { padding: 0; } }

/* 1.53.0: listas de alumnos para imprimir (cotejo). En pantalla, cada grupo en su hoja; al imprimir, una hoja por grupo. */
.listas-marcas { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 12px; }
.listas-marcas label { font-weight: 400; display: flex; gap: 6px; align-items: center; }
.listas-marcas input { width: auto; }
.lista-hoja { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; font-size: 12px; color: #111; }
.lista-titulo { font-size: 1rem; color: var(--marca); margin: 10px 0 4px; letter-spacing: 0.02em; }
.lista-actividad { margin: 0 0 8px; }
.lista-tabla th, .lista-tabla td { padding: 4px 6px; font-size: 11.5px; }
.lista-tabla td { height: 22px; }
.lista-num { width: 1%; text-align: right; white-space: nowrap; }
.lista-casilla { width: 44px; text-align: center; white-space: nowrap; font-size: 10px; }
.lista-cuadro { display: inline-block; width: 13px; height: 13px; border: 1.3px solid #334155; border-radius: 2px; vertical-align: middle; }
.lista-obs { width: 26%; }
.lista-pie { margin: 6px 0 0; font-size: 10.5px; color: #64748b; text-align: right; }
@media print {
    .lista-hoja { border: none; border-radius: 0; padding: 0; margin: 0; break-after: page; page-break-after: always; }
    .lista-hoja:last-of-type { break-after: auto; page-break-after: auto; }
    .lista-tabla thead { display: table-header-group; }
    .lista-tabla tr { break-inside: avoid; page-break-inside: avoid; }
}

/* 1.49.0: pendientes de una persona (caja y fondos), paso de fondos del ciclo nuevo y entrega de fondos. */
.pendientes-usuario { margin-top: 10px; }
.pendientes-usuario ul { margin: 6px 0 8px; padding-left: 20px; }
.pendientes-usuario label { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }
.pendientes-usuario label input { width: auto; margin-top: 3px; }
.fondo-transicion { border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.fondo-transicion h3 { margin: 0 0 8px; font-size: 1rem; }
.fondo-transicion .opciones-propuesta { margin-bottom: 8px; }
.entrega-fondo .opciones-propuesta { margin-bottom: 10px; }

/* 1.47.0: entrega del acceso (invitación o contraseña temporal), resultado de la invitación y aviso de cargo ocupado. */
.opcion-entrega { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-top: 6px; border: 1px solid var(--borde); border-radius: 10px; font-weight: 400; cursor: pointer; }
.opcion-entrega input { width: auto; margin-top: 3px; flex-shrink: 0; }
.opcion-entrega:has(input:checked) { border-color: var(--acento); background: var(--azul-fondo); }
.opcion-entrega:has(input:disabled) { opacity: 0.65; cursor: not-allowed; }
.invitacion-resultado { border-left: 4px solid var(--verde, #16a34a); }
.aviso-cargo { margin: 8px 0 0; }
.form-invitar { margin-top: 12px; }

/* 1.47.0: contraseña temporal con botones Generar y Copiar. */
.clave-temporal-campo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.clave-temporal-campo input { flex: 1 1 200px; max-width: 280px; font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.04em; }

/* 1.46.0: búsqueda inmediata (Usuarios) y organismo "Otro". */
.buscar-tabla { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 12px; }
.buscar-tabla .form-grupo { margin: 0; flex: 1 1 220px; }
.buscar-tabla .form-grupo:nth-child(2) { flex: 0 1 180px; }
.buscar-tabla [data-buscar-conteo] { padding-bottom: 10px; font-size: 0.86rem; }
.organismo-otro { margin-top: 10px; }
tr[hidden] { display: none; }