/* assets/custom.css */

/* Ejemplo: Cambiar el color de todos los H1 y H2 */
h1,
h2 {
    color: #206873;
    /* Un azul oscuro elegante */
    font-weight: bold;
}

/* ==============================BODY============================== */
/* ==============================BODY============================== */
/* ==============================BODY============================== */
body {
    /* 1. Definimos un degradado con varios colores elegantes */
    background: linear-gradient(-55deg, #F4F4F4, #DAFF03, #333333, #2c3e50);

    /* 2. Hacemos que el fondo sea 4 veces más grande que la pantalla */
    background-size: 200% 200%;

    /* 3. Le aplicamos la animación llamada 'gradientMove' que dura 15 segundos y se repite infinito */
    animation: gradientMove 10s ease infinite;

    /* Aseguramos que ocupe todo el alto de la pantalla sin cortes */
    min-height: 100vh;
    margin: 0;
}

/* --- La magia de la animación (Keyframes) --- */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Ejemplo: Personalizar una clase específica que usaste en Dash */
.mi-titulo-especial {
    text-align: center;
    margin-top: 20px;
    text-transform: uppercase;
}


/*================================== HOME ================================== */
/*================================== HOME ================================== */
/* --- Estilos para la página Home --- */

.home-container {
    /* 1. Color base (#00443F en versión RGBA). 
       El último valor (0.4) es la transparencia: 0 es invisible, 1 es sólido */
    background: rgba(0, 68, 63, 0.4);

    /* 2. LA MAGIA: Desenfoca lo que está detrás del contenedor (efecto vidrio) */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* Para que funcione en Safari/Mac */

    /* 3. Un borde blanco ultra fino y casi transparente para darle brillo a la orilla */
    border: 1px solid rgba(255, 255, 255, 0.15);

    /* 4. Una sombra suave para que parezca que flota sobre el fondo animado */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

    padding: 3rem;
    border-radius: 15px;
    position: relative;
}

.logo-home {
    /* Ajusta este valor dependiendo de qué tan grande sea tu PNG original */
    max-width: 550px;
    margin-bottom: 2rem;
    /* Separa el logo del título */
}


/* =========================================
   MENÚ DE BOTONES FLOTANTES
   ========================================= */

.floating-menu {
    position: fixed;
    /* Fija el contenedor a la pantalla */
    left: 20px;
    /* Distancia desde el borde izquierdo */
    top: 50%;
    /* Lo ubica en la mitad vertical de la pantalla */
    transform: translateY(-50%);
    /* Ajuste matemático para que el centro exacto del menú quede en el 50% */

    display: flex;
    flex-direction: column;
    /* Apila los botones de arriba hacia abajo */
    gap: 15px;
    /* Espacio entre cada botón */
    z-index: 1000;
    /* Asegura que los botones floten POR ENCIMA de cualquier gráfico o texto */
}

.floating-btn {
    /* Efecto Vidrio (Glassmorphism) */
    background: rgba(0, 68, 63, 0.4) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;

    color: white !important;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: bold;
    text-align: left;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

    /* Prepara el botón para animarse suavemente */
    transition: all 0.3s ease;
}

/* Efecto al pasar el cursor (Hover) */
.floating-btn:hover {
    background: rgba(218, 255, 3, 0.85) !important;
    /* Se oscurece un poco */
    border-color: rgba(255, 255, 255, 0.6) !important;
    /* El borde brilla más */

    /* Se agranda un 5% y se desliza 5 píxeles a la derecha */
    transform: scale(1.2) translateX(5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* =========================================
   BOTONES DE DESCARGA (Efecto Zoom)
   ========================================= */

.btn-zoom {
    /* Prepara el botón para que cualquier cambio (tamaño, color) sea suave y dure 0.3 segundos */
    transition: all 0.3s ease !important;
    color: rgb(1, 183, 116) !important;
    border-color: white !important;
}

/* El estado :hover se activa cuando el ratón pasa por encima */
.btn-zoom:hover {
    /* transform: scale(1.05) hace que el botón crezca un 5% */
    transform: scale(1.05);
    /* Le agregamos un brillo sutil alrededor para que resalte sobre el fondo oscuro */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important;

    /* Opcional: Hacer que el texto/borde sea 100% blanco puro al hacer hover */
    color: rgb(69, 156, 166) !important;
    border-color: rgb(7, 123, 106) !important;
}


/* =========================================
   ESTILOS MODERNOS PARA LOGIN (Glassmorphism)
   ========================================= */
/* =========================================
   ESTILOS DE LOGIN (Integrados con el Home)
   ========================================= */

/* 1. Hacemos transparente el fondo para que se vea la animación de tu BODY */
.login-background {
    background: transparent;
    min-height: 100vh;
}

/* 2. La tarjeta ahora usa los exactos mismos valores que .home-container */
.modern-login-card {
    background: rgba(0, 68, 63, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    padding: 3rem 2rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    color: white;
}

/* 3. Estilo para los inputs de texto y contraseña */
.modern-input {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 14px 15px !important;
    transition: all 0.3s ease !important;
}

/* Cuando el usuario hace clic en el input (Brillo con tu color #DAFF03) */
.modern-input:focus {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: #DAFF03 !important;
    /* Tu color lima/amarillo */
    box-shadow: 0 0 15px rgba(218, 255, 3, 0.3) !important;
    outline: none;
}

.modern-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 4. El botón de inicio de sesión alineado con tus floating-btn */
.modern-btn {
    background: rgba(0, 68, 63, 0.8) !important;
    /* Verde oscuro base */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    font-weight: bold !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: white !important;
    transition: all 0.3s ease !important;
}

/* Efecto al pasar el mouse por el botón (Hover) */
.modern-btn:hover {
    background: rgba(218, 255, 3, 0.85) !important;
    /* Tu color #DAFF03 */
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
    color: #00443F !important;
    /* Texto oscuro para que se lea bien sobre el amarillo */
}