/**
 * ckeditor-content.css — LAESH · Estilos de contenido CKEditor 5
 * ─────────────────────────────────────────────────────────────────
 * Cargado SOLO en el sitio público (index.php / website/).
 * Replica los estilos que CKEditor 5 aplica internamente en el
 * panel de administración para que el contenido editado se vea
 * igual en el frontend.
 *
 * Plugins cubiertos:
 *   · Highlight     → mark.marker-* / mark.pen-*
 *   · TodoList      → ul.todo-list, li.todo-list__item
 *   · Table         → figure.table > table
 *   · Style plugin  → clases del panel "Estilos" configuradas en
 *                     ckeditor-init.js (acerca-h3b, faq-p--*, etc.)
 *
 * NO cubre (inline → browser-native):
 *   · Alignment (style="text-align:…")
 *   · Font color / background (style="color:…")
 *   · Font family / size (style="font-family:…; font-size:…")
 *   · Bold, Italic, Underline, Strikethrough (tags HTML estándar)
 *
 * Mantenimiento: actualizar cuando se añada un plugin a ckeditor-init.js
 * que genere clases CSS (no inline styles).
 *
 * Creado: 2026-09-08 (sesión 10) · Corrección bug G-CK-01..04
 * ─────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════
   1. HIGHLIGHT (plugin: CK.Highlight)
   Genera: <mark class="marker-yellow">texto</mark>
   Ref: https://ckeditor.com/docs/ckeditor5/latest/features/highlight.html
   ══════════════════════════════════════════════════════════════════ */

mark.marker-yellow {
    background-color: #fdfd77;
    color: inherit;
}
mark.marker-green {
    background-color: #62f962;
    color: inherit;
}
mark.marker-pink {
    background-color: #fc7999;
    color: inherit;
}
mark.marker-blue {
    background-color: #72cdfd;
    color: inherit;
}
mark.pen-red {
    background-color: transparent;
    color: #e71313;
}
mark.pen-green {
    background-color: transparent;
    color: #128a00;
}

/* ══════════════════════════════════════════════════════════════════
   2. TODO LIST (plugin: CK.TodoList)
   Genera: <ul class="todo-list"><li class="todo-list__item">…</li>
   ══════════════════════════════════════════════════════════════════ */

ul.todo-list {
    list-style-type: none;
    margin: 0.5em 0;
    padding: 0;
}

ul.todo-list li.todo-list__item {
    display: flex;
    align-items: flex-start;
    gap: 0.45em;
    padding: 0.1em 0;
    line-height: 1.5;
}

/* CKEditor emite el checkbox como <span class="todo-list__item__toggle"> en algunos builds
   y como <input type="checkbox" disabled> en otros (con GeneralHtmlSupport). Cubrimos ambos. */
ul.todo-list li.todo-list__item > input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    border: 1.5px solid #64748b;
    border-radius: 0.2em;
    margin-top: 0.18em;
    background: #fff;
    cursor: default;
    pointer-events: none;
}

ul.todo-list li.todo-list__item > input[type="checkbox"]:checked {
    background: #0052B7;
    border-color: #0052B7;
}

ul.todo-list li.todo-list__item > input[type="checkbox"]:checked::after {
    content: '✓';
    display: block;
    color: #fff;
    font-size: 0.75em;
    text-align: center;
    line-height: 1.2;
}

/* Texto del ítem: tachado si el checkbox está checked */
ul.todo-list li.todo-list__item.todo-list__item--checked > span,
ul.todo-list li.todo-list__item.todo-list__item--checked > p {
    text-decoration: line-through;
    color: #94a3b8;
}

/* ══════════════════════════════════════════════════════════════════
   3. TABLE (plugin: CK.Table)
   Genera: <figure class="table"><table>…</table></figure>
   ══════════════════════════════════════════════════════════════════ */

figure.table {
    margin: 0.75em 0;
    overflow-x: auto;  /* tablas anchas hacen scroll propio, no el body */
    display: block;
}

figure.table table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85em;
    line-height: 1.4;
}

figure.table table:not(.contact-table-rte):not(.table-borderless-rte) th,
figure.table table:not(.contact-table-rte):not(.table-borderless-rte) td {
    border: 1px solid #cbd5e1;
    padding: 0.4em 0.65em;
    text-align: left;
    vertical-align: top;
}

figure.table table.contact-table-rte,
figure.table table.contact-table-rte th,
figure.table table.contact-table-rte td,
figure.table table.table-borderless-rte,
figure.table table.table-borderless-rte th,
figure.table table.table-borderless-rte td {
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    background-color: transparent !important;
}

figure.table table th {
    background-color: #e8f0fb;
    font-weight: 600;
    color: #0f172a;
}

figure.table table tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

/* ══════════════════════════════════════════════════════════════════
   4. CUSTOM STYLE PLUGIN (plugin: CK.Style)
   Definiciones en ckeditor-init.js → editorConfig.style.definitions[]
   Estas clases las aplica el usuario desde la dropdown "Estilo" del toolbar.
   Deben coincidir con la apariencia del sistema de diseño LAESH.
   ══════════════════════════════════════════════════════════════════ */

/* "Subtítulo Institucional (Azul)" — h3.acerca-h3b */
h3.acerca-h3b {
    color: var(--primary, #0052B7);
    font-size: 1rem;
    font-weight: 700;
    margin-top: 0.75em;
    margin-bottom: 0.35em;
    line-height: 1.3;
}

/* "Texto Destacado" — p.faq-p--primary */
p.faq-p--primary {
    color: var(--primary, #0052B7);
    font-weight: 600;
    margin-bottom: 0.5em;
}

/* "Texto Secundario" — p.faq-p--tail */
p.faq-p--tail {
    color: var(--text-secondary, #475569);
    font-size: 0.9em;
    margin-bottom: 0.4em;
}

/* "Texto Muted" — p.aviso-p--muted */
p.aviso-p--muted {
    color: var(--text-muted, #64748b);
    font-size: 0.85em;
    line-height: 1.5;
    margin-bottom: 0.4em;
}

/* "Firma / Highlight" — strong.txt-main */
strong.txt-main {
    color: var(--brand-green, #71CA11);
    font-weight: 700;
}