/* =========================
   Switch triplo (Completo | Compilado | Original)
   + Modos de visualização (com :has)
   + Tooltip (data-hint) + affordance para clique (data-link)
   ========================= */

/* ----- Switch triplo (pill / segmented control) ----- */
.modo-switch{
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);

  /* trava tamanho/altura */
  height: 38px;
  padding: 4px;
  box-sizing: border-box;

  align-items: stretch;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  margin: 0 0 1.2rem 0;

  /* evita heranças esquisitas */
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.modo-switch input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.modo-switch label{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;

  /* ocupa a altura do switch */
  height: 100%;

  padding: 0 .9rem;
  cursor: pointer;
  user-select: none;
  border-radius: 999px;
  color: #475569;
  transition: color .15s ease;
}

.modo-switch label:hover{ color: #0f172a; }

.modo-switch .pill{
  position: absolute;

  /* encaixa no “miolo” do switch */
  top: 4px;
  bottom: 4px;
  left: 4px;

  width: calc((100% - 8px) / 3);
  border-radius: 999px;
  background: linear-gradient(180deg,#ffffff,#e5e7eb);
  box-shadow:
    0 2px 6px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  z-index: 1;
}

/* posições do pill: Completo (0), Compilado (1), Original (2) */
#modo-completo:checked ~ .pill  { transform: translateX(0%); }
#modo-compilado:checked ~ .pill { transform: translateX(100%); }
#modo-original:checked ~ .pill  { transform: translateX(200%); }

/* label ativo */
#modo-completo:checked + label,
#modo-compilado:checked + label,
#modo-original:checked + label{
  color: #0f172a;
  font-weight: 600;
}


/* ----- Estilo base dos marcadores ----- */
ins { text-decoration: underline; }
del, s { text-decoration: line-through; }


/* =========================
   Modos de visualização
   (IMPORTANTE: usa :has() porque os radios estão dentro do .modo-switch)
   ========================= */

/* ORIGINAL (antes da alteração):
   - esconde ins
   - mostra del/s como texto normal (sem tachado)
*/
.modo-switch:has(#modo-original:checked) ~ p ins,
.modo-switch:has(#modo-original:checked) ~ li ins,
.modo-switch:has(#modo-original:checked) ~ table ins{
  display: none;
}

.modo-switch:has(#modo-original:checked) ~ p del,
.modo-switch:has(#modo-original:checked) ~ p s,
.modo-switch:has(#modo-original:checked) ~ li del,
.modo-switch:has(#modo-original:checked) ~ li s,
.modo-switch:has(#modo-original:checked) ~ table del,
.modo-switch:has(#modo-original:checked) ~ table s{
  text-decoration: none;
  color: inherit;
}

/* COMPILADO (consolidado):
   - esconde del/s
   - mantém ins (e texto base)
*/
.modo-switch:has(#modo-compilado:checked) ~ p del,
.modo-switch:has(#modo-compilado:checked) ~ p s,
.modo-switch:has(#modo-compilado:checked) ~ li del,
.modo-switch:has(#modo-compilado:checked) ~ li s,
.modo-switch:has(#modo-compilado:checked) ~ table del,
.modo-switch:has(#modo-compilado:checked) ~ table s{
  display: none;
}

/* COMPLETO:
   - padrão (del tachado + ins sublinhado)
*/


/* =========================
   Tooltips (data-hint) + clique (data-link)
   ========================= */
ins[data-hint], del[data-hint], s[data-hint],
ins[data-link], del[data-link], s[data-link]{
  position: relative;
  cursor: pointer;
}

/* Tooltip */
ins[data-hint]:hover::after,
del[data-hint]:hover::after,
s[data-hint]:hover::after{
  content: attr(data-hint);
  position: absolute;
  left: 0;
  top: 100%;
  transform: translateY(8px);
  max-width: 420px;
  background: rgba(17,24,39,.95);
  color: #fff;
  padding: .45rem .6rem;
  border-radius: .5rem;
  font-size: .85rem;
  line-height: 1.2;
  z-index: 9999;
  white-space: normal;
}

ins[data-hint]:hover::before,
del[data-hint]:hover::before,
s[data-hint]:hover::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 100%;
  transform: translateY(2px);
  border: 6px solid transparent;
  border-bottom-color: rgba(17,24,39,.95);
}

/* Realce suave no hover (ajuda a “entender” que é clicável) */
ins[data-hint]:hover{ background: rgba(34,197,94,.12); }
del[data-hint]:hover, s[data-hint]:hover{ background: rgba(239,68,68,.10); }

/* Se quiser evitar seleção acidental ao clicar nos trechos:
   (descomente)
ins[data-link], del[data-link], s[data-link] { user-select: none; }
*/