/* =============================================================
   MyAnnita · Métricas (app-review-8888 → v2 metricas-y-avisos-8891, G14) · DS v2.0
   Territorio A (pantallas). Archivo NUEVO, propio de esta corrida.
   Encolado por template-parts/metricas/metricas-assets.php (helper propio,
   NO functions.php/inc/: ese territorio es de B — ver CONTRATO.md §Territorios).
   Tokens locales (mismo idiom que css/rating-modal.css, css/pricing-modal.css,
   css/wizard-campania-v18.css: --lima/--cream/--deep/--violeta por
   scope, no hay :root global en el tema).
   ============================================================= */

.mya-metricas {
  --deep: #191919;
  --cream: #FEF7E7;
  --lima: #DAFF02;
  --violeta: #7138FF;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--cream);
}

.mya-metricas h3,
.mya-metricas h4 {
  font-family: 'Hanken Grotesk', 'Inter', sans-serif;
  font-weight: 900;
  margin: 0 0 10px;
  color: var(--cream);
}

/* ---------- caja-perfil.php (v2 · 8891) ----------
   Contraste medido (WCAG 2.x, luminancia relativa; script en _corridas/metricas-y-avisos-8891/f1/):
   crema al 60 % = 6,58:1 sobre #191919 · 6,39:1 sobre #1E1E1E · 6,01:1 sobre la baldosa de cifra
   (crema 4 % sobre #1E1E1E). Todo AA para texto chico (≥ 4,5:1): no hizo falta subirla. */
.mya-metricas-perfil {
  background: #1E1E1E;
  border: 1px solid rgba(254, 247, 231, .08);
  border-radius: 18px;
  padding: 20px 18px;
  margin: 18px 0;
}
.mya-metricas-perfil .mm-red {
  padding: 14px 0;
  border-top: 1px solid rgba(254, 247, 231, .08);
}
.mya-metricas-perfil .mm-red:first-of-type { border-top: none; padding-top: 0; }
.mya-metricas-perfil .mm-red-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 800;
  font-size: 15px;
}
.mya-metricas-perfil .mm-red-head svg { width: 18px; height: 18px; flex: none; }
.mya-metricas .mm-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.mya-metricas .mm-stat {
  background: rgba(254, 247, 231, .04);
  border-radius: 10px;
  padding: 10px 10px;
  min-width: 0;
}
.mya-metricas .mm-stat-n {
  display: block;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.2;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mya-metricas .mm-stat-n.mm-lima { color: var(--lima); }
.mya-metricas .mm-stat-l {
  display: block;
  font-size: 11.5px;
  line-height: 1.3;
  color: rgba(254, 247, 231, .6);
  margin-top: 3px;
}
.mya-metricas .mm-audiencia { margin-top: 12px; }
.mya-metricas .mm-aud-tit {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(254, 247, 231, .8);
  margin: 0 0 8px;
}
.mya-metricas .mm-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 12px;
}
.mya-metricas .mm-bar-label {
  text-align: left; /* el perfil hereda text-align:center: la ciudad se lee como tabla, pegada a la izquierda */
  flex: 0 0 38%;
  max-width: 160px;
  color: rgba(254, 247, 231, .8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mya-metricas .mm-bar-track {
  flex: 1 1 auto;
  height: 4px;
  background: rgba(254, 247, 231, .08);
  border-radius: 999px;
  overflow: hidden;
}
.mya-metricas .mm-bar-fill {
  display: block;
  height: 100%;
  background: var(--violeta);
  border-radius: 999px;
}
.mya-metricas .mm-bar-val {
  flex: 0 0 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: rgba(254, 247, 231, .8);
  font-size: 12px;
  white-space: nowrap;
}
.mya-metricas .mm-aud-edad {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: rgba(254, 247, 231, .8);
}
.mya-metricas .mm-pie {
  display: block;
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(254, 247, 231, .6);
}

/* ---------- reporte-entrega.php (v2 · 8891) ---------- */
.mya-metricas-entrega {
  background: #1E1E1E;
  border: 1px solid rgba(254, 247, 231, .08);
  border-radius: 14px;
  padding: 16px 16px 14px;
  margin: 12px 0;
}
.mya-metricas-entrega .mm-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: rgba(254, 247, 231, .35);
  text-underline-offset: 3px;
  margin-bottom: 12px;
  border-radius: 4px;
}
.mya-metricas-entrega .mm-link:hover { color: var(--lima); text-decoration-color: var(--lima); }
.mya-metricas-entrega .mm-link-ico { flex: none; }
.mya-metricas-entrega .mm-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mya-metricas-entrega .mm-secundaria {
  margin: 0 0 4px;
  font-size: 12.5px;
  color: rgba(254, 247, 231, .8);
}
.mya-metricas-entrega .mm-motivo {
  background: rgba(254, 247, 231, .05);
  color: rgba(254, 247, 231, .8);
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  margin: 4px 0 0;
}

/* ---------- aviso-reconexion.php (v2 · 8891) ---------- */
.mya-metricas-reconexion {
  background: #1E1E1E;
  border: 1px solid rgba(113, 56, 255, .45);
  border-radius: 16px;
  padding: 16px 18px;
  margin: 0 0 16px;
}
.mya-metricas-reconexion .mm-recon-tit {
  font-size: 16px;
  margin: 0 0 6px;
}
.mya-metricas-reconexion .mm-recon-txt {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(254, 247, 231, .8);
  margin: 0 0 14px;
}
.mya-metricas-reconexion .mm-recon-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.mya-metricas-reconexion .mm-recon-form { margin: 0; display: inline-flex; }
.mya-metricas-reconexion .mm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
}
.mya-metricas-reconexion .mm-btn-lima { background: var(--lima); color: var(--deep); }
.mya-metricas-reconexion .mm-btn-lima:hover { filter: brightness(1.06); color: var(--deep); }
.mya-metricas-reconexion .mm-btn-contorno { background: transparent; color: var(--cream); border-color: rgba(254, 247, 231, .5); }
.mya-metricas-reconexion .mm-btn-contorno:hover { border-color: var(--cream); color: var(--cream); }
.mya-metricas-reconexion .mm-btn-texto {
  background: none;
  border: none;
  padding: 10px 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(254, 247, 231, .8);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  border-radius: 6px;
}
.mya-metricas-reconexion .mm-btn-texto:hover { color: var(--cream); }

