/* ============================================================================
   Race Admin Design System (admin-ds.css)
   Doc autoritativa: docs/design/admin-design-system.md

   Tokens (--ra-*) + componentes (.ds-*) do painel admin. Mobile-first.
   Regras:
   - NUNCA hardcodar hex em tela nova: sempre var(--ra-*)
   - Componente novo nasce aqui (com doc no MD), nao em <style> de widget
   - <style> de widget so pra layout ESPECIFICO da tela, consumindo tokens
   Primeira adocao: onboarding (wizard, checklist do dash, ajuda contextual).
   ============================================================================ */

:root {
    /* ── Marca ─────────────────────────────────────────────── */
    --ra-navy-900: #131d2e;
    --ra-navy-800: #1b2740;   /* superficies escuras (sidebar, hero) */
    --ra-navy-700: #24324a;   /* cor de acao primaria / titulos */
    --ra-navy-600: #33465f;
    --ra-navy-500: #46597a;
    --ra-red-600: #e10600;    /* vermelho racing (acento da marca) */
    --ra-red-700: #b30500;

    /* ── Neutros ───────────────────────────────────────────── */
    --ra-gray-25: #fcfdfe;
    --ra-gray-50: #f8fafc;
    --ra-gray-100: #f2f4f7;
    --ra-gray-200: #e3e8ef;
    --ra-gray-300: #d0d5dd;
    --ra-gray-400: #98a2b3;
    /* #6b7a90 dava 4.36:1 sobre branco - abaixo do minimo 4.5:1 do WCAG AA
       para os textos de 12-13px que usam este token (hints, subtitulos).
       #616e84 fica em 5.16:1 sobre branco e 4.93:1 sobre --ra-gray-50. */
    --ra-gray-500: #616e84;
    --ra-gray-700: #344054;
    --ra-gray-900: #101828;

    /* ── Semanticas (alinhadas a paleta ja usada no dash) ──── */
    --ra-success: #10b981;
    --ra-success-bg: #e6f6f0;
    --ra-success-text: #0c7a5b;
    --ra-warning: #f59e0b;
    --ra-warning-bg: #fef3e2;
    --ra-warning-text: #92600a;
    --ra-danger: #ef4444;
    --ra-danger-bg: #fef3f2;
    --ra-danger-border: #fda29b;
    --ra-danger-text: #b42318;
    --ra-info: #3b82f6;
    --ra-info-bg: #eaf2fe;
    --ra-info-text: #1d4fa8;

    /* ── Superficies e texto ───────────────────────────────── */
    --ra-bg: var(--ra-gray-50);
    --ra-surface: #ffffff;
    --ra-surface-2: var(--ra-gray-100);
    --ra-border: var(--ra-gray-200);
    --ra-border-strong: var(--ra-gray-300);
    --ra-text: var(--ra-gray-900);
    --ra-text-2: var(--ra-gray-700);
    --ra-text-3: var(--ra-gray-500);
    --ra-text-inverse: #ffffff;

    /* ── Tipografia ────────────────────────────────────────── */
    --ra-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ra-fs-xs: 12px;
    --ra-fs-sm: 13px;
    --ra-fs-base: 14px;
    --ra-fs-md: 16px;   /* inputs mobile: >=16px evita zoom do iOS */
    --ra-fs-lg: 18px;
    --ra-fs-xl: 22px;
    --ra-fs-2xl: 28px;
    --ra-lh: 1.5;
    --ra-w-normal: 400;
    --ra-w-semibold: 600;
    --ra-w-bold: 700;

    /* ── Espacamento (escala de 4px) ───────────────────────── */
    --ra-sp-1: 4px;
    --ra-sp-2: 8px;
    --ra-sp-3: 12px;
    --ra-sp-4: 16px;
    --ra-sp-5: 20px;
    --ra-sp-6: 24px;
    --ra-sp-8: 32px;
    --ra-sp-10: 40px;

    /* ── Raio ──────────────────────────────────────────────── */
    --ra-r-sm: 6px;
    --ra-r-md: 10px;
    --ra-r-lg: 14px;
    --ra-r-xl: 20px;
    --ra-r-full: 999px;

    /* ── Elevacao ──────────────────────────────────────────── */
    --ra-shadow-sm: 0 1px 3px rgba(16, 24, 40, .07);
    --ra-shadow-md: 0 4px 12px rgba(16, 24, 40, .10);
    --ra-shadow-lg: 0 12px 32px rgba(16, 24, 40, .18);

    /* ── Motion ────────────────────────────────────────────── */
    --ra-t-fast: .15s ease;
    --ra-t-base: .25s ease;

    /* ── Toque / layout ────────────────────────────────────── */
    --ra-touch: 44px;         /* alvo minimo de toque (WCAG/HIG) */
    --ra-content-max: 900px;
}

