/*
 * Hoja de estilo única del sitio público de T-kall.
 *
 * POR QUÉ UN SOLO ARCHIVO Y SIN NADA DE FUERA: una web que promete privacidad y
 * carga una fuente de Google o una analítica de terceros está contradiciéndose
 * en la primera petición HTTP, antes de que nadie lea una sola línea. Aquí no
 * hay CDN, ni fuentes remotas, ni scripts: el navegador solo habla con
 * t-kall.com. Eso también significa que el sitio se puede auditar entero
 * abriendo cuatro HTML y este CSS.
 *
 * POR QUÉ LA PILA DE FUENTES DEL SISTEMA: además de no depender de nadie, el
 * texto se pinta con la fuente que el usuario ya tiene y no hay salto visual
 * mientras carga. En un móvil con red mala eso es la diferencia entre leer al
 * instante y mirar un hueco en blanco.
 */

/* --------------------------------------------------------------- variables */
/*
 * Los colores salen del icono de la app, para que quien llegue de la tienda
 * reconozca que es lo mismo.
 *
 * CORRECCION 15-08-2026: ya no lo hacian. Aqui decia "verde #00a884", y ese
 * verde NO sale del icono de T-kall: salia de un bocadillo generico dibujado a
 * mano en la cabecera de estas paginas -que ademas usaba el verde de otra app de
 * mensajeria-. El icono de verdad es la espiral azul sobre pizarra
 * (sitio/icon-192.png, el mismo que el cliente). El cliente ya se habia movido a
 * azul (web/src/estilos/base.css, "PALETA: azul cielo"), y su cabecera afirmaba
 * que coincidia con este fichero: era falso desde entonces. Ahora coincide.
 *
 * LOS TONOS NO SON UNA COPIA LITERAL DEL CLIENTE, y el motivo es el fondo. Alli
 * el fondo es oscuro (#111b21) y un acento claro contrasta solo; aqui el fondo es
 * BLANCO, asi que el azul claro del cliente (#29a9e0) no vale para texto: da 4,1
 * sobre blanco y AA pide 4,5. Por eso `--verde-oscuro` y `--enlace` son mas
 * oscuros que el `--wa-green-dark` del cliente: 5,98 sobre blanco, medido.
 *
 * Las variables siguen llamandose `--verde` por lo mismo que en el cliente: el
 * nombre esta en decenas de reglas y renombrarlo es mas riesgo que valor. Lo que
 * hay dentro YA NO ES VERDE. Si alguien lo renombra a `--acento`, que lo haga en
 * el sitio y en los dos clientes a la vez.
 */
:root {
  color-scheme: light dark;

  /* El acento de marca, identico al `--wa-green` del cliente. */
  --verde: #29a9e0;
  /* Version oscura: para texto blanco encima y para enlaces sobre blanco. */
  --verde-oscuro: #166a92;

  --fondo: #ffffff;
  --fondo-alt: #f4f6f5;
  --fondo-caja: #ffffff;
  --texto: #17211e;
  --texto-suave: #4d5c57;
  --borde: #dde3e1;
  --enlace: #166a92;

  /* Cajas de aviso: la amarilla advierte, la roja marca lo que falta. */
  --aviso-fondo: #fff8e1;
  --aviso-borde: #e6c34a;
  --pendiente-fondo: #fdeceb;
  --pendiente-borde: #d9534f;
  --pendiente-texto: #8c2b28;
  --si: #00795f;
  --no: #b3261e;

  --sombra: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.05);
  --radio: 14px;
  --ancho: 46rem;
}

/*
 * Modo oscuro. La mayoría de la gente entra desde el móvil y muchos lo llevan
 * en oscuro permanentemente; un sitio que ignora eso deslumbra de noche.
 */
@media (prefers-color-scheme: dark) {
  :root {
    /*
     * Los neutros iban tintados de VERDE (#0e1613 es un negro verdoso, no un gris)
     * porque acompanaban al acento verde de antes. Con el acento azul chirriaban:
     * el logo y los botones en azul sobre fondos y bordes verdosos. Se retintan a
     * pizarra, la familia del cliente (--wa-bg #111b21, --wa-text #e9edef), con la
     * MISMA claridad que tenian para no tocar ningun contraste ya validado.
     *
     * `--si` y `--no` NO se tocan: ahi el verde y el rojo no son la marca, son el
     * significado -lo que protege y lo que no-, y ese par se lee sin leer.
     */
    --fondo: #0e151a;
    --fondo-alt: #131c22;
    --fondo-caja: #172128;
    --texto: #e9edef;
    --texto-suave: #a4b2bb;
    --borde: #273239;
    /* Azul claro sobre fondo oscuro: 9,5 de contraste, medido. El acento de marca
       (#29a9e0) tambien pasaria, pero este aclara un punto para igualar la
       claridad del verde que sustituye y no cambiar el peso visual del texto. */
    --enlace: #4fc8ea;

    --aviso-fondo: #2a2410;
    --aviso-borde: #7a6620;
    --pendiente-fondo: #331916;
    --pendiente-borde: #a3423d;
    --pendiente-texto: #ffb3ae;
    --si: #4fd6b0;
    --no: #ff8a80;

    --sombra: none;
  }
}

