/* ============================================================================
 * app.css — Executive Design System & Visual Engine (Suave & Refined Edition)
 *
 * Sistema de diseño de nivel SaaS Enterprise / Dirección Minera.
 * Paleta suave, armónica y descansada para la vista.
 * ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Tipografía -------------------------------------------------------- */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- Paleta de datos suave y armónica (Desaturada, elegante y sobria) -- */
  --viz-series-1: #4f80e1;   /* Azul zafiro suave / Ingresos */
  --viz-series-2: #e07a5f;   /* Terracota cálido / Salidas   */
  --viz-series-3: #3d9970;   /* Verde salvia / Conforme      */
  --viz-series-4: #d4a373;   /* Arena ocre suave             */
  --viz-series-5: #b56576;   /* Rosa ceniza tenue            */
  --viz-series-6: #606c38;   /* Oliva tenue                  */
  --viz-series-7: #7d8597;   /* Pizarra lavanda              */
  --viz-series-8: #d65a5a;   /* Coral suave                  */

  --viz-surface: #0f172a;
  --viz-ink-primary: #f8fafc;
  --viz-ink-secondary: #cbd5e1;
  --viz-ink-muted: #8193ac;
  --viz-grid: rgba(255, 255, 255, 0.05);
  --viz-axis: rgba(255, 255, 255, 0.1);

  /* --- Superficies y Colores (Modo Oscuro Suave) ------------------------- */
  --plane: #090d16;
  --surface: #0f172a;
  --surface-soft: #141d2e;
  --surface-elevated: #1a2538;
  --ink: #f8fafc;
  --ink-2: #cbd5e1;
  --ink-3: #8193ac;
  --line: rgba(255, 255, 255, 0.06);
  --line-light: rgba(255, 255, 255, 0.03);
  --line-strong: rgba(255, 255, 255, 0.12);

  --accent: #4f80e1;
  --accent-hover: #6896ee;
  --accent-soft: rgba(79, 128, 225, 0.12);
  --accent-border: rgba(79, 128, 225, 0.28);

  --danger: #d65a5a;
  --danger-hover: #e07070;
  --danger-soft: rgba(214, 90, 90, 0.12);

  --good: #3d9970;
  --good-soft: rgba(61, 153, 112, 0.12);
  --warn: #d4a373;
  --warn-soft: rgba(212, 163, 115, 0.12);

  /* --- Barra Lateral (Suave, aterciopelada y de alto contraste) ---------- */
  --nav-bg: #0b111e;
  --nav-bg-deep: #070c16;
  --nav-surface: rgba(255, 255, 255, 0.025);
  --nav-ink: #94a3b8;
  --nav-ink-muted: #64748b;
  --nav-hover: rgba(255, 255, 255, 0.04);
  --nav-active-bg: rgba(79, 128, 225, 0.16);
  --nav-active-border: rgba(79, 128, 225, 0.32);
  --nav-accent: #60a5fa;
  --nav-line: rgba(255, 255, 255, 0.06);

  /* --- Elevación y Dimensiones ------------------------------------------ */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 16px -2px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 36px -4px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 24px -2px rgba(79, 128, 225, 0.18);

  --sidebar-w: 292px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
 * Modo Claro (Opcional por selector manual)
 * ========================================================================== */

:root[data-theme="light"] {
  color-scheme: light;
  --viz-series-1: #3b71ca;
  --viz-series-2: #d97757;
  --viz-series-3: #40916c;
  --viz-series-4: #d4a373;
  --viz-series-5: #b56576;
  --viz-series-6: #606c38;
  --viz-series-7: #7d8597;
  --viz-series-8: #d65a5a;

  --viz-surface: #ffffff;
  --viz-ink-primary: #1e293b;
  --viz-ink-secondary: #475569;
  --viz-ink-muted: #94a3b8;
  --viz-grid: #f1f5f9;
  --viz-axis: #e2e8f0;

  --plane: #f8fafc;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --surface-elevated: #ffffff;
  --ink: #1e293b;
  --ink-2: #475569;
  --ink-3: #94a3b8;
  --line: #eef1f5;
  --line-light: #f8fafc;
  --line-strong: #e2e8f0;

  --accent: #3b71ca;
  --accent-hover: #2b5cb8;
  --accent-soft: rgba(59, 113, 202, 0.08);
  --accent-border: rgba(59, 113, 202, 0.2);

  --danger: #d65a5a;
  --danger-hover: #c44747;
  --danger-soft: rgba(214, 90, 90, 0.08);

  --good: #40916c;
  --good-soft: rgba(64, 145, 108, 0.08);
  --warn: #d4a373;
  --warn-soft: rgba(212, 163, 115, 0.12);

  /* Las sombras del tema oscuro son negro al 25-45%: sobre fondo blanco se
     leen como gris sucio en vez de como profundidad. En claro la sombra tiene
     que ser mucho más tenue y teñida de azul frío, que es como se comporta la
     luz sobre una superficie clara. */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 16px 32px -8px rgba(15, 23, 42, 0.14), 0 4px 12px -4px rgba(15, 23, 42, 0.06);
  --shadow-glow: 0 0 24px -2px rgba(59, 113, 202, 0.14);
}

