/* =========================================================
   FINANTRES EDITORIAL UI v1.3.1
   Carga solo en contenidos compatibles mediante body.ft-editorial-ui
   ========================================================= */

.ft-editorial-ui {
    --ft-ink: #0f172a;
    --ft-text: #334155;
    --ft-muted: #64748b;
    --ft-link: #2563eb;
    --ft-link-hover: #1d4ed8;
    --ft-blue-soft: #eff6ff;
    --ft-blue-soft-2: #f7fbff;
    --ft-blue-line: #dbeafe;
    --ft-surface: #ffffff;
    --ft-surface-soft: #f8fafc;
    --ft-border: #e2e8f0;
    --ft-border-strong: #d7e3f0;
    --ft-radius-sm: 10px;
    --ft-radius: 14px;
    --ft-radius-lg: 16px;
    --ft-shadow-soft: 0 8px 30px rgba(15, 23, 42, .045);
}

/* =========================================================
   CONTENIDO EDITORIAL
   ========================================================= */

.ft-editorial-ui :where(
    .elementor-widget-theme-post-content,
    .entry-content
) {
    color: var(--ft-text);
    font-size: 18px;
    line-height: 1.78;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.ft-editorial-ui :where(
    .elementor-widget-theme-post-content,
    .entry-content
) p {
    margin: 0 0 1.35em !important;
}

.ft-editorial-ui :where(
    .elementor-widget-theme-post-content,
    .entry-content
) h2 {
    margin: 2.15em 0 .72em !important;
    color: var(--ft-ink);
    font-size: clamp(27px, 2.1vw, 32px);
    line-height: 1.22;
    letter-spacing: -.025em;
    font-weight: 700;
    text-wrap: wrap;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.ft-editorial-ui :where(
    .elementor-widget-theme-post-content,
    .entry-content
) h3 {
    margin: 1.75em 0 .65em !important;
    color: var(--ft-ink);
    font-size: clamp(21px, 1.7vw, 24px);
    line-height: 1.3;
    letter-spacing: -.018em;
    font-weight: 700;
    text-wrap: wrap;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.ft-editorial-ui :where(
    .elementor-widget-theme-post-content,
    .entry-content
) h4 {
    margin: 1.55em 0 .55em !important;
    color: var(--ft-ink);
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
}

.ft-editorial-ui :where(
    .elementor-widget-theme-post-content,
    .entry-content
) strong {
    color: #1e293b;
    font-weight: 700;
}

.ft-editorial-ui :where(
    .elementor-widget-theme-post-content,
    .entry-content
) a:not(.elementor-button):not(.wp-block-button__link) {
    color: var(--ft-link);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(37, 99, 235, .28);
    text-underline-offset: 3px;
    transition: color .18s ease, text-decoration-color .18s ease;
}

.ft-editorial-ui :where(
    .elementor-widget-theme-post-content,
    .entry-content
) a:not(.elementor-button):not(.wp-block-button__link):hover {
    color: var(--ft-link-hover);
    text-decoration-color: currentColor;
}

.ft-editorial-ui :where(
    .elementor-widget-theme-post-content,
    .entry-content
) a:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .2);
    outline-offset: 3px;
    border-radius: 3px;
}

/* =========================================================
   INTRODUCCIÓN ACF
   Elementor la pinta fuera de Post Content en algunas plantillas.
   El plugin identifica el widget sin duplicar ni reescribir el contenido.
   ========================================================= */

/*
 * Elementor puede aplicar su tipografía global directamente sobre el widget,
 * .elementor-text-editor o incluso los párrafos. Por eso el color/tamaño de
 * texto normal se fija también en los nodos de texto y no solo por herencia.
 * Esto hace que la introducción ACF coincida visualmente con Post Content.
 */
.ft-editorial-ui .ft-entry-intro-widget,
.ft-editorial-ui .ft-entry-intro-widget .elementor-widget-container,
.ft-editorial-ui .ft-entry-intro-widget .elementor-text-editor,
.ft-editorial-ui .ft-entry-intro-widget p,
.ft-editorial-ui .ft-entry-intro-widget li {
    color: var(--ft-text) !important;
    font-size: 18px !important;
    line-height: 1.78 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.ft-editorial-ui .ft-entry-intro-widget p {
    margin: 0 0 1.35em !important;
}

.ft-editorial-ui .ft-entry-intro-widget p:last-child {
    margin-bottom: 0 !important;
}

.ft-editorial-ui .ft-entry-intro-widget strong {
    color: #1e293b;
    font-weight: 700;
}

.ft-editorial-ui .ft-entry-intro-widget a:not(.elementor-button) {
    color: var(--ft-link);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(37, 99, 235, .28);
    text-underline-offset: 3px;
    transition: color .18s ease, text-decoration-color .18s ease;
}

.ft-editorial-ui .ft-entry-intro-widget a:not(.elementor-button):hover {
    color: var(--ft-link-hover);
    text-decoration-color: currentColor;
}

.ft-editorial-ui .ft-entry-intro-widget a:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .2);
    outline-offset: 3px;
    border-radius: 3px;
}

