/* ▼ tokens — generado por arbby-hub/scripts/sync_brand.py desde brand/tokens.css. NO EDITAR ▼ */
/* Arbby — tokens de marca v2.1 · FUENTE ÚNICA del código.
   Se edita ACÁ y se corre `python scripts/sync_brand.py` (desde arbby-hub/): copia
   este bloque entre marcadores en frontend/theme.css y marketing/css/style.css, y
   frontend/theme.css entero a ../arbby-ads/ y ../arbby-orders/.
   Valores y nombres: docs/BRAND-GUIDE-ARBBY.md (madre, v2.1).
   Cambiar un token = cambiar la guía en el mismo cambio (guía §12). */
:root {
  /* §2.1 Superficies oscuras — cuatro niveles de elevación (§4) */
  --color-bg-base: #0B0A10;
  --color-bg-surface: #131220;
  --color-bg-elevated: #1C1A2C;
  --color-bg-float: #242138;
  --color-bg-hover: rgba(237, 236, 245, 0.06);

  /* §2.2 Texto sobre oscuro (no cambia entre niveles) */
  --color-text-primary: #EDECF5;
  --color-text-secondary: #8E8CA3;
  --color-text-muted: #7E7C94;   /* solo metadata, nunca dato. 4,58:1 sobre surface (v2.1 D2) */

  /* §2.3 Superficies claras */
  --color-bg-light: #FFFFFF;
  --color-bg-light-tint: #EDE9F5;
  --color-text-on-light: #0B0A10;
  --color-text-secondary-on-light: #5A5870;
  --color-text-muted-on-light: #7B7990;
  --color-accent-on-light: #6535E8;

  /* §2.4 Acento */
  --color-accent: #9B7CFF;
  --color-accent-lift: #C3B0FF;   /* hover, anillo de focus */
  --color-accent-deep: #5B3FD6;   /* decorativo */

  /* §2.5 Semánticos — los ÚNICOS colores que significan algo */
  --color-positive: #34D399;
  --color-negative: #FF5A5A;
  --color-warning: #FFB020;

  /* §2.6 Familia análoga — decorativa, NUNCA para datos */
  --brand-lift: #C3B0FF;
  --brand-accent: #9B7CFF;
  --brand-rosa: #FF3DA8;
  --brand-magenta: #8B008B;
  --brand-abyss: #2A0A38;
  --brand-ramp: linear-gradient(100deg, #C3B0FF, #9B7CFF 38%, #FF3DA8 74%, #8B008B);

  /* §2.7 Venues — identifican una fila, no significan nada. MEXC no lleva texto */
  --venue-bybit: #FF7A00;
  --venue-okx: #E9E9EE;
  --venue-bingx: #4AA3FF;
  --venue-mexc: #1F5BFF;
  --venue-bitget: #00E5FF;
  --venue-binance: #FFD45C;

  /* §2.8 Bordes (0,5 px en pantalla) */
  --color-border: rgba(237, 236, 245, 0.09);
  --color-border-strong: rgba(237, 236, 245, 0.15);
  --color-border-on-light: rgba(11, 10, 16, 0.12);

  /* §3 Tipografía — Outfit 500 (display) · Inter 400/500 (UI). Nunca 600 */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-hero: clamp(40px, 5.4vw, 70px);
  --text-display: 29px;
  --text-heading: 19px;
  --text-body: 14px;
  --text-data: 13px;
  --text-label: 12px;
  --text-caption: 11px;
  --text-data-large: 21px;
  --tracking-hero: -0.042em;
  --tracking-display: -0.028em;
  --tracking-heading: -0.02em;
  --tracking-wordmark: -0.05em;   /* §1.2 */

  /* §4 Radios y la única sombra (nivel flotante) */
  --radius-tag: 4px;   /* tags y etiquetas chicas (v2.1 D6) */
  --radius-item: 7px;
  --radius-card-sm: 10px;
  --radius-card: 15px;
  --radius-pill: 99px;
  --shadow-float: 0 24px 60px -30px rgba(139, 0, 139, 0.55);
}
/* ▲ tokens ▲ */

/* ══════════════════════════════════════════════════════════════════════════
   Arbby — theme.css · lo COMPARTIDO por la Suite (Hub web/local y los paneles
   de Arbby Ads y Arbby Orders): tokens, alias, base, sidebar, botones.
   Canónico acá (arbby-hub); `scripts/sync_brand.py` inyecta arriba el bloque de
   `brand/tokens.css` y copia este archivo ENTERO a arbby-ads y arbby-orders.
   Nunca editar las copias de los bots. Lo específico de cada app, en su CSS.

   CONTRATO: los componentes nuevos usan los tokens de la guía (bloque de arriba)
   y, si hace falta, los alias de abajo. Un alias sin uso NO se borra acá: lo
   limpia la última sesión del upgrade (lista en REPORTE-REBRAND-BASE).
   ════════════════════════════════════════════════════════════════════════ */

/* Capa de alias: nombres v1.0 que el CSS existente sigue usando, apuntados a
   los tokens v2.0 del bloque de arriba. Todo lo que no está acá ya ES un token. */
:root {
  --color-bg-primary: var(--color-bg-base);
  --color-bg-light-muted: var(--color-bg-light-tint);
  --color-border-medium: var(--color-border);
  --green-vivid: var(--color-positive);   /* Arbby Ads: verbo Comprar y compra del dólar (§2d REBRAND-V2; supera ARQ #30) */

  --text-logo: 20px;   /* tamaño del wordmark en el sidebar (la guía no lo fija) */

  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.hidden { display: none !important; }

/* Números (guía §3.3): regla global sobre todo lo que es dato, para que los
   dígitos no bailen de fila en fila. */
td, .num, .value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Pesos (guía §3.2): 400 y 500, ninguno más. Los defaults del navegador (títulos,
   <b>, <th>) son 700: se bajan acá, y cada regla explícita sigue mandando. */
h1, h2, h3, h4, b, strong, th { font-weight: 500; }

/* ── Logo (guía §1) ── Lockup = isotipo + wordmark `arbby` en Outfit 500, minúscula,
   tracking −0,05 em, en el color de texto del contexto. Sobre oscuro: isotipo con degradado.
   Isotipo = caja de 1,36 em (la del lockup V5: 30 px con wordmark de 22 px) y aire
   de 0,36 × esa altura. Va por CSS (::before + data URI): cero HTML tocado y los
   bots no sirven un archivo nuevo. REGLA: el wordmark nunca va solo. */
.sidebar-logo, .wordmark, .gate-logo {
  display: inline-flex; align-items: center; gap: 0.49em;
  font-family: var(--font-display); font-weight: 500; line-height: 1;
  letter-spacing: var(--tracking-wordmark); text-transform: lowercase;
}
.sidebar-logo::before, .wordmark::before, .gate-logo::before {
  content: ""; flex-shrink: 0; width: 1.36em; height: 1.36em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='10' y1='10' x2='54' y2='54'%3E%3Cstop offset='0' stop-color='%23C3B0FF'/%3E%3Cstop offset='.62' stop-color='%239B7CFF'/%3E%3Cstop offset='1' stop-color='%23C558D8'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='32' y1='34.75' x2='32' y2='58'%3E%3Cstop offset='0' stop-color='%239B7CFF'/%3E%3Cstop offset='1' stop-color='%235B3FD6'/%3E%3C/linearGradient%3E%3CclipPath id='t'%3E%3Crect x='-4' y='-4' width='72' height='33.25'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Crect x='-4' y='34.75' width='72' height='33.25'/%3E%3C/clipPath%3E%3Cpath id='a' d='M30.7 57Q24.2 57 18.95 53.7Q13.7 50.4 10.65 44.75Q7.6 39.1 7.6 32.1Q7.6 25 10.65 19.35Q13.7 13.7 18.95 10.35Q24.2 7 30.7 7Q36.2 7 40.45 9.35Q44.7 11.7 47.2 15.8Q49.7 19.9 49.7 25.1V38.9Q49.7 44.1 47.25 48.2Q44.8 52.3 40.5 54.65Q36.2 57 30.7 57ZM32.5 46.6Q38.6 46.6 42.35 42.5Q46.1 38.4 46.1 32Q46.1 27.7 44.4 24.4Q42.7 21.1 39.65 19.25Q36.6 17.4 32.5 17.4Q28.5 17.4 25.45 19.25Q22.4 21.1 20.65 24.4Q18.9 27.7 18.9 32Q18.9 36.3 20.65 39.6Q22.4 42.9 25.45 44.75Q28.5 46.6 32.5 46.6ZM45.4 56V43.1L47.3 31.4L45.4 19.8V8H56.4V56Z'/%3E%3C/defs%3E%3Cuse href='%23a' clip-path='url(%23t)' fill='url(%23g)'/%3E%3Cuse href='%23a' clip-path='url(%23b)' fill='url(%23h)'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Focus (guía §5): anillo de 2 px en accent-lift, offset 2 px. Es lo único que ve
   quien navega con teclado: anular el outline sin reemplazo lo borra. */
:focus-visible { outline: 2px solid var(--color-accent-lift); outline-offset: 2px; }

/* ── Layout dashboard: sidebar + contenido ── */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 206px; flex-shrink: 0;
  background: var(--color-bg-surface);
  border-right: 0.5px solid var(--color-border-medium);
  padding: 16px 12px;
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar-logo {
  font-size: var(--text-logo); color: var(--color-text-primary);
  padding: 4px 12px 14px; border-bottom: 0.5px solid var(--color-border-medium);
  margin-bottom: 8px; text-decoration: none;
}
.sidebar-item {
  padding: 8px 12px; border-radius: var(--radius-item); font-size: 13px; font-family: var(--font-ui);
  display: flex; align-items: center; gap: 9px; color: var(--color-text-secondary);
  cursor: pointer; transition: background 0.15s, color 0.15s;
  border: none; background: transparent; text-align: left; width: 100%; text-decoration: none;
}
.sidebar-item:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.sidebar-item.active { background: var(--color-bg-hover); color: var(--color-text-primary); }
.sidebar-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 1.6; color: var(--color-text-secondary);
}
.sidebar-item.active .sidebar-icon { color: var(--color-accent); }
.sidebar-item:hover .sidebar-icon { color: var(--color-text-primary); }
.sidebar-item.active:hover .sidebar-icon { color: var(--color-accent); }
/* Íconos de línea en línea con texto (guía §8): 14 px, trazo, sin relleno. */
.ico { width: 14px; height: 14px; flex-shrink: 0; vertical-align: -2px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-sep { height: 0.5px; background: var(--color-border-medium); margin: 8px 4px; }
.sidebar-spacer { flex: 1; }
.sidebar-badge {
  font-size: var(--text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent);
  border: 0.5px solid var(--color-border-strong); border-radius: var(--radius-tag); padding: 1px 5px; margin-left: auto;
}
.sidebar-foot { font-size: var(--text-caption); color: var(--color-text-muted); padding: 8px 12px 2px; }
.sidebar-foot .auth-email { display: block; color: var(--color-text-secondary); margin-bottom: 4px; word-break: break-all; }

.main-content {
  flex: 1; min-width: 0; background: var(--color-bg-primary);
  position: relative; padding: 24px 28px 40px;
}
/* Textura (guía §7, v2.1 D4): en la Suite va SOLO el mosaico triangular, estático,
   al 4–5 %. Dos capas de SVG pre-renderizado (cero JS, cero canvas): la ordenada
   arriba y la de desorden abajo, cruzadas con una máscara — orden arriba, ruido
   abajo, como el motor `Mosaic` del boceto en modo static (celda de 26), al 4 %. Nunca
   detrás de un dato: cards y tablas van en surface sólido, por encima (z-index 1). */
.main-content::before, .main-content::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.04;
}
.main-content::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cpath fill='%239B7CFF' d='M0 0h26l-26 26zM26 52v-26l26 26z'/%3E%3Cpath fill='%239B7CFF' fill-opacity='.4' d='M52 0v26l-26-26zM26 52h-26l26-26z'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to bottom, black 0, transparent 900px);
  mask-image: linear-gradient(to bottom, black 0, transparent 900px);
}
.main-content::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cpath fill='%239B7CFF' d='M0 0h26l-26 26zM26 26v-26l26 26zM52 26v-26l26 26zM78 0h26l-26 26zM104 26v-26l26 26zM130 26v-26l26 26zM0 26h26l-26 26zM52 26h26l-26 26zM78 26h26l-26 26zM104 52v-26l26 26zM156 26h26l-26 26zM182 26h26l-26 26zM234 52v-26l26 26zM26 52h26l-26 26zM52 78v-26l26 26zM78 78v-26l26 26zM104 52h26l-26 26zM130 78v-26l26 26zM208 52h26l-26 26zM0 78h26l-26 26zM52 130v-26l26 26zM78 130v-26l26 26zM130 104h26l-26 26zM234 104h26l-26 26zM0 156v-26l26 26zM104 156v-26l26 26zM156 130h26l-26 26zM208 156v-26l26 26zM0 182v-26l26 26zM52 182v-26l26 26zM78 156h26l-26 26zM104 156h26l-26 26zM156 156h26l-26 26zM182 182v-26l26 26zM78 182h26l-26 26zM156 182h26l-26 26zM182 182h26l-26 26zM0 208h26l-26 26zM52 208h26l-26 26zM130 234v-26l26 26zM156 234v-26l26 26zM26 234h26l-26 26zM52 234h26l-26 26zM78 234h26l-26 26zM104 260v-26l26 26zM130 234h26l-26 26zM156 234h26l-26 26zM182 260v-26l26 26z'/%3E%3Cpath fill='%239B7CFF' fill-opacity='.4' d='M182 0v26l-26-26zM208 0v26l-26-26zM234 26h-26l26-26zM260 0v26l-26-26zM52 52h-26l26-26zM156 26v26l-26-26zM234 52h-26l26-26zM26 78h-26l26-26zM182 78h-26l26-26zM208 52v26l-26-26zM260 78h-26l26-26zM52 104h-26l26-26zM78 104h-26l26-26zM104 78v26l-26-26zM130 104h-26l26-26zM156 104h-26l26-26zM182 104h-26l26-26zM208 78v26l-26-26zM234 104h-26l26-26zM260 104h-26l26-26zM26 130h-26l26-26zM52 130h-26l26-26zM130 104v26l-26-26zM182 104v26l-26-26zM208 130h-26l26-26zM234 130h-26l26-26zM52 130v26l-26-26zM78 130v26l-26-26zM104 156h-26l26-26zM156 156h-26l26-26zM208 156h-26l26-26zM260 130v26l-26-26zM52 156v26l-26-26zM156 156v26l-26-26zM234 156v26l-26-26zM260 156v26l-26-26zM26 182v26l-26-26zM52 208h-26l26-26zM78 208h-26l26-26zM130 182v26l-26-26zM156 182v26l-26-26zM234 208h-26l26-26zM260 182v26l-26-26zM52 234h-26l26-26zM104 208v26l-26-26zM130 234h-26l26-26zM208 208v26l-26-26zM234 234h-26l26-26zM260 208v26l-26-26zM26 260h-26l26-26zM234 234v26l-26-26zM260 234v26l-26-26z'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to bottom, transparent 120px, black 1000px);
  mask-image: linear-gradient(to bottom, transparent 120px, black 1000px);
}
.main-content > * { position: relative; z-index: 1; }

