/* TADIA Tiendas · the portal TADIA sells to online stores.
   TADIA's identity, the same as tadia.tech: the ink band (#0c1024) carries the header, the page head and the
   login; indigo (#4f46e5) is the one action and selection color; gold (#c9973f) appears only as small text on the
   ink band (contrast 7.2:1; never on white, where it fails). Canvas #f6f7fb, white surfaces for what you act on.
   The «A» glyph sits in its indigo→violet→fuchsia square, the only gradient on the page. Geist for everything,
   with a real system fallback. Phone first. Each store's own brand lives only in its ads and videos (dibujo). */

/* ------------------------------------------------------------------ tokens */
:root {
  --tinta: #0c1024; --indigo: #4f46e5; --indigo-hover: #4338ca; --indigo-suave: #eef2ff; --indigo-claro: #a5b4fc;
  --oro: #c9973f; --glifo: linear-gradient(135deg, #818cf8 0%, #8b5cf6 50%, #d946ef 100%);
  --bg: #f6f7fb; --surface: #ffffff; --surface-2: #f3f4f9; --ink: #0c1024; --ink-2: #343a56; --muted: #5b6180;
  --line: #e3e5ee; --line-2: #cdd1de; --campo: #878da9; --link: #4338ca;
  --accent: #4f46e5; --accent-soft: #eef2ff; --on-accent: #ffffff;
  --primary: #4f46e5; --primary-hover: #4338ca; --on-primary: #ffffff;
  --band: #0c1024; --band-ink: #ffffff; --band-muted: #aab0cc; --band-line: rgba(255, 255, 255, 0.12);
  --good: #0b6b37; --good-bg: #e2f3e8; --warn: #7a4a00; --warn-bg: #fcefd2; --bad: #a3221b; --bad-bg: #fde6e3;
  --info: #4338ca; --info-bg: #eef2ff;
  --good-mark: #0ca30c; --warn-mark: #e09a00; --bad-mark: #d03b3b;
  --barato: #2a78d6; --caro: #e34948; --igual: #b0b3c9; --eje: #c8cbe0;
  /* metrics charts: one hue, the brand indigo (6.3:1 on the surface), a lighter step of the same ramp for the week
     in progress and a darker one for hover */
  --dato: #4f46e5; --dato-suave: #a5b4fc; --dato-hover: #3730a3;
  --focus: #4f46e5; --focus-banda: #a5b4fc;
  --sombra-1: 0 1px 2px rgba(12, 16, 36, 0.05);
  --sombra-2: 0 12px 32px -14px rgba(12, 16, 36, 0.32), 0 2px 6px rgba(12, 16, 36, 0.06);
  --google: #eb6834; --marco: #e9eaf3; --foto: #ffffff; --avatar-ink: #3730a3;
  --r-s: 8px; --r-c: 10px; --r-m: 12px; --r-l: 16px;
  /* type scale: one step per job (labels, small print, controls, reading, card titles, section, page, figures) */
  --t-xs: 13px; --t-sm: 14px; --t-base: 15px; --t-body: 16px; --t-md: 16.5px; --t-lg: 18px; --t-xl: 21px; --t-2xl: 28px;
  --t-3xl: clamp(28px, 1.4vw + 19px, 38px); --t-4xl: 40px;
  /* spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #080b18; --surface: #11152a; --surface-2: #0d1022; --ink: #eceefa; --ink-2: #c8cce4; --muted: #9aa0c0;
  --line: #222744; --line-2: #353b5f; --campo: #6b7297; --link: #a5b4fc;
  --accent: #a5b4fc; --accent-soft: rgba(129, 140, 248, 0.14); --on-accent: #0c1024;
  --primary: #818cf8; --primary-hover: #a5b4fc; --on-primary: #0c1024;
  --band: #0c1024; --band-muted: #aab0cc; --band-line: rgba(255, 255, 255, 0.10);
  --good: #6fdc98; --good-bg: rgba(111, 220, 152, 0.13); --warn: #f5c95a; --warn-bg: rgba(245, 201, 90, 0.13);
  --bad: #ff9a90; --bad-bg: rgba(255, 154, 144, 0.13); --info: #a5b4fc; --info-bg: rgba(165, 180, 252, 0.12);
  --barato: #3987e5; --caro: #e66767; --igual: #4c5185; --eje: #4c5185;
  --dato: #818cf8; --dato-suave: #3d3f8f; --dato-hover: #a5b4fc;
  --google: #d95926; --marco: #0d1022; --foto: #f3f4f9; --avatar-ink: #3730a3;
  --focus: #a5b4fc;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3); --sombra-2: 0 14px 34px -14px rgba(0, 0, 0, 0.6);
  color-scheme: dark } }

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--t-body)/1.5 var(--body); -webkit-font-smoothing: antialiased }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 20; background: var(--band) }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; letter-spacing: -0.018em; color: inherit }
h1 { font-size: var(--t-3xl); font-weight: 700; line-height: 1.08; letter-spacing: -0.028em }
h2 { font-size: var(--t-xl); font-weight: 650; line-height: 1.22 }
h3 { font-size: var(--t-md); font-weight: 650; line-height: 1.3 }
p { margin: 0 }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px }
a:hover { text-decoration-thickness: 2px }
img { max-width: 100% }
ul, ol { margin: 0 }
b, strong { font-weight: 600 }
.num { font-variant-numeric: tabular-nums }
.mono { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; font-size: var(--t-xs) }
.muted { color: var(--muted) }
.small { font-size: var(--t-sm) }
.mb8 { margin-bottom: 8px } .mb12 { margin-bottom: 12px } .mt12 { margin-top: 12px }
.eyebrow { font: 600 var(--t-sm)/1.3 var(--body); color: var(--muted) }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--surface); color: var(--ink); padding: 10px 14px; border-radius: var(--r-s); font-weight: 600; box-shadow: var(--sombra-2) }
.saltar:focus { top: 12px }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }

/* ------------------------------------------------------------------ header and tabs */
.top { background: var(--band); color: var(--band-ink) }
.top-fila { display: flex; align-items: center; gap: 12px; min-height: 60px; padding-block: 8px }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; border-radius: var(--r-s) }
.brand img { height: 30px; width: auto; display: block }
.brand .sys { font: 600 var(--t-base)/1.15 var(--display); color: var(--band-ink); padding-left: 12px; border-left: 1px solid var(--band-line); white-space: nowrap }
.brand .sys small { display: flex; align-items: center; gap: 5px; font: 500 var(--t-xs)/1.3 var(--body); color: var(--band-muted) }
.brand .sys small .glifo { width: 14px; height: 14px; border-radius: 4px; box-shadow: none }
.brand .sys small .glifo svg { width: 9px; height: 9px }
.who { margin-left: auto; display: flex; align-items: center; gap: 6px }
.mi-cuenta { display: flex; align-items: center; gap: 10px; color: var(--band-ink); text-decoration: none; min-height: 44px; padding: 0 6px; border-radius: 999px }
.mi-cuenta:hover { background: rgba(255, 255, 255, 0.08) }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-suave); color: var(--avatar-ink); font: 700 var(--t-base)/1 var(--display) }
.yo-t { line-height: 1.2; display: none }
.yo-t b { display: block; font-size: var(--t-sm) }
.yo-t small { font-size: var(--t-xs); color: var(--band-muted) }
.who form { margin: 0 }
.salir { font: 600 var(--t-sm)/1 var(--body); color: var(--band-ink); background: transparent; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 999px; min-height: 40px; padding: 0 14px; cursor: pointer }
.salir:hover { border-color: var(--indigo-claro); background: rgba(255, 255, 255, 0.06) }
.top :focus-visible, .head :focus-visible, .simple main > :not(.card) :focus-visible { outline-color: var(--focus-banda) }

/* ------------------------------------------------------------------ the store's own colors
   A store that saved its brand (/marca): its main color, darkened like in its ads until white text reads (4.5:1),
   carries the band (side menu, phone bars, page head) and its accent (3:1 on the main color) marks where you are.
   In light mode the main color is also the action and link color; dark mode keeps TADIA's light accents, which read
   on the dark canvas. Colors with a meaning (cheaper, dearer, good, warning, error) never change. */
