/* Autobelle — sistema visual Componentes compartilhados pelas telas. A paleta é a mesma da tela de
   Controle de Estoque, para que os dois lados do sistema pareçam a mesma coisa. Organização:
   tokens → base → layout → componentes → utilitários. */

:root {
    /* Marca — azul royal; brand.css adapta os destaques ao tema escuro */
    --plate: #2563EB;
    --plate-dark: #1D4ED8;
    --plate-press: #1E40AF;
    --plate-soft: #EFF6FF;
    --plate-line: #BFDBFE;
    --on-plate: #FFFFFF;

    /* Tinta — escala fria, nunca preto puro */
    --ink: #111827;            /* títulos e texto principal */
    --ink-2: #374151;          /* texto secundário */
    --ink-3: #4B5563;          /* rótulos, legendas, ícones */
    --ink-4: #4B5563;          /* placeholders */

    /* Superfícies — fundo off-white, cartão branco puro (profundidade) */
    --bg: #F3F4F6;
    --surface: #FFFFFF;
    --surface-2: #F3F4F6;
    --surface-3: #E5E7EB;
    --sidebar-bg: #FFFFFF;
    --line: #D1D5DB;
    --line-soft: #E5E7EB;

    /* Semânticas — fundo translúcido, texto escuro da mesma família */
    --ok: #0F7A4E;      --ok-soft: #E8F6EF;
    --danger: #C0392F;  --danger-soft: #FDEDEB;
    --warn: #875C08;    --warn-soft: #FDF3E0;
    --info: #1F6FB2;    --info-soft: #EAF3FA;

    /* Compatibilidade com os nomes antigos usados nos templates */
    --primary-color: #2563EB;
    --primary-hover: #1D4ED8;
    --primary-press: #1E40AF;
    --text-color: var(--ink);
    --bg-color: var(--bg);
    --card-bg: var(--surface);
    --border-color: var(--line);
    --danger-color: var(--danger);
    --success-color: var(--ok);
    --warning-color: var(--warn);
    /* Estes três eram usados em 8 lugares dos templates e não existiam: `var(--bg-secondary)` sem
   valor deixava os painéis do formulário de venda SEM fundo, e `var(--success)`/`var(--warning)`
   apagavam a barra colorida dos cartões de relatório. */
    --bg-secondary: var(--surface-2);
    --success: var(--ok);
    --warning: var(--warn);
    --info-color: var(--info);

    /* Espaçamento — escala de 8px */
    /* Toda margem e padding sai daqui. Antes havia 22, 26, 9, 5 e 3px convivendo: sem um ritmo comum,
   o olho não agrupa o que é do mesmo bloco (Lei da Proximidade) e a tela parece montada aos
   pedaços. */
    --s-1: 4px;    /* meio-passo, só para ajuste ótico */
    --s-2: 8px;
    --s-3: 16px;
    --s-4: 24px;
    --s-5: 32px;
    --s-6: 48px;

    /* Forma — raios curtos: quanto maior o elemento, mais discreto o canto */
    --r-xl: 10px;
    --r-lg: 8px;
    --r-md: 8px;
    --r-sm: 6px;
    --r-pill: 999px;

    /* Profundidade vem da sombra, não de borda escura. As bordas ficam quase invisíveis e servem só
   para definir o limite em telas claras. */
    --shadow-sm: 0 1px 2px rgba(22, 32, 46, .04);
    --shadow: 0 1px 2px rgba(22, 32, 46, .04), 0 1px 3px rgba(22, 32, 46, .05);
    --shadow-md: 0 2px 4px rgba(22, 32, 46, .04), 0 8px 20px -6px rgba(22, 32, 46, .10);
    --shadow-lg: 0 12px 34px -10px rgba(22, 32, 46, .18);

    /* Anel de foco: um só, usado por todo elemento interativo */
    --ring: 0 0 0 3px rgba(37, 99, 235, .22);
    --ring-danger: 0 0 0 3px rgba(192, 57, 47, .20);

    --sidebar-w: 240px;
    --s-half: 12px;
    --text-xs: .75rem;
    --text-sm: .8125rem;
    --text-base: .875rem;
    --text-lg: 1rem;
    --text-xl: 1.375rem;
    --control-line: #6B7280;
    --control-height: 40px;
    --motion-fast: 120ms;

    /* Tipografia */
    --font: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Consolas', monospace;
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    background-color: var(--bg);
    color: var(--ink);
    line-height: 1.55;
    font-size: 14.5px;
    letter-spacing: -.006em;
    display: flex;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.018em; color: var(--ink); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.0625rem; }
h3 { font-size: .9375rem; }
h4 { font-size: .875rem; }

/* Contraste pelo peso e pelo tom, não pelo corpo da letra. */
small, .text-muted { color: var(--ink-2); font-size: .8125rem; }

a { color: var(--plate); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Immediate feedback without delaying or replacing native navigation. */
:where(a, button, summary, input, select, textarea, label) { touch-action: manipulation; }
a[data-navigation-pending] { cursor: progress; outline: 2px solid var(--plate); outline-offset: 2px; }
a[data-navigation-pending] > .ui-icon { opacity: .55; }
:where(.ds-button, .ds-icon-button, .home-summary-action):active { transform: translateY(1px); }

/* Foco visível e consistente — acessibilidade e navegação por teclado. */
:focus-visible {
    outline: 2px solid var(--plate);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Números, placas e valores ganham a fonte monoespaçada: alinham em coluna e evitam a leitura
   errada de 0/O e 1/l numa planilha de veículos. */
.mono, .num, td.num, .valor { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Layout — menu lateral claro */

#menu-lateral {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--line);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    padding: var(--s-4) var(--s-2) var(--s-2);
    position: fixed;
    height: 100%;
    overflow-y: auto;
    left: 0;
    top: 0;
    z-index: 1000;
}

#menu-lateral h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--s-4);
    padding: 0 var(--s-2);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.02em;
}

/* Marca: quadrado azul-placa com o ícone dentro. */
#menu-lateral h2 i {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--primary-color);
    color: var(--on-plate);
    border-radius: var(--r-md);
    font-size: .95rem;
}

