/* Shared visual foundation for DOCU Compras V2 application pages. */
:root {
    --v2-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --v2-text: #17233c;
    --v2-muted: #71809a;
    --v2-primary: #4263eb;
    --v2-link: #3157dc;
    --v2-page: #f5f7fb;
    --v2-surface: #ffffff;
    --v2-subtle: #fbfcfe;
    --v2-border: #e2e8f2;
    --v2-control-border: #dce3ef;
    --v2-radius: 14px;
    --v2-radius-control: 8px;
    --v2-shadow: 0 8px 24px rgba(36, 59, 104, 0.06);
    --v2-content-padding: 28px;
}

.v2-app { min-width: 0; color: var(--v2-text); background: var(--v2-page); font-family: var(--v2-font); }
.v2-app *, .v2-app *::before, .v2-app *::after { box-sizing: border-box; }
.v2-app button, .v2-app input, .v2-app select, .v2-app textarea { font: inherit; }
.v2-app .topbar { display: flex; align-items: center; gap: 22px; height: 58px; padding: 0 24px; background: var(--v2-surface); border-bottom: 1px solid #e3e8f1; position: sticky; top: 0; z-index: 5; }
.v2-app .brand { display: flex; align-items: center; min-width: 190px; }
.v2-app .mark { width: auto; height: 31px; object-fit: contain; }
.v2-app .top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--v2-muted); }
.v2-app .top-icon { display: grid; width: 40px; height: 40px; place-items: center; padding: 7px 9px; border: 0; border-radius: var(--v2-radius-control); color: inherit; background: transparent; cursor: pointer; }
.v2-app .top-icon:hover { background: #f1f4f9; color: var(--v2-text); }
.v2-app .header-logout { margin: 0; }
.v2-app .top-logout { color: #b42318; }
.v2-app .top-logout:hover { background: #fff1f2; color: #9f1c14; }
.v2-app :is(.top-logout, .sidebar-logout) svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.v2-app .layout { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: calc(100vh - 58px); }
.v2-app .sidebar { display: flex; flex-direction: column; padding: 22px 12px; background: var(--v2-surface); border-right: 1px solid #e4e9f1; }
.v2-app .sidebar-label { padding: 0 12px 9px; color: #9aa5b7; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.v2-app .sidebar-logout { margin: auto 2px 0; padding-top: 16px; }
.v2-app .sidebar-logout button { display: flex; width: 100%; min-height: 44px; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 7px; color: #b42318; background: transparent; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.v2-app .sidebar-logout button:hover { background: #fff5f5; }
.v2-app .nav-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin: 2px 0; border-radius: 8px; color: #6d7a92; font-size: 13px; font-weight: 700; }
.v2-app .nav-item.active { color: var(--v2-link); background: #edf1ff; }
.v2-app .layout > main, .v2-app .layout > .v2-main { width: min(calc(100% - 48px), 1440px); margin: 0 auto; padding: var(--v2-content-padding) 0 50px; }

.v2-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 0 0 18px; }
.v2-page-header__content { min-width: 0; }
.v2-page-header__eyebrow { margin: 0 0 5px; color: var(--v2-primary); font-size: 11px; font-weight: 800; letter-spacing: .08em; line-height: 1.25; text-transform: uppercase; }
.v2-page-header__title { margin: 0; color: var(--v2-text); font-family: var(--v2-font); font-size: 30px; font-weight: 400; letter-spacing: -.05em; line-height: 1.1; }
.v2-page-header__description { max-width: 760px; margin: 6px 0 0; color: var(--v2-muted); font-size: 14px; line-height: 1.5; }
.v2-page-header__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 3px; }

.v2-app .surface, .v2-app .card, .v2-app .ui-table-wrap { border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: var(--v2-surface); box-shadow: var(--v2-shadow); }
.v2-app .toolbar, .v2-app .ui-toolbar { gap: 10px; padding: 16px; }
.v2-app :is(.field, .ui-field) { gap: 6px; color: var(--v2-muted); font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.v2-app :is(.field input, .ui-field input, .toolbar .search, .toolbar input, .toolbar select, .ui-toolbar input, .ui-toolbar select) { height: 40px; padding: 0 12px; border: 1px solid var(--v2-control-border); border-radius: var(--v2-radius-control); color: var(--v2-text); background: var(--v2-subtle); font-size: 14px; }
.v2-app .form-grid label { margin-bottom: 6px; color: var(--v2-muted); font-size: 12px; font-weight: 700; }
.v2-app .form-grid input:not([type="checkbox"]) { min-height: 40px; padding: 9px 11px; border: 1px solid var(--v2-control-border); border-radius: var(--v2-radius-control); color: var(--v2-text); background: var(--v2-subtle); font-size: 14px; }
.v2-app :is(input, select, textarea):focus { border-color: var(--v2-primary); outline: 0; box-shadow: 0 0 0 3px rgba(66, 99, 235, .12); }
.v2-app :is(.btn.primary, .ui-button, button.primary) { min-height: 40px; padding: 0 14px; border-radius: var(--v2-radius-control); background: var(--v2-primary); font-size: 14px; font-weight: 700; }
.v2-app .btn-primary, .v2-app .btn-success { min-height: 40px; padding: 0 14px; border-radius: var(--v2-radius-control); font-size: 14px; font-weight: 700; }
.v2-app :is(.btn.primary, .ui-button, button.primary):hover { background: #3157dc; }
.v2-app .table-wrap, .v2-app .ui-table-wrap { overflow-x: auto; }
.v2-app :is(.surface, .card, .ui-table-wrap) > table { width: 100%; border-collapse: collapse; }
.v2-app :is(.surface, .card, .ui-table-wrap) > table th { padding: 10px 16px; border-bottom: 1px solid #edf0f5; color: #7b879c; background: var(--v2-subtle); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.v2-app :is(.surface, .card, .ui-table-wrap) > table td { padding: 10px 16px; border-bottom: 1px solid #edf0f5; color: var(--v2-text); font-size: 13px; }
.v2-app :is(.surface, .card, .ui-table-wrap) > table tbody tr:hover { background: #f7f9ff; }
.v2-app :is(.surface, .card, .ui-table-wrap) > table a { color: var(--v2-link); }

@media (min-width: 1500px) { .v2-app .layout > main, .v2-app .layout > .v2-main { width: calc(100% - 48px); max-width: none; } }
@media (max-width: 1000px) { .v2-app .layout { grid-template-columns: 72px minmax(0, 1fr); } .v2-app .sidebar-label, .v2-app .nav-item span:last-child, .v2-app .sidebar-logout span:last-child { display: none; } .v2-app .nav-item, .v2-app .sidebar-logout button { justify-content: center; } }
@media (max-width: 720px) { .v2-app .topbar { padding: 0 12px; gap: 8px; } .v2-app .brand { min-width: 0; } .v2-app .top-actions { gap: 2px; } .v2-app .top-icon { width: 44px; height: 44px; } .v2-app .layout { display: block; } .v2-app .sidebar { display: none; } .v2-app .layout > main, .v2-app .layout > .v2-main { width: calc(100% - 24px); margin: 0 12px; padding-top: 20px; } .v2-page-header { gap: 14px; flex-direction: column; } .v2-page-header__actions { width: 100%; padding-top: 0; } }