/* ===== ESTILOS BASE - TEMA OSCURO ===== */
:root {
    --dark-bg: #0a0a0a;
    --dark-surface: #1a1a1a;
    --dark-surface-2: #2a2a2a;
    --dark-border: #333333;
    --dark-text: #ffffff;
    --dark-text-secondary: #b0b0b0;
    --dark-text-muted: #888888;
    --primary-color: #6366f1;
    --primary-hover: #4f46e5;
    --secondary-color: #8b5cf6;
    --accent-color: #06b6d4;
    --danger-color: #ef4444;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--dark-bg);
    color: var(--dark-text);
    overflow-x: hidden;
}

/* ===== NAVBAR MODERNO ===== */
.navbar {
    background: linear-gradient(135deg, var(--dark-surface) 0%, var(--dark-surface-2) 100%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--dark-border);
    box-shadow: var(--shadow-lg);
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1000;
}

.navbar-brand {
    display: flex;
    align-items: center;
    font-size: 1.5em;
    font-weight: 700;
    color: var(--dark-text);
    text-decoration: none;
    transition: var(--transition);
}

.navbar-brand:hover {
    color: var(--primary-color);
    transform: translateY(-1px);
}

.navbar-logo {
    height: 40px;
    margin-right: 12px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* ===== MAPA ===== */
#map {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--dark-bg), var(--dark-surface));
    transition: filter 0.3s ease-in-out; /* Transición suave para el blur */
}

.map-blurred {
    filter: blur(5px); /* Efecto de desenfoque */
}

/* ===== PANELES Y CONTENEDORES ===== */
#app-container {
    height: calc(100vh - 60px);
    background: var(--dark-bg);
    position: relative; /* Added for correct positioning of absolute children */
    overflow: hidden; /* Prevent horizontal scrollbar during transition */
}

#side-panel {
    background: var(--dark-surface);
    border-right: 1px solid var(--dark-border);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease-in-out; /* Smooth transition for all changes */
    width: 420px; /* Default width */
    max-width: 420px; /* Ensure max-width is defined for transition */
    flex-shrink: 0; /* Prevent shrinking by default */
    flex-basis: 420px; /* Set initial basis */
    display: flex; /* Ensure it's a flex container */
}

#app-container.panel-collapsed #side-panel {
    display: none !important; /* Hide the panel completely */
}

#app-container.panel-collapsed #map {
    width: 100%; /* Map takes full width */
    flex-grow: 1; /* Allow map to grow */
}

#app-container #map {
    transition: width 0.3s ease-in-out; /* Transition for width */
    flex-grow: 1; /* Allow map to grow */
    flex-basis: 0; /* Allow map to shrink */
}

.side-panel {
    background: var(--dark-surface);
    border-right: 1px solid var(--dark-border);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
}

.side-panel-header {
    background: linear-gradient(135deg, var(--dark-surface-2) 0%, var(--dark-surface) 100%);
    border-bottom: 1px solid var(--dark-border);
    padding: 20px;
    color: var(--dark-text);
}

.side-panel-content {
    padding: 20px;
    color: var(--dark-text);
}

/* ===== BOTONES MODERNOS ===== */
.btn {
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: var(--transition);
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-color) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: white;
}

.btn-secondary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #7c3aed 100%);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #7c3aed 0%, var(--secondary-color) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: white;
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, var(--danger-color) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: white;
}

.btn-success {
    background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, var(--success-color) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: white;
}

.btn-outline-primary {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ===== FORMULARIOS MODERNOS ===== */
.form-control, .form-select {
    background: var(--dark-surface-2);
    border: 1px solid var(--dark-border);
    color: #cccccc;
    border-radius: var(--border-radius);
    padding: 12px 16px;
    font-size: 14px;
    transition: var(--transition);
}

.form-control:focus, .form-select:focus {
    background: var(--dark-surface);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    color: #e0e0e0;
    outline: none;
}

.form-control::placeholder {
    color: var(--dark-text-muted);
}

.form-label {
    color: var(--dark-text);
    font-weight: 500;
    margin-bottom: 8px;
}

/* ===== TARJETAS MODERNAS ===== */
.card {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    overflow: hidden;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-color);
}