/* ════════════════════════════════════════════════════════════
   COMPONENTES
   ════════════════════════════════════════════════════════════ */

/* ── Card ─────────────────────────────────────────────────── */
.ds-card {
    background: var(--ra-surface);
    border: 1px solid var(--ra-border);
    border-radius: var(--ra-r-lg);
    padding: var(--ra-sp-6);
    box-shadow: var(--ra-shadow-sm);
}
.ds-card-title {
    margin: 0 0 var(--ra-sp-1);
    font-size: var(--ra-fs-xl);
    font-weight: var(--ra-w-bold);
    color: var(--ra-navy-700);
    line-height: 1.3;
}
.ds-card-sub {
    color: var(--ra-text-3);
    font-size: var(--ra-fs-sm);
    margin-bottom: var(--ra-sp-5);
    line-height: var(--ra-lh);
}
.ds-card-dark {
    background: linear-gradient(135deg, var(--ra-navy-700) 0%, var(--ra-navy-600) 100%);
    border: 0;
    color: var(--ra-text-inverse);
}
.ds-card-dark .ds-card-title { color: var(--ra-text-inverse); }
.ds-card-dark .ds-card-sub { color: rgba(255, 255, 255, .72); }

/* ── Botao ────────────────────────────────────────────────── */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ra-sp-2);
    min-height: var(--ra-touch);
    padding: 0 var(--ra-sp-6);
    border: 1px solid transparent;
    border-radius: var(--ra-r-md);
    font-family: var(--ra-font);
    font-size: var(--ra-fs-base);
    font-weight: var(--ra-w-semibold);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--ra-t-fast), border-color var(--ra-t-fast), color var(--ra-t-fast), box-shadow var(--ra-t-fast);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.ds-btn:focus-visible {
    outline: 2px solid var(--ra-info);
    outline-offset: 2px;
}
.ds-btn:disabled { opacity: .55; cursor: not-allowed; }
.ds-btn.is-loading { opacity: .7; cursor: wait; }

.ds-btn-primary { background: var(--ra-navy-700); color: var(--ra-text-inverse); }
.ds-btn-primary:hover:not(:disabled) { background: var(--ra-navy-600); color: var(--ra-text-inverse); }

.ds-btn-accent { background: var(--ra-red-600); color: var(--ra-text-inverse); }
.ds-btn-accent:hover:not(:disabled) { background: var(--ra-red-700); color: var(--ra-text-inverse); }

.ds-btn-secondary {
    background: var(--ra-surface);
    border-color: var(--ra-border-strong);
    color: var(--ra-text-2);
}
.ds-btn-secondary:hover:not(:disabled) { border-color: var(--ra-gray-400); color: var(--ra-text); background: var(--ra-surface); }

.ds-btn-ghost { background: transparent; color: var(--ra-text-3); }
.ds-btn-ghost:hover:not(:disabled) { color: var(--ra-navy-700); background: var(--ra-gray-100); }

.ds-btn-danger { background: var(--ra-danger); color: var(--ra-text-inverse); }
.ds-btn-danger:hover:not(:disabled) { background: var(--ra-danger-text); color: var(--ra-text-inverse); }

.ds-btn-sm { min-height: 36px; padding: 0 var(--ra-sp-4); font-size: var(--ra-fs-sm); }
/* No toque, densidade cede pro alvo minimo: 36px e confortavel com mouse,
   nao com o dedo. Desktop mantem a versao compacta. */
@media (max-width: 767px) {
    .ds-btn-sm { min-height: var(--ra-touch); }
}
.ds-btn-lg { min-height: 52px; padding: 0 var(--ra-sp-8); font-size: var(--ra-fs-md); }
.ds-btn-block { width: 100%; }

