/*==============================================================================
  AgendaZ — camada de identidade

  Traduz os tokens (tokens.css) para o contrato de classes que o sistema ja usa:
  Bootstrap 5.3 + componentes do template. Nenhuma view precisa mudar de markup
  para adotar a identidade nova — e por isso que a troca de layout nao quebra as
  145 telas existentes.

  Ordem de carga obrigatoria:
      1. core.css / core-dark.css        (Bootstrap + componentes do template)
      2. theme-default.css / -dark.css   (paleta do template)
      3. tokens.css                      (nossa identidade, light + dark)
      4. theme.css                       (este arquivo)
      5. shell.css                       (sidebar, topbar, area de conteudo)

  O tema escuro troca o build do template (core-dark.css) em vez de sobrescrever
  centenas de cores fixas: os componentes de terceiros ja vem corretos e nos so
  reaplicamos a identidade por cima, com os mesmos tokens.
==============================================================================*/

/*==============================================================================
  1. PONTE PARA O BOOTSTRAP

  Redefinir as variaveis --bs-* propaga a identidade para todo componente do
  Bootstrap e do template de uma vez — inclusive os que nao tem regra propria
  aqui embaixo.
==============================================================================*/

:root,
[data-theme='light'] {
    --bs-primary: var(--w-accent);
    --bs-primary-rgb: 19, 10, 120;
    --bs-secondary: var(--w-gray-500);
    --bs-secondary-rgb: 107, 116, 136;
    --bs-success: var(--w-emerald-600);
    --bs-success-rgb: 5, 150, 105;
    --bs-info: var(--w-blue-600);
    --bs-info-rgb: 37, 99, 235;
    --bs-warning: var(--w-amber-600);
    --bs-warning-rgb: 217, 119, 6;
    --bs-danger: var(--w-rose-600);
    --bs-danger-rgb: 225, 29, 72;

    --bs-body-bg: var(--w-canvas);
    --bs-body-color: var(--w-text-primary);
    --bs-body-font-family: var(--w-font-sans);
    --bs-body-font-size: var(--w-text-base);
    --bs-body-line-height: var(--w-leading-normal);
    --bs-border-color: var(--w-border);
    --bs-border-radius: var(--w-radius-md);
    --bs-border-radius-sm: var(--w-radius-sm);
    --bs-border-radius-lg: var(--w-radius-lg);
    --bs-border-radius-xl: var(--w-radius-xl);
    --bs-link-color: var(--w-text-link);
    --bs-link-color-rgb: 19, 10, 120;
    --bs-link-hover-color: var(--w-accent-hover);
    --bs-heading-color: var(--w-text-primary);
    --bs-secondary-color: var(--w-text-secondary);
    --bs-secondary-bg: var(--w-surface-sunken);
    --bs-tertiary-color: var(--w-text-tertiary);
    --bs-tertiary-bg: var(--w-surface-sunken);
    --bs-emphasis-color: var(--w-text-primary);

    /* Usadas pelo template para superficies de card/menu. */
    --bs-card-bg: var(--w-surface);
    --bs-paper-bg: var(--w-surface);
}

[data-theme='dark'] {
    --bs-primary: var(--w-accent);
    --bs-primary-rgb: 91, 72, 194;
    --bs-success: var(--w-emerald-400);
    --bs-success-rgb: 52, 211, 153;
    --bs-info: var(--w-blue-400);
    --bs-info-rgb: 96, 165, 250;
    --bs-warning: var(--w-amber-400);
    --bs-warning-rgb: 251, 191, 36;
    --bs-danger: var(--w-rose-400);
    --bs-danger-rgb: 251, 113, 133;

    --bs-body-bg: var(--w-canvas);
    --bs-body-color: var(--w-text-primary);
    --bs-border-color: var(--w-border);
    --bs-link-color: var(--w-text-link);
    --bs-link-color-rgb: 154, 142, 224;
    --bs-link-hover-color: var(--w-accent-hover);
    --bs-heading-color: var(--w-text-primary);
    --bs-secondary-color: var(--w-text-secondary);
    --bs-secondary-bg: var(--w-surface-sunken);
    --bs-tertiary-color: var(--w-text-tertiary);
    --bs-tertiary-bg: var(--w-surface-sunken);
    --bs-emphasis-color: var(--w-text-primary);
    --bs-card-bg: var(--w-surface);
    --bs-paper-bg: var(--w-surface);
}

/*==============================================================================
  2. BASE
==============================================================================*/

html {
    font-size: 16px;
}

body {
    background: var(--w-canvas) !important;
    color: var(--w-text-primary);
    font-family: var(--w-font-sans);
    font-size: var(--w-text-base);
    line-height: var(--w-leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--w-text-primary);
    font-weight: var(--w-weight-semibold);
    letter-spacing: -0.015em;
}

h1, .h1 { font-size: var(--w-text-3xl); }
h2, .h2 { font-size: var(--w-text-2xl); }
h3, .h3 { font-size: var(--w-text-xl); }
h4, .h4 { font-size: var(--w-text-lg); }
h5, .h5 { font-size: var(--w-text-md); }
h6, .h6 { font-size: var(--w-text-base); }

a {
    color: var(--w-text-link);
    text-decoration: none;
    transition: color var(--w-duration-fast) var(--w-ease-out);
}

a:hover { color: var(--w-accent-hover); }

hr { border-color: var(--w-border); opacity: 1; }

code, kbd, pre, samp, .w-mono { font-family: var(--w-font-mono); }

/* Textos utilitarios do Bootstrap re-ancorados nos tokens, senao ficam ilegiveis
   quando a superficie muda de tema. */
.text-muted,
.text-secondary,
.text-body-secondary { color: var(--w-text-secondary) !important; }

