/* v2-skin.css — Deck Do! reskin Claude Design. Carga despues del style inline. */

/* ===== EL NAIPE + CHIPS (.face.front / .nf-card / .cn / .cnbr / .wmk2 / .nt / .chipgrid / .pill* / .track / .play-row / .btn.play) ===== */
/* ════════════════════════════════════════════════════════════════
   Deck Do! · v2-skin.css — ÁREA: EL NAIPE + CHIPS
   Re-estila las clases REALES del PWA (.face.front / .nf-card / .cn /
   .cnbr / .wmk2 / .nt / .chipgrid / .pill* / .track / .play-row /
   .btn.play) al look de _shared.css (.naipe / .pill--*).
   Solo tokens var(--*). Carga DESPUÉS del <style> inline.
   El wrapper .card.naipe ya es transparente y --cc lo setea el JS
   (--cc:var(--pri-N)) → respetamos ese cableado.
   ════════════════════════════════════════════════════════════════ */

/* ── LA CARA = el cuerpo del naipe (= .naipe del diseño) ────────────
   El diseño usa radial cream→card, borde fino, radius-lg, sombra-card
   y un marco interno (::after). En la app el visual vive en .face.front
   (fondo + borde + sombra) y el marco interno en .nf-card::after. */
.card.naipe .face.front{
  background:radial-gradient(125% 65% at 50% -5%,var(--cream-50),var(--surface-card));
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  min-height:268px;
}
/* relleno general de la cara (el diseño: padding 42px 16px 16px sobre
   el naipe; acá el padding lo lleva .nf-body, lo ajustamos abajo). */
.card.naipe .nf-body{
  padding:40px 18px 16px;
}
.card.naipe .nf-num{
  font:var(--type-pixel);font-size:11px;
  color:var(--text-muted);margin-bottom:6px;letter-spacing:var(--tracking-pixel);
}

/* marco interno (= .naipe::after del diseño: 1.5px tintado en --cc) */
.card.naipe .nf-card::after{
  content:"";position:absolute;inset:8px;
  border:1.5px solid color-mix(in srgb,var(--cc) 24%,var(--line));
  border-radius:calc(var(--radius-lg) - 9px);
  pointer-events:none;z-index:1;
}

/* ── PIPS DE ESQUINA (= .naipe__pip del diseño) ───────────────────── */
.card.naipe .nf-card .cn,
.card.naipe .nf-card .cnbr{
  color:var(--cc);z-index:2;
  font-family:var(--font-display);
  display:flex;flex-direction:column;align-items:center;line-height:.9;
}
.card.naipe .nf-card .cn{top:12px;left:14px;font:800 15px var(--font-display)}
.card.naipe .nf-card .cnbr{bottom:12px;right:14px;font:800 15px var(--font-display)}
.card.naipe .nf-card .cn i,
.card.naipe .nf-card .cnbr i{font-style:normal;font-size:15px;margin-top:1px}

/* ── MARCA DE AGUA (= .naipe__wmk del diseño) ─────────────────────── */
.card.naipe .nf-card .wmk2{
  right:0;bottom:2px;
  font-size:130px;line-height:.7;z-index:0;
  font-family:var(--font-display);
  color:color-mix(in srgb,var(--cc) 7%,transparent);
}

/* ── TÍTULO (= .naipe__title del diseño) ──────────────────────────── */
.card.naipe .nt{
  position:relative;z-index:1;
  font:var(--fw-bold) 17px/1.2 var(--font-display);
  color:var(--text-strong);margin:0 0 11px;
  letter-spacing:-.01em;text-wrap:pretty;
}

/* ── GRILLA DE CHIPS (= .pills del diseño) ────────────────────────── */
.card.naipe .chipgrid{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:7px;
}

/* ── CHIPS / PILLS base (= .pill del diseño) ──────────────────────── */
.card.naipe .pill{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:var(--radius-pill);
  padding:5px 11px;
  font:var(--fw-semibold) 12px var(--font-body);
  white-space:nowrap;
  border:var(--border-w) solid transparent;
  background:var(--surface-card);color:var(--text-body);
}
.card.naipe .pill .ic{width:13px;height:13px;flex:none}
.card.naipe .pill .dot{width:8px;height:8px;border-radius:50%;flex:none}

/* prioridad / motivo · estrella dorada (= .pill--pri / app .pill.rsn) */
.card.naipe .pill.rsn{
  background:color-mix(in srgb,var(--mustard) 22%,var(--cream-50));
  color:color-mix(in srgb,var(--mustard) 82%,var(--navy-900));
  border-color:color-mix(in srgb,var(--mustard) 45%,transparent);
}
.card.naipe .pill.rsn .ic{color:color-mix(in srgb,var(--mustard) 80%,var(--navy-900))}

/* categoría · dot + área (= .pill--cat) */
.card.naipe .pill.cat{
  background:var(--surface-card);color:var(--text-body);
  border-color:var(--line);
}

/* criticidad · sólido en color de prioridad (= .pill--crit, set por .pri-pN) */
.card.naipe .pill.crit{color:#fff;border-color:transparent}
.card.naipe .pill.crit.pri-p1{background:var(--pri-1)}
.card.naipe .pill.crit.pri-p2{background:var(--pri-2)}
.card.naipe .pill.crit.pri-p3{background:color-mix(in srgb,var(--pri-3) 88%,var(--navy-700))}
.card.naipe .pill.crit.pri-p4{background:var(--pri-4)}

/* tiempo · reloj (= .pill--time) */
.card.naipe .pill.time{
  background:var(--surface-card);color:var(--text-body);
  border-color:var(--line);
}
.card.naipe .pill.time .ic{color:var(--text-muted)}

/* impacto · verde (= .pill--impact) */
.card.naipe .pill.impact{
  background:color-mix(in srgb,var(--leaf) 15%,var(--cream-50));
  color:color-mix(in srgb,var(--leaf) 72%,var(--navy-900));
  border-color:color-mix(in srgb,var(--leaf) 38%,transparent);
}
.card.naipe .pill.impact .ic{color:color-mix(in srgb,var(--leaf) 72%,var(--navy-900))}

/* en foco · sólido verde (= .pill--foco) */
.card.naipe .pill.foco{
  background:var(--leaf);color:#fff;border-color:transparent;
}
.card.naipe .pill.foco .dot{background:#fff}

/* menciones · dorado suave (= .pill--mention) */
.card.naipe .pill.men{
  background:color-mix(in srgb,var(--mustard) 18%,var(--cream-50));
  color:color-mix(in srgb,var(--mustard) 80%,var(--navy-900));
  border-color:color-mix(in srgb,var(--mustard) 40%,transparent);
}
.card.naipe .pill.men .ic{color:color-mix(in srgb,var(--mustard) 80%,var(--navy-900))}

/* fecha · celeste (= .pill--date) */
.card.naipe .pill.date{
  background:color-mix(in srgb,var(--sky) 14%,var(--cream-50));
  color:color-mix(in srgb,var(--sky) 66%,var(--navy-900));
  border-color:color-mix(in srgb,var(--sky) 38%,transparent);
}
.card.naipe .pill.date .ic{color:color-mix(in srgb,var(--sky) 66%,var(--navy-900))}

/* ── BARRA DE PROGRESO (= .naipe__progress .track del diseño) ─────── */
.card.naipe .track{
  position:relative;z-index:1;
  height:7px;border-radius:var(--radius-pill);
  background:var(--surface-sunken);
  overflow:hidden;margin:13px 0 0;box-shadow:none;
}
.card.naipe .track .fill{
  height:100%;border-radius:var(--radius-pill);
  /* la app inyecta background:colorPct(pct) inline → no lo pisamos */
}

/* ── FILA DE JUGAR (= .naipe__progress spacer + .btn--play) ───────── */
.card.naipe .nf-grow{flex:1;min-height:10px}
.card.naipe .nf-card .play-row{
  position:relative;z-index:1;
  display:flex;gap:8px;align-items:center;margin-top:13px;
}

/* botón Jugar carta (= .naipe .btn--play del diseño) */
.card.naipe .play-row .btn.play{
  flex:1;width:auto;margin:0;
  font:var(--fw-extra) 14.5px var(--font-body);
  color:#fff;background:var(--orange);
  border-radius:var(--radius-md);
  padding:13px 15px;
  box-shadow:0 4px 0 0 color-mix(in srgb,var(--orange) 55%,black),var(--glow-accent);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast);
}
.card.naipe .play-row .btn.play:active{
  transform:translateY(1px) scale(.99);
  box-shadow:0 1px 0 0 color-mix(in srgb,var(--orange) 55%,black),var(--glow-accent);
}
/* botón posponer secundario (💤) junto a Jugar */
.card.naipe .play-row .iconbtn{
  width:44px;height:44px;flex:none;border-radius:var(--radius-md);
  border:var(--border-w) solid var(--line);
  background:var(--surface-card);color:var(--text-muted);
}
.card.naipe .play-row .iconbtn:hover{color:var(--text-body)}

/* ── ESTADO EN FOCO (= .naipe.is-foco: borde verde) ───────────────── */
.swipe.focus .face.front{
  outline:none;
  box-shadow:var(--shadow-card),0 0 0 2px color-mix(in srgb,var(--leaf) 55%,transparent);
}
/* selección (sin equivalente directo en diseño; lo dejamos como anillo naranja sólido) */
.swipe.sel .face.front{
  outline:none;
  box-shadow:var(--shadow-card),0 0 0 2px var(--orange);
}

/* ── ESTADO POSPUESTA (= .naipe.is-snoozed) ───────────────────────── */
.card.naipe.done .face.front{opacity:.66}

/* ── MANO: naipes verticales en grilla (= grilla .hand del diseño) ── */
/* el diseño usa borde fino var(--line); el port actual usa navy grueso.
   Lo igualamos al look del diseño (marco fino, no navy-800). */
.mano .face.front,
.mano .face.back{border:var(--border-w) solid var(--line)}

/* ── FILAS DENSAS (.as-rows): chips compactos como en el diseño ───── */
.as-rows .pill{padding:3px 8px;font-size:11px}
.as-rows .nf-card .cn{font-size:13px}

/* ===== SHELL + NAV + VitalityBar ===== */
/* ════════════════════════════════════════════════════════════════
   v2-skin.css — ÁREA: SHELL + NAV + VitalityBar
   Re-estila las clases REALES de la app (.wrap / #nav / nav button /
   .nav-wm / .nav-you / .vita / .vbar / .vtrack ...) al look de
   Claude Design (_shared.css → .app/.side/.navitem/.bottomnav/.vbar).
   Carga DESPUÉS del <style> inline; iguala/supera su specificidad.
   SOLO tokens var(--*). Sin JS, sin cambios de HTML.
   ════════════════════════════════════════════════════════════════ */

/* ── tokens derivados que usa el diseño (XP arcoíris + palos) ──
   (definidos por si _shared.css no se linkea; idempotente) */
:root{
  --xp-rainbow: linear-gradient(90deg,var(--red),var(--orange),var(--mustard),var(--leaf),var(--sky),var(--purple));
}

/* ════════════════════════════════════════════════════════════════
   SHELL  ·  .wrap (= .app del diseño): fondo cálido vivo + scroll suave
   ════════════════════════════════════════════════════════════════ */
.wrap{
  background:
    radial-gradient(120% 80% at 50% -10%, var(--vita-warm), transparent 60%),
    var(--vita-surface, var(--surface-app));
  transition:background var(--dur-vitality) var(--ease-out);
}
header h1{font:var(--fw-extra) 22px/.9 var(--font-display);letter-spacing:-.01em;color:var(--text-strong)}
.hdr-title{font:var(--type-title);color:var(--text-strong)}
.gear{color:var(--text-muted);border-radius:var(--radius-md);transition:background var(--dur-fast),color var(--dur-fast)}
.gear:hover{color:var(--text-body);background:var(--surface-raised)}

/* ════════════════════════════════════════════════════════════════
   BOTTOM NAV (teléfono, <980px)  ·  nav = .bottomnav del diseño
   Tabs ligeras, sin tarjetas: activo = color de acento (no fondo).
   ════════════════════════════════════════════════════════════════ */
nav{
  gap:4px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--vita-surface, var(--surface-app)) 78%, transparent);
}
nav button{
  flex:1;background:none;border:0;box-shadow:none;
  color:var(--text-muted);
  padding:7px 2px;border-radius:var(--radius-md);
  font:var(--fw-semibold) 10px var(--font-body);
  gap:3px;
  transition:color var(--dur-fast),transform var(--dur-fast) var(--ease-out);
}
nav button .ni-ic{width:21px;height:21px}
nav button:active{transform:translateY(1px) scale(.98)}
/* activo = solo color de acento + glow del ícono (look del diseño) */
nav button.active{
  background:none;border-color:transparent;box-shadow:none;
  color:var(--accent);
}
nav button.active .ni-ic{
  filter:drop-shadow(0 2px 5px color-mix(in srgb, var(--accent) 45%, transparent));
}
/* pestaña central "Recomendados" siempre acentuada */
nav button[data-tab="today"]{color:var(--accent)}
nav button[data-tab="today"].active{color:var(--accent)}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR (escritorio ≥980px)  ·  nav = .side · nav button = .navitem
   Panel crema a toda altura, ítems redondeados, activo sólido naranja.
   ════════════════════════════════════════════════════════════════ */
@media(min-width:980px){
  nav{
    background:var(--surface-card);
    border-right:var(--border-w) solid var(--line);
    gap:3px;padding:22px 14px 16px;
  }
  /* wordmark = .brand .wm del diseño */
  nav .nav-wm{
    font:var(--fw-extra) 22px/.82 var(--font-display);
    letter-spacing:-.01em;color:var(--text-strong);
    padding:4px 6px 18px;
  }
  nav .nav-wm b{color:var(--accent)}

  /* ítems = .navitem */
  nav button{
    width:100%;gap:12px;
    padding:10px 12px;border-radius:var(--radius-md);
    background:none;border:0;box-shadow:none;
    color:var(--text-muted);
    font:var(--fw-semibold) 14.5px var(--font-body);
    text-align:left;justify-content:flex-start;
    transition:background var(--dur-fast),color var(--dur-fast);
  }
  nav button .ni-ic{width:19px;height:19px}
  nav button:hover{background:var(--surface-raised);color:var(--text-body)}
  /* activo = sólido en acento (orange), texto blanco — .navitem.is-on */
  nav button.active{
    background:var(--accent);color:var(--accent-ink);box-shadow:none;
  }
  nav button.active .ni-ic{filter:none}
  /* central destaca aunque no esté activa, pero al activarse usa acento sólido */
  nav button[data-tab="today"]{color:var(--accent)}
  nav button[data-tab="today"].active{background:var(--accent);color:var(--accent-ink)}

  /* perfil al pie = .side__you */
  nav .nav-you{
    margin-top:auto;gap:10px;padding:9px;
    border-radius:var(--radius-md);
    background:var(--surface-raised);
    border:var(--border-w) solid var(--line);
    transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
  }
  nav .nav-you .ny-av{
    width:36px;height:36px;border-radius:50%;
    background:var(--lavender);overflow:hidden;
    display:grid;place-items:center;flex:none;
  }
  nav .nav-you .ny-av img{width:32px}
  nav .nav-you .ny-nm{
    font:var(--fw-semibold) 13.5px var(--font-body);color:var(--text-body);
  }
  nav .nav-you .ny-lv{
    font:var(--type-tag);color:var(--text-muted);
    display:flex;align-items:center;gap:4px;
  }
  nav .nav-you .ny-lv svg{width:11px;height:11px;color:var(--accent)}
  nav .nav-you:hover{border-color:var(--accent);box-shadow:var(--shadow-xs)}
  nav .nav-you:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

  /* #navVer (versión, abajo-izquierda en el sidebar): atenuado y centrado */
  #navVer{color:var(--text-faint)!important}
}

