/* ====== Base de acessibilidade ====== */
.lx-visually-hidden {
  position:absolute!important;
  width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important;
  overflow:hidden!important; clip:rect(0 0 0 0)!important;
  border:0!important;
}

/* ====== Tokens ====== */
:root {
  --lx-primary:#3b82f6;   /* azul elegante */
  --lx-success:#22c55e;
  --lx-danger:#ef4444;
  --lx-warning:#f59e0b;
  --lx-neutral:#64748b;

  --lx-bg:#fff;
  --lx-stroke:#cbd5e1;
  --lx-shadow:0 1px 0 rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.04) inset;

  --lx-size:18px;
  --lx-radius:6px;
  --lx-focus:0 0 0 3px rgba(59,130,246,.25);
  --lx-transition: .18s cubic-bezier(.2,.6,.2,1);
}

/* ====== Checkbox ====== */
.lx-ckb {
  --lx-color: var(--lx-primary);
  display:inline-flex; align-items:center; gap:.6em; cursor:pointer;
  user-select:none; -webkit-tap-highlight-color:transparent;
}
.lx-ckb-input { /* nativo, mas visível p/ leitores de tela */
  composes: lx-visually-hidden;
}
.lx-ckb-box {
  width:var(--lx-size); height:var(--lx-size);
  border:2px solid var(--lx-stroke);
  background:var(--lx-bg); border-radius:var(--lx-radius);
  box-shadow:var(--lx-shadow);
  position:relative; transition:all var(--lx-transition);
}
.lx-ckb:hover .lx-ckb-box { border-color:#b6c3d1 }
.lx-ckb-input:focus + .lx-ckb-box { box-shadow:var(--lx-focus) }

/* marcador (✓) */
.lx-ckb-box::after {
  content:"";
  position:absolute; inset:0;
  transform:scale(.5) rotate(10deg);
  opacity:0; transition:all var(--lx-transition);
  background:
    linear-gradient(currentColor,currentColor) left 6px top 9px/2px 6px no-repeat,
    linear-gradient(currentColor,currentColor) left 8px top 13px/8px 2px no-repeat;
  /* o traço e o “pé” do check */
}

/* estado marcado */
.lx-ckb-input:checked + .lx-ckb-box {
  border-color:var(--lx-color); background:var(--lx-color);
  color:#fff;
}
.lx-ckb-input:checked + .lx-ckb-box::after {
  transform:scale(1) rotate(-45deg);
  opacity:1;
}

/* estado indeterminado */
.lx-ckb-input:indeterminate + .lx-ckb-box {
  border-color:var(--lx-color); background:var(--lx-color);
}
.lx-ckb-input:indeterminate + .lx-ckb-box::after {
  content:""; opacity:1; transform:none;
  background: currentColor; height:2px; width:12px;
  position:absolute; top:50%; left:50%;
  translate:-50% -50%;
}

/* desabilitado */
.lx-ckb-input:disabled + .lx-ckb-box { background:#f8fafc; border-color:#e2e8f0; color:#94a3b8; box-shadow:none; }
.lx-ckb-input:disabled ~ .lx-ckb-label { color:#94a3b8; cursor:not-allowed }
.lx-ckb:has(.lx-ckb-input:disabled) { cursor:not-allowed } /* navegadores modernos */

/* ====== Radio ====== */
.lx-rdo { 
  --lx-color: var(--lx-primary);
  display:inline-flex; align-items:center; gap:.6em; cursor:pointer;
}
.lx-rdo-input { composes: lx-visually-hidden }
.lx-rdo-dot {
  width:var(--lx-size); height:var(--lx-size);
  border:2px solid var(--lx-stroke);
  background:var(--lx-bg); border-radius:50%;
  box-shadow:var(--lx-shadow);
  position:relative; transition:all var(--lx-transition);
}
.lx-rdo:hover .lx-rdo-dot { border-color:#b6c3d1 }
.lx-rdo-input:focus + .lx-rdo-dot { box-shadow:var(--lx-focus) }

.lx-rdo-dot::after {
  content:"";
  position:absolute; inset:3px;
  background:var(--lx-color);
  border-radius:50%; transform:scale(0);
  transition:transform var(--lx-transition);
}
.lx-rdo-input:checked + .lx-rdo-dot {
  border-color:var(--lx-color);
}
.lx-rdo-input:checked + .lx-rdo-dot::after { transform:scale(1) }

.lx-rdo-input:disabled + .lx-rdo-dot {
  background:#f8fafc; border-color:#e2e8f0; box-shadow:none;
}
.lx-rdo-input:disabled ~ .lx-rdo-label { color:#94a3b8; cursor:not-allowed }
.lx-rdo:has(.lx-rdo-input:disabled) { cursor:not-allowed }

/* ====== Modificadores de tamanho ====== */
.lx-sm { --lx-size:14px; --lx-radius:4px }
.lx-lg { --lx-size:22px; --lx-radius:8px }

/* ====== Paletas rápidas ====== */
.lx-primary { --lx-color:var(--lx-primary) }
.lx-success { --lx-color:var(--lx-success) }
.lx-danger {  --lx-color:var(--lx-danger)  }
.lx-warning { --lx-color:var(--lx-warning) }
.lx-neutral { --lx-color:var(--lx-neutral) }

/* ====== Grupo ====== */
.lx-group { display:flex; flex-wrap:wrap; gap:1rem }
.lx-inline .lx-ckb, .lx-inline .lx-rdo { margin-right:1rem }

/* ====== Switch (checkbox estilo “interruptor”) ====== */
.lx-switch {
  --lx-color:var(--lx-primary);
  display:inline-flex; align-items:center; gap:.6em; cursor:pointer;
}
.lx-switch-input { composes: lx-visually-hidden }
.lx-switch-track {
  width:calc(var(--lx-size) * 2);
  height:calc(var(--lx-size) * .95);
  background:#e2e8f0; border-radius:999px; position:relative;
  transition:all var(--lx-transition); box-shadow:var(--lx-shadow);
}
.lx-switch-thumb {
  position:absolute; top:2px; left:2px;
  width:calc(var(--lx-size) - 4px); height:calc(var(--lx-size) - 4px);
  background:#fff; border-radius:50%; transition:all var(--lx-transition);
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.lx-switch-input:checked + .lx-switch-track {
  background:var(--lx-color);
}
.lx-switch-input:checked + .lx-switch-track .lx-switch-thumb {
  left:calc(100% - var(--lx-size) + 2px);
}
.lx-switch-input:focus + .lx-switch-track { box-shadow:var(--lx-focus) }
.lx-switch-input:disabled + .lx-switch-track {
  background:#eaeef3; box-shadow:none;
}
.lx-switch-input:disabled ~ .lx-switch-label { color:#94a3b8; cursor:not-allowed }

/* esconda inputs só com CSS padrão */
.lx-ckb-input, .lx-rdo-input, .lx-switch-input {
  position:absolute!important;
  width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important;
  overflow:hidden!important; clip:rect(0 0 0 0)!important;
  white-space:nowrap!important; border:0!important;
}


/* ====== Variáveis com stroke e padding escaláveis ====== */
:root {
  --lx-size:18px;        /* tamanho base do controle */
  --lx-radius:6px;       /* raio para checkbox/switch */
  --lx-stroke-w:2px;     /* espessura da borda */
  --lx-pad:2px;          /* padding interno do switch */
}

/* Use as variáveis onde há bordas/paddings */
.lx-ckb-box, .lx-rdo-dot {
  border: var(--lx-stroke-w) solid var(--lx-stroke);
}
.lx-switch-track {
  height: calc(var(--lx-size) * .95);
}
.lx-switch-thumb {
  top: var(--lx-pad);
  left: var(--lx-pad);
  width: calc(var(--lx-size) - (var(--lx-pad) * 2));
  height: calc(var(--lx-size) - (var(--lx-pad) * 2));
}
.lx-switch-input:checked + .lx-switch-track .lx-switch-thumb {
  left: calc(100% - var(--lx-size) + var(--lx-pad));
}

/* ====== Escalas de tamanho (aplique na <label>) ====== */
/* XS: compacto de tabela/listas densas */
.lx-size-xs { --lx-size:14px; --lx-radius:4px; --lx-stroke-w:2px; --lx-pad:2px }

/* SM: levemente menor que o padrão */
.lx-size-sm { --lx-size:16px; --lx-radius:5px; --lx-stroke-w:2px; --lx-pad:2px }

/* MD: padrão (se quiser deixar explícito) */
.lx-size-md { --lx-size:18px; --lx-radius:6px; --lx-stroke-w:2px; --lx-pad:2px }

/* LG: destaque em formulários principais */
.lx-size-lg { --lx-size:22px; --lx-radius:8px; --lx-stroke-w:2px; --lx-pad:3px }

/* XL: uso touch/mobile, configurações */
.lx-size-xl { --lx-size:26px; --lx-radius:10px; --lx-stroke-w:3px; --lx-pad:3px }

/* 2XL: acessibilidade e telas de TV/Kiosk */
.lx-size-2xl { --lx-size:32px; --lx-radius:12px; --lx-stroke-w:3px; --lx-pad:4px }

/* Opcional: densidade do rótulo (espaçamento texto-ícone) */
.lx-dense   { gap:.4em }
.lx-comfy   { gap:.7em }  /* default ~.6em */
.lx-spacious { gap:1em }