/* Estilos del panel administrativo.

   El acento es el azul de la marca, #091F92, tomado del propio logo. En fondo
   oscuro ese azul queda demasiado apagado para leerse, así que el modo oscuro
   usa una versión aclarada del mismo tono: es el mismo color, no otro.

   Tres estados de tema, no dos: elección explícita (data-tema en <html>),
   y sin elección, la preferencia del sistema. Por eso los tokens se definen
   completos en :root y sólo se redefinen en los otros dos bloques. */

:root {
  --marca:        #091F92;
  --fondo:        #f4f6fa;
  --tarjeta:      #ffffff;
  --hundido:      #eef1f7;
  --borde:        #d9dfeb;
  --texto:        #161c2e;
  --tenue:        #5c6580;
  --acento:       #091F92;
  --acento-texto: #ffffff;
  --ok:           #0f6b46;
  --ok-fondo:     #dcf0e6;
  --error:        #a3231a;
  --error-fondo:  #fae5e3;
  --aviso:        #77590a;
  --aviso-fondo:  #fbf0d4;
  --logo-claro:   block;    /* logo azul sobre fondo claro */
  --logo-oscuro:  none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo:        #0f1419;
    --tarjeta:      #171e26;
    --hundido:      #0b1015;
    --borde:        #26303a;
    --texto:        #e6ecf1;
    --tenue:        #8d9ba7;
    --acento:       #5b7ce8;
    --acento-texto: #06122e;
    --ok:           #6fd0a9;
    --ok-fondo:     #12303a;
    --error:        #f0908e;
    --error-fondo:  #3a1a17;
    --aviso:        #dcc468;
    --aviso-fondo:  #322c0f;
    --logo-claro:   none;
    --logo-oscuro:  block;
  }
}

:root[data-tema="oscuro"] {
  --fondo:        #0f1419;
  --tarjeta:      #171e26;
  --hundido:      #0b1015;
  --borde:        #26303a;
  --texto:        #e6ecf1;
  --tenue:        #8d9ba7;
  --acento:       #5b7ce8;
  --acento-texto: #06122e;
  --ok:           #6fd0a9;
  --ok-fondo:     #12303a;
  --error:        #f0908e;
  --error-fondo:  #3a1a17;
  --aviso:        #dcc468;
  --aviso-fondo:  #322c0f;
  --logo-claro:   none;
  --logo-oscuro:  block;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
}

/* --- Páginas centradas (acceso, segundo factor) --- */