/* ════════════════════════════════════════════════════════════════
   VITALITYBAR  ·  .vita (= .vbar header navy del diseño)
   Header navy vivo: nivel pixel mustard · XP arcoíris · racha.
   Glow reactivo a vitalidad (encendido / pleno).
   ════════════════════════════════════════════════════════════════ */
.vita{
  position:relative;overflow:hidden;
  background:var(--surface-ink);color:var(--text-on-ink);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-md);
  padding:14px 18px;margin:6px 0 14px;
  transition:box-shadow var(--dur-vitality) var(--ease-out);
}
/* glow reactivo a vitalidad (igual que .app[...] .vbar del diseño) */
[data-vitality="encendido"] .vita,
.wrap[data-vitality="encendido"] .vita{
  box-shadow:var(--shadow-md),0 0 0 3px color-mix(in srgb, var(--mustard) 28%, transparent);
}
[data-vitality="pleno"] .vita,
.wrap[data-vitality="pleno"] .vita{
  box-shadow:var(--shadow-lg),0 0 34px color-mix(in srgb, var(--mustard) 50%, transparent);
}
.vita .glowbg{
  position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(80% 120% at 18% 30%, color-mix(in srgb, var(--mustard) 55%, transparent), transparent 60%);
}

/* fila superior: mascota · nivel · stats */
.vita-top{display:flex;align-items:center;gap:16px;position:relative;z-index:2}
.mascot-wrap{
  width:60px;height:60px;flex:none;
  border-radius:var(--radius-md);
  display:grid;place-items:center;
  background:var(--cream-50);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.15);
  overflow:hidden;
}

/* nivel = .vbar__lvl (pixel mustard con sombra dura) */
.vlevel{flex:1;min-width:0}
.vlevel .lvl{
  font:var(--type-pixel-lg);color:var(--mustard);
  text-shadow:0 2px 0 rgba(0,0,0,.28);
}
.vlevel .sub{
  font:var(--fw-semibold) 13px var(--font-body);
  color:rgba(255,255,255,.72);margin-top:3px;
}

/* racha / XP de hoy = .vbar__streak (chips sobre navy) */
.vstats{display:flex;gap:9px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.vchip{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.12);
  border:var(--border-w) solid rgba(255,255,255,.16);
  border-radius:var(--radius-pill);padding:5px 10px;
  font:var(--type-tag);color:#fff;white-space:nowrap;
}
.vchip .ic{width:16px;height:16px;flex:none;color:var(--orange)}
.vchip.racha .ic{color:var(--orange)}
.vchip .px{font-family:var(--font-pixel);color:var(--mustard)}
.vchip.racha .px{font-size:14px;color:var(--mustard)}

/* barra de energía interna = .vbar__track / .vbar__fill, fill arcoíris */
.vbar{position:relative;z-index:2;margin-top:13px}
.vbar .cap{
  display:flex;justify-content:space-between;
  font:var(--type-tag);color:rgba(255,255,255,.72);margin-bottom:6px;
}
.vbar .cap .px{font-family:var(--font-pixel);color:var(--mustard)}
.vtrack{
  height:11px;border-radius:var(--radius-pill);
  background:rgba(0,0,0,.32);overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.45);
}
.vfill{
  height:100%;border-radius:var(--radius-pill);
  background:var(--xp-rainbow);background-size:180% 100%;
  box-shadow:0 0 12px color-mix(in srgb, var(--mustard) 45%, transparent);
  transition:width var(--dur-vitality) var(--ease-spring);
}

/* tira de reposo (descanso, anti-culpa) sobre navy */
.vita-reposo{
  position:relative;z-index:2;margin-top:12px;
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.08);
  border:var(--border-w) solid rgba(255,255,255,.14);
  border-radius:var(--radius-md);padding:10px 12px;
  font:var(--type-caption);color:rgba(255,255,255,.85);
}

/* ════════════════════════════════════════════════════════════════
   Override de reglas inline con !important que pisarían el look
   (la app fuerza font-body en lvl/px; el diseño quiere pixel en
   nivel y números). Igualamos specificidad + !important para ganar.
   ════════════════════════════════════════════════════════════════ */
.vlevel .lvl{font-family:var(--font-pixel)!important;font-weight:var(--fw-regular)!important;letter-spacing:var(--tracking-pixel)!important}
.vchip .px,
.vchip.racha .px,
.vbar .cap .px{font-family:var(--font-pixel)!important;font-weight:var(--fw-regular)!important;letter-spacing:var(--tracking-pixel)!important}

/* ===== Recomendados / Repartidor (chrome): título "tu mano de hoy", chips de filtro (.catcols/.catcol), acciones (Modo bajo / Otra tanda), VitalityBar (.gamebar), grilla .mano y el chip "te elegí por esto" (.pill.rsn) de cada naipe. ===== */
/* ════════════════════════════════════════════════════════════════
   v2-skin.css · ÁREA: Recomendados / Repartidor (chrome)
   Reskin SOLO-CSS de las clases REALES de la app al look de
   recomendados.html (_shared.css). Carga DESPUÉS del <style> inline,
   así igualar specificidad basta para ganar. Solo var(--*) de tokens
   (vitalidad + modo bajo siguen repintando).
   ════════════════════════════════════════════════════════════════ */

/* ── FILTROS DE CATEGORÍA (.catcols/.catcol) → look .chips/.chip del diseño ──
   El diseño: chip pill crema, borde hairline, activo navy sólido. */
.catcols{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 2px 8px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.catcols::-webkit-scrollbar{display:none}
.catcol{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-pill);
  padding:8px 13px;
  color:var(--text-body);
  font:var(--fw-semibold) 13px var(--font-body);
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);
}
.catcol:hover{border-color:var(--line-strong)}
.catcol.on{
  background:var(--navy-800);
  border-color:transparent;
  color:var(--text-on-ink);
}

/* ── CABECERA "Tu mano de hoy" (.todayhead / #recoTitle) → .section-head h2 ── */
.todayhead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin:4px 2px 14px;
}
.todayhead #recoTitle{
  font:var(--type-title);
  color:var(--text-strong);
  margin:0;
  display:flex;
  align-items:center;
  gap:9px;
}

/* acciones de mano: "Modo bajo de energía" (verde sage) · "Otra tanda" (secundario)
   replican .btn--leaf y .btn--sec del diseño. Ganan al .btn sec inline por
   specificidad (id + clase). */
.todayhead #recoActions .btn,
#recoActions .btn.sec{
  width:auto;
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:var(--radius-md);
  padding:11px 15px;
  font:var(--fw-bold) 13px var(--font-body);
}
/* Otra tanda = secundario (crema + hairline + sombra suave) */
#recoActions #otraTanda{
  background:var(--surface-card);
  color:var(--text-body);
  border:var(--border-w) solid var(--line);
  box-shadow:var(--shadow-xs);
}
/* Modo bajo de energía = chip verde sage (.btn--leaf) */
#recoActions #modoBajo{
  background:color-mix(in srgb,var(--leaf) 14%,var(--surface-card));
  color:color-mix(in srgb,var(--leaf) 78%,black);
  border:var(--border-w) solid color-mix(in srgb,var(--leaf) 36%,transparent);
  box-shadow:none;
}

/* ── GRILLA "la mano" (.mano) → .hand del diseño (gap 16, naipes verticales) ── */
.mano{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(186px,1fr));
  gap:16px;
  align-items:start;
}
.mano .card.naipe{margin:0}
@media(max-width:520px){
  .mano{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
}

/* ── VITALITYBAR (.gamebar) → look del diseño .vbar (header vivo) ──
   La app la pinta crema con glow; el diseño la quiere navy. La pasamos a
   superficie navy con glow de vitalidad y barra arcoíris de XP. */
.gamebar{
  position:relative;
  overflow:hidden;
  background:var(--surface-ink);
  color:var(--text-on-ink);
  border:0;
  border-radius:var(--radius-xl);
  padding:14px 18px 14px 90px;
  margin:6px 0 14px;
  box-shadow:var(--shadow-md),var(--vita-glow);
  transition:box-shadow var(--dur-vitality) var(--ease-out);
}
[data-vitality="encendido"] .gamebar{
  box-shadow:var(--shadow-md),0 0 0 3px color-mix(in srgb,var(--mustard) 28%,transparent);
}
[data-vitality="pleno"] .gamebar{
  box-shadow:var(--shadow-lg),0 0 34px color-mix(in srgb,var(--mustard) 50%,transparent);
}
/* mascota-carta a la izquierda, con marco crema tipo avatar del diseño */
.gamebar .gb-mascot{
  left:14px;
  width:60px;
  height:60px;
  border-radius:var(--radius-md);
  background:var(--cream-50);
  padding:5px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.15);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
/* nivel en pixel dorado · racha · texto sobre tinta */
.gamebar .gb-lvl{
  font:var(--type-pixel-lg);
  color:var(--mustard);
  text-shadow:0 2px 0 rgba(0,0,0,.28);
}
.gamebar .gb-racha{
  color:var(--mustard);
  font:var(--fw-bold) 13px var(--font-body);
}
.gamebar .gb-hoy{color:color-mix(in srgb,var(--leaf) 70%,#fff);font-weight:var(--fw-bold)}
.gamebar .gb-sub{color:rgba(255,255,255,.72);font:var(--fw-semibold) 12px var(--font-body)}
/* pista de XP hundida + relleno arcoíris (como .vbar__track / .vbar__fill) */
.gamebar .gb-bar{
  height:11px;
  background:rgba(0,0,0,.32);
  border:0;
  border-radius:var(--radius-pill);
  overflow:hidden;
  margin:9px 0 6px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.45);
}
.gamebar .gb-fill{
  height:100%;
  border-radius:var(--radius-pill);
  background:var(--xp-rainbow);
  background-size:180% 100%;
  box-shadow:0 0 12px color-mix(in srgb,var(--mustard) 45%,transparent);
}

/* ── CHIP "te elegí por esto" por carta (.pill.rsn = motivoLbl del Repartidor) ──
   El diseño lo muestra como .naipe__reason: chip verde sage en pixel.
   Es el equivalente real al "te elegí por esto" de recomendados.html. */
.nf-card .chipgrid .pill.rsn{
  background:color-mix(in srgb,var(--leaf) 13%,var(--cream-50));
  border:var(--border-w) solid color-mix(in srgb,var(--leaf) 32%,transparent);
  color:color-mix(in srgb,var(--leaf) 78%,black);
  font:var(--type-pixel);
  font-size:11px;
  letter-spacing:.03em;
  padding:5px 11px;
}
.nf-card .chipgrid .pill.rsn .ic{color:color-mix(in srgb,var(--leaf) 78%,black)}

/* ── NOTA modo bajo: la app inyecta un aviso en #tandaMsg (.card.insight.pos)
   cuando el modo bajo está activo. Lo acercamos a la .lowpower-note del diseño
   (panel verde sage suave) cuando el shell está en data-mode="bajo". ── */
[data-mode="bajo"] #tandaMsg .card.insight.pos{
  background:color-mix(in srgb,var(--leaf) 12%,var(--surface-card));
  border:var(--border-w) solid color-mix(in srgb,var(--leaf) 28%,transparent);
  border-radius:var(--radius-lg);
  box-shadow:none;
  color:var(--text-body);
}
[data-mode="bajo"] #tandaMsg .card.insight.pos .detalle{color:var(--text-body)}

/* ===== Capturar (renderCapture) ===== */
/* ============================================================
   v2-skin — ÁREA: CAPTURAR (renderCapture)
   Re-estila las clases REALES de la app al look de capturar.html
   del handoff de Claude Design. Solo var(--*) de deckdo-tokens.css.
   Carga DESPUÉS del <style> inline → misma specificidad gana.
   ============================================================ */

/* ---- Mascota + cabecera (cap-mw / h2 / sub) ---- */
.cap-screen{padding-top:6px}
.cap-mw{width:120px;height:120px}
.cap-mw img{width:108px;filter:drop-shadow(0 8px 12px color-mix(in srgb,var(--navy-800) 20%,transparent))}
.cap-screen h2{font:var(--fw-bold) 22px/1.2 var(--font-display);color:var(--text-strong);margin:8px 0 4px}
.cap-screen .sub{font:var(--type-caption);color:var(--text-muted);max-width:340px;margin:0 0 20px}

/* ---- Campo grande de captura (.cap-field / .cap-input) ----
   Look del diseño .capture: tarjeta crema, borde grueso, radio xl,
   sombra md. El primer campo (título grande) es el protagonista. */
.cap-field{width:100%;text-align:left;margin-bottom:14px}
.cap-field label{font:var(--type-pixel);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:7px}
.cap-input{width:100%;background:var(--surface-card);
  border:var(--border-w-bold) solid var(--line);border-radius:var(--radius-xl);
  padding:16px 18px;font:var(--type-body);color:var(--text-body);outline:none;
  box-shadow:var(--shadow-md);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.cap-input::placeholder{color:var(--text-muted)}
.cap-input.big{font-weight:var(--fw-bold);font-size:20px;min-height:64px}
textarea.cap-input{min-height:96px;resize:vertical;border-width:var(--border-w);
  box-shadow:var(--shadow-sm)}
.cap-input:focus{border-color:color-mix(in srgb,var(--accent) 60%,var(--line));
  box-shadow:var(--shadow-md),var(--glow-accent)}

/* ---- Botón "Soltar la carta" (#send) = .btn--play del diseño ----
   Naranja, peso extra, sombra dura naranja + glow. El submit
   es lo más fuerte de la pantalla. */
.btn.play#send{width:100%;justify-content:center;
  background:var(--orange);color:#fff;font-weight:var(--fw-extra);
  font:var(--fw-extra) 17px var(--font-body);border:0;
  border-radius:var(--radius-md);padding:15px;
  box-shadow:0 4px 0 0 color-mix(in srgb,var(--orange) 58%,black),var(--glow-accent);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast)}
.btn.play#send:not(:disabled):active{transform:translateY(1px) scale(.99);
  box-shadow:0 1px 0 0 color-mix(in srgb,var(--orange) 58%,black),var(--glow-accent)}
.btn.play#send:disabled{opacity:.5;box-shadow:0 4px 0 0 color-mix(in srgb,var(--orange) 40%,black);
  cursor:not-allowed}

/* hint debajo del submit */
.cap-screen .hint{font:var(--type-caption);color:var(--text-muted)}

