/*
 * Rediseño editor /editar/ (v2)
 * Layout de 3 columnas guiado por secciones, tarjetas acordeón, IA violeta.
 * Aislado bajo .ctc-editor2 para no filtrar a otras páginas del theme.
 */

.ctc-editor2 {
    --ctc-e2-green:        #20ae61;
    --ctc-e2-green-hover:  #1c9c56;
    --ctc-e2-green-dark:   #178a4c;
    --ctc-e2-green-soft:   #e7f6ee;
    --ctc-e2-green-soft-b: #bfe6d0;
    --ctc-e2-violet:       #6f42c1;
    --ctc-e2-violet-hover: #5f37ab;
    --ctc-e2-violet-soft:  #faf7fe;
    --ctc-e2-violet-soft-b:#efe8fa;
    --ctc-e2-title:        #232a35;
    --ctc-e2-body:         #31374a;
    --ctc-e2-mute:         #8a94ad;
    --ctc-e2-mute-2:       #6e7891;
    --ctc-e2-border:       #e6e9f0;
    --ctc-e2-border-2:     #eef1f6;
    --ctc-e2-input-border: #e2e6ef;
    --ctc-e2-danger:       #d64545;
    --ctc-e2-danger-b:     #f2d5d5;
    --ctc-e2-danger-bg:    #fdf4f4;
    --ctc-e2-app-bg:       #f5f7fa;

    background: var(--ctc-e2-app-bg);
    color: var(--ctc-e2-body);
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    padding-bottom: 32px;
}
.ctc-editor2 * { box-sizing: border-box; }
.ctc-editor2 input,
.ctc-editor2 textarea,
.ctc-editor2 select,
.ctc-editor2 button { font-family: inherit; }
.ctc-editor2 input:focus,
.ctc-editor2 textarea:focus,
.ctc-editor2 select:focus {
    border-color: var(--ctc-e2-green) !important;
    box-shadow: 0 0 0 3px rgba(32,174,97,.13) !important;
    outline: none;
}

