/* ==========================================================================
   Teducas — Widget Info de Curso (Tutor LMS)
   Palette: Deep Black #0a0a0a · Warm Gold #c9a84c · Ivory #f5f0e8 · Charcoal #1a1a1a
   ========================================================================== */

/* ─── Variables ───────────────────────────────────────────────────────────── */
.tinfo-wrapper {
    --tinfo-gold:         #c9a84c;
    --tinfo-gold-light:   #e2c97e;
    --tinfo-gold-dim:     rgba(201, 168, 76, 0.18);
    --tinfo-gold-glow:    rgba(201, 168, 76, 0.08);
    --tinfo-ivory:        #f5f0e8;
    --tinfo-ivory-dim:    #f0ece4;
    --tinfo-text:         #d4cfc7;
    --tinfo-muted:        #a09a90;
    --tinfo-dark:         #111111;
    --tinfo-charcoal:     #1a1a1a;
    --tinfo-border:       rgba(201, 168, 76, 0.18);
    --tinfo-border-soft:  rgba(255, 255, 255, 0.06);
    --tinfo-radius:       10px;
    --tinfo-font-serif:   'Lora', Georgia, serif;
    --tinfo-font-sans:    'Poppins', sans-serif;
    --tinfo-transition:   all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    font-family: var(--tinfo-font-sans);
    color: var(--tinfo-text);
    position: relative;
}

/* ─── Variantes de box ────────────────────────────────────────────────────── */

/* Sin fondo */
.tinfo-box--plain {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
}

/* Borde dorado sutil (default) */
.tinfo-box--bordered {
    background: transparent;
    border: 1px solid var(--tinfo-border);
    border-radius: var(--tinfo-radius);
    padding: 32px;
}

/* Fondo oscuro */
.tinfo-box--dark {
    background: var(--tinfo-charcoal);
    border: 1px solid var(--tinfo-border-soft);
    border-radius: var(--tinfo-radius);
    padding: 32px;
}

/* Glass / frosted */
.tinfo-box--glass {
    background: rgba(26, 26, 26, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--tinfo-border);
    border-radius: var(--tinfo-radius);
    padding: 32px;
}

/* ─── Línea de acento superior ────────────────────────────────────────────── */
.tinfo--accent-top::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--tinfo-gold) 40%, var(--tinfo-gold-light) 60%, transparent 100%);
    border-radius: var(--tinfo-radius) var(--tinfo-radius) 0 0;
    pointer-events: none;
}

.tinfo-box--plain.tinfo--accent-top::before {
    display: none;
}

/* ─── Cabecera ────────────────────────────────────────────────────────────── */
.tinfo-header {
    margin-bottom: 24px;
}

/* Ícono decorativo de cabecera */
.tinfo-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--tinfo-gold-glow);
    border: 1px solid var(--tinfo-gold-dim);
    border-radius: 10px;
    margin-bottom: 16px;
    color: var(--tinfo-gold);
}

.tinfo-header-icon i {
    font-size: 22px;
    color: var(--tinfo-gold);
}

.tinfo-header-icon svg {
    width: 22px;
    height: 22px;
    fill: var(--tinfo-gold);
}

/* Etiqueta sobre el título */
.tinfo-header-tag {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tinfo-gold);
    margin-bottom: 8px;
}

/* Título */
.tinfo-header-title {
    font-family: var(--tinfo-font-serif);
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 600;
    color: var(--tinfo-ivory-dim);
    margin: 0 0 10px;
    line-height: 1.25;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

/* Badge con conteo de ítems */
.tinfo-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    background: var(--tinfo-gold-glow);
    border: 1px solid var(--tinfo-gold-dim);
    border-radius: 100px;
    font-family: var(--tinfo-font-sans);
    font-size: 11px;
    font-weight: 700;
    color: var(--tinfo-gold);
    line-height: 1;
    vertical-align: middle;
}

/* Descripción de cabecera */
.tinfo-header-desc {
    font-size: 14px;
    color: var(--tinfo-muted);
    margin: 0;
    line-height: 1.65;
    max-width: 600px;
}

/* ─── Lista vertical ──────────────────────────────────────────────────────── */
.tinfo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ─── Grilla ──────────────────────────────────────────────────────────────── */
.tinfo-grid {
    display: grid;
    gap: 12px;
}

.tinfo-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.tinfo-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
    .tinfo-grid--2,
    .tinfo-grid--3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .tinfo-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─── Ítem base ───────────────────────────────────────────────────────────── */
.tinfo-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: var(--tinfo-transition);
}

.tinfo-item-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.tinfo-item-icon i {
    font-size: 15px;
    color: var(--tinfo-gold);
    line-height: 1;
}

.tinfo-item-icon svg {
    width: 15px;
    height: 15px;
    fill: var(--tinfo-gold);
}

.tinfo-item-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 11px;
    font-weight: 700;
    color: var(--tinfo-gold);
    border: 1px solid var(--tinfo-gold-dim);
    border-radius: 50%;
    background: var(--tinfo-gold-glow);
    flex-shrink: 0;
}

.tinfo-item-text {
    font-size: 14px;
    color: var(--tinfo-text);
    line-height: 1.55;
    flex: 1;
}

/* ─── Estilo: icon_text (default) ────────────────────────────────────────── */
.tinfo-style--icon_text .tinfo-item {
    /* comportamiento base (ya definido arriba) */
}