/* ── Campo de formulario ──────────────────────────────────── */
.ds-field { margin-bottom: var(--ra-sp-4); }
.ds-field > label {
    display: block;
    font-weight: var(--ra-w-semibold);
    font-size: var(--ra-fs-sm);
    color: var(--ra-text-2);
    margin-bottom: var(--ra-sp-2);
}
.ds-input,
.ds-field input[type=text], .ds-field input[type=number], .ds-field input[type=email],
.ds-field input[type=date], .ds-field input[type=time], .ds-field input[type=password],
.ds-field input[type=url], .ds-field input[type=search], .ds-field input[type=tel],
.ds-field select, .ds-field textarea {
    width: 100%;
    min-height: var(--ra-touch);
    padding: var(--ra-sp-2) var(--ra-sp-3);
    border: 1px solid var(--ra-border-strong);
    border-radius: var(--ra-r-md);
    font-family: var(--ra-font);
    font-size: var(--ra-fs-md);   /* 16px: sem auto-zoom no iOS */
    color: var(--ra-text);
    background: var(--ra-surface);
    transition: border-color var(--ra-t-fast), box-shadow var(--ra-t-fast);
}
.ds-field input:focus, .ds-field select:focus, .ds-field textarea:focus, .ds-input:focus {
    outline: none;
    border-color: var(--ra-navy-500);
    box-shadow: 0 0 0 3px rgba(36, 50, 74, .12);
}
.ds-field-hint { font-size: var(--ra-fs-xs); color: var(--ra-text-3); margin-top: var(--ra-sp-1); }
.ds-field.has-error input, .ds-field.has-error select { border-color: var(--ra-danger); }
.ds-field-error { font-size: var(--ra-fs-xs); color: var(--ra-danger-text); margin-top: var(--ra-sp-1); }

/* ── Chip (selecao multipla) ──────────────────────────────── */
.ds-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ra-sp-1);
    min-height: 36px;
    padding: 0 var(--ra-sp-4);
    border: 1px solid var(--ra-border-strong);
    border-radius: var(--ra-r-full);
    background: var(--ra-surface);
    color: var(--ra-text-2);
    font-size: var(--ra-fs-sm);
    cursor: pointer;
    user-select: none;
    transition: background var(--ra-t-fast), border-color var(--ra-t-fast), color var(--ra-t-fast);
    -webkit-tap-highlight-color: transparent;
}
.ds-chip:hover { border-color: var(--ra-navy-500); }
.ds-chip.on {
    background: var(--ra-navy-700);
    border-color: var(--ra-navy-700);
    color: var(--ra-text-inverse);
}
.ds-chip-row { display: flex; flex-wrap: wrap; gap: var(--ra-sp-2); }

/* ── Badge / status ───────────────────────────────────────── */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ra-sp-1);
    padding: 2px var(--ra-sp-3);
    border-radius: var(--ra-r-full);
    font-size: var(--ra-fs-xs);
    font-weight: var(--ra-w-bold);
}
.ds-badge-success { background: var(--ra-success-bg); color: var(--ra-success-text); }
.ds-badge-warning { background: var(--ra-warning-bg); color: var(--ra-warning-text); }
.ds-badge-danger { background: var(--ra-danger-bg); color: var(--ra-danger-text); }
.ds-badge-info { background: var(--ra-info-bg); color: var(--ra-info-text); }
.ds-badge-neutral { background: var(--ra-gray-100); color: var(--ra-text-3); }

