/* ─────────────────────────────────────────────────────────────
   premium.css — capa "VDN DS v2.0" portada a AppSports.
   Componentes premium (KPI con barra de color, panels, tabla .dt,
   tags, summary-bar, cmd-hero, empty-state, btn-row) adaptados a
   los tokens YA existentes de AppSports (--cp-* puente de tokens.css,
   --color-*/--surface-*/--text-*/--border-* de ds.css). Cargar
   DESPUÉS de app.css.

   Regla de oro: ningún hex de marca aquí. Todo color viaja por
   variables ya scoped a [data-bs-theme] (o por --cp-* que la
   escuela sobreescribe inline en base_panel.html). Únicas
   literales permitidas: rgba(0,0,0,..)/rgba(255,255,255,..)
   neutras de sombra/blur.
   ───────────────────────────────────────────────────────────── */

/* ── 1. KPI premium (barra izq 3px + icon chip color-mix) ─────── */
.kpi-grid {
  display: grid;
  gap: var(--cp-sp-4, 1rem);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
}

.kpi {
  position: relative;
  overflow: hidden;
  border-radius: var(--cp-radius-card, 16px);
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--cp-border, var(--border-default));
  background: var(--cp-card, var(--surface-card));
  transition: transform var(--cp-anim, 200ms) ease, box-shadow var(--cp-anim, 200ms) ease;
}
.kpi:hover {
  transform: translateY(-3px);
  box-shadow: var(--cp-shadow-lg, 0 10px 30px rgba(15, 23, 42, .12));
}
.kpi::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--kpi-c, var(--cp-primary, var(--color-primary)));
  opacity: .9;
}
.kpi__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  margin-bottom: .7rem;
  background: color-mix(in srgb, var(--kpi-c, var(--cp-primary, var(--color-primary))) 14%, transparent);
  color: var(--kpi-c, var(--cp-primary, var(--color-primary)));
}
.kpi__icon i, .kpi__icon svg { width: 20px; height: 20px; }
.kpi__val {
  font-family: var(--cp-font-head, var(--ff-head));
  font-size: 1.85rem;
  font-weight: 700;
  line-height: var(--lh-tight, 1.2);
  color: var(--cp-text, var(--text-primary));
}
.kpi__label {
  font-size: .82rem;
  color: var(--cp-text-secondary, var(--text-secondary));
  margin-top: .15rem;
}
.kpi__hint {
  font-size: .74rem;
  color: var(--cp-text-secondary, var(--text-muted));
  margin-top: .3rem;
}
.kpi--primary { --kpi-c: var(--cp-primary, var(--color-primary)); }
.kpi--success { --kpi-c: var(--cp-success, var(--color-success)); }
.kpi--warning { --kpi-c: var(--cp-warning, var(--color-warning)); }
.kpi--danger  { --kpi-c: var(--cp-danger, var(--color-danger)); }
.kpi--info    { --kpi-c: var(--cp-info, var(--color-info)); }
.kpi--neutral { --kpi-c: var(--cp-text-secondary, var(--text-muted)); }

/* ── 2. Panel (card de contenido genérica con header + icon chip) ── */
.panel {
  background: var(--cp-card, var(--surface-card));
  border: 1px solid var(--cp-border, var(--border-default));
  border-radius: var(--cp-radius-card, 16px);
  box-shadow: var(--cp-shadow-sm, 0 1px 2px rgba(15, 23, 42, .06));
  overflow: hidden;
}
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--cp-border, var(--border-default));
}
.panel__title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--cp-font-head, var(--ff-head));
  font-weight: 600;
  font-size: .95rem;
  color: var(--cp-text, var(--text-primary));
  margin: 0;
}
.panel__body { padding: 1.25rem; }
.panel__body.p-0 { padding: 0; }

