/* Hoja única. Sin framework: la app no tiene paso de compilación.
 *
 * El diseño sale de la plantilla «UI Design / Web Template» que pasó el
 * usuario (PSD de 1440×8000). Lo que se ha copiado de ella:
 *
 *   - un lienzo PLANO casi negro, sin tarjetas de otro color encima: lo que
 *     separa las cosas es una línea de 1px, no un relleno;
 *   - esquinas RECTAS, sin radio, en todo: cajas, botones, campos y chips;
 *   - un solo color de acento, usado con cuentagotas, y el resto en blanco y
 *     gris;
 *   - los rótulos pequeños en MAYÚSCULAS muy espaciadas, y los titulares en
 *     negrita con un subrayado corto del color de acento;
 *   - las tarjetas numeradas con su pestañita «.01» encima del borde;
 *   - el pie como un bloque macizo de color.
 *
 * Los colores son la paleta de fantasía oscura que dio el usuario
 * (27-09-2026): fondos abisales, carmesí para la interacción y grises y
 * blancos para que ningún texto se pierda. Están todos en :root, con el
 * nombre que les puso él.
 *
 * Dos valores los he tenido que derivar, y los dos por contraste; el resto de
 * la paleta va tal cual y todos sus pares cumplen AA:
 *
 *   --acento-texto  #ff3b57  el carmesí #d90429 como LETRA pequeña sobre el
 *                            fondo se queda en 3,9:1, y hace falta 4,5:1
 *   --borde-campo   #6b6b6b  el borde #3d3d3d sobre una tarjeta se queda en
 *                            1,7:1 y el campo no se veía (hace falta 3:1)
 */

:root {
  /* Tema oscuro y nada más: la paleta es de fantasía oscura y no tiene versión
     clara. Declararlo hace que los <select>, las casillas y las barras de
     scroll del navegador salgan oscuras aunque el sistema esté en claro. */
  color-scheme: dark;

  /* --- superficies: la base y la profundidad --------------------------- */
  --fondo: #050505;              /* negro abisal */
  --tarjeta: #121212;            /* tarjetas y paneles */
  --elevada: #1f1f1f;            /* tercer nivel, para lo anidado */

  /* --- texto: jerarquía ------------------------------------------------ */
  --texto: #f2f2f2;              /* sobre el fondo; blanco suave, no puro */
  --texto-tarjeta: #e6e6e6;      /* cuerpos de texto dentro de una tarjeta */
  --texto-tenue: #8c8c8c;        /* descripciones, pistas, subtítulos */

  /* --- acciones: el foco visual ---------------------------------------- */
  --acento: #d90429;             /* carmesí: rellenos, botones, activos */
  --sobre-acento: #ffffff;
  --acento-suave: #4a0008;       /* contenedor: filas elegidas, pie */
  --sobre-acento-suave: #ffd1d6;
  /* El carmesí RELLENO cumple de sobra (blanco encima, 5,3:1), pero como
     TEXTO pequeño sobre el fondo se queda en 3,9:1 y sobre una tarjeta en
     3,6:1 — por debajo del 4,5:1 que pide un texto normal. Así que el mismo
     carmesí, aclarado, para todo lo que sea letra o borde de estado: 5,4:1
     sobre tarjeta. Es el único color de la paleta que he tenido que derivar. */
  --acento-texto: #ff3b57;

  /* --- acentos secundarios: botones tonales ---------------------------- */
  --secundario: #2b2b2b;
  --sobre-secundario: #ffffff;
  --secundario-suave: #1a1a1a;
  --sobre-secundario-suave: #cccccc;

  /* --- terciario: la insignia blanca, para romper el rojo y el negro --- */
  --terciario: #ffffff;
  --sobre-terciario: #000000;
  --terciario-suave: #333333;
  --sobre-terciario-suave: #ffffff;

  /* --- bordes ---------------------------------------------------------- */
  --borde: #3d3d3d;              /* divisores y cabeceras de tabla */
  --borde-sutil: #242424;        /* separa tarjetas casi sin verse */
  /* Un borde que delimita un campo tiene que distinguirse del fondo (regla
     1.4.11: 3:1). #3d3d3d sobre #121212 se queda en 1,7:1 y el campo
     desaparecía, así que los campos y los botones de contorno llevan éste. */
  --borde-campo: #6b6b6b;

  /* --- estado: distinto del carmesí a propósito ------------------------ */
  --mal: #ff3300;                /* error Y advertencia: más cálido, eléctrico */
  --mal-suave: #330a00;
  --sobre-mal-suave: #ffb8a3;

  /* Los dos símbolos de variante, en SVG dentro del propio token: la app no
     tiene paso de compilación y así no hay un archivo suelto que se quede sin
     publicar. Se usan como máscara, así que el `fill` da igual: lo pone
     `.marca` con un color de la paleta. */
  --simbolo-shiny: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.4 0 11 5 16 6.6 11 8.2 9.4 13.2 7.8 8.2 2.8 6.6 7.8 5Z'/%3E%3Cpath d='M3.2 9.6 3.9 11.7 6 12.4 3.9 13.1 3.2 15.2 2.5 13.1 0.4 12.4 2.5 11.7Z'/%3E%3C/svg%3E");
  --simbolo-alpha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.4' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Ccircle cx='8' cy='8' r='2.2'/%3E%3C/svg%3E");

  --radio: 0px;
  --fuente: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Los rótulos de la plantilla: mayúsculas, pequeñas y muy separadas. */
  --rotulo: 700 0.68rem/1.4 var(--fuente);
  --espaciado-rotulo: 0.14em;
  --ancho: 1180px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  /* El pie es un bloque de color macizo, así que tiene que quedar pegado al
     final de la ventana: si no, en una vista corta se veía flotando en medio
     con lienzo por debajo. */
  min-height: 100vh;
  min-height: 100dvh;   /* en el móvil, sin contar la barra del navegador */
  display: flex;
  flex-direction: column;
}
.vista { flex: 1 0 auto; }
/* En un contenedor flex, un `margin: 0 auto` deja de estirar al hijo y lo
   encoge a su contenido: la cabecera y las pestañas salían centradas y
   estrechas. Con el ancho al 100 % vuelven a mandar su max-width y su margen. */
