/* ─────────────────────────────────────────────────────────────────────────────
   SISTEMA (rediseño 2026-10, dirección Linear / Twenty / Intercom). Capa que se carga DESPUÉS de
   styles.css. Hoy cubre: tokens nuevos, la familia de botones, la cabecera de navegación de dos filas
   (áreas · secciones + closers · periodo) y el menú de la cuenta. El tablero y las tarjetas siguen con
   styles.css tal cual (decisión de Adrian 26-oct: "me gusta más como estaba"). Todo va bajo `html.ui2`
   para no pisar nada fuera de la cabecera.
   Reglas (DESIGN-SYSTEM.md + Cerebro): un acento, px pares, escala 12/14/16/20/24/32, radios 8/12/16,
   controles propios, iconos Lucide (ui/icons.svg), 44 px de dedo en móvil.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --accent: #B98517;
  --accent-ink: #7F590D;   /* ≥ 4,5:1 también sobre --accent-soft (chips activos) */
  --accent-soft: #F6EBCF;
  --on-gold: #1B1405;
  --ok: #2BA173;      --ok-ink: #1B6F4C;
  --warn: #D97122;    --warn-ink: #A1500F;
  --danger: #E04848;  --danger-ink: #C13232;
  --info: #3D63E8;    --info-ink: #2F4FBF;
  --violet-ink: #5A47A0;
  --rose: #E0447A;    --rose-ink: #B3335F;
  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-20: 20px; --t-24: 24px; --t-32: 32px;
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-32: 32px; --s-48: 48px;
  --r-8: 8px; --r-12: 12px; --r-16: 16px;
  --dur: 160ms; --ease: cubic-bezier(.2, .7, .2, 1);
  --tn-h: 52px; --tn-h2: 40px;
}
:root[data-theme="dark"] {
  --accent: #D7A62A;
  --accent-ink: #F2CB68;
  --accent-soft: #2B2410;
  --ok: #3CCB8E;      --ok-ink: #6FD9A8;
  --warn: #E98A2E;    --warn-ink: #F2A65A;
  --danger: #EF5B5B;  --danger-ink: #F28585;
  --info: #4B7BFF;    --info-ink: #7E9DFF;
  --violet-ink: #B09AE3;
  --rose: #F0608E;    --rose-ink: #F58AAB;
}

/* ── Base ── */
html.ui2 .ico { width: 16px; height: 16px; stroke-width: 1.75; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
html.ui2 .ico.lg { width: 20px; height: 20px; }
html.ui2 .mfb { display: none !important; }

/* ── Familia de botones (una sola). Alturas 36 / 32 / 44 móvil, radio 8, 160 ms ── */
html.ui2 .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8);
  height: 36px; padding: 0 var(--s-12); border-radius: var(--r-8); border: 0;
  background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: var(--t-14);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
html.ui2 .btn:hover { background: var(--surface-3); }
html.ui2 .btn:active { transform: translateY(1px); }
html.ui2 .btn:focus-visible { outline: none; box-shadow: var(--ring); }
html.ui2 .btn.primaria { background: var(--btn-gold); color: var(--on-gold); box-shadow: none; }
html.ui2 .btn.primaria:hover { background: var(--btn-gold-hi); }
html.ui2 .btn.fantasma { background: transparent; box-shadow: none; color: var(--muted); }
html.ui2 .btn.fantasma:hover { background: var(--surface-3); color: var(--text); }
html.ui2 .btn.peligro { background: transparent; color: var(--danger-ink); box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 40%, transparent); }
html.ui2 .btn.peligro:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
html.ui2 .btn.sm { height: 32px; padding: 0 10px; font-size: var(--t-12); }
html.ui2 .btn.icono { width: 36px; padding: 0; }
html.ui2 .btn.sm.icono { width: 32px; }
html.ui2 .btn[disabled], html.ui2 .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* Avatar y segmentado (menú de la cuenta) */
html.ui2 .av2 { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 1000px; background: var(--av, var(--surface-3)); color: var(--text); font-size: var(--t-12); font-weight: 700; letter-spacing: .02em; flex: none; overflow: hidden; }
html.ui2 .av2.md { width: 32px; height: 32px; }
/* Avatar de la cuenta con la FOTO del perfil y, si no hay, las iniciales sobre el color que el
   closer eligió (--av). Antes eran siempre iniciales en gris, así que subir foto y color no
   cambiaba nada de lo que el closer ve de sí mismo. (Adrian 2026-10-28) */
html.ui2 .av2[style*="--av"] { color: #fff; }
html.ui2 .av2.lg { width: 44px; height: 44px; font-size: var(--t-14); }
html.ui2 .av2-foto { background: var(--surface-3); }
html.ui2 .av2-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 768px) {
  /* Diana táctil de 44 px: en el móvil este botón es la entrada al perfil. */
  html.ui2 .tn-account > button { min-height: 44px; }
  html.ui2 .tn-account .av2.md { width: 36px; height: 36px; }
}

/* ── Mi perfil (closer) ─────────────────────────────────────────────────────────────────────── */
html.ui2 .mi-perfil-view .mp-cuerpo { display: flex; flex-wrap: wrap; gap: var(--s-16); align-items: flex-start; }
html.ui2 .mi-perfil-view .mp-tarjeta { flex: 0 1 auto; min-width: 0; }
/* Ancho acotado: son dos o tres líneas, y estirado a toda la fila quedaba un bloque medio vacío
   al lado de la tarjeta (espacio muerto). */
html.ui2 .mi-perfil-view .mp-pendiente {
  flex: 0 1 320px; min-width: 0; max-width: 360px;
  display: grid; gap: var(--s-8); justify-items: start;
  padding: var(--s-16); border-radius: var(--r-12); background: var(--surface-2);
}
html.ui2 .mi-perfil-view .mp-pendiente strong { font-size: var(--t-14); }
html.ui2 .mi-perfil-view .mp-pendiente ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: var(--t-14); }
html.ui2 .mi-perfil-view .mp-pendiente li { margin: 2px 0; }
@media (max-width: 768px) {
  /* La tarjeta manda el ancho; lo que falta por completar va debajo, no en una columna estrecha. */
  html.ui2 .mi-perfil-view .mp-cuerpo { flex-direction: column; }
  html.ui2 .mi-perfil-view .mp-tarjeta,
  html.ui2 .mi-perfil-view .mp-pendiente { width: 100%; max-width: none; }
}
html.ui2 .seg2 { display: inline-flex; padding: 2px; border-radius: var(--r-8); background: var(--surface-3); gap: 2px; }
html.ui2 .seg2 button { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: var(--t-12); font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
html.ui2 .seg2 button:hover { color: var(--text); }
html.ui2 .seg2 button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-soft); }

/* ── Cabecera de navegación: fila 1 = marca · áreas · buscador · alertas · cuenta; fila 2 = secciones · closers · periodo ── */
html.ui2 .tn { position: sticky; top: 0; z-index: 30; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
html.ui2 .tn-row1 { display: flex; align-items: center; gap: var(--s-16); height: var(--tn-h); padding: 0 var(--s-24); }
html.ui2 .tn-brand { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; font: inherit; font-weight: 700; white-space: nowrap; color: var(--text); text-decoration: none; cursor: pointer; }
html.ui2 .tn-brand .brand-mark { width: 28px; height: 28px; border-radius: 8px; margin: 0; font-size: 12px; }
html.ui2 .tn-brand .brand-mark img { width: 28px; height: 28px; border-radius: 8px; }
html.ui2 .tn-areas { display: flex; gap: 2px; min-width: 0; }
html.ui2 .tn-area { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-8); background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
html.ui2 .tn-area .ico { color: var(--faint); }
html.ui2 .tn-area:hover { background: var(--surface-3); color: var(--text); }
html.ui2 .tn-area.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); }
html.ui2 .tn-area.on .ico { color: var(--accent); }
html.ui2 .tn-right { margin-left: auto; display: flex; align-items: center; gap: var(--s-8); }
html.ui2 .tn-search { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-8); background: var(--surface); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); color: var(--faint); font: inherit; font-size: var(--t-12); min-width: 200px; cursor: pointer; text-align: left; }
html.ui2 .tn-search kbd { margin-left: auto; font: inherit; font-size: var(--t-12); color: var(--faint); }
html.ui2 .tn-search:hover { color: var(--text); }
html.ui2 .tn-bell { position: relative; }
html.ui2 .tn-bell .alert-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 1000px; background: var(--danger-ink); color: #fff; font-size: var(--t-12); font-weight: 700; line-height: 1; display: grid; place-items: center; }
html.ui2[data-theme="dark"] .tn-bell .alert-badge { background: var(--danger); color: #140404; }
html.ui2 .tn-account { position: relative; }
html.ui2 .tn-account > button { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 4px 0 2px; border: 0; border-radius: 1000px; background: transparent; cursor: pointer; font: inherit; color: var(--faint); }
html.ui2 .tn-account > button:hover { background: var(--surface-3); color: var(--text); }
html.ui2 .tn-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 260px; background: var(--surface); border-radius: var(--r-12); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line-soft); padding: var(--s-8); z-index: 40; }
html.ui2 .tn-menu .who { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; min-width: 0; }
html.ui2 .tn-menu .who strong { display: block; font-size: var(--t-14); }
html.ui2 .tn-menu .who small { display: block; color: var(--faint); font-size: var(--t-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
html.ui2 .tn-menu .fila { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); padding: 6px 10px; color: var(--muted); font-size: var(--t-12); font-weight: 600; }
html.ui2 .tn-menu .item { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-8); background: transparent; color: var(--text); font: inherit; font-weight: 500; cursor: pointer; text-align: left; }
html.ui2 .tn-menu .item:hover { background: var(--surface-3); }
html.ui2 .tn-menu .item .ico { color: var(--faint); }
html.ui2 .tn-menu .item.peligro { color: var(--danger-ink); margin-top: 4px; }
html.ui2 .tn-row2 { display: flex; align-items: center; gap: var(--s-12); height: var(--tn-h2); padding: 0 var(--s-24); border-top: 1px solid var(--line-soft); }
html.ui2 .tn-sub { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
html.ui2 .tn-sub::-webkit-scrollbar { display: none; }
html.ui2 .tn-tab { display: inline-flex; align-items: center; gap: 6px; height: var(--tn-h2); padding: 0 10px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
html.ui2 .tn-tab:hover { color: var(--text); }
html.ui2 .tn-tab.on { color: var(--text); border-bottom-color: var(--accent); }
html.ui2 .tn-tab .n { font-size: var(--t-12); color: var(--faint); }
html.ui2 .tn-scope { margin-left: auto; flex: none; display: flex; align-items: center; gap: var(--s-8); }
html.ui2 .tn-sub3 { flex: none; display: flex; align-items: center; margin-left: var(--s-12); padding-left: var(--s-12); border-left: 1px solid var(--line-soft); }
html.ui2 .tn-sub3[hidden] { display: none; }
html.ui2 .tn-sub3 .training-tab { min-height: 30px; }
html.ui2 .tn-m-search, html.ui2 .tn-m-bell { display: none; }
html.ui2 .tn .period-picker { margin: 0; }
html.ui2 .tn .period-picker-btn { height: 30px; padding: 0 10px; border: 0; border-radius: var(--r-8); background: var(--surface); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); color: var(--text); font: inherit; font-size: var(--t-12); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
html.ui2 .tn .period-picker-btn .ico, html.ui2 .tn .pp-caret { color: var(--faint); }
html.ui2 .tn .pp-caret { font-size: var(--t-12); }

/* Selector de closers (seller-focus) en la cabecera, con forma de select propio */
html.ui2 .seller-focus-wrap { position: relative; font-size: var(--t-12); }
html.ui2 .seller-focus-trigger { display: inline-flex; align-items: center; gap: var(--s-8); height: 30px; padding: 0 8px 0 10px; border: 0; border-radius: var(--r-8); background: var(--surface); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); color: var(--text); font: inherit; font-size: var(--t-12); font-weight: 600; cursor: pointer; }
html.ui2 .seller-focus-trigger > .ico, html.ui2 .seller-focus-trigger .sf-chev { color: var(--faint); display: inline-flex; font-size: var(--t-12); }
html.ui2 .seller-focus-trigger .sf-triglabel { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui2 .seller-focus-wrap.has-filter .seller-focus-trigger { background: var(--accent-soft); color: var(--accent-ink); box-shadow: none; }
html.ui2 .seller-focus-wrap.has-filter .seller-focus-trigger .ico { color: var(--accent-ink); }
html.ui2 .seller-focus-wrap:not(.open) .seller-focus-panel { display: none; }
html.ui2 .seller-focus-panel { right: 0; left: auto; border-radius: var(--r-12); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line-soft); border: 0; padding: var(--s-8); }
html.ui2 .seller-focus-panel .sf-search input, html.ui2 #seller-focus-q { font-size: var(--t-14); padding: 0 var(--s-12); height: 36px; border-radius: var(--r-8); }
html.ui2 .seller-focus-panel .sf-row { gap: var(--s-12); border-radius: var(--r-8); padding: 6px 8px; }
html.ui2 .seller-focus-panel .sf-sub, html.ui2 .seller-focus-panel .sf-glabel, html.ui2 .seller-focus-panel .sf-gcount, html.ui2 .seller-focus-panel .sf-num small, html.ui2 .seller-focus-panel .sf-verok { font-size: var(--t-12); }
html.ui2 .seller-focus-panel .sf-av { background: color-mix(in srgb, var(--av, var(--accent)) 22%, transparent); color: var(--text); }
html.ui2 .seller-focus-panel .sf-av-all { background: var(--accent-soft); color: var(--accent-ink); }

/* Pie de página (legacy, en todas las pantallas): a la escala par del sistema */
html.ui2 footer ul { gap: var(--s-8); }
html.ui2 .foot-theme { padding: 4px 6px; border-radius: 1000px; }
html.ui2 .foot-heart { color: var(--danger-ink); }
html.ui2 .flap-board { gap: 4px; }
html.ui2 .flap-rail, html.ui2 .flap-cell { border-radius: 4px; }
html.ui2 .flap-cell { font-size: var(--t-14); }
html.ui2 footer h5, html.ui2 .flap-author, html.ui2 .foot-copy { font-size: var(--t-12); }
html.ui2 .foot-theme-btn, html.ui2 .foot-top-btn { border-radius: 1000px; }

/* ── Móvil (≤ 900): áreas como iconos, secciones con scroll, 44 px de dedo ── */
@media (max-width: 900px) {
  /* Fila 1: las seis áreas siempre a la vista (6 × 44 + avatar 44 caben en 360) */
  html.ui2 .tn-row1 { height: 52px; padding: 0 var(--s-8); gap: 4px; }
  /* Marca: solo el logo, con dedo de 44 px (el nombre no cabe) */
  html.ui2 .tn-brand { flex: none; width: 44px; height: 44px; justify-content: center; gap: 0; }
  html.ui2 .tn-brand b { display: none; }
  html.ui2 .tn-areas { flex: 1; min-width: 0; gap: 0; justify-content: space-between; }
  html.ui2 .tn-area { flex: 1 1 0; min-width: 44px; max-width: 56px; height: 44px; padding: 0; justify-content: center; }
  html.ui2 .tn-area .txt, html.ui2 .tn-area .n { display: none; }
  html.ui2 .tn-area .ico { width: 20px; height: 20px; }
  html.ui2 .tn-right { gap: 0; margin-left: 4px; }
  html.ui2 .tn-search, html.ui2 .tn-right .tn-bell { display: none; }
  html.ui2 .tn-account > button { width: 44px; height: 44px; padding: 0; justify-content: center; }
  html.ui2 .tn-account > button > .ico { display: none; }
  /* Fila 2: pestañas con scroll + buscar · campana · closer · periodo */
  html.ui2 .tn-row2 { height: 48px; padding: 0 var(--s-8); gap: 4px; }
  html.ui2 .tn-sub { gap: 0; }
  html.ui2 .tn-sub::after { content: ""; flex: none; width: 8px; }
  html.ui2 .tn-tab { height: 44px; padding: 0 8px; margin-bottom: 0; border-bottom-width: 2px; }
  html.ui2 .tn-scope { gap: 4px; }
  html.ui2 .tn-m-search, html.ui2 .tn-m-bell { display: inline-flex; }
  html.ui2 .tn .period-picker-btn, html.ui2 .seller-focus-trigger { height: 44px; padding: 0 8px; font-size: var(--t-12); gap: 4px; }
  html.ui2 .tn .period-picker-btn .ico { display: none; }
  html.ui2 .seller-focus-trigger { min-width: 44px; justify-content: center; }
  html.ui2 .seller-focus-wrap { font-size: var(--t-12); }
  html.ui2 .seller-focus-trigger .sf-triglabel { max-width: 64px; }
  html.ui2 .btn { height: 44px; }
  html.ui2 .btn.sm { height: 44px; font-size: var(--t-14); }
  html.ui2 .seg2 button { height: 44px; font-size: var(--t-14); }
  html.ui2 .tn-menu { position: fixed; left: var(--s-12); right: var(--s-12); top: 56px; min-width: 0; }
  html.ui2 .tn-menu .item { height: 44px; }
  html.ui2 .foot-link, html.ui2 .foot-social { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--t-14); line-height: 20px; }
  html.ui2 .foot-theme-btn, html.ui2 .foot-top-btn { width: 44px; height: 44px; }
}
/* Con seis áreas (admin) el logo solo cabe desde 380 px: 6 × 44 + logo 44 + cuenta 44 + huecos. Por
   debajo (iPhone SE, Android de 360) se quita para no montar las áreas sobre la cuenta. */
