/* PRUEBA DE DISEÑO — diseno-ajustes.css. Usa los tokens de diseno.css.
   Ajustes: Mi cuenta, Credenciales, Sucursales, Recepción automática,
   Usuarios, Bitácora, Mis empresas y las dos de EleMa. Todo va con el
   prefijo .aj- para no pisar a nadie. */

/* ============================================================ v3 · fase 6 ==
   LA ESCALA DE LOS AJUSTES (frontend versión 3 · fase 6, Mario, 6/10/2026:
   «quiero q veas lo q vamos a hacer visualmente […] para q lo implementes de
   una vez»; láminas 08 a 11 y 13). Mi cuenta, Cómo se ve la factura,
   Sucursales, Usuarios, Hacienda y Recepción automática se arman
   con las mismas piezas (ajustes-piezas.js) y se miden con la escala de la v3
   (diseno.css): los espacios `--e-*`, los radios y las letras `--t-*`.

     .aj-pantalla   la pantalla: su cabecera y sus tarjetas
     .aj-titulo     el título de una tarjeta con su estado en UNA línea
     .aj-seccion    un bloque de un formulario largo
     .aj-guardar    la barra del guardar, al final de su tarjeta
     .aj-conexion   el estado de una conexión: qué está bien, qué falta, qué hacer
     .aj-paso       un paso numerado

   Lo de adentro va CENTRADO (regla de la casa); la cabecera de la tarjeta
   lleva el título a la izquierda y la acción en la esquina, como el Inicio.
   ======================================================================== */
.aj-pantalla { display: grid; gap: var(--e-4); align-content: start; min-width: 0; }
.aj-pantalla > .dn-cabecera { margin-bottom: 0; align-items: center; }
.aj-pantalla > .dn-cabecera > div:first-child { min-width: 0; max-width: 78ch; }
/* La línea de la pantalla se parte pareja: no deja una palabra sola abajo. */
.aj-pantalla > .dn-cabecera p, .dn-cabecera.aj-de-app p { text-wrap: balance; }
/* La cabecera que pone app.js a la pantalla que no trae la suya (la bitácora). */
.dn-cabecera.aj-de-app { align-items: center; margin-bottom: var(--e-4); }
.aj-pantalla.pila, .aj-pantalla .aj-tarjetas { gap: var(--e-4); }
.aj-pantalla .tarjeta { min-width: 0; }
/* LO DE ADENTRO, CENTRADO (regla de la casa; Mario, 19/9/2026: «Todo debe ir
   así ya te lo he dicho mil veces»): los textos, las notas y los botones de
   cada tarjeta. Un párrafo largo no pasa del ancho que se lee de corrido. */
.aj-pantalla .cuerpo { padding: var(--e-4); text-align: center; }
.aj-pantalla .cuerpo p { max-width: 82ch; margin-inline: auto; text-wrap: balance; }
.aj-pantalla .cuerpo .buscar-en-lista { display: block; width: min(100%, 420px); margin-inline: auto; text-align: center; }
.aj-pantalla .cuerpo .acciones,
.aj-pantalla .cuerpo .dn-mes { justify-content: center; }
.aj-pantalla .cuerpo progress { display: block; margin-inline: auto; }
.aj-pantalla .cuerpo .encasillado { justify-content: center; }
/* Los títulos de adentro: centrados, con una rayita que los separa de lo de
   arriba; sin la barrita verde, que era de los títulos a la izquierda. */
.aj-pantalla .tarjeta .cuerpo h3 {
  margin: var(--e-4) 0 var(--e-2);
  padding: var(--e-3) 0 0;
  border-top: 1px solid var(--borde);
  font: 650 var(--t-titulo)/1.3 var(--fuente-titulo);
  text-align: center;
}
.aj-pantalla .tarjeta .cuerpo h3::before { content: none; }
.aj-pantalla .tarjeta .cuerpo h3:first-child,
.aj-pantalla .tarjeta .cuerpo .cabecera-plana h3,
.aj-pantalla .tarjeta .cuerpo .seccion-pago > h3 { margin: 0; padding: 0; border-top: 0; }
.aj-pantalla .tarjeta .cuerpo .cabecera-plana h3 { text-align: left; }
.aj-pantalla .cuerpo h4 { margin: var(--e-3) 0 var(--e-1); font: 650 14px/1.3 var(--fuente-titulo); text-align: center; }

/* La cabecera de cada tarjeta, pareja: medía hasta 95 px, porque el <h2>
   traía los márgenes de fábrica del navegador. */
.aj-pantalla .tarjeta > .cabecera-doc {
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
  padding: var(--e-3) var(--e-4);
}
.aj-pantalla .tarjeta > .cabecera-doc h2 {
  margin: 0;
  font: 650 var(--t-titulo)/1.3 var(--fuente-titulo);
  color: var(--texto);
}
.aj-pantalla .tarjeta > .cabecera-doc h2::before { display: none; }
.aj-pantalla .tarjeta > .cabecera-doc > div { min-width: 0; }
/* TODAS LAS CABECERAS MIDEN LO MISMO (revisión del 7/10/2026): la tarjeta que
   no tiene un estado cierto que decir no inventa uno, pero su título ocupa el
   alto de las que sí —el título, el hueco y la línea del estado— y va al
   centro de ese alto. Medían 45 px unas y 65 las otras. */
.aj-titulo {
  display: grid;
  gap: 2px;
  align-content: center;
  min-height: calc(1.3 * var(--t-titulo) + 2px + 1.5 * var(--t-nota));
}
/* El estado: un punto del color de su tono y la frase. Sin frase no ocupa
   sitio. El punto va EN el renglón (no al lado de la caja): cuando la frase se
   parte en dos, se queda con la primera línea en vez de colgar en el medio. */
.aj-estado {
  margin: 0;
  font-size: var(--t-nota);
  line-height: 1.5;
  font-weight: 600;
  color: var(--tenue);
  overflow-wrap: anywhere;
}
.aj-estado[hidden] { display: none; }
.aj-estado::before { content: ""; display: inline-block; margin-right: 6px; vertical-align: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--borde-fuerte); }
.aj-estado.ok::before { background: var(--verde); }
/* `.aviso` es también el globito de avisos de estilo.css: que no lo vista. */
.aj-estado.aviso { color: var(--ambar); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; min-width: 0; max-width: none; }
.aj-estado.aviso::before { background: var(--ambar); }
.aj-estado.malo { color: var(--rojo); }
.aj-estado.malo::before { background: var(--rojo); }
/* La tarjeta cuyo título ya lo dice la pantalla va sin cabecera. */
.aj-titulo-arriba > .cabecera-doc { display: none; }

/* El pie de una tarjeta: sus botones al centro, y con las esquinas de la
   tarjeta (se le asomaba una raya recta por debajo). */