.card-header {
    background: linear-gradient(135deg, var(--dark-surface-2) 0%, var(--dark-surface) 100%);
    border-bottom: 1px solid var(--dark-border);
    color: var(--dark-text);
    font-weight: 600;
    padding: 20px;
}

.card-body {
    padding: 20px;
    color: var(--dark-text);
}

.card-title {
    color: var(--dark-text);
    font-weight: 600;
}

.card-text {
    color: var(--dark-text-secondary);
}

/* ===== ALERTAS MODERNAS ===== */
.alert {
    border-radius: var(--border-radius);
    border: none;
    padding: 16px 20px;
    margin-bottom: 20px;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}

.alert-primary {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
    color: var(--primary-color);
    border-left: 4px solid var(--primary-color);
}

.alert-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    color: var(--success-color);
    border-left: 4px solid var(--success-color);
}

.alert-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
    color: var(--danger-color);
    border-left: 4px solid var(--danger-color);
}

.alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
    color: var(--warning-color);
    border-left: 4px solid var(--warning-color);
}

/* ===== TABLAS MODERNAS ===== */
.table {
    background: var(--dark-surface);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.table th {
    background: linear-gradient(135deg, var(--dark-surface-2) 0%, var(--dark-surface) 100%);
    color: var(--dark-text);
    font-weight: 600;
    border-bottom: 1px solid var(--dark-border);
    padding: 16px;
}

.table td {
    color: var(--dark-text-secondary);
    border-bottom: 1px solid var(--dark-border);
    padding: 16px;
    transition: var(--transition);
}

.table tbody tr:hover {
    background: var(--dark-surface-2);
}

.table tbody tr:hover td {
    color: var(--dark-text);
}

/* ===== LISTA DE GRUPOS MODERNA ===== */
.list-group {
    background: var(--dark-surface);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.list-group-item {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    color: var(--dark-text-secondary);
    padding: 16px 20px;
    transition: var(--transition);
}

.list-group-item:hover {
    background: var(--dark-surface-2);
    color: var(--dark-text);
    transform: translateX(4px);
}

.list-group-item-header {
    background: linear-gradient(135deg, var(--dark-surface-2) 0%, var(--dark-surface) 100%);
    color: var(--dark-text);
    font-weight: 600;
    border-bottom: 2px solid var(--dark-border);
}

/* ===== SELECTOR DE ICONOS ===== */
.icon-selector {
    margin-bottom: 20px;
    position: relative;
}

.current-icon-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    width: 50px;
    height: 50px;
    border: 2px solid var(--dark-border);
    border-radius: var(--border-radius);
    background: var(--dark-surface-2);
    color: var(--dark-text);
    cursor: pointer;
    transition: var(--transition);
}

.current-icon-display:hover {
    border-color: var(--primary-color);
    background: var(--dark-surface);
    transform: scale(1.05);
}

.icon-picker-panel {
    display: none;
    position: absolute;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    padding: 16px;
    z-index: 1000;
    max-width: 250px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(10px);
}

.icon-picker-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: var(--border-radius);
    margin: 4px;
    transition: var(--transition);
    color: var(--dark-text-secondary);
}

.icon-picker-item:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

/* ===== ICONOS PERSONALIZADOS ===== */
.custom-div-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 24px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    user-select: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* ===== POPUPS MODERNOS ===== */
.marker-popup-content,
.zone-popup-content {
    width: 340px;
    background: linear-gradient(135deg, var(--dark-surface-2) 0%, var(--dark-surface) 100%);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(99,102,241,0.18), 0 2px 8px rgba(0,0,0,0.6);
    border: 2px solid var(--primary-color);
    overflow: hidden;
    position: relative;
    animation: floatCard 0.5s cubic-bezier(0.4,0,0.2,1);
    backdrop-filter: blur(16px);
}

