:root {
  --fondo: #f6f7f9;
  --superficie: #ffffff;
  --borde: #dde1e7;
  --texto: #1d232b;
  --tenue: #69727d;
  --acento: #b3261e;          /* rojo hinomaru */
  --acento-suave: #fbeceb;
  --enlace: #1f5fa8;
  --ok: #1e7b4a;   --ok-suave: #e5f4ec;
  --aviso: #9a6200; --aviso-suave: #fdf3dc;
  --malo: #b3261e; --malo-suave: #fbeceb;
  --info: #1f5fa8; --info-suave: #e6eef9;
  --gris-suave: #eceef1;
  --radio: 8px;
  /* Paleta categórica de las gráficas (orden fijo; validada para daltonismo en claro y oscuro) */
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100;
  --serie-bd: #eb6834;  /* Bitdefender (naranja) */
  --serie-ph: #2a78d6;  /* Pi-hole (azul) */
  color-scheme: light;
}
/* Modo oscuro: automático según el sistema, salvo que el usuario elija Claro u Oscuro (data-theme en <html>) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #14171b; --superficie: #1c2026; --borde: #2f353d; --texto: #e6e9ed; --tenue: #9aa3ad;
    --acento: #ef6a60; --acento-suave: #3a1f1d; --enlace: #7fb2ee;
    --ok: #6fd19b; --ok-suave: #173326; --aviso: #f0bf5c; --aviso-suave: #3a2e14;
    --malo: #ef6a60; --malo-suave: #3a1f1d; --info: #7fb2ee; --info-suave: #1a2a3f; --gris-suave: #262b32;
    --serie-bd: #d95926; --serie-ph: #3987e5;
    --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #14171b; --superficie: #1c2026; --borde: #2f353d; --texto: #e6e9ed; --tenue: #9aa3ad;
  --acento: #ef6a60; --acento-suave: #3a1f1d; --enlace: #7fb2ee;
  --ok: #6fd19b; --ok-suave: #173326; --aviso: #f0bf5c; --aviso-suave: #3a2e14;
  --malo: #ef6a60; --malo-suave: #3a1f1d; --info: #7fb2ee; --info-suave: #1a2a3f; --gris-suave: #262b32;
  --serie-bd: #d95926; --serie-ph: #3987e5;
  --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500;
  color-scheme: dark;
}
/* Logo: versión de texto oscuro en claro, la original (texto blanco) en oscuro */
.logo-osc { display: none; }
:root[data-theme="dark"] .logo-claro { display: none; }
:root[data-theme="dark"] .logo-osc { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-claro { display: none; }
  :root:not([data-theme="light"]) .logo-osc { display: inline; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Cantarell, Roboto, sans-serif;
}
a { color: var(--enlace); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
h2 { font-size: 1.1rem; margin: 1.6rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1.4rem 0 .5rem; }
code, .mono { font-family: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", monospace; font-size: .9em; }
code { background: var(--gris-suave); padding: 0 .25em; border-radius: 4px; }
.tenue { color: var(--tenue); font-weight: normal; font-size: .9em; }
.nowrap { white-space: nowrap; }
.vacio { color: var(--tenue); font-style: italic; }
.subtitulo { color: var(--tenue); margin: 0 0 1rem; font-size: 1.05rem; }

.barra {
  display: flex; align-items: center; gap: 1.5rem; padding: .6rem 1.5rem;
  background: var(--superficie); border-bottom: 3px solid var(--acento); position: sticky; top: 0; z-index: 5;
}
.marca { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--texto); font-size: 1.05rem; }
.marca:hover { text-decoration: none; }
.marca img { height: 40px; width: auto; }
.marca span { color: var(--tenue); font-weight: 600; padding-left: .6rem; border-left: 1px solid var(--borde); }
.barra nav { display: flex; gap: .25rem; flex: 1; }
.barra nav a { color: var(--texto); padding: .35rem .75rem; border-radius: var(--radio); }
.barra nav a:hover { background: var(--gris-suave); text-decoration: none; }
.barra nav a.activo { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
main { max-width: 1400px; margin: 0 auto; padding: 1.5rem; }

.boton {
  display: inline-block; padding: .45rem .9rem; border-radius: var(--radio); border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto); font: inherit; cursor: pointer; white-space: nowrap;
}
.boton:hover { background: var(--gris-suave); text-decoration: none; }
.boton-primario { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.boton-primario:hover { background: var(--acento); filter: brightness(1.08); }
.boton-peligro { background: var(--malo); border-color: var(--malo); color: #fff; }

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

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0; }
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1rem 1.2rem; display: flex; flex-direction: column; color: var(--texto);
}
a.tarjeta:hover { border-color: var(--acento); text-decoration: none; }
.tarjeta .cifra { font-size: 1.9rem; font-weight: 700; line-height: 1.2; }
.tarjeta small { color: var(--tenue); }
.tarjeta-alerta { border-color: var(--malo); background: var(--malo-suave); }
.tarjeta-alerta .cifra { color: var(--malo); }

.rejilla-2 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; }
.rejilla-ficha { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem; align-items: start; }
@media (max-width: 1000px) { .rejilla-2, .rejilla-ficha { grid-template-columns: 1fr; } }

.tabla { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.tabla th, .tabla td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla th { background: var(--gris-suave); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tenue); }
.tabla tbody tr:hover { background: var(--gris-suave); }
.tabla td.num { color: var(--tenue); font-variant-numeric: tabular-nums; }
.lista-simple { padding-left: 1.1rem; margin: 0; }
.lista-simple li { margin: .3rem 0; }

.filtros { display: flex; gap: .6rem; margin: 1rem 0; flex-wrap: wrap; align-items: center; }
.filtros input[type=search] { flex: 1; min-width: 260px; }
.check { display: flex; align-items: center; gap: .35rem; }

input, select, textarea {
  font: inherit; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 6px; padding: .45rem .6rem; width: 100%;
}
input[type=checkbox] { width: auto; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: transparent; }
textarea { resize: vertical; }
.filtros select { width: auto; }

.formulario { display: flex; flex-direction: column; gap: .8rem; }
.formulario label { display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; color: var(--tenue); }
.formulario label > input, .formulario label > select, .formulario label > textarea { color: var(--texto); font-size: .95rem; }
.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); padding: .8rem 1rem 1rem; display: flex; flex-direction: column; gap: .8rem; }
legend { font-weight: 600; padding: 0 .4rem; }
.form-equipo { max-width: 960px; }
.botones { display: flex; gap: .5rem; }
.error { background: var(--malo-suave); color: var(--malo); border: 1px solid var(--malo); padding: .6rem 1rem; border-radius: var(--radio); margin: 1rem 0; }

