/* Storewell — design v3 (owner, 2026-11-13: «the till looks like a system put together from scraps»).
 *
 * A *theme*, like `contrast.css`: the same pages and the same tokens, with the Storewell identity — the deeper
 * green of the new logo, warmer neutrals with a green bias, Instrument Sans for reading and Schibsted Grotesk
 * for titles — plus the few structural touches every screen shares (titles, cards, tables, the column). It is on
 * only where `html[data-design="v3"]` is set, which each account chooses for itself («Diseño nuevo»), so the
 * old look stays exactly as it was for everyone else while the new one is tried.
 *
 * The sales screen keeps its layout (owner, 2026-11-13: «the sales screen layout do not move»): it takes the new
 * colours and letters through the tokens, and nothing here moves or resizes its parts.
 *
 * This sheet names colours of its own because it *is* a palette, like `contrast.css`; it is loaded before that
 * sheet, so high contrast still wins when someone turns it on. `tests/test_design_v3.py` computes the text
 * pairs below, so a palette change that loses contrast fails a test rather than a cashier.
 */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk-latin.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk-latin-ext.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html[data-design="v3"] {
  --brand-900: #0b3d26;
  --bg: #f5f8f6;
  --surface: #ffffff;
  --surface-2: #f2f6f3;
  --surface-3: #e3ebe6;
  --border: #dbe4de;
  --text: #0e1913;
  --text-label: #26352c;
  --muted: #55655b;
  --on-accent: #ffffff;
  --overlay: rgba(7, 26, 16, .52);

  --accent: #0f7a45;
  --accent-strong: #12924f;
  --accent-dark: #0a5732;
  --accent-soft: #e6f4ec;

  --sidebar-text: #f1faf4;
  --sidebar-muted: #a9cfb8;
  --sidebar-hover: rgba(255, 255, 255, .08);
  --sidebar-line: rgba(255, 255, 255, .12);
  --sidebar-active-ink: #0b3d26;

  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Schibsted Grotesk", "Instrument Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --fw-medium: 500;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(14, 25, 19, .05), 0 10px 28px -12px rgba(14, 25, 19, .14);
  --shadow-nav: 0 1px 3px rgba(14, 25, 19, .07);
  --shadow-lg: 0 2px 12px rgba(15, 122, 69, .18);
  --shadow-modal: 0 28px 70px -10px rgba(7, 26, 16, .35);
  --ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}

/* Titles in the display face, a little larger and tighter: what a page is, read at a glance. */
html[data-design="v3"] h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em; font-size: 28px; }
html[data-design="v3"] h2,
html[data-design="v3"] h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; }
html[data-design="v3"] .card-head h2 { font-size: 18px; }

/* The mark: the Storewell «S as a shelf» in place of the colón tile. */
html[data-design="v3"] .brand-mark {
  background: url("../img/storewell-mark.svg") center / contain no-repeat; color: transparent;
  font-size: 0; border-radius: 9px;
}
html[data-design="v3"] .brand-text { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }

/* The column: the page you are on is a quiet light row with a mint edge, not a bright green block — the green
   is kept for the one thing you press. */
