/**
 * Localizaciones Module - Estilos
 */

/* Utilities ya definidas en los inline styles de los templates */

.form-input,
.form-select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: var(--ia-elev);
    border: 1px solid var(--ia-border);
    border-radius: 0.375rem;
    color: var(--ia-text);
    font-size: 0.875rem;
}

.text-muted {
    color: var(--ia-muted);
}

/* ============================================================================
   MOBILE RESPONSIVE
   ============================================================================ */

@media (max-width: 767px) {
    .localizaciones-container {
        padding: 1rem;
    }
    
    /* Map container */
    #map-container {
        height: 50vh !important;
        min-height: 300px;
    }
    
    /* Location cards */
    .locations-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .location-card {
        padding: 1rem;
    }
    
    .location-image {
        height: 180px;
    }
    
    /* Search and filters */
    .search-bar {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .search-input {
        width: 100%;
        font-size: 16px !important;
    }
    
    .filters-row {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .filter-group {
        width: 100%;
    }
    
    select, input {
        font-size: 16px !important;
        min-height: 44px;
    }
    
    /* Location details */
    .location-details {
        flex-direction: column;
    }
    
    .location-actions {
        width: 100%;
        flex-direction: column;
    }
    
    .location-actions .btn {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .localizaciones-container {
        padding: 0.75rem;
    }
    
    #map-container {
        height: 40vh !important;
        min-height: 250px;
    }
}