.modulo { margin-bottom: var(--s-4); }

.modulo h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 0 8px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--ink-3);
}

.modulo h3 i { font-size: .75rem; opacity: .75; }

#menu-lateral ul { list-style: none; padding: 0; margin: 0; }

#menu-lateral ul a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    margin-bottom: 1px;
    border-radius: var(--r-md);
    color: var(--ink-2);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: background-color .12s, color .12s;
}

#menu-lateral ul a i { width: 17px; text-align: center; font-size: .85rem; opacity: .8; }

#menu-lateral ul a:hover { background: var(--surface-2); color: var(--ink); }

#menu-lateral ul a.active {
    background: var(--plate-soft);
    color: var(--plate);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--plate-line);
}

#menu-lateral ul a.active i { opacity: 1; }

.user-info {
    margin-top: auto;
    padding: 14px 10px 4px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-info p {
    margin: 0;
    font-weight: 600;
    font-size: .85rem;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-info p i { color: var(--ink-3); font-size: 1.35rem; }

.user-info a, .logout-btn {
    margin-left: auto;
    color: var(--ink-3);
    text-decoration: none;
    font-size: .78rem;
    font-weight: 600;
    padding: 6px 9px;
    border-radius: var(--r-sm);
    white-space: nowrap;
}

.user-info a:hover, .logout-btn:hover { background: var(--danger-soft); color: var(--danger); }

/* Conteúdo */

main {
    flex: 1;
    margin-left: var(--sidebar-w);
    padding: var(--s-5) var(--s-5) var(--s-6);
    width: calc(100% - var(--sidebar-w));
    min-width: 0;
}

main > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-bottom: var(--s-5);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--line);
}

main > header h1 {
    font-size: 1.5rem;
    color: var(--ink);
    margin: 0;
    letter-spacing: -.025em;
}

main > header .actions { display: flex; gap: 9px; flex-wrap: wrap; }

/* Botão de menu — só aparece no celular (ver bloco responsivo). */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--r-md);
    cursor: pointer;
    font-size: 1rem;
}

.nav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(12, 21, 36, .45);
    z-index: 999;
}

/* Foco de teclado em links, botões e campos. */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--r-sm);
}

.btn-danger:focus-visible, .bt.danger:focus-visible { box-shadow: var(--ring-danger); }

/* Botões */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 8px var(--s-3);
    border-radius: var(--r-md);
    font-family: inherit;
    font-weight: 500;
    font-size: .8125rem;
    letter-spacing: -.005em;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .13s ease, border-color .13s ease,
                color .13s ease, box-shadow .13s ease;
    white-space: nowrap;
}

.btn:hover { text-decoration: none; }
.btn:active { box-shadow: inset 0 1px 2px rgba(22, 32, 46, .12); }
.btn i { margin: 0; }
.btn:disabled, .btn.disabled { cursor: not-allowed; }

.btn-primary   { background: var(--primary-color); color: var(--on-plate); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-hover); color: var(--on-plate); }
.btn-primary:active { background: var(--primary-press); }

.btn-secondary { background: var(--surface); color: var(--ink-2); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); }

.btn-danger    { background: var(--surface); color: var(--danger); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-danger:hover { background: var(--danger-soft); border-color: transparent; color: var(--danger); }

.btn-success   { background: var(--surface); color: var(--ok); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-success:hover { background: var(--ok-soft); border-color: transparent; color: var(--ok); }

.btn-info      { background: var(--surface); color: var(--info); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-info:hover { background: var(--info-soft); border-color: transparent; color: var(--info); }

.btn-warning   { background: var(--surface); color: var(--warn); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-warning:hover { background: var(--warn-soft); border-color: transparent; color: var(--warn); }

.btn-outline-primary { background: transparent; color: var(--plate); border-color: var(--plate); }
.btn-outline-primary:hover { background: var(--primary-color); color: var(--on-plate); }

.btn-outline-secondary { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn-outline-secondary:hover { background: var(--surface-2); color: var(--ink); }

.btn-ghost, .btn.ghost { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn-ghost:hover, .btn.ghost:hover { background: var(--surface-2); color: var(--ink); }

.btn-lg { padding: 11px var(--s-4); font-size: .875rem; border-radius: var(--r-lg); }
.btn-sm { padding: 5px 10px; font-size: .78rem; border-radius: var(--r-sm); }
.btn-xs { padding: 3px var(--s-2); font-size: .72rem; border-radius: var(--r-sm); }
.btn-block { width: 100%; }

/* Cartões */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
    margin-bottom: var(--s-4);
    overflow: hidden;
}

/* O cartão sobe de leve quando é clicável — o resto fica parado. */
a.card:hover, .card.clicavel:hover { box-shadow: var(--shadow-md); border-color: var(--line); }

/* Padding próprio: antes, conteúdo solto dentro de `.card` (sem `.card-body`) encostava na borda —
   era o caso do cartão de boas-vindas do painel. Só alcança filhos diretos, então nada dentro de
   `.card-header` ou `.card-body` é afetado. */
.card > h2, .card > h3, .card > h4,
.card > p, .card > ul, .card > ol {
    padding-left: var(--s-4);
    padding-right: var(--s-4);
}
.card > h2:first-child, .card > h3:first-child,
.card > h4:first-child, .card > p:first-child { margin-top: var(--s-4); }
.card > h2:last-child,  .card > h3:last-child,
.card > p:last-child,   .card > ul:last-child,
.card > ol:last-child { margin-bottom: var(--s-4); }

.card-header {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.card-header h2, .card-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.card-body { padding: var(--s-4); }

/* Formulários */

.form-group { margin-bottom: var(--s-3); }

label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--ink-2);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.form-control, .form-select, input[type="text"], input[type="number"],
input[type="email"], input[type="password"], input[type="date"],
input[type="tel"], input[type="url"], select, textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--control-line);
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: .875rem;
    color: var(--ink);
    background: var(--surface);
    border-radius: var(--r-md);
    transition: border-color .13s ease, box-shadow .13s ease;
}

.form-control:hover, select:hover, textarea:hover { border-color: var(--control-hover-line); }

.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--focus-color);
    outline-offset: 1px;
    border-color: var(--plate);
    box-shadow: var(--ring);
}

.form-control::placeholder, textarea::placeholder { color: var(--ink-4); }

.form-control[readonly], input[readonly] { background: var(--surface-2); color: var(--ink-2); }

textarea, textarea.form-control { min-height: 96px; resize: vertical; line-height: 1.5; }

.form-control-sm, .form-select-sm { padding: 6px 10px; font-size: .82rem; border-radius: var(--r-sm); }

select, .form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5768' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8.5L12 15L18.5 8.5M10 19H14'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 34px;
}

