/* ==========================================================================
   RAPHASOFT MIQUNA — Sistema de diseño
   Paleta extraída del logo oficial. Minimalista, técnico, con aire.
   Sin frameworks: CSS propio, ~10 KB, carga instantánea.
   ========================================================================== */

:root {
  /* --- Marca (colores exactos del logo) --- */
  --marino: #0e4274;
  --marino-900: #072a4d;
  --marino-700: #0e4274;
  --marino-500: #1b5c96;
  --marino-300: #4a7093;
  --marino-100: #d9e1e8;
  /* La superficie de las secciones de la portada.
     Es el mismo azul de la marca, aclarado lo justo para separarse de la
     cabecera y del pie sin dejar de pertenecer a la misma familia: entre
     `--marino-700` (#0e4274) y `--marino-500` (#1b5c96). */
  --marino-placa: #14507f;

  --turquesa: #36b9c2;
  --turquesa-600: #2596a0;
  --turquesa-400: #5accd3;
  --turquesa-100: #e0f6f8;

  /* --- Colores del LOGOTIPO --- */
  /* Estos seis existen aparte de los de arriba, y la separación es el punto.
   *
   * El logo se dibujaba con `--marino-700`, `--turquesa-600` y `--gris-500`,
   * que son tokens de TEMA: `apariencia.css` los redefine con cada acento.
   * Elegir el acento marino ponía el logo en #0e4274 sobre la barra lateral,
   * que es #0e4274: contraste 1,00. El logo no se veía tenue, no estaba.
   * Y con cualquier otro acento la palabra SOFT dejaba de ser turquesa, así
   * que la marca cambiaba de color según una preferencia del usuario.
   *
   * La identidad no es una preferencia. Estos valores no los redefine ningún
   * tema ni ningún acento: son los del logo original y se quedan como están.
   */
  --marca-azul: #0e4274;
  --marca-turquesa: #2596a0;
  --marca-apunte: #6d8ba8;
  /* La variante monocroma clara, para las superficies marino u oscuras. */
  --marca-clara: #ffffff;
  --marca-turquesa-clara: #5accd3;
  --marca-apunte-claro: #d9e1e8;
  /* Texto sobre el turquesa claro de la marca. No es `--tinta-sobre-acento`:
     aquel cambia con el acento elegido y este acompaña a un color fijo. */
  --tinta-sobre-marca: #06303a;

  /* --- Neutros --- */
  --blanco: #ffffff;
  --nieve: #f7f9fb;
  --niebla: #eef2f6;
  --borde: #dde5ec;
  --gris-500: #5b7590;   /* 4,77 sobre blanco; en #6d8ba8 daba 3,56 */
  --gris-700: #46617c;
  --tinta: #14202c;

  /* Color de los títulos y las cifras grandes.
   *
   * Existe porque `--marino-900` hacía dos trabajos incompatibles: era el
   * fondo de la barra lateral Y el color de todo encabezado. Mientras el
   * sistema fue solo claro nadie lo notó; al agregar el tema oscuro, invertir
   * la escala arreglaba los títulos y rompía la barra, y no invertirla dejaba
   * las cifras del panel con un contraste de 1.21 sobre 4.5 exigido: azul
   * marino sobre fondo casi negro, prácticamente ilegibles.
   *
   * Separar el papel de texto en su propio token permite que cada tema lo
   * ajuste sin tocar los fondos de marca. */
  --titulo: #072a4d;

  /* Texto sobre una superficie que es marino SIEMPRE: la barra lateral de
   * los paneles, la franja de la vista previa.
   *
   * Existe por el mismo motivo que `--titulo`. `--blanco` significa dos
   * cosas —«la superficie de la página» y «texto sobre fondo oscuro»— y en
   * tema oscuro la primera se invierte mientras la segunda no debe hacerlo.
   * Sin separarlas, el enlace activo de la navegación quedaba en azul casi
   * negro sobre el marino de la barra: invisible. */
  --sobre-marino: #ffffff;

  /* Texto SECUNDARIO sobre marino: el pie del sitio, los apuntes de la
     portada. `--marino-300` es su equivalente para fondo claro y sobre
     el marino del pie se queda en 2,75. */
  --apunte-sobre-marino: #86a4c0;

  /* --- Semánticos --- */
  --exito: #1f9d6b;
  --exito-suave: #e6f6ef;
  --alerta: #d99413;
  --alerta-suave: #fdf4e3;
  --peligro: #cf4444;
  --peligro-suave: #fbeaea;

  /* Tinta de las etiquetas de estado.
     El color semántico sirve para el borde y el icono, donde basta con
     distinguirse. Como TEXTO sobre su propio fondo suave se quedaba
     entre 2,35 y 3,99, y una etiqueta dice justamente lo que hay que
     leer: «Crítico», «Pendiente», «6 unidades». Se separa el papel de
     texto, por el mismo motivo que existen `--titulo` y
     `--sobre-marino`. */
  /* Tinta sobre el fondo suave del ACENTO (`--turquesa-100`).
   *
   * Existe porque `--turquesa-100` es un token de acento y no de tema: los
   * cinco acentos lo redefinen y ningún tema lo hace, así que es SIEMPRE un
   * fondo claro. El texto encima venía de tokens que sí cambian con el tema
   * —`--titulo`, `--tinta`—, y en oscuro se volvían casi blancos: el rótulo
   * del local en el que se está operando quedaba en 1,02 sobre su propio
   * fondo. También `--turquesa-600` se quedaba corto en claro: 3,15.
   *
   * Al ser el fondo siempre claro, la tinta tiene que ser siempre oscura.
   * Cada acento trae la suya para no poner un verde azulado sobre violeta. */
  --tinta-sobre-suave: #14595f;   /* 7,1 sobre --turquesa-100 (era 3,15) */

  /* Tinta del acento sobre la SUPERFICIE DE LA PÁGINA.
   *
   * `--turquesa-600` se usaba como color de texto —el rótulo de sección, la
   * leyenda de un grupo de campos, la inicial del perfil— y es un token de
   * acento: no sabe nada del tema. Con el acento marino y el tema oscuro
   * quedaba azul marino sobre el casi negro de la tarjeta: contraste 1,72.
   *
   * `--acento-tinta` es el mismo papel resuelto por separado, y por eso son
   * dos tokens: `--acento-tinta-claro` guarda el valor para fondo claro y no
   * lo pisa nadie, de modo que el tema «según el equipo» puede volver a él
   * cuando el sistema operativo pide claro. */
  --acento-tinta-claro: #1c7d86;   /* 4,86 sobre blanco; #2596a0 daba 3,53 */
  --acento-tinta: var(--acento-tinta-claro);

  --exito-tinta: #10704a;    /* 5,47 sobre --exito-suave   (era 3,08) */
  --alerta-tinta: #8a5c00;   /* 5,32 sobre --alerta-suave  (era 2,35) */
  --peligro-tinta: #a82f2f;  /* 5,81 sobre --peligro-suave (era 3,99) */

  /* --- Derivados de superficie y profundidad ---
     Viven acá porque este archivo es la única fuente autorizada de valores
     literales; el resto del CSS los consume por variable. */
  --superficie-velada: rgba(255, 255, 255, 0.86);  /* cabecera translúcida */
  --azul-bruma: #eaf1f8;                            /* halo frío del hero */
  --tinta-sobre-acento: #06303a;                    /* texto sobre turquesa */
  --sombra-acento: rgba(54, 185, 194, 0.16);        /* realce del plan destacado */
  --linea-sobre-oscuro: rgba(255, 255, 255, 0.12);  /* separador en fondo marino */
  --borde-sobre-oscuro: rgba(255, 255, 255, 0.35);  /* contorno de botón sobre marino */
  --reticula-sobre-oscuro: rgba(255, 255, 255, 0.05);
  /* Tarjeta sobre la placa: un velo claro, no un bloque blanco. Con
     tarjetas blancas el blanco seguiría dominando la sección y el
     cambio de fondo no habría servido de nada. */
  --velo-sobre-placa: rgba(255, 255, 255, 0.07);
  --mascara-opaca: #000;                            /* solo para mask-image */
  --senal-coral: #ff9f9f;                           /* punto de la maqueta */

  /* --- Tipografía --- */
  --fuente: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fuente-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala tipográfica fluida */
  --txt-xs: 0.78rem;
  --txt-sm: 0.875rem;
  --txt-base: 1rem;
  --txt-lg: 1.125rem;
  --txt-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --txt-2xl: clamp(1.6rem, 1.3rem + 1.3vw, 2.25rem);
  --txt-3xl: clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem);

  /* --- Espaciado y forma --- */
  --sp-seccion: clamp(3.5rem, 2.5rem + 4vw, 7rem);
  --radio-sm: 6px;
  --radio: 10px;
  --radio-lg: 16px;

  --sombra-sm: 0 1px 2px rgba(14, 66, 116, 0.06);
  --sombra: 0 4px 16px rgba(14, 66, 116, 0.08);
  --sombra-lg: 0 12px 40px rgba(14, 66, 116, 0.12);

  --transicion: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ancho: 1140px;
}

