/* css/theme.css - Paletas modo día / modo oscuro (cargar al final) */

/* ---------- Día: azul brillante, fondos claros ---------- */
:root {
    --primary: #1d6ae5;
    --primary-dark: #1553b8;
    --secondary: #0a4fc2;
    --bg-primary: #ffffff;
    --bg-secondary: #f1f5fb;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --text-primary: #0f1b33;
    --text-secondary: #53627c;
    --text-light: #8493ad;
    --border-color: #dbe4f0;
    --nav-bg: rgba(255, 255, 255, 0.97);
    --nav-border: rgba(29, 106, 229, 0.12);
    --group-bg: linear-gradient(135deg, #eaf2ff, #dbe8ff);
    --surface-2: #f1f5f9;
    --surface-3: #e2e8f0;
    --danger-soft: #fee2e2;
    --danger-text: #991b1b;
    --warn-soft: #fef3c7;
    --warn-text: #92400e;
    --tr-text: #1f2937;
    --tr-muted: #6b7280;
    --tr-tile: #f3f4f6;
    --tr-line: #e5e7eb;
    --tr-card: #e8e8e8;
    --tr-card-hi: #ffffff;
    --tr-card-hi2: #f8f9fa;
    --tr-chip: #eef2ff;
    --tr-chip-text: #4338ca;
    color-scheme: light;
}

/* ---------- Oscuro: azul marino, acentos azules ---------- */
:root[data-theme="dark"] {
    --primary: #3b8bff;
    --primary-dark: #2b6fd6;
    --secondary: #1d4ed8;
    --success: #22c55e;
    --bg-primary: #111c31;
    --bg-secondary: #0b1220;
    --bg-card: #111c31;
    --bg-input: #17233c;
    --text-primary: #e6edf8;
    --text-secondary: #9fb0cb;
    --text-light: #6f819f;
    --border-color: #24324d;
    --nav-bg: rgba(14, 23, 40, 0.97);
    --nav-border: rgba(255, 255, 255, 0.08);
    --group-bg: linear-gradient(135deg, #14284d, #0f1f3d);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
    --surface-2: #1b2a46;
    --surface-3: #2a3a5c;
    --danger-soft: #3b1418;
    --danger-text: #fecaca;
    --warn-soft: #3a2d0d;
    --warn-text: #fde68a;
    --tr-text: #e6edf8;
    --tr-muted: #9fb0cb;
    --tr-tile: #1b2a46;
    --tr-line: #24324d;
    --tr-card: #17233c;
    --tr-card-hi: #14284d;
    --tr-card-hi2: #0f1f3d;
    --tr-chip: #1a2a47;
    --tr-chip-text: #9ec2ff;
    color-scheme: dark;
}

/* ---------- Superficies (ambos temas) ---------- */
body { background: var(--bg-secondary); color: var(--text-primary); }

.vehicles-filter-input,
.history-date-input { background: var(--bg-input); color: var(--text-primary); border-color: var(--border-color); }

.logout-modal-content,
.vehicle-card,
.history-modal-body,
.history-chart,
.map-control-btn { background: var(--bg-card); color: var(--text-primary); }

.sidebar-toggle-btn { background: var(--nav-bg); }
.map-sidebar { background: var(--bg-secondary); }
.vehicle-group-header { background: var(--group-bg); }

.bottom-nav { background: var(--nav-bg); border-top-color: var(--nav-border); }
.bottom-nav .nav-item { color: var(--text-secondary); }

input, select, textarea {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-color);
}
input::placeholder, textarea::placeholder { color: var(--text-light); }

/* Cuadros en línea del HTML que usan var(--bg-primary) */
.vehicle-group-title { color: var(--primary); }

/* ---------- Modo oscuro: componentes con colores fijos ---------- */
:root[data-theme="dark"] .map-sidebar-header,
:root[data-theme="dark"] .history-modal-header {
    background: linear-gradient(135deg, #12264a, #0e1a33);
    border-bottom: 1px solid var(--border-color);
}
:root[data-theme="dark"] .vehicle-card { border: 1px solid var(--border-color); }
:root[data-theme="dark"] .vehicle-card.selected {
    background: linear-gradient(135deg, #14284d 0%, #0f1f3d 100%);
    box-shadow: 0 4px 20px rgba(59, 139, 255, 0.25);
}
:root[data-theme="dark"] .vehicle-card-plate {
    background: #2a2210;
    color: #fde68a;
}
:root[data-theme="dark"] .history-chart { border-top-color: var(--border-color); }
:root[data-theme="dark"] .history-chart-title { color: var(--text-secondary); }
:root[data-theme="dark"] .history-modal-body .history-loading { color: var(--text-secondary); }

/* Panel de viajes (trips.css comparte colores fijos con /placas) */
:root[data-theme="dark"] .tr-panel,
:root[data-theme="dark"] .tr-title-date,
:root[data-theme="dark"] .tr-row { color: var(--text-primary); }
:root[data-theme="dark"] .tr-label,
:root[data-theme="dark"] .tr-empty { color: var(--text-secondary); }
:root[data-theme="dark"] .tr-num { color: #7ab2ff; }
:root[data-theme="dark"] .tr-tile { background: var(--bg-input); }
:root[data-theme="dark"] .tr-card {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}
:root[data-theme="dark"] .tr-card.tr-selected { background: linear-gradient(to right, #14284d, #0f1f3d); }
:root[data-theme="dark"] .tr-focus { background: #1a2a47; color: #9ec2ff; }
:root[data-theme="dark"] .tr-plate { background: #2a2210; color: #fde68a; }

/* Gastos / documentos */
:root[data-theme="dark"] #gastosTable tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }
:root[data-theme="dark"] table { color: var(--text-primary); }
:root[data-theme="dark"] th,
:root[data-theme="dark"] td { border-color: var(--border-color); }

/* ---------- Botón sol/luna del encabezado ---------- */
.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    flex-shrink: 0;
}
.theme-toggle-btn svg { width: 18px; height: 18px; }
.theme-toggle-btn .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle-btn .icon-sun { display: block; }

/* ---------- Interruptor en Perfil ---------- */
.theme-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    margin-bottom: var(--spacing-md);
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.theme-switch .track {
    width: 46px;
    height: 26px;
    border-radius: 13px;
    background: var(--border-color);
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}
.theme-switch .track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s;
}
.theme-switch[aria-pressed="true"] .track { background: var(--primary); }
.theme-switch[aria-pressed="true"] .track::after { transform: translateX(20px); }

/* ---------- Barra inferior: pastilla azul en la pestaña activa ---------- */
.bottom-nav {
    box-shadow: 0 -6px 24px rgba(29, 106, 229, 0.10), 0 -1px 0 rgba(255, 255, 255, 0.8) inset;
}
:root[data-theme="dark"] .bottom-nav {
    background: linear-gradient(180deg, #111c31 0%, #0b1220 100%);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.5);
}
.nav-item { margin: 6px 4px; border-radius: 22px; color: #4d5f85; }
:root[data-theme="dark"] .nav-item { color: #9fb0cb; }
.nav-item::before { display: none; }
.nav-item .nav-icon {
    filter: none;
    stroke-width: 2.2;
    stroke: currentColor;
    color: inherit;
}
.nav-item .nav-label { font-weight: 600; letter-spacing: 0.2px; }
.nav-item:hover { background: var(--primary-soft, rgba(29, 106, 229, 0.08)); transform: none; }
.nav-item:hover .nav-icon { transform: scale(1.08); filter: none; stroke: var(--primary); }
.nav-item:hover .nav-label { color: var(--primary); transform: none; }

.nav-item.active,
.nav-item.active:hover {
    background: linear-gradient(135deg, #12a4ff 0%, #0b5ee0 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(18, 120, 255, 0.40);
}
:root[data-theme="dark"] .nav-item.active,
:root[data-theme="dark"] .nav-item.active:hover {
    background: linear-gradient(135deg, #0f9bff 0%, #0a4fd0 100%);
    box-shadow: 0 6px 18px rgba(15, 120, 255, 0.45);
}
.nav-item.active .nav-icon,
.nav-item.active:hover .nav-icon {
    stroke: #fff;
    transform: scale(1.1);
    filter: none;
}
.nav-item.active .nav-label,
.nav-item.active:hover .nav-label {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
    font-weight: 700;
    transform: none;
}

/* La barra tiene 5 pestanas (Mapa, Vehiculos, Gastos, Documentos, Perfil) */
.bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nav-item { min-width: 0; padding: 4px 2px; }
.nav-item .nav-label { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Encabezado del panel: el correo largo se recorta con "..." y los botones conservan su tamaño */
.map-sidebar-header > div:first-child { flex: 1 1 auto; min-width: 0; }
.map-sidebar-header h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#userEmailHeader { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-sidebar-header > .map-sidebar-count,
.map-sidebar-header > .theme-toggle-btn,
.map-sidebar-header > #headerLogoutBtn { flex: 0 0 auto; }
.theme-toggle-btn,
#headerLogoutBtn { width: 32px; height: 32px; min-width: 32px; min-height: 32px; flex-shrink: 0; }