/* Campos de dinheiro, placa e quilometragem em monoespaçada. */
input[name*="valor"], input[name*="preco"], input[name*="placa"],
input[name*="km"], input[name*="cpf"], input[name*="chassi"] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Caixas de seleção: o rótulo fica ao lado, não em cima. */
.form-check, .checkbox-inline {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
}

.form-check input, .checkbox-inline input,
input[type="checkbox"], input[type="radio"] {
    width: 17px;
    height: 17px;
    margin: 0;
    flex: none;
    accent-color: var(--plate);
    cursor: pointer;
}

.form-check label, .checkbox-inline label, .form-check-label {
    margin: 0;
    font-size: .87rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    cursor: pointer;
}

.form-section-title {
    margin: 26px 0 14px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
    color: var(--ink);
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: 9px;
}

.form-section-title i { color: var(--plate); font-size: .85rem; }
.form-section-title:first-child { margin-top: 0; }

.form-actions {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.form-row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.form-row > * { padding: 0 8px; }

.helptext, .help, .form-text {
    display: block;
    margin-top: 5px;
    font-size: .78rem;
    color: var(--ink-3);
}

.errorlist {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    font-size: .78rem;
    color: var(--danger);
    font-weight: 600;
}

.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }

/* Grade */

.row { display: flex; flex-wrap: wrap; margin: 0 -9px; }

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5,
.col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10,
.col-md-11, .col-md-12 { padding: 0 9px; min-width: 0; }

.col-md-12 { width: 100%; }
.col-md-11 { width: 91.666%; }
.col-md-10 { width: 83.333%; }
.col-md-9  { width: 75%; }
.col-md-8  { width: 66.666%; }
.col-md-7  { width: 58.333%; }
.col-md-6  { width: 50%; }
.col-md-5  { width: 41.666%; }
.col-md-4  { width: 33.333%; }
.col-md-3  { width: 25%; }
.col-md-2  { width: 16.666%; }  /* faltava: 11 usos ficavam sem largura */
.col-md-1  { width: 8.333%; }

.flex-container { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* Tabelas */

.table-responsive, .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table { width: 100%; border-collapse: collapse; margin-bottom: 0; font-size: .875rem; }

/* Cabeçalho sem fundo cinza e sem linha pesada: o peso da fonte e o tom já separam o cabeçalho do
   corpo. Menos traço, mesma leitura. */
th {
    text-align: left;
    padding: var(--s-2) var(--s-3);
    background: transparent;
    font-weight: 600;
    color: var(--ink-3);
    border-bottom: 1px solid var(--line);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
}

/* Divisória só entre linhas, na cor mais clara — a grade inteira desenhada competia com o
   conteúdo. */
td {
    padding: var(--s-3);
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
    vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background-color .1s ease; }
tbody tr:hover td { background: var(--surface-2); }
td .mono, td.num { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Etiquetas de estado */

.status-badge, .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px var(--s-2);
    border-radius: var(--r-sm);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .02em;
    white-space: nowrap;
    /* Fundo translúcido + texto escuro da própria família da cor: legível sobre branco e sobre cinza,
   sem precisar de borda. */
    background: var(--surface-2);
    color: var(--ink-2);
    border: 1px solid transparent;
}

.status-disponivel, .status-confirmada, .status-comprado,
.badge-success, .badge-disponivel {
    background: var(--ok-soft); color: var(--ok); border-color: transparent;
}

.status-vendido, .status-entregue, .status-recusado,
.badge-danger, .badge-vendido {
    background: var(--danger-soft); color: var(--danger); border-color: transparent;
}

.status-preparacao, .status-proposta, .status-analise, .status-oferta,
.badge-warning {
    background: var(--warn-soft); color: var(--warn); border-color: transparent;
}

.badge-info { background: var(--info-soft); color: var(--info); border-color: transparent; }

/* Avisos */

.messages { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }

.alert {
    padding: 12px 16px;
    border-radius: var(--r-md);
    font-size: .875rem;
    font-weight: 500;
    border: 1px solid transparent;
    border-left-width: 3px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success { background: var(--ok-soft);     color: var(--ok); border-left-color: var(--ok); }
.alert-error,
.alert-danger  { background: var(--danger-soft); color: var(--danger); border-left-color: var(--danger); }
.alert-warning { background: var(--warn-soft);   color: var(--warn); border-left-color: var(--warn); }
.alert-info,
.alert-debug   { background: var(--info-soft);   color: var(--info); border-left-color: var(--info); }

/* Painel — cartões de indicador */

/* Grade que quebra linha: antes era `flex` sem `wrap` e os cartões espremiam em tela estreita em
   vez de descer para a linha de baixo. */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

.dashboard-grid > a { text-decoration: none; color: inherit; display: block; }

.stat-card {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 18px 20px;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 15px;
    height: 100%;
    transition: box-shadow .16s, transform .16s, border-color .16s;
}

a:hover .stat-card {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
    border-color: var(--control-line);
}

.stat-icon {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: var(--r-lg);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    margin: 0;
}

.stat-card h3 {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--ink);
}

.stat-card p {
    margin: 3px 0 0;
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-3);
}

