/* Página de listado de productos */

/* La superficie blanca (.surface, .surface-deco, títulos) vive en
   components.css. Acá solo lo específico del listado de productos. */

/* ── Fondo decorativo científico (molécula / ADN) ─────────────────────
   Reemplaza el detalle de círculos de .surface-deco SOLO en esta página
   por la imagen provista. Se apoya en la zona superior derecha, detrás del
   encabezado y el borde superior del buscador, con un desvanecido radial
   progresivo hacia el blanco. No toca texto ni controles: .surface-deco
   ya está en z-index:0 y pointer-events:none, y .surface > * queda encima. */
.surface .surface-deco {
  height: 400px;
  background-image: url("/admin/assets/productos-deco-dna.png");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto 260%;
  opacity: 0.92;
  -webkit-mask-image: radial-gradient(165% 150% at 70% 0%, #000 0%, #000 40%, transparent 82%);
          mask-image: radial-gradient(165% 150% at 70% 0%, #000 0%, #000 40%, transparent 82%);
}

@media (max-width: 720px) {
  .surface .surface-deco { height: 280px; opacity: 0.7; background-position: top right; }
}

/* En Productos el menú de usuario vive en la topbar (no flota), así que la
   página no necesita la banda de padding superior: arranca a ras. */
.main-content--flush .main-content-scroll { padding-top: 0; }
.main-content--flush .topbar { padding-top: var(--space-8); }
/* Sin esto, por debajo de 720px la regla de más abajo (".surface {
   padding: var(--space-4) }", dentro de su propio @media) le devolvía
   16px de padding-top a .surface — quedaba una franja del fondo del
   canvas por encima del header "hero" (--flush ya lo dejaba a 0 en su
   momento de escribirse, pero esa regla es más angosta y no la tenía en
   cuenta). Misma especificidad que esa regla (2 clases) para ganarle
   sin depender del orden de los @media. */
.main-content--flush .surface { padding-top: 0; }

/* Barra de búsqueda + filtros: fija (sticky) a ras del borde superior
   mientras se scrollea la tabla. Sangra el padding lateral de .main-content
   para que el fondo tape las filas que pasan por debajo. */
.main-content--flush .filters-section {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0 calc(var(--space-8) * -1) var(--space-5);
  padding: 14px var(--space-8);
  background: var(--color-bg-panel);
}

/* Búsqueda y chips más redondeados sobre la superficie */
.surface .search-input { border-radius: var(--radius-full); }
.surface .filter-chip { border-radius: var(--radius-full); }

/* ── Tarjetas de métricas del encabezado ─────── */
.pstats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* Mismo tratamiento que las cards KPI del Dashboard (.dash-kpi): superficie
   blanca plana, sombra --shadow-card, sin borde ni glassmorphism. */
.pstat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px var(--space-6);
  min-height: 148px;
  background: var(--color-bg-surface);
  border: none;
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.pstat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-raised);
}

/* Card principal ("Total productos") destacada con el degradé sutil, igual
   que "Total de productos" en el Dashboard (.dash-kpi--hero). */
