/*
 * Separadores de celdas: líneas entre los hijos directos de un contenedor
 * con gap (grid o flex), centradas en el hueco. Verticales entre columnas,
 * horizontales entre filas, o ambas.
 *
 * Dos formas de uso:
 *
 *  1. Panel "Separador de líneas" (extend separator) en los bloques Grupo
 *     con layout Grid/Fila/Pila y Columnas: toggles de dirección + grosor +
 *     color. El PHP añade las clases y variables inline; sin tocar CSS.
 *     Una Fila con salto de línea admite también horizontales: cada celda
 *     pinta su línea inferior, las de la última línea caen fuera y las
 *     corta el clip → línea en cada salto (misma mecánica que el Grid;
 *     continua solo con celdas de igual altura, alineación "estirar").
 *
 *  2. Manual, en cualquier grid o flex (shortcodes, HTML propio):
 *       <div class="grid grid4 gap20 sep-cols sep-2">…</div>
 *       <div class="flex-column gap20 sep-rows mi-lista">…</div>
 *     y los datos en el CSS del cliente (o inline por style=""):
 *       .mi-lista { --sep-w: 2px; --sep-c: #C0BEB7;
 *                   --sep-gap: var(--s20); --sep-gap-mob: 20px; }
 *     --sep-gap debe coincidir con el gap real del contenedor para que la
 *     línea quede centrada en el hueco. Sin declararlo (gap 0) la línea se
 *     pinta desde la frontera entre celdas hacia dentro de la siguiente —
 *     salvo en los contenedores con centrado (sep-center, .flex,
 *     .flex-column, Columnas), donde queda centrada en la frontera — y en
 *     los bordes exteriores desaparece (clip).
 *     --sep-gap-mob (≤1023px) para contenedores con gapmobNN.
 *
 * Clases:
 *   sep-cols        → líneas verticales entre columnas
 *   sep-rows        → líneas horizontales entre filas
 *   sep-1 … sep-10  → atajo de grosor (solo fija --sep-w; necesita una
 *                     clase de dirección para pintar algo)
 *   sep-center      → centra la línea en la frontera aunque el grosor
 *                     supere al gap (solo en flex SIN salto de línea;
 *                     .flex/.flex-column/Columnas ya centran solas)
 *   sep-wrap        → Fila CON salto de línea (la pone el PHP): activa
 *                     separator-front.js, que marca con sep-eol la última
 *                     celda de cada línea visual (ver reglas abajo)
 *
 * Variables:
 *   --sep-c        color de la línea (por defecto currentColor)
 *   --sep-w        grosor (1px por defecto; sep-N o tu CSS)
 *   --sep-gap      gap real del contenedor (para centrar la línea)
 *   --sep-gap-mob  ídem en ≤1023px
 *
 * Ojo: overflow:clip en el contenedor recorta las líneas que caen fuera
 * (bordes exteriores), pero también recortaría contenido que sobresalga
 * (zoom de hover, dropdowns, descendentes con line-height ajustado…). Solo
 * lo conservan quienes lo necesitan de verdad: Grid, Columnas (su apilado
 * móvil tira las verticales fuera), Fila con wrap y los .flex/.flex-column
 * manuales (pueden llevar wrap). Fila/Pila sin wrap (sep-center) y las
 * FAQs van SIN clip, con las líneas a ras del contenedor — ver abajo.
 */

/* El grosor pedido se pinta SIEMPRE, independientemente del gap: si no
   cabe en el hueco, el sobrante pisa el contenido de las celdas (como el
   borde de una tabla).

   --_sfx / --_sfy = SUELO del desplazamiento de las líneas verticales /
   horizontales. Con el suelo puesto la línea nunca arranca antes de la
   frontera: el sobrante invade solo la celda siguiente, y las líneas del
   perímetro caen enteras fuera del contenedor, donde el overflow:clip las
   corta. Es lo necesario en GRID (y filas con salto de línea): ahí las
   celdas del borde también pintan y un arranque antes de la frontera
   dejaría medios filos dentro del borde. Los contenedores flex seguros —
   la última celda no pinta y las celdas no saltan — liberan el suelo
   (sep-center, .flex, Columnas) y la línea se centra de verdad en la
   frontera aunque el grosor supere al gap, invadiendo ambas celdas a
   partes iguales.

   El suelo es 1px y NO 0px por el redondeo subpixel del clip (visto en
   Chrome, jul 2026): cuando el borde del contenedor cae en coordenada
   fraccionaria (p. ej. right en x.5 por centrado, o bottom en y.39 por el
   line-height), el rectángulo de recorte se redondea al píxel físico
   hacia fuera y el primer ~píxel de la línea del perímetro sobrevive como
   un filo visible. Arrancando 1px pasada la frontera ningún redondeo la
   resucita. El px de desvío en las líneas interiores es imperceptible. */