.text-primary { color: var(--w-accent) !important; }
.text-success { color: var(--w-success) !important; }
.text-danger  { color: var(--w-danger) !important; }
.text-warning { color: var(--w-warning) !important; }
.text-info    { color: var(--w-info) !important; }
.text-heading, .text-body { color: var(--w-text-primary) !important; }
.text-white   { color: #fff !important; }

.bg-body, .bg-white { background-color: var(--w-surface) !important; }
.bg-light { background-color: var(--w-surface-sunken) !important; }
.bg-primary { background-color: var(--w-accent) !important; }
.bg-success { background-color: var(--w-success) !important; }
.bg-danger  { background-color: var(--w-danger) !important; }
.bg-warning { background-color: var(--w-warning) !important; }
.bg-info    { background-color: var(--w-info) !important; }

.border { border-color: var(--w-border) !important; }
.border-top, .border-bottom, .border-start, .border-end { border-color: var(--w-border) !important; }

/* Barra de rolagem alinhada ao tema. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--w-scrollbar-thumb) var(--w-scrollbar-track);
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--w-scrollbar-track); }
*::-webkit-scrollbar-thumb {
    background: var(--w-scrollbar-thumb);
    border-radius: var(--w-radius-full);
    border: 2px solid transparent;
    background-clip: content-box;
}

::selection { background: var(--w-accent-subtle); color: var(--w-text-primary); }

:focus-visible {
    outline: 2px solid var(--w-border-focus);
    outline-offset: 2px;
}

/*==============================================================================
  3. BOTOES

  Um padrao unico para os ~500 botoes do sistema. Nenhuma view muda: as classes
  do Bootstrap (`btn-primary`, `btn-outline-danger`, `btn-label-info`...) e as
  proprias do template continuam valendo — o que muda e o desenho por tras.

  Duas decisoes explicam o resto:

  1. PESO. O azul da marca (#4a6cf7, o mesmo da landing, dos cards e do tour)
     substitui o roxo escuro nos botoes. Um botao cheio de tom escuro pesa na
     tela; em uma listagem com seis acoes por linha, pesa seis vezes.

  2. CONTORNO QUE NAO VIRA BLOCO. No hover, os contornados ganham um fundo em
     tinta leve em vez de encher de cor solida. O botao responde sem que a
     tela inteira mude de peso a cada passada do mouse.

  Os icones ficam: eles sao parte do significado do botao. O que o CSS faz e
  padronizar — mesmo tamanho, mesmo respiro, alinhados pela linha do texto —
  anulando as margens (`me-1`, `me-2`) que cada view escreveu a mao.
==============================================================================*/

:root {
    --w-btn-radius: 10px;
    --w-btn-height: 38px;
    --w-btn-pad: var(--w-space-4);
    --w-btn-gap: 8px;

    --w-btn-primary: #4a6cf7;
    --w-btn-primary-hover: #3a5ae0;
    --w-btn-primary-ring: rgba(74, 108, 247, 0.35);

    /* Texto sobre os solidos semanticos. No claro, `--w-success` e um verde
       fechado e o branco funciona; no escuro ele vira um verde claro e o branco
       deixa de ter contraste — por isso a cor do texto e um token, nao um #fff
       escrito na regra. */
    --w-btn-solid-fg: #ffffff;
}

:root[data-theme='dark'],
html.dark-style {
    --w-btn-primary: #5b7bff;
    --w-btn-primary-hover: #7191ff;
    --w-btn-primary-ring: rgba(91, 123, 255, 0.45);
    --w-btn-solid-fg: #101828;
}

.btn {
    --bs-btn-border-radius: var(--w-btn-radius);
    --bs-btn-font-weight: var(--w-weight-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--w-btn-gap);
    min-height: var(--w-btn-height);
    padding: 0 var(--w-btn-pad);
    border: 1px solid transparent;
    border-radius: var(--w-btn-radius);
    background-color: transparent;
    font-family: var(--w-font-sans);
    font-size: var(--w-text-base);
    font-weight: var(--w-weight-semibold);
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
    transition: background-color var(--w-duration-fast) var(--w-ease-out),
                border-color var(--w-duration-fast) var(--w-ease-out),
                color var(--w-duration-fast) var(--w-ease-out),
                box-shadow var(--w-duration-fast) var(--w-ease-out),
                transform var(--w-duration-instant) var(--w-ease-out);
}

/* O clique afunda; o hover levanta. Movimento de 1px — o suficiente para o
   botao responder, pouco o bastante para nao dancar numa tabela. */
.btn:not(:disabled):not(.disabled):hover { transform: translateY(-1px); }
.btn:not(:disabled):not(.disabled):active { transform: translateY(0); }

.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.btn:focus-visible {
    outline: 2px solid var(--w-btn-primary);
    outline-offset: 2px;
    box-shadow: none;
}

/*------------------------------------------------------------------------------
  Icones

  As views escrevem `<i class="fa fa-print me-2">` ou um `<svg>` solto. Aqui o
  espacamento passa a ser do `gap` do botao — as margens de cada view sao
  anuladas para nao somarem duas vezes — e o tamanho acompanha a fonte, entao um
  `btn-sm` ganha um icone menor sem ninguem escrever nada.
------------------------------------------------------------------------------*/

.btn > i,
.btn > svg,
.btn > .ti,
.btn > .fa,
.btn > .fas,
.btn > .far,
.btn > .fab {
    flex: none;
    margin: 0 !important;
    font-size: 1.05em;
    line-height: 1;
}

.btn > svg {
    width: 1.1em;
    height: 1.1em;
}

/* Botao so de icone: quadrado, sem respiro lateral sobrando. */
.btn-icon {
    width: var(--w-btn-height);
    min-width: var(--w-btn-height);
    padding: 0;
}

/*------------------------------------------------------------------------------
  Tamanhos
------------------------------------------------------------------------------*/

.btn-xs {
    --w-btn-height: 28px;
    --w-btn-pad: var(--w-space-2);
    --w-btn-gap: 5px;
    font-size: var(--w-text-xs);
}

.btn-sm {
    --w-btn-height: 32px;
    --w-btn-pad: var(--w-space-3);
    --w-btn-gap: 6px;
    font-size: var(--w-text-sm);
}

.btn-lg {
    --w-btn-height: 46px;
    --w-btn-pad: var(--w-space-6);
    --w-btn-gap: 10px;
    border-radius: calc(var(--w-btn-radius) + 2px);
    font-size: var(--w-text-md);
}

.btn-icon.btn-sm { width: 32px; min-width: 32px; }
.btn-icon.btn-xs { width: 28px; min-width: 28px; }

/*------------------------------------------------------------------------------
  Solidos

  A sombra e tingida com a propria cor do botao, bem aberta e bem fraca: da
  relevo sem a mancha cinza que uma sombra neutra deixa sobre fundo claro.
------------------------------------------------------------------------------*/

.btn-primary {
    background-color: var(--w-btn-primary);
    border-color: var(--w-btn-primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(16, 20, 30, 0.06), 0 6px 16px -8px var(--w-btn-primary-ring);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--w-btn-primary-hover) !important;
    border-color: var(--w-btn-primary-hover) !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(16, 20, 30, 0.08), 0 10px 22px -10px var(--w-btn-primary-ring);
}

.btn-success { background-color: var(--w-success); border-color: var(--w-success); color: var(--w-btn-solid-fg); }
.btn-danger  { background-color: var(--w-danger);  border-color: var(--w-danger);  color: var(--w-btn-solid-fg); }
.btn-warning { background-color: var(--w-warning); border-color: var(--w-warning); color: var(--w-btn-solid-fg); }
.btn-info    { background-color: var(--w-info);    border-color: var(--w-info);    color: var(--w-btn-solid-fg); }
.btn-dark    { background-color: var(--w-text-primary); border-color: var(--w-text-primary); color: var(--w-surface); }

.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-dark { box-shadow: 0 1px 2px rgba(16, 20, 30, 0.06); }

.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-danger:hover,  .btn-danger:focus,  .btn-danger:active,
.btn-warning:hover, .btn-warning:focus, .btn-warning:active,
.btn-info:hover,    .btn-info:focus,    .btn-info:active,
.btn-dark:hover,    .btn-dark:focus,    .btn-dark:active {
    filter: brightness(0.94);
    color: var(--w-btn-solid-fg);
    box-shadow: 0 2px 6px rgba(16, 20, 30, 0.12);
}

.btn-dark:hover { color: var(--w-surface); }

/* `btn-secondary` e o botao de apoio mais usado do sistema (46 telas): aqui ele
   e uma superficie neutra com contorno, nao um bloco cinza cheio. */
.btn-secondary,
.btn-light {
    background-color: var(--w-surface);
    border-color: var(--w-border);
    color: var(--w-text-primary);
    box-shadow: 0 1px 2px rgba(16, 20, 30, 0.04);
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active,
.btn-light:hover, .btn-light:focus, .btn-light:active {
    background-color: var(--w-surface-hover) !important;
    border-color: var(--w-border-strong) !important;
    color: var(--w-text-primary) !important;
}

/*------------------------------------------------------------------------------
  Contornados

  Hover em tinta leve, nao em cor cheia: passar o mouse sobre uma linha de
  tabela nao pode acender um bloco vermelho.
------------------------------------------------------------------------------*/

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark {
    background-color: transparent;
    box-shadow: none;
}

.btn-outline-primary { border-color: color-mix(in srgb, var(--w-btn-primary) 45%, transparent); color: var(--w-btn-primary); }
.btn-outline-success { border-color: color-mix(in srgb, var(--w-success) 45%, transparent); color: var(--w-success); }
.btn-outline-danger  { border-color: color-mix(in srgb, var(--w-danger) 45%, transparent);  color: var(--w-danger); }
.btn-outline-warning { border-color: color-mix(in srgb, var(--w-warning) 50%, transparent); color: var(--w-warning); }
.btn-outline-info    { border-color: color-mix(in srgb, var(--w-info) 45%, transparent);    color: var(--w-info); }
.btn-outline-secondary,
.btn-outline-dark    { border-color: var(--w-border-strong); color: var(--w-text-secondary); }

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    background-color: color-mix(in srgb, var(--w-btn-primary) 10%, transparent) !important;
    border-color: var(--w-btn-primary) !important;
    color: var(--w-btn-primary) !important;
}

.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active {
    background-color: color-mix(in srgb, var(--w-success) 12%, transparent) !important;
    border-color: var(--w-success) !important;
    color: var(--w-success) !important;
}

.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active {
    background-color: color-mix(in srgb, var(--w-danger) 12%, transparent) !important;
    border-color: var(--w-danger) !important;
    color: var(--w-danger) !important;
}

.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active {
    background-color: color-mix(in srgb, var(--w-warning) 14%, transparent) !important;
    border-color: var(--w-warning) !important;
    color: var(--w-warning) !important;
}

.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active {
    background-color: color-mix(in srgb, var(--w-info) 12%, transparent) !important;
    border-color: var(--w-info) !important;
    color: var(--w-info) !important;
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active,
.btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:active {
    background-color: var(--w-surface-hover) !important;
    border-color: var(--w-border-strong) !important;
    color: var(--w-text-primary) !important;
}

/* Navegador sem `color-mix`: contorno solido, sem tinta. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .btn-outline-primary { border-color: var(--w-btn-primary); }
    .btn-outline-primary:hover { background-color: var(--w-accent-subtle) !important; }
    .btn-outline-success { border-color: var(--w-success); }
    .btn-outline-danger  { border-color: var(--w-danger); }
    .btn-outline-warning { border-color: var(--w-warning); }
    .btn-outline-info    { border-color: var(--w-info); }
}

/*------------------------------------------------------------------------------
  Tinta cheia (`btn-label-*`) e texto puro (`btn-text-*`)

  Variantes proprias do template, mantidas porque as views ja as usam. Sao a
  forma mais leve de acao com cor: fundo em tinta, texto na cor semantica.
------------------------------------------------------------------------------*/

/* `!important` obrigatorio: o core.css do template declara estas mesmas classes
   com `!important` e cores fixas (o roxo antigo, um verde e um laranja que nao
   existem mais na paleta). Sem isso as tintas nunca seguem o tema — e no escuro
   apareciam como pastilhas claras sobre a pagina escura. */
.btn-label-primary {
    background-color: color-mix(in srgb, var(--w-btn-primary) 12%, transparent) !important;
    color: var(--w-btn-primary) !important;
    border-color: transparent !important;
}

.btn-label-primary:hover, .btn-label-primary:focus, .btn-label-primary:active {
    background-color: color-mix(in srgb, var(--w-btn-primary) 20%, transparent) !important;
    color: var(--w-btn-primary) !important;
}

.btn-label-success   { background-color: var(--w-success-bg) !important; color: var(--w-success-fg) !important; border-color: transparent !important; }
.btn-label-danger    { background-color: var(--w-danger-bg) !important;  color: var(--w-danger-fg) !important;  border-color: transparent !important; }
.btn-label-warning   { background-color: var(--w-warning-bg) !important; color: var(--w-warning-fg) !important; border-color: transparent !important; }
.btn-label-info      { background-color: var(--w-info-bg) !important;    color: var(--w-info-fg) !important;    border-color: transparent !important; }
.btn-label-secondary { background-color: var(--w-surface-sunken) !important; color: var(--w-text-secondary) !important; border-color: transparent !important; }

.btn-label-success:hover, .btn-label-success:focus, .btn-label-success:active,
.btn-label-danger:hover, .btn-label-danger:focus, .btn-label-danger:active,
.btn-label-warning:hover, .btn-label-warning:focus, .btn-label-warning:active,
.btn-label-info:hover, .btn-label-info:focus, .btn-label-info:active,
.btn-label-secondary:hover, .btn-label-secondary:focus, .btn-label-secondary:active {
    filter: brightness(0.96);
}

.btn-label-success:hover { background-color: var(--w-success-bg) !important; color: var(--w-success-fg) !important; }
.btn-label-danger:hover  { background-color: var(--w-danger-bg) !important;  color: var(--w-danger-fg) !important; }
.btn-label-warning:hover { background-color: var(--w-warning-bg) !important; color: var(--w-warning-fg) !important; }
.btn-label-info:hover    { background-color: var(--w-info-bg) !important;    color: var(--w-info-fg) !important; }
.btn-label-secondary:hover { background-color: var(--w-surface-sunken) !important; color: var(--w-text-primary) !important; }

.btn-text-primary   { background: transparent; color: var(--w-btn-primary); border-color: transparent; }
.btn-text-secondary { background: transparent; color: var(--w-text-secondary); border-color: transparent; }
.btn-text-danger    { background: transparent; color: var(--w-danger); border-color: transparent; }

.btn-text-primary:hover, .btn-text-secondary:hover, .btn-text-danger:hover {
    background-color: var(--w-surface-hover);
}

.btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--w-btn-primary);
    text-decoration: none;
}

