/* ANÁLISIS — la base de datos de jugadores.
   Es una pantalla de CONSULTA: se viene a buscar, comparar y salir. Manda la densidad y la
   legibilidad, no el lucimiento — el oro se guarda para lo que hay que localizar de un vistazo
   (el overall) y para lo que se mueve (subidas y bajadas). */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body { background: var(--negro); color: var(--crema); font-family: "Barlow Condensed", system-ui, sans-serif; }

.app { width: 100%; max-width: var(--ancho-app); padding-bottom: 24px; }

/* ── Cabecera ───────────────────────────────────────────────────────────────────── */
.an-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 12px 10px;
}
.an-titulo {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 26px;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--oro-claro);
}
.an-cuantos { font-size: 12px; letter-spacing: 0.5px; color: var(--crema-suave); }

/* ── Buscador y filtros ─────────────────────────────────────────────────────────── */
.an-buscador { padding: 0 12px 8px; }
.an-buscar-campo {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--panel);
  color: var(--crema);
  font: inherit;
  /* 16px o iOS hace zoom al enfocar y deja la pantalla torcida. */
  font-size: 16px;
}
.an-buscar-campo:focus { outline: none; border-color: var(--oro); }
.an-buscar-campo::placeholder { color: var(--crema-tenue); }

/* Una fila que se desliza: cuatro desplegables no caben a lo ancho de un móvil, y apilarlos
   empujaría la tabla fuera de la pantalla. */
.an-filtros {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.an-filtros::-webkit-scrollbar { display: none; }
.an-filtro {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--panel);
  color: var(--crema);
  font: inherit;
  font-size: 13px;
  /* La flecha, dibujada: el select nativo de Android la pinta enorme y desalineada. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--oro) 50%),
                    linear-gradient(135deg, var(--oro) 50%, transparent 50%);
  background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
/* EL DESPLEGABLE ABIERTO ES OTRA SUPERFICIE, Y NO SIEMPRE HEREDA. Cerrado, el `<select>` ya pinta
   bien —fondo `--panel`, texto `--crema`—, pero la LISTA que se abre al pulsar la pinta el sistema
   operativo, no esta hoja: en Windows/desktop cae al fondo claro de la lista nativa, y con el
   texto en `--crema` (casi blanco) queda casi invisible sobre casi blanco (Jepi, 3-sep-2026: "el
   texto... esta de un color parecido al fondo en desktop"). Fijar fondo y color EN EL `<option>`
   es lo que Chromium/Firefox sí respetan para esa lista; en iOS ya se veía bien porque su selector
   es una hoja propia que no usa este render. */
.an-filtro option { background: var(--panel); color: var(--crema); }

/* ── LA TABLA ───────────────────────────────────────────────────────────────────────
   Ancha y con desplazamiento lateral, como la de Biwenger (Jepi, 15-ago-2026: "que la tabla sea
   más grande aunque tengas que scrolear y tengas más datos").

   LA IDENTIDAD NO SE VA AL DESPLAZAR: posición, foto, nombre y club se quedan pegados a la
   izquierda. En una tabla de nueve columnas en un móvil, mirar un número sin saber de quién es no
   sirve de nada. */
/* EL CONTENEDOR QUE SE DESPLAZA. Uno solo, con la cabecera y las filas dentro.
   Estuvo en cada fila y NO FUNCIONABA: la fila era un `<button>`, y un botón no arrastra al
   tacto —el navegador lo trata como un control, no como algo que se desplaza—. Y aunque lo
   hiciera, habría que mover las cincuenta filas una a una. */
.an-tabla {
  overflow-x: auto;
  scrollbar-width: none;
  /* Sin esto, iOS frena en seco al soltar el dedo en vez de continuar. */
  -webkit-overflow-scrolling: touch;
  /* La cabecera y las filas miden lo mismo porque las dos crecen con su contenido dentro del
     mismo contenedor: escribir un ancho total a mano se desalinearía al tocar una columna. */
}
.an-tabla::-webkit-scrollbar { display: none; }
.an-lista { display: flex; flex-direction: column; min-width: max-content; }

/* La cabecera dice qué es cada columna, y va dentro del mismo contenedor, así que se desliza con
   las filas sin tener que sincronizar nada. */
.an-cabeza {
  display: flex;
  align-items: center;
  min-width: max-content;
  border-bottom: 1px solid var(--borde);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--crema-suave);
}
.an-cabeza-identidad {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: 0 0 auto;
  width: 186px;
  padding: 8px 10px;
  background: var(--negro);
}
.an-cabeza-col {
  /* Se declara aquí con su valor por defecto y el módulo lo sobreescribe por columna. Declararlo
     es lo que hace que no sea un token fantasma: sin esto, un cambio de nombre dejaría todas las
     columnas al ancho del respaldo y nadie se enteraría. */
  --ancho: 46px;
  flex: 0 0 auto;
  width: var(--ancho);
  text-align: center;
  padding: 8px 0;
}