/* ---- Últimas soltadas (.cap-recents / .cap-rh / .rchip) ----
   Encabezado tipo kicker; chips estilo .chip del diseño. */
.cap-recents{width:100%;margin-top:24px;text-align:left}
.cap-rh{font:var(--type-pixel);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:11px}
.rchip{display:inline-flex;align-items:center;gap:7px;
  background:var(--surface-card);border:var(--border-w) solid var(--line);
  border-radius:var(--radius-pill);padding:7px 13px;
  font:var(--type-caption);color:var(--text-body);
  margin:0 8px 8px 0;box-shadow:var(--shadow-xs)}
.rchip .d{width:8px;height:8px;border-radius:50%;background:var(--mustard)}
.rchip .d.ok{background:var(--leaf)}
.rchip.proc{opacity:.85}
.rspin{display:inline-block;width:12px;height:12px;
  border:2px solid color-mix(in srgb,var(--navy-800) 22%,transparent);
  border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite}

/* ---- Carta voladora (.flycard) — al soltar ---- */
.flycard{width:92px;height:56px;border-radius:var(--radius-md);
  background:var(--surface-card);border:var(--border-w-bold) solid var(--line);
  box-shadow:var(--shadow-lg);font-size:24px}

/* ============================================================
   Modal de AMBIGÜEDAD (.modal.cap-amb) — look .sheet del diseño
   ============================================================ */
.cap-amb{max-width:380px;background:var(--surface-card);
  border:var(--border-w) solid var(--line);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);padding:22px}
.cap-amb h3{font:var(--type-section);color:var(--text-strong);
  margin:0 0 4px;display:flex;align-items:center;gap:9px}
.cap-amb .hint{font:var(--type-caption);color:var(--text-muted)}

/* título limpio destacado */
.cap-amb .ca-title{font:var(--fw-bold) 15px var(--font-body);color:var(--text-strong);
  background:var(--surface-raised);border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);padding:11px 13px;margin:2px 0}

/* motivo de la IA — chip mostaza suave */
.cap-amb .ca-why{font:var(--type-caption);
  color:color-mix(in srgb,var(--mustard) 80%,black);
  background:color-mix(in srgb,var(--mustard) 14%,var(--surface-card));
  border:var(--border-w) solid color-mix(in srgb,var(--mustard) 32%,transparent);
  border-radius:var(--radius-md);padding:9px 12px;margin:8px 0 2px}

/* grilla de selects */
.cap-amb .ca-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:8px}
.cap-amb .ca-grid .full{grid-column:1 / -1}
.cap-amb .ca-grid label{display:block;font:var(--type-pixel);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin:0 0 6px}

/* botones del modal: Confirmar = .btn--play ; Dejar para después = .btn--sec */
.cap-amb #caOk{background:var(--orange);color:#fff;font-weight:var(--fw-extra);
  border:0;border-radius:var(--radius-md);
  box-shadow:0 4px 0 0 color-mix(in srgb,var(--orange) 58%,black),var(--glow-accent)}
.cap-amb #caOk:not(:disabled):active{transform:translateY(1px) scale(.99);
  box-shadow:0 1px 0 0 color-mix(in srgb,var(--orange) 58%,black),var(--glow-accent)}
.cap-amb #caLater{background:var(--surface-card);color:var(--text-body);
  border:var(--border-w) solid var(--line);box-shadow:var(--shadow-xs)}

/* ===== En progreso + Modo Tarea/Foco (renderProgreso + runner/checklist + pasos) ===== */
/* ════════════════════════════════════════════════════════════════════════
   DECK DO! · v2-skin · ÁREA: EN PROGRESO + MODO TAREA/FOCO
   Reskin SOLO-CSS sobre las clases reales de la app. Carga DESPUÉS del
   <style> inline → misma specificidad gana. Objetivo: en-progreso.html.
   Mapeo design→app:
     .steplist            → .checklist.runner (paso a paso, un paso por vez)
     .steplist li.now     → .checklist.runner li:has(.pchk:not(:checked))   [1er no-tildado]
     .steplist li.done    → .checklist.runner li:has(.pchk:checked)         [se ocultan]
     "Modo foco" toggle   → .foco-bar / .foco-toggle
     .naipe.is-snoozed    → #listPausa .card.naipe (cartas en pausa)
     .section-head        → encabezados h2 + .hint de renderProgreso
   Pomodoro ring (.pomodoro) del diseño: NO existe en el markup de la app → ver notas.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. ENCABEZADOS DE SECCIÓN (En progreso / En pausa) ──────────────────
   El diseño usa .section-head: título display + sub muted. Acá re-estilo los
   h2 inline de renderProgreso y su contador .hint para igualar el tono. */
#listProg, #listPausa { margin-top: 6px; }

main > h2:has(#cuProg),
main > h2:has(#cuPausa){
  font: var(--type-title);
  color: var(--text-strong);
  letter-spacing: -.01em;
  display: flex;
  align-items: baseline;
  gap: 9px;
}
#cuProg, #cuPausa{
  font: var(--type-pixel);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: var(--fw-bold);
}
/* nota anti-culpa del pie (máx 3/5) en tono caption del diseño */
main > p.hint{
  font: var(--type-caption);
  color: var(--text-muted);
}

/* ── 2. CARTAS EN PAUSA = estado is-snoozed del diseño ───────────────────
   El diseño atenúa la carta pausada (opacity .66) y vuelve el botón de
   acción a secundario apagado. La app no marca .is-snoozed en el wrapper,
   así que scopeo por el contenedor #listPausa. */
#listPausa .card.naipe .face.front{
  opacity: .72;
  transition: opacity var(--dur-fast,.18s) var(--ease-out, ease);
}
#listPausa .card.naipe .face.front:hover{ opacity: 1; }
/* play de la carta pausada: look "reanudar" suave (no naranja sólido) */
#listPausa .nf-card .play-row .btn.play.nf-play{
  background: var(--surface-card);
  color: var(--text-body);
  border: var(--border-w) solid var(--line);
  box-shadow: none;
  font-weight: var(--fw-bold);
}
#listPausa .nf-card .play-row .btn.play.nf-play:hover{
  border-color: color-mix(in srgb, var(--leaf) 50%, var(--line));
  color: color-mix(in srgb, var(--leaf) 78%, black);
}

/* ── 3. KICKER "Paso actual · N de M" / encabezado de pasos ──────────────
   El acordeón "Paso a paso" del dorso. Le doy el aire del diseño. */
.naipe-back .acc-pasos > summary{
  font: var(--fw-bold) 14px var(--font-body);
  color: var(--text-strong);
}

/* ── 4. CHECKLIST BASE (lista normal, no-runner) ─────────────────────────
   Iguala el .steplist del diseño: filas-tile con borde y radio. */
.naipe-back .checklist{ list-style: none; padding: 0; margin: 8px 0; }
.naipe-back .checklist li{ margin: 8px 0; }
.naipe-back .checklist li label{
  display: flex;
  gap: 11px;
  align-items: flex-start;
  cursor: pointer;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  border: var(--border-w) solid var(--line);
  background: var(--surface-card);
  font: var(--fw-semibold) 13px var(--font-body);
  color: var(--text-body);
  transition: border-color var(--dur-fast,.18s), background var(--dur-fast,.18s);
}
.naipe-back .checklist li label:hover{
  border-color: var(--line-strong);
}
/* paso ya tildado en modo lista: tachado + tono muted (design li.done) */
.naipe-back .checklist li:has(.pchk:checked) label{
  color: var(--text-muted);
  background: color-mix(in srgb, var(--leaf) 6%, var(--surface-card));
  border-color: color-mix(in srgb, var(--leaf) 26%, var(--line));
}
.naipe-back .checklist li:has(.pchk:checked) label > span{
  text-decoration: line-through;
}
/* la casilla con tono leaf (acento positivo del diseño) */
.naipe-back .checklist .pchk{
  accent-color: var(--leaf);
  width: 18px; height: 18px;
  margin-top: 0;
  flex: 0 0 auto;
  align-self: center;
}

/* ── 5. MODO FOCO (RUNNER) — LA ESTRELLA ─────────────────────────────────
   Re-skin del runner CSS-:has de la app al look del diseño (.steplist con
   paso actual elevado en VERDE leaf + "Paso actual" + próximos atenuados).
   La app original usaba --accent (naranja); el diseño usa --leaf. Igualo la
   specificidad de las reglas inline (mismas clases + :has) cargando último. */

/* barra del toggle + botón "Modo foco" como pastilla leaf (design .btn--leaf) */
.foco-bar{ display: flex; justify-content: flex-end; margin: 10px 0 4px; }
.foco-toggle{
  background: var(--surface-card);
  border: var(--border-w) solid var(--line);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font: var(--fw-bold) 12px var(--font-body);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.foco-toggle:hover{ border-color: var(--line-strong); color: var(--text-body); }
.foco-toggle.on{
  border-color: color-mix(in srgb, var(--leaf) 38%, transparent);
  color: color-mix(in srgb, var(--leaf) 78%, black);
  background: color-mix(in srgb, var(--leaf) 14%, var(--surface-card));
}

/* contenedor del runner: separa el paso grande del resto */
.checklist.runner{ margin: 10px 0 4px; }

/* pasos ya completados: se ocultan (igual que el diseño "un paso por vez") */
.checklist.runner li:has(.pchk:checked){ display: none; }

/* PASO ACTUAL = primer no-tildado → tile elevado en leaf (design li.now) */
.checklist.runner li:has(.pchk:not(:checked)){
  position: relative;
  background: color-mix(in srgb, var(--leaf) 8%, var(--surface-card));
  border: var(--border-w) solid color-mix(in srgb, var(--leaf) 55%, transparent);
  border-radius: var(--radius-md);
  padding: 15px 16px;
  margin: 12px 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--leaf) 22%, transparent),
              var(--shadow-card);
}
.checklist.runner li:has(.pchk:not(:checked))::before{
  content: "Paso actual";
  display: block;
  font: var(--type-pixel);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--leaf) 78%, black);
  font-weight: 800;
  margin-bottom: 8px;
}
.checklist.runner li:has(.pchk:not(:checked)) label{
  /* anula el tile base del punto 4 para el paso grande */
  padding: 0;
  border: 0;
  background: none;
  font: var(--fw-bold) 16px/1.3 var(--font-body);
  color: var(--text-strong);
  align-items: center;
  gap: 12px;
}
.checklist.runner li:has(.pchk:not(:checked)) label:hover{ border: 0; }
.checklist.runner li:has(.pchk:not(:checked)) label > span{ text-decoration: none; }
.checklist.runner li:has(.pchk:not(:checked)) .pchk{
  width: 24px; height: 24px;
  margin-top: 0;
  accent-color: var(--leaf);
}

/* PRÓXIMOS PASOS (los demás no-tildados) → atenuados, sin tile (design li futuro) */
.checklist.runner li:has(.pchk:not(:checked)) ~ li:has(.pchk:not(:checked)){
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 4px 2px;
  margin: 3px 0;
  opacity: .5;
}
.checklist.runner li:has(.pchk:not(:checked)) ~ li:has(.pchk:not(:checked))::before{
  content: none;
}
.checklist.runner li:has(.pchk:not(:checked)) ~ li:has(.pchk:not(:checked)) label{
  padding: 6px 0;
  border: 0;
  background: none;
  font: var(--fw-semibold) 13px var(--font-body);
  color: var(--text-muted);
  gap: 11px;
}
.checklist.runner li:has(.pchk:not(:checked)) ~ li:has(.pchk:not(:checked)) label:hover{
  border: 0;
}
.checklist.runner li:has(.pchk:not(:checked)) ~ li:has(.pchk:not(:checked)) .pchk{
  width: 17px; height: 17px;
  accent-color: var(--leaf);
}

/* ── 6. BOTONES DE ACCIÓN del dorso (Trabajar / Pausar / Reanudar) ───────
   El diseño usa .btn--play (naranja con sombra dura) para la acción primaria
   y .btn--sec/.btn--leaf para secundarias. Mapeo a las clases reales. */
.naipe-back .btn.act-empezar,
.naipe-back .btn.act-aprogreso,
.naipe-back .btn.act-reanudar{
  background: var(--orange);
  color: #fff;
  font-weight: var(--fw-extra, 800);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 0 0 color-mix(in srgb, var(--orange) 58%, black);
}
.naipe-back .btn.act-empezar:active,
.naipe-back .btn.act-aprogreso:active,
.naipe-back .btn.act-reanudar:active{
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--orange) 58%, black);
  transform: translateY(1px);
}
/* Pausar = secundaria suave (anti-culpa: "pausar también es avanzar") */
.naipe-back .btn.sec.act-pausar{
  background: var(--surface-card);
  color: var(--text-body);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs, none);
}

/* ===== Para revisar (renderRevisar — tabs Clasificar/Duplicados/Fusionadas, diffs resaltados) ===== */
/* ════════════════════════════════════════════════════════════════
   v2-skin.css · ÁREA: PARA REVISAR
   Reskin SOLO-CSS de renderRevisar() al look de para-revisar.html.
   Apunta a las clases REALES de la app; carga DESPUÉS del <style>
   inline, así iguala/supera su especificidad. Solo var(--*).
   ════════════════════════════════════════════════════════════════ */

/* ── Cabecera de la sección (encabezado + intro) ──
   .setup h2 = título de pantalla → .section-head h2 del diseño */
.rev-panel ~ .setup h2, .setup:has(+ .rev-tabs) h2{
  font:var(--type-title);color:var(--text-strong);letter-spacing:var(--tracking-tight)}
.setup:has(+ .rev-tabs) .hint{
  font:var(--type-caption);color:var(--text-muted);line-height:var(--leading-relaxed)}

/* ════════════════════════════════════════════════════════════════
   TABS  (.rev-tabs / .rev-tab)  →  look de .tabs del diseño:
   contenedor segmentado sobre surface-raised, pill activa en card.
   El inline las hace pills navy sueltas; acá las unificamos.
   ════════════════════════════════════════════════════════════════ */
.rev-tabs{
  display:flex;gap:4px;flex-wrap:nowrap;
  background:var(--surface-raised);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);
  padding:4px;margin:6px 2px 16px;max-width:520px}
.rev-tab{
  flex:1;justify-content:center;
  font:var(--fw-semibold) 13.5px var(--font-body);
  padding:9px 12px;
  border-radius:calc(var(--radius-md) - 5px);
  border:0;background:none;color:var(--text-muted);
  box-shadow:none;
  transition:background var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast)}
.rev-tab svg.i{width:15px;height:15px}
.rev-tab:hover{color:var(--text-body)}
.rev-tab.on{
  background:var(--surface-card);
  color:var(--text-strong);
  border-color:transparent;
  box-shadow:var(--shadow-xs)}
/* contador: pill naranja redonda (igual que .badge / .pill--mention del sistema) */
.rev-tab .n{
  font:var(--fw-bold) 11px var(--font-body)!important;
  letter-spacing:.01em;
  background:var(--orange);color:#fff;
  border-radius:var(--radius-pill);
  padding:1px 7px;min-width:18px;text-align:center}
