/* Centrar el control */
.switcher{
  display:flex;
  justify-content:center;
  margin:16px 0;
}

/* Pastilla */
.segmented{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr; /* 2 opciones */
  gap:0;
  padding:4px;
  border:1px solid #d1d5db;
  border-radius:9999px;
  background:#f8fafc;
  width:max-content;                 /* ancho ajustado al contenido */
  box-shadow:0 1px 2px rgba(0,0,0,.06) inset;
}

/* Radios ocultos */
.segmented input{ display:none; }

/* Botones */
.segmented label{
  z-index:1;
  padding:10px 18px;
  border-radius:9999px;
  cursor:pointer;
  font-weight:600;
  user-select:none;
  text-align:center;
  color:#334155;
}

/* Pulgar que se mueve */
.segmented .thumb{
  position:absolute;
  top:4px; bottom:4px; left:4px;
  width:calc(50% - 8px);             /* mitad (2 opciones) */
  border-radius:9999px;
  background:#111827;
  transition:transform .22s ease;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
}

/* Estado seleccionado */
.segmented:has(#tab2:checked) .thumb{ transform:translateX(100%); }
.segmented:has(#tab1:checked) label[for="tab1"],
.segmented:has(#tab2:checked) label[for="tab2"]{ color:#fff; }

/* Dark mode (opcional) */
@media (prefers-color-scheme: dark){
  .segmented{ background:#0b0f19; border-color:#1f2937; }
  .segmented label{ color:#cbd5e1; }
}