/* Ajustes propios de EcoUrbana sobre styles.css (copia del original). */

/* Header abajo, no arriba */
.main-header { top: auto; bottom: 16px; }
@media (max-width: 768px) { .main-header { top: auto; bottom: 12px; } }
@media (max-width: 480px) { .main-header { top: auto; bottom: 8px; } }

/* Controles flotantes: por encima del header */
.fixed-controls { bottom: 96px; }
.custom-location-control { bottom: 96px !important; }
.location-popover { bottom: 102px; }
@media (max-width: 768px) {
    .fixed-controls { bottom: 84px !important; }
    .custom-location-control { bottom: 84px !important; }
    .location-popover { bottom: 90px; }
}
@media (max-width: 480px) {
    .fixed-controls { bottom: 76px !important; }
    .custom-location-control { bottom: 76px !important; }
    .location-popover { bottom: 82px; }
}

/* Zoom arriba (ya no hay header arriba) y banner arriba */
.leaflet-control-zoom { margin-top: 16px !important; }
@media (max-width: 768px) { .leaflet-control-zoom { margin-top: 12px !important; } }
.service-status-banner { top: 16px; }

/* Popovers de los botones del header: hacia arriba */
.settings-popover, .user-popover {
    top: auto; bottom: calc(100% + 10px); right: 0;
}
.user-popover {
    position: absolute;
    background: var(--glass-bg); backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border); border-radius: var(--border-radius-sm);
    padding: 8px 12px; white-space: nowrap; font-size: 0.78rem; font-weight: 600;
    color: var(--text-secondary); box-shadow: var(--shadow-lg);
    pointer-events: none; opacity: 0; transition: opacity .15s;
}
.user-popover.show { opacity: 1; }

/* Todos los botones redondos comparten forma, tamaño y colores */
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-actions .options-menu { position: relative; }
.options-toggle, .filter-button, .info-panel, .custom-location-control {
    width: 48px !important; height: 48px !important; border-radius: 50% !important;
    background: var(--tertiary-bg) !important; color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important; box-shadow: var(--shadow-lg);
    font-size: 1.25rem !important; transition: var(--transition);
}
.options-toggle:hover, .filter-button:hover, .info-panel:hover, .custom-location-control:hover {
    background: var(--accent-color) !important; border-color: var(--accent-color) !important;
    color: #fff !important; transform: translateY(-2px);
}
/* Seleccionado: mismo relleno de acento, más oscuro al pasar el mouse */
.options-toggle.active, .filter-button.active {
    background: var(--accent-color) !important; border-color: var(--accent-color) !important;
    color: #fff !important; transform: none;
}
.options-toggle.active:hover, .filter-button.active:hover { background: var(--accent-hover) !important; transform: translateY(-2px); }
@media (max-width: 768px) {
    .options-toggle, .filter-button, .info-panel, .custom-location-control { width: 44px !important; height: 44px !important; font-size: 1.1rem !important; }
}
@media (max-width: 480px) {
    .options-toggle, .filter-button, .info-panel, .custom-location-control { width: 42px !important; height: 42px !important; font-size: 1.05rem !important; }
}

/* Reportar: el hover se rellena sólido (no transparente) */
.report-problem { color: var(--error-color) !important; }
.report-problem:hover {
    background: var(--error-color) !important;
    border-color: var(--error-color) !important;
    color: #fff !important;
}

/* Filas del modal de ajustes */
.setting-row { margin-bottom: 1.25rem; }
.setting-row .form-label { display: flex; justify-content: space-between; align-items: center; }
.map-style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.list-btn { display: flex; align-items: center; gap: 12px; text-align: left; }

/* Insignia "Gestión sostenible" del header: sólo en pantallas con lugar */
.header-left .eco-badge { display: none; }
@media (min-width: 560px) { .header-left .eco-badge { display: inline-flex; } }
.header-left { align-items: center; }

/* Estilos de mapa por filtro (sobre el mapa base de OpenStreetMap) */
#map.map-light .leaflet-tile-pane { filter: brightness(1.08) contrast(.88) saturate(.6); }
#map.map-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.8); }
#map.map-gris .leaflet-tile-pane { filter: grayscale(1); }
#map.map-sepia .leaflet-tile-pane { filter: sepia(.75) saturate(.9); }

/* Modales: mismo radio en las cuatro esquinas, todos iguales */
.modal-content { border-radius: var(--border-radius-lg) !important; overflow: hidden; width: 30rem; max-width: 100%; }
.modal-header { border-radius: 0 !important; }
.modal-body { border-radius: 0; }

/* Botones dentro de modales: el texto siempre legible, también en hover/seleccionado */
.modal .btn-outline-primary { color: var(--accent-color); background: transparent; border-color: var(--accent-color); }
.modal .btn-outline-primary:hover,
.modal .btn-outline-primary:focus-visible,
.modal .btn-check:checked + .btn-outline-primary,
.modal .btn-check:active + .btn-outline-primary {
    background-color: var(--accent-color); border-color: var(--accent-color); color: #fff;
}
.modal .btn-primary, .modal .btn-primary:hover { color: #fff; }
.modal .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-light); background: transparent; }
.modal .btn-outline-secondary:hover { background-color: var(--slate-200); border-color: var(--border-light); color: var(--text-color); }
.modal .btn-outline-danger:hover, .modal .btn-danger, .modal .btn-danger:hover { color: #fff; }
.leaflet-popup-content .btn-outline-danger:hover, .leaflet-popup-content .btn-danger:hover { color: #fff; }
.form-check-input:checked { background-color: var(--accent-color); border-color: var(--accent-color); }