body.con-marca { --band: var(--marca); --band-muted: rgba(255, 255, 255, 0.84); --band-line: rgba(255, 255, 255, 0.16);
  --oro: var(--marca-acento, #ffffff); --focus-banda: var(--marca-acento, #ffffff) }
@media not (prefers-color-scheme: dark) {
  body.con-marca { --accent: var(--marca); --primary: var(--marca); --primary-hover: color-mix(in srgb, var(--marca) 82%, #000);
    --link: var(--marca); --info: var(--marca); --focus: var(--marca);
    --accent-soft: color-mix(in srgb, var(--marca) 9%, #fff); --info-bg: color-mix(in srgb, var(--marca) 9%, #fff);
    --dato: var(--marca); --dato-suave: color-mix(in srgb, var(--marca) 40%, #fff); --dato-hover: color-mix(in srgb, var(--marca) 78%, #000) }
}

/* ------------------------------------------------------------------ store pages: side menu (wide), top and bottom bars (phone) */
.lateral { display: none }
.lateral, .barra { background: var(--band); color: var(--band-ink) }
.lateral :focus-visible, .barra :focus-visible, .cinta-demo :focus-visible { outline-color: var(--focus-banda) }
.sel { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; color: var(--band-ink); text-decoration: none; cursor: pointer; list-style: none }
.sel::-webkit-details-marker { display: none }
.sel:hover { background: rgba(255, 255, 255, 0.08) }
.sel-logo { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); overflow: hidden }
.sel-logo img.logo-tienda { width: 38px; height: 38px; max-width: none; object-fit: contain }
.sel-logo.inicial { font: 700 var(--t-xl)/1 var(--display); background: var(--marca-acento, var(--glifo)); color: var(--marca-texto, #fff) }
.sel-t { min-width: 0; display: flex; flex-direction: column; gap: 2px }
.sel.con-logo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 6px; padding: 10px }
.sel.con-logo .sel-logo { width: auto; height: auto; border-radius: 0; background: none; justify-items: start }
.sel.con-logo .sel-logo img.logo-tienda { width: auto; height: 38px; max-width: 190px; object-position: left center }
.sel.con-logo .sel-t { grid-column: 1 / -1; grid-row: 2 }
.sel-t b { font: 650 var(--t-base)/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sel-t small { font-size: var(--t-xs); color: var(--band-muted) }
.sel-flecha { flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--band-muted); border-bottom: 2px solid var(--band-muted); transform: translate(-4px, -2px) rotate(45deg) }
.sel-d[open] .sel-flecha { transform: translate(-4px, 2px) rotate(-135deg) }
.sel-menu { margin: 6px 0 2px; padding: 6px; border-radius: 12px; background: rgba(0, 0, 0, 0.24) }
.sel-menu ul { list-style: none; margin: 0; padding: 0 }
.sel-menu a { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px; color: var(--band-ink); text-decoration: none; font-size: var(--t-sm) }
.sel-menu a:hover { background: rgba(255, 255, 255, 0.1) }
.menu { margin-top: 8px; flex: 1 }
.menu .grupo { font: 600 var(--t-xs)/1.2 var(--body); color: var(--band-muted); margin: 18px 12px 6px }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
.menu a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px; color: var(--band-muted); text-decoration: none; font: 550 var(--t-base)/1.2 var(--body) }
.menu a:hover { color: var(--band-ink); background: rgba(255, 255, 255, 0.08) }
.menu a[aria-current="page"], .barra > ul > li > a[aria-current="page"] svg, .mas > summary[aria-current="page"] svg, .mas[open] > summary svg {
  background: var(--marca-acento, var(--indigo)); color: var(--marca-texto, #ffffff) }
.menu a[aria-current="page"] { font-weight: 650 }
.lateral-pie { border-top: 1px solid var(--band-line); margin-top: 18px; padding-top: 12px; display: grid; gap: 10px }
.yo { display: flex; align-items: center; gap: 6px }
.yo form { margin: 0 }
.yo .mi-cuenta { flex: 1; min-width: 0 }
.yo .yo-t { display: block; min-width: 0 }
.yo .yo-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.firma { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-size: var(--t-xs); color: var(--band-muted) }
.firma b { color: var(--band-ink) }
.firma .glifo { width: 18px; height: 18px; border-radius: 5px; box-shadow: none }
.firma .glifo svg { width: 11px; height: 11px }
.solo-avatar { margin-left: auto }
/* phone bar: four sections and «Más»; the selected one wears the accent behind its icon */
.barra { position: fixed; z-index: 30; inset: auto 0 0; border-top: 1px solid var(--band-line); padding-bottom: env(safe-area-inset-bottom, 0px) }
.barra > ul { list-style: none; margin: 0 auto; max-width: 640px; padding: 4px 6px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) }
.barra > ul > li > a, .mas > summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; color: var(--band-muted); text-decoration: none; font: 600 var(--t-xs)/1 var(--body); cursor: pointer; list-style: none; border-radius: 12px }
.mas > summary::-webkit-details-marker { display: none }
.barra > ul > li > a svg, .mas > summary svg { width: 22px; height: 22px; padding: 4px 12px; box-sizing: content-box; border-radius: 999px }
.barra > ul > li > a[aria-current="page"], .mas > summary[aria-current="page"], .mas[open] > summary { color: var(--band-ink) }
.hoja { position: fixed; z-index: 31; left: 8px; right: 8px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); max-height: min(72vh, 620px); overflow-y: auto;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sombra-2); padding: 6px 14px 14px }
.hoja .grupo { font: 600 var(--t-xs)/1.2 var(--body); color: var(--muted); margin: 14px 4px 6px }
.hoja ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px }
.hoja ul a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 550; background: var(--surface-2) }
.hoja a[aria-current="page"] { background: var(--accent); color: var(--on-accent) }
.hoja-pie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line) }
.hoja-pie .btn { flex: 1 1 140px }
.hoja-pie .yo { flex: 1 0 100%; color: var(--ink) }
.hoja .mi-cuenta { color: var(--ink) }
.hoja .yo-t small { color: var(--muted) }
.hoja .salir { color: var(--ink); border-color: var(--line-2) }
@media (prefers-reduced-motion: no-preference) { .mas[open] .hoja { animation: entra 0.22s cubic-bezier(.2, .8, .2, 1) } }
/* the demo store says so on every page, on a slim line under the top band */
.cinta-demo { position: sticky; top: 0; z-index: 12; padding: 8px max(16px, env(safe-area-inset-left, 0px)); background: var(--band); color: var(--band-muted);
  border-bottom: 1px solid var(--band-line); font-size: var(--t-xs); line-height: 1.4 }
.cinta-demo b { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-weight: 650 }
@media (max-width: 999px) {
  body.app { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) }
  .app .toast { bottom: calc(78px + env(safe-area-inset-bottom, 0px)) }
  .app .pedir-envio, .app .negocio-envio { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) }
}
@media (min-width: 1000px) {
  body.app { display: grid; grid-template-columns: 256px minmax(0, 1fr); align-items: start }
  .lateral { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; padding: 14px 12px 14px; border-right: 1px solid var(--band-line); scrollbar-width: thin }
  .contenido { min-width: 0; overflow-x: clip }  /* the page head's full-bleed band stops at the menu */
  .top-movil, .barra { display: none }
  .contenido > main.wrap, .contenido > footer > .wrap { padding-inline: 32px }
  .cinta-demo { padding-inline: 32px }
}

/* ------------------------------------------------------------------ page */
main { padding-block: 0 var(--s-8) }
main.angosto { max-width: 480px }
.view { display: flex; flex-direction: column; gap: var(--s-5) }
/* the page head continues the ink header as a full-bleed band */
.head { position: relative; display: flex; flex-direction: column; gap: 8px; padding-block: 22px 28px; color: var(--band-ink);
  background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax) }
.head > * { max-width: 760px }
.head .eyebrow { color: var(--oro); letter-spacing: 0.01em }
.head p { color: var(--band-muted) }
.head a { color: var(--band-ink) }
.head:has(+ .solapa) { padding-bottom: 76px }
.head + .solapa { margin-top: -72px; position: relative }
.bloque { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0 }
.bloque-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap }
.bloque-head .row { gap: 8px 14px }
.enlace { font-weight: 600; font-size: var(--t-base); display: inline-flex; align-items: center; min-height: 44px }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 18px; min-width: 0; box-shadow: var(--sombra-1) }
.card.admin { background: var(--surface-2); border: 1px dashed var(--line-2); box-shadow: none; padding-block: 14px }
.card.admin h2, .card.admin h3 { font-size: var(--t-base) }
.card.stack, .stack { display: flex; flex-direction: column; gap: 12px }
.card.centro { display: grid; place-items: center }
.cardhead { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px }
.cardhead form { margin: 0 }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; align-items: start }

/* ------------------------------------------------------------------ chips, callouts, toasts */
.chip { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--t-xs)/1.2 var(--body); padding: 5px 10px; border-radius: 999px; white-space: nowrap; background: var(--info-bg); color: var(--info) }
.chip.good { background: var(--good-bg); color: var(--good) }
.chip.warn { background: var(--warn-bg); color: var(--warn) }
.chip.bad { background: var(--bad-bg); color: var(--bad) }
.chip.info { background: var(--info-bg); color: var(--info) }
.chip.vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor }
@media (prefers-reduced-motion: no-preference) { .chip.vivo::before { animation: latido 1.2s ease-in-out infinite } @keyframes latido { 50% { opacity: 0.25 } } }

