:root {
  color-scheme: light;
  /* Reserve the scrollbar's lane on every page: a tab switch from a short
     page to a long one must not shift the content sideways. */
  scrollbar-gutter: stable;
  --bg: #f7f8fb;
  --panel: #ffffff;
  --border: #e3e6ec;
  --border-soft: #eef0f4;
  --text: #101014;
  --ink-2: #3a3d48;
  --muted: #5d6172;
  --brand: #0e0775;
  --brand-hover: #150a9c;
  /* Logo cyan: a non-text mark only (borders, bars, underline). */
  --accent: #21a4d3;
  --cyan: #21a4d3;
  /* Lighter brand cyan (realplast.es #22bed6): highlights, dots on navy. */
  --cyan-2: #22bed6;
  /* Darker cyan that keeps 3:1 on white, for marks that carry information
     (chart bars, legend swatches). The brand cyan is 2.9:1 there. */
  --cyan-mark: #1b93c1;
  --cyan-ink: #0a5f7f;
  --cyan-tint: #f1f9fd;
  --cyan-line: #c9e8f5;
  --cyan-on-navy: #22bed6;
  --navy-label: #c9c6f2;
  --navy-tint: #eef0f6;
  --ring: rgba(14, 7, 117, 0.16);
  --space-section: 1.5rem;
  --error-bg: #fdecea;
  --error-fg: #9a2a1c;
  --warn-bg: #fef3da;
  --warn-fg: #7a5600;
  --warn-line: #d9a93b;
  --warn-tint: #fffbf0;
  --ok-bg: #e2f4ee;
  --ok-fg: #146b4c;
  --radius-panel: 22px;
  --radius-card: 18px;
  --radius-control: 12px;
  --radius-chip: 8px;
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-line: rgba(255, 255, 255, 0.85);
  --glass-filter: blur(24px) saturate(1.7);
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Self-hosted Manrope (variable wght 200-800, latin subset); the OFL
   license text sits next to the file. Glyphs outside the subset fall back
   to the system stack in --font-sans. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/fonts/manrope-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* Decorative brand glows and dots (mockup S12 values): one fixed layer
   behind all content. Opaque panels cover it; the glass shell shows it
   through its blur. It never animates, never captures input and uses no
   filter: each blurred (70-80px) mockup circle is emulated by a
   radial gradient that stays solid to r - 2*blur, reaches half strength at
   r and fades out at r + 2*blur. The layer opacity is 0.12, so every stop
   alpha is (mockup opacity / 0.12): cyan .08 -> .667, navy .06 -> .5,
   cyan .07 -> .583; the small solid dots .06-.12 -> .5-1. Coordinates are
   the mockup's, measured from the viewport's top-left (and top-right). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.12;
  background:
    radial-gradient(circle 45px at 233px 91px, rgba(31, 13, 119, 0.667) 97%, transparent),
    radial-gradient(circle 23px at 323px 53px, var(--cyan) 97%, transparent),
    radial-gradient(circle 14px at 370px 102px, rgba(33, 164, 211, 0.833) 97%, transparent),
    radial-gradient(circle 32px at calc(100% - 252px) 52px, rgba(31, 13, 119, 0.5) 97%, transparent),
    /* Cyan 520px, top-left, blur 70px. */
    radial-gradient(circle 400px at 100px 80px, rgba(33, 164, 211, 0.667) 30%, rgba(33, 164, 211, 0.333) 65%, rgba(33, 164, 211, 0) 100%),
    /* Navy 440px, top-centre, blur 80px. */
    radial-gradient(circle 380px at 740px -40px, rgba(31, 13, 119, 0.5) 16%, rgba(31, 13, 119, 0.25) 58%, rgba(31, 13, 119, 0) 100%),
    /* Cyan 360px, top-right, blur 70px. */
    radial-gradient(circle 320px at calc(100% - 60px) 240px, rgba(33, 164, 211, 0.583) 12%, rgba(33, 164, 211, 0.292) 56%, rgba(33, 164, 211, 0) 100%);
}
@media (forced-colors: active), print { body::before { display: none; } }
@media (prefers-reduced-transparency: reduce) { body::before { display: none; } }

/* Realplast dot motif: the S-shaped chain of dots from the logo, as a
   reusable decoration. `.dot-spiral` is the navy/cyan chain for light
   surfaces, `--light` the white/cyan one for navy surfaces. Purely
   decorative (aria-hidden or a pseudo-element), never captures input. */
.dot-spiral {
  display: block;
  aspect-ratio: 1;
  background: url("/static/brand/dot-spiral.svg") center / contain no-repeat;
  pointer-events: none;
}
.dot-spiral--light { background-image: url("/static/brand/dot-spiral-light.svg"); }
@media (forced-colors: active), print { .dot-spiral { display: none; } }

.skip-link {
  position: fixed;
  z-index: 20;
  top: 0.5rem;
  left: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--panel);
  color: var(--brand);
  border: 2px solid var(--brand);
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  margin-left: 15rem;
}
.topbar__main {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
  padding: 0 1.75rem;
  padding-block: 0;
}
.topbar .mobile-brand, .topbar .account-nav { align-self: center; }

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 15rem;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0.75rem;
  background: #fafbfd;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  z-index: 11;
}

/* Glass is limited to the shell (sidebar and topbar) and only where the
   engine supports backdrop filtering; the rules above are the opaque
   default. Every such filter declaration, including `none`, stays
   inside this block. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-sidebar {
    background: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border-right-color: var(--glass-line);
    box-shadow: 1px 0 0 var(--border);
  }
  .topbar {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border-bottom-color: var(--glass-line);
    box-shadow: 0 1px 0 var(--border);
  }
  @media (prefers-reduced-transparency: reduce) {
    .app-sidebar { background: #fafbfd; }
    .topbar { background: var(--panel); }
    .app-sidebar, .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
}
.sidebar-brand { display: flex; align-items: center; min-height: 6rem; padding: 0 0.45rem 1.25rem; }
.sidebar-brand img { display: block; width: 100%; max-width: 198px; height: auto; }
.mobile-brand { display: none; }
/* Faint echo of the logo's dot chain at the foot of the sidebar. It sits
   in the fixed sidebar's own layer (the glass filter makes the sidebar the
   containing block), so it stays put while the nav scrolls. */
.app-sidebar::after {
  content: "";
  position: fixed;
  left: 0;
  bottom: 0;
  width: 15rem;
  height: 15rem;
  background: url("/static/brand/dot-spiral.svg") 50% 100% / 11rem no-repeat;
  opacity: 0.13;
  pointer-events: none;
}
@media (forced-colors: active), print { .app-sidebar::after { display: none; } }
/* Mockup sidebar: small letter-spaced label, then one row per project with
   a 32px icon tile (navy icon on the navy tint; cyan-on-navy when active). */
.workspace-nav__heading { display: block; padding: 0 0.625rem 0.375rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.workspace-nav ul { display: flex; flex-direction: column; gap: 6px; }
.workspace-nav ul { margin: 0; padding: 0; list-style: none; }
.workspace-nav a { display: flex; align-items: center; gap: 12px; min-height: 2.75rem; padding: 10px; border-radius: var(--radius-control); color: var(--ink-2); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.workspace-nav__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--navy-tint); color: var(--brand); }
.workspace-nav__icon svg { display: block; }
.workspace-nav a:hover .workspace-nav__icon { background: var(--panel); }
.workspace-nav a[aria-current] .workspace-nav__icon { background: #2a2390; color: var(--cyan-on-navy); }
.workspace-nav a:hover { background: var(--navy-tint); color: var(--brand); }
.workspace-nav a[aria-current] { background: var(--brand); color: #ffffff; font-weight: 600; }
.workspace-nav a[aria-current]:hover { background: var(--brand-hover); color: #ffffff; }
.workspace-nav a:focus-visible, .mobile-workspace summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* White inset ring: visible against the navy fill and the light shell. */
.workspace-nav a[aria-current]:focus-visible { outline: 2px solid #ffffff; outline-offset: -5px; }
.context-nav { min-width: 0; }
.context-nav ul { display: flex; align-items: stretch; height: 100%; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.context-nav li { display: flex; }
/* Tabs span the full header height so the active underline sits on the
   topbar edge. The heavier weight is the non-color cue. */
.topbar .context-nav a { display: inline-flex; align-items: center; min-height: 100%; padding: 3px 0.875rem 0; border-radius: 0; border-bottom: 3px solid transparent; color: var(--ink-2); }
.topbar .context-nav a[aria-current="page"] { color: var(--brand); font-weight: 700; border-bottom: 3px solid var(--cyan); }
.mobile-workspace { display: none; }

.topbar nav { display: flex; align-items: center; min-width: 0; }
.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
}
.topbar nav a:hover { color: var(--brand); background: var(--navy-tint); }
.topbar nav a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.account-nav a { padding: 0.65rem 0.8rem; border-radius: 7px; min-height: 2.75rem; }
.account-nav a[aria-current="page"] { color: var(--brand); background: var(--navy-tint); font-weight: 650; }
.user { color: var(--muted); font-size: 0.82rem; }
.topbar .account-nav { gap: 0; margin-left: auto; }
.account-nav .user {
  max-width: min(21vw, 25ch);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 1rem;
  margin-right: 0.35rem;
  border-right: 1px solid var(--border);
}
.account-nav .inline-form { margin-left: 0.35rem; }

.link-btn {
  background: none;
  border: none;
  color: var(--brand);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  padding: 0;
}
.link-btn:hover, .link-btn:active {
  background: none;
  color: var(--brand-hover);
  transform: none;
}
.link-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}
.account-nav .link-btn { min-height: 2.75rem; padding-inline: 0.75rem; }

a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Fluid workspace: fills the whole space right of the sidebar on every
   screen width. Gutters grow with the viewport (1.75rem at 1280px, 3rem
   from ~1920px). */
main {
  padding: 2.5rem clamp(1.5rem, 2.4vw, 3rem) 4rem;
  max-width: calc(100% - 15rem);
  margin: 0 auto 0 15rem;
  container-type: inline-size;
}

h1 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: clamp(2.25rem, 2.7vw, 2.75rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--brand);
}
/* Three-dot trail after page titles (not on the login card): a small nod to the logo's chain. */
h1::after {
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.3em;
  margin-left: 0.3em;
  background:
    radial-gradient(circle at 12% 50%, var(--cyan-2) 0 0.045em, transparent 0.055em),
    radial-gradient(circle at 42% 50%, var(--cyan) 0 0.075em, transparent 0.085em),
    radial-gradient(circle at 80% 50%, var(--brand) 0 0.115em, transparent 0.125em);
}
@media (forced-colors: active), print { h1::after { display: none; } }
.login-box h1::after { display: none; }

h2 {
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 1.125rem;
  color: var(--brand);
}

/* Content panels stay opaque; only the shell is translucent. */
section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  padding: var(--space-section) var(--space-section) 1.75rem;
  margin-bottom: 1.75rem;
}

body.login-page .topbar, body.login-page .app-sidebar { display: none; }
body.login-page main { padding: 0; max-width: none; margin: 0; }

.login-shell {
  display: flex;
  min-height: 100vh;
}

/* The navy brand panel gets depth from soft radial glows (a lighter navy
   top-left, logo cyan bottom-right) and an echo of the logo's dot chain
   drawn with plain CSS circles. Both are decorative, never animate and
   never capture input; forced colors and reduced transparency drop them. */
.login-brand {
  flex: 1 1 46%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
  padding: clamp(2rem, 5vw, 5rem);
  color: white;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle 420px at 12% 8%, rgba(42, 35, 144, 0.95), rgba(42, 35, 144, 0) 70%),
    radial-gradient(circle 520px at 92% 96%, rgba(33, 164, 211, 0.34), rgba(33, 164, 211, 0) 70%),
    radial-gradient(circle 300px at 70% 40%, rgba(33, 164, 211, 0.1), rgba(33, 164, 211, 0) 70%),
    var(--brand);
}
.login-brand__dots {
  position: absolute;
  z-index: -1;
  top: 24%;
  right: -9%;
  width: clamp(280px, 28vw, 500px);
  aspect-ratio: 1;
  background: url("/static/brand/dot-spiral-light.svg") center / contain no-repeat;
  opacity: 0.4;
  pointer-events: none;
}
@media (forced-colors: active), (prefers-reduced-transparency: reduce) {
  .login-brand__dots { display: none; }
  .login-brand { background: var(--brand); }
}

.login-brand__lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

.login-brand__logo {
  width: 230px;
  height: auto;
}

.login-brand__intro {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: 30rem;
  margin-bottom: 2rem;
}
/* The one cyan accent of the headline is a short rule above it: a mark,
   never the text colour. */
.login-brand__tagline {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-wrap: balance;
}
.login-brand__tagline::before {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin-bottom: 1.5rem;
  border-radius: 999px;
  background: var(--cyan);
}
.login-brand__projects {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.login-brand__projects li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--navy-label);
  font-size: 0.8125rem;
  font-weight: 500;
}
.login-brand__projects li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cyan-on-navy);
}

.login-panel {
  flex: 1 1 54%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: clamp(2rem, 5vw, 5rem);
  background:
    radial-gradient(circle 360px at 100% 0%, rgba(33, 164, 211, 0.08), rgba(33, 164, 211, 0) 70%),
    radial-gradient(circle 300px at 0% 100%, rgba(14, 7, 117, 0.05), rgba(14, 7, 117, 0) 70%),
    var(--bg);
}

.login-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  width: min(100%, 26rem);
}

.login-footer__label {
  font-size: 0.85rem;
  color: var(--muted);
}

.login-footer__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

.login-footer__link {
  display: inline-flex;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}
.login-footer__link:hover, .login-footer__link:focus-visible { opacity: 1; }

.login-footer__logo {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.login-panel .login-box {
  border: 1px solid var(--border);
  margin: 0;
  max-width: 27rem;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  box-shadow: 0 1px 2px rgba(14, 7, 117, 0.04), 0 24px 56px -28px rgba(14, 7, 117, 0.22);
}
.login-panel .login-box h1 { margin: 0 0 0.5rem; font-size: 1.875rem; letter-spacing: -0.02em; }
.login-box__lead { margin: 0 0 1.75rem; color: var(--muted); font-size: 0.9375rem; }
.login-panel .login-box form { gap: 1.25rem; }
.login-panel .login-box label { color: var(--ink-2); font-weight: 600; }
.login-panel .login-box input { min-height: 3rem; padding-inline: 0.95rem; font-size: 0.9375rem; }
/* Cyan focus ring: a 2px navy edge (the border plus a 1px navy shadow)
   wrapped in a 3px cyan band. Cyan reaches 3.07:1 on the white card and
   5.5:1 against the navy edge, so the ring meets 3:1 on every side. */
.login-panel .login-box input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 0 0 4px var(--cyan);
}
.login-panel .login-box button { align-self: stretch; min-height: 3rem; margin-top: 0.5rem; font-size: 0.9375rem; }

