:root {
    /* --- TEMA OSCURO (DEFAULT - Profesional Navy Slate) --- */
    --bg-body: 
        /* 🟢 AJUSTE DE RESPLANDOR: Más intenso (0.1) y más amplio (50%) */
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%), 
        radial-gradient(circle at 50% 0%, #131B2B 0%, #0A111C 40%, #000713 100%); 
    
    --text-main: #f1f5f9; /* Slate 100 */
    --text-muted: #94a3b8; /* Slate 400 */
    
    /* Vidrio Principal (Más Sutil y Elegante) */
    --glass-bg: rgba(25, 33, 44, 0.7); /* Azul Oscuro (70% opaco) */
    --glass-border: rgba(71, 85, 105, 0.5); /* Borde Gris Sutil */
    --glass-shadow: rgba(0, 0, 0, 0.95); /* Sombra ultra profunda */
    
    /* Vidrio Secundario (Fondos de Headers/Inputs) */
    --glass-darker-bg: rgba(15, 23, 42, 0.7); 
    
    /* Inputs */
    --input-bg: rgba(5, 10, 15, 0.9); /* Fondo ultra oscuro y opaco */
    --input-text: #ffffff;
    --input-border: rgba(94, 114, 138, 0.5);
    --input-placeholder: rgba(148, 163, 184, 0.4);
    
    /* Botones y Scroll */
    --btn-glass-bg: rgba(255, 255, 255, 0.1); 
    --scroll-track: rgba(15, 23, 42, 0.6);
    --scroll-thumb: #334155; /* Gris más sobrio para scroll */
    
    /* Colores de Acción (Teal 700 y variantes) */
    --color-primary: #0f767a; /* Teal 700 (Principal) */
    --color-success: #15803d; /* Green 700 */
    --color-danger: #be123c; /* Rose 700 */
    --color-edit: #a16207; /* Yellow 700 */
    
    --btn-action-text-primary: #ccfbf1; /* Texto Cyan claro sobre fondo oscuro */
    --btn-action-text-success: #dcfce7;
    --btn-action-text-danger: #ffe4e6;
    --btn-action-text-edit: #fef9c3;

    /* FOOTER ACTION BUTTONS (Gris Cristal + Teal) */
    --btn-gray-glass-bg: rgba(71, 85, 105, 0.25); 
    --btn-gray-glass-border: rgba(71, 85, 105, 0.5);
    --btn-action-cyan: var(--color-primary); 
    --btn-action-cyan-hover-bg: rgba(15, 118, 122, 0.2); /* Hover Teal sutil */

    /* Mayor separación */
    --dashboard-actions-margin-bottom: 30px; 
}

[data-theme="light"] {
    /* --- TEMA CLARO (Alternativo, seguir el patrón minimalista) --- */
    --bg-body: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;
    
    --glass-bg: #f8fafc; 
    --glass-border: #e2e8f0;
    --glass-shadow: rgba(0, 0, 0, 0.1); 
    --glass-darker-bg: #e2e8f0; 
    
    --input-bg: #ffffff;
    --input-text: #1e293b;
    --input-border: #cbd5e1;
    --input-placeholder: #94a3b8;
    
    --btn-glass-bg: #e2e8f0; 
    --scroll-track: #e2e8f0;
    --scroll-thumb: #94a3b8;
    
    --color-primary: #0891b2; /* Cyan 700 para Light mode */
    --color-success: #15803d; 
    --color-danger: #be123c; 
    --color-edit: #a16207; 

    --btn-action-text-primary: #ffffff;
    --btn-action-text-success: #ffffff;
    --btn-action-text-danger: #ffffff;
    --btn-action-text-edit: #ffffff;
    
    --btn-gray-glass-bg: #e2e8f0; 
    --btn-gray-glass-border: #cbd5e1;
    --btn-action-cyan: var(--color-primary); 
    --btn-action-cyan-hover-bg: #cbd5e1;
}

/* --- AJUSTES APP NATIVA (Restaurar gradiente y fijación) --- */
:root {
    background: var(--bg-body) !important;
}
html {
    height: 100%;
    overscroll-behavior-y: none; 
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden; 
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-body);
    background-attachment: fixed;
    color: var(--text-main);
    min-height: 100vh; 
    height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden; 
    max-width: 100vw; 
    
    padding-top: env(safe-area-inset-top); 
    padding-bottom:env(safe-area-inset-bottom); 
    
    transition: background 0.5s ease, color 0.3s ease;
}

