/*
 * omeigocontrol · hoja de estilos única (D10: marca Omeigo).
 * Móvil primero: letra base de 16 px, botones de 44 px como mínimo, sin tablas anchas.
 * Paleta cerrada: tinta #181818 · piedra #8A8780 · línea #D9D5CC · papel #F4F1EA · blanco.
 * La piedra sobre papel da 3,2:1: solo para bordes y elementos decorativos; el texto gris pequeño usa
 * --c-texto-suave (≥ 4,5:1 en los dos temas). Sin CDN: las fuentes se sirven desde /assets/fuentes/.
 * Nada en línea (la CSP no admite style-src 'unsafe-inline').
 */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("fuentes/HankenGrotesk-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fuentes/HankenGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fuentes/HankenGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Reserva medida para que el texto no salte al cargar la fuente (brand.json). */
@font-face {
  font-family: "Hanken Reserva";
  src: local("Arial");
  size-adjust: 99.41%;
  ascent-override: 100.59%;
  descent-override: 30.48%;
  line-gap-override: 0%;
}

/* ───────────────────────────── Tokens ───────────────────────────── */
:root {
  color-scheme: light;
  --c-tinta: #181818;
  --c-piedra: #8A8780;
  --c-linea: #D9D5CC;
  --c-papel: #F4F1EA;
  --c-blanco: #FFFFFF;

  --c-fondo: var(--c-papel);
  --c-superficie: var(--c-blanco);
  --c-texto: var(--c-tinta);
  --c-texto-suave: #5C5952;      /* 5,9:1 sobre papel */
  --c-borde: var(--c-linea);
  --c-borde-fuerte: var(--c-piedra);
  --c-foco: #1F4FD1;
  --c-primario: var(--c-tinta);
  --c-primario-texto: var(--c-papel);

  --c-aviso-fondo: #F6DE7E;      /* franja PRUEBAS: amarilla, texto en tinta */
  --c-aviso-borde: #C9A62B;
  --c-peligro: #A8231A;
  --c-peligro-fondo: #F8E1DE;
  --c-naranja: #9A4A10;
  --c-naranja-fondo: #F9E6D6;
  --c-exito: #24613A;
  --c-exito-fondo: #DFEEE3;
  --c-subida: #17693A;           /* la flecha de subida y la cifra «después» de Informes Omeigo: 6,7:1 sobre blanco, 6:1 sobre papel */
  --c-info: #274B8F;
  --c-info-fondo: #E1E8F5;

  --f-texto: "Hanken Grotesk", "Hanken Reserva", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-normal: 400;
  --fw-fuerte: 500;
  --fw-titular: 300;

  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1rem;
  --t-l: 1.25rem;
  --t-xl: 1.75rem;

  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;

  --r-s: 6px;
  --r-m: 10px;
  --r-l: 14px;
  --sombra: 0 1px 2px rgb(24 24 24 / 0.06), 0 2px 8px rgb(24 24 24 / 0.04);
  --toque: 44px;
  --menu-alto: 64px;
  --menu-ancho: 220px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-fondo: #161615;
    --c-superficie: #201F1D;
    --c-texto: #F4F1EA;
    --c-texto-suave: #BDB8AE;     /* 8,6:1 sobre el fondo oscuro */
    --c-borde: #3A3935;
    --c-borde-fuerte: #6E6B64;
    --c-foco: #8FB0FF;
    --c-primario: #F4F1EA;
    --c-primario-texto: #181818;
    --c-aviso-fondo: #5A4A10;
    --c-aviso-borde: #C9A62B;
    --c-peligro: #FF9C92;
    --c-peligro-fondo: #4A1C18;
    --c-naranja: #FFB27A;
    --c-naranja-fondo: #45280F;
    --c-exito: #8FD6A5;
    --c-exito-fondo: #1B3624;
    --c-subida: #8FD6A5;
    --c-info: #A9C2FF;
    --c-info-fondo: #1C2A45;
    --sombra: 0 1px 2px rgb(0 0 0 / 0.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-fondo: #161615;
  --c-superficie: #201F1D;
  --c-texto: #F4F1EA;
  --c-texto-suave: #BDB8AE;
  --c-borde: #3A3935;
  --c-borde-fuerte: #6E6B64;
  --c-foco: #8FB0FF;
  --c-primario: #F4F1EA;
  --c-primario-texto: #181818;
  --c-aviso-fondo: #5A4A10;
  --c-aviso-borde: #C9A62B;
  --c-peligro: #FF9C92;
  --c-peligro-fondo: #4A1C18;
  --c-naranja: #FFB27A;
  --c-naranja-fondo: #45280F;
  --c-exito: #8FD6A5;
  --c-exito-fondo: #1B3624;
  --c-subida: #8FD6A5;
  --c-info: #A9C2FF;
  --c-info-fondo: #1C2A45;
  --sombra: 0 1px 2px rgb(0 0 0 / 0.4);
}

/* ───────────────────────────── Base ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--f-texto);
  font-size: var(--t-m);
  font-weight: var(--fw-normal);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--e-3); }
h1 { font-size: var(--t-xl); font-weight: var(--fw-titular); letter-spacing: -0.01em; }
h2 { font-size: var(--t-l); font-weight: var(--fw-fuerte); }
h3 { font-size: var(--t-m); font-weight: var(--fw-fuerte); }
p { margin: 0 0 var(--e-3); }
strong, b { font-weight: var(--fw-fuerte); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--c-foco); outline-offset: 2px; border-radius: var(--r-s); }
img, svg { max-width: 100%; }
.icono { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }
.oculto {
  /* !important: un input con .oculto no puede heredar el width: 100% ni el padding de los campos (la página se
     salía de lado en el móvil, revisión del 25/09) */
  position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important;
  border: 0 !important; margin: -1px !important; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.saltar {
  position: absolute; left: var(--e-2); top: -100px; z-index: 50;
  background: var(--c-primario); color: var(--c-primario-texto); padding: var(--e-2) var(--e-3); border-radius: var(--r-s);
}
.saltar:focus { top: var(--e-2); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ───────────────────────────── Maqueta del panel ───────────────────────────── */
.panel { min-height: 100vh; padding-bottom: calc(var(--menu-alto) + env(safe-area-inset-bottom, 0px)); }

.cabecera {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "marca acciones" "buscador buscador";
  gap: var(--e-2) var(--e-3);
  align-items: center;
  padding: var(--e-3) var(--e-4);
  background: var(--c-fondo);
  border-bottom: 1px solid var(--c-borde);
}
.marca { grid-area: marca; display: inline-flex; align-items: center; gap: var(--e-2); text-decoration: none; margin: 0; }
.marca__simbolo { width: 1.05rem; height: 1.85rem; }
.marca__nombre { font-size: 1.25rem; letter-spacing: -0.03em; }
.marca__producto { font-size: var(--t-s); color: var(--c-texto-suave); }
.cabecera__acciones { grid-area: acciones; display: flex; align-items: center; gap: var(--e-2); }
.cabecera__acciones form { margin: 0; }
.buscador { grid-area: buscador; position: relative; margin: 0; }
.buscador__icono { position: absolute; left: var(--e-3); top: 50%; transform: translateY(-50%); color: var(--c-texto-suave); pointer-events: none; }
.cabecera .buscador input[type="search"] { padding-left: 2.5rem; }

.franjas { display: grid; gap: 1px; }
.franja {
  display: flex; gap: var(--e-2); align-items: flex-start;
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--c-borde);
  font-size: var(--t-s);
}
.franja p { margin: 0; }
.franja a { font-weight: var(--fw-fuerte); }
.franja .icono { margin-top: 0.15em; }
.franja--aviso { background: var(--c-aviso-fondo); color: var(--c-texto); border-color: var(--c-aviso-borde); }
.franja--peligro { background: var(--c-peligro); color: #FFFFFF; }
.franja--naranja { background: var(--c-naranja-fondo); color: var(--c-naranja); }
.franja--exito { background: var(--c-exito-fondo); color: var(--c-exito); }
.franja--info { background: var(--c-info-fondo); color: var(--c-info); }
:root[data-theme="dark"] .franja--peligro { color: #181818; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .franja--peligro { color: #181818; } }

.navegacion {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  height: calc(var(--menu-alto) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--c-superficie);
  border-top: 1px solid var(--c-borde);
}
.navegacion ul { display: flex; height: var(--menu-alto); margin: 0; padding: 0; list-style: none; }
.navegacion li { flex: 1; }
.navegacion a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 100%; min-height: var(--toque);
  font-size: var(--t-xs); color: var(--c-texto-suave); text-decoration: none;
}
.navegacion a .icono { width: 1.5rem; height: 1.5rem; }
.navegacion a[aria-current="page"] { color: var(--c-texto); font-weight: var(--fw-fuerte); }
.navegacion a[aria-current="page"] .icono { stroke-width: 2.2; }

.contenido { width: 100%; max-width: 60rem; margin: 0 auto; padding: var(--e-5) var(--e-4) var(--e-6); }
.contenido:focus { outline: none; }
.contenido__titulo { margin-bottom: var(--e-5); }
.pie { padding: var(--e-4); text-align: center; font-size: var(--t-xs); color: var(--c-texto-suave); }

@media (min-width: 900px) {
  .panel {
    display: grid; padding-bottom: 0;
    grid-template-columns: var(--menu-ancho) 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "cabecera cabecera" "franjas franjas" "menu contenido" "menu pie";
  }
  .cabecera { grid-area: cabecera; grid-template-columns: var(--menu-ancho) minmax(0, 32rem) 1fr; grid-template-areas: "marca buscador acciones"; }
  .cabecera__acciones { justify-self: end; }
  .franjas { grid-area: franjas; }
  .navegacion { grid-area: menu; position: sticky; top: 0; height: auto; align-self: start; background: transparent; border: 0; padding: var(--e-4) var(--e-3); }
  .navegacion ul { flex-direction: column; height: auto; gap: 2px; }
  .navegacion a { flex-direction: row; justify-content: flex-start; gap: var(--e-3); padding: 0 var(--e-3); font-size: var(--t-m); border-radius: var(--r-m); color: var(--c-texto); }
  .navegacion a:hover { background: var(--c-superficie); }
  .navegacion a[aria-current="page"] { background: var(--c-superficie); box-shadow: var(--sombra); }
  .contenido { grid-area: contenido; margin: 0; padding: var(--e-5) var(--e-6) var(--e-6); }
  .pie { grid-area: pie; text-align: left; padding-left: var(--e-6); }
}

/* ───────────────────────────── Componentes ───────────────────────────── */

/* Botón */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--toque); padding: 0 var(--e-4);
  font: inherit; font-weight: var(--fw-fuerte); line-height: 1.2; text-align: center; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--r-m); cursor: pointer;
  background: var(--c-superficie); color: var(--c-texto);
}
.boton:disabled, .boton[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.boton--primario { background: var(--c-primario); color: var(--c-primario-texto); }
.boton--secundario { border-color: var(--c-borde-fuerte); background: transparent; }
.boton--peligro { background: var(--c-peligro); color: #FFFFFF; }
:root[data-theme="dark"] .boton--peligro { color: #181818; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .boton--peligro { color: #181818; } }
.boton--pequeno { min-height: var(--toque); padding: 0 var(--e-3); font-size: var(--t-s); } /* 44 px para el dedo (§9.0) */
.boton--icono { min-width: var(--toque); padding: 0; background: transparent; }
.boton--ancho { width: 100%; }
@media (max-width: 420px) { .cabecera .boton--pequeno span { display: none; } }

/* Tarjeta */
.tarjeta {
  background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-l);
  padding: var(--e-4); box-shadow: var(--sombra); margin-bottom: var(--e-3);
}
.tarjeta__titulo { margin-bottom: var(--e-2); }
.tarjeta__texto { color: var(--c-texto); }
.tarjeta__detalle { font-size: var(--t-s); color: var(--c-texto-suave); }
.tarjeta__botones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.tarjeta--urgente { border-left: 4px solid var(--c-peligro); }
.tarjeta--prueba { border: 1px dashed var(--c-aviso-borde); }

/* Sección */
.seccion { margin-bottom: var(--e-6); }
.seccion__titulo {
  font-size: var(--t-xs); font-weight: var(--fw-fuerte); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-texto-suave); margin-bottom: var(--e-3);
}
details.seccion > summary { cursor: pointer; list-style: none; min-height: var(--toque); display: flex; align-items: center; }
details.seccion > summary::-webkit-details-marker { display: none; }
details.seccion > summary::before { content: "▸"; margin-right: var(--e-2); }
details.seccion[open] > summary::before { content: "▾"; }

/* Etiqueta (badge) */
.etiqueta {
  display: inline-block; padding: 2px var(--e-2); margin: 0 0 var(--e-2);
  font-size: var(--t-xs); font-weight: var(--fw-fuerte); letter-spacing: 0.02em;
  border-radius: 999px; background: var(--c-fondo); color: var(--c-texto); border: 1px solid var(--c-borde);
}
.etiqueta--aviso { background: var(--c-aviso-fondo); border-color: var(--c-aviso-borde); color: var(--c-texto); }
.etiqueta--peligro { background: var(--c-peligro-fondo); color: var(--c-peligro); border-color: transparent; }
.etiqueta--naranja { background: var(--c-naranja-fondo); color: var(--c-naranja); border-color: transparent; }
.etiqueta--exito { background: var(--c-exito-fondo); color: var(--c-exito); border-color: transparent; }
.etiqueta--info { background: var(--c-info-fondo); color: var(--c-info); border-color: transparent; }

/* Formulario */
.formulario { display: grid; gap: var(--e-4); }
.campo { display: grid; gap: var(--e-1); margin: 0; border: 0; padding: 0; min-width: 0; }
.campo label, .campo legend { font-weight: var(--fw-fuerte); padding: 0; }
.campo__ayuda { font-size: var(--t-s); color: var(--c-texto-suave); margin: 0; }
.campo__error { font-size: var(--t-s); color: var(--c-peligro); margin: 0; font-weight: var(--fw-fuerte); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%; min-height: var(--toque); padding: var(--e-2) var(--e-3);
  font: inherit; color: var(--c-texto); background: var(--c-superficie);
  border: 1px solid var(--c-borde-fuerte); border-radius: var(--r-m);
}
textarea { min-height: 8rem; resize: vertical; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--c-peligro); border-width: 2px; }
.opcion { display: flex; align-items: center; gap: var(--e-3); min-height: var(--toque); cursor: pointer; }
.opcion input { width: 1.25rem; height: 1.25rem; accent-color: var(--c-primario); flex: none; }
.campo--opciones { gap: 0; }
.formulario__botones { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Lista */
.lista { list-style: none; margin: 0 0 var(--e-4); padding: 0; background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-l); overflow: hidden; }
.lista__fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); min-height: var(--toque); border-top: 1px solid var(--c-borde); }
.lista__fila:first-child { border-top: 0; }
/* Base de 12rem: el nombre nunca se queda en una letra por línea; si los botones no caben al lado, bajan a otra línea. */
.lista__principal { flex: 1 1 12rem; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.lista__detalle { font-size: var(--t-s); color: var(--c-texto-suave); }
.lista__fila .etiqueta { margin: 0; }
.lista--enlaces .lista__fila { padding: 0; }
.lista__enlace { display: flex; align-items: center; gap: var(--e-3); width: 100%; padding: var(--e-3) var(--e-4); min-height: 56px; text-decoration: none; }
.lista__enlace:hover { background: var(--c-fondo); }
.lista__flecha { color: var(--c-texto-suave); }

/* Cifras */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--e-3); }
.cifra { background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-l); padding: var(--e-3) var(--e-4); display: grid; }
.cifra__valor { font-size: var(--t-l); font-weight: var(--fw-fuerte); }
.cifra__etiqueta { font-size: var(--t-s); color: var(--c-texto-suave); }

