/* ========================================
   ESTILOS PARA SCROLL HORIZONTAL (CORREGIDO CON PEEK)
   Sección: Componentes del Sistema
   ======================================== */

.carousel-container {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 1.5rem;
    /* El padding es clave para el "peek" en los extremos */
    padding: 0 1.5rem 2rem 1.5rem; 
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Fuerza el "snap" al inicio de cada tarjeta */
    scroll-snap-type: x mandatory; 
    
    /* Ocultar scrollbar pero mantener funcionalidad */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.carousel-container::-webkit-scrollbar {
    height: 8px;
}

.carousel-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.carousel-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

.carousel-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Tarjetas de componentes - ANCHO Y ALTO MODIFICADOS */
.carousel-card {
    /* --- REGLA DE ANCHO --- */
    flex: 0 0 85%;
    max-width: 450px; 
    
    /* --- MODIFICACIÓN DE ALTURA (SOLICITUD DEL USUARIO) --- */
    min-height: 28rem; /* 448px - Altura aumentada (casi el doble) */
    display: flex;
    flex-direction: column;
    justify-content: center; /* MODIFICADO: Centra verticalmente el contenido */
    align-items: center; /* AÑADIDO: Centra horizontalmente los bloques de contenido */
    text-align: center; /* AÑADIDO: Centra todo el texto por defecto */
    /* --- FIN MODIFICACIÓN --- */
    
    min-width: 280px;
    scroll-snap-align: start; /* Se alinea al inicio del contenedor */
    cursor: pointer;
    position: relative;
    padding: 2rem;
    /* MODIFICADO: Hecho más transparente como solicitaste */
    background: rgba(255, 255, 255, 0.05); 
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15); /* Borde también más sutil */
    transition: all 0.3s ease;
    transform: translateY(0);
}

/* MODIFICADO: Se eliminó la regla .carousel-card:hover 
  para quitar el efecto de iluminación del fondo de la tarjeta.
  El efecto en los botones (<a>) se mantiene, ya que está 
  definido en styles.css
*/

/* Indicador visual de "hay más contenido" */
.carousel-card:last-child::after {
    content: '';
    position: absolute;
    right: -1.5rem;
    top: 0;
    bottom: 0;
    width: 3rem;
    background: linear-gradient(to right, transparent, rgba(20, 99, 20, 0.3));
    pointer-events: none;
}

/* Estilos para el contenido de las tarjetas */
.carousel-card .flex-shrink-0 {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    padding: 0.75rem;
    transition: all 0.3s ease;
}

/* MODIFICADO: Se eliminó .carousel-card:hover .flex-shrink-0
  para que el fondo del ícono no cambie al pasar el mouse por la tarjeta.
  El efecto en el ícono mismo (svg) al pasar el mouse sobre el botón (a)
  se mantiene, ya que está definido en styles.css
*/

/* AÑADIDO: Centra el bloque de (icono + título) y lo apila verticalmente */
.carousel-card .flex {
    flex-direction: column;
    align-items: center;
}

/* AÑADIDO: Quita el margen izquierdo del wrapper del título (que venía de Tailwind) */
.carousel-card .flex > div:last-child {
    margin-left: 0;
}

.carousel-card h3 {
    color: white;
    font-size: 1.25rem;
    font-weight: bold;
    margin-left: 0; /* MODIFICADO: Quitado margen izquierdo */
    margin-top: 0.75rem; /* AÑADIDO: Espacio entre icono y título */
    transition: all 0.3s ease;
    /* text-align: center; ya no es necesario, se hereda de .carousel-card */
}

/* MODIFICADO: Se cambia 'p' por 'p.carousel-card-description' y se ajusta tamaño y margen */
p.carousel-card-description {
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.5rem; /* MODIFICADO: 1rem -> 0.5rem */
    line-height: 1.5; /* MODIFICADO: 1.6 -> 1.5 */
    text-align: center;
    font-size: 0.85rem; /* AÑADIDO: Tamaño claro para PC */
}

.carousel-card .arrow-indicator {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.carousel-card:hover .arrow-indicator {
    opacity: 1;
}

/* --- MEDIA QUERIES SIMPLIFICADAS --- */

/* RESPONSIVE: Móvil (Ajuste ligero) */
@media (max-width: 768px) {
    .carousel-container {
        padding: 0 1rem 1.5rem 1rem;
        gap: 1rem;
    }
    
    .carousel-card {
        flex-basis: 98%; /* MODIFICADO: 88% -> 92% (más ancho) */
        min-width: 260px;
        padding: 1.5rem;
        min-height: 27rem; /* MODIFICADO: 24rem -> 27rem (más alto) */
    }
    
    .carousel-card h3 {
        font-size: 1.1rem;
    }
    
    /* MODIFICADO: Se cambia 'p' por 'p.carousel-card-description' y se achica la letra */
    p.carousel-card-description {
        font-size: 0.75rem; /* MODIFICADO: 0.9rem -> 0.75rem (más pequeño en móvil) */
        line-height: 1.4;
    }
}

/* Animación de entrada */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.carousel-card {
    animation: slideInFromLeft 0.5s ease-out;
}

.carousel-card:nth-child(1) { animation-delay: 0.1s; }
.carousel-card:nth-child(2) { animation-delay: 0.2s; }
.carousel-card:nth-child(3) { animation-delay: 0.3s; }
.carousel-card:nth-child(4) { animation-delay: 0.4s; }
.carousel-card:nth-child(5) { animation-delay: 0.5s; }
.carousel-card:nth-child(6) { animation-delay: 0.6s; }

/* Efectos adicionales de glow para los iconos (Estado base) */
.carousel-card .text-green-300 {
    filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.5));
}

.carousel-card .text-blue-300 {
    filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.5));
}

.carousel-card .text-yellow-300 {
    filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.5));
}

/* Estilos para la paginación de puntos */
.pagination-dots {
    text-align: center;
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dot.active {
    background-color: #ffffff;
}

/* --- Estilos para desactivar carrusel en Desktop --- */
@media (min-width: 769px) {
    .carousel-desktop-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem; /* Añadido para espaciar las tarjetas */
        overflow-x: visible;
        padding: 0 1.5rem; /* Añadido padding horizontal */
        scroll-snap-type: none;
        max-width: 1400px; /* Ancho máximo para el grid */
        margin: 0 auto; /* Centrar el grid */
    }

    #componentes-seguridad .carousel-desktop-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1200px; /* Un ancho más ajustado para 3 columnas */
    }

    #tramites-principales .carousel-card,
    #capacitacion .carousel-card,
    #servicios-adicionales .carousel-card {
        min-height: auto;
        padding: 1.5rem;
    }

    #tramites-principales .carousel-card h3,
    #capacitacion .carousel-card h3,
    #servicios-adicionales .carousel-card h3 {
        font-size: 1.1rem;
    }

    #tramites-principales .carousel-card p,
    #capacitacion .carousel-card p,
    #servicios-adicionales .carousel-card p {
        font-size: 0.85rem;
    }

    .carousel-desktop-grid .carousel-card {
        flex: 1 1 300px;
        scroll-snap-align: none;
        width: auto; /* Permitir que el grid controle el ancho */
        max-width: none; /* Eliminar el max-width de la tarjeta */
    }

    /* Ocultar los puntos en la vista de grid */
    .carousel-desktop-grid + .pagination-dots {
        display: none;
    }
}