/* ==========================================================================
   QuVi · Overlay (Plan Detail) — CSS PRO (inline-compact)
   - Limpieza: agrupa bases, reduce duplicación, mantiene look & contract
   - Tokens: se apoyan en core.css (surface/tint/separator/radius/shadows)
   ========================================================================== */

/* ==========================================================================
   00) Tokens (overlay) — base + look
   ========================================================================== */
:root{
  /* Layout */
  --pd-maxw:1260px;
  --pd-h:95vh;
  --pd-radius:18px;
  --pd-sidebar-w:248px;
  --pd-pad-x:clamp(14px,2vw,18px);
  --pd-pad-y:14px;

  /* Text */
  --pd-ink:var(--label,#111827);
  --pd-ink-mute:color-mix(in oklch,var(--secondary,#6b7280) 92%,transparent 8%);

  /* Borders */
  --pd-border:color-mix(in oklch,var(--separator,#e6eaf0) 75%,transparent 25%);
  --pd-border-strong:color-mix(in oklch,var(--separator,#e6eaf0) 90%,transparent 10%);

  /* States */
  --pd-hover:color-mix(in oklch,var(--surface,#fff) 92%,var(--tint,#0d99ff) 8%);
  --pd-active:color-mix(in oklch,var(--surface,#fff) 90%,var(--tint,#0d99ff) 10%);

  /* Stage background */
  --pd-stage-bg:
    radial-gradient(900px 360px at 22% 0%,
      color-mix(in oklch,var(--tint,#0d99ff) 14%,transparent),
      transparent 52%),
    radial-gradient(820px 320px at 78% 6%,
      rgba(124,58,237,.08),
      transparent 55%),
    linear-gradient(180deg,#fbfcfe 0%,#f7f9fd 45%,#f2f5fb 100%);

  /* Panels */
  --pd-panel-bg:color-mix(in oklch,var(--surface,#fff) 84%,transparent);
  --pd-panel-bg2:color-mix(in oklch,var(--surface,#fff) 72%,transparent);

  /* Shadows */
  --pd-shadow:0 -10px 34px rgba(15,23,42,.18);
  --pd-card-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 18px rgba(2,6,23,.05);
  --pd-card-shadow-strong:0 2px 4px rgba(15,23,42,.05),0 10px 26px rgba(2,6,23,.07);

  /* Buttons */
  --pd-btn-radius:var(--rad-btn,9999px);
  --pd-btn-border:color-mix(in oklch,var(--separator,#e6eaf0) 70%,rgba(15,23,42,.22) 30%);
  --pd-btn-border-hover:color-mix(in oklch,var(--separator,#e6eaf0) 55%,rgba(15,23,42,.30) 45%);
  --pd-btn-bg:color-mix(in oklch,var(--surface,#fff) 82%,transparent);
  --pd-btn-bg-hover:color-mix(in oklch,var(--surface,#fff) 92%,transparent);

  /* Pills */
  --pd-pill-border:color-mix(in oklch,var(--separator,#e6eaf0) 70%,rgba(15,23,42,.16) 30%);
  --pd-pill-bg:color-mix(in oklch,var(--surface,#fff) 70%,transparent);

  /* Tones (canónicos) */
  --pd-c-success-95: rgba(34,197,94,.95);
  --pd-c-danger-95:  rgba(239,68,68,.95);

  /* Tones (semantic aliases usados por vistas) */
  --pd-tone-good-a: var(--pd-c-success-95);
  --pd-tone-good-b: rgba(6,182,212,.55);

  --pd-tone-risk-a: var(--pd-c-danger-95);
  --pd-tone-risk-b: rgba(245,158,11,.55);

  --pd-tone-rec-a: rgba(0.72 0.21 250);
  --pd-tone-rec-b: rgba(124,58,237,.55);

  --pd-tone-ctx-a: rgba(245,158,11,.92);
  --pd-tone-ctx-b: rgba(34,197,94,.45);

  /* Chevron estándar (fuente de verdad para TODO el overlay) */
  --pd-chv-size:6px;
  --pd-chv-stroke:2px;
  --pd-chv-color:color-mix(in oklch,var(--pd-ink) 58%,transparent 42%);
  --pd-chv-dur:140ms;

  /* ==========================================================================
     Tokens “legacy exactos” (compat look actual) — compartidos
     - Úsalos solo cuando NO quieras color-mix (match exacto visual)
     ========================================================================== */

  /* Glass / surfaces exactas */
  --pd-glass-62:rgba(255,255,255,.62);
  --pd-glass-60:rgba(255,255,255,.60);
  --pd-glass-58:rgba(255,255,255,.58);
  --pd-glass-56:rgba(255,255,255,.56);

  /* Soft fills exactos */
  --pd-soft-04:rgba(15,23,42,.04);
  --pd-soft-05:rgba(15,23,42,.05);
  --pd-soft-06:rgba(15,23,42,.06);
  --pd-soft-08:rgba(15,23,42,.08);

  /* Ink “legacy exacta” */
  --pd-ink-95:rgba(15,23,42,.95);
  --pd-ink-92:rgba(2,6,23,.92);
  --pd-ink-90:rgba(2,6,23,.90);
  --pd-ink-88:rgba(15,23,42,.88);
  --pd-ink-86:rgba(2,6,23,.86);
  --pd-ink-82:rgba(15,23,42,.82);
  --pd-ink-80:rgba(2,6,23,.80);
  --pd-ink-70:rgba(2,6,23,.70);
  --pd-ink-68:rgba(15,23,42,.68);
  --pd-ink-66:rgba(15,23,42,.66);
  --pd-ink-65:rgba(15,23,42,.65);
  --pd-ink-62:rgba(15,23,42,.62);
  --pd-ink-58:rgba(15,23,42,.58);
  --pd-ink-55:rgba(15,23,42,.55);
  --pd-ink-52:rgba(15,23,42,.52);
  --pd-ink-45:rgba(15,23,42,.45);

  /* =========================
     Separadores (CANÓNICO overlay)
     - Fuente de verdad para tablas / KVS / listas con separador
     ========================= */
  --pd-dash-color:color-mix(in oklch,var(--pd-ink) 16%,transparent 84%);
  --pd-dash:1px dashed var(--pd-dash-color);

  /* Legacy dashed */
  --pd-dash-12:rgba(15,23,42,.12);
  --pd-dash-14:rgba(15,23,42,.14);
  --pd-dash-22:rgba(15,23,42,.22);

  /* =========================
     Tablas (CANÓNICO overlay)
     - Una sola “fuente de verdad”
     ========================= */
  --pd-table-radius:14px;
  --pd-table-pad-y:8px;
  --pd-table-pad-x:12px;
  --pd-table-fs:13px;
  --pd-table-lh:1.35;

  --pd-table-ink:color-mix(in oklch,var(--pd-ink) 86%,transparent 14%);
  --pd-table-ink-soft:color-mix(in oklch,var(--pd-ink) 82%,transparent 18%);
  --pd-table-ink-strong:color-mix(in oklch,var(--pd-ink) 92%,transparent 8%);
  --pd-table-head-ink:var(--pd-ink-mute);

  /* Caja “table-card” (misma familia que tus cards/kvs) */
  --pd-table-bg:color-mix(in oklch,var(--surface,#fff) 88%,color-mix(in oklch,var(--pd-ink) 8%,transparent 92%) 12%);
  --pd-table-shadow:inset 0 1px 0 rgba(255,255,255,.55);

  /* Badges */
  --pd-badge-bg:var(--pd-glass-62);
  --pd-badge-model:rgba(2,132,199,.08);
  --pd-badge-det:rgba(15,23,42,.05);
  --pd-badge-nope: color-mix(in oklch, var(--pd-c-danger-95) 12%, transparent);

  /* Pills */
  --pd-pill-bg-soft:rgba(15,23,42,.06);
}

/* ==========================================================================
   01) Accesibilidad — Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .plan-detail-backdrop,
  .plan-detail-panel,
  .plan-detail-navitem,
  .pd-view,
  .sk::after{
    transition:none!important;
    animation:none!important;
    transform:none!important;
  }
  .pd-acc > summary::after{transition:none!important;}
}

/* ==========================================================================
   Accordion base (details/summary) — MINIMAL · CANÓNICO
   ========================================================================== */

/* Shell */
.pd-acc{
  display:block;
  margin:12px 0;
}

/* Nested: acordeones dentro de un body no deben dejar “cola” abajo */
.pd-acc-body > .pd-acc{margin:12px 0 0;}
.pd-acc-body > .pd-acc:first-child{margin-top:0;}
.pd-acc-body > .pd-acc:last-child{margin-bottom:0;}

/* Summary */
.pd-acc > summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.pd-acc > summary::-webkit-details-marker{display:none;}

/* Title / Sub (editorial core) */
.pd-acc-title{
  font-size:13px;
  font-weight:600;
  line-height:1.25;
  color:color-mix(in oklch,var(--pd-ink) 92%,transparent 8%);
}
.pd-acc-sub{
  font-size:12.5px;
  line-height:1.45;
  color:var(--pd-ink-mute);
  margin-top:4px;
}

/* Chevron */
.pd-acc > summary::after{
  content:"";
  width:var(--pd-chv-size);
  height:var(--pd-chv-size);
  border-right:var(--pd-chv-stroke) solid var(--pd-chv-color);
  border-bottom:var(--pd-chv-stroke) solid var(--pd-chv-color);
  transform:rotate(45deg);
  transform-origin:50% 50%;
  flex:0 0 auto;
  margin-top:2px;
  transition:transform var(--pd-chv-dur) ease;
}
.pd-acc[open] > summary::after{
  transform:rotate(225deg);
}

/* Body */
.pd-acc-body{
  display:block;
  padding-top:12px;
}

/* Focus */
.pd-acc > summary:focus-visible{
  outline:2px solid color-mix(in oklch,var(--pd-ink) 22%,transparent);
  outline-offset:4px;
  border-radius:12px;
}

.pd-acc-head{min-width:0;flex:1 1 auto;}
.pd-acc-title,.pd-acc-sub{min-width:0;}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .pd-acc > summary::after{transition:none;}
}

/* Manual: en cerrado NO mostramos subtítulo (solo título). */
.pd-acc:not([open]) .pd-acc-sub{display:none;}

/* ==========================================================================
   03) Utilities (shared) — badges / muted / mono
   ========================================================================== */
.pd-badge{
  display:inline-flex;align-items:center;
  padding:6px 10px;border:0;border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:-.01em;
  background:var(--pd-badge-bg);
  box-shadow:var(--pd-card-shadow);
  color:var(--pd-ink-86);
}
.pd-badge--model{background:var(--pd-badge-model);}
.pd-badge--det{background:var(--pd-badge-det);}
.pd-badge--nope{background:var(--pd-badge-nope);}

.pd-sep{opacity:.55;margin:0 6px;}
.pd-muted{font-size:12px;line-height:1.35;color:var(--pd-ink-62);}
.pd-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}

/* ==========================================================================
   02) Backdrop (overlay)
   ========================================================================== */
.plan-detail-backdrop{
  position:fixed;inset:0;z-index:var(--z-modal,2000);
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(15,23,42,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;
  transition:opacity .18s ease-out;
}
.plan-detail-backdrop.is-open{opacity:1;pointer-events:auto;}

/* ==========================================================================
   03) Panel (container)
   ========================================================================== */
.plan-detail-panel{
  width:100%;max-width:var(--pd-maxw);
  height:var(--pd-h);min-height:var(--pd-h);max-height:var(--pd-h);
  background:var(--surface,#fff);color:var(--pd-ink);
  border-radius:var(--pd-radius) var(--pd-radius) 0 0;
  border:1px solid var(--pd-border-strong);border-bottom:0;
  box-shadow:var(--pd-shadow);
  transform:translateY(100%);
  transition:transform .22s cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column;
  contain:layout paint;
  overflow:hidden;
}
.plan-detail-backdrop.is-open .plan-detail-panel{transform:translateY(0);}
.plan-detail-panel.dragging{transition:none!important;}

/* ==========================================================================
   04) Handle
   ========================================================================== */
.plan-detail-handle{
  width:44px;height:4px;border-radius:999px;
  background:color-mix(in oklch,var(--separator,#e6eaf0) 80%,transparent 20%);
  margin:10px auto 6px;
}

/* ==========================================================================
   05) Header (top bar)
   ========================================================================== */
.plan-detail-header{
  padding:10px var(--pd-pad-x) 12px;
  border-bottom:1px solid var(--pd-border);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  cursor:grab;user-select:none;
  background:color-mix(in oklch,var(--surface,#fff) 82%,transparent 18%);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
}
.pd-hl{display:flex;align-items:center;gap:10px;min-width:0;}
.pd-titles{display:flex;flex-direction:column;min-width:0;}
.pd-title{font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--pd-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pd-sub{margin-top:3px;font-size:12px;line-height:1.2;color:var(--pd-ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pd-hr{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;}

/* Price pill (header right) */
.pd-price{
  display:flex;flex-direction:column;align-items:flex-end;
  padding:8px 10px;border-radius:12px;border:0;
  min-width:170px;
  background:color-mix(in oklch,var(--surface,#fff) 92%,var(--fill,#f4f6fa) 8%);
  background-clip:padding-box;
}
.pd-price-label{font-size:12px;opacity:.7;}
.pd-price-value{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;}

/* ==========================================================================
   05.1) Buttons (unificado)
   - Base: ghost/secondary/more (misma familia)
   - CTA: primario (único con peso 700)
   ========================================================================== */

/* Base button (ghost / secondary / more) */
.pd-btn-ghost,.pd-activity-more,.plan-detail-cta.is-secondary{
  appearance:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:13px;line-height:1;
  cursor:pointer;text-decoration:none;
  padding:10px 12px;border-radius:14px;
  border:1px solid var(--pd-btn-border);
  background:var(--pd-btn-bg);
  color:color-mix(in oklch,var(--pd-ink) 78%,transparent 22%);
  box-shadow:none;
  background-clip:padding-box;
  transition:background .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease;
}
@media (hover:hover){
  .pd-btn-ghost:hover,.pd-activity-more:hover,.plan-detail-cta.is-secondary:hover{
    background:var(--pd-btn-bg-hover);
    border-color:var(--pd-btn-border-hover);
    color:var(--pd-ink);
  }
}
.pd-btn-ghost:active,.pd-activity-more:active,.plan-detail-cta.is-secondary:active{filter:saturate(1.01);}
.pd-btn-ghost:focus-visible,.pd-activity-more:focus-visible,.plan-detail-cta.is-secondary:focus-visible{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px color-mix(in oklch,var(--tint,#0d99ff) 30%,transparent 70%);
}

/* CTA primario */
.pd-cta,.plan-detail-cta{
  appearance:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:13px;line-height:1;
  font-weight:var(--fw-bold,700);
  cursor:pointer;text-decoration:none;
  padding:9px 12px;border-radius:var(--pd-btn-radius);
  border:1px solid color-mix(in oklch,var(--tint,#0d99ff) 55%,rgba(15,23,42,.18) 45%);
  background:var(--tint,#0d99ff);
  color:var(--surface,#fff);
  box-shadow:0 1px 2px rgba(15,23,42,.06);
  background-clip:padding-box;
  transition:background .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease;
}
@media (hover:hover){
  .pd-cta:hover,.plan-detail-cta:hover{
    background:var(--tint-hover,#077ee0);
    border-color:color-mix(in oklch,var(--tint-hover,#077ee0) 60%,rgba(15,23,42,.18) 40%);
  }
}
.pd-cta:active,.plan-detail-cta:active{filter:saturate(1.02);}
.pd-cta:focus-visible,.plan-detail-cta:focus-visible{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px color-mix(in oklch,var(--tint,#0d99ff) 35%,transparent 65%);
}

/* Secondary CTA (misma familia base, mantiene radius/padding de CTA) */
.plan-detail-cta.is-secondary{
  border-radius:var(--pd-btn-radius);
  padding:9px 12px;
  background:color-mix(in oklch,var(--surface,#fff) 92%,var(--fill,#f4f6fa) 8%);
  color:var(--pd-ink);
}

/* Close button */
.pd-x{
  appearance:none;
  width:30px;height:30px;border-radius:999px;
  display:inline-grid;place-items:center;
  border:1px solid transparent;background:transparent;
  color:var(--pd-ink-mute);
  cursor:pointer;font-size:18px;line-height:1;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
@media (hover:hover){
  .pd-x:hover{
    background:color-mix(in oklch,var(--surface,#fff) 92%,var(--separator,#e6eaf0) 8%);
    color:var(--pd-ink);
    border-color:rgba(15,23,42,.10);
  }
}
.pd-x:focus-visible{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px color-mix(in oklch,var(--tint,#0d99ff) 35%,transparent 65%);
}

/* Header responsive */
@media (max-width:720px){
  .pd-price{display:none;}
  .pd-cta,.plan-detail-cta{padding:9px 12px;}
  .pd-btn-ghost,.pd-activity-more,.plan-detail-cta.is-secondary{padding:9px 12px;}
  .pd-x{width:34px;height:34px;}
}

/* ==========================================================================
   06) Layout (body)
   ========================================================================== */
.plan-detail-body{
  display:grid;
  grid-template-columns:var(--pd-sidebar-w) minmax(0,1fr);
  gap:0;height:100%;min-height:0;
}

/* ==========================================================================
   07) Sidebar / Nav
   ========================================================================== */
.plan-detail-sidebar{padding:6px 10px;min-height:0;display:flex;flex-direction:column;gap:8px;background:var(--surface,#fff);}
.plan-detail-nav{display:flex;flex-direction:column;gap:2px;padding:10px 0 8px;border-bottom:0;}

.plan-detail-navitem{appearance:none;border:0;background:transparent;width:100%;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;text-align:left;justify-content:flex-start;font:inherit;font-size:12.5px;font-weight:550;line-height:1.15;color:color-mix(in oklch,var(--secondary,#6b7280) 92%,var(--pd-ink) 8%);cursor:pointer;transition:background .12s ease,color .12s ease;padding-right:12px;}
@media (hover:hover){.plan-detail-navitem:hover{background:var(--pd-hover);color:var(--pd-ink);}}
.plan-detail-navitem.is-active,.plan-detail-navitem[aria-current="true"]{background:var(--pd-active);color:var(--pd-ink);}
.plan-detail-navitem:focus-visible{outline:2px solid transparent;box-shadow:0 0 0 3px color-mix(in oklch,var(--tint,#0d99ff) 35%,transparent 65%);}

.pd-ico .pd-icon{display:block;}
.pd-ico{display:flex;align-items:center;justify-content:flex-start;width:18px;flex:0 0 18px;color:color-mix(in oklch,var(--secondary,#6b7280) 85%,var(--pd-ink) 15%);opacity:.95;}
.plan-detail-navitem.is-active .pd-ico,.plan-detail-navitem[aria-current="true"] .pd-ico{color:var(--pd-ink);opacity:1;}

.pd-navtext{flex:1 1 auto;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Chevron CANÓNICO, fijo (NO cambia en hover ni selected) + más chico */
.plan-detail-navitem::after{content:"";width:4px;height:4px;flex:0 0 auto;margin-left:auto;border-right:var(--pd-chv-stroke,2px) solid var(--pd-chv-color);border-bottom:var(--pd-chv-stroke,2px) solid var(--pd-chv-color);transform:rotate(-45deg);opacity:.9;}

.plan-detail-sidebar-card{padding-top:10px;display:grid;gap:12px;}

/* ==========================================================================
   08) Content / Stage / Views
   ========================================================================== */
.plan-detail-content{
  min-height:0;contain:paint;
  background:var(--pd-stage-bg);
  position:relative;overflow:hidden;
  overscroll-behavior:contain;
}
.pd-stage{position:relative;height:100%;min-height:0;}
.pd-view{
  position:absolute;inset:0;
  padding:14px var(--pd-pad-x) 18px;
  overflow:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  opacity:0;pointer-events:none;
  transform:translate3d(0,10px,0);
  transition:opacity 220ms cubic-bezier(.2,.9,.1,1),transform 240ms cubic-bezier(.2,.9,.1,1);
  will-change:opacity,transform;
}
.pd-view.is-active{opacity:1;pointer-events:auto;transform:translate3d(0,0,0);}
.pd-view-inner{min-height:1px;}

/* ==========================================================================
   09) Base Card (general) — sin hover-lift (no acción)
   ========================================================================== */
.pd-card{
  background:var(--surface,#fff);
  border:0;border-radius:16px;
  box-shadow:var(--pd-card-shadow);
  padding:12px;
  font-size:13px;
  color:color-mix(in oklch,var(--pd-ink) 92%,var(--secondary,#6b7280) 8%);
  overflow:hidden;background-clip:padding-box;
  content-visibility:auto;
  contain-intrinsic-size:1px 220px;
}
@media (hover:hover){.pd-card:hover{box-shadow:var(--pd-card-shadow);}}
.pd-card p{margin:0;}
.pd-card p+p{margin-top:8px;}
.pd-card .muted{color:var(--pd-ink-mute);}

/* ==========================================================================
   09.x) Base Card — VARIANTE HERO (canónica)
   - Reusa el “glass + tint” que te gusta (antes en .pd-pe-hero)
   - Se activa con: .pd-card.pd-card--hero
   ========================================================================== */
.pd-card.pd-card--hero{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  box-shadow:var(--pd-card-shadow);
  border:0;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch,var(--surface,#fff) 86%,transparent) 0%,
      color-mix(in oklch,var(--surface,#fff) 94%,transparent) 100%
    );
  background-clip:padding-box;
}
.pd-card.pd-card--hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(720px 240px at 18% 0%,
      color-mix(in oklch,var(--tint,#0d99ff) 14%,transparent),
      transparent 58%),
    radial-gradient(620px 220px at 78% 6%,
      rgba(124,58,237,.09),
      transparent 58%);
  opacity:.9;
}
.pd-card.pd-card--hero>*{position:relative;}

/* ==========================================================================
   10) Lock body scroll
   ========================================================================== */
html.plan-detail-open,body.plan-detail-open{overscroll-behavior:none;}

/* ==========================================================================
   11) Audio (Sidebar) — Light (ordenado + DRY)
   ========================================================================== */
#pdAudioSlot audio,#pdAudioEl{display:none;width:0;height:0;opacity:0;pointer-events:none;}

#pdAudioWrap.pd-audio{
  width:100%;max-width:100%;box-sizing:border-box;overflow:hidden;
  border:0;border-radius:14px;padding:10px;margin-bottom:10px;
  background:color-mix(in oklch,var(--surface,#fff) 70%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--pd-card-shadow);
  background-clip:padding-box;
}

#pdAudioWrap .pd-audio-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;min-width:0;}
#pdAudioWrap .pd-audio-title{
  font-size:11.5px;font-weight:600;color:rgba(15,23,42,.82);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#pdAudioWrap .pd-audio-row{display:flex;gap:10px;align-items:center;min-width:0;}
#pdAudioWrap .pd-audio-mid{flex:1;min-width:0;}
#pdAudioWrap #pdAudioSeek{width:100%;max-width:100%;display:block;accent-color:rgba(15,23,42,.72);height:16px;}
#pdAudioWrap .pd-audio-meta{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin-top:6px;
  font-size:11px;color:rgba(15,23,42,.62);min-width:0;
}
#pdAudioWrap #pdAudioTime{font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto;}
#pdAudioWrap #pdAudioStatus{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:right;
}

#pdAudioWrap .pd-audio-play,#pdAudioWrap #pdAudioSpeedBtn.pd-audio-speed{
  appearance:none;-webkit-appearance:none;box-sizing:border-box;
  border:1px solid var(--pd-btn-border);
  background:color-mix(in oklch,var(--surface,#fff) 92%,transparent);
  box-shadow:0 1px 2px rgba(15,23,42,.06);
  background-clip:padding-box;
  color:rgba(15,23,42,.78);
  cursor:pointer;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}

#pdAudioWrap #pdAudioSpeedBtn.pd-audio-speed{
  width:28px;height:28px;min-width:28px;max-width:28px;min-height:28px;max-height:28px;
  flex:0 0 28px;padding:0;border-radius:50%;
  display:inline-grid;place-items:center;
  font-size:11px;font-weight:var(--fw-semibold,600);line-height:1;letter-spacing:-.01em;
}

#pdAudioWrap .pd-audio-play{
  width:36px;height:36px;flex:0 0 36px;padding:0;border-radius:12px;
  display:inline-grid;place-items:center;
  font-size:14px;line-height:1;color:rgba(15,23,42,.72);
}

@media (hover:hover){
  #pdAudioWrap .pd-audio-play:hover,#pdAudioWrap #pdAudioSpeedBtn.pd-audio-speed:hover{
    border-color:var(--pd-btn-border-hover);
  }
}

#pdAudioWrap .pd-audio-play:disabled,#pdAudioWrap #pdAudioSeek:disabled,#pdAudioWrap .pd-audio-speed:disabled{
  opacity:.55;cursor:not-allowed;
}

@media (max-width:420px){
  #pdAudioWrap .pd-audio-meta{flex-direction:column;align-items:flex-start;gap:4px;}
  #pdAudioWrap #pdAudioStatus{text-align:left;width:100%;}
}

/* ==========================================================================
   12) Skeleton
   ========================================================================== */
.sk{position:relative;overflow:hidden;border-radius:10px;background:rgba(15,23,42,.08);}
.sk::after{
  content:"";position:absolute;inset:0;transform:translateX(-55%);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
  animation:sk-shimmer 1.15s ease-in-out infinite;
}
.sk-title{height:12px;width:78%;margin-bottom:8px;}
.sk-sub{height:10px;width:92%;margin-bottom:10px;opacity:.9;}
.sk-time{height:10px;width:40%;opacity:.8;}
.sk-kpi-title{height:10px;width:34%;margin:6px 0 12px;}
.sk-kpi-row{height:36px;width:100%;border-radius:14px;}
@keyframes sk-shimmer{0%{transform:translateX(-55%);}100%{transform:translateX(55%);}}

/* ==========================================================================
   13) Pills (badge) — NO botones
   ========================================================================== */
.pd-kpi-pill,.pd-pill-uf{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;line-height:1;
  padding:4px 8px;border-radius:var(--rad-pill,9999px);
  border:1px solid var(--pd-pill-border);
  background:var(--pd-pill-bg);
}
.pd-kpi-pill.is-neutral{background:rgba(148,163,184,.10);border-color:rgba(148,163,184,.22);color:rgba(51,65,85,.92);}
.pd-kpi-pill.is-good{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.22);color:rgba(22,163,74,1);}
.pd-kpi-pill.is-warn{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.22);color:rgba(161,98,7,.95);}

.pd-kpi-value{
  font-size:22px;font-weight:600;letter-spacing:-0.02em;
  margin-bottom:4px;
  font-variant-numeric:tabular-nums;
}
.pd-kpi-foot{font-size:12px;color:rgba(15,23,42,.55);}

/* ==========================================================================
   14) Panels / Common blocks (lo que venía al final)
   ========================================================================== */
.pd-mainrow{display:grid;grid-template-columns:1.65fr .95fr;gap:12px;margin-bottom:12px;}
.pd-panel-body{padding:12px 14px;}
.pd-divider{height:1px;background:rgba(15,23,42,.08);margin:12px 0;}
.pd-copy{padding-bottom:6px;}
.pd-copy .pd-res-text{font-size:13.5px;line-height:1.65;color:rgba(2,6,23,.86);margin:0 0 6px;}

/* =========================
   Tablas (CANÓNICO overlay)
   - Fuente de verdad para TODAS las tablas del overlay
   - Alias: soporta .pd-pe-table* sin tocar markup
   ========================= */
.pd-table-wrap,.pd-pe-table-wrap{
  border:1px solid var(--pd-border);
  border-radius:var(--pd-table-radius);
  overflow:hidden;
  background:var(--pd-table-bg);
  background-clip:padding-box;
  box-shadow:var(--pd-table-shadow);
}

.pd-table,.pd-pe-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:var(--pd-table-fs);
  line-height:var(--pd-table-lh);
  font-weight:500;
  color:var(--pd-table-ink);
  font-variant-numeric:tabular-nums;
}

.pd-table thead th,.pd-pe-table thead th{
  padding:var(--pd-table-pad-y) var(--pd-table-pad-x);
  text-align:left;
  font-weight:600;
  color:var(--pd-table-head-ink);
  border-bottom:var(--pd-dash);
  background:transparent;
}

.pd-table thead th.ta-r,.pd-pe-table thead th.ta-r{ text-align:right; }

.pd-table tbody td,.pd-pe-table tbody td{
  padding:var(--pd-table-pad-y) var(--pd-table-pad-x);
  color:var(--pd-table-ink-soft);
  background:transparent;
}

/* Separador dashed entre filas (no en la primera) */
.pd-table tbody tr+tr td,.pd-pe-table tbody tr+tr td{ border-top:var(--pd-dash); }

.pd-table tbody td.ta-r,.pd-pe-table tbody td.ta-r{
  text-align:right;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--pd-table-ink-strong);
}

/* ==========================================================================
   03) HERO (CANÓNICO)
   ========================================================================== */
.pd-hero-rail{position:absolute;inset:0;pointer-events:none;background:radial-gradient(1200px 220px at 30% 0%,rgba(2,132,199,.10),transparent 55%),radial-gradient(900px 260px at 80% 0%,rgba(99,102,241,.08),transparent 60%),linear-gradient(180deg,rgba(15,23,42,.02),transparent 55%);}
.pd-hero-rail i{position:absolute;left:0;top:0;height:100%;width:0%;background:linear-gradient(90deg,rgba(2,132,199,.18),rgba(99,102,241,.14),transparent);opacity:.9;}
.pd-card.pd-hero{position:relative;padding:12px;}
.pd-hero-grid{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:12px;align-items:stretch;}
@media (max-width:720px){.pd-hero-grid{grid-template-columns:1fr;}}
.pd-hero-score{padding:16px;min-width:0;display:flex;flex-direction:column;}
.pd-hero-score-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;min-width:0;}
.pd-hero-score-main{min-width:0;}
.pd-hero-score-side{display:flex;flex-direction:column;align-items:flex-end;text-align:right;min-width:0;max-width:52%;}
.pd-hero-score-top{display:flex;align-items:baseline;gap:10px;}
.pd-hero-score-value{font-size:clamp(36px,4.2vw,48px);font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--pd-ink-92);font-variant-numeric:tabular-nums;}
.pd-hero-score-max{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--pd-ink-55);}
.pd-hero-score-label{margin-top:7px;font-size:12px;font-weight:600;color:var(--pd-ink-62);text-transform:uppercase;letter-spacing:.02em;}
.pd-hero-score-tag{margin-top:10px;display:inline-flex;align-items:center;padding:8px 12px;border:0;border-radius:999px;background:var(--pd-soft-05);color:var(--pd-ink-86);font-size:12px;font-weight:600;letter-spacing:-.01em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pd-hero-score-side .pd-hero-score-label{margin-top:0;}
.pd-hero-score-side .pd-hero-score-tag{margin-top:8px;padding:7px 10px;font-size:12px;}
@media (max-width:420px){.pd-hero-score-head{flex-direction:column;align-items:flex-start;}.pd-hero-score-side{align-items:flex-start;text-align:left;max-width:none;}.pd-hero-score-tag{white-space:normal;}}
.pd-rank-card{background:var(--surface,#fff);border:0;border-radius:16px;box-shadow:var(--pd-card-shadow);overflow:hidden;background-clip:padding-box;}
.pd-hero-mini{margin-top:auto;}
.pd-mini-panel{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:center;padding:12px 0 0;margin-top:12px;border-top:1px dashed color-mix(in oklch,var(--pd-ink) 14%,transparent);background:transparent;box-shadow:none;border-left:0;border-right:0;border-bottom:0;}
.pd-mini-cell{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 12px 0 0;}
.pd-mini-cell:last-child{padding:0 0 0 12px;}
.pd-mini-v{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.1;color:var(--pd-ink-95);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pd-mini-l{font-size:12px;font-weight:600;color:var(--pd-ink-62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pd-mini-div{width:0;height:100%;min-height:26px;border-left:1px dashed color-mix(in oklch,var(--pd-ink) 14%,transparent);opacity:.95;}
@media (max-width:480px){.pd-mini-panel{grid-template-columns:1fr;gap:10px;padding-top:10px;}.pd-mini-cell{padding:0;}.pd-mini-div{width:100%;height:0;min-height:0;border-left:0;border-top:1px dashed color-mix(in oklch,var(--pd-ink) 14%,transparent);}}
.pd-hero-ranksGrid{display:grid;grid-template-rows:1fr 1fr;gap:10px;height:100%;min-height:0;align-content:start;min-width:0;}
.pd-hero-ranksGrid>.pd-rank-card{height:100%;display:flex;flex-direction:column;justify-content:flex-start;}
.pd-rank-card{padding:12px 14px;width:100%;}
.pd-rank-title{font-size:12px;font-weight:600;letter-spacing:.01em;text-transform:uppercase;color:color-mix(in oklch,var(--pd-ink) 58%,transparent);}
.pd-rank-value{margin-top:6px;font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--pd-ink-95);font-variant-numeric:tabular-nums;line-height:1.05;}
.pd-rank-sub{margin-top:5px;font-size:12px;line-height:1.25;color:color-mix(in oklch,var(--pd-ink) 62%,transparent);}

/* Linklike minimal (sin subrayado) */
.pd-linklike{appearance:none;border:0;background:transparent;padding:0;margin:0;display:inline;min-height:0;line-height:inherit;vertical-align:baseline;font:inherit;font-weight:600;letter-spacing:-.01em;color:color-mix(in oklch,var(--pd-ink) 88%,rgba(2,132,199,1));cursor:pointer;}
.pd-linklike:hover{color:rgba(2,132,199,1);}
.pd-linklike:focus-visible{outline:2px solid color-mix(in oklch,rgba(2,132,199,1) 45%,transparent);outline-offset:2px;}
.pd-linklike:active{transform:none;}











/* ==========================================================================
   (NO APLICAR) OVERRIDE · Utilities (badges/muted) · Salud moderno (azul→celeste)
   Guardado para referencia. Para activarlo, descomenta este bloque completo.
   ========================================================================== */
/*
.plan-detail-panel{--qv-health-a:#2B6DEB;--qv-health-b:#6D28D9;--qv-health-c:#22C6D9;--qv-health-grad-rail:linear-gradient(90deg,color-mix(in oklch,var(--qv-health-a) 82%,white 18%),color-mix(in oklch,var(--qv-health-b) 78%,white 22%));--qv-health-grad-h:linear-gradient(90deg,color-mix(in oklch,var(--qv-health-a) 88%,white 12%),color-mix(in oklch,var(--qv-health-b) 60%,white 40%));--qv-health-grad-a:linear-gradient(90deg,color-mix(in oklch,var(--qv-health-c) 52%,white 48%),color-mix(in oklch,var(--qv-health-a) 46%,white 54%));--qv-health-grad-gauge:linear-gradient(90deg,color-mix(in oklch,var(--qv-health-a) 86%,white 14%),color-mix(in oklch,var(--qv-health-b) 74%,white 26%));--pd-badge-bg:color-mix(in oklch,var(--qv-health-a) 10%,transparent 90%);--pd-badge-model:color-mix(in oklch,var(--qv-health-a) 14%,transparent 86%);--pd-badge-det:color-mix(in oklch,var(--qv-health-b) 14%,transparent 86%);--pd-badge-nope:color-mix(in oklch,var(--qv-health-c) 12%,transparent 88%);--pd-ink-86:color-mix(in oklch,var(--qv-health-a) 38%,var(--pd-ink) 62%);--pd-ink-62:color-mix(in oklch,var(--qv-health-b) 22%,var(--pd-ink) 78%);}
.pd-badge{background:var(--pd-badge-bg)!important;color:var(--pd-ink-86)!important;}
.pd-badge--model{background:var(--pd-badge-model)!important;}
.pd-badge--det{background:var(--pd-badge-det)!important;}
.pd-badge--nope{background:var(--pd-badge-nope)!important;}
.pd-muted{color:var(--pd-ink-62)!important;}
.pd-badge{box-shadow:none!important;}
*/