/* Pantallas auth alumnos — coherente con tokens Ableton */

.auth-body {
    overflow: auto;
    height: auto;
    min-height: 100dvh;
    background: var(--bg-deep);
}

.auth-layout {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: 2rem 1.25rem;
}

.auth-layout--wide .auth-card {
    width: min(100%, 480px);
}

.auth-card {
    width: min(100%, 420px);
    padding: 2rem;
    background: var(--bg-1);
    border: 1px solid var(--bg-4);
    border-radius: 6px;
    box-shadow: 0 20px 40px rgb(0 0 0 / 45%);
}

.auth-back {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 12px;
    color: var(--tx-3);
}
.auth-back:hover { color: var(--c-yellow); }

.auth-kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-yellow);
    margin-bottom: .5rem;
}

.auth-card h1 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--tx-0);
    margin-bottom: .5rem;
}

.auth-lead {
    color: var(--tx-2);
    font-size: 13px;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.auth-muted { color: var(--tx-3); font-size: 12px; }

.auth-form {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.auth-form label {
    font-size: 11px;
    font-weight: 600;
    color: var(--tx-2);
    margin-top: .35rem;
}

.auth-form input {
    padding: .65rem .75rem;
    background: var(--bg-0);
    border: 1px solid var(--bg-4);
    border-radius: 4px;
    color: var(--tx-0);
    font-size: 14px;
}

.auth-form input:focus {
    outline: 1px solid var(--c-yellow);
    border-color: var(--c-yellow);
}

.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: .75rem;
    padding: .7rem 1rem;
    background: var(--c-yellow);
    color: var(--bg-0);
    font-weight: 700;
    font-size: 13px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.auth-submit:hover { filter: brightness(1.05); }
.auth-submit:disabled { opacity: .6; cursor: not-allowed; }

.auth-submit--ghost {
    background: var(--bg-3);
    color: var(--tx-0);
}

.auth-feedback {
    margin-top: .75rem;
    font-size: 12px;
    line-height: 1.4;
}
.auth-feedback.is-ok { color: var(--c-green); }
.auth-feedback.is-err { color: var(--rec); }

.auth-alt {
    margin-top: 1.25rem;
    font-size: 12px;
    color: var(--tx-3);
}
.auth-alt a {
    color: var(--c-yellow);
    font-weight: 600;
}

.auth-fieldset {
    margin: .5rem 0 0;
    padding: .75rem;
    border: 1px solid var(--bg-4);
    border-radius: 4px;
}

.reg-dancer {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0 0 .35rem;
    padding: .7rem .8rem;
    border: 1px dashed var(--bg-4);
    border-radius: 6px;
    background: var(--bg-2);
    font-size: 13px;
    line-height: 1.4;
    color: var(--tx-1);
    cursor: pointer;
}
.reg-dancer input { margin-top: .15rem; accent-color: var(--c-yellow); }
.reg-dancer strong { color: var(--tx-0); }
#solo-alumno[hidden] { display: none; }

/* Casilla de consentimiento legal */
.reg-consent {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: .2rem 0 .6rem;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--tx-2);
    cursor: pointer;
}
.reg-consent input { margin-top: .15rem; accent-color: var(--c-green); }
.reg-consent a { color: var(--c-cyan); text-decoration: none; }
.reg-consent a:hover { text-decoration: underline; }

.auth-fieldset legend {
    font-size: 11px;
    font-weight: 600;
    color: var(--tx-2);
    padding: 0 .25rem;
}

.auth-radio {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .4rem;
    font-size: 13px;
    color: var(--tx-1);
    cursor: pointer;
}

.auth-radio input {
    accent-color: var(--c-yellow);
}

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1rem;
}

/* ============================================================
   DASHBOARD ALUMNO — asistencia
   ============================================================ */
.auth-layout--wide .dash-card { width: min(100%, 560px); }

.dash-subtitle {
    margin: 1.5rem 0 .5rem;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tx-1);
}

/* Resumen numérico */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    margin: 1.25rem 0;
}
.dash-stat[hidden] { display: none; }
.dash-stat {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .8rem .6rem;
    background: var(--bg-2);
    border: 1px solid var(--bg-4);
    border-top: 2px solid var(--bg-5);
    border-radius: 5px;
}
.dash-stat--ok  { border-top-color: var(--c-green); }
.dash-stat--bad { border-top-color: var(--rec); }
.dash-stat--pct { border-top-color: var(--c-yellow); }
.dash-stat-num {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--tx-0);
}
.dash-stat-lbl {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tx-3);
}