@media (max-width: 380px) {
  html.ui2 .tn-row1:has(.tn-areas > .tn-area:nth-child(6)) .tn-brand { display: none; }
}
/* Controles de una línea con 20 px de línea (el verificador mide "botón partido" como alto > 2,2 líneas) */
html.ui2 .btn, html.ui2 .tn-tab, html.ui2 .tn-area, html.ui2 .tn-bell, html.ui2 .tn-account > button, html.ui2 .seller-focus-trigger, html.ui2 .tn .period-picker-btn, html.ui2 .seg2 button, html.ui2 .tn-menu .item { line-height: 20px; }

/* ── Dinero › Conciliación con Shopify (pantalla nueva, 26-oct) ── */
html.ui2 .cc { gap: var(--s-16); }
html.ui2 .cc-head { display: flex; align-items: center; gap: var(--s-12); flex-wrap: wrap; }
html.ui2 .cc-head h2 { margin: 0; font-size: var(--t-20); font-weight: 700; }
html.ui2 .cc-head .der { margin-left: auto; display: flex; gap: var(--s-8); }
html.ui2 .cc-resumen { display: flex; gap: var(--s-8); flex-wrap: wrap; }
html.ui2 .chip2 { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--s-12); border-radius: 1000px; font-size: var(--t-12); font-weight: 600; background: var(--surface); color: var(--muted); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); white-space: nowrap; }
html.ui2 .chip2.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn-ink); box-shadow: none; }
html.ui2 .chip2.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok-ink); box-shadow: none; }
html.ui2 .chip2.info { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info-ink); box-shadow: none; }
html.ui2 .cc-buscar { display: grid; gap: var(--s-8); }
html.ui2 .cc-buscar-fila { display: flex; align-items: center; gap: var(--s-12); flex-wrap: wrap; }
html.ui2 .cc-input, html.ui2 .input2 { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--r-8); background: var(--surface); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); flex: 1; min-width: 260px; color: var(--faint); }
html.ui2 .cc-input:focus-within, html.ui2 .input2:focus-within { box-shadow: var(--ring); }
html.ui2 .cc-input input, html.ui2 .input2 input { flex: 1; min-width: 0; padding: 0; margin: 0; border: 0; background: transparent; font: inherit; font-size: var(--t-14); color: var(--text); outline: none; -webkit-appearance: none; appearance: none; }
html.ui2 .cc-input input::-webkit-search-cancel-button, html.ui2 .input2 input::-webkit-search-cancel-button { -webkit-appearance: none; }
html.ui2 .cc-para { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--muted); }
html.ui2 .cc-resultados { display: grid; gap: 6px; }
html.ui2 .cc-res { display: flex; align-items: center; gap: var(--s-12); flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-8); background: var(--surface); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); }
html.ui2 .cc-res-main { flex: 1; min-width: 200px; font-size: var(--t-14); }
html.ui2 .cc-res-main small { display: block; color: var(--faint); font-size: var(--t-12); }
html.ui2 .cc-res-acc { display: flex; gap: 6px; align-items: center; flex: none; }
html.ui2 .cc-res-picker { width: 100%; }
html.ui2 .cc-bloque { background: var(--surface); border-radius: var(--r-12); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); overflow: hidden; }
html.ui2 .cc-bloque > header { display: flex; align-items: center; gap: var(--s-12); padding: 12px 16px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
html.ui2 .cc-bloque > header h3 { margin: 0; font-size: var(--t-16); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
html.ui2 .cc-bloque > header p { margin: 0; color: var(--muted); font-size: var(--t-12); flex-basis: 100%; }
html.ui2 .cc-n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 1000px; font-size: var(--t-12); font-weight: 700; }
html.ui2 .cc-n.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn-ink); }
html.ui2 .cc-n.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok-ink); padding: 0; width: 24px; }
html.ui2 .cc-n.ok .ico { width: 14px; height: 14px; }
html.ui2 .cc-n.info { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info-ink); }
html.ui2 .cc-scroll { overflow-x: auto; }
html.ui2 .cc-tabla { width: 100%; border-collapse: collapse; }
html.ui2 .cc-tabla th { text-align: left; font-size: var(--t-12); font-weight: 600; color: var(--muted); padding: 8px 16px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
html.ui2 .cc-tabla th.num, html.ui2 .cc-tabla td.num { text-align: right; }
html.ui2 .cc-tabla td { padding: 10px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; font-size: var(--t-14); }
html.ui2 .cc-tabla td small { display: block; color: var(--faint); font-size: var(--t-12); font-weight: 400; }
html.ui2 .cc-tabla td small.cc-rojo { color: var(--danger-ink); }
html.ui2 .cc-tabla tr:last-child td { border-bottom: 0; }
html.ui2 .cc-tabla tbody tr:hover td { background: var(--surface-2); }
html.ui2 .cc-tabla td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
html.ui2 .cc-lead { display: flex; align-items: center; gap: 10px; min-width: 0; }
html.ui2 .cc-lead small { display: block; color: var(--faint); font-size: var(--t-12); }
html.ui2 .cc-nombre { font-weight: 600; }
html.ui2 .cc-link { border: 0; background: transparent; padding: 0; font: inherit; font-weight: 600; line-height: 20px; color: var(--text); cursor: pointer; text-align: left; }
html.ui2 .cc-link:hover { color: var(--accent-ink); }
html.ui2 .cc-cands { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
html.ui2 .cc-cand { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px 0 10px; border-radius: var(--r-8); background: var(--surface-3); font-size: var(--t-12); white-space: nowrap; }
html.ui2 .cc-cand b { font-weight: 700; }
html.ui2 .cc-cand .btn.sm { height: 24px; padding: 0 8px; font-size: var(--t-12); }
html.ui2 .cc-sin { color: var(--faint); font-size: var(--t-12); }
html.ui2 .cc-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 1000px; font-size: var(--t-12); font-weight: 600; background: var(--surface-3); color: var(--muted); white-space: nowrap; }
html.ui2 .cc-tag.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok-ink); }
html.ui2 .cc-tag.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn-ink); }
html.ui2 .cc-tag.danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger-ink); }
html.ui2 .cc-tag.info { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info-ink); }
html.ui2 .cc-orden { display: inline-flex; gap: 4px; align-items: center; height: 22px; padding: 0 8px; margin: 2px 4px 2px 0; border-radius: 1000px; background: var(--surface-3); font-size: var(--t-12); white-space: nowrap; }
html.ui2 .cc-orden b { font-weight: 600; }
html.ui2 .cc-orden em { font-style: normal; color: var(--danger-ink); }
html.ui2 .cc-acc { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
html.ui2 .cc-diff.pos { color: var(--ok-ink); font-weight: 700; }
html.ui2 .cc-diff.neg { color: var(--danger-ink); font-weight: 700; }
html.ui2 .cc-vacio { margin: 0; padding: 20px 16px; color: var(--faint); font-size: var(--t-14); }
html.ui2 .cc-nota { margin: 0; padding: 10px 16px; color: var(--faint); font-size: var(--t-12); border-top: 1px solid var(--line-soft); }
/* Chip de orden con contexto (producto, fecha, nombre en Shopify, motivo del enlace). Adrian 2026-10-27. */
html.ui2 .cc-orden2 { display: inline-flex; flex-direction: column; gap: 2px; padding: 6px 10px; margin: 2px 6px 4px 0; border-radius: 10px; background: var(--surface-3); font-size: var(--t-12); line-height: 1.3; max-width: 100%; vertical-align: top; }
html.ui2 .cc-orden2 b { font-weight: 600; }
html.ui2 .cc-orden2 i { font-style: normal; color: var(--warn-ink); font-weight: 600; }
html.ui2 .cc-orden2 em { font-style: normal; color: var(--danger-ink); }
html.ui2 .cc-orden2 small { display: block; color: var(--faint); font-size: var(--t-12); white-space: normal; }
html.ui2 .cc-orden2.fuera { background: color-mix(in srgb, var(--warn) 12%, var(--surface-3)); }
html.ui2 .cc-tabla td .cc-suma { display: block; margin-top: 2px; color: var(--faint); font-size: var(--t-12); }
html.ui2 .btn.cc-armado, html.ui2 .ghost-btn.cc-armado, html.ui2 .glass-btn.cc-armado { background: var(--warn); color: var(--warn-ink); border-color: transparent; }
/* Comercial (Adrian 2026-10-27, método de apps): productos como pastillas de una línea (nombre + precio,
   44 px, 2 columnas en escritorio y 1 en móvil), "Cómo paga" como segmentado de dos + interruptores de una
   línea. Sin controles nativos, sin bordes de 1 px: la misma receta de superficie del resto de la ficha. */
html.ui2 .lead-drawer .prod-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
html.ui2 .lead-drawer .prod-pill { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-12); background: var(--surface); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); color: var(--text); font: inherit; font-size: var(--t-14); font-weight: 600; text-align: left; cursor: pointer; transition: box-shadow 150ms ease, background 150ms ease; }
html.ui2 .lead-drawer .prod-pill:hover { box-shadow: var(--shadow-soft), 0 0 0 1px var(--line); }
html.ui2 .lead-drawer .prod-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.ui2 .lead-drawer .prod-pill[hidden] { display: none; }
html.ui2 .lead-drawer .prod-pill:disabled { cursor: default; opacity: 0.7; }
html.ui2 .lead-drawer .prod-pill .prod-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui2 .lead-drawer .prod-pill .prod-price { flex: none; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
html.ui2 .lead-drawer .prod-pill.active { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); color: var(--accent-ink); }
html.ui2 .lead-drawer .prod-pill.active .prod-name::before { content: "✓ "; }
html.ui2 .lead-drawer .prod-pill.active .prod-price { color: var(--accent-ink); }
/* "?" de contexto del plan: va junto al nombre y empuja el precio a la derecha. El popup lo pinta
   bindProdInfoPopover (fixed, sobre el modal). Vale en la ficha y en el selector de upgrade. */
.prod-pill .prod-info { flex: none; margin-right: auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--line-soft); color: var(--muted); font-size: 13px; font-weight: 800; line-height: 1; cursor: help; user-select: none; }
.prod-pill .prod-info:hover { background: var(--accent-soft); color: var(--accent-ink); }
.prod-pill .prod-info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.prod-pill.active .prod-info { background: var(--surface); color: var(--accent-ink); }
.prod-pop { position: fixed; z-index: 100000; max-width: 300px; padding: 12px 14px; border-radius: var(--r-12); background: var(--surface); color: var(--text); box-shadow: 0 10px 34px rgba(0,0,0,0.22), 0 0 0 1px var(--line); font-size: var(--t-13, 13px); line-height: 1.45; display: grid; gap: 4px; }
.prod-pop strong { font-size: var(--t-14); font-weight: 700; }
.prod-pop span { color: var(--muted); }
/* Selector "¿a qué plan sube?" (modal de upgrade): las pastillas viven fuera de .lead-drawer, así que
   el estilo de pastilla se repite aquí, scoped al modal. Mismo alto/estética que en la ficha. */
/* Una sola columna: en el modal angosto, dos columnas truncaban los nombres ("Cortex Signa…"), y
   los dos planes de $500 quedaban idénticos. El nombre completo es justo lo que hay que leer para elegir. */
.prod-list-modal { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 6px 0 10px; max-height: 46vh; overflow-y: auto; }
.prod-list-modal .prod-pill { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-12); background: var(--surface); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); color: var(--text); font: inherit; font-size: var(--t-14); font-weight: 600; text-align: left; cursor: pointer; transition: box-shadow 150ms ease, background 150ms ease; }
.prod-list-modal .prod-pill:hover { box-shadow: var(--shadow-soft), 0 0 0 1px var(--accent); }
.prod-list-modal .prod-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.prod-list-modal .prod-pill .prod-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-list-modal .prod-pill .prod-price { flex: none; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .prod-list-modal { grid-template-columns: 1fr; } }
html.ui2 .lead-drawer .prod-pill.prod-more { justify-content: center; background: transparent; box-shadow: 0 0 0 1px var(--line-soft); color: var(--muted); }

