/*
 * LOS FORMULARIOS DE TRAID (04/11/2026). Propuesta aprobada por Ignacio: `finde-1019/FORMULARIOS-PROPUESTA-20261104.md` y su
 * vista previa `FORMULARIOS-PROPUESTA-20261104.html` (bloque «DESPUÉS»). Siete reglas, siempre iguales:
 *   1. etiqueta arriba (14 px, tinta, sin la unidad; «(opcional)» en gris);
 *   2. ayuda corta debajo (13 px gris, ≤ 62 caracteres por línea); lo largo detrás de «Más detalle», sin borrar texto;
 *   3. el campo blanco, 40 px, con el borde que se ve (`--ux-borde-control`) y el anillo rosa de siempre;
 *   4. la unidad DENTRO del campo («%» a la derecha, «$» a la izquierda);
 *   5. el error debajo del campo, con «!» + texto + rojo, y arriba un resumen con enlaces;
 *   6. una pregunta, una tarjeta (`.ux-grupo`), y las plegables con su resumen a la vista;
 *   7. un botón principal claro (rosa, 40 px) con el estado al lado; en el teléfono, todo a lo ancho.
 *
 * SÓLO tokens que ya existen (`--color-*`, `--v4-*`) más `--ux-borde-control` (una mezcla de dos tokens, `app/tema-v4.css`).
 * Diferencias con la vista previa, a propósito: `.ux-hoy` y `.ux-sugerido` se llaman `.ux-campo-hoy` y `.ux-campo-sugerido`
 * (`.ux-hoy` ya es la portada de la UX final), `.ux-grupo-titulo` sólo vale adentro de `.ux-grupo` (la bandeja usa el mismo
 * nombre) y `.ux-progreso` no se repite (es el de `ux.css`). Se suman `.ux-input` (un campo suelto, sin caja), `.ux-etiqueta-campo`
 * (la etiqueta que envuelve su campo), `.ux-boton-suave` y `.ux-boton-compacto` para las pantallas que arman sus formularios
 * con clases (`components/ux/formulario.ts`).
 */

/* El formulario: ancho legible (un campo de 900 px de ancho no se lee). */
.ux-form { display: flex; flex-direction: column; gap: 16px; max-width: 46rem; min-width: 0; }

/* LA TARJETA DEL GRUPO: una pregunta = una tarjeta. El título es la pregunta. */
.ux-grupo {
  display: flex; flex-direction: column; gap: 18px; min-width: 0; margin: 0;
  background: var(--color-superficie); border-radius: var(--v4-radio-l);
  box-shadow: 0 0 0 1px var(--v4-borde-suave), var(--v4-sombra-1);
  padding: 18px 20px;
}
.ux-grupo-cab { display: grid; gap: 4px; }
.ux-grupo .ux-grupo-titulo { font-size: var(--v4-texto-md); font-weight: var(--v4-peso-semi); line-height: 1.35; margin: 0; }
.ux-grupo-bajada { font-size: var(--v4-texto-sm); color: var(--color-tenue); max-width: 62ch; font-weight: var(--v4-peso-normal); }
/* Grupo plegable (las secciones del asistente): el resumen dice qué hay adentro sin abrirlo. */
details.ux-grupo { gap: 0; }
details.ux-grupo > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
details.ux-grupo > summary::-webkit-details-marker { display: none; }
details.ux-grupo > summary::after { content: ''; grid-row: 1 / span 2; grid-column: 2; width: 8px; height: 8px; border-right: 2px solid var(--color-tenue); border-bottom: 2px solid var(--color-tenue); transform: rotate(45deg); margin: 0 4px 4px; transition: transform var(--v4-transicion); }
details.ux-grupo[open] > summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
details.ux-grupo > summary .ux-grupo-bajada { grid-column: 1; }
details.ux-grupo[open] > .ux-grupo-cuerpo { margin-top: 18px; }
.ux-grupo-cuerpo { display: flex; flex-direction: column; gap: 18px; }

/* Campos en fila (números cortos): se acomodan solos; en el celular, uno abajo del otro. */
.ux-fila { display: grid; gap: 18px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }

/* EL CAMPO: etiqueta arriba → ayuda corta → control → error / «Hoy». */
.ux-campo { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ux-etiqueta { font-size: var(--v4-texto-base); font-weight: 550; line-height: 1.35; color: var(--color-tinta); padding: 0; }
.ux-etiqueta .ux-opcional,
.ux-etiqueta-campo .ux-opcional { font-weight: var(--v4-peso-normal); color: var(--color-tenue); }
/* «(opcional)» escrito por CSS cuando el rótulo de los datos ya lo dice para el lector de pantalla (no se lee dos veces). */
.ux-etiqueta[data-opcional]::after { content: ' (opcional)'; content: ' (opcional)' / ''; font-weight: var(--v4-peso-normal); color: var(--color-tenue); }
.ux-ayuda { font-size: var(--v4-texto-sm); line-height: 1.45; color: var(--color-tenue); max-width: 62ch; }
.ux-ayuda details { display: inline; }
.ux-ayuda summary { display: inline; cursor: pointer; color: var(--color-tinta); text-decoration: underline; text-underline-offset: 2px; min-height: 0; }
.ux-ayuda details[open] { display: block; margin-top: 4px; }
/* «Más detalle» escrito por CSS: el texto de la ayuda en el DOM queda IGUAL al de los datos (corta + resto), sin palabras de más. */
.ux-mas-detalle::before { content: 'Más detalle'; }
details[open] > .ux-mas-detalle::before { content: 'Menos detalle'; }

/* EL CONTROL con su UNIDAD adentro («%» a la derecha, «$» a la izquierda). */
.ux-control {
  display: flex; align-items: stretch; width: 100%; max-width: 20rem; min-height: 40px; overflow: hidden;
  background: var(--color-superficie); border: 1px solid var(--ux-borde-control); border-radius: var(--v4-radio-s);
  transition: border-color var(--v4-transicion), box-shadow var(--v4-transicion);
}
.ux-control[data-ancho='chico'] { max-width: 11rem; }
.ux-control[data-ancho='largo'] { max-width: 36rem; }
.ux-control:hover { border-color: color-mix(in oklch, var(--ux-borde-control) 60%, var(--color-tinta)); }
.ux-control:focus-within { border-color: var(--color-acento); box-shadow: var(--v4-anillo); }
.ux-control > input, .ux-control > select, .ux-control > textarea {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--color-tinta); box-shadow: none;
  font: inherit; font-size: var(--v4-texto-base); padding: 8px 12px; font-variant-numeric: tabular-nums;
}
.ux-control > textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
.ux-control > select {
  -moz-appearance: none;
       appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-tenue) 50%), linear-gradient(135deg, var(--color-tenue) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.ux-control > input::-moz-placeholder, .ux-control > textarea::-moz-placeholder { color: var(--color-tenue); opacity: .75; }
.ux-control > input::placeholder, .ux-control > textarea::placeholder { color: var(--color-tenue); opacity: .75; }
.ux-control:has(> :disabled) { background: var(--color-fondo); }
.ux-unidad {
  display: flex; align-items: center; padding: 0 11px; font-size: var(--v4-texto-sm); font-weight: var(--v4-peso-medio);
  color: var(--color-tenue); background: color-mix(in oklch, var(--color-grilla) 55%, var(--color-superficie));
  border-left: 1px solid var(--v4-borde-suave); -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.ux-unidad[data-lado='antes'] { order: -1; border-left: 0; border-right: 1px solid var(--v4-borde-suave); }

/* UN CAMPO SUELTO (sin caja): las pantallas que arman el formulario con clases. Mismo borde, fondo y letra que `.ux-control`. */
.ux-input {
  min-height: 36px; padding: 6px 10px; border: 1px solid var(--ux-borde-control); border-radius: var(--v4-radio-s);
  background-color: var(--color-superficie); color: var(--color-tinta); font-size: var(--v4-texto-base); font-weight: var(--v4-peso-normal);
  font-variant-numeric: tabular-nums; max-width: 100%;
}
.ux-input:disabled, .ux-input[readonly] { background-color: var(--color-fondo); }
/* El foco se VE con o sin la piel v4 (quien carga precios se mueve con el tabulador). */
.ux-input:hover:not(:disabled):not(:focus) { border-color: color-mix(in oklch, var(--ux-borde-control) 60%, var(--color-tinta)); }
.ux-input:focus-visible { outline: none; border-color: var(--color-acento); box-shadow: var(--v4-anillo); }
.ux-input:is(:user-invalid, [aria-invalid='true']):not(:focus-visible) { border-color: var(--color-alarma); }
textarea.ux-input { line-height: 1.5; }
/* La ETIQUETA QUE ENVUELVE su campo (`<label>texto <input/></label>`): el texto manda, el campo debajo. */
.ux-etiqueta-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 100%; font-size: var(--v4-texto-base); font-weight: 550; line-height: 1.35; color: var(--color-tinta); }
.ux-etiqueta-campo :is(input, select, textarea) { font-weight: var(--v4-peso-normal); }
.ux-etiqueta-campo .ux-ayuda { font-weight: var(--v4-peso-normal); }

/* «Hoy» y «Sugerido»: lo que está guardado, en una línea tranquila (no compite con la etiqueta). */
.ux-campo-hoy { font-size: var(--v4-texto-xs); color: var(--color-tenue); }
.ux-campo-hoy b { color: var(--color-tinta); font-weight: var(--v4-peso-medio); }
.ux-campo-sugerido { justify-self: start; display: inline-flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; font-size: var(--v4-texto-xs); color: var(--color-tinta); background: var(--color-destacado-suave); border-radius: var(--v4-radio-m); padding: 2px 10px; }

/* ERROR EN LÍNEA: debajo del campo, con forma (!) + palabra + color, y el control marcado. */
.ux-error { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: var(--v4-texto-sm); font-weight: var(--v4-peso-medio); color: var(--color-alarma); }
.ux-error::before { content: '!'; flex: 0 0 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--color-alarma); color: var(--color-primary-foreground); font-size: 11px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.ux-campo[data-invalido] .ux-control,
.ux-control:has(> [aria-invalid='true']),
.ux-control:has(> :user-invalid) { border-color: var(--color-alarma); box-shadow: inset 0 0 0 1px var(--color-alarma); }
.ux-campo[data-invalido] .ux-control:focus-within,
.ux-control:has(> [aria-invalid='true']):focus-within { box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-alarma) 22%, transparent); }
/* El resumen arriba del formulario (además, no en lugar): enlaces que llevan a cada campo. */
.ux-resumen-errores { margin: 0; border-left: 3px solid var(--color-alarma); background: var(--color-alarma-suave); border-radius: var(--v4-radio-s); padding: 10px 14px 10px 32px; font-size: var(--v4-texto-sm); color: var(--color-tinta); }
.ux-resumen-errores a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* OPCIONES como tarjetas: la elegida se nota por borde, fondo y tilde, no sólo color. */
.ux-opciones { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.ux-opcion {
  display: grid; grid-template-columns: 18px 1fr; gap: 2px 10px; align-items: start; cursor: pointer;
  border: 1px solid var(--ux-borde-control); border-radius: var(--v4-radio-m); padding: 12px 14px; background: var(--color-superficie);
  transition: border-color var(--v4-transicion), background-color var(--v4-transicion);
}
.ux-opcion:hover { border-color: color-mix(in oklch, var(--ux-borde-control) 60%, var(--color-tinta)); }
.ux-opcion > input { grid-row: 1 / span 4; margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--color-acento); }
.ux-opcion-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ux-opcion-rotulo { font-weight: var(--v4-peso-semi); font-size: var(--v4-texto-base); line-height: 1.35; }
.ux-opcion-detalle { font-size: var(--v4-texto-sm); color: var(--color-tenue); line-height: 1.4; }
.ux-opcion-ojo { font-size: var(--v4-texto-sm); color: var(--color-alarma); font-weight: var(--v4-peso-medio); }
.ux-opcion:has(> input:checked) { border-color: var(--color-acento); box-shadow: inset 0 0 0 1px var(--color-acento); background: color-mix(in oklch, var(--color-destacado-suave) 40%, var(--color-superficie)); }
.ux-opcion:has(> input:focus-visible) { box-shadow: inset 0 0 0 1px var(--color-acento), var(--v4-anillo); }
/* Casillas compactas (muchas opciones cortas). */
.ux-casillas { display: grid; gap: 6px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.ux-casilla { display: flex; gap: 8px; align-items: flex-start; font-size: var(--v4-texto-base); min-height: 28px; cursor: pointer; }
.ux-casilla > input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--color-acento); }