.flash { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--r-m); padding: 14px 16px; font-weight: 500; color: var(--ink); background: var(--info-bg); border: 1px solid transparent; border-left: 4px solid var(--info) }
.flash::before { content: "i"; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 750 var(--t-xs)/1 var(--display); background: var(--info); color: var(--surface) }
.flash.good { background: var(--good-bg); border-left-color: var(--good) }
.flash.good::before { content: "✓"; background: var(--good) }
.flash.bad { background: var(--bad-bg); border-left-color: var(--bad) }
.flash.bad::before { content: "!"; background: var(--bad) }
.flash.warn { background: var(--warn-bg); border-left-color: var(--warn) }
.flash.warn::before { content: "!"; background: var(--warn) }
.flash .lista { margin-top: 6px }
.toast { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: max(14px, env(safe-area-inset-bottom, 0px)); margin: 0; background: var(--surface); border: 1px solid var(--line-2); border-left-width: 4px; box-shadow: var(--sombra-2); cursor: pointer }
.toast.good { animation: fuera 0s linear 8s forwards }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: entra 0.28s cubic-bezier(.2, .8, .2, 1) }
  .toast.good { animation: entra 0.28s cubic-bezier(.2, .8, .2, 1), fuera 0.3s ease-in 8s forwards }
  @keyframes entra { from { opacity: 0; transform: translateY(12px) } }
}
@keyframes fuera { to { opacity: 0; visibility: hidden } }

/* data sources strip */
.conn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--t-sm); color: var(--muted) }
.conn > b { font-weight: 600; color: var(--ink-2); margin-right: 2px }
.conn span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap }
.conn span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--line-2) }
.conn span.on { color: var(--ink) }
.conn span.on::before { background: var(--good-mark); border-color: var(--good-mark) }

/* ------------------------------------------------------------------ price position (unit meter) */
.posicion { display: grid; gap: 14px }
.posicion .pos-t { font-size: var(--t-base); color: var(--muted); font-weight: 600 }
.pos-cifra { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px }
.pos-cifra b { font: 750 var(--t-4xl)/1 var(--display); letter-spacing: -0.02em; color: var(--ink) }
.pos-cifra span { font-size: var(--t-body); color: var(--ink-2); max-width: 32ch }
.unidades { display: flex; gap: 2px; height: 18px }
.unidades i { flex: 1 1 0; min-width: 3px; background: var(--igual) }
.unidades i:first-child { border-radius: 4px 0 0 4px } .unidades i:last-child { border-radius: 0 4px 4px 0 }
.unidades i.barato { background: var(--barato) } .unidades i.caro { background: var(--caro) }
.pos-ley { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--t-sm); color: var(--ink-2); list-style: none; padding: 0 }
.pos-ley li { display: inline-flex; align-items: center; gap: 7px }
.pos-ley li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--igual) }
.pos-ley li.barato::before { background: var(--barato) } .pos-ley li.caro::before { background: var(--caro) }
.posicion .conn { font-size: var(--t-xs); gap: 6px 12px }
.pos-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; font-size: var(--t-sm); color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px }

/* ------------------------------------------------------------------ advisor top actions (home) */
.top3 { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) }
.top3 > li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px; box-shadow: var(--sombra-1) }
.top3 .n, .accion-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); font: 700 var(--t-body)/1 var(--display) }
.top3 .c { display: flex; flex-direction: column; gap: 6px; min-width: 0; height: 100% }
.top3 .c > .conf { margin-top: auto; padding-top: 4px }
.top3 .c > b { font: 650 var(--t-md)/1.32 var(--display) }
.top3 .c > p { color: var(--muted); font-size: var(--t-base) }
.conf { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); margin-top: 2px }
.conf-m { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px }
.conf-m i { width: 5px; border-radius: 2px; background: var(--line-2) }
.conf-m i:nth-child(1) { height: 6px } .conf-m i:nth-child(2) { height: 10px } .conf-m i:nth-child(3) { height: 14px }
.conf-1 .conf-m i:nth-child(-n+1), .conf-2 .conf-m i:nth-child(-n+2), .conf-3 .conf-m i:nth-child(-n+3) { background: var(--accent) }

/* ------------------------------------------------------------------ products to advertise (home) */
.pautar-l { list-style: none; padding: 0; display: grid; gap: 10px }
.pp { display: grid; grid-template-columns: 76px 1fr; gap: 6px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 12px; box-shadow: var(--sombra-1); min-width: 0 }
.pp .foto { grid-row: span 2; width: 76px; height: 76px; border-radius: var(--r-m); background: var(--foto); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden }
.pp .foto img { width: 100%; height: 100%; object-fit: contain; padding: 4px }
.pp .foto:empty::before { content: "Sin foto todavía"; padding: 6px; font-size: var(--t-xs); line-height: 1.25; color: var(--muted); text-align: center }
.pp .c { min-width: 0; display: flex; flex-direction: column; gap: 2px }
.pp .nombre { font-weight: 650; font-size: var(--t-base); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.pp .modelo { font-size: var(--t-xs); color: var(--muted) }
.pp .pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px }
.pp .precio { font: 750 var(--t-xl)/1.1 var(--display); color: var(--ink) }
.pp .razon { grid-column: 1 / -1; font-size: var(--t-sm); color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px }
.pp .razon .btn { margin-left: auto }
.tag { display: inline-flex; align-items: center; gap: 6px; font: 650 var(--t-xs)/1.2 var(--body); padding: 4px 9px; border-radius: 6px; background: var(--info-bg); color: var(--info) }
.tag::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor }
.tag.barato { background: color-mix(in srgb, var(--barato) 14%, var(--surface)); color: var(--ink) }
.tag.barato::before { background: var(--barato) }
.tag.ajuste { background: var(--warn-bg); color: var(--warn) }
.tag.caro { background: color-mix(in srgb, var(--caro) 13%, var(--surface)); color: var(--ink) }
.tag.caro::before { background: var(--caro) }
.tag.sin { background: var(--surface-2); color: var(--muted); font-weight: 600 }
.tag.sin::before { display: none }
.nota { margin-top: 2px; font-size: var(--t-sm); color: var(--muted); max-width: 80ch }

/* ------------------------------------------------------------------ alerts */
.avisos { list-style: none; padding: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sombra-1); overflow: hidden }
.aviso { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 14px 16px 14px 18px; border-top: 1px solid var(--line); position: relative }
.aviso:first-child { border-top: 0 }
.aviso::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--info) }
.aviso.bad::before { background: var(--bad-mark) } .aviso.warn::before { background: var(--warn-mark) }
.aviso-i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--info-bg); color: var(--info) }
.aviso.bad .aviso-i { background: var(--bad-bg); color: var(--bad) }
.aviso.warn .aviso-i { background: var(--warn-bg); color: var(--warn) }
.aviso-i svg { width: 17px; height: 17px }
.aviso-c { min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start }
.aviso-c > .btn { margin-top: 2px }
.aviso-t { font-weight: 600; line-height: 1.35 }
.aviso-t .chip { margin-right: 8px; vertical-align: 1px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line) }
.aviso-d { font-size: var(--t-sm); color: var(--ink-2); overflow-wrap: anywhere }
.aviso details { font-size: var(--t-sm); color: var(--ink-2); overflow-wrap: anywhere }
.aviso summary { cursor: pointer; color: var(--link); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center }
.aviso details[open] summary { margin-bottom: 4px }

/* sequence strip */
.loop { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; background: var(--surface) }
.loop li { display: grid; grid-template-columns: 28px 1fr; gap: 2px 12px; padding: 14px 16px; border-top: 1px solid var(--line); counter-increment: paso }
.loop li:first-child { border-top: 0 }
.loop li::before { content: counter(paso); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--accent); color: var(--accent); font: 700 var(--t-xs)/1 var(--display) }
.loop b { font: 650 var(--t-body)/1.25 var(--display) }
.loop span { font-size: var(--t-sm); color: var(--muted) }
.home-dos { display: flex; flex-direction: column; gap: var(--s-5) }
.loop { counter-reset: paso }
.loop-d > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 650 var(--t-md)/1.25 var(--display); color: var(--ink-2) }
.loop-d > summary::-webkit-details-marker { display: none }
.loop-d > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg) }
.loop-d[open] > summary::after { transform: translateY(2px) rotate(-135deg) }
.loop-d[open] > summary { margin-bottom: 10px }
.loop-d > summary:hover { color: var(--ink) }

