/**
 * Rosa Master — Design System v2 · componentes (set/2026)
 *
 * CSS puro, sem build: carregue DEPOIS de rosa-master-tokens.css e rosa-app.css.
 * Tudo fica em @layer components: vem depois dos componentes compilados em
 * rosa-app.css (e os substitui), mas perde para os utilitários Tailwind
 * (@layer utilities), então `mb-4`, `!p-5` etc. nas views legadas continuam valendo.
 *
 * Especificação e exemplos: docs/DESIGN-SYSTEM.md · portal/shared/styleguide.html
 *
 * Índice
 *  1. Base
 *  2. Shell (topbar, sidebar, main)
 *  3. Cabeçalho de página
 *  4. Botões
 *  5. Card
 *  6. Formulário e barra de filtros
 *  7. Tabela
 *  8. Status, badges e contadores
 *  9. Esteira (etapas) e progresso
 * 10. Abas e chips
 * 11. Lista de tarefas, métricas, medidor, barras
 * 12. Avatar, icon tile, paginação, vazio
 * 13. Alertas / flash
 * 14. Login
 * 15. Responsivo
 * 16. Portal — catálogo de sistemas
 * 17. Dashboards — KPI e gráficos (sem lib de JS)
 */

@layer components {

/* ============================================================
 * 1. Base
 * ============================================================ */
.rosa-ds,
.rosa-ds body,
body.rosa-ds {
    font-family: var(--rm-font-sans);
    color: var(--rm-ink);
    background: var(--rm-canvas);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01";
}
.rosa-ds *,
.rosa-ds *::before,
.rosa-ds *::after { box-sizing: border-box; }

:where(.rosa-ds) a { color: inherit; text-decoration: none; }
:where(.rosa-ds) :focus-visible { outline: none; box-shadow: var(--rm-ring); }

.rosa-num { font-variant-numeric: tabular-nums; }
.rosa-muted { color: var(--rm-muted); }
.rosa-faint { color: var(--rm-faint); }
.rosa-text-primary { color: var(--rm-primary); }
.rosa-text-danger { color: var(--rm-danger-solid); }
.rosa-text-warning { color: var(--rm-warning); }
.rosa-text-success { color: var(--rm-success); }
.rosa-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;
}

/* Rótulo de seção em caixa-alta ("VISÃO", "CLIENTE · PROTOCOLO") */
.rosa-eyebrow {
    font-size: var(--rm-text-xs);
    font-weight: 600;
    letter-spacing: var(--rm-tracking-label);
    text-transform: uppercase;
    color: var(--rm-faint);
}

/* ============================================================
 * 2. Shell
 * ============================================================ */
.rosa-app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--rm-sidebar-w) minmax(0, 1fr);
    grid-template-rows: var(--rm-topbar-h) minmax(0, 1fr);
    grid-template-areas: "top top" "side main";
    background:
        radial-gradient(900px 260px at 85% -80px, rgba(228, 0, 106, 0.06), transparent 70%),
        linear-gradient(90deg, var(--rm-sidebar) var(--rm-sidebar-w), var(--rm-border) var(--rm-sidebar-w), var(--rm-border) calc(var(--rm-sidebar-w) + 1px), transparent 0),
        var(--rm-canvas);
}

.rosa-app--banner {
    grid-template-rows: auto var(--rm-topbar-h) minmax(0, 1fr);
    grid-template-areas: "banner banner" "top top" "side main";
}
.rosa-banner {
    grid-area: banner;
    min-width: 0;
}

/* Topbar */
.rosa-topbar {
    grid-area: top;
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px 0 20px;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--rm-border);
}
.rosa-topbar__spacer { flex: 1; }

/* Botão hambúrguer (só aparece em telas ≤1023px, ver seção 15) */
.rosa-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid var(--rm-border-strong);
    border-radius: var(--rm-radius-md);
    background: var(--rm-surface);
    color: var(--rm-ink);
    cursor: pointer;
}
.rosa-nav-toggle:hover { background: var(--rm-hover); }
.rosa-nav-toggle__icon { width: 20px; height: 20px; }
.rosa-nav-toggle__icon--close { display: none; }
.rosa-nav-toggle[aria-expanded="true"] .rosa-nav-toggle__icon--open { display: none; }
.rosa-nav-toggle[aria-expanded="true"] .rosa-nav-toggle__icon--close { display: block; }

/* Véu atrás da gaveta de navegação mobile (ver seção 15) */
.rosa-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(15, 15, 20, 0.42);
}
.rosa-nav-backdrop[hidden] { display: none; }

.rosa-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    width: calc(var(--rm-sidebar-w) - 44px);
    flex: none;
}
.rosa-brand__mark {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: var(--rm-radius);
    background: var(--rm-primary);
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 4px 10px rgba(228, 0, 106, 0.22);
}
.rosa-brand__mark img,
.rosa-brand__mark svg { width: 26px; height: 26px; object-fit: contain; }
.rosa-brand__text { min-width: 0; line-height: 1.15; }
.rosa-brand__name {
    display: block;
    font-weight: 700;
    font-size: var(--rm-text-md);
    color: var(--rm-cocoa);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rosa-brand__accent { color: var(--rm-primary); }
.rosa-brand__sub {
    display: block;
    font-size: var(--rm-text-xs);
    color: var(--rm-muted);
    margin-top: 2px;
}

.rosa-topbar__search {
    position: relative;
    flex: 0 1 306px;
    min-width: 0;
}
.rosa-topbar__search .rosa-input { background: var(--rm-sunken); }

/* Chip do usuário */
.rosa-user {
    position: relative;
}
.rosa-user__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px 4px 4px;
    border: 0;
    background: transparent;
    border-radius: var(--rm-radius-md);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}
.rosa-user__btn:hover { background: var(--rm-hover); }
.rosa-user__name { display: block; font-weight: 600; font-size: var(--rm-text-base); color: var(--rm-ink); line-height: 1.2; }
.rosa-user__role { display: block; font-size: var(--rm-text-xs); color: var(--rm-muted); line-height: 1.3; }
.rosa-user__text { white-space: nowrap; }
.rosa-user__chevron { width: 16px; height: 16px; color: var(--rm-muted); }
.rosa-user__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 240px;
    background: var(--rm-surface);
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-radius-lg);
    box-shadow: var(--rm-shadow-pop);
    padding: 6px;
    z-index: 60;
}
.rosa-user__menu[hidden] { display: none; }
.rosa-user__menu-head { padding: 10px 12px; border-bottom: 1px solid var(--rm-border); margin-bottom: 4px; }
.rosa-user__menu-head p { margin: 0; }
.rosa-user__menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--rm-radius-sm);
    font-size: var(--rm-text-sm);
    color: var(--rm-ink-2);
}
.rosa-user__menu a:hover { background: var(--rm-hover); color: var(--rm-ink); }
.rosa-user__menu a svg { width: 16px; height: 16px; flex: none; }
.rosa-user__menu a.is-danger { color: var(--rm-danger); }