.page-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-heading); letter-spacing: var(--tracking-heading); margin: 0; color: var(--color-text-primary); }
.page-head .status, .status { color: var(--color-text-secondary); font-size: var(--text-caption); }

/* ── Botones ── */
button { font-family: var(--font-ui); }
.btn-primary, button.primary {
  background: var(--color-accent); color: var(--color-text-on-light); border: none;
  padding: 8px 20px; border-radius: var(--radius-item); font-size: 13px; font-weight: 500;
  font-family: var(--font-ui); cursor: pointer; transition: filter 0.15s;
}
.btn-primary:hover, button.primary:hover { filter: brightness(1.12); }
/* Disabled (guía §5): acento al 22 %, texto al 38 % — bajar la opacidad del botón
   entero lo hace desaparecer. */
.btn-primary:disabled, button.primary:disabled {
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
  color: color-mix(in srgb, var(--color-text-primary) 38%, transparent);
  cursor: default; filter: none;
}
.btn-secondary {
  background: transparent; color: var(--color-text-primary);
  border: 0.5px solid var(--color-border-strong); padding: 8px 20px; border-radius: var(--radius-item);
  font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s;
}
.btn-secondary:hover { background: var(--color-bg-hover); }
.btn-ghost, button.ghost {
  background: transparent; color: var(--color-text-secondary); border: none;
  padding: 8px 20px; border-radius: var(--radius-item); font-size: 13px; font-weight: 500; cursor: pointer;
}
.btn-ghost:hover, button.ghost:hover { color: var(--color-text-primary); }
button.primary.block { width: 100%; padding: 11px; font-size: 14px; }
button.toggle {
  border: 0.5px solid var(--color-border-strong); background: transparent;
  color: var(--color-text-secondary); padding: 7px 13px; border-radius: var(--radius-item);
  cursor: pointer; font: inherit; font-size: 13px; transition: background 0.15s, color 0.15s;
}
button.toggle:hover { color: var(--color-text-primary); }
button.toggle.active { background: var(--color-bg-hover); color: var(--color-text-primary); border-color: var(--color-accent); }
button.linkbtn { background: none; border: none; color: var(--color-accent); cursor: pointer; font: inherit; font-size: 13px; padding: 4px 6px; }
button.linkbtn:hover { text-decoration: underline; }
.btn-secondary:disabled, .btn-ghost:disabled, button.ghost:disabled, button.toggle:disabled {
  color: color-mix(in srgb, var(--color-text-primary) 38%, transparent); cursor: default;
}

