html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONSTRUCTOR DE CONTENIDO TEMÁTICO — ctb-*  v3 PREMIUM
   SIAC Blue #006bb7 · Success #2e7d32 · Shell #e2eaf5
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens de diseño ────────────────────────────────────────────────── */

.ctb-shell {
    /* Brand */
    --ctb-blue:        #006bb7;
    --ctb-blue-dk:     #004f8a;
    --ctb-blue-lt:     #1a80cc;
    --ctb-blue-bg:     #e8f3fc;
    --ctb-blue-ring:   rgba(0,107,183,.16);
    /* Success */
    --ctb-green:       #2e7d32;
    --ctb-green-bg:    #e8f5e9;
    /* Neutrals */
    --ctb-border:      #d6e0ec;
    --ctb-border-lt:   #e4edf6;
    --ctb-surface:     #ffffff;
    --ctb-bg:          #e2eaf5;   /* fondo shell azulado — contrast con cards blancos */
    /* Text */
    --ctb-txt:         #0c1a28;
    --ctb-txt-mid:     #385168;
    --ctb-txt-muted:   #647d96;
    /* Shadows */
    --ctb-shadow-xs:   0 1px 3px rgba(0,0,0,.07);
    --ctb-shadow-sm:   0 2px 10px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
    --ctb-shadow-card: 0 4px 28px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.05);
    --ctb-shadow-up:   0 -3px 20px rgba(0,0,0,.08);
    --ctb-shadow-btn:  0 4px 16px rgba(0,107,183,.32), 0 1px 4px rgba(0,107,183,.16);
    /* Radii */
    --ctb-r-sm:        7px;
    --ctb-r-md:        12px;
    --ctb-r-pill:      50px;

    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
    padding-bottom: 88px;
    background: var(--ctb-bg);
}

/* Silencia el color secundario de MudBlazor en este módulo (evita rosa/rojo) */
.ctb-shell .mud-secondary-text {
    color: var(--ctb-txt-muted) !important;
}

/* ── Stepper ─────────────────────────────────────────────────────────── */

.ctb-stepper {
    background: var(--ctb-surface);
    border-bottom: 1px solid var(--ctb-border);
    box-shadow: 0 3px 20px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05);
    position: sticky;
    top: 64px;
    z-index: 10;
}

.ctb-step-row {
    display: flex;
    align-items: center;
    padding: 0 28px;
    overflow-x: auto;
    min-height: 84px;
}

.ctb-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    min-width: 76px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.ctb-step-item--disabled {
    cursor: default;
    opacity: 0.32;
}

/* Círculo */
.ctb-step-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: box-shadow 0.25s, background 0.2s;
    line-height: 1;
}

.ctb-step-circle--idle {
    background: #edf1f6;
    color: #8a9eb5;
    border: 2px solid #cdd8e4;
}

.ctb-step-circle--visited {
    background: #e8f3fc;
    color: var(--ctb-blue);
    border: 2px solid #a4c8e8;
}

.ctb-step-circle--active {
    background: var(--ctb-blue);
    color: #fff;
    border: none;
    box-shadow:
        0 0 0 5px rgba(0,107,183,.14),
        0 0 0 9px rgba(0,107,183,.05),
        0 4px 14px rgba(0,107,183,.38);
}

.ctb-step-circle--done {
    background: var(--ctb-green);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(46,125,50,.32);
    font-size: 1rem;
}

/* Label */
.ctb-step-label {
    font-size: 0.60rem;
    line-height: 1.3;
    text-align: center;
    font-weight: 500;
    color: var(--ctb-txt-muted);
    max-width: 72px;
    letter-spacing: .01em;
}

.ctb-step-label--active {
    color: var(--ctb-blue);
    font-weight: 700;
    letter-spacing: 0;
}

.ctb-step-label--done {
    color: var(--ctb-green);
    font-weight: 600;
}

/* Conector */
.ctb-step-connector {
    flex: 1;
    min-width: 10px;
    border-radius: 2px;
    margin: 0 2px 24px;
    transition: background 0.3s, height 0.2s;
}

.ctb-step-connector--done {
    height: 2.5px;
    background: linear-gradient(90deg, var(--ctb-green) 0%, #43a047 100%);
}

.ctb-step-connector--idle {
    height: 2px;
    background: var(--ctb-border-lt);
}

/* ── Layout principal del builder ────────────────────────────────────── */

.ctb-body {
    padding: 8px 8px 0;
    flex: 1;
}

/* Flex container: ocupa toda la altura disponible del ctb-body (flex:1 viene de ctb-body) */
.ctb-layout {
    display: flex;
    flex-direction: row;   /* explícito para no heredar column de ningún padre */
    align-items: flex-start; /* panel derecho mantiene su altura natural → sticky funciona */
    gap: 10px;
}

.ctb-layout-main {
    flex: 1;
    min-width: 0;
    align-self: stretch;   /* solo el área de contenido se estira, NO el panel lateral */
    display: flex;
    flex-direction: column;
}

/* ctb-step-content hereda toda la altura de ctb-layout-main */
.ctb-step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ctb-layout-panel {
    flex-shrink: 0;
    width: 264px;
    overflow: hidden;
    transition: width 0.22s ease;
}

/* Colapsado: el panel se reduce a la tira del tab */
.ctb-layout--collapsed .ctb-layout-panel {
    width: 36px;
}

/* ── Tab colapsado ───────────────────────────────────────────────────── */

.ctb-panel-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 0 16px;
    width: 36px;
    background: linear-gradient(180deg, var(--ctb-blue) 0%, #004a8f 100%);
    border-radius: var(--ctb-r-md);
    cursor: pointer;
    position: sticky;
    top: 148px;
    user-select: none;
    transition: opacity 0.15s;
}
.ctb-panel-tab:hover { opacity: 0.82; }

.ctb-panel-tab-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.88);
    white-space: nowrap;
}

.ctb-panel-tab-badge {
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(255,255,255,0.65);
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* ── Botón de toggle en el header expandido ──────────────────────────── */

.ctb-sum-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
}

.ctb-sum-toggle-btn {
    color: rgba(255,255,255,0.75) !important;
    flex-shrink: 0;
    margin-top: -2px;
}
.ctb-sum-toggle-btn:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.12) !important;
}

/* ── Responsive: mobile — stack vertical, sin colapso lateral ────────── */
@media (max-width: 959px) {
    .ctb-layout {
        flex-direction: column;
    }
    .ctb-layout-panel,
    .ctb-layout--collapsed .ctb-layout-panel {
        width: 100%;
        overflow: visible;
    }
    .ctb-panel-tab {
        flex-direction: row;
        width: 100%;
        padding: 10px 16px;
        border-radius: var(--ctb-r-md);
        gap: 12px;
        position: static;
    }
    .ctb-panel-tab-label,
    .ctb-panel-tab-badge {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

/* ── Step content — card principal ───────────────────────────────────── */

/* Accent bar azul en el borde superior de la card del paso activo */
.ctb-step-content > .mud-paper {
    border-top: 3px solid var(--ctb-blue) !important;
    border-left: 1px solid var(--ctb-border) !important;
    border-right: 1px solid var(--ctb-border) !important;
    border-bottom: 1px solid var(--ctb-border) !important;
    border-radius: var(--ctb-r-md) !important;
    box-shadow: var(--ctb-shadow-card) !important;
    padding: 20px 24px !important;
}

/* Título del paso: más peso editorial */
.ctb-step-content .mud-typography-h6 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--ctb-txt) !important;
    letter-spacing: -0.018em !important;
    line-height: 1.3 !important;
}

/* ── Step 4 — paper compacto y encabezado ────────────────────────────── */

/* Paper específico del Step 4: padding top reducido */
.ctb-step-content > .ctb-s4-paper {
    border-top: 3px solid var(--ctb-blue) !important;
    border-left: 1px solid var(--ctb-border) !important;
    border-right: 1px solid var(--ctb-border) !important;
    border-bottom: 1px solid var(--ctb-border) !important;
    border-radius: var(--ctb-r-md) !important;
    box-shadow: var(--ctb-shadow-card) !important;
    padding: 10px 10px 12px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Encabezado compacto del Step 4 — azul institucional, idéntico al panel lateral */
.ctb-s4-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: -10px -10px 10px;
    padding: 6px 10px 7px;
    background: linear-gradient(135deg, var(--ctb-blue) 0%, var(--ctb-blue-lt) 100%);
    border-radius: var(--ctb-r-md) var(--ctb-r-md) 0 0;
}

/* ── Step 4 — paneles árbol / editor igualados en altura ───────────── */
.ctb-s4-paper .mud-grid {
    align-items: stretch;
    flex: 1;
}
.ctb-s4-paper .mud-grid-item {
    display: flex;
    flex-direction: column;
}
/* Árbol: MudPaper es raíz directa del mud-grid-item */
.ctb-s4-paper .mud-grid-item > .ctb-tree-editor {
    flex: 1;
}
/* Editor: div.ctb-detail-panel es la raíz, MudPaper está dentro */
.ctb-s4-paper .mud-grid-item > .ctb-detail-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ctb-detail-panel > .mud-paper {
    flex: 1;
}

.ctb-s4-header-left {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-shrink: 0;
}

.ctb-s4-eyebrow {
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    line-height: 1;
}

.ctb-s4-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.ctb-s4-hint {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.4;
    flex: 1;
    min-width: 120px;
}
.ctb-s4-hint strong { color: #fff; font-weight: 700; }

/* ── Footer sticky ────────────────────────────────────────────────────── */

.ctb-footer {
    position: sticky;
    bottom: 0;
    z-index: 100;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--ctb-border);
    box-shadow: var(--ctb-shadow-up);
}

.ctb-footer-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 9px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Bloque central: borrador + nombre del curso ─────────────────── */
.ctb-footer-center {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ctb-footer-draft {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.71rem;
    font-weight: 600;
    color: var(--ctb-txt-muted);
    background: #f4f6f9;
    border: 1px solid var(--ctb-border);
    padding: 3px 9px 3px 7px;
    border-radius: 10px;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ctb-footer-draft--active {
    color: var(--ctb-blue);
    background: #e3f0fb;
    border-color: #b3d4ef;
}

/* Punto verde de "guardado" dentro del pill *@
.ctb-footer-draft-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ctb-green);
    margin-left: 2px;
}

.ctb-footer-sep {
    width: 1px;
    height: 16px;
    background: var(--ctb-border);
    flex-shrink: 0;
}

.ctb-footer-nombre {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ctb-txt-mid);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.ctb-btn-save-icon {
    color: var(--ctb-txt-muted) !important;
    flex-shrink: 0;
    transition: color 0.15s !important;
}

.ctb-btn-save-icon:not([disabled]):hover {
    color: var(--ctb-blue) !important;
}

/* ── CTA Siguiente — protagonista absoluto ───────────────────────── */
.ctb-btn-next {
    background: linear-gradient(135deg, var(--ctb-blue) 0%, var(--ctb-blue-lt) 100%) !important;
    border-radius: var(--ctb-r-pill) !important;
    padding: 0 28px !important;
    height: 44px !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    letter-spacing: .02em !important;
    box-shadow: var(--ctb-shadow-btn) !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease !important;
    border: none !important;
}

.ctb-btn-next:not([disabled]):hover {
    box-shadow: 0 6px 24px rgba(0,107,183,.44), 0 2px 6px rgba(0,107,183,.20) !important;
    transform: translateY(-1px) !important;
}

.ctb-btn-next:not([disabled]):active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(0,107,183,.28) !important;
}

/* ── Atrás — outlined pill, mismo sistema que Siguiente ─────────── */
.ctb-btn-back {
    background: transparent !important;
    border: 1.5px solid var(--ctb-border) !important;
    color: var(--ctb-txt-mid) !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    border-radius: var(--ctb-r-pill) !important;
    height: 44px !important;
    padding: 0 22px !important;
    transition: border-color 0.15s, color 0.15s, background 0.15s !important;
    box-shadow: none !important;
}

.ctb-btn-back:not([disabled]):hover {
    border-color: var(--ctb-blue) !important;
    color: var(--ctb-blue) !important;
    background: #e3f0fb !important;
}

.ctb-btn-back[disabled] {
    opacity: 0.38 !important;
}

/* ── Panel de resumen ────────────────────────────────────────────────── */

.ctb-summary {
    position: sticky;
    top: 148px;
    max-height: calc(100vh - 164px);
    overflow-y: auto;
    background: var(--ctb-surface);
    border-radius: var(--ctb-r-md);
    border: 1px solid var(--ctb-border);
    box-shadow: var(--ctb-shadow-sm);
    overflow: hidden;  /* para que el header azul respete el radius */
}

/* Header del panel — block azul editorial */
.ctb-sum-header {
    background: linear-gradient(135deg, var(--ctb-blue) 0%, var(--ctb-blue-lt) 100%);
    padding: 12px 10px 12px 16px;   /* right reducido para dar espacio al botón toggle */
}

.ctb-sum-header-eyebrow {
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
    line-height: 1;
}

.ctb-sum-header-step {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    margin-top: 4px;
    line-height: 1.2;
}

/* Cuerpo del panel */
.ctb-sum-body {
    padding: 14px 16px 16px;
}

/* Barra de progreso */
.ctb-progress-track {
    height: 5px;
    border-radius: 3px;
    background: #dfe7f0;
    overflow: hidden;
    margin: 7px 0 4px;
}

.ctb-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ctb-blue) 0%, var(--ctb-blue-lt) 100%);
    transition: width 0.45s cubic-bezier(.4,0,.2,1);
    min-width: 4px;
}

/* Lista de pasos */
.ctb-sum-step {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 8px;
    border-radius: 6px;
    margin-bottom: 2px;
    border-left: 3px solid transparent;
    transition: background 0.12s;
}

.ctb-sum-step--active {
    background: var(--ctb-blue-bg);
    border-left-color: var(--ctb-blue);
}

.ctb-sum-step--pending {
    opacity: 0.40;
}

.ctb-sum-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.15s;
}

.ctb-sum-step--active .ctb-sum-dot {
    background: var(--ctb-blue);
    box-shadow: 0 0 0 3px rgba(0,107,183,.18);
}

.ctb-sum-step--done .ctb-sum-dot {
    background: var(--ctb-green);
}

.ctb-sum-step--visited .ctb-sum-dot {
    background: #a4c8e8;
}

.ctb-sum-step--pending .ctb-sum-dot {
    background: #c2cfd9;
}

.ctb-sum-label {
    font-size: 0.80rem;
    color: var(--ctb-txt);
    line-height: 1.3;
}

.ctb-sum-step--active .ctb-sum-label {
    font-weight: 700;
    color: var(--ctb-blue);
}

.ctb-sum-step--pending .ctb-sum-label {
    color: var(--ctb-txt-muted);
}

/* ── Nombre del curso en el panel expandido ─────────────────────────── */
.ctb-sum-section-label {
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ctb-txt-muted);
    margin-bottom: 4px;
}