/* ── Card de Seguimiento en 2 pasos (fu2): claro para el closer ── */
html.ui2 .lead-drawer .fu2 .fu2-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
html.ui2 .lead-drawer .fu2 .fu2-chip { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 1000px; font-size: var(--t-12); font-weight: 700; background: var(--surface-3); color: var(--muted); }
html.ui2 .lead-drawer .fu2 .fu2-chip.ok { background: color-mix(in srgb, var(--green, #22c55e) 16%, var(--surface)); color: var(--green, #16a34a); }
html.ui2 .lead-drawer .fu2 .fu2-chip.warn { background: var(--accent-soft); color: var(--accent-ink); }
html.ui2 .lead-drawer .fu2 .fu2-step { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; font-size: var(--t-14); font-weight: 700; color: var(--text); }
html.ui2 .lead-drawer .fu2 .fu2-step:first-of-type { margin-top: 10px; }
html.ui2 .lead-drawer .fu2 .fu2-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 1000px; background: var(--accent); color: #fff; font-size: var(--t-12); font-weight: 800; }
html.ui2 .lead-drawer .fu2 .fu-note-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
/* Nota: una línea mientras está vacía; crece al escribir o al tocar un resultado (compacta 2026-10-29) */
html.ui2 .lead-drawer .fu2 .fu-note-area { width: 100%; min-height: 44px; }
html.ui2 .lead-drawer .fu2 .fu-note-area:focus, html.ui2 .lead-drawer .fu2 .fu-note-area.has-text { min-height: 72px; }
/* Pregunta 2 con el chip de estado de la agenda al lado */
html.ui2 .lead-drawer .fu2 .fu2-step-cuando .fu2-pregunta { flex: 1 1 0; min-width: 0; }
html.ui2 .lead-drawer .fu2 .fu2-step-cuando .fu2-chip { margin-left: auto; }
/* Atajos de fecha en una fila; el elegido queda marcado */
html.ui2 .lead-drawer .fu2 .fu2-presets { display: flex; flex-wrap: wrap; gap: 8px; }
html.ui2 .lead-drawer .fu2 .fu2-presets .fu-preset { height: 44px; width: auto; padding: 0 16px; justify-content: center; font-size: var(--t-14); white-space: nowrap; }
html.ui2 .lead-drawer .fu2 .fu2-presets .fu-preset.active { background: var(--accent-soft); color: var(--accent-ink); }
/* Fecha · canal · quitar, en una línea, solo cuando hay fecha */
html.ui2 .lead-drawer .fu2 .fu2-when-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
html.ui2 .lead-drawer .fu2 .fu2-when-extra[hidden] { display: none; }
html.ui2 .lead-drawer .fu2 .fu2-when-extra > .dt2, html.ui2 .lead-drawer .fu2 .fu2-when-extra input[type="datetime-local"] { flex: 1 1 136px; min-width: 0; }
html.ui2 .lead-drawer .fu2 .fu2-via { display: inline-flex; align-items: center; gap: 6px; flex: none; margin: 0; font-size: var(--t-12); color: var(--muted); }
html.ui2 .lead-drawer .fu2 .fu2-via select { width: auto; min-width: 128px; }
html.ui2 .lead-drawer .fu2 .fu2-quitar { flex: none; }
/* Recordarle y Ya le escribí: solo con agenda pendiente, en una fila de dos */
html.ui2 .lead-drawer .fu2 .fu2-done-row { margin-top: 12px; gap: 8px; flex-wrap: nowrap; }
html.ui2 .lead-drawer .fu2 .fu2-done-row > .btn { flex: 1 1 0; min-width: 0; justify-content: center; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
@media (max-width: 768px) {
  /* El título repite la pestaña "Seguimiento" que ya está marcada */
  html.ui2 .lead-drawer .fu2.fu2-ficha .fu2-head { display: none; }
  /* Resultados y atajos: una fila con scroll lateral */
  html.ui2 .lead-drawer .fu2 .fu-note-chips, html.ui2 .lead-drawer .fu2 .fu2-presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; }
  html.ui2 .lead-drawer .fu2 .fu-note-chips::-webkit-scrollbar, html.ui2 .lead-drawer .fu2 .fu2-presets::-webkit-scrollbar { display: none; }
  html.ui2 .lead-drawer .fu2 .fu-note-chip, html.ui2 .lead-drawer .fu2 .fu2-presets .fu-preset { flex: 0 0 auto; white-space: nowrap; }
  html.ui2 .lead-drawer .fu2 .fu2-solo-ancho { display: none; }
  /* Fecha · × · canal caben en una línea de teléfono: sin "por" ni iconos en la fecha, canal a su ancho, × de 44 */
  html.ui2 .lead-drawer .fu2 .fu2-via-txt, html.ui2 .lead-drawer .fu2 .fu2-when-extra .dt2-btn > .ico { display: none; }
  html.ui2 .lead-drawer .fu2 .fu2-via select, html.ui2 .lead-drawer .fu2 .fu2-via .sel2, html.ui2 .lead-drawer .fu2 .fu2-via .sel2-btn { min-width: 0; width: auto; }
  html.ui2 .lead-drawer .fu2 .fu2-quitar { width: 44px; height: 44px; padding: 0; justify-content: center; }
}
/* Resumen de acceso (pestaña Accesos): qué se dio solo tras la compra y qué falta. */
html.ui2 .lead-drawer .acceso-resumen .acceso-lista { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
html.ui2 .lead-drawer .acceso-resumen .acceso-lista li { padding: 10px 12px; border-radius: var(--r-8); background: var(--surface-2, var(--surface)); box-shadow: inset 0 0 0 1px var(--line-soft); font-size: var(--t-13, 13px); line-height: 1.4; color: var(--text); }
html.ui2 .lead-drawer .acceso-resumen .acceso-lista li b { font-weight: 700; }
html.ui2 .lead-drawer .pago-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--r-12); background: var(--surface-3); }
html.ui2 .lead-drawer .pago-seg-btn { height: 40px; border: 0; border-radius: var(--r-8); background: transparent; color: var(--muted); font: inherit; font-size: var(--t-14); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 150ms ease, color 150ms ease; }
html.ui2 .lead-drawer .pago-seg-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); }
html.ui2 .lead-drawer .pago-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
html.ui2 .lead-drawer .pago-hint { margin: 6px 0 0; color: var(--faint); font-size: var(--t-12); }
html.ui2 .lead-drawer .pago-extras { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
html.ui2 .lead-drawer .pago-chip { height: 36px; padding: 0 12px; border: 0; border-radius: 1000px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-soft); color: var(--muted); font: inherit; font-size: var(--t-12); font-weight: 600; white-space: nowrap; cursor: pointer; transition: box-shadow 150ms ease, background 150ms ease; }
html.ui2 .lead-drawer .pago-chip.active { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); color: var(--accent-ink); }
html.ui2 .lead-drawer .pago-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.ui2 .lead-drawer .partes-block { margin-bottom: 12px; }
html.ui2 .lead-drawer .hold-card .cc-acc { justify-content: flex-start; }
html.ui2 .lead-drawer .hold-card h3 .hold-badge { margin-left: 6px; vertical-align: middle; }
html.ui2 .lead-drawer .hold-canales { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--t-12); color: var(--muted); }
@media (max-width: 720px) {
  html.ui2 .lead-drawer .prod-list { grid-template-columns: 1fr; }
  html.ui2 .lead-drawer .pago-seg-btn { height: 44px; }
  html.ui2 .lead-drawer .pago-chip { height: 44px; flex: 1 1 calc(50% - 4px); font-size: var(--t-14); }
}
html.ui2 .cc-acc .cc-inline { height: auto; min-height: 22px; white-space: normal; text-align: left; max-width: 320px; }
html.ui2 .cc-picker { display: grid; gap: 6px; min-width: 260px; }
html.ui2 .cc-picker .cc-input { height: 36px; min-width: 0; }
html.ui2 .cc-picker-res { display: grid; gap: 2px; }
html.ui2 .cc-picker-res button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 4px 8px; border: 0; border-radius: var(--r-8); background: transparent; font: inherit; font-size: var(--t-14); cursor: pointer; text-align: left; color: var(--text); }
html.ui2 .cc-picker-res button:hover { background: var(--surface-3); }
html.ui2 .cc-picker-res button .ico { margin-left: auto; color: var(--faint); }
html.ui2 .cc-picker-n { display: grid; min-width: 0; }
html.ui2 .cc-picker-n small { color: var(--faint); font-size: var(--t-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui2 .cc-picker .cc-vacio { padding: 8px; }
@media (max-width: 900px) {
  html.ui2 .cc-head .der { width: 100%; margin: 0; }
  html.ui2 .cc-head .der .btn { flex: 1; }
  html.ui2 .cc-tabla thead { display: none; }
  html.ui2 .cc-tabla, html.ui2 .cc-tabla tbody, html.ui2 .cc-tabla tr, html.ui2 .cc-tabla td { display: block; }
  html.ui2 .cc-tabla tr { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
  html.ui2 .cc-tabla tr:last-child { border-bottom: 0; }
  html.ui2 .cc-tabla td { padding: 4px 16px; border: 0; text-align: left; }
  html.ui2 .cc-tabla td.num { text-align: left; }
  html.ui2 .cc-tabla tbody tr:hover td { background: transparent; }
  html.ui2 .cc-tabla td[data-l]::before { content: attr(data-l); display: block; font-size: var(--t-12); color: var(--faint); }
  html.ui2 .cc-acc { justify-content: flex-start; padding-top: 4px; }
  html.ui2 .cc-cand { height: auto; padding: 6px 6px 6px 10px; flex-wrap: wrap; white-space: normal; }
  html.ui2 .cc-cand .btn.sm { height: 44px; font-size: var(--t-14); }
  html.ui2 .cc-link { min-height: 44px; display: inline-flex; align-items: center; }
  html.ui2 .cc-picker-res button { min-height: 44px; }
  html.ui2 .cc-input, html.ui2 .input2 { height: 44px; }
  html.ui2 .cc-res-acc { width: 100%; justify-content: flex-start; }
}


/* ── Lista: Pagado (Shopify) y Verificación (sustituyen al Score) ── */
html.ui2 .lead-data-table .lt-paid { color: var(--ok-ink); font-weight: 700; white-space: nowrap; }
html.ui2 .lead-data-table .lt-paid-n { display: block; color: var(--faint); font-size: var(--t-12); font-weight: 400; }
html.ui2 .lead-data-table .lt-paid-none { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 1000px; background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn-ink); font-size: var(--t-12); font-weight: 600; white-space: nowrap; }
html.ui2 .lead-data-table .lt-verify-td .sv-tag { white-space: nowrap; }
/* El chip "Pendiente" legacy daba 4,4:1 sobre el fondo de la tabla; con --muted pasa de 4,5:1 en ambos temas */
html.ui2 .tag.sv-pend { color: var(--muted); }


/* ── Lista / Ganancias: cabecera de página, filtros, barra de selección y tabla (receta Twenty) ── */
html.ui2 .pg-head { display: flex; align-items: center; gap: var(--s-12); flex-wrap: wrap; }
html.ui2 .pg-head h2 { margin: 0; font-size: var(--t-20); font-weight: 700; }
html.ui2 .pg-head .der { margin-left: auto; display: flex; gap: var(--s-8); }
html.ui2 .pg-filtros { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
html.ui2 .pg-filtros .cuenta { margin-left: auto; color: var(--faint); font-size: var(--t-12); white-space: nowrap; }
html.ui2 .pg-buscar { flex: 1 1 320px; max-width: 520px; }
html.ui2 .bulk-bar { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; padding: 8px 12px; margin: 0 0 var(--s-8); border-radius: var(--r-12); background: var(--accent-soft); border: 0; }
html.ui2 .bulk-bar .bulk-n { color: var(--text); font-size: var(--t-14); margin-right: 4px; }
/* El display:flex de la barra pisaba el atributo hidden (bug heredado): sin selección no se pinta */
html.ui2 .bulk-bar[hidden] { display: none; }
/* Barra de lote del TABLERO (Adrian 2026-10-28): mover varias tarjetas de columna sin entrar a cada
   ficha. En escritorio va arriba del kanban; en móvil se ancla abajo, porque ahí el closer marca
   tarjetas bajando por la columna y tener que volver al tope a confirmar rompía el flujo. */
html.ui2 .bulk-bar-kanban .bulk-move-label { color: var(--muted); font-size: var(--t-12); }
html.ui2 .bulk-bar-kanban .bulk-move-opts { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
/* Móvil y tablet: dos filas, arriba el contador con Foco/Limpiar y abajo las etapas en una tira
   que se desliza. En una sola fila los botones se pisaban entre ellos (y en tablet la barra se
   partía en tres líneas desordenadas) y "Mover a" quedaba fuera de vista, que es justo la acción
   que se viene a hacer. */
@media (max-width: 1024px) {
  html.ui2 .bulk-bar-kanban {
    display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center;
    padding: 8px 10px;
  }
  html.ui2 .bulk-bar-kanban .bulk-n { grid-row: 1; grid-column: 1; margin: 0; white-space: nowrap; }
  html.ui2 .bulk-bar-kanban [data-bulk-focus] { grid-row: 1; grid-column: 2; }
  html.ui2 .bulk-bar-kanban [data-bulk-clear] { grid-row: 1; grid-column: 3; }
  html.ui2 .bulk-bar-kanban .bulk-move-label { display: none; }
  html.ui2 .bulk-bar-kanban .bulk-move-opts {
    grid-row: 2; grid-column: 1 / -1;
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px; scrollbar-width: none;
  }
  html.ui2 .bulk-bar-kanban .bulk-move-opts::-webkit-scrollbar { display: none; }
  /* Sin esto los hijos se comprimen por debajo de su ancho y se solapan. */
  html.ui2 .bulk-bar-kanban .btn { flex: 0 0 auto; white-space: nowrap; }
}
/* Solo en teléfono se ancla abajo: ahí el closer marca tarjetas bajando por la columna y volver
   al tope a confirmar rompía el flujo. En tablet hay sitio de sobra y flotando estorbaría. */
@media (max-width: 768px) {
  html.ui2 .bulk-bar-kanban {
    position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 40; margin: 0;
    background: var(--surface); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft);
  }
  /* La barra flota sobre el tablero: sin este hueco tapa las últimas tarjetas de la columna,
     justo las que el closer acaba de marcar. Solo cuando la barra está visible. */
  html.ui2 .kanban-wrap:has(.bulk-bar-kanban:not([hidden])) .kanban { padding-bottom: 104px; }
  /* El "+" flotante se pintaba encima de la barra y tapaba la tira de etapas, justo lo que se viene
     a pulsar. Mientras hay tarjetas marcadas no hace falta crear un lead. */
  html.ui2:has(.bulk-bar-kanban:not([hidden])) .fab-wrap { display: none; }
}
/* Tira de etapas del tablero (Adrian 2026-10-29): solo en teléfono, fija bajo la cabecera. Marca la
   columna visible del carrusel y lleva a otra de un toque. --tn-alto lo pone app-v2.js con la altura
   real de la cabecera. */
html.ui2 .kanban-tira { display: none; }
@media (max-width: 768px) {
  html.ui2 .kanban-tira {
    display: flex; gap: var(--s-4); overflow-x: auto; scrollbar-width: none;
    position: sticky; top: var(--tn-alto, 0px); z-index: 20;
    margin: 0 0 var(--s-8); padding: var(--s-4);
    border-radius: var(--r-12); background: var(--surface-2); box-shadow: 0 0 0 1px var(--line-soft);
  }
  html.ui2 .kanban-tira::-webkit-scrollbar { display: none; }
  html.ui2 .kt-etapa {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--s-8);
    min-height: 44px; padding: 0 var(--s-12); border: 0; border-radius: var(--r-8);
    background: transparent; color: var(--muted); font: inherit; font-size: var(--t-14); font-weight: 600;
    white-space: nowrap; cursor: pointer;
  }
  html.ui2 .kt-etapa::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 1000px; background: var(--etapa); opacity: .4; }
  html.ui2 .kt-etapa .kt-n { font-size: var(--t-12); color: var(--faint); font-variant-numeric: tabular-nums; }
  html.ui2 .kt-etapa.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); }
  html.ui2 .kt-etapa.on::before { opacity: 1; }
  html.ui2 .kt-etapa.on .kt-n { color: var(--text); }
  html.ui2 .kt-etapa:focus-visible { outline: none; box-shadow: var(--ring); }
}
/* ══ Tarjeta del tablero: arreglos de la auditoría 2026-10-29 ══
   Solo lo que la auditoría pidió; el resto de la tarjeta sigue en styles.css. */