/* Sidebar */
.rosa-sidenav {
    grid-area: side;
    position: sticky;
    top: var(--rm-topbar-h);
    height: calc(100vh - var(--rm-topbar-h));
    display: flex;
    flex-direction: column;
    background: var(--rm-sidebar);
    border-right: 1px solid var(--rm-border);
}
.rosa-sidenav__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 14px 12px;
}
.rosa-sidenav__list,
.rosa-sidenav__sub { list-style: none; margin: 0; padding: 0; }
.rosa-sidenav__group {
    padding: 14px 12px 8px;
    font-size: var(--rm-text-xs);
    font-weight: 600;
    letter-spacing: var(--rm-tracking-label);
    text-transform: uppercase;
    color: var(--rm-faint);
}
.rosa-sidenav__list > .rosa-sidenav__group:first-child { padding-top: 0; }
.rosa-sidenav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 2px 0;
    padding: 8px 12px;
    border-radius: var(--rm-radius-lg);
    font-size: var(--rm-text-md);
    font-weight: 500;
    color: var(--rm-ink-2);
    line-height: 1.25;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.rosa-sidenav__link:hover { background: #f1f1f4; color: var(--rm-ink); }
.rosa-sidenav__link.is-active {
    background: var(--rm-primary-100);
    color: var(--rm-primary);
    box-shadow: var(--rm-shadow-nav);
}
.rosa-sidenav__icon { width: 18px; height: 18px; flex: none; stroke-width: 1.5; color: var(--rm-muted); }
.rosa-sidenav__link.is-active .rosa-sidenav__icon { color: var(--rm-primary); }
.rosa-sidenav__label { flex: 1; min-width: 0; }
.rosa-sidenav__step {
    width: 22px;
    height: 22px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--rm-radius-xs);
    background: var(--rm-neutral-bg);
    color: var(--rm-ink-2);
    font-size: var(--rm-text-xs);
    font-weight: 600;
}
.rosa-sidenav__link.is-active .rosa-sidenav__step { background: var(--rm-primary); color: #fff; }
.rosa-sidenav__chevron { width: 16px; height: 16px; color: var(--rm-faint); transition: transform 0.15s; }
.rosa-sidenav details[open] > summary .rosa-sidenav__chevron { transform: rotate(180deg); }
.rosa-sidenav details > summary { list-style: none; }
.rosa-sidenav details > summary::-webkit-details-marker { display: none; }
.rosa-sidenav__sub { padding-left: 14px; }

.rosa-sidenav__footer {
    flex: none;
    padding: 14px 16px 18px;
    border-top: 1px solid var(--rm-border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.rosa-sidenav__footer .rosa-user__name { font-size: var(--rm-text-base); }
.rosa-sidenav__version { display: block; font-size: 10px; color: var(--rm-faint); margin-top: 6px; }

/* Menu do usuário no rodapé da sidebar (padrão; 'user_menu_sidebar' => false volta à topbar): abre para cima. */
.rosa-sidenav__footer--menu { padding: 10px 10px 14px; }
.rosa-sidenav__user {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px;
    border: 0;
    background: transparent;
    border-radius: var(--rm-radius-md);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}
.rosa-sidenav__user:hover { background: var(--rm-hover); }
.rosa-sidenav__user > .min-w-0 { flex: 1; min-width: 0; }
.rosa-sidenav__footer--menu .rosa-user__menu { top: auto; right: auto; bottom: calc(100% - 4px); left: 10px; }

/* Área principal */
.rosa-main {
    grid-area: main;
    min-width: 0;
    padding: 30px 32px 56px;
}
.rosa-main__inner {
    max-width: var(--rm-content-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--rm-gap);
}
/* Layout largo: telas de dashboard passam a ocupar toda a largura disponível
   em vez do teto de --rm-content-max. Os componentes já são fluidos
   (grid/flex), então basta liberar o contentor. */
.rosa-layout-wide .rosa-main__inner {
    max-width: none;
}
.rosa-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--rm-text-sm);
    color: var(--rm-muted);
}
.rosa-breadcrumb li + li::before { content: "›"; margin-right: 6px; color: var(--rm-faint); }
.rosa-breadcrumb a:hover { color: var(--rm-primary); }

/* ============================================================
 * 3. Cabeçalho de página
 * ============================================================ */
.rosa-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.rosa-page-head__main { min-width: 0; flex: 1 1 420px; }
.rosa-page-head__title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-family: var(--rm-font-display);
    font-size: var(--rm-text-2xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rm-cocoa);
}
.rosa-page-head__step {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--rm-radius);
    background: var(--rm-primary);
    color: #fff;
    font-family: var(--rm-font-sans);
    font-size: var(--rm-text-lg);
    font-weight: 700;
    box-shadow: var(--rm-shadow-primary);
}
.rosa-page-head__sub {
    margin: 8px 0 0;
    font-size: var(--rm-text-md);
    color: var(--rm-muted);
    line-height: 1.5;
    max-width: 72ch;
}
.rosa-page-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rosa-page-head .rosa-info-pill { margin-top: 12px; }

/* Pílula "ⓘ De onde vêm estes números" */
.rosa-info-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--rm-border-strong);
    border-radius: var(--rm-radius-full);
    background: var(--rm-surface);
    font: inherit;
    font-size: var(--rm-text-sm);
    font-weight: 500;
    color: var(--rm-ink-2);
    cursor: pointer;
}
.rosa-info-pill:hover { border-color: var(--rm-primary-200); color: var(--rm-primary); }
.rosa-info-pill svg, .rosa-info-pill i { width: 14px; height: 14px; }

/* Título de seção solto ("A semana na esteira") */
.rosa-section-title {
    margin: 0;
    font-family: var(--rm-font-display);
    font-size: var(--rm-text-md);
    font-weight: 600;
    color: var(--rm-cocoa);
}

/* ============================================================
 * 4. Botões
 * ============================================================ */