/* Historial */
.dash-list {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.dash-list[hidden] { display: none; }
.dash-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    background: var(--bg-1);
    border: 1px solid var(--bg-4);
    border-left: 3px solid var(--c-green);
    border-radius: 4px;
    font-size: 13px;
}
.dash-row.is-ausente { border-left-color: var(--rec); }
.dash-row-fecha {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--tx-3);
    white-space: nowrap;
}
.dash-row-tema { color: var(--tx-1); }
.dash-row-nota {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--tx-3);
    border-top: 1px dashed var(--bg-4);
    padding-top: .4rem;
}
.dash-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .2rem .5rem;
    border-radius: 99px;
    white-space: nowrap;
}
.dash-badge.is-presente    { background: rgba(133,212,60,.15); color: var(--c-green); }
.dash-badge.is-ausente,
.dash-badge.is-falta,
.dash-badge.is-rechazada   { background: rgba(255,59,59,.15);  color: var(--rec); }
.dash-badge.is-justificada,
.dash-badge.is-pendiente   { background: rgba(248,210,99,.15); color: var(--c-yellow); }
.dash-badge.is-reprogramada,
.dash-badge.is-aceptada    { background: rgba(92,205,237,.15); color: var(--c-cyan); }
.dash-badge.is-fundador    { background: rgba(183,134,217,.18); color: var(--c-purple); }
.dash-badge.is-miembro     { background: rgba(255,255,255,.07); color: var(--tx-2); }
.dash-badge.is-productor   { background: rgba(242,137,187,.15); color: var(--c-pink, #f289bb); }

.dash-row.is-falta, .dash-row.is-rechazada    { border-left-color: var(--rec); }
.dash-row.is-justificada, .dash-row.is-pendiente { border-left-color: var(--c-yellow); }
.dash-row.is-reprogramada, .dash-row.is-aceptada { border-left-color: var(--c-cyan); }

/* ===== Deuda: chips de filtro + badge + banner ===== */
.al-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .25rem 0 .9rem;
}
.al-chips[hidden] { display: none; }
.al-chip {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--tx-2);
    background: var(--bg-2);
    border: 1px solid var(--bg-4);
    border-radius: 99px;
    padding: .35rem .7rem;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s, transform .1s;
}
.al-chip b { color: var(--tx-0); margin-left: .2rem; }
.al-chip:hover { transform: translateY(-1px); border-color: var(--tx-3); }
.al-chip.is-active { border-color: var(--c-cyan); color: var(--c-cyan); background: rgba(92,205,237,.1); }
.al-chip--ok.is-active   { border-color: var(--c-green); color: var(--c-green); background: rgba(133,212,60,.12); }
.al-chip--alu.is-active  { border-color: var(--c-green); color: var(--c-green); background: rgba(133,212,60,.12); }
.al-chip--alu b { color: var(--c-green); }
.al-chip--debe.is-active { border-color: var(--rec); color: var(--rec); background: rgba(255,59,59,.12); }
.al-chip--debe b { color: var(--rec); }
.al-chip--vence.is-active { border-color: var(--c-yellow); color: var(--c-yellow); background: rgba(248,210,99,.12); }
.al-chip--vence b { color: var(--c-yellow); }
.al-chip--com.is-active { border-color: var(--c-purple, #b786d9); color: var(--c-purple, #b786d9); background: rgba(183,134,217,.12); }
.al-chip--com b { color: var(--c-purple, #b786d9); }
/* Tipos de miembro: Miembros (violeta), Productores (rosa), Dancers (cian), Moderadores (naranja) */
.al-chip--mem.is-active { border-color: var(--c-purple, #b786d9); color: var(--c-purple, #b786d9); background: rgba(183,134,217,.12); }
.al-chip--mem b { color: var(--c-purple, #b786d9); }
.al-chip--prod.is-active { border-color: #f289bb; color: #f289bb; background: rgba(242,137,187,.12); }
.al-chip--prod b { color: #f289bb; }
.al-chip--ex.is-active { border-color: #f5d98a; color: #f5d98a; background: rgba(245,217,138,.1); }
.al-chip--ex b { color: #f5d98a; }
.al-chip--dan.is-active { border-color: #5fd0e0; color: #5fd0e0; background: rgba(95,208,224,.12); }
.al-chip--dan b { color: #5fd0e0; }
.al-chip--mod.is-active { border-color: #f0a35f; color: #f0a35f; background: rgba(240,163,95,.12); }
.al-chip--mod b { color: #f0a35f; }

/* ---- Selector de TIPO (rango exclusivo) en la ficha: pildoras de un click ---- */
.ad-tipo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--bg-4); }
.ad-tipo-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-tipo-pill {
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
    padding: 7px 13px; min-height: 30px; border-radius: 999px;
    border: 1px solid var(--bg-5); background: var(--bg-2); color: var(--tx-2);
    cursor: pointer; transition: border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.ad-tipo-pill:hover:not(:disabled) { border-color: var(--tx-3); color: var(--tx-0); transform: translateY(-1px); }
.ad-tipo-pill:disabled { cursor: default; opacity: .9; }
.ad-tipo-pill.is-cur { font-weight: 800; }
.ad-tipo-pill.is-cur.tp-alumno     { border-color: var(--c-green);  color: var(--c-green);  background: rgba(133,212,60,.12); }
.ad-tipo-pill.is-cur.tp-productor  { border-color: #f289bb;         color: #f289bb;         background: rgba(242,137,187,.12); }
.ad-tipo-pill.is-cur.tp-miembro    { border-color: var(--tx-2);     color: var(--tx-0);     background: rgba(255,255,255,.08); }
.ad-tipo-pill.is-cur.tp-dancer     { border-color: #5fd0e0;         color: #5fd0e0;         background: rgba(95,208,224,.12); }
.ad-tipo-pill.is-cur.tp-moderador  { border-color: #f0a35f;         color: #f0a35f;         background: rgba(240,163,95,.12); }
.ad-tipo-pill.is-cur.tp-profesor   { border-color: var(--c-cyan);   color: var(--c-cyan);   background: rgba(92,205,237,.12); }
.ad-tipo-pill.is-cur.tp-fundador   { border-color: var(--c-purple, #b786d9); color: var(--c-purple, #b786d9); background: rgba(183,134,217,.14); }

/* Campanita de vencimientos en el header */
.campana {
    position: relative;
    background: var(--bg-2);
    border: 1px solid var(--bg-4);
    border-radius: 8px;
    padding: .45rem .6rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: border-color .15s ease, transform .1s ease;
}
.campana[hidden] { display: none; }
.campana:hover { transform: translateY(-1px); border-color: var(--c-yellow); }
.campana-num {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    margin-left: .35rem;
    color: var(--c-yellow);
}
.campana.has-alerta {
    border-color: var(--c-yellow);
    animation: campanaPulse 2s ease-in-out infinite;
}
@keyframes campanaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248,210,99,.4); }
    50%      { box-shadow: 0 0 0 5px rgba(248,210,99,0); }
}
@media (prefers-reduced-motion: reduce) { .campana.has-alerta { animation: none; } }

/* Fila de alumno deudor: borde rojo a la izquierda */
.dash-row.is-deudor { border-left-color: var(--rec); }

/* Badge "Debe N meses" con pulso para que salte a la vista */
.badge-deuda {
    background: rgba(255,59,59,.16);
    color: var(--rec);
    animation: deudaPulse 2s ease-in-out infinite;
}
.badge-deuda.is-vencido {
    background: var(--rec);
    color: #fff;
}
@keyframes deudaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,59,.45); }
    50%      { box-shadow: 0 0 0 4px rgba(255,59,59,0); }
}

/* Banner de deuda en la ficha del alumno */
.ad-deuda {
    margin: .25rem 0 1rem;
    padding: .8rem .9rem;
    border-radius: 8px;
    background: rgba(255,59,59,.08);
    border: 1px solid rgba(255,59,59,.35);
    border-left: 4px solid var(--rec);
}
.ad-deuda[hidden] { display: none; }
.ad-deuda.is-grave {
    background: rgba(255,59,59,.14);
    border-color: var(--rec);
}
.ad-deuda-head { display: flex; align-items: center; gap: .5rem; }
.ad-deuda-ico { font-size: 1.1rem; line-height: 1; }
.ad-deuda-tit {
    font-weight: 800;
    color: var(--rec);
    font-size: 14px;
}
.ad-deuda-meses { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.ad-deuda-mes {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: capitalize;
    color: var(--tx-2);
    background: var(--bg-2);
    border: 1px solid var(--bg-4);
    border-radius: 4px;
    padding: .2rem .45rem;
}
.ad-deuda-mes.is-actual { border-color: var(--rec); color: var(--rec); }

@media (prefers-reduced-motion: reduce) {
    .badge-deuda { animation: none; }
}

@media (max-width: 520px) {
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   PORTAL ALUMNO — layout con tabs (perfil / asistencia / comunidad)
   ============================================================ */
.portal {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

.portal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.portal-id { display: flex; align-items: center; gap: .9rem; }
.portal-id-txt h1 { font-size: 1.4rem; font-weight: 800; color: var(--tx-0); margin: .1rem 0; }
.portal-head-actions { display: flex; gap: .5rem; }
.portal-head-actions .auth-submit { margin-top: 0; }

/* Avatar (con imagen o inicial) */
.portal-avatar {
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--bg-3) center/cover no-repeat;
    border: 2px solid var(--bg-5);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--c-yellow);
    overflow: hidden;
}
.portal-avatar--lg { width: 84px; height: 84px; font-size: 2rem; }
.portal-avatar.has-img { color: transparent; }

/* Tabs */
.portal-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--bg-4);
    margin-bottom: 1.25rem;
    overflow-x: auto;                 /* en mobile se deslizan en vez de romperse */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.portal-tabs::-webkit-scrollbar { display: none; }
.portal-tab {
    padding: .6rem 1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--tx-2);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;              /* que no parta el texto en dos líneas */
    flex: 0 0 auto;
}
.portal-tab:hover { color: var(--tx-0); }
.portal-tab.is-active { color: var(--c-yellow); border-bottom-color: var(--c-yellow); }

/* Indicador de "hay más opciones" en barras scrolleables (pestañas) */
.scroll-hint-wrap { position: relative; }
.scroll-hint {
    position: absolute; top: 0; bottom: 1px; width: 34px;
    display: none; align-items: center; z-index: 4;
    font-size: 20px; font-weight: 900; color: var(--c-yellow);
    cursor: pointer; user-select: none;
    animation: schintPulse 1.4s ease-in-out infinite;
}
.scroll-hint--right { right: 0; justify-content: flex-end; padding-right: 4px; background: linear-gradient(to right, transparent, var(--bg-1) 65%); }
.scroll-hint--left { left: 0; justify-content: flex-start; padding-left: 4px; background: linear-gradient(to left, transparent, var(--bg-1) 65%); }
.scroll-hint-wrap.has-right .scroll-hint--right { display: flex; }
.scroll-hint-wrap.has-left .scroll-hint--left { display: flex; }
@keyframes schintPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

.portal-panel { display: none; }
.portal-panel.is-active { display: block; animation: portalFade .35s ease both; }
@keyframes portalFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.portal-panel .auth-card { width: 100%; }

/* ===== Micro-interacciones (que no aburra) ===== */
/* Filas: leve realce y elevación al pasar el mouse */
.dash-row { transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease; }
.admin-row-click:hover {
    transform: translateX(2px);
    border-color: var(--bg-5);
    box-shadow: -3px 0 0 0 var(--c-yellow);
    cursor: pointer;
}
.admin-row-click.is-deudor:hover { box-shadow: -3px 0 0 0 var(--rec); }
/* Tarjetas de stats: leve subida al hover */
.dash-stat { transition: transform .12s ease, border-top-color .15s ease; }
.dash-stat:hover { transform: translateY(-2px); }
/* Entrada suave de las filas al renderizar la lista */
.dash-list .dash-row { animation: rowIn .25s ease both; }
@keyframes rowIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Selector de orden de alumnos */
.al-orden {
    margin-left: auto;
    background: var(--bg-2);
    color: var(--tx-1);
    border: 1px solid var(--bg-4);
    border-radius: 99px;
    font-family: var(--font-mono);
    font-size: 11px;
    padding: .35rem .6rem;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.al-orden:hover, .al-orden:focus { border-color: var(--c-cyan); color: var(--c-cyan); outline: none; }
.al-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 .9rem; }
.al-toolbar[hidden] { display: none; }
.al-toolbar .al-chips { margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .dash-list .dash-row { animation: none; }
    .admin-row-click:hover, .dash-stat:hover { transform: none; }
}

/* ===== Resumen (dashboard de inicio) ===== */
.rs-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.rs-head-btns { display: flex; gap: .4rem; flex-wrap: wrap; }
.rs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .6rem;
    margin: 1rem 0 .5rem;
}
.rs-card {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    text-align: left;
    padding: .9rem .85rem;
    background: var(--bg-2);
    border: 1px solid var(--bg-4);
    border-left: 3px solid var(--bg-5);
    border-radius: 7px;
    color: inherit;
    font: inherit;
}
.rs-card.is-click { cursor: pointer; transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease; }
.rs-card.is-click:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.rs-card--ok   { border-left-color: var(--c-green); }
.rs-card--bad  { border-left-color: var(--rec); }
.rs-card--warn { border-left-color: var(--c-yellow); }
.rs-card-num { font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--tx-0); }
.rs-card--bad  .rs-card-num { color: var(--rec); }
.rs-card--warn .rs-card-num { color: var(--c-yellow); }
.rs-card-lbl {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tx-3);
}
.rs-card-sub { font-size: 11px; color: var(--tx-2); margin-top: .15rem; }
.rs-cumple[hidden] { display: none; }
.rs-cumple { margin-top: 1.25rem; }

/* Clase de hoy (asistencia en lote) */
.rs-hoy { margin-top: 1.25rem; }
.rs-hoy[hidden] { display: none; }
.hoy-turno { margin: 0 0 .9rem; padding: .6rem .8rem; background: var(--bg-2); border: 1px solid var(--bg-4); border-left: 3px solid var(--c-cyan); border-radius: 6px; }
.hoy-turno-hora { font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; color: var(--c-cyan); text-transform: uppercase; margin-bottom: .5rem; }
.hoy-alumno { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--bg-3); flex-wrap: wrap; }
.hoy-alumno:first-of-type { border-top: 0; }
.hoy-alumno-nom { color: var(--tx-0); font-size: 13px; }
.hoy-acc { display: flex; align-items: center; gap: .4rem; }
.hoy-fb { font-family: var(--font-mono); font-size: 11px; min-width: 4.5rem; }
.hoy-fb.is-ok { color: var(--c-green); }
.hoy-fb.is-bad { color: var(--rec); }

/* ===== Modal de perfil detallado ===== */
/* "Te escuchamos" — botón flotante + modal */
.te-escuchamos-fab {
    position: fixed; right: 18px; bottom: 18px; z-index: 900;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .7rem 1rem;
    background: var(--c-yellow); color: #111; border: 0;
    border-radius: 999px; font-weight: 700; font-size: 13px;
    cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.35);
    transition: transform .12s ease, filter .12s ease;
}
.te-escuchamos-fab:hover { transform: translateY(-2px); filter: brightness(1.05); }
.te-modal {
    position: fixed; inset: 0; z-index: 1001;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.te-modal[hidden] { display: none; }
.te-modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(2px); }
.te-modal-card {
    position: relative;
    width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto;
    background: var(--bg-1); border: 1px solid var(--bg-4);
    border-top: 3px solid var(--c-yellow);
    border-radius: 14px; padding: 1.5rem;
    animation: portalFade .25s ease both;
}
.te-modal-card textarea {
    width: 100%; box-sizing: border-box; resize: vertical;
    padding: .6rem .7rem; border: 1px solid var(--bg-4); border-radius: 6px;
    background: var(--bg-2); color: var(--tx-0); font-family: inherit; font-size: 13px; line-height: 1.4;
}
.te-modal-card textarea:focus { outline: none; border-color: var(--c-yellow); }

.perfil-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.perfil-modal[hidden] { display: none; }
.perfil-modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(2px); }
.perfil-modal-card {
    position: relative;
    width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto;
    background: var(--bg-1); border: 1px solid var(--bg-4);
    border-top: 3px solid var(--c-cyan);
    border-radius: 14px; padding: 1.5rem;
    animation: portalFade .25s ease both;
}
.perfil-modal-x {
    position: absolute; top: 10px; right: 12px;
    background: none; border: 0; color: var(--tx-2); font-size: 18px; cursor: pointer; line-height: 1;
}
.perfil-modal-x:hover { color: var(--tx-0); }
.pm-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.pm-avatar { width: 64px; height: 64px; font-size: 1.4rem; flex: 0 0 auto; }
.pm-nombre { margin: 0; font-size: 1.25rem; color: var(--tx-0); }
.pm-rol { margin: .25rem 0 0; }
.pm-generos { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--c-yellow); margin: 0 0 .6rem; text-transform: uppercase; }
.pm-bio { color: var(--tx-1); font-size: 14px; line-height: 1.55; margin: 0 0 1rem; white-space: pre-wrap; }
.pm-redes { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.pm-red {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
    color: var(--tx-1); background: var(--bg-2); border: 1px solid var(--bg-4);
    border-radius: 99px; padding: .3rem .7rem; text-decoration: none;
    transition: border-color .15s, color .15s;
}
.pm-red:hover { border-color: var(--c-cyan); color: var(--c-cyan); }
.pm-presskit { display: block; text-align: center; margin: 0 0 .9rem; }
.pm-presskit[hidden] { display: none; }
.pm-tracks { margin: 0 0 1rem; }
.pm-tracks-tit { font-size: 13px; color: var(--tx-0); margin: 0 0 .5rem; }
.pm-tracks-vacio { color: var(--tx-3); font-size: 12.5px; font-style: italic; margin: 0 0 .6rem; }
.pm-tracks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; max-height: 180px; overflow-y: auto; }
.pm-track {
    display: flex; align-items: center; gap: .6rem;
    background: var(--bg-2); border: 1px solid var(--bg-4); border-radius: 6px;
    padding: .45rem .6rem;
}
.pm-track-txt { flex: 1 1 auto; min-width: 0; }
.pm-track-nom { display: block; color: var(--tx-0); font-size: 13px; font-weight: 600; }
.pm-track-tag { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--tx-3); text-transform: uppercase; }
.pm-track-play {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-cyan); color: var(--bg-0); text-decoration: none; font-size: 12px;
    transition: transform .1s ease;
}
.pm-track-play:hover { transform: scale(1.1); }

.pm-acciones { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ===== Reprogramaciones: resumen + grupos ===== */
.repro-resumen { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 1rem; }
.repro-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .75rem; border-radius: 999px; cursor: pointer;
    font-size: 12px; font-weight: 600; color: var(--tx-1);
    background: var(--bg-2); border: 1px solid var(--bg-4);
}
.repro-chip b { font-size: 14px; color: var(--tx-0); }
.repro-chip.is-cero { opacity: .5; }
.repro-chip--pend { border-color: var(--c-yellow); }
.repro-chip--pend b { color: var(--c-yellow); }
.repro-chip--ok   { border-color: var(--c-green); }
.repro-chip--ok b { color: var(--c-green); }
.repro-chip--no   { border-color: var(--c-orange); }
.repro-chip--no b { color: var(--c-orange); }

.repro-grupo { margin-top: 1.1rem; }
.repro-grupo[hidden] { display: none; }
.repro-grupo-tit { font-size: 13px; font-weight: 700; margin: 0 0 .5rem; display: flex; align-items: center; gap: .4rem; }
.repro-grupo-n {
    font-size: 11px; padding: .05rem .4rem; border-radius: 999px;
    background: var(--bg-3); color: var(--tx-1);
}
.repro-grupo--pend .repro-grupo-tit { color: var(--c-yellow); }
.repro-grupo--ok   .repro-grupo-tit { color: var(--c-green); }
.repro-grupo--no   .repro-grupo-tit { color: var(--c-orange); }
/* Pendientes: tarjeta destacada para que salte a la vista */
.repro-grupo--pend .dash-row {
    border-left: 3px solid var(--c-yellow);
    background: color-mix(in srgb, var(--c-yellow) 8%, var(--bg-1));
}

.repro-fechas { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.repro-orig { color: var(--tx-3); text-decoration: line-through; text-decoration-color: var(--tx-3); }
.repro-nueva { color: var(--c-green); font-weight: 700; }
.repro-nueva--pend { color: var(--c-yellow); font-weight: 600; text-decoration: none; }

/* ===== Pagos: planilla por mes ===== */
.pagos-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.pagos-head .dash-subtitle { margin: 0; }
.pagos-estado {
    font-size: 12px; font-weight: 700; padding: .2rem .6rem; border-radius: 999px;
    border: 1px solid var(--bg-4); color: var(--tx-2);
}
.pagos-estado.is-ok    { color: var(--c-green);  border-color: var(--c-green); }
.pagos-estado.is-debe  { color: var(--c-yellow); border-color: var(--c-yellow); }
.pagos-estado.is-grave { color: var(--c-orange); border-color: var(--c-orange); }

.pagos-diapago { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .7rem 0 .2rem; font-size: 13px; }
.pagos-diapago[hidden] { display: none; }  /* si no, el display:flex pisa el hidden y se ve aunque cobre por ciclo */
.pagos-diapago input { width: 64px; text-align: center; padding: .35rem; border: 1px solid var(--bg-4); border-radius: 6px; background: var(--bg-2); color: var(--tx-0); }
.pagos-diapago-hint { font-size: 11px; }
.ad-ayuda { font-size: 11.5px; color: var(--tx-2); margin: .25rem 0 .6rem; line-height: 1.5; }
.ad-ayuda b { color: var(--tx-1); font-weight: 600; }
.repro-hint { display: block; font-size: 11.5px; color: var(--tx-3); margin: -.3rem 0 .6rem; }

/* Asistencias agrupadas por mes (historial) */
.asis-mes-tit { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-green); margin: .6rem 0 .2rem; list-style: none; }
.asis-mes-prev { list-style: none; margin: .2rem 0; }
.asis-mes-prev summary { cursor: pointer; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .04em; color: var(--tx-2); padding: .35rem 0; }
.asis-mes-prev summary:hover { color: var(--tx-0); }
.asis-mes-prev details[open] summary { color: var(--tx-0); }
.asis-mes-prev .dash-list { margin-top: .3rem; }

/* Cobro por ciclo (cada N clases) */
.pagos-ciclo { margin: .3rem 0 .6rem; padding: .8rem .9rem; border: 1px solid var(--bg-4); border-radius: 12px; background: rgba(133,212,60,.05); }
.pagos-ciclo .dash-subtitle { margin: 0 0 .5rem; font-size: 14px; }
.ciclo-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: 13px; color: var(--tx-1); margin-bottom: .5rem; }
.ciclo-row .ci-sem { width: 52px; text-align: center; padding: .3rem; border: 1px solid var(--bg-4); border-radius: 6px; background: var(--bg-2); color: var(--tx-0); }
.ciclo-row--campos { gap: .8rem; }
.ciclo-f { display: flex; flex-direction: column; gap: .2rem; font-size: 12px; }
.ciclo-f-lbl { color: var(--tx-2); font-size: 11px; }
.ciclo-f input { padding: .4rem; border: 1px solid var(--bg-4); border-radius: 6px; background: var(--bg-2); color: var(--tx-0); }
.ciclo-estado { font-size: 13px; margin: .3rem 0 .55rem; padding: .5rem .65rem; border-radius: 8px; background: var(--bg-2); }
.ciclo-estado b { color: var(--tx-0); }
.ciclo-acc { display: flex; gap: .5rem; flex-wrap: wrap; }

.pagos-add { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .8rem 0 .2rem; }
.pagos-add input { padding: .45rem .55rem; border: 1px solid var(--bg-4); border-radius: 6px; background: var(--bg-2); color: var(--tx-0); }
.pagos-add .auth-submit { margin: 0; width: auto; padding: .5rem .9rem; }

.pagos-tabla { display: flex; flex-direction: column; gap: .5rem; margin-top: .7rem; }
.pagos-vacio { margin: .5rem 0; }

.pago-fila {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .6rem .75rem; border-radius: 8px;
    background: var(--bg-2); border: 1px solid var(--bg-4); border-left: 3px solid var(--bg-4);
}
.pago-fila--ok   { border-left-color: var(--c-green); }
.pago-fila--warn { border-left-color: var(--c-yellow); }
.pago-fila--bad  { border-left-color: var(--c-orange); background: color-mix(in srgb, var(--c-orange) 8%, var(--bg-2)); }

.pago-mes { display: flex; flex-direction: column; gap: .15rem; min-width: 120px; }
.pago-mes-nom { font-weight: 700; color: var(--tx-0); font-size: 13px; text-transform: capitalize; }
.pago-badge { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pago-badge--ok   { color: var(--c-green); }
.pago-badge--warn { color: var(--c-yellow); }
.pago-badge--bad  { color: var(--c-orange); }

.pago-fecha { display: flex; flex-direction: column; gap: .15rem; }
.pago-fecha-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--tx-3); }
.pago-fecha input { padding: .35rem .45rem; border: 1px solid var(--bg-4); border-radius: 6px; background: var(--bg-1); color: var(--tx-0); font-size: 12px; }
.pago-monto { width: 92px; padding: .4rem .5rem; border: 1px solid var(--bg-4); border-radius: 6px; background: var(--bg-1); color: var(--tx-0); align-self: flex-end; }
.pago-acc { display: flex; gap: .4rem; margin-left: auto; align-self: flex-end; }
.pm-acciones .auth-submit { flex: 1 1 auto; }
.com-ver-btn { width: 100%; }

/* ===== Editor de perfil (admin) ===== */
.ad-editperfil { margin: .5rem 0 1rem; border: 1px solid var(--bg-4); border-radius: 8px; background: var(--bg-2); }
.ad-editperfil[hidden] { display: none; }
.ad-editperfil > summary { padding: .6rem .85rem; cursor: pointer; font-weight: 700; color: var(--tx-0); font-size: 13px; }
.ad-editperfil > summary:hover { color: var(--c-yellow); }
.ad-editperfil-body { padding: .2rem .85rem .85rem; display: flex; flex-direction: column; gap: .3rem; }
.ep-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--tx-3); margin-top: .45rem; }
.ad-editperfil-body .admin-mini { align-self: flex-start; margin-top: .7rem; }

