/* GLOW · Fase 2 · Portal de progreso
   Gráficas de evolución, fotos de avance y metas.

   Estos bloques viven en los DOS paneles, y el contenido de ambos es CLARO
   (fondo blanco): el del owner (.ad-shell) y el de la clienta (.mp-main, que
   tiene la barra lateral negra pero el contenido en blanco). Por eso los
   colores parten de tinta oscura y no de los tokens crema del sitio público:
   sobre blanco, el crema no se ve.

   Contrastes sobre blanco (verificados): texto >= 4.5:1, linea de datos >= 3:1.
   El dorado de marca (#dbb05f) da 2:1 sobre blanco, asi que para la grafica se
   usa uno mas cargado. */
:root {
  --pg-text: #1d1812;
  --pg-mute: rgba(29, 24, 18, 0.72);   /* 6.9:1 */
  --pg-dim: rgba(29, 24, 18, 0.66);    /* 5.6:1 */
  --pg-line: rgba(40, 30, 15, 0.12);
  --pg-line-strong: rgba(40, 30, 15, 0.2);
  --pg-surface: #faf7f1;
  --pg-accent: #a8761f;                /* 4:1 — linea y puntos de la grafica */
  --pg-accent-soft: #8a6318;
  /* Color detrás de los puntos de la gráfica y fondo del tooltip. */
  --pg-behind: #ffffff;
  --pg-tip-bg: #ffffff;
  --pg-goal-done: 0.55;
  --pg-chip: rgba(168, 118, 31, 0.16);
}

/* Panel del owner: usa su propia tinta, un punto más cálida. */
.ad-shell {
  --pg-text: var(--ad-text);
  /* Más oscuros que --ad-text-mute / --ad-text-dim a propósito: esos quedan en
     4.2:1 y 2.5:1, y aquí sostienen texto que hay que poder leer (rótulos de
     los ejes, "sin datos", detalle de las metas). */
  --pg-mute: rgba(42, 36, 25, 0.72);
  --pg-dim: rgba(42, 36, 25, 0.66);
  --pg-line: var(--ad-line-soft);
  --pg-line-strong: var(--ad-line);
  --pg-surface: var(--ad-surface-2);
}

/* ---------- Gráfica de evolución ---------- */
.pg-chart {
  margin: 0 0 18px;
  padding: 14px 4px 6px;
  border: 1px solid var(--pg-line);
  border-radius: var(--radius-lg);
  background: var(--pg-surface);
}

.pg-chart-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px 8px;
}

.pg-chart-cap span {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pg-dim);
}

.pg-chart-cap strong {
  /* Sin la tipografía decorativa: en una cifra estorba más que ayuda. */
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--pg-accent-soft);
}

.pg-chart.is-compact .pg-chart-cap strong { font-size: 1.05rem; }

/* El plot scrollea solo si no cabe; la página nunca scrollea en horizontal. */
.pg-chart-plot {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.pg-chart-inner {
  position: relative;
  min-width: 480px;
}

.pg-chart-inner svg {
  display: block;
  width: 100%;
  height: auto;
  touch-action: pan-y;
}

.pg-tip {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border: 1px solid var(--pg-line-strong);
  border-radius: var(--radius);
  background: var(--pg-tip-bg);
  box-shadow: var(--shadow-soft);
  pointer-events: none;
  white-space: nowrap;
}

.pg-tip strong { font-size: 0.92rem; color: var(--pg-text); }
.pg-tip span { font-size: 0.75rem; color: var(--pg-dim); }

.pg-chart-empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  min-height: 130px;
  margin: 0 0 18px;
  padding: 18px;
  border: 1px dashed var(--pg-line);
  border-radius: var(--radius-lg);
  color: var(--pg-dim);
}

.pg-chart-empty.is-compact { min-height: 92px; }

