:root {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #182947;
    background: #f5f8fd;
    color-scheme: light;
    --blue: #075ec7;
    --blue-dark: #054ca3;
    --muted: #56667e;
    --border: #dce5f1;
    --surface: #fff;
    --focus: #1546aa;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-inline-size: 0; }
a { color: var(--blue); text-decoration: none; text-underline-offset: .2em; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary, [tabindex] { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
main:focus { outline: none; }
.skip-link { position: absolute; inset-inline-start: 1rem; inset-block-start: -10rem; z-index: 20; padding: .8rem 1.2rem; background: #fff; border: 2px solid var(--focus); border-radius: .5rem; }
.skip-link:focus { inset-block-start: .7rem; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.application-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-block-size: 100vh; }
.sidebar { display: flex; flex-direction: column; position: sticky; inset-block-start: 0; block-size: 100vh; block-size: 100dvh; overflow-y: auto; padding: 22px 14px; background: #fff; border-inline-end: 1px solid var(--border); }
.brand { display: block; color: #0062d5; font-size: 2rem; font-weight: 750; line-height: 1.1; text-align: center; padding: 0 6px 24px; }
.brand:hover { text-decoration: none; }
.brand span { display: block; margin-block-start: 8px; color: var(--muted); font-size: .875rem; font-weight: 500; }
.primary-nav { display: flex; flex-direction: column; gap: 6px; }
.nav-link { display: flex; align-items: center; gap: 13px; min-block-size: 50px; padding: 12px 15px; color: #3d516f; font-size: .95rem; font-weight: 650; border-radius: 9px; border-inline-end: 3px solid transparent; }
.nav-link .icon { flex-shrink: 0; }
.nav-link:hover { background: #f2f6fd; text-decoration: none; }
.nav-link.selected { color: #0758bd; background: #e9f1ff; border-inline-end-color: #0866d7; }
.nav-link:nth-last-child(3) { margin-block-start: 16px; }
.sidebar-support { display: flex; align-items: center; gap: 12px; margin-block-start: auto; padding: 24px 14px 8px; font-size: .95rem; font-weight: 650; }
.sidebar-support .icon { color: #168342; inline-size: 29px; block-size: 29px; }
.workspace { display: flex; flex-direction: column; min-inline-size: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-block-size: 80px; padding: 16px 30px; background: #fff; border-block-end: 1px solid var(--border); }
.global-search { display: flex; align-items: center; flex: 1; max-inline-size: 520px; border: 1px solid #7a8ba5; border-radius: 10px; background: #fff; box-shadow: 0 2px 4px #18294705; }
.global-search input { border: 0; background: transparent; box-shadow: none; padding-inline: 16px 4px; }
.global-search .icon-button { color: var(--muted); flex-shrink: 0; }
.header-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.language-link { display: inline-flex; align-items: center; min-block-size: 44px; font-size: .9rem; font-weight: 650; }
.user-summary { display: flex; align-items: center; gap: 9px; font-size: .85rem; font-weight: 650; max-inline-size: 230px; overflow-wrap: anywhere; }
.user-summary > .icon { inline-size: 37px; block-size: 37px; padding: 7px; color: #3c5274; background: #eef3fb; border: 1px solid var(--border); border-radius: 50%; flex-shrink: 0; }
.user-summary small { display: block; margin-block-start: 2px; color: var(--muted); font-size: .75rem; font-weight: 400; }
.icon { inline-size: 23px; block-size: 23px; vertical-align: middle; flex-shrink: 0; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; min-block-size: 44px; padding: 9px; border: 0; border-radius: 8px; background: transparent; color: #3d516f; }
.icon-button:hover { background: #edf3fd; text-decoration: none; }
main { flex: 1; min-inline-size: 0; padding: 28px 30px 18px; }
h1, h2, h3 { color: #152746; line-height: 1.45; }
h1 { margin: 0 0 6px; font-size: 1.75rem; font-weight: 750; }
h2 { margin: 0 0 18px; font-size: 1.15rem; font-weight: 700; }
h3 { margin: 18px 0 12px; font-size: 1rem; }
p { margin-block: 12px; line-height: 1.8; color: var(--muted); }
.page-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-block-end: 22px; }
.page-subtitle { margin: 0; font-size: .9rem; }
.page-actions, .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.actions { margin-block-start: 18px; }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-block-size: 44px; padding: 10px 16px; border: 1px solid transparent; border-radius: 8px; background: var(--blue); color: #fff; font-size: .92rem; font-weight: 600; line-height: 1.4; cursor: pointer; text-align: center; }
button:hover, .button:hover { background: var(--blue-dark); color: #fff; text-decoration: none; }
button:disabled { background: #e4eaf2; border-color: #cbd5e2; color: #54627a; cursor: not-allowed; }
button.icon-button { background: transparent; color: #3d516f; }
button.icon-button:hover { background: #edf3fd; }
.secondary { background: #fff; color: #075bbf; border-color: #3681df; }
.secondary:hover { color: #064b9e; background: #edf4ff; border-color: #075bbf; }
.compact { min-block-size: 36px; padding: 7px 17px; font-size: .85rem; }
.full-width { inline-size: 100%; }
.danger { background: #b3223d; }
.danger:hover { background: #8e1830; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-block-end: 20px; }
.metric-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-inline-size: 0; min-block-size: 140px; padding: 19px 21px; border: 1px solid #cfe1fc; border-radius: 10px; background: #f0f6ff; color: #193661; }
.metric-card:hover { text-decoration: none; box-shadow: 0 5px 16px #19345b10; border-color: #85b3ed; }
.metric-label { display: block; font-size: .9rem; font-weight: 650; }
.metric-value { display: block; margin-block: 4px 0; font-size: 2.35rem; font-weight: 750; line-height: 1.15; color: #123463; }
.metric-description { display: block; margin-block-start: 4px; color: #3d587c; font-size: .8rem; }
.metric-icon { inline-size: 40px; block-size: 40px; color: #075ec7; }
.metric-amber { border-color: #f0dfbc; background: #fff8ed; }
.metric-amber .metric-value, .metric-amber .metric-icon, .metric-amber .metric-description { color: #8d4c00; }
.metric-rose { border-color: #f4d4dd; background: #fff4f6; }
.metric-rose .metric-value, .metric-rose .metric-icon, .metric-rose .metric-description { color: #b01e3c; }
.dashboard-primary { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(260px, 1fr); align-items: stretch; gap: 20px; }
.panel { min-inline-size: 0; padding: 22px; margin-block-end: 20px; border: 1px solid var(--border); border-radius: 11px; background: #fff; box-shadow: 0 3px 10px #16304f03; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-block-end: 16px; }
.panel-heading h2 { margin: 0; }
.panel-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.text-link { display: inline-flex; align-items: center; min-block-size: 32px; font-size: .88rem; font-weight: 600; }
.table-wrap { max-inline-size: 100%; overflow-x: auto; border-radius: 7px; scrollbar-color: #8ea3c3 #eef3fa; }
table { inline-size: 100%; border-collapse: collapse; min-inline-size: 650px; font-size: .87rem; }
th, td { padding: 13px 11px; text-align: start; vertical-align: middle; border-block-end: 1px solid #e5ebf4; line-height: 1.6; }
thead th { background: #f1f5fb; color: #475d7b; font-size: .8rem; font-weight: 650; }
tbody th { font-weight: 600; }
tbody tr:last-child th, tbody tr:last-child td { border-block-end: 0; }
tbody tr:hover { background: #f8faff; }
.dashboard-table { min-inline-size: 540px; }
.dashboard-table td .button { white-space: nowrap; }
.badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 12px; border-radius: 25px; background: #eaf2ff; color: #17579f; font-size: .8rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
a.badge { min-block-size: 32px; }
.badge-amber { background: #fff0d7; color: #8d4c00; }
.badge-rose { background: #ffe6ec; color: #a71737; }
.badge-green { background: #e6f7eb; color: #166335; }
.section-note { margin-block: 13px 0; font-size: .8rem; color: #5e6d83; }
.latest-release { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 2px 19px; border-block-end: 1px solid var(--border); }
.eyebrow { margin: 0 0 4px; color: #596b85; font-size: .85rem; }
.release-version { display: block; font-size: 1.8rem; line-height: 1.4; color: #172c50; overflow-wrap: anywhere; }
.latest-release .badge { margin-block-start: 4px; }
.release-icon { inline-size: 69px; block-size: 69px; color: #0669df; }
.release-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block: 16px 10px; color: #435b7c; font-size: .88rem; }
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 34px; min-block-size: 34px; padding: 4px 7px; background: #e8f1ff; border-radius: 50%; font-weight: 700; }
.delivery-status { display: flex; align-items: center; gap: 7px; margin-block: 10px; color: #52627c; font-size: .8rem; }
.delivery-status .icon { inline-size: 17px; block-size: 17px; }
.empty-state { margin: 0; padding: 25px 12px; border: 1px dashed #c7d5e8; border-radius: 8px; background: #fafcff; text-align: center; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
form { margin: 0; }
label { display: flex; flex-direction: column; gap: 7px; font-size: .875rem; font-weight: 600; }
input, select, textarea { inline-size: 100%; min-inline-size: 0; min-block-size: 44px; padding: 10px 11px; color: #263b58; border: 1px solid #7a8ba5; border-radius: 7px; background: #fff; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #63738a; opacity: 1; }
input[readonly] { background: #f6f8fc; }
textarea { min-block-size: 110px; resize: vertical; }
.check { flex-direction: row; align-items: center; gap: 9px; margin-block: 9px; font-weight: 400; overflow-wrap: anywhere; }
.check input { inline-size: 20px; min-block-size: 20px; block-size: 20px; padding: 0; flex-shrink: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-block: 15px; }
.panel > form + form { margin-block-start: 24px; }
.muted { color: var(--muted); font-size: .82rem; }
.notice { padding: 16px 18px; margin-block: 0 20px; border: 1px solid #bdcfee; border-radius: 8px; background: #eef5ff; color: #304c73; font-size: .9rem; overflow-wrap: anywhere; }
.notice code { display: block; margin-block-start: 12px; font-size: 1rem; user-select: all; }
.success { color: #235b3a; border-color: #b6d8c1; background: #eff9f3; }
.error { color: #8c2535; border-color: #e3b8c0; background: #fff1f4; }
details { min-inline-size: 0; padding: 15px; margin-block: 12px; border: 1px solid var(--border); border-radius: 8px; }
summary { padding-block: 3px; font-size: .9rem; font-weight: 650; cursor: pointer; overflow-wrap: anywhere; }
details[open] > summary { margin-block-end: 18px; }
:target { scroll-margin-block-start: 24px; }
details:target, tr:target { outline: 2px solid #497bd2; outline-offset: 2px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: .9rem; line-height: 1.8; }
bdi, code { unicode-bidi: isolate; }
code { overflow-wrap: anywhere; }
.pagination { margin-block-start: 18px; }
.page-navigation { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; font-size: .875rem; }
.site-footer { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; min-block-size: 70px; padding: 12px 30px; color: #576780; background: #f5f8fd; font-size: .75rem; }
.whatsapp { color: #168342; }
.whatsapp .icon { inline-size: 25px; block-size: 25px; }
.guest .application-shell { grid-template-columns: minmax(0, 1fr); }
.guest-brand { padding: 0; text-align: start; font-size: 1.7rem; }
.guest .workspace { min-block-size: 100vh; }
.login { max-inline-size: 480px; margin: 30px auto; padding: 30px; }
.login label { margin-block-end: 18px; }
.login button { inline-size: 100%; }
.manual-page { display: flex; flex-direction: column; min-block-size: 100vh; }
.manual-page .shell { flex: 1; inline-size: 100%; max-inline-size: 1100px; margin-inline: auto; }
@media (max-width: 1250px) {
    .application-shell { grid-template-columns: 220px minmax(0, 1fr); }
    .topbar, .site-footer { padding-inline: 22px; }
    main { padding-inline: 22px; }
    .metric-card { padding: 16px; }
    .metric-icon { inline-size: 32px; block-size: 32px; }
    .dashboard-primary { grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); }
    .header-actions { gap: 12px; }
    .user-summary { max-inline-size: 170px; }
}
@media (max-width: 1050px) {
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-primary { grid-template-columns: minmax(0, 1fr); }
    .release-summary .latest-release { justify-content: space-between; }
    .global-search { max-inline-size: none; }
    .user-summary { display: none; }
}
@media (max-width: 800px) {
    .application-shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: static; block-size: auto; padding: 14px 16px 12px; overflow: visible; border-inline-end: 0; border-block-end: 1px solid var(--border); }
    .sidebar .brand { padding-block: 0 14px; text-align: start; font-size: 1.6rem; }
    .sidebar .brand span { display: inline; margin-inline-start: 10px; font-size: .8rem; }
    .primary-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; max-inline-size: 100%; overflow: visible; padding: 4px; }
    .nav-link { min-inline-size: 0; min-block-size: 44px; padding: 10px; gap: 9px; font-size: .85rem; border-inline-end: 0; white-space: normal; overflow-wrap: anywhere; }
    .nav-link span { min-inline-size: 0; }
    .nav-link:nth-last-child(3) { margin-block-start: 0; }
    .nav-link .icon { inline-size: 19px; block-size: 19px; }
    .sidebar-support { display: none; }
    .topbar { flex-wrap: wrap; min-block-size: 72px; gap: 10px; padding: 12px 18px; }
    .global-search { min-inline-size: min(100%, 260px); }
    .header-actions { margin-inline-start: auto; }
    main { padding: 22px 18px 12px; }
    .page-heading { gap: 16px; }
    .panel { padding: 18px; }
    .site-footer { padding-inline: 18px; justify-content: center; }
}
@media (max-width: 450px) {
    .topbar { gap: 8px; }
    .global-search { flex-basis: 100%; }
    .header-actions { justify-content: flex-end; inline-size: 100%; }
    .guest .header-actions { inline-size: auto; }
    main { padding-inline: 12px; }
    h1 { font-size: 1.5rem; }
    .page-actions { inline-size: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-actions .button { padding-inline: 8px; font-size: .8rem; }
    .page-actions .icon { inline-size: 18px; block-size: 18px; }
    .metric-grid { gap: 10px; }
    .metric-card { gap: 6px; min-block-size: 145px; padding: 14px 12px; }
    .metric-label { font-size: .82rem; }
    .metric-value { font-size: 2rem; }
    .metric-description { font-size: .75rem; }
    .metric-icon { inline-size: 26px; block-size: 26px; }
    .panel { padding: 15px; }
    .panel-tools { gap: 8px; }
    .grid { grid-template-columns: minmax(0, 1fr); }
    .actions > .button, .actions > button { max-inline-size: 100%; }
    .login { margin-block: 15px; padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
.embedded .application-shell { display: block; min-block-size: 0; }
.embedded .topbar { min-block-size: 64px; padding: 12px 16px; gap: 14px; }
.embedded .header-actions { gap: 12px; }
.embedded main { padding: 18px 16px; }
.embedded .page-heading { margin-block-end: 16px; }
.embedded .page-heading h1 { font-size: 1.4rem; }
.embedded .panel { padding: 18px; }
.embedded-navigation { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; background: #fff; border-block-end: 1px solid var(--border); }
.embedded-navigation a { display: inline-flex; align-items: center; min-block-size: 42px; padding: 8px 12px; border-radius: 7px; color: #3d516f; font-size: .86rem; font-weight: 600; }
.embedded-navigation a:hover, .embedded-navigation a[aria-current="page"] { background: #e9f1ff; color: #0758bd; text-decoration: none; }
.embedded-status main { max-inline-size: 800px; margin-inline: auto; padding: 24px 16px; }
.embedded-status h1 { font-size: 1.4rem; }
@media (max-width: 650px) {
    .embedded .topbar { flex-wrap: wrap; gap: 10px; }
    .embedded .user-summary { max-inline-size: 170px; }
    .embedded .user-summary > .icon { display: none; }
    .embedded-navigation { padding: 10px; gap: 3px; }
    .embedded-navigation a { padding-inline: 9px; font-size: .82rem; }
    .embedded main { padding: 14px 10px; }
}