/* ==========================
   BOTÓN "INICIAR SESIÓN"
   ========================== */
#login-btn {
    display: inline-block;              /* hace que el enlace se comporte como bloque en línea */
    padding: 10px 25px;                 /* espacio interno (alto y ancho del botón) */
    background: #e30613;                /* COLOR DE FONDO del botón (rojo corporativo) */
    color: #ffffff;                     /* COLOR DEL TEXTO (blanco) */
    font-size: 15px;                    /* tamaño de la fuente */
    font-weight: 600;                   /* grosor del texto */
    text-decoration: none;              /* elimina el subrayado de enlace */
    border-radius: 25px;                /* RADIO DE BORDE → define cuán redondeado será el botón */
    box-shadow: 0 4px 6px rgba(0,0,0,0.15); /* sombra base (suavidad) */
    transition: all 0.3s ease;          /* animación suave para hover */
    cursor: pointer;                    /* cursor tipo "mano" al pasar encima */
}

/* Estados interactivos del botón */
#login-btn:hover,
#login-btn:focus,
#login-btn:active,
#login-btn:visited {
    color: #ffffff !important;          /* mantiene el texto SIEMPRE blanco */
    background: #e30613;                /* mantiene el fondo rojo en hover */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.9),  /* SOMBRA LED CELESTE → cambia aquí para modificar color */
                0 0 25px rgba(0, 255, 255, 0.7); 
    transform: translateY(-2px);        /* eleva el botón al pasar el cursor */
    text-decoration: none;              /* asegura que nunca se subraye */
}

/* ==========================
   LOGO COMO BOTÓN (IMAGEN PNG)
   ========================== */
#logo-img {
    height: 50px;                       /* ALTURA del logo → cámbiala para hacerlo más grande o pequeño */
    width: auto;                        /* mantiene proporción del logo */
    transition: all 0.3s ease;          /* transición suave para hover */
    border-radius: 25px;                /* RADIO DE BORDE → mantiene consistencia visual con el botón */
}

/* Efecto hover para el logo */
#logo-img:hover {
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.9),  /* SOMBRA LED CELESTE → cámbiala aquí si quieres otro color */
                0 0 25px rgba(0, 255, 255, 0.7);
    transform: translateY(-2px);        /* eleva el logo al pasar el cursor */
}