/* ============================================================
   EduTec Manager — Inicio y cierre de sesión
   Archivo: assets/css/c-login.css
   Shortcodes: [etm_login] [etm_salir]
   !important en botones: el tema (Hello Elementor) estiliza
   [type=button] y button con borde y texto rojos.
============================================================ */

/* ---------- Botón [etm_login] ---------- */
.etm-login-abrir {
    display:          inline-block !important;
    padding:          6px 12px !important;
    font-family:      inherit;
    font-size:        14px !important;
    font-weight:      600 !important;
    line-height:      1.3 !important;
    text-transform:   none !important;
    color:            var(--etm-p-primario) !important;
    background:       rgba(255, 255, 255, .5) !important;
    border:           1.5px solid var(--etm-p-primario) !important;
    border-radius:    4px !important;
    box-shadow:       none !important;
    cursor:           pointer !important;
    transition:       background .15s, color .15s !important;
}

.etm-login-abrir:hover,
.etm-login-abrir:focus {
    color:      #fff !important;
    background: var(--etm-p-primario) !important;
    outline:    none !important;
}

/* ---------- Bloqueo de scroll con el modal abierto ---------- */
body.etm-login-bloqueo {
    overflow: hidden;
}

/* ---------- Modal ---------- */
.etm-login-modal {
    display:          none;
    position:         fixed;
    inset:            0;
    z-index:          100000;
    padding:          16px;
    overflow-y:       auto;
    background:       rgba(0, 0, 0, .5);
}

.etm-login-modal.abierto {
    display:         flex;
    align-items:     flex-start;
    justify-content: center;
}

.etm-login-caja {
    position:      relative;
    width:         100%;
    max-width:     400px;
    margin:        10vh auto 0;
    padding:       30px;
    background:    #fff;
    border-radius: 8px;
    box-shadow:    0 4px 16px rgba(0, 0, 0, .2);
    font-family:   var(--etm-p-texto-familia);
    color:         var(--etm-gray-800);
}

.etm-login-cerrar {
    position:    absolute !important;
    top:         10px !important;
    right:       12px !important;
    padding:     0 6px !important;
    font-size:   28px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color:       var(--etm-gray-400) !important;
    background:  transparent !important;
    border:      0 !important;
    box-shadow:  none !important;
    cursor:      pointer !important;
}

.etm-login-cerrar:hover {
    color: var(--etm-gray-800) !important;
}

/* En modo app el modal no se puede cerrar */
.etm-login-fijo .etm-login-cerrar {
    display: none !important;
}

.etm-login-titulo {
    margin:      0 0 20px;
    text-align:  center;
    font-family: var(--etm-p-h3-familia);
    font-size:   24px;
    color:       var(--etm-gray-800);
}

.etm-login-info {
    margin-bottom: 20px;
    padding:       14px 15px;
    font-size:     13px;
    line-height:   1.6;
    color:         var(--etm-gray-700);
    background:    var(--etm-gray-50);
    border-left:   4px solid var(--etm-p-primario);
    border-radius: 4px;
}

.etm-login-info strong,
.etm-login-info b {
    color: var(--etm-p-primario);
}

/* ---------- Formulario ---------- */
.etm-login-input {
    display:       block;
    width:         100%;
    margin-bottom: 12px;
    padding:       12px;
    font-size:     16px; /* 16px evita el zoom automático en iPhone */
    border:        1px solid var(--etm-gray-300);
    border-radius: 4px;
    box-sizing:    border-box;
}

.etm-login-input:focus {
    outline:      none;
    border-color: var(--etm-p-primario);
    box-shadow:   0 0 0 3px rgba(0, 0, 0, .08);
}

.etm-login-recordar {
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin-bottom: 15px;
    font-size:     14px;
    cursor:        pointer;
}

.etm-login-enviar {
    display:        block !important;
    width:          100% !important;
    padding:        12px !important;
    font-family:    inherit;
    font-size:      16px !important;
    font-weight:    700 !important;
    text-transform: none !important;
    color:          #fff !important;
    background:     var(--etm-p-primario) !important;
    border:         0 !important;
    border-radius:  4px !important;
    box-shadow:     none !important;
    cursor:         pointer !important;
    transition:     filter .15s !important;
}

.etm-login-enviar:hover:not(:disabled) {
    filter: brightness(.9);
}

.etm-login-enviar:disabled {
    opacity: .7;
    cursor:  wait !important;
}

/* ---------- Mensajes ---------- */
.etm-login-msg {
    margin-top:    12px;
    padding:       12px;
    font-size:     14px;
    border-radius: 4px;
}

.etm-login-error {
    color:       var(--etm-danger);
    background:  var(--etm-danger-light);
    border-left: 4px solid var(--etm-danger);
}

.etm-login-ok {
    color:       var(--etm-success);
    background:  var(--etm-success-light);
    border-left: 4px solid var(--etm-success);
}

/* ---------- Móvil ---------- */
@media (max-width: 480px) {
    .etm-login-caja {
        margin-top: 6vh;
        padding:    22px 18px;
    }

    .etm-login-info {
        font-size: 12px;
        padding:   12px;
    }
}