/* ==========================================================================
   overlay-pd-cobertura.css — QuVi · Overlay · Cobertura (pd-cov-*) — PROD
   - Sin bordes: NO inset borders (reusa shell base tipo .pd-card)
   - Menú con estética del nav del overlay (hover/active/tipografía)
   - Desktop: misma altura exacta menú + acordeones, scroll interno
   ========================================================================== */

.pd-cov{
  display:flex;
  flex-direction:column;
  gap:12px;

  --cov-gap:12px;
  --cov-index-w:300px;

  /* Altura compartida (desktop) para índice + main (exacta) */
  --cov-sticky-top:10px;
  --cov-col-h:calc(100dvh - 220px);

  /* Shell (reusa tokens overlay core) */
  --cov-shell-bg:var(--surface,#fff);
  --cov-shell-r:16px;
  --cov-shell-shadow:var(--pd-card-shadow);

  /* Motion */
  --cov-ease:cubic-bezier(.2,.8,.2,1);
  --cov-dur:.16s;
}

/* =========================================================
   Lectura rápida (cards) — heredan .pd-card (sin redefinir shell)
   ========================================================= */
.pd-cov-quickgrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--cov-gap);
}
@media (max-width:860px){
  .pd-cov-quickgrid{grid-template-columns:1fr;}
}