/* ==========================================================================
 * Base & Reset
 * ========================================================================== */

* { box-sizing: border-box; }

/* El atributo hidden se pone por JS para ocultar 21 elementos en todo el
   sistema (vistas, campos, avisos...). La regla del navegador que lo cumple,
   [hidden] { display:none }, tiene la misma especificidad que cualquier clase
   que fije display (.view, .login-field, .card...), y en caso de empate gana
   la del autor: un elemento marcado hidden podia quedar visible igual si su
   propia clase le ponia display:flex. Confirmado en vivo con el campo de
   repetir contraseña, que se veia aunque el atributo estuviera puesto.
   Con !important, hidden gana siempre, sea cual sea la clase. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--plane);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .brand b, .tt-value {
  font-family: var(--font-display);
}

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

.ico {
  display: inline-block;
  width: 18px; height: 18px;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

/* ==========================================================================
 * Barra Lateral (Suave y Aterciopelada)
 * ========================================================================== */

.sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100vh;
  display: flex; flex-direction: column;
  background: var(--nav-bg);
  color: var(--nav-ink);
  border-right: 1px solid var(--nav-line);
  z-index: 50;
  user-select: none;
}

.brand {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
  background: var(--nav-bg-deep);
  border-bottom: 1px solid var(--nav-line);
}

.brand-icon-box {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(79, 128, 225, 0.25) 0%, rgba(30, 58, 138, 0.45) 100%);
  border: 1px solid rgba(79, 128, 225, 0.35);
  display: grid; place-items: center;
  color: #60a5fa;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  flex: none;
}
.brand-icon-box .ico { width: 20px; height: 20px; }

.brand-text { display: flex; flex-direction: column; }
.brand-title { display: flex; align-items: center; gap: 7px; }
.brand-title b { font-size: 14px; font-weight: 750; letter-spacing: 0.04em; color: #ffffff; line-height: 1.2; }

.live-dot {
  width: 6.5px; height: 6.5px; border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 7px rgba(16, 185, 129, 0.6);
  animation: pulse-dot 3s infinite ease-in-out;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.2); opacity: 0.6; }
}

.brand-sub {
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--nav-ink-muted); font-weight: 600; margin-top: 1px;
}

.nav {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 16px 12px;
  display: flex; flex-direction: column; gap: 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.nav::-webkit-scrollbar { width: 5px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
}
.nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}

.nav-group { display: flex; flex-direction: column; gap: 2px; }

.nav-title {
  padding: 0 10px 7px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--nav-ink-muted);
}

.nav-item {
  position: relative;
  width: 100%;
  display: flex; align-items: center; gap: 11px;
  padding: 8.5px 12px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--nav-ink);
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 450; text-align: left;
  cursor: pointer;
  transition: all 0.14s var(--ease);
}

.nav-item .ico { width: 17px; height: 17px; opacity: 0.75; color: currentColor; flex: none; }
.nav-item > span:first-of-type { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-item:hover:not(:disabled) {
  background: var(--nav-hover);
  color: #ffffff;
}
.nav-item:hover:not(:disabled) .ico { opacity: 0.95; }

.nav-item.active {
  background: var(--nav-active-bg) !important;
  color: #ffffff !important;
  font-weight: 550;
  border: 1px solid var(--nav-active-border);
  border-left: 3.5px solid #4f80e1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.nav-item.active .ico {
  color: var(--nav-accent);
  opacity: 1;
}

.nav-badge {
  padding: 1.5px 7px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08); color: #cbd5e1;
  font-size: 10.5px; font-weight: 650; font-variant-numeric: tabular-nums;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-badge.warn {
  background: rgba(212, 163, 115, 0.18); color: #f5b778;
  border-color: rgba(212, 163, 115, 0.35);
}

/* ==========================================================================
 * Cabecera Superior (Topbar Glassmorphism)
 * ========================================================================== */

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 28px; height: 60px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 0.2s;
}

.crumb-wrapper { display: flex; align-items: center; gap: 8px; flex: 1; }
.crumb {
  font-size: 13px; font-weight: 550;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 6px;
}

.topbar-actions { display: flex; align-items: center; gap: 10px; }

.status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-border);
  font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums;
}

.icon-btn {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--ink-2);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.icon-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-border);
  transform: translateY(-1px);
}
.icon-btn:active { transform: translateY(0); }

.only-narrow { display: none; }

/* ==========================================================================
 * Contenido Principal & Encabezados de Página
 * ========================================================================== */

.content {
  padding: 28px 32px 70px;
  max-width: 1540px; width: 100%;
  margin: 0 auto;
}

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
}