body > * { width: 100%; }

/* ---------------------------------------------------------------- cabecera */
/* La barra de la plantilla: la marca a la izquierda, un cuadro con borde a la
   derecha («EDITION 2022»), y una línea que cruza por debajo. */

.cabecera {
  max-width: var(--ancho); margin: 0 auto;
  padding: 18px 16px 14px;
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--borde);
}
.cabecera h1 {
  margin: 0; font-size: 1.05rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  display: flex; align-items: center; gap: 10px;
}
/* El cuadradito de la plantilla, delante del logo. */
.cabecera h1::before {
  content: ""; width: 10px; height: 10px; background: var(--acento); flex: none;
}
.cabecera .tenue { color: var(--texto-tenue); font-weight: 400; letter-spacing: 0.1em; }
.lema {
  margin: 4px 0 0; color: var(--texto-tenue); font-size: 0.86rem;
  flex: 1 1 260px;
}
.edicion {
  border: 1px solid var(--borde); padding: 6px 12px;
  font: var(--rotulo); letter-spacing: var(--espaciado-rotulo);
  text-transform: uppercase; color: var(--texto-tenue);
  white-space: nowrap; margin-left: auto;
}
.edicion b { display: block; color: var(--texto); font-size: 0.82rem; letter-spacing: 0.06em; }

/* ------------------------------------------------------------------ pestañas */
/* En la plantilla el menú no son botones: son palabras en mayúsculas y la
   activa lleva un subrayado corto. */

.pestanas {
  display: flex; gap: 2px; padding: 0 16px;
  max-width: var(--ancho); margin: 0 auto; overflow-x: auto;
  border-bottom: 1px solid var(--borde);
}
.pestanas button {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--texto-tenue); font: var(--rotulo); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: var(--espaciado-rotulo);
  padding: 14px 14px 11px; cursor: pointer; white-space: nowrap;
  border-radius: 0; width: auto;
}
.pestanas button:hover { color: var(--texto); }
.pestanas button.activa { color: var(--texto); border-bottom-color: var(--acento); }

/* --------------------------------------------------------- barra de crianzas */
/* Transversal a las pestañas: cambiar de crianza cambia Objetivo, Plan y
   Entrenamiento a la vez. Por eso va encima de ellas y no dentro de una vista. */

