/* Cards */
.card {
    background: var(--s-surface);
    color: var(--s-text);
    border: 1px solid var(--s-border-light);
    border-radius: var(--s-radius-lg);
    box-shadow: var(--s-shadow-sm);
    transition: box-shadow var(--s-transition);
    overflow: hidden;
}
.card:hover { box-shadow: var(--s-shadow); }
.card-header {
    background: transparent;
    color: var(--s-text);
    border-bottom: 1px solid var(--s-border-light);
    font-weight: 550;
    letter-spacing: -.01em;
    padding: .7rem 1rem;
}
.card-body { padding: 1rem; }

/* Forms */
.form-control, .form-select {
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius-sm);
    background: var(--s-surface);
    color: var(--s-text);
    transition: var(--s-transition);
    font-size: .875rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--s-accent);
    box-shadow: 0 0 0 3px var(--s-focus-ring);
    background: var(--s-surface);
    color: var(--s-text);
}
.form-control::placeholder { color: var(--s-text-muted); }
.form-control.faltando {
    border-color: var(--s-warning);
    background: var(--s-warning-light);
}
.form-label {
    font-weight: 500;
    color: var(--s-text-secondary);
    letter-spacing: -.01em;
}
.form-check-input { border-color: var(--s-border); border-radius: 4px; }
.form-check-input:checked {
    background-color: var(--s-accent);
    border-color: var(--s-accent);
}

/* Buttons */
.btn {
    border-radius: var(--s-radius-sm);
    font-weight: 500;
    font-size: .85rem;
    letter-spacing: -.01em;
    transition: var(--s-transition);
    padding: .4rem .85rem;
}
.btn .bi { color: currentColor; }
.btn-primary {
    background: var(--s-accent);
    border-color: var(--s-accent);
    color: var(--s-on-accent);
}
.btn-primary:hover {
    background: var(--s-accent-hover);
    border-color: var(--s-accent-hover);
    box-shadow: 0 2px 8px var(--s-focus-ring);
    color: var(--s-on-accent);
}
.btn-primary:focus-visible,
.btn-outline-primary:focus-visible,
.btn-outline-secondary:focus-visible,
.btn-outline-danger:focus-visible,
.btn-link:focus-visible,
.form-check-input:focus,
.page-link:focus,
.dropdown-item:focus {
    box-shadow: 0 0 0 3px var(--s-focus-ring);
    outline: 0;
}
.btn-link,
.btn-outline-primary {
    color: var(--s-accent);
}
.btn-link:hover,
.btn-outline-primary:hover {
    color: var(--s-on-accent);
    background: var(--s-accent);
    border-color: var(--s-accent);
}
.btn-outline-secondary {
    border-color: var(--s-border);
    color: var(--s-text-secondary);
}
.btn-outline-secondary:hover {
    background: var(--s-bg);
    border-color: var(--s-border);
    color: var(--s-text);
}
.btn-outline-danger {
    border-color: var(--s-danger);
    color: var(--s-danger);
}
.btn-outline-danger:hover {
    background: var(--s-danger-light);
    border-color: var(--s-danger);
    color: var(--s-danger);
}
.btn-secondary {
    background: var(--s-text-secondary);
    border-color: var(--s-text-secondary);
    color: var(--s-bg);
}
.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--s-text);
    border-color: var(--s-text);
    color: var(--s-bg);
}
.btn-success {
    background: var(--s-success);
    border-color: var(--s-success);
    color: var(--s-on-success);
}
.btn-success:hover,
.btn-success:focus {
    background: var(--s-success);
    border-color: var(--s-success);
    color: var(--s-on-success);
    filter: brightness(.94);
}
.btn-danger {
    background: var(--s-danger);
    border-color: var(--s-danger);
    color: var(--s-on-danger);
}
.btn-danger:hover,
.btn-danger:focus {
    background: var(--s-danger);
    border-color: var(--s-danger);
    color: var(--s-on-danger);
    filter: brightness(.94);
}
.btn-warning {
    background: var(--s-warning);
    border-color: var(--s-warning);
    color: var(--s-on-warning) !important;
}
.btn-warning:hover,
.btn-warning:focus {
    background: var(--s-warning);
    border-color: var(--s-warning);
    color: var(--s-on-warning) !important;
    filter: brightness(.94);
}
.btn.loading {
    opacity: .6;
    pointer-events: none;
}

/* Dark overrides */
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html[data-theme="light"] .btn-close { filter: none; opacity: .72; }
select option { background: var(--s-surface); color: var(--s-text); }