/* ── Steps (wizard / progresso em passos) ─────────────────── */
.ds-steps {
    display: flex;
    gap: var(--ra-sp-2);
    margin: var(--ra-sp-4) 0 var(--ra-sp-6);
}
.ds-step {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: var(--ra-sp-2) var(--ra-sp-2);
    border-radius: var(--ra-r-md);
    background: var(--ra-gray-100);
    color: var(--ra-text-3);
    font-size: var(--ra-fs-xs);
    font-weight: var(--ra-w-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
    transition: background var(--ra-t-fast), color var(--ra-t-fast);
}
.ds-step.active { background: var(--ra-navy-700); color: var(--ra-text-inverse); }
.ds-step.done { background: var(--ra-success-bg); color: var(--ra-success-text); cursor: pointer; }
/* Mobile: vira trilho horizontal com scroll, sem quebrar linha */
@media (max-width: 767px) {
    .ds-steps {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: calc(-1 * var(--ra-sp-4));
        margin-right: calc(-1 * var(--ra-sp-4));
        padding: 0 var(--ra-sp-4);
    }
    .ds-steps::-webkit-scrollbar { display: none; }
    .ds-step { flex: 0 0 auto; min-width: 110px; min-height: 40px; display: flex; align-items: center; justify-content: center; }
}

/* ── Barra de progresso ───────────────────────────────────── */
.ds-progress {
    background: var(--ra-gray-200);
    border-radius: var(--ra-r-full);
    height: 8px;
    overflow: hidden;
}
.ds-progress > span {
    display: block;
    height: 100%;
    background: var(--ra-success);
    border-radius: var(--ra-r-full);
    transition: width var(--ra-t-base);
}
.ds-card-dark .ds-progress { background: rgba(255, 255, 255, .18); }

/* ── Checklist ────────────────────────────────────────────── */
.ds-checklist { list-style: none; margin: var(--ra-sp-4) 0 0; padding: 0; }
.ds-checklist li {
    display: flex;
    align-items: center;
    gap: var(--ra-sp-3);
    min-height: var(--ra-touch);
    padding: var(--ra-sp-2) var(--ra-sp-1);
    border-bottom: 1px solid var(--ra-gray-100);
    font-size: var(--ra-fs-base);
}
.ds-checklist li:last-child { border-bottom: 0; }
.ds-checklist .ok { color: var(--ra-success); }
.ds-checklist .todo { color: var(--ra-gray-400); }
.ds-checklist a { margin-left: auto; font-size: var(--ra-fs-sm); white-space: nowrap; }

/* ── Alertas inline ───────────────────────────────────────── */
.ds-alert {
    border-radius: var(--ra-r-md);
    padding: var(--ra-sp-3) var(--ra-sp-4);
    font-size: var(--ra-fs-sm);
    margin-bottom: var(--ra-sp-4);
    border: 1px solid transparent;
}
.ds-alert-error { background: var(--ra-danger-bg); border-color: var(--ra-danger-border); color: var(--ra-danger-text); }
.ds-alert-success { background: var(--ra-success-bg); color: var(--ra-success-text); }
.ds-alert-info { background: var(--ra-info-bg); color: var(--ra-info-text); }
.ds-alert-warning { background: var(--ra-warning-bg); color: var(--ra-warning-text); }

/* ── Radio card (escolha exclusiva grande) ────────────────── */
.ds-radio-row { display: flex; gap: var(--ra-sp-3); }
.ds-radio-card {
    flex: 1;
    border: 1px solid var(--ra-border-strong);
    border-radius: var(--ra-r-md);
    padding: var(--ra-sp-4);
    min-height: var(--ra-touch);
    cursor: pointer;
    text-align: center;
    font-size: var(--ra-fs-base);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--ra-t-fast), background var(--ra-t-fast);
    -webkit-tap-highlight-color: transparent;
}
.ds-radio-card.on {
    border-color: var(--ra-navy-700);
    background: var(--ra-gray-50);
    font-weight: var(--ra-w-semibold);
    box-shadow: inset 0 0 0 1px var(--ra-navy-700);
}
@media (max-width: 639px) { .ds-radio-row { flex-direction: column; } }

/* ── Modal / bottom sheet ─────────────────────────────────── */
.ds-overlay {
    position: fixed;
    inset: 0;
    z-index: 9991;
    background: rgba(16, 24, 40, .45);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--ra-sp-4);
}
.ds-overlay.open { display: flex; }
.ds-modal {
    background: var(--ra-surface);
    border-radius: var(--ra-r-lg);
    max-width: 540px;
    width: 100%;
    max-height: 80vh;
    overflow: auto;
    padding: var(--ra-sp-6);
    box-shadow: var(--ra-shadow-lg);
}
.ds-modal h3 { margin: 0 0 var(--ra-sp-3); font-size: var(--ra-fs-lg); color: var(--ra-navy-700); }
.ds-modal-close {
    float: right;
    background: none;
    border: 0;
    width: 36px;
    height: 36px;
    font-size: 20px;
    color: var(--ra-gray-400);
    cursor: pointer;
    border-radius: var(--ra-r-sm);
}
.ds-modal-close:hover { background: var(--ra-gray-100); color: var(--ra-text); }
/* Mobile: modal vira bottom sheet */
@media (max-width: 639px) {
    .ds-overlay { align-items: flex-end; padding: 0; }
    .ds-modal {
        max-width: none;
        border-radius: var(--ra-r-xl) var(--ra-r-xl) 0 0;
        max-height: 85vh;
        padding-bottom: calc(var(--ra-sp-6) + env(safe-area-inset-bottom, 0px));
        animation: ds-sheet-up var(--ra-t-base);
    }
}
@keyframes ds-sheet-up {
    from { transform: translateY(24px); opacity: .6; }
    to { transform: translateY(0); opacity: 1; }
}