.page-head-titles h1 {
  margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -0.025em;
  display: flex; align-items: center; gap: 8px;
}
.page-head-titles h1::before {
  content: ''; display: inline-block;
  width: 4px; height: 20px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), #2563eb);
}

.page-head-titles p {
  margin: 4px 0 0 12px;
  font-size: 13px; color: var(--ink-3); font-weight: 450;
}

.page-actions { display: flex; align-items: center; gap: 10px; }

/* ==========================================================================
 * Botones y Controles
 * ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8.5px 16px; border-radius: 9px;
  background: var(--accent); color: #ffffff;
  font-size: 13px; font-weight: 600;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.15s var(--ease);
}
.btn:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn.ghost {
  background: var(--surface); color: var(--ink-2);
  border-color: var(--line);
  box-shadow: var(--shadow-xs);
}
.btn.ghost:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-border);
}

.btn.danger {
  background: var(--danger); color: #ffffff;
}
.btn.danger:hover:not(:disabled) {
  background: var(--danger-hover);
}

.btn.ghost.danger {
  background: var(--surface); color: var(--danger);
  border-color: var(--line);
}
.btn.ghost.danger:hover:not(:disabled) {
  background: var(--danger-soft);
  border-color: var(--danger);
}

/* ==========================================================================
 * Filtros de Periodos y Series (Desplegables Ejecutivos)
 * ========================================================================== */

.filters {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 24px; flex-wrap: wrap;
}

.filter { position: relative; }

.filter-summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-2); font-size: 12.5px; font-weight: 550;
  cursor: pointer; list-style: none; user-select: none;
  box-shadow: var(--shadow-xs);
  transition: all 0.15s var(--ease);
}
.filter-summary::-webkit-details-marker { display: none; }
.filter-summary::marker { display: none; }

.filter-summary:hover {
  border-color: var(--line-strong);
  background: var(--surface-soft);
  color: var(--ink);
}

.filter[open] > .filter-summary {
  border-color: var(--accent);
  color: #ffffff;
  background: var(--surface-elevated);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.filter-label {
  font-weight: 600; color: var(--ink);
}

.filter-summary .count {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.5px 7px; border-radius: var(--radius-pill);
  background: var(--surface-soft); color: var(--ink-3);
  font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums;
  border: 1px solid var(--line);
}

.filter-summary .count.has-filter {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-border);
  font-weight: 700;
}

.filter-chevron {
  width: 14px; height: 14px; color: var(--ink-3);
  transition: transform 0.2s var(--ease);
}
.filter[open] > .filter-summary .filter-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

/* Menú Desplegable */
.filter-menu {
  position: absolute; z-index: 50; top: calc(100% + 6px); left: 0;
  min-width: 250px; max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 8px;
  box-shadow: var(--shadow-lg);
  animation: menu-appear 0.15s var(--ease) both;
  display: flex; flex-direction: column; gap: 6px;
}

.filter-menu-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px 6px;
  border-bottom: 1px solid var(--line-light);
}

.filter-menu-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-3);
}

.filter-action-btn {
  font-size: 11px; color: var(--accent); font-weight: 600;
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
  border: 0; background: transparent;
  transition: background 0.12s;
}
.filter-action-btn:hover {
  background: var(--accent-soft);
}

.filter-options-list {
  max-height: 240px; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 1px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.filter-options-list::-webkit-scrollbar { width: 4px; }
.filter-options-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
}

.filter-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 7px;
  font-size: 12.5px; color: var(--ink);
  cursor: pointer; user-select: none;
  transition: background 0.12s, color 0.12s;
}
.filter-item:hover {
  background: var(--accent-soft);
  color: #ffffff;
}

.filter-item input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--accent);
  cursor: pointer; flex: none;
}

.filter-item-text {
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.filter-reset {
  padding: 6.5px 13px; font-size: 12px; font-weight: 600;
  border-radius: 8px;
}

/* ==========================================================================
 * Tarjetas de Superficie (Cards) & Dropzone
 * ========================================================================== */

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 24px 28px;
  margin-bottom: 22px;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

.section-header-block { margin-bottom: 18px; }
.section-title {
  margin: 0 0 4px; font-size: 17px; font-weight: 750;
  color: var(--ink); letter-spacing: -0.015em;
}
.section-title.flush { margin-bottom: 4px; }
.section-hint { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 1.5; }

/* --- Cierre del mes logístico --------------------------------------------- */

.cutoff-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.cutoff-head .section-title { margin-bottom: 4px; }

.cutoff-field { display: flex; flex-direction: column; gap: 6px; flex: none; }
.cutoff-field span {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.cutoff-field input {
  width: 84px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: center;
}
.cutoff-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.cutoff-note {
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-3); line-height: 1.55;
}
.cutoff-note b { color: var(--ink-2); font-weight: 600; }

/* ==========================================================================
 * Panel de Tipos de Cambio (Executive Rates Table)
 * ========================================================================== */

.rates-summary-card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-soft) 100%);
  border: 1px solid var(--line-strong);
  margin-bottom: 20px;
}