/* El nombre pasa a dos líneas antes que cortarse: en la columna de 196 px se cortaban 10 de 48. */
html.ui2 .lead-card .lead-card-head h4 {
  white-space: normal; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
/* Pendiente de pago en una línea, sin mayúsculas y a la escala del sistema. */
html.ui2 .lead-card .lc-pending-banner { gap: var(--s-8); padding: 8px 12px; border-radius: var(--r-8); }
html.ui2 .lead-card .lc-pending-ico { font-size: var(--t-14); }
html.ui2 .lead-card .lc-pending-body { font-size: var(--t-12); line-height: 1.4; }
html.ui2 .lead-card .lc-pending-title { font-size: var(--t-12); font-weight: 700; letter-spacing: 0; text-transform: none; }
html.ui2 .lead-card .lc-pending-sub { margin: 0; font-size: var(--t-12); opacity: 1; }
/* Racha en tema claro: los tonos ámbar de mitad de la prueba quedaban en 2,8:1 sobre su fondo. Se
   oscurece el mismo tono, así el color sigue diciendo cuánto queda. En oscuro ya pasaba de 6:1. */
html.ui2[data-theme="light"] .lc-streak-badge .lc-streak-count { color: color-mix(in srgb, var(--sc) 70%, #000); }
html.ui2[data-theme="light"] .lc-streak-badge .lc-streak-days,
html.ui2[data-theme="light"] .lc-streak-badge .lc-streak-total { color: color-mix(in srgb, var(--sc) 60%, #000); opacity: 1; }
/* Pie con dedo: "Mover" (arrastrar la tarjeta no funciona con el dedo) y "Escribir" con el mismo peso
   y 44 px de diana. Antes WhatsApp ocupaba todo el ancho, en inglés y a 40 px de alto. */
html.ui2 .lc-mover { display: none; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  html.ui2 .lead-card .lc-footer { gap: var(--s-8); }
  html.ui2 .lead-card .lc-wa-pill { flex: 1 1 0; min-width: 0; min-height: 44px; border-radius: var(--r-8); font-size: var(--t-14); }
}
@media (hover: none) and (pointer: coarse) {
  html.ui2 .lead-card .lc-mover {
    display: inline-flex; flex: 1 1 0; min-width: 0; min-height: 44px; align-items: center; justify-content: center; gap: var(--s-8);
    padding: 0 var(--s-12); border: 0; border-radius: var(--r-8); background: var(--surface-2); box-shadow: 0 0 0 1px var(--line-soft);
    color: var(--text); font: inherit; font-size: var(--t-14); font-weight: 600; cursor: pointer;
  }
  html.ui2 .lead-card .lc-mover .ico { color: var(--faint); }
  html.ui2 .lead-card .lc-mover:focus-visible { outline: none; box-shadow: var(--ring); }
}
/* Escala del tablero (fila 9): el tablero tenía 7 tamaños de letra en teléfono y 9 en escritorio, y 52
   textos a 10 px. Todo pasa a 12/14/16 y los espacios impares a pares. Es higiene: no cambia qué se
   ve ni dónde. Las líneas de 1 px son los bordes finos del sistema y se quedan. */
html.ui2 .kanban { font-size: var(--t-12); }
html.ui2 .kanban .stage-column { border-top-width: 4px; }
html.ui2 .kanban .stage-head { padding: 8px 12px; }
html.ui2 .kanban .stage-head h3 { font-size: var(--t-14); }
html.ui2 .kanban .stage-head .micro { font-size: var(--t-12); }
html.ui2 .kanban .stage-count { font-size: var(--t-12); padding: 0 6px; font-variant-numeric: tabular-nums; }
html.ui2 .kanban .stage-body { padding: 8px; gap: 8px; }
html.ui2 .kanban .lead-card .lc-card-body { padding-left: 8px; padding-right: 8px; padding-bottom: 8px; }
html.ui2 .kanban .lead-card-head h4 { margin-bottom: 4px; }
html.ui2 .kanban .lead-tags { margin-top: 4px; gap: 4px; }
html.ui2 .kanban .lead-score { font-size: var(--t-12); gap: 4px; border-radius: 6px; }
html.ui2 .kanban .sv-tag { gap: 4px; }
html.ui2 .kanban .lc-footer { margin-top: 8px; }
html.ui2 .kanban .lc-wa-pill { padding-top: 4px; padding-bottom: 4px; gap: 4px; border-radius: 6px; }
html.ui2 .kanban .lead-card > .lc-streak-badge { padding: 8px 12px; gap: 8px; border-radius: 0 0 12px 12px; }
html.ui2 .kanban .lc-streak-main { gap: 4px; }
html.ui2 .kanban .lc-streak-count { font-size: var(--t-16); }
html.ui2 .kanban .lc-streak-days, html.ui2 .kanban .lc-streak-total { font-size: var(--t-12); }
html.ui2 .kanban .lead-card > .lc-pending-banner { border-left-width: 4px; }
html.ui2 .kanban .lc-felicidades-btn { gap: 2px; padding-top: 8px; padding-bottom: 8px; }
html.ui2 .kanban .lc-fel-top { font-size: var(--t-12); }
html.ui2 .closer-focus-strip .cfs-title, html.ui2 .closer-focus-strip .cfs-title-short { font-size: var(--t-14); }
html.ui2 .closer-focus-chip .cfc-n { font-size: var(--t-16); }
html.ui2 .closer-focus-chip .cfc-l { font-size: var(--t-14); }
html.ui2 .quick-links-panel .quick-links-title, html.ui2 .quick-link-info strong { font-size: var(--t-14); }
html.ui2 .quick-links-panel .muted { font-size: var(--t-12); }
html.ui2 .pipeline-toolbar > .quick-links-panel { padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 768px) {
  /* Los filtros de "Hoy" son botones: 44 px de dedo como el resto. */
  html.ui2 .closer-focus-strip { padding: 4px 8px; gap: 8px; }
  html.ui2 .closer-focus-chip { min-height: 44px; padding: 0 12px; }
}
/* Fila 5: en teléfono "Links y códigos rápidos" ocupaba una fila entera antes del tablero. Pasa a un
   icono al principio de la fila de "Hoy" y, abierto, se despliega a todo el ancho. Solo cuando la barra
   trae únicamente los links (closer); la del admin, con más controles, no cambia. */
@media (max-width: 768px) {
  html.ui2 .content-view > .grid:has(> .pipeline-filters > .pipeline-toolbar:only-child > .quick-links-panel:only-child:not(.ql-con-meta)) {
    display: flex; flex-wrap: wrap; align-items: stretch;
  }
  html.ui2 .content-view > .grid:has(> .pipeline-filters > .pipeline-toolbar:only-child > .quick-links-panel:only-child:not(.ql-con-meta)) > * {
    flex: 1 1 100%; min-width: 0;
  }
  html.ui2 .content-view > .grid > .pipeline-filters:has(> .pipeline-toolbar:only-child > .quick-links-panel:only-child:not([open]):not(.ql-con-meta)) {
    flex: 0 0 auto; margin: 0; padding: 0;
  }
  html.ui2 .content-view > .grid > .pipeline-filters:has(> .pipeline-toolbar:only-child > .quick-links-panel:only-child:not([open]):not(.ql-con-meta)) + .closer-focus-strip {
    flex: 1 1 0;
  }
  html.ui2 .pipeline-filters .pipeline-toolbar:only-child > .quick-links-panel:only-child:not([open]):not(.ql-con-meta) {
    width: 52px; height: 100%; min-height: 52px; padding: 0;
  }
  html.ui2 .pipeline-filters .pipeline-toolbar:only-child > .quick-links-panel:only-child:not([open]):not(.ql-con-meta) > summary {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 52px; padding: 0;
  }
  /* El texto se oculta a la vista pero lo sigue leyendo el lector de pantalla. */
  html.ui2 .pipeline-filters .pipeline-toolbar:only-child > .quick-links-panel:only-child:not([open]):not(.ql-con-meta) .ql-txt {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
html.ui2 .lead-table-wrap, html.ui2 .lead-table-wrap.spotlight-table, html.ui2 .lead-table-wrap.leads-list-premium { background: transparent; border: 0; box-shadow: none; padding: 0; }
html.ui2 table.lead-data-table { width: 100%; font-size: var(--t-14); background: var(--surface); border-radius: var(--r-12); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); overflow: hidden; border-collapse: separate; border-spacing: 0; }
html.ui2 .lead-data-table thead { background: var(--surface-2); }
html.ui2 .lead-data-table thead tr { border-bottom: 0; }
html.ui2 .lead-data-table thead th { font-size: var(--t-12); font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
html.ui2 .lead-data-table .sortable-th.sorted { color: var(--accent-ink); }
html.ui2 .lead-data-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
html.ui2 .lead-data-table tbody tr:last-child td { border-bottom: 0; }
html.ui2 .lead-data-table tbody tr:nth-child(even) td { background: transparent; }
html.ui2 .lead-data-table tbody tr:hover td, html.ui2 .lead-data-table tbody tr:nth-child(even):hover td { background: var(--surface-2); }
html.ui2 .lead-data-table tfoot td { padding: 10px 12px; color: var(--muted); font-size: var(--t-12); background: var(--surface-2); border-top: 1px solid var(--line-soft); }
html.ui2 .lead-data-table .lt-sel-th, html.ui2 .lead-data-table .lt-sel-td { width: 44px; text-align: center; }
/* Checkbox propio: diana de 32 px con una caja de 18 px (44 px en móvil) */
html.ui2 .lead-data-table input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 32px; height: 32px; margin: -7px 0; padding: 0; border: 0; background: transparent; cursor: pointer; display: inline-grid; place-items: center; position: relative; vertical-align: middle; }
html.ui2 .lead-data-table input[type="checkbox"]::before { content: ""; width: 18px; height: 18px; border-radius: 4px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: background var(--dur) var(--ease); }
html.ui2 .lead-data-table input[type="checkbox"]:checked::before { background: var(--accent); box-shadow: none; }
html.ui2 .lead-data-table input[type="checkbox"]:checked::after { content: ""; position: absolute; width: 10px; height: 6px; border: 2px solid var(--on-gold); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
html.ui2 .lead-data-table input[type="checkbox"]:focus-visible { outline: none; }
html.ui2 .lead-data-table input[type="checkbox"]:focus-visible::before { box-shadow: var(--ring); }
html.ui2 .lt-count { color: var(--faint); font-size: var(--t-12); padding: 8px 0 0; margin: 0; }
html.ui2 .lt-wa-link { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; }
@media (max-width: 900px) {
  html.ui2 .pg-head .der { width: 100%; margin: 0; }
  html.ui2 .pg-head .der .btn { flex: 1; }
  html.ui2 .pg-buscar { flex-basis: 100%; max-width: none; }
  html.ui2 .pg-filtros .cuenta { display: none; }
  html.ui2 .bulk-bar .btn.sm { flex: 1 1 auto; }
  /* Tabla → tarjetas: quién · etapa y días · dinero. Fuente y Oferta quedan para la ficha. */
  html.ui2 .lead-table-wrap { overflow: visible; }
  html.ui2 table.lead-data-table, html.ui2 .lead-data-table tbody, html.ui2 .lead-data-table tbody tr, html.ui2 .lead-data-table tbody td { display: block; width: 100%; }
  html.ui2 .lead-data-table thead, html.ui2 .lead-data-table tfoot { display: none; }
  html.ui2 table.lead-data-table { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
  html.ui2 .lead-data-table tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 12px 12px 14px; margin: 0 0 var(--s-8); border: 0; border-radius: var(--r-12); background: var(--surface); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); }
  html.ui2 .lead-data-table tbody td, html.ui2 .lead-table-wrap td { padding: 0; border: 0; min-height: 0; text-align: left; justify-content: flex-start; background: transparent; }
  html.ui2 .lead-data-table tbody tr:hover td { background: transparent; }
  html.ui2 .lead-data-table tbody td::before, html.ui2 .lead-table-wrap td::before { content: none; }
  html.ui2 .lead-data-table .lt-client-td { grid-column: 1; grid-row: 1; min-width: 0; }
  html.ui2 .lead-data-table .lt-sel-td { grid-column: 2; grid-row: 1; width: auto; justify-self: end; }
  html.ui2 .lead-data-table .lt-closer-td { grid-column: 1 / -1; grid-row: 2; }
  html.ui2 .lead-data-table .lt-closer-td .lt-closer-cell { font-size: var(--t-12); color: var(--muted); }
  html.ui2 .lead-data-table .lt-stage-td { grid-column: 1; grid-row: 3; }
  html.ui2 .lead-data-table .lt-days-td { grid-column: 2; grid-row: 3; justify-self: end; }
  html.ui2 .lead-data-table .lt-source-td, html.ui2 .lead-data-table .lt-offer-td, html.ui2 .lead-data-table td.lt-empty { display: none; }
  html.ui2 .lead-data-table .lt-close-td, html.ui2 .lead-data-table .lt-paid-td, html.ui2 .lead-data-table .lt-verify-td { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--muted); }
  html.ui2 .lead-data-table .lt-close-td::before, html.ui2 .lead-data-table .lt-paid-td::before { content: attr(data-label); color: var(--faint); font-weight: 600; font-size: var(--t-12); text-transform: none; letter-spacing: 0; }
  html.ui2 .lead-data-table .lt-paid-td .lt-paid-n { display: inline; margin-left: 4px; }
  html.ui2 .lead-data-table input[type="checkbox"] { width: 44px; height: 44px; margin: -12px -10px -12px 0; }
  html.ui2 .lead-data-table input[type="checkbox"]::before { width: 20px; height: 20px; }
  html.ui2 .lt-wa-link { width: 44px; height: 44px; margin: -12px 0 -12px -8px; }
}


/* ── Ficha del lead (drawer) ── */
html.ui2 .btn.on { background: var(--accent-soft); color: var(--accent-ink); box-shadow: none; }
html.ui2 .lead-drawer { width: min(760px, 100vw); border: 0; background: var(--bg); box-shadow: var(--shadow-pop); }
html.ui2 .lead-drawer .lead-detail-form { padding: 0 var(--s-24) var(--s-24); display: grid; gap: var(--s-16); }
html.ui2 .lead-drawer .lead-drawer-head { position: sticky; top: 0; z-index: 6; display: flex; align-items: flex-start; gap: var(--s-12); margin: 0 calc(-1 * var(--s-24)); padding: var(--s-16) var(--s-24) var(--s-12); background: var(--bg); border-bottom: 1px solid var(--line-soft); }
html.ui2 .lead-drawer .lead-drawer-head > div:first-child { flex: 1; min-width: 0; }
html.ui2 .lead-drawer .lead-drawer-head p { margin: 4px 0 0; color: var(--muted); font-size: var(--t-12); }
html.ui2 .lead-drawer .lead-title-input { width: 100%; padding: 0; border: 0; background: transparent; font: inherit; font-size: var(--t-24); font-weight: 700; color: var(--text); line-height: 1.2; box-shadow: none; }
html.ui2 .lead-drawer .lead-title-input:focus { outline: none; box-shadow: 0 2px 0 var(--accent); }
html.ui2 .lead-drawer .ld-acciones { display: flex; gap: var(--s-4); flex: none; }
/* Tarjetas del sistema: sin borde de 1 px, radio 12, sombra suave + anillo */
html.ui2 .lead-drawer .panel, html.ui2 .lead-drawer .lead-info-panel, html.ui2 .lead-drawer .commercial-card, html.ui2 .lead-drawer .followup-card, html.ui2 .lead-drawer .fu-note-widget, html.ui2 .lead-drawer .notice, html.ui2 .lead-drawer .stage-picker, html.ui2 .lead-drawer .lead-origin-picker, html.ui2 .lead-drawer .lead-tech-details { border: 0; border-radius: var(--r-12); background: var(--surface); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); }
html.ui2 .lead-drawer .notice.red { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent); }
html.ui2 .lead-drawer .fu-note-widget { background: var(--surface-2); box-shadow: none; }
html.ui2 .lead-drawer h3, html.ui2 .lead-drawer .panel-header h3 { font-size: var(--t-16); font-weight: 700; letter-spacing: 0; }
html.ui2 .lead-drawer .commercial-card h3::after { display: none; }
html.ui2 .lead-drawer label, html.ui2 .lead-drawer .field-label { font-size: var(--t-12); font-weight: 600; color: var(--muted); letter-spacing: 0; text-transform: none; }
/* Controles del sistema dentro de la ficha */
html.ui2 .lead-drawer input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.lead-title-input), html.ui2 .lead-drawer textarea { width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-8); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: var(--t-14); color: var(--text); }
html.ui2 .lead-drawer textarea { min-height: 72px; padding: 10px 12px; resize: vertical; }
html.ui2 .lead-drawer input:focus, html.ui2 .lead-drawer textarea:focus { outline: none; box-shadow: var(--ring); }
html.ui2 .lead-drawer input[disabled], html.ui2 .lead-drawer textarea[disabled] { opacity: .6; }
html.ui2 .lead-drawer .sel2 { position: relative; display: block; }
html.ui2 .lead-drawer .sel2-nativo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
html.ui2 .lead-drawer .sel2-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 40px; padding: 0 10px 0 12px; border: 0; border-radius: var(--r-8); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: var(--t-14); line-height: 20px; color: var(--text); cursor: pointer; text-align: left; }
html.ui2 .lead-drawer .sel2-btn .sel2-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui2 .lead-drawer .sel2-btn .ico { color: var(--faint); }
html.ui2 .lead-drawer .sel2-btn:focus-visible { outline: none; box-shadow: var(--ring); }
html.ui2 .lead-drawer .sel2.open .sel2-btn { box-shadow: var(--ring); }
html.ui2 .lead-drawer .sel2.disabled .sel2-btn { opacity: .6; cursor: default; }
html.ui2 .lead-drawer .sel2-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 260px; overflow: auto; padding: 4px; display: grid; gap: 2px; background: var(--surface); border-radius: var(--r-12); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line-soft); }
html.ui2 .lead-drawer .sel2-op { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: var(--r-8); background: transparent; font: inherit; font-size: var(--t-14); line-height: 20px; color: var(--text); cursor: pointer; text-align: left; }
html.ui2 .lead-drawer .sel2-op:hover { background: var(--surface-3); }
html.ui2 .lead-drawer .sel2-op.on { background: var(--accent-soft); color: var(--accent-ink); }
html.ui2 .lead-drawer .sel2-op .ico { color: currentColor; }
/* Chips de la ficha (presets, notas rápidas, códigos, etapas): pastillas del sistema; se conservan sus emoji */
html.ui2 .lead-drawer .fu-preset, html.ui2 .lead-drawer .fu-note-chip, html.ui2 .lead-drawer .discount-code-chip { height: 32px; padding: 0 12px; border: 0; border-radius: 1000px; background: var(--surface-3); color: var(--text); font: inherit; font-size: var(--t-12); font-weight: 600; line-height: 20px; box-shadow: none; cursor: pointer; }
html.ui2 .lead-drawer .fu-preset:hover, html.ui2 .lead-drawer .fu-note-chip:hover, html.ui2 .lead-drawer .discount-code-chip:hover { background: var(--line-soft); }
html.ui2 .lead-drawer .discount-code-chip small { color: var(--accent-ink); font-size: var(--t-12); }
html.ui2 .lead-drawer .discount-code-chip.active, html.ui2 .lead-drawer .fu-note-chip.active { background: var(--accent-soft); color: var(--accent-ink); }
html.ui2 .lead-drawer .offer-card { border: 0; border-radius: var(--r-12); background: var(--surface); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); }
html.ui2 .lead-drawer .offer-card.active { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
html.ui2 .lead-drawer .stage-option { border-radius: var(--r-8); }
html.ui2 .lead-drawer .lead-metric { border: 0; border-radius: var(--r-12); background: var(--surface); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); }
/* Pie de acciones fijo al fondo del drawer; el "Cerrar" grande solo en móvil */
html.ui2 .lead-drawer .drawer-actions { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: var(--s-8); margin: var(--s-16) calc(-1 * var(--s-24)) calc(-1 * var(--s-24)); padding: var(--s-12) var(--s-24); background: var(--bg); border-top: 1px solid var(--line-soft); }
html.ui2 .lead-drawer .lead-close-big { display: none; }
html.ui2 .lead-mobile-actionbar .btn { line-height: 20px; }
@media (max-width: 900px) {
  html.ui2 .lead-drawer { width: 100vw; }
  html.ui2 .lead-drawer .lead-detail-form { padding: 0 var(--s-16) 96px; gap: var(--s-12); }
  html.ui2 .lead-drawer .lead-drawer-head { margin: 0 calc(-1 * var(--s-16)); padding: var(--s-12) var(--s-16); }
  html.ui2 .lead-drawer .lead-title-input { font-size: var(--t-20); }
  html.ui2 .lead-drawer input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.lead-title-input), html.ui2 .lead-drawer .sel2-btn { min-height: 44px; height: 44px; }
  html.ui2 .lead-drawer .sel2-op { min-height: 44px; }
  html.ui2 .lead-drawer .fu-preset, html.ui2 .lead-drawer .fu-note-chip, html.ui2 .lead-drawer .discount-code-chip { height: 44px; font-size: var(--t-14); }
  html.ui2 .lead-drawer .lead-close-big { display: none; }
  html.ui2 .lead-mobile-actionbar { gap: var(--s-8); padding: var(--s-8) var(--s-12); background: var(--bg); border-top: 1px solid var(--line-soft); box-shadow: none; }
  html.ui2 .lead-mobile-actionbar .btn { flex: 1; height: 44px; }
}

