/* ==========================================================================
   WattVision — sistema de diseño del panel
   Tema oscuro (por defecto) y tema claro, con botón en la barra superior.
   Estilo "dashboard" técnico: tarjetas redondeadas, datos y acciones en cian.
   Se carga después de style.css / admin.css. Sólo pantalla: la impresión
   (etiquetas, hojas de ruta) conserva sus estilos de papel.
   ========================================================================== */

:root, [data-theme="dark"] {
    --wv-bg: #121212;
    --wv-card: #1E1E1E;
    --wv-raised: #252525;       /* hover de filas, elementos sobre tarjetas */
    --wv-input: #161616;
    --wv-line: #2C2C2E;
    --wv-line-strong: #3A3A3C;
    --wv-line-hover: var(--wv-line-hover);
    --wv-text: #FFFFFF;
    --wv-text-2: #98989D;
    --wv-placeholder: var(--wv-placeholder);
    --wv-accent: #00E5FF;       /* relleno de botones y acentos */
    --wv-accent-hover: #5CEFFF;
    --wv-accent-text: #00E5FF;  /* cian para textos, links y métricas */
    --wv-cyan-ink: #00141A;     /* texto sobre cian */
    --wv-green: #32D74B;
    --wv-green-text: #32D74B;
    --wv-green-bg: var(--wv-green-bg);
    --wv-red: #FF453A;
    --wv-red-text: #FF453A;
    --wv-red-bg: var(--wv-red-bg);
    --wv-yellow: #FFD60A;
    --wv-yellow-text: #FFD60A;
    --wv-yellow-bg: var(--wv-yellow-bg);
    --wv-toast: #2C2C2E;
    --wv-map-bg: #0E0E0E;
    --wv-tile-filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.5);
    --wv-menu-shadow: 0 12px 32px rgba(0, 0, 0, .5);
    color-scheme: dark;
}

[data-theme="light"] {
    --wv-bg: #F2F2F7;
    --wv-card: #FFFFFF;
    --wv-raised: #F2F2F7;
    --wv-input: #FAFAFC;
    --wv-line: #E5E5EA;
    --wv-line-strong: #D1D1D6;
    --wv-line-hover: #AEAEB2;
    --wv-text: #1C1C1E;
    --wv-text-2: #6E6E73;
    --wv-placeholder: #A1A1A6;
    --wv-accent: #00C8E6;
    --wv-accent-hover: #00B2CE;
    --wv-accent-text: #007A8C;  /* cian oscurecido: legible sobre blanco */
    --wv-green: #34C759;
    --wv-green-text: #1E7B34;
    --wv-green-bg: #E9F8EE;
    --wv-red: #FF3B30;
    --wv-red-text: #D70015;
    --wv-red-bg: #FFECEB;
    --wv-yellow: #FFCC00;
    --wv-yellow-text: #8A5A00;
    --wv-yellow-bg: #FFF7DB;
    --wv-toast: #1C1C1E;
    --wv-map-bg: #E5E5EA;
    --wv-tile-filter: none;
    --wv-menu-shadow: 0 12px 32px rgba(0, 0, 0, .12);
    color-scheme: light;
}

:root {
    --wv-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --wv-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, Consolas, monospace;
    --wv-r-card: 16px;
    --wv-r-ctrl: 10px;
    --wv-r-chip: 999px;
}

/* Variables que ya usa la app (se recalculan con el tema activo) */
:root, [data-theme="dark"], [data-theme="light"] {
    --primary: var(--wv-accent-text);
    --primary-dark: var(--wv-accent-hover);
    --secondary: var(--wv-green);
    --success: var(--wv-green-text);
    --warning: var(--wv-yellow-text);
    --destructive: var(--wv-red-text);
    --bg: var(--wv-bg);
    --surface: var(--wv-card);
    --surface-alt: var(--wv-raised);
    --text: var(--wv-text);
    --text-muted: var(--wv-text-2);
    --border: var(--wv-line);
    --radius: var(--wv-r-ctrl);
    --radius-sm: 5px;
    --shadow: none;
    --shadow-md: none;
    --day-lunes: var(--wv-raised); --day-martes: var(--wv-raised); --day-miercoles: var(--wv-raised);
    --day-jueves: var(--wv-raised); --day-viernes: var(--wv-raised);
    --od-muted: var(--wv-text-2); --od-soft: var(--wv-raised); --od-line: var(--wv-line);
}

