/* ============================================================
   ESTILOS DEL LIBRO COMERCIAL — ARCHIVO ÚNICO DEL MÓDULO

   Todo el CSS de .lc-*, .theme-* y .temario-* vive aquí. Antes estaba
   partido entre este archivo y static/css/style.css, con 41 selectores
   declarados en los dos: cuál ganaba dependía del orden de los <link>
   del index.html, no de ninguna decisión.

   ORDEN IMPORTANTE: el bloque migrado desde style.css va PRIMERO y el
   contenido propio de libro.css va DESPUÉS, que es exactamente el orden
   en que se aplicaban antes (style.css cargaba antes que libro.css).
   Así la consolidación no cambia ni un píxel del resultado.
   ============================================================ */


/* ============================================================
   MIGRADO DESDE static/css/style.css (bloque "NIVEL 2: PROGRAMAS Y
   TEMARIOS", líneas 3106-4878 del original).
   ============================================================ */

/* NIVEL 2: PROGRAMAS Y TEMARIOS - DISEÑO PROFESIONAL DE ALTA GAMA
   ============================================================ */

/* TEMAS Y PALETAS DE COLOR POR ÁREA */
.theme-belleza {
    --area-accent: #e11d48;
    --area-accent-subtle: rgba(225, 29, 72, 0.08);
    --area-accent-border: rgba(225, 29, 72, 0.25);
    --area-gradient: linear-gradient(135deg, #ffffff 0%, #fff1f2 60%, #ffe4e6 100%);
    --area-banner-border: #e11d48;
}

.theme-fisioterapia {
    --area-accent: #0284c7;
    --area-accent-subtle: rgba(2, 132, 199, 0.08);
    --area-accent-border: rgba(2, 132, 199, 0.25);
    --area-gradient: linear-gradient(135deg, #ffffff 0%, #f0f9ff 60%, #e0f2fe 100%);
    --area-banner-border: #0284c7;
}

.theme-salud {
    --area-accent: #059669;
    --area-accent-subtle: rgba(5, 150, 105, 0.08);
    --area-accent-border: rgba(5, 150, 105, 0.25);
    --area-gradient: linear-gradient(135deg, #ffffff 0%, #ecfdf5 60%, #d1fae5 100%);
    --area-banner-border: #059669;
}

.theme-emprendimiento {
    --area-accent: #d97706;
    --area-accent-subtle: rgba(217, 119, 6, 0.08);
    --area-accent-border: rgba(217, 119, 6, 0.25);
    --area-gradient: linear-gradient(135deg, #ffffff 0%, #fffbeb 60%, #fef3c7 100%);
    --area-banner-border: #d97706;
}

/* HEADER DEL ÁREA SELECCIONADA */
.lc-area-detail-header {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 4px solid var(--area-banner-border, #002D62);
    border-radius: 18px;
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(0, 45, 98, 0.05);
    position: relative;
    transition: all 0.3s ease;
}

/* BARRA SUPERIOR DE NAVEGACIÓN Y SELECTOR RÁPIDO */
.lc-area-nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.lc-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    color: #002D62;
    border: 1px solid #cbd5e1;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.88em;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.lc-btn-back:hover {
    background: #002D62;
    color: #ffffff;
    border-color: #002D62;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 45, 98, 0.2);
}

.lc-back-arrow {
    font-size: 1.1em;
    transition: transform 0.2s ease;
}

.lc-btn-back:hover .lc-back-arrow {
    transform: translateX(-3px);
}

/* SELECTOR RÁPIDO DE ÁREAS (SWITCHER PILLS) */
.lc-area-quick-switcher {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lc-switcher-label {
    font-size: 0.82em;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lc-switcher-pills {
    display: flex;
    gap: 6px;
    background: #f8fafc;
    padding: 4px;
    border-radius: 30px;
    border: 1px solid #e2e8f0;
}

.lc-switch-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid transparent;
    background: transparent;
    color: #334155;
    font-size: 0.84em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lc-switch-pill:hover {
    background: #ffffff;
    color: #002D62;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.lc-switch-pill.active {
    background: #002D62;
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 3px 10px rgba(0, 45, 98, 0.25);
    border-color: #002D62;
}

.lc-switch-pill.active span {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* TÍTULO Y BANNER DE ÁREA */
.lc-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap: 16px;
}

.lc-title-info {
    flex: 1;
    min-width: 280px;
}

.lc-area-badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--area-accent-subtle, rgba(0, 45, 98, 0.08));
    color: var(--area-accent, #002D62);
    border: 1px solid var(--area-accent-border, rgba(0, 45, 98, 0.2));
    font-size: 0.74em;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.lc-area-title-text {
    font-size: 2em;
    font-weight: 900;
    color: #002D62;
    margin: 0 0 6px 0;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.lc-area-desc-text {
    font-size: 0.94em;
    color: #475569;
    margin: 0;
    line-height: 1.55;
    max-width: 820px;
    font-weight: 500;
}

/* BARRA DE BÚSQUEDA Y FILTROS */
.lc-filter-row {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    background: #f8fafc;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.lc-search-input-wrap {
    flex: 1.4;
    min-width: 260px;
    position: relative;
}

.lc-search-input-wrap .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.05em;
    opacity: 0.6;
    pointer-events: none;
}

#lc-search-box {
    width: 100%;
    padding: 10px 38px 10px 40px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

#lc-search-box:focus {
    outline: none;
    border-color: #002D62;
    box-shadow: 0 0 0 3px rgba(0, 45, 98, 0.12);
}

.lc-search-clear-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: #cbd5e1;
    color: #334155;
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.lc-search-clear-btn:hover {
    background: #002D62;
    color: #ffffff;
}

.lc-filter-tabs {
    display: flex;
    gap: 6px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 10px;
}

.lc-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #475569;
    font-size: 0.85em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.lc-tab:hover {
    background: rgba(255, 255, 255, 0.6);
    color: #002D62;
}

.lc-tab.active {
    background: #002D62;
    color: #ffffff;
    border-color: #002D62;
    box-shadow: 0 2px 8px rgba(0, 45, 98, 0.25);
}

.lc-tab-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    padding: 2px 7px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 900;
}

.lc-tab:not(.active) .lc-tab-count {
    background: #cbd5e1;
    color: #334155;
}

.lc-results-counter {
    font-size: 0.82em;
    font-weight: 700;
    color: #64748b;
    padding: 0 6px;
    white-space: nowrap;
}

/* GRID DE PROGRAMAS */
.lc-programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 24px;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .lc-programs-grid {
        grid-template-columns: 1fr;
    }
}

/* TARJETA DE PROGRAMA (PROGRAM CARD) */
.lc-program-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(0, 45, 98, 0.05);
    position: relative;
    text-align: left;
    outline: none;
}

.lc-program-card:hover,
.lc-program-card:focus-visible {
    transform: translateY(-6px);
    border-color: #FFC300;
    box-shadow: 0 16px 32px rgba(0, 45, 98, 0.12), 0 4px 12px rgba(255, 195, 0, 0.2);
}

.lc-pcard-media {
    position: relative;
    width: 100%;
    height: 190px;
    background: #0f172a;
    overflow: hidden;
}

.lc-pcard-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.lc-program-card:hover .lc-pcard-img {
    transform: scale(1.06);
}

/* PLACEHOLDER ILUSTRADO DE ALTA GAMA */
.lc-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 16px;
    box-sizing: border-box;
    text-align: center;
}

.lc-img-placeholder.theme-belleza {
    background: linear-gradient(135deg, #881337 0%, #be123c 50%, #4c0519 100%);
    color: #ffffff;
}

.lc-img-placeholder.theme-fisioterapia {
    background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 50%, #082f49 100%);
    color: #ffffff;
}

.lc-img-placeholder.theme-salud {
    background: linear-gradient(135deg, #064e3b 0%, #047857 50%, #022c22 100%);
    color: #ffffff;
}

.lc-img-placeholder.theme-emprendimiento {
    background: linear-gradient(135deg, #78350f 0%, #b45309 50%, #451a03 100%);
    color: #ffffff;
}

.lc-ph-watermark {
    position: absolute;
    font-size: 4.5em;
    font-weight: 900;
    opacity: 0.08;
    color: #ffffff;
    letter-spacing: 6px;
    user-select: none;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lc-ph-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    opacity: 0.6;
    pointer-events: none;
}

.lc-ph-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    max-width: 90%;
    text-align: center;
}

.lc-ph-icon {
    font-size: 2.8em;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
    margin-bottom: 2px;
}

.lc-ph-subtitle {
    font-size: 0.82em;
    font-weight: 900;
    color: #FFC300;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.lc-ph-tagline {
    font-size: 0.72em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.3px;
}

/* BADGES FLOTANTES SOBRE LA IMAGEN */
.lc-pcard-floating-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    z-index: 3;
}

.lc-pcard-badge-type {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.74em;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    backdrop-filter: blur(4px);
}

.lc-pcard-badge-type.curso {
    background: #002D62;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.lc-pcard-badge-type.taller {
    background: #d97706;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.lc-pcard-badge-code {
    background: rgba(15, 23, 42, 0.85);
    color: #FFC300;
    font-size: 0.78em;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid #FFC300;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    backdrop-filter: blur(4px);
    font-family: monospace;
}

.lc-quick-upload-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 45, 98, 0.88);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.74em;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
    backdrop-filter: blur(6px);
    z-index: 5;
}

.lc-quick-upload-btn:hover {
    background: #27ae60;
    border-color: #27ae60;
    transform: scale(1.05);
}

/* CUERPO DE LA TARJETA */
.lc-pcard-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #ffffff;
}

.lc-pcard-meta-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 8px;
    flex-wrap: wrap;
}

.lc-pcard-duration-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f1f5f9;
    color: #002D62;
    border: 1px solid #e2e8f0;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78em;
    font-weight: 800;
}

.lc-pcard-tag-mod {
    font-size: 0.72em;
    font-weight: 700;
    color: #64748b;
}

.lc-pcard-title {
    font-size: 1.15em;
    font-weight: 900;
    color: #002D62;
    margin: 0 0 8px 0;
    line-height: 1.35;
    min-height: 48px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.2px;
}

.lc-pcard-desc {
    font-size: 0.86em;
    line-height: 1.5;
    color: #475569;
    margin: 0 0 14px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.lc-pcard-aparatologia {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #002D62;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.78em;
    line-height: 1.4;
}

.lc-apa-icon {
    font-size: 1.1em;
    flex-shrink: 0;
    margin-top: 1px;
}

.lc-apa-content {
    flex: 1;
}

.lc-apa-label {
    font-weight: 800;
    color: #002D62;
    display: block;
    margin-bottom: 2px;
}

.lc-apa-text {
    color: #334155;
    font-weight: 600;
}

/* FOOTER ACTION BUTTON */
.lc-pcard-footer-action {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.lc-pcard-cta-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 800;
    font-size: 0.88em;
    color: #002D62;
    transition: color 0.2s ease;
}

.lc-program-card:hover .lc-pcard-cta-text {
    color: #b45309;
}

.lc-cta-arrow {
    font-size: 1.2em;
    transition: transform 0.25s ease;
    color: #FFC300;
    font-weight: 900;
}

.lc-program-card:hover .lc-cta-arrow {
    transform: translateX(4px);
}

.lc-pcard-admin-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #cbd5e1;
}