@media (max-width: 860px) {
  .login-shell { flex-direction: column; }
  .login-brand { flex: none; gap: 2rem; padding: 2.5rem 2rem; }
  .login-brand__logo { width: 190px; }
  .login-brand__intro { gap: 1.25rem; margin: 0; }
  .login-brand__tagline { font-size: 1.6rem; margin: 0; }
  .login-brand__tagline::before { margin-bottom: 1.1rem; }
  .login-brand__dots { right: -5rem; top: -3.5rem; transform: scale(0.75); transform-origin: top right; }
  .login-panel { flex: none; padding: 2.5rem 2rem; }
  .upload-grid { grid-template-columns: repeat(2, 1fr); }
}

/* The six Ventas Com tabs (about 575px) and the account links do not fit
   one topbar row below about 1120px: tighten the tabs first, then give
   them their own full-width row, wrapping on phones. */
@media (min-width: 1120px) and (max-width: 1199.98px) {
  .topbar .context-nav a { padding-inline: 0.6rem; }
}
@media (max-width: 1119.98px) {
  .topbar__main { flex-wrap: wrap; }
  .topbar .context-nav { order: 3; width: 100%; }
  .topbar .context-nav ul { flex-wrap: wrap; column-gap: 0; }
  .topbar .context-nav a { min-height: 2.75rem; padding-inline: 0.7rem; }
}

@media (max-width: 800px) {
  .app-sidebar { display: none; }
  .topbar { margin-left: 0; position: static; }
  .topbar__main { flex-wrap: wrap; }
  .topbar__main { align-items: center; padding-block: 0.45rem; }
  .topbar .context-nav a { min-height: 2.75rem; }
  .mobile-brand { display: block; width: 132px; height: auto; }
  .topbar .context-nav { order: 3; width: 100%; }
  .topbar .account-nav { order: 2; }
  main { margin-left: auto; max-width: none; }
  .mobile-workspace { display: block; border-top: 1px solid var(--border); background: var(--panel); }
  .mobile-workspace summary { display: flex; align-items: center; min-height: 2.75rem; padding: 0.45rem 1.75rem; color: var(--brand); font-weight: 600; cursor: pointer; list-style: none; }
  .mobile-workspace summary::-webkit-details-marker { display: none; }
  .mobile-workspace summary::after { content: '⌄'; margin-left: auto; font-size: 1.2rem; }
  .mobile-workspace[open] summary::after { transform: rotate(180deg); }
  .mobile-workspace .workspace-nav { padding: 0.75rem 1rem 1rem; border-top: 1px solid var(--border); }
}

@media (max-width: 520px) {
  .topbar__main { padding: 0.5rem 1rem; flex-wrap: wrap; }
  .mobile-brand { width: 112px; }
  .topbar .account-nav { flex: 1; justify-content: flex-end; }
  .account-nav .user { min-width: 0; max-width: 8ch; }
  .mobile-workspace summary { padding-inline: 1rem; }
  main { padding-inline: 1rem; }
  main { padding-block: 1.75rem 3rem; }
  .upload-grid { grid-template-columns: 1fr; }
}

.login-box {
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  padding: 2.25rem;
  box-shadow: none;
}

.login-box form { display: flex; flex-direction: column; gap: 1.1rem; }
.login-box label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.875rem; font-weight: 500; color: var(--muted); }
.login-box input { width: 100%; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
select {
  min-height: 2.75rem;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--panel);
  font: inherit;
  font-size: 0.875rem;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

select {
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235d6172' stroke-width='1.5' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  cursor: pointer;
}

select {
  accent-color: var(--brand);
}
select option {
  padding: 0.5rem 0.75rem;
  color: var(--text);
  background: var(--panel);
}
select option:hover,
select option:focus {
  background: var(--ring);
  color: var(--text);
}
select option:checked {
  background: var(--brand);
  color: white;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring);
}

/* Custom listbox that replaces <select> via select.js: the browser's own
   dropdown popup is OS-rendered and can't be restyled, so this is a real
   DOM listbox instead. The <select> stays in the DOM (display:none) as
   the form field and as a no-JS fallback -- see the plain `select` rules
   above. */
.custom-select {
  position: relative;
  display: inline-block;
}

/* The native select stays in the DOM for form submission. Hidden by rule, not
   only by the inline style select.js sets: htmx restores `style` on elements
   that keep their id across a swap, which would resurrect the native control. */
.custom-select > select { display: none; }
.custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--panel);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.custom-select__trigger::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 10px;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235d6172' stroke-width='1.5' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* No option chosen (a pending value in the inline editor): a muted prompt. */
.custom-select__trigger:empty::before { content: "Elige…"; color: var(--muted); font-weight: 400; }
.custom-select__trigger:hover,
.custom-select__trigger:active {
  background: var(--panel);
  border-color: var(--accent);
}
.custom-select__trigger:focus-visible,
.custom-select__trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring);
}

.custom-select__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  box-shadow: none;
}

.custom-select__option {
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}
.custom-select__option:hover,
.custom-select__option:focus {
  outline: none;
  background: var(--navy-tint);
}
.custom-select__option[aria-selected="true"] {
  background: var(--brand);
  color: white;
}

.files-table td .inline-form .custom-select__trigger {
  min-height: 2rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
}
.files-table td .inline-form .custom-select__list {
  font-size: 0.85rem;
}

input[type="file"] {
  padding-block: 0.4rem;
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  padding: 0.4rem 0.85rem;
  margin-right: 0.75rem;
  border: none;
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}
input[type="file"]::file-selector-button:hover {
  background: var(--border);
}

button, .primary {
  padding: 0.7rem 1.3rem;
  border: none;
  border-radius: var(--radius-control);
  background: var(--brand);
  color: white;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}
button:hover, .primary:hover { background: var(--brand-hover); }
button:active, .primary:active { transform: scale(0.98); }
/* Cyan focus ring (mockup): a 4px cyan band hugging the navy button,
   framed by a 2px navy outline so every edge keeps 3:1 (cyan/navy 5.5:1,
   navy/page far above), including on the #f7f8fb page where bare cyan
   would reach only 2.9:1. */
button:focus-visible, .primary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px var(--cyan);
}

.error {
  background: var(--error-bg);
  color: var(--error-fg);
  padding: 0.65rem 1rem;
  border-radius: var(--radius-control);
}

.error-inline {
  color: var(--error-fg);
}

.success {
  background: var(--ok-bg);
  color: var(--ok-fg);
  padding: 0.65rem 1rem;
  border-radius: var(--radius-control);
}

.warning-box {
  background: var(--warn-bg);
  color: var(--warn-fg);
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-control);
  margin-bottom: 1.25rem;
}
.warning-box ul { margin: 0.4rem 0 0; padding-left: 1.4rem; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}
.badge-ok { background: var(--ok-bg); color: var(--ok-fg); }
.badge-warn { background: var(--warn-bg); color: var(--warn-fg); }
.badge-error { background: var(--error-bg); color: var(--error-fg); }

/* ==========================================================================
   Tables: ONE system for every <table> of the platform (.report-table and
   .files-table: Panel, Informe, Price Calculator, Ventas Com). Project and
   page rules below may set widths, sticky columns and state colours, never
   a second header style, size or density.

   Hierarchy, from the top of the page down:
     page title      h1                         2.25-2.75rem / 800, brand
     section title   h2 (panel heading)         ~1.1-1.4rem, brand
     subsection      h3                         1rem
     table header    th                         0.75rem / 600, ink-2, sentence
                                                case ("Precio venta (M)",
                                                never ALL CAPS), no tracking
     column group    th.col-groups (Facturas)   same size, tinted band, brand
     cell            td                         0.875rem / 500, tabular numbers
   Header convention: sentence case. It is the dominant pattern in the
   templates (and the only one that keeps units such as "€/t" and "kg/h"
   correct). Acronyms and proper nouns keep their capitals (REA, COMANTO).
   Numbers: th.num / td.num are right-aligned. Density: 10px 12px cells,
   2px rule under the header, 1px soft rule between rows, no zebra.
   ========================================================================== */
.files-table, .report-table {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.files-table th, .files-table td,
.report-table th, .report-table td {
  border-bottom: 1px solid var(--border-soft);
  padding: 10px 12px;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.files-table th, .report-table th {
  background: var(--bg);
  border-bottom: 2px solid var(--border);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  position: sticky;
  top: 0;
  z-index: 2;
}
.files-table th.num, .files-table td.num,
.report-table th.num, .report-table td.num { text-align: right; }
.files-table tbody tr:hover, .report-table tbody tr:hover {
  background: #fafbfd;
}

.upload-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin: 1.1rem 0;
  width: 100%;
}
.upload-grid label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; color: var(--muted); }

.upload-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.25rem;
}
.upload-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.meta-line { color: var(--muted); font-size: 0.9rem; }
.meta-line a { color: var(--brand); text-decoration: none; font-weight: 500; }
.meta-line a:hover { text-decoration: underline; }

/* position: relative makes the scroller the containing block of the
   visually hidden (absolute) labels in its cells, so they are clipped with
   the table instead of widening the whole page. */
.table-scroll { overflow-x: auto; position: relative; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.users-page main { max-width: 1080px; }
.users-page section { border-radius: var(--radius-panel); box-shadow: none; }
.users-page .user-directory,
.users-page .add-user-section { background: var(--panel); }
.users-page input:focus,
.users-page select:focus,
.users-page button:focus-visible,
.users-page .custom-select__trigger:focus-visible,
.users-page .custom-select__trigger[aria-expanded="true"] {
  box-shadow: none;
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.users-page .custom-select__list { box-shadow: none; }
.page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin: 0 0 2rem;
}
.page-heading h1 { margin-bottom: 0.35rem; }
.page-heading p,
.section-heading p,
.edit-group__heading p,
.protected-account p,
.danger-zone p { margin: 0; color: var(--muted); line-height: 1.55; }
.user-count {
  flex: none;
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--navy-tint);
  color: var(--brand);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.section-heading { margin-bottom: 1.25rem; }
.section-heading h2 { margin: 0 0 0.35rem; font-size: 1.15rem; }

.user-directory { padding: 0; overflow: hidden; }
.user-directory > .section-heading { padding: 1.5rem 1.5rem 0; }
.user-list { border-top: 1px solid var(--border); }
.user-record + .user-record { border-top: 1px solid var(--border); }
.user-record__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, auto) auto;
  align-items: center;
  gap: 1.5rem;
  min-height: 5.25rem;
  padding: 1rem 1.5rem;
  cursor: pointer;
  list-style: none;
}
.user-record[open] { background: var(--panel); }
.user-record__summary::-webkit-details-marker { display: none; }
.user-record__summary:hover { background: #fafbfd; }
.user-record__summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -3px;
}
.user-record__identity { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.user-record__identity strong { overflow-wrap: anywhere; font-size: 0.98rem; }
.user-record__role { color: var(--muted); font-size: 0.85rem; }
.user-record__date { color: var(--muted); font-size: 0.85rem; }
.user-record__toggle { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--brand); font-size: 0.85rem; font-weight: 600; }
.user-record__toggle::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.user-record[open] .user-record__toggle::after { transform: rotate(225deg); }
.when-open { display: none; }
.user-record[open] .when-closed { display: none; }
.user-record[open] .when-open { display: inline; }
.user-record[open] .user-record__summary { border-bottom: 1px solid var(--border); }
.user-record__editor { padding: 0 1.5rem; background: #fafbfd; }

.edit-group { display: grid; grid-template-columns: minmax(12rem, 0.38fr) minmax(0, 0.62fr); gap: 2.5rem; padding: 1.75rem 0; }
.edit-group + .edit-group { border-top: 1px solid var(--border); }
.edit-group__heading h3,
.protected-account h3,
.danger-zone h3 { margin: 0 0 0.35rem; font-size: 0.98rem; }
.edit-group__heading p,
.protected-account p,
.danger-zone p { font-size: 0.88rem; }
.access-form fieldset { margin: 0; padding: 0; border: 0; }
.project-access-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; }
.checkbox-label { display: flex; align-items: center; gap: 0.65rem; min-height: 2.25rem; cursor: pointer; }
.checkbox-label span { overflow-wrap: anywhere; }
.checkbox-label input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--brand); }
.checkbox-label input:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.form-actions { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
.access-form__submit { white-space: nowrap; }
.account-settings { display: grid; gap: 1.25rem; }
.setting-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1rem; }
.setting-form label,
.add-user-form label { display: flex; flex-direction: column; gap: 0.4rem; color: var(--muted); font-size: 0.88rem; }
.setting-form label { min-width: 0; }
.setting-form .custom-select,
.setting-form input { width: 100%; }
.secondary-button {
  border: 1px solid var(--brand);
  background: var(--panel);
  color: var(--brand);
}
.secondary-button:hover { background: var(--navy-tint); }
.danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid #d9958d;
}
.danger-button { border: 1px solid #b33b2d; background: var(--panel); color: #9a2a1c; white-space: nowrap; }
.danger-button:hover { background: var(--error-bg); color: var(--error-fg); }
.protected-account { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.75rem 0; }
.protected-account > strong { color: var(--ok-fg); font-size: 0.88rem; white-space: nowrap; }

.add-user-form__fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(10rem, 0.7fr); gap: 1rem; }
.add-user-section { border-left: 3px solid var(--accent); }
.add-user-form__fields > label { min-width: 0; }
.add-user-form input,
.add-user-form select,
.add-user-form .custom-select { width: 100%; }

.report-table td.notas-cell { min-width: 260px; color: var(--muted); }

.report-table .col-secondary { display: none; }
.report-table.show-secondary .col-secondary { display: table-cell; }
#toggle-columns { margin-bottom: 0.75rem; }

.table-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.margin-legend { color: var(--muted); font-size: 0.85rem; margin: 0.5rem 0 1rem; line-height: 1.7; }
.legend-swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  border: 1px solid var(--border);
  margin: 0 0.3rem 0 0.9rem;
  vertical-align: -0.05rem;
}
.legend-swatch:first-child { margin-left: 0; }

.files-table td .inline-form {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.15rem 1.25rem 0.15rem 0;
}
.files-table td .inline-form select,
.files-table td .inline-form input {
  min-height: 2rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
}
.files-table td .inline-form select { padding-right: 2rem; }