.btn-link:hover { color: var(--w-btn-primary-hover); text-decoration: underline; }

/*------------------------------------------------------------------------------
  Grupos e barras de acao
------------------------------------------------------------------------------*/

/* Botoes colados: o raio fica so nas pontas do grupo. */
.btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group > .btn:not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn:hover { transform: none; z-index: 1; }

/* Linha de acoes: no celular os botoes empilham e ocupam a largura toda, para
   ninguem ter de mirar num alvo de 32px. */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--w-space-2);
}

@media (max-width: 575.98px) {
    .btn-row { flex-direction: column; align-items: stretch; }
    .btn-row > .btn { width: 100%; }
    .btn { --w-btn-height: 40px; }
}

/* Estado de envio, ligado pelo app.js. */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--w-text-secondary);
    animation: w-spin 0.6s linear infinite;
}

.btn-primary.is-loading::after,
.btn-danger.is-loading::after,
.btn-success.is-loading::after { color: #fff; }

@keyframes w-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn:hover,
    .btn:active { transform: none; transition: none; }
}

/*==============================================================================
  4. FORMULARIOS

  Vale para toda a aplicacao: as 145 telas usam .form-control/.form-select, entao
  a aparencia nova chega em todos os formularios sem tocar nas views.
==============================================================================*/

.form-label,
label.col-form-label,
.col-form-label {
    color: var(--w-text-secondary);
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-medium);
    margin-bottom: var(--w-space-2);
}

.form-control,
.form-select,
textarea.form-control,
.input-group-text {
    background-color: var(--w-surface);
    border: 1px solid var(--w-border-strong);
    border-radius: var(--w-radius-md);
    color: var(--w-text-primary);
    font-family: var(--w-font-sans);
    font-size: var(--w-text-base);
    line-height: var(--w-leading-normal);
    padding: 0.5rem var(--w-space-3);
    min-height: 38px;
    box-shadow: none;
    transition: border-color var(--w-duration-fast) var(--w-ease-out),
                box-shadow var(--w-duration-fast) var(--w-ease-out);
}

