/* Complementos puntuales para /demo-portal.html — reutiliza los tokens y
   componentes de portal.css/styles.css; solo agrega lo que esas hojas no
   tenían (grid de estadísticas de 6 celdas, CTA final y el toast de
   "descarga de demostración"). */

/* Encabezado compacto: h1 + una línea de identidad del cliente ficticio
   (reutiliza .px-crumbs, ya estilada) en vez de un panel grande con
   disclaimers repetidos — la aclaración de "datos ficticios" ya vive en el
   aviso final de la página (.px-notice), no hace falta repetirla arriba. */
.px-page-head { margin-bottom: 2px; }
.px-page-head .px-crumbs .sep { margin: 0 6px; opacity: 0.5; }

/* Barra de navegación rápida entre secciones de la demo (ancla a cada
   tarjeta), para que se sienta como un tablero completo y no una sola
   página larga sin estructura. Padding mínimo: es una franja de acceso
   rápido, no una sección con aire propio. */
.demo-quicknav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
}
.demo-quicknav a {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-solid);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.demo-quicknav a:hover,
.demo-quicknav a:focus-visible {
  color: var(--brand);
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--panel-solid));
}

.px-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 18px;
}
@media (max-width: 560px) {
  .px-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Inventario resumido: mismas 8 categorías que se muestran en la home
   (antes solo tenía 6 y con nombres distintos — se veía pobre en
   comparación). 4 columnas de 2 filas en vez de 3 de 3, para que no quede
   una fila final con huecos. */
.px-stat-grid--8 { grid-template-columns: repeat(4, 1fr); }
.px-stat-grid--8 .px-stat { padding: 10px 4px 4px; border-top: 1px solid var(--line-soft); }
@media (max-width: 880px) {
  .px-stat-grid--8 { grid-template-columns: repeat(2, 1fr); }
}

/* Hallazgos: la card por defecto de .px-finding (portal.css) es plana
   (borde + relleno uniforme); acá se le agrega un tinte de fondo por
   severidad, sombra al pasar el mouse y una tarjeta de evidencia con
   apariencia de terminal, para que no se vea como una simple lista. */
.px-finding {
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.px-finding:hover { box-shadow: var(--shadow-card); }
.px-finding--critical { background: linear-gradient(180deg, rgba(200, 45, 45, 0.05) 0%, var(--panel-solid) 60px); }
.px-finding--high { background: linear-gradient(180deg, rgba(200, 71, 21, 0.05) 0%, var(--panel-solid) 60px); }
.px-finding--medium { background: linear-gradient(180deg, rgba(159, 119, 1, 0.05) 0%, var(--panel-solid) 60px); }
.px-finding--low { background: linear-gradient(180deg, rgba(4, 154, 237, 0.05) 0%, var(--panel-solid) 60px); }
.px-finding .fid {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--bg-2);
}
.px-finding .fev {
  background: #17171c;
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.px-detail-row.evidence dd { background: #17171c; color: rgba(255, 255, 255, 0.78); border: 1px solid rgba(255, 255, 255, 0.08); }

/* Menos aire entre secciones y menos padding superior de página: sin el
   hero grande ni el banner de aviso, la separación por defecto del portal
   (pensada para páginas con más encabezado) dejaba huecos verticales
   grandes antes de la primera tarjeta y entre cada tarjeta. */
.px-main { padding-top: calc(var(--nav-h) + 30px); }
.px-main > .shell { gap: clamp(12px, 1.6vw, 18px); }

/* Las reglas .px-trend-* (tarjetas de tendencia "Evolución en los últimos
   análisis") viven en portal.css, no acá — compartidas entre esta demo y
   el portal real para que se vean idénticas. Ver ese archivo. */

.demo-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 8px;
}

.demo-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  max-width: min(560px, calc(100vw - 32px));
  background: var(--brand-dark);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  font-size: 13.5px;
  line-height: 1.4;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.demo-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .demo-toast { transition: none; }
}