.ft-editorial-ui .ft-entry-intro-widget :is(ul, ol) {
    margin: .25em 0 1.45em !important;
    padding-left: 1.35em !important;
}

.ft-editorial-ui .ft-entry-intro-widget li {
    margin-bottom: .58em !important;
    padding-left: .15em;
}

.ft-editorial-ui .ft-entry-intro-widget li::marker {
    color: #3b82f6;
    font-weight: 700;
}

/* =========================================================
   LISTAS
   ========================================================= */

.ft-editorial-ui :where(
    .elementor-widget-theme-post-content,
    .entry-content
) :is(ul, ol) {
    margin: .25em 0 1.45em !important;
    padding-left: 1.35em !important;
}

.ft-editorial-ui :where(
    .elementor-widget-theme-post-content,
    .entry-content
) li {
    margin-bottom: .58em !important;
    padding-left: .15em;
}

.ft-editorial-ui :where(
    .elementor-widget-theme-post-content,
    .entry-content
) li::marker {
    color: #3b82f6;
    font-weight: 700;
}

/* =========================================================
   BLOCKQUOTES
   ========================================================= */

.ft-editorial-ui :where(
    .elementor-widget-theme-post-content,
    .entry-content
) blockquote {
    margin: 30px 0 !important;
    padding: 20px 24px !important;
    color: var(--ft-text);
    background: linear-gradient(135deg, var(--ft-blue-soft-2), var(--ft-blue-soft));
    border: 1px solid var(--ft-blue-line) !important;
    border-left: 4px solid var(--ft-link) !important;
    border-radius: var(--ft-radius);
    box-shadow: 0 8px 26px rgba(15, 23, 42, .04);
}

.ft-editorial-ui :where(
    .elementor-widget-theme-post-content,
    .entry-content
) blockquote > :last-child {
    margin-bottom: 0 !important;
}

/* =========================================================
   SEPARADORES
   ========================================================= */

.ft-editorial-ui :where(
    .elementor-widget-theme-post-content,
    .entry-content
) :is(
    hr,
    .wp-block-separator,
    .elementor-divider-separator,
    .separator,
    .hr
) {
    margin: 40px 0 !important;
    border: 0 !important;
    height: 1px !important;
    background: linear-gradient(
        90deg,
        rgba(37, 99, 235, 0),
        rgba(37, 99, 235, .30) 20%,
        rgba(37, 99, 235, .30) 80%,
        rgba(37, 99, 235, 0)
    ) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* =========================================================
   CAJAS DESTACADAS
   Compatibilidad con contenido ya existente.
   A futuro: usar preferentemente la clase .ft-callout.
   ========================================================= */

/*
 * La sangría del editor clásico/TinyMCE se usa en Finantres como destacado.
 * La detectamos también fuera de .entry-content porque algunas plantillas de
 * Elementor imprimen el contenido dentro de otros wrappers.
 */
.ft-editorial-ui .ft-callout,
.ft-editorial-ui .mce-indent,
.ft-editorial-ui p[style*="padding-left"] {
    position: relative;
    margin: 28px 0 !important;
    padding: 20px 24px !important;
    color: var(--ft-text);
    background: linear-gradient(135deg, var(--ft-blue-soft-2), var(--ft-blue-soft)) !important;
    border: 1px solid var(--ft-blue-line) !important;
    border-left: 4px solid var(--ft-link) !important;
    border-radius: var(--ft-radius);
    box-shadow: 0 8px 26px rgba(15, 23, 42, .04);
}

.ft-editorial-ui .mce-indent p,
.ft-editorial-ui p.mce-indent,
.ft-editorial-ui .ft-callout > :last-child {
    margin-bottom: 0 !important;
}

.ft-editorial-ui .mce-indent p,
.ft-editorial-ui p.mce-indent {
    line-height: 1.8;
}

.ft-editorial-ui .mce-indent strong,
.ft-editorial-ui p[style*="padding-left"] strong,
.ft-editorial-ui .ft-callout strong {
    color: var(--ft-ink);
}

/* =========================================================
   TABLAS: CONTENEDOR
   CSS-first: Gutenberg y wrappers existentes, sin depender de JavaScript.
   ========================================================= */

.ft-editorial-ui .table-container,
.ft-editorial-ui .ft-table-container {
    width: 100%;
    margin: 1rem 0 2rem;
}

.ft-editorial-ui .table-toolbar,
.ft-editorial-ui .ft-table-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.ft-editorial-ui .table-copy-btn,
.ft-editorial-ui .ft-table-copy-btn {
    appearance: none;
    background: #fff;
    color: #1e40af;
    border: 1px solid var(--ft-blue-line);
    padding: 7px 13px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.ft-editorial-ui .table-copy-btn:hover,
.ft-editorial-ui .ft-table-copy-btn:hover {
    background: var(--ft-blue-soft);
    border-color: #bfdbfe;
    color: var(--ft-link-hover);
}

.ft-editorial-ui .table-copy-btn:active,
.ft-editorial-ui .ft-table-copy-btn:active {
    transform: translateY(1px);
}

.ft-editorial-ui .table-copy-btn:focus-visible,
.ft-editorial-ui .ft-table-copy-btn:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .22);
    outline-offset: 2px;
}

