/* Login split-screen compartido: login.php, portal/login.php, alumnos/login.php */
:root {
    --cm-primary: #0369A1;
    --cm-primary-dark: #075985;
    --cm-sky: #38BDF8;
    --cm-navy: #0C2D48;
    --cm-ink: #0D2137;
    --cm-muted: #5B6B7F;
    --cm-line: #D5DFEB;
    --cm-bg: #F3F6FA;
    --cm-soft: #E0F2FE;
    --cm-ring: rgba(3,105,161,.14);
    --cm-glow: rgba(3,105,161,.28);
}
/* Portal de alumnos: violeta de acento (igual que su barra interna; blanco sobre #6D28D9 = 7.1:1) */
.cm-theme-alumnos {
    --cm-primary: #6D28D9;
    --cm-primary-dark: #5B21B6;
    --cm-sky: #C4B5FD;
    --cm-soft: #EDE9FE;
    --cm-ring: rgba(109,40,217,.16);
    --cm-glow: rgba(109,40,217,.28);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--cm-bg);
    color: var(--cm-ink);
    -webkit-font-smoothing: antialiased;
}

.cm-split { display: flex; min-height: 100vh; }

/* ---------- Panel izquierdo: imagen + marca ---------- */
.cm-left {
    flex: 0 0 46%;
    max-width: 46%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem 3rem 2.5rem;
    color: #fff;
    overflow: hidden;
    background-color: var(--cm-navy);
    background-image: radial-gradient(120% 80% at 80% 100%, #0369A1 0%, rgba(3,105,161,0) 60%);
}
.cm-left.has-img {
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
}
/* Degradado: oscuro arriba (texto) → transparente al centro (foto) → oscuro abajo (pie) */
.cm-left::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(12,45,72,.94) 0%,
        rgba(12,45,72,.78) 38%,
        rgba(12,45,72,.12) 68%,
        rgba(12,45,72,.55) 88%,
        rgba(12,45,72,.85) 100%);
}
.cm-left > * { position: relative; z-index: 2; }

.cm-brand { display: flex; align-items: center; gap: .9rem; margin-bottom: 2.25rem; }
.cm-brand-mark {
    width: 3.25rem; height: 3.25rem;
    border-radius: 14px;
    background: #fff;
    display: grid; place-items: center;
    box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.cm-brand-mark i { font-size: 1.75rem; color: var(--cm-primary); }
.cm-wordmark {
    font-family: 'Figtree', sans-serif;
    font-weight: 800;
    font-size: 2.25rem;
    letter-spacing: -.025em;
    line-height: 1;
}
.cm-wordmark span { color: var(--cm-sky); }
.cm-portal-tag {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: .85rem; font-weight: 500;
    letter-spacing: 0;
    color: rgba(255,255,255,.8);
    margin-top: .3rem;
}
.cm-mobile-brand .cm-portal-tag { color: var(--cm-muted); font-size: .8rem; margin-top: .15rem; }

.cm-claim {
    font-family: 'Figtree', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    max-width: 21rem;
    margin-bottom: 2rem;
}
.cm-features { list-style: none; display: grid; gap: .95rem; }
.cm-features li {
    display: flex; align-items: center; gap: .8rem;
    font-size: .95rem;
    color: rgba(255,255,255,.9);
}
.cm-features i {
    width: 2.1rem; height: 2.1rem;
    display: inline-grid; place-items: center;
    border-radius: 10px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    font-size: 1.05rem;
}

.cm-left-foot {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
    font-size: .82rem;
    color: rgba(255,255,255,.78);
}
.cm-left-foot strong { color: #fff; font-weight: 600; }

/* ---------- Panel derecho: formulario ---------- */
.cm-right {
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: center;
    padding: 3rem 2rem;
}
.cm-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid #E3EAF3;
    border-radius: 22px;
    padding: 2.75rem 2.5rem 2rem;
    box-shadow: 0 24px 60px rgba(12,45,72,.09);
    animation: cmIn .45s ease-out;
}
@keyframes cmIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cm-card { animation: none; } }

