/* F7&CO brand layer — direction B «navy institucional» (approved 2026-11-03).
   Loaded after every other stylesheet. Manual F7&CO 2026: 7 exact colors, square corners,
   Poppins titles + Inter body, lime only as accent, no gradients or shadows.
   Removing this file restores the previous look. */
:root {
  --f7-navy: #141F60;
  --f7-blue: #233CF9;
  --f7-blue-03: #525FAB;
  --f7-lime: #E9F939;
  --f7-gray: #DEDEDE;
  --f7-black: #161617;
  --f7-white: #FFFFFF;
}

/* Square corners everywhere (brand rule). Small timeline dots stay round. */
*, *::before, *::after { border-radius: 0 !important; }
html .sap-analytics .sa-stages li::before{ border-radius: 50% !important; }

/* ---- Page heading: title on one line, context below it ---- */
html .page-header{ display: block; margin-bottom: 18px; }
html .page-header h1{ font-family: Poppins, sans-serif; font-weight: 700; font-size: 34px; line-height: 1.15; letter-spacing: -.6px; margin: 6px 0 18px; }
html .page-header .eyebrow, html .section-kicker{ color: var(--f7-blue-03); letter-spacing: .08em; }
html .run-facts{ width: 100%; }
/* The context toolbar already shows the same company, plant, period and currency. */
html #appContent:has(.context-toolbar:not([hidden])) .page-header .run-facts{ display: none; }

/* ---- Side menu: group titles are never cut ---- */
html .nav-parent, html .nav-parent *{ white-space: normal; overflow: visible; text-overflow: clip; }

/* ---- KPI band: navy with a lime modular mark over each label ---- */
html .kpi-strip, html .v06-kpi-strip, html .close-kpi-strip, html .sap-analytics .sa-kpis, html .sap-platform .smb-kpis{
  background: var(--f7-navy); border: 1px solid var(--f7-navy); box-shadow: none;
}
html .sap-platform .smb-kpis{ gap: 0; }
html .kpi-item, html .v06-kpi-strip article, html .close-kpi-strip article, html .sap-analytics .sa-kpi, html .sap-platform .smb-kpi{
  background: transparent; border: 0; border-right: 1px solid var(--f7-blue-03); box-shadow: none; padding: 20px 22px;
}
html .kpi-item:last-child, html .v06-kpi-strip article:last-child, html .close-kpi-strip article:last-child,
html .sap-analytics .sa-kpi:last-child, html .sap-platform .smb-kpi:last-child{ border-right: 0; }
html .kpi-item span, html .kpi-item small, html .v06-kpi-strip span, html .v06-kpi-strip small, html .close-kpi-strip span, html .close-kpi-strip small,
html .sap-analytics .sa-kpi span, html .sap-analytics .sa-kpi small, html .sap-platform .smb-kpi span, html .sap-platform .smb-kpi small{
  color: var(--f7-gray); letter-spacing: .06em;
}
html .kpi-item strong, html .v06-kpi-strip strong, html .close-kpi-strip strong, html .sap-analytics .sa-kpi strong, html .sap-platform .smb-kpi strong{
  color: var(--f7-white); font-family: Poppins, sans-serif; font-weight: 700;
}
html .kpi-item strong{ font-size: 30px; margin: 10px 0 6px; }
html .v06-kpi-strip strong, html .close-kpi-strip strong{ font-size: 26px; }
html .kpi-item > span:first-child::before, html .v06-kpi-strip article > span:first-child::before,
html .close-kpi-strip article > span:first-child::before, html .sap-analytics .sa-kpi > span:first-child::before{
  content: ""; display: block; width: 24px; height: 4px; background: var(--f7-lime); margin-bottom: 10px;
}
html .sap-platform .smb-kpi::before{ background: var(--f7-lime); left: 22px; }
@media (max-width: 1050px) {
  html .kpi-item, html .v06-kpi-strip article, html .close-kpi-strip article, html .sap-analytics .sa-kpi, html .sap-platform .smb-kpi{ border-bottom: 1px solid var(--f7-blue-03); }
}