.pstats .pstat:first-child {
  background: var(--gradient-kpi-hero);
}
.pstats .pstat:first-child .pstat-label { color: rgba(255, 255, 255, 0.72); }
.pstats .pstat:first-child .pstat-value { color: #fff; }
.pstats .pstat:first-child .pstat-sub,
.pstats .pstat:first-child .pstat-trend,
.pstats .pstat:first-child .pstat-pending { color: rgba(255, 255, 255, 0.82); }
.pstats .pstat:first-child .pstat-icon {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Contenedor de ícono — cuadrado redondeado, fondo tenue del acento
   (token --icon-badge-*), idéntico a .dash-kpi-badge. */
.pstat-icon {
  position: absolute;
  z-index: 1;
  top: var(--space-5);
  right: var(--space-5);
  width: 44px;
  height: 44px;
  border-radius: var(--icon-badge-radius);
  background: var(--icon-badge-bg);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pstat-icon svg { width: 20px; height: 20px; }

.pstat-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Wrappers neutros para el mobile hero (ver banda ≤860px más abajo):
   column por defecto, así en desktop el resultado visual es idéntico a
   antes de agregarlos (label, value, foot apilados, nada más). */
.pstat-mid,
.pstat-value-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pstat-hero-cta:empty { display: none; }

.pstat-label {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  max-width: calc(100% - 56px);
}

.pstat-value {
  font-family: var(--font-family-heading);
  font-size: 38px;
  font-weight: var(--weight-bold);
  line-height: 1.1;
  margin: 4px 0;
  color: var(--color-text-heading);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

.pstat-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  min-height: 1em;
  line-height: 1.5;
}

/* Pie de la tarjeta KPI: sub-%, mini barra de progreso, pendientes / tendencia */
.pstat-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.pstat-progress {
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--color-bg-input);
  overflow: hidden;
}

.pstat-progress-bar {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: var(--radius-full);
  background: var(--kpi-progress);
  transition: width 0.6s var(--ease-out);
}

/* Excepción semántica: verde solo para "completado al 100%" (Productos activos). */
.pstat-progress-bar--green { background: var(--kpi-progress-complete); }

.pstat-pending {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.pstat-trend {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.pstat-trend--up {
  color: var(--color-success-strong);
  font-weight: var(--weight-semibold);
}

/* ── Pie: conteo · paginación · cantidad por página ── */
.surface .table-footer {
  border-top: 1px solid var(--color-border-light);
  padding: var(--space-4) var(--space-5) var(--space-5);
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
}

.table-footer-count {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.table-footer-count strong {
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}

.page-size {
  display: inline-flex;
  align-items: center;
}

.page-size select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-control);
  padding: 7px 30px 7px 12px;
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--color-text-secondary);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6472' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 12px;
}

.page-size select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* ── Botón de refrescar + fila de filtros (siempre visible) ─────── */
.filters-refresh {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
  box-shadow: 0 1px 2px rgba(15, 45, 80, 0.04);
}
.filters-refresh:hover { transform: translateY(-1px) scale(1.04); }
.filters-refresh svg { width: 17px; height: 17px; }

/* El panel ya no es un popover: es una fila de chips inline bajo el buscador */
.filters-panel {
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
  animation: none;
}

.filters-panel .filters-row--chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* ── Escritorio angosto: aviso visual de que la tabla scrollea ───────
   La columna Acciones (historial/editar/copiar/eliminar) es la primera en
   no entrar cuando la ventana no está maximizada. .table-scroll ya
   scrollea horizontal (overflow-x:auto, ver components.css), pero sin
   ninguna señal visual el corte del último ícono se lee como un bug, no
   como "hay más para el costado". Degradé que se desvanece en cada borde
   +sombra sutil, técnica CSS-only (background-attachment:local se mueve
   con el contenido y desaparece solo al llegar al final del scroll — sin
   JS, sin recalcular en cada resize). Solo desktop: en mobile la tabla ya
   es cards (ver breakpoint 860px en components.css), no aplica scroll acá. */
@media (min-width: 861px) {
  [data-productos-table-container] {
    background:
      linear-gradient(to right, var(--color-bg-surface) 50%, transparent) 0 0,
      linear-gradient(to left, var(--color-bg-surface) 50%, transparent) 100% 0,
      linear-gradient(to right, rgba(15, 45, 80, 0.12), transparent) 0 0,
      linear-gradient(to left, rgba(15, 45, 80, 0.12), transparent) 100% 0;
    background-repeat: no-repeat;
    background-color: var(--color-bg-surface);
    background-size: 32px 100%, 32px 100%, 10px 100%, 10px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* ── Tabla: filas con más aire ─────────────────── */
.surface .table-scroll tbody td {
  padding-top: 17px;
  padding-bottom: 17px;
}

.surface .table-scroll thead th {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1100px) {
  .pstats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Adaptación por ALTURA (notebooks bajas) ─────────────────────
   Mismo criterio que dashboard/sidebar: en una notebook de 1366x768
   real (~625-715px de alto util) las 4 cards + buscador/filtros ya
   ocupan toda la ventana y la tabla no llega a asomar. Compacta altura
   de card, paddings y tamaños de número sin tocar la tabla ni ocultar
   ninguna columna. */
@media (max-height: 800px) {
  .pstats { gap: var(--space-3); margin-bottom: var(--space-4); }
  .pstat { padding: 16px var(--space-5); min-height: 100px; gap: 4px; }
  .pstat-value { font-size: 26px; margin: 2px 0; }
  .pstat-icon { width: 36px; height: 36px; top: var(--space-4); right: var(--space-4); }
  .pstat-icon svg { width: 17px; height: 17px; }

  .main-content--flush .filters-section { padding: 10px var(--space-8); }

  .surface .table-scroll tbody td { padding-top: 11px; padding-bottom: 11px; }
  .surface .table-scroll thead th { padding-top: var(--space-2); padding-bottom: var(--space-2); }
}

@media (max-width: 860px) {
  /* Mismo objetivo táctil que el resto de los icon-btn (ver components.css) */
  .filters-refresh { width: 44px; height: 44px; }

  /* Header "hero" con degradé — base compartida en layout.css (ver ahí
     .dash-mobile-hero, incluido el margin-bottom que separa el header
     de esta sección). Acá solo lo específico de esta página:
     "Total productos" (.pstat:first-child) MANTIENE su degradé de marca
     de siempre (ya lo tiene definido más arriba en este archivo, igual
     que .dash-kpi--hero en el Dashboard) — no se pisa a blanco, pierde
     la jerarquía visual que tiene en desktop si se hace blanca como el
     resto. 1 columna en todo el rango mobile (no solo <560px, ver la
     regla de mas abajo). */
  .pstats { grid-template-columns: 1fr; }

  /* CTA "Cargar producto" embebido en la card (mismo patrón nuevo que
     "Total de productos" en el Dashboard, sobre el mockup de
     referencia): reemplaza el FAB flotante. initMobileHeroLayout()
     (topbar.js) porta el mismo botón de siempre a
     [data-kpi-hero-cta-slot] dentro de .pstat-mid, que pasa de columna
     a fila para poner value+foot a la izquierda y el botón a la
     derecha. */
  .pstats .pstat:first-child .pstat-mid {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .pstats .pstat:first-child .btn-primary {
    flex-shrink: 0;
    background: #fff;
    color: var(--color-primary);
    white-space: nowrap;
    padding: 8px 14px;
    font-size: 12.5px;
    border-radius: var(--radius-full);
  }

  /* Fila de chips (Estado/Documentos/Canal/Actualización): con
     flex-wrap:wrap apilaba en varias líneas a 320-375px — cada chip ES un
     dropdown cerrado por defecto (ver components.css/productos.js), pero
     varias líneas de chips se leen de lejos como una lista siempre
     expandida. Una sola fila con scroll horizontal deja inequívoco que es
     una fila de controles compactos, no una lista de opciones. */
  .filters-panel .filters-row--chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .filters-panel .filters-row--chips::-webkit-scrollbar { display: none; }
  .filters-panel .filters-row--chips > * { flex-shrink: 0; }
}

@media (max-width: 720px) {
  .surface { padding: var(--space-4); border-radius: var(--radius-container); }
  .surface .table-footer { row-gap: var(--space-3); }
}

@media (max-width: 560px) {
  .pstats { grid-template-columns: 1fr; }
  .pstat-value { font-size: 24px; }
}

.productos-gtin {
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

.productos-nombre {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
}

/* Principio activo + presentacion, solo cuando el producto tiene nombre
   estructurado (ver scripts/actualizar-nombres-estructurados.js). */
.productos-principio {
  margin-top: 2px;
  color: var(--color-text-secondary, var(--color-text-muted));
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
}

.productos-area {
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* Estado del documento vigente — pill con contraste real, es el dato crítico */
.doc-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.doc-status svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Celeste oscuro (acento del panel), no verde "success": un producto con
   Prospecto e Info al paciente cargados tiene que verse igual en las dos
   columnas para identificar de un vistazo que estan los 2 documentos. */
.doc-status--ok {
  color: var(--color-info-strong);
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
}

/* Ausencia: callada, contorno punteado — casillero vacío, no error */
.doc-status--missing {
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  font-weight: var(--weight-medium);
}

/* .row-actions y .icon-btn (acciones de fila) viven en components.css —
   los usan también Configuración e Historial. */

.table-loading {
  padding: var(--space-12);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
}

/* Columna de acciones: ancho fijo, no compite con el nombre del producto */
table th:last-child,
table td:last-child {
  width: 1%;
  white-space: nowrap;
}