/* ------------------------------------------------------------------ tables */
.tablebox { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--sombra-1) }
.tablebox.plano { border: 0; border-radius: 0; background: transparent; box-shadow: none }
table { border-collapse: collapse; width: 100%; font-size: var(--t-base) }
th { text-align: left; font: 600 var(--t-xs)/1.25 var(--body); color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line-2); white-space: nowrap; background: var(--surface-2) }
.tablebox.plano th { background: transparent }
td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top }
tbody tr:last-child td { border-bottom: none }
tbody tr:hover td { background: var(--surface-2) }
td.r, th.r { text-align: right }
td .sub { display: block; color: var(--muted); font-size: var(--t-xs); margin-top: 2px }
td .tag { white-space: nowrap }
/* a table inside a half-width card: one block per row (name, then the figures, then the move) */
@media (min-width: 720px) {
  .rtable.angosta thead { display: none }
  .rtable.angosta tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--line) }
  .rtable.angosta tbody tr:first-child { padding-top: 0 }
  .rtable.angosta tbody tr:last-child { border-bottom: 0 }
  .rtable.angosta td { display: block; padding: 0; border: 0; text-align: left }
  .rtable.angosta td:first-child { grid-column: 1 / -1; font-weight: 600; margin-bottom: 4px }
  .rtable.angosta td:first-child .sub { font-weight: 400 }
  .rtable.angosta td:nth-child(2)::before, .rtable.angosta td:nth-child(3)::before { content: attr(data-label) ": "; color: var(--muted); font-size: var(--t-xs); font-weight: 600 }
  .rtable.angosta td:nth-child(4) { grid-column: 1 / -1; margin-top: 4px; font-size: var(--t-sm); color: var(--ink-2) }
  .rtable.angosta tbody tr:hover td { background: none }
}
.vacio { padding: 16px }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2) }
.seg button { font: 600 var(--t-sm)/1 var(--body); color: var(--muted); background: none; border: 0; min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer }
.seg button:hover { color: var(--ink) }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent) }
input[type="search"] { font: var(--t-body) var(--body); min-height: 46px; padding: 0 16px 0 40px; border: 1px solid var(--campo); border-radius: 999px; color: var(--ink); min-width: 0; width: 300px; max-width: 100%;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23767ba0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m12.5 12.5 4 4'/%3E%3C/svg%3E") no-repeat 14px 50% }
.stats { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--t-sm); color: var(--muted) }
.stats .stat b { font: 700 var(--t-md)/1 var(--display); color: var(--ink); margin-right: 4px }

/* ------------------------------------------------------------------ buttons and forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 var(--t-base)/1.1 var(--body); border-radius: 10px; padding: 0 16px; min-height: 44px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-decoration: none; list-style: none; text-align: center }
.btn:hover { border-color: var(--accent); text-decoration: none }
.btn::-webkit-details-marker { display: none }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary) }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover) }
.btn.peligro { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent) }
.btn.peligro:hover { background: var(--bad-bg) }
.btn.chico { min-height: 36px; padding: 0 12px; font-size: var(--t-sm); border-radius: 8px }
.btn.grande { min-height: 52px; font-size: var(--t-md); width: 100% }
.btn[disabled] { opacity: 0.55; cursor: not-allowed }
.btn[aria-busy="true"], form[aria-busy="true"] .btn[disabled] { cursor: progress; opacity: 0.8 }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.row form { margin: 0 }
.form { display: flex; flex-direction: column; gap: 16px }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: var(--t-base) }
.form label small { font-weight: 400; color: var(--muted); font-size: var(--t-xs) }
.form input[type="email"], .form input[type="password"], .form input[type="text"], .form input[type="date"], .form select, .form textarea {
  font: var(--t-body) var(--body); min-height: 48px; padding: 11px 14px; border: 1px solid var(--campo); border-radius: 10px; background: var(--surface); color: var(--ink); width: 100%; min-width: 0 }
.form input::placeholder, .form textarea::placeholder, input[type="search"]::placeholder { color: var(--muted); opacity: 1 }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible, input[type="search"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--accent) }
.form textarea { resize: vertical; min-height: 96px; line-height: 1.5 }
.form input[type="file"] { font: var(--t-base) var(--body); max-width: 100%; padding: 10px; border: 1px dashed var(--line-2); border-radius: 10px; background: var(--surface-2) }
.form details summary { cursor: pointer; color: var(--link); font-weight: 600; min-height: 36px; display: inline-flex; align-items: center }
.form details label { margin-top: 8px }
fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0 }
legend { font: 700 var(--t-md)/1.25 var(--display); padding: 0; margin-bottom: 10px }
.sublegend { font-size: var(--t-sm); font-weight: 600; color: var(--muted); margin-top: 4px }
.angosto-form { max-width: 520px }
.paso-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font: 700 var(--t-sm)/1 var(--display); margin-right: 10px; vertical-align: 2px }

/* ------------------------------------------------------------------ simple pages: login, errors */
body.simple { background: var(--band); color: var(--band-ink); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column }
.simple main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 28px 40px; width: 100% }
.simple .card { color: var(--ink); border: 1px solid color-mix(in srgb, var(--line-2) 55%, transparent); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55); padding: 26px 22px }
.simple-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 26px }
.simple-marca img { height: 46px; width: auto }
.simple-marca h1 { font-size: var(--t-3xl); color: var(--band-ink) }
.simple-marca p { color: var(--band-muted); font-size: var(--t-md); max-width: 34ch }
.simple-pie { margin-top: 22px; font-size: var(--t-xs); color: var(--band-muted) }
.login { display: flex; flex-direction: column; gap: 16px }
.login h2 { font-size: var(--t-xl) }
.ayuda { font-size: var(--t-sm); color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px }
.codigo { font: 700 64px/1 var(--display); color: var(--accent); letter-spacing: -0.04em }
.error-c { display: flex; flex-direction: column; gap: 12px; align-items: stretch }
.h-error { font-size: var(--t-2xl) }

/* ------------------------------------------------------------------ creative tool (Artes y videos) */
.pedir { gap: 26px; padding: 20px }
.pedir fieldset + fieldset { border-top: 1px solid var(--line); padding-top: 20px }
.pedir-envio { position: sticky; bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 3 }
.pedir-envio .btn { box-shadow: 0 10px 24px -8px rgba(12, 16, 36, 0.5) }
.pedir-nota { text-align: center; margin-top: -14px }
.productos { max-height: min(60vh, 440px); overflow-y: auto; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--surface); -webkit-overflow-scrolling: touch; overscroll-behavior: contain }
.prod { display: grid !important; grid-template-columns: 22px 44px 1fr auto; gap: 12px !important; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; font-weight: 400 !important; min-height: 64px }
.prod:last-child { border-bottom: 0 }
.prod:hover { background: var(--surface-2) }
.prod input { width: 22px; height: 22px; accent-color: var(--accent); margin: 0 }
.prod .marca { width: 44px; height: 44px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font: 750 10.5px/1 var(--display); letter-spacing: 0.01em; text-align: center; overflow: hidden; padding: 2px }
.prod .t { min-width: 0 }
.prod .t b { display: block; font-weight: 600; font-size: var(--t-base); line-height: 1.3 }
.prod .t small { color: var(--muted); font-size: var(--t-xs); font-variant-numeric: tabular-nums }
.prod .precio { font: 700 var(--t-base)/1 var(--display); white-space: nowrap }
.prod:has(input:checked) { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent) }
.prod:has(input:checked) .marca { background: var(--primary); color: var(--on-primary) }
.contador { font-size: var(--t-sm); color: var(--muted) }
.pedir input[type="search"] { width: 100% }
.toggles { display: flex; flex-wrap: wrap; gap: 8px }
.toggle { position: relative; display: inline-flex !important; flex-direction: row !important; cursor: pointer }
.toggle input, .estilo input { position: absolute; opacity: 0; width: 1px; height: 1px }
.toggle span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font: 600 var(--t-base)/1 var(--body); color: var(--ink-2) }
.toggle span:hover { border-color: var(--accent) }
.toggle input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
.toggle input:checked + span::before { content: "✓"; color: var(--on-accent); font-weight: 700 }
.toggle input:focus-visible + span, .estilo input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px }
.ratio { display: inline-block; border: 2px solid currentColor; border-radius: 3px; opacity: 0.8 }
.ratio.r-feed { width: 13px; height: 16px } .ratio.r-historia { width: 10px; height: 18px } .ratio.r-cuadrado { width: 15px; height: 15px }
.toggle input:checked + span .ratio { display: none }
.estilos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.estilo { position: relative; cursor: pointer; display: block !important }
.estilo span { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: var(--r-m); border: 1px solid var(--line-2); background: var(--surface); font: 600 var(--t-sm)/1.2 var(--body); color: var(--ink-2); text-align: center }
.estilo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; background: var(--band) }
.estilo span:hover { border-color: var(--accent) }
.estilo input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); color: var(--ink) }
.estilo input:checked + span b::before { content: "✓ " }
.estilo b { font-weight: 600 }
@media (min-width: 980px) {
  .pedir { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 36px; align-items: start; padding: 26px }
  .pedir > fieldset:first-of-type { grid-column: 1; grid-row: 1 / span 4 }
  .pedir > :not(fieldset:first-of-type) { grid-column: 2 }
  .pedir fieldset + fieldset { border-top: 0; padding-top: 0 }
  .pedir > fieldset:nth-of-type(3) { border-top: 1px solid var(--line); padding-top: 20px }
  .pedir .productos { max-height: 560px }
  .pedir-envio { position: static }
  .pedir-envio .btn { box-shadow: none }
  .estilos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px }
}

/* jobs */
.jobs { display: flex; flex-direction: column }
.jobs:empty { display: none }
.job { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line) }
.job:first-of-type { border-top: 0; padding-top: 4px }
.job p { min-width: 0; font-size: var(--t-base); overflow-wrap: anywhere }
.job small { display: block; color: var(--muted); font-size: var(--t-xs) }
.job small.err, .err-inline { color: var(--bad) }
.job-t { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums }
.job-barra { flex: 0 1 200px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden }
.job-barra i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit }
.job-t.tarde .job-barra i { background: var(--warn-mark) }
@media (prefers-reduced-motion: no-preference) { .job-barra i { transition: width 0.9s linear } }
.err-inline { font-size: var(--t-sm); font-weight: 600 }

