/* ═══════════════════════════════════════════════════════════════════════════
   Sistema visual de emovili
   ───────────────────────────────────────────────────────────────────────────
   La paleta sale del logotipo: el verde #8ED264 y el lima #E6F386 del degradado
   del anillo. Los neutros van sesgados a verde y no a azul, para que el gris no
   pelee con la marca.

   Dos avisos para quien toque esto:

   · El verde de marca NO tiene contraste suficiente sobre blanco (1,8:1). En
     tema claro el texto y los trazos usan el escalón oscuro (--marca), y el
     verde vivo queda para rellenos con tinta oscura encima.

   · Los colores de serie son otros cuatro escalones por tema, elegidos para que
     se distingan también en dicromacia (comprobado en
     backend/tests/test_paleta.py: ninguna pareja baja de ΔE 8 simulando
     protanopia, deuteranopia y tritanopia). No se añaden series a ojo.

   No hay fuentes externas: la instalación es aislada y una fuente que no carga
   se sustituye en silencio por otra que descuadra la maqueta.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  --fondo:        #EFF2EC;
  --superficie:   #FFFFFF;
  --superficie-2: #F6F8F3;
  --superficie-3: #E9EDE4;
  --tinta:        #101A0E;
  --tinta-2:      #4A5747;
  --tinta-3:      #6E7A6B;
  --linea:        rgba(16, 26, 14, .11);
  --linea-fuerte: rgba(16, 26, 14, .24);

  --marca:        #3F7A24;   /* verde legible sobre claro */
  --marca-viva:   #8ED264;   /* el del logotipo, para rellenos */
  --marca-lima:   #E6F386;
  --sobre-marca:  #0C110D;
  /* La tinta que se escribe ENCIMA de cada serie, cuando hay que poner una
  etiqueta dentro de una barra. No es una sola: depende del color y del
  tema. El azul de «espera» en claro es #2E76B8, y ahí la tinta oscura da
  3,99 —por debajo del mínimo— mientras que el blanco da 4,77. En oscuro ese
  mismo azul es claro y pasa justo al revés: blanco 2,60, tinta oscura 7,34.
  Hay una prueba que mide cada par y falla si alguno baja de 4,5. */
  --sobre-serie-1:    #0C110D;
  --sobre-serie-2:    #FFFFFF;
  --sobre-serie-3:    #FFFFFF;
  --sobre-serie-4:    #FFFFFF;
  --sobre-serie-gris: #0C110D;

  --serie-1: #55972F;
  --serie-2: #2E76B8;
  --serie-3: #7E4C0E;
  --serie-4: #B03C78;
  --serie-gris: #7D8A79;

  --bien:  #2F6B14;
  --aviso: #8A5410;
  --grave: #A8321C;
  --tinte-bien:  rgba(47, 107, 20, .11);
  --tinte-aviso: rgba(138, 84, 16, .12);
  --tinte-grave: rgba(168, 50, 28, .11);
  --tinte-neutro: rgba(16, 26, 14, .06);
  --tinte-marca: rgba(63, 122, 36, .10);

  --radio: 14px;
  --radio-chico: 9px;
  --sombra: 0 1px 2px rgba(16, 26, 14, .05), 0 8px 24px -16px rgba(16, 26, 14, .28);

  --display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --texto:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cifra:   ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo:        #0C110D;
    --superficie:   #141B15;
    --superficie-2: #1B241C;
    --superficie-3: #232D23;
    --tinta:        #E8F0E6;
    --tinta-2:      #9DAC99;
    --tinta-3:      #7C8A79;
    --linea:        rgba(232, 240, 230, .10);
    --linea-fuerte: rgba(232, 240, 230, .24);

    --marca:        #8ED264;
    --marca-viva:   #8ED264;
    --sobre-marca:  #0C110D;
    --sobre-serie-1:    #0C110D;
    --sobre-serie-2:    #0C110D;
    --sobre-serie-3:    #FFFFFF;
    --sobre-serie-4:    #0C110D;
    --sobre-serie-gris: #0C110D;

    --serie-1: #8ED264;
    --serie-2: #57A8E0;
    --serie-3: #9E6417;  /* 6 % más oscuro que el #A86A18 de antes: con aquel,
                            NINGUNA tinta llegaba a 4,5 dentro de la barra
                            (blanco 4,43, oscura 4,30). Con este el blanco da
                            4,90 y la separación con las otras series sube de
                            19,9 a 21,1. */
    --serie-4: #D96FA8;
    --serie-gris: #7C8A79;

    --bien:  #8ED264;
    --aviso: #E0A03C;
    --grave: #E4674F;
    --tinte-bien:  rgba(142, 210, 100, .13);
    --tinte-aviso: rgba(224, 160, 60, .14);
    --tinte-grave: rgba(228, 103, 79, .13);
    --tinte-neutro: rgba(232, 240, 230, .07);
    --tinte-marca: rgba(142, 210, 100, .12);

    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -18px rgba(0, 0, 0, .8);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo:        #0C110D;
  --superficie:   #141B15;
  --superficie-2: #1B241C;
  --superficie-3: #232D23;
  --tinta:        #E8F0E6;
  --tinta-2:      #9DAC99;
  --tinta-3:      #7C8A79;
  --linea:        rgba(232, 240, 230, .10);
  --linea-fuerte: rgba(232, 240, 230, .24);

  --marca:        #8ED264;
  --marca-viva:   #8ED264;
  --sobre-marca:  #0C110D;
  --sobre-serie-1:    #0C110D;
  --sobre-serie-2:    #0C110D;
  --sobre-serie-3:    #FFFFFF;
  --sobre-serie-4:    #0C110D;
  --sobre-serie-gris: #0C110D;

  --serie-1: #8ED264;
  --serie-2: #57A8E0;
  --serie-3: #9E6417;  /* 6 % más oscuro que el #A86A18 de antes: con aquel,
                          NINGUNA tinta llegaba a 4,5 dentro de la barra
                          (blanco 4,43, oscura 4,30). Con este el blanco da
                          4,90 y la separación con las otras series sube de
                          19,9 a 21,1. */
  --serie-4: #D96FA8;
  --serie-gris: #7C8A79;

  --bien:  #8ED264;
  --aviso: #E0A03C;
  --grave: #E4674F;
  --tinte-bien:  rgba(142, 210, 100, .13);
  --tinte-aviso: rgba(224, 160, 60, .14);
  --tinte-grave: rgba(228, 103, 79, .13);
  --tinte-neutro: rgba(232, 240, 230, .07);
  --tinte-marca: rgba(142, 210, 100, .12);

  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -18px rgba(0, 0, 0, .8);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Escala tipográfica ────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.028em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: 27px; line-height: 1.12; letter-spacing: -.035em; }