@keyframes floatCard {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.marker-popup-content .marker-info-view,
.marker-popup-content .marker-edit-view,
.zone-popup-content .zone-info-view,
.zone-popup-content .zone-edit-view {
    width: 100%;
    padding: 28px 24px 24px 24px;
    background: transparent;
    color: var(--dark-text);
    position: relative;
}

.marker-popup-content .marker-info-view .view-header,
.zone-popup-content .zone-info-view .view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 14px;
    margin-bottom: 18px;
}

.marker-popup-content .marker-info-view .marker-title,
.zone-popup-content .zone-info-view .zone-title {
    font-size: 1.35em;
    font-weight: 700;
    color: var(--primary-color);
    text-shadow: 0 2px 8px rgba(99,102,241,0.12);
    letter-spacing: 0.5px;
}

.marker-popup-content .marker-info-view .toggle-edit-btn,
.zone-popup-content .zone-info-view .toggle-edit-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-size: 15px;
    padding: 10px 18px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(99,102,241,0.18);
    transition: var(--transition);
}

.marker-popup-content .marker-info-view .toggle-edit-btn:hover,
.zone-popup-content .zone-info-view .toggle-edit-btn:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-color) 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 16px rgba(99,102,241,0.22);
}

.marker-popup-content .marker-info-view .marker-description,
.zone-popup-content .zone-info-view .zone-description {
    margin: 18px 0;
    color: var(--dark-text-secondary);
    line-height: 1.7;
    font-size: 1.05em;
    letter-spacing: 0.2px;
}

.marker-edit-view input[type="text"],
.marker-edit-view textarea,
.zone-edit-view input[type="text"],
.zone-edit-view textarea {
    width: 100%;
    margin-bottom: 18px;
    background: linear-gradient(135deg, var(--dark-surface-2) 0%, var(--dark-surface) 100%);
    border: 2px solid var(--primary-color);
    color: #cccccc;
    border-radius: 8px;
    padding: 14px;
    font-size: 15px;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(99,102,241,0.08);
}

.marker-edit-view input[type="text"]:focus,
.marker-edit-view textarea:focus,
.zone-edit-view input[type="text"]:focus,
.zone-edit-view textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(6,182,212,0.12);
    color: #e0e0e0;
    outline: none;
}

.marker-edit-view .form-label,
.zone-edit-view .form-label {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 0.2px;
}

.marker-edit-view .image-management,
.zone-edit-view .image-management {
    margin-top: 18px;
}

.marker-images-edit .image-item,
.zone-images-edit .image-item {
    position: relative;
    display: inline-block;
    margin: 6px;
}

.marker-images-edit img,
.zone-images-edit img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(99,102,241,0.12);
}

.marker-images-edit img:hover,
.zone-images-edit img:hover {
    border-color: var(--accent-color);
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(6,182,212,0.18);
}

.marker-images-edit .delete-image-btn,
.zone-images-edit .delete-zone-image-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%);
    color: white;
    border: 2px solid var(--dark-surface);
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    width: 22px;
    height: 22px;
    padding: 0;
    text-align: center;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(239,68,68,0.18);
}

.marker-images-edit .delete-image-btn:hover,
.zone-images-edit .delete-zone-image-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 16px rgba(239,68,68,0.22);
}

/* Animación de entrada para los formularios flotantes */
.marker-edit-view,
.zone-edit-view {
    animation: fadeIn 0.5s cubic-bezier(0.4,0,0.2,1);
}

/* ===== PÁGINA DE LOGIN MODERNA ===== */
.login-container {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-surface) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-card {
    background: var(--dark-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--dark-border);
    overflow: hidden;
    backdrop-filter: blur(10px);
    max-width: 400px;
    width: 100%;
}

.login-card .card-body {
    padding: 40px;
}

.login-logo {
    width: 120px;
    height: auto;
    margin-bottom: 24px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.login-title {
    color: var(--dark-text);
    font-weight: 700;
    margin-bottom: 24px;
    text-align: center;
}

/* ===== PÁGINA DE BIENVENIDA ===== */
.welcome-hero {
    min-height: calc(100vh - 60px);
    background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-surface) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
}

.welcome-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.welcome-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.welcome-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--dark-text);
    margin-bottom: 24px;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.welcome-subtitle {
    font-size: 1.25rem;
    color: var(--dark-text-secondary);
    margin-bottom: 32px;
    line-height: 1.6;
}