.ficha { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.2rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: 0; }
.kv dt { color: var(--tenue); font-size: .88rem; padding-top: .1rem; }
.kv dd { margin: 0; }
.tabla-kv { border-collapse: collapse; width: 100%; font-size: .9rem; }
.tabla-kv th { text-align: left; color: var(--tenue); font-weight: normal; padding: .25rem 1rem .25rem 0; vertical-align: top; width: 38%; }
.tabla-kv td { padding: .25rem 0; border-bottom: 1px dashed var(--borde); }
.notas { font-size: .93rem; }
.notas p { margin: .5rem 0; }
.wiki { color: var(--enlace); }
table.md { border-collapse: collapse; margin: .5rem 0; font-size: .88rem; width: 100%; }
table.md th, table.md td { border: 1px solid var(--borde); padding: .25rem .5rem; text-align: left; }
table.md th { background: var(--gris-suave); }

.callout { border-left: 4px solid var(--info); background: var(--info-suave); border-radius: 0 var(--radio) var(--radio) 0; padding: .6rem .9rem; margin: .8rem 0; }
.callout-titulo { font-weight: 600; margin-bottom: .2rem; }
.callout p { margin: .35rem 0; }
.callout-warning, .callout-caution { border-color: var(--aviso); background: var(--aviso-suave); }
.callout-danger, .callout-error, .callout-bug { border-color: var(--malo); background: var(--malo-suave); }
.callout-success, .callout-tip, .callout-check { border-color: var(--ok); background: var(--ok-suave); }

