/* CRPOS × Atlas — tema.
 * Se carga DESPUÉS de styles.css. No cambia estructura ni medidas de CRPOS (--row, --bar, --head,
 * --nav, --t-*, teclas y rejilla del teclado numérico): solo remapea las variables de color de CRPOS
 * a los tokens del design system «ReadMe» de AtlasOS POS y reskinea los componentes (botones píldora
 * con hairline, tarjetas squircle, acento marino, Geist). Tema oscuro: html[data-theme="dark"].
 * Secciones: 1 fuentes · 2 tokens Atlas · 3 variables CRPOS · 4 componentes CRPOS · 5 oscuro · 6 componentes at-* */

/* ---------- 1. Fuentes (copiadas de Atlas a assets/fonts) ---------- */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/Geist-100_900-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/Geist-100_900-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/GeistMono-100_900-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/GeistMono-100_900-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 2. Tokens Atlas (tripletes RGB, igual que globals.css de Atlas) ---------- */
:root {
  --a-ink: 41 41 41; --a-ink-soft: 61 61 61; --a-muted: 93 93 93;
  --a-canvas: 255 255 255; --a-page: 250 250 250; --a-soft: 245 245 245; --a-mute: 231 231 231; --a-inverse: 255 255 255;
  --a-accent: 30 58 110; --a-accent-dark: 22 41 77; --a-accent-light: 226 234 246; --a-accent-mid: 107 135 181;
  --a-ok: 65 142 64; --a-warn: 182 103 37; --a-bad: 195 53 55;
  --a-ok-weak: 211 246 196; --a-ok-ink: 57 108 38; --a-warn-weak: 249 229 183; --a-warn-ink: 137 75 30;
  --a-bad-weak: 249 222 220; --a-bad-ink: 142 38 35; --a-info-weak: 210 234 253; --a-info-ink: 35 73 182;
  --a-gray: 163 163 163;
  --a-shadow-card: 0 0 0 1px #0000000a, 0 1px 2px 0 #00000005, 0 2px 4px 0 #00000005, 0 8px 16px 0 #00000005;
  --a-shadow-pop: 0 0 0 1px #0000000f, 0 6px 16px -4px #0000001f, 0 12px 32px -8px #00000014;
  --a-font: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --a-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --a-ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
html[data-theme="dark"] {
  --a-ink: 255 255 255; --a-ink-soft: 209 210 220; --a-muted: 168 169 190;
  --a-canvas: 19 25 39; --a-page: 14 19 31; --a-soft: 20 26 41; --a-mute: 32 38 55; --a-inverse: 14 19 31;
  --a-accent: 147 201 250; --a-accent-dark: 189 225 252; --a-accent-light: 32 38 55; --a-accent-mid: 96 150 205;
  --a-ok: 175 226 170; --a-warn: 242 197 139; --a-bad: 244 187 187;
  --a-ok-weak: 20 36 34; --a-ok-ink: 175 226 170; --a-warn-weak: 40 32 26; --a-warn-ink: 242 197 139;
  --a-bad-weak: 42 24 30; --a-bad-ink: 244 187 187; --a-info-weak: 32 38 55; --a-info-ink: 179 226 255;
  --a-gray: 122 123 139;
  --a-shadow-card: 0 0 0 1px rgb(32 38 55), 0 1px 2px #00000040;
  --a-shadow-pop: 0 0 0 1px rgb(32 38 55), 0 12px 32px -8px #00000073;
  color-scheme: dark;
}

/* ---------- 3. Variables de CRPOS → tokens Atlas ---------- */
:root {
  --ink: rgb(var(--a-ink)); --ink2: rgb(var(--a-muted)); --title: rgb(var(--a-ink-soft)); --body: rgb(var(--a-muted));
  --fill: rgb(var(--a-soft)); --tabbg: rgb(var(--a-soft)); --sec: rgb(var(--a-soft)); --press: rgb(var(--a-mute));
  --div: rgb(var(--a-mute)); --row-div: rgb(var(--a-mute)); --gray: rgb(var(--a-gray));
  --crit: rgb(var(--a-bad)); --ok: rgb(var(--a-ok)); --warn: rgb(var(--a-warn));
  --backdrop: rgba(0, 3, 40, .55);
  --paper: rgb(var(--a-canvas));
  --font: var(--a-font);
}
html[data-theme="dark"] { --backdrop: rgba(4, 6, 12, .7); }
html, body { background: rgb(var(--a-canvas)); color: rgb(var(--a-ink)); font-feature-settings: "cv02", "cv03", "cv04", "cv11"; -webkit-font-smoothing: antialiased; }
html[data-theme="dark"] body { background: rgb(var(--a-page)); }
button, input, select, textarea { font-family: var(--a-font); }
::selection { background: rgb(var(--a-ink)); color: rgb(var(--a-inverse)); }
:focus-visible { outline: 2px solid rgb(var(--a-accent) / .55); outline-offset: 2px; }
button { touch-action: manipulation; }

/* ---------- 4. Componentes de CRPOS reskineados (mismas medidas) ---------- */
/* Botones: píldora, hairline en ::before y tinta de hover en ::after (anatomía del DS). */
.cb { position: relative; isolation: isolate; border-radius: 999px !important; transition: color .15s var(--a-ease), background-color .15s var(--a-ease), transform .15s var(--a-ease); }
.cb::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1px solid var(--cb-line, transparent); }
.cb::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: transparent; transition: background-color .15s var(--a-ease); }
.cb:active { transform: scale(.975); transition-duration: .05s; }
.cb.pri, .cb.pill, .cb.sqp { background: rgb(var(--a-accent)); color: rgb(var(--a-inverse)); }
.cb.pri:active, .cb.pill:active { background: rgb(var(--a-accent)); }
.cb.pri:hover::after, .cb.pill:hover::after { background: rgb(0 0 0 / .14); }
.cb.pri:active::after, .cb.pill:active::after { background: rgb(0 0 0 / .22); }
.cb.sec, .cb.pill.sec, .cb.crit { --cb-line: rgb(var(--a-mute)); background: rgb(var(--a-canvas)); color: rgb(var(--a-ink)); }
.cb.sec:active, .cb.crit:active { background: rgb(var(--a-canvas)); }
.cb.sec:hover::after { background: rgb(var(--a-ink) / .04); }
.cb.sec:active::after { background: rgb(var(--a-ink) / .07); }
.cb.crit { color: rgb(var(--a-bad)); }
.cb.ghost { color: rgb(var(--a-ink)); }
.cb[disabled], .cb.pill[disabled] { background: rgb(var(--a-soft)); color: rgb(var(--a-gray)); --cb-line: transparent; }
.cb[disabled]:hover::after, .cb[disabled]:active::after { background: transparent; }
.cb.pill.mdgo, .ajempty .cb.pill, .ajtr .cb.pill, .ajtxt .cb.pill, .cpdw .cb.pill, .ajefb .cb.pill, .updf .cb.pill, .as .cb.pill { --cb-line: rgb(var(--a-mute)); background: rgb(var(--a-canvas)); color: rgb(var(--a-ink)); }
.cb.pill.mdgo[disabled] { background: rgb(var(--a-soft)); color: rgb(var(--a-gray)); }
.ov.alrt .cb.pri, .idvw .idbtn .cb.pri, .ov.mdmodes .msh .cb.pri { background: rgb(var(--a-accent)); color: rgb(var(--a-inverse)); }
.ov.alrt .cb.sec, .idvw .idbtn .cb.sec { --cb-line: rgb(var(--a-mute)); background: rgb(var(--a-canvas)); color: rgb(var(--a-ink)); }
.ov.alrt h1, .ov.alrt p, .ov.ofs h1, .ov.oas h1, .ov.ofs .ofx, .ov.oas .ofx, .ov.ajph h2, .ov.ajph button { color: rgb(var(--a-ink)); }
.ov.ajph .ajphc { background: rgb(var(--a-accent)); color: rgb(var(--a-inverse)); }
.pg-h .cir.pri { background: rgb(var(--a-accent)); color: rgb(var(--a-inverse)); }
.pg-h .cir.pri svg { color: rgb(var(--a-inverse)); stroke: rgb(var(--a-inverse)); }
.cir { background: rgb(var(--a-soft)); }

