/* ═══════════════════════════════════════
   Posturología Pro — cursos.css
═══════════════════════════════════════ */

/* ─── Filtros ─── */
.pp-cursos-filtros {
    display: flex; gap:8px; flex-wrap:wrap;
    padding: 24px 48px; background:var(--pp-white);
    border-bottom:1px solid var(--pp-line);
    position:sticky; top:72px; z-index:50;
}
.pp-filtro {
    padding:8px 18px; background:var(--pp-bg); border:1px solid var(--pp-line);
    font-size:12px; font-weight:500; color:var(--pp-text-dim);
    cursor:pointer; transition:all .2s;
}
.pp-filtro:hover  { border-color:var(--pp-green); color:var(--pp-green-dk); }
.pp-filtro.active { background:var(--pp-green); border-color:var(--pp-green); color:#fff; }

/* ─── Lista de cursos ─── */
.pp-cursos-lista {
    padding: 48px;
    display: flex; flex-direction:column; gap:2px;
}

/* ─── Tarjeta curso (vista lista) ─── */
.pp-curso-item {
    background: var(--pp-white);
    border: 1px solid var(--pp-line);
    display: grid; grid-template-columns:340px 1fr;
    transition:border-color .2s, box-shadow .2s;
    overflow:hidden;
}
.pp-curso-item:hover { border-color:var(--pp-green); box-shadow:var(--shadow); }
.pp-curso-item.oculto { display:none; }

.pp-curso-item-img { position:relative; aspect-ratio:16/10; overflow:hidden; }
.pp-curso-item-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.pp-curso-item:hover .pp-curso-item-img img { transform:scale(1.04); }
.pp-curso-item-img-overlay { position:absolute; inset:0; background:linear-gradient(to right,rgba(44,44,44,.15),transparent); }
.pp-curso-icono-badge { position:absolute; top:16px; left:16px; font-size:24px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.pp-curso-item-img--empty { background:var(--pp-bg2); display:flex; align-items:center; justify-content:center; }
.pp-curso-icono-grande { font-size:56px; opacity:.4; }

.pp-curso-item-body { padding:32px 36px; display:flex; flex-direction:column; gap:16px; }
.pp-curso-item-cats { display:flex; gap:6px; flex-wrap:wrap; }
.pp-cat-tag   { padding:3px 10px; background:var(--pp-green-lt); color:var(--pp-green-dk); font-size:11px; font-weight:500; }
.pp-nivel-tag { padding:3px 10px; background:var(--pp-bg2); color:var(--pp-text-muted); font-size:11px; font-weight:500; }

.pp-curso-item-body h2 {
    font-family:var(--font-display); font-size:26px; font-weight:600;
    color:var(--pp-text); line-height:1.2;
}
.pp-curso-item-body > p { font-size:14px; font-weight:300; color:var(--pp-text-dim); line-height:1.8; }

.pp-curso-item-detalles { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px 0; border-top:1px solid var(--pp-line); border-bottom:1px solid var(--pp-line); }
.pp-detalle { display:flex; flex-direction:column; gap:3px; }
.pp-detalle span { font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--pp-text-muted); }
.pp-detalle strong { font-size:13px; font-weight:500; color:var(--pp-text); }

/* ─── Grupos del curso ─── */
.pp-grupos-lista { display:flex; flex-direction:column; gap:0; }
.pp-grupos-titulo { font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--pp-text-muted); margin-bottom:12px; }

.pp-grupo-row {
    display: grid; grid-template-columns:1fr auto;
    gap:16px; align-items:center;
    padding:16px 0; border-top:1px solid var(--pp-line);
    transition:background .15s;
}
.pp-grupo-row:hover { background:var(--pp-bg); margin:0 -36px; padding:16px 36px; }
.pp-grupo-row.pp-grupo-lleno { opacity:.6; }

.pp-grupo-dias  { font-size:14px; font-weight:500; color:var(--pp-text); margin-bottom:3px; text-transform:capitalize; }
.pp-grupo-hora  { font-size:13px; font-weight:300; color:var(--pp-text-dim); }
.pp-grupo-fechas{ font-size:12px; font-weight:300; color:var(--pp-text-muted); margin-top:3px; }
.pp-grupo-lugar { font-size:12px; font-weight:300; color:var(--pp-green-dk); margin-top:2px; }

.pp-grupo-plazas { text-align:right; }
.pp-grupo-plazas-num { font-size:13px; font-weight:600; margin-bottom:6px; }
.pp-grupo-bar { width:100px; height:3px; background:var(--pp-line); margin-bottom:10px; margin-left:auto; }
.pp-grupo-bar-fill { height:100%; transition:width .5s; }

.pp-btn-inscribir {
    padding:8px 20px; background:var(--pp-green); color:#fff;
    border:none; font-size:12px; font-weight:500;
    cursor:pointer; transition:background .2s; white-space:nowrap;
}
.pp-btn-inscribir:hover { background:var(--pp-green-dk); }
.pp-btn-lleno {
    display:inline-block; padding:8px 16px;
    background:var(--pp-bg2); color:var(--pp-text-muted);
    font-size:12px; font-weight:400;
}

.pp-sin-grupos { font-size:13px; color:var(--pp-text-muted); font-style:italic; }
.pp-empty-state { text-align:center; padding:80px 24px; color:var(--pp-text-muted); }

/* ─── Modal inscripción ─── */
.pp-modal-login-req { text-align:center; padding:16px 0; }
.pp-modal-login-req p  { font-size:15px; color:var(--pp-text-dim); margin-bottom:20px; }
.pp-modal-login-req .pp-btn-primary { margin:0 auto; }

.pp-modal-resumen {
    background:var(--pp-bg2); padding:16px 20px;
    margin-bottom:24px; font-size:13px; line-height:1.9;
}
.pp-modal-resumen strong { color:var(--pp-text); font-weight:500; }

@media (max-width:900px) {
    .pp-cursos-filtros { padding:16px 24px; }
    .pp-cursos-lista   { padding:24px; }
    .pp-curso-item     { grid-template-columns:1fr; }
    .pp-curso-item-img { aspect-ratio:16/8; }
    .pp-curso-item-body { padding:24px; }
    .pp-curso-item-detalles { grid-template-columns:repeat(2,1fr); }
    .pp-grupo-bar { width:60px; }
}