/* --- CLASE PARA CONGELAR EL FONDO CUANDO EL MODAL ESTÁ ABIERTO --- */
.modal-open {
    overflow: hidden !important;
}

html, body {
    background: var(--bg-body) !important; 
    background-attachment: fixed;
}


/* ===========================================================
   CLASES DE CONTENEDOR Y SCROLL INTERNO
   =========================================================== */
.main-container {
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* CAMBIO: Altura forzada a 100vh para control total */
    height: 100vh; 
    max-height: 100vh; 
    
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch;
    
    /* CORREGIDO: Añadido 20px base + área segura para evitar que se pegue arriba */
    padding-top: calc(20px + env(safe-area-inset-top)); 
    padding-bottom: calc(0px + env(safe-area-inset-bottom)); 
}

#main-container {
    margin-top: 0 !important; 
    padding-bottom: 100px; /* AJUSTE: Reducido para evitar scroll infinito */
}
#main-dashboard-view {
    padding-bottom: 0px; /* AJUSTE: Eliminado padding extra innecesario */
}


/* =========================================
   OVERRIDES GENERALES (MODO CLARO)
   ========================================= */

[data-theme="light"] .text-white,
[data-theme="light"] .text-gray-100,
[data-theme="light"] .text-gray-200,
[data-theme="light"] .text-gray-300 { color: #1e293b !important; }

[data-theme="light"] .text-gray-400 { color: #475569 !important; }

[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-white\/5 { border-color: rgba(0, 0, 0, 0.1) !important; }

[data-theme="light"] .bg-white\/5 { background-color: rgba(0, 0, 0, 0.05) !important; }
[data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(0, 0, 0, 0.08) !important; }

/* Títulos fijos a negro en modo claro */
[data-theme="light"] #title-add-trip,
[data-theme="light"] #title-edit-trip,
[data-theme="light"] #title_driver_info,
[data-theme="light"] #title-maintenance,
[data-theme="light"] #title-maintenance-form,
[data-theme="light"] #title-expenses,
[data-theme="light"] #title-expense-form,
[data-theme="light"] #title-expense-records { color: #000000 !important; }


/* ===========================================================
   DASHBOARD SUPERIOR (Teal Sutil)
   =========================================================== */
[data-theme="dark"] .text-cyan-400 { color: var(--color-primary) !important; }

[data-theme="light"] .text-cyan-300\/60,
[data-theme="light"] .text-amber-300\/60 {
    color: var(--color-primary) !important; 
    opacity: 1 !important;     
    font-weight: 800 !important;
}

[data-theme="light"] #diesel-price-bubble,
[data-theme="light"] #current-truck-name {
    color: #000000 !important; 
    text-shadow: none !important;
}

[data-theme="light"] .text-cyan-50, 
[data-theme="light"] .text-amber-50,
[data-theme="light"] .text-amber-300\/80 {
    color: #374151 !important; 
    text-shadow: none !important;
}

[data-theme="light"] .text-xl { color: #ffffff !important; }
[data-theme="light"] .bg-gradient-to-br {
    --tw-gradient-from: #1e293b !important;
    --tw-gradient-to: #0f172a !important;
}


/* ===========================================================
   ANALÍTICAS Y LISTAS (Teal Sutil)
   =========================================================== */
.chart-container {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
[data-theme="light"] .chart-container {
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

[data-theme="light"] .text-cyan-400 {
    color: #0891b2 !important; 
    font-weight: 700 !important;
}

[data-theme="light"] thead.bg-white\/5 {
    background-color: rgba(203, 213, 225, 0.4) !important;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

[data-theme="light"] tbody tr.bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.4) !important;
}
[data-theme="light"] tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="light"] #analytics-clear-filter,
[data-theme="light"] #analytics-toggle-rows-btn {
    background-color: #fff;
    border: 1px solid #cbd5e1;
    color: #334155;
}
[data-theme="light"] #analytics-clear-filter:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}

/* FUERZA BRUTA: TEXTO NEGRO EN ANALÍTICAS */
[data-theme="light"] #analytics-modal h3,
[data-theme="light"] #analytics-modal h4,
[data-theme="light"] #analytics-modal label,
[data-theme="light"] #analytics-modal th,
[data-theme="light"] #analytics-modal td,
[data-theme="light"] #analytics-modal .text-gray-200,
[data-theme="light"] #analytics-modal .text-gray-300,
[data-theme="light"] #analytics-modal .text-gray-400 {
    color: #000000 !important; 
}


/* ===========================================================
   HISTORIAL (Ajustado para Stealth)
   =========================================================== */
[data-theme="light"] #history-modal .border-b {
    background: linear-gradient(to right, rgba(6, 182, 212, 0.15), rgba(255, 255, 255, 0)) !important;
    border-bottom: 1px solid rgba(6, 182, 212, 0.2) !important;
}
[data-theme="light"] #title-archive-history {
    color: #0e7490 !important; 
    font-weight: 800 !important;
    font-size: 1.25rem !important;
}