.pd-cov-quick{display:flex;gap:12px;align-items:flex-start;}
.pd-cov-qi{
  width:36px;height:36px;flex:0 0 36px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in oklch,var(--tint,#0d99ff) 12%,var(--surface,#fff) 88%);
  color:color-mix(in oklch,var(--tint,#0d99ff) 60%,var(--pd-ink,#0f172a) 40%);
  box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--tint,#0d99ff) 16%,transparent);
}
.pd-cov-qi svg{width:20px;height:20px;display:block;}
.pd-cov-qc{min-width:0;}
.pd-cov-qt{
  font-size:12px;
  font-weight:600;
  letter-spacing:.01em;
  color:color-mix(in oklch,var(--pd-ink,#0f172a) 92%,var(--secondary,#6b7280) 8%);
}
.pd-cov-qv{margin-top:6px;line-height:1.45;color:var(--pd-ink-mute);}

/* =========================================================
   Layout
   ========================================================= */
.pd-cov-layout{
  display:grid;
  grid-template-columns:var(--cov-index-w) minmax(0,1fr);
  gap:var(--cov-gap);
  align-items:start;
}
@media (max-width:980px){
  .pd-cov-layout{grid-template-columns:1fr;}
}

/* =========================================================
   Índice (menú) — look del nav del overlay
   - Desktop: sticky + altura exacta + scroll interno
   - Mobile: barra horizontal con scroll
   ========================================================= */
.pd-cov-index{min-height:0;}
@media (min-width:981px){
  .pd-cov-index{
    position:sticky;
    top:var(--cov-sticky-top);
    height:var(--cov-col-h);
    min-height:var(--cov-col-h);
    max-height:var(--cov-col-h);
    overflow:hidden; /* scroll vive en la lista */
  }
}

/* Panel del índice con shell tipo .pd-card (SIN borde) */
.pd-cov-index-in{
  background:var(--cov-shell-bg);
  border:0;
  border-radius:var(--cov-shell-r);
  box-shadow:var(--cov-shell-shadow);
  padding:12px;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/* Header del índice */
.pd-cov-index-t{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--pd-ink-mute);
  margin:0 0 10px 0;
}

/* Lista: desktop columna con scroll interno / mobile fila */
.pd-cov-index-list{
  display:flex;
  flex-direction:column;
  gap:2px; /* igual que nav */
  min-height:0;
}
@media (min-width:981px){
  .pd-cov-index-list{
    overflow:auto;
    overscroll-behavior:contain;
    padding-right:4px;
    scrollbar-width:thin;
  }
  .pd-cov-index-list::-webkit-scrollbar{width:10px;}
  .pd-cov-index-list::-webkit-scrollbar-thumb{
    background:color-mix(in oklch,var(--pd-border) 70%,transparent);
    border-radius:999px;
    border:3px solid transparent;
    background-clip:content-box;
  }
  .pd-cov-index-list::-webkit-scrollbar-track{background:transparent;}
}

@media (max-width:980px){
  .pd-cov-index{position:sticky;top:0;z-index:4;}
  .pd-cov-index-in{
    background:color-mix(in oklch,var(--surface,#fff) 82%,transparent 18%);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    padding:10px 0 8px;
    border-radius:14px;
  }
  .pd-cov-index-t{padding:0 12px;margin-bottom:8px;}
  .pd-cov-index-list{
    flex-direction:row;
    flex-wrap:nowrap;
    overflow:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    gap:8px;
    padding:0 12px 2px;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
  }
  .pd-cov-index-list::-webkit-scrollbar{display:none;}
}

/* Ítems del índice — igual familia que .plan-detail-navitem */
.pd-cov-index-a{
  appearance:none;
  border:0;
  background:transparent;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;

  padding:8px 10px;
  border-radius:12px;

  text-decoration:none;
  font:inherit;
  font-size:13px;
  font-weight:550;

  color:color-mix(in oklch,var(--secondary,#6b7280) 92%,var(--pd-ink) 8%);
  cursor:pointer;

  transition:background var(--cov-dur) ease,color var(--cov-dur) ease,transform var(--cov-dur) var(--cov-ease);
}
@media (hover:hover){
  .pd-cov-index-a:hover{background:var(--pd-hover);color:var(--pd-ink);}
}
.pd-cov-index-a.is-active{
  background:var(--pd-active);
  color:var(--pd-ink);
  transform:translateY(-1px);
}
.pd-cov-index-a:focus-visible{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px color-mix(in oklch,var(--tint,#0d99ff) 35%,transparent 65%);
}
@media (max-width:980px){
  .pd-cov-index-a{
    width:auto;
    white-space:nowrap;
    scroll-snap-align:start;
  }
}

.pd-cov-index-a::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;}
/* =========================================================
   Main — contenedor de acordeones (shell tipo .pd-card, SIN borde)
   - Desktop y Mobile: scroll interno (determinista)
   ========================================================= */
.pd-cov-main{
  background:linear-gradient(180deg,color-mix(in oklch,var(--pd-panel-bg) 92%,transparent),color-mix(in oklch,var(--pd-panel-bg2) 92%,transparent));
  border:0;
  border-radius:var(--cov-shell-r);
  box-shadow:var(--cov-shell-shadow);
  padding:12px;
  min-width:0;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
}
@media (min-width:981px){
  .pd-cov-main{
    height:var(--cov-col-h);
    min-height:var(--cov-col-h);
    max-height:var(--cov-col-h);
  }
}
@media (max-width:980px){
  /* En mobile también: panel scrolleable. Ajusta solo esta resta si cambia tu header real */
  .pd-cov-main{
    max-height:calc(100dvh - 220px);
  }
}

/* Acordeones dentro del main: no “pegarse” al shell */
.pd-cov-main>.pd-acc{margin:0;}
.pd-cov-main>.pd-acc+.pd-acc{margin-top:12px;}

/* UX: anclas no quedan bajo sticky (si navegas por hash o click) */
.pd-cov-main [id]{scroll-margin-top:calc(var(--cov-sticky-top) + 14px);}

/* Contenidos internos auxiliares */
.pd-cov-bullets{
  margin:0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.pd-cov-bullets li{
  line-height:1.45;
  color:color-mix(in oklch,var(--pd-ink,#0f172a) 90%,var(--secondary,#6b7280) 10%);
}

/* =========================================================
   Cobertura — Nota interna (dashed + fondo tipo “formula”)
   Reusa tokens del overlay core: --pd-dash, --pd-table-radius, --pd-table-shadow
   ========================================================= */
.pd-cov-details{
  margin-top:12px;
  border:var(--pd-dash);
  border-radius:var(--pd-table-radius);
  padding:10px 12px;
  background:color-mix(in oklch,var(--surface,#fff) 88%,color-mix(in oklch,var(--pd-ink) 10%,transparent 90%) 12%);
  box-shadow:var(--pd-table-shadow);
  background-clip:padding-box;
}
.pd-cov-details-t{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--pd-ink-mute);
  margin:0 0 8px 0;
}
.pd-cov-details-p{
  margin:0;
  white-space:pre-wrap;
  font:inherit;
  line-height:1.6;
  font-size:13px;
  font-weight:500;
  color:color-mix(in oklch,var(--pd-ink) 78%,transparent 22%);
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .pd-cov-index-a{transition:none;}
  .pd-cov-index-a:hover,
  .pd-cov-index-a.is-active{transform:none;}
}


.pd-cov-qi svg{width:22px;height:22px;display:block}