/* Price Calculator keeps the shell as its only translucent surface. */
.pricecalc-page .workflow-heading,
.pricecalc-report-page .workflow-heading { margin-bottom: 1.75rem; }
.workflow-heading h1 { margin: 0; }
.pricecalc-page section,
.pricecalc-report-page section { box-shadow: none; }
.workflow-section-heading h2,
.workflow-section-heading h3 { margin: 0; }
.workflow-section-heading h3 { font-size: 1rem; font-weight: 700; color: var(--ink-2); }
.pricecalc-page .source-section { padding: 0; overflow: hidden; }
.source-section > .workflow-section-heading { padding: 1.5rem 1.5rem 0; }
.pricecalc-page .upload-form {
  display: block;
  padding: 0 1.5rem 1.75rem;
}
.pricecalc-page .upload-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  margin: 1.5rem 0;
}
/* Upload cards (S13). Without JS each card shows its label and the native
   file input. dashboard.html adds .upload-form--enhanced, which visually
   hides the input (it stays focusable and labelled) and shows the card's
   file name and "Seleccionar archivo" control instead; the label's
   ::after stretches over the card so the whole card opens the picker. */
.upload-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.upload-card__body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 4.5rem;
  padding: 0.875rem 1rem;
  border: 1px dashed #c9cfdb;
  border-radius: var(--radius-card);
  background: var(--bg);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.upload-card__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--navy-tint);
  color: var(--brand);
}
.upload-card__icon svg { display: block; }
.upload-card__text { display: flex; flex: 1; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pricecalc-page .upload-card__label { display: block; color: var(--text); font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.upload-card__optional { color: var(--muted); font-weight: 500; }
.upload-card__file {
  display: none;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-card__button {
  display: none;
  flex-shrink: 0;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.85rem;
  border: 1px solid var(--brand);
  border-radius: 10px;
  background: var(--panel);
  color: var(--brand);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
/* No-JS fallback: the native input sits under the card, full width (it
   comes first in the DOM so the focus rule below can use `+`). */
.upload-card__input { order: 1; width: 100%; min-width: 0; margin-top: 0.5rem; font-weight: 400; }
.upload-form--enhanced .upload-card__input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}
.upload-form--enhanced .upload-card__file { display: block; }
.upload-form--enhanced .upload-card__button { display: inline-flex; }
.upload-form--enhanced .upload-card__label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.upload-form--enhanced .upload-card__body:hover,
.upload-card--dragover .upload-card__body { border-color: var(--cyan); background: var(--cyan-tint); }
.upload-form--enhanced .upload-card__body:hover .upload-card__button { background: var(--navy-tint); }
.upload-card--selected .upload-card__body { border-style: solid; border-color: var(--cyan-line); background: var(--cyan-tint); }
.upload-card--selected .upload-card__icon { background: var(--brand); color: var(--cyan-on-navy); }
.upload-card--selected .upload-card__file { color: var(--cyan-ink); font-weight: 600; }
/* Keyboard focus lands on the hidden input: ring the visible card with the
   same navy outline plus cyan band as the buttons (3:1 on every edge). */
.upload-form--enhanced .upload-card__input:focus-visible + .upload-card__body {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px var(--cyan);
}
.source-inventory { border-top: 1px solid var(--border); padding: 1.5rem; }
.source-inventory .table-scroll { margin-top: 0.75rem; }
.source-inventory .table-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pricecalc-page .files-table { min-width: 42rem; }
.pricecalc-page .files-table td:first-child { font-weight: 500; }
.pricecalc-page .files-table td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Status chips: a coloured dot plus a matching hairline, so the three
   states differ by more than the fill alone. */
.pricecalc-page .files-table .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 4px 11px 4px 9px;
  border: 1px solid transparent;
  font-size: 0.78rem;
}
.pricecalc-page .files-table .badge::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}
.pricecalc-page .files-table .badge-ok { border-color: #b5e0cf; }
.pricecalc-page .files-table .badge-warn { border-color: #f0d68f; }
.pricecalc-page .files-table .badge-error { border-color: #f3c1b9; }
.pricecalc-page .files-table .badge-error::before { border-radius: 2px; }
.calculation-section {
  display: grid;
  grid-template-columns: minmax(13rem, 0.4fr) minmax(0, 0.6fr);
  gap: 1.5rem;
  align-items: center;
}
.calculation-section__action h2 { margin: 0 0 1rem; }
/* The report action is the page's main call to action: a cyan-tinted
   card with the cyan line, a soft glow and a larger navy button. */
.pricecalc-page .calculation-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 2rem;
  border: 1px solid var(--cyan-line);
  background:
    radial-gradient(circle 260px at 0% 0%, rgba(33, 164, 211, 0.14), rgba(33, 164, 211, 0) 70%),
    radial-gradient(circle 220px at 100% 100%, rgba(14, 7, 117, 0.06), rgba(14, 7, 117, 0) 70%),
    linear-gradient(135deg, var(--panel) 0%, var(--cyan-tint) 100%);
}
.pricecalc-page .calculation-section__action h2 { font-size: 1.375rem; letter-spacing: -0.01em; }
.pricecalc-page .calculation-section__action .primary { min-height: 3rem; padding: 0.85rem 1.75rem; font-size: 0.9375rem; }
.pricecalc-page .calculation-section__result { border-left-color: var(--cyan-line); }
.pricecalc-page .calculation-section__result .meta-line { color: var(--ink-2); }
.calculation-section__result { border-left: 1px solid var(--border); padding-left: 1.5rem; }
.calculation-section__result .meta-line { margin: 0; line-height: 1.7; }
.calculation-section__result a,
.report-summary a { color: var(--brand); text-decoration: underline; text-underline-offset: 0.2rem; }
.report-summary { border-left: 3px solid var(--accent); }
.report-summary .meta-line { margin: 0; line-height: 1.8; color: var(--text); font-variant-numeric: tabular-nums; }
.report-results .table-actions { flex-wrap: wrap; margin-bottom: 1.25rem; }
.report-results #toggle-columns { margin-bottom: 0; }
.report-results .margin-legend { padding: 1rem 0; margin-bottom: 1.25rem; border-block: 1px solid var(--border); }
.report-results .table-scroll { max-height: 70vh; border: 1px solid var(--border); border-radius: var(--radius-control); }
.report-results .table-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.report-results .report-table { min-width: 65rem; font-variant-numeric: tabular-nums; }
.report-results .report-table th { white-space: nowrap; }
.report-results .report-table td { white-space: nowrap; }
.report-results .report-table td.notas-cell { white-space: normal; }

@media (max-width: 760px) {
  .pricecalc-page .upload-grid { grid-template-columns: 1fr; }
  .calculation-section { grid-template-columns: 1fr; }
  .calculation-section__result { border-left: 0; border-top: 1px solid var(--border); padding: 1.25rem 0 0; }
}
@media (max-width: 520px) {
  .login-brand { padding: 2rem 1.75rem; }
  .login-panel { padding: 2rem 1rem; }
  .login-panel .login-box { width: 100%; }
  .source-section > .workflow-section-heading { padding-inline: 1rem; }
  .pricecalc-page .upload-form { padding-inline: 1rem; }
  .upload-card__body { flex-wrap: wrap; }
  .upload-card__text { flex-basis: calc(100% - 3.5rem); }
  .upload-card__button { margin-left: 3.375rem; }
  .pricecalc-page .calculation-section { padding: 1.5rem 1rem; }
  .pricecalc-page .calculation-section__action .primary { width: 100%; }
  .source-inventory { padding-inline: 1rem; }
  .pricecalc-report-page .table-actions form,
  .pricecalc-report-page .table-actions form button { width: 100%; }
}

@media (max-width: 760px) {
  .users-page main { padding-inline: 1rem; }
  .page-heading { align-items: start; margin-bottom: 1.5rem; }
  .user-record__summary { grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem 1rem; padding-inline: 1rem; }
  .user-record__date { grid-column: 1 / -1; grid-row: 2; }
  .user-record__toggle { grid-column: 2; grid-row: 1; }
  .user-record__editor { padding-inline: 1rem; }
  .edit-group { grid-template-columns: 1fr; gap: 1.25rem; }
  .project-access-list { grid-template-columns: 1fr; }
  .setting-form { grid-template-columns: 1fr; align-items: stretch; }
  .setting-form button { justify-self: start; }
  .danger-zone,
  .protected-account { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .add-user-form__fields { grid-template-columns: 1fr; }
  .form-actions { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .page-heading { display: block; }
  .user-count { display: block; margin-top: 0.75rem; }
  .user-directory > .section-heading { padding-inline: 1rem; }
  .user-record__summary { min-height: 4.75rem; grid-template-columns: minmax(0, 1fr) auto; }
  .user-record__toggle { align-self: start; }
  .users-page .add-user-section { padding-inline: 1rem; }
}

/* Ventas Com retains the shell as the only translucent surface. */
.ventas-com-page section,
.ventas-com-dashboard-page section { box-shadow: none; }
.ventas-com-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: 1.75rem;
}
.ventas-com-heading h1 { margin: 0; }
.ventas-com-heading .primary { display: inline-block; text-decoration: none; white-space: nowrap; }
.ventas-com-group { padding: 0; overflow: hidden; }
.ventas-com-group__heading { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.ventas-com-group__heading h2 { margin: 0; }
.ventas-com-group__hint { margin: 0; padding: 0.75rem 1.5rem 0; color: var(--muted); font-size: 0.9rem; }
.ventas-com-page .report-table { min-width: 82rem; font-variant-numeric: tabular-nums; }
.ventas-com-page .table-scroll:focus-visible,
.ventas-com-dashboard-page .table-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ventas-com-empty { border-left: 3px solid var(--accent); }
.ventas-com-empty h2 { margin: 0; }
.ventas-com-units { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--muted); }
/* Reference pages open with an info note (mockup Materiales): cyan tint and
   line, text in --cyan-ink (plain cyan fails contrast as text). */
.ventas-com-heading + .ventas-com-units {
  margin: 0 0 1.5rem;
  padding: 14px 18px;
  border: 1px solid var(--cyan-line);
  border-radius: 16px;
  background: var(--cyan-tint);
  color: var(--cyan-ink);
  line-height: 1.55;
}
/* The Facturas unit legend sits under the period heading, aligned with it,
   as a full-width cyan note band. */
.ventas-com-group > .ventas-com-units {
  margin: 0;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--cyan-line);
  background: var(--cyan-tint);
  color: var(--cyan-ink);
}
/* No-access page: the notice and the list of granted projects. */
main > h1 + .error { max-width: 62ch; }
main > h1 + .error + section ul { margin: 0; padding-left: 1.25rem; line-height: 1.8; }
.ventas-com-period {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.ventas-com-period select { width: auto; }

/* A `pendiente` cell must read as pending without relying on color:
   the literal text, italic, and a dashed amber outline on the pending
   fill (the forced-colors block keeps the outline visible). */
.ventas-com-pending {
  display: inline-block;
  padding: 3px 8px;
  border: 1px dashed var(--warn-line);
  border-radius: var(--radius-chip);
  background: var(--warn-bg);
  color: var(--warn-fg);
  font-style: italic;
  font-size: 0.8125rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.ventas-com-page .report-table td.num { text-align: right; }
.ventas-com-page .report-table td.invoice-cell { vertical-align: top; }

/* Inline edit forms and disclosure widgets used by the orders, invoices
   and reference-data views. */
.ventas-com-page .inline-form {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}
.ventas-com-page .inline-form input,
.ventas-com-page .inline-form select {
  min-height: 2rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  min-width: 0;
}
.ventas-com-page .inline-form input[inputmode="decimal"] { width: 7rem; text-align: right; }
.ventas-com-page .inline-form button { padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.ventas-com-edit { display: inline-block; }
.ventas-com-edit > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.75rem;
  padding: 0 0.4rem;
  border-radius: var(--radius-chip);
  cursor: pointer;
  color: var(--brand);
  font-size: 0.85rem;
  font-weight: 600;
  list-style: none;
}
.ventas-com-edit > summary:hover { background: var(--navy-tint); }
.ventas-com-edit > summary::-webkit-details-marker { display: none; }
.ventas-com-edit > summary::after { content: "\25B8"; font-size: 0.75em; }
.ventas-com-edit[open] > summary::after { content: "\25BE"; }
.ventas-com-edit > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* An open edit form is the focused editor of the mockup: cyan 2px frame on
   white with a soft navy shadow. */
.ventas-com-edit[open] > .inline-form {
  margin-top: 0.4rem;
  padding: 0.5rem;
  border: 2px solid var(--cyan);
  border-radius: var(--radius-control);
  background: var(--panel);
  box-shadow: 0 12px 32px rgba(14, 7, 117, 0.1);
}

/* Ventas Com tables: header and density come from the shared table system;
   only the scroll frame is specific. The scroller gets a height so the
   header rows stay visible while scrolling. */
.ventas-com-page .table-scroll { max-height: calc(100vh - 12rem); overflow: auto; }
.ventas-com-pending { padding: 1px 8px; line-height: 1.25; }

/* Facturas: each invoice is one block. Alternating tint by invoice, a firm
   rule between invoices, two sticky header rows (column groups, then
   columns) and the first three columns pinned while scrolling sideways. */
.ventas-com-invoices { border-collapse: separate; border-spacing: 0; min-width: 96rem; }
.ventas-com-invoices thead tr.col-groups th {
  top: 0;
  height: 2rem;
  padding: 0 12px;
  background: var(--navy-tint);
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ventas-com-invoices thead tr.col-groups th:first-child { border-left: 0; }
.ventas-com-invoices thead tr.col-groups th span {
  margin-left: 0.4rem;
  color: var(--cyan-ink);
  font-weight: 500;
}
.ventas-com-invoices thead tr:nth-child(2) th { top: 2rem; background: var(--bg); }
.ventas-com-invoices tbody tr.inv-a { background: var(--panel); }
.ventas-com-invoices tbody tr.inv-b { background: #f3f7fb; }
.ventas-com-invoices tbody tr:hover > td { box-shadow: inset 0 0 0 999px rgba(14, 7, 117, 0.03); }
.ventas-com-invoices tbody tr.inv-start > td { border-top: 2px solid var(--border); }
.ventas-com-invoices tbody tr:first-child > td { border-top: 0; }
.ventas-com-invoices td { border-bottom: 1px solid var(--border-soft); }
.ventas-com-invoices td.invoice-cell { vertical-align: top; }
.ventas-com-invoices td.col-factura { color: var(--brand); }
.ventas-com-invoices .col-pedido,
.ventas-com-invoices .col-fecha,
.ventas-com-invoices .col-nconten,
.ventas-com-invoices .col-factura { position: sticky; z-index: 1; background: inherit; box-sizing: border-box; }
.ventas-com-page .ventas-com-invoices thead th.col-pedido,
.ventas-com-page .ventas-com-invoices thead th.col-fecha,
.ventas-com-page .ventas-com-invoices thead th.col-nconten,
.ventas-com-page .ventas-com-invoices thead th.col-factura { z-index: 4; background: var(--bg); }
.ventas-com-invoices .col-factura { left: 0; width: 8rem; min-width: 8rem; max-width: 8rem; }
.ventas-com-invoices .col-pedido { left: 8rem; width: 7rem; min-width: 7rem; max-width: 7rem; }
.ventas-com-invoices .col-fecha { left: 15rem; width: 6.25rem; min-width: 6.25rem; max-width: 6.25rem; }
.ventas-com-invoices .col-nconten { left: 21.25rem; width: 5rem; min-width: 5rem; max-width: 5rem; border-right: 1px solid var(--border); }

/* Pedidos: the order number is the row's identifier, styled like the invoice
   number in Facturas (brand colour, regular weight) and kept in view on horizontal scroll. */
.ventas-com-orders tbody tr { background: var(--panel); }
.ventas-com-orders td.col-pedido { color: var(--brand); }
.ventas-com-orders .col-pedido {
  position: sticky; left: 0; z-index: 1; background: inherit; box-sizing: border-box;
  width: 7rem; min-width: 7rem; max-width: 7rem; border-right: 1px solid var(--border);
}
.ventas-com-page .ventas-com-orders thead th.col-pedido { z-index: 4; background: var(--bg); }

/* Spreadsheet-style editing (ventas_com_edit.js). With JS on, the "Editar"
   disclosure is hidden and the whole cell is the editor: double click,
   Enter or F2 swaps the value for the form's input. Without JS the
   disclosure above keeps working.
   Like a spreadsheet, the table never moves while editing: the value stays
   in flow (only hidden) so the column keeps its width and the row its
   height, and the editor covers exactly the cell box (inset 0) with the
   cell's own font, alignment and padding. Long text scrolls inside the
   input; the editor's select is the app's custom dropdown (select.js),
   whose trigger fills the editor box and whose option list floats with
   fixed positioning, so it never resizes the cell. */
.vc-js .vc-cell { position: relative; cursor: cell; }
.vc-js .vc-cell:not(.vc-editing) > .ventas-com-edit { display: none; }
.vc-js .vc-cell:hover:not(.vc-editing) { background: var(--cyan-tint); }
.vc-js .vc-cell::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-top: 7px solid var(--cyan-mark);
  border-left: 7px solid transparent;
  opacity: 0.55;
  pointer-events: none;
}
.vc-js .vc-cell:hover::after { opacity: 1; }
.vc-js .vc-cell:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.vc-js .vc-cell.vc-editing {
  background: var(--panel);
  z-index: 3;
}
.vc-js .vc-cell.vc-editing::after { display: none; }
.vc-js .vc-cell.vc-editing > .vc-value { visibility: hidden; }
.vc-js .vc-cell.vc-editing > .ventas-com-edit {
  display: block;
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: auto;
  height: auto;
  margin: 0;
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--cyan);
}
.vc-js .vc-cell.vc-editing > .ventas-com-edit > summary { display: none; }
/* The form is pinned to the editor box too: percentage heights do not
   resolve through the <details> content slot. */
.vc-js .vc-cell.vc-editing .inline-form {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
}
.vc-js .vc-cell.vc-editing .inline-form button[type=submit] { display: none; }
.vc-js .vc-cell.vc-editing .inline-form input,
.vc-js .vc-cell.vc-editing .inline-form select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
}
/* background-color only: keeps the global select chevron. */
.vc-js .vc-cell.vc-editing .inline-form select { padding-right: 2rem; background-color: transparent; }
/* The custom dropdown (select.js) fills the editor box exactly; its option
   list floats (fixed, see select.js) so the cell never resizes. */
.vc-js .vc-cell.vc-editing .inline-form .custom-select,
.report-table tr.vc-new-row .custom-select {
  display: block;
  width: 100%;
  height: 100%;
}
.vc-js .vc-cell.vc-editing .inline-form .custom-select__trigger,
.report-table tr.vc-new-row .custom-select__trigger {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
}
.report-table tr.vc-new-row .custom-select__trigger { min-height: 2.75rem; }
.vc-js .vc-cell.vc-editing .inline-form .custom-select__trigger:focus-visible,
.vc-js .vc-cell.vc-editing .inline-form .custom-select__trigger[aria-expanded="true"] { outline: none; box-shadow: none; }
.report-table tr.vc-new-row .custom-select__trigger:focus-visible,
.report-table tr.vc-new-row .custom-select__trigger[aria-expanded="true"] { outline: none; box-shadow: inset 0 0 0 2px var(--cyan); }
.custom-select--floating > .custom-select__list {
  position: fixed;
  z-index: 70;
  top: 0;
  left: 0;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  box-shadow: 0 14px 36px rgba(14, 7, 117, 0.16), 0 2px 6px rgba(14, 7, 117, 0.06);
}
.vc-js .vc-cell.vc-editing .inline-form input:focus,
.vc-js .vc-cell.vc-editing .inline-form select:focus { outline: none; box-shadow: none; }
.vc-js .vc-cell.vc-saving { opacity: 0.6; }
.vc-js td.num .vc-error { left: auto; right: 0; }
.vc-error {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 5;
  width: max-content;
  max-width: 20rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--error-fg);
  border-radius: var(--radius-chip);
  background: var(--error-bg);
  box-shadow: 0 8px 24px rgba(14, 7, 117, 0.15);
  color: var(--error-fg);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  white-space: normal;
}
@keyframes vc-saved-flash {
  from { background: var(--ok-bg); box-shadow: inset 0 0 0 2px var(--ok-fg); }
  to { background: transparent; box-shadow: inset 0 0 0 2px transparent; }
}
.vc-js .vc-cell.vc-saved { animation: vc-saved-flash 2s ease-out; }
/* Header of an editable column: pencil icon in the brand cyan mark. */
.ventas-com-page th.is-editable .edit-icon {
  margin-left: 0.35rem;
  vertical-align: -1px;
  color: var(--cyan-mark);
}

/* Reference pages (Materiales, Manipulación, Fletes): narrow tables, pending
   rows listed first and marked by a warning bar on their first cell. */
.ventas-com-page .report-table.ventas-com-reference-table { min-width: 0; }
.ventas-com-page .report-table tr.is-pending > td { background: var(--warn-tint); }
.ventas-com-page .report-table tr.is-pending > td:first-child { border-left: 3px solid var(--warn-line); }
.ventas-com-empty-note { margin: 0; padding: 1.25rem 1.5rem; color: var(--muted); }

/* Manual creation of reference rows (odd/tasks/ventas-com-reference-create.md).
   The group heading holds the "+ Nuevo …" button on its right, quiet
   (outlined) so the table stays the subject. With JS the button inserts an
   editable row at the top of the table whose fields fill each cell box like
   the spreadsheet editor (cyan inset frame); without JS the <details> form
   under the table does the same job. */
.ventas-com-group__heading:has(.vc-create-button:not([hidden])) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
}
.vc-create-button {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--brand);
  background: var(--panel);
  color: var(--brand);
  white-space: nowrap;
}
.vc-create-button:hover { background: var(--navy-tint); }
.vc-creating .vc-create-button { visibility: hidden; }
.ventas-com-pending-notice {
  margin: -0.75rem 0 1.5rem;
  color: var(--warn-fg);
  font-size: 0.875rem;
  font-weight: 600;
}
.ventas-com-pending-notice::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--warn-line);
  vertical-align: 0.05rem;
}
.vc-js .ventas-com-create { display: none; }
.ventas-com-create { padding: 0.9rem 1.5rem; border-top: 1px solid var(--border); }
.ventas-com-create > summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: 0.875rem; }
.ventas-com-create__form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem 1rem;
  margin-top: 0.75rem;
}
.ventas-com-create__form label { display: flex; flex-direction: column; gap: 0.35rem; color: var(--muted); font-size: 0.85rem; }
.vc-empty-row > td.ventas-com-empty-note { padding: 1.25rem 1.5rem; }
.vc-creating .vc-empty-row { display: none; }
.report-table tr.vc-new-row > td {
  position: relative;
  height: 2.75rem;
  padding: 0;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--cyan-line);
}
.report-table tr.vc-new-row > td:empty { box-shadow: inset 0 -1px 0 var(--border); }
.report-table tr.vc-new-row input,
.report-table tr.vc-new-row select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
}
.report-table tr.vc-new-row select { padding-right: 2rem; }
.report-table tr.vc-new-row input:focus,
.report-table tr.vc-new-row select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--cyan); }
.report-table tr.vc-new-row.vc-saving { opacity: 0.6; }