[data-theme="light"] #history-modal thead {
    background-color: rgba(6, 182, 212, 0.1) !important;
    border-bottom: 1px solid rgba(6, 182, 212, 0.2) !important;
}
[data-theme="light"] #history-modal th {
    color: #155e75 !important;
    font-weight: 700 !important;
}

[data-theme="light"] #history-modal tbody tr {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}
[data-theme="light"] #history-modal tbody tr:hover { background-color: rgba(0,0,0,0.02) !important; }

[data-theme="light"] #history-modal td,
[data-theme="light"] #history-modal .text-gray-400,
[data-theme="light"] #history-modal .text-white {
    color: #000000 !important;
}
[data-theme="light"] #history-modal .pay-received-input {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #000000 !important;
}

/* Pay Period History Totals & Cards */
[data-theme="light"] #history-modal .glass-effect-darker {
    background-color: var(--glass-bg) !important; 
    border: 1px solid #cbd5e1 !important; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
[data-theme="light"] #history-total-earnings,
[data-theme="light"] #history-total-miles,
[data-theme="light"] #history-month-earnings,
[data-theme="light"] #history-tip-container .text-gray-300 {
    color: #000000 !important;
}
[data-theme="light"] .swipe-card-wrapper .swipe-content {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
[data-theme="light"] .swipe-card-wrapper .swipe-content h4,
[data-theme="light"] .swipe-card-wrapper .swipe-content .text-gray-100 {
    color: #000000 !important; 
}


/* =========================================
   COMPONENTES UI GENERALES
   ========================================= */

/* EFECTO CRISTAL PREMIUM */
.glass-effect {
    background: var(--glass-bg);
    backdrop-filter: blur(20px); /* Ultra Blur */
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    /* Sombra profunda y glow sutil */
    box-shadow: 0 8px 40px 0 var(--glass-shadow), 0 0 15px rgba(0, 255, 255, 0.1); 
    color: var(--text-main);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.glass-effect-darker {
    background-color: var(--glass-darker-bg);
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.glass-input {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-text);
    transition: all 0.2s ease;
}
.glass-input::placeholder { color: var(--input-placeholder); }
.glass-input:focus {
    background-color: var(--input-bg);
    border-color: var(--color-primary); 
    outline: none;
    /* Efecto Glow en Focus */
    box-shadow: 0 0 10px 2px rgba(0, 255, 255, 0.4);
}
[data-theme="light"] .glass-input { color: #000000 !important; }

/* Tarjetas Totales (Acentuadas con Neon Blue) */
.stat-card-base {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); 
    color: var(--text-main);
    transition: transform 0.2s ease;
}
.stat-card-base:hover { transform: translateY(-3px); } 

[data-theme="light"] .stat-card-miles #label-total-miles { color: #0e7490 !important; } 
[data-theme="light"] .stat-card-miles #total-miles { color: #155e75 !important; } 
[data-theme="light"] .stat-card-money #label-total-amount { color: #15803d !important; }
[data-theme="light"] .stat-card-money #total-amount { color: #14532d !important; }

.stat-card-miles {
    background: var(--glass-bg);
    /* Glow Sutil Neon Blue en la tarjeta */
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 255, 255, 0.2); 
}
.stat-card-money {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
}

/* NUEVO: Contenedor Botones de Acción Dashboard */
.dashboard-actions-container {
    padding-bottom: var(--dashboard-actions-margin-bottom);
}

/* =========================================================================
   NUEVOS ESTILOS PARA BOTONES DE DASHBOARD (REEMPLAZO)
   Simetría exacta con las tarjetas de arriba (Total Miles / Amount)
   ========================================================================= */

/* Botón Azul (Current Trips) - Copia exacta del estilo stat-card-miles */
.btn-stat-link {
    background: var(--glass-bg); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Borde y Sombra: Exactamente igual a stat-card-miles */
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 255, 255, 0.2); 
    
    color: var(--color-primary) !important;
    font-weight: 700 !important;
    transition: all 0.2s ease;
}