/* «Así va a quedar»: el antes→ahora, sin caja punteada; lo que cambia, marcado. */
.ux-asi-queda { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--v4-radio-m); background: color-mix(in oklch, var(--color-grilla) 45%, var(--color-superficie)); font-size: var(--v4-texto-sm); }
.ux-asi-queda ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ux-cambia { font-size: 11px; font-weight: var(--v4-peso-medio); background: var(--color-aviso-suave); color: var(--color-tinta); border-radius: var(--v4-radio-pastilla); padding: 1px 8px; margin-left: 6px; }

/* LA BARRA DE ACCIONES: UN botón principal claro, el secundario suave, y el estado a la vista. */
.ux-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding-top: 16px; border-top: 1px solid var(--v4-borde-suave); }
.ux-acciones[data-sin-linea] { padding-top: 0; border-top: 0; }
.ux-boton {
  font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px;
  border: 0; border-radius: var(--v4-radio-m); padding: 8px 18px; font-size: var(--v4-texto-base); font-weight: var(--v4-peso-semi);
  background: var(--color-acento); color: var(--color-primary-foreground); box-shadow: var(--v4-sombra-1); cursor: pointer;
  text-decoration: none; transition: background-color var(--v4-transicion);
}
.ux-boton:hover { background: color-mix(in oklch, var(--color-acento) 88%, var(--color-tinta)); }
.ux-boton:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; box-shadow: var(--v4-anillo); }
.ux-boton:is([data-suave], .ux-boton-suave) { background: var(--color-superficie); color: var(--color-tinta); box-shadow: inset 0 0 0 1px var(--ux-borde-control); }
.ux-boton:is([data-suave], .ux-boton-suave):hover { background: var(--color-fondo); }
/* Compacto: al lado de un campo suelto de 36 px (filas de un formulario corto, una fila de tabla). */
.ux-boton.ux-boton-compacto { min-height: 36px; padding: 6px 14px; font-size: var(--v4-texto-sm); }
.ux-boton:disabled { opacity: .55; cursor: not-allowed; }
/* En una celda de tabla (filas de Operar, Alertas, la grilla de Costos) la densidad es una decisión: campo y botón compactos. */
:is(td, th) .ux-input { min-height: 0; padding: 3px 8px; font-size: var(--v4-texto-sm); }
:is(td, th) .ux-boton.ux-boton-compacto { min-height: 28px; padding: 3px 10px; font-size: var(--v4-texto-xs); }
.ux-boton[aria-busy='true'] { opacity: .8; cursor: progress; }
.ux-estado { display: inline-flex; align-items: center; gap: 6px; font-size: var(--v4-texto-sm); color: var(--color-tenue); }
.ux-estado::before { content: ''; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-tenue); }
.ux-estado[data-ux-estado='pendiente']::before { background: var(--color-aviso); }
.ux-estado[data-ux-estado='falta']::before { background: var(--color-aviso); }
.ux-estado[data-ux-estado='falta'] { color: var(--color-tinta); background: var(--color-aviso-suave); border-radius: var(--v4-radio-pastilla); padding: 2px 10px; }
.ux-estado[data-ux-estado='guardado'] { color: var(--color-favorable); font-weight: var(--v4-peso-medio); }
.ux-estado[data-ux-estado='guardado']::before { content: '✓'; flex-basis: auto; width: auto; height: auto; background: none; font-weight: 700; }
.ux-acciones .ux-estado { margin-left: auto; }

