/* Lo común de la portada: la densidad, los botones, lo que esta página mete en
   la cabecera, el pie y los dos emergentes. Lo del área de demos y preferencias
   también, que es poco —el resto lo pone el armazón—.

   Lo de la cara PÚBLICA está en `vestibulo.css`, que se carga después: son dos
   pantallas distintas y solo una de las dos se ve cada vez.

   Se carga DESPUÉS de `paleta.css` (los valores) y de `armazon.css` (la forma
   compartida con el panel), en ese orden, que es el mismo que los paneles usan
   con sus `@import`.

   ── Qué NO está aquí, y es lo importante ─────────────────────────────────

   La cabecera oscura, el ancho de 1280 px, la caja, la fila y el título de
   página NO se escriben en este archivo: vienen de `armazon.css`, que es una
   copia generada del paquete. Reescribirlos aquí es lo que hacía que las dos
   pantallas se parecieran «bastante»: cada retoque en el panel dejaba a la
   portada un poco más atrás, y no se nota hasta poner las dos ventanas al
   lado. Lo que sigue es solo lo que el panel no tiene — un vestíbulo con
   logotipo, unas casillas de consentimiento y dos emergentes.

   `armazon.css` va en `@layer components`; esta hoja no lleva capa, así que
   gana siempre. Es la misma relación que allí tienen los utilitarios de
   Tailwind con el armazón. */

* { box-sizing: border-box; }

/* La densidad del producto, en su único número: 14 px, los mismos que el panel
   y la Tienda. Va en `html` y no en `body` porque los `rem` se resuelven contra
   la RAÍZ: con la medida en `body` la letra baja pero cada relleno y cada hueco
   se siguen calculando sobre 16 px, y la página sale un 14 % más suelta con el
   mismo código. */
html { font-size: var(--skj-raiz); }

html, body {
  /* Nada desborda a lo ancho, NUNCA. El desbordamiento horizontal aparece en
     una anchura concreta, con un correo largo o un nombre sin espacios, y quien
     lo sufre no sabe explicarlo («se ve raro en mi móvil»). Cortarlo en la raíz
     sale más barato que perseguirlo regla por regla. */
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--skj-lienzo);
  color: var(--skj-tinta);
  font-family: var(--skj-fuente-sans);
  /* 1rem = los 14 px de la raíz. Escrito así y no como número, para que cambiar
     la densidad siga siendo cambiar un token y no dos. */
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; display: flex; flex-direction: column; }

/* `width: 100%` y no es redundante: `armazon-disposicion` se centra con
   `margin-inline: auto`, y un margen automático en el eje transversal DESACTIVA
   el estirado de un hijo de flexbox. Sin esta línea la disposición se encoge a
   lo que ocupe su contenido —medía 1102 px de los 1280 que declara— y la página
   sale más estrecha cuanto menos texto tiene, que es lo contrario de una
   maqueta. Se arregla aquí y no en `armazon.css` porque aquel es copia generada
   del paquete, y porque allí el contenedor es otro. */
main > .armazon-disposicion { width: 100%; }

/* Los correos son la cadena larga sin espacios más habitual de esta página, y
   el del subtítulo es el que más largo puede venir. Sin esto, uno de 40
   caracteres empuja la columna y saca la barra horizontal a 320 px. */
#correo { overflow-wrap: anywhere; }

.oculto { display: none !important; }

/* Los dos que usan las DOS pantallas: el párrafo explicativo y la fila de
   botones. Están aquí y no en `vestibulo.css` porque el diálogo de borrado —que
   es del área privada— los lleva dentro. */
.entrada { margin: 0; font-size: 13px; color: var(--skj-tenue); }
.acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ─────────────────────────────────────────────────────────── la cabecera ───
   La barra oscura es de `armazon.css` y no se toca. Aquí solo va lo que esta
   página mete dentro: el logotipo de la marca y la identidad de la derecha. */

/* La medida del logotipo ya NO se escribe aquí: la declara `armazon.css` desde
   el 2026-08-15, que es la hoja que comparten las tres pantallas. Estaba en los
   dos sitios diciendo lo mismo, y así es como acaban diciendo 20 px y 24.

   El logotipo blanco en los DOS temas, sin `<picture>`: la cabecera es oscura
   siempre —así lo declara la paleta— así que aquí no hay dos caras que elegir. */

.identidad {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--skj-cabecera-tenue);
}

/* Se va por debajo de 1024 px, igual que en el panel: en tableta el nombre
   empuja la cabecera y en móvil se come media pantalla para decir algo que
   nadie consulta desde el teléfono. El retrato se queda, que es lo que confirma
   de un vistazo con qué cuenta has entrado. */
