:root{
    --patwo-dark:#333333;
    --patwo-blue:#5271FF;
    --patwo-blue-dark:#3F5CF0;
    --patwo-pink:#EFC1D0;
    --patwo-pink-soft:#FFF6F9;
    --patwo-bg:#F5F5F5;
    --patwo-card:#FFFFFF;
    --patwo-card-soft:#FAFAFA;
    --patwo-muted:#747474;
    --patwo-border:#ECECEC;
    --patwo-danger:#E45454;
    --patwo-shadow:0 8px 24px rgba(0,0,0,.045);
}

/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after{
    box-sizing:border-box;
}

/* =========================================================
   BODY LOGIN
========================================================= */

body.patwo-login-body{
    margin:0;
    min-height:100vh;
    padding:20px;
    background:var(--patwo-bg);
    color:var(--patwo-dark);
    font-family:"Poppins","Inter","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* =========================================================
   TITULO SUPERIOR LOGIN
========================================================= */

/* =========================================================
   PANTALLA LOGIN CENTRADA
========================================================= */

.patwo-login-screen{
    width:100%;
    min-height:calc(100vh - 40px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.patwo-login-brand-title{
    width:100%;
    max-width:420px;
    margin:0 auto 22px;
    text-align:center;
}

.patwo-login-brand-title h1{
    margin:0 0 6px;
    color:var(--patwo-dark);
    font-size:32px;
    font-weight:900;
    line-height:1.05;
    letter-spacing:.1px;
}

.patwo-login-brand-title p{
    margin:0;
    color:var(--patwo-muted);
    font-size:14px;
    font-weight:600;
    line-height:1.35;
}

/* =========================================================
   CARD LOGIN
========================================================= */

.patwo-login{
    width:100%;
    max-width:420px;
    background:var(--patwo-card);
    padding:38px;
    border-radius:28px;
    border:none;
    box-shadow:var(--patwo-shadow);
    color:var(--patwo-dark);
}

/* =========================================================
   LOGO / ÍCONO
========================================================= */

.patwo-logo{
    width:92px;
    height:92px;
    border-radius:26px;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#F5F5F5;
    overflow:hidden;
    box-shadow:0 8px 22px rgba(0,0,0,.05);
}

.patwo-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    padding:2px;
}

/* =========================================================
   TEXTOS
========================================================= */

.patwo-login h1{
    text-align:center;
    margin:0 0 10px;
    color:var(--patwo-dark);
    font-size:32px;
    font-weight:800;
    line-height:1.1;
}

.patwo-login p{
    text-align:center;
    color:var(--patwo-muted);
    margin:0 0 25px;
    font-size:15px;
    font-weight:500;
    line-height:1.45;
}

/* =========================================================
   INPUTS
========================================================= */

.patwo-login input{
    width:100%;
    padding:16px;
    margin-top:14px;
    border:none;
    border-radius:16px;
    background:#FFFFFF;
    color:var(--patwo-dark);
    font-size:15px;
    font-family:inherit;
    box-shadow:inset 0 0 0 1px var(--patwo-border);
}

.patwo-login input:focus{
    outline:none;
    box-shadow:inset 0 0 0 2px var(--patwo-blue);
}

.patwo-login input::placeholder{
    color:#9A9A9A;
}

/* =========================================================
   BOTÓN PRINCIPAL
========================================================= */

.patwo-login button{
    width:100%;
    padding:16px;
    margin-top:20px;
    border:none;
    border-radius:999px;
    background:var(--patwo-blue);
    color:#FFFFFF;
    font-size:16px;
    font-weight:800;
    font-family:inherit;
    cursor:pointer;
    box-shadow:none;
    transition:background .18s ease, transform .18s ease;
}

.patwo-login button:hover{
    background:var(--patwo-blue-dark);
    transform:translateY(-1px);
}

/* =========================================================
   ERROR
========================================================= */

.patwo-login .error{
    background:#FDECEC;
    color:#B42318;
    padding:12px;
    border-radius:16px;
    margin-top:18px;
    text-align:center;
    font-weight:700;
    font-size:14px;
}

/* =========================================================
   ACCESIBILIDAD
========================================================= */

.screen-reader-text{
    border:0;
    clip:rect(1px,1px,1px,1px);
    clip-path:inset(50%);
    height:1px;
    margin:-1px;
    overflow:hidden;
    padding:0;
    position:absolute;
    width:1px;
    word-wrap:normal !important;
}

/* =========================================================
   CAMPO CLAVE CON OJITO
========================================================= */

.patwo-password-field{
    position:relative;
    width:100%;
}

.patwo-password-field input{
    padding-right:58px;
}

.patwo-password-toggle{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    width:40px !important;
    min-width:40px;
    height:40px !important;
    min-height:40px !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    border-radius:14px !important;
    background:#EEF2FF !important;
    color:var(--patwo-blue) !important;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px !important;
    cursor:pointer;
    box-shadow:none !important;
}

.patwo-password-toggle:hover{
    background:#E1E7FF !important;
    transform:translateY(-50%);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:480px){

    body.patwo-login-body{
    margin:0;
    min-height:100vh;
    padding:20px;
    background:var(--patwo-bg);
    color:var(--patwo-dark);
    font-family:"Poppins","Inter","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}

    .patwo-login{
        padding:30px 24px;
        border-radius:26px;
    }

    .patwo-login h1{
        font-size:29px;
    }

    .patwo-login p{
        font-size:14px;
    }
}

/* =========================================================
   PATWO LOGIN - RECUPERAR / RESTABLECER CLAVE
========================================================= */

.patwo-login-link{
    width:100%;
    margin:12px 0 0;
    text-align:right;
}

.patwo-login-link-center{
    text-align:center;
    margin-top:18px;
}

.patwo-login-link a{
    color:var(--patwo-blue);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}

.patwo-login-link a:hover{
    color:var(--patwo-blue-dark);
    text-decoration:underline;
}

.patwo-success{
    background:#ECFDF3;
    color:#166534;
    padding:12px;
    border-radius:16px;
    margin-top:18px;
    text-align:center;
    font-weight:700;
    font-size:14px;
    line-height:1.4;
}

.patwo-login-button-link{
    width:100%;
    min-height:50px;
    padding:15px;
    margin-top:20px;
    border:none;
    border-radius:999px;
    background:var(--patwo-blue);
    color:#FFFFFF !important;
    font-size:16px;
    font-weight:800;
    font-family:inherit;
    cursor:pointer;
    box-shadow:none;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
}

.patwo-login-button-link:hover{
    background:var(--patwo-blue-dark);
    color:#FFFFFF !important;
}