/* =========================
   VISTA · TRANSPARENCIA
   (fila + acordeón + cards técnicas)
   ========================= */

/* ----- 1) Root & Grid ----- */
#vista-transparencia{--col-rank:36px;--col-nota:36px;--col-uf:46px;--col-code:1fr;--col-ha:72px;--col-clin:minmax(230px,2fr);--col-act:150px;--gap-x:var(--s-12);--pad-code-left:var(--s-16);}
#vista-transparencia .vt-head,#vista-transparencia .vt-sum{display:grid;grid-template-columns:var(--col-rank) var(--col-nota) var(--col-uf) var(--col-code) var(--col-ha) var(--col-ha) var(--col-clin) var(--col-act);align-items:center;gap:var(--gap-x);}

/* ----- 2) Alineaciones por columna ----- */
#vista-transparencia .vt-head>:first-child,#vista-transparencia .vt-sum>:first-child{text-align:center;}
#vista-transparencia .vt-head>:nth-child(2),#vista-transparencia .vt-head>:nth-child(3),#vista-transparencia .vt-head>:nth-child(5),#vista-transparencia .vt-head>:nth-child(6){text-align:center;}
#vista-transparencia .vt-sum .nt,#vista-transparencia .vt-sum .uf,#vista-transparencia .vt-sum .h,#vista-transparencia .vt-sum .a{text-align:center;}
#vista-transparencia .vt-head>:nth-child(4),#vista-transparencia .vt-sum .cod{padding-inline-start:var(--pad-code-left);}
#vista-transparencia .vt-head>:nth-child(7),#vista-transparencia .vt-sum .cell.clin{padding-inline-start:0;margin-inline-start:0;}
#vista-transparencia .vt-head>:first-child,#vista-transparencia .vt-head>:nth-child(2),#vista-transparencia .vt-head>:nth-child(3),#vista-transparencia .vt-head>:nth-child(5),#vista-transparencia .vt-head>:nth-child(6),#vista-transparencia .vt-sum>:first-child,#vista-transparencia .vt-sum .nt,#vista-transparencia .vt-sum .uf,#vista-transparencia .vt-sum .h,#vista-transparencia .vt-sum .a{display:flex;align-items:center;justify-content:center;text-align:center;}

/* ----- 3) Cabecera de la vista ----- */
#vista-transparencia .vt-head{padding:var(--s-12) var(--s-16);background:var(--surface);border:1px solid var(--separator);box-shadow:var(--shadow-xs);border-radius:var(--rad-md);color:var(--secondary);font-size:var(--fs-12);line-height:1.25;margin:0 0 var(--s-12);}
#vista-transparencia .vt-head>:first-child{font-family:var(--font-mono);font-feature-settings:"tnum" 1;}
#vista-transparencia .vt-head .chip{
  display:inline-flex;
  align-items:center;
  gap:var(--s-6);
  padding:var(--s-4) var(--s-10);

  font-size:var(--fs-12);
  line-height:1;

  /* Color del texto — ahora el mismo que el hover de acciones */
  color:color-mix(in oklch, var(--brand) 80%, black 20%);

  /* Fondo suave */
  background:color-mix(in oklch, var(--brand) 6%, transparent);

  /* Borde igual que vt-act-btn hover */
  border:1px solid color-mix(in oklch, var(--brand) 35%, var(--separator));

  border-radius:var(--rad-pill);
  justify-self:center;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}
#vista-transparencia .vt-head>:last-child{display:flex;justify-content:center;}

/* ----- 4) Lista / Filas (stack compacto) ----- */
#vista-transparencia .vt-list{display:block;}
#vista-transparencia .vt-row{border:1px solid var(--separator);background:var(--surface);margin:0;border-radius:0;box-shadow:var(--shadow-xs);overflow:hidden;}
#vista-transparencia .vt-row+.vt-row{margin-top:-1px;}
#vista-transparencia .vt-row:first-child{border-top-left-radius:var(--rad-md);border-top-right-radius:var(--rad-md);}
#vista-transparencia .vt-row:last-child{border-bottom-left-radius:var(--rad-md);border-bottom-right-radius:var(--rad-md);}
#vista-transparencia .vt-row[open]{background:var(--surface);box-shadow:var(--shadow-sm);}