body.centrado {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.tarjeta {
  width: 100%;
  max-width: 23rem;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.tarjeta.ancha { max-width: 32rem; }

h1 { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
.sub { margin: .3rem 0 0; color: var(--tenue); font-size: .85rem; }

/* --- Formularios --- */

form { display: flex; flex-direction: column; gap: 1rem; }

label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .82rem;
  color: var(--tenue);
}

/* Por exclusión y no enumerando tipos: la lista se quedaba corta cada vez que
   un formulario nuevo usaba uno distinto —un input[type=number] salió con el
   fondo blanco del navegador en medio del modo oscuro—. Aquí lo que se lista
   es lo que NO se pinta: casillas, botones y controles con apariencia propia. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):not([type="color"]) {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 5px;
  padding: .65rem .75rem;
  color: var(--texto);
  font-size: .95rem;
  font-family: inherit;
}

input:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: transparent;
}

input.codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.4rem;
  letter-spacing: .35em;
  text-align: center;
}

button {
  background: var(--acento);
  color: var(--acento-texto);
  border: 0;
  border-radius: 5px;
  padding: .7rem;
  font-size: .92rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-top: .2rem;
}

button:hover { filter: brightness(1.08); }
button:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }

/* --- Mensajes --- */

.error, .aviso, .exito {
  border-radius: 5px;
  padding: .6rem .75rem;
  font-size: .85rem;
  margin: 0;
}

.error { background: var(--error-fondo); color: var(--error); }
.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.exito { background: var(--ok-fondo);    color: var(--ok); }

.pie { color: var(--tenue); font-size: .75rem; text-align: center; margin: 0; }

/* --- Secreto y códigos --- */

.secreto {
  background: var(--hundido);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: .85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95rem;
  letter-spacing: .06em;
  text-align: center;
  word-break: break-all;
  user-select: all;
}

.codigos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: .5rem;
}

.codigos li {
  background: var(--hundido);
  border: 1px solid var(--borde);
  border-radius: 5px;
  padding: .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92rem;
  text-align: center;
  user-select: all;
}

ol.pasos { margin: 0; padding-left: 1.2rem; color: var(--tenue); font-size: .87rem; }
ol.pasos li { margin-bottom: .4rem; }
ol.pasos strong { color: var(--texto); font-weight: 600; }

/* --- Panel --- */

header.barra {
  border-bottom: 1px solid var(--borde);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

header.barra strong { font-size: .95rem; }
header.barra span   { color: var(--tenue); font-size: .82rem; }

a.boton-tenue {
  color: var(--tenue);
  font-size: .82rem;
  text-decoration: none;
  border: 1px solid var(--borde);
  padding: .4rem .7rem;
  border-radius: 5px;
}

a.boton-tenue:hover { color: var(--texto); }

main.contenido {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.caja {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}

h2 {
  margin: 0 0 .9rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tenue);
  font-weight: 600;
}

dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; font-size: .92rem; }
dt { color: var(--tenue); }
dd { margin: 0; }

ul.etiquetas { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }

ul.etiquetas li {
  background: var(--ok-fondo);
  color: var(--ok);
  font-size: .76rem;
  padding: .25rem .55rem;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
}

/* --- Código QR del enrolamiento --- */

.qr {
  background: #fff;              /* los lectores necesitan fondo claro */
  border-radius: 6px;
  padding: .9rem;
  display: flex;
  justify-content: center;
  align-self: center;
  width: fit-content;
}

.qr svg { display: block; width: 12.5rem; height: 12.5rem; }

details { font-size: .85rem; color: var(--tenue); }
details summary { cursor: pointer; padding: .3rem 0; }
details summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 3px; }
details[open] summary { margin-bottom: .2rem; }

/* --- Dashboard financiero --- */

/* Las pantallas de tabla necesitan más aire: con 62rem, la de empleados no
   cabía y aparecía una barra horizontal. Se ensancha hasta donde da la
   ventana, con un tope para que en un monitor grande el texto no quede en
   renglones de punta a punta. */
main.contenido.ancho { max-width: min(96vw, 82rem); }

.filtros { display: flex; flex-wrap: wrap; gap: .4rem; }

.filtro {
  color: var(--tenue);
  font-size: .84rem;
  text-decoration: none;
  border: 1px solid var(--borde);
  padding: .35rem .8rem;
  border-radius: 5px;
}

.filtro:hover { color: var(--texto); }
.filtro.activo { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); font-weight: 600; }

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
}

.cifra {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.cifra .rotulo {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tenue);
  font-weight: 600;
}

.cifra .monto {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.cifra .monto.acento { color: var(--ok); }
.cifra .nota { font-size: .75rem; color: var(--tenue); }

/* Tablas */

.tabla-scroll { overflow-x: auto; }

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

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

thead th {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tenue);
  font-weight: 600;
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(255,255,255,.02); }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Un puesto largo estiraba la tabla hasta sacarla de la pantalla. Las columnas
   de texto envuelven; las de dato atómico —fecha, importe, teléfono— siguen en
   un solo renglón, que partirlas ahí sí estorba.

   break-word y no anywhere: anywhere permite que la columna se encoja por
   debajo de su palabra más larga, y «Hardware» salía cortado en dos renglones
   dentro de una columna de cuatro letras de ancho. */
td { overflow-wrap: break-word; }

.pastilla {
  font-size: .7rem;
  padding: .15rem .45rem;
  border-radius: 3px;
  white-space: nowrap;
}