.aj-pantalla .pie-tarjeta {
  justify-content: center;
  padding: var(--e-3) var(--e-4);
  border-radius: 0 0 calc(var(--radio-grande) - 1px) calc(var(--radio-grande) - 1px);
}

/* Mientras llega lo de una tarjeta: los huesos, sin caja dentro de la caja. */
.aj-pantalla .cuerpo .dn-huesos .dn-hueso-caja { border: 0; padding: 0; }

/* ------------------------------------------- un bloque del formulario -- */
.aj-seccion {
  display: grid;
  gap: var(--e-3);
  min-width: 0;
  padding: var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--papel);
}
/* En un cuerpo que no reparte huecos (no es `.pila`), el de la escala. */
.cuerpo:not(.pila) > .aj-seccion + .aj-seccion { margin-top: var(--e-3); }
/* Su título, centrado como lo de adentro: sin la raya ni la barrita de las
   secciones de antes (`.tarjeta .cuerpo h3`, estilo.css). */
.tarjeta .cuerpo .aj-seccion > h3,
.aj-seccion > h4 {
  margin: 0;
  padding: 0 0 var(--e-2);
  border-top: 0;
  border-bottom: 1px solid var(--borde);
  font: 650 var(--t-titulo)/1.3 var(--fuente-titulo);
  color: var(--texto);
  text-align: center;
}
.tarjeta .cuerpo .aj-seccion > h3::before { content: none; }
.aj-seccion > p, .aj-seccion > .nota { margin-block: 0; text-align: center; }
.aj-seccion > .acciones { justify-content: center; }
.aj-dos-bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--e-3); align-items: start; margin-top: var(--e-3); }
.aj-renglon { justify-content: center; align-items: center; text-align: center; padding: var(--e-2); border-radius: var(--radio-control); }
.aj-renglon.aj-este { background: var(--azul-suave); font-weight: 600; }
/* Lo que cierra todo de un golpe, aparte de lo que se toca todos los días. */
.aj-aparte { justify-content: center; margin-top: var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--borde); }

/* ------------------------------------------------ la barra del guardar -- */
/* EN SU LUGAR, AL FINAL DE LA TARJETA (Mario, 8/10/2026, con captura: «esos
   guardar […] mira como se ven, flotando ahí por toda la pantalla tapando
   todo»). La v3 la traía pegada al borde de abajo de la ventana mientras se
   recorría el formulario: en una ventana bajita era una franja blanca encima
   de los campos, y con dos tarjetas, dos franjas. Ya no se pega. Va de borde a
   borde de la tarjeta (los márgenes negativos son el relleno del cuerpo) y con
   los botones al centro. */
.aj-guardar {
  justify-content: center;
  align-items: center;
  margin: var(--e-4) calc(-1 * var(--e-4)) calc(-1 * var(--e-4));
  padding: var(--e-3) var(--e-4);
  background: var(--papel);
  border-top: 1px solid var(--borde);
  border-radius: 0 0 calc(var(--radio-grande) - 1px) calc(var(--radio-grande) - 1px);
}
/* La que no cierra la tarjeta (debajo siguen los medios de pago). */
.aj-guardar:not(:last-child) { margin-bottom: var(--e-2); border-bottom: 1px solid var(--borde); border-radius: 0; }

/* -------------------------------------------- el estado de una conexión -- */
.aj-conexion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-3) var(--e-5);
  padding: var(--e-4);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-grande);
  background: var(--papel-2);
  text-align: center;
}
.aj-conexion.ok { border-color: var(--verde); background: var(--verde-suave); }
/* `.aviso` es también el globito de avisos de estilo.css, y vestía este cuadro
   con lo suyo: la sombra de lo que flota y la letra de 13 px; y `.aviso ul` le
   ponía a los puntos sangría, margen, gris y letra de 12 px, que los
   descentraban. Es el estado que ve TODA empresa nueva (revisión del
   7/10/2026): en ámbar tiene que ser el mismo cuadro que en verde. */
.aj-conexion.aviso { border-color: var(--ambar); background: var(--ambar-suave); box-shadow: none; font-size: inherit; }
.aj-conexion .aj-conexion-puntos { margin: 0; padding: 0; color: inherit; font-size: inherit; }
.aj-conexion.malo { border-color: var(--rojo); background: var(--rojo-suave); }
.aj-conexion-texto { display: grid; gap: var(--e-2); justify-items: center; min-width: 0; }
.aj-conexion-titulo { font: 650 16px/1.3 var(--fuente-titulo); color: var(--texto); }
.aj-conexion-puntos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2) var(--e-4); }
.aj-conexion-puntos li { display: inline-flex; align-items: center; gap: 6px; text-align: left; }
.aj-conexion-marca { flex: none; padding: 1px var(--e-2); border-radius: 999px; font-size: 12px; font-weight: 650; }
.aj-conexion-puntos li.ok .aj-conexion-marca { background: var(--verde); color: var(--sobre-verde); }
.aj-conexion-puntos li.falta .aj-conexion-marca { background: var(--ambar); color: var(--papel); }
/* «Sin probar»: ni listo ni faltando. */
.aj-conexion-puntos li.pendiente .aj-conexion-marca { background: var(--gris-suave); color: var(--texto); box-shadow: inset 0 0 0 1px var(--borde-fuerte); }
.aj-conexion-quehacer { margin: 0; max-width: 64ch; font-weight: 600; color: var(--texto); text-wrap: balance; }
.aj-conexion p { margin-block: 0; }

/* ------------------------------------------------------ un paso numerado -- */
.aj-paso-numero {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--azul);
  color: var(--sobre-azul-icono);
  font: 650 13px/1 var(--fuente-titulo);
  font-variant-numeric: tabular-nums;
}
section.aj-paso {
  display: grid;
  gap: var(--e-3);
  min-width: 0;
  padding: var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--papel);
}
.aj-paso-cabeza { display: flex; align-items: center; justify-content: center; gap: var(--e-2); }
.tarjeta .cuerpo .aj-paso-cabeza h3 { margin: 0; padding: 0; border-top: 0; font: 650 var(--t-titulo)/1.3 var(--fuente-titulo); }
.tarjeta .cuerpo .aj-paso-cabeza h3::before { content: none; }
section.aj-paso > p, section.aj-paso > .nota { margin-block: 0; text-align: center; }

/* ------------------------------------------------ Mi cuenta: índice -- */
.aj-con-indice {
  grid-template-columns: 230px minmax(0, 1fr);
  align-items: start;
}
.aj-con-indice > .dn-cabecera { grid-column: 1 / -1; }
.aj-con-indice > .pila { min-width: 0; }
.aj-con-indice .tarjeta[id] { scroll-margin-top: var(--e-3); }