/* Icon chip 30×30 de cabecera de panel (`.pi`) */
.pi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--pi-c, var(--cp-primary, var(--color-primary))) 14%, transparent);
  color: var(--pi-c, var(--cp-primary, var(--color-primary)));
}
.pi i, .pi svg { width: 16px; height: 16px; }
.pi--primary { --pi-c: var(--cp-primary, var(--color-primary)); }
.pi--success { --pi-c: var(--cp-success, var(--color-success)); }
.pi--warning { --pi-c: var(--cp-warning, var(--color-warning)); }
.pi--danger  { --pi-c: var(--cp-danger, var(--color-danger)); }
.pi--info    { --pi-c: var(--cp-info, var(--color-info)); }
.pi--neutral { --pi-c: var(--cp-text-secondary, var(--text-muted)); }

/* ── 3. Tabla premium `.dt` ─────────────────────────────────────── */
.dt {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .86rem;
}
.dt thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--cp-card, var(--surface-card));
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .05em;
  font-weight: 600;
  color: var(--cp-text-secondary, var(--text-secondary));
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--cp-border, var(--border-default));
  white-space: nowrap;
}
.dt tbody td {
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--cp-border, var(--border-default));
  color: var(--cp-text, var(--text-primary));
  vertical-align: middle;
}
.dt tbody tr:last-child td { border-bottom: none; }
.dt tbody tr:hover td {
  background: color-mix(in srgb, var(--cp-primary, var(--color-primary)) 6%, transparent);
}
.dt tbody tr.is-danger td {
  background: color-mix(in srgb, var(--cp-danger, var(--color-danger)) 7%, transparent);
}
.dt tbody tr.is-warning td {
  background: color-mix(in srgb, var(--cp-warning, var(--color-warning)) 7%, transparent);
}
.dt tbody tr.is-danger:hover td {
  background: color-mix(in srgb, var(--cp-danger, var(--color-danger)) 12%, transparent);
}
.dt tbody tr.is-warning:hover td {
  background: color-mix(in srgb, var(--cp-warning, var(--color-warning)) 12%, transparent);
}
.dt td.num, .dt th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dt td.strong { font-weight: 600; color: var(--cp-text, var(--text-primary)); }
.dt td.muted { color: var(--cp-text-secondary, var(--text-muted)); }
.dt td.truncate {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 4. Tags (reemplazo compacto de badge bg-*) ────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border-radius: 8px;
  font-size: .68rem;
  font-weight: 600;
  padding: .25rem .55rem;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--tag-c, var(--cp-text-secondary, var(--text-secondary)));
  background: color-mix(in srgb, var(--tag-c, var(--cp-text-secondary, var(--text-secondary))) 16%, transparent);
}
.tag--primary { --tag-c: var(--cp-primary, var(--color-primary)); }
.tag--success { --tag-c: var(--cp-success, var(--color-success)); }
.tag--warning { --tag-c: var(--cp-warning, var(--color-warning)); }
.tag--danger  { --tag-c: var(--cp-danger, var(--color-danger)); }
.tag--info    { --tag-c: var(--cp-info, var(--color-info)); }
.tag--neutral {
  --tag-c: var(--cp-text-secondary, var(--text-muted));
  background: color-mix(in srgb, var(--tag-c, var(--cp-text-secondary, var(--text-muted))) 18%, transparent);
}

/* ── 5. Summary bar / chips (fila de indicadores arriba del hero) ── */
.summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1rem;
}
.summary-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--chip-c, var(--cp-text-secondary, var(--text-secondary)));
  background: color-mix(in srgb, var(--chip-c, var(--cp-text-secondary, var(--text-secondary))) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip-c, var(--cp-text-secondary, var(--text-secondary))) 35%, transparent);
}
.summary-chip--primary { --chip-c: var(--cp-primary, var(--color-primary)); }
.summary-chip--success { --chip-c: var(--cp-success, var(--color-success)); }
.summary-chip--warning { --chip-c: var(--cp-warning, var(--color-warning)); }
.summary-chip--danger  { --chip-c: var(--cp-danger, var(--color-danger)); }
.summary-chip--info    { --chip-c: var(--cp-info, var(--color-info)); }

/* ── 6. Cmd hero (mismo lenguaje que .page-header de ds.css §6:
   blob radial + card bg, reutiliza los mismos --tk-* con fallback
   a --color-* que ya usa .page-header, para máxima consistencia) ── */