/* --------------------------------------------------------------- reset --- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

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

/* Desplazamiento suave SOLO al ir a un ancla, no en cada giro de rueda.
 *
 * `scroll-behavior: smooth` en el `html` parece inofensivo y no lo es: hace
 * que el navegador ANIME todo desplazamiento, incluido el de la rueda del
 * ratón. Dos consecuencias, y la segunda es la grave:
 *
 *   1. Cada giro de rueda tarda en llegar a su sitio, y se siente lento.
 *   2. Durante esa animación, los elementos `sticky` —la barra lateral y la
 *      cabecera del panel— se recolocan cuadro a cuadro. En algunas
 *      combinaciones de navegador y tarjeta gráfica el área principal no se
 *      repinta a tiempo y queda en blanco, con trozos de la cabecera
 *      dibujados donde no van.
 *
 * `:has(:target)` limita la animación a lo único para lo que hace falta:
 * cuando se pulsa un enlace a un ancla (`/#planes`) y hay que llevar la
 * página hasta esa sección. El resto del tiempo el desplazamiento es el
 * nativo del navegador, que nunca produce ese artefacto.
 */
@media (prefers-reduced-motion: no-preference) {
  html:has(:target) { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--fuente);
  font-size: var(--txt-base);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--marino-500); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--turquesa-600); }

