/* STOLZEL OPS — formularios (estándar §7 de ARQUITECTURA_PLATAFORMA.md).
 *
 * Los formularios son la única entrada manual humana del sistema: se diseñan
 * asumiendo que un principiante los va a llenar. Los colores vienen de
 * tokens.css — acá no se inventa ninguno.
 *
 * Actualizado a la dirección "Mesa de Tesorería" (2026-08-03): borde de campo
 * 3.2:1 (WCAG 1.4.11), foco con borde sólido + halo, y los campos de monto,
 * CI y cuenta en monoespaciada con cero barrado — el operador ve en el campo
 * exactamente lo que verá en la planilla.
 */

.fgrid {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-m);
  padding: var(--e5) var(--e6); max-width: 760px; box-shadow: var(--sombra-1);
}

/* Secciones con título: agrupan lo que la persona tiene "en la mano" al mismo
   tiempo (el CI físico, el contrato, la libreta bancaria). */
.fsec {
  font-size: 14px; font-weight: 600; color: var(--marca-900);
  margin: var(--e5) 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--borde);
}
.fsec:first-child { margin-top: 0; }

.frow { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: var(--e3); }
.fld { display: flex; flex-direction: column; }
.fld label {
  font-size: 12.5px; color: #3F4354; font-weight: 500; margin-bottom: 3px;
}
.fld label.req::after { content: " *"; color: var(--critico-fuerte); font-weight: 700; }

.fld input, .fld select, .fld textarea {
  padding: 8px 11px; border: 1px solid var(--borde-campo);
  /* Misma geometria que los botones: campos y controles conviven en la misma
     fila y dos radios distintos a 2px de distancia se leen como un descuido. */
  border-radius: var(--r-btn);
  font-size: 14px; font-family: inherit; background: var(--superficie);
  color: var(--texto);
}
.fld input::placeholder { color: var(--texto-tenue); }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: none; border-color: var(--marca-800);
  box-shadow: 0 0 0 3px rgba(59, 30, 119, .16);
}
.fld .hint { font-size: 11px; color: var(--texto-suave); margin-top: 2px; }

/* Montos, CI y cuentas: monoespaciada, derecha, cero barrado (tokens .mono).
   El input hereda .mono; el alineado lo aporta esta regla. */
.fld input.mono { text-align: right; }

/* El ancho es una pista visual de cuánto se espera escribir. */
.w-xs { width: 70px; }  .w-s { width: 110px; } .w-m { width: 170px; }
.w-l  { width: 240px; } .w-xl { width: 330px; }

/* Combo select-only: se escribe para filtrar, solo se acepta lo de la lista. */
.combo { position: relative; }
.combo ul {
  position: absolute; top: 100%; left: 0; background: var(--superficie); z-index: 30;
  min-width: 100%; border: 1px solid var(--borde-campo); border-radius: var(--r-s);
  max-height: 200px; overflow-y: auto; margin: 2px 0 0; padding: 0; list-style: none;
  display: none; box-shadow: var(--sombra-2);
}
.combo ul li { padding: 7px 11px; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.combo ul li:hover { background: var(--marca-050); }

.telsel ul li { display: flex; align-items: center; gap: var(--e2); }
.telbtn {
  display: flex; align-items: center; gap: 6px; padding: var(--e2) 10px;
  border: 1px solid var(--borde-campo); border-radius: var(--r-btn);
  background: var(--superficie); font-size: 13.5px; cursor: pointer; font-family: inherit;
  color: var(--texto); font-weight: 400;
}
.telbtn:hover { background: var(--superficie); }
.telbtn:active { transform: none; }
.telbtn:focus {
  outline: none; border-color: var(--marca-800);
  box-shadow: 0 0 0 3px rgba(59, 30, 119, .16);
}
.flg { display: inline-flex; align-items: center; }

/* Doble entrada de datos que cuestan dinero si van mal (cuentas bancarias). */
.match-ok  { border-color: var(--ok-fuerte) !important; }
.match-bad { border-color: var(--critico-fuerte) !important; }

/* Formularios a lo ancho de la ventana (pedido de Will: el de crear
   oferta quedaba corto). Los campos crecen con la pantalla. */
.fgrid--ancho { max-width: none; }
.fgrid--ancho .w-l, .fgrid--ancho .w-xl { width: 100%; max-width: none; }
.fgrid--ancho .fld { flex: 1 1 260px; }