/* Diálogo */
.dialogo {
  width: min(28rem, calc(100vw - 2 * var(--e-4))); padding: var(--e-5);
  border: 1px solid var(--c-borde); border-radius: var(--r-l);
  background: var(--c-superficie); color: var(--c-texto); box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
}
.dialogo::backdrop { background: rgb(24 24 24 / 0.45); }
.dialogo__texto { font-size: var(--t-m); }
.dialogo__botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2); margin-top: var(--e-4); }

/* Página suelta (errores, entrar) */
.suelta { min-height: 100vh; display: grid; place-items: center; padding: var(--e-4); }
.suelta__caja { width: min(30rem, 100%); padding: var(--e-5); }
.suelta__codigo { font-size: var(--t-xs); color: var(--c-texto-suave); }

/* Páginas públicas (r.php) */
.publico { min-height: 100vh; }
.publico__cabecera, .publico__contenido, .publico__pie { width: min(40rem, 100%); margin: 0 auto; padding: var(--e-4); }
.publico__pie { font-size: var(--t-s); color: var(--c-texto-suave); border-top: 1px solid var(--c-borde); }

.mas__salir { margin-top: var(--e-5); }

/* ───────────────────────────── Componentes añadidos (agente E) ───────────────────────────── */

/* Aviso en línea (callout): resultado de una acción, explicación o problema. Icono + texto. */
.aviso {
  display: flex; gap: var(--e-2); align-items: flex-start;
  padding: var(--e-3) var(--e-4); margin: 0 0 var(--e-4);
  border-radius: var(--r-m); border: 1px solid var(--c-borde); background: var(--c-superficie);
  font-size: var(--t-s);
}
.aviso > span, .aviso > div { flex: 1; min-width: 0; }
.aviso p { margin: 0 0 var(--e-1); }
.aviso p:last-child { margin-bottom: 0; }
.aviso ul { margin: var(--e-1) 0 0; padding-left: 1.2em; }
.aviso .icono { margin-top: 0.1em; }
.aviso--exito { background: var(--c-exito-fondo); color: var(--c-exito); border-color: transparent; }
.aviso--peligro { background: var(--c-peligro-fondo); color: var(--c-peligro); border-color: transparent; }
.aviso--naranja { background: var(--c-naranja-fondo); color: var(--c-naranja); border-color: transparent; }
.aviso--info { background: var(--c-info-fondo); color: var(--c-info); border-color: transparent; }
.aviso--aviso { background: var(--c-aviso-fondo); color: var(--c-texto); border-color: var(--c-aviso-borde); }
.aviso a { color: inherit; font-weight: var(--fw-fuerte); }