.ctb-sum-nombre {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ctb-txt);
    line-height: 1.4;
    word-break: break-word;
    margin-bottom: 6px;
}

/* ── TipoServicio + Etiquetas derivadas ─────────────────────────────── */
.ctb-sum-tipo-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

/* Contenedor de clasificación institucional — 3 bloques semánticos */
.ctb-sum-clasif {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

/* Un bloque: label + chip(s) */
.ctb-sum-clasif-bloque {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Label de sección dentro del bloque (más pequeño que section-label) */
.ctb-sum-clasif-label {
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ctb-txt-muted);
    line-height: 1;
}

/* Variante pendiente del chip (STPS seleccionado pero tipo no elegido) */
.ctb-sum-etiqueta--pendiente {
    color: #9e9e9e;
    border-color: #e0e0e0;
    background: #f5f5f5;
    font-style: italic;
}

/* Badge CAE / CE */
.ctb-sum-tipo {
    display: inline-flex;
    align-items: center;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1.5px solid;
    flex-shrink: 0;
}

.ctb-sum-tipo--cae {
    color: var(--ctb-blue);
    background: #deeeff;
    border-color: #b3d4ef;
}

.ctb-sum-tipo--ce {
    color: #2e7d32;
    background: #e8f5e9;
    border-color: #a5d6a7;
}

/* Chips de etiquetas derivadas */
.ctb-sum-etiqueta {
    display: inline-flex;
    align-items: center;
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--ctb-txt-muted);
    background: #f4f6f9;
    border: 1px solid var(--ctb-border);
    padding: 2px 7px;
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Bloques de registro institucional (Step 3) ─────────────────────── */
.ctb-reg-bloque {
    border-left: 3px solid var(--ctb-border);
    padding-left: 12px;
    margin-bottom: 4px;
}

.ctb-reg-hijos {
    margin-top: 12px;
    padding: 12px 12px 8px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid var(--ctb-border);
}

/* ── Tab colapsado — icono "Ver mapa" (no dispara toggle) ────────────── */
.ctb-panel-tab-mapa-btn {
    color: rgba(255,255,255,0.60) !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    min-width: unset !important;
}
.ctb-panel-tab-mapa-btn:hover {
    color: rgba(255,255,255,0.95) !important;
    background: rgba(255,255,255,0.15) !important;
}

/* ── Header expandido — enlace "Ver mapa del contenido" ─────────────── */
.ctb-sum-mapa-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 9px;
    padding: 3px 8px 3px 6px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 4px;
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: rgba(255,255,255,0.78);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    text-decoration: none;
    line-height: 1.3;
}
.ctb-sum-mapa-link:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.38);
    color: #fff;
}

/* ── Tab colapsado — nombre del curso vertical ──────────────────────── */
.ctb-panel-tab-curso {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);        /* texto de abajo a arriba */
    font-size: 0.58rem;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    max-height: 110px;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: .02em;
    margin-top: 4px;
}

/* ── MudBlazor overrides (scoped a .ctb-shell) ───────────────────────── */

.ctb-shell .mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--ctb-r-sm) !important;
    border-color: var(--ctb-border) !important;
    border-width: 1px !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.ctb-shell .mud-input-outlined:not(.mud-disabled):hover .mud-input-outlined-border {
    border-color: #98bedd !important;
}

.ctb-shell .mud-focused .mud-input-outlined-border {
    border-color: var(--ctb-blue) !important;
    border-width: 1.5px !important;
    box-shadow: 0 0 0 3px rgba(0,107,183,.10) !important;
}

.ctb-shell .mud-input-label {
    font-size: 0.81rem !important;
    color: var(--ctb-txt-mid) !important;
    letter-spacing: .005em !important;
}

.ctb-shell .mud-helper-text {
    font-size: 0.71rem !important;
    color: var(--ctb-txt-muted) !important;
}

/* Reduce input/combo density — MudBlazor Dense no baja lo suficiente */
.ctb-shell .mud-input-root-outlined.mud-input-root-dense {
    padding-top: 10px !important;
    padding-bottom: 4px !important;
    min-height: 42px !important;
}

.ctb-shell .mud-input-root-outlined.mud-input-root-dense input,
.ctb-shell .mud-input-root-outlined.mud-input-root-dense textarea {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 0.875rem !important;
}

.ctb-shell .mud-input-label-outlined.mud-input-label-dense {
    font-size: 0.80rem !important;
    transform: translate(14px, 11px) scale(1) !important;
}

.ctb-shell .mud-input-label-outlined.mud-input-label-dense.mud-input-label-inputselect,
.ctb-shell .mud-input-label-outlined.mud-input-label-dense.mud-shrink {
    transform: translate(14px, -7px) scale(0.75) !important;
}

/* ── Indicador de horas ───────────────────────────────────────────────── */

/* ── Hours balance strip ─────────────────────────────────────────────── */

.ctb-hb-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 6px 10px;
    background: var(--ctb-blue-bg);
    border-left: 3px solid;          /* color via inline style según estado */
    border-radius: 0 var(--ctb-r-sm) var(--ctb-r-sm) 0;
}

.ctb-hb-left {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.ctb-hb-summary {
    font-size: 0.79rem;
    color: var(--ctb-txt);
    white-space: nowrap;
}
.ctb-hb-summary strong { font-weight: 700; }
.ctb-hb-de { color: var(--ctb-txt-muted); }

.ctb-hb-bar {
    height: 5px;
    width: 80px;
    flex-shrink: 0;
    background: #ccddef;
    border-radius: 3px;
    overflow: hidden;
}
.ctb-hb-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.35s ease;
}

.ctb-hb-msg {
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.ctb-hb-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

/* ── TemaTreeEditor ──────────────────────────────────────────────────── */

.ctb-tree-editor {
    display: flex;
    flex-direction: column;
}

.ctb-tree-list {
    flex: 1;
    min-height: 0;     /* permite que flex shrink funcione cuando el padre tiene altura definida */
    overflow-y: auto;
    margin-bottom: 0;
}

/* Botón "Agregar tema" — siempre fuera del scroll, separado visualmente */
.ctb-tree-footer {
    flex-shrink: 0;
    border-top: 1px solid #e8e8e8;
    padding-top: 8px;
    margin-top: 8px;
}

.ctb-tree-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    gap: 4px;
    color: #9e9e9e;
}

.ctb-tree-item {
    padding: 8px 4px 8px 8px;
    border-radius: var(--ctb-r-sm);
    margin-bottom: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}

.ctb-tree-item:hover {
    background: #f0f5fa;
}

.ctb-tree-item--active {
    background: var(--ctb-blue) !important;
    border-color: transparent !important;
    box-shadow: 0 2px 10px rgba(0,107,183,.30) !important;
}

.ctb-tree-item--error {
    border-color: #ef9a9a;
    background: #fff8f8;
}

.ctb-tree-item--active.ctb-tree-item--error {
    background: #b71c1c !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px rgba(183,28,28,.40) !important;
}

/* Texto blanco dentro del nodo activo ───────────────────────────── */
.ctb-tree-item--active .ctb-tree-name          { color: #fff !important; font-weight: 700 !important; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.ctb-tree-item--active .ctb-tree-name--error   { color: #ffcdd2 !important; }
.ctb-tree-item--active .ctb-tree-num           { color: rgba(255,255,255,.72) !important; }
.ctb-tree-item--active .ctb-tree-meta          { color: rgba(255,255,255,.58) !important; }
.ctb-tree-item--active .ctb-meta-collapsed     { color: rgba(255,220,130,.90) !important; }
.ctb-tree-item--active .ctb-tree-chevron       { color: rgba(255,255,255,.62) !important; }
.ctb-tree-item--active .ctb-node-state--done   { color: rgba(165,255,170,.90) !important; }
.ctb-tree-item--active .ctb-node-state--warn   { color: rgba(255,220,100,.90) !important; }
.ctb-tree-item--active .ctb-node-state--new    { color: rgba(255,255,255,.42) !important; }
.ctb-tree-item--active .ctb-actions-sep        { background: rgba(255,255,255,.25) !important; }

/* Error+activo — mismo tratamiento blanco */
.ctb-tree-item--active.ctb-tree-item--error .ctb-tree-name    { color: rgba(255,255,255,.95) !important; }
.ctb-tree-item--active.ctb-tree-item--error .ctb-tree-num     { color: rgba(255,255,255,.72) !important; }
.ctb-tree-item--active.ctb-tree-item--error .ctb-tree-meta    { color: rgba(255,255,255,.58) !important; }
.ctb-tree-item--active.ctb-tree-item--error .ctb-tree-chevron { color: rgba(255,255,255,.62) !important; }

.ctb-tree-item-num {
    min-width: 24px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #8a97a8;
    padding-top: 2px;
    flex-shrink: 0;
}

.ctb-tree-item-body {
    flex: 1;
    min-width: 0;
    padding: 0 4px;
}

.ctb-tree-item-name {
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ctb-txt);
}

.ctb-tree-item-meta {
    font-size: 0.7rem;
    color: #9e9e9e;
    margin-top: 1px;
}

.ctb-tree-item-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.ctb-tree-item:hover .ctb-tree-item-actions,
.ctb-tree-item--active .ctb-tree-item-actions {
    opacity: 1;
}

/* ── Tree nodes — inline classes usadas en TemaTreeEditor ─────────────── */

.ctb-tree-num {
    min-width: 28px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #8a97a8;
    flex-shrink: 0;
}

.ctb-tree-num--n2 { color: #90a4ae; }
.ctb-tree-num--n3 { color: #b0bec5; }

.ctb-tree-name {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ctb-txt);
}

.ctb-tree-name--error { color: #c62828; }

.ctb-tree-meta {
    font-size: 0.68rem;
    color: #bdbdbd;
    flex-shrink: 0;
    margin: 0 4px;
}

.ctb-tree-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.ctb-tree-item:hover .ctb-tree-actions {
    opacity: 1;
}

/* Active node: actions always visible with a subtle toolbar pill */
.ctb-tree-item--active .ctb-tree-actions {
    opacity: 1;
    background: rgba(255, 255, 255, 0.82);
    border-radius: 5px;
    padding: 0 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-left: 4px;
}

/* Entrance animation — fires only for genuinely new DOM elements (@key) */
@keyframes ctb-node-enter {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ctb-tree-item {
    animation: ctb-node-enter 0.18s ease;
}

/* ── Jerarquía visual por nivel ──────────────────────────────────── */

/* Nivel 1 — encabezado de sección */
.ctb-tree-item.ctb-tree-item--n1:not(.ctb-tree-item--active):not(.ctb-tree-item--error) {
    background: #eef5fd;
    border-bottom: 1px solid #d8eaf8;
}
.ctb-tree-item--n1 {
    padding: 10px 4px 10px 8px;
    margin-bottom: 6px;
    border-radius: var(--ctb-r-sm);
}
.ctb-tree-item--n1 .ctb-tree-name {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #1b3a5c !important;
}
.ctb-tree-item--n1 .ctb-tree-num--n1 {
    color: var(--ctb-blue) !important;
    font-weight: 800 !important;
    font-size: 0.8rem;
    min-width: 22px;
}
/* Nivel 1 activo — especificidad (0,3,0) vence a la regla n1 general (0,2,0) */
.ctb-tree-item--active.ctb-tree-item--n1 .ctb-tree-name {
    color: #fff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.ctb-tree-item--active.ctb-tree-item--n1 .ctb-tree-num--n1 {
    color: rgba(255,255,255,.80) !important;
}

/* Nivel 2 — con guía lateral */
.ctb-tree-item--n2 {
    padding-left: 22px;
    position: relative;
}
.ctb-tree-item--n2:not(.ctb-tree-item--active)::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 5px; bottom: 5px;
    width: 2px;
    background: #bcd4e8;
    border-radius: 1px;
    pointer-events: none;
}

/* Nivel 3 — con dos guías laterales */
.ctb-tree-item--n3 {
    padding-left: 40px;
    position: relative;
}
.ctb-tree-item--n3:not(.ctb-tree-item--active)::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 5px; bottom: 5px;
    width: 2px;
    background: #bcd4e8;
    border-radius: 1px;
    pointer-events: none;
}
.ctb-tree-item--n3:not(.ctb-tree-item--active)::after {
    content: '';
    position: absolute;
    left: 26px;
    top: 5px; bottom: 5px;
    width: 2px;
    background: #cce0f0;
    border-radius: 1px;
    pointer-events: none;
}

/* ── Cuerpo dos líneas (nombre + meta) para nodos raíz ────────────── */
.ctb-tree-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}

.ctb-meta-sep {
    display: inline-block;
    margin: 0 4px;
    color: #c5d5e0;
    font-weight: 400;
}
.ctb-tree-item--active .ctb-meta-sep { color: rgba(255,255,255,.35) !important; }

.ctb-meta-collapsed { color: #e65100; }
.ctb-tree-item--active .ctb-meta-collapsed { color: rgba(255,220,130,.90) !important; }

/* ── Chevron expand/collapse (Etapa 5) ──────────────────────────────── */

.ctb-tree-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 3px;
    cursor: pointer;
    color: #90a4ae;
    transition: background 0.1s, color 0.1s;
    margin-right: 2px;
}

.ctb-tree-chevron:hover {
    background: rgba(0,0,0,0.06);
    color: #546e7a;
}

.ctb-tree-chevron--empty {
    cursor: default;
    pointer-events: none;
}

.ctb-tree-chevron--sm {
    width: 14px;
    height: 14px;
}

/* ── Separador visual entre grupo mover y grupo estructural (Etapa 5) ─ */

.ctb-actions-sep {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: rgba(0,0,0,0.12);
    margin: 0 3px;
    flex-shrink: 0;
    align-self: center;
}

/* ── TemaDetailPanel ──────────────────────────────────────────────────── */

.ctb-detail-panel {
    height: 100%;
}

.ctb-inspector-panel {
    background: #f9fbff !important;
}

/* ── Encabezado editorial del nodo activo ────────────────────────── */
.ctb-insp-header {
    background: linear-gradient(135deg, #deeeff 0%, #eef5fd 60%, #f4f8ff 100%);
    border-left: 4px solid var(--ctb-blue);
    border-radius: 0 8px 8px 0;
    padding: 10px 12px 10px 12px;
}

.ctb-insp-header-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.ctb-insp-pos {
    display: inline-block;
    background: var(--ctb-blue);
    color: white;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 2px 11px;
    border-radius: 14px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    line-height: 1.6;
}

.ctb-insp-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0d2640;
    line-height: 1.3;
    word-break: break-word;
    margin-bottom: 6px;
}

.ctb-insp-title--empty {
    color: #9e9e9e;
    font-style: italic;
    font-weight: 400;
}

