/* store_v1 — chrome SHARED by the staff panel and by the logged-in customer's store.
   The dark top bar of the Pilnook panels: brand on the left, entries in the middle and the user
   menu on the right. Only the ENTRIES change (each template supplies them); the design is one. Both
   shells load it from `head` (common.html); it used to live duplicated in panel.css.

   🔴 It brings its OWN bar colour tokens (--dark/--navy*) because it is loaded by both the panel's
   stylesheet and the store's, and the store's does not define them. `/brand.css` loads AFTERWARDS and
   may reassign `--navy-soft` to the house accent —the avatar follows the brand, which is right—.
   The dropdown's light tones (--surface/--border/--text-*) are supplied by each stylesheet; they
   carry a fallback just in case. */
:root {
  --dark: #0a2540;
  --navy: #0a2540;
  --navy-light: #13385f;
  --navy-soft: #1c4c7c;
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--dark);
  color: #e6eaf0;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 22px;
  height: 58px;
}

.topbar-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; flex: none; }
.topbar-logo {
  /* 🔴 An IMAGE, not a CSS mask: the mask only paints a single-colour SVG white, and any given
     company's logo has whatever colours it has. That is why there are two files, one per background. */
  width: auto;
  max-width: 84px;
  height: 36px;
  display: block;
  object-fit: contain;
  object-position: left center;
}

