/* mod-negocios.css — módulo Negocios (pipeline M1, contratos, wizard).
   Solo tokens del design system; animaciones solo transform/opacity. */

/* ── Pipeline kanban ─────────────────────────────────────────────────── */
.neg-pipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(230px, 1fr));
  gap: 14px;
  align-items: start;
}
@media (max-width: 1100px) {
  .neg-pipeline { grid-template-columns: repeat(2, minmax(230px, 1fr)); }
}
@media (max-width: 640px) {
  .neg-pipeline { grid-template-columns: 1fr; }
}

.neg-col {
  background: rgba(0, 0, 0, 0.03);
  border-radius: var(--radius-m);
  padding: 10px;
  min-height: 120px;
}
.neg-col-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px 10px;
}
.neg-col-titulo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.neg-col-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 1px 8px;
}
.neg-col-suma {
  margin-left: auto;
  font-size: 12px;
}
.neg-col-body { gap: 10px; display: flex; flex-direction: column; }
.neg-col-vacia { text-align: center; padding: 22px 8px; }

/* Cards del pipeline */
.neg-card {
  padding: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease;
}
.neg-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }
.neg-card:active { transform: scale(0.985); }
.neg-card-titulo { font-weight: 600; letter-spacing: -0.01em; }
.neg-card-pie { margin-top: 2px; }
.neg-card-total { font-weight: 700; font-size: 15px; }
.neg-card-acciones {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.neg-btn-rechazar:hover { color: var(--red); background: var(--red-soft); }

/* ── Tablas (contratos / todos) ──────────────────────────────────────── */
.neg-tabla-card { padding: 6px 4px; }

/* ── Detalle ─────────────────────────────────────────────────────────── */
.neg-det-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 24px;
}
@media (max-width: 720px) {
  .neg-det-grid { grid-template-columns: 1fr; }
}
.neg-det-seccion { margin-bottom: 22px; }
.neg-det-totalrow {
  padding: 12px 14px 0;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.neg-det-info > div { display: flex; flex-direction: column; gap: 1px; }
.neg-det-info b { font-size: 14px; letter-spacing: -0.01em; }
.neg-motivo {
  background: var(--red-soft);
  color: var(--red);
  border-radius: var(--radius-s);
  padding: 10px 12px;
  font-size: 13.5px;
}
.neg-servicio-row {
  background: var(--surface-2);
  border-radius: var(--radius-s);
  padding: 9px 12px;
}
.neg-servicio-row svg { color: var(--accent); flex: none; }

/* Timeline vertical de estados */
.neg-timeline { display: flex; flex-direction: column; }
.neg-tl-paso {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 0 0 18px 2px;
}
.neg-tl-paso:last-child { padding-bottom: 0; }
.neg-tl-paso::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 14px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.neg-tl-paso:last-child::before { display: none; }
.neg-tl-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--ink-3);
  margin-top: 3px;
  flex: none;
  z-index: 1;
}
.neg-tl-paso.done .neg-tl-dot {
  background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.neg-tl-paso.rojo .neg-tl-dot {
  background: var(--red);
  box-shadow: inset 0 0 0 2px var(--red);
}
.neg-tl-texto { display: flex; flex-direction: column; gap: 1px; }
.neg-tl-texto b { font-size: 13.5px; letter-spacing: -0.01em; }
.neg-tl-paso:not(.done) .neg-tl-texto b { color: var(--ink-3); font-weight: 600; }

/* ── Wizard de conversión (M1) ───────────────────────────────────────── */
.neg-wiz-progress { margin-bottom: 20px; }
.neg-wiz-bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.07);
  overflow: hidden;
}
.neg-wiz-bar span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--accent);
  transform: scaleX(0.5);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.neg-wiz-pasos {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
}
.neg-wiz-pasos .active { color: var(--accent); }

.neg-herencia {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-s);
  padding: 11px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.neg-herencia svg { flex: none; }
.neg-herencia b { font-weight: 700; }

.neg-wiz-resumen { display: flex; flex-direction: column; gap: 14px; }
.neg-wiz-datos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  background: var(--surface-2);
  border-radius: var(--radius-s);
  padding: 14px 16px;
}
@media (max-width: 560px) { .neg-wiz-datos { grid-template-columns: 1fr; } }
.neg-wiz-datos > div { display: flex; flex-direction: column; gap: 1px; }
.neg-wiz-datos b { font-size: 14px; letter-spacing: -0.01em; }
.neg-wiz-hint { margin-bottom: 14px; }

/* Fila editable de servicio (wizard) */
.neg-servicio-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 34px;
  gap: 10px;
  align-items: center;
}
.neg-servicio-per { gap: 6px; flex: none; }
.neg-servicio-per input { width: 74px; text-align: right; }

/* ── Formulario nuevo presupuesto ────────────────────────────────────── */
.neg-lineas-head,
.neg-linea-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 130px 104px 34px;
  gap: 10px;
  align-items: center;
}
@media (max-width: 640px) {
  .neg-lineas-head { display: none; }
  .neg-linea-row { grid-template-columns: minmax(0, 1fr) 70px 110px 34px; }
  .neg-linea-row .neg-linea-sub { display: none; }
}
.neg-lineas-head { padding: 0 2px; }
.neg-lineas-head .num, .neg-linea-sub { text-align: right; }
.neg-linea-row input[data-cantidad],
.neg-linea-row input[data-precio] { text-align: right; }
.neg-linea-sub { font-size: 13.5px; }

/* IPC informativo (renovación) */
.neg-ipc {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--amber-soft);
  color: var(--amber);
  border-radius: var(--radius-s);
  padding: 10px 13px;
  font-size: 13px;
}
.neg-ipc svg { flex: none; }
.neg-ipc .muted { color: inherit; opacity: 0.75; }