.btn-lc-edit {
    flex: 1;
    background: rgba(241, 196, 15, 0.15);
    color: #b45309;
    border: 1px solid rgba(241, 196, 15, 0.5);
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 0.8em;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-lc-edit:hover {
    background: #f59e0b;
    color: #ffffff;
}

.btn-lc-delete {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.4);
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 0.8em;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-lc-delete:hover {
    background: #dc2626;
    color: #ffffff;
}

/* EMPTY STATE */
.lc-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 24px;
    background: #ffffff;
    border-radius: 16px;
    border: 1.5px dashed #cbd5e1;
    box-shadow: 0 4px 16px rgba(0, 45, 98, 0.04);
}

.lc-empty-icon {
    font-size: 3.5em;
    margin-bottom: 12px;
}

.lc-empty-title {
    font-size: 1.35em;
    font-weight: 900;
    color: #002D62;
    margin: 0 0 8px 0;
}

.lc-empty-subtitle {
    font-size: 0.92em;
    color: #64748b;
    max-width: 480px;
    margin: 0 auto 20px auto;
    line-height: 1.5;
}

.lc-empty-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    padding: 10px 20px;
    border-radius: 8px;
    background: #002D62;
    color: #ffffff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 45, 98, 0.2);
    transition: all 0.2s ease;
}

.lc-empty-reset-btn:hover {
    background: #001e42;
    transform: translateY(-2px);
}

/* SOPORTE DE TEMA OSCURO PARA EL LIBRO COMERCIAL */
[data-theme="dark"] .lc-view-wrapper {
    background: linear-gradient(180deg, #090e17 0%, #0d1527 40%, #0f1c36 75%, #081122 100%);
}

[data-theme="dark"] .lc-hero-banner {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-color: #334155;
}

[data-theme="dark"] .lc-hero-title {
    color: #ffffff;
}

[data-theme="dark"] .lc-hero-subtitle {
    color: #cbd5e1;
}

[data-theme="dark"] .lc-area-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .lc-card-body {
    background: #1e293b;
}

[data-theme="dark"] .lc-area-name {
    color: #ffffff;
}

[data-theme="dark"] .lc-area-desc {
    color: #94a3b8;
}

[data-theme="dark"] .lc-area-detail-header {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .lc-area-title-text {
    color: #ffffff;
}

[data-theme="dark"] .lc-area-desc-text {
    color: #94a3b8;
}

[data-theme="dark"] .lc-filter-row {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] #lc-search-box {
    background: #1e293b;
    color: #ffffff;
    border-color: #475569;
}

[data-theme="dark"] .lc-btn-back {
    background: #0f172a;
    color: #ffffff;
    border-color: #334155;
}

[data-theme="dark"] .lc-btn-back:hover {
    background: #FFC300;
    color: #002D62;
    border-color: #FFC300;
}

[data-theme="dark"] .lc-switcher-pills {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .lc-switch-pill {
    color: #cbd5e1;
}

[data-theme="dark"] .lc-switch-pill:hover {
    background: #1e293b;
    color: #ffffff;
}

[data-theme="dark"] .lc-switch-pill.active {
    background: #FFC300;
    color: #002D62;
    border-color: #FFC300;
}

[data-theme="dark"] .lc-filter-tabs {
    background: #0f172a;
}

[data-theme="dark"] .lc-tab {
    color: #cbd5e1;
}

[data-theme="dark"] .lc-tab.active {
    background: #FFC300;
    color: #002D62;
    border-color: #FFC300;
}

[data-theme="dark"] .lc-program-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .lc-pcard-body {
    background: #1e293b;
}

[data-theme="dark"] .lc-pcard-title {
    color: #ffffff;
}

[data-theme="dark"] .lc-pcard-desc {
    color: #94a3b8;
}

[data-theme="dark"] .lc-pcard-duration-chip {
    background: #0f172a;
    color: #FFC300;
    border-color: #334155;
}

[data-theme="dark"] .lc-pcard-aparatologia {
    background: #0f172a;
    border-color: #334155;
    border-left-color: #FFC300;
}

[data-theme="dark"] .lc-apa-label {
    color: #FFC300;
}

[data-theme="dark"] .lc-apa-text {
    color: #cbd5e1;
}

[data-theme="dark"] .lc-pcard-cta-text {
    color: #FFC300;
}

[data-theme="dark"] .temario-formatted-wrapper {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .temario-session-header {
    color: #ffffff;
}

[data-theme="dark"] .temario-item-text {
    color: #cbd5e1;
}

/* ============================================================
   ESTILOS: GESTOR PROFESIONAL DE IMÁGENES Y GALERÍA MULTIMEDIA (MIDNIGHT NAVY & GOLD INSTITUCIONAL)
   ============================================================ */
#modal-lc-program-detail {
    z-index: 100010 !important;
}

#modal-lc-editor {
    z-index: 100020 !important;
}

#modal-lc-image-manager {
    z-index: 100060 !important;
}

#modal-lc-crop-image {
    z-index: 100090 !important;
}

.lc-img-mgr-layout {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 18px;
    align-items: stretch;
}

@media (max-width: 768px) {
    .lc-img-mgr-layout {
        grid-template-columns: 1fr;
    }
}

/* COLUMNA IZQUIERDA: SUBIDA Y DROPZONE COMPACTA CON WATERMARK */
.lc-img-mgr-upload-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lc-meta-dropzone {
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 22px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lc-meta-dropzone:hover,
.lc-meta-dropzone.dragover {
    background: rgba(0, 31, 77, 0.04);
    border-color: #001f4d;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 31, 77, 0.08);
}

.lc-meta-dropzone-icon {
    font-size: 2.3em;
    margin-bottom: 6px;
    line-height: 1;
    color: #001f4d;
}

.lc-meta-dropzone-title {
    font-size: 0.92em;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
}

.lc-meta-dropzone-link {
    color: #001f4d;
    text-decoration: underline;
    font-weight: 800;
}

/* MARCA DE AGUA INTEGRADA CON ESPECIFICACIONES DE DISEÑO */
.lc-meta-dropzone-specs {
    background: rgba(0, 31, 77, 0.05);
    border: 1px solid rgba(0, 31, 77, 0.12);
    border-radius: 8px;
    padding: 7px 10px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.72em;
    color: #334155;
    font-weight: 600;
    margin-bottom: 14px;
    pointer-events: none;
}

.lc-meta-btn-select {
    background: #001f4d;
    color: #ffffff;
    border: none;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 0.85em;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 31, 77, 0.25);
    transition: all 0.2s ease;
    width: 100%;
}

.lc-meta-btn-select:hover {
    background: #001433;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0, 31, 77, 0.35);
}

/* INPUT URL COMPACTO */
.lc-meta-url-box {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
    padding: 2px;
    transition: border-color 0.2s ease;
}

.lc-meta-url-box:focus-within {
    border-color: #001f4d;
    box-shadow: 0 0 0 3px rgba(0, 31, 77, 0.1);
}

.lc-meta-url-box input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 10px;
    font-size: 0.82em;
    color: #0f172a;
    outline: none;
    min-width: 0;
}

.lc-meta-url-box button {
    background: #001f4d;
    color: #FFC300;
    border: none;
    padding: 7px 14px;
    font-size: 0.78em;
    font-weight: 800;
    cursor: pointer;
    border-radius: 6px;
    margin-right: 2px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.lc-meta-url-box button:hover {
    background: #FFC300;
    color: #001f4d;
}

/* COLUMNA DERECHA: GALERÍA DE FOTOS */
.lc-img-mgr-gallery-col {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    min-height: 310px;
}

.lc-meta-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.lc-meta-gallery-counter {
    background: rgba(0, 31, 77, 0.08);
    color: #001f4d;
    font-size: 0.76em;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 12px;
    border: 1px solid rgba(0, 31, 77, 0.15);
}

.lc-meta-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 12px;
    max-height: 270px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}

/* CARD DE FOTO EN GALERÍA */
.lc-meta-photo-card {
    position: relative;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.lc-meta-photo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 31, 77, 0.12);
}

.lc-meta-photo-card.is-main {
    border-color: #FFC300;
    box-shadow: 0 0 0 2px #FFC300, 0 6px 18px rgba(255, 195, 0, 0.3);
}

.lc-meta-photo-thumb-wrap {
    position: relative;
    width: 100%;
    height: 80px;
    background: #0f172a;
    overflow: hidden;
}

.lc-meta-photo-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Portada institucional de la miniatura del gestor.

   Antes, cuando una foto no cargaba, el onerror inline se limitaba a ocultar la
   <img> y la tarjeta quedaba EN BLANCO conservando el badge "PORTADA" y el botón
   de borrar: un hueco vacío marcado como portada, que es justo la pantalla que
   desconcierta a quien la ve. Ahora hay algo que mirar y que explica el estado. */
.lc-img-placeholder.lc-meta-photo-ph {
    position: absolute;
    inset: 0;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #94a3b8;
}

.lc-img-placeholder.lc-meta-photo-ph .lc-ph-subtitle {
    font-size: 0.62em;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
}

.lc-meta-main-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #FFC300;
    color: #001f4d;
    font-size: 0.64em;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 2;
    letter-spacing: 0.4px;
}

.lc-meta-delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(225, 29, 72, 0.9);
    color: #ffffff;
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
    z-index: 2;
}

.lc-meta-delete-btn:hover {
    background: #e11d48;
    transform: scale(1.15);
}

.lc-meta-photo-actions {
    padding: 6px;
    background: #ffffff;
}

.lc-meta-btn-set-cover {
    width: 100%;
    padding: 5px 6px;
    font-size: 0.7em;
    font-weight: 800;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #f1f5f9;
    color: #001f4d;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.lc-meta-photo-card.is-main .lc-meta-btn-set-cover {
    background: #001f4d;
    color: #FFC300;
    border-color: #001f4d;
}

.lc-meta-btn-set-cover:hover {
    background: #FFC300;
    color: #001f4d;
    border-color: #FFC300;
}

.lc-meta-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 45px 15px;
    color: #94a3b8;
}

/* ============================================================
   ESTILOS DE MODAL ENCUADRADOR / CROPPER 16:9 INTERACTIVO
   ============================================================ */
#modal-lc-crop-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 100150 !important;
}

#modal-lc-crop-image.hidden {
    display: none !important;
}