/* ----- 5) Summary (fila principal) ----- */
#vista-transparencia .vt-sum{padding:var(--s-12) var(--s-16);cursor:pointer;list-style:none;font-size:var(--fs-12);}
#vista-transparencia .vt-sum::-webkit-details-marker{display:none;}
#vista-transparencia .vt-sum:hover{background:color-mix(in oklch,var(--surface) 97%,var(--bg) 3%);}
#vista-transparencia .cell{min-width:0;}
#vista-transparencia .cell.r{text-align:right;}
#vista-transparencia .cell.mono{font-family:var(--font-mono);font-feature-settings:"tnum" 1;}
#vista-transparencia .cell.nt strong{font-weight:var(--fw-semibold);font-feature-settings:"tnum" 1,"ss01" 1;}
#vista-transparencia .cell.uf{color:var(--secondary);}
#vista-transparencia .vt-sum .h,#vista-transparencia .vt-sum .a{color:var(--secondary);}
#vista-transparencia .vt-sum .cod{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);min-width:0;}
#vista-transparencia .vt-sum .cod strong{line-height:1.1;white-space:nowrap;}
#vista-transparencia .vt-sum .cod .isapre{font-size:var(--fs-11);line-height:1.1;color:var(--secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ----- 6) Clínicas en resumen (ellipsis + marquee) ----- */
#vista-transparencia .vt-sum .clin{position:relative;overflow:hidden;font-size:var(--fs-12);}
#vista-transparencia .vt-sum .clin .ellipsis{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity var(--motion-fast) var(--motion-ease);}
#vista-transparencia .vt-sum .clin .marquee{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:none;mask-image:none;background:none;opacity:0;visibility:hidden;transition:opacity var(--motion-fast) var(--motion-ease),visibility 0s linear var(--motion-fast);}
#vista-transparencia .vt-sum .clin .track{display:inline-block;white-space:nowrap;will-change:transform;animation:vt-marquee 12s linear infinite;animation-play-state:paused;transform:translateX(0);}
#vista-transparencia .vt-sum .clin .txt{padding-right:2ch;}
#vista-transparencia .vt-sum .clin:hover:has(.marquee) .ellipsis{opacity:0;}
#vista-transparencia .vt-sum .clin:hover:has(.marquee) .marquee{opacity:1;visibility:visible;transition-delay:0s;}
#vista-transparencia .vt-sum .clin:hover:has(.marquee) .track{animation-play-state:running;}
@keyframes vt-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ----- 7) Acciones de fila (Agregar + iconos en cápsulas, sin fondo) ----- */
#vista-transparencia .cell.ac{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

/* Contenedor */
#vista-transparencia .vt-acciones{
  display:flex;
  align-items:center;
  gap:var(--s-8);
}

/* Cápsulas sin fondo (solo borde) */
#vista-transparencia .vt-act-btn{
  all:unset;
  box-sizing:border-box;

  width:24px;
  height:24px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  background:transparent;
  border:1px solid color-mix(in oklch, var(--separator) 70%, transparent);
  cursor:pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}

/* Ícono en reposo (neutral) */
#vista-transparencia .vt-act-btn i[data-lucide],
#vista-transparencia .vt-act-btn svg,
#vista-transparencia .vt-act-btn svg.lucide{
  all:unset;
  box-sizing:border-box;
  display:block;

  width:14px;
  height:14px;

  stroke:var(--label);
  stroke-width:1.8;
  fill:none;

  transition:stroke .15s ease;
}

/* Hover estilo diag-count: fondo leve, borde fuerte e ÍCONO coloreado */
#vista-transparencia .vt-act-btn:hover{
  background:color-mix(in oklch, var(--brand) 6%, transparent);
  border-color:color-mix(in oklch, var(--brand) 35%, var(--separator));
}

/* El ícono toma color en hover */
#vista-transparencia .vt-act-btn:hover svg,
#vista-transparencia .vt-act-btn:hover i[data-lucide]{
  stroke:color-mix(in oklch, var(--brand) 80%, black 20%);
}

/* Botón Agregar (texto-link elegante, consistente con vt-act-btn) */
#vista-transparencia .vt-agregar{
  all:unset;
  margin-left:var(--s-4);

  font-family:var(--font-sans);
  font-size:var(--fs-12);
  font-weight:var(--fw-medium);
  line-height:1;

  color:var(--label);      /* mismo color base que los íconos */
  cursor:pointer;
  white-space:nowrap;

  transition:color .15s ease;
}

/* Hover: mismo color que vt-act-btn */
#vista-transparencia .vt-agregar:hover{
  color:color-mix(in oklch, var(--brand) 80%, black 20%);
}