.crianzas {
  max-width: var(--ancho); margin: 0 auto; padding: 12px 16px 0;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
}
.crianzas-lista { display: flex; gap: 6px; overflow-x: auto; flex: 0 1 auto; max-width: 100%; padding-bottom: 2px; }
.crianza {
  background: none; border: 1px solid var(--borde); color: var(--texto-tenue);
  font: inherit; cursor: pointer; border-radius: 0;
  padding: 6px 14px; white-space: nowrap; text-align: left; line-height: 1.25;
  /* El sprite a la izquierda y el nombre con su estado apilados a la derecha;
     sin el envoltorio `.crianza-texto` el flex los pondría los tres en fila. */
  display: flex; align-items: center; gap: 8px;
}
.crianza-texto { display: flex; flex-direction: column; }
.crianza:hover { color: var(--texto); border-color: var(--borde-campo); }
.crianza.activa {
  color: var(--sobre-acento-suave); border-color: var(--acento);
  background: var(--acento-suave);
}
.crianza-nombre {
  display: block; font-weight: 700; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.crianza-estado {
  display: block; font: var(--rotulo); font-size: 0.64rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--texto-tenue);
}
.crianza-estado.bien { color: var(--terciario); }
.crianza-estado.ojo { color: var(--mal); }
.crianza-estado.mal { color: var(--mal); }
/* Dentro de la crianza activa el fondo ya es el contenedor primario, y el rojo
   de estado encima se queda en 4,4:1. Se usa el tono claro de la misma familia
   —el mismo que la paleta da para el texto sobre el contenedor de error— que
   ahí sube a 9,8:1 y no pierde el matiz cálido. */