html[data-design="v3"] .nav a.active { background: rgba(255, 255, 255, .13); color: #ffffff; }
html[data-design="v3"] .nav a.active::before { background: #3ddc8a; width: 3px; }

/* Cards: a white head that belongs to the card, not a grey band on top of it. */
html[data-design="v3"] .card-head { background: var(--surface); }
html[data-design="v3"] .card { border-color: var(--border); }

/* Tables: a lighter header, numbers that line up. */
html[data-design="v3"] .table thead th { background: var(--surface); letter-spacing: .06em; }
html[data-design="v3"] .table td { font-variant-numeric: tabular-nums; }

/* Buttons: the same sizes (a finger is still 44 px), softer corners. */
html[data-design="v3"] .btn { letter-spacing: -.005em; }
html[data-design="v3"] .btn-primary:hover { box-shadow: var(--shadow-lg); }

/* The page's subtitle reads as a lede, not as fine print. */
html[data-design="v3"] .page-head .sub { font-size: 15px; max-width: 72ch; }

/* The design page (`/diseno`): the swatches and the type scale side by side. */
html[data-design="v3"] .ds-swatch, .ds-swatch { display: grid; gap: 6px; font-size: var(--fs-sm); }
.ds-swatch i { display: block; height: 56px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-5); }
.ds-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* The column (redesign stage 2): six areas, each a heading that opens to its pages, as in the approved
   prototype. The heading reads as a place (sentence case, the column's own ink), the pages under it as its
   rooms (indented, a step smaller); «Hoy» is one page, so it is a link at the heading's size. The new area,
   Clientes, folds like the others — the open column's rule for the old six lives in `styles.css`; the rail
   still opens every category (`html.nav-rail .nav-items` there, `!important`). */
html[data-design="v3"][data-nav-shut~="clientes"] .nav-items[data-nav-section="clientes"] { display: none; }
html[data-design="v3"] .nav-group {
  font-size: var(--fs-md); font-weight: var(--fw-semibold); text-transform: none; letter-spacing: -.005em;
  color: var(--sidebar-text); min-height: var(--touch); margin-top: 2px;
}
html[data-design="v3"] .nav-section:first-child .nav-group { margin-top: 0; }
html[data-design="v3"] .nav .nav-items[data-nav-section]:not([data-nav-section="pinned"]) a {
  padding-left: calc(var(--space-3) + 30px); font-size: var(--fs-sm); min-height: 40px;
}
html[data-design="v3"] .nav .nav-items[data-nav-section]:not([data-nav-section="pinned"]) a .nav-icon { display: none; }
html[data-design="v3"] .nav-single a { color: var(--sidebar-text); font-weight: var(--fw-semibold); }
html[data-design="v3"] .nav-sell { margin-bottom: var(--space-2); }
html[data-design="v3"].nav-rail .nav .nav-items[data-nav-section] a { padding-left: 0; }
html[data-design="v3"].nav-rail .nav .nav-items[data-nav-section] a .nav-icon { display: block; }
html[data-design="v3"] .nav-group .nav-icon { width: 20px; height: 20px; opacity: .9; }
html[data-design="v3"] .nav-group { gap: var(--space-3); }

/* «Hoy» (redesign stage 3, the approved prototype): how the day is going first, then what needs you. Only the
   order changes — every card is still there, and the shop's notices (licence, panel) stay on top. */
html[data-design="v3"] main.container:has(> #stats):has(> #control-lights) { display: flex; flex-direction: column; }
html[data-design="v3"] main.container:has(> #control-lights) > .banner,
html[data-design="v3"] main.container:has(> #control-lights) > .page-tabs { order: -4; }
html[data-design="v3"] main.container:has(> #control-lights) > .page-head { order: -3; }
html[data-design="v3"] main.container:has(> #control-lights) > #stats { order: -2; margin-bottom: var(--space-5); }
html[data-design="v3"] main.container:has(> #control-lights) > #combined-today { order: -1; }

/* The page pattern (stage 3, `js/page_v3.js`): «Más acciones» holds what is not the page's main button, a list's
   main filter is a row of tabs, and the select behind the tabs is kept (it is the page's state) but not drawn. */
html[data-design="v3"] .v3-more { position: relative; }
html[data-design="v3"] .v3-more > summary { list-style: none; cursor: pointer; }
html[data-design="v3"] .v3-more > summary::-webkit-details-marker { display: none; }
html[data-design="v3"] .v3-more > summary::after { content: "▾"; margin-left: var(--space-2); font-size: .8em; }
html[data-design="v3"] .v3-more-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 240px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-modal);
}
html[data-design="v3"] .v3-more-list > .btn {
  justify-content: flex-start; width: 100%; border-color: transparent; background: transparent; box-shadow: none;
  font-weight: var(--fw-medium);
}
html[data-design="v3"] .v3-more-list > .btn:hover { background: var(--surface-2); }
html[data-design="v3"] .v3-tabs {
  display: flex; gap: var(--space-1); overflow-x: auto; padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border);
}
html[data-design="v3"] .v3-tab {
  border: 0; background: none; cursor: pointer; white-space: nowrap; min-height: var(--touch);
  padding: 0 var(--space-3); font: inherit; font-weight: var(--fw-semibold); color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
html[data-design="v3"] .v3-tab:hover { color: var(--text); }
html[data-design="v3"] .v3-tab.is-on { color: var(--text); border-bottom-color: var(--accent); }
html[data-design="v3"] .v3-tab:focus-visible { outline: none; box-shadow: var(--ring); }
html[data-design="v3"] select.v3-tabs-source { display: none; }

/* Ventas' period chips (stage 4) read as the list's tabs, like every other list's main filter. They are the
   page's own buttons — `js/sales.js` still marks the chosen one (`is-on`, `aria-pressed`). */
html[data-design="v3"] .period-chips { gap: var(--space-1); border-bottom: 1px solid var(--border); flex-basis: 100%; }
html[data-design="v3"] .period-chips .btn {
  border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: var(--fw-semibold);
}
html[data-design="v3"] .period-chips .btn:hover { color: var(--text); background: none; }
html[data-design="v3"] .period-chips .btn.is-on { color: var(--text); background: none; border-bottom-color: var(--accent); }