/* ----- 8) Panel expandido + carrusel ----- */
#vista-transparencia .vt-pan{display:grid;grid-template-columns:var(--col-rank) var(--col-nota) var(--col-uf) var(--col-code) var(--col-ha) var(--col-ha) var(--col-clin) var(--col-act);align-items:stretch;padding:var(--s-14) var(--s-16) var(--s-18);border-top:1px solid var(--separator);background:color-mix(in oklch,var(--surface) 85%,var(--bg) 15%);}
#vista-transparencia .vt-cards-shell{grid-column:1 / -1;position:relative;padding:0 var(--s-16);}
#vista-transparencia .vt-pan [data-vt-cards]{display:flex;gap:var(--s-12);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-block-end:var(--s-4);-webkit-overflow-scrolling:touch;}
#vista-transparencia .vt-pan .card{flex:0 0 min(340px,100%);scroll-snap-align:start;border:1px solid var(--separator);border-radius:var(--rad-sm);background:color-mix(in oklch,var(--surface) 96%,var(--bg) 4%);padding:var(--s-14) var(--s-16);}
@media (min-width:1024px){#vista-transparencia .vt-pan .card{flex-basis:min(360px,100%);}}
#vista-transparencia .vt-card-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:28px;height:28px;border-radius:var(--rad-pill);border:1px solid color-mix(in oklab,var(--separator) 70%,#ffffff 30%);background:color-mix(in oklab,var(--surface) 88%,var(--bg) 12%);box-shadow:var(--shadow-sm);display:grid;place-items:center;padding:0;cursor:pointer;color:var(--label);transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;}
#vista-transparencia .vt-card-nav.is-prev{left:var(--s-6);}
#vista-transparencia .vt-card-nav.is-next{right:var(--s-6);}
#vista-transparencia .vt-card-nav i[data-lucide],#vista-transparencia .vt-card-nav svg{width:16px;height:16px;stroke:currentColor;}
#vista-transparencia .vt-card-nav:is(:hover,:focus-visible){background:color-mix(in oklab,var(--surface) 94%,var(--bg) 6%);border-color:color-mix(in oklab,var(--separator) 55%,#ffffff 45%);box-shadow:var(--shadow-m);}
@media (max-width:920px){#vista-transparencia .vt-pan{display:block;}#vista-transparencia .vt-cards-shell{grid-column:auto;padding:0;}}

/* ----- 9) Header de card técnica (título + copiar) ----- */
#vista-transparencia .card-title{display:flex;align-items:center;justify-content:space-between;gap:var(--s-8);margin:0 0 var(--s-8);font-size:var(--fs-13,var(--fs-12));color:var(--label);font-weight:var(--fw-semibold);}
#vista-transparencia .ico-hd{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:transparent;color:var(--label);opacity:.85;cursor:pointer;transition:color var(--motion-fast) var(--motion-ease),opacity var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease);}
#vista-transparencia .ico-hd i[data-lucide],#vista-transparencia .ico-hd svg.lucide{width:14px;height:14px;stroke:currentColor;}
#vista-transparencia .ico-hd:hover{color:var(--brand);opacity:1;}
#vista-transparencia .ico-hd:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in oklch,var(--brand) 18%,transparent);border-radius:var(--rad-sm);}

/* Flechas del carrusel */
#vista-transparencia .vt-card-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:28px;height:28px;border-radius:var(--rad-pill);border:1px solid color-mix(in oklab,var(--separator) 70%,#ffffff 30%);background:color-mix(in oklab,var(--surface) 88%,var(--bg) 12%);box-shadow:var(--shadow-sm);display:grid;place-items:center;padding:0;cursor:pointer;color:var(--label);transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;}
#vista-transparencia .vt-card-nav.is-prev{left:-6px;}
#vista-transparencia .vt-card-nav.is-next{right:-6px;}
#vista-transparencia .vt-card-nav i[data-lucide],#vista-transparencia .vt-card-nav svg{width:16px;height:16px;stroke:currentColor;}
#vista-transparencia .vt-card-nav:is(:hover,:focus-visible){background:color-mix(in oklab,var(--surface) 94%,var(--bg) 6%);border-color:color-mix(in oklab,var(--separator) 55%,#ffffff 45%);box-shadow:var(--shadow-m);}
@media (max-width:640px){#vista-transparencia .vt-card-nav{display:none;}}

/* =========================
   CARDS ESPECÍFICAS
   ========================= */

/* ----- 10) Narrativa ----- */
#vista-transparencia .nar{margin:0;font-size:var(--fs-12);line-height:1.4;color:var(--label);}
#vista-transparencia .card.narr .diag-count{display:none;}

/* ----- 11) Clínicas por ámbito (card clínicas) ----- */
#vista-transparencia .clin-list{list-style:none;margin:0;padding:0;display:grid;gap:0;font-size:var(--fs-12);}
#vista-transparencia .clin-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);padding-block:var(--s-4);border-bottom:1px dashed color-mix(in oklch,var(--separator) 75%,transparent);}
#vista-transparencia .clin-list li:last-child{border-bottom:none;}
#vista-transparencia .clin-nombre{flex:1 1 auto;}
#vista-transparencia .clin-pct{flex:0 0 auto;font-family:var(--font-mono);font-feature-settings:"tnum" 1;font-size:11px;padding:var(--s-2) var(--s-6);line-height:1.4;border-radius:var(--rad-pill);background:color-mix(in oklch,var(--brand) 6%,transparent);border:1px solid color-mix(in oklch,var(--brand) 35%,var(--separator));color:color-mix(in oklch,var(--brand) 80%,black 20%);}
#vista-transparencia .clin-acc{border-radius:var(--rad-sm);background:color-mix(in oklch,var(--surface) 98%,var(--bg) 2%);border:1px solid color-mix(in oklch,var(--separator) 80%,transparent);margin:0 0 var(--s-8);}
#vista-transparencia .clin-acc summary{cursor:pointer;padding:var(--s-8) var(--s-10);font-size:var(--fs-12);color:var(--secondary);list-style:none;}
#vista-transparencia .clin-acc summary::-webkit-details-marker{display:none;}
#vista-transparencia .clin-panel{padding:0 var(--s-10) var(--s-8);}

/* Scroll solo dentro del listado de clínicas (desktop) */
@media (min-width: 920px){
  #vista-transparencia .card.clinicas .clin-panel{
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #vista-transparencia .card.clinicas .clin-panel::-webkit-scrollbar{
    width: 4px;
  }
  #vista-transparencia .card.clinicas .clin-panel::-webkit-scrollbar-track{
    background: transparent;
  }
  #vista-transparencia .card.clinicas .clin-panel::-webkit-scrollbar-thumb{
    border-radius: 999px;
    background: color-mix(in oklch, var(--separator) 80%, transparent);
  }
}

