/* =====================================================================
 * PRECIOS · lo poco que la tabla comparativa no puede resolver con
 * utilidades ya compiladas.
 *
 * Qué vive aquí: lo que NO es una utilidad — anchos concretos de la
 * tabla (`min-w-176`, `w-2/5`, que no existen en la escala) y todo lo que
 * necesita estados `:checked` / `:has()`.
 *
 * Lo que NO vive aquí: paddings y márgenes normales. El bundle
 * `tailwind.web.compiled.css` está versionado y CI no lo reconstruye,
 * pero se reconstruye A MANO (`bin/tailwind-build --web`) al tocar
 * clases, así que un `pt-16` se escribe en la plantilla y punto. Traerlo
 * a esta hoja crea reglas sin `@layer` que ganan a Tailwind y acaban
 * comiéndose los márgenes de las plantillas.
 *
 * Se carga SÓLO en `/precios` (bloque `head_extra` de `web/precios.twig`),
 * después de `web/web.css` y sin `@layer`: gana a Tailwind y a Preline sin
 * `!important`.
 * ===================================================================== */

/* Anchura mínima del comparador: con los cuatro planes comprables son
 * CINCO columnas, y por debajo de ~56rem los nombres largos («Esencial ·
 * Facturación») parten en tres líneas. El carril padre lleva
 * `overflow-x-auto` (con wrapper `relative`), de modo que en móvil se
 * desliza en horizontal en lugar de romper el ancho de la página. */
.web-compare {
  min-width: 56rem;
}

/* La columna de características manda: es la que lleva el texto largo.
 * Las de plan se reparten el resto a partes iguales, para que las marcas
 * de "incluido" queden alineadas entre sí. */
.web-compare__feature {
  width: 32%;
}

/* Separador de grupo sin `border`: una regla degradada, igual que
 * `.web-rule`, para que la tabla respire sin parecer una hoja de cálculo. */
.web-compare__group {
  border-bottom: 1px solid var(--web-hairline-soft);
}

/* Fila del claim + badge de las tarjetas de plan. Alto mínimo fijo para
 * que los tres nombres de plan queden a la MISMA altura: el claim del
 * plan destacado convive con el badge «Recomendado» y parte en dos
 * líneas en anchuras intermedias, lo que descuadraba la rejilla. */
.web-plan__claim {
  min-height: 2.5rem;
}

/* =====================================================================
 * SELECTOR DE SABOR — «Esencial · Facturación» / «Esencial · Equipo»
 *
 * Dos planes al mismo precio que sólo cambian el módulo por el que
 * empiezas: son UNA tarjeta con dos pestañas, no dos tarjetas gemelas.
 *
 * SIN JAVASCRIPT, y no por elegancia: la web pública sirve una CSP
 * estricta (sin `<script>` inline y sin `style=""`), así que el conmutado
 * son `<input type=radio>` reales —ocultos visualmente pero tabulables y
 * anunciables— y el combinador de hermano general. Mismo recurso que las
 * radio-cards del embudo de alta.
 * ===================================================================== */

/* Ancla del radio oculto (`position: absolute`) y del `web-beam` del plan
 * destacado. */
.web-plan {
  position: relative;
}

/* El SELECTOR DE SABOR (`.web-sabor*`, `.web-plan__panel*`) vivía aquí:
 * conmutaba «Esencial · Facturación» y «Esencial · Equipo» con
 * `radio:checked ~ panel`, sin JavaScript. Se fue con el modelo comercial
 * de 2026-08-17 — con 1 módulo A ELEGIR los dos sabores son el mismo
 * escalón y ya no hay nada que conmutar. Lo sustituye el selector de
 * módulos de más abajo (`.web-plan__mod*`), que es de otra naturaleza:
 * varias casillas con tope, no dos pestañas excluyentes.
 */

