/* Portal UCN — hoja única, sin compilación.
   Es la piel de la maqueta (sitio/assets/portal.css + los estilos en línea de
   diseno/_base.py) pasada a clases y hecha FLUIDA: la maqueta es un lienzo de 1440 px
   escalado; aquí el rail es fijo a la izquierda y el contenido se adapta.
   Paleta: diseno/_base.py. Si cambia allí, cambia aquí. */

:root {
  --page: #FAF7F0; --card: #FFFDF9; --rail: #F2ECE0; --hair: #E3DCCC; --hair2: #D3C9B4;
  --ink: #1E1D19; --ink2: #56534A; --ink3: #8A8577; --fill: #EDE6D8;
  --a1: #2073AE; --a2: #C0521C; --a3: #12876B; --a4: #7B4FB0; --a5: #9C8A0F;
  --o1: #89B6DC; --o2: #4F92CB; --o4: #124B76;
  --aviso-fondo: #FBF3EC; --fila-hover: #F7F1E6;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --rail-ancho: 236px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans);
       font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--a1); text-decoration: none; }
a:hover { color: var(--o4); }
h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0 0 1em; }
code { font-family: var(--mono); font-size: .92em; }
.serif { font-family: var(--serif); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .92em; }
.over, .sobre { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); font-weight: 500; }
.tenue { color: var(--ink3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ================================================================ el marco */
.app { display: flex; min-height: 100vh; }
.app-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.principal { width: 100%; max-width: 1340px; padding: 30px 40px 40px; display: flex;
             flex-direction: column; gap: 24px; }

/* ------------------------------------------------------------------ el rail */
.rail { width: var(--rail-ancho); flex-shrink: 0; background: var(--rail); border-right: 1px solid var(--hair);
        display: flex; flex-direction: column; gap: 26px; padding: 28px 0 28px;
        position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.rail-marca { display: flex; align-items: center; gap: 9px; padding: 0 22px; color: inherit; }
.rail-marca:hover { color: inherit; }
.rail-marca > span { display: flex; flex-direction: column; gap: 3px; }
.rail-nombre { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.rail-lista { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.rail-seccion { padding: 18px 10px 8px; }
.rail-seccion-1 { padding-top: 0; }
.rail-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; width: 100%;
             border-radius: 5px; font: inherit; font-size: 13px; color: var(--ink2); text-align: left;
             background: none; border: 0; cursor: pointer;
             transition: background 90ms linear, color 90ms linear; }
.rail-item svg { flex-shrink: 0; color: var(--ink3); }
.rail-item:hover { background: var(--fill); color: var(--ink); }
.rail-item.on, .rail-item.on:hover { background: var(--card); box-shadow: inset 2px 0 0 var(--a1);
                                     font-weight: 600; color: var(--ink); }
.rail-item.on svg { color: var(--a1); }
.rail-salir { margin: 0; }
.rail-pie { margin-top: auto; padding: 0 22px; display: flex; align-items: center; gap: 10px; color: inherit; }
.rail-pie:hover { color: inherit; }
.rail-pie > span:last-child { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; min-width: 0; }
.rail-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--o4); color: var(--card);
               display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.rail-pie-1 { font-size: 12px; font-weight: 600; }
.rail-pie-2 { font-size: 11px; color: var(--ink3); }

.barra-movil { display: none; }
.rail-abrir { background: var(--card); border: 1px solid var(--hair2); border-radius: 5px; padding: 6px 8px;
              color: var(--ink); cursor: pointer; display: flex; }

/* ------------------------------------------------------------ la cabecera */
.cabecera-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.cabecera-textos { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cabecera-pagina h1 { font-size: 42px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.02; }
.cabecera-sub { font-size: 12.5px; color: var(--ink2); }
.cabecera-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* La franja de filtros / resumen bajo la cabecera (filtros() de _base.py). */
.filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--hair);
           border-bottom: 1px solid var(--hair); padding: 11px 0; }
.chip { display: inline-flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--hair2);
        border-radius: 4px; padding: 6px 11px; font-size: 12.5px; color: var(--ink); }
.chip span { color: var(--ink3); }
.chip strong { font-weight: 600; }
a.chip:hover { border-color: var(--ink3); background: #fff; }
.chip.on { border-color: var(--a1); box-shadow: inset 0 0 0 1px var(--a1); }
.filtros-derecha { margin-left: auto; font-size: 12px; color: var(--ink3); }

/* -------------------------------------------------------------------- KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); row-gap: 20px; }
.kpi { display: flex; flex-direction: column; gap: 6px; padding: 0 22px; border-left: 1px solid var(--hair); min-width: 0; }
.kpi:first-child { padding-left: 0; border-left: 0; }
.kpi-valor { font-size: 36px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.kpi-valor .cifra { display: inline-block; }
.kpi-unidad { font-size: 15px; color: var(--ink3); margin-left: 4px; letter-spacing: 0; }
.kpi-delta { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; flex-wrap: wrap; }
.kpi-delta svg { fill: currentColor; flex-shrink: 0; }
.kpi-delta.bueno { color: var(--a3); }
.kpi-delta.malo { color: var(--a2); }
.kpi-delta.plano { color: var(--ink2); }
.kpi-extra { color: var(--ink3); font-weight: 400; }
.kpi-pie { font-size: 11px; color: var(--ink3); }
.kpi[data-pista] { cursor: help; }

/* ---------------------------------------------------------------- tarjetas */
.tarjeta { background: var(--card); border: 1px solid var(--hair); border-radius: 6px; padding: 22px 24px 18px;
           display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tarjeta-compacta { padding: 18px 20px; gap: 14px; }
.tarjeta-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.tarjeta-textos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tarjeta-titulo { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.tarjeta-sub { font-size: 12px; color: var(--ink3); }
.tarjeta-leyenda { flex-shrink: 0; padding-top: 2px; }
.tarjeta h2:not(.tarjeta-titulo) { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.tarjeta svg.grafica { width: 100%; height: auto; display: block; overflow: visible; }
.nota-grafica { font-size: 11.5px; color: var(--ink2); line-height: 1.5; border-top: 1px solid var(--hair); padding-top: 10px; }

.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.rejilla-principal { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.pila { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* ----------------------------------------------------------------- leyenda */
.leyenda { display: flex; flex-direction: column; gap: 5px; }
.leyenda-item { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink2); white-space: nowrap; }
.leyenda-cuadro { width: 11px; height: 11px; border-radius: 2px; flex-shrink: 0; }
.leyenda-punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.leyenda-linea { width: 12px; height: 3px; border-radius: 2px; flex-shrink: 0; }

/* ------------------------------------------------------------------ tablas */
.tarjeta-tabla { padding: 0; gap: 0; }
.tarjeta-tabla > .tarjeta-cab { padding: 20px 24px 14px; }
.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla, .tarjeta table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th, .tarjeta table th { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3);
            font-weight: 500; text-align: left; padding: 0 12px 8px; border-bottom: 1px solid var(--hair2); white-space: nowrap; }
.tabla td, .tarjeta table td { padding: 12px 12px; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.tabla th:first-child, .tabla td:first-child { padding-left: 24px; }
.tabla th:last-child, .tabla td:last-child { padding-right: 24px; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .der, .tarjeta table .der, th.derecha, td.derecha { text-align: right; }
.tabla .centro { text-align: center; }
.tabla tr.destacada td { background: var(--aviso-fondo); }
.tabla tr.apagada td { color: var(--ink3); }
.tabla tr[data-href] { cursor: pointer; transition: background 90ms linear; }
.tabla tr[data-href]:hover td { background: var(--fila-hover); }
.tabla tr.subtotal td { background: var(--page); font-weight: 600; }
.tabla-pie { border-top: 1px solid var(--hair2); padding: 12px 24px; font-size: 12px; color: var(--ink3); }
.celda-colegio { display: flex; flex-direction: column; gap: 2px; }
.celda-colegio strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.celda-colegio span { font-size: 11px; color: var(--ink3); }
.barra-celda { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.barra-carril { width: 46px; height: 7px; background: var(--fill); border-radius: 3px; display: flex; overflow: hidden; }
.barra-relleno { height: 7px; border-radius: 3px; display: block; }
.estado-envio { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink3); white-space: nowrap; }
.estado-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--a3); flex-shrink: 0; }
.estado-envio.atrasado { color: var(--a2); font-weight: 600; }
.estado-envio.atrasado .estado-punto { background: var(--a2); }
.delta-pos { color: var(--a3); font-weight: 500; }
.delta-neg { color: var(--a2); font-weight: 500; }
.vacio { text-align: center; padding: 28px 20px; color: var(--ink2); margin: 0; }

/* ------------------------------------------------------------------ avisos */
.avisos-lista { display: flex; flex-direction: column; gap: 13px; }
.aviso-item { display: flex; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid var(--hair); }
.aviso-item:last-child { padding-bottom: 0; border-bottom: 0; }
.aviso-item > svg { flex-shrink: 0; margin-top: 1px; }
.aviso-item.tono-naranja > svg { color: var(--a2); }
.aviso-item.tono-ocre > svg { color: var(--a5); }
.aviso-item.tono-azul > svg { color: var(--a1); }
.aviso-item.tono-verde > svg { color: var(--a3); }
.aviso-titulo { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.aviso-titulo a { color: inherit; }
.aviso-titulo a:hover { color: var(--o4); }
.aviso-texto { font-size: 11.5px; color: var(--ink2); line-height: 1.4; margin-top: 3px; }

/* La franja de aviso dentro de una pantalla (colegio atrasado, sin fuente…). */
.franja { display: flex; gap: 12px; align-items: flex-start; background: var(--aviso-fondo); border: 1px solid #EBCDB9;
          border-radius: 6px; padding: 13px 16px; font-size: 12.5px; color: var(--ink2); }
.franja > svg { color: var(--a2); flex-shrink: 0; margin-top: 1px; }
.franja strong { color: var(--ink); }
.franja-neutra { background: var(--card); border-color: var(--hair); }
.franja-neutra > svg { color: var(--a1); }

/* Sincronización: un cuadro por colegio. */
.sinc { display: grid; grid-template-columns: repeat(auto-fill, minmax(22px, 1fr)); gap: 6px; }
.sinc span { height: 20px; border-radius: 3px; background: var(--a3); }
.sinc span.atrasado { background: var(--a2); }
.sinc span.nunca { background: var(--hair2); }
.sinc-leyenda { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink2); }
.sinc-leyenda i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }

/* Lista de datos (definición). */
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; font-size: 13px; }
.datos dt { color: var(--ink3); }
.datos dd { margin: 0; }

/* ------------------------------------------------------------ etiquetas */
.etiqueta { display: inline-block; font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 10px;
            background: var(--fill); color: var(--ink2); white-space: nowrap; }
.etiqueta-verde { background: #E1F1EA; color: #0C6A53; }
.etiqueta-naranja { background: #F8E6DC; color: #A0431A; }
.etiqueta-azul { background: #E2EEF7; color: var(--o4); }

/* ----------------------------------------------------- avisos de sesión */
.aviso { border-radius: 5px; padding: 10px 14px; font-size: 13px; border: 1px solid; }
.aviso-exito { background: #E7F3EE; border-color: #A9D3C3; color: #0C5E4A; }
.aviso-error { background: #FBEDE5; border-color: #E8BFA8; color: #8A3A12; }
.aviso ul { margin: 0; padding-left: 18px; }

/* ------------------------------------------------------------ formularios */
.form { max-width: 680px; }
.campo { margin-bottom: 16px; }
.campo > label, .campo > .rotulo { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
                                   font-weight: 500; color: var(--ink3); margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], select {
  width: 100%; font: inherit; font-size: 13.5px; color: var(--ink); background: #fff; border: 1px solid var(--hair2);
  border-radius: 5px; padding: 10px 12px; transition: border-color 90ms linear, box-shadow 90ms linear; }
input:hover, select:hover { border-color: var(--ink3); }
input:focus, select:focus { outline: none; border-color: var(--a1); box-shadow: 0 0 0 3px rgba(32, 115, 174, 0.13); }
.invalido { border-color: var(--a2) !important; }
.error-campo { color: #A0431A; font-size: 12px; margin-top: 4px; }
.ayuda { font-size: 12px; color: var(--ink3); margin-top: 4px; }
.casilla { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0; color: var(--ink); cursor: pointer; }
.casilla input { width: 16px; height: 16px; accent-color: var(--a1); }
.casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 16px;
            border: 1px solid var(--hair2); border-radius: 5px; padding: 10px 12px; background: #fff; }
.fila-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { padding: 0; }
.seccion-form { border-top: 1px solid var(--hair); padding-top: 18px; margin-top: 8px; }

.boton { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12.5px; font-weight: 500;
         padding: 8px 14px; border-radius: 4px; border: 1px solid var(--o4); background: var(--o4); color: var(--card);
         cursor: pointer; transition: background 90ms linear, border-color 90ms linear; }
.boton:hover { background: #0E3C60; border-color: #0E3C60; color: var(--card); }
.boton-sec { background: var(--card); color: var(--ink); border-color: var(--hair2); }
.boton-sec:hover { background: #fff; color: var(--ink); border-color: var(--ink3); }
.boton-chico { font-size: 12px; padding: 5px 10px; }
.boton-ancho { width: 100%; justify-content: center; }

/* -------------------------------------------------------------------- pie */
.pie { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
       font-size: 11px; color: var(--ink3); padding-top: 4px; }

/* -------------------------------------------------- «en construcción» */
.obra { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 640px; padding: 12px 0; }
.obra svg { color: var(--ink3); }
.obra p { font-size: 13.5px; color: var(--ink2); line-height: 1.6; margin: 0; }

/* ================================================================ la muestra
   Franja arriba y pastilla fija abajo: si alguien hace una captura, sale. */
.banner-muestra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #FBF1E8;
                  border-bottom: 1px solid #EBCDB9; padding: 8px 40px; font-size: 12px; color: var(--ink2); }
.banner-muestra strong { color: #8A3A12; }
.muestra { position: fixed; right: 14px; bottom: 14px; z-index: 90; pointer-events: none;
           display: flex; align-items: center; gap: 7px; background: rgba(255, 253, 249, 0.94);
           border: 1px solid var(--hair2); border-radius: 13px; padding: 5px 12px 5px 10px;
           font-size: 11px; letter-spacing: 0.02em; color: var(--ink2);
           box-shadow: 0 1px 3px rgba(30, 29, 25, 0.07); }
.muestra-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--a2); flex-shrink: 0; display: inline-block; }
@media print { .muestra { position: static; } .rail, .barra-movil { display: none; } }

/* ================================================================ invitado
   sitio/fuentes/entrar.html, fluido. */
body.invitado { min-height: 100vh; }
.ent-pagina { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
              gap: 34px; padding: 56px 16px 48px; }
.logo { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo-textos { display: flex; flex-direction: column; gap: 3px; }
.logo-nombre { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; }
.ent-tarjetas { display: grid; grid-template-columns: minmax(0, 404px) minmax(0, 404px); gap: 28px; align-items: start;
                width: 100%; justify-content: center; }
.ent-tarjetas:has(> :only-child) { grid-template-columns: minmax(0, 420px); }
.ent-tarjeta { background: var(--card); border: 1px solid var(--hair2); border-radius: 8px; }
.ent-forma { padding: 30px 32px 28px; box-shadow: 0 16px 38px rgba(30, 29, 25, 0.09); display: flex; flex-direction: column; gap: 0; }
.ent-forma .aviso { margin-bottom: 16px; }
.ent-lista { padding: 24px 26px 8px; border-color: var(--hair); }
.ent-titulo { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.ent-entradilla { font-size: 12.5px; color: var(--ink2); line-height: 1.5; margin: 7px 0 0; }
.ent-campo { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; }
.ent-recordar { margin-top: 14px; font-size: 12.5px; color: var(--ink2); }
.ent-entrar { width: 100%; margin-top: 22px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--card);
              background: var(--o4); border: 1px solid var(--o4); border-radius: 6px; padding: 13px 20px; cursor: pointer;
              transition: background 90ms linear; }
.ent-entrar:hover { background: #0E3C60; }
.ent-entrar:focus-visible { outline: 2px solid var(--a1); outline-offset: 2px; }
.ent-nota { font-size: 12px; color: var(--ink3); line-height: 1.5; margin: 16px 0 0; }
.ent-lista-titulo { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 5px 0 12px; }
.ent-acceso { display: flex; gap: 14px; padding: 15px 0; border-top: 1px solid var(--hair); }
.ent-acceso > span { display: flex; flex-direction: column; gap: 3px; }
.ent-acceso-1 { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.ent-acceso-2 { font-size: 11.5px; color: var(--ink2); line-height: 1.45; }
.ent-pie { text-align: center; }

/* =========================================================== el movimiento
   De sitio/assets/portal.css. animacion.js marca y suelta; esto es su CSS. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: se-va 170ms cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: llega 260ms cubic-bezier(0,0,.2,1) both; }
@keyframes se-va { to { opacity: 0; transform: translateY(-6px); } }
@keyframes llega { from { opacity: 0; transform: translateY(10px); } }
.tarjeta.por-aparecer { opacity: 0; transform: translateY(16px); }
.tarjeta.aqui { opacity: 1; transform: none;
                transition: opacity 520ms ease-out, transform 520ms cubic-bezier(.22,.85,.3,1); }

.pista { position: fixed; z-index: 120; pointer-events: none; max-width: 300px; padding: 8px 11px;
         background: var(--ink); color: var(--page); border-radius: 5px; font-size: 11.5px; line-height: 1.45;
         box-shadow: 0 4px 14px rgba(30, 29, 25, 0.22); opacity: 0; transform: translateY(3px);
         transition: opacity 120ms ease-out, transform 120ms ease-out; }
.pista.puesta { opacity: 1; transform: none; }
.pista strong { font-weight: 600; }
.pista .pista-cifra { font-variant-numeric: tabular-nums; font-family: var(--mono); }

.marca { transition: opacity 110ms linear; }
svg:hover .marca { opacity: 0.45; }
svg .marca:hover { opacity: 1; }
.tiene-pista { cursor: crosshair; }
svg .tiene-pista:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tarjeta.por-aparecer { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ================================================================ fluido */
@media (max-width: 1180px) {
  .principal { padding: 26px 28px 36px; }
  .rejilla-principal, .rejilla-3 { grid-template-columns: minmax(0, 1fr); }
  .cabecera-pagina h1 { font-size: 36px; }
}
@media (max-width: 900px) {
  .rail { position: fixed; left: 0; top: 0; bottom: 0; z-index: 100; transform: translateX(-100%);
          transition: transform 180ms ease-out; box-shadow: 0 0 40px rgba(30, 29, 25, 0.18); }
  body.rail-abierto .rail { transform: none; }
  body.rail-abierto::after { content: ""; position: fixed; inset: 0; background: rgba(30, 29, 25, 0.25); z-index: 99; }
  .barra-movil { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--hair);
                 background: var(--rail); position: sticky; top: 0; z-index: 50; }
  .barra-movil .logo-nombre { font-size: 16px; }
  .barra-movil .logo svg { width: 20px; height: 20px; }
  .principal { padding: 22px 18px 32px; gap: 20px; }
  .banner-muestra { padding: 8px 18px; }
  .rejilla-2 { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi, .kpi:first-child { padding: 0 14px; border-left: 1px solid var(--hair); }
  .kpi:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .kpi-valor { font-size: 30px; }
  .ent-tarjetas { grid-template-columns: minmax(0, 420px); }
  .fila-doble { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cabecera-pagina h1 { font-size: 30px; }
  .tarjeta { padding: 18px 16px 16px; }
  .tarjeta-tabla > .tarjeta-cab { padding: 16px 16px 12px; }
  .tabla th:first-child, .tabla td:first-child { padding-left: 16px; }
  .tabla th:last-child, .tabla td:last-child { padding-right: 16px; }
  .ent-forma { padding: 24px 20px; }
  .datos { grid-template-columns: 1fr; gap: 0; }
  .datos dd { margin-bottom: 8px; }
}

/* «Guardar» sin cambios que guardar (public/js/portal.js, guardarSiCambia) */
.boton:disabled { opacity: .45; cursor: not-allowed; }

/* Modal de confirmación (layouts/app, public/js/portal.js confirmaciones) */
.modal { border: 0; border-radius: 12px; padding: 24px 26px 20px; max-width: 440px; width: calc(100% - 32px);
  box-shadow: 0 20px 60px rgba(0,0,0,.25); background: var(--card); color: var(--ink); }
.modal-titulo { font-family: var(--serif); }
.modal::backdrop { background: rgba(20, 24, 32, .45); }
.modal-titulo { margin: 0 0 8px; font-size: 1.15rem; }
.modal-texto { margin: 0 0 18px; line-height: 1.5; }
.modal .acciones { display: flex; gap: 10px; justify-content: flex-end; }
.boton-peligro { background: var(--a2); border-color: var(--a2); }
.boton-peligro:hover { background: #A0431A; border-color: #A0431A; }