/**
 * Tribbo - Estilos personalizados
 * Sistema de preparación de oposiciones
 */

/* ═══════════════════════════════════════════════════════════════════════════
   Variables CSS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --tribbo-primary:   #4F46E5;
    --tribbo-secondary: #7C3AED;
    --tribbo-accent:    #06B6D4;
    --tribbo-success:   #10B981;
    --tribbo-warning:   #F59E0B;
    --tribbo-danger:    #EF4444;
    --tribbo-dark:      #1E1B4B;
    --tribbo-light:     #F3F4F6;
    --tribbo-card-bg:   #fff;
    --tribbo-border:    #E5E7EB;
    --tribbo-text:      #111827;
    --tribbo-muted:     #6B7280;
    --tribbo-radius:    14px;
    --tribbo-radius-sm: 10px;
    --tribbo-shadow:    0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
    --tribbo-shadow-md: 0 4px 20px rgba(79,70,229,.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Reset / Base
   ═══════════════════════════════════════════════════════════════════════════ */

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--tribbo-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--tribbo-text);
}

main { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   Navbar
   ═══════════════════════════════════════════════════════════════════════════ */

.navbar-tribbo {
    background: linear-gradient(135deg, var(--tribbo-dark) 0%, var(--tribbo-primary) 100%);
    box-shadow: 0 2px 12px rgba(79, 70, 229, .30);
    z-index: 1030;
}

.navbar-tribbo .navbar-brand {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.5px;
    color: #fff !important;
}

.navbar-tribbo .nav-link {
    color: rgba(255, 255, 255, .80) !important;
    font-weight: 500;
    font-size: .875rem;
    padding: .5rem .7rem !important;
    border-radius: 7px;
    transition: color .15s, background .15s;
}

.navbar-tribbo .nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,.10);
}