/* CABECERAS PULSABLES: cada dato con `valor` en `COLUMNAS` (más el nombre) se ordena solo, de
   arriba a abajo o al revés, tocando su propia celda — igual que PUNTOS/GENERAL/1X2 en la
   clasificación de Jornada. `.an-cabeza-identidad` también puede llevar `.ordenable`, por eso el
   selector no es más específico que la clase. */
.ordenable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ordenable:hover { color: var(--crema); }
.ordenable:focus-visible { outline: 2px solid var(--oro); outline-offset: -2px; }
.ordenable.activo { color: var(--oro-claro); }

.an-fila {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 56px;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--borde);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  /* Crece con sus columnas; quien se desplaza es `.an-tabla`. */
  min-width: max-content;
}
.an-fila:active { background: rgba(255, 255, 255, 0.04); }

/* `sticky` dentro de un contenedor que se desplaza: clavado a la izquierda mientras las cifras
   pasan por detrás. Opaco, o el nombre se leería con los números por debajo. */
.an-identidad {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: 0 0 auto;
  width: 186px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 10px;
  background: var(--negro);
}

/* La pastilla de posición, con el color de su línea — el mismo que usa el campo. */
.an-pos {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 11px;
  line-height: 1;
  color: var(--tinta);
}
.an-pos.pt { background: var(--pos-pt); }
.an-pos.df { background: var(--pos-df); }
.an-pos.mc { background: var(--pos-mc); }
.an-pos.dl { background: var(--pos-dl); }

.an-fila-foto {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  display: grid;
  place-items: end center;
}
.an-fila-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

.an-fila-centro { flex: 1; min-width: 0; }
/* Nombre Y aviso en la misma línea (Jepi, 3-sep-2026: el aviso ya no es su propia columna). El
   texto se trunca solo —`min-width: 0` es lo que deja que un flex hijo encoja por debajo de su
   contenido—; el aviso, si lo hay, es `flex: 0 0 auto` y nunca desaparece detrás de los puntos
   suspensivos, aunque el nombre sea largo. */
