/* ════════════════════════════════════════════════════
   form.css — Presupuesto form and all form elements
   ════════════════════════════════════════════════════ */

.pres-wrapper { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.pres-info .lead { max-width: 440px; }
.pres-steps { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.pres-step  { display: flex; gap: 14px; align-items: flex-start; }
.ps-dot {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  background: rgba(var(--deep-rgb),.09); border: 2px solid rgba(var(--deep-rgb),.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--deep);
}
.ps-name { font-size: 14px; font-weight: 700; color: var(--text); }
.ps-desc { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.6; }
.no-reg {
  margin-top: 24px; padding: 14px 16px;
  background: rgba(0,163,177,.07); border: 1px solid rgba(0,163,177,.25);
  border-radius: var(--r); font-size: 13px; color: var(--deep); line-height: 1.65;
}
.no-reg strong { color: var(--teal2); }

.pres-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--rlg); padding: 36px; box-shadow: var(--sh);
}
.pres-card-title { font-size: 18px; font-weight: 800; color: var(--deep); margin-bottom: 4px; }
.pres-card-sub   { font-size: 13.5px; color: var(--muted); margin-bottom: 24px; }

.form-group   { margin-bottom: 16px; }
.form-label   { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 9px 13px;
  border: 1.5px solid var(--border); border-radius: 7px;
  font-size: 14px; font-family: inherit; color: var(--text); background: var(--white);
  transition: border-color .15s, box-shadow .15s; outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--deep); box-shadow: 0 0 0 3px rgba(var(--deep-rgb),.1);
}
/* ── Grid datos personales ───────────────────────── */
.pres-personal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "nombre cuit" "email tel";
  gap: 12px;
  margin-bottom: 0;
}
.ppg-nombre { grid-area: nombre; }
.ppg-cuit   { grid-area: cuit; }
.ppg-email  { grid-area: email; }
.ppg-tel    { grid-area: tel; }