/* ------------------------------------------------------------------ básico */
* {
  box-sizing: border-box;
}

html {
  /* Sin esto, un enlace interno deja el título justo debajo de la cabecera. */
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--enlace);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Foco visible siempre: quien navega con teclado tiene que saber dónde está. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 2px;
  border-radius: 4px;
}

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: 5px;
  padding: 0.1em 0.35em;
  /* Un hash SHA-256 no cabe en un móvil: que parta en vez de desbordar. */
  overflow-wrap: anywhere;
}

/* Salto al contenido: lo primero que tabula quien usa lector de pantalla. */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  /* El acento claro, no: blanco sobre `--verde` da 2,7 y esto es texto pequeno.
     Sobre `--verde-oscuro` da 5,98. Un salto de accesibilidad ilegible seria una
     broma cruel. */
  background: var(--verde-oscuro);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 10;
}

.saltar:focus {
  left: 0;
}

/* ---------------------------------------------------------------- cabecera */
.cabecera {
  border-bottom: 1px solid var(--borde);
  background: var(--fondo);
  position: sticky;
  top: 0;
  z-index: 5;
}

.cabecera-interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0.7rem 1.15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--texto);
  text-decoration: none;
  letter-spacing: -0.01em;
}

/* La marca acepta <img> ademas de <svg>: el logo de T-kall es un PNG con
   degradado y relieve (la espiral dentro del bocadillo), no una figura plana
   que se pueda dibujar con dos rectangulos. Aqui habia un bocadillo generico
   #00a884 hecho a mano que no era el logo de nadie -y ese verde es, ademas, el
   de otra aplicacion de mensajeria-. */
.marca svg,
.marca img {
  width: 30px;
  height: 30px;
  flex: none;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-left: auto;
  font-size: 0.95rem;
}

.menu a {
  color: var(--texto-suave);
  text-decoration: none;
  padding: 0.15rem 0;
  border-bottom: 2px solid transparent;
}

.menu a:hover {
  color: var(--texto);
  border-bottom-color: var(--borde);
}

/* La página actual se marca con aria-current, no con una clase suelta: así el
   lector de pantalla dice lo mismo que se ve. */
.menu a[aria-current="page"] {
  color: var(--texto);
  font-weight: 600;
  border-bottom-color: var(--verde);
}

/* ---------------------------------------------------------------- contenido */
main {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 1.6rem 1.15rem 3rem;
}

h1 {
  font-size: clamp(1.75rem, 5.5vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0.6rem 0 0.5rem;
}

h2 {
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 2.4rem 0 0.6rem;
  padding-top: 0.2rem;
}

h3 {
  font-size: 1.08rem;
  margin: 1.6rem 0 0.4rem;
}

p,
ul,
ol {
  margin: 0.7rem 0;
}

li {
  margin: 0.35rem 0;
}

.entradilla {
  font-size: 1.1rem;
  color: var(--texto-suave);
}

.fecha {
  font-size: 0.88rem;
  color: var(--texto-suave);
  margin: 0;
}

.pie-nota {
  color: var(--texto-suave);
  font-size: 0.92rem;
}

/* ------------------------------------------------------------------- cajas */
.caja {
  background: var(--fondo-caja);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.1rem 1.25rem;
  margin: 1.4rem 0;
  box-shadow: var(--sombra);
}

.caja > :first-child {
  margin-top: 0;
}

.caja > :last-child {
  margin-bottom: 0;
}

.caja h2,
.caja h3 {
  margin-top: 0;
}

.aviso {
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  border-radius: var(--radio);
  padding: 1rem 1.25rem;
  margin: 1.4rem 0;
}

.aviso > :first-child {
  margin-top: 0;
}

.aviso > :last-child {
  margin-bottom: 0;
}

/*
 * Marcador de dato que FALTA. Es deliberadamente feo y rojo: el objetivo es que
 * sea imposible publicar la página sin verlo. Cuando se rellene el dato, se
 * borra la marca entera.
 */
.pendiente {
  background: var(--pendiente-fondo);
  border: 1px dashed var(--pendiente-borde);
  color: var(--pendiente-texto);
  border-radius: 6px;
  padding: 0.08em 0.4em;
  font-weight: 600;
  font-size: 0.94em;
  overflow-wrap: anywhere;
}

.caja-pendiente {
  background: var(--pendiente-fondo);
  border: 2px dashed var(--pendiente-borde);
  border-radius: var(--radio);
  padding: 1rem 1.25rem;
  margin: 1.4rem 0;
}

.caja-pendiente > :first-child {
  margin-top: 0;
}

.caja-pendiente > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------- descargas */
.descargas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.6rem 0;
}