h2 { font-size: 18px; line-height: 1.25; }
h3 { font-size: 15px; line-height: 1.3; }

.ojo {                                  /* la etiqueta pequeña sobre el título */
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.tenue { color: var(--tinta-2); }
.muy-tenue { color: var(--tinta-3); }
.cifra { font-family: var(--cifra); font-variant-numeric: tabular-nums; }
.pequeno { font-size: 12.5px; }
.diminuto { font-size: 11.5px; }

/* ── Armazón ───────────────────────────────────────────────────────────── */

.armazon { display: flex; min-height: 100vh; align-items: stretch; }

.rail {
  flex: 0 0 236px;
  background: var(--superficie);
  border-right: 1px solid var(--linea);
  padding: 18px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.rail__marca { display: block; padding: 2px 8px 6px; }
.rail__marca img { width: 106px; height: auto; display: block; }
.rail__grupo { display: flex; flex-direction: column; gap: 1px; }
.rail__grupo + .rail__grupo { margin-top: 13px; }
.rail__titulo { padding: 0 10px 6px; }

.rail__enlace {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--radio-chico);
  color: var(--tinta-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
.rail__enlace:hover { background: var(--tinte-neutro); color: var(--tinta); text-decoration: none; }
.rail__enlace[aria-current="page"] {
  background: var(--tinte-marca);
  color: var(--tinta);
  font-weight: 600;
}
.rail__icono {
  flex: 0 0 auto;
  width: 21px; height: 21px;
  border-radius: 7px;
  display: grid; place-items: center;
  font-family: var(--cifra);
  font-size: 9px; font-weight: 700;
  background: var(--tinte-neutro);
  color: var(--tinta-3);
}
.rail__enlace[aria-current="page"] .rail__icono { background: var(--marca-viva); color: var(--sobre-marca); }
.rail__texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail__insignia {
  font-family: var(--cifra); font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 20px;
  background: var(--tinte-marca); color: var(--marca);
}
.rail__pie { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }

.lienzo { flex: 1; min-width: 0; padding: 22px clamp(16px, 2.4vw, 32px) 56px; }

/* ── Cabecera de pantalla ──────────────────────────────────────────────── */

.cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; margin-bottom: 18px; }
.cabecera__texto { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

/* La fecha de corte va AL LADO del título y no en un pie: sin ella, el final
   del export se lee como un desplome del negocio. */
.corte {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 13px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  font-size: 12.5px; line-height: 1.35;
}
.corte__punto { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--marca-viva); flex: 0 0 auto; }
.corte--viejo .corte__punto { background: var(--aviso); }

/* ── Rejilla y tarjetas ────────────────────────────────────────────────── */

.rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; align-items: start; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
.c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; }
.c9 { grid-column: span 9; } .c12 { grid-column: span 12; }

@media (max-width: 1180px) {
  .c3, .c4, .c5 { grid-column: span 6; }
  .c7, .c8, .c9 { grid-column: span 12; }
}
@media (max-width: 760px) {
  .rejilla > * { grid-column: span 12 !important; }
  .armazon { flex-direction: column; }
  .rail { position: static; height: auto; flex: none; width: 100%; border-right: 0; border-bottom: 1px solid var(--linea); }
}

/* Una salvedad suelta dentro de la rejilla ocupa el ancho entero: si se queda
   en una columna, el aviso sale como una tira vertical ilegible. */
.rejilla > .salvedad { grid-column: span 12; margin: 0; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  min-width: 0;
}
.tarjeta__cabeza {
  padding: 14px 16px 10px;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 14px;
}
.tarjeta__titulos { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tarjeta__cuerpo { padding: 4px 16px 16px; }
.tarjeta__pie {
  padding: 10px 16px;
  border-top: 1px solid var(--linea);
  background: var(--superficie-2);
  font-size: 11.5px; line-height: 1.45;
  color: var(--tinta-2);
}

/* ── Distintivos ───────────────────────────────────────────────────────── */

.marca-estado {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 600; line-height: 1.4;
  background: var(--tinte-neutro); color: var(--tinta-2);
  white-space: nowrap;
}
.marca-estado--bien  { background: var(--tinte-bien);  color: var(--bien); }
.marca-estado--aviso { background: var(--tinte-aviso); color: var(--aviso); }
.marca-estado--grave { background: var(--tinte-grave); color: var(--grave); }
.marca-estado--marca { background: var(--tinte-marca); color: var(--marca); }
.marca-estado__punto { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* Una salvedad se pinta, no se enlaza: un indicador parcial sin su salvedad al
   lado se lee como si fuera completo. */
.salvedad {
  display: flex; gap: 9px;
  padding: 10px 13px;
  border-radius: var(--radio-chico);
  background: var(--tinte-aviso);
  color: var(--tinta);
  font-size: 12.5px; line-height: 1.45;
}
.salvedad--grave { background: var(--tinte-grave); }
.salvedad--neutra { background: var(--tinte-neutro); }
.salvedad__icono { flex: 0 0 auto; font-weight: 700; color: var(--aviso); }
.salvedad--grave .salvedad__icono { color: var(--grave); }
.salvedad--neutra .salvedad__icono { color: var(--tinta-3); }

/* ── Cifras grandes ────────────────────────────────────────────────────── */

/* Una fila de cifras, con una línea fina entre ellas.
   La tendencia va pegada al borde derecho de su tarjeta, así que sin separador
   queda más cerca de la etiqueta de la cifra siguiente que de su propio número,
   y el ojo la asigna a la de al lado. La línea resuelve a quién pertenece cada
   cosa mejor que cualquier cantidad de hueco. */
.cifras {
  display: grid;
  column-gap: 0;
  row-gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* Dos columnas: el texto a la izquierda y la tendencia a la derecha. Las
   variaciones y la nota cruzan las dos. */
.cifra-grande {
  display: grid; gap: 5px 16px; padding: 15px 26px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  border-left: 1px solid var(--linea);
}
/* La primera no lleva línea; en pantallas estrechas las tarjetas se apilan y
   entonces tampoco tiene sentido ninguna. */
.cifra-grande:first-child { border-left: 0; padding-left: 16px; }
@media (max-width: 760px) {
  .cifra-grande { border-left: 0; padding-left: 16px; }
  .cifras { row-gap: 4px; }
  .cifra-grande + .cifra-grande { border-top: 1px solid var(--linea); padding-top: 18px; }
}
.cifra-grande__texto { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* Dos líneas de alto aunque la etiqueta ocupe una: si no, el número de la
   tarjeta con etiqueta larga queda más abajo que los demás y la fila se lee
   torcida. */
.cifra-grande .ojo { min-height: 2.4em; }
.cifra-grande__chispa {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding-top: 24px; width: 96px;
}
.cifra-grande > .variaciones,
.cifra-grande > .cifra-grande__nota { grid-column: 1 / -1; }
.cifra-grande__valor {
  font-family: var(--cifra);
  font-variant-numeric: tabular-nums;
  font-size: 31px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em;
}
.cifra-grande__unidad { font-size: 15px; font-weight: 500; color: var(--tinta-2); margin-left: 3px; }
/* Un porcentaje nunca va solo: el denominador va aquí, en el mismo bloque
   visual, porque un tooltip no se imprime ni se pega en un correo. */
.cifra-grande__denominador { font-size: 12px; color: var(--tinta-2); }
.variaciones { display: flex; flex-wrap: wrap; gap: 3px 12px; }
.variacion { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.variacion em { font-style: normal; font-weight: 400; color: var(--tinta-3); font-size: 11.5px; }
.cifra-grande__nota { font-size: 11.5px; color: var(--tinta-2); line-height: 1.4; }

/* Las cinco reglas del SLA. No usan `.cifra-grande` porque no son una cifra
   con su tendencia al lado: son una tarjeta con cifra, denominación, salvedades
   y notas, todo en columna. */
.reglas { display: grid; gap: 0 0; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.regla {
  display: flex; flex-direction: column; gap: 6px;
  padding: 15px 20px; border-left: 1px solid var(--linea);
}
.regla:first-child { border-left: 0; padding-left: 16px; }
.regla__marcas { display: flex; flex-wrap: wrap; gap: 5px; }
@media (max-width: 760px) {
  .regla { border-left: 0; padding-left: 16px; }
  .regla + .regla { border-top: 1px solid var(--linea); }
}

/* Dos gráficos del mismo dato, uno al lado del otro. Se apilan por debajo de
   980px: dos series temporales a menos de 400px de ancho cada una dejan de
   poder leerse. */
.par { display: grid; gap: 10px 26px; grid-template-columns: 1fr 1fr; }
.par__mitad { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 980px) { .par { grid-template-columns: 1fr; gap: 20px; } }

/* Las tres demoras bajo el reparto de origen de la instalación. Mismo patrón
   que las reglas del P-05: columnas separadas por una línea fina, que en móvil
   pasa a ser horizontal porque las columnas se apilan. El punto de color es el
   que enlaza cada cifra con su banda del gráfico de arriba. */
.demoras {
  display: grid; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--linea);
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.demora {
  display: grid; gap: 2px 8px; padding: 0 20px;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start; border-left: 1px solid var(--linea);
}
.demora:first-child { border-left: 0; padding-left: 0; }
.demora__punto {
  display: block; width: 9px; height: 9px; border-radius: 2px;
  align-self: center;
}
.demora__etiqueta { font-size: .8rem; color: var(--tinta-2); min-width: 0; }
.demora__cifra {
  grid-column: 2; font-size: 1.5rem; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.demora__pie { grid-column: 2; font-size: .74rem; color: var(--tinta-3); }
@media (max-width: 760px) {
  .demora { border-left: 0; padding-left: 0; }
  .demora + .demora { border-top: 1px solid var(--linea); padding-top: 10px; margin-top: 10px; }
}

.contador {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 15px; border-radius: var(--radio-chico);
  border: 1px solid var(--linea); background: var(--superficie-2);
  text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%;
}
.contador[aria-pressed="true"] { border-color: var(--marca); background: var(--tinte-marca); }
.contador__n { font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: 23px; font-weight: 700; line-height: 1; }
.contador--grave .contador__n { color: var(--grave); }

/* ── Gráficos ──────────────────────────────────────────────────────────── */

.gr { position: relative; display: flex; gap: 10px; }
.gr__ejey {
  flex: 0 0 auto; display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--cifra); font-size: 10.5px; color: var(--tinta-3);
  text-align: right; padding: 1px 0 15px;
}
.gr__area { position: relative; flex: 1; min-width: 0; }
.gr__svg { display: block; width: 100%; height: auto; overflow: visible; }
.gr__svg path, .gr__svg line, .gr__svg polyline, .gr__svg circle {
  vector-effect: non-scaling-stroke;
}
.gr__rejilla { stroke: var(--linea); stroke-width: 1; }
.gr__banda { fill: var(--serie-gris); opacity: .20; }
.gr__objetivo { stroke: var(--tinta-3); stroke-width: 1; stroke-dasharray: 4 4; }
/* La media móvil va por encima de las barras y en tinta, no en un color de
   serie: no es otra serie del dato, es una lectura del mismo. */
.gr__movil { fill: none; stroke: var(--tinta); stroke-width: 2;
             stroke-linejoin: round; stroke-linecap: round; }
/* El punto lleva un anillo del color de la tarjeta para que se despegue de la
   barra que tiene debajo. Sin él, sobre una columna alta desaparece. */
.gr__movil-punto {
  fill: var(--tinta); stroke: var(--superficie); stroke-width: 2;
  pointer-events: none;
}
.gr__movil-blanco { fill: transparent; }
/* La etiqueta de la línea de referencia va en HTML y no dentro del SVG: el
   viewBox se estira sin conservar proporción y el texto saldría deformado.
   Pegada al borde derecho, que es donde no hay barra alta casi nunca, y con el
   fondo de la tarjeta detrás para que no se lea encima de una que sí lo esté. */
.gr__objetivo-etiqueta {
  position: absolute; right: 0; transform: translateY(-50%);
  padding: 1px 5px; border-radius: var(--radio-chico);
  background: var(--superficie); color: var(--tinta-3);
  font-size: 10.5px; white-space: nowrap; pointer-events: none;
}
.gr__trazo { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gr__trazo--discontinuo { stroke-dasharray: 5 5; }
.gr__columna-fondo { fill: var(--tinta-3); opacity: .16; }
.gr__ejex {
  display: flex; margin-top: 6px; height: 14px; position: relative;
  font-size: 10.5px; color: var(--tinta-3);
}
.gr__ejex span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.gr__leyenda { display: flex; flex-wrap: wrap; gap: 5px 15px; margin-top: 11px; font-size: 11.5px; color: var(--tinta-2); }
.gr__leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.gr__llave { display: inline-block; width: 14px; height: 2px; border-radius: 2px; flex: 0 0 auto; }
.gr__llave--banda { height: 9px; opacity: .3; }
.gr__llave--caja { height: 10px; border-radius: 3px; }
.gr__llave--movil { background: var(--tinta); }

.gr__marca {
  position: absolute; top: -4px; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 700;
  background: var(--marca-viva); color: var(--sobre-marca);
  border: 2px solid var(--superficie);
}
.gr__marca--grave { background: var(--aviso); }

/* La zona del cursor cubre EXACTAMENTE el lienzo del gráfico, no el área
   entera. Con `inset: 0` se estiraba también sobre el eje de abajo y la
   leyenda, así que un `top` en porcentaje se calculaba contra una altura mayor
   que la del dibujo y los puntos salían por debajo de la línea. La altura se
   fija desde la plantilla, con el mismo valor que el SVG. */
.gr__zona { position: absolute; left: 0; right: 0; top: 0; }
.gr__punto {
  display: block; position: absolute; width: 8px; height: 8px; border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--superficie);
}
.gr__globo {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--superficie); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico); box-shadow: var(--sombra);
  padding: 9px 11px; min-width: 150px; font-size: 12px;
}
.gr__globo b { display: block; margin-bottom: 5px; font-size: 11px; color: var(--tinta-2); font-weight: 600; }
.gr__globo-fila { display: flex; align-items: center; gap: 7px; justify-content: space-between; }
.gr__globo-fila em { font-style: normal; color: var(--tinta-2); display: inline-flex; align-items: center; gap: 6px; }

/* El globo de detalle, común a todos los gráficos */
.globo {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--superficie); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico); box-shadow: var(--sombra);
  padding: 9px 11px; max-width: 320px; font-size: 12px; line-height: 1.45;
}
.globo b { display: block; margin-bottom: 5px; font-size: 11px; color: var(--tinta-2); font-weight: 600; }
.globo__fila { display: flex; align-items: baseline; gap: 14px; justify-content: space-between; }
.globo__fila em { font-style: normal; color: var(--tinta-2); }
.globo__nota { color: var(--tinta-2); font-size: 11.5px; }
[data-detalle] { cursor: default; }

/* barras horizontales */
.barras { display: flex; flex-direction: column; gap: 9px; }
.barra__etiqueta { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra__pista { display: block; position: relative; height: 15px; background: var(--tinte-neutro); border-radius: 4px; overflow: hidden; }
.barra__relleno { display: block; height: 100%; border-radius: 4px; }
.barra__referencia { display: block; position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--tinta-3); }
.barra__valor { font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
/* El volumen va al lado de la barra siempre: sin él, el primer puesto lo ocupa
   quien tiene tres casos. */
.barra__volumen { font-family: var(--cifra); font-size: 11px; color: var(--tinta-3); white-space: nowrap; }

/* embudo de pasos */
.embudo { display: flex; flex-direction: column; gap: 2px; }
.embudo__paso {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 11px; align-items: center;
}
.embudo__etiqueta { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.embudo__pista { display: block; height: 22px; background: var(--tinte-neutro); border-radius: 4px; overflow: hidden; }
.embudo__relleno { display: block; height: 100%; border-radius: 4px; }
.embudo__cifra { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.embudo__cifra b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.embudo__cifra em { font-style: normal; font-size: 11.5px; color: var(--tinta-3); }
.embudo__caida {
  font-size: 11px; color: var(--tinta-3); padding: 1px 0 1px 161px; line-height: 1.3;
}

/* apiladas al 100 % */
.apiladas { display: flex; gap: 3px; align-items: flex-end; height: 168px; }
.apiladas__col { flex: 1; display: flex; flex-direction: column-reverse; height: 100%; border-radius: 3px; overflow: hidden; min-width: 0; }
.apiladas__parte { width: 100%; }
/* La trama va como capa encima y no como background-image del propio tramo: el
   color de cada tramo se pone en un style inline, y la forma corta `background`
   borraría cualquier imagen declarada en la clase. */
.apiladas__col { position: relative; }
.apiladas__col--trama::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 3px;
  background-image: repeating-linear-gradient(45deg,
    rgba(255, 255, 255, .38) 0 3px, transparent 3px 7px);
}
:root:not([data-theme="dark"]) .apiladas__col--trama::after {
  background-image: repeating-linear-gradient(45deg,
    rgba(16, 26, 14, .30) 0 3px, transparent 3px 7px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .apiladas__col--trama::after {
    background-image: repeating-linear-gradient(45deg,
      rgba(255, 255, 255, .38) 0 3px, transparent 3px 7px);
  }
}
.apiladas__ejex { display: flex; gap: 3px; margin-top: 6px; font-size: 10px; color: var(--tinta-3); }
.apiladas__ejex span { flex: 1; text-align: center; min-width: 0; overflow: hidden; }

/* columnas verticales */
.columnas__trama { fill: var(--tinta-3); opacity: .35; }

/* barras agrupadas */
.grupos { display: flex; gap: 14px; align-items: flex-end; height: 150px; }
.grupo { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.grupo__barras { display: flex; gap: 4px; align-items: flex-end; height: 128px; }
.grupo__barra { display: block; flex: 1; border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.grupo__valor {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  font-style: normal; font-family: var(--cifra); font-variant-numeric: tabular-nums;
  font-size: 10px; color: var(--tinta-2); white-space: nowrap; padding-bottom: 3px;
}
.grupo__etiqueta { text-align: center; font-size: 11.5px; color: var(--tinta-2); }

/* caja y bigotes */
.cajas { display: flex; flex-direction: column; gap: 11px; }
.caja__pista { display: block; position: relative; height: 22px; }
.caja__bigote { display: block; position: absolute; top: 10px; height: 1px; background: var(--tinta-3); }
.caja__cuerpo { display: block; position: absolute; top: 4px; height: 14px; border-radius: 3px; opacity: .85; }
.caja__mediana { display: block; position: absolute; top: 2px; height: 18px; width: 2px; background: var(--tinta); }
.caja__tope { display: block; position: absolute; top: 6px; height: 10px; width: 1px; background: var(--tinta-3); }

/* mapa de calor */
.calor { overflow-x: auto; }
.calor__celda {
  width: 54px; height: 32px; border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--cifra); font-size: 11px; font-weight: 600;
}
.calor__celda--vacia { background: var(--tinte-neutro); color: var(--tinta-3); }
.calor__fila-etiqueta { padding-right: 10px; font-size: 12px; text-align: right; white-space: nowrap; }
.calor__col-etiqueta { font-size: 11px; color: var(--tinta-2); font-weight: 500; padding-bottom: 4px; }

/* dispersión */
.dispersion { position: relative; height: 240px; border-left: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.dispersion__punto { display: block; position: absolute; border-radius: 50%; transform: translate(-50%, -50%); opacity: .72; border: 1px solid var(--superficie); }
.dispersion__cero { display: block; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--linea-fuerte); }

/* ── Tablas ────────────────────────────────────────────────────────────── */

.tabla-envoltura { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabla th {
  text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tinta-3);
  padding: 7px 10px; border-bottom: 1px solid var(--linea); white-space: nowrap;
}
.tabla td { padding: 8px 10px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--tinte-neutro); }
.tabla .num { text-align: right; font-family: var(--cifra); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .semaforo { border-left: 3px solid var(--linea); }
.tabla .semaforo--bien  { border-left-color: var(--bien); }
.tabla .semaforo--aviso { border-left-color: var(--aviso); }
.tabla .semaforo--grave { border-left-color: var(--grave); }

/* ── Controles ─────────────────────────────────────────────────────────── */

.filtros { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; align-items: flex-end; }
.filtro { display: flex; flex-direction: column; gap: 3px; }
.filtro label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.filtro select, .filtro input {
  font: inherit; font-size: 13px;
  padding: 7px 10px; border-radius: var(--radio-chico);
  border: 1px solid var(--linea-fuerte);
  background: var(--superficie); color: var(--tinta);
  min-width: 132px;
}
/* Un filtro obligatorio no es una preferencia: sin él el panel mezclaría
   poblaciones incomparables, así que se distingue de los demás. */
.filtro--obligatorio select { border-color: var(--marca); }
.filtro--obligatorio label::after { content: " · obligatorio"; color: var(--marca); letter-spacing: .04em; }

.pestanas { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 14px; border-bottom: 1px solid var(--linea); }
.pestana {
  padding: 8px 13px; font-size: 13px; font-weight: 500;
  color: var(--tinta-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pestana:hover { color: var(--tinta); text-decoration: none; }
.pestana[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--marca); font-weight: 600; }

.boton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--radio-chico);
  border: 1px solid var(--linea-fuerte); background: transparent;
  color: var(--tinta); font: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer;
}
.boton:hover { background: var(--tinte-neutro); text-decoration: none; }
.boton--principal { background: var(--marca-viva); border-color: var(--marca-viva); color: var(--sobre-marca); font-weight: 600; }
.boton--principal:hover { filter: brightness(1.06); }

/* ── Estático: lo que todavía no se ha construido ──────────────────────── */

.esbozo { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.esbozo__lista { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.esbozo__item {
  display: flex; gap: 11px; padding: 12px 14px;
  border: 1px solid var(--linea); border-radius: var(--radio-chico);
  background: var(--superficie);
}
.esbozo__n {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--tinte-neutro); color: var(--tinta-3);
  font-family: var(--cifra); font-size: 10px; font-weight: 700;
}

.lista { display: flex; flex-direction: column; }
.lista__item {
  display: flex; gap: 11px; padding: 11px 0;
  border-bottom: 1px solid var(--linea); align-items: flex-start;
}
.lista__item:last-child { border-bottom: 0; }
.lista__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lista__derecha { text-align: right; flex: 0 0 auto; }

.vacio { padding: 26px 16px; text-align: center; color: var(--tinta-2); font-size: 13px; }


/* ── Gráficos de ECharts ──────────────────────────────────────────────────
   El contenedor tiene que tener altura antes de que la librería mida: si se la
   dejáramos deducir del contenido, mide cero y no pinta. El ancho sí es fluido
   y el gráfico se redibuja al cambiar el tamaño de la ventana. */
.ec { width: 100%; min-width: 0; }
.ec--chispa { width: 100px; height: 26px; flex: 0 0 auto; }
/* Si la librería no carga, el hueco lo dice en vez de quedarse en blanco: las
   cifras, las tablas y las salvedades de la página siguen estando. */
.ec--sin-libreria {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--linea); border-radius: var(--radio-chico);
  color: var(--tinta-3); font-size: .8rem;
}
.globo__punto {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: 6px; flex: 0 0 auto;
}

/* La leyenda en HTML de los gráficos que la llevan fuera de la librería: se
   imprime, se selecciona y no depende de que el JavaScript haya corrido. */
.claves { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px;
          font-size: 11.5px; color: var(--tinta-2); }
.claves span { display: inline-flex; align-items: center; gap: 7px; }

/* Matriz de pequeños múltiplos: las filas son el tipo de parte y las columnas
   el tramo, siempre en el mismo orden. Se lee en las dos direcciones, y para
   que la lectura vertical funcione las columnas tienen que estar alineadas
   aunque falte alguna celda — de ahí la rejilla fija y el hueco a la vista.

   Cada celda tiene SU escala: comparten forma y no ancho, y por eso van
   separadas. En un eje común, poner juntas dos distribuciones que no se pueden
   comparar es afirmar que sí. */
.matriz { display: grid; gap: 0; }
.matriz__cabecera, .matriz__fila {
  display: grid; gap: 4px 18px; align-items: start;
  grid-template-columns: 120px repeat(var(--columnas), minmax(0, 1fr));
}
.matriz__cabecera { padding-bottom: 6px; }
.matriz__fila { padding: 12px 0 14px; border-top: 1px solid var(--linea); }
.matriz__tipo {
  font-size: .86rem; font-weight: 600; color: var(--tinta-2);
  padding-top: 18px;
}
.multiple { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.multiple--vacio {
  justify-content: center; align-items: center; min-height: 68px;
  border: 1px dashed var(--linea); border-radius: var(--radio-chico);
}
.multiple__pie { font-size: .72rem; color: var(--tinta-3); }

/* Por debajo de 900px la matriz deja de caber y pasa a una celda por fila. Se
   pierde la lectura vertical, que es el precio de que se lea algo. */
@media (max-width: 900px) {
  .matriz__cabecera { display: none; }
  .matriz__fila { grid-template-columns: 1fr; }
  .matriz__tipo { padding-top: 0; }
  .multiple::before {
    content: attr(data-tramo); font-size: .8rem; color: var(--tinta-2);
  }
}

/* El violín de la vida entera, debajo del recorrido y separado por una línea:
   dicen dos cosas distintas del mismo dato y sus ejes no comparten escala. */
.vida-entera {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea);
}

/* ── Catálogo y explorador ──────────────────────────────────────────────── */

/* Las dimensiones del explorador son casillas y no un desplegable: se pueden
   cruzar dos a la vez, y con un desplegable habría que elegir una. */
.casillas { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 7px 0 6px; }
.casilla {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--tinta-2); white-space: nowrap; cursor: pointer;
}
.casilla input { min-width: 0; margin: 0; accent-color: var(--marca); }

/* Un control apagado tiene que PARECER apagado: si no, el usuario lo pulsa,
   no pasa nada y concluye que la pantalla está rota. El motivo va en el
   `title` y, cuando importa, en una salvedad al lado. */
.filtro select:disabled, .filtro input:disabled {
  opacity: .55; cursor: not-allowed; background: var(--tinte-neutro);
}

/* El SQL se enseña entero y sin recortar: es el contrato de lo que se está
   viendo, y un bloque con puntos suspensivos no se puede comprobar. */
.codigo {
  margin: 0; padding: 12px 14px; overflow-x: auto;
  background: var(--tinte-neutro); border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  font-family: var(--cifra); font-size: 12.5px; line-height: 1.55;
  color: var(--tinta-2); white-space: pre;
}
.codigo code { font: inherit; color: inherit; }

/* Tabla de dos columnas para una ficha: etiqueta a la izquierda, valor a la
   derecha. Es una tabla y no una lista de definiciones porque alinea. */
.tabla--ficha th {
  text-align: left; font-weight: 600; color: var(--tinta-3);
  white-space: nowrap; width: 1%; padding-right: 16px;
  text-transform: none; letter-spacing: 0; font-size: 12.5px;
}
.tabla--ficha td { font-size: 13px; }
.tabla--ficha tbody tr:hover { background: none; }

/* ── La consola de SQL ──────────────────────────────────────────────────── */

.consola { display: flex; flex-direction: column; gap: 10px; }
.consola__sql {
  width: 100%; resize: vertical; min-height: 140px;
  padding: 12px 14px; border-radius: var(--radio-chico);
  border: 1px solid var(--linea-fuerte);
  background: var(--tinte-neutro); color: var(--tinta);
  font-family: var(--cifra); font-size: 13px; line-height: 1.55;
  tab-size: 2;
}
.consola__sql:focus { outline: 2px solid var(--marca); outline-offset: 1px; }
.consola__pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* El error se lee entero y con su formato: el mensaje de Postgres dice en qué
   columna está el fallo, y recortarlo deja a quien escribe sin esa pista. */
.codigo--error {
  white-space: pre-wrap; border-color: var(--grave);
  background: var(--tinte-grave); color: var(--tinta);
}

/* El mapa de tablas: plegado por defecto salvo oro, que es donde se mira. */
.esquema { margin-bottom: 8px; }
.esquema > summary { cursor: pointer; padding: 4px 0; font-size: 14px; }
.esquema__tablas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2px 18px; padding: 6px 0 10px 14px;
}
.esquema__tabla > summary {
  cursor: pointer; padding: 3px 0; font-size: 12.5px;
  font-family: var(--cifra); color: var(--tinta-2);
}
.esquema__columnas {
  margin: 2px 0 8px; padding-left: 16px; list-style: none;
  font-size: 12px; color: var(--tinta-3); font-family: var(--cifra);
}
.esquema__columnas li { padding: 1px 0; }

/* ── P-05 · el reparto del plazo, una fila por regla ───────────────────── */
/* Uno debajo de otro y no en rejilla: cada regla tiene su propia escala —el
   plazo de la A se mide en un día y el de la E en veinticinco— y ponerlas en
   columnas invita a comparar anchuras que no son comparables. */
.reparto { display: flex; flex-direction: column; gap: 4px; }
.reparto__regla {
  display: grid; grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 14px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--linea);
}
.reparto__regla:last-child { border-bottom: 0; }
.reparto__cabeza { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 760px) {
  .reparto__regla { grid-template-columns: 1fr; }
}

/* Tabla de comparación de dos columnas: las cifras se leen enfrentadas, y la
   fila lleva debajo por qué esa comparación importa. */
.tabla--comparar th { text-transform: none; letter-spacing: 0; font-size: 12px; }
.tabla--comparar td:first-child { font-size: 13px; }
.tabla--comparar tbody tr:hover { background: none; }

/* ── Entrar, cambiar la contraseña y gestionar cuentas ──────────────────────
   Las dos primeras se sirven sin menú: una puerta de entrada no debe contar
   nada del sistema a quien todavía no ha dicho quién es. */

.cuerpo-suelto {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--fondo);
}

.puerta { width: 100%; max-width: 420px; }

.puerta__marca { display: flex; justify-content: center; margin-bottom: 28px; }
.puerta__marca img { height: 34px; width: auto; }

.puerta__caja {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 28px;
}

.puerta__titulo { margin: 0 0 4px; font-size: 1.25rem; }
.puerta__bajada { margin: 0 0 20px; }
.puerta__pie { text-align: center; margin-top: 20px; }

.formulario { display: flex; flex-direction: column; gap: 14px; }

/* En fila cuando hay sitio: el alta de una cuenta son cinco campos cortos y
   apilarlos obliga a bajar la vista por nada. */
.formulario--fila {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}
.formulario--fila .campo { flex: 1 1 150px; }

.campo { display: flex; flex-direction: column; gap: 5px; }
.campo__nombre { font-size: .8rem; color: var(--tinta-2); }
.campo__pista { line-height: 1.35; }

.campo__caja {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  font: inherit;
  font-size: .92rem;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 7px;
}
.campo__caja:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 1px;
  border-color: var(--marca);
}
.campo__caja--corta { padding: 4px 7px; font-size: .84rem; }

.boton--ancho { width: 100%; justify-content: center; text-align: center; }
.boton--pequeno { padding: 3px 9px; font-size: .78rem; }
.boton--peligro { color: var(--grave); border-color: currentColor; }

.en-linea { display: inline-block; margin: 0; }

.acciones { white-space: nowrap; }
.acciones form, .acciones details { vertical-align: middle; }
.acciones__desplegable {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  align-items: center;
}
.acciones__desplegable .campo__caja { width: 170px; }

/* ── Quién está dentro, en el pie del menú ──────────────────────────────── */

.rail__pie {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quien {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px;
  min-width: 0;
}

/* Las iniciales, con el mismo lenguaje que el icono de una entrada activa:
   cuadrado redondeado, tinte de marca y la tipografía de cifra. */
.quien__inicial {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--tinte-marca);
  color: var(--marca);
  font-family: var(--cifra);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}

.quien__texto { display: flex; flex-direction: column; min-width: 0; gap: 1px; }

.quien__nombre {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.quien__rol {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* Las dos acciones, del mismo ancho y con el mismo comportamiento que un
   enlace del menú: aquí abajo no hay jerarquía entre ellas. */
.rail__acciones { display: flex; gap: 6px; }
.rail__acciones > * { flex: 1 1 0; min-width: 0; }
.rail__acciones form { margin: 0; display: flex; }

.accion {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: transparent;
  color: var(--tinta-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}
.accion:hover {
  background: var(--tinte-neutro);
  color: var(--tinta);
  text-decoration: none;
}
.accion:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.accion__icono { display: grid; place-items: center; color: var(--tinta-3); }
.accion:hover .accion__icono { color: var(--marca); }

.rail__nota { margin: 0; line-height: 1.4; }

/* ── Lo que solo se ve con un tema ──────────────────────────────────────────
   Las dos versiones de una cosa conviven en el HTML y se enseña la que toca:
   el logotipo y el icono del botón de tema. Con CSS y no con JavaScript, que
   es lo que permite cambiar de tema sin recargar y sin que haya un instante en
   que el botón diga una cosa y la página sea otra.

   Vive AQUÍ y no en un `<style>` dentro de `base.html`, que es donde estaba.
   La pantalla de entrada no extiende `base.html` —a propósito: una puerta no
   enseña el menú—, así que se quedaba sin estas reglas y salía con los DOS
   logotipos, uno encima del otro.

   Cubre los TRES estados, que es donde suele fallar esto: claro elegido,
   oscuro elegido, y «el del sistema», que no estampa nada en el html y solo
   lo distingue `prefers-color-scheme`. La regla del medio lleva
   `:not([data-theme="light"])` para que elegir claro gane sobre un sistema
   puesto en oscuro. */

.solo-claro  { display: block; }
.solo-oscuro { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .solo-claro  { display: none; }
  :root:not([data-theme="light"]) .solo-oscuro { display: block; }
}

:root[data-theme="dark"]  .solo-claro  { display: none; }
:root[data-theme="dark"]  .solo-oscuro { display: block; }
:root[data-theme="light"] .solo-claro  { display: block; }
:root[data-theme="light"] .solo-oscuro { display: none; }