.aj-indice {
  position: sticky;
  top: 0;
  display: grid;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-2);
  background: var(--papel);
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-chica);
}
/* El desplegable «Ir a…» es del teléfono (ver abajo). */
.aj-ir-a { display: none; }
.aj-indice-grupo { display: grid; gap: 2px; }
.aj-indice-titulo {
  margin: 0 0 4px;
  padding-inline: 10px;
  font: 650 11.5px/1.3 var(--fuente-titulo);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tenue);
}
.boton.aj-ir {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--texto);
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: none;
  white-space: normal;
  line-height: 1.3;
}
.boton.aj-ir:hover:not(:disabled) { background: var(--papel-2); border: 0; }
.boton.aj-ir.activo {
  background: var(--azul-suave);
  color: var(--azul);
  font-weight: 650;
  box-shadow: inset 3px 0 0 var(--azul);
}

/* EN ANGOSTO, UN DESPLEGABLE «IR A…» PEGADO ARRIBA (v3 · fase 6, 6/10/2026).
   El índice era ahí una tira que se corría de lado, y en el teléfono nada
   corre de lado. Son los mismos destinos (cuenta.js). */
@media (max-width: 900px) {
  .aj-con-indice { grid-template-columns: minmax(0, 1fr); }
  .aj-indice { display: none; }
  .aj-ir-a {
    display: block;
    position: sticky;
    top: 0;
    z-index: 3;
    width: 100%;
    min-height: 44px;
    font-weight: 650;
    text-align: center;
    text-align-last: center;
    box-shadow: var(--sombra-media);
  }
}

/* --------------------------------------------- Suscripción: el cupo -- */
.aj-cupo {
  height: 10px;
  border-radius: 999px;
  background: var(--gris-suave);
  overflow: hidden;
  margin: 4px 0 2px;
}
.aj-cupo > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--verde);
  transition: width .3s ease;
}
.aj-cupo.aviso > span { background: var(--ambar); }
.aj-cupo.malo > span { background: var(--rojo); }
@media (prefers-reduced-motion: reduce) { .aj-cupo > span { transition: none; } }

.aj-planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.aj-planes > .plan-a-escoger {
  margin: 0;
  border-radius: var(--radio-grande);
  display: grid;
  align-content: start;
  gap: 6px;
}
/* LO BÁSICO, CENTRADO Y CON COLOR (Mario, 17/10/2026: «q tenga colores q sea
   más vivo y plan recargas y plan contadores centrado, con el cambiarme a este
   debajo»). El verde de la marca arriba y en el precio; el botón al pie, del
   mismo ancho en todas, para que las tarjetas midan lo mismo. */
.aj-planes > .plan-a-escoger.plan-corto {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-top: 5px solid var(--acento);
  /* El color de abajo es el relleno de verdad (lo que mide la prueba en Edge); el degradado va encima. */
  background: var(--papel-2) linear-gradient(180deg, var(--acento-suave), var(--papel-2) 70%);
  padding: var(--e-4);
  gap: var(--e-2);
}
.plan-corto .plan-corto-nombre { font: 700 17px var(--fuente-titulo); }
.plan-corto .precio-plan {
  margin: 0;
  font: 700 var(--t-cifra, 22px) var(--fuente-titulo);
  font-variant-numeric: tabular-nums;
  color: var(--acento);
}
.plan-corto .nota { margin: 0; text-wrap: pretty; }
/* El botón al pie: `margin-top: auto` lo baja aunque la tarjeta traiga la pastilla de «Recomendado». */
.plan-corto > button { align-self: stretch; margin-top: auto; }
.plan-corto > .nota:last-of-type { margin-bottom: var(--e-2); }
/* «Cambiar de plan», plegado: el resumen se aprieta como un botón. */
.aj-cambio-de-plan { margin-top: var(--e-3); }
.aj-cambio-de-plan > summary {
  cursor: pointer;
  list-style: none;
  text-align: center;
  font: 650 16px var(--fuente-titulo);
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--borde);
  border-radius: 999px;
  width: fit-content;
  margin: 0 auto;
  color: var(--acento);
  background: var(--papel);
}
.aj-cambio-de-plan > summary::-webkit-details-marker { display: none; }
/* La flechita es adorno: el lector de pantalla ya dice si está abierto. */
.aj-cambio-de-plan > summary::after { content: ' ▾'; content: ' ▾' / ''; }
.aj-cambio-de-plan[open] > summary::after { content: ' ▴'; content: ' ▴' / ''; }
.aj-cambio-de-plan > summary:hover { border-color: var(--acento); }
.aj-cambio-de-plan > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.aj-cambio-de-plan[open] > summary { margin-bottom: var(--e-3); }

/* ------------------------------------------ Credenciales de Hacienda -- */
/* UNA DEBAJO DE LA OTRA (Mario, 22/9/2026: «las credenciales de hacienda
   podemos hacerlo como una debajo de la otra para que se vean más limpias»).
   Eran dos columnas de 320 px mínimo, y la del usuario quedaba más baja que
   la de la llave con un hueco debajo. Apiladas, cada una ocupa lo suyo. */
.aj-credenciales {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.aj-credenciales > .tarjeta-plana {
  margin: 0;
  border-radius: var(--radio-grande);
  background: var(--papel);
  box-shadow: var(--sombra-chica);
}
.aj-credenciales .pastilla { vertical-align: 1px; }

/* ------------------------------------- Cuentas bancarias como tarjetas -- */
.tarjeta-plana.cuenta-banco {
  border-radius: var(--radio-grande);
  background: var(--papel);
  box-shadow: var(--sombra-chica);
  border-left: 4px solid var(--azul);
  /* De qué ancho hablan las consultas de abajo: el de la tarjeta, no el de la ventana. */
  container-type: inline-size;
}
.cuenta-banco .banco-y-logo img { height: 28px; max-width: 90px; }

/* EL NOMBRE DEL BANCO CABE ENTERO (Mario, 1/10/2026: el desplegable «está muy
   pequeño, no caben bien algunos»). Medido en Edge, con 1024 px de ventana
   «Banco de Costa Rica» se veía «Bar»: el desplegable se llevaba lo que sobraba
   de la columna después del logo, y a veces no sobraba nada.
   Ahora mide lo que ocupa el banco con el nombre MÁS LARGO de la lista:
   cuenta.js dice cuántas letras tiene (`--banco-largo`) y acá se vuelve ancho
   (poco más de media letra por cada una, que es lo que ocupa un nombre en
   español), más la flechita y el relleno del desplegable. El buscador de arriba
   mide lo mismo y quedan alineados. Nunca más que el renglón (`max-width`): en
   un teléfono de 320 px el logo baja debajo del desplegable en vez de
   empujarlo fuera de la tarjeta. */
/* El bloque del banco (buscador, desplegable con su logo y el nombre a mano)
   es de lo que ocupa su contenido y va centrado bajo su rótulo; adentro, el
   buscador y el desplegable arrancan alineados. */
.cuenta-banco .pila-banco { width: max-content; max-width: 100%; margin-inline: auto; }
.cuenta-banco .banco-y-logo { flex-wrap: wrap; }
/* Lo de fábrica, por si la pantalla no dijo nada; cuenta.js lo pone en la
   lista de cuentas y manda ese. */
:root { --banco-largo: 20; }
.cuenta-banco .banco-y-logo > select {
  flex: none;
  width: calc(var(--banco-largo) * .55em + 3em);
  max-width: 100%;
}
/* Solo el BUSCADOR (el único input.w-tipo de la fila). El campo del nombre de
   «Otro banco» no se toca: va a su ancho de siempre (ronda 1, 1/10/2026). */
.cuenta-banco input.w-tipo {
  width: calc(var(--banco-largo) * .55em + 3em);
  max-width: 100%;
}
/* La fila de tres campos le da al banco lo que pide —ni un píxel más— y el resto
   se reparte entre la moneda y el titular. Si la tarjeta no da para los tres
   (una ventana angosta o el teléfono), se apilan: «a lo ancho». */
.cuenta-banco .rejilla.c3 {
  grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1.2fr);
}
@container (max-width: 640px) {
  .cuenta-banco .rejilla.c3 { grid-template-columns: minmax(0, 1fr); }
}

