/* =============================================================================
   SINERGIA — la hoja de estilos de la plataforma
   =============================================================================

   POR QUÉ EXISTE ESTE ARCHIVO

     Hasta hoy no había ninguno. El sistema vivía dentro de `layout.php`, y cada
     una de las 123 vistas que tienen `<style>` propio le agregaba lo suyo: ocho
     mil líneas de CSS repartidas, que además viajaban incrustadas en cada
     página y por tanto se volvían a descargar en cada pantalla.

     El síntoma más visible eran los botones. El sistema decía que todo botón
     ocupa el ancho completo, que no sirve dentro de una tabla, así que 69
     vistas volvían a declararlo. «Cambiar los botones» eran setenta cambios.

     Aquí el sistema se escribe una vez y el navegador lo guarda en caché. Lo
     que queda en cada vista es lo que de verdad solo le pasa a ella.

   CÓMO SE USA

     `layout.php` la enlaza con `?v=` y la fecha del archivo, para que un
     despliegue invalide la copia guardada del navegador sin que nadie tenga que
     acordarse de subir un número a mano.

   ============================================================================= */

/* ── La tipografía ───────────────────────────────────────────────────────────
   Source Sans 3, servida por nosotros y no por Google.

   No es una preferencia: la CSP de la aplicación es `default-src 'self'`, así
   que un `@font-face` apuntando a fonts.gstatic.com lo bloquea el navegador y
   la letra nunca llega. Y la aplicación se instala: tiene que verse igual sin
   señal.

   Es una fuente variable, así que un solo archivo de 28 KB cubre todos los
   pesos. Antes decía `system-ui`, que es «la que traiga el aparato»: Segoe UI
   en Windows, Roboto en Android, otra en iPhone. Nunca se veía igual dos veces.

   `font-display:swap` para que el texto se lea desde el primer instante con la
   letra del sistema y cambie cuando la nuestra llegue. Sin eso, en una conexión
   lenta la pantalla sale en blanco. */