/* ---------------------------------------------------------------------
 * El escalón SUGERIDO por el configurador
 *
 * Anillo de acento y un punto de elevación: la misma gramática que
 * `.web-plan--featured` (el destacado comercial) pero en el tono frío,
 * para que se distingan cuando el sugerido NO es el destacado. Lo
 * enciende `pricing-calc.js` según lo que haya marcado en el
 * configurador de arriba.
 *
 * `scroll-margin-top` en la sección: el ancla `#packs` la traía el botón
 * «Ver los packs», y sin este margen la navbar fija (que mide ~3.75rem)
 * tapaba justo el encabezado al que se salta. Mismo valor que ya usan
 * las anclas de módulo en `pages.css`.
 * ------------------------------------------------------------------- */
#packs {
  scroll-margin-top: 6rem;
}

.web-plan--sugerido {
  border-color: color-mix(in oklch, var(--agent-5) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--agent-5) 45%, transparent),
    0 18px 40px -24px color-mix(in oklch, var(--agent-5) 60%, transparent);
}

.web-price--texto {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

/* =====================================================================
 * CALCULADORA DE PRECIO y QUIZ «¿qué plan me conviene?»
 *
 * Las dos piezas de conversión de /precios. Todo lo de aquí es CHROME:
 * los importes los pone `web/pricing-calc.js` con el catálogo que el
 * backend inyecta en `data-pricing-catalog`.
 *
 * Vive en esta hoja y no en Tailwind por la regla del repo: el bundle
 * `tailwind.web.compiled.css` está versionado y CI no lo reconstruye,
 * así que una utilidad que no esté ya compilada no se puede usar. Los
 * controles (slider, casillas-tarjeta, radio-cards) necesitan estados
 * `:checked`/`:has()` que en cualquier caso no son utilidades.
 * ===================================================================== */

/* El atributo `hidden` tiene que GANAR a las clases de display.
 * `[hidden] { display: none }` del preflight pierde por especificidad
 * contra `.flex` / `.inline-flex`, y el JS oculta y muestra por atributo
 * —no por clase— para no repetir el nombre de la utilidad en dos sitios. */
.web-calc [hidden],
.web-quiz [hidden] {
  display: none !important;
}

/* Los `fieldset` de los dos bloques: sin marco (el marco es la tarjeta
 * `web-glass` que los contiene) y sin el padding del user-agent. */
/*
 * `margin-inline` y NO `margin` a secas.
 *
 * Lo que hay que neutralizar del `<fieldset>` es el margen LATERAL de
 * 2 px que mete el navegador; el vertical ya es cero. Con `margin: 0`
 * también se pisaban los `mt-*` de las plantillas — esta hoja va sin
 * `@layer`, así que gana a las utilidades de Tailwind, que viven en
 * `@layer utilities`. Resultado: los bloques del configurador y de la
 * calculadora quedaban pegados unos a otros por mucho `mt-10` que se
 * escribiera en el Twig.
 */
.web-calc__fieldset,
.web-quiz__fieldset {
  border: 0;
  margin-inline: 0;
  padding: 0;
  min-width: 0;
}

/* ---------------------------------------------------------------------
 * Personas: slider + stepper
 *
 * El stepper existe además del slider porque un `range` es imposible de
 * afinar con el dedo en móvil, y aquí la diferencia entre 5 y 6 personas
 * es la diferencia entre dos planes.
 * ------------------------------------------------------------------- */
.web-calc__row {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .web-calc__row {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.25rem;
  }
}

.web-calc__stepper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.web-calc__step {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--web-hairline);
  border-radius: var(--radius-md);
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard);
}

.web-calc__step:hover {
  background-color: color-mix(in oklch, var(--foreground) 7%, transparent);
}

.web-calc__step:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--agent-5) 70%, transparent);
  outline-offset: 2px;
}

.web-calc__range {
  flex: 1 1 auto;
  width: 100%;
  accent-color: var(--agent-5);
  cursor: pointer;
}

