/* =======================================================================
   Base — normalizacion y tipografia
   Depende de tokens.css. Cargar siempre en este orden:
     tokens.css -> base.css -> componentes.css -> css de la vista
   ======================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  /* UX-GAME-1 — el fondo del `body` se propaga al lienzo y se posiciona
     respecto a la raiz. Una vista corta (un dialogo sobre nada, como la
     verificacion de heroe) dejaba la raiz de 40 px de alto y la atmosfera
     se repetia en bandas. Con la raiz de al menos una pantalla, el degradado
     cubre siempre la ventana entera. */
  min-height: 100%;
}

/* =======================================================================
   Tinta contextual — UX-GAME-1
   -----------------------------------------------------------------------
   Desde UX-GAME-1 la pagina entera vive sobre la atmosfera del Nexo (indigo
   oscuro con halos), y las tarjetas, dialogos y tablas siguen siendo claras.
   El mismo texto tiene, por tanto, dos colores posibles segun donde caiga:
   claro sobre la atmosfera, oscuro sobre una superficie.

   Eso no se resuelve cambiando `--texto`: `--texto` es la paleta, y la paleta
   se redefine en alto contraste. Se resuelve con una capa por encima, la
   TINTA: cinco variables de contexto que cada superficie clara vuelve a
   poner en oscuro (`componentes.css`, «Superficies claras»). Los titulos,
   `.t-meta`, los enlaces y las etiquetas leen la tinta, no la paleta, y asi
   salen bien en los dos sitios sin saber en cual estan.

   Son variables de CONTEXTO y no de paleta: apuntan siempre a un token, nunca
   a un color; por eso viven aqui y no en tokens.css, y por eso una hoja de
   vista PUEDE ponerlas sobre una superficie propia (`--tinta: var(--texto)`)
   sin tapar la paleta ni el alto contraste. */
:root {
  --tinta: var(--texto);
  --tinta-2: var(--texto-2);
  --tinta-3: var(--texto-3);
  --tinta-enlace: var(--primaria);
  --tinta-enlace-hover: var(--primaria-relleno);
}

body {
  margin: 0;
  /* La atmosfera del Nexo, antes solo del portal de entrada. Color plano
     primero: si `color-mix` no esta disponible, queda el cromo y sigue siendo
     correcto. Los halos son porcentajes del cuerpo, asi que en una pagina
     larga se estiran en vez de repetirse; no hay `background-attachment:
     fixed`, que en movil repinta la pagina entera en cada desplazamiento. */
  background: var(--cromo);
  background-image:
    radial-gradient(
      120% 80% at 15% 0%,
      color-mix(in srgb, var(--acento-relleno) 38%, transparent),
      transparent 60%
    ),
    radial-gradient(
      90% 70% at 100% 100%,
      color-mix(in srgb, var(--primaria) 30%, transparent),
      transparent 55%
    ),
    linear-gradient(180deg, var(--cromo-elevado), var(--cromo) 55%);
  background-repeat: no-repeat;
  /* Sobre la atmosfera la tinta es clara. Las superficies la devuelven a
     oscuro; ver arriba. */
  --tinta: var(--texto-sobre-color);
  --tinta-2: var(--pista);
  --tinta-3: var(--pista);
  --tinta-enlace: var(--enlace-sobre-cromo);
  --tinta-enlace-hover: var(--texto-sobre-color);
  color: var(--tinta);
  font-family: var(--t-cuerpo-familia);
  font-size: var(--t-cuerpo-tam);
  font-weight: var(--t-cuerpo-peso);
  line-height: var(--t-cuerpo-alto);
}

/* El navegador le pone borde, margen y relleno propios; sin esto, un grupo
   de opciones de radio se ve con una caja gris que nadie pidio. */
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend { padding: 0; }

/* --- Disposicion --------------------------------------------------- */
/* El sistema tenia componentes pero nada que los colocara: la primera vista
   real lo destapo, con los campos ocupando el ancho entero de la ventana y
   pegados unos a otros. Dos utilidades, no una rejilla completa. */

/* El atributo `hidden` tiene que ganar SIEMPRE.

   El navegador lo aplica con `[hidden] { display: none }` en su hoja de
   usuario-agente, que pierde contra cualquier clase que fije `display`. Y las
   dos utilidades de aqui abajo -.pila y .fila- fijan `display: flex`. El
   resultado: `elemento.hidden = true` no ocultaba nada, en las tres equipos y
   en las 19 vistas que usan el atributo.

   Lo destapo el E2E del corte vertical: al acabar el combate, la vista pone
   `zona.hidden = true` sobre el `.fila` de las acciones y los botones de
   atacar seguian en pantalla. Igual pasaba con el boton «Iniciar combate»,
   que nace `hidden` y se veia siempre, y con el panel de participantes.

   `!important` aqui es correcto y no un parche: `hidden` significa «esto no
   esta», y ninguna regla de presentacion deberia poder contradecirlo. */
[hidden] {
  display: none !important;
}