h1, h2, h3, h4 {
  line-height: 1.18;
  letter-spacing: -0.021em;
  font-weight: 700;
  color: var(--titulo);
  text-wrap: balance;
}
h1 { font-size: var(--txt-3xl); }
h2 { font-size: var(--txt-2xl); }
h3 { font-size: var(--txt-xl); }
p  { text-wrap: pretty; }

:focus-visible {
  outline: 2.5px solid var(--turquesa);
  outline-offset: 3px;
  border-radius: var(--radio-sm);
}

/* ------------------------------------------------------------- layout --- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2rem);
}

.seccion { padding-block: var(--sp-seccion); }
.seccion--nieve { background: var(--nieve); }
.seccion--marino {
  background: linear-gradient(160deg, var(--marino-900), var(--marino-700) 65%);
  color: var(--marino-100);
}
.seccion--marino h1,
.seccion--marino h2,
.seccion--marino h3 { color: var(--sobre-marino); }

.centrado { text-align: center; }
.medido { max-width: 62ch; }
.centrado .medido { margin-inline: auto; }

/* --------------------------------------------------------------- texto --- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--txt-xs);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acento-tinta);
  margin-bottom: 0.85rem;
}
.kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--turquesa);
  border-radius: 2px;
}
.seccion--marino .kicker { color: var(--turquesa-400); }

.entradilla {
  font-size: var(--txt-lg);
  color: var(--gris-700);
  margin-top: 1rem;
}
.seccion--marino .entradilla { color: var(--marino-100); }

.apunte { font-size: var(--txt-sm); color: var(--gris-500); }

/* -------------------------------------------------------------- botones --- */
.btn {
  --btn-bg: var(--marino-700);
  /* `--sobre-marino` y no `--blanco`, por lo que dice el comentario del token:
     `--blanco` significa «la superficie de la página» y el tema oscuro la
     invierte a #101a24. La cara del botón sigue siendo marino en los dos
     temas, así que con `--blanco` el texto se volvía casi negro sobre azul
     marino —contraste 1,72— y en tema oscuro TODOS los botones del sistema
     quedaban sin etiqueta legible. Se midió en el panel y en el sitio. */
  --btn-fg: var(--sobre-marino);
  --btn-borde: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.5rem;
  font: inherit;
  font-size: var(--txt-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-borde);
  border-radius: var(--radio);
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion),
              background var(--transicion), color var(--transicion);
  white-space: nowrap;
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--sombra);
}
.btn:active { transform: translateY(0); }