.dashboard-empty { text-align: left; border-left: 3px solid var(--accent); }
.dashboard-empty h2 { margin-top: 0; font-size: 1.2rem; }
.dashboard-empty p { color: var(--muted); line-height: 1.65; max-width: 62ch; }

.section-title { margin: 0 0 0.35rem; font-size: 1.1rem; }
.section-subtitle { margin: 0 0 1.25rem; color: var(--muted); font-size: 0.9rem; }

.kpi-section .section-title { margin-bottom: 1.25rem; }
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.kpi-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--panel);
}
.kpi-tile__label { color: var(--muted); font-size: 0.8125rem; }
.kpi-tile__value {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  overflow-wrap: anywhere;
}
.kpi-tile--negative .kpi-tile__value { color: var(--error-fg); }
.kpi-tile--positive .kpi-tile__value { color: var(--ok-fg); }
.kpi-tile__secondary { color: var(--muted); font-size: 0.75rem; }
/* "Pendiente de completar" spans two columns so the 4-column grid closes
   its second row; it resets to one column in the 520px tier. */
.kpi-tile--wide { grid-column: span 2; }
/* Margen neto is the one highlighted card: navy fill with lilac, white and
   cyan-on-navy text (each above 7:1 on navy; plain cyan and the amber
   #7a5600 would fail there, so the pending note uses the pale warn tone). */
.kpi-tile--featured {
  background: var(--brand);
  border-color: var(--brand);
}
.kpi-tile--featured .kpi-tile__label { color: var(--navy-label); }
.kpi-tile--featured .kpi-tile__value { color: #ffffff; }
.kpi-tile--featured .kpi-tile__secondary { color: var(--cyan-on-navy); }
/* Waterfall bars reuse the six chart tiers above; the component names sit
   in an HTML row whose five columns match the SVG's equal slots. */
.unit-breakdown-chart { margin-top: 0.5rem; }
.chart-value-label { fill: var(--text); font-size: 13px; font-family: inherit; font-variant-numeric: tabular-nums; }
.chart-value-label--net { fill: var(--cyan-ink); font-weight: 600; }
.unit-breakdown__labels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}
.unit-breakdown__labels li { padding: 0 2px; }
/* Narrow panels (the xs and sm chart tiers): smaller labels, and never a
   break inside a word ("Manipulación" may overhang its slot by a few px). */
@container (max-width: 458.98px) {
  .unit-breakdown__labels { font-size: 11px; }
}
.unit-breakdown__labels li:last-child { color: var(--brand); font-weight: 600; }
.unit-breakdown__empty { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.875rem; }

.chart-section { display: flex; flex-direction: column; gap: 1.5rem; }
.chart-section { container-type: inline-size; }
.chart-section > .section-title { margin-bottom: 0; }
.chart-panel { padding-top: 0.25rem; min-width: 0; container-type: inline-size; }
.chart-panel--primary { padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.chart-panel__title { margin: 0 0 0.85rem; font-size: 1rem; }

/* Chart panels select the nearest fluid viewBox design tier from their own
   inline width, not the viewport. The sidebar changes that width
   independently of window size. SVGs stay aria-hidden; each chart's
   single accessible data table remains outside the variant selection. */
.svg-chart { display: none; width: 100%; height: auto; }
@container (max-width: 339.98px) { .svg-chart.bar-xs { display: block; } }
@container (min-width: 340px) and (max-width: 458.98px) { .svg-chart.bar-sm { display: block; } }
@container (min-width: 459px) and (max-width: 611.98px) { .svg-chart.bar-md { display: block; } }
@container (min-width: 612px) and (max-width: 815.98px) { .svg-chart.bar-lg { display: block; } }
@container (min-width: 816px) and (max-width: 1087.98px) { .svg-chart.bar-xl { display: block; } }
@container (min-width: 1088px) { .svg-chart.bar-xxl { display: block; } }

.chart-grid-line { stroke: var(--border); stroke-width: 1; }
.chart-baseline { stroke: var(--muted); stroke-width: 1; }
.chart-axis-label { fill: var(--muted); font-size: 13px; font-family: inherit; }

.breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 2.5rem;
}
.breakdown-section .section-title { margin-bottom: 1.25rem; }
.breakdown-panel { min-width: 0; padding-top: 1rem; border-top: 1px solid var(--border); }
.breakdown-panel__title { margin: 0 0 0.9rem; font-size: 0.95rem; }
.ranking-list { display: flex; flex-direction: column; gap: 0.6rem; }
/* Flex + order/wrap, not grid: at normal widths label/bar/value sit on
   one line (order 1/2/3, bar-track flexes to fill the middle). Past the
   600px breakpoint below, the bar-track's flex-basis forces it onto its
   own full-width line while label+value (both auto-width) share the
   line above them -- exactly "name + value on one line, bar below",
   with no change to the markup, only which flex-basis wins. */
.ranking-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.3rem;
}
.ranking-row__label { order: 1; flex: 0 1 auto; min-width: 6rem; font-size: 0.88rem; overflow-wrap: anywhere; }
.ranking-row__bar-track {
  order: 2;
  flex: 1 1 10rem;
  display: block;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--navy-tint);
}
.ranking-row__bar {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 999px;
  background: var(--accent);
}
.ranking-row__value {
  order: 3;
  margin-left: auto;
  min-width: 0;
  font-size: 0.85rem;
  text-align: right;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.ranking-row__secondary { color: var(--muted); }
.ranking-empty { color: var(--muted); font-size: 0.88rem; margin: 0; }

@container (max-width: 600px) {
  .ranking-row__label { order: 1; flex: 1 1 auto; min-width: 0; }
  .ranking-row__value { order: 2; margin-left: 0; }
  .ranking-row__bar-track { order: 3; flex: 1 1 100%; }
}

.dashboard-table-section .report-table td .badge { font-variant-numeric: tabular-nums; }
.dashboard-table-section .table-scroll { border: 1px solid var(--border); border-radius: 8px; }
/* A sensible min-width + nowrap cells, not a responsive card layout:
   this app already scrolls every wide table this way (.table-scroll,
   used site-wide since before this feature), so a dashboard-specific
   card layout would be a second, inconsistent mobile table pattern for
   no real benefit -- these two tables are dense reference data (7-8
   numeric/short-text columns) that reads fine as a scrollable table and
   poorly as a stack of repeated field labels. min-width keeps every
   column at a readable width instead of the browser shrinking them
   below their content (which was clipping "Tn" and wrapping contract
   numbers across 3 lines). */
.dashboard-report-table { min-width: 44rem; }
.dashboard-report-table td,
.dashboard-report-table th { white-space: nowrap; }

/* --- Panel de gestión (premium pass) -------------------------------------
   One bold element, the navy figures band; everything around it is quiet:
   sections without frames on the page background, hairline separators,
   muted captions and tabular figures. Scoped to the dashboard page so the
   shared KPI cards of Stock patios keep their own look. */
.ventas-com-dashboard-page main > section,
.ventas-com-dashboard-page main > details {
  margin: 0 0 3.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.ventas-com-dashboard-page main > section.dashboard-empty {
  padding: var(--space-section);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-panel);
  background: var(--panel);
}
.ventas-com-dashboard-page .section-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
}