.form-input--locked {
  background: rgba(var(--deep-rgb), .04);
  border-color: rgba(var(--deep-rgb), .2);
  color: var(--muted);
  cursor: default;
}
.form-input--locked:focus {
  border-color: rgba(var(--deep-rgb), .2);
  box-shadow: none;
}
.pres-session-info {
  padding: 9px 13px; margin-bottom: 16px;
  background: rgba(var(--deep-rgb), .05); border: 1px solid rgba(var(--deep-rgb), .15);
  border-radius: var(--r); font-size: 12.5px; color: var(--deep);
}
.form-textarea { resize: vertical; min-height: 86px; line-height: 1.6; }
.form-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-hint { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.form-hint-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 3px; }
.form-hint-row .form-hint { margin-top: 0; }
.form-charcount { font-size: 11px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.form-charcount--near { color: #B45309; }
.form-charcount--full { color: var(--danger); font-weight: 600; }
.form-error { font-size: 11.5px; color: var(--danger); margin-top: 3px; display: none; }
.input-error { border-color: var(--danger) !important; }
.input-error:focus { box-shadow: 0 0 0 3px rgba(217,64,64,.1) !important; }
.form-hint--warn { color: #B45309; font-weight: 600; }

.tipo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.tipo-opt {
  border: 1.5px solid var(--border); border-radius: 9px; padding: 12px 6px;
  text-align: center; cursor: pointer; transition: all .15s; background: var(--white);
}
.tipo-opt:hover { border-color: var(--deep); background: var(--slate); }
.tipo-opt.sel   { border-color: var(--deep); background: rgba(var(--deep-rgb),.05); }
.tipo-opt input { display: none; }
.tipo-icon  { width: 24px; height: 24px; margin: 0 auto 6px; display: block; opacity: .4; transition: opacity .15s; }
.tipo-opt.sel .tipo-icon, .tipo-opt:hover .tipo-icon { opacity: 1; }
.btn-icon-send { width: 16px; height: 16px; filter: brightness(0) invert(1); vertical-align: middle; margin-right: 6px; }
.tipo-name  { font-size: 12px; font-weight: 600; color: var(--text); }

.mode-row { display: flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.mode-btn {
  flex: 1; padding: 8px; font-size: 12px; font-weight: 600;
  background: none; border: none; cursor: pointer; color: var(--muted); transition: all .15s;
}
.mode-btn.on { background: var(--deep); color: #fff; }
.panel-params, .panel-libre { display: none; }
.panel-params.on, .panel-libre.on { display: block; }

/* ── Wizard de 4 pasos ────────────────────────────── */
.pres-wizard-steps { display: flex; align-items: center; margin-bottom: 26px; }
.pws-sep { flex: 1; height: 2px; background: var(--border); margin: 0 6px; }
.pws-step {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-size: 12px; font-weight: 600; color: var(--muted); opacity: .55; transition: opacity .15s;
}
.pws-step.on, .pws-step.done { opacity: 1; }
.pws-num {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--muted);
  border: 1.5px solid var(--border); background: var(--white); transition: all .15s;
}
.pws-step.on .pws-num   { border-color: var(--deep); background: var(--deep); color: #fff; }
.pws-step.done .pws-num { border-color: var(--deep); background: rgba(var(--deep-rgb),.1); color: var(--deep); }
.pws-label { display: none; }
.pws-step.on .pws-label { display: inline; color: var(--deep); }

.pres-step-panel { display: none; }
.pres-step-panel.on { display: block; }
.pres-step-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border);
}
/* "Agregar muestra" actúa sobre el formulario de arriba, no es navegación
   del wizard — se separa visualmente (sin el borde/margen grande de
   .pres-step-actions) para que no quede pegado a "Continuar" y se pueda
   clickear por error. */
.pres-step-actions--agregar {
  justify-content: flex-end; margin-top: 14px; padding-top: 0; border-top: none;
}
.muestra-agregar-hint { margin-top: 14px; margin-bottom: 0; line-height: 1.5; }

/* ── Carrito de muestras (paso 2 mini-lista + paso 3 confirmación) ── */
.muestras-lista { display: flex; flex-direction: column; gap: 10px; }
.muestras-lista--compacta:not(:empty) { margin-top: 18px; }
.muestras-vacio { font-size: 13px; color: var(--muted); margin: 0; }
.muestra-card {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1.5px solid var(--border); border-radius: var(--r);
  background: var(--slate); padding: 12px 14px;
}
.muestra-card-main { flex: 1; min-width: 0; }
.muestra-card-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.muestra-card-tipo {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--deep);
}
.muestra-card-sub { font-size: 12px; color: var(--muted); }
.muestra-card-desc { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.muestra-card-analisis { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.muestra-card--editando { border-color: var(--deep); background: rgba(var(--deep-rgb),.06); }
.muestra-card-acciones { display: flex; gap: 6px; flex-shrink: 0; }
.muestra-card-edit, .muestra-card-rm {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: none; background: rgba(var(--deep-rgb),.1); color: var(--deep);
  cursor: pointer; font-size: 11px; padding: 0; line-height: 1;
  transition: background .15s;
}
.muestra-card-edit:hover { background: var(--deep); color: #fff; }
.muestra-card-rm:hover { background: var(--danger); color: #fff; }

.muestra-editando-aviso {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: rgba(var(--deep-rgb),.06); border: 1px solid rgba(var(--deep-rgb),.2);
  border-radius: 8px; padding: 8px 12px; margin-top: 14px;
  font-size: 12.5px; color: var(--deep); font-weight: 600;
}
.btn-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--deep); text-decoration: underline;
}

/* ── Paso 4: muestreo + mapa ──────────────────────── */
.direccion-row { display: flex; gap: 8px; }
.direccion-row .form-input { flex: 1; }
.form-hint--ok { color: var(--teal2, #0A7C6A); font-weight: 600; }
.mapa-muestreo-wrap { margin-top: 12px; margin-bottom: 16px; }
#mapaMuestreo {
  width: 100%; height: 260px; border-radius: var(--r); overflow: hidden;
  border: 1.5px solid var(--border);
}
.panel-muestreo { margin-top: 14px; margin-bottom: 8px; }
.muestreo-desc { margin-top: 8px; line-height: 1.6; }
.muestreo-desc strong { color: var(--text); }
#panelSueloMuestreo { margin-bottom: 22px; }

/* ── Picker de análisis ──────────────────────────── */
.btn-analisis-picker {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 10px 14px;
  border: 1.5px dashed var(--border); border-radius: 8px;
  background: var(--slate); cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--deep);
  transition: border-color .15s, background .15s;
}
.btn-analisis-picker:hover { border-color: var(--deep); background: rgba(var(--deep-rgb),.05); }
.analisis-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--deep); color: #fff;
  border-radius: 10px; font-size: 11px; font-weight: 700; margin-left: auto;
}
.analisis-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.analisis-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(var(--deep-rgb),.08); border: 1px solid rgba(var(--deep-rgb),.18);
  color: var(--deep); border-radius: 20px;
  padding: 3px 10px 3px 10px; font-size: 12px; font-weight: 500;
}
.analisis-tag-rm {
  display: flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  border: none; background: rgba(var(--deep-rgb),.15); color: var(--deep);
  cursor: pointer; font-size: 9px; padding: 0; line-height: 1;
  transition: background .15s;
}
.analisis-tag-rm:hover { background: rgba(var(--deep-rgb),.35); color: #fff; }

.alert { padding: 11px 13px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; display: none; }
.alert-err { background: #FEF2F2; color: #9B1C1C; border: 1px solid #FECACA; }
.form-terms-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px; color: var(--muted); line-height: 1.6;
  margin-bottom: 6px; cursor: pointer;
}
.form-terms-check input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--deep); width: 14px; height: 14px; }
.form-terms-check a { color: var(--teal2); text-decoration: underline; }

.success-state   { display: none; text-align: center; padding: 12px 0; animation: successIn .32s cubic-bezier(.5,1.5,.4,1); }
@keyframes successIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
.success-icon    { width: 60px; height: 60px; border-radius: 50%; background: #EDFAF4; border: 2px solid #A7E3C9; display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 14px; }
.success-title   { font-size: 19px; font-weight: 700; color: var(--deep); margin-bottom: 8px; }
.success-sub     { font-size: 14px; color: var(--muted); line-height: 1.65; }
.success-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }

@media (prefers-reduced-motion: reduce) {
  .success-state { animation: none; }
}