/* ---- Panels: navy top rule, light body ---- */
html .tool-panel, html .sap-analytics .sa-card{ border-top: 3px solid var(--f7-navy); box-shadow: none; }
html .tool-panel{ border-color: var(--f7-gray); border-top-color: var(--f7-navy); }
html .panel-header h2{ font-size: 20px; }

/* ---- Amount bars: brand colors; severity is told by the pills, not by the bar ---- */
html .bar-track{ height: 12px; background: var(--f7-gray); border: 0; }
html .bar-fill, html .bar-fill.CRITICAL, html .bar-fill.HIGH, html .bar-fill.MEDIUM{ background: var(--f7-navy); }
html .exposure-row{ align-items: center; }
html .sap-analytics .sa-bar-track{ background: var(--f7-gray); }
html .sap-analytics .sa-bar-fill{ background: var(--f7-navy); }
html .sap-analytics .sa-bar-fill.is-credit{ background: var(--f7-blue-03); }
html .severity-line{ width: 3px; }
html .severity-line.CRITICAL, html .severity-line.HIGH, html .severity-line.MEDIUM, html .material-swatch{ background: var(--f7-navy); }
html .material-swatch{ width: 3px; }

/* ---- Buttons: flat, brand colors ---- */
html .button-primary{ background: var(--f7-navy); border-color: var(--f7-navy); }
html .button-primary:hover:not(:disabled){ background: var(--f7-blue); border-color: var(--f7-blue); }

/* ---- Context toolbar: 8 filters in an even 4×2 grid, live status in its own column ---- */
@media (min-width: 1100px) {
  html .context-toolbar { display: grid; grid-template-columns: 48px repeat(4, minmax(0, 1fr)) auto; grid-auto-flow: row dense; }
  html .context-toolbar > .context-toolbar-label { grid-row: 1 / span 2; grid-column: 1; }
  html .context-toolbar > .context-live { grid-column: 6; grid-row: 1 / span 2; border-left: 1px solid var(--f7-gray); padding: 0 16px; }
  html .context-toolbar > .context-picker, html .context-toolbar > .context-control { min-width: 0; border-right: 1px solid var(--f7-gray); }
  html .context-toolbar > .context-picker:nth-of-type(-n+4) { border-bottom: 1px solid var(--f7-gray); }
}

/* ---- Sign-in card: flat, navy top rule instead of a shadow ---- */
html .auth-access { box-shadow: none; border-top: 4px solid var(--f7-navy); }
html .sap-platform .smb-kpi { box-shadow: none; }

/* ---- Phone: smaller title, KPIs two per row ---- */
@media (max-width: 560px) {
  html .page-header h1 { font-size: 28px; letter-spacing: -.4px; }
  html .kpi-strip { grid-template-columns: 1fr 1fr; }
  html .kpi-item { padding: 16px; border-right: 1px solid var(--f7-blue-03); border-bottom: 1px solid var(--f7-blue-03); }
  html .kpi-item:nth-child(2n) { border-right: 0; }
  html .kpi-item strong { font-size: 24px; }
  html .kpi-item span { font-size: 10px; }
}

/* ======================================================================
   Polish pass — the 8-pillar checklist, applied to a data product.
   ====================================================================== */

/* 02 · Typography that does work: sentence case, readable sizes, one clear scale
   (12 label · 14 body · 20 panel title · 32 figure · 34 page title), tabular figures. */