.bg-blue   { background: var(--plate-soft);  color: var(--plate); }
.bg-green  { background: var(--ok-soft);     color: var(--ok); }
.bg-yellow { background: var(--warn-soft);   color: var(--warn); }
.bg-red    { background: var(--danger-soft); color: var(--danger); }
.bg-indigo { background: var(--info-soft);   color: var(--info); }

/* Entrada (login / cadastro) */

body.auth-page {
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--bg);
}

.auth-container {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    padding: 34px 32px;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
}

.auth-header { text-align: center; margin-bottom: 26px; }

.auth-header i {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    font-size: 1.5rem;
    background: var(--primary-color);
    color: var(--on-plate);
    border-radius: var(--r-lg);
}

.auth-header h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; }
.auth-header p  { margin: 5px 0 0; color: var(--ink-3); font-size: .87rem; }

.auth-footer { text-align: center; margin-top: 22px; font-size: .87rem; color: var(--ink-2); }
.auth-footer a { color: var(--plate); font-weight: 600; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }

/* Janelas modais Definidas UMA vez. Antes havia dois blocos concorrentes no arquivo e o segundo
   desfazia o primeiro. */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(12, 21, 36, .5);
    z-index: 1040;
    opacity: 0;
    transition: opacity .22s ease-in-out;
}
.modal-backdrop.show { opacity: 1; }

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgba(12, 21, 36, .5);
    opacity: 0;
    transition: opacity .22s ease-in-out;
}
.modal.show { display: block; opacity: 1; }

.modal-dialog {
    position: relative;
    width: auto;
    max-width: 560px;
    margin: 48px auto;
    transform: translateY(-24px);
    transition: transform .22s ease-out;
}
.modal.show .modal-dialog { transform: translateY(0); }

.modal-content {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 900px;
    margin: 5vh auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modalIn .22s ease-out;
}

.modal-dialog .modal-content { width: 100%; max-width: none; margin: 0; animation: none; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface);
}

.modal-header h2, .modal-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
}

.close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    border-radius: var(--r-sm);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ink-3);
    cursor: pointer;
    text-shadow: none;
    opacity: 1;
}
.close:hover, .close:focus { background: var(--surface-2); color: var(--ink); }

.modal-body { flex: 1 1 auto; padding: 22px; max-height: 70vh; overflow-y: auto; }
.modal-body .form-group { margin-bottom: 14px; }

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    padding: 14px 22px;
    border-top: 1px solid var(--line-soft);
    background: var(--surface-2);
}

body.modal-open { overflow: hidden; }