/* gallery */
.filtros { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); scroll-margin-top: 72px; align-self: flex-start; max-width: 100% }
.filtros a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; text-decoration: none; font: 600 var(--t-sm)/1 var(--body); color: var(--muted); padding: 0 14px; border-radius: 999px }
.filtros a:hover { color: var(--ink) }
.filtros a span { font-size: var(--t-xs); min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--surface-2); color: var(--ink-2) }
.filtros a[aria-current="page"] { background: var(--accent); color: var(--on-accent) }
.filtros a[aria-current="page"] span { background: rgba(255, 255, 255, 0.2); color: inherit }
.media { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 22px 18px; align-items: start }
.media .empty { grid-column: 1 / -1 }
.m { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 72px; box-shadow: var(--sombra-1) }
.m .frame { background: var(--marco); position: relative; overflow: hidden; aspect-ratio: 4 / 5; max-height: 620px; width: 100% }
.m .frame img, .m .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block }
.m .meta { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1 }
.m-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap }
.m-tipo { font-size: var(--t-xs); font-weight: 600; color: var(--muted) }
.m .m-t { font-weight: 650; font-size: var(--t-base); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.m .m-s { font-size: var(--t-xs); color: var(--muted) }
.m .quien { color: var(--muted); font-size: var(--t-xs) }
.nota-cambio { font-size: var(--t-sm); background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; color: var(--ink) }
.ficha-d { font-size: var(--t-sm); border-radius: 10px; background: var(--warn-bg); color: var(--ink) }
.ficha-d summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px; font-weight: 600; color: var(--warn) }
.ficha-d summary::-webkit-details-marker { display: none }
.ficha-d summary::before { content: "!"; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--warn); color: var(--surface); font: 750 12px/1 var(--display); flex: none }
.ficha-d summary::after { content: "Ver"; margin-left: auto; font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em }
.ficha-d[open] summary::after { content: "Ocultar" }
.ficha-d ul { margin: 0; padding: 0 12px 12px 32px; display: flex; flex-direction: column; gap: 4px; color: var(--ink-2) }
.acciones-m { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 6px }
.acciones-m > form:first-child { grid-column: 1 / -1 }
.acciones-m form .btn, .acciones-m > .btn, .acciones-m summary.btn { width: 100%; white-space: nowrap; padding: 0 10px }
.acciones-m .cambio[open] { grid-column: 1 / -1; order: 3 }
.cambio { width: 100% }
.cambio[open] summary { margin-bottom: 8px; border-color: var(--accent) }
.cambio .form { gap: 8px }
.empty { border: 1px dashed var(--line-2); border-radius: var(--r-l); padding: 26px 20px; color: var(--muted); text-align: center; background: var(--surface); display: flex; flex-direction: column; align-items: center; gap: 12px }
.empty::before { content: ""; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%237d82b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='14' height='12' rx='2'/%3E%3Cpath d='M3 8h14'/%3E%3C/svg%3E") no-repeat center }
.empty p { max-width: 46ch }

/* ------------------------------------------------------------------ campaign kit */
.budget { display: flex; gap: 2px; height: 22px }
.budget div { display: flex; align-items: center; justify-content: center; font: 650 var(--t-xs)/1 var(--body); color: #fff; white-space: nowrap; min-width: 4px; background: var(--barato) }
.budget div:first-child { border-radius: 6px 0 0 6px } .budget div:last-child { border-radius: 0 6px 6px 0 }
.budget div.google { background: var(--google) }
.legend { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 6px 18px; font-size: var(--t-sm); color: var(--ink-2) }
.legend li { display: flex; align-items: baseline; gap: 8px }
.legend li b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink) }
.legend i { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--barato); transform: translateY(1px) }
.legend i.google { background: var(--google) }
.copy { display: flex; flex-direction: column; gap: 10px }
.copy .titular { font: 700 var(--t-lg)/1.25 var(--display) }
.copy .txt { font: var(--t-base)/1.55 var(--body); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; white-space: pre-wrap; margin: 0; overflow-wrap: anywhere; color: var(--ink) }

/* ------------------------------------------------------------------ report */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--sombra-1); min-width: 0 }
.kpi > span { order: -1; font-size: var(--t-sm); color: var(--muted); line-height: 1.3 }
.kpi > b { font: 750 var(--t-2xl)/1.05 var(--display); color: var(--ink); overflow-wrap: anywhere }
.kpi > small { font-size: var(--t-xs); color: var(--muted) }
/* the report's amounts carry cents: on a phone's two columns «Q14,447.70» fits whole at this size */
@media (max-width: 479px) { .kpis:not(.kpis-m) > .kpi > b { font-size: 23px } }
.kpi.pending { background: var(--surface-2); border-style: dashed; border-color: var(--line-2); box-shadow: none }
.kpi.pending > b { font: 650 var(--t-md)/1.2 var(--body); color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px }
.kpi.pending > b::before { content: ""; width: 18px; height: 18px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23767ba0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M10 6v4.2l2.6 1.8'/%3E%3C/svg%3E") no-repeat center / contain }
.trae { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s-3) }
.trae li { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line) }
.trae b { font: 650 var(--t-base)/1.3 var(--display) }
.trae span { font-size: var(--t-sm); color: var(--muted) }
.historial { display: flex; flex-wrap: wrap; gap: 8px }
.historial a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; font-size: var(--t-sm); font-weight: 600; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); background: var(--surface) }
.historial a:hover { border-color: var(--accent) }
.historial a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }

/* ------------------------------------------------------------------ connections */
.cx-resumen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px }
.cx-resumen b { font: 750 var(--t-4xl)/1 var(--display); letter-spacing: -0.02em; color: var(--band-ink) }
.cx-resumen span { color: var(--band-muted) }
.cx-lista { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)) }
.estado-cx { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 4px 12px; align-content: start; padding: 16px 16px 16px 18px; overflow: hidden }
.estado-cx::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-2) }
.estado-cx.good::before { background: var(--good-mark) } .estado-cx.warn::before { background: var(--warn-mark) } .estado-cx.bad::before { background: var(--bad-mark) } .estado-cx.info::before { background: var(--accent) }
.cx-i { grid-row: span 3; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--info-bg); color: var(--info) }
.cx-i svg { width: 18px; height: 18px }
.estado-cx.good .cx-i { background: var(--good-bg); color: var(--good) }
.estado-cx.warn .cx-i { background: var(--warn-bg); color: var(--warn) }
.estado-cx.bad .cx-i { background: var(--bad-bg); color: var(--bad) }
.estado-cx h2 { font-size: var(--t-md) }
.estado-cx .chip { justify-self: start }
.estado-cx p { font-size: var(--t-sm); color: var(--muted) }
.archivos { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px }
.archivos li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--t-sm); padding: 8px 10px; background: var(--surface-2); border-radius: 8px }
.archivos small { color: var(--muted) }
.archivos form { margin: 0 0 0 auto }
.sub2 { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 4px }
/* the Shopify card: state, «Conectar con Shopify», the store's own app keys folded away */
.cx-datos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.cx-datos li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--t-sm) }
.cx-datos li:last-child { border-bottom: 1px solid var(--line) }
.cx-datos span { color: var(--muted) }
.cx-datos b { overflow-wrap: anywhere }
.otra-via { border-top: 1px solid var(--line); padding-top: 6px }
.otra-via > summary { cursor: pointer; color: var(--link); font-weight: 600; font-size: var(--t-sm); min-height: 44px; display: flex; align-items: center }
.otra-via[open] > summary { margin-bottom: 8px }
.conectar-shopify { gap: 10px }
/* «Competencia»: the stores the radar compares with, one row each */
.competencia-f { gap: 18px }
.comp-l { border: 1px solid var(--line-2); border-radius: var(--r-m); overflow: hidden; background: var(--surface) }
.comp { display: grid !important; grid-template-columns: 22px 1fr; gap: 14px !important; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; font-weight: 400 !important; min-height: 60px }
.comp:last-child { border-bottom: 0 }
.comp:hover { background: var(--surface-2) }
.comp input { width: 22px; height: 22px; accent-color: var(--accent); margin: 0 }
.comp:has(input:checked) { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent) }
.comp:has(input:disabled) { cursor: default }
.comp-t { min-width: 0; display: flex; flex-direction: column; gap: 2px }
.comp-t b { font-weight: 600; font-size: var(--t-base) }
.comp-t small { color: var(--muted); font-size: var(--t-xs); overflow-wrap: anywhere }
.comp-t .comp-nota { color: var(--warn) }
/* «Marca»: the store's own logos, colors and display font. The previews use the store's colors (the ones the ads
   will really use, set by the page and updated by app.js as --m-fondo / --m-acento / --m-tinta), not TADIA's. */