.card { background: var(--color-bg-surface); border: 0.5px solid var(--color-border); border-radius: var(--radius-card-sm); padding: 14px 16px; }

/* ── Estados compartidos (guía §5) ──
   Loading: esqueleto con la forma de lo que viene, barrido de 1,5 s (en una tabla
   que refresca cada 12 s, un spinner permanente cansa). Sin movimiento con
   prefers-reduced-motion. Empty: una línea que explica y otra que dice qué hacer. */
.esq {
  display: block; height: 12px; border-radius: var(--radius-tag);
  background: linear-gradient(90deg, var(--color-bg-elevated) 0%, var(--color-bg-hover) 50%, var(--color-bg-elevated) 100%);
  background-size: 200% 100%; animation: esq-barrido 1.5s linear infinite;
}
.esq.corto { max-width: 64px; }
.esq.medio { max-width: 110px; }
.esq-card { display: grid; gap: 10px; align-content: start; min-height: 96px; }
@keyframes esq-barrido { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esq { animation: none; } }
/* Empty: <b>lo que pasa</b><br>qué hacer. */
.vacio { color: var(--color-text-secondary); padding: 28px 16px; text-align: center; line-height: 1.6; }
.vacio b { color: var(--color-text-primary); font-weight: 500; }

/* ── Breakpoints (guía §8) ──────────────────────────────────────────────────
   ≥ 1440       contenido topado en 1180 px y centrado (la textura sigue llegando
                a los bordes: el tope va en los hijos, no en .main-content).
   1024–1439    layout completo, sidebar fijo de 206 px (arriba).
   640–1023     sidebar colapsado a íconos; los sub-ítems de un grupo salen en un
                panel flotante al pasar o al enfocar.
   < 640        una columna, sidebar como barra superior desplazable, y las tablas
                de Mercado (.tabla-cards) como cards apiladas. */