textarea.form-control { min-height: 92px; }

.form-control::placeholder { color: var(--w-text-disabled); opacity: 1; }

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: var(--w-text-tertiary); }

.form-control:focus,
.form-select:focus {
    background-color: var(--w-surface);
    border-color: var(--w-border-focus);
    box-shadow: var(--w-shadow-focus);
    color: var(--w-text-primary);
    outline: none;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--w-surface-sunken);
    color: var(--w-text-disabled);
    cursor: not-allowed;
}

.form-control-sm, .form-select-sm { min-height: 30px; padding: 0.25rem var(--w-space-2); font-size: var(--w-text-sm); }
.form-control-lg, .form-select-lg { min-height: 44px; font-size: var(--w-text-md); }

.input-group-text {
    background-color: var(--w-surface-sunken);
    color: var(--w-text-secondary);
}

.form-text { color: var(--w-text-tertiary); font-size: var(--w-text-sm); }

/* Validacao — as mesmas classes que o Laravel e o app.js aplicam. */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: var(--w-danger);
    background-image: none;
    padding-right: var(--w-space-3);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: var(--w-danger);
    box-shadow: 0 0 0 3px var(--w-danger-bg);
}

.invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback {
    color: var(--w-danger);
    font-size: var(--w-text-sm);
    margin-top: var(--w-space-1);
}

.form-control.is-valid,
.form-select.is-valid,
.was-validated .form-control:valid {
    border-color: var(--w-success);
    background-image: none;
}

.valid-feedback { color: var(--w-success); font-size: var(--w-text-sm); }

/* Checkbox e radio */
.form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.18rem;
    background-color: var(--w-surface);
    border: 1px solid var(--w-border-strong);
    border-radius: var(--w-radius-xs);
    transition: background-color var(--w-duration-fast) var(--w-ease-out),
                border-color var(--w-duration-fast) var(--w-ease-out);
}

.form-check-input[type='radio'] { border-radius: 50%; }

.form-check-input:checked {
    background-color: var(--w-accent);
    border-color: var(--w-accent);
}

.form-check-input:focus { border-color: var(--w-border-focus); box-shadow: var(--w-shadow-focus); }
.form-check-label { color: var(--w-text-primary); font-size: var(--w-text-base); }

.form-switch .form-check-input { width: 2.1rem; border-radius: var(--w-radius-full); }
.form-switch .form-check-input:checked { background-color: var(--w-accent); border-color: var(--w-accent); }

.form-range::-webkit-slider-thumb { background: var(--w-accent); }
.form-range::-moz-range-thumb { background: var(--w-accent); }

/* Campos travados em 100% de largura dentro de grids apertados no mobile. */
@media (max-width: 575.98px) {
    .form-control, .form-select { font-size: 16px; } /* evita zoom automatico no iOS */
}

/*==============================================================================
  5. CARDS
==============================================================================*/

.card {
    background-color: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    box-shadow: var(--w-shadow-xs);
    color: var(--w-text-primary);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--w-border-subtle);
    color: var(--w-text-primary);
    font-weight: var(--w-weight-semibold);
    padding: var(--w-space-4) var(--w-space-5);
}

.card-body { padding: var(--w-space-5); }

.card-footer {
    background-color: var(--w-surface-sunken);
    border-top: 1px solid var(--w-border-subtle);
    padding: var(--w-space-3) var(--w-space-5);
}

.card-title { color: var(--w-text-primary); font-size: var(--w-text-md); font-weight: var(--w-weight-semibold); }
.card-subtitle, .card-text small { color: var(--w-text-secondary); }

.list-group-item {
    background-color: var(--w-surface);
    border-color: var(--w-border-subtle);
    color: var(--w-text-primary);
}

.list-group-item-action:hover { background-color: var(--w-surface-hover); }

.accordion-item { background-color: var(--w-surface); border-color: var(--w-border); }
.accordion-button { background-color: var(--w-surface); color: var(--w-text-primary); }
.accordion-button:not(.collapsed) { background-color: var(--w-accent-subtle); color: var(--w-text-brand); box-shadow: none; }
.accordion-body { background-color: var(--w-surface); color: var(--w-text-primary); }

/*==============================================================================
  6. TABELAS
==============================================================================*/

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--w-text-primary);
    --bs-table-border-color: var(--w-border-subtle);
    --bs-table-striped-bg: var(--w-surface-sunken);
    --bs-table-striped-color: var(--w-text-primary);
    --bs-table-hover-bg: var(--w-surface-hover);
    --bs-table-hover-color: var(--w-text-primary);
    color: var(--w-text-primary);
    font-size: var(--w-text-base);
    margin-bottom: 0;
    vertical-align: middle;
}

.table > thead > tr > th,
.table > thead th {
    background-color: var(--w-surface-sunken);
    border-bottom: 1px solid var(--w-border);
    color: var(--w-text-secondary);
    font-size: var(--w-text-xs);
    font-weight: var(--w-weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: var(--w-space-3) var(--w-space-4);
    white-space: nowrap;
}

.table > tbody > tr > td {
    border-bottom: 1px solid var(--w-border-subtle);
    padding: var(--w-space-3) var(--w-space-4);
}

.table > tbody > tr:last-child > td { border-bottom: 0; }
.table > tbody > tr { transition: background-color var(--w-duration-instant) var(--w-ease-out); }
.table-hover > tbody > tr:hover > * { background-color: var(--w-surface-hover); color: var(--w-text-primary); }

/* Uma tabela larga rola dentro do proprio container — a pagina nunca rola na
   horizontal no celular. */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.card > .table-responsive,
.card > .table { border-radius: 0 0 var(--w-radius-lg) var(--w-radius-lg); }

/*==============================================================================
  7. MODAIS
==============================================================================*/

.modal-content {
    background-color: var(--w-surface-overlay);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-xl);
    box-shadow: var(--w-shadow-lg);
    color: var(--w-text-primary);
}

.modal-header {
    border-bottom: 1px solid var(--w-border-subtle);
    padding: var(--w-space-5);
}

.modal-title { font-size: var(--w-text-lg); font-weight: var(--w-weight-semibold); }
.modal-body { padding: var(--w-space-5); }

.modal-footer {
    border-top: 1px solid var(--w-border-subtle);
    padding: var(--w-space-4) var(--w-space-5);
    gap: var(--w-space-2);
}

.modal-footer > * { margin: 0; }
.modal-backdrop { background-color: rgba(9, 12, 20, 0.55); }
.modal-backdrop.show { opacity: 1; }

.btn-close {
    background-color: transparent;
    border-radius: var(--w-radius-sm);
    opacity: 0.6;
    transition: opacity var(--w-duration-fast) var(--w-ease-out),
                background-color var(--w-duration-fast) var(--w-ease-out);
}

.btn-close:hover { opacity: 1; background-color: var(--w-surface-hover); }
[data-theme='dark'] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

.offcanvas {
    background-color: var(--w-surface);
    color: var(--w-text-primary);
    border-color: var(--w-border);
}

/*==============================================================================
  8. DROPDOWNS, ABAS, PAGINACAO
==============================================================================*/

.dropdown-menu {
    background-color: var(--w-surface-overlay);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    box-shadow: var(--w-shadow-lg);
    color: var(--w-text-primary);
    padding: var(--w-space-2);
    min-width: 190px;
}