.rev-tab.on .n{background:var(--orange)}
.rev-tab .n.cero{
  background:color-mix(in srgb,var(--navy-800) 12%,transparent);
  color:var(--text-muted)}
.rev-tab.on .n.cero{
  background:color-mix(in srgb,var(--navy-800) 12%,transparent);
  color:var(--text-muted)}

/* link discreto re-analizar / volver a buscar */
.rev-relink{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:0;padding:2px 0;margin:0;cursor:pointer;
  font:var(--fw-semibold) var(--text-sm)/1.2 var(--font-body);
  color:var(--text-muted);
  text-decoration:underline;text-underline-offset:2px}
.rev-relink svg.i{width:15px;height:15px}
.rev-relink:hover{color:var(--accent,var(--orange))}
.rev-relink:disabled{opacity:.55;cursor:default;text-decoration:none}

/* ════════════════════════════════════════════════════════════════
   PANEL CLASIFICAR  ·  carta de confirmación de sugerencia IA.
   Diseño: .tile blanco, kicker "La IA sugiere", filas .sugg en verde,
   prioridad como pill sólida, CTA naranja "Confirmar".
   App: .rev-panel[data-panel="clasificar"] .card  (+ .t .porque .meta .editgrid ...)
   ════════════════════════════════════════════════════════════════ */
.rev-panel[data-panel="clasificar"] .card{
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-lg);
  padding:16px 18px;
  box-shadow:var(--shadow-sm);
  max-width:760px}
@media(hover:hover){
  .rev-panel[data-panel="clasificar"] .card:hover{
    transform:none;box-shadow:var(--shadow-card)}}
.rev-panel[data-panel="clasificar"] .card .t{
  font:var(--fw-bold) 17px/var(--leading-snug) var(--font-display);
  color:var(--text-strong);margin-bottom:8px}

/* motivo de duda → chip lavanda redondeado (anti-culpa, suave) */
.rev-panel[data-panel="clasificar"] .card .porque{
  display:inline-flex;align-items:center;gap:6px;
  background:color-mix(in srgb,var(--lavender) 14%,var(--surface-card));
  border:var(--border-w) solid color-mix(in srgb,var(--lavender) 38%,transparent);
  color:var(--text-strong);
  border-radius:var(--radius-pill);
  padding:5px 12px;margin-top:8px;
  font:var(--fw-semibold) 12.5px var(--font-body);
  font-style:normal;line-height:1.3}

/* categoría sugerida → pills tipo .pill--cat / .pill--mention del sistema */
.rev-panel[data-panel="clasificar"] .card .meta{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.rev-panel[data-panel="clasificar"] .card .meta .tag{
  display:inline-flex;align-items:center;gap:6px;
  font:var(--fw-semibold) 12px var(--font-body);
  border-radius:var(--radius-pill);
  padding:5px 11px;
  background:var(--surface-card);
  color:var(--text-body);
  border:var(--border-w) solid var(--line)}

/* acordeones Descripción / Texto original → look de surface suave */
.rev-panel[data-panel="clasificar"] details.acc{
  margin-top:10px;
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface-raised);overflow:hidden}
.rev-panel[data-panel="clasificar"] details.acc>summary{
  font:var(--fw-semibold) 14px var(--font-body);color:var(--text-body)}

/* grilla de edición inline (categoría / subcat / prioridad) */
.rev-panel[data-panel="clasificar"] .editgrid{
  margin-top:12px;gap:10px}
.rev-panel[data-panel="clasificar"] .field>.lbl{
  font:var(--type-tag);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--text-muted);margin:0 2px 5px}
.rev-panel[data-panel="clasificar"] .field select,
.rev-panel[data-panel="clasificar"] .field .subcat,
.rev-panel[data-panel="clasificar"] .mgrow .subcat{
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface-card);
  color:var(--text-body);
  font:var(--type-body)}

/* CTA "Ya está bien, no revisar más" → botón confirmar verde-leaf del diseño */
.rev-panel[data-panel="clasificar"] .card .row .act-ok{
  background:color-mix(in srgb,var(--leaf) 14%,var(--surface-card));
  color:color-mix(in srgb,var(--leaf) 78%,black);
  border:var(--border-w) solid color-mix(in srgb,var(--leaf) 38%,transparent);
  border-radius:var(--radius-md);
  font:var(--fw-bold) 14px var(--font-body);
  box-shadow:var(--shadow-xs)}
.rev-panel[data-panel="clasificar"] .card .row .act-ok:active{
  transform:translateY(1px) scale(.99)}

/* botón "➕ Contexto" alineado al sistema (secundario con outline) */
.rev-panel[data-panel="clasificar"] .mgrow .act-ctx{
  background:var(--surface-card);color:var(--text-body);
  border:var(--border-w) solid var(--line);
  box-shadow:var(--shadow-xs);border-radius:var(--radius-md)}

/* carta marcada como revisada (JS añade .done) — diseño: atenuada calma */
.rev-panel[data-panel="clasificar"] .card.done{opacity:.5}

/* ════════════════════════════════════════════════════════════════
   PANEL DUPLICADOS  ·  comparar diffs · elegir principal.
   Diseño: tile celeste, naipes compactos comparados, diffs en <mark>
   mustard, radio "principal" con anillo leaf, CTA "Fusionar" naranja.
   App: .card.dupgroup > .meta .tag · .dup-item(.dup-mejor) · .dup-badge ·
        .dup-desc mark · .dupkeep(radio) · .dup-combinar / .dup-ignore
   ════════════════════════════════════════════════════════════════ */
.card.dupgroup{
  background:color-mix(in srgb,var(--sky) 9%,var(--surface-card));
  border:var(--border-w) solid color-mix(in srgb,var(--sky) 36%,transparent)!important;
  border-radius:var(--radius-lg);
  padding:16px;max-width:960px;
  box-shadow:var(--shadow-sm)}
@media(hover:hover){
  .card.dupgroup:hover{transform:none;box-shadow:var(--shadow-sm)}}

/* meta del grupo (n parecidas · % máx) → tags celestes redondeadas */
.card.dupgroup>.meta .tag{
  font:var(--fw-bold) 10.5px var(--font-body);
  letter-spacing:.02em;
  border-radius:var(--radius-pill);
  padding:3px 9px;
  background:color-mix(in srgb,var(--sky) 20%,var(--surface-card));
  color:color-mix(in srgb,var(--sky) 70%,var(--navy-900));
  border:var(--border-w) solid color-mix(in srgb,var(--sky) 45%,transparent)}

/* cada candidata = tarjeta blanca tipo .surface */
.dup-item{
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);
  padding:12px 13px!important;margin-top:10px;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.dup-item:first-of-type{margin-top:0}

/* la "más completa" (sugerida) = anillo leaf, como el radio elegido del diseño */
.dup-item.dup-mejor{
  background:color-mix(in srgb,var(--leaf) 6%,var(--surface-card));
  border-color:var(--leaf);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--leaf) 22%,transparent)}

/* radio "quedarme con esta" en color leaf (acento de selección) */
.dup-item .dupkeep{accent-color:var(--leaf)}

/* badge "✨ Más completa · sugerida" → chip leaf suave */
.dup-item .dup-badge,
.dup-badge{
  display:inline-block;
  font:var(--fw-bold) 9.5px var(--font-body);
  letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;margin:0 0 6px;
  border-radius:var(--radius-pill);
  color:color-mix(in srgb,var(--leaf) 75%,black);
  background:color-mix(in srgb,var(--leaf) 14%,var(--surface-card));
  border:var(--border-w) solid color-mix(in srgb,var(--leaf) 40%,transparent)}

/* meta de cada candidata (cat · fecha · descripción) → tags neutras chicas */
.dup-item .meta .tag{
  font:var(--fw-semibold) 11px var(--font-body);
  border-radius:var(--radius-pill);
  padding:3px 9px;
  background:var(--surface-raised);
  color:var(--text-muted);
  border:var(--border-w) solid var(--line)}

/* DIFERENCIAS RESALTADAS — lo que cambia entre duplicados (mustard, como <mark> del diseño) */
.dup-item .dup-desc{
  font:var(--type-caption);color:var(--text-body);
  line-height:var(--leading-normal)}
.dup-item .dup-desc mark,
mark.dup-extra{
  background:color-mix(in srgb,var(--mustard) 38%,transparent);
  color:var(--text-strong);
  border-radius:var(--radius-xs);
  padding:0 3px}

/* CTA Combinar = naranja "play"; "No son duplicados" = secundario outline */
.card.dupgroup .dup-combinar{
  background:var(--orange);color:#fff;font-weight:var(--fw-extra);
  border:0;border-radius:var(--radius-md);
  box-shadow:0 4px 0 0 color-mix(in srgb,var(--orange) 58%,black),var(--glow-accent)}
.card.dupgroup .dup-combinar:active{
  transform:translateY(1px) scale(.99);
  box-shadow:0 1px 0 0 color-mix(in srgb,var(--orange) 58%,black),var(--glow-accent)}
.card.dupgroup .dup-ignore{
  background:var(--surface-card);color:var(--text-body);
  border:var(--border-w) solid var(--line);
  box-shadow:var(--shadow-xs);border-radius:var(--radius-md)}
/* acciones por candidata (Ver completa / A papelera) secundarias */
.dup-item .row .dup-ver,
.dup-item .row .dup-del{
  background:var(--surface-card);color:var(--text-muted);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-sm);box-shadow:none}
.dup-item .row .dup-ver:hover,
.dup-item .row .dup-del:hover{color:var(--text-body)}

/* ════════════════════════════════════════════════════════════════
   PANEL FUSIONADAS  ·  grupos ya combinados (recuperables).
   Diseño: listas/tiles neutras tipo .listrow. App: .card.fus-group / .fus-item
   ════════════════════════════════════════════════════════════════ */
.card.fus-group{
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-lg);
  padding:14px 16px;max-width:760px;
  box-shadow:var(--shadow-xs)}
@media(hover:hover){
  .card.fus-group:hover{transform:none;box-shadow:var(--shadow-xs)}}
.card.fus-group>.t{
  font:var(--fw-bold) 15px var(--font-body);color:var(--text-strong)}
.card.fus-group>.meta .tag{
  font:var(--fw-semibold) 11px var(--font-body);
  border-radius:var(--radius-pill);padding:3px 9px;
  background:var(--surface-raised);color:var(--text-muted);
  border:var(--border-w) solid var(--line)}
.fus-item{
  border-top:var(--border-w) solid var(--line)!important}
.fus-item>span:first-child{
  font:var(--fw-semibold) 14px var(--font-body);color:var(--text-strong)}
.fus-item .fus-ver,
.fus-item .fus-undo{
  background:var(--surface-card);color:var(--text-muted);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-sm);box-shadow:none}
.fus-item .fus-ver:hover,
.fus-item .fus-undo:hover{color:var(--text-body)}
.card.fus-group .fus-undo-all{
  background:var(--surface-card);color:var(--text-body);
  border:var(--border-w) solid var(--line);
  box-shadow:var(--shadow-xs);border-radius:var(--radius-md)}

/* ════════════════════════════════════════════════════════════════
   ESTADO VACÍO  ·  "Todo al día" (emptyMascot → .empty-state).
   Diseño: mascota celebrando centrada + título + CTA. La app ya lo
   genera con .empty-state/.empty-mascot/.empty-t/.empty-sub.
   ════════════════════════════════════════════════════════════════ */
.rev-panel .empty-state,
#list.empty-state{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:4px;padding:34px 18px}
.rev-panel .empty-state .empty-mascot,
#list .empty-mascot{
  width:104px;height:104px;object-fit:contain;
  filter:drop-shadow(var(--shadow-sm))}
.rev-panel .empty-state .empty-t,
#list .empty-t{
  font:var(--type-title);color:var(--text-strong);margin-top:6px}
.rev-panel .empty-state .empty-sub,
#list .empty-sub{
  font:var(--type-caption);color:var(--text-muted)}

/* ===== Insights (renderInsights — #insArea: ins-h2/ih-sub, ins-glance/ins-g, ins-ring-row/ring, ins-acc, ins-activity bars, ins-balance cat, logros, ins-ph) ===== */
/* ============================================================
   v2-skin.css — ÁREA: INSIGHTS
   Re-estila las clases REALES de renderInsights() al look de
   Claude Design (insights.html / _shared.css): tiles tipo
   "naipe sobre la mesa" (shadow-card), header con chip de ícono,
   donut/anillo destacado, barras y balance enmarcados, vistazo
   en cards, calibración resaltada. SOLO tokens var(--*).
   Carga DESPUÉS del <style> inline → gana por orden + misma
   especificidad/selectores anidados igualados.
   ============================================================ */

/* ---- contenedor general: ritmo del dashboard del diseño ---- */
#insArea{
  display:flex; flex-direction:column;
  gap:var(--space-4);
  margin-top:var(--space-1);
}

/* ---- título de pantalla (mhead) → type-title del diseño ---- */
#insArea .ins-h2{
  display:flex; align-items:center; gap:var(--space-2);
  margin:var(--space-1) var(--space-1) 0;
  font:var(--type-title);
  color:var(--text-strong);
  letter-spacing:var(--tracking-tight);
}
#insArea .ins-h2 svg{ width:24px; height:24px; color:var(--accent); }
#insArea .ins-h2 .ih-sub{
  font:var(--type-caption);
  color:var(--text-muted);
  margin-left:auto; text-align:right; white-space:nowrap;
}

/* ============================================================
   .ins-sec  ≡  .tile del diseño
   border-w + radius-lg + shadow-card (drop lúdico desplazado)
   ============================================================ */
#insArea .ins-sec{
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-lg);
  padding:var(--space-4) var(--space-5);
  box-shadow:var(--shadow-card);
  margin:0;
}

/* header del tile: chip de ícono + título 15/bold + meta pill */
#insArea .ins-sec .ins-head{
  display:flex; align-items:center; gap:var(--space-2);
  margin-bottom:var(--space-3);
}
#insArea .ins-sec .ins-head .ih-ic{
  width:30px; height:30px; flex:0 0 auto;
  display:grid; place-items:center;
  border-radius:var(--radius-sm);
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
}
#insArea .ins-sec .ins-head .ih-ic svg{ width:17px; height:17px; }
#insArea .ins-sec .ins-head .ih-tt{
  font:var(--fw-bold) 15px/1.15 var(--font-body);
  color:var(--text-strong);
}
#insArea .ins-sec .ins-head .ih-meta{
  margin-left:auto;
  font:var(--type-tag);
  color:var(--text-muted); text-align:right;
  background:var(--surface-raised);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-pill);
  padding:var(--space-1) var(--space-2);
  line-height:1.2;
}
#insArea .ins-sec .ins-foot{
  margin-top:var(--space-3); padding-top:var(--space-3);
  border-top:var(--border-w) solid var(--line);
  font:var(--type-caption); color:var(--text-muted);
}

/* ============================================================
   VISTAZO  →  .vistazo .v del diseño (cards de glance)
   .ins-glance / .ins-g / .ig-ic / .ig-big / .ig-lbl / .ig-bar
   ============================================================ */