.rates-head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}

.rates-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--accent);
  margin-bottom: 4px;
}

.rates-status {
  font-size: 19px; font-weight: 800; color: var(--ink);
  letter-spacing: -0.02em; margin-bottom: 4px;
}

.rates-subtext {
  margin: 0; font-size: 12.5px; color: var(--ink-3);
}

.rates-table {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  margin-top: 14px;
}

.rates-table-head {
  display: grid;
  grid-template-columns: 160px 180px 140px 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line-strong);
}

.rates-th {
  font-size: 11px; font-weight: 750; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-3);
}

.rate-row {
  display: grid;
  grid-template-columns: 160px 180px 140px 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  transition: background 0.14s var(--ease);
}

.rate-row:last-child {
  border-bottom: 0;
}

.rate-row:hover {
  background: var(--surface-soft);
}

.rate-cell {
  display: flex; align-items: center;
}

.rate-cell-date {
  gap: 8px; font-weight: 600; font-size: 13px; color: var(--ink);
}

.rate-date-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: none;
}

.rate-input-box {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 3px 8px;
  width: 130px;
  transition: all 0.15s var(--ease);
}

[data-theme="light"] .rate-input-box {
  background: #ffffff;
  border-color: #cbd5e1;
}

.rate-input-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
  background: var(--surface);
}

.rate-input-prefix {
  font-size: 12px; font-weight: 700; color: var(--ink-3);
}

.rate-number-input {
  width: 100%; border: 0; background: transparent;
  color: var(--ink); font-family: var(--font-sans);
  font-size: 13.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  outline: none; padding: 3px 0;
}

.rate-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em;
}

.badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
}

.badge-sunat {
  background: rgba(79, 128, 225, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(79, 128, 225, 0.3);
}
.badge-sunat .badge-dot { background: #60a5fa; }

.badge-manual {
  background: rgba(212, 163, 115, 0.15);
  color: #d4a373;
  border: 1px solid rgba(212, 163, 115, 0.3);
}
.badge-manual .badge-dot { background: #d4a373; }

.badge-pending {
  background: rgba(224, 122, 95, 0.15);
  color: #e07a5f;
  border: 1px solid rgba(224, 122, 95, 0.3);
}
.badge-pending .badge-dot { background: #e07a5f; }

.rate-cell-status {
  font-size: 12px; color: var(--ink-3);
}

.button-row { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

.danger-zone { border-color: rgba(214, 90, 90, 0.25); background: rgba(214, 90, 90, 0.02); }
.danger-title { color: var(--danger); }

/* Dropzone */
.dropzone-card { padding: 0; overflow: hidden; }
.dropzone {
  padding: 44px 28px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-soft);
  text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  transition: all 0.2s var(--ease);
}
.dropzone:hover, .dropzone.over {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 24px rgba(79, 128, 225, 0.05);
}

.dropzone-icon-wrap {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--accent);
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  transition: transform 0.2s var(--ease);
}
.dropzone:hover .dropzone-icon-wrap {
  transform: scale(1.08) translateY(-2px);
  box-shadow: var(--shadow-md);
}
.dropzone-icon-wrap .ico { width: 26px; height: 26px; }

.dropzone-title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--ink); }
.dropzone-hint { margin: 0 0 16px; color: var(--ink-3); font-size: 13px; max-width: 60ch; }
.dropzone-button-wrap { margin-top: 4px; }

.log { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.log-item {
  padding: 10px 14px; border-radius: 8px; font-size: 13px;
  border-left: 4px solid; background: var(--surface-soft);
  display: flex; align-items: center; gap: 8px;
}
.log-item.ok { border-color: var(--good); background: var(--good-soft); color: var(--ink); }
.log-item.error { border-color: var(--danger); background: var(--danger-soft); color: var(--ink); }
.log-item.info { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
/* El dato se guardó bien en este equipo pero no se pudo compartir: ni error
   (no se perdió nada) ni éxito (el resto del equipo aún no lo ve). */
.log-item.warn { border-color: var(--warn); background: var(--warn-soft); color: var(--ink); }

.loaded-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin-bottom: 14px;
}
.loaded-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.loaded-icon-box {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; flex: none;
}
.loaded-info { display: flex; flex-direction: column; min-width: 0; }
.loaded-title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.loaded-meta { font-size: 12px; color: var(--ink-3); }

/* ==========================================================================
 * Tarjetas de Métricas (KPIs Ejecutivos Suaves)
 * ========================================================================== */

.dashboard { display: flex; flex-direction: column; gap: 24px; }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.kpi {
  /* Color de la serie que respalda al indicador. Se sobreescribe por tarjeta
     desde app.js; el valor por defecto mantiene coherente a las que no tienen
     una serie detrás. */
  --kpi-accent: var(--accent);

  position: relative; isolation: isolate;
  /* La cifra se dimensiona contra el ancho de la tarjeta (unidad cqi), no
     contra el de la ventana: un importe largo como "S/ 941,528.91" se
     encogía o partía en dos líneas cuando el tamaño era fijo. */
  container-type: inline-size;
  display: flex; flex-direction: column;
  padding: 20px 22px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              border-color 0.25s var(--ease);
}

/* Halo de color en la esquina superior, detrás del icono. Sustituye a la
   franja sólida: da la misma pista cromática sobre qué serie es sin cortar la
   tarjeta con una línea dura. Solo en los indicadores que tienen una serie
   real detrás (ver item.key en app.js), para no fingir un vínculo con un
   gráfico que no existe en los calculados. */
.kpi.has-accent::before {
  content: '';
  position: absolute; z-index: -1;
  top: -70px; right: -70px; width: 190px; height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
              color-mix(in srgb, var(--kpi-accent) 30%, transparent), transparent);
  opacity: 0.5;
  transition: opacity 0.25s var(--ease);
  pointer-events: none;
}

.kpi:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--kpi-accent) 28%, var(--line));
  box-shadow: var(--shadow-md),
              0 10px 30px -12px color-mix(in srgb, var(--kpi-accent) 45%, transparent);
}
.kpi.has-accent:hover::before { opacity: 0.85; }