.identidad__nombre {
  display: none;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .identidad__nombre { display: inline-block; }
}

.identidad__retrato {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--skj-cabecera-borde);
  background: var(--skj-cabecera-borde);
  object-fit: cover;
}

/* ────────────────────────────────────────────────────────────── botones ───
   Miden lo que miden los del panel, y los números no son a ojo: son los del
   `Button size="sm"` de HeroUI medidos en `/panel/login` —0.875 rem, peso 500,
   0.75 rem de relleno lateral, extremos redondos— más los altos que
   `armazon.css` impone en sus zonas de acciones (44 / 36 / 32).

   El radio va en píxeles grandes y no en un token porque el del panel lo pone
   HeroUI, no nuestra paleta: inventar aquí un `--skj-radio-pildora` daría un
   segundo sitio que dice cuánto mide algo que decide otro. El día que el botón
   del panel salga de nuestro sistema, este número se convierte en token. */

.boton {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--skj-radio-pieza);
  background: var(--skj-realce);
  color: var(--skj-tinta);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

@media (min-width: 768px)  { .boton { min-height: 36px; } }
@media (min-width: 1024px) { .boton { min-height: 32px; } }

.boton:hover:not(:disabled) { background: color-mix(in oklch, var(--skj-realce) 65%, var(--skj-borde)); }
.boton:disabled { opacity: .45; cursor: not-allowed; }
.boton:focus-visible { outline: 2px solid var(--skj-marca); outline-offset: 2px; }

/* `--skj-sobre-color` y no `#fff`: el texto encima de un relleno de color es
   blanco en claro, pero en oscuro el azul del sistema es un tono CLARO —para
   despegarse del fondo— y el blanco encima se queda en 2,5:1. El token ya trae
   esa pareja resuelta. */
.boton--primario {
  background: var(--skj-marca);
  color: var(--skj-sobre-color);
  font-weight: 600;
}
/* El tono pulsado del sistema: más oscuro en claro, más claro en oscuro. */
.boton--primario:hover:not(:disabled) { background: var(--skj-marca-fuerte); }
.boton--primario:disabled { background: var(--skj-borde); color: var(--skj-tenue); }

.boton--peligro {
  background: var(--skj-mal);
  color: var(--skj-sobre-color);
  font-weight: 600;
}
/* Mezclado con la TINTA y no con negro: la tinta es oscura en tema claro y
   clara en oscuro, así que el pulsado se separa del reposo en los dos. El rojo
   no tiene tono «fuerte» propio en la paleta y no se le inventa uno para un
   `:hover`: sería un token de adorno. */
.boton--peligro:hover:not(:disabled) { background: color-mix(in oklch, var(--skj-mal) 82%, var(--skj-tinta)); }

/* El de la barra oscura. El realce al pasar es blanco al 12 %, el mismo que usa
   el panel sobre esta misma cabecera: con un gris azulado el mismo gesto daba
   dos respuestas distintas. */
.boton--cabecera {
  min-height: 44px;
  background: transparent;
  color: var(--skj-cabecera-tinta);
}
.boton--cabecera:hover:not(:disabled) { background: color-mix(in srgb, white 12%, transparent); }
.boton--cabecera:focus-visible { outline-color: var(--skj-cabecera-tinta); }

@media (min-width: 768px) { .boton--cabecera { min-height: 32px; } }

/* Acción destructiva: el rojo aparece al confirmar, no antes. Aquí va como
   enlace discreto —quien lo busca lo encuentra, quien no, no lo pulsa sin
   querer—, pero sigue midiendo 44 px de alto para el pulgar. */