/* El color del texto sale de `--tinta-sobre-acento`, no de un literal.
 *
 * Estuvo escrito #06303a, que es el texto correcto sobre el turquesa de la
 * marca y solo sobre ese. `apariencia.css` define cinco acentos y da a cada
 * uno su propio `--tinta-sobre-acento` justamente por esto —blanco sobre el
 * violeta y sobre el marino, casi negro sobre el ámbar—, pero el botón nunca
 * llegó a leer esa variable. Con el acento marino el botón quedaba en 2,02
 * sobre el mínimo de 4,5, y con el violeta en 2,63: el botón principal de
 * cada pantalla, ilegible, en dos de las cinco variantes que el sistema
 * ofrece elegir. */
.btn--acento { --btn-bg: var(--turquesa); --btn-fg: var(--tinta-sobre-acento); }
.btn--acento:hover { --btn-bg: var(--turquesa-400); }

.btn--fantasma {
  --btn-bg: transparent;
  /* `--titulo` y no `--marino-700`: el primero lo ajusta cada tema y el
     segundo es un color de marca fijo. En tema oscuro quedaba azul
     marino sobre el casi negro de la tarjeta —contraste 1,57— y el
     botón se quedaba sin etiqueta legible. */
  --btn-fg: var(--titulo);
  --btn-borde: var(--borde);
}
.btn--fantasma:hover { --btn-borde: var(--marino-300); --btn-bg: var(--nieve); }

.seccion--marino .btn--fantasma {
  --btn-fg: var(--sobre-marino);
  --btn-borde: var(--borde-sobre-oscuro);
}
.seccion--marino .btn--fantasma:hover { --btn-bg: rgba(255, 255, 255, 0.1); }

.btn--grande { padding: 1rem 1.9rem; font-size: var(--txt-base); }

/* Un botón no puede ser más ancho que donde vive.
   `white-space: nowrap` evita que una etiqueta corta se parta a la mitad en
   escritorio, pero en un teléfono un botón como «Registrar el pago y emitir
   el recibo» mide 310 px dentro de una caja de 226: desbordaba y arrastraba
   la página entera de costado. Medido en el panel de pagos a 320 px. */
.btn { max-width: 100%; }

@media (max-width: 30rem) {
  .btn {
    white-space: normal;
    text-align: center;
  }
}
.btn--bloque { width: 100%; }

/* ------------------------------------------------------------ etiquetas --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  font-size: var(--txt-xs);
  font-weight: 600;
  border-radius: 999px;
  background: var(--niebla);
  color: var(--gris-700);
  white-space: nowrap;
}

/* `.chip` hace dos trabajos: es una ETIQUETA de estado —«Activa»,
   «Vencida»— y es también un CONTROL, cuando lleva enlace, botón o una
   casilla dentro: los filtros de categoría del punto de venta, el estado de
   las solicitudes, el método de pago al cobrar.
   
   Como etiqueta, 30 px de alto están bien: no se pulsa. Como control en un
   teléfono, no: son los botones más usados de la pantalla de cobro y hay que
   acertarlos con el pulgar mientras se atiende a alguien. */
