/* Recepta · Píldora azul que se desliza (la anima deslizador.js).
   Encima de cada grupo va una capa azul con los textos en blanco, quietos y alineados con los de verdad;
   solo se ve a través de una ventana con forma de píldora (clip-path) que viaja hasta la opción elegida.
   Los textos de abajo quedan siempre en gris: nunca se ven dos opciones elegidas a la vez. */
.con-deslizador { position: relative; isolation: isolate; }
.deslizador {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
}
.deslizador-capa { position: absolute; inset: 0; background: var(--pildora, var(--cobalto)); color: var(--pildora-texto, #fff); clip-path: inset(50%); will-change: clip-path; }
.deslizador-capa > span {
  position: absolute; box-sizing: border-box; display: flex; align-items: center; white-space: nowrap;
  color: inherit; margin: 0;
}
/* Tonos: Favoritos en amarillo (como la estrella) y Archivados en gris; todo lo demás, azul */
.con-deslizador[data-tono='favoritos'] { --pildora: #f5b82e; --pildora-texto: #3d2a00; }
.con-deslizador[data-tono='archivados'] { --pildora: #7a8296; --pildora-texto: #fff; }
.con-deslizador[data-tono='si'] { --pildora: var(--si, #12a37e); --pildora-texto: #fff; }
.con-deslizador[data-tono='no'] { --pildora: var(--no, #d6455d); --pildora-texto: #fff; }
:root[data-tema='oscuro'] .con-deslizador[data-tono='favoritos'] { --pildora: #f2b53a; --pildora-texto: #2a1d00; }
:root[data-tema='oscuro'] .con-deslizador[data-tono='archivados'] { --pildora: #5d6478; }
.con-deslizador[data-tono='favoritos'] .deslizador-capa .cuenta { background: rgba(61, 42, 0, 0.14); color: #3d2a00; }
.con-deslizador > button, .con-deslizador > a { position: relative; z-index: 1; transition: color 0.15s; }   /* sin transición de fondo: evita un destello blanco al redibujar */

/* Segmentos (Ver precios, Costo, filtros…): forma de píldora, todas las opciones en gris */
.segmentos.con-deslizador { border-radius: 999px; }
.segmentos.con-deslizador > button,
.segmentos.con-deslizador > button.activo,
.segmentos.con-deslizador > button:hover { background: none; box-shadow: none; border-radius: 999px; color: var(--pizarra); }
.segmentos.con-deslizador > button:hover:not(.activo) { color: var(--tinta); }

/* Todos / Favoritos / Archivados */
.pestanas-lista.con-deslizador > button,
.pestanas-lista.con-deslizador > button.activo { background: transparent; color: var(--pizarra); }
.pestanas-lista.con-deslizador > button.activo { border-color: transparent; }
.pestanas-lista.con-deslizador > button.activo .cuenta { background: var(--perla-suave); color: var(--pizarra); }
.deslizador-capa .cuenta { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* Llave del simulador (Sin IVA / Con IVA) */
.interruptor.con-deslizador::before { display: none; }
.interruptor.con-deslizador > button,
.interruptor.con-deslizador > button[aria-checked='true'] { color: var(--pizarra); }

/* Pestañas de arriba: la elegida tiene fondo celeste y rayita azul abajo, y se desliza al cambiar */
.pestanas > .deslizador { z-index: 0; }
.pestanas .deslizador-capa { background: linear-gradient(to top, var(--cobalto) 0 2.5px, var(--cobalto-suave) 2.5px); }
.pestanas.con-deslizador > a { transition: color 0.2s, background 0.2s; }
.pestanas.con-deslizador > a[aria-current='page'] { border-bottom-color: transparent; color: var(--cobalto); background: transparent; }
.pestanas.con-deslizador > a:hover:not([aria-current='page']) { color: var(--cobalto); background: rgba(43, 75, 255, 0.06); }
:root[data-tema='oscuro'] .pestanas.con-deslizador > a:hover:not([aria-current='page']) { background: rgba(95, 116, 255, 0.1); }
.pestanas.con-deslizador.eligiendo > [data-va] { color: var(--cobalto); }
.pestanas.con-deslizador.eligiendo > [aria-current='page']:not([data-va]) { color: var(--pizarra); }