.sep-cols,
.sep-rows {
    --_sg: var(--sep-gap, 0px);
    --_sw: var(--sep-w, 1px);
    --_sfx: 1px;
    --_sfy: 1px;
    overflow: clip;
}

.sep-1 { --sep-w: 1px; }
.sep-2 { --sep-w: 2px; }
.sep-3 { --sep-w: 3px; }
.sep-4 { --sep-w: 4px; }
.sep-5 { --sep-w: 5px; }
.sep-6 { --sep-w: 6px; }
.sep-7 { --sep-w: 7px; }
.sep-8 { --sep-w: 8px; }
.sep-9 { --sep-w: 9px; }
.sep-10 { --sep-w: 10px; }

.sep-cols > *,
.sep-rows > * { position: relative; }

/* Línea vertical a la derecha de cada celda: con gap ≥ grosor queda
   centrada en el hueco (y fuera de ambas celdas); con gap menor, el suelo
   --_sfx decide si el sobrante invade solo la celda siguiente (grid) o
   ambas a partes iguales (flex seguros). Se alarga medio gap por arriba y
   abajo para ser continua a través de las filas — más 1px extra de solape:
   con columnas 1fr los anchos son fraccionarios y sin solape el redondeo
   deja cortes de 1px en las junturas entre segmentos. z-index para pintar
   sobre el fondo de la celda vecina. */
.sep-cols > *::after {
    content: "";
    position: absolute;
    top: calc(var(--_sg) / -2 - 1px);
    bottom: calc(var(--_sg) / -2 - 1px);
    left: calc(100% + max(var(--_sfx), (var(--_sg) - var(--_sw)) / 2));
    width: var(--_sw);
    background: var(--sep-c, currentColor);
    pointer-events: none;
    z-index: 1;
}

/* Línea horizontal bajo cada celda, mismo esquema con el gap de filas
   (y el mismo 1px de solape anti-cortes por redondeo). */
.sep-rows > *::before {
    content: "";
    position: absolute;
    left: calc(var(--_sg) / -2 - 1px);
    right: calc(var(--_sg) / -2 - 1px);
    top: calc(100% + max(var(--_sfy), (var(--_sg) - var(--_sw)) / 2));
    height: var(--_sw);
    background: var(--sep-c, currentColor);
    pointer-events: none;
    z-index: 1;
}


/* Opt-out por celda: clase "sep-none" en una celda concreta (columna, hijo
   del grid…) → esa celda no pinta su línea derecha/inferior, la que la
   separa de la SIGUIENTE. Las demás celdas no cambian. */
.sep-cols > .sep-none::after,
.sep-rows > .sep-none::before {
    content: none;
}

/* Solo en contenedores FLEX la última celda no pinta: ahí las celdas no
   rellenan el eje (filas fit-content, padding del lienzo del editor en
   Columnas…) y su línea final quedaría suelta dentro del contenedor. En
   GRID no se excluye nada: las celdas llenan el ancho, las líneas del
   perímetro caen fuera y las corta el clip — todas las celdas iguales,
   sin huecos. El appender del editor tampoco pinta nunca. */
.sep-cols.is-layout-flex > :last-child::after,
.sep-rows.is-layout-flex > :last-child::before,
.sep-cols.is-layout-flex > *:has(+ .block-list-appender)::after,
.sep-rows.is-layout-flex > *:has(+ .block-list-appender)::before,
.sep-cols.flex > :last-child::after,
.sep-rows.flex > :last-child::before,
.sep-cols.flex-column > :last-child::after,
.sep-rows.flex-column > :last-child::before,
.sep-cols > .block-list-appender::after,
.sep-rows > .block-list-appender::before {
    content: none;
}