@media (min-width: 40rem) {
  .descargas {
    grid-template-columns: 1fr 1fr;
  }
}

.descarga {
  background: var(--fondo-caja);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
}

.descarga h3 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
}

.descarga p {
  margin: 0 0 0.9rem;
  color: var(--texto-suave);
  font-size: 0.95rem;
}

.descarga > :last-child {
  margin-top: auto;
  margin-bottom: 0;
}

.boton {
  display: inline-block;
  background: var(--verde);
  /* Casi negro con un punto de azul, para acompanar al acento. Antes era
     #05231c, un negro VERDOSO que venia del acento viejo. 6,1 sobre el acento. */
  color: #052232;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--verde-oscuro);
}

.boton:hover {
  background: var(--verde-oscuro);
  color: #fff;
}

/*
 * Botón "apagado": no es un enlace, es un aviso de que todavía no hay a dónde
 * ir. Se pinta como botón inerte en vez de esconderse porque la pregunta
 * "¿está en Play?" merece una respuesta visible, no un hueco.
 */
.boton-inerte {
  display: inline-block;
  background: var(--fondo-alt);
  color: var(--texto-suave);
  border: 1px dashed var(--borde);
  font-weight: 600;
  text-align: center;
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------ listas */
/* Listas de "sí / no" con marca delante. El símbolo va en ::before y no en el
   texto para que el lector de pantalla no lea "check" en cada línea. */
.lista-si,
.lista-no {
  list-style: none;
  padding-left: 0;
}

.lista-si li,
.lista-no li {
  padding-left: 1.6rem;
  position: relative;
}

.lista-si li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--si);
  font-weight: 700;
}

.lista-no li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: var(--no);
  font-weight: 700;
}

/* ------------------------------------------------------------------ tablas */
/*
 * Una tabla no cabe en 360 px de ancho. En vez de encogerla hasta hacerla
 * ilegible, se deja rodar dentro de su propio contenedor: la página nunca se
 * desplaza en horizontal, solo la tabla.
 */
.tabla-scroll {
  overflow-x: auto;
  margin: 1.2rem 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}

/*
 * Solo las tablas que de verdad no caben llevan ancho mínimo. Ponérselo a
 * todas obligaba a desplazar en horizontal incluso la de dos columnas, que
 * entra de sobra en un móvil: el usuario veía media tabla y ninguna pista de
 * que había más a la derecha.
 */
.tabla-scroll.ancha table {
  min-width: 32rem;
}

th,
td {
  text-align: left;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}

thead th {
  background: var(--fondo-alt);
  font-weight: 600;
}

tbody tr:last-child td {
  border-bottom: none;
}

/* ---------------------------------------------------------------- detalles */
details {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.7rem 1rem;
  margin: 1rem 0;
  background: var(--fondo-caja);
}

summary {
  cursor: pointer;
  font-weight: 600;
}

details[open] summary {
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------- pie */
.pie {
  border-top: 1px solid var(--borde);
  background: var(--fondo-alt);
  margin-top: 2rem;
}

.pie-interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 1.6rem 1.15rem 2.4rem;
  font-size: 0.93rem;
  color: var(--texto-suave);
}

.pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  padding: 0;
  margin: 0 0 0.9rem;
  list-style: none;
}

.pie-interior p {
  margin: 0.45rem 0;
}

/* Impresión: la política de privacidad se acaba imprimiendo o guardando en PDF
   (para el abogado, para la ficha de Play). Que salga legible y sin la barra. */
@media print {
  .cabecera,
  .saltar {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  .caja,
  .aviso,
  .caja-pendiente,
  .tabla-scroll {
    break-inside: avoid;
  }
}