/* ================================================================
   TEMA 2026 — alineado con BackOffice GEA
   Se carga DESPUÉS de style.css y solo actúa bajo <html class="tema">.
   Quitar la clase (o el <link>) devuelve el diseño anterior.
   Modo oscuro: <html data-modo="oscuro"> (botón ☀/🌙 de tema.js; sin
   elección guardada sigue al sistema). Aplica a todas las pantallas.
   ================================================================ */

html.tema {
  /* Tokens propios */
  --t-bg:          #e8ecf3;
  --t-surface:     #ffffff;
  --t-surface-2:   #f4f6fa;
  --t-surface-3:   #e9edf4;
  --t-line:        #dce2eb;
  --t-line-2:      #d5dce6;
  --t-text:        #111827;
  --t-text-2:      #374151;
  --t-muted:       #6b7280;
  --t-faint:       #9ca3af;
  --t-primary:     #2563eb;
  --t-primary-h:   #1d4ed8;
  --t-primary-soft:#eaf1ff;
  --t-ring:        rgba(37, 99, 235, .22);
  --t-ok:          #16a34a;
  --t-ok-soft:     #e8f7ee;
  --t-warn:        #b45309;
  --t-warn-soft:   #fff7e6;
  --t-warn-line:   #f5c86b;
  --t-bad:         #dc2626;
  --t-bad-soft:    #fdecec;
  --t-fide:        #0f9f86;   /* Fidelización (misma paleta que el dashboard) */
  --t-rete:        #eb6834;   /* Retención */
  --t-shadow:      0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --t-shadow-lg:   0 12px 32px rgba(16, 24, 40, .14);
  --t-logo-plate:  #ffffff;
  /* barra de título (azul GEA, mismo degradado que la topbar de BackOffice) */
  --t-hdr-a:       #0d3264;
  --t-hdr-b:       #1c5cab;

  /* Tokens del diseño anterior, redirigidos a los nuevos */
  --navy:        var(--t-text);
  --navy-dark:   var(--t-text);
  --navy-light:  var(--t-text-2);
  --accent:      var(--t-primary);
  --accent-dark: var(--t-primary-h);
  --accent-glow: var(--t-ring);
  --success:     var(--t-ok);
  --danger:      var(--t-bad);
  --light-bg:    var(--t-surface-2);
  --card-bg:     var(--t-surface);
  --border:      var(--t-line);
  --text-main:   var(--t-text);
  --text-muted:  var(--t-muted);
  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      var(--t-shadow);
  --shadow-md:   var(--t-shadow-lg);

  color-scheme: light;
}

html.tema[data-modo="oscuro"] {
  --t-bg:          #0f1115;
  --t-surface:     #171a21;
  --t-surface-2:   #1c2029;
  --t-surface-3:   #232834;
  --t-line:        #2a303c;
  --t-line-2:      #353c4a;
  --t-text:        #e8eaef;
  --t-text-2:      #c9ced8;
  --t-muted:       #9aa3b2;
  --t-faint:       #6b7384;
  --t-primary:     #4f8bff;
  --t-primary-h:   #6d9eff;
  --t-primary-soft:rgba(79, 139, 255, .14);
  --t-ring:        rgba(79, 139, 255, .30);
  --t-ok:          #34c26b;
  --t-ok-soft:     rgba(52, 194, 107, .12);
  --t-warn:        #f0b44c;
  --t-warn-soft:   rgba(240, 180, 76, .10);
  --t-warn-line:   rgba(240, 180, 76, .35);
  --t-bad:         #f87171;
  --t-bad-soft:    rgba(248, 113, 113, .12);
  --t-fide:        #2cc3a6;
  --t-rete:        #f07a45;
  --t-shadow:      0 1px 2px rgba(0, 0, 0, .4);
  --t-shadow-lg:   0 16px 40px rgba(0, 0, 0, .55);
  --t-logo-plate:  #ffffff;
  --t-hdr-a:       #0c1426;
  --t-hdr-b:       #16284a;
  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────── */
html.tema body,
html.tema .dashboard-page {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--t-bg);
  color: var(--t-text);
}
html.tema ::-webkit-scrollbar-track { background: transparent; }
html.tema ::-webkit-scrollbar-thumb { background: var(--t-line-2); border-radius: 6px; }

/* ── Formularios ──────────────────────────────────────────────── */
html.tema label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--t-text-2);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: .35rem;
}
html.tema input,
html.tema select,
html.tema textarea {
  border: 1px solid var(--t-line-2);
  border-radius: 8px;
  background-color: var(--t-surface);
  color: var(--t-text);
  font-size: .93rem;
  padding: .62rem .85rem;
}
html.tema input:hover:not(:focus):not([readonly]),
html.tema select:hover:not(:focus) { border-color: var(--t-faint); }
html.tema input:focus,
html.tema select:focus,
html.tema textarea:focus {
  border-color: var(--t-primary);
  box-shadow: 0 0 0 3px var(--t-ring);
}
html.tema input::placeholder,
html.tema textarea::placeholder { color: var(--t-faint); }
html.tema input[readonly] { background: var(--t-surface-2); color: var(--t-muted); }
html.tema input[type="checkbox"],
html.tema input[type="radio"] { accent-color: var(--t-primary); }