.cmd-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--tk-radius-lg, 22px);
  border: 1px solid var(--tk-glass-border, var(--border-default));
  padding: 1.7rem 1.8rem;
  margin-bottom: 1.4rem;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--tk-primary-subtle, var(--color-primary-subtle)) 0%, transparent 55%),
    var(--surface-card);
}
.cmd-hero::after {
  content: "";
  position: absolute;
  right: -80px; top: -90px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: var(--tk-gradient, var(--color-gradient));
  opacity: .14;
  filter: blur(20px);
  pointer-events: none;
}
.cmd-hero > * { position: relative; z-index: 1; }
.cmd-hero__greeting {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: .25rem;
}
.cmd-hero__title, .cmd-hero h1 {
  font-family: var(--cp-font-head, var(--ff-head));
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  margin-bottom: .35rem;
  color: var(--text-primary);
}
.cmd-hero__subtitle {
  font-size: .9rem;
  color: var(--text-secondary);
}
.cmd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.1rem;
}

/* ── 7. Empty state (refuerzo premium sobre el ya definido en
   app.css: icono en chip circular suave en vez de icono plano) ── */
.empty-state i,
.empty-state svg {
  background: color-mix(in srgb, var(--cp-primary, var(--color-primary)) 10%, transparent);
  border-radius: 50%;
  padding: 14px;
  box-sizing: border-box;
  color: var(--cp-primary, var(--color-primary));
  opacity: 1;
}

/* ── 8. Fila de acciones/CTAs al pie de un bloque ──────────────── */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}

/* ── 9. KPI card (variante Bootstrap-first `.kpi-card`/`.kpi-icon` usada
   en dashboard.html, finanzas/cartera.html, inventario/catalogo.html y
   demás templates "estilo intermedio" — distinta de `.kpi`/`.kpi__icon`
   100% premium de la sección 1). Antes vivía en un <style> inline de
   dashboard.html, por lo que solo aplicaba ahí; movida aquí para que
   TODAS las páginas que usan estas clases se beneficien del hover y de
   los overrides de dark mode por igual. Cero cambio visual intencional. */
.kpi-card { transition: transform .2s ease, box-shadow .2s ease; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,.1) !important; }
.event-row:hover { background: var(--cp-primary-subtle) !important; }
.bg-success-subtle { background: rgba(5,150,105,.1) !important; }
.bg-danger-subtle { background: rgba(220,38,38,.1) !important; }
.bg-warning-subtle { background: rgba(217,119,6,.1) !important; }
.bg-info-subtle { background: rgba(2,132,199,.1) !important; }
[data-bs-theme="dark"] .cp-card { background: #1c1c32; border-color: #2d2d50; }
[data-bs-theme="dark"] .kpi-icon { background: rgba(255,255,255,.08) !important; }

/* ── 10. Calendario estilo AppVDN (restyle FullCalendar + agenda derecha) ──
   Extraído de /appvdn/app/templates/calendario.html (ver
   docs/superpowers/specs/appvdn-calendario-extraccion.md). Selectores
   acotados a #calendar (único punto de montaje de FullCalendar en la app)
   y a las clases .cal-agenda-*/.cal-hover-tooltip, propias de esta página,
   para que nada se filtre a otras vistas. Tokens --tk-* del original
   adaptados a --cp-primary / --color-* / --surface-* / --border-default /
   --text-* ya existentes; ningún hex de marca. */

#calendar .fc { font-family: var(--cp-font, inherit); }

#calendar .fc-toolbar-title {
  font-family: var(--cp-font-head, var(--ff-head));
  font-weight: 700;
  font-size: .98rem;
  color: var(--cp-text, var(--text-primary));
}

#calendar .fc-button {
  border-radius: 9px;
  background: var(--surface-hover) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--cp-text, var(--text-primary)) !important;
  font-size: .78rem;
  font-weight: 600;
  padding: .35rem .7rem;
  box-shadow: none !important;
  text-transform: none;
}
#calendar .fc-button:hover {
  background: color-mix(in srgb, var(--cp-primary, var(--color-primary)) 12%, transparent) !important;
  color: var(--cp-primary, var(--color-primary)) !important;
  border-color: color-mix(in srgb, var(--cp-primary, var(--color-primary)) 35%, transparent) !important;
}
#calendar .fc-button-primary:not(:disabled).fc-button-active,
#calendar .fc-button-primary:not(:disabled):active {
  background: var(--cp-primary, var(--color-primary)) !important;
  border-color: var(--cp-primary, var(--color-primary)) !important;
  color: #fff !important;
}
#calendar .fc-button:focus {
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--cp-primary, var(--color-primary)) 25%, transparent) !important;
}