.welcome-btn {
    font-size: 1.1rem;
    padding: 16px 32px;
    border-radius: var(--border-radius-lg);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== SECCIONES DE CONTENIDO ===== */
.content-section {
    background: var(--dark-surface);
    padding: 60px 0;
    border-top: 1px solid var(--dark-border);
}

.content-section h2 {
    color: var(--dark-text);
    font-weight: 700;
    margin-bottom: 32px;
    text-align: center;
}

.content-section h3 {
    color: var(--dark-text);
    font-weight: 600;
    margin-bottom: 20px;
}

.content-section p {
    color: var(--dark-text-secondary);
    line-height: 1.7;
    margin-bottom: 20px;
}

.content-section .lead {
    color: var(--dark-text);
    font-size: 1.1rem;
    font-weight: 500;
}

/* ===== BOTÓN FLOTANTE ===== */
.floating-btn {
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
    z-index: 1000;
    top: 20px;
    left: 20px;
}

.floating-btn:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-xl);
    color: white;
}

.floating-btn i {
    font-size: 1.5rem;
}

/* ===== BOTÓN FLOTANTE para mostrar panel ===== */
#show-side-panel-btn {
    position: absolute;
    top: 80px; /* Ajusta según la altura de tu navbar */
    left: 20px;
    z-index: 999; /* Debe estar por debajo del panel cuando está abierto */
    display: none; /* Oculto por defecto */
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

#show-side-panel-btn.show {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* ===== BOTÓN DE SCROLL ===== */
.scroll-down-container {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.scroll-down-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.scroll-down-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    color: white;
}

.scroll-down-btn i {
    font-size: 1.2rem;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-5px);
    }
    60% {
        transform: translateY(-3px);
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .welcome-title {
        font-size: 2rem;
    }
    
    .welcome-subtitle {
        font-size: 1rem;
    }
    
    .login-card .card-body {
        padding: 30px 20px;
    }
    
    .content-section {
        padding: 40px 20px;
    }
    
    .floating-btn {
        width: 50px;
        height: 50px;
        top: 15px;
        left: 15px;
    }
    
    .floating-btn i {
        font-size: 1.2rem;
    }
}

/* ===== SCROLLBAR PERSONALIZADA ===== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--dark-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--dark-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* ===== ANIMACIONES ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in {
    animation: slideIn 0.4s ease-out;
}

/* ===== ESTADOS DE CARGA ===== */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Layer Control Hover Effect */
#layer-control-container {
    position: absolute;
    top: 20px; /* Moved higher */
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#layer-control-container .custom-layer-control {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    background: transparent; /* Ensure no background */
    box-shadow: none; /* Ensure no shadow */
}

#layer-control-container:hover .custom-layer-control,
#layer-control-container .custom-layer-control.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.layer-button {
    background-color: var(--dark-surface);
    border: 1px solid var(--dark-border);
    color: var(--dark-text);
    padding: 10px 15px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    width: 150px; /* Fixed width for consistency */
    justify-content: flex-start;
}

.layer-button:hover {
    background-color: var(--dark-surface-2);
    border-color: var(--primary-color);
    transform: translateX(-3px);
}

.layer-button.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.layer-button .layer-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid var(--dark-text-secondary);
    margin-left: auto; /* Pushes the indicator to the right */
}

.layer-button.active .layer-indicator {
    background-color: white;
    border-color: white;
}


