:root{
    --card-w: 440px;
    --card-h: 530px;
    --ink: #0F1F3D;
    --ink-muted: #8891A6;
    --line-soft: rgba(15,31,61,.08);
    --field-line: rgba(45,84,172,.14);
}

html, body{ height:100%; }

body.campus-page{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F5F7FB;
    position: relative;
    overflow-x: hidden;
    padding: 4vh 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

.campus-title h2,
.campus-btn,
.campus-tab,
.card-logo span,
.stat-value{
    font-family: 'Poppins', sans-serif;
}

/* ===================== AMBIENT BACKGROUND ===================== */
.bg-layer{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

.bg-radial{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; }
.bg-radial-1{
    width:50vw; height:50vw; max-width:680px; max-height:680px;
    top:-14%; left:-10%;
    background: radial-gradient(circle, rgba(45,84,172,.10), rgba(45,84,172,0) 70%);
}
.bg-radial-2{
    width:44vw; height:44vw; max-width:600px; max-height:600px;
    bottom:-16%; right:-10%;
    background: radial-gradient(circle, rgba(255,122,26,.09), rgba(255,122,26,0) 70%);
}

.bg-dots{
    position:absolute;
    width:10px; height:34px;
    background-image: radial-gradient(rgba(45,84,172,.35) 2px, transparent 2.4px);
    background-size: 10px 10px;
}
.bg-dots-1{ top:14%; left:9%; transform: rotate(12deg); }
.bg-dots-2{ bottom:16%; right:11%; background-image: radial-gradient(rgba(255,122,26,.35) 2px, transparent 2.4px); }

.bg-curves{ position:absolute; inset:0; width:100%; height:100%; opacity:.35; }
.bg-curves path{
    fill:none;
    stroke: rgba(45,84,172,.28);
    stroke-width: 1.4;
    stroke-dasharray: 3 7;
    stroke-linecap: round;
}

.bg-corner-deco{
    position:absolute;
    right:0; bottom:0;
    width:38vw; height:38vw; max-width:520px; max-height:520px;
    background-image: radial-gradient(rgba(15,31,61,.06) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0%, transparent 70%);
    mask-image: radial-gradient(circle at 100% 100%, #000 0%, transparent 70%);
    opacity:.6;
}

/* ===================== SHELL ===================== */
.campus-shell{
    position:relative; z-index:1;
    width:100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 5vh 5vw;
    display:flex;
    align-items:center;
    justify-content:center;
}

.brand-copy, .campus-brand{ display:none; }
.auth-form{ display:none; }
.auth-form.is-active{ display:block; }

.campus-shell.swap-out .campus-panel{ opacity:0; transform: translateY(10px); transition: opacity .32s var(--ease-premium), transform .32s var(--ease-premium); }
.campus-panel{ transition: opacity .32s var(--ease-premium), transform .32s var(--ease-premium); }

/* ---- Form card ---- */
.campus-panel{
    display:flex;
    justify-content:center;
    position:relative;
}

.campus-card{
    position:relative;
    width: var(--card-w);
    min-height: var(--card-h);
    transition: max-width .34s var(--ease-premium);
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(45,84,172,.10);
    border-radius: 18px;
    box-shadow:
        0 20px 50px rgba(32,55,90,.10),
        0 2px 10px rgba(32,55,90,.04);
    padding: 1.7rem 2rem 2rem;
    opacity:0;
    animation: cardIn .7s .1s var(--ease-premium) both;
}
.campus-card--wide{ width: 520px; padding: 2.1rem 2.6rem 2.5rem; }
@keyframes cardIn{
    from{ opacity:0; transform: translateY(16px) scale(.98); }
    to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes fadeUp{
    from{ opacity:0; transform: translateY(10px); }
    to{ opacity:1; transform: translateY(0); }
}

/* back pill */
.back-pill{
    display:inline-flex; align-items:center; gap:.4rem;
    font-size:.82rem; font-weight:500;
    color: var(--ink);
    text-decoration:none;
    background:#fff;
    border:1px solid var(--line-soft);
    border-radius:999px;
    padding:.4rem .85rem;
    box-shadow: 0 1px 3px rgba(32,55,90,.06);
    margin-bottom: 1.1rem;
    transition: box-shadow .2s ease, transform .2s ease;
}
.back-pill i{ font-size:.74rem; }
.back-pill:hover{ box-shadow: 0 2px 8px rgba(32,55,90,.10); transform: translateX(-1px); }

/* logo lockup */
.card-logo{
    display:flex; flex-direction:column; align-items:center; gap:.3rem;
    margin-bottom: .9rem;
}
.card-logo img{ height:40px; }
.card-logo span{
    font-size:.72rem; font-weight:700; letter-spacing:.06em;
    color: var(--ink);
}

.campus-title{ text-align:center; margin-bottom: 1.1rem; }
.campus-title h2{
    font-size:1.66rem; font-weight:700; margin:0 0 .4rem;
    letter-spacing:-.01em; white-space:nowrap;
}
.campus-title h2 .t-navy{ color: var(--ink); }
.campus-title h2 .t-orange{ color: var(--orange); }
.campus-title p{ font-size:.8rem; color: var(--ink-muted); margin:0; }

/* segmented tabs */
.seg-tabs{
    position:relative;
    display:flex;
    border-radius: 9px;
    background: #F3F5F9;
    border:1px solid var(--line-soft);
    padding:4px;
    margin-bottom: 1.3rem;
}
.seg-indicator{
    position:absolute;
    top:4px; bottom:4px; left:4px;
    width: calc(50% - 4px);
    border-radius: 7px;
    background: #fff;
    border: 1px solid rgba(45,84,172,.16);
    box-shadow: 0 4px 10px rgba(45,84,172,.14);
    transition: transform .4s var(--ease-premium);
}
.seg-tabs.pos-profesor .seg-indicator{ transform: translateX(100%); }
.campus-tab{
    position:relative; z-index:1;
    flex:1; border:none; background:transparent;
    padding:.6rem .4rem; border-radius:7px;
    display:flex; align-items:center; justify-content:center; gap:.45rem;
    font-weight:600; font-size:.92rem; letter-spacing:.01em;
    cursor:pointer; color: var(--ink-muted);
    transition: color .3s ease;
}
.campus-tab i{ font-size:.9rem; color: inherit; }
.campus-tab.active{ color: var(--blue); }

.campus-alert{
    display:none;
    align-items:center; gap:.5rem;
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.22);
    color: #d64545;
    border-radius: 9px;
    padding:.65rem .9rem;
    font-size:.85rem;
    margin-bottom: 1rem;
}

/* rows for paired fields */
.campus-row{ display:flex; gap:.9rem; }
.campus-row .campus-field{ flex:1; min-width:0; }

/* floating-label fields */
.campus-field{
    position:relative;
    margin-bottom: .8rem;
}

.field-shell{
    position:relative;
    display:flex; align-items:center;
    background: #fff;
    border: 1px solid var(--field-line);
    border-radius: 9px;
    height: 46px;
    transition: border-color .3s ease, box-shadow .3s ease, transform .2s ease;
}
.field-shell i.f-icon{
    width: 18px; text-align:center;
    margin-left: .9rem;
    color: rgba(45,84,172,.4);
    font-size:.9rem;
    transition: color .3s ease;
    flex: none;
}
.campus-field input{
    width:100%;
    min-width: 0;
    background:transparent;
    border:none;
    outline:none;
    color: var(--ink);
    font-size:.9rem;
    padding: 0 .7rem 0 .7rem;
    height:100%;
}
.campus-field input::placeholder{ color:transparent; }
.campus-field input:-webkit-autofill,
.campus-field input:-webkit-autofill:hover,
.campus-field input:-webkit-autofill:focus,
.campus-field input:-webkit-autofill:active{
    -webkit-text-fill-color: var(--ink) !important;
    caret-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    transition: background-color 99999s ease-in-out 0s, -webkit-text-fill-color 99999s ease-in-out 0s;
}
.campus-field label{
    position:absolute;
    left: 2.7rem;
    top: 50%;
    transform: translateY(-50%);
    font-size:.88rem;
    color: rgba(15,31,61,.4);
    pointer-events:none;
    transition: all .2s var(--ease-premium);
    white-space: nowrap;
    background:#fff;
    padding: 0 .2rem;
}
.campus-field input:focus + label,
.campus-field input:not(:placeholder-shown) + label{
    top: 0;
    font-size:.7rem;
    color: var(--blue);
    transform: translateY(-50%);
    left: 2.4rem;
}
.field-shell:focus-within{
    border-color: rgba(45,84,172,.45);
    box-shadow: 0 0 0 3px rgba(45,84,172,.08);
}
.field-shell:focus-within i.f-icon{ color: var(--blue); }

.field-shell.no-icon label{ left: 1rem; }

.toggle-pass{
    background:none; border:none; cursor:pointer;
    color: rgba(15,31,61,.35);
    padding: 0 .9rem;
    font-size:.9rem;
    flex: none;
    transition: color .2s ease;
}
.toggle-pass:hover{ color: var(--blue); }

/* Selector de tipo de documento (mismo patron que seg-tabs de Alumno/Profesor) */
.seg-tabs.pos-carne .seg-indicator{ transform: translateX(100%); }

/* Indicador de pasos del registro */
.reg-steps{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    margin-bottom: 1.3rem;
}
.reg-step{
    width:26px; height:26px;
    flex:none;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.78rem; font-weight:700;
    background:#F3F5F9;
    color: var(--ink-muted);
    border:1px solid var(--line-soft);
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.reg-step.active{
    background: linear-gradient(90deg, #FF6A12 0%, #FF8A36 100%);
    color:#fff;
    border-color: transparent;
}
.reg-step.done{
    background: var(--blue);
    color:#fff;
    border-color: transparent;
}
.reg-step-line{
    width: 28px; height:2px;
    background: var(--line-soft);
    transition: background .3s ease;
}
.reg-step-line.done{ background: var(--blue); }

/* Paneles del formulario paso a paso */
.reg-panel-hint{
    font-size:.82rem;
    color: var(--ink-muted);
    margin: 0 0 1rem;
    line-height:1.5;
}
.reg-nav{
    display:flex;
    gap:.7rem;
    margin-top:.2rem;
}
.reg-nav .campus-btn{ flex:1; }

/* Campos bloqueados del paso 1 hasta completar la consulta de DNI */
.field-shell:has(input:disabled){
    background: rgba(15,31,61,.035);
    cursor: not-allowed;
}
.campus-field input:disabled{
    cursor: not-allowed;
    color: rgba(15,31,61,.35);
}
.campus-field input:disabled + label{
    color: rgba(15,31,61,.28);
}
.field-shell:has(input:disabled) i.f-icon{
    color: rgba(15,31,61,.22);
}
.campus-btn:disabled{
    background: rgba(15,31,61,.14);
    color: rgba(15,31,61,.4);
    box-shadow:none;
    cursor:not-allowed;
    transform:none;
}
.campus-btn:disabled:hover{ transform:none; box-shadow:none; }
#btnBuscarDni:disabled{ opacity:.5; cursor:not-allowed; }
#btnBuscarDni:not(:disabled){ color:#fff; background:var(--blue); }
#btnBuscarDni:not(:disabled):hover{ filter:brightness(1.12); }
#btnBuscarDni{
    width:30px; height:30px; margin-right:.55rem;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    padding:0; font-size:.8rem;
    color: rgba(15,31,61,.28);
    background:transparent;
    transition: background .2s ease, color .2s ease, opacity .2s ease;
}
#btnBuscarDni[hidden]{ display:none; }

/* remember switch + forgot link row */
.campus-check{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom: 1.1rem;
    margin-top: .3rem;
}
.switch-label{ display:flex; align-items:center; gap:.5rem; font-size:.8rem; color: var(--ink-muted); cursor:pointer; user-select:none; }
.switch{
    position:relative; width:34px; height:19px;
    border-radius:999px;
    background: rgba(45,84,172,.18);
    transition: background .3s ease;
    flex:none;
}
.switch::after{
    content:"";
    position:absolute; top:2px; left:2px;
    width:15px; height:15px; border-radius:50%;
    background:#fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .3s var(--ease-premium);
}
.campus-check input{ display:none; }
.campus-check input:checked + .switch{ background: var(--blue); }
.campus-check input:checked + .switch::after{ transform: translateX(15px); }
.forgot-link{ font-size:.78rem; color: var(--blue); text-decoration:none; font-weight:500; }
.forgot-link:hover{ text-decoration:underline; }

/* submit button with ripple */
.campus-btn{
    position:relative;
    overflow:hidden;
    width:100%;
    height: 46px;
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    border:none;
    border-radius: 9px;
    background: linear-gradient(90deg, #FF6A12 0%, #FF8A36 100%);
    color:#fff;
    font-weight:600;
    font-size:.94rem;
    letter-spacing:.01em;
    cursor:pointer;
    box-shadow: 0 8px 18px rgba(255,122,26,.22);
    transition: transform .3s var(--ease-premium), box-shadow .3s ease;
}
.campus-btn i{ font-size:.85rem; }
.campus-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(255,122,26,.3); }
.campus-btn:active{ transform: translateY(0); }
.campus-btn .ripple{
    position:absolute; border-radius:50%;
    background: rgba(255,255,255,.5);
    transform: scale(0);
    animation: rippleAnim .6s ease-out forwards;
    pointer-events:none;
}
@keyframes rippleAnim{ to{ transform: scale(1); opacity:0; } }

/* Variante "Atrás": debe ir despues de .campus-btn para ganar la cascada
   (misma especificidad -- una sola clase -- así que el orden decide). */
.campus-btn--ghost{
    flex: 0 0 auto;
    width:auto;
    padding: 0 1.4rem;
    background: transparent;
    color: var(--ink-muted);
    box-shadow:none;
    border: 1px solid var(--line-soft);
}
.campus-btn--ghost:hover{
    background: rgba(15,31,61,.03);
    transform:none;
    box-shadow:none;
    color: var(--ink);
}

.campus-sep{
    border:none;
    border-top: 1px solid var(--line-soft);
    margin: 1.1rem 0 .9rem;
}

.campus-alt-link{
    text-align:center; font-size:.8rem;
    color: var(--ink-muted);
}
.campus-alt-link a{ color: var(--orange); font-weight:500; text-decoration:none; }
.campus-alt-link a:hover{ text-decoration:underline; }

.campus-divider{
    display:flex; align-items:center; gap:.75rem;
    margin: 1rem 0 .85rem;
    color: var(--ink-muted);
    font-size:.76rem;
}
.campus-divider::before,
.campus-divider::after{
    content:'';
    flex:1;
    height:1px;
    background: var(--line-soft);
}

.campus-google-slot{
    display:flex;
    justify-content:center;
    margin-bottom: 1rem;
    min-height:44px;
}
.campus-google-slot > div{ width:100% !important; }
.campus-google-slot iframe{ width:100% !important; }

.field-hint{
    font-size:.72rem;
    color: var(--ink-muted);
    margin: -.5rem 0 .8rem;
    padding-left: .3rem;
}

/* ===================== FLOATING STAT CARDS ===================== */
.stat-card{
    position:absolute;
    display:flex; align-items:flex-start; gap:.75rem;
    background:#fff;
    border-radius: 16px;
    border: 1px solid var(--line-soft);
    box-shadow: 0 14px 34px rgba(32,55,90,.10);
    padding: .9rem 1rem;
    width: 195px;
    opacity:0; transform: translateY(10px);
    animation: fadeUp .6s var(--ease-premium) both;
}
.stat-icon{
    width:38px; height:38px; flex:none; border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.05rem;
}
.stat-icon--orange{ background: rgba(255,122,26,.12); color: var(--orange); }
.stat-icon--blue{ background: rgba(45,84,172,.12); color: var(--blue); }
.stat-body{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.stat-label{ font-size:.74rem; color: var(--ink-muted); }
.stat-value{ font-size:1.15rem; font-weight:700; color: var(--ink); }
.stat-sub{ display:flex; align-items:center; gap:.35rem; font-size:.68rem; color: var(--ink-muted); margin-top:.1rem; }
.stat-dot{ width:6px; height:6px; border-radius:50%; background:#33c469; flex:none; }
.stat-bar{ display:block; width:100%; height:4px; border-radius:999px; background: var(--line-soft); margin-top:.35rem; overflow:hidden; }
.stat-bar-fill{ display:block; width:0; height:100%; border-radius:999px; transition: width 1.1s var(--ease-premium); }
.stat-bar-fill--blue{ background: var(--blue); }
.stat-bar-fill--orange{ background: var(--orange); }

.stat-value{ font-variant-numeric: tabular-nums; }

.stat-card--community{
    left: calc(50% - 520px);
    top: 28%;
    animation-delay: .15s;
}
.stat-card--courses{
    left: calc(50% + 340px);
    top: 6%;
    animation-delay: .25s;
}
.stat-card--certs{
    left: calc(50% + 340px);
    top: 62%;
    animation-delay: .35s;
}

@media (max-width: 1380px){
    .stat-card--community{ left: calc(50% - 430px); }
    .stat-card--courses,
    .stat-card--certs{ left: calc(50% + 260px); }
}

@media (max-width: 1180px){
    .stat-card{ display:none; }
    .bg-curves{ display:none; }
}

@media (max-width: 560px){
    body.campus-page{ padding: 0; align-items: flex-start; }
    .campus-shell{ padding: 7vh 5vw; min-height: 100vh; }
    .campus-row{ flex-direction:column; gap:0; }
    .campus-card{
        width: 100%; max-width: 400px;
        padding: 1.4rem 1.4rem 1.7rem;
    }
    .campus-card--wide{ width: 100%; max-width: 400px; }

    .back-pill{ font-size:.76rem; padding:.35rem .75rem; }
    .card-logo img{ height:34px; }
    .card-logo span{ font-size:.66rem; }

    .campus-title h2{ font-size:1.4rem; white-space: normal; }
    .campus-title p{ font-size:.76rem; }

    .campus-tab{ font-size:.82rem; padding:.55rem .3rem; gap:.3rem; }

    .field-shell{ height:44px; }
    .campus-field input{ font-size:.86rem; }
    .campus-field label{ font-size:.82rem; }
    .campus-field input:focus + label,
    .campus-field input:not(:placeholder-shown) + label{ font-size:.66rem; }

    .campus-btn{ height:44px; font-size:.9rem; }

    .switch-label, .forgot-link, .campus-alt-link{ font-size:.76rem; }
}

@media (max-width: 360px){
    .campus-title h2{ font-size:1.2rem; }
    .campus-check{ flex-direction:column; align-items:flex-start; gap:.6rem; }
}

@media (prefers-reduced-motion: reduce){
    .campus-card, .campus-field,
    .campus-check, .campus-btn, .campus-alt-link, .stat-card{
        animation: none !important;
    }
    .campus-card, .stat-card{ opacity:1; }
}