/*
 * FCVyS — Estilos compartidos para contenido HTML.
 *
 * Este archivo se carga tanto en TinyMCE como en la página pública.
 * Las clases y los estilos que ve el administrador deben verse igual al publicar.
 */

:root {
    --fcvs-rich-primary: var(--color-primary, #326235);
    --fcvs-rich-text: #334155;
    --fcvs-rich-heading: #111827;
    --fcvs-rich-border: #dbe3ee;
    --fcvs-rich-soft: #f8fafc;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) {
    box-sizing: border-box;
    max-width: 100%;
    color: var(--fcvs-rich-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

body.fcvs-rich-editor {
    margin: 0;
    padding: 18px 20px;
    background: #ffffff;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) > :first-child {
    margin-top: 0 !important;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) > :last-child {
    margin-bottom: 0 !important;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) p {
    margin: 0 0 1rem;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) :is(h1, h2, h3, h4, h5, h6) {
    margin: 1.35em 0 .55em;
    color: var(--fcvs-rich-heading);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -.02em;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) h1 { font-size: clamp(2rem, 4vw, 2.5rem); }
:is(.fcvs-rich-content, .fcvs-rich-editor) h2 { font-size: clamp(1.75rem, 3vw, 2rem); }
:is(.fcvs-rich-content, .fcvs-rich-editor) h3 { font-size: clamp(1.4rem, 2.5vw, 1.6rem); }
:is(.fcvs-rich-content, .fcvs-rich-editor) h4 { font-size: 1.25rem; }
:is(.fcvs-rich-content, .fcvs-rich-editor) h5 { font-size: 1.125rem; }
:is(.fcvs-rich-content, .fcvs-rich-editor) h6 { font-size: 1rem; }

:is(.fcvs-rich-content, .fcvs-rich-editor) :is(strong, b) {
    font-weight: 700;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) :is(em, i) {
    font-style: italic;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) a {
    color: var(--fcvs-rich-primary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .18em;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) :is(ul, ol) {
    margin: .75rem 0 1rem;
    padding-left: 1.45rem;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) ul {
    list-style: disc outside;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) ol {
    list-style: decimal outside;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) li {
    display: list-item;
    margin-bottom: .45rem;
    padding-left: .15rem;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) ul ul {
    margin-top: .35rem;
    list-style-type: circle;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) ul ul ul {
    list-style-type: square;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) ol ol {
    margin-top: .35rem;
    list-style-type: lower-alpha;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) li::marker {
    color: #94a3b8;
    font-size: .95em;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) blockquote {
    margin: 1.25rem 0;
    padding: .85rem 1rem;
    border-left: 4px solid color-mix(in srgb, var(--fcvs-rich-primary) 60%, white);
    border-radius: 0 .75rem .75rem 0;
    background: #f8fafc;
    color: #475569;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) hr {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid #e2e8f0;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) img {
    max-width: 100%;
    height: auto;
}

/* Tablas: mismo aspecto dentro y fuera del editor. */
:is(.fcvs-rich-content, .fcvs-rich-editor) table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 1.5rem 0 1.75rem !important;
    overflow: hidden;
    border: 1px solid var(--fcvs-rich-border);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
    color: #243047;
    font-size: .95rem;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) table :is(th, td) {
    padding: .95rem 1rem !important;
    border-right: 1px solid #eef2f7 !important;
    border-bottom: 1px solid #e5eaf2 !important;
    vertical-align: top;
    line-height: 1.55;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) table :is(th, td):last-child {
    border-right: 0 !important;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) table tr:last-child > :is(th, td) {
    border-bottom: 0 !important;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) table thead th,
:is(.fcvs-rich-content, .fcvs-rich-editor) table tr:first-child > :is(th, td) {
    background: linear-gradient(135deg, color-mix(in srgb, var(--fcvs-rich-primary) 10%, white), #f8fafc);
    color: #111827;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .045em;
    text-transform: uppercase;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) table tbody tr:nth-child(even) td {
    background: #f8fafc;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) table caption {
    caption-side: top;
    padding: 0 0 .65rem;
    color: #64748b;
    font-size: .9rem;
    font-weight: 700;
    text-align: left;
}

/* Formatos controlados de TinyMCE. */
:is(.fcvs-rich-content, .fcvs-rich-editor) .fcvs-heading {
    color: var(--fcvs-rich-heading);
    font-weight: 400 !important;
    letter-spacing: -.02em;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) .fcvs-heading--section {
    font-size: clamp(1.75rem, 3vw, 2rem);
    line-height: 1.2;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) .fcvs-heading--subtitle {
    font-size: clamp(1.35rem, 2.4vw, 1.5rem);
    line-height: 1.3;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) .fcvs-heading--internal {
    font-size: 1.25rem;
    line-height: 1.35;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) .fcvs-text-highlight {
    display: inline;
    padding: .08em .28em;
    border-radius: .3em;
    background: #fef3c7 !important;
    color: #78350f !important;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) .fcvs-text-muted {
    color: #64748b !important;
}

:is(.fcvs-rich-content, .fcvs-rich-editor) .fcvs-text-label {
    display: inline-flex !important;
    align-items: center;
    max-width: 100%;
    padding: .22em .62em !important;
    border: 1px solid #e2e8f0;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    font-size: .78em !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Los estilos inline elegidos en TinyMCE (color, fondo, tamaño, interlineado)
   se conservan. No agregar reglas !important genéricas sobre estos elementos. */

@media (max-width: 767.98px) {
    .fcvs-rich-content {
        overflow-x: auto;
    }

    .fcvs-rich-content table {
        min-width: 620px;
    }
}