/* ===================================================================
   Programs (list/retrieve)
   - Header sticky plano y opaco
   - KPIs, subtotales y pie sticky
   - Tooltip de Activity sobrio, sin sombras y con altura auto
   =================================================================== */

:root{
  --header-bg-light:#ffffff;
  --header-bg-dark:#0f1115;
}

/* -------- utilidades ligeras -------- */
.back-link{ color:var(--accent); text-decoration:none; }
.action-card h3{ margin:.25rem 0 .35rem; font-weight:600; }
.action-card p{ color:var(--muted); margin:0 0 .75rem; }

.action-icon{
  width:40px;height:40px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--card-border);background:var(--bg);
  margin-bottom:.75rem;font-size:18px;
}
.action-cta{
  display:inline-block;padding:.55rem .9rem;border-radius:10px;
  border:1px solid var(--card-border);background:var(--bg);color:var(--fg);
  text-decoration:none;font-weight:600;transition:border-color .2s,transform .2s;
}
.card:hover .action-cta{ border-color:var(--accent); transform:translateY(-1px); }

/* -------- tabla -------- */
.retrieve-table{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:.90rem;
}

/* header sticky plano y opaco */
.retrieve-table thead th{
  position:sticky; top:0; z-index:20;
  background-color:var(--header-bg-light); color:var(--fg);
  text-align:left; font-weight:600; letter-spacing:.02em;
  padding:10px 12px; border-bottom:2px solid var(--card-border);
  background-image:none; background-clip:padding-box;
}
html[data-theme="dark"] .retrieve-table thead th{
  background-color:var(--header-bg-dark);
  border-bottom-color:rgba(255,255,255,.12);
}

.retrieve-table tbody td{
  padding:10px 12px; border-bottom:1px solid var(--card-border);
  vertical-align:middle;
}
.retrieve-table .num{ text-align:right; font-variant-numeric:tabular-nums; }

/* alternancia por programa */
.retrieve-table tbody tr.row-group-a td{
  background:color-mix(in oklab, var(--card) 88%, var(--accent) 12%);
}
.retrieve-table tbody tr.row-group-b td{
  background:color-mix(in oklab, var(--card) 92%, var(--accent) 8%);
}
.retrieve-table tbody tr.row-group-start td{ border-top:2px solid var(--card-border); }
.retrieve-table tbody tr:hover td{ filter:brightness(.985); }

/* subtotal */
.retrieve-table tr.subtotal td{
  font-weight:600;
  background:color-mix(in oklab, var(--card) 85%, var(--accent) 15%);
  border-top:2px solid var(--card-border);
}
.retrieve-table tr.subtotal td.subtotal-label{ color:var(--muted); }

/* pie “sticky” dentro de la tarjeta */
.totals-sticky{
  position:sticky; bottom:0; display:grid;
  grid-template-columns:repeat(4,auto); gap:18px; align-items:center;
  padding:10px 12px; background:var(--header-bg-light);
  border-top:1px solid var(--card-border);
}
html[data-theme="dark"] .totals-sticky{
  background-color:var(--header-bg-dark);
  border-bottom-color:rgba(255,255,255,.12);
}
@media (max-width:700px){ .totals-sticky{ grid-template-columns:1fr 1fr; } }

/* columna final estrecha (icono) */
.retrieve-table thead th:last-child,
.retrieve-table tbody td:last-child{
  width:40px; text-align:center;
}

/* *** IMPORTANTE ***:
   desactivamos cualquier scroll interno para que NADA recorte el tooltip */
#listCard .scroll{ overflow:visible!important; max-height:none!important; }

/* -------- Icono “i” y tooltip (Activity) -------- */

/* icono */
.info-dot{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:999px;
  border:1px solid var(--card-border);
  font-size:11px; line-height:1; color:var(--muted);
  background:var(--card);
  cursor:default; position:relative;
  z-index:50; /* por encima de celdas/encabezado */
}

/* tooltip sobrio, SIN sombras, altura auto y ajuste al texto */
.info-dot:hover::after{
  content:attr(data-tip);
  position:absolute;
  top:calc(100% + 6px);                 /* debajo del icono */
  left:50%; transform:translateX(-50%);
  display:block;

  /* caja */
  background:#1c1e23; color:#fff;
  border-radius:6px; padding:8px 10px;
  text-align:left; line-height:1.4; font-size:.85rem;

  /* adapta ANCHO y ALTO al contenido */
  width:max-content;      /* se ajusta al texto */
  /*max-width:520px;        /* límite de lectura */
  height:auto;            /* crece en vertical */
  white-space:normal;     /* permite saltos de línea */
  overflow-wrap:anywhere; /* rompe palabras largas */
  box-shadow:none;        /* app seria: sin sombras */

  /* por encima de cualquier cosa sticky */
  z-index:3000;
}

/* pequeña flecha */
.info-dot:hover::before{
  content:"";
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent;
  border-bottom-color:#1c1e23;
  z-index:3001;
}