.dropdown-item {
    border-radius: var(--w-radius-sm);
    color: var(--w-text-secondary);
    font-size: var(--w-text-base);
    padding: var(--w-space-2) var(--w-space-3);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--w-surface-hover);
    color: var(--w-text-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--w-accent-subtle);
    color: var(--w-text-brand);
}

.dropdown-divider { border-color: var(--w-border-subtle); }
.dropdown-header { color: var(--w-text-tertiary); font-size: var(--w-text-2xs); letter-spacing: 0.06em; text-transform: uppercase; }

.nav-tabs { border-bottom: 1px solid var(--w-border); gap: var(--w-space-1); }

.nav-tabs .nav-link {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--w-text-secondary);
    font-weight: var(--w-weight-medium);
    padding: var(--w-space-3) var(--w-space-4);
}

.nav-tabs .nav-link:hover { color: var(--w-text-primary); border-bottom-color: var(--w-border-strong); }

.nav-tabs .nav-link.active {
    background: transparent;
    border-bottom-color: var(--w-accent);
    color: var(--w-text-brand);
}

.nav-pills .nav-link { border-radius: var(--w-radius-md); color: var(--w-text-secondary); }
.nav-pills .nav-link.active { background-color: var(--w-accent); color: var(--w-accent-contrast); }

.pagination { gap: var(--w-space-1); flex-wrap: wrap; }

.page-link {
    background-color: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md) !important;
    color: var(--w-text-secondary);
    font-size: var(--w-text-sm);
    min-width: 34px;
    padding: var(--w-space-2) var(--w-space-3);
    text-align: center;
    transition: all var(--w-duration-fast) var(--w-ease-out);
}

.page-link:hover { background-color: var(--w-surface-hover); border-color: var(--w-border-strong); color: var(--w-text-primary); }

.page-item.active .page-link {
    background-color: var(--w-accent);
    border-color: var(--w-accent);
    color: var(--w-accent-contrast);
}

.page-item.disabled .page-link { background-color: var(--w-surface-sunken); color: var(--w-text-disabled); }

.breadcrumb { font-size: var(--w-text-sm); margin-bottom: 0; }
.breadcrumb-item, .breadcrumb-item a { color: var(--w-text-secondary); }
.breadcrumb-item.active { color: var(--w-text-primary); }

/*==============================================================================
  9. ALERTAS, BADGES, PROGRESSO
==============================================================================*/

.alert {
    border: 1px solid transparent;
    border-radius: var(--w-radius-lg);
    font-size: var(--w-text-base);
    padding: var(--w-space-4) var(--w-space-5);
}

.alert-primary { background-color: var(--w-accent-subtle); border-color: transparent; color: var(--w-text-brand); }
.alert-success { background-color: var(--w-success-bg); border-color: transparent; color: var(--w-success-fg); }
.alert-danger  { background-color: var(--w-danger-bg);  border-color: transparent; color: var(--w-danger-fg); }
.alert-warning { background-color: var(--w-warning-bg); border-color: transparent; color: var(--w-warning-fg); }
.alert-info    { background-color: var(--w-info-bg);    border-color: transparent; color: var(--w-info-fg); }
.alert-secondary { background-color: var(--w-surface-sunken); border-color: transparent; color: var(--w-text-secondary); }

.badge {
    border-radius: var(--w-radius-full);
    font-size: var(--w-text-2xs);
    font-weight: var(--w-weight-semibold);
    letter-spacing: 0.03em;
    padding: 0.28em 0.7em;
}

.bg-label-primary { background-color: var(--w-accent-subtle) !important; color: var(--w-text-brand) !important; }
.bg-label-success { background-color: var(--w-success-bg) !important; color: var(--w-success-fg) !important; }
.bg-label-danger  { background-color: var(--w-danger-bg) !important;  color: var(--w-danger-fg) !important; }
.bg-label-warning { background-color: var(--w-warning-bg) !important; color: var(--w-warning-fg) !important; }
.bg-label-info    { background-color: var(--w-info-bg) !important;    color: var(--w-info-fg) !important; }
.bg-label-secondary { background-color: var(--w-surface-sunken) !important; color: var(--w-text-secondary) !important; }

.progress { background-color: var(--w-surface-sunken); border-radius: var(--w-radius-full); height: 8px; }
.progress-bar { background-color: var(--w-accent); border-radius: var(--w-radius-full); }

.spinner-border, .spinner-grow { color: var(--w-accent); }

.tooltip-inner {
    background-color: var(--w-gray-900);
    border-radius: var(--w-radius-sm);
    font-size: var(--w-text-xs);
    padding: var(--w-space-2) var(--w-space-3);
}

.popover {
    background-color: var(--w-surface-overlay);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    box-shadow: var(--w-shadow-lg);
}

.popover-body { color: var(--w-text-primary); }

/*==============================================================================
  10. BIBLIOTECAS DE TERCEIROS

  Select2 aparece em 55 telas: sem estas regras ele fica branco no tema escuro e
  com a borda antiga no claro.
==============================================================================*/

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--w-surface);
    border: 1px solid var(--w-border-strong) !important;
    border-radius: var(--w-radius-md) !important;
    min-height: 38px;
    color: var(--w-text-primary);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--w-text-primary);
    line-height: 36px;
    padding-left: var(--w-space-3);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--w-text-disabled); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--w-border-focus) !important;
    box-shadow: var(--w-shadow-focus);
}

.select2-dropdown {
    background-color: var(--w-surface-overlay);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    box-shadow: var(--w-shadow-lg);
    color: var(--w-text-primary);
}

.select2-container--default .select2-results__option {
    color: var(--w-text-secondary);
    padding: var(--w-space-2) var(--w-space-3);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background-color: var(--w-surface-hover) !important;
    color: var(--w-text-primary) !important;
}

.select2-container--default .select2-results__option[aria-selected='true'] {
    background-color: var(--w-accent-subtle) !important;
    color: var(--w-text-brand) !important;
}

.select2-search--dropdown .select2-search__field {
    background-color: var(--w-surface);
    border: 1px solid var(--w-border-strong);
    border-radius: var(--w-radius-sm);
    color: var(--w-text-primary);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--w-accent-subtle);
    border: 0;
    border-radius: var(--w-radius-sm);
    color: var(--w-text-brand);
}

/* DataTables */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--w-surface);
    border: 1px solid var(--w-border-strong);
    border-radius: var(--w-radius-md);
    color: var(--w-text-primary);
    padding: 0.35rem var(--w-space-3);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--w-text-secondary); font-size: var(--w-text-sm); }

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--w-radius-md) !important;
    color: var(--w-text-secondary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--w-accent) !important;
    border-color: var(--w-accent) !important;
    color: #fff !important;
}

/* Datepicker / daterangepicker / timepicker */
.datepicker,
.daterangepicker,
.ui-timepicker-wrapper {
    background-color: var(--w-surface-overlay);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    box-shadow: var(--w-shadow-lg);
    color: var(--w-text-primary);
}

.datepicker table tr td,
.datepicker table tr th,
.daterangepicker td,
.daterangepicker th { color: var(--w-text-primary); }

.datepicker table tr td.day:hover,
.daterangepicker td.available:hover { background-color: var(--w-surface-hover); }

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.daterangepicker td.active {
    background-color: var(--w-accent) !important;
    background-image: none !important;
    color: #fff !important;
}