.dash-header {
  display: flex;
  flex-wrap: wrap;
  /* Title at the top, like every other page heading (.ventas-com-heading). */
  align-items: start;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  margin-bottom: 2rem;
}
/* Same title size as every other page (global h1); only the margin is local. */
.dash-header h1 { margin: 0; }
.dash-header__period { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.95rem; }

.dash-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}
.dash-filters__field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.dash-filters__field > label { color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.dash-filters select,
.dash-filters .custom-select { width: 11rem; max-width: 100%; }
.dash-filters__field:first-child select,
.dash-filters__field:first-child .custom-select { width: 7.5rem; }
.dash-filters .custom-select__trigger {
  min-height: 2.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(14, 7, 117, 0.06);
}
.dash-filters .custom-select__list { max-width: 18rem; box-shadow: 0 12px 32px rgba(14, 7, 117, 0.12); }
.dash-filters .custom-select__option { overflow: hidden; text-overflow: ellipsis; }
.dash-filters__clear {
  align-self: center;
  margin-top: 1.2rem;
  color: var(--brand);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}
.dash-filters__clear:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* KPI cards (odd/tasks/ventas-com-dashboard-v2.md): four light sheets with
   navy tabular figures; the brand colours appear only as marks (the
   sparkline that bleeds off each card's bottom edge). The comparison chip
   pairs its colour with an arrow, a sign and sr-only text. */
.ventas-com-dashboard-page main > section.dash-kpis { margin-bottom: 1.5rem; }
/* Named so the card-level rules below can still query the page width once
   each card is its own container. */
.ventas-com-dashboard-page main { container-name: page; }
.dash-kpis__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem;
}
.dash-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.25rem 1.25rem 0;
  overflow: hidden;
  container-type: inline-size;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(14, 7, 117, 0.04), 0 12px 32px -20px rgba(14, 7, 117, 0.18);
}
.dash-kpi__label {
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dash-kpi__value {
  margin: 0;
  color: var(--brand);
  /* The figure scales with its own card (cqi of .dash-kpi) so a 7-digit
     "-1.234.567 €" fits a ~200px card instead of being clipped. The plain
     size is the fallback where container units are unsupported. */
  font-size: 1.375rem;
  font-size: clamp(1.25rem, 15cqi, 2.375rem);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash-kpi__delta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.dash-kpi__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}
.dash-kpi__chip > [aria-hidden="true"] { font-size: 0.7em; }
.dash-kpi__delta--up .dash-kpi__chip { background: var(--ok-bg); color: var(--ok-fg); }
.dash-kpi__delta--down .dash-kpi__chip { background: var(--error-bg); color: var(--error-fg); }
.dash-kpi__delta--flat .dash-kpi__chip { background: var(--navy-tint); color: var(--ink-2); }
.dash-kpi__delta--none { font-style: italic; }
.dash-kpi__secondary { margin: 0.5rem 0 1.25rem; color: var(--muted); font-size: 0.8125rem; line-height: 1.45; }
/* The trend: full card width, flush with the bottom edge. */
.dash-kpi__trend { position: relative; height: 3rem; margin: auto -1.25rem 0; }
.dash-kpi__spark { display: block; width: 100%; height: 3rem; }
.dash-kpi__spark-area { opacity: 0.1; }
.dash-kpi__spark-line { stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.dash-kpi__spark-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -5.5px 0 0 -5.5px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  box-sizing: content-box;
}

/* One-line notices under the band: an amber dot, the sentence, the action. */
.dash-notices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 3.5rem;
  padding: 0 0.25rem;
  list-style: none;
}
.dash-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  color: var(--ink-2);
  font-size: 0.9rem;
}
.dash-notice__text::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: var(--warn-line);
  vertical-align: 0.05em;
}
.dash-notice__action {
  color: var(--brand);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: var(--cyan-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25rem;
  transition: text-decoration-color 0.15s ease;
}
.dash-notice__action:hover { text-decoration-color: var(--brand); }
.dash-notice__action:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.dash-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.25rem;
}
.dash-section-note { margin: 0; color: var(--muted); font-size: 0.8125rem; }
.dash-legend { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; color: var(--ink-2); font-size: 0.8125rem; }
.dash-legend__item { display: inline-flex; align-items: center; gap: 0.5rem; }
.dash-legend .legend-swatch { width: 10px; height: 10px; margin: 0; border-radius: 3px; }

/* Chart and breakdown sit on white sheets without borders. */
.ventas-com-dashboard-page .chart-section { gap: 0; }
.ventas-com-dashboard-page .chart-panel--primary,
.ventas-com-dashboard-page .breakdown-grid,
.ventas-com-dashboard-page .dashboard-table-section .table-scroll {
  padding: 1.75rem 2rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(14, 7, 117, 0.04);
}
.ventas-com-dashboard-page .chart-panel--primary .dash-section-note { margin-bottom: 0.75rem; }
.ventas-com-dashboard-page .chart-grid-line { stroke: var(--border-soft); stroke-dasharray: 2 4; }
.ventas-com-dashboard-page .chart-baseline { stroke: var(--border); }
.ventas-com-dashboard-page .chart-axis-label { font-size: 12px; font-variant-numeric: tabular-nums; }
/* Monthly lines: 2.5px strokes over a fading area; every point carries its
   value in a <title> and grows on hover; the last month is filled. */
.chart-line { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-point__hit { fill: transparent; }
.chart-point__dot { fill: var(--panel); stroke-width: 2; transition: r 0.15s ease; }
.chart-band { fill: var(--text); opacity: 0.06; rx: 6; }
.chart-point--selected .chart-point__dot,
.chart-point--last .chart-point__dot,
.chart-point--single .chart-point__dot { fill: var(--point-color); stroke: var(--panel); stroke-width: 2.5; }
.chart-point:hover .chart-point__dot { r: 6; }
.chart-point__halo { opacity: 0.14; }
.chart-point__value { fill: var(--text); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ventas-com-dashboard-page .breakdown-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 3rem; }
.ventas-com-dashboard-page .breakdown-panel { padding-top: 0; border-top: 0; }
.ventas-com-dashboard-page .breakdown-panel__title {
  margin-bottom: 1.25rem;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ventas-com-dashboard-page .breakdown-section > .section-title { margin-bottom: 1.25rem; }
/* Top 5 + Otros: name, amount and share on one line (tabular, aligned
   right), a thin rounded bar below. */
.ventas-com-dashboard-page .ranking-list { gap: 1rem; }
.ventas-com-dashboard-page .ranking-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 3.5rem;
  align-items: baseline;
  column-gap: 0.75rem;
  row-gap: 0.4rem;
}
.ventas-com-dashboard-page .ranking-row > * { order: 0; }
.ventas-com-dashboard-page .ranking-row__label { min-width: 0; overflow: hidden; color: var(--text); font-size: 0.875rem; text-overflow: ellipsis; white-space: nowrap; }
.ventas-com-dashboard-page .ranking-row__value { margin: 0; color: var(--text); font-size: 0.875rem; font-weight: 650; text-align: right; white-space: nowrap; }
.ventas-com-dashboard-page .ranking-row__share { color: var(--muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; text-align: right; }
.ventas-com-dashboard-page .ranking-row__bar-track { order: 1; grid-column: 1 / -1; height: 0.25rem; background: var(--border-soft); }
.ventas-com-dashboard-page .ranking-row__bar { background: var(--cyan-mark); }
.ventas-com-dashboard-page .ranking-row--other .ranking-row__label,
.ventas-com-dashboard-page .ranking-row--other .ranking-row__value { color: var(--muted); font-weight: 500; }
.ventas-com-dashboard-page .ranking-row--other .ranking-row__bar { background: var(--muted); opacity: 0.45; }
.ranking-row__count { color: var(--muted); font-size: 0.8125rem; }
.ventas-com-dashboard-page .dashboard-table-section .table-scroll { padding: 0.25rem 0.75rem; }
.ventas-com-dashboard-page .dashboard-report-table td { font-variant-numeric: tabular-nums; }
.ventas-com-dashboard-page .dashboard-report-table tbody tr:last-child td { border-bottom: 0; }
/* "Agrupar por" reads inline with the section title. */
.dash-summary .dash-section-head { align-items: center; }
.dash-summary__group .dash-filters__field { flex-direction: row; align-items: center; gap: 0.6rem; }
.dash-summary__group .dash-filters__field select,
.dash-summary__group .dash-filters__field .custom-select { width: 9rem; }
/* Nine figures must fit the desktop frame: the unit drops to a second
   header line and the cells are a little tighter. */
.dash-summary .dashboard-report-table thead th {
  min-width: 5.5rem;
  white-space: normal;
  vertical-align: bottom;
  line-height: 1.35;
}
.dash-summary .dashboard-report-table th,
.dash-summary .dashboard-report-table td { padding-inline: 10px; }
/* Row labels are body cells, not header cells: no grey band, no sticky
   top; they stay pinned left while the figures scroll on small screens. */
.dash-summary .dashboard-report-table tbody th,
.dash-summary .dashboard-report-table tfoot th {
  top: auto;
  left: 0;
  z-index: 1;
  border-bottom: 1px solid var(--border-soft);
  background: var(--panel);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
}
.dash-summary .dashboard-report-table thead th:first-child { left: 0; z-index: 3; }
.dash-summary .dashboard-report-table tbody tr:hover th { background: #fafbfd; }
.dash-summary .dashboard-report-table tfoot th,
.dash-summary .dashboard-report-table tfoot td {
  border-top: 2px solid var(--border);
  border-bottom: 0;
  color: var(--brand);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dash-summary__pending { margin-top: 0.75rem; }
.dash-empty-note { margin: 0; padding: 1.25rem 1.75rem; border-radius: var(--radius-card); background: var(--panel); color: var(--muted); }

/* Filter change: the swapped-in figures and charts settle in once. */
@media (prefers-reduced-motion: no-preference) {
  .ventas-com-dashboard-page .dash-kpis,
  .ventas-com-dashboard-page .chart-section,
  .ventas-com-dashboard-page .breakdown-section { animation: dash-settle 0.32s ease-out both; }
  .ventas-com-dashboard-page .chart-section { animation-delay: 0.04s; }
  .ventas-com-dashboard-page .breakdown-section { animation-delay: 0.08s; }
  .ventas-com-dashboard-page .ranking-row__bar { transition: width 0.4s ease-out; }
}
@keyframes dash-settle {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Anatomía del €/kg: collapsed by default, at the end of the page. */
.ventas-com-dashboard-page .unit-breakdown-section > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
  list-style: none;
}
.ventas-com-dashboard-page .unit-breakdown-section > summary::-webkit-details-marker { display: none; }
.ventas-com-dashboard-page .unit-breakdown-section > summary .section-title::after {
  content: "\25B8";
  margin-left: 0.5rem;
  color: var(--muted);
  font-size: 0.8em;
}
.ventas-com-dashboard-page .unit-breakdown-section[open] > summary .section-title::after { content: "\25BE"; }
.ventas-com-dashboard-page .unit-breakdown-section > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.ventas-com-dashboard-page .unit-breakdown-section > .chart-panel {
  max-width: 48rem;
  padding: 1.25rem 1.75rem 1.5rem;
  border-radius: var(--radius-card);
  background: var(--panel);
}

@container (max-width: 1100px) {
  /* Two wide cards over three: no orphan fifth card. */
  .dash-kpis__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dash-kpi { grid-column: span 2; }
  .dash-kpi:nth-child(-n + 2) { grid-column: span 3; }
  .ventas-com-dashboard-page .breakdown-grid { grid-template-columns: 1fr; }
}
@container (max-width: 560px) {
  .dash-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .dash-filters select,
  .dash-filters .custom-select,
  .dash-filters__field:first-child select,
  .dash-filters__field:first-child .custom-select { width: 100%; }
  .dash-filters__clear { grid-column: 1 / -1; margin-top: 0; justify-self: start; }
  .dash-kpis__grid { grid-template-columns: minmax(0, 1fr); gap: 0.875rem; }
  .dash-kpi,
  .dash-kpi:nth-child(-n + 2) { grid-column: auto; }
  .dash-summary .dash-section-head { align-items: flex-start; }
  .dash-filters.dash-summary__group { display: flex; width: auto; }
  /* The pinned label column may wrap so the figures keep room to scroll. */
  .dash-summary .dashboard-report-table tbody th { min-width: 8rem; max-width: 9.5rem; white-space: normal; }
  .dash-summary .dashboard-report-table thead th:first-child,
  .dash-summary .dashboard-report-table tbody th,
  .dash-summary .dashboard-report-table tfoot th { box-shadow: inset -1px 0 0 var(--border); }
  .dash-summary__group .dash-filters__field select,
  .dash-summary__group .dash-filters__field .custom-select { width: 9rem; }
  .ventas-com-dashboard-page main > section,
  .ventas-com-dashboard-page main > details { margin-bottom: 2.5rem; }
  .ventas-com-dashboard-page .chart-panel--primary,
  .ventas-com-dashboard-page .breakdown-grid { padding: 1.25rem 1rem; }
}
/* Card descendants query the page, not their own card. */
@container page (max-width: 560px) {
  .dash-kpi__trend { height: 2.5rem; }
  .dash-kpi__spark { height: 2.5rem; }
}

@container (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .breakdown-grid { grid-template-columns: 1fr; }
}

@container (max-width: 520px) {
  .kpi-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .kpi-tile--wide { grid-column: auto; }
}

/* These page grids depend on the workspace width, not the device width. */
@container (max-width: 700px) {
  .pricecalc-page .upload-grid,
  .pricecalc-page .calculation-section,
  .users-page .edit-group,
  .users-page .add-user-form__fields { grid-template-columns: minmax(0, 1fr); }
  .calculation-section__result { border-left: 0; border-top: 1px solid var(--border); padding: 1.25rem 0 0; }
  .edit-group { gap: 1.25rem; }
}

/* Price Calculator master-data screens (pricecalc-master-data). Values
   typed by the business read as plain text; values the application
   computes carry the brand colour and a dotted rule, so a reader can tell
   an input from a result at a glance. `pendiente` never reads as 0. */
.pc-page section { box-shadow: none; }
.pc-heading { margin-bottom: 1.25rem; max-width: 72ch; }
.pc-heading h1 { margin-bottom: 0.5rem; }
.pc-lede { margin: 0; color: var(--muted); }
.pc-back { margin: 0 0 0.75rem; font-size: 0.9rem; }
/* Content links read navy, like the rest of the application. */
.pc-back a, .pc-group__heading p a, .pc-page .report-table a:not(.pc-history) { color: var(--brand); text-underline-offset: 0.2em; }
.pc-tabs ul { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 1.25rem; padding: 0; list-style: none; border-bottom: 1px solid var(--border); }
.pc-tabs a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 3px 0.9rem 0; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.92rem; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.pc-tabs a:hover { color: var(--brand); background: var(--navy-tint); border-radius: var(--radius-chip) var(--radius-chip) 0 0; }
/* Same cue as the topbar tab: a cyan underline plus weight, never cyan text. */
.pc-tabs a[aria-current="page"] { color: var(--brand); font-weight: 700; border-bottom-color: var(--cyan); }
.pc-tabs a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-chip); }
.pc-month { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1.25rem; font-size: 0.9rem; }
.pc-month label { color: var(--muted); }
.pc-month input[type="month"] { min-height: 2.75rem; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-control); font: inherit; font-size: 0.875rem; background: var(--panel); color: var(--text); }
.pc-month input[type="month"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pc-month input[type="month"], .pc-month select { width: auto; }
.pc-month button { min-height: 2.75rem; padding: 0 1.1rem; font-size: 0.875rem; }
.pc-group__heading .pc-month { margin: 0.75rem 0 0; }
.pc-readonly { margin: 0 0 1.25rem; padding: 0.7rem 1rem; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-control) var(--radius-control) 0; background: var(--navy-tint); color: var(--ink-2); font-size: 0.9rem; max-width: 72ch; }
.pc-group { padding: 0; overflow: hidden; }
.pc-group__heading { padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--border); }
.pc-group__heading h2 { margin: 0; }
.pc-group__heading p { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.9rem; max-width: 80ch; }
.pc-subheading { margin: 0; padding: 1.25rem 1.5rem 0.5rem; font-size: 1rem; font-weight: 700; color: var(--ink-2); }
.pc-note { margin: 0; padding: 0.9rem 1.5rem; background: var(--warn-tint); border-bottom: 1px dashed var(--warn-line); color: var(--warn-fg); font-size: 0.9rem; }
.pc-empty { margin: 0; padding: 1.25rem 1.5rem; color: var(--muted); }
.pc-summary { margin: 0 0 1rem; color: var(--muted); }
.pc-page .report-table.pc-table { font-variant-numeric: tabular-nums; }
.pc-page .report-table.pc-table--wide { min-width: 48rem; }
/* Wide tables wrap their text cells so the last column stays inside the panel. */
.pc-page .report-table.pc-table--wide td:not(.num) { white-space: normal; }
/* Tables sit flush in their panel: the outer cells line up with the panel heading. */
.pc-group .report-table th:first-child, .pc-group .report-table td:first-child { padding-left: 1.5rem; }
.pc-group .report-table th:last-child, .pc-group .report-table td:last-child { padding-right: 1.5rem; }
.pc-page .report-table td.num, .pc-page .report-table th.num { text-align: right; white-space: nowrap; }
.pc-page .report-table tr.is-pending > td { background: var(--warn-tint); }
.pc-page .report-table tr.is-pending > td:first-child { border-left: 3px solid var(--warn-line); }
.pc-page .report-table tfoot th { border-top: 2px solid var(--border); }
.pc-page .table-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* Header of a computed column: a cyan-tint chip with dark cyan ink (never plain cyan text). */
.pc-page .report-table th.pc-computed-col { background: var(--cyan-tint); color: var(--cyan-ink); font-weight: 600; }
.pc-computed { color: var(--brand); font-weight: 600; border-bottom: 1px dotted currentColor; }
.pc-unit { color: var(--muted); font-size: 0.85em; }
.pc-muted { color: var(--muted); }
.pc-warn { color: var(--error-fg); font-weight: 600; }
.pc-pending { display: inline-block; padding: 1px 8px; border: 1px dashed var(--warn-line); border-radius: var(--radius-chip); background: var(--warn-bg); color: var(--warn-fg); font-style: italic; font-size: 0.8125rem; line-height: 1.4; }
.pc-inferred { display: inline-block; margin-left: 0.35rem; padding: 1px 8px; border: 1px solid var(--cyan-line); border-radius: 999px; background: var(--cyan-tint); color: var(--cyan-ink); font-size: 0.75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.pc-page .pc-grid th.pc-grid__step, .pc-page .pc-grid td.pc-grid__mark { text-align: center; }
.pc-grid__mark strong { font-weight: 700; }
.pc-history { font-size: 0.82rem; color: var(--muted); white-space: nowrap; }
.pc-history:hover, .pc-history:focus-visible { color: var(--brand); }
.pc-gaps { margin: 0 0 1.25rem; padding: 1rem 1.25rem; border: 1px dashed var(--warn-line); border-radius: var(--radius-card); background: var(--warn-tint); color: var(--warn-fg); }
.pc-gaps h2 { margin: 0 0 0.35rem; font-size: 1rem; color: var(--warn-fg); }
.pc-gaps ul { margin: 0; padding-left: 1.2rem; }
/* The one emphatic element: the monthly Estructura, override against computed. */
.pc-structure__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1px; background: var(--border); }
.pc-figure { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.25rem 1.5rem; background: var(--panel); }
.pc-figure__label { color: var(--muted); font-size: 0.9rem; }
.pc-figure__value { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--muted); }
.pc-figure__value small { font-size: 0.95rem; font-weight: 600; }
.pc-figure.is-applied { box-shadow: inset 0 3px 0 var(--cyan); }
.pc-figure.is-applied .pc-figure__value { color: var(--brand); font-weight: 700; }
.pc-figure__note { color: var(--muted); font-size: 0.85rem; }
.pc-figure .badge { align-self: flex-start; }
.pc-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 0 1.75rem; }
/* Split panels are narrow: let descriptive cells wrap instead of being clipped. */
.pc-split .report-table td { white-space: normal; }
.pc-split .report-table td.num { white-space: nowrap; }
.pc-timeline { margin: 0; padding: 0; list-style: none; }
.pc-timeline__item { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); }
.pc-timeline__item:last-child { border-bottom: 0; }
.pc-timeline__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0 0 0.5rem; font-size: 0.9rem; }
.pc-timeline__meta span:first-of-type { font-weight: 600; }
.pc-diff { display: grid; gap: 0.2rem; margin: 0; font-size: 0.88rem; }
.pc-diff div { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: 1rem; }
.pc-diff dt { color: var(--muted); }
.pc-diff dd { margin: 0; font-variant-numeric: tabular-nums; }
.pc-diff del { color: var(--error-fg); }
.pc-diff ins { text-decoration: none; font-weight: 600; }
/* Monthly price file upload (/precios/ventas, /precios/compras). */
.pc-upload { margin-bottom: 1.25rem; }
.pc-upload__form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 1.1rem 1.5rem; }
.pc-upload__form .error { flex-basis: 100%; margin: 0; }
.pc-upload__form label { color: var(--muted); font-size: 0.9rem; }
.pc-upload__form input[type="file"] { flex: 1 1 18rem; min-width: 0; }
.pc-upload__form input[type="file"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 720px) {
  .pc-group__heading, .pc-subheading, .pc-empty, .pc-note, .pc-timeline__item, .pc-figure { padding-inline: 1rem; }
  .pc-group .report-table th:first-child, .pc-group .report-table td:first-child { padding-left: 1rem; }
  .pc-group .report-table th:last-child, .pc-group .report-table td:last-child { padding-right: 1rem; }
  .pc-diff div { grid-template-columns: 1fr; gap: 0; }
}