/* LA TARJETA DE CADA CUENTA, CENTRADA (Mario, 1/10/2026, medido en Edge: el IBAN
   quedaba centrado solo en la mitad izquierda, «Subir/Bajar/Quitar» pegados a la
   izquierda y «Titular» cortaba un nombre largo).
   · El renglón del IBAN trae UN campo, pero su rejilla era de dos columnas
     (`.rejilla.c2`): el campo se centraba en la primera. Una columna, y queda
     centrado en la tarjeta.
   · Los botones, centrados como el resto de la tarjeta.
   · El titular es un <textarea> de un renglón que se alarga con su texto
     (`field-sizing: content`): ocupa toda su columna, sin el tope de ancho de
     `.w-nombre`, sin la manijita de estirar y con el texto centrado como los
     demás campos. */
.cuenta-banco .rejilla.c2 { grid-template-columns: minmax(0, 1fr); }
.cuenta-banco .acciones { justify-content: center; }
.cuenta-banco textarea.titular-cuenta {
  field-sizing: content;
  resize: none;
  width: 100%;
  max-width: none;
  min-height: 0;
  text-align: center;
  overflow: hidden;
}
/* Un navegador que no sabe alargarlo solo (Safari de antes) lo deja con sitio
   para tres renglones: el nombre más largo cabe sin correr a ciegas. */
@supports not (field-sizing: content) {
  .cuenta-banco textarea.titular-cuenta { min-height: 5.4em; overflow: auto; }
}

/* ------------------------------------------------------- Usuarios -- */
.aj-cupo-usuarios {
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--azul-suave);
  color: var(--azul);
  font-weight: 600;
  text-align: center;
}
/*
 * LAS TARJETAS CENTRADAS ENTRE LAS QUE HAYA (Mario, 22/9/2026).
 *
 * Era `repeat(auto-fill, minmax(260px, 1fr))`, y `auto-fill` deja en pie las
 * columnas vacías: con dos personas en 1440 px la rejilla armaba cinco
 * columnas, ponía las dos tarjetas en las primeras y el hueco quedaba a la
 * derecha. Con 3 usuarios y un contador pasaba lo mismo con cuatro.
 *
 * `auto-fit` no era la salida: colapsa las vacías y ESTIRA las que quedan, así
 * que dos tarjetas salían de media pantalla cada una. Lo que se hace es darle
 * a cada una un ancho fijo y sensato y centrar el grupo: dos, tres o cuatro
 * quedan juntas al centro, y cuando no caben se van al renglón de abajo, que
 * también sale centrado.
 */
.aj-personas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-3);
}
.aj-persona {
  display: grid;
  gap: 8px;
  align-content: start;
  /* Todo centrado (Mario, 17/9/2026, «igual esto»). */
  justify-items: center;
  text-align: center;
  padding: var(--e-4);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-chica);
  /* 300 px cada una, y nunca más ancha que el renglón (el teléfono). */
  flex: 0 1 300px;
  min-width: min(100%, 260px);
}
.aj-persona.inactiva { opacity: .6; }
.aj-persona-cabeza { display: grid; gap: 8px; justify-items: center; min-width: 0; max-width: 100%; }
.aj-persona-nombre { min-width: 0; max-width: 100%; }
.aj-persona-nombre strong,
.aj-persona-nombre .nota { display: block; overflow-wrap: anywhere; }
.aj-iniciales {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tinta);
  color: var(--sobre-tinta);
  font: 650 14px/1 var(--fuente-titulo);
  letter-spacing: .02em;
}
.aj-persona-pastillas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.aj-persona > .nota { margin: 0; }
.aj-persona-acciones {
  justify-self: stretch;
  justify-content: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--borde);
  padding-top: 8px;
  gap: 6px;
}

/* ------------------------------------------------------- Bitácora -- */
.aj-filtros { flex-wrap: wrap; gap: 10px; align-items: end; }
.aj-linea-tiempo { display: grid; gap: 18px; }
.aj-dia-titulo {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 0 8px;
  padding: 4px 0;
  background: var(--papel);
  font-size: 13px;
  font-weight: 650;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}
.aj-dia-lista {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--borde);
  display: grid;
  gap: 10px;
}
.aj-evento {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
}
.aj-evento::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--papel);
  border: 2px solid var(--azul);
}
.aj-evento-hora { color: var(--tenue); font-variant-numeric: tabular-nums; padding-top: 1px; }
.aj-evento-cuerpo { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.aj-evento-linea { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }

/* --------------------------------------------------- Mis empresas -- */
.aj-costo-mes { max-width: 520px; }
.aj-empresas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.aj-empresa {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px 16px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-chica);
  min-width: 0;
  overflow-wrap: anywhere;
}
.aj-empresa-nombre { display: flex; gap: 8px; align-items: center; font: 650 15px/1.3 var(--fuente-titulo); }
.aj-empresa .acciones { margin-top: auto; }
.aj-punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--tenue); }
.aj-punto.ok { background: var(--verde); }
.aj-punto.aviso { background: var(--ambar); }

/* ------------------- Los colegas, en Mi cuenta (8/10/2026) -- */
/* Son las mismas tarjetitas de «Mis empresas», pero adentro de una tarjeta de
   Mi cuenta, donde todo va centrado: una sola no se queda arrimada a la
   izquierda, y su nombre se centra como el resto de lo de adentro. En «Mis
   empresas» el bloque va como las empresas de al lado, sin nada de esto. */