/* Segmentado Teclado / Surtido / Favoritos: relleno suave; activo = azul pálido con tinta de acento. */
.seg { background: rgb(var(--a-soft)); box-shadow: inset 0 0 0 1px rgb(var(--a-mute)); border-radius: 999px; }
.seg button { border-radius: 999px; color: rgb(var(--a-muted)); font-weight: 500; }
.seg button.on { background: rgb(var(--a-accent-light)); color: rgb(var(--a-accent)); box-shadow: none; }
.ttabs button.on, .utabs button.on { color: rgb(var(--a-accent)); border-bottom-color: rgb(var(--a-accent)); }

/* Barra de navegación */
.nbody { background: rgb(var(--a-canvas)); }
.navbar { background: rgb(var(--a-canvas)); border-top-color: rgb(var(--a-mute)); }
.navbar .ni { color: rgb(var(--a-muted)); }
.navbar .ni.on { color: rgb(var(--a-accent)); }
.navbar .ni.on .ic svg { color: rgb(var(--a-accent)); }
.navbar .ni .bdg { background: rgb(var(--a-bad)); color: #fff; }
.app.phone .navbar .ni.on { background: transparent; }
.app.tab .navbar .ni.on { background: rgb(var(--a-accent-light)); border-radius: 999px; }
.avatar { background: rgb(var(--a-accent)); color: rgb(var(--a-inverse)); }
.offline { background: rgb(var(--a-soft)); border-bottom-color: rgb(var(--a-mute)); color: rgb(var(--a-ink-soft)); }

/* Mosaicos del surtido: tarjeta con hairline y esquina squircle; el color del artículo se conserva. */
.tile { background: rgb(var(--a-canvas)); border-radius: 14px; corner-shape: superellipse(1.2); box-shadow: 0 0 0 1px rgb(var(--a-mute)); transition: box-shadow .15s var(--a-ease), transform .15s var(--a-ease); }
.tile:hover { box-shadow: 0 0 0 1px rgb(var(--a-accent-mid)); }
.tile .tl { color: rgb(var(--a-ink-soft)); }

/* Teclado numérico: se conservan tamaños; solo cambian líneas y estados */
.kp-grid, .kp-grid button { border-color: rgb(var(--a-mute)); }
.kp-grid button:active { background: rgb(var(--a-accent-light)); }
.app.phone .kp-grid { border-radius: 16px; corner-shape: superellipse(1.2); border-color: rgb(var(--a-mute)); }
.kp-nw .kp-notebtn { border-color: rgb(var(--a-mute)); }

/* Listas y filas */
.row .acc, .row .acc svg, .crow svg.i { color: rgb(var(--a-gray)); }
.row .thumb.lt { background: rgb(var(--a-soft)); color: rgb(var(--a-ink)); }
.row .thumb.ab { background: rgb(var(--a-accent-light)); color: rgb(var(--a-accent)); }
.crow, .clist.flplain .crow { border-bottom-color: rgb(var(--a-mute)); }
.clist:not(.g) .crow .rt { color: rgb(var(--a-ink)); }
.gbar { background: rgb(var(--a-canvas)); border-bottom-color: rgb(var(--a-mute)); }
.gbar.w { border-bottom-color: rgb(var(--a-mute)); }
.md-l { border-right-color: rgb(var(--a-mute)); }
.md-l [aria-current="page"], .md-clientes .md-l .row[aria-current="page"], .md-personal .md-l .row[aria-current="page"] { background: rgb(var(--a-accent-light)); }
.md.md-informes .md-l .clist [aria-current="page"], .md.md-informes .md-l .clist [aria-current="page"] * { background: rgb(var(--a-accent-light)); color: rgb(var(--a-accent)); }
.md.md-informes .md-l [aria-current="page"], .md.md-informes .md-l .clist .crow[aria-current="page"] { background: rgb(var(--a-accent-light)); }

/* Hojas, overlays y tarjetas de Más */
.ov-bg.center .ov { border-radius: 20px; corner-shape: superellipse(1.2); box-shadow: var(--a-shadow-pop); }
.ov-bg.bsheet .ov { border-radius: 24px 24px 0 0; corner-shape: superellipse(1.2); }
.sheet { background: rgb(var(--a-canvas)); }
.minfo, .mmode { background: rgb(var(--a-soft)); border-color: rgb(var(--a-mute)); border-radius: 16px; corner-shape: superellipse(1.2); }
.mmode .mmi { background: rgb(var(--a-accent-light)); color: rgb(var(--a-accent)); border-radius: 12px; }
.mout { border-radius: 999px; }
.ipromo, .empty { border-radius: 16px; }
.toast { background: rgb(var(--a-accent)); color: rgb(var(--a-inverse)); border-radius: 999px; font-weight: 450; box-shadow: var(--a-shadow-pop); }
.chip { border-color: rgb(var(--a-mute)); background: rgb(var(--a-canvas)); color: rgb(var(--a-ink-soft)); }

/* Campos */
.field input, .field select { border-color: rgb(var(--a-mute)); border-radius: 12px; background: rgb(var(--a-canvas)); color: rgb(var(--a-ink)); transition: border-color .15s var(--a-ease), box-shadow .15s var(--a-ease); }
.field input:focus, .field select:focus { border-color: rgb(var(--a-accent)); box-shadow: 0 0 0 3px rgb(var(--a-accent) / .18); }
.field > span { font-family: var(--a-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.txsearch, .tsr-i { border-radius: 999px; }

/* Acentos de estado */
.bdg, .mbdg { background: rgb(var(--a-bad)); }

/* ---------- 5. Oscuro: lo que quedó con colores literales en styles.css ---------- */
html[data-theme="dark"] .ib:active, html[data-theme="dark"] .kp-grid button:active { background: rgb(var(--a-accent-light)); }
html[data-theme="dark"] .tile { background: rgb(var(--a-canvas)); }
html[data-theme="dark"] .minfo, html[data-theme="dark"] .mmode, html[data-theme="dark"] .libroot, html[data-theme="dark"] .cart.std .band { background: rgb(var(--a-soft)); }
html[data-theme="dark"] .cb.pri, html[data-theme="dark"] .cb.pill { color: rgb(var(--a-inverse)); }
html[data-theme="dark"] .cb.sec { background: rgb(var(--a-soft)); }
html[data-theme="dark"] .app.phone .navbar .ni.on { background: transparent; }
html[data-theme="dark"] .toast { color: rgb(var(--a-inverse)); }
html[data-theme="dark"] .row .rt, html[data-theme="dark"] .crow .rt, html[data-theme="dark"] .cart-h h2, html[data-theme="dark"] .mhead h1,
html[data-theme="dark"] .tb h1, html[data-theme="dark"] .gbar h1, html[data-theme="dark"] .ov-b, html[data-theme="dark"] .sh { color: rgb(var(--a-ink)); }
html[data-theme="dark"] .grab, html[data-theme="dark"] .sheet.sq > .grab, html[data-theme="dark"] .ov-bg.bsheet .ov > .grab { background: rgb(var(--a-muted)); }

/* ---------- 6. Componentes del híbrido (at-*) ---------- */
.at-eyebrow { font-family: var(--a-mono); font-size: 12px; line-height: 20px; letter-spacing: .06em; text-transform: uppercase; font-weight: 450; color: rgb(var(--a-muted)); }
.at-pg { padding: 0 0 32px; }
.at-top { display: flex; align-items: flex-start; gap: 12px; padding: 20px var(--pad) 0; }
.at-top > div { flex: 1; min-width: 0; }
.at-top h1 { margin: 2px 0 0; font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; }
.at-top p { margin: 4px 0 0; font-size: var(--t-body2); color: rgb(var(--a-muted)); }
.at-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: rgb(var(--a-accent)); vertical-align: 1px; animation: atPulse 2s ease-in-out infinite; }
@keyframes atPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .7; transform: scale(1.3); } }
.at-search { display: flex; align-items: center; gap: 10px; margin: 16px var(--pad) 0; height: 48px; padding: 0 16px; border-radius: 999px; background: rgb(var(--a-soft)); box-shadow: inset 0 0 0 1px rgb(var(--a-mute)); color: rgb(var(--a-muted)); transition: box-shadow .15s var(--a-ease); }
.at-search:focus-within { box-shadow: inset 0 0 0 1px rgb(var(--a-accent)), 0 0 0 3px rgb(var(--a-accent) / .18); }
.at-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: rgb(var(--a-ink)); font-size: var(--t-body2); }
.at-search svg.i { width: 20px; height: 20px; }
.at-sec { margin: 24px var(--pad) 0; }
.at-sec > .at-eyebrow { display: flex; align-items: baseline; gap: 8px; padding: 0 4px 8px; }
.at-sec > .at-eyebrow small { font-family: var(--a-font); font-size: 12px; letter-spacing: 0; text-transform: none; color: rgb(var(--a-gray)); }
.at-freq { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 var(--pad); }
.at-freqchip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border-radius: 999px; background: rgb(var(--a-canvas)); box-shadow: inset 0 0 0 1px rgb(var(--a-mute)); font-size: 14px; font-weight: 450; color: rgb(var(--a-ink)); transition: background-color .15s var(--a-ease), box-shadow .15s var(--a-ease); }
.at-freqchip svg.i { width: 18px; height: 18px; color: rgb(var(--a-accent)); }
.at-freqchip:active { background: rgb(var(--a-accent-light)); }
.at-card { background: rgb(var(--a-canvas)); border-radius: 18px; corner-shape: superellipse(1.2); box-shadow: var(--a-shadow-card); overflow: hidden; }
html[data-theme="dark"] .at-card { background: rgb(var(--a-canvas)); }
.at-mrow { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: var(--row); padding: 8px 16px 8px 14px; text-align: left; border-top: 1px solid rgb(var(--a-mute)); transition: background-color .15s var(--a-ease); }
.at-card > .at-mrow:first-child { border-top: 0; }
.at-mrow:active { background: rgb(var(--a-accent-light)); }
.at-mrow[aria-current="page"] { background: rgb(var(--a-accent-light)); }
.at-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; corner-shape: superellipse(1.2); background: rgb(var(--a-accent-light)); color: rgb(var(--a-accent)); }
.at-ico svg.i { width: 22px; height: 22px; }
.at-mrow .at-mt { flex: 1; min-width: 0; font-size: var(--t-body); font-weight: 450; color: rgb(var(--a-ink)); line-height: 1.25; }
.at-mrow .at-mt small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: rgb(var(--a-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-mrow .at-chev { flex: none; color: rgb(var(--a-gray)); display: flex; }
.at-mrow .at-chev svg.i { width: 18px; height: 18px; }
.at-badge { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: rgb(var(--a-bad)); color: #fff; font-size: 12px; font-weight: 550; line-height: 22px; text-align: center; }
.at-badge.soft { background: rgb(var(--a-accent-light)); color: rgb(var(--a-accent)); }
.at-plan { flex: none; padding: 2px 8px; border-radius: 999px; background: rgb(var(--a-accent-light)); color: rgb(var(--a-accent)); font-family: var(--a-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.at-foot { margin: 24px var(--pad) 0; display: flex; flex-direction: column; gap: 10px; }
.at-foot .mmode { width: 100%; margin: 0; }
.at-foot .mout { width: 100%; margin: 0; }
.at-ver { text-align: center; padding: 18px 0 0; color: rgb(var(--a-gray)); font-size: 12px; font-family: var(--a-mono); letter-spacing: .04em; }
.at-none { padding: 40px var(--pad); text-align: center; color: rgb(var(--a-muted)); }

/* Barra del módulo */
.at-bar { flex: none; display: flex; align-items: center; gap: 4px; min-height: var(--bar); padding: 0 var(--pad) 0 4px; border-bottom: 1px solid rgb(var(--a-mute)); background: rgb(var(--a-canvas)); }
.at-bar .ib { width: 44px; height: 44px; }
.at-bar h1 { flex: 1; min-width: 0; margin: 0; font-size: var(--t-heading2); line-height: 1.2; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-bar h1 small { display: block; font-family: var(--a-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 450; color: rgb(var(--a-muted)); margin-bottom: 1px; }
.at-bar .at-end { flex: none; display: flex; align-items: center; gap: 8px; }
.at-body { flex: 1; min-height: 0; overflow: auto; padding: 16px var(--pad) 40px; display: flex; flex-direction: column; gap: 16px; -webkit-overflow-scrolling: touch; }
.at-body > * { flex: none; }
.at-h2 { margin: 0; font-size: var(--t-body); font-weight: 500; letter-spacing: -.01em; }
.at-h2 small { font-weight: 400; color: rgb(var(--a-muted)); font-size: var(--t-body2); }
.at-sub { color: rgb(var(--a-muted)); font-size: var(--t-body2); }

/* Tarjetas KPI */
.at-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.app.tab .at-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.at-kpi { padding: 14px 16px; border-radius: 16px; corner-shape: superellipse(1.2); background: rgb(var(--a-canvas)); box-shadow: var(--a-shadow-card); min-width: 0; }
.at-kpi .at-eyebrow { font-size: 11px; line-height: 16px; overflow-wrap: anywhere; }
.at-kpi b { display: block; margin-top: 4px; font-size: 24px; line-height: 1.15; font-weight: 500; letter-spacing: -.02em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.at-kpi small { display: block; margin-top: 2px; font-size: 12px; color: rgb(var(--a-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-kpi.bad b { color: rgb(var(--a-bad)); }
.at-kpi.ok b { color: rgb(var(--a-ok)); }
.at-kpi.warn b { color: rgb(var(--a-warn)); }

/* Listas, filas, tablas */
.at-list { display: flex; flex-direction: column; background: rgb(var(--a-canvas)); border-radius: 16px; corner-shape: superellipse(1.2); box-shadow: var(--a-shadow-card); overflow: hidden; }
.at-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 16px; text-align: left; border-top: 1px solid rgb(var(--a-mute)); background: transparent; color: inherit; }
.at-list > .at-row:first-child { border-top: 0; }
button.at-row:active { background: rgb(var(--a-accent-light)); }
.at-row .at-rt { flex: 1; min-width: 0; font-size: var(--t-body); font-weight: 450; line-height: 1.25; }
.at-row .at-rt small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: rgb(var(--a-muted)); }
.at-row .at-rt, .at-row .at-rt small { overflow: hidden; text-overflow: ellipsis; }
.at-row .at-rv { flex: none; text-align: right; font-size: var(--t-body2); font-weight: 500; font-variant-numeric: tabular-nums; }
.at-row .at-rv small { display: block; font-weight: 400; color: rgb(var(--a-muted)); font-size: 12px; }
.at-row .at-rv.bad { color: rgb(var(--a-bad)); }
.at-row .at-rv.ok { color: rgb(var(--a-ok)); }
.at-tablew { overflow: auto; border-radius: 16px; corner-shape: superellipse(1.2); box-shadow: var(--a-shadow-card); background: rgb(var(--a-canvas)); }
.at-table { width: 100%; border-collapse: collapse; font-size: var(--t-body2); font-variant-numeric: tabular-nums; }
.at-table th { padding: 10px 14px; text-align: left; font-family: var(--a-mono); font-size: 11px; font-weight: 450; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--a-muted)); background: rgb(var(--a-soft)); white-space: nowrap; }
.at-table td { padding: 12px 14px; border-top: 1px solid rgb(var(--a-mute)); white-space: nowrap; }
.at-table .r { text-align: right; }
.at-table tbody tr[data-x] { cursor: pointer; }
.at-table tbody tr[data-x]:active { background: rgb(var(--a-accent-light)); }

/* Chips, segmentados, estados */
.at-seg { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgb(var(--a-soft)); box-shadow: inset 0 0 0 1px rgb(var(--a-mute)); overflow-x: auto; scrollbar-width: none; }
.at-seg::-webkit-scrollbar { display: none; }
.at-seg button { flex: 1 0 auto; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 450; color: rgb(var(--a-muted)); white-space: nowrap; text-align: center; transition: background-color .15s var(--a-ease), color .15s var(--a-ease); }
.at-seg button.on { background: rgb(var(--a-accent-light)); color: rgb(var(--a-accent)); }
.at-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.at-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 450; white-space: nowrap; background: rgb(var(--a-canvas)); color: rgb(var(--a-muted)); box-shadow: inset 0 0 0 1px rgb(var(--a-mute)); transition: all .15s var(--a-ease); }
.at-pill.on { background: rgb(var(--a-accent-light)); color: rgb(var(--a-accent)); box-shadow: none; }
.at-tag { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 450; background: rgb(var(--a-soft)); color: rgb(var(--a-muted)); box-shadow: inset 0 0 0 1px rgb(var(--a-mute)); white-space: nowrap; }
.at-tag.ok { background: rgb(var(--a-ok-weak)); color: rgb(var(--a-ok-ink)); box-shadow: none; }
.at-tag.warn { background: rgb(var(--a-warn-weak)); color: rgb(var(--a-warn-ink)); box-shadow: none; }
.at-tag.bad { background: rgb(var(--a-bad-weak)); color: rgb(var(--a-bad-ink)); box-shadow: none; }
.at-tag.info { background: rgb(var(--a-info-weak)); color: rgb(var(--a-info-ink)); box-shadow: none; }
.at-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 24px; text-align: center; border-radius: 18px; corner-shape: superellipse(1.2); background: rgb(var(--a-canvas)); box-shadow: var(--a-shadow-card); }
.at-empty .at-ico { width: 56px; height: 56px; border-radius: 18px; }
.at-empty .at-ico svg.i { width: 28px; height: 28px; }
.at-empty b { font-size: var(--t-heading2); font-weight: 500; letter-spacing: -.01em; }
.at-empty p { margin: 0; max-width: 360px; color: rgb(var(--a-muted)); font-size: var(--t-body2); line-height: 1.5; }
.at-empty .cb { width: auto; margin-top: 8px; padding: 0 24px; min-height: 48px; }
.cb.at-btn { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; width: auto; }
.cb.at-btn.full { display: flex; width: 100%; min-height: var(--row); }
.at-btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.at-btnrow .cb { flex: 1 1 0; width: auto; min-width: 120px; }
.at-btn svg.i { width: 20px; height: 20px; }
.at-fab { align-self: flex-end; }

/* Formularios (se usan en hojas y páginas) */
.at-fld { display: block; }
.at-fld > span { display: block; margin-bottom: 6px; font-family: var(--a-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--a-muted)); }
.at-fld input, .at-fld select, .at-fld textarea { width: 100%; height: var(--row); padding: 0 14px; border: 0; border-radius: 12px; corner-shape: superellipse(1.2); background: rgb(var(--a-canvas)); color: rgb(var(--a-ink)); font-size: var(--t-body); box-shadow: inset 0 0 0 1px rgb(var(--a-mute)); outline: 0; transition: box-shadow .15s var(--a-ease); appearance: none; -webkit-appearance: none; }
.at-fld textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.4; }
.at-fld select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; padding-right: 40px; }
.at-fld input:focus, .at-fld select:focus, .at-fld textarea:focus { box-shadow: inset 0 0 0 1px rgb(var(--a-accent)), 0 0 0 3px rgb(var(--a-accent) / .18); }
.at-fld input.big { font-size: var(--t-display2); font-weight: 500; text-align: right; height: calc(var(--row) + 8px); }
.at-fld small { display: block; margin-top: 6px; font-size: 13px; color: rgb(var(--a-muted)); }
.at-fld .at-suffix { position: relative; display: block; }
.at-fld .at-suffix em { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; color: rgb(var(--a-muted)); font-size: var(--t-body2); pointer-events: none; }
.at-form { display: flex; flex-direction: column; gap: 16px; padding: 16px var(--pad); }
.at-form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.at-note { padding: 12px 14px; border-radius: 12px; corner-shape: superellipse(1.2); background: rgb(var(--a-info-weak)); color: rgb(var(--a-info-ink)); font-size: var(--t-body2); line-height: 1.45; }
.at-note.bad { background: rgb(var(--a-bad-weak)); color: rgb(var(--a-bad-ink)); }
.at-note.warn { background: rgb(var(--a-warn-weak)); color: rgb(var(--a-warn-ink)); }
.at-note.ok { background: rgb(var(--a-ok-weak)); color: rgb(var(--a-ok-ink)); }
.at-confirm { padding: 20px var(--pad) 8px; }
.at-confirm p { margin: 0; color: rgb(var(--a-muted)); line-height: 1.5; font-size: var(--t-body); }

/* Gráficas */
.at-hbars { display: flex; flex-direction: column; gap: 14px; }
.at-hbar .at-hb-h { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-body2); }
.at-hbar .at-hb-h b { font-weight: 450; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-hbar .at-hb-h span { font-variant-numeric: tabular-nums; color: rgb(var(--a-ink-soft)); white-space: nowrap; }
.at-hbar .at-hb-t { height: 8px; margin-top: 6px; border-radius: 999px; background: rgb(var(--a-soft)); overflow: hidden; }
.at-hbar .at-hb-t i { display: block; height: 100%; border-radius: 999px; background: rgb(var(--a-accent)); transform-origin: left; animation: atGrow .5s var(--a-ease); }
.at-hbar.bad .at-hb-t i { background: rgb(var(--a-bad)); }
.at-chart { width: 100%; height: auto; display: block; overflow: visible; }
.at-chart text { font-family: var(--a-font); font-size: 10px; fill: rgb(var(--a-muted)); }
.at-chart .at-bar-r { fill: rgb(var(--a-accent)); }
.at-chart .at-grid { stroke: rgb(var(--a-mute)); stroke-width: 1; }
.at-chart .at-line { fill: none; stroke: rgb(var(--a-accent)); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.at-chart .at-area { fill: rgb(var(--a-accent) / .12); }
.at-chart .at-dotc { fill: rgb(var(--a-canvas)); stroke: rgb(var(--a-accent)); stroke-width: 2; }
@keyframes atGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Estado en construcción */
.at-wip { align-self: center; max-width: 440px; width: 100%; }

/* Hoja del módulo (formularios y confirmaciones) */
.ov.atsh { max-height: 92%; }
.ov.atsh .ov-b { display: block; }
.ov.atsh .tb h1 { font-weight: 500; letter-spacing: -.01em; }
.ov.atsh .ov-f .cb { min-height: 52px; }
.ov-f.at-f2 { flex-direction: row; }
.ov-f.at-f2 .cb { flex: 1; width: auto; }

/* iPad: barra lateral de dominios + panel */
.at-tabwrap { position: absolute; inset: 0; display: flex; background: rgb(var(--a-canvas)); }
.at-side { flex: none; width: clamp(280px, 28%, 340px); display: flex; flex-direction: column; min-height: 0; border-right: 1px solid rgb(var(--a-mute)); background: rgb(var(--a-page)); }
html[data-theme="dark"] .at-side { background: rgb(var(--a-page)); }
.at-side .at-top { padding-top: 24px; }
.at-side-b { flex: 1; min-height: 0; overflow: auto; padding-bottom: 24px; }
.at-dom { display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); margin: 2px 12px 0; min-height: 52px; padding: 6px 12px; border-radius: 14px; corner-shape: superellipse(1.2); text-align: left; color: rgb(var(--a-muted)); transition: background-color .15s var(--a-ease), color .15s var(--a-ease); }
.at-dom svg.i { width: 22px; height: 22px; }
.at-dom .at-dt { flex: 1; min-width: 0; font-size: 16px; font-weight: 450; line-height: 1.2; }
.at-dom .at-dt small { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: rgb(var(--a-gray)); }
.at-dom .at-dn { flex: none; font-size: 12px; color: rgb(var(--a-gray)); font-variant-numeric: tabular-nums; }
.at-dom:active { background: rgb(var(--a-soft)); }
.at-dom.on { background: rgb(var(--a-accent-light)); color: rgb(var(--a-accent)); }
.at-dom.on .at-dt small, .at-dom.on .at-dn { color: rgb(var(--a-accent)); opacity: .8; }
.at-main { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; min-height: 0; background: rgb(var(--a-canvas)); }
.at-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.at-mcard { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 132px; padding: 16px; border-radius: 18px; corner-shape: superellipse(1.2); text-align: left; background: rgb(var(--a-canvas)); box-shadow: var(--a-shadow-card); transition: box-shadow .15s var(--a-ease), transform .15s var(--a-ease); }
.at-mcard:active { transform: scale(.985); }
.at-mcard:hover { box-shadow: 0 0 0 1px rgb(var(--a-accent-mid)); }
.at-mcard .at-mh { display: flex; align-items: center; gap: 12px; width: 100%; }
.at-mcard .at-mn { flex: 1; min-width: 0; font-size: var(--t-body); font-weight: 500; letter-spacing: -.01em; }
.at-mcard .at-mk { margin-top: auto; font-size: 13px; color: rgb(var(--a-muted)); }
.at-mcard .at-mk.has { color: rgb(var(--a-ink-soft)); }

@media (prefers-reduced-motion: reduce) {
  .at-dot, .at-hbar .at-hb-t i { animation: none; }
  .cb, .at-seg button, .at-pill, .at-mcard, .at-mrow, .at-dom, .tile, .toast { transition: none; }
  .sheet.anim, .backdrop.anim, .ov-bg.anim .ov, .ov-bg.anim { animation: none; }
}

/* ---------- 7. Ajustes tras QA visual ---------- */
html[data-theme="dark"] .cb.sec.pill, html[data-theme="dark"] .cb.pill.sec { color: rgb(var(--a-ink)); background: rgb(var(--a-soft)); }
.at-main .at-search, .at-body .at-search { margin-left: 0; margin-right: 0; }
.at-body .at-btn.full { margin-top: 16px; }

/* ---------- Colores de la consola (Apariencia de Atlas): ocho muestras, solo cambian el acento ----------
 * Port de globals.css de Atlas (:root[data-paleta]). `marino` es el de siempre y no escribe atributo. */
:root[data-paleta="celeste"] { --a-accent: 31 106 153; --a-accent-dark: 23 82 122; --a-accent-light: 221 237 251; --a-accent-mid: 115 168 208; }
:root[data-paleta="negro"]   { --a-accent: 26 26 26;   --a-accent-dark: 0 0 0;     --a-accent-light: 235 235 235; --a-accent-mid: 107 107 107; }
:root[data-paleta="arena"]   { --a-accent: 110 91 71;  --a-accent-dark: 84 69 58;  --a-accent-light: 241 235 228; --a-accent-mid: 168 149 127; }
:root[data-paleta="azul"]    { --a-accent: 29 78 216;  --a-accent-dark: 30 64 175; --a-accent-light: 220 232 253; --a-accent-mid: 110 149 232; }
:root[data-paleta="lila"]    { --a-accent: 93 63 148;  --a-accent-dark: 70 47 112; --a-accent-light: 237 229 248; --a-accent-mid: 154 130 196; }
:root[data-paleta="rosa"]    { --a-accent: 163 52 111; --a-accent-dark: 125 39 85; --a-accent-light: 251 228 240; --a-accent-mid: 210 127 170; }
:root[data-paleta="durazno"] { --a-accent: 163 84 29;  --a-accent-dark: 126 65 23; --a-accent-light: 253 236 221; --a-accent-mid: 214 149 103; }
html[data-theme="dark"][data-paleta="celeste"] { --a-accent: 205 228 253; --a-accent-dark: 230 241 254; --a-accent-light: 26 44 66;  --a-accent-mid: 127 180 230; }
html[data-theme="dark"][data-paleta="negro"]   { --a-canvas: 10 10 12; --a-page: 0 0 0; --a-soft: 17 17 19; --a-mute: 31 31 35; --a-inverse: 0 0 0; --a-gray: 120 120 128; --a-muted: 165 165 172; --a-ink-soft: 214 214 218; --a-accent: 242 242 242; --a-accent-dark: 255 255 255; --a-accent-light: 31 31 35;  --a-accent-mid: 160 160 160; --a-info-weak: 31 31 35; --a-info-ink: 214 214 218; --a-ok-weak: 16 30 22; --a-warn-weak: 34 27 18; --a-bad-weak: 36 18 20; --a-shadow-card: 0 0 0 1px rgb(31 31 35), 0 1px 2px #00000040; --a-shadow-pop: 0 0 0 1px rgb(31 31 35), 0 12px 32px -8px #00000073; }
html[data-theme="dark"][data-paleta="arena"]   { --a-accent: 226 217 208; --a-accent-dark: 240 235 230; --a-accent-light: 46 40 38;  --a-accent-mid: 176 160 142; }
html[data-theme="dark"][data-paleta="azul"]    { --a-accent: 143 168 255; --a-accent-dark: 180 196 255; --a-accent-light: 28 36 84;  --a-accent-mid: 92 118 230; }
html[data-theme="dark"][data-paleta="lila"]    { --a-accent: 217 200 240; --a-accent-dark: 234 224 248; --a-accent-light: 42 34 66;  --a-accent-mid: 160 136 204; }
html[data-theme="dark"][data-paleta="rosa"]    { --a-accent: 249 185 219; --a-accent-dark: 252 214 234; --a-accent-light: 60 28 50;  --a-accent-mid: 214 120 168; }
html[data-theme="dark"][data-paleta="durazno"] { --a-accent: 253 214 181; --a-accent-dark: 254 232 212; --a-accent-light: 60 38 28;  --a-accent-mid: 220 150 100; }

/* ---------- Dibujos de plato (biblioteca de Atlas) ---------- */
.dibujo { display: block; width: 100%; height: 100%; overflow: visible; }
.dibujo .ds, .dibujo .df, .dibujo .dw, .dibujo .da, .dibujo .dh { stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.dibujo .ds { fill: none; stroke: rgb(var(--a-ink)); }
.dibujo .df { fill: rgb(var(--a-accent)); fill-opacity: .2; stroke: rgb(var(--a-ink)); }
.dibujo .dw { fill: rgb(var(--a-canvas)); stroke: rgb(var(--a-ink)); }
.dibujo .da { fill: rgb(var(--a-accent)); stroke: rgb(var(--a-ink)); stroke-width: 1.5; }
.dibujo .dh { fill: none; stroke: rgb(var(--a-accent)); }
.fltp.dib { background: rgb(var(--a-soft)); padding: 12%; }
.fltp.dib .dibujo { width: auto; height: 100%; max-width: 100%; aspect-ratio: 1; }
.row .thumb.dibth, .flrow .thumb.dibth { background: rgb(var(--a-soft)); padding: 4px; }
.fldibhd { padding: 4px 0 8px; } .fldibhd b { display: block; font-size: 15px; color: rgb(var(--a-ink)); }
.fldibhd small { display: block; margin-top: 2px; color: rgb(var(--a-muted)); font-size: 12.5px; }
.fldibact { display: grid; gap: 8px; }
.fldibact .flrow { border: 1px solid rgb(var(--a-mute)); border-radius: 12px; background: rgb(var(--a-canvas)); gap: 12px; }
.fldibact .flrow.on { background: rgb(var(--a-accent-light)); border-color: rgb(var(--a-accent)); }
.fldibp { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgb(var(--a-soft)); padding: 5px; color: rgb(var(--a-accent)); }
.fldibp > svg.i { width: 22px; height: 22px; }
.fldibgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; padding: 12px 0; }
.fldibc { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border: 1px solid rgb(var(--a-mute)); border-radius: 12px; background: rgb(var(--a-canvas)); color: rgb(var(--a-muted)); font-size: 11.5px; line-height: 1.2; text-align: center; }
.fldibc .dibujo { width: 44px; height: 44px; }
.fldibc.on { background: rgb(var(--a-accent-light)); border-color: rgb(var(--a-accent)); color: rgb(var(--a-ink)); }

/* Modo oscuro: --ink pasa a ser claro, así que todo lo que pintaba fondo tinta con texto #fff quedaba ilegible. */
html[data-theme="dark"] .avatar,
html[data-theme="dark"] .cb.pri,
html[data-theme="dark"] .md.md-informes .md-l [aria-current="page"],
html[data-theme="dark"] .md.md-informes .md-l .clist [aria-current="page"] *,
html[data-theme="dark"] .rc .okc,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .apane .btn.primary,
html[data-theme="dark"] .cb.pill,
html[data-theme="dark"] .flsave,
html[data-theme="dark"] .flmin,
html[data-theme="dark"] .flplus,
html[data-theme="dark"] .ajck.on,
html[data-theme="dark"] .ajtow .flb .flsave,
html[data-theme="dark"] .cpdw .cb.pill.pri,
html[data-theme="dark"] .updd button[aria-pressed="true"],
html[data-theme="dark"] .md.md-informes .md-l .clist [aria-current="page"],
html[data-theme="dark"] .rtb.on,
html[data-theme="dark"] .cd.sel,
html[data-theme="dark"] .ov.mdmodes .msh .cb.pri,
html[data-theme="dark"] .stfsr .cir.pri,
html[data-theme="dark"] .pg-h .cir.pri { color: rgb(var(--a-inverse)); }
html[data-theme="dark"] .flsave[disabled], html[data-theme="dark"] .ajtow .flb .flsave[disabled],
html[data-theme="dark"] .tab-ov .flw.itempg .flsave[disabled], html[data-theme="dark"] .tab-ov .flw.tpg .flsave[disabled] { background: rgb(var(--a-soft)); color: rgb(var(--a-muted)); }

/* Densidad compacta (Apariencia de Atlas): solo pantallas de Atlas; la caja de CRPOS no se toca. */
html[data-densidad="compacta"] .at-row { min-height: 46px; padding: 6px 14px; gap: 10px; }
html[data-densidad="compacta"] .at-row .at-rt small { margin-top: 0; }
html[data-densidad="compacta"] .at-cf-in { padding-top: 8px; padding-bottom: 8px; }
html[data-densidad="compacta"] .at-mrow { padding-top: 7px; padding-bottom: 7px; }

/* ---------- Escritorio: vista Administrador (barra lateral) y Comercio (la de iPad, centrada) ---------- */
.dk { flex: 1; min-height: 0; display: flex; background: rgb(var(--a-canvas)); }
.dk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.dk-side { width: 288px; }
.dk-side .at-top h1 { font-size: 22px; }
.dk-eb { margin: 18px 24px 6px; }
.dk-side .at-foot { padding-top: 12px; }
.app.desk .at-pg { width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; }
.app.desk .at-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.app.comdesk { max-width: 1180px; margin: 0 auto; border-left: 1px solid rgb(var(--a-mute)); border-right: 1px solid rgb(var(--a-mute)); }

/* Informes / acciones al pie de una pantalla de módulo */
.at-sec-row { display: flex; justify-content: flex-end; padding: 0 var(--pad) 4px; }
.at-linkbtn { color: rgb(var(--a-accent)); font-size: var(--t-body2); font-weight: 500; min-height: 36px; padding: 0 8px; border-radius: 10px; }
.at-linkbtn:active { background: rgb(var(--a-accent-light)); }
.at-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px var(--pad) 8px; }
.at-actions .at-btn { flex: 1 1 200px; }
.at-sub { padding: 0 var(--pad); margin: 8px 0 12px; }
.app.desk .at-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app.desk .at-chart { max-height: 300px; }

/* ---- Informes › Mostrar detalles (paneles de Atlas) ---- */
.at-inf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 0 8px; }
.app.desk .at-inf-grid, .app.tab .at-inf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.at-inf-card { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; min-width: 0; }
.at-inf-card.wide { grid-column: 1 / -1; }
.at-inf-ch { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.at-inf-ch b { display: block; font-size: var(--t-body); font-weight: 500; letter-spacing: -.01em; }
.at-inf-ch small { display: block; margin-top: 2px; color: rgb(var(--a-muted)); font-size: var(--t-body2); }
.at-inf-ctl { display: flex; gap: 8px; flex-wrap: wrap; }
.at-inf-chip { padding: 6px 12px; border-radius: 999px; background: rgb(var(--a-accent-light)); color: rgb(var(--a-accent)); font-size: 13px; font-weight: 500; white-space: nowrap; }
.at-chart .at-wk, .at-chart .at-inf-wk { fill: rgb(var(--a-soft)); }
.at-chart .at-bar-r.pk { fill: rgb(var(--a-accent-dark)); }
.at-inf-pk rect { fill: rgb(var(--a-accent)); }
.at-chart .at-inf-pk text { fill: rgb(var(--a-inverse)); font-weight: 500; }
.at-inf-lg { display: flex; align-items: center; gap: 6px; color: rgb(var(--a-muted)); font-size: 12px; }
.at-inf-lg i.wk { width: 12px; height: 12px; border-radius: 3px; background: rgb(var(--a-soft)); box-shadow: inset 0 0 0 1px rgb(var(--a-mute)); }
.at-inf-big { font-size: 34px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.at-inf-big small { display: block; margin-top: 4px; font-size: var(--t-body2); font-weight: 400; letter-spacing: 0; color: rgb(var(--a-muted)); }
.at-inf-dl { margin: 0; display: flex; flex-direction: column; }
.at-inf-dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid rgb(var(--a-mute)); font-size: var(--t-body2); }
.at-inf-dl dt { color: rgb(var(--a-muted)); }
.at-inf-dl dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.at-inf-heat { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; font-size: 10px; color: rgb(var(--a-muted)); }
.at-inf-heat i { display: block; aspect-ratio: 1; border-radius: 4px; background: rgb(var(--a-accent) / var(--v)); min-width: 0; }
.at-inf-heat i.z { background: rgb(var(--a-soft)); }
.at-inf-heat span { text-align: center; white-space: nowrap; overflow: visible; }
.at-inf-heat span.d { text-align: left; }
.at-inf-scale { display: flex; align-items: center; gap: 4px; justify-content: flex-end; color: rgb(var(--a-muted)); font-size: 11px; }
.at-inf-scale i { width: 16px; height: 12px; border-radius: 3px; background: rgb(var(--a-accent)); }
.at-inf-scale i:nth-of-type(1) { opacity: .15; } .at-inf-scale i:nth-of-type(2) { opacity: .35; } .at-inf-scale i:nth-of-type(3) { opacity: .55; } .at-inf-scale i:nth-of-type(4) { opacity: .78; } .at-inf-scale i:nth-of-type(5) { opacity: 1; }
.at-inf-donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.at-inf-dw { position: relative; width: 132px; height: 132px; flex: none; }
.at-inf-dw svg { width: 132px; height: 132px; }
.at-inf-dw circle { fill: none; stroke-width: 20; }
.at-inf-dc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.at-inf-dc small { color: rgb(var(--a-muted)); font-size: 11px; }
.at-inf-dc b { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.at-inf-donutlg { flex: 1 1 200px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.at-inf-donutlg > div { display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 4px; align-items: center; font-size: var(--t-body2); }
.at-inf-donutlg i { flex: none; width: 12px; height: 12px; border-radius: 4px; }
.at-inf-donutlg b { flex: 1 1 auto; font-weight: 450; white-space: nowrap; overflow: visible; text-overflow: clip; }
.at-inf-donutlg span { white-space: nowrap; margin-left: auto; }
.at-inf-donutlg span { font-variant-numeric: tabular-nums; color: rgb(var(--a-ink-soft)); }
.at-inf-donutlg em { flex: 0 0 100%; display: block; height: 4px; border-radius: 2px; background: rgb(var(--a-soft)); overflow: hidden; }
.at-inf-donutlg em u, .at-inf-rank em u { display: block; height: 100%; border-radius: 2px; text-decoration: none; }
.at-inf-s0 { stroke: rgb(var(--a-accent)); background: rgb(var(--a-accent)); } .at-inf-s1 { stroke: rgb(var(--a-accent-mid)); background: rgb(var(--a-accent-mid)); }
.at-inf-s2 { stroke: rgb(var(--a-ok)); background: rgb(var(--a-ok)); } .at-inf-s3 { stroke: rgb(var(--a-warn)); background: rgb(var(--a-warn)); }
.at-inf-s4 { stroke: rgb(var(--a-info-ink)); background: rgb(var(--a-info-ink)); } .at-inf-s5 { stroke: rgb(var(--a-gray)); background: rgb(var(--a-gray)); }
.at-inf-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.at-inf-rank li { display: flex; gap: 12px; align-items: flex-start; }
.at-inf-rank .n { flex: none; width: 24px; height: 24px; border-radius: 8px; background: rgb(var(--a-accent-light)); color: rgb(var(--a-accent)); font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.at-inf-rank li > div { flex: 1; min-width: 0; }
.at-inf-rank .t { display: flex; justify-content: space-between; gap: 10px; font-size: var(--t-body2); }
.at-inf-rank .t b { font-weight: 450; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-inf-rank .t span { font-variant-numeric: tabular-nums; color: rgb(var(--a-ink-soft)); white-space: nowrap; }
.at-inf-rank em { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: rgb(var(--a-soft)); overflow: hidden; }
.at-inf-rank em u { background: rgb(var(--a-accent)); }
.at-inf-tm { display: flex; flex-wrap: wrap; align-content: stretch; gap: 4px; min-height: 220px; flex: 1; }
.at-inf-t { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-width: 84px; min-height: 72px; padding: 10px 12px; border-radius: 10px; color: rgb(var(--a-inverse)); overflow: hidden; }
.at-inf-t b { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-inf-t span { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.at-inf-t small { font-size: 11px; opacity: .85; }
.at-inf-t.c0 { background: rgb(var(--a-accent)); } .at-inf-t.c1 { background: rgb(var(--a-accent-mid)); } .at-inf-t.c2 { background: rgb(var(--a-ok)); }
.at-inf-t.c3 { background: rgb(var(--a-warn)); } .at-inf-t.c4 { background: rgb(var(--a-info-ink)); } .at-inf-t.c5 { background: rgb(var(--a-gray)); }
@media (max-width: 560px) { .at-inf-heat { gap: 2px; } .at-inf-big { font-size: 28px; } }

/* Pestañas que deben verse completas en teléfono: se reparten el ancho y el rótulo largo baja a dos líneas */
@media (max-width: 560px) { .at-seg.fit { overflow: visible; gap: 2px; } .at-seg.fit button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 4px 4px; font-size: 13px; line-height: 1.15; white-space: normal; } }
/* Tarjeta de bienvenida del Cobrar: nunca más ancha que la columna (iPad vertical la cortaba por la izquierda) */
.app.tab .copromo, .app.tab .mpromo { max-width: calc(100% - 48px); }
@media (max-width: 900px) { .app.tab .copromo, .app.tab .mpromo { margin: 0; right: 16px; max-width: calc(100% - 32px); } }
/* iPad vertical: mosaicos de ~113 px; el nombre puede ocupar 2 líneas, así que las siglas van arriba y el tile es más alto */
@media (max-width: 900px) {
  .app.tab .fltiles:not(.edit) .fltile2 { aspect-ratio: 1 / 1.2; }
  .app.tab .fltiles:not(.edit) .fltile2 .fltp { align-items: flex-start; padding: 12px 14px 0; line-height: 1.1; }
}
/* Mosaicos del iPad vertical: la sigla y el nombre se apilan (antes iban absolutos y se pisaban cuando el nombre bajaba a 2 líneas) */
@media (max-width: 900px) {
  .app.tab .fltiles:not(.edit) .fltile2 { display: flex; flex-direction: column; justify-content: flex-end; }
  .app.tab .fltiles:not(.edit) .fltile2 .fltp { position: static; flex: 1 1 auto; padding: 8px 14px 6px; }
  .app.tab .fltiles:not(.edit) .fltile2 .tl { position: static; padding: 0 14px 10px; }
}