/* Estado vacío */
.vacio { color: var(--c-texto-suave); font-size: var(--t-s); padding: var(--e-3) 0; margin: 0; }

/* Texto de ordenador (huellas, valores de PHP, errores) */
.codigo { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9em; overflow-wrap: anywhere; }
/* El texto de un correo en una pantalla (paso 5 del asistente): que parta las líneas en el móvil en vez de salirse. */
.texto-correo { white-space: pre-wrap; max-width: 100%; overflow-x: auto; }

/* Confirmación en dos pasos sin JavaScript ("¿Seguro?" + Sí / No) */
.confirmacion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: 0; }
.confirmacion p { flex-basis: 100%; margin: 0; }

/* Botones */
.boton--grande { min-height: 56px; font-size: var(--t-l); padding: var(--e-3) var(--e-5); }
.boton--enlace { background: none; border: 0; padding: 0; min-height: auto; text-decoration: underline; font-weight: var(--fw-normal); }
.grupo-botones { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Pestañas (Facturas: Por emitir · Por cobrar · Cobradas · Todas). Enlaces con aria-current="page". */
.pestanas { display: flex; gap: var(--e-1); overflow-x: auto; margin: 0 0 var(--e-4); padding: 0 0 2px; list-style: none; border-bottom: 1px solid var(--c-borde); }
.pestanas a { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--toque); padding: 0 var(--e-3); white-space: nowrap;
  text-decoration: none; color: var(--c-texto-suave); border-bottom: 3px solid transparent; }