.ui-timepicker-list li:hover,
.ui-timepicker-list li.ui-timepicker-selected { background: var(--w-accent); color: #fff; }

/* Tagify e Dropzone */
.tagify {
    background-color: var(--w-surface);
    border: 1px solid var(--w-border-strong);
    border-radius: var(--w-radius-md);
    --tag-bg: var(--w-accent-subtle);
    --tag-text-color: var(--w-text-brand);
}

.dropzone {
    background-color: var(--w-surface-sunken);
    border: 2px dashed var(--w-border-strong);
    border-radius: var(--w-radius-lg);
    color: var(--w-text-secondary);
}

.dropzone:hover { border-color: var(--w-accent); }

/* Toast do Bootstrap, para as telas que ja o usavam. */
.toast {
    background-color: var(--w-surface-overlay);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    box-shadow: var(--w-shadow-lg);
    color: var(--w-text-primary);
}

/*==============================================================================
  11. AJUSTES DE HERANCA DO TEMPLATE

  O template antigo deixou algumas superficies fixas em branco; sem estas
  regras elas apareceriam como manchas claras no tema escuro.
==============================================================================*/

.bg-menu-theme,
.bg-navbar-theme,
.bg-card,
.bg-body-tertiary { background-color: var(--w-surface) !important; }

.shadow-sm { box-shadow: var(--w-shadow-sm) !important; }
.shadow, .shadow-lg { box-shadow: var(--w-shadow-md) !important; }

.rounded { border-radius: var(--w-radius-md) !important; }
.rounded-3, .rounded-4 { border-radius: var(--w-radius-lg) !important; }
.rounded-pill { border-radius: var(--w-radius-full) !important; }

/* O template embute avatares e "cards de demonstracao" com fundo fixo. */
.avatar-initial {
    background-color: var(--w-accent-subtle);
    color: var(--w-text-brand);
    border-radius: var(--w-radius-md);
}

/*
 * Impede que qualquer tela force rolagem horizontal no celular.
 *
 * `overflow-x: hidden` nao pode entrar aqui: em html/body ele cria contexto de
 * rolagem e quebra `position: sticky` pagina afora. Quem contem a rolagem
 * horizontal e a area de conteudo (.w-main), no shell.css.
 */
html, body { max-width: 100%; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/*==============================================================================
  12. CALENDARIO (FullCalendar 6)

  O FullCalendar expoe as proprias variaveis CSS, entao a integracao com o tema
  e feita por elas em vez de sobrescrever regra por regra — e o que mantem o
  calendario correto no claro e no escuro.

  As celulas sao quadradas de proposito: com altura livre elas mudavam de
  tamanho conforme a quantidade de agendamentos do dia e a grade ficava
  irregular. Quadrado tambem e a forma que a pessoa reconhece como "calendario".
==============================================================================*/

.fc {
    --fc-border-color: var(--w-border);
    --fc-page-bg-color: var(--w-surface);
    --fc-neutral-bg-color: var(--w-surface-sunken);
    --fc-neutral-text-color: var(--w-text-secondary);
    --fc-today-bg-color: transparent;
    --fc-highlight-color: var(--w-accent-subtle);
    --fc-event-bg-color: var(--w-accent);
    --fc-event-border-color: transparent;
    --fc-event-text-color: #fff;
    --fc-list-event-hover-bg-color: var(--w-surface-hover);
    --fc-small-font-size: var(--w-text-xs);

    font-family: var(--w-font-sans);
    font-size: var(--w-text-base);
    color: var(--w-text-primary);
}

/*--- Barra de navegacao do calendario --------------------------------------*/

.fc .fc-toolbar.fc-header-toolbar {
    flex-wrap: wrap;
    gap: var(--w-space-3);
    margin-bottom: var(--w-space-5);
}

.fc .fc-toolbar-title {
    font-size: var(--w-text-xl);
    font-weight: var(--w-weight-bold);
    letter-spacing: -0.02em;
    text-transform: capitalize;
}

.fc .fc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 var(--w-space-3);
    border: 1px solid var(--w-border-strong);
    border-radius: var(--w-radius-md);
    background: var(--w-surface);
    color: var(--w-text-secondary);
    font-family: var(--w-font-sans);
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-medium);
    text-transform: none;
    box-shadow: none;
    transition: background-color var(--w-duration-fast) var(--w-ease-out),
                border-color var(--w-duration-fast) var(--w-ease-out),
                color var(--w-duration-fast) var(--w-ease-out);
}

.fc .fc-button:hover:not(:disabled) {
    background: var(--w-surface-hover);
    border-color: var(--w-border-strong);
    color: var(--w-text-primary);
}

.fc .fc-button:focus-visible { box-shadow: var(--w-shadow-focus); outline: none; }
.fc .fc-button:disabled { opacity: 0.5; }

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background: var(--w-accent);
    border-color: var(--w-accent);
    color: var(--w-accent-contrast);
}

.fc .fc-button-group { gap: var(--w-space-1); }
.fc .fc-button-group > .fc-button { border-radius: var(--w-radius-md) !important; }

/*--- Grade mensal ----------------------------------------------------------*/

.fc .fc-scrollgrid,
.fc .fc-scrollgrid-section > * { border-color: var(--w-border); }
.fc .fc-scrollgrid { border-radius: var(--w-radius-lg); overflow: hidden; }

.fc .fc-col-header-cell {
    padding: var(--w-space-3) 0;
    background: var(--w-surface-sunken);
    border-color: var(--w-border);
}

.fc .fc-col-header-cell-cushion {
    padding: 0;
    color: var(--w-text-secondary);
    font-size: var(--w-text-xs);
    font-weight: var(--w-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* A celula quadrada. `aspect-ratio` no frame funciona porque o calendario roda
   com `contentHeight: 'auto'` — a altura vem do conteudo, e aqui ela passa a
   vir da largura da coluna. */
.fc .fc-daygrid-day-frame {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    padding: var(--w-space-2);
    min-height: 0;
    border-radius: var(--w-radius-md);
    transition: background-color var(--w-duration-fast) var(--w-ease-out);
}

.fc .fc-daygrid-day { background: var(--w-surface); }
.fc .fc-daygrid-day:hover .fc-daygrid-day-frame { background: var(--w-surface-hover); cursor: pointer; }

.fc .fc-daygrid-day-top { flex-direction: row; justify-content: flex-end; }

.fc .fc-daygrid-day-number {
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0;
    border-radius: var(--w-radius-full);
    color: var(--w-text-secondary);
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-medium);
    font-variant-numeric: tabular-nums;
}

/* Dias de outro mes recuam, sem sumir. */
.fc .fc-day-other .fc-daygrid-day-frame { background: var(--w-surface-sunken); }
.fc .fc-day-other .fc-daygrid-day-number { color: var(--w-text-disabled); }

/* Hoje: marcado pelo numero, nao pela celula inteira — assim ele nao compete
   com a cor que indica "tem agendamento". */
.fc .fc-day-today .fc-daygrid-day-number {
    background: var(--w-accent);
    color: var(--w-accent-contrast);
    font-weight: var(--w-weight-bold);
}

.fc .fc-day-today .fc-daygrid-day-frame { box-shadow: inset 0 0 0 2px var(--w-accent); }

/* Fim de semana levemente recuado. */
.fc .fc-day-sat .fc-daygrid-day-frame,
.fc .fc-day-sun .fc-daygrid-day-frame { background: color-mix(in srgb, var(--w-surface-sunken) 45%, var(--w-surface)); }

/*
 * Dia com e sem agendamento.
 *
 * O FullCalendar nao marca a celula que tem eventos, so insere os eventos
 * dentro dela — `:has()` resolve isso sem precisar de JavaScript nenhum.
 */
.fc .fc-daygrid-day:has(.fc-event) .fc-daygrid-day-frame {
    background: var(--w-accent-subtle);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w-accent) 35%, transparent);
}