@font-face{
  font-family:'Source Sans 3';
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url('/assets/fuentes/source-sans-3-latin.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* La familia completa, con el respaldo de siempre detrás por si el archivo
     no cargara. */
  --letra:'Source Sans 3',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* ── Los colores que ya estaban, del logo de Sinergia ────────────────── */
  --pizarra:#3F4959; --pizarra-osc:#2B3340; --pizarra-cla:#64738A;
  --naranja:#F37639; --naranja-osc:#D2551F;
  --papel:#F7F8FA; --borde:#DDE1E7; --texto:#22282F; --tenue:#6B7480;
  --error:#B3261E; --ok:#1E6B4F;

  /* ── Los que faltaban ─────────────────────────────────────────────────
     Salieron de contar los colores escritos a mano en las vistas: 135
     distintos, y la mayoría eran el mismo color con otro nombre. El verde de
     «bien» estaba escrito 153 veces.

     Las tres familias semánticas quedan completas —el color, su versión
     oscura para el texto, el fondo y el borde—, porque un aviso necesita las
     cuatro y quien no las tenga se las vuelve a inventar. */
  --ok-osc:#14543D;    --ok-cla:#2E9E75;
  --ok-fondo:#E9F5F0;  --ok-borde:#C3E3D6;

  --error-osc:#7F1D18;
  --error-fondo:#FCEBEA; --error-borde:#F3C9C6;

  /* El ámbar de «pendiente», que no existía como variable y andaba suelto en
     cuatro tonos distintos por las vistas. */
  --aviso:#B45309;     --aviso-cla:#E8A33D;  --aviso-osc:#7A4A12;
  --aviso-fondo:#FDF1E7; --aviso-borde:#F2D9BC;

  /* ── Formas ───────────────────────────────────────────────────────────
     Tres radios y dos sombras, para que las tarjetas de dos pantallas
     distintas no tengan esquinas distintas. */
  --r-chico:6px; --r:10px; --r-grande:14px;
  --sombra:0 1px 2px rgba(34,40,47,.06), 0 1px 3px rgba(34,40,47,.05);
  --sombra-alta:0 2px 6px rgba(34,40,47,.09), 0 8px 24px rgba(34,40,47,.07);
}

/* ── Los botones ─────────────────────────────────────────────────────────────
   Todo botón sale de estas clases, que sirven igual en un `<button>` y en un
   enlace que parece botón:

     .btn                 la acción principal
     .btn.secundario      la que acompaña —volver, cancelar, ver—
     .btn.peligro         la que borra o rechaza
     .btn.chico           la de una fila de tabla
     .btn.ancho-completo  ancho completo, cuando se quiere a propósito

   Los modificadores llevan nombres que ninguna vista usa. Se llamaba
   `.bloque`, que es la tarjeta de 59 pantallas: a igual peso gana la regla de
   la vista, y el botón salía con el fondo blanco de la tarjeta y la letra
   blanca. `.ancho` tampoco sirvió: es el contenedor de dos del admin.

   `python scripts/barrido_botones.py <prefijo>` comprueba que una vista no
   tenga botones fuera de estas clases ni reglas que les cambien el aspecto. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  width:auto; margin:0; padding:.6rem 1.1rem;
  font:600 1rem/1.2 var(--letra); text-decoration:none; white-space:nowrap;
  color:#fff; background:var(--naranja);
  border:1px solid transparent; border-radius:var(--r-chico);
  cursor:pointer; transition:background .12s, border-color .12s, color .12s;
}
.btn:hover{background:var(--naranja-osc); color:#fff}
.btn:focus-visible{outline:2px solid var(--pizarra); outline-offset:2px}

.btn.secundario{background:#fff; color:var(--pizarra); border-color:var(--borde)}
.btn.secundario:hover{background:var(--papel); border-color:var(--pizarra-cla); color:var(--pizarra)}

.btn.peligro{background:#fff; color:var(--error); border-color:var(--error-borde)}
.btn.peligro:hover{background:var(--error); color:#fff; border-color:var(--error)}

/* La del club, no la del afiliado.
   En las pantallas que atiende el club —mover un trámite, resolver una
   solicitud— la acción principal no es naranja: el naranja es la marca de la
   casa y lo que hace el cliente. Distinguirlas evita que quien atiende oprima
   por costumbre el botón que el afiliado tenía ahí ayer. */
.btn.oscuro{background:var(--pizarra); color:#fff; border-color:transparent}
.btn.oscuro:hover{background:var(--pizarra-osc); color:#fff}

/* Aprobar.
   El verde no es adorno: en las pantallas del club, aprobar y negar van juntas
   y se oprimen deprisa. Que una sea verde y la otra roja es lo que evita el
   clic equivocado sobre una solicitud de afiliación que no se puede deshacer. */
.btn.aprobar{background:var(--ok); color:#fff; border-color:transparent}
.btn.aprobar:hover{background:var(--ok-osc); color:#fff}

.btn.chico{padding:.32rem .7rem; font-size:.82rem; border-radius:var(--r-chico)}
.btn.ancho-completo{display:flex; width:100%}

/* En el teléfono.
   `nowrap` mantiene el rótulo en un renglón, y en una pantalla de 375 píxeles
   «Enviar al correo (alguien@…)» se salía de la tarjeta y la página entera
   se corría de lado. Ahí el rótulo se parte, y el botón de un formulario
   ocupa el ancho: es el que el pulgar tiene que encontrar. Los chicos no,
   porque van en filas de tabla y al lado de un campo. */
.btn{max-width:100%}
@media (max-width:36rem){
  .btn{white-space:normal; text-align:center}
  form > .btn:not(.chico){width:100%}
}

/* Un botón que no se puede oprimir se ve apagado, no desaparecido: quien no
   entienda por qué está apagado al menos sabe que existe. */
.btn[disabled],.btn.apagado{opacity:.5; pointer-events:none}

/* ── Los iconos ──────────────────────────────────────────────────────────────
   Un solo archivo `/assets/iconos.svg` con todos los símbolos, y cada vista
   llama al que necesita:

       <svg class="ico"><use href="/assets/iconos.svg#tramites"></use></svg>

   Ni JavaScript ni una fuente de iconos ni nada pedido a otro dominio, que la
   CSP no dejaría pasar. Toman el color del texto que los rodea —van dibujados
   con `currentColor`—, así que el mismo icono sirve en un botón naranja y en
   un renglón gris sin tener que duplicarlo. */
.ico{
  width:1.15em; height:1.15em; flex:0 0 auto;
  vertical-align:-.17em; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.ico.grande{width:1.6em; height:1.6em}
.ico.relleno{fill:currentColor; stroke:none}


/* =============================================================================
   Lo que venía de `layout.php`, tal cual. Se movió sin tocarlo para que este
   paso no cambiara cómo se ve nada: lo que sigue es el sistema que ya existía.
   ============================================================================= */

*{box-sizing:border-box}
body{
  margin:0; background:var(--papel); color:var(--texto);
  font:16px/1.55 var(--letra);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* ── La barra de arriba ──────────────────────────────────────────────────
   En el teléfono se parte en dos filas: arriba la marca y quién está
   dentro, abajo el menú, que se desliza de lado cuando no cabe. En
   pantalla ancha va todo en una sola línea.

   Antes era un párrafo de enlaces separados por puntos, y en un teléfono
   se enrollaba en tres renglones con el nombre partido por la mitad. */
/* `hidden` tiene que ganar siempre. El navegador lo aplica con la prioridad
   más baja que existe, así que cualquier `display:flex` de una pantalla lo
   anula sin querer y el elemento «escondido» se sigue viendo. Pasa con los
   botones de los filtros, que se esconden desde JavaScript. */
[hidden]{display:none !important}

.barra{
  background:var(--pizarra); color:#fff; padding:.5rem .9rem;
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  box-shadow:0 1px 2px rgba(34,40,47,.2); position:relative; z-index:5;
}
.barra .logo{flex:0 0 auto; display:flex; align-items:center; color:inherit;
    text-decoration:none}
.barra .logo img{height:32px; width:auto; display:block}

/* El nombre del sistema, al lado del logo y separado por una raya: el logo
   identifica al establecimiento y SIGA a su plataforma, que no son lo mismo.
   La sigla en versales y espaciada; el desarrollo debajo, pequeño. */
.barra .logo .sistema{
  display:flex; flex-direction:column; line-height:1.05;
  margin-left:.6rem; padding-left:.6rem;
  border-left:1px solid rgba(255,255,255,.25);
}
.barra .logo .sistema b{font-size:.95rem; font-weight:700; letter-spacing:.1em}
.barra .logo .sistema small{font-size:.72rem; opacity:.7; white-space:nowrap}

/* En un teléfono angosto el desarrollo empuja el resto de la barra a otra
   fila. Se queda la sigla, que es lo que identifica. */
@media (max-width:430px){ .barra .logo .sistema small{display:none} }

.barra .menu{
  order:3; width:100%; display:flex; align-items:center; gap:.15rem;
  padding-top:.15rem;
  /* Se desliza de lado en vez de saltar de renglón. */
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.barra .menu::-webkit-scrollbar{display:none}
.barra .menu a{
  padding:.34rem .72rem; border-radius:999px; white-space:nowrap;
  font-size:.85rem; color:#fff; text-decoration:none; opacity:.72;
}
.barra .menu a:hover{background:rgba(255,255,255,.13); opacity:1}
.barra .menu a.aqui{background:rgba(255,255,255,.17); opacity:1; font-weight:600}

.barra .yo{order:2; margin-left:auto; display:flex; align-items:center; gap:.5rem}
.barra .avatar{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  background:var(--naranja); display:flex; align-items:center;
  justify-content:center; font-size:.72rem; font-weight:700;
}
.barra .quien{
  font-size:.85rem; font-weight:600; max-width:8.5rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.barra .salir{
  flex:0 0 auto; padding:.28rem .75rem; border:1px solid rgba(255,255,255,.32);
  border-radius:999px; font-size:.8rem; color:#fff; text-decoration:none; opacity:.85;
}
.barra .salir:hover{background:rgba(255,255,255,.14); opacity:1}

@media (min-width:48rem){
  .barra{padding:.55rem 1.5rem; flex-wrap:nowrap}
  .barra .menu{order:2; width:auto; padding-top:0; margin-left:.5rem}
  .barra .yo{order:3}
  .barra .quien{max-width:16rem}
}

/* ── Volver ──────────────────────────────────────────────────────────────
   Una sola pieza para toda la aplicación. Cada pantalla traía la suya
   —un enlace pequeño y gris— y muchas no traían ninguna: desde un
   trámite no había forma de devolverse sin el botón del teléfono, que en
   la aplicación instalada ni siquiera está.

   Cuando la pantalla no pone la suya, la pone el layout.

   ES UN ICONO Y NO UNA PALABRA

   Una flecha sola, dentro de un círculo. La palabra «Atrás» ocupaba un renglón
   entero encima de cada título y no decía nada que la flecha no diga: es el
   gesto más conocido que hay en un teléfono. Quitarla deja la pantalla más
   limpia y el botón más grande de tocar.

   El texto sigue estando en el HTML —las treinta y cinco pantallas lo
   escriben— y solo se esconde a la vista con `font-size:0`. Eso importa: un
   lector de pantalla necesita oír «Atrás», y un botón que por dentro está
   vacío no se puede anunciar. Así se ve un icono y se oye una palabra.

   A dónde va cada uno lo decide su pantalla; el destino queda en el `title`,
   para quien pase el ratón por encima. */
.volver{margin:0 0 .9rem}
.volver a{
  display:inline-flex; align-items:center; justify-content:center;
  /* 2.75rem son 44 píxeles: el mínimo con el que un dedo acierta sin pensar.
     Con menos, en un teléfono hay que apuntar. */
  width:2.75rem; height:2.75rem; padding:0; background:#fff;
  border:1px solid var(--borde); border-radius:50%;
  font-size:0; color:var(--pizarra);
  text-decoration:none; box-shadow:0 1px 2px rgba(34,40,47,.05);
  transition:border-color .15s, color .15s, transform .15s;
}
/* La flecha la dibuja el CSS y no el carácter «←»: así tiene el grosor y el
   color del texto en todas las pantallas, y no depende de que la tipografía
   del teléfono traiga ese símbolo. Las medidas van en `rem` y no en `em`
   porque el enlace tiene el tamaño de letra en cero: en `em` la flecha
   mediría cero y no se vería nada. */
.volver a::before{
  content:""; width:.5rem; height:.5rem; margin-left:.18rem;
  border-left:2px solid currentColor; border-bottom:2px solid currentColor;
  border-radius:1px; transform:rotate(45deg);
}
.volver a:hover{border-color:var(--naranja); color:var(--naranja-osc);
                transform:translateX(-2px)}
.volver a:focus-visible{outline:2px solid var(--naranja); outline-offset:2px}
/* La que pone el layout no lleva nada propio: va metida dentro del
   contenedor de la pantalla, así que hereda su ancho y su centrado. */
.volver.puesta{margin:0 0 .9rem}

.centro{max-width:26rem; margin:3.5rem auto; padding:0 1.25rem}
.centro form > .btn{margin-top:1.5rem}
.panel{
  background:#fff; border:1px solid var(--borde); border-radius:10px;
  padding:2rem 1.75rem; box-shadow:0 1px 3px rgba(34,40,47,.06);
}
.marca{text-align:center; margin-bottom:1.75rem}
.marca img{max-width:190px; height:auto}
.marca .sistema{margin:.6rem 0 0; color:var(--pizarra); font-size:.72rem}
.marca .sistema b{
  display:block; font-size:1.1rem; font-weight:700; letter-spacing:.14em;
  margin-bottom:.1rem;
}
.marca .sistema span{opacity:.7}
h1{font-size:1.2rem; margin:0 0 1.25rem; color:var(--pizarra)}

label{display:block; font-size:.85rem; font-weight:600; margin:1rem 0 .35rem; color:var(--pizarra)}
/* TODOS LOS TIPOS QUE SE ESCRIBEN, NO TRES.
   Esta regla nombraba solo email, password y text, así que un `number`, un
   `date` o un `tel` salían sin ancho y sin borde: al lado de un `select` al
   100% se veían como otra cosa, y en el registro del arma la casilla de
   capacidad cambiaba de tamaño según la clase, porque unas veces era lista y
   otras número.
   El selector se escribe por exclusión —todo input que no sea de los que se
   dibujan solos— para que el próximo tipo que se use quede bien sin que nadie
   se acuerde de volver aquí. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=hidden]),
textarea{
  width:100%; padding:.65rem .75rem; font-size:1rem;
  border:1px solid var(--borde); border-radius:6px; background:#fff; color:var(--texto);
  font-family:inherit;
}
/* Que la flechita del calendario y la de los números no encojan la caja. */
input[type=date],input[type=number]{min-height:2.9rem}
input:focus{outline:2px solid var(--naranja); outline-offset:1px; border-color:var(--naranja)}

/* LAS LISTAS, IGUALES A LAS CAJAS DE ESCRIBIR.
   Hasta el 2026-09-22 un `select` no tenía ninguna regla: se dibujaba como lo
   dibuja el navegador —más bajo, con otra letra y encogido a lo que mide la
   opción más larga—, así que al lado de un campo de texto parecía otra cosa.
   Se veía en los avalúos de En Casa, en el evento de Parabellum y en la puerta
   de Administración: «Tipo de documento» o «Qué es» quedaban de la mitad de
   alto y de un cuarto del ancho de la casilla de al lado.

   LA FLECHA SE DEJA LA DEL SISTEMA, A PROPÓSITO.
   Dibujarla aquí obligaría a `appearance:none` y a ponerla como imagen de
   fondo, y sesenta y ocho reglas de las vistas escriben `background` en sus
   propios `select`: cada una de ellas borraría esa imagen y dejaría una lista
   sin flecha, que ya no se distingue de una casilla de escribir. Con la del
   navegador no hay nada que borrar.

   El `padding` derecho le deja sitio a esa flecha: sin él, la opción más larga
   se le mete debajo. */
select{
  width:100%; padding:.6rem 2rem .6rem .75rem; font-size:1rem;
  border:1px solid var(--borde); border-radius:6px; background-color:#fff;
  color:var(--texto); font-family:inherit; min-height:2.9rem; line-height:1.3;
}
/* EN UNA BARRA DE FILTROS Y EN UNA CABECERA, A SU ANCHO.
   Ahí la lista convive en una fila con un buscador y unos botones, y esas
   filas son `flex` con `wrap`: una lista de ancho completo no cabe al lado de
   nada y se lleva un renglón entera para ella sola. Las casillas de escribir
   de esas mismas barras se libran porque sus vistas les ponen `flex`; las
   listas no lo llevaban porque hasta ahora no medían nada. */
.filtros select, .cab select, .subnav select{width:auto; min-width:9rem}

select:focus{outline:2px solid var(--naranja); outline-offset:1px; border-color:var(--naranja)}
select:disabled{background-color:var(--papel); color:var(--tenue); cursor:not-allowed}
/* Una lista de varias filas no despliega nada, así que no necesita ese sitio. */
select[multiple],select[size]:not([size="1"]){padding-right:.75rem; height:auto}

/* LA CASILLA CON SUGERENCIAS (el barrio de En Casa).
   `app.js` le quita el `datalist` y dibuja la lista aquí, del ancho de la
   casilla y con la letra de la aplicación: la del navegador salía angosta, con
   otra letra y un triángulo negro. La flecha imita la de las listas; fuera de
   Ibagué la casilla es de escribir y la flecha se va. */
.lista-propia{position:relative}
.lista-propia > input{padding-right:2.25rem}
.lista-propia > .flecha{
  position:absolute; right:.95rem; top:50%; width:.42rem; height:.42rem;
  border-right:1.5px solid var(--texto); border-bottom:1.5px solid var(--texto);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.lista-propia > input[data-lista-apagada]{padding-right:.75rem}
.lista-propia > input[data-lista-apagada] + .flecha{display:none}
.lista-propia > ul{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30;
  margin:0; padding:.25rem 0; list-style:none; max-height:16rem; overflow-y:auto;
  background:#fff; border:1px solid var(--borde); border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.lista-propia li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.55rem .75rem; font-size:.95rem; color:var(--texto); cursor:pointer;
}
.lista-propia li small{font-size:.78rem; color:var(--tenue); white-space:nowrap}
.lista-propia li:hover,.lista-propia li.activa{background:var(--papel)}
.lista-propia li.activa{box-shadow:inset 3px 0 0 var(--naranja)}

/* Un `<button>` sin clase no tiene aspecto: solo hereda la letra. Hasta el
   2026-09-18 era naranja y de ancho completo, y eso lo aprovechaban sin querer
   las piezas propias —el «Mostrar» de la clave de SIAEM heredaba el ancho
   completo y le quitaba el sitio al campo—. Ahora un botón que se olvide de
   `.btn` se ve sin estilo en la pantalla, y el barrido lo caza. */
button{font:inherit; color:inherit; cursor:pointer}

.aviso{padding:.7rem .85rem; border-radius:6px; font-size:.9rem; margin-bottom:1rem}
.aviso.error{background:#FCEBEA; color:var(--error); border:1px solid #F3C9C6}
.aviso.ok{background:#E9F5F0; color:var(--ok); border:1px solid #C3E3D6}

.aviso:empty{display:none}
.detalle{background:var(--papel); border:1px solid var(--borde); border-radius:6px;
         padding:.9rem 1rem; font-size:.9rem; color:var(--tenue)}
.detalle p{margin:0 0 .35rem} .detalle p:last-child{margin:0}
.detalle strong{color:var(--texto)}

.pie{margin-top:1.25rem; text-align:center; font-size:.85rem}
.pie a{color:var(--pizarra-cla)}
/* El enlace a la SIC, al pie de todas las pantallas (lo pone el layout). */
.pie-sic{margin:2.5rem 0 0; padding:0 1rem 1.5rem; text-align:center; font-size:.75rem}
.pie-sic a{display:inline-block; color:var(--tenue); font-weight:700; text-decoration:none}
.pie-sic a + a::before{content:"–"; display:inline-block; margin:0 .55rem; font-weight:400; text-decoration:none}
.pie-sic a:hover,.pie-sic a:focus{text-decoration:underline}
@media print{ .pie-sic{display:none} }
/* LA NOTA DE AYUDA VA A LA IZQUIERDA, COMO EL RESTO DEL TEXTO
   (decisión suya del 2026-10-08, viendo la muestra). Nació centrada porque
   era de la pantalla de ingreso; después se usó en unas veinte pantallas
   más —«No hay pautas vigentes en este mes.»— y ahí quedaba suelta en la
   mitad. Centrada sigue solo en las pantallas de un recuadro centrado:
   ingreso, recuperación, resultado del pago. */
.nota{margin-top:2rem; text-align:left; font-size:.75rem; color:var(--tenue)}
main.centro .nota{text-align:center}

/* Trece rem daban cuatro columnas de 218 píxeles, y en ellas «Club de tiro y
   trámites de armas» se partía en tres renglones. Con diecisiete caben tres
   tarjetas y la descripción entra en dos. */
.modulos{display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
         max-width:62rem; margin:2rem auto 2.5rem; padding:0 1.25rem}
.modulo{
  background:#fff; border:1px solid var(--borde); border-left:5px solid var(--pizarra);
  border-radius:8px; padding:1.15rem; text-decoration:none; color:var(--texto);
  display:flex; align-items:center; gap:.9rem;
}
.modulo:hover{border-color:var(--naranja); border-left-color:var(--naranja)}
/* Caja fija y `contain`: los logos vienen con proporciones distintas y sin
   esto cada tarjeta quedaría de un alto diferente. */
/* El logo, dentro de la caja del color de la línea. Caja fija y `contain`:
   los logos vienen con proporciones distintas y sin esto cada tarjeta
   quedaría de un alto diferente. */
.modulo img{flex:0 0 auto; width:38px; height:38px; object-fit:contain}
.modulo .texto{min-width:0}
.modulo strong{display:block; color:var(--pizarra)}
.modulo span{font-size:.82rem; color:var(--tenue)}

/* ── El visor de PDF ─────────────────────────────────────────────────────
   Compartido por las tres pantallas que muestran un documento: el visor
   de archivos, el lector de contratos y el paso de consentimiento del
   registro. Una hoja por lienzo, dibujadas por /assets/js/visor-pdf.js. */
.pdf-hojas{
  background:var(--pizarra-osc); border:1px solid var(--borde);
  border-radius:8px; padding:.75rem; min-height:12rem;
}
/* Fondo blanco propio: un PDF con transparencias sobre el gris oscuro de
   la caja se volvería ilegible. */
.pdf-hoja{
  display:block; width:100%; height:auto; background:#fff;
  border-radius:3px; box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.pdf-hoja + .pdf-hoja{margin-top:.75rem}
.pdf-cargando, .pdf-error{
  margin:0; padding:3rem 1rem; text-align:center;
  font-size:.88rem; color:#C6CCD6;
}
.pdf-error{color:#F0B3AF}

/* El botón mientras se envía el formulario. Sigue siendo un botón —no se
   deshabilita, porque uno deshabilitado no manda su nombre ni su valor—
   pero deja de aceptar toques y se ve apagado. */
button.enviando{opacity:.65; pointer-events:none; cursor:default}

.campana.hay{font-weight:700}
.campana b{display:inline-block; margin-left:.25rem; padding:0 .3rem; min-width:1.1rem;
           text-align:center; background:var(--naranja); color:#fff; border-radius:9px;
           font-size:.72rem; line-height:1.1rem; vertical-align:middle}
/* ── La explicación que no estorba ────────────────────────────────────────
   Un signo de interrogación al lado del título, y la explicación aparece
   solo si alguien la pide.

   Es `<details>` y no JavaScript: la CSP no admite guion en línea, y esto
   además funciona sin JavaScript, se abre con el teclado y lo anuncian los
   lectores de pantalla. No se usa `title`, que en una pantalla táctil no
   se ve nunca — la lección de los tres botones del inventario.

   El panel se ancla al ancho de `.con-q`, que es el título entero, y no al
   del signo. Anclado al signo habría que colocarlo a mano en cada pantalla
   y en un teléfono se saldría por la derecha. */
.con-q{position:relative}

/* Va al FINAL del título y levantado, como la llamada de una nota al pie:
   se lee el título entero y el signo queda como lo que es, un añadido.

   `vertical-align` y no `position:relative`, que parece lo natural: el
   panel se ancla al primer ascendiente posicionado, y ese tiene que
   seguir siendo `.con-q` —el título entero— para ocupar su ancho. Con
   `position` aquí, el panel se encogería al tamaño del signo. */
details.q{display:inline-block; vertical-align:super; margin-left:.25rem}

details.q>summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  width:1.05rem; height:1.05rem; border-radius:50%;
  border:1px solid var(--borde); background:#fff; color:var(--tenue);
  font:700 .74rem/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  text-transform:none; letter-spacing:0; -webkit-user-select:none; user-select:none;
}
/* El triangulito por defecto sobra, y cada navegador lo pinta a su manera. */
details.q>summary::-webkit-details-marker{display:none}
details.q>summary::marker{content:""}
details.q>summary:hover{border-color:var(--naranja); color:var(--naranja)}
details.q[open]>summary{background:var(--pizarra); border-color:var(--pizarra); color:#fff}

.q-texto{
  position:absolute; left:0; right:0; top:calc(100% + .4rem); z-index:20;
  padding:.8rem .95rem; background:#fff;
  border:1px solid var(--borde); border-left:3px solid var(--naranja);
  border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.10);
  /* Hereda del título, que suele ir en negrita y más grande. */
  font:400 .85rem/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--texto); text-align:left; text-transform:none; letter-spacing:0;
}
/* El contenido se reparte en columnas y no se apila: una explicación de
   tres párrafos crecía hacia abajo hasta tapar media pantalla. Con
   `columns` el navegador hace tantas como quepan de ese ancho mínimo, y
   en un teléfono se queda en una sola sin ninguna regla aparte. */
.q-texto{columns:15rem; column-gap:1.2rem}
.q-texto p{margin:0 0 .6rem}
.q-texto p:last-child{margin-bottom:0}

/* En papel no hay dónde pulsar: o sale todo o no sale. Sale todo, porque
   quien imprime una pantalla lo hace para leerla despacio. */
@media print{
  details.q>summary{display:none}
  .q-texto{position:static; box-shadow:none; margin:.5rem 0 0}
}


/* ── Autorización de datos por enlace (migración 246) ───────────────────── */
.aut-estado{display:inline-block; font-size:.8rem; font-weight:600; padding:.12rem .5rem;
  border-radius:var(--r-chico); white-space:nowrap}
.aut-estado.ok{background:#E9F5F0; color:var(--ok); border:1px solid #C3E3D6}
.aut-estado.sin{background:#FDF0E8; color:var(--naranja-osc); border:1px solid #F6C9AE}
.aut-acciones{display:inline-flex; flex-wrap:wrap; gap:.35rem; align-items:center; margin-left:.35rem}
form.en-linea{display:inline; margin:0}
.aut-propietario{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:0 0 .8rem}
.aut-propietario .tenue{color:var(--tenue); font-size:.85rem}


/* =============================================================================
   LA APARIENCIA DE 2026-10

   Aprobada por él el 2026-10-05 sobre dos propuestas: la «más atrevida», con la
   barra oscura. No mueve nada de sitio ni cambia ninguna función: afina lo que
   comparten las pantallas —la barra, los botones, las casillas, los avisos— y
   entra a lo que cada una pinta por su cuenta con los mismos nombres: los
   recuadros (.bloque), las cifras, las tablas y las etiquetas de estado.

   CÓMO LE GANA A LA REGLA DE CADA VISTA, Y HASTA DÓNDE

     El `<style>` de una vista va después de esta hoja y casi siempre pesa más
     (`.ase .bloque`). Para no tocar 245 archivos, lo que aquí debe ganar lleva
     `:not(#_)`, que pesa más que cualquier clase y no excluye nada.

     Se usa SOLO para lo que no puede dañar una pantalla: esquinas, sombras y
     adornos. Los fondos, los colores de letra y los colores de borde van sin
     él: si una vista pinta el encabezado de su tabla de oscuro o marca una
     casilla en rojo, esa decisión sigue mandando.

     Todo va dentro de `@media screen`: lo que se imprime —contratos, fichas,
     liquidaciones— sale como salía.
   ============================================================================= */

:root{
  --papel:#F2F4F8; --borde:#E3E7ED; --texto:#1C232B; --tenue:#667080;
  --r-chico:9px; --r:14px; --r-grande:18px;
  --sombra:0 1px 2px rgba(28,35,43,.04), 0 3px 10px rgba(28,35,43,.05);
  --sombra-alta:0 6px 14px rgba(28,35,43,.08), 0 18px 40px rgba(28,35,43,.10);
  --foco:0 0 0 3px rgba(243,118,57,.24);
}

@media screen{

body{
  background:
    radial-gradient(900px 340px at 0% -120px, rgba(243,118,57,.10), transparent 70%),
    radial-gradient(900px 360px at 100% -140px, rgba(63,73,89,.13), transparent 70%),
    var(--papel);
  background-repeat:no-repeat;
}
h1{font-size:1.45rem; line-height:1.2; font-weight:750; letter-spacing:-.015em; color:var(--pizarra-osc)}

/* ── La barra: oscura, como el logo ───────────────────────────────────────── */
.barra{
  background:linear-gradient(180deg, #46515F 0%, var(--pizarra) 55%, #394351 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 6px 18px rgba(28,35,43,.18);
  padding:.6rem 1rem; z-index:40;
}
.barra .logo img{height:34px}
.barra .menu{gap:.25rem}
.barra .menu a{
  padding:.42rem .85rem; font-size:.88rem; font-weight:500; opacity:.8;
  transition:background .15s, opacity .15s;
}
.barra .menu a:hover{background:rgba(255,255,255,.12)}
.barra .menu a.aqui{
  background:#fff; color:var(--pizarra-osc); opacity:1; font-weight:700;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.barra .avatar{
  width:34px; height:34px; font-size:.78rem;
  background:linear-gradient(135deg, #F7925C, var(--naranja-osc));
  box-shadow:0 0 0 2px rgba(255,255,255,.22);
}
.barra .salir{padding:.36rem .9rem; font-weight:600; transition:background .15s}
.campana b{box-shadow:0 0 0 2px var(--pizarra)}
/* Fija al bajar, pero solo donde sobra alto: en el teléfono ocupa dos filas y
   le quitaría a la pantalla más de lo que da. */
@media (min-width:48rem){
  .barra{position:sticky; top:0; padding:.65rem 1.75rem}
  html{scroll-padding-top:4.5rem}
}

/* ── Los botones ──────────────────────────────────────────────────────────── */
.btn{
  /* Más alto, no más ancho: el ancho de un botón es lo que empuja una fila en el teléfono. */
  padding:.72rem 1.1rem; border-radius:12px; font-weight:700;
  background:linear-gradient(180deg, #F98A53 0%, var(--naranja) 45%, #EC6627 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 1px 2px rgba(28,35,43,.12), 0 6px 14px rgba(243,118,57,.28);
  transition:filter .15s, box-shadow .15s, transform .08s, background .15s, border-color .15s, color .15s;
}
.btn:hover{
  background:linear-gradient(180deg, #F98A53 0%, var(--naranja) 45%, #EC6627 100%);
  filter:brightness(1.05); transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 2px 4px rgba(28,35,43,.12), 0 10px 22px rgba(243,118,57,.34);
}
.btn:active{transform:translateY(0) scale(.985); filter:brightness(.97)}
.btn:focus-visible{outline:none; box-shadow:var(--foco)}

.btn.secundario, .btn.secundario:hover{background:#fff; filter:none}
.btn.secundario{border-color:#D5DAE2; box-shadow:0 1px 2px rgba(28,35,43,.06)}
.btn.secundario:hover{border-color:var(--pizarra-cla); box-shadow:0 4px 12px rgba(28,35,43,.10)}

.btn.peligro, .btn.peligro:hover{filter:none}
.btn.peligro{background:#fff; box-shadow:0 1px 2px rgba(28,35,43,.06)}
.btn.peligro:hover{background:var(--error); box-shadow:0 6px 14px rgba(179,38,30,.28)}

.btn.oscuro, .btn.oscuro:hover{background:linear-gradient(180deg, #4C5869 0%, var(--pizarra) 50%, #343D4B 100%)}
.btn.oscuro{box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 1px 2px rgba(28,35,43,.16), 0 6px 14px rgba(43,51,64,.24)}
.btn.oscuro:hover{box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 2px 4px rgba(28,35,43,.16), 0 10px 22px rgba(43,51,64,.30)}

.btn.aprobar, .btn.aprobar:hover{background:linear-gradient(180deg, #2A8A67 0%, var(--ok) 55%, #17593F 100%)}
.btn.aprobar{box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 1px 2px rgba(28,35,43,.12), 0 6px 14px rgba(30,107,79,.26)}

/* El de una fila: un poco más alto, para que el dedo acierte. */
.btn.chico{padding:.46rem .7rem; font-size:.82rem; border-radius:9px}
.btn[disabled],.btn.apagado{box-shadow:none; transform:none; filter:none}

/* ── Las casillas ─────────────────────────────────────────────────────────── */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=hidden]),
textarea, select{
  border-color:#D5DAE2; background-color:#FBFCFD;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=hidden]):not(#_),
textarea:not(#_), select:not(#_){border-radius:11px}
input:not(#_):focus, textarea:not(#_):focus, select:not(#_):focus{
  outline:none; border-color:var(--naranja); box-shadow:var(--foco);
}
input:focus, textarea:focus, select:focus{background-color:#fff}
input::placeholder, textarea::placeholder{color:#9AA3AF}
input[type=checkbox], input[type=radio]{accent-color:var(--naranja)}
/* EL CAMPO DE ARCHIVO OCUPA SU RECUADRO, NO LO EMPUJA

   Una casilla de archivo trae un ancho propio —el botón más «Sin archivos
   seleccionados», unos 290 px— y `max-width:100%` no lo doma: dentro de una
   rejilla o de una fila flexible ese ancho es el mínimo de la columna, así
   que la columna crece y el campo se sale del recuadro. Pasaba con las dos
   caras de la cédula en la capacitación, en computador y en celular; él lo
   vio el 2026-10-07. Con `width:100%` el mínimo es cero y el texto que no
   quepa lo recorta el propio campo. */
input[type=file]{width:100%; max-width:100%; min-width:0; box-sizing:border-box}
/* Las dos caras de la cédula van lado a lado solo si a cada una le cabe el
   texto del campo entero (unos 292 px); si no, una debajo de la otra. En media
   columna el navegador lo recortaba: «Sin arch…ionados». */
.dos.cedula-archivos{grid-template-columns:repeat(auto-fit, minmax(min(18.5rem, 100%), 1fr))}
/* Y en cualquier otra rejilla de formulario, el campo de archivo toma el
   renglón entero: en media columna no le cabe su propio texto. */
:is(.dos, .tres, .fila):not(.cedula-archivos) > :is(label, div):has(> input[type=file]){grid-column:1 / -1}
/* EL BOTÓN EN SU RENGLÓN Y EL TEXTO DEBAJO (decisión suya del 2026-10-08)
   Uno al lado del otro piden unos 292 px, y en un teléfono hay 262: el
   navegador recortaba «Sin arch…ionados». Con el botón a todo el ancho y el
   texto en el renglón siguiente, cabe entero en cualquier pantalla. Sigue
   siendo el campo del navegador: no depende de ningún programa. */
input[type=file]{display:block; color:var(--tenue); font-size:.88rem}
input[type=file]::file-selector-button{
  display:block; width:100%; margin:0 0 .4rem; padding:.6rem .9rem; border:1px solid #D5DAE2; border-radius:10px;
  background:#fff; color:var(--pizarra); font:600 .9rem var(--letra); cursor:pointer;
  box-shadow:0 1px 2px rgba(28,35,43,.06); transition:border-color .15s, background .15s;
}
input[type=file]::file-selector-button:hover{background:#F4F6F9; border-color:var(--pizarra-cla)}

/* ── Los recuadros de cada pantalla ───────────────────────────────────────── */
.bloque:not(#_), .tarjeta:not(#_), .panel:not(#_){border-radius:var(--r-grande); box-shadow:var(--sombra)}
.panel:not(#_){box-shadow:var(--sombra-alta)}
a.bloque:not(#_):hover{box-shadow:var(--sombra-alta)}
/* La marca naranja junto al título de un recuadro. Va como fondo y no como
   una pieza aparte: así no cambia cómo se acomoda lo que el título lleve
   dentro (el signo de ayuda, una etiqueta). */
div.bloque:not(#_) > h2:first-child, section.bloque:not(#_) > h2:first-child, form.bloque:not(#_) > h2:first-child{
  padding-left:.75rem;
  background:linear-gradient(180deg, #F98A53, var(--naranja-osc)) left center / 4px 1.05em no-repeat;
}

/* ── Las cifras ───────────────────────────────────────────────────────────── */
/* Solo los recuadros. `.cifra` también es, en varias pantallas, un número
   suelto dentro de un renglón (un `p` o un `span`): con el borde y la sombra
   quedaba metido en una píldora con una media luna naranja encima del «$». */
div.cifra:not(#_){border-radius:var(--r); box-shadow:var(--sombra), inset 4px 0 0 var(--naranja)}

/* ── Las tablas de las pantallas ──────────────────────────────────────────── */
.tabla th, .bloque th, .wk th, .ase th{background:#F3F5F8}
.tabla tbody tr:hover td, .bloque tbody tr:hover td{background-color:#FAFBFD}

/* ── Las etiquetas de estado ──────────────────────────────────────────────── */
.chip:not(#_)::before{
  content:""; display:inline-block; width:.42rem; height:.42rem; margin-right:.38rem;
  border-radius:50%; background:currentColor; opacity:.75; vertical-align:.08em;
}

/* ── Avisos, el inicio y lo demás ─────────────────────────────────────────── */
.aviso:not(#_){border-radius:12px; border-left-width:4px}
.aviso{font-weight:600}
.detalle{border-radius:12px}

.modulo:not(#_){
  border-radius:var(--r-grande); border-left-width:1px; position:relative; overflow:hidden;
  box-shadow:var(--sombra); transition:box-shadow .16s, transform .16s;
}
.modulo{border-left-color:var(--borde)}
/* El color de la línea, en un filo arriba de su tarjeta. */
.modulo:not(#_)::before{content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--acento, var(--pizarra))}
.modulo:not(#_):hover{box-shadow:var(--sombra-alta); transform:translateY(-3px)}
.esperando ul:not(#_){border-radius:var(--r-grande)}

.volver a{box-shadow:var(--sombra)}
.volver a:hover{box-shadow:var(--sombra-alta)}
.q-texto{border-radius:12px; box-shadow:var(--sombra-alta)}
.lista-propia > ul{border-radius:12px; box-shadow:var(--sombra-alta)}

/* Quien pidió menos movimiento, sin movimiento. */
@media (prefers-reduced-motion: reduce){
  .btn, .modulo:not(#_), .volver a{transition:none}
  .btn:hover, .modulo:not(#_):hover{transform:none}
}

}

/* ── Ver u ocultar la contraseña (lo pone app.js; 2026-10-06) ───────────────
   El botón va dentro del campo, a la derecha. No es un `.btn`: es parte del
   campo, como la flecha de una lista. */
.campo-clave{position:relative; display:block}
.campo-clave input:not(#_){padding-right:5.2rem}
.ver-clave{
  position:absolute; top:50%; right:.4rem; transform:translateY(-50%);
  padding:.3rem .55rem; border:0; border-radius:6px; background:transparent;
  font:inherit; font-size:.8rem; font-weight:600; color:var(--pizarra-cla); cursor:pointer;
  min-height:2.25rem;   /* medía 29 px: con el dedo no se acertaba */
}
.ver-clave:hover,.ver-clave:focus-visible{background:var(--papel); color:var(--pizarra)}

/* =============================================================================
   EL PANEL DE ACCESOS DE UNA LÍNEA (2026-10-06)

   Lo que se hace desde la pantalla de entrada de una línea iba como una fila de
   botones sueltos, todos del mismo peso y sin orden: «como en el aire», dijo
   él. Ahora van en un solo panel, agrupados por lo que son, cada grupo con su
   rótulo y cada acceso como un renglón de menú.

     <nav class="accesos" aria-label="…">
       <div class="grupo"><h2>Atender</h2>
         <a href="…">Asesorías <b class="cuenta">3</b></a> …
       </div>
     </nav>
   ============================================================================= */
.accesos{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(13.5rem, 1fr));
  background:#fff; border:1px solid var(--borde); border-radius:var(--r);
  box-shadow:var(--sombra, 0 1px 2px rgba(28,35,43,.05)); margin:0 0 1.25rem; overflow:hidden;
}
.accesos .grupo{padding:.95rem 1.1rem 1rem; border-left:1px solid var(--borde); margin-left:-1px; border-top:1px solid var(--borde); margin-top:-1px}
.accesos .grupo h2{
  margin:0 0 .45rem; padding:0; border:0; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tenue);
}
.accesos .grupo a{
  display:flex; align-items:center; gap:.5rem; margin:0 -.55rem; padding:.5rem .55rem;
  border-radius:8px; color:var(--pizarra-osc, var(--pizarra)); font-size:.93rem; font-weight:600;
  text-decoration:none; line-height:1.25; transition:background .12s, color .12s;
}
.accesos .grupo a::after{content:"›"; margin-left:auto; color:#B9C0CB; font-weight:400; font-size:1.15rem; line-height:1; transition:transform .12s, color .12s}
.accesos .grupo a:hover, .accesos .grupo a:focus-visible{background:var(--papel); color:var(--naranja-osc, var(--pizarra)); outline:none}
.accesos .grupo a:hover::after{color:var(--naranja, var(--pizarra)); transform:translateX(2px)}
.accesos .cuenta{
  min-width:1.35rem; padding:.08rem .4rem; border-radius:99px; background:var(--naranja, #F37639); color:#fff;
  font-size:.72rem; font-weight:700; text-align:center; line-height:1.3;
}

/* El mismo panel cuando cada acceso lleva su explicación —la portada de
   Administración, la puerta de Parabellum—: sin grupos, un acceso por celda.

     <nav class="accesos descritos">
       <a href="…"><span class="txt"><strong>Socios <b class="cuenta">2</b></strong>
         <small>La lista, la ficha y el carnet.</small></span></a>
     </nav> */
.accesos.descritos{grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr))}
.accesos.descritos > a{
  display:flex; align-items:center; gap:.85rem; padding:.95rem 1.1rem; margin:-1px 0 0 -1px;
  border-left:1px solid var(--borde); border-top:1px solid var(--borde);
  text-decoration:none; color:var(--texto); transition:background .12s;
}
.accesos.descritos > a::after{content:"›"; margin-left:auto; color:#B9C0CB; font-size:1.25rem; line-height:1; transition:transform .12s, color .12s}
.accesos.descritos > a:hover, .accesos.descritos > a:focus-visible{background:var(--papel); outline:none}
.accesos.descritos > a:hover::after{color:var(--naranja, var(--pizarra)); transform:translateX(2px)}
.accesos.descritos .txt{display:block; min-width:0}
.accesos.descritos strong{display:flex; align-items:center; gap:.45rem; font-size:.96rem; color:var(--pizarra-osc, var(--pizarra)); line-height:1.3}
.accesos.descritos small{display:block; margin-top:.15rem; font-size:.82rem; line-height:1.5; color:var(--tenue)}
.accesos.descritos small.nota:not(#_){color:var(--naranja-osc, var(--pizarra)); font-weight:600; text-align:left; margin:.15rem 0 0; padding:0; background:none; border:0}
.accesos.descritos > a:hover strong{color:var(--naranja-osc, var(--pizarra))}
/* La caja del icono, como en la puerta de Parabellum (2026-10-10: todas las
   líneas con el mismo panel): del color de la línea muy rebajado. */
.accesos.descritos .ico-caja{
  flex:0 0 auto; display:grid; place-items:center; width:2.6rem; height:2.6rem;
  border-radius:var(--r-chico, 8px);
  background:var(--papel);
  background:color-mix(in srgb, var(--acento, var(--pizarra)) 10%, #fff);
  color:var(--acento, var(--pizarra));
}
.accesos.descritos .ico-caja .ico{width:1.35rem; height:1.35rem}
.accesos.descritos .ico-caja img{width:32px; height:32px; object-fit:contain}

/* =============================================================================
   EN EL CELULAR (auditoría del 2026-10-07, `scripts/auditar_movil.py`)

   Tres cosas que se miden en todas las pantallas a 360 píxeles de ancho:

   · Los campos, a 16 píxeles. Con menos, el iPhone acerca la pantalla al
     tocarlos y hay que alejarla a mano para seguir llenando el formulario.
   · Los botones chicos —los de un renglón: «Abrir», «Ver», «Descargar»—, un
     poco más altos: a 32 píxeles el dedo le atina al de al lado.
   · Nada de lo que va dentro de un recuadro empuja la pantalla de lado: lo que
     no cabe en un renglón, baja.

   Con `:not(#_)` porque cada vista trae sus propios estilos, que van después.
   ============================================================================= */
@media (max-width:48rem){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not(#_),
  select:not(#_), textarea:not(#_){font-size:16px}

  .btn.chico:not(#_){min-height:2.25rem}
  /* Botones que no llevan .btn y quedaban por debajo de lo que un dedo acierta. */
  .dccae button.enlace:not(#_), .siaem button.ver:not(#_), .barra-doc button.bajar:not(#_){min-height:2.25rem}

  /* `break-word`, no `anywhere`. Las dos parten una palabra que no cabe, pero
     `anywhere` además le dice al navegador que el contenido puede medir una
     letra de ancho: una columna vecina más larga dejaba la de al lado en 12 px y
     el nombre de un documento salía letra por letra, hacia abajo. Así estaba la
     lista de documentos del expediente de Litis, y como nada se desbordaba la
     medida decía que estaba bien (él lo reclamó el 2026-10-07). */
  .bloque:not(#_), .tarjeta:not(#_){overflow-wrap:break-word}
  /* Un botón no se parte en sílabas («Gu / ar / da / r»): baja de renglón entero. */
  .btn:not(#_), button:not(#_){overflow-wrap:normal; word-break:normal}

  /* LAS TABLAS DE CUATRO COLUMNAS O MÁS SE DESLIZAN DE LADO (2026-10-07)
     La regla de arriba evitó que las pantallas se salieran del teléfono, y de
     paso dejó partir cualquier palabra: una lista de cinco columnas cabía en
     360 px con «Impu / lso / Estel / ar» y campos de 58 px. Ya no se desbordaba,
     así que la medida decía que estaba bien. Una tabla ancha conserva ahora sus
     palabras enteras y sus campos de un ancho que se pueda usar, y se desliza
     dentro de su recuadro. «Precios» (`.tarifas`) y las que su vista apila
     (`.apila`) tienen su propio arreglo. */
  /* Toda tabla que no quepa se desliza dentro de su recuadro, en vez de sacar la
     pantalla del teléfono. La que no tiene encabezado —las de «rótulo: valor»—
     sigue ocupando todo el ancho. */
  table:not(.tarifas):not(.apila):not(#_){
      display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
      position:relative}   /* relative: lo que va posicionado dentro —los rótulos solo para lectores— se queda dentro */
  table:not(.tarifas):not(.apila):not(:has(> thead)):not(#_) > tbody{display:table; width:100%}
  /* Y en cualquier parte, lo que no cabe en su renglón —una dirección web, un correo— parte en vez de salirse. */
  body:not(#_){overflow-wrap:break-word}

  /* Las listas de documentos (`table.docs`: el expediente de Litis, la ficha del
     inmueble): cada documento es una ficha —el nombre, con quién está y lo que
     se puede hacer—, una cosa debajo de la otra. */
  table.docs:not(#_), table.docs:not(#_) > tbody{display:block; overflow:visible}
  table.docs:not(#_) tr{display:block; padding:.65rem 0; border-bottom:1px solid var(--borde)}
  table.docs:not(#_) tr:last-child{border-bottom:0}
  table.docs:not(#_) td{display:block; width:auto; border:0; padding:.15rem 0; text-align:left; white-space:normal}
  table.docs:not(#_) td form{justify-content:flex-start; flex-wrap:wrap}
  table:is(:has(tr > :nth-child(4)), :has(td :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea))):not(.tarifas):not(.apila):not(#_) :is(th, td){overflow-wrap:normal; word-break:normal; min-width:7.5rem}
  table:is(:has(tr > :nth-child(4)), :has(td :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea))):not(.tarifas):not(.apila):not(#_) :is(th, td):first-child{min-width:10rem}
  table:is(:has(tr > :nth-child(4)), :has(td :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea))):not(.tarifas):not(.apila):not(#_) :is(th, td):has(> input[type=checkbox]:only-child){min-width:0}
  table:is(:has(tr > :nth-child(4)), :has(td :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea))):not(.tarifas):not(.apila):not(#_) :is(th, td) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), textarea){min-width:12rem}
  table:is(:has(tr > :nth-child(4)), :has(td :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea))):not(.tarifas):not(.apila):not(#_) :is(th, td) select{min-width:15rem}
}