/* ─────────────────────────────────────────────────────────────────────────
   Panel de eliasapps by JirexAI

   LA PALETA NO SE INVENTO: esta sacada de la hoja real de jirexai.com
   (2026-09-20). La marca es OSCURA — eso es identidad, no gusto.

   Las fuentes van SERVIDAS POR NOSOTROS, no por Google. Un panel que guarda
   la llave de cobro no le pide nada a un tercero, y asi el CSP se queda en
   `default-src 'self'` sin excepciones.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/estatico/fuentes/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/estatico/fuentes/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("/estatico/fuentes/grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("/estatico/fuentes/grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Marca JirexAI, medida de su hoja */
  --fondo:      #09090b;
  --panel:      #18181b;
  --panel-alto: #1f1f23;
  --linea:      #27272a;
  --linea-viva: #3f3f46;
  --tinta:      #fafafa;
  --tenue:      #a1a1aa;   /* 6.91:1 sobre panel — AA */
  /* 3.67:1 sobre el panel: NO pasa AA para texto chico. Queda declarado por si
     hace falta un adorno, pero ningun texto legible lo usa — se probo y no
     pasaba, asi que se corrigio en vez de dejarlo «casi bien». */
  --tenue-2:    #71717a;

  /* Acento. El indigo de marca (#6366f1) da 3.97:1 sobre el panel: sirve para
     bordes y texto grande, NO para texto chico. Por eso hay dos. */
  --acento:       #6366f1;  /* limites, bordes, adornos */
  --acento-texto: #818cf8;  /* 5.94:1 — este es el que lleva texto */
  --acento-fondo: #4f46e5;  /* relleno de boton: blanco encima da 6.29:1 */

  --bien:   #34d399;  /* 9.22:1 */
  --avisa:  #fbbf24;
  --mal:    #fb7185;

  --r-chico: 6px;
  --r:       10px;
  --r-grande:14px;

  /* Escala de 4px. Un solo ritmo para todo el panel. */
  --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem;
  --e5: 1.5rem; --e6: 2rem;  --e7: 3rem;

  --sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Space Grotesk", var(--sans);
  --mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display { font-family: var(--display); letter-spacing: -.015em; }
h1 { font-size: 1.625rem; font-weight: 700; margin: 0 0 var(--e2); }
h2 { font-size: 1.125rem; font-weight: 700; margin: 0; }
h3 { font-size: .95rem;  font-weight: 700; margin: 0; }

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

/* Foco SIEMPRE visible. Quitarlo sin reemplazo deja a quien navega con teclado
   sin saber donde esta — y este panel se opera a teclado mas de lo que parece. */
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--acento-texto);
  outline-offset: 2px;
  border-radius: var(--r-chico);
}

/* ── Barra ───────────────────────────────────────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e3) var(--e4);
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.marca { display: flex; align-items: center; gap: var(--e2); text-decoration: none; color: var(--tinta); }
.marca svg { width: 26px; height: 26px; flex: none; }
.marca b { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.marca span { color: var(--tenue); font-size: .8rem; }
.barra nav { margin-left: auto; display: flex; align-items: center; gap: var(--e1); }
.barra nav a, .barra nav button {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--e3); border-radius: var(--r-chico);
  color: var(--tenue); text-decoration: none; font-size: .9rem; font-weight: 500;
  background: none; border: 0; font-family: inherit; cursor: pointer;
}
.barra nav a:hover, .barra nav button:hover { color: var(--tinta); background: var(--panel); }
.barra nav a[aria-current="page"] { color: var(--tinta); background: var(--panel); }

/* ── Estructura ──────────────────────────────────────────────────────────── */
main { padding: var(--e5) var(--e4) var(--e7); }
.ancho { max-width: 54rem; margin: 0 auto; }
.angosto { max-width: 23rem; margin: 0 auto; }
.centrado { display: grid; place-items: center; min-height: 100svh; padding: var(--e4); }
.encabezado { margin-bottom: var(--e5); }
.encabezado p { color: var(--tenue); margin: 0; }
.tenue { color: var(--tenue); }
.mono { font-family: var(--mono); }
.chico { font-size: .82rem; }