/* ----- 12) Texto vacío genérico + divisores ----- */
#vista-transparencia .diag-empty{margin:0;color:var(--secondary);font-size:var(--fs-12);}
#vista-transparencia .divider,#vista-transparencia .diag-divider{height:1px;margin:var(--s-10) 0;background:var(--separator);border-radius:1px;}
#vista-transparencia .card.comp .diag-divider{margin:var(--s-16) 0;}

/* =========================
   DIAGNÓSTICO ESTRUCTURADO
   ========================= */

/* ----- 13) Contenedor y acordeón de diagnóstico ----- */
#vista-transparencia .diag-group{margin:0 0 var(--s-8);}
#vista-transparencia .diag-acc{border-radius:var(--rad-sm);border:1px solid color-mix(in oklch,var(--separator) 80%,transparent);background:color-mix(in oklch,var(--surface) 98%,var(--bg) 2%);}
#vista-transparencia .diag-acc>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-8);padding:var(--s-8) var(--s-10);cursor:pointer;list-style:none;font-size:var(--fs-12);color:var(--secondary);}
#vista-transparencia .diag-acc>summary::-webkit-details-marker{display:none;}
#vista-transparencia .diag-group-title{margin:0;font-size:var(--fs-12);font-weight:var(--fw-medium);color:var(--secondary);}
#vista-transparencia .diag-count{
  inline-size:18px;
  block-size:18px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:10px;
  font-family:var(--font-mono);
  font-feature-settings:"tnum" 1;
  color:color-mix(in oklch,var(--brand) 80%,black 20%);
  background:color-mix(in oklch,var(--brand) 6%,transparent);
  border:1px solid color-mix(in oklch,var(--brand) 35%,var(--separator));
}
#vista-transparencia .diag-panel{padding:0 var(--s-10) var(--s-8);}
#vista-transparencia .diag-list{margin:0;padding:0;list-style:none;display:grid;gap:0;font-size:var(--fs-12);color:var(--label);}
#vista-transparencia .diag-item{display:flex;align-items:flex-start;gap:var(--s-6);padding-block:var(--s-4);font-size:var(--fs-12);line-height:1.35;color:var(--label);}
#vista-transparencia .diag-item+.diag-item{margin-top:var(--s-4);padding-top:var(--s-6);position:relative;}
#vista-transparencia .diag-item+.diag-item::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;background:linear-gradient(to right,transparent 0%,color-mix(in oklch,var(--separator) 70%,transparent) 18%,color-mix(in oklch,var(--separator) 85%,transparent) 50%,color-mix(in oklch,var(--separator) 70%,transparent) 82%,transparent 100%);pointer-events:none;}
#vista-transparencia .diag-item::before{content:none;}
#vista-transparencia .diag-ico{flex:0 0 auto;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;margin-top:2px;color:var(--brand);}
#vista-transparencia .diag-ico svg.lucide{width:14px;height:14px;stroke:currentColor;}
#vista-transparencia .diag-item .txt{flex:1 1 auto;color:var(--label);}
#vista-transparencia .diag-item.sev-ok .diag-ico{color:var(--success);}
#vista-transparencia .diag-item.sev-warn .diag-ico{color:var(--warn);}
#vista-transparencia .diag-item.sev-info .diag-ico{color:var(--secondary);}
#vista-transparencia .diag-item.sev-rec .diag-ico{color:var(--brand);}