.insignia { display: inline-block; font-size: .75rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--gris-suave); color: var(--tenue); white-space: nowrap; vertical-align: middle; }
h1 .insignia { font-size: .8rem; }
.eq-activo, .est-resuelta { background: var(--ok-suave); color: var(--ok); }
.eq-disponible, .eq-pendiente-de-revision, .est-en-curso, .prio-media { background: var(--aviso-suave); color: var(--aviso); }
.eq-en-reparacion, .est-abierta, .prio-alta, .prio-critica, .tipo-incidencia { background: var(--malo-suave); color: var(--malo); }
.prio-critica { background: var(--malo); color: #fff; }
.lic-activa { background: var(--ok-suave); color: var(--ok); }
.lic-por-vencer { background: var(--aviso-suave); color: var(--aviso); }
.lic-vencida { background: var(--malo-suave); color: var(--malo); }
.lista-casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .35rem 1rem; }
.formulario .lista-casillas label.check { flex-direction: row; align-items: baseline; gap: .4rem; color: var(--texto); font-size: .9rem; }
.tipo-reparacion, .tipo-cambio-de-hardware { background: var(--aviso-suave); color: var(--aviso); }
.tipo-mantenimiento, .tipo-revision-de-seguridad { background: var(--ok-suave); color: var(--ok); }
.tipo-instalacion-de-software, .tipo-cambio-de-asignacion, .tipo-alta-en-inventario { background: var(--info-suave); color: var(--info); }

.nuevo-registro { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .7rem 1rem; }
.nuevo-registro summary { cursor: pointer; font-weight: 600; }
.nuevo-registro[open] summary { margin-bottom: .8rem; }
.linea-tiempo { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--borde); margin-left: .4rem; }
.evento { position: relative; padding: 0 0 1.2rem 1.2rem; }
.evento::before { content: ""; position: absolute; left: -7px; top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--tenue); }
.evento-incidencia::before { border-color: var(--malo); background: var(--malo); }
.evento-reparacion::before, .evento-cambio-de-hardware::before { border-color: var(--aviso); }
.evento-mantenimiento::before, .evento-revision-de-seguridad::before { border-color: var(--ok); }
.evento:target { background: var(--acento-suave); border-radius: var(--radio); }
.evento-cab { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.evento-cab .fecha { font-weight: 600; font-variant-numeric: tabular-nums; margin-right: .2rem; }
.evento-cab .editar { margin-left: auto; font-size: .82rem; }
.evento-titulo { margin: .2rem 0; font-weight: 500; }
.evento-desc { font-size: .92rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .1rem .8rem; margin: .3rem 0; }
.evento-desc p { margin: .45rem 0; }

.peligro { margin-top: 2.5rem; max-width: 960px; border: 1px solid var(--malo); border-radius: var(--radio); padding: .7rem 1rem; }
.peligro summary { color: var(--malo); cursor: pointer; }

/* ---------------------------------------------------------------- responsive */
.evento-desc, .notas, .tabla-kv td, .kv dd { overflow-wrap: anywhere; }
table.md { display: block; overflow-x: auto; }

@media (max-width: 1000px) {
  .barra { gap: .8rem; padding: .6rem 1rem; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  main { padding: 1rem 16px 2rem; }
  h1 { font-size: 1.35rem; }

  /* Barra: marca y botón arriba, menú deslizable debajo */
  .barra { flex-wrap: wrap; row-gap: .4rem; padding: .5rem 16px 0; }
  .marca { flex: 1; font-size: 1rem; }
  .barra nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px .45rem; }
  .barra nav::-webkit-scrollbar { display: none; }
  .barra nav a { white-space: nowrap; }
  .nuevo-equipo { padding: .35rem .75rem; }

  .titulo-fila { align-items: flex-start; }
  .acciones { flex-wrap: wrap; width: 100%; }
  .acciones .boton { flex: 1; text-align: center; }

  .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .tarjeta { padding: .75rem .9rem; }
  .tarjeta .cifra { font-size: 1.45rem; }

  .filtros input[type=search] { min-width: 0; flex-basis: 100%; }
  .filtros select { flex: 1; }
  input, select, textarea { font-size: 16px; } /* evita el zoom automático en iOS */

  /* Tablas → tarjetas */
  .tabla, .tabla tbody { display: block; border: 0; background: none; }
  .tabla thead { display: none; }
  .tabla tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: .7rem .9rem; margin-bottom: .6rem;
  }
  .tabla tbody tr:hover { background: var(--superficie); }
  .tabla td { display: block; padding: 0; border: 0; }
  .tabla td[data-etiqueta] { flex-basis: 100%; display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: .5rem; }
  .tabla td[data-etiqueta]::before {
    content: attr(data-etiqueta); color: var(--tenue); font-size: .8rem; font-family: system-ui, sans-serif;
    grid-row: 1 / span 2; padding-top: .15rem;
  }
  .tabla td[data-etiqueta] > .tenue { grid-column: 2; }
  .tabla td .tenue:empty { display: none; }
  .tabla td:empty { display: none; }

  /* Equipos: «#n Nombre [estado]» en la primera línea */
  .tabla-equipos .c-num { order: 0; }
  .tabla-equipos .c-num::before { content: "#"; }
  .tabla-equipos .c-equipo { order: 1; flex: 1; min-width: 0; }
  .tabla-equipos .c-estado { order: 2; }
  .tabla-equipos .c-asignado, .tabla-equipos .c-tipo, .tabla-equipos .c-cpu,
  .tabla-equipos .c-mac, .tabla-equipos .c-ultimo { order: 3; }

  /* Registros: fecha + insignias arriba, título, equipo */
  .tabla-registros .c-fecha { order: 0; font-weight: 600; }
  .tabla-registros .c-tipo { order: 1; }
  .tabla-registros .c-estado { order: 2; }
  .tabla-registros .c-titulo { order: 3; flex-basis: 100%; margin-top: .2rem; }
  .tabla-registros .c-equipo { order: 4; flex-basis: 100%; font-size: .9rem; }
  .tabla-registros .c-equipo .tenue { display: inline; margin-left: .3rem; }

  /* Ficha */
  .ficha { padding: .8rem .9rem; }
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dt { margin-top: .5rem; font-size: .8rem; }
  .tabla-kv, .tabla-kv tbody, .tabla-kv tr, .tabla-kv th, .tabla-kv td { display: block; width: auto; }
  .tabla-kv tr { padding: .35rem 0; border-bottom: 1px dashed var(--borde); }
  .tabla-kv th { padding: 0; font-size: .8rem; }
  .tabla-kv td { border: 0; padding: 0; }
  .linea-tiempo { margin-left: .3rem; }
  .evento { padding-left: 1rem; }
  .evento-desc { padding: .1rem .65rem; }

  fieldset { padding: .7rem .8rem .9rem; }
  .botones .boton { flex: 1; padding: .65rem; }
}