/* Centrado real cuando el grosor supera al gap, SOLO donde ninguna línea
   toca el borde del contenedor: Fila y Pila (el PHP añade sep-center; en
   manual, añadirla a cualquier flex sin salto de línea), .flex y
   .flex-column manuales, y Columnas — en fila centran las verticales y al
   apilar (≤1023px, a juego con main.css) las horizontales. En GRID no se
   libera nunca: todas sus celdas pintan y el sobrante dejaría medios filos
   dentro de los bordes del contenedor. Ojo: un flex CON salto de línea
   (flex-wrap) y gap menor que el grosor mostraría medias líneas en el
   borde derecho al saltar — ahí no poner sep-center. */
.sep-cols.sep-center,
.sep-cols.flex,
.sep-cols.wp-block-columns {
    --_sfx: -999px;
}

.sep-rows.sep-center,
.sep-rows.flex-column {
    --_sfy: -999px;
}

/* Fila y Pila (sep-center = flex SIN wrap, lo pone el PHP): como en las
   FAQs, el último hijo no pinta y no hay línea de perímetro que recortar —
   el clip solo cortaba el voladizo de medio gap de las líneas interiores
   y, de paso, los descendentes (¿, g, y…) del texto pegado al borde con
   line-height ajustado. Se libera y las líneas van a ras del item: una
   sola fila/columna, sin junturas que solapar. Con items en stretch (el
   default) es pixel-idéntico a la versión clipada; con alineación centrada
   e items estrechos la línea pasa a medir lo que el item. Columnas y los
   .flex/.flex-column manuales conservan el clip (ver cabecera). */
.sep-cols.sep-center,
.sep-rows.sep-center {
    overflow: visible;
}

.sep-cols.sep-center > *::after {
    top: 0;
    bottom: 0;
}

.sep-rows.sep-center > *::before {
    left: 0;
    right: 0;
}

/* Columnas con alineación vertical arriba/centro/abajo: cada columna mide lo
   que su contenido y la vertical (::after, relativa a la columna) se quedaba
   a su altura — entre dos columnas cortas la línea no llegaba ni arriba ni
   abajo. Columnas conserva el clip, así que la línea se alarga "infinito" por
   ambos extremos y el clip la deja exactamente a la altura del contenedor,
   se alinee como se alinee. No vale para Fila/Pila (sep-center va sin clip)
   ni para la Fila con salto (cruzaría las demás líneas). */
.sep-cols.wp-block-columns > *::after {
    top: -9999px;
    bottom: -9999px;
}

/* Columnas en fila: las horizontales solo tienen sentido apiladas. En fila
   caían bajo el contenedor y las cortaba el clip, pero con alineación
   arriba/centro una columna corta pintaba la suya DENTRO, bajo su contenido.
   Se apagan en fila y se encienden al apilar (≤1023px, a juego con el
   apilado forzado de main.css; ver media query). Con display y no content:
   las exclusiones :last-child / sep-none siguen mandando. */
.sep-rows.wp-block-columns > *::before {
    display: none;
}

/* Fila con salto de línea (sep-wrap): separator-front.js marca la celda
   que cierra cada línea visual (sep-eol) y la que la abre (sep-sol), porque
   CSS no sabe dónde salta. La de cierre no pinta su vertical — con celdas
   que no llenan la línea caería DENTRO del contenedor, en el hueco sobrante,
   donde el clip no llega — y las horizontales de cierre y apertura se
   alargan hasta los bordes (el clip las corta ahí): con las celdas
   centradas o sin llenar la línea, la horizontal va de borde a borde como
   en un Grid. La última celda del contenedor también lleva sep-eol; ya no
   pintaba. */
.sep-cols.sep-wrap > .sep-eol::after {
    content: none;
}

.sep-rows.sep-wrap > .sep-eol::before {
    right: -9999px;
}

.sep-rows.sep-wrap > .sep-sol::before {
    left: -9999px;
}

/* Verticales de la Fila con salto: en un Grid las de filas consecutivas
   están alineadas y su voladizo de medio gap + 1px forma una cruz limpia
   con la horizontal. Aquí cada línea reparte sus celdas a su manera, las
   verticales no coinciden y ese voladizo asomaba por encima y por debajo
   de la horizontal. Se acotan al hueco entre horizontales: arrancan justo
   bajo la horizontal de la línea anterior (medio gap arriba = gap menos el
   desplazamiento y el grosor de esa línea) y terminan justo donde empieza
   la suya. En la primera y última línea sobresalen del contenedor y las
   corta el clip. */
.sep-cols.sep-wrap > *::after {
    top: calc(var(--_sw) + max(var(--_sfy), (var(--_sg) - var(--_sw)) / 2) - var(--_sg));
    bottom: calc(0px - max(var(--_sfy), (var(--_sg) - var(--_sw)) / 2));
}