/* =========================
   COMPONENTES DE LA NOTA
   ========================= */

/* ----- 14) Barras de contribución ----- */
#vista-transparencia .bars{display:grid;gap:var(--s-8);}
#vista-transparencia .bar{display:grid;grid-template-columns:88px 1fr 54px;gap:var(--s-8);align-items:center;}
#vista-transparencia .bar .lab{color:var(--secondary);font-size:var(--fs-12);}
#vista-transparencia .bar .val{font-family:var(--font-mono);font-size:var(--fs-12);}
#vista-transparencia .bar .track{position:relative;height:8px;border-radius:var(--rad-pill);background:color-mix(in oklch,var(--separator) 82%,transparent);overflow:hidden;}
#vista-transparencia .bar .fill{position:absolute;inset:0 auto 0 0;width:0;height:100%;background:linear-gradient(90deg,color-mix(in oklch,var(--success) 72%,transparent),color-mix(in oklch,var(--brand) 72%,transparent));border-radius:var(--rad-pill);transition:width var(--motion-base) var(--motion-ease);}

/* ----- 15) Pesos (chips) ----- */
#vista-transparencia .pesos-block{margin-top:var(--s-10);}
#vista-transparencia .pesos-title{margin:0 0 var(--s-6);font-size:var(--fs-12);font-weight:var(--fw-medium);color:var(--secondary);}
#vista-transparencia .pesos{display:flex;flex-wrap:wrap;gap:var(--s-6);margin-top:var(--s-10);}
#vista-transparencia .peso{display:inline-flex;align-items:center;gap:var(--s-6);font-family:var(--font-mono);font-size:var(--fs-12);color:color-mix(in oklch,var(--label) 70%,transparent);border:1px solid color-mix(in oklch,var(--separator) 55%,transparent);border-radius:var(--rad-pill);padding:var(--s-4) var(--s-8);background:color-mix(in oklch,var(--surface) 96%,var(--bg) 4%);}
#vista-transparencia .peso small{opacity:.9;}
#vista-transparencia .peso:hover{border-color:color-mix(in oklch,var(--brand) 35%,var(--separator));background:color-mix(in oklch,var(--brand) 6%,transparent);}
#vista-transparencia .doc-notas{margin-top:var(--s-8);}
#vista-transparencia .doc-notas .lnk-doc{font-size:var(--fs-12);color:var(--brand);text-decoration:underline;}
#vista-transparencia .doc-notas .lnk-doc:hover{text-decoration:none;}

/* ----- 16) Badges compactos (p.ej. EST) ----- */
#vista-transparencia .pill{display:inline-block;padding:0 var(--s-6);border-radius:var(--rad-xs);font-size:var(--fs-10);line-height:1.6;margin-inline-start:var(--s-6);vertical-align:middle;}
#vista-transparencia .pill-est{background:color-mix(in oklch,var(--warn) 18%,white 82%);border:1px solid color-mix(in oklch,var(--warn) 45%,white 55%);color:color-mix(in oklch,var(--warn) 70%,black 30%);}

/* =========================
   PAGINACIÓN + TOGGLE GLOBAL
   ========================= */

/* ----- 17) Paginación ----- */
#vista-transparencia .paginacion{display:flex;gap:var(--s-8);align-items:center;justify-content:flex-end;margin-top:var(--s-12);}
#vista-transparencia .paginacion .info{font-size:var(--fs-12);color:var(--secondary);margin-right:auto;}
#vista-transparencia .paginacion .pag-btn{appearance:none;border:1px solid var(--separator);background:var(--surface);color:var(--label);padding:var(--s-6) var(--s-10);border-radius:var(--rad-sm);font-size:var(--fs-12);transition:background var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease),transform var(--motion-fast) var(--motion-ease);}
#vista-transparencia .paginacion .pag-btn:hover{background:color-mix(in oklch,var(--surface) 96%,var(--bg) 4%);}
#vista-transparencia .paginacion .pag-btn:disabled{opacity:.5;cursor:not-allowed;}