.boton--enlace {
  min-height: 44px;
  padding: 0;
  justify-content: flex-start;
  background: none;
  color: var(--skj-tenue);
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.boton--enlace:hover:not(:disabled) { background: none; color: var(--skj-mal); }

/* ───────────────────────────────────────────────────── el área privada ───
   Aquí ya no hay nada propio salvo el lateral: el resto son `armazon-caja`,
   `armazon-fila` y `armazon-titulo`, las mismas piezas del panel. */

/* El lateral ocupa el sitio del menú del panel: encima del contenido por debajo
   de 1024 px, columna fija de 240 px a partir de ahí. Lo que hay dentro es la
   salida hacia el panel, que es a donde se va desde aquí. */
/* La salida hacia el panel es la acción principal de esta pantalla, así que es
   el único botón que no mide lo que miden los demás: 40 px en vez de los 32 del
   escritorio. No es una excepción al sistema, es la jerarquía que el sistema
   pide —un solo relleno de color por pantalla, y aquí es este—. A ancho completo
   de la columna, que en el móvil es el ancho de la pantalla. */
/* El alto táctil pregunta por el PUNTERO y no por el ancho, igual que desde el
   2026-08-25 lo hace `armazon.css`: una tableta de 1 024 px se toca con el dedo
   y con la pregunta vieja recibía el tamaño de ratón. */
.lateral__salida { width: 100%; min-height: 40px; margin-bottom: 12px; white-space: normal; }
@media (pointer: coarse) { .lateral__salida { min-height: var(--skj-boton-alto-tactil); } }

.lateral__nota {
  margin: 0 0 12px;
  padding: 0 2px;
  font-size: 12px;
  color: var(--skj-tenue);
}

/* ── Claro / oscuro ────────────────────────────────────────────────────────
   El pie del lateral, bajo un separador — el mismo sitio que en el panel. El
   separador no es adorno: sin él, un botón tenue justo debajo del menú se lee
   como una entrada más de él.

   Por debajo de 1024 px el menú se convierte en una tira horizontal, pero esto
   NO entra en ella: es un bloque hermano que queda debajo, a ancho completo. Y
   ahí, encima del contenido, cada píxel se paga en scroll, así que el aire se
   recorta a la mitad. La línea se queda: es lo único que separa el botón de la
   tira. */
.lateral__pie {
  margin-top: 12px;
  padding-top: 8px;
  border-top: var(--skj-borde-grosor) solid var(--skj-borde);
}

@media (max-width: 1023px) {
  .lateral__pie { margin-top: 6px; padding-top: 4px; }
}

.conmutador-tema {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--skj-boton-alto);
  padding: 0 8px;
  border: 0;
  border-radius: var(--skj-radio-pieza);
  background: none;
  color: var(--skj-tenue);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

@media (pointer: coarse) { .conmutador-tema { min-height: var(--skj-boton-alto-tactil); } }

.conmutador-tema:hover { background: var(--skj-realce); color: var(--skj-tinta); }
.conmutador-tema:focus-visible { outline: 2px solid var(--skj-marca); outline-offset: -2px; }

/* Cuál de los tres dibujos se ve lo decide el CSS, no el JavaScript.
   ─────────────────────────────────────────────────────────────────────────
   La primera versión ponía `hidden` en los otros dos, y NO FUNCIONA sobre un
   `<svg>`: `hidden` es una propiedad de `HTMLElement`, y un elemento SVG no lo
   es —asignarla crea un campo suelto que no llega al atributo—; y aun poniendo
   el atributo a mano, la regla `[hidden]` del navegador no le aplica. Se veían
   los tres a la vez.

   Con un atributo en el botón y tres selectores, el estado vive en un solo
   sitio y el caso «todavía no ha corrido el JavaScript» sale bien solo: sin
   `data-actual` no encaja ninguno y no se ve ninguno, en vez de verse los tres.

   `flex: none` para que el dibujo no se encoja cuando el rótulo —«Según el
   sistema», el más largo— pide más sitio del que hay en la tira del móvil. */
.conmutador-tema__icono { display: none; flex: none; width: 15px; height: 15px; }

.conmutador-tema[data-actual='claro'] .conmutador-tema__icono[data-modo='claro'],
.conmutador-tema[data-actual='oscuro'] .conmutador-tema__icono[data-modo='oscuro'],
.conmutador-tema[data-actual='sistema'] .conmutador-tema__icono[data-modo='sistema'] {
  display: block;
}

.conmutador-tema__rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Una demo concedida es un enlace de verdad y no un `div` con un manejador: así
   funcionan el clic central, el «abrir en pestaña nueva» y el teclado. Va en la
   zona de acciones de la fila, de donde saca 44 px de alto y el ancho completo
   por debajo de 768 px sin que nadie tenga que acordarse. */
.armazon-fila__acciones .boton { text-decoration: none; }

/* Una casilla es una fila que además se puede pulsar entera. */
.fila--casilla { cursor: pointer; transition: background-color .12s ease; }
.fila--casilla:hover { background: var(--skj-realce); }
.fila--casilla:focus-within { outline: 2px solid var(--skj-marca); outline-offset: -2px; }

.casilla__marca {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--skj-marca);
  cursor: pointer;
}

/* Por debajo de 768 px la casilla es de las cosas que más se fallan con el
   pulgar: la fila entera pasa a medir lo que mide un objetivo táctil. */
