/* style.css */

/* Variables */
:root {
    --color-principal: #000000;   /* Negro Puro */
    --color-acento: #a0d9b4;      /* Verde Claro */
    --color-claro: #f0f2f5;       /* Gris Fondo */
    --color-texto-claro: #ffffff;
}

body { font-family: 'Roboto', sans-serif; background-color: var(--color-claro); color: var(--color-principal); }

/* Tipografía y Utilidades */
h1, h2, h3, h4 { font-weight: 700; color: var(--color-principal); }
.text-acento { color: var(--color-acento) !important; }
.display-5 { font-size: 2.5rem; }

/* Navbar */
.navbar { background-color: var(--color-principal) !important; }
.nav-link { color: var(--color-texto-claro) !important; font-weight: 500; }
.nav-link:hover { color: var(--color-acento) !important; }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; }

/* Botones */
.btn-acento, .btn-dark {
    background-color: var(--color-acento); border-color: var(--color-acento); color: var(--color-principal) !important; font-weight: 600;
}
.btn-acento:hover, .btn-dark:hover { background-color: #7ab38e !important; transform: translateY(-1px); }
.btn-outline-dark { color: var(--color-principal); border-color: var(--color-principal); }
.btn-outline-dark:hover { background-color: var(--color-principal); color: var(--color-texto-claro); }

/* Tarjetas */
.card-programa { border: none; border-radius: 12px; transition: transform 0.3s, box-shadow 0.3s; cursor: grab; }
.card-programa:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
.card-img-top { height: 180px; object-fit: cover; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.badge.bg-acento { background-color: var(--color-acento) !important; color: var(--color-principal); }

/* Galería Horizontal */
.gallery-container-wrapper { position: relative; }
.horizontal-gallery { display: flex; overflow-x: scroll; padding: 1rem 0; scroll-behavior: smooth; cursor: grab; scrollbar-width: none; }
.horizontal-gallery::-webkit-scrollbar { display: none; }
.horizontal-gallery.active { cursor: grabbing; }
.card-wrapper { flex: 0 0 300px; max-width: 300px; margin-right: 15px; }
@media(max-width:576px){ .card-wrapper{ flex: 0 0 85%; } }

.gallery-nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: var(--color-principal); color: white; width: 45px; height: 45px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; z-index: 10; border: none;
}
.gallery-nav-btn:hover { background: var(--color-acento); color: black; }
.gallery-nav-btn.left { left: -20px; }
.gallery-nav-btn.right { right: -20px; }
@media(max-width:768px){ .gallery-nav-btn{ display:none; } }

/* Modales y Tablas */
.modal-header { background: var(--color-principal); color: white; border: none; }
.modal-title { color: white !important; }
.modal-header .btn-close { filter: invert(1); }

/* ESTILO TECNOLÓGICO PARA TABLAS */
.tabla-tecnologica {
    background-color: var(--color-principal); color: white; border-radius: 8px; overflow: hidden; width: 100%; border: 1px solid var(--color-acento); margin-bottom: 1rem;
}
.tabla-tecnologica thead tr { background-color: var(--color-acento); color: black; font-weight: bold; }
.tabla-tecnologica th, .tabla-tecnologica td { padding: 0.75rem; border-bottom: 1px solid rgba(160,217,180,0.3); }
.alert-costo { background: black; color: var(--color-acento); border: 2px solid var(--color-acento); font-weight: bold; }

/* Footer & WhatsApp */
.site-footer { background: var(--color-principal); color: white; padding: 2rem 0; margin-top: 5rem; text-align: center; }
.whatsapp-float {
    position: fixed; bottom: 40px; right: 40px; background: #25d366; color: white; width: 60px; height: 60px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.whatsapp-float:hover { color: white; transform: scale(1.1); }