@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

/* ── BODY ── */
body.login {
    font-family: 'Poppins', sans-serif !important;
    background: linear-gradient(135deg, #8E0000 0%, #C62828 55%, #1a1a1a 100%) !important;
    min-height: 100vh;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

/* ── CARD: CSS GRID ── */
#login {
    width: 880px !important;
    max-width: 95vw !important;
    padding: 0 !important;
    margin: 0 auto !important;
    background: #fff;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.55) !important;
    display: grid !important;
    grid-template-columns: 40% 60% !important;
    grid-template-rows: auto 1fr auto auto !important;
    position: static !important;
    /* posiciones por elemento */
}

/* ── PANEL IZQUIERDO (ocupa toda la columna 1) ── */
.fp-login-left {
    grid-column: 1;
    grid-row: 1 / -1;
    background: linear-gradient(160deg, #C62828 0%, #8E0000 55%, #1a1a1a 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    overflow: hidden;
    text-align: center;
}
.fp-lc { position: absolute; border-radius: 50%; }
.fp-lc-1 { width: 260px; height: 260px; bottom: -70px; left: -70px;  background: rgba(255,255,255,.07); }
.fp-lc-2 { width: 160px; height: 160px; top: -50px;   right: -50px; background: rgba(255,255,255,.08); }
.fp-lc-3 { width: 100px; height: 100px; bottom: 90px;  right: -30px; background: rgba(255,255,255,.05); }
.fp-lc-4 { width:  70px; height:  70px; top: 110px;    left:  24px;  background: rgba(255,255,255,.06); }

.fp-login-left-inner { position: relative; z-index: 1; }
.fp-login-logo { max-height: 68px; width: auto; margin-bottom: 28px; filter: brightness(10); display: block; margin-left: auto; margin-right: auto; }
.fp-login-left h2 { font-size: 1.7rem; font-weight: 800; color: #fff; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 8px; }
.fp-login-left p  { font-size: .95rem; font-weight: 600; color: rgba(255,255,255,.9); margin-bottom: 6px; }
.fp-login-left span { font-size: .75rem; color: rgba(255,255,255,.5); letter-spacing: 1px; }

/* ── CABECERA DERECHA (título + subtítulo) ── */
#login h1 { display: none !important; }

/* Título de sección - usando un div inyectado */
.fp-login-header {
    grid-column: 2;
    grid-row: 1;
    padding: 44px 44px 0;
    background: #fff;
}
.fp-login-header h3 {
    font-size: 1.7rem; font-weight: 700; color: #111; margin-bottom: 6px;
    font-family: 'Poppins', sans-serif;
}
.fp-login-header p {
    font-size: .82rem; color: #888;
    font-family: 'Poppins', sans-serif;
}

/* ── FORMULARIO ── */
#loginform {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 24px 44px 16px !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    background: #fff !important;
}

/* Labels */
#loginform label {
    font-family: 'Poppins', sans-serif !important;
    font-size: .8rem !important;
    font-weight: 500 !important;
    color: #555 !important;
    margin-bottom: 5px !important;
    display: block;
}

/* Inputs */
#loginform .input,
#loginform input[type="text"],
#loginform input[type="password"] {
    font-family: 'Poppins', sans-serif !important;
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1.5px solid #E5E5E5 !important;
    border-radius: 10px !important;
    font-size: .88rem !important;
    color: #111 !important;
    background: #F8F8F8 !important;
    box-shadow: none !important;
    transition: border-color .2s, background .2s !important;
    margin-top: 4px !important;
}
#loginform .input:focus,
#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus {
    border-color: #C62828 !important;
    background: #fff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(198,40,40,.1) !important;
}

/* Párrafos del form */
#loginform > p { margin-bottom: 14px !important; }

/* Remember me */
.forgetmenot {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 4px 0 16px !important;
}
.forgetmenot label { font-size: .8rem !important; color: #666 !important; margin: 0 !important; }
#rememberme { width: 16px !important; height: 16px !important; accent-color: #C62828 !important; flex-shrink: 0; }

/* Botón */
#wp-submit {
    font-family: 'Poppins', sans-serif !important;
    width: 100% !important;
    padding: 13px !important;
    background: #C62828 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(198,40,40,.35) !important;
    transition: background .2s, transform .15s !important;
    height: auto !important;
    letter-spacing: .4px !important;
}
#wp-submit:hover { background: #8E0000 !important; transform: translateY(-1px) !important; }

/* ── LINKS DE NAV ── */
#login #nav,
#login #backtoblog {
    grid-column: 2;
    padding: 10px 44px !important;
    text-align: center !important;
    background: #fff !important;
    font-size: .78rem !important;
    margin: 0 !important;
}
#login #backtoblog { padding-bottom: 32px !important; border-radius: 0 0 20px 0; }
#login #nav a,
#login #backtoblog a {
    font-family: 'Poppins', sans-serif !important;
    color: #C62828 !important;
    text-decoration: none !important;
    font-size: .78rem !important;
}
#login #nav a:hover,
#login #backtoblog a:hover { text-decoration: underline !important; }

/* ── ERRORES ── */
#login_error, .login_error {
    grid-column: 2 !important;
    padding: 12px 44px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: .8rem !important;
    color: #C62828 !important;
    background: #FFF5F5 !important;
    border-left: 4px solid #C62828 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* ── SELECTOR IDIOMA (parte de WP) ── */
.language-switcher { grid-column: 2 !important; padding: 0 44px 28px !important; background: #fff !important; }
#language-switcher { display: none !important; }  /* ocultamos si aparece */

/* ── RESPONSIVE ── */
@media (max-width: 580px) {
    #login { grid-template-columns: 1fr !important; }
    .fp-login-left { display: none !important; }
    .fp-login-header { padding: 36px 28px 0 !important; }
    #loginform { padding: 20px 28px 16px !important; }
    #login #nav, #login #backtoblog { padding-left: 28px !important; padding-right: 28px !important; }
}