@media (max-width: 40rem) {
  a.chip,
  button.chip,
  label.chip {
    min-height: 44px;
    padding-inline: 0.9rem;
  }
}
.chip--exito   { background: var(--exito-suave);   color: var(--exito-tinta); }
.chip--alerta  { background: var(--alerta-suave);  color: var(--alerta-tinta); }
.chip--peligro { background: var(--peligro-suave); color: var(--peligro-tinta); }
.chip--acento  { background: var(--turquesa-100);  color: var(--tinta-sobre-suave); }
.chip--marino  { background: var(--marino-100);    color: var(--marino-700); }

.chip__punto {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}

/* -------------------------------------------------------------- tarjetas --- */
.rejilla {
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  transition: transform var(--transicion), box-shadow var(--transicion),
              border-color var(--transicion);
}
.tarjeta--interactiva:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-lg);
  border-color: var(--turquesa-400);
}

.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--turquesa-100);
  color: var(--marino-700);
  margin-bottom: 1.1rem;
}
.tarjeta__icono svg { width: 23px; height: 23px; }

/* ------------------------------------------------------------ formularios --- */
.campo { margin-bottom: 1.15rem; }

.campo__etiqueta {
  display: block;
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--titulo);
  margin-bottom: 0.4rem;
}
.campo__requerido { color: var(--peligro); margin-left: 2px; }