html .kpi-item span, html .run-facts span, html .context-picker summary span, html .context-control label, html .context-live,
html .page-header .eyebrow, html .data-table th, html .severity-pill, html .status-pill, html .status-source span,
html .nav-parent, html .nav-parent *, html .topbar-context span, html .panel-count, html .section-kicker,
html .v06-kpi-strip span, html .close-kpi-strip span {
  text-transform: none; letter-spacing: 0;
}
html .page-header .eyebrow { font-size: 13px; font-weight: 600; color: var(--f7-blue-03); }
html .kpi-item span, html .v06-kpi-strip span, html .close-kpi-strip span { font-size: 13px; font-weight: 500; color: var(--f7-white); }
html .kpi-item small, html .v06-kpi-strip small, html .close-kpi-strip small { font-size: 12px; }
html .kpi-item strong { font-size: 32px; }
html .context-picker summary span, html .context-control label { font-size: 12px; font-weight: 500; color: var(--f7-blue-03); }
html .context-picker summary strong, html .context-control select { font-size: 14px; }
html .panel-header h2 { font-weight: 600; }
html .data-table { font-size: 13px; }
html .data-table th { font-size: 12px; font-weight: 600; color: var(--f7-navy); background: #F4F5F8; }
html .exposure-label strong, html .exception-preview-item strong { font-size: 13px; }
html .exposure-label span { font-size: 12px; }
html .exception-preview-item { font-size: 13px; }
html .severity-pill, html .status-pill { font-size: 11px; font-weight: 600; }
html .nav-parent { font-size: 13px; }
html .kpi-item strong, html .data-table td, html .exposure-value, html .v06-kpi-strip strong, html .close-kpi-strip strong,
html .sap-analytics .sa-kpi strong, html .sap-platform .smb-kpi strong { font-variant-numeric: tabular-nums; }
/* The title already says what each panel is: no decorative kicker above it. */
html .panel-header .section-kicker { display: none; }

/* 03 · A restrained color system: brand colors carry the interface; green, amber and red
   only mean a state (ready, review, blocked) and never decorate. */
html .status-strip { border-left-color: var(--f7-navy); }
html .status-strip .status-icon { background: #F4F5F8; color: var(--f7-navy); }
html .status-strip.is-review { border-left-color: #8A5A00; }
html .status-strip.is-blocked { border-left-color: #B42318; }
html .context-live { color: var(--f7-blue-03); font-size: 12px; font-weight: 500; }
html .context-live span { background: var(--f7-blue); }

/* 04 · Hierarchy that breathes: one rhythm of 24 px between blocks, 20 px inside panels. */
html .page-header { margin-bottom: 24px; }
html .context-toolbar, html .status-strip, html .kpi-strip { margin-bottom: 24px; }
html .overview-grid { gap: 24px; margin-bottom: 24px; }
html .panel-header { padding: 18px 20px; }
html .data-table td { padding: 13px 14px; }
html .data-table th { padding: 12px 14px; }
html .exception-preview-item { padding: 14px 20px; }

/* 06 · Motion that whispers: one moment — amount bars grow once when the view opens.
   The endless pulse on «Actualización activa» is gone. */
html .context-live span { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  html .bar-fill { transform-origin: left center; animation: f7-grow .6s cubic-bezier(.2, .7, .2, 1) both; }
  html .exposure-row:nth-child(2) .bar-fill { animation-delay: .04s; }
  html .exposure-row:nth-child(3) .bar-fill { animation-delay: .08s; }
  html .exposure-row:nth-child(4) .bar-fill { animation-delay: .12s; }
  html .exposure-row:nth-child(n+5) .bar-fill { animation-delay: .16s; }
}
@keyframes f7-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 08 · The invisible expensive stuff: a clear, brand-colored focus ring everywhere,
   rows that answer the pointer, brand selection color. */
html :focus-visible { outline: 3px solid var(--f7-blue); outline-offset: 2px; }
html .sidebar :focus-visible { outline-color: var(--f7-lime); }
html ::selection { background: var(--f7-lime); color: var(--f7-navy); }
html .exposure-row:hover .bar-fill { background: var(--f7-blue); }
html .data-table tbody tr:hover td { background: #F4F5F8; }

/* 07 · Mobile that's designed, not shrunk: filters two per row, tables keep the material
   column pinned while the figures scroll, chart rows stack label · bar · value. */
@media (max-width: 760px) {
  html .context-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  html .context-toolbar > .context-toolbar-label, html .context-toolbar > .context-live { display: none; }
  html .context-toolbar > .context-picker, html .context-toolbar > .context-control { min-width: 0; border-bottom: 1px solid var(--f7-gray); }
  html .context-toolbar > .context-picker:nth-child(odd), html .context-toolbar > .context-control:nth-child(odd) { border-right: 1px solid var(--f7-gray); }
  html .data-table th:first-child, html .data-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--f7-white); box-shadow: 1px 0 0 var(--f7-gray); }
  html .data-table th:first-child { z-index: 3; background: #F4F5F8; }
  html .exposure-row { grid-template-columns: 1fr auto; row-gap: 6px; }
  html .exposure-row .bar-track { grid-column: 1 / -1; grid-row: 2; }
  html .exposure-value { text-align: right; }
  html .page-header .eyebrow { font-size: 12px; }
  html .panel-header { padding: 16px; }
}

/* 01 · Point of view + 05 · imagery with intent: the sign-in panel uses the original white logo
   (no filter) and the F7 modular arrow — three chevrons blue 03 → blue 02 → lime — as its one image. */
html img[src*="logo-white"] { filter: none !important; }
html .auth-brand img { width: auto; height: 44px; }
html .auth-brand span { text-transform: none; font-size: 13px; color: var(--f7-gray); }
html .auth-brand-panel { background: var(--f7-navy); }
html .auth-statement h1 { font-family: Poppins, sans-serif; font-weight: 700; max-width: 17ch; font-size: clamp(32px, 3.4vw, 50px); letter-spacing: -.8px; }
html .auth-statement p { color: var(--f7-gray); font-size: 15px; }
html .auth-brand-panel::after {
  content: ""; position: absolute; right: clamp(24px, 5vw, 72px); bottom: clamp(96px, 14vh, 150px); width: 216px; height: 72px; z-index: 0;
  background:
    linear-gradient(var(--f7-blue-03), var(--f7-blue-03)) 0 0 / 72px 72px no-repeat,
    linear-gradient(var(--f7-blue), var(--f7-blue)) 72px 0 / 72px 72px no-repeat,
    linear-gradient(var(--f7-lime), var(--f7-lime)) 144px 0 / 72px 72px no-repeat;
  clip-path: polygon(0 0, 24px 0, 60px 50%, 24px 100%, 0 100%, 36px 50%,
                     0 0, 72px 0, 96px 0, 132px 50%, 96px 100%, 72px 100%, 108px 50%, 72px 0,
                     144px 0, 168px 0, 204px 50%, 168px 100%, 144px 100%, 180px 50%, 144px 0);
}
html .auth-trust-row span { color: var(--f7-gray); font-size: 13px; }
html .auth-divider, html .auth-environment { text-transform: none; letter-spacing: 0; font-size: 12px; }
@media (max-width: 760px) { html .auth-brand-panel::after { display: none; } }

/* ======================================================================
   Iteration 3 — command band on the period summary.
   One hero figure (amount to review) with its real composition and
   concentration; secondary figures stacked to the right; lime is the
   single accent (critical share, live dot, F7 diagonal).
   ====================================================================== */
html .kpi-strip.f7-command { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(240px, 1fr); position: relative; overflow: hidden; }
html .f7-command > .kpi-item { grid-column: 2; border-right: 0; border-bottom: 1px solid var(--f7-blue-03); padding: 16px 24px; }
html .f7-command > .kpi-item:last-child { border-bottom: 0; }
html .f7-command > .kpi-item > span:first-child::before { display: none; }
html .f7-command > .kpi-item strong { font-size: 26px; margin: 4px 0 2px; }
html .f7-command > .kpi-hero { grid-column: 1; grid-row: 1 / span 3; border-right: 1px solid var(--f7-blue-03); border-bottom: 0; padding: 28px 32px 26px; position: relative; overflow: hidden; }
html .f7-command > .kpi-hero::after {
  content: ""; position: absolute; top: -30%; right: 44px; width: 4px; height: 170%; background: var(--f7-lime); transform: rotate(20deg); pointer-events: none;
}
html .kpi-hero-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-right: 56px; }
html .kpi-hero-head > span { font-size: 14px; font-weight: 500; color: var(--f7-gray); }
html .f7-command > .kpi-hero strong { font-size: 56px; line-height: 1.05; letter-spacing: -1.5px; margin: 10px 0 4px; }
html .f7-command > .kpi-hero small { font-size: 13px; color: var(--f7-gray); }
html .kpi-live { display: inline-flex; align-items: center; gap: 8px; font-style: normal; font-size: 12px; color: var(--f7-gray); white-space: nowrap; }
html .kpi-live b { font-weight: 500; }
html .kpi-live i { width: 8px; height: 8px; background: var(--f7-lime); display: inline-block; }
html .kpi-composition { display: flex; gap: 2px; height: 10px; margin: 22px 56px 10px 0; background: transparent; }
html .kpi-part { display: block; height: 100%; min-width: 3px; background: var(--f7-gray); }
html .kpi-part.CRITICAL { background: var(--f7-lime); }
html .kpi-part.HIGH { background: var(--f7-blue); }
html .kpi-part.MEDIUM { background: var(--f7-blue-03); }
html .kpi-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--f7-gray); }
html .kpi-legend li { display: inline-flex; align-items: center; gap: 7px; }
html .kpi-legend i { width: 10px; height: 10px; background: var(--f7-gray); display: inline-block; }
html .kpi-legend .CRITICAL i { background: var(--f7-lime); }
html .kpi-legend .HIGH i { background: var(--f7-blue); }
html .kpi-legend .MEDIUM i { background: var(--f7-blue-03); }
html .kpi-legend b { color: var(--f7-white); font-weight: 600; font-variant-numeric: tabular-nums; }
html .kpi-insight { margin: 16px 56px 0 0; font-size: 15px; line-height: 1.45; color: var(--f7-white); max-width: 46ch; }
html .kpi-meter { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 8px; }
html .kpi-meter i { width: 10px; height: 10px; background: var(--f7-blue-03); display: block; }
html .kpi-meter i.is-on { background: var(--f7-white); }
html .kpi-meter i.is-bar { width: 0; height: 6px; background: var(--f7-white); flex: none; }
html .kpi-meter:has(.is-bar) { width: 100%; height: 6px; background: var(--f7-blue-03); }

/* One orchestrated moment: the composition draws in and the live dot blinks twice. */
@media (prefers-reduced-motion: no-preference) {
  html .kpi-part { transform-origin: left center; animation: f7-grow .7s cubic-bezier(.2, .7, .2, 1) both; }
  html .kpi-part:nth-child(2) { animation-delay: .08s; }
  html .kpi-part:nth-child(3) { animation-delay: .16s; }
  html .kpi-part:nth-child(n+4) { animation-delay: .24s; }
  html .kpi-live.is-fresh i { animation: f7-live 1.1s ease-in-out 2; }
}
@keyframes f7-live { 0%, 100% { background: var(--f7-lime); } 50% { background: var(--f7-blue-03); } }

@media (max-width: 900px) {
  html .kpi-strip.f7-command { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html .f7-command > .kpi-hero { grid-column: 1 / -1; grid-row: auto; border-right: 0; border-bottom: 1px solid var(--f7-blue-03); }
  html .f7-command > .kpi-item:not(.kpi-hero) { grid-column: auto; border-bottom: 0; border-right: 1px solid var(--f7-blue-03); }
  html .f7-command > .kpi-item:last-child { border-right: 0; }
}
@media (max-width: 560px) {
  html .kpi-strip.f7-command { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html .f7-command > .kpi-hero { padding: 22px 18px; }
  html .f7-command > .kpi-hero::after { right: 18px; }
  html .f7-command > .kpi-hero strong { font-size: 44px; }
  html .kpi-hero-head { flex-direction: column; align-items: flex-start; gap: 6px; padding-right: 32px; }
  html .kpi-composition, html .kpi-insight { margin-right: 32px; }
  html .f7-command > .kpi-item:not(.kpi-hero) { padding: 14px 12px; border-bottom: 0; }
  html .f7-command > .kpi-item:not(.kpi-hero) strong { font-size: 20px; }
  html .f7-command > .kpi-item:not(.kpi-hero) span { font-size: 12px; }
  html .f7-command > .kpi-item:not(.kpi-hero) small { font-size: 11px; }
  html .f7-command > .kpi-item:nth-child(2n) { border-right: 1px solid var(--f7-blue-03); }
  html .f7-command > .kpi-item:last-child { border-right: 0; }
}