.tarjeta-colegas .aj-empresas {
  grid-template-columns: repeat(auto-fit, minmax(250px, 340px));
  justify-content: center;
}
.tarjeta-colegas .aj-empresa-nombre { justify-content: center; text-align: center; }
.tarjeta-colegas .aj-empresa .acciones { justify-content: center; }
.tarjeta-colegas :is(h3, .nota) { text-align: center; margin: 0; }

/* ------------------------------------------ Sucursales: el árbol -- */
.aj-arbol { display: grid; gap: 12px; }
.aj-sucursal {
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  background: var(--papel);
  overflow: hidden;
}
.aj-sucursal.inactiva { opacity: .6; }
.aj-sucursal-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: var(--papel-2);
  border-bottom: 1px solid var(--borde);
}
.aj-terminales { list-style: none; margin: 0; padding: 4px 14px 4px 30px; }
.aj-terminal {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--borde);
}
.aj-terminal:last-child { border-bottom: 0; }
/* La rayita del árbol. */
.aj-terminal::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 18px;
  width: 10px;
  border-top: 1px solid var(--borde-fuerte);
}
.aj-terminal-nombre { flex: 1 1 180px; min-width: 0; }
.aj-terminal-numeros { display: flex; gap: 6px; flex-wrap: wrap; }
.aj-siguiente {
  font-size: 12.5px;
  color: var(--tenue);
  background: var(--papel-2);
  border-radius: 999px;
  padding: 2px 10px;
}
.aj-siguiente b { color: var(--texto); }
.aj-terminal-acciones { display: flex; gap: 6px; }
/* Acciones discretas: borde apenas visible hasta que se pasa encima. */
.aj-sucursal .boton.chico { border-color: var(--borde); }

/* --------------------------------------------- Recepción automática -- */
.aj-proveedores { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.opcion-pago.aj-proveedor {
  background: var(--papel);
  box-shadow: var(--sombra-chica);
  /* Centrado (Mario, 17/9/2026: «todo esto va centrado»). */
  align-items: center;
  justify-content: center;
  text-align: center;
}
.opcion-pago.aj-proveedor:hover:not(:disabled) { border-color: var(--azul); }
.opcion-pago.aj-proveedor.escogida {
  border-color: var(--azul);
  outline-color: var(--azul);
  background: var(--azul-suave);
}
.opcion-pago.aj-proveedor:disabled { cursor: default; opacity: .7; }
/* La rejilla del servidor y la de la carpeta: cada campo arriba, con su
   título centrado encima (la regla global) y el control centrado adentro;
   a todo el ancho de su columna para que queden parejos. */
.aj-cuenta-correo .rejilla :is(input, select) {
  width: 100%;
  max-width: none;
  text-align: center;
  text-align-last: center;
}
.aj-cuenta-correo p.nota { text-align: center; }
.aj-ultima-revision {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ Vista de EleMa -- */
.aj-vista-elema::before {
  content: "Vista de EleMa";
  display: block;
  padding: 8px 14px;
  border-radius: var(--radio-grande);
  background: var(--tinta);
  color: var(--sobre-tinta);
  box-shadow: inset 4px 0 0 var(--lima);
  font: 650 13px/1.3 var(--fuente-titulo);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* La columna pegada de «Terminal» se queda en el azul de los títulos de
   tabla (Mario, 16/9/2026): con los títulos de vuelta en letra blanca sobre
   azul, un fondo claro la dejaba ilegible. */

/* EL MODO DE PRÁCTICA (Mario, 2/10/2026): la tarjeta de Mi cuenta, centrada
   como la casa —el texto, el interruptor y la nota—. */
.tarjeta-practica .practica-cuerpo { align-items: center; text-align: center; }
.tarjeta-practica .practica-cuerpo p { max-width: 62ch; margin-inline: auto; }
.tarjeta-practica .practica-interruptor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 650;
}

/* ------------------------------------------------------------ Acerca de -- */
/* AJUSTES → «ACERCA DE» (Mario, 4/10/2026: «la versión, el año y todo eso va
   en configuración, acerca de, un nuevo apartado, con la información de EleMa
   y del facturador»). Prefijo .ac-. Centrada y angosta: es para leer. */
.ac-acerca { max-width: 760px; display: grid; gap: var(--e-4); }
.ac-acerca .dn-cabecera { justify-content: center; text-align: center; margin-bottom: 0; }
.ac-acerca .tarjeta { margin: 0; }
.ac-acerca .tarjeta > h2 { text-align: center; }
.ac-acerca .cuerpo { display: grid; gap: var(--e-2); justify-items: center; text-align: center; padding: var(--e-5) var(--e-4); }
.ac-acerca .cuerpo p { margin: 0; }
.ac-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); align-items: stretch; }
.ac-logo { display: block; border-radius: 13px; margin-bottom: var(--e-1); }
.ac-nombre { font: 650 19px var(--fuente-titulo); letter-spacing: -.01em; color: var(--texto); }
/* La versión, como una ficha que se puede dictar por teléfono. */
.ac-version {
  margin-top: var(--e-1); padding: 5px 14px; border-radius: 999px;
  background: var(--azul-suave); color: var(--azul);
  font: 650 15px var(--fuente-titulo); font-variant-numeric: tabular-nums;
}
.ac-version.sin { background: var(--gris-suave); color: var(--tenue); }
.ac-enlace { color: var(--azul); font-weight: 650; }
.ac-atajos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); }
.ac-atajos li {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: 6px var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--papel); font-size: 13.5px;
}
.ac-teclas { display: inline-flex; gap: 3px; }
.ac-atajos kbd {
  font: 650 11.5px var(--fuente-texto); padding: 1px 7px;
  border: 1px solid var(--borde-fuerte); border-bottom-width: 2px; border-radius: var(--radio-chico);
  background: var(--papel-2); color: var(--texto);
}
@media (max-width: 700px) { .ac-dos { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------- Cómo se ve la factura: la vista previa -- */
/* LA VISTA PREVIA JUNTO A SUS OPCIONES (frontend v3 · fase 6, 6/10/2026,
   lámina 09): en la compu, las opciones a la izquierda y la hoja a la
   derecha, pegada arriba mientras se recorren las opciones; en angosto,
   debajo. Desde el 7/10/2026 la hoja es la de verdad, montada en un marco por
   previa-factura.js, y por eso su columna es la ancha: una carta entera a
   menos de la mitad de su tamaño no se lee. */
.aj-factura {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(320px, 6fr);
  gap: var(--e-4);
  align-items: start;
}
.aj-factura-opciones { display: grid; gap: var(--e-3); min-width: 0; }
/* Con la hoja al lado, los cuatro desplegables chicos van de dos en dos. */
.aj-factura .rejilla.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aj-factura .rejilla.c2 { grid-template-columns: minmax(0, 1fr); }
.aj-factura-previa { position: sticky; top: 0; display: grid; gap: var(--e-2); min-width: 0; }
.aj-previa-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-2); }
.tarjeta .cuerpo .aj-previa-cabeza h3 { margin: 0; padding: 0; border-top: 0; font: 650 var(--t-titulo)/1.3 var(--fuente-titulo); }
.tarjeta .cuerpo .aj-previa-cabeza h3::before { content: none; }
.aj-factura-previa > .nota { margin-block: 0; text-align: center; }
/* LA LISTA DEL FORMATO QUE SE MIRA (Mario, 7/10/2026, noche: «si yo doy click
   donde dice rollo térmico 80mm me salgan las otras opciones»). Es el
   desplegable de la casa, del ancho de su texto y no del renglón entero (los
   campos nacen a todo el ancho): va entre el título y «Abrir la hoja
   completa». En el teléfono, los 40 px del dedo. */