@media (max-width: 767px) {
  .fila--casilla { min-height: 44px; align-items: center; }
}

/* El pie de una caja: lo que cierra el grupo —guardar, y el aviso de que se
   guardó—. Es una fila más, así que hereda su línea de 1 px y su relleno. */
.caja__pie { flex-wrap: wrap; justify-content: flex-end; }
/* El aviso ocupa su propia línea entera: al lado del botón encogería hasta
   partir el mensaje en cinco palabras por renglón justo cuando hay que leerlo. */
.caja__pie .aviso { width: 100%; }
.guardado { font-size: 12px; color: var(--skj-ok); align-self: center; }

.legal-nota { margin: 0; font-size: 12px; color: var(--skj-tenue); }
.legal-nota a, .casilla-legal a { color: var(--skj-marca); }

.zona-baja { margin-top: 4px; }

/* Demo pendiente de autorización. Se apaga, no se esconde: saber que existe y
   que está en camino es información útil, mientras que hacerla desaparecer deja
   pensando si el sistema existe siquiera. Y ocultarla no protegería nada: quien
   tenga el enlace se topa igual con la pantalla de acceso no autorizado. */
.armazon-fila--en-espera .armazon-fila__nombre { color: var(--skj-tenue); }

.aviso {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--skj-mal) 40%, transparent);
  border-radius: var(--skj-radio-pieza);
  background: var(--skj-mal-suave);
  font-size: 13px;
}

.aviso--demo {
  border-color: color-mix(in srgb, var(--skj-espera) 40%, transparent);
  background: var(--skj-espera-suave);
}

.despedida { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 16px; }

/* ───────────────────────────────────────────────────────────────── pie ───*/
.pie {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: center;
  align-items: center;
  padding: 16px;
  font-size: 12px;
  color: var(--skj-tenue);
}
.pie a { color: var(--skj-tenue); text-decoration: none; }
.pie a:hover { color: var(--skj-marca); text-decoration: underline; }

/* ─────────────────────────────────────────────────────────── emergentes ───
   Los dos usan el velo del sistema, el mismo que el panel: era lo último que se
   apagaba con un negro distinto en cada pantalla. */

dialog { border: 0; padding: 0; background: transparent; color: var(--skj-tinta); }
dialog::backdrop { background: var(--skj-velo); backdrop-filter: blur(3px); }

#confirmar-borrado {
  width: min(480px, 92vw);
  border: 1px solid var(--skj-borde);
  border-radius: var(--skj-radio-caja);
  background: var(--skj-panel);
  box-shadow: var(--skj-sombra-alta);
}

.dialogo-cuerpo { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.dialogo-cuerpo h2 { margin: 0; font-size: 16px; font-weight: 600; }

.lista-efectos {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--skj-tenue);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lista-efectos strong { color: var(--skj-tinta); font-weight: 600; }
.lista-efectos li::marker { color: var(--skj-mal); }

/* Los textos legales se leen encima de la página, sin navegar. Abrir una
   pestaña rompe el hilo; navegar en la misma perdería las casillas ya marcadas
   y habría que volver a empezar. */
#visor {
  width: min(760px, 92vw);
  height: min(78dvh, 720px);
  border: 1px solid var(--skj-borde);
  border-radius: var(--skj-radio-caja);
  background: var(--skj-panel);
  overflow: hidden;
  box-shadow: var(--skj-sombra-alta);
}

.visor-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  border-bottom: 1px solid var(--skj-borde);
  background: var(--skj-lienzo);
}
.visor-barra strong { font-size: 14px; font-weight: 600; }
.visor-barra .hueco { flex: 1; }

.visor-cerrar {
  appearance: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  flex: none;
  border: 0;
  border-radius: var(--skj-radio-pieza);
  background: transparent;
  color: var(--skj-tinta);
  font-size: 18px;
  line-height: 1;
}
.visor-cerrar:hover { background: var(--skj-realce); color: var(--skj-mal); }
.visor-cerrar:focus-visible { outline: 2px solid var(--skj-marca); outline-offset: 2px; }

#visor iframe {
  width: 100%;
  height: calc(100% - 49px);              /* el alto de la barra */
  border: 0;
  display: block;
  background: var(--skj-lienzo);
}

/* Barra fina y curva, la misma que el lateral del panel. */
* { scrollbar-width: thin; scrollbar-color: var(--skj-borde) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--skj-borde); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--skj-marca); }

a:focus-visible, input:focus-visible { outline: 2px solid var(--skj-marca); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: emerger .2s cubic-bezier(.2,.9,.3,1); }
  @keyframes emerger { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
}