.web-calc__valor {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Módulos: casillas-tarjeta
 *
 * El `<input type=checkbox>` es real y visible (no un cuadrado pintado):
 * es lo que hace que el teclado, el lector de pantalla y el navegador sin
 * CSS sigan funcionando. La tarjeta sólo le pone marco y estado.
 * ------------------------------------------------------------------- */
.web-calc__mod {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--web-hairline-soft);
  border-radius: var(--radius-lg);
  font-size: 0.8125rem;
  color: var(--muted-foreground-1);
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

.web-calc__mod:hover {
  background-color: color-mix(in oklch, var(--foreground) 5%, transparent);
}

.web-calc__mod:has(.web-calc__mod-input:checked) {
  border-color: color-mix(in oklch, var(--agent-5) 45%, transparent);
  background-color: color-mix(in oklch, var(--agent-5) 12%, transparent);
  color: var(--foreground);
}

.web-calc__mod:has(.web-calc__mod-input:focus-visible) {
  outline: 2px solid color-mix(in oklch, var(--agent-5) 70%, transparent);
  outline-offset: 2px;
}

/* La IA va incluida en todos los planes: su casilla está marcada y
 * bloqueada, y el cursor lo dice antes de que nadie lo intente. */
.web-calc__mod--fija {
  cursor: default;
}

.web-calc__mod-input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  accent-color: var(--agent-5);
}

.web-calc__mod-txt {
  min-width: 0;
}

.web-calc__mod-badge {
  margin-inline-start: auto;
  flex: 0 0 auto;
}

.web-calc__deps {
  color: var(--muted-foreground-1);
}

/* ---------------------------------------------------------------------
 * Ciclo mensual / anual — mismo recurso que el toggle del embudo de alta
 * ------------------------------------------------------------------- */
.web-calc__ciclo {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--web-hairline-soft);
  border-radius: var(--radius-lg);
}

/* El rótulo con el padding va en el `<span>` interior y no en el
 * `<label>`: el fondo del estado seleccionado tiene que cubrir el área
 * pulsable entera sin re-declarar el espaciado en dos reglas. */
.web-calc__ciclo-opt {
  display: inline-flex;
  cursor: pointer;
}

.web-calc__ciclo-opt > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: var(--radius-md);
  padding: 0.35rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground-1);
  transition:
    background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

.web-calc__ciclo-opt:hover > span {
  color: var(--foreground);
}

/* El input se oculta SÓLO visualmente: sigue tabulable y anunciable. */
.web-calc__ciclo-input,
.web-quiz__opt-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.web-calc__ciclo-input:checked + span {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.web-calc__ciclo-opt:has(.web-calc__ciclo-input:focus-visible) {
  outline: 2px solid color-mix(in oklch, var(--agent-5) 70%, transparent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Tarjetas de resultado
 * ------------------------------------------------------------------- */
.web-calc__card,
.web-quiz__result {
  position: relative;
}

/* La ganadora lleva el mismo anillo que el plan destacado de las
 * tarjetas: es la señal que la página ya usa para «mira aquí». */
.web-calc__card--gana {
  border-color: color-mix(in oklch, var(--agent-5) 45%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--agent-5) 30%, transparent),
    0 24px 48px -24px color-mix(in oklch, var(--agent-5) 55%, transparent);
}

.web-calc__diff:empty {
  display: none;
}

/* ---------------------------------------------------------------------
 * Quiz: radio-cards y select
 * ------------------------------------------------------------------- */
.web-quiz__opt {
  display: flex;
  align-items: center;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--web-hairline-soft);
  border-radius: var(--radius-lg);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted-foreground-1);
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

.web-quiz__opt:hover {
  background-color: color-mix(in oklch, var(--foreground) 5%, transparent);
}

.web-quiz__opt:has(.web-quiz__opt-input:checked) {
  border-color: color-mix(in oklch, var(--agent-5) 45%, transparent);
  background-color: color-mix(in oklch, var(--agent-5) 12%, transparent);
  color: var(--foreground);
  font-weight: 500;
}

.web-quiz__opt:has(.web-quiz__opt-input:focus-visible) {
  outline: 2px solid color-mix(in oklch, var(--agent-5) 70%, transparent);
  outline-offset: 2px;
}

.web-quiz__select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--web-hairline);
  border-radius: var(--radius-lg);
  background-color: transparent;
  color: var(--foreground);
  font-size: 0.8125rem;
}