.pestanas a[aria-current="page"] { color: var(--c-texto); font-weight: var(--fw-fuerte); border-bottom-color: var(--c-primario); }

/* Filtros (chips): enlaces o botones con aria-current o aria-pressed. */
.filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0 0 var(--e-4); padding: 0; list-style: none; }
.filtros a, .filtros button { display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 var(--e-3); border-radius: 999px;
  border: 1px solid var(--c-borde-fuerte); background: transparent; color: var(--c-texto); font: inherit; font-size: var(--t-s); text-decoration: none; cursor: pointer; }
.filtros [aria-current="page"], .filtros [aria-pressed="true"] { background: var(--c-primario); color: var(--c-primario-texto); border-color: var(--c-primario); }

/* Contador pequeño: Por emitir (3) */
.insignia { display: inline-block; min-width: 1.5em; padding: 0 0.4em; border-radius: 999px; background: var(--c-primario); color: var(--c-primario-texto);
  font-size: var(--t-xs); font-weight: var(--fw-fuerte); line-height: 1.5; text-align: center; }

/* Datos clave-valor de una ficha: dl.datos > div > dt + dd */
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--e-2) var(--e-4); margin: 0 0 var(--e-3); }
.datos div { min-width: 0; }
.datos dt { font-size: var(--t-xs); color: var(--c-texto-suave); text-transform: uppercase; letter-spacing: 0.06em; }
.datos dd { margin: 0; font-weight: var(--fw-fuerte); }