.an-fila-nombre { display: flex; align-items: center; gap: 4px; }
.an-fila-nombre-texto {
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.an-fila-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--crema-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* El escudo de la COMPETICIÓN (LaLiga, Champions...). Blanco siempre (ver `ligasEscudo` en
   catalogo-de-analisis.mjs): esta fila es oscura sea de liga o de Champions, así que no hay
   versión de color que se vea bien aquí. */
.an-fila-liga { flex: 0 0 auto; width: 13px; height: 13px; object-fit: contain; }
/* El del CLUB, a su lado y en vez de escribir su nombre (Jepi, 3-sep-2026) — a color siempre, como
   en la carta del Draft: un escudo de club ya está pensado para leerse sobre cualquier fondo. */
.an-fila-club { flex: 0 0 auto; width: 14px; height: 14px; object-fit: contain; }

/* EL AVISO, EN PEQUEÑO, JUNTO AL NOMBRE — no en su propia columna. Mismos colores que el de
   siempre (`.an-estado`); solo el tamaño cambia para caber en la línea del nombre. */
.an-estado--nombre { width: 15px; height: 15px; font-size: 9px; }

/* Las cifras. Cada columna con su ancho, para que queden alineadas de fila en fila. */
.an-cols { display: flex; align-items: center; flex: 0 0 auto; }
.an-col {
  /* Igual que en la cabecera: declarado aquí, lo afina el módulo columna a columna. */
  --ancho: 46px;
  width: var(--ancho);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.an-ovr {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 20px;
  line-height: 1;
  color: var(--oro-claro);
}
.an-cambio { font-size: 11px; font-weight: 700; }
.an-cambio.sube { color: var(--pts-bueno); }
.an-cambio.baja { color: var(--rojo); }
/* El guion de "todavía no": apagado, para que no compita con lo que sí tiene dato. */
.an-plano { color: var(--crema-tenue); font-size: 12px; }
/* LA MISMA FAMILIA QUE EL OVERALL Y LA FICHA (Jepi, 3-sep-2026: no pegaba con el resto de
   números de la fila). Sin ella heredaba el cuerpo del texto —Barlow Condensed—, que al lado del
   OVR en Bebas Neue se leía como un número de otra pantalla. Más pequeño que el OVR porque sigue
   siendo un dato secundario, no el que manda en la fila. */
.an-num { font-family: "Bebas Neue", Impact, sans-serif; font-size: 16px; color: var(--crema); }

.an-estado {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--tinta);
}
.an-estado.injured { background: #fff; color: var(--rojo); }
.an-estado.doubt { background: var(--pts-algo); }
.an-estado.suspended { background: var(--rojo); color: var(--crema); }

/* La racha, en pequeño y con la MISMA escala de color que el campo y las cartas. */
.an-forma { display: flex; gap: 2px; }
.an-forma-slot {
  width: 15px;
  height: 18px;
  border-radius: 3px;
  display: grid;
  place-items: center;
  background: rgba(15, 15, 15, 0.5);
  border: 1px solid var(--borde);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 10px;
  line-height: 1;
  color: var(--crema-tenue);
}
.an-forma-slot.alto,
.an-forma-slot.bueno,
.an-forma-slot.algo,
.an-forma-slot.cero,
.an-forma-slot.negativo {
  /* token-aparte: mismo papel que `--tinta` —tinta oscura sobre un fondo de color— y mismo valor.
     Se escribe porque estas casillas viven fuera de `.carta`, donde `--tinta` sí es esta, pero
     dejarlo atado a un token que otra pantalla redefine es lo que ya mordió una vez. */
  color: #0a0a0a;
  border-color: transparent;
}
.an-forma-slot.alto { background: var(--pts-alto); }
.an-forma-slot.bueno { background: var(--pts-bueno); }
.an-forma-slot.algo { background: var(--pts-algo); }
.an-forma-slot.cero { background: var(--pts-cero); }
.an-forma-slot.negativo { background: var(--pts-negativo); }

/* Lesionado, duda o sancionado: un filete en el borde, para notarlo de reojo sin leer. */
.an-fila[data-estado] .an-identidad { border-left: 3px solid transparent; padding-left: 7px; }
.an-fila[data-estado="injured"] .an-identidad { border-left-color: var(--rojo); }
.an-fila[data-estado="doubt"] .an-identidad { border-left-color: var(--pts-algo); }
.an-fila[data-estado="suspended"] .an-identidad { border-left-color: var(--rojo); }

/* CHAMPIONS, EN ANÁLISIS — el mismo jugador puede vivir aquí dos veces: una vez con su overall de
   liga y otra con el de Champions (dos ids de Biwenger distintos, `data/biwenger/champions-
   league.json` aparte de las cinco ligas domésticas). Puntúan por separado y hoy no hay forma de
   distinguirlos de un vistazo en la lista — solo mirando el filtro de liga o abriendo su ficha.
   Pedido por Jepi el 3-sep-2026: liga en negro (lo de siempre) y Champions en azul.
   token-aparte: estos dos valores coinciden con `--negro`/`--panel` de `body.tema-champions` en
   marca.css y NO son ese token — ese interruptor pinta TODA la app a la vez, y aquí liga y
   Champions conviven a la vez en la misma lista, así que no puede depender de una clase en el
   `body`. Si ese azul se retoca algún día, esta es la segunda copia que hay que encontrar. */
.an-fila[data-competicion="champions"] { background: #041c4a; }
.an-fila[data-competicion="champions"] .an-identidad { background: #122c72; }

.an-vacio { padding: 28px 16px; text-align: center; font-size: 14px; color: var(--crema-suave); }

.an-mas {
  display: block;
  width: calc(100% - 24px);
  margin: 14px 12px 0;
  min-height: 44px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--crema);
  font: inherit;
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
}

/* ── La ficha ───────────────────────────────────────────────────────────────────── */
.an-ficha { position: fixed; inset: 0; z-index: 500; display: flex; align-items: flex-end; }
.an-ficha-fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); }
.an-ficha-caja {
  position: relative;
  width: 100%;
  max-width: var(--ancho-app);
  margin: 0 auto;
  /* Hasta el 88% del alto, y el fondo NO puede desplazarse detrás.
     EL QUE SE DESPLAZA ES EL CUERPO, NO LA CAJA, y eso es lo que mantiene la ✕ en su sitio: es
     `absolute` contra la caja, así que cuando la que se desplazaba era la caja se iba con el
     contenido. Medido en un iPhone SE (375×667): el panel mide 698 px, entran 586, y al bajar del
     todo la ✕ se quedaba 21 px por encima del borde. En pantallas altas no pasaba y por eso no se
     veía. Con el desplazamiento en el cuerpo, la caja no se mueve y la ✕ tampoco. */
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Sin hueco abajo AQUÍ: ese hueco es el de la barra y ahora lo pone el cuerpo, que es quien se
     desplaza. Puesto en la caja se quedaba como una franja vacía permanente de 110 px al pie del
     panel —siempre visible, ya estuvieras arriba o abajo— en vez de ser el final del contenido. */
  padding: 18px 16px 0;
  border-radius: 16px 16px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--oro) 30%, transparent);
  /* OPACO, Y NO `--panel`. `--panel` es blanco al 4,5 % —translúcido a propósito, para que las
     cajas de dentro de una pantalla respiren sobre el fondo—, pero aquí hay que TAPAR: con él, la
     barra de pestañas se transparentaba a través de la ficha y sus iconos se cruzaban con el
     texto. Se vio en la captura, no leyendo el CSS. */
  background: #14120e;
}
/* `min-height: 0` no es un adorno: sin él un hijo de flex no se encoge por debajo de su contenido
   y el `overflow-y` no llega a activarse nunca. */