/* Stock de patios Configuración. Tables take the platform's single table
   style (.report-table; the page body also carries .ventas-com-page for the
   scroll frame and inline editing); these rules only size the narrower
   stock tables, add the patio form row and the zone editor fields. */
.stock-patios-page .stock-config-table { min-width: 0; }
.stock-patios-page .report-table tr.is-inactive > td { color: var(--muted); }
.stock-patios-page .report-table td a { color: var(--brand); font-weight: 600; text-underline-offset: 0.2em; }
.stock-muted { color: var(--muted); font-weight: 500; }
.stock-group-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.stock-group-heading .primary { display: inline-block; text-decoration: none; white-space: nowrap; }
.stock-add-form { max-width: 34rem; padding: 1.25rem 1.5rem; }
.stock-add-form label { display: flex; flex-direction: column; gap: 0.4rem; color: var(--muted); font-size: 0.88rem; }
.stock-empty { padding: 1.25rem 1.5rem; margin: 0; color: var(--muted); }
.ventas-com-group > .stock-model-note { margin: 0; padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--cyan-line); background: var(--cyan-tint); color: var(--cyan-ink); }
.stock-capacity { border-left: 3px solid var(--accent); }
.stock-capacity__value { margin: 0.25rem 0; font-size: 1.6rem; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.stock-capacity__basis { margin: 0; color: var(--muted); font-size: 0.9rem; max-width: 70ch; }
.stock-zone-editor { padding-block: 0.25rem; }
.stock-zone-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; align-content: start; }
.stock-zone-fields label { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; color: var(--muted); font-size: 0.88rem; }
.stock-zone-fields input, .stock-zone-fields select, .stock-zone-fields .custom-select { width: 100%; }
.stock-zone-fields input[inputmode="decimal"] { text-align: right; font-variant-numeric: tabular-nums; }
.stock-zone-fields__wide { grid-column: 1 / -1; }
.stock-zone-fields textarea {
  width: 100%;
  padding: 0.65rem 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--panel);
  font: inherit;
  font-size: 0.875rem;
  color: var(--text);
  resize: vertical;
}
.stock-zone-fields textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }
.stock-zone-fields [aria-invalid="true"] { border-color: var(--error-fg); }

/* Stock de patios photo points and calibration: the "Rejilla" summary, the
   points table and form, and the calibration page (reference image with
   click markers, pixel table, preview). Existing tokens only; the markers
   use the brand cyan for the required marks and the warning line colour
   for the optional back corners. */