@media (min-width: 1440px) {
  .main-content > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  /* z-index: el panel flotante de sub-ítems tiene que quedar arriba del contenido
     (los hijos de .main-content van en z-index 1). */
  .sidebar { width: 60px; padding: 14px 8px; overflow: visible; z-index: 30; }
  .sidebar-logo { font-size: 0; padding: 4px 0 12px; justify-content: center; }
  .sidebar-logo::before { width: 26px; height: 26px; }
  /* La etiqueta (span o nodo de texto) queda en 0 px: no se ve, pero el lector de
     pantalla la sigue leyendo. El ícono tiene su tamaño en px. */
  .sidebar .sidebar-item { justify-content: center; padding: 9px 0; gap: 0; font-size: 0; position: relative; }
  .sidebar-foot, .sidebar-badge { display: none; }
  .sidebar .sb-group { position: relative; }
  .sidebar .sb-group .sidebar-subitems, .sidebar .sb-group.open .sidebar-subitems { display: none; }
  .sidebar .sb-group:hover .sidebar-subitems, .sidebar .sb-group:focus-within .sidebar-subitems {
    display: flex; position: absolute; left: 100%; top: 0; z-index: 20; min-width: 180px; margin: 0;
    padding: 6px; background: var(--color-bg-float); border: 0.5px solid var(--color-border);
    border-radius: var(--radius-card-sm); box-shadow: var(--shadow-float);
  }
  .sidebar .sb-group .sidebar-subitem { padding: 6px 12px; white-space: nowrap; }
  .main-content { padding: 20px 20px 36px; }
}