/* Línea de tiempo de un ciclo (§9.5): ol.linea-tiempo > li.linea-tiempo__hito[--hecho|--bloqueado] */
.linea-tiempo { list-style: none; margin: 0 0 var(--e-4); padding: 0 0 0 var(--e-4); border-left: 2px solid var(--c-borde); }
.linea-tiempo__hito { position: relative; padding: 0 0 var(--e-3) var(--e-3); }
.linea-tiempo__hito::before { content: ""; position: absolute; left: calc(-1 * var(--e-4) - 7px); top: 0.35em; width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-superficie); border: 2px solid var(--c-borde-fuerte); }
.linea-tiempo__hito--hecho::before { background: var(--c-primario); border-color: var(--c-primario); }
.linea-tiempo__hito--bloqueado::before { background: var(--c-peligro); border-color: var(--c-peligro); }
.linea-tiempo__fecha { font-size: var(--t-xs); color: var(--c-texto-suave); display: block; }

/* Progreso (Poner orden: 14 de 18 listos) */
.progreso { display: grid; gap: var(--e-1); margin: 0 0 var(--e-4); }
.progreso progress { width: 100%; height: 10px; appearance: none; border: 0; border-radius: 999px; background: var(--c-borde); overflow: hidden; }
.progreso progress::-webkit-progress-bar { background: var(--c-borde); border-radius: 999px; }
.progreso progress::-webkit-progress-value { background: var(--c-primario); border-radius: 999px; }
.progreso progress::-moz-progress-bar { background: var(--c-primario); border-radius: 999px; }
.progreso__texto { font-size: var(--t-s); color: var(--c-texto-suave); }