.kpi-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 14px;
}

.kpi .label {
  display: flex; align-items: center; gap: 7px;
  padding-top: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em;
  line-height: 1.35; text-transform: uppercase; color: var(--ink-3);
}

.kpi .key {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--kpi-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kpi-accent) 16%, transparent);
}

.kpi-top .ico {
  width: 34px; height: 34px; padding: 8px;
  flex: none; border-radius: 10px;
  background: color-mix(in srgb, var(--kpi-accent) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--kpi-accent) 20%, transparent);
  color: var(--kpi-accent);
  stroke-width: 1.9;
}

/* Un indicador derivado (una diferencia, un conteo) no corresponde a ninguna
   serie del gráfico, así que su icono va en gris: el color queda reservado
   para los que sí se pueden rastrear hasta una barra o una línea. */
.kpi:not(.has-accent) .kpi-top .ico {
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--ink-3);
}

.kpi .value {
  font-family: var(--font-display);
  font-size: clamp(20px, 11cqi, 29px);
  font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.1; margin: 0 0 9px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* El pie sigue al valor en el flujo natural en vez de empujarse al fondo: así
   la línea de detalle queda a la misma altura en todas las tarjetas de la
   fila, tengan minigráfico o no. Es el minigráfico el que se ancla abajo. */
.kpi-foot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}

.kpi .sub { font-size: 12px; color: var(--ink-3); font-weight: 500; line-height: 1.45; }

.kpi-delta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 650; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--surface-soft);
  border: 1px solid var(--line);
}
.kpi-delta .arrow { font-size: 11px; line-height: 1; font-weight: 800; }

.kpi-nota {
  font-size: 11px; color: var(--ink-3); font-style: italic;
  border-bottom: 1px dotted var(--line-strong); cursor: help;
}

.kpi-spark {
  margin-top: auto; padding-top: 16px; height: 36px;
  /* El trazo hereda el color de la serie, así que el minigráfico y el halo de
     la esquina hablan del mismo dato. */
  color: var(--kpi-accent);
}
.kpi-spark svg { display: block; width: 100%; height: 36px; }

/* ==========================================================================
 * Módulo de usuarios
 * ========================================================================== */

.usuarios-lista { display: flex; flex-direction: column; }

.usuario-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 13px 2px;
  border-bottom: 1px solid var(--line);
}
.usuario-fila:last-child { border-bottom: none; }

.usuario-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.usuario-nombre {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 650; color: var(--ink);
}

.usuario-tag {
  padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}

.usuario-fecha { font-size: 12px; color: var(--ink-3); }

.usuario-quitar { flex: none; font-size: 12.5px; padding: 7px 12px; }

/* ==========================================================================
 * Cambio de contraseña
 * ========================================================================== */

.clave-form { display: flex; flex-direction: column; gap: 16px; }

.clave-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 18px;
}

.clave-campo { display: flex; flex-direction: column; gap: 6px; }

.clave-campo span {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}

.clave-campo input {
  padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-soft); color: var(--ink);
  font: inherit; font-size: 13.5px;
}
.clave-campo input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
  border-color: transparent;
}

.clave-aviso {
  padding: 10px 13px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.5;
  border: 1px solid color-mix(in srgb, var(--good) 38%, transparent);
  background: var(--good-soft);
  color: var(--ink-2);
}
.clave-aviso.malo {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: var(--danger-soft);
}

.clave-nota {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3); line-height: 1.6;
}
.clave-nota code {
  padding: 1px 5px; border-radius: 4px;
  background: var(--surface-soft); border: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-2);
}

/* ==========================================================================
 * Bloques de Gráficos (Data Viz Containers)
 * ========================================================================== */

.block {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.block:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

.block-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line-light);
}