/* ── FAB (botao flutuante) ────────────────────────────────── */
.ds-fab {
    position: fixed;
    left: var(--ra-sp-4);
    bottom: calc(var(--ra-sp-4) + env(safe-area-inset-bottom, 0px));
    z-index: 9990;
    width: var(--ra-touch);
    height: var(--ra-touch);
    border-radius: var(--ra-r-full);
    border: 0;
    background: var(--ra-navy-700);
    color: var(--ra-text-inverse);
    font-size: var(--ra-fs-lg);
    font-weight: var(--ra-w-bold);
    cursor: pointer;
    box-shadow: var(--ra-shadow-md);
    transition: background var(--ra-t-fast), transform var(--ra-t-fast);
}
.ds-fab:hover { background: var(--ra-navy-600); transform: scale(1.05); }

/* ── Grid utilitario responsivo ───────────────────────────── */
.ds-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ra-sp-4); }
@media (max-width: 639px) { .ds-grid-2 { grid-template-columns: 1fr; } }
.ds-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ra-sp-4); }
@media (max-width: 639px) { .ds-grid-3 { grid-template-columns: 1fr; } }

/* ── Barra de acoes (rodape de form/wizard) ───────────────── */
.ds-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ra-sp-3);
    margin-top: var(--ra-sp-6);
}
/* Mobile: acoes grudadas no rodape da tela, botao principal em destaque */
@media (max-width: 639px) {
    .ds-actions.sticky {
        position: sticky;
        bottom: 0;
        background: linear-gradient(to top, var(--ra-surface) 75%, transparent);
        padding: var(--ra-sp-3) 0 calc(var(--ra-sp-3) + env(safe-area-inset-bottom, 0px));
        margin-top: var(--ra-sp-4);
    }
    .ds-actions .ds-btn-primary, .ds-actions .ds-btn-accent { flex: 1; }
}

/* ════════════════════════════════════════════════════════════
   EDITOR (Plano 10.4) - navegacao de secoes, preview, toast,
   switch e campo de cor. Usados pela tela /admin/sites/site/{id}
   e disponiveis pra qualquer tela de edicao longa.
   ════════════════════════════════════════════════════════════ */

/* ── Split: conteudo + painel lateral (preview) ───────────── */
.ds-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--ra-sp-5);
    align-items: start;
}
.ds-split-aside { position: sticky; top: var(--ra-sp-4); }
@media (max-width: 1023px) {
    .ds-split { grid-template-columns: minmax(0, 1fr); }
    .ds-split-aside { position: static; }
    /* No mobile o preview e sob demanda - o JS controla o .open */
    .ds-split-aside:not(.open) { display: none; }
}