/* Pasos numerados (asistente, alta del código) */
.pasos { margin: 0 0 var(--e-4); padding-left: 1.4em; display: grid; gap: var(--e-2); }
.pasos li::marker { font-weight: var(--fw-fuerte); }

/* Tabla sencilla: en el PC es una tabla; en el móvil, cada fila es un bloque (atributo data-titulo en cada td). */
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-l); overflow: hidden; }
.tabla th, .tabla td { padding: var(--e-2) var(--e-3); text-align: left; border-top: 1px solid var(--c-borde); vertical-align: top; }
.tabla thead th { border-top: 0; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-texto-suave); }
.tabla .numero { text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { border-top: 1px solid var(--c-borde); padding: var(--e-2) 0; }
  .tabla td { border: 0; padding: var(--e-1) var(--e-3); }
  .tabla td[data-titulo]::before { content: attr(data-titulo) ": "; color: var(--c-texto-suave); }
  .tabla .numero { text-align: left; }
}

/* Barra de acciones en bloque (Vas a cambiar 12 servicios), pegada abajo */
.acciones-bloque { position: sticky; bottom: calc(var(--menu-alto) + var(--e-2)); z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-4); background: var(--c-superficie); border: 1px solid var(--c-borde-fuerte); border-radius: var(--r-l); box-shadow: var(--sombra); }
@media (min-width: 900px) { .acciones-bloque { bottom: var(--e-3); } }