/* ── Tarjetas ────────────────────────────────────────────────────────────── */
.tarjeta {
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--r-grande); padding: var(--e4);
}
/* Separacion entre tarjetas APILADAS. Dentro de la rejilla no aplica: el
   hueco lo pone `gap`, y este margen desalineaba la segunda y la tercera
   tarjeta doce pixeles respecto de la primera. Sólo se veía mirando. */
.tarjeta + .tarjeta { margin-top: var(--e4); }
.rejilla .tarjeta + .tarjeta { margin-top: 0; }
.tarjeta > header {
  display: flex; align-items: center; gap: var(--e3);
  margin-bottom: var(--e3); padding-bottom: var(--e3);
  border-bottom: 1px solid var(--linea);
}
.tarjeta > header .cuenta { margin-left: auto; font-size: .8rem; color: var(--tenue); }

.rejilla { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.dato .numero { font-family: var(--display); font-size: 2rem; font-weight: 700; line-height: 1.1; }
.dato .numero small { font-size: .85rem; font-weight: 500; color: var(--tenue); font-family: var(--sans); }

/* ── Progreso ────────────────────────────────────────────────────────────── */
.progreso { height: 8px; border-radius: 99px; background: var(--linea); overflow: hidden; margin-top: var(--e3); }
.progreso i { display: block; height: 100%; background: var(--bien); border-radius: 99px; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.boton, button.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 44px; padding: 0 var(--e4);
  font: 500 .92rem/1 var(--sans); cursor: pointer;
  border-radius: var(--r-chico); text-decoration: none;
  /* Relleno oscuro para que el texto blanco pase AA (6.29:1) y borde del
     indigo de marca para que el boton se distinga del panel (3.97:1). Sin el
     borde, el relleno solo da 2.82:1 y el boton se pierde en el fondo. */
  background: var(--acento-fondo); color: #fff; border: 1px solid var(--acento);
}
.boton:hover { background: #5b54e8; }
.boton.suave {
  background: transparent; color: var(--acento-texto); border-color: var(--linea-viva);
}
.boton.suave:hover { background: var(--panel-alto); border-color: var(--acento); }
.boton.peligro { background: transparent; color: var(--mal); border-color: transparent; }
.boton.peligro:hover { background: color-mix(in srgb, var(--mal) 14%, transparent); }
.boton.chico { min-height: 38px; padding: 0 var(--e3); font-size: .85rem; }

/* ── Formularios ─────────────────────────────────────────────────────────── */
label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: var(--e1); }
input[type="email"], input[type="password"], input[type="text"] {
  width: 100%; min-height: 44px; padding: 0 var(--e3);
  font: 400 .95rem var(--sans); color: var(--tinta);
  background: var(--fondo); border: 1px solid var(--linea-viva); border-radius: var(--r-chico);
}
/* El texto de ejemplo tambien es texto: a 3.67:1 no se lee bien con sol. */
input::placeholder { color: var(--tenue); }
input:focus { border-color: var(--acento); }
.campo + .campo { margin-top: var(--e3); }
form .boton { width: 100%; margin-top: var(--e4); }

/* ── Avisos ──────────────────────────────────────────────────────────────── */
.aviso {
  display: flex; gap: var(--e2); align-items: flex-start;
  padding: var(--e3); border-radius: var(--r-chico);
  font-size: .9rem; margin-bottom: var(--e4);
  border: 1px solid;
}
.aviso.bien { color: var(--bien); background: color-mix(in srgb, var(--bien) 10%, transparent); border-color: color-mix(in srgb, var(--bien) 35%, transparent); }
.aviso.mal  { color: var(--mal);  background: color-mix(in srgb, var(--mal) 10%, transparent);  border-color: color-mix(in srgb, var(--mal) 35%, transparent); }
.aviso.ojo  { color: var(--avisa);background: color-mix(in srgb, var(--avisa) 9%, transparent); border-color: color-mix(in srgb, var(--avisa) 32%, transparent); }

/* ── Etiquetas de estado ─────────────────────────────────────────────────── */
.sello {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 99px;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.sello::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.sello.puesta { color: var(--bien);  background: color-mix(in srgb, var(--bien) 13%, transparent); }
.sello.falta  { color: var(--avisa); background: color-mix(in srgb, var(--avisa) 13%, transparent); }

/* ── Llaves ──────────────────────────────────────────────────────────────── */
.llave { border-top: 1px solid var(--linea); padding: var(--e3) 0; }
.llave:first-of-type { border-top: 0; padding-top: 0; }
.llave > summary {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 44px; cursor: pointer; list-style: none;
}
.llave > summary::-webkit-details-marker { display: none; }
.llave > summary::after {
  content: "›"; margin-left: auto; color: var(--tenue);
  font-size: 1.3rem; line-height: 1; transition: transform .18s ease;
}
.llave[open] > summary::after { transform: rotate(90deg); }
.llave .titulo { font-weight: 600; font-size: .95rem; }
.llave .clave { font-family: var(--mono); font-size: .75rem; color: var(--tenue); }
.llave .cuerpo { padding: var(--e3) 0 var(--e2); }
.llave .ayuda { color: var(--tenue); font-size: .85rem; margin: 0 0 var(--e3); max-width: 46ch; }
.llave form { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
/* La etiqueta ocupa su propio renglon. Como hija de un flex se comportaba como
   una columna mas y le robaba el ancho al campo: en telefono el campo quedaba
   en un tercio de la pantalla para pegar una llave de sesenta caracteres. */
.llave form label { flex: 1 0 100%; margin-bottom: 0; }
.llave form input { flex: 1 1 14rem; }
.llave form .boton { width: auto; margin-top: 0; }
.llave .secundario { display: flex; gap: var(--e2); margin-top: var(--e3); }
/* La pista es corta y NO se parte: «…9f3a2b» en dos renglones deja de servir
   para lo unico que sirve, que es reconocer la llave de un vistazo. */
.llave .pista { white-space: nowrap; }

/* ── Valor revelado ──────────────────────────────────────────────────────── */
.revelado { border-color: var(--avisa); }
.revelado .valor {
  width: 100%; margin-top: var(--e2); padding: var(--e3);
  font-family: var(--mono); font-size: .85rem; color: var(--tinta);
  background: var(--fondo); border: 1px solid var(--linea-viva);
  border-radius: var(--r-chico);
}

/* ── Estado vacio ────────────────────────────────────────────────────────── */
.vacio { text-align: center; padding: var(--e6) var(--e4); color: var(--tenue); }
.vacio h2 { color: var(--tinta); margin-bottom: var(--e2); }

/* Quien prefiere menos movimiento, no lo tiene. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media (max-width: 34rem) {
  main { padding: var(--e4) var(--e3) var(--e6); }
  .barra { padding: var(--e2) var(--e3); }
  .marca span { display: none; }
  h1 { font-size: 1.4rem; }
  .llave form .boton { width: 100%; }
  /* El resumen se apila: en una sola fila, el titulo largo, el sello y la
     pista se pisan entre si y el toque queda en el sitio equivocado. */
  .llave > summary { flex-wrap: wrap; row-gap: var(--e1); padding: var(--e1) 0; }
  .llave > summary > .info { flex: 1 1 100%; }
  .llave > summary::after { position: absolute; right: 0; top: var(--e3); }
  .llave { position: relative; }
  .llave .titulo { padding-right: var(--e5); display: block; }
}

/* ── Resumen de avance ───────────────────────────────────────────────────── */
.resumen {
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--r-grande); padding: var(--e4); margin-bottom: var(--e4);
}
.resumen-cifra { font-size: .9rem; color: var(--tenue); }
.resumen-cifra strong { font-family: var(--display); font-size: 1.5rem; color: var(--tinta); }

/* ── Pestañas ────────────────────────────────────────────────────────────── */
.pestanas {
  display: flex; gap: var(--e1); margin-bottom: calc(var(--e4) * -1 + 1px);
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--linea); padding-bottom: 0;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 44px; padding: 0 var(--e3); white-space: nowrap;
  color: var(--tenue); text-decoration: none; font-size: .9rem; font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pestana:hover { color: var(--tinta); }
/* `aria-current` es lo que mueve el script; el estilo cuelga de EL y no de una
   clase aparte. Si colgara de una clase, el script tendria que mover las dos y
   el dia que se le olvide una, la pantalla se veria bien y sonaria mal. */
.pestana[aria-current="page"] {
  color: var(--tinta); border-bottom-color: var(--acento);
}
.cuenta-pestana {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px;
  font-size: .7rem; font-weight: 700;
  color: var(--avisa); background: color-mix(in srgb, var(--avisa) 16%, transparent);
}
.punto-bien { width: 8px; height: 8px; border-radius: 99px; background: var(--bien); }

.panel-categoria { border-top-left-radius: 0; border-top-right-radius: 0; }

/* ── Filas de llave ──────────────────────────────────────────────────────── */
.filas { list-style: none; margin: 0; padding: 0; }
.fila {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) 0; border-top: 1px solid var(--linea);
}
.fila:first-child { border-top: 0; }
.fila-info { flex: 1 1 auto; min-width: 0; }
.fila-titulo { display: block; font-weight: 600; font-size: .95rem; }
.fila-clave { display: block; font-size: .75rem; color: var(--tenue); }
.fila-estado { display: flex; align-items: center; gap: var(--e2); flex: none; }
.fila .boton { flex: none; }