.crianza.activa .crianza-estado.ojo,
.crianza.activa .crianza-estado.mal { color: var(--sobre-mal-suave); }
.crianzas-acciones { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.crianzas-renombrar { display: flex; gap: 6px; flex: 1 1 100%; }
.crianzas-renombrar input { flex: 1; }
.crianzas-conflicto {
  flex: 1 1 100%; margin: 0; font-size: 0.8rem; color: var(--texto-tenue);
}

.vista { max-width: var(--ancho); margin: 0 auto; padding: 22px 16px 56px; }
.cuando-barra .fila { align-items: flex-end; }
.sig { display: inline-flex; gap: 4px; }
.barra-seleccion { align-items: center; margin-bottom: 10px; min-height: 30px; }

/* El pie de la plantilla es un bloque macizo del color de la marca. Aquí es el
   azul de PokeMMO, con el texto en oscuro encima. */
.pie {
  background: var(--acento-suave); color: var(--sobre-acento-suave);
  margin-top: 8px; padding: 26px 16px 30px;
  font-size: 0.85rem;
}
.pie > * { max-width: var(--ancho); margin-left: auto; margin-right: auto; }
.pie p { margin: 6px auto; }
.pie a { color: var(--sobre-acento-suave); text-decoration: underline; text-underline-offset: 3px; }
.pie .tenue { color: #eda9b1; }
.pie code { background: rgb(255 209 214 / 0.14); padding: 1px 5px; }

a { color: var(--acento-texto); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- bloques */
/* Una tarjeta de la plantilla no tiene fondo propio: es un rectángulo con una
   línea de 1px alrededor, y su título va en mayúsculas con un subrayado corto
   del color de acento. */

.tarjeta {
  background: var(--tarjeta); color: var(--texto-tarjeta); border: 1px solid var(--borde-sutil);
  border-radius: 0; padding: 18px 18px 20px; margin-bottom: 14px;
}
.tarjeta > h2, .tarjeta > h3 { margin-top: 0; }
.tarjeta > h3 { margin-top: 22px; }
h2 {
  font-size: 0.95rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; margin: 0 0 14px;
  padding-bottom: 8px; position: relative;
}
h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 34px; height: 2px; background: var(--acento);
}
h3 {
  font: var(--rotulo); text-transform: uppercase;
  letter-spacing: var(--espaciado-rotulo); color: var(--texto-tenue);
  margin: 20px 0 8px;
}

/* Un bloque plegable con el mismo aire que una tarjeta. Lo secundario se
   guarda aquí en vez de ocupar pantalla: importar, el árbol, la copia. */
.plegable { padding-top: 14px; padding-bottom: 14px; }
.plegable > summary {
  cursor: pointer; font-weight: 800; font-size: 0.86rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  list-style-position: outside;
}
.plegable > summary::marker { color: var(--acento-texto); }
.plegable[open] > summary { margin-bottom: 14px; }
.plegable .sumario-extra {
  font-weight: 400; color: var(--texto-tenue); font-size: 0.78rem;
  text-transform: none; letter-spacing: 0;
}

.rejilla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.crece { flex: 1 1 200px; }

label {
  display: block; font: var(--rotulo); text-transform: uppercase;
  letter-spacing: var(--espaciado-rotulo); color: var(--texto-tenue); margin-bottom: 6px;
}

/* Los campos de la plantilla: sin relleno de color, línea de 1px, y al entrar
   se enciende del color de acento. */
input, select, textarea, button {
  font: inherit; color: var(--texto); background: var(--elevada);
  border: 1px solid var(--borde-campo); border-radius: 0; padding: 9px 11px; width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--acento-texto);
}
input[type="checkbox"] { width: auto; accent-color: var(--acento); }
textarea { min-height: 90px; font-family: var(--mono); font-size: 0.8rem; }

/* Se pone también en <label> y en <a>, así que trae su propia caja: los
   <label> no entran en la regla de arriba y salían sin borde ni relleno. */
.boton {
  display: inline-block; width: auto;
  padding: 9px 16px; border: 1px solid var(--acento); border-radius: 0;
  background: var(--acento); color: var(--sobre-acento);
  font: var(--rotulo); text-transform: uppercase; letter-spacing: var(--espaciado-rotulo);
  line-height: 1.4; text-decoration: none; cursor: pointer;
}
.boton:hover { background: var(--acento-vivo); border-color: var(--acento-vivo); }
/* El botón tonal de la paleta: presente pero sin distraer. */
.boton.secundario {
  background: var(--secundario-suave); color: var(--sobre-secundario-suave);
  border-color: var(--borde-campo);
}
.boton.secundario:hover { background: var(--secundario); color: var(--sobre-secundario); }
.boton.peligro { background: none; color: var(--mal); border-color: var(--mal); }
.boton.peligro:hover { background: none; color: var(--mal); border-color: var(--mal); filter: brightness(1.2); }
.boton.mini { padding: 5px 10px; font-size: 0.62rem; }

/* ---------------------------------------------------------------- sprites */

/* La imagen de cada Pokémon la sirve el volcado de PokeAPI, que es lo que
   enlaza la wiki: ni este repositorio ni la wiki guardan un byte de imagen.
   Por eso cada sprite reserva su hueco con medidas fijas — sin ellas, una
   lista de treinta capturas pega un salto cuando van llegando las imágenes. */
.sprite {
  flex: none; display: inline-block; vertical-align: middle;
  object-fit: contain; background: var(--elevada);
  border: 1px solid var(--borde-sutil);
}
.sprite-mini   { width: 26px; height: 26px; }
.sprite-normal { width: 46px; height: 46px; }
.sprite-grande { width: 96px; height: 96px; }

/* Cuando no hay imagen no se pone la de otra especie: se deja el hueco dicho,
   con el porqué en el `title`. Es la regla 2 del repositorio, la misma que rige
   los datos. El interrogante va en un `::after` y no como texto del nodo: así
   no entra en el `textContent` del nombre que tiene al lado. */
.sprite-hueco {
  display: inline-flex; align-items: center; justify-content: center;
  border-style: dashed; border-color: var(--borde); background: var(--secundario-suave);
}
.sprite-hueco::after {
  content: '?';
  font: var(--rotulo); letter-spacing: var(--espaciado-rotulo); color: var(--texto-tenue);
}
.sprite-grande.sprite-hueco::after { font-size: 1.05rem; }

/* --- las dos marcas de variante ---------------------------------------- */
/* El símbolo va como MÁSCARA sobre un fondo de color, no como texto ni como
   imagen de color fijo. Dos razones y las dos han costado caro antes:
   un carácter dentro del nodo entra en el `textContent` del nombre que tiene al
   lado («RARattata»), y una imagen con el color quemado se sale de la paleta.
   Así el color es un token y el nodo está vacío.

   El destello es el del variocolor y el anillo es el CONTORNO ROJO con el que
   el juego marca a un Alpha. El color, en cambio, es de la paleta: los dos van
   en la insignia blanca, porque el carmesí es de las acciones y el rojo
   anaranjado de las alertas, y un tercer rojo era justo lo que la paleta evita.
   Lo que distingue a una de otra es la forma. */
.marca {
  flex: none; display: inline-block; vertical-align: middle;
  width: 13px; height: 13px;
  background: var(--terciario);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.marca-shiny {
  -webkit-mask-image: var(--simbolo-shiny); mask-image: var(--simbolo-shiny);
}
.marca-alpha {
  -webkit-mask-image: var(--simbolo-alpha); mask-image: var(--simbolo-alpha);
}
/* Dentro de una casilla el símbolo va pegado al texto, no suelto. */
.iv .marca { margin-right: 2px; }

/* Sprite y nombre leídos como una sola cosa. */
.con-sprite { display: inline-flex; align-items: center; gap: 8px; }

/* La cabecera de Objetivo: el Pokémon a la izquierda y sus etiquetas al lado. */
.ficha-especie { display: flex; gap: 14px; align-items: flex-start; margin-top: 10px; }
.ficha-especie .etiquetas { flex: 1; min-width: 0; }
/* En el móvil el sprite grande se come el ancho que necesitan los chips, que
   van en `nowrap` a propósito, y la página acababa con scroll horizontal:
   «Grupo huevo: Monstruo / Dragón» mide 271 px y sólo le quedaban 248. */
@media (max-width: 560px) {
  .ficha-especie .sprite-grande { width: 56px; height: 56px; }
}
/* `.chip` va más abajo y fija `display: inline-block`; aquí hace falta el flex
   para que el sprite y el texto se alineen, y por eso la regla es más
   específica en vez de ir arriba con las demás. */
.chip.con-sprite { display: inline-flex; padding: 2px 9px 2px 2px; gap: 6px; }

/* Los dos botones de una fila de revisión, juntos y sin partirse: en modo
   corrección la fila se llena de campos y la última columna es la primera que
   el navegador intenta encoger. */
.fila-acciones { display: flex; gap: 6px; flex-wrap: nowrap; }
td:has(.fila-acciones) { white-space: nowrap; width: 1%; }
.fila-acciones .boton { flex: none; }
/* En modo corrección la fila se llena de campos: apretados, que son catorce. */
td input { padding: 5px 7px; font-size: 0.82rem; }
/* Sin la ruedecita: en una fila de seis IVs se come la mitad del ancho y los
   números salían cortados («3» por «31»). Se escriben a mano, que es más rápido. */
td input[type="number"] { text-align: right; -moz-appearance: textfield; appearance: textfield; }
td input[type="number"]::-webkit-outer-spin-button,
td input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ------------------------------------------------------- características */

/* Una fila por característica: nombre, base, barra y el número final.
   La rejilla es fija a los lados y elástica en el medio, que es lo que deja
   que la barra encoja en el móvil sin que se desalineen las columnas. */
.stats { display: grid; gap: 7px; margin: 10px 0 8px; }
.stat {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: minmax(78px, 112px) 30px 1fr 44px;
}
.stat-nombre {
  font: var(--rotulo); letter-spacing: var(--espaciado-rotulo);
  text-transform: uppercase; color: var(--texto-tenue);
}
/* La flecha de la naturaleza, en la misma línea del nombre: sólo sale en las
   dos características que toca, así que una columna propia sería aire. */
.stat-nat.sube { color: var(--terciario); }
.stat-nat.baja { color: var(--mal); }

.stat-base-num { font: var(--mono); font-size: 0.78rem; color: var(--texto-tenue); text-align: right; }
.stat-cifra { font-size: 0.95rem; text-align: right; }

/* La barra: la BASE en gris y encima, en la insignia blanca, lo que suman los
   IVs y los EVs. Los dos tramos van en la misma unidad —puntos de base— y eso
   es exacto, no un apaño: ver nucleo/estadisticas.js.
   El carmesí no entra aquí. Es el color de las acciones, y una barra de datos
   no lo es; la imagen de referencia graduaba el color por valor (rojo, verde,
   azul) y esa escala no existe en esta paleta. */
.stat-barra {
  display: flex; height: 14px; background: var(--elevada);
  border: 1px solid var(--borde-sutil); overflow: hidden;
}
.stat-tramo-base { background: var(--texto-tenue); }
.stat-tramo-bono { background: var(--terciario); }

.leyenda { font-size: 0.78rem; color: var(--texto-tenue); margin: 0 0 12px; }
.muestra {
  display: inline-block; width: 22px; height: 9px; vertical-align: middle;
  border: 1px solid var(--borde-sutil); margin-right: 3px;
}
.muestra.base { background: var(--texto-tenue); }
.muestra.bono { background: var(--terciario); }

/* En el móvil el nombre no cabe al lado de la barra: se va arriba, a lo ancho,
   y debajo quedan la base, la barra y la cifra. */
@media (max-width: 560px) {
  .stat { grid-template-columns: 30px 1fr 42px; }
  .stat-nombre { grid-column: 1 / -1; }
}

/* Cada IV de regalo, en su bloque: qué es, quién lo trae y qué hacer con él. */
.regalo { border-top: 1px solid var(--borde-sutil); padding: 10px 0 2px; }
.regalo:first-of-type { border-top: 0; }
.fila-regalo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* La línea evolutiva de Entrenamiento: las caras en fila con su flecha. */
.linea-evolutiva { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 10px; }
.linea-evolutiva .flecha { color: var(--texto-tenue); }

/* --------------------------------------------------------------- utilería */

.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  /* nowrap: al partirse en dos líneas quedaba un rótulo ilegible, y en el
     móvil pasaba en cada tabla. */
  display: inline-block; white-space: nowrap; padding: 3px 9px; border-radius: 0;
  background: none; border: 1px solid var(--borde);
  font: var(--rotulo); font-size: 0.64rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--texto-tenue);
}
/* El carmesí se reserva para lo que ES una acción o una alerta. Un chip que
   sólo informa («grupo huevo: Monstruo», «3 cruces») va en el contenedor
   terciario: presente, neutro, y deja de haber dos rojos casi iguales al lado
   que se confundían entre sí. */