.btn-stat-link:hover { 
    transform: translateY(-3px); 
    background: rgba(255, 255, 255, 0.1); 
    /* Aumentamos el brillo en hover */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 15px rgba(0, 255, 255, 0.4);
}

.btn-stat-link:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 5px rgba(0, 255, 255, 0.2); 
}

/* Botón Rojo (Archive/Reset) - Misma estructura, brillo rojo */
.btn-stat-link-danger {
    background: var(--glass-bg); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    border: 1px solid var(--glass-border);
    /* Sombra Roja Neon */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 10px rgba(220, 38, 38, 0.3); 
    
    color: var(--color-danger) !important;
    font-weight: 700 !important;
    transition: all 0.2s ease;
}

.btn-stat-link-danger:hover {
    transform: translateY(-3px); 
    background: rgba(255, 255, 255, 0.1); 
    /* Aumentamos el brillo rojo en hover */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 15px rgba(220, 38, 38, 0.5);
}

.btn-stat-link-danger:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 5px rgba(220, 38, 38, 0.2);
}

/* Ajustes para Modo Claro (Botones Dashboard) */
[data-theme="light"] .btn-stat-link {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #0e7490 !important; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 0 5px rgba(8, 145, 178, 0.2); 
}
[data-theme="light"] .btn-stat-link-danger {
    background: #fef2f2;
    border-color: #fee2e2;
    color: #be123c !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 0 5px rgba(190, 18, 60, 0.2);
}

/* ------------------------------------------------------------------------- */


/* Texto de Totales en Negro (Soluciona problemas de contraste) */
[data-theme="light"] #total-miles,
[data-theme="light"] #total-amount {
    color: #000000 !important; /* Forzar negro */
    font-weight: 900 !important; /* Máximo contraste */
}