/* ---------- Toolbar de progreso (sticky) ---------- */
/* Sticky por debajo del navbar-top del theme (fixed-top, 4rem por defecto). */
.ctc-e2-toolbar {
    position: sticky;
    top: var(--ctc-navbar-top-height, 4rem);
    z-index: 25;
    background: #fff;
    border-bottom: 1px solid var(--ctc-e2-border-2);
    padding: 11px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.ctc-e2-progress {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 220px;
}
.ctc-e2-ring {
    position: relative;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
}
.ctc-e2-ring svg { transform: rotate(-90deg); display: block; }
.ctc-e2-ring-track { fill: none; stroke: var(--ctc-e2-border-2); stroke-width: 4; }
.ctc-e2-ring-fill  { fill: none; stroke: var(--ctc-e2-green);   stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .3s ease; }
.ctc-e2-ring-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--ctc-e2-green);
}
.ctc-e2-progress-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ctc-e2-title);
    line-height: 1.2;
}
.ctc-e2-progress-hint {
    font-size: 12px;
    color: var(--ctc-e2-mute);
    font-weight: 600;
}
.ctc-e2-toolbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ctc-e2-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: 13.5px;
    padding: 9px 15px;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, border-color .12s, color .12s;
    line-height: 1.1;
}
.ctc-e2-btn-outline {
    background: #fff;
    color: var(--ctc-e2-body);
    border: 1px solid #cbd0dd;
}
.ctc-e2-btn-outline:hover { background: var(--ctc-e2-app-bg); color: var(--ctc-e2-body); }
.ctc-e2-btn-primary {
    background: var(--ctc-e2-green);
    color: #fff;
    border: 0;
    padding: 10px 18px;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(32,174,97,.28);
}
.ctc-e2-btn-primary:hover { background: var(--ctc-e2-green-hover); color: #fff; }

/* ---------- Layout de 3 columnas ---------- */
.ctc-e2-main {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px;
    display: grid;
    grid-template-columns: 250px 1fr 392px;
    gap: 24px;
    align-items: start;
}
/* Tablet: colapsamos a 2 col (nav + editor). La preview pasa al final
   apilada bajo el editor para no perderla. Prefijamos con `.ctc-editor2`
   para superar en cascada las reglas base de `.ctc-e2-nav`/`.ctc-e2-preview`
   que aparecen más abajo en el archivo. */
@media (max-width: 1199px) {
    .ctc-editor2 .ctc-e2-main {
        grid-template-columns: 220px 1fr;
        grid-template-areas:
            "nav editor"
            "preview preview";
    }
    .ctc-editor2 .ctc-e2-nav     { grid-area: nav; }
    .ctc-editor2 .ctc-e2-editor  { grid-area: editor; }
    .ctc-editor2 .ctc-e2-preview {
        grid-area: preview;
        position: static;
        max-width: 640px;
        margin: 0 auto;
        width: 100%;
    }
    /* En vista apilada la altura sticky del preview ya no aplica; deja que
       el marco crezca sin quedar atrapado en `100vh - 130px`. */
    .ctc-editor2 .ctc-e2-preview .ctc-e2-preview-frame { max-height: none; }
}

/* Mobile: 1 col. Nav se convierte en tira horizontal scrollable arriba,
   editor debajo, preview al final. Se prefija con `.ctc-editor2` para
   ganarle en especificidad a las reglas base que aparecen más abajo en
   el archivo (misma especificidad de una clase, así que gana el último). */
@media (max-width: 767px) {
    /* La preview del CV es un canvas react-pdf de ancho fijo (~A4). Si algún
       hijo se sale, cortamos aquí para que no arrastre la página entera al
       overflow horizontal (síntoma clásico: footer y chips de nav "cortados"
       porque el body queda más ancho que el viewport). `clip` en vez de
       `hidden` para no crear un scroll container que rompería el sticky del
       toolbar/nav. */
    .ctc-editor2 { overflow-x: clip; }
    .ctc-editor2 .ctc-e2-main {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "nav" "editor" "preview";
        padding: 16px;
        gap: 16px;
    }
    .ctc-editor2 .ctc-e2-nav {
        position: static;
        top: auto;
    }
    .ctc-editor2 .ctc-e2-nav-title {
        color: var(--ctc-e2-title);
        font-size: 12px;
        font-weight: 800;
        /* Un pelín de padding-left para que la "S" no toque el borde de la
           columna y quede visualmente escondida contra el edge del viewport,
           especialmente cuando la tira de chips de abajo está scrolleada. */
        margin: 0 0 8px 0;
        padding-left: 4px;
    }
    /* En dark, la regla global de `.ctc-e2-nav-title` fija un color .5 opaco
       (buen contraste en la nav sticky de desktop, pero ilegible arriba del
       strip mobile). Forzamos el color de título completo aquí. */
    [data-bs-theme="dark"] .ctc-editor2 .ctc-e2-nav-title,
    .dark .ctc-editor2 .ctc-e2-nav-title { color: var(--ctc-e2-title); }
    /* Convierte la lista vertical en una tira horizontal con scroll interno.
       Sin negative-margin para no provocar overflow horizontal del <body>.
       `scroll-padding-inline` deja aire cuando el chip activo se auto-scrollea
       hacia el borde. */
    .ctc-editor2 .ctc-e2-nav-list {
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding: 2px 4px 8px;
        scroll-padding-inline: 16px;
        scrollbar-width: none;
    }
    .ctc-editor2 .ctc-e2-nav-list::-webkit-scrollbar { display: none; }
    /* Chip: contenido al mínimo. Sin `width` la regla base (`width:100%`)
       forzaba cada botón a ocupar todo el ancho y sólo se veía uno a la vez. */
    .ctc-editor2 .ctc-e2-nav-item {
        flex: 0 0 auto;
        width: auto;
        white-space: nowrap;
        padding: 8px 12px;
        gap: 8px;
    }
    .ctc-editor2 .ctc-e2-nav-item .ctc-e2-nav-status { display: none; }
    .ctc-editor2 .ctc-e2-nav-item .ctc-e2-nav-ico {
        width: 22px;
        height: 22px;
        font-size: 12px;
        flex: 0 0 22px;
    }
    .ctc-editor2 .ctc-e2-nav-item .ctc-e2-nav-label { font-size: 13px; }

    /* Toolbar mobile: los botones "Cambiar plantilla" y "Descargar PDF" con
       label completo empujan la línea. Compactamos el padding y bajamos la
       tipografía para que respiren mejor. */
    .ctc-editor2 .ctc-e2-toolbar { padding: 10px 16px; gap: 10px; }
    .ctc-editor2 .ctc-e2-toolbar-actions { gap: 8px; margin-left: 0; width: 100%; }
    .ctc-editor2 .ctc-e2-toolbar-actions .ctc-e2-btn {
        flex: 1 1 auto;
        justify-content: center;
        padding: 9px 12px;
        font-size: 13px;
    }
    .ctc-editor2 .ctc-e2-progress { min-width: 0; flex: 1 1 100%; }
    /* El "Consejo" ocupa demasiado en mobile — lo ocultamos, aparece en desktop. */
    .ctc-editor2 .ctc-e2-tip { display: none; }

    /* Chip tipográfico: fondo claro por defecto para que se lean como pastillas
       separadas y no como texto suelto pegado al icono. Excluimos `.is-active`
       para no perder el highlight verde. */
    .ctc-editor2 .ctc-e2-nav-item:not(.is-active) {
        background: #fff;
        border: 1px solid var(--ctc-e2-border);
    }
    [data-bs-theme="dark"] .ctc-editor2 .ctc-e2-nav-item:not(.is-active),
    .dark .ctc-editor2 .ctc-e2-nav-item:not(.is-active) {
        background: rgba(255,255,255,.04);
        border-color: var(--ctc-e2-input-border);
    }

    /* Preview del CV: el canvas react-pdf tiene ancho intrínseco (~595px, A4).
       En mobile lo confinamos al ancho de columna y dejamos que el usuario haga
       scroll horizontal DENTRO del marco (no del body). */
    .ctc-editor2 .ctc-e2-preview {
        max-width: 100%;
        min-width: 0;
        margin: 0 auto;
    }
    .ctc-editor2 .ctc-e2-preview-frame {
        overflow: auto;
        padding: 10px;
        -webkit-overflow-scrolling: touch;
    }
    /* Acciones de preview: como los del toolbar, apiladas y de ancho completo. */
    .ctc-editor2 .ctc-e2-preview-actions .ctc-e2-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Nav lateral ---------- */
.ctc-e2-nav {
    position: sticky;
    /* navbar-top (4rem) + altura aprox. del toolbar (76px). */
    top: calc(var(--ctc-navbar-top-height, 4rem) + 76px);
}
.ctc-e2-nav-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9aa3b5;
    margin: 4px 0 12px 6px;
}
.ctc-e2-nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ctc-e2-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 11px;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: #525b75;
    transition: background .12s;
    font-family: inherit;
    text-align: left;
}
.ctc-e2-nav-item:hover { background: var(--ctc-e2-border-2); color: var(--ctc-e2-body); }
.ctc-e2-nav-item.is-active {
    background: var(--ctc-e2-green-soft);
    border-color: var(--ctc-e2-green-soft-b);
    color: var(--ctc-e2-green-dark);
}
.ctc-e2-nav-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex: 0 0 28px;
    background: #f0f2f6;
    color: var(--ctc-e2-mute);
}
.ctc-e2-nav-item.is-active .ctc-e2-nav-ico {
    background: var(--ctc-e2-green);
    color: #fff;
}
.ctc-e2-nav-label {
    flex: 1;
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.2;
}
.ctc-e2-nav-status { font-size: 14px; color: #d2d7e2; }
.ctc-e2-nav-item.is-done .ctc-e2-nav-status { color: var(--ctc-e2-green); }
.ctc-e2-tip {
    margin-top: 16px;
    background: #f1ecfb;
    border: 1px solid #e6dbf8;
    border-radius: 12px;
    padding: 14px;
}
.ctc-e2-tip-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5a34a3;
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 5px;
}
.ctc-e2-tip-body {
    font-size: 12.5px;
    line-height: 1.5;
    color: #6b5a8f;
}