#insArea .ins-glance{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--space-2); margin:0;
}
#insArea .ins-g{
  position:relative; overflow:hidden; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:0;
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-2);
  text-align:center;
  box-shadow:var(--shadow-sm);
}
/* lavado de color por tipo (mismo gesto que el diseño con .ic tintado) */
#insArea .ins-g::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.9;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--accent) 12%, var(--surface-card)),
    var(--surface-card) 78%);
}
#insArea .ins-g>*{ position:relative; z-index:1; }
#insArea .ins-g.ig-streak{ border-color:color-mix(in srgb, var(--accent) 38%, var(--line)); }
#insArea .ins-g.ig-streak::before{ background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, var(--surface-card)), color-mix(in srgb, var(--orange) 8%, var(--surface-card)) 80%); }
#insArea .ins-g.ig-level{ border-color:color-mix(in srgb, var(--mustard) 40%, var(--line)); }
#insArea .ins-g.ig-level::before{ background:linear-gradient(160deg, color-mix(in srgb, var(--mustard) 20%, var(--surface-card)), var(--surface-card) 80%); }
#insArea .ins-g.ig-cards{ border-color:color-mix(in srgb, var(--leaf) 38%, var(--line)); }
#insArea .ins-g.ig-cards::before{ background:linear-gradient(160deg, color-mix(in srgb, var(--leaf) 16%, var(--surface-card)), var(--surface-card) 80%); }

/* chip de ícono redondo (como .vistazo .v .ic del diseño) */
#insArea .ins-g .ig-ic{
  width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center; margin-bottom:var(--space-2);
  background:var(--surface-card);
  color:var(--text-muted);
  box-shadow:var(--shadow-xs);
}
#insArea .ins-g .ig-ic svg{ width:17px; height:17px; }
#insArea .ins-g.ig-streak .ig-ic{ color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--surface-card)); }
#insArea .ins-g.ig-level  .ig-ic{ color:color-mix(in srgb, var(--mustard) 80%, black); background:color-mix(in srgb, var(--mustard) 18%, var(--surface-card)); }
#insArea .ins-g.ig-cards  .ig-ic{ color:var(--leaf); background:color-mix(in srgb, var(--leaf) 14%, var(--surface-card)); }

/* número pixel grande (diseño: .v .n font pixel 17px) */
#insArea .ins-g .ig-big{
  font:var(--type-pixel); font-size:24px;
  color:var(--text-strong);
  margin:0 0 var(--space-1);
  font-variant-numeric:tabular-nums; letter-spacing:var(--tracking-pixel);
}
#insArea .ins-g.ig-streak .ig-big{ color:var(--accent); }
#insArea .ins-g .ig-lbl{
  font:var(--fw-semibold) 11px/1.2 var(--font-body);
  color:var(--text-muted);
}
#insArea .ins-g .ig-bar{
  width:100%; height:7px; margin-top:var(--space-2);
  background:var(--surface-sunken);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  overflow:hidden; box-shadow:var(--shadow-inset);
}
#insArea .ins-g .ig-fill{
  height:100%; border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--mustard), var(--accent));
  transition:width var(--dur-slow) var(--ease-out);
}
#insArea .ins-g .ig-xp{
  font:var(--fw-bold) 10px/1 var(--font-body);
  color:var(--text-muted); margin-top:var(--space-1);
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   CALIBRACIÓN — anillo destacado (diseño: "afinar tu cerebro"
   es lo más importante; lo resaltamos con borde de acento).
   .ins-ring-row / .ring (SVG donut) / .irt / .irn / .irmeta
   ============================================================ */
#insArea #insRing .ins-sec{
  border-color:color-mix(in srgb, var(--mustard) 36%, var(--line));
  box-shadow:var(--shadow-card),
             0 0 0 1px color-mix(in srgb, var(--mustard) 18%, transparent);
}
#insArea #insRing .ins-sec .ins-head .ih-ic{
  color:color-mix(in srgb, var(--mustard) 82%, black);
  background:color-mix(in srgb, var(--mustard) 18%, transparent);
}
#insArea .ins-ring-row{
  display:flex; align-items:center; gap:var(--space-4);
  padding:var(--space-1) 0;
}
#insArea .ins-ring-row svg.ring{
  flex:0 0 auto; width:108px; height:108px;
  filter:drop-shadow(0 4px 10px color-mix(in srgb, var(--ok) 22%, transparent));
}
#insArea .ins-ring-row.is-empty svg.ring{ filter:none; opacity:.85; }
#insArea .ins-ring-row .irt{ min-width:0; }
#insArea .ins-ring-row .irt .irn{
  font:var(--type-caption); font-size:13px;
  color:var(--text-body); line-height:1.45;
}
#insArea .ins-ring-row .irt .irn b{ color:var(--text-strong); font-weight:var(--fw-bold); }
#insArea .ins-ring-row .irt .irmeta{
  display:flex; gap:var(--space-2); flex-wrap:wrap;
  margin-top:var(--space-2);
}

/* ============================================================
   AFINAR EL CEREBRO — acordeón
   .ins-acc / summary / acc-ic / acc-sub / acc-chev
   (mismo gesto "tile" del diseño)
   ============================================================ */
#insArea .ins-acc{ margin:0; }
#insArea .ins-acc>summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; gap:var(--space-2);
  font:var(--fw-bold) 15px/1.15 var(--font-body);
  color:var(--text-strong);
  padding:var(--space-3) var(--space-4);
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}
#insArea .ins-acc>summary::-webkit-details-marker{ display:none; }
#insArea .ins-acc>summary .acc-ic{ width:18px; height:18px; color:var(--accent); flex:0 0 auto; }
#insArea .ins-acc>summary .acc-sub{ font:var(--type-caption); color:var(--text-muted); }
#insArea .ins-acc>summary .acc-chev{ margin-left:auto; width:14px; height:14px; color:var(--text-muted); transition:transform var(--dur-base) var(--ease-out); }
#insArea .ins-acc[open]>summary{ border-bottom-left-radius:0; border-bottom-right-radius:0; box-shadow:var(--shadow-sm); }
#insArea .ins-acc[open]>summary .acc-chev{ transform:rotate(90deg); }
#insArea .ins-acc .ins-acc-body{ padding:var(--space-3) 0 var(--space-1); display:flex; flex-direction:column; gap:0; }

/* ============================================================
   ACTIVIDAD — barras enmarcadas (diseño .bars en well sunken)
   .ins-chartwrap / .ins-bars / .ins-legend
   ============================================================ */
#insArea .ins-chartwrap{
  margin:var(--space-1) 0 0;
  padding:var(--space-3) var(--space-3) var(--space-2);
  border-radius:var(--radius-md);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 5%, var(--surface-sunken)),
    var(--surface-sunken));
  border:1px solid var(--line);
  box-shadow:var(--shadow-inset);
}
#insArea .ins-bars .axis{ stroke:var(--line); stroke-width:1; }
#insArea .ins-bars .grid{ stroke:var(--line); stroke-width:1; opacity:.45; stroke-dasharray:2 3; }
#insArea .ins-bars text{ font-family:var(--font-body); fill:var(--text-muted); }
#insArea .ins-bars text.val{ font-size:9px; font-weight:700; fill:var(--text-strong); }
#insArea .ins-bars text.lbl{ font-size:9px; }
#insArea .ins-legend{
  display:flex; align-items:center; gap:var(--space-4);
  margin-top:var(--space-2); flex-wrap:wrap;
}
#insArea .ins-legend .lg{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font:var(--fw-semibold) 11px/1.2 var(--font-body);
  color:var(--text-muted);
}
#insArea .ins-legend .lg i{ width:10px; height:10px; border-radius:3px; display:inline-block; }

/* ============================================================
   BALANCE POR ÁREA — barras horizontales (diseño .legend look)
   .ins-cat / .icr / .icn / .ict / .icf / .icv
   ============================================================ */
#insArea .ins-cat{ display:flex; flex-direction:column; gap:var(--space-3); margin:var(--space-1) 0 0; }
#insArea .ins-cat .icr{ display:grid; grid-template-columns:96px 1fr 28px; align-items:center; gap:var(--space-3); }
#insArea .ins-cat .icr .icn{
  font:var(--fw-semibold) 12px/1.2 var(--font-body);
  color:var(--text-body);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#insArea .ins-cat .icr .ict{
  height:14px; background:var(--surface-sunken);
  border:1px solid var(--line); border-radius:var(--radius-pill);
  overflow:hidden; box-shadow:var(--shadow-inset);
}
#insArea .ins-cat .icr .icf{
  height:100%; border-radius:var(--radius-pill); min-width:5px;
  transition:width var(--dur-slow) var(--ease-out);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.18);
}
#insArea .ins-cat .icr .icv{
  font:var(--fw-bold) 13px/1 var(--font-body);
  color:var(--text-strong); text-align:right;
  font-variant-numeric:tabular-nums;
}
#insArea .ins-cat .icr.low .icn{ color:var(--accent); }
#insArea .ins-cat .icr.low .icn::after{ content:" · cuidá"; color:var(--accent); font-weight:var(--fw-bold); font-size:10px; }

/* ============================================================
   PATRONES — tarjetas con franja de acento (insightCard)
   .ins-pats / .card.insight (.pos/.warn)
   ============================================================ */
#insArea .ins-pats{ display:flex; flex-direction:column; gap:var(--space-3); }
#insArea .card.insight{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:auto 1fr; gap:var(--space-3); align-items:start;
  padding:var(--space-3) var(--space-4) var(--space-3) var(--space-4);
  border-radius:var(--radius-lg);
  border:var(--border-w) solid var(--line);
  background:var(--surface-card);
  box-shadow:var(--shadow-sm);
}
#insArea .card.insight::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--mustard); }
#insArea .card.insight .ins-badge{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center;
  color:color-mix(in srgb, var(--mustard) 82%, black);
  background:color-mix(in srgb, var(--mustard) 16%, var(--surface-card));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--mustard) 12%, transparent);
}
#insArea .card.insight .ins-badge svg{ width:18px; height:18px; }
#insArea .card.insight .ins-body{ min-width:0; }
#insArea .card.insight .t{ font:var(--fw-bold) 14.5px/1.25 var(--font-body); color:var(--text-strong); margin:1px 0 0; }
#insArea .card.insight .detalle{ font:var(--type-caption); font-size:13px; color:var(--text-body); margin:var(--space-1) 0 0; line-height:1.45; }
#insArea .card.insight .estrategia{
  font:var(--type-caption); font-size:12.5px; color:var(--text-muted);
  margin:var(--space-2) 0 0; padding-top:var(--space-2);
  border-top:1px solid color-mix(in srgb, var(--line) 80%, transparent);
  display:flex; gap:var(--space-2); align-items:flex-start; line-height:1.4;
}
#insArea .card.insight .estrategia svg{ width:15px; height:15px; flex:0 0 auto; margin-top:1px; color:var(--mustard); }
#insArea .card.insight.pos{ background:color-mix(in srgb, var(--leaf) 7%, var(--surface-card)); border-color:color-mix(in srgb, var(--leaf) 32%, var(--line)); }
#insArea .card.insight.pos::before{ background:var(--leaf); }
#insArea .card.insight.pos .ins-badge{ color:var(--leaf); background:color-mix(in srgb, var(--leaf) 16%, var(--surface-card)); box-shadow:0 0 0 3px color-mix(in srgb, var(--leaf) 12%, transparent); }
#insArea .card.insight.pos .estrategia svg{ color:var(--leaf); }
#insArea .card.insight.warn{ background:color-mix(in srgb, var(--orange) 6%, var(--surface-card)); border-color:color-mix(in srgb, var(--orange) 30%, var(--line)); }
#insArea .card.insight.warn::before{ background:var(--orange); }
#insArea .card.insight.warn .ins-badge{ color:var(--orange); background:color-mix(in srgb, var(--orange) 14%, var(--surface-card)); box-shadow:0 0 0 3px color-mix(in srgb, var(--orange) 12%, transparent); }
#insArea .card.insight.warn .estrategia svg{ color:var(--orange); }

/* ============================================================
   LOGROS — celdas (el diseño usa hexágonos .hexb de color;
   el markup real usa .logro rectangular → lo dejamos como
   sticker tintado, sin fabricar el hex). Ver notas.
   ============================================================ */
#insArea .logros.compact{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr));
  gap:var(--space-2); margin-top:var(--space-2);
}
#insArea .logros .logro{
  background:var(--surface-raised);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-2);
  text-align:center; opacity:.55;
  transition:transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
#insArea .logros .logro.on{
  opacity:1;
  border-color:color-mix(in srgb, var(--ok) 50%, var(--line));
  background:color-mix(in srgb, var(--ok) 8%, var(--surface-card));
  box-shadow:var(--shadow-sm);
}
#insArea .logros .logro .lg-ic{ font-size:22px; line-height:1; }
#insArea .logros .logro .lg-t{ font:var(--fw-semibold) 11px/1.2 var(--font-body); color:var(--text-body); margin-top:var(--space-1); }
#insArea .logros .logro .lg-p{ font:var(--fw-medium) 10px/1 var(--font-body); color:var(--text-muted); margin-top:2px; font-variant-numeric:tabular-nums; }

/* sub-encabezado + nota + divider internos */
#insArea .ins-sub{ display:flex; align-items:center; gap:var(--space-2); color:var(--text-strong); font:var(--fw-bold) 13px/1.2 var(--font-body); margin:var(--space-4) 0 var(--space-1); }
#insArea .ins-sub svg{ width:15px; height:15px; color:var(--text-muted); }
#insArea .ins-note{ color:var(--text-muted); font:var(--type-caption); font-size:11.5px; line-height:1.4; margin-top:var(--space-2); opacity:.9; }
#insArea .ins-divider{ height:1px; background:var(--line); opacity:.7; margin:var(--space-4) 0; }

/* ============================================================
   PLACEHOLDERS vacíos (anti-culpa) — diseño cálido
   .ins-ph / .iph-ic / .iph-tx
   ============================================================ */
#insArea .ins-ph{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) 0; color:var(--text-muted); }
#insArea .ins-ph .iph-ic{
  width:40px; height:40px; flex:0 0 auto;
  display:grid; place-items:center; border-radius:50%;
  background:color-mix(in srgb, var(--accent) 12%, var(--surface-card));
  color:var(--accent);
}
#insArea .ins-ph .iph-ic svg{ width:21px; height:21px; }
#insArea .ins-ph .iph-tx{ font:var(--type-caption); font-size:12.5px; line-height:1.4; }
#insArea .ins-ph .iph-tx b{ color:var(--text-strong); font-weight:var(--fw-bold); }

/* tags de meta (calibración) — alineados al look pill del diseño */
#insArea .irmeta .tag{
  font:var(--type-tag); font-size:11px;
  color:var(--text-muted);
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:var(--space-1) var(--space-2);
}
#insArea .irmeta .tag.pri-p1{ color:var(--text-on-accent); background:var(--pri-1); border-color:var(--pri-1); }

