/* FT Supply · Frontero Advisors — hoja de estilo (generada a partir de la maqueta de diseño aprobada). */

:root {
  --navy: #061c49; --gold: #e7a300; --steel: #a5a4a6;
  /* paleta de la referencia: botones, íconos y gráficos (cada color con su tono oscuro para el borde inferior) */
  /* escala de amarillos: del más claro (y1) al más oscuro (y6); cada tono con su versión oscura para el borde */
  --y1: #ffe07a; --y1u: #d2b13e; --y2: #ffd24a; --y2u: #cfa21f; --y3: #f7b90f; --y3u: #b98300; --y4: #e7a300; --y4u: #a86f00; --y5: #c88800; --y5u: #8f5f00; --y6: #a86f00; --y6u: #744a00;
  --c-cream: #f2e9d8; --u-cream: #cbbf9f; --c-slate: #59718a; --u-slate: #3f566c; --c-teal: #2f6f6d; --u-teal: #1f5150; --c-terra: #e07a47; --u-terra: #b25a2c;
  --c-mustard: #d4a72c; --u-mustard: #a5821a; --c-sage: #8fa68f; --u-sage: #6a846a; --c-rose: #c47c8a; --u-rose: #9a5967; --c-plum: #5b3a62; --u-plum: #3d2442;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.5 -.55'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='19'/%3E%3CfeColorMatrix values='0 0 0 0 0.02 0 0 0 0 0.11 0 0 0 0 0.29 0 0 0 1.5 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.10'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' opacity='.16'/%3E%3C/svg%3E");
  --font: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r: 8px;                              /* redondeo único: cajas, botones, campos, íconos, etiquetas */
  --r-in: max(0px, calc(var(--r) - 3px)); /* piezas que van dentro de un contenedor con relleno (concéntrico) */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --side-w: 276px;
}

