/* ============================================================================
   SEÑALES · la lista con el tick, como estilo de bloque
   ----------------------------------------------------------------------------
   Es el «puede ayudarte si…» de las páginas de servicio: una lista de frases,
   cada una con un tick delante, en dos columnas cuando cabe.

   ⚠️ POR QUÉ ESTO EXISTE. En la maqueta, cada punto lleva un <svg> EN LÍNEA
   dentro del <li>. Medido en psicologia-adultos: 16 por página. Llevar eso a
   WordPress tal cual obliga a meter la lista entera en un bloque `core/html`, y
   entonces quien edite no puede añadir un punto sin escribir SVG a mano.

   El tick es SIEMPRE EL MISMO —comprobado: un único SVG distinto en toda la
   página— así que se puede dibujar con una máscara de CSS. Entonces la lista es
   una `core/list` normal: se escribe, se reordena y se añaden puntos como en
   cualquier lista, y el tick lo pone la hoja de estilo.

   El estilo se llama «Señales» y se elige en la barra lateral del editor.
   ========================================================================== */

.wp-block-list.is-style-senales {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

@container (min-width: 48rem) {
  .wp-block-list.is-style-senales {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--wp--preset--spacing--70);
  }
}

.wp-block-list.is-style-senales > li {
  display: grid;
  grid-template-columns: 1.25em 1fr;
  gap: var(--wp--preset--spacing--30);
  align-items: start;
  padding-block: var(--wp--preset--spacing--40);
  border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
}

/*
 * El tick, como máscara.
 *
 * ⚠️ EL SVG VA CON COMILLAS SIMPLES DENTRO Y SIN ALMOHADILLAS. Un `#` sin
 * escapar dentro de un `url()` corta el data URI justo ahí, y la máscara se
 * queda a medias sin dar ningún error: simplemente no se ve el tick.
 *
 * Es un trazo, no un relleno: la máscara usa el alfa de lo pintado, así que un
 * `stroke` opaco recorta exactamente la forma del tick.
 */
.wp-block-list.is-style-senales > li::before {
  content: "";
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.2em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 17'%3E%3Cpath d='M1 9l6 6 12-13' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 17'%3E%3Cpath d='M1 9l6 6 12-13' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ----------------------------------------------------------------------------
   EL COLOR DEL TICK · la misma decisión que ya tomó la maqueta
   ----------------------------------------------------------------------------
   ⚠️ ESTO FALTABA EN EL TEMA. `.c-tick` de la librería usa
   `--wp--preset--color--success`, el verde de «guardado correctamente»: el único
   verde del sitio, y canta al lado de la paleta. La maqueta lo cambió el
   2026-09-06, pero aquella regla vive en maqueta/v1.2/v1.2.css, que NO se carga
   en WordPress. O sea que las páginas que montemos en el CMS sacarían los ticks
   verdes mientras la maqueta los enseña naranjas.

   Aquí se aplica la misma decisión a los dos: al `.c-tick` de la librería y al
   estilo de bloque nuevo.
   ------------------------------------------------------------------------- */
.c-tick,
.wp-block-list.is-style-senales > li::before {
  color: var(--wp--preset--color--accent-warm);
}

/* Sobre fondo de color saturado el acento no se distingue: hereda la tinta de la
   sección, que ahí ya es la que contrasta. */
.cmp--primary .c-tick,
.cmp--primary .is-style-senales > li::before {
  color: var(--wp--preset--color--on-primary);
}