/* ---- móvil: gaps/medidas del diseño 390px ---- */
@media (max-width:560px){
  #insArea{ gap:var(--space-3); }
  #insArea .ins-h2{ font:var(--type-section); }
  #insArea .ins-h2 .ih-sub{ display:none; }
  #insArea .ins-sec{ padding:var(--space-4); }
  #insArea .ins-glance{ gap:var(--space-2); }
  #insArea .ins-g{ padding:var(--space-3) var(--space-1); }
  #insArea .ins-g .ig-big{ font-size:21px; }
  #insArea .ins-cat .icr{ grid-template-columns:74px 1fr 24px; gap:var(--space-2); }
  #insArea .ins-ring-row{ gap:var(--space-3); }
  #insArea .ins-ring-row svg.ring{ width:96px; height:96px; }
}

/* ===== Buscador + Recientes/Historial (search field, filtros, paginación numerada, listrows) ===== */
/* ============================================================
   v2-skin.css — ÁREA: Buscador + Recientes / Historial
   Reskin SOLO-CSS de las clases REALES de la app al look de Claude Design.
   Carga DESPUÉS del <style> inline: misma specificidad o mayor para ganar.
   Solo var(--*) de deckdo-tokens.css (vitalidad + modo bajo siguen repintando).
   ============================================================ */

/* ---------- 01 · Encabezado de resultados (.exp-count) ----------
   Línea "N resultados". El diseño usa caption mute + número en pixel/acento. */
.exp-count{
  display:inline-flex;align-items:center;gap:7px;
  font:var(--type-caption);color:var(--text-muted);
  text-transform:none;letter-spacing:normal;margin:0 2px 10px;
}
.exp-count b{
  font:var(--type-pixel);font-size:13px;color:var(--orange);font-weight:400;letter-spacing:.01em;
}

/* ---------- 01 · Rail de filtros (.exp-rail = card contenedora) ----------
   Diseño: tarjeta cream con borde sutil + radio grande + sombra suave. */
.card.exp-rail,
.exp-rail{
  background:var(--surface-app, var(--cream-50));
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:16px;
}

/* ---------- 01 · Search field (.exp-search > .ic + #expTexto) ----------
   Llevamos el look del .field del diseño: surface-card, borde line, radio md,
   icono mute, input sin borde transparente. */
.exp-rail .exp-search,
.exp-search{
  display:flex;align-items:center;gap:10px;
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);
  padding:12px 14px;margin-bottom:14px;
  color:var(--text-muted);
  transition:border-color var(--dur-fast, .15s) var(--ease-out, ease),
             box-shadow var(--dur-fast, .15s) var(--ease-out, ease);
}
.exp-search .ic{width:18px;height:18px;flex:none;color:var(--text-muted)}
.exp-rail .exp-search #expTexto,
.exp-search #expTexto{
  flex:1;width:auto;margin:0;border:0;background:none;padding:0;border-radius:0;outline:none;
  font:var(--type-body);color:var(--text-body);
}
.exp-search #expTexto::placeholder{color:var(--text-muted)}
/* foco: el wrapper se ilumina con el acento (el input no tiene borde propio) */
.exp-search:focus-within{
  border-color:var(--orange);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 18%,transparent);
}
.exp-search:focus-within .ic{color:var(--orange)}

/* ---------- 01 · Grid de filtros (.editgrid > .field) ----------
   En el rail, cada .field es columna label+select. Espaciado del diseño. */
.exp-rail .editgrid{margin-top:0;gap:14px 12px}
.exp-rail .field{display:flex;flex-direction:column}
.exp-rail .field>.lbl{
  color:var(--text-muted);font:var(--type-tag);
  text-transform:uppercase;letter-spacing:var(--tracking-wide);
  margin:0 2px 5px;
}
/* select/inputs del rail: caja del diseño (.field-style aplicado al control real) */
.exp-rail .field>select,
.exp-rail .field>input.subcat,
.exp-rail #expDesde,
.exp-rail #expHasta{
  width:100%;
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);
  padding:10px 12px;
  font:var(--type-body);color:var(--text-body);
  outline:none;cursor:pointer;
  transition:border-color var(--dur-fast, .15s) var(--ease-out, ease),
             box-shadow var(--dur-fast, .15s) var(--ease-out, ease);
}
.exp-rail .field>select:focus,
.exp-rail .field>input.subcat:focus,
.exp-rail #expDesde:focus,
.exp-rail #expHasta:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 16%,transparent);
}
/* acentos de borde-izquierdo (prioridad / categoría) preservados con tokens */
.exp-rail .field.f-prio{border-left:var(--border-w-bold) solid var(--pri-2);padding-left:9px;border-radius:var(--radius-sm)}
.exp-rail .field.f-prio>.lbl{color:var(--text-strong)}
.exp-rail .field.f-cat{border-left:var(--border-w-bold) solid var(--sky);padding-left:9px;border-radius:var(--radius-sm)}
.exp-rail .field.f-cat>.lbl{color:var(--text-strong)}

/* ---------- 01 · Chips de filtro removibles (.exp-rail .chips > .chip) ----------
   Diseño = pills suaves cream con borde; .on = acento (foco/repetidas activas).
   Estas son las pills reales de subcategoría + Foco/Pospuestas/Repetidas. */
.exp-rail .chips{display:flex;gap:8px;flex-wrap:wrap;padding:2px 2px 8px}
.exp-rail .chips .chip{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:var(--radius-pill);
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  color:var(--text-body);
  font:var(--fw-semibold) 12.5px var(--font-body);
  padding:6px 12px;cursor:pointer;
  transition:background var(--dur-fast, .15s),border-color var(--dur-fast, .15s),color var(--dur-fast, .15s);
}
.exp-rail .chips .chip:hover{border-color:color-mix(in srgb,var(--navy-800) 24%,var(--line))}
.exp-rail .chips .chip.on{
  background:color-mix(in srgb,var(--sky) 12%,var(--cream-50));
  border-color:color-mix(in srgb,var(--sky) 32%,transparent);
  color:color-mix(in srgb,var(--sky) 65%,var(--navy-900));
  font-weight:var(--fw-bold, 700);
}
.exp-rail .chips .chip#expFoco.on{
  background:var(--leaf);border-color:transparent;color:#fff;
}

/* etiqueta SUBCATEGORÍA dentro del rail */
.exp-rail .lbl{
  color:var(--text-muted);font:var(--type-tag);
  text-transform:uppercase;letter-spacing:var(--tracking-wide);
}

/* ---------- 01 · Toolbar de controles (.exp-tools / .list-controls) ----------
   Fila de Vista / Columnas / Por página: separador superior y alineación. */
.exp-tools{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;
  border-top:var(--border-w) solid var(--line);
}
.exp-tools .list-controls{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:100%;
}
.exp-tools .lc-group{display:inline-flex;align-items:center;gap:8px}
.exp-tools .lc-group>.lbl{
  color:var(--text-muted);font:var(--type-tag);
  text-transform:uppercase;letter-spacing:var(--tracking-wide);margin:0;
}
.exp-tools .vista-toggle{margin-left:auto;display:inline-flex;gap:6px;align-items:center}
.exp-tools .vista-toggle>.lbl{
  color:var(--text-muted);font:var(--type-tag);
  text-transform:uppercase;letter-spacing:var(--tracking-wide);
}

/* Toggle Vista (.vt / .vt.on) — look segmented del diseño (mute → navy.on) */
.exp-tools .vista-toggle .vt,
.exp-tools .vt{
  display:inline-flex;align-items:center;gap:6px;
  border:var(--border-w) solid var(--line);
  background:var(--surface-card);
  color:var(--text-muted);
  font:var(--fw-semibold) 13px var(--font-body);
  padding:7px 12px;border-radius:var(--radius-md);cursor:pointer;
}
.exp-tools .vt .ic{width:14px;height:14px;flex:none}
.exp-tools .vt.on{
  background:var(--navy-800);border-color:transparent;color:#fff;
}
.exp-tools .vt.on .ic{color:#fff}

/* Segmentos Columnas / Por página (.cols-seg / .ps-seg = segmented control) */
.exp-tools .cols-seg,
.exp-tools .ps-seg{
  display:inline-flex;gap:2px;padding:3px;
  background:var(--surface-raised, var(--panel2));
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);
}
.exp-tools .cols-seg button,
.exp-tools .ps-seg button{
  border:0;background:none;cursor:pointer;
  color:var(--text-muted);
  font:var(--fw-semibold) 13px var(--font-body);
  padding:6px 11px;border-radius:calc(var(--radius-md) - 5px);
  display:inline-flex;align-items:center;justify-content:center;min-width:30px;
}
.exp-tools .cols-seg button.on,
.exp-tools .ps-seg button.on{background:var(--navy-800);color:#fff}

/* ---------- 01 · Vista de filas densas (.as-rows = listrows reales) ----------
   El equivalente real a los "listrows" del diseño es la vista compacta
   .as-rows del naipe. Le damos el acabado de fila del diseño:
   surface-card, borde line, radio md, hover raised, separación 8px. */
#expItems.as-rows .card.naipe{margin:0 0 8px}
#expItems.as-rows .face.front,
.as-rows .face.front{
  min-height:0;
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:none;
  transition:background var(--dur-fast, .15s),border-color var(--dur-fast, .15s);
}
.as-rows .card.naipe:hover .face.front{
  background:var(--surface-raised, var(--panel2));
  border-color:color-mix(in srgb,var(--navy-800) 18%,var(--line));
}
/* esquina-palo como mini-naipe a la izquierda (.cn) */
.as-rows .nf-card .cn{
  display:inline-flex;align-items:center;gap:5px;
  font:var(--fw-bold) 13px var(--font-display);color:var(--text-strong);
  padding-left:8px;
}
.as-rows .nf-card .cn i{margin-top:0;font-style:normal}
/* título de la fila */
.as-rows .nt{
  margin:0;
  font:var(--fw-semibold) var(--text-base)/1.25 var(--font-body);
  color:var(--text-strong);
  flex:0 1 320px;min-width:120px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- 01 · Paginación numerada (.pager > .pgbtn / .pgell) ----------
   Diseño: botones cuadrados 36px radio 10, borde line; activo = naranja sólido.
   La regla actual usa .pgbtn.on con var(--acc2)/--acc; la sobreescribimos al
   look del diseño (orange + texto blanco). */
.pager{
  display:flex;flex-wrap:wrap;gap:5px;align-items:center;justify-content:center;
  margin:18px 0 4px;
}
.pager .pgbtn,
.pgbtn{
  min-width:36px;height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  border-radius:10px;
  padding:0 11px;
  color:var(--text-body);
  font:var(--fw-semibold) 13px var(--font-body);
  cursor:pointer;
  transition:background var(--dur-fast, .15s),border-color var(--dur-fast, .15s),color var(--dur-fast, .15s);
}
.pager .pgbtn:hover:not(:disabled):not(.on){
  border-color:color-mix(in srgb,var(--navy-800) 26%,var(--line));
}
.pager .pgbtn.on,
.pgbtn.on{
  background:var(--orange);
  border-color:transparent;
  color:#fff;
  font-weight:var(--fw-bold, 700);
}
.pager .pgbtn:disabled,
.pgbtn:disabled{opacity:.4;cursor:default}
.pager .pgell,
.pgell{color:var(--text-muted);align-self:center;padding:0 2px;font:var(--type-body)}

/* ---------- 02 · Buscador local de Papelera / Recientes / Historial (.search) ----------
   .search es el buscador simple (trashSearch / recSearch / histSearch). Lo
   llevamos al look .field del diseño (surface-card, borde line, radio md). */
.search{display:flex;gap:8px;margin:10px 0}
.search input{
  flex:1;
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  color:var(--text-body);
  border-radius:var(--radius-md);
  padding:12px 14px;
  font:var(--type-body);outline:none;
  transition:border-color var(--dur-fast, .15s),box-shadow var(--dur-fast, .15s);
}
.search input::placeholder{color:var(--text-muted)}
.search input:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 16%,transparent);
}

/* ---------- Botón "Volver" del buscador (.btn.sec) al look secundario del diseño ---------- */
#bBack.btn.sec,
.btn.sec{
  background:var(--surface-card);
  color:var(--text-body);
  border:var(--border-w) solid var(--line);
  box-shadow:var(--shadow-xs);
  border-radius:var(--radius-md);
}


/* ===== Compras ===== */
/* ============================================================
   COMPRAS — reskin v2 (solo CSS, apunta a clases reales de la app)
   Markup real: #reco > .shophead(h3 + .scount) + .shoplist > .shoprow
                .shoprow > .sk + .sbody(.stit + .scat)
   Look objetivo: compras.html (.shopgroup / .shop-item del diseño)
   Todo en var(--*); respeta vitalidad y modo bajo.
   ============================================================ */

/* Encabezado de la lista (equivale a .shopgroup .gh del diseño) */
.shophead{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin:6px 2px 10px;
}
.shophead h3{
  margin:0;
  font:var(--fw-bold) 15px var(--font-body);
  color:var(--text-strong);
}
.shophead .scount{
  font:var(--type-pixel);font-size:12px;
  color:var(--text-muted);
}

/* Contenedor lista = "shopgroup" liviano: card con borde + sombra suave */
.shoplist{
  display:flex;flex-direction:column;gap:0;
  margin-top:10px;
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  padding:2px 16px;
}

/* Fila = .shop-item del diseño (liviana, sin fondo de panel) */
.shoprow{
  display:flex;align-items:center;gap:11px;
  padding:11px 0;
  background:transparent;
  border-bottom:0;
  border-top:var(--border-w) solid var(--line);
  cursor:pointer;
  transition:opacity .25s ease, background .15s ease;
}
.shoprow:first-child{border-top:0}
.shoprow:last-child{border-bottom:0}
.shoprow:hover{
  background:color-mix(in srgb, var(--accent) 6%, transparent);
}

/* Checkbox cuadrado estilo .check del diseño (la app usa div .sk con ✓) */
.shoprow .sk{
  flex:0 0 auto;
  width:22px;height:22px;
  border-radius:7px;
  border:var(--border-w-bold) solid var(--line-strong);
  background:var(--surface-card);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:var(--fw-extra);
  color:transparent;          /* el "✓" del diseño es el ::after del check */
  position:relative;
  transition:background .15s ease, border-color .15s ease;
}
.shoprow.done .sk{
  background:var(--leaf);
  border-color:var(--leaf);
  color:#fff;                 /* muestra el ✓ del JS al completar */
}

/* Cuerpo: nombre (.stit) + rubro/origen (.scat) */
.shoprow .sbody{flex:1 1 auto;min-width:0}
.shoprow .stit{
  font:var(--fw-semibold) 14px var(--font-body);
  color:var(--text-strong);
  line-height:var(--leading-snug, 1.25);
  word-break:break-word;
}
.shoprow .scat{
  display:block;
  font:var(--type-tag);
  color:var(--text-muted);
  margin-top:3px;
}

/* Estado comprado: tachado + atenuado (igual que .shop-item.done) */
.shoprow.done{opacity:.5}
.shoprow.done .stit{
  text-decoration:line-through;
  color:var(--text-muted);
}
.shoprow.done .scat{color:var(--text-muted)}

/* Estado vacío (#reco.empty) — alineado al tono liviano del diseño */
#reco.empty{
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  color:var(--text-muted);
  font:var(--type-caption);
  padding:28px 20px;
  text-align:center;
}

