/* ═══════════════════════════════════════════════════════════════
   Aulas Guacurarí — Login / Registro
   Usado por auth/registro.php y autoasistidos/activar.php (páginas
   standalone, fuera del shell de portal). .btn-autoasistidos vive
   en catalogo.css (componente global) — esas páginas cargan ambos.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   Login / Registro
   ═══════════════════════════════════════════════════════════════ */

.autoasistidos-login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    background: var(--sidebar-bg); /* era #00695c */
}

.autoasistidos-login-body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 12% 82%, rgba(33,150,243,.2) 0%, transparent 100%), /* era rgba(0,220,200,.2) */
        radial-gradient(ellipse 55% 65% at 90% 10%, rgba(13,20,40,.55) 0%, transparent 100%), /* era rgba(0,40,35,.55) */
        radial-gradient(ellipse 90% 90% at 50% 50%, var(--autoasistidos-primary) 0%, var(--sidebar-bg) 100%); /* era #00897b 0%, #004d40 100% */
    pointer-events: none;
}

.autoasistidos-login-body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}

.autoasistidos-login-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
}

.autoasistidos-login-card {
    background: #fff;
    border-radius: 20px;
    box-shadow:
        0 24px 64px rgba(0,0,0,.22),
        0 4px 16px rgba(0,0,0,.1);
    overflow: hidden;
}

