:root {
    color-scheme: light;
    --bg-deep: #f3f7ff;
    --bg-mid: #e8efff;
    --bg-soft: #d6e3ff;
    --cobalt: #1a56db;
    --cobalt-soft: #60a5fa;
    --mint: #10b981;
    --amber: #f59e0b;
    --rose: #ef4444;
    --text: #0f172a;
    --text-soft: #334155;
    --text-muted: #64748b;
    --glass: rgba(255, 255, 255, 0.74);
    --glass-strong: rgba(255, 255, 255, 0.9);
    --glass-light: rgba(241, 245, 249, 0.78);
    --line: rgba(15, 23, 42, 0.12);
    --line-soft: rgba(15, 23, 42, 0.08);
    --shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
    --app-bg:
        radial-gradient(circle at 8% -2%, rgba(59, 130, 246, 0.22), transparent 36%),
        radial-gradient(circle at 92% -6%, rgba(14, 165, 233, 0.14), transparent 30%),
        linear-gradient(165deg, #f8fbff 0%, #eef4ff 44%, #e5eeff 100%);
    --side-link-bg: rgba(255, 255, 255, 0.78);
    --side-link-text: #1e293b;
    --side-link-active-bg: linear-gradient(130deg, rgba(37, 99, 235, 0.88), rgba(30, 64, 175, 0.82));
    --side-link-active-border: rgba(96, 165, 250, 0.75);
    --side-link-active-text: #f8fafc;
    --side-toggle-border: rgba(96, 165, 250, 0.38);
    --side-toggle-bg: rgba(59, 130, 246, 0.12);
    --side-toggle-text: #1e3a8a;
    --section-indicator: #334155;
    --phase-selector-border: rgba(96, 165, 250, 0.28);
    --phase-selector-bg: rgba(255, 255, 255, 0.8);
    --phase-pill-active-border: rgba(96, 165, 250, 0.6);
    --phase-pill-active-bg: linear-gradient(130deg, rgba(37, 99, 235, 0.82), rgba(30, 64, 175, 0.78));
    --phase-pill-active-text: #f8fafc;
    --ghost-btn-border: rgba(96, 165, 250, 0.48);
    --ghost-btn-bg: rgba(59, 130, 246, 0.12);
    --ghost-btn-color: #1e3a8a;
    --ghost-btn-hover-bg: rgba(59, 130, 246, 0.2);
    --primary-btn-text: #f8fafc;
    --primary-btn-bg: linear-gradient(130deg, #2563eb, #1d4ed8 60%, #1e40af);
    --primary-btn-shadow: 0 12px 28px rgba(37, 99, 235, 0.45);
    --control-header-border: rgba(96, 165, 250, 0.2);
    --control-header-bg: rgba(255, 255, 255, 0.82);
    --field-bg: rgba(255, 255, 255, 0.96);
    --field-text: #0f172a;
    --status-info-bg: linear-gradient(140deg, rgba(59, 130, 246, 0.2), rgba(219, 234, 254, 0.96));
    --status-success-bg: linear-gradient(140deg, rgba(16, 185, 129, 0.22), rgba(220, 252, 231, 0.96));
    --status-error-bg: linear-gradient(140deg, rgba(239, 68, 68, 0.22), rgba(254, 226, 226, 0.96));
    --card-muted-bg: rgba(248, 250, 252, 0.94);
    --funnel-bg: rgba(248, 250, 252, 0.96);
    --funnel-bar-bg: rgba(37, 99, 235, 0.14);
    --entity-rank-bg: rgba(37, 99, 235, 0.14);
    --entity-rank-text: #1d4ed8;
    --status-chip-success-bg: rgba(16, 185, 129, 0.14);
    --status-chip-success-text: #047857;
    --status-chip-warn-bg: rgba(245, 158, 11, 0.16);
    --status-chip-warn-text: #b45309;
    --status-chip-danger-bg: rgba(239, 68, 68, 0.14);
    --status-chip-danger-text: #b91c1c;
    --code-bg: rgba(248, 250, 252, 0.96);
    --code-text: #0f172a;
    --empty-bg: rgba(248, 250, 252, 0.9);
    --overlay-bg: rgba(15, 23, 42, 0.2);
    --loading-card-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.96));
    --loading-card-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
    --spinner-track: rgba(15, 23, 42, 0.16);
    --filter-badge-border: rgba(96, 165, 250, 0.54);
    --filter-badge-bg: rgba(37, 99, 235, 0.9);
    --filter-badge-text: #eff6ff;
    --filter-badge-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
    --chart-grid-stroke: rgba(148, 163, 184, 0.2);
    --chart-axis-stroke: rgba(148, 163, 184, 0.36);
    --chart-label-color: #64748b;
    --accent-strong: #2563eb;
    --accent-soft: #60a5fa;
    --accent-warm: #f59e0b;
    --accent-warm-soft: #fbbf24;
    --accent-neutral-strong: #222938;
    --accent-neutral-soft: #2f3543;
    --roi-card-border: #cbd5e1;
    --roi-card-bg: linear-gradient(160deg, #f8fafc, #e2e8f0);
    --roi-card-text: #0f172a;
    --gauge-danger: #ef4444;
    --gauge-danger-soft: #f87171;
    --gauge-warn: #f59e0b;
    --gauge-success: #22c55e;
    --gauge-success-strong: #15803d;
    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius-md: 16px;
    --radius-sm: 12px;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg-deep: #0f172a;
    --bg-mid: #1e293b;
    --bg-soft: #334155;
    --text: #e2e8f0;
    --text-soft: #cbd5e1;
    --text-muted: #94a3b8;
    --glass: rgba(15, 23, 42, 0.62);
    --glass-strong: rgba(15, 23, 42, 0.78);
    --glass-light: rgba(30, 41, 59, 0.56);
    --line: rgba(148, 163, 184, 0.24);
    --line-soft: rgba(148, 163, 184, 0.14);
    --shadow: 0 24px 56px rgba(2, 6, 23, 0.42);
    --app-bg:
        radial-gradient(circle at 8% -2%, rgba(26, 86, 219, 0.34), transparent 32%),
        radial-gradient(circle at 92% -6%, rgba(14, 165, 233, 0.2), transparent 28%),
        linear-gradient(165deg, #020617 0%, #0f172a 38%, #1e293b 100%);
    --side-link-bg: rgba(15, 23, 42, 0.55);
    --side-link-text: #cbd5e1;
    --side-link-active-bg: linear-gradient(130deg, rgba(37, 99, 235, 0.7), rgba(30, 64, 175, 0.6));
    --side-link-active-border: rgba(96, 165, 250, 0.75);
    --side-link-active-text: #eaf2ff;
    --side-toggle-border: rgba(96, 165, 250, 0.35);
    --side-toggle-bg: rgba(30, 64, 175, 0.2);
    --side-toggle-text: #dbeafe;
    --section-indicator: #bfdbfe;
    --phase-selector-border: rgba(96, 165, 250, 0.2);
    --phase-selector-bg: rgba(9, 19, 48, 0.48);
    --phase-pill-active-border: rgba(96, 165, 250, 0.6);
    --phase-pill-active-bg: linear-gradient(130deg, rgba(37, 99, 235, 0.7), rgba(30, 64, 175, 0.62));
    --phase-pill-active-text: #eff6ff;
    --ghost-btn-border: rgba(96, 165, 250, 0.4);
    --ghost-btn-bg: rgba(30, 64, 175, 0.22);
    --ghost-btn-color: #dbeafe;
    --ghost-btn-hover-bg: rgba(30, 64, 175, 0.34);
    --primary-btn-text: #f8fafc;
    --primary-btn-bg: linear-gradient(130deg, rgba(37, 99, 235, 0.84), rgba(30, 64, 175, 0.78));
    --primary-btn-shadow: 0 12px 28px rgba(30, 64, 175, 0.4);
    --control-header-border: rgba(96, 165, 250, 0.14);
    --control-header-bg: rgba(9, 19, 48, 0.55);
    --field-bg: rgba(15, 23, 42, 0.82);
    --field-text: #e2e8f0;
    --status-info-bg: linear-gradient(140deg, rgba(30, 64, 175, 0.62), rgba(15, 23, 42, 0.86));
    --status-success-bg: linear-gradient(140deg, rgba(16, 185, 129, 0.64), rgba(5, 46, 22, 0.86));
    --status-error-bg: linear-gradient(140deg, rgba(239, 68, 68, 0.62), rgba(69, 10, 10, 0.86));
    --card-muted-bg: rgba(15, 23, 42, 0.62);
    --funnel-bg: rgba(15, 23, 42, 0.58);
    --funnel-bar-bg: rgba(96, 165, 250, 0.2);
    --entity-rank-bg: rgba(96, 165, 250, 0.24);
    --entity-rank-text: #dbeafe;
    --status-chip-success-bg: rgba(16, 185, 129, 0.18);
    --status-chip-success-text: #6ee7b7;
    --status-chip-warn-bg: rgba(245, 158, 11, 0.16);
    --status-chip-warn-text: #fbbf24;
    --status-chip-danger-bg: rgba(239, 68, 68, 0.18);
    --status-chip-danger-text: #fca5a5;
    --code-bg: rgba(2, 6, 23, 0.88);
    --code-text: #e2e8f0;
    --empty-bg: rgba(15, 23, 42, 0.5);
    --overlay-bg: rgba(2, 6, 23, 0.62);
    --loading-card-bg: linear-gradient(150deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.9));
    --loading-card-shadow: 0 18px 44px rgba(2, 6, 23, 0.5);
    --spinner-track: rgba(148, 163, 184, 0.26);
    --filter-badge-border: rgba(96, 165, 250, 0.6);
    --filter-badge-bg: rgba(30, 64, 175, 0.92);
    --filter-badge-text: #dbeafe;
    --filter-badge-shadow: 0 10px 22px rgba(30, 64, 175, 0.38);
    --chart-grid-stroke: rgba(148, 163, 184, 0.22);
    --chart-axis-stroke: rgba(148, 163, 184, 0.3);
    --chart-label-color: #94a3b8;
    --accent-strong: #60a5fa;
    --accent-soft: #93c5fd;
    --accent-warm: #f59e0b;
    --accent-warm-soft: #fcd34d;
    --accent-neutral-strong: #334155;
    --accent-neutral-soft: #475569;
    --roi-card-border: var(--line-soft);
    --roi-card-bg: linear-gradient(160deg, rgba(15, 23, 42, 0.84), rgba(30, 41, 59, 0.8));
    --roi-card-text: #f8fafc;
}

[data-theme="amador"] {
    color-scheme: dark;
    --bg-deep: #060604;
    --bg-mid: #0d0b08;
    --bg-soft: #13100a;
    --cobalt: #c89b45;
    --cobalt-soft: #e6c47b;
    --mint: #d8b66b;
    --amber: #c89b45;
    --rose: #c76055;
    --text: #f7f0e3;
    --text-soft: #d5c7b0;
    --text-muted: #a89d8b;
    --glass: rgba(19, 16, 10, 0.88);
    --glass-strong: rgba(10, 10, 8, 0.94);
    --glass-light: rgba(24, 19, 13, 0.84);
    --line: rgba(198, 154, 70, 0.22);
    --line-soft: rgba(228, 194, 122, 0.16);
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    --app-bg:
        radial-gradient(circle at 15% -10%, rgba(210, 156, 55, 0.18), transparent 30%),
        radial-gradient(circle at 85% 5%, rgba(228, 194, 122, 0.1), transparent 33%),
        radial-gradient(circle at 70% 105%, rgba(125, 93, 39, 0.18), transparent 25%),
        linear-gradient(145deg, #030302 0%, #090806 45%, #050504 100%);
    --side-link-bg: rgba(19, 16, 10, 0.88);
    --side-link-text: #f7f0e3;
    --side-link-active-bg: linear-gradient(130deg, rgba(200, 155, 69, 0.34), rgba(125, 93, 39, 0.58));
    --side-link-active-border: rgba(228, 194, 122, 0.52);
    --side-link-active-text: #fff8ea;
    --side-toggle-border: rgba(228, 194, 122, 0.28);
    --side-toggle-bg: rgba(200, 155, 69, 0.1);
    --side-toggle-text: #e6c47b;
    --section-indicator: #e6c47b;
    --phase-selector-border: rgba(228, 194, 122, 0.22);
    --phase-selector-bg: rgba(19, 16, 10, 0.72);
    --phase-pill-active-border: rgba(228, 194, 122, 0.48);
    --phase-pill-active-bg: linear-gradient(130deg, rgba(200, 155, 69, 0.8), rgba(125, 93, 39, 0.92));
    --phase-pill-active-text: #080704;
    --ghost-btn-border: rgba(228, 194, 122, 0.28);
    --ghost-btn-bg: rgba(200, 155, 69, 0.08);
    --ghost-btn-color: #f7f0e3;
    --ghost-btn-hover-bg: rgba(200, 155, 69, 0.16);
    --primary-btn-text: #080704;
    --primary-btn-bg: linear-gradient(135deg, #e6c47b, #c89b45, #8f6a2f);
    --primary-btn-shadow: 0 12px 28px rgba(125, 93, 39, 0.34);
    --control-header-border: rgba(198, 154, 70, 0.18);
    --control-header-bg: rgba(19, 16, 10, 0.84);
    --field-bg: rgba(255, 255, 255, 0.045);
    --field-text: #f7f0e3;
    --status-info-bg: linear-gradient(140deg, rgba(200, 155, 69, 0.2), rgba(19, 16, 10, 0.94));
    --status-success-bg: linear-gradient(140deg, rgba(216, 182, 107, 0.22), rgba(19, 16, 10, 0.94));
    --status-error-bg: linear-gradient(140deg, rgba(199, 96, 85, 0.22), rgba(19, 16, 10, 0.94));
    --card-muted-bg: rgba(19, 16, 10, 0.72);
    --funnel-bg: rgba(19, 16, 10, 0.8);
    --funnel-bar-bg: rgba(200, 155, 69, 0.12);
    --entity-rank-bg: rgba(200, 155, 69, 0.16);
    --entity-rank-text: #e6c47b;
    --status-chip-success-bg: rgba(216, 182, 107, 0.16);
    --status-chip-success-text: #f0d8a1;
    --status-chip-warn-bg: rgba(200, 155, 69, 0.16);
    --status-chip-warn-text: #e6c47b;
    --status-chip-danger-bg: rgba(199, 96, 85, 0.16);
    --status-chip-danger-text: #e6ada4;
    --code-bg: rgba(10, 10, 8, 0.9);
    --code-text: #f7f0e3;
    --empty-bg: rgba(19, 16, 10, 0.7);
    --overlay-bg: rgba(4, 3, 2, 0.68);
    --loading-card-bg: linear-gradient(150deg, rgba(19, 16, 10, 0.96), rgba(10, 10, 8, 0.92));
    --loading-card-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
    --spinner-track: rgba(228, 194, 122, 0.18);
    --filter-badge-border: rgba(228, 194, 122, 0.46);
    --filter-badge-bg: rgba(200, 155, 69, 0.9);
    --filter-badge-text: #080704;
    --filter-badge-shadow: 0 10px 22px rgba(125, 93, 39, 0.34);
    --chart-grid-stroke: rgba(228, 194, 122, 0.12);
    --chart-axis-stroke: rgba(228, 194, 122, 0.2);
    --chart-label-color: #a89d8b;
    --accent-strong: #c89b45;
    --accent-soft: #e6c47b;
    --accent-warm: #c89b45;
    --accent-warm-soft: #f0d8a1;
    --accent-neutral-strong: #1b160e;
    --accent-neutral-soft: #2a2217;
    --roi-card-border: rgba(228, 194, 122, 0.22);
    --roi-card-bg: linear-gradient(160deg, rgba(19, 16, 10, 0.92), rgba(10, 10, 8, 0.94));
    --roi-card-text: #f7f0e3;
    --gauge-danger: #c76055;
    --gauge-danger-soft: #d98f86;
    --gauge-warn: #c89b45;
    --gauge-success: #d8b66b;
    --gauge-success-strong: #8f6a2f;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
    font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
    color: var(--text);
    background: var(--app-bg);
}

body {
    padding: 8px 10px 16px;
}

button,
select,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.app-shell {
    width: min(1500px, 100%);
    margin: 0 auto;
}

.capture-canvas-btn {
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 2200;
    border: 1px solid var(--ghost-btn-border);
    background: linear-gradient(145deg, var(--glass-strong), var(--glass));
    color: var(--text);
    border-radius: 999px;
    min-height: 38px;
    padding: 0 14px;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.capture-canvas-btn.is-active {
    color: #eff6ff;
    border-color: rgba(96, 165, 250, 0.7);
    background: linear-gradient(130deg, rgba(37, 99, 235, 0.92), rgba(30, 64, 175, 0.88));
}

.capture-canvas-btn:focus-visible {
    outline: 2px solid var(--cobalt-soft);
    outline-offset: 2px;
}

html.capture-canvas-mode,
body.capture-canvas-mode {
    overflow-x: hidden !important;
}

html.capture-canvas-mode {
    font-size: 18px;
}

body.capture-canvas-mode {
    padding: 56px 30px 20px;
}

body.capture-canvas-mode[data-active-tab="tab-reporte-diarii"],
body.capture-canvas-mode[data-active-tab="tab-informe"] {
    padding: 24px 18px 18px;
}

body.capture-canvas-mode .app-header,
body.capture-canvas-mode .app-header-inline,
body.capture-canvas-mode .sidebar-nav,
body.capture-canvas-mode #sidebar-nav,
body.capture-canvas-mode .status-banner,
body.capture-canvas-mode #status-banner {
    display: none !important;
}

body.capture-canvas-mode .capture-canvas-btn {
    display: none !important;
}

body.capture-canvas-mode .diarii-selector-card {
    display: none !important;
}

body.capture-canvas-mode .app-shell {
    width: min(2480px, calc(100vw - 60px));
    max-width: 2480px;
    margin: 0 auto;
}

body.capture-canvas-mode[data-active-tab="tab-reporte-diarii"] .app-shell,
body.capture-canvas-mode[data-active-tab="tab-informe"] .app-shell {
    width: min(1360px, calc(100vw - 48px));
    max-width: 1360px;
}

body.capture-canvas-mode .workspace-layout {
    display: block;
    grid-template-columns: 1fr;
    gap: 0;
}

body.capture-canvas-mode .workspace-content {
    width: min(2200px, 100%);
    min-width: 0;
    margin: 0 auto;
}

body.capture-canvas-mode[data-active-tab="tab-reporte-diarii"] .workspace-content,
body.capture-canvas-mode[data-active-tab="tab-informe"] .workspace-content {
    width: 100%;
}

body.capture-canvas-mode main,
body.capture-canvas-mode .tab-content.active {
    width: 100%;
    max-width: 100%;
    gap: 20px;
}

body.capture-canvas-mode[data-active-tab="tab-reporte-diarii"] main,
body.capture-canvas-mode[data-active-tab="tab-reporte-diarii"] .tab-content.active,
body.capture-canvas-mode[data-active-tab="tab-informe"] main,
body.capture-canvas-mode[data-active-tab="tab-informe"] .tab-content.active {
    gap: 10px;
}

body.capture-canvas-mode .panel-card,
body.capture-canvas-mode .control-card,
body.capture-canvas-mode .report-grid-two,
body.capture-canvas-mode .panel-grid,
body.capture-canvas-mode .kpi-grid,
body.capture-canvas-mode .summary-grid,
body.capture-canvas-mode .entity-grid,
body.capture-canvas-mode .phase-columns,
body.capture-canvas-mode .funnel-grid,
body.capture-canvas-mode .table-container,
body.capture-canvas-mode .chart-box {
    max-width: 100%;
    min-width: 0;
}

body.capture-canvas-mode .table-container,
body.capture-canvas-mode .chart-box {
    overflow-x: hidden;
}

body.capture-canvas-mode table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
}

body.capture-canvas-mode th,
body.capture-canvas-mode td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.workspace-layout {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 10px;
}

.workspace-layout.sidebar-hidden {
    grid-template-columns: 1fr;
}

.workspace-layout.sidebar-hidden .sidebar-nav {
    display: none;
}

.workspace-content {
    min-width: 0;
}

.sidebar-nav {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(145deg, var(--glass-strong), var(--glass));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
    padding: 10px;
    display: grid;
    align-content: start;
    gap: 6px;
    position: sticky;
    top: 14px;
    height: fit-content;
}

.sidebar-nav.collapsed {
    width: 58px;
    padding-inline: 6px;
}

.sidebar-nav.collapsed .sidebar-head {
    display: none;
}

.sidebar-nav.collapsed .sidebar-section-title,
.sidebar-nav.collapsed .side-toggle {
    display: none;
}

.sidebar-nav.collapsed .side-link {
    text-align: center;
    padding-inline: 6px;
    font-size: 0.74rem;
}

.sidebar-head h3 {
    margin: 0;
}

.sidebar-section {
    display: grid;
    gap: 8px;
}

.sidebar-section + .sidebar-section {
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
}

.sidebar-section-title {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.side-link {
    width: 100%;
    border: 1px solid var(--line-soft);
    background: var(--side-link-bg);
    color: var(--side-link-text);
    border-radius: 10px;
    min-height: 34px;
    text-align: left;
    padding: 0 10px;
    font-weight: 600;
    font-size: 0.9rem;
}

.side-link.active {
    color: var(--side-link-active-text);
    border-color: var(--side-link-active-border);
    background: var(--side-link-active-bg);
}

.side-toggle {
    width: 100%;
    border: 1px solid var(--side-toggle-border);
    background: var(--side-toggle-bg);
    color: var(--side-toggle-text);
    border-radius: 10px;
    min-height: 34px;
    text-align: left;
    padding: 0 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.infra-group {
    display: grid;
    gap: 8px;
}

.infra-group.is-hidden {
    display: none;
}

.control-card,
.panel-card,
.status-banner {
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, var(--glass-strong), var(--glass));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow);
}

.app-header,
.status-banner {
    margin-bottom: 8px;
}

.app-header {
    display: grid;
    gap: 6px;
}

.app-header-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.app-title-inline {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.app-header-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    padding: 2px 2px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.header-main h1,
.panel-head h3,
.control-head h2,
.metric-card h4,
.entity-card h4 {
    margin: 0;
}

.kicker {
    margin: 0 0 2px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    color: var(--cobalt-soft);
}

.section-indicator {
    margin: 0;
    color: var(--section-indicator);
    font-size: 0.78rem;
    letter-spacing: 0.01em;
}

.muted {
    margin: 2px 0 0;
    color: var(--text-soft);
    line-height: 1.35;
    font-size: 0.88rem;
}

.header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.phase-selector {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px;
    border-radius: 999px;
    border: 1px solid var(--phase-selector-border);
    background: var(--phase-selector-bg);
    overflow-x: auto;
    max-width: 100%;
}

.panel-card-compact {
    padding: 8px 10px;
}

.phase-pill {
    min-height: 30px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0 10px;
    white-space: nowrap;
}

.phase-pill.active {
    color: var(--phase-pill-active-text);
    border-color: var(--phase-pill-active-border);
    background: var(--phase-pill-active-bg);
}

.ghost-btn,
.primary-btn {
    min-height: 32px;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0 12px;
    font-weight: 700;
}

.ghost-btn {
    border-color: var(--ghost-btn-border);
    background: var(--ghost-btn-bg);
    color: var(--ghost-btn-color);
}

#theme-toggle-btn {
    min-width: 108px;
}

.ghost-btn:hover {
    background: var(--ghost-btn-hover-bg);
}

.primary-btn {
    width: 100%;
    color: var(--primary-btn-text);
    background: var(--primary-btn-bg);
    box-shadow: var(--primary-btn-shadow);
}

.header-actions .primary-btn {
    width: auto;
}

.control-card {
    padding: 6px 8px;
}

.control-card--header {
    margin-bottom: 0;
    border-radius: 10px;
    border-color: var(--control-header-border);
    background: var(--control-header-bg);
    box-shadow: none;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.control-head {
    display: none;
}

.context-meta {
    margin-top: 2px;
}

.control-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.control-grid-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: max-content;
    padding-bottom: 1px;
}

.control-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: max-content;
    padding: 4px 2px 0;
}

.control-meta-row .section-indicator,
.control-meta-row .range-summary {
    font-size: 0.72rem;
    line-height: 1.15;
}

.field-compact {
    min-width: 0;
    display: block;
    flex: 0 0 auto;
}

.field-compact select,
.field-compact input {
    min-height: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 0.9rem;
    padding: 0 8px;
    margin: 0;
}

#brand-select {
    width: 180px;
}