/* ---------- foco visible (ADENDA 1.3) ---------- */
.mya-metricas .mm-btn:focus-visible,
.mya-metricas .mm-btn-texto:focus-visible,
.mya-metricas .mm-link:focus-visible {
  outline: 2px solid var(--lima);
  outline-offset: 2px;
}

/* texto sólo para lectores de pantalla (por si el tema no trae la clase) */
.mya-metricas .screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal;
}

/* ---------- pagina-borrado-de-datos.php ----------
   arreglos-recorrida-8902 F1 (F1-D1 de ensayo-staging-8901): la página toma el header/footer del sitio con
   get_header() y el body del sitio es BLANCO, pero todo el texto de acá es crema → contraste 1,03-1,15:1.
   Arreglo: el FONDO lo pone el propio contenedor (no depende del body ni de una clase del body, que en esta
   ruta virtual no trae page-template-*): #191919 (DS v2.0, --deep), el de las demás páginas legales públicas
   (/reclamos/, /condiciones-de-uso/, /politicas-de-privacidad/, /arrepentimiento/, /baja/: body #191919 y
   texto crema, medido en el banco 9140). El contenedor mide 760 px: el border-image con outset lateral de
   100vmax lo extiende a todo el ancho SIN tocar el markup y sin generar scroll horizontal (el outset no
   cuenta como desborde). No se usa box-shadow + clip-path: el recorte cae en un borde fraccional y a 1280
   dejaba una línea gris clara (82,82,82) contra el footer, medida. Copy, estructura y URL: sin cambio. */
.mya-metricas-borrado {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 72px;
  background: var(--deep);
  border-image: linear-gradient(var(--deep), var(--deep)) fill 0 / 0 / 0 100vmax;
}
.mya-metricas-borrado h1 {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 5vw, 34px);
  color: var(--cream);
  margin: 0 0 6px;
}
.mya-metricas-borrado .mm-sub {
  color: rgba(254, 247, 231, .6);
  font-size: 13.5px;
  margin: 0 0 28px;
}
.mya-metricas-borrado h2 {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--cream);
  margin: 30px 0 10px;
}
.mya-metricas-borrado p,
.mya-metricas-borrado li {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(254, 247, 231, .82);
}
/* El tema pinta <strong> en rgb(36,36,36): sobre #191919 daba 1,07:1 (medido). Hereda el crema. */
.mya-metricas-borrado strong { color: var(--cream); }
.mya-metricas-borrado ul { padding-left: 20px; margin: 8px 0; }
.mya-metricas-borrado a,
.mya-metricas-borrado a:hover,
.mya-metricas-borrado a:focus { color: var(--lima); }
.mya-metricas-borrado a:focus-visible { outline: 2px solid var(--lima); outline-offset: 2px; }
.mya-metricas-borrado .mm-estado-card {
  background: #1E1E1E;
  border: 1px solid rgba(254, 247, 231, .1);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 16px 0 28px;
}
.mya-metricas-borrado .mm-estado-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}
.mya-metricas-borrado .mm-estado-pill.recibido { background: rgba(254, 247, 231, .12); color: var(--cream); }
.mya-metricas-borrado .mm-estado-pill.completado { background: rgba(218, 255, 2, .18); color: var(--lima); }
.mya-metricas-borrado .mm-estado-pill.desconocido { background: rgba(220, 38, 38, .15); color: #ff8a8a; }
.mya-metricas-borrado .mm-en {
  margin-top: 42px;
  padding-top: 24px;
  border-top: 1px solid rgba(254, 247, 231, .1);
}
.mya-metricas-borrado .mm-en h2,
.mya-metricas-borrado .mm-en p,
.mya-metricas-borrado .mm-en li { font-style: normal; }
.mya-metricas-borrado .mm-en .mm-en-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(254, 247, 231, .6); /* 8902: era .4 → 3,6:1 sobre #191919 en 11 px (texto chico pide 4,5) */
  margin-bottom: 10px;
}

@media (max-width: 480px) {
  .mya-metricas .mm-stat { padding: 9px 8px; }
  .mya-metricas .mm-stat-n { font-size: 16px; }
  .mya-metricas .mm-stat-l { font-size: 11px; }
  .mya-metricas-entrega .mm-stats-4 { grid-template-columns: 1fr 1fr; }
}