/* ── Área detail header ───────────────────────────────────── */
.lexia-area-detail__header {
    padding:    3rem 0;
    color:      #fff;
    margin-bottom: 0;
}
.lexia-area-detail__header h1 {
    color:      #fff;
    margin:     .5rem 0;
}
.lexia-area-detail__header p {
    color:      rgba(255,255,255,.85);
    font-size:  1.1rem;
    margin:     0;
}

/* ── Grid de temas ────────────────────────────────────────── */
.lexia-temas-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   1.5rem;
    padding-bottom:        3rem;
}

.lexia-tema-card {
    display:        flex;
    background:     #fff;
    border-radius:  12px;
    overflow:       hidden;
    box-shadow:     0 4px 20px rgba(0,0,0,.08);
    transition:     transform .2s, box-shadow .2s;
    text-decoration: none;
    color:          inherit;
}
.lexia-tema-card:hover {
    transform:  translateY(-4px);
    box-shadow: 0 8px 40px rgba(0,0,0,.15);
}

.lexia-tema-card__color {
    width:       8px;
    flex-shrink: 0;
}

.lexia-tema-card__body {
    padding: 1.25rem;
    flex:    1;
}

.lexia-tema-card__num {
    font-size:      .8rem;
    font-weight:    700;
    color:          var(--lexia-text-muted, #546e7a);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.lexia-tema-card__title {
    font-size:   1.1rem;
    margin:      .4rem 0 .5rem;
    color:       var(--lexia-primary, #1a237e);
    font-family: var(--lexia-font-serif, Georgia, serif);
}

.lexia-tema-card__desc {
    font-size: .9rem;
    color:     var(--lexia-text-muted, #546e7a);
    margin:    0 0 .75rem;
}

.lexia-tema-card__meta {
    font-size:  .8rem;
    color:      var(--lexia-text-muted, #546e7a);
    padding-top: .5rem;
    border-top:  1px solid #eee;
}

/* ── Tema detail hero ─────────────────────────────────────── */
.lexia-tema-hero {
    padding: 3rem 0;
    color:   #fff;
}
.lexia-tema-hero h1 { color: #fff; margin: .75rem 0; }
.lexia-tema-hero p  { color: rgba(255,255,255,.85); }

.lexia-back-link {
    color:           rgba(255,255,255,.8);
    font-size:       .9rem;
    text-decoration: none;
    display:         inline-block;
    margin-bottom:   1rem;
}
.lexia-back-link:hover { color: #fff; }

/* ── Secciones de contenido ───────────────────────────────── */
.lexia-contenido-seccion {
    margin-bottom: 2.5rem;
}

.lexia-contenido-seccion__titulo {
    display:       flex;
    align-items:   center;
    gap:           .5rem;
    font-size:     1.2rem;
    padding-bottom:.75rem;
    border-bottom: 2px solid var(--lexia-primary, #1a237e);
    margin-bottom: 1rem;
    color:         var(--lexia-primary, #1a237e);
}

.lexia-contenido-seccion__count {
    background:    var(--lexia-primary, #1a237e);
    color:         #fff;
    font-size:     .75rem;
    padding:       .1rem .5rem;
    border-radius: 50px;
    font-weight:   700;
}

.lexia-contenido-lista {
    display:        flex;
    flex-direction: column;
    gap:            .75rem;
}

.lexia-contenido-item {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    gap:           1rem;
    padding:       1rem 1.25rem;
    background:    #fff;
    border-radius: 8px;
    box-shadow:    0 2px 8px rgba(0,0,0,.06);
}

.lexia-contenido-item__info strong {
    display:     block;
    color:       var(--lexia-text, #1a1a2e);
    margin-bottom: .25rem;
}

.lexia-contenido-item__info p {
    font-size: .9rem;
    color:     var(--lexia-text-muted, #546e7a);
    margin:    0 0 .25rem;
}

.lexia-contenido-item__dur {
    font-size: .8rem;
    color:     var(--lexia-text-muted, #546e7a);
}

/* ── Login msg ────────────────────────────────────────────── */
.lexia-login-msg {
    text-align:  center;
    padding:     3rem;
    font-size:   1.1rem;
    color:       var(--lexia-text-muted, #546e7a);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .lexia-temas-grid {
        grid-template-columns: 1fr;
    }
    .lexia-contenido-item {
        flex-direction: column;
        align-items:    flex-start;
    }
}