.pastilla.gasto { background: var(--ok-fondo);    color: var(--ok); }
.pastilla.costo { background: var(--aviso-fondo); color: var(--aviso); }
.pastilla.accion { background: var(--hundido); color: var(--tenue); font-family: ui-monospace, monospace; }

.divisa { color: var(--tenue); font-size: .78rem; }
.vacio  { color: var(--tenue); font-size: .84rem; margin: 0; }

/* --- Navegación de la barra --- */

.barra-izq { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.barra-der { display: flex; align-items: center; gap: .75rem; }

.menu { display: flex; gap: .3rem; }

.enlace-menu {
  color: var(--tenue);
  font-size: .85rem;
  text-decoration: none;
  padding: .35rem .7rem;
  border-radius: 5px;
}

.enlace-menu:hover  { color: var(--texto); background: rgba(255,255,255,.04); }
.enlace-menu.activo { color: var(--texto); background: rgba(47,143,168,.18); font-weight: 600; }

.quien { color: var(--tenue); font-size: .78rem; }

@media (max-width: 34rem) {
  header.barra { flex-direction: column; align-items: flex-start; }
  .quien { display: none; }
}

/* --- Formularios de edición --- */

.caja-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: .9rem;
}

.caja-cabecera h2 { margin: 0; }

.boton-accion {
  background: var(--acento);
  color: var(--acento-texto);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  padding: .45rem .9rem;
  border-radius: 5px;
  white-space: nowrap;
}

.boton-accion:hover { filter: brightness(1.08); }

.formulario { gap: 1.25rem; }

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}

.rejilla .ancho-total { grid-column: 1 / -1; }

select {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 5px;
  padding: .65rem .75rem;
  color: var(--texto);
  font-size: .95rem;
  font-family: inherit;
}

select:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

input[type="date"] {
  padding: .6rem .75rem;
}

.campo-error { color: var(--error); font-size: .76rem; }
.opcional    { color: var(--tenue); font-size: .72rem; font-weight: 400; }

.acciones { display: flex; gap: .7rem; align-items: center; }
.acciones button { margin-top: 0; padding: .7rem 1.4rem; }

/* --- Teléfonos --- */

a.tel { color: var(--texto); text-decoration: none; border-bottom: 1px dotted var(--borde); }
a.tel:hover { color: var(--acento); border-bottom-color: var(--acento); }
.sin-dato { color: var(--tenue); }
.ayuda { color: var(--tenue); font-size: .72rem; line-height: 1.35; }

/* --- Herramientas --- */

.tenedor { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.tenedor:last-child { margin-bottom: 0; }

form.en-linea { display: inline; }

button.mini {
  background: transparent;
  color: var(--tenue);
  border: 1px solid var(--borde);
  font-size: .72rem;
  font-weight: 500;
  padding: .15rem .45rem;
  border-radius: 4px;
  margin: 0;
  cursor: pointer;
}

button.mini:hover { color: var(--texto); border-color: var(--acento); }

.marca-discrepancia {
  display: inline-block;
  background: var(--aviso-fondo);
  color: var(--aviso);
  font-weight: 700;
  font-size: .7rem;
  width: 1.1rem;
  height: 1.1rem;
  line-height: 1.1rem;
  text-align: center;
  border-radius: 50%;
  margin-left: .3rem;
  cursor: help;
}

/* --- Ficha de herramienta --- */

.caja.ficha { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.caja.ficha h1 { font-size: 1.35rem; margin: .2rem 0 0; }
.caja.ficha .rotulo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tenue); font-weight: 600;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }

.lista-simple { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; font-size: .92rem; }

.boton-accion.mini-accion { font-size: .74rem; padding: .3rem .6rem; margin-right: .3rem; }

/* --- Accesos y bitácora --- */

.acciones-fila { display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; }

dl.roles {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35rem 1rem;
  font-size: .82rem;
}

dl.roles dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--acento);
}

dl.roles dd { margin: 0; color: var(--tenue); }