.rosa-btn,
.rosa-btn-primary,
.rosa-btn-secondary,
.rosa-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--rm-border-strong);
    border-radius: var(--rm-radius);
    background: var(--rm-surface);
    color: var(--rm-ink);
    font: inherit;
    font-size: var(--rm-text-base);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--rm-shadow-xs);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
    opacity: 1;
}
.rosa-btn:hover,
.rosa-btn-secondary:hover { background: var(--rm-hover); border-color: #d2d2da; opacity: 1; }
.rosa-btn svg, .rosa-btn i,
.rosa-btn-primary svg, .rosa-btn-primary i { width: 18px; height: 18px; stroke-width: 1.75; }

.rosa-btn--primary,
.rosa-btn-primary {
    background: var(--rm-primary);
    border-color: var(--rm-primary);
    color: #fff;
    box-shadow: var(--rm-shadow-primary);
}
.rosa-btn--primary:hover,
.rosa-btn-primary:hover { background: var(--rm-primary-hover); border-color: var(--rm-primary-hover); color: #fff; opacity: 1; }
.rosa-btn--primary:active,
.rosa-btn-primary:active { background: var(--rm-primary-active); }

.rosa-btn--danger,
.rosa-btn-danger {
    background: var(--rm-danger-solid);
    border-color: var(--rm-danger-solid);
    color: #fff;
}
.rosa-btn--danger:hover,
.rosa-btn-danger:hover { background: #b91c1c; border-color: #b91c1c; opacity: 1; }

.rosa-btn--dark { background: var(--rm-dark); border-color: var(--rm-dark); color: #fff; }
.rosa-btn--dark:hover { background: #1f2937; border-color: #1f2937; }

.rosa-btn--ghost {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--rm-ink-2);
}
.rosa-btn--ghost:hover { background: var(--rm-neutral-bg); border-color: transparent; color: var(--rm-ink); }

.rosa-btn--sm { min-height: 34px; padding: 6px 12px; font-size: var(--rm-text-sm); }
.rosa-btn--lg { min-height: 52px; padding: 12px 20px; font-size: var(--rm-text-md); }
.rosa-btn--block { width: 100%; }
.rosa-btn[disabled], .rosa-btn.is-disabled { opacity: 0.5; pointer-events: none; }

.rosa-icon-btn {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--rm-border-strong);
    border-radius: var(--rm-radius);
    background: var(--rm-surface);
    color: var(--rm-ink-2);
    cursor: pointer;
}
.rosa-icon-btn:hover { background: var(--rm-hover); color: var(--rm-ink); }
.rosa-icon-btn--danger:hover { color: var(--rm-danger); border-color: var(--rm-danger-border); background: var(--rm-danger-bg); }

.rosa-link { color: var(--rm-primary); font-weight: 600; }
.rosa-link:hover { color: var(--rm-primary-hover); text-decoration: underline; }
.rosa-link-danger { color: var(--rm-danger); font-weight: 600; }

/* ============================================================
 * 5. Card
 * ============================================================ */
.rosa-card,
.rosa-panel,
.rosa-table-panel {
    position: relative;
    background: var(--rm-surface);
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-radius-xl);
    box-shadow: var(--rm-shadow-card);
}
/* Card estruturado (cabeçalho/corpo/faixa/tabela como filhos diretos): sem padding próprio.
   Cards legados com conteúdo solto mantêm o padding/flex do rosa-app.css. */
.rosa-card:has(> .rosa-card__head, > .rosa-card__body, > .rosa-toolbar, > .rosa-table-wrap, > .rosa-empty),
.rosa-table-panel {
    display: block;
    padding: 0;
    overflow: hidden;
}
.rosa-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 24px 16px;
}
.rosa-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--rm-font-display);
    font-size: var(--rm-text-lg);
    font-weight: 700;
    line-height: 1.3;
    color: var(--rm-cocoa);
}
.rosa-card__sub,
.rosa-card__desc {
    margin: 4px 0 0;
    font-size: var(--rm-text-base);
    color: var(--rm-faint);
    line-height: 1.45;
}
.rosa-card__body { padding: 0 24px 22px; }
.rosa-card__body--flush { padding: 0; }
.rosa-card__foot,
.rosa-card__footer {
    padding: 12px 24px;
    border-top: 1px solid var(--rm-border);
    font-size: var(--rm-text-sm);
    color: var(--rm-muted);
}
.rosa-card--pad { padding: 22px 24px; overflow: hidden; }
.rosa-card--warning {
    background: #fffcf2;
    border-color: #f8d98a;
}
.rosa-card--danger { background: #fffafa; border-color: var(--rm-danger-border); }
.rosa-card--interactive { transition: box-shadow 0.15s, border-color 0.15s; }
.rosa-card--interactive:hover { border-color: var(--rm-primary-200); box-shadow: var(--rm-shadow-pop); }

/* Card "adicionar" (Novo entregador) */
.rosa-card--add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 24px;
    text-align: center;
}
.rosa-card--add .rosa-card__title { font-family: var(--rm-font-sans); font-size: var(--rm-text-md); color: var(--rm-ink); }
.rosa-card--add p { margin: 0; font-size: var(--rm-text-sm); color: var(--rm-muted); line-height: 1.6; }
.rosa-card__add-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--rm-radius);
    background: var(--rm-neutral-bg);
    border: 1px solid var(--rm-border-strong);
    color: var(--rm-muted);
    font-size: 22px;
}

/* Grade de cards */
.rosa-grid { display: grid; gap: var(--rm-gap); }
.rosa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rosa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rosa-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.rosa-stack { display: flex; flex-direction: column; gap: 12px; }
.rosa-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ============================================================
 * 6. Formulário e barra de filtros
 * ============================================================ */
.rosa-label {
    display: block;
    margin-bottom: 8px;
    font-size: var(--rm-text-xs);
    font-weight: 600;
    letter-spacing: var(--rm-tracking-label);
    text-transform: uppercase;
    color: var(--rm-muted);
}
.rosa-label .req { color: var(--rm-primary); margin-left: 2px; }

.rosa-input,
.rosa-select,
.rosa-textarea,
.rosa-form input[type="text"],
.rosa-form input[type="email"],
.rosa-form input[type="password"],
.rosa-form input[type="number"],
.rosa-form input[type="date"],
.rosa-form input[type="search"],
.rosa-form select,
.rosa-form textarea {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--rm-border-strong);
    border-radius: var(--rm-radius);
    background: var(--rm-surface);
    color: var(--rm-ink);
    font: inherit;
    font-size: var(--rm-text-base);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.rosa-input::placeholder,
.rosa-textarea::placeholder { color: var(--rm-faint); }
.rosa-input:focus,
.rosa-select:focus,
.rosa-textarea:focus,
.rosa-form input:focus,
.rosa-form select:focus,
.rosa-form textarea:focus {
    outline: none;
    border-color: var(--rm-primary);
    box-shadow: var(--rm-ring);
}
.rosa-input--lg { min-height: 52px; padding: 12px 16px; font-size: var(--rm-text-md); }
.rosa-input.is-invalid { border-color: var(--rm-danger-solid); }
.rosa-textarea { min-height: 96px; resize: vertical; }

.rosa-select,
.rosa-form select {
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7280' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

/* Campo com ícone à esquerda e/ou ação à direita */
.rosa-field { position: relative; display: block; }
.rosa-field__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: var(--rm-faint);
    pointer-events: none;
}
.rosa-field .rosa-input { padding-left: 38px; }
.rosa-field .rosa-input--lg { padding-left: 44px; }
.rosa-field .rosa-input--lg ~ .rosa-field__icon,
.rosa-field--lg .rosa-field__icon { left: 16px; }
.rosa-field__action {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--rm-muted);
    border-radius: var(--rm-radius-sm);
    cursor: pointer;
}
.rosa-field__action:hover { color: var(--rm-ink); background: var(--rm-hover); }

.rosa-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--rm-text-sm);
    color: var(--rm-ink-2);
    cursor: pointer;
}
.rosa-check input,
.rosa-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--rm-primary);
    cursor: pointer;
}

/* Faixa de filtros dentro do card */
.rosa-toolbar,
.rosa-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--rm-sunken);
    border-top: 1px solid var(--rm-border);
    border-bottom: 1px solid var(--rm-border);
}
.rosa-filter-bar { border: 1px solid var(--rm-border); border-radius: var(--rm-radius-xl); box-shadow: none; }
.rosa-card .rosa-filter-bar { border-radius: 0; border-width: 1px 0; }
.rosa-toolbar .rosa-field,
.rosa-toolbar__search { flex: 1 1 260px; min-width: 200px; }
.rosa-toolbar .rosa-select { width: auto; flex: 0 1 200px; min-width: 150px; }
.rosa-toolbar__count {
    margin-left: auto;
    font-size: var(--rm-text-base);
    color: var(--rm-muted);
    white-space: nowrap;
}
.rosa-toolbar__count strong { color: var(--rm-ink); font-weight: 700; }