.pg-chart-empty span {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pg-chart-empty small { font-size: 0.85rem; opacity: 0.75; }

/* Small multiples: una gráfica por medida corporal. */
.pg-multiples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

/* El historial lleva una columna por medida. Con nueve medidas la tabla es más
   ancha que la tarjeta que la contiene, y lo que sobresale se pierde: la
   última columna es la de los botones, así que "Editar" y "Borrar" quedaban
   fuera de la pantalla y no había forma de llegar a ellos. Que scrollee la
   tabla dentro de su tarjeta, no la página. */
.pg-tabla-ancha {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Fotos de avance ---------- */
.pg-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* En el panel cada foto lleva dos botones debajo ("Portada" y "Borrar"), y en
   la columna del avance no caben: se salian de la tarjeta y quedaban cortados. */
.pg-photos-admin {
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
}

.pg-photo {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pg-line);
  border-radius: var(--radius-lg);
  background: var(--pg-surface);
}

.pg-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.pg-photo-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* La tarjeta recorta lo que se desborda, asi que el pie baja de linea antes
     de que un boton quede a medias. */
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  font-size: 0.78rem;
  color: var(--pg-mute);
}

.pg-photo-meta .row-actions {
  flex-wrap: wrap;
}

.pg-photo-meta strong {
  font-weight: 500;
  text-transform: capitalize;
  color: var(--pg-text);
}

/* ---------- Fotos del producto, ordenables arrastrando ---------- */
.sh-mov { cursor: grab; user-select: none; }
.sh-mov:active { cursor: grabbing; }

/* La que va en la mano se atenúa; el hueco donde caería se marca en dorado. */
.sh-mov.is-tomada { opacity: 0.4; }

.sh-mov.is-encima {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201, 162, 78, 0.35);
}

/* El asa: no hace falta agarrarla (se arrastra la tarjeta entera), pero sin
   ella nadie adivina que la foto se puede mover. */
.sh-mov-asa {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(10, 8, 5, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.82);
  pointer-events: none;
}

.sh-orden.is-busy { opacity: 0.7; }

.sh-orden .pg-photo-meta .btn-mini { min-width: 30px; }

/* ---------- Metas ---------- */
.pg-goals {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pg-goal {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--pg-line);
  border-radius: var(--radius-lg);
  background: var(--pg-surface);
}

.pg-goal.is-done { opacity: var(--pg-goal-done); }
.pg-goal.is-done .pg-goal-title { text-decoration: line-through; }

.pg-goal-body { display: flex; flex-direction: column; gap: 3px; }
.pg-goal-title { font-weight: 600; color: var(--pg-text); }
.pg-goal-detail { font-size: 0.85rem; color: var(--pg-mute); }
.pg-goal-when { font-size: 0.78rem; color: var(--pg-dim); }

/* ---------- Observaciones del equipo ---------- */
.pg-notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pg-note {
  padding: 12px 14px;
  border-left: 2px solid var(--pg-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--pg-surface);
}

/* Las notas de ella se distinguen de las del equipo por el filo: mismo hilo,
   distinta voz. */
.pg-note-mine {
  border-left-color: var(--pg-line-strong);
  background: transparent;
  border-top: 1px solid var(--pg-line);
  border-right: 1px solid var(--pg-line);
  border-bottom: 1px solid var(--pg-line);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.pg-note p { margin: 0 0 6px; color: var(--pg-text); white-space: pre-wrap; }

.pg-note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--pg-dim);
}

/* ---------- Selector de unidades ---------- */
.pg-units {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--pg-line);
  border-radius: 999px;
}

.pg-units button {
  padding: 5px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--pg-dim);
  font-family: var(--sans);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.pg-units button.is-on {
  background: var(--pg-chip);
  color: var(--pg-text);
}

.pg-units button:disabled { cursor: wait; opacity: 0.6; }

@media (max-width: 640px) {
  .pg-chart-cap strong { font-size: 1.15rem; }
  /* En un móvil, 480px de ancho mínimo obligan a arrastrar la gráfica de lado
     para ver el último dato. El SVG escala solo con su viewBox, así que se le
     deja caber: mejor pequeña y entera que grande y a medias. */
  .pg-chart-inner { min-width: 0; }
  .pg-goal { flex-direction: column; align-items: stretch; }
}