td.detalle { max-width: 26rem; font-size: .82rem; }
td.detalle .antes   { color: var(--tenue); text-decoration: line-through; opacity: .75; }
td.detalle .despues { color: var(--texto); }

table select { padding: .3rem .5rem; font-size: .82rem; }

/* --- Logo --- */

.logo { display: block; height: auto; }
.logo-claro  { display: var(--logo-claro); }
.logo-oscuro { display: var(--logo-oscuro); }

.marca-login { align-self: center; margin-bottom: .3rem; }
.marca-login .logo { width: 11rem; }

header.barra .marca { display: flex; align-items: center; gap: .8rem; }
header.barra .marca .logo { width: 6.5rem; }

header.barra .separador {
  width: 1px; height: 1.6rem; background: var(--borde); flex: none;
}

/* --- Interruptor de tema --- */

.tema {
  background: transparent;
  border: 1px solid var(--borde);
  color: var(--tenue);
  border-radius: 5px;
  padding: .35rem .55rem;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  margin: 0;
  font-family: inherit;
}

.tema:hover { color: var(--texto); border-color: var(--acento); }
.tema .icono-claro  { display: var(--logo-oscuro); }  /* en oscuro se ofrece pasar a claro */
.tema .icono-oscuro { display: var(--logo-claro); }

/* En modo claro las tablas necesitan algo más de contraste al pasar el cursor. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) tbody tr:hover { background: rgba(9,31,146,.04); }
}
:root[data-tema="claro"] tbody tr:hover { background: rgba(9,31,146,.04); }

/* --- Panel de inicio --- */

.saludo h1 { font-size: 1.4rem; margin: 0; letter-spacing: -.02em; }
.saludo .sub { margin-top: .25rem; }

/* Dos columnas cuando cabe, una cuando no. Las cajas se acomodan solas según
   cuántas permita el rol: nadie ve un hueco donde otro ve una tarjeta. */
.rejilla-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.rejilla-panel .caja.abarca { grid-column: 1 / -1; }

.mini-datos { grid-template-columns: 1fr max-content; }
.mini-datos dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.aviso a { color: inherit; font-weight: 600; }

/* Ranking con barra proporcional al mayor de la lista. Es una comparación
   relativa, no una escala absoluta: sirve para ver el orden de un vistazo. */
.ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }

.ranking-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: .88rem;
}

.ranking-fila .num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tenue); }

.ranking-barra {
  margin-top: .3rem;
  height: 5px;
  background: var(--hundido);
  border-radius: 3px;
  overflow: hidden;
}

.ranking-barra span { display: block; height: 100%; background: var(--acento); border-radius: 3px; }

/* Variación: el color dice si el cambio conviene, no hacia dónde va. Que
   suban los ingresos es bueno y que suban los egresos no; la flecha dice la
   dirección y el color, el juicio. Antes eran «sube» en rojo y «baja» en
   verde, pensados sólo para gastos. */
.favorable    { color: var(--ok);    font-weight: 600; }
.desfavorable { color: var(--error); font-weight: 600; }

.lista-simple li { padding-bottom: .35rem; border-bottom: 1px solid var(--borde); }
.lista-simple li:last-child { padding-bottom: 0; border-bottom: none; }

.pie.izq { text-align: left; margin-top: .9rem; }

/* Los enlaces sueltos —los que no son botón ni pestaña— se quedaban con el
   azul del navegador, ilegible sobre el fondo oscuro y morado al visitarlos.
   Va al final a propósito: la especificidad de un elemento no le gana a
   ninguna de las clases de arriba, así que .enlace-menu y compañía siguen
   mandando sobre los suyos. */
a { color: var(--acento); }
a:hover { color: var(--texto); }

/* --- Membrete de impresión --- */

/* En pantalla no existe; al imprimir es lo que reemplaza a la barra. */
.membrete { display: none; }

/* --- Impresión y PDF ---
   El PDF sale de aquí: «Guardar como PDF» del diálogo de impresión. Sin
   librería en el servidor, y lo que se ve en pantalla es lo que se imprime. */