.chip.si {
  background: var(--terciario-suave); color: var(--sobre-terciario-suave);
  border-color: var(--borde);
}
/* La insignia blanca de la paleta, para «esto ya está»: rompe el rojo y el
   negro y es donde se va el ojo. */
.chip.bien {
  background: var(--terciario); color: var(--sobre-terciario);
  border-color: var(--terciario);
}
/* El error y el aviso comparten color a propósito —lo pide la paleta—, pero no
   la forma: el aviso es un contorno y el error va relleno. */
.chip.mal, .chip.ojo { color: var(--mal); border-color: var(--mal); }

/* Un aviso y un error sí son cajas: interrumpen. Una nota no — era una caja
   rellena por cada párrafo explicativo y la pantalla parecía un acordeón.
   Aquí la caja es una línea gruesa a la izquierda, como los bloques de cita
   de la plantilla. */
.aviso, .error {
  border: 1px solid var(--borde-sutil); border-left: 3px solid var(--mal);
  border-radius: 0; padding: 10px 14px; margin: 12px 0; font-size: 0.88rem;
  background: none;
}
.error {
  background: var(--mal-suave); border-left-color: var(--mal);
  color: var(--sobre-mal-suave);
}
.nota { margin: 8px 0 14px; font-size: 0.84rem; color: var(--texto-tenue); }
/* La misma nota, pero al lado de un botón: sin márgenes verticales, que ahí
   separan el botón de su explicación en dos líneas. */