/* ============================================================
 * 7. Tabela
 * ============================================================ */
.rosa-table-wrap {
    width: 100%;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
/* Tabelas legadas dentro de .rosa-table-wrap / .rosa-table-panel herdam o mesmo visual */
.rosa-table,
.rosa-table-wrap table,
.rosa-table-panel table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--rm-text-base);
    font-weight: 400;
    color: var(--rm-ink);
    background: transparent;
}
.rosa-table th,
.rosa-table-wrap thead th,
.rosa-table-panel thead th {
    padding: 14px 16px 12px;
    text-align: left;
    font-size: var(--rm-text-xs);
    font-weight: 600;
    letter-spacing: var(--rm-tracking-label);
    text-transform: uppercase;
    color: var(--rm-faint);
    white-space: nowrap;
    border-bottom: 1px solid var(--rm-border);
    background: var(--rm-surface);
}
.rosa-table td,
.rosa-table-wrap tbody td,
.rosa-table-panel tbody td {
    padding: 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--rm-border);
    font-size: var(--rm-text-base);
    font-weight: 400;
    color: var(--rm-ink);
    line-height: 1.4;
}
.rosa-table tbody tr:last-child td,
.rosa-table-wrap tbody tr:last-child td { border-bottom: 0; }
.rosa-table tbody tr,
.rosa-table-wrap tbody tr { transition: background 0.12s; }
.rosa-table tbody tr:hover,
.rosa-table-wrap tbody tr:hover { background: var(--rm-hover); }
.rosa-table th:first-child,
.rosa-table td:first-child,
.rosa-table-wrap th:first-child,
.rosa-table-wrap td:first-child { padding-left: 24px; }
.rosa-table th:last-child,
.rosa-table td:last-child,
.rosa-table-wrap th:last-child,
.rosa-table-wrap td:last-child { padding-right: 24px; }
.rosa-table .is-num,
.rosa-table .is-right { text-align: right; font-variant-numeric: tabular-nums; }
.rosa-table .is-check { width: 48px; }
.rosa-table .is-time { width: 72px; font-variant-numeric: tabular-nums; }
.rosa-cell__primary { display: block; font-weight: 500; color: var(--rm-ink); }
.rosa-cell__meta { display: block; margin-top: 2px; font-size: var(--rm-text-xs); color: var(--rm-muted); font-variant-numeric: tabular-nums; }
.rosa-table__note {
    padding: 12px 24px;
    border-top: 1px solid var(--rm-border);
    font-size: var(--rm-text-sm);
    color: var(--rm-muted);
}

/* Lista simples (linha com título/meta à esquerda e valor à direita) */
.rosa-list { list-style: none; margin: 0; padding: 0; }
.rosa-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    border-top: 1px solid var(--rm-border);
}
.rosa-list__item:first-child { border-top: 0; }
a.rosa-list__item:hover { background: var(--rm-hover); }

/* ============================================================
 * 8. Status, badges e contadores
 * ============================================================ */
/* Pílula de status com ponto: <span class="rosa-status rosa-status--success">Entregue</span> */
.rosa-status {
    --_fg: var(--rm-neutral);
    --_bg: var(--rm-neutral-bg);
    --_bd: var(--rm-neutral-border);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border: 1px solid var(--_bd);
    border-radius: var(--rm-radius-full);
    background: var(--_bg);
    color: var(--_fg);
    font-size: var(--rm-text-xs);
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.rosa-status::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}
.rosa-status--plain::before { display: none; }
.rosa-status--success { --_fg: var(--rm-success); --_bg: var(--rm-success-bg); --_bd: var(--rm-success-border); }
.rosa-status--warning { --_fg: var(--rm-warning); --_bg: var(--rm-warning-bg); --_bd: var(--rm-warning-border); }
.rosa-status--danger  { --_fg: var(--rm-danger);  --_bg: var(--rm-danger-bg);  --_bd: var(--rm-danger-border); }
.rosa-status--info    { --_fg: var(--rm-info);    --_bg: var(--rm-info-bg);    --_bd: var(--rm-info-border); }
.rosa-status--primary { --_fg: var(--rm-primary); --_bg: var(--rm-primary-50); --_bd: var(--rm-primary-200); }

/* Badge legado: mesmo visual da pílula, sem ponto */
.rosa-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border: 1px solid var(--rm-neutral-border);
    border-radius: var(--rm-radius-full);
    background: var(--rm-neutral-bg);
    color: var(--rm-neutral);
    font-size: var(--rm-text-xs);
    font-weight: 600;
    line-height: 1.6;
}
.rosa-badge--success { color: var(--rm-success); background: var(--rm-success-bg); border-color: var(--rm-success-border); }
.rosa-badge--warning { color: var(--rm-warning); background: var(--rm-warning-bg); border-color: var(--rm-warning-border); }
.rosa-badge--danger  { color: var(--rm-danger);  background: var(--rm-danger-bg);  border-color: var(--rm-danger-border); }
.rosa-badge--info    { color: var(--rm-info);    background: var(--rm-info-bg);    border-color: var(--rm-info-border); }
.rosa-badge--muted   { color: var(--rm-neutral); background: var(--rm-neutral-bg); border-color: var(--rm-neutral-border); }