/* ── Botones ──────────────────────────────────────────────────── */
html.tema .btn {
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
}
html.tema .btn-primary { background: var(--t-primary); border-color: var(--t-primary); color: #fff; }
html.tema .btn-primary:hover { background: var(--t-primary-h); transform: none; box-shadow: none; }
html.tema .btn-success { background: var(--t-ok); border-color: var(--t-ok); color: #fff; }
html.tema .btn-danger  { background: var(--t-bad); border-color: var(--t-bad); color: #fff; }
html.tema .btn-secondary {
  background: var(--t-surface);
  border: 1px solid var(--t-line-2);
  color: var(--t-text-2) !important;
}
html.tema .btn-secondary:hover { background: var(--t-surface-3); }
html.tema .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--t-ring); }

/* ── Encabezado ───────────────────────────────────────────────── */
html.tema .app-header {
  background: linear-gradient(90deg, var(--t-hdr-a) 0%, var(--t-hdr-b) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 2px 12px rgba(13, 50, 100, .18);
  height: 60px;
  padding: 0 1.25rem;
  gap: .9rem;
}
html.tema .header-logo {
  max-height: 38px;
  max-width: 130px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
  background: transparent;
  padding: 0;
}
html.tema .header-title {
  color: #fff;
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}
html.tema .t-campana {
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 99px;
  padding: .18rem .6rem;
  white-space: nowrap;
}
html.tema .header-info { color: rgba(255, 255, 255, .75); gap: 1rem; }
html.tema .header-clock { text-align: right; align-items: flex-end; }
html.tema .clock-time { color: #fff; font-size: .98rem; }
html.tema .clock-date { color: rgba(255, 255, 255, .7); }
html.tema .clock-timer { color: #fcd34d; }
html.tema .header-user { padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .18); }
html.tema .header-user strong { color: #fff; font-size: .86rem; font-weight: 600; }
html.tema .header-user span { opacity: 1 !important; color: rgba(255, 255, 255, .7); }
html.tema .btn-logout {
  background: rgba(255, 255, 255, .08);
  color: #fecaca;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: none;
  font-weight: 600;
  letter-spacing: 0;
  border-radius: 8px;
}
html.tema .btn-logout:hover { background: #dc2626; color: #fff; border-color: #dc2626; box-shadow: none; transform: none; }

/* ── Navegación (admin) ───────────────────────────────────────── */
html.tema .app-nav {
  background: var(--t-surface);
  border-bottom: 1px solid var(--t-line);
  padding: 0 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
html.tema .nav-tab {
  color: var(--t-muted);
  font-weight: 600;
  letter-spacing: 0;
  padding: .8rem 1rem;
  border-bottom-width: 2px;
  margin-bottom: -1px;
  white-space: nowrap;
}
html.tema .nav-tab:hover { color: var(--t-text); }
html.tema .nav-tab.active { color: var(--t-primary); border-bottom-color: var(--t-primary); }

/* ── Tarjetas ─────────────────────────────────────────────────── */
html.tema .card {
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  box-shadow: var(--t-shadow);
  overflow: visible;
}
html.tema .card-header {
  background: transparent;
  border-bottom: 1px solid var(--t-line);
  padding: .9rem 1.25rem;
}
html.tema .card-title {
  color: var(--t-text);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: 0;
}
html.tema .card-body { padding: 1.25rem; }

/* ── Tablas ───────────────────────────────────────────────────── */
html.tema th {
  background: var(--t-surface-2);
  color: var(--t-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--t-line);
  padding: .65rem 1rem;
}
html.tema td { border-bottom: 1px solid var(--t-line); color: var(--t-text); }
html.tema tr:nth-child(even) td { background: transparent; }
html.tema tr:hover td { background: var(--t-surface-2); }
html.tema .tfoot-row td {
  border-top: 1px solid var(--t-line-2);
  background: var(--t-surface-2) !important;
  color: var(--t-text);
}

/* ── Modales y avisos ─────────────────────────────────────────── */
html.tema .modal { background: var(--t-surface); border: 1px solid var(--t-line); box-shadow: var(--t-shadow-lg); }
html.tema .modal-header { background: transparent; border-bottom: 1px solid var(--t-line); }
html.tema .modal-header h3 { color: var(--t-text); }
html.tema .modal-close { background: var(--t-surface-3); color: var(--t-muted); }
html.tema .modal-close:hover { background: var(--t-bad-soft); color: var(--t-bad); }
html.tema .modal-footer { border-top: 1px solid var(--t-line); }
html.tema .modal-overlay { background: rgba(15, 17, 21, .55); }
html.tema .toast { background: var(--t-surface); color: var(--t-text); border: 1px solid var(--t-line); border-left-width: 4px; }

/* ================================================================
   LOGIN — neumórfico + lámpara colgante (tema 2026)
   Escena apagada al cargar; tema.js agrega body.t-luz al encender:
   el formulario cae desde arriba con un pequeño rebote y un destello.
   ================================================================ */
.t-lampara, .t-login-sub { display: none; }            /* sin tema: login de siempre */

html.tema .login-page {
  --neu-bg: #e3e8f0; --neu-claro: #ffffff; --neu-osc: #bcc5d3;
  --neu-txt: #1f2937; --neu-txt-2: #52607a; --neu-mut: #8591a6;
  --luz: rgba(255, 214, 130, .40);
  min-height: 100vh; padding: 190px 1.25rem 2rem; align-items: flex-start;
  background: #0b0e14; transition: background .8s ease; position: relative; overflow: hidden;
}
html.tema[data-modo="oscuro"] .login-page {
  --neu-bg: #1e232c; --neu-claro: #2a303c; --neu-osc: #12151b;
  --neu-txt: #e8eaef; --neu-txt-2: #b8c0cd; --neu-mut: #7d8698;
  --luz: rgba(255, 214, 130, .22);
}
html.tema body.t-luz .login-page {
  background:
    radial-gradient(620px 520px at 50% 120px, var(--luz) 0%, transparent 70%),
    var(--neu-bg);
}

/* ── Lámpara ───────────────────────────────────────────────── */
html.tema .t-lampara { display: flex; flex-direction: column; align-items: center; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;   /* detrás de la tarjeta: la luz la rodea sin teñir el texto */ pointer-events: none; }
html.tema .t-lampara-btn { pointer-events: auto; position: relative; background: none; border: 0; padding: 0; cursor: pointer; width: 120px; height: 200px; transform-origin: 50% 0; }
html.tema .t-lampara-btn:focus-visible { outline: 2px solid #fde68a; outline-offset: 4px; border-radius: 12px; }
html.tema .t-lampara-btn svg { width: 100%; height: 100%; overflow: visible; }
html.tema .t-cable { stroke: #4b5563; stroke-width: 2.2; }
html.tema .t-casquillo { fill: #374151; }
html.tema .t-pantalla { fill: #2b313c; transition: fill .4s ease; }
html.tema .t-borde { stroke: #4b5563; stroke-width: 2; }
html.tema .t-foco { fill: #3f4654; transition: fill .3s ease, filter .3s ease; }
html.tema .t-halo { position: absolute; left: 50%; top: 150px; width: 240px; height: 240px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 140, .75) 0%, rgba(255, 214, 130, .18) 40%, transparent 70%); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
html.tema .t-haz { position: absolute; top: 150px; left: 50%; width: 560px; height: 560px; transform: translateX(-50%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); background: linear-gradient(to bottom, rgba(255, 224, 150, .38), rgba(255, 224, 150, 0) 85%); opacity: 0; transition: opacity .7s ease .1s; pointer-events: none; }
html.tema .t-lampara-txt { margin-top: 6px; color: #9aa3b2; font-size: .95rem; font-weight: 600; text-align: center; transition: opacity .4s ease, transform .4s ease; }
html.tema .t-lampara-txt span { display: block; font-size: .78rem; font-weight: 400; color: #6b7384; margin-top: 2px; }

html.tema body.t-luz .t-pantalla { fill: #1f3b6e; }
html.tema[data-modo="oscuro"] body.t-luz .t-pantalla { fill: #2a3f66; }
html.tema body.t-luz .t-foco { fill: #fff3c4; filter: drop-shadow(0 0 14px rgba(255, 220, 140, .95)); }
html.tema body.t-luz .t-halo { opacity: 1; animation: t-latido 3.2s ease-in-out 1s infinite; }
html.tema body.t-luz .t-haz { opacity: 1; }
html.tema body.t-luz .t-lampara-txt { opacity: 0; transform: translateY(-6px); }
html.tema body.t-luz .t-lampara-btn { animation: t-vaiven 1.4s cubic-bezier(.36, .07, .19, .97); }
@keyframes t-vaiven { 0% { transform: rotate(0); } 18% { transform: rotate(7deg); } 38% { transform: rotate(-5deg); } 58% { transform: rotate(3deg); } 78% { transform: rotate(-1.5deg); } 100% { transform: rotate(0); } }
@keyframes t-latido { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }

/* ── Tarjeta neumórfica ─────────────────────────────────────── */
html.tema .login-card {
  position: relative; z-index: 2; max-width: 400px; overflow: hidden;
  background: var(--neu-bg); border: 0; border-radius: 26px;
  box-shadow: 14px 14px 30px var(--neu-osc), -14px -14px 30px var(--neu-claro);
  opacity: 0; transform: translateY(-120vh); visibility: hidden; animation: none;
}
html.tema body.t-luz .login-card {
  visibility: visible;
  animation: t-caer .95s cubic-bezier(.22, 1, .36, 1) .15s forwards;
}
@keyframes t-caer {
  0%   { opacity: 0; transform: translateY(-120vh); }
  55%  { opacity: 1; transform: translateY(14px); }
  75%  { transform: translateY(-6px); }
  90%  { transform: translateY(2px); }
  100% { opacity: 1; transform: none; }
}
/* destello que recorre la tarjeta al aterrizar */
html.tema .login-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
  transform: translateX(-120%);
}
html.tema[data-modo="oscuro"] .login-card::after { background: linear-gradient(115deg, transparent 30%, rgba(255, 236, 190, .14) 48%, transparent 66%); }
html.tema body.t-luz .login-card::after { animation: t-destello 1.3s ease 1.15s forwards; }
@keyframes t-destello { to { transform: translateX(120%); } }

html.tema .login-header { background: transparent; padding: 2rem 2rem .4rem; }
html.tema .login-header::after { display: none; }
html.tema .login-logo {
  max-width: 170px; filter: none; margin-bottom: 1rem; border-radius: 16px; padding: 8px 14px;
  background: var(--neu-bg); box-shadow: 6px 6px 12px var(--neu-osc), -6px -6px 12px var(--neu-claro);
}
html.tema[data-modo="oscuro"] .login-logo { background: #ffffff; box-shadow: 6px 6px 14px var(--neu-osc), -4px -4px 10px var(--neu-claro); }
html.tema .login-title { color: var(--neu-txt); font-size: 1.25rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
html.tema .t-login-sub { display: block; color: var(--neu-mut); font-size: .88rem; margin-top: .3rem; }
html.tema .login-body { padding: 1.3rem 2rem 1.9rem; }
html.tema .login-page label { color: var(--neu-txt-2); font-size: .8rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
html.tema .t-campo { position: relative; }
html.tema .t-campo-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; fill: none; stroke: var(--neu-mut); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: stroke .2s ease; }
html.tema .login-page input {
  background: var(--neu-bg); color: var(--neu-txt); border: 0; border-radius: 14px;
  padding: .85rem 1rem .85rem 2.75rem; font-size: .95rem;
  box-shadow: inset 5px 5px 10px var(--neu-osc), inset -5px -5px 10px var(--neu-claro);
}
html.tema .login-page input:focus {
  box-shadow: inset 5px 5px 10px var(--neu-osc), inset -5px -5px 10px var(--neu-claro), 0 0 0 2px rgba(59, 130, 246, .55);
}
html.tema .login-page .t-campo:focus-within .t-campo-ico { stroke: #3b82f6; }
html.tema .login-page input::placeholder { color: var(--neu-mut); }
html.tema #toggle-pwd { color: var(--neu-mut) !important; }
html.tema .login-btn {
  margin-top: .6rem; padding: .85rem; font-size: 1rem; border: 0; border-radius: 14px; letter-spacing: .02em;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: #fff;
  box-shadow: 6px 6px 14px var(--neu-osc), -6px -6px 14px var(--neu-claro), 0 8px 22px rgba(37, 99, 235, .35);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
html.tema .login-btn:hover { filter: brightness(1.08); box-shadow: 6px 6px 14px var(--neu-osc), -6px -6px 14px var(--neu-claro), 0 10px 28px rgba(37, 99, 235, .55); }
html.tema .login-btn:active { transform: translateY(1px); box-shadow: inset 4px 4px 10px rgba(0, 0, 0, .25); }
html.tema #login-error { background: rgba(220, 38, 38, .1) !important; border: 1px solid rgba(220, 38, 38, .45) !important; color: #dc2626 !important; border-radius: 12px !important; }
html.tema[data-modo="oscuro"] #login-error { color: #f59a9a !important; }
html.tema .login-footer { background: transparent; border-top: 1px solid color-mix(in srgb, var(--neu-osc) 60%, transparent); color: var(--neu-mut); }
html.tema .t-modo-login { z-index: 5; }
html.tema body:not(.t-luz) .t-modo-login { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #cbd2de; }

@media (max-width: 480px) {
  html.tema .login-page { padding-top: 150px; }
  html.tema .t-lampara-btn { width: 92px; height: 154px; }
  html.tema .t-halo { top: 115px; }
  html.tema .t-haz { top: 115px; width: 420px; height: 440px; }
}
@media (prefers-reduced-motion: reduce) {
  html.tema body.t-luz .login-card { animation: t-aparecer .3s ease forwards; }
  html.tema body.t-luz .login-card::after, html.tema body.t-luz .t-lampara-btn, html.tema body.t-luz .t-halo { animation: none; }
  @keyframes t-aparecer { from { opacity: 0; } to { opacity: 1; transform: none; } }
}

/* ================================================================
   PANTALLA DE TIPIFICACIÓN (agente)
   ================================================================ */
html.tema .form-col { width: 400px; }

html.tema .siac-msg {
  background: var(--t-warn-soft);
  border: 1px solid var(--t-warn-line);
  border-left: 4px solid var(--t-warn);
  color: var(--t-warn);
  font-weight: 600;
  font-size: .86rem;
}

html.tema .tip-progress { background: var(--t-surface-2); border-color: var(--t-line); }
html.tema .tip-progress-count { color: var(--t-text); }
html.tema .tip-progress-track { background: var(--t-line); }
html.tema .tip-progress-fill { background: var(--t-primary); }
html.tema .tip-progress-fill.ready,
html.tema #tip-progress-msg.ready { background-color: var(--t-ok); }
html.tema #tip-progress-msg.ready { background: none; color: var(--t-ok); }
html.tema .fsi.fsi-pending { color: var(--t-line-2); }
html.tema .fsi.fsi-done { color: var(--t-ok); }

/* El buscador de Plan es readonly por diseño: se ve como campo normal salvo bloqueado */
html.tema .search-select-input[readonly] { background-color: var(--t-surface); color: var(--t-text); cursor: pointer; }

html.tema .tip-input-wrap.tip-locked .search-select-input,
html.tema .tip-input-wrap.tip-locked select {
  background: var(--t-surface-2) !important;
  color: var(--t-faint) !important;
  border-color: var(--t-line) !important;
}
html.tema .tip-locked-hint { color: var(--t-faint); }

html.tema .search-select-dropdown { background: var(--t-surface); border: 1px solid var(--t-line-2); }
html.tema .search-select-search { background: var(--t-surface-2); }
html.tema .search-select-list li { color: var(--t-text); }
html.tema .search-select-list li:hover,
html.tema .search-select-list li.highlighted { background: var(--t-primary-soft); color: var(--t-primary); }

html.tema #obs-tipo-msg {
  background: var(--t-warn-soft) !important;
  border-left-color: var(--t-warn) !important;
  color: var(--t-warn) !important;
}
html.tema #valor-bono-display {
  background: var(--t-primary-soft) !important;
  border-left-color: var(--t-primary) !important;
  color: var(--t-primary) !important;
}
html.tema .fide-info { background: var(--t-surface-2); border: 1px solid var(--t-line); }
html.tema .fide-info h4 { color: var(--t-text-2); border-bottom-color: var(--t-line); text-transform: none; letter-spacing: 0; }
html.tema .fide-item .fide-value { background: var(--t-surface); border: 1px solid var(--t-line); color: var(--t-primary); }
html.tema .fide-desc .fide-value { color: var(--t-text); }

html.tema #btn-registrar { padding: .8rem; font-size: .96rem; }
html.tema #btn-registrar:disabled { background: var(--t-surface-3); border-color: var(--t-line); color: var(--t-faint); opacity: 1; }

html.tema #plantilla-box {
  background: var(--t-surface-2) !important;
  border-color: var(--t-line) !important;
  color: var(--t-text) !important;
}

/* KPIs del día (tema.js los arma a partir del resumen) */
html.tema .t-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
html.tema .t-kpi {
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: 12px;
  box-shadow: var(--t-shadow);
  padding: .9rem 1rem;
  min-width: 0;
}
html.tema .t-kpi-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--t-muted);
}
html.tema .t-kpi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t-primary); flex: none; }
html.tema .t-kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--t-text);
  margin-top: .2rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.tema .t-kpi-sub { font-size: .74rem; color: var(--t-faint); margin-top: .1rem; }
html.tema .t-kpi.fide .t-kpi-dot { background: var(--t-fide); }
html.tema .t-kpi.rete .t-kpi-dot { background: var(--t-rete); }
html.tema .t-kpi.bono .t-kpi-dot { background: var(--t-ok); }
html.tema .t-kpi-value.t-cambio { animation: t-kpi-in .32s ease-out; }
@keyframes t-kpi-in { from { opacity: .25; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* Tabla "Detalle del día": sin bloques de color sólido */
html.tema .summary-tipo-row td {
  background: var(--t-surface) !important;
  color: var(--t-text) !important;
  font-weight: 700;
  border-bottom: 1px solid var(--t-line);
}
html.tema .summary-tipo-row td:first-child { box-shadow: inset 3px 0 0 var(--t-primary); }
html.tema .summary-tipo-fidelizacion td:first-child { box-shadow: inset 3px 0 0 var(--t-fide); }
html.tema .summary-tipo-retencion td:first-child { box-shadow: inset 3px 0 0 var(--t-rete); }
html.tema .summary-tipo-row:hover td { filter: none; background: var(--t-surface-2) !important; }
html.tema .summary-bono-row td {
  background: var(--t-surface) !important;
  color: var(--t-muted);
  border-bottom: 1px solid var(--t-line);
}
html.tema .summary-bono-row:hover td { background: var(--t-surface-2) !important; }

/* La tarjeta del total antiguo se reemplaza por los KPIs */
html.tema .t-oculto { display: none !important; }

/* ── Celular ──────────────────────────────────────────────────── */
@media (max-width: 960px) {
  html.tema .t-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  html.tema .app-header { padding: 0 .75rem; gap: .6rem; }
  html.tema .header-title { display: flex; flex: 1; }
  html.tema .t-titulo-txt { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tema .header-clock .clock-date,
  html.tema .header-user span { display: none; }
  html.tema .header-user { padding-left: .6rem; max-width: 110px; }
  html.tema .header-user strong { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tema .header-info { gap: .6rem; }
  html.tema .btn-logout { padding: .45rem .55rem; }
  html.tema .t-logout-txt { display: none; }
  html.tema .app-main { padding: .9rem; }
  html.tema .form-col { width: 100%; min-width: 0; }
  html.tema .card-body { padding: 1rem; }
  html.tema .t-kpi-value { font-size: 1.35rem; }
}
@media (max-width: 640px) {
  /* El diseño anterior ocultaba el reloj: se deja hora + tiempo de sesión */
  html.tema .app-header { height: 56px; flex-wrap: nowrap; }
  html.tema .header-clock { display: flex; }
  html.tema .clock-time { font-size: .86rem; }
}
@media (max-width: 480px) {
  html.tema .summary-table-wrap th:nth-child(4),
  html.tema .summary-table-wrap td:nth-child(4) { display: none; }
  html.tema .summary-table-wrap th:nth-child(3),
  html.tema .summary-table-wrap td:nth-child(3) { text-align: right; }
  html.tema .summary-table-wrap th,
  html.tema .summary-table-wrap td { padding-left: .7rem; padding-right: .7rem; }
  html.tema .summary-bono-row td:first-child { padding-left: 1.3rem; }
}
@media (max-width: 420px) {
  html.tema .header-user { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.tema .t-kpi-value.t-cambio { animation: none; }
}

/* ================================================================
   DASHBOARD BACK / SUPERVISOR — estilo tableros BackOffice
   ================================================================ */
html.tema .back-nav-bar {
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  box-shadow: none;
  padding: 3px;
  border-radius: 10px;
}
html.tema .back-tab { color: var(--t-muted); font-weight: 600; border-radius: 8px; letter-spacing: 0; }
html.tema .back-tab:hover { background: var(--t-surface-2); color: var(--t-text); }
html.tema .back-tab.active { background: var(--t-text); color: var(--t-surface); box-shadow: none; }

/* Barra de filtros compacta */
html.tema .dash-filter-bar { padding: .8rem 1rem; }
html.tema .dash-filter-bar label {
  font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; color: var(--t-muted); font-weight: 600;
}
html.tema .dash-filter-bar input,
html.tema .dash-filter-bar select,
html.tema .dash-filter-bar .search-select-input { padding: .45rem .65rem; font-size: .85rem; }
html.tema .dash-filter-bar .btn { padding: .48rem .85rem; font-size: .82rem; }
html.tema .dash-filter-bar .btn-success { background: var(--t-surface); color: var(--t-text-2); border: 1px solid var(--t-line-2); }
html.tema .dash-filter-bar .btn-success:hover { background: var(--t-surface-3); }

/* KPIs: tarjeta blanca con franja de color a la izquierda */
html.tema .dash-grid { gap: .7rem; }
html.tema .dash-card {
  --kc: var(--t-primary);
  background: var(--t-surface) !important;
  border: 1px solid var(--t-line);
  border-top: 1px solid var(--t-line) !important;
  border-radius: 12px;
  box-shadow: var(--t-shadow);
  padding: .8rem 1rem .85rem 1.15rem;
  text-align: left;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html.tema .dash-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kc); transition: width .18s ease; }
html.tema .dash-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--kc) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kc) 14%, transparent), 0 12px 26px rgba(0,0,0,.10); }
html.tema .dash-card:hover::before { width: 5px; }
html.tema .dash-card-label {
  color: var(--t-text) !important; font-size: .8rem; font-weight: 620; letter-spacing: 0; text-transform: none;
}
html.tema .dash-card-value {
  color: var(--kc) !important; font-size: 1.85rem; font-weight: 660; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin-top: .15rem;
}
html.tema .dash-card-total        { --kc: #2a78d6; }
html.tema .dash-card-fidelizacion { --kc: #0f9f86; }
html.tema .dash-card-retencion    { --kc: #eb6834; }
html.tema .dash-card-bonos        { --kc: #4a3aa7; }

html.tema .dash-empty-notice {
  background: var(--t-warn-soft); border: 1px solid var(--t-warn-line); color: var(--t-warn); border-radius: 10px;
}
html.tema #dash-periodo-label { font-size: .78rem; color: var(--t-muted); font-weight: 500; }

/* Tarjetas de gráficos y tablas: más compactas */
html.tema #tab-back-dashboard .card-header { padding: .75rem 1.1rem; }
html.tema #tab-back-dashboard .card-title { font-size: .92rem; }
html.tema #tab-back-dashboard .card-body { padding: .9rem 1.1rem; }
html.tema #tab-back-dashboard table { font-size: .82rem; }
html.tema #tab-back-dashboard td { padding: .5rem .8rem; font-size: .82rem; }
html.tema #tab-back-dashboard th { padding: .5rem .8rem; position: sticky; top: 0; z-index: 1; }

/* Leyendas de auditoría */
html.tema .audit-legend-label { color: var(--t-text-2); text-transform: none; letter-spacing: 0; }
html.tema .audit-legend-value { color: var(--t-text); }
html.tema .audit-legend-pct { color: var(--t-muted); }
html.tema .audit-bar-track { background: var(--t-surface-3); }

@media (prefers-reduced-motion: reduce) {
  html.tema .dash-card, html.tema .dash-card::before { transition: none; }
  html.tema .dash-card:hover { transform: none; }
}

/* Top 15 bonos / Top 10 agentes */
html.tema .t-rank {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  font-size: .74rem; font-weight: 700; background: var(--t-surface-3); color: var(--t-muted); font-variant-numeric: tabular-nums;
}
html.tema .t-rank-1 { background: #fdf0c2; color: #8a5a00; }
html.tema .t-rank-2 { background: #e9ecf1; color: #4b5563; }
html.tema .t-rank-3 { background: #f6e0cf; color: #8a4a1c; }
html.tema .t-top-nom { font-weight: 600; white-space: nowrap; }
html.tema .t-top-nom small { display: block; font-weight: 400; font-size: .74rem; color: var(--t-muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
html.tema .t-tipo { display: inline-block; font-size: .7rem; font-weight: 650; padding: .1rem .5rem; border-radius: 20px; border: 1px solid; }
html.tema .t-tipo.fide { color: #0b7d69; border-color: rgba(15,159,134,.45); background: rgba(15,159,134,.08); }
html.tema .t-tipo.rete { color: #c24f1f; border-color: rgba(235,104,52,.45); background: rgba(235,104,52,.08); }
html.tema .t-top-bar { width: 38%; min-width: 120px; }
html.tema .t-tbar { position: relative; height: 22px; display: flex; align-items: center; }
html.tema .t-tbar span { position: absolute; left: 0; top: 2px; bottom: 2px; border-radius: 5px; transition: width .38s cubic-bezier(.22,.8,.26,1); }
html.tema .t-tbar em { position: relative; font-style: normal; font-weight: 700; padding-left: 8px; font-variant-numeric: tabular-nums; }
html.tema .t-top-pct { color: var(--t-muted); font-variant-numeric: tabular-nums; text-align: right; }
html.tema .t-top-vacio { text-align: center !important; padding: 1.5rem !important; color: var(--t-muted); }
@media (prefers-reduced-motion: reduce) { html.tema .t-tbar span { transition: none; } }

/* ================================================================
   MODO OSCURO — piezas con colores propios (dashboard, consulta,
   ventanas y estilos heredados de style.css)
   ================================================================ */
html.tema[data-modo="oscuro"] .dash-card-total        { --kc: #4a9af0; }
html.tema[data-modo="oscuro"] .dash-card-fidelizacion { --kc: #2cc3a6; }
html.tema[data-modo="oscuro"] .dash-card-retencion    { --kc: #f07a45; }
html.tema[data-modo="oscuro"] .dash-card-bonos        { --kc: #9085e9; }
html.tema[data-modo="oscuro"] .t-rank-1 { background: rgba(240,180,76,.18); color: #f0c46c; }
html.tema[data-modo="oscuro"] .t-rank-2 { background: rgba(200,205,215,.14); color: #d4d8e0; }
html.tema[data-modo="oscuro"] .t-rank-3 { background: rgba(240,122,69,.16); color: #f2a077; }
html.tema[data-modo="oscuro"] .t-tipo.fide { color: #3fd6b8; border-color: rgba(44,195,166,.45); background: rgba(44,195,166,.10); }
html.tema[data-modo="oscuro"] .t-tipo.rete { color: #f5925f; border-color: rgba(240,122,69,.45); background: rgba(240,122,69,.10); }

/* Etiquetas (badges) heredadas: fondo translúcido, texto claro */
html.tema[data-modo="oscuro"] .badge-fidelizacion,
html.tema[data-modo="oscuro"] .badge-activo,
html.tema[data-modo="oscuro"] .badge-supervisor { background: rgba(52,194,107,.14); color: #6ee29a; }
html.tema[data-modo="oscuro"] .badge-retencion,
html.tema[data-modo="oscuro"] .badge-cliente   { background: rgba(242,122,155,.14); color: #f59ab4; }
html.tema[data-modo="oscuro"] .badge-cesado    { background: rgba(248,113,113,.14); color: #f59a9a; }
html.tema[data-modo="oscuro"] .badge-contencion,
html.tema[data-modo="oscuro"] .badge-agente    { background: rgba(79,139,255,.16); color: #8fb4ff; }
html.tema[data-modo="oscuro"] .badge-admin     { background: rgba(240,180,76,.16); color: #f0c46c; }
html.tema[data-modo="oscuro"] .badge-back      { background: rgba(196,155,240,.16); color: #cfaaf5; }
html.tema[data-modo="oscuro"] .badge-calidad   { background: rgba(95,199,224,.14); color: #86d6ea; }

/* Contenedores de style.css que tenían blanco / azul claro fijo */
html.tema[data-modo="oscuro"] .users-count-badge,
html.tema[data-modo="oscuro"] .results-info,
html.tema[data-modo="oscuro"] .report-count-banner,
html.tema[data-modo="oscuro"] .dash-refresh-bar,
html.tema[data-modo="oscuro"] .audit-progress-panel,
html.tema[data-modo="oscuro"] .empty-state { background: var(--t-surface-2); color: var(--t-text-2); border-color: var(--t-line); }
html.tema[data-modo="oscuro"] .rcb-num,
html.tema[data-modo="oscuro"] .users-count-badge strong { color: var(--t-text); }
html.tema[data-modo="oscuro"] .rcb-label { color: var(--t-muted); }
html.tema[data-modo="oscuro"] .report-filters { background: var(--t-surface); border-color: var(--t-line); }

/* Estilos en línea del HTML heredado (colores fijos) */
html.tema[data-modo="oscuro"] [style*="background:#fff"],
html.tema[data-modo="oscuro"] [style*="background: #fff"],
html.tema[data-modo="oscuro"] [style*="background:#f8f9fb"],
html.tema[data-modo="oscuro"] [style*="background:#f0f4ff"],
html.tema[data-modo="oscuro"] [style*="background:#f8fafc"] { background: var(--t-surface-2) !important; }
html.tema[data-modo="oscuro"] [style*="color:#1e2a4a"],
html.tema[data-modo="oscuro"] [style*="color:#374151"],
html.tema[data-modo="oscuro"] [style*="color:#333"] { color: var(--t-text) !important; }
html.tema[data-modo="oscuro"] [style*="border:1px solid #ddd"],
html.tema[data-modo="oscuro"] [style*="border:1px solid #e2e8f0"] { border-color: var(--t-line) !important; }

/* Ventana de carga de ceses (clases propias) */
html.tema[data-modo="oscuro"] .ceses-chip { background: var(--t-surface-2); border-color: var(--t-line); color: var(--t-text-2); }
html.tema[data-modo="oscuro"] .ceses-cesar     { background: rgba(248,113,113,.14); color: #f59a9a; }
html.tema[data-modo="oscuro"] .ceses-protegido { background: rgba(240,180,76,.14); color: #f0c46c; }
html.tema[data-modo="oscuro"] .ceses-ya,
html.tema[data-modo="oscuro"] .ceses-no        { background: var(--t-surface-3); color: var(--t-muted); }
html.tema[data-modo="oscuro"] .elim-prog  { color: #f0b44c; }
html.tema[data-modo="oscuro"] .elim-pronto { color: #f59a9a; }

/* Controles nativos (fecha, desplegables) y selección */
html.tema[data-modo="oscuro"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); }
html.tema[data-modo="oscuro"] ::selection { background: rgba(79,139,255,.35); }
html.tema[data-modo="oscuro"] .spinner { border-color: rgba(255,255,255,.25); border-top-color: #fff; }

/* ── Botón ☀/🌙 ────────────────────────────────────────────────── */
.t-modo-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; flex: none;
  border: 1px solid var(--t-line-2, #d5dce6); background: var(--t-surface, #fff); color: var(--t-text-2, #374151);
  cursor: pointer; padding: 0; transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.t-modo-btn:hover { background: var(--t-surface-3, #eef2f7); color: var(--t-text, #111827); }
.t-modo-btn:active { transform: scale(.94); }
.t-modo-btn:focus-visible { outline: 2px solid var(--t-primary, #2563eb); outline-offset: 2px; }
.t-modo-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* el ícono indica el modo siguiente: claro → luna, oscuro → rayo (neón), neón → sol */
.t-modo-btn .t-sol, .t-modo-btn .t-rayo { display: none; }
html[data-modo="oscuro"] .t-modo-btn .t-luna { display: none; }
html[data-modo="oscuro"]:not([data-neon]) .t-modo-btn .t-rayo { display: block; }
html[data-neon] .t-modo-btn .t-sol { display: block; }
.t-modo-login { position: fixed; top: 16px; right: 16px; z-index: 50; }

/* Cambio de modo: se anima la «foto» de toda la página (View Transitions, tema.js),
   no cada elemento. Se quita el fundido por defecto: lo reemplaza el círculo. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
html.t-modo-al-instante .login-page,
html.t-modo-al-instante .t-rail-item,
html.t-modo-al-instante .t-pantalla,
html.t-modo-al-instante .t-foco { transition: none !important; }


/* Consulta: filas ya auditadas (app.js las marca con background:#f0f0f0 en línea) */
html.tema[data-modo="oscuro"] tr[style*="background:#f0f0f0"] { background: var(--t-surface-3) !important; }
html.tema[data-modo="oscuro"] tr[style*="background:#f0f0f0"] td { color: var(--t-text-2); }
html.tema[data-modo="oscuro"] select[style*="border:1px solid #ccc"] { border-color: var(--t-line-2) !important; }
html.tema .app-header .t-modo-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff; }
html.tema .app-header .t-modo-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
/* «Planificación y Métricas» junto al título: en celular no cabe */
@media (max-width: 900px) { html.tema .t-campana { display: none; } }


/* ================================================================
   MENÚ LATERAL CON «ONDA» (vista previa ?menu=1; lo arma tema.js)
   Barra azul GEA; la onda del borde derecho y el círculo blanco se
   deslizan hasta la opción activa (380 ms, misma curva que el FLIP).
   ================================================================ */
html.tema { --rail-w: 76px; --rail-bg: #134a94; --rail-bg-2: #0d3264; --rail-activo: #ffffff; --rail-ico-on: #134a94; }
html.tema[data-modo="oscuro"] { --rail-bg: #1f3b6b; --rail-bg-2: #162a4f; --rail-activo: #e8eef9; --rail-ico-on: #1f3b6b; }

html.tema body.t-con-rail .app-nav,
html.tema body.t-con-rail .back-nav-bar { display: none !important; }
html.tema body.t-con-rail .app-main { padding-left: calc(var(--rail-w) + 28px); }
html.tema body.t-con-rail .app-main.full-width { max-width: calc(1760px + var(--rail-w)); }

html.tema .t-rail {
  position: fixed; left: 0; top: 60px; bottom: 0; width: var(--rail-w); z-index: 90;
  background: transparent;
}
/* silueta dibujada por tema.js (delgada arriba/abajo, ancha en los íconos) */
html.tema .t-rail-forma { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; filter: drop-shadow(4px 0 10px rgba(13, 50, 100, .18)); }
html.tema .t-rail { display: flex; flex-direction: column; justify-content: center; }   /* íconos al centro de la barra */
html.tema .t-rail-nav { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0; }
html.tema .t-rail-item {
  position: relative; width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: transparent; color: rgba(255, 255, 255, .72);
  transition: color .25s ease, background .2s ease, transform .38s cubic-bezier(.22, .8, .26, 1);
}
html.tema .t-rail-item svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
html.tema .t-rail-item svg .d2 { fill: currentColor; stroke: none; opacity: .2; }
html.tema .t-rail-item.on svg .d2 { opacity: .16; }
html.tema .t-rail-item:hover:not(.on) svg { transform: scale(1.08); }
html.tema .t-rail-item:hover { color: #fff; background: rgba(255, 255, 255, .12); }
html.tema .t-rail-item.on { color: var(--rail-ico-on); background: transparent; transform: translateX(13px); }
html.tema .t-rail-item:focus-visible { outline: 2px solid #fde68a; outline-offset: 2px; }
/* nombre al pasar el mouse */
html.tema .t-rail-item::after {
  content: attr(data-label); position: absolute; left: calc(100% + 16px); top: 50%; transform: translate(-4px, -50%);
  background: #1f2937; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; padding: 6px 10px; border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
html.tema .t-rail-item.on::after { left: calc(100% + 4px); }
html.tema .t-rail-item:hover::after, html.tema .t-rail-item:focus-visible::after { opacity: 1; transform: translate(0, -50%); }

/* onda del borde y círculo activo */
html.tema .t-rail-onda { position: absolute; left: calc(var(--rail-w) - 1px); top: 0; width: 28px; height: 140px; z-index: 1; overflow: visible; transition: transform .38s cubic-bezier(.22, .8, .26, 1); }
html.tema .t-rail-onda path { fill: var(--rail-bg); }
html.tema .t-rail-activo {
  position: absolute; left: calc((var(--rail-w) - 50px) / 2 + 13px); top: 0; width: 50px; height: 50px; z-index: 2; border-radius: 50%;
  background: var(--rail-activo); box-shadow: 0 6px 16px rgba(9, 30, 70, .35); transition: transform .38s cubic-bezier(.22, .8, .26, 1);
}
html.tema .t-rail.t-sin-anim .t-rail-onda, html.tema .t-rail.t-sin-anim .t-rail-activo, html.tema .t-rail.t-sin-anim .t-rail-item { transition: none; }

/* celular: barra inferior */
@media (max-width: 760px) {
  html.tema body.t-con-rail .app-main { padding-left: .9rem; padding-bottom: 86px; }
  html.tema .t-rail { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 66px; box-shadow: 0 -4px 18px rgba(13, 50, 100, .18);
    background: linear-gradient(180deg, var(--rail-bg) 0%, var(--rail-bg-2) 100%); }
  html.tema .t-rail-forma { display: none; }
  html.tema .t-rail { display: block; }
  html.tema .t-rail-nav { flex-direction: row; justify-content: space-around; padding: 11px 8px 0; gap: 0; }
  html.tema .t-rail-item.on { transform: translateY(-4px); }
  html.tema .t-rail-item::after { display: none; }
  html.tema .t-rail-onda { display: none; }
  html.tema .t-rail-activo { top: 7px; left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.tema .t-rail-onda, html.tema .t-rail-activo, html.tema .t-rail-item { transition: none; }
}

/* ── Marca animada del login (reemplaza el logo en imagen) ─────────── */
.t-marca { display: none; }
html.tema .login-logo, html.tema #logo-fallback { display: none !important; }
html.tema .t-marca {
  --m-txt-a: #1b2a6b; --m-txt-b: #2f56b5; --m-sub: #5b6b88; --m-brillo: rgba(255, 255, 255, .85);
  display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  margin: 0 auto 1rem; user-select: none;
}
html.tema[data-modo="oscuro"] .t-marca { --m-txt-a: #ffffff; --m-txt-b: #a9c4ff; --m-sub: #9aa6bb; --m-brillo: rgba(255, 244, 214, .9); }
html.tema .t-marca-barras { grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 6px; width: 46px; }
html.tema .t-marca-barras i { display: block; height: 11px; border-radius: 6px; transform-origin: left center; }
html.tema .t-marca-barras i:nth-child(1) { width: 62%; background: linear-gradient(90deg, #1f8f3a, #7cc242); }
html.tema .t-marca-barras i:nth-child(2) { width: 82%; background: linear-gradient(90deg, #1b3f95, #3f86e0); }
html.tema .t-marca-barras i:nth-child(3) { width: 100%; background: linear-gradient(90deg, #a51f2d, #f0712a); }
html.tema .t-marca-txt {
  display: flex; font-size: 3.1rem; font-weight: 800; line-height: .95; letter-spacing: .04em;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: linear-gradient(100deg, var(--m-txt-a) 0%, var(--m-txt-b) 45%, var(--m-brillo) 50%, var(--m-txt-b) 55%, var(--m-txt-a) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html.tema .t-marca-txt b { font-weight: inherit; display: inline-block; }
html.tema .t-marca-sub { grid-column: 2; font-size: .64rem; font-weight: 700; letter-spacing: .22em; color: var(--m-sub); text-align: left; margin-top: 3px; white-space: nowrap; }

/* entrada: al encender la lámpara (la tarjeta tarda ~1 s en caer) */
html.tema body.t-luz .t-marca-barras i { animation: t-barra .55s cubic-bezier(.22, 1, .36, 1) both; }
html.tema body.t-luz .t-marca-barras i:nth-child(1) { animation-delay: 1.05s; }
html.tema body.t-luz .t-marca-barras i:nth-child(2) { animation-delay: 1.17s; }
html.tema body.t-luz .t-marca-barras i:nth-child(3) { animation-delay: 1.29s; }
html.tema body.t-luz .t-marca-txt b { animation: t-letra .6s cubic-bezier(.22, 1, .36, 1) both; }
html.tema body.t-luz .t-marca-txt b:nth-child(1) { animation-delay: 1.15s; }
html.tema body.t-luz .t-marca-txt b:nth-child(2) { animation-delay: 1.25s; }
html.tema body.t-luz .t-marca-txt b:nth-child(3) { animation-delay: 1.35s; }
html.tema body.t-luz .t-marca-txt { animation: t-brillo-txt 5s ease-in-out 2.1s infinite; }
html.tema body.t-luz .t-marca-sub { animation: t-aparece .6s ease 1.55s both; }
@keyframes t-barra { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes t-letra { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes t-aparece { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes t-brillo-txt { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  html.tema body.t-luz .t-marca-barras i, html.tema body.t-luz .t-marca-txt b, html.tema body.t-luz .t-marca-txt, html.tema body.t-luz .t-marca-sub { animation: none; }
}

/* ================================================================
   MODO NEÓN — <html data-modo="oscuro" data-neon="1">
   Hereda todo el modo oscuro y cambia la paleta a acentos neón con resplandor.
   ================================================================ */
html.tema[data-neon] {
  --t-bg:          #06060e;
  --t-surface:     #0d0d1c;
  --t-surface-2:   #13132a;
  --t-surface-3:   #1a1a36;
  --t-line:        rgba(0, 229, 255, .16);
  --t-line-2:      rgba(0, 229, 255, .28);
  --t-text:        #f2f4ff;
  --t-text-2:      #c9d0ff;
  --t-muted:       #8b93c9;
  --t-faint:       #5d6399;
  --t-primary:     #00e5ff;
  --t-primary-h:   #6ff2ff;
  --t-primary-soft:rgba(0, 229, 255, .12);
  --t-ring:        rgba(0, 229, 255, .45);
  --t-ok:          #39ff88;
  --t-ok-soft:     rgba(57, 255, 136, .12);
  --t-warn:        #ffe14d;
  --t-warn-soft:   rgba(255, 225, 77, .10);
  --t-warn-line:   rgba(255, 225, 77, .4);
  --t-bad:         #ff3d7f;
  --t-bad-soft:    rgba(255, 61, 127, .12);
  --t-fide:        #00ffc6;
  --t-rete:        #ff7a3d;
  --t-shadow:      0 0 0 1px rgba(0, 229, 255, .08), 0 0 18px rgba(0, 229, 255, .07);
  --t-shadow-lg:   0 0 0 1px rgba(0, 229, 255, .2), 0 0 40px rgba(176, 38, 255, .25);
  --t-hdr-a:       #12062e;
  --t-hdr-b:       #3a0f73;
  --rail-bg:       #3a0f73;
  --rail-bg-2:     #12062e;
  --rail-activo:   #00e5ff;
  --rail-ico-on:   #07071a;
}
html.tema[data-neon] .app-header { border-bottom: 1px solid rgba(255, 43, 214, .55); box-shadow: 0 0 18px rgba(255, 43, 214, .35), 0 0 42px rgba(176, 38, 255, .18); }
html.tema[data-neon] .header-title, html.tema[data-neon] .clock-time { text-shadow: 0 0 10px rgba(0, 229, 255, .65); }
html.tema[data-neon] .t-campana { border-color: rgba(255, 43, 214, .7); box-shadow: 0 0 10px rgba(255, 43, 214, .45); }
html.tema[data-neon] .t-rail-forma { filter: drop-shadow(0 0 10px rgba(176, 38, 255, .55)) drop-shadow(0 0 22px rgba(255, 43, 214, .25)); }
html.tema[data-neon] .t-rail-activo { box-shadow: 0 0 14px rgba(0, 229, 255, .9), 0 0 30px rgba(0, 229, 255, .45); }
html.tema[data-neon] .t-rail-item { color: #d8b8ff; }
html.tema[data-neon] .t-rail-item:hover { color: #fff; text-shadow: 0 0 8px #ff2bd6; }
html.tema[data-neon] .card, html.tema[data-neon] .dash-card, html.tema[data-neon] .t-kpi { border-color: rgba(0, 229, 255, .22); }
html.tema[data-neon] .card:hover { box-shadow: 0 0 0 1px rgba(0, 229, 255, .35), 0 0 26px rgba(0, 229, 255, .15); }
html.tema[data-neon] .dash-card-value, html.tema[data-neon] .t-kpi-value { text-shadow: 0 0 12px color-mix(in srgb, var(--kc, #00e5ff) 70%, transparent); }
html.tema[data-neon] .dash-card-total        { --kc: #00e5ff; }
html.tema[data-neon] .dash-card-fidelizacion { --kc: #00ffc6; }
html.tema[data-neon] .dash-card-retencion    { --kc: #ff7a3d; }
html.tema[data-neon] .dash-card-bonos        { --kc: #c06bff; }
html.tema[data-neon] .dash-card::before { box-shadow: 0 0 10px var(--kc); }
html.tema[data-neon] .btn-primary { background: #00e5ff; border-color: #00e5ff; color: #041018; box-shadow: 0 0 14px rgba(0, 229, 255, .55); }
html.tema[data-neon] .btn-primary:hover { background: #6ff2ff; }
html.tema[data-neon] .btn-success { background: #39ff88; border-color: #39ff88; color: #04140a; box-shadow: 0 0 14px rgba(57, 255, 136, .45); }
html.tema[data-neon] input:focus, html.tema[data-neon] select:focus, html.tema[data-neon] textarea:focus { box-shadow: 0 0 0 2px rgba(0, 229, 255, .55), 0 0 16px rgba(0, 229, 255, .35); }
html.tema[data-neon] .nav-tab.active, html.tema[data-neon] .back-tab.active { text-shadow: 0 0 8px rgba(0, 229, 255, .8); }
html.tema[data-neon] th { color: #8fe9ff; }
html.tema[data-neon] .t-tbar span { box-shadow: 0 0 8px currentColor; }
html.tema[data-neon] .t-modo-btn { color: #ffe14d; box-shadow: 0 0 10px rgba(255, 225, 77, .35); }
html.tema[data-neon] ::selection { background: rgba(255, 43, 214, .45); }

/* login neón */
html.tema[data-neon] .login-page { --neu-bg: #0d0d1c; --neu-claro: #1d1d3a; --neu-osc: #030308; --neu-txt: #f2f4ff; --neu-txt-2: #c9d0ff; --neu-mut: #8b93c9; --luz: rgba(0, 229, 255, .20); }
html.tema[data-neon] body.t-luz .login-card { box-shadow: 14px 14px 30px var(--neu-osc), -10px -10px 26px var(--neu-claro), 0 0 0 1px rgba(0, 229, 255, .35), 0 0 36px rgba(176, 38, 255, .35); }
html.tema[data-neon] .login-btn { background: linear-gradient(135deg, #00e5ff, #b026ff); color: #fff; box-shadow: 0 0 18px rgba(0, 229, 255, .55), 0 0 36px rgba(176, 38, 255, .35); }
html.tema[data-neon] .login-page input:focus { box-shadow: inset 5px 5px 10px var(--neu-osc), inset -5px -5px 10px var(--neu-claro), 0 0 0 2px rgba(0, 229, 255, .7), 0 0 16px rgba(0, 229, 255, .4); }
html.tema[data-neon] body.t-luz .t-foco { fill: #e6fbff; filter: drop-shadow(0 0 14px #00e5ff); }
html.tema[data-neon] .t-halo { background: radial-gradient(circle, rgba(0, 229, 255, .7) 0%, rgba(176, 38, 255, .2) 40%, transparent 70%); }
html.tema[data-neon] .t-haz { background: linear-gradient(to bottom, rgba(0, 229, 255, .32), rgba(176, 38, 255, 0) 85%); }
html.tema[data-neon] .t-marca { --m-txt-a: #ffffff; --m-txt-b: #7ff4ff; --m-sub: #c9d0ff; --m-brillo: #ff5ce6; }
html.tema[data-neon] .t-marca-txt { filter: drop-shadow(0 0 8px rgba(0, 229, 255, .8)) drop-shadow(0 0 20px rgba(176, 38, 255, .5)); }
html.tema[data-neon] .t-marca-barras i { box-shadow: 0 0 10px currentColor; }
html.tema[data-neon] .t-marca-barras i:nth-child(1) { background: #39ff88; color: #39ff88; }
html.tema[data-neon] .t-marca-barras i:nth-child(2) { background: #00e5ff; color: #00e5ff; }
html.tema[data-neon] .t-marca-barras i:nth-child(3) { background: #ff3d7f; color: #ff3d7f; }
@media (prefers-reduced-motion: reduce) { html.tema[data-neon] * { text-shadow: none !important; } }
html.tema .t-btn-emergencia { color: var(--t-bad) !important; border-color: color-mix(in srgb, var(--t-bad) 45%, var(--t-line-2)); }
html.tema .t-btn-emergencia:hover { background: var(--t-bad-soft); }