.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--primary-color);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== ESTILOS ADICIONALES PARA CAMPOS DE FORMULARIO ===== */
/* Asegurar que todos los tipos de input tengan el mismo estilo que en denuncias.php */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="datetime-local"],
textarea,
select,
.form-control,
.form-select,
.form-control-sm,
.form-select-sm {
    background-color: #2a2a2a !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

/* Estilos cuando están enfocados */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus,
.form-control-sm:focus,
.form-select-sm:focus {
    background-color: #3a3a3a !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important;
}

/* Estilos para placeholders */
input::placeholder,
textarea::placeholder,
.form-control::placeholder,
.form-select::placeholder {
    color: #888888 !important;
}

/* Estilos específicos para textareas */
textarea.form-control {
    background-color: #2a2a2a !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

textarea.form-control:focus {
    background-color: #3a3a3a !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

/* Estilos para elementos de formulario dentro de modales */
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="number"],
.modal textarea,
.modal select,
.modal .form-control,
.modal .form-select {
    background-color: #2a2a2a !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

.modal input[type="text"]:focus,
.modal input[type="email"]:focus,
.modal input[type="password"]:focus,
.modal input[type="number"]:focus,
.modal textarea:focus,
.modal select:focus,
.modal .form-control:focus,
.modal .form-select:focus {
    background-color: #3a3a3a !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important;
}

/* Estilos específicos para formularios de login y registro */
.login-container input[type="text"],
.login-container input[type="password"],
.login-container .form-control {
    background-color: #2a2a2a !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

.login-container input[type="text"]:focus,
.login-container input[type="password"]:focus,
.login-container .form-control:focus {
    background-color: #3a3a3a !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important;
}

/* Estilos para formularios de cambio de contraseña */
.card input[type="password"],
.card .form-control {
    background-color: #2a2a2a !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

.card input[type="password"]:focus,
.card .form-control:focus {
    background-color: #3a3a3a !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important;
}

/* Estilos para formularios de administración */
.admin-users input[type="text"],
.admin-users input[type="password"],
.admin-users select,
.admin-users .form-control,
.admin-users .form-select {
    background-color: #2a2a2a !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

.admin-users input[type="text"]:focus,
.admin-users input[type="password"]:focus,
.admin-users select:focus,
.admin-users .form-control:focus,
.admin-users .form-select:focus {
    background-color: #3a3a3a !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important;
}

/* Estilos para formularios de denuncias */
.ver-denuncia input[type="text"],
.ver-denuncia select,
.ver-denuncia .form-control,
.ver-denuncia .form-select {
    background-color: #2a2a2a !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

.ver-denuncia input[type="text"]:focus,
.ver-denuncia select:focus,
.ver-denuncia .form-control:focus,
.ver-denuncia .form-select:focus {
    background-color: #3a3a3a !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important;
}

/* Estilos para todos los formularios en general */
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="number"],
body input[type="tel"],
body input[type="url"],
body input[type="search"],
body input[type="date"],
body input[type="time"],
body input[type="month"],
body input[type="week"],
body input[type="datetime-local"],
body textarea,
body select,
body .form-control,
body .form-select {
    color: #cccccc !important;
}

body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="password"]:focus,
body input[type="number"]:focus,
body input[type="tel"]:focus,
body input[type="url"]:focus,
body input[type="search"]:focus,
body input[type="date"]:focus,
body input[type="time"]:focus,
body input[type="month"]:focus,
body input[type="week"]:focus,
body input[type="datetime-local"]:focus,
body textarea:focus,
body select:focus,
body .form-control:focus,
body .form-select:focus {
    color: #e0e0e0 !important;
}

/* Estilos adicionales para asegurar cobertura completa */
/* Para formularios dentro de contenedores específicos */
.container input[type="text"],
.container input[type="email"],
.container input[type="password"],
.container input[type="number"],
.container textarea,
.container select,
.container .form-control,
.container .form-select {
    color: #ffffff !important;
}

.container input[type="text"]:focus,
.container input[type="email"]:focus,
.container input[type="password"]:focus,
.container input[type="number"]:focus,
.container textarea:focus,
.container select:focus,
.container .form-control:focus,
.container .form-select:focus {
    color: #ffffff !important;
}

/* Para formularios dentro de cards */
.card-body input[type="text"],
.card-body input[type="email"],
.card-body input[type="password"],
.card-body input[type="number"],
.card-body textarea,
.card-body select,
.card-body .form-control,
.card-body .form-select {
    color: #ffffff !important;
}

.card-body input[type="text"]:focus,
.card-body input[type="email"]:focus,
.card-body input[type="password"]:focus,
.card-body input[type="number"]:focus,
.card-body textarea:focus,
.card-body select:focus,
.card-body .form-control:focus,
.card-body .form-select:focus {
    color: #ffffff !important;
}

/* Para formularios dentro de modales específicos */
#createUserModal input[type="text"],
#createUserModal input[type="password"],
#createUserModal select,
#createUserModal .form-control,
#createUserModal .form-select {
    color: #ffffff !important;
}

#createUserModal input[type="text"]:focus,
#createUserModal input[type="password"]:focus,
#createUserModal select:focus,
#createUserModal .form-control:focus,
#createUserModal .form-select:focus {
    color: #ffffff !important;
}

#editUserModal input[type="text"],
#editUserModal input[type="password"],
#editUserModal select,
#editUserModal .form-control,
#editUserModal .form-select {
    color: #ffffff !important;
}

#editUserModal input[type="text"]:focus,
#editUserModal input[type="password"]:focus,
#editUserModal select:focus,
#editUserModal .form-control:focus,
#editUserModal .form-select:focus {
    color: #ffffff !important;
}

/* Para formularios de login específicos */
.login-card input[type="text"],
.login-card input[type="password"],
.login-card .form-control {
    color: #ffffff !important;
}

.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus,
.login-card .form-control:focus {
    color: #ffffff !important;
}

/* Para formularios de perfil */
.profile-container input[type="password"],
.profile-container .form-control {
    color: #ffffff !important;
}

.profile-container input[type="password"]:focus,
.profile-container .form-control:focus {
    color: #ffffff !important;
}

/* Para formularios de denuncias */
.denuncia-container input[type="text"],
.denuncia-container select,
.denuncia-container .form-control,
.denuncia-container .form-select {
    color: #ffffff !important;
}

.denuncia-container input[type="text"]:focus,
.denuncia-container select:focus,
.denuncia-container .form-control:focus,
.denuncia-container .form-select:focus {
    color: #ffffff !important;
}

/* Estilos para elementos de formulario con clases específicas */
.form-control-sm,
.form-select-sm {
    color: #ffffff !important;
}

.form-control-sm:focus,
.form-select-sm:focus {
    color: #ffffff !important;
}

/* Estilos para elementos de formulario con IDs específicos */
#username,
#password,
#password_confirm,
#current_password,
#new_password,
#confirm_password,
#editUsername,
#editPassword,
#editRole,
#editDiscordId,
#discordId,
#role {
    color: #ffffff !important;
}

