/*
 * Capa visual de las PÁGINAS INTERIORES de la web pública
 * (`/plataforma`, `/modulos`, `/demo`, `/legal/*`).
 *
 * Por qué un fichero aparte de `web.css`
 * -------------------------------------
 * `web.css` lo carga el LAYOUT en las nueve páginas: ahí sólo puede
 * vivir lo que necesitan todas (navbar, tipografía, glass, decorado).
 * Esto otro —controles de formulario, prosa legal, chips de filtro— sólo
 * hace falta en tres páginas, y meterlo en el fichero común lo cargaría
 * también en la home y en las legales, que no tienen ni un `<input>`.
 *
 * Se carga desde `{% block head_extra %}`, es decir DESPUÉS de
 * `web.css`, sin `@layer` y con todo prefijado por `web-`: gana a
 * Tailwind y a Preline Pro sin `!important` y sin tocar selectores
 * genéricos.
 *
 * Sin recompilar Tailwind
 * -----------------------
 * `tailwind.compiled.css` está versionado y CI no lo reconstruye
 * (CLAUDE.md). Todo lo que aquí necesita una clase nueva se escribe en
 * este fichero en lugar de inventar utilidades que no existirían en el
 * CSS compilado.
 *
 * Los dos temas
 * -------------
 * Nada de colores literales: todo sale de los tokens de
 * `shared/tokens.css` (`--foreground`, `--card`, `--agent-*`) y de las
 * custom properties que `.web-page` redefine en oscuro, así que claro y
 * oscuro salen solos.
 */

/* ------------------------------------------------------------------ *
 * 1. Prosa legal
 *
 * Las cuatro legales se leen, se citan y se imprimen. No llevan tarjetas
 * ni animación más allá del reveal del encabezado: el contenido ES el
 * diseño. Medida de línea acotada (~68 caracteres) porque un párrafo
 * jurídico a 1200 px de ancho no hay quien lo siga.
 * ------------------------------------------------------------------ */

.web-prose {
  color: var(--muted-foreground-1, var(--foreground));
  font-size: 0.9375rem;
  line-height: 1.75;
}

.web-prose > * + * {
  margin-top: 1rem;
}

.web-prose h2 {
  margin-top: 2.75rem;
  color: var(--foreground);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.web-prose h3 {
  margin-top: 1.75rem;
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 600;
}

.web-prose ul {
  padding-inline-start: 1.15rem;
  list-style: disc;
}

.web-prose ol {
  padding-inline-start: 1.35rem;
  list-style: decimal;
}

.web-prose li + li {
  margin-top: 0.5rem;
}

.web-prose strong {
  color: var(--foreground);
  font-weight: 600;
}

.web-prose a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in oklch, var(--agent-5) 60%, transparent);
}

.web-prose a:hover {
  text-decoration-color: var(--agent-5);
}

/* Entradilla de una legal: la respuesta autónoma que un motor
   generativo puede citar sin leer el resto. Va más grande y con el
   color del texto principal para que se distinga del cuerpo. */
.web-prose-lead {
  color: var(--foreground);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* Aviso de dato pendiente de revisión legal (`[CIF]`, `[DIRECCIÓN
   FISCAL]`). Deliberadamente visible: preferimos enseñar el hueco a
   inventarnos un dato registral. */
.web-note {
  display: flex;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border: 1px solid color-mix(in oklch, var(--agent-4) 30%, transparent);
  border-radius: 0.75rem;
  background-color: color-mix(in oklch, var(--agent-4) 8%, transparent);
  color: var(--foreground);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* Ficha de datos del titular (tabla `<dl>` de dos columnas). */
.web-facts {
  display: grid;
  gap: 0.5rem 1.5rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
}

@media (min-width: 640px) {
  .web-facts {
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  }
}

.web-facts dt {
  color: var(--muted-foreground-1, var(--foreground));
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.web-facts dd {
  color: var(--foreground);
  overflow-wrap: anywhere;
}

/* Bloque de las condiciones de contratación: HTML que llega del
   servicio (`WorkspaceBillingService::condiciones()`), no de una
   plantilla. Se estila por descendencia porque no podemos añadirle
   clases — y es el ÚNICO sitio de este fichero donde eso pasa. */
.web-terms {
  padding: 1.25rem 1.25rem 1.5rem;
  border: 1px solid var(--web-glass-line);
  border-radius: 1rem;
  background-color: var(--web-glass);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.web-terms > * + * {
  margin-top: 0.875rem;
}

.web-terms ul {
  padding-inline-start: 1.15rem;
  list-style: disc;
}

.web-terms li + li {
  margin-top: 0.5rem;
}

.web-terms strong {
  color: var(--foreground);
}

/* ------------------------------------------------------------------ *
 * 2. Catálogo de módulos (`/modulos`)
 * ------------------------------------------------------------------ */

/* Chips del filtro. El estado lo lleva `aria-pressed` —no una clase
   `is-active`— para que el botón sea correcto para un lector de
   pantalla y para que el CSS y la accesibilidad no puedan divergir. */
.web-chipbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.web-chipbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--web-glass-line);
  border-radius: 999px;
  background-color: transparent;
  color: var(--muted-foreground-1, var(--foreground));
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color var(--duration-base, 200ms) var(--ease-standard, ease),
    background-color var(--duration-base, 200ms) var(--ease-standard, ease),
    color var(--duration-base, 200ms) var(--ease-standard, ease);
}

.web-chipbtn:hover {
  border-color: color-mix(in oklch, var(--agent-5) 40%, var(--web-glass-line));
  color: var(--foreground);
}

.web-chipbtn[aria-pressed="true"] {
  border-color: color-mix(in oklch, var(--agent-5) 55%, transparent);
  background-color: color-mix(in oklch, var(--agent-5) 14%, transparent);
  color: var(--foreground);
}

.web-chipbtn__count {
  color: var(--muted-foreground-1, var(--foreground));
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

/* Tarjeta de módulo. `scroll-margin` para que el ancla `#modulo-crm` no
   quede debajo de la navbar fija al llegar desde el JSON-LD o desde un
   enlace de la sección de sectores. */
.web-module {
  scroll-margin-top: 6rem;
}

.web-module[hidden] {
  display: none;
}

/* Enlace-píldora a un módulo desde una tarjeta de sector. */
.web-modtag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--web-glass-line);
  border-radius: 0.375rem;
  color: var(--foreground);
  font-size: 0.75rem;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color var(--duration-base, 200ms) var(--ease-standard, ease);
}

.web-modtag:hover {
  border-color: color-mix(in oklch, var(--agent-5) 45%, var(--web-glass-line));
}

/* Punto de estado del enlace-píldora: verde = en producción. Es
   redundante con el badge de la tarjeta a propósito — aquí no cabe el
   badge entero y el color solo nunca es la única señal (el destino lo
   dice con texto). */
.web-modtag__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background-color: color-mix(in oklch, var(--foreground) 35%, transparent);
}