/* Scroll container */
.ft-editorial-ui :is(
    .table-wrapper,
    .ft-table-scroll,
    figure.wp-block-table
) {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--ft-surface);
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-radius-lg);
    box-shadow: var(--ft-shadow-soft);
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.ft-editorial-ui :is(
    .table-wrapper,
    .ft-table-scroll,
    figure.wp-block-table
)::-webkit-scrollbar {
    height: 9px;
}

.ft-editorial-ui :is(
    .table-wrapper,
    .ft-table-scroll,
    figure.wp-block-table
)::-webkit-scrollbar-track {
    background: transparent;
}

.ft-editorial-ui :is(
    .table-wrapper,
    .ft-table-scroll,
    figure.wp-block-table
)::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border: 2px solid #fff;
    border-radius: 999px;
}

.ft-editorial-ui :is(
    .table-wrapper,
    .ft-table-scroll,
    figure.wp-block-table
)::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.ft-editorial-ui :is(
    .table-wrapper,
    .ft-table-scroll,
    figure.wp-block-table
).is-scrollable:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .18);
    outline-offset: 3px;
}

/* Table base */
.ft-editorial-ui :is(
    .table-wrapper,
    .ft-table-scroll,
    figure.wp-block-table
) table {
    width: 100% !important;
    min-width: 100%;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: auto;
    color: var(--ft-text);
    background: #fff !important;
    font-size: 15px;
    line-height: 1.55;
}

/*
 * El ancho nace de las celdas, no de JS. Para tablas con muchas columnas
 * dejamos una referencia mínima adicional; si el navegador no soporta :has(),
 * los min-width de las celdas siguen generando el scroll correctamente.
 */
.ft-editorial-ui :is(.table-wrapper, .ft-table-scroll, figure.wp-block-table):has(tr > :nth-child(6)) table {
    min-width: 980px !important;
}

.ft-editorial-ui :is(.table-wrapper, .ft-table-scroll, figure.wp-block-table):has(tr > :nth-child(3)):not(:has(tr > :nth-child(6))) table {
    min-width: 720px !important;
}

/* Cells */
.ft-editorial-ui :is(
    .table-wrapper,
    .ft-table-scroll,
    figure.wp-block-table
) :is(th, td) {
    min-width: 138px;
    padding: 15px 17px !important;
    vertical-align: top;
    text-align: left !important;
    white-space: normal;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ft-border) !important;
}

.ft-editorial-ui :is(
    .table-wrapper,
    .ft-table-scroll,
    figure.wp-block-table
) td a {
    overflow-wrap: anywhere;
}

/* Header */
.ft-editorial-ui :is(
    .table-wrapper,
    .ft-table-scroll,
    figure.wp-block-table
) thead th,
.ft-editorial-ui figure.wp-block-table tbody > tr:first-child > th {
    color: #1e3a5f !important;
    background: #f1f6fc !important;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    vertical-align: middle;
    border-bottom: 1px solid var(--ft-border-strong) !important;
}

