/* =====================================================================
   Login en celular (index.php)
   Solo aplica en pantallas de hasta 600px: el login de escritorio no cambia.
   Los !important son necesarios porque login.js anima opacity/top/left
   con estilos en línea.
   ===================================================================== */
@media only screen and (max-width: 600px) {

    html,
    body {
        min-height: 100%;
        background: #f5f6f8 !important;
        background-image: none !important;
    }

    body {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    }

    #login {
        position: static !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: calc(env(safe-area-inset-top, 0px) + 48px) 20px 32px !important;
        border: 0 !important;
        border-radius: 0 !important;
        opacity: 1 !important;
        top: auto !important;
        left: auto !important;
    }

    #login .shadow,
    #login .ribbon,
    #versionBar {
        display: none !important;
    }

    #login .inner {
        min-height: 0 !important;
        overflow: visible !important;
        padding: 28px 20px 24px !important;
        background: #fff !important;
        border: 1px solid #e7e7eb !important;
        border-radius: 18px !important;
        box-shadow: 0 12px 32px rgba(24, 24, 27, .06);
    }

    #login .logo {
        position: static !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: auto !important;
        height: auto !important;
        margin: 0 0 24px !important;
        opacity: 1 !important;
        top: auto !important;
        left: auto !important;
        background: transparent !important;
        font-size: 0 !important;              /* oculta el   */
    }

    #login .logo img:first-child {
        height: 44px !important;
        width: auto;
        max-width: 80%;
        object-fit: contain;
    }

    #login .logo img + img {
        display: none !important;
    }

    #login .logo span {
        position: static !important;
        color: #18181b;
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
        font-size: 20px !important;
        font-weight: 700;
        line-height: 1.2 !important;
        letter-spacing: -0.02em;
    }

    #login .formLogin {
        position: static !important;
        height: auto !important;
        padding: 0 !important;
        opacity: 1 !important;
        left: auto !important;
        text-align: left !important;
    }

    #login .tip {
        margin: 0 0 12px;
    }

    #login #username_id,
    #login #password {
        display: block;
        width: 100% !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border: 1px solid #e7e7eb !important;
        border-radius: 12px !important;
        background: #fff !important;
        background-image: none !important;
        box-shadow: none !important;
        color: #18181b !important;
        font-family: inherit !important;
        font-size: 16px !important;          /* evita el zoom automático de iOS */
        line-height: 52px !important;
        text-align: left !important;
        box-sizing: border-box;
        -webkit-appearance: none;
    }

    #login #username_id:focus,
    #login #password:focus {
        border-color: #1769ff !important;
        box-shadow: 0 0 0 3px rgba(23, 105, 255, .15) !important;
        outline: 0;
    }

    #login .loginButton {
        display: flex;
        flex-direction: column-reverse;
        gap: 16px;
        width: 100% !important;
        padding: 4px 0 0 !important;
    }

    #login .loginButton > div {
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #login .loginButton .clear {
        display: none;
    }

    #login .loginButton > div:first-child {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px;
    }

    /* "Recuperar contraseña" se va a la derecha; la casilla queda junto a "Recordarme" */
    #login .loginButton > div:first-child .f_help:last-child {
        margin-left: auto;
    }

    #login .loginButton .f_help,
    #login .loginButton .f_help a {
        color: #71717a !important;
        font-size: 14px !important;
    }

    #login .loginButton .f_help a {
        color: #1769ff !important;
        text-decoration: none;
    }

    #login .uibutton-group {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }

    #login .uibutton-group li {
        display: block !important;
        float: none !important;
    }

    #login input[type="submit"] {
        display: block;
        width: 100% !important;
        height: 52px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: #1769ff !important;
        background-image: none !important;
        box-shadow: none !important;
        color: #fff !important;
        font-family: inherit !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-shadow: none !important;
        cursor: pointer;
        -webkit-appearance: none;
    }

    #login input[type="submit"]:active {
        background: #0b57e0 !important;
    }

    #login input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0 6px 0 0;
        vertical-align: middle;
        accent-color: #1769ff;
    }

    /* Los globos de ayuda (tipsy) estorban en pantallas táctiles */
    .tipsy {
        display: none !important;
    }
}