.topbar-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar-nav a {
  color: #b9c3cf;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 7px;
}
.topbar-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.topbar-nav a.active { background: rgba(255, 255, 255, .13); color: #fff; }

/* Category with a submenu in the topbar: «Inventario» is a normal link (it looks and aligns like
   the others because it is a `.topbar-nav a`), and on hover its menu of sub-screens appears. No
   arrow, no JS: `:hover`/`:focus-within`. The `.dd-menu` is reused from the user menu but anchored
   to the LEFT (the user one goes to the right). */
.nav-dd { position: relative; display: flex; align-items: center; }
/* The menu drops to the BOTTOM EDGE of the bar (58 px tall; the link is centred, so there are
   ~14 px from the link to the edge). Anchored to the left (the user menu goes to the right). */
.nav-dd .dd-menu {
  left: 0;
  right: auto;
  min-width: 170px;
  top: calc(100% + 14px);
  /* Always in the layout: shown/hidden by opacity so the close can be DELAYED and it does not
     vanish abruptly when the mouse moves. On opening there is no delay; on closing, 0.2 s of grace. */
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .2s;
}
/* Invisible bridge that covers the link→menu gap, so the mouse crosses it without losing the :hover. */
.nav-dd .dd-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.nav-dd:hover .dd-menu,
.nav-dd:focus-within .dd-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
/* The menu items live INSIDE `.topbar-nav`; without this they would inherit the topbar link's
   style (light grey text over a dark bar) and be illegible over the white background. */
.topbar-nav .dd-menu a {
  color: var(--text-main, #1c2733);
  font-weight: 400;
  padding: 9px 12px;
  border-radius: 6px;
}
.topbar-nav .dd-menu a:hover { background: var(--surface-2, #f1f5f9); color: var(--text-main, #1c2733); }
.topbar-nav .dd-menu a.dd-current { font-weight: 600; background: var(--surface-2, #f1f5f9); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.topbar-view {
  color: #b9c3cf;
  font-size: 13.5px;
  text-decoration: none;
  font-weight: 600;
}
.topbar-view:hover { color: #fff; }

/* ---------- User menu ----------
   The same one as win_app_sigrid_guard, so the two panels open the same way. The JS on each side
   (panel.js / catalogue.js) opens it by adding `.open`; no `onclick` (the CSP has no unsafe-inline). */
.user-dd { position: relative; }
.user-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 8px;
  font: inherit;
  color: #e6eaf0;
  transition: background .15s;
}
.user-btn:hover { background: rgba(255, 255, 255, .09); }

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-light), var(--navy-soft));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  flex: none;
}

.user-info { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.user-name { font-size: 13.5px; font-weight: 600; color: #e6eaf0; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #8b97a7; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chevron { color: #8b97a7; transition: transform .2s; flex: none; }
.user-dd.open .chevron { transform: rotate(180deg); }

.dd-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 214px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #dbe1e8);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
  padding: 6px;
  z-index: 200;
}
.user-dd.open .dd-menu { display: block; }

/* Dropdown header: who you are. The customer store uses it; the staff panel does not carry it and
   it does not get in the way. */
.dd-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--border, #dbe1e8);
  margin-bottom: 4px;
}
.dd-head strong { font-size: 14px; color: var(--ink, #0a2540); }
.dd-head span { font-size: 12.5px; color: var(--text-soft, #5b6675); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14.5px;
  color: var(--text-main, #1c2733);
  border-radius: 6px;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.dd-item:hover { background: var(--surface-2, #f1f5f9); }
.dd-item svg { color: var(--text-soft, #5b6675); flex: none; }
.dd-current { background: var(--surface-2, #f1f5f9); font-weight: 600; }
.dd-logout, .dd-logout svg { color: var(--error, #c62828); }
.dd-sep { height: 1px; background: var(--border, #dbe1e8); margin: 5px 2px; }

@media (max-width: 980px) {
  .topbar { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 12px; }
  .topbar-right { margin-left: 0; width: 100%; }
}

/* ---------- Two-step verification (2FA) ----------
   Shared by the customer account (public.css) and staff «Mi perfil» (panel.css). It used to be
   copied in both stylesheets and had already diverged (different sizes and backgrounds). Here it
   carries token FALLBACKS —`--mono`, `--radius-sm`, `--border` do not exist in both stylesheets—
   and explicit backgrounds, so it looks the same whichever loads it. */
.two-step { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border, #e4e8ee); }
.two-step h3 { margin: 0 0 8px; font-size: 15px; }
.two-step form { margin-top: 8px; }
.totp-steps { margin: 0 0 16px; padding-left: 20px; font-size: 15px; line-height: 1.6; }
.totp-enroll { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-bottom: 16px; }
.totp-qr { border: 1px solid var(--border, #e4e8ee); border-radius: var(--radius-sm, 8px); background: #fff; padding: 8px; }
.totp-secret { flex: 1; min-width: 220px; }
.totp-key { display: inline-block; font-family: var(--mono, ui-monospace, monospace); font-size: 16px; letter-spacing: 1px;
  background: #f1f4f8; color: #1c2733; padding: 8px 12px; border-radius: var(--radius-sm, 8px); word-break: break-all; }
.backup-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; margin: 8px 0 16px;
  padding: 12px 16px; list-style: none; background: #f1f4f8; color: #1c2733; border-radius: var(--radius-sm, 8px);
  font-family: var(--mono, ui-monospace, monospace); font-size: 16px; letter-spacing: 1px; }

/* lang-dd: the footer language dropdown (flag + name). A CUSTOM dropdown, not a native <select>, so
   the OPEN state matches the site: it reuses the account menu's .dd-menu/.dd-item/.dd-current from
   chrome.css, opening UPWARD (it sits at the bottom of the page). The trigger looks like the other
   footer links — no border, same 12px font and colour. */
.lang-dd { position: relative; display: inline-flex; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;            /* same size/family as the rest of the footer (12px) */
  color: var(--text-soft);  /* same colour as the sibling footer links */
  line-height: inherit;
  cursor: pointer;
}
.lang-btn:hover,
.lang-dd.open .lang-btn { color: var(--ink); }
.lang-btn:focus { outline: none; }
.lang-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
.lang-btn .chevron { color: currentColor; transition: transform .2s; flex: none; }
.lang-dd.open .chevron { transform: rotate(180deg); }
.lang-flag { font-size: 15px; line-height: 1; }
/* Open the shared .dd-menu popup ABOVE the footer, aligned to the trigger. */
.lang-dd.open .dd-menu { display: block; }
.lang-dd .lang-menu {
  right: auto;
  left: 0;
  top: auto;
  bottom: calc(100% + 8px);
  min-width: 168px;
}
.lang-menu .dd-item { font-size: 14px; }

/* ── Shared PDF viewer (the `pdfmodal` partial) ───────────────────────────────
   Loaded by BOTH shells (panel + public) so the customer's order/quote viewer looks exactly like
   the staff's. These lived in panel.css, which the public pages do NOT load — the modal then opened
   unstyled on the customer side. The base `.modal`/`.modal-box`/`.modal-backdrop` already exist in
   both public.css and panel.css; only these viewer internals + `.modal-wide` + the toolbar's
   `.btn-mini` were missing. Design tokens (--border, --border-2, --text-soft, --navy-soft) resolve
   from the page's own sheet (both define them). */
.modal-wide { width: min(1000px, 100%); padding: 0; overflow: hidden; }

.viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.viewer-tools { display: flex; align-items: center; gap: 6px; }
.viewer-zoom { min-width: 52px; text-align: center; font-size: 13px; color: var(--text-soft); }
.viewer-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.viewer-title .muted { font-size: 13px; white-space: nowrap; }
/* The pages scroll in their own box so the toolbar never leaves the screen; 78vh fits a full A4. */
.viewer-body { height: 78vh; overflow: auto; background: #566070; padding: 12px; }
.viewer-pages { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.viewer-page { display: block; max-width: 100%; background: #fff; box-shadow: 0 2px 10px rgba(10, 37, 64, .35); }
.viewer-status { margin: 0 0 10px; text-align: center; color: #e8ecf2; font-size: 13.5px; }
.viewer-status:empty { display: none; }
.viewer-status.is-bad { color: #ffd9d9; }

/* Base .btn-mini lives here (shared) so the public viewer toolbar gets it too; the panel keeps its
   CONTEXTUAL variants (.table/.toast/.candidate/.btn-mini-danger) in panel.css. */
.btn-mini {
  border: 1px solid var(--border-2);
  background: #fff;
  border-radius: 6px;
  padding: 5px 11px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
}
.btn-mini:hover { border-color: var(--navy-soft); color: var(--navy-soft); }
a.btn-mini { display: inline-flex; align-items: center; text-decoration: none; }

/* ============================================================================
   The two account pages (staff «Mi perfil», customer «Mi cuenta»). Since rc000405 they are laid out with
   the flat detail design further down (`.detail-head`, `.flat-sec`, `.flat-cols`) — the hero card, the
   boxed cards and their two-up grid that lived here are gone. What remains is what only an account page
   has: the avatar, the chips, the button sizing.
   ============================================================================ */

/* Button parity across the two account pages. After the rc000217 typography sweep the base
   `.btn-primary` is 14.5px/9px 18px/radius 8px in panel.css (admin) but 12.5px/7px 12px in public.css
   (storefront). This rule pins the admin size on BOTH account pages: it equals the panel base (a no-op
   on admin now) and bumps the customer account button (public side) to match — including the shared
   change-password modal. `.account-page` (2 classes) outranks the single-class base in either sheet
   regardless of load order; scoped to `.account-page` so the storefront's own compact buttons stay. */
.account-page .btn-primary {
  font-size: 14.5px;
  padding: 9px 18px;
  border-radius: 8px;
}

.account-avatar {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(140deg, var(--navy), var(--navy-light));
}
.account-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Chips / pills. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-main);
  background: var(--gray-mid, #e3e7ec); /* the token exists on the storefront sheet only */
  border: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
}
/* Active / hovered filter chip: SOLID dark fill + white text (not just a border). Defined here in the
   shared chrome (which owns `.chip` and loads after panel.css) so it wins for every chip filter — panel
   AND store. `.chip.chip-on` (0,2,0) also beats the plain `.chip` base regardless of sheet order. */
.chip:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip.chip-on { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip-soft { background: transparent; border: 1px solid var(--border); color: var(--text-soft); }
.chip-accent { background: var(--success-bg); color: var(--success); }

.account-managed { margin-top: 12px; }

/* Shipping-address cards. */
.ship-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr)); gap: 14px; }
.ship-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ship-card-default { border-color: var(--success); background: var(--success-bg); }
.ship-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ship-head strong { font-size: 15px; color: var(--ink); }
.ship-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: auto; padding-top: 6px; }
.ship-actions form { display: inline; }
/* The actions of a saved address are quiet links under it, not three headings: without a size of their
   own they took the page's (16px, bold) and «Hacer predeterminada» no longer fitted its card. */
.ship-actions .btn-link { font-size: 13.5px; }

.btn-small { padding: 6px 12px; font-size: 13.5px; }

/* Profile picture / avatar. The whole avatar is the click target to change the photo (a camera badge
   hints it); the file input is hidden but still activated by clicking the label — no raw file control.
   The default, with no photo, is the initials on the gradient circle. */
.account-avatar { overflow: hidden; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-initials { font-size: 22px; font-weight: 700; letter-spacing: .5px; color: #fff; }
.account-avatar-col { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; }
.avatar-form { margin: 0; display: flex; flex-direction: column; align-items: center; }
.avatar-edit { position: relative; display: inline-block; cursor: pointer; }
.avatar-edit:hover .account-avatar { filter: brightness(.92); }
.avatar-cam {
  position: absolute; right: -2px; bottom: -2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: grid; place-items: center;
  border: 2px solid var(--surface);
  transition: background .15s;
}
.avatar-edit:hover .avatar-cam { background: var(--navy-light); }
.sr-file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.avatar-remove { background: none; border: 0; padding: 0; font-size: 12.5px; color: var(--text-faint); cursor: pointer; }
.avatar-remove:hover { color: var(--error); text-decoration: underline; }
/* The nav avatar when it is a photo, not initials. */
.avatar-img { object-fit: cover; padding: 0; background: none; }

/* ==== Shared (storefront + panel): search autocomplete dropdown + active-filter chips (Fase 3). ====
   Lives in chrome.css because the management search (admin) reuses it and admin does not load public.css. */
.admin-search { position: relative; display: inline-block; }
/* ---- Search dropdown (rc000357; one component for the storefront header + admin Catálogo, fed by
   static/js/suggest.js): the full-text action on top, product rows (thumbnail, highlighted name, ref ·
   family, price, availability) on the left, «Filtrar por» groups with counts on the right, a keyboard
   footer. JS sets the width (two columns, never past the window edge). Stacks under 720px. ---- */
.filter-suggest {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0;
  max-height: 560px; overflow-y: auto;
  background: #fff; color: var(--text-main, #1c2733);
  border: 1px solid var(--border-2, #cfd6e0); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(10, 37, 64, .18);
  text-align: left; font-size: 14px; line-height: 1.4;
}
.sg mark { background: #fff1a8; color: inherit; border-radius: 2px; padding: 0 1px; }
.sg kbd { font: inherit; font-size: 11.5px; border: 1px solid var(--border-2, #cfd6e0); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; color: var(--text-soft, #5b6675); background: #fff; white-space: nowrap; }
.sg .is-sel { background: #e6eefb !important; }
.sg-all { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--border, #e4e8ee);
  background: none; font: inherit; color: var(--navy, #0a2540); text-align: left; cursor: pointer; }
.sg-all-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: #f1f4f8; color: var(--navy-soft, #1c4c7c); font-size: 16px; }
.sg-all-t { flex: 1; min-width: 0; font-weight: 600; }
.sg-all-t small { display: block; font-weight: 400; font-size: 12.5px; color: var(--text-soft, #5b6675); }
.sg-cols { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.sg-col { min-width: 0; padding: 8px 0; }
.sg-side { border-left: 1px solid var(--border, #e4e8ee); background: #f8fafc; }
.sg-only { border-left: 0; padding-bottom: 10px; }
.sg-head { padding: 6px 16px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft, #5b6675); }
.sg-head-top { padding-top: 14px; }
.sg-sub { padding: 8px 16px 2px; font-size: 12px; font-weight: 600; color: var(--text-soft, #5b6675); }
.sg-prod { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 16px; color: inherit; text-decoration: none; }
.sg-prod:hover, .sg-filt:hover, .sg-all:hover { background: #f1f5fa; }
.sg-thumb { width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border, #e4e8ee); border-radius: 9px; background: #f4f6f9; }
.sg-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sg-thumb-ini { border-radius: 50%; border: 0; background: #eaf1fb; color: var(--navy-soft, #1c4c7c); font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.sg-prod-txt { min-width: 0; }
.sg-name { display: block; font-weight: 600; color: var(--navy, #0a2540); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-meta { display: block; font-size: 12.5px; color: var(--text-soft, #5b6675); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-tag { margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--text-soft, #5b6675); background: #eef1f5; border-radius: 5px; padding: 1px 6px; vertical-align: 1px; }
.sg-prod-r { text-align: right; }
.sg-price { display: block; font-weight: 700; color: var(--navy, #0a2540); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sg-price.is-ask { font-weight: 600; font-size: 12.5px; color: var(--navy-soft, #1c4c7c); }
.sg-av { display: block; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: #1f9254; }
.sg-av.is-low, .sg-av.is-ask { color: #b26a00; }
.sg-av.is-neg { color: var(--error, #c62828); }
.sg-av.is-none { color: var(--text-soft, #5b6675); font-weight: 500; }
.sg-filt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 16px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.sg-ico { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border: 1px solid var(--border, #e4e8ee); border-radius: 7px; background: #fff;
  font-size: 12px; font-weight: 800; color: var(--navy-soft, #1c4c7c); }
.sg-filt-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--navy, #0a2540); }
.sg-filt-c, .sg-tip-n { font-size: 12px; color: var(--text-soft, #5b6675); font-variant-numeric: tabular-nums; }
.sg-note, .sg-empty { padding: 10px 16px; color: var(--text-soft, #5b6675); }
.sg-empty { padding-top: 16px; }
.sg-tips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 16px; }
.sg-tip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--border-2, #cfd6e0); border-radius: 999px;
  background: #fff; font: inherit; font-size: 13px; color: var(--navy, #0a2540); cursor: pointer; }
.sg-tip:hover { border-color: var(--navy-soft, #1c4c7c); }
.sg-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px;
  border-top: 1px solid var(--border, #e4e8ee); font-size: 12.5px; color: var(--text-soft, #5b6675); }
.sg-keys kbd { margin-right: 2px; }
.sg-more { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--navy-soft, #1c4c7c); cursor: pointer; }
.sg-more:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .sg-cols { grid-template-columns: 1fr; }
  .sg-side { order: -1; border-left: 0; border-bottom: 1px solid var(--border, #e4e8ee); }
  .sg-keys { display: none; }
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  background: var(--navy, #0a2540);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.4;
}
.filter-chip:hover { background: var(--navy-light, #123a5e); }
.filter-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  font-size: 14px;
  line-height: 1;
}
.filter-chip-clear {
  font-size: 13px;
  color: var(--text-soft, #5a6676);
  text-decoration: none;
}
.filter-chip-clear:hover { color: var(--navy, #0a2540); }

/* ==== Category presentation (rc000372) — shared by the storefront and the panel. ====
   Eight palette tints as classes (the CSP forbids inline styles): --t is the ink/icon colour, --s the soft
   background. A category picks one in the panel (0 = automatic by position). Icons are inline SVG line
   drawings (web/caticons.go) that inherit `currentColor`. */
.tint-1 { --t: #2c7fb8; --s: #e6f1fa; }
.tint-2 { --t: #b85c38; --s: #f8ece6; }
.tint-3 { --t: #5f7f3a; --s: #eef4e6; }
.tint-4 { --t: #7a5aa6; --s: #f1ecf8; }
.tint-5 { --t: #0f8a8a; --s: #e3f5f4; }
.tint-6 { --t: #a3366e; --s: #f9e8f1; }
.tint-7 { --t: #8a6d1d; --s: #f7f0dc; }
.tint-8 { --t: #3d5a80; --s: #e8eef6; }
.cat-ic { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cat-badge { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 5px; border-radius: 8px; flex: none;
  color: var(--t, #1c4c7c); background: var(--s, #eef2f6); }

/* ==== Shared (panel + the customer's own pages): the LISTING. ====
   One listing design for the staff panel (Catálogo, Inventario, Clientes, Solicitudes, Presupuestos,
   Pedidos) and for the customer's «Presupuestos» / «Pedidos» (rc000401, operator: «habría que poner el mismo
   diseño de admin para el cliente»): a head with the count under the title, a toolbar with the search box,
   status tabs with their numbers, a dark table head, the number first and unbroken.

   AI-AGENT-RATIONALE: these rules lived in panel.css and were moved here VERBATIM, not copied — two
   copies of a design are two designs within a month, which is exactly what the operator was pointing at.
   This sheet loads after panel.css / public.css, so these win over a same-specificity rule of either
   (`.list-table th` over `.table th`); each shell only adds, in its own sheet, what is really its own
   (the page background and the base table measures). Tokens come from the shell's sheet; the two used
   only by the panel's alert tab (`--warn-dark`, `--warn-ink`) exist only there, and so does that tab. */
.filters-admin {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.filters-admin input, .filters-admin select {
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 8px 11px;
  font: inherit;
  font-size: 14.5px;
  background: #fff;
  color: var(--text-main);
}

.filters-admin input[type="search"] { min-width: 260px; }
.empty-admin { color: var(--text-soft); font-size: 14.5px; text-align: center; padding: 30px 10px; margin: 0; }
.list-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.list-head-id { flex: 1 1 280px; min-width: 0; }
.list-head h1 { margin: 0; font-size: 22px; }
.list-head .sub { margin: 4px 0 0; color: var(--text-soft); font-size: 14px; }
.list-toolbar { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.list-toolbar .filters-admin { margin-bottom: 0; flex: 1 1 auto; }
.seg { display: inline-flex; flex: none; border: 1px solid var(--border-2); border-radius: 9px; overflow: hidden; }
.seg a { font-size: 13.5px; font-weight: 600; padding: 8px 13px; color: var(--text-soft); border-left: 1px solid var(--border-2); white-space: nowrap; }
.seg a:first-child { border-left: 0; }
.seg a:hover { color: var(--text-main); }
.seg a.on { background: var(--navy); color: #fff; }
/* A label and its tabs travel together (rc000445: the department filter) — the label never ends a row on
   its own — and tabs that do not fit scroll INSIDE their box instead of widening the page. */
.seg-group { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.seg-group .seg-label { margin-left: 0; flex: none; }
.seg.seg-scroll { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.list-page .table-wrap { margin: 0; padding: 0; }
.list-table th { background: var(--navy); color: #e8eef6; }
.list-table th:first-child { border-top-left-radius: 8px; }
.list-table th:last-child { border-top-right-radius: 8px; }
.list-ref { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.seg-small a { padding: 6px 10px; font-size: 12.5px; }
.seg-tabs { margin-bottom: 14px; flex-wrap: wrap; }
.seg-n { margin-left: 6px; font-size: 11.5px; font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.seg a.on .seg-n { color: #cfe0f5; }
.seg a.is-alert:not(.on) { color: var(--warn-dark); }
.seg a.is-alert:not(.on) .seg-n { color: var(--warn-ink); }
.list-table .list-ref a { color: var(--navy-soft); }

/* ==== Shared (panel + the customer's own pages): the DETAIL page («design A»). ====
   One document page for the staff panel (request / quote / order / product…) and for the customer's quote
   and order (rc000403, operator: «habría que poner el mismo diseño de admin para el cliente»): a breadcrumb
   with the back chevron, the number with its status, the actions on the right, the figures in a row, and
   card-less sections split by hairlines on a white page. Moved VERBATIM from panel.css, for the reason
   given on the listing above. */
/* Breadcrumb with a left chevron (admin_panel's `.crumbs` look the operator likes, 2026-10-02):
   the first segment is the clickable «back» target carrying the arrow; the current item is muted.
   The arrow nudges left on hover, like admin_panel's back-link. */
.detail-crumbs { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-bottom: 10px; flex-wrap: wrap; }
.detail-crumbs a { display: inline-flex; align-items: center; gap: 5px; color: var(--navy-soft); font-weight: 600; text-decoration: none; }
.detail-crumbs a:hover { color: var(--navy); }
.detail-crumbs a svg { transition: transform .15s; }
.detail-crumbs a:hover svg { transform: translateX(-2px); }
.detail-crumbs .cur { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.detail-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.detail-id { min-width: 0; flex: 1 1 300px; }
.detail-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.detail-title h1 { margin: 0; font-size: 23px; font-weight: 700; font-variant-numeric: tabular-nums; }
.detail-meta { color: var(--text-soft); font-size: 13.5px; margin-top: 6px; }
.detail-meta b { color: var(--ink); font-weight: 600; }
.detail-meta a { color: var(--navy-soft); }
.detail-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.detail-actions form { margin: 0; }
/* flat figures (replace the boxed `.stats` tiles on detail pages) */
.detail-figures { display: flex; flex-wrap: wrap; row-gap: 10px; margin: 16px 0 4px; }
.detail-figures .fig { padding: 0 22px; border-left: 1px solid var(--border); }
.detail-figures .fig:first-child { padding-left: 0; border-left: 0; }
.detail-figures .fig .v { font-size: 19px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.detail-figures .fig .l { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
/* flat sections (replace `.panel-card` inside a `.detail` page) */
.flat-sec { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--border); }
.flat-sec > h2 { margin: 0 0 12px; font-size: 16px; }
.flat-sec-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.flat-sec-head h2 { margin: 0; font-size: 16px; }
.flat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.flat-cols.wide { grid-template-columns: 2fr 1fr; }   /* a form beside a narrow readout (inventory item) */
@media (max-width: 720px) { .flat-cols, .flat-cols.wide { grid-template-columns: 1fr; gap: 0; } }
/* Dark table header on the detail pages (operator 2026-10-02): the thead strip goes navy with light
   text, so the column labels read as a header band on the white, card-less page. */
.detail .table th { background: var(--navy); color: #e8eef6; border-bottom-color: var(--navy-light); }
/* The account pages on the flat detail (rc000405): the avatar sits in the head beside the name, a section
   head may carry a small button at its right end, and the 2FA block — which draws its own rule when it
   stands alone — sits flush inside a column. */
.detail-head > .account-avatar-col { align-self: center; }
/* The first section right under the head: the head already draws the rule, a second one 22px below it
   reads as a mistake. (On a document page the figures row sits between the two.) */
.flat-sec.flat-first { margin-top: 0; border-top: 0; }
.account-page .flat-sec-head .btn-small { margin-left: auto; } /* scoped: the product page has a small button in a section head that must stay where it is */
.flat-cols > .two-step { margin-top: 0; padding-top: 0; border-top: 0; }
/* On a phone the two columns stack: give the stacked blocks air (the shared `.flat-cols` has no row gap —
   on a document page each block opens with a heading that brings its own), and keep the name beside the
   avatar instead of dropping under it. Scoped to the account pages: no other page changes. */
.account-page .flat-cols { row-gap: 26px; }
.account-page .detail-id { flex: 1 1 180px; }