.ctb-insp-parent {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: #546e7a;
    flex-wrap: wrap;
}
.ctb-insp-parent strong { color: #2c5f82; font-weight: 600; }

/* Encabezado contextual del inspector (nivel + número + nombre + padre) */
.ctb-inspector-header {
    min-height: 56px;
}

/* Panel de búsqueda de catálogo — colapsable bajo el campo Nombre */
.ctb-catalog-search {
    background: #f5f9ff;
    border: 1px solid #bbdefb;
    border-radius: 6px;
    padding: 10px 12px;
}

/* ── Node state icons (Etapa 2) ─────────────────────────────────────── */

.ctb-node-state {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.ctb-node-state--new  { color: #bdbdbd; }
.ctb-node-state--warn { color: #ff9800; }
.ctb-node-state--done { color: #43a047; }

/* ── Badges de temas (ok / warn) ────────────────────────────────────── */

.ctb-hours-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 20px;
    line-height: 1.4;
}

.ctb-hours-badge--ok   { background: #e8f5e9; color: #2e7d32; }
.ctb-hours-badge--warn { background: #fff3e0; color: #e65100; }

/* ── Missing list inside contextual banner ──────────────────────────── */

.ctb-missing-list {
    margin: 4px 0 0 0;
    padding-left: 18px;
}

.ctb-missing-list li {
    margin-bottom: 2px;
}

/* ── Advertencia desvinculación catálogo (Etapa 3) ──────────────────── */

.ctb-desvincular-warn {
    background: #fff3e0;
    border: 1px solid #ffb74d;
    border-radius: 6px;
    padding: 8px 10px;
}

/* ── Nombre + Duración — fila única protagonista ────────────────────── */

/* Grid de 3 columnas: nombre toma 1fr, horas y minutos fijos y cómodos */
.ctb-nombre-dur-row {
    display: grid;
    grid-template-columns: 1fr 86px 96px;
    align-items: start;
    column-gap: 8px;
}
/* .ctb-nombre-col es implícito: primera celda del grid, recibe todo 1fr */

/* Inputs de duración: solo redimensionados por la cuadrícula, sin otras reglas */
.ctb-dur-hours,
.ctb-dur-mins {
    width: 100%;
    min-width: 0;
}

/* ── Biblioteca institucional — panel de edición ────────────────────── */

/* Franja compacta horizontal (estado sin vínculo) */
.ctb-bib-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 11px;
    background: #f0f6ff;
    border-left: 3px solid #9ec6e8;
    border-radius: 0 6px 6px 0;
}
.ctb-bib-strip-hint {
    flex: 1;
    font-size: 0.73rem;
    color: #37516a;
    line-height: 1.45;
}

.ctb-bib-vinculado {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #f0f6ff;
    border-radius: 6px;
    border: 1px solid #cce0f5;
}
.ctb-bib-vinculado-label { color: #2c5f82; font-weight: 500; font-size: 0.75rem; line-height: 1.3; }
.ctb-bib-vinculado-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ctb-bib-vinculado-hint { font-size: 0.70rem; color: #7a9ab4; line-height: 1.4; }

/* ── Biblioteca institucional — dialog ──────────────────────────────── */

.ctb-bib-explain {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #eef5fd 0%, #f4f8ff 100%);
    border-radius: 8px;
    border-left: 4px solid var(--ctb-blue);
}
.ctb-bib-explain-body { flex: 1; min-width: 0; }
.ctb-bib-explain-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1b3a5c;
    margin-bottom: 4px;
}
.ctb-bib-explain-text {
    font-size: 0.77rem;
    color: #456173;
    line-height: 1.55;
}
.ctb-bib-explain-text strong { color: #1b3a5c; }

.ctb-bib-count {
    font-size: 0.72rem;
    color: #7a9ab4;
    font-weight: 500;
    margin-bottom: 4px;
}

.ctb-bib-list {
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid #d8eaf8;
    border-radius: 8px;
    background: #fff;
}

.ctb-bib-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid #f0f6fc;
    cursor: pointer;
    transition: background 0.1s;
}
.ctb-bib-item:last-child { border-bottom: none; }
.ctb-bib-item:not(.ctb-bib-item--sel):hover { background: #f0f6ff; }

.ctb-bib-item--sel { background: var(--ctb-blue) !important; }

.ctb-bib-item-idx {
    font-size: 0.65rem;
    font-weight: 700;
    color: #b0c8dc;
    min-width: 22px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.ctb-bib-item--sel .ctb-bib-item-idx { color: rgba(255,255,255,.42); }

.ctb-bib-item-name {
    flex: 1;
    font-size: 0.855rem;
    font-weight: 500;
    color: #1e3a5c;
    line-height: 1.45;
    word-break: break-word;
}
.ctb-bib-item--sel .ctb-bib-item-name { color: white; font-weight: 600; }

.ctb-bib-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 0;
}

.ctb-bib-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
    gap: 8px;
}
.ctb-bib-empty-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #37516a;
}
.ctb-bib-empty-text {
    font-size: 0.77rem;
    color: #7a9ab4;
    line-height: 1.55;
    max-width: 380px;
}

.ctb-bib-seleccionado {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    overflow: hidden;
    min-width: 0;
}
.ctb-bib-sel-label { color: #9e9e9e; flex-shrink: 0; }
.ctb-bib-sel-nombre {
    color: var(--ctb-blue);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── TemaMaterialesEditor — panel externo al dialog (Etapa 4) ──────── */

.ctb-materiales-editor {
    /* contenedor del editor completo */
}

.ctb-mat-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px dashed #e0e0e0;
    border-radius: 6px;
    color: #9e9e9e;
}

.ctb-mat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ctb-mat-chip-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 3px 8px 3px 6px;
    font-size: 0.78rem;
    color: #424242;
    max-width: 220px;
}

.ctb-mat-tipo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ctb-mat-chip-nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.ctb-mat-chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #9e9e9e;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
    border-radius: 50%;
    transition: color 0.12s, background 0.12s;
}

.ctb-mat-chip-remove:hover {
    color: #c62828;
    background: #ffebee;
}

/* ── Tabla formal de relación de materiales ─────────────────────────── */

.ctb-mat-tabla-wrap {
    border: 1px solid var(--ctb-border);
    border-radius: var(--ctb-r-sm);
    overflow: hidden;
    margin-top: 4px;
}

.ctb-mat-tabla-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px 6px 12px;
    background: #f0f5fb;
    border-bottom: 1px solid var(--ctb-border);
}

.ctb-mat-tabla-title {
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ctb-txt-muted);
}

.ctb-mat-export-btn {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: var(--ctb-blue) !important;
    text-transform: none !important;
    min-width: 0 !important;
    padding: 0 6px !important;
    height: 26px !important;
    opacity: 0.8;
    transition: opacity 0.15s !important;
}

.ctb-mat-export-btn:hover {
    opacity: 1 !important;
}

.ctb-mat-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.ctb-mat-th {
    padding: 5px 10px;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ctb-txt-muted);
    background: #f8fafd;
    border-bottom: 1px solid var(--ctb-border);
    white-space: nowrap;
    user-select: none;
}

.ctb-mat-th--num  { width: 32px; text-align: center; color: var(--ctb-border); }
.ctb-mat-th--tipo { width: 130px; }

.ctb-mat-td {
    padding: 5px 10px;
    color: var(--ctb-txt);
    border-bottom: 1px solid var(--ctb-border-lt);
    vertical-align: middle;
    line-height: 1.35;
}

.ctb-mat-td--num {
    text-align: center;
    color: var(--ctb-txt-muted);
    font-size: 0.68rem;
}

.ctb-mat-td--tipo { white-space: nowrap; }

.ctb-mat-tr--alt td {
    background: #f8fafd;
}

/* Pill de tipo en la tabla — usa CSS custom property para el color del punto */
.ctb-mat-tipo-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--ctb-txt-mid);
}

.ctb-mat-tipo-pill::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tipo-color, #9e9e9e);
    flex-shrink: 0;
}

/* ── MaterialSelectorDialog — contenido del dialog (Etapa 4) ─────────── */

.ctb-mat-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ctb-mat-filtro-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.12s;
}

.ctb-mat-filtro-chip:hover {
    opacity: 0.85;
}

.ctb-mat-filtro-count {
    background: rgba(0,0,0,0.12);
    border-radius: 10px;
    padding: 0 5px;
    font-size: 0.68rem;
    font-weight: 700;
}

.ctb-mat-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.ctb-mat-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.1s;
}

.ctb-mat-row:last-child {
    border-bottom: none;
}

.ctb-mat-row:hover {
    background: #f5f9ff;
}

.ctb-mat-row--sel {
    background: #e8f4fd !important;
}

.ctb-mat-nombre {
    flex: 1;
    font-size: 0.82rem;
    color: #212121;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctb-mat-tipo-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* ── RecursoAdjuntoCard ──────────────────────────────────────────────── */

.ctb-rec-item {
    display: flex;
}

.ctb-recurso-card {
    border-radius: var(--ctb-r-md) !important;
    border: 1px solid var(--ctb-border) !important;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 240px;
    gap: 10px;
}

.ctb-recurso-card:hover {
    border-color: #a8c8e8 !important;
    box-shadow: var(--ctb-shadow-sm) !important;
    transform: translateY(-1px);
}

.ctb-rec-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.ctb-rec-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.ctb-rec-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f3f7fb;
}

.ctb-rec-title-block {
    min-width: 0;
}

.ctb-rec-title {
    line-height: 1.25;
    margin-bottom: 2px;
}

.ctb-rec-subtitle {
    line-height: 1.35;
    word-break: normal;
}

.ctb-rec-chip {
    flex-shrink: 0;
    margin-top: 1px;
}

.ctb-rec-file-row {
    background: #f8fbff;
    border: 1px solid #e7eef6;
    border-radius: 8px;
    padding: 7px 8px;
}

.ctb-rec-upload {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ctb-rec-upload-btn {
    align-self: flex-start;
}

.ctb-rec-format {
    line-height: 1.35;
}

@media (max-width: 960px) {
    .ctb-recurso-card {
        min-height: 228px;
    }
}

@media (max-width: 600px) {
    .ctb-recurso-card {
        min-height: unset;
    }
}

/* ── Elaboradores ─────────────────────────────────────────────────────── */

/* ── Bibliografías editor ─────────────────────────────────────────────────── */

.ctb-bib-section-label {
    display: flex;
    align-items: center;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #78909c;
    margin-bottom: 8px;
    line-height: 1.2;
}

.ctb-bib-autores-bloque {
    background: #f8fafc;
    border: 1px solid #e8edf2;
    border-radius: 6px;
    padding: 10px 12px 4px;
    margin-bottom: 16px;
}

.ctb-bib-autor-num {
    min-width: 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ctb-blue-bg);
    color: var(--ctb-blue);
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 8px;
}

.ctb-bib-apa-result {
    background: #f0f7ff;
    border: 1px solid #bbdefb;
    border-left: 4px solid var(--ctb-blue);
    border-radius: 4px;
    padding: 10px 14px;
}

.ctb-bib-apa-label {
    display: flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ctb-blue);
    margin-bottom: 5px;
}

.ctb-bib-apa-text {
    font-size: 0.82rem;
    color: #1a2a3a;
    line-height: 1.55;
    font-style: italic;
}

/* ── Elaboradores editor ─────────────────────────────────────────────────── */

.ctb-elab-row {
    transition: box-shadow 0.12s;
}

.ctb-elab-row:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
}

.ctb-elab-num {
    min-width: 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ctb-blue-bg);
    color: var(--ctb-blue);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 10px;
}

/* ══════════════════════════════════════════════════════════════════════════
   CTB — Estructura Completa Drawer
   Overlay fixed que cubre toda la pantalla independientemente del layout.
══════════════════════════════════════════════════════════════════════════ */

/* ── Drawer: Estructura Completa ─────────────────────────────────────── */

.ctb-est-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1300;
    display: flex;
    justify-content: flex-end;
    backdrop-filter: blur(1px);
}

.ctb-est-panel {
    width: 580px;
    max-width: 94vw;
    height: 100%;
    background: #fff;
    box-shadow: -6px 0 36px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ctb-est-slidein 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ctb-est-slidein {
    from { transform: translateX(100%); opacity: 0.6; }
    to   { transform: translateX(0);    opacity: 1;   }
}

/* ── Header con acento institucional ─────────────────────────────────── */

.ctb-est-panel-header {
    background: linear-gradient(135deg, #003d7a 0%, #006bb7 100%);
    padding: 16px 20px 14px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ctb-est-panel-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ctb-est-panel-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ctb-est-header-label {
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.60);
}

.ctb-est-header-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}

.ctb-est-header-count {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 12px;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255,255,255,0.22);
}

.ctb-est-close-btn {
    color: rgba(255,255,255,0.78) !important;
    flex-shrink: 0;
    margin-top: -4px;
}
.ctb-est-close-btn:hover {
    color: white !important;
    background: rgba(255,255,255,0.12) !important;
}

/* ── Leyenda de estados ──────────────────────────────────────────────── */

.ctb-est-leyenda {
    display: flex;
    gap: 16px;
    padding: 8px 20px;
    background: #f0f6ff;
    border-bottom: 1px solid #d8eaf8;
    flex-shrink: 0;
}

.ctb-est-leyenda-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.71rem;
    color: #546e7a;
    font-weight: 500;
}

/* ── Cuerpo scrollable ───────────────────────────────────────────────── */

.ctb-est-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0 20px;
    background: #f9fbff;
}

/* ── Separador visual entre temas raíz ──────────────────────────────── */

.ctb-est-separador-grupo {
    height: 10px;
}

/* ── Nodo base ───────────────────────────────────────────────────────── */

.ctb-est-nodo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.1s ease, border-left-color 0.1s ease;
    user-select: none;
}

/* Active: blanco sobre azul — coherente con el árbol principal */
.ctb-est-nodo--activo {
    background: var(--ctb-blue) !important;
    border-left-color: #003d7a !important;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);
}
.ctb-est-nodo--activo .ctb-est-nodo-nombre,
.ctb-est-nodo--activo .ctb-est-nodo-nombre--n2,
.ctb-est-nodo--activo .ctb-est-nodo-nombre--n3    { color: white !important; font-weight: 600 !important; }
.ctb-est-nodo--activo .ctb-est-nodo-meta          { color: rgba(255,255,255,.58) !important; }
.ctb-est-nodo--activo .ctb-est-nodo-num,
.ctb-est-nodo--activo .ctb-est-nodo-num--n2,
.ctb-est-nodo--activo .ctb-est-nodo-num--n3       { color: rgba(255,255,255,.72) !important; }
.ctb-est-nodo--activo .ctb-node-state--done        { color: rgba(165,255,170,.85) !important; }
.ctb-est-nodo--activo .ctb-node-state--warn        { color: rgba(255,220,100,.85) !important; }
.ctb-est-nodo--activo .ctb-node-state--new         { color: rgba(255,255,255,.45) !important; }
.ctb-est-nodo--activo .ctb-est-meta-sep            { color: rgba(255,255,255,.30) !important; }