.marca-l { display: grid; gap: 24px; align-items: start }
.marca-f { gap: 24px }
.marca-f fieldset + fieldset { border-top: 1px solid var(--line); padding-top: 20px }
.marca-f[data-fuente="archivo"] { --fuente-m: "Archivo", var(--display) }
.marca-f[data-fuente="inter"] { --fuente-m: "Inter", var(--display) }
.logos-op { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)) }
.logo-op { display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.logo-op > p.small { color: var(--ink-2) }
.logo-caja { height: 116px; border-radius: var(--r-m); display: grid; place-items: center; padding: 16px 20px; overflow: hidden }
.logo-caja img { display: block; max-height: 64px; max-width: 100%; width: auto; height: auto; object-fit: contain }
.logo-caja.oscura { background: var(--m-fondo, #1f2937); color: #fff }
.logo-caja.clara { background: #fff; border: 1px solid var(--line-2); color: var(--m-fondo, #1f2937) }
.logo-palabra { font: 800 var(--t-2xl)/1.05 var(--fuente-m); letter-spacing: -0.01em; text-align: center; overflow-wrap: anywhere }
.logo-falta { font: 600 var(--t-sm)/1.3 var(--body); color: #5b6180 }
.colores-m { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) }
.color-op { display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.color-op input[type="color"] { width: 100%; height: 48px; padding: 3px; border-radius: var(--r-s); border: 1px solid var(--campo); background: var(--surface); cursor: pointer }
.color-op input[type="color"]:disabled { cursor: default }
.veredicto { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); line-height: 1.4; color: var(--good) }
.veredicto.cambia { color: var(--warn) }
.pastilla-color { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line-2); margin-top: 0 }
.marca-mini { display: grid; gap: 10px; justify-items: start; padding: 20px; border-radius: var(--r-m); background: var(--m-fondo, #1f2937); color: #fff }
.mini-titulo { font: 800 var(--t-2xl)/1.08 var(--fuente-m); letter-spacing: -0.015em }
.mini-titulo em { font-style: normal; color: var(--m-acento, #e5e7eb) }
.mini-precio { font: 800 var(--t-4xl)/1 var(--fuente-m); color: var(--m-acento, #e5e7eb); font-variant-numeric: tabular-nums }
.mini-boton { justify-self: stretch; text-align: center; padding: 14px 16px; border-radius: 999px; background: var(--m-acento, #e5e7eb); color: var(--m-tinta, #0c1024); font: 700 var(--t-body)/1 var(--body) }
.fuentes-op { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) }
.fuente-op { position: relative; cursor: pointer; display: block !important }
.fuente-op input { position: absolute; opacity: 0; width: 1px; height: 1px }
.fuente-op > span { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--r-m); border: 1px solid var(--line-2); background: var(--surface); font-weight: 400 }
.fuente-op > span small { color: var(--muted); font-size: var(--t-xs) }
.fuente-op > span small b { color: var(--ink-2) }
.fuente-op:hover > span { border-color: var(--accent) }
.fuente-op input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) }
.fuente-op input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px }
.fuente-op input:disabled + span { cursor: default }
.esp { font-size: 25px; line-height: 1.1; font-weight: 800; letter-spacing: -0.015em; color: var(--ink) }
.esp-archivo { font-family: "Archivo", var(--display) }
.esp-inter { font-family: "Inter", var(--display) }
.muestra-c { display: flex; flex-direction: column; gap: 12px }
.muestra-img { display: block; width: 100%; max-width: 540px; height: auto; aspect-ratio: 4 / 5; border-radius: var(--r-m); background: var(--surface-2); margin-inline: auto }
@media (min-width: 980px) {
  .marca-l { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) }
  .muestra-c { position: sticky; top: 76px }
}
.pasos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px }
.pasos li::marker { font-family: var(--display); font-weight: 700; color: var(--accent) }
.lista { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px }
.vista { max-height: 560px; width: auto; border-radius: var(--r-m) }

footer { border-top: 1px solid var(--line); padding-block: 20px 32px; color: var(--muted); font-size: var(--t-sm) }
footer b { color: var(--ink-2); font-weight: 600 }

/* ------------------------------------------------------------------ radar: diverging bars */
.barras { list-style: none; padding: 0; display: flex; flex-direction: column }
.barra { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n v" "t t"; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--line); min-width: 0 }
.barra:first-child { border-top: 0 }
.b-n { grid-area: n; min-width: 0; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.b-v { grid-area: v; font-size: var(--t-sm); font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink) }
.b-t { grid-area: t; position: relative; height: 14px }
.b-t .b-z { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--eje) }
.b-t .b-f { position: absolute; top: 0; bottom: 0; background: var(--igual); min-width: 2px }
.b-f.caro { background: var(--caro); border-radius: 0 4px 4px 0 }
.b-f.barato { background: var(--barato); border-radius: 4px 0 0 4px }
.b-e { display: none }
.barras-ley { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-xs); color: var(--muted); padding-top: 6px; border-top: 1px solid var(--line-2) }
.barras-ley span { display: inline-flex; align-items: center; gap: 6px }
.barras-ley span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--barato) }
.barras-ley span.caro::before { background: var(--caro) }
@media (min-width: 760px) {
  .barra { position: relative; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-template-areas: "n t"; align-items: center; gap: 0 14px; padding: 5px 0; border-top: 0 }
  .barra:hover { background: var(--surface-2) }
  .b-t { margin: 0 70px }
  .b-v { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
  .b-e { display: block; position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: var(--t-xs); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink) }
  .b-e.d { left: calc(var(--fin) + 8px) }
  .b-e.i { right: calc(100% - var(--fin) + 8px) }
  .barras-ley { margin-left: 384px; margin-right: 70px }
}

/* ------------------------------------------------------------------ advisor («Asesor») */
.resumen { font-size: var(--t-lg); line-height: 1.55; color: var(--ink); max-width: 72ch }
.informe-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px }
.acciones { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0 }
.accion { display: grid; grid-template-columns: 36px 1fr; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 18px; box-shadow: var(--sombra-1) }
.accion-c { display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.accion-c > b { font: 650 var(--t-lg)/1.32 var(--display) }
.accion-c > p { color: var(--ink-2); font-size: var(--t-base); max-width: 75ch }
.accion-datos { background: var(--surface-2); border-radius: var(--r-m); padding: 10px 14px }
.accion-datos > p { font-size: var(--t-xs); font-weight: 600; color: var(--muted); margin-bottom: 4px }
.datos { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: var(--t-sm); overflow-wrap: anywhere; color: var(--ink-2) }
.accion-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px }
.fuentes { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--muted) }
.fuentes a { overflow-wrap: anywhere; display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; background: var(--accent-soft); text-decoration: none; font-weight: 600; font-size: var(--t-xs) }
.fuentes a:hover { text-decoration: underline }
.pautar { list-style: none; padding: 0; gap: 0 }
.pautar li { padding: 12px 0; border-top: 1px solid var(--line) }
.pautar li:first-child { border-top: 0; padding-top: 0 }
.pautar li .sub, .pautar li a { display: block; font-size: var(--t-sm); color: var(--muted) }
.pautar li a { color: var(--link); font-weight: 600; margin-top: 4px }
.fuentes-todas { margin-top: 12px }
.fuentes-todas summary { cursor: pointer; color: var(--link); font-weight: 600; min-height: 36px; display: inline-flex; align-items: center }
.chat { padding: 0; overflow: hidden; gap: 0 }
.chat > .cardhead { padding: 16px 18px; margin: 0; border-bottom: 1px solid var(--line) }
.hilo { display: flex; flex-direction: column; gap: 12px; max-height: 620px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px; background: var(--surface-2); min-height: 140px }
.msg { border-radius: 18px; padding: 10px 14px; max-width: 85%; overflow-wrap: anywhere; font-size: var(--t-base); line-height: 1.5 }
.msg > b { display: block; font: 600 var(--t-xs)/1.4 var(--body); color: var(--muted); margin-bottom: 2px }
.msg.yo { align-self: flex-end; background: var(--primary); color: var(--on-primary); border-bottom-right-radius: 6px }
.msg.yo > b { color: inherit; opacity: 0.85 }
.msg.asesor { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px }
.msg.mal { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: var(--bad-bg) }
.msg.mal p { color: var(--ink) }
.msg .fuentes { margin-top: 8px }
.msg small { display: block; margin-top: 4px; font-size: var(--t-xs) }
.vacio-chat { align-self: center; text-align: center; max-width: 44ch; margin: auto; padding: 8px }
.md p + p, .md p + ul, .md ul + p, .md p + ol, .md ol + p { margin-top: 8px }
.md ul, .md ol { margin: 6px 0 0; padding-left: 20px }
.md a { color: var(--link) }
.puntos { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle }
.puntos::before, .puntos::after, .puntos i { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted) }
@media (prefers-reduced-motion: no-preference) {
  .puntos::before, .puntos::after, .puntos i { animation: punto 1.2s ease-in-out infinite }
  .puntos i { animation-delay: 0.15s } .puntos::after { animation-delay: 0.3s }
  @keyframes punto { 0%, 100% { opacity: 0.3; transform: translateY(0) } 40% { opacity: 1; transform: translateY(-3px) } }
}
.chat-form { padding: 14px 18px 18px; border-top: 1px solid var(--line); gap: 10px }
.chat-form textarea { min-height: 80px }
.chat-pie { padding: 0 18px 16px; font-size: var(--t-xs) }
.chat-nota { font-size: var(--t-sm); color: var(--muted) }
.chat-nota.alto { color: var(--warn); font-weight: 600 }
.margenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 12px; align-items: end }
.margen { font-weight: 600 !important; font-size: var(--t-sm) !important }
.con-unidad { position: relative; display: block }
.con-unidad input { padding-right: 38px !important }
.con-unidad i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--muted); font-weight: 600; pointer-events: none }
.apoyos { display: flex; flex-direction: column; gap: 12px }
.apoyo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2) }
.apoyo label { font-size: var(--t-sm) !important }
.apoyo .ancho { grid-column: 1 / -1 }
.negocio-envio { position: sticky; bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 3 }
.negocio-envio .btn { box-shadow: 0 10px 24px -8px rgba(12, 16, 36, 0.5) }
@media (min-width: 720px) { .negocio-envio { position: static } .negocio-envio .btn { box-shadow: none; width: auto } }