.ad-noalumno {
    margin: .5rem 0 1rem; padding: .7rem .85rem;
    border: 1px dashed var(--bg-4); border-radius: 8px; background: var(--bg-2);
    font-size: 13px; line-height: 1.45; color: var(--tx-2);
}
.ad-noalumno[hidden] { display: none; }

/* Presskit: link + subir PDF */
.pf-presskit-pdf { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .35rem 0 .2rem; }
.pf-presskit-o { font-size: 12px; color: var(--tx-3); }
.pf-presskit-btn { margin: 0 !important; padding: .4rem .9rem; font-size: 12px; cursor: pointer; }
.pf-presskit-ver { font-size: 12px; color: var(--c-cyan); text-decoration: none; }
.pf-presskit-ver:hover { text-decoration: underline; }
.pf-presskit-ver[hidden] { display: none; }

.ad-notas { margin: .5rem 0 1rem; padding: .75rem .85rem; border: 1px solid var(--bg-4); border-radius: 8px; background: var(--bg-2); }
.ad-notas[hidden] { display: none; }
.ad-notas .dash-subtitle { margin-top: 0; }
.ad-notas textarea { width: 100%; box-sizing: border-box; resize: vertical; padding: .55rem .65rem; border: 1px solid var(--bg-4); border-radius: 6px; background: var(--bg-1); color: var(--tx-0); font-family: inherit; font-size: 13px; line-height: 1.4; }
.ad-notas textarea:focus { outline: none; border-color: var(--c-yellow); }
.ad-notas .admin-row-form { margin-top: .5rem; }

/* ===== Onboarding: completá tu perfil ===== */
.onb {
    background: linear-gradient(135deg, rgba(248,210,99,.10), rgba(92,205,237,.08));
    border: 1px solid var(--bg-4);
    border-left: 3px solid var(--c-yellow);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin: 1rem 0 1.25rem;
}
.onb[hidden] { display: none; }
.onb-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.onb-titulo { font-weight: 800; color: var(--tx-0); font-size: 15px; }
.onb-pct { font-family: var(--font-mono); font-weight: 700; color: var(--c-yellow); font-size: 14px; }
.onb-bar { height: 7px; background: var(--bg-3); border-radius: 99px; overflow: hidden; margin: .5rem 0 .6rem; }
.onb-fill { height: 100%; background: linear-gradient(90deg, var(--c-yellow), var(--c-cyan)); border-radius: 99px; transition: width .4s ease; }
.onb-sub { font-size: 12.5px; color: var(--tx-2); margin: 0 0 .6rem; }
.onb-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.onb-item {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
    color: var(--tx-1); background: var(--bg-2); border: 1px solid var(--bg-4);
    border-radius: 99px; padding: .25rem .6rem;
}
.onb-item::before { content: '○ '; color: var(--rec); }

/* ===== Inicio (home del alumno) ===== */
.inicio-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0 1.25rem;
}
.inicio-acciones .view-btn { margin: 0; }
.inicio-rank-mas { margin-top: .5rem; }

/* Perfil */
.perfil-avatar-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.perfil-avatar-btn { display: inline-flex; margin-top: 0; cursor: pointer; }
.perfil-redes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem 1rem;
    margin-top: .35rem;
}
.perfil-redes label { margin-top: .35rem; }
.auth-form textarea {
    padding: .65rem .75rem;
    background: var(--bg-0);
    border: 1px solid var(--bg-4);
    border-radius: 4px;
    color: var(--tx-0);
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
}
.auth-form textarea:focus { outline: 1px solid var(--c-yellow); border-color: var(--c-yellow); }
.perfil-check { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; font-size: 13px; color: var(--tx-1); cursor: pointer; }
.perfil-check input { accent-color: var(--c-yellow); }