/* ---------- Editor (columna central) ---------- */
.ctc-e2-editor { min-width: 0; }
.ctc-e2-section { display: none; animation: ctcE2PanelIn .25s ease; }
.ctc-e2-section.is-active { display: block; }
@keyframes ctcE2PanelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.ctc-e2-section-head { margin-bottom: 18px; }
.ctc-e2-section-title {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    color: var(--ctc-e2-title);
    letter-spacing: -.02em;
}
.ctc-e2-section-hint {
    margin: 5px 0 0;
    font-size: 14px;
    color: var(--ctc-e2-mute);
    font-weight: 600;
}
.ctc-e2-section-list { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Card genérica del panel personal ---------- */
.ctc-e2-panel {
    background: #fff;
    border: 1px solid var(--ctc-e2-border-2);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 1px 2px rgba(20,24,36,.04);
}
.ctc-e2-field { margin-bottom: 16px; }
.ctc-e2-field:last-child { margin-bottom: 0; }
.ctc-e2-row { display: flex; gap: 14px; flex-wrap: wrap; }
.ctc-e2-row > .ctc-e2-field { flex: 1 1 180px; margin-bottom: 0; }
.ctc-e2-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    color: var(--ctc-e2-mute-2);
    margin-bottom: 6px;
}
.ctc-e2-input,
.ctc-e2-select,
.ctc-e2-textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--ctc-e2-input-border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--ctc-e2-body);
    background: #fff;
    line-height: 1.4;
    font-family: inherit;
}
.ctc-e2-textarea { resize: vertical; min-height: 88px; }

/* ---------- Bloque IA violeta ---------- */
.ctc-e2-ai {
    border: 1.5px solid #e2d6f7;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.ctc-e2-ai .ctc-e2-textarea {
    border: 0;
    border-radius: 0;
    background: #fff;
    padding: 13px;
    display: block;
}
.ctc-e2-ai .ctc-e2-textarea:focus { box-shadow: none !important; }
.ctc-e2-ai-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    background: var(--ctc-e2-violet-soft);
    border-top: 1px solid var(--ctc-e2-violet-soft-b);
    flex-wrap: wrap;
}
.ctc-e2-ai-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 800;
    color: #7a5ec0;
}
.ctc-e2-ai-spacer { flex: 1; }
.ctc-e2-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ctc-e2-violet);
    color: #fff;
    border: 0;
    font-weight: 700;
    font-size: 12.5px;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
}
.ctc-e2-ai-btn:hover { background: var(--ctc-e2-violet-hover); color: #fff; }
.ctc-e2-ai-btn:disabled { opacity: .65; cursor: default; }
.ctc-e2-ai-btn-ghost {
    background: #fff;
    color: var(--ctc-e2-violet);
    border: 1px solid #ddd0f5;
}
.ctc-e2-ai-btn-ghost:hover { background: #f6f1fd; color: var(--ctc-e2-violet); }
.ctc-e2-charcount {
    font-size: 11.5px;
    font-weight: 700;
    color: #9aa3b5;
}
.ctc-e2-charcount.is-over { color: var(--ctc-e2-danger); }

/* ---------- Tarjeta acordeón para exp/edu/ref ---------- */
.ctc-e2-card {
    background: #fff;
    border: 1px solid var(--ctc-e2-border-2);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20,24,36,.04);
    overflow: hidden;
    transition: border-color .12s;
}
.ctc-e2-card.is-open { border-color: var(--ctc-e2-green-soft-b); }
.ctc-e2-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    cursor: pointer;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.ctc-e2-card-grip {
    color: #c3cad8;
    font-size: 16px;
    cursor: grab;
}
.ctc-e2-card-grip.is-hidden { visibility: hidden; }
.ctc-e2-card-ico {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--ctc-e2-green-soft);
    color: var(--ctc-e2-green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex: 0 0 34px;
}
.ctc-e2-card-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ctc-e2-card-title-main {
    font-weight: 800;
    font-size: 14.5px;
    color: var(--ctc-e2-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ctc-e2-card-title-sub {
    font-size: 12.5px;
    color: var(--ctc-e2-mute);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ctc-e2-card-chev {
    color: #9aa3b5;
    font-size: 14px;
    transition: transform .18s;
}
.ctc-e2-card.is-open .ctc-e2-card-chev { transform: rotate(180deg); }
.ctc-e2-card-body {
    display: none;
    padding: 4px 16px 18px;
    border-top: 1px solid #f0f2f6;
}
.ctc-e2-card.is-open .ctc-e2-card-body { display: block; }
.ctc-e2-card-body > .ctc-e2-field:first-child,
.ctc-e2-card-body > .ctc-e2-row:first-child { margin-top: 14px; }
.ctc-e2-card-body .ctc-e2-field,
.ctc-e2-card-body .ctc-e2-row { margin-top: 14px; margin-bottom: 0; }
.ctc-e2-card-body .ctc-e2-row .ctc-e2-field { margin-top: 0; }
.ctc-e2-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}
.ctc-e2-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ctc-e2-body);
}
.ctc-e2-toggle input {
    width: 17px;
    height: 17px;
    accent-color: var(--ctc-e2-green);
}

/* ---------- Filas simples (idiomas/habilidades/cursos) ---------- */
.ctc-e2-simple {
    background: #fff;
    border: 1px solid var(--ctc-e2-border-2);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20,24,36,.04);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ctc-e2-simple .ctc-e2-card-ico { flex: 0 0 34px; }
.ctc-e2-simple .ctc-e2-card-grip { flex: 0 0 16px; }
.ctc-e2-simple input,
.ctc-e2-simple select {
    padding: 10px 12px;
    border: 1px solid var(--ctc-e2-input-border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--ctc-e2-body);
    background: #fff;
    font-family: inherit;
    line-height: 1.4;
}
.ctc-e2-simple .ctc-e2-simple-name { flex: 2 1 160px; font-weight: 700; }
.ctc-e2-simple .ctc-e2-simple-mid  { flex: 1 1 130px; }
.ctc-e2-simple .ctc-e2-simple-level{ flex: 0 0 150px; }
.ctc-e2-simple .ctc-e2-simple-year { flex: 0 0 100px; }
.ctc-e2-simple-actions { display: flex; align-items: center; gap: 8px; }

/* Botones pequeños dentro de tarjetas */
.ctc-e2-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--ctc-e2-body);
    border: 1px solid #cbd0dd;
    font-weight: 700;
    font-size: 12.5px;
    padding: 8px 13px;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.1;
}
.ctc-e2-btn-sm:hover { background: var(--ctc-e2-app-bg); color: var(--ctc-e2-body); }
.ctc-e2-btn-save {
    background: var(--ctc-e2-green);
    color: #fff;
    border: 0;
    padding: 8px 15px;
}
.ctc-e2-btn-save:hover { background: var(--ctc-e2-green-hover); color: #fff; }
.ctc-e2-btn-danger {
    background: #fff;
    color: var(--ctc-e2-danger);
    border: 1px solid var(--ctc-e2-danger-b);
}
.ctc-e2-btn-danger:hover { background: var(--ctc-e2-danger-bg); color: var(--ctc-e2-danger); }
.ctc-e2-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    flex: 0 0 36px;
}