/* ------------------------------------------------------------------ product page warning (tiendas.calidad) */
.aviso-ficha { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: var(--t-xs); line-height: 1.4 }
.aviso-ficha b { font-weight: 650 }
.aviso-ficha .linea { display: block; padding-left: 12px; text-indent: -10px; color: var(--ink-2) }
.aviso-ficha .linea::before { content: "· " }
.prod:not(:has(input:checked)) .aviso-ficha { display: inline-flex; padding: 2px 8px; font-size: var(--t-xs) }
.prod:not(:has(input:checked)) .aviso-ficha .linea { display: none }
.prod:not(:has(input:checked)) .aviso-ficha b { font-size: 0 }
.prod:not(:has(input:checked)) .aviso-ficha b::after { content: "Ficha por revisar"; font-size: var(--t-xs) }

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: no-preference) {
  .solapa { animation: sube 0.32s cubic-bezier(.2, .8, .2, 1) both }
  @keyframes sube { from { opacity: 0; transform: translateY(8px) } }
}

/* ------------------------------------------------------------------ wider screens */
@media (min-width: 720px) {
  .yo-t { display: block }
  .brand img { height: 34px }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .pp { grid-template-columns: 88px 1fr }
  .pp .foto { width: 88px; height: 88px }
  .toast { left: auto; right: 24px; top: 132px; bottom: auto; max-width: 440px }
}
@media (min-width: 1000px) {
  .head { padding-block: 30px 34px }
  .head:has(+ .solapa) { padding-bottom: 88px }
  .head + .solapa { margin-top: -82px }
  .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)) }
  .pautar-l { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px }
  .pp { display: flex; flex-direction: column; gap: var(--s-2); padding: 14px }
  .pp .foto { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-m) }
  .pp .foto img { padding: 10px }
  .pp .pie { flex-direction: column; align-items: flex-start; gap: 6px }
  .pp .razon { flex: 1; flex-flow: column nowrap; align-items: stretch; gap: 10px }
  .pp .razon .btn { margin: auto 0 0; width: 100% }
  .home-dos { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-5); align-items: start }
  .home-dos > :only-child { grid-column: 1 / -1 }
  /* decisions in the narrow column: action chip on the left, what and why stacked */
  .home-dos .rtable thead { display: none }
  .home-dos .rtable tr { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 3px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line) }
  .home-dos .rtable tbody tr:last-child { border-bottom: 0 }
  .home-dos .rtable td { display: block; padding: 0; border: 0 }
  .home-dos .rtable td:first-child { grid-row: span 2 }
  .home-dos .rtable td:nth-child(2) { font-weight: 600 }
  .home-dos .rtable td:nth-child(3) { grid-column: 2; font-size: var(--t-sm) }
  .home-dos .rtable tbody tr:hover td { background: none }
  .solapa.posicion-home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; column-gap: 40px; padding: 22px 26px }
  .solapa.posicion-home .pos-pie, .solapa.posicion-home .conn { grid-column: 1 / -1 }
  .solapa.posicion-home .unidades { height: 24px }
  .loop li { border-top: 0; border-left: 1px solid var(--line) }
  .loop li:first-child { border-left: 0 }
}

/* ------------------------------------------------------------------ phones */
@media (max-width: 719px) {
  .brand .sys small { display: none }
  .top-fila { gap: 10px }
  .brand { gap: 10px }
  .brand img { height: 26px }
  .brand .sys { font-size: var(--t-sm); padding-left: 10px }
  .mi-cuenta { padding: 0 2px }
  .salir { padding: 0 12px; font-size: var(--t-xs); min-height: 40px }
  .card { padding: 16px; border-radius: 16px }
  .toolbar .seg { width: 100% } .seg button { flex: 1; padding: 0 8px }
  input[type="search"] { width: 100% }
  .accion { grid-template-columns: 1fr; gap: 10px; padding: 16px }
  .prod { grid-template-columns: 22px 40px 1fr; grid-template-areas: "r m t" "r m p"; row-gap: 2px !important; padding: 12px }
  .prod input { grid-area: r } .prod .marca { grid-area: m; width: 40px; height: 40px } .prod .t { grid-area: t } .prod .precio { grid-area: p; font-size: var(--t-sm) }
  /* connection status as compact rows */
  .cx-lista { gap: 8px }
  .estado-cx { grid-template-columns: 34px 1fr auto; padding: 12px 14px 12px 16px; gap: 2px 10px }
  .estado-cx .cx-i { grid-row: span 2 }
  .estado-cx .chip { grid-column: 3; grid-row: 1; justify-self: end }
  .estado-cx p { grid-column: 2 / -1 }
  .msg { max-width: 92% }
  /* tables become stacked cards */
  .rtable thead { display: none }
  .rtable, .rtable tbody, .rtable tr, .rtable td { display: block; width: 100% }
  .rtable tr { padding: 12px 14px; border-bottom: 1px solid var(--line) }
  .rtable tbody tr:hover td { background: none }
  .rtable tr:last-child { border-bottom: 0 }
  .rtable td { border: 0; padding: 3px 0 3px 104px; text-align: left !important; position: relative; min-height: 26px; overflow-wrap: anywhere }
  .rtable td::before { content: attr(data-label); position: absolute; left: 0; top: 5px; width: 96px; font: 600 var(--t-xs)/1.4 var(--body); color: var(--muted) }
  .rtable td[colspan] { padding-left: 0 }
  .rtable td[colspan]::before { content: none }
  .rtable td:first-child { padding-left: 0; font-weight: 600; margin-bottom: 4px }
  .rtable td:first-child::before { content: none }
  .rtable td:first-child .sub { font-weight: 400 }
  .tablebox.plano .rtable tr { padding-inline: 0 }
  /* radar rows: one compact block per product */
  #radar-tabla tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 14px }
  #radar-tabla td { padding: 0; min-height: 0 }
  #radar-tabla td::before { content: none }
  #radar-tabla td:nth-child(1) { grid-column: 1 / -1 }
  #radar-tabla td:nth-child(2) { grid-column: 1; font-size: var(--t-sm) }
  #radar-tabla td:nth-child(2)::before { content: attr(data-label) " "; position: static; color: var(--muted); font-weight: 500 }  /* the store's name */
  #radar-tabla td:nth-child(3) { grid-column: 1; font-size: var(--t-sm); color: var(--ink-2) }
  #radar-tabla td:nth-child(4) { grid-column: 2; grid-row: 2 / span 2; align-self: center; text-align: right !important }
  #radar-tabla td:nth-child(4) .sub { text-align: right }
  #radar-tabla td:nth-child(5) { display: none }
  #radar-tabla td .sub { margin-top: 0 }
}

/* ------------------------------------------------------------------ touch screens: every target at least 44 px */
@media (pointer: coarse) {
  .btn.chico, .salir, .seg button, .filtros a, .historial a, .fuentes a, .aviso summary, .ficha-d summary,
  .form details summary, .fuentes-todas summary { min-height: 44px }
}