/* ─── Estilo: card ────────────────────────────────────────────────────────── */
.tinfo-style--card .tinfo-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tinfo-border-soft);
    border-radius: 8px;
    padding: 14px 16px;
    transition: border-color var(--tinfo-transition), background var(--tinfo-transition);
}

.tinfo-style--card .tinfo-item:hover {
    background: var(--tinfo-gold-glow);
    border-color: var(--tinfo-gold-dim);
}

/* ─── Estilo: pill / badge ────────────────────────────────────────────────── */
.tinfo-list.tinfo-style--pill,
.tinfo-grid.tinfo-style--pill {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.tinfo-style--pill .tinfo-item {
    align-items: center;
    background: var(--tinfo-gold-glow);
    border: 1px solid var(--tinfo-gold-dim);
    border-radius: 100px;
    padding: 6px 14px;
    gap: 8px;
    display: inline-flex;
    width: auto;
}

.tinfo-style--pill .tinfo-item-text {
    font-size: 13px;
    font-weight: 500;
}

/* ─── Estilo: line ────────────────────────────────────────────────────────── */
.tinfo-style--line .tinfo-item {
    border-bottom: 1px solid var(--tinfo-border-soft);
    padding-bottom: 12px;
}

.tinfo-style--line .tinfo-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* ─── Fallback vacío ──────────────────────────────────────────────────────── */
.tinfo-empty {
    font-size: 14px;
    color: var(--tinfo-muted);
    font-style: italic;
    margin: 0;
}

/* ─── Curriculum — Acordeón ───────────────────────────────────────────────── */
.tinfo-curriculum-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--tinfo-border);
    border-radius: var(--tinfo-radius);
    overflow: hidden;
}

/* ── Bloque de tema ── */
.tinfo-topic {
    border-bottom: 1px solid var(--tinfo-border);
}

.tinfo-topic:last-child {
    border-bottom: none;
}

/* ── Header (botón de toggle) ── */
.tinfo-topic-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.02);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.22s ease;
    color: var(--tinfo-ivory-dim);
    font-family: var(--tinfo-font-sans);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
}

.tinfo-topic-header:hover {
    background: var(--tinfo-gold-glow);
}

.tinfo-topic.is-open > .tinfo-topic-header {
    background: var(--tinfo-gold-glow);
    color: var(--tinfo-ivory);
}

/* Ícono / número del tema */
.tinfo-topic-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f0ece4 !important;
}

.tinfo-topic-icon i,
.tinfo-topic-icon svg {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: #f0ece4 !important;
    fill: none;
    stroke: #f0ece4 !important ;
}

/* Título del tema — ocupa todo el espacio disponible */
.tinfo-topic-title {
    flex: 1;
    min-width: 0;
}

/* Badge conteo */
.tinfo-topic-count {
    flex-shrink: 0;
    font-family: var(--tinfo-font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tinfo-muted);
    background: var(--tinfo-gold-glow);
    border: 1px solid var(--tinfo-gold-dim);
    border-radius: 100px;
    padding: 3px 9px;
    line-height: 1;
    white-space: nowrap;
}

/* Chevron */
.tinfo-topic-chevron {
    flex-shrink: 0;
    color: var(--tinfo-gold);
    opacity: 0.75;
    stroke: var(--tinfo-gold);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tinfo-topic.is-open > .tinfo-topic-header .tinfo-topic-chevron {
    transform: rotate(180deg);
}

/* ── Cuerpo colapsable ── */
.tinfo-topic-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--tinfo-dark);
}

.tinfo-topic.is-open > .tinfo-topic-body {
    max-height: 2000px;
}

/* ── Lista de lecciones dentro del body ── */
.tinfo-lessons-list {
    list-style: none;
    margin: 0;
    padding: 6px 0 6px;
}

.tinfo-lesson {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px 9px 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.18s ease;
}

.tinfo-lesson:last-child {
    border-bottom: none;
}

.tinfo-lesson:hover {
    background: rgba(201, 168, 76, 0.04);
}

/* Ícono de lección/quiz */
.tinfo-lesson-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--tinfo-muted);
}

.tinfo-lesson-icon svg {
    fill: none;
    stroke: currentColor;
}

.tinfo-lesson--quiz .tinfo-lesson-icon {
    color: var(--tinfo-gold);
    opacity: 0.8;
}

/* Título de la lección */
.tinfo-lesson-title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--tinfo-text);
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badge tipo (Lección / Quiz) */
.tinfo-lesson-type {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinfo-muted);
    white-space: nowrap;
}

.tinfo-lesson--quiz .tinfo-lesson-type {
    color: var(--tinfo-gold);
    opacity: 0.85;
}

/* ─── Curriculum: badge de conteo de lecciones (lista plana — legado) ───── */
.tinfo-item--curriculum {
    justify-content: space-between;
}

.tinfo-item-meta {
    flex-shrink: 0;
    font-family: var(--tinfo-font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tinfo-muted);
    background: var(--tinfo-gold-glow);
    border: 1px solid var(--tinfo-gold-dim);
    border-radius: 100px;
    padding: 3px 9px;
    line-height: 1;
    white-space: nowrap;
    margin-left: auto;
}

.tinfo-item--curriculum .tinfo-item-text {
    flex: 1;
    padding-right: 8px;
}