/* Asistencia */
.asis-actions { margin: 1rem 0; }
.repro-box {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--bg-2);
    border: 1px solid var(--bg-4);
    border-radius: 6px;
}
.repro-box summary { cursor: pointer; font-weight: 700; color: var(--tx-0); }
.repro-box .auth-form { margin-top: .75rem; }

/* Comunidad */
.com-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}
.com-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .4rem;
    padding: 1rem;
    background: var(--bg-2);
    border: 1px solid var(--bg-4);
    border-radius: 6px;
    transition: border-color .2s, transform .2s;
}
.com-card:hover { border-color: var(--c-yellow); transform: translateY(-2px); }
.com-card-name { font-size: 14px; font-weight: 700; color: var(--tx-0); margin: 0; }
.com-card-gen { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--c-yellow); margin: 0; }
.com-card-bio {
    font-size: 12px; color: var(--tx-2); margin: 0; line-height: 1.4;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
    overflow: hidden;
}
.com-card-bio.is-expanded { -webkit-line-clamp: unset; overflow: visible; }
.com-bio-toggle {
    align-self: center;
    background: none; border: 0; padding: 2px 0; margin: 0;
    color: var(--c-cyan); font-family: var(--font-mono); font-size: 11px;
    cursor: pointer;
}
.com-bio-toggle:hover { text-decoration: underline; }
.com-card-redes { display: flex; gap: .35rem; margin-top: .35rem; }
.com-red {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    background: var(--bg-3);
    border: 1px solid var(--bg-5);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--tx-1);
}
.com-red:hover { background: var(--c-yellow); color: var(--bg-0); border-color: var(--c-yellow); }

@media (max-width: 520px) {
    .perfil-redes { grid-template-columns: 1fr; }
    .portal-head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   PANEL ADMIN
   ============================================================ */
.portal--admin { width: min(100%, 820px); }

.admin-pill {
    display: inline-grid; place-items: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    margin-left: .35rem;
    background: var(--rec);
    color: #fff;
    border-radius: 99px;
    font-size: 10px; font-weight: 700;
}
/* Sin esto, el atributo hidden no oculta el pill (display lo pisa) → quedaban los círculos rojos clavados */
.admin-pill[hidden] { display: none !important; }

.admin-search {
    width: 100%;
    padding: .6rem .75rem;
    margin-bottom: .75rem;
    background: var(--bg-0);
    border: 1px solid var(--bg-4);
    border-radius: 4px;
    color: var(--tx-0);
    font-size: 14px;
}
.admin-search:focus { outline: 1px solid var(--c-yellow); border-color: var(--c-yellow); }

.admin-row-form {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin: .5rem 0 1rem;
}
.admin-row-form input, .admin-row-form select {
    padding: .55rem .65rem;
    background: var(--bg-0);
    border: 1px solid var(--bg-4);
    border-radius: 4px;
    color: var(--tx-0);
    font-size: 13px;
}
.admin-row-form .auth-submit { margin-top: 0; padding: .55rem 1rem; }

.admin-row-click { cursor: default; }
.admin-mini {
    padding: .25rem .6rem;
    background: var(--bg-3);
    border: 1px solid var(--bg-5);
    border-radius: 4px;
    color: var(--tx-1);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.admin-mini:hover { border-color: var(--c-yellow); color: var(--c-yellow); }
.admin-mini--ok { background: rgba(133,212,60,.15); border-color: var(--c-green); color: var(--c-green); }
.admin-mini--del { background: rgba(255,59,59,.12); border-color: var(--rec); color: var(--rec); }
.admin-mini--ok:hover { background: var(--c-green); color: var(--bg-0); }
.admin-mini--del:hover { background: var(--rec); color: #fff; }
.admin-actions { display: flex; gap: .35rem; }

.view-back-lite {
    background: none; border: 0;
    color: var(--tx-3);
    font-size: 12px;
    cursor: pointer;
    margin-bottom: .5rem;
    padding: 0;
}
.view-back-lite:hover { color: var(--c-yellow); }

/* ============================================================
   CALENDARIO DE ASISTENCIA — estilo Ableton + titileo premium
   ============================================================ */
.cal {
    margin: 1.25rem 0;
    padding: 1rem;
    background: var(--bg-deep);
    border: 1px solid var(--bg-5);
    border-radius: 6px;
}
.cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .85rem;
}
.cal-title {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 14px;
    color: var(--tx-0);
    text-transform: capitalize;
    letter-spacing: .02em;
}
.cal-nav {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    background: var(--bg-2);
    border: 1px solid var(--bg-5);
    border-radius: 4px;
    color: var(--tx-1);
    font-size: 15px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.cal-nav:hover { border-color: var(--c-yellow); color: var(--c-yellow); }

.cal-dows, .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}
.cal-dows { margin-bottom: 5px; }
.cal-dow {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tx-3);
}

/* Celdas tipo clip de Ableton */
.cal-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    background: var(--bg-1);
    border: 1px solid var(--bg-3);
    border-radius: 3px;
    color: var(--tx-3);
}
.cal-cell.is-empty { background: transparent; border-color: transparent; }
.cal-num {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: inherit;
}

/* Estados (colores Ableton) */
.cal-cell.is-presente    { background: rgba(133,212,60,.16);  border-color: var(--c-green);  color: var(--c-green); }
.cal-cell.is-falta       { background: rgba(255,59,59,.15);   border-color: var(--rec);      color: var(--rec); }
.cal-cell.is-justificada { background: rgba(248,210,99,.16);  border-color: var(--c-yellow); color: var(--c-yellow); }
.cal-cell.is-reprogramada{ background: rgba(92,205,237,.16);  border-color: var(--c-cyan);   color: var(--c-cyan); }
.cal-cell.is-marked .cal-num { font-weight: 700; }

/* Hoy */
.cal-cell.is-today { outline: 1px solid var(--tx-2); outline-offset: -1px; }
.cal-cell.is-today::after {
    content: '';
    position: absolute;
    bottom: 3px; left: 50%; transform: translateX(-50%);
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--tx-1);
}

/* Titileo premium: glow suave que respira (serio, sin exagerar) */
@media (prefers-reduced-motion: no-preference) {
    .cal-cell.is-marked { animation: calGlow 2.6s ease-in-out infinite; }
    @keyframes calGlow {
        0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
        50%      { box-shadow: 0 0 9px -1px currentColor; }
    }
}

/* Leyenda */
.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-top: .9rem;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--tx-3);
}
.cal-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.cal-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.cal-dot.is-presente    { background: var(--c-green); }
.cal-dot.is-falta       { background: var(--rec); }
.cal-dot.is-justificada { background: var(--c-yellow); }
.cal-dot.is-reprogramada{ background: var(--c-cyan); }

/* ============================================================
   ESTADO DE CUENTA (alumno)
   ============================================================ */
.cuenta-box {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .7rem .85rem;
    margin-bottom: 1rem;
    background: var(--bg-2);
    border: 1px solid var(--bg-4);
    border-radius: 6px;
}
.cuenta-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .25rem .6rem;
    border-radius: 99px;
}
.cuenta-badge.is-ok   { background: rgba(133,212,60,.15); color: var(--c-green); }
.cuenta-badge.is-debe { background: rgba(248,210,99,.18); color: var(--c-yellow); }
.cuenta-txt { font-size: 13px; color: var(--tx-1); flex: 1; min-width: 140px; }
.cuenta-toggle {
    background: none; border: 1px solid var(--bg-5);
    color: var(--tx-2);
    font-size: 11px;
    padding: .3rem .6rem;
    border-radius: 4px;
    cursor: pointer;
}
.cuenta-toggle:hover { border-color: var(--c-yellow); color: var(--c-yellow); }

/* ============================================================
   MURO DE MATERIAL
   ============================================================ */
.mat-upload {
    margin: .25rem 0 1.25rem;
    padding: 1rem;
    background: var(--bg-2);
    border: 1px solid var(--bg-4);
    border-radius: 6px;
}
.mat-upload summary { cursor: pointer; font-weight: 700; color: var(--c-yellow); font-size: 13px; }
.mat-upload .auth-form { margin-top: .75rem; }
.mat-upload input[type="file"] {
    font-size: 12px;
    color: var(--tx-2);
}

.mat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.mat-list[hidden] { display: none; }
.mat-seccion {
    display: flex; align-items: center; gap: .5rem;
    margin: 1rem 0 .1rem; padding-bottom: .4rem;
    border-bottom: 1px solid var(--bg-4);
}
.mat-seccion:first-child { margin-top: .2rem; }
.mat-seccion { border-bottom-color: color-mix(in srgb, var(--gc, var(--c-yellow)) 35%, var(--bg-4)); }
.mat-seccion-tit { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gc, var(--c-yellow)); }
.mat-seccion-n { font-size: 11px; font-weight: 700; padding: .05rem .45rem; border-radius: 999px; background: color-mix(in srgb, var(--gc, var(--c-yellow)) 18%, var(--bg-3)); color: var(--tx-1); }