/* ---------------------------------------------------------------- TADIA Tiendas: stores, picker and admin */
.marca-tt { display: inline-flex; align-items: center; gap: 10px; font: 500 var(--t-md)/1 var(--display); color: var(--band-muted); letter-spacing: 0.01em; white-space: nowrap }
.marca-tt b { color: var(--band-ink); font-weight: 650; letter-spacing: 0.04em }
.glifo { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--glifo); color: #fff; box-shadow: 0 6px 16px -6px rgba(49, 46, 129, 0.7) }
.glifo svg { width: 19px; height: 19px; display: block }
.simple-marca .marca-tt { font-size: var(--t-xl); gap: 12px }
.simple-marca .glifo { width: 44px; height: 44px; border-radius: 13px }
.simple-marca .glifo svg { width: 25px; height: 25px }
.marca-tienda { font: 700 19px/1.05 var(--display); color: var(--band-ink); max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.brand img.logo-tienda { height: 30px; width: auto; max-width: 150px; object-fit: contain }
.enlace-top { color: var(--band-ink); font: 600 var(--t-sm)/1 var(--body); text-decoration: none; padding: 10px 10px; border-radius: 999px; white-space: nowrap }
.enlace-top { color: var(--band-muted) }
.enlace-top:hover, .enlace-top[aria-current="page"] { background: rgba(255, 255, 255, 0.1); color: var(--band-ink) }
/* pages without tabs: the head band continues the header right away, a hairline between them */
.top-global { border-bottom: 1px solid var(--band-line) }
.global .head { margin-top: 0 }
.tiendas-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px }
.tienda-c { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px; box-shadow: var(--sombra-1); min-height: 84px }
.tienda-c:hover { border-color: var(--accent) }
.tienda-c .sello { flex: none; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; background: var(--marca, var(--band)); overflow: hidden }
.tienda-c .sello img { width: 50px; height: 50px; object-fit: contain }
.tienda-c .sello span { color: var(--marca-acento, #fff); font: 700 var(--t-xl)/1 var(--display) }
.tienda-c b { display: block; font: 650 var(--t-md)/1.2 var(--display) }
.tienda-c small { color: var(--muted) }
.tienda-r { display: block; margin-top: 6px; font-size: var(--t-xs); color: var(--ink-2) }
.tienda-r .espera { font-weight: 650; color: var(--warn) }
.kpis.kpis-admin { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) }
.admin-tabla td .chip { white-space: nowrap }
.primeros-l { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.primeros-l .paso { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line) }
.primeros-l .paso > div { flex: 1; min-width: 0 }
.primeros-l .paso p { margin: 2px 0 0 }
.primeros-l .paso-listo b { color: var(--muted); font-weight: 600 }
@media (max-width: 719px) {  /* phones: the state and the action share the first line, the text gets the full width */
  .primeros-l .paso { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "estado accion" "texto texto"; gap: 8px 12px }
  .primeros-l .paso > .chip { grid-area: estado; justify-self: start }
  .primeros-l .paso > div { grid-area: texto }
  .primeros-l .paso > .btn { grid-area: accion }
}
.clave-una-vez { font: 700 var(--t-xl)/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; background: var(--accent-soft); padding: 10px 14px; border-radius: var(--r-s); display: inline-block; user-select: all }
.colores { display: flex; gap: 16px; flex-wrap: wrap }
.colores label { flex: 1 1 140px }
.colores input[type="color"] { width: 100%; height: 44px; padding: 2px; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--surface) }
.campo-error { color: var(--bad); font-size: var(--t-xs) }
@media (max-width: 719px) {
  /* phones: with extra header links (store switch, admin) the product line gives way; nothing overlaps */
  .top-fila:has(.enlace-top) .brand .sys, .top-global .brand .sys { display: none }
  .top-fila { flex-wrap: wrap; row-gap: 4px }
  .who { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; gap: 4px }
  .marca-tt { font-size: var(--t-body); gap: 8px }
  .marca-tt .glifo { width: 30px; height: 30px; border-radius: 9px }
  .marca-tt .glifo svg { width: 17px; height: 17px }
  .enlace-top { padding: 8px 8px; font-size: var(--t-xs) }
  .marca-tienda { max-width: 11ch; font-size: var(--t-md) }
  .brand img.logo-tienda { height: 26px; max-width: 120px }
}
.primeros { margin-bottom: 20px }

/* ---------------------------------------------------------------- metrics («Métricas») */
.periodos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.periodos a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.32); color: var(--band-ink); text-decoration: none; font: 600 var(--t-sm)/1 var(--body); white-space: nowrap }
.periodos a:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--indigo-claro) }
.periodos a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
.kpis.kpis-m { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.kpi-m > b { font-size: var(--t-2xl) }
.delta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--t-xs); color: var(--muted); line-height: 1.35 }
.delta b { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums }
.delta .flecha { display: inline-flex; width: 12px; height: 12px; color: var(--muted) }
.delta .flecha svg { width: 12px; height: 12px }
.delta.bien b, .delta.bien .flecha { color: var(--good) }
.delta.mal b, .delta.mal .flecha { color: var(--bad) }
.graficas { display: grid; gap: 26px }
.graf { margin: 0; min-width: 0 }
.graf figcaption { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; margin-bottom: 10px }
.graf figcaption b { font: 650 var(--t-body)/1.25 var(--display) }
.graf figcaption span { font-size: var(--t-xs); color: var(--muted) }
.graf-c { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px }
.graf-y { position: relative; min-width: 40px; height: 150px }
.graf-y span { position: absolute; right: 0; transform: translateY(-50%); font-size: 12px; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap }
.graf-p { display: block; overflow: visible }
.graf-p .rej { stroke: var(--line); stroke-width: 1 }
.graf-p .base { stroke: var(--eje); stroke-width: 1 }
.graf-p .b { fill: var(--dato) }
.graf-p .curso .b { fill: var(--dato-suave) }
.graf-p .hit { fill: transparent }
.graf-p .falta { stroke: var(--line-2); stroke-width: 2; stroke-linecap: round }
.graf-p .barra { outline: none }
.graf-p .barra:hover .b, .graf-p .barra:focus-visible .b { fill: var(--dato-hover) }
.graf-p .barra:focus-visible .hit { stroke: var(--focus); stroke-width: 2 }
.graf-p text { font: 12px var(--body); fill: var(--muted) }
.graf-p text.val { font-weight: 650; fill: var(--ink); font-variant-numeric: tabular-nums }
.clave-graf { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--t-xs); color: var(--muted) }
.clave-graf i { width: 10px; height: 10px; border-radius: 3px; background: var(--dato) }
.clave-graf i.curso { background: var(--dato-suave); margin-left: 8px }
.tabla-graf summary { cursor: pointer; color: var(--link); font-weight: 600; font-size: var(--t-base); min-height: 44px; display: inline-flex; align-items: center }
.tabla-graf .tablebox { margin-top: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l) }
.canales { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px }
.canales li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n v" "b b"; gap: 6px 12px; align-items: end }
.canales .c-n { grid-area: n; display: flex; flex-direction: column; font-weight: 600; font-size: var(--t-base); line-height: 1.3; min-width: 0 }
.canales .c-n small { font-weight: 400; font-size: var(--t-xs); color: var(--muted) }
.canales .c-v { grid-area: v; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3 }
.canales .c-v b { font-variant-numeric: tabular-nums }
.canales .c-v small { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap }
.canales .c-b { grid-area: b; display: block; height: 10px }
.canales .c-b i { display: block; height: 100%; background: var(--dato); border-radius: 0 4px 4px 0 }
.canales li:hover .c-b i { background: var(--dato-hover) }
.canales .c-total { border-top: 1px solid var(--line); padding-top: 12px }
.canales .c-total .c-b { display: none }
.notas summary { cursor: pointer; font: 650 var(--t-body)/1.3 var(--display); min-height: 32px; display: flex; align-items: center }
.notas .lista { margin-top: 12px; color: var(--ink-2); font-size: var(--t-sm) }
.sin-datos .pasos { margin: 4px 0 }
.tip { position: fixed; z-index: 50; pointer-events: none; max-width: 260px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 600 var(--t-xs)/1.35 var(--body); box-shadow: var(--sombra-2) }
@media (max-width: 719px) {
  .graf-p text.eje-x.par { display: none }
  .kpi-m > b { font-size: 24px }
}
@media (min-width: 720px) {
  .canales li { grid-template-columns: minmax(120px, 0.9fr) minmax(0, 1.4fr) minmax(120px, auto); grid-template-areas: "n b v"; align-items: center }
  .canales .c-b { height: 12px }
}
@media (min-width: 1000px) {
  .kpis.kpis-m { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .graficas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px }
}
/* channels and the ads table side by side only where the ads table fits its half (the side menu takes 256 px) */
.metricas-dos { display: flex; flex-direction: column; gap: 24px }
@media (min-width: 1500px) { .metricas-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start } }

/* Cash-on-delivery store pages (vistas_cod) */
.paso-cod { border-left: 4px solid var(--oro) }
.paso-cod h2 { font-size: var(--t-xl) }
.aviso-viejo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--warn); margin: 0 }
.detalle-cod { margin-top: 4px }
.detalle-cod > summary { cursor: pointer; padding-block: 10px; font-weight: 600 }
.pedidos-l, .escalones, .agenda-l, .anuncios-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.pedido .btn.grande { align-self: stretch; text-align: center }
.pedido-alerta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--bad); margin: 0 }
.escalones li { display: grid; grid-template-columns: 62px 1fr; align-items: baseline; gap: 10px }
.escalones .chip { justify-content: center }
.anuncios-l li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px }
.anuncios-l .btn { margin-left: auto }
@media (min-width: 760px) { .pedidos-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start } }