/* Contador: cinza (quantidade) ou rosa sólido (pede atenção) */
.rosa-count,
.rosa-sidebar-nav-badge {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--rm-radius-full);
    background: #e9eaee;
    color: var(--rm-ink-2);
    font-size: var(--rm-text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.rosa-count--alert { background: var(--rm-primary); color: #fff; }

/* Número de etapa (quadrado) */
.rosa-stepnum {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: var(--rm-radius-xs);
    background: var(--rm-neutral-bg);
    color: var(--rm-ink-2);
    font-size: var(--rm-text-xs);
    font-weight: 600;
}
.rosa-stepnum--primary { background: var(--rm-primary); color: #fff; }

/* ============================================================
 * 9. Esteira (navegação por etapas) e progresso
 * ============================================================ */
/* Card de etapas: <nav class="rosa-steps"><a class="rosa-steps__item is-done">… */
.rosa-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    background: var(--rm-surface);
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-radius-xl);
    box-shadow: var(--rm-shadow-card);
}
.rosa-steps__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 8px 12px;
    border-radius: var(--rm-radius-lg);
    font-size: var(--rm-text-base);
    color: var(--rm-faint);
    line-height: 1.25;
}
a.rosa-steps__item:hover { background: var(--rm-hover); }
.rosa-steps__mark {
    width: 26px;
    height: 26px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--rm-radius-xs);
    background: var(--rm-neutral-bg);
    color: var(--rm-ink-2);
    font-size: var(--rm-text-xs);
    font-weight: 600;
}
.rosa-steps__mark svg { width: 14px; height: 14px; stroke-width: 2.25; }
.rosa-steps__item.is-done { color: var(--rm-ink-2); }
.rosa-steps__item.is-done .rosa-steps__mark { background: var(--rm-success-bg); color: var(--rm-success); }
.rosa-steps__item.is-current { background: var(--rm-primary-50); color: var(--rm-primary); font-weight: 500; }
.rosa-steps__item.is-current .rosa-steps__mark { background: var(--rm-primary); color: #fff; }

/* Progresso linear com círculos (Caixa no polo → Cidades → Registros → Fim) */
.rosa-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.rosa-progress__step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--rm-text-sm);
    color: var(--rm-muted);
    white-space: nowrap;
}
.rosa-progress__step + .rosa-progress__step::before {
    content: "";
    width: 48px;
    height: 2px;
    border-radius: 2px;
    background: var(--rm-border-strong);
    flex: 1 1 48px;
}
.rosa-progress__step.is-done + .rosa-progress__step::before { background: #86efac; }
.rosa-progress__dot {
    width: 28px;
    height: 28px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--rm-neutral-bg);
    color: var(--rm-ink-2);
    font-size: var(--rm-text-xs);
    font-weight: 600;
}
.rosa-progress__dot svg { width: 15px; height: 15px; stroke-width: 2.5; }
.rosa-progress__step.is-done .rosa-progress__dot { background: var(--rm-success-solid); color: #fff; }
.rosa-progress__step.is-current { color: var(--rm-ink); font-weight: 600; }
.rosa-progress__step.is-current .rosa-progress__dot {
    background: var(--rm-surface);
    color: var(--rm-primary);
    box-shadow: inset 0 0 0 2px var(--rm-primary);
}

/* ============================================================
 * 10. Abas e chips
 * ============================================================ */
.rosa-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--rm-border-strong);
    overflow-x: auto;
}
.rosa-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 12px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    font-size: var(--rm-text-md);
    font-weight: 500;
    color: var(--rm-muted);
    white-space: nowrap;
    cursor: pointer;
}
.rosa-tab:hover { color: var(--rm-ink); }
.rosa-tab.is-active { color: var(--rm-primary); border-bottom-color: var(--rm-primary); }

/* Chip de filtro/seleção com ponto de status */
.rosa-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 6px 14px;
    border: 1px solid var(--rm-border-strong);
    border-radius: var(--rm-radius-full);
    background: var(--rm-surface);
    font: inherit;
    font-size: var(--rm-text-base);
    font-weight: 600;
    color: var(--rm-ink);
    cursor: pointer;
    white-space: nowrap;
}
.rosa-chip:hover { border-color: #d2d2da; }
.rosa-chip__meta { font-weight: 400; color: var(--rm-muted); }
.rosa-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rm-neutral-solid); flex: none; }
.rosa-chip__dot--success { background: var(--rm-success-solid); }
.rosa-chip__dot--warning { background: var(--rm-warning-solid); }
.rosa-chip__dot--danger { background: var(--rm-danger-solid); }
.rosa-chip.is-active { background: var(--rm-dark); border-color: var(--rm-dark); color: #fff; }
.rosa-chip.is-active .rosa-chip__meta { color: rgba(255, 255, 255, 0.6); }
.rosa-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============================================================
 * 11. Lista de tarefas, métricas, medidor, barras
 * ============================================================ */
/* Item "Precisa de você" */
.rosa-task {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--rm-border);
}
.rosa-task:first-child { border-top: 0; padding-top: 4px; }
.rosa-task__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--rm-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rm-muted);
}
.rosa-task__title { margin: 6px 0 4px; font-size: var(--rm-text-md); font-weight: 600; color: var(--rm-ink); }
.rosa-task__text { margin: 0; font-size: var(--rm-text-base); color: var(--rm-ink-2); line-height: 1.55; }
.rosa-task__hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 6px 0 0;
    font-size: var(--rm-text-base);
    color: var(--rm-muted);
}
.rosa-task__hint svg, .rosa-task__hint i { width: 14px; height: 14px; margin-top: 4px; flex: none; }
.rosa-task__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Métrica: rótulo pequeno + número grande */
.rosa-metric__label { display: block; font-size: var(--rm-text-xs); color: var(--rm-muted); line-height: 1.4; }
.rosa-metric__value {
    display: block;
    margin-top: 4px;
    font-size: var(--rm-text-xl);
    font-weight: 700;
    line-height: 1.15;
    color: var(--rm-ink);
    font-variant-numeric: tabular-nums;
}
.rosa-metric__value--xl { font-size: 2rem; }
.rosa-metric__value--danger { color: var(--rm-danger-solid); }
.rosa-metric__note { display: block; margin-top: 6px; font-size: var(--rm-text-sm); color: var(--rm-muted); line-height: 1.4; }
.rosa-metric__note--alert { color: var(--rm-danger); }
.rosa-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

/* Medidor com meta: <div class="rosa-meter" style="--value:88%;--target:80%"> */
.rosa-meter {
    --value: 0%;
    --target: 0%;
    position: relative;
    height: 8px;
    border-radius: var(--rm-radius-full);
    background: #ebebef;
}
.rosa-meter__fill {
    display: block;
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--value);
    border-radius: inherit;
    background: var(--rm-success-solid);
}
.rosa-meter__fill--warning { background: var(--rm-warning-solid); }
.rosa-meter__fill--danger { background: var(--rm-danger-solid); }
.rosa-meter__fill--primary { background: var(--rm-primary); }
.rosa-meter[data-target]::after,
.rosa-meter--target::after {
    content: "";
    position: absolute;
    left: var(--target);
    top: -3px;
    bottom: -3px;
    width: 2px;
    border-radius: 1px;
    background: var(--rm-ink-2);
}
.rosa-meter__caption {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    font-size: var(--rm-text-sm);
    color: var(--rm-muted);
}
.rosa-meter__caption strong { color: var(--rm-success); }
.rosa-meter__caption .rosa-text-warning { color: var(--rm-warning); }
.rosa-meter__caption .rosa-text-danger { color: var(--rm-danger); }

