:root { --primary: #000; --accent: #25D366; --bg: #f8f9fa; }
body { font-family: -apple-system, sans-serif; margin: 0; background: var(--bg); overflow-x: hidden; }
.header { background: var(--primary); color: white; padding: 15px; text-align: center; }
.screen { display: none; padding: 20px; max-width: 600px; margin: 0 auto; }
.screen.active { display: block; }
input, select { width: 100%; padding: 15px; margin-bottom: 12px; border-radius: 12px; border: 1px solid #ddd; box-sizing: border-box; font-size: 16px; }
.btn-main { width: 100%; padding: 18px; background: var(--primary); color: white; border: none; border-radius: 12px; font-weight: bold; font-size: 16px; cursor: pointer; transition: 0.3s; }
.btn-main:active { transform: scale(0.98); opacity: 0.9; }

/* Mapa y Manchas */
#map-container { position: relative; width: 100%; height: 500px; display: none; margin: 15px auto; max-width: 600px; border: 2px solid #ccc; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
#map { width: 100%; height: 100%; margin: 0; padding: 0; }
.zone-mancha { filter: blur(15px); pointer-events: none; }
.leaflet-control { background: white !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important; }
.leaflet-control-zoom-in, .leaflet-control-zoom-out { width: 36px !important; height: 36px !important; font-size: 18px !important; }

/* Modal / Pop-up de Confirmación */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; /* background: rgba(0,0,0,0.85); */ background: rgba(0,0,0,0.25); z-index: 10000; pointer-events: none; }
.modal.active { /* display: block; */ display: flex; }
/* Para modales centrales (no Uber) */
.modal.active:not(.uber-modal) { display: flex; justify-content: center; /* align-items: center; */ align-items: flex-end; }
.modal-content { background: white; /* width: 90%; */ width: 100%; /* max-width: 400px; */ max-width: 100%; padding: 25px; /* border-radius: 20px 20px 0 0; */ border-radius: 24px 24px 0 0 !important; text-align: left; /* position: relative; */ position: fixed; bottom: 0; left: 0; height: 50vh; overflow-y: auto; overflow-x: hidden; pointer-events: auto; }

/* En desktop/tablet: modal centrado con vértices superiores redondeados */
@media (min-width: 768px) {
    .modal.active:not(.uber-modal) {
        /* align-items: flex-end; */
        align-items: flex-end;
    }

    .modal-content {
        /* width: 100%; */
        width: 90%;
        /* max-width: 100%; */
        max-width: 520px;
        /* position: fixed; */
        position: fixed;
        /* bottom: 0; */
        bottom: 0;
        /* left: 0; */
        left: 50%;
        /* height: 50vh; */
        height: 50vh;
        transform: translateX(-50%);
        /* border-radius: 24px 24px 0 0; */
        border-radius: 24px 24px 0 0 !important;
    }
}
.summary-box { background: #f4f4f4; padding: 15px; border-radius: 15px; margin: 15px 0; font-size: 14px; line-height: 1.6; }
.modal-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-sec { background: #eee; color: #333; padding: 15px; border-radius: 12px; border: none; cursor: pointer; font-weight: bold; }

/* Autocompletación de direcciones */
.suggestions-container { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    right: 0; 
    background: white; 
    border: 1px solid #ddd; 
    border-top: none;
    border-radius: 0 0 12px 12px; 
    max-height: 300px; 
    overflow-y: auto; 
    z-index: 1000; 
    display: none; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-top: -12px;
    padding-top: 12px;
}

.suggestion-item { 
    padding: 10px 12px; 
    cursor: pointer; 
    border-bottom: 1px solid #f0f0f0; 
    font-size: 13px; 
    color: #333;
    transition: background-color 0.15s;
}

.suggestion-item:hover,
.suggestion-item-selected { 
    background-color: #a9a9a9; 
    color: white;
    font-weight: 500;
}

.suggestion-item-empty { 
    padding: 10px 12px; 
    text-align: center; 
    color: #999; 
    font-size: 12px;
}

/* MODAL UBER-STYLE - COMPLETAMENTE FLOTANTE Y VISIBLE */
.uber-modal-content {
    width: 95% !important;
    max-width: 420px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
    overflow: hidden !important;
    animation: slideUp 0.4s ease-out !important;
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10001 !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    background: white !important;
    text-align: left !important;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}