/* dot. laser — componentes no jeito do shadcn/ui, sem React e sem build.
   Carregue depois de tokens.css e antes do CSS da página. Tudo fica dentro de
   :where(), com especificidade zero: qualquer regra da página ganha sem briga
   de seletor. Cor vem de tokens.css; daqui saem forma, estado e elevação. */

/* Botão. Padrão = primário (inverso do fundo). Variantes pela classe que cada
   página já usa: .btn2/.ghost/.secondary = outline, .danger e .ok = contorno semântico. */
:where(button,.btn,.button){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 16px;border:1px solid transparent;border-radius:var(--radius-md);background-color:var(--text);color:var(--bg);font:inherit;font-size:14px;font-weight:500;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s}
:where(button,.btn,.button):hover{background-color:color-mix(in srgb,var(--text) 86%,var(--bg))}
:where(button,.btn,.button):where(.btn2,.ghost,.secondary){background-color:var(--card);color:var(--text);border-color:var(--line);box-shadow:var(--shadow-xs)}
:where(button,.btn,.button):where(.btn2,.ghost,.secondary):hover{background-color:var(--hover)}
:where(button,.btn,.button):where(.danger){background-color:transparent;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
:where(button,.btn,.button):where(.danger):hover{background-color:color-mix(in srgb,var(--danger) 10%,transparent)}
:where(button,.btn,.button):where(.ok){background-color:transparent;color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
:where(button,.btn,.button):where(.ok):hover{background-color:color-mix(in srgb,var(--ok) 10%,transparent)}
:where(button,.btn,.button):disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

/* Campo. 16px no celular para o iOS não dar zoom ao focar; 14px na mesa. */
:where(input:not([type=checkbox],[type=radio],[type=file],[type=range],[type=color]),select,textarea){min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-md);background-color:var(--field);color:var(--text);box-shadow:var(--shadow-xs);font:inherit;font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}
@media(min-width:768px){:where(input:not([type=checkbox],[type=radio],[type=file],[type=range],[type=color]),select,textarea){font-size:14px}}
:where(input,textarea)::placeholder{color:var(--muted);opacity:1}
:where(textarea){min-height:72px}
:where(select:not([multiple])){appearance:none;-webkit-appearance:none;padding-right:36px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
:where(input,select,textarea):disabled{opacity:.5;cursor:not-allowed}
:where(input[type=checkbox],input[type=radio]){accent-color:var(--text)}
/* Switch: o mesmo checkbox com class="switch" role="switch", então o JS segue lendo .checked.
   Fora do :where() de propósito: o input{width:100%} das páginas esmagaria o trilho. */
input.switch{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 auto;width:36px;height:20px;min-height:0;margin:0;padding:0;border:0;border-radius:999px;background-color:var(--line);box-shadow:var(--shadow-xs);cursor:pointer;transition:background-color .15s,box-shadow .15s}
input.switch::before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--card);box-shadow:var(--shadow-sm);transition:transform .15s}
input.switch:focus-visible{box-shadow:0 0 0 3px var(--ring)}
input.switch:checked{background-color:var(--text)}
input.switch:checked::before{transform:translateX(16px);background:var(--bg)}
html[data-theme="dark"] input.switch:not(:checked)::before{background:var(--muted)}
:where(input[type=file]){font-size:14px;color:var(--muted)}
:where(input[type=file])::file-selector-button{margin-right:10px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card);color:var(--text);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
:where(label){font-weight:500;color:var(--text)}

/* Foco: anel largo e translúcido no vermelho do laser, no lugar do contorno fino. */
:where(button,.btn,.button,input,select,textarea):focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
:where(input,select,textarea):focus-visible{border-color:var(--dot)}