.autoasistidos-login-card-accent {
    height: 3px;
    background: linear-gradient(90deg, var(--sidebar-active-border), var(--autoasistidos-primary), #2196f3, var(--autoasistidos-primary), var(--sidebar-active-border)); /* era #4db6ac, #009688, #00bfa5, #009688, #4db6ac */
    background-size: 300% 100%;
    animation: accentShimmer 4s linear infinite;
}

@keyframes accentShimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.autoasistidos-login-inner  { padding: 2.25rem 2.5rem 2rem; }

.autoasistidos-login-footer {
    padding: 1rem 2.5rem 1.25rem;
    background: #f7fafa;
    border-top: 1px solid #edf2f1;
    text-align: center;
    font-size: .84rem;
    color: var(--autoasistidos-text-muted);
}
.autoasistidos-login-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.autoasistidos-login-logo img {
    max-height: 74px;
    width: auto;
    margin-bottom: .5rem;
}

.autoasistidos-login-subtitle {
    font-size: .72rem;
    color: var(--autoasistidos-text-muted);
    margin: 0;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ── Numbered step indicator ─────────────────────────────────── */
.reg-steps {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
}

/* Cada paso: círculo + label en columna → label siempre centrado bajo el círculo */
.reg-step-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.reg-step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    border: 2px solid #d1d9e0;
    background: #fff;
    color: #b0bec5;
    flex-shrink: 0;
    transition: all .35s cubic-bezier(.4,0,.2,1);
}

.reg-step-line {
    flex: 1;
    height: 2px;
    background: #e2e8f0;
    border-radius: 1px;
    transition: background .35s;
    margin-top: 14px; /* (30px − 2px) / 2 = centra la línea con el círculo */
}
.reg-step-line.done    { background: var(--autoasistidos-primary); }
.reg-step-line.skipped {
    background: repeating-linear-gradient(
        to right,
        #d1d9e0 0, #d1d9e0 4px,
        transparent 4px, transparent 9px
    );
}

.reg-step-label {
    font-size: .64rem;
    color: #b0bec5;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: color .35s;
    text-align: center;
    margin-top: 5px;
    white-space: nowrap;
}

/* Estados: done, active, skipped */
.reg-step-num.done {
    background: var(--autoasistidos-primary);
    border-color: var(--autoasistidos-primary);
    color: transparent; /* número oculto, reemplazado por checkmark */
}
.reg-step-num.done::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
}
.reg-step-num.active {
    border-color: var(--autoasistidos-primary);
    color: var(--autoasistidos-primary);
    box-shadow: 0 0 0 4px rgba(var(--autoasistidos-primary-rgb),.13);
}
/* Skipped: dato ya existente, paso omitido — borde punteado, muy tenue */
.reg-step-num.skipped {
    border-style: dashed;
    border-color: #d1d9e0;
    color: #d1d9e0;
    background: #fff;
}
.reg-step-label.done    { color: var(--autoasistidos-primary); }
.reg-step-label.active  { color: var(--autoasistidos-primary-dk); }
.reg-step-label.skipped { color: #d1d9e0; }

/* ── Botón Volver ────────────────────────────────────────────── */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--autoasistidos-primary-lt);
    border: none;
    color: var(--autoasistidos-primary-dk);
    font-size: .82rem;
    font-weight: 600;
    font-family: var(--font);
    padding: 5px 11px 5px 8px;
    border-radius: 20px;
    cursor: pointer;
    margin-bottom: 1.25rem;
    transition: background .15s, color .15s;
}
.btn-back:hover { background: #bbdefb; color: var(--sidebar-bg); } /* era #b2dfdb / #004d40 */
.btn-back i { font-size: .78rem; }

/* ── Step transitions ────────────────────────────────────────── */
.registro-step { display: none; }
.registro-step.active {
    display: block;
    animation: stepReveal .28s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes stepReveal {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Step description ────────────────────────────────────────── */
.step-desc {
    font-size: .875rem;
    color: var(--autoasistidos-text-muted);
    margin-bottom: 1.25rem;
    line-height: 1.55;
}

/* ── Custom inputs ───────────────────────────────────────────── */
.reg-field              { margin-bottom: 1rem; }
.reg-field-row          { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.reg-field-row .reg-field { margin-bottom: 0; }

.reg-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: .35rem;
}
.reg-label .req { color: var(--autoasistidos-primary); margin-left: 1px; }

.reg-input-wrap { position: relative; }

.reg-input {
    width: 100%;
    border: 1.5px solid #d1d9e0;
    border-radius: 9px;
    padding: 11px 14px;
    font-size: .92rem;
    font-family: var(--font);
    color: var(--autoasistidos-text);
    background: #fafbfc;
    transition: border-color .2s, box-shadow .2s, background .2s;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.reg-input:focus {
    border-color: var(--autoasistidos-primary);
    box-shadow: 0 0 0 3px rgba(var(--autoasistidos-primary-rgb),.13);
    background: #fff;
}
.reg-input::placeholder { color: #c4cdd6; }
.reg-input.with-icon    { padding-left: 40px; }
.reg-input.with-btn     { padding-right: 44px; }

.reg-input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #b0bec5;
    font-size: .95rem;
    pointer-events: none;
    transition: color .2s;
}
.reg-input-wrap:focus-within .reg-input-icon { color: var(--autoasistidos-primary); }

.reg-input-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 6px 10px;
    color: #90a4ae;
    cursor: pointer;
    border-radius: 6px;
    line-height: 1;
    transition: color .15s, background .15s;
}
.reg-input-btn:hover { color: #37474f; background: #f0f4f7; }

/* ── DNI preview chip ────────────────────────────────────────── */
.dni-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--autoasistidos-primary-lt); /* era #e0f2f1 */
    color: var(--sidebar-bg); /* era #00695c */
    border-radius: 20px;
    padding: 4px 11px 4px 8px;
    font-size: .79rem;
    font-weight: 700;
    letter-spacing: .07em;
    margin-top: 7px;
    font-family: 'Courier New', monospace;
    animation: chipPop .22s ease;
}
.dni-chip i { font-size: .72rem; }

@keyframes chipPop {
    from { transform: scale(.8); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

/* ── Domain hint ─────────────────────────────────────────────── */
.domain-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 8px 11px;
    margin-top: 7px;
    font-size: .82rem;
    color: #92400e;
    animation: stepReveal .2s ease;
}
.domain-hint i  { color: #d97706; flex-shrink: 0; }
.domain-hint a  { color: #065f46; font-weight: 600; text-decoration: none; }
.domain-hint a:hover { text-decoration: underline; }

/* ── Error / Info alerts ─────────────────────────────────────── */
.reg-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border-radius: 9px;
    padding: 10px 13px;
    font-size: .85rem;
    margin-bottom: 1.1rem;
    animation: stepReveal .2s ease;
}
.reg-alert.hidden { display: none !important; }
.reg-alert i { flex-shrink: 0; margin-top: 1px; }

.reg-alert--error {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}


/* ── DNI confirm badge (step 3) ──────────────────────────────── */
.step-confirm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .79rem;
    color: var(--autoasistidos-text-muted);
    padding: 5px 10px;
    background: #f0fdf9;
    border-radius: 6px;
    border: 1px solid #a7f3d0;
    margin-bottom: 1.25rem;
}
.step-confirm-badge strong {
    color: var(--autoasistidos-primary-dk);
    letter-spacing: .06em;
    font-family: 'Courier New', monospace;
}

/* ── "Ya tiene cuenta" step ──────────────────────────────────── */
.step-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1.25rem;
}
.step-icon-circle--success { background: #dcfce7; color: #16a34a; }

/* Responsive del shell (sidebar tablet/desktop-collapse/mobile) →
   shared/components/portal/portal-shell.css. Acá solo queda lo que
   cambia por módulo dentro del breakpoint mobile (contenido propio). */
@media (max-width: 767px) {
    /* Grilla 1 columna */
    .autoasistidos-cursos-grid {
        grid-template-columns: 1fr;
        gap: .75rem;
        grid-auto-rows: auto;
    }
    .curso-card-desc {
        display: none;
    }
    /* Título de página más compacto */
    .autoasistidos-page-title {
        font-size: 1rem;
    }

    /* Buscador sticky */
    .mb-3:has(.autoasistidos-search-wrap) {
        position: sticky;
        top: var(--topbar-h);
        background: var(--autoasistidos-bg);
        padding: 8px 0 6px;
        margin: 0 -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        z-index: 150;
        box-shadow: 0 2px 6px rgba(0,0,0,.06);
    }
    .autoasistidos-search-wrap {
        max-width: 100%;
    }
}

/* ── Login/Registro mobile (scroll fix) ──────────────────────── */
@media (max-width: 575px) {
    .autoasistidos-login-body {
        overflow-x: hidden;
        overflow-y: auto;
        align-items: flex-start;
        padding: 1.25rem .875rem;
    }
    .autoasistidos-login-wrapper {
        width: 100%;
        padding-bottom: 1.5rem;
    }

    /* Card más compacta */
    .autoasistidos-login-card {
        border-radius: 16px;
    }
    .autoasistidos-login-inner {
        padding: 1.5rem 1.25rem 1.25rem;
    }
    .autoasistidos-login-footer {
        padding: .75rem 1.25rem 1rem;
        font-size: .8rem;
    }

    /* Logo más chico */
    .autoasistidos-login-logo {
        margin-bottom: 1.25rem;
    }
    .autoasistidos-login-logo img {
        max-height: 52px;
    }
    .autoasistidos-login-subtitle {
        font-size: .65rem;
    }

    /* Step indicator compacto */
    .reg-steps {
        margin-bottom: 1.25rem;
    }
    .reg-step-num {
        width: 26px;
        height: 26px;
        font-size: .72rem;
    }
    .reg-step-line {
        margin-top: 12px; /* (26px − 2px) / 2 */
    }
    .reg-step-label {
        font-size: .55rem;
        letter-spacing: .02em;
    }

    /* Inputs más compactos */
    .reg-input {
        padding: 9px 12px;
        font-size: .875rem;
    }
    .reg-input.with-icon {
        padding-left: 36px;
    }
    .reg-input-icon {
        left: 11px;
        font-size: .875rem;
    }
    .reg-label {
        font-size: .78rem;
    }
    .reg-field {
        margin-bottom: .875rem;
    }

    /* Stack nombre/apellido en 1 columna */
    .reg-field-row {
        grid-template-columns: 1fr;
        margin-bottom: 0;
    }
    .reg-field-row .reg-field {
        margin-bottom: .875rem;
    }

    /* Botón más compacto */
    .autoasistidos-login-body .btn-autoasistidos,
    .btn-autoasistidos {
        padding: 11px;
        font-size: .9rem;
    }

    /* step-desc más compacto */
    .step-desc {
        font-size: .82rem;
        margin-bottom: 1rem;
    }
    .btn-back {
        margin-bottom: 1rem;
    }
}