/* ── Nivel 1 — encabezado de tema (sección principal) ───────────────── */

.ctb-est-nodo--n1 {
    background: #eef5fd;
    border-left-color: #9ec6e8;
    padding: 12px 20px 11px 20px;
    margin-bottom: 1px;
}
.ctb-est-nodo--n1:not(.ctb-est-nodo--activo):hover {
    background: #e3eef9;
    border-left-color: var(--ctb-blue);
}
.ctb-est-nodo--n1 .ctb-est-nodo-nombre {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1b3a5c;
}

/* ── Nivel 2 — subtema ───────────────────────────────────────────────── */

.ctb-est-nodo--n2 {
    background: #ffffff;
    padding: 9px 20px 8px 36px;
    position: relative;
    border-bottom: 1px solid #f3f3f3;
}
.ctb-est-nodo--n2:not(.ctb-est-nodo--activo)::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 0; bottom: 0;
    width: 2px;
    background: #bcd4e8;
}
.ctb-est-nodo--n2:not(.ctb-est-nodo--activo):hover {
    background: #f5f9ff;
}

/* ── Nivel 3 — subsubtema ────────────────────────────────────────────── */

.ctb-est-nodo--n3 {
    background: #fafafa;
    padding: 7px 20px 7px 56px;
    position: relative;
    border-bottom: 1px solid #f3f3f3;
}
.ctb-est-nodo--n3:not(.ctb-est-nodo--activo)::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 0; bottom: 0;
    width: 2px;
    background: #bcd4e8;
}
.ctb-est-nodo--n3:not(.ctb-est-nodo--activo)::after {
    content: '';
    position: absolute;
    left: 40px;
    top: 0; bottom: 0;
    width: 2px;
    background: #d6e8f5;
}
.ctb-est-nodo--n3:not(.ctb-est-nodo--activo):hover {
    background: #f4f7fc;
}

/* ── Numeración ──────────────────────────────────────────────────────── */

.ctb-est-nodo-num {
    font-size: 0.73rem;
    font-weight: 800;
    color: var(--ctb-blue);
    min-width: 32px;
    flex-shrink: 0;
    padding-top: 2px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.ctb-est-nodo-num--n2 {
    font-size: 0.68rem;
    font-weight: 700;
    color: #5590bb;
    min-width: 38px;
}

.ctb-est-nodo-num--n3 {
    font-size: 0.63rem;
    font-weight: 600;
    color: #7eb3d4;
    min-width: 44px;
}

/* ── Contenido ───────────────────────────────────────────────────────── */

.ctb-est-nodo-content {
    flex: 1;
    min-width: 0;
}

.ctb-est-nodo-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.ctb-est-nodo-nombre {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e3a5c;
    word-break: break-word;
    line-height: 1.45;
    flex: 1;
}

.ctb-est-nodo-nombre--n2 {
    font-size: 0.845rem;
    font-weight: 400;
    color: #37516a;
}

.ctb-est-nodo-nombre--n3 {
    font-size: 0.81rem;
    font-weight: 400;
    color: #546e7a;
    font-style: italic;
}

.ctb-est-nodo-meta {
    font-size: 0.70rem;
    color: #8fa8bc;
    margin-top: 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    line-height: 1.4;
}

.ctb-est-meta-sep {
    display: inline-block;
    margin: 0 5px;
    color: #c5d5e0;
}

/* ── Marcador: punto que indica el nodo actualmente en edición ───────── */

.ctb-est-active-marker {
    flex-shrink: 0;
    color: white !important;
    font-size: 0.55rem !important;
    margin-top: 5px;
    opacity: 0.90;
}

.ctb-est-active-marker--sm {
    font-size: 0.50rem !important;
    margin-top: 4px;
}

/* ── Estado vacío ────────────────────────────────────────────────────── */

.ctb-est-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 10px;
}

/* ── Pie ─────────────────────────────────────────────────────────────── */

.ctb-est-panel-footer {
    padding: 10px 20px;
    border-top: 2px solid #d8eaf8;
    background: #f0f6ff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ctb-est-footer-stat {
    font-size: 0.72rem;
    color: #2c5f82;
    font-weight: 600;
}

.ctb-est-footer-hint {
    font-size: 0.70rem;
    color: #7a9ab4;
}

/* ── MapaActualContenidoDialog ─────────────────────────────────────────── */

.mapa-bloque {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
}

.mapa-bloque-titulo {
    display: flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #334155;
    margin-bottom: 10px;
}

.mapa-info-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mapa-info-item {
    display: flex;
    gap: 8px;
    align-items: baseline;
    min-height: 18px;
}

.mapa-info-label {
    font-size: 0.67rem;
    color: #64748b;
    min-width: 108px;
    flex-shrink: 0;
}

.mapa-info-value {
    font-size: 0.76rem;
    color: #0f172a;
    font-weight: 500;
    word-break: break-word;
}

.mapa-sin-dato {
    font-size: 0.74rem;
    color: #94a3b8;
    font-style: italic;
}

.mapa-nota {
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.4;
}

/* Chips de tipo de servicio — espeja los del panel lateral */
.mapa-chip-tipo {
    display: inline-flex;
    align-items: center;
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 11px;
    border-radius: 12px;
    border: 1.5px solid;
}

.mapa-chip-tipo--cae {
    color: #1565c0;
    background: #deeeff;
    border-color: #b3d4ef;
}

.mapa-chip-tipo--ce {
    color: #2e7d32;
    background: #e8f5e9;
    border-color: #a5d6a7;
}

/* Chips de etiquetas institucionales */
.mapa-chip-etiqueta {
    display: inline-flex;
    align-items: center;
    font-size: 0.70rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 10px;
    border: 1px solid;
}

.mapa-chip-pendiente {
    color: #9e9e9e;
    border-color: #e0e0e0;
    background: #f5f5f5;
    font-style: italic;
}

/* Grid de métricas del builder (2 columnas) */
.mapa-estado-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mapa-estado-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
}

.mapa-estado-valor {
    font-size: 0.86rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.mapa-estado-label {
    font-size: 0.62rem;
    color: #94a3b8;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.mapa-ok { color: #2e7d32; }

/* Timeline de ruta institucional */
.mapa-ruta {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0;
    padding: 4px 0 8px;
}

.mapa-ruta-nodo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 72px;
    max-width: 88px;
}

.mapa-ruta-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #cfd8dc;
    border: 2px solid #b0bec5;
    flex-shrink: 0;
}

.mapa-ruta-nodo--actual .mapa-ruta-dot {
    background: #1565c0;
    border-color: #1565c0;
    box-shadow: 0 0 0 4px #deeeff;
}

.mapa-ruta-nodo--especial .mapa-ruta-dot {
    background: #ffffff;
    border: 2px dashed #90a4ae;
}

.mapa-ruta-texto {
    font-size: 0.62rem;
    text-align: center;
    color: #546e7a;
    white-space: pre-wrap;
    line-height: 1.25;
}

.mapa-ruta-nodo--actual .mapa-ruta-texto {
    color: #1565c0;
    font-weight: 700;
}

.mapa-ruta-nodo--especial .mapa-ruta-texto {
    color: #90a4ae;
    font-style: italic;
}

.mapa-ruta-conector {
    font-size: 0.78rem;
    color: #b0bec5;
    padding: 0 2px;
    padding-bottom: 14px; /* alinea con el punto, no con el texto */
    flex-shrink: 0;
    align-self: flex-start;
    line-height: 11px;
    margin-top: 0;
}

/* ══════════════════════════════════════════════════════════════════
   VISTA PREVIA DEL BORRADOR — MapaActualContenidoDialog
   ══════════════════════════════════════════════════════════════════ */

:root {
    --ctb-green:  #2e7d32;
    --ctb-orange: #e65100;
    --ctb-blue:   #1565c0;
}

.ctb-prev-doc {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 0.84rem;
    color: #1a2332;
    max-width: 860px;
    margin: 0 auto;
}

/* ── Encabezado ─────────────────────────────────────────────────── */
.ctb-prev-doc-header {
    background: linear-gradient(135deg, #1565c0 0%, #1976d2 60%, #42a5f5 100%);
    color: white;
    border-radius: 10px;
    padding: 20px 24px 18px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(21,101,192,.22);
}

.ctb-prev-doc-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.70rem;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,.70);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.ctb-prev-badge-borrador {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
}

.ctb-prev-badge-guardado {
    background: rgba(76,175,80,.28);
    border: 1px solid rgba(76,175,80,.45);
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #a5d6a7;
}

.ctb-prev-doc-nombre {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 10px;
    color: #fff;
}

.ctb-prev-doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.ctb-prev-meta-chip {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.70rem;
    color: rgba(255,255,255,.90);
}

.ctb-prev-meta-chip--tipo {
    background: rgba(255,193,7,.20);
    border-color: rgba(255,193,7,.35);
}

.ctb-prev-meta-chip--paso {
    background: rgba(255,255,255,.22);
    font-weight: 600;
}

.ctb-prev-doc-ruta {
    font-size: 0.70rem;
    color: rgba(255,255,255,.65);
    margin-top: 4px;
}

/* ── Secciones ──────────────────────────────────────────────────── */
.ctb-prev-section {
    border: 1px solid #e0e7ef;
    border-radius: 8px;
    margin-bottom: 14px;
    overflow: hidden;
}

.ctb-prev-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f0f4f9;
    border-bottom: 1px solid #e0e7ef;
    padding: 8px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #344361;
    letter-spacing: 0.02em;
}

.ctb-prev-section-badge {
    margin-left: auto;
    background: #1565c0;
    color: white;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 0.65rem;
    font-weight: 600;
}

.ctb-prev-section-body {
    padding: 14px;
}

/* ── Campos label/value ─────────────────────────────────────────── */
.ctb-prev-field-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: #78909c;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

.ctb-prev-field-value {
    font-size: 0.82rem;
    color: #1a2332;
    line-height: 1.45;
    margin-top: 2px;
}

.ctb-prev-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px 18px;
}

/* ── Etiquetas ──────────────────────────────────────────────────── */
.ctb-prev-etiqueta {
    display: inline-flex;
    align-items: center;
    border: 1px solid;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.70rem;
    font-weight: 600;
    line-height: 1.6;
}

.ctb-prev-etiqueta--pending {
    background: #fff3e018;
    border-color: #f57c0055;
    color: #e65100;
}

/* ── Bloques condicionales (STPS / Cert / Convenio) ─────────────── */
.ctb-prev-cond-block {
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 10px;
}