.web-modtag--live .web-modtag__dot {
  background-color: var(--agent-4);
}

/* ------------------------------------------------------------------ *
 * 3. Pasos numerados (ejemplo de extremo a extremo de `/plataforma`)
 * ------------------------------------------------------------------ */

.web-steps {
  display: grid;
  gap: 0.75rem;
  counter-reset: web-step;
  list-style: none;
  padding: 0;
  margin: 0;
}

.web-steps > li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--foreground);
  font-size: 0.875rem;
  line-height: 1.6;
}

.web-steps > li::before {
  counter-increment: web-step;
  content: counter(web-step);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid color-mix(in oklch, var(--agent-5) 35%, transparent);
  border-radius: 999px;
  background-color: color-mix(in oklch, var(--agent-5) 12%, transparent);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * 4. Formulario de demo
 *
 * Controles propios y no las clases de formulario de Preline: éstos
 * tienen que verse sobre el fondo glass de la web pública, con la rampa
 * `--agent-*` como color de foco, y son cuatro reglas.
 * ------------------------------------------------------------------ */

.web-field {
  display: block;
}

.web-field + .web-field {
  margin-top: 1.125rem;
}

.web-label {
  display: block;
  margin-bottom: 0.4375rem;
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 500;
}

.web-label__hint {
  margin-inline-start: 0.375rem;
  color: var(--muted-foreground-1, var(--foreground));
  font-weight: 400;
}

.web-input,
.web-select,
.web-textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--web-glass-line);
  border-radius: 0.625rem;
  background-color: color-mix(in oklch, var(--card) 55%, transparent);
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  transition:
    border-color var(--duration-base, 200ms) var(--ease-standard, ease),
    box-shadow var(--duration-base, 200ms) var(--ease-standard, ease);
}

.web-textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.web-input::placeholder,
.web-textarea::placeholder {
  color: color-mix(in oklch, var(--foreground) 42%, transparent);
}

.web-input:focus-visible,
.web-select:focus-visible,
.web-textarea:focus-visible {
  outline: none;
  border-color: color-mix(in oklch, var(--agent-5) 65%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--agent-5) 22%, transparent);
}

.web-input[aria-invalid="true"],
.web-select[aria-invalid="true"],
.web-textarea[aria-invalid="true"] {
  border-color: color-mix(in oklch, var(--agent-2) 70%, transparent);
}

/* Mensaje de error de campo. Lleva icono textual («·») y no sólo color:
   el color por sí solo no es una señal accesible. */
.web-error {
  margin-top: 0.375rem;
  color: color-mix(in oklch, var(--agent-2) 85%, var(--foreground));
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Rejilla de casillas de módulos: dos columnas cuando caben. */
.web-checkgrid {
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .web-checkgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.web-check-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--web-glass-line);
  border-radius: 0.5rem;
  color: var(--foreground);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color var(--duration-base, 200ms) var(--ease-standard, ease);
}

.web-check-item:hover {
  border-color: color-mix(in oklch, var(--agent-5) 40%, var(--web-glass-line));
}

.web-check-item input,
.web-consent input {
  flex: none;
  width: 1rem;
  height: 1rem;
  accent-color: var(--agent-5);
}

.web-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  color: var(--foreground);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.web-consent input {
  margin-top: 0.1875rem;
}

.web-consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Honeypot. `position: absolute` + `left: -9999px` en lugar de
   `display: none`: hay bots que descartan los campos con `display:none`
   precisamente porque saben que son trampas, pero rellenan los que
   siguen participando del layout. `aria-hidden` + `tabindex="-1"` en el
   HTML lo mantienen fuera del alcance de un lector de pantalla y del
   tabulador, así que ninguna persona puede tropezarse con él. */
.web-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * 5. Reduced motion
 *
 * `web-motion.js` ya respeta la preferencia; esto cubre las
 * transiciones puramente CSS que hay en este fichero.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .web-chipbtn,
  .web-modtag,
  .web-check-item,
  .web-input,
  .web-select,
  .web-textarea {
    transition: none;
  }
}