@media print {

  /* La paleta clara, pase lo que pase. El selector con atributo empata en
     especificidad con :root[data-tema="oscuro"] y gana por venir después: sin
     esto, quien tenga el modo oscuro puesto imprimiría páginas negras. */
  :root,
  :root[data-tema] {
    --marca:        #091F92;
    --fondo:        #ffffff;
    --tarjeta:      #ffffff;
    --hundido:      #eef1f7;
    --borde:        #b9c2d4;
    --texto:        #000000;
    --tenue:        #444c60;
    --acento:       #091F92;
    --acento-texto: #ffffff;
    --ok:           #0f6b46;
    --ok-fondo:     #eaf5ef;
    --error:        #a3231a;
    --error-fondo:  #fbeceb;
    --aviso:        #6b4f08;
    --aviso-fondo:  #fdf6e3;
    --logo-claro:   block;
    --logo-oscuro:  none;
  }

  @page { margin: 14mm 12mm; }

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

  /* Lo que sólo sirve para navegar no va en papel. */
  header.barra,
  .filtros,
  .boton-accion,
  .acciones,
  .tema,
  .sin-impresion,
  form,
  button { display: none !important; }

  main.contenido,
  main.contenido.ancho { max-width: none; padding: 0; gap: 1rem; }

  .membrete {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-bottom: 1.5pt solid var(--marca);
    padding-bottom: .6rem;
    margin-bottom: .4rem;
  }

  .membrete .logo { width: 34mm; }

  .membrete-datos { display: flex; flex-direction: column; gap: .15rem; font-size: 8.5pt; }
  .membrete-datos strong { font-size: 11pt; }
  .membrete-datos span   { color: var(--tenue); }

  /* Una tarjeta partida a la mitad entre dos hojas es ilegible. */
  .caja, .cifra, .membrete { break-inside: avoid; page-break-inside: avoid; }
  tr, li { break-inside: avoid; }

  .caja, .cifra { border: .5pt solid var(--borde); box-shadow: none; }

  /* En pantalla la tabla se desliza; en papel no hay a dónde deslizarla. */
  .tabla-scroll { overflow: visible; }
  table { width: 100%; font-size: 9pt; }

  /* Los degradados y fondos de color se pierden si el navegador no imprime
     gráficos de fondo. Se piden explícitamente: sin ellos las barras de las
     gráficas salen en blanco y la hoja no dice nada. */
  .comparativa .col,
  .ranking-barra span,
  .leyenda .punto,
  .pastilla,
  .aviso, .error, .exito {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .comparativa .col.egreso  { background: var(--marca); }
  .comparativa .col.ingreso { background: var(--ok); }
  .globo { display: none !important; }

  /* Un URL entre paréntesis después de cada enlace ensucia la hoja y aquí no
     aporta: todo apunta al mismo panel privado. */
  a { color: var(--texto); text-decoration: none; }
}

/* --- Fila de descargas --- */

.exportar { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }

.rotulo-exportar {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tenue);
  font-weight: 600;
  margin-right: .2rem;
}

.boton-descarga {
  background: transparent;
  border: 1px solid var(--borde);
  color: var(--tenue);
  border-radius: 5px;
  padding: .38rem .7rem;
  font-size: .78rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  margin: 0;
  width: auto;
}

.boton-descarga:hover { color: var(--texto); border-color: var(--acento); }

.saludo { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }

.fila-acciones {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* El botón de acción es un <a> aquí, así que necesita portarse como botón. */
a.boton-accion { text-decoration: none; display: inline-block; }


/* --- Ingresos y egresos ------------------------------------------------------
   Un color por lado, el mismo en todas partes: número, pastilla, barra y punto
   de la leyenda. Egresos en el azul de la marca y no en rojo: con egresos muy
   por encima de los ingresos, una gráfica roja entera se leería como alarma
   cuando sólo es la etapa en que está la empresa. El rojo se reserva para un
   resultado negativo. */

.monto.ingreso, td.ingreso, .ingreso { color: var(--ok); }
.monto.egreso { color: var(--texto); }

/* El resultado va aparte de ingreso/egreso a propósito: al principio compartían
   clase y el rojo de un resultado negativo quedaba tapado por el color neutro
   de los egresos. Son dos preguntas distintas —de qué lado es un movimiento, y
   si el saldo quedó a favor o en contra— y cada una lleva su clase. */
.positivo { color: var(--ok); }
.negativo { color: var(--error); }
.cifra .monto.egreso + .nota { color: var(--tenue); }

.pastilla.ingreso { background: var(--ok-fondo); color: var(--ok); }
.pastilla.egreso  { background: var(--hundido);  color: var(--tenue); }

/* --- Pestañas de Finanzas --- */

.pestanas {
  display: flex;
  gap: .2rem;
  border-bottom: 1px solid var(--borde);
}

.pestana {
  color: var(--tenue);
  text-decoration: none;
  font-size: .9rem;
  padding: .55rem .9rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.pestana:hover { color: var(--texto); }
.pestana.activa { color: var(--texto); border-bottom-color: var(--acento); font-weight: 600; }

.grupo-botones { display: flex; gap: .5rem; flex-wrap: wrap; }

/* --- Tarjetas de cifras que llevan a su detalle --- */

a.cifra-liga { text-decoration: none; color: inherit; transition: border-color .15s ease; }
a.cifra-liga:hover { border-color: var(--acento); }
a.cifra-liga:hover .nota { color: var(--acento); }
a.cifra-liga:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* --- Filas de tabla que se abren con un clic en cualquier parte ---
   El enlace es real —se puede abrir en otra pestaña, con el teclado, con el
   botón central— y su ::after se estira sobre toda la fila. Hacerlo con un
   onclick en el <tr> perdería todo eso. */

.tabla-filas-liga tbody tr { position: relative; cursor: pointer; }
.tabla-filas-liga tbody tr:hover { background: var(--hundido); }

.liga-fila { color: inherit; text-decoration: none; font-weight: 500; }
.liga-fila::after { content: ""; position: absolute; inset: 0; }
.tabla-filas-liga tbody tr:hover .liga-fila { color: var(--acento); }
.liga-fila:focus-visible { outline: none; }
.tabla-filas-liga tbody tr:has(.liga-fila:focus-visible) { outline: 2px solid var(--acento); outline-offset: -2px; }

.liga-tabla { color: inherit; text-decoration: underline; text-decoration-color: var(--borde); text-underline-offset: 3px; }
.liga-tabla:hover { color: var(--acento); text-decoration-color: currentColor; }

/* --- Gráfica comparativa --- */


.leyenda { display: flex; gap: 1rem; font-size: .78rem; color: var(--tenue); }
.leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.leyenda .punto { width: .65rem; height: .65rem; border-radius: 2px; display: inline-block; }
.punto.ingreso { background: var(--ok); }
.punto.egreso  { background: var(--acento); }

.comparativa {
  display: flex;
  align-items: flex-end;
  gap: .3rem;
  height: 11rem;
  overflow-x: auto;
  padding: .2rem 0;
}

.comparativa .mes {
  flex: 1 1 2.4rem;
  min-width: 2.4rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
  border-radius: 4px;
  padding: 0 .1rem;
}

.comparativa .mes:hover,
.comparativa .mes:focus-visible { background: var(--hundido); outline: none; }

.comparativa .columnas {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}

.comparativa .col {
  width: 44%;
  max-width: 1.1rem;
  border-radius: 2px 2px 0 0;
  transition: filter .15s ease;
}

.comparativa .col.ingreso { background: var(--ok); }
.comparativa .col.egreso  { background: var(--acento); }
.comparativa .mes:hover .col { filter: brightness(1.15); }

.comparativa .etiqueta { font-size: .68rem; color: var(--tenue); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .comparativa .col, a.cifra-liga { transition: none; }
}

/* Fijo sobre la ventana, no dentro de la gráfica ni de la caja. Dentro de la
   gráfica lo recorta el desplazamiento horizontal —overflow-x recorta también
   hacia arriba— y dentro de la caja no cabía: encima de las barras sólo está el
   título, y el globo se salía por abajo de la pantalla. */
.globo {
  position: fixed;
  z-index: 5;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 6px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .35);
  padding: .65rem .8rem;
  min-width: 13rem;
  pointer-events: none;
  font-size: .82rem;
}

.globo-titulo { display: block; margin-bottom: .35rem; font-size: .85rem; text-transform: capitalize; }
.globo dl { grid-template-columns: 1fr max-content; gap: .15rem 1rem; font-size: .82rem; }
.globo dd { text-align: right; font-variant-numeric: tabular-nums; }
.globo dt:nth-of-type(3), .globo dd:nth-of-type(3) { border-top: 1px solid var(--borde); padding-top: .25rem; margin-top: .1rem; font-weight: 600; }
.globo-pie { display: block; margin-top: .45rem; font-size: .7rem; color: var(--tenue); }

/* --- Filtros activos como chips que se quitan --- */

.chips { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.chips-rotulo { font-size: .72rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .08em; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--hundido);
  border: 1px solid var(--borde);
  color: var(--texto);
  font-size: .8rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  text-decoration: none;
}

.chip span { color: var(--tenue); font-size: .95rem; line-height: 1; }
.chip:hover { border-color: var(--acento); }
.chip:hover span { color: var(--error); }

.paginacion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}