/* Sección de Gastos (Expenses) Totales */
[data-theme="light"] .expense-card-1, 
[data-theme="light"] .expense-card-2 {
    background-color: var(--glass-bg) !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; /* Sombra suave */
}
[data-theme="light"] #expense-total-amount,
[data-theme="light"] #expense-monthly-amount {
    color: #000000 !important; /* Importe en negro */
    font-weight: 800 !important; /* Más resaltado */
}
[data-theme="light"] .expense-card-1 .text-red-300\/80 { color: #dc2626 !important; opacity: 1 !important; }
[data-theme="light"] .expense-card-2 .text-amber-300\/80 { color: #a16207 !important; opacity: 1 !important; }


/* Scrollbars */
.modal-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.modal-scrollbar::-webkit-scrollbar-track { background: var(--scroll-track); border-radius: 10px; }
.modal-scrollbar::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 10px; }
.modal-scrollbar::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Botones (Liquid Glass) - Generales */
.btn-liquid-glass {
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    border: 1px solid var(--glass-border);
    background: var(--btn-glass-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--text-main);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .btn-liquid-glass {
    color: #1e293b; 
    border-color: rgba(0,0,0,0.2);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.btn-liquid-glass:hover {
    background: rgba(255, 255, 255, 0.15); 
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.btn-primary { 
    background-color: var(--color-primary); 
    border-color: var(--color-primary); 
    color: var(--btn-action-text-primary) !important; 
    font-weight: 700 !important;
}
.btn-primary:hover { background-color: color-mix(in srgb, var(--color-primary) 80%, black); }

.btn-success { 
    background-color: var(--color-success); 
    border-color: var(--color-success); 
    color: var(--btn-action-text-success) !important; 
    font-weight: 700 !important;
}
.btn-success:hover { background-color: color-mix(in srgb, var(--color-success) 80%, black); }

.btn-edit { 
    background-color: var(--color-edit); 
    border-color: var(--color-edit); 
    color: var(--btn-action-text-edit) !important; 
    font-weight: 700 !important;
}
.btn-edit:hover { background-color: color-mix(in srgb, var(--color-edit) 80%, black); }

.btn-danger { 
    background-color: var(--color-danger); 
    border-color: var(--color-danger); 
    color: var(--btn-action-text-danger) !important; 
    font-weight: 700 !important;
}
.btn-danger:hover { background-color: color-mix(in srgb, var(--color-danger) 80%, black); }

.btn-google { background-color: #2b3545; border: 1px solid rgba(255,255,255,0.1); color: white; transition: background-color 0.3s; }
[data-theme="light"] .btn-google { background-color: #ffffff; color: #334155 !important; border: 1px solid #cbd5e1; }
.btn-google:hover { background-color: #f1f5f9; }

/* FAB */
@keyframes neon-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.6); }
    70% { box-shadow: 0 0 0 12px rgba(0, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0); }
}
.pulse-glow-button {
    background: var(--color-primary);
    border: none;
    color: var(--btn-action-text-primary) !important;
    animation: neon-pulse 2s infinite;
    transition: transform 0.2s, box-shadow 0.2s;
}
.pulse-glow-button:hover { animation-play-state: paused; transform: scale(1.05); }
.pulse-glow-button:active { transform: scale(0.95); }

/* Extras */
.flatpickr-calendar { border: 1px solid var(--glass-border) !important; box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } }
.welcome-animation { animation: pulse 2s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }
.highlight-primary { color: var(--color-primary); display: inline-block; font-weight: 600; }
[data-theme="light"] .highlight-primary { color: #0891b2; }
.highlight-green { color: #4ade80; display: inline-block; font-weight: 600; }
[data-theme="light"] .highlight-green { color: #16a34a; }
.badge-pulsate { animation: pulse-red 2s infinite; }
@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}
#reader { width: 100%; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,0.1); }
#reader video { object-fit: cover; border-radius: 12px; }

/* ---------------------------------------------------------------------- */
/* --- AJUSTE BARRA ANCLADA (Docked) - GRID CORRECCIÓN --- */
/* ---------------------------------------------------------------------- */

#bottom-nav .nav-btn { 
    transition: all 0.2s; 
    opacity: 0.7; 
    padding: 8px !important; /* Relleno ajustado para que quepan 5 botones */
    width: 100%; /* Ocupar toda su celda del grid */
}
#bottom-nav .nav-btn svg {
    /* Dejar que Tailwind controle el tamaño (h-7 w-7) */
    /* AUMENTADO DE 28px A 32px (+15%) */
    height: 32px; 
    width: 32px; 
    margin-bottom: 2px;
}

#bottom-nav .nav-btn:hover { opacity: 1; color: var(--color-primary); transform: translateY(-2px); }
[data-theme="light"] #bottom-nav .nav-btn:hover { color: #0891b2; }
#bottom-nav .nav-btn:active { transform: scale(0.95); }

/* --- SWIPE CARDS (Mantenimiento & Historial) --- */
.swipe-content {
    touch-action: pan-y;
}
/* --- EFECTO 3D PARA TARJETAS --- */
.card-3d-effect {
    box-shadow: 
        6px 6px 12px rgba(0, 0, 0, 0.6), 
        -2px -2px 6px rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

/* Efecto al presionar */
.card-3d-effect:active {
    box-shadow: 
        2px 2px 5px rgba(0, 0, 0, 0.6), 
        -1px -1px 3px rgba(255, 255, 255, 0.05);
    transform: translateY(2px);
}


/* ---------------------------------------------------------------------- */
/* --- AJUSTES PARA LA NUEVA BARRA DE NAVEGACIÓN (FAB DESPEGADO) --- */
/* ---------------------------------------------------------------------- */

/* TAMAÑO DEL FAB (Aumentado de 50px a 58px) */
.nav-fab-btn {
    width: 58px;  /* +15% */
    height: 58px; /* +15% */
    margin-top: -29px; /* Mitad de 58px */

    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px 0 var(--glass-shadow);
    color: var(--text-main);
    transition: all 0.2s ease;
}

/* Efectos para Modo Oscuro */
[data-theme="dark"] .nav-fab-btn {
    /* HALO Neon Blue Ajustado */
    box-shadow: 
        0 8px 32px 0 var(--glass-shadow), 
        0 0 0 4px rgba(255, 255, 255, 0.1), /* Borde de luz un poco más fino */
        0 0 15px 5px rgba(0, 255, 255, 0.5); /* Difuminado ajustado */
    background: var(--glass-darker-bg);
}

/* Icono FAB en Dark Mode (Aumentado de 28px a 32px) */
[data-theme="dark"] #bottom-nav .nav-fab-btn svg {
    color: var(--color-primary) !important; 
    height: 32px; 
    width: 32px;
}

/* FAB Glow para Modo Claro */
[data-theme="light"] .nav-fab-btn {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.15), 
        0 0 0 1px rgba(0, 0, 0, 0.05), /* Borde sutil */
        0 0 15px 5px rgba(8, 145, 178, 0.4); /* Halo Azul/Cyan */
    border-color: #e2e8f0;
}

/* Colores de los Iconos en Modo Oscuro (botones normales) */
[data-theme="dark"] #bottom-nav .nav-btn svg {
    color: #94a3b8;
    transition: color 0.2s;
}
[data-theme="dark"] #bottom-nav .nav-btn:hover svg {
    color: var(--color-primary);
}
[data-theme="light"] #bottom-nav .nav-btn svg {
    color: #334155 !important;
}
[data-theme="light"] #bottom-nav .nav-btn:hover svg {
    color: #0891b2 !important;
}