#username:focus,
#password:focus,
#password_confirm:focus,
#current_password:focus,
#new_password:focus,
#confirm_password:focus,
#editUsername:focus,
#editPassword:focus,
#editRole:focus,
#editDiscordId:focus,
#discordId:focus,
#role:focus {
    color: #ffffff !important;
}

/* Estilos para elementos de formulario con nombres específicos */
input[name="username"],
input[name="password"],
input[name="password_confirm"],
input[name="current_password"],
input[name="new_password"],
input[name="confirm_password"],
input[name="discord_id"],
input[name="role"],
select[name="role"],
select[name="estado"],
select[name="assigned_user_id"] {
    color: #ffffff !important;
}

input[name="username"]:focus,
input[name="password"]:focus,
input[name="password_confirm"]:focus,
input[name="current_password"]:focus,
input[name="new_password"]:focus,
input[name="confirm_password"]:focus,
input[name="discord_id"]:focus,
input[name="role"]:focus,
select[name="role"]:focus,
select[name="estado"]:focus,
select[name="assigned_user_id"]:focus {
    color: #ffffff !important;
}

/* Estilos específicos para formularios del mapa principal */
#app-container input[type="text"],
#app-container input[type="email"],
#app-container input[type="password"],
#app-container input[type="number"],
#app-container input[type="search"],
#app-container textarea,
#app-container select,
#app-container .form-control,
#app-container .form-select,
#app-container .form-control-sm,
#app-container .form-select-sm {
    color: #ffffff !important;
}