.lc-crop-viewport {
    background-image: 
        linear-gradient(45deg, #1e293b 25%, transparent 25%), 
        linear-gradient(-45deg, #1e293b 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #1e293b 75%), 
        linear-gradient(-45deg, transparent 75%, #1e293b 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.lc-crop-viewport.is-dragging {
    cursor: grabbing !important;
}

.lc-crop-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: #FFC300;
    border-style: solid;
    pointer-events: none;
}

.lc-crop-corner.top-left {
    top: -2px;
    left: -2px;
    border-width: 3px 0 0 3px;
    border-top-left-radius: 6px;
}

.lc-crop-corner.top-right {
    top: -2px;
    right: -2px;
    border-width: 3px 3px 0 0;
    border-top-right-radius: 6px;
}

.lc-crop-corner.bottom-left {
    bottom: -2px;
    left: -2px;
    border-width: 0 0 3px 3px;
    border-bottom-left-radius: 6px;
}

.lc-crop-corner.bottom-right {
    bottom: -2px;
    right: -2px;
    border-width: 0 3px 3px 0;
    border-bottom-right-radius: 6px;
}

.lc-crop-rule-line-h {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
    border-top: 1px dashed rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.lc-crop-rule-line-h.h1 { top: 33.333%; }
.lc-crop-rule-line-h.h2 { top: 66.666%; }

.lc-crop-rule-line-v {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.25);
    border-left: 1px dashed rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.lc-crop-rule-line-v.v1 { left: 33.333%; }
.lc-crop-rule-line-v.v2 { left: 66.666%; }

.lc-crop-tool-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.lc-crop-tool-btn:hover {
    background: #002D62;
    border-color: #FFC300;
    color: #FFC300;
    transform: translateY(-1px);
}

.lc-crop-tool-btn:active {
    transform: translateY(0);
}

/* ============================================================
   ESTILOS DE PESTAÑAS Y MODAL EDITOR DE PROGRAMA (SPLIT-VIEW & LIVE CARD PREVIEW)
   ============================================================ */
.lc-pro-editor-window {
    background: #ffffff;
    border-radius: 14px;
}

.lc-split-editor-modal {
    max-height: 94vh;
}

.lc-editor-split-body {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f8fafc;
}

.lc-editor-preview-column {
    position: sticky;
    top: 0;
    align-self: flex-start;
}

.lc-live-card-container {
    perspective: 1000px;
}

.lc-live-card-container .lc-program-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    border-radius: 12px;
}

.lc-live-card-container .lc-program-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 31, 77, 0.16) !important;
}

/* Selector Visual de Tipo de Programa (Curso vs Taller) */
.lc-type-card-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    outline: none;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.lc-type-card-btn:hover {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.lc-type-card-btn.active {
    background: #ffffff;
    border-color: #001f4d;
    box-shadow: 0 4px 12px rgba(0, 31, 77, 0.12);
}

.lc-type-card-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.lc-type-card-btn.active .lc-type-card-icon-wrap {
    background: rgba(0, 31, 77, 0.1);
    color: #001f4d;
}

.lc-type-card-title {
    font-size: 0.88em;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.lc-type-card-desc {
    font-size: 0.72em;
    font-weight: 500;
    color: #64748b;
    margin-top: 2px;
}

.lc-type-check-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #10b981;
    color: #ffffff;
    font-size: 0.7em;
    font-weight: 900;
    display: none;
    align-items: center;
    justify-content: center;
}

.lc-type-card-btn.active .lc-type-check-badge {
    display: flex;
}

/* Píldoras de Selección Rápida de Duración */
.lc-quick-pill {
    padding: 3px 9px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.72em;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.lc-quick-pill:hover {
    background: #f1f5f9;
    border-color: #001f4d;
    color: #001f4d;
    transform: translateY(-1px);
}

.lc-quick-pill:active {
    transform: translateY(0);
}

.lc-pro-tabs-wrapper {
    background: #f8fafc;
}

.lc-segmented-nav {
    display: flex;
    background: #e2e8f0;
    padding: 3px;
    border-radius: 8px;
    gap: 4px;
}

.lc-editor-tab-btn {
    flex: 1;
    padding: 7px 14px;
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: 0.82em;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    text-align: center;
}

.lc-editor-tab-btn:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.5);
}

.lc-editor-tab-btn.active {
    color: #001f4d !important;
    background: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

.lc-form-label {
    display: block;
    font-size: 0.73em;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 5px;
}

.lc-form-input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1.5px solid #cbd5e1;
    font-family: inherit;
    font-size: 0.88em;
    color: #0f172a;
    background: #ffffff;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lc-form-input:focus {
    outline: none;
    border-color: #001f4d;
    box-shadow: 0 0 0 3px rgba(0, 31, 77, 0.12);
}

.lc-media-asset-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lc-media-asset-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 31, 77, 0.04);
}

.lc-btn-manage-media {
    transition: background 0.15s ease, transform 0.15s ease;
}

.lc-btn-manage-media:hover {
    background: #001230 !important;
    transform: translateY(-1px);
}

/* Responsividad para el editor dividido en pantallas medianas y pequeñas */
@media (max-width: 860px) {
    .lc-editor-split-body {
        flex-direction: column !important;
        padding: 16px !important;
        gap: 16px !important;
    }

    .lc-editor-preview-column {
        position: static !important;
        flex: 1 1 auto !important;
        width: 100% !important;
    }

    .lc-live-card-container {
        max-width: 360px;
        margin: 0 auto;
    }
}

/* ============================================================
   ESTILOS DE FICHA DETALLADA: MIDNIGHT NAVY & GOLD INSTITUCIONAL
   ============================================================ */
.lc-modal-detail-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .lc-modal-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

.temario-formatted-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

.temario-session-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 11px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 15, 38, 0.05);
    transition: all 0.25s ease;
}

.temario-session-card:hover {
    border-color: #002D62;
    box-shadow: 0 6px 18px rgba(0, 45, 98, 0.12);
    transform: translateY(-1px);
}

.temario-session-header-row {
    background: linear-gradient(135deg, #001f4d 0%, #001538 100%);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #FFC300;
    gap: 12px;
}

.temario-badge-pill {
    background: #FFC300;
    color: #001f4d;
    font-size: 0.76em;
    font-weight: 900;
    padding: 3px 9px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.temario-topics-list {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #ffffff;
}

.temario-topic-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92em;
    color: #1e293b;
    line-height: 1.55;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.temario-topic-item:hover {
    background: #f8fafc;
}

.temario-topic-bullet {
    color: #002D62;
    flex-shrink: 0;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
}

.temario-empty-msg {
    padding: 16px 20px;
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 10px;
    color: #64748b;
    font-size: 0.90em;
    font-style: normal;
}

.temario-aparatologia-block {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f0f7ff;
    border: 1.5px solid #bfdbfe;
    border-left: 4px solid #002D62;
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 6px;
    font-size: 0.90em;
    color: #1e3a8a;
    line-height: 1.5;
}

.temario-note-block {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fef3c7;
    border: 1.5px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 6px;
    font-size: 0.88em;
    font-weight: 600;
    color: #92400e;
    line-height: 1.5;
}


/* ============================================================
   ESTILOS PROPIOS DE libro.css (se aplican DESPUÉS del bloque anterior)
   ============================================================ */

.lc-view-wrapper {
    width: calc(100% + 20px);
    margin: 0 -10px -10px -10px;
    flex: 1;
    min-height: calc(100vh - 58px);
    background: linear-gradient(180deg, #f4f8fd 0%, #edf4fc 35%, #e2efff 70%, #d9e9fd 100%);
    color: var(--body-fg, #1e293b);
    padding: 14px 24px 70px 24px;
    box-sizing: border-box;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    flex-direction: column;
}

.lc-view-wrapper::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Decoraciones Artísticas de Fondo Institucional CECATECIS fijas a todo el viewport (100vw x 100vh) */
.lc-bg-decorations {
    position: fixed;
    top: 52px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 52px);
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.lc-view-wrapper.in-programs {
    padding: 14px 24px 0 24px;
    scrollbar-width: thin;
    scrollbar-color: #FFC300 rgba(0, 31, 77, 0.15);
}

.lc-view-wrapper.in-programs::-webkit-scrollbar {
    display: block !important;
    width: 10px !important;
    height: 10px !important;
}

.lc-view-wrapper.in-programs::-webkit-scrollbar-track {
    background: rgba(0, 31, 77, 0.06);
    border-radius: 6px;
}

.lc-view-wrapper.in-programs::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #FFC300 0%, #d99b00 100%);
    border-radius: 6px;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.lc-view-wrapper.in-programs::-webkit-scrollbar-thumb:hover {
    background: #ffcc1a;
}

.lc-view-wrapper.in-programs .lc-bg-decorations {
    display: none;
}

.lc-decor-left {
    position: absolute;
    top: 10px;
    left: 0;
    width: 280px;
    height: 520px;
    opacity: 0.85;
    pointer-events: none;
}

.lc-decor-svg-left {
    width: 100%;
    height: 100%;
}

.lc-decor-right {
    position: absolute;
    top: 20px;
    right: 0;
    width: 280px;
    height: 520px;
    opacity: 0.85;
    pointer-events: none;
}

.lc-decor-svg-right {
    width: 100%;
    height: 100%;
}

.lc-decor-bottom-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 110px;
    opacity: 0.98;
    z-index: 0;
    pointer-events: none;
}

.lc-bottom-wave-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* NIVEL 1: PORTAL DE ÁREAS PRINCIPALES */
#lc-level-areas {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 70px;
    box-sizing: border-box;
}

/* NIVEL 2: CATÁLOGO DE PROGRAMAS Y TALLERES ADAPTADO */
#lc-level-programs {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    box-sizing: border-box;
}

.lc-programs-bg-decorations {
    position: fixed;
    top: 52px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 52px);
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.lc-prog-decor-top-right {
    position: absolute;
    top: 10px;
    right: 0;
    width: 260px;
    height: 260px;
    opacity: 0.65;
    pointer-events: none;
}

.lc-programs-catalog-footer {
    margin-top: 55px;
    margin-bottom: 0;
    margin-left: -24px;
    margin-right: -24px;
    position: relative;
    z-index: 2;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    background: linear-gradient(180deg, #001f4d 0%, #001538 55%, #000f28 100%);
    color: #ffffff;
    padding: 38px 24px 34px 24px;
    text-align: center;
    box-shadow: 0 -8px 28px rgba(0, 15, 38, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: none;
    border-top: 3.5px solid #FFC300;
    box-sizing: border-box;
}

.lc-catalog-footer-accent-shape {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 140px;
    height: 100%;
    background: linear-gradient(135deg, #FFC300 0%, #FF9900 100%);
    clip-path: polygon(42% 0%, 100% 0%, 100% 100%, 0% 100%);
    pointer-events: none;
    z-index: 1;
    opacity: 0.85;
}

.lc-catalog-footer-accent-shape::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#ffffff 1.2px, transparent 1.2px);
    background-size: 8px 8px;
    opacity: 0.35;
}

.lc-catalog-footer-watermark {
    position: absolute;
    left: 30px;
    bottom: -10px;
    width: 130px;
    height: 105px;
    pointer-events: none;
    z-index: 1;
}

.lc-catalog-temple-svg {
    width: 100%;
    height: 100%;
    color: #3b82f6;
    opacity: 0.16;
}

.lc-catalog-footer-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 800px;
    margin: 0 auto;
}

.lc-footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 195, 0, 0.15);
    color: #FFC300;
    border: 1.5px solid rgba(255, 195, 0, 0.45);
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.84em;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.lc-footer-headline {
    margin: 0;
    font-size: 1.28em;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.2px;
}

.lc-footer-text {
    margin: 0;
    font-size: 0.90em;
    color: #cbd5e1;
    font-weight: 500;
    line-height: 1.45;
}

.lc-footer-tags {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.lc-footer-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 15, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f1f5f9;
    font-size: 0.80em;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease;
}

.lc-footer-tag:hover {
    border-color: #FFC300;
    transform: translateY(-1px);
}

.lc-footer-tag i {
    color: #FFC300 !important;
}

[data-theme="dark"] .lc-programs-catalog-footer {
    background: linear-gradient(180deg, #0b1329 0%, #060b18 100%);
    border-color: rgba(255, 195, 0, 0.35);
    border-top: 3.5px solid #FFC300;
}

.lc-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.lc-topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.lc-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    font-weight: 700;
}

.lc-bc-item.active {
    color: var(--accent);
}

.lc-access-badge {
    background: rgba(46, 204, 113, 0.12);
    color: #27ae60;
    border: 1px solid rgba(46, 204, 113, 0.35);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.78em;
    font-weight: 800;
}

.lc-content-container {
    max-width: 1560px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 1;
}

.lc-hero-banner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: linear-gradient(135deg, #ffffff 0%, #fbfdff 60%, #f4f8fe 100%);
    border: 1px solid #dbeafe;
    border-top: 4px solid #FFC300;
    border-radius: 16px;
    padding: 14px 28px;
    margin-bottom: 14px;
    box-shadow: 0 6px 20px rgba(0, 45, 98, 0.06);
    position: relative;
    /* overflow visible: el desplegable del buscador (dentro de la barra de
       herramientas) no debe quedar recortado por el banner. */
    overflow: visible;
    gap: 12px;
}

.lc-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

/* Barra de herramientas del catálogo dentro del banner (navy) */
.lc-hero-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    position: relative;
    z-index: 4;
}
.lc-hero-tools .lc-global-search {
    flex: 1 1 300px;
    max-width: none;
    margin: 0;
}
.lc-hero-tools .lc-catalogo-btn {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.30);
    color: #ffffff;
}
.lc-hero-tools .lc-catalogo-btn:hover {
    background: var(--lc-gold, #FFC300);
    border-color: var(--lc-gold, #FFC300);
    color: var(--lc-navy, #002D62);
}
.lc-hero-tools .lc-gs-results {
    z-index: 50;
    text-align: left;
}
/* El glow ::after del banner exigía overflow:hidden, que recortaría el
   desplegable del buscador ahora que vive dentro del banner. */
.lc-hero-banner::after { display: none; }

.lc-hero-left {
    flex: 1.2;
    max-width: 840px;
    text-align: left;
    z-index: 2;
}

.lc-hero-badge {
    display: inline-flex;
    align-items: center;
    background: #FFC300;
    color: #002D62;
    border: 1px solid #e6b000;
    font-size: 0.72em;
    font-weight: 900;
    padding: 3px 12px;
    border-radius: 12px;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
    box-shadow: 0 2px 8px rgba(255, 195, 0, 0.35);
}

.lc-hero-title {
    font-size: 1.6em;
    font-weight: 900;
    color: #002D62;
    margin: 0 0 4px 0;
    letter-spacing: -0.4px;
    line-height: 1.2;
}

.lc-hero-subtitle {
    font-size: 0.88em;
    color: #334155;
    line-height: 1.45;
    font-weight: 500;
    margin: 0;
}

.lc-hero-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    height: 85px;
    z-index: 2;
}

/* Patrón de puntos decorativos detrás del libro con el azul corporativo */
.lc-hero-dots {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-image: radial-gradient(#002D62 2px, transparent 2px);
    background-size: 8px 8px;
    opacity: 0.22;
    pointer-events: none;
}

.lc-hero-book-wrapper {
    position: relative;
    width: 140px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-hero-book-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0, 45, 98, 0.2));
    transition: transform 0.3s ease;
}

.lc-hero-book-img:hover {
    transform: scale(1.05) translateY(-2px);
}

.lc-hero-book-svg-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-book-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 6px 14px rgba(0, 45, 98, 0.16));
}