.block-head h3 { font-size: 15.5px; font-weight: 750; margin: 0; color: var(--ink); }
.block-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-3); }

.block-tools { display: flex; gap: 7px; flex: none; align-items: center; }
.block-tools .btn { padding: 6px 12px; font-size: 12px; }

/* Menú de configuración de gráficos */
.chart-menu { position: relative; }
.chart-menu > summary {
  list-style: none; display: grid; place-items: center;
  width: 32px; height: 30px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--ink-2);
  transition: all 0.15s;
}
.chart-menu > summary::-webkit-details-marker { display: none; }
.chart-menu > summary .ico { width: 16px; height: 16px; }
.chart-menu:hover > summary { border-color: var(--line-strong); background: var(--surface-soft); }
.chart-menu[open] > summary {
  background: var(--accent-soft); color: var(--accent);
  border-color: var(--accent);
}

.chart-menu-panel {
  position: absolute; z-index: 35; top: calc(100% + 8px); right: 0;
  width: 280px; padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: var(--shadow-lg);
  animation: menu-appear 0.18s var(--ease) both;
  display: flex; flex-direction: column; gap: 12px;
}

/* Labels del menú */
.menu-label {
  font-size: 11px; font-weight: 750;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}

/* Opciones de Forma */
.form-options { display: flex; gap: 6px; margin-bottom: 4px; }
.form-option {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 6px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-soft); color: var(--ink-2);
  font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all 0.14s var(--ease);
}
.form-option .ico { width: 18px; height: 18px; }
.form-option:hover { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.form-option.active {
  background: var(--accent-soft); color: var(--accent);
  border-color: var(--accent-border);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Opciones de Color (Paleta) */
.color-options { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.color-option {
  display: flex; align-items: center; gap: 2px;
  padding: 3px; border: 2px solid transparent; border-radius: 8px;
  background: var(--surface-soft);
  cursor: pointer; transition: all 0.14s var(--ease);
}
.color-option:hover { border-color: var(--line-strong); transform: scale(1.08); }
.color-option.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.swatch {
  width: 20px; height: 20px; border-radius: 5px;
  display: inline-block;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Botón de restablecer */
.menu-reset {
  font-size: 12px; font-weight: 600;
  color: var(--ink-3); cursor: pointer;
  padding: 6px 0; border: 0; background: transparent;
  transition: color 0.12s;
}
.menu-reset:hover { color: var(--accent); }

/* Legacy CSS classes (mantener por retrocompatibilidad) */
.chart-menu-section { margin-bottom: 12px; }
.chart-menu-section:last-child { margin-bottom: 0; }
.chart-menu-section label {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}

.chart-form-options { display: flex; gap: 6px; }
.chart-form-btn {
  flex: 1; display: grid; place-items: center;
  padding: 6px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface-soft); color: var(--ink-2);
  cursor: pointer; transition: all 0.12s;
}
.chart-form-btn:hover { border-color: var(--line-strong); background: var(--surface); }
.chart-form-btn.active {
  background: var(--accent-soft); color: var(--accent);
  border-color: var(--accent);
}

.chart-palette-options { display: flex; gap: 6px; flex-wrap: wrap; }
.chart-palette-btn {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer; transition: transform 0.12s;
}
.chart-palette-btn:hover { transform: scale(1.15); }
.chart-palette-btn.active { box-shadow: 0 0 0 2px var(--accent); }

/* SVG Chart Canvas */
.block-canvas { padding: 18px 22px 20px; overflow-x: auto; }
.block-canvas svg { display: block; width: 100%; height: auto; }

/* Animaciones SVG */
@keyframes viz-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes viz-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.chart-columns .viz-fill {
  transform-box: fill-box; transform-origin: bottom;
  animation: viz-grow 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.chart-bars .viz-fill, .chart-share .viz-fill {
  transform-box: fill-box; transform-origin: left;
  animation: viz-grow 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.chart-line .viz-fill { animation: viz-fade 0.5s ease both; }

.block-note-text {
  position: relative;
  margin: 0 22px 18px;
  padding: 16px 20px 16px 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--surface-soft) 0%, var(--surface) 100%);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  font-size: 13px; color: var(--ink-2); line-height: 1.7;
  letter-spacing: 0.005em;
}

.block-note-text::before {
  content: '📊';
  position: absolute; left: 14px; top: 15px;
  font-size: 16px; line-height: 1;
}

/* ==========================================================================
 * Tablas de Datos
 * ========================================================================== */

.block-table { padding: 8px 22px 20px; overflow-x: auto; }
.block-table table {
  border-collapse: separate; border-spacing: 0;
  width: 100%; font-size: 13px;
}
.block-table th {
  text-align: left; padding: 10px 14px;
  font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); border-bottom: 2px solid var(--line);
  background: var(--surface); position: sticky; top: 0;
}
.block-table td {
  padding: 9px 14px; border-bottom: 1px solid var(--line-light);
  color: var(--ink);
}
.block-table tr:hover td { background: var(--accent-soft); }
.block-table td.num, .block-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.block-table tr:last-child td { border-bottom: 0; }
.block-table tfoot td { font-weight: 750; border-top: 2px solid var(--line); color: var(--ink); }

.block-note { padding: 22px; }
.block-note h3 { font-size: 15px; margin-bottom: 10px; }
.block-note p { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }

.empty { padding: 50px 20px; text-align: center; color: var(--ink-3); font-size: 13.5px; }

/* ==========================================================================
 * Tooltip Flotante (Glassmorphism Interactivo)
 * ========================================================================== */

.viz-tooltip {
  position: fixed; z-index: 200; pointer-events: none;
  min-width: 160px; max-width: 320px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 13px;
  transition: opacity 0.12s, transform 0.12s;
}

.viz-tooltip .tt-label {
  color: var(--ink-3); font-size: 11.5px; font-weight: 600;
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em;
}
.viz-tooltip .tt-value {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 750;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.viz-tooltip .tt-series {
  display: flex; align-items: center; gap: 7px;
  color: var(--ink-2); margin-top: 4px; font-size: 12px; font-weight: 550;
}
.viz-tooltip .tt-key { width: 10px; height: 10px; border-radius: 2.5px; flex: none; }

.viz-tooltip .tt-share-tag {
  display: inline-block;
  margin-top: 6px; padding: 2px 7px; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Gráfico Donut y Badges */
.chart-donut .viz-fill {
  transition: transform 0.2s var(--ease), opacity 0.15s;
  transform-origin: center;
}
.chart-donut .viz-mark:hover .viz-fill {
  transform: scale(1.03);
  opacity: 0.9;
}

.viz-badge rect {
  transition: transform 0.15s;
}

/* ==========================================================================
 * Notificaciones Toast
 * ========================================================================== */

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 300; padding: 12px 22px; border-radius: 10px;
  background: #0f172a; color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  max-width: min(580px, 90vw);
  animation: toast-in 0.22s var(--ease) both;
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.toast.error {
  background: var(--danger);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
 * Responsive (Pantallas Angostas)
 * ========================================================================== */

@media (max-width: 1080px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; z-index: 60; left: 0; top: 0;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform 0.25s var(--ease);
  }
  .sidebar.open { transform: none; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); }
  .only-narrow { display: grid; }
  .content { padding: 20px 16px 60px; }
  .topbar { padding: 0 16px; }
}

/* ==========================================================================
 * Formato de Impresión / PDF
 * ========================================================================== */

@media print {
  @page { size: A4 portrait; margin: 12mm; }

  :root {
    --plane: #ffffff; --surface: #ffffff; --surface-soft: #ffffff;
    --viz-surface: #ffffff; --ink: #000000; --ink-2: #222222; --ink-3: #555555;
    --line: #e2e8f0; --line-strong: #cbd5e1;
  }

  body { background: #ffffff; font-size: 10.5px; }
  .sidebar, .topbar, .filters, .page-actions, .block-tools, .toast { display: none !important; }
  .app { display: block; }
  .content { padding: 0; max-width: none; }
  .page-head { margin-bottom: 12px; }
  .page-head-titles h1::before { display: none; }

  .dashboard { gap: 14px; }
  .block, .kpi, .kpi-row { break-inside: avoid; box-shadow: none !important; border-color: #cbd5e1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
 * Pantalla de Inicio de Sesión Ejecutiva (Login Glassmorphism)
 * ========================================================================== */

.login-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: #060911;
  padding: 20px;
  animation: login-fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.login-overlay[hidden] {
  display: none !important;
}

.login-overlay.hiding {
  animation: login-fade-out 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
  pointer-events: none;
}

@keyframes login-fade-in {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes login-fade-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.98); }
}

.login-backdrop {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}

.login-glow-1 {
  position: absolute; top: 15%; left: 25%;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 128, 225, 0.14) 0%, rgba(79, 128, 225, 0) 70%);
  filter: blur(50px);
}

.login-glow-2 {
  position: absolute; bottom: 15%; right: 25%;
  width: 450px; height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0) 70%);
  filter: blur(50px);
}