/* Botón "Añadir …" */
.ctc-e2-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    color: var(--ctc-e2-green-dark);
    border: 1.5px dashed #b7e3ca;
    font-weight: 800;
    font-size: 14px;
    padding: 14px;
    border-radius: 14px;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
    text-align: center;
}
.ctc-e2-section-list + .ctc-e2-add { margin-top: 12px; }
.ctc-e2-add:hover { background: #f2fbf6; border-color: var(--ctc-e2-green); color: var(--ctc-e2-green-dark); }
.ctc-e2-empty {
    text-align: center;
    padding: 32px 20px;
    color: var(--ctc-e2-mute);
    font-size: 13.5px;
    font-weight: 600;
    background: #fff;
    border: 1px dashed var(--ctc-e2-border);
    border-radius: 14px;
}
.ctc-e2-empty p { margin: 0 0 10px; }

/* ---------- Preview (columna derecha) ---------- */
.ctc-e2-preview {
    position: sticky;
    /* navbar-top (4rem) + altura aprox. del toolbar (76px). */
    top: calc(var(--ctc-navbar-top-height, 4rem) + 76px);
    min-width: 0;
}
.ctc-e2-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.ctc-e2-preview-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 13.5px;
    color: var(--ctc-e2-title);
}
.ctc-e2-preview-title i { color: var(--ctc-e2-green); }
/* Frame = "escritorio" gris/oscuro que rodea la hoja para que el papel blanco
   del CV destaque. El `#root` interior es el papel: fondo blanco, sombra y
   radio pequeño para separarlo del marco. En dark mode el escritorio se hunde
   aún más para reforzar el contraste con el papel (que se queda blanco porque
   es el PDF real). */
.ctc-e2-preview-frame {
    background: #eef1f6;
    border: 1px solid var(--ctc-e2-border);
    border-radius: 14px;
    box-shadow: inset 0 1px 3px rgba(20,24,36,.06);
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    padding: 20px;
}
.ctc-e2-preview-frame::-webkit-scrollbar { width: 8px; }
.ctc-e2-preview-frame::-webkit-scrollbar-thumb { background: rgba(159,166,188,.5); border-radius: 8px; }
.ctc-e2-preview-frame > #root {
    background: #fff;
    border-radius: 6px;
    box-shadow:
        0 10px 30px rgba(20,24,36,.18),
        0 2px 6px rgba(20,24,36,.08);
    overflow: hidden;
}
.ctc-e2-preview-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.ctc-e2-preview-actions .ctc-e2-btn-primary { flex: 1; justify-content: center; padding: 11px; border-radius: 11px; font-size: 13.5px; }
.ctc-e2-preview-actions .ctc-e2-btn-outline { flex: 0 0 auto; padding: 11px 15px; border-radius: 11px; }

/* Hint mobile: obsoleto ahora que la preview aparece apilada en <1200px.
   Se mantiene el marcado en el PHP por compatibilidad; sólo lo ocultamos. */
.ctc-e2-mobile-preview { display: none; }

/* Ocultar la nav lateral se maneja en mobile por defecto arriba */
.ctc-editor2 h1, .ctc-editor2 h2, .ctc-editor2 h3, .ctc-editor2 h4 { font-family: inherit; }

/* ----------------------------------------------------------------
 * Modo oscuro
 * El theme aplica `[data-bs-theme="dark"]` en <html>/<body> y algunos
 * componentes usan también `.dark`. Reescribimos los tokens del editor
 * y las superficies hardcodeadas en `#fff` / `#f5f7fa` para armonizar
 * con Phoenix (surface principal ≈ #1a1e2b, borde translúcido blanco).
 * La preview del CV (papel) se mantiene blanca porque es el PDF real.
 * ---------------------------------------------------------------- */
[data-bs-theme="dark"] .ctc-editor2,
.dark .ctc-editor2 {
    --ctc-e2-title:        #e8ecf5;
    --ctc-e2-body:         #c9d1e0;
    --ctc-e2-mute:         #8a94ad;
    --ctc-e2-mute-2:       #a3adc2;
    --ctc-e2-border:       rgba(255,255,255,.08);
    --ctc-e2-border-2:     rgba(255,255,255,.06);
    --ctc-e2-input-border: rgba(255,255,255,.14);
    --ctc-e2-app-bg:       transparent;
    --ctc-e2-green-soft:   rgba(32,174,97,.14);
    --ctc-e2-green-soft-b: rgba(32,174,97,.35);
    --ctc-e2-violet-soft:  rgba(111,66,193,.14);
    --ctc-e2-violet-soft-b:rgba(111,66,193,.28);
    --ctc-e2-danger-b:     rgba(214,69,69,.35);
    --ctc-e2-danger-bg:    rgba(214,69,69,.12);

    background: transparent;
    color: var(--ctc-e2-body);
}