.aj-previa-cabeza select.aj-previa-formato { width: auto; max-width: 100%; }
@media (max-width: 700px) {
  .aj-previa-cabeza select.aj-previa-formato { min-height: 40px; }
}
/* Sin la vista previa (consulta y bodega no pueden pedir la hoja de muestra), las
   opciones se llevan todo el ancho: quedaba una columna vacía a la derecha. */
.aj-factura:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1000px) {
  .aj-factura { grid-template-columns: minmax(0, 1fr); }
  .aj-factura-previa { position: static; }
}
@media (max-width: 700px) {
  .aj-factura .rejilla.c4 { grid-template-columns: minmax(0, 1fr); }
}

/* EL MARCO DE LA HOJA (7/10/2026). Adentro va la página de impresión de
   verdad, con SUS hojas de estilo: ninguna de las de aquí la toca, y por eso
   no hay más reglas que la del marco y la de su ventana.

   · `.aj-hoja-vista` es la ventana por donde se mira: el gris es la mesa
     donde se apoya el papel, el mismo de la pestaña de la hoja (el papel es
     blanco también en el tema oscuro). En la compu la vista previa va pegada
     arriba mientras se recorren las opciones, así que la ventana no pasa del
     alto que queda entre la cabecera y la barra del guardar: una carta entera
     —y más un rollo, que es largo— quedaría con el pie detrás de esa barra, y
     el comentario y la firma se cambian justo ahí. Lo que no cabe se recorre
     ADENTRO de la ventana. Los 330 px son lo de arriba (el aviso de la
     prueba, la barra, la cabecera de la vista previa) más la barra del
     guardar y la nota. El canal de la barra de desplazamiento se aparta
     siempre y a los dos lados: si apareciera y se fuera, cambiaría el ancho
     del marco, con él la escala de la hoja y con ella el alto, y bailaría.
     En angosto la vista previa va debajo de las opciones, sin pegarse, y la
     hoja sale entera.
   · `.aj-hoja-marco`: el alto lo pone previa-factura.js, que mide la hoja;
     el de aquí es solo el de mientras carga. Sin borde: se sumaría a ese alto
     y la hoja quedaría cortada por dos píxeles. Sin eventos del ratón:
     adentro no hay nada que apretar, y así la rueda mueve la ventana y la
     pantalla en vez de quedarse en el marco. */
.aj-hoja-vista {
  min-width: 0;
  border-radius: var(--radio-chico);
  background: #6b7280;
  overflow: hidden;
}
@media (min-width: 1001px) {
  .aj-hoja-vista {
    max-height: max(320px, calc(100dvh - 330px));
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
  }
}
.aj-hoja-marco {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  background: transparent;
  pointer-events: none;
}

/* --------------------------------------------- Usuarios: el rol, con color -- */
/* EL ROL COMO PASTILLA, CON SU NOMBRE Y SU COLOR (frontend v3 · fase 6,
   6/10/2026, lámina 10). El color sale de `--rol` y va en el punto y en el
   fondo suave; la letra es la de siempre, así que se lee igual en los dos
   temas, y el NOMBRE no se quita nunca: el color ayuda, no reemplaza. */
.aj-rol { --rol: var(--borde-fuerte); }
.rol-dueno { --rol: var(--ambar); }
.rol-colaborador { --rol: var(--azul); }
.rol-contador { --rol: var(--verde); }
.rol-consulta { --rol: var(--borde-fuerte); }
.rol-bodega { --rol: var(--tinta-2); }
.rol-cajero { --rol: color-mix(in srgb, var(--azul) 45%, var(--verde)); }
.rol-microbiologo { --rol: color-mix(in srgb, var(--rojo) 45%, var(--azul)); }
/* EN OSCURO, BODEGA SE TIENE QUE VER (Mario, 7/10/2026: los colores «están
   bien»; solo este): su tinta es casi la del papel oscuro y el punto y la
   raya desaparecían. El mismo rol, aclarado para ese fondo. */
html[data-theme="oscuro"] .rol-bodega { --rol: color-mix(in srgb, var(--texto) 78%, var(--azul)); }
.pastilla.aj-rol {
  background: color-mix(in srgb, var(--rol) 16%, var(--papel));
  color: var(--texto);
  font-weight: 650;
}
.pastilla.aj-rol::before { background: var(--rol); }
/* «Qué puede hacer cada rol»: cada renglón con el color de su rol. */
.aj-pantalla .aj-roles table { min-width: 0; width: 100%; }
.aj-pantalla .aj-roles th.aj-rol {
  width: 1%;
  white-space: nowrap;
  padding-inline: var(--e-4);
  background: color-mix(in srgb, var(--rol) 16%, var(--papel));
  color: var(--texto);
  box-shadow: inset 4px 0 0 var(--rol);
  text-align: center;
}
.aj-pantalla .aj-roles td { text-align: center; }

/* ============================================== EL TELÉFONO (v3 · fase 6) == */
/* NADA CORRE DE LADO, LOS BOTONES MIDEN AL MENOS 40 PX Y LOS FORMULARIOS VAN EN
   UNA COLUMNA (Mario, 6/10/2026; medido en Edge a 375 y a 320). Una tabla se
   lee como tarjetas con el MISMO DOM: cada celda dice de qué es con el título
   de su columna (`data-rotulo`, que pone `apilable()` de ajustes-piezas.js). */
