/* ══════════════════════════════════════════════════════════════════════════════
GRILLA DE FORMULARIO EN DOS COLUMNAS, AGRUPADA POR TEMA — FUENTE ÚNICA
──────────────────────────────────────────────────────────────────────────────
Creado 2026-08-14 (tarea T-2). Nació como las clases `.msol-*` del formulario
público de solicitud (Bloque C), que bajó de 1.189 px a 824 px de alto. Cuando
hizo falta el MISMO patrón en la herramienta de mayoristas y en el admin, se
extrajo acá en vez de copiarlo: **una sola implementación de la grilla**.
POR QUÉ EXISTE ESTE ARCHIVO Y NO ESTÁ EN web.css
La herramienta (`herramienta-ubicaciones.html`) y el admin (`admin/index.html`)
NO cargan `web.css` — tienen su propio CSS. Meterles el web.css entero para
reusar cuatro reglas arrastraría estilos que no les corresponden. Este archivo
es chico, neutro y no pisa nada: solo define sus propias clases.
CÓMO SE USA — tres piezas y nada más:
Datos personales
…
· `.fg-grid-2` / `.fg-grid-3` = en cuántas columnas se abre ESE grupo cuando
hay ancho. Se elige por la cantidad de campos del grupo, para que ninguno
quede colgando solo al lado de un hueco.
· Por debajo del corte (700 px) TODO vuelve a una columna, con los subtítulos
puestos: apilado ayudan igual y cuestan poco.
· Los botones (guardar, cancelar) van FUERA de la grilla, a lo ancho completo.
TOKENS: usa los del proyecto con cadena de respaldo, porque las tres caras
nombran distinto la misma línea (`--cream2` en la web y la herramienta,
`--border` en el admin).
══════════════════════════════════════════════════════════════════════════════ */
.fg-grid, .msol-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
.fg-group, .msol-group { margin-top: 16px; }
.fg-group:first-of-type, .msol-group:first-of-type { margin-top: 4px; }
/* Subtítulo DISCRETO: agrupa sin competir con el título del formulario. */
.fg-group-t, .msol-group-t { font-family: var(--sans); font-size: .7rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--gray); opacity: .85; margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--cream2, var(--border, #e3ddd0)); }
/* Campo = rótulo arriba, control abajo. El rótulo va DENTRO del label, así el
toque en el texto enfoca el control sin necesidad de `for`/`id`. */
.fg-f, .msol-f { display: flex; flex-direction: column; gap: 4px;
min-width: 0; margin: 0; } /* margin:0 → el espaciado lo da el gap de la grilla,
no el `label{margin}` global de cada página */
.fg-f > span, .msol-f > span { font-family: var(--sans); font-size: .74rem; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase; color: var(--gray); }
.fg-f > input, .fg-f > select, .fg-f > textarea, .fg-f > .fg-in { width: 100%; min-width: 0; }
/* `textarea` entró el 2026-08-16 con el campo de SEÑAS. La grilla solo le da
el ancho; el aspecto (borde, padding) lo pone el CSS de cada cara, como con
input y select. */
/* El `disabled` de los selects encadenados es REAL (lo pone el JS): no se abre,
no toma foco y no envía valor. Esto solo lo hace evidente a la vista y al
cursor — en dos o tres columnas los selects se ven a la vez y hay que dejar
claro cuál todavía no toca. */
.fg-grid :disabled { cursor: not-allowed; opacity: .7; }
.fg-f:has(:disabled) > span, .msol-f:has(:disabled) > span { opacity: .6; }
/* Los opcionales, visiblemente aparte de los obligatorios. */
.fg-opt, .msol-opt { margin-top: 22px; padding-top: 16px;
border-top: 1px dashed var(--cream2, var(--border, #e3ddd0)); }
/* ESCRITORIO: cada grupo se abre en tantas columnas como pidió su marcado.
El corte es 700 px — por debajo no hay ancho sobrante y dos columnas
apretarían los campos. */
@media (min-width: 700px) {
.fg-grid-2, .msol-grid-2 { grid-template-columns: repeat(2, 1fr); }
.fg-grid-3, .msol-grid-3 { grid-template-columns: repeat(3, 1fr); }
.fg-grid-4 { grid-template-columns: repeat(4, 1fr); }
}
/* 4 columnas piden más ancho que 3: entre 700 y 900 px se quedan en 2. */
@media (min-width: 700px) and (max-width: 899px) {
.fg-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.fg-group, .msol-group { margin-top: 12px; }
.fg-group-t, .msol-group-t { margin-bottom: 6px; padding-bottom: 4px; letter-spacing: .1em; }
.fg-grid, .msol-grid { gap: 8px; }
}
/* ── POR QUÉ CADA REGLA LLEVA DOS SELECTORES ─────────────────────────────────
`.fg-*` son las clases neutras (herramienta de mayoristas y admin). `.msol-*`
son las del formulario público de solicitud (Bloque C), cuyo marcado vive en
`frontend/js/mayo-acceso.js` y está validado y en uso: renombrarlo sería tocar
algo que funciona solo para que combine. En vez de eso, sus clases se cuelgan
de las MISMAS reglas de arriba — la grilla queda escrita UNA sola vez.
Lo PROPIO de ese modal (el input sin centrar, la casilla de términos, el
ancho de la tarjeta) sigue en `web.css`.
⚠️ `mayoristas.html` y `catalogo-mayorista.html` cargan este archivo ADEMÁS de
`web.css`, o ese formulario pierde su layout. */
/* ══════════════════════════════════════════════════════════════════════════════
BLOQUE DE UBICACIÓN del formulario de cliente (T-3, 2026-08-14)
Vive acá y no en un tercer archivo porque las DOS caras que lo usan (la
herramienta y el admin) ya cargan este stylesheet: un `` más en dos
páginas por quince reglas no se paga. Su lógica está en `/js/ubicar-cliente.js`.
══════════════════════════════════════════════════════════════════════════════ */
.ubi-row { display: flex; gap: 8px; align-items: flex-end; }
.ubi-row > :first-child { flex: 1 1 auto; min-width: 0; }
.ubi-btn { flex: 0 0 auto; white-space: nowrap; cursor: pointer;
min-height: 44px; padding: 0 16px; border-radius: 8px;
border: 1.5px solid var(--cream2, var(--border, #e3ddd0));
background: var(--white, #fff); font-family: var(--sans);
font-size: .9rem; font-weight: 600; color: var(--dark, #2c2418);
touch-action: manipulation; }
.ubi-btn:hover { border-color: var(--gold, #c9a04a); }
.ubi-btn:disabled { opacity: .6; cursor: default; }
.ubi-out { display: none; margin-top: 8px; padding: 10px 12px; border-radius: 8px;
font-size: .86rem; line-height: 1.5;
background: var(--cream, #faf7f2);
border: 1px solid var(--cream2, var(--border, #e3ddd0)); }
.ubi-out.ok { border-color: var(--gold, #c9a04a); }
.ubi-out.warn { background: #fdf1d8; border-color: #e8c97a; color: #7a5b18; }
.ubi-out.err { background: #fde2e1; border-color: #f0b8b5; color: var(--red, #c0392b); }
.ubi-t { font-size: .72rem; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--gray, #6b6056); margin-bottom: 4px; }
.ubi-l { overflow-wrap: anywhere; }
/* Números en Jost + tabular-nums, como manda la regla de tipografía. */
.ubi-coord { font-family: var(--sans); font-variant-numeric: tabular-nums;
font-weight: 600; color: var(--gray, #6b6056); font-size: .8rem; }
/* Un dato que NO se pudo obtener se muestra explicado, no se esconde (GEO-1). */
.ubi-off { color: var(--gray, #6b6056); font-style: italic; cursor: help; }
/* Un nivel de la cascada que el sistema no pudo llenar se PIDE, no se calla
(H-UBI-4). Va dentro del recuadro del punto marcado, que ya es `.ok`, así
que lleva su propio fondo para que se lea como lo que es: algo pendiente. */
.ubi-falta { margin-top: 8px; padding: 8px 10px; border-radius: 6px;
background: #fdf1d8; border: 1px solid #e8c97a; color: #7a5b18; }
@media (max-width: 480px) {
.ubi-row { flex-direction: column; align-items: stretch; }
.ubi-btn { width: 100%; }
}
/* ══════════════════════════════════════════════════════════════════════════════
EDITOR DE TELÉFONOS del formulario de cliente (2026-08-14)
Mismo criterio que el bloque de ubicación: vive acá porque las DOS caras que lo
usan ya cargan este stylesheet. Su lógica está en `/js/telefonos-cliente.js`.
══════════════════════════════════════════════════════════════════════════════ */
.tel-fila { display: grid; grid-template-columns: 1fr 1fr auto auto;
gap: 6px; align-items: center; margin-bottom: 6px; }
.tel-fila input { min-width: 0; }
.tel-pri, .tel-del { flex: 0 0 auto; cursor: pointer; min-height: 44px; padding: 0 10px;
border-radius: 8px; font-family: var(--sans); font-size: .8rem;
font-weight: 600; white-space: nowrap; touch-action: manipulation;
border: 1.5px solid var(--cream2, var(--border, #e3ddd0));
background: var(--white, #fff); color: var(--gray, #6b6056); }
.tel-pri.on { border-color: var(--gold, #c9a04a); background: var(--gold, #c9a04a);
color: var(--dark, #2c2418); }
.tel-pri:hover, .tel-del:hover { border-color: var(--gold, #c9a04a); }
.tel-del:disabled { opacity: .4; cursor: not-allowed; }
.tel-del:disabled:hover { border-color: var(--cream2, var(--border, #e3ddd0)); }
.tel-add { margin-top: 2px; cursor: pointer; min-height: 40px; padding: 0 14px;
border-radius: 8px; background: none; font-family: var(--sans);
font-size: .82rem; font-weight: 600; color: var(--gold-dk, #9e7a2e);
border: 1.5px dashed var(--cream2, var(--border, #e3ddd0)); }
.tel-add:hover { border-color: var(--gold, #c9a04a); }
/* La alerta de número repetido: AVISA, no bloquea (decisión de Andrés). */
.tel-avisos { margin-top: 6px; }
.tel-aviso { background: #fdf1d8; border: 1px solid #e8c97a; border-radius: 8px;
padding: 8px 10px; margin-top: 6px; font-size: .82rem;
line-height: 1.45; color: #7a5b18; }
.tel-aviso-n { display: block; color: var(--gray, #6b6056); font-size: .78rem; }
@media (max-width: 640px) {
/* En angosto: número y etiqueta a lo ancho, los dos botones abajo. */
.tel-fila { grid-template-columns: 1fr auto auto; }
.tel-fila .tel-eti { grid-column: 1 / -1; }
}