/* First column */
.ft-editorial-ui :is(
    .table-wrapper,
    .ft-table-scroll,
    figure.wp-block-table
) :is(th, td):first-child {
    min-width: 155px;
}

.ft-editorial-ui :is(
    .table-wrapper,
    .ft-table-scroll,
    figure.wp-block-table
) tbody td:first-child {
    color: #1e3a5f;
    font-weight: 700;
}

/* Rows */
.ft-editorial-ui :is(
    .table-wrapper,
    .ft-table-scroll,
    figure.wp-block-table
) tbody td {
    background: #fff !important;
    transition: background .15s ease;
}

.ft-editorial-ui :is(
    .table-wrapper,
    .ft-table-scroll,
    figure.wp-block-table
) tbody tr:nth-child(even) td {
    background: #fafcff !important;
}

@media (hover: hover) {
    .ft-editorial-ui :is(
        .table-wrapper,
        .ft-table-scroll,
        figure.wp-block-table
    ) tbody tr:hover td {
        background: #f1f7ff !important;
    }
}

.ft-editorial-ui :is(
    .table-wrapper,
    .ft-table-scroll,
    figure.wp-block-table
) tbody tr:last-child td {
    border-bottom: 0 !important;
}

.ft-editorial-ui :is(
    .table-wrapper,
    .ft-table-scroll,
    figure.wp-block-table
) caption {
    caption-side: bottom;
    padding: 12px 4px 2px;
    color: var(--ft-muted);
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

/* Existing Gutenberg figure margins */
.ft-editorial-ui figure.wp-block-table {
    margin: 1rem 0 2rem !important;
}

.ft-editorial-ui figure.wp-block-table figcaption {
    margin: 0 !important;
    padding: 12px 14px;
    color: var(--ft-muted);
    background: #fff;
    font-size: 13px;
    line-height: 1.5;
    border-top: 1px solid var(--ft-border);
}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 768px) {

    .ft-editorial-ui .ft-entry-intro-widget,
    .ft-editorial-ui .ft-entry-intro-widget .elementor-widget-container,
    .ft-editorial-ui .ft-entry-intro-widget .elementor-text-editor,
    .ft-editorial-ui .ft-entry-intro-widget p,
    .ft-editorial-ui .ft-entry-intro-widget li {
        font-size: 17px !important;
        line-height: 1.74 !important;
    }
    .ft-editorial-ui :where(
        .elementor-widget-theme-post-content,
        .entry-content
    ) {
        font-size: 17px;
        line-height: 1.74;
    }

    .ft-editorial-ui :where(
        .elementor-widget-theme-post-content,
        .entry-content
    ) h2 {
        margin-top: 1.9em !important;
        font-size: 26px;
        line-height: 1.23;
    }

    .ft-editorial-ui :where(
        .elementor-widget-theme-post-content,
        .entry-content
    ) h3 {
        font-size: 21px;
    }

    .ft-editorial-ui :is(
        .table-wrapper,
        .ft-table-scroll,
        figure.wp-block-table
    ) {
        border-radius: 12px;
    }

    .ft-editorial-ui :is(
        .table-wrapper,
        .ft-table-scroll,
        figure.wp-block-table
    ) table {
        font-size: 14px;
    }

    .ft-editorial-ui :is(
        .table-wrapper,
        .ft-table-scroll,
        figure.wp-block-table
    ) :is(th, td) {
        min-width: 140px;
        padding: 13px 14px !important;
    }

    .ft-editorial-ui :is(
        .table-wrapper,
        .ft-table-scroll,
        figure.wp-block-table
    ) :is(th, td):first-child {
        min-width: 140px;
    }

    .ft-editorial-ui :where(
        .elementor-widget-theme-post-content,
        .entry-content
    ) :is(
        .ft-callout,
        .mce-indent,
        p[style*="padding-left"]
    ) {
        padding: 18px !important;
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    .ft-editorial-ui :where(
        .elementor-widget-theme-post-content,
        .entry-content
    ) h2 {
        font-size: 24px;
    }

    .ft-editorial-ui :where(
        .elementor-widget-theme-post-content,
        .entry-content
    ) h3 {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ft-editorial-ui *,
    .ft-editorial-ui *::before,
    .ft-editorial-ui *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}