@media screen {

/* ---------- Base ---------- */
html, body { background: var(--wv-bg); }
body { font-family: var(--wv-font); font-size: 14px; line-height: 1.55; color: var(--wv-text); }
h1, h2, h3, h4 { font-family: var(--wv-font); color: var(--wv-text); letter-spacing: -0.01em; }
h1, .page-header h1 { font-size: 24px; font-weight: 600; line-height: 1.25; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 17px; font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; }
code, kbd, pre, .mono { font-family: var(--wv-mono); font-size: 13px; }
a { color: var(--wv-accent-text); }
::selection { background: rgba(0, 229, 255, .3); }
:focus-visible { outline: 2px solid var(--wv-accent-text) !important; outline-offset: 2px; }

.page-header { border-bottom: 1px solid var(--wv-line); margin-bottom: 24px; padding-bottom: 16px; }
.main-content { background: var(--wv-bg); }
body.has-topnav .admin-layout.topnav-layout .main-content { padding: 24px; }

/* ---------- Barra superior ---------- */
.topnav, [data-theme="dark"] .topnav { background: var(--wv-card); color: var(--wv-text); border-bottom: 1px solid var(--wv-line); box-shadow: none; }
.topnav-brand, .topnav-brand span { color: var(--wv-text); }
.topnav-item { color: var(--wv-text-2); border-radius: var(--wv-r-ctrl); }
.topnav-item:hover { background: var(--wv-raised); color: var(--wv-text); }
.topnav-item.is-active { background: rgba(0, 229, 255, .12); color: var(--wv-accent-text); }
.topnav-icon-btn, .topnav-user-btn, .topnav-mobile-toggle { color: var(--wv-text-2); background: transparent; border-color: var(--wv-line-strong); }
.topnav-icon-btn:hover, .topnav-user-btn:hover { background: var(--wv-raised); color: var(--wv-text); }
.topnav-dropdown-menu { background: var(--wv-card); color: var(--wv-text); border: 1px solid var(--wv-line-strong); border-radius: 5px; box-shadow: var(--wv-menu-shadow); }
.dd-item { color: var(--wv-text); }
.dd-item:hover { background: var(--wv-raised); }
.dd-item.is-active { background: rgba(0, 229, 255, .12); color: var(--wv-accent-text); }
.dd-user-info { border-bottom-color: var(--wv-line); }
.dd-user-role { color: var(--wv-text-2); }
@media (max-width: 1100px) {
    .topnav-main { background: var(--wv-card); border-bottom: 1px solid var(--wv-line); }
}

.wv-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--wv-r-ctrl); border: 1px solid var(--wv-line-strong); background: transparent; color: var(--wv-text-2); cursor: pointer; }
.wv-theme-btn:hover { background: var(--wv-raised); color: var(--wv-text); }
.wv-theme-btn .wv-moon { display: none; }
[data-theme="light"] .wv-theme-btn .wv-sun { display: none; }
[data-theme="light"] .wv-theme-btn .wv-moon { display: inline; }

/* ---------- Tarjetas ---------- */
.card, .kpi-card, .menu-card, .catalog-card, .catalog-pick-card, .day-section, .modal-box {
    background: var(--wv-card); border: 1px solid var(--wv-line); border-radius: var(--wv-r-card); box-shadow: none;
}
.card { padding: 20px; }
.modal-overlay { background: rgba(0, 0, 0, .7); }
/* Métricas: monoespaciada, bold, 32px, en cian */
.kpi-card .value, .dl-day-stats strong { font-family: var(--wv-mono); font-weight: 700; color: var(--wv-accent-text); font-variant-numeric: tabular-nums; }
.kpi-card .value { font-size: 32px; }
.kpi-card .label { color: var(--wv-text-2); font-size: 12px; }

