/* Comercial · Thelsa — formularios: grid de campos, inputs, ayuda, autocompletado de calle y alerta de ciudad. */
  .form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px 18px; align-items: end; }
  .field label { line-height: 1.3; }
  .field { position: relative; }
  .form-grid input:not([type=checkbox]):not([type=hidden]), .form-grid select { height: 36px; }
  .field > .help { position: absolute; top: 100%; left: 0; margin-top: 3px; }
  .field { display: flex; flex-direction: column; gap: 5px; }
  .field.col-1 { grid-column: span 1; } .field.col-2 { grid-column: span 2; } .field.col-3 { grid-column: span 3; }
  .field.col-4 { grid-column: span 4; } .field.col-5 { grid-column: span 5; } .field.col-6 { grid-column: span 6; }
  .field.col-7 { grid-column: span 7; } .field.col-8 { grid-column: span 8; } .field.col-9 { grid-column: span 9; }
  .field.col-10 { grid-column: span 10; } .field.col-11 { grid-column: span 11; } .field.col-12 { grid-column: span 12; }
  @media (max-width: 1100px) {
    .form-grid { grid-template-columns: repeat(6, 1fr); }
    .field.col-7, .field.col-8, .field.col-9, .field.col-10, .field.col-11, .field.col-12 { grid-column: span 6; }
    .field.col-4, .field.col-5, .field.col-6 { grid-column: span 6; }
  }
  label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
  input, select, textarea { font-family: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink); width: 100%; }
  input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11,79,158,0.14); }
  input[type=checkbox] { width: 16px; height: 16px; min-width: 16px; padding: 0; margin: 0; border: 0; flex-shrink: 0; accent-color: var(--brand); }
  textarea { resize: vertical; min-height: 54px; }
  .num-input { font-family: 'Geist Mono', monospace; text-align: right; }
  .help { font-size: 11px; color: var(--ink-faint); }

  .dir-sugerencias { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 0 0 6px 6px; box-shadow: 0 8px 20px rgba(12,35,64,.12); z-index: 40; display: none; max-height: 220px; overflow-y: auto; }
  .dir-sugerencias.open { display: block; }
  .dir-sugerencias .sug { padding: 8px 12px; font-size: 12.5px; cursor: pointer; border-bottom: 1px solid var(--line-soft, #eef2f6); }
  .dir-sugerencias .sug:hover { background: var(--bg-subtle); }
  .dir-sugerencias .sug .d { color: var(--ink-soft); font-size: 11px; }
  input.ciudad-invalida { border-color: #d81b33 !important; background: #fdf2f3; }
  .alerta-ciudad { margin-bottom: 16px; padding: 14px 18px; border: 1px solid #d81b33; border-left-width: 4px; border-radius: var(--r-md); background: #fdf2f3; }
  .alerta-ciudad .ac-tit { font-weight: 600; color: #d81b33; margin-bottom: 4px; }
  .alerta-ciudad .ac-txt { font-size: 13px; }