/* Borde para la barra de navegación inferior en Modo Claro */
[data-theme="light"] #bottom-nav .glass-effect {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
}


/* ---------------------------------------------------------------------- */
/* --- ESTILOS: Botones de Footer de Gastos/Mantenimiento --- */
/* ---------------------------------------------------------------------- */

.footer-action-btn {
    padding: 12px !important; 
    height: 60px; 
    
    background: var(--btn-gray-glass-bg) !important;
    border: 1px solid var(--btn-gray-glass-border) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.25s ease;
}

.footer-action-btn svg {
    width: 32px !important; 
    height: 32px !important;
    color: var(--text-muted) !important; 
}

.footer-action-btn:hover,
.footer-action-btn:active {
    background: var(--btn-action-cyan-hover-bg) !important;
    border-color: var(--btn-action-cyan) !important;
    box-shadow: 0 0 15px 1px rgba(0, 255, 255, 0.5); /* Glow Neon Blue en hover */
    transform: none; 
}

.footer-action-btn:hover svg,
.footer-action-btn:active svg {
    color: var(--btn-action-cyan) !important; 
    transform: none;
}

/* Sección de Mantenimiento */
[data-theme="light"] #maintenance-modal-content .glass-effect-darker {
    background-color: var(--glass-bg) !important; 
    border: 1px solid #cbd5e1 !important; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
[data-theme="light"] #maintenance-list .swipe-card-wrapper .swipe-content {
    background-color: #ffffff !important; 
    border: 1px solid #cbd5e1 !important; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
[data-theme="light"] #maintenance-list .swipe-card-wrapper .swipe-content h4,
[data-theme="light"] #maintenance-list .swipe-card-wrapper .swipe-content p,
[data-theme="light"] #maintenance-list .swipe-card-wrapper .swipe-content span {
    color: #000000 !important; 
}
[data-theme="light"] #maintenance-list .swipe-content .text-gray-400 {
    color: #475569 !important;
}
[data-theme="light"] #maintenance-list .swipe-content .text-gray-500 {
    color: #64748b !important;
}
[data-theme="light"] #maintenance-tip-container .text-gray-300 {
    color: #000000 !important;
}

/* ---------------------------------------------------------------------- */
/* --- ESTILOS: PASO SELECCIÓN DE IDIOMA --- */
/* ---------------------------------------------------------------------- */

.lang-option-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.lang-option-card:active {
    transform: scale(0.95);
    background-color: rgba(255, 255, 255, 0.15);
}

/* Halo de luz en hover para las tarjetas de idioma */
.lang-option-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at center, rgba(34, 211, 238, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lang-option-card:hover::before {
    opacity: 1;
}

[data-theme="light"] .lang-option-card {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .lang-option-card h3,
[data-theme="light"] .lang-option-card p {
    color: #1e293b !important;
}

[data-theme="light"] .lang-option-card:hover {
    border-color: #0891b2 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .lang-option-card:hover h3 {
    color: #0891b2 !important;
}


/* =========================================
   FIX: ZONA SEGURA (SAFE AREA) - IPHONE/MOBILE
   ========================================= */

/* Aplica padding superior SOLO a los modales que son Full Screen en móviles (p-0).
   Esto baja el contenido pero mantiene el fondo (glass-effect) cubriendo el notch.
*/
@media (max-width: 768px) {
    /* Selecciona el contenedor interno de los modales full-screen.
       La clase .fixed.inset-0.p-0 selecciona el wrapper del modal (que no tiene padding en mobile).
       La clase .glass-effect selecciona el contenedor interno.
    */
    .fixed.inset-0.p-0 > .glass-effect {
        padding-top: env(safe-area-inset-top);
        height: 100%; /* Forzar altura completa */
        box-sizing: border-box; /* Asegurar que el padding no rompa el layout */
    }
}