@media (max-width: 700px) {
  .aj-pantalla > .dn-cabecera, .dn-cabecera.aj-de-app { justify-content: center; text-align: center; }
  .aj-pantalla > .dn-cabecera .dn-acciones { width: 100%; justify-content: center; }
  .aj-pantalla .tarjeta > .cabecera-doc { justify-content: center; text-align: center; }
  .aj-titulo { justify-items: center; }
  .aj-pantalla .boton,
  .aj-pantalla select,
  .aj-pantalla input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]) { min-height: 40px; }
  .aj-pantalla .rejilla { grid-template-columns: minmax(0, 1fr); }
  .aj-pantalla .rejilla > .rejilla-centrada > * { flex-basis: 100%; }
  .aj-seccion, section.aj-paso { padding: var(--e-3); }
  .aj-conexion-puntos { flex-direction: column; align-items: center; }

  .aj-pantalla .envoltorio-tabla:has(> .aj-apilable),
  .aj-pantalla .envoltorio-tabla:has(> .tabla-numeracion) { overflow-x: visible; }
  .aj-pantalla .envoltorio-tabla table.aj-apilable,
  .aj-pantalla .envoltorio-tabla table.tabla-numeracion { display: block; min-width: 0; width: 100%; }
  /* Los títulos de columna no ocupan sitio, pero el lector de pantalla los lee. */
  .aj-pantalla .aj-apilable thead,
  .aj-pantalla .tabla-numeracion thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .aj-pantalla .aj-apilable tbody,
  .aj-pantalla .tabla-numeracion tbody { display: grid; gap: var(--e-2); }
  .aj-pantalla .aj-apilable tr,
  .aj-pantalla .tabla-numeracion tr {
    display: grid;
    gap: var(--e-1) var(--e-3);
    padding: var(--e-3);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--papel);
  }
  .aj-pantalla .aj-apilable td,
  .aj-pantalla .tabla-numeracion td {
    position: static;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--e-3);
    padding: 2px 0;
    border: 0;
    background: transparent;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .aj-pantalla .aj-apilable td[data-rotulo]::before,
  .aj-pantalla .tabla-numeracion td[data-rotulo]::before {
    content: attr(data-rotulo);
    flex: none;
    font-weight: 650;
    color: var(--tenue);
    text-align: left;
  }
  .aj-pantalla .aj-apilable td:not([data-rotulo]),
  .aj-pantalla .tabla-numeracion td:not([data-rotulo]) { justify-content: center; align-items: center; text-align: center; }
  /* La numeración: la terminal arriba, sus números de dos en dos, los botones al pie. */
  .aj-pantalla .tabla-numeracion tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aj-pantalla .tabla-numeracion td.terminal,
  .aj-pantalla .tabla-numeracion td:last-child { grid-column: 1 / -1; }
  .aj-pantalla .tabla-numeracion td.terminal { display: block; text-align: center; }
  .aj-pantalla .aj-roles tr { display: grid; gap: var(--e-1); padding: var(--e-2) 0; }
  .aj-pantalla .aj-roles th.aj-rol { width: auto; }
}

/* ------------------------------------------- remates de la fase 6 (v3) -- */
/* Lo que NO se centra, porque se lee de izquierda a derecha: el árbol de las
   sucursales, que es una lista con su línea. */
.aj-pantalla .aj-arbol { text-align: left; }
/* Los planes a escoger respiran de la línea que dice el plan de hoy. */
.aj-planes { margin-top: var(--e-2); }
@media (min-width: 701px) {
  /* La tabla de la numeración llena su tarjeta: se quedaba corta, a un lado. */
  .aj-pantalla .envoltorio-tabla table.tabla-numeracion { min-width: 100%; }
}

/* ------------------------- «Lo que Hacienda ya tiene» (Mario, 8/10/2026) -- */
/* La comparación de «Buscar en Hacienda por dónde iba»: lo que Hacienda tiene
   al lado del siguiente de aquí. Cinco columnas cortas: no necesita el ancho
   mínimo de las tablas grandes, y en el teléfono se apila (`aj-apilable`). */
.aj-pantalla .aj-en-hacienda .envoltorio-tabla table { min-width: 0; }
/* El renglón que choca: su número ya existe en Hacienda. Con una raya a la
   izquierda además del fondo, para que no dependa solo del color. */
.aj-en-hacienda tr.atrasada td { background: var(--alerta-suave); }
.aj-en-hacienda tr.atrasada td:first-child { box-shadow: inset 4px 0 0 var(--alerta); }
.aj-en-hacienda td .nota { display: block; max-width: 36ch; margin-inline: auto; text-wrap: balance; }
/* El código de la terminal no se parte en dos renglones. */
.aj-en-hacienda td strong.mono { white-space: nowrap; }
@media (max-width: 700px) {
  /* Apilada, la raya va en la tarjeta entera y no en la primera celda. */
  .aj-pantalla .aj-en-hacienda .aj-apilable tr.atrasada { background: var(--alerta-suave); box-shadow: inset 4px 0 0 var(--alerta); }
  .aj-pantalla .aj-en-hacienda .aj-apilable tr.atrasada td:first-child { box-shadow: none; }
  .aj-pantalla .aj-en-hacienda .aj-apilable td .nota { max-width: none; text-align: right; }
  /* El título de cada número, con la letra del texto y no la de los números. */
  .aj-pantalla .aj-en-hacienda .aj-apilable td[data-rotulo]::before { font: 650 var(--t-nota) var(--fuente-texto); }
}

/* ------------------------------------------------ Bitácora, legible (v3) -- */
/* SOLO DESDE LA HOJA (frontend v3 · fase 6, Mario, 6/10/2026, lámina 11 y
   ficha 22: «resumen legible»). bitacora.js NO se toca en esta fase —otra rama
   le está cambiando el detalle y dos nombres de acción—, así que todo esto se
   logra sobre el DOM de siempre.
   LOS FILTROS, COMPACTOS: los cuatro en un renglón y la cuenta al final. */
.aj-bitacora > .aj-filtros {
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) minmax(220px, 1.3fr) repeat(2, minmax(140px, 1fr)) auto;
  align-items: end;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
}
.aj-bitacora > .aj-filtros > div { min-width: 0; }
.aj-bitacora > .aj-filtros :is(input, select) { width: 100%; max-width: none; }
/* La cuenta de lo encontrado, a la altura de los campos. */
.aj-bitacora > .aj-filtros > div:last-child { align-self: center; white-space: nowrap; font-weight: 600; text-align: center; }
.aj-bitacora > p.nota { margin: var(--e-3) 0 0; text-align: center; text-wrap: balance; }
/* LA FRASE PRIMERO: lo que contesta «¿quién hizo qué?» va arriba y con peso;
   la pastilla y quién lo hizo, debajo; el detalle crudo, chico y al final. */