/* ---------- oscuro: azul profundo con grano, el relieve se nota ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07163a; --bg2: #040e28; --lift: rgba(74, 128, 245, .30); --lift2: rgba(255, 207, 69, .12); --grain-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.5 -.55'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='19'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.5 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.24'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' opacity='.34'/%3E%3C/svg%3E");
  --face: linear-gradient(180deg, #153168, #102659); --face-flat: #112759; --sunk: #04102b; --glass: rgba(16, 38, 89, .92);
  --outline: #01060f; --under: #071a43; --rim: rgba(255, 255, 255, .10); --lip: rgba(255, 255, 255, .08); --drop: rgba(0, 0, 0, .55); --sunk-sh: rgba(0, 0, 0, .7); --grid: rgba(255, 255, 255, .075);
  --ink: #edf2fc; --ink-3: #8c9dc2; --ink-2: #b0bedb; --line: rgba(255, 255, 255, .09); --hover: rgba(255, 255, 255, .06);
  --gold-ink: #eab53c; --on-gold: #061c49; --logo-navy: #dbe6ff;
  --btn2: var(--y2); --btn2-u: var(--y2u); --btn2-ink: #061c49; --ychart: var(--y3); --ico-line: #ffd24d; --ico-fill: #e7a300; --ico-fo: .5; --pad: #112759;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.5 -.55'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='19'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.5 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.14'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' opacity='.22'/%3E%3C/svg%3E");
  --dot-ok: #7fbf95; --dot-info: #8fa9c9; --dot-bad: #e07a47; --ok: #a9c6a9; --bad: #f09a72;
}

/* ---------- claro: porcelana fría con grano ---------- */
[data-theme="light"] {
  color-scheme: light;
  --bg: #e9effc; --bg2: #dce6f7; --lift: rgba(255, 255, 255, .75); --lift2: rgba(255, 207, 69, .20); --grain-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.5 -.55'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='19'/%3E%3CfeColorMatrix values='0 0 0 0 0.02 0 0 0 0 0.11 0 0 0 0 0.29 0 0 0 1.5 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.07'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' opacity='.11'/%3E%3C/svg%3E");
  --face: linear-gradient(180deg, #ffffff, #f1f4f9); --face-flat: #f9fafd; --sunk: #e6eaf3; --glass: rgba(255, 255, 255, .9);
  --outline: #a3afc7; --under: #c3cde0; --rim: rgba(255, 255, 255, .95); --lip: rgba(255, 255, 255, .9); --drop: rgba(6, 28, 73, .17); --sunk-sh: rgba(6, 28, 73, .25); --grid: rgba(6, 28, 73, .09);
  --ink: #08193f; --ink-2: #3a4c74; --ink-3: #5a6c94; --line: rgba(6, 28, 73, .11); --hover: rgba(6, 28, 73, .05);
  --gold-ink: #7d5a00; --on-gold: #061c49; --logo-navy: #061c49;
  --btn2: var(--y2); --btn2-u: var(--y2u); --btn2-ink: #061c49; --ychart: #b87a06; --ico-line: #a86d08; --ico-fill: #ffc928; --ico-fo: 1; --pad: #f9fafd;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.5 -.55'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='19'/%3E%3CfeColorMatrix values='0 0 0 0 0.02 0 0 0 0 0.11 0 0 0 0 0.29 0 0 0 1.5 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.10'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' opacity='.16'/%3E%3C/svg%3E");
  --dot-ok: #3f9a6a; --dot-info: #4a78b8; --dot-bad: #c85a2a; --ok: #2f6f4d; --bad: #b04d22;
}

/* dos niveles de relieve: sobresale y hundido */
:root { --sunken: inset 0 3px 5px var(--sunk-sh), inset 0 0 0 1px rgba(0, 0, 0, .12), 0 1px 0 var(--lip); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--ink);
  background: var(--grain-bg), radial-gradient(900px 620px at 100% 0%, var(--lift2), transparent 62%), radial-gradient(1200px 760px at 12% -6%, var(--lift), transparent 66%), linear-gradient(180deg, var(--bg), var(--bg2)); background-attachment: scroll, fixed, fixed, fixed; background-color: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; font-variant-numeric: tabular-nums;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ====================================================================================================================
   FT Supply · hoja de estilo (diseño «sacado»): fondo con grano, cajas lisas con relieve, amarillo de Frontero, claro y oscuro.
   Reglas: textura SOLO en el fondo · un solo redondeo (--r) · la luz viene de arriba (brillo arriba = sobresale; sombra arriba = hundido).
   ==================================================================================================================== */

/* nombres antiguos (los usa el JS y estilos en línea): se resuelven con los colores del tema vigente */
:root { --radius: var(--r); --shadow: 0 2px 3px var(--drop); --font-display: var(--font); --font-body: var(--font); --font-mono: var(--mono); --steel: #a5a4a6; }
[data-theme] {
  --panel: var(--face-flat); --border: var(--line); --text: var(--ink); --muted: var(--ink-3); --navy: var(--ink); --navy-2: var(--ink-2); --navy-3: var(--info);
  --gold-dark: var(--y4u); --gold-soft: rgba(231, 163, 0, .16); --steel-light: var(--line); --brand-navy: #061c49;
  --ok-soft: var(--ok-bg); --warn-soft: var(--warn-bg); --bad-soft: var(--bad-bg); --info-soft: var(--info-bg);
}
[data-theme="dark"] { --warn: #e6bf55; --info: #a3b8cf; --ok-bg: rgba(143, 190, 150, .16); --warn-bg: rgba(230, 191, 85, .16); --bad-bg: rgba(240, 154, 114, .17); --info-bg: rgba(163, 184, 207, .16); }
[data-theme="light"] { --warn: #8a6400; --info: #3f566c; --ok-bg: rgba(47, 111, 77, .12); --warn-bg: rgba(231, 163, 0, .2); --bad-bg: rgba(176, 77, 34, .12); --info-bg: rgba(63, 86, 108, .12); }

/* ---------- base ---------- */
.hidden { display: none !important; }
.muted { color: var(--ink-2); } .small { font-size: 12.5px; } .mono { font-family: var(--mono); }
.right { margin-left: auto; } .nowrap { white-space: nowrap; } .center { text-align: center; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .col { display: flex; flex-direction: column; gap: 8px; }
.spacer { height: 14px; }
.grid { display: grid; gap: var(--gap); } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid > *, .col > *, .search-layout > * { min-width: 0; }
a { color: var(--info); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--ink); }
h1, h2, h3, h4 { color: var(--ink); margin: 0 0 .4em; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } h4 { font-size: .95rem; }
body { overflow-x: hidden; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } svg.i.sm { width: 16px; height: 16px; }
.d { display: none; }

/* ---------- estructura: barra lateral por categorías + barra superior ---------- */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); gap: var(--gap); padding: 14px 14px 16px; min-height: 100vh; max-width: 1780px; margin: 0 auto; }
.sidebar { position: sticky; top: 14px; height: calc(100vh - 32px); display: flex; flex-direction: column; padding: 16px 12px 12px; overflow: hidden; z-index: 40; background: var(--face); border: 1px solid var(--outline); border-radius: var(--r); box-shadow: inset 0 1px 0 var(--rim), inset 0 -3px 0 var(--under), 0 2px 3px var(--drop); }
.main { min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.top { position: sticky; top: 14px; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 20px; background: var(--glass); border: 1px solid var(--outline); border-radius: var(--r); box-shadow: inset 0 1px 0 var(--rim), inset 0 -3px 0 var(--under), 0 2px 3px var(--drop); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.top .crumb { font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .top .crumb small { color: var(--ink-3); font-weight: 500; }
.top-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
#view { padding: 2px 2px 70px; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); animation: rise .25s var(--ease); }
#view > * { margin-top: 0; margin-bottom: 0; min-width: 0; }
#view > .spacer { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.brand { padding: 2px 2px 8px; display: block; text-decoration: none; }
.brand .plate { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); }
.brand .plate img { display: block; } .brand .iso { height: 46px; width: auto; } .brand .stack { display: flex; flex-direction: column; gap: 6px; } .brand .word { width: 136px; height: auto; }
.brand .supply { font-family: "Orbitron", var(--font), sans-serif; font-weight: 900; font-size: 16.9px; letter-spacing: .237em; line-height: 1; color: #1b325c; text-transform: uppercase; }
[data-theme="dark"] .brand .plate { background: linear-gradient(180deg, #ffffff, #f6f1e3); border: 1px solid #d3c7a6; box-shadow: inset 0 -3px 0 #e2d8bd, 0 2px 3px rgba(0, 0, 0, .4); }
[data-theme="light"] .brand .plate { padding: 8px 4px; }
.nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 2px 6px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; display: flex; flex-direction: column; gap: 3px; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 14px; border-radius: var(--r); color: var(--ink-2); font-weight: 500; font-size: 13.5px; border: 1px solid transparent; text-decoration: none; }
.nav-item:hover { color: var(--ink); background: var(--hover); }
.nav-item.on { color: var(--ink); font-weight: 600; background: var(--sunk); border-color: var(--outline); box-shadow: var(--sunken); } .nav-item.on svg { color: var(--gold-ink); }
.grp { margin-top: 10px; }
.grp-h { display: flex; align-items: center; width: 100%; background: none; border: 0; padding: 6px 12px; color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; border-radius: var(--r); }
.grp-h:hover { color: var(--ink-2); } .grp-h svg { margin-left: auto; width: 14px; height: 14px; transition: transform .2s var(--ease); }
.grp.shut .grp-h svg { transform: rotate(-90deg); } .grp.shut .grp-b { display: none; } .grp-b { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.side-foot { padding: 10px 4px 2px; border-top: 1px solid var(--line); margin-top: 8px; }
.me { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r); width: 100%; background: none; border: 0; text-align: left; color: var(--ink); }
.me:hover { background: var(--hover); } .me b { display: block; font-weight: 600; font-size: 13px; line-height: 1.25; } .me .sub { font-size: 11.5px; color: var(--ink-3); } .me .who { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--r); font-weight: 700; color: var(--on-gold); background: var(--y3); border: 1px solid var(--y3u); }
.top .menu-btn { display: none; } .scrim { display: none; }
.seg-btn { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r); background: var(--sunk); border: 1px solid var(--outline); box-shadow: var(--sunken); }
.seg-btn button { display: grid; place-items: center; width: 32px; height: 28px; border: 1px solid transparent; border-radius: var(--r-in); background: none; color: var(--ink-3); }
.seg-btn button.on { color: var(--gold-ink); background: var(--face); border-color: var(--outline); box-shadow: inset 0 1px 0 var(--rim), inset 0 -3px 0 var(--under), 0 2px 3px var(--drop); }
.token-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: var(--r); font-weight: 700; font-size: 13px; text-decoration: none; color: var(--btn2-ink); background: var(--btn2); border: 1px solid var(--btn2-u); box-shadow: inset 0 -3px 0 var(--btn2-u), 0 2px 3px var(--drop); }
.token-chip b { font-family: var(--mono); } .token-chip.low { background: var(--c-terra); border-color: var(--u-terra); box-shadow: inset 0 -3px 0 var(--u-terra), 0 2px 3px var(--drop); } .token-chip:hover { color: var(--btn2-ink); filter: brightness(1.06); }
.icon-btn { --under: var(--btn2-u); position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r); border: 1px solid var(--btn2-u); color: var(--btn2-ink); background: var(--btn2); box-shadow: inset 0 -3px 0 var(--btn2-u), 0 2px 3px var(--drop); }
.icon-btn:hover { filter: brightness(1.07); } .icon-btn:active { transform: translateY(1px); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .35); } .icon-btn svg { width: 20px; height: 20px; }
.dot { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 99px; background: var(--c-terra); color: #fff; font-size: 10.5px; font-weight: 800; border: 2px solid var(--face-flat); }
.rel { position: relative; }
.menu { position: absolute; right: 0; top: 46px; z-index: 60; min-width: 240px; padding: 6px; background: var(--glass); border: 1px solid var(--outline); border-radius: var(--r); box-shadow: inset 0 1px 0 var(--rim), inset 0 -3px 0 var(--under), 0 2px 3px var(--drop); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink); }
.menu a, .menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: none; color: var(--ink-2); text-decoration: none; cursor: pointer; border-radius: var(--r-in); font-weight: 500; }
.menu a:hover, .menu button:hover { background: var(--hover); color: var(--ink); }
.menu .menu-head { padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .menu .menu-head.row { display: flex; }
.notif-list { max-height: 380px; overflow-y: auto; width: 360px; max-width: calc(100vw - 40px); }
.notif { display: block; padding: 11px 12px; border-bottom: 1px solid var(--line); cursor: pointer; text-decoration: none; color: inherit; border-radius: 0; } .notif b { display: block; font-size: 13px; color: var(--ink); } .notif span { font-size: 12.5px; color: var(--ink-2); }
.notif.unread { background: rgba(231, 163, 0, .12); }
.demo-banner, .act-banner { border: 1px solid var(--outline); border-radius: var(--r); font-size: 12.5px; padding: 7px 14px; text-align: center; background: var(--info-bg); color: var(--ink); font-weight: 600; }
.act-banner { background: rgba(231, 163, 0, .18); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; font-weight: 500; } .act-banner .btn { padding: 3px 10px; }
.viewswitch { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r); background: var(--sunk); border: 1px solid var(--outline); box-shadow: var(--sunken); }
.viewswitch span { font-size: 10.5px; color: var(--ink-3); padding: 0 8px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.viewswitch button { background: none; border: 1px solid transparent; color: var(--ink-2); padding: 4px 10px; border-radius: var(--r-in); cursor: pointer; font-weight: 600; font-size: 12.5px; }
.viewswitch button:hover { color: var(--ink); } .viewswitch button.on { color: var(--ink); background: var(--face); border-color: var(--outline); box-shadow: inset 0 1px 0 var(--rim), inset 0 -3px 0 var(--under), 0 2px 3px var(--drop); }

/* ---------- páginas ---------- */
.page-head { display: flex; align-items: flex-end; gap: var(--gap); flex-wrap: wrap; } .page-head p { margin: 0; color: var(--ink-2); } .page-head > div:first-child { min-width: 0; }
.crumbs { font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px; } .crumbs a { color: var(--ink-3); }
.card { position: relative; background: var(--face); border: 1px solid var(--outline); border-radius: var(--r); box-shadow: inset 0 1px 0 var(--rim), inset 0 -3px 0 var(--under), 0 2px 3px var(--drop); padding: 20px; min-width: 0; }
.card.flat { box-shadow: none; } .card h3 { margin-bottom: 10px; } .card.pad0, .pad0 { padding: 0 !important; overflow: hidden; }
.card-title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .card-title h3 { margin: 0; }

/* ---------- botones (la textura es solo del fondo: los botones son lisos) ---------- */
.btn { --under: var(--btn2-u); display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: var(--r); font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer; line-height: 1;
  border: 1px solid var(--btn2-u); color: var(--btn2-ink); background: var(--btn2); box-shadow: inset 0 -3px 0 var(--btn2-u), 0 2px 3px var(--drop); transition: transform .08s, filter .15s; }
.btn:hover { filter: brightness(1.07); color: var(--btn2-ink); } .btn:active { transform: translateY(1px); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .35); filter: none; }
.btn.primary { color: var(--on-gold); border-color: var(--y4u); background: var(--y4); box-shadow: inset 0 -3px 0 var(--y4u), 0 2px 3px var(--drop); } .btn.primary:hover { color: var(--on-gold); }
.btn.dark { color: #fff; border-color: #020b24; background: var(--brand-navy); box-shadow: inset 0 -3px 0 #020b24, 0 2px 3px var(--drop); } .btn.dark:hover { color: #fff; }
.btn.danger { color: var(--on-gold); border-color: var(--u-terra); background: var(--c-terra); box-shadow: inset 0 -3px 0 var(--u-terra), 0 2px 3px var(--drop); } .btn.danger:hover { color: var(--on-gold); }
.btn.ghost { color: var(--ink); background: transparent; box-shadow: none; border-color: var(--line); } .btn.ghost:hover { background: var(--hover); color: var(--ink); filter: none; } .btn.ghost:active { transform: none; box-shadow: none; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; } .btn.lg { height: 46px; padding: 0 24px; font-size: 1rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.4); }
.btn.full { width: 100%; }