/* Contenedor de pagina. 1360 px es la resolucion de referencia del SRS. */
.pagina {
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--e-6) var(--e-5);
}

/* Pila vertical con ritmo. Lo que le faltaba a los formularios: .campo
   separa su etiqueta de su control, pero no un campo del siguiente. */
.pila {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}

.pila--compacta { gap: var(--e-3); }
.pila--amplia   { gap: var(--e-6); }

/* Fila de elementos que reparten el ancho a partes iguales. En Pantalla 1
   son los dos campos de arriba; a 1024 px se apilan en vez de estrujarse. */
.fila {
  display: flex;
  gap: var(--e-6);
  flex-wrap: wrap;
}

.fila > * { flex: 1 1 280px; }

/* UX-R4.3 — un boton dentro de una fila no es un campo.
   `.fila > *` reparte el ancho a partes iguales, que es lo que quieren dos
   campos, y ademas los estira en vertical para igualar alturas. Aplicado a un
   boton daba el resultado de `sanciones-admin` y `tablero-tecnico`: el de
   buscar salia ocupando media pantalla y tan alto como la etiqueta mas el
   campo juntos, con la palabra flotando en medio. No parecia un boton, parecia
   un panel. Se queda de su tamano y se alinea con el control, no con la
   etiqueta que tiene encima. */
.fila > .boton {
  flex: 0 0 auto;
  align-self: flex-end;
}

/* UX-R4.8 — una pildora de estado tampoco es un campo. En «Notificaciones»
   la fila es el titulo «Bandeja» y el estado del canal, asi que el reparto a
   partes iguales dejaba «Reconectando…» dentro de una pildora de 630 px con
   la palabra a la izquierda y medio panel de color vacio detras. Una pildora
   dice algo corto: se ciñe a lo que dice y se va al otro extremo de la fila.
   Mismo defecto que el boton de arriba, encontrado mirando la captura. */
.fila > .conexion {
  flex: 0 0 auto;
  align-self: center;
}

/* Acciones de un formulario: alineadas a la derecha, como en el diseno. */
.acciones {
  display: flex;
  gap: var(--e-3);
  justify-content: flex-end;
  align-items: center;
}

/* --- Titulos ------------------------------------------------------- */

h1, .t-titulo {
  margin: 0;
  font-family: var(--t-titulo-familia);
  font-size: var(--t-titulo-tam);
  font-weight: var(--t-titulo-peso);
  line-height: var(--t-titulo-alto);
  color: var(--tinta);
}

h2, .t-subtitulo {
  margin: 0;
  font-family: var(--t-subtitulo-familia);
  font-size: var(--t-subtitulo-tam);
  font-weight: var(--t-subtitulo-peso);
  line-height: var(--t-subtitulo-alto);
  color: var(--tinta);
}

.t-etiqueta {
  font-family: var(--t-etiqueta-familia);
  font-size: var(--t-etiqueta-tam);
  font-weight: var(--t-etiqueta-peso);
  line-height: var(--t-etiqueta-alto);
}

.t-cuerpo {
  font-family: var(--t-cuerpo-familia);
  font-size: var(--t-cuerpo-tam);
  font-weight: var(--t-cuerpo-peso);
  line-height: var(--t-cuerpo-alto);
}

.t-meta {
  font-family: var(--t-meta-familia);
  font-size: var(--t-meta-tam);
  font-weight: var(--t-meta-peso);
  line-height: var(--t-meta-alto);
  color: var(--tinta-3);
}

p { margin: 0 0 var(--e-3); }
p:last-child { margin-bottom: 0; }

/* --- Enlaces ------------------------------------------------------- */

a {
  color: var(--tinta-enlace);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transicion);
}

a:hover { color: var(--tinta-enlace-hover); }

/* --- Foco ---------------------------------------------------------- */
/* Un unico estilo de foco, y solo cuando se navega con teclado.       */

:focus-visible {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
  box-shadow: var(--anillo-foco);
  border-radius: var(--radio-chico);
}

/* UX-R3.11 — Un elemento con `tabindex="-1"` no se alcanza con el teclado: el
   unico modo de que reciba el foco es que un script se lo de, y ahi el anillo
   no informa de nada; informa, en falso, de que ahi se puede escribir.
   El <h2> del dialogo de validacion de heroe se lleva el foco al abrirse para
   que el lector de pantalla anuncie de que va el dialogo, y salia con un
   rectangulo redondeado a todo lo ancho: en la captura se lee como un campo de
   texto vacio con un marcador de posicion dentro.
   El foco SIGUE moviendose -eso es lo que necesita el lector de pantalla-; lo
   que se quita es el dibujo. */
[tabindex='-1']:focus-visible {
  outline: none;
  box-shadow: none;
}

/* --- Utilidad de accesibilidad ------------------------------------- */
/* Texto que solo leen los lectores de pantalla. Se usa, por ejemplo,
   para dar contexto a una barra de vida o a un icono sin etiqueta.    */

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}