.ctb-prev-cond-block--stps  { background: #fff3e0; border: 1px solid #ffe0b2; }
.ctb-prev-cond-block--cert  { background: #e8eaf6; border: 1px solid #c5cae9; }
.ctb-prev-cond-block--conv  { background: #f3e5f5; border: 1px solid #e1bee7; }

.ctb-prev-cond-title {
    font-size: 0.70rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #546e7a;
    margin-bottom: 8px;
}

/* ── Tabla de temas ──────────────────────────────────────────────── */
.ctb-prev-topics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.80rem;
}

.ctb-prev-topics-table thead tr {
    background: #e3f2fd;
}

.ctb-prev-topics-table th {
    text-align: left;
    padding: 6px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #1565c0;
    border-bottom: 2px solid #bbdefb;
    white-space: nowrap;
}

.ctb-prev-topics-table td {
    padding: 5px 10px;
    border-bottom: 1px solid #f0f4f9;
    vertical-align: top;
}

.ctb-prev-l1 { background: #fafbfe; }
.ctb-prev-l1 .ctb-prev-td-tema { font-weight: 600; color: #1a2332; }
.ctb-prev-l2 { background: #f9f9f9; }
.ctb-prev-l2 .ctb-prev-td-subtema { padding-left: 20px; color: #37474f; }
.ctb-prev-l3 { background: #fcfcfc; }
.ctb-prev-l3 .ctb-prev-td-subsubtema { padding-left: 34px; color: #546e7a; font-size: 0.77rem; }

.ctb-prev-td-num  { color: #90a4ae; font-size: 0.72rem; white-space: nowrap; }
.ctb-prev-td-dur  { text-align: right; white-space: nowrap; font-size: 0.78rem; }
.ctb-prev-td-mats { line-height: 1.6; }

/* ── Chips de materiales ─────────────────────────────────────────── */
.ctb-prev-mat-chip {
    display: inline-block;
    border: 1px solid;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.65rem;
    font-weight: 500;
    margin-right: 3px;
    margin-bottom: 2px;
    white-space: nowrap;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* ── Chips de instrumentos evaluación ───────────────────────────── */
.ctb-prev-inst-chip {
    display: inline-block;
    background: #e8eaf6;
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 0.68rem;
    color: #3949ab;
    font-weight: 500;
}

/* ── Resumen de horas ────────────────────────────────────────────── */
.ctb-prev-horas-resumen {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f8f9fa;
    border-top: 1px solid #e8ecf0;
    font-size: 0.78rem;
    color: #546e7a;
}

.ctb-prev-horas-label { color: #78909c; font-size: 0.75rem; }
.ctb-prev-horas-ok    { font-weight: 700; color: var(--ctb-green); font-size: 0.88rem; }
.ctb-prev-horas-parcial { font-weight: 700; color: var(--ctb-orange); font-size: 0.88rem; }
.ctb-prev-horas-sep   { color: #cfd8dc; font-size: 0.88rem; }

/* ── Recurso adjunto ─────────────────────────────────────────────── */
.ctb-prev-recurso-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 8px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #eceff1;
}

/* ── Tabla de elaboradores ───────────────────────────────────────── */
.ctb-prev-elab-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.80rem;
}

.ctb-prev-elab-table th {
    text-align: left;
    padding: 5px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #546e7a;
    background: #f0f4f9;
    border-bottom: 1px solid #dde3ea;
}

.ctb-prev-elab-table td {
    padding: 5px 10px;
    border-bottom: 1px solid #f0f4f9;
    color: #37474f;
}

/* ── Referencia APA ──────────────────────────────────────────────── */
.ctb-prev-apa-ref {
    padding: 5px 10px;
    margin-bottom: 5px;
    background: #f8fbff;
    border-left: 3px solid #90caf9;
    border-radius: 0 4px 4px 0;
    font-size: 0.78rem;
    color: #263238;
    line-height: 1.5;
}

/* ── Grid de estadísticas del borrador ──────────────────────────── */
.ctb-prev-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}

.ctb-prev-stat-card {
    background: #f8f9fa;
    border: 1px solid #e8ecf0;
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
}

.ctb-prev-stat-card--ok {
    background: #e8f5e9;
    border-color: #a5d6a7;
}

.ctb-prev-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a2332;
    line-height: 1.2;
}

.ctb-prev-stat-ok    { color: var(--ctb-green); }
.ctb-prev-stat-muted { color: #b0bec5; }

.ctb-prev-stat-label {
    font-size: 0.65rem;
    color: #78909c;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Estado vacío ────────────────────────────────────────────────── */
.ctb-prev-empty {
    font-size: 0.78rem;
    color: #b0bec5;
    font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════════
   CONSTRUCTOR DE CAPACITACIÓN INTENSIVA — paleta naranja institucional
   Hermano real de los .ctb-* (builder principal de Contenidos Temáticos).
   Misma estructura, misma lógica de composición; accent #e65100 / #fff8f1.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Variables CSS naranja — espejo de --ctb-* en paleta CI ──────── */
.ci-builder-shell {
    --ci-orange:      #e65100;
    --ci-orange-dk:   #bf360c;
    --ci-orange-lt:   #f57c00;
    --ci-orange-bg:   #fff3e0;
    --ci-orange-ring: rgba(230,81,0,.16);
    --ci-green:       #2e7d32;
    --ci-border:      #ffe0b2;
    --ci-border-lt:   #fff3e0;
    --ci-surface:     #ffffff;
    --ci-bg:          #fff8f1;
    --ci-txt:         #1a0a00;
    --ci-txt-mid:     #5d3317;
    --ci-txt-muted:   #9e6636;
    --ci-shadow-xs:   0 1px 3px rgba(0,0,0,.07);
    --ci-shadow-sm:   0 2px 10px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
    --ci-shadow-up:   0 -3px 20px rgba(0,0,0,.08);
    --ci-shadow-btn:  0 4px 16px rgba(230,81,0,.32), 0 1px 4px rgba(230,81,0,.16);
    --ci-r-sm:        7px;
    --ci-r-md:        12px;
    --ci-r-pill:      50px;

    background: linear-gradient(180deg, #fff8f1 0%, #ffffff 320px);
    padding: 10px 12px 0;   /* sin padding-bottom: el ci-footer lo gestiona */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}

/* ── Cabecera sticky — acción + stepper bajo el AppBar (64px) ───────── */
/*    Usa margin negativo para romper el padding del shell y quedar        */
/*    borde a borde, igual que lo hace ctb-stepper en el builder hermano.  */
.ci-builder-header {
    position: sticky;
    top: 64px;
    z-index: 10;
    background: #fff8f1;    /* coincide con el inicio del gradiente del shell */
    margin: -10px -12px 0;  /* cancela padding del shell para quedar flush */
    padding: 0 14px 2px;    /* restaura padding interno; 2px extra en base */
    border-bottom: 1px solid rgba(230,81,0,.12);
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    border-radius: 12px 12px 0 0;
}

/* Layout principal: contenido + panel lateral */
.ci-builder-body {
    display: grid;
    grid-template-columns: 1fr 310px;
    gap: 12px;
    margin-top: 8px;
    align-items: start;
}
@media (max-width: 1440px) {
    .ci-builder-body { grid-template-columns: 1fr 290px; }
}
@media (max-width: 1280px) {
    .ci-builder-body { grid-template-columns: 1fr 270px; gap: 10px; }
}
@media (max-width: 1100px) {
    .ci-builder-body { grid-template-columns: 1fr 250px; gap: 8px; }
}
@media (max-width: 992px) {
    .ci-builder-body { grid-template-columns: 1fr; }
    .ci-builder-side { position: static !important; max-height: none !important; }
}
.ci-builder-main {
    background: #ffffff;
    border: 1px solid #ede0d6;
    border-radius: 10px;
    padding: 16px 20px;
    min-height: 420px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    min-width: 0;
}
/* Side sticky bajo el MudAppBar (64 px) + ci-builder-header (~86 px) + gap (8 px).
   Total: 158 px. overflow-y en el contenedor; el .ci-sum interno hereda max-height. */
.ci-builder-side {
    align-self: start;
    position: sticky;
    top: 158px;
    max-height: calc(100vh - 174px);
    overflow-y: auto;
    transition: width 0.22s ease;
}

/* ── Colapso del panel lateral ──────────────────────────────────────── */
.ci-layout--collapsed {
    grid-template-columns: 1fr 40px !important;
}
.ci-builder-side--collapsed {
    overflow: visible;
}

/* Tab vertical (panel colapsado) */
.ci-panel-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 0 16px;
    width: 36px;
    background: linear-gradient(180deg, #e65100 0%, #bf360c 100%);
    border-radius: 10px;
    cursor: pointer;
    position: sticky;
    top: 158px;
    user-select: none;
    transition: opacity 0.15s;
}
.ci-panel-tab:hover { opacity: 0.82; }

.ci-panel-tab-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.88);
    white-space: nowrap;
}
.ci-panel-tab-badge {
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(255,255,255,0.65);
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.ci-panel-tab-curso {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.60rem;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 120px;
}

/* Botón toggle en el header expandido */
.ci-sum-toggle-btn {
    color: rgba(255,255,255,0.75) !important;
    flex-shrink: 0;
    margin-top: -2px;
}
.ci-sum-toggle-btn:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.12) !important;
}
.ci-loading {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 60px 0;
}

/* ── Stepper horizontal premium — fondo blanco, acento naranja suave ── */
.ci-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid rgba(230,81,0,.13);
    border-bottom: 2px solid rgba(230,81,0,.16);
    margin: 3px 0 8px;
    overflow-x: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.ci-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: #b0906e;
    font-size: .60rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: default;
    padding: 4px 8px;
    border-radius: 7px;
    transition: color .15s, background .15s;
    min-width: 62px;
    text-align: center;
}
.ci-step-clickable { cursor: pointer; }
.ci-step-clickable:hover {
    color: #e65100;
    background: rgba(230,81,0,.05);
}
.ci-step-num {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(230,81,0,.07);
    color: #b0906e;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .72rem;
    border: 1.5px solid rgba(230,81,0,.15);
    transition: all .18s;
}
.ci-step-label { font-size: .59rem; line-height: 1.15; max-width: 72px; }
.ci-step-active { color: #e65100; }
.ci-step-active .ci-step-num {
    background: #e65100;
    color: #ffffff;
    border-color: #e65100;
    box-shadow: 0 0 0 3px rgba(230,81,0,.16);
    transform: scale(1.04);
}
.ci-step-done { color: #6d9e73; }
.ci-step-done .ci-step-num {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #a5d6a7;
}
.ci-step-done .ci-step-num::before { content: "✓"; }
.ci-step-done .ci-step-num span { display: none; }
.ci-step-sep {
    flex: 1;
    height: 1.5px;
    background: rgba(230,81,0,.10);
    margin: 0 4px;
    min-width: 14px;
    border-radius: 1px;
}

/* ── Panel lateral resumen ───────────────────────────────────────── */
.ci-side-card {
    background: #ffffff;
    border: 1px solid #ffe0b2;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(191, 54, 12, .04);
}
.ci-side-header {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ffe0b2;
    margin-bottom: 12px;
}
.ci-side-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: #fff3e0;
    border: 1px solid #ffcc80;
    display: flex; align-items: center; justify-content: center;
    color: #bf360c;
}
.ci-side-title {
    font-size: .85rem;
    font-weight: 700;
    color: #212121;
    line-height: 1.2;
}
.ci-side-sub {
    font-size: .65rem;
    color: #9e9e9e;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 700;
}
.ci-side-row {
    display: flex; flex-direction: column;
    padding: 8px 0;
    border-bottom: 1px solid #fff3e0;
}
.ci-side-row:last-child { border-bottom: none; }
.ci-side-row-label {
    font-size: .62rem; color: #9e9e9e; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px;
}
.ci-side-row-value {
    font-size: .82rem; color: #212121; font-weight: 600;
    margin-top: 2px; line-height: 1.3;
    word-break: break-word;
}
.ci-side-row-value.empty { color: #bdbdbd; font-style: italic; font-weight: 500; }

.ci-side-kpis {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px; margin: 12px 0;
}
.ci-side-kpi {
    background: #fff8f1;
    border: 1px solid #ffe0b2;
    border-radius: 8px;
    padding: 8px 10px;
    text-align: center;
}
.ci-side-kpi-value {
    font-size: 1.1rem; font-weight: 800; color: #e65100; line-height: 1;
}
.ci-side-kpi-label {
    font-size: .58rem; color: #9e9e9e; font-weight: 700;
    text-transform: uppercase; letter-spacing: .3px;
    margin-top: 2px;
}
.ci-side-warn {
    background: #fff3e0;
    border: 1px solid #ffcc80;
    border-left: 3px solid #e65100;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: .72rem;
    color: #bf360c;
    margin-top: 10px;
    line-height: 1.4;
}

/* ── Footer premium ──────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════
   FOOTER PREMIUM — hermano real de .ctb-footer
   Tres zonas: Atrás pill | borrador + nombre + save | Siguiente pill
   ════════════════════════════════════════════════════════════════════ */
.ci-footer {
    position: sticky;
    bottom: 0;
    z-index: 100;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--ci-border);
    box-shadow: var(--ci-shadow-up);
    margin: 8px -12px 0;   /* cancela el padding lateral del shell */
}

.ci-footer-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 7px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Zona central: borrador + nombre + save icon */
.ci-footer-center {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Pill de estado de borrador */
.ci-footer-draft {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--ci-txt-muted);
    background: #f4f6f9;
    border: 1px solid #e0e0e0;
    padding: 2px 8px 2px 6px;
    border-radius: 10px;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ci-footer-draft--active {
    color: var(--ci-orange);
    background: var(--ci-orange-bg);
    border-color: #ffcc80;
}

/* Punto verde de "guardado" */
.ci-footer-draft-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ci-green);
    margin-left: 2px;
}

.ci-footer-sep {
    width: 1px;
    height: 16px;
    background: #e0e0e0;
    flex-shrink: 0;
}

.ci-footer-nombre {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--ci-txt-mid);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

/* Guardar icono — discreto, no CTA dominante */
.ci-btn-save-icon {
    color: var(--ci-txt-muted) !important;
    flex-shrink: 0;
    transition: color 0.15s !important;
}
.ci-btn-save-icon:not([disabled]):hover {
    color: var(--ci-orange) !important;
}

/* CTA Siguiente — protagonista principal, naranja suavizado */
.ci-btn-next {
    background: linear-gradient(135deg, #c04918 0%, #d9571e 60%, #e87030 100%) !important;
    border-radius: var(--ci-r-pill) !important;
    padding: 0 22px !important;
    height: 38px !important;
    font-weight: 700 !important;
    font-size: 0.83rem !important;
    letter-spacing: .02em !important;
    box-shadow: 0 3px 12px rgba(192,73,24,.26), 0 1px 3px rgba(192,73,24,.14) !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease !important;
    border: none !important;
    color: #fff !important;
}
.ci-btn-next:not([disabled]):hover {
    box-shadow: 0 6px 22px rgba(192,73,24,.40), 0 2px 6px rgba(192,73,24,.18) !important;
    transform: translateY(-1px) !important;
}
.ci-btn-next:not([disabled]):active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(192,73,24,.24) !important;
}

/* CTA Guardar ficha — protagonista verde */
.ci-btn-guardar {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%) !important;
    border-radius: var(--ci-r-pill) !important;
    padding: 0 22px !important;
    height: 38px !important;
    font-weight: 700 !important;
    font-size: 0.83rem !important;
    letter-spacing: .02em !important;
    box-shadow: 0 3px 14px rgba(27,94,32,.28), 0 1px 3px rgba(27,94,32,.14) !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease !important;
    border: none !important;
    color: #fff !important;
}
.ci-btn-guardar:not([disabled]):hover {
    box-shadow: 0 6px 24px rgba(27,94,32,.44), 0 2px 6px rgba(27,94,32,.20) !important;
    transform: translateY(-1px) !important;
}
.ci-btn-guardar:not([disabled]):active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(27,94,32,.28) !important;
}

/* Atrás — outlined pill, mismo sistema que Siguiente */
.ci-btn-back {
    background: transparent !important;
    border: 1.5px solid #e0e0e0 !important;
    color: var(--ci-txt-mid) !important;
    font-weight: 600 !important;
    font-size: 0.83rem !important;
    border-radius: var(--ci-r-pill) !important;
    height: 38px !important;
    padding: 0 16px !important;
    transition: border-color 0.15s, color 0.15s, background 0.15s !important;
    box-shadow: none !important;
}
.ci-btn-back:not([disabled]):hover {
    border-color: var(--ci-orange) !important;
    color: var(--ci-orange) !important;
    background: var(--ci-orange-bg) !important;
}
.ci-btn-back[disabled] {
    opacity: 0.38 !important;
}

/* Compatibilidad: mantener antiguas clases internas por si algún paso las usa */
.ci-builder-footer-actions { display: none; }

/* ── Encabezados de paso ─────────────────────────────────────────── */
.ci-step-title {
    font-size: .92rem;
    font-weight: 700;
    color: #1a0a00;
    margin-bottom: 1px;
    letter-spacing: -.01em;
}
.ci-step-subtitle {
    font-size: .72rem;
    color: #9e6636;
    margin-bottom: 14px;
    font-weight: 400;
}

/* ── Encabezados de sección dentro de cada paso ───────────────────── */
.ci-section-heading {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #9e6636;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(230,81,0,.10);
}

/* ── Badges de sesión (reemplazo de MudChip agresivo) ──────────────── */
.ci-badge-count {
    font-size: .67rem;
    font-weight: 700;
    color: #9e6636;
    background: rgba(230,81,0,.08);
    border: 1px solid rgba(230,81,0,.18);
    padding: 2px 8px;
    border-radius: 10px;
    line-height: 1.5;
}
.ci-badge-dur {
    font-size: .67rem;
    font-weight: 700;
    color: #2e7d32;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    padding: 2px 8px;
    border-radius: 10px;
    line-height: 1.5;
}

/* ── Botón "Agregar sesión" — ghost dashed ────────────────────────── */
.ci-add-sesion-btn {
    border: 1.5px dashed rgba(230,81,0,.40) !important;
    color: #e65100 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: .82rem !important;
    transition: border-color .15s, background .15s, color .15s !important;
    background: transparent !important;
}
.ci-add-sesion-btn:hover {
    background: rgba(230,81,0,.05) !important;
    border-color: #e65100 !important;
    border-style: solid !important;
}

/* ── Empty state de sesiones ─────────────────────────────────────── */
.ci-empty-sesiones {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    background: #fdfaf8;
    border: 1.5px dashed rgba(230,81,0,.18);
    border-radius: 10px;
    text-align: center;
    margin-top: 4px;
}

/* ── Cards de sesiones ───────────────────────────────────────────── */
.ci-sesion-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.ci-sesion-card {
    background: #ffffff;
    border: 1px solid #ede0d6;
    border-radius: 10px;
    padding: 12px 16px 10px;
    transition: border-color .15s, box-shadow .15s;
}

.ci-sesion-card:hover {
    border-color: #d4b5a5;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}

.ci-sesion-card--err {
    border-left: 3px solid #ff8a65;
    border-color: #ffc5b0;
    background: #fff9f7;
}

.ci-sesion-main-row {
    display: flex;
    align-items: flex-end;   /* inputs se alinean por la base, no el centro */
    gap: 10px;
    flex-wrap: nowrap;       /* fila única en desktop */
    min-width: 0;
    overflow-x: auto;        /* scroll horizontal en pantallas muy estrechas */
}

/* Campos de fecha y hora — anchos controlados por CSS, no inline */
.ci-sesion-field-fecha {
    flex: 0 0 172px;
    min-width: 0;
}

.ci-sesion-field-hora {
    flex: 0 0 128px;
    min-width: 0;
}

/* Botón eliminar — empujar al extremo derecho */
.ci-sesion-del-wrap {
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
}

/* Responsive: en xs permitir wrap ordenado */
@media (max-width: 599px) {
    .ci-sesion-main-row {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 8px;
    }
    .ci-sesion-field-fecha {
        flex: 1 1 155px;
    }
    .ci-sesion-field-hora {
        flex: 1 1 115px;
    }
    .ci-sesion-del-wrap {
        margin-left: 0;
    }
    .ci-sesion-sep {
        display: none;   /* ocultar flecha al wrappear */
    }
}

/* Número de sesión — círculo discreto, alineado al centro del input */
.ci-sesion-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(230,81,0,.07);
    color: #e65100;
    font-size: .68rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(230,81,0,.15);
    align-self: center;
    margin-bottom: 2px;     /* compensación visual para alinearse con labels */
}

/* Flecha separadora entre horas */
.ci-sesion-sep {
    font-size: .78rem;
    color: #c9bdb8;
    flex-shrink: 0;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 10px;    /* alinear visualmente con la base del input */
    letter-spacing: .02em;
}

/* Chip de duración calculada */
.ci-sesion-dur {
    font-size: .67rem;
    font-weight: 700;
    color: #2e7d32;
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    padding: 3px 9px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
    line-height: 1.4;
    margin-bottom: 2px;
}

/* Fila de notas */
.ci-sesion-notas-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding-left: 34px;   /* alinear con contenido después del número */
}

/* Errores inline en la card — compactos, sin romper altura */
.ci-sesion-errs {
    padding-left: 34px;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ci-sesion-err-text {
    font-size: .70rem;
    color: #bf360c;
    font-weight: 500;
    line-height: 1.3;
}

/* Botón eliminar — ghost, rojo solo en hover */
.ci-sesion-del-btn {
    color: #d4c4bc !important;
    transition: color .15s !important;
}
.ci-sesion-del-btn:hover {
    color: #c62828 !important;
}

/* Resumen de errores de sesiones — bloque arriba del listado */
.ci-sesion-errs-global {
    background: #fff5f2;
    border: 1px solid #ffc5b0;
    border-left: 3px solid #ff7043;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ci-sesion-err-global-item {
    font-size: .72rem;
    color: #bf360c;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ════════════════════════════════════════════════════════════════════
   PANEL LATERAL PREMIUM — hermano real de BuilderSummaryPanel.razor
   Misma estructura que .ctb-summary, paleta naranja institucional.
   ════════════════════════════════════════════════════════════════════ */

.ci-sum {
    background: var(--ci-surface);
    border-radius: var(--ci-r-md);
    border: 1px solid var(--ci-border);
    box-shadow: var(--ci-shadow-sm);
    overflow: hidden;   /* header naranja respeta el radius */
    display: flex;
    flex-direction: column;
}

/* ── Header naranja editorial (espejo de .ctb-sum-header) ─────────── */
.ci-sum-header {
    background: linear-gradient(135deg, #a83d0c 0%, #d4571a 60%, #e87a2e 100%);
    padding: 10px 8px 10px 14px;
}

/* Fila superior del header: eyebrow+step a la izquierda (sin botón collapse por ahora) */
.ci-sum-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.ci-sum-header-eyebrow {
    font-size: 0.57rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
    line-height: 1;
}

.ci-sum-header-step {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    margin-top: 3px;
    line-height: 1.2;
}

/* Enlace "Ver ficha técnica" — espejo de .ctb-sum-mapa-link */
.ci-sum-ficha-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 9px;
    padding: 3px 8px 3px 6px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 4px;
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: rgba(255,255,255,0.78);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    text-decoration: none;
    line-height: 1.3;
}
.ci-sum-ficha-link:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.38);
    color: #fff;
}

/* ── Cuerpo del panel ─────────────────────────────────────────────── */
.ci-sum-body {
    padding: 10px 12px 14px;
}

/* ── Barra de progreso ────────────────────────────────────────────── */
.ci-progress-track {
    height: 5px;
    border-radius: 3px;
    background: var(--ci-border);
    overflow: hidden;
    margin: 7px 0 4px;
}

.ci-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ci-orange) 0%, var(--ci-orange-lt) 100%);
    transition: width .45s cubic-bezier(.4,0,.2,1);
    min-width: 4px;
}

/* ── Lista de pasos (espejo de .ctb-sum-step) ─────────────────────── */
.ci-sum-step {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    border-radius: 5px;
    margin-bottom: 1px;
    border-left: 3px solid transparent;
    transition: background 0.12s;
}

.ci-sum-step--active {
    background: var(--ci-orange-bg);
    border-left-color: var(--ci-orange);
}

.ci-sum-step--pending {
    opacity: 0.40;
}

.ci-sum-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.15s;
}

.ci-sum-step--active  .ci-sum-dot { background: var(--ci-orange); box-shadow: 0 0 0 3px var(--ci-orange-ring); }
.ci-sum-step--done    .ci-sum-dot { background: var(--ci-green); }
.ci-sum-step--visited .ci-sum-dot { background: #ffcc80; }
.ci-sum-step--pending .ci-sum-dot { background: #c2cfd9; }

.ci-sum-label {
    font-size: 0.72rem;
    color: var(--ci-txt);
    line-height: 1.3;
}
.ci-sum-step--active  .ci-sum-label { font-weight: 700; color: var(--ci-orange-dk); }
.ci-sum-step--pending .ci-sum-label { color: var(--ci-txt-muted); }

/* ── Sección "Curso" — nombre del curso (espejo de .ctb-sum-nombre) ── */
.ci-sum-section-label {
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ci-txt-muted);
    margin-bottom: 4px;
}

.ci-sum-nombre {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ci-txt);
    line-height: 1.4;
    word-break: break-word;
    margin-bottom: 4px;
}

.ci-sum-nombre--empty {
    color: #bdbdbd;
    font-style: italic;
    font-weight: 400;
}

/* ── KPIs compactos 2×2 ───────────────────────────────────────────── */
.ci-sum-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 6px 0;
}