/* ---------- Botones ---------- */
.btn { font-family: var(--wv-font); font-size: 13px; font-weight: 600; padding: 8px 16px; min-height: 36px; border-radius: var(--wv-r-ctrl); transition: background .15s, border-color .15s, color .15s; }
.btn:hover { transform: none; text-decoration: none; }
.btn-sm { font-size: 12px; padding: 4px 12px; min-height: 30px; }
.btn-primary { background: var(--wv-accent); color: var(--wv-cyan-ink); border: none; }
.btn-primary:hover { background: var(--wv-accent-hover); color: var(--wv-cyan-ink); }
.btn-outline { background: transparent; color: var(--wv-text); border: 1px solid var(--wv-line-strong); }
.btn-outline:hover { background: var(--wv-raised); border-color: var(--wv-line-hover); }
.btn-success { background: var(--wv-green); color: #04210B; border: none; }
.btn-success:hover { filter: brightness(1.08); }
.btn-danger { background: transparent; color: var(--wv-red-text); border: 1px solid rgba(255, 69, 58, .6); }
.btn-danger:hover { background: rgba(255, 69, 58, .15); }
.btn:disabled, .btn[disabled] { opacity: .35; cursor: not-allowed; }

/* ---------- Formularios ---------- */
.form-group label { color: var(--wv-text-2); font-size: 12px; font-weight: 500; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="time"],
input[type="date"], input[type="url"], input[type="search"], input:not([type]), select, textarea,
.form-group input, .form-group select, .form-group textarea, .filters select, .filters input {
    background: var(--wv-input); color: var(--wv-text); border: 1px solid var(--wv-line); border-radius: var(--wv-r-ctrl); font-family: var(--wv-font);
}
input:hover, select:hover, textarea:hover { border-color: var(--wv-line-strong); }
input:focus, select:focus, textarea:focus, .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--wv-accent-text) !important; box-shadow: 0 0 0 1px var(--wv-accent-text) !important; outline: none;
}
input::placeholder, textarea::placeholder { color: var(--wv-placeholder); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--wv-accent-text); }
select option { background: var(--wv-card); color: var(--wv-text); }

/* ---------- Tablas ---------- */
table { border-collapse: collapse; }
th { background: transparent; color: var(--wv-text-2); font-size: 11px; font-weight: 600; letter-spacing: .06em; border-bottom: 1px solid var(--wv-line); }
td { border-bottom: 1px solid var(--wv-line); color: var(--wv-text); }
tr:hover td { background: var(--wv-raised); }
tfoot td, td strong { font-variant-numeric: tabular-nums; }

/* ---------- Chips de estado ---------- */
.badge { border-radius: var(--wv-r-chip); font-size: 11px; font-weight: 600; padding: 2px 9px; }
.badge-success { background: rgba(50, 215, 75, .15); color: var(--wv-green-text); }
.badge-warning { background: rgba(255, 214, 10, .14); color: var(--wv-yellow-text); }
.badge-danger { background: rgba(255, 69, 58, .15); color: var(--wv-red-text); }
.badge-info { background: rgba(0, 229, 255, .12); color: var(--wv-accent-text); }
/* .badge-category: fondo y texto los define categoryBadge() según el color de la categoría */

/* ---------- Alertas: fondo oscuro teñido + borde izquierdo de 4px ---------- */
.alert { border: none; border-left: 4px solid; border-radius: 5px; font-size: 13px; }
.alert-error { background: var(--wv-red-bg); color: var(--wv-red-text); border-left-color: var(--wv-red-text); }
.alert-success { background: var(--wv-green-bg); color: var(--wv-green-text); border-left-color: var(--wv-green-text); }
.alert-warning { background: var(--wv-yellow-bg); color: var(--wv-yellow-text); border-left-color: var(--wv-yellow-text); }
.alert a { color: inherit; text-decoration: underline; }