@media (max-width: 768px) { html.ui2 .lead-drawer .drawer-actions { display: none; } }

/* ── Selector de fecha y hora propio (ficha) ── */
html.ui2 .lead-drawer .dt2 { position: relative; display: block; }
html.ui2 .lead-drawer .dt2-nativo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
html.ui2 .lead-drawer .dt2-btn { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 10px 0 12px; border: 0; border-radius: var(--r-8); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: var(--t-14); line-height: 20px; color: var(--text); cursor: pointer; text-align: left; }
html.ui2 .lead-drawer .dt2-btn .dt2-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui2 .lead-drawer .dt2-btn.vacio .dt2-txt { color: var(--faint); }
html.ui2 .lead-drawer .dt2-btn .ico { color: var(--faint); }
html.ui2 .lead-drawer .dt2-btn:focus-visible, html.ui2 .lead-drawer .dt2.open .dt2-btn { outline: none; box-shadow: var(--ring); }
html.ui2 .lead-drawer .dt2-pop { position: absolute; left: 0; top: calc(100% + 4px); z-index: 21; width: 320px; max-width: 100%; padding: 12px; display: grid; gap: 10px; background: var(--surface); border-radius: var(--r-12); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line-soft); }
html.ui2 .lead-drawer .dt2-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html.ui2 .lead-drawer .dt2-cab b { font-size: var(--t-14); font-weight: 700; text-transform: capitalize; }
html.ui2 .lead-drawer .dt2-dow { display: grid; grid-template-columns: repeat(7, 1fr); font-size: var(--t-12); color: var(--faint); text-align: center; }
html.ui2 .lead-drawer .dt2-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
html.ui2 .lead-drawer .dt2-dia { height: 36px; border: 0; border-radius: var(--r-8); background: transparent; font: inherit; font-size: var(--t-14); line-height: 20px; color: var(--text); cursor: pointer; }
html.ui2 .lead-drawer .dt2-dia:hover { background: var(--surface-3); }
html.ui2 .lead-drawer .dt2-dia.hoy { box-shadow: inset 0 0 0 1px var(--line); }
html.ui2 .lead-drawer .dt2-dia.on { background: var(--accent); color: var(--on-gold); font-weight: 700; box-shadow: none; }
html.ui2 .lead-drawer .dt2-hora { display: grid; gap: 6px; }
html.ui2 .lead-drawer .dt2-hora .t { font-size: var(--t-12); font-weight: 600; color: var(--muted); }
html.ui2 .lead-drawer .dt2-horas { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
html.ui2 .lead-drawer .dt2-horas::-webkit-scrollbar { display: none; }
html.ui2 .lead-drawer .dt2-mins { display: flex; gap: 4px; }
html.ui2 .lead-drawer .dt2-horas button, html.ui2 .lead-drawer .dt2-mins button { flex: none; height: 32px; min-width: 56px; padding: 0 8px; border: 0; border-radius: var(--r-8); background: var(--surface-3); font: inherit; font-size: var(--t-12); font-weight: 600; line-height: 20px; color: var(--text); cursor: pointer; }
html.ui2 .lead-drawer .dt2-horas button.on, html.ui2 .lead-drawer .dt2-mins button.on { background: var(--accent-soft); color: var(--accent-ink); }
html.ui2 .lead-drawer .dt2-pie { display: flex; gap: 6px; justify-content: flex-end; }
@media (max-width: 900px) {
  html.ui2 .lead-drawer .dt2-btn { height: 44px; }
  html.ui2 .lead-drawer .dt2-pop { width: 100%; }
  html.ui2 .lead-drawer .dt2-dia, html.ui2 .lead-drawer .dt2-horas button, html.ui2 .lead-drawer .dt2-mins button { height: 44px; font-size: var(--t-14); }
}


/* ── Ficha: cabecera + pestañas por bloques ──
   El head pasa a GRID: nombre (col 1) + iconos (col 2) en la fila 1, y las pestañas abarcando toda la
   fila 2. Antes era flex-wrap y en pantallas angostas las pestañas (min-content) no envolvían bien,
   reventaban el ancho y chocaban con los iconos (que el CSS base ponía absolutos) → la ficha scrolleaba
   de lado en móvil. Con grid, cada fila es explícita; min-width:0 deja que las pestañas se encojan y
   scrolleen solas, y el drawer nunca scrollea en horizontal. (Adrian 2026-10-27) */
html.ui2 .lead-drawer { overflow-x: hidden; }
html.ui2 .lead-drawer .lead-drawer-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-12); align-items: start; }
html.ui2 .lead-drawer .lead-drawer-head > div:first-child { grid-column: 1; min-width: 0; }
html.ui2 .lead-drawer .ld-acciones { grid-column: 2; position: static; }
html.ui2 .lead-drawer .ld-tabs { grid-column: 1 / -1; flex-basis: auto; display: flex; gap: 2px; margin: 4px 0 -13px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
html.ui2 .lead-drawer .ld-tabs::-webkit-scrollbar { display: none; }
html.ui2 .lead-drawer .ld-tab { height: 36px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; font: inherit; font-size: var(--t-14); font-weight: 600; line-height: 20px; color: var(--muted); cursor: pointer; white-space: nowrap; }
html.ui2 .lead-drawer .ld-tab:hover { color: var(--text); }
html.ui2 .lead-drawer .ld-tab.on { color: var(--text); border-bottom-color: var(--accent); }
html.ui2 .lead-drawer .ld-oculto { display: none !important; }
html.ui2 .lead-drawer .lead-bottom-grid:has(> .ld-oculto) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
  html.ui2 .lead-drawer .ld-tab { height: 44px; }
}


/* ══ Capa común de las pantallas con look viejo (Dashboard, Equipo, Dinero, Mensajes, Sistema, toolbar del kanban) ══
   Solo aspecto: tarjetas sin borde de 1 px, UNA familia de botones, subpestañas como segmentado, tablas Twenty,
   chips a pastilla, formularios del sistema. Los emoji y los colores por tono se conservan (feedback 26-oct). */
html.ui2 .content-view .panel, html.ui2 .content-view .settings-card, html.ui2 .content-view .kpi-card, html.ui2 .content-view .dash-card,
html.ui2 .content-view .lss-item, html.ui2 .content-view .page-hero, html.ui2 .content-view .highlight-panel, html.ui2 .content-view .table-wrap,
html.ui2 .content-view .context-mini-card { border: 0; border-radius: var(--r-12); background: var(--surface); background-image: none; box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); }
html.ui2 .content-view .panel .panel, html.ui2 .content-view .panel .settings-card, html.ui2 .content-view .panel .dash-card { background: var(--surface-2); box-shadow: 0 0 0 1px var(--line-soft); }
html.ui2 .content-view .notice { border: 0; border-radius: var(--r-12); box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 30%, transparent); }
html.ui2 .content-view .notice.red { box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent); }
html.ui2 .content-view .notice.green { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 30%, transparent); }
html.ui2 .content-view .panel-header { border-bottom: 1px solid var(--line-soft); }
html.ui2 .content-view .panel-header h2, html.ui2 .content-view .panel-header h3, html.ui2 .content-view .page-hero h2, html.ui2 .content-view .dash-card-title { letter-spacing: 0; }
html.ui2 .content-view .page-hero h2 { font-size: var(--t-24); font-weight: 700; margin: 2px 0 4px; }
html.ui2 .content-view .eyebrow, html.ui2 .content-view .loss-eyebrow, html.ui2 .content-view .payouts-eyebrow, html.ui2 .content-view .lss-label, html.ui2 .content-view .kpi-card p { font-size: var(--t-12); font-weight: 700; letter-spacing: .06em; }
/* UNA familia de botones: los nombres legacy pasan a la receta .btn */
html.ui2 .content-view .primary-btn, html.ui2 .content-view .ghost-btn, html.ui2 .content-view .glass-btn, html.ui2 .content-view .danger-btn, html.ui2 .content-view .icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 var(--s-12); border: 0; border-radius: var(--r-8);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-14); font-weight: 600; line-height: 20px; cursor: pointer; white-space: nowrap; text-decoration: none;
  box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); transform: none; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