/* Pasos del asistente (columna izquierda): hecho / en curso / falta se distinguen sin depender del color. */
.ux-pasos-caja { display: flex; flex-direction: column; gap: 8px; background: var(--color-superficie); border-radius: var(--v4-radio-l); box-shadow: 0 0 0 1px var(--v4-borde-suave); padding: 12px; }
.ux-pasos-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: var(--v4-texto-sm); }
.ux-pasos-lista > li { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 10px; border-radius: var(--v4-radio-s); color: var(--color-tenue); }
.ux-pasos-lista > li[data-hecho] { color: var(--color-tinta); }
.ux-pasos-lista > li[aria-current='step'], .ux-pasos-lista > li:has([aria-current='step']) { color: var(--color-tinta); font-weight: var(--v4-peso-semi); background: var(--color-destacado-suave); box-shadow: inset 3px 0 var(--color-acento); }
.ux-pasos-lista button { color: inherit; text-align: left; }

.ux-aviso { border-left: 3px solid var(--color-acento); padding: 2px 0 2px 12px; font-size: var(--v4-texto-sm); color: var(--color-tinta); max-width: 62ch; }

/* TELÉFONO: una columna, controles a lo ancho, 16 px en los campos (iOS no hace zoom), botones de 44 px a lo ancho. */
@media (max-width: 640px) {
  .ux-grupo { padding: 16px; }
  .ux-control, .ux-control[data-ancho] { max-width: none; }
  .ux-control > input, .ux-control > select, .ux-control > textarea, .ux-input { font-size: 16px; }
  .ux-acciones { flex-direction: column; align-items: stretch; }
  .ux-acciones .ux-boton { width: 100%; min-height: 44px; }
  .ux-acciones .ux-boton:is([data-suave], .ux-boton-suave) { order: 2; }
  .ux-acciones .ux-estado { margin-left: 0; order: 3; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ux-control, .ux-opcion, .ux-boton, details.ux-grupo > summary::after { transition: none; }
}