/* TERAISP — temas de color (data-color) × modo claro/oscuro (data-tema) en <html>.
   Cada tema define solo sus colores de acento; fondos, bordes y brillos se derivan con color-mix. */

@font-face { font-family: 'Barlow SC'; font-weight: 400; font-display: swap; src: url(/fuentes/barlow-semi-condensed-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow SC'; font-weight: 500; font-display: swap; src: url(/fuentes/barlow-semi-condensed-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow SC'; font-weight: 600; font-display: swap; src: url(/fuentes/barlow-semi-condensed-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow SC'; font-weight: 700; font-display: swap; src: url(/fuentes/barlow-semi-condensed-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow SC'; font-weight: 800; font-style: italic; font-display: swap; src: url(/fuentes/barlow-semi-condensed-latin-800-italic.woff2) format('woff2'); }

/* ---------- Temas de color: acento brillante, degradado, texto sobre acento y acento legible en modo claro ---------- */
:root, :root[data-color='dorado'] {
  --acento-base: #ffc21a; --acento-1: #ffd23a; --acento-2: #e39a00; --sobre-acento: #1a1204; --acento-oscuro: #a87300;
}
:root[data-color='azul'] {
  --acento-base: #38b6ff; --acento-1: #6fcbff; --acento-2: #1479d6; --sobre-acento: #021220; --acento-oscuro: #0a64b0;
}
:root[data-color='esmeralda'] {
  --acento-base: #2dd48c; --acento-1: #5ce6aa; --acento-2: #13985f; --sobre-acento: #03160d; --acento-oscuro: #0d7446;
}
:root[data-color='carmesi'] {
  --acento-base: #ff4d5e; --acento-1: #ff7a86; --acento-2: #c81e33; --sobre-acento: #ffffff; --acento-oscuro: #b3192c;
}
:root[data-color='violeta'] {
  --acento-base: #a97cff; --acento-1: #c4a3ff; --acento-2: #7444d8; --sobre-acento: #ffffff; --acento-oscuro: #6634c4;
}
:root[data-color='plata'] {
  --acento-base: #c9d1dd; --acento-1: #e6eaf0; --acento-2: #8d98a8; --sobre-acento: #0c0f14; --acento-oscuro: #4b5666;
}

/* ---------- Modo oscuro (predeterminado) ---------- */
:root {
  --acento: var(--acento-base);
  --fondo: color-mix(in srgb, var(--acento-base) 2%, #040404);
  --panel-1: color-mix(in srgb, var(--acento-base) 7%, #0e0e0e);
  --panel-2: color-mix(in srgb, var(--acento-base) 3%, #080808);
  --campo: color-mix(in srgb, var(--acento-base) 3%, #090909);
  --sidebar-1: color-mix(in srgb, var(--acento-base) 5%, #0a0a0a);
  --sidebar-2: color-mix(in srgb, var(--acento-base) 2%, #050505);
  --encabezado-1: color-mix(in srgb, var(--panel-2) 97%, transparent);
  --encabezado-2: color-mix(in srgb, var(--fondo) 94%, transparent);
  --flotante: color-mix(in srgb, var(--acento-base) 6%, #0c0c0c);
  --medallon-1: color-mix(in srgb, var(--acento-base) 22%, #0a0a0a);
  --medallon-2: color-mix(in srgb, var(--acento-base) 7%, #060606);
  --barra-fondo: color-mix(in srgb, var(--acento-base) 10%, #222222);
  --scroll: color-mix(in srgb, var(--acento-base) 25%, #1a1a1a);
  --borde: color-mix(in srgb, var(--acento-base) 55%, transparent);
  --borde-suave: color-mix(in srgb, var(--acento-base) 22%, transparent);
  --hover: color-mix(in srgb, var(--acento-base) 8%, transparent);
  --brillo-acento: color-mix(in srgb, var(--acento-base) 30%, transparent);
  --brillo: 0 0 14px color-mix(in srgb, var(--acento-base) 24%, transparent), inset 0 0 22px color-mix(in srgb, var(--acento-base) 5%, transparent);
  --linea: rgba(255, 255, 255, 0.07);
  --sobre: rgba(0, 0, 0, 0.4);
  --sobre-2: rgba(255, 255, 255, 0.05);
  --sombra: rgba(0, 0, 0, 0.6);
  --texto: #f5f3ee;
  --texto-2: #b9b4aa;
  --texto-3: #827d72;
  /* Colores con significado propio: iguales en todos los temas */
  --verde: #33d14c;
  --rojo: #ec3a2c;
  --azul: #4aa3ff;
  --ambar: #ffc21a;
  --txt-verde: #c9f7d0;
  --txt-rojo: #ffd0cb;
  --txt-ambar: #ffe9a8;
  --txt-azul: #d4e8ff;
  /* Gráficos SVG */
  --svg-texto: #ffffff;
  --eje: rgba(255, 255, 255, 0.35);
  --rejilla: rgba(255, 255, 255, 0.09);
  --dona-pista: color-mix(in srgb, var(--acento-base) 8%, #1c1c1c);
  --antena: #e2e0da;
  --ondas: 0.85;
  --radio: 12px;
  --sidebar: 290px;
  color-scheme: dark;
}

/* ---------- Modo claro ---------- */
:root[data-tema='claro'] {
  --acento: var(--acento-oscuro);
  --fondo: color-mix(in srgb, var(--acento-base) 6%, #f5f5f2);
  --panel-1: #ffffff;
  --panel-2: color-mix(in srgb, var(--acento-base) 2%, #fdfdfb);
  --campo: #ffffff;
  --sidebar-1: color-mix(in srgb, var(--acento-base) 3%, #ffffff);
  --sidebar-2: color-mix(in srgb, var(--acento-base) 8%, #f6f6f3);
  --flotante: #ffffff;
  --medallon-1: color-mix(in srgb, var(--acento-base) 14%, #ffffff);
  --medallon-2: color-mix(in srgb, var(--acento-base) 42%, #ffffff);
  --barra-fondo: color-mix(in srgb, var(--acento-base) 12%, #e8e8e5);
  --scroll: color-mix(in srgb, var(--acento-base) 30%, #d4d4d0);
  --borde: color-mix(in srgb, var(--acento-oscuro) 42%, transparent);
  --borde-suave: color-mix(in srgb, var(--acento-oscuro) 20%, transparent);
  --hover: color-mix(in srgb, var(--acento-oscuro) 8%, transparent);
  --brillo-acento: color-mix(in srgb, var(--acento-base) 28%, transparent);
  --brillo: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 18px color-mix(in srgb, var(--acento-oscuro) 12%, transparent);
  --linea: rgba(0, 0, 0, 0.08);
  --sobre: rgba(255, 255, 255, 0.85);
  --sobre-2: rgba(0, 0, 0, 0.035);
  --sombra: rgba(0, 0, 0, 0.16);
  --texto: #1c1b18;
  --texto-2: #5c5850;
  --texto-3: #8a857a;
  --verde: #1f9d36;
  --rojo: #d42c1f;
  --azul: #1f6fd1;
  --ambar: #c48a00;
  --txt-verde: #146b25;
  --txt-rojo: #9e2218;
  --txt-ambar: #6e4c00;
  --txt-azul: #17508f;
  --svg-texto: #1c1b18;
  --eje: rgba(0, 0, 0, 0.3);
  --rejilla: rgba(0, 0, 0, 0.08);
  --dona-pista: color-mix(in srgb, var(--acento-base) 10%, #e6e6e2);
  --antena: #8a857a;
  --ondas: 0.45;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.35 'Barlow SC', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.1; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 6px; border: 2px solid var(--fondo); }
::-webkit-scrollbar-track { background: transparent; }

.oro { color: var(--acento); }
.verde { color: var(--verde); }
.rojo { color: var(--rojo); }
.tenue { color: var(--texto-2); }
.muy-tenue { color: var(--texto-3); }
.pequeno { font-size: 14px; }
.derecha { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-family: Consolas, 'Cascadia Mono', monospace; font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Colores de SVG que dependen del tema */
.logo-texto, .svg-texto { fill: var(--svg-texto); }
.dona-pista { stroke: var(--dona-pista); }
.antena { fill: var(--antena); }
.relleno-acento { fill: var(--acento-1); }

/* ---------- Estructura ---------- */

.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }

.ondas { position: fixed; left: 0; bottom: 0; width: 100%; height: 170px; pointer-events: none; z-index: 0; opacity: var(--ondas); }

.sidebar {
  position: sticky; top: 0; height: 100vh; z-index: 30;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--sidebar-1), var(--sidebar-2));
  border-right: 1px solid var(--borde);
  box-shadow: 4px 0 18px color-mix(in srgb, var(--acento-base) 12%, transparent);
  overflow-y: auto;
}
.sidebar .logo { display: block; padding: 14px 12px 6px; }
.sidebar .logo svg { width: 100%; height: auto; }

.menu { list-style: none; margin: 0; padding: 4px 8px 24px; }
.menu > li + li { border-top: 1px solid var(--linea); }
.menu-item {
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: 10px 12px; border: 0; border-radius: 10px; background: none;
  font-size: 19px; font-weight: 500; text-align: left; color: var(--texto);
}
.menu-item:hover { background: var(--hover); text-decoration: none; }
.menu-item > svg:first-child { color: var(--acento); flex: none; filter: drop-shadow(0 0 4px var(--brillo-acento)); }
.menu-item .chevron { margin-left: auto; color: var(--texto-2); transition: transform 0.15s; }
.menu-item[aria-expanded='true'] .chevron { transform: rotate(180deg); }
.menu-item.activo {
  background: linear-gradient(90deg, var(--acento-1), var(--acento-2)); color: var(--sobre-acento); font-weight: 700;
  box-shadow: 0 0 16px var(--brillo-acento);
}
.menu-item.activo > svg:first-child { color: var(--sobre-acento); filter: none; }
.pronto { margin-left: auto; padding: 0 7px; border: 1px solid var(--borde-suave); border-radius: 999px; font-size: 12px; color: var(--texto-3); font-weight: 500; }

.submenu { list-style: none; margin: 2px 0 8px; padding: 0 0 0 14px; }
.submenu[hidden] { display: none; }
.submenu li + li { border-top: 1px solid var(--linea); }
.submenu a { display: flex; align-items: center; gap: 12px; padding: 5px 8px; border-radius: 8px; color: var(--texto-2); font-size: 16px; line-height: 1.15; }
.submenu a:hover { color: var(--texto); background: var(--hover); text-decoration: none; }
.submenu a.activo { color: var(--acento); font-weight: 600; background: var(--hover); }
.subicono {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px;
  background: color-mix(in srgb, var(--acento-base) 12%, var(--campo)); border: 1px solid var(--borde-suave); color: var(--acento);
}
.submenu a.activo .subicono { background: linear-gradient(180deg, var(--acento-1), var(--acento-2)); color: var(--sobre-acento); border-color: transparent; }
.subetiqueta { flex: 1; min-width: 0; }
.etiqueta-nuevo { flex: none; padding: 0 8px; border-radius: 999px; background: var(--verde); color: #04150a; font-size: 12px; font-weight: 700; }
.submenu .pronto { flex: none; }

.principal { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; }
.contenido { flex: 1; padding: 0 20px 120px 16px; position: relative; z-index: 1; }

/* ---------- Encabezado ---------- */

.encabezado {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 22px;
  padding: 12px 24px 12px 26px;
  background: linear-gradient(180deg, var(--encabezado-1), var(--encabezado-2));
  border-bottom: 1px solid var(--borde-suave);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--acento-base) 18%, transparent);
  margin-bottom: 14px;
}
.encabezado .titulo { display: flex; align-items: center; gap: 16px; min-width: 0; }
.encabezado .titulo > svg { color: var(--acento); flex: none; filter: drop-shadow(0 0 6px var(--brillo-acento)); }
.encabezado h1 { margin: 0; font-size: 30px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.encabezado p { margin: 2px 0 0; color: var(--texto-2); font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.buscador {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; border: 1px solid var(--borde); border-radius: 999px;
  background: var(--sobre); box-shadow: 0 0 10px color-mix(in srgb, var(--acento-base) 12%, transparent);
}
.encabezado .buscador { margin-left: auto; width: min(400px, 30vw); }
.buscador svg { color: var(--texto-2); flex: none; }
.buscador input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 17px; }
.buscador input::placeholder { color: var(--texto-3); }

.campana { position: relative; color: var(--acento); padding: 6px; }
.campana .insignia {
  position: absolute; top: -2px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--rojo); color: #fff; font-size: 13px; font-weight: 700;
  display: grid; place-items: center;
}

/* Interruptor de tema: apagado = oscuro (perilla a la izquierda, luna); encendido = claro (perilla a la derecha, sol). */
.interruptor-tema { flex: none; padding: 0; border: 0; background: none; border-radius: 999px; }
.interruptor-tema .pista {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 64px; height: 32px; padding: 0 9px; border-radius: 999px;
  background: var(--barra-fondo); border: 1px solid var(--borde); color: var(--texto-3);
  transition: background 0.2s, border-color 0.2s;
}
.interruptor-tema:hover .pista { border-color: var(--acento); }
.interruptor-tema .perilla {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; color: var(--sobre-acento);
  background: linear-gradient(180deg, var(--acento-1), var(--acento-2)); box-shadow: 0 0 8px var(--brillo-acento);
  transition: transform 0.2s ease;
}
.interruptor-tema .perilla svg { grid-area: 1 / 1; }
.interruptor-tema .perilla-sol { display: none; }
/* La posición sale del tema de <html> (fijado antes de pintar), no de aria-checked: así no salta al cargar. */
:root[data-tema='claro'] .interruptor-tema .perilla { transform: translateX(32px); }
:root[data-tema='claro'] .interruptor-tema .perilla-sol { display: block; }
:root[data-tema='claro'] .interruptor-tema .perilla-luna { display: none; }
.tema-flotante { position: fixed; top: 16px; right: 16px; z-index: 5; }

.separador-v { width: 2px; height: 36px; background: var(--acento); opacity: 0.8; flex: none; }

.usuario { position: relative; }
.usuario > button { display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; text-align: left; }
.avatar {
  width: 48px; height: 48px; flex: none; border-radius: 50%; border: 2px solid var(--acento);
  display: grid; place-items: center; color: var(--acento);
  background: radial-gradient(circle, var(--medallon-1), var(--campo)); box-shadow: 0 0 10px var(--brillo-acento);
}
.usuario strong { display: block; font-size: 20px; line-height: 1.1; white-space: nowrap; }
.usuario small { color: var(--texto-2); font-size: 15px; }
.usuario .chevron { color: var(--acento); }

.desplegable {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 250px; padding: 6px; z-index: 40;
  background: var(--panel-1); border: 1px solid var(--borde); border-radius: 10px;
  box-shadow: var(--brillo), 0 12px 30px var(--sombra);
}
.desplegable[hidden] { display: none; }
.desplegable a, .desplegable form > button {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: none; border: 0; border-radius: 6px; color: var(--texto); text-align: left;
}
.desplegable a:hover, .desplegable form > button:hover { background: var(--hover); text-decoration: none; }
.desplegable hr { border: 0; border-top: 1px solid var(--linea); margin: 6px 4px; }

/* Apariencia (dentro del menú del usuario) */
.apariencia { padding: 6px 10px 10px; }
.apariencia-titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); }
.apariencia-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.paleta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.muestra {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px;
  border: 1px solid transparent; border-radius: 8px; background: none; color: var(--texto-2); font-size: 13px;
}
.muestra:hover { background: var(--hover); color: var(--texto); }
.muestra .circulo {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--m1), var(--m2));
  box-shadow: 0 0 0 2px var(--panel-1), 0 0 0 3px transparent;
}
.muestra[aria-checked='true'] { border-color: var(--borde); color: var(--texto); font-weight: 600; }
.muestra[aria-checked='true'] .circulo { box-shadow: 0 0 0 2px var(--panel-1), 0 0 0 4px var(--m1); }

.boton-menu { display: none; background: none; border: 0; color: var(--acento); padding: 4px; }
.icono-solo { background: none; border: 0; }

/* ---------- Avisos superiores ---------- */

.banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 20px 14px 16px; padding: 10px 16px; border-radius: 10px; font-size: 16px;
  position: relative; z-index: 2;
}
.banner svg { flex: none; }
.banner .boton, .banner .boton-contorno, .banner form { margin-left: auto; }
.banner.alerta { background: rgba(236, 58, 44, 0.12); border: 1px solid var(--rojo); color: var(--txt-rojo); }
.banner.alerta svg { color: var(--rojo); }
.banner.aviso { background: rgba(255, 194, 26, 0.1); border: 1px solid var(--ambar); color: var(--txt-ambar); }
.banner.aviso svg { color: var(--ambar); }
.banner.exito { background: rgba(51, 209, 76, 0.1); border: 1px solid var(--verde); color: var(--txt-verde); }
.banner.exito svg { color: var(--verde); }
.banner.info { background: rgba(74, 163, 255, 0.1); border: 1px solid var(--azul); color: var(--txt-azul); }
.banner.info svg { color: var(--azul); }

/* ---------- Paneles y botones ---------- */

.panel {
  position: relative; min-width: 0;
  background: linear-gradient(180deg, var(--panel-1), var(--panel-2));
  border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--brillo);
  padding: 14px 18px;
}
.panel + .panel { margin-top: 16px; }
.panel-cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.panel-cabecera > svg { color: var(--acento); flex: none; }
.panel-cabecera h2 { margin: 0; font-size: 23px; font-weight: 600; }
.panel-cabecera p { margin: 0; color: var(--texto-2); font-size: 16px; }
.panel-cabecera .acciones { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 18px; border: 0; border-radius: 8px;
  background: linear-gradient(180deg, var(--acento-1), var(--acento-2)); color: var(--sobre-acento);
  font-weight: 700; font-size: 16px; white-space: nowrap;
  box-shadow: 0 0 12px var(--brillo-acento);
}
.boton:hover { filter: brightness(1.08); text-decoration: none; }
.boton:disabled, .boton[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; filter: none; }
.boton.secundario { background: var(--sobre-2); color: var(--texto); box-shadow: none; border: 1px solid var(--borde-suave); }
.boton.secundario:hover { border-color: var(--acento); }
.boton.secundario.rojo { color: var(--rojo); }
.boton.secundario.rojo:hover { border-color: var(--rojo); }
.boton.peligro { background: linear-gradient(180deg, #ff5a4a, #c6261a); color: #fff; box-shadow: 0 0 12px rgba(236, 58, 44, 0.3); }
.boton.exito { background: linear-gradient(180deg, #4be162, #22a83a); color: #04150a; box-shadow: 0 0 12px rgba(51, 209, 76, 0.3); }
.boton.chico { padding: 5px 12px; font-size: 15px; }
.boton-contorno {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 14px; border: 1px solid var(--acento); border-radius: 999px;
  background: var(--sobre); color: var(--texto); font-size: 15px; white-space: nowrap;
}
.boton-contorno:hover { background: var(--hover); text-decoration: none; }

.icono-boton {
  display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 8px; border: 1px solid var(--borde-suave); background: var(--sobre); color: var(--acento);
}
.icono-boton:hover { border-color: var(--acento); background: var(--hover); text-decoration: none; }
.icono-boton.rojo { color: var(--rojo); }
.icono-boton.verde { color: var(--verde); }

.selector { padding: 6px 12px; border: 1px solid var(--borde-suave); border-radius: 8px; background: var(--campo); font-size: 16px; }
.selector:focus { border-color: var(--acento); outline: none; }

/* ---------- Insignias de estado ---------- */

.estado {
  display: inline-block; min-width: 78px; padding: 1px 12px; border-radius: 999px;
  text-align: center; font-size: 14.5px; text-transform: capitalize; white-space: nowrap;
}
.estado-activo, .estado-activa, .estado-pagada, .estado-en-linea, .estado-completado, .estado-automático {
  background: rgba(51, 209, 76, 0.14); border: 1px solid var(--verde); color: var(--txt-verde);
}
.estado-suspendido, .estado-suspendida, .estado-vencida, .estado-fuera-de-linea, .estado-mora {
  background: rgba(236, 58, 44, 0.14); border: 1px solid var(--rojo); color: var(--txt-rojo);
}
.estado-pendiente, .estado-manual, .estado-por-vencer {
  background: rgba(255, 194, 26, 0.14); border: 1px solid var(--ambar); color: var(--txt-ambar);
}
.estado-inactivo, .estado-retirado, .estado-anulada {
  background: var(--sobre-2); border: 1px solid var(--texto-3); color: var(--texto-2);
}
.estado-admin, .estado-cajero, .estado-tecnico, .estado-superadmin { background: rgba(74, 163, 255, 0.12); border: 1px solid var(--azul); color: var(--txt-azul); }

.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.punto.verde { background: var(--verde); box-shadow: 0 0 6px var(--verde); }
.punto.rojo { background: var(--rojo); box-shadow: 0 0 6px var(--rojo); }
.punto.gris { background: var(--texto-3); }

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

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.kpis.seis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi { display: flex; align-items: center; gap: 16px; padding: 14px 18px; }
.kpi + .kpi { margin-top: 0; }
.medallon {
  width: 70px; height: 70px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, var(--medallon-1), var(--medallon-2) 70%);
  border: 1px solid var(--borde-suave); color: var(--acento);
  box-shadow: inset 0 0 12px var(--brillo-acento);
}
.medallon.alerta { background: radial-gradient(circle at 50% 40%, rgba(236, 58, 44, 0.3), rgba(236, 58, 44, 0.08) 70%); border-color: rgba(236, 58, 44, 0.5); color: var(--rojo); box-shadow: none; }
.kpi .datos { flex: 1; min-width: 0; }
.kpi .etiqueta { font-size: 19px; }
.kpi .fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.kpi .valor { font-size: 32px; font-weight: 700; white-space: nowrap; }
.kpi .variacion { font-size: 16px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.kpi .variacion svg { fill: currentColor; }
.kpi .variacion.baja svg { transform: rotate(180deg); }
.kpis.seis .medallon { width: 54px; height: 54px; }
.kpis.seis .valor { font-size: 26px; }
.kpis.seis .etiqueta { font-size: 16px; }

.fila-media { display: grid; grid-template-columns: 1.65fr 1.25fr 0.95fr; gap: 16px; margin-bottom: 16px; }
.columna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.columna > .panel + .panel { margin-top: 0; }
.fila-inferior { display: grid; grid-template-columns: 1.65fr 1.75fr 0.45fr; gap: 16px; }
.fila-inferior > .panel + .panel { margin-top: 0; }

.grafico { position: relative; }
.grafico svg { display: block; width: 100%; overflow: visible; }
.grafico .eje { fill: var(--texto-2); font-size: 13px; font-family: inherit; }
.grafico .rejilla { stroke: var(--rejilla); }
.grafico .eje-linea { stroke: var(--eje); }
.tooltip {
  position: absolute; pointer-events: none; transform: translate(-50%, -115%);
  padding: 6px 10px; background: var(--flotante); border: 1px solid var(--acento); border-radius: 8px;
  font-size: 14px; white-space: nowrap; box-shadow: 0 0 10px var(--brillo-acento);
}
.tooltip[hidden] { display: none; }

.velocidades {
  display: grid; grid-template-columns: 1fr 2px 1fr; align-items: center;
  margin-top: 12px; padding: 8px 20px; border: 1px solid var(--borde); border-radius: 10px; background: var(--sobre);
}
.velocidades .sep { height: 44px; background: var(--acento); opacity: 0.7; }
.velocidades > div:not(.sep) { display: flex; gap: 10px; justify-content: center; align-items: center; }
.velocidades small { display: block; font-size: 16px; color: var(--texto-2); }
.velocidades strong { font-size: 26px; }

.estado-clientes { display: flex; align-items: center; gap: 24px; }
.estado-clientes svg { flex: none; }
.leyenda { flex: 1; display: grid; gap: 12px; }
.leyenda > div { display: grid; grid-template-columns: 14px 1fr auto 58px; gap: 10px; align-items: center; font-size: 17px; }
.leyenda .punto { width: 14px; height: 14px; }
.leyenda span:last-child { text-align: right; }

.servicios { display: grid; gap: 9px; }
.servicio { display: grid; grid-template-columns: 24px 1.2fr 1fr 58px; gap: 10px; align-items: center; font-size: 16px; }
.servicio svg { color: var(--acento); }
.servicio span:last-child { text-align: right; }
.barra { height: 11px; background: var(--barra-fondo); border-radius: 3px; overflow: hidden; }
.barra > div { height: 100%; background: linear-gradient(90deg, var(--acento-1), var(--acento-base)); box-shadow: 0 0 8px var(--brillo-acento); }
.barra.roja > div { background: linear-gradient(90deg, #ff6a5a, #ec3a2c); box-shadow: 0 0 8px rgba(236, 58, 44, 0.6); }

.accesos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acceso {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 90px; padding: 10px 6px; border: 1px solid var(--borde); border-radius: 10px;
  background: linear-gradient(180deg, var(--panel-1), var(--campo)); color: var(--texto);
  font-size: 17px; font-weight: 500; line-height: 1.05; text-align: center;
}
.acceso svg { color: var(--acento); filter: drop-shadow(0 0 5px var(--brillo-acento)); }
.acceso:hover { border-color: var(--acento); box-shadow: 0 0 14px var(--brillo-acento); text-decoration: none; }

.actividades { list-style: none; margin: 0; padding: 0; }
.actividades li { display: grid; grid-template-columns: 32px 1fr auto; gap: 14px; align-items: center; padding: 6px 4px; font-size: 17px; }
.actividades li + li { border-top: 1px solid var(--linea); }
.actividades .tenue { font-size: 15px; white-space: nowrap; }
.icono-actividad { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.icono-actividad.verde { background: var(--verde); color: #04150a; }
.icono-actividad.oro { background: var(--acento-base); color: var(--sobre-acento); }
.icono-actividad.rojo { background: var(--rojo); color: #fff; }
.icono-actividad.azul { background: var(--azul); color: #fff; }

.torre { align-self: end; justify-self: center; width: 100%; max-width: 130px; }

/* ---------- Tablas ---------- */

.tabla-contenedor { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 16px; }
.tabla th { text-align: left; font-weight: 600; font-size: 16px; padding: 7px 10px; background: var(--sobre-2); white-space: nowrap; }
.tabla td { padding: 7px 10px; border-top: 1px solid var(--linea); vertical-align: middle; }
.tabla tbody tr:hover td { background: var(--hover); }
.tabla .numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .sub { display: block; color: var(--texto-2); font-size: 14px; }
.tabla a.fila-enlace { color: var(--texto); font-weight: 600; }
.celda-cliente { display: flex; align-items: center; gap: 10px; }
.celda-cliente svg { color: var(--acento); flex: none; }
.acciones-fila { display: flex; gap: 6px; justify-content: flex-end; }
.vacio { padding: 26px; text-align: center; color: var(--texto-3); }

.barra-herramientas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.barra-herramientas .buscador { width: 320px; }
.espaciador { flex: 1; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 5px 14px; border: 1px solid var(--borde-suave); border-radius: 999px; background: var(--sobre); color: var(--texto-2); white-space: nowrap; }
.chip:hover { color: var(--texto); text-decoration: none; }
.chip.activo { border-color: var(--acento); color: var(--acento); background: var(--hover); }
.chip b { font-weight: 600; margin-left: 4px; color: var(--texto); }

.paginacion { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; color: var(--texto-2); }
.paginacion a, .paginacion span.des {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--borde-suave); border-radius: 6px; color: var(--texto);
}
.paginacion span.des { opacity: 0.35; }

/* ---------- Pestañas, fichas de detalle y uso ---------- */

.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde-suave); margin-bottom: 14px; overflow-x: auto; }
.pestana { padding: 8px 16px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--texto-2); font-size: 17px; white-space: nowrap; }
.pestana:hover { color: var(--texto); text-decoration: none; }
a.pestana { display: inline-flex; align-items: center; gap: 8px; }
.contador { padding: 0 7px; border-radius: 999px; background: var(--hover); color: var(--texto-2); font-size: 13px; font-weight: 600; }
dialog.modal.modal-ancho { width: min(760px, calc(100vw - 32px)); }
.avanzado { border: 1px solid var(--borde-suave); border-radius: 10px; padding: 10px 14px; }
.avanzado summary { cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--texto-2); font-size: 15px; list-style: none; }
.avanzado summary::-webkit-details-marker { display: none; }
.avanzado[open] summary { color: var(--acento); margin-bottom: 4px; }
.pestana[aria-selected='true'] { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }
[role='tabpanel'][hidden] { display: none; }

.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rejilla-lateral { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.rejilla-2 > .panel + .panel, .rejilla-3 > .panel + .panel, .rejilla-lateral > * + .panel { margin-top: 0; }
.apilar > .panel + .panel { margin-top: 16px; }

.ficha { display: grid; grid-template-columns: 170px 1fr; gap: 8px 14px; margin: 0; font-size: 16px; }
.ficha dt { color: var(--texto-2); }
.ficha dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.uso { display: grid; gap: 6px; margin-bottom: 14px; }
.uso .fila { display: flex; justify-content: space-between; font-size: 16px; }

.medidor { display: grid; gap: 4px; }
.medidor .barra { height: 9px; }

.resumen-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cifra { padding: 10px 14px; border: 1px solid var(--borde-suave); border-radius: 10px; background: var(--sobre); }
.cifra small { display: block; color: var(--texto-2); font-size: 15px; }
.cifra strong { font-size: 24px; }

/* Los bloques de código (scripts RouterOS) son oscuros en todos los temas, como una terminal. */
.codigo {
  position: relative; margin: 0; padding: 14px 16px; max-height: 420px; overflow: auto;
  background: #030302; border: 1px solid var(--borde-suave); border-radius: 10px;
  font: 13.5px/1.55 Consolas, 'Cascadia Mono', monospace; color: #e8e2d0; white-space: pre;
}
.codigo .comentario { color: #8a8271; }
.copiar { position: absolute; top: 10px; right: 10px; }

/* ---------- Formularios ---------- */

.formulario { display: grid; gap: 14px; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.campos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campos .ancho { grid-column: 1 / -1; }
.campo { display: grid; gap: 5px; align-content: start; }
.campo > span { font-size: 15px; color: var(--texto-2); }
.campo > small { color: var(--texto-3); font-size: 14px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--borde-suave); border-radius: 8px;
  background: var(--campo); font-size: 17px; outline: none;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento-base) 18%, transparent);
}
.campo textarea { resize: vertical; min-height: 90px; }
.campo .con-boton { display: flex; gap: 8px; }
.campo .con-boton input { flex: 1; }
fieldset { margin: 0; padding: 14px 16px 16px; border: 1px solid var(--borde-suave); border-radius: 10px; min-width: 0; }
legend { padding: 0 8px; color: var(--acento); font-weight: 600; font-size: 17px; }
.pie-formulario { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.nota { padding: 10px 14px; border: 1px solid var(--borde-suave); border-radius: 8px; background: color-mix(in srgb, var(--acento-base) 5%, transparent); color: var(--texto-2); font-size: 15px; }
.nota strong { color: var(--texto); }
.nota.alerta { border-color: rgba(236, 58, 44, 0.6); background: rgba(236, 58, 44, 0.08); color: var(--txt-rojo); }

.resultado-prueba:empty { display: none; }
.resultado-prueba { margin-top: 12px; padding: 10px 14px; border: 1px solid var(--borde-suave); border-radius: 8px; font-size: 15px; color: var(--texto-2); }
.resultado-prueba.ok { border-color: var(--verde); background: rgba(51, 209, 76, 0.08); color: var(--txt-verde); }
.resultado-prueba.error { border-color: var(--rojo); background: rgba(236, 58, 44, 0.08); color: var(--txt-rojo); }
.resultado-prueba .ficha { font-size: 14px; color: var(--texto); }

.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
.interruptor + .interruptor { border-top: 1px solid var(--linea); }
.interruptor span small { display: block; color: var(--texto-3); font-size: 14px; }
.interruptor input {
  appearance: none; flex: none; width: 46px; height: 26px; border-radius: 999px; position: relative; cursor: pointer;
  background: var(--barra-fondo); border: 1px solid var(--borde-suave); transition: background 0.15s;
}
.interruptor input::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--texto-2); transition: transform 0.15s;
}
.interruptor input:checked { background: linear-gradient(90deg, var(--acento-1), var(--acento-2)); border-color: var(--acento); }
.interruptor input:checked::after { transform: translateX(20px); background: var(--sobre-acento); }

.opciones-radio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opcion-radio { display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--borde-suave); border-radius: 10px; background: var(--campo); cursor: pointer; }
.opcion-radio:has(input:checked) { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento-base) 14%, transparent); }
.opcion-radio input { accent-color: var(--acento); margin-top: 3px; }
.opcion-radio strong { display: block; }
.opcion-radio small { color: var(--texto-2); }

/* ---------- Diálogos y notificaciones ---------- */

dialog.modal {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 20px 24px; color: var(--texto);
  background: linear-gradient(180deg, var(--panel-1), var(--panel-2));
  border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--brillo), 0 20px 50px var(--sombra);
}
dialog.modal::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); }
dialog.modal .panel-cabecera h2 { font-size: 25px; }
.cerrar { margin-left: auto; background: none; border: 0; color: var(--texto-2); padding: 4px; }
.cerrar:hover { color: var(--texto); }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); z-index: 100;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
  padding: 12px 18px; border: 1px solid var(--acento); border-radius: 10px; background: var(--flotante);
  box-shadow: 0 0 18px var(--brillo-acento); opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast svg { color: var(--acento); flex: none; }

.construccion { display: grid; place-items: center; text-align: center; padding: 60px 20px; gap: 10px; }
.construccion svg { color: var(--acento); }
.construccion h2 { margin: 0; font-size: 28px; }
.construccion p { margin: 0; color: var(--texto-2); font-size: 18px; max-width: 520px; }

/* ---------- Factura imprimible ---------- */

.factura { max-width: 820px; }
.factura-cabecera { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--borde-suave); margin-bottom: 14px; }
.factura-cabecera h2 { margin: 0 0 4px; font-size: 26px; }
.factura-total { display: flex; justify-content: flex-end; gap: 30px; padding-top: 12px; font-size: 22px; }

/* ---------- Pantallas de acceso y aviso ---------- */

.acceso-pantalla {
  position: relative; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px 150px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--acento-base) 13%, transparent), transparent 60%), var(--fondo);
}
.acceso-tarjeta { position: relative; z-index: 1; width: min(440px, 100%); padding: 24px 28px 28px; }
.acceso-tarjeta .logo { display: block; max-width: 300px; margin: 0 auto 10px; }
.acceso-tarjeta .logo svg { width: 100%; height: auto; }
.acceso-tarjeta h1 { margin: 0 0 4px; font-size: 26px; text-align: center; }
.acceso-tarjeta > p { margin: 0 0 18px; text-align: center; color: var(--texto-2); }
.acceso-tarjeta .boton { width: 100%; padding: 11px; font-size: 18px; }
.recordar { display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--texto-2); }
.recordar label { display: flex; gap: 8px; align-items: center; }
.recordar input { accent-color: var(--acento); }

.aviso-pagina { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(ellipse at 50% 0%, rgba(236, 58, 44, 0.16), transparent 60%), var(--fondo); }
.aviso-tarjeta { width: min(560px, 100%); text-align: center; padding: 30px 28px; }
.aviso-tarjeta .icono-grande { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: rgba(236, 58, 44, 0.15); border: 1px solid var(--rojo); color: var(--rojo); }
.aviso-tarjeta h1 { margin: 0 0 10px; font-size: 30px; }
.aviso-tarjeta p { color: var(--texto-2); font-size: 18px; }
.aviso-tarjeta .contacto { display: grid; gap: 10px; margin: 20px 0 6px; }
.aviso-tarjeta .boton { width: 100%; padding: 12px; font-size: 18px; }

.cargando { display: grid; place-items: center; min-height: 100vh; color: var(--texto-2); }

/* ---------- Adaptación a pantallas más pequeñas ---------- */

@media (max-width: 1500px) {
  :root { --sidebar: 250px; }
  .menu-item { font-size: 17px; gap: 12px; }
  .encabezado h1 { font-size: 26px; }
  .encabezado p { font-size: 16px; }
  .kpi .valor { font-size: 27px; }
  .medallon { width: 58px; height: 58px; }
  .kpis.seis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1250px) {
  .fila-media { grid-template-columns: 1fr 1fr; }
  .fila-media > .columna:last-child { grid-column: 1 / -1; }
  .accesos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fila-inferior { grid-template-columns: 1fr 1fr; }
  .torre { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .rejilla-lateral { grid-template-columns: 1fr; }
  .rejilla-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(290px, 85vw);
    transform: translateX(-100%); transition: transform 0.2s; z-index: 60;
  }
  .app.menu-abierto .sidebar { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5); }
  .boton-menu { display: block; }
  .encabezado { flex-wrap: wrap; gap: 10px 12px; padding: 10px 16px; }
  .encabezado .titulo { flex: 1; gap: 10px; }
  .encabezado .titulo > svg { width: 30px; height: 30px; }
  .encabezado h1 { font-size: 22px; }
  .encabezado p { display: none; }
  .encabezado .buscador { order: 5; width: 100%; margin: 0; }
  .interruptor-tema .pista { width: 58px; height: 30px; }
  :root[data-tema='claro'] .interruptor-tema .perilla { transform: translateX(26px); }
  .separador-v, .usuario strong, .usuario small, .usuario .chevron { display: none; }
  .avatar { width: 40px; height: 40px; }
  .desplegable { position: fixed; top: 64px; right: 12px; left: auto; max-width: calc(100vw - 24px); }
  .contenido { padding: 0 16px 120px; }
  .banner { margin: 0 16px 12px; }
  .kpis, .kpis.seis, .fila-media, .fila-inferior, .rejilla-2, .rejilla-3, .rejilla-lateral, .campos, .campos.tres, .opciones-radio, .resumen-cifras { grid-template-columns: minmax(0, 1fr); }
  .fila-media > .columna:last-child { grid-column: auto; }
  .accesos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .barra-herramientas .buscador { width: 100%; }
  .ficha { grid-template-columns: 1fr; gap: 2px; }
  .ficha dd { margin-bottom: 8px; }
  .col-opcional { display: none; }
  .velocidades strong { font-size: 21px; }
}

@media (max-width: 480px) {
  .accesos { grid-template-columns: 1fr 1fr; }
  .kpi .valor { font-size: 24px; }
  .estado-clientes { flex-direction: column; align-items: stretch; }
  .estado-clientes svg { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .interruptor-tema .perilla, .interruptor-tema .pista { transition: none; }
}

@media print {
  .sidebar, .encabezado, .banner, .ondas, .no-imprimir { display: none !important; }
  .app { display: block; }
  body { background: #fff; color: #000; }
  .panel { box-shadow: none; border-color: #999; background: #fff; }
  .tenue, .muy-tenue { color: #444; }
}