/* Estilos adicionales para complementar Tailwind */

/* Estilos base para elementos HTML */
* {
    font-family: 'Poppins', sans-serif;
}

body {
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
}

/* Clases utilitarias adicionales */
.text-shadow {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.transition-all {
    transition: all 0.3s ease;
}


/* Header con degradado que se desvanece usando colores personalizados */
.header-gradient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
 
    z-index: 1000;
    background: linear-gradient(to bottom, 
        var(--color-fondo) 0%, 
        rgba(53, 53, 53, 0.9) 25%, 
        rgba(53, 53, 53, 0.7) 50%, 
        rgba(53, 53, 53, 0.4) 75%, 
        rgba(53, 53, 53, 0.1) 90%,
        transparent 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

/* Efecto sutil al hacer hover */
.header-gradient:hover {
    background: linear-gradient(to bottom, 
        var(--color-fondo) 0%, 
        rgba(53, 53, 53, 0.95) 25%, 
        rgba(53, 53, 53, 0.8) 50%, 
        rgba(53, 53, 53, 0.5) 75%, 
        rgba(53, 53, 53, 0.2) 90%,
        transparent 100%);
}


/* Estilos para formularios */
input, textarea, select {
    @apply border border-gray-300 rounded px-3 py-2 w-full;
    font-family: 'Poppins', sans-serif;
}

input:focus, textarea:focus, select:focus {
    @apply border-blue-500 outline-none ring-1 ring-blue-500;
}