/* ---------- etiquetas ---------- */
.badge { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: var(--r); font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--hover); color: var(--ink); border: 1px solid var(--line); }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.badge.ok::before { background: var(--dot-ok); } .badge.warn::before { background: var(--y3); } .badge.bad::before { background: var(--dot-bad); } .badge.info::before { background: var(--dot-info); }
.badge.gold { background: rgba(231, 163, 0, .18); border-color: rgba(231, 163, 0, .5); } .badge.gold::before { background: var(--y3); }
.badge.navy { background: var(--brand-navy); color: #fff; border-color: #020b24; } .badge.navy::before { background: var(--y3); }
.urgent-tag { background: var(--c-terra); color: var(--on-gold); border-color: var(--u-terra); }
.chip { display: inline-block; padding: 2px 9px; border-radius: var(--r-in); background: var(--hover); border: 1px solid var(--line); color: var(--ink-2); font-size: 12px; margin: 0 4px 4px 0; } .chip.seg { background: var(--info-bg); }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--r); background: var(--sunk); border: 1px solid var(--outline); box-shadow: var(--sunken); margin-bottom: 16px; overflow-x: auto; width: fit-content; max-width: 100%; scrollbar-width: none; }
.tabs button { background: none; border: 1px solid transparent; padding: 0 14px; height: 32px; border-radius: var(--r-in); cursor: pointer; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.tabs button:hover { color: var(--ink); } .tabs button.active { color: var(--ink); font-weight: 600; background: var(--face); border-color: var(--outline); box-shadow: inset 0 1px 0 var(--rim), inset 0 -3px 0 var(--under), 0 2px 3px var(--drop); } .tabs button .badge { margin-left: 6px; height: 20px; }

/* ---------- formularios ---------- */
label.f { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); } label.f > span small { font-weight: 400; color: var(--ink-3); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=datetime-local], input[type=date], input[type=search], input[type=url], input[type=tel], select, textarea {
  border: 1px solid var(--outline); border-radius: var(--r); padding: 0 12px; height: 40px; background: var(--sunk); width: 100%; font-weight: 400; color: var(--ink); box-shadow: var(--sunken); }
textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-3); } select { cursor: pointer; } option { color: #08193f; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--y3); outline-offset: 0; border-color: var(--y4u); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); } .form-grid .full { grid-column: 1 / -1; }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: 13.5px; color: var(--ink); } .check input { margin-top: 3px; accent-color: var(--y4); }
input[type=checkbox], input[type=radio] { accent-color: var(--y4); }
.price-input { text-align: right; font-variant-numeric: tabular-nums; max-width: 150px; }

/* ---------- tablas, avisos, indicadores ---------- */
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th { text-align: left; color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: transparent; }
table.t td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; } table.t tr:last-child td { border-bottom: 0; }
table.t.hover tbody tr:hover { background: var(--hover); cursor: pointer; } table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; scrollbar-width: thin; }
.empty { text-align: center; padding: 34px 20px; color: var(--ink-3); } .empty h3 { color: var(--ink-2); }
.alert { border-radius: var(--r); padding: 11px 14px; margin-bottom: 12px; border: 1px solid var(--line); font-size: 13.5px; background: var(--hover); color: var(--ink); }
.alert.info { background: var(--info-bg); } .alert.warn { background: var(--warn-bg); } .alert.bad { background: var(--bad-bg); } .alert.ok { background: var(--ok-bg); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--gap); }
.kpi { background: var(--face); border: 1px solid var(--outline); border-radius: var(--r); padding: 16px 20px; color: inherit; text-decoration: none; display: block; box-shadow: inset 0 1px 0 var(--rim), inset 0 -3px 0 var(--under), 0 2px 3px var(--drop); }
a.kpi { cursor: pointer; } a.kpi:hover { filter: brightness(1.04); }
.kpi b { font-family: var(--font); font-weight: 600; font-size: 1.7rem; letter-spacing: -.03em; display: block; color: var(--ink); line-height: 1.15; } .kpi span { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.kpi.warn b { color: var(--bad); }
.progress { height: 10px; background: var(--sunk); border: 1px solid var(--outline); box-shadow: var(--sunken); border-radius: var(--r); overflow: hidden; } .progress > i { display: block; height: 100%; background: var(--y3); box-shadow: inset 0 -2px 0 var(--y3u); }
.stars { display: inline-flex; gap: 1px; vertical-align: middle; } .stars svg { width: 15px; height: 15px; }
.score { font-family: var(--mono); font-weight: 700; }
.bar-row { display: grid; grid-template-columns: 170px 1fr 34px; gap: 10px; align-items: center; font-size: 12.5px; margin: 5px 0; } .bar-row .progress { height: 8px; }
.countdown { font-family: var(--mono); font-weight: 700; } .countdown.soon { color: var(--bad); }
.timeline { list-style: none; padding: 0; margin: 0; } .timeline li { padding: 8px 0 8px 18px; border-left: 2px solid var(--line); position: relative; font-size: 13px; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--y3); border: 1px solid var(--y3u); } .timeline time { color: var(--ink-3); font-size: 12px; display: block; }
.qa { border-left: 3px solid var(--line); padding: 6px 12px; margin: 8px 0; } .qa.answered { border-left-color: var(--y4); } .qa .a { color: var(--gold-ink); }
.file { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 6px; background: var(--hover); font-size: 13px; }
.status-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.rankbadge { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r); background: var(--hover); border: 1px solid var(--line); font-weight: 700; font-size: 12.5px; } .rankbadge.r1 { background: var(--y4); border-color: var(--y4u); color: var(--on-gold); }
.rate { display: inline-flex; gap: 2px; } .rate button { background: none; border: 0; font-size: 1.55rem; line-height: 1; color: var(--line); cursor: pointer; padding: 0 1px; } .rate button.on { color: var(--y4); } .rate button:hover { color: var(--y3); }
.loading { text-align: center; padding: 50px; color: var(--ink-3); }
.spinner { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--y4); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } }
.sticky-actions { position: sticky; bottom: 0; background: var(--face-flat); border-top: 1px solid var(--outline); padding: 12px 0; margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; z-index: 5; }