/* Superficies elevadas (toolbar, cards, panels, inputs, botones outline). */
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-toolbar,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-panel,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-card,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-simple,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-ai,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-empty,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-add,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-mobile-preview,
.dark .ctc-editor2 .ctc-e2-toolbar,
.dark .ctc-editor2 .ctc-e2-panel,
.dark .ctc-editor2 .ctc-e2-card,
.dark .ctc-editor2 .ctc-e2-simple,
.dark .ctc-editor2 .ctc-e2-ai,
.dark .ctc-editor2 .ctc-e2-empty,
.dark .ctc-editor2 .ctc-e2-add,
.dark .ctc-editor2 .ctc-e2-mobile-preview {
    background: var(--phoenix-emphasis-bg, #1a1e2b);
    color: var(--ctc-e2-body);
    box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-add,
.dark .ctc-editor2 .ctc-e2-add {
    border-color: rgba(32,174,97,.35);
    color: #6cd7a1;
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-add:hover,
.dark .ctc-editor2 .ctc-e2-add:hover {
    background: rgba(32,174,97,.1);
    border-color: var(--ctc-e2-green);
    color: #6cd7a1;
}

/* Inputs/selects/textareas: fondo sutil translúcido para leer sobre el card. */
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-input,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-select,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-textarea,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-simple input,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-simple select,
.dark .ctc-editor2 .ctc-e2-input,
.dark .ctc-editor2 .ctc-e2-select,
.dark .ctc-editor2 .ctc-e2-textarea,
.dark .ctc-editor2 .ctc-e2-simple input,
.dark .ctc-editor2 .ctc-e2-simple select {
    background: rgba(255,255,255,.03);
    color: var(--ctc-e2-body);
    border-color: var(--ctc-e2-input-border);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-input::placeholder,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-textarea::placeholder,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-simple input::placeholder,
.dark .ctc-editor2 .ctc-e2-input::placeholder,
.dark .ctc-editor2 .ctc-e2-textarea::placeholder,
.dark .ctc-editor2 .ctc-e2-simple input::placeholder {
    color: rgba(200,208,224,.4);
}
/* El textarea dentro de .ctc-e2-ai comparte fondo con el card (violet-tinted). */
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-ai .ctc-e2-textarea,
.dark .ctc-editor2 .ctc-e2-ai .ctc-e2-textarea {
    background: transparent;
    border: 0;
}

/* Nav lateral */
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-nav-item,
.dark .ctc-editor2 .ctc-e2-nav-item {
    color: var(--ctc-e2-mute-2);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-nav-item:hover,
.dark .ctc-editor2 .ctc-e2-nav-item:hover {
    background: rgba(255,255,255,.05);
    color: var(--ctc-e2-body);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-nav-item.is-active,
.dark .ctc-editor2 .ctc-e2-nav-item.is-active {
    background: rgba(32,174,97,.14);
    border-color: rgba(32,174,97,.35);
    color: #6cd7a1;
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-nav-ico,
.dark .ctc-editor2 .ctc-e2-nav-ico {
    background: rgba(255,255,255,.06);
    color: var(--ctc-e2-mute);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-nav-status,
.dark .ctc-editor2 .ctc-e2-nav-status {
    color: rgba(255,255,255,.15);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-nav-item.is-done .ctc-e2-nav-status,
.dark .ctc-editor2 .ctc-e2-nav-item.is-done .ctc-e2-nav-status {
    color: #6cd7a1;
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-nav-title,
.dark .ctc-editor2 .ctc-e2-nav-title {
    color: rgba(200,208,224,.5);
}

/* Tip violeta */
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-tip,
.dark .ctc-editor2 .ctc-e2-tip {
    background: rgba(111,66,193,.14);
    border-color: rgba(111,66,193,.32);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-tip-title,
.dark .ctc-editor2 .ctc-e2-tip-title { color: #cfbdf5; }
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-tip-body,
.dark .ctc-editor2 .ctc-e2-tip-body  { color: #b7a8dc; }

/* Toolbar de progreso: anillo, textos, hints */
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-toolbar,
.dark .ctc-editor2 .ctc-e2-toolbar {
    border-bottom-color: rgba(255,255,255,.06);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-ring-track,
.dark .ctc-editor2 .ctc-e2-ring-track { stroke: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-progress-title,
.dark .ctc-editor2 .ctc-e2-progress-title { color: var(--ctc-e2-title); }
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-progress-hint,
.dark .ctc-editor2 .ctc-e2-progress-hint,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-section-hint,
.dark .ctc-editor2 .ctc-e2-section-hint,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-label,
.dark .ctc-editor2 .ctc-e2-label { color: var(--ctc-e2-mute); }
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-section-title,
.dark .ctc-editor2 .ctc-e2-section-title { color: var(--ctc-e2-title); }
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-charcount,
.dark .ctc-editor2 .ctc-e2-charcount { color: rgba(200,208,224,.5); }

/* Card head/body: separadores, chevron, grip */
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-card-body,
.dark .ctc-editor2 .ctc-e2-card-body {
    border-top-color: rgba(255,255,255,.06);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-card-grip,
.dark .ctc-editor2 .ctc-e2-card-grip { color: rgba(255,255,255,.2); }
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-card-chev,
.dark .ctc-editor2 .ctc-e2-card-chev { color: rgba(255,255,255,.35); }
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-card.is-open,
.dark .ctc-editor2 .ctc-e2-card.is-open {
    border-color: rgba(32,174,97,.4);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-card-title-main,
.dark .ctc-editor2 .ctc-e2-card-title-main { color: var(--ctc-e2-title); }
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-card-ico,
.dark .ctc-editor2 .ctc-e2-card-ico {
    background: rgba(32,174,97,.14);
    color: #6cd7a1;
}

/* Botones outline / secundarios / danger */
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-btn-outline,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-btn-sm,
.dark .ctc-editor2 .ctc-e2-btn-outline,
.dark .ctc-editor2 .ctc-e2-btn-sm {
    background: rgba(255,255,255,.04);
    color: var(--ctc-e2-body);
    border-color: var(--ctc-e2-input-border);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-btn-outline:hover,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-btn-sm:hover,
.dark .ctc-editor2 .ctc-e2-btn-outline:hover,
.dark .ctc-editor2 .ctc-e2-btn-sm:hover {
    background: rgba(255,255,255,.08);
    color: var(--ctc-e2-title);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-btn-danger,
.dark .ctc-editor2 .ctc-e2-btn-danger {
    background: rgba(214,69,69,.1);
    color: #f0a5a5;
    border-color: rgba(214,69,69,.32);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-btn-danger:hover,
.dark .ctc-editor2 .ctc-e2-btn-danger:hover {
    background: rgba(214,69,69,.16);
    color: #f0a5a5;
}

/* Barra IA violeta y botón ghost */
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-ai,
.dark .ctc-editor2 .ctc-e2-ai {
    border-color: rgba(111,66,193,.35);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-ai-bar,
.dark .ctc-editor2 .ctc-e2-ai-bar {
    background: rgba(111,66,193,.1);
    border-top-color: rgba(111,66,193,.24);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-ai-btn-ghost,
.dark .ctc-editor2 .ctc-e2-ai-btn-ghost {
    background: rgba(111,66,193,.16);
    color: #cfbdf5;
    border-color: rgba(111,66,193,.4);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-ai-btn-ghost:hover,
.dark .ctc-editor2 .ctc-e2-ai-btn-ghost:hover {
    background: rgba(111,66,193,.24);
    color: #e2d4fb;
}

/* Preview: la nav-title del cabezal + estilos del contenedor.
   El "escritorio" (`.ctc-e2-preview-frame`) se hunde en un gris oscuro para
   contrastar con el "papel" del CV, que se mantiene blanco porque es el PDF
   renderizado que se descarga. */
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-preview-title,
.dark .ctc-editor2 .ctc-e2-preview-title { color: var(--ctc-e2-title); }
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-preview-frame,
.dark .ctc-editor2 .ctc-e2-preview-frame {
    background: #0f131c;
    color: #232a35;
    border-color: rgba(255,255,255,.08);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-preview-frame > #root,
.dark .ctc-editor2 .ctc-e2-preview-frame > #root {
    background: #fff;
    box-shadow:
        0 12px 32px rgba(0,0,0,.55),
        0 2px 6px rgba(0,0,0,.35);
}

/* Focus ring conserva el verde primario, funciona igual en dark. */

/* =========================================================================
 * Ayuda guiada para quien crea su primer CV (mejoras 1-7).
 * Ejemplos copiables, verbos de acción, avisos de calidad, validación,
 * consejos contextuales, navegación paso a paso, empty states didácticos.
 * ====================================================================== */

/* Varias reglas de abajo fijan `display`, lo que ganaría en especificidad al
 * atributo [hidden] del navegador y dejaría paneles/avisos visibles cuando
 * deberían estar ocultos. Esta regla restaura el comportamiento de [hidden]. */
.ctc-editor2 [hidden] { display: none !important; }

/* Aviso de calidad del resumen (mejora 3). */
.ctc-e2-quality {
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--ctc-e2-mute-2);
}
.ctc-e2-quality.is-warn { color: #b5701b; }
.ctc-e2-quality.is-ok   { color: var(--ctc-e2-green-dark); }
.ctc-e2-quality i { margin-top: 1px; }

/* Micro-guía y fórmula sobre un textarea (mejora 2). */
.ctc-e2-microhint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 12.5px;
    color: var(--ctc-e2-mute-2);
    line-height: 1.45;
}
.ctc-e2-microhint i { margin-top: 1px; color: var(--ctc-e2-green); }
.ctc-e2-microhint strong { color: var(--ctc-e2-body); }

/* Chips de verbos de acción (mejora 2). */
.ctc-e2-verbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.ctc-e2-verb {
    background: var(--ctc-e2-green-soft);
    border: 1px solid var(--ctc-e2-green-soft-b);
    color: var(--ctc-e2-green-dark);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .08s;
}
.ctc-e2-verb:hover { background: #d9f2e4; border-color: var(--ctc-e2-green); }
.ctc-e2-verb:active { transform: scale(.96); }

/* Ejemplos plegables "Ver ejemplos" + "Usar como base" (mejora 1). */
.ctc-e2-help { margin-top: 10px; }
.ctc-e2-help-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 2px 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ctc-e2-violet);
    cursor: pointer;
}
.ctc-e2-help-toggle:hover { color: var(--ctc-e2-violet-hover); text-decoration: underline; }
.ctc-e2-help-toggle.is-open i { transform: rotate(-8deg); }
.ctc-e2-help-panel {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ctc-e2-example {
    background: var(--ctc-e2-violet-soft);
    border: 1px solid var(--ctc-e2-violet-soft-b);
    border-radius: 10px;
    padding: 11px 13px;
}
.ctc-e2-example-text {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ctc-e2-body);
}
.ctc-e2-example-use {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--ctc-e2-violet-soft-b);
    color: var(--ctc-e2-violet);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.ctc-e2-example-use:hover { background: #f6f1fd; border-color: var(--ctc-e2-violet); }

/* Validación suave de correo/teléfono (mejora 7). */
.ctc-editor2 .ctc-e2-input.is-invalid {
    border-color: var(--ctc-e2-danger) !important;
    background: var(--ctc-e2-danger-bg);
}
.ctc-editor2 .ctc-e2-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(214,69,69,.13) !important;
}
.ctc-e2-invalid {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ctc-e2-danger);
}

/* Pill de autoguardado (mejora 7). */
.ctc-e2-autosave {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ctc-e2-green-dark);
}
.ctc-e2-autosave.is-saving { color: var(--ctc-e2-mute-2); }
.ctc-e2-autosave i { font-size: 14px; }

/* Empty states didácticos (mejora 5). */
.ctc-e2-empty-teach {
    text-align: center;
    padding: 22px 18px;
}
.ctc-e2-empty-ico {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ctc-e2-green-soft);
    color: var(--ctc-e2-green-dark);
    font-size: 20px;
}
.ctc-e2-empty-title { margin: 0 0 4px; font-weight: 800; color: var(--ctc-e2-title); }
.ctc-e2-empty-sub {
    margin: 0 auto 12px;
    max-width: 460px;
    font-size: 13px;
    color: var(--ctc-e2-mute-2);
    line-height: 1.5;
}
.ctc-e2-empty-example {
    display: inline-block;
    text-align: left;
    background: #fff;
    border: 1px dashed var(--ctc-e2-input-border);
    border-radius: 10px;
    padding: 9px 13px;
    font-size: 12.5px;
    color: var(--ctc-e2-body);
    line-height: 1.5;
    max-width: 480px;
}

/* Navegación guiada paso a paso (mejora 4). */
.ctc-e2-guide-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--ctc-e2-border);
    border-radius: 12px;
}
.ctc-e2-guide-status {
    flex: 1;
    text-align: center;
    line-height: 1.25;
}
.ctc-e2-guide-step { display: block; font-size: 11.5px; font-weight: 700; color: var(--ctc-e2-mute); text-transform: uppercase; letter-spacing: .03em; }
.ctc-e2-guide-name { display: block; font-size: 13.5px; font-weight: 800; color: var(--ctc-e2-title); }
.ctc-e2-guide-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid #cbd0dd;
    color: var(--ctc-e2-body);
    border-radius: 10px;
    padding: 9px 15px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.ctc-e2-guide-btn:hover:not(:disabled) { background: var(--ctc-e2-app-bg); }
.ctc-e2-guide-btn:disabled { opacity: .4; cursor: default; }
.ctc-e2-guide-next {
    background: var(--ctc-e2-green);
    border-color: var(--ctc-e2-green);
    color: #fff;
    box-shadow: 0 2px 8px rgba(32,174,97,.24);
}
.ctc-e2-guide-next:hover:not(:disabled) { background: var(--ctc-e2-green-hover); border-color: var(--ctc-e2-green-hover); }
.ctc-e2-guide-next.is-finish {
    background: var(--ctc-e2-violet);
    border-color: var(--ctc-e2-violet);
    box-shadow: 0 2px 8px rgba(111,66,193,.24);
}
.ctc-e2-guide-next.is-finish:hover { background: var(--ctc-e2-violet-hover); border-color: var(--ctc-e2-violet-hover); }

@media (max-width: 575.98px) {
    .ctc-e2-guide-btn span { display: none; }
    .ctc-e2-guide-btn { padding: 9px 13px; }
}

/* ---- Dark mode para la ayuda guiada ---- */
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-microhint strong,
.dark .ctc-editor2 .ctc-e2-microhint strong,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-empty-title,
.dark .ctc-editor2 .ctc-e2-empty-title,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-guide-name,
.dark .ctc-editor2 .ctc-e2-guide-name { color: var(--ctc-e2-title); }
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-verb,
.dark .ctc-editor2 .ctc-e2-verb {
    background: rgba(32,174,97,.14);
    border-color: rgba(32,174,97,.4);
    color: #7fe0ab;
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-example,
.dark .ctc-editor2 .ctc-e2-example {
    background: rgba(111,66,193,.12);
    border-color: rgba(111,66,193,.35);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-example-text,
.dark .ctc-editor2 .ctc-e2-example-text { color: var(--ctc-e2-emphasis, #d7dce6); }
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-example-use,
.dark .ctc-editor2 .ctc-e2-example-use {
    background: rgba(255,255,255,.04);
    border-color: rgba(111,66,193,.4);
    color: #c3aef0;
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-empty-example,
.dark .ctc-editor2 .ctc-e2-empty-example {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.12);
    color: var(--ctc-e2-emphasis, #d7dce6);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-guide-nav,
.dark .ctc-editor2 .ctc-e2-guide-nav {
    background: #1c2330;
    border-color: rgba(255,255,255,.08);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-guide-btn,
.dark .ctc-editor2 .ctc-e2-guide-btn {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.14);
    color: var(--ctc-e2-emphasis, #d7dce6);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-guide-next,
.dark .ctc-editor2 .ctc-e2-guide-next { color: #fff; }
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-empty-ico,
.dark .ctc-editor2 .ctc-e2-empty-ico {
    background: rgba(32,174,97,.16);
    color: #7fe0ab;
}

/* =========================================================================
 * Catálogo ChileValora: autocompletado de profesión + competencias (UCL).
 * ====================================================================== */

/* Hint bajo el campo de profesión. */
.ctc-e2-field-help {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--ctc-e2-mute-2);
    line-height: 1.4;
}
.ctc-e2-field-help i { margin-top: 1px; color: var(--ctc-e2-green); }

/* Wrapper del input con autocompletado + lista desplegable. */
.ctc-e2-ac { position: relative; }
.ctc-e2-ac-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--ctc-e2-input-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(20,30,55,.12);
    padding: 4px;
}
.ctc-e2-ac-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 7px;
    padding: 8px 10px;
    font-size: 13.5px;
    color: var(--ctc-e2-body);
    cursor: pointer;
    line-height: 1.35;
}
.ctc-e2-ac-item:hover,
.ctc-e2-ac-item.is-active { background: var(--ctc-e2-green-soft); color: var(--ctc-e2-green-dark); }

/* Chips de competencias del perfil (UCL). */
.ctc-e2-ucls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px;
    background: var(--ctc-e2-green-soft);
    border: 1px solid var(--ctc-e2-green-soft-b);
    border-radius: 10px;
}
.ctc-e2-ucls-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    font-size: 12px;
    font-weight: 800;
    color: var(--ctc-e2-green-dark);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.ctc-e2-ucls-hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--ctc-e2-mute-2);
    margin-left: auto;
}
.ctc-e2-ucl-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    background: #fff;
    border: 1px solid var(--ctc-e2-green-soft-b);
    color: var(--ctc-e2-green-dark);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .08s;
}
.ctc-e2-ucl-chip i { flex: 0 0 auto; font-size: 11px; }
.ctc-e2-ucl-chip span { overflow: hidden; text-overflow: ellipsis; }
.ctc-e2-ucl-chip:hover { background: #d9f2e4; border-color: var(--ctc-e2-green); }
.ctc-e2-ucl-chip:active { transform: scale(.98); }

/* Dark mode. */
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-ac-list,
.dark .ctc-editor2 .ctc-e2-ac-list {
    background: #1c2330;
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-ac-item,
.dark .ctc-editor2 .ctc-e2-ac-item { color: var(--ctc-e2-emphasis, #d7dce6); }
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-ac-item:hover,
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-ac-item.is-active,
.dark .ctc-editor2 .ctc-e2-ac-item:hover,
.dark .ctc-editor2 .ctc-e2-ac-item.is-active { background: rgba(32,174,97,.16); color: #7fe0ab; }
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-ucls,
.dark .ctc-editor2 .ctc-e2-ucls {
    background: rgba(32,174,97,.1);
    border-color: rgba(32,174,97,.32);
}
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-ucl-chip,
.dark .ctc-editor2 .ctc-e2-ucl-chip {
    background: rgba(255,255,255,.05);
    border-color: rgba(32,174,97,.4);
    color: #7fe0ab;
}

/* =====================================================================
 * Mejoras v2.1: preview en vivo, duplicar, deshacer, validaciones y
 * checklist de descarga. Todo bajo .ctc-editor2 salvo el overlay modal
 * (se monta en <body>, así que se prefija aparte).
 * ===================================================================== */

/* Botón "Adaptar a una oferta" en el toolbar: acento violeta sutil. */
.ctc-e2-btn-match { border-color: var(--ctc-e2-violet-soft-b); color: var(--ctc-e2-violet); }
.ctc-e2-btn-match:hover { background: var(--ctc-e2-violet-soft); color: var(--ctc-e2-violet-hover); }
.ctc-e2-btn-match i { color: var(--ctc-e2-violet); }

/* Botón "Duplicar" (fantasma) y separador en las acciones de tarjeta. */
.ctc-e2-card-actions-spacer { flex: 1 1 auto; }
.ctc-e2-btn-ghost {
    background: transparent;
    color: var(--ctc-e2-mute-2);
    border: 1px solid var(--ctc-e2-border);
}
.ctc-e2-btn-ghost:hover { background: var(--ctc-e2-app-bg); color: var(--ctc-e2-body); }

/* Flash "Guardado" en el botón de guardar tras el AJAX. */
.ctc-e2-btn-save.is-saved {
    background: var(--ctc-e2-green-dark);
    color: #fff;
    pointer-events: none;
}

/* Aviso de fecha inconsistente: hereda de .ctc-e2-invalid, sólo margen. */
.ctc-e2-date-warn { margin-top: -4px; margin-bottom: 4px; }

/* Botón "Deshacer" tras usar un ejemplo como base. */
.ctc-e2-undo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 4px 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ctc-e2-mute-2);
    background: var(--ctc-e2-app-bg);
    border: 1px solid var(--ctc-e2-border);
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.ctc-e2-undo:hover { color: var(--ctc-e2-body); border-color: #cbd0dd; }

/* Estado "Actualizando…" del encabezado de la vista previa. */
#ctc_e2_preview_status { transition: color .2s; }

/* ---------- Checklist antes de descargar (overlay modal) ---------- */
.ctc-e2-check-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20,24,36,.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.ctc-e2-check-overlay.is-open { display: flex; }
.ctc-e2-check-card {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 16px;
    padding: 24px 24px 20px;
    box-shadow: 0 18px 50px rgba(20,24,36,.3);
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ctc-e2-body, #31374a);
}
.ctc-e2-check-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ctc-e2-check-head i { font-size: 22px; color: #b5701b; }
.ctc-e2-check-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ctc-e2-title, #232a35); }
.ctc-e2-check-lead { margin: 0 0 14px; font-size: 14px; color: var(--ctc-e2-mute-2, #6e7891); }
.ctc-e2-check-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ctc-e2-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #fdf6ec;
    border: 1px solid #f2e0c4;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #7a5312;
}
.ctc-e2-check-list li i { margin-top: 1px; color: #d08a1e; }
.ctc-e2-check-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Dark mode de los nuevos componentes. */
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-btn-ghost,
.dark .ctc-editor2 .ctc-e2-btn-ghost { border-color: rgba(255,255,255,.14); color: #aab3c5; }
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-btn-ghost:hover,
.dark .ctc-editor2 .ctc-e2-btn-ghost:hover { background: rgba(255,255,255,.05); color: #e3e6ed; }
[data-bs-theme="dark"] .ctc-editor2 .ctc-e2-undo,
.dark .ctc-editor2 .ctc-e2-undo { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #aab3c5; }
[data-bs-theme="dark"] .ctc-e2-check-card,
.dark .ctc-e2-check-card { background: #1f2632; color: #d7dbe4; }
[data-bs-theme="dark"] .ctc-e2-check-head h3,
.dark .ctc-e2-check-head h3 { color: #eef1f6; }
[data-bs-theme="dark"] .ctc-e2-check-list li,
.dark .ctc-e2-check-list li { background: rgba(208,138,30,.12); border-color: rgba(208,138,30,.35); color: #e6c48a; }