/* ── Pantalla de una llave ───────────────────────────────────────────────── */
.angosto-medio { max-width: 36rem; margin: 0 auto; }
.migas { margin: 0 0 var(--e3); font-size: .9rem; }
.migas a { color: var(--tenue); text-decoration: none; }
.migas a:hover { color: var(--acento-texto); }
.ficha { display: grid; grid-template-columns: auto 1fr; gap: var(--e2) var(--e4); margin: 0; }
.ficha dt { color: var(--tenue); font-size: .85rem; }
.ficha dd { margin: 0; font-size: .9rem; }
.acciones-fila { display: flex; gap: var(--e2); flex-wrap: wrap; }
.acciones-fila form { margin: 0; }
.acciones-fila .boton { width: auto; margin-top: 0; }
.tarjeta.peligrosa { border-color: color-mix(in srgb, var(--mal) 30%, var(--linea)); }

@media (max-width: 34rem) {
  .fila { flex-wrap: wrap; row-gap: var(--e2); }
  .fila-info { flex: 1 1 100%; }
  .fila .boton { margin-left: auto; }
}

/* ── Sensación de aplicación ─────────────────────────────────────────────── */

/* Barra de progreso. Sin señal de que algo pasa, media espera se siente como
   un clic que no funcionó — y la persona vuelve a hacer clic. */