.an-ficha-cuerpo {
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  /* EL HUECO DE ABAJO ES EL DE LA BARRA, aunque la ficha vaya por encima de ella: sin él, el
     último párrafo queda justo sobre las cinco pestañas y se lee incómodo aunque no se solape. */
  padding-bottom: calc(20px + var(--alto-barra) + var(--colchon-barra));
}
/* LA ✕ SE QUEDA QUIETA MIENTRAS EL CUERPO PASA POR DEBAJO, así que necesita fondo propio: sin él
   se mezclaba con lo que fuera desfilando —se vio cruzada con "-1 temporada"— y dejaba de leerse
   como un botón. Redonda y opaca, tapa lo justo. */
.an-ficha-cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #14120e;
  color: var(--crema-suave);
  font-size: 18px;
  cursor: pointer;
}
/* ── El aviso de baja ──────────────────────────────────────────────────────────── */
.an-ficha-estado {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}
.an-ficha-estado.injured,
.an-ficha-estado.suspended {
  background: var(--rojo-fondo);
  color: var(--rojo);
  border: 1px solid var(--rojo-borde);
}
.an-ficha-estado.doubt {
  background: color-mix(in srgb, var(--pts-algo) 12%, transparent);
  color: var(--pts-algo);
  border: 1px solid color-mix(in srgb, var(--pts-algo) 40%, transparent);
}
.an-ficha-motivo { font-weight: 400; opacity: 0.85; }