#project-field select {
    width: 180px;
}

#range-preset {
    width: 140px;
}

#start-date,
#end-date {
    width: 138px;
}

.date-native-field,
.field.date-native-field {
    display: none !important;
}

.lead-report-range-field {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr);
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 304px;
    z-index: 30;
}

.lead-report-range-field > span {
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.lead-report-range-trigger {
    width: 100%;
    min-height: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--field-bg);
    color: var(--field-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 10px;
    text-align: left;
    white-space: nowrap;
}

.lead-report-range-trigger::after {
    content: "▾";
    color: var(--text-soft);
    font-size: 0.78rem;
}

.lead-report-range-trigger strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.88rem;
    font-weight: 700;
}

.lead-report-range-field.is-open .lead-report-range-trigger {
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.lead-report-range-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(420px, calc(100vw - 24px));
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--glass-strong);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    padding: 12px;
    z-index: 80;
}

.lead-report-range-popover.hidden {
    display: none;
}

.lead-report-range-presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 10px;
}

.lead-report-range-presets button,
.lead-report-range-popover__head button,
.lead-report-range-popover__foot button,
.lead-report-range-day {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--card-muted-bg);
    color: var(--text);
    cursor: pointer;
    font: inherit;
}

.lead-report-range-presets button {
    min-height: 30px;
    padding: 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
}

.lead-report-range-presets button.is-active {
    border-color: var(--accent-strong);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.lead-report-range-popover__head {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.lead-report-range-popover__head strong {
    text-align: center;
    text-transform: capitalize;
}

.lead-report-range-popover__head button {
    aspect-ratio: 1;
    font-weight: 800;
}

.lead-report-range-weekdays,
.lead-report-range-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.lead-report-range-weekdays {
    margin-bottom: 4px;
}

.lead-report-range-weekdays span {
    color: var(--text-soft);
    font-size: 0.68rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.lead-report-range-day {
    aspect-ratio: 1;
    min-width: 0;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 700;
}

.lead-report-range-day.is-muted {
    color: var(--text-soft);
    opacity: 0.52;
}

.lead-report-range-day.is-inside {
    border-color: rgba(37, 99, 235, 0.22);
    background: rgba(37, 99, 235, 0.11);
}

.lead-report-range-day.is-edge {
    border-color: var(--accent-strong);
    background: var(--accent-strong);
    color: #fff;
}

.lead-report-range-popover__foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.lead-report-range-popover__foot button {
    min-height: 30px;
    padding: 0 12px;
    font-weight: 800;
}

.lead-report-range-field {
    display: block;
    width: 286px;
    min-width: 286px;
}

.lead-report-range-field > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.lead-report-range-trigger {
    gap: 0;
    justify-content: flex-start;
    padding: 0;
    overflow: hidden;
}

.lead-report-range-trigger::before {
    content: "Periodo";
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    border-right: 1px solid var(--line-soft);
    background: var(--glass-light);
    color: var(--text-soft);
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0;
    padding: 0 9px;
    text-transform: uppercase;
}

.lead-report-range-trigger::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    color: var(--text-soft);
    flex: 0 0 auto;
    margin: 0 10px 0 8px;
}

.lead-report-range-trigger strong {
    flex: 1 1 auto;
    font-size: 0.84rem;
    padding: 0 0 0 9px;
}

.lead-report-range-popover {
    top: calc(100% + 7px);
    width: min(364px, calc(100vw - 24px));
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
    padding: 10px;
}

.lead-report-range-presets {
    display: flex;
    flex-wrap: wrap;
}

.lead-report-range-presets button {
    min-height: 28px;
    flex: 1 1 auto;
    padding: 0 9px;
    font-size: 0.74rem;
    white-space: nowrap;
}

.lead-report-range-help {
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.07);
    color: var(--text-soft);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 8px;
    padding: 7px 9px;
}

.lead-report-range-help.is-selecting-end {
    border-color: rgba(245, 158, 11, 0.34);
    background: rgba(245, 158, 11, 0.12);
    color: var(--text);
}

.lead-report-range-popover__head {
    grid-template-columns: 30px 1fr 30px;
}

.lead-report-range-popover__head strong {
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 800;
}

.lead-report-range-weekdays,
.lead-report-range-days {
    gap: 3px;
}

.lead-report-range-day {
    font-size: 0.78rem;
}

.lead-report-range-popover__foot {
    margin-top: 8px;
}

.app-header-inline,
.control-card--header.date-picker-open {
    overflow: visible;
}

.control-card--header.date-picker-open {
    position: relative;
    z-index: 120;
}

.control-card--header .range-summary {
    display: none;
}

.control-card--header .control-meta-row {
    justify-content: flex-end;
    min-width: 0;
}

.control-card--header .section-indicator {
    margin-left: auto;
}

.lead-report-range-field {
    width: 250px;
    min-width: 250px;
}

.lead-report-range-trigger {
    height: 34px;
    min-height: 34px;
    border-color: rgba(37, 99, 235, 0.2);
}

.lead-report-range-trigger::before {
    background: rgba(37, 99, 235, 0.08);
}

.lead-report-range-popover {
    right: auto;
    left: 0;
    width: 340px;
    max-width: calc(100vw - 28px);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.project-goals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.project-goal-card {
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 12px;
    background: var(--card-muted-bg);
    display: grid;
    gap: 10px;
}

.project-goal-card.is-active {
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3) inset;
}

.project-goal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.project-goal-title {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.2;
}

.project-goal-meta {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.82rem;
    line-height: 1.25;
}

.project-goal-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid var(--line-soft);
    background: var(--field-bg);
    color: var(--text-soft);
}

.project-goal-status.ok {
    border-color: rgba(16, 185, 129, 0.45);
    color: #047857;
}

.project-goal-status.warn {
    border-color: rgba(245, 158, 11, 0.45);
    color: #b45309;
}

