:root {
  --bg:           #0D0F12;
  --surface:      #111826;
  --surface-2:    #172031;
  --surface-3:    #1E2A3F;
  --texto:        #F1F1F2;
  --texto-muted:  #9AA1AC;
  --texto-fraco:  #6B7280;
  --azul:         #0851E6;
  --azul-hover:   #2A6FF0;
  --azul-claro:   #4A96F3;
  --azul-navy:    #02143A;
  --azul-botao:   #4A8AF4;
  --azul-botao-hover: #5B9BF5;
  --sobre-botao:  #0D0F12;
  --verde:        #25D366;
  --laranja:      #F59E0B;
  --vermelho:     #E5484D;
  --vermelho-texto: #F2777B;
  --laranja-texto: var(--laranja);
  --violeta:       #A78BFA;
  --violeta-texto: #C4B5FD;
  --sobre-violeta: #0D0F12;
  --sobre-azul:   #FFFFFF;
  --sobre-vermelho: var(--surface);
  --sobre-laranja:  var(--surface);
  --papel:        #FFFFFF;
  --tinta:        #0D0F12;
  --tinta-borda:  247, 247, 247;

  --campo:        var(--surface);
  --dentro:       var(--surface);
  --lado:         #0F1522;
  --item-ativo:   var(--surface-3);
  --veu:          rgba(5, 7, 10, 0.94);

  --tinta-fundo:  9%;
  --tinta-contorno: 28%;

  --st-ativo:     var(--verde);
  --st-reservado: var(--vermelho-texto);
  --st-expirado:  var(--texto-muted);
  --st-bloqueado: var(--vermelho-texto);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-texto:   "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-2xs:   0.6875rem;
  --fs-xs:    0.75rem;
  --fs-sm:    0.8125rem;
  --fs-md:    0.875rem;
  --fs-lg:    1rem;
  --fs-xl:    1.375rem;
  --fs-frase: 1.5rem;
  --fs-2xl:   1.875rem;
  --fs-3xl:   2.625rem;

  --radius:    14px;
  --radius-sm: 10px;
  --radius-xs: 7px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-texto); font-size: var(--fs-md); line-height: 1.5;
  background: var(--bg); color: var(--texto);
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.01em; }
.muted { color: var(--texto-muted); }
.fraco { color: var(--texto-fraco); }

.eyebrow {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.01em; color: var(--azul-claro);
}

.assinatura { --h: 18px; display: inline-flex; align-items: center; gap: calc(var(--h) * 0.6); color: var(--texto); }
.assinatura svg.wordmark { height: var(--h); width: auto; display: block; }
.assinatura .sep { width: 1px; height: var(--h); background: var(--border-forte); }
.assinatura .sub {
  font-family: var(--font-display); font-weight: 600; font-size: calc(var(--h) * 0.72);
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--azul-claro);
  margin-right: -0.32em;
  position: relative; top: calc(var(--h) * 0.0625);
}
.assinatura--md { --h: 24px; }
.assinatura--lg { --h: 34px; }
.endosso { font-size: var(--fs-xs); color: var(--texto-fraco); letter-spacing: 0.01em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md);
  white-space: nowrap; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-primario { background: var(--azul-botao); border-color: var(--azul-botao); color: var(--sobre-botao); }
.btn-primario:hover { background: var(--azul-botao-hover); border-color: var(--azul-botao-hover); }
.btn-secundario { background: transparent; border-color: var(--border-forte); color: var(--texto); }
.btn-secundario:hover { border-color: var(--azul); background-color: var(--azul-suave); }
.cor-laranja .btn-secundario, .aviso.cuidado .btn-secundario { border-color: var(--laranja); color: var(--laranja-texto); }
.cor-vermelho .btn-secundario, .aviso.alerta .btn-secundario { border-color: var(--vermelho); color: var(--vermelho-texto); }
.cor-laranja .btn-secundario:hover, .aviso.cuidado .btn-secundario:hover { border-color: var(--laranja); background-color: color-mix(in srgb, var(--laranja) 12%, transparent); }
.cor-vermelho .btn-secundario:hover, .aviso.alerta .btn-secundario:hover { border-color: var(--vermelho); background-color: color-mix(in srgb, var(--vermelho) 12%, transparent); }
.btn-fantasma { background: transparent; color: var(--texto-muted); padding-inline: 10px; }
.btn-fantasma:hover { color: var(--texto); background: var(--hover); }
.btn-perigo { background: transparent; border-color: var(--vermelho-borda); color: var(--vermelho-texto); }
.btn-perigo:hover { background: var(--vermelho-suave); border-color: var(--vermelho); }
.btn-sm { padding: 5px 11px; font-size: var(--fs-sm); border-radius: var(--radius-xs); }
.btn-lg { padding: 11px 22px; font-size: var(--fs-lg); }
.btn-bloco { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: var(--fs-sm); font-weight: 500; color: var(--texto-muted); }
.input {
  width: 100%; padding: 10px 12px; background: var(--campo);
  border: 1px solid var(--border-forte); border-radius: var(--radius-sm);
  color: var(--texto); font: inherit; font-size: var(--fs-md); transition: border-color .15s ease;
}
.input::placeholder { color: var(--texto-fraco); }
.input:focus { outline: none; border-color: var(--azul); }
.input.invalido { border-color: var(--vermelho); }
.campo .ajuda { font-size: var(--fs-xs); color: var(--texto-fraco); }
.campo .erro { font-size: var(--fs-xs); color: var(--vermelho-texto); }

