/* El Acervo: mismos colores y tipografías que las maquetas aprobadas (lienzo, artboards D–O).
   Reglas de la casa:
   - Lo que cambia de largo con el idioma (rótulos, botones) vive en cajas de ancho fijo o pegadas a un borde,
     para que al cambiar de idioma nada más se mueva.
   - Todo lo que se toca mide al menos 44 px de alto.
   - Celular primero en la cabeza: el corte único es 700 px (al final de cada bloque). */
:root {
  --fondo: #080A0C; --panel: #0F1317; --linea: #1E252C; --borde: #4A5560;
  --texto: #E6E6E6; --claro: #C8CED6; --tenue: #9AA3AE;
  --azul: #78C8FF; --verde: #96DCA0; --ambar: #E6C878; --coral: #FF8C6E;
  --acento: var(--azul);
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lado: 48px;                                  /* margen lateral de la página */
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
body { -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: var(--azul); }
a:hover { color: #B4E0FF; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { overflow-wrap: anywhere; text-wrap: balance; }
img { display: block; max-width: 100%; }
button, input { font-family: inherit; }
s { text-decoration-thickness: 1px; }
.mono { font-family: var(--mono); }
.tenue { color: var(--tenue); }
.claro { color: var(--claro); }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }

.pagina { min-height: 100vh; min-height: 100dvh; padding: 36px var(--lado) 56px; }
.contenedor { max-width: 1264px; margin: 0 auto; display: flex; flex-direction: column; gap: 36px; }
.sobre { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; color: var(--azul); }
.titulo-seccion { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: var(--azul); }

/* ---------- botones y campos ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; background: transparent;
  border: 1px solid var(--azul); color: var(--azul); font-family: var(--mono); font-size: 14px; line-height: 1.2; border-radius: 2px;
  cursor: pointer; text-decoration: none; text-align: center; transition: background-color 0.12s; }
.boton:hover { background: rgba(120, 200, 255, 0.12); color: var(--azul); }
.boton.primario { background: var(--azul); color: var(--fondo); font-weight: 600; }
.boton.primario:hover { background: #A6DBFF; color: var(--fondo); }
.boton.grande { min-height: 52px; padding: 0 28px; font-size: 16px; }
.boton:disabled, .boton[aria-disabled="true"] { border-color: var(--borde); color: var(--tenue); background: transparent; cursor: default; }

.segmento { display: flex; }
.segmento button { min-height: 44px; padding: 0 18px; background: transparent; border: 1px solid var(--borde); color: var(--texto);
  font-family: var(--mono); font-size: 13px; white-space: nowrap; cursor: pointer; margin-left: -1px; }
.segmento button:first-child { margin-left: 0; border-radius: 2px 0 0 2px; }
.segmento button:last-child { border-radius: 0 2px 2px 0; }
.segmento button:hover:not(:disabled):not([aria-pressed="true"]) { background: rgba(230, 230, 230, 0.08); }
.segmento button[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--fondo); font-weight: 600; position: relative; }
.segmento button:disabled { color: var(--tenue); cursor: default; }
.segmento button[aria-pressed="true"]:disabled { color: var(--fondo); }
.segmento.claro-activo button[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); }

.pildoras { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pildora { min-height: 44px; padding: 0 16px; background: transparent; border: 1px solid var(--borde); color: var(--texto);
  font-family: var(--mono); font-size: 13px; white-space: nowrap; border-radius: 22px; cursor: pointer; }
.pildora:hover:not([aria-pressed="true"]) { background: rgba(230, 230, 230, 0.08); }
.pildora.reemplazados { color: var(--coral); } .pildora.disputa { color: var(--ambar); } .pildora.anclados { color: var(--verde); }
.pildora[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: var(--fondo); font-weight: 600; }
.pildora.disputa[aria-pressed="true"] { background: var(--ambar); border-color: var(--ambar); }
.pildora.reemplazados[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); }
.pildora.anclados[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); }

.campo { min-height: 44px; min-width: 0; padding: 0 14px; background: var(--panel); border: 1px solid var(--borde); color: var(--texto);
  font-family: var(--mono); font-size: 16px; border-radius: 2px; }   /* 16 px: en iPhone, menos hace zoom al enfocar */
.campo::placeholder { color: var(--tenue); }
.campo:focus-visible { outline-offset: 0; border-color: var(--texto); }
.enlace { background: none; border: 0; padding: 0; min-height: 44px; color: var(--azul); font-family: var(--mono); font-size: 12px; cursor: pointer; text-decoration: underline; }

/* ---------- selector de idioma: siempre arriba a la derecha ---------- */
.idiomas { flex: 0 0 auto; display: flex; gap: 10px; align-items: center; font-family: var(--mono); font-size: 13px; color: var(--tenue); }
.idiomas .segmento button { min-width: 5.75rem; padding: 0 12px; }
.idiomas .corto { display: none; }

/* ---------- cabecera ---------- */
.cabecera { display: flex; flex-direction: column; gap: 22px; padding-bottom: 24px; border-bottom: 1px solid var(--linea); }
.cab-arriba { display: flex; gap: 16px 24px; align-items: flex-start; justify-content: space-between; }
.cab-titulo { min-width: 0; }
.cab-arriba > .boton { flex: 0 0 auto; }
.cabecera h1 { font-size: clamp(26px, 4.6vw, 34px); font-weight: 600; line-height: 1.15; margin-top: 8px; }
/* la fila de datos: días (ancho fijo) · custodio (lo que sobre) · botones (anchos fijos, pegados a la derecha) */
.cab-datos { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-end; }
.dato { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dato .rotulo { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--tenue); white-space: nowrap; }
.dato .dias { font-family: var(--mono); font-size: 40px; font-weight: 600; line-height: 1; color: var(--coral); }
.dato-dias { flex: 0 0 15.5rem; }
.dato-custodio { flex: 1 1 14rem; }
.dato-fijo { flex: 0 0 9.5rem; }
.cab-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; }
.cab-acciones .boton { min-width: 7rem; }
.custodio { display: flex; gap: 10px; align-items: center; font-family: var(--mono); font-size: 16px; color: var(--texto); text-decoration: none; min-height: 44px; overflow-wrap: anywhere; }
.custodio:hover { color: var(--texto); }
.custodio:hover .sellito { background: rgba(230, 230, 230, 0.08); }
.sellito { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--acento); color: var(--acento); }
.sellito.chico { width: auto; height: auto; padding: 2px; vertical-align: middle; }
.aleph-pildora { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 11rem; padding: 0 20px; background: #F4F6F8; color: #5B6470;
  font-family: var(--sans); font-size: 15px; font-weight: 600; white-space: nowrap; border-radius: 22px; border: 0; cursor: default; }