/* ---------- ingreso ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-hero { padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; }
.hero-logo { margin-bottom: 28px; } .hero-logo .brand { padding: 0; display: inline-block; } .hero-logo .plate { padding: 14px 18px; } .hero-logo .iso { height: 62px; } .hero-logo .word { width: 180px; } .hero-logo .supply { font-size: 22.4px; }
.auth-hero h1 { font-size: 2.3rem; letter-spacing: -.03em; } .auth-hero h1 span { color: var(--gold-ink); } .auth-hero p { color: var(--ink-2); max-width: 480px; }
.auth-hero ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; } .auth-hero li { display: flex; gap: 10px; color: var(--ink-2); } .auth-hero li i { color: var(--gold-ink); font-style: normal; font-weight: 800; }
.auth-form { display: grid; place-items: center; padding: 30px; } .auth-card { width: 100%; max-width: 400px; }

/* ---------- búsqueda y resultados ---------- */
.search-layout { display: grid; grid-template-columns: 270px 1fr; gap: var(--gap); align-items: start; }
.filters { position: sticky; top: 84px; } .filters .col > * { margin: 0; }
.stage-list { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; max-height: 330px; overflow-y: auto; }
.stage-list button { text-align: left; background: none; border: 0; padding: 6px 8px; border-radius: var(--r-in); cursor: pointer; font-size: 13px; display: flex; justify-content: space-between; gap: 8px; color: var(--ink-2); }
.stage-list button:hover { background: var(--hover); color: var(--ink); } .stage-list button.on { background: rgba(231, 163, 0, .18); font-weight: 700; color: var(--ink); } .stage-list .sub { padding-left: 22px; font-size: 12.5px; color: var(--ink-3); }
.result { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 16px 20px; background: var(--face); border: 1px solid var(--outline); border-radius: var(--r); margin-bottom: var(--gap); box-shadow: inset 0 1px 0 var(--rim), inset 0 -3px 0 var(--under), 0 2px 3px var(--drop); }
.result h4 { margin: 0 0 3px; font-size: 1.02rem; } .result h4 a { text-decoration: none; color: var(--ink); } .result h4 a:hover { text-decoration: underline; }
.result .desc { color: var(--ink-2); font-size: 13px; margin: 4px 0 6px; } .result .side { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; min-width: 150px; } .result.sel { outline: 2px solid var(--y3); }
.locked-box { border: 2px dashed var(--y4u); background: rgba(231, 163, 0, .12); border-radius: var(--r); padding: 18px; text-align: center; margin: 14px 0; }
.locked-ghost { height: 58px; border-radius: var(--r); background: repeating-linear-gradient(135deg, var(--hover), var(--hover) 10px, transparent 10px, transparent 20px); margin-bottom: 8px; border: 1px solid var(--line); }
.tray { position: fixed; bottom: 0; left: 0; right: 0; background: var(--brand-navy); color: #fff; padding: 10px 18px; z-index: 40; display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; border-top: 1px solid #020b24; }
.contact { padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; } .contact:last-child { border: 0; }
.stepper { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.stepper button { flex: 1; min-width: 120px; background: var(--face); border: 1px solid var(--outline); border-radius: var(--r); padding: 9px 12px; text-align: left; cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--ink-3); box-shadow: inset 0 -3px 0 var(--under), 0 2px 3px var(--drop); }
.stepper button.active { color: var(--ink); background: rgba(231, 163, 0, .2); border-color: var(--y4u); } .stepper button.done { color: var(--ink); } .stepper button.done::after { content: " ✓"; color: var(--gold-ink); } .stepper button small { display: block; font-weight: 400; color: var(--ink-3); font-size: 11.5px; }
.edit-table input, .edit-table select { height: 34px; padding: 0 8px; } .edit-table td { padding: 6px; vertical-align: middle; }
.sealed { text-align: center; padding: 40px 20px; background: repeating-linear-gradient(135deg, var(--hover), var(--hover) 14px, transparent 14px, transparent 28px); border: 1px dashed var(--outline); border-radius: var(--r); } .sealed .lock { font-size: 2.2rem; }
.matrix th.supplier { min-width: 170px; background: var(--brand-navy); color: #fff; font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.matrix td.best { background: rgba(231, 163, 0, .18); font-weight: 700; } .matrix td.worst { color: var(--bad); } .matrix tr.section td { background: var(--hover); font-weight: 700; color: var(--ink-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.plan-card { border: 1px solid var(--outline); border-radius: var(--r); padding: 18px; background: var(--face); box-shadow: inset 0 1px 0 var(--rim), inset 0 -3px 0 var(--under), 0 2px 3px var(--drop); display: flex; flex-direction: column; gap: 6px; } .plan-card.current { background: rgba(231, 163, 0, .16); border-color: var(--y4u); }
.plan-card ul { padding-left: 18px; margin: 6px 0; font-size: 13px; }

/* ---------- portal del proveedor (sin barra lateral) ---------- */
.portal-wrap { max-width: 980px; margin: 0 auto; padding: 24px 16px 80px; }
.portal-head { margin: 14px auto 0; max-width: 980px; padding: 10px 18px; background: var(--glass); border: 1px solid var(--outline); border-radius: var(--r); box-shadow: inset 0 1px 0 var(--rim), inset 0 -3px 0 var(--under), 0 2px 3px var(--drop); }
.portal-head .in { display: flex; align-items: center; gap: 14px; } .portal-head .brand { padding: 0; } .portal-head .plate { padding: 8px 12px; } .portal-head .iso { height: 36px; } .portal-head .word { width: 108px; } .portal-head .supply { font-size: 13.4px; } .portal-head .stack { gap: 5px; }

/* ---------- ventanas ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(2, 8, 22, .6); z-index: 100; display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.modal { background: var(--face-flat); border: 1px solid var(--outline); border-radius: var(--r); width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: inset 0 1px 0 var(--rim), inset 0 -3px 0 var(--under), 0 6px 14px rgba(0, 0, 0, .45); color: var(--ink); }
.modal.wide { max-width: 860px; } .modal-head { padding: 16px 20px 6px; display: flex; align-items: center; gap: 10px; } .modal-head h3 { margin: 0; flex: 1; }
.modal-body { padding: 8px 20px 16px; overflow-y: auto; } .modal-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; background: var(--hover); border-radius: 0 0 var(--r) var(--r); }
.x { background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink-3); } .x:hover { color: var(--ink); }
#toasts { position: fixed; bottom: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--brand-navy); color: #fff; padding: 11px 16px; border: 1px solid #020b24; border-left: 4px solid var(--y3); border-radius: var(--r); box-shadow: 0 2px 3px var(--drop); max-width: 380px; font-size: 13.5px; animation: pop .2s ease; } .toast.err { border-left-color: var(--c-terra); } .toast.ok { border-left-color: #7fbf95; }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- gráficos y lecturas ---------- */
.viz-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .viz-grid .wide { grid-column: 1 / -1; }
.viz-card { margin: 0; } .viz-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; } .viz-head h3 { margin: 0; } .viz-head .btn { margin-left: auto; white-space: nowrap; }
.viz-svg { width: 100%; height: auto; display: block; font-family: var(--font); overflow: visible; }
.viz-empty { color: var(--ink-3); font-size: 13.5px; padding: 26px 8px; text-align: center; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 8px; font-size: 12.5px; color: var(--ink-2); } .viz-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.viz-mark { cursor: default; outline: none; } .viz-mark:hover path, .viz-mark:hover circle:last-child, .viz-mark:focus path { filter: brightness(1.12); } .viz-mark:focus-visible { outline: 2px solid var(--y3); outline-offset: 2px; }
.viz-slot { outline: none; } .viz-slot .viz-cross { opacity: 0; } .viz-slot:hover .viz-cross, .viz-slot:focus .viz-cross { opacity: 1; } .viz-slot:hover .viz-dot, .viz-slot:focus .viz-dot { r: 5; }
.viz-tip { position: fixed; z-index: 400; background: var(--brand-navy); color: #edf2fc; border: 1px solid #020b24; border-radius: var(--r); padding: 7px 10px; font-size: 12.5px; line-height: 1.35; max-width: 260px; pointer-events: none; box-shadow: 0 2px 3px var(--drop); }
.viz-tip b { display: block; font-size: .92rem; color: #fff; margin-bottom: 1px; } .viz-tip div { color: #b9c6e0; } .viz-table .t { font-size: 12.5px; }
.heat .heat-cell { display: inline-block; min-width: 46px; padding: 3px 8px; border-radius: var(--r-in); font-weight: 700; text-align: center; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--gap); }
.stat { background: var(--face); border: 1px solid var(--outline); border-radius: var(--r); padding: 16px 20px; position: relative; min-height: 96px; box-shadow: inset 0 1px 0 var(--rim), inset 0 -3px 0 var(--under), 0 2px 3px var(--drop); }
.stat-label { font-size: 12.5px; color: var(--ink-3); font-weight: 600; } .stat-value { font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em; color: var(--ink); line-height: 1.2; margin: 2px 0; } .stat.hero .stat-value { font-size: 3rem; } .stat-sub { font-size: 12.5px; color: var(--ink-3); }
.stat-delta { font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-top: 2px; } .stat-delta.up-good { color: var(--ok); } .stat-delta.up-bad { color: var(--bad); } .stat .spark { display: block; width: 90px; height: 26px; margin-top: 8px; }
.insights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .ins { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; }
.ins-ic { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; margin-top: 1px; }
.ins.good .ins-ic { background: var(--ok-bg); color: var(--ok); } .ins.info .ins-ic { background: var(--info-bg); color: var(--info); } .ins.warn .ins-ic { background: var(--warn-bg); color: var(--warn); } .ins.risk .ins-ic { background: var(--bad-bg); color: var(--bad); }
.ai-card { border-left: 4px solid var(--y4); } .ai-card h4 { margin: 12px 0 4px; } .ai-card ul { margin: 0 0 0 18px; padding: 0; } .ai-card li { margin-bottom: 3px; }
.ai-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--info-bg); color: var(--info); padding: 2px 8px; border-radius: var(--r-in); }
.filters.row, .filters { }
.filters .seg { display: inline-flex; border: 1px solid var(--outline); border-radius: var(--r); overflow: hidden; background: var(--sunk); box-shadow: var(--sunken); } .filters .seg button { background: none; border: 0; padding: 7px 14px; cursor: pointer; font-weight: 600; color: var(--ink-3); } .filters .seg button.on { background: var(--brand-navy); color: #fff; }
.mini-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.fb-box { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; font-size: 13px; }
.cert { max-width: 880px; margin: 0 auto; } .cert h4 { margin: 14px 0 4px; } .cert-seal { margin-top: 18px; padding-top: 10px; border-top: 2px solid var(--ink); }

/* ---------- adaptación ---------- */
@media (max-width: 1280px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) {
  .app { grid-template-columns: minmax(0, 1fr); padding: 10px; gap: 12px; }
  .sidebar { position: fixed; left: 10px; top: 10px; bottom: 10px; height: auto; width: min(300px, calc(100vw - 20px)); transform: translateX(-120%); transition: transform .25s var(--ease); background: var(--face-flat); }
  .sidebar.open { transform: none; z-index: 95; } .scrim.open { display: block; position: fixed; inset: 0; z-index: 85; background: rgba(2, 8, 22, .6); }
  .top .menu-btn { display: grid; } .top { top: 10px; padding-left: 12px; } .filters { position: static; }
  .search-layout { grid-template-columns: 1fr; } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .viz-grid { grid-template-columns: 1fr; } .stat.hero .stat-value { font-size: 2.3rem; }
  .auth { grid-template-columns: 1fr; } .auth-hero { padding: 32px 24px; }
  .grid[style*="grid-template-columns"], .grid.g2[style] { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) { .viewswitch span { display: none; } .token-chip span.t { display: none; } }
@media (max-width: 640px) {
  .g2, .g3, .g4, .form-grid { grid-template-columns: 1fr; } .result { grid-template-columns: 1fr; } .result .side { align-items: flex-start; text-align: left; } .bar-row { grid-template-columns: 110px 1fr 30px; }
  .card { padding: 14px 16px; } .viewswitch button { padding: 4px 7px; font-size: 12px; } .top .crumb small { display: none; } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print { .sidebar, .top, .no-print, .demo-banner, .act-banner, .sticky-actions, #toasts, .scrim { display: none !important; } .app { display: block; padding: 0; } body { background: #fff; color: #000; } .card { box-shadow: none; border: 0; background: #fff; } #view { padding: 0; } }

/* ---------- portada y avisos de la demostración ---------- */
.demo-tag { align-self: flex-start; display: inline-block; font-family: "Orbitron", var(--font), sans-serif; font-weight: 900; letter-spacing: .3em; font-size: 14px; padding: 6px 14px 6px 18px; margin-bottom: 14px; border-radius: var(--r); color: var(--on-gold); background: var(--y4); border: 1px solid var(--y4u); box-shadow: inset 0 -3px 0 var(--y4u), 0 2px 3px var(--drop); }
.demo-quick { margin: 14px 0 18px; padding: 14px; border-radius: var(--r); background: rgba(231, 163, 0, .14); border: 1px dashed var(--y4u); } .demo-quick b { display: block; margin-bottom: 10px; } .demo-quick p { margin-top: 10px; }
.demo-banner { background: var(--y4); color: var(--on-gold); border-color: var(--y4u); letter-spacing: .03em; }

/* ---------- orden y alineación ---------- */
:root { --gap: 16px; --mono: var(--font); }
textarea { font: inherit; }
.card.pad0 table.t th:first-child, .card.pad0 table.t td:first-child { padding-left: 20px; } .card.pad0 table.t th:last-child, .card.pad0 table.t td:last-child { padding-right: 20px; }
.conf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .conf-act { margin-top: 8px; }
.support-foot { text-align: center; font-size: 12.5px; color: var(--ink-3); padding: 4px 16px 22px; } .support-foot a { color: var(--ink-2); font-weight: 600; }
.kpi span, .stat-label { line-height: 1.3; }
@media print { .support-foot { display: none; } }

/* lista de datos (ficha, solicitudes) */
dl.kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 13.5px; } dl.kv dt { color: var(--ink-3); font-weight: 600; } dl.kv dd { margin: 0; }
@media (max-width: 640px) { dl.kv { grid-template-columns: 1fr; gap: 2px; } dl.kv dd { margin-bottom: 8px; } }

/* celulares: textos largos sin cortes de palabra y tablas editables que no se salen de su caja */
.card pre { overflow-wrap: anywhere; }
.edit-table { display: block; max-width: 100%; overflow-x: auto; }