.fc .fc-day-today:has(.fc-event) .fc-daygrid-day-frame { box-shadow: inset 0 0 0 2px var(--w-accent); }

.fc .fc-daygrid-day-events { flex: 1; min-height: 0; overflow: hidden; margin-top: var(--w-space-1); }

/*--- Eventos ---------------------------------------------------------------*/

.fc .fc-daygrid-event {
    padding: 2px var(--w-space-2);
    border: 0;
    border-radius: var(--w-radius-full);
    font-size: var(--w-text-2xs);
    font-weight: var(--w-weight-semibold);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc .fc-daygrid-event:hover { filter: brightness(1.08); }
.fc .fc-daygrid-event-dot { display: none; }
.fc .fc-event-time { font-weight: var(--w-weight-medium); opacity: 0.9; }

.fc .fc-daygrid-more-link {
    display: block;
    margin-top: 2px;
    color: var(--w-text-brand);
    font-size: var(--w-text-2xs);
    font-weight: var(--w-weight-semibold);
}

/*--- Lista e semana --------------------------------------------------------*/

.fc .fc-list {
    border-color: var(--w-border);
    border-radius: var(--w-radius-lg);
    overflow: hidden;
}

.fc .fc-list-day-cushion { background: var(--w-surface-sunken); color: var(--w-text-primary); }
.fc .fc-list-event td { background: var(--w-surface); color: var(--w-text-primary); }
.fc .fc-list-event:hover td { background: var(--w-surface-hover); }
.fc .fc-list-empty { background: var(--w-surface); color: var(--w-text-secondary); }
.fc .fc-timegrid-slot { height: 2.2em; }
.fc .fc-timegrid-axis-cushion, .fc .fc-timegrid-slot-label-cushion { color: var(--w-text-tertiary); font-size: var(--w-text-xs); }

/* Legenda de status abaixo do calendario. */
.fc-legend { display: flex; flex-wrap: wrap; gap: var(--w-space-2); margin-top: var(--w-space-4); }

/*--- Celular ---------------------------------------------------------------*/

@media (max-width: 767.98px) {
    /* Numa largura de celular, a celula quadrada fica pequena demais para
       caber texto: volta a ser mais alta que larga e mostra so os indicadores. */
    .fc .fc-daygrid-day-frame { aspect-ratio: auto; min-height: 62px; padding: var(--w-space-1); }
    .fc .fc-toolbar.fc-header-toolbar { flex-direction: column; align-items: stretch; }
    .fc .fc-toolbar-chunk { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--w-space-1); }
    .fc .fc-toolbar-title { font-size: var(--w-text-lg); text-align: center; }
    .fc .fc-daygrid-day-number { min-width: 22px; height: 22px; font-size: var(--w-text-xs); }
    .fc .fc-daygrid-event { font-size: 9px; padding: 1px 4px; }
}

/*==============================================================================
  13. ASSINATURA

  A pagina de assinatura responde a tres perguntas, nesta ordem: qual e o plano,
  ate quando ele vale e o que da para fazer agora. O cartao segue essa ordem de
  cima para baixo, e a faixa colorida no topo repete a situacao que o selo diz
  em texto — cor e palavra dizendo a mesma coisa.
==============================================================================*/

.w-plan { position: relative; overflow: hidden; }

.w-plan::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--w-plan-color, var(--w-accent));
}

.w-plan--success { --w-plan-color: var(--w-success); }
.w-plan--warning { --w-plan-color: var(--w-warning); }
.w-plan--danger  { --w-plan-color: var(--w-danger); }

.w-plan__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--w-space-3);
    margin-bottom: var(--w-space-4);
}

.w-plan__label {
    display: block;
    font-size: var(--w-text-2xs);
    font-weight: var(--w-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--w-text-tertiary);
}

.w-plan__name { margin: var(--w-space-1) 0 0; font-size: var(--w-text-2xl); font-weight: var(--w-weight-bold); letter-spacing: -0.02em; }
.w-plan__status { flex: none; align-self: center; }

.w-plan__price { display: flex; align-items: baseline; gap: var(--w-space-2); margin-bottom: var(--w-space-6); }
.w-plan__price strong { font-size: var(--w-text-3xl); font-weight: var(--w-weight-bold); letter-spacing: -0.03em; }
.w-plan__price span { color: var(--w-text-secondary); text-transform: capitalize; }

.w-plan__period { margin-bottom: var(--w-space-6); }

.w-plan__period-top,
.w-plan__period-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--w-space-3);
    font-size: var(--w-text-sm);
    color: var(--w-text-secondary);
}

.w-plan__period-top { margin-bottom: var(--w-space-2); }
.w-plan__period-top strong { color: var(--w-text-primary); }
.w-plan__period-bottom { margin-top: var(--w-space-2); font-size: var(--w-text-xs); color: var(--w-text-tertiary); }
.w-plan__period .progress-bar { background: var(--w-plan-color, var(--w-accent)); }

.w-plan__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--w-space-4);
    margin: 0;
    padding-top: var(--w-space-5);
    border-top: 1px solid var(--w-border-subtle);
}

.w-plan__facts dt {
    font-size: var(--w-text-2xs);
    font-weight: var(--w-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--w-text-tertiary);
}

.w-plan__facts dd { margin: var(--w-space-1) 0 0; font-size: var(--w-text-md); font-weight: var(--w-weight-semibold); }

.w-plan__actions { display: flex; flex-wrap: wrap; gap: var(--w-space-2); justify-content: flex-end; }

/*------------------------------------------------------------------------------
  Seletor de planos (modal "Trocar de plano")

  Os planos inferiores ao atual continuam na tela, apagados e sem botao: some-los
  esconderia a escala e a pessoa nao saberia onde esta. O que muda de plano e um
  card so — mesma linguagem dos indicadores do sistema.
------------------------------------------------------------------------------*/

.w-plans__modal { border-radius: var(--w-radius-xl); }

.w-plans__modal .modal-header { align-items: flex-start; gap: var(--w-space-4); }

.w-plans__subtitle {
    margin: var(--w-space-1) 0 0;
    color: var(--w-text-secondary);
    font-size: var(--w-text-sm);
    max-width: 62ch;
}

/*------------------------------------------------------------------------------
  Modal ocupado

  Enquanto uma operacao esta em curso (`AZ.Modals.travar`), o modal precisa
  PARECER ocupado. Antes o unico sinal era o spinner dentro do botao: com envio
  nativo a pagina fica navegando, o modal continua identico na tela e da a
  impressao de ter travado sem motivo.

  A camada abaixo cobre o conteudo, bloqueia o clique e explica o que esta
  acontecendo — o texto sai de `data-az-busy-message`, o mesmo do aviso.
------------------------------------------------------------------------------*/

.modal[data-az-busy] .modal-content {
    position: relative;
}

.modal[data-az-busy] .modal-content > *:not(.az-busy-veil) {
    pointer-events: none;
    user-select: none;
}

.az-busy-veil {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--w-space-3);
    padding: var(--w-space-6);
    border-radius: inherit;
    background: color-mix(in srgb, var(--w-surface) 88%, transparent);
    backdrop-filter: blur(2px);
    text-align: center;
    cursor: progress;
}

.az-busy-veil__spinner {
    width: 34px;
    height: 34px;
    border: 3px solid color-mix(in srgb, var(--w-accent) 25%, transparent);
    border-top-color: var(--w-accent);
    border-radius: 50%;
    animation: az-busy-spin 700ms linear infinite;
}