.stock-grid-inline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem; margin: 0; color: var(--muted); font-size: 0.88rem; }
.stock-grid-inline strong, .stock-grid-summary strong { color: var(--brand); font-variant-numeric: tabular-nums; }
.stock-points-table__hint { max-width: 22rem; white-space: normal; }
.stock-calibration-cell, .stock-points-cell { white-space: nowrap; }
.stock-calibration-cell a, .stock-points-cell a { margin-left: 0.5rem; }
.stock-points-cell a:first-child { margin-left: 0; }
.stock-points-cell .ventas-com-pending, .stock-points-cell .stock-muted { margin-left: 0.4rem; font-size: 0.8rem; }
.stock-point-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; align-items: end; padding: 1.25rem 1.5rem; }
.stock-point-form label { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; color: var(--muted); font-size: 0.88rem; }
.stock-point-form input { width: 100%; }
.stock-point-form__wide, .stock-point-form__help, .stock-point-form .form-actions { grid-column: 1 / -1; }
.stock-point-form__help { margin: 0; color: var(--muted); font-size: 0.85rem; max-width: 70ch; }
.stock-point-form .form-actions { margin: 0; }
.stock-zone-grid { border-left: 3px solid var(--accent); }
.stock-zone-grid .stock-group-heading { margin-bottom: 0.75rem; }
.stock-zone-grid .section-title { margin: 0; }
.stock-grid-summary { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 0 0 1rem; }
.stock-grid-summary div { display: flex; flex-direction: column; gap: 0.15rem; }
.stock-grid-summary dt { color: var(--muted); font-size: 0.8rem; }
.stock-grid-summary dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.stock-grid-missing { margin: 0 0 1rem; color: var(--muted); }
.stock-point-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.stock-point-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.6rem 0.85rem; border: 1px solid var(--border-soft); border-radius: var(--radius-control); background: var(--cyan-tint); }
.stock-point-list li.is-inactive { background: var(--panel); color: var(--muted); }
.stock-point-list a { margin-left: auto; color: var(--brand); font-weight: 600; text-underline-offset: 0.2em; }
.stock-mark-code { display: inline-block; min-width: 1.9rem; padding: 1px 6px; border-radius: var(--radius-chip); background: var(--brand); color: #fff; font-size: 0.78rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.page-heading .stock-calibration-status { margin: 0; }
.stock-calibration-grid { padding-block: 0.85rem; border-left: 3px solid var(--accent); }
.stock-calibration-grid p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem; margin: 0; color: var(--muted); }
.stock-calibration-grid strong { color: var(--brand); }
.stock-calibration-grid a { color: var(--brand); font-weight: 600; }
.stock-calibration-step .section-title, .stock-calibration-preview .section-title { margin-top: 0; }
.stock-reference-form { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; margin: 1rem 0 0; }
.stock-reference-form label { display: flex; flex-direction: column; gap: 0.4rem; color: var(--muted); font-size: 0.88rem; min-width: 0; max-width: 100%; }
.stock-retention-choice { margin-top: 1rem; }
.stock-retention-choice > p { margin: 0 0 0.5rem; }
.stock-point-list li.is-selected { border-color: var(--brand); background: var(--navy-tint); }
.stock-point-list li .badge { margin-left: auto; }
.stock-stored-calibration { margin-top: 1rem; }
.stock-stored-calibration summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.stock-stored-calibration .pc-diff { margin-top: 0.75rem; }
.stock-calibrate { display: grid; gap: 0.75rem; }
.stock-calibrate__marks { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.stock-calibrate__marks[hidden] { display: none; }
.stock-calibrate__marks legend { padding: 0; margin-bottom: 0.4rem; color: var(--muted); font-size: 0.88rem; }
.stock-mark-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; border: 1px solid var(--cyan-line); border-radius: 999px; background: var(--panel); color: var(--ink-2); font-size: 0.85rem; cursor: pointer; }
.stock-mark-chip:has(input:checked) { border-color: var(--brand); background: var(--navy-tint); color: var(--brand); font-weight: 700; }
.stock-mark-chip input { accent-color: var(--brand); }
.stock-calibrate__stage { position: relative; max-width: 100%; line-height: 0; border-radius: var(--radius-control); overflow: hidden; border: 1px solid var(--border); background: var(--navy-tint); }
.stock-calibrate__stage img { display: block; width: 100%; height: auto; touch-action: manipulation; }
.is-enhanced .stock-calibrate__stage img { cursor: crosshair; }
.stock-calibrate__marker { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 2px solid #fff; border-radius: 50%; background: var(--cyan-mark); color: #fff; font-size: 0.62rem; font-weight: 800; line-height: 1; pointer-events: none; box-shadow: 0 0 0 1px var(--brand); }
.stock-calibrate__marker[hidden] { display: none; }
.stock-calibrate__marker.is-optional { background: var(--warn-line); color: var(--text); }
.stock-calibrate__size { margin: 0.5rem 0 1rem; font-size: 0.85rem; }
.stock-marks-table { margin-bottom: 1rem; }
.stock-marks-table .report-table { min-width: 0; }
.stock-marks-table th[scope="row"] { font-weight: 600; text-align: left; white-space: normal; }
.stock-marks-table .stock-mark-hint { white-space: normal; }
.stock-marks-table input { width: 7rem; text-align: right; font-variant-numeric: tabular-nums; }
.stock-marks-table tr.is-active > * { background: var(--cyan-tint); }
.stock-mark-hint { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 500; }
.stock-metres-fields { margin-bottom: 0.5rem; }
.stock-calibration-preview__image { display: block; width: 100%; height: auto; border-radius: var(--radius-control); border: 1px solid var(--border); }
/* Stock de patios Fotos (S07): mobile-first checklist, upload form and
   capture page. One card per zone led by its painted-sign letter; status
   chips reuse .badge with the existing ok / warn / error tokens. */
.stock-fotos-heading { margin-bottom: 1.25rem; }
.stock-fotos-notice { max-width: 62ch; }
.stock-fotos-zones { display: grid; gap: 1rem; }
.stock-fotos-zone { margin: 0; padding: 1rem; }
.stock-fotos-zone__header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.85rem; }
.stock-zone-letter { display: grid; place-items: center; flex-shrink: 0; width: 3rem; height: 3rem; border-radius: var(--radius-control); background: var(--brand); color: #fff; font-size: 1.5rem; font-weight: 800; line-height: 1; box-shadow: inset 0 -4px 0 var(--cyan-on-navy); }
.stock-fotos-zone__title { min-width: 0; }
.stock-fotos-zone__title h2 { margin: 0; }
.stock-fotos-zone__title p { margin: 0.1rem 0 0; color: var(--ink-2); font-size: 0.9rem; }
.stock-fotos-zone__progress { margin: 0 0 0 auto; padding: 3px 10px; border-radius: 999px; background: var(--navy-tint); color: var(--brand); font-size: 0.8rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stock-fotos-zone__progress.is-complete { background: var(--ok-bg); color: var(--ok-fg); }
.stock-fotos-zone__empty { margin: 0; color: var(--muted); }
.stock-fotos-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.stock-fotos-point { display: grid; gap: 0.75rem; padding: 0.85rem; border: 1px solid var(--border-soft); border-radius: var(--radius-card); background: var(--bg); }
.stock-fotos-point__info { min-width: 0; }
.stock-fotos-point__info > p { margin: 0; }
.stock-fotos-point__name { margin: 0; font-weight: 600; }
.stock-fotos-point__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin-top: 0.45rem !important; font-size: 0.85rem; }
.stock-fotos-point__note { margin-top: 0.3rem !important; color: var(--warn-fg); font-size: 0.85rem; }
.stock-fotos-point__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.stock-fotos-point__actions .primary { flex: 1 1 auto; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.stock-fotos-point__link { color: var(--brand); font-weight: 600; text-underline-offset: 0.2em; }
.stock-status { white-space: nowrap; }
.stock-status--warn { background: var(--warn-bg); color: var(--warn-fg); }
.stock-status--ok { background: var(--ok-bg); color: var(--ok-fg); }
.stock-status--error { background: var(--error-bg); color: var(--error-fg); }
.stock-status--info { background: var(--cyan-tint); color: var(--cyan-ink); box-shadow: inset 0 0 0 1px var(--cyan-line); }
.stock-status--none, .stock-status--muted { background: var(--panel); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
.stock-warnings { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0.45rem 0 0; padding: 0; }
.stock-warnings li { padding: 2px 8px; border: 1px dashed var(--warn-line); border-radius: var(--radius-chip); background: var(--warn-tint); color: var(--warn-fg); font-size: 0.8rem; font-weight: 600; }
.stock-hint { margin: 0.5rem 0 0; padding: 0.6rem 0.85rem; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-chip) var(--radius-chip) 0; background: var(--cyan-tint); color: var(--cyan-ink); font-size: 0.9rem; line-height: 1.5; max-width: 62ch; }
.stock-upload { display: grid; gap: 1rem; }
.stock-upload__step { margin: 0; padding: 1rem; }
.stock-upload__step .section-title { margin-top: 0; }
.stock-point-choice { border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--panel); display: grid; gap: 0.6rem; }
.stock-point-choice legend { float: left; width: 100%; padding: 0; color: var(--brand); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; }
.stock-point-choice > p { margin: 0; }
.stock-point-option { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 2.75rem; padding: 0.75rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg); cursor: pointer; }
.stock-point-option input { margin-top: 0.2rem; accent-color: var(--brand); width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.stock-point-option:has(input:checked) { border-color: var(--brand); background: var(--navy-tint); box-shadow: 0 0 0 1px var(--brand); }
.stock-point-option__body { display: grid; gap: 0.35rem; min-width: 0; }
.stock-point-option__body .stock-hint { margin: 0; }
.stock-guide__figure { margin: 0; display: grid; gap: 0.5rem; }
.stock-guide__figure figcaption { font-size: 0.85rem; }
.stock-outline { display: block; width: 100%; max-width: 26rem; height: auto; border-radius: var(--radius-control); background: var(--bg); }
.stock-outline__frame { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 6 5; }
.stock-outline__floor { stroke: var(--ink-2); stroke-width: 1.5; }
.stock-outline__unit { fill: var(--cyan-tint); stroke: var(--brand); stroke-width: 1.5; }
.stock-outline__detail { fill: none; stroke: var(--brand); stroke-width: 1.2; stroke-linecap: round; }
.stock-outline__post { stroke: var(--muted); stroke-width: 2; }
.stock-outline__mark { fill: none; stroke: var(--cyan-mark); stroke-width: 3; stroke-linecap: round; }
.stock-upload__card .upload-card__label { display: block; color: var(--text); font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.stock-upload__card .upload-card__text .stock-muted { font-size: 0.8125rem; }
/* The whole card opens the picker (the label stretches over it); the
   native input stays visible under it as the no-JS fallback. */
.stock-upload__card .upload-card__label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.stock-upload__card .upload-card__body:hover { border-color: var(--cyan); background: var(--cyan-tint); }
.stock-upload__card .upload-card__input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.stock-upload__actions { justify-content: stretch; }
.stock-upload__actions button { width: 100%; min-height: 3rem; font-size: 0.9375rem; }
.stock-capture-photos { display: grid; gap: 1rem; margin-bottom: 1rem; }
.stock-capture-photo { margin: 0; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--panel); }
.stock-capture-photo__frame { display: block; overflow: hidden; border-radius: var(--radius-control); background: var(--navy-tint); line-height: 0; }
.stock-capture-photo__frame img { display: block; width: 100%; height: auto; }
.stock-capture-photo__frame.is-purged { display: grid; place-items: center; aspect-ratio: 4 / 3; line-height: 1.4; border: 1px dashed var(--border); background: var(--bg); color: var(--muted); text-align: center; padding: 1rem; }
.stock-capture-photo__frame.is-purged p { margin: 0; }
.stock-capture-photo figcaption > p { margin: 0; }
.stock-capture-photo__meta { margin-top: 0.4rem !important; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.stock-capture-actions { flex-wrap: wrap; gap: 0.75rem; justify-content: flex-start; }
/* Fotos estimation status (S12): "Ver la rejilla" and "Reintentar" under a
   photo; the retry form is a plain POST form sized like the links. */
.stock-capture-photo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.6rem; }
.stock-retry-form { display: inline-flex; margin: 0; }
.stock-retry-form button { min-height: 2.75rem; }
.stock-capture-actions a { flex: 1 1 14rem; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.7rem 1.3rem; border-radius: var(--radius-control); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
/* Stock de patios Revisión (S13): the queue reuses the shared report table
   (ventas-com-page); these rules only lay out the summary, the row actions,
   the flag chips inside a cell and the three decision forms. */
.stock-revision-summary { margin: 0; padding: 3px 10px; border-radius: 999px; background: var(--navy-tint); color: var(--brand); font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stock-patios-page .stock-revision-table { min-width: 0; }
.stock-revision-table td { vertical-align: top; }
.stock-patios-page .stock-revision-table td[data-time-left] { white-space: normal; min-width: 7.5rem; }
.stock-revision-zone a { white-space: nowrap; }
.stock-revision-zone [data-date] { display: block; margin-top: 0.3rem; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.stock-revision-cells { min-width: 10.5rem; white-space: normal; color: var(--ink-2); font-size: 0.8rem; }
.stock-revision-cells span { display: block; white-space: nowrap; }
.stock-revision-cells .stock-revision-flags { margin-top: 0.4rem; }
.stock-revision-flags li { white-space: normal; }
.stock-revision-actions { white-space: nowrap; }
.stock-revision-actions form, .stock-revision-actions a { display: flex; margin: 0 0 0.35rem; }
.stock-revision-actions button { width: 100%; justify-content: center; }
.stock-revision-actions button { padding: 0.45rem 0.9rem; font-size: 0.85rem; }
.stock-revision-actions a { color: var(--brand); font-weight: 600; text-underline-offset: 0.2em; }
.stock-revision-kpis { margin-bottom: 1rem; }
/* Stock de patios Calibración (S20): the two tables fit the content width
   like the Revisión queue; the count form's date input takes the shared
   input look; the apply note sits inside the card padding. */
.stock-patios-page .stock-calibracion-table, .stock-patios-page .stock-calibracion-counts { min-width: 0; }
.stock-zone-fields input[type="date"] {
  min-height: 2.75rem;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--panel);
  font: inherit;
  font-size: 0.875rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stock-zone-fields input[type="date"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }
.stock-calibracion-note { margin: 0; padding: 1rem 1.5rem 1.25rem; color: var(--muted); font-size: 0.85rem; }
.stock-calibracion-counts td[data-estimate] { white-space: nowrap; }
#main-content > .stock-revision-flags { margin: 0 0 1rem; }
.stock-revision-page .kpi-tile .stock-revision-cells { font-size: 0.9rem; }
.stock-revision-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; padding: 1.25rem 1.5rem; }
.stock-decision-form { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6rem; margin: 0; padding: 1rem; border: 1px solid var(--border-soft); border-radius: var(--radius-card); background: var(--bg); }
.stock-decision-form p { margin: 0; }
.stock-decision-form label { display: flex; flex-direction: column; gap: 0.4rem; color: var(--muted); font-size: 0.88rem; }
.stock-decision-form input[inputmode="decimal"] { text-align: right; font-variant-numeric: tabular-nums; }
.stock-revision-readings { padding: 1.25rem 1.5rem; margin: 0; }
/* Stock de patios Dashboard (S16): the zone and material tables reuse the
   shared report table; the totals reuse the KPI tiles and the badges the
   ok / warn tokens. These rules only stack the basis badge, the freshness
   label and the staleness line in one cell, and mark incomplete totals. */
.stock-patios-page .stock-dashboard-table { min-width: 0; }
.stock-dashboard-table td { vertical-align: top; }
.stock-dashboard-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 1.25rem 1.5rem; }
.stock-dashboard-totals dd { margin: 0; }
.stock-patios-page .stock-dashboard-table td.stock-dashboard-basis { white-space: normal; min-width: 9.5rem; }
.stock-dashboard-basis > span { display: block; width: fit-content; }
.stock-dashboard-basis > span + span { margin-top: 0.3rem; }
.stock-dashboard-freshness { color: var(--warn-fg); font-size: 0.8rem; font-weight: 600; }
.stock-dashboard-basis .stock-muted { font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.stock-dashboard-incomplete { margin: 0; color: var(--warn-fg); font-size: 0.85rem; font-weight: 600; }
td > .stock-dashboard-incomplete { display: block; margin-top: 0.3rem; font-size: 0.8rem; white-space: normal; }
.stock-dashboard-page .stock-revision-summary a { color: inherit; text-underline-offset: 0.2em; }
.stock-dashboard-table .stock-warnings { margin: 0; }
/* Plano del patio (S17): a CSS grid of zone tiles (each an <a> with an
   inline SVG). Fills use the existing tokens: brand cyan for OK, the
   warning colour for REORDEN, neutral grey for missing data. Under 720px
   the grid stacks to one column (see the media query below). */
.plan-patio { margin: 0; padding: 1.25rem 1.5rem 0; }
.plan-patio__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: 0.75rem; color: var(--muted); font-size: 0.88rem; font-weight: 600; }
.plan-patio__totals { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.plan-patio__totals strong { color: var(--brand); }
.plan-grid { display: grid; grid-template-columns: repeat(var(--plan-cols, 1), minmax(0, 1fr)); gap: 12px; }
.plan-zone { --plan-fill: var(--cyan); --plan-line: var(--cyan-line); display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; padding: 0.75rem; border: 1px solid var(--plan-line); border-left-width: 4px; border-radius: var(--radius-card); background: var(--panel); color: var(--text); text-decoration: none; }
.plan-zone { grid-row: var(--plan-row); grid-column: var(--plan-col) / span var(--plan-span); }
.plan-zone:hover { border-color: var(--plan-fill); }
.plan-zone:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.plan-zone--reorden { --plan-fill: var(--warn-line); --plan-line: var(--warn-line); background: var(--warn-tint); }
.plan-zone--missing { --plan-fill: var(--muted); --plan-line: var(--border); background: var(--bg); }
.plan-zone__heading { font-weight: 700; color: var(--brand); }
.plan-zone__drawing { display: block; width: 100%; height: auto; max-height: 9rem; }
.stock-patios-page .stock-dashboard-table td[data-photo] { white-space: normal; min-width: 7rem; }
.plan-zone__area { fill: var(--bg); stroke: var(--plan-line); stroke-width: 1; }
.plan-zone__cell { fill: none; stroke: var(--plan-line); stroke-width: 0.5; }
.plan-zone__cell--filled, .plan-zone__fill { fill: var(--plan-fill); stroke: var(--plan-fill); }
.plan-zone__ground, .plan-zone__hatch-line { stroke: var(--plan-fill); stroke-width: 1; }
.plan-zone__hatch { stroke: var(--plan-fill); stroke-width: 0.5; }
.plan-zone__labels { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: 0.82rem; color: var(--ink-2); }
.plan-zone__tonnage { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.plan-zone__state, .plan-zone__warning { color: var(--warn-fg); font-weight: 600; }
.plan-zone__photo { flex-basis: 100%; color: var(--muted); }
/* Zone detail (S18): reuses the KPI tiles, report tables and photo frame;
   only the 30-day bar chart, the material tiles and the cell counts are
   new, drawn with the plan's tokens (cyan estimates, brand counts, warning
   corrections). */
.stock-zone-material { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stock-zone-note { margin: 0 1.5rem 1rem; }
.stock-zone-series { margin: 0; padding: 1.25rem 1.5rem 0.75rem; }
.stock-zone-series__chart { display: block; width: 100%; height: 10rem; border-radius: var(--radius-control); background: var(--bg); }
.stock-zone-series__baseline { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.stock-zone-series__bar--estimacion { fill: var(--cyan); }
.stock-zone-series__bar--conteo { fill: var(--brand); }
.stock-zone-series__bar--correccion { fill: var(--warn-line); }
.stock-zone-series figcaption { margin-top: 0.5rem; font-size: 0.82rem; }
.stock-zone-cells { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0 1.5rem 1.25rem; padding: 0; list-style: none; color: var(--ink-2); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.stock-zone-cells strong { color: var(--brand); }
.stock-zone-photo { max-width: 32rem; margin: 0 1.5rem 1.25rem; }
.stock-zone-page .stock-empty { margin: 0 1.5rem 1.25rem; }
@media (min-width: 721px) {
  .stock-fotos-zone, .stock-upload__step { padding: 1.25rem 1.5rem; }
  .stock-fotos-point { grid-template-columns: minmax(13rem, 1fr) auto; align-items: center; }
  .stock-fotos-point__actions { justify-content: flex-end; }
  .stock-fotos-point__actions .primary { flex: 0 0 auto; }
  .stock-upload { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .stock-upload > .stock-upload__step:last-child { grid-column: 1 / -1; }
  .stock-upload__actions { justify-content: flex-end; }
  .stock-upload__actions button { width: auto; min-height: 0; }
  .stock-capture-photos { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
  .stock-capture-actions a { flex: 0 0 auto; }
}
@media (min-width: 1200px) {
  .stock-fotos-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 720px) {
  .stock-dashboard-totals { grid-template-columns: 1fr; padding: 1rem; }
  .plan-patio { padding: 1rem 1rem 0; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan-zone { grid-row: auto; grid-column: auto; }
  .stock-zone-material { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stock-zone-note, .stock-zone-cells, .stock-zone-photo, .stock-zone-page .stock-empty { margin-inline: 1rem; }
  .stock-zone-series { padding: 1rem 1rem 0.5rem; }
  .stock-marks-table input { width: 5.25rem; padding-inline: 8px; }
  .stock-mark-hint { display: none; }
  .stock-point-list a { margin-left: 0; }
}

/* Accessibility preferences come last so they win the cascade over the
   component rules above (media queries add no specificity). */
@media (prefers-reduced-motion: reduce) {
  .vc-js .vc-cell.vc-saved { animation: none; background: var(--ok-bg); }
  .topbar nav a, .link-btn, .workspace-nav a, button, .primary, .dash-notice__action { transition: none; }
  button:active, .primary:active { transform: none; }
}

/* Forced colors override fills, so selection and focus fall back to
   system-color outlines and borders. */
@media (forced-colors: active) {
  .upload-card__body { border: 1px solid CanvasText; }
  .upload-form--enhanced .upload-card__input:focus-visible + .upload-card__body { outline: 2px solid CanvasText; }
  .workspace-nav a[aria-current] { forced-color-adjust: none; background: Highlight; color: HighlightText; outline: 2px solid Highlight; outline-offset: -2px; }
  .workspace-nav a[aria-current]:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
  /* Unselected tabs: forced colors would paint their transparent underline
     in the link colour, so hide it on Canvas; only the current tab keeps it. */
  .topbar .context-nav a { border-bottom-color: Canvas; }
  .topbar .context-nav a[aria-current="page"] { border-bottom-color: Highlight; }
  :focus-visible { outline: 2px solid CanvasText; }
  .ventas-com-pending { border: 1px dashed CanvasText; }
  .pc-pending { border: 1px dashed CanvasText; }
  .pc-tabs a { border-bottom-color: Canvas; }
  .pc-tabs a[aria-current="page"] { border-bottom-color: Highlight; }
  input[type]:focus-visible, select:focus-visible, button:focus-visible, .primary:focus-visible,
  .custom-select__trigger:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
}

/* Row delete / deactivate / reactivate (odd/tasks/ventas-com-delete-and-selects.md).
   A narrow last column; the trash icon shows on row hover or focus (always
   without JavaScript). With JavaScript the confirmation floats as a fixed
   popover beside the icon, so the row and the table never resize. */
.ventas-com-page .report-table th.vc-actions-th,
.ventas-com-page .report-table td.vc-row-actions {
  width: 1%;
  padding-left: 0.25rem;
  padding-right: 0.5rem;
  white-space: nowrap;
  text-align: right;
}
.vc-row-actions__inner { display: inline-flex; align-items: center; gap: 0.4rem; }
.vc-delete { display: inline-block; }
.vc-delete__trigger {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--muted);
  list-style: none;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.vc-delete__trigger::-webkit-details-marker { display: none; }
.vc-delete__trigger:hover,
.vc-delete[open] > .vc-delete__trigger { background: var(--error-bg); color: var(--error-fg); }
.vc-delete__trigger:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.vc-js .vc-delete__trigger { opacity: 0; }
.vc-js tr:hover .vc-delete__trigger,
.vc-js tr:focus-within .vc-delete__trigger,
.vc-js .vc-delete[open] > .vc-delete__trigger,
.vc-js .vc-delete__trigger:focus-visible { opacity: 1; }
@media (hover: none) { .vc-js .vc-delete__trigger { opacity: 0.7; } }

.vc-delete__popover {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--panel);
  font-size: 0.8125rem;
  text-align: left;
  white-space: normal;
}
.vc-js .vc-delete__popover {
  position: fixed;
  z-index: 60;
  min-width: 18rem;
  max-width: min(32rem, 90vw);
  width: max-content;
  box-shadow: 0 14px 36px rgba(14, 7, 117, 0.16), 0 2px 6px rgba(14, 7, 117, 0.06);
  animation: vc-pop-in 0.12s ease-out;
}
@keyframes vc-pop-in {
  from { opacity: 0; transform: translateY(2px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.vc-delete__popover [hidden] { display: none !important; }
.vc-delete__question { margin: 0; font-weight: 600; color: var(--text); }
.vc-delete__usage { margin: 0; color: var(--error-fg); font-weight: 500; line-height: 1.35; }
.vc-delete__buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.vc-danger-button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.vc-danger-button[aria-disabled="true"]:hover { background: var(--error-fg); }
.vc-delete[data-usage] .vc-secondary-button { background: var(--brand); color: #fff; }
.vc-delete[data-usage] .vc-secondary-button:hover { background: var(--brand); filter: brightness(1.15); }
.vc-row-error { color: var(--error-fg); font-weight: 600; font-size: 0.85em; margin-inline-start: 0.5rem; }
.vc-delete__popover form { margin: 0; }
.vc-danger-button,
.vc-secondary-button,
.vc-ghost-button,
.vc-chip-button {
  padding: 0.4rem 0.8rem;
  border-radius: 9px;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.vc-danger-button { background: var(--error-fg); color: #fff; }
.vc-danger-button:hover { background: #7f2116; }
.vc-secondary-button { border: 1px solid var(--brand); background: var(--panel); color: var(--brand); }
.vc-secondary-button:hover { background: var(--navy-tint); }
.vc-ghost-button { background: transparent; color: var(--muted); font-weight: 500; }
.vc-ghost-button:hover { background: var(--navy-tint); color: var(--text); }
html:not(.vc-js) [data-vc-delete-cancel] { display: none; }
.vc-chip-button {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--cyan-line);
  background: var(--cyan-tint);
  color: var(--cyan-ink);
  font-size: 0.75rem;
}
.vc-chip-button:hover { background: var(--cyan-line); }
.vc-reactivate { margin: 0; }

/* Deactivated rows: listed last under a divider, muted. */
.ventas-com-page .report-table tr.vc-inactive-divider > td {
  padding: 0.85rem 1rem 0.4rem;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ventas-com-page .report-table tr.is-inactive > td { background: var(--bg); color: var(--muted); }
.ventas-com-page .report-table tr.is-inactive > td:not(.vc-row-actions) { opacity: 0.72; }
.ventas-com-page .report-table tr.is-inactive .ventas-com-pending { opacity: 0.8; }

/* Dashboard: evolution chart with no invoice in its window (R3-empty-window). */
.dash-chart-empty {
  display: grid;
  place-items: center;
  min-height: 12rem;
  margin: 0.75rem 0 0;
  padding: 1.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

/* Article remap notice (odd/tasks/ventas-com-remap-and-handling.md, RH-1):
   one line under the remapped article row, amber like the pending notices,
   with Recalcular and Mantener beside the text. */
.ventas-com-page .report-table tr.vc-remap-row > td {
  padding: 0.5rem 1rem 0.65rem;
  background: var(--warn-bg);
  border-top: 0;
}
.vc-remap-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  color: var(--warn-fg);
  font-size: 0.8125rem;
  font-weight: 600;
}
.vc-remap-notice::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--warn-line);
}
.vc-remap-notice__text { flex: 1 1 24rem; }
.vc-remap-notice__form { margin: 0; }
.vc-remap-notice__dismiss { text-decoration: none; }

/* Manipulación (RH-2): the handling amount as one compact editable row, and
   the muted "por defecto" tag of a pair with no explicit value (Sí). */
.ventas-com-page .report-table.vc-setting-table { min-width: 0; width: 100%; }
.vc-setting-table td.vc-setting-note { width: 100%; }
.vc-setting-table th[scope="row"] {
  padding-right: 2rem;
  color: var(--text);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.vc-setting-table td.num { min-width: 8rem; }
.vc-setting-note { color: var(--muted); font-size: 0.8125rem; padding-left: 1.5rem; }
.vc-inherited {
  margin-left: 0.35rem;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

/* Margen objetivo (odd/tasks/ventas-com-margen-objetivo-premium.md, MO-2):
   the month switcher sits on the right of the page heading as one segmented
   control (‹ month ›) whose month opens a month-grid picker (one 4×3 grid
   per year, ‹ year › switches the grid, every month a link); the group
   heading carries the "N de M con objetivo" count and the copy action on its
   right; a row without target tags the estipulado it falls back to as "en
   uso". No overflow:hidden: the picker panel overflows. */
.vc-target-month {
  display: inline-flex;
  align-items: stretch;
  align-self: center;
  height: 2.5rem;
  margin: 0;
  border-radius: var(--radius-control);
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(14, 7, 117, 0.06);
}
.vc-target-month__step {
  display: grid;
  place-items: center;
  width: 2.5rem;
  border-radius: var(--radius-control);
  color: var(--brand);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
}
.vc-target-month__step:hover { background: var(--navy-tint); }
.vc-target-month__step:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.vc-month-picker { position: relative; display: flex; }
.vc-month-picker__trigger {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 11rem;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 1px 0 var(--border-soft), inset -1px 0 var(--border-soft);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vc-month-picker__trigger::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 10px;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235d6172' stroke-width='1.5' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.15s ease;
}
.vc-month-picker__trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
.vc-month-picker__icon { flex: none; color: var(--brand); }
.vc-month-picker__trigger:hover { background: var(--navy-tint); }
.vc-month-picker__trigger:focus-visible,
.vc-month-picker__trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--brand);
  border-radius: var(--radius-control);
  box-shadow: 0 0 0 4px var(--ring);
}
/* Centred under the trigger; the script nudges it (--vc-picker-shift) back
   inside the viewport on narrow screens. */
.vc-month-picker__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 50%;
  width: 17.5rem;
  padding: 0.6rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  box-shadow: 0 12px 32px rgba(14, 7, 117, 0.12);
  transform: translateX(calc(-50% + var(--vc-picker-shift, 0px)));
}
.vc-month-picker__panel[hidden],
.vc-month-picker__year[hidden] { display: none; }
.vc-month-picker__year-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.vc-month-picker__year-label { font-weight: 700; font-variant-numeric: tabular-nums; }
.vc-month-picker__year-step {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--brand);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.vc-month-picker__year-step:hover:not(:disabled) { background: var(--navy-tint); }
.vc-month-picker__year-step:disabled { color: var(--border); cursor: default; }
.vc-month-picker__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem;
}
.vc-month-picker__month {
  position: relative;
  display: grid;
  place-items: center;
  height: 2.6rem;
  border-radius: var(--radius-chip);
  color: var(--text);
  font-size: 0.875rem;
  text-decoration: none;
}
.vc-month-picker__month:hover { background: var(--navy-tint); }
.vc-month-picker__year-step:focus-visible,
.vc-month-picker__month:focus-visible,
.vc-month-picker__today:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Today's month: a cyan ring; the chosen month: filled like a selected option. */
.vc-month-picker__month.is-current { box-shadow: inset 0 0 0 1.5px var(--accent); }
.vc-month-picker__month.is-selected {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}
.vc-month-picker__month.is-selected.is-current { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent); }
.vc-month-picker__month.has-target::after,
.vc-month-picker__legend-dot {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan-mark);
}
.vc-month-picker__month.has-target::after { position: absolute; bottom: 5px; left: calc(50% - 2.5px); }
.vc-month-picker__month.is-selected.has-target::after { background: var(--cyan-on-navy); }
.vc-month-picker__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding: 0.5rem 0.25rem 0;
  border-top: 1px solid var(--border-soft);
  font-size: 0.8125rem;
}
.vc-month-picker__legend { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); }
.vc-month-picker__legend-dot { display: inline-block; }
.vc-month-picker__today {
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-chip);
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.vc-month-picker__today:hover { background: var(--navy-tint); }
.vc-target-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding-block: 0.95rem;
}
.vc-target-heading__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.85rem; }
.vc-target-heading__count { margin: 0; color: var(--muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.ventas-com-page .report-table td .vc-target-in-use { margin: 0 0.5rem 0 0; }

/* Stock de patios 3D view, one per patio on the dashboard (stock_patios_dashboard.html). */
.stock-3d { position: relative; margin-bottom: var(--space-section); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.stock-3d__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-soft); }
.stock-3d__toolbar p { margin: 0; font-size: 0.85rem; }
.stock-3d__canvas { height: min(70vh, 640px); min-height: 320px; }
.stock-3d__canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.stock-3d__tooltip { position: absolute; pointer-events: none; max-width: 18rem; padding: 0.5rem 0.75rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-chip); box-shadow: 0 6px 20px rgba(16, 16, 20, 0.12); font-size: 0.85rem; line-height: 1.4; }
.stock-3d__tooltip ul { margin: 0.25rem 0 0; padding-left: 1rem; color: var(--muted); }