.cm-mobile-brand { display: none; align-items: center; gap: .6rem; margin-bottom: 1.75rem; }
.cm-mobile-brand .cm-brand-mark { width: 2.5rem; height: 2.5rem; border-radius: 11px; background: var(--cm-primary); box-shadow: none; }
.cm-mobile-brand .cm-brand-mark i { color: #fff; font-size: 1.3rem; }
.cm-mobile-brand .cm-wordmark { font-size: 1.6rem; color: var(--cm-ink); }
.cm-mobile-brand .cm-wordmark span { color: var(--cm-primary); }

.cm-head { margin-bottom: 1.9rem; }
.cm-school {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .8rem; font-weight: 600;
    color: var(--cm-primary);
    background: var(--cm-soft);
    padding: .3rem .65rem;
    border-radius: 999px;
    margin-bottom: .9rem;
}
.cm-head h1 {
    font-family: 'Figtree', sans-serif;
    font-size: 1.85rem; font-weight: 700;
    letter-spacing: -.015em;
    margin-bottom: .4rem;
}
.cm-head p { color: var(--cm-muted); font-size: .95rem; line-height: 1.5; }

.cm-field { margin-bottom: 1.2rem; }
.cm-field label {
    display: block;
    font-size: .875rem; font-weight: 600;
    margin-bottom: .45rem;
}
.cm-input { position: relative; }
.cm-input > i {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    color: #94A3B8; font-size: 1.05rem; pointer-events: none;
    transition: color .2s;
}
.cm-input input {
    width: 100%;
    padding: .85rem 1rem .85rem 2.75rem;
    border: 1.5px solid var(--cm-line);
    border-radius: 11px;
    font: inherit; font-size: .95rem;
    color: var(--cm-ink);
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.cm-input input::placeholder { color: #A3B1C2; }
.cm-input input:focus {
    outline: none;
    border-color: var(--cm-primary);
    box-shadow: 0 0 0 4px var(--cm-ring);
}
.cm-input:focus-within > i { color: var(--cm-primary); }
.cm-input input.has-toggle { padding-right: 3rem; }
.cm-toggle {
    position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent;
    color: #94A3B8; font-size: 1.1rem;
    padding: .4rem; border-radius: 8px; cursor: pointer; line-height: 1;
}
.cm-toggle:hover { color: var(--cm-primary); }
.cm-toggle:focus-visible { outline: 2px solid var(--cm-primary); outline-offset: 1px; }
.cm-hint { display: block; font-size: .78rem; color: #8494A7; margin-top: .4rem; }
.cm-caps { display: none; font-size: .78rem; color: #B45309; margin-top: .4rem; }
.cm-caps.show { display: block; }

.cm-btn {
    width: 100%;
    margin-top: .6rem;
    padding: .95rem 1rem;
    border: 0; border-radius: 11px;
    background: var(--cm-primary);
    color: #fff;
    font-family: 'Figtree', sans-serif;
    font-size: 1rem; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px var(--cm-glow);
    transition: background-color .2s, transform .15s, box-shadow .2s;
}
.cm-btn:hover { background: var(--cm-primary-dark); transform: translateY(-1px); }
.cm-btn:active { transform: none; }
.cm-btn:focus-visible { outline: 3px solid var(--cm-ring); outline-offset: 2px; }
.cm-btn[disabled] { opacity: .75; cursor: wait; transform: none; }

.cm-foot {
    margin-top: 1.75rem; padding-top: 1.25rem;
    border-top: 1px solid #EEF2F7;
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    font-size: .8rem; color: #8494A7;
}

.cm-alert {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .85rem 1rem;
    border-radius: 11px;
    font-size: .9rem; line-height: 1.45;
    margin-bottom: 1.25rem;
}
.cm-alert i { margin-top: .1rem; }
.cm-alert-danger  { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.cm-alert-warning { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }

/* Bloqueo por intentos */
.cm-lock { text-align: center; }
.cm-lock-icon {
    width: 4.25rem; height: 4.25rem; margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: grid; place-items: center;
    background: #FEF2F2; color: #DC2626; font-size: 1.9rem;
}
.cm-lock h1 { font-family: 'Figtree', sans-serif; font-size: 1.5rem; margin-bottom: .4rem; }
.cm-lock p { color: var(--cm-muted); font-size: .92rem; margin-bottom: 1.5rem; }
.cm-count { display: flex; justify-content: center; gap: .75rem; margin-bottom: 1.75rem; }
.cm-count div {
    min-width: 5.25rem; padding: .8rem .5rem;
    border: 1px solid var(--cm-line); border-radius: 12px; background: var(--cm-bg);
}
.cm-count strong {
    display: block;
    font-family: 'Figtree', sans-serif; font-size: 1.9rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.cm-count span { font-size: .78rem; color: var(--cm-muted); }
.cm-back { color: var(--cm-muted); font-size: .875rem; text-decoration: none; }
.cm-back:hover { color: var(--cm-primary); }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .cm-left { display: none; }
    .cm-right { align-items: flex-start; padding: 2.5rem 1rem; }
    .cm-mobile-brand { display: flex; }
}
@media (max-width: 480px) {
    .cm-card { padding: 2rem 1.35rem 1.5rem; border-radius: 18px; }
    .cm-head h1 { font-size: 1.6rem; }
}