.web-quiz__select:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--agent-5) 70%, transparent);
  outline-offset: 2px;
}

.web-quiz__sector {
  color: var(--muted-foreground-1);
  text-underline-offset: 3px;
}

.web-quiz__sector:hover {
  color: var(--foreground);
}

/* ---------------------------------------------------------------------
 * SELECTOR DE MÓDULOS DE LA TARJETA DE ESCALÓN (`_planes.twig`)
 *
 * Sustituye al selector de sabor. Mismo lenguaje visual que las casillas
 * de la calculadora (`.web-calc__mod`) pero más compacto: en una tarjeta
 * de plan caben seis módulos, no dos pestañas, y compiten en espacio con
 * el precio y el CTA.
 *
 * El estado DESHABILITADO es la mitad del mensaje: cuando ya has gastado
 * las elecciones del escalón, las casillas restantes se apagan. Es la
 * forma más corta de decir «este plan da cuatro» sin un párrafo.
 * ------------------------------------------------------------------- */
/* `margin-inline`, por lo mismo que `.web-calc__fieldset`: un `margin: 0`
 * aquí se comería el `mt-6` de la plantilla. */
.web-plan__modulos {
  border: 0;
  padding: 0;
  margin-inline: 0;
  min-width: 0;
}

.web-plan__mod {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--muted-foreground-1);
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard);
}

.web-plan__mod:hover {
  background-color: color-mix(in oklch, var(--foreground) 5%, transparent);
}

.web-plan__mod:has(.web-plan__mod-input:checked) {
  color: var(--foreground);
}

.web-plan__mod:has(.web-plan__mod-input:focus-visible) {
  outline: 2px solid color-mix(in oklch, var(--agent-5) 70%, transparent);
  outline-offset: 2px;
}

/* Escalón lleno: lo que ya no cabe se apaga, y el cursor lo dice antes
 * de que nadie lo intente. `opacity` y no `display:none` — la lista de
 * módulos disponibles no cambia, cambia lo que puedes añadir. */
.web-plan__mod--off {
  opacity: 0.45;
  cursor: not-allowed;
}

.web-plan__mod--off:hover {
  background-color: transparent;
}

.web-plan__mod-input {
  flex: 0 0 auto;
  width: 0.9375rem;
  height: 0.9375rem;
  accent-color: var(--agent-5);
}

.web-plan__mod-txt {
  min-width: 0;
}

.web-plan__contador {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
 * CONFIGURADOR «A MEDIDA» (`_medida.twig`)
 *
 * Reusa los controles de la calculadora (`.web-calc__*`) y añade sólo lo
 * que no existía: la columna de resumen que acompaña el scroll y el
 * bloque del pack que compite con el total.
 * ------------------------------------------------------------------- */
.web-medida [hidden] {
  display: none !important;
}

/* El resumen sigue a la vista mientras se recorren los módulos. `sticky`
 * sólo a partir de `lg`: en una columna estrecha no hay nada de lo que
 * despegarse y quedaría flotando sobre su propio contenido. */
@media (min-width: 1024px) {
  .web-medida__aside {
    position: sticky;
    /* Por debajo de la navbar fija, con aire. */
    top: 5.5rem;
  }
}

.web-medida__ia {
  color: var(--muted-foreground-1);
}

/* El bloque del pack contrasta con el resumen en vez de fundirse con él:
 * es la alternativa, no una línea más del desglose. */
.web-medida__pack {
  border-color: color-mix(in oklch, var(--agent-4) 35%, transparent);
}