.cargando-barra {
  position: fixed; inset: 0 auto auto 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--acento), var(--acento-texto), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  z-index: 100; animation: recorre 1s ease-in-out infinite;
}
@keyframes recorre {
  0%   { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}
.ocupado, .ocupado a, .ocupado button { cursor: progress; }

/* Avisos flotantes. En una app, un cartel que empuja el contenido hacia abajo
   se siente a página. */
.avisos {
  position: fixed; left: 50%; bottom: var(--e4); transform: translateX(-50%);
  z-index: 110; display: flex; flex-direction: column; gap: var(--e2);
  pointer-events: none; width: min(24rem, calc(100vw - 2rem));
}
.avisito {
  padding: var(--e3) var(--e4); border-radius: var(--r);
  font-size: .9rem; font-weight: 500; text-align: center;
  border: 1px solid; background: var(--panel-alto);
  box-shadow: 0 8px 24px rgb(0 0 0 / .45);
  animation: entra .22s cubic-bezier(.2,.8,.3,1);
}
.avisito.bien { color: var(--bien); border-color: color-mix(in srgb, var(--bien) 40%, transparent); }
.avisito.mal  { color: var(--mal);  border-color: color-mix(in srgb, var(--mal) 40%, transparent); }
.avisito.yendose { opacity: 0; transform: translateY(6px); transition: opacity .24s, transform .24s; }
@keyframes entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* El <main> nuevo entra con un fundido corto. Más largo se siente lento; sin
   nada, el cambio es tan brusco que parece un salto de página. */
main { animation: aparece .18s ease-out; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* El encabezado recibe el foco al cambiar de pantalla — y no debe dibujar un
   recuadro por eso: el foco por programa no es el foco por teclado. */
h1[tabindex="-1"]:focus { outline: none; }

button[disabled] { opacity: .6; cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .cargando-barra { animation: none; background: var(--acento); }
  main, .avisito { animation: none; }
}

/* ── Diálogo: editar encima, sin salir de la lista ───────────────────────── */
/* OJO CON EL `display`, y aquí estuvo el defecto que costó una hora:
   un <dialog> CERRADO es `display: none` por hoja del navegador. Si le pones
   `display: grid` a `.dialogo` a secas, **lo sobreescribes y el diálogo se
   pinta siempre** — cerrado incluye. Queda un bloque negro al fondo de la
   página, y el usuario cierra ese y no el de arriba.
   Por eso el `display` va SÓLO en `[open]`. El estado cerrado se le deja al
   navegador, que ya sabe lo que hace. */
.dialogo {
  border: 0; padding: 0; background: transparent;
  max-width: 100%; max-height: 100%; width: 100%; height: 100%;
  margin: 0; overflow: auto;
}
.dialogo[open] {
  /* El fondo es el propio <dialog>: así un clic fuera de la caja cae en él y
     se puede cerrar comparando el objetivo del clic contra el diálogo mismo. */
  display: grid; place-items: center;
}
.dialogo::backdrop { background: rgb(0 0 0 / .66); backdrop-filter: blur(3px); }
.dialogo-caja {
  position: relative;
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100svh - 3rem); overflow-y: auto;
  padding: var(--e5) var(--e4) var(--e4);
  background: var(--fondo); color: var(--tinta);
  border: 1px solid var(--linea-viva); border-radius: var(--r-grande);
  box-shadow: 0 24px 64px rgb(0 0 0 / .6);
  animation: sube .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes sube { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.dialogo-titulo {
  font-family: var(--display); font-size: 1.25rem; font-weight: 700;
  margin: 0 var(--e6) var(--e4) 0;
}
.dialogo-caja .encabezado { margin-bottom: var(--e4); }
.dialogo-caja .tarjeta { background: var(--panel); }
/* El botón vive dentro de un <form method="dialog">; el formulario no debe
   ocupar sitio ni desplazar nada. */
.dialogo-caja > form[method="dialog"] { position: static; margin: 0; }
.dialogo-cerrar {
  position: absolute; top: var(--e2); right: var(--e2);
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-chico);
  color: var(--tenue); font-size: 1.5rem; line-height: 1; cursor: pointer;
  margin: 0; padding: 0;
}
.dialogo-cerrar:hover { color: var(--tinta); background: var(--panel-alto); }

/* Mientras hay diálogo abierto, lo de atrás no se desplaza: si se desplazara,
   cerrar te devolvería a un sitio distinto del que dejaste. */
html:has(dialog[open]) { overflow: hidden; }

@media (max-width: 34rem) {
  .dialogo { place-items: end center; }
  .dialogo-caja {
    width: 100vw; max-height: 92svh;
    border-radius: var(--r-grande) var(--r-grande) 0 0;
    border-bottom: 0;
  }
  @keyframes sube { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .dialogo-caja { animation: none; } }

/* ── Utilidades ──────────────────────────────────────────────────────────── */
/* Existen porque `style-src 'self'` BLOQUEA los `style="..."` en línea, y yo
   tenía veintitrés repartidos por las plantillas. El navegador no los aplicaba
   y la pantalla salía descuadrada — «apareció arriba», dijo Isaac. No da error
   de JavaScript ni sale en ningún código HTTP: sólo se ve en la consola y con
   el ojo. Abrir la CSP habría sido curar el síntoma. */
.sin-margen     { margin: 0; }
.margen-arriba  { margin-top: var(--e4); }
.margen-arriba-chico { margin-top: var(--e3); }
.margen-arriba-grande{ margin-top: var(--e5); }
.margen-abajo   { margin-bottom: var(--e4); }
.centrar-texto  { text-align: center; }
.destacado      { color: var(--tinta); font-weight: 600; }
.marca-suelta {
  display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e5);
}
.marca-suelta .display { font-weight: 700; }
.marca-centrada { justify-content: center; }

/* ── Barra de avance ─────────────────────────────────────────────────────── */
/* `<progress>` nativo y no un <div> con `style="width:N%"`: el ancho variable
   sólo se puede poner en línea, y eso es justo lo que la CSP bloquea. Además
   un lector de pantalla lo anuncia como lo que es, y no como una caja vacía. */
progress.progreso {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 8px; border: 0;
  border-radius: 99px; background: var(--linea); margin-top: var(--e3);
  overflow: hidden;
}
progress.progreso::-webkit-progress-bar { background: var(--linea); border-radius: 99px; }
progress.progreso::-webkit-progress-value { background: var(--bien); border-radius: 99px; }
progress.progreso::-moz-progress-bar { background: var(--bien); border-radius: 99px; }