.aj-bitacora .aj-evento-cuerpo > div:not([class]) { order: -1; font-weight: 600; color: var(--texto); }
.aj-bitacora .aj-evento-linea strong { font-weight: 500; font-size: var(--t-nota); color: var(--tenue); overflow-wrap: anywhere; }
.aj-bitacora .aj-evento-cuerpo > .nota.mono { font-size: 12px; }
.aj-bitacora .cuerpo { padding: var(--e-4); }
@media (max-width: 900px) {
  .aj-bitacora > .aj-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aj-bitacora > .aj-filtros > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .aj-bitacora > .aj-filtros { grid-template-columns: minmax(0, 1fr); }
  .aj-bitacora :is(select, input) { min-height: 40px; }
  /* La hora encima de lo que pasó: al lado le quitaba 60 px a la frase. */
  .aj-bitacora .aj-evento { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ------------------------------------ Traerse los datos: los tres pasos -- */
/* «TRAERSE LOS DATOS», ORDENADO POR TAREA (frontend v3 · fase 6, 6/10/2026,
   lámina 13): el machote, la IA y el archivo son tres cuadros parejos, cada
   uno con su número en el título y lo de adentro al centro. El orden y lo que
   hace cada uno son los de siempre (importar.js). */
.aj-importar { gap: var(--e-3); text-align: center; }
.aj-importar .aviso-fijo {
  padding: var(--e-4);
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--radio);
  background: var(--papel);
  box-shadow: var(--sombra-chica);
}
.aj-importar .aviso-fijo > strong:first-child,
.aj-importar .aviso-fijo > summary > strong {
  font: 650 var(--t-titulo)/1.35 var(--fuente-titulo);
  color: var(--texto);
}
.aj-importar .aviso-fijo > strong:first-child { display: block; }
.aj-importar summary { cursor: pointer; }
/* `.aviso-fijo .nota` (estilo.css) le pone su margen: aquí manda el centrado. */
.aj-importar .aviso-fijo p { margin-inline: auto; max-width: 78ch; }
.aj-importar .aviso-fijo .boton { min-height: 40px; }
.aj-importar pre { text-align: left; }
/* Del ancho de lo suyo y al centro: a todo el ancho, «Elegir archivo» quedaba
   pegado a la izquierda de su cuadro. */
.aj-importar input[type="file"] { display: block; width: min(100%, 440px); margin-inline: auto; }

/* --------------------------- lo que las capturas encontraron (v3 · fase 6) -- */
/* MIRADAS LAS CAPTURAS DE LA FASE (7/10/2026), lo que quedaba a un lado o
   apretado. Cada una está medida en frontend-v3-ajustes-medidos-en-edge. */
/* Las monedas que se ofrecen: una columna al centro, con los interruptores
   alineados entre sí (cada renglón centrado por su cuenta los dejaba en
   escalera). */
.aj-pantalla .cuerpo .aj-monedas { flex-direction: column; align-items: center; gap: var(--e-2); }
/* Con el peso de «.aj-pantalla .cuerpo .encasillado», que los centra uno por uno. */
.aj-pantalla .cuerpo .aj-monedas .encasillado { display: flex; width: 168px; max-width: 100%; justify-content: flex-start; text-align: left; }
/* Las condiciones de venta que se ofrecen, al centro de su sección. */
.aj-pantalla .condiciones-venta { justify-content: center; }
/* Hacienda: el renglón de la vigencia y el del usuario guardado no se pegan a
   los campos que les siguen. */
.aj-credenciales > .aj-paso > :is(.llave-p12, .rejilla) { margin-top: var(--e-2); }
/* El logo y el banner, uno debajo del otro, con el hueco de la escala. */
.aj-factura .rejilla.c2 { gap: var(--e-5); }
/* El banner va en la MISMA caja que el logo, debajo de sus botones: sin esto
   su rótulo quedaba pegado a «Subir el logo». */
.aj-factura .acciones.bajo-archivo + * { margin-top: var(--e-5); }
/* LOS PROVEEDORES DE CORREO, CENTRADOS TAMBIÉN EL QUE QUEDA SOLO ABAJO (la
   misma regla de las tarjetas de Usuarios, Mario, 22/9/2026): la rejilla
   `auto-fit` dejaba «Otro (IMAP)» pegado a la izquierda del segundo renglón.
   Todas del mismo ancho, y el grupo al centro. */
.aj-proveedores { display: flex; flex-wrap: wrap; justify-content: center; }
.opcion-pago.aj-proveedor { flex: 0 1 180px; min-width: min(100%, 150px); }
/* «Traerse los datos»: el machote y el archivo, al centro de su cuadro. Su
   párrafo trae el margen escrito a mano y se quedaba a la izquierda. */
.aj-importar .aviso-fijo p[style] { max-width: none; }
/* «Qué puede hacer cada rol»: sin la raya azul de los títulos de tabla. */
.aj-pantalla .aj-roles th.aj-rol { border-bottom: 1px solid var(--borde); }
@media (max-width: 700px) {
  /* La numeración como tarjetas: sin las rayas de la tabla (los bordes de las
     columnas y la sombra de la que iba pegada), y el título de cada número con
     la letra del texto, no la de los números. */
  .aj-pantalla .tabla-numeracion tbody td.numero:nth-child(n) { border: 0; }
  .aj-pantalla .tabla-numeracion tbody td.terminal { box-shadow: none; }
  /* El nombre de la terminal, entero y al centro: aquí ya no empuja ninguna columna. */
  .aj-pantalla .tabla-numeracion td.terminal .celda-tenue { max-width: none; white-space: normal; }
  .aj-pantalla .tabla-numeracion td[data-rotulo]::before { font: 650 var(--t-nota) var(--fuente-texto); }
}

/* La tarjetita del pago automático (17/10/2026): marca, titular y •••• 1234.
   Con los colores que ya existen, para no estrenar contrastes. */
.tarjetita-de-pago {
  max-width: 22rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--acento-suave);
  display: grid;
  gap: 0.35rem;
}
.tarjetita-numero {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  font-size: 1.1rem;
}
/* Todo al centro, con aire (Mario, 17/10/2026: «se ve muy feo … el switch está
   muy en la orilla»). El permiso va en su recuadro suave: el interruptor a la
   izquierda del texto, nunca pegado al borde de la tarjeta. */
.pago-automatico { justify-items: center; text-align: center; }
.pago-automatico .acciones { justify-content: center; }
.pago-automatico .cobros-de-tarjeta { text-align: left; justify-self: stretch; }
.permiso-de-cobro,
.interruptor-de-cobro {
  display: flex;
  gap: var(--e-3);
  align-items: center;
  text-align: left;
  max-width: 38rem;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  background: var(--acento-suave);
  color: var(--texto);
  font-size: 14px;
  line-height: 1.5;
}
.permiso-de-cobro input,
.interruptor-de-cobro input { flex: none; margin: 0; }