.lc-hero-gold-badge {
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FFC300;
    border: 2px solid #002D62;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 45, 98, 0.2);
    z-index: 3;
    transition: transform 0.3s ease;
}

.lc-hero-gold-badge:hover {
    transform: translateY(-50%) scale(1.08);
}

@media (max-width: 880px) {
    .lc-hero-banner {
        flex-direction: column;
        text-align: center;
        padding: 14px 16px;
    }
    .lc-hero-top {
        flex-direction: column;
        text-align: center;
    }
    .lc-hero-left {
        text-align: center;
        max-width: 100%;
    }
    .lc-hero-title {
        font-size: 1.35em;
    }
    .lc-hero-right {
        min-width: 100%;
        height: 75px;
        margin-top: 4px;
    }
    .lc-hero-tools {
        flex-direction: column;
        align-items: stretch;
    }
    .lc-hero-tools .lc-catalogo-btn {
        justify-content: center;
        width: 100%;
    }
}

/* GRIDA DE ÁREAS PRINCIPALES */
.lc-areas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 0;
    position: relative;
    z-index: 1;
}

@media (max-width: 1200px) {
    .lc-areas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .lc-areas-grid {
        grid-template-columns: 1fr;
    }
}

.lc-area-card {
    background: #ffffff;
    border: 1.5px solid #dbeafe;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.32s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 20px rgba(0, 45, 98, 0.07);
    position: relative;
}

.lc-area-card:hover {
    transform: translateY(-5px);
    border-color: #FFC300;
    box-shadow: 0 14px 32px rgba(0, 45, 98, 0.12), 0 4px 16px rgba(255, 195, 0, 0.2);
}

.lc-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 180px;
    background: #001f44;
    overflow: hidden;
}

.lc-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.lc-area-card:hover .lc-card-img {
    transform: scale(1.06);
}

/* Onda fluida en la base de la imagen con ribete dorado */
.lc-card-wave-overlay {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 32px;
    pointer-events: none;
    z-index: 2;
}

.lc-wave-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.lc-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #002D62 0%, #001a38 100%);
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
}