/* ── Navegacao de secoes: vertical no desktop ─────────────── */
.ds-sidenav {
    display: flex;
    flex-direction: column;
    gap: var(--ra-sp-1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.ds-sidenav-item {
    display: flex;
    align-items: center;
    gap: var(--ra-sp-2);
    width: 100%;
    min-height: var(--ra-touch);
    padding: 0 var(--ra-sp-3);
    border: 1px solid transparent;
    border-radius: var(--ra-r-md);
    background: transparent;
    color: var(--ra-text-2);
    font-family: var(--ra-font);
    font-size: var(--ra-fs-sm);
    font-weight: var(--ra-w-semibold);
    text-align: left;
    cursor: pointer;
    transition: background var(--ra-t-fast), color var(--ra-t-fast);
}
.ds-sidenav-item:hover { background: var(--ra-gray-100); color: var(--ra-text); }
.ds-sidenav-item:focus-visible {
    outline: 2px solid var(--ra-navy-500);
    outline-offset: 2px;
}
.ds-sidenav-item.on {
    background: var(--ra-navy-700);
    border-color: var(--ra-navy-700);
    color: var(--ra-text-inverse);
}
.ds-sidenav-item .ds-dot { margin-left: auto; }

/* Mobile: a mesma lista vira uma faixa rolavel de chips */
@media (max-width: 1023px) {
    .ds-sidenav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: var(--ra-sp-2);
        padding-bottom: var(--ra-sp-2);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ds-sidenav::-webkit-scrollbar { display: none; }
    .ds-sidenav-item {
        width: auto;
        flex: 0 0 auto;
        border-color: var(--ra-border);
        border-radius: var(--ra-r-full);
        background: var(--ra-surface);
        padding: 0 var(--ra-sp-4);
    }
}

/* ── Ponto de "alteracoes nao salvas" ─────────────────────── */
.ds-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: var(--ra-r-full);
    background: var(--ra-warning);
}
.ds-sidenav-item.on .ds-dot { background: var(--ra-text-inverse); }
.ds-dot[hidden] { display: none; }

/* ── Toast (confirmacao nao-bloqueante) ───────────────────── */
.ds-toast-stack {
    position: fixed;
    z-index: 1200;
    right: var(--ra-sp-4);
    bottom: calc(var(--ra-sp-4) + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: var(--ra-sp-2);
    pointer-events: none;
}
.ds-toast {
    display: flex;
    align-items: center;
    gap: var(--ra-sp-2);
    max-width: 360px;
    padding: var(--ra-sp-3) var(--ra-sp-4);
    border-radius: var(--ra-r-md);
    background: var(--ra-navy-800);
    color: var(--ra-text-inverse);
    font-size: var(--ra-fs-sm);
    box-shadow: var(--ra-shadow-lg);
    pointer-events: auto;
    animation: ds-toast-in var(--ra-t-base);
}
.ds-toast.out { opacity: 0; transform: translateY(8px); transition: opacity var(--ra-t-base), transform var(--ra-t-base); }
.ds-toast-success { background: var(--ra-success-text); }
.ds-toast-error { background: var(--ra-danger-text); }
@keyframes ds-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 639px) {
    .ds-toast-stack { left: var(--ra-sp-4); right: var(--ra-sp-4); }
    .ds-toast { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ds-toast { animation: none; }
    .ds-toast.out { transition: none; }
}
/* Toast com acao (nasceu no painel ao vivo, F-15): confirma E oferece o
   caminho de volta. Usar quando desfazer no lugar da confirmacao previa e o
   desenho certo - acao frequente, feita sob pressao, cujo modal de "tem
   certeza?" so atrasaria quem esta certo. */
.ds-toast-text { flex: 1; min-width: 0; }
.ds-toast-action {
    flex: none;
    min-height: 36px;
    padding: 0 var(--ra-sp-3);
    border: 0;
    border-radius: var(--ra-r-sm);
    background: rgba(255, 255, 255, .18);
    color: var(--ra-text-inverse);
    font-size: var(--ra-fs-sm);
    font-weight: var(--ra-w-semibold);
    cursor: pointer;
    transition: background var(--ra-t-fast);
}
.ds-toast-action:hover { background: rgba(255, 255, 255, .3); }
.ds-toast-action:focus-visible { outline: 2px solid var(--ra-text-inverse); outline-offset: 2px; }

/* ── Switch (substitui .toggle-switch fora do DS) ─────────── */
.ds-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--ra-sp-3);
    min-height: var(--ra-touch);
    cursor: pointer;
    font-size: var(--ra-fs-base);
    color: var(--ra-text-2);
}
.ds-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.ds-switch-track {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 24px;
    border-radius: var(--ra-r-full);
    background: var(--ra-gray-300);
    transition: background var(--ra-t-fast);
}
.ds-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: var(--ra-r-full);
    background: var(--ra-surface);
    box-shadow: var(--ra-shadow-sm);
    transition: transform var(--ra-t-fast);
}
.ds-switch input:checked + .ds-switch-track { background: var(--ra-success); }
.ds-switch input:checked + .ds-switch-track::after { transform: translateX(20px); }
.ds-switch input:focus-visible + .ds-switch-track {
    outline: 2px solid var(--ra-navy-500);
    outline-offset: 2px;
}
.ds-switch input:disabled + .ds-switch-track { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
    .ds-switch-track, .ds-switch-track::after { transition: none; }
}