span.nota { margin: 0; }
.error ul, .aviso ul, .nota ul { margin: 6px 0 0; padding-left: 20px; }

.cargando { color: var(--texto-tenue); }
.vacio { color: var(--texto-tenue); font-style: italic; }

/* Interruptores de IVs: el control central del formulario de objetivo. */
.ivs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.iv {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: none; border: 1px solid var(--borde-campo);
  border-radius: 0; padding: 9px 11px; user-select: none;
}
.iv:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.iv:has(input:checked) span { color: var(--sobre-acento-suave); }
.iv span {
  font: var(--rotulo); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--texto);
}
.iv label { margin: 0; }

.regiones { display: flex; gap: 8px; flex-wrap: wrap; }
.regiones .iv { flex: 0 0 auto; }

/* ------------------------------------------------------------------ tabla */

table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde-sutil); }
th {
  color: var(--texto-tenue); font: var(--rotulo); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: var(--espaciado-rotulo);
  border-bottom-color: var(--borde);
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.desliza { overflow-x: auto; }

/* ------------------------------------------------------------- pasos/árbol */
/* Las tarjetas numeradas de la plantilla: el número va en su propio cuadrito,
   montado sobre el borde de arriba. */

.pasos { list-style: none; padding: 0; margin: 14px 0 0; counter-reset: paso; }
.pasos li {
  position: relative; padding: 16px 14px 12px 14px; margin-bottom: 14px;
  background: var(--elevada); border: 1px solid var(--borde-sutil); border-radius: 0;
}
.pasos li::before {
  counter-increment: paso; content: "." counter(paso, decimal-leading-zero);
  position: absolute; left: -1px; top: -12px;
  /* El fondo de la pestañita es el de la TARJETA que contiene la lista, no el
     del paso: así tapa el borde y se monta encima, como en la plantilla. */
  padding: 1px 8px; background: var(--tarjeta);
  border: 1px solid var(--borde);
  color: var(--texto-tenue); font: var(--rotulo); font-size: 0.62rem;
  letter-spacing: 0.1em;
}
.pasos li.usar::before {
  background: var(--terciario); color: var(--sobre-terciario); border-color: var(--terciario);
}
.pasos li.conseguir::before { color: var(--acento-texto); border-color: var(--acento-texto); }
.pasos .porque { display: block; color: var(--texto-tenue); font-size: 0.8rem; margin-top: 6px; }

/* Checklist: un paso hecho se apaga, y el que ya se puede hacer se enciende. */
.pasos li.hecho { opacity: 0.55; }
.pasos li.listo { border-color: var(--acento); }
.pasos li.cruzar:not(.listo) { opacity: 0.8; }
.pasos .marca { display: none; }
.pasos li .boton.mini { margin-top: 10px; }
.pequeno > summary {
  cursor: pointer; font: var(--rotulo); font-size: 0.64rem;
  text-transform: uppercase; letter-spacing: var(--espaciado-rotulo);
  color: var(--texto-tenue); margin: 10px 0;
}
.pequeno { font-size: 0.88rem; }
.listos { list-style: none; padding: 0; margin: 0 0 4px; }
.listos li {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: 10px 12px; margin-bottom: 8px; font-size: 0.88rem;
  background: var(--elevada); border: 1px solid var(--acento); border-radius: 0;
}
.pequeno ol, .pequeno ul { margin: 8px 0; padding-left: 20px; }

.arbol { list-style: none; padding-left: 0; margin: 0; }
.arbol ul { list-style: none; margin: 0; padding-left: 20px; border-left: 1px solid var(--borde); }
.arbol li { padding: 3px 0 3px 10px; font-size: 0.86rem; }
.arbol .nodo { display: inline-flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.arbol .obj { font-size: 0.76rem; color: var(--texto-tenue); font-family: var(--mono); }

/* El número grande de la plantilla: mucho peso y el acento al lado. */
.total {
  font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

@media (max-width: 560px) {
  .cabecera { padding: 14px 16px 12px; }
  .cabecera h1 { font-size: 0.95rem; }
  .lema { font-size: 0.8rem; }
  /* En el móvil la cabecera se comía media pantalla antes de enseñar nada. La
     fecha de los datos sigue estando en el pie. */
  .edicion { display: none; }
  .vista { padding: 16px 16px 40px; }
  .pestanas button { padding: 12px 10px 9px; font-size: 0.66rem; letter-spacing: 0.1em; }
  .crianzas { padding: 10px 12px 0; }
  .crianzas-acciones { width: 100%; }
  .tarjeta { padding: 16px 14px 18px; }
  .pie { padding: 22px 16px 26px; }
}

/* --------------------------------------------------- autocompletado propio */
/* El <datalist> nativo no lista nada en Android Chrome, así que la lista se
   pinta a mano. Ver campoConSugerencias() en src/ui/componentes.js. */

.campo-sug { position: relative; }
.sug-caja { position: relative; }

.sug-lista {
  position: absolute;
  z-index: 40;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 44vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--elevada);
  border: 1px solid var(--acento);
  border-radius: 0;
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.45);
  -webkit-overflow-scrolling: touch;
}
.sug-lista[hidden] { display: none; }

/* Con `conSprites` la opción lleva la cara del Pokémon delante del nombre, así
   que es flex; sin él sigue siendo una línea de texto y el flex no estorba. */
.sug-opcion {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 0;
  /* Alto cómodo para el dedo: en el móvil una lista apretada es inusable. */
  padding: 11px 12px;
  color: var(--texto);
  cursor: pointer;
  font: inherit;
}
.sug-opcion:hover, .sug-opcion.resaltada { background: var(--acento-suave); color: var(--sobre-acento-suave); }