.selo, .estado {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; border: 1px solid;
  background: color-mix(in srgb, currentColor var(--tinta-fundo), var(--base, var(--surface-2)));
  border-color: color-mix(in srgb, currentColor var(--tinta-contorno), var(--base, var(--surface-2)));
}
.estado {
  padding: 2px 9px; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.01em; white-space: nowrap;
}
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado.ativo     { color: var(--st-ativo); }
.estado.reservado { color: var(--st-reservado); }
.estado.expirado  { color: var(--st-expirado); }
.estado.bloqueado { color: var(--st-bloqueado); }
.estado.contagem::before { display: none; }
.estado.contagem .pt { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado.cheio { border-color: transparent; }
.estado.cheio.reservado { background: var(--laranja); color: var(--sobre-laranja); }
.estado.cheio.bloqueado { background: var(--vermelho); color: var(--sobre-vermelho); }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--texto-muted);
  letter-spacing: 0.01em; white-space: nowrap;
}
.tag.azul { color: var(--azul-claro); }

.aviso {
  display: flex; gap: 12px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--azul-claro);
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: var(--fs-md); color: var(--texto-muted);
}
.aviso strong { color: var(--texto); font-weight: 600; }
.aviso .acoes { margin-left: auto; display: flex; gap: 8px; flex: none; }
.aviso.atencao { border-left-color: var(--laranja); }
.aviso.perigo  { border-left-color: var(--vermelho); }
.aviso.ok      { border-left-color: var(--verde); }
.aviso.info { background: var(--azul-suave); border: 1px solid var(--azul); color: color-mix(in srgb, var(--azul-claro) 70%, var(--texto)); }
.aviso.info strong { color: var(--azul-claro); }
.aviso.cuidado { background: var(--laranja-suave); border: 1px solid var(--laranja); color: color-mix(in srgb, var(--laranja-texto) 75%, var(--texto)); }
.aviso.cuidado strong { color: var(--laranja-texto); }
.tema-claro .aviso.cuidado { color: var(--laranja-texto); }
.aviso.alerta { background: var(--vermelho-suave); border: 1px solid var(--vermelho); color: color-mix(in srgb, var(--vermelho-texto) 70%, var(--texto)); }
.aviso.alerta strong { color: var(--vermelho-texto); }
.aviso.conta { background: var(--violeta-suave); border: 1px solid var(--violeta); color: color-mix(in srgb, var(--violeta-texto) 72%, var(--texto)); }
.aviso.conta strong { color: var(--violeta-texto); }
.tema-claro .aviso.conta { color: var(--violeta-texto); }
.cor-violeta .btn-primario, .aviso.conta .btn-primario { background: var(--violeta); border-color: var(--violeta); color: var(--sobre-violeta); }
.cor-violeta .btn-primario:hover, .aviso.conta .btn-primario:hover { background: color-mix(in srgb, var(--violeta) 85%, var(--texto)); border-color: transparent; }
.cor-vermelho { --cor-corpo: color-mix(in srgb, var(--vermelho-texto) 70%, var(--texto)); --cor-forte: var(--vermelho-texto); }
.cor-laranja  { --cor-corpo: color-mix(in srgb, var(--laranja-texto) 75%, var(--texto)); --cor-forte: var(--laranja-texto); }
.tema-claro .cor-laranja { --cor-corpo: var(--laranja-texto); }
:is(.cor-vermelho, .cor-laranja) :is(.fraco, .muted, .rot, .det, .ciclo .data, .ass-conta, .quando span, .faixas-linha .t, .faixas-linha .falta, .faixas-linha .f, .ciclo .leg, .ciclo .hoje span) { color: var(--cor-corpo); }
:is(.cor-vermelho, .cor-laranja) :is(.ciclo .data b, .ciclo .hoje span b) { color: var(--cor-forte); }
:is(.cor-vermelho, .cor-laranja) .btn-fantasma { color: var(--cor-corpo); }
.cor-laranja .btn-primario, .aviso.cuidado .btn-primario { background: var(--laranja); border-color: var(--laranja); color: var(--sobre-laranja); }
.cor-vermelho .btn-primario, .aviso.alerta .btn-primario { background: var(--vermelho); border-color: var(--vermelho); color: var(--sobre-vermelho); }
.cor-laranja .btn-primario:hover, .aviso.cuidado .btn-primario:hover { background: color-mix(in srgb, var(--laranja) 75%, var(--laranja-texto)); border-color: transparent; }
.cor-vermelho .btn-primario:hover, .aviso.alerta .btn-primario:hover { background: color-mix(in srgb, var(--vermelho) 85%, var(--texto)); border-color: transparent; }