/* --- Panel de inicio: cifras en dos bloques --- */

.bloque-cifras { display: flex; flex-direction: column; gap: .6rem; }

.rotulo-bloque {
  margin: 0;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tenue);
  font-weight: 600;
}

/* --- Ranking cuyas filas abren sus movimientos --- */

.ranking-liga {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
  padding: .2rem .35rem;
  margin: -.2rem -.35rem;
}

.ranking-liga:hover { background: var(--hundido); }
.ranking-liga:hover .ranking-fila span:first-child { color: var(--acento); }
.ranking-liga:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

/* --- Ver u ocultar la contraseña --- */

.campo-clave { position: relative; display: block; }

.campo-clave input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.8rem;
}

/* El botón vive dentro del campo, a la derecha. Anula el estilo general de
   los botones del panel, que son rellenos y con color de marca. */
.boton-ver-clave {
  position: absolute;
  top: 50%;
  right: .35rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--tenue);
  cursor: pointer;
}

.boton-ver-clave:hover { color: var(--texto); background: var(--hundido); filter: none; }
.boton-ver-clave:focus-visible { outline: 2px solid var(--acento); outline-offset: 0; }
.boton-ver-clave[aria-pressed="true"] { color: var(--acento); }

/* --- Mantenimiento de secciones --- */

/* Franja bajo la barra, sólo para quien administra: mientras haya algo
   cerrado, se ve en todas las pantallas. Un aviso que sólo aparece dentro de
   la sección cerrada no sirve, porque para olvidarla basta con no entrar. */
.banda-mantenimiento {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: .55rem 1.5rem;
  background: var(--aviso-fondo);
  color: var(--aviso);
  font-size: .8rem;
  border-bottom: 1px solid var(--borde);
}

.banda-mantenimiento a { color: inherit; font-weight: 600; }

/* La sección cerrada se marca en el menú en lugar de desaparecer. */
.enlace-menu.en-mantenimiento { opacity: .55; text-decoration: line-through; }

.aviso-seccion {
  border-left: 3px solid var(--aviso);
  font-size: .85rem;
  color: var(--tenue);
}

.tarjeta-aviso { max-width: 34rem; }
.tarjeta-aviso h1 { font-size: 1.15rem; margin: 0 0 .75rem; }
.tarjeta-aviso p  { margin: 0 0 .8rem; }

.mensaje-mantenimiento {
  padding: .8rem 1rem;
  background: var(--hundido);
  border-radius: 6px;
  border-left: 3px solid var(--aviso);
}

.tenue { color: var(--tenue); font-size: .85rem; }