/* 
 * EV Theme - Green Eco Colors
 * Tema verde ecológico para páginas de vehículos eléctricos
 */

:root {
    /* Green Eco Palette */
    --ev-primary: #10b981;
    /* Emerald green */
    --ev-primary-dark: #059669;
    /* Darker emerald */
    --ev-primary-light: #34d399;
    /* Light emerald */
    --ev-accent: #14b8a6;
    /* Teal */
    --ev-accent-dark: #0d9488;
    /* Dark teal */

    /* Gradients */
    --ev-gradient: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    --ev-gradient-dark: linear-gradient(135deg, #059669 0%, #0d9488 100%);
    --ev-gradient-light: linear-gradient(135deg, #34d399 0%, #2dd4bf 100%);

    /* Backgrounds */
    --ev-bg-light: #ecfdf5;
    /* Very light green */
    --ev-bg-medium: #d1fae5;
    /* Light green */

    /* Text */
    --ev-text-primary: #064e3b;
    /* Dark green */
    --ev-text-secondary: #047857;
    /* Medium green */

    /* Borders */
    --ev-border: #a7f3d0;
    /* Light green border */
    --ev-border-dark: #6ee7b7;
    /* Medium green border */
}

/* Header verde para páginas EV */
.ev-page .route-header,
.ev-page .page-header {
    background: var(--ev-gradient) !important;
    color: white;
}

/* Botones primarios verdes */
.ev-page .btn-primary,
.ev-page .nav-cta {
    background: var(--ev-gradient) !important;
    box-shadow: 0 18px 34px -22px rgba(16, 185, 129, 0.85) !important;
}

.ev-page .btn-primary:hover,
.ev-page .nav-cta:hover {
    background: var(--ev-gradient-dark) !important;
}

/* Enlaces y acentos */
.ev-page a:not(.btn):not(.nav-link):hover {
    color: var(--ev-primary);
}

.ev-page .form-group label i {
    color: var(--ev-primary) !important;
}

.ev-page .form-group input:focus,
.ev-page .form-group select:focus {
    border-color: var(--ev-primary) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1) !important;
}

/* Badges y pills */
.ev-page .badge,
.ev-page .pill {
    background: var(--ev-bg-medium);
    color: var(--ev-text-primary);
    border: 1px solid var(--ev-border);
}

/* Cards con borde verde */
.ev-page .card,
.ev-page .route-form-card {
    border-left: 4px solid var(--ev-primary);
}

/* Iconos verdes */
.ev-page .fa-charging-station,
.ev-page .fa-bolt,
.ev-page .fa-leaf,
.ev-page .fa-plug {
    color: var(--ev-primary);
}

/* Stats y métricas */
.ev-page .stat-value {
    color: var(--ev-primary) !important;
}

/* Autocomplete hover */
.ev-page .autocomplete-item:hover,
.ev-page .autocomplete-item.selected {
    background: var(--ev-bg-light) !important;
}

/* Links activos en navegación */
.ev-page .nav-link-active {
    background: rgba(16, 185, 129, 0.12) !important;
    color: var(--ev-text-primary) !important;
}

/* Breadcrumbs */
.ev-page .breadcrumb a:hover {
    color: var(--ev-primary) !important;
}

/* Province cards */
.ev-page .province-card:hover {
    border-color: var(--ev-primary) !important;
    box-shadow: 0 12px 24px -8px rgba(16, 185, 129, 0.25) !important;
}

/* Markers y puntos en mapa */
.ev-page .leaflet-marker-icon {
    filter: hue-rotate(90deg);
    /* Convierte azul a verde */
}

/* Spinner verde */
.ev-page .spinner {
    border-top-color: var(--ev-primary) !important;
}

/* Secciones destacadas */
.ev-page .highlight-section {
    background: var(--ev-bg-light);
    border-left: 4px solid var(--ev-primary);
}

/* Footer links en páginas EV */
.ev-page footer .footer-title {
    color: var(--ev-text-primary);
}

/* Tablas */
.ev-page table thead {
    background: var(--ev-bg-medium);
    color: var(--ev-text-primary);
}

.ev-page table tbody tr:hover {
    background: var(--ev-bg-light);
}

/* Progress bars */
.ev-page .progress-bar {
    background: var(--ev-gradient);
}

/* Alerts y notificaciones */
.ev-page .alert-success {
    background: var(--ev-bg-light);
    border-color: var(--ev-border-dark);
    color: var(--ev-text-primary);
}

/* Responsive */
@media (max-width: 768px) {

    .ev-page .route-header h1,
    .ev-page .page-header h1 {
        font-size: 1.8rem;
    }
}