/* ----- 18) Toggle flotante "cerrar todo" ----- */
#vista-transparencia .vt-floating-toggle{position:fixed;right:30px;bottom:60px;z-index:40;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:color-mix(in oklab,var(--surface) 85%,var(--bg) 15%);backdrop-filter:blur(18px);border:1px solid color-mix(in oklab,var(--separator) 70%,#ffffff 30%);box-shadow:var(--shadow-sm);transition:transform .18s ease,opacity .18s ease,background .18s ease,border-color .18s ease;}
#vista-transparencia .vt-floating-toggle:is(:hover,:focus-visible){transform:translateY(-1px);background:color-mix(in oklab,var(--surface) 92%,var(--bg) 8%);border-color:color-mix(in oklab,var(--separator) 55%,#ffffff 45%);}
#vista-transparencia .vt-floating-toggle:active{transform:translateY(0);}
#vista-transparencia .vt-floating-toggle.is-hidden{opacity:0;pointer-events:none;}
#vista-transparencia .vt-floating-toggle svg{width:18px;height:18px;display:block;stroke:rgba(0,0,0,.75);fill:none;stroke-width:2.2;opacity:1;}

/* =========================
   DESGLOSE DE PRECIO
   ========================= */

/* ----- 19) Grid principal manual/automático ----- */
#vista-transparencia .desg-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr);gap:var(--s-6) var(--s-16);margin:0 0 var(--s-10);font-size:var(--fs-12);}
#vista-transparencia .desg-item{display:flex;flex-direction:column;gap:var(--s-2);min-width:0;}
#vista-transparencia .desg-item .lab{font-size:var(--fs-11);color:var(--secondary);}
#vista-transparencia .desg-item .val{font-family:var(--font-mono);font-feature-settings:"tnum" 1;color:var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#vista-transparencia .desg-divider{height:1px;margin:var(--s-10) 0;background:var(--separator);border-radius:1px;}

/* ----- 20) Acordeón "Detalle por persona" ----- */
#vista-transparencia .desg-accordion{border-radius:var(--rad-sm);border:1px solid color-mix(in oklch,var(--separator) 80%,transparent);background:color-mix(in oklch,var(--surface) 98%,var(--bg) 2%);font-size:var(--fs-12);overflow:hidden;}
#vista-transparencia .desg-accordion-summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-8);padding:var(--s-8) var(--s-10);cursor:pointer;list-style:none;color:var(--secondary);}
#vista-transparencia .desg-accordion-summary::-webkit-details-marker{display:none;}
#vista-transparencia .desg-accordion-summary span:first-child{flex:1 1 auto;min-width:0;}
#vista-transparencia .desg-accordion-badge{flex:0 0 auto;font-family:var(--font-mono);font-feature-settings:"tnum" 1;font-size:var(--fs-11);padding:0 var(--s-8);line-height:1.6;border-radius:var(--rad-pill);color:color-mix(in oklch,var(--brand) 80%,black 20%);background:color-mix(in oklch,var(--brand) 6%,transparent);border:1px solid color-mix(in oklch,var(--brand) 35%,var(--separator));}
#vista-transparencia .desg-personas{padding:0 var(--s-10) var(--s-8);}
#vista-transparencia .desg-head,#vista-transparencia .desg-row{display:grid;grid-template-columns:88px 72px 96px minmax(0,1fr);gap:var(--s-6);align-items:center;font-size:var(--fs-12);}
#vista-transparencia .desg-head{padding:var(--s-6) 0;border-bottom:1px solid color-mix(in oklch,var(--separator) 80%,transparent);color:var(--secondary);font-size:var(--fs-11);}
#vista-transparencia .desg-col.th{font-weight:var(--fw-medium);}
#vista-transparencia .desg-body{display:grid;gap:0;}
#vista-transparencia .desg-row{padding:var(--s-4) 0;}
#vista-transparencia .desg-row:nth-child(odd){background:color-mix(in oklch,var(--surface) 98%,var(--bg) 2%);border-radius:var(--rad-xs);}
#vista-transparencia .desg-col{min-width:0;}
#vista-transparencia .desg-col.rol{font-weight:var(--fw-medium);color:var(--label);}
#vista-transparencia .desg-col.edad,#vista-transparencia .desg-col.factor{font-family:var(--font-mono);font-feature-settings:"tnum" 1;color:var(--label);}
#vista-transparencia .desg-col.comentario{color:var(--secondary);}
#vista-transparencia .desg-note{margin:0;padding:var(--s-6) var(--s-10) var(--s-8);font-size:var(--fs-11);color:var(--secondary);}