@keyframes modalIn {
    from { transform: translateY(-24px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Estado vazio */

.empty, .vazio {
    text-align: center;
    padding: 46px 22px;
    color: var(--ink-3);
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    font-size: .9rem;
}

/* Utilitários */

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.p-2 { padding: .5rem !important; }
.p-3 { padding: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }

.text-center { text-align: center !important; }
.text-right, .text-end { text-align: right !important; }
.text-muted, .text-secondary { color: var(--ink-3) !important; }
.text-danger  { color: var(--danger) !important; }
.text-success { color: var(--ok) !important; }
.text-warning { color: var(--warn) !important; }
.text-info    { color: var(--info) !important; }
.small, .sm { font-size: .8rem; }
.fw-bold { font-weight: 700 !important; }

.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.gap-2 { gap: .5rem !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end     { justify-content: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-end    { align-items: flex-end !important; }
.img-fluid { max-width: 100%; height: auto; }
.rounded { border-radius: var(--r-md); }
.me-1 { margin-right: .25rem !important; }

/* Responsivo */

@media (max-width: 1024px) {
    main { padding: 24px 22px 48px; }
    .col-md-2 { width: 25%; }
}

@media (max-width: 860px) {
    #menu-lateral {
        transform: translateX(-100%);
        transition: transform .24s ease;
        box-shadow: var(--shadow-lg);
    }
    body.nav-open #menu-lateral { transform: translateX(0); }
    body.nav-open .nav-scrim { display: block; }

    main { margin-left: 0; width: 100%; padding: 18px 16px 44px; }

    .nav-toggle { display: inline-flex; }

    main > header { margin-bottom: 20px; }
    main > header h1 { font-size: 1.3rem; }

    .col-md-2, .col-md-3, .col-md-4, .col-md-5,
    .col-md-6, .col-md-7, .col-md-8, .col-md-9,
    .col-md-10, .col-md-11 { width: 100%; }

    .form-actions { justify-content: stretch; }
    .form-actions .btn { flex: 1; }

    .modal-content, .modal-dialog { width: 94%; margin: 4vh auto; }
    .modal-body { max-height: 74vh; }
}

/* Lembrete do dia 5 (envio das notas ao contador) e contador no menu */

.alerta-contador {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--warn-soft);
    border: 1px solid var(--warn);
    border-left: 5px solid var(--warn);
    color: var(--warn);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: .92rem;
}

.alerta-contador.atrasado {
    background: var(--danger-soft);
    border-color: var(--danger);
    border-left-color: var(--danger);
    color: var(--danger);
}

.alerta-contador span { flex: 1; min-width: 220px; }
.alerta-contador a { font-weight: 700; text-decoration: underline; color: inherit; white-space: nowrap; }

/* Bolinha com a quantidade pendente ao lado do item do menu */
.nav-alerta {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 10px;
    background: var(--danger);
    color: var(--danger-soft);
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
}

@media print { .alerta-contador { display: none !important; } }

/* Impressão — recibos e cartazes saem sem o menu */

@media print {
    #menu-lateral, .nav-toggle, .nav-scrim, header .actions, .form-actions, .no-print { display: none !important; }
    body { display: block; background: #fff; }
    main { margin: 0; width: 100%; padding: 0; }
    .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}


/* Utilitários de espaçamento; valores calculados pelo template permanecem inline. */

/* Espaçamento vertical */
.mt-0{margin-top:0}      .mb-0{margin-bottom:0}      .m-0{margin:0}
.mt-1{margin-top:var(--s-1)}   .mb-1{margin-bottom:var(--s-1)}
.mt-2{margin-top:var(--s-2)}   .mb-2{margin-bottom:var(--s-2)}
.mt-3{margin-top:var(--s-3)}   .mb-3{margin-bottom:var(--s-3)}
.mt-4{margin-top:var(--s-4)}   .mb-4{margin-bottom:var(--s-4)}
.mt-5{margin-top:var(--s-5)}   .mb-5{margin-bottom:var(--s-5)}
.ml-1{margin-left:var(--s-1)}  .ml-2{margin-left:var(--s-2)}
.push{margin-left:auto}

/* Eixo horizontal */
.row-x{display:flex;align-items:center}
.row-x.top{align-items:flex-start}
.row-x.base{align-items:baseline}
.row-x.end{align-items:flex-end}
.row-x.between{justify-content:space-between}
.row-x.center{justify-content:center}
.row-x.wrap{flex-wrap:wrap}
.gap-1{gap:var(--s-1)}  .gap-2{gap:var(--s-2)}
.gap-3{gap:var(--s-3)}  .gap-4{gap:var(--s-4)}
.grow{flex:1;min-width:0}
.grow-2{flex:2;min-width:0}
.grow-3{flex:3;min-width:0}

/* Largura */
.narrow-sm{max-width:640px}
.narrow{max-width:800px;margin-left:auto;margin-right:auto}
.narrow-lg{max-width:1000px;margin-left:auto;margin-right:auto}
.w-auto{width:auto}
.w-full{width:100%}

/* Texto */
.muted{color:var(--ink-2)}
.muted-3{color:var(--ink-3)}
.tiny{font-size:.8rem}
.semibold{font-weight:600}
.nowrap{white-space:nowrap}
.center{text-align:center}

/* Painel interno: o bloco cinza que agrupa um sub-formulário */
.painel{
    background:var(--surface-2);
    border:1px solid var(--line-soft);
    border-radius:var(--r-md);
    padding:var(--s-3);
    margin-bottom:var(--s-3);
}

/* Estado vazio dentro de tabela */
.vazio{text-align:center;padding:var(--s-4);color:var(--ink-3)}

/* Caixa de opção (checkbox com rótulo ao lado) */
.form-check{display:flex;align-items:flex-start;gap:var(--s-2);padding-left:0}
.form-check input[type=checkbox]{width:16px;height:16px;margin-top:3px;accent-color:var(--plate);flex:none}
.form-check label,.form-check .form-check-label{
    margin:0;text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--ink);cursor:pointer;
}

.hidden{display:none !important}

/* Segunda passada da varredura */
.hint-inline{font-size:.82rem;color:var(--ink-2)}
.hint-inline.forte{font-weight:600}
.d-inline{display:inline}
.full-col{grid-column:1/-1}
.one-col{grid-template-columns:1fr}
.h-full{height:100%}
.scroll-y{max-height:250px;overflow-y:auto}
.campo-inline{padding:var(--s-2) 10px}
.campo-ano{width:100px;padding:var(--s-2) 10px}
.titulo-secao{
    margin:var(--s-5) 0 var(--s-3);
    padding-bottom:var(--s-2);
    border-bottom:1px solid var(--line);
    font-size:1rem;
}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s-4)}
.divisor-linha{
    display:flex;justify-content:space-between;align-items:center;
    padding:var(--s-2) 0;border-bottom:1px solid var(--line-soft);
}
.bloco-claro{background:var(--surface-2);border:1px solid var(--line-soft)}

/* Campo de formulário dentro de uma barra de filtros: acompanha a linha em vez de ocupar a largura
   toda. Sem isto, o `width:100%` da regra base empurrava o seletor de mês e o campo de ano para
   linhas separadas. */
.fx .tools select,
.fx .tools input,
.fx .tools .chip { width: auto; }
.fx .tools select.campo-inline { min-width: 132px; }
.fx .tools input.campo-ano { width: 92px; }
.fx .tools label { margin: 0; align-self: center; }

/* Workspace components. Layouts consume these tokens; legacy .btn/.fx aliases remain compatible
   with operational forms. See design-system.md. */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
[hidden] { display:none !important; }
.skip-link { position:fixed;left:var(--s-3);top:-100px;z-index:3000;padding:var(--s-2) var(--s-3);background:var(--primary-color);color:white;border-radius:var(--r-md); }
.skip-link:focus { top:var(--s-2);color:white; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid var(--plate);outline-offset:3px; }
#conteudo:focus { outline:none; }
.app-shell { font-size:var(--text-base); }
#menu-lateral { padding:var(--s-4) var(--s-half) var(--s-half); }
.app-brand { display:flex;align-items:center;gap:var(--s-half);padding:0 var(--s-2);margin-bottom:var(--s-5);font-size:1.2rem;font-weight:700;color:var(--ink);line-height:1.2; }
.app-brand:hover { text-decoration:none;color:var(--ink); }
.brand-mark { display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-md);background:var(--primary-color);color:white; }
.app-brand small { display:block;font-size:11px;font-weight:400;letter-spacing:0;color:var(--ink-2);margin-top:var(--s-1); }
.nav-section { margin-bottom:var(--s-4); }
#menu-lateral .nav-section h2, .nav-section > summary { display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--ink-2);padding:var(--s-2);margin:0 0 var(--s-1);line-height:1.3; }
.nav-section > summary { cursor:pointer;list-style:none;min-height:36px;border-radius:var(--r-sm); }
.nav-section > summary::-webkit-details-marker { display:none; }
.nav-section > summary:hover { background:var(--surface-2); }
.nav-section > summary i { font-size:10px;transition:transform var(--motion-fast); }
.nav-section[open] > summary i { transform:rotate(180deg); }
#menu-lateral ul a { min-height:40px;padding:var(--s-2) var(--s-half);font-size:var(--text-sm);gap:var(--s-half); }
#menu-lateral ul a.active { box-shadow:none;background:var(--plate-soft);color:var(--plate-dark); }
#menu-lateral ul a.active::after { content:'';width:5px;height:5px;border-radius:50%;background:currentColor;margin-left:auto;flex:none; }
.app-user { display:flex;align-items:center;gap:var(--s-2);border-top:1px solid var(--line);padding:var(--s-3) var(--s-1) 0;margin-top:auto; }
.app-user-name { flex:1;min-width:0; }
.app-user-name strong,.app-user-name small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.app-user-name strong { font-size:var(--text-sm);font-weight:600; }
.app-user-name small { color:var(--ink-2);font-size:var(--text-xs); }
.app-user form { margin:0; }
.ds-avatar { display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;color:var(--plate-dark);background:var(--plate-soft);font-weight:600; }
.app-shell > main { padding:0 var(--s-5) var(--s-6); }
.app-topbar { height:72px;display:flex;align-items:center;gap:var(--s-3);border-bottom:1px solid var(--line);margin-bottom:var(--s-4); }
.app-section-name { color:var(--ink-2);font-size:var(--text-sm);flex:1; }
.app-search-trigger { display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-half);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink-2);min-height:38px;width:320px;font-size:var(--text-sm); }
.app-search-trigger:hover { text-decoration:none;border-color:var(--control-line);color:var(--ink); }
.app-search-trigger span { flex:1; }
/* Botão de tema: o ícone mostra o modo que o clique liga, e o controle só aparece depois que o
   theme.js assume o atributo (sem JS ele não faz nada). */
