/* Scoped dashboard presentation; receipt and business controls keep their styles. */
body.v3-dashboard {
    --surface: #1b1e22;
    --line: #30343a;
    --muted: #a4acb7;
    --accent: #73aaff;
    padding: 0 !important;
    background: #141619;
    color: #eef1f5;
}
.dashboard-shell { min-height: 100dvh; }
.dashboard-shell *, .dashboard-shell *::before, .dashboard-shell *::after { box-sizing: border-box; letter-spacing: 0; }
.dashboard-shell [hidden] { display: none !important; }
.dashboard-shell button { cursor: pointer; }
.dashboard-shell button:focus-visible, .dashboard-shell input:focus-visible, .dashboard-shell [tabindex]:focus-visible {
    outline: 2px solid #73aaff;
    outline-offset: 4px;
}
.dashboard-shell .lucide { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 1.75; }
.dashboard-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 218px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    padding: 28px 16px 18px;
    border-right: 1px solid var(--line);
    background: #191b1f;
    overflow-y: auto;
}
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 34px; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px; background: #2e68c4; border-radius: 8px; color: white; font-size: 14px; font-weight: 800; }
.sidebar-brand strong { display: block; font-size: 16px; line-height: 1.25; }
.sidebar-brand div > span { display: block; font-size: 10px; color: #a4b4cc; margin-top: 3px; }
.nav-label { margin: 0 12px 12px; color: #86909d; font-size: 10px; font-weight: 600; }
.sidebar-nav { display: grid; gap: 6px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid transparent; border-radius: 6px; color: #b5bcc7; text-align: left; font-size: 13px; font-weight: 500; }
.nav-item:hover { background: #23262c; color: #fff; }
.nav-item.is-active { background: #25344b; border-color: #344e72; color: #a9cbff; }
.nav-count { margin-left: auto; padding: 2px 6px; border-radius: 4px; background: #2e323a; color: #cad0db; font-size: 10px; font-variant-numeric: tabular-nums; }
.sidebar-footer { margin-top: auto; padding-top: 32px; }
.workspace-label { display: flex; align-items: center; gap: 8px; margin: 0 12px 15px; padding-top: 20px; border-top: 1px solid var(--line); color: #c1c7d0; font-size: 11px; }
.workspace-dot { width: 6px; height: 6px; background: #68bfa6; border-radius: 50%; }
.environment-label { margin-left: auto; color: #e1bb72; font-size: 10px; }
.dashboard-main { margin-left: 218px; min-width: 0; }
.dashboard-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 14px 32px; border-bottom: 1px solid var(--line); }
.dashboard-topbar .topbar-context { display: flex; align-items: center; gap: 12px; text-align: left; font-size: 12px; color: #bcc3ce; }
.topbar-product { color: var(--muted); }
.breadcrumb-divider { color: #626b78; }
.dashboard-topbar .topbar-account { display: flex; align-items: center; gap: 9px; color: #bcc3ce; font-size: 11px; }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; background: #292d34; border: 1px solid #3a414c; border-radius: 50%; color: #cbd2dc; }
.dashboard-workspace { max-width: 1680px; margin: 0 auto; padding: 30px 32px 20px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.page-eyebrow { margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.page-heading h1 { font-size: 26px; line-height: 1.3; font-weight: 650; }
.primary-button, .secondary-button, .icon-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 40px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 6px; white-space: nowrap; font-size: 12px; font-weight: 600; }
.primary-button { background: #326ed2; border-color: #4986ec; color: #fff; }
.primary-button:hover { background: #3c7ce4; }
.secondary-button { background: #23262b; color: #d9dfe8; }
.secondary-button:hover { border-color: #697485; background: #2b3037; }
.icon-button { width: 40px; flex: 0 0 40px; padding: 0; background: #23262b; color: #d9dfe8; }
.mobile-only { display: none; }
.mobile-environment { display: none; }
body.v3-dashboard .legacy-dev-badge { display: none !important; }
.dashboard-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.service-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.dashboard-shell .btn-filter { border: 1px solid transparent; border-radius: 5px; min-height: 34px; padding: 7px 12px; color: #b6bdc8; font-size: 11px; font-weight: 500; box-shadow: none; flex: none; }
.dashboard-shell .btn-filter.active { color: #d1e4ff; background: #293952; border-color: #3b557b; }
.dashboard-shell .btn-filter:not(.active):hover { color: white; background: #25292f; }
.fx-display { display: flex; align-items: center; gap: 10px; color: #8aa89f; min-width: 0; }
.fx-display div { display: grid; gap: 3px; }
.fx-display span { font-size: 10px; color: var(--muted); }
.fx-display strong { font-size: 10px; font-family: ui-monospace, monospace; font-weight: 500; color: #85d7ba; white-space: normal; overflow-wrap: anywhere; }
.period-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 0 22px; }
.period-filters { display: flex; flex-wrap: wrap; gap: 2px; }
.date-range { display: flex; align-items: center; gap: 10px; color: #a4acb7; }
.date-range label { display: flex; align-items: center; gap: 8px; font-size: 10px; }
.date-range input { color-scheme: dark; width: 131px; min-width: 0; padding: 7px 8px; border: 1px solid #3c4149; border-radius: 5px; background: #1b1e22; color: #cbd2dc; font-size: 11px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.section-heading h2, .operations-heading h2 { font-size: 14px; font-weight: 600; }
.section-heading > span { color: var(--muted); font-size: 10px; }
.metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.metric-card { min-width: 0; padding: 17px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.metric-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 13px; }
.metric-label p { color: #bac1cc; font-size: 11px; }
.metric-label .lucide { color: #7f8d9e; width: 16px; height: 16px; }
.metric-card h3 { font-size: 23px; line-height: 1.25; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.metric-card h3.compact-value { font-size: 18px; }
.metric-caption { display: block; margin-top: 8px; font-size: 10px; color: #98a1af; }
.metric-real h3 { color: #82cbd0; }
.metric-profit { border-color: #386354; }
.metric-profit h3, .metric-profit .lucide { color: #85dab5; }
.metric-loss .lucide { color: #dc999b; }
.status-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 20px 0 28px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.status-total, .status-breakdown { display: flex; align-items: center; gap: 8px; min-width: 0; color: #b1b9c6; font-size: 11px; }
.status-overview strong { color: #e2e7ef; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; margin-left: auto; }
.status-total { padding-right: 16px; border-right: 1px solid var(--line); }
.status-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; }
.status-dot.pending { background: #e0be75; }
.status-dot.completed { background: #85dab5; }
.status-dot.failed { background: #e38f95; }
.operations-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; }
.operations-heading p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.operations-tools { display: flex; align-items: center; gap: 9px; }
.search-field { display: flex; align-items: center; gap: 9px; width: 256px; min-width: 0; min-height: 38px; border: 1px solid #3c4149; border-radius: 6px; padding: 0 11px; color: #a2adbd; background: #1b1e22; }
.search-field input { background: transparent; color: #e2e7ef; font-size: 11px; min-width: 0; width: 100%; height: 38px; border: 0; outline: none; }
.search-field:focus-within { border-color: var(--accent); }
.search-field input::placeholder { color: #9ca5b4; }
.operations-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: #191c20; scrollbar-color: #464d57 #191c20; }
.operations-table { min-width: 1160px; border-collapse: collapse; }
.operations-table thead { background: #22262c; color: #aab4c4; }
.operations-table th { padding: 13px 14px; font-size: 9px; font-weight: 600; white-space: nowrap; }
.operations-table #tablaCuerpo td { padding: 16px 14px; border-color: #30343a; vertical-align: middle; }
.operations-table #tablaCuerpo tr { border-color: #30343a; }
.operations-table #tablaCuerpo tr:hover { background: #24282e; }
.operations-table #tablaCuerpo td:nth-child(2) { max-width: 310px; white-space: normal; overflow-wrap: anywhere; }
.operations-table #tablaCuerpo td:nth-child(2) .text-white { font-size: 11px; text-transform: none; }
.operations-table #tablaCuerpo .text-slate-500, .operations-table #tablaCuerpo .text-slate-600 { color: #9aa5b6; }
.operations-table #tablaCuerpo td:first-child button { display: grid; place-items: center; width: 28px; height: 30px; }
.operations-table #tablaCuerpo td:first-child .flex { gap: 3px; }
.operations-empty { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 112px; color: #b6bfcc; font-size: 12px; border-bottom: 1px solid var(--line); }
.dashboard-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; color: #8f99a9; font-size: 10px; }
.dashboard-shell[data-view="resumen"] .operations-section { display: none; }
.dashboard-shell[data-view="operaciones"] .dashboard-summary { display: none; }
.nav-backdrop { display: none; }
body.dashboard-nav-open { overflow: hidden !important; }

@media (min-width: 1700px) {
    .metrics-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .dashboard-sidebar { width: 196px; padding-inline: 12px; }
    .dashboard-main { margin-left: 196px; }
    .dashboard-workspace { padding-inline: 22px; }
    .dashboard-topbar { padding-inline: 22px; }
    .dashboard-controls { align-items: flex-start; }
    .service-filters { max-width: 370px; }
    .status-overview { gap: 12px; }
}
@media (max-width: 900px) {
    .mobile-only { display: inline-flex; }
    .dashboard-sidebar { width: 250px; transform: translateX(-100%); visibility: hidden; transition: transform 180ms ease, visibility 180ms; }
    .dashboard-sidebar.is-open { transform: translateX(0); visibility: visible; }
    .sidebar-brand { padding-bottom: 24px; gap: 8px; }
    .sidebar-brand .icon-button { margin-left: auto; width: 30px; flex-basis: 30px; min-height: 30px; }
    .dashboard-main { margin-left: 0; }
    .nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 35; background: rgb(0 0 0 / 55%); }
}
@media (max-width: 768px) {
    .dashboard-topbar { align-items: center !important; padding: 12px 16px; min-height: 64px; }
    .dashboard-topbar .topbar-context { width: auto; gap: 10px; }
    .dashboard-topbar .topbar-account { display: flex !important; width: auto; gap: 10px !important; }
    .dashboard-topbar .mobile-environment { display: block; color: #e1bb72; font-size: 10px; }
    .dashboard-topbar .topbar-account > span:last-child, .topbar-product, .breadcrumb-divider { display: none; }
    .dashboard-topbar .topbar-account > span:first-child { align-items: center !important; margin-right: 0 !important; }
    .dashboard-topbar button { width: 40px; }
    .dashboard-workspace { padding: 22px 16px 16px; }
    .page-heading { align-items: flex-start; gap: 12px; margin-bottom: 22px; }
    .page-heading h1 { font-size: 22px; }
    .page-heading .primary-button { padding: 10px 12px; }
    .dashboard-controls { flex-direction: column; gap: 14px; }
    .service-filters { max-width: none; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
    .dashboard-shell .btn-filter { font-size: 10px; padding: 8px 7px; min-height: 40px; }
    .fx-display { width: 100%; }
    .fx-display div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
    .period-toolbar { display: grid; width: 100%; gap: 12px; }
    .period-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .date-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; }
    .date-range label { display: grid; gap: 5px; }
    .date-range input { width: 100%; min-height: 40px; font-size: 13px; }
    .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .metric-card { padding: 14px; border-radius: 8px; }
    .metric-label { align-items: flex-start; min-height: 29px; margin-bottom: 8px; }
    .metric-label p { font-size: 11px; }
    .metric-card h3 { font-size: 20px; }
    .metric-caption { font-size: 10px; }
    .status-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
    .status-total { border: 0; padding-right: 0; }
    .operations-heading { align-items: stretch; gap: 12px; }
    .operations-tools { width: 100%; }
    .search-field { flex: 1; width: auto; }
    .search-field input { font-size: 16px; height: 42px; }
    .operations-tools .secondary-button { min-height: 44px; }
    .operations-table-scroll { border: 0; background: transparent; overflow: visible; }
    .operations-table { min-width: 0; width: 100%; }
    .operations-table #tablaCuerpo { padding: 0; background: transparent; gap: 12px; }
    .operations-table #tablaCuerpo tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; padding: 14px; background: #1b1e22; border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
    .operations-table #tablaCuerpo td { min-width: 0; padding: 9px 0 !important; overflow-wrap: anywhere; }
    .operations-table #tablaCuerpo td:first-child, .operations-table #tablaCuerpo td:nth-child(2) { grid-column: 1 / -1; max-width: none; }
    .operations-table #tablaCuerpo td:first-child { order: 10; border-top: 1px solid var(--line) !important; }
    .operations-table #tablaCuerpo td:first-child .flex { gap: 10px; }
    .operations-table #tablaCuerpo td:first-child button { width: 42px; height: 42px; border-radius: 6px; background: #292d34; }
    .operations-table #tablaCuerpo td::before { color: #a4adbb; font-size: 9px; letter-spacing: 0; }
    .operations-table #tablaCuerpo td:nth-child(2) .text-white { font-size: 13px; }
    .operations-table #tablaCuerpo td:nth-child(7) > span { display: inline-block; max-width: 100%; padding: 4px 7px; white-space: normal; }
    .dashboard-footer { flex-wrap: wrap; }
}
@media (max-width: 390px) {
    .page-heading { flex-wrap: wrap; }
    .page-heading .primary-button { width: 100%; }
    .service-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric-card { padding: 12px; }
    .metric-label .lucide { display: none; }
    .metric-card h3 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .dashboard-sidebar { transition: none; }
}

/* Bright dashboard direction: closer to the reference image while keeping the current product identity. */
body.v3-dashboard {
    --surface: #ffffff;
    --line: #e5eaf2;
    --muted: #718096;
    --accent: #386ff1;
    background: #f3f6fb;
    color: #17233b;
}
body.v3-dashboard::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 5px;
    z-index: 80;
    background: linear-gradient(90deg, #386ff1 0%, #5e72ec 48%, #a56fe9 100%);
}
.dashboard-sidebar {
    width: 236px;
    padding: 30px 18px 20px;
    border-right: 1px solid #e4e9f2;
    background: #ffffff;
    box-shadow: 8px 0 28px rgba(49, 75, 125, 0.045);
}
.sidebar-brand { padding: 0 10px 38px; }
.brand-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 11px;
    background: linear-gradient(145deg, #386ff1, #6d67e9);
    box-shadow: 0 8px 18px rgba(56, 111, 241, .2);
}
.sidebar-brand strong { color: #17233b; letter-spacing: .02em; }
.sidebar-brand div > span { color: #7886a1; }
.nav-label { color: #99a5b9; margin-bottom: 13px; letter-spacing: .08em; }
.sidebar-nav { gap: 5px; }
.nav-item { min-height: 45px; border-radius: 10px; color: #718096; }
.nav-item:hover { background: #f3f6fc; color: #2a3c60; }
.nav-item.is-active { background: #edf3ff; border-color: #dbe7ff; color: #386ff1; box-shadow: inset 3px 0 0 #386ff1; }
.nav-count { background: #f0f3f8; color: #687793; }
.sidebar-footer { padding-top: 26px; }
.workspace-label { border-top-color: #e5eaf2; color: #66758e; }
.workspace-dot { background: #35b894; box-shadow: 0 0 0 4px #e7f8f3; }
.environment-label { color: #a36bde; font-weight: 700; }
.dashboard-main { margin-left: 236px; }
.dashboard-topbar { min-height: 78px; padding: 14px 40px; border-bottom-color: #e5eaf2; background: rgba(255,255,255,.75); }
.dashboard-topbar .topbar-context { color: #75829b; }
.topbar-product { color: #44516a; font-weight: 600; }
.breadcrumb-divider { color: #b5bfd0; }
.dashboard-topbar .topbar-account { color: #65738c; }
.avatar { background: #eff3fa; border-color: #dfe6f1; color: #55709c; }
.dashboard-workspace { max-width: 1660px; padding: 34px 40px 24px; }
.page-eyebrow { color: #8290a8; }
.page-heading h1 { color: #192744; font-size: 30px; letter-spacing: -.02em; }
.primary-button { min-height: 44px; padding-inline: 17px; border-color: #4c82ef; border-radius: 10px; background: #386ff1; box-shadow: 0 8px 18px rgba(56,111,241,.18); }
.primary-button:hover { background: #2f63dd; }
.secondary-button, .icon-button { border-color: #e0e6f0; border-radius: 9px; background: #ffffff; color: #52617b; }
.secondary-button:hover, .icon-button:hover { border-color: #c4d3ee; background: #f6f8fc; color: #386ff1; }
.dashboard-controls { border-bottom-color: #e5eaf2; }
.service-filters { gap: 6px; }
.dashboard-shell .btn-filter { min-height: 36px; border-color: #e6ebf4; border-radius: 9px; background: #ffffff; color: #64738c; }
.dashboard-shell .btn-filter.active { color: #386ff1; border-color: #cbdcff; background: #edf3ff; box-shadow: 0 5px 12px rgba(56,111,241,.09); }
.dashboard-shell .btn-filter:not(.active):hover { color: #386ff1; background: #f5f8ff; }
.fx-display { padding: 8px 13px; border: 1px solid #dfe8fb; border-radius: 11px; background: #f8fbff; color: #386ff1; }
.fx-display span { color: #7c8ba5; }
.fx-display strong { color: #2d9d7c; }
.period-toolbar { padding: 17px 0 24px; }
.period-filters { padding: 4px; border: 1px solid #e8edf5; border-radius: 11px; background: #ffffff; }
.period-filters .btn-filter { border-color: transparent; }
.date-range { color: #76849b; }
.date-range input { color-scheme: light; border-color: #dfe6f0; background: #ffffff; color: #52617b; }
.section-heading h2, .operations-heading h2 { color: #22314d; }
.section-heading > span { color: #8290a8; }
.metric-card { padding: 18px 19px; border-color: #e1e7f0; border-radius: 13px; background: #ffffff; box-shadow: 0 10px 26px rgba(45, 74, 125, .055); }
.metric-card:hover { border-color: #c8d7f5; transform: translateY(-2px); transition: transform 160ms ease, border-color 160ms ease; }
.metric-label p { color: #6e7d96; }
.metric-label .lucide { color: #7f97c1; }
.metric-card h3 { color: #1f2f4d; }
.metric-caption { color: #98a5b8; }
.metric-real { border-color: #d5ebef; background: #fbffff; }
.metric-real h3 { color: #2cabb4; }
.metric-profit { border-color: #c7eadf; background: #fbfffd; }
.metric-profit h3, .metric-profit .lucide { color: #26a779; }
.metric-loss { border-color: #f1dddd; background: #fffdfd; }
.metric-loss .lucide { color: #d7828a; }
.status-overview { margin-bottom: 25px; border-top-color: #e5eaf2; border-bottom-color: #e5eaf2; }
.status-total, .status-breakdown { color: #6d7b92; }
.status-overview strong { color: #263655; }
.status-total { border-right-color: #e5eaf2; }
.operations-heading p { color: #8290a8; }
.search-field { border-color: #dfe6f0; background: #ffffff; color: #8491a6; }
.search-field input { color: #273958; }
.search-field input::placeholder { color: #9aa6b8; }
.operations-table-scroll { border-color: #e1e7f0; border-radius: 13px; background: #ffffff; box-shadow: 0 12px 30px rgba(45, 74, 125, .05); scrollbar-color: #bdcce6 #f3f6fb; }
.operations-table thead { background: #f7f9fc; color: #73819a; }
.operations-table th { padding-block: 14px; }
.operations-table #tablaCuerpo td { border-color: #edf0f5; }
.operations-table #tablaCuerpo tr { border-color: #edf0f5; }
.operations-table #tablaCuerpo tr:hover { background: #f9fbff; }
.operations-table #tablaCuerpo td:nth-child(2) .text-white { color: #263958; }
.operations-table #tablaCuerpo td[data-label="A entregar"] > .text-white { color: #263958; }
.operations-table #tablaCuerpo .text-slate-500, .operations-table #tablaCuerpo .text-slate-600 { color: #8290a8; }
.operations-table #tablaCuerpo .text-blue-300 { color: #3e77dc; }
.operations-table #tablaCuerpo .text-green-400 { color: #229b73; }
.operations-table #tablaCuerpo td:first-child button { color: #8294b2; }
.operations-table #tablaCuerpo td:first-child button:hover { color: #386ff1; }
.operations-empty { color: #8491a6; border-bottom-color: #e5eaf2; }
.dashboard-footer { color: #92a0b4; }
.insight-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(250px, .75fr); gap: 14px; margin-top: 14px; }
.chart-panel, .activity-panel { min-width: 0; border: 1px solid #e1e7f0; border-radius: 13px; background: #ffffff; box-shadow: 0 10px 26px rgba(45, 74, 125, .05); }
.chart-panel { padding: 18px 20px 15px; }
.activity-panel { display: flex; flex-direction: column; padding: 18px 20px 15px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-heading h3 { color: #253654; font-size: 14px; font-weight: 650; }
.panel-heading > .lucide { color: #7a8db0; }
.panel-kicker { margin-bottom: 6px; color: #8b9ab1; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.panel-period { color: #9aa6b8; font-size: 10px; }
.chart-wrap { height: 174px; margin-top: 12px; }
#performanceChart { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-grid-line { stroke: #edf1f7; stroke-width: 1; }
.chart-axis-label { fill: #a0acbd; font: 10px Inter, sans-serif; }
.chart-area { fill: url(#chartAreaFill); opacity: .75; }
.chart-line-blue, .chart-line-violet { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.chart-line-blue { stroke: #386ff1; }
.chart-line-violet { stroke: #9273e8; stroke-width: 1.4; stroke-dasharray: 4 4; }
.chart-point { fill: #ffffff; stroke: #386ff1; stroke-width: 1.5; }
.chart-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 4px; color: #8190a8; font-size: 10px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend strong { margin-left: auto; color: #2eaa7d; font-size: 11px; }
.legend-swatch { width: 8px; height: 8px; border-radius: 50%; background: #386ff1; }
.legend-swatch.violet { background: #9273e8; }
.activity-ring { display: grid; place-items: center; width: 122px; height: 122px; margin: 20px auto 14px; border-radius: 50%; background: conic-gradient(#386ff1 0deg, #66bfe1 0deg, #e9eef6 0deg 360deg); position: relative; }
.activity-ring::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #ffffff; }
.activity-ring > div { position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; }
.activity-ring strong { color: #273958; font-size: 22px; font-weight: 700; }
.activity-ring span { color: #8b98ac; font-size: 10px; }
.activity-note { display: flex; align-items: center; gap: 8px; min-height: 33px; color: #6d7d96; font-size: 10px; line-height: 1.45; }
.activity-pulse { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #2aaa7e; box-shadow: 0 0 0 4px #e4f7f0; }
.panel-link { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: auto; padding-top: 15px; color: #386ff1; font-size: 11px; font-weight: 650; }
.panel-link:hover { color: #735fda; }
.panel-link .lucide { width: 14px; height: 14px; }
body.v3-dashboard .legacy-dev-badge { display: none !important; }

@media (max-width: 1100px) {
    .dashboard-sidebar { width: 210px; }
    .dashboard-main { margin-left: 210px; }
    .dashboard-workspace { padding-inline: 26px; }
    .dashboard-topbar { padding-inline: 26px; }
}
@media (max-width: 900px) {
    .dashboard-sidebar { width: 260px; }
    .dashboard-main { margin-left: 0; }
    .dashboard-topbar { background: rgba(255,255,255,.92); }
    .nav-backdrop:not([hidden]) { background: rgb(29 47 79 / 28%); }
}
@media (max-width: 768px) {
    .dashboard-workspace { padding: 24px 16px 18px; }
    .page-heading h1 { font-size: 25px; }
    .insight-grid { grid-template-columns: 1fr; }
    .chart-wrap { height: 156px; }
    .activity-panel { min-height: 235px; }
    .activity-ring { margin-top: 15px; }
    .operations-table #tablaCuerpo tr { background: #ffffff; border-color: #e1e7f0; box-shadow: 0 8px 20px rgba(45,74,125,.055); }
    .operations-table #tablaCuerpo td:first-child { border-top-color: #edf0f5 !important; }
    .operations-table #tablaCuerpo td:first-child button { background: #f4f7fc; color: #6d83a6; }
}

/* V3-Pro brand and directory/operation workspace. Business markup stays unchanged. */
.brand-mark {
    overflow: hidden;
    border: 1px solid #e5eaf2;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 5px 13px rgba(36, 60, 105, .07);
}
.brand-mark img { width: 64px; height: 44px; max-width: none; object-fit: cover; }
.login-isotipo { width: 112px; height: 74px; margin: 0 auto 12px; object-fit: cover; }
#loginScreen { background: #f3f6fb; }
#loginScreen .glass-card { border: 1px solid #dfe6f0; border-radius: 13px; background: #fff; box-shadow: 0 22px 60px rgba(40, 64, 112, .13); }
#loginScreen h1 { color: #1e2d4b; }
#loginScreen h1 span { color: #386ff1; }
#loginScreen p:not(#loginError), #loginScreen label { color: #72819a; }
#loginScreen input { border-color: #dbe3ef; background: #f8faff; color: #263958; }
#loginScreen input:focus { border-color: #6b94f3; box-shadow: 0 0 0 3px rgba(56,111,241,.12); }
#loginScreen #loginButton { color: #fff; }

.v3-light-modal { background: rgba(31, 49, 81, .38); }
.v3-light-modal .modal-surface {
    min-width: 0;
    border: 1px solid #dfe6f1;
    border-radius: 13px;
    background: #fff;
    color: #273958;
    box-shadow: 0 26px 72px rgba(25, 42, 72, .2);
    scrollbar-color: #c1cee2 #f8faff;
}
.v3-light-modal h2, .v3-light-modal h3,
.v3-light-modal [class~="text-white"] { color: #243553; }
.v3-light-modal [class~="text-slate-300"] { color: #54647e; }
.v3-light-modal [class~="text-slate-400"] { color: #73819a; }
.v3-light-modal [class~="text-slate-500"],
.v3-light-modal [class~="text-slate-600"] { color: #7d8ca4; }
.v3-light-modal [class~="text-blue-400"] { color: #386ff1; }
.v3-light-modal [class~="text-purple-400"] { color: #8b5bd7; }
.v3-light-modal [class~="text-red-400"] { color: #cf5769; }
.v3-light-modal [class~="text-green-400"] { color: #219d77; }
.v3-light-modal [class~="border-slate-700"],
.v3-light-modal [class~="border-slate-700/50"],
.v3-light-modal [class~="border-slate-800"] { border-color: #e0e7f1; }
.v3-light-modal [class~="bg-slate-800/40"],
.v3-light-modal [class~="bg-slate-800/50"] { border-color: #e2e9f3; background: #f8faff; }
.v3-light-modal [class~="bg-slate-800"],
.v3-light-modal [class~="bg-slate-900"]:not(.modal-surface),
.v3-light-modal [class~="bg-slate-950"],
.v3-light-modal [class~="bg-slate-700"] { background: #f4f7fc; color: #425675; }
.v3-light-modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.v3-light-modal select, .v3-light-modal textarea {
    min-width: 0;
    border: 1px solid #dce5f1;
    border-radius: 8px;
    background: #fff;
    color: #263958;
    color-scheme: light;
}
.v3-light-modal input::placeholder, .v3-light-modal textarea::placeholder { color: #a1aec0; }
.v3-light-modal input:focus, .v3-light-modal select:focus, .v3-light-modal textarea:focus {
    border-color: #7298ee;
    box-shadow: 0 0 0 3px rgba(56,111,241,.12);
    outline: none;
}
.v3-light-modal button[class~="bg-blue-600"],
.v3-light-modal button[class~="bg-green-600"] { color: #fff; }
.v3-light-modal button[class~="bg-blue-600"] { background: #386ff1; }
.v3-light-modal button[class~="bg-blue-600"]:hover { background: #2c60df; }
.v3-light-modal button[class~="bg-green-600"] { background: #25a77a; }
.v3-light-modal button[class~="bg-green-600"]:hover { background: #16875e; }
.v3-light-modal button[class~="bg-slate-700"],
.v3-light-modal button[class~="bg-slate-800"] {
    border: 1px solid #dbe4f1;
    background: #fff;
    color: #51627f;
}
.v3-light-modal button[class~="bg-slate-700"]:hover,
.v3-light-modal button[class~="bg-slate-800"]:hover { border-color: #bfd1f5; background: #f2f6ff; color: #386ff1; }

#modalFormulario > .modal-surface { display: flex; flex-direction: column; }
#modalFormulario > .modal-surface > div:first-child { flex: 0 0 auto; border-color: #e5eaf2; background: #fff; }
#modalFormulario h2 { font-size: 20px; }
#formPedido { overflow-y: auto; min-height: 0; scrollbar-color: #c1cee2 #f8faff; }
#formPedido > [class~="bg-slate-800/40"] { border-radius: 8px; }
#formPedido label { color: #70809a; }
#clienteQuickResults { background: #fff; box-shadow: 0 14px 32px rgba(38, 61, 102, .18); }
#clienteQuickResults [class~="hover:bg-slate-800"]:hover { background: #eef4ff; }

#modalDirectorio > .modal-surface { padding: 0; }
#modalDirectorio .directory-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    position: sticky;
    top: 0;
    z-index: 2;
    align-items: center;
    margin: 0;
    padding: 24px 26px 18px;
    border-bottom: 1px solid #e7edf5;
    background: #fff;
}
#modalDirectorio .directory-toolbar h2 { font-size: 21px; }
#modalDirectorio .directory-toolbar > div:last-child { align-items: center; flex-wrap: nowrap; }
#modalDirectorio .directory-toolbar > div:last-child button { flex: 0 0 auto; white-space: nowrap; }
#busquedaClientes { min-width: min(250px, 100%); }
#directorioLista { padding: 18px 26px 26px; }
#directorioLista > [class~="bg-slate-800/50"] { border-radius: 8px; background: #fff; }
#directorioLista > [class~="bg-slate-800/50"]:hover { border-color: #bcd0f5; background: #f8faff; box-shadow: 0 5px 15px rgba(45,74,125,.07); }
#directorioLista [class~="text-white"] { color: #253654; }
#directorioLista [class~="text-slate-600"] { color: #9aa8bb; }
#directorioLista [class~="text-slate-400"] { color: #687892; }
#directorioLista [class~="text-slate-500"] { color: #8a99ae; }
#directorioLista [class~="text-blue-400"] { color: #386ff1; }
#directorioLista [class~="text-purple-400"] { color: #8557cc; }

#modalCliente > .modal-surface, #modalClienteDetalle > .modal-surface { padding: 26px; }
#modalCliente form > [class~="border-t"] { border-color: #e7edf5; }
#modalCliente [class~="bg-slate-800/50"] { border-radius: 8px; background: #f8faff; }
#modalClienteDetalle [class~="bg-slate-800/50"] { border-radius: 8px; background: #f8faff; }
#modalClienteDetalle .payment-method-card { border-color: #dfe7f2; border-radius: 8px; background: #fff; color: #4e607d; }
#modalClienteDetalle .payment-method-heading strong { color: #263958; }
#modalClienteDetalle .payment-method-details b { color: #8796ac; }
#modalClienteDetalle .payment-method-type.bank { color: #386ff1; }
#modalClienteDetalle .payment-method-type.crypto { color: #8959d3; }

@media (max-width: 768px) {
    .v3-light-modal { padding: 8px; }
    .v3-light-modal > .modal-surface { max-height: calc(100dvh - 16px) !important; border-radius: 10px !important; }
    #modalFormulario > .modal-surface { padding: 0 !important; }
    #modalFormulario > .modal-surface > div:first-child { padding: 14px 16px; }
    #modalFormulario h2 { font-size: 17px; }
    #modalFormulario > .modal-surface > div:first-child button { padding: 8px 10px; font-size: 10px; }
    #formPedido { padding: 15px; }
    #formPedido .flex { flex-wrap: nowrap; }
    #formPedido .flex > input:not([type="checkbox"]):not([type="hidden"]) { flex: 1 1 auto; width: 0; }
    #formPedido .flex > select, #formPedido .flex > button { flex: 0 0 auto; }
    #modalDirectorio > .modal-surface { padding: 0 !important; }
    #modalDirectorio .directory-toolbar { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 14px; }
    #modalDirectorio .directory-toolbar > div:last-child { width: 100%; flex-wrap: wrap; }
    #busquedaClientes { flex: 1 1 100%; }
    #directorioLista { padding: 14px 16px 20px; }
    #modalCliente > .modal-surface, #modalClienteDetalle > .modal-surface { padding: 18px !important; }
    #modalCliente form > .flex { flex-wrap: wrap; }
}
@media (max-width: 390px) {
    #modalFormulario > .modal-surface > div:first-child { gap: 8px; }
    #modalFormulario > .modal-surface > div:first-child button { gap: 4px; padding-inline: 7px; }
    #modalCliente form > [class~="border-t"] > .flex { align-items: flex-start; flex-direction: column; }
}

/* Directory and operation form are workspace views, not overlays. */
.dashboard-shell[data-view="directorio"] .page-heading,
.dashboard-shell[data-view="directorio"] .dashboard-controls,
.dashboard-shell[data-view="directorio"] .period-toolbar,
.dashboard-shell[data-view="directorio"] .dashboard-summary,
.dashboard-shell[data-view="directorio"] .operations-section,
.dashboard-shell[data-view="directorio"] .dashboard-footer,
.dashboard-shell[data-view="formulario"] .page-heading,
.dashboard-shell[data-view="formulario"] .dashboard-controls,
.dashboard-shell[data-view="formulario"] .period-toolbar,
.dashboard-shell[data-view="formulario"] .dashboard-summary,
.dashboard-shell[data-view="formulario"] .operations-section,
.dashboard-shell[data-view="formulario"] .dashboard-footer { display: none; }
.dashboard-shell .workspace-page {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
}
.dashboard-shell .workspace-page.hidden { display: none; }
.workspace-page > .modal-surface {
    width: 100%;
    max-width: none;
    max-height: none !important;
    margin: 0;
    overflow: visible !important;
    border: 1px solid #e1e7f0;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(45, 74, 125, .05);
}
#modalFormulario > .modal-surface { max-width: 1100px; margin-inline: auto; }
#modalFormulario > .modal-surface > div:first-child {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 21px 25px;
    border-radius: 8px 8px 0 0;
}
#modalFormulario #formPedido { overflow: visible; padding: 24px 25px 28px; gap: 18px; }
#modalFormulario #formPedido > [class~="bg-slate-800/40"] { padding: 17px 18px; }
#modalDirectorio > .modal-surface {
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
#modalDirectorio .directory-toolbar { position: static; padding: 8px 0 22px; background: transparent; }
#modalDirectorio #directorioLista { padding: 20px 0 28px; }

@media (max-width: 768px) {
    .dashboard-shell .workspace-page { padding: 0; }
    .dashboard-shell .workspace-page > .modal-surface { max-height: none !important; padding: 0 !important; border-radius: 8px !important; }
    #modalFormulario > .modal-surface > div:first-child { padding: 16px; }
    #modalFormulario #formPedido { padding: 16px; gap: 13px; }
    #modalFormulario #formPedido > [class~="bg-slate-800/40"] { padding: 12px; }
    #modalDirectorio .directory-toolbar { padding: 4px 0 18px; }
}

/* Operation workspace and branded controls. */
.sidebar-brand {
    position: relative;
    gap: 13px;
    padding: 0 10px 40px;
}
.sidebar-brand .brand-mark {
    position: relative;
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(145deg, #233c61 0%, #13233d 72%);
    box-shadow: 0 9px 19px rgba(23, 41, 68, .18), inset 0 0 0 1px rgba(255, 215, 105, .18);
}
.sidebar-brand .brand-mark::after {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(255, 236, 161, .14);
    border-radius: 12px;
    pointer-events: none;
}
.sidebar-brand .brand-mark img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 96px;
    height: 64px;
    max-width: none;
    object-fit: cover;
    transform: translate(-52%, -42%);
}
.brand-wordmark { display: grid; align-content: center; min-width: 0; gap: 3px; }
.sidebar-brand .brand-wordmark strong {
    color: #142744;
    font-size: 17px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: .055em;
}
.sidebar-brand .brand-wordmark span {
    color: #7385a2;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .18em;
}
@media (max-width: 900px) {
    .sidebar-brand { padding-bottom: 27px; }
}
.login-brand-mark { position: relative; display: block; width: 64px; height: 64px; margin: 0 auto 18px; overflow: hidden; border-radius: 10px; background: #172944; }
.login-brand-mark .login-isotipo { position: absolute; top: 50%; left: 50%; width: 155px; height: 103px; max-width: none; margin: 0; object-fit: cover; transform: translate(-50%, -50%); }

#modalFormulario > .modal-surface {
    max-width: 1280px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
#modalFormulario > .modal-surface > .operation-page-header {
    top: 0;
    padding: 3px 0 18px;
    border-color: #e0e7f1;
    border-radius: 0;
    background: #f3f6fb;
}
#modalFormulario .operation-page-header h2 { font-size: 24px; color: #1f3151; }
#modalFormulario .operation-page-header button { min-height: 42px; padding: 9px 17px; border-radius: 8px; box-shadow: 0 5px 12px rgba(56,111,241,.14); }
#modalFormulario .operation-page-header button .lucide { width: 16px; height: 16px; }
#modalFormulario #formPedido { padding: 23px 0 30px; gap: 18px; }
#modalFormulario #formPedido > .operation-flow {
    align-content: start;
    gap: 15px;
    padding: 19px;
    border: 1px solid #dfe7f2;
    border-radius: 8px;
    background: #fff;
}
#modalFormulario .operation-flow-heading { display: flex; align-items: center; gap: 9px; padding-bottom: 14px; border-bottom: 1px solid #e8edf5; }
#modalFormulario .operation-flow-heading .lucide { width: 17px; height: 17px; color: #386ff1; }
#modalFormulario .operation-flow-out .operation-flow-heading .lucide { color: #24a48b; }
#modalFormulario .operation-flow-heading h3 { margin: 0; color: #273b5d; font-size: 14px; font-weight: 700; }
#modalFormulario #formPedido > .operation-special {
    padding: 10px 0;
    border: 0;
    border-top: 1px solid #dfe7f2;
    border-radius: 0;
    background: transparent;
}
#modalFormulario #formPedido > .operation-special label { color: #5272ad; }
#modalFormulario #formPedido > div:not(.operation-flow) input:not([type="checkbox"]):not([type="hidden"]),
#modalFormulario #formPedido > div:not(.operation-flow) textarea { background: #fff; }

.v3-select-control { position: relative; width: 100%; min-width: 0; }
.v3-select-control.is-ready > select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
    clip-path: inset(50%);
}
#formPedido .flex > .v3-select-control { flex: 0 0 98px; width: 98px; }
.v3-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #dce5f1;
    border-radius: 8px;
    background: #fff;
    color: #29405f;
    text-align: left;
    font-size: 14px;
    font-weight: 550;
}
.v3-select-trigger:hover { border-color: #b7caf0; background: #f9fbff; }
.v3-select-trigger[aria-expanded="true"], .v3-select-trigger:focus-visible { border-color: #6d96ec; box-shadow: 0 0 0 3px rgba(56,111,241,.12); outline: none; }
.v3-select-trigger .lucide { width: 16px; height: 16px; color: #6f85aa; transition: transform 140ms ease; }
.v3-select-trigger[aria-expanded="true"] .lucide { transform: rotate(180deg); }
.v3-select-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 5px);
    left: 0;
    width: 100%;
    min-width: 168px;
    max-height: min(260px, 45dvh);
    overflow-y: auto;
    padding: 5px;
    border: 1px solid #dbe4f1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 13px 28px rgba(40, 63, 102, .16);
}
.v3-select-menu[hidden] { display: none; }
.v3-select-menu.opens-up { top: auto; bottom: calc(100% + 5px); }
#formPedido .flex > .v3-select-control .v3-select-menu { right: 0; left: auto; }
.v3-select-option {
    display: block;
    width: 100%;
    min-height: 36px;
    padding: 8px 11px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #405473;
    text-align: left;
    font-size: 13px;
}
.v3-select-option:hover, .v3-select-option:focus-visible { background: #f0f5ff; color: #2d63d5; outline: none; }
.v3-select-option.is-selected { background: #eaf1ff; color: #3169dd; font-weight: 650; }

@media (max-width: 768px) {
    #modalFormulario > .modal-surface > .operation-page-header { flex-wrap: nowrap; gap: 8px; padding: 4px 0 13px; }
    #modalFormulario .operation-page-header h2 { font-size: 18px; }
    #modalFormulario #formPedido { padding: 17px 0 26px; gap: 14px; }
    #modalFormulario #formPedido > .operation-flow { padding: 15px; }
    #modalFormulario #formPedido > .operation-special { padding: 9px 0; }
}
@media (max-width: 390px) {
    #modalFormulario .operation-page-header h2 { font-size: 16px; white-space: nowrap; }
}

/* Shared controls for the live operations workflow. */
.production-environment { color: #0f9d78; }
.v3-light-modal .modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #647590;
    background: transparent;
}
.v3-light-modal .modal-close:hover,
.v3-light-modal .modal-close:focus-visible { color: #275bd0; background: #edf3ff; border-color: #cfddf7; outline: none; }
.modal-close svg { width: 20px; height: 20px; }
.operations-tools { flex-wrap: wrap; }
.status-filter { display: flex; align-items: center; gap: 8px; min-width: 0; }
.status-filter > label { font-size: 12px; color: #6e7f99; }
.status-filter .v3-select-control { width: 192px; }
.status-filter .v3-select-trigger { min-height: 40px; font-size: 13px; }
.period-filters { flex-wrap: wrap; }
.directory-filterbar {
    position: sticky;
    top: 0;
    z-index: 12;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #e5ebf5;
    border-bottom: 1px solid #e5ebf5;
    background: #f4f7fc;
}
#modalDirectorio.workspace-page > .modal-surface { max-height: none !important; overflow: visible !important; }
.directory-types { display: inline-flex; gap: 3px; padding: 4px; border: 1px solid #e0e7f3; border-radius: 8px; background: #f5f8fd; }
.directory-types button { min-height: 36px; padding: 8px 15px; border-radius: 5px; color: #667994; font-size: 13px; }
.directory-types button[aria-pressed="true"] { color: #2e63db; background: #fff; box-shadow: 0 1px 5px rgba(38,62,100,.1); }
#directorioCount { color: #7a8aa3; font-size: 12px; }
.directory-filterbar .directory-types button { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.directory-filterbar #directorioCount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.directory-alphabet { display: flex; flex-wrap: nowrap; gap: 2px; min-width: 0; padding: 5px 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #bfcee6 transparent; }
.directory-alphabet button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #dae4f3; border-radius: 5px; background: #fff; color: #426292; font-size: 12px; font-weight: 650; }
.directory-filterbar .directory-alphabet button { flex: 0 0 24px; width: 24px; height: 30px; font-size: 11px; }
.directory-alphabet button:disabled { color: #aeb8c8; border-color: transparent; background: #f6f8fc; cursor: default; }
.directory-alphabet button:not(:disabled):hover,
.directory-alphabet button[aria-current] { color: #fff; background: #386ff1; border-color: #386ff1; }
.directory-entry { scroll-margin-top: var(--directory-filter-height, 92px); }
.directory-entry:focus-visible, .directory-alphabet button:focus-visible, .directory-types button:focus-visible { outline: 2px solid #386ff1; outline-offset: 3px; }

#roadmapContent { overflow-y: auto; overscroll-behavior: contain; }
#roadmapContent .roadmap-main-grid > div { border: 1px solid #e1e8f3; border-radius: 8px; background: #f8faff; }
#roadmapContent .roadmap-comments { color: #61738f; }
#roadmapContent .truncate { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
#roadmapContent .roadmap-main-grid > div:first-child { grid-template-columns: minmax(0,1fr); align-content: start; }
#roadmapContent .roadmap-main-grid > div:first-child > div:last-child { text-align: left; margin-top: 8px; border-top: 1px solid #e3eaf4; padding-top: 12px; }
#roadmapContent .roadmap-main-grid > div:first-child .text-green-400 { color: #14966e; font-size: 24px; line-height: 1.25; overflow-wrap: anywhere; }
#roadmapContent .payment-method-card { border-color: #dfe7f2; border-radius: 8px; background: #fff; color: #4e607d; }
#roadmapContent .payment-method-heading strong { color: #263958; }
#roadmapContent .payment-method-details b { color: #7e8ea6; }
#roadmapContent .payment-method-type.bank { color: #386ff1; }
#roadmapContent .payment-method-type.crypto { color: #8959d3; }
.roadmap-track { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; padding: 18px 12px; margin-bottom: 18px; border: 1px solid #e1e8f3; border-radius: 8px; background: #fafcff; }
.roadmap-step { position: relative; display: flex; align-items: center; flex-direction: column; gap: 8px; min-width: 0; padding: 0 4px; color: #7889a3; font-size: 10px; line-height: 1.3; font-weight: 650; text-align: center; }
.roadmap-step:not(:last-child)::after { content: ''; position: absolute; top: 17px; height: 2px; background: #dfe7f4; left: calc(50% + 20px); width: calc(100% - 36px); }
.roadmap-dot { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border: 2px solid #d3deee; border-radius: 50%; background: #fff; color: #8291a9; font-size: 12px; }
.roadmap-step.is-done .roadmap-dot { color: #3268df; border-color: #a5c0fb; background: #ecf2ff; }
.roadmap-step.is-current { color: #2e63dc; }
.roadmap-step.is-current .roadmap-dot { color: #fff; border-color: #386ff1; background: #386ff1; box-shadow: 0 3px 9px rgba(56,111,241,.2); }
.roadmap-step.is-failed.is-current { color: #cf455e; }
.roadmap-step.is-failed.is-current .roadmap-dot { color: #fff; border-color: #cf455e; background: #cf455e; }
.roadmap-step:focus-visible { outline: 2px solid #7fa5f5; outline-offset: 4px; border-radius: 4px; }
.roadmap-step:hover .roadmap-dot { border-color: #7399ec; }
.roadmap-alter-form > input:first-child { min-width: 0; }
#roadmapContent .roadmap-alter-form button { background: #fff0f2; color: #bf465e; border-color: #f0bdc7; }
#roadmapContent .roadmap-alter-form button:hover { background: #c63e57; color: #fff; }

.confirmation-surface { width: min(100%,420px); padding: 28px; }
.confirmation-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 8px; color: #c84c63; background: #fff0f3; }
.confirmation-icon svg { width: 22px; height: 22px; }
.confirmation-surface h2 { font-size: 20px; font-weight: 700; }
.confirmation-surface p { margin-top: 12px; color: #6a7c96; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-line; }
.confirmation-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.danger-button { min-height: 42px; padding: 10px 18px; border-radius: 8px; background: #c63e57; color: #fff; font-size: 13px; font-weight: 650; }
.danger-button:hover { background: #ab2d44; }
.confirmation-actions button:disabled { opacity: .6; cursor: wait; }
.confirmation-surface p.confirmation-error { color: #b92e49; }
.chart-wrap { position: relative; height: 320px; margin-top: 18px; }
.chart-lane-volume { fill: #fcfaff; }
.chart-lane-net { fill: #fafcff; }
.chart-lane-divider { stroke: #eef1f6; stroke-width: 1; }
.chart-axis-label { fill: #778aa7; font-size: 11px; }
.chart-axis-title { font: 600 10px Inter, sans-serif; }
.chart-y-net { fill: #386ff1; }
.chart-y-volume { fill: #8662ce; }
.chart-volume-point { stroke: #9273e8; }
.chart-point.is-active { r: 4.5; fill: #386ff1; stroke-width: 2; }
.chart-volume-point.is-active { fill: #9273e8; }
.chart-order-label { font-size: 10px; font-variant-numeric: tabular-nums; }
.chart-order-label.is-active { fill: #2d4774; font-weight: 650; }
#performanceChart.is-dense .chart-point { opacity: 0; }
#performanceChart.is-dense .chart-point.is-active { opacity: 1; }
.chart-selection-guide { stroke: #c3cfea; stroke-width: 1; stroke-dasharray: 3 4; pointer-events: none; }
.chart-selection-halo { fill: rgba(56,111,241,.12); stroke: rgba(56,111,241,.3); stroke-width: 1; pointer-events: none; }
.chart-selection-halo.is-volume { fill: rgba(146,115,232,.12); stroke: rgba(146,115,232,.3); }
.chart-hit-area { cursor: crosshair; }
#performanceChart .chart-hit-area:focus { outline: none; }
.chart-hit-area:focus-visible { outline: none; fill: transparent; stroke: none; }
.chart-tooltip { --chart-tooltip-accent: #386ff1; position: absolute; z-index: 3; width: 224px; max-width: calc(100% - 8px); padding: 10px 12px; border: 1px solid #d9e3f2; border-top: 2px solid var(--chart-tooltip-accent); border-radius: 8px; background: #fff; color: #314767; box-shadow: 0 6px 18px rgba(33,58,99,.13); font-size: 12px; pointer-events: none; }
.chart-tooltip[data-series="volume"] { --chart-tooltip-accent: #8662ce; }
.chart-tooltip::after { content: ''; position: absolute; left: var(--chart-arrow-x); width: 8px; height: 8px; background: #fff; transform: translateX(-50%) rotate(45deg); }
.chart-tooltip[data-placement="above"]::after { bottom: -5px; border-right: 1px solid #d9e3f2; border-bottom: 1px solid #d9e3f2; }
.chart-tooltip[data-placement="below"]::after { top: -5px; border-left: 1px solid var(--chart-tooltip-accent); border-top: 1px solid var(--chart-tooltip-accent); }
.chart-tooltip > span.is-selected { color: var(--chart-tooltip-accent); font-weight: 650; }
.chart-tooltip strong { display: block; margin-bottom: 3px; overflow-wrap: anywhere; }
.chart-tooltip > span { display: flex; justify-content: space-between; gap: 12px; padding-top: 5px; }
.chart-tooltip > .chart-tooltip-meta { color: #8091a9; font-size: 10px; margin-bottom: 6px; }
.chart-tooltip b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-tooltip[hidden] { display: none; }
.chart-legend { gap: 8px 16px; padding-top: 12px; margin-top: 0; }
.activity-ring { width: 132px; height: 132px; margin: 22px auto 18px; flex-shrink: 0; }
.activity-panel.has-status-breakdown .activity-ring { width: 112px; height: 112px; margin: 16px auto 12px; }
.activity-legend { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.activity-legend[hidden] { display: none; }
.activity-legend li { display: grid; grid-template-columns: minmax(0,1fr) auto 38px; align-items: center; gap: 10px; min-height: 30px; padding-block: 5px; border-bottom: 1px solid #f0f3f8; color: #536884; font-size: 11px; }
.activity-legend li:last-child { border-bottom: none; }
.activity-status-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.activity-status-swatch { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; }
.activity-status-count { color: #273958; font-weight: 650; font-variant-numeric: tabular-nums; }
.activity-status-share { color: #8290a8; text-align: right; font-variant-numeric: tabular-nums; }
.activity-note { margin-top: 10px; }
@media (max-width: 768px) {
    .operations-tools { width: 100%; }
    .status-filter { width: 100%; }
    .status-filter .v3-select-control { flex: 1; width: auto; }
    .directory-filterbar { grid-template-columns: minmax(0,1fr) auto; gap: 6px 10px; padding-block: 8px; }
    .directory-filterbar .directory-types { width: fit-content; max-width: 100%; }
    .directory-filterbar .directory-types button { flex: 1; padding-inline: 8px; }
    .directory-filterbar #directorioCount { font-size: 11px; }
    .directory-filterbar .directory-alphabet { grid-column: 1 / -1; grid-row: 2; }
    .directory-filterbar .directory-alphabet button { flex-basis: 32px; width: 32px; height: 32px; font-size: 12px; }
    .roadmap-track { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 8px; padding: 16px 8px; }
    .roadmap-step:nth-child(3)::after { display: none; }
    .roadmap-step { font-size: 10px; }
    #roadmapContent .roadmap-alter-form { display: grid; grid-template-columns: minmax(0,1fr) 70px 78px; }
    #roadmapContent .roadmap-alter-form > input:first-child { grid-column: 1 / -1; }
    #roadmapContent .roadmap-alter-form > input { width: 100%; }
    .chart-wrap { height: 320px; }
    .chart-legend strong { flex-basis: 100%; margin-left: 0; padding-top: 4px; }
}