/* ----- 21) Fórmula de cálculo ----- */
#vista-transparencia .desg-formula{padding:var(--s-10) var(--s-10) var(--s-8);border-radius:var(--rad-sm);border:1px dashed color-mix(in oklch,var(--separator) 80%,transparent);background:color-mix(in oklch,var(--surface) 97%,var(--bg) 3%);font-size:var(--fs-12);}
#vista-transparencia .desg-subtitle{margin:0 0 var(--s-4);font-size:var(--fs-12);font-weight:var(--fw-medium);color:var(--secondary);}
#vista-transparencia .desg-formula-text{margin:0 0 var(--s-2);font-family:var(--font-mono);font-feature-settings:"tnum" 1;color:var(--label);font-size:var(--fs-11);white-space:nowrap;overflow:auto;}

/* =========================
   ACTIVIDAD Y CONVERSIÓN
   ========================= */

/* ----- 22) Versión grid genérica ----- */
#vista-transparencia .actividad-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8);font-size:var(--fs-12);}
#vista-transparencia .act-item{padding:var(--s-6) var(--s-8);border-radius:var(--rad-sm);border:1px solid color-mix(in oklch,var(--separator) 75%,transparent);background:color-mix(in oklch,var(--surface) 97%,var(--bg) 3%);display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-6);}
#vista-transparencia .act-label{color:var(--secondary);}
#vista-transparencia .act-value{font-family:var(--font-mono);}

/* ----- 23) Card específica .card.act ----- */
#vista-transparencia .card.act .actividad-table{margin-top:var(--s-6);display:flex;flex-direction:column;gap:0;font-size:var(--fs-12);}
#vista-transparencia .card.act .act-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-8);padding-block:var(--s-4);border-bottom:1px dashed color-mix(in oklch,var(--separator) 75%,transparent);}
#vista-transparencia .card.act .act-row:last-child{border-bottom:none;}
#vista-transparencia .card.act .act-row--section{display:block;padding-block:var(--s-4);margin-top:var(--s-8);border-bottom:none;}
#vista-transparencia .card.act .act-row--section:first-child{margin-top:0;}
#vista-transparencia .card.act .act-row--section .act-label{display:block;font-size:var(--fs-11);font-weight:var(--fw-medium);color:var(--secondary);}
#vista-transparencia .card.act .act-label{flex:1 1 auto;min-width:0;color:var(--secondary);}
#vista-transparencia .card.act .act-value{flex:0 0 auto;font-family:var(--font-mono);font-feature-settings:"tnum" 1;color:var(--label);white-space:nowrap;}
#vista-transparencia .card.act .act-value[data-metric="trend7d"]{position:relative;padding-left:1.1em;font-family:var(--font-mono);}
#vista-transparencia .card.act .act-value[data-metric="trend7d"]::before{content:"→";position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:.8em;color:var(--secondary);}
#vista-transparencia .card.act .act-value[data-metric="trend7d"][data-trend="up"]::before{content:"↑";color:var(--success);}
#vista-transparencia .card.act .act-value[data-metric="trend7d"][data-trend="down"]::before{content:"↓";color:var(--warn);}
#vista-transparencia .card.act .act-value[data-metric="trend7d"][data-trend="flat"]::before{content:"→";color:var(--secondary);}
#vista-transparencia .card.act .act-value[data-metric="trend7d"][data-trend="up"]{color:var(--success);font-weight:var(--fw-medium);}
#vista-transparencia .card.act .act-value[data-metric="trend7d"][data-trend="down"]{color:var(--warn);font-weight:var(--fw-medium);}
#vista-transparencia .card.act .act-value[data-metric="trend7d"][data-trend="flat"],#vista-transparencia .card.act .act-value[data-metric="trend7d"]:not([data-trend]){color:var(--secondary);}
#vista-transparencia .card.act .diag-empty{margin:0;padding-block:var(--s-4);font-size:var(--fs-12);color:var(--secondary);}
#vista-transparencia .card.act .act-acc{margin-top:var(--s-10);border-radius:var(--rad-sm);border:1px solid color-mix(in oklch,var(--separator) 80%,transparent);background:color-mix(in oklch,var(--surface) 98%,var(--bg) 2%);font-size:var(--fs-12);overflow:hidden;}
#vista-transparencia .card.act .act-acc>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-8);padding:var(--s-8) var(--s-10);cursor:pointer;list-style:none;color:var(--secondary);}
#vista-transparencia .card.act .act-acc>summary::-webkit-details-marker{display:none;}
#vista-transparencia .card.act .act-acc-title{flex:1 1 auto;min-width:0;}
#vista-transparencia .card.act .act-acc-panel{padding:0 var(--s-10) var(--s-8);}
#vista-transparencia .card.act .act-acc-panel .act-row:first-child{margin-top:var(--s-4);}