/* FAQs (container-faqs): la línea se pinta ENCIMA de cada item a partir del
   segundo, no debajo de cada uno. Motivo: durante el slide, main.js recorta
   el .faq-item animado con clip-path (la cola del margen -g), y como el
   ::before de ESE item es quien pinta su línea inferior, la línea
   desaparecía mientras duraba el efecto. Pintándola desde el item de abajo
   (que no está clipado) la línea no parpadea. Geometría equivalente:
   frontera ± medio gap; primer item sin línea = mismas N-1 líneas
   interiores, y la última frontera no existe, así que tampoco hace falta
   clip para el perímetro. Por eso aquí el clip se LIBERA: con títulos de
   line-height ajustado los descendentes (¿, g, y…) del último item pintan
   por debajo de la caja de línea y el clip heredado de .sep-rows los
   cortaba. A cambio las líneas van de borde a borde (left/right 0): una
   sola columna a todo el ancho, sin junturas que solapar, y sin clip no
   pueden asomar medio gap por los lados. */
.container-faqs.sep-rows {
    overflow: visible;
}

.container-faqs.sep-rows > *::before {
    content: none;
}

.container-faqs.sep-rows > * + *::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: calc(100% + max(var(--_sfy), (var(--_sg) - var(--_sw)) / 2));
    height: var(--_sw);
    background: var(--sep-c, currentColor);
    pointer-events: none;
    z-index: 1;
}

/* Opt-out coherente: sep-none en un item quita la línea que lo separa del
   SIGUIENTE (que ahora la pinta ese siguiente). */
.container-faqs.sep-rows > .sep-none + *::before {
    content: none;
}

/* Editor: misma geometría que el frontend (pseudo-elementos + clips).
   Único conflicto real: Gutenberg pinta el recuadro de selección con el
   ::after del propio bloque (.is-selected::after { inset:0; content:"" },
   su hoja carga después y reactiva/mezcla el pseudo). Mientras una celda
   está seleccionada o resaltada, su línea vertical cede la pintura — solo
   background/tamaño/z-index; los offsets NO se tocan para que el inset:0
   de Gutenberg posicione su recuadro intacto. Las líneas de las celdas
   vecinas no se ven afectadas, y el ::before (filas) no choca porque
   Gutenberg solo usa ::after. */
/* Editor: el preview (separator.js) pone --sep-gap inline en cada
   contenedor con el gap que el lienzo muestra de verdad — el clamp del
   control Dimensiones si lo hay, o los 10px fijos que editor.css fuerza en
   flex/grid. El fallback 10px cubre el uso manual (clases sep-* a mano, sin
   preview que emita la var). Inline por contenedor a propósito: una var
   heredada del padre descentraría a un anidado sin gap propio. Si se cambia
   el gap del lienzo en editor.css, cambiar el fallback (y el del JS) a
   juego. El gap/grosor reales mandan solo en frontend. */
.editor-styles-wrapper .sep-cols,
.editor-styles-wrapper .sep-rows {
    --_sg: var(--sep-gap, 10px);
}

.editor-styles-wrapper .sep-cols > .is-selected::after,
.editor-styles-wrapper .sep-cols > .is-multi-selected::after,
.editor-styles-wrapper .sep-cols > .is-highlighted::after {
    background: none;
    width: auto;
    height: auto;
    z-index: auto;
}

/* Editor: celdas con etiqueta visual (mostrar / ir a, editor.css). Su
   ::before es de la etiqueta (editor.css lo restaura con más especificidad),
   así que su línea de fila se pinta en el ::after — solo si el contenedor no
   pinta también columnas: ahí el ::after es de la línea vertical y la celda
   etiquetada se queda sin línea de fila (caso doble dirección + etiqueta,
   raro). Misma geometría que .sep-rows > *::before. */
.editor-styles-wrapper .sep-rows:not(.sep-cols) > [class*="show-panel-"]::after,
.editor-styles-wrapper .sep-rows:not(.sep-cols) > [class*="goto-slide-"]::after {
    content: "";
    position: absolute;
    left: calc(var(--_sg) / -2 - 1px);
    right: calc(var(--_sg) / -2 - 1px);
    top: calc(100% + max(var(--_sfy), (var(--_sg) - var(--_sw)) / 2));
    height: var(--_sw);
    background: var(--sep-c, currentColor);
    pointer-events: none;
    z-index: 1;
}