.painel-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.painel-card h3 { font-size: var(--fs-lg); }

.numero { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.numero small { font-size: var(--fs-lg); font-weight: 600; color: var(--texto-muted); letter-spacing: 0; }

.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.tabela th {
  text-align: left; font-weight: 600; font-size: var(--fs-sm); color: var(--texto-fraco);
  letter-spacing: 0.01em; padding: 10px; border-bottom: 1px solid var(--border-forte);
}
.tabela td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tabela tbody tr:hover td { background: var(--hover); }
.tabela tr.selecionada td { background: var(--azul-suave); }
.tabela .num { text-align: right; }

.check { appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 18px; height: 18px;
  display: inline-grid; place-content: center; background: var(--campo); border: 1.5px solid var(--border-forte);
  border-radius: 5px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.check::before { content: ""; width: 10px; height: 10px; background: #fff; transform: scale(0); transition: transform .12s ease;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.check:hover { border-color: var(--azul); }
.check:checked { background: var(--azul); border-color: var(--azul); }
.check:checked::before { transform: scale(1); }
.check:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.check[type=radio] { border-radius: 50%; }
.check[type=radio]::before { width: 8px; height: 8px; border-radius: 50%; background: var(--azul); clip-path: none; }
.check[type=radio]:checked { background: var(--campo); border-color: var(--azul); }

.copiar { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-muted); padding: 3px 6px; border-radius: 6px; background: none; border: 0; font-size: var(--fs-xs); }
.copiar:hover { color: var(--texto); background: var(--hover); }
.copiar svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.copiar.ok { color: var(--verde); }

.tema-claro .area, .tema-claro .modal, .tema-claro .flutuante {
  --bg:             #FFFFFF;
  --surface:        #F3F4F7;
  --surface-2:      #FFFFFF;
  --surface-3:      #E4E8EF;
  --texto:          #0D0F12;
  --texto-muted:    #4A5261;
  --texto-fraco:    #646B78;
  --azul-claro:     #0851E6;
  --azul-botao:     #2A6FF0;
  --azul-botao-hover: #0851E6;
  --sobre-botao:    var(--surface-2);
  --verde:          #11823F;
  --laranja:        #EA580C;
  --laranja-texto:  #C2410C;
  --vermelho-texto: #C2272D;
  --violeta:       #7C3AED;
  --violeta-texto: #6D28D9;
  --sobre-violeta: #FFFFFF;
  --sobre-laranja:  var(--surface);
  --sobre-vermelho: var(--surface);
  --tinta-borda:    13, 15, 18;
  --lado:           #E8EBF1;
  --item-ativo:     #FFFFFF;
  --campo:          #FFFFFF;
  --dentro:         #F3F4F7;
  --st-ativo:       var(--verde);
  --st-reservado:   var(--vermelho-texto);
  --st-expirado:    #5B6270;
  --st-bloqueado:   var(--vermelho-texto);
  color: var(--texto);
}

:root, .tema-claro .area, .tema-claro .modal, .tema-claro .flutuante {
  --border:         rgba(var(--tinta-borda), 0.08);
  --border-forte:   rgba(var(--tinta-borda), 0.14);
  --hover:          rgba(var(--tinta-borda), 0.035);
  --border-hover:   rgba(var(--tinta-borda), 0.24);
  --azul-suave:     color-mix(in srgb, var(--azul) 10%, transparent);
  --azul-borda:     color-mix(in srgb, var(--azul-claro) 40%, transparent);
  --vermelho-suave: color-mix(in srgb, var(--vermelho) 8%, transparent);
  --vermelho-borda: color-mix(in srgb, var(--vermelho) 40%, transparent);
  --laranja-suave:  color-mix(in srgb, var(--laranja) 10%, transparent);
  --violeta-suave:  color-mix(in srgb, var(--violeta) 10%, transparent);
}