/* ── Las cuatro cifras ─────────────────────────────────────────────────────────── */
.an-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.an-cifra { padding: 10px 4px; border: 1px solid var(--borde); border-radius: 10px; text-align: center; }
.an-cifra-valor {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 19px;
  line-height: 1;
  color: var(--crema);
  font-variant-numeric: tabular-nums;
}
.an-cifra-label {
  font-size: 9.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--crema-suave);
  margin-top: 4px;
}

/* Cuando no hay historia que dibujar se dice, en el hueco donde iría la curva. */
.an-grafica-vacia { font-size: 12.5px; color: var(--crema-suave); padding: 10px 0; }

/* ── La cabecera del jugador ─────────────────────────────────────────────────────
   `flex-shrink: 0` para que no la aplaste el cuerpo cuando el contenido es largo: es la zona que
   NO se desplaza, y encogerse sería justo lo contrario de lo que hace ahí. */
.an-ficha-cabecera { flex-shrink: 0; }
.an-jug-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-right: 40px; }
.an-jug-foto {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  display: grid;
  place-items: end center;
}
.an-jug-foto img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; display: block; }
.an-jug-quien { flex: 1; min-width: 0; }
.an-jug-nombre {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 24px;
  letter-spacing: 1.5px;
  line-height: 1.1;
  color: var(--oro-claro);
}
.an-jug-sub { font-size: 13px; color: var(--crema-suave); }

/* ── LA COTIZACIÓN DEL OVERALL ─────────────────────────────────────────────────────
   Con forma de gráfico de valores, que es como lo pidió Jepi: el número grande de hoy, las dos
   variaciones, el área bajo la línea y la rejilla con sus alturas. `currentColor` en el degradado
   hace que el área herede el oro de la línea sin repetir el color en dos sitios. */
.an-cotiza { margin-bottom: 18px; color: var(--oro-claro); }
.an-cotiza-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.an-cotiza-titulo {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--crema-suave);
}
.an-cotiza-ahora {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 40px;
  line-height: 1;
  color: var(--oro-claro);
}
.an-cotiza-deltas { text-align: right; }
.an-cotiza-delta { font-size: 12px; font-weight: 700; color: var(--crema-suave); line-height: 1.5; }
.an-cotiza-delta.sube { color: var(--pts-bueno); }
.an-cotiza-delta.baja { color: var(--rojo); }
/* SIN ALTO FIJO. Con `height` puesto a mano y el ancho al 100%, el `viewBox` se encaja dentro
   centrado y deja dos bandas vacías arriba y abajo: la curva salía flotando en medio de un hueco.
   Dejando que mande la proporción del `viewBox`, el recuadro es exactamente el dibujo. */
.an-cotiza-svg { display: block; width: 100%; height: auto; }
.an-cotiza-rejilla { stroke: var(--borde); stroke-width: 1; }
.an-cotiza-marca { fill: var(--crema-tenue); font-size: 9px; font-family: "Barlow Condensed", system-ui, sans-serif; }
.an-cotiza-linea { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.an-cotiza-area { stroke: none; }
.an-cotiza-punto { fill: currentColor; opacity: 0.55; }
.an-cotiza-hoy { fill: currentColor; }
.an-cotiza-pie { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--crema-tenue); margin-top: 2px; }

/* ── Casa y fuera ──────────────────────────────────────────────────────────────── */
.an-reparto { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.an-reparto-caja { padding: 12px 10px; border: 1px solid var(--borde); border-radius: 10px; }
.an-reparto-titulo { font-size: 11px; letter-spacing: 0.5px; color: var(--crema-suave); }
.an-reparto-media {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 26px;
  line-height: 1.1;
  color: var(--crema);
  font-variant-numeric: tabular-nums;
}
.an-reparto-pie { font-size: 11px; color: var(--crema-tenue); }

/* ── Su forma ──────────────────────────────────────────────────────────────────── */
.an-jug-forma { margin-bottom: 18px; }
.an-jug-forma-titulo {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--crema-suave);
  margin-bottom: 6px;
}
/* Lo que todavía no hay, dicho. En su caja y apagado: es una promesa, no un aviso. */
.an-pendiente {
  margin-top: 4px;
  padding: 12px;
  border: 1px dashed var(--borde);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--crema-suave);
}