[data-theme="dark"] .project-goal-status.ok {
    color: #34d399;
}

[data-theme="dark"] .project-goal-status.warn {
    color: #fbbf24;
}

.project-goal-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.project-goal-label--full {
    grid-column: 1 / -1;
}

.project-goal-label {
    display: grid;
    gap: 5px;
    font-size: 0.78rem;
    color: var(--text-soft);
    min-width: 0;
}

.project-goal-label span {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.project-goal-label input {
    min-height: 36px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--field-bg);
    color: var(--field-text);
    padding: 0 10px;
    font-size: 0.9rem;
}

.project-goal-total {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px 14px;
    border: 1px dashed var(--line-soft);
    border-radius: 14px;
    padding: 12px 13px;
    background: var(--glass-light);
}

.project-goal-total span {
    font-size: 0.79rem;
    color: var(--text-soft);
    font-weight: 600;
    line-height: 1.25;
}

.project-goal-total strong {
    justify-self: end;
    font-size: 1.18rem;
    line-height: 1;
}

.project-goal-total small {
    grid-column: 1 / -1;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.project-goal-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.project-goal-actions .ghost-btn,
.project-goal-actions .primary-btn {
    min-height: 34px;
    padding: 0 10px;
}

.project-goal-actions .ghost-btn {
    min-width: 84px;
}

.project-goal-actions .primary-btn {
    flex: 1;
    min-width: 160px;
}

.diarii-page {
    display: grid;
    width: min(1360px, 100%);
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
    overflow-x: hidden;
}

.diarii-page > .empty-state {
    grid-column: 1 / -1;
}

.diarii-canvas-title {
    display: none;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-canvas-title {
    width: 100%;
    margin: 0 auto 12px;
    display: grid;
    justify-items: center;
    gap: 5px;
    color: #111111;
    letter-spacing: 0;
    text-align: center;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-canvas-title strong {
    color: #111111;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.1;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-canvas-title small {
    color: #7a7973;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.2;
}

.diarii-selector-card {
    width: min(1360px, 100%);
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: linear-gradient(145deg, var(--glass-strong), var(--glass));
    box-shadow: var(--shadow);
    padding: 12px 14px;
    display: grid;
    gap: 10px;
}

.diarii-selector-card h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.15;
}

.diarii-project-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.diarii-project-pill {
    min-height: 32px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--text-soft);
    padding: 0 12px;
    font-size: 0.84rem;
    font-weight: 700;
}

.diarii-project-pill.is-active {
    border-color: rgba(57, 139, 224, 0.62);
    background: #398be0;
    color: #ffffff;
}

.diarii-slot-manager {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.diarii-slot-manager strong {
    display: block;
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.15;
}

.diarii-slot-manager small {
    display: block;
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 0.78rem;
    line-height: 1.3;
}

.diarii-slot-add {
    min-height: 34px;
    border: 1px solid rgba(57, 139, 224, 0.42);
    border-radius: 999px;
    background: #398be0;
    color: #ffffff;
    padding: 0 14px;
    font-size: 0.83rem;
    font-weight: 800;
    white-space: nowrap;
}

.diarii-slot-add:disabled {
    cursor: not-allowed;
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(15, 23, 42, 0.08);
    color: var(--text-muted);
}

.diarii-card-shot {
    width: 100%;
    min-height: 0;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 16px;
    border: 1px solid #d8d8d4;
    border-radius: 14px;
    background: #ffffff;
    color: #1b1b1b;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

.diarii-card-shot--empty {
    aspect-ratio: auto;
    min-height: 240px;
}

.diarii-slot-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 7px;
    border: 1px solid rgba(207, 207, 201, 0.55);
    border-radius: 11px;
    background: #f8f8f5;
}

.diarii-slot-toolbar label {
    flex: 1;
    min-width: 0;
    display: block;
}

.diarii-slot-toolbar label span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.diarii-slot-select {
    width: 100%;
    min-height: 34px;
    border: 1px solid #d8d8d4;
    border-radius: 10px;
    background: #ffffff;
    color: #171717;
    padding: 0 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
}

.diarii-slot-remove {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(127, 29, 29, 0.22);
    border-radius: 999px;
    background: #fff3f0;
    color: #991b1b;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.diarii-shot-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddddda;
}

.diarii-shot-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.diarii-shot-name strong {
    font-size: 18px;
    line-height: 1.15;
}

.diarii-shot-head > span {
    flex: 0 0 auto;
    font-size: 12px;
}

.diarii-shot-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #398be0;
    flex: 0 0 auto;
}

.diarii-shot-kpis {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
}

.diarii-shot-body {
    display: grid;
    grid-template-columns: minmax(175px, 0.43fr) minmax(0, 0.57fr);
    align-items: stretch;
    gap: 10px;
    margin-top: 10px;
    flex: 1;
    min-height: 0;
}

.diarii-shot-kpi {
    min-height: 82px;
    border-radius: 10px;
    background: linear-gradient(180deg, #f5f3ee 0%, #efede6 100%);
    padding: 10px 12px;
    display: grid;
    align-content: start;
    border: 1px solid rgba(207, 207, 201, 0.42);
}

.diarii-shot-kpi span {
    margin-bottom: 4px;
    color: #3f3f3a;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
}

.diarii-shot-kpi strong {
    color: #171717;
    font-size: 30px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}

.diarii-shot-kpi strong.is-blue {
    color: #2f8ee8;
}

.diarii-shot-kpi strong.is-green {
    color: #20a37a;
}

.diarii-shot-kpi small {
    margin-top: 3px;
    color: #282828;
    font-size: 13.5px;
}

.diarii-shot-kpi em {
    width: fit-content;
    margin-top: 5px;
    border-radius: 999px;
    background: #e7f5dc;
    color: #315f15;
    padding: 2px 9px;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
}

.diarii-shot-chart {
    margin-top: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #f5f3ee 0%, #efede6 100%);
    padding: 12px 12px 13px;
    border: 1px solid rgba(207, 207, 201, 0.42);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.diarii-shot-chart h3 {
    margin: 0 0 8px;
    color: #44433e;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.diarii-shot-plot {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 7px;
    flex: 1;
    min-height: 0;
    height: auto;
}

.diarii-shot-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 38px;
    color: #777773;
    font-size: 11.5px;
}

.diarii-shot-bars {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: clamp(8px, 7%, 18px);
    padding: 0 10px 38px;
    border-bottom: 1px solid #cfcfc9;
    overflow: visible;
}

.diarii-shot-grid {
    position: absolute;
    inset: 0 0 38px;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 17px,
        rgba(201, 201, 194, 0.58) 18px
    );
    pointer-events: none;
}

.diarii-shot-col {
    position: relative;
    z-index: 1;
    height: 100%;
    display: grid;
    align-items: end;
    justify-items: center;
}

.diarii-shot-col span {
    position: absolute;
    bottom: -36px;
    min-width: 70px;
    color: #8a8984;
    font-size: 11.5px;
    display: grid;
    justify-items: center;
    gap: 2px;
    line-height: 1.15;
    text-align: center;
}

.diarii-shot-col span strong {
    color: #8a8984;
    font-size: 11.5px;
    font-weight: 600;
}

.diarii-shot-col span small {
    color: #555550;
    font-size: 11.5px;
    font-weight: 700;
}

.diarii-shot-bar {
    width: min(68px, 82%);
    min-height: 3px;
    border-radius: 5px 5px 0 0;
}

.diarii-shot-bar.is-before {
    background: #a9cdf2;
}

.diarii-shot-bar.is-now {
    background: #398be0;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-page {
    gap: 20px;
    overflow-x: visible;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-card-shot {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 22px;
    border-radius: 18px;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-slot-toolbar {
    display: none;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-head {
    padding-bottom: 16px;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-name {
    gap: 13px;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-dot {
    width: 15px;
    height: 15px;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-name strong {
    font-size: 30px;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-head > span {
    font-size: 20px;
    font-weight: 650;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-body {
    grid-template-columns: 255px minmax(0, 1fr);
    gap: 14px;
    margin-top: 14px;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-kpis {
    gap: 12px;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-kpi {
    min-height: 0;
    padding: 16px 18px;
    border-radius: 14px;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-kpi span {
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 800;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-kpi strong {
    font-size: 42px;
    font-weight: 850;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-kpi small {
    margin-top: 5px;
    font-size: 18px;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-kpi em {
    margin-top: 8px;
    padding: 5px 13px;
    font-size: 14px;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-chart {
    padding: 18px 18px 18px;
    border-radius: 14px;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-chart h3 {
    margin-bottom: 12px;
    font-size: 19px;
    font-weight: 850;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-plot {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    height: auto;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-axis {
    color: #5e5d57;
    padding-bottom: 68px;
    font-size: 19px;
    font-weight: 750;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-bars {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(12px, 10%, 24px);
    padding: 0 clamp(18px, 9%, 34px) 68px;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-grid {
    inset: 0 0 68px;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 24px,
        rgba(201, 201, 194, 0.6) 25px
    );
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-col span {
    bottom: -62px;
    color: #67665f;
    gap: 2px;
    font-size: 18px;
    min-width: 96px;
    line-height: 1.05;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-col span strong {
    color: #67665f;
    font-size: 18px;
    font-weight: 850;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-col span small {
    color: #2f2f2a;
    font-size: 20px;
    font-weight: 900;
}

body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-bar {
    width: min(64px, 72%);
    border-radius: 7px 7px 0 0;
}

@media (max-width: 980px) and (min-width: 681px) {
    .diarii-page {
        grid-template-columns: 1fr;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-card-shot {
        width: 100%;
        padding: 18px;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-body {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 14px;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-kpi {
        min-height: 98px;
        padding: 15px 16px;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-kpi strong {
        font-size: 37px;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-chart {
        padding: 14px 12px 15px;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-plot {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 8px;
        height: auto;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-axis {
        padding-bottom: 66px;
        font-size: 18px;
        font-weight: 750;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-bars {
        gap: clamp(10px, 9%, 20px);
        padding: 0 clamp(16px, 8%, 28px) 66px;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-grid {
        inset: 0 0 66px;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-bar {
        width: min(58px, 70%);
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-col span {
        bottom: -60px;
        min-width: 96px;
        font-size: 18px;
        line-height: 1.05;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-col span strong,
    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-col span small {
        font-size: 18px;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-col span small {
        font-size: 20px;
        font-weight: 900;
    }
}

@media (max-width: 680px) {
    .diarii-page {
        grid-template-columns: 1fr;
        overflow-x: visible;
    }

    .diarii-slot-manager,
    .diarii-slot-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .diarii-slot-add,
    .diarii-slot-remove {
        width: 100%;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-canvas-title {
        width: 100%;
    }

    .diarii-card-shot {
        width: 100%;
        padding: 15px;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-card-shot {
        width: 100%;
        padding: 15px;
    }

    .diarii-shot-body {
        grid-template-columns: 1fr;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-body {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 12px;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-kpi {
        min-height: 92px;
        padding: 14px 15px;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-kpi strong {
        font-size: 36px;
    }

    .diarii-shot-chart {
        min-height: 0;
    }

    .diarii-shot-plot {
        height: 220px;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-plot {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 8px;
        height: 260px;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-axis {
        padding-bottom: 64px;
        font-size: 18px;
        font-weight: 750;
    }

    .diarii-shot-bars {
        gap: 14px;
        padding-inline: 8px;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-bars {
        gap: 14px;
        padding: 0 clamp(12px, 7vw, 28px) 64px;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-grid {
        inset: 0 0 64px;
    }

    .diarii-shot-bar {
        width: min(70px, 23vw);
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-bar {
        width: min(82px, 26vw);
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-col span {
        bottom: -59px;
        min-width: 94px;
        font-size: 18px;
        line-height: 1.05;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-col span strong,
    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-col span small {
        font-size: 18px;
    }

    body.capture-canvas-mode #tab-reporte-diarii.active .diarii-shot-col span small {
        font-size: 20px;
        font-weight: 900;
    }
}

.diarii-sheet {
    width: min(210mm, 100%);
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 12mm 13mm 12mm;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.diarii-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #111111;
}

.diarii-page-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    letter-spacing: -0.01em;
}

.diarii-page-header p,
.diarii-page-header span {
    margin: 0;
    font-size: 10px;
    color: #8a8a86;
}

.diarii-proj {
    border: 0.5px solid #e0e0de;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

.diarii-proj:last-of-type {
    margin-bottom: 0;
}

.diarii-proj-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 0.5px solid #e0e0de;
    background: #fafaf8;
}

.diarii-proj-head .name {
    font-size: 12.5px;
    font-weight: 600;
    color: #111111;
}

.diarii-proj-head .date {
    margin-left: auto;
    font-size: 10px;
    color: #8a8a86;
}

.diarii-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 0.5px solid #e0e0de;
}

.diarii-kpi-card {
    padding: 9px 12px;
    border-right: 0.5px solid #e0e0de;
    background: #f7f7f5;
}

.diarii-kpi-card:last-child {
    border-right: none;
}

.diarii-kpi-label {
    font-size: 9px;
    color: #8a8a86;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
}

.diarii-kpi-val {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
    color: #111111;
}

.diarii-kpi-val--accent {
    color: #2563eb;
}

.diarii-kpi-val--green {
    color: #16a34a;
}

.diarii-kpi-val--amber {
    color: #b45309;
}

.diarii-kpi-sub {
    font-size: 10px;
    color: #888888;
    margin-top: 2px;
}

.diarii-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 99px;
    margin-top: 4px;
}

.diarii-badge--green {
    background: #dcfce7;
    color: #166534;
}

.diarii-badge--warn {
    background: #fef3c7;
    color: #92400e;
}

.diarii-chart-wrap {
    padding: 10px 12px;
}

.diarii-chart-row {
    display: grid;
    gap: 6px;
}

.diarii-chart-label {
    font-size: 9px;
    color: #8a8a86;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.diarii-bar-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 10px;
    color: #6b7280;
}

.diarii-bar-line strong {
    color: #111111;
    font-weight: 600;
}

.diarii-bar-track {
    height: 10px;
    border-radius: 999px;
    background: #f0f0ee;
    overflow: hidden;
}

.diarii-bar-track span {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.diarii-notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.diarii-note {
    border: 0.5px solid #e0e0de;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fafaf8;
    display: grid;
    gap: 3px;
}

.diarii-note span {
    font-size: 9px;
    color: #8a8a86;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.diarii-note strong {
    font-size: 12px;
    color: #111111;
}

.diarii-note small {
    font-size: 10px;
    color: #6b7280;
    line-height: 1.35;
}

.informe-selector-card {
    margin-top: 10px;
}

.informe-controls {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
}

.informe-name-field {
    display: grid;
    gap: 5px;
}

.informe-name-field span {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.informe-name-field input {
    min-height: 36px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
    padding: 0 12px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 800;
}

.informe-project-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.informe-project-pill {
    min-height: 34px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-soft);
    padding: 0 12px;
    font-size: 0.8rem;
    font-weight: 800;
}

.informe-project-pill.is-active {
    border-color: rgba(32, 163, 122, 0.5);
    background: #20a37a;
    color: #ffffff;
}

.informe-page {
    width: min(1360px, 100%);
    margin: 0 auto;
}

.informe-sheet {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #d8d8d4;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 245, 240, 0.98)), #ffffff;
    color: #171717;
    padding: 22px;
    display: grid;
    gap: 16px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.informe-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #deded8;
    padding-bottom: 16px;
}

.informe-head p {
    margin: 0 0 4px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.informe-head h2 {
    margin: 0;
    color: #111111;
    font-size: 34px;
    line-height: 1.05;
    font-weight: 900;
}

.informe-head small {
    display: block;
    margin-top: 5px;
    color: #6b6a64;
    font-size: 14px;
    font-weight: 700;
}

.informe-status {
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 900;
}

.informe-status--green {
    background: #dcfce7;
    color: #166534;
}

.informe-status--warn {
    background: #fef3c7;
    color: #92400e;
}

.informe-status--neutral {
    background: #e0f2fe;
    color: #075985;
}

.informe-money-stage {
    min-height: 0;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 28px 64px rgba(15, 23, 42, 0.12);
    padding: 18px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    overflow: hidden;
}

.informe-money-stage-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
}

.informe-money-stage-main {
    min-width: 0;
    display: grid;
}

.informe-money-stage__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
}

.informe-money-stage__head span,
.informe-chart-title span {
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.informe-money-stage__head h3 {
    margin: 4px 0 0;
    color: #101828;
    font-size: 28px;
    line-height: 1.03;
    font-weight: 950;
}

.informe-money-stage__head > strong {
    flex: 0 0 auto;
    border: 1px solid rgba(16, 24, 40, 0.1);
    border-radius: 999px;
    background: #ffffff;
    color: #101828;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 950;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.informe-cashflow-chart {
    border: 1px solid rgba(16, 24, 40, 0.12);
    border-radius: 18px;
    background: #ffffff;
    color: #101828;
    padding: 16px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
    box-shadow:
        0 18px 38px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.informe-cashflow-chart__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.informe-cashflow-chart__head div:first-child {
    display: grid;
    gap: 4px;
}

.informe-cashflow-chart__head span {
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.informe-cashflow-chart__head strong {
    color: #101828;
    font-size: 17px;
    line-height: 1.05;
    font-weight: 950;
}

.informe-cashflow-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.informe-cashflow-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #475467;
    font-size: 10px;
    font-weight: 850;
    text-transform: none;
}

.informe-cashflow-legend i {
    width: 9px;
    height: 9px;
    border-radius: 999px;
}

.informe-cashflow-legend i.is-investment {
    background: #ef4444;
}

.informe-ledger-chart {
    display: grid;
    gap: 14px;
}

.informe-ledger-month {
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 13px;
    display: grid;
    gap: 11px;
}

.informe-ledger-month__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.informe-ledger-month__head div {
    display: grid;
    gap: 3px;
}

.informe-ledger-month__head strong {
    color: #101828;
    font-size: 15px;
    line-height: 1;
    font-weight: 950;
    text-transform: capitalize;
}

.informe-ledger-month__head span,
.informe-ledger-month__head small {
    color: #667085;
    font-size: 12px;
    font-weight: 850;
}

.informe-ledger-month__head small {
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    padding: 6px 9px;
    white-space: nowrap;
}

.informe-ledger-signal {
    border: 1px solid #bbf7d0;
    border-radius: 16px;
    background:
        linear-gradient(135deg, #f7fffb 0%, #ecfdf5 48%, #ffffff 100%);
    box-shadow:
        0 12px 24px rgba(4, 120, 87, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    padding: 15px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.36fr);
    gap: 18px;
    align-items: center;
}

.informe-ledger-signal.is-watch {
    border-color: #fed7aa;
    background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 54%, #ffffff 100%);
}

.informe-ledger-sales-badge {
    min-width: 0;
    border-right: 1px solid rgba(5, 150, 105, 0.16);
    padding-right: 18px;
    display: grid;
    gap: 5px;
}

.informe-ledger-sales-badge span {
    color: #047857;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.informe-ledger-sales-badge strong {
    color: #047857;
    font-size: clamp(28px, 2.6vw, 40px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0;
    white-space: nowrap;
    overflow-wrap: normal;
    font-variant-numeric: tabular-nums;
}

.informe-ledger-sales-badge small {
    color: #166534;
    font-size: 12px;
    font-weight: 900;
}

.informe-ledger-health {
    min-width: 0;
    display: grid;
    gap: 8px;
    align-content: center;
}

.informe-ledger-health > strong {
    color: #064e3b;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.informe-ledger-health span {
    min-height: 31px;
    border: 1px solid rgba(187, 247, 208, 0.9);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    color: #047857;
    padding: 9px 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    line-height: 1;
    font-weight: 950;
    box-shadow: 0 8px 16px rgba(5, 150, 105, 0.1);
}

.informe-ledger-health span.is-watch {
    border-color: #fed7aa;
    color: #b45309;
    box-shadow: 0 8px 16px rgba(180, 83, 9, 0.08);
}

.informe-ledger-health i {
    position: relative;
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    border-radius: 999px;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.informe-ledger-health span.is-watch i {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

.informe-ledger-health i.is-check::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.informe-ledger-health i.is-arrow::before,
.informe-ledger-health i.is-arrow::after {
    content: "";
    position: absolute;
    background: #ffffff;
    border-radius: 999px;
}

.informe-ledger-health i.is-arrow::before {
    left: 4px;
    top: 8px;
    width: 10px;
    height: 2px;
    transform: rotate(-38deg);
}

.informe-ledger-health i.is-arrow::after {
    right: 4px;
    top: 4px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    background: transparent;
    border-radius: 0;
}

.informe-ledger-row {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) minmax(112px, auto);
    align-items: center;
    gap: 12px;
}

.informe-ledger-row > span {
    color: #344054;
    font-size: 12px;
    font-weight: 950;
}

.informe-ledger-row > strong {
    color: #101828;
    font-size: 15px;
    line-height: 1;
    font-weight: 950;
    text-align: right;
    white-space: nowrap;
}

.informe-ledger-track {
    position: relative;
    height: 36px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background:
        linear-gradient(90deg, transparent calc(25% - 1px), #e5e7eb calc(25% - 1px), #e5e7eb 25%, transparent 25%),
        linear-gradient(90deg, transparent calc(50% - 1px), #e5e7eb calc(50% - 1px), #e5e7eb 50%, transparent 50%),
        linear-gradient(90deg, transparent calc(75% - 1px), #e5e7eb calc(75% - 1px), #e5e7eb 75%, transparent 75%),
        #f8fafc;
    overflow: hidden;
}

.informe-ledger-track > b {
    position: absolute;
    inset: 5px auto 5px 5px;
    min-width: 0;
    border-radius: 9px;
    overflow: hidden;
    display: flex;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.13);
}

.informe-ledger-row.is-income .informe-ledger-track > b {
    background: #1e3a8a;
}

.informe-ledger-row.is-income .informe-ledger-track i {
    display: block;
    min-width: 2px;
    height: 100%;
}

.informe-ledger-row.is-investment .informe-ledger-track > b {
    background: linear-gradient(90deg, #fb7185, #ef4444);
}

.informe-ledger-row.is-investment > strong {
    color: #be123c;
}

.informe-ledger-result {
    border-top: 1px solid #eef2f7;
    padding-top: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: baseline;
}

.informe-ledger-result span {
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.informe-ledger-result strong {
    font-size: 22px;
    line-height: 1;
    font-weight: 950;
    text-align: right;
}

.informe-ledger-result strong.is-positive {
    color: #047857;
}

.informe-ledger-result strong.is-negative {
    color: #be123c;
}

.informe-ledger-result small {
    grid-column: 1 / -1;
    color: #667085;
    font-size: 11px;
    font-weight: 800;
}

.informe-cashflow-plot {
    min-height: 350px;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
}

.informe-cashflow-axis {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    align-items: start;
    padding-top: 14px;
    padding-bottom: 64px;
}

.informe-cashflow-axis span {
    color: #667085;
    font-size: 13px;
    line-height: 1;
    font-weight: 850;
    text-align: right;
}

.informe-cashflow-months {
    min-width: 0;
    min-height: 350px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(88px, 1fr);
    align-items: stretch;
    gap: 16px;
    padding: 14px 10px 0;
    overflow-x: auto;
    background:
        linear-gradient(#d0d5dd 2px, transparent 2px) 0 14px / 100% 54px repeat-y;
    border-bottom: 3px solid #cbd5e1;
}

.informe-cashflow-month {
    min-width: 0;
    display: grid;
    grid-template-rows: 30px minmax(0, 1fr) 3px 78px 46px;
    justify-items: center;
    align-items: end;
    gap: 5px;
}

.informe-cashflow-month > strong {
    color: #101828;
    font-size: 15px;
    line-height: 1;
    font-weight: 950;
    white-space: nowrap;
}

.informe-cashflow-positive,
.informe-cashflow-negative {
    width: min(70px, 72%);
    border-radius: 10px 10px 4px 4px;
    overflow: hidden;
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.12);
}

.informe-cashflow-positive {
    height: var(--income-height);
    min-height: 0;
    display: flex;
    flex-direction: column-reverse;
}

.informe-cashflow-positive i {
    display: block;
    width: 100%;
}

.informe-cashflow-month > b {
    width: 100%;
    height: 3px;
    background: #94a3b8;
}

.informe-cashflow-negative {
    align-self: start;
    height: var(--investment-height);
    min-height: 0;
    background: linear-gradient(180deg, #fb7185, #ef4444);
    border-radius: 4px 4px 10px 10px;
}

.informe-cashflow-month > span {
    color: #4b5563;
    display: grid;
    gap: 3px;
    text-align: center;
}

.informe-cashflow-month > span em {
    color: #344054;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    text-transform: capitalize;
}

.informe-cashflow-month > span small {
    color: #667085;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 850;
}

.informe-income-breakdown {
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
    display: grid;
}

.informe-income-breakdown__head {
    background: #f8fafc;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.informe-income-breakdown__head span {
    color: #667085;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.informe-income-breakdown__head strong {
    color: #101828;
    font-size: 13px;
    font-weight: 950;
    white-space: nowrap;
}

.informe-income-breakdown__row {
    padding: 11px 12px;
    border-top: 1px solid #eef2f7;
    display: grid;
    grid-template-columns: minmax(130px, 1.25fr) minmax(92px, 1fr) minmax(92px, auto) minmax(88px, auto);
    align-items: center;
    gap: 10px;
}

.informe-income-breakdown__row > span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #344054;
    font-size: 12px;
    line-height: 1.15;
    font-weight: 900;
}

.informe-income-breakdown__row > span i {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 999px;
}

.informe-income-breakdown__row > div {
    height: 9px;
    border-radius: 999px;
    background: #eef2f7;
    overflow: hidden;
}

.informe-income-breakdown__row > div b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1e3a8a, #3b82f6);
}

.informe-income-breakdown__row strong {
    color: #101828;
    font-size: 12px;
    font-weight: 950;
    text-align: right;
    white-space: nowrap;
}

.informe-income-breakdown__row small {
    color: #667085;
    font-size: 11px;
    font-weight: 850;
    text-align: right;
    white-space: nowrap;
}

.informe-cashflow-table {
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
    display: grid;
}

.informe-cashflow-table__head,
.informe-cashflow-table__row {
    display: grid;
    grid-template-columns: minmax(72px, 0.9fr) minmax(84px, 1fr) minmax(58px, 0.7fr) minmax(84px, 1fr) minmax(84px, 1fr);
    gap: 10px;
    align-items: center;
}

.informe-cashflow-table__head {
    background: #f8fafc;
    padding: 9px 12px;
}

.informe-cashflow-table__head span {
    color: #667085;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.informe-cashflow-table__row {
    padding: 10px 12px 12px;
    border-top: 1px solid #eef2f7;
}

.informe-cashflow-table__row strong {
    color: #101828;
    font-size: 12px;
    line-height: 1;
    font-weight: 950;
    text-transform: capitalize;
}

.informe-cashflow-table__row span {
    color: #344054;
    font-size: 12px;
    font-weight: 850;
    text-align: right;
}

.informe-cashflow-table__row .is-positive {
    color: #047857;
}

.informe-cashflow-table__row .is-negative {
    color: #be123c;
}

.informe-cashflow-spark {
    position: relative;
    grid-column: 1 / -1;
    height: 7px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
}

.informe-cashflow-spark i {
    position: absolute;
    left: 0;
    height: 3px;
    border-radius: 999px;
}

.informe-cashflow-spark .is-income {
    top: 0;
    background: linear-gradient(90deg, #1e3a8a, #14b8a6);
}

.informe-cashflow-spark .is-investment {
    bottom: 0;
    background: linear-gradient(90deg, #fb7185, #ef4444);
}

.informe-cashflow-foot {
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: linear-gradient(90deg, #eff6ff, #ecfdf5);
    padding: 12px 14px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.informe-cashflow-foot span,
.informe-cashflow-foot small {
    color: #667085;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.informe-cashflow-foot strong {
    color: #1d4ed8;
    font-size: 28px;
    line-height: 1;
    font-weight: 950;
}

.informe-money-compare-chart {
    border: 1px solid rgba(16, 24, 40, 0.12);
    border-radius: 22px;
    background: #ffffff;
    color: #101828;
    padding: 18px 18px 14px;
    display: grid;
    gap: 12px;
    box-shadow:
        0 24px 48px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.informe-money-compare-plot {
    min-height: 315px;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
}

.informe-money-compare-axis {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    align-items: start;
    padding-top: 16px;
    padding-bottom: 42px;
}

.informe-money-compare-axis span {
    color: #667085;
    font-size: 14px;
    line-height: 1;
    font-weight: 850;
    text-align: right;
}

.informe-money-compare-bars {
    position: relative;
    min-width: 0;
    min-height: 315px;
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    align-items: end;
    gap: 10%;
    padding: 16px 8% 0;
    background:
        linear-gradient(#d0d5dd 2px, transparent 2px) 0 16px / 100% 58px repeat-y;
    border-bottom: 3px solid #cbd5e1;
}

.informe-money-compare-bar {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 38px;
    align-items: end;
    justify-items: center;
    gap: 8px;
    padding: 0;
    transition: transform 180ms ease, opacity 180ms ease;
}

.informe-money-compare-bar:hover,
.informe-money-compare-bar:focus-visible,
.informe-money-compare-bar.is-active {
    transform: translateY(-4px);
}

.informe-money-compare-bar:not(.is-active) {
    opacity: 0.82;
}

.informe-money-compare-bar:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.28);
    outline-offset: 6px;
    border-radius: 16px;
}

.informe-money-compare-bar > div strong {
    color: #111827;
    font-size: clamp(18px, 2vw, 30px);
    line-height: 1;
    font-weight: 950;
    white-space: nowrap;
}

.informe-money-compare-bar > div {
    width: min(118px, 58%);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.informe-money-compare-bar i {
    display: block;
    width: 100%;
    height: var(--bar-height);
    min-height: 0;
    border-radius: 12px 12px 4px 4px;
    box-shadow: 0 18px 28px rgba(15, 23, 42, 0.16);
    animation: informeMoneyBarRise 840ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
}

.informe-money-compare-bar.is-active i {
    box-shadow:
        0 20px 34px rgba(15, 23, 42, 0.18),
        0 0 0 4px rgba(37, 99, 235, 0.1);
}

.informe-money-compare-bar.is-investment i {
    background: linear-gradient(180deg, #60a5fa, #1d4ed8);
}

.informe-money-compare-bar.is-income i {
    background: linear-gradient(180deg, #34d399, #047857);
}

.informe-money-compare-bar > span {
    align-self: start;
    color: #4b5563;
    font-size: clamp(15px, 1.6vw, 24px);
    line-height: 1.1;
    font-weight: 950;
    text-align: center;
}

.informe-money-compare-foot {
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: linear-gradient(90deg, #eff6ff, #ecfdf5);
    padding: 12px 14px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.informe-money-compare-foot span,
.informe-money-compare-foot small {
    color: #667085;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.informe-money-compare-foot strong {
    color: #1d4ed8;
    font-size: 28px;
    line-height: 1;
    font-weight: 950;
}

.informe-money-side-cards {
    min-width: 0;
    display: grid;
    grid-template-rows: none;
    gap: 10px;
}

.informe-money-side-cards article {
    min-width: 0;
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow:
        0 18px 34px rgba(15, 23, 42, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    padding: 14px;
    display: grid;
    align-content: start;
    gap: 7px;
    min-height: 108px;
}

.informe-money-side-cards small {
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.informe-money-side-cards strong {
    color: #101828;
    font-size: clamp(23px, 2.2vw, 33px);
    line-height: 1;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.informe-money-side-cards span {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.informe-money-side-cards .is-sales {
    border-color: rgba(245, 158, 11, 0.34);
    background: linear-gradient(145deg, #ffffff, #fffbeb);
    box-shadow: 0 18px 34px rgba(245, 158, 11, 0.12);
}

.informe-money-side-cards .is-roas {
    border-color: rgba(37, 99, 235, 0.3);
    background: linear-gradient(145deg, #ffffff, #eff6ff);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.12);
}

.informe-money-side-cards .is-profit {
    border-color: rgba(5, 150, 105, 0.32);
    background: linear-gradient(145deg, #ffffff, #ecfdf5);
    box-shadow: 0 18px 34px rgba(5, 150, 105, 0.12);
}

.informe-money-side-cards .is-loss {
    border-color: rgba(225, 29, 72, 0.32);
    background: linear-gradient(145deg, #ffffff, #fff1f2);
    box-shadow: 0 18px 34px rgba(225, 29, 72, 0.12);
}

@keyframes informeMoneyBarRise {
    from {
        transform: scaleY(0.1);
        transform-origin: bottom center;
        opacity: 0.45;
    }
    to {
        transform: scaleY(1);
        transform-origin: bottom center;
        opacity: 1;
    }
}

.informe-money-chart {
    min-width: 0;
    min-height: 0;
}

.informe-primary-dashboard {
    min-height: 402px;
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(250px, 0.58fr);
    grid-template-areas:
        "cards side"
        "graph side";
    gap: 12px;
    color: #101828;
}

.informe-primary-cards {
    grid-area: cards;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.informe-primary-card,
.informe-primary-graph,
.informe-primary-side {
    min-width: 0;
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        0 16px 32px rgba(15, 23, 42, 0.07);
    overflow: hidden;
}

.informe-primary-card {
    min-height: 168px;
    padding: 18px;
    display: grid;
    align-content: space-between;
    gap: 12px;
}

.informe-primary-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.informe-primary-card__top span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #eef4ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 950;
}

.informe-primary-card__top small,
.informe-primary-card em {
    color: #667085;
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}

.informe-primary-card strong {
    color: #101828;
    font-size: 46px;
    line-height: 0.95;
    font-weight: 950;
    white-space: nowrap;
}

.informe-primary-card.is-sales-count strong {
    font-size: 68px;
}

.informe-primary-meter,
.informe-primary-graph-row div {
    height: 10px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.informe-primary-meter i,
.informe-primary-graph-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    animation: informePrimarySweep 780ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
}

.informe-primary-card.is-investment .informe-primary-meter i,
.informe-primary-graph-row.is-investment i {
    width: var(--investment-width);
    background: linear-gradient(90deg, #60a5fa, #2563eb);
}

.informe-primary-card.is-sales-count .informe-primary-meter i,
.informe-primary-graph-row.is-sales-count i {
    width: var(--sales-count-width);
    background: linear-gradient(90deg, #facc15, #f59e0b);
}

.informe-primary-card.is-income .informe-primary-meter i,
.informe-primary-graph-row.is-income i {
    width: var(--income-width);
    background: linear-gradient(90deg, #34d399, #059669);
}

.informe-primary-graph {
    grid-area: graph;
    padding: 18px;
    display: grid;
    gap: 16px;
}

.informe-primary-graph .informe-chart-title strong,
.informe-primary-side .informe-chart-title strong {
    color: #101828;
}

.informe-primary-graph__body {
    display: grid;
    gap: 16px;
}

.informe-primary-graph-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) minmax(128px, auto);
    align-items: center;
    gap: 12px;
}

.informe-primary-graph-row span {
    color: #667085;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.informe-primary-graph-row strong {
    color: #101828;
    font-size: 18px;
    font-weight: 950;
    text-align: right;
    white-space: nowrap;
}

.informe-primary-graph__footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.informe-primary-graph__footer span,
.informe-primary-side > span {
    min-width: 0;
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: 14px;
    background: #f8fafc;
    padding: 12px;
    display: grid;
    gap: 4px;
}

.informe-primary-graph__footer small,
.informe-primary-side small {
    color: #667085;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.informe-primary-graph__footer strong,
.informe-primary-side strong {
    color: #101828;
    font-size: 20px;
    line-height: 1;
    font-weight: 950;
    white-space: nowrap;
}

.informe-primary-side {
    grid-area: side;
    padding: 18px;
    display: grid;
    align-content: start;
    gap: 12px;
}

.informe-primary-side > span:first-of-type strong {
    color: #34d399;
}

.informe-primary-dashboard.is-negative .informe-primary-side > span:first-of-type strong {
    color: #fb7185;
}

@keyframes informePrimarySweep {
    from {
        transform: translateX(-18px) scaleX(0.62);
        transform-origin: left center;
        opacity: 0.48;
    }
    to {
        transform: translateX(0) scaleX(1);
        transform-origin: left center;
        opacity: 1;
    }
}

.informe-finance-board {
    min-height: 400px;
    display: grid;
    grid-template-columns: minmax(220px, 0.78fr) minmax(320px, 1.45fr) minmax(250px, 0.95fr);
    gap: 12px;
}

.informe-finance-card {
    min-width: 0;
    border: 1px solid rgba(16, 24, 40, 0.09);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 18px 36px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
    padding: 16px;
    display: grid;
    gap: 14px;
    overflow: hidden;
}

.informe-finance-card--score {
    color: #ffffff;
    background: linear-gradient(160deg, #101828 0%, #1d2939 100%);
    align-content: space-between;
}

.informe-chart-title {
    min-width: 0;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.informe-chart-title strong {
    min-width: 0;
    color: #101828;
    font-size: 17px;
    line-height: 1.1;
    font-weight: 950;
    text-align: right;
}

.informe-finance-card--score .informe-chart-title span {
    color: rgba(255, 255, 255, 0.62);
}

.informe-finance-card--score .informe-chart-title strong {
    color: #ffffff;
}

.informe-roas-gauge {
    width: min(210px, 92%);
    aspect-ratio: 1;
    border-radius: 50%;
    margin: 2px auto;
    background:
        conic-gradient(#12b981 var(--roas-deg), rgba(255, 255, 255, 0.13) 0);
    display: grid;
    place-items: center;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        0 24px 44px rgba(0, 0, 0, 0.22);
}

.informe-finance-board.is-negative .informe-roas-gauge {
    background:
        conic-gradient(#f97316 var(--roas-deg), rgba(255, 255, 255, 0.13) 0);
}

.informe-roas-gauge__inner {
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #101828;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.informe-roas-gauge__inner span,
.informe-result-number span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.informe-roas-gauge__inner strong {
    color: #ffffff;
    font-size: 42px;
    line-height: 0.98;
    font-weight: 950;
}

.informe-roas-gauge__inner small,
.informe-result-number small {
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    font-weight: 800;
}

.informe-result-number {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
    padding: 14px;
    display: grid;
    gap: 5px;
}

.informe-result-number strong {
    color: #ffffff;
    font-size: 34px;
    line-height: 1;
    font-weight: 950;
    white-space: nowrap;
}

.informe-waterfall-svg {
    width: 100%;
    min-height: 220px;
    display: block;
}

.informe-waterfall-axis {
    stroke: #d0d5dd;
    stroke-width: 3;
    stroke-dasharray: 8 9;
}

.informe-waterfall-connector {
    fill: none;
    stroke: rgba(102, 112, 133, 0.42);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 7 8;
}

.informe-waterfall-bar {
    filter: drop-shadow(0 12px 18px rgba(15, 23, 42, 0.14));
    transform-box: fill-box;
    transform-origin: bottom center;
    animation: informeChartRise 820ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
}

.informe-waterfall-bar.is-spend {
    fill: #2563eb;
}

.informe-waterfall-bar.is-sales {
    fill: #059669;
}

.informe-waterfall-bar.is-profit {
    fill: #12b981;
}

.informe-waterfall-bar.is-loss {
    fill: #e11d48;
}

.informe-waterfall-svg text {
    fill: #667085;
    font-size: 20px;
    font-weight: 900;
}

.informe-waterfall-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.informe-waterfall-values span,
.informe-finance-note {
    min-width: 0;
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: 12px;
    background: #f8fafc;
    padding: 10px;
    display: grid;
    gap: 3px;
}

.informe-waterfall-values small,
.informe-comparison-row span,
.informe-finance-note span {
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.informe-waterfall-values strong {
    min-width: 0;
    color: #101828;
    font-size: 18px;
    line-height: 1;
    font-weight: 950;
    white-space: nowrap;
}

.informe-comparison-bars {
    display: grid;
    gap: 14px;
}

.informe-comparison-row {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.informe-comparison-row div {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.informe-comparison-row strong {
    color: #101828;
    font-size: 16px;
    font-weight: 950;
    white-space: nowrap;
}

.informe-comparison-row em {
    height: 11px;
    border-radius: 999px;
    background: #eaecf0;
    overflow: hidden;
}

.informe-comparison-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    animation: informeBarSlide 780ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
}

.informe-comparison-row.is-sales i {
    width: var(--sales-width);
    background: linear-gradient(90deg, #34d399, #059669);
}

.informe-comparison-row.is-caja i {
    width: var(--caja-width);
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.informe-comparison-row.is-spend i {
    width: var(--spend-width);
    background: linear-gradient(90deg, #60a5fa, #2563eb);
}

.informe-comparison-row.is-profit i {
    width: var(--profit-width);
    background: linear-gradient(90deg, #6ee7b7, #10b981);
}

.informe-comparison-row.is-loss i {
    width: var(--profit-width);
    background: linear-gradient(90deg, #fb7185, #e11d48);
}

.informe-finance-note {
    margin-top: auto;
}

.informe-finance-note strong {
    color: #101828;
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
}

@keyframes informeChartRise {
    from {
        transform: scaleY(0.14);
        opacity: 0.42;
    }
    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes informeBarSlide {
    from {
        transform: translateX(-16px) scaleX(0.68);
        transform-origin: left center;
        opacity: 0.54;
    }
    to {
        transform: translateX(0) scaleX(1);
        transform-origin: left center;
        opacity: 1;
    }
}

.informe-hero-grid {
    display: grid;
    grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.informe-hero-card,
.informe-project-card,
.informe-section,
.informe-sold-chip {
    border: 1px solid rgba(207, 207, 201, 0.62);
    border-radius: 12px;
    background: linear-gradient(180deg, #f8f7f2 0%, #efede6 100%);
}

.informe-hero-card {
    min-height: 132px;
    padding: 16px;
    display: grid;
    align-content: start;
    gap: 6px;
}

.informe-hero-card--main {
    background: linear-gradient(145deg, #eff6ff 0%, #f4f8f5 100%);
    border-color: rgba(37, 99, 235, 0.18);
}

.informe-hero-card span,
.informe-section-head span,
.informe-project-metrics small {
    color: #4b4a45;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.informe-hero-card strong {
    color: #111111;
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
}

.informe-hero-card--main strong {
    color: #2563eb;
    font-size: 46px;
}

.informe-hero-card small {
    color: #3f3f3a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.informe-section {
    padding: 14px;
    display: grid;
    gap: 12px;
}

.informe-section-head,
.informe-project-card__head,
.informe-flow-route,
.informe-flow-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.informe-section-head strong {
    color: #111111;
    font-size: 16px;
    font-weight: 900;
}

.informe-project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.informe-project-card {
    padding: 12px;
    display: grid;
    gap: 11px;
}

.informe-project-card__head strong {
    min-width: 0;
    color: #171717;
    font-size: 17px;
    line-height: 1.1;
}

.informe-project-card__head span {
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.07);
    color: #44433e;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 800;
}

.informe-project-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.informe-project-metrics span {
    min-width: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.72);
    padding: 8px;
    display: grid;
    gap: 3px;
}

.informe-project-metrics strong {
    color: #111111;
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
}

.informe-grid-two {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 10px;
}

.informe-flow-list,
.informe-sold-grid {
    display: grid;
    gap: 8px;
}

.informe-flow-row {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    padding: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(120px, 1fr) minmax(100px, 0.5fr);
    align-items: center;
    gap: 10px;
}

.informe-flow-route strong {
    min-width: 0;
    color: #171717;
    font-size: 13px;
    line-height: 1.1;
}

.informe-flow-route span {
    color: #2563eb;
    font-size: 18px;
    font-weight: 900;
}

.informe-flow-bar {
    height: 9px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.informe-flow-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #20a37a);
    animation: informeFlow 900ms ease-out both;
}

.informe-flow-value {
    justify-content: end;
    text-align: right;
}

.informe-flow-value strong {
    color: #111111;
    font-size: 14px;
    font-weight: 900;
}

.informe-flow-value small {
    color: #6b6a64;
    font-size: 11px;
    font-weight: 800;
}

.informe-sold-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.informe-sold-chip {
    padding: 11px;
    display: grid;
    gap: 4px;
}

.informe-sold-chip span {
    color: #44433e;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
}

.informe-sold-chip strong {
    color: #20a37a;
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
}

.informe-sold-chip small {
    color: #6b6a64;
    font-size: 11px;
    font-weight: 800;
}

.informe-sales-table {
    overflow-x: auto;
}

.informe-sales-table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.informe-sales-table th,
.informe-sales-table td {
    border-bottom: 1px solid rgba(207, 207, 201, 0.7);
    padding: 9px 8px;
    color: #22221f;
    font-size: 12px;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.informe-sales-table th {
    color: #4b4a45;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.informe-sales-table a {
    color: #2563eb;
    font-weight: 850;
    text-decoration: none;
}

.informe-warnings {
    display: grid;
    gap: 6px;
}

.informe-warnings span {
    border-radius: 8px;
    background: #fff7ed;
    color: #92400e;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 750;
}

@keyframes informeFlow {
    from {
        transform: scaleX(0.18);
        transform-origin: left center;
        opacity: 0.65;
    }
    to {
        transform: scaleX(1);
        transform-origin: left center;
        opacity: 1;
    }
}

body.capture-canvas-mode #tab-informe.active .informe-page {
    width: 100%;
}

body.capture-canvas-mode #tab-informe.active .informe-sheet {
    border-radius: 18px;
    padding: 24px;
}

body.capture-canvas-mode #tab-informe.active .informe-flow-bar span {
    animation: none;
}

body.capture-canvas-mode #tab-informe.active .informe-money-stage {
    min-height: 0;
}

body.capture-canvas-mode #tab-informe.active .informe-waterfall-bar,
body.capture-canvas-mode #tab-informe.active .informe-comparison-row i,
body.capture-canvas-mode #tab-informe.active .informe-money-compare-bar i,
body.capture-canvas-mode #tab-informe.active .informe-primary-meter i,
body.capture-canvas-mode #tab-informe.active .informe-primary-graph-row i {
    animation: none;
}

body.capture-canvas-mode #tab-informe.active .informe-money-stage__head h3 {
    font-size: 44px;
}

body.capture-canvas-mode #tab-informe.active .informe-roas-gauge__inner strong {
    font-size: 46px;
}

body.capture-canvas-mode #tab-informe.active .informe-result-number strong {
    font-size: 38px;
}

body.capture-canvas-mode #tab-informe.active .informe-primary-card strong {
    font-size: 48px;
}

body.capture-canvas-mode #tab-informe.active .informe-primary-card.is-sales-count strong {
    font-size: 70px;
}

body.capture-canvas-mode #tab-informe.active .informe-head h2 {
    font-size: 42px;
}

body.capture-canvas-mode #tab-informe.active .informe-hero-card strong {
    font-size: 42px;
}

body.capture-canvas-mode #tab-informe.active .informe-hero-card--main strong {
    font-size: 56px;
}

body.capture-canvas-mode #tab-informe.active .informe-sales-table th,
body.capture-canvas-mode #tab-informe.active .informe-sales-table td {
    font-size: 14px;
}

@media (max-width: 980px) {
    .informe-controls,
    .informe-hero-grid,
    .informe-grid-two {
        grid-template-columns: 1fr;
    }

    .informe-money-stage {
        min-height: 0;
    }

    .informe-money-stage-grid {
        grid-template-columns: 1fr;
    }

    .informe-money-side-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    .informe-primary-dashboard,
    .informe-finance-board {
        grid-template-columns: 1fr;
    }

    .informe-primary-dashboard {
        grid-template-areas:
            "cards"
            "graph"
            "side";
    }

    .informe-project-grid,
    .informe-sold-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .informe-flow-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .informe-sheet {
        padding: 16px;
    }

    .informe-head {
        display: grid;
    }

    .informe-money-stage__head {
        display: grid;
    }

    .informe-money-stage__head h3 {
        font-size: 30px;
    }

    .informe-money-stage {
        border-radius: 18px;
        padding: 16px;
    }

    .informe-money-side-cards {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .informe-cashflow-chart {
        border-radius: 18px;
        padding: 14px;
    }

    .informe-cashflow-chart__head {
        display: grid;
    }

    .informe-cashflow-legend {
        justify-content: flex-start;
    }

    .informe-ledger-month__head {
        display: grid;
    }

    .informe-ledger-month__head small {
        justify-self: start;
        white-space: normal;
    }

    .informe-ledger-signal {
        grid-template-columns: 1fr;
    }

    .informe-ledger-sales-badge {
        border-right: 0;
        border-bottom: 1px solid rgba(5, 150, 105, 0.18);
        padding-right: 0;
        padding-bottom: 12px;
    }

    .informe-ledger-sales-badge strong {
        font-size: 38px;
        white-space: normal;
    }

    .informe-ledger-health {
        align-items: stretch;
    }

    .informe-ledger-health span {
        width: 100%;
    }

    .informe-ledger-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .informe-ledger-row > strong {
        text-align: left;
    }

    .informe-ledger-track {
        height: 38px;
    }

    .informe-ledger-result {
        grid-template-columns: 1fr;
    }

    .informe-ledger-result strong {
        text-align: left;
    }

    .informe-income-breakdown__head {
        display: grid;
        justify-content: stretch;
    }

    .informe-income-breakdown__row {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .informe-income-breakdown__row strong,
    .informe-income-breakdown__row small {
        text-align: left;
    }

    .informe-cashflow-plot {
        min-height: 300px;
        grid-template-columns: 1fr;
    }

    .informe-cashflow-axis {
        display: none;
    }

    .informe-cashflow-months {
        min-height: 300px;
        grid-auto-columns: minmax(104px, 1fr);
        gap: 12px;
        padding-inline: 4px;
    }

    .informe-cashflow-month {
        grid-template-rows: 28px minmax(0, 1fr) 3px 68px 52px;
    }

    .informe-cashflow-table__head {
        display: none;
    }

    .informe-cashflow-table__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
    }

    .informe-cashflow-table__row span {
        text-align: left;
    }

    .informe-cashflow-foot {
        justify-content: flex-start;
    }

    .informe-money-compare-plot {
        grid-template-columns: 1fr;
    }

    .informe-money-compare-axis {
        display: none;
    }

    .informe-money-compare-bars {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-inline: 18px;
    }

    .informe-money-compare-bar > div strong,
    .informe-money-compare-bar > span {
        white-space: normal;
    }

    .informe-primary-cards,
    .informe-primary-graph__footer {
        grid-template-columns: 1fr;
    }

    .informe-primary-graph-row {
        grid-template-columns: 1fr;
    }

    .informe-primary-graph-row strong {
        text-align: left;
    }

    .informe-finance-board {
        gap: 10px;
    }

    .informe-primary-card,
    .informe-primary-graph,
    .informe-primary-side,
    .informe-finance-card {
        border-radius: 16px;
        padding: 14px;
    }

    .informe-chart-title,
    .informe-primary-card__top,
    .informe-comparison-row div {
        display: grid;
    }

    .informe-chart-title strong {
        text-align: left;
    }

    .informe-roas-gauge {
        width: min(190px, 84%);
    }

    .informe-result-number strong {
        font-size: 30px;
        white-space: normal;
    }

    .informe-primary-card strong,
    .informe-primary-card.is-sales-count strong,
    .informe-primary-side strong {
        font-size: 34px;
        white-space: normal;
    }

    .informe-waterfall-values {
        grid-template-columns: 1fr;
    }

    .informe-project-grid,
    .informe-sold-grid,
    .informe-project-metrics {
        grid-template-columns: 1fr;
    }

    .informe-hero-card--main strong,
    .informe-hero-card strong {
        font-size: 34px;
    }
}

@media (max-width: 1100px) {
    .project-goal-inputs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .project-goals-grid {
        grid-template-columns: 1fr;
    }

    .project-goal-inputs {
        grid-template-columns: 1fr;
    }

    .project-goal-label--full {
        grid-column: auto;
    }

    .project-goal-total {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .project-goal-total strong {
        justify-self: start;
    }
}

.field {
    display: grid;
    gap: 4px;
}

.field span {
    font-size: 0.74rem;
    color: var(--text-soft);
}

.field select,
.field input {
    width: 100%;
    min-height: 36px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--field-bg);
    color: var(--field-text);
    padding: 0 10px;
    font-size: 0.95rem;
}

.field select:disabled,
.field input:disabled,
.ghost-btn:disabled,
.primary-btn:disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

.field-button {
    align-self: end;
}

.hidden-field {
    display: none;
}

.range-summary {
    display: block;
    margin: 0;
    color: var(--text-muted);
    font-weight: 700;
}

.status-banner {
    padding: 6px 10px;
    font-weight: 600;
    border-radius: 999px;
    width: fit-content;
    max-width: min(100%, 680px);
}

.status-banner.hidden {
    display: none;
}

.status-banner.info {
    background: var(--status-info-bg);
}

.status-banner.success {
    background: var(--status-success-bg);
}

.status-banner.error {
    background: var(--status-error-bg);
}

main,
.tab-content,
.panel-grid,
.kpi-grid,
.card-list,
.funnel-grid,
.summary-grid,
.entity-grid,
.phase-columns {
    display: grid;
    gap: 16px;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: grid;
}

.panel-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.report-header-card {
    display: grid;
    gap: 12px;
}

.report-header-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.report-main-title {
    margin: 0;
    font-size: 1.28rem;
    line-height: 1.2;
}

.report-main-subtitle {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.98rem;
    font-weight: 600;
}

.report-header-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 14px;
    align-items: stretch;
}

.report-kpi-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.report-roi-column {
    min-width: 0;
}

.report-kpi-tile {
    border-radius: 14px;
    border: 1px solid var(--line-soft);
    padding: 8px 12px 10px;
    min-width: 0;
}

.report-kpi-label {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--accent-strong);
}

.report-kpi-value {
    margin-top: 6px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 8px 10px;
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
    text-align: center;
    color: #f8fafc;
}

.report-kpi-tile.tone-dark .report-kpi-value {
    background: linear-gradient(140deg, var(--accent-neutral-strong), var(--accent-neutral-soft));
}

.report-kpi-tile.tone-amber .report-kpi-value {
    background: linear-gradient(140deg, var(--accent-warm), var(--accent-warm-soft));
}

.report-kpi-tile.tone-blue .report-kpi-value {
    background: linear-gradient(140deg, var(--accent-strong), var(--accent-soft));
}

.report-kpi-roi {
    border-radius: 14px;
    border: 1px solid var(--roi-card-border);
    padding: 10px 12px;
    background: var(--roi-card-bg);
    min-height: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 8px;
    color: var(--roi-card-text);
}

.report-kpi-roi-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.report-kpi-roi-legend {
    display: flex;
    gap: 12px;
    font-size: 0.74rem;
    color: var(--text-soft);
}

.report-kpi-roi-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.report-kpi-roi-legend i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--accent-strong);
}

.report-kpi-roi-legend span:nth-child(2) i {
    background: var(--accent-warm);
}

.report-kpi-roi-body {
    display: grid;
    grid-template-columns: 24px 1fr 24px;
    gap: 8px;
    align-items: end;
}

.report-kpi-roi-scales {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 122px;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.report-kpi-roi-scales.right {
    text-align: right;
}

.report-kpi-roi-bars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.roi-bar-col {
    display: grid;
    gap: 4px;
    text-align: center;
}

.roi-bar-wrap {
    height: 122px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.08);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 6px;
}

.roi-bar {
    width: 52px;
    max-width: 100%;
    border-radius: 8px 8px 2px 2px;
    background: linear-gradient(180deg, var(--accent-soft), var(--accent-strong));
}

.roi-bar.roi-bar-real {
    background: linear-gradient(180deg, var(--accent-warm-soft), var(--accent-warm));
}

.roi-bar-col strong {
    font-size: 0.92rem;
}

.roi-bar-col small {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

#tab-reporte .report-row-tacometro {
    grid-template-columns: 1fr;
    order: 3;
}

#tab-reporte .report-row-tacometro .panel-card--report-tacometro {
    order: 1;
}

#tab-reporte .report-row-tacometro .panel-card--report-funnel {
    order: 2;
}

#tab-reporte .panel-card--report-campaigns {
    order: 6;
}

#tab-reporte .panel-card--report-sales-links {
    order: 7;
}

#tab-reporte .panel-card--report-creatives {
    order: 8;
}

#tab-reporte .panel-card--report-platform-full {
    order: 4;
}

#tab-reporte .panel-card--report-client-funnels {
    order: 5;
}

#tab-reporte .report-row-investment {
    order: 1;
}

#tab-reporte .report-row-goals {
    order: 2;
}

#tab-reporte .report-row-management {
    order: 9;
}

[data-theme="dark"] .report-kpi-roi {
    border-color: var(--line-soft);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.84), rgba(30, 41, 59, 0.8));
    color: #f8fafc;
}

[data-theme="dark"] .report-kpi-roi-scales {
    color: #94a3b8;
}

.panel-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel-card {
    padding: 14px;
    min-width: 0;
}

.panel-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.kpi-card,
.metric-card,
.entity-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-soft);
    background: var(--card-muted-bg);
}

.kpi-card {
    padding: 12px;
}

.kpi-label {
    color: var(--text-muted);
    font-size: 0.84rem;
}

.kpi-value {
    display: block;
    margin-top: 8px;
    font-size: 1.3rem;
    font-weight: 800;
}

.kpi-sub {
    display: block;
    margin-top: 8px;
    color: var(--text-soft);
    font-size: 0.84rem;
}

.card-list {
    grid-template-columns: 1fr;
}

.metric-card {
    padding: 14px;
}

.platform-summary-card {
    display: grid;
    gap: 8px;
}

#report-platform-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#report-platform-summary .platform-summary-card--full {
    grid-column: 1 / -1;
}

.platform-summary-card h4 {
    margin: 0;
}

.platform-insight-list {
    display: grid;
    gap: 8px;
}

.platform-insight-item {
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 8px 10px;
    background: var(--glass-light);
    display: grid;
    gap: 4px;
}

.platform-insight-item strong {
    font-size: 0.84rem;
}

.platform-insight-item span {
    color: var(--text-soft);
    font-size: 0.84rem;
}

.metric-card p {
    margin: 8px 0 0;
    color: var(--text-soft);
}

.metric-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line-soft);
}

.metric-row:last-child {
    border-bottom: none;
}

.metric-row span {
    color: var(--text-muted);
}

.metric-row strong {
    text-align: right;
}

.funnel-grid {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.funnel-step {
    border-radius: var(--radius-md);
    border: 1px solid var(--line-soft);
    background: var(--funnel-bg);
    padding: 12px;
}

.funnel-step strong {
    display: block;
    margin: 6px 0;
    font-size: 1.3rem;
}

.funnel-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--funnel-bar-bg);
    overflow: hidden;
}

.funnel-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(130deg, var(--accent-soft), var(--accent-strong));
}

.summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.platform-card {
    display: grid;
    gap: 8px;
    border-width: 1px;
}

.platform-card h4 {
    margin: 0;
    letter-spacing: 0.03em;
    font-size: 0.9rem;
}

.platform-card-main {
    font-size: 2.2rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.platform-card .metric-row {
    padding: 6px 0;
}

.platform-card--wsp {
    border-color: color-mix(in srgb, var(--accent-strong) 35%, transparent);
    background: linear-gradient(165deg, color-mix(in srgb, var(--accent-soft) 16%, transparent), color-mix(in srgb, var(--accent-strong) 8%, transparent));
}

.platform-card--wsp .platform-card-main {
    color: var(--accent-strong);
}

.platform-card--form {
    border-color: color-mix(in srgb, var(--accent-warm) 38%, transparent);
    background: linear-gradient(165deg, color-mix(in srgb, var(--accent-warm) 20%, transparent), color-mix(in srgb, var(--accent-warm-soft) 10%, transparent));
}

.platform-card--form .platform-card-main {
    color: var(--accent-warm);
}

.platform-card--total {
    border-color: rgba(148, 163, 184, 0.35);
    background: linear-gradient(165deg, rgba(148, 163, 184, 0.14), rgba(100, 116, 139, 0.08));
}

.platform-card--total .platform-card-main {
    color: #0f172a;
}

.platform-card--winner {
    grid-column: span 2;
    border-color: rgba(16, 185, 129, 0.34);
    background: linear-gradient(165deg, rgba(16, 185, 129, 0.16), rgba(5, 150, 105, 0.08));
}

.platform-card--winner-form {
    border-color: rgba(245, 158, 11, 0.4);
    background: linear-gradient(165deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.1));
}

.platform-card--winner-neutral {
    border-color: rgba(148, 163, 184, 0.34);
    background: linear-gradient(165deg, rgba(148, 163, 184, 0.16), rgba(100, 116, 139, 0.08));
}

.platform-winner-name {
    font-size: 1.34rem;
    font-weight: 800;
    color: var(--text);
}

.platform-card p {
    margin: 0;
    color: var(--text-soft);
}

.platform-compare-row {
    display: grid;
    grid-template-columns: 1fr minmax(120px, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.84rem;
}

.platform-compare-row span {
    color: var(--text-muted);
}

.platform-compare-row strong {
    font-variant-numeric: tabular-nums;
}

.platform-compare-bar {
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-strong) 15%, transparent);
    overflow: hidden;
}

.platform-compare-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(130deg, var(--accent-soft), var(--accent-strong));
}

.platform-compare-bar--form {
    background: color-mix(in srgb, var(--accent-warm) 16%, transparent);
}

.platform-compare-bar--form i {
    background: linear-gradient(130deg, var(--accent-warm-soft), var(--accent-warm));
}

[data-theme="dark"] .platform-card--total .platform-card-main {
    color: #e2e8f0;
}

[data-theme="dark"] .platform-card--winner {
    border-color: rgba(16, 185, 129, 0.4);
    background: linear-gradient(165deg, rgba(16, 185, 129, 0.22), rgba(5, 150, 105, 0.12));
}

[data-theme="dark"] .platform-card--winner-form {
    border-color: rgba(245, 158, 11, 0.44);
    background: linear-gradient(165deg, rgba(245, 158, 11, 0.24), rgba(217, 119, 6, 0.14));
}

[data-theme="dark"] .platform-card--winner-neutral {
    border-color: rgba(148, 163, 184, 0.4);
    background: linear-gradient(165deg, rgba(71, 85, 105, 0.32), rgba(51, 65, 85, 0.18));
}

[data-theme="dark"] .platform-card p,
[data-theme="dark"] .platform-compare-row span {
    color: #cbd5e1;
}

[data-theme="dark"] .platform-compare-bar {
    background: rgba(59, 130, 246, 0.28);
}

[data-theme="dark"] .platform-compare-bar--form {
    background: rgba(245, 158, 11, 0.28);
}

.gauge-wrap {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.gauge-card {
    border-radius: var(--radius-md);
    border: 1px solid var(--line-soft);
    background: var(--card-muted-bg);
    padding: 12px;
    min-height: 206px;
}

.gauge-card--sales {
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14);
}

.gauge-card--spend {
    box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.16);
}

.gauge-card--inputs {
    box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.14);
}

.gauge-card h4 {
    margin: 0 0 8px;
}

.gauge-card.gauge-card--metric h4 {
    font-size: 0.98rem;
    letter-spacing: 0.02em;
}

.gauge-meter {
    position: relative;
    min-height: 132px;
}

.gauge-meter--sales .gauge-center-text strong {
    color: #2563eb;
}

.gauge-meter--spend .gauge-center-text strong {
    color: #b45309;
}

.gauge-meter--inputs .gauge-center-text strong {
    color: #15803d;
}

.gauge-center-text {
    position: absolute;
    inset: 56% 0 auto 0;
    transform: translateY(-50%);
    text-align: center;
    display: grid;
    gap: 3px;
    z-index: 2;
}

.gauge-center-text span {
    font-size: 0.78rem;
    color: var(--text-soft);
    letter-spacing: 0.03em;
}

.gauge-center-text strong {
    font-size: 1.8rem;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
}

.gauge-foot {
    margin-top: 8px;
    font-size: 0.84rem;
    color: var(--text-muted);
    text-align: left;
}

.gauge-progress-stack {
    display: grid;
    gap: 5px;
}

.gauge-progress-head,
.gauge-progress-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.gauge-progress-head span {
    font-size: 0.76rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gauge-progress-head strong {
    font-size: 0.82rem;
    color: var(--text-strong);
}

.gauge-progress-foot {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.gauge-progress-bar {
    position: relative;
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 70%, transparent);
}

.gauge-progress-bar span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
}

.gauge-progress-bar--blue span {
    background: linear-gradient(90deg, #60a5fa 0%, #2563eb 100%);
}

.gauge-progress-bar--amber span {
    background: linear-gradient(90deg, #fbbf24 0%, #d97706 100%);
}

.gauge-progress-bar--green span {
    background: linear-gradient(90deg, #4ade80 0%, #16a34a 100%);
}

.gauge-meta-row {
    margin-top: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-soft);
}

.goal-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}

.goal-badge--excellent {
    color: #047857;
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.34);
}

.goal-badge--good,
.goal-badge--progress {
    color: #b45309;
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.34);
}

.goal-badge--risk {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.34);
}

.gauge-value {
    margin-top: 8px;
    font-size: 1.2rem;
    font-weight: 800;
}

.gauge-svg-compact {
    height: 118px;
}

.goal-progress {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--funnel-bg);
    padding: 10px;
}

.goal-progress-bar {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: var(--funnel-bar-bg);
    overflow: hidden;
}

.goal-progress-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(130deg, #10b981, #2563eb);
}

.metric-card--goal .goal-progress-bar {
    margin-top: 6px;
}

.goal-progress-bar--excellent span {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.goal-progress-bar--good span,
.goal-progress-bar--progress span {
    background: linear-gradient(90deg, #f59e0b, #eab308);
}

.goal-progress-bar--risk span {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.report-objective-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.report-creatives-headline h3 {
    margin: 0;
    font-size: clamp(1.45rem, 2vw, 2rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.report-section-note {
    margin: 8px 0 0;
    color: var(--text-soft);
    font-size: 0.92rem;
    line-height: 1.45;
}

.creative-upload-bar {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
    margin-top: 14px;
}

.creative-upload-field {
    min-width: min(420px, 100%);
    flex: 1 1 340px;
    display: grid;
    gap: 7px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--line-soft);
    background: var(--card-muted-bg);
}

.creative-upload-field span {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--text-soft);
    letter-spacing: 0.01em;
}

.creative-upload-field input {
    width: 100%;
    color: var(--field-text);
}

.creative-upload-meta {
    display: grid;
    gap: 10px;
    margin: 12px 0 4px;
}

.creative-upload-progress {
    display: grid;
    gap: 9px;
    margin: 12px 0 12px;
    padding: 12px 14px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(16, 185, 129, 0.08)),
        var(--glass-light);
}

.creative-upload-progress.hidden {
    display: none;
}

.creative-upload-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 800;
}

.creative-upload-progress-head strong {
    color: var(--accent-strong);
    font-size: 0.95rem;
}

.creative-upload-progress-track {
    width: 100%;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.creative-upload-progress-track span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #14b8a6 58%, #22c55e);
    transition: width 0.22s ease;
}

.creative-upload-progress small {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.creative-library-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.creative-library-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: var(--glass-light);
    color: var(--text-soft);
    font-size: 0.78rem;
    max-width: 100%;
}

.creative-library-chip strong {
    color: var(--text);
    font-weight: 700;
    line-height: 1.2;
}

.creative-library-chip em {
    font-style: normal;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--gold-2);
}

body.capture-canvas-mode .entity-assign-btn {
    display: none;
}

.report-objective-card {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: var(--card-muted-bg);
    padding: 14px;
    min-width: 0;
    display: grid;
    gap: 12px;
}

.report-objective-card.is-inactive-channel {
    border-style: dashed;
    opacity: 0.86;
}

.report-objective-card h4 {
    margin: 0;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

.channel-funnel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.channel-funnel-card {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: var(--card-muted-bg);
    padding: 14px;
    display: grid;
    gap: 12px;
}

.channel-funnel-steps {
    display: grid;
    gap: 10px;
}

.channel-funnel-step {
    display: grid;
    gap: 6px;
}

.channel-funnel-step span {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.channel-funnel-step strong {
    font-size: 1.1rem;
}

.channel-funnel-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--funnel-bar-bg);
    overflow: hidden;
}

.channel-funnel-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(130deg, var(--cobalt-soft), var(--cobalt));
}

.channel-funnel-meta {
    display: grid;
}

.channel-funnel-note {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.status-funnel-card {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
        var(--card-muted-bg);
    padding: 18px;
    display: grid;
    gap: 16px;
    min-width: 0;
    position: relative;
    overflow: hidden;
}

.status-funnel-card::after {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.18), rgba(255,255,255,0));
    opacity: .5;
}

.status-funnel-card--leadsales {
    box-shadow: inset 0 0 0 1px rgba(91, 163, 214, 0.10);
}

.status-funnel-card--sperant {
    box-shadow: inset 0 0 0 1px rgba(216, 182, 107, 0.10);
}

.status-funnel-source-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.status-funnel-source-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: rgba(255,255,255,.04);
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.status-funnel-source-badge--leadsales {
    border-color: rgba(91, 163, 214, 0.30);
    background: rgba(91, 163, 214, 0.12);
    color: #cfe9ff;
}

.status-funnel-source-badge--sperant {
    border-color: rgba(216, 182, 107, 0.30);
    background: rgba(216, 182, 107, 0.14);
    color: #ffe4a2;
}

.status-funnel-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.status-funnel-top h4 {
    margin: 2px 0 0;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

.status-funnel-copy {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.4;
}

.status-funnel-total {
    text-align: right;
    min-width: 96px;
}

.status-funnel-total span {
    display: block;
    color: var(--text-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 800;
}

.status-funnel-total strong {
    display: block;
    margin-top: 4px;
    font-size: 2rem;
    line-height: .9;
    letter-spacing: -0.05em;
}

.status-funnel-chips,
.status-funnel-day-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.status-funnel-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: rgba(255,255,255,.03);
    color: var(--text-soft);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.status-funnel-swatch {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    flex: 0 0 9px;
    background: currentColor;
    box-shadow: 0 0 0 2px rgba(0,0,0,.18);
}

.status-funnel-chip--base {
    background: rgba(200, 155, 69, 0.10);
    color: var(--text);
}

.status-funnel-chip--accent {
    background: rgba(230, 196, 123, 0.20);
    color: #ffe6a4;
}

.status-funnel-chip--danger {
    background: rgba(199, 96, 85, 0.18);
    color: #f3b2a9;
}

.status-funnel-wrap {
    padding: 18px;
    border: 1px solid var(--line-soft);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
        rgba(255,255,255,.018);
    display: grid;
    justify-items: center;
}

.status-funnel-note {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    justify-self: stretch;
}

.status-funnel-arrows {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    opacity: .45;
}

.status-funnel-arrow {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid rgba(255,255,255,.86);
}

.status-funnel-stack {
    display: grid;
    gap: 2px;
    position: relative;
    justify-items: center;
    width: 100%;
}

.status-funnel-step {
    position: relative;
    margin: 0 auto;
    min-height: 54px;
    max-width: 100%;
    padding: 12px 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 900;
    color: #fff;
    box-sizing: border-box;
    border-radius: 0;
    box-shadow: 0 14px 26px rgba(0,0,0,.16);
    background: var(--status-funnel-bg, linear-gradient(135deg, #f1d79c, #c89b45));
    transition: filter 0.25s ease, transform 0.25s ease, opacity 0.5s ease;
}

.status-funnel-step:hover {
    filter: brightness(1.08);
    transform: scaleY(1.04);
    z-index: 3;
}

.status-funnel-step-main {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding-right: 4px;
    justify-items: center;
    text-align: center;
}

.status-funnel-step-main strong {
    font-size: clamp(11px, 1.25vw, 15px);
    line-height: 1.12;
    text-transform: uppercase;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
    text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

.status-funnel-step-metrics {
    text-align: center;
    flex: 0 0 auto;
    min-width: 62px;
    white-space: nowrap;
}

.status-funnel-step-metrics b {
    display: block;
    font-size: clamp(18px, 2.2vw, 22px);
    line-height: 1;
    letter-spacing: -.03em;
}

.status-funnel-step-metrics small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    opacity: .9;
    text-transform: lowercase;
}

.status-funnel-step--base {
    --status-funnel-bg: linear-gradient(135deg, rgba(160, 136, 88, .96), rgba(125, 93, 39, .96));
    color: #fff6e1;
}

.status-funnel-step--accent {
    --status-funnel-bg: linear-gradient(135deg, rgba(241, 205, 124, .98), rgba(216, 182, 107, .98));
    color: #1f1607;
}

.status-funnel-step--danger {
    --status-funnel-bg: linear-gradient(135deg, rgba(200, 104, 92, .98), rgba(176, 93, 83, .98));
    color: #fff2ef;
}

.status-funnel-tip {
    width: 0;
    height: 0;
    margin-top: -1px;
    border-left: 38px solid transparent;
    border-right: 38px solid transparent;
    border-top: 34px solid var(--status-funnel-tip-color, rgba(216, 182, 107, .95));
}

.status-funnel-tip--leadsales {
    --status-funnel-tip-color: rgba(125, 93, 39, .95);
}

.status-funnel-tip--sperant {
    --status-funnel-tip-color: rgba(216, 182, 107, .95);
}

.status-funnel-days {
    display: grid;
    gap: 10px;
}

.status-funnel-day {
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    padding: 12px 14px;
    background: rgba(255,255,255,.02);
}

.status-funnel-day-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 8px;
}

.status-funnel-day-head strong {
    color: var(--gold-2);
}

.status-funnel-day-head span {
    color: var(--text-soft);
    font-size: 0.84rem;
    font-weight: 700;
}

.status-funnel-day-tags .status-funnel-chip b {
    color: var(--gold-2);
    font-size: 0.8rem;
}

@media (max-width: 860px) {
    .status-funnel-step {
        min-height: 52px;
        padding: 10px 18px;
    }

    .status-funnel-arrows {
        gap: 8px;
    }
}

.sales-header-card {
    display: grid;
    gap: 10px;
}

.channel-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.channel-btn {
    border: 1px solid var(--line);
    border-radius: 999px;
    min-height: 34px;
    padding: 0 14px;
    background: var(--field-bg);
    color: var(--text-soft);
    font-weight: 700;
}

.channel-btn.active {
    border-color: rgba(59, 130, 246, 0.55);
    background: linear-gradient(140deg, rgba(37, 99, 235, 0.92), rgba(30, 64, 175, 0.88));
    color: #eff6ff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
}

.sales-funnel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.sales-funnel-step {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--card-muted-bg);
    padding: 10px;
    display: grid;
    gap: 4px;
}

.sales-funnel-step strong {
    font-size: 1.3rem;
    line-height: 1.1;
}

.sales-funnel-step-btn {
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sales-funnel-step-btn:hover {
    border-color: rgba(59, 130, 246, 0.42);
    transform: translateY(-1px);
}

.sales-funnel-step-btn:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.55);
    outline-offset: 2px;
}

.sales-funnel-step-btn.is-active {
    border-color: rgba(59, 130, 246, 0.68);
    background: linear-gradient(150deg, rgba(37, 99, 235, 0.16), rgba(30, 64, 175, 0.08));
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}

.sales-funnel-step small {
    color: var(--text-soft);
    font-weight: 600;
}

.sales-funnel-title {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sales-loss-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.sales-loss-card {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--funnel-bg);
    padding: 10px;
    display: grid;
    gap: 6px;
}

.sales-loss-card h4 {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.sales-loss-card strong {
    font-size: 1.26rem;
    line-height: 1;
}

.sales-region-list {
    display: grid;
    gap: 8px;
}

.sales-region-item {
    border: 1px solid var(--line-soft);
    border-radius: 11px;
    background: var(--card-muted-bg);
    padding: 9px 10px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.sales-region-item span {
    color: var(--text-soft);
    font-weight: 600;
}

.sales-region-item strong {
    font-size: 0.9rem;
    text-align: right;
}

.sales-region-note {
    border: 1px dashed var(--line);
    border-radius: 11px;
    background: var(--empty-bg);
    padding: 9px 10px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-soft);
    font-weight: 600;
}

.sales-region-step {
    border: 1px solid var(--line-soft);
    border-radius: 11px;
    background: var(--card-muted-bg);
    padding: 8px 10px;
    color: var(--text-soft);
    font-size: 0.86rem;
    font-weight: 700;
}

.sales-region-estimation {
    border: 1px dashed rgba(37, 99, 235, 0.5);
    border-radius: 11px;
    padding: 8px 10px;
    font-size: 0.82rem;
    color: var(--text-soft);
    background: rgba(59, 130, 246, 0.08);
}

#sales-peru-map {
    min-height: 320px;
    display: grid;
    place-items: center;
}

.peru-map-svg {
    width: min(100%, 420px);
    height: auto;
    display: block;
}

.peru-map-svg--real {
    width: min(100%, 540px);
    max-height: 560px;
}

.sales-map-wrap {
    width: 100%;
    display: grid;
    place-items: center;
    gap: 8px;
}

.sales-map-caption {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
}

.sales-map-loading {
    color: var(--text-soft);
    font-weight: 600;
    font-size: 0.95rem;
}

.sales-map-region {
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 0.68;
    transform-origin: center;
}

.sales-map-region.is-active {
    opacity: 1;
}

.sales-map-region:hover {
    opacity: 1;
}

.sales-gender-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.sales-gender-card {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--card-muted-bg);
    padding: 10px;
    display: grid;
    gap: 4px;
}

.sales-gender-card span {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    font-weight: 700;
}

.sales-gender-card strong {
    font-size: 1.34rem;
    line-height: 1.1;
}

.sales-gender-card small {
    color: var(--text-soft);
    font-weight: 600;
}

.leadflow-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.leadflow-kpi {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--card-muted-bg);
    padding: 10px;
    display: grid;
    gap: 4px;
}

.leadflow-kpi strong {
    font-size: 1.35rem;
    line-height: 1.1;
}

.leadflow-kpi small {
    color: var(--text-soft);
    font-weight: 600;
}

.leadflow-kpi--warn strong { color: #d97706; }
.leadflow-kpi--success strong { color: #059669; }

.leadflow-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.leadflow-bars {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--funnel-bg);
    padding: 10px;
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.leadflow-row {
    display: grid;
    grid-template-columns: 160px 80px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.leadflow-row span {
    color: var(--text-muted);
    font-size: 0.86rem;
}

.leadflow-row strong {
    text-align: right;
}

.leadflow-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.leadflow-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #1d4ed8);
}

.leadflow-bar--neutral span { background: linear-gradient(90deg, #64748b, #475569); }
.leadflow-bar--danger span { background: linear-gradient(90deg, #ef4444, #dc2626); }
.leadflow-bar--success span { background: linear-gradient(90deg, #22c55e, #16a34a); }
.leadflow-bar--warn span { background: linear-gradient(90deg, #f59e0b, #d97706); }

.leadflow-stage {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--card-muted-bg);
    padding: 10px;
}

.leadflow-stage h4 {
    margin: 0 0 8px;
}

.leadflow-stage-list {
    display: grid;
    gap: 6px;
}

.leadflow-stage-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 6px;
}

.leadflow-stage-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.entity-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.phase-columns {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-bottom: 12px;
}

.phase-column {
    border-radius: var(--radius-md);
    border: 1px solid var(--line-soft);
    background: var(--card-muted-bg);
    padding: 12px;
    min-width: 0;
}

.phase-column-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.phase-column-head h4 {
    margin: 0;
    font-size: 0.95rem;
}

.phase-column-list {
    display: grid;
    gap: 8px;
}

.phase-column-item {
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 8px;
    background: var(--field-bg);
}

.phase-column-item strong {
    display: block;
    font-size: 0.9rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.phase-column-item small {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
}

.entity-card {
    padding: 14px;
}

.entity-card .panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.entity-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.entity-card h4 {
    flex: 1 1 220px;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.entity-assign-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(216, 182, 107, 0.34);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
}

.entity-assign-btn:hover {
    border-color: rgba(216, 182, 107, 0.58);
    background: linear-gradient(180deg, rgba(216, 182, 107, .18), rgba(216, 182, 107, .08));
}

.entity-assign-btn svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: currentColor;
}

.entity-rank {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 800;
    background: var(--entity-rank-bg);
    color: var(--entity-rank-text);
    margin-bottom: 10px;
}

.entity-meta {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.entity-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.entity-row span {
    color: var(--text-muted);
}

.sales-attribution-context {
    display: grid;
    gap: 7px;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--field-bg);
}

.sales-attribution-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.sales-attribution-row span {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sales-attribution-row strong {
    min-width: 0;
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.sales-attribution-row--muted strong {
    color: var(--text-soft);
    font-weight: 700;
}

.entity-note {
    margin-top: 10px;
    color: var(--text-soft);
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.entity-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 10px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    background: var(--glass-light);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.entity-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.entity-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

.entity-media-caption {
    margin-top: 8px;
    font-size: 0.76rem;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.report-objective-card .entity-media {
    aspect-ratio: 1 / 1;
    border-radius: 18px;
}

.report-objective-card .entity-media img,
.report-objective-card .entity-media video {
    object-fit: cover;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
    max-width: 100%;
    flex: 0 0 auto;
}

.status-chip.winner,
.status-chip.scale,
.status-chip.high {
    background: var(--status-chip-success-bg);
    color: var(--status-chip-success-text);
}

.status-chip.watch,
.status-chip.test,
.status-chip.medium {
    background: var(--status-chip-warn-bg);
    color: var(--status-chip-warn-text);
}

.status-chip.at-risk,
.status-chip.pause,
.status-chip.investigate,
.status-chip.low {
    background: var(--status-chip-danger-bg);
    color: var(--status-chip-danger-text);
}

.table-container {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

th,
td {
    padding: 8px 8px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: top;
}

th {
    text-align: left;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

td small {
    color: var(--text-muted);
}

.chart-box {
    width: 100%;
    overflow-x: auto;
}

.chart-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--text-soft);
    font-size: 0.86rem;
    margin-bottom: 10px;
}

.dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
}

.chart-svg {
    display: block;
    width: 100%;
    height: auto;
}

.prompt-box,
.json-box {
    width: 100%;
    min-height: 320px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--code-bg);
    color: var(--code-text);
    padding: 14px;
    line-height: 1.6;
}

.prompt-box {
    resize: vertical;
}

.json-box {
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.empty-state {
    border-radius: var(--radius-md);
    border: 1px dashed var(--line);
    padding: 18px;
    color: var(--text-soft);
    background: var(--empty-bg);
}

.invoices-header-card .panel-head {
    margin-bottom: 4px;
}

.invoice-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.invoice-scope-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--glass-light);
    font-size: 0.82rem;
    font-weight: 800;
}

.invoice-note {
    margin: 0;
    color: var(--text-soft);
    max-width: 840px;
}

.invoice-kpi--primary {
    border-color: rgba(37, 99, 235, 0.22);
}

.invoice-kpi--success {
    border-color: rgba(16, 185, 129, 0.22);
}

.invoice-kpi--warn {
    border-color: rgba(245, 158, 11, 0.28);
}

.invoices-package-card .panel-head {
    margin-bottom: 10px;
}

.invoice-batch-list {
    display: grid;
    gap: 12px;
}

.invoice-batch-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--card-muted-bg);
}

.invoice-batch-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.invoice-batch-top h4 {
    margin: 2px 0 0;
}

.invoice-batch-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.invoice-batch-metrics span {
    display: grid;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    color: var(--text-soft);
    background: var(--glass-light);
}

.invoice-batch-metrics strong {
    color: var(--text);
    font-size: 1rem;
}

.invoice-package-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.invoice-package-summary span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    color: var(--text-soft);
    background: var(--glass-light);
}

.invoice-package-summary strong {
    color: var(--text);
    font-size: 1rem;
}

.invoice-path-block {
    display: grid;
    gap: 4px;
}

.invoice-path-block span {
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.invoice-path-block code,
.invoice-table-path {
    display: block;
    white-space: normal;
    word-break: break-word;
    color: var(--text);
    font-size: 0.78rem;
}

.invoice-status-chip {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.invoice-status-chip.is-success {
    background: var(--status-chip-success-bg);
    color: var(--status-chip-success-text);
}

.invoice-status-chip.is-warn {
    background: var(--status-chip-warn-bg);
    color: var(--status-chip-warn-text);
}

.invoice-status-chip.is-base {
    background: rgba(100, 116, 139, 0.12);
    color: var(--text-muted);
}

.invoice-file-cell {
    display: grid;
    gap: 4px;
    min-width: 300px;
}

.invoice-file-cell strong {
    word-break: break-word;
}

.invoice-file-cell small {
    color: var(--text-soft);
    font-size: 0.78rem;
}

#invoice-table table {
    min-width: 820px;
}

#invoice-reconciliation .summary-card {
    min-width: 0;
}

#invoice-reconciliation .summary-card strong,
#invoice-reconciliation .summary-card small {
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .invoice-batch-top,
    .invoice-batch-metrics {
        grid-template-columns: 1fr;
    }

    .invoice-batch-top {
        display: grid;
    }
}

.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    background: var(--overlay-bg);
    backdrop-filter: blur(4px);
}

.loading-overlay.hidden {
    display: none;
}

.loading-card {
    width: min(360px, calc(100% - 24px));
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--loading-card-bg);
    padding: 18px;
    text-align: center;
    box-shadow: var(--loading-card-shadow);
}

.loading-card p {
    margin: 8px 0 0;
    color: var(--text-soft);
}

.loading-progress {
    margin-top: 16px;
    display: grid;
    gap: 8px;
    text-align: left;
}

.loading-progress.hidden {
    display: none;
}

.loading-progress-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: var(--text-strong);
    font-size: 0.86rem;
    font-weight: 800;
}

.loading-progress-top strong {
    color: #2563eb;
    font-size: 0.88rem;
}

.loading-progress-track {
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.24);
    overflow: hidden;
}

.loading-progress-track span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #20a37a);
    transition: width 240ms ease;
}

.loading-progress small {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 12px;
    border-radius: 50%;
    border: 3px solid var(--spinner-track);
    border-top-color: #60a5fa;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.filter-overlay {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 60;
}

.filter-overlay.hidden {
    display: none;
}

.filter-badge {
    border-radius: 999px;
    border: 1px solid var(--filter-badge-border);
    background: var(--filter-badge-bg);
    color: var(--filter-badge-text);
    padding: 8px 12px;
    font-weight: 700;
    box-shadow: var(--filter-badge-shadow);
}

@media (max-width: 1200px) {
    .panel-grid-3 {
        grid-template-columns: 1fr;
    }

    .report-grid-two {
        grid-template-columns: 1fr;
    }

    .report-header-columns {
        grid-template-columns: 1fr;
    }

    #report-platform-summary {
        grid-template-columns: 1fr;
    }

    .report-kpi-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-kpi-roi {
        min-height: 220px;
    }

    .platform-card--winner {
        grid-column: span 1;
    }

    .workspace-layout {
        grid-template-columns: 1fr;
    }

    .sidebar-nav {
        position: static;
    }

    .app-header-inline {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .control-grid-inline {
        min-width: 0;
        flex-wrap: wrap;
        gap: 6px;
    }

    .field-compact {
        flex: 1 1 160px;
    }

    #brand-select,
    #project-field select,
    #range-preset,
    #start-date,
    #end-date,
    .lead-report-range-field {
        width: 100%;
    }

    .lead-report-range-field {
        grid-template-columns: 1fr;
        min-width: 220px;
    }

    .lead-report-range-popover {
        left: 0;
        right: auto;
    }
}

@media (max-width: 900px) {
    .app-header-top,
    .control-head {
        flex-direction: column;
    }

    .diarii-kpi-row,
    .diarii-notes {
        grid-template-columns: 1fr;
    }

    .control-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .report-objective-grid,
    .channel-funnel-grid {
        grid-template-columns: 1fr;
    }

    .creative-upload-bar {
        align-items: stretch;
    }

    .creative-upload-bar .primary-btn {
        width: 100%;
    }
}

@media (max-width: 640px) {
    body {
        padding-inline: 10px;
    }

    .app-header-top { padding: 0; }
    .control-card,
    .panel-card { padding: 10px; }

    .control-grid {
        grid-template-columns: 1fr;
    }

    .panel-grid-2,
    .kpi-grid,
    .entity-grid,
    .summary-grid,
    .funnel-grid {
        grid-template-columns: 1fr;
    }

    .leadflow-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sales-loss-panel {
        grid-template-columns: 1fr;
    }

    .sales-gender-grid {
        grid-template-columns: 1fr;
    }

    .leadflow-row {
        grid-template-columns: 1fr;
    }

    .leadflow-row strong {
        text-align: left;
    }

    .report-kpi-cards {
        grid-template-columns: 1fr;
    }

}

@media print {
    @page {
        size: auto;
        margin: 8mm;
    }

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        min-height: auto !important;
        background: #ffffff !important;
        color: #0f172a !important;
    }

    body {
        overflow: visible !important;
    }

    .app-header,
    .app-header-inline,
    .sidebar-nav,
    #sidebar-nav,
    .status-banner,
    #status-banner,
    .loading-overlay,
    .filter-overlay {
        display: none !important;
    }

    .app-shell,
    .workspace-layout,
    .workspace-content,
    main,
    .tab-content.active {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .workspace-layout {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .tab-content {
        display: none !important;
    }

    .tab-content.active {
        display: grid !important;
    }

    .control-card,
    .panel-card,
    .status-banner {
        border-color: rgba(15, 23, 42, 0.18) !important;
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    .panel-grid-2,
    .panel-grid-3,
    .report-grid-two,
    .report-header-columns,
    .report-kpi-cards,
    .kpi-grid,
    .summary-grid,
    .entity-grid,
    .funnel-grid,
    .phase-columns,
    .leadflow-grid,
    .sales-gender-grid,
    .leadflow-row {
        grid-template-columns: 1fr !important;
    }

    .table-container,
    .chart-box {
        overflow: visible !important;
    }

    table {
        min-width: 0 !important;
        table-layout: fixed;
    }

    th,
    td {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .panel-card,
    .panel-grid,
    .report-grid-two,
    .kpi-grid,
    .summary-grid,
    .card-list,
    .entity-grid,
    .phase-columns,
    .table-container,
    .chart-box {
        break-inside: auto;
        page-break-inside: auto;
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}