/* Barras horizontais (ranking de motivos) */
.rosa-bars { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.rosa-bars__row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: var(--rm-text-sm); color: var(--rm-ink-2); }
.rosa-bars__value { font-weight: 700; color: var(--rm-ink); font-variant-numeric: tabular-nums; }
.rosa-bars__track { grid-column: 1 / -1; height: 8px; border-radius: var(--rm-radius-full); background: #ebebef; overflow: hidden; }
.rosa-bars__fill { display: block; height: 100%; border-radius: inherit; background: var(--rm-primary); }

/* ============================================================
 * 12. Avatar, icon tile, paginação, vazio
 * ============================================================ */
.rosa-avatar {
    width: 36px;
    height: 36px;
    flex: none;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--rm-primary-100);
    color: var(--rm-primary);
    font-size: var(--rm-text-sm);
    font-weight: 700;
    overflow: hidden;
}
.rosa-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rosa-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.rosa-avatar--lg { width: 48px; height: 48px; font-size: var(--rm-text-md); }
/* Avatar de pessoa operacional (entregador) — quadrado rosa sólido */
.rosa-avatar--tile { border-radius: var(--rm-radius-md); background: var(--rm-primary); color: #fff; }

.rosa-icon-tile {
    --_fg: var(--rm-primary);
    --_bg: var(--rm-primary-100);
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--rm-radius);
    background: var(--_bg);
    color: var(--_fg);
}
.rosa-icon-tile svg, .rosa-icon-tile i { width: 20px; height: 20px; stroke-width: 1.75; }
.rosa-icon-tile--warning { --_fg: #b45309; --_bg: #fef3c7; }
.rosa-icon-tile--info    { --_fg: #1d4ed8; --_bg: #dbeafe; }
.rosa-icon-tile--danger  { --_fg: #dc2626; --_bg: #fee2e2; }
.rosa-icon-tile--success { --_fg: #15803d; --_bg: #dcfce7; }
.rosa-icon-tile--neutral { --_fg: var(--rm-muted); --_bg: var(--rm-neutral-bg); }
.rosa-icon-tile--round { border-radius: 50%; }
.rosa-icon-tile--lg { width: 56px; height: 56px; border-radius: var(--rm-radius-lg); }
.rosa-icon-tile--lg svg, .rosa-icon-tile--lg i { width: 28px; height: 28px; }

/* Anterior / próxima etapa */
.rosa-pager {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--rm-border-strong);
}
.rosa-pager__link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: var(--rm-surface);
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-radius-lg);
    box-shadow: var(--rm-shadow-xs);
    line-height: 1.25;
}
.rosa-pager__link:hover { border-color: var(--rm-primary-200); }
.rosa-pager__link small { display: block; font-size: var(--rm-text-xs); color: var(--rm-muted); }
.rosa-pager__link strong { display: block; font-size: var(--rm-text-md); font-weight: 700; color: var(--rm-ink); }
.rosa-pager__link--next { margin-left: auto; text-align: right; }
.rosa-pager__link svg, .rosa-pager__link i { width: 18px; height: 18px; }

.rosa-empty {
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
}
.rosa-empty__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--rm-neutral-bg); color: var(--rm-muted); }
.rosa-empty__title { margin: 4px 0 0; font-weight: 600; color: var(--rm-ink); }
.rosa-empty__text { margin: 0; font-size: var(--rm-text-sm); color: var(--rm-muted); max-width: 44ch; }

/* ============================================================
 * 13. Alertas / flash
 * ============================================================ */
.rosa-alert,
.rosa-flash {
    --_fg: var(--rm-info);
    --_bg: var(--rm-info-bg);
    --_bd: var(--rm-info-border);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--_bd);
    border-radius: var(--rm-radius-lg);
    background: var(--_bg);
    color: var(--_fg);
    font-size: var(--rm-text-base);
    line-height: 1.5;
}
.rosa-alert--success, .rosa-flash--success { --_fg: var(--rm-success); --_bg: var(--rm-success-bg); --_bd: var(--rm-success-border); }
.rosa-alert--warning, .rosa-flash--warning { --_fg: var(--rm-warning); --_bg: var(--rm-warning-bg); --_bd: var(--rm-warning-border); }
.rosa-alert--error,   .rosa-flash--error   { --_fg: var(--rm-danger);  --_bg: var(--rm-danger-bg);  --_bd: var(--rm-danger-border); }

/* ============================================================
 * 14. Login
 * ============================================================ */
.rosa-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 24px;
    background:
        radial-gradient(800px 360px at 110% -10%, rgba(228, 0, 106, 0.06), transparent 70%),
        var(--rm-canvas);
}
.rosa-auth__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}
.rosa-auth__brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
.rosa-auth__brand img { height: 78px; width: auto; }
.rosa-auth__product {
    padding-left: 18px;
    border-left: 1px solid var(--rm-border-strong);
    font-size: var(--rm-text-md);
    font-weight: 700;
    color: var(--rm-cocoa);
}
.rosa-auth__product span { color: var(--rm-primary); }
.rosa-auth__portal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--rm-surface);
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-radius-full);
    box-shadow: var(--rm-shadow-card);
    font-size: var(--rm-text-base);
    font-weight: 500;
    color: var(--rm-ink-2);
}
.rosa-auth__portal svg, .rosa-auth__portal i { width: 16px; height: 16px; color: var(--rm-muted); }
.rosa-auth__portal:hover { color: var(--rm-primary); }
.rosa-auth__hero {
    width: 100%;
    max-width: 1180px;
    margin: 44px auto 0;
}
.rosa-auth__headline {
    margin: 0;
    font-family: var(--rm-font-display);
    font-size: var(--rm-text-2xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rm-cocoa);
}
.rosa-auth__headline span { display: block; color: var(--rm-primary); }
.rosa-auth__lead {
    margin: 14px 0 0;
    max-width: 60ch;
    font-size: var(--rm-text-md);
    line-height: 1.6;
    color: var(--rm-muted);
}
.rosa-auth__center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 0 16px;
}
.rosa-auth__card {
    width: 100%;
    max-width: 528px;
    padding: 36px;
    background: var(--rm-surface);
    border: 1px solid var(--rm-border);
    border-radius: 24px;
    box-shadow: var(--rm-shadow-auth);
}
.rosa-auth__secure {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--rm-primary-200);
    border-radius: var(--rm-radius-full);
    background: var(--rm-primary-50);
    font-size: var(--rm-text-xs);
    color: var(--rm-primary);
}
.rosa-auth__secure strong { font-weight: 600; }
.rosa-auth__secure svg, .rosa-auth__secure i { width: 14px; height: 14px; }
.rosa-auth__title {
    margin: 22px 0 6px;
    font-family: var(--rm-font-display);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--rm-ink);
}
.rosa-auth__sub { margin: 0 0 24px; font-size: var(--rm-text-base); color: var(--rm-muted); }
.rosa-auth__form { display: flex; flex-direction: column; gap: 20px; }
.rosa-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rosa-auth__forgot { font-size: var(--rm-text-sm); font-weight: 600; color: var(--rm-primary); }
.rosa-auth__alt { margin: 4px 0 0; text-align: center; font-size: var(--rm-text-base); color: var(--rm-muted); }
.rosa-auth__alt a { font-weight: 600; color: var(--rm-primary); }
.rosa-auth__foot { margin: 18px 0 0; text-align: center; font-size: var(--rm-text-xs); color: var(--rm-faint); line-height: 1.6; }