/* Tables */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--s-text);
    --bs-table-border-color: var(--s-border-light);
    --bs-table-hover-bg: var(--s-surface-hover);
    --bs-table-hover-color: var(--s-text);
    color: var(--s-text);
    font-size: .82rem;
}
.table > :not(caption) > * > * {
    background-color: var(--bs-table-bg);
    color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
    border-bottom-color: var(--bs-table-border-color);
}
.table > thead > tr > th {
    background: var(--s-bg);
    border-bottom: 2px solid var(--s-border);
    font-weight: 550;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--s-text-secondary);
    padding: .42rem .58rem;
}
.table > tbody > tr > td {
    padding: .34rem .58rem;
    border-bottom: 1px solid var(--s-border-light);
    vertical-align: middle;
    color: var(--s-text);
}
.table-primary {
    --bs-table-bg: var(--s-info-light);
    --bs-table-color: var(--s-text);
    --bs-table-border-color: var(--s-border-light);
}

/* Badges */
.badge {
    font-weight: 500;
    letter-spacing: .01em;
    border-radius: 5px;
    padding: .3em .55em;
}
.badge.bg-primary,
.badge.text-bg-primary { background: var(--s-accent) !important; color: var(--s-on-accent) !important; }
.badge.bg-success,
.badge.text-bg-success { background: var(--s-success) !important; color: var(--s-on-success) !important; }
.badge.bg-danger,
.badge.text-bg-danger { background: var(--s-danger) !important; color: var(--s-on-danger) !important; }
.badge.bg-warning,
.badge.text-bg-warning { background: var(--s-warning) !important; color: var(--s-on-warning) !important; }
.badge.bg-info,
.badge.text-bg-info { background: var(--s-info) !important; color: var(--s-on-info) !important; }
.badge.bg-secondary,
.badge.text-bg-secondary {
    background: var(--s-text-secondary) !important;
    color: var(--s-bg) !important;
}

/* Alerts */
.alert {
    border-radius: var(--s-radius-sm);
    border: none;
    font-size: .85rem;
}
.alert-danger {
    background: var(--s-danger-light);
    color: var(--s-danger);
    border-left: 3px solid var(--s-danger);
}
.alert-warning {
    background: var(--s-warning-light);
    color: var(--s-warning);
    border-left: 3px solid var(--s-warning);
}
.alert-info {
    background: var(--s-info-light);
    color: var(--s-info);
    border-left: 3px solid var(--s-info);
}
.alert-success {
    background: var(--s-success-light);
    color: var(--s-success);
    border-left: 3px solid var(--s-success);
}

/* Modais */
.modal-content {
    background: var(--s-surface);
    color: var(--s-text);
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius);
    box-shadow: var(--s-shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--s-border-light); }
.modal-footer { border-top: 1px solid var(--s-border-light); }

.border-warning { border-color: var(--s-warning) !important; }
.border-danger { border-color: var(--s-danger) !important; }
.border-success { border-color: var(--s-success) !important; }

code {
    color: var(--s-accent);
    background: var(--s-accent-light);
    border-radius: 4px;
    padding: .05rem .25rem;
}

/* Toasts */
.toast {
    border-radius: var(--s-radius) !important;
    box-shadow: var(--s-shadow-lg) !important;
}
.toast.text-bg-info,
.toast.text-bg-primary {
    background: var(--s-info) !important;
    color: var(--s-on-info) !important;
}
.toast.text-bg-success {
    background: var(--s-success) !important;
    color: var(--s-on-success) !important;
}
.toast.text-bg-warning {
    background: var(--s-warning) !important;
    color: var(--s-on-warning) !important;
}
.toast.text-bg-danger {
    background: var(--s-danger) !important;
    color: var(--s-on-danger) !important;
}
.toast-container {
    z-index: 1400;
}

/* Dropdown override */
.dropdown-menu { background: var(--s-surface); border-color: var(--s-border); }
.dropdown-item { color: var(--s-text-secondary); }
.dropdown-item:hover,
.dropdown-item:focus { background: var(--s-surface-hover); color: var(--s-text); }

.text-primary { color: var(--s-accent) !important; }
.text-info { color: var(--s-info) !important; }

.bg-primary, .text-bg-primary { background-color: var(--s-accent) !important; color: var(--s-on-accent) !important; }
.bg-success, .text-bg-success { background-color: var(--s-success) !important; color: var(--s-on-success) !important; }
.bg-danger, .text-bg-danger { background-color: var(--s-danger) !important; color: var(--s-on-danger) !important; }
.bg-warning, .text-bg-warning { background-color: var(--s-warning) !important; color: var(--s-on-warning) !important; }
.bg-info, .text-bg-info { background-color: var(--s-info) !important; color: var(--s-on-info) !important; }
.bg-secondary, .text-bg-secondary { background-color: var(--s-text-secondary) !important; color: var(--s-bg) !important; }