/* ===== Categorías + Papelera (renderGestion + renderPapelera) ===== */
/* ============================================================
   v2-skin.css — ÁREA: Categorías + Papelera
   Reskin SOLO-CSS de las clases REALES de la app (.gmgr/.gcat2/.subrow2,
   .modal.gm-modal, .pwrap/.trow) al look de Claude Design
   (catrow/subrow · sheet · listrow). Solo var(--*) de deckdo-tokens.css.
   Se carga DESPUÉS del <style> inline → iguala/supera specificidad.
   ============================================================ */

/* ---------- (1) CATEGORÍAS — lista de áreas (.gmgr > .gcat2) ---------- */
/* Card de categoría → look "catrow": superficie card, borde fino, radio md,
   sin la franja lateral coloreada del diseño objetivo (limpio). */
#gList.gmgr{display:flex;flex-direction:column;gap:10px;padding:4px 0 18px}

.gmgr .gcat2{
  position:relative;
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs);
  overflow:hidden;
  transition:background var(--dur-fast,.16s),box-shadow var(--dur-fast,.16s);
}
/* el diseño objetivo no lleva barra lateral coloreada en catrow → la retiramos */
.gmgr .gcat2::before{display:none}
.gmgr .gcat2:hover{background:var(--surface-raised)}

/* Cabecera de categoría → fila tipo catrow (13px 14px, gap 13px) */
.gmgr .g2-head{
  display:flex;align-items:center;gap:13px;
  padding:13px 14px;
}
/* punto de color de la categoría → "cic" del diseño (chip cuadrado coloreado) */
.gmgr .g2-dot{
  width:38px;height:38px;border-radius:11px;flex:none;margin-top:0;
  background:var(--kc,var(--accent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#000 8%,transparent);
}
.gmgr .g2-name{
  flex:1;min-width:0;
  font:var(--fw-bold) 15px var(--font-body);
  color:var(--text-strong);line-height:1.25;
  word-break:break-word;overflow-wrap:anywhere;
}
/* contador → pill discreto tipo .sc/pixel del diseño */
.gmgr .g2-count{
  font:var(--type-pixel);font-size:12px;letter-spacing:.01em;
  color:var(--text-muted);
  background:none;border:0;border-radius:0;padding:0 2px;
  flex:none;align-self:center;
}
/* acciones → botones-icono ghost (32px, hover surface-raised) como .acts del diseño */
.gmgr .g2-acts{display:flex;gap:4px;flex:none;align-self:center}
.gmgr .g2-acts .ico{
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;
  border:0;background:none;border-radius:8px;color:var(--text-muted);
  transition:background var(--dur-fast,.16s),color var(--dur-fast,.16s);
}
.gmgr .g2-acts .ico:hover{background:var(--surface-raised);color:var(--text-body);border-color:transparent}
.gmgr .g2-acts .ico svg{width:16px;height:16px}
.gmgr .g2-acts .ico.danger:hover{background:color-mix(in srgb,var(--red) 14%,var(--surface-card));color:var(--red)}

/* Renombrar inline → input look field del diseño */
.gmgr .g2-rename input{
  flex:1;min-width:0;
  background:var(--surface-card);
  border:var(--border-w) solid var(--orange);
  color:var(--text-strong);
  border-radius:var(--radius-md);
  padding:9px 12px;
  font:var(--fw-bold) 15px var(--font-body);
  outline:none;
}

/* Cuerpo (subcategorías) → bloque suave bajo la cabecera, tipo "surface" del diseño */
.gmgr .g2-body{
  padding:2px 14px 12px;
  display:flex;flex-direction:column;gap:7px;
}

/* Subfila → look ".subrow" del diseño: indentada, plana, gap 11px */
.gmgr .subrow2{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px 9px 14px;
  background:var(--surface-app);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:none;
}
.gmgr .subrow2 .s2-dot{
  width:9px;height:9px;border-radius:3px;flex:none;
  background:var(--kc,var(--accent));opacity:.85;
}
.gmgr .subrow2 .s2-name{
  flex:1;min-width:0;
  font:var(--type-body);color:var(--text-body);line-height:1.3;
  word-break:break-word;overflow-wrap:anywhere;
}
/* contador subcat → pixel discreto (.sc del diseño) */
.gmgr .subrow2 .s2-count{
  font:var(--type-pixel);font-size:11px;letter-spacing:.01em;
  color:var(--text-muted);
  background:none;border:0;border-radius:0;padding:0 1px;flex:none;
}
.gmgr .subrow2 .s2-acts{display:flex;gap:4px;flex:none}
.gmgr .subrow2 .ico{
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0;
  border:0;background:none;border-radius:8px;color:var(--text-muted);
}
.gmgr .subrow2 .ico:hover{background:var(--surface-raised);color:var(--text-body);border-color:transparent}
.gmgr .subrow2 .ico svg{width:15px;height:15px}
.gmgr .subrow2 .ico.danger:hover{background:color-mix(in srgb,var(--red) 14%,var(--surface-card));color:var(--red)}

/* fila "agregar subcategoría" → tono muted del diseño */
.gmgr .g2-empty{font:var(--type-body);color:var(--text-muted);padding:4px 2px}
.gmgr .g2-addrow{display:flex;gap:8px;margin-top:2px}
.gmgr .g2-addrow input{
  flex:1;background:var(--surface-app);border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);padding:9px 12px;font:var(--type-body);color:var(--text-body);
}

/* chip de seguridad "nada se pierde" → look anti-culpa del diseño (verde suave) */
.ges-safe{
  display:inline-flex;align-items:center;gap:7px;
  background:color-mix(in srgb,var(--leaf) 12%,var(--surface-card));
  border:var(--border-w) solid color-mix(in srgb,var(--leaf) 32%,transparent);
  color:color-mix(in srgb,var(--leaf) 82%,black);
  border-radius:var(--radius-pill);
  padding:7px 13px;font:var(--type-tag);font-weight:var(--fw-bold);margin:4px 0 8px;
}

/* breadcrumb → tono del diseño */
.crumbs{color:var(--text-muted);font-weight:var(--fw-semibold)}
.crumbs b{color:var(--text-strong)}

/* ---------- (2) MODALES (borrar / mover) → look ".sheet" del diseño ---------- */
.modal-bg{background:var(--surface-overlay,rgba(4,7,13,.66))}
.modal-bg .modal{
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);
  padding:22px;max-width:380px;
}
.modal-bg .modal.gm-modal h3{
  font:var(--type-section);color:var(--text-strong);
  margin:0 0 4px;display:flex;align-items:center;gap:9px;
}
.modal-bg .modal.gm-modal p{
  margin:0 0 14px;font:var(--type-body);color:var(--text-body);line-height:1.45;
}
.modal-bg .modal.gm-modal p b{color:var(--text-strong)}
.modal-bg .modal.gm-modal label.lbl{
  display:block;font:var(--type-tag);font-weight:var(--fw-bold);
  color:var(--text-muted);margin:0 0 6px;text-transform:none;letter-spacing:0;
}
.modal-bg .modal.gm-modal select{
  width:100%;background:var(--surface-app);border:var(--border-w) solid var(--line);
  color:var(--text-body);border-radius:var(--radius-md);padding:11px 12px;font:var(--type-body);outline:none;
}
.modal-bg .modal.gm-modal .gm-foot{display:flex;gap:9px;justify-content:flex-end;margin-top:18px}
/* botón destructivo del modal → rojo sólido (igual que el diseño "Vaciar papelera") */
.modal-bg .modal.gm-modal .btn.danger{
  background:var(--red);color:#fff;border-color:var(--red);
  box-shadow:0 3px 0 0 color-mix(in srgb,var(--red) 55%,black);
  font-weight:var(--fw-bold);
}
.modal-bg .modal.gm-modal .btn.danger:active{
  transform:translateY(3px);box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 55%,black);
}

/* ---------- (3) PAPELERA (.pwrap > .pbanner + .trow) → look ".listrow" ---------- */
.pwrap{display:flex;flex-direction:column;gap:9px;margin-top:10px}

/* banner anti-culpa "nada se borra" → verde suave del diseño */
.pbanner{
  display:flex;gap:11px;align-items:flex-start;
  background:color-mix(in srgb,var(--leaf) 12%,var(--surface-card));
  border:var(--border-w) solid color-mix(in srgb,var(--leaf) 32%,transparent);
  border-radius:var(--radius-md);
  padding:12px 14px;font:var(--type-body);line-height:1.4;color:var(--text-body);
}
.pbanner .pbi{
  flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  background:color-mix(in srgb,var(--leaf) 20%,var(--surface-card));
  color:color-mix(in srgb,var(--leaf) 82%,black);
}
.pbanner .pbi svg{width:17px;height:17px}
.pbanner b{color:var(--text-strong)}

/* fila de carta descartada → look listrow del diseño */
.trow{
  display:flex;align-items:center;gap:12px;
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);
  padding:12px 14px;box-shadow:none;
  transition:background var(--dur-fast,.16s);
}
.trow:hover{background:var(--surface-raised)}
/* punto de color de la categoría (la app no tiene .lr-mini; mantenemos el dot) */
.trow .tdot{flex:0 0 auto;width:9px;height:9px;border-radius:50%}
.trow .tx{flex:1 1 auto;min-width:0}
/* título → como .lr-t pero conservando el tachado "descartada" propio de la app */
.trow .tt{
  font:var(--fw-semibold) 14px var(--font-body);
  color:var(--text-strong);
  text-decoration:line-through;
  text-decoration-color:color-mix(in srgb,var(--text-muted) 70%,transparent);
  opacity:.8;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.trow .tm{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:2px;
  font:var(--type-tag);color:var(--text-muted);
}
.trow .cattag{display:inline-flex;align-items:center;gap:6px}
.trow .cattag .d{width:7px;height:7px;border-radius:50%}
/* contador de días restantes → .lr-r del diseño */
.trow .age{
  flex:0 0 auto;font:var(--type-tag);color:var(--text-muted);
  white-space:nowrap;text-align:right;padding:0 2px;letter-spacing:0;
}
.trow .tact{flex:0 0 auto;display:flex;gap:6px}
/* botón Recuperar → look ".btn--sec" del diseño (gris card con borde), no verde */
.trow .tres{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:var(--radius-md);
  font:var(--fw-semibold) 13px var(--font-body);
  padding:8px 12px;cursor:pointer;
  color:var(--text-body);
  background:var(--surface-card);
  border:var(--border-w) solid var(--line2,var(--line));
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur-fast,.16s),background var(--dur-fast,.16s);
}
.trow .tres:hover{background:var(--surface-raised)}
.trow .tres:active{transform:translateY(1px) scale(.99);box-shadow:none}
.trow .tres svg{width:15px;height:15px}
.trow .tres[disabled]{opacity:.55;pointer-events:none}

@media(max-width:560px){
  .trow{flex-wrap:wrap}
  .trow .age{order:3}
  .trow .tact{order:4;width:100%}
  .trow .tres{flex:1;justify-content:center}
}

/* ===== Ajustes + Onboarding ===== */
/* ============================================================
   v2-skin.css — ÁREA: Ajustes (renderSetup) + Onboarding
   Re-estila las clases REALES de la app al look de Claude Design.
   Solo var(--*) de deckdo-tokens.css. Carga DESPUÉS del <style>
   inline; specificidad igualada/superada para ganar.
   ============================================================ */

/* ---------- AJUSTES: contenedor ---------- */
.setup{
  padding:22px 18px 40px;
  max-width:760px;
  margin-inline:auto;
}

/* Botón "Volver al inicio" arriba — pill secundario suave */
.setup .setup-back-top{
  color:var(--orange);
  border:var(--border-w) solid color-mix(in srgb,var(--orange) 38%,transparent);
  background:var(--surface-card);
  box-shadow:var(--shadow-xs);
}

/* Encabezados de sección (h2/h3) → tipografía display del sistema */
.setup h2{
  font:var(--type-title);
  color:var(--text-strong);
  letter-spacing:var(--tracking-tight);
  margin:14px 0 6px;
}
.setup h3{
  font:var(--type-section);
  color:var(--text-strong);
  display:flex;align-items:center;gap:9px;
  margin:12px 0 4px;
}

/* Texto de ayuda / captions */
.setup .hint,
.setup p.hint{
  font:var(--type-caption);
  color:var(--text-muted);
  line-height:var(--leading-normal);
  margin:10px 2px;
}
.setup .hint b{ color:var(--text-strong); font-weight:var(--fw-semibold); }

/* Separadores → hairline de tokens (los inline usan var(--line), reforzamos color/grosor) */
.setup hr{
  border:0 !important;
  border-top:var(--border-w) solid var(--line) !important;
  margin:24px 0 8px !important;
  opacity:1;
}

/* ---------- AJUSTES: labels + inputs (estilo .field del diseño) ---------- */
/* Las reglas inline usan vars legacy (--panel/--mut/--txt/--acc); las repintamos a tokens. */
.setup label{
  display:block;
  font:var(--type-tag);
  text-transform:uppercase;
  letter-spacing:var(--tracking-wide);
  color:var(--text-muted);
  margin:16px 0 7px;
}

.setup input{
  width:100%;
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  color:var(--text-body);
  border-radius:var(--radius-md);
  padding:13px 14px;
  font:var(--type-body);
  outline:none;
  box-shadow:var(--shadow-xs);
  transition:border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.setup input::placeholder{ color:var(--text-faint); }
.setup input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}

/* ---------- AJUSTES: botones (look del sistema, beat de .btn legacy) ---------- */
/* Primario "Guardar y probar": naranja con sombra-card del diseño */
.setup .btn{
  width:100%;
  border:0;
  border-radius:var(--radius-md);
  padding:14px;
  font:var(--fw-bold) var(--text-base)/1 var(--font-body);
  color:var(--accent-ink);
  background:var(--accent);
  box-shadow:0 4px 0 0 color-mix(in srgb,var(--accent) 58%,black),var(--glow-accent);
  transition:transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             filter var(--dur-fast) var(--ease-out);
}
.setup .btn:hover{ filter:brightness(1.03); }
.setup .btn:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 0 color-mix(in srgb,var(--accent) 58%,black),var(--glow-accent);
}
.setup .btn:disabled{ opacity:.55; filter:none; }

/* Secundarios (revisar, IA, gestionar, papelera, volver): tarjeta cream con outline */
.setup .btn.sec{
  background:var(--surface-card);
  border:var(--border-w) solid var(--line);
  color:var(--text-body);
  box-shadow:0 3px 0 0 var(--cream-300);
  font-weight:var(--fw-semibold);
}
.setup .btn.sec:hover{ border-color:var(--line-strong); }
.setup .btn.sec:active{
  transform:translateY(3px);
  box-shadow:0 0 0 0 var(--cream-300);
}

/* Badge "Para revisar" (#revBadge .badge) → pill de acento del sistema */
.setup .btn.sec .badge,
.setup .badge{
  display:inline-block;min-width:18px;text-align:center;
  background:var(--accent);color:var(--accent-ink);
  font:var(--type-tag);
  border-radius:var(--radius-pill);
  padding:2px 8px;margin-left:6px;
}

