/* UH3.19 — Retiro automático de productos no publicados.
   El interruptor por proveedor (dentro del modal «Ya no publica» y como indicador en Importar Precios) y la caja
   con sus frenos. Aprobado en el mockup piloto-retiro.html. Solo tokens del sistema: nada de colores sueltos.
   Interruptor: el blanco de la perilla sobre el teal #00a48b es un icono/componente (mínimo 3:1), no texto. */

.pf-retiro-sw {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  font: 700 var(--pf-fs-base) var(--pf-font-ui);
  color: var(--pf-foreground);
  cursor: pointer;
  text-align: left;
}
.pf-retiro-sw i {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  border-radius: 99px;
  background: var(--pf-sup-500);
  transition: background var(--pf-t-fast);
}
.pf-retiro-sw i::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: left var(--pf-t-fast);
}
.pf-retiro-sw--on i { background: var(--pf-teal-600); }
.pf-retiro-sw--on i::after { left: 21px; }
.pf-retiro-sw:focus-visible { outline: 2px solid var(--pf-ring); outline-offset: 3px; border-radius: var(--pf-r-sm); }
/* El indicador de Importar Precios solo informa: no se pulsa. */
.pf-retiro-sw--fijo { cursor: default; font-size: var(--pf-fs-sm); }

.pf-retiro-caja {
  margin-top: var(--pf-s-4);
  padding: var(--pf-s-4);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  background: #fff;
}
.pf-retiro-caja__fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pf-s-4);
}
.pf-retiro-caja__nota { font-size: var(--pf-fs-sm); color: var(--pf-muted-foreground); }
.pf-retiro-caja p {
  margin: var(--pf-s-2) 0 0;
  font-size: var(--pf-fs-sm);
  color: var(--pf-muted-foreground);
}
.pf-retiro-frenos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pf-s-3);
  margin-top: var(--pf-s-3);
}
.pf-retiro-frenos label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--pf-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pf-muted-foreground);
}
.pf-retiro-frenos .ci-input { width: 100%; }

@media (max-width: 720px) {
  .pf-retiro-frenos { grid-template-columns: 1fr; }
}