/* ---------- Otros componentes de la app ---------- */
.pagination a, .pagination span { background: var(--wv-card); border-color: var(--wv-line); color: var(--wv-text-2); border-radius: var(--wv-r-ctrl); }
.pagination .active { background: var(--wv-accent); border-color: var(--wv-accent-text); color: var(--wv-cyan-ink); }
.link-box { background: var(--wv-input); border: 1px solid var(--wv-line); border-radius: 5px; }
.link-box input { font-family: var(--wv-mono); font-size: 12px; }
.toggle-slider { background: var(--wv-line-strong); }
.week-info-badge { background: var(--wv-raised); color: var(--wv-text-2); }

/* Colores fijos escritos en las vistas (paleta clara anterior) → equivalentes oscuros */
[style*="background:#fff"], [style*="background: #fff"], [style*="background:#FFF"], [style*="background: white"], [style*="background:white"],
[style*="background:#F5F3EF"], [style*="background: #F5F3EF"], [style*="background:#FAFAF9"], [style*="background: #FAFAF9"],
[style*="background:#F8FAFC"], [style*="background: #F8FAFC"], [style*="background:var(--surface)"], [style*="background: var(--surface)"] { background: var(--wv-card) !important; }
[style*="background:#E7E5E4"], [style*="background: #E7E5E4"] { background: var(--wv-raised) !important; }
[style*="background:#ECFDF5"], [style*="background: #ECFDF5"], [style*="background:#DCFCE7"], [style*="background: #DCFCE7"],
[style*="background:#F0FDF4"], [style*="background: #F0FDF4"], [style*="background:#D1FAE5"] { background: rgba(50, 215, 75, .12) !important; }
[style*="background:#DBEAFE"], [style*="background: #DBEAFE"], [style*="background:#E0E7FF"], [style*="background: #E0E7FF"] { background: rgba(0, 229, 255, .12) !important; }
[style*="background:#FEF3C7"], [style*="background: #FEF3C7"] { background: rgba(255, 214, 10, .14) !important; }
[style*="background:#FEE2E2"], [style*="background: #FEE2E2"], [style*="background:#FFE4E6"], [style*="background: #FFE4E6"] { background: var(--wv-red-bg) !important; }
[style*="color:#6B655D"], [style*="color: #6B655D"], [style*="color:#A29C93"], [style*="color: #A29C93"], [style*="color:#666"], [style*="color: #666"] { color: var(--wv-text-2) !important; }
[style*="color:#1B1917"], [style*="color: #1B1917"], [style*="color:#17140F"], [style*="color: #17140F"] { color: var(--wv-text) !important; }
[style*="color:#047857"], [style*="color: #047857"], [style*="color:#065F46"], [style*="color: #065F46"], [style*="color:var(--secondary)"], [style*="color: var(--secondary)"] { color: var(--wv-green-text) !important; }
[style*="border-color:#86EFAC"], [style*="border:2px solid #047857"], [style*="border-color:#047857"] { border-color: var(--wv-accent-text) !important; }
.gap-24 { gap: 24px; }

/* Etiquetas (vista previa en pantalla) */
.label-type-tabs { background: var(--wv-input) !important; border: 1px solid var(--wv-line); border-radius: 5px !important; }
.type-tab { color: var(--wv-text-2) !important; }
.type-tab.is-active { background: var(--wv-raised) !important; color: var(--wv-text) !important; box-shadow: none !important; }
.type-count { background: var(--wv-line) !important; color: var(--wv-text-2) !important; font-family: var(--wv-mono); }
.type-tab.is-active .type-count { background: rgba(0, 229, 255, .15) !important; color: var(--wv-accent-text) !important; }
.labels-section-title { color: var(--wv-text-2) !important; border-bottom-color: var(--wv-line) !important; }
.label-item { background: var(--wv-card) !important; border-color: var(--wv-line) !important; color: var(--wv-text); }
.label-name, .label-menu { color: var(--wv-text) !important; }
.label-sector, .label-day { color: var(--wv-text-2) !important; }
.label-badge.b2b { background: rgba(0, 229, 255, .12) !important; color: var(--wv-accent-text) !important; }
.label-badge.indv { background: rgba(50, 215, 75, .15) !important; color: var(--wv-green-text) !important; }
.label-item.is-individual { border-left-color: var(--wv-green-text) !important; }
.label-stop { background: var(--wv-accent) !important; color: var(--wv-cyan-ink) !important; }