/* Paginación */
.paginacion { display: flex; justify-content: space-between; gap: var(--e-2); margin: var(--e-4) 0; }

/* Formularios: reautenticación dentro de un formulario, código de 6 cifras */
.reautenticacion { border: 1px dashed var(--c-borde-fuerte); border-radius: var(--r-m); padding: var(--e-3) var(--e-4); gap: var(--e-3); }
.reautenticacion legend { display: inline-flex; align-items: center; gap: var(--e-2); padding: 0 var(--e-1); }
input.campo__codigo { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--t-l); letter-spacing: 0.25em; max-width: 14rem; }
.campo--error > label, .campo--error > legend { color: var(--c-peligro); }
.plegable > summary { font-size: var(--t-xs); }

/* Entrar */
.entrar h1 { margin-top: var(--e-4); }
.entrar .formulario { margin-bottom: var(--e-4); }
.entrar__ayuda { font-size: var(--t-s); color: var(--c-texto-suave); }
.entrar__otra { margin-top: var(--e-2); }
.clave-secreta { display: block; margin: var(--e-2) 0; padding: var(--e-3); border-radius: var(--r-m); background: var(--c-fondo); border: 1px solid var(--c-borde);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--t-l); letter-spacing: 0.08em; word-spacing: 0.3em; user-select: all; }
.codigos-recuperacion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2) var(--e-4); margin: 0 0 var(--e-4); padding-left: 1.6em;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--t-l); }

/* Página pública de respuesta (/r/token) */
.respuesta { gap: var(--e-4); }
.servicio-respuesta .tarjeta__titulo { font-size: var(--t-l); margin-bottom: var(--e-1); }
.precio { font-size: var(--t-xl); font-weight: var(--fw-fuerte); margin: var(--e-2) 0 0; line-height: 1.15; }
.precio__detalle { font-size: var(--t-s); color: var(--c-texto-suave); margin: 0 0 var(--e-3); }
.estado-servicio { margin: var(--e-2) 0; }
.opciones-respuesta { margin-top: var(--e-3); border-top: 1px solid var(--c-borde); padding-top: var(--e-3); }
.opciones-respuesta legend { margin-bottom: var(--e-2); }
.opcion--grande { border: 1px solid var(--c-borde); border-radius: var(--r-m); padding: var(--e-2) var(--e-3); margin-bottom: var(--e-2); background: var(--c-fondo); }
.opcion--grande:has(input:checked) { border-color: var(--c-primario); border-width: 2px; background: var(--c-superficie); }
.opcion__detalle { margin: calc(-1 * var(--e-1)) 0 var(--e-3) var(--e-6); }
.opcion__detalle .opcion { min-height: 36px; }
.recuperacion { margin: var(--e-3) 0; }
/* Poner orden: los pasos, plegados en el móvil y siempre a la vista en el PC */
.orden-pasos > summary { list-style: none; cursor: pointer; }
.orden-pasos > summary::-webkit-details-marker { display: none; }
.orden-pasos > summary::after { content: " ▾"; }
.solo-pc { display: none; }
@media (min-width: 900px) {
  .solo-movil { display: none; }
  .tarjeta__botones.solo-pc { display: flex; }
}
/* Cada bloque de la página, solo con su opción (revisión del 25/09: decir "no" no puede costar 3.500 px en el móvil).
   Sin :has() (navegadores viejos) se ve todo, como antes, y el servidor valida igual. */