.login-card {
  position: relative; z-index: 10;
  width: 430px; max-width: 100%;
  padding: 34px 32px 28px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7), 0 0 35px rgba(79, 128, 225, 0.12);
  display: flex; flex-direction: column;
}

.login-brand {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin-bottom: 22px;
}

.login-brand-icon {
  width: 48px; height: 48px;
  border-radius: 13px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: grid; place-items: center;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4);
  margin-bottom: 12px;
}
.login-brand-icon .ico { width: 26px; height: 26px; }

.login-brand-title {
  display: flex; align-items: center; gap: 8px;
}
.login-brand-title b {
  font-size: 20px; font-weight: 800; letter-spacing: 0.04em;
  color: #ffffff; line-height: 1.2;
}

.login-brand-sub {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #64748b; font-weight: 600; margin-top: 4px;
}

.login-divider {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  margin-bottom: 22px;
}

.login-form {
  display: flex; flex-direction: column; gap: 16px;
}

/* --- Avisos de la pantalla de acceso -------------------------------------- */
/* La pantalla de acceso tiene su propio fondo oscuro fijo, no sigue al tema,
   asi que estos colores van explicitos y no por variables. */

.login-aviso {
  margin-bottom: 20px; padding: 12px 14px;
  border: 1px solid rgba(79, 128, 225, 0.3);
  border-left-width: 3px;
  border-radius: 9px;
  background: rgba(79, 128, 225, 0.1);
  font-size: 12.5px; line-height: 1.55; color: #cbd5e1;
}
.login-aviso b { display: block; margin-bottom: 3px; color: #e8eefc; font-weight: 700; }
.login-aviso i { font-style: normal; color: #e8eefc; font-weight: 600; }

/* El aviso de "esto no verifica nada" tiene que distinguirse del informativo. */
.login-aviso.alerta {
  border-color: rgba(212, 163, 115, 0.42);
  background: rgba(212, 163, 115, 0.12);
}
.login-aviso.alerta b { color: #f0d9bd; }
.login-aviso.alerta i { color: #f0d9bd; }

.login-error {
  padding: 10px 13px; border-radius: 8px;
  border: 1px solid rgba(214, 90, 90, 0.4);
  background: rgba(214, 90, 90, 0.13);
  color: #f3c4c4; font-size: 12.5px; line-height: 1.5;
}

.login-field {
  display: flex; flex-direction: column; gap: 6px;
}

.login-field label {
  font-size: 11.5px; font-weight: 650;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #94a3b8;
}

.login-input-wrap {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  padding: 3px 12px;
  transition: all 0.16s var(--ease);
}

.login-input-wrap:focus-within {
  border-color: #4f80e1;
  box-shadow: 0 0 0 3px rgba(79, 128, 225, 0.22);
  background: rgba(0, 0, 0, 0.5);
}

.login-input-wrap .ico {
  color: #64748b; width: 18px; height: 18px; flex: none;
}

.login-input-wrap select, .login-input-wrap input {
  width: 100%; border: 0; background: transparent;
  color: #ffffff; font-family: var(--font-sans);
  font-size: 13.5px; font-weight: 500;
  outline: none; padding: 8px 0;
}

.login-input-wrap select option {
  background: #0f172a; color: #f8fafc;
}

.login-toggle-pass {
  padding: 4px; border: 0; background: transparent;
  color: #64748b; cursor: pointer; display: grid; place-items: center;
  transition: color 0.14s;
}
.login-toggle-pass:hover { color: #cbd5e1; }
.login-toggle-pass .ico { width: 16px; height: 16px; }

.login-options {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: -2px;
}

.login-remember {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: #94a3b8; cursor: pointer; user-select: none;
}
.login-remember input { accent-color: #3b82f6; cursor: pointer; }

.login-submit {
  width: 100%; height: 42px;
  margin-top: 6px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff; font-weight: 650; font-size: 13.5px;
  border-radius: 9px;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.16s var(--ease);
}
.login-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
  background: linear-gradient(135deg, #4f80e1, #2563eb);
}
.login-submit:active { transform: translateY(0); }

.login-quick-demo {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex; flex-direction: column; gap: 8px; text-align: center;
}

.login-quick-label {
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.06em;
  text-transform: uppercase; color: #64748b;
}

.login-quick-buttons {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
}

.quick-role-btn {
  padding: 5px 10px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1; font-size: 11.5px; font-weight: 550;
  cursor: pointer; transition: all 0.14s var(--ease);
}
.quick-role-btn:hover {
  background: rgba(79, 128, 225, 0.16);
  border-color: rgba(79, 128, 225, 0.35);
  color: #ffffff;
  transform: translateY(-1px);
}

.login-foot {
  margin-top: 16px; display: flex; justify-content: center;
}

.login-security-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: #64748b;
}
.login-security-tag .ico { width: 14px; height: 14px; color: #10b981; }

/* Widget de Perfil en la Barra Superior */
.user-profile-widget {
  display: flex; align-items: center; gap: 9px;
  padding: 3px 4px 3px 8px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  margin-left: 6px;
}

.user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #4f80e1, #1d4ed8);
  color: #ffffff; font-size: 10.5px; font-weight: 800;
  display: grid; place-items: center; flex: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.user-meta {
  display: flex; flex-direction: column; line-height: 1.15;
}

.user-name {
  font-size: 11.5px; font-weight: 650; color: var(--ink);
  white-space: nowrap;
}

.user-role-badge {
  font-size: 9.5px; color: var(--ink-3); font-weight: 500;
  white-space: nowrap;
}

.user-logout-btn {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--ink-3);
  cursor: pointer; transition: all 0.14s;
}
.user-logout-btn:hover {
  background: var(--danger-soft);
  color: var(--danger);
}
.user-logout-btn .ico { width: 14px; height: 14px; }