#app-container input[type="text"]:focus,
#app-container input[type="email"]:focus,
#app-container input[type="password"]:focus,
#app-container input[type="number"]:focus,
#app-container input[type="search"]:focus,
#app-container textarea:focus,
#app-container select:focus,
#app-container .form-control:focus,
#app-container .form-select:focus,
#app-container .form-control-sm:focus,
#app-container .form-select-sm:focus {
    color: #ffffff !important;
}

/* Estilos para formularios dentro de popups del mapa */
.marker-popup-content input[type="text"],
.marker-popup-content textarea,
.marker-popup-content .form-control,
.marker-popup-content .form-control-sm {
    color: #ffffff !important;
}

.marker-popup-content input[type="text"]:focus,
.marker-popup-content textarea:focus,
.marker-popup-content .form-control:focus,
.marker-popup-content .form-control-sm:focus {
    color: #ffffff !important;
}

.zone-popup-content input[type="text"],
.zone-popup-content textarea,
.zone-popup-content .form-control,
.zone-popup-content .form-control-sm {
    color: #ffffff !important;
}

.zone-popup-content input[type="text"]:focus,
.zone-popup-content textarea:focus,
.zone-popup-content .form-control:focus,
.zone-popup-content .form-control-sm:focus {
    color: #ffffff !important;
}

/* Estilos para formularios dentro de side panels */
.side-panel input[type="text"],
.side-panel input[type="search"],
.side-panel textarea,
.side-panel .form-control,
.side-panel .form-control-sm {
    color: #ffffff !important;
}

.side-panel input[type="text"]:focus,
.side-panel input[type="search"]:focus,
.side-panel textarea:focus,
.side-panel .form-control:focus,
.side-panel .form-control-sm:focus {
    color: #ffffff !important;
}

/* Estilos para formularios dentro de cualquier contenedor */
* input[type="text"],
* input[type="email"],
* input[type="password"],
* input[type="number"],
* input[type="tel"],
* input[type="url"],
* input[type="search"],
* input[type="date"],
* input[type="time"],
* input[type="month"],
* input[type="week"],
* input[type="datetime-local"],
* textarea,
* select,
* .form-control,
* .form-select {
    background-color: #2a2a2a !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

* input[type="text"]:focus,
* input[type="email"]:focus,
* input[type="password"]:focus,
* input[type="number"]:focus,
* input[type="tel"]:focus,
* input[type="url"]:focus,
* input[type="search"]:focus,
* input[type="date"]:focus,
* input[type="time"]:focus,
* input[type="month"]:focus,
* input[type="week"]:focus,
* input[type="datetime-local"]:focus,
* textarea:focus,
* select:focus,
* .form-control:focus,
* .form-select:focus {
    background-color: #3a3a3a !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important;
}

/* Loading Overlay Styles */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5em;
    z-index: 1001; /* Above the map */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.loading-overlay.show {
    opacity: 1;
    visibility: visible;
}

.loading-spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Log colors */
.log-create { background-color: #28a745 !important; color: white; } /* Green */
.log-update { background-color: #ffc107 !important; color: black; } /* Orange */
.log-delete { background-color: #dc3545 !important; color: white; } /* Red */
.log-info { background-color: #17a2b8 !important; color: white; } /* Cyan */
.log-error { background-color: #800000 !important; color: white; } /* Maroon */




/* Botón para mostrar el panel lateral */
#show-side-panel-btn {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 50%; /* Centrado verticalmente */
    left: 20px; /* Separado del borde izquierdo */
    transform: translateY(-50%); /* Ajusta para centrar completamente */
    z-index: 1000;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    opacity: 0; /* Asegura que esté oculto inicialmente */
    visibility: hidden; /* Oculta visualmente */
}

#show-side-panel-btn.show {
    display: block; /* Lo hace visible */
    opacity: 1; /* Asegura que sea completamente visible */
    visibility: visible; /* Lo muestra visualmente */
}

#show-side-panel-btn:hover {
    background-color: #0056b3;
    transform: translateY(-50%) scale(1.1); /* Mantiene el centrado al escalar */
}

/* Botón para ocultar/mostrar el panel lateral */
#toggle-side-panel-btn {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

#toggle-side-panel-btn:hover {
    background-color: #0056b3;
}