.lc-img-placeholder.theme-belleza-ph {
    background: linear-gradient(135deg, #002D62 0%, #4a0e2e 50%, #001736 100%);
}

.lc-img-placeholder.theme-fisioterapia-ph {
    background: linear-gradient(135deg, #002D62 0%, #034b75 50%, #001736 100%);
}

.lc-img-placeholder.theme-salud-ph {
    background: linear-gradient(135deg, #002D62 0%, #0d544b 50%, #001736 100%);
}

.lc-img-placeholder.theme-emprendimiento-ph {
    background: linear-gradient(135deg, #002D62 0%, #0f3d68 50%, #001736 100%);
}

.lc-ph-icon {
    font-size: 2em;
    margin-bottom: 2px;
    color: #FFC300;
}

.lc-ph-label {
    font-size: 0.8em;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.lc-ph-sub {
    font-size: 0.65em;
    opacity: 0.8;
    margin-top: 2px;
    color: #dbeafe;
}

.lc-card-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #FFC300;
    color: #002D62;
    border: 1px solid #e6b000;
    font-size: 0.72em;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 3;
}

.lc-area-btn-manage-img {
    position: absolute;
    bottom: 10px;
    right: 8px;
    background: rgba(0, 45, 98, 0.92);
    backdrop-filter: blur(8px);
    color: #ffffff;
    border: 1.5px solid #FFC300;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.72em;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    z-index: 5;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 20, 50, 0.4);
}

.lc-area-btn-manage-img:hover {
    background: #FFC300;
    color: #002D62;
    border-color: #002D62;
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 6px 18px rgba(255, 195, 0, 0.5);
}

.lc-card-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #ffffff;
    justify-content: space-between;
}

.lc-card-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
}

.lc-area-icon {
    font-size: 1.2em;
    color: #002D62;
    display: flex;
    align-items: center;
}

.lc-area-name {
    font-size: 1.15em;
    font-weight: 900;
    margin: 0;
    color: #002D62;
    letter-spacing: -0.3px;
}

.lc-area-desc {
    font-size: 0.78em;
    line-height: 1.38;
    color: #475569;
    flex: 1;
    margin-bottom: 12px;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 32px;
}

.lc-card-btn-action {
    background: #002D62;
    color: #ffffff;
    text-align: center;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.79em;
    font-weight: 800;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border-bottom: 3px solid #FFC300;
    box-shadow: 0 3px 8px rgba(0, 45, 98, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 38px;
    box-sizing: border-box;
    cursor: pointer;
    white-space: nowrap;
}

.lc-area-card:hover .lc-card-btn-action {
    background: #001e42;
    color: #FFC300;
    box-shadow: 0 4px 14px rgba(0, 45, 98, 0.25);
    transform: translateY(-1px);
}
/* ============================================================
   SOPORTE DE TEMA OSCURO PARA EL LIBRO COMERCIAL
   (Migrado desde style.css -- seccion original: lineas 3826-3983)
   ============================================================ */
[data-theme="dark"] .lc-view-wrapper {
    background: linear-gradient(180deg, #090e17 0%, #0d1527 40%, #0f1c36 75%, #081122 100%);
}

[data-theme="dark"] .lc-hero-banner {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-color: #334155;
}

[data-theme="dark"] .lc-hero-title {
    color: #ffffff;
}

[data-theme="dark"] .lc-hero-subtitle {
    color: #cbd5e1;
}

[data-theme="dark"] .lc-area-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .lc-card-body {
    background: #1e293b;
}

[data-theme="dark"] .lc-area-name {
    color: #ffffff;
}

[data-theme="dark"] .lc-area-desc {
    color: #94a3b8;
}

[data-theme="dark"] .lc-area-detail-header {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .lc-area-title-text {
    color: #ffffff;
}

[data-theme="dark"] .lc-area-desc-text {
    color: #94a3b8;
}

[data-theme="dark"] .lc-filter-row {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] #lc-search-box {
    background: #1e293b;
    color: #ffffff;
    border-color: #475569;
}

[data-theme="dark"] .lc-btn-back {
    background: #0f172a;
    color: #ffffff;
    border-color: #334155;
}

[data-theme="dark"] .lc-btn-back:hover {
    background: #FFC300;
    color: #002D62;
    border-color: #FFC300;
}

[data-theme="dark"] .lc-switcher-pills {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .lc-switch-pill {
    color: #cbd5e1;
}

[data-theme="dark"] .lc-switch-pill:hover {
    background: #1e293b;
    color: #ffffff;
}

[data-theme="dark"] .lc-switch-pill.active {
    background: #FFC300;
    color: #002D62;
    border-color: #FFC300;
}

[data-theme="dark"] .lc-filter-tabs {
    background: #0f172a;
}

[data-theme="dark"] .lc-tab {
    color: #cbd5e1;
}

[data-theme="dark"] .lc-tab.active {
    background: #FFC300;
    color: #002D62;
    border-color: #FFC300;
}

[data-theme="dark"] .lc-program-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .lc-pcard-body {
    background: #1e293b;
}

[data-theme="dark"] .lc-pcard-title {
    color: #ffffff;
}

[data-theme="dark"] .lc-pcard-desc {
    color: #94a3b8;
}

[data-theme="dark"] .lc-pcard-duration-chip {
    background: #0f172a;
    color: #FFC300;
    border-color: #334155;
}

[data-theme="dark"] .lc-pcard-aparatologia {
    background: #0f172a;
    border-color: #334155;
    border-left-color: #FFC300;
}

[data-theme="dark"] .lc-apa-label {
    color: #FFC300;
}

[data-theme="dark"] .lc-apa-text {
    color: #cbd5e1;
}

[data-theme="dark"] .lc-pcard-cta-text {
    color: #FFC300;
}

[data-theme="dark"] .temario-formatted-wrapper {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .temario-session-header {
    color: #ffffff;
}

[data-theme="dark"] .temario-item-text {
    color: #cbd5e1;
}

/* ============================================================
   GESTOR PROFESIONAL DE IMAGENES Y GALERIA MULTIMEDIA
   (Migrado desde style.css -- seccion original: lineas 3985-4015)
   ============================================================ */
#modal-lc-program-detail {
    z-index: 100010 !important;
}

#modal-lc-editor {
    z-index: 100020 !important;
}

#modal-lc-image-manager {
    z-index: 100060 !important;
}

#modal-lc-crop-image {
    z-index: 100090 !important;
}

.lc-img-mgr-layout {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 18px;
    align-items: stretch;
}

@media (max-width: 768px) {
    .lc-img-mgr-layout {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   RESPONSIVE MÓVIL DEL LIBRO COMERCIAL
   Migrado desde el @media (max-width: 768px) global de style.css,
   donde estaba mezclado con las reglas del drawer y los modales.
   ============================================================ */

@media (max-width: 768px) {
    /* 5. VISTA: LIBRO COMERCIAL EN MÓVIL */
    .lc-content-container {
        padding: 0 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Banner Nivel 1 */
    .lc-hero-banner {
        padding: 14px 16px !important;
        border-radius: 12px !important;
        gap: 12px !important;
    }

    .lc-hero-left {
        text-align: center !important;
    }

    .lc-hero-badge {
        margin: 0 auto 6px auto !important;
        font-size: 0.70em !important;
    }

    .lc-hero-title {
        font-size: 1.35em !important;
        line-height: 1.25 !important;
    }

    .lc-hero-subtitle {
        font-size: 0.82em !important;
        line-height: 1.4 !important;
        margin: 6px auto 0 auto !important;
    }

    .lc-hero-right {
        height: 70px !important;
        min-height: 70px !important;
    }

    .lc-book-svg {
        max-width: 180px !important;
        height: 70px !important;
    }

    .lc-hero-gold-badge {
        width: 32px !important;
        height: 32px !important;
    }

    /* Grilla de 4 Áreas Nivel 1 */
    .lc-areas-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .lc-area-card {
        border-radius: 14px !important;
    }

    .lc-card-media {
        aspect-ratio: 16 / 9 !important;
        max-height: 170px !important;
    }

    .lc-card-body {
        padding: 14px 16px !important;
        gap: 10px !important;
    }

    .lc-area-name {
        font-size: 1.15em !important;
    }

    .lc-area-desc {
        font-size: 0.82em !important;
        line-height: 1.4 !important;
    }

    .lc-card-btn-action {
        width: 100% !important;
        justify-content: center !important;
        padding: 9px 14px !important;
        font-size: 0.84em !important;
        border-radius: 8px !important;
    }

    /* Nivel 2: Header del Área y Navegación Rápida */
    .lc-area-detail-header {
        padding: 12px 14px !important;
        border-radius: 12px !important;
        gap: 12px !important;
    }

    .lc-area-nav-top {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .lc-btn-back {
        width: fit-content !important;
        padding: 6px 12px !important;
        font-size: 0.82em !important;
    }

    .lc-area-quick-switcher {
        width: 100% !important;
        overflow: hidden !important;
    }

    .lc-switcher-pills {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        gap: 6px !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .lc-switcher-pills::-webkit-scrollbar {
        display: none !important;
    }

    .lc-switch-pill {
        padding: 5px 12px !important;
        font-size: 0.78em !important;
        flex-shrink: 0 !important;
    }

    .lc-title-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .lc-area-title-text {
        font-size: 1.35em !important;
    }

    .lc-area-desc-text {
        font-size: 0.82em !important;
    }

    /* Fila de Filtros y Búsqueda del Libro Comercial */
    .lc-filter-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .lc-search-input-wrap {
        width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }

    .lc-search-input-wrap input {
        width: 100% !important;
        padding: 8px 34px 8px 36px !important;
        font-size: 0.88em !important;
    }

    .lc-filter-tabs {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
    }

    .lc-tab {
        flex: 1 !important;
        justify-content: center !important;
        padding: 7px 10px !important;
        font-size: 0.80em !important;
    }

    .lc-results-counter {
        text-align: center !important;
        font-size: 0.78em !important;
        padding: 2px 0 !important;
    }

    /* Grilla de Tarjetas de Programas */
    .lc-programs-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .lc-program-card {
        border-radius: 14px !important;
    }

    .lc-pcard-media {
        aspect-ratio: 16 / 9 !important;
        max-height: 180px !important;
    }

    .lc-pcard-body {
        padding: 14px !important;
        gap: 10px !important;
    }

    .lc-pcard-title {
        font-size: 1.05em !important;
    }

    .lc-pcard-specs-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .lc-pcard-actions {
        padding: 10px 14px !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .lc-btn-card-detail {
        width: 100% !important;
        justify-content: center !important;
        padding: 9px 14px !important;
    }

    .lc-pcard-admin-btns {
        width: 100% !important;
        justify-content: stretch !important;
    }

    .lc-pcard-admin-btns button {
        flex: 1 !important;
        justify-content: center !important;
    }

    /* Footer del Catálogo */
    .lc-programs-catalog-footer {
        padding: 20px 16px !important;
        border-radius: 12px !important;
        margin-top: 24px !important;
    }

    .lc-footer-headline {
        font-size: 1.15em !important;
    }

    .lc-footer-text {
        font-size: 0.82em !important;
    }

    .lc-footer-tags {
        flex-direction: column !important;
        gap: 6px !important;
        align-items: center !important;
    }
}


/* ============================================================
   REDISEÑO INSTITUCIONAL NAVY & GOLD
   ------------------------------------------------------------
   El Libro Comercial usaba un hero blanco y tarjetas claras, mientras que
   el módulo de Encuestas ya había fijado el lenguaje visual de la marca
   (navy #002D62 + dorado #FFC300). Este bloque traslada aquí esos mismos
   valores, tomados literalmente de static/modulos/encuestas/encuestas.css
   y de la tarjeta "¡HOY!" de encuestas.js, para que los dos módulos se lean
   como el mismo producto.

   Va al final del archivo a propósito: gana sobre las reglas anteriores sin
   tener que borrarlas ni pelear con su especificidad.
   ============================================================ */

:root {
    --lc-navy: #002D62;
    --lc-navy-mid: #003b82;
    --lc-navy-dark: #001a38;
    --lc-navy-darker: #001222;
    --lc-gold: #FFC300;
    --lc-gold-dark: #e6b000;
    --lc-ink: #1e293b;
    --lc-muted: #64748b;
    --lc-border: #e2e8f0;
    --lc-navy-tint: rgba(0, 45, 98, 0.08);
    --lc-navy-tint-strong: rgba(0, 45, 98, 0.16);
    --lc-gold-tint: rgba(255, 195, 0, 0.16);
}

/* ------------------------------------------------------------
   Corrección de scroll (la misma que ya está documentada en encuestas.css):
   declarar overflow propio en el wrapper lo convertía en el contenedor de
   referencia de cualquier position:sticky interno, y como él mismo nunca se
   desplazaba, el sticky no llegaba a activarse jamás. Quien scrollea es el
   body, que además ya recorta en horizontal.
   ------------------------------------------------------------ */
.lc-view-wrapper {
    overflow-y: visible;
    overflow-x: visible;
}

/* Aviso de "sin conexión": el catálogo se sigue viendo desde la copia local,
   pero antes nada indicaba que podía estar desactualizado. */
.lc-offline-notice {
    background: #fef3c7;
    border: 1.5px solid #fde68a;
    border-left: 4px solid #f59e0b;
    color: #92400e;
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 14px;
    font-size: 0.86em;
    font-weight: 600;
    position: relative;
    z-index: 3;
}

/* ============================================================
   NIVEL 1 — HERO
   Receta de .encuesta-hero-banner (encuestas.css:91-105).
   ============================================================ */
.lc-hero-banner {
    background: linear-gradient(135deg, var(--lc-navy) 0%, var(--lc-navy-mid) 55%, var(--lc-navy-dark) 100%);
    border: 1px solid var(--lc-navy-dark);
    border-top: 4px solid var(--lc-gold);
    border-radius: 18px;
    padding: 22px 30px;
    margin-bottom: 20px;
    box-shadow: 0 16px 34px rgba(0, 20, 48, 0.28);
}

/* Brillo interior del hero (::after de .encuesta-hero-banner). */
.lc-hero-banner::after {
    content: '';
    position: absolute;
    bottom: -90px;
    left: 12%;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.lc-hero-badge {
    gap: 5px;
    background: var(--lc-gold);
    color: var(--lc-navy);
    border: 1px solid var(--lc-gold-dark);
    box-shadow: 0 2px 8px rgba(255, 195, 0, 0.35);
    margin-bottom: 8px;
}

.lc-hero-title {
    color: #ffffff;
    margin-bottom: 6px;
}

.lc-hero-subtitle {
    color: rgba(255, 255, 255, 0.72);
    max-width: 620px;
}

/* Sobre navy los puntos azul marino eran invisibles. */
.lc-hero-dots {
    background-image: radial-gradient(rgba(255, 255, 255, 0.55) 2px, transparent 2px);
    opacity: 0.35;
}

.lc-book-svg {
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}

.lc-hero-gold-badge {
    border-color: var(--lc-navy-dark);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   NIVEL 1 — TARJETAS DE ÁREA
   Receta de la tarjeta "¡HOY!" (encuestas.js:787): navy degradado, borde
   dorado de 2px, radio 14 y la pill sobresaliendo por arriba.
   ============================================================ */
.lc-areas-grid {
    /* Antes repeat(4, 1fr) fijo, con saltos bruscos a 2 y 1 columna: entre
       1200 y 1400 px las tarjetas quedaban estrechas y el CTA de
       "Emprendimiento" desbordaba. Mismo grid fluido que .encuesta-today-grid. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    margin-top: 8px;
}

.lc-area-card {
    background: linear-gradient(135deg, var(--lc-navy) 0%, var(--lc-navy-mid) 100%);
    border: 2px solid var(--lc-gold);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 45, 98, 0.18);
    overflow: visible; /* la pill del total sobresale por arriba */
}

.lc-area-card:hover,
.lc-area-card:focus-visible {
    transform: translateY(-5px);
    border-color: var(--lc-gold);
    box-shadow: 0 16px 34px rgba(0, 20, 48, 0.32);
}

.lc-area-card:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/* Pill del total de programas: el equivalente del badge "¡HOY!". */
.lc-card-total-pill {
    position: absolute;
    top: -11px;
    right: 14px;
    z-index: 4;
    background: var(--lc-gold);
    color: var(--lc-navy);
    font-size: 0.68em;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 10px rgba(0, 20, 48, 0.35);
    white-space: nowrap;
}

.lc-area-card .lc-card-media {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.lc-area-card .lc-card-body {
    background: transparent;
    padding: 4px 18px 18px 18px;
    gap: 10px;
}

.lc-area-card .lc-area-name {
    color: #ffffff;
}

.lc-area-card .lc-area-icon {
    color: var(--lc-gold);
}

.lc-area-card .lc-area-desc {
    /* Antes #475569 a 0.78em: por debajo del contraste mínimo. */
    color: #cbd5e1;
    font-size: 0.80em;
    margin-bottom: 4px;
}

/* Chips de conteo: el dato más útil de la tarjeta, que antes iba en una pill
   diminuta sobre la esquina de la foto. Mismos valores que los chips de la
   tarjeta de Encuestas (rgba blanca + texto dorado / tinte dorado + blanco). */
.lc-card-count-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lc-chip {
    font-size: 0.70em;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 6px;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.lc-chip-code {
    background: rgba(255, 255, 255, 0.15);
    color: var(--lc-gold);
}

.lc-chip-tag {
    background: rgba(255, 195, 0, 0.2);
    color: #ffffff;
}

.lc-chip-muted {
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-weight: 700;
}

.lc-area-card.is-unavailable {
    opacity: 0.75;
}

/* CTA: patrón exacto de "Tomar Encuesta Ahora". */
.lc-area-card .lc-card-btn-action {
    background: rgba(255, 255, 255, 0.1);
    color: var(--lc-gold);
    border-bottom: none;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.84em;
    font-weight: 800;
    justify-content: space-between;
    box-shadow: none;
    white-space: normal; /* el nowrap desbordaba en "Emprendimiento" */
    text-align: left;
    gap: 10px;
}

.lc-area-card:hover .lc-card-btn-action {
    background: var(--lc-gold);
    color: var(--lc-navy);
    transform: none;
    box-shadow: 0 4px 14px rgba(255, 195, 0, 0.35);
}

/* Botón admin: patrón de "Ver este bloque en el Horario" (borde discontinuo).
   Sale de encima de la foto: estaba en position:absolute superpuesto al área
   clicable y con 22 px de alto, muy por debajo del mínimo táctil. */
.lc-area-card .lc-area-btn-manage-img {
    position: static;
    width: 100%;
    min-height: 44px;
    margin-top: 2px;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 0.76em;
    font-weight: 700;
    justify-content: center;
    box-shadow: none;
    backdrop-filter: none;
}

.lc-area-card .lc-area-btn-manage-img:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--lc-gold);
    border-style: solid;
    color: var(--lc-gold);
    transform: none;
    box-shadow: none;
}

/* ============================================================
   PORTADA INSTITUCIONAL (placeholder)
   Ninguno de los 128 programas tenía foto real, así que esto no es un caso
   raro: es lo que se ve por defecto en todo el catálogo. Se diseña como una
   portada intencional, no como el hueco de una imagen que falló.
   ============================================================ */
.lc-img-placeholder {
    position: relative;
    justify-content: center;
    gap: 6px;
    overflow: hidden;
}

/* Las tarjetas de programa usaban los gradientes de área a todo color
   (carmesí para Belleza, verde esmeralda para Salud...), heredados de la
   paleta antigua. Con 128 programas sin foto, el catálogo entero se veía de
   colores ajenos a la marca. Todos los placeholders pasan a la base navy con
   un tinte de área discreto, como ya hacían las variantes -ph. */
.lc-img-placeholder.theme-belleza,
.lc-img-placeholder.theme-belleza-ph {
    background: linear-gradient(135deg, var(--lc-navy) 0%, #4a0e2e 55%, #001736 100%);
    color: #ffffff;
}

.lc-img-placeholder.theme-fisioterapia,
.lc-img-placeholder.theme-fisioterapia-ph {
    background: linear-gradient(135deg, var(--lc-navy) 0%, #034b75 55%, #001736 100%);
    color: #ffffff;
}

.lc-img-placeholder.theme-salud,
.lc-img-placeholder.theme-salud-ph {
    background: linear-gradient(135deg, var(--lc-navy) 0%, #0d544b 55%, #001736 100%);
    color: #ffffff;
}

.lc-img-placeholder.theme-emprendimiento,
.lc-img-placeholder.theme-emprendimiento-ph {
    background: linear-gradient(135deg, var(--lc-navy) 0%, #0f3d68 55%, #001736 100%);
    color: #ffffff;
}

.lc-ph-bg-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    opacity: 0.5;
    pointer-events: none;
}

.lc-ph-watermark {
    position: absolute;
    right: -6px;
    bottom: -10px;
    font-size: 2.4em;
    font-weight: 900;
    letter-spacing: -1px;
    color: rgba(255, 255, 255, 0.07);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.lc-ph-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
    padding: 0 10px;
}

.lc-ph-icon {
    color: var(--lc-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255, 195, 0, 0.14);
    border: 2px solid var(--lc-gold);
    margin-bottom: 2px;
    font-size: 1em;
}

.lc-ph-subtitle {
    font-size: 0.70em;
    font-weight: 900;
    letter-spacing: 0.8px;
    color: #ffffff;
    text-transform: uppercase;
}

.lc-ph-code {
    font-size: 0.66em;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.15);
    color: var(--lc-gold);
}

/* Antes #dbeafe con opacity .8 sobre navy: por debajo del contraste mínimo. */
.lc-ph-sub {
    color: #e2e8f0;
    opacity: 1;
}

/* ============================================================
   NIVEL 2 — HEADER DEL ÁREA
   ============================================================ */
.lc-area-detail-header {
    background: linear-gradient(135deg, var(--lc-navy) 0%, var(--lc-navy-mid) 55%, var(--lc-navy-dark) 100%);
    border: 1px solid var(--lc-navy-dark);
    border-top: 4px solid var(--lc-gold);
    border-radius: 18px;
    box-shadow: 0 16px 34px rgba(0, 20, 48, 0.28);
}

.lc-area-title-text {
    color: #ffffff;
}

.lc-area-desc-text {
    color: rgba(255, 255, 255, 0.72);
}

.lc-area-badge-chip {
    background: var(--lc-gold);
    color: var(--lc-navy);
    border: 1px solid var(--lc-gold-dark);
    box-shadow: 0 2px 8px rgba(255, 195, 0, 0.35);
}

.lc-area-badge-chip i,
.lc-area-badge-chip svg {
    color: var(--lc-navy) !important;
}

.lc-btn-back {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    min-height: 40px;
}

.lc-btn-back:hover {
    background: var(--lc-gold);
    border-color: var(--lc-gold);
    color: var(--lc-navy);
}

.lc-switcher-label {
    color: rgba(255, 255, 255, 0.72);
}

/* Selector de áreas como control segmentado (.survey-type-tabs).
   Con wrap y scroll: sin ellos, a 360 px las 4 pills desbordaban y, como el
   contenedor recorta en horizontal, "Emprendimiento" quedaba inalcanzable. */
.lc-switcher-pills {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    flex-wrap: wrap;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
}

.lc-switcher-pills::-webkit-scrollbar {
    display: none;
}

.lc-switch-pill {
    background: transparent;
    border: none;
    border-radius: 999px;
    color: #cbd5e1;
    font-weight: 800;
    min-height: 38px;
    padding: 8px 16px;
    white-space: nowrap;
}

.lc-switch-pill:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* La firma del sistema: activo = fondo sólido + texto del color contrario. */
.lc-switch-pill.active {
    background: var(--lc-gold) !important;
    color: var(--lc-navy) !important;
    box-shadow: 0 4px 12px rgba(0, 20, 48, 0.3);
}

/* ============================================================
   NIVEL 2 — PANEL DE BÚSQUEDA
   Superficie clara sobre el header navy: el contraste entre ambos es lo que
   crea la jerarquía (.encuesta-search-panel).
   ============================================================ */
.lc-filter-row {
    background: #ffffff;
    border: 1px solid var(--lc-border);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 45, 98, 0.06);
    padding: 16px 20px;
    gap: 14px;
    flex-wrap: wrap;
}

.lc-search-input-wrap {
    min-width: 240px; /* sin esto el buscador se comprimía hasta ser inservible */
    flex: 1 1 260px;
}

.lc-search-input-wrap input {
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    padding: 13px 16px 13px 42px;
    background: #f8fafc;
    font-size: 0.95em;
}

.lc-search-input-wrap input:focus {
    border-color: var(--lc-navy);
    background: #ffffff;
    box-shadow: 0 0 0 3px var(--lc-navy-tint);
    outline: none;
}

.lc-filter-tabs {
    background: var(--lc-navy-tint);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    flex-wrap: wrap;
}

.lc-tab {
    background: transparent;
    border: none;
    border-radius: 999px;
    color: #475569;
    font-weight: 800;
    min-height: 40px;
    padding: 9px 16px;
}

.lc-tab:hover:not(.active) {
    color: var(--lc-navy);
}

.lc-tab.active {
    background: var(--lc-navy) !important;
    color: var(--lc-gold) !important;
    box-shadow: 0 4px 12px rgba(0, 45, 98, 0.25);
}

.lc-tab.active .lc-tab-count {
    background: var(--lc-gold);
    color: var(--lc-navy);
}

.lc-tab-count {
    background: rgba(0, 45, 98, 0.1);
    color: var(--lc-navy);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.86em;
    font-weight: 900;
}

/* ============================================================
   NIVEL 2 — TARJETAS DE PROGRAMA
   Se quedan claras para no competir con el Nivel 1, pero adoptan la franja
   superior de 4px que codifica el tipo (.survey-program-select-card):
   dorado = taller, navy = curso. Así el catálogo se lee de un vistazo sin
   depender de las fotos, que en la práctica no existen.
   ============================================================ */
.lc-program-card {
    border-top: 4px solid #cbd5e1;
}

.lc-program-card.tipo-curso {
    border-top-color: var(--lc-navy);
}

.lc-program-card.tipo-taller {
    border-top-color: var(--lc-gold);
}

.lc-program-card:focus-visible {
    outline: 3px solid var(--lc-navy);
    outline-offset: 2px;
}

.lc-pcard-badge-code {
    background: var(--lc-navy);
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.4px;
}

.lc-pcard-cta-text {
    color: var(--lc-navy);
    font-weight: 800;
}

.lc-program-card:hover .lc-pcard-cta-text {
    color: var(--lc-gold);
}

/* Estados vacíos: hasta ahora solo existía el de "búsqueda sin resultados",
   que se mostraba también cuando la causa era el filtro o el área vacía. */
.lc-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 46px 20px;
    background: #ffffff;
    border: 1.5px dashed #cbd5e1;
    border-radius: 16px;
}

.lc-empty-title {
    color: var(--lc-navy);
    font-size: 1.05em;
    font-weight: 900;
    margin: 10px 0 4px 0;
}

.lc-empty-subtitle {
    color: var(--lc-muted);
    font-size: 0.9em;
    margin: 0 0 16px 0;
}

.lc-empty-reset-btn {
    min-height: 44px;
    border-radius: 10px;
    font-weight: 800;
}

/* ============================================================
   TEMA OSCURO
   ============================================================ */
[data-theme="dark"] .lc-filter-row,
[data-theme="dark"] .lc-empty-state {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .lc-search-input-wrap input {
    background: #1e293b;
    color: #ffffff;
    border-color: #475569;
}

[data-theme="dark"] .lc-filter-tabs {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .lc-tab {
    color: #cbd5e1;
}

[data-theme="dark"] .lc-empty-title {
    color: #ffffff;
}

/* El hero y las tarjetas de área ya son navy en ambos temas: se dejan igual
   para no perder la identidad de marca en oscuro. */
[data-theme="dark"] .lc-hero-banner,
[data-theme="dark"] .lc-area-card,
[data-theme="dark"] .lc-area-detail-header {
    background: linear-gradient(135deg, var(--lc-navy) 0%, var(--lc-navy-mid) 55%, var(--lc-navy-dark) 100%);
    border-color: var(--lc-navy-dark);
}

[data-theme="dark"] .lc-area-card {
    border-color: var(--lc-gold);
}

[data-theme="dark"] .lc-hero-title,
[data-theme="dark"] .lc-area-card .lc-area-name,
[data-theme="dark"] .lc-area-title-text {
    color: #ffffff;
}

[data-theme="dark"] .lc-area-card .lc-card-body {
    background: transparent;
}

[data-theme="dark"] .lc-area-card .lc-area-desc {
    color: #cbd5e1;
}

/* ============================================================
   RESPONSIVE DEL REDISEÑO
   ============================================================ */
@media (max-width: 768px) {
    .lc-hero-banner {
        flex-direction: column;
        text-align: center;
        padding: 18px 16px;
    }

    .lc-hero-left {
        text-align: center;
    }

    .lc-areas-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .lc-filter-row {
        padding: 14px;
    }

    .lc-filter-tabs,
    .lc-search-input-wrap {
        width: 100%;
    }

    .lc-tab {
        flex: 1;
        justify-content: center;
        padding: 9px 8px;
    }
}

/* Miniaturas de la galería de la ficha: ahora son <button> reales, enfocables
   y activables con teclado. Antes eran <div> con onclick y el estado
   seleccionado se comunicaba solo por color de borde. */
.lc-detail-thumb {
    width: 52px;
    height: 36px;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1.5px solid #cbd5e1;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.lc-detail-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lc-detail-thumb:hover {
    transform: translateY(-1px);
}

.lc-detail-thumb.is-active {
    border-color: #FFC300;
    border-width: 2px;
}

.lc-detail-thumb:focus-visible {
    outline: 3px solid #FFC300;
    outline-offset: 2px;
}

/* ============================================================
   NIVEL 3: PAGINA COMPLETA DEL PROGRAMA  (#lc-level-program)
   Reemplaza al antiguo modal #modal-lc-program-detail.
   Hereda --area-accent de la clase theme-<area> que le pone
   openLCProgramDetailModal().
   ============================================================ */

.lc-program-page {
    --area-accent: #002D62;
    padding: 18px 20px 90px;
    animation: lcProgPageIn 0.28s ease both;
}

@keyframes lcProgPageIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lc-programpage-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* La topbar del nivel 3 va sobre fondo claro; el .lc-btn-back genérico
   (definido más abajo en este archivo) es blanco sobre transparente porque
   pensado para la cabecera navy del nivel 2. Aquí se reponen los colores. */
.lc-programpage-topbar .lc-btn-back,
.lc-program-footer-nav .lc-btn-back {
    background: #f1f5f9;
    color: #002D62;
    border: 1px solid #cbd5e1;
}
.lc-programpage-topbar .lc-btn-back:hover,
.lc-program-footer-nav .lc-btn-back:hover {
    background: #002D62;
    color: #ffffff;
    border-color: #002D62;
}
[data-theme="dark"] .lc-programpage-topbar .lc-btn-back,
[data-theme="dark"] .lc-program-footer-nav .lc-btn-back {
    background: #16233a;
    color: #e2e8f0;
    border-color: #33507a;
}

.lc-program-breadcrumb {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82em;
    font-weight: 700;
    color: #64748b;
    flex-wrap: wrap;
}
.lc-program-breadcrumb a {
    color: #475569;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
}
.lc-program-breadcrumb a:hover {
    color: var(--area-accent);
    border-bottom-color: currentColor;
}
.lc-program-breadcrumb span[aria-current] {
    color: var(--area-accent);
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-program-shell {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 15, 38, 0.10);
}

/* --- Cabecera con banda de foto --- */
.lc-program-hero {
    position: relative;
    background: linear-gradient(135deg, #002D62 0%, #001a3d 100%);
    color: #ffffff;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.lc-program-hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.lc-program-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lc-program-hero-ph {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(145deg, #002D62 0%, #000f28 100%);
}
.lc-program-hero-ph-badge {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 195, 0, 0.14);
    border: 1.5px solid #FFC300;
    color: #FFC300;
}
.lc-program-hero-ph-brand {
    font-weight: 900;
    letter-spacing: 1px;
    color: #FFC300;
    font-size: 0.95em;
}
.lc-program-hero-ph-name {
    font-size: 0.78em;
    color: #94a3b8;
    max-width: 80%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lc-program-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,15,38,0.15) 0%, rgba(0,15,38,0.35) 45%, rgba(0,15,38,0.88) 100%);
}
.lc-program-hero-body {
    position: relative;
    padding: 22px 26px;
}
.lc-program-hero-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.lc-program-pill-type,
.lc-program-pill-code {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72em;
    font-weight: 900;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
}
.lc-program-pill-type {
    background: #FFC300;
    color: #001f4d;
}
.lc-program-pill-code {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.lc-program-title {
    margin: 0;
    font-size: clamp(1.4em, 3.4vw, 2.05em);
    font-weight: 900;
    letter-spacing: -0.4px;
    line-height: 1.15;
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 15, 38, 0.5);
    outline: none;
}

/* --- Cuerpo en dos columnas --- */
.lc-program-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    padding: 24px 26px;
}
.lc-program-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}
.lc-program-block {
    background: #ffffff;
    border: 1.5px solid #eef2f7;
    border-radius: 14px;
    padding: 18px 20px;
}
.lc-program-h2,
.lc-program-h2-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lc-program-h2-row {
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.lc-program-h2 {
    margin: 0 0 10px;
    font-size: 1.02em;
    font-weight: 900;
    color: #002D62;
    letter-spacing: -0.2px;
}
.lc-program-h2 i { color: var(--area-accent); }
.lc-program-h2-row .lc-program-h2 { margin-bottom: 0; }
.lc-program-desc {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.7;
    color: #1e293b;
}
.lc-program-apar {
    margin: 0;
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.55;
    color: #1e3a8a;
    padding: 12px 14px;
    background: var(--area-accent-subtle, rgba(0,45,98,0.06));
    border-left: 4px solid var(--area-accent);
    border-radius: 8px;
}
.lc-program-sessions-badge {
    font-size: 0.72em;
    font-weight: 900;
    letter-spacing: 0.4px;
    color: var(--area-accent);
    background: var(--area-accent-subtle, #f0f7ff);
    border: 1px solid var(--area-accent-border, #bfdbfe);
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

/* --- Columna lateral --- */
.lc-program-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: start;
    position: sticky;
    top: 14px;
}
.lc-program-side-card {
    background: #ffffff;
    border: 1.5px solid #eef2f7;
    border-radius: 14px;
    padding: 14px 16px;
}
.lc-program-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}
.lc-program-meta-row:last-child { border-bottom: none; }
.lc-program-meta-k {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #64748b;
}
.lc-program-meta-k i { color: var(--area-accent); }
.lc-program-meta-v {
    font-size: 0.88em;
    font-weight: 800;
    color: #0f172a;
    text-align: right;
}

.lc-program-qr-card {
    text-align: center;
}
.lc-program-qr {
    width: 156px;
    max-width: 100%;
    margin: 0 auto 8px;
    padding: 8px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    line-height: 0;
}
.lc-program-qr:empty { display: none; }
.lc-program-qr-hint {
    margin: 0 0 10px;
    font-size: 0.76em;
    font-weight: 600;
    color: #64748b;
}

.lc-program-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.lc-program-thumbs:empty { display: none; }
.lc-program-thumbs .lc-detail-thumb {
    flex: 0 0 auto;
    width: 64px; height: 46px;
    border-radius: 7px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    background: #f1f5f9;
}
.lc-program-thumbs .lc-detail-thumb.is-active {
    border-color: var(--area-accent);
}
.lc-program-thumbs .lc-detail-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* --- Botones de accion --- */
.lc-program-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.lc-program-btn-primary,
.lc-program-btn-wa,
.lc-program-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 14px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.86em;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lc-program-btn-primary:hover,
.lc-program-btn-wa:hover,
.lc-program-btn-ghost:hover { transform: translateY(-1px); }
.lc-program-btn-primary {
    background: linear-gradient(135deg, #FFC300 0%, #FF9900 100%);
    color: #001f4d;
    box-shadow: 0 4px 14px rgba(255, 195, 0, 0.32);
}
.lc-program-btn-wa {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.28);
}
.lc-program-btn-ghost {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #334155;
    width: 100%;
}
.lc-program-btn-ghost.lc-danger { color: #dc2626; border-color: #fecaca; }
.lc-program-admin-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.lc-program-admin-actions.hidden { display: none !important; }
.lc-program-admin-actions .lc-program-btn-ghost { flex: 1; }

.lc-materiales-docente-pick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8em;
    font-weight: 800;
    color: #002D62;
}
.lc-materiales-docente-pick select {
    padding: 6px 10px;
    border-radius: 7px;
    border: 1.5px solid #cbd5e1;
    font-weight: 700;
    font-size: 0.95em;
}

.lc-program-footer-nav {
    padding: 0 26px 22px;
}

.admin-only-block.hidden { display: none !important; }

/* --- Responsive --- */
@media (max-width: 880px) {
    .lc-program-grid {
        grid-template-columns: 1fr;
        padding: 18px;
    }
    .lc-program-side {
        position: static;
        order: -1;
    }
    .lc-program-hero-body { padding: 18px; }
    .lc-program-page { padding: 14px 12px 80px; }
    .lc-program-breadcrumb span[aria-current] { max-width: 180px; }
}

[data-theme="dark"] .lc-program-shell,
[data-theme="dark"] .lc-program-block,
[data-theme="dark"] .lc-program-side-card {
    background: #0f1b2d;
    border-color: #1e3350;
}
[data-theme="dark"] .lc-program-desc,
[data-theme="dark"] .lc-program-meta-v { color: #e2e8f0; }
[data-theme="dark"] .lc-program-h2 { color: #e2e8f0; }
[data-theme="dark"] .lc-program-btn-ghost {
    background: #0f1b2d;
    border-color: #33507a;
    color: #cbd5e1;
}

/* ============================================================
   BLOQUE C — BÚSQUEDA GLOBAL Y COMPARADOR
   ============================================================ */

/* --- Buscador global (nivel de áreas) --- */
.lc-global-search {
    position: relative;
    max-width: 720px;
    margin: 0 auto 26px;
}
.lc-gs-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.lc-gs-icon {
    position: absolute;
    left: 16px;
    color: #64748b;
    pointer-events: none;
    display: flex;
}
#lc-global-search-box {
    width: 100%;
    padding: 14px 44px 14px 44px;
    border-radius: 14px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.98em;
    font-weight: 500;
    color: #0f172a;
    box-shadow: 0 4px 18px rgba(0, 15, 38, 0.06);
    outline: none;
}
#lc-global-search-box:focus {
    border-color: #002D62;
    box-shadow: 0 0 0 3px rgba(0, 45, 98, 0.12);
}
.lc-gs-clear {
    position: absolute;
    right: 12px;
    width: 26px; height: 26px;
    border: none;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
}
.lc-gs-results {
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 6px);
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 16px 44px rgba(0, 15, 38, 0.18);
    z-index: 40;
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
}
.lc-gs-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
}
.lc-gs-item:hover,
.lc-gs-item:focus-visible {
    background: #f1f5f9;
}
.lc-gs-item-nombre {
    font-weight: 800;
    font-size: 0.92em;
    color: #0f172a;
}
.lc-gs-item-meta {
    font-size: 0.78em;
    font-weight: 600;
    color: #64748b;
}
.lc-gs-empty {
    padding: 16px;
    text-align: center;
    color: #64748b;
    font-size: 0.88em;
}

/* --- Botón "comparar" en las tarjetas --- */
.lc-pcard-compare {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    background: rgba(0, 15, 38, 0.45);
    color: #ffffff;
    cursor: pointer;
    backdrop-filter: blur(3px);
    z-index: 3;
    transition: background 0.15s ease, transform 0.15s ease;
}
.lc-pcard-compare:hover { transform: scale(1.06); }
.lc-pcard-compare.activo {
    background: #FFC300;
    border-color: #FFC300;
    color: #001f4d;
}

/* --- Barra flotante de comparación --- */
.lc-comparar-bar {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: min(880px, 94vw);
    padding: 12px 16px;
    background: #001a38;
    color: #ffffff;
    border: 1.5px solid rgba(255, 195, 0, 0.5);
    border-radius: 14px;
    box-shadow: 0 14px 44px rgba(0, 15, 38, 0.42);
}
.lc-comparar-bar-items {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.lc-comparar-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 4px 6px 4px 12px;
    font-size: 0.8em;
    font-weight: 700;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lc-comparar-chip button {
    border: none;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    width: 18px; height: 18px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    flex: 0 0 auto;
}
.lc-comparar-bar-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}
.lc-comparar-bar-clear {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 0.82em;
    cursor: pointer;
}
.lc-comparar-bar-go {
    background: #FFC300;
    border: none;
    color: #001f4d;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 900;
    font-size: 0.82em;
    cursor: pointer;
}
.lc-comparar-bar-go:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Nivel comparador --- */
.lc-comparar-page { padding: 18px 20px 90px; }
.lc-comparar-shell {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 12px 40px rgba(0, 15, 38, 0.10);
}
.lc-comparar-title {
    margin: 0 0 4px;
    font-size: 1.4em;
    font-weight: 900;
    color: #002D62;
    display: flex;
    align-items: center;
    gap: 10px;
}
.lc-comparar-sub {
    margin: 0 0 18px;
    font-size: 0.86em;
    color: #64748b;
}
.lc-comparar-tabla-wrap {
    overflow-x: auto;
}
.lc-comparar-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86em;
}
.lc-comparar-tabla th,
.lc-comparar-tabla td {
    border: 1px solid #e2e8f0;
    padding: 10px 12px;
    vertical-align: top;
    text-align: left;
}
.lc-comparar-tabla thead th {
    background: #002D62;
    color: #ffffff;
    font-weight: 800;
    position: sticky;
    top: 0;
}
.lc-comparar-tabla tbody th {
    background: #f8fafc;
    font-weight: 800;
    color: #334155;
    white-space: nowrap;
}
.lc-comparar-th-nombre { font-weight: 900; }
.lc-comparar-tabla tr.lc-fila-difiere td {
    background: #fffbeb;
}
.lc-comparar-tabla ul {
    margin: 0;
    padding-left: 18px;
}
.lc-comparar-tabla li { margin-bottom: 3px; }
.lc-comparar-actions {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 700px) {
    .lc-comparar-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .lc-comparar-bar-actions { justify-content: space-between; }
}

[data-theme="dark"] #lc-global-search-box,
[data-theme="dark"] .lc-gs-results,
[data-theme="dark"] .lc-comparar-shell {
    background: #0f1b2d;
    border-color: #1e3350;
    color: #e2e8f0;
}
[data-theme="dark"] .lc-gs-item:hover { background: #16233a; }
[data-theme="dark"] .lc-comparar-tabla tbody th { background: #16233a; color: #cbd5e1; }
[data-theme="dark"] .lc-comparar-tabla tr.lc-fila-difiere td { background: #3a2f13; }

/* ============================================================
   BLOQUE F — PDF DEL CATÁLOGO (botones + overlay de progreso)
   ============================================================ */
.lc-catalogo-cta {
    max-width: 720px;
    margin: -14px auto 24px;
    text-align: center;
}
.lc-catalogo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1.5px solid #002D62;
    background: #ffffff;
    color: #002D62;
    font-weight: 800;
    font-size: 0.86em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.lc-catalogo-btn:hover { background: #002D62; color: #ffffff; }
.lc-catalogo-btn--sm { padding: 9px 14px; font-size: 0.8em; }

#lc-catalogo-overlay {
    position: fixed;
    inset: 0;
    z-index: 100050;
    background: rgba(0, 15, 38, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.lc-catov-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 26px;
    width: min(420px, 92vw);
    box-shadow: 0 24px 70px rgba(0, 15, 38, 0.4);
    text-align: center;
}
.lc-catov-title {
    font-weight: 900;
    color: #002D62;
    font-size: 1.02em;
    margin-bottom: 14px;
}
.lc-catov-bar {
    height: 10px;
    border-radius: 6px;
    background: #e2e8f0;
    overflow: hidden;
    margin-bottom: 10px;
}
.lc-catov-fill {
    height: 100%;
    background: linear-gradient(90deg, #002D62, #FFC300);
    width: 0%;
    transition: width 0.25s ease;
}
.lc-catov-status {
    font-size: 0.82em;
    color: #64748b;
    min-height: 18px;
    margin-bottom: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lc-catov-cancel {
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    border-radius: 8px;
    padding: 8px 18px;
    font-weight: 700;
    font-size: 0.84em;
    cursor: pointer;
}
[data-theme="dark"] .lc-catov-card { background: #0f1b2d; color: #e2e8f0; }
[data-theme="dark"] .lc-catalogo-btn { background: #0f1b2d; color: #e2e8f0; border-color: #33507a; }

/* ============================================================
   BLOQUE D.3 — EDITOR DE TEMARIO POR CAMPOS
   ============================================================ */
.lc-temario-builder { display: flex; flex-direction: column; gap: 8px; }
.lc-tb-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.lc-tb-sesiones, .lc-tb-notas { display: flex; flex-direction: column; gap: 10px; }
.lc-tb-sesion {
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fafcff;
}
.lc-tb-sesion-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lc-tb-drag { cursor: grab; color: #94a3b8; font-size: 1.1em; user-select: none; }
.lc-tb-badge {
    font-size: 0.68em;
    font-weight: 900;
    letter-spacing: 0.4px;
    color: #002D62;
    background: #e0edff;
    border-radius: 5px;
    padding: 3px 7px;
    white-space: nowrap;
}
.lc-tb-titulo, .lc-tb-sub-input, .lc-tb-nota-titulo, .lc-tb-nota-lineas {
    flex: 1;
    padding: 7px 10px;
    border: 1.5px solid #cbd5e1;
    border-radius: 7px;
    font-size: 0.86em;
    font-family: inherit;
}
.lc-tb-nota-lineas { width: 100%; resize: vertical; }
.lc-tb-subtemas {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 0 22px;
}
.lc-tb-subtema { display: flex; align-items: center; gap: 6px; }
.lc-tb-del {
    border: none;
    background: #fee2e2;
    color: #b91c1c;
    width: 24px; height: 24px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 800;
    flex: 0 0 auto;
    line-height: 1;
}
.lc-tb-add-sub {
    align-self: flex-start;
    border: 1px dashed #94a3b8;
    background: transparent;
    color: #475569;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.78em;
    font-weight: 700;
    cursor: pointer;
}
.lc-tb-nota {
    border: 1.5px solid #fde68a;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fffbeb;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}
.lc-tb-nota .lc-tb-del { position: absolute; top: 8px; right: 8px; }
.lc-tb-vacio { color: #94a3b8; font-size: 0.85em; font-style: italic; margin: 4px 0; }
[data-theme="dark"] .lc-tb-sesion { background: #0f1b2d; border-color: #1e3350; }
[data-theme="dark"] .lc-tb-nota { background: #2a2410; border-color: #4d4020; }