.navbar-tribbo .nav-link.active {
    color: #fff !important;
    background: rgba(255,255,255,.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Cards
   ═══════════════════════════════════════════════════════════════════════════ */

.card-tribbo {
    border: none;
    border-radius: var(--tribbo-radius);
    box-shadow: var(--tribbo-shadow);
    background: var(--tribbo-card-bg);
    transition: transform .2s, box-shadow .2s;
}

.card-tribbo:hover {
    box-shadow: var(--tribbo-shadow-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Botones
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-tribbo {
    background: linear-gradient(135deg, var(--tribbo-primary), var(--tribbo-secondary));
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    transition: opacity .2s, transform .1s;
}

.btn-tribbo:hover {
    opacity: .9;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dashboard Hero
   ═══════════════════════════════════════════════════════════════════════════ */

.dash-hero {
    background: linear-gradient(135deg, var(--tribbo-dark) 0%, #312E81 40%, var(--tribbo-secondary) 100%);
    border-radius: var(--tribbo-radius);
    padding: 1.5rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.dash-hero::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: rgba(255,255,255,.05);
    border-radius: 50%;
}

.dash-hero::after {
    content: '';
    position: absolute;
    bottom: -60px; right: 60px;
    width: 140px; height: 140px;
    background: rgba(255,255,255,.04);
    border-radius: 50%;
}

.dash-hero h1,
.dash-hero .dash-greeting { font-weight: 800; }

.dash-hero .dash-subtitle { color: rgba(255,255,255,.75); font-size: .9rem; }

/* En móvil, el botón de acción del hero (si lo hay) baja a una fila propia a lo ancho, para
   que el título y el texto dispongan de todo el ancho (si no, en pantallas estrechas el botón
   comprime el texto en una columna angosta). Aplica a todas las páginas con este hero. */
@media (max-width: 575.98px) {
    .dash-hero > .d-flex { flex-wrap: wrap; }
    /* El bloque de texto se encoge y se queda AL LADO del icono (como el hero del Wallet),
       envolviendo su texto internamente en vez de saltar a otra fila bajo el icono. */
    .dash-hero > .d-flex > div:not(.flex-shrink-0) { flex: 1 1 0; min-width: 0; }
    /* Solo el botón de acción baja a una fila propia a lo ancho. */
    .dash-hero > .d-flex > .btn {
        flex: 1 0 100%;
        margin: .85rem 0 0 0 !important;
        justify-content: center;
    }
    /* Hero de la home (saludo + bloque de Nivel/XP): en móvil el bloque de XP reserva
       ~190px fijos y estruja el saludo en una columna angosta. Se fuerza a bajar a su
       propia fila a lo ancho para que el saludo disponga de todo el ancho. */
    .dash-hero-home > .flex-shrink-0 {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        margin-top: .5rem;
    }
    .dash-hero-home > .flex-shrink-0 .justify-content-md-end { justify-content: flex-start !important; }
}

/* Variante verde para las pantallas de Retos (duelos 1v1): diferencia visual
   respecto al morado de Challenge/Competición. Debe ir DESPUÉS de .dash-hero. */
.dash-hero-reto {
    background: linear-gradient(135deg, #064E3B 0%, #047857 45%, #10B981 100%);
}

/* Chips de estadísticas en el hero */
.stat-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--tribbo-radius-sm);
    padding: .55rem .8rem;
    min-width: 64px;
    backdrop-filter: blur(4px);
}

.stat-chip-value {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.stat-chip-label {
    font-size: .6rem;
    color: rgba(255,255,255,.75);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 3px;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Section Headers
   ═══════════════════════════════════════════════════════════════════════════ */

.section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tribbo-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .85rem;
}
.section-title i {
    font-size: 1.15rem;
}

.section-title .section-link {
    font-size: .78rem;
    font-weight: 500;
    color: var(--tribbo-primary);
    text-decoration: none;
}

.section-title .section-link:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Community Cards (dashboard)
   ═══════════════════════════════════════════════════════════════════════════ */

.community-card-dash {
    border-radius: var(--tribbo-radius);
    background: var(--tribbo-card-bg);
    box-shadow: var(--tribbo-shadow);
    text-decoration: none;
    color: var(--tribbo-text);
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.community-card-dash:hover {
    box-shadow: var(--tribbo-shadow-md);
    color: var(--tribbo-text);
}

.community-card-dash .cc-img {
    height: 90px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--tribbo-primary), var(--tribbo-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--tribbo-radius) var(--tribbo-radius) 0 0;
    position: relative;
}

.community-card-dash .cc-img img {
    width: 100%; height: 100%; object-fit: cover;
}

/* Pill que marca el rol del usuario sobre el curso (propietario / colaborador).
   Para "inscrito" no se renderiza. */
.community-card-dash .cc-role-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
    backdrop-filter: blur(4px);
    z-index: 3;
}
.community-card-dash .cc-role-badge i { font-size: .75rem; }
.community-card-dash .cc-role-badge.is-owner {
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    color: #fff;
}
.community-card-dash .cc-role-badge.is-collab {
    background: rgba(59, 130, 246, .95); /* azul */
    color: #fff;
}
.community-card-dash .cc-role-badge .cc-role-count {
    background: #fff;
    color: #B45309;
    border-radius: 999px;
    font-size: .62rem;
    padding: 1px 6px;
    margin-left: 2px;
}

/* Icono flotante entre cc-img y cc-body mediante margen negativo */
.community-card-dash .cc-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: var(--cc-avatar-bg, linear-gradient(135deg, var(--tribbo-primary), var(--tribbo-secondary)));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    margin-top: -22px;
    margin-left: 1rem;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.community-card-dash .cc-body {
    padding: .5rem 1rem .85rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.community-card-dash .cc-name {
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: .25rem;
    line-height: 1.3;
}

.community-card-dash .cc-meta {
    font-size: .72rem;
    color: var(--tribbo-muted);
    margin-bottom: .65rem;
}

.community-card-dash .cc-progress-wrap {
    margin-top: auto;
}

.community-card-dash .cc-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: .7rem;
    color: var(--tribbo-muted);
    margin-bottom: 4px;
}

.community-card-dash .cc-progress-label strong {
    color: var(--tribbo-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Progress Pill
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   Stat Pills (fila de píldoras de estadísticas)
   ─────────────────────────────────────────────────────────────────────────── */

.progress-pills-row {
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.progress-pills-row::-webkit-scrollbar { display: none; }

.ppill {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
    padding: .75rem 1rem;
    min-width: 155px;
    flex: 0 0 auto;
}
.ppill-label {
    font-size: .72rem;
    color: #6B7280;
    white-space: nowrap;
    margin-bottom: .2rem;
}
.ppill-mid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    width: max-content;
    min-width: 100%;
}
.ppill-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
    line-height: 1.15;
    white-space: nowrap;
}
.ppill-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.ppill-trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: .67rem;
    font-weight: 600;
    margin-top: .25rem;
    white-space: nowrap;
}
.ppill-trend.up   { color: #059669; }
.ppill-trend.down { color: #DC2626; }
.ppill-trend.flat { color: #9CA3AF; }

@media (max-width: 575.98px) {
    .ppill { min-width: 135px; padding: .65rem .85rem; flex: 0 0 auto; }
    .ppill-value { font-size: 1.25rem; }
}

.progress-pill {
    height: 6px;
    border-radius: 3px;
    background: #E5E7EB;
    overflow: hidden;
}

.progress-pill-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--tribbo-primary), var(--tribbo-accent));
    transition: width .5s ease;
}

.progress-tribbo .progress-bar {
    background: linear-gradient(90deg, var(--tribbo-primary), var(--tribbo-accent));
}

/* ═══════════════════════════════════════════════════════════════════════════
   Quick Action Cards
   ═══════════════════════════════════════════════════════════════════════════ */

.quick-action-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    background: var(--tribbo-card-bg);
    border-radius: var(--tribbo-radius-sm);
    box-shadow: var(--tribbo-shadow);
    text-decoration: none;
    color: var(--tribbo-text);
    font-weight: 600;
    font-size: .875rem;
    transition: box-shadow .2s, transform .2s;
    border: 1px solid transparent;
}

.quick-action-card:hover {
    box-shadow: var(--tribbo-shadow-md);
    color: var(--tribbo-primary);
    border-color: rgba(79,70,229,.15);
}

.quick-action-icon {
    width: 40px; height: 40px;
    border-radius: var(--tribbo-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Course Action Cards (PC03 grid de acciones)
   ═══════════════════════════════════════════════════════════════════════════ */

.course-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .85rem .5rem;
    background: var(--tribbo-card-bg);
    border-radius: var(--tribbo-radius-sm);
    box-shadow: var(--tribbo-shadow);
    text-decoration: none;
    color: var(--tribbo-text);
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
    transition: box-shadow .2s, transform .15s;
    border: 1px solid transparent;
}

.course-action-btn:hover {
    box-shadow: var(--tribbo-shadow-md);
    color: var(--tribbo-primary);
    border-color: rgba(79,70,229,.12);
}

.course-action-btn .ca-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* Utilidad: permite que un flex item encoja por debajo del ancho de su
   contenido para que `text-truncate` funcione (Bootstrap no la trae por
   defecto). Usada en múltiples plantillas; sin ella, los textos largos
   desbordan y provocan scroll horizontal en móvil. */
.min-width-0 { min-width: 0; }
/* Alias: varias plantillas usan `min-w-0` (estilo Bootstrap/Tailwind) para lo mismo.
   Sin esta regla la clase no existía y el texto largo se desbordaba (p. ej. el lateral
   "Últimos cursos" del listado de comunidades). Ambos nombres = min-width:0. */
.min-w-0 { min-width: 0; }

/* Descripción del hero del curso: acotada a unas líneas para que el hero no crezca sin
   control con descripciones largas (sobre todo en móvil). "Ver más" la despliega. */
.hero-desc {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero-desc.expanded { display: block; -webkit-line-clamp: none; overflow: visible; }

/* Migas de pan: en móvil (xs, <576px) se parten en varias líneas y apenas aportan
   (siempre hay nav inferior y botones de "Volver"), así que se ocultan. Se hace por la
   clase .breadcrumb y por el <nav aria-label="breadcrumb"> para no dejar su margen. */
@media (max-width: 575.98px) {
    nav[aria-label="breadcrumb"],
    .breadcrumb { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tema row — temario (PC03)
   ═══════════════════════════════════════════════════════════════════════════ */

.tema-row { border-bottom: 1px solid var(--tribbo-border); padding-bottom: .75rem; }
.tema-row:last-child { border-bottom: none; padding-bottom: 0; }

.tema-num {
    width: 26px; height: 26px; border-radius: 7px;
    background: #EEF2FF; color: var(--tribbo-primary);
    font-size: .7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.tema-bar-track { height: 5px; background: #E5E7EB; border-radius: 3px; flex-grow: 1; min-width: 40px; }
.tema-bar-fill  { height: 5px; border-radius: 3px; transition: width .4s ease; }

.tema-toggle i  { transition: transform .2s ease; }
.tema-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.tema-detail { background: #F8FAFF; border-radius: 10px; border: 1px solid #E0E7FF; }

/* ═══════════════════════════════════════════════════════════════════════════
   Streak & Badges
   ═══════════════════════════════════════════════════════════════════════════ */

.streak-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    color: #fff;
    border-radius: 20px;
    padding: .25rem .75rem;
    font-size: .75rem;
    font-weight: 700;
}

.badge-plan {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: linear-gradient(135deg, var(--tribbo-secondary), var(--tribbo-primary));
    color: #fff;
    border-radius: 8px;
    padding: .35rem .8rem;
    font-size: .82rem;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Plan Card
   ═══════════════════════════════════════════════════════════════════════════ */

.plan-card-premium {
    background: linear-gradient(135deg, var(--tribbo-secondary) 0%, var(--tribbo-primary) 100%);
    border-radius: var(--tribbo-radius);
    padding: 1.25rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.plan-card-premium::after {
    content: '';
    position: absolute;
    bottom: -30px; right: -20px;
    width: 100px; height: 100px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
}

.plan-card-free {
    background: linear-gradient(135deg, #374151 0%, #4B5563 100%);
    border-radius: var(--tribbo-radius);
    padding: 1.25rem;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Stat Boxes (versión sidebar)
   ═══════════════════════════════════════════════════════════════════════════ */

.stat-box {
    background: var(--tribbo-card-bg);
    border-radius: var(--tribbo-radius-sm);
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--tribbo-primary);
    box-shadow: var(--tribbo-shadow);
}

.stat-box .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tribbo-dark);
}

.stat-box .stat-label {
    font-size: .8rem;
    color: var(--tribbo-muted);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Conv-option (selector de cursos en sidebar)
   ═══════════════════════════════════════════════════════════════════════════ */

.conv-option {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem .9rem;
    border-radius: 10px;
    border: 1.5px solid var(--tribbo-border);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    text-decoration: none; color: var(--tribbo-text);
    margin-bottom: .5rem;
}
.conv-option:last-child { margin-bottom: 0; }
.conv-option.active { border-color: var(--tribbo-primary); background: #F0F0FF; color: var(--tribbo-text); }
.conv-option:hover:not(.active) { border-color: #C7D2FE; background: #F8F9FF; color: var(--tribbo-text); }
.conv-option-icon {
    width: 34px; height: 34px; border-radius: 8px;
    background: linear-gradient(135deg, var(--tribbo-primary), var(--tribbo-secondary));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .85rem; flex-shrink: 0;
}
.conv-option-icon.inactive { background: #E5E7EB; color: #9CA3AF; }

/* Stat cards inline (fila de 4) */
.stat-card-sm {
    background: var(--tribbo-card-bg);
    border-radius: var(--tribbo-radius-sm);
    box-shadow: var(--tribbo-shadow);
    padding: .9rem 1rem;
    text-align: center;
}

.stat-card-sm .sc-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--tribbo-text);
    line-height: 1;
}

.stat-card-sm .sc-label {
    font-size: .68rem;
    color: var(--tribbo-muted);
    margin-top: .2rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Quick-access grid (qg-btn) y lista (qg-btn-list)
   ═══════════════════════════════════════════════════════════════════════════ */

.quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6rem;
}
@media (max-width: 1399.98px) {
    .quick-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) {
    .quick-grid { grid-template-columns: repeat(2, 1fr); }
}

.qg-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .75rem .5rem;
    background: #fff;
    border: 1.5px solid var(--tribbo-border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--tribbo-text);
    transition: border-color .15s, box-shadow .15s, transform .15s;
    text-align: center;
}
.qg-btn:hover {
    border-color: var(--tribbo-primary);
    box-shadow: 0 2px 10px rgba(79,70,229,.1);
    color: var(--tribbo-text);
}
.qg-btn .qg-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.qg-btn .qg-label { font-size: .75rem; font-weight: 700; line-height: 1.2; }
.qg-btn .qg-desc  { font-size: .65rem; color: var(--tribbo-muted); line-height: 1.3; }

.qg-btn-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    background: #fff;
    border: 1.5px solid var(--tribbo-border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--tribbo-text);
    transition: border-color .15s, box-shadow .15s;
}
.qg-btn-list:hover {
    border-color: var(--tribbo-primary);
    box-shadow: 0 2px 10px rgba(79,70,229,.1);
    color: var(--tribbo-text);
}
.qg-btn-list .qg-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.qg-btn-list .qg-label { font-size: .75rem; font-weight: 700; line-height: 1.2; }
.qg-btn-list .qg-desc  { font-size: .65rem; color: var(--tribbo-muted); line-height: 1.3; }

/* ═══════════════════════════════════════════════════════════════════════════
   Flashcard / Estudio
   ═══════════════════════════════════════════════════════════════════════════ */

/* Donut de progreso (SVG puro) */
.donut-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.donut-label {
    position: absolute;
    text-align: center;
    line-height: 1;
}

.donut-label .dl-pct {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--tribbo-text);
}

.donut-label .dl-sub {
    font-size: .65rem;
    color: var(--tribbo-muted);
}

/* Deck row (árbol de temas tarjetas) */
.deck-row {
    padding: .65rem .75rem;
    background: var(--tribbo-card-bg);
    border-radius: var(--tribbo-radius-sm);
    border: 1px solid var(--tribbo-border);
    margin-bottom: .35rem;
    transition: border-color .15s;
}

.deck-row:hover { border-color: rgba(79,70,229,.3); }

.deck-row.deck-child {
    margin-left: 1.25rem;
    background: #FAFAFA;
}

.deck-row .dr-name {
    font-size: .85rem;
    font-weight: 600;
}

.deck-row .dr-count {
    font-size: .72rem;
    color: var(--tribbo-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Rankings
   ═══════════════════════════════════════════════════════════════════════════ */

.ranking-row-me {
    background: #EEF2FF;
    font-weight: 600;
}

.medal-gold   { color: #F59E0B; }
.medal-silver { color: #9CA3AF; }
.medal-bronze { color: #B45309; }

/* ═══════════════════════════════════════════════════════════════════════════
   Badges de Dificultad
   ═══════════════════════════════════════════════════════════════════════════ */

.badge-facil     { background: var(--tribbo-success) !important; }
.badge-media     { background: var(--tribbo-warning) !important; color: #000 !important; }
.badge-dificil   { background: var(--tribbo-danger)  !important; }
.badge-calibrando{ background: #6B7280 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Flash Messages
   ═══════════════════════════════════════════════════════════════════════════ */

.flash-container {
    position: fixed;
    top: 72px; right: 1rem;
    z-index: 1055;
    min-width: 300px;
    max-width: 420px;
}

.flash-container .alert {
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Formularios
   ═══════════════════════════════════════════════════════════════════════════ */

.form-control:focus,
.form-select:focus {
    border-color: var(--tribbo-primary);
    box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .15);
}

.tribbo-field-error {
    color: #dc3545;
    font-size: .8rem;
    margin-top: .3rem;
    display: flex;
    align-items: center;
    gap: .15rem;
}

.has-error .form-control,
.has-error .form-select,
.has-error textarea {
    border-color: #dc3545;
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Auth pages
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-page {
    min-height: calc(100vh - 56px);
    background: linear-gradient(160deg, #F5F4FF 0%, #FFFFFF 55%);
}

.auth-card {
    border-radius: 20px;
    border: 1px solid var(--tribbo-border);
    box-shadow: 0 20px 50px rgba(30,27,75,.14);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hero (legacy — para vistas que aún lo usen)
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-tribbo {
    background: linear-gradient(135deg, var(--tribbo-dark), var(--tribbo-primary));
    color: #fff;
    padding: 1rem 0;
}

@media (max-width: 991.98px) {
    .hero-tribbo { padding: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Validación de formularios
   ═══════════════════════════════════════════════════════════════════════════ */

.has-error .form-control:focus,
.has-error .form-select:focus,
.has-error textarea:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 .25rem rgba(220,53,69,.25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Loading Overlay
   ═══════════════════════════════════════════════════════════════════════════ */

#loadingOverlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15,15,35,.52);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

#loadingOverlay.active {
    opacity: 1;
    pointer-events: all;
}

#loadingOverlay .lo-spinner {
    width: 3rem; height: 3rem;
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lo-spin .65s linear infinite;
}

@keyframes lo-spin { to { transform: rotate(360deg); } }

#loadingOverlay .lo-label {
    color: rgba(255,255,255,.9);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Bottom navigation bar (móvil, < lg)
   ═══════════════════════════════════════════════════════════════════════════ */

#bottomNav {
    display: flex;
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -1px 8px rgba(0,0,0,.08);
    z-index: 1030;
    background: #fff;
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #9CA3AF;
    text-decoration: none;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .02em;
    transition: color .15s ease;
    -webkit-tap-highlight-color: transparent;
    padding: 0 2px;
}

.bottom-nav-item i {
    font-size: 1.3rem;
    line-height: 1;
}

.bottom-nav-item.active { color: var(--tribbo-primary); }
.bottom-nav-item:not(.active):hover { color: #6B7280; }

@media (max-width: 991.98px) {
    main, footer {
        padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    }

    /* En móvil, los menús del navbar (perfil + superadmin) se anclan AMBOS al borde derecho
       del navbar (no cada uno a su toggle), para que caigan alineados y no se salgan por la
       izquierda. Bootstrap pone .dropdown{position:relative}, por eso hay que forzar el <li>
       a static: así el menú (absolute) se mide desde el container-fluid (relative), no desde
       el toggle. Se sobreescribe el posicionamiento inline de Popper con !important. */
    .navbar-tribbo .container-fluid { position: relative; }
    .navbar-tribbo .navbar-nav.ms-auto .nav-item.dropdown { position: static; }
    .navbar-tribbo .navbar-nav.ms-auto .dropdown-menu {
        position: absolute !important;
        top: calc(100% + .35rem) !important;
        right: .5rem !important;
        left: auto !important;
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sidebar (para vistas que lo usen, ej: admin)
   ═══════════════════════════════════════════════════════════════════════════ */

.sidebar-tribbo {
    min-height: calc(100vh - 56px);
    background: #fff;
    border-right: 1px solid var(--tribbo-border);
    padding: 1rem .75rem;
}

.sidebar-tribbo .nav-link {
    color: #4B5563;
    border-radius: 8px;
    margin-bottom: 2px;
    font-weight: 500;
    padding: .5rem .75rem;
}

.sidebar-tribbo .nav-link:hover,
.sidebar-tribbo .nav-link.active {
    background: #EEF2FF;
    color: var(--tribbo-primary);
}

.sidebar-tribbo .nav-link i { width: 22px; }

.sidebar-tribbo .section-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #9CA3AF;
    padding: .75rem .75rem .25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Estadísticas — chart placeholder / chart wrappers
   ═══════════════════════════════════════════════════════════════════════════ */

.chart-container {
    position: relative;
    width: 100%;
}

/* Fila de tabs (Resumen / Test / Tarjetas / Historial) */
.stats-tab-nav {
    display: flex;
    gap: .25rem;
    background: #F3F4F6;
    border-radius: 10px;
    padding: .25rem;
    margin-bottom: 1.25rem;
}

.stats-tab-nav .stn-item {
    flex: 1;
    text-align: center;
    padding: .45rem;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--tribbo-muted);
    text-decoration: none;
    transition: background .15s, color .15s;
}

.stats-tab-nav .stn-item.active,
.stats-tab-nav .stn-item:hover {
    background: #fff;
    color: var(--tribbo-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Actividad reciente (home + curso)
   ═══════════════════════════════════════════════════════════════════════════ */

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .55rem 0;
    border-bottom: 1px solid #F3F4F6;
}

.activity-item:last-child { border-bottom: none; }

.activity-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tribbo-primary), var(--tribbo-secondary));
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    font-size: .75rem;
}

.activity-text {
    font-size: .82rem;
    line-height: 1.4;
    color: var(--tribbo-text);
}

.activity-time {
    font-size: .7rem;
    color: var(--tribbo-muted);
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Utilidades generales
   ═══════════════════════════════════════════════════════════════════════════ */

/* Texto gradiente */
.text-gradient-primary {
    background: linear-gradient(90deg, var(--tribbo-primary), var(--tribbo-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fondo sutil para elementos destacados */
.bg-primary-soft  { background: #EEF2FF; }
.bg-success-soft  { background: #D1FAE5; }
.bg-warning-soft  { background: #FEF3C7; }
.bg-danger-soft   { background: #FEE2E2; }
.bg-info-soft     { background: #CFFAFE; }
.bg-purple-soft   { background: #EDE9FE; }

/* Container con max-width 1560px en pantallas grandes */
@media (min-width: 1400px) {
    .container,
    .container-xxl,
    .container-xl,
    .container-lg {
        max-width: 1560px;
    }
}

/* En pantallas muy estrechas, recortar el padding del container para no perder espacio útil.
   Las cards ya llevan su propio padding interno, así que el contenido no queda pegado. */
@media (max-width: 575.98px) {
    /* Lateral (Bootstrap deja .75rem por lado). */
    .container, .container-sm, .container-md {
        padding-left: .35rem;
        padding-right: .35rem;
    }
    /* Vertical: py-4 (1.5rem) es demasiado arriba/abajo en móvil; se baja en el container
       de página (no en py-4 de elementos internos). */
    .container.py-4, .container-fluid.py-4,
    .container.py-5, .container-fluid.py-5 {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important;
    }
}

/* nav-pills en móvil/tablet estrecha: en vez de envolverse en varias filas (queda
   desordenado), una sola fila que hace scroll horizontal (swipe). Aplica a todas las páginas
   (superadmin y demás). Se excluyen las verticales (.flex-column). */
@media (max-width: 767.98px) {
    .nav-pills:not(.flex-column) {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;              /* Firefox */
        -webkit-overflow-scrolling: touch;
    }
    .nav-pills:not(.flex-column)::-webkit-scrollbar { display: none; }
    .nav-pills:not(.flex-column) > .nav-item,
    .nav-pills:not(.flex-column) > li { flex: 0 0 auto; }
    .nav-pills:not(.flex-column) .nav-link { white-space: nowrap; }
}

/* ── Protección de contenido (preguntas/tarjetas) ──────────────────────────
   En las páginas de consumo (body.proteger-contenido) se desactiva la
   selección de texto para dificultar copiar el contenido. Disuasorio, no
   infalible. Los campos de formulario y el contenido editable quedan exentos. */
body.proteger-contenido {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none; /* iOS: sin menú de "copiar" al mantener pulsado */
}
body.proteger-contenido input,
body.proteger-contenido textarea,
body.proteger-contenido [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}