/* Spinner de los procesos IA → toma el color del texto sobre acento */
.setup .spin{
  border:2px solid color-mix(in srgb,var(--accent-ink) 40%,transparent);
  border-top-color:var(--accent-ink);
}

/* ---------- AJUSTES: header de perfil navy (refinos sobre lo ya tokenizado) ---------- */
.setup .setprofile{
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md);
  background:var(--surface-ink);
}
.setup .setprofile .sp-av{
  border:var(--border-w-bold) solid var(--mustard);
  box-shadow:var(--shadow-sm);
}

/* ---------- AJUSTES: chips de perfil (#perfChips .chip) ---------- */
.setup .chips{ display:flex;flex-wrap:wrap;gap:8px; }
.setup .chips .chip{
  font:var(--type-caption);
  font-weight:var(--fw-semibold);
  padding:8px 14px;
  border-radius:var(--radius-pill);
  border:var(--border-w) solid var(--line);
  background:var(--surface-card);
  color:var(--text-muted);
  cursor:pointer;
  box-shadow:var(--shadow-xs);
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.setup .chips .chip:hover{ border-color:var(--line-strong); color:var(--text-body); }
.setup .chips .chip.on{
  background:var(--navy-800);
  color:#fff;
  border-color:transparent;
}
/* "+ nuevo" como chip discreto de acento */
.setup .chips .chip[data-p="__new__"]{
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,var(--surface-card));
}

/* Botones de renombrar/borrar perfil (row de .btn.sec) — ya heredan .setup .btn.sec */

/* ============================================================
   ONBOARDING (.onb-*) — refinos al look del sistema
   (la estructura ya está tokenizada; ajustamos remates)
   ============================================================ */

/* Tarjeta general */
.onb-card{
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-xl);
  background:var(--surface-app);
}

/* Hero navy con glow mustard (consistente con .inkpanel/vbar del diseño) */
.onb-hero{
  background:radial-gradient(120% 90% at 30% 0%,var(--navy-800),var(--navy-900));
}
.onb-hero .wm{ font-family:var(--font-display);font-weight:var(--fw-extra); }
.onb-hero .wm b{ color:var(--accent); }
.onb-hero .htag{
  font:var(--type-pixel);
  letter-spacing:.12em;
  color:var(--mustard);
}
.onb-hero .hwel{
  font:var(--type-title);
  color:#fff;
}

/* Cuerpo: kicker pixel + título display */
.onb-kick{
  font:var(--type-pixel);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--accent);
}
.onb-card h2{
  font:var(--type-display);
  letter-spacing:var(--tracking-tight);
  color:var(--text-strong);
}
.onb-card p{ font:var(--type-body); color:var(--text-muted); }
.onb-card p b{ color:var(--text-strong); font-weight:var(--fw-semibold); }

/* Dots de progreso → acento activo */
.onb-dots i{ background:var(--navy-200); }
.onb-dots i.on{ background:var(--accent); }

/* Tip (pista) → panel navy del sistema */
.onb-tip{
  background:var(--navy-800);
  color:var(--cream-50);
  border-radius:var(--radius-sm);
  font:var(--type-caption);
}

/* Acciones: CTA usa .btn.play (ya tokenizado); skip discreto */
.onb-actions .btn.play{
  border-radius:var(--radius-pill);
  font-weight:var(--fw-extra);
  box-shadow:0 4px 0 0 color-mix(in srgb,var(--orange) 58%,black),var(--glow-accent);
}
.onb-actions .skip{ color:var(--text-muted); font-weight:var(--fw-semibold); }

/* Rail de pasos: celda activa con acento */
.onb-rail{ background:var(--line);border-top:var(--border-w) solid var(--line); }
.onb-rcell{ background:var(--surface-app); }
.onb-rcell.on .orn{ color:var(--accent); }
.onb-rcell.on .orn .b{
  background:var(--accent);
  color:var(--accent-ink);
  border-color:var(--accent);
}
.onb-rcell .ort{ font-family:var(--font-display);color:var(--text-strong); }
.onb-rcell .ord{ color:var(--text-muted); }
/* Anti-tip "Hoy ando con poca energía" → píldora navy con luna mustard */
.onb-rcell .antip{
  background:var(--navy-900);
  color:#fff;
  border-radius:var(--radius-pill);
  font:var(--type-tag);
}
.onb-rcell .antip svg{ color:var(--mustard); }
/* NAIPE DESTACADO ("tu mejor jugada ahora") en Recomendados */
/* ════════ NAIPE DESTACADO ("tu mejor jugada ahora") · Recomendados ════════
   Clases nuevas y únicas (prefijo v2-) para no chocar con el sistema.
   Solo var(--*) de deckdo-tokens.css; #fff solo sobre fondo saturado. */

/* La carta destacada ocupa el ancho completo de la mano y resalta del resto. */
.card.v2-card-feat{ grid-column: 1 / -1; }
.card.v2-card-feat .nf-card.v2-feat{
  border: 2px solid color-mix(in srgb, var(--mustard) 70%, transparent);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--mustard) 16%, transparent),
    0 14px 34px -16px color-mix(in srgb, var(--navy-900, #1c1b2e) 45%, transparent);
}

/* Banda "Tu mejor jugada ahora" con la estrella. */
.v2-reason{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin: 0 0 8px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mustard) 22%, transparent);
  color: var(--text-body, var(--navy-900));
  font: var(--fw-bold, 700) 12px/1.1 var(--font-body, inherit);
  letter-spacing: .01em;
  white-space: nowrap;
}
.v2-reason .ic{
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--mustard);
}

/* Título más grande en la carta destacada. */
.nt.v2-nt-feat{
  font-size: clamp(18px, 4.6vw, 22px);
  line-height: 1.18;
}

/* Dos acciones secundarias bajo "Jugar carta": Posponer / Ver detalle. */
.v2-feat-acts{
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.v2-feat-acts .btn{
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.v2-feat-acts .ic{
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* INSIGHTS — donut "Balance por área" (conic-gradient + leyenda por categoría) + logros hexagonales (clip-path) */
/* === INSIGHTS v2 · Balance por área (donut conic-gradient + leyenda) === */
.v2-bal{display:flex;align-items:center;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.v2-donut{width:148px;height:148px;border-radius:50%;display:grid;place-items:center;flex:none}
.v2-donut-hole{width:100px;height:100px;border-radius:50%;background:var(--surface-card);display:grid;place-items:center;text-align:center;box-shadow:inset 0 2px 6px rgba(0,0,0,.10)}
.v2-donut-n{font-family:var(--font-display);font-weight:800;font-size:24px;line-height:1;color:var(--text-strong)}
.v2-donut-l{font-size:10px;color:var(--mut);margin-top:3px;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-bal-legend{flex:1;min-width:150px;display:flex;flex-direction:column;gap:7px}
.v2-bal-lg{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-body)}
.v2-bal-d{width:11px;height:11px;border-radius:3px;flex:none}
.v2-bal-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-bal-pc{margin-left:auto;font-weight:600;font-size:13px;color:var(--text-strong)}

/* === INSIGHTS v2 · Logros hexagonales (clip-path) === */
.v2-hexrow{display:flex;flex-wrap:wrap;gap:12px}
.v2-hex{display:flex;flex-direction:column;align-items:center;gap:6px;width:64px}
.v2-hex-b{width:58px;height:64px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;flex:none;background:var(--surface-sunken);color:var(--navy-200);font-size:24px;transition:transform .12s ease}
.v2-hex.on .v2-hex-b{background:linear-gradient(150deg,var(--accent),color-mix(in srgb,var(--accent) 58%,var(--mustard)));color:var(--accent-ink)}
.v2-hex.on:hover .v2-hex-b{transform:translateY(-2px)}
.v2-hex-t{font-size:10.5px;line-height:1.2;text-align:center;color:var(--text-body);max-width:64px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.v2-hex.locked .v2-hex-t{color:var(--mut)}
.v2-hex-p{font-size:9.5px;color:var(--mut)}

/* POMODORO en Modo Foco/Tarea — anillo conic-gradient (25:00) con start/pausa, que aparece SOLO cuando el foco está activo dentro del acordeón "Paso a paso" del runner. */
/* ── Pomodoro en Modo Foco (port del diseño en-progreso.html) ───────────────
   Anillo conic-gradient + cronómetro. Nombres v2- propios para no chocar con el
   sistema. Solo var(--*) de tokens; #fff solo sobre color saturado. */
.v2-pomo-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;margin:16px auto 4px;animation:v2pomoIn .25s ease}
@keyframes v2pomoIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.v2-pomo{--p:0;width:188px;height:188px;border-radius:50%;display:grid;place-items:center;margin:0 auto;
  background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--surface-sunken) 0)}
.v2-pomo .v2-pomo-in{width:158px;height:158px;border-radius:50%;background:var(--surface-card);display:grid;place-items:center;text-align:center;box-shadow:var(--shadow-inset,inset 0 2px 6px rgba(0,0,0,.12))}
.v2-pomo .v2-pomo-tm{font:var(--type-pixel-lg);font-size:42px;line-height:1;color:var(--text-strong);font-variant-numeric:tabular-nums}
.v2-pomo .v2-pomo-tl{font:var(--type-tag);color:var(--text-muted);margin-top:4px}
.v2-pomo-btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  border-radius:var(--radius-pill);padding:13px 26px;font-size:14px;font-weight:700;
  background:var(--accent);color:var(--accent-ink,#fff);transition:filter .15s,transform .08s}
.v2-pomo-btn:hover{filter:brightness(1.04)}
.v2-pomo-btn:active{transform:scale(.97)}
.v2-pomo-hint{font:var(--type-tag);color:var(--text-muted);text-align:center;max-width:230px;margin:0}
@media (prefers-reduced-motion:reduce){.v2-pomo-wrap{animation:none}}

/* Toggles (switches) en Ajustes — Gamificación + Apariencia/Modo bajo */
/* ── v2-toggle: switches on/off para Ajustes (Gamificación + Apariencia). Solo tokens. ── */
.v2-tile{background:var(--surface-card,var(--card,#fff));border:1px solid var(--line);border-radius:14px;padding:6px 14px}
.v2-tile-h{font-weight:700;font-size:15px;color:var(--text-strong,var(--fg));display:flex;align-items:center;gap:8px;padding:12px 2px 6px}
.v2-tile-h svg{width:17px;height:17px;color:var(--acc,var(--brand));fill:none;stroke:currentColor;stroke-width:2}
.v2-setrow{display:flex;align-items:center;gap:12px;padding:12px 2px;margin:0;cursor:pointer}
.v2-setrow + .v2-setrow{border-top:1px solid var(--line)}
.v2-si{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--surface-raised,var(--bg2,rgba(0,0,0,.04)));color:var(--mut)}
.v2-si svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.v2-sb{flex:1;min-width:0;display:flex;flex-direction:column}
.v2-st{font-weight:600;font-size:14px;color:var(--text-strong,var(--fg))}
.v2-ss{font-size:12px;color:var(--mut);margin-top:1px}
.v2-toggle{appearance:none;-webkit-appearance:none;width:46px;height:27px;border-radius:999px;background:var(--surface-sunken,var(--bg2,rgba(0,0,0,.12)));border:1px solid var(--line);cursor:pointer;position:relative;flex:none;margin:0;transition:background .15s ease,border-color .15s ease}
.v2-toggle::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.v2-toggle:checked{background:var(--acc,var(--brand));border-color:transparent}
.v2-toggle:checked::after{transform:translateX(19px)}
.v2-toggle:focus-visible{outline:2px solid var(--acc,var(--brand));outline-offset:2px}

/* COMPRAS agrupadas por rubro */
/* ── Compras agrupadas por rubro (v2) ── */
.v2-shopgroups{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.v2-shopgroup{background:var(--surface-card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:6px 14px 8px;display:flex;flex-direction:column}
.v2-gh{display:flex;align-items:center;gap:9px;padding:11px 0 9px;font-weight:800;font-size:15px;color:var(--text-strong)}
.v2-gh-ic{font-size:17px;line-height:1;flex:0 0 auto}
.v2-gh-nm{flex:1 1 auto;min-width:0;word-break:break-word}
.v2-gh-ct{margin-left:auto;flex:0 0 auto;font-size:12px;font-weight:700;color:var(--text-muted)}
/* la lista dentro del grupo: sin doble borde/fondo, hereda los .shoprow existentes */
.v2-shopgroup .v2-shoplist{margin-top:0;border:0;border-radius:0;overflow:visible;background:transparent}
.v2-shopgroup .v2-shoplist .shoprow{padding-left:0;padding-right:0;border-bottom:1px solid var(--line)}
.v2-shopgroup .v2-shoplist .shoprow:last-child{border-bottom:0}
.v2-shopgroup .v2-shoplist .shoprow:hover{background:transparent}

/* Papelera — botón "Vaciar papelera" (header) + modal de confirmación + borrar-para-siempre por fila (icono basura roja), portado del diseño categorias-papelera.html a renderPapelera. */
/* ── Papelera v2: header con "Vaciar papelera", icono borrar-por-fila y modal ── */
.v2-trash-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.v2-trash-head h2{flex:1 1 auto;min-width:0}
.v2-trash-empty{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:13px;font-weight:700;padding:8px 12px;border-radius:var(--radius-pill);
  color:var(--red);background:color-mix(in srgb,var(--red) 9%,var(--surface-card));
  border:1.5px solid color-mix(in srgb,var(--red) 32%,transparent)}
.v2-trash-empty:hover{background:color-mix(in srgb,var(--red) 16%,var(--surface-card))}
.v2-trash-empty:active{transform:translateY(1px)}
.v2-trash-empty[disabled]{opacity:.5;pointer-events:none}
.v2-trash-empty svg{width:15px;height:15px}
.v2-purge{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  border-radius:var(--radius-md);color:var(--red);background:transparent;
  border:1.5px solid color-mix(in srgb,var(--red) 26%,transparent)}
.v2-purge:hover{background:color-mix(in srgb,var(--red) 12%,transparent)}
.v2-purge:active{transform:translateY(1px)}
.v2-purge[disabled]{opacity:.5;pointer-events:none}
.v2-purge svg{width:16px;height:16px}
/* modal de confirmación danger (reutiliza .modal-bg / .modal del sistema) */
.v2-trash-modal h3{margin:0 0 6px;display:flex;align-items:center;gap:8px;font-size:17px;color:var(--text-strong)}
.v2-trash-modal h3 .v2-tm-ic{color:var(--red);display:inline-flex}
.v2-trash-modal h3 .v2-tm-ic svg{width:18px;height:18px}
.v2-trash-modal p{margin:0 0 14px;font-size:14px;line-height:1.45;color:var(--text-body)}
.v2-trash-modal p b{color:var(--text-strong)}
.v2-trash-foot{display:flex;gap:9px;margin-top:4px}
.v2-trash-foot .btn{flex:1}
.v2-trash-foot .v2-tm-danger{background:var(--red);color:#fff;border:0}
.v2-trash-foot .v2-tm-danger:hover{filter:brightness(1.04)}