.az-busy-veil__title {
    color: var(--w-text-primary);
    font-size: var(--w-text-md);
    font-weight: var(--w-weight-semibold);
}

.az-busy-veil__text {
    max-width: 42ch;
    color: var(--w-text-secondary);
    font-size: var(--w-text-sm);
    line-height: var(--w-leading-normal);
}

@keyframes az-busy-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .az-busy-veil__spinner { animation-duration: 2s; }
}

/* Chave Mensal / Anual.

   E o mesmo componente `.switch` da landing — a marcacao do template, que o
   core.css do sistema tambem carrega. Aqui so entram a moldura em pilula e as
   cores do design system; a mecanica (o `slider` absoluto que se posiciona logo
   apos o primeiro rotulo) fica com o template.

   O rotulo ativo ganha peso alem de cor: a cor sozinha nao diria qual dos dois
   esta valendo para quem nao distingue os tons. */
.w-plans__billing {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin: 0 auto var(--w-space-6);
    padding: var(--w-space-2) var(--w-space-5);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-full);
    background: var(--w-surface-sunken);
}

.w-plans__billing .switch { margin: 0; }

.w-plans__billing .switch-label {
    color: var(--w-text-secondary);
    font-size: var(--w-text-base);
    font-weight: var(--w-weight-medium);
    transition: color var(--w-duration-fast) var(--w-ease-out);
}

.w-plans__billing .switch-label.is-on {
    color: var(--w-text-primary);
    font-weight: var(--w-weight-bold);
}

.w-plans__billing .switch-toggle-slider {
    background: var(--w-border-strong, #cfd4e2) !important;
    box-shadow: none !important;
    color: transparent !important;
}

.w-plans__billing .switch-input:checked ~ .switch-toggle-slider {
    background: var(--w-accent) !important;
}

.w-plans__billing-off {
    display: inline-block;
    margin-left: var(--w-space-2);
    padding: 2px 10px;
    border-radius: var(--w-radius-full);
    background: color-mix(in srgb, var(--w-success) 15%, transparent);
    color: var(--w-success);
    font-size: var(--w-text-xs);
    font-weight: var(--w-weight-bold);
    white-space: nowrap;
}

/* `auto-fit` (nao `auto-fill`): aqui a linha tem de ser preenchida pelos planos
   existentes — tres planos ocupam a largura toda, lado a lado, como na pagina de
   planos. Trilha vazia sobrando deixaria os cards encolhidos num canto. */
.w-plans__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--w-space-4);
    align-items: stretch;
}

.w-plans__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--w-space-2);
    height: 100%;
    padding: var(--w-space-5);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    background: var(--w-surface);
    transition: border-color var(--w-duration-fast) var(--w-ease-out),
                box-shadow var(--w-duration-fast) var(--w-ease-out),
                transform var(--w-duration-fast) var(--w-ease-out);
}

.w-plans__card:not(.is-current):not(.is-locked):hover {
    transform: translateY(-2px);
    border-color: var(--w-accent);
    box-shadow: var(--w-shadow-md);
}

.w-plans__card.is-current {
    border-color: var(--w-accent);
    box-shadow: 0 0 0 1px var(--w-accent) inset;
}

/* Plano abaixo do atual: presente, legivel, e claramente fora de alcance. */
.w-plans__card.is-locked {
    background: var(--w-surface-sunken);
    opacity: 0.62;
}

.w-plans__flag {
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: var(--w-radius-full);
    background: color-mix(in srgb, var(--w-accent) 14%, transparent);
    color: var(--w-accent);
    font-size: var(--w-text-2xs);
    font-weight: var(--w-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.w-plans__flag--muted {
    background: var(--w-surface-hover);
    color: var(--w-text-secondary);
}

.w-plans__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--w-space-2);
    border: 1px solid color-mix(in srgb, var(--w-accent) 20%, transparent);
    border-radius: var(--w-radius-lg);
    background: color-mix(in srgb, var(--w-accent) 9%, transparent);
}

.w-plans__icon img { width: 32px; height: 32px; object-fit: contain; }

.w-plans__name {
    margin: 0;
    color: var(--w-text-secondary);
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-bold);
    letter-spacing: 0.06em;
}

.w-plans__price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 0;
    padding-bottom: var(--w-space-4);
    border-bottom: 1px solid var(--w-border-subtle);
}

.w-plans__amount {
    color: var(--w-text-primary);
    font-size: 2rem;
    font-weight: var(--w-weight-bold);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.w-plans__cycle { color: var(--w-text-secondary); font-size: var(--w-text-sm); }

.w-plans__desc { margin: 0; color: var(--w-text-secondary); font-size: var(--w-text-sm); }

.w-plans__features {
    list-style: none;
    margin: var(--w-space-2) 0 0;
    padding: 0;
    display: grid;
    gap: var(--w-space-2);
    flex: 1;
}

.w-plans__features li {
    position: relative;
    padding-left: 22px;
    color: var(--w-text-secondary);
    font-size: var(--w-text-sm);
    line-height: var(--w-leading-normal);
}

.w-plans__features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--w-accent) 16%, transparent)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a6cf7' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
}

.w-plans__foot { margin-top: var(--w-space-4); }

/* Passo 2 — pagamento */
.w-plans__back {
    margin-bottom: var(--w-space-4);
    padding: 0;
    border: 0;
    background: none;
    color: var(--w-accent);
    font-size: var(--w-text-sm);
    font-weight: var(--w-weight-medium);
    cursor: pointer;
}

.w-plans__back:hover { text-decoration: underline; }

.w-plans__summary {
    display: flex;
    align-items: baseline;
    gap: var(--w-space-3);
    margin-bottom: var(--w-space-5);
    padding: var(--w-space-4);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    background: var(--w-surface-sunken);
}

.w-plans__summary span { color: var(--w-text-secondary); font-size: var(--w-text-sm); }
.w-plans__summary strong { color: var(--w-text-primary); font-size: var(--w-text-lg); }
.w-plans__summary span:last-child { margin-left: auto; color: var(--w-text-primary); font-weight: var(--w-weight-semibold); }

@media (max-width: 575.98px) {
    .w-plans__grid { grid-template-columns: 1fr; gap: var(--w-space-3); }
    .w-plans__card { padding: var(--w-space-4); }
}

.w-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--w-space-3); }

.w-benefits li {
    display: flex;
    align-items: flex-start;
    gap: var(--w-space-3);
    font-size: var(--w-text-base);
    color: var(--w-text-secondary);
}

/* O visto e desenhado em CSS: uma lista de beneficios nao precisa de seis SVGs
   repetidos no HTML. */
.w-benefits li::before {
    content: '';
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--w-success-bg);
    background-image: linear-gradient(var(--w-success), var(--w-success));
    background-size: 8px 2px;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w-success) 30%, transparent);
}

/* Vazio: quando nao ha assinatura nenhuma. */
.w-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--w-space-3); padding: var(--w-space-10) var(--w-space-5); text-align: center; }
.w-empty__icon { width: 44px; height: 44px; color: var(--w-text-disabled); }
.w-empty__title { margin: 0; font-size: var(--w-text-lg); font-weight: var(--w-weight-semibold); }
.w-empty__text { margin: 0; max-width: 46ch; color: var(--w-text-secondary); }

@media (max-width: 575.98px) {
    .w-plan__actions { flex-direction: column; }
    .w-plan__actions .btn { width: 100%; }
    .w-plan__head { flex-direction: column; }
    .w-plan__status { align-self: flex-start; }
}