/* ═══════════════════════════════════════
   Posturología Pro — alumnos.css
   Área privada de alumnos + calendario de clases
═══════════════════════════════════════ */

/* ─── Tabs de meses del calendario ─── */
.pp-cal-tabs-nav {
    display: flex; gap: 0; flex-wrap: wrap;
    border-bottom: 2px solid var(--pp-line);
    margin-bottom: 0;
    margin-top: 10px;
}

.pp-cal-tab {
    position: relative;
    padding: 8px 14px; background: none; border: none;
    font-size: 12px; font-weight: 500; color: var(--pp-text-muted);
    cursor: pointer; white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all .2s;
}
.pp-cal-tab:hover  { color: var(--pp-text); }
.pp-cal-tab.active { color: var(--pp-green); border-bottom-color: var(--pp-green); }

.pp-cal-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: #e57300; color: #fff;
    font-size: 9px; font-weight: 700;
    margin-left: 4px; vertical-align: middle;
}

/* ─── Paneles de meses ─── */
.pp-cal-paneles {}
.pp-cal-panel { display: none; }
.pp-cal-panel.active { display: block; }

/* Nota: .pp-cal-meses ya no se usa, sustituido por tabs */
.pp-cal-mes-titulo {
    font-size: 11px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--pp-green);
    margin-bottom: 6px; padding: 10px 0 6px;
    border-bottom: 1px solid var(--pp-line);
}

/* Clase cambiada — texto adicional de grupo */
.pp-clase-grupo-alt {
    font-size: 11px; opacity: .7; font-style: italic;
}

/* ─── Spinner ─── */
.pp-spinner {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--pp-line);
    border-top-color: var(--pp-green);
    animation: pp-spin .8s linear infinite;
    display: inline-block; flex-shrink: 0;
}
.pp-spinner-sm { width: 14px; height: 14px; border-width: 1.5px; }
.pp-spinner-wrap { text-align: center; padding: 24px; }
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* ─── Inscripción pendiente aviso ─── */
.pp-pendiente-aviso {
    font-size: 12px; color: var(--pp-text-muted);
    line-height: 1.6; margin-top: 8px;
    padding: 10px 14px;
    background: rgba(229,115,0,.06);
    border-left: 2px solid #e57300;
}

/* ─── Badge pendiente en estado ─── */
.pp-insc-estado.pendiente {
    background: rgba(229,115,0,.1); color: #e65100;
}

/* ─── Sección calendario dentro de la tarjeta ─── */
.pp-cal-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--pp-line);
}

.pp-btn-ver-calendario {
    display: flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer;
    font-size: 13px; font-weight: 500;
    color: var(--pp-green-dk);
    padding: 4px 0; transition: color .2s;
}
.pp-btn-ver-calendario:hover { color: var(--pp-green); }
.pp-cal-icon { font-size: 14px; }
.pp-cal-toggle-icon { font-size: 11px; transition: transform .2s; }

.pp-cal-clases {
    margin-top: 14px;
    padding-top: 4px;
}

.pp-cal-loading-inline {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--pp-text-muted); padding: 8px 0;
}

.pp-cal-empty {
    font-size: 13px; color: var(--pp-text-muted);
    padding: 12px 0; font-style: italic;
}

/* ─── Meses del calendario ─── */
.pp-cal-meses { display: flex; flex-direction: column; gap: 20px; }

.pp-cal-mes-titulo {
    font-size: 11px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--pp-green);
    margin-bottom: 6px; padding-bottom: 6px;
    border-bottom: 1px solid var(--pp-line);
}

.pp-cal-clases-lista {
    display: flex; flex-direction: column; gap: 2px;
}

/* ─── Fila de clase ─── */
.pp-clase-row {
    display: grid;
    grid-template-columns: 56px 52px 1fr auto;
    gap: 12px; align-items: center;
    padding: 10px 14px;
    background: var(--pp-bg);
    border-left: 3px solid transparent;
    transition: background .15s;
}
.pp-clase-row:hover { background: var(--pp-bg2); }