@media (max-width: 380px) {
  .tarjetas { grid-template-columns: 1fr; }
  .tabla td[data-etiqueta] { grid-template-columns: 5.5rem minmax(0, 1fr); }
}

/* Login y cierre de sesión */
.pagina-login {
  background: #1d232b url("/img/fondo-login.jpg") center / cover no-repeat fixed;
}
.pagina-login main { min-height: 100vh; display: grid; place-items: center; padding: 1rem; max-width: none;
  background: linear-gradient(90deg, rgba(10, 14, 18, 0) 35%, rgba(10, 14, 18, .35)); }
.login { width: min(100%, 24rem); background: color-mix(in srgb, var(--superficie) 90%, transparent);
  backdrop-filter: blur(6px); border: 1px solid var(--borde); border-radius: 12px; padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.login-logo { text-align: center; margin-bottom: .5rem; }
.login-logo img { width: 220px; height: auto; }
.login h1 { font-size: 1.1rem; margin: 0 0 1.1rem; justify-content: center; color: var(--tenue); font-weight: 600; }
@media (min-width: 900px) { .pagina-login main { justify-items: end; padding-right: 9vw; } }
.login .error { margin-bottom: 1rem; }
.barra .salir { display: flex; align-items: center; gap: .5rem; margin: 0; }

/* Pestaña Seguridad: barras por equipo (dos paneles, cada uno con su escala) y columnas por día */
.serie-bd { background: var(--serie-bd); }
.serie-ph { background: var(--serie-ph); }
.muestra { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.graf-paneles { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr 1fr; column-gap: 1.25rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem 1rem; }
.graf-titulo { font-weight: 600; font-size: .9rem; height: 1.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.graf-etiqueta, .graf-fila { height: 26px; display: flex; align-items: center; }
.graf-etiqueta { color: var(--texto); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; gap: .3rem; }
.graf-panel { min-width: 0; }
.graf-fila { gap: .4rem; border-radius: 4px; }
.graf-barra { flex-shrink: 0; }
.graf-fila:hover, .graf-col:hover { background: var(--gris-suave); }
.graf-barra { display: block; height: 14px; min-width: 0; border-radius: 0 4px 4px 0; }
.graf-valor { font-size: .8rem; color: var(--tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.graf-paneles-dia { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.graf-paneles-dia > div { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem 1rem; }
.graf-dias { position: relative; }
.graf-max { position: absolute; top: -1.6rem; right: 0; font-size: .78rem; }
.graf-cols { display: flex; align-items: flex-end; gap: 2px; height: 140px; border-bottom: 1px solid var(--borde); }
.graf-col { flex: 1; height: 100%; display: flex; align-items: flex-end; border-radius: 4px 4px 0 0; }
.graf-col > span { display: block; width: 100%; border-radius: 4px 4px 0 0; }
.graf-eje-x { display: flex; justify-content: space-between; font-size: .75rem; color: var(--tenue); margin-top: .25rem; }
.aviso-caja { background: var(--aviso-suave); border: 1px solid var(--borde); border-radius: var(--radio); padding: .6rem .9rem; margin: 1rem 0; }
.graf-tip { position: fixed; z-index: 20; pointer-events: none; background: var(--texto); color: var(--superficie);
  font-size: .82rem; padding: .3rem .55rem; border-radius: 6px; max-width: 22rem; }
@media (max-width: 760px) {
  .graf-paneles { grid-template-columns: 6.5rem 1fr 1fr; column-gap: .6rem; padding: .6rem; }
  .graf-paneles-dia { grid-template-columns: 1fr; }
  .graf-valor { font-size: .72rem; }
  .graf-titulo .tenue { display: none; }
}

/* Categorías de equipo */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .25rem; }
.chip { padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); font-size: .9rem; }
.chip span { color: var(--tenue); margin-left: .2rem; font-variant-numeric: tabular-nums; }
.chip:hover { background: var(--gris-suave); text-decoration: none; }
.chip.activo { background: var(--acento-suave); border-color: var(--acento); color: var(--acento); font-weight: 600; }
.chip.activo span { color: var(--acento); }
.cat-fila { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.cat-fila input[name=nombre] { flex: 1; min-width: 12rem; }
.cat-orden { width: 5.5rem; }

/* Panel: gráficas con Chart.js */
.graficas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0 .5rem; }
.graf-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .9rem 1rem .6rem; min-width: 0; }
.graf-tarjeta h2 { margin: 0 0 .6rem; font-size: 1rem; }
.graf-ancha { grid-column: 1 / -1; }
.graf-lienzo { position: relative; height: 240px; }
.graf-baja { height: 95px; }
.graf-sub { margin: .3rem 0 .1rem; font-size: .88rem; color: var(--tenue); }
.graf-sub strong { color: var(--texto); }
.graf-datos { margin-top: .4rem; font-size: .85rem; }
.graf-datos summary { cursor: pointer; color: var(--enlace); }
.tabla-mini { margin-top: .4rem; font-size: .85rem; }
.tabla-mini th, .tabla-mini td { padding: .25rem .5rem; }
@media (max-width: 760px) {
  .graficas { grid-template-columns: 1fr; }
  .graf-lienzo { height: 200px; }
  .graf-baja { height: 85px; }
}

/* Selector de tema en la barra */
.tema { display: inline-flex; flex-shrink: 0; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.tema button { font: inherit; font-size: .82rem; padding: .3rem .55rem; border: 0; background: var(--superficie); color: var(--tenue); cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; }
.tema button + button { border-left: 1px solid var(--borde); }
.tema button:hover { background: var(--gris-suave); color: var(--texto); }
.tema button[aria-pressed="true"] { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
.tema svg { width: 14px; height: 14px; }
.pagina-login .tema { position: fixed; top: 1rem; right: 1rem; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
@media (max-width: 1250px) { .barra .tema button span { display: none; } .barra .tema button { padding: .35rem .5rem; } }