html.ui2 .content-view .primary-btn:hover, html.ui2 .content-view .ghost-btn:hover, html.ui2 .content-view .glass-btn:hover, html.ui2 .content-view .danger-btn:hover, html.ui2 .content-view .icon-btn:hover { transform: none; filter: none; }
html.ui2 .content-view .ghost-btn:hover, html.ui2 .content-view .glass-btn:hover, html.ui2 .content-view .icon-btn:hover { background: var(--surface-3); }
html.ui2 .content-view .primary-btn, html.ui2 .content-view .glass-btn-primary { background: var(--btn-gold); color: var(--on-gold); box-shadow: none; text-shadow: none; }
html.ui2 .content-view .primary-btn:hover, html.ui2 .content-view .glass-btn-primary:hover { background: var(--btn-gold-hi); }
html.ui2 .content-view .danger-btn { background: transparent; color: var(--danger-ink); box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 40%, transparent); }
html.ui2 .content-view .danger-btn:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
html.ui2 .content-view .ghost-btn.active, html.ui2 .content-view .glass-btn.active { background: var(--accent-soft); color: var(--accent-ink); box-shadow: none; }
html.ui2 .content-view .icon-btn { width: 36px; padding: 0; color: var(--muted); }
html.ui2 .content-view .primary-btn.slim, html.ui2 .content-view .ghost-btn.slim, html.ui2 .content-view .glass-btn.slim, html.ui2 .content-view .danger-btn.slim { min-height: 32px; padding: 0 10px; font-size: var(--t-12); }
html.ui2 .content-view .primary-btn[disabled], html.ui2 .content-view .ghost-btn[disabled], html.ui2 .content-view .glass-btn[disabled], html.ui2 .content-view .danger-btn[disabled] { opacity: .5; cursor: default; }
/* Subpestañas y grupos de filtro como segmentado */
html.ui2 .content-view .training-tabs, html.ui2 .tn-sub3 .training-tabs { margin: 0; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: var(--r-8); background: var(--surface-3); }
html.ui2 .content-view .training-tab, html.ui2 .tn-sub3 .training-tab { min-height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: var(--t-14); font-weight: 600; line-height: 20px; box-shadow: none; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
html.ui2 .content-view .training-tab:hover, html.ui2 .tn-sub3 .training-tab:hover { color: var(--text); }
html.ui2 .content-view .training-tab.active, html.ui2 .tn-sub3 .training-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-soft); }
/* Tablas: receta Twenty */
html.ui2 .content-view .table { font-size: var(--t-14); }
html.ui2 .content-view .table th { font-size: var(--t-12); font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
html.ui2 .content-view .table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
html.ui2 .content-view .table tbody tr:last-child td { border-bottom: 0; }
html.ui2 .content-view .table tbody tr:nth-child(even) td { background: transparent; }
html.ui2 .content-view .table tbody tr:hover td { background: var(--surface-2); }
/* Chips a pastilla (se conservan sus tonos) */
html.ui2 .content-view .chip, html.ui2 .content-view .status-pill, html.ui2 .content-view .mini-badge { border-radius: 1000px; min-height: 24px; font-size: var(--t-12); font-weight: 600; letter-spacing: 0; text-transform: none; }
html.ui2 .content-view .tag { border-radius: 1000px; min-height: 20px; padding: 2px 8px; font-size: var(--t-12); font-weight: 600; letter-spacing: 0; text-transform: none; }
/* Formularios del sistema */
html.ui2 .content-view .form-grid label, html.ui2 .content-view .settings-card label, html.ui2 .content-view .field-label, html.ui2 .content-view .trial-label { font-size: var(--t-12); font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }
html.ui2 .content-view input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not(.dt2-nativo), html.ui2 .content-view textarea { min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-8); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: var(--t-14); color: var(--text); }
html.ui2 .content-view textarea { min-height: 72px; padding: 10px 12px; }
html.ui2 .content-view input:focus, html.ui2 .content-view textarea:focus { outline: none; box-shadow: var(--ring); }
html.ui2 .content-view input[type="checkbox"], html.ui2 .content-view input[type="radio"] { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; min-height: 0; margin: 0 4px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; display: inline-grid; place-items: center; vertical-align: middle; flex: none; position: relative; }
html.ui2 .content-view input[type="checkbox"]::before, html.ui2 .content-view input[type="radio"]::before { content: ""; grid-area: 1 / 1; width: 18px; height: 18px; border-radius: 4px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
html.ui2 .content-view input[type="radio"]::before { border-radius: 1000px; }
html.ui2 .content-view input[type="checkbox"]:checked::before, html.ui2 .content-view input[type="radio"]:checked::before { background: var(--accent); box-shadow: none; }
html.ui2 .content-view input[type="checkbox"]:checked::after { content: ""; grid-area: 1 / 1; width: 10px; height: 6px; border: 2px solid var(--on-gold); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
html.ui2 .content-view input[type="radio"]:checked::after { content: ""; grid-area: 1 / 1; width: 8px; height: 8px; border-radius: 1000px; background: var(--on-gold); }
html.ui2 .content-view input[type="checkbox"]:focus-visible, html.ui2 .content-view input[type="radio"]:focus-visible { outline: none; }
html.ui2 .content-view input[type="checkbox"]:focus-visible::before, html.ui2 .content-view input[type="radio"]:focus-visible::before { box-shadow: var(--ring); }
html.ui2 .content-view input[type="checkbox"][disabled], html.ui2 .content-view input[type="radio"][disabled] { opacity: .5; cursor: default; }
/* Selects y fechas propios (mejorarSelects / mejorarFechas) fuera de la ficha */
html.ui2 .content-view .sel2 { position: relative; display: inline-block; vertical-align: middle; min-width: 140px; max-width: 100%; }
html.ui2 .content-view label > .sel2, html.ui2 .content-view .form-grid .sel2, html.ui2 .content-view .settings-card .sel2, html.ui2 .content-view .wide > .sel2 { display: block; }
html.ui2 .content-view .sel2-nativo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
html.ui2 .content-view .sel2-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 40px; padding: 0 10px 0 12px; border: 0; border-radius: var(--r-8); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: var(--t-14); line-height: 20px; color: var(--text); cursor: pointer; text-align: left; }
html.ui2 .content-view .sel2-btn .sel2-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui2 .content-view .sel2-btn .ico { color: var(--faint); }
html.ui2 .content-view .sel2-btn:focus-visible, html.ui2 .content-view .sel2.open .sel2-btn { outline: none; box-shadow: var(--ring); }
html.ui2 .content-view .sel2.disabled .sel2-btn { opacity: .6; cursor: default; }
html.ui2 .content-view .sel2-pop { position: absolute; left: 0; min-width: 100%; top: calc(100% + 4px); z-index: 20; max-height: 260px; overflow: auto; padding: 4px; display: grid; gap: 2px; background: var(--surface); border-radius: var(--r-12); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line-soft); }
html.ui2 .content-view .sel2-op { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: var(--r-8); background: transparent; font: inherit; font-size: var(--t-14); line-height: 20px; color: var(--text); cursor: pointer; text-align: left; white-space: nowrap; }
html.ui2 .content-view .sel2-op:hover { background: var(--surface-3); }
html.ui2 .content-view .sel2-op.on { background: var(--accent-soft); color: var(--accent-ink); }
html.ui2 .content-view .dt2 { position: relative; display: block; }
html.ui2 .content-view .dt2-nativo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
html.ui2 .content-view .dt2-btn { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 10px 0 12px; border: 0; border-radius: var(--r-8); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: var(--t-14); line-height: 20px; color: var(--text); cursor: pointer; text-align: left; }
html.ui2 .content-view .dt2-btn .dt2-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui2 .content-view .dt2-btn.vacio .dt2-txt, html.ui2 .content-view .dt2-btn .ico { color: var(--faint); }
html.ui2 .content-view .dt2-pop { position: absolute; left: 0; top: calc(100% + 4px); z-index: 21; width: 320px; max-width: 100%; padding: 12px; display: grid; gap: 10px; background: var(--surface); border-radius: var(--r-12); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line-soft); }
html.ui2 .content-view .dt2-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html.ui2 .content-view .dt2-cab b { font-size: var(--t-14); font-weight: 700; text-transform: capitalize; }
html.ui2 .content-view .dt2-dow { display: grid; grid-template-columns: repeat(7, 1fr); font-size: var(--t-12); color: var(--faint); text-align: center; }
html.ui2 .content-view .dt2-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
html.ui2 .content-view .dt2-dia { height: 36px; border: 0; border-radius: var(--r-8); background: transparent; font: inherit; font-size: var(--t-14); line-height: 20px; color: var(--text); cursor: pointer; }
html.ui2 .content-view .dt2-dia:hover { background: var(--surface-3); }
html.ui2 .content-view .dt2-dia.hoy { box-shadow: inset 0 0 0 1px var(--line); }
html.ui2 .content-view .dt2-dia.on { background: var(--accent); color: var(--on-gold); font-weight: 700; box-shadow: none; }
html.ui2 .content-view .dt2-hora { display: grid; gap: 6px; }
html.ui2 .content-view .dt2-hora .t { font-size: var(--t-12); font-weight: 600; color: var(--muted); }
html.ui2 .content-view .dt2-horas { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
html.ui2 .content-view .dt2-mins { display: flex; gap: 4px; }
html.ui2 .content-view .dt2-horas button, html.ui2 .content-view .dt2-mins button { flex: none; height: 32px; min-width: 56px; padding: 0 8px; border: 0; border-radius: var(--r-8); background: var(--surface-3); font: inherit; font-size: var(--t-12); font-weight: 600; line-height: 20px; color: var(--text); cursor: pointer; }
html.ui2 .content-view .dt2-horas button.on, html.ui2 .content-view .dt2-mins button.on { background: var(--accent-soft); color: var(--accent-ink); }
html.ui2 .content-view .dt2-pie { display: flex; gap: 6px; justify-content: flex-end; }
/* Toolbar del kanban (se queda, con la receta): segmentado Real/Prueba/Bot, acciones rápidas, links rápidos */
html.ui2 .content-view .pipeline-mode-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-8); background: var(--surface-3); border: 0; box-shadow: none; }
html.ui2 .content-view .pms-btn { min-height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: var(--t-14); font-weight: 600; line-height: 20px; box-shadow: none; }
html.ui2 .content-view .pms-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-soft); }
html.ui2 .content-view .actions-picker > summary, html.ui2 .content-view .quick-links-panel > summary { border-radius: var(--r-8); }
@media (max-width: 900px) {
  html.ui2 .content-view .primary-btn, html.ui2 .content-view .ghost-btn, html.ui2 .content-view .glass-btn, html.ui2 .content-view .danger-btn, html.ui2 .content-view .icon-btn, html.ui2 .content-view .training-tab, html.ui2 .content-view .pms-btn, html.ui2 .content-view .sel2-btn, html.ui2 .content-view .dt2-btn { min-height: 44px; }
  html.ui2 .content-view .primary-btn.slim, html.ui2 .content-view .ghost-btn.slim, html.ui2 .content-view .glass-btn.slim, html.ui2 .content-view .danger-btn.slim { min-height: 44px; font-size: var(--t-14); }
  html.ui2 .content-view input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not(.dt2-nativo) { min-height: 44px; }
  html.ui2 .content-view input[type="checkbox"], html.ui2 .content-view input[type="radio"] { width: 44px; height: 44px; margin: -10px 0 -10px -10px; }
  html.ui2 .content-view input[type="checkbox"]::before, html.ui2 .content-view input[type="radio"]::before { width: 20px; height: 20px; }
  html.ui2 .content-view .dt2-pop { width: 100%; }
  html.ui2 .content-view .dt2-dia, html.ui2 .content-view .dt2-horas button, html.ui2 .content-view .dt2-mins button, html.ui2 .content-view .sel2-op { min-height: 44px; height: auto; }
}


/* Héroes legacy (.payouts-hero lleva !important en styles.css): misma tarjeta del sistema, con un lavado mínimo del acento */
html.ui2 .content-view .payouts-hero, html.ui2 .content-view .highlight-panel { border: 0 !important; border-radius: var(--r-12) !important; background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%), var(--surface) !important; box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft) !important; }
html.ui2 .content-view .payouts-hero-metric { border: 0; border-radius: var(--r-12); background: var(--surface-2); box-shadow: 0 0 0 1px var(--line-soft); }
html.ui2 .content-view .exec-shortcut { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-12); background: var(--surface); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); line-height: 20px; }
html.ui2 .content-view .exec-shortcut-icon { font-size: 16px; line-height: 20px; }
html.ui2 .content-view .exec-shortcut-copy { display: flex; align-items: baseline; gap: 8px; min-width: 0; line-height: 20px; }
html.ui2 .content-view .exec-shortcut-copy strong { font-size: var(--t-14); font-weight: 600; white-space: nowrap; }
html.ui2 .content-view .exec-shortcut-copy small { font-size: var(--t-12); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui2 .content-view .exec-shortcut:hover { transform: none; box-shadow: var(--shadow-soft), 0 0 0 1px var(--line); }
/* Legibilidad: rótulos KPI a 12 px, rangos y tendencias con tinta del tono, FAB con tinta sobre dorado */
html.ui2 .kpi-lbl, html.ui2 .kpi-trend, html.ui2 .kc-tab .kpi-lbl, html.ui2 .kc-tab .kpi-trend { font-size: var(--t-12) !important; letter-spacing: .04em; }
html.ui2 .content-view .perf-rank { color: var(--accent-ink); border-radius: var(--r-8); }
html.ui2 .content-view .rvc-trend, html.ui2 .content-view .rvc-up { color: var(--ok-ink); }
html.ui2 .content-view .rvc-trend { border-radius: 1000px; padding: 2px 10px; }
html.ui2 .fab-btn { color: var(--on-gold); }
html.ui2 .content-view .team-filter-chip { border: 0; border-radius: 1000px; box-shadow: 0 0 0 1px var(--line-soft); }
html.ui2 .content-view .team-filter-chip.active { background: var(--accent-soft); color: var(--accent-ink); box-shadow: none; }
html.ui2 .content-view .payout-tab { border: 0; border-radius: var(--r-8); }
html.ui2 .content-view .team-filter-chip, html.ui2 .content-view .payout-tab { line-height: 20px; font-size: var(--t-12); }
html.ui2 .content-view .muted, html.ui2 .content-view .micro, html.ui2 .content-view small.muted { color: var(--muted); }
html.ui2 .content-view .wins-bar-row.bajo-n .wins-bar-label, html.ui2 .content-view .wins-bar-row.bajo-n .wins-bar-val { color: var(--muted); }
html.ui2 .content-view .wins-bar-row.bajo-n .wins-bar-track i { opacity: .35; }
/* Banner de push (push-client.js, fuera de .content-view) */
html.ui2 .push-nudge button, html.ui2 .pn-card button { min-height: 36px; border-radius: var(--r-8); line-height: 20px; }
@media (max-width: 900px) {
  html.ui2 .content-view .team-filter-chip, html.ui2 .content-view .payout-tab, html.ui2 .content-view .exec-shortcut { min-height: 44px; }
  html.ui2 .push-nudge button, html.ui2 .pn-card button { min-height: 44px; min-width: 44px; }
}


/* Subsecciones en la cabecera, móvil: fila propia bajo las secciones, una línea con scroll (va al final del
   archivo porque la receta del segmentado se declara después del bloque móvil de la cabecera). */
@media (max-width: 900px) {
  html.ui2 .tn.con-sub3 .tn-row2 { flex-wrap: wrap; height: auto; min-height: 48px; padding-bottom: 4px; }
  html.ui2 .tn-sub3 { flex-basis: 100%; order: 3; margin: 0; padding: 0; border: 0; overflow-x: auto; scrollbar-width: none; }
  html.ui2 .tn-sub3::-webkit-scrollbar { display: none; }
  html.ui2 .tn-sub3 .training-tabs { flex-wrap: nowrap; }
  html.ui2 .tn-sub3 .training-tab { min-height: 44px; white-space: nowrap; }
}


/* Tonos legacy con !important (gold/green/red/blue-text, strong dorado de los héroes, code) → tintas legibles */
html.ui2 .content-view .gold-text { color: var(--accent-ink) !important; }
html.ui2 .content-view .green-text { color: var(--ok-ink) !important; }
html.ui2 .content-view .red-text { color: var(--danger-ink) !important; }
html.ui2 .content-view .blue-text { color: var(--info-ink) !important; }
html.ui2 .content-view .payouts-hero-metric strong, html.ui2 .content-view .comp-pool .payouts-hero-metric, html.ui2 .content-view code { color: var(--accent-ink) !important; }
/* Routing: botoncitos de estado/peso con diana y tinta legibles */
html.ui2 .content-view .dist-mini { min-width: 36px; min-height: 36px; border: 0; border-radius: var(--r-8); background: var(--surface-3); color: var(--muted); box-shadow: none; line-height: 20px; }
html.ui2 .content-view .dist-mini.active { background: var(--accent-soft); color: var(--accent-ink); }
html.ui2 .content-view .status-segment, html.ui2 .content-view .weight-segment { gap: 4px; }
@media (max-width: 900px) {
  html.ui2 .content-view .dist-mini { min-width: 44px; min-height: 44px; }
}


/* Selector de mes propio (rejilla 3×4) y banner de push (estilos inline en push-client.js → !important) */
html.ui2 .content-view .dt2-mes-wrap { display: inline-block; min-width: 150px; vertical-align: middle; }
html.ui2 .content-view .dt2-meses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
html.ui2 .content-view .dt2-mes { height: 40px; text-transform: capitalize; }
html.ui2 #cortex-push-banner button { min-height: 36px !important; border-radius: 1000px !important; line-height: 20px !important; }
html.ui2 #cortex-push-banner button:last-child { color: #fff !important; font-size: 20px !important; min-width: 36px !important; }
@media (max-width: 900px) {
  html.ui2 .content-view .dt2-mes { height: 44px; }
  html.ui2 #cortex-push-banner button { min-height: 44px !important; }
  html.ui2 #cortex-push-banner button:last-child { min-width: 44px !important; }
}


/* ══ Tarjetas del tablero: prueba de Adrian (27-oct). SOLO fondo, tamaños de letra y tipografía del sistema.
   Se conservan: barra de acento por etapa, chips de color, Text now, animaciones, avatar, pie y acciones. ══ */
html.ui2 .content-view .lead-card { background: var(--surface); background-image: none; border-color: transparent; box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft); }
html.ui2 .content-view .lead-card:hover { border-color: transparent; box-shadow: var(--shadow-pop), 0 0 0 1px color-mix(in srgb, var(--accent, var(--line)) 45%, var(--line-soft)); }
html.ui2 .content-view .lead-card h4 { font-size: var(--t-14); font-weight: 600; letter-spacing: 0; line-height: 20px; }
html.ui2 .content-view .lead-card .lead-meta-line, html.ui2 .content-view .lead-card .lc-quote, html.ui2 .content-view .lead-card .lc-footer, html.ui2 .content-view .lead-card .lc-fu-pending, html.ui2 .content-view .lead-card .lc-fu-overdue, html.ui2 .content-view .lead-card .lc-owe, html.ui2 .content-view .lead-card .lc-loss-reason, html.ui2 .content-view .lead-card .lc-promo-earn, html.ui2 .content-view .lead-card .ai-timer { font-size: var(--t-12); line-height: 16px; letter-spacing: 0; }
html.ui2 .content-view .lead-card .lead-meta-line.strong { font-weight: 600; }
html.ui2 .content-view .lead-card .tag, html.ui2 .content-view .lead-card .lc-wa-pill, html.ui2 .content-view .lead-card .lc-closer-tag, html.ui2 .content-view .lead-card .lc-score-pill, html.ui2 .content-view .lead-card .lc-signal-pill, html.ui2 .content-view .lead-card .lc-upgrade-pill, html.ui2 .content-view .lead-card .lc-promo-tag, html.ui2 .content-view .lead-card .lc-overflow-badge { font-size: var(--t-12) !important; font-weight: 600 !important; letter-spacing: 0; text-transform: none; line-height: 16px; }
html.ui2 .content-view .lead-card .tag.money, html.ui2 .content-view .lead-card .lc-owe { font-weight: 700 !important; font-variant-numeric: tabular-nums; }
html.ui2 .content-view .lead-card .lc-avatar { font-size: var(--t-12); font-weight: 600; }
html.ui2 .content-view .lead-card .lc-felicidades-btn { font-size: var(--t-12); font-weight: 600; letter-spacing: 0; }
html.ui2 .content-view .lead-card .lc-fel-comm { font-size: var(--t-12); }

/* ══ Cementerio de closers (Adrian 28-oct) ════════════════════════════════════════════════════════
   Archivo de consulta, no tablero: aquí nada se arrastra ni se edita. Tono sobrio a propósito, y
   números tabulares porque la columna de cerrados se lee contra contabilidad. ══ */
html.ui2 .cementerio-view .cem-table { width: 100%; }
html.ui2 .cementerio-view .cem-table th,
html.ui2 .cementerio-view .cem-table td { vertical-align: middle; }
html.ui2 .cementerio-view .cem-table .cem-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
html.ui2 .cementerio-view .cem-row.on { background: var(--surface-2); }