/* Ponte: corpos de card legados (rosa-login-section/-btn/-input) passados via $loginCardBody */
.rosa-auth .rosa-login-section { margin: 0; }
.rosa-auth .rosa-login-section + .rosa-login-section { margin-top: 20px; }
.rosa-auth .rosa-login-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: var(--rm-text-md);
    font-weight: 600;
    color: var(--rm-ink);
}
.rosa-auth .rosa-login-section__title svg { width: 18px; height: 18px; color: var(--rm-primary); }
.rosa-auth .rosa-login-section__desc { margin: 0 0 16px; font-size: var(--rm-text-base); color: var(--rm-muted); line-height: 1.55; }
.rosa-auth .rosa-login-hint { margin: 10px 0 0; text-align: center; font-size: var(--rm-text-xs); color: var(--rm-faint); line-height: 1.5; }
.rosa-auth .rosa-login-label { display: block; margin-bottom: 8px; font-size: var(--rm-text-xs); font-weight: 600; letter-spacing: var(--rm-tracking-label); text-transform: uppercase; color: var(--rm-muted); }
.rosa-auth .rosa-login-input {
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid var(--rm-border-strong);
    border-radius: var(--rm-radius);
    background: var(--rm-surface);
    font: inherit;
    font-size: var(--rm-text-md);
    color: var(--rm-ink);
}
.rosa-auth .rosa-login-input:focus { outline: none; border-color: var(--rm-primary); box-shadow: var(--rm-ring); }
.rosa-auth .rosa-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 12px 20px;
    border: 1px solid var(--rm-primary);
    border-radius: var(--rm-radius);
    background: var(--rm-primary);
    color: #fff;
    font: inherit;
    font-size: var(--rm-text-md);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--rm-shadow-primary);
}
.rosa-auth .rosa-login-btn:hover { background: var(--rm-primary-hover); border-color: var(--rm-primary-hover); }
.rosa-auth .rosa-login-btn svg { width: 18px; height: 18px; }
.rosa-auth .rosa-login-btn--ghost { background: var(--rm-surface); border-color: var(--rm-border-strong); color: var(--rm-ink); box-shadow: var(--rm-shadow-xs); }
.rosa-auth .rosa-login-btn--ghost:hover { background: var(--rm-hover); border-color: #d2d2da; }
.rosa-auth .rosa-login-dev { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--rm-border-strong); display: flex; flex-direction: column; gap: 10px; }
.rosa-auth .rosa-login-dev-form { display: flex; flex-direction: column; gap: 10px; }
.rosa-auth .rosa-login-btn__label-loading { display: none; }
.rosa-auth .is-loading .rosa-login-btn__label-loading { display: inline; }
.rosa-auth .is-loading:has(.rosa-login-btn__label-loading) .rosa-login-btn__label-busy { display: none; }

/* Estado "Entrando..." — reaproveita o JS rosa-login.js */
.rosa-auth .rosa-login-btn__spinner,
.rosa-auth .rosa-login-btn__label-busy { display: none; }
.rosa-auth .is-loading .rosa-login-btn__spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rosa-spin 0.7s linear infinite;
}
.rosa-auth .is-loading .rosa-login-btn__label-idle { display: none; }
.rosa-auth .is-loading .rosa-login-btn__label-busy { display: inline; }
.rosa-auth .is-loading .rosa-login-btn__arrow { display: none; }
@keyframes rosa-spin { to { transform: rotate(360deg); } }

/* ============================================================
 * 15. Responsivo
 * ============================================================ */
/* Tablet e celular: a sidebar vira gaveta lateral, aberta pelo botão hambúrguer */
@media (max-width: 1023px) {
    .rosa-app {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: var(--rm-topbar-h) minmax(0, 1fr);
        grid-template-areas: "top" "main";
        background:
            radial-gradient(900px 260px at 85% -80px, rgba(228, 0, 106, 0.06), transparent 70%),
            var(--rm-canvas);
    }
    .rosa-app--banner {
        grid-template-rows: auto var(--rm-topbar-h) minmax(0, 1fr);
        grid-template-areas: "banner" "top" "main";
    }
    .rosa-topbar { position: sticky; padding: 10px 16px; min-height: var(--rm-topbar-h); }
    .rosa-nav-toggle { display: inline-flex; }
    .rosa-brand { width: auto; }
    .rosa-topbar__search { flex: 0 1 72px; }
    .rosa-topbar__search .rosa-input { padding-right: 4px; }

    .rosa-nav-backdrop {
        top: var(--rm-topbar-h);
        height: calc(100dvh - var(--rm-topbar-h));
        z-index: 42;
    }

    .rosa-sidenav {
        position: fixed;
        top: var(--rm-topbar-h);
        left: 0;
        height: calc(100dvh - var(--rm-topbar-h));
        width: min(300px, 85vw);
        z-index: 45;
        border-right: 1px solid var(--rm-border);
        box-shadow: var(--rm-shadow-pop);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }
    .rosa-app.rosa-nav-is-open .rosa-sidenav { transform: translateX(0); }
    .rosa-main { padding: 22px 16px 48px; }
    .rosa-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rosa-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rosa-steps { grid-template-columns: repeat(5, auto); justify-content: start; }
    .rosa-steps__item:not(.is-current) .rosa-steps__label { display: none; }
}

body.rosa-nav-open { overflow: hidden; }

@media (max-width: 767px) {
    .rosa-topbar__search,
    .rosa-topbar__action-label,
    .rosa-user__text { display: none; }
    .rosa-grid--2,
    .rosa-grid--3,
    .rosa-grid--5 { grid-template-columns: minmax(0, 1fr); }
    .rosa-page-head__title { font-size: 1.625rem; }
    .rosa-card__head { padding: 18px 18px 14px; }
    .rosa-card__body { padding: 0 18px 18px; }
    .rosa-toolbar { padding: 12px; }
    .rosa-toolbar .rosa-select { flex: 1 1 140px; }
    .rosa-progress { flex-wrap: wrap; }
    .rosa-progress__step + .rosa-progress__step::before { display: none; }
    .rosa-auth { padding: 16px; }
    .rosa-auth__brand img { height: 56px; }
    .rosa-auth__card { padding: 24px 20px; }
    .rosa-auth__portal span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rosa-ds *, .rosa-ds *::before, .rosa-ds *::after { transition: none !important; animation: none !important; }
}

/* Toolbar com rótulo acima de cada controle (filtros de listas). */
.rosa-toolbar--labeled { align-items: flex-end; }
.rosa-toolbar--labeled > .rosa-toolbar__field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 170px; min-width: 150px; }
.rosa-toolbar--labeled .rosa-toolbar__field .rosa-select,
.rosa-toolbar--labeled .rosa-toolbar__field .rosa-input { width: 100%; }
/* O campo é coluna: sem isto o `flex: 0 1 200px` do .rosa-toolbar .rosa-select vira ALTURA de 200px. */
.rosa-toolbar--labeled .rosa-toolbar__field .rosa-select { flex: none; min-width: 0; height: auto; }
.rosa-toolbar--labeled .rosa-btn { flex: 0 0 auto; }

/* ============================================================
 * 16. Portal — catálogo de sistemas (portal home)
 * Mesma linguagem visual da tela de login (fundo, topo com marca),
 * mas com uma grade de cards no lugar do card de formulário.
 * ============================================================ */