/* Mono para timecodes */
.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* Indicadores do HTMX (o próprio HTMX não injeta <style>: a CSP bloqueia) */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }


/* ═══ Design system Tracktonica (medidas do tracktonica.com, destaque no laranja do logo) ═══
   Pílula só no botão principal da tela (.btn-cta) e nos selos; botões de trabalho em 10px.
   Cartões sem sombra, borda de 1px; vidro só no que flutua (menus e diálogos). */

.btn {
    border-radius: var(--s-radius-sm);
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn-sm { min-height: 30px; }
.btn-primary:hover { box-shadow: none; }
.btn-outline-secondary {
    border-color: var(--s-border);
    color: var(--s-text);
}
.btn-outline-secondary:hover {
    background: var(--s-surface-hover);
    border-color: var(--s-text-muted);
    color: var(--s-text);
}

/* Botão principal da tela: igual ao "VER PLANOS" do site. */
.btn-cta {
    min-height: 48px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.card {
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius-lg);
    box-shadow: none;
}
.card:hover { box-shadow: none; }
.card-header {
    font-family: 'Outfit', 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--s-border-light);
}
.card-body { padding: 1.5rem; }
.card-footer {
    background: transparent;
    border-top: 1px solid var(--s-border-light);
}

.form-control,
.form-select {
    border-radius: var(--s-radius-sm);
    border-color: var(--s-border);
    background-color: var(--s-bg);
    color: var(--s-text);
}
.form-control:not(.form-control-sm),
.form-select:not(.form-select-sm) { min-height: 40px; }
.form-control:focus,
.form-select:focus {
    border-color: var(--s-accent);
    box-shadow: 0 0 0 3px var(--s-focus-ring);
}
.form-label {
    font-size: .82rem;
    color: var(--s-text-secondary);
    font-weight: 500;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--s-border-light);
}
.table > thead th {
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--s-text-muted);
    border-bottom: 1px solid var(--s-border);
    white-space: nowrap;
}
.table > tbody td { padding-top: .7rem; padding-bottom: .7rem; }
.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: var(--s-surface-hover); }

.badge {
    border-radius: 999px;
    font-weight: 500;
    padding: .3em .7em;
}

/* Vidro só no que flutua. */
.dropdown-menu,
.navbar .dropdown-menu {
    background: color-mix(in srgb, var(--s-surface) 88%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius);
}

.alert { border-radius: var(--s-radius); }