/* Nombre del closer: botón que filtra la tabla de abajo. Se ve pulsable sin gritar. */
html.ui2 .cementerio-view .cem-name {
  display: inline-flex; align-items: center; gap: var(--s-8);
  background: none; border: 0; padding: var(--s-4) 0; margin: 0;
  color: inherit; text-align: left; cursor: pointer; font: inherit;
  border-radius: var(--r-8); transition: color var(--dur) var(--ease);
}
html.ui2 .cementerio-view .cem-name:hover { color: var(--accent); }
html.ui2 .cementerio-view .cem-name > span:last-child { display: grid; min-width: 0; }
html.ui2 .cementerio-view .cem-name strong { font-size: var(--t-14); font-weight: 600; line-height: 18px; }
html.ui2 .cementerio-view .cem-name small,
html.ui2 .cementerio-view .cem-table td > small {
  display: block; color: var(--muted); font-size: var(--t-12); line-height: 16px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch;
}

/* Cada grupo en su propia línea: la pregunta real es "¿ya salió de los dos?". */
html.ui2 .cementerio-view .cem-groups { white-space: nowrap; }
html.ui2 .cementerio-view .cem-g { display: flex; align-items: center; gap: var(--s-8); margin: 2px 0; }
html.ui2 .cementerio-view .cem-glabel { color: var(--muted); font-size: var(--t-12); min-width: 62px; }

html.ui2 .cementerio-view .cem-actions { display: flex; flex-wrap: wrap; gap: var(--s-4); min-width: 220px; }
html.ui2 .cementerio-view .cem-actions .ghost-btn { font-size: var(--t-12); }
html.ui2 .cementerio-view .cem-actions .ghost-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* La tabla scrollea en su propio contenedor; el body nunca se va de lado. */
html.ui2 .cementerio-view .table-wrap { overflow-x: auto; }
/* En móvil y tablet la tabla pasa a TARJETAS, mismo patrón que la Lista de leads. Antes se forzaba
   a 720px con scroll lateral: en un iPhone solo se veían "Closer" y "Archivado", y las acciones
   (Revivir, sacar de los grupos) quedaban fuera de pantalla, que es justo a lo que se entra.
   El corte es 1024 y no 760 porque con 7 columnas el iPad vertical tampoco da: la columna del
   nombre se comprimía tanto que "Eduardo Messuti" salía partido letra por letra. (Adrian 2026-10-28) */
@media (max-width: 1024px) {
  html.ui2 .cementerio-view .table-wrap { overflow: visible; }
  html.ui2 .cementerio-view .cem-table,
  html.ui2 .cementerio-view .cem-table tbody,
  html.ui2 .cementerio-view .cem-table tbody tr,
  html.ui2 .cementerio-view .cem-table tbody td { display: block; width: 100%; min-width: 0; }
  html.ui2 .cementerio-view .cem-table thead { display: none; }
  html.ui2 .cementerio-view .cem-table { background: transparent; box-shadow: none; }
  html.ui2 .cementerio-view .cem-table tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center;
    padding: 12px; margin: 0 0 var(--s-8); border: 0; border-radius: var(--r-12);
    background: var(--surface); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft);
  }
  html.ui2 .cementerio-view .cem-table tbody tr.on { box-shadow: var(--shadow-soft), 0 0 0 2px var(--accent); }
  html.ui2 .cementerio-view .cem-table tbody td { padding: 0; border: 0; text-align: left; background: transparent; }
  /* OJO con la especificidad: la regla de arriba es (0,3,3) y le gana a un ".cem-td-x" suelto
     (0,3,1), que es (0,3,1). Por eso cada celda se escribe también como "tbody td.cem-td-x":
     si no, el display:block de arriba pisa el grid y los botones se salen de la tarjeta. */
  html.ui2 .cementerio-view .cem-table tbody td.cem-td-closer { grid-column: 1; grid-row: 1; }
  html.ui2 .cementerio-view .cem-table tbody td.cem-td-fecha { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; font-size: var(--t-12); color: var(--muted); }
  /* Cerrados / Perdidos / Teléfono en una línea de datos con su etiqueta, que sin cabecera
     un "12" suelto no se entiende. */
  html.ui2 .cementerio-view .cem-table tbody td.cem-td-cerrados,
  html.ui2 .cementerio-view .cem-table tbody td.cem-td-perdidos,
  html.ui2 .cementerio-view .cem-table tbody td.cem-td-tel {
    grid-row: 2; display: flex; align-items: baseline; gap: 4px;
    font-size: var(--t-12); color: var(--muted); text-align: left;
  }
  html.ui2 .cementerio-view .cem-table tbody td.cem-td-cerrados { grid-column: 1; }
  html.ui2 .cementerio-view .cem-table tbody td.cem-td-perdidos { grid-column: 2; justify-self: end; }
  html.ui2 .cementerio-view .cem-table tbody td.cem-td-tel { grid-column: 1 / -1; grid-row: 3; }
  html.ui2 .cementerio-view .cem-table tbody td.cem-td-cerrados::before,
  html.ui2 .cementerio-view .cem-table tbody td.cem-td-perdidos::before,
  html.ui2 .cementerio-view .cem-table tbody td.cem-td-tel::before {
    content: attr(data-label) ": "; color: var(--faint); font-weight: 600; white-space: pre;
  }
  html.ui2 .cementerio-view .cem-table tbody td.cem-td-grupos { grid-column: 1 / -1; grid-row: 4; white-space: normal; }
  /* minmax(0,1fr) y no 1fr: una pista 1fr tiene min-width:auto, así que crece con el texto del
     botón y se sale de la tarjeta. Y hay que anular el min-width:220px que .cem-actions usa en
     escritorio. */
  html.ui2 .cementerio-view .cem-table tbody td.cem-td-acc {
    grid-column: 1 / -1; grid-row: 5;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-width: 0;
  }
  /* Revivir es la acción con peso: fila propia y a todo el ancho. */
  html.ui2 .cementerio-view .cem-td-acc .ghost-btn { width: 100%; min-width: 0; justify-content: center; white-space: normal; }
  html.ui2 .cementerio-view .cem-td-acc .ghost-btn:last-child { grid-column: 1 / -1; }
}
/* Tablet: las mismas tarjetas, pero de dos en dos para no desperdiciar el ancho. */
@media (min-width: 641px) and (max-width: 1024px) {
  html.ui2 .cementerio-view .cem-table tbody {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--s-8);
  }
  html.ui2 .cementerio-view .cem-table tbody tr { margin: 0; align-content: start; }
}

/* ══ Muertos: los del cementerio, al pie de Vendedores ════════════════════════════════════════════
   Apagado a propósito y SIN insignias. Verificado / en prueba / en pausa describen a quien sigue
   trabajando aquí; en alguien que ya no está solo despistan. Gris y plano para que se lea como un
   archivo al lado de las tarjetas vivas, en vez de competir con ellas. ══ */
html.ui2 .dead-panel .dead-count { color: var(--muted); font-style: normal; font-weight: 500; }
html.ui2 .dead-grid {
  display: grid; gap: var(--s-12);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
html.ui2 .dead-card {
  display: grid; gap: var(--s-8);
  padding: var(--s-12);
  border-radius: var(--r-12);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  /* Sin sombra ni acento: nada que lo haga parecer un closer activo. */
  filter: grayscale(1);
}
html.ui2 .dead-top { display: flex; align-items: center; gap: var(--s-8); min-width: 0; }
html.ui2 .dead-av {
  display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 1000px; background: var(--surface-3); color: var(--muted);
  font-size: var(--t-12); font-weight: 700;
}
html.ui2 .dead-id { display: grid; min-width: 0; }
html.ui2 .dead-id strong { font-size: var(--t-14); font-weight: 600; color: var(--text); line-height: 18px; }
html.ui2 .dead-id small,
html.ui2 .dead-meta {
  color: var(--muted); font-size: var(--t-12); line-height: 16px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.ui2 .dead-meta { margin: 0; }
html.ui2 .dead-stats { display: flex; gap: var(--s-12); color: var(--muted); font-size: var(--t-12); }
html.ui2 .dead-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
/* Lo único vivo de la tarjeta: la salida de vuelta. */
html.ui2 .dead-card .dead-revive { justify-self: start; filter: none; }

@media (prefers-reduced-motion: reduce) { html.ui2 .tn *, html.ui2 .btn { transition: none !important; } }

/* ══ Pantallas del closer: arreglos de la auditoría 2026-10-29 (filas 3 a 7) ══ */
/* Fila 3: la cita del pie se corta solo entre palabras (cada palabra va en un .flap-word). */
html.ui2 .flap-word { display: inline-flex; flex-wrap: nowrap; gap: 2px; }
@media (max-width: 640px) { html.ui2 .strategy-quote-strip .flap-word { gap: 2px; } }
/* Fila 3: en teléfono el pie ocupaba unos 600 px. Se quedan la cita y una fila con redes y tema. */
@media (max-width: 768px) {
  html.ui2 .app-footer { margin-top: var(--s-32); padding: var(--s-24) var(--s-12); }
  html.ui2 .app-footer .foot-brand { display: none; }
  html.ui2 .app-footer .foot-brand + .foot-divider { display: none; }
  html.ui2 .app-footer .foot-quote { padding: var(--s-8) 0 0; }
  html.ui2 .app-footer .foot-social-row { padding: var(--s-16) 0 0; gap: var(--s-12); }
  html.ui2 .app-footer .foot-socials { gap: var(--s-8); }
  html.ui2 .app-footer .foot-social { width: 44px; height: 44px; }
  html.ui2 .app-footer .foot-theme-btn, html.ui2 .app-footer .foot-top-btn { width: 44px; height: 44px; }
  html.ui2 .app-footer .foot-copy { margin-top: var(--s-16); font-size: var(--t-12); }
}
/* Fila 4: "Tu progreso" de Competencia se salía de la pantalla (rejilla de 5 columnas fijas de
   128 px). Mismo arreglo que ya tenía Mi Workspace. */
@media (max-width: 768px) {
  html.ui2 .comp-my-progress .closer-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
  html.ui2 .comp-my-progress .closer-kpi-grid .kpi-card { min-width: 0; padding: var(--s-12); }
  html.ui2 .comp-my-progress .closer-kpi-grid .kpi-card p { overflow-wrap: anywhere; }
}
/* Fila 4: las reglas se pliegan; la cabecera de la sección es el botón para abrirlas. */
html.ui2 .comp-rules-plegable > summary { list-style: none; cursor: pointer; position: relative; padding-right: var(--s-32); }
html.ui2 .comp-rules-plegable > summary::-webkit-details-marker { display: none; }
html.ui2 .comp-rules-plegable > summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
html.ui2 .comp-rules-plegable[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
html.ui2 .comp-rules-plegable[open] > summary { margin-bottom: var(--s-16); }
html.ui2 .comp-rules-plegable > summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-8); }
/* Fila 5: los importes que el closer no puede tocar parecían campos editables. Se ven como dato de
   solo lectura, con un candado junto a la etiqueta. */
html.ui2 .lead-drawer .form-grid label:has(> input:disabled) { position: relative; }
html.ui2 .lead-drawer .form-grid label:has(> input:disabled)::after {
  content: "🔒"; position: absolute; top: 0; right: 0; font-size: var(--t-12); line-height: 1;
}
/* Más específico que html.ui2 .lead-drawer input:not(...)×4, que les ponía fondo y borde. */
html.ui2 .lead-drawer .form-grid input:disabled:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  background: transparent; border-color: transparent; box-shadow: none; padding-left: 0;
  color: var(--text); -webkit-text-fill-color: var(--text); font-weight: 600; opacity: 1; cursor: default;
}
/* Fila 6: el detalle de Mis comisiones era una tabla en teléfono y la fecha se partía. Cada cierre
   pasa a una tarjeta: nombre y comisión arriba; fecha, cuota y monto debajo. */
@media (max-width: 768px) {
  html.ui2 table.mc-tabla, html.ui2 table.mc-tabla tbody { display: block; width: 100%; }
  html.ui2 table.mc-tabla thead { display: none; }
  html.ui2 table.mc-tabla tbody tr {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline;
    padding: var(--s-12) 0; border-bottom: 1px solid var(--line-soft);
  }
  html.ui2 table.mc-tabla tbody td { display: block; padding: 0; border: 0; font-size: var(--t-12); color: var(--muted); }
  html.ui2 table.mc-tabla tbody td:first-child { grid-column: 1 / 4; grid-row: 1; font-size: var(--t-14); font-weight: 600; color: var(--text); }
  html.ui2 table.mc-tabla tbody td:last-child { grid-column: 4; grid-row: 1; text-align: right; font-size: var(--t-14); }
  html.ui2 table.mc-tabla tbody td:nth-child(2) { grid-column: 1; grid-row: 2; }
  html.ui2 table.mc-tabla tbody td:nth-child(3) { grid-column: 2; grid-row: 2; }
  html.ui2 table.mc-tabla tbody td:nth-child(4):not(:last-child) { grid-column: 3; grid-row: 2; }
}
/* Fila 7: en teléfono cada compañero ocupaba ~290 px (fondo grande + avatar). Pasa a una fila
   compacta; al tocarla se abre la tarjeta completa con su fondo y su bio. Solo en la vista del closer. */
@media (max-width: 768px) {
  html.ui2 .team-lectura { gap: var(--s-8); }
  html.ui2 .team-lectura > .team-pro { cursor: pointer; }
  html.ui2 .team-lectura > .team-pro:not(.abierta) .tp-banner,
  html.ui2 .team-lectura > .team-pro:not(.abierta) .tp-bio { display: none; }
  html.ui2 .team-lectura > .team-pro:not(.abierta) .tp-body {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "av id" "av met" "av st";
    gap: 4px 12px; align-items: center; margin-top: 0; padding: var(--s-12);
  }
  html.ui2 .team-lectura > .team-pro:not(.abierta) .tp-avatar { grid-area: av; width: 44px; height: 44px; border-width: 2px; margin: 0; }
  html.ui2 .team-lectura > .team-pro:not(.abierta) .tp-avatar span { font-size: var(--t-14); }
  html.ui2 .team-lectura > .team-pro:not(.abierta) .tp-avatar-verified { transform: scale(.6); transform-origin: bottom right; }
  html.ui2 .team-lectura > .team-pro:not(.abierta) .tp-id { grid-area: id; margin: 0; min-width: 0; }
  html.ui2 .team-lectura > .team-pro:not(.abierta) .tp-id strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  html.ui2 .team-lectura > .team-pro:not(.abierta) .tp-id small { display: inline; margin-left: var(--s-8); }
  html.ui2 .team-lectura > .team-pro:not(.abierta) .tp-status-row { grid-area: st; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-4); }
  html.ui2 .team-lectura > .team-pro:not(.abierta) .tp-metrics { grid-area: met; display: flex; gap: var(--s-16); margin: 0; padding: 0; border: 0; }
  html.ui2 .team-lectura > .team-pro:not(.abierta) .tp-metrics .tcm { display: inline-flex; flex-direction: row; align-items: baseline; gap: var(--s-4); }
  html.ui2 .team-lectura > .team-pro:not(.abierta) .tp-metrics strong { font-size: var(--t-14); }
  html.ui2 .team-lectura > .team-pro:not(.abierta) .tp-metrics small { font-size: var(--t-12); }
}