.rosa-portal {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 24px;
    background:
        radial-gradient(800px 360px at 110% -10%, rgba(228, 0, 106, 0.06), transparent 70%),
        var(--rm-canvas);
}
.rosa-portal__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}
.rosa-portal__brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
.rosa-portal__brand img { height: 56px; width: auto; }
.rosa-portal__product {
    padding-left: 18px;
    border-left: 1px solid var(--rm-border-strong);
    font-size: var(--rm-text-md);
    font-weight: 700;
    color: var(--rm-cocoa);
}
.rosa-portal__product span { color: var(--rm-primary); }
.rosa-portal__portal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--rm-surface);
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-radius-full);
    box-shadow: var(--rm-shadow-card);
    font-size: var(--rm-text-base);
    font-weight: 500;
    color: var(--rm-ink-2);
    text-decoration: none;
    flex: 0 0 auto;
}
.rosa-portal__portal svg, .rosa-portal__portal i { width: 16px; height: 16px; color: var(--rm-muted); }
.rosa-portal__portal:hover { color: var(--rm-primary); }
.rosa-portal__hero { width: 100%; max-width: 1180px; margin: 56px auto 0; }
.rosa-portal__headline {
    margin: 0;
    font-family: var(--rm-font-display);
    font-size: var(--rm-text-3xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rm-cocoa);
}
.rosa-portal__headline span { color: var(--rm-primary); }
.rosa-portal__lead { margin: 14px 0 0; max-width: 60ch; font-size: var(--rm-text-md); line-height: 1.6; color: var(--rm-muted); }
.rosa-portal__grid {
    width: 100%;
    max-width: 1180px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}
.rosa-portal-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 28px;
    text-decoration: none;
}
.rosa-portal-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.rosa-portal-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--rm-font-display);
    font-size: var(--rm-text-lg);
    font-weight: 700;
    color: var(--rm-cocoa);
}
.rosa-portal-card__desc { margin: 0; font-size: var(--rm-text-sm); line-height: 1.55; color: var(--rm-muted); }
.rosa-portal-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--rm-text-sm);
    font-weight: 600;
    color: var(--rm-primary);
}
.rosa-portal-card__cta svg, .rosa-portal-card__cta i { width: 16px; height: 16px; transition: transform 0.15s; }
.rosa-portal-card:hover .rosa-portal-card__cta svg,
.rosa-portal-card:hover .rosa-portal-card__cta i { transform: translateX(3px); }
.rosa-portal__foot { width: 100%; max-width: 1180px; margin: 8px auto 0; padding-bottom: 24px; text-align: center; font-size: var(--rm-text-xs); color: var(--rm-faint); }
@media (max-width: 767px) {
    .rosa-portal { padding: 16px; }
    .rosa-portal__brand img { height: 44px; }
    .rosa-portal__headline { font-size: var(--rm-text-2xl); }
    .rosa-portal__grid { grid-template-columns: minmax(0, 1fr); }
    .rosa-portal__portal span { display: none; }
}

/* ============================================================
 * 17. Dashboards — KPI e gráficos (sem lib de JS)
 * SVG gerado no servidor (PHP), cores via var(--rm-*). Ver exemplo
 * completo em apps/app_csrh/views/rh/dashboard.php e docs/DESIGN-SYSTEM.md.
 * ============================================================ */

/* Grade de cartões de indicador (KPI) */
.rosa-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rosa-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--rm-surface);
    border: 1px solid var(--rm-border);
    border-top: 3px solid var(--_accent, var(--rm-border-strong));
    border-radius: var(--rm-radius-xl);
    box-shadow: var(--rm-shadow-card);
    padding: 18px 20px;
}
.rosa-kpi--warning { --_accent: var(--rm-warning-solid); }
.rosa-kpi--success { --_accent: var(--rm-success-solid); }
.rosa-kpi--danger  { --_accent: var(--rm-danger-solid); }
.rosa-kpi--info    { --_accent: var(--rm-info-solid); }
.rosa-kpi--primary { --_accent: var(--rm-primary); }
.rosa-kpi__label { font-size: var(--rm-text-xs); font-weight: 700; letter-spacing: var(--rm-tracking-label); text-transform: uppercase; color: var(--rm-muted); }
.rosa-kpi__row { display: flex; align-items: baseline; gap: 8px; }
.rosa-kpi__value { font-family: var(--rm-font-display); font-size: var(--rm-text-2xl); font-weight: 700; color: var(--rm-ink); line-height: 1; }
.rosa-kpi__pct { font-size: var(--rm-text-sm); font-weight: 700; color: var(--_accent, var(--rm-muted)); }
.rosa-kpi__note { font-size: var(--rm-text-xs); color: var(--rm-faint); }

/* Variante escura — indicador "total"/destaque do bloco */
.rosa-kpi--dark { background: var(--rm-dark); border-color: var(--rm-dark); }
.rosa-kpi--dark .rosa-kpi__label { color: rgba(255, 255, 255, 0.6); }
.rosa-kpi--dark .rosa-kpi__value { color: #fff; }
.rosa-kpi--dark .rosa-kpi__note { color: rgba(255, 255, 255, 0.55); margin-top: 6px; }
.rosa-kpi__progress { height: 6px; border-radius: var(--rm-radius-full); background: rgba(255, 255, 255, 0.14); overflow: hidden; margin-top: 6px; }
.rosa-kpi__progress-fill { display: block; height: 100%; background: var(--rm-success-solid); border-radius: inherit; }

/* Gráfico de barras verticais (ex.: pedidos por status) */
.rosa-vbars { display: flex; align-items: flex-end; justify-content: space-around; gap: 24px; padding-top: 8px; }
.rosa-vbar { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.rosa-vbar__value { font-weight: 700; font-size: var(--rm-text-sm); color: var(--rm-ink); font-variant-numeric: tabular-nums; }
.rosa-vbar__track { display: flex; align-items: flex-end; justify-content: center; height: 160px; width: 100%; }
.rosa-vbar__col { width: 100%; max-width: 64px; border-radius: 8px 8px 0 0; transition: height 0.2s; }
.rosa-vbar__label { font-size: var(--rm-text-xs); color: var(--rm-muted); }

/* Donut (composição por categoria) + legenda */
.rosa-donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.rosa-donut { position: relative; width: 150px; height: 150px; flex: 0 0 auto; }
.rosa-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.rosa-donut__value { font-family: var(--rm-font-display); font-size: var(--rm-text-xl); font-weight: 700; color: var(--rm-ink); line-height: 1; }
.rosa-donut__label { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rm-faint); margin-top: 4px; }
.rosa-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 160px; }
.rosa-legend li { display: flex; align-items: center; gap: 8px; font-size: var(--rm-text-sm); color: var(--rm-ink-2); }
.rosa-legend__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.rosa-legend__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rosa-legend__value { font-weight: 700; color: var(--rm-ink); font-variant-numeric: tabular-nums; }

/* Gráfico de linhas (tendência mensal) — legenda, grade e rótulos do eixo X */
.rosa-linechart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.rosa-linechart-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--rm-text-xs); color: var(--rm-muted); }
.rosa-linechart-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.rosa-linechart { display: block; width: 100%; height: auto; overflow: visible; }
.rosa-linechart__grid { stroke: var(--rm-border); stroke-width: 1; stroke-dasharray: 3 4; }
.rosa-linechart-labels { display: grid; margin-top: 4px; font-size: var(--rm-text-xs); color: var(--rm-muted); text-align: center; }
.rosa-linechart-labels span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) { .rosa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .rosa-kpis { grid-template-columns: minmax(0, 1fr); } }

} /* @layer components */