/* Reseñalo: un solo archivo de estilos para el panel, autenticación y administración.
   Identidad: marca/MARCA.md (v1, 02/10/2026). Celular primero; desde 768 px, la PC.
   Guía de estilo v2 (03/10/2026): medidas, formas y organización tomadas de Zoom (texto de
   17 px, encabezado de 88 px, botones con esquinas de 10 px, tarjetas con mucho aire).
   Contraste: todo texto ≥ 4,5:1 sobre su fondo (tests/test_diseno.py lo comprueba con los
   tokens de abajo). El coral es solo detalle: nunca texto sobre blanco ni sobre violeta. */

@font-face { font-family: "Sora"; font-weight: 600; font-style: normal; font-display: swap;
             src: url("fuentes/sora-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 800; font-style: normal; font-display: swap;
             src: url("fuentes/sora-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400; font-style: normal; font-display: swap;
             src: url("fuentes/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-style: normal; font-display: swap;
             src: url("fuentes/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-style: normal; font-display: swap;
             src: url("fuentes/dm-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  /* Marca */
  --violeta: #5B3DF5;
  --violeta-oscuro: #3A22C4;   /* hover y texto violeta sobre violeta suave */
  --coral: #FF6A4D;            /* solo detalles (estrellas, ondas, íconos sobre tinta) */
  --tinta: #17133A;
  --fondo: #F6F5FF;
  --violeta-suave: #E3DEFF;
  --blanco: #FFFFFF;
  /* Interfaz */
  --texto: var(--tinta);
  --suave: #57527A;            /* texto secundario: 7,6:1 sobre blanco, 6,9:1 sobre fondo */
  --sobre-tinta: #D9D5F5;      /* texto secundario sobre tinta */
  --borde: #DCD9E8;            /* borde fino de tarjetas y separadores (gris violáceo) */
  --borde-campo: #8F87C9;      /* borde de campos: 3:1 contra el blanco (WCAG 1.4.11) */
  --separador: #EEEBFF;
  /* Estados: siempre con ícono, además del color */
  --error: #B3261E;  --error-fondo: #FDECEA;  --error-borde: #F3C2BB;
  --alerta: #5C3800; --alerta-fondo: #FFF3D6; --alerta-borde: #F2C46D;
  --ok: #0B6B43;     --ok-fondo: #E4F5EC;     --ok-borde: #9FD8BA;
  /* Forma */
  --radio: 16px; --radio-chico: 12px; --radio-boton: 10px; --toque: 48px;
  --alto-barra: 4.6rem;        /* la barra de abajo del celular */
  --titulos: "Sora", "DM Sans", system-ui, sans-serif;
  --cuerpo: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
/* Base de 17 px (106,25 % de los 16 del navegador): todo lo que se mide en rem crece igual. */
html { -webkit-text-size-adjust: 100%; font-size: 106.25%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column;
       font: 1rem/1.55 var(--cuerpo); background: var(--fondo); color: var(--texto); }
a { color: var(--violeta); text-underline-offset: 2px; }
a:hover { color: var(--violeta-oscuro); }
:focus-visible { outline: 3px solid var(--violeta); outline-offset: 2px; }
img, svg { flex-shrink: 0; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
          white-space: nowrap; }

/* ---------- Encabezado y pie ---------- */
.cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
       padding: .85rem 1.25rem; background: var(--blanco); border-bottom: 1px solid var(--borde); }
.cab > * { min-width: 0; }
.cab > a:first-child { flex-shrink: 0; }
.cab .logo { display: block; height: 28px; width: auto; }
body.acceso .cab .logo { height: 36px; }
.cab .etiqueta { font-size: .8125rem; font-weight: 700; color: var(--suave); }
.ic { flex-shrink: 0; }

/* El menú del usuario (PC) y la hoja de "Más" (celular): quién es, cambiar de negocio,
   Cuenta, Suscripción y Salir. Sin JavaScript: son <details>. */
details.usuario, details.mas { position: relative; }
details.usuario > summary, details.mas > summary { list-style: none; cursor: pointer; margin: 0; }
details.usuario > summary::-webkit-details-marker,
details.mas > summary::-webkit-details-marker { display: none; }
.quien { padding: .5rem .75rem .85rem; margin-bottom: .35rem; border-bottom: 1px solid var(--borde); }
.quien strong { display: block; font-family: var(--titulos); font-weight: 600; font-size: 1.0625rem; }
.quien span { display: block; color: var(--suave); font-size: .9375rem; overflow-wrap: anywhere; }
.quien strong, .quien span { overflow-wrap: anywhere; }
.menu-usuario a, .hoja a { display: flex; align-items: center; gap: .75rem; min-height: 48px;
                           padding: 0 .75rem; border-radius: var(--radio-boton); color: var(--texto);
                           text-decoration: none; font-weight: 500; }
.menu-usuario a:hover, .hoja a:hover { background: var(--fondo); color: var(--texto); }
.menu-usuario a[aria-current], .hoja a[aria-current] { background: var(--violeta-suave); font-weight: 700; }
.cambiar-negocio { padding: 0 0 .5rem; margin-bottom: .35rem; border-bottom: 1px solid var(--borde); }
.cambiar-negocio .rotulo { margin: .25rem .75rem .35rem; font-size: .8125rem; font-weight: 700;
                           letter-spacing: .04em; text-transform: uppercase; color: var(--suave); }
.cambiar-negocio button { margin: 0; min-height: 44px; justify-content: flex-start; font-size: 1rem;
                          width: 100%; min-width: 0; }
.cambiar-negocio button + button { margin-top: .35rem; }
.cambiar-negocio button.elegido { background: var(--violeta-suave); color: var(--tinta);
                                  border-color: var(--violeta-suave); }
footer.pie { padding: .75rem 1.25rem 1.25rem; text-align: center; color: var(--suave);
             font-size: .8125rem; }
footer.pie a { color: var(--violeta); }

main { flex: 1; width: 100%; max-width: 30rem; margin: 0 auto; padding: 1.5rem 1.25rem 2rem; }
body.con-menu main { padding-bottom: calc(var(--alto-barra) + 2rem); }

/* ---------- Texto ---------- */
h1, h2, h3 { font-family: var(--titulos); color: var(--tinta); }
h1 { font-weight: 800; font-size: 1.765rem; line-height: 1.15; letter-spacing: -.02em;
     margin: .25rem 0 .75rem; text-wrap: balance; }   /* 30 px */
h2 { font-weight: 600; font-size: 1.235rem; line-height: 1.3; margin: 1.75rem 0 .5rem; }  /* 21 px */
h3 { font-weight: 600; font-size: 1rem; margin: 1rem 0 .25rem; }
p { margin: .5rem 0; }
.suave { color: var(--suave); font-size: .9375rem; }
.paso { margin: 0 0 .25rem; font-size: .8125rem; font-weight: 700; letter-spacing: .08em;
        text-transform: uppercase; color: var(--violeta); }
.codigo { font-family: var(--titulos); font-weight: 600; letter-spacing: .06em; }
.legal h2 { margin-top: 2rem; scroll-margin-top: 1rem; }
.legal .bajada { margin-bottom: 1.5rem; }
.legal li + li { margin-top: .4rem; }
.indice { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
          padding: 1rem 1.3rem; margin: 0 0 1.5rem; }
.indice ol { margin: 0; padding-left: 1.25rem; }
.indice li + li { margin-top: .25rem; }
/* Términos, §7, y Res. 424/2020: los dos botones del pie, siempre a la vista, "en un lugar
   destacado, en cuanto a visibilidad y tamaño": botones con borde, más grandes que el texto
   del pie. En el celular, uno abajo del otro y del mismo ancho (el del más largo); desde
   680 px, uno al lado del otro, cada uno del ancho de su texto y en un solo renglón. */
footer.pie .botones-legales { display: flex; flex-direction: column; align-items: stretch;
                              gap: .6rem; width: fit-content; max-width: 100%;
                              margin: .9rem auto 0; }
footer.pie a.boton-legal { display: inline-flex; align-items: center; box-sizing: border-box;
                           justify-content: center; min-height: var(--toque);
                           padding: .35rem .9rem; border: 2px solid var(--violeta);
                           border-radius: var(--radio-boton); background: var(--blanco);
                           color: var(--violeta); font-size: 1rem; font-weight: 700;
                           letter-spacing: .02em; line-height: 1.25; text-align: center;
                           text-decoration: none; text-transform: uppercase; }
footer.pie a.boton-legal:hover { background: var(--violeta-suave); }
@media (min-width: 680px) {
  footer.pie .botones-legales { flex-direction: row; justify-content: center; }
  /* Del ancho de su texto; con letra grande, si no entran, se achican (el texto baja de
     renglón) en vez de salirse de la ventana. */
  footer.pie a.boton-legal { flex: 0 1 auto; padding-block: .2rem; }
}
.numero-solicitud { font-family: var(--titulos); font-size: 1.8rem; letter-spacing: .08em;
                    margin: .5rem 0 1rem; }
/* "¿Ya tenés cuenta?" entre dos líneas, antes del botón secundario. */
.separado { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0 0; color: var(--suave);
            font-size: .875rem; }
.separado::before, .separado::after { content: ""; flex: 1; height: 1px; background: var(--borde); }

/* La barra de pasos de la activación (1, 2 o 3 de 3). */
.pasos { display: flex; gap: 6px; margin: 0 0 1rem; padding: 0; list-style: none; }
.pasos li { flex: 1; height: 6px; border-radius: 3px; background: var(--violeta-suave); }
.pasos li.hecho { background: var(--violeta); }

/* ---------- Tarjetas y listas ---------- */
.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
           padding: 1.3rem; margin: .75rem 0; }  /* 22 px de aire; 32 en la PC */
.tarjeta > :first-child { margin-top: 0; }
.tarjeta > :last-child { margin-bottom: 0; }
.tarjeta.alerta { background: var(--alerta-fondo); border-color: var(--alerta-borde);
                  color: var(--alerta); }
.tarjeta.alerta .suave { color: var(--alerta); }
.tarjeta.amarilla { border: 1.5px dashed var(--borde-campo); }
.tarjeta.peligro { border-color: var(--error-borde); }
.tarjeta.peligro > strong:first-child { color: var(--error); }
/* La tarjeta protagonista (el número de escaneos): tinta, con la estrella coral. */
.destacado { background: var(--tinta); color: var(--blanco); border-radius: 20px; padding: 1.25rem;
             margin: .75rem 0; }
.destacado .suave, .destacado p { color: var(--sobre-tinta); }
.destacado .numero { color: var(--blanco); font-size: 3rem; display: flex; align-items: baseline;
                     gap: .6rem; }
.estrella { fill: var(--coral); }
.fila { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.numero { font-family: var(--titulos); font-weight: 800; font-size: 1.75rem; line-height: 1.1; }
.lista { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
         margin: .75rem 0; padding: 0; list-style: none; }
.lista > li, .lista > a { display: flex; align-items: center; justify-content: space-between;
                          gap: .75rem; padding: .85rem 1rem; min-height: 56px;
                          border-bottom: 1px solid var(--separador); color: var(--texto);
                          text-decoration: none; }
.lista > :last-child { border-bottom: 0; }
.lista .numero { font-size: 1.375rem; }
/* Una tarjeta con ícono a la izquierda (ayuda, plan Pro, "¿tenés más carteles?"). */
.con-icono { display: flex; align-items: center; gap: .85rem; text-decoration: none;
             color: var(--texto); }
.con-icono > span:last-child { display: flex; flex-direction: column; }
.con-icono strong { font-size: .9375rem; }
a.con-icono:hover { color: var(--texto); border-color: var(--violeta); }
/* La tarjeta del plan Pro en Inicio: el candado arriba, alineado con el título; el texto
   y el botón "Ver planes" debajo, con todo el ancho que queda. */
.plan-pro { align-items: flex-start; }
.plan-pro > div { flex: 1; min-width: 0; }
.plan-pro strong { display: block; font-size: 1.0625rem; }
.plan-pro p { margin: .3rem 0 1rem; }
.plan-pro .boton { margin: 0; }
.inicio-lista > .boton { margin-top: 1.25rem; }
.icono { width: 40px; height: 40px; border-radius: var(--radio-chico); background: var(--violeta-suave);
         display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icono svg { stroke: var(--violeta); }
.candado { color: var(--suave); }

/* ---------- Formularios ---------- */
label { display: block; font-size: .9375rem; font-weight: 700; color: var(--texto);
        margin: 1rem 0 .35rem; }
input, select, textarea { width: 100%; min-height: var(--toque); font: inherit; font-size: 1.0625rem;
                          padding: .7rem .85rem; border: 1.5px solid var(--borde-campo);
                          border-radius: var(--radio-chico); background: var(--blanco);
                          color: var(--texto); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--violeta-suave);
                                            border-color: var(--violeta); }
input[type="checkbox"], input[type="radio"] { width: 22px; min-height: 0; height: 22px; padding: 0;
                                              margin: .1rem 0 0; accent-color: var(--violeta);
                                              flex-shrink: 0; }
.check { display: flex; gap: .75rem; align-items: flex-start; font-weight: 400; color: var(--texto); }
label.check span { color: var(--texto); }
fieldset { border: 0; margin: 0; padding: 0; }
fieldset legend { font-weight: 700; padding: 0; margin-bottom: .5rem; }
fieldset.tarjeta { border: 1px solid var(--borde); padding: 1rem; }
/* El PIN: un solo campo grande, números espaciados (sin JavaScript; acepta pegar). */
.pin-unico { height: 76px; font-family: var(--titulos); font-weight: 800; font-size: 2.25rem;
             text-align: center; letter-spacing: .45em; text-indent: .45em; border-width: 2px; }
/* Elegir entre opciones (el local de la activación): cada una, una tarjeta tocable. */
.opcion { display: flex; align-items: center; gap: .85rem; margin: .6rem 0; padding: 1rem;
          border-radius: var(--radio); background: var(--blanco); border: 1.5px solid var(--borde);
          font-weight: 400; cursor: pointer; }
.opcion:has(input:checked) { border: 2px solid var(--violeta); }
.opcion strong { display: block; font-size: 1.0625rem; }
.opcion .suave { display: block; font-size: .875rem; }

/* ---------- Botones ---------- */
button, .boton { display: flex; align-items: center; justify-content: center; gap: .5rem;
                 width: 100%; min-height: var(--toque); margin-top: 1rem; padding: .6rem 1.4rem;
                 font: inherit; font-size: 1rem; font-weight: 700; text-align: center;
                 text-decoration: none; cursor: pointer; border-radius: var(--radio-boton);
                 border: 2px solid var(--violeta); background: var(--violeta); color: var(--blanco); }
button:hover, .boton:hover { background: var(--violeta-oscuro); border-color: var(--violeta-oscuro);
                             color: var(--blanco); }
/* Secundario: fondo claro con borde fino (guía v2). */
button.secundario, .boton.secundario { background: var(--blanco); color: var(--tinta);
                                       border: 1px solid var(--borde-campo); }
button.secundario:hover, .boton.secundario:hover { background: var(--fondo); color: var(--tinta);
                                                   border-color: var(--violeta); }
/* En tarjetas: a todo el ancho y más alto. */
button.ancho, .boton.ancho { width: 100%; min-width: 0; min-height: 58px; margin: 0;
                             font-size: 1.0625rem; }
.boton.deshabilitado, .boton.deshabilitado:hover { background: var(--fondo); color: var(--suave);
                                                   border: 1px solid var(--borde); cursor: default; }
button.peligro, .boton.peligro { background: var(--blanco); color: var(--error);
                                 border: 1.5px solid var(--error); }
button.peligro:hover, .boton.peligro:hover { background: var(--error-fondo); color: var(--error); }
button.enlace { display: inline; width: auto; min-height: 0; border: 0; background: none;
                padding: 0; margin: 0; color: var(--violeta); font-weight: 400; font-size: inherit;
                text-decoration: underline; }
button.enlace:hover { color: var(--violeta-oscuro); background: none; }
/* Un campo y su botón: en el celular, el botón debajo; en la PC, al costado. */
.enlinea { display: flex; flex-direction: column; gap: .5rem; }
.enlinea input { flex: 1; min-width: 0; }
.enlinea button { margin-top: 0; min-height: var(--toque); font-size: 1rem; }
.discreto { display: block; margin: 1.25rem 0 0; text-align: center; font-size: .9375rem;
            color: var(--suave); }
.discreto a { color: var(--suave); }
.chico { width: auto; min-height: 44px; margin: 0; padding: 0 .9rem; font-size: .9375rem; }

/* ---------- Mensajes (siempre con ícono) ---------- */
.error, .aviso, .ok { display: flex; gap: .65rem; align-items: flex-start; border-radius: var(--radio-chico);
                      padding: .75rem .9rem; margin: .75rem 0; border: 1px solid; }
.error::before, .aviso::before, .ok::before {
  flex-shrink: 0; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: .8125rem;
  color: var(--blanco); margin-top: .1rem; }
.error { background: var(--error-fondo); border-color: var(--error-borde); color: var(--error); }
.error::before { content: "!"; background: var(--error); }
.aviso { background: var(--violeta-suave); border-color: #CBC2FF; color: var(--tinta); }
.aviso::before { content: "i"; background: var(--violeta); }
.ok { background: var(--ok-fondo); border-color: var(--ok-borde); color: var(--ok); }
.ok::before { content: "✓"; background: var(--ok); }
/* Un mensaje con título: todo el texto va en un solo <span> (el flex deja el ícono y el
   texto en dos columnas, no el título y la frase), y el título en su propio renglón. */
.error .titulo-mensaje, .aviso .titulo-mensaje, .ok .titulo-mensaje { display: block;
                                                                      margin-bottom: .2rem; }
.estado { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem;
          border-radius: 999px; font-size: .8125rem; font-weight: 700; }
.estado.ok { background: var(--ok-fondo); color: var(--ok); border: 0; margin: 0; padding: .2rem .6rem; }
.estado.alerta { background: var(--alerta-fondo); color: var(--alerta); }
.estado.error { background: var(--error-fondo); color: var(--error); border: 0; margin: 0;
                padding: .2rem .6rem; border-radius: 999px; align-items: center; }
.estado.neutro { background: var(--separador); color: var(--suave); }
.estado.ok::before, .estado.error::before { display: none; }
.vencido { color: var(--error); font-weight: 700; }

/* ---------- ¡Listo! ---------- */
.listo { text-align: center; padding-top: 1.5rem; }
.listo .sello { position: relative; width: 120px; height: 120px; margin: 0 auto 1.25rem;
                border-radius: 50%; background: var(--violeta); display: flex; align-items: center;
                justify-content: center; }
.listo .sello .estrella { position: absolute; top: -6px; right: -4px; }
.listo h1 { font-size: 2rem; }
.listo .tarjeta { text-align: left; }

/* ---------- Menú del panel: abajo en el celular (con "Más"), arriba en la PC ---------- */
.cab-derecha { display: none; }
nav.principal { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; display: grid;
                grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--blanco);
                border-top: 1px solid var(--borde);
                padding: .4rem .25rem calc(.6rem + env(safe-area-inset-bottom)); }
nav.principal > a, details.mas > summary {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--toque); color: var(--suave); text-decoration: none; font-size: .75rem;
  font-weight: 500; }
nav.principal > a.activo, details.mas > summary.activo { color: var(--violeta); font-weight: 700; }
nav.principal > a.activo .ic, details.mas > summary.activo .ic {
  background: var(--violeta-suave); border-radius: 999px; width: 3.2rem; padding: 1px .8rem; }
details.mas[open] > summary { color: var(--violeta); }
/* La hoja de "Más": sube desde la barra. */
details.mas .hoja { position: fixed; left: 0; right: 0; bottom: var(--alto-barra); z-index: 11;
                    max-height: calc(100vh - var(--alto-barra) - 3rem); overflow-y: auto;
                    background: var(--blanco); border: 1px solid var(--borde); border-bottom: 0;
                    border-radius: 20px 20px 0 0; padding: .9rem .75rem 1rem;
                    box-shadow: 0 -12px 32px rgba(23, 19, 58, .14); }
details.mas .hoja a { min-height: 52px; font-size: 1.0625rem; }

/* Los dos links de Google de un local: uno debajo del otro en el celular, juntos en la PC. */
.botones-google { display: flex; flex-direction: column; gap: .5rem; }
.botones-google .boton { margin-top: .5rem; }
.botones-google + .botones-google { margin-top: 1rem; }

/* ---------- Carteles: lista compacta (celular) y tabla (PC) ---------- */
.titulo-con-accion { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
                     flex-wrap: wrap; }
.titulo-con-accion h1 { margin-bottom: .25rem; }
.titulo-con-accion .boton { margin: 0; }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1rem; }
.filtros > div { flex: 1 1 9rem; }
.filtros .campo-buscar { flex: 1 1 100%; }
.filtros input, .filtros select { min-height: 44px; font-size: 1rem; }
.filtros button { margin: 0; }
.tabla-carteles { list-style: none; margin: 0; padding: 0; background: var(--blanco);
                  border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.tabla-carteles li + li { border-top: 1px solid var(--separador); }
.tabla-carteles .encabezado { display: none; }
.tabla-carteles a { display: grid; grid-template-columns: minmax(0, 1fr) auto;
                    grid-template-areas: "nombre num" "local estado"; column-gap: .75rem;
                    align-items: center; padding: .6rem 1rem; min-height: 56px;
                    color: var(--texto); text-decoration: none; }
.tabla-carteles a:hover { background: var(--fondo); color: var(--texto); }
.tabla-carteles .nombre-cartel { grid-area: nombre; overflow: hidden; text-overflow: ellipsis;
                                 white-space: nowrap; }
.tabla-carteles .local-cartel { grid-area: local; font-size: .8125rem; overflow: hidden;
                                text-overflow: ellipsis; white-space: nowrap; }
.tabla-carteles .num { grid-area: num; font-family: var(--titulos); font-weight: 800;
                       font-size: 1.125rem; text-align: right; }
.tabla-carteles .estado-cartel { grid-area: estado; text-align: right; }
/* En el celular, el estado solo si no está activo (la fila entra en una línea). */
.tabla-carteles .estado-cartel:has(.estado.ok) { display: none; }

/* ---------- Título de página con acción a la derecha ---------- */
.titulo-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
                 gap: 1rem 1.5rem; margin-bottom: 1.5rem; }
.titulo-pagina h1 { margin-bottom: .25rem; }
.titulo-pagina .boton { margin: 0; }
.bajada { color: var(--suave); font-size: 1.0625rem; margin: 0 0 1.25rem; }
.titulo-pagina .bajada { margin: 0; }

/* ---------- Cuenta: menú lateral (arriba y desplazable en el celular) ---------- */
.con-lateral { display: grid; gap: 1.25rem; }
.menu-lateral { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem;
                scrollbar-width: thin; }
.menu-lateral a { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; min-height: var(--toque);
                  padding: 0 1rem; border-radius: var(--radio-boton); background: var(--blanco);
                  border: 1px solid var(--borde); color: var(--texto); text-decoration: none;
                  font-weight: 500; white-space: nowrap; }
.menu-lateral a:hover { border-color: var(--violeta); color: var(--texto); }
.menu-lateral a.activo { background: var(--violeta); border-color: var(--violeta); color: var(--blanco);
                         font-weight: 700; }
.seccion-cuenta { min-width: 0; }
.seccion-cuenta > h2:first-child { margin-top: 0; }
dl.datos { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: .6rem 1.5rem;
           margin: 0 0 1rem; }
dl.datos dt { font-weight: 700; }
dl.datos dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Planes ---------- */
.ciclo-radio { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
/* Siempre a la derecha (también si baja de renglón): a la par de la última tarjeta. */
.ciclo { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
         gap: .75rem; margin-left: auto; }
.ahorro { display: inline-flex; align-items: center; gap: .35rem; color: var(--ok); font-weight: 700; }
.interruptor { display: inline-flex; padding: 4px; background: var(--blanco);
               border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.interruptor label { margin: 0; min-height: 44px; padding: 0 1.25rem; display: inline-flex;
                     align-items: center; border-radius: 8px; color: var(--suave); cursor: pointer; }
#ciclo-mensual:checked ~ .titulo-pagina label[for="ciclo-mensual"],
#ciclo-anual:checked ~ .titulo-pagina label[for="ciclo-anual"] { background: var(--violeta);
                                                                 color: var(--blanco); }
#ciclo-mensual:focus-visible ~ .titulo-pagina label[for="ciclo-mensual"],
#ciclo-anual:focus-visible ~ .titulo-pagina label[for="ciclo-anual"] {
  outline: 3px solid var(--violeta); outline-offset: 2px; }
.solo-anual { display: none; }
#ciclo-anual:checked ~ .grilla-planes p.solo-anual { display: block; }
#ciclo-anual:checked ~ .grilla-planes span.solo-anual { display: inline; }
#ciclo-anual:checked ~ .grilla-planes .solo-mensual { display: none; }
.grilla-planes { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.plan { display: flex; flex-direction: column; overflow: hidden; background: var(--blanco);
        border: 1px solid var(--borde); border-radius: var(--radio); }
.plan.destacada { border: 2px solid var(--violeta); }
.plan .franja { display: flex; align-items: center; justify-content: center; height: 2.6rem;
                margin: 0; background: var(--violeta); color: var(--blanco); font-family: var(--titulos);
                font-weight: 700; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; }
.plan .franja.vacia { display: none; }
.plan .cuerpo { display: flex; flex-direction: column; padding: 1.3rem; }
.chip { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem;
        padding: .4rem .65rem; border-radius: 999px; font-size: .8125rem; font-weight: 700;
        letter-spacing: .05em; text-transform: uppercase; }
.chip.tuyo { background: var(--violeta-suave); color: var(--tinta); }
.lista > li .chip { align-self: center; flex-shrink: 0; }
.chip.pronto { background: var(--alerta-fondo); color: var(--alerta); }
.chip.reservado { visibility: hidden; }
.plan .nombre-plan { margin: .75rem 0 0; font-family: var(--titulos); font-weight: 800;
                     font-size: 2.353rem; line-height: 1.1; letter-spacing: -.02em; }  /* 40 px */
.plan .frase { margin: .35rem 0 1.1rem; color: var(--suave); }
.plan .precio { margin: 0; font-family: var(--titulos); font-weight: 800; font-size: 2.353rem;
                line-height: 1.1; letter-spacing: -.02em; }
.plan .precio.a-definir { font-size: 1.65rem; color: var(--suave); }
.plan .periodo { margin: .35rem 0 1.25rem; color: var(--suave); }
.plan form { margin: 0; }
.plan .ancho { padding-left: .9rem; padding-right: .9rem; }
.incluye { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--borde); }
.incluye > p { margin: 0 0 .75rem; font-weight: 700; }
.incluye ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.incluye li { display: flex; gap: .65rem; align-items: flex-start; }
.incluye li .ic { color: var(--violeta); margin-top: 1px; }
.nota-planes { margin-top: 2rem; text-align: center; color: var(--suave); }

/* ---------- Ayuda y suscripción ---------- */
.ayuda { display: grid; gap: 1rem; }
.ayuda .tarjeta { margin: 0; }
.ayuda .icono .ic { color: var(--violeta); }
.lista.sin-marco { border: 0; margin: 0; }
.lista.sin-marco > li { padding-left: 0; padding-right: 0; }

/* ---------- Otros ---------- */
details summary { cursor: pointer; color: var(--violeta); margin: .5rem 0; }
.qr { display: block; width: 12rem; height: 12rem; margin: 1rem auto; background: var(--blanco);
      padding: .5rem; border-radius: 8px; }
.lista-codigos { columns: 2; font-family: var(--titulos); font-size: 1.05rem; }
.atribucion { font-family: Roboto, system-ui, sans-serif; font-size: .8rem; color: var(--suave);
              text-align: right; margin: .5rem 0 0; }
table { width: 100%; border-collapse: collapse; background: var(--blanco); font-size: .9375rem; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--separador);
         vertical-align: top; }
th { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
     color: var(--suave); }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9375em; }

/* ---------- Administración (admin.) ----------
   El encabezado en tinta, con el logo claro y la etiqueta "Administración": de un vistazo
   no es el panel del dueño. Reusa las piezas del panel (.cab-derecha, details.usuario,
   .menu-usuario, .quien, .hoja); acá solo cambian los colores, el ancho y el menú plegable.
   Hasta 1279 px las secciones van en "Menú" (un <details>, sin JavaScript): las cinco, con
   sus textos, recién entran a lo ancho desde 1280 (más compactas hasta 1439). */
body.admin .cab { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
                  grid-template-areas: "logo menu" "sello sello"; gap: .6rem 1rem;
                  padding: .75rem 1rem; background: var(--tinta); border-bottom-color: var(--tinta); }
body.admin .cab > a:first-child { grid-area: logo; justify-self: start; }
body.admin nav.principal { display: none; grid-area: nav; }
body.admin .cab-derecha { display: contents; }
body.admin details.usuario { display: none; }
.sello-admin { grid-area: sello; justify-self: start; display: inline-flex; align-items: center;
               gap: .4rem; min-height: 2rem; padding: 0 .75rem; border: 1.5px solid var(--coral);
               border-radius: 999px; color: var(--blanco); font: 700 .8125rem/1 var(--titulos);
               letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.sello-admin .ic { stroke: var(--coral); }
details.menu-admin { grid-area: menu; position: static; }
details.menu-admin > summary { list-style: none; display: inline-flex; align-items: center; gap: .5rem;
                               min-height: 44px; margin: 0; padding: 0 .9rem;
                               border: 1px solid var(--sobre-tinta); border-radius: var(--radio-boton);
                               color: var(--blanco); font-weight: 700; }
details.menu-admin > summary::-webkit-details-marker { display: none; }
details.menu-admin > summary:hover, details.menu-admin[open] > summary {
  background: rgba(255, 255, 255, .1); }
details.menu-admin .hoja { position: absolute; z-index: 30; top: calc(100% + .25rem); left: .5rem;
                           right: .5rem; max-height: calc(100vh - 6rem); overflow-y: auto;
                           padding: .5rem; background: var(--blanco); border: 1px solid var(--borde);
                           border-radius: 14px; box-shadow: 0 16px 40px rgba(23, 19, 58, .22); }
body.admin main { max-width: 75rem; overflow-wrap: anywhere; }

/* El resumen: tres tarjetas con su número; debajo, los pedidos pendientes. */
.resumen { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.resumen .tarjeta { margin: 0; display: flex; flex-direction: column; }
.resumen h2 { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.1765rem; }
.resumen h2 .ic { color: var(--violeta); }
.resumen .cifra { margin: .75rem 0 .5rem; font: 800 2.8rem/1 var(--titulos);
                  font-variant-numeric: tabular-nums; }
.resumen .boton { margin-top: auto; align-self: flex-start; }
.resumen p:has(+ .boton), .resumen ul:has(+ .boton) { margin-bottom: 1.25rem; }
.en-curso { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.en-curso li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.buscador { margin: 0; flex: 1 1 22rem; max-width: 34rem; }
.buscador button { margin: 0; }

/* Tablas en una tarjeta: si no entran (el celular), se desplaza la tabla, no la página.
   position: relative para que el texto oculto (lectores de pantalla) quede adentro. */
.tarjeta.con-tabla { padding-left: 0; padding-right: 0; padding-bottom: .5rem; }
.tarjeta.con-tabla > h2, .tarjeta.con-tabla > p { padding: 0 1.3rem; }
.tabla { position: relative; overflow-x: auto; }
.tabla table { min-width: 40rem; background: none; font-variant-numeric: tabular-nums; }
.tabla th, .tabla td { padding: .8rem 1rem; vertical-align: top; }
.tabla th:first-child, .tabla td:first-child { padding-left: 1.3rem; }
.tabla th:last-child, .tabla td:last-child { padding-right: 1.3rem; }
.tabla th { border-bottom-color: var(--borde); white-space: nowrap; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tr.vencido td { background: var(--error-fondo); }
.tabla .num { text-align: right; }
.tabla .largo { min-width: 14rem; }
.tabla table { overflow-wrap: normal; }
.tabla .json { min-width: 16rem; }
.campos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .6rem; margin: 0;
          font-size: .9375rem; }
.campos dt { color: var(--suave); }
.campos dd { margin: 0; overflow-wrap: anywhere; }
.tabla .json code { display: block; max-width: 22rem; font-size: .9375rem; white-space: pre-wrap;
                    overflow-wrap: anywhere; color: var(--suave); }
.tabla .accion { text-align: right; }
.tabla .nota { margin: .4rem 0 0; font-size: .9375rem; }
.en-celda { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; margin: 0 0 .5rem; }
.en-celda label { margin: 0; flex: 1 1 12rem; font-size: .9375rem; }
.en-celda input { font-size: 1rem; }
.en-celda button, .tabla .boton { margin: 0; min-width: 0; white-space: nowrap; }
/* El Historial (administración): entra en el ancho, sin barra hacia los costados. En el
   celular y la tableta, cada movimiento es una tarjetita con el nombre de cada dato
   adelante; desde 1024 px, una tabla de columnas fijas que corta el texto largo donde haga
   falta (la fecha y los títulos, no: la fecha entra en dos renglones como mucho). */
.tabla table.historial { min-width: 0; }
.tabla .historial td, .tabla .historial th { overflow-wrap: anywhere; }
.tabla .historial .largo, .tabla .historial .json { min-width: 0; }
.tabla .historial .json code { max-width: none; }
/* Antes y Después: cada campo arriba de su valor (un nombre largo, como
   "locales_reactivados", no deja sin lugar al valor en una columna angosta). */
.historial .campos { grid-template-columns: minmax(0, 1fr); gap: 0; }
.historial .campos dd + dt { margin-top: .35rem; }
@media (max-width: 1023px) {
  .historial thead { display: none; }
  .historial tr { display: block; padding: .6rem 0; border-bottom: 1px solid var(--separador); }
  .historial tbody tr:last-child { border-bottom: 0; }
  .tabla table.historial td { display: block; padding: .25rem 1.3rem; border: 0; }
  .historial td:empty { display: none; }
  .historial td::before { content: attr(data-titulo); display: block; font-size: .8125rem;
                          font-weight: 700; color: var(--suave); }
}
/* Alineado con el título de la tarjeta (1.9rem desde 768 px). */
@media (min-width: 768px) and (max-width: 1023px) {
  .tabla table.historial td { padding-left: 1.9rem; padding-right: 1.9rem; }
}
@media (min-width: 1024px) {
  .tabla table.historial { table-layout: fixed; }
  .tabla table.historial th, .tabla table.historial td { padding-left: .6rem;
                                                         padding-right: .6rem;
                                                         white-space: normal; }
  .tabla table.historial th:first-child,
  .tabla table.historial td:first-child { padding-left: 1.9rem; }
  .tabla table.historial th, .tabla table.historial td:first-child { overflow-wrap: normal; }
  .historial th:nth-child(1) { width: 10.5rem; } .historial th:nth-child(2) { width: 15%; }
  .historial th:nth-child(3) { width: 17%; } .historial th:nth-child(4) { width: 22%; }
}
.filtros.tarjeta label { margin-top: 0; }
.filtros .boton-filtro { display: flex; align-items: flex-end; }
.escaneos { columns: 2 9rem; margin: 0; padding-left: 1.25rem; }
.pin-nuevo { font-family: var(--titulos); font-size: 2.2rem; letter-spacing: .2em; }
.llave-nueva { word-break: break-all; }

@media (min-width: 560px) {
  /* Lo de la derecha se achica (y, con la letra grande, la etiqueta baja de renglón). */
  body.admin .cab { grid-template-columns: auto minmax(0, 1fr) minmax(0, auto);
                    grid-template-areas: "logo nav derecha"; }
  body.admin .cab-derecha { grid-area: derecha; display: flex; flex-wrap: wrap-reverse;
                            justify-content: flex-end; align-items: center; gap: .5rem .75rem;
                            padding: .5rem 0; }
  details.menu-admin .hoja { left: auto; right: 1rem; width: 20rem; max-width: calc(100vw - 2rem); }
}
@media (min-width: 768px) {
  body.admin .cab { padding: 0 1.5rem; }
  .resumen { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; }
  .tarjeta.con-tabla > h2, .tarjeta.con-tabla > p { padding: 0 1.9rem; }
  .tabla th:first-child, .tabla td:first-child { padding-left: 1.9rem; }
  .tabla th:last-child, .tabla td:last-child { padding-right: 1.9rem; }
  body.admin main { padding: 2.5rem 2.5rem 4rem; }
}
/* La PC ancha: las secciones arriba (como el panel del dueño) y el círculo con la inicial. */
@media (min-width: 1280px) {
  body.admin .cab { height: 88px; padding: 0 2.4rem; gap: 1.5rem; }
  body.admin nav.principal { display: flex; }
  body.admin nav.principal > a { color: var(--sobre-tinta); }
  body.admin nav.principal > a:hover { background: rgba(255, 255, 255, .1); color: var(--blanco); }
  body.admin nav.principal > a.activo { background: var(--violeta); color: var(--blanco); }
  body.admin details.usuario { display: block; }
  body.admin details.usuario > summary, body.admin details.usuario > summary:hover {
    background: var(--coral); color: var(--tinta); }
  details.menu-admin { display: none; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  body.admin .cab { padding: 0 1.5rem; gap: 1rem; }
  body.admin nav.principal { gap: .2rem; }
  body.admin nav.principal > a { padding: 0 .6rem; }
}

/* ---------- PC ---------- */
@media (min-width: 768px) {
  .cab { padding: 0 3rem; min-height: 72px; gap: 2.5rem; }
  .cab .logo { height: 32px; }   /* decisión de Leo (03/10/2026) */
  main { max-width: 34rem; padding-top: 2.5rem; }
  body.legal main { max-width: 52rem; }
  body.con-menu main { max-width: 66rem; padding: 3rem 2.5rem 4rem; }
  h1 { font-size: 2.353rem; }   /* 40 px */
  h2 { font-size: 1.412rem; }   /* 24 px */
  .tarjeta { padding: 1.9rem; }
  /* El encabezado del panel (88 px): logo y secciones a la izquierda; Planes, Ayuda y el
     círculo con la inicial a la derecha. Tres columnas: el menú del medio se achica (y si no
     entra, se desplaza dentro de su lugar), así nada se sale nunca de la ventana. */
  body.con-menu .cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
                       height: 88px; padding: 0 2.4rem; gap: 1.5rem; }
  /* Las páginas de error (404, 403, 405, 400, 500), con el mismo encabezado. */
  body.pagina-error .cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
                           height: 88px; padding: 0 2.4rem; gap: 1.5rem; }
  nav.principal { position: static; display: flex; gap: .35rem; padding: 0; border: 0;
                  background: none; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  nav.principal > a, .cab-derecha > a {
    flex-direction: row; flex-shrink: 0; gap: .5rem; min-height: 46px; padding: 0 .95rem;
    border-radius: var(--radio-boton); font-size: 1.059rem; font-weight: 500;   /* 18 px */
    color: var(--tinta); text-decoration: none; display: inline-flex; align-items: center;
    white-space: nowrap; }
  nav.principal > a:hover, .cab-derecha > a:hover { background: var(--fondo); color: var(--tinta); }
  nav.principal > a.activo, .cab-derecha > a.activo { background: var(--violeta-suave);
                                                      color: var(--tinta); font-weight: 700; }
  nav.principal > a .ic, .cab-derecha > a .ic { width: 20px; height: 20px; }
  nav.principal > a.activo .ic { background: none; padding: 0; width: 20px; }
  nav.principal details.mas { display: none; }
  .cab-derecha { display: flex; align-items: center; gap: .35rem; }
  details.usuario > summary { display: grid; place-items: center; width: 44px; height: 44px;
                              margin-left: .4rem; border-radius: 50%; background: var(--violeta);
                              color: var(--blanco); font: 700 1.059rem var(--titulos); }
  details.usuario > summary:hover { background: var(--violeta-oscuro); }
  .menu-usuario { position: absolute; right: 0; top: calc(100% + .75rem); z-index: 30;
                  width: 19rem; padding: .5rem;
                  background: var(--blanco); border: 1px solid var(--borde); border-radius: 14px;
                  box-shadow: 0 16px 40px rgba(23, 19, 58, .16); }
  .botones-google { flex-direction: row; flex-wrap: wrap; }
  .filtros .campo-buscar { flex: 2 1 16rem; }
  .filtros button { width: auto; min-width: 0; }
  .tabla-carteles .encabezado { display: grid; column-gap: .75rem; }
  .tabla-carteles .encabezado, .tabla-carteles a {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) 9rem 9rem;
    grid-template-areas: "nombre local num estado"; }
  .tabla-carteles .encabezado { padding: .6rem 1rem; font-size: .8125rem; font-weight: 700;
                                letter-spacing: .04em; text-transform: uppercase; color: var(--suave); }
  .tabla-carteles .encabezado span:first-child { grid-area: nombre; }
  .tabla-carteles .encabezado .num { font: inherit; text-align: right; }
  .tabla-carteles .local-cartel { font-size: .9375rem; }
  .tabla-carteles .estado-cartel { text-align: left; padding-left: 1rem; }
  .tabla-carteles .encabezado span:last-child { padding-left: 1rem; }
  .tabla-carteles .estado-cartel:has(.estado.ok) { display: block; }
  .inicio-lateral .botones-google { flex-direction: column; }
  .con-lateral { grid-template-columns: 16rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .menu-lateral { flex-direction: column; overflow: visible; padding: 0; }
  .menu-lateral a { background: none; border-color: transparent; }
  .menu-lateral a:hover { background: var(--blanco); }
  .menu-lateral a.activo { background: var(--violeta); border-color: var(--violeta); }
  /* El bloque de Planes (título, interruptor y tarjetas) mide lo que las tarjetas, centrado:
     así el título y el interruptor quedan alineados con la primera y la última. */
  .planes { margin: 0 auto; max-width: 46rem; }
  .planes.cantidad-1 { max-width: 24rem; }
  .planes.cantidad-3 { max-width: 70rem; }
  .planes.cantidad-1 .grilla-planes { grid-template-columns: minmax(0, 1fr); }
  .grilla-planes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .planes.cantidad-3 .grilla-planes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan .franja.vacia { display: block; background: none; }
  .plan .cuerpo { padding: 1.9rem; }
  .plan .frase { min-height: 3.1em; }
  .ayuda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .columnas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem;
              align-items: start; }
  .columnas > .ancha { grid-column: span 2; }
  .columnas > * { margin-top: 0; }
  button, .boton { width: auto; min-width: 12rem; }
  button.ancho, .boton.ancho { width: 100%; }
  .enlinea { flex-direction: row; align-items: stretch; }
  .enlinea button { min-width: 0; padding: 0 1.25rem; }
  /* Ingresar, registrarse, el 2FA, la activación...: el logo centrado arriba y el
     formulario en una tarjeta blanca centrada, también en lo vertical. */
  body.acceso { justify-content: center; padding: 2rem 1rem; }
  body.acceso .cab { justify-content: center; min-height: 0; padding: 0; margin-bottom: 1.5rem;
                     background: none; border: 0; }
  body.acceso .cab .logo { height: 40px; }
  body.acceso .cab .etiqueta { display: none; }
  body.acceso main { flex: 0 0 auto; max-width: 30rem; padding: 2.5rem; background: var(--blanco);
                     border: 1px solid var(--borde); border-radius: 24px;
                     box-shadow: 0 12px 40px rgba(23, 19, 58, .08); }
  body.acceso button, body.acceso .boton { width: 100%; min-width: 0; }
  body.acceso .enlinea button { width: auto; }
  body.acceso footer.pie { padding: 1.5rem 0 0; }
}

/* Inicio en la PC ancha: a la izquierda los escaneos y debajo Google y el plan Pro; a la
   derecha la lista. Sin huecos, y la columna izquierda con lugar para que "Ver mis reseñas
   en Google" entre en un renglón. Más angosta, todo en una columna. */
@media (min-width: 1100px) {
  .inicio { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.6fr);
            grid-template-areas: "dest lista" "lateral lista"; gap: 1.5rem; align-items: start; }
  .inicio > .destacado { grid-area: dest; margin: 0; }
  .inicio-lista { grid-area: lista; }
  .inicio-lateral { grid-area: lateral; }
  .inicio-aviso { grid-area: dest; margin: 0; }
  /* Sin permiso para ver números no hay lista: una sola columna. */
  .inicio.sin-numeros { grid-template-columns: minmax(0, 1fr); max-width: 40rem;
                        grid-template-areas: "dest" "lateral"; }
  .inicio-lista > h2:first-child, .inicio-lateral > h2:first-child { margin-top: 0; }
  .inicio-lateral .tarjeta:first-of-type { margin-top: .5rem; }
  .inicio-lateral .botones-google .boton { width: 100%; min-width: 0; }
}

/* PC angosta: Planes y Ayuda quedan como íconos (el texto sigue ahí para los lectores de
   pantalla) y el menú, más compacto. */
@media (min-width: 768px) and (max-width: 1099px) {
  body.con-menu .cab { padding: 0 1.25rem; gap: 1rem; }
  body.pagina-error .cab { padding: 0 1.25rem; gap: 1rem; }
  nav.principal > a { padding: 0 .65rem; }
  .cab-derecha > a { padding: 0 .7rem; }
  .cab-derecha .texto { position: absolute; width: 1px; height: 1px; overflow: hidden;
                        clip: rect(0 0 0 0); white-space: nowrap; }
}