/* ===== Botonera premium de secciones de género ===== */
.mat-filtro-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); margin: .2rem 0 .5rem; }
.mat-generos { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; }
.gen-btn {
    --gc: var(--c-yellow);
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .9rem; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--gc) 40%, var(--bg-4));
    background: color-mix(in srgb, var(--gc) 7%, var(--bg-2));
    color: var(--tx-1);
    font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    cursor: pointer; white-space: nowrap;
    transition: transform .18s cubic-bezier(.2,.9,.3,1.2), box-shadow .25s ease, border-color .25s ease, color .2s ease, background .25s ease;
}
.gen-btn::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 25%, color-mix(in srgb, var(--gc) 32%, transparent) 50%, transparent 75%);
    transform: translateX(-130%);
    transition: transform .65s ease;
}
.gen-btn:hover { transform: translateY(-2px); border-color: var(--gc); color: #fff; box-shadow: 0 8px 20px -8px var(--gc); }
.gen-btn:hover::before { transform: translateX(130%); }
.gen-btn:active { transform: translateY(0) scale(.97); }
.gen-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 7px var(--gc); flex: 0 0 auto; transition: transform .25s ease; }
.gen-btn:hover .gen-dot { transform: scale(1.25); }
.gen-btn-n { font-size: 10px; padding: .02rem .38rem; border-radius: 999px; background: color-mix(in srgb, var(--gc) 22%, var(--bg-3)); color: var(--tx-2); }
.gen-btn.is-active {
    color: #0e0e0e;
    background: linear-gradient(135deg, color-mix(in srgb, var(--gc) 78%, #000), var(--gc));
    border-color: var(--gc);
    box-shadow: 0 0 0 1px var(--gc), 0 10px 26px -10px var(--gc);
    animation: genPulse 2.4s ease-in-out infinite;
}
.gen-btn.is-active .gen-dot { background: #0e0e0e; box-shadow: none; }
.gen-btn.is-active .gen-btn-n { background: rgba(0,0,0,.22); color: #0e0e0e; }
@keyframes genPulse {
    0%,100% { box-shadow: 0 0 0 1px var(--gc), 0 8px 20px -10px var(--gc); }
    50%     { box-shadow: 0 0 0 1px var(--gc), 0 10px 30px -6px color-mix(in srgb, var(--gc) 70%, transparent); }
}
.mat-item {
    padding: .85rem 1rem;
    background: var(--bg-1);
    border: 1px solid var(--bg-4);
    border-left: 3px solid var(--c-cyan);
    border-radius: 5px;
}
.mat-item-head { display: flex; align-items: center; gap: .5rem; }
.mat-tipo {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .15rem .5rem;
    border-radius: 99px;
    background: rgba(92,205,237,.16);
    color: var(--c-cyan);
}
.mat-titulo { font-weight: 700; color: var(--tx-0); font-size: 14px; }
.mat-autor { font-family: var(--font-mono); font-size: 10px; color: var(--tx-3); margin: .35rem 0 0; }
.mat-desc { font-size: 13px; color: var(--tx-2); margin: .4rem 0 0; line-height: 1.5; }
.mat-acciones { display: flex; gap: .5rem; align-items: center; margin-top: .6rem; }
.mat-dl { margin-top: 0 !important; padding: .4rem .9rem; font-size: 12px; }
.mat-del {
    background: none;
    border: 1px solid var(--bg-5);
    color: var(--tx-3);
    font-size: 11px;
    padding: .35rem .7rem;
    border-radius: 4px;
    cursor: pointer;
}
.mat-del:hover { border-color: var(--rec); color: var(--rec); }

/* Pedidos de descarga (vista del dueño del track) */
.mat-pedidos { margin-top: .6rem; padding: .6rem .7rem; border: 1px solid var(--bg-4); border-left: 3px solid var(--c-yellow); border-radius: 8px; background: var(--bg-2); }
.mat-pedidos-tit { margin: 0 0 .5rem; font-size: 12px; font-weight: 700; color: var(--c-yellow); }
.mat-pedido-row { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }
.mat-pedido-who { flex: 1; font-size: 13px; color: var(--tx-1); }

/* ============================================================
   MENSAJES (bandeja + hilo)
   ============================================================ */
.com-msg-btn { margin-top: .6rem !important; padding: .4rem .9rem; font-size: 12px; }

.msj-convos { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.msj-convos[hidden] { display: none; }
.msj-convo {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .75rem;
    background: var(--bg-1);
    border: 1px solid var(--bg-4);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}
.msj-convo:hover { border-color: var(--c-yellow); transform: translateX(2px); }
.msj-convo-av { width: 40px; height: 40px; font-size: 1rem; }
.msj-convo-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msj-convo-name { font-weight: 700; font-size: 13px; color: var(--tx-0); }
.msj-convo-last {
    font-size: 12px; color: var(--tx-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}

/* Hilo */
.msj-hilo {
    display: flex; flex-direction: column; gap: .5rem;
    max-height: 50vh;
    overflow-y: auto;
    padding: .85rem;
    margin: .5rem 0;
    background: var(--bg-deep);
    border: 1px solid var(--bg-5);
    border-radius: 6px;
}
.msj-burbuja {
    max-width: 78%;
    padding: .5rem .75rem;
    border-radius: 10px;
    border: 1px solid var(--bg-4);
}
.msj-burbuja.is-mia  { align-self: flex-end; background: rgba(248,210,99,.12); border-color: rgba(248,210,99,.35); }
.msj-burbuja.is-otra { align-self: flex-start; background: var(--bg-2); }
.msj-burbuja-txt { font-size: 13px; color: var(--tx-1); margin: 0; line-height: 1.45; word-break: break-word; }
.msj-burbuja-t { font-family: var(--font-mono); font-size: 9px; color: var(--tx-3); display: block; margin-top: .25rem; text-align: right; }

.msj-form { display: flex; gap: .5rem; align-items: center; }
.msj-form input {
    flex: 1;
    padding: .65rem .75rem;
    background: var(--bg-0);
    border: 1px solid var(--bg-4);
    border-radius: 4px;
    color: var(--tx-0);
    font-size: 14px;
}
.msj-form input:focus { outline: 1px solid var(--c-yellow); border-color: var(--c-yellow); }
.msj-form .auth-submit { margin-top: 0; padding: .65rem 1.1rem; }

/* Toggle de habilitación de cuenta (panel admin) */
.ad-habilitado { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .5rem 0 1rem; }

/* ============================================================
   CALIFICAR TRACKS (panel admin)
   ============================================================ */
.tracks-list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.tracks-list[hidden] { display: none; }
.track-card {
    padding: 1rem;
    background: var(--bg-1);
    border: 1px solid var(--bg-4);
    border-left: 3px solid var(--c-cyan);
    border-radius: 6px;
}
.track-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .75rem; }
.track-titulo { font-weight: 700; color: var(--tx-0); font-size: 14px; }
.track-autor { font-family: var(--font-mono); font-size: 11px; color: var(--tx-3); }
.track-head .admin-mini { margin-left: auto; }

.track-rate { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem; }
.track-num { display: flex; flex-direction: column; gap: .25rem; font-size: 11px; color: var(--tx-2); }
.track-num input {
    width: 70px;
    padding: .4rem .5rem;
    background: var(--bg-0);
    border: 1px solid var(--bg-4);
    border-radius: 4px;
    color: var(--tx-0);
    font-size: 14px;
}
.track-num input:focus { outline: 1px solid var(--c-yellow); border-color: var(--c-yellow); }
.track-coment {
    width: 100%;
    padding: .5rem .65rem;
    background: var(--bg-0);
    border: 1px solid var(--bg-4);
    border-radius: 4px;
    color: var(--tx-0);
    font-size: 13px;
    margin-bottom: .6rem;
}
.track-coment:focus { outline: 1px solid var(--c-yellow); border-color: var(--c-yellow); }
.track-save-row { display: flex; align-items: center; gap: .75rem; }
.track-save { margin-top: 0; padding: .5rem 1rem; }
.track-fb { font-size: 12px; }

/* Calificación mostrada al alumno en su material */
.mat-calif {
    margin-top: .6rem;
    padding: .6rem .75rem;
    background: rgba(92,205,237,.08);
    border: 1px solid rgba(92,205,237,.3);
    border-radius: 5px;
}
.mat-calif-row { display: flex; gap: 1rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; color: var(--c-cyan); }
.mat-calif-row b { color: var(--tx-0); }
.mat-calif-com { font-size: 12px; color: var(--tx-2); margin: .4rem 0 0; font-style: italic; }

/* ============================================================
   FEEDBACK de la comunidad (estrellas + porqué) en el muro
   ============================================================ */
.fb-box { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--bg-4); }
.fb-head { font-family: var(--font-mono); font-size: 11px; color: var(--c-yellow); margin-bottom: .5rem; }

.fb-form { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.fb-picker { display: inline-flex; gap: 2px; }
.fb-star {
    background: none; border: none; cursor: pointer;
    font-size: 20px; line-height: 1; color: var(--bg-5);
    padding: 0 1px;
    transition: color .12s;
}
.fb-star:hover, .fb-star.on { color: var(--c-yellow); }
.fb-coment {
    flex: 1; min-width: 160px;
    padding: .45rem .6rem;
    background: var(--bg-0);
    border: 1px solid var(--bg-4);
    border-radius: 4px;
    color: var(--tx-0);
    font-size: 13px;
}
.fb-coment:focus { outline: 1px solid var(--c-yellow); border-color: var(--c-yellow); }
.fb-send { margin-top: 0; padding: .45rem .9rem; font-size: 12px; }
.fb-msg { font-size: 13px; font-weight: 700; }

.fb-list { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.fb-item { padding: .5rem .65rem; background: var(--bg-1); border: 1px solid var(--bg-4); border-radius: 4px; }
.fb-item-stars { color: var(--c-yellow); font-size: 12px; letter-spacing: 1px; }
.fb-item-who { font-family: var(--font-mono); font-size: 10px; color: var(--tx-3); margin-left: .5rem; }
.fb-item-com { font-size: 12px; color: var(--tx-1); margin: .3rem 0 0; line-height: 1.4; }

/* ============================================================
   IDEAS para agregar (por track)
   ============================================================ */
.idea-box { margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--bg-4); }
.idea-head { font-family: var(--font-mono); font-size: 11px; color: var(--c-cyan); margin-bottom: .5rem; }
.idea-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.idea-item { font-size: 13px; color: var(--tx-1); }
.idea-text::before { content: '• '; color: var(--c-cyan); }
.idea-who { font-family: var(--font-mono); font-size: 10px; color: var(--tx-3); margin-left: .4rem; }
.idea-form { display: flex; gap: .5rem; }
.idea-input {
    flex: 1; min-width: 0;
    padding: .45rem .6rem;
    background: var(--bg-0); border: 1px solid var(--bg-4); border-radius: 4px;
    color: var(--tx-0); font-size: 13px;
}
.idea-input:focus { outline: 1px solid var(--c-cyan); border-color: var(--c-cyan); }
.idea-send { margin-top: 0; padding: .45rem .9rem; font-size: 12px; }

/* Botones de acción en perfiles de comunidad */
.com-acciones { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; margin-top: .6rem; }
.com-acciones .auth-submit { margin-top: 0; padding: .4rem .8rem; font-size: 12px; }
.com-colab-btn { white-space: nowrap; }

/* ============================================================
   SKILLZ — gamificación (demo, retos, logros, ranking)
   ============================================================ */
/* Demo de la semana */
.skz-demo {
    margin: .4rem 0 1.4rem; padding: 1.1rem 1.2rem; border-radius: 8px;
    background: linear-gradient(135deg, rgba(255,193,7,.10), rgba(255,193,7,.02));
    border: 1px solid var(--c-yellow); position: relative; overflow: hidden;
}
.skz-demo::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 80% at 100% 0%, rgba(255,193,7,.12), transparent 60%);
}
.skz-demo-kicker { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--c-yellow); }
.skz-demo-title { margin: .25rem 0 .1rem; font-size: 1.25rem; color: var(--tx-0); }
.skz-demo-by { display: block; font-size: 12px; color: var(--tx-3); }
.skz-demo-desc { display: block; font-size: 13px; color: var(--tx-1); margin-top: .4rem; line-height: 1.45; }
.skz-demo-link { display: inline-block; margin-top: .8rem; padding: .45rem 1rem; font-size: 13px; }

/* Logros */
.skz-logros {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .6rem; margin: .3rem 0 1.4rem;
}
.skz-logro {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: .8rem .6rem; border-radius: 8px; border: 1px solid var(--bg-4);
    background: var(--bg-1); transition: transform .15s ease, border-color .15s ease;
}
.skz-logro.is-ganado { border-color: var(--c-green); background: linear-gradient(180deg, rgba(0,200,120,.08), transparent); }
.skz-logro.is-locked { opacity: .5; filter: grayscale(.6); }
.skz-logro:hover { transform: translateY(-2px); }
.skz-logro-ic { font-size: 1.8rem; line-height: 1; }
.skz-logro-nm { font-weight: 700; font-size: 13px; color: var(--tx-0); margin-top: .35rem; }
.skz-logro-ds { font-size: 11px; color: var(--tx-3); margin-top: .2rem; line-height: 1.3; }

/* Ranking */
.skz-rank { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.skz-rank-row {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .7rem; border-radius: 6px;
    background: var(--bg-1); border: 1px solid var(--bg-4);
}
.skz-rank-row.is-yo { border-color: var(--c-cyan); background: linear-gradient(90deg, rgba(0,200,255,.08), transparent); }
.skz-rank-pos { min-width: 1.8rem; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--tx-2); }
.skz-rank-av { width: 34px; height: 34px; flex: 0 0 34px; }
.skz-rank-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.skz-rank-nm { font-weight: 700; font-size: 14px; color: var(--tx-0); }
.skz-rank-detalle { font-size: 11px; color: var(--tx-3); }
.skz-rank-pts { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--c-yellow); white-space: nowrap; }

/* Botón demo en el panel admin */
.track-demo { margin-left: .5rem; }
.track-demo.is-demo { background: var(--c-yellow); color: #1a1a1a; border-color: var(--c-yellow); }

/* Distinción de alumno oficial BE SKILLZ */
.skz-alumno-badge {
    display: inline-block; vertical-align: middle;
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase;
    padding: .15rem .5rem; border-radius: 999px;
    color: #1a1a1a; background: linear-gradient(135deg, var(--c-yellow), #ffd75e);
    box-shadow: 0 0 8px rgba(255,193,7,.4);
}
#welcome .skz-alumno-badge { font-size: 11px; }
.skz-alumni-badge {
    display: inline-block; vertical-align: middle;
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase;
    padding: .15rem .5rem; border-radius: 999px;
    color: #f5d98a; background: rgba(245,217,138,.1);
    border: 1px solid rgba(245,217,138,.45);
}
#welcome .skz-alumni-badge { font-size: 11px; }
.skz-rank-mark { color: var(--c-yellow); font-weight: 700; }

/* Insignias de rol */
.rol-badge {
    display: inline-block; vertical-align: middle;
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    letter-spacing: .5px; padding: .15rem .55rem; border-radius: 999px;
}
.rol-profesor  { color: #08121a; background: linear-gradient(135deg, #46e0ff, #00b3d6); }
.rol-moderador { color: #0c1408; background: linear-gradient(135deg, #8bf06a, #43c41f); }
/* Fundador: dorado con brillo animado */
.rol-fundador {
    color: #1a1400;
    background: linear-gradient(110deg, #ffd75e, #ffb300, #fff1b0, #ffb300, #ffd75e);
    background-size: 220% 100%;
    box-shadow: 0 0 10px rgba(255,179,0,.55);
    animation: rol-shine 3.5s linear infinite;
}
@keyframes rol-shine { 0% { background-position: 0% 0; } 100% { background-position: 220% 0; } }
#welcome .rol-badge { font-size: 11px; }
.ad-rol { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
.ad-rol .admin-search { width: auto; min-width: 150px; }
.reto-otorgar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }
.reto-otorgar .admin-search { width: auto; min-width: 180px; }

/* Limpieza de asistencias + seguridad (fundador) */
.asis-clean { display: flex; gap: .5rem; flex-wrap: wrap; margin: .4rem 0 .8rem; }
.ad-seguridad {
    display: flex; flex-direction: column; gap: .6rem; align-items: flex-start;
    margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--bg-4);
}
.ad-pass-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; width: 100%; }
.ad-pass-row .admin-search { width: auto; flex: 1; min-width: 180px; }

/* Cómo pagar */
.pago-box { margin: 1rem 0; border: 1px solid var(--bg-4); border-radius: 8px; overflow: hidden; }
.pago-box > summary { cursor: pointer; padding: .8rem 1rem; background: var(--bg-1); font-weight: 700; color: var(--tx-0); list-style: none; }
.pago-box > summary::-webkit-details-marker { display: none; }
.pago-box[open] > summary { border-bottom: 1px solid var(--bg-4); }
.pago-info { padding: 1rem; }
.pago-info h4 { margin: .9rem 0 .4rem; font-size: 14px; color: var(--c-cyan); }
.pago-info h4:first-child { margin-top: 0; }
.pago-dato { font-size: 13px; color: var(--tx-1); margin: .2rem 0; font-family: var(--font-mono); word-break: break-all; }
.pago-dato b { color: var(--tx-0); font-family: var(--font-sans, inherit); }
.pago-recargo {
    display: inline-block; margin-left: .4rem; padding: .1rem .45rem; border-radius: 999px;
    background: rgba(255,120,0,.18); color: #ffb300; border: 1px solid rgba(255,120,0,.5);
    font-size: 11px; font-family: var(--font-mono);
}
.pago-aviso { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--bg-4); }

/* ============================================================
   MOBILE — portal y panel admin afinados para celular
   ============================================================ */

/* Evita el zoom automático de iOS al tocar inputs (necesita >=16px) */
@media (max-width: 600px) {
    .auth-form input,
    .auth-form textarea,
    .auth-form select,
    .admin-search,
    .idea-input,
    .fb-coment,
    .msj-form input,
    .track-coment { font-size: 16px; }
}

@media (max-width: 600px) {
    .portal { padding: 1rem .85rem 2.5rem; }
    .portal--admin { width: 100%; }

    /* Cabecera apilada */
    .portal-head { flex-direction: column; align-items: stretch; gap: .8rem; }
    .portal-id { align-items: center; }
    .portal-id-txt h1 { font-size: 1.2rem; }
    .portal-avatar { width: 44px; height: 44px; font-size: 1rem; }
    .portal-avatar--lg { width: 68px; height: 68px; font-size: 1.6rem; }

    /* Botones de la cabecera: que ocupen y no se amontonen */
    .portal-head-actions { width: 100%; flex-wrap: wrap; }
    .portal-head-actions .auth-submit { flex: 1 1 auto; text-align: center; min-height: 44px; }

    /* Tarjetas y tipografías */
    .auth-card { padding: 1.1rem 1rem; }
    .dash-subtitle { font-size: 1.05rem; }

    /* Filas: el badge baja en vez de apretar todo */
    .dash-row { grid-template-columns: 1fr auto; }
    .dash-row .admin-mini,
    .dash-row .admin-actions { grid-column: 1 / -1; }
    .admin-actions { display: flex; gap: .4rem; }

    /* Comunidad: tarjetas más chicas para que entren 2 por fila */
    .com-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
    .com-card { padding: .8rem; }

    /* Logros y ranking */
    .skz-logros { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .skz-rank-detalle { font-size: 10px; }
    .skz-rank-av { width: 30px; height: 30px; flex-basis: 30px; }

    /* Calendario de asistencia: que no se desborde */
    .cal-grid, .cal-dows { gap: 2px; }

    /* Tap targets cómodos */
    .auth-submit,
    .portal-tab,
    .reacc-btn,
    .admin-mini { min-height: 40px; }
    .portal-tab { min-height: 44px; display: inline-flex; align-items: center; }

    /* Mensajería ocupa bien el ancho */
    .msj-hilo { max-height: 50vh; }

    /* Calificación de tracks (admin) en una columna */
    .track-rate { flex-wrap: wrap; }
    .track-num { flex: 1 1 30%; }
}

/* Pantallas muy chicas (≤380px) */
@media (max-width: 380px) {
    .com-grid { grid-template-columns: 1fr 1fr; }
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
    .portal-id-txt h1 { font-size: 1.1rem; }
    .rol-badge, .skz-alumno-badge, .skz-alumni-badge { font-size: 9px; padding: .12rem .4rem; }
}

/* ============================================================
   REPRODUCTOR con forma de onda + comentarios cronometrados
   ============================================================ */
.wf-player { margin: .7rem 0 .3rem; }
.wf-bar { display: flex; align-items: center; gap: .7rem; }

.wf-play {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
    border: none; cursor: pointer;
    background: var(--c-yellow); color: #111;
    display: grid; place-items: center;
    transition: transform .1s ease, filter .1s ease;
}
.wf-play:hover { filter: brightness(1.08); }
.wf-play:active { transform: scale(.94); }
.wf-play.is-loading { opacity: .55; animation: wfLoad 1s ease-in-out infinite; }
@keyframes wfLoad { 0%,100% { opacity: .45; } 50% { opacity: .85; } }
.wf-ico-play {
    width: 0; height: 0; margin-left: 3px;
    border-top: 8px solid transparent; border-bottom: 8px solid transparent;
    border-left: 13px solid #111;
}
.wf-ico-pause {
    width: 12px; height: 14px;
    border-left: 4px solid #111; border-right: 4px solid #111;
}

.wf-canvas-wrap { position: relative; flex: 1; min-width: 0; height: 64px; }
.wf-canvas { display: block; width: 100%; height: 64px; cursor: pointer; }

.wf-time { flex: 0 0 auto; font-family: var(--font-mono); font-size: 12px; color: var(--tx-3); min-width: 34px; text-align: right; }

/* Marcadores de comentarios sobre la onda */
.wf-markers { position: absolute; inset: 0; pointer-events: none; }
.wf-marker {
    position: absolute; bottom: -2px; transform: translateX(-50%);
    width: 12px; height: 12px; padding: 0;
    border: 2px solid var(--bg-0); border-radius: 50%;
    background: var(--c-cyan); cursor: pointer; pointer-events: auto;
    transition: transform .1s ease;
}
.wf-marker:hover { transform: translateX(-50%) scale(1.3); }

/* Burbuja del comentario */
.wf-bubble {
    position: absolute; bottom: 70px; transform: translateX(-50%);
    max-width: 230px; z-index: 5;
    background: var(--bg-2); border: 1px solid var(--c-cyan); border-radius: 8px;
    padding: .5rem .65rem; box-shadow: 0 6px 18px rgba(0,0,0,.5);
    display: flex; flex-direction: column; gap: .15rem;
}
.wf-bubble-who { font-weight: 700; font-size: 12px; color: var(--c-cyan); }
.wf-bubble-time { font-family: var(--font-mono); font-size: 10px; color: var(--tx-3); }
.wf-bubble-txt { font-size: 13px; color: var(--tx-0); line-height: 1.35; }

/* Composer */
.wf-composer { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; }
.wf-at {
    flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px;
    color: var(--c-yellow); background: rgba(248,210,99,.12);
    padding: .25rem .5rem; border-radius: 999px; white-space: nowrap;
}
.wf-input {
    flex: 1; min-width: 0; padding: .45rem .6rem;
    background: var(--bg-0); border: 1px solid var(--bg-4); border-radius: 4px;
    color: var(--tx-0); font-size: 13px;
}
.wf-input:focus { outline: 1px solid var(--c-cyan); border-color: var(--c-cyan); }
.wf-send {
    flex: 0 0 auto; padding: .45rem .9rem; border: none; border-radius: 4px;
    background: var(--c-cyan); color: #06222b; font-weight: 700; font-size: 12px; cursor: pointer;
}
.wf-send:hover { filter: brightness(1.08); }

@media (max-width: 600px) {
    .wf-input { font-size: 16px; }
    .wf-play { width: 38px; height: 38px; }
}

/* ============================================================
   PANTALLA DE GRACIAS (post-registro)
   ============================================================ */
.gracias { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.25rem; }
.gracias-card {
    width: min(100%, 560px); text-align: center;
    background: var(--bg-2); border: 1px solid var(--bg-4);
    border-radius: 14px; padding: 2.4rem 2rem 2rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    animation: graciasIn .5s ease both;
}
@keyframes graciasIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.gracias-mark { display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 56px; margin: 1.1rem 0 1.3rem; }
.gracias-bar { width: 7px; background: var(--c-yellow); border-radius: 3px; animation: graciasEq 1s ease-in-out infinite; }
.gracias-bar:nth-child(1){height:30%;animation-delay:0s}
.gracias-bar:nth-child(2){height:70%;animation-delay:.1s}
.gracias-bar:nth-child(3){height:45%;animation-delay:.2s}
.gracias-bar:nth-child(4){height:100%;animation-delay:.3s;background:var(--c-cyan)}
.gracias-bar:nth-child(5){height:55%;animation-delay:.4s}
.gracias-bar:nth-child(6){height:80%;animation-delay:.5s}
.gracias-bar:nth-child(7){height:35%;animation-delay:.6s}
@keyframes graciasEq { 0%,100% { transform: scaleY(.6); } 50% { transform: scaleY(1.15); } }
@media (prefers-reduced-motion: reduce) { .gracias-bar { animation: none; } }

.gracias-title { font-size: 2.4rem; font-weight: 900; line-height: 1.05; color: var(--tx-0); margin: 0 0 .6rem; }
.gracias-title .yellow { color: var(--c-yellow); }
.gracias-lead { font-size: 1.1rem; color: var(--tx-0); margin: 0 0 .6rem; }
.gracias-desc { font-size: .95rem; color: var(--tx-2); line-height: 1.5; margin: 0 auto 1.5rem; max-width: 42ch; }

.gracias-steps { text-align: left; display: flex; flex-direction: column; gap: .6rem; margin: 0 0 1.6rem; }
.gracias-step { display: flex; gap: .7rem; align-items: flex-start; font-size: 13px; color: var(--tx-1); }
.gracias-step-num { font-family: var(--font-mono); font-weight: 700; color: var(--c-cyan); flex: 0 0 auto; }

.gracias-cta { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.gracias-cta .auth-submit { margin-top: 0; flex: 1 1 auto; min-width: 180px; text-align: center; }
.gracias-foot { font-size: 12px; color: var(--tx-3); margin-top: 1.6rem; line-height: 1.6; }
.gracias-foot a { color: var(--c-yellow); }

@media (max-width: 600px) {
    .gracias-card { padding: 1.8rem 1.3rem; }
    .gracias-title { font-size: 2rem; }
}

/* ============================================================
   NOTIFICACIONES
   ============================================================ */
.notif-list { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.notif-item {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .65rem .75rem; border-radius: 6px;
    background: var(--bg-1); border: 1px solid var(--bg-4);
}
.notif-item.is-nueva { border-left: 3px solid var(--c-cyan); background: linear-gradient(90deg, rgba(0,200,255,.07), transparent); }
.notif-clickable { cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.notif-clickable:hover { transform: translateX(2px); border-color: var(--c-cyan); }
.notif-ic { font-size: 1.2rem; line-height: 1.4; flex: 0 0 auto; }
.notif-body { display: flex; flex-direction: column; min-width: 0; }
.notif-titulo { font-weight: 700; font-size: 14px; color: var(--tx-0); }
.notif-cuerpo { font-size: 12px; color: var(--tx-2); margin-top: .15rem; }
.notif-fecha { font-family: var(--font-mono); font-size: 10px; color: var(--tx-3); margin-top: .25rem; }

/* ============================================================
   RACHA + NOVEDADES (Skillz)
   ============================================================ */
.skz-racha {
    display: flex; align-items: center; gap: .6rem;
    margin: .2rem 0 1.2rem; padding: .7rem .9rem; border-radius: 8px;
    background: linear-gradient(135deg, rgba(255,80,0,.12), rgba(255,193,7,.04));
    border: 1px solid rgba(255,120,0,.5);
}
.skz-racha-fuego { font-size: 1.5rem; animation: racha-pulse 1.6s ease-in-out infinite; }
@keyframes racha-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.skz-racha-txt { font-size: 14px; font-weight: 600; color: var(--tx-0); }

.skz-novedades { list-style: none; margin: .3rem 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.skz-nov-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .65rem; border-radius: 6px;
    background: var(--bg-1); border: 1px solid var(--bg-4);
}
.skz-nov-ic { font-size: 1.1rem; flex: 0 0 auto; }
.skz-nov-txt { flex: 1; min-width: 0; font-size: 13px; color: var(--tx-1); }
.skz-nov-fecha { font-family: var(--font-mono); font-size: 10px; color: var(--tx-3); white-space: nowrap; }

/* ============================================================
   REACCIONES rápidas en tracks
   ============================================================ */
.reacc-row { display: flex; gap: .5rem; margin: .6rem 0 .2rem; }
.reacc-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .6rem; border-radius: 999px;
    background: var(--bg-1); border: 1px solid var(--bg-4); cursor: pointer;
    transition: transform .1s ease, border-color .1s ease, background .1s ease;
}
.reacc-btn:hover { transform: translateY(-1px); border-color: var(--c-cyan); }
.reacc-btn:active { transform: scale(.92); }
.reacc-btn.is-mia { background: rgba(0,200,255,.14); border-color: var(--c-cyan); }
.reacc-emoji { font-size: 15px; line-height: 1; }
.reacc-cnt { font-family: var(--font-mono); font-size: 12px; color: var(--tx-2); min-width: .8rem; text-align: center; }

/* Reacciones del foro (portal del alumno) — mismo look que las de tracks */
.deb-reacc { display: flex; gap: .4rem; margin: .5rem 0 .2rem; }
.deb-reacc-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .25rem .55rem; border-radius: 999px;
    background: var(--bg-1); border: 1px solid var(--bg-4); cursor: pointer;
    transition: transform .1s ease, border-color .1s ease, background .1s ease;
}
.deb-reacc-btn:hover { transform: translateY(-1px); border-color: var(--c-cyan); }
.deb-reacc-btn:active { transform: scale(.92); }
.deb-reacc-btn.is-mia { background: rgba(0,200,255,.14); border-color: var(--c-cyan); }
.deb-reacc-emoji { font-size: 14px; line-height: 1; }
.deb-reacc-cnt { font-family: var(--font-mono); font-size: 11px; color: var(--tx-2); min-width: .6rem; text-align: center; }

/* ============================================================
   AGENDA SEMANAL (panel admin) + horario fijo (alumno)
   ============================================================ */
.ag-grid-wrap { overflow-x: auto; margin-top: 14px; }
.ag-grid {
    display: grid;
    grid-template-columns: 52px repeat(6, minmax(120px, 1fr));
    gap: 2px;
    min-width: 780px;
}
.ag-corner, .ag-dayhead {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--tx-2, #aaa);
    background: var(--bg-2, #232323);
    border-radius: 3px;
    text-transform: uppercase;
}
.ag-hora {
    display: flex; align-items: flex-start; justify-content: flex-end;
    padding: 2px 6px 0 0;
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    color: var(--tx-3, #777);
}
.ag-cell {
    background: var(--bg-2, #1f1f1f);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    padding: 0;
    transition: background .12s ease, box-shadow .12s ease;
}
.ag-cell:hover {
    background: rgba(248,210,99,.14);
    box-shadow: inset 0 0 0 1px rgba(248,210,99,.5);
}
.ag-turno {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 4px 7px;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    z-index: 2;
    color: #111;
    transition: filter .12s ease, transform .12s ease;
}
.ag-turno:hover { filter: brightness(1.12); transform: scale(1.01); }
.ag-turno.is-free { background: #5dd3b8; }
.ag-turno.is-part { background: #f8d263; }
.ag-turno.is-full { background: #f0916d; }
.ag-turno.is-off  { background: #4a4a4a; color: #bbb; }
.ag-turno-hora { font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; }
.ag-turno-info {
    font-size: 11px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
.ag-turno-cupo { font-family: var(--font-mono, monospace); font-size: 9px; opacity: .75; }
.ag-editor { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bg-5, #3a3a3a); }
.ag-editor[hidden] { display: none; }
.ag-form select, .ag-form input { min-width: 0; }
.ag-acciones { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Alumno: card de horario fijo --- */
.mi-horario {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(93,211,184,.10), rgba(248,210,99,.06));
    border: 1px solid rgba(93,211,184,.35);
    border-radius: 6px;
}
.mi-horario-dia {
    font-size: 18px; font-weight: 800; color: var(--tx-0, #fff);
}
.mi-horario-hora { font-family: var(--font-mono, monospace); font-size: 14px; color: #5dd3b8; font-weight: 700; }
.mi-horario-sub { font-size: 12px; color: var(--tx-2, #aaa); width: 100%; }

/* --- Alumno: aviso de reglas de reprogramación --- */
.repro-reglas {
    padding: 12px 14px;
    margin: 10px 0 14px;
    background: rgba(248,210,99,.08);
    border-left: 3px solid #f8d263;
    border-radius: 0 4px 4px 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--tx-1, #ddd);
}
.repro-reglas strong { color: #f8d263; }

/* --- Alumno: selector de huecos --- */
.hueco-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .hueco-pick { grid-template-columns: 1fr; } }

/* Muro compacto: adelanto por género + "Escuchar los N →" */
.mat-vermas { list-style: none; margin: .2rem 0 1.4rem; }
.mat-vermas-btn {
    width: 100%; padding: .65rem 1rem; cursor: pointer;
    background: transparent; color: var(--gc, var(--c-yellow));
    border: 1px dashed var(--gc, var(--c-yellow)); border-radius: 10px;
    font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .03em;
    transition: background .2s var(--ease), transform .2s var(--ease);
}
.mat-vermas-btn:hover { background: color-mix(in srgb, var(--gc, #f8d263) 12%, transparent); transform: translateY(-1px); }

/* Devolución plegable (details) */
details.fb-box > summary.fb-head { cursor: pointer; list-style: none; user-select: none; }
details.fb-box > summary.fb-head::-webkit-details-marker { display: none; }
details.fb-box > summary.fb-head::after { content: ' ▸'; color: var(--tx-3); }
details.fb-box[open] > summary.fb-head::after { content: ' ▾'; }

/* Ficha del alumno: flags como interruptores prolijos (1 por renglón) */
.ad-flags { display: flex; flex-direction: column; gap: .45rem; margin: .5rem 0 .7rem; }
.ad-switch { display: flex; align-items: center; gap: .55rem; cursor: pointer; font-size: 13.5px; color: var(--tx-1); flex-wrap: wrap; }
.ad-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ad-switch-track {
    width: 34px; height: 19px; border-radius: 999px; flex: 0 0 auto;
    background: var(--bg-4); position: relative; transition: background .18s var(--ease);
}
.ad-switch-track::after {
    content: ''; position: absolute; top: 2.5px; left: 3px;
    width: 14px; height: 14px; border-radius: 50%; background: var(--tx-2);
    transition: transform .18s var(--ease), background .18s var(--ease);
}
.ad-switch input:checked + .ad-switch-track { background: rgba(133,212,60,.45); }
.ad-switch input:checked + .ad-switch-track::after { transform: translateX(14px); background: var(--c-green); }
.ad-switch input:disabled + .ad-switch-track { opacity: .45; }
.ad-switch-lbl { font-weight: 600; color: var(--tx-0); }
.ad-switch-hint { font-size: 11.5px; color: var(--tx-3); }

/* ============================================================
   BORDES DE AVATAR v5 — anillo de metal BISELADO (relieve real),
   destello que recorre el aro, vinilos DJ girando, gemas y chispas.
   Se aplican con aplicarBorde(el, id): clases avb avb-<id> + capa .avb-orn.
   Todo mide en % del avatar => escala igual a 32px que a 120px.
   ============================================================ */
.avb { position: relative; isolation: isolate; overflow: visible !important;
    --m1:#7a7a80; --m2:#2c2c30; --glow:rgba(150,150,160,.22); }

/* Aro de metal: una DONA biselada. El centro queda transparente (se ve la
   foto); el relieve y el brillo viven en el borde. */
.avb::before {
    content:''; position:absolute; inset:-13%; border-radius:50%; z-index:0; pointer-events:none;
    background:
        radial-gradient(circle at 50% 26%, rgba(255,255,255,.6), rgba(255,255,255,0) 44%),
        conic-gradient(from var(--sp,0deg),
            var(--m2), var(--m1), #ffffff, var(--m2), var(--m1), var(--m2), #ffffff, var(--m1), var(--m2));
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 15%), #000 calc(100% - 13%));
    mask: radial-gradient(farthest-side, #0000 calc(100% - 15%), #000 calc(100% - 13%));
    box-shadow: inset 0 1.5px 2px rgba(255,255,255,.72), inset 0 -2.5px 4px rgba(0,0,0,.6);
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)) drop-shadow(0 0 5px var(--glow));
    animation: avbSpin 11s linear infinite;
}
/* Destello especular que recorre el aro (chrome vivo). */
.avb::after {
    content:''; position:absolute; inset:-13%; border-radius:50%; z-index:1; pointer-events:none;
    background: conic-gradient(from var(--g,0deg), #0000 0 79%, rgba(255,255,255,.92) 86%, #0000 91% 100%);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 15%), #000 calc(100% - 13%));
    mask: radial-gradient(farthest-side, #0000 calc(100% - 15%), #000 calc(100% - 13%));
    mix-blend-mode: screen; filter: blur(.6px);
    animation: avbSpin 3.6s linear infinite;
}
.avb:hover::before { filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)) drop-shadow(0 0 10px var(--glow)); }

/* Paletas por tier (metal 1 / metal 2 / glow) */
.avb-inicial     { --m1:#7a7a80; --m2:#2c2c30; --glow:rgba(150,150,160,.22); }
.avb-bronce      { --m1:#e6ad7d; --m2:#7a4a2b; --glow:rgba(201,138,75,.45); }
.avb-plata       { --m1:#f0f5f8; --m2:#7d878f; --glow:rgba(207,216,221,.45); }
.avb-oro         { --m1:#ffe6a0; --m2:#a9791a; --glow:rgba(248,210,99,.55); }
.avb-platino     { --m1:#d6f6ff; --m2:#1d6a80; --glow:rgba(92,205,237,.55); }
.avb-diamante    { --m1:#e2d6ff; --m2:#7fb0ff; --glow:rgba(185,165,255,.6); }
.avb-fundador    { --m1:#c2ee5a; --m2:#2a5a14; --glow:rgba(133,212,60,.6); }
.avb-og          { --m1:#ffb26b; --m2:#7a1f0e; --glow:rgba(255,107,74,.6); }
.avb-aniversario { --m1:#f6a9d0; --m2:#6f5aff; --glow:rgba(200,140,235,.55); }
.avb-conectado   { --m1:#8affc1; --m2:#0e6a5a; --glow:rgba(120,240,180,.6); }

/* ---- Capa de ornamentos DJ (inyectada por JS, sin puntero) ---- */
.avb-orn { position:absolute; inset:0; border-radius:50%; z-index:3; pointer-events:none; }
.avb-orn i { position:absolute; display:block; }

/* Vinilos a los costados, girando en su propio eje */
.avb-vinyl {
    width:46%; height:46%; border-radius:50%; bottom:-6%;
    background:
        repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
        radial-gradient(circle at 50% 50%, #202024 0 16%, #131316 17% 100%);
    box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 0 0 1.5px var(--m2), inset 0 1px 2px rgba(255,255,255,.14);
    animation: avbSpin 2.7s linear infinite;
}
.avb-vinyl.l { left:-12%; }
.avb-vinyl.r { right:-12%; animation-duration:2.4s; }
.avb-vinyl::before { content:''; position:absolute; inset:37%; border-radius:50%; background:var(--m1); box-shadow:0 0 4px var(--glow); }
.avb-vinyl::after  { content:''; position:absolute; inset:46%; border-radius:50%; background:#0c0c0d; }

/* Gema facetada (tiers altos) */
.avb-gem {
    width:20%; height:20%; top:-14%; left:50%;
    transform: translateX(-50%) rotate(45deg);
    background: linear-gradient(135deg, #ffffff, var(--m1) 55%, var(--m2));
    box-shadow: 0 0 6px var(--glow), inset 1px 1px 1.5px rgba(255,255,255,.9), inset -1px -1px 1.5px rgba(0,0,0,.4);
    animation: avbTw 2.2s ease-in-out infinite;
}
.avb-gem.sm { width:15%; height:15%; top:-11%; }

/* Corona (fundador) — SVG que escala solo */
.avb-crown {
    width:36%; height:24%; top:-22%; left:50%; transform:translateX(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M2 14 L3 5 L8 9 L12 2 L16 9 L21 5 L22 14 Z' fill='%23ffe08a' stroke='%23a9791a' stroke-width='1' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='2' r='1.6' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
    animation: avbBob 2.6s ease-in-out infinite;
}

/* Chispas que titilan alrededor del aro */
.avb-spark {
    width:7%; height:7%; border-radius:50%; background:#fff;
    box-shadow: 0 0 5px 1.5px var(--glow);
    animation: avbTw 1.8s ease-in-out infinite;
}
.avb-spark    { top:5%;  left:50%; }
.avb-spark.s2 { top:60%; left:8%;  animation-delay:.6s; }
.avb-spark.s3 { top:46%; right:4%; left:auto; animation-delay:1.1s; }

@keyframes avbSpin { to { transform: rotate(360deg); } }
@keyframes avbTw   { 0%,100% { opacity:.78; filter:brightness(1); } 50% { opacity:1; filter:brightness(1.4); } }
@keyframes avbBob  { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-8%); } }

@media (prefers-reduced-motion: reduce) {
    .avb::before, .avb::after, .avb-orn i { animation: none !important; }
}

/* ===== Bloque "Tu nivel" en el perfil ===== */
.pf-nivel { display: flex; align-items: center; gap: 14px; margin: .4rem 0 .8rem; padding: .8rem 1rem; border: 1px solid var(--bg-4); border-radius: 12px; background: var(--bg-2); flex-wrap: wrap; }
.pf-nivel-num { font-family: var(--font-mono); font-weight: 700; font-size: 30px; color: var(--c-yellow); line-height: 1; }
.pf-nivel-num small { display: block; font-size: 10px; color: var(--tx-3); letter-spacing: .1em; font-weight: 500; }
.pf-nivel-info { flex: 1; min-width: 200px; }
.pf-nivel-bar { height: 8px; border-radius: 999px; background: var(--bg-4); overflow: hidden; margin: .35rem 0 .25rem; }
.pf-nivel-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-green), var(--c-lime)); transition: width .5s var(--ease); }
.pf-nivel-txt { font-size: 12px; color: var(--tx-2); }
.pf-nivel-perk { font-size: 11.5px; color: var(--tx-3); }
.pf-nivel-perk b { color: var(--c-yellow); }

/* Selector de bordes (solo los desbloqueados) */
.pf-bordes { display: flex; gap: 16px; flex-wrap: wrap; margin: .4rem 0 .9rem; }
.pf-borde-op { background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 76px; }
.pf-borde-av { width: 52px; height: 52px; border-radius: 50%; background: var(--bg-3); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: var(--tx-2); font-weight: 700; }
.pf-borde-nom { font-size: 11px; color: var(--tx-2); text-align: center; }
.pf-borde-op.is-sel .pf-borde-nom { color: var(--c-green); font-weight: 700; }
.pf-borde-op.is-sel .pf-borde-av { outline: 2px solid var(--c-green); outline-offset: 5px; }
.pf-bordes-next { font-size: 12px; color: var(--tx-3); margin: -0.3rem 0 .8rem; }
.pf-hint { font-size: 11px; color: var(--tx-3); font-weight: 400; }

/* Hint de descarga por nivel en el muro */
.mat-dl-hint { font-size: 11px; color: var(--tx-3); margin-top: .2rem; }

/* Dar XP (staff) + panel Como gano XP */
.ad-darxp { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 .3rem; padding-top: .6rem; border-top: 1px dashed var(--bg-4); }
.pf-como-xp { flex-basis: 100%; margin-top: .5rem; }
.pf-como-xp summary { cursor: pointer; font-size: 12.5px; color: var(--c-cyan); user-select: none; }
.pf-como-xp ul { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.pf-como-xp li { display: flex; align-items: baseline; gap: .5rem; font-size: 12.5px; color: var(--tx-2); }
.pf-como-xp li b { margin-left: auto; color: var(--c-green); font-size: 12px; white-space: nowrap; }

/* Repro: 3 fechas propuestas por el alumno */
.repro-opciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.repro-opciones input { flex: 1; min-width: 120px; }
.repro-propone { font-size: 11px; color: var(--tx-3); font-family: var(--font-mono); letter-spacing: .04em; }

/* Agenda: bloqueo personal del profe (sin alumnos) */
.ag-turno.is-personal {
    background: repeating-linear-gradient(45deg, rgba(183,134,217,.14) 0 8px, rgba(183,134,217,.05) 8px 16px);
    border: 1px solid rgba(183,134,217,.55);
    color: var(--c-purple, #b786d9);
}
.ag-turno.is-personal:hover { border-color: var(--c-purple, #b786d9); }

/* Reprogramación aceptada: chip amarillo sobre la agenda */
.ag-repro {
    display: flex; align-items: center; gap: 3px;
    align-self: start; justify-self: end;
    max-width: 92%; margin: 1px;
    padding: 1px 5px; border-radius: 5px;
    background: #f8d263; color: #1a1a1a;
    border: 1px dashed #8a6a1f;
    font-family: var(--font-mono, monospace); font-weight: 700;
    z-index: 3; pointer-events: auto; overflow: hidden;
}
.ag-repro-ico { font-size: 9px; }
.ag-repro-txt { font-size: 8.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-personal-chk { flex-basis: 100%; }

/* Insignias del muro: Alumno / Artista externo */
.rk-alumno  { background: rgba(133,212,60,.14); color: var(--c-green); border: 1px solid rgba(133,212,60,.4); }
.rk-artista { background: rgba(242,137,187,.12); color: var(--c-pink, #f289bb); border: 1px solid rgba(242,137,187,.4); }
.rk-alumni  { background: rgba(245,217,138,.1);  color: #f5d98a; border: 1px solid rgba(245,217,138,.45); }

/* Panel de BORDES del miembro (ficha del fundador) */
.ad-bordes { margin: .6rem 0 .8rem; padding: .8rem .9rem; border: 1px solid var(--bg-4); border-radius: 12px; background: rgba(248,210,99,.04); }
.ad-bordes-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.ad-bordes-nivel { font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--c-yellow); }
.ad-bordes-bar { height: 6px; border-radius: 999px; background: var(--bg-4); overflow: hidden; margin: .45rem 0 .8rem; }
.ad-bordes-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-green), var(--c-lime)); }

.ad-bordes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 16px 10px; }
.ad-borde-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.ad-borde-av {
    width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
    background: var(--bg-3) center/cover no-repeat; border: 0; padding: 0;
    color: var(--tx-2); font-weight: 700; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: transform .18s var(--ease);
}
.ad-borde-av:hover:not(:disabled) { transform: translateY(-2px) scale(1.06); }
.ad-borde-av:disabled { cursor: not-allowed; }
.ad-borde-cell.is-lock .ad-borde-av { filter: grayscale(1) brightness(.5); opacity: .5; }
.ad-borde-cell.is-activo .ad-borde-av { outline: 2px solid var(--c-green); outline-offset: 6px; }
.ad-borde-nom { font-size: 11.5px; font-weight: 600; color: var(--tx-1); }
.ad-borde-cell.is-activo .ad-borde-nom { color: var(--c-green); }
.ad-borde-req { font-size: 10px; color: var(--tx-3); font-family: var(--font-mono); }
.ad-borde-gift { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--tx-2); cursor: pointer; }
.ad-borde-gift input { accent-color: var(--c-yellow); }

/* Separador "o" + botón de Google (login / registro) */
.auth-sep { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--tx-3, #8a8a8a); font-size: 12px; }
.auth-sep::before, .auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--bg-4, #3a3a3a); }
.auth-submit--google {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: #fff; color: #1f1f1f; border: 1px solid #dadce0;
}
.auth-submit--google:hover { background: #f5f5f5; filter: none; }
.btn-google-ico { width: 18px; height: 18px; flex-shrink: 0; }