.ci-sum-kpi {
    background: #fdfaf8;
    border: 1px solid #ede0d6;
    border-radius: 7px;
    padding: 5px 6px 4px;
    text-align: center;
}

.ci-sum-kpi-v {
    font-size: .82rem;
    font-weight: 700;
    color: #c0490a;
    line-height: 1;
}

.ci-sum-kpi-l {
    font-size: 0.53rem;
    color: var(--ci-txt-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   STEP 3 — TEMARIO INTENSIVO
   Patrón: lista izquierda + panel de edición derecho.
   Hermano funcional de CTB Step4 (EstructuraTematica) sin jerarquía,
   justificado por auditoría SQL: CapacitacionesIntensivasTemas es plana.
   ════════════════════════════════════════════════════════════════════════ */

/* Shell — ocupa todo el espacio disponible dentro de ci-builder-main */
.ci-temario-shell {
    display: flex;
    flex-direction: column;
    /* Breakout: cancela el padding del ci-builder-main (16px top / 20px sides)
       para que la barra de duración y el layout vayan de borde a borde del card */
    margin: -16px -20px;
    border-radius: 10px;
    overflow: hidden;
}

/* ── Barra de duración (franja superior) ────────────────────────────────── */
.ci-dur-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    border-bottom: 1px solid #ffe0b2;
    flex-wrap: wrap;
    background: #fffdf9;
}
.ci-dur-bar--ok    { background: #f6faf0; border-bottom-color: #c5e1a5; }
.ci-dur-bar--over  { background: #fff8f5; border-bottom-color: #ffccbc; }
.ci-dur-bar--empty { background: #fafafa; border-bottom-color: #eeeeee; }

.ci-dur-bar-item { display: flex; flex-direction: column; }
.ci-dur-bar-lbl  {
    font-size: .57rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--ci-txt-muted);
}
.ci-dur-bar-val      { font-size: .82rem; font-weight: 700; color: var(--ci-txt-mid); }
.ci-dur-bar-val--ok  { color: #2e7d32; }
.ci-dur-bar-val--over { color: #bf360c; }
.ci-dur-bar-note {
    font-size: .67rem; color: #9e9e9e; margin-left: 4px; font-weight: 400;
}
.ci-dur-bar-arrow { color: #bdbdbd; align-self: center; }
.ci-dur-bar-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .65rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 10px;
    margin-left: auto;
    border: 1px solid transparent;
    white-space: nowrap;
}
.ci-dur-bar-pill--ok    { background: #e8f5e9; color: #2e7d32; border-color: #c5e1a5; }
.ci-dur-bar-pill--under { background: var(--ci-orange-bg); color: var(--ci-orange); border-color: #ffcc80; }
.ci-dur-bar-pill--over  { background: #fff5f2; color: #bf360c; border-color: #ffccbc; }
.ci-dur-bar-pill--empty { background: #f5f5f5; color: #9e9e9e; border-color: #e0e0e0; }

/* ── Layout dos columnas ─────────────────────────────────────────────────── */
.ci-temario-layout {
    display: flex;
    flex: 1;
    min-height: 400px;
}

/* ── Columna izquierda: lista de temas ───────────────────────────────────── */
.ci-temario-left {
    width: 240px;
    min-width: 180px;
    flex-shrink: 0;
    border-right: 1px solid #ffe0b2;
    display: flex;
    flex-direction: column;
    background: #fffdf9;
}
.ci-temario-left-hdr {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px 6px;
    border-bottom: 1px solid #fff3e0;
    flex-shrink: 0;
}
.ci-temario-left-ttl {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ci-txt-muted);
}

/* Lista desplazable */
.ci-tema-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

/* Item de tema */
.ci-tema-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px 5px 10px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background .12s, border-color .12s;
}
.ci-tema-item:hover { background: #fff8f1; }
.ci-tema-item--active {
    background: #fff3e0;
    border-left-color: var(--ci-orange);
}
.ci-tema-item--err    { border-left-color: #ff8a65; }
.ci-tema-item--active.ci-tema-item--err { border-left-color: var(--ci-orange); }

/* Número de posición */
.ci-tema-num {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(230,81,0,.08);
    color: var(--ci-orange);
    font-size: .60rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.ci-tema-num--active {
    background: var(--ci-orange);
    color: #fff;
}

/* Info del tema */
.ci-tema-info { flex: 1; min-width: 0; }
.ci-tema-nombre {
    font-size: .72rem; font-weight: 600; color: var(--ci-txt);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ci-tema-item--active .ci-tema-nombre { color: var(--ci-orange-dk); }
.ci-tema-meta { display: flex; align-items: center; gap: 3px; margin-top: 1px; flex-wrap: wrap; }

.ci-tema-dur-chip {
    font-size: .57rem; font-weight: 600;
    background: #e8f5e9; color: #2e7d32;
    border: 1px solid #c8e6c9; border-radius: 6px; padding: 0 4px;
}
.ci-tema-no-chip {
    font-size: .55rem; color: #757575;
    background: #f5f5f5; border: 1px solid #e0e0e0;
    border-radius: 6px; padding: 0 4px;
}
.ci-tema-err-dot {
    font-size: .57rem; font-weight: 700;
    width: 12px; height: 12px; border-radius: 50%;
    background: #ff8a65; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Controles de orden/eliminar — visibles solo en hover del item */
.ci-tema-mv {
    display: flex;
    flex-direction: column;
    gap: 1px;
    opacity: 0;
    transition: opacity .15s;
    flex-shrink: 0;
}
.ci-tema-item:hover .ci-tema-mv { opacity: 1; }

.ci-tema-mv-btn, .ci-tema-del-btn {
    border: none; background: none; cursor: pointer;
    padding: 1px 3px; border-radius: 3px;
    line-height: 1; font-size: .70rem;
    transition: background .12s, color .12s;
    color: #c8bfb8;
}
.ci-tema-mv-btn:hover:not([disabled]) { color: var(--ci-orange); background: rgba(230,81,0,.08); }
.ci-tema-mv-btn[disabled]             { opacity: .28; cursor: default; }
.ci-tema-del-btn { font-size: .88rem; font-weight: 700; }
.ci-tema-del-btn:hover { color: #c62828; background: #ffebee; }

/* Estado vacío */
.ci-empty-temas {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px; padding: 24px 12px;
    color: #c8a882; font-size: .75rem; text-align: center; line-height: 1.4;
}

/* Botón agregar tema */
.ci-agregar-tema-btn {
    width: calc(100% - 16px);
    margin: 4px 8px 8px;
    padding: 5px 8px;
    border: 1.5px dashed #e0c9b5;
    border-radius: 7px;
    background: none;
    color: var(--ci-orange);
    font-size: .67rem; font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 3px;
    transition: background .14s, border-color .14s;
    flex-shrink: 0;
}
.ci-agregar-tema-btn:hover { background: var(--ci-orange-bg); border-color: var(--ci-orange); }

/* Errores globales de paso 3 */
.ci-tema-global-err {
    display: flex; align-items: flex-start; gap: 5px;
    font-size: .67rem; color: #bf360c; line-height: 1.35;
    padding: 5px 12px;
    background: #fff9f7;
    border-top: 1px solid #ffe0d9;
    flex-shrink: 0;
}

/* ── Columna derecha: panel de edición ───────────────────────────────────── */
.ci-temario-right {
    flex: 1;
    min-width: 0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

/* Placeholder cuando no hay tema activo */
.ci-tema-empty-panel {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px; padding: 40px;
    color: #c8a882; font-size: .80rem; text-align: center; line-height: 1.5;
}

/* Panel de edición del tema activo */
.ci-tema-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ci-tema-panel-hdr {
    padding: 8px 16px 7px;
    border-bottom: 1px solid #fff3e0;
    background: #fffdf9;
    flex-shrink: 0;
}
.ci-tema-panel-eyebrow {
    font-size: .57rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--ci-txt-muted);
    display: flex; align-items: center; gap: 4px;
}
.ci-tema-panel-ttl {
    font-size: .83rem; font-weight: 700; color: var(--ci-txt);
    margin-top: 2px;
}
.ci-tema-panel-body {
    padding: 12px 16px;
    display: flex; flex-direction: column;
    gap: 10px;
    flex: 1;
}

/* Nota informativa en footer del panel */
.ci-tema-panel-note {
    display: flex; align-items: flex-start; gap: 5px;
    font-size: .63rem; color: var(--ci-txt-muted); line-height: 1.4;
    padding: 7px 16px 9px;
    border-top: 1px solid #fff3e0;
    background: #fffdf9;
    margin-top: auto;
    flex-shrink: 0;
}

/* Helpers de formulario del panel (ci-fg/ci-fl/ci-fh/ci-req) */
.ci-fg  { display: flex; flex-direction: column; gap: 4px; }
.ci-fl  { font-size: .72rem; font-weight: 700; color: var(--ci-txt-mid); }
.ci-fh  { font-weight: 400; color: var(--ci-txt-muted); margin-left: 2px; }
.ci-fh--warn { color: var(--ci-orange) !important; }
.ci-req { color: var(--ci-orange); margin: 0 2px; }

/* Responsive: columnas apiladas en pantallas pequeñas */
@media (max-width: 1280px) {
    .ci-temario-left { width: 210px; min-width: 170px; }
}
@media (max-width: 1100px) {
    .ci-temario-left { width: 190px; min-width: 160px; }
}
@media (max-width: 820px) {
    .ci-temario-layout { flex-direction: column; }
    .ci-temario-left   { width: 100%; min-width: unset; border-right: none;
                         border-bottom: 1px solid #ffe0b2; }
    .ci-tema-list      { max-height: 220px; }
}

/* ── Avisos contextuales ──────────────────────────────────────────── */
.ci-sum-warn {
    background: var(--ci-orange-bg);
    border: 1px solid #ffcc80;
    border-left: 3px solid var(--ci-orange);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.72rem;
    color: var(--ci-orange-dk);
    margin-top: 10px;
    line-height: 1.4;
}

/* ── CITemaRecursosInline ────────────────────────────────────────────── */
.ci-fg--recursos-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0 4px;
    border-top: 1px dashed rgba(230,81,0,.18);
    margin-top: 4px;
}

.ci-recurso-bloque {
    margin-top: 6px;
}

.ci-ri-bloque {
    border: 1px solid rgba(230,81,0,.13);
    border-radius: 6px;
    padding: 8px 10px;
    background: #fffaf7;
}

.ci-ri-header {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
}

.ci-ri-titulo {
    font-size: .74rem;
    font-weight: 700;
    color: #5d2c00;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ci-ri-count {
    font-size: .68rem;
    font-weight: 700;
    border-radius: 20px;
    padding: 1px 7px;
    margin-left: 2px;
}

.ci-ri-selector {
    margin-bottom: 6px;
}

.ci-ri-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.ci-ri-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 20px;
    padding: 2px 4px 2px 8px;
    font-size: .72rem;
    max-width: 220px;
}

.ci-ri-chip-nombre {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.ci-ri-chip-del {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .85rem;
    line-height: 1;
    padding: 0 3px;
    border-radius: 50%;
    flex-shrink: 0;
    font-weight: 700;
    opacity: .7;
    transition: opacity .15s;
}
.ci-ri-chip-del:hover { opacity: 1; }

.ci-ri-empty {
    font-size: .70rem;
    color: #bdbdbd;
    font-style: italic;
    padding: 2px 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   CI TemaTreeEditor — espejo naranja de ctb-tree-* (etapa 6)
   ═══════════════════════════════════════════════════════════════════════ */

.ci-tree-editor {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 320px;
}
.ci-tree-list {
    flex: 1;
    overflow-y: auto;
    min-height: 100px;
    max-height: 440px;
    margin: 0 -4px;
    padding: 0 4px;
}
.ci-tree-footer {
    padding-top: 8px;
    border-top: 1px solid var(--ci-border);
    margin-top: 6px;
}
.ci-tree-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 16px;
    color: #bdbdbd;
}

/* ── Item base ───────────────────────────────────────────────────────── */
@keyframes ci-node-enter {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ci-tree-item {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 3px 4px;
    border-radius: 5px;
    cursor: pointer;
    transition: background .12s ease;
    border-left: 3px solid transparent;
    position: relative;
    min-height: 30px;
    animation: ci-node-enter 0.18s ease;
}
.ci-tree-item:hover { background: var(--ci-orange-bg); }
.ci-tree-item--active {
    background: var(--ci-orange) !important;
    border-left-color: var(--ci-orange-dk);
    box-shadow: 0 2px 10px rgba(230,81,0,.25) !important;
}
.ci-tree-item--error { border-left-color: #ff8a65; }
.ci-tree-item--active.ci-tree-item--error { border-left-color: rgba(255,255,255,.6); }

/* ── Active — overrides de texto ─────────────────────────────────────── */
.ci-tree-item--active .ci-tree-name        { color: #fff !important; font-weight: 700 !important; }
.ci-tree-item--active .ci-tree-name--error { color: #ffcdd2 !important; }
.ci-tree-item--active .ci-tree-num        { color: rgba(255,255,255,.72) !important; }
.ci-tree-item--active .ci-tree-meta       { color: rgba(255,255,255,.58) !important; }
.ci-tree-item--active .ci-tree-chevron    { color: rgba(255,255,255,.62) !important; }
.ci-tree-item--active .ci-node-state--done { color: rgba(165,255,170,.90) !important; }
.ci-tree-item--active .ci-node-state--warn { color: rgba(255,220,100,.90) !important; }
.ci-tree-item--active .ci-node-state--new  { color: rgba(255,255,255,.42) !important; }
.ci-tree-item--active .ci-meta-sep        { color: rgba(255,255,255,.35) !important; }
.ci-tree-item--active .ci-meta-collapsed  { color: rgba(255,220,130,.90) !important; }
.ci-tree-item--active .ci-actions-sep     { background: rgba(255,255,255,.25) !important; }
.ci-tree-item--active .mud-icon-button    { color: rgba(255,255,255,.8) !important; }
.ci-tree-item--active .mud-icon-button:hover { background: rgba(255,255,255,.18) !important; }

/* ── Level indentation ──────────────────────────────────────────────── */
.ci-tree-item--n1 { padding-left: 4px; }
.ci-tree-item--n2 {
    padding-left: 12px;
    margin-left: 8px;
}
.ci-tree-item--n2:not(.ci-tree-item--active)::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--ci-border);
}
.ci-tree-item--n3 {
    padding-left: 24px;
    margin-left: 16px;
}
.ci-tree-item--n3:not(.ci-tree-item--active)::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: #ffe0b2;
}

/* ── Numbers ─────────────────────────────────────────────────────────── */
.ci-tree-num {
    font-size: .65rem;
    font-weight: 700;
    min-width: 24px;
    text-align: right;
    margin-right: 4px;
    color: var(--ci-orange);
    flex-shrink: 0;
    letter-spacing: .02em;
}
.ci-tree-num--n2 { color: var(--ci-txt-muted); }
.ci-tree-num--n3 { color: #ccc; }

/* ── Body (name + meta) ─────────────────────────────────────────────── */
.ci-tree-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ci-tree-name {
    font-size: .76rem;
    font-weight: 500;
    color: var(--ci-txt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ci-tree-name--error { color: #c62828; }
.ci-tree-meta {
    font-size: .64rem;
    color: var(--ci-txt-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ci-meta-sep     { margin: 0 2px; opacity: .5; }
.ci-meta-collapsed { color: var(--ci-orange-lt); font-style: italic; }

/* ── Chevron ─────────────────────────────────────────────────────────── */
.ci-tree-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    color: #90a4ae;
    transition: background .12s;
}
.ci-tree-chevron:hover { background: rgba(230,81,0,.12); color: var(--ci-orange); }
.ci-tree-chevron--empty { visibility: hidden; }
.ci-tree-chevron--sm { width: 16px; height: 16px; }

/* ── Node state icons ────────────────────────────────────────────────── */
.ci-node-state       { flex-shrink: 0; }
.ci-node-state--new  { color: #bdbdbd; }
.ci-node-state--done { color: #66bb6a; }
.ci-node-state--warn { color: var(--ci-orange-lt); }

/* ── Actions (hover reveal) ──────────────────────────────────────────── */
.ci-tree-actions {
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity .15s;
    flex-shrink: 0;
    gap: 0;
}
.ci-tree-item:hover .ci-tree-actions { opacity: 1; }
/* Nodo activo: pill blanca detrás de las acciones — igual que ctb-tree-item--active */
.ci-tree-item--active .ci-tree-actions {
    opacity: 1;
    background: rgba(255, 255, 255, 0.82);
    border-radius: 5px;
    padding: 0 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-left: 4px;
}
.ci-actions-sep {
    width: 1px;
    height: 16px;
    background: #e0e0e0;
    margin: 0 2px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   CI Inspector panel (right panel)
   ═══════════════════════════════════════════════════════════════════════ */

.ci-inspector-panel {}

.ci-insp-header     { margin-bottom: 8px; }
.ci-insp-header-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.ci-insp-pos {
    font-size: .65rem;
    font-weight: 700;
    color: var(--ci-orange);
    background: var(--ci-orange-bg);
    padding: 1px 7px;
    border-radius: 20px;
    border: 1px solid #ffcc80;
    flex-shrink: 0;
}
.ci-insp-title {
    font-size: .94rem;
    font-weight: 700;
    color: var(--ci-txt);
    line-height: 1.3;
    word-break: break-word;
}
.ci-insp-title--empty {
    color: #bdbdbd;
    font-style: italic;
    font-weight: 400;
}
.ci-insp-parent {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .67rem;
    color: var(--ci-txt-muted);
    margin-top: 3px;
}

/* ── Catalog binding indicators ─────────────────────────────────────── */
.ci-bib-vinculado {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 8px;
    background: var(--ci-orange-bg);
    border-radius: 6px;
    border: 1px solid #ffcc80;
    font-size: .72rem;
}
.ci-bib-vinculado-label { font-weight: 700; color: var(--ci-orange); display: block; }
.ci-bib-vinculado-hint  { color: var(--ci-txt-muted); }
.ci-bib-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: #fafafa;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    font-size: .72rem;
    color: #757575;
}
.ci-bib-strip-hint { flex: 1; }

/* ── Nombre + duration row ───────────────────────────────────────────── */
.ci-nombre-dur-row {
    display: grid;
    grid-template-columns: 1fr 90px;
    gap: 8px;
    align-items: start;
}

/* ═══════════════════════════════════════════════════════════════════════
   CI Recursos editor
   ═══════════════════════════════════════════════════════════════════════ */

.ci-recursos-editor  {}
.ci-rec-section      { margin-bottom: 12px; }
.ci-rec-section-hdr  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ci-rec-section-ttl  { font-size: .78rem; font-weight: 700; color: var(--ci-txt-mid); flex: 1; }

.ci-rec-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 2px;
}
.ci-rec-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 8px;
    border-radius: 14px;
    font-size: .75rem;
    font-weight: 500;
    border: 1px solid;
}
.ci-rec-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: .85rem;
    padding: 0;
    line-height: 1;
    opacity: .55;
    transition: opacity .1s;
}
.ci-rec-chip-remove:hover { opacity: 1; }
.ci-rec-empty {
    font-size: .72rem;
    color: #bdbdbd;
    font-style: italic;
    padding: 3px 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   CI Recursos selector dialog
   ═══════════════════════════════════════════════════════════════════════ */

.ci-rec-sel-list {
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid #eeeeee;
    border-radius: 6px;
}
.ci-rec-sel-row {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: background .1s;
}
.ci-rec-sel-row:last-child  { border-bottom: none; }
.ci-rec-sel-row:hover       { background: var(--ci-orange-bg); }
.ci-rec-sel-row--sel        { background: #fff8f1; }
.ci-rec-sel-nombre          { font-size: .84rem; flex: 1; }

/* ── Step 4 resumen KPIs ────────────────────────────────────────────── */
.ci-res-kpis {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.ci-res-kpi {
    flex: 1;
    min-width: 90px;
    border: 2px solid;
    border-radius: 8px;
    padding: 10px 14px;
    background: #fffaf7;
    text-align: center;
}
.ci-res-kpi-v {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
}
.ci-res-kpi-l {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9e6636;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   CI Step 6 — Vista previa / Ficha técnica
   ═══════════════════════════════════════════════════════════════════════ */

/* Shell de la vista previa */
.ci-preview {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: .78rem;
    color: #1a0a00;
}

/* Toolbar superior */
.ci-pv-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.ci-pv-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .88rem;
    font-weight: 700;
    color: #1a0a00;
}

/* Sección */
.ci-pv-section {
    border: 1px solid #ede0d6;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

/* Header de sección */
.ci-pv-section-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(90deg, #fffaf6 0%, #ffffff 100%);
    border-bottom: 1px solid #ede0d6;
    font-size: .72rem;
    font-weight: 700;
    color: #5d3317;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.ci-pv-section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e65100;
    color: #fff;
    font-size: .60rem;
    font-weight: 800;
    flex-shrink: 0;
}
.ci-pv-section-meta {
    margin-left: auto;
    font-size: .65rem;
    font-weight: 600;
    color: var(--ci-txt-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* Grid 2 columnas para filas de datos */
.ci-pv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 2px 0;
}
@media (max-width: 640px) {
    .ci-pv-grid { grid-template-columns: 1fr; }
}

/* Fila individual */
.ci-pv-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 14px;
    border-bottom: 1px dashed #f5ece3;
}
.ci-pv-row:last-child { border-bottom: none; }

.ci-pv-lbl {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9e6636;
    flex-shrink: 0;
    min-width: 88px;
}
.ci-pv-val {
    font-size: .76rem;
    font-weight: 500;
    color: #1a0a00;
    word-break: break-word;
}
.ci-pv-val--empty {
    color: #bdbdbd;
    font-style: italic;
    font-weight: 400;
}

/* Campo largo (objetivo, público) — ancho completo */
.ci-pv-long-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 14px;
    border-top: 1px dashed #f5ece3;
}
.ci-pv-long-field .ci-pv-lbl { min-width: unset; }
.ci-pv-long-field .ci-pv-val { font-size: .74rem; line-height: 1.55; white-space: pre-wrap; }

/* Empty state */
.ci-pv-empty {
    padding: 16px 14px;
    font-size: .72rem;
    color: #bdbdbd;
    font-style: italic;
}

/* Sub-sección label (ej: "Sesiones") */
.ci-pv-subsection-lbl {
    padding: 6px 14px 2px;
    font-size: .60rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #9e6636;
    border-top: 1px solid #f5ece3;
}

/* Sesiones */
.ci-pv-sesiones {
    padding: 0 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ci-pv-sesion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px dashed #f5ece3;
    font-size: .72rem;
}
.ci-pv-sesion:last-child { border-bottom: none; }
.ci-pv-sesion-num {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(230,81,0,.08);
    color: #e65100;
    font-size: .58rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ci-pv-sesion-fecha  { font-weight: 600; color: #1a0a00; }
.ci-pv-sesion-hora   { color: #5d3317; }
.ci-pv-sesion-dur    {
    margin-left: auto;
    font-size: .65rem;
    font-weight: 700;
    color: #2e7d32;
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    border-radius: 8px;
    padding: 0 5px;
}
.ci-pv-sesion-notas  { font-size: .65rem; color: #9e6636; font-style: italic; flex-shrink: 0; }

/* Temario */
.ci-pv-temas {
    margin: 0;
    padding: 8px 14px 10px 30px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: decimal;
}
.ci-pv-tema { font-size: .76rem; }
.ci-pv-tema-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.ci-pv-tema-nombre { font-weight: 600; color: #1a0a00; }
.ci-pv-tema-dur {
    font-size: .62rem;
    font-weight: 700;
    color: #2e7d32;
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    border-radius: 6px;
    padding: 0 4px;
    flex-shrink: 0;
}

/* Subtemas */
.ci-pv-subtemas {
    margin: 3px 0 0 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: lower-alpha;
}
.ci-pv-subtema { font-size: .72rem; }
.ci-pv-subtema-nombre { color: #3d1f00; }

/* Sub-subtemas */
.ci-pv-subsubtemas {
    margin: 2px 0 0 0;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    list-style: lower-roman;
}
.ci-pv-subsubtema { font-size: .68rem; color: #7a4820; }

/* Recursos por tema */
.ci-pv-rec-tema {
    padding: 8px 14px;
    border-bottom: 1px solid #f5ece3;
}
.ci-pv-rec-tema:last-child { border-bottom: none; }
.ci-pv-rec-tema-hdr {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
}
.ci-pv-rec-tema-num {
    font-size: .60rem;
    font-weight: 700;
    color: #e65100;
    background: #fff3e0;
    border: 1px solid #ffcc80;
    border-radius: 20px;
    padding: 1px 7px;
    flex-shrink: 0;
}
.ci-pv-rec-tema-nombre {
    font-size: .74rem;
    font-weight: 600;
    color: #1a0a00;
}
.ci-pv-rec-bloque {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 4px;
}
.ci-pv-rec-bloque:last-child { margin-bottom: 0; }
.ci-pv-rec-tipo {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    min-width: 80px;
    flex-shrink: 0;
    padding-top: 2px;
}
.ci-pv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.ci-pv-chip {
    border: 1px solid;
    border-radius: 20px;
    padding: 1px 7px;
    font-size: .68rem;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   CI Step 4 — Resumen de recursos (shell + bloques + tabla consolidada)
   ═══════════════════════════════════════════════════════════════════════ */

/* Shell del paso 4 */
.ci-step4-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Encabezado del paso */
.ci-step4-hdr {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
}
.ci-step4-ttl {
    font-size: .88rem;
    font-weight: 700;
    color: #1a0a00;
}
.ci-step4-badge {
    font-size: .60rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #e65100;
    background: #fff3e0;
    border: 1px solid #ffcc80;
    border-radius: 20px;
    padding: 1px 8px;
}

/* Estado vacío */
.ci-step4-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 24px;
    border: 2px dashed #ffe0b2;
    border-radius: 8px;
    background: #fffaf5;
    text-align: center;
}
.ci-step4-empty-txt {
    font-size: .76rem;
    color: #9e6636;
    line-height: 1.55;
}

/* Label de subsección */
.ci-step4-section-lbl {
    font-size: .60rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #9e6636;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(230,81,0,.10);
}
.ci-step4-section-lbl--table {
    margin-top: 18px;
}

/* Bloque por tema */
.ci-step4-tema-bloque {
    border: 1px solid rgba(230,81,0,.18);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}
.ci-step4-tema-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #fffdf9;
    border-bottom: 1px solid rgba(230,81,0,.10);
}
.ci-step4-tema-pos {
    font-size: .60rem;
    font-weight: 700;
    color: #e65100;
    background: #fff3e0;
    border: 1px solid #ffcc80;
    border-radius: 20px;
    padding: 1px 7px;
    flex-shrink: 0;
}
.ci-step4-tema-nombre {
    font-size: .76rem;
    font-weight: 600;
    color: #1a0a00;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ci-step4-tema-total {
    font-size: .62rem;
    font-weight: 600;
    color: #9e6636;
    flex-shrink: 0;
}
.ci-step4-tema-chips {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ci-step4-chip-grupo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.ci-step4-chip-tipo {
    font-size: .57rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    min-width: 76px;
    flex-shrink: 0;
}
.ci-step4-chip {
    border: 1px solid;
    border-radius: 20px;
    padding: 1px 8px;
    font-size: .69rem;
    font-weight: 600;
}

/* ── Tabla consolidada global ───────────────────────────────────────── */
.ci-restab-wrap {
    border: 1px solid #ede0d6;
    border-radius: 8px;
    overflow: hidden;
    overflow-x: auto;
}
.ci-restab {
    width: 100%;
    border-collapse: collapse;
    font-size: .73rem;
    color: #1a0a00;
}

/* Encabezado de tabla */
.ci-restab-th {
    padding: 6px 12px;
    background: linear-gradient(90deg, #fffaf6 0%, #ffffff 100%);
    border-bottom: 2px solid #ede0d6;
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9e6636;
    white-space: nowrap;
    text-align: left;
}
.ci-restab-th--num    { width: 36px;  text-align: center; }
.ci-restab-th--tema   { min-width: 130px; max-width: 200px; }
.ci-restab-th--subs   { min-width: 140px; max-width: 260px; }
.ci-restab-th--nombre { min-width: 120px; }
.ci-restab-th--tipo   { width: 110px; }

/* Filas */
.ci-restab-tr {
    border-bottom: 1px solid #f5ece3;
    transition: background .10s;
}
.ci-restab-tr:last-child { border-bottom: none; }
.ci-restab-tr:hover { background: #fff8f2; }

/* Primera fila de un nuevo tema — separador visual sutil */
.ci-restab-tr--new-tema {
    border-top: 2px solid #ffe0b2;
}
.ci-restab-tr--new-tema:first-child {
    border-top: none;
}

/* Celdas */
.ci-restab-td {
    padding: 5px 12px;
    vertical-align: middle;
}
.ci-restab-td--num {
    text-align: center;
    font-size: .62rem;
    font-weight: 600;
    color: #c8a882;
    width: 36px;
}
.ci-restab-td--tema {
    min-width: 130px;
    max-width: 200px;
}
.ci-restab-td--subs {
    min-width: 140px;
    max-width: 260px;
    vertical-align: top;
    padding-top: 7px;
}
.ci-restab-td--nombre {
    font-weight: 500;
    color: #1a0a00;
}
.ci-restab-td--tipo { width: 110px; }

/* Número de posición del tema dentro de la celda de tema */
.ci-restab-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(230,81,0,.10);
    color: #e65100;
    font-size: .58rem;
    font-weight: 800;
    margin-right: 4px;
    flex-shrink: 0;
    vertical-align: middle;
}
/* Nombre del tema en la celda */
.ci-restab-tnombre {
    font-size: .71rem;
    font-weight: 600;
    color: #3d1f00;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    display: inline-block;
    vertical-align: middle;
}

/* Lista de subtemas en la celda Subtemas (solo en primera fila del grupo) */
.ci-restab-subs {
    display: block;
    font-size: .65rem;
    color: #6d4c41;
    line-height: 1.55;
    font-weight: 400;
    /* Mostrar subtemas separados por · en una sola línea que puede wrappear */
    white-space: normal;
    word-break: break-word;
}
.ci-restab-subs--empty {
    color: #bdbdbd;
    font-style: italic;
    font-size: .62rem;
}

/* Chip de tipo */
.ci-restab-tipo-chip {
    display: inline-block;
    border: 1px solid;
    border-radius: 20px;
    padding: 1px 8px;
    font-size: .62rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 5 — Participantes / Asistencia
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shell */
.ci-step5-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Encabezado ─────────────────────────────────────────────────────────── */
.ci-step5-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5e0d3;
}
.ci-step5-hdr-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ci-step5-hdr-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ci-step5-ttl {
    font-size: .82rem;
    font-weight: 700;
    color: #3d1f00;
    letter-spacing: -.01em;
}
.ci-step5-note {
    font-size: .64rem;
    color: #9e9e9e;
    padding: 2px 7px;
    background: #fafafa;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    white-space: nowrap;
}

/* ── Cupo pill ──────────────────────────────────────────────────────────── */
.ci-step5-cupo-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .7rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid;
    white-space: nowrap;
}
.ci-step5-cupo--ok   { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.ci-step5-cupo--warn { background: #fff8e1; color: #e65100; border-color: #ffcc80; }
.ci-step5-cupo--error{ background: #ffebee; color: #c62828; border-color: #ef9a9a; }

.ci-step5-cupo-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.ci-step5-cupo-warn-txt {
    font-size: .66rem;
    font-weight: 700;
    color: #c62828;
    padding: 2px 8px;
    background: #ffebee;
    border: 1px solid #ef9a9a;
    border-radius: 10px;
}

/* ── Botón Agregar ──────────────────────────────────────────────────────── */
.ci-step5-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 600;
    color: #ffffff;
    background: #e65100;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.ci-step5-add-btn:hover { background: #bf360c; }
.ci-step5-add-btn--ghost {
    color: #e65100;
    background: transparent;
    border: 1px dashed #ffab76;
}
.ci-step5-add-btn--ghost:hover { background: #fff3e0; }

/* ── Botón "Agregar otro" debajo de la tabla ────────────────────────────── */
.ci-step5-add-row {
    display: flex;
    justify-content: flex-start;
    padding-top: 4px;
}

/* ── Estado vacío ───────────────────────────────────────────────────────── */
.ci-step5-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 20px;
    background: #fafafa;
    border: 1.5px dashed #ffcc80;
    border-radius: 10px;
    text-align: center;
    color: #9e9e9e;
}
.ci-step5-empty-txt {
    font-size: .76rem;
    font-weight: 600;
    color: #6d4c41;
    line-height: 1.5;
}

/* ── Mensajes de error de validación ────────────────────────────────────── */
.ci-step5-err {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .71rem;
    color: #c62828;
    background: #ffebee;
    border: 1px solid #ef9a9a;
    border-radius: 6px;
    padding: 4px 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLA DE PARTICIPANTES  (ci-p5t)
   ═══════════════════════════════════════════════════════════════════════════ */

.ci-p5t-wrap {
    overflow-x: auto;
    border: 1px solid #ffe0cc;
    border-radius: 8px;
    background: #ffffff;
}

.ci-p5t {
    width: 100%;
    border-collapse: collapse;
    font-size: .72rem;
}

/* Encabezados */
.ci-p5t-th {
    background: linear-gradient(180deg, #fff3e0 0%, #ffe0b2 100%);
    color: #4e2700;
    font-weight: 700;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 6px 8px;
    border-bottom: 2px solid #ffcc80;
    white-space: nowrap;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 1;
}
.ci-p5t-req {
    color: #c62828;
    margin-left: 2px;
}

/* Anchos de columna */
.ci-p5t-th--num    { width: 32px;  text-align: center; }
.ci-p5t-th--nombre { min-width: 110px; }
.ci-p5t-th--ap     { min-width: 120px; }
.ci-p5t-th--curp   { min-width: 130px; }
.ci-p5t-th--correo { min-width: 150px; }
.ci-p5t-th--nivel  { min-width: 120px; }
.ci-p5t-th--ocup   { min-width: 120px; }
.ci-p5t-th--chk    { width: 52px;  text-align: center; }

/* Filas */
.ci-p5t-tr {
    border-bottom: 1px solid #f5f5f5;
    transition: background .12s;
}
.ci-p5t-tr:last-child { border-bottom: none; }
.ci-p5t-tr:hover { background: #fff8f5; }
.ci-p5t-tr--err  { background: #fff3f3 !important; }
.ci-p5t-tr--err:hover { background: #ffe9e9 !important; }

/* Celdas */
.ci-p5t-td {
    padding: 4px 6px;
    vertical-align: middle;
    border-right: 1px solid #fbe9e7;
}
.ci-p5t-td:last-child { border-right: none; }
.ci-p5t-td--num  { text-align: center; color: #9e9e9e; font-size: .65rem; font-weight: 600; }
.ci-p5t-td--chk  { text-align: center; }
.ci-p5t-td--del  { text-align: center; width: 36px; }

/* Campos dentro de las celdas */
.ci-p5t-field {
    font-size: .71rem !important;
    min-width: 90px;
}
.ci-p5t-field--mono {
    font-family: 'Roboto Mono', monospace !important;
    font-size: .67rem !important;
    letter-spacing: .04em;
}

/* Botón eliminar */
.ci-p5t-del-btn {
    opacity: .45;
    transition: opacity .15s, color .15s;
}
.ci-p5t-del-btn:hover {
    opacity: 1;
    color: #c62828 !important;
}

/* ── Botones Excel (descargar / cargar) ─────────────────────────────────── */
.ci-step5-excel-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .7rem;
    font-weight: 600;
    color: #2e7d32;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 6px;
    padding: 4px 11px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
    text-decoration: none;
}
.ci-step5-excel-btn:hover { background: #c8e6c9; border-color: #66bb6a; }
.ci-step5-excel-btn--upload { color: #1565c0; background: #e3f2fd; border-color: #90caf9; }
.ci-step5-excel-btn--upload:hover { background: #bbdefb; border-color: #42a5f5; }
.ci-step5-excel-btn--busy { opacity: .65; cursor: wait; pointer-events: none; }

/* ── Celda de apellido (texto libre + badge resuelto) ───────────────────── */
.ci-p5t-td--ap-cell { position: relative; }
.ci-p5t-ap-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ci-p5t-ap-ok {
    font-size: .62rem;
    font-weight: 700;
    color: #2e7d32;
    flex-shrink: 0;
    line-height: 1;
}

/* ── Celda CURP: campo + badge de validación ────────────────────────────── */
.ci-p5t-td--curp-cell {
    vertical-align: middle;
}
.ci-p5t-curp-badge {
    display: inline-block;
    font-size: .58rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 6px;
    margin-top: 2px;
    white-space: nowrap;
}
.ci-p5t-curp-badge--ok  { background: #e8f5e9; color: #2e7d32; }
.ci-p5t-curp-badge--err { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }

/* ── Resultado de importación Excel ─────────────────────────────────────── */
.ci-step5-import-result {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .72rem;
    color: #5d4037;
}
.ci-step5-import-hdr {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .74rem;
    color: #e65100;
    margin-bottom: 6px;
}
.ci-step5-import-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: #9e9e9e;
    font-size: .8rem;
    line-height: 1;
    padding: 0 2px;
}
.ci-step5-import-close:hover { color: #c62828; }
.ci-step5-import-err-row {
    padding: 2px 0 2px 20px;
    border-left: 3px solid #ffb300;
    margin-bottom: 3px;
    font-size: .69rem;
    color: #4e342e;
}