/* Estado visual borde izquierdo */
.pp-clase-programada { border-left-color: rgba(107,143,113,.3); }
.pp-clase-realizada  { opacity: .55; border-left-color: rgba(21,101,192,.3); }
.pp-clase-cambiada   { border-left-color: #e57300; }
.pp-clase-cancelada  { opacity: .4; border-left-color: rgba(198,40,40,.3); }
.pp-clase-hoy        { background: rgba(107,143,113,.07); border-left-color: var(--pp-green) !important; }

/* Fecha */
.pp-clase-fecha { text-align: center; }
.pp-clase-dia-num {
    font-family: var(--font-display); font-size: 22px;
    font-weight: 600; color: var(--pp-text); line-height: 1;
}
.pp-clase-dia-nom {
    font-size: 10px; color: var(--pp-text-muted);
    text-transform: capitalize; margin-top: 2px;
}
.pp-clase-hoy .pp-clase-dia-num { color: var(--pp-green); }

/* Hora */
.pp-clase-hora {
    display: flex; flex-direction: column;
    font-size: 13px; font-weight: 500;
    color: var(--pp-text-dim); line-height: 1.4;
    gap: 2px;
}
.pp-clase-hora small { font-size: 11px; opacity: .65; font-weight: 300; }

/* Info de cambio */
.pp-clase-info { font-size: 12px; }
.pp-clase-cambio-info {
    color: #e57300; font-weight: 500;
    display: flex; align-items: center; gap: 4px;
}

/* Columna estado + botón */
.pp-clase-estado-col {
    display: flex; flex-direction: column;
    align-items: flex-end; gap: 6px;
}

.pp-clase-badge {
    font-size: 10px; font-weight: 500;
    padding: 3px 8px; letter-spacing: .06em;
    white-space: nowrap;
}
.pp-clase-badge-programada { background: rgba(107,143,113,.12); color: var(--pp-green-dk); }
.pp-clase-badge-realizada  { background: rgba(21,101,192,.1);   color: #1565c0; }
.pp-clase-badge-cambiada   { background: rgba(229,115,0,.12);   color: #c67600; }
.pp-clase-badge-cancelada  { background: rgba(198,40,40,.1);    color: #c62828; }

.pp-btn-cambiar-clase {
    padding: 5px 12px; background: none;
    border: 1px solid var(--pp-line);
    font-size: 11px; font-weight: 500;
    color: var(--pp-green-dk); cursor: pointer;
    transition: all .2s; white-space: nowrap;
}
.pp-btn-cambiar-clase:hover {
    border-color: var(--pp-green);
    background: var(--pp-green-lt);
}

/* ─── Modal cambio de clase ─── */
.pp-grupo-cambio-card {
    display: grid; grid-template-columns: 1fr auto;
    gap: 16px; align-items: center;
    padding: 16px 20px;
    border: 1px solid var(--pp-line);
    background: var(--pp-bg);
    margin-bottom: 8px;
    transition: border-color .2s;
}
.pp-grupo-cambio-card:hover { border-color: var(--pp-green); }

.pp-gcambio-nombre {
    font-family: var(--font-display); font-size: 16px;
    font-weight: 600; color: var(--pp-text); margin-bottom: 4px;
}
.pp-gcambio-meta {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 12px; font-weight: 300; color: var(--pp-text-dim);
}
.pp-gcambio-grupo { font-weight: 500; color: var(--pp-green-dk); }

.pp-btn-seleccionar-grupo {
    padding: 9px 18px; background: var(--pp-green); color: #fff;
    border: none; font-size: 12px; font-weight: 500;
    cursor: pointer; transition: background .2s; white-space: nowrap;
}
.pp-btn-seleccionar-grupo:hover { background: var(--pp-green-dk); }
.pp-btn-seleccionar-grupo:disabled { opacity: .5; cursor: not-allowed; }

.pp-grupos-sin-opciones {
    padding: 24px; text-align: center;
    color: var(--pp-text-muted); font-size: 14px;
}

/* ─── Modal resumen inscripción ─── */
.pp-modal-resumen {
    background: var(--pp-bg2); padding: 14px 20px;
    margin-bottom: 20px; font-size: 13px; line-height: 1.9;
    border-left: 3px solid var(--pp-green);
}
.pp-modal-resumen strong { color: var(--pp-text); font-weight: 500; }

/* ─── Responsive ─── */
@media (max-width:768px) {
    .pp-clase-row { grid-template-columns: 48px 44px 1fr; gap: 8px; padding: 8px; }
    .pp-clase-estado-col { grid-column: 1/-1; flex-direction: row; justify-content: flex-end; }
    .pp-grupo-cambio-card { grid-template-columns: 1fr; }
    .pp-btn-seleccionar-grupo { width: 100%; }
}


/* ─── Area alumnos ─── */
.pp-alumnos-hero {
    background: var(--pp-bg2);
    padding: 56px 48px;
    border-bottom: 1px solid var(--pp-line);
    display: flex; justify-content:space-between; align-items:flex-end; gap:24px;
}
.pp-alumnos-hero h1 { font-family:var(--font-display); font-size:48px; font-weight:400; line-height:1.1; }
.pp-alumnos-hero h1 em { font-style:italic; color:var(--pp-green); }
.pp-alumnos-hero p { font-size:14px; font-weight:300; color:var(--pp-text-dim); margin-top:8px; }

/* Filtros */
.pp-al-filters {
    padding: 0 48px; background:var(--pp-white);
    display:flex; gap:0; border-bottom:1px solid var(--pp-line);
    overflow-x:auto; scrollbar-width:none;
    position:sticky; top:72px; z-index:90;
}
.pp-al-filters::-webkit-scrollbar { display:none; }
.pp-al-filter { padding:14px 22px; font-size:13px; font-weight:500; color:var(--pp-text-muted); cursor:pointer; white-space:nowrap; background:none; border:none; border-bottom:2px solid transparent; transition:all .2s; }
.pp-al-filter.active { color:var(--pp-green); border-bottom-color:var(--pp-green); }
.pp-al-filter:hover  { color:var(--pp-text); }

/* Recursos */
.pp-al-recursos { padding:0; display:flex; flex-direction:column; gap:1px; background:var(--pp-line); }

.pp-recurso-card {
    background:var(--pp-white);
    padding:32px 48px;
    display:grid; grid-template-columns:64px 1fr auto; gap:24px; align-items:start;
    transition:background .2s;
}
.pp-recurso-card:hover { background:var(--pp-bg); }
.pp-recurso-card.hidden { display:none; }

.pp-recurso-icono { font-size:32px; padding-top:4px; }

.pp-recurso-tipo { font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--pp-green); margin-bottom:6px; }
.pp-recurso-body h3 { font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--pp-text); margin-bottom:8px; }
.pp-recurso-body p { font-size:13px; font-weight:300; color:var(--pp-text-dim); line-height:1.7; }

/* Video embed */
.pp-video-btn { font-size:12px; padding:8px 18px; margin-top:12px; }
.pp-video-embed { margin-top:16px; aspect-ratio:16/9; }
.pp-video-embed iframe { width:100%; height:100%; border:none; }

.pp-recurso-actions { padding-top:4px; display:flex; flex-direction:column; gap:8px; }

.pp-al-empty { padding:80px 48px; text-align:center; color:var(--pp-text-muted); }
.pp-al-empty p { font-size:15px; margin-bottom:8px; }

/* ─── Responsive ─── */
@media (max-width:768px) {
    .pp-login-wrap { grid-template-columns:1fr; }
    .pp-login-brand { display:none; }
    .pp-login-form-wrap { padding:40px 24px; }
    .pp-alumnos-hero { padding:40px 24px; flex-direction:column; align-items:flex-start; }
    .pp-al-filters { padding:0 24px; }
    .pp-recurso-card { grid-template-columns:48px 1fr; padding:24px; }
    .pp-recurso-actions { grid-column:2; }
}