#calendar .fc-day-today {
  background: color-mix(in srgb, var(--cp-primary, var(--color-primary)) 9%, transparent) !important;
}
#calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cp-primary, var(--color-primary));
  color: #fff;
  font-weight: 700;
}

#calendar .fc-col-header-cell {
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--cp-text-secondary, var(--text-muted));
  background: transparent;
}

#calendar .fc-event {
  border: none;
  border-radius: 7px;
  font-size: .74rem;
  font-weight: 600;
  padding: 2px 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
  transition: opacity .15s ease, transform .15s ease;
}
#calendar .fc-event:hover { opacity: .88; transform: translateY(-1px); }
#calendar .fc-daygrid-event-dot { display: none; }

#calendar .fc-daygrid-day:hover {
  background: color-mix(in srgb, var(--cp-text-secondary, var(--text-muted)) 6%, transparent);
}
#calendar .fc-scrollgrid,
#calendar .fc-scrollgrid td,
#calendar .fc-scrollgrid th,
#calendar .fc-theme-standard td,
#calendar .fc-theme-standard th {
  border-color: var(--border-default);
}

#calendar .fc-list-day-cushion {
  background: var(--surface-hover) !important;
}
#calendar .fc-list-event:hover td { background: var(--surface-hover) !important; }
#calendar .fc-list-event-time,
#calendar .fc-list-event-title a {
  color: var(--cp-text, var(--text-primary));
}
#calendar .fc-list-empty {
  background: transparent;
  color: var(--cp-text-secondary, var(--text-muted));
}

#calendar .fc-popover {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  box-shadow: var(--cp-shadow-lg, 0 10px 30px rgba(15, 23, 42, .18));
}
#calendar .fc-popover-header {
  background: var(--surface-hover);
  color: var(--cp-text, var(--text-primary));
}

/* Panel derecho "Próximos eventos" */
.cal-agenda-body-scroll {
  flex: 1;
  overflow-y: auto;
  max-height: 560px;
  min-height: 400px;
}
.cal-agenda-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .72rem 1.2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border-default) 50%, transparent);
  cursor: pointer;
  transition: background .15s ease;
}
.cal-agenda-item:last-child { border-bottom: none; }
.cal-agenda-item:hover { background: var(--surface-hover); }
.cal-agenda-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cal-agenda-body { min-width: 0; flex: 1; }
.cal-agenda-title {
  font-size: .83rem;
  font-weight: 700;
  color: var(--cp-text, var(--text-primary));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-agenda-sub {
  font-size: .74rem;
  color: var(--cp-text-secondary, var(--text-muted));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-agenda-date {
  flex-shrink: 0;
  text-align: right;
  font-size: .82rem;
}
.cal-agenda-date strong {
  display: block;
  color: var(--cp-text, var(--text-primary));
}
.cal-agenda-date span {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cp-text-secondary, var(--text-muted));
}

/* Tooltip glass al pasar el mouse sobre un evento */
.cal-hover-tooltip {
  position: fixed;
  z-index: 3000;
  display: none;
  min-width: 220px;
  max-width: 280px;
  padding: .75rem .9rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-card) 88%, transparent);
  border: 1px solid var(--border-default);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
}
.cal-hover-tooltip__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  font-weight: 700;
  font-size: .85rem;
  color: var(--cp-text, var(--text-primary));
}
.cal-hover-tooltip__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cal-hover-tooltip__row {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  font-size: .76rem;
  padding: .18rem 0;
  color: var(--cp-text-secondary, var(--text-secondary));
}
.cal-hover-tooltip__row strong { color: var(--cp-text, var(--text-primary)); font-weight: 600; }
.cal-hover-tooltip__tag {
  display: inline-flex;
  margin-top: .3rem;
}