/* ── Campo de cor: swatch + hex ───────────────────────────── */
.ds-color { display: flex; align-items: center; gap: var(--ra-sp-2); }
.ds-color-swatch {
    flex: 0 0 var(--ra-touch);
    width: var(--ra-touch);
    height: var(--ra-touch);
    padding: 0;
    border: 1px solid var(--ra-border-strong);
    border-radius: var(--ra-r-sm);
    background: none;
    cursor: pointer;
}
/* Normaliza o color picker nativo pra caber no swatch */
.ds-color-swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.ds-color-swatch::-webkit-color-swatch { border: 0; border-radius: 4px; }
.ds-color-swatch::-moz-color-swatch { border: 0; border-radius: 4px; }
.ds-color-swatch:focus-visible { outline: 2px solid var(--ra-navy-500); outline-offset: 2px; }
.ds-color .ds-input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Valor derivado (ex: RGB calculado) - nao parece campo editavel */
.ds-field-derived {
    display: inline-block;
    padding: var(--ra-sp-1) var(--ra-sp-2);
    border-radius: var(--ra-r-sm);
    background: var(--ra-gray-100);
    color: var(--ra-text-3);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--ra-fs-xs);
}

/* ── Nav de conteudo: rotulo de grupo + link legado ─────────
   Usados na sidebar de conteudo dos modulos (.dash_content_sidebar nav)
   pra agrupar itens por fase do trabalho (ex: Resultados: Operar /
   Conferir / Divulgar). Owner: redesign-area-resultados (2026-07-22) */
.ds-nav-group {
    display: block;
    margin: var(--ra-sp-4) 0 var(--ra-sp-1);
    font-size: var(--ra-fs-xs);
    font-weight: var(--ra-w-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ra-text-3);
}
.ds-nav-group:first-child { margin-top: 0; }
.ds-nav-legacy {
    margin-top: var(--ra-sp-4);
    font-size: var(--ra-fs-xs);
    opacity: .75;
}

/* ── .ds-modnav: nav de modulo vira chips no mobile ─────────
   Aplicar JUNTO de .dash_content_sidebar no wrapper da sidebar de conteudo
   de um modulo. Desktop: nada muda (menu vertical). Abaixo de 768px o menu
   vira UMA linha horizontal rolavel de chips - libera a tela pro conteudo
   em vez de empilhar uma coluna longa em cima dele. Rotulos de grupo
   (.ds-nav-group) somem no mobile; a ordem dos itens preserva o
   agrupamento. Nascida na area de Resultados (2026-07-22).
   Especificidade proposital (.dash_content_sidebar.ds-modnav ...): precisa
   vencer o hover global do _admin.php (padding-left + borda vermelha) e o
   `.radius { min-width:95% !important }` do breakpoint 680px. */
@media (max-width: 767px) {
    .dash_content_sidebar.ds-modnav h3,
    .dash_content_sidebar.ds-modnav .dash_content_sidebar_desc,
    .dash_content_sidebar.ds-modnav .ds-nav-group { display: none; }

    /* Solta a prisao de largura do style.css (.dash_content_sidebar tem
       max-width:200px global e o breakpoint 62em nunca libera): sem isso a
       fileira de chips fica espremida em ~200px e corta os itens. */
    .dash_content_sidebar.ds-modnav {
        margin-bottom: var(--ra-sp-3);
        max-width: none;
        width: 100%;
    }

    .dash_content_sidebar.ds-modnav nav {
        display: flex;
        margin-top: 0;
        gap: var(--ra-sp-2);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: var(--ra-sp-1) 2px var(--ra-sp-2);
    }
    .dash_content_sidebar.ds-modnav nav::-webkit-scrollbar { display: none; }

    .dash_content_sidebar.ds-modnav nav a,
    .dash_content_sidebar.ds-modnav nav a.radius {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        margin: 0;
        min-width: 0 !important;
        min-height: 40px;
        padding: 0 var(--ra-sp-4);
        white-space: nowrap;
        font-size: var(--ra-fs-sm);
        font-weight: var(--ra-w-semibold);
        color: var(--ra-text-2);
        background: var(--ra-surface);
        border: 1px solid var(--ra-border-strong);
        border-radius: var(--ra-r-full);
    }
    .dash_content_sidebar.ds-modnav nav a:hover {
        background: var(--ra-gray-100);
        padding-left: var(--ra-sp-4);
        border-left: 1px solid var(--ra-border-strong);
        color: var(--ra-text-2);
    }
    .dash_content_sidebar.ds-modnav nav a.active,
    .dash_content_sidebar.ds-modnav nav .active {
        background: var(--ra-navy-700);
        border-color: var(--ra-navy-700);
        padding-left: var(--ra-sp-4);
        color: #fff;
    }
    .dash_content_sidebar.ds-modnav nav a.ds-nav-legacy {
        margin-top: 0;
        opacity: .75;
        font-size: var(--ra-fs-xs);
    }
}