.respuesta:not(:has(input[type="radio"][value="renovar"]:checked, input[type="radio"][value="recuperar"]:checked)) #si-renuevas,
.respuesta:not(:has(input[type="radio"][value="renovar"]:checked, input[type="radio"][value="recuperar"]:checked)) #bloque-fijo { display: none; }
.respuesta:not(:has(input[type="radio"][value="dudas"]:checked)) #dudas:not(.campo--error) { display: none; }
.opcion:has(> input[type="radio"]:not(:checked)) + .opcion__detalle { display: none; }
#dudas { padding: var(--e-3) var(--e-4); }
.recuperacion .lista { margin-bottom: var(--e-2); }
.bloque-fijo { border: 2px solid var(--c-primario); border-radius: var(--r-l); padding: var(--e-3) var(--e-4); background: var(--c-superficie); font-size: var(--t-s); }
.bloque-fijo p { margin: 0 0 var(--e-1); }
.resumen-respuesta { padding: var(--e-3) var(--e-4); border-radius: var(--r-m); background: var(--c-fondo); border: 1px solid var(--c-borde); }
.resumen-respuesta__titulo { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-texto-suave); margin: 0; }
.resumen-respuesta__texto { font-weight: var(--fw-fuerte); margin: 0; }
.resultado { font-size: var(--t-m); }
.publico__enlaces { font-size: var(--t-s); }
.publico .franja { justify-content: center; }

/* Textos legales */
.texto-legal { line-height: 1.65; }
.texto-legal h2 { font-size: var(--t-l); margin-top: var(--e-6); }
.texto-legal h3 { margin-top: var(--e-5); }
.texto-legal ul, .texto-legal ol { padding-left: 1.4em; margin: 0 0 var(--e-3); }
.texto-legal li { margin-bottom: var(--e-1); }
.texto-legal blockquote { margin: 0 0 var(--e-3); padding-left: var(--e-3); border-left: 3px solid var(--c-borde-fuerte); color: var(--c-texto-suave); }
.texto-legal hr { border: 0; border-top: 1px solid var(--c-borde); margin: var(--e-6) 0; }
.tabla-legal { overflow-x: auto; margin: 0 0 var(--e-4); }
.tabla-legal table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tabla-legal th, .tabla-legal td { border: 1px solid var(--c-borde); padding: var(--e-2); text-align: left; vertical-align: top; }
.tabla-legal th { background: var(--c-fondo); }
.falta { background: var(--c-aviso-fondo); outline: 1px solid var(--c-aviso-borde); padding: 0 0.2em; border-radius: 3px; }
.legal__meta { font-size: var(--t-s); color: var(--c-texto-suave); }

/* Impresión (y PDF de los textos legales con despliegue/legal-pdf.ps1): solo el contenido */
@media print {
  :root { color-scheme: light; }
  body { background: #FFFFFF; color: #181818; font-size: 11pt; }
  .navegacion, .cabecera, .pie, .franjas, .saltar, .legal__estado, .legal__meta a, .dialogo { display: none !important; }
  .publico__cabecera, .publico__contenido, .publico__pie { width: 100%; padding: 0; }
  .tarjeta { box-shadow: none; }
  a { color: inherit; }
}