.app-theme-toggle .theme-icon-dark,
html[data-theme=dark] .app-theme-toggle .theme-icon-light { display:none; }
html[data-theme=dark] .app-theme-toggle .theme-icon-dark { display:grid; }
.app-theme-toggle > span { display:grid;place-items:center; }
kbd { font-family:var(--font);font-size:11px;line-height:1.4;padding:2px var(--s-1);border:1px solid var(--line);border-radius:4px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap; }
main > .app-page-heading { border:0;padding:0;margin-bottom:var(--s-4);min-height:36px; }
main > .app-page-heading h1 { font-size:var(--text-xl);font-weight:700; }
.quick-create { position:relative;flex:none; }
.quick-create > summary { list-style:none; }
.quick-create > summary::-webkit-details-marker { display:none; }
.quick-create > summary .ui-icon:last-child { width:16px;height:16px;margin-left:var(--s-1); }
.quick-create-list { position:absolute;right:0;top:calc(100% + 8px);min-width:220px;z-index:1200;padding:var(--s-2);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-md); }
.quick-create-list a { display:flex;align-items:center;gap:var(--s-half);padding:10px var(--s-half);border-radius:var(--r-sm);color:var(--ink); }
.quick-create-list a:hover { background:var(--surface-2);text-decoration:none; }
.nav-close { display:none !important; }
.nav-scrim { border:0; }
.ds-button { display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--control-height);padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:500 var(--text-sm)/1.4 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color var(--motion-fast),border-color var(--motion-fast); }
.ds-button:hover,.ds-button.is-secondary:hover { text-decoration:none;background:var(--surface-2);color:var(--ink);border-color:var(--control-line); }
.ds-button.is-primary { background:var(--primary-color);color:var(--on-plate);border-color:var(--primary-color); }
.ds-button.is-primary:hover { background:var(--primary-hover);border-color:var(--primary-hover);color:var(--on-plate); }
.ds-button.is-primary:active { background:var(--primary-press);border-color:var(--primary-press); }
.ds-button.is-danger { color:var(--danger);border-color:var(--danger); }
.ds-button.is-danger:hover { background:var(--danger-soft); }
.ds-button:disabled,.ds-button[aria-disabled=true],.btn:disabled { cursor:not-allowed; }
.ds-button.is-small { min-height:32px;padding:var(--s-1) var(--s-half);font-size:var(--text-xs); }
.ds-icon-button { display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid transparent;border-radius:var(--r-md);background:transparent;color:var(--ink-2);cursor:pointer;font:inherit; }
.ds-icon-button:hover { background:var(--surface-3);color:var(--ink); }
.ds-page-header { display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-4); }
.ds-page-header h1,.ds-page-header h2 { font-size:var(--text-xl);line-height:1.3;margin:var(--s-1) 0 var(--s-2); }
.ds-page-header p { color:var(--ink-2);margin:var(--s-1) 0 0; }
.ds-eyebrow { display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);font-weight:600; }
.ds-actions { display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap; }
.ds-panel { min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:var(--s-4);box-shadow:var(--shadow-sm); }
.ds-panel-header { display:flex;align-items:center;justify-content:space-between;gap:var(--s-half);flex-wrap:wrap;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);margin:0; }
.ds-panel-header h2,.ds-panel-header h3 { font-size:var(--text-lg);font-weight:600;margin:0; }
.ds-panel-body { padding:var(--s-4); }
.ds-toolbar { display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--s-half);margin-bottom:var(--s-3); }
.ds-toolbar > div { min-width:140px; }
.ds-toolbar label,.ds-panel label { color:var(--ink-2);text-transform:none;letter-spacing:0;font-size:var(--text-xs); }
.ds-input,.ds-select,input[type=search] { width:100%;min-height:var(--control-height);padding:var(--s-2) var(--s-half);border:1px solid var(--control-line);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:400 var(--text-base)/1.4 var(--font); }
.ds-input:focus,.ds-select:focus,input[type=search]:focus { outline:2px solid var(--plate);outline-offset:1px;border-color:var(--plate); }
.ds-input[aria-invalid=true],.ds-select[aria-invalid=true] { border-color:var(--danger); }
.ds-badge { display:inline-flex;align-items:center;gap:var(--s-1);width:fit-content;padding:3px var(--s-2);border-radius:var(--r-sm);background:var(--surface-3);color:var(--ink-2);font-size:var(--text-xs);font-weight:500;line-height:1.4;white-space:nowrap; }
.ds-badge.is-success { background:var(--ok-soft);color:var(--ok); }
.ds-badge.is-warning { background:var(--warn-soft);color:var(--warn); }
.ds-badge.is-danger { background:var(--danger-soft);color:var(--danger); }
.ds-badge.is-info { background:var(--plate-soft);color:var(--plate-dark); }
.ds-table { width:100%;border-collapse:collapse;font-size:var(--text-sm); }
.ds-table th { text-align:left;padding:var(--s-half) var(--s-3);color:var(--ink-2);font-size:var(--text-xs);font-weight:600;white-space:nowrap;background:var(--surface-2);border-bottom:1px solid var(--line); }
.ds-table td { padding:var(--s-3);border-bottom:1px solid var(--line);vertical-align:middle; }
.ds-table tr:last-child td { border-bottom:0; }
.ds-table tbody tr:hover { background:var(--surface-2); }
.ds-table td.numeric,.ds-table th.numeric,.ds-table .ds-numeric { text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap; }
.ds-table small { display:block;color:var(--ink-2);margin-top:var(--s-1); }
.ds-table-wrap { overflow:auto; }
.ds-empty { text-align:center;padding:var(--s-6) var(--s-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); }
.ds-panel .ds-empty { border:0;box-shadow:none; }
.ds-empty > i { display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface-2);color:var(--ink-2);font-size:18px;margin-bottom:var(--s-half); }
.ds-empty h2,.ds-empty h3 { font-size:var(--text-lg);margin:0 0 var(--s-2); }
.ds-empty p { color:var(--ink-2);max-width:480px;margin:0 auto var(--s-3); }
.ds-pagination { display:flex;justify-content:space-between;align-items:center;gap:var(--s-half);flex-wrap:wrap;padding:var(--s-3) 0;color:var(--ink-2);font-size:var(--text-sm); }
.ds-pagination a { display:inline-flex;align-items:center;justify-content:center;min-height:36px;min-width:36px;padding:var(--s-1) var(--s-half);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface); }
.ds-pagination [aria-current=page] { background:var(--plate-soft);color:var(--plate-dark);font-weight:600; }
.ds-breadcrumb { display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-xs);color:var(--ink-2);margin-bottom:var(--s-3); }
.ds-tabs { display:flex;gap:var(--s-4);overflow:auto;border-bottom:1px solid var(--line);margin-bottom:var(--s-4); }
.ds-tabs a { padding:var(--s-half) 0;border-bottom:2px solid transparent;color:var(--ink-2);white-space:nowrap; }
.ds-tabs a[aria-current],.ds-tabs a.is-active { border-color:var(--plate);color:var(--plate); }
.search-dialog { width:min(680px,calc(100% - 32px));max-height:80dvh;margin:10vh auto auto;padding:0;border:1px solid var(--line);border-radius:var(--r-xl);color:var(--ink);box-shadow:var(--shadow-lg); }
.search-dialog::backdrop { background:rgba(22,32,46,.38); }
.search-dialog-heading { display:flex;align-items:center;justify-content:space-between;padding:var(--s-half) var(--s-4); }
.search-dialog-heading h2 { margin:0;font-size:var(--text-lg); }
.search-dialog-form { display:flex;align-items:center;gap:var(--s-half);padding:0 var(--s-4) var(--s-3);border-bottom:1px solid var(--line); }
.search-dialog-form input { min-width:0; }
.search-status { font-size:var(--text-xs);color:var(--ink-2);margin:0;padding:var(--s-half) var(--s-4); }
.search-results { max-height:46dvh;overflow:auto; }
.search-group-title { display:flex;align-items:center;justify-content:space-between;padding:var(--s-half) var(--s-4) var(--s-2); }
.search-group-title h3 { font-size:var(--text-xs);font-weight:600;color:var(--ink-2);margin:0;text-transform:uppercase;letter-spacing:.04em; }
.search-result { display:flex;gap:var(--s-half);align-items:center;padding:var(--s-half) var(--s-4);color:var(--ink);text-decoration:none; }
.search-result:hover,.search-result:focus { background:var(--plate-soft);color:var(--ink);text-decoration:none; }
.search-result > span { flex:1;min-width:0; }
.search-result strong,.search-result small { display:block;overflow:hidden;text-overflow:ellipsis; }
.search-result strong { font-size:var(--text-sm);font-weight:500; }
.search-result small { color:var(--ink-2);font-size:var(--text-xs);margin-top:2px; }
.search-result > i { color:var(--ink-2);font-size:13px; }
.search-result > i:last-child { font-size:10px; }
.search-shortcuts { padding:var(--s-half) var(--s-4) var(--s-4);display:flex;gap:var(--s-2);flex-wrap:wrap; }
.search-shortcuts > span { width:100%; }
.search-shortcuts a { display:inline-flex;gap:var(--s-2);padding:var(--s-2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);font-size:var(--text-xs); }
.search-dialog-footer { display:flex;justify-content:space-between;gap:var(--s-half);padding:var(--s-half) var(--s-4);border-top:1px solid var(--line);color:var(--ink-2);font-size:11px; }
.search-page-group { overflow:hidden; }
.form-error-summary { padding:var(--s-3);margin-bottom:var(--s-4);border:1px solid var(--danger);border-radius:var(--r-md);background:var(--danger-soft);color:var(--danger); }
.form-error-summary p { margin:0 0 var(--s-2);font-weight:600; }
.form-error-summary ul { margin:0;padding-left:var(--s-4); }
.form-error-summary a { color:inherit;text-decoration:underline; }
.btn[aria-busy=true],.ds-button[aria-busy=true] { cursor:progress; }
label { text-transform:none;letter-spacing:0; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),select,textarea { border-color:var(--control-line); }
.btn.btn-sm { min-height:32px; }
.fx label { color:var(--ink-2); }
.fx .chip,.fx .bt.sm { min-height:32px; }
.fx .bt { min-height:36px; }
@media (max-width:1200px) { .app-shell > main { padding:0 var(--s-4) var(--s-6); }.app-search-trigger { width:280px; } }
@media (max-width:860px) {
    .app-shell > main { padding:0 var(--s-3) var(--s-5); }
    .app-topbar { height:64px;margin-bottom:var(--s-4);gap:var(--s-2); }
    .app-section-name { display:none; }
    .app-search-trigger { flex:1;width:auto; }
    .app-search-trigger kbd { display:none; }
    .nav-close { display:inline-grid !important;position:absolute;right:var(--s-2);top:var(--s-2); }
    #menu-lateral { padding-top:var(--s-6);width:280px;visibility:hidden; }
    body.nav-open #menu-lateral { visibility:visible; }
    body.nav-open { overflow:hidden; }
    .nav-toggle { flex:none; }
    .ds-page-header { gap:var(--s-half); }
}
@media (max-width:640px) {
    .app-search-trigger span { font-size:0; }
    .app-search-trigger span::after { content:'Buscar';font-size:var(--text-sm); }
    main > .app-page-heading { align-items:flex-start;gap:var(--s-half);margin-bottom:var(--s-3); }
    main > .app-page-heading h1 { font-size:1.25rem; }
    .ds-toolbar > div { flex:1 1 140px;min-width:0; }
    .ds-panel-header { padding:var(--s-3); }
    .ds-panel-body { padding:var(--s-3); }
    .ds-empty { padding:var(--s-5) var(--s-3); }
    .ds-actions { width:100%; }
    .search-dialog { width:calc(100% - 16px);margin-top:var(--s-2);max-height:90dvh; }
    .search-dialog-form { gap:var(--s-2);padding-left:var(--s-3);padding-right:var(--s-3); }
    .search-dialog-form > i { display:none; }
    .search-dialog-form input { font-size:16px; }
    .search-dialog-footer { padding:var(--s-half) var(--s-3); }
    .search-dialog-footer > span:first-child { display:none; }
    .grid-auto { grid-template-columns:minmax(0,1fr); }
}
@media (pointer:coarse) {
    .ds-button,.ds-icon-button,.btn,.btn.btn-sm,.fx .bt,.fx .chip,.ds-pagination a { min-height:44px; }
    .ds-icon-button { min-width:44px; }
    #menu-lateral ul a { min-height:44px; }
    input,select,textarea { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important;transition:none !important;scroll-behavior:auto !important; } }
@media print { .app-topbar,.skip-link,.search-dialog { display:none !important; }.app-shell > main { padding:0;margin:0;width:100%; } }