/* Armador de menús (estilos propios de la vista) */
.mb-catalog, .mb-day { background: var(--wv-card) !important; border-color: var(--wv-line) !important; border-radius: var(--wv-r-card) !important; }
.mb-day.is-full { background: var(--wv-yellow-bg) !important; border-color: var(--wv-yellow-text) !important; }
.mb-day-head { border-bottom-color: var(--wv-line) !important; }
.mb-day-head h4, .mb-item-title { color: var(--wv-text) !important; }
.mb-day-count, .mb-item-drag, .mb-catalog-hint, .mb-day-empty, .mb-btn-icon { color: var(--wv-text-2) !important; }
.mb-day-count { font-family: var(--wv-mono) !important; }
.mb-day.is-full .mb-day-count { color: var(--wv-yellow-text) !important; }
.mb-item, .cat-item { background: var(--wv-input) !important; border-color: var(--wv-line) !important; }
.cat-item:hover, .mb-item:hover { background: var(--wv-raised) !important; border-color: var(--wv-line-strong) !important; }
.cat-item.is-assigned { background: rgba(50, 215, 75, .1) !important; border-color: rgba(50, 215, 75, .45) !important; }
.cat-check { background: var(--wv-green) !important; color: #04210B !important; }
.mb-btn-icon:hover { background: var(--wv-raised) !important; color: var(--wv-text) !important; }
.mb-btn-remove:hover { background: var(--wv-red-bg) !important; color: var(--wv-red-text) !important; }
.mb-day-empty, .mb-catalog-hint { border-color: var(--wv-line) !important; }
.mb-count, .cat-filter-count, .cat-count, .btn-mini-add { background: var(--wv-raised) !important; color: var(--wv-text-2) !important; }
.btn-mini-add:hover { background: rgba(0, 229, 255, .12) !important; color: var(--wv-accent-text) !important; }
.mb-catalog-search input { background: var(--wv-input) !important; border-color: var(--wv-line) !important; color: var(--wv-text) !important; }
.cat-filter { background: var(--wv-input) !important; border-color: var(--wv-line) !important; color: var(--wv-text-2) !important; }
.cat-filter:hover { background: var(--wv-raised) !important; border-color: var(--wv-line-strong) !important; color: var(--wv-text) !important; }
.cat-filter.is-active { background: var(--chip-color, var(--wv-accent)) !important; border-color: transparent !important; color: var(--chip-fg, var(--wv-cyan-ink)) !important; }
.cat-filter.is-active .cat-count { background: rgba(127,127,127,0.25) !important; color: inherit !important; }
.sort-ghost { background: rgba(0, 229, 255, .15) !important; }
.mb-day-drop.sortable-drag-over { background: rgba(0, 229, 255, .08) !important; }
.mb-toast { background: var(--wv-toast) !important; color: #FFFFFF !important; }

/* ---------- Módulo de envíos ---------- */
body .dl-dialog { background: var(--wv-card); color: var(--wv-text); border: 1px solid var(--wv-line-strong); border-radius: var(--wv-r-card); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
body .dl-dialog::backdrop { background: rgba(0, 0, 0, .7); }
body .dl-route { border-radius: var(--wv-r-card); }
body .dl-stop { background: var(--wv-input); border-color: var(--wv-line); border-radius: 5px; }
body .dl-stop:hover { box-shadow: none; background: var(--wv-raised); }
body .dl-stop.is-selected { border-color: var(--wv-accent-text); background: rgba(0, 229, 255, .06); }
body .dl-stop.is-failed { border-color: rgba(255, 69, 58, .5); }
body .dl-stop.is-flash { background: rgba(0, 229, 255, .12); }
body .dl-num { font-family: var(--wv-mono); background: var(--wv-line-strong); }
body .dl-count, body .dl-portions { background: var(--wv-raised); border-color: var(--wv-line); color: var(--wv-text-2); font-family: var(--wv-mono); }
body .dl-cash, body .od-cash { color: var(--wv-yellow-text); }
body .od-cash { background: rgba(255, 214, 10, .12); }
body .dl-warn { color: var(--wv-yellow-text); }
body .dl-pick-hint { background: var(--wv-yellow-bg); color: var(--wv-yellow-text); border-left: 4px solid var(--wv-yellow); }
body .dl-results button { background: var(--wv-input); color: var(--wv-text); border-color: var(--wv-line); }
body .dl-results button:hover { background: var(--wv-raised); border-color: var(--wv-accent-text); }
body .dl-day-card:hover { border-color: var(--wv-accent-text); transform: none; }
body .dl-day-cta { color: var(--wv-accent-text); }
body .dl-progress { background: var(--wv-line); }
body .dl-progress span { background: var(--wv-green); }
body .dl-bulk { background: var(--wv-card); border-color: var(--wv-line-strong); box-shadow: var(--wv-menu-shadow); }
body .dl-map.is-assigning { outline-color: var(--wv-accent-text); }
body .dl-marker-pin { border-color: var(--wv-bg); font-family: var(--wv-mono); }
body .od-qty { font-family: var(--wv-mono); color: var(--wv-accent-text); }
body .dl-ap-status.ok { color: var(--wv-green-text); }
body .dl-ap-status.warn { color: var(--wv-yellow-text); }

/* Mapas: mosaicos oscurecidos para no encandilar sobre fondo oscuro */
.leaflet-container { background: var(--wv-map-bg); font-family: var(--wv-font); }
.leaflet-tile-pane { filter: var(--wv-tile-filter); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--wv-card); color: var(--wv-text); border: 1px solid var(--wv-line-strong); }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--wv-card); color: var(--wv-text); border-color: var(--wv-line-strong); }
.leaflet-control-attribution { background: var(--wv-card) !important; color: var(--wv-text-2); }
.leaflet-control-attribution a { color: var(--wv-text-2); }

} /* @media screen */

