/* ============================================================================
 * segmentos-rediseno.css — Botones de "Plazo" y "Pago inicial" más bonitos.
 *
 * Capa aditiva y reversible (quitar el <link>). Se carga DESPUÉS de los demás
 * CSS. Antes los no seleccionados eran solo texto suelto (no parecían botones);
 * ahora cada opción es un chip blanco con borde, tangible y clicable, en una
 * rejilla pareja; el seleccionado es una píldora índigo sólida con relieve.
 * Solo afecta a #d-plazos y #d-enganche (no toca el resto de .seg ni la lógica).
 * Paleta Señal: índigo #4F46E5 / #4338CA / claro #A5A1F7.
 * ==========================================================================*/

/* Carril plano: el protagonista son los chips, no la caja. Rejilla pareja. */
#d-plazos.seg,
#d-enganche.seg {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 8px !important;
  display: grid !important;
}
#d-plazos.seg  { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important; }
#d-enganche.seg { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important; }

/* Chip base (no seleccionado): blanco con borde, se ve y se siente clicable. */
#d-plazos.seg button,
#d-enganche.seg button {
  margin: 0 !important;
  min-height: 46px !important;
  padding: 11px 10px !important;
  flex: none !important;          /* anula el flex:1 1 28% del .seg--wrap */
  min-width: 0 !important;
  border: 1.5px solid var(--line, #E7E7E2) !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: #15171C !important;
  font-weight: 650 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(21, 23, 28, .05) !important;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease, color .14s ease !important;
}
html[data-theme="dark"] #d-plazos.seg button,
html[data-theme="dark"] #d-enganche.seg button {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  color: #e8ecf2 !important;
}

/* Hover (no seleccionado): se ilumina en índigo y se levanta un poco. */
#d-plazos.seg button:not([aria-pressed="true"]):not([disabled]):hover,
#d-enganche.seg button:not([aria-pressed="true"]):not([disabled]):hover {
  border-color: #A5A1F7 !important;
  background: #F3F2FE !important;
  color: #312E81 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px -9px rgba(79, 70, 229, .5) !important;
}
html[data-theme="dark"] #d-plazos.seg button:not([aria-pressed="true"]):not([disabled]):hover,
html[data-theme="dark"] #d-enganche.seg button:not([aria-pressed="true"]):not([disabled]):hover {
  background: rgba(99, 102, 241, .14) !important;
  color: #c7c3ff !important;
  border-color: rgba(124, 120, 240, .5) !important;
}

/* Seleccionado: píldora índigo sólida con relieve (gana a .seg--multi ink). */
#d-plazos.seg button[aria-pressed="true"],
#d-plazos.seg--multi button[aria-pressed="true"],
#d-enganche.seg button[aria-pressed="true"] {
  background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%) !important;
  border: 1.5px solid #4338CA !important;
  color: #fff !important;
  box-shadow: 0 10px 20px -10px rgba(67, 56, 202, .7), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  transform: none !important;
  text-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#d-plazos.seg button[aria-pressed="true"]:hover,
#d-enganche.seg button[aria-pressed="true"]:hover { filter: brightness(1.05) !important; }

/* Deshabilitado (plazo sin precio): apagado y sin relieve. */
#d-plazos.seg button[disabled],
#d-enganche.seg button[disabled] {
  opacity: .4 !important;
  box-shadow: none !important;
  background: #fff !important;
  transform: none !important;
}

/* "Personalizado": ocupa todo el ancho, debajo de los chips de porcentaje. */
#d-enganche .enganche-personalizado {
  grid-column: 1 / -1 !important;
  margin-top: 2px !important;
}

/* ===== Tipo de operación (Venta nueva / Renovación) — mismos chips ===== */
#d-tipo-venta .cliente__lbl { margin-bottom: 7px; }
#d-tventa-seg.seg {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
  gap: 8px !important; display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
}
#d-tventa-seg.seg button {
  margin: 0 !important; min-height: 46px !important; padding: 11px 10px !important; flex: none !important; min-width: 0 !important;
  border: 1.5px solid var(--line, #E7E7E2) !important; border-radius: 13px !important;
  background: #fff !important; color: #15171C !important; font-weight: 650 !important; font-size: 13.5px !important;
  box-shadow: 0 1px 2px rgba(21, 23, 28, .05) !important;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease, color .14s ease !important;
}
html[data-theme="dark"] #d-tventa-seg.seg button { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.14) !important; color: #e8ecf2 !important; }
#d-tventa-seg.seg button:not([aria-pressed="true"]):hover {
  border-color: #A5A1F7 !important; background: #F3F2FE !important; color: #312E81 !important;
  transform: translateY(-1px) !important; box-shadow: 0 6px 14px -9px rgba(79,70,229,.5) !important;
}
#d-tventa-seg.seg button[aria-pressed="true"] {
  background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%) !important; border: 1.5px solid #4338CA !important; color: #fff !important;
  box-shadow: 0 10px 20px -10px rgba(67,56,202,.7), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.tventa__reno { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.tventa__reno[hidden] { display: none !important; }   /* el display:flex no debe ganarle a [hidden] */
.tventa__lbl { font-size: 12px; color: var(--muted, #5F6673); font-weight: 600; }
#d-reno-num {
  width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 14px;
  border: 1.5px solid var(--line, #E7E7E2); border-radius: 11px; background: #fff; color: inherit;
}
#d-reno-num:focus { outline: none; border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,.13); }
html[data-theme="dark"] #d-reno-num { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }

/* ===== Historial: resumen (nuevas vs renovaciones) y etiqueta por cotización ===== */
.hist__resumen { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.hist__tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; line-height: 1; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.hist__tag--nueva { background: #EEF0F4; color: #5F6673; }
.hist__tag--reno { background: rgba(79, 70, 229, .1); color: #4338CA; }
.hist__eq .hist__tag { font-size: 10.5px; padding: 3px 8px; vertical-align: middle; margin-left: 4px; }
html[data-theme="dark"] .hist__tag--nueva { background: rgba(255,255,255,.08); color: #c3c9d2; }
html[data-theme="dark"] .hist__tag--reno { background: rgba(124,120,240,.2); color: #c7c3ff; }