/* Cabeçalho de página (padrão para todas as telas): sobretítulo, título e ações à direita. */
.cabecalho-pagina {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.cabecalho-pagina h1,
.cabecalho-pagina h2 { margin: 0; }
.cabecalho-pagina .subtitulo { margin: .35rem 0 0; color: var(--s-text-muted); }
.cabecalho-pagina .acoes { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Selos: as classes de cor do Bootstrap viram selos suaves do design (sem cor sólida). */
.badge.bg-success, .badge.text-bg-success, .text-bg-success {
    background: var(--s-success-light) !important; color: var(--s-success) !important;
}
.badge.bg-danger, .badge.text-bg-danger, .text-bg-danger {
    background: var(--s-danger-light) !important; color: var(--s-danger) !important;
}
.badge.bg-warning, .badge.text-bg-warning, .text-bg-warning, .bg-warning.badge {
    background: var(--s-warning-light) !important; color: var(--s-warning) !important;
}
.badge.bg-info, .badge.bg-primary, .badge.text-bg-info, .badge.text-bg-primary {
    background: var(--s-info-light) !important; color: var(--s-info) !important;
}
.badge.bg-secondary, .badge.text-bg-secondary, .text-bg-secondary,
.badge.bg-light, .badge.text-bg-light, .text-bg-light, .badge.bg-dark {
    background: var(--s-surface-hover) !important; color: var(--s-text-secondary) !important;
}

/* Botões coloridos: só o laranja é cheio; os demais são contorno na cor do sinal. */
.btn-secondary {
    background: transparent; border-color: var(--s-border); color: var(--s-text);
}
.btn-secondary:hover, .btn-secondary:focus {
    background: var(--s-surface-hover); border-color: var(--s-text-muted); color: var(--s-text);
}
.btn-success, .btn-danger, .btn-warning, .btn-info {
    background: transparent;
}
.btn-success { border-color: var(--s-success); color: var(--s-success); }
.btn-danger { border-color: var(--s-danger); color: var(--s-danger); }
.btn-warning { border-color: var(--s-warning); color: var(--s-warning); }
.btn-info { border-color: var(--s-info); color: var(--s-info); }
.btn-success:hover { background: var(--s-success-light); border-color: var(--s-success); color: var(--s-success); }
.btn-danger:hover { background: var(--s-danger-light); border-color: var(--s-danger); color: var(--s-danger); }
.btn-warning:hover { background: var(--s-warning-light); border-color: var(--s-warning); color: var(--s-warning); }
.btn-info:hover { background: var(--s-info-light); border-color: var(--s-info); color: var(--s-info); }

.alert-info {
    background: var(--s-info-light); border-color: transparent; color: var(--s-text);
}
.alert-success {
    background: var(--s-success-light); border-color: transparent; color: var(--s-text);
}
.alert-warning {
    background: var(--s-warning-light); border-color: transparent; color: var(--s-text);
}
.alert-danger {
    background: var(--s-danger-light); border-color: transparent; color: var(--s-text);
}

.formulario-estreito { max-width: 560px; }
.sobretitulo a { color: inherit; text-decoration: none; }
.sobretitulo a:hover { color: var(--s-text); }

/* Contorno principal na cor da marca (o padrão do Bootstrap é azul). */
.btn-outline-primary {
    --bs-btn-color: var(--s-accent);
    --bs-btn-border-color: var(--s-accent);
    --bs-btn-hover-color: var(--s-on-accent);
    --bs-btn-hover-bg: var(--s-accent);
    --bs-btn-hover-border-color: var(--s-accent);
    --bs-btn-active-color: var(--s-on-accent);
    --bs-btn-active-bg: var(--s-accent-hover);
    --bs-btn-active-border-color: var(--s-accent-hover);
    --bs-btn-disabled-color: var(--s-accent);
    --bs-btn-disabled-border-color: var(--s-accent);
}
.btn-primary {
    --bs-btn-bg: var(--s-accent);
    --bs-btn-border-color: var(--s-accent);
    --bs-btn-color: var(--s-on-accent);
    --bs-btn-hover-bg: var(--s-accent-hover);
    --bs-btn-hover-border-color: var(--s-accent-hover);
    --bs-btn-hover-color: var(--s-on-accent);
    --bs-btn-active-bg: var(--s-accent-hover);
    --bs-btn-active-border-color: var(--s-accent-hover);
    --bs-btn-disabled-bg: var(--s-accent);
    --bs-btn-disabled-border-color: var(--s-accent);
}
.btn-link { --bs-btn-color: var(--s-accent); --bs-btn-hover-color: var(--s-accent-hover); }
.form-check-input:checked { background-color: var(--s-accent); border-color: var(--s-accent); }
.page-link { color: var(--s-accent); }
.page-item.active .page-link { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-on-accent); }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { color: var(--s-accent); }
.progress-bar { background-color: var(--s-accent); }
/* Cores de texto do Bootstrap seguem os tokens (o padrão usa as cores próprias dele). */
.text-primary { color: var(--s-accent) !important; }
.text-success { color: var(--s-success) !important; }
.text-danger { color: var(--s-danger) !important; }
.text-warning { color: var(--s-warning) !important; }
.text-info { color: var(--s-info) !important; }
.text-muted, .text-body-secondary { color: var(--s-text-muted) !important; }

/* Gráficos SVG e Barras de Participação */
.barra-participacao {
    width: 60px;
    height: 6px;
    background: var(--s-border-light);
    border-radius: 3px;
    overflow: hidden;
}
.grafico-svg-container {
    width: 100%;
    overflow-x: auto;
}
.grafico-historico-svg {
    width: 100%;
    min-width: 640px;
    height: 220px;
}
.grafico-barra {
    fill: var(--s-accent, #06b6d4);
    transition: opacity var(--s-transition);
}
.grafico-barra:hover {
    opacity: 0.85;
}
.grafico-barra-vazia {
    fill: var(--s-border-light, #334155);
}
.grafico-rotulo {
    fill: var(--s-text-secondary, #94a3b8);
    font-size: 11px;
    font-family: var(--font-sans);
    text-anchor: middle;
}
.grafico-valor {
    fill: var(--s-text, #f8fafc);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono, monospace);
    text-anchor: middle;
}
.grafico-linha-guia {
    stroke: var(--s-border-light, #334155);
    stroke-dasharray: 3 3;
    stroke-width: 1;
}
.col-posicao {
    width: 50px;
}