/* ===== Tablas en celular: cada fila se apila como tarjeta (sin scroll horizontal).
   admin.js copia el encabezado de cada columna en data-label de cada celda. ===== */
@media (max-width: 720px) {
    .table-wrap { overflow-x: visible; }
    .table-wrap table, .table-wrap tbody, .table-wrap tfoot, .table-wrap tr, .table-wrap td { display: block; width: 100%; min-width: 0; }
    .table-wrap thead { display: none; }
    .table-wrap tr { border: 1px solid var(--wv-line); border-radius: 5px; padding: 4px 12px; margin-bottom: 10px; background: var(--wv-card); }
    .table-wrap tr:hover td { background: transparent; }
    .table-wrap td { display: flex; justify-content: flex-end; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid var(--wv-line); text-align: right; word-break: break-word; }
    .table-wrap tr td:last-child { border-bottom: none; }
    .table-wrap td[data-label]::before { content: attr(data-label); flex-shrink: 0; margin-right: auto; max-width: 45%; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--wv-text-2); }
    .table-wrap td[data-label=""]::before { content: none; }
    .table-wrap td[data-label=""] { justify-content: flex-end; }
    .table-wrap td > .flex, .table-wrap td > form, .table-wrap td > div { flex-wrap: wrap; justify-content: flex-end; }
}


/* ===== Barra superior: tema dentro del menú de usuario (PC) y elementos solo-celular ===== */
.topnav-mobile-only { display: none !important; }
@media (max-width: 900px) {
    .topnav-mobile-only { display: inline-flex !important; }
    a.topnav-mobile-only { display: flex !important; }
}
.dd-theme { width: 100%; background: transparent; border: none; cursor: pointer; font: inherit; text-align: left; }
.dd-theme .wv-sun, .dd-theme .wv-moon { display: inline-flex; align-items: center; gap: 10px; }
.dd-theme .wv-sun { display: inline-flex; }
.dd-theme .wv-moon { display: none; }
[data-theme="light"] .dd-theme .wv-sun { display: none; }
[data-theme="light"] .dd-theme .wv-moon { display: inline-flex; }
.topnav-user-btn { padding: 8px 10px; }