/* En Pila (sep-center, sin clip) la línea de la celda etiquetada va a ras,
   como las ::before normales. */
.editor-styles-wrapper .sep-rows.sep-center:not(.sep-cols) > [class*="show-panel-"]::after,
.editor-styles-wrapper .sep-rows.sep-center:not(.sep-cols) > [class*="goto-slide-"]::after {
    left: 0;
    right: 0;
}

/* Mismas exclusiones que las líneas ::before: última celda flex / celda
   antes del appender, y el opt-out sep-none. */
.editor-styles-wrapper .sep-rows.is-layout-flex:not(.sep-cols) > [class*="show-panel-"]:last-child::after,
.editor-styles-wrapper .sep-rows.is-layout-flex:not(.sep-cols) > [class*="show-panel-"]:has(+ .block-list-appender)::after,
.editor-styles-wrapper .sep-rows.is-layout-flex:not(.sep-cols) > [class*="goto-slide-"]:last-child::after,
.editor-styles-wrapper .sep-rows.is-layout-flex:not(.sep-cols) > [class*="goto-slide-"]:has(+ .block-list-appender)::after,
.editor-styles-wrapper .sep-rows:not(.sep-cols) > .sep-none::after {
    content: none;
}

/* Celda etiquetada seleccionada/resaltada: Gutenberg pinta su recuadro con
   el mismo ::after → la línea cede la pintura, como las verticales. */
.editor-styles-wrapper .sep-rows > .is-selected::after,
.editor-styles-wrapper .sep-rows > .is-multi-selected::after,
.editor-styles-wrapper .sep-rows > .is-highlighted::after {
    background: none;
    width: auto;
    height: auto;
    z-index: auto;
}

/* FAQs (orbitta/faqs) en el editor: sus celdas viven dos niveles dentro
   (inner-blocks), no como hijas directas del wrapper con .sep-rows. Primero
   se anulan las reglas base .sep-rows > * (pintarían bajo la barra de título
   y bajo el inner-blocks entero), y luego se pintan las líneas bajo cada
   faq-item con la misma geometría. Todo con combinador > a propósito: un
   descendiente pintaría también dentro de cada item (bajo su pregunta). El
   hueco entre items lo dan los 10px de margen de orbitta-spaced-children y
   --_sg cae al fallback 10px del preview (el ::before de los items está
   libre: la selección de Gutenberg usa ::after). Sin línea en el último item
   ni antes del appender, como en frontend. El clip se libera como allí:
   nada útil que recortar y cortaba los descendentes del último título. */
.editor-styles-wrapper .wp-block-orbitta-faqs.sep-rows {
    overflow: visible;
}

.editor-styles-wrapper .wp-block-orbitta-faqs.sep-rows > *::before,
.editor-styles-wrapper .wp-block-orbitta-faqs.sep-rows > *::after {
    content: none;
}

.editor-styles-wrapper .wp-block-orbitta-faqs.sep-rows > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block {
    position: relative;
}

.editor-styles-wrapper .wp-block-orbitta-faqs.sep-rows > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + max(var(--_sfy), (var(--_sg) - var(--_sw)) / 2));
    height: var(--_sw);
    background: var(--sep-c, currentColor);
    pointer-events: none;
    z-index: 1;
}

.editor-styles-wrapper .wp-block-orbitta-faqs.sep-rows > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:last-child::before,
.editor-styles-wrapper .wp-block-orbitta-faqs.sep-rows > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:has(+ .block-list-appender)::before {
    content: none;
}


@media only screen and (max-width: 1023px) {
    .sep-cols,
    .sep-rows {
        --_sg: var(--sep-gap-mob, var(--sep-gap, 0px));
    }

    /* Columnas apiladas (main.css las fuerza a apilar a ≤1023px): ahora
       cada celda ocupa todo el ancho — las verticales vuelven al suelo
       (su línea derecha debe caer fuera) y se centran las horizontales. */
    .sep-cols.wp-block-columns:not(.is-not-stacked-on-mobile) {
        --_sfx: 1px;
    }

    .sep-rows.wp-block-columns:not(.is-not-stacked-on-mobile) {
        --_sfy: -999px;
    }

    .sep-rows.wp-block-columns:not(.is-not-stacked-on-mobile) > *::before {
        display: block;
    }
}