:root {
    --red: #EE1D23;
    --dark: #1a1a1a;
    --light: #ffffff;
    --gray: #f2f2f2;
    --dark-gray: #333333;
    --blue-light: #add8e6;
    --blue-bg: #f0f8ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--gray); overflow-x: hidden; scroll-behavior: smooth; }

/* HEADER */
header {
    background: var(--red); color: white; height: 70px;
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.header-logo { position: absolute; left: 15px; height: 50px; cursor: pointer; transition: 0.3s; }
.header-logo:active { transform: scale(0.9); }
.header-title { font-weight: 900; font-size: 14px; letter-spacing: 1px; }

/* NAV BUTTONS */
.nav-buttons { position: absolute; right: 15px; display: flex; gap: 8px; }
.nav-btn {
    background: rgba(255, 255, 255, 0.15); border: none; color: white;
    padding: 8px 14px; border-radius: 25px; font-size: 10px; font-weight: 800;
    text-transform: uppercase; cursor: pointer; transition: 0.3s;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.nav-btn:hover { background: white; color: var(--red); transform: translateY(-2px); }

/* SECCIONES */
#map { height: 80vh; margin-top: 70px; width: 100%; z-index: 1; }
.news-container { padding: 65px; background: white; }
.news-container h3 { margin-bottom: 25px; border-left: 5px solid var(--red); padding-left: 15px; font-size: 24px; }

/* CAROUSEL */
.carousel {
    display: flex; overflow-x: auto; gap: 35px; padding-bottom: 20px;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel-item {
    min-width: 350px; background: var(--gray); border-radius: 20px; overflow: hidden;
    scroll-snap-align: start; text-decoration: none; color: inherit;
    display: flex; flex-direction: column; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.carousel-item img { width: 100%; height: 220px; object-fit: cover; }
.news-info { padding: 20px; }

/* FAB */
.fab {
    position: fixed; bottom: 125px; right: 20px;
    background: var(--red); color: white; width: 65px; height: 65px;
    border-radius: 50%; border: none; font-size: 35px; cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); z-index: 999;
}

/* FOOTER */
footer {
    background: var(--dark-gray); color: #bbb; padding: 40px 20px; text-align: center; width: 100%;
}
.footer-logo { height: 50px; filter: grayscale(1) brightness(2); margin-bottom: 15px; opacity: 0.7; }
.copyright { font-size: 11px; margin-top: 20px; color: #888; }

/* MODALES */
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
.modal-content { background: white; margin: 10vh auto; padding: 25px; width: 95%; max-width: 400px; border-radius: 20px; position: relative; }
.close-btn { float: right; font-size: 24px; cursor: pointer; color: #999; }

.input-group { display: flex; flex-direction: column; width: 100%; }
select, textarea, input { width: 100%; padding: 12px; margin: 8px 0; border: 1px solid #ddd; border-radius: 10px; font-size: 16px; background: #fafafa; transition: 0.2s; }

.invalid { border: 2px solid var(--red) !important; background-color: #fff1f1 !important; }
.error-message { color: var(--red); font-size: 11px; font-weight: bold; display: none; margin-bottom: 5px; padding-left: 5px; }

/* AREA FOTO */
.file-area { background: #f8f9fa; border: 2px dashed #ddd; padding: 15px; border-radius: 10px; text-align: center; margin: 10px 0; font-size: 13px; transition: all 0.3s ease; cursor: pointer; }

/* FORMULARIO ACCIONES */
.row { display: flex; gap: 10px; }
.btn-send { background: var(--red); color: white; border: none; padding: 15px; width: 100%; border-radius: 10px; font-weight: bold; margin-top: 10px; cursor: pointer; transition: 0.3s; }
.btn-send:active { transform: scale(0.98); opacity: 0.9; }

/* TOAST (NOTIFICACIÓN MODERNA) */
.toast-container {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px);
    background: var(--light); color: var(--dark); padding: 15px 25px; border-radius: 12px;
    border-left: 6px solid var(--red); box-shadow: 0 10px 30px rgba(0,0,0,0.15); z-index: 3000;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-weight: 700; font-size: 14px; text-align: left; min-width: 300px; display: flex; align-items: center;
}
.toast-container.show { transform: translateX(-50%) translateY(0); }
.toast-error { background: #fffafa; border-left-color: var(--red); }

/* PIN MAPA */
.custom-marker-icon { display: flex; justify-content: center; align-items: center; }
.marker-pin { width: 38px; height: 38px; border-radius: 50% 50% 50% 0; background: var(--red); position: absolute; transform: rotate(-45deg); left: 50%; top: 50%; margin: -19px 0 0 -19px; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.4); }
.marker-pin::after { content: ''; width: 14px; height: 14px; margin: 9px 0 0 9px; background: #fff; position: absolute; border-radius: 50%; }

@media (max-width: 600px) { .header-title { display: none; } .news-container { padding: 30px 15px; } .carousel-item { min-width: 85vw; } }