.campo__control {
  width: 100%;
  padding: 0.72rem 0.9rem;
  font: inherit;
  font-size: var(--txt-sm);
  color: var(--tinta);
  background: var(--blanco);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo__control:focus {
  outline: none;
  border-color: var(--turquesa);
  box-shadow: 0 0 0 3.5px var(--turquesa-100);
}
.campo__control::placeholder { color: #9fb2c4; }
.campo__control:disabled { background: var(--niebla); cursor: not-allowed; }

.campo__ayuda { font-size: var(--txt-xs); color: var(--gris-500); margin-top: 0.35rem; }
.campo__error { font-size: var(--txt-xs); color: var(--peligro); margin-top: 0.35rem; font-weight: 500; }
.campo__control--error { border-color: var(--peligro); }

.campo-fila {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

/* ---------------------------------------------------------------- avisos --- */
.aviso {
  display: flex;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radio);
  border-left: 3.5px solid var(--marino-300);
  background: var(--niebla);
  font-size: var(--txt-sm);
}
.aviso--exito   { background: var(--exito-suave);   border-left-color: var(--exito); }
.aviso--alerta  { background: var(--alerta-suave);  border-left-color: var(--alerta); }
.aviso--peligro { background: var(--peligro-suave); border-left-color: var(--peligro); }
.aviso__icono { flex-shrink: 0; margin-top: 1px; }

/* El apunte dentro de un aviso cae sobre el fondo tintado del aviso, no sobre
   blanco: `--gris-500` pasa de 4,77 a 4,25. Un token más oscuro, que ya
   existe, lo devuelve por encima del mínimo sin mover el gris general. */
.aviso .apunte { color: var(--gris-700); }

/* ---------------------------------------------------------------- tablas --- */
.tabla-scroll { overflow-x: auto; border-radius: var(--radio); border: 1px solid var(--borde); }

.tabla { width: 100%; border-collapse: collapse; font-size: var(--txt-sm); background: var(--blanco); }
.tabla th {
  text-align: left;
  padding: 0.8rem 1rem;
  font-size: var(--txt-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--gris-700);
  background: var(--nieve);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
.tabla td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--niebla); }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr { transition: background var(--transicion); }
.tabla tbody tr:hover { background: var(--nieve); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ logo --- */
/* Vive en la hoja base porque el componente del logo se usa en las tres
   superficies: sitio público, sistema del cliente y panel del propietario.
   Una hoja que solo carga una de ellas dejaría a las otras dos con un SVG
   sin dimensionar, que se estira hasta el ancho de su contenedor. */
/* Las tres partes del logo se pintan desde variables locales al componente,
   no desde tokens de tema. Una superficie oscura cambia las tres a la vez
   —con `.logo--claro` o redefiniéndolas— en lugar de acordarse de cada
   `color:` por separado, que es como se perdió el trazo del circuito: las
   letras se corregían y el SVG se quedaba con el color de la superficie
   clara. */
.logo {
  display: inline-flex; align-items: center; gap: 0.6rem;
  --logo-primario: var(--marca-azul);
  --logo-acento: var(--marca-turquesa);
  --logo-apunte: var(--marca-apunte);
}

/* Variante monocroma clara: la única permitida sobre fondo marino u oscuro. */
.logo--claro {
  --logo-primario: var(--marca-clara);
  --logo-acento: var(--marca-turquesa-clara);
  --logo-apunte: var(--marca-apunte-claro);
}

/* El tamaño sube respecto del original —34 px de marca y 1,06 rem de texto—
   porque el logo se leía pequeño en la cabecera. Al quitar la bajada
   «MIQUNA» el conjunto además perdió altura, así que crecer no le quita
   sitio a nada: ocupa aproximadamente lo mismo que antes. */
/* El icono crece por encima del texto: 46 → 58 px, con el texto en el
   mismo cuerpo. El monitor con el circuito es la parte reconocible de
   la marca y quedaba subordinado a las letras. */
.logo__marca { width: 58px; height: 49px; color: var(--logo-primario); flex-shrink: 0; }
.logo__texto { display: flex; flex-direction: column; line-height: 0.98; }
.logo__rapha,
.logo__soft {
  font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em;
}
.logo__rapha { color: var(--logo-primario); }
.logo__soft  { color: var(--logo-acento); }

/* -------------------------------------------- agrupaciones de formulario --- */
/* Viven en la hoja base porque las usan las TRES superficies: el registro
   del sitio público, el formulario de compras del cliente y las pantallas
   de apariencia y funciones experimentales del panel.

   Estuvieron en `web.css`, que solo carga el sitio público: en los paneles
   esas agrupaciones se dibujaban sin estilo —sin la línea de la leyenda,
   sin separación entre bloques— y nadie lo notó hasta medirlo. */
.formulario-panel__titulo { margin-bottom: 0.4rem; }
.grupo-campos {
  border: none; padding: 0; margin: 0 0 1.9rem;
}
.grupo-campos__leyenda {
  font-size: var(--txt-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--acento-tinta);
  padding: 0; margin-bottom: 1.1rem;
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
}
.grupo-campos__leyenda::after {
  content: ""; flex: 1; height: 1px; background: var(--borde);
}
.pie__lista { list-style: none; padding: 0; display: grid; gap: 0.55rem; }

/* ------------------------------------------------------------ utilidades --- */
.pila { display: flex; flex-direction: column; }
.pila--sm { gap: 0.5rem; }
.pila--md { gap: 1rem; }
.pila--lg { gap: 1.75rem; }

.fila { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.fila--entre { justify-content: space-between; }
.fila--centro { justify-content: center; }

.mono { font-family: var(--fuente-mono); font-size: 0.92em; }
.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- ocultar --- */
/* El atributo `hidden` debe ganar SIEMPRE.
 *
 * El navegador trae `[hidden] { display: none }`, pero es una regla suya y
 * cualquier `display` que escribamos nosotros la vence. Bastaba con que una
 * clase declarara `display: flex` para que el atributo dejara de hacer
 * efecto sin que nada avisara.
 *
 * Ocurrió dos veces: el menú móvil quedaba desplegado en escritorio tapando
 * la portada, y el contador de cada producto mostraba un «0» permanente.
 * Los dos síntomas, una sola causa.
 *
 * Esta regla la cierra para todo el sistema, presente y futuro. Va con
 * `!important` porque tiene que vencer a cualquier `display` que se escriba
 * después: es la única excepción justificada en todo el proyecto, y el
 * motivo es exactamente ese —sin ella, la regla no serviría para nada—.
 */
[hidden] {
  display: none !important;
}