.aleph-pildora.activa { color: #0B0D10; cursor: pointer; text-decoration: none; }
.aleph-pildora.activa:hover { background: #FFFFFF; color: #0B0D10; }

/* ---------- imagen partida: original a la izquierda, remaster a la derecha ---------- */
.partida { position: relative; overflow: hidden; background: #000; }
.partida img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.partida img.original { clip-path: inset(0 calc(100% - var(--corte, 50%)) 0 0); }
.partida img.pixelado { image-rendering: pixelated; }
.partida .raya { position: absolute; top: 0; bottom: 0; left: var(--corte, 50%); width: 2px; background: var(--texto); }
.etiqueta { position: absolute; left: 8px; top: 8px; padding: 2px 8px; color: var(--fondo); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }
.etiqueta.suelta { position: static; display: inline-block; }
.anclado-f { background: var(--verde); } .disputa-f { background: var(--ambar); } .reemplazado-f { background: var(--coral); }
.nuevo-f { background: var(--azul); } .cerrado-f { background: var(--borde); color: var(--texto); }
.anclado-t { color: var(--verde); } .disputa-t { color: var(--ambar); } .reemplazado-t { color: var(--coral); }

/* ---------- ahora ---------- */
.ahora { display: flex; flex-direction: column; gap: 14px; }
.ahora .fila { display: flex; flex-wrap: wrap; gap: 20px; }
.tarjeta-g { flex: 1 1 340px; max-width: 640px; min-width: 0; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--linea); }
.tarjeta-g .partida { aspect-ratio: 16 / 9; }
.tarjeta-g .cuerpo { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; padding: 16px 20px 20px; align-items: flex-start; }
.tarjeta-g .arriba { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; width: 100%; }
.tarjeta-g .arriba > div:first-child { min-width: 0; }
.tarjeta-g h3 { font-size: 20px; font-weight: 600; line-height: 1.25; }
.tarjeta-g .real { font-family: var(--mono); font-size: 13px; color: var(--claro); }
.tarjeta-g .texto { font-size: 14px; color: var(--tenue); margin-top: 2px; }
.tarjeta-g .pct { font-family: var(--mono); font-size: 24px; font-weight: 600; flex: 0 0 auto; white-space: nowrap; }
.tarjeta-g .pildoras { margin-top: auto; }                /* los botones, siempre al pie de la tarjeta */
.tarjeta-g .pildoras .boton { min-width: 11.5rem; }
.tarjeta-g.cerrada .partida img { filter: saturate(0.3) brightness(0.45); }
.aviso { padding: 16px 20px; border: 1px dashed var(--borde); font-family: var(--mono); font-size: 13px; color: var(--tenue); }

/* ---------- barra de agrupar y filtros ---------- */
.barra { display: flex; flex-direction: column; gap: 14px; padding: 16px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.barra .linea { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.barra .grupo-ctl { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-family: var(--mono); font-size: 13px; color: var(--tenue); }
.barra .grupo-ctl > span:first-child { min-width: 6.5rem; }          /* "Agrupar por" / "Group by" */
.barra .segmento button { min-width: 9.75rem; }
.barra .buscar { width: 300px; }
.barra .pildora { min-width: 10.5rem; }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--tenue); }
.leyenda span { display: inline-flex; gap: 6px; align-items: center; }
.cuadro { flex: 0 0 auto; display: inline-block; width: 14px; height: 14px; }
.cuadro.anclado { background: var(--verde); }
.cuadro.disputa { border: 1px solid var(--ambar); background: linear-gradient(90deg, var(--ambar) 50%, transparent 50%); }
.cuadro.reemplazado { border: 1px solid var(--coral); }
.cuadro.cerrado { border: 1px dashed var(--borde); }

/* ---------- grupos y estantes ---------- */
.lista { display: flex; flex-direction: column; gap: 28px; }
.grupo-tiempo { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-start; }
.grupo-tiempo .anio { flex: 0 0 96px; display: flex; flex-direction: column; gap: 2px; }
.grupo-tiempo .anio b { font-family: var(--mono); font-size: 30px; font-weight: 600; line-height: 1.2; color: var(--azul); }
.grupo-tiempo .anio span { font-family: var(--mono); font-size: 12px; color: var(--tenue); }
.grupo-tiempo .juegos { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-left: 24px; border-left: 1px solid var(--linea); }
.grupo { display: flex; flex-direction: column; gap: 10px; }
.grupo .cab { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.grupo .cab > div { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.grupo .cab h2 { font-size: 24px; font-weight: 600; color: var(--azul); }
.grupo .cab .desc { font-size: 15px; color: var(--claro); }
.grupo .cab .cuenta { font-family: var(--mono); font-size: 13px; color: var(--tenue); }

.juego { background: var(--panel); border: 1px solid var(--linea); container-type: inline-size; }   /* la fila se acomoda a su propio ancho (ver @container) */
.juego.abierto { border-color: var(--azul); }
.juego.detectado { background: transparent; border-style: dashed; border-color: #2B343D; }
.juego .fila { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 12px 16px; }
.juego .mini { flex: 0 0 96px; height: 60px; }
.juego .mini .raya { width: 1px; }
.juego.detectado .mini img { filter: saturate(0.5) brightness(0.7); }
.juego .nombres { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.juego .nombres .uno { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.juego h3 { font-size: 19px; font-weight: 600; line-height: 1.25; }
.juego .otro { font-size: 15px; color: var(--claro); }
.juego .sub { font-size: 13px; color: var(--tenue); }
.juego .cuadros { flex: 0 0 100px; display: flex; flex-wrap: wrap; gap: 4px; }
.juego .cuenta { flex: 0 0 150px; font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.juego .fila > .boton { min-width: 96px; }
.juego .fila > .etiqueta { margin-left: auto; min-width: 9.25rem; text-align: center; }
.juego .niveles { padding: 4px 16px 16px; }
/* fila angosta (celular, tableta o columna estrecha): imagen + nombres arriba; cuadros, cuenta y botón abajo */
@container (max-width: 860px) {
  .juego .fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mini nombres nombres" "cuadros cuenta boton"; gap: 10px 14px; }
  .juego .mini { grid-area: mini; width: 96px; align-self: start; }
  .juego .nombres { grid-area: nombres; }
  .juego .cuadros { grid-area: cuadros; width: 96px; }
  .juego .cuenta { grid-area: cuenta; white-space: normal; }
  .juego .fila > .boton, .juego .fila > .etiqueta { grid-area: boton; margin-left: 0; justify-self: end; align-self: center; }
  .juego.detectado .cuenta { grid-column: 1 / 3; }
}
/* un juego apenas detectado, con espacio mediano: todo en un renglón, "en preparación" bajo el nombre */
@container (min-width: 540px) and (max-width: 860px) {
  .juego.detectado .fila { grid-template-areas: "mini nombres boton" "mini cuenta boton"; row-gap: 2px; }
  .juego.detectado .cuenta { grid-column: auto; grid-area: cuenta; }
}

/* tarjetas de nivel: rejilla de columnas iguales (una tarjeta sola no se estira) */
.juego .niveles, .lista-plana { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.nivel { min-width: 0; display: flex; flex-direction: column; background: var(--fondo); border: 1px solid var(--linea); color: var(--texto); text-decoration: none; transition: border-color 0.12s; }
a.nivel:hover { border-color: var(--azul); color: var(--texto); }
.nivel .partida { aspect-ratio: 4 / 3; }
.nivel .cuerpo { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.nivel .arriba { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.nivel .nombre { font-size: 15px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.nivel .real { font-family: var(--mono); font-size: 12px; color: var(--claro); }
.nivel .pct { flex: 0 0 auto; font-family: var(--mono); font-size: 14px; font-weight: 600; white-space: nowrap; }
.nivel .detalle { font-family: var(--mono); font-size: 12px; color: var(--tenue); overflow-wrap: anywhere; min-height: 3em; }   /* dos renglones siempre: las tarjetas miden igual en los dos idiomas */
.nivel.cerrado .partida img { filter: saturate(0.3) brightness(0.45); }
.lista-plana .nivel { background: var(--panel); }
.lista-cab { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between; }
.lista-cab h2 { font-size: 22px; font-weight: 600; }
.pie { font-family: var(--mono); font-size: 12px; color: var(--tenue); padding-top: 20px; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; }

/* ---------- ficha del nivel ---------- */
.migas { display: flex; flex-wrap: wrap; gap: 0 20px; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 13px; }
.migas a { display: inline-flex; align-items: center; min-height: 44px; }
.ficha-cab h1 { font-size: clamp(28px, 5vw, 38px); margin-top: 6px; }
.ficha-cab .otro { font-size: 17px; color: var(--claro); margin-top: 6px; }
.ficha-cab .pct-g { font-family: var(--mono); font-size: 34px; font-weight: 600; line-height: 1; white-space: nowrap; }
.ficha-cab .insignia { align-self: flex-start; padding: 4px 12px; color: var(--fondo); font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; white-space: nowrap; }
.ficha-cab .guardian { display: flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 18px; overflow-wrap: anywhere; }
.ficha-cab .cab-datos { align-items: flex-start; }
.cita { padding: 14px 18px; border: 1px solid var(--linea); background: var(--panel); font-family: var(--mono); font-size: 15px; }
.dos-col { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.dos-col > .principal { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.dos-col > .lateral { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.visor-ctl { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.visor-ctl .segmento button { min-width: 8.5rem; }
.visor-ctl .nota { font-family: var(--mono); font-size: 12px; }
.visor-g { border: 1px solid var(--linea); }
.visor-g .rotulo { position: absolute; bottom: 14px; padding: 4px 10px; background: var(--fondo); font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; }
.visor-g .rotulo.izq { left: 14px; } .visor-g .rotulo.der { right: 14px; }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tres figure { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tres img, .tres .hueco { width: 100%; object-fit: cover; }
.tres .hueco { display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; border: 1px dashed var(--borde); font-family: var(--mono); font-size: 12px; color: var(--tenue); }
.tres figcaption { font-family: var(--mono); font-size: 12px; color: var(--tenue); }
.panel { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--panel); border: 1px solid var(--linea); align-items: flex-start; min-width: 0; }
.panel .fuerza { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; width: 100%; font-family: var(--mono); }
.panel .fuerza .bloques { font-size: 15px; color: var(--verde); letter-spacing: 0; white-space: nowrap; }
.panel .fuerza .num { font-size: 22px; font-weight: 600; white-space: nowrap; }
.panel .detalle { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--tenue); }
.huellas { display: flex; flex-direction: column; gap: 12px; font-size: 14px; width: 100%; }
.huellas .n { font-family: var(--mono); font-size: 12px; color: var(--tenue); }
.bitacora { display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 13px; width: 100%; overflow-wrap: anywhere; }

/* ---------- llegada, entrar y llave ---------- */
.llegada { position: relative; min-height: 100vh; min-height: 100dvh; padding: 28px var(--lado) 48px; overflow: hidden; }
.llegada > img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.llegada > .velo { position: absolute; inset: 0; background: rgba(8, 10, 12, 0.45); }
.llegada .contenedor { position: relative; gap: 36px; }
.llegada .arriba { display: flex; gap: 12px 24px; align-items: center; justify-content: space-between; min-height: 44px; }
.llegada .idiomas { color: var(--claro); }
.llegada .segmento button { background: var(--fondo); border-color: var(--texto); }
.llegada .segmento button[aria-pressed="true"] { background: var(--texto); }
/* la convocatoria a la izquierda y la intro a la derecha; en pantallas angostas, la intro primero */
.llegada-cuerpo { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.llegada-cuerpo > .caja { flex: 1 1 420px; }
.intro { flex: 1 1 460px; min-width: 0; background: rgba(8, 10, 12, 0.9); border: 1px solid var(--linea); }
.intro video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.intro video::cue { font-family: var(--sans); color: var(--texto); background: rgba(8, 10, 12, 0.85); }
.intro figcaption { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: space-between; padding: 12px 16px; font-family: var(--mono); font-size: 12px; color: var(--tenue); }
.intro figcaption b { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: var(--azul); }
@media (max-width: 1000px) { .intro { order: -1; flex-basis: 100%; } .llegada-cuerpo > .caja { max-width: none; } }
.caja { max-width: 640px; display: flex; flex-direction: column; gap: 22px; padding: 40px; background: rgba(8, 10, 12, 0.9); border: 1px solid var(--linea); align-items: flex-start; }
.caja h1 { font-size: clamp(28px, 6vw, 40px); font-weight: 600; line-height: 1.15; }
.caja .texto { font-size: 17px; line-height: 1.6; color: var(--claro); }
.caja .invitacion { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.caja .invitacion .codigo { font-family: var(--mono); font-size: 20px; letter-spacing: 0.08em; padding: 12px 16px; background: var(--panel); border: 1px solid var(--verde); overflow-wrap: anywhere; }
form.caja { align-items: stretch; }
form.caja .boton { align-self: flex-start; }
.nota-inv { width: 100%; padding: 14px 18px; border-left: 2px solid var(--azul); background: var(--panel); font-size: 15px; }
.pasos { display: flex; flex-wrap: wrap; gap: 16px; }
.pasos > div { flex: 1 1 260px; min-width: 0; display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: rgba(8, 10, 12, 0.9); border: 1px solid var(--linea); font-size: 15px; }
.pasos b { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--azul); line-height: 1.2; }

/* ---------- registro ---------- */
.registro-cab h1 { font-size: clamp(28px, 5vw, 36px); margin: 8px 0; }
.dos-col > .formulario { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.paso { display: flex; flex-direction: column; gap: 14px; }
.paso .cab { display: flex; gap: 14px; align-items: baseline; }
.paso .cab b { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--azul); }
.paso h2 { font-size: 24px; font-weight: 600; }
.paso .nota { font-size: 15px; color: var(--tenue); }
.op-idiomas { display: flex; flex-wrap: wrap; gap: 14px; }
.op-idioma { flex: 1 1 240px; min-height: 96px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 16px 20px;
  background: var(--panel); border: 1px solid var(--borde); color: var(--texto); font-family: var(--sans); text-align: left; border-radius: 2px; cursor: pointer; }
.op-idioma b { font-size: 24px; font-weight: 600; }
.op-idioma span { font-family: var(--mono); font-size: 13px; color: var(--tenue); }
.op-idioma[aria-pressed="true"] { border: 2px solid var(--azul); padding: 15px 19px; }
.op-idioma[aria-pressed="true"] b { color: var(--azul); }
.op-idioma[aria-pressed="true"] span { color: var(--claro); }
.nombre-fila { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.nombre-fila .campo { flex: 1 1 280px; max-width: 420px; min-height: 56px; font-size: 22px; padding: 0 18px; }
.nombre-fila .campo.ok { border-color: var(--verde); }
.nombre-fila .estado { font-family: var(--mono); font-size: 13px; min-height: 1.5em; }
.sellos { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 96px)); gap: 12px; }
.sello-btn { aspect-ratio: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--panel);
  border: 1px solid var(--borde); color: var(--texto); font-family: var(--mono); font-size: 12px; border-radius: 2px; cursor: pointer; }
.sello-btn:hover:not([aria-pressed="true"]) { border-color: var(--texto); }
.sello-btn[aria-pressed="true"] { border: 2px solid var(--acento); color: var(--acento); font-weight: 600; }
.colores { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-family: var(--mono); font-size: 13px; color: var(--tenue); }
.colores > span { min-width: 3.5rem; }
.color-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--fondo); cursor: pointer; }
.color-btn[aria-pressed="true"] { border-color: var(--texto); box-shadow: 0 0 0 2px var(--fondo) inset; }
.enviar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding-top: 24px; border-top: 1px solid var(--linea); font-family: var(--mono); font-size: 13px; color: var(--tenue); }
.credencial { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 28px; background: var(--panel); border: 1px solid var(--linea); }
.credencial .quien { display: flex; gap: 20px; align-items: center; }
.credencial .sello-g { flex: 0 0 112px; width: 112px; height: 112px; display: flex; align-items: center; justify-content: center; background: var(--fondo); border: 2px solid var(--acento); color: var(--acento); }
.credencial .nombre { font-family: var(--mono); font-size: clamp(20px, 5vw, 28px); font-weight: 600; overflow-wrap: anywhere; }
.credencial .lineas { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.credencial .vista { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--tenue); }
.credencial .vista .muestra { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--fondo); border: 1px solid var(--linea); font-family: var(--mono); font-size: 13px; color: var(--texto); overflow-wrap: anywhere; }
.credencial .vista .sellito { width: 28px; height: 28px; }

/* ---------- invitar ---------- */
.inv-lista { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.inv-fila { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--fondo); border: 1px solid var(--linea); font-size: 13px; overflow-wrap: anywhere; }
.inv-fila .boton { min-height: 44px; padding: 0 12px; font-size: 12px; }
.nueva { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 14px 16px; border: 1px dashed var(--verde); }
.nueva .codigo { font-family: var(--mono); }
.panel .invitacion { display: flex; flex-direction: column; gap: 6px; }
.panel .invitacion .campo { width: 100%; }

/* ---------- canal de ALEPH: la otra cara (clara, redonda), con una franja oscura del Acervo arriba ---------- */
.aleph { min-height: 100vh; min-height: 100dvh; background: #F4F6F8; color: #0B0D10; font-family: var(--sans); }
.aleph :focus-visible { outline: 2px solid #0B4FA8; outline-offset: 2px; }
.a-ancho { max-width: 1040px; margin: 0 auto; }
.a-franja { background: var(--fondo); color: var(--texto); padding: 8px var(--lado); font-family: var(--mono); font-size: 13px; }
.a-franja .a-ancho { max-width: 1264px; display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; justify-content: space-between; }
.a-franja b { color: var(--ambar); font-weight: 600; }
.a-franja-der { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; color: var(--tenue); margin-left: auto; }
.a-franja-der a { display: inline-flex; align-items: center; min-height: 44px; }
.aleph .idiomas { color: var(--tenue); }
.a-pagina { padding: 32px var(--lado) 64px; }
.a-columna { display: flex; flex-direction: column; gap: 32px; }
.a-cab { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.a-marca { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; }
.a-marca b { font-size: 26px; font-weight: 600; letter-spacing: 0.2em; }
.a-marca span, .a-sub, .a-nota, .a-pie, .a-vacio, .a-tipos > span { color: #4A5462; }
.a-saldo { padding: 8px 16px; background: #FFFFFF; border: 1px solid #D5DAE0; border-radius: 22px; font-size: 15px; overflow-wrap: anywhere; }
.a-heroe { display: flex; flex-direction: column; gap: 18px; padding: 40px; background: #FFFFFF; border: 1px solid #D5DAE0; border-radius: 20px; }
.a-heroe h1 { font-size: clamp(30px, 6.5vw, 44px); font-weight: 600; line-height: 1.1; }
.a-heroe p { margin-top: 10px; font-size: 18px; color: #4A5462; }
.a-fila { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.a-campo { flex: 999 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.a-campo label { font-size: 14px; font-weight: 600; }
.a-campo input { min-height: 52px; width: 100%; padding: 0 18px; background: #F4F6F8; border: 1px solid #8792A0; color: #0B0D10; font-family: var(--sans); font-size: 17px; border-radius: 26px; }
.a-campo input::placeholder { color: #5B6470; }
.a-fila > .a-boton { min-width: 8.25rem; }
.a-tipos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.a-tipos > span { min-width: 2.5rem; }
.a-tipos .a-boton { min-width: 7.75rem; }
.a-nota { font-size: 14px; min-height: 1.5em; }
.a-nota.mal { color: #A12B12; font-weight: 600; }
.a-boton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; background: #FFFFFF; border: 1px solid #0B0D10; color: #0B0D10;
  font-family: var(--sans); font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center; border-radius: 22px; cursor: pointer; text-decoration: none; }
.a-boton:hover { background: #E3ECF5; color: #0B0D10; }
.a-boton.lleno { background: #0B0D10; color: #FFFFFF; }
.a-boton.lleno:hover { background: #2A313A; color: #FFFFFF; }
.a-boton.grande { min-height: 52px; padding: 0 28px; font-size: 16px; border-radius: 26px; }
.a-boton.chico { font-weight: 400; border-color: #8792A0; }
.a-boton:disabled { border-color: #C3CAD3; color: #6B7480; background: #F4F6F8; cursor: default; }
.a-lista { display: flex; flex-direction: column; gap: 14px; }
.a-lista-cab { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.a-lista-cab h2 { font-size: 24px; font-weight: 600; }
.a-tarjeta { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; padding: 20px 24px; background: #FFFFFF; border: 1px solid #D5DAE0; border-radius: 16px; }
.a-cuenta { flex: 0 0 84px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.a-cuenta b { font-size: 34px; font-weight: 600; line-height: 1; }
.a-cuenta span { font-size: 13px; color: #4A5462; }
.a-cuerpo { flex: 999 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.a-titulo { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.a-titulo h3 { font-size: 20px; font-weight: 600; line-height: 1.25; }
.a-chip { padding: 2px 10px; background: #E3ECF5; border-radius: 12px; font-size: 13px; white-space: nowrap; }
.a-chip.tuyo { background: #FFF1C9; }
.a-mordio { padding: 2px 10px; background: var(--fondo); color: var(--verde); font-family: var(--mono); font-size: 12px; font-weight: 600; white-space: nowrap; }
.a-sub { font-size: 14px; }
.a-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.a-vacio { padding: 28px; text-align: center; background: #FFFFFF; border: 1px dashed #A9B2BD; border-radius: 16px; }
.a-pie { font-size: 15px; text-align: center; }

/* =====================================================================================================
   Celular y pantallas angostas
   ===================================================================================================== */
@media (max-width: 700px) {
  :root { --lado: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .pagina { padding-top: 20px; padding-bottom: 40px; }
  .contenedor { gap: 28px; }

  /* idioma: solo las siglas, sin rótulo */
  .idiomas > span:first-child { display: none; }
  .idiomas .largo { display: none; }
  .idiomas .corto { display: inline; }
  .idiomas .segmento button { min-width: 48px; padding: 0 10px; }

  /* cabecera: días y custodio lado a lado; los botones abajo, a todo lo ancho */
  .cabecera { gap: 18px; padding-bottom: 20px; }
  .cab-datos { gap: 14px 20px; }
  .dato-dias { flex: 0 0 auto; }
  .dato-dias .rotulo { white-space: normal; max-width: 9.5rem; }
  .dato-custodio { flex: 1 1 10rem; }
  .dato-fijo { flex: 1 1 5.5rem; }
  .cab-acciones { flex: 1 1 100%; margin-left: 0; flex-wrap: nowrap; }
  .cab-acciones > * { flex: 1 1 0; min-width: 0 !important; padding: 0 10px; }
  .ficha-cab .pct-g { font-size: 28px; }
  .ficha-cab .otro { font-size: 15px; }

  /* ahora */
  .ahora .fila { gap: 14px; }
  .tarjeta-g { flex-basis: 100%; max-width: none; }
  .tarjeta-g .cuerpo { padding: 14px 16px 16px; }
  .tarjeta-g .pildoras { width: 100%; }
  .tarjeta-g .pildoras .boton { flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: 13px; }

  /* barra: todo a lo ancho; los filtros, en dos columnas */
  .barra .linea, .barra .grupo-ctl { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .barra .segmento button { flex: 1 1 0; min-width: 0; padding: 0 6px; white-space: normal; line-height: 1.2; }
  .barra .buscar { width: 100%; }
  .barra .pildoras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barra .pildora { min-width: 0; padding: 0 8px; }
  .barra .pildora:first-child { grid-column: 1 / -1; }

  /* estantes: el año arriba; cada juego en dos renglones */
  .lista { gap: 22px; }
  .grupo-tiempo { gap: 8px; }
  .grupo-tiempo .anio { flex: 1 1 100%; flex-direction: row; align-items: baseline; gap: 12px; }
  .grupo-tiempo .anio b { font-size: 22px; }
  .grupo-tiempo .juegos { flex-basis: 100%; padding-left: 0; border-left: 0; }
  .grupo .cab h2 { font-size: 20px; }
  .juego .fila { gap: 10px 12px; padding: 12px; }
  .juego .mini, .juego .cuadros { width: 72px; }
  .juego .mini { height: 48px; }
  .juego h3 { font-size: 17px; }
  .juego .otro { font-size: 14px; }
  .juego .niveles { padding: 0 12px 12px; }
  .juego .niveles, .lista-plana { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .nivel .cuerpo { padding: 8px 10px 10px; }
  .nivel .arriba { flex-wrap: wrap; gap: 0 8px; }

  /* ficha */
  .dos-col { gap: 24px; }
  .visor-ctl .segmento { width: 100%; }
  .visor-ctl .segmento button { flex: 1 1 0; min-width: 0; padding: 0 6px; white-space: normal; line-height: 1.2; }
  .visor-g .rotulo { bottom: 8px; padding: 3px 8px; font-size: 11px; }
  .visor-g .rotulo.izq { left: 8px; } .visor-g .rotulo.der { right: 8px; }
  .tres { gap: 8px; }
  .panel { padding: 16px; }
  .panel > .boton { width: 100%; }
  .cita { font-size: 14px; padding: 12px 14px; }

  /* llegada y registro */
  .llegada { padding-top: 16px; padding-bottom: 32px; }
  .llegada .contenedor { gap: 24px; }
  .caja { padding: 24px 20px; gap: 18px; }
  .caja .texto { font-size: 16px; }
  .caja > .boton, form.caja .boton, .caja .pildoras > .boton { width: 100%; align-self: stretch; }
  .caja .invitacion .codigo { font-size: 17px; }
  .pasos { gap: 10px; }
  .pasos > div { flex-basis: 100%; padding: 14px 16px; }
  .dos-col > .formulario { gap: 28px; }
  .op-idioma { min-height: 76px; }
  .nombre-fila .campo { max-width: none; flex-basis: 100%; font-size: 20px; }
  .sellos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .sello-btn { font-size: 11px; gap: 4px; }
  .enviar .boton { width: 100%; }
  .credencial { padding: 20px; }
  .credencial .sello-g { flex-basis: 88px; width: 88px; height: 88px; }

  /* canal de ALEPH */
  /* franja: aviso + idioma arriba; balance + volver abajo */
  .a-franja .a-ancho { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
  .a-franja-der { display: contents; }
  .a-franja-izq { grid-area: 1 / 1; padding: 6px 0; }
  .a-franja .idiomas { grid-area: 1 / 2; align-self: start; }
  .a-franja-der > span { grid-area: 2 / 1; }
  .a-franja-der > a { grid-area: 2 / 2; justify-self: end; }
  .a-pagina { padding-top: 20px; padding-bottom: 40px; }
  .a-columna { gap: 24px; }
  .a-heroe { padding: 24px 20px; border-radius: 16px; }
  .a-heroe p { font-size: 16px; }
  .a-fila > .a-boton { width: 100%; }
  .a-tipos .a-boton { flex: 1 1 40%; min-width: 0; }
  .a-lista-cab .a-tipos { width: 100%; }
  .a-lista-cab .a-tipos .a-boton { flex: 1 1 auto; padding: 0 12px; font-size: 13px; white-space: nowrap; }
  .a-tarjeta { padding: 16px; gap: 10px 14px; }
  .a-cuenta { flex: 0 0 auto; flex-direction: row; align-items: baseline; gap: 6px; }
  .a-cuenta b { font-size: 26px; }
  .a-cuerpo { flex-basis: 100%; }
  .a-titulo h3 { font-size: 18px; }
  .a-acciones { width: 100%; }
  .a-acciones .a-boton { flex: 1 1 auto; }
}

/* quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }