/* ═══════════════════════════════════════════════════════════════
   Aulas Guacurarí — core (siempre cargado junto a theme.css)
   Base + cards de curso + rails de destacados + acordeón de
   categorías + buscador + botón primario (.btn-autoasistidos,
   usado en toda la app) + grupos de cursos (chips de nivel).
   ═══════════════════════════════════════════════════════════════ */

/* ── Base ────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body.autoasistidos-body {
    background: var(--autoasistidos-bg);
    font-family: var(--font);
    color: var(--autoasistidos-text);
    min-height: 100vh;
}

/* Layout/sidebar/topbar/main → shared/components/portal/portal-shell.css
   (.portal-*). Acá solo lo que cambia por módulo: delta de color (arriba,
   en :root) y contenido propio (cards, vistas, etc, abajo). */

/* ── Cards de cursos ─────────────────────────────────────────── */
.curso-card {
    background: var(--autoasistidos-surface);
    border: 1px solid var(--autoasistidos-border);
    border-radius: var(--autoasistidos-radius);
    box-shadow: var(--autoasistidos-shadow);
    transition: box-shadow var(--autoasistidos-transition), transform var(--autoasistidos-transition);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.curso-card:hover {
    box-shadow: 0 10px 36px rgba(0,0,0,.16), 0 0 0 1.5px rgba(var(--autoasistidos-primary-rgb),.25);
    transform: translateY(-4px);
}

.curso-card-header {
    aspect-ratio: 16 / 7;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.curso-card-header-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .35s ease;
    z-index: 1;
}
.curso-card:hover .curso-card-header-img {
    transform: scale(1.04);
}

.curso-card-header-wmark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.75rem;
    color: rgba(255,255,255,.22);
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.curso-card-stripe {
    height: 4px;
    flex-shrink: 0;
    background: var(--autoasistidos-primary);
}

.curso-card-body {
    padding: 1rem 1.1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 0;
}

.curso-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

.curso-card-title {
    font-size: var(--portal-card-title-size);
    font-weight: 600;
    color: var(--autoasistidos-text);
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* line-clamp solo limita el MÁXIMO; un título corto de 1 línea achica la
       card igual. min-height fuerza el alto de 2 líneas siempre (em relativo
       a su propio font-size, coincide exacto con 2 × line-height). */
    min-height: 2.7em;
}

.curso-card-meta {
    font-size: .78rem;
    color: var(--autoasistidos-text-muted);
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: .3rem;
}

.curso-card-hora {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--autoasistidos-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.curso-card-hora i { font-size: .75rem; }

/* ── Fila meta (cat + horas) ─────────────────────────────────── */
.curso-card-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: .3rem;
    gap: .4rem;
}
.curso-card-meta-row .curso-badge-valora { margin-left: auto; }

/* ── Bloque valoración docente (elemento principal, fila propia) ─
   Solo se renderiza si el curso TIENE valoracion_docente=1; si no,
   el JS emite string vacío (nada que ocultar/reservar). */
.curso-card-valora-block {
    display: flex;
    align-items: center;
    gap: .6rem;
    border-radius: 10px;
    padding: .5rem .65rem;
    background: linear-gradient(135deg, var(--autoasistidos-primary) 0%, #29b6f6 100%);
    box-shadow: 0 3px 10px rgba(var(--autoasistidos-primary-rgb),.3);
    position: relative;
    overflow: hidden;
}
.curso-card-valora-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255,255,255,.18) 0%, transparent 55%);
    border-radius: inherit;
    pointer-events: none;
}
.curso-card-valora-block::after {
    content: '';
    position: absolute;
    top: -10%; left: 0;
    width: 38%; height: 120%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 25%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.18) 75%, transparent 100%);
    animation: valora-shine 3s linear infinite;
    pointer-events: none;
}
.curso-card-valora-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .8rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.curso-card-valora-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.curso-card-valora-title {
    font-size: .75rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
}
/* Subtítulo "Acreditación certificada" retirado del badge a pedido (queda
   solo "Valoración docente"). Comentado, no borrado, por si se reactiva.
.curso-card-valora-sub {
    font-size: .62rem;
    color: rgba(255,255,255,.82);
    line-height: 1.3;
}
*/
.curso-card-valora-check {
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* ── Badge compacto (reutilizado para "Inscripto: X" en cards grupo) ─ */
.curso-badge-valora {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.curso-badge-valora--si {
    color: #fff;
    background: linear-gradient(135deg, var(--autoasistidos-primary) 0%, #29b6f6 100%);
}

/* ── Botón full-width + link "Ver curso" ─────────────────────── */
.curso-card-btn-full {
    width: 100%;
    justify-content: center;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-size: .78rem !important;
}
.curso-card-ver-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font-size: .74rem;
    font-weight: 500;
    color: var(--autoasistidos-text-muted);
    text-decoration: none;
    padding: .2rem;
    transition: color var(--autoasistidos-transition);
}
.curso-card-ver-link:hover { color: var(--autoasistidos-primary); text-decoration: none; }

/* ── Badge valoración docente (detalle de curso) ─────────────── */
@keyframes valora-shine {
    0%   { transform: translateX(-220%) skewX(-22deg); }
    28%  { transform: translateX(400%)  skewX(-22deg); }
    100% { transform: translateX(400%)  skewX(-22deg); }
}
.curso-valora-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
    padding: 5px 13px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    box-shadow: 0 3px 12px rgba(239,68,68,.45), 0 1px 4px rgba(0,0,0,.12);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
}
.curso-valora-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255,255,255,.22) 0%, transparent 55%);
    border-radius: inherit;
    pointer-events: none;
}
.curso-valora-badge::after {
    content: '';
    position: absolute;
    top: -10%;
    left: 0;
    width: 38%;
    height: 120%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.18) 25%,
        rgba(255,255,255,.62) 50%,
        rgba(255,255,255,.18) 75%,
        transparent 100%
    );
    animation: valora-shine 3s linear infinite;
    pointer-events: none;
}
.curso-valora-badge i { font-size: .78rem; }

.curso-card-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.curso-card-divider {
    border: none;
    border-top: 1px solid var(--autoasistidos-border);
    margin: 0;
    opacity: .6;
}
.curso-card-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.curso-card-actions .curso-card-btn-full { flex: none; }
.curso-card-actions .curso-card-ver-link {
    flex: none;
    border: 1.5px solid var(--autoasistidos-border);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--autoasistidos-text);
    width: 100%;
    justify-content: center;
    transition: border-color var(--autoasistidos-transition), color var(--autoasistidos-transition), background var(--autoasistidos-transition);
}
.curso-card-actions .curso-card-ver-link:hover {
    border-color: var(--autoasistidos-primary);
    color: var(--autoasistidos-primary);
    background: var(--autoasistidos-primary-lt);
}

/* ── Badges de estado ────────────────────────────────────────── */
.curso-estado-header-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 1px 6px rgba(0,0,0,.15);
}

.curso-estado-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: .01em;
}
.curso-estado--inscripto { background: #dbeafe; color: #1d4ed8; }
.curso-estado--aprobado  { background: #dcfce7; color: #15803d; }
.curso-estado--vencido   { background: #fef3c7; color: #b45309; }
.curso-estado--cerrado   { background: #f1f5f9; color: #64748b; }
.curso-estado--default   { background: var(--autoasistidos-bg); color: var(--autoasistidos-text-muted); }
.curso-estado--default .bi-circle-fill {
    color: #22c55e;
    font-size: 8px;
    filter: drop-shadow(0 0 4px rgba(34,197,94,.7));
    animation: glow-pulse 2s ease-in-out infinite;
}
@keyframes glow-pulse {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(34,197,94,.6)); }
    50%       { filter: drop-shadow(0 0 7px rgba(34,197,94,.95)); }
}

/* ── CTA de inscripción (integrado en header) ────────────────── */
.insc-header-cta {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin-top: 1rem;
    padding-top: .875rem;
    border-top: 1px solid var(--autoasistidos-border);
    flex-wrap: wrap;
}
.insc-cta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    flex: 1;
}
.insc-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(var(--autoasistidos-primary-rgb),.09);
    color: var(--sidebar-bg); /* era #00695c */
    border: 1px solid rgba(var(--autoasistidos-primary-rgb),.18);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: .72rem;
    font-weight: 600;
}
.insc-chip .bi { font-size: .75rem; }
.insc-btn {
    white-space: nowrap;
    width: auto !important;
    padding: 10px 24px !important;
    flex-shrink: 0;
}
@media (max-width: 680px) {
    .insc-header-cta { flex-direction: column; align-items: stretch; }
    .insc-btn { width: 100% !important; justify-content: center; }
}

/* ── Toast ───────────────────────────────────────────────────── */
.autoasistidos-toast {
    min-width: 240px;
    font-size: .9rem;
}

/* ── Link ────────────────────────────────────────────────────── */
.autoasistidos-link {
    color: var(--autoasistidos-primary);
    text-decoration: none;
    font-weight: 500;
}
.autoasistidos-link:hover { color: var(--autoasistidos-primary-dk); text-decoration: underline; }

/* ── Page header ─────────────────────────────────────────────── */
.autoasistidos-page-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--autoasistidos-text);
    line-height: 1.2;
}
.autoasistidos-page-subtitle {
    font-size: .85rem;
    color: var(--autoasistidos-text-muted);
    margin-top: 2px;
}

/* ── Outline button ──────────────────────────────────────────── */
.btn-autoasistidos-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid var(--autoasistidos-primary);
    color: var(--autoasistidos-primary);
    background: transparent;
    border-radius: var(--autoasistidos-radius-sm);
    padding: 7px 14px;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.btn-autoasistidos-outline:hover {
    background: var(--autoasistidos-primary-lt);
    color: var(--autoasistidos-primary-dk);
}

/* ── Loading / empty states ──────────────────────────────────── */
.autoasistidos-loading-state {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--autoasistidos-text-muted);
    padding: 2.5rem 0;
    font-size: .9rem;
}
.autoasistidos-empty-state {
    text-align: center;
    padding: 3.5rem 1rem;
    color: var(--autoasistidos-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}
.autoasistidos-empty-state i {
    font-size: 2.75rem;
    color: var(--autoasistidos-border);
}
.autoasistidos-empty-state p { margin: 0; font-size: .95rem; }

/* ── Cursos grid ─────────────────────────────────────────────── */
.autoasistidos-cursos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 1fr;
    gap: 1.1rem;
}

/* ── Zona de descubrimiento (contenedor de ambos rails) ────────── */
.catalogo-discovery {
    margin-bottom: 1rem;
}

/* ── Rails de destacados ─────────────────────────────────────── */

/* Contenedor externo — clip natural de cards */
.cursos-rail {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 1.125rem;
    box-shadow: 0 2px 14px rgba(0,0,0,.07);
    overflow: hidden;
}

/* Header del rail */
.cursos-rail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .875rem;
}
.cursos-rail-header-left {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.cursos-rail-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.cursos-rail-icon--fire {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
}
.cursos-rail-icon--new {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}
.cursos-rail-icon--grid {
    background: var(--autoasistidos-primary-lt);
    color: var(--autoasistidos-primary);
    border: 1px solid var(--autoasistidos-border);
}
.cursos-rail-titulo {
    font-size: .95rem;
    font-weight: 700;
    color: var(--autoasistidos-text);
    margin: 0;
    line-height: 1.2;
}
.cursos-rail-sub {
    font-size: .73rem;
    color: var(--autoasistidos-text-muted);
    margin: 2px 0 0;
}

/* Flechas de navegación — más grandes */
.cursos-rail-arrows {
    display: flex;
    gap: .35rem;
    flex-shrink: 0;
}
.cursos-rail-arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--autoasistidos-border);
    background: var(--autoasistidos-surface);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--autoasistidos-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s, opacity .15s, box-shadow .15s;
}
.cursos-rail-arrow:hover:not(:disabled) {
    border-color: var(--autoasistidos-primary);
    color: #fff;
    background: var(--autoasistidos-primary);
    box-shadow: 0 3px 10px rgba(var(--autoasistidos-primary-rgb),.3);
}
.cursos-rail-arrow:disabled { opacity: .25; cursor: default; }

/* Track */
.cursos-rail-track {
    display: flex;
    align-items: stretch;
    gap: .875rem;
    overflow-x: auto;
    overflow-y: visible;
    padding-top: 6px;
    margin-top: -6px;
    padding-bottom: 12px;
    margin-bottom: -12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.cursos-rail-track::-webkit-scrollbar { display: none; }

/* Dots de posición en carrusel */
.cursos-rail-dots {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding-top: 10px;
}
.cursos-rail-dot {
    width: 5px;
    height: 5px;
    border-radius: 3px;
    background: var(--autoasistidos-border);
    transition: width .2s ease, background .2s ease;
    display: inline-block;
    flex-shrink: 0;
}
.cursos-rail-dot.active {
    width: 16px;
    background: var(--autoasistidos-primary);
}
/* Solo visible en mobile */
@media (min-width: 768px) {
    .cursos-rail-dots { display: none; }
}

.cursos-rail-item {
    flex: 0 0 300px;
    max-width: 300px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}


/* Botón de acción compacto en rail */
.btn-rail-accion {
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    transition: background .15s, color .15s, border-color .15s, transform .1s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1.5;
}
.btn-rail-accion:active { transform: scale(.96); }
.btn-rail-accion--inscribir {
    background: var(--autoasistidos-primary);
    color: #fff;
}
.btn-rail-accion--inscribir:hover { background: var(--autoasistidos-primary-dk); color: #fff; }
.btn-rail-accion--renovar {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74;
}
.btn-rail-accion--renovar:hover { background: #ffedd5; color: #9a3412; }

/* Badge ranking (1, 2, 3...) — estilo medalla */
.rail-rank-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 20px;
    padding: 3px 8px 3px 5px;
    font-size: .67rem;
    font-weight: 700;
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    letter-spacing: .01em;
    white-space: nowrap;
    width: auto;
    height: auto;
}
.rail-rank-icon {
    line-height: 1;
    font-size: .82rem;
}
.rail-rank-badge--1 {
    background: rgba(254,243,199,.93);
    color: #92400e;
    border: 1px solid rgba(252,211,77,.7);
}
.rail-rank-badge--2 {
    background: rgba(241,245,249,.93);
    color: #334155;
    border: 1px solid rgba(203,213,225,.7);
}
.rail-rank-badge--3 {
    background: rgba(255,247,237,.93);
    color: #7c2d12;
    border: 1px solid rgba(253,186,116,.7);
}
.rail-rank-badge--n {
    background: rgba(0,0,0,.55);
    color: #fff;
    border: 1px solid transparent;
}

/* Badge fecha (Novedades) */
.rail-fecha-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    background: rgba(5, 150, 105, .85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 20px;
    letter-spacing: .04em;
    text-transform: uppercase;
    z-index: 2;
    white-space: nowrap;
}


/* Separación entre rails */
.cursos-rail + .cursos-rail {
    margin-top: 1rem;
}

/* Contenedor blanco de "Todos los cursos" */
.catalogo-section {
    background: #fff;
    border-radius: 14px;
    padding: 1.125rem 1.125rem 1.25rem;
    box-shadow: 0 2px 14px rgba(0,0,0,.07);
}

/* Buscador sticky */
.catalogo-search-sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    margin: 0 -1.125rem;
    padding: .625rem 1.125rem;
    transition: box-shadow .2s;
}
.catalogo-search-sticky.is-stuck {
    box-shadow: 0 4px 18px rgba(0,0,0,.10);
}
@media (max-width: 767px) {
    .catalogo-search-sticky { top: var(--topbar-h); }
}

@media (max-width: 767px) {
    .cursos-rail-arrows { display: none; }
    .cursos-rail { padding-bottom: .875rem; }
    .cursos-rail-item { flex: 0 0 280px; max-width: 280px; }
}

/* ── Resumen de categorías (barra superior) ──────────────────── */
.cat-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
    padding: .625rem .75rem;
    background: var(--autoasistidos-surface);
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(0,0,0,.07);
}

.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 20px;
    padding: .28rem .75rem .28rem .5rem;
    font-size: .8rem;
    font-weight: 600;
    font-family: var(--font);
    color: var(--autoasistidos-text-muted);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.cat-chip i { font-size: .88rem; }
.cat-chip:hover {
    background: var(--autoasistidos-bg);
    border-color: var(--autoasistidos-border);
    color: var(--autoasistidos-text);
}
.cat-chip.active {
    background: var(--autoasistidos-bg);
    border-color: var(--autoasistidos-border);
    color: var(--autoasistidos-text);
}
.cat-chip-count {
    font-size: .68rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
}

.cat-resumen-sep {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--autoasistidos-border) 20%, var(--autoasistidos-border) 80%, transparent);
    margin-bottom: 1rem;
}

/* ── Botón flotante ir arriba ─────────────────────────────────── */
.btn-top {
    position: fixed;
    bottom: 1.75rem;
    right: 1.75rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--autoasistidos-primary);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(var(--autoasistidos-primary-rgb),.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .22s, transform .22s, background .15s;
    z-index: 100;
}
.btn-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.btn-top:hover { background: var(--autoasistidos-primary-dk); }

/* ── Acordeón de categorías (Mis cursos) ─────────────────────── */
.cat-acordeon {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.cat-panel {
    background: var(--autoasistidos-surface);
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(0,0,0,.07);
    overflow: hidden;
    transition: box-shadow .2s;
}

.cat-panel.open {
    box-shadow: 0 6px 24px rgba(0,0,0,.11);
}

.cat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 1rem 1.125rem;
    cursor: pointer;
    font-family: var(--font);
    gap: .75rem;
    transition: background .15s;
}
.cat-panel-header:hover { background: rgba(0,0,0,.022); }

.cat-panel-header-left {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
}

.cat-panel-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform .2s;
}
.cat-panel.open .cat-panel-icon { transform: scale(1.08); }

.cat-panel-name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--autoasistidos-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-panel-badge {
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
    flex-shrink: 0;
    letter-spacing: .02em;
}

.cat-panel-chevron {
    color: var(--autoasistidos-text-muted);
    font-size: .8rem;
    flex-shrink: 0;
    transition: transform .28s cubic-bezier(.4,0,.2,1), color .2s;
}
.cat-panel.open .cat-panel-chevron {
    transform: rotate(-180deg);
    color: var(--autoasistidos-text);
}

/* Animación altura con grid-template-rows */
.cat-panel-body-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1);
}
.cat-panel.open .cat-panel-body-wrap {
    grid-template-rows: 1fr;
}

.cat-panel-body-inner {
    overflow: hidden;
}

.cat-panel-body {
    padding: 1rem 1.125rem 1.125rem;
    border-top: 1px solid var(--autoasistidos-border);
}

/* ── Section sub-header ──────────────────────────────────────── */
.autoasistidos-section-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--autoasistidos-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--autoasistidos-border);
}
.autoasistidos-section-badge {
    background: var(--autoasistidos-border);
    color: var(--autoasistidos-text-muted);
    border-radius: 20px;
    padding: 1px 8px;
    font-size: .72rem;
    font-weight: 600;
}

/* ── Card extras ─────────────────────────────────────────────── */
.curso-card-desc {
    font-size: .81rem;
    color: var(--autoasistidos-text-muted);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* idem .curso-card-title: fuerza el alto de 3 líneas aunque el texto
       real ocupe menos (evita que descripciones cortas achiquen la card).
       3 en vez de 2: con el bloque grande de valoración/niveles eliminado
       del bottom, la descripción es ahora el principal contenido real que
       absorbe el espacio disponible — más texto legible en vez de hueco. */
    min-height: 4.5em;
}

.curso-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--autoasistidos-text-muted);
}
.curso-cat-badge i { font-size: .8rem; }

/* ── Search input ────────────────────────────────────────────── */
.autoasistidos-search-wrap {
    position: relative;
    max-width: 380px;
}
.autoasistidos-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--autoasistidos-text-muted);
    font-size: .9rem;
    pointer-events: none;
}
.autoasistidos-search-input {
    width: 100%;
    border: 1.5px solid var(--autoasistidos-border);
    border-radius: var(--autoasistidos-radius);
    padding: 9px 14px 9px 36px;
    font-size: .9rem;
    background: #fff;
    color: var(--autoasistidos-text);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.autoasistidos-search-input:focus {
    border-color: var(--autoasistidos-primary);
    box-shadow: 0 0 0 3px rgba(var(--autoasistidos-primary-rgb),.1);
}


/* ── Primary button (overrides Bootstrap) ────────────────────── */
.btn-autoasistidos {
    width: 100%;
    background: var(--autoasistidos-primary);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 13px;
    font-size: .95rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .2s, transform .15s, box-shadow .2s;
    letter-spacing: .01em;
    margin-top: .25rem;
    text-decoration: none;
}
.btn-autoasistidos:hover:not(:disabled) {
    background: var(--autoasistidos-primary-dk);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--autoasistidos-primary-rgb),.28);
    color: #fff;
}
.btn-autoasistidos:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.btn-autoasistidos:disabled { opacity: .58; cursor: not-allowed; }

/* Dentro de modales: anular width:100%, igualar altura con btn-outline (border transparente),
   y dar más padding horizontal para mantener proporción ~1:2 vs el botón secundario */
.modal .btn-autoasistidos {
    width: auto;
    padding: 6px 3rem;
    margin-top: 0;
    border: 1px solid transparent;
}


/* ── Grupos de cursos ──────────────────────────────────────────────────────── */

.nivel-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border: 1.5px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    font-size: .78rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    line-height: 1.4;
    flex: 0 0 auto;
    white-space: nowrap;
}

.nivel-chip:hover {
    border-color: var(--autoasistidos-primary);
    color: var(--autoasistidos-primary);
    background: #eff6ff; /* era #f0fdfa (teal-50) */
}

.nivel-chip.active {
    border-color: var(--autoasistidos-primary);
    background: var(--autoasistidos-primary);
    color: #fff;
}

.nivel-recomendado {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: rgba(255,255,255,.25);
    border-radius: 999px;
    padding: 1px 5px;
    margin-left: 2px;
}

.nivel-chip:not(.active) .nivel-recomendado {
    background: var(--autoasistidos-primary);
    color: #fff;
}

/* Variante del chip usada dentro del modal "Elegí tu nivel" — apilado a lo
   ancho (vs. la fila horizontal que tenían antes en el body de la card). */
.nivel-chip--modal {
    width: 100%;
    justify-content: flex-start;
    padding: 8px 14px;
    font-size: .85rem;
    white-space: normal;
    text-align: left;
}

/* Chip de nivel que no corresponde a la persona (no está en su perfil):
   no seleccionable, gris, con cursor de bloqueo. El motivo se muestra
   vía atributo title (tooltip nativo del browser) al hacer hover. */
.nivel-chip--disabled {
    cursor: not-allowed;
    color: #9ca3af;
    background: #f3f4f6;
    border-color: #e5e7eb;
}

.nivel-chip--disabled:hover {
    border-color: #e5e7eb;
    background: #f3f4f6;
    color: #9ca3af;
}

.men-opciones {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Ícono del header que dispara el tooltip de niveles (hover/focus) */
.curso-card-niveles-trigger {
    cursor: pointer;
}
.curso-card-niveles-trigger:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

/* Tooltip dinámico de niveles disponibles — nodo único, fixed + JS position,
   fuera de cualquier ancestro con overflow:hidden (el header de la card lo
   recorta si se anida ahí). */
.grupo-niveles-tooltip {
    position: fixed;
    z-index: 3000;
    background: #fff;
    color: #1f2937;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(15,23,42,.18), 0 1px 3px rgba(15,23,42,.08);
    padding: 10px 12px;
    min-width: 180px;
    max-width: 260px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
    pointer-events: none;
}
.grupo-niveles-tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.grupo-niveles-tooltip-title {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--autoasistidos-text-muted);
    margin-bottom: 6px;
}
.grupo-niveles-tooltip ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nivel-tt-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: var(--autoasistidos-text-muted);
}
.nivel-tt-item--mine {
    color: var(--autoasistidos-primary);
    font-weight: 700;
}
.nivel-tt-item i { font-size: .85rem; }

/* Badge "Inscripto: X" clickeable cuando el docente puede cambiar de nivel —
   mismo footprint visual que .curso-badge-valora--si, sin sumar una fila
   nueva a la card (ver nota de altura uniforme más abajo). */
.curso-badge-cambiar {
    border: none;
    cursor: pointer;
    transition: filter .15s;
}
.curso-badge-cambiar:hover {
    filter: brightness(1.08);
}

/* Estado de éxito post-inscripción: el botón cambia de color/ícono y muestra
   el countdown de redirección en el mismo lugar, sin desplazar layout. */
.btn-rail-accion--exito,
.btn-rail-accion--exito:hover {
    background: #16a34a;
    color: #fff;
    cursor: default;
}

/* Placeholders invisibles: reservan la misma altura en TODAS las cards del
   catálogo para bloques que solo existen bajo una condición DENTRO DEL MISMO
   tipo de card (ej. el segundo link "Ver curso" cuando el estado solo pinta
   uno) — sin esto, la ausencia del bloque deja una card más baja, y
   grid-auto-rows:1fr estira igual toda la grilla al alto de la más alta,
   generando espacio en blanco. NO usar este patrón para diferencias
   ESTRUCTURALES entre curso único y grupo (eso causaba huecos grandes y
   feos — ver .curso-badge-valora, que reemplazó al bloque grande de
   valoración, y el badge "Inscripto: X" en la meta-row del grupo). */
.curso-card-desc--placeholder,
.curso-card-ver-link--placeholder {
    visibility: hidden;
    pointer-events: none;
}