/* =========================
   RESPONSIVE + MOTION-SAFE
   ========================= */

@media (max-width:920px){
  #vista-transparencia{--col-ha:64px;}
  #vista-transparencia .vt-head,#vista-transparencia .vt-sum{grid-template-columns:var(--col-rank) var(--col-nota) var(--col-uf) var(--col-code) var(--col-ha) 0px var(--col-clin) var(--col-act);}
  #vista-transparencia .actividad-grid{grid-template-columns:1fr;}
}

@media (max-width:720px){
  #vista-transparencia .desg-grid{grid-template-columns:minmax(0,1fr);}
  #vista-transparencia .desg-head,#vista-transparencia .desg-row{grid-template-columns:minmax(0,1fr) 64px 72px;}
  #vista-transparencia .desg-col.comentario{grid-column:1/-1;margin-top:var(--s-2);}
  #vista-transparencia .desg-formula-text{white-space:normal;}
}

@media (max-width:640px){
  #vista-transparencia{--col-nota:28px;--col-uf:0px;--col-ha:0px;--gap-x:var(--s-8);--pad-code-left:var(--s-10);}
  #vista-transparencia .vt-head,#vista-transparencia .vt-sum{padding:var(--s-10) var(--s-12);grid-template-columns:28px var(--col-nota) var(--col-uf) var(--col-code) var(--col-ha) var(--col-ha) minmax(160px,2fr) var(--col-act);}
}

@media (prefers-reduced-motion:reduce){
  #vista-transparencia .vt-sum .clin .track,
  #vista-transparencia .cell.ac .ico,
  #vista-transparencia .bar .fill,
  #vista-transparencia .paginacion .pag-btn{transition:none;animation:none;}
}




/* Chips meta de red (tope, cantidad, tipo y calidad) */
#vista-transparencia .clin-meta-chips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-6);
  margin:0 0 var(--s-8);
}

#vista-transparencia .card.clinicas .clin-meta-chips{
  margin-top:var(--s-8);
}

/* Base: EXACTAMENTE igual que .peso */
#vista-transparencia .chip-meta{
  display:inline-flex;
  align-items:center;
  gap:var(--s-6);
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  color:color-mix(in oklch,var(--label) 70%,transparent);
  border:1px solid color-mix(in oklch,var(--separator) 55%,transparent);
  border-radius:var(--rad-pill);
  padding:var(--s-4) var(--s-8);
  background:color-mix(in oklch,var(--surface) 96%,var(--bg) 4%);
  transition:
    background var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

/* Hover igual que .peso */
#vista-transparencia .chip-meta:hover{
  border-color:color-mix(in oklch,var(--brand) 35%,var(--separator));
  background:color-mix(in oklch,var(--brand) 6%,transparent);
  color:color-mix(in oklch,var(--brand) 80%,black 20%);
}


/* Hover claro para indicar que el acordeón se puede expandir */
@media (hover:hover) and (pointer:fine){
  /* Fondo al pasar el mouse (solo cuando está cerrado) */
  #vista-transparencia .vt-row:not([open]) > .vt-sum:hover{
    background: color-mix(in oklch, var(--brand) 6%, var(--surface));
  }

  /* Cambiar color del código del plan (el <strong> dentro de .cod) */
  #vista-transparencia .vt-row:not([open]) > .vt-sum:hover .cod strong{
    color: color-mix(in oklch, var(--brand) 80%, black 20%);
  }
}

/* Estado ABIERTO: dejar pintada la fila (summary) + código en color */
#vista-transparencia .vt-row[open] > .vt-sum{
  background: color-mix(in oklch, var(--brand) 7%, var(--surface));
}

#vista-transparencia .vt-row[open] > .vt-sum .cod strong{
  color: color-mix(in oklch, var(--brand) 80%, black 20%);
}