@media (max-width: 639px) {
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; overflow-x: auto; }
  .app { flex-direction: column; }
  .sidebar-spacer, .sidebar-foot { display: none; }
  .sidebar-logo { border-bottom: none; margin: 0; padding: 4px 10px; }
  /* Barra superior de UNA fila: ítems y sub-ítems uno al lado del otro. */
  .sidebar .sidebar-item, .sidebar .sidebar-subitem { width: auto; flex-shrink: 0; white-space: nowrap; }
  .sidebar .sb-group, .sidebar .sb-group.open .sidebar-subitems { display: flex; flex-direction: row; align-items: center; margin: 0; }
  .sidebar .sidebar-subitem { padding: 6px 10px; }
  .main-content { padding: 18px 16px 32px; }

  /* Tabla de Mercado → cards apiladas: el scroll horizontal en móvil se usa mal.
     Cada <td> lleva su encabezado en data-label (lo pone el JS que arma la tabla). */
  table.tabla-cards, table.tabla-cards > tbody, table.tabla-cards > tbody > tr, table.tabla-cards > tbody > tr > td {
    display: block; width: 100%; min-width: 0;
  }
  table.tabla-cards > thead { display: none; }
  table.tabla-cards { border: none; background: transparent; }
  table.tabla-cards > tbody > tr {
    background: var(--color-bg-surface); border: 0.5px solid var(--color-border);
    border-radius: var(--radius-card-sm); padding: 8px 12px; margin-bottom: 8px;
  }
  table.tabla-cards > tbody > tr > td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 4px 0; border: none; text-align: right; white-space: normal;
  }
  table.tabla-cards > tbody > tr > td[data-label]::before {
    content: attr(data-label); flex-shrink: 0; text-align: left;
    color: var(--color-text-secondary); font-size: var(--text-label);
  }
  table.tabla-cards > tbody > tr > td:empty { display: none; }
  table.tabla-cards > tbody > tr > td[colspan] { justify-content: center; text-align: center; }
}