/* ══ Mi Workspace (filas 1 y 10): una sola cola, un siguiente lead y cifras de una misma cuenta ══ */
html.ui2 .ws-dia { display: grid; gap: var(--s-12); }
html.ui2 .ws-dia-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-12); }
html.ui2 .ws-dia-cab h2 { margin: 2px 0 0; font-size: var(--t-24); }
html.ui2 .ws-dia-cab .muted { margin: 2px 0 0; font-size: var(--t-12); }
html.ui2 .ws-chips { display: flex; flex-wrap: wrap; gap: var(--s-8); }
html.ui2 .ws-chips .status-pill { font-variant-numeric: tabular-nums; }
html.ui2 .ws-siguiente {
  display: grid; gap: var(--s-8); padding: var(--s-16); border-radius: var(--r-12);
  background: var(--surface); box-shadow: var(--shadow-soft), 0 0 0 1px var(--line-soft);
}
html.ui2 .ws-siguiente-tit { font-size: var(--t-12); font-weight: 600; color: var(--muted); }
html.ui2 .ws-siguiente-fila { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
html.ui2 .ws-siguiente-fila strong { font-size: var(--t-16); }
html.ui2 .ws-siguiente-motivo { margin: 0; font-size: var(--t-14); color: var(--text); }
html.ui2 .ws-siguiente-acciones { display: flex; gap: var(--s-8); flex-wrap: wrap; }
html.ui2 .ws-siguiente-acciones .btn { flex: 0 1 200px; min-width: 0; }
html.ui2 .ws-cola-etapa {
  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s-8); border-radius: 1000px;
  background: var(--surface-2); color: var(--muted); font-size: var(--t-12); font-weight: 600; white-space: nowrap;
}
html.ui2 .ws-cola-cta { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: var(--s-8); }
html.ui2 .ws-al-dia { margin: 0; font-size: var(--t-14); color: var(--muted); }
html.ui2 .ws-cola-lista { display: grid; gap: var(--s-8); }
html.ui2 .ws-cola-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-12);
  padding: var(--s-12); border-radius: var(--r-12); background: var(--surface-2); border-left: 4px solid var(--accent);
}
html.ui2 .ws-cola-txt { display: grid; gap: 2px; min-width: 0; }
html.ui2 .ws-cola-txt strong { font-size: var(--t-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui2 .ws-cola-txt span { font-size: var(--t-12); color: var(--muted); }
html.ui2 .ws-mas { margin-top: var(--s-8); }
html.ui2 .ws-mas > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: var(--t-14); font-weight: 600; color: var(--accent-ink); list-style: none; }
html.ui2 .ws-mas > summary::-webkit-details-marker { display: none; }
html.ui2 .ws-plegable > summary { list-style: none; cursor: pointer; margin: 0; }
html.ui2 .ws-plegable > summary::-webkit-details-marker { display: none; }
html.ui2 .ws-plegable[open] > summary { margin-bottom: var(--s-16); }
html.ui2 .ws-plegable > summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; align-self: center;
  border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
html.ui2 .ws-plegable[open] > summary::after { transform: rotate(-135deg); }
@media (max-width: 768px) {
  html.ui2 .ws-cola-fila { grid-template-columns: minmax(0, 1fr) auto; }
  html.ui2 .ws-cola-fila .ws-cola-etapa { display: none; }
  html.ui2 .ws-cola-fila .btn { min-height: 44px; }
  html.ui2 .ws-siguiente-acciones .btn { flex: 1 1 0; min-height: 44px; }
}

/* ══ Ficha del lead (fila 2): contactar a un toque, resumen compacto y etapa a pedido ══ */
html.ui2 .lead-drawer .ld-etapa { display: inline-flex; align-items: center; gap: var(--s-4); margin-right: var(--s-8); color: var(--text); font-weight: 600; }
html.ui2 .lead-drawer .ld-etapa::before { content: ""; width: 8px; height: 8px; border-radius: 1000px; background: var(--accent); }
/* La etapa ya va en la cabecera: el chip de abajo la repetía. Un lead nuevo no la lleva arriba. */
html.ui2 .lead-drawer:has(.ld-etapa) .lead-badges .chip-stage { display: none; }
html.ui2 .lead-drawer .ld-contacto { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-8); }
html.ui2 .lead-drawer .lead-title-input { text-overflow: ellipsis; }
/* La cabecera es fija: el origen va en una sola línea para no robar altura. */
html.ui2 .lead-drawer .lead-drawer-head > div:first-child > p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui2 .lead-summary-strip .lsum-mas { grid-column: 1 / -1; flex-basis: 100%; }
html.ui2 .lead-summary-strip .lsum-mas > summary { cursor: pointer; list-style: none; font-size: var(--t-12); font-weight: 600; color: var(--muted); min-height: 32px; display: flex; align-items: center; }
html.ui2 .lead-summary-strip .lsum-mas > summary::-webkit-details-marker { display: none; }
html.ui2 .lead-summary-strip .lsum-mas[open] > summary { margin-bottom: var(--s-8); }
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  html.ui2 .lead-drawer .ld-contacto .btn { flex: 1 1 0; min-height: 44px; }
  html.ui2 .lead-summary-strip .lsum-mas > summary { min-height: 44px; }
}
@media (max-width: 768px) {
  /* El resumen ocupaba ~560 px antes de lo propio de cada pestaña: pasa a una fila de casillas. */
  html.ui2 .lead-drawer .lead-summary-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); padding: var(--s-8); }
  html.ui2 .lead-drawer .lead-summary-strip .lsum-cell { min-width: 0; padding: var(--s-8); gap: 2px; }
  html.ui2 .lead-drawer .lead-summary-strip .lsum-cell small { font-size: var(--t-12); line-height: 1.3; white-space: normal; overflow: visible; text-overflow: clip; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
  html.ui2 .lead-drawer .lead-summary-strip .lsum-cell strong { font-size: var(--t-16); }
  html.ui2 .lead-drawer .lead-summary-strip .lsum-cell em { font-size: var(--t-12); }
  html.ui2 .lead-drawer .lead-summary-strip .lsum-progress { grid-column: 1 / -1; }
  /* "Mover a etapa" (7 botones grandes al final de cada pestaña) se abre con "Etapa" del pie. */
  html.ui2 .lead-drawer .stage-picker:not(.ld-abierto) { display: none; }
}

/* ══ Escala de las pantallas del closer (fila 9) ══
   Mi Workspace, Mi perfil, Competencia, Equipo, Mis comisiones y la ficha usaban hasta 17 tamaños de
   letra, espacios impares y rótulos en MAYÚSCULAS espaciadas. Pasan a 12/14/16/20/24/32, espacios
   pares y mayúscula solo inicial. Cuelga de html.rol-closer (lo pone render()) para no tocar las
   pantallas del admin, que comparten estas piezas. Las islas React (ranking y tarjeta de perfil) y
   las tablillas de la cita quedan fuera: salen del bundle y tienen su propia medida. */
html.ui2.rol-closer .content-view .panel-header p,
html.ui2.rol-closer .content-view .muted,
html.ui2.rol-closer .content-view .payouts-hero p,
html.ui2.rol-closer .content-view .panel > p { font-size: var(--t-12); }
html.ui2.rol-closer .content-view h2 { font-size: var(--t-24); margin: 0 0 var(--s-8); }
html.ui2.rol-closer .content-view .ws-dia-cab h2 { margin: 2px 0 0; }
html.ui2.rol-closer .content-view .panel { padding-top: var(--s-12); padding-bottom: var(--s-12); }
html.ui2.rol-closer .content-view .status-pill { padding-left: var(--s-8); padding-right: var(--s-8); }
html.ui2.rol-closer .content-view .kpi-card { padding: var(--s-8) var(--s-12); }
html.ui2.rol-closer .content-view .kpi-card p { margin-bottom: var(--s-4); font-size: var(--t-12); }
html.ui2.rol-closer .content-view .kpi-card strong { font-size: var(--t-24); }
html.ui2.rol-closer .content-view .kpi-card small { font-size: var(--t-12); }
html.ui2.rol-closer .content-view .payouts-hero-metric { font-size: var(--t-32); }
html.ui2.rol-closer .content-view .comp-rules-head h3 { font-size: var(--t-20); }
html.ui2.rol-closer .content-view .comp-pool-label,
html.ui2.rol-closer .content-view .comp-min-rule,
html.ui2.rol-closer .content-view .comp-rules-eyebrow,
html.ui2.rol-closer .content-view .comp-rules-prize-label { font-size: var(--t-12); }
html.ui2.rol-closer .content-view .comp-min-rule { gap: var(--s-4); }
html.ui2.rol-closer .content-view .team-card-id strong { font-size: var(--t-16); }
html.ui2.rol-closer .content-view .team-card-id small,
html.ui2.rol-closer .content-view .lss-item small { font-size: var(--t-12); }
html.ui2.rol-closer .content-view .lss-item { gap: var(--s-4); }
/* Mayúscula solo inicial: los rótulos ya vienen escritos así; solo se quita el text-transform. */
html.ui2.rol-closer .content-view .eyebrow,
html.ui2.rol-closer .content-view .payouts-eyebrow,
html.ui2.rol-closer .content-view .kpi-card p,
html.ui2.rol-closer .content-view .comp-pool-label,
html.ui2.rol-closer .content-view .comp-rules-eyebrow,
html.ui2.rol-closer .content-view .comp-rules-prize-label,
html.ui2.rol-closer .content-view .lss-label,
html.ui2.rol-closer .lead-drawer .lead-metric small,
html.ui2.rol-closer .lead-drawer .lsum-cell small,
html.ui2.rol-closer .lead-drawer h3 { text-transform: none; letter-spacing: 0; }
html.ui2.rol-closer .content-view .eyebrow,
html.ui2.rol-closer .content-view .payouts-eyebrow { font-size: var(--t-12); font-weight: 600; }
/* Ficha del lead */
html.ui2.rol-closer .lead-drawer .lead-metric small { font-size: var(--t-12); }
html.ui2.rol-closer .lead-drawer .chip { padding-left: var(--s-8); padding-right: var(--s-8); }
html.ui2.rol-closer .lead-drawer .chip, html.ui2.rol-closer .lead-drawer .chip span { font-size: var(--t-12); }
html.ui2.rol-closer .lead-drawer .lsum-cell { border-radius: var(--r-12); }
html.ui2.rol-closer .lead-drawer .lsum-driver { font-size: var(--t-12); padding: 4px 12px; }
html.ui2.rol-closer .lead-drawer .sel2-nativo { padding: 8px 12px; }
html.ui2.rol-closer .lead-drawer .pago-seg-btn { padding-top: 0; padding-bottom: 0; }
html.ui2.rol-closer .lead-drawer .commercial-card .muted { font-size: var(--t-12); }
html.ui2.rol-closer .content-view .timeline-item strong { font-size: var(--t-14); }
html.ui2.rol-closer .content-view .timeline-item p { font-size: var(--t-12); }
html.ui2.rol-closer .content-view .comp-rules-list p { font-size: var(--t-12); }
html.ui2.rol-closer .content-view .comp-fairplay { font-size: var(--t-14); }
/* Ficha: pestañas Accesos y Contexto (closer brief, acceso TradingView, prueba en Telegram). */
html.ui2.rol-closer .lead-drawer .lsum-cell strong span { font-size: var(--t-12); }
html.ui2.rol-closer .lead-drawer .muted,
html.ui2.rol-closer .lead-drawer p.muted,
html.ui2.rol-closer .lead-drawer .closer-brief-attrs,
html.ui2.rol-closer .lead-drawer .attr-note,
html.ui2.rol-closer .lead-drawer .contact-next-hint,
html.ui2.rol-closer .lead-drawer .lead-score-reasons li,
html.ui2.rol-closer .lead-drawer .tv-access-info small { font-size: var(--t-12); }
html.ui2.rol-closer .lead-drawer .eyebrow,
html.ui2.rol-closer .lead-drawer .closer-brief-card h4,
html.ui2.rol-closer .lead-drawer .closer-action-left h4,
html.ui2.rol-closer .lead-drawer .closer-action-right h4 { font-size: var(--t-12); text-transform: none; letter-spacing: 0; }
html.ui2.rol-closer .lead-drawer .closer-brief-card h4 { gap: var(--s-4); }
html.ui2.rol-closer .lead-drawer .notice h4 { font-size: var(--t-14); }
html.ui2.rol-closer .lead-drawer .notice { margin-top: var(--s-12); margin-bottom: var(--s-12); }
html.ui2.rol-closer .lead-drawer .tg-trial-icon { font-size: var(--t-20); }
html.ui2.rol-closer .lead-drawer .lead-score-big { font-size: var(--t-16); }
html.ui2.rol-closer .lead-drawer .lead-score-reasons { gap: var(--s-4); }
html.ui2.rol-closer .lead-drawer .contact-now-btn { padding-top: var(--s-12); padding-bottom: var(--s-12); gap: var(--s-8); }
html.ui2.rol-closer .lead-drawer .glass-btn { padding-top: var(--s-8); padding-bottom: var(--s-8); }
html.ui2.rol-closer .lead-drawer .timeline-item { padding: var(--s-8); }
html.ui2.rol-closer .lead-drawer .panel-header p,
html.ui2.rol-closer .lead-drawer .timeline-item small,
html.ui2.rol-closer .lead-drawer .timeline-item p { font-size: var(--t-12); }
html.ui2.rol-closer .lead-drawer .timeline-item small { text-transform: none; letter-spacing: 0; }
html.ui2.rol-closer .lead-drawer .notice,
html.ui2.rol-closer .lead-drawer .tg-trial-titles h4 { font-size: var(--t-14); }
/* Escritorio: tarjetas completas de Equipo, tabla de comisiones, resumen y selector de etapa. */
html.ui2.rol-closer .content-view .tp-avatar span { font-size: var(--t-24); }
html.ui2.rol-closer .content-view .tcm small { font-size: var(--t-12); }
html.ui2.rol-closer .content-view .tp-status-row { gap: var(--s-8); }
html.ui2.rol-closer .content-view .em-table { font-size: var(--t-12); }
html.ui2.rol-closer .content-view .em-table td strong { font-size: var(--t-14); }
html.ui2.rol-closer .content-view .em-table td { padding-top: var(--s-8); padding-bottom: var(--s-8); }
html.ui2.rol-closer .lead-drawer .lsum-cell { gap: var(--s-4); }
html.ui2.rol-closer .lead-drawer .lsum-cell small,
html.ui2.rol-closer .lead-drawer .lsum-cell em { font-size: var(--t-12); }
html.ui2.rol-closer .lead-drawer .stage-option { font-size: var(--t-14); }
html.ui2.rol-closer .lead-drawer .stage-option small { font-size: var(--t-12); }

/* ── Tiempo conectado (2026-10-29): cifra de 24 h en el pie y bitácora por closer en Monitoreo ── */
html.ui2 .foot-conexion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px var(--s-8); margin: var(--s-24) 0 0; font-size: var(--t-14); line-height: 20px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
html.ui2 .foot-conexion strong { color: var(--text); font-weight: 700; }
html.ui2 .foot-conexion small { flex-basis: 100%; font-size: var(--t-12); color: var(--faint); }
html.ui2 .foot-conexion .fc-punto { width: 8px; height: 8px; border-radius: 1000px; background: var(--ok); flex: none; }
@media (max-width: 768px) {
  html.ui2 .app-footer .foot-conexion { margin-top: var(--s-16); }
}

html.ui2 .tc-bitacora .panel-header { align-items: flex-start; gap: var(--s-12); }
html.ui2 .tc-bitacora .panel-header p { max-width: 720px; }
html.ui2 .tcb-lista { display: flex; flex-direction: column; }
html.ui2 .tcb-fila { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 2fr) minmax(0, 1fr); align-items: center; gap: var(--s-16); padding: var(--s-12) 0; border-top: 1px solid var(--line-soft); }
html.ui2 .tcb-fila:first-child { border-top: 0; }
html.ui2 .tcb-quien { display: flex; align-items: center; gap: var(--s-8); min-width: 0; }
html.ui2 .tcb-quien strong { font-size: var(--t-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui2 .tcb-dato { display: flex; flex-direction: column; min-width: 0; }
html.ui2 .tcb-dato b { font-size: var(--t-14); line-height: 20px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.ui2 .tcb-dato small { font-size: var(--t-12); color: var(--faint); }
html.ui2 .tcb-tira { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); align-items: end; gap: 2px; height: 32px; }
html.ui2 .tcb-h { display: block; height: max(2px, var(--alto)); border-radius: 2px; background: var(--accent); }
html.ui2 .tcb-h.cero { height: 2px; background: var(--line-soft); }
html.ui2 .tcb-nota { margin: var(--s-12) 0 0; font-size: var(--t-12); color: var(--faint); }
@media (max-width: 768px) {
  html.ui2 .tcb-fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "quien d24" "tira tira" "d7 ult"; gap: var(--s-8) var(--s-12); }
  html.ui2 .tcb-quien { grid-area: quien; }
  html.ui2 .tcb-24 { grid-area: d24; text-align: right; }
  html.ui2 .tcb-tira { grid-area: tira; }
  html.ui2 .tcb-7 { grid-area: d7; }
  html.ui2 .tcb-ult { grid-area: ult; text-align: right; }
}