/* =========================================================
   Tarjetas de planes — versión producción (compact)
   Requiere: core.css
   ========================================================= */

/* ---------------------------------------------------------
   0) Tokens locales mínimos del componente
   --------------------------------------------------------- */
:root{--card-min-w:300px;--card-min-w-md:340px;--chip-top1-bd:color-mix(in oklch,var(--warn)35%,white 65%);--chip-top1-bg1:color-mix(in oklch,var(--warn)12%,white 88%);--chip-top1-bg2:color-mix(in oklch,var(--warn)28%,white 72%);--chip-top1-fg:color-mix(in oklch,var(--warn)40%,black 60%);}

/* ---------------------------------------------------------
   1) Contenedor principal
   --------------------------------------------------------- */
#planes-recomendados{display:grid;gap:var(--s-20);width:100%;min-width:0;align-content:start;--insignias-tweak-y:-4px;margin-bottom:var(--s-24);}

/* ---------------------------------------------------------
   2) Tarjeta base (estructura frontal)
   --------------------------------------------------------- */
.item-plan{width:100%}
.tarjeta-plan,.tarjeta-plan--back{width:100%;box-sizing:border-box;cursor:pointer;transition:background-color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease),transform var(--motion-fast) var(--motion-ease);backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.tarjeta-plan{position:relative;background:var(--surface);border:1px solid var(--separator);border-radius:var(--rad-md);box-shadow:0 2px 8px rgba(0,0,0,.01);padding:var(--s-20);}
@supports(background:color-mix(in oklch,white 50%,black 50%)){.tarjeta-plan{background:color-mix(in oklch,var(--surface)98%,white 2%);border:1px solid color-mix(in oklch,var(--separator)70%,var(--tint)5%);}}

/* ---------------------------------------------------------
   3) Estados / interacción
   --------------------------------------------------------- */
@media(hover:hover){
  .tarjeta-plan:not(.seleccionada):hover,.flip-card.is-flipped .tarjeta-plan--back:not(.seleccionada):hover{background:color-mix(in oklch,var(--surface)96%,var(--tint)4%);border-color:color-mix(in oklch,var(--separator)70%,var(--tint)10%);box-shadow:0 6px 18px rgba(0,0,0,.06);}
  /*.tarjeta-plan.is-top1:not(.seleccionada):hover,.flip-card.is-flipped .tarjeta-plan--back.is-top1:not(.seleccionada):hover{background:linear-gradient(color-mix(in oklch,var(--surface)96%,var(--tint)4%),color-mix(in oklch,var(--surface)96%,var(--tint)4%)) padding-box,linear-gradient(135deg,color-mix(in oklch,var(--tint)70%,white 30%),color-mix(in oklch,var(--success)60%,white 40%),color-mix(in oklch,var(--warn)60%,white 40%),color-mix(in oklch,var(--error)55%,white 45%)) border-box;border:1px solid transparent;box-shadow:0 6px 18px rgba(0,0,0,.06);background-size:200% 200%;animation:borderGradient 1s var(--motion-ease) 3;}*/
  .prestadores .clinicas .chip:hover{border-color:color-mix(in oklch,var(--tint)40%,var(--separator)60%);background:color-mix(in oklch,var(--surface)92%,var(--tint)8%);color:color-mix(in oklch,var(--secondary)70%,var(--tint)30%);}
}
.tarjeta-plan.seleccionada,.item-plan.seleccionada .tarjeta-plan,.tarjeta-plan--back.seleccionada,.item-plan.seleccionada .tarjeta-plan--back{background:var(--surface);border-color:var(--tint);box-shadow:var(--shadow-m);}
@supports(background:color-mix(in oklch,white 50%,black 50%)){
  .tarjeta-plan.seleccionada,.item-plan.seleccionada .tarjeta-plan,.tarjeta-plan--back.seleccionada,.item-plan.seleccionada .tarjeta-plan--back{background:color-mix(in oklch,var(--bg)94%,var(--tint)6%);}
}
.item-plan.seleccionada .kpi,.tarjeta-plan.seleccionada .kpi{border-color:color-mix(in oklch,var(--tint)40%,var(--separator)60%);background:color-mix(in oklch,var(--surface)92%,var(--tint)8%);}
.item-plan.seleccionada .kpi .kpi-titulo,.tarjeta-plan.seleccionada .kpi .kpi-titulo{color:color-mix(in oklch,var(--secondary)70%,var(--tint)30%);}
.item-plan.seleccionada .prestadores .clinicas .chip,.tarjeta-plan.seleccionada .prestadores .clinicas .chip{border-color:color-mix(in oklch,var(--tint)40%,var(--separator)60%);background:color-mix(in oklch,var(--surface)92%,var(--tint)8%);color:color-mix(in oklch,var(--secondary)70%,var(--tint)30%);}
.tarjeta-plan:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in oklch,var(--tint)35%,transparent),0 2px 8px rgba(0,0,0,.03);}
/*@keyframes borderGradient{0%{background-position:0% 50%}100%{background-position:100% 50%}}*/

/*.tarjeta-plan.is-top1 {
  border-color: color-mix(in oklch, var(--warn) 35%, var(--separator) 65%);
  box-shadow: inset 0 0 0 2px
    color-mix(in oklch, var(--warn) 35%, var(--separator) 65%);
}*/

/* ---------------------------------------------------------
   4) Grids utilitarias y encabezado
   --------------------------------------------------------- */
.grid-2,.grid-3{display:grid;align-items:center;gap:var(--s-12);}
.grid-2{grid-template-columns:1fr auto;}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:var(--bp-sm)){.grid-2,.grid-3{grid-template-columns:1fr;}}
.encabezado-plan{display:grid;grid-template-columns:1fr auto;align-items:center;}
.logo-encabezado{display:flex;align-items:center;}
.logo-encabezado img{height:24px;display:block;}

/* ---------------------------------------------------------
   5) Insignias (base única + modificadores)
   --------------------------------------------------------- */
.insignias,.insignias-encabezado{display:inline-flex;align-items:center;gap:var(--s-6);flex-wrap:wrap;}
.insignias.ins-start{justify-content:flex-start;}
.insignias.ins-center{justify-content:center;}
.insignias.ins-end{justify-content:flex-end;}
.insignia{display:inline-flex;align-items:center;line-height:1;padding:var(--s-4) var(--s-8);border:1px solid transparent;border-radius:var(--rad-pill);font-size:var(--fs-12);font-weight:var(--fw-semibold);}
.insignia-ok{background:var(--success);color:#fff;}
.insignia-error{background:var(--error);color:#fff;}
.insignia.chip-top1{border-color:var(--chip-top1-bd);background:linear-gradient(180deg,var(--chip-top1-bg1) 0%,var(--chip-top1-bg2) 100%);color:var(--chip-top1-fg);}

/* ---------------------------------------------------------
   6) Línea, nombre y código
   --------------------------------------------------------- */
.linea-plan{margin-top:var(--s-16);font-size:var(--fs-12);color:var(--secondary);}
.linea-plan--full{grid-column:1/-1;}
.fila-nombre-codigo{display:flex;align-items:baseline;gap:var(--s-8);margin-top:var(--s-4);min-width:0;flex-wrap:nowrap;}
.nombre-plan{font-size:var(--fs-18);line-height:1.25;font-weight:var(--fw-semibold);margin:0;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.codigo-plan{color:var(--secondary);flex:0 0 auto;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:var(--fs-13);line-height:1.25;letter-spacing:.015em;margin-left:auto;text-align:right;}
@media(max-width:var(--bp-sm)){.fila-nombre-codigo{flex-wrap:wrap;}.codigo-plan{flex-basis:100%;}}

/* ---------------------------------------------------------
   7) Separador, prestadores y popover de clínicas
   --------------------------------------------------------- */
.separador-plan{border:0;border-top:1px solid var(--separator);margin:var(--s-12) 0;}
.clinicas-preferentes{display:block;margin:var(--s-12) 0;font-size:var(--fs-12);color:var(--secondary);}
.prestadores .clinicas{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--s-6);margin-top:var(--s-10);overflow:hidden;max-inline-size:100%;}
.prestadores .clinicas .chip{flex:0 0 auto;}
.clinicas-preferentes .chip--mas{margin-inline-start:auto;}
.clinicas-pop{
  position:fixed;
  z-index:var(--z-popover,10000);
  display:none;
  inset:auto auto auto auto;
  padding:12px 14px 10px;
  min-width:270px;
  max-width:min(360px,calc(100vw - 24px));
  max-height:min(60vh,480px);
  overflow:auto;
  border-radius:var(--rad-card);
  font-family:var(--font);
  font-size:14px;
  line-height:1.3;
  user-select:none;

  /* PERF: sin backdrop blur */
  background-color:var(--surface);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);

  color:var(--label);
  opacity:0;
  transform:translateY(4px) scale(.985);
  pointer-events:none;
  transition:opacity var(--motion-std) var(--motion-ease-ios),transform var(--motion-std) var(--motion-ease-ios);
}
.clinicas-pop.open{display:block;opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.clinicas-pop.closing{opacity:0;transform:translateY(4px) scale(.985);pointer-events:none;}
.clinicas-pop__title{display:flex;align-items:center;justify-content:space-between;min-height:28px;padding-inline:2px;margin:0 0 var(--s-8) 0;font-size:var(--fs-13);color:var(--secondary);}
.clinicas-pop__close{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;padding:0;border-radius:999px;color:var(--secondary);font-size:14px;line-height:1;}
.clinicas-pop__close:hover{background:var(--hover-neutral);color:var(--label);}
.clinicas-pop__close:focus-visible{outline:2px solid color-mix(in oklch,var(--tint)45%,transparent);outline-offset:2px;}
.clinicas-pop .clinicas-pop__grid{display:block;max-height:calc(60vh - 52px);overflow:auto;padding:0;margin:0;}
.clinicas-pop .clinicas-pop__grid section{padding:6px 0;}
.clinicas-pop .clinicas-pop__section-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 10px;margin:0 0 4px 0;border-bottom:none;}
.clinicas-pop .clinicas-pop__grid h4{margin:0;padding:0;font-size:var(--fs-12);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-overline);text-align:left;}
.clinicas-pop .clinicas-pop__grid h4::after{content:none;}
.clinicas-pop .clinicas-pop__grid ul{list-style:none;margin:0;padding:0;}
.clinicas-pop .clinicas-pop__grid li{margin:0;padding:6px 10px;min-height:28px;display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;font-size:var(--fs-12);line-height:1.25;font-weight:400;color:var(--label);text-align:left;border-bottom:1px solid var(--separator-soft);border-radius:6px;cursor:default;}
.clinicas-pop .clinicas-pop__grid li:last-child{border-bottom:none;}
.clinicas-pop__region{margin:0 0 4px 0;font-weight:600;font-size:12px;color:var(--secondary);}
.clinicas-pop__bullets{margin:0;padding-inline-start:18px;}
.clinicas-pop__bullets>li{margin:2px 0;line-height:1.25;}
@media(pointer:fine){.clinicas-pop .clinicas-pop__grid li:hover{background:#ffffff;}}
body.oscuro .clinicas-pop{background:var(--fill);}
@media(max-width:600px){.clinicas-pop{max-width:calc(100vw - 20px);border-radius:var(--rad-md);}}
@media(prefers-reduced-motion:reduce){.clinicas-pop{transition:none;transform:none;}}

/* ---------------------------------------------------------
   8) KPIs — núcleo común + overrides
   --------------------------------------------------------- */
:where(.kpi){display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:var(--s-8);padding:var(--s-10);border:1px solid var(--separator);border-radius:var(--rad-sm);background:color-mix(in oklch,var(--surface)96%,var(--bg)4%);}
:where(.kpi .kpi-icono){flex:0 0 auto;width:20px;height:20px;display:inline-block;opacity:.9;}
:where(.kpi .kpi-info){min-width:0;display:flex;flex-direction:column;gap:2px;}
:where(.kpi .kpi-titulo){font-size:var(--fs-12);color:var(--secondary);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
:where(.kpi .kpi-valor){font-size:var(--fs-16);font-weight:var(--fw-medium);line-height:1.25;word-break:break-word;}
:where(.kpi .kpi-detalle){display:inline-block;font-size:var(--fs-12);color:var(--secondary);margin-left:.25rem;}
.bloque-kpis--metricas.grid-3,.bloque-kpis--7d.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
#planes-recomendados[data-vista="tarjeta"] .kpi{justify-content:center;text-align:center;}
#planes-recomendados[data-vista="tarjeta"] .kpi .kpi-info{align-items:center;}

/* ---------------------------------------------------------
   9) Precio (agrupado)
   --------------------------------------------------------- */
.precio-wrap{text-align:center;margin:var(--s-18) 0;}
.precio-line{display:inline-flex;align-items:baseline;white-space:nowrap;}
.precio-principal{font-size:var(--fs-26);font-weight:var(--fw-bold);}
.precio-secundario{font-size:var(--fs-14);color:var(--secondary);white-space:nowrap;position:relative;transform:translateY(-4px);}
.precio-secundario::before{content:"/";display:inline-block;margin:0 var(--s-4);color:var(--separator);opacity:.9;transform:translateY(1px);font-weight:var(--fw-semibold);}
.precio-secundario .alt-unit{opacity:.8;}
.precio-mini-msg{font-size:var(--fs-12);line-height:1.25;letter-spacing:.002em;color:var(--secondary);display:inline-flex;align-items:center;gap:.35rem;}
.precio-mini-msg .icon-7{display:inline-block;width:16px;height:16px;flex:0 0 16px;line-height:0;vertical-align:-2px;}
.precio-mini-msg .icon-7>svg{width:16px;height:16px;display:block;stroke-width:2;}
.precio-mini-msg.is-7-ok{color:var(--success);}
.precio-mini-msg.is-7-bad{color:var(--error);}
.precio-mini-msg.is-neutral{color:var(--secondary);}
.precio-wrap.precio-wrap--full>.precio>.precio-wrap{margin:0;}
.precio-wrap.precio-wrap--full .precio-mini-msg{margin-top:6px;}
.precio-mini-msg[data-role="precio-hint"]{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:999px;font-size:.78rem;line-height:1.2;font-weight:500;background-color:color-mix(in oklch,var(--secondary) 8%,transparent);color:color-mix(in oklch,var(--secondary) 82%,white);}
.precio-mini-msg[data-role="precio-hint"] .icon-7{width:14px;height:14px;flex-shrink:0;}
.precio-mini-msg[data-role="precio-hint"] .mini-text{white-space:nowrap;}
.precio-mini-msg[data-role="precio-hint"].is-neutral{background-color:color-mix(in oklch,var(--secondary) 6%,transparent);color:color-mix(in oklch,var(--secondary) 82%,white);}
.precio-mini-msg[data-role="precio-hint"].is-7-ok{background-color:color-mix(in oklch,var(--success) 12%,transparent);color:color-mix(in oklch,var(--success) 100%,white 0%);}
.precio-mini-msg[data-role="precio-hint"].is-7-bad{background-color:color-mix(in oklch,var(--error) 8%,transparent);color:color-mix(in oklch,var(--error) 76%,white);}

/* ---------------------------------------------------------
   10) CTA y acciones secundarias
   --------------------------------------------------------- */
.cta-wrap{margin-top:var(--s-10);grid-column:1/-1;}
.btn-cta-solicitar{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:var(--s-10) var(--s-16);border:0;border-radius:var(--rad-md);font-weight:var(--fw-semibold);color:#fff;cursor:pointer;box-shadow:none;background:var(--tint);background-image:linear-gradient(180deg,color-mix(in oklch,var(--tint)82%,white 18%) 0%,var(--tint) 100%);transition:background var(--motion-fast) var(--motion-ease);}
@media(hover:hover){.btn-cta-solicitar:hover{background-image:linear-gradient(180deg,color-mix(in oklch,var(--tint)75%,white 25%) 0%,color-mix(in oklch,var(--tint)90%,white 10%) 100%);}}
.btn-cta-solicitar:focus-visible{outline:2px solid color-mix(in oklch,var(--tint)45%,transparent);outline-offset:2px;}
.acciones-secundarias{display:flex;align-items:center;justify-content:center;gap:0;margin-top:var(--s-12);grid-column:1/-1;}
.acciones-secundarias--fila .accion-link{color:var(--secondary);text-decoration:none;font-size:var(--fs-13);text-align:center;}
.acciones-secundarias--fila .accion-link:hover{color:var(--label);text-decoration:underline;}
.acciones-divisor{display:inline-block;width:1px;height:1em;background:var(--separator);margin:0 var(--s-8);vertical-align:middle;opacity:.9;}
.item-plan.lista .kpi-acciones .acciones-secundarias{margin-top:var(--s-6);}

/* ---------------------------------------------------------
   11) Flip card (estructura + a11y optimizada)
   --------------------------------------------------------- */
.flip-card{position:relative;perspective:1000px;overflow:visible;transition:height var(--motion-base) var(--motion-ease);}
.flip-card__inner{position:relative;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.33,1,.68,1);}
.flip-card.is-flipped .flip-card__inner{transform:rotateY(180deg);}
.tarjeta-plan--back{position:absolute;inset:0;transform:rotateY(-180deg);z-index:0;}
@media(prefers-reduced-motion:reduce){
  .flip-card__inner{transition:none;transform:none!important;}
  .tarjeta-plan--back{transform:none;display:none;position:static;}
  .flip-card.is-flipped .tarjeta-plan{display:none;}
  .flip-card.is-flipped .tarjeta-plan--back{display:block;}
}
#planes-recomendados[data-vista="lista"] .flip-card .flip-card__inner{transform:rotateX(0deg);}
#planes-recomendados[data-vista="lista"] .flip-card.is-flipped .flip-card__inner{transform:rotateX(180deg);}
#planes-recomendados[data-vista="lista"] .flip-card .tarjeta-plan--back{transform:rotateX(-180deg);}

/* Guardrail flip: solo la cara visible recibe interacción */
.flip-card.is-flipped article.tarjeta-plan:not(.tarjeta-plan--back){pointer-events:none;}
.flip-card:not(.is-flipped) article.tarjeta-plan--back{pointer-events:none;}

/* ---------------------------------------------------------
   12) Cara trasera — visual refinada y liviana
   --------------------------------------------------------- */
.tarjeta-plan--back{padding:var(--s-16,16px) var(--s-20,20px) var(--s-18,18px);display:flex;flex-direction:column;gap:var(--s-12,12px);border-radius:var(--radius-2xl,22px);background:#f7f8fd;box-shadow:0 4px 12px rgba(15,23,42,0.04);border:1px solid rgba(148,163,184,0.20);}
.encabezado-plan--back{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-12,12px);margin-bottom:0;}
.encabezado-plan--back [data-actividad-refresh]{align-self:flex-end;margin-top:auto;line-height:1.1;}
.encabezado-plan--back .marca-datos{display:flex;flex-direction:column;gap:2px;min-width:0;align-items:flex-start;}
.encabezado-plan--back .nombre-plan{font-size:var(--fs-16,16px);font-weight:600;margin:0;color:var(--fg-strong,#0f172a);text-align:left;}
.encabezado-plan--back .codigo-plan{display:block;margin:0;padding:0;align-self:flex-start;text-align:left;font-size:var(--fs-11,11px);color:var(--muted,#9ca3af);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;line-height:1.25;letter-spacing:.015em;}
.acciones-back .boton-volver{white-space:nowrap;}
.bloque-kpis--actividad .kpi .kpi-titulo{font-weight:var(--fw-medium);}
.bloque-kpis--7d{margin-top:var(--s-8);}

/* ---------------------------------------------------------
   13) Cara trasera — chips internos (sin blur pesado)
   --------------------------------------------------------- */
.tarjeta-plan--back .chip-back,.tarjeta-plan--back [data-chip-back],.tarjeta-plan--back .metric--qual .metric-badge,.tarjeta-plan--back .badge-7d{padding:4px 10px;border-radius:999px;background:#ffffff;border:1px solid rgba(148,163,184,0.28);box-shadow:none;font-size:var(--fs-10,10px);font-weight:500;white-space:nowrap;color:var(--fg-strong,#0f172a);}
.tarjeta-plan--back .ranking-top,.tarjeta-plan--back .ranking-top-linea{padding:4px 10px;border-radius:999px;background:#ffffff;border:1px solid rgba(148,163,184,0.28);box-shadow:none;font-size:var(--fs-10,10px);font-weight:500;white-space:nowrap;color:var(--brand,#2563eb)!important;}

/* ---------------------------------------------------------
   14) Métricas reverso (sin blur pesado)
   --------------------------------------------------------- */
.actividad-plan{display:flex;flex-direction:column;gap:var(--s-14,14px);}
.actividad-plan-metrics{padding:12px 14px 10px;border-radius:18px;background:#ffffff;box-shadow:none;border:1px solid rgba(148,163,184,0.22);}
.actividad-plan-metrics .actividad-titulo{margin:0 0 8px 0;font-size:var(--fs-10,10px);letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted-strong,#6b7280);}

/* ---------------------------------------------------------
   15) Grid métricas reverso
   --------------------------------------------------------- */
.actividad-row{display:grid;column-gap:10px;row-gap:2px;align-items:flex-start;padding:4px 0;}
.actividad-row+.actividad-row{border-top:1px dashed rgba(148,163,184,0.45);margin-top:6px;padding-top:8px;}
.actividad-row--top{grid-template-columns:repeat(4,minmax(0,1fr));}
.actividad-row--mid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:10px;}
.actividad-row--mid .metric:nth-child(1){grid-column:1;}
.actividad-row--mid .metric:nth-child(2){grid-column:2;}
.actividad-row--mid .metric:nth-child(3){grid-column:3/span 2;padding-left:0;}
.actividad-row--qual{grid-template-columns:repeat(4,minmax(0,1fr));}
.actividad-row--qual .metric:nth-child(1){grid-column:1/span 2;}
.actividad-row--qual .metric:nth-child(2){grid-column:3/span 2;}
.metric{display:flex;flex-direction:column;gap:2px;min-width:0;}
.metric-label{font-size:var(--fs-10,10px);color:var(--secondary,#6b7280);}
.metric--big .metric-value{font-size:var(--fs-12,12px);font-weight:600;color:var(--fg-strong,#0f172a);}
.metric--small .metric-value{font-size:var(--fs-11,11px);font-weight:500;color:var(--fg-default,#111827);}
.metric[data-metric="lastEventAt"] .metric-value{font-size:var(--fs-11,11px);color:var(--muted-strong,#64748b);}

/* ---------------------------------------------------------
   16) Trend (up/down/flat)
   --------------------------------------------------------- */
.metric-value--trend[data-trend="up"]{color:#16a34a;font-weight:600;}
.metric-value--trend[data-trend="down"]{color:#b91c1c;font-weight:600;}
.metric-value--trend[data-trend="flat"]{color:var(--muted-strong,#64748b);font-weight:500;}
[data-metric="trend7d"]{position:relative;padding-left:1.1em;}
[data-metric="trend7d"]::before{content:"⟷";position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:.8em;color:var(--fg-muted,#6b7280);}
[data-metric="trend7d"][data-trend="up"]::before{content:"↑";color:#16a34a;}
[data-metric="trend7d"][data-trend="down"]::before{content:"↓";color:#dc2626;}
[data-metric="trend7d"][data-trend="flat"]::before{content:"→";color:var(--fg-muted,#6b7280);}

/* ---------------------------------------------------------
   17) Ranking cards reverso (sin blur pesado)
   --------------------------------------------------------- */
.actividad-plan-rankings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-10,10px);margin-top:var(--s-4,4px);}
.ranking-card{padding:6px 10px 8px;border-radius:14px;background:#ffffff;box-shadow:none;border:1px solid rgba(148,163,184,0.22);}
.ranking-header{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6,6px);margin-bottom:1px;}
.ranking-title{font-size:var(--fs-11,11px);color:var(--secondary,#6b7280);}
.ranking-main{display:inline-flex;align-items:baseline;gap:3px;}
.ranking-number{font-size:var(--fs-18,18px);font-weight:600;color:var(--fg-strong,#0f172a);}
.ranking-of{font-size:var(--fs-11,11px);color:var(--muted,#9ca3af);}
.ranking-total{font-size:var(--fs-11,11px);font-weight:500;color:var(--muted-strong,#64748b);}
.ranking-extra{margin:0 0 6px;}

/* ---------------------------------------------------------
   18) Progreso métricas reverso
   --------------------------------------------------------- */
.metric-bar{position:relative;width:100%;height:4px;border-radius:999px;background:rgba(148,163,184,0.22);overflow:hidden;margin-top:0;}
.metric-bar-fill{position:absolute;inset:0;width:0%;border-radius:inherit;background:linear-gradient(90deg,#6366f1 0%,var(--brand,#2563eb) 100%);transition:width .28s ease-out;}

/* ---------------------------------------------------------
   19) Footer reverso
   --------------------------------------------------------- */
.actividad-plan-footer{margin-top:var(--s-4,4px);padding-top:var(--s-12,12px);border-top:1px solid rgba(148,163,184,0.28);font-size:var(--fs-13,13px);color:var(--secondary,#6b7280);}
.actividad-footer-title{margin:0 0 1px 0;font-size:var(--fs-11,11px);text-transform:uppercase;letter-spacing:.06em;color:var(--muted-strong,#64748b);}
.actividad-footer-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-8,8px);margin-top:0;}
.actividad-footer-text{margin:0;line-height:1.35;font-size:var(--fs-13,13px);}
.resumen-7d-badges{display:flex;flex-wrap:wrap;gap:6px;}

/* ---------------------------------------------------------
   20) Botones reverso
   --------------------------------------------------------- */
.btn-back-inline{border:none;background:transparent;padding:2px 0;font-size:var(--fs-13,12px);font-weight:500;color:var(--muted-strong,#64748b);display:inline-flex;align-items:center;gap:4px;cursor:pointer;border-radius:999px;box-shadow:none;transition:color var(--motion-fast,.18s) var(--motion-ease,ease-in-out),transform .08s ease-out,text-decoration-color var(--motion-fast,.18s) var(--motion-ease,ease-in-out);}
.btn-back-inline:hover{color:var(--brand,#2563eb);text-decoration:underline;text-decoration-thickness:.06em;}
.actividad-refresh-btn{flex:0 0 auto;padding:2px 0;border-radius:999px;border:none;background:transparent;font-size:var(--fs-12,12px);font-weight:500;color:var(--brand,#2563eb);cursor:pointer;display:inline-flex;align-items:center;gap:6px;box-shadow:none;transition:color var(--motion-fast,.18s) var(--motion-ease,ease-in-out),transform .08s ease-out,text-decoration-color var(--motion-fast,.18s) var(--motion-ease,ease-in-out);min-height:0;}
.actividad-refresh-btn:hover{color:color-mix(in oklch,var(--brand,#2563eb) 80%,#1d4ed8 20%);text-decoration:underline;text-decoration-thickness:.06em;}
.actividad-refresh-btn:disabled{opacity:.55;cursor:default;text-decoration:none;transform:none;}
.actividad-refresh-btn.is-loading::after{content:'…';margin-left:2px;}
.icon-actividad-refresh{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* ---------------------------------------------------------
   21) Vistas (tarjeta / lista)
   --------------------------------------------------------- */
#planes-recomendados[data-vista="tarjeta"]{grid-template-columns:repeat(auto-fill,minmax(var(--card-min-w),1fr));}
@media(min-width:var(--bp-md)){#planes-recomendados[data-vista="tarjeta"]{grid-template-columns:repeat(auto-fill,minmax(var(--card-min-w-md),1fr));}}
#planes-recomendados[data-vista="lista"]{grid-template-columns:1fr;}
.item-plan.lista .insignias,.item-plan.lista .insignias-encabezado{position:relative;transform:translateY(var(--insignias-tweak-y));}

/* ---------------------------------------------------------
   22) Efectos Top1 (sin animación infinita)
   --------------------------------------------------------- */
.tarjeta-plan.is-top1 .insignia.chip-top1{position:relative;overflow:hidden;isolation:isolate;}
.tarjeta-plan.is-top1 .insignia.chip-top1::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.45) 48%,transparent 100%);transform:translateX(-130%);opacity:0;pointer-events:none;animation:shineSweepLoop 2.4s ease-in-out 1;}
@keyframes shineSweepLoop{0%{transform:translateX(-130%);opacity:0}10%{opacity:.9}50%{transform:translateX(130%);opacity:0}100%{transform:translateX(130%);opacity:0}}

/* ---------------------------------------------------------
   23) Utilidades de color (helpers opt-in)
   --------------------------------------------------------- */
.verde-oscuro{background-color:color-mix(in oklch,var(--success)85%,black 15%);color:#fff;}
.verde{background-color:var(--success);color:#fff;}
.celeste{background-color:var(--tint);color:#fff;}
.amarillo{background-color:var(--warn);color:color-mix(in oklch,var(--label)40%,black 60%);}
.naranja{background-color:color-mix(in oklch,var(--warn)60%,var(--error)40%);color:#fff;}
.rojo{background-color:var(--error);color:#fff;}

/* ---------------------------------------------------------
   24) Vista lista — encabezado compacto y KPIs
   --------------------------------------------------------- */
.item-plan.lista .encabezado-plan--lista{--logo-w:112px;display:grid;grid-template-columns:var(--logo-w) minmax(0,1fr) auto;column-gap:12px;align-items:center;}
.item-plan.lista .enc-logo{display:flex;align-items:center;gap:12px;}
.item-plan.lista .logo-encabezado,.item-plan.lista .logo-encabezado .plan-logo-wrap{width:var(--logo-w);max-width:100%;}
.item-plan.lista .logo-encabezado img{display:block;max-width:100%;height:auto;}
.item-plan.lista .divisor-vertical{width:1px;background:var(--separator);align-self:stretch;border-radius:1px;opacity:.95;}
.item-plan.lista .enc-datos{display:grid;grid-auto-rows:min-content;row-gap:2px;justify-items:start;justify-self:start;text-align:left;min-width:0;}
.item-plan.lista .enc-datos .linea-plan{font-size:12px;color:var(--secondary);}
.item-plan.lista .enc-datos .nombre-plan{margin:2px 0;}
.item-plan.lista .enc-datos .codigo-plan{font-size:12px;color:var(--secondary);display:block;text-align:left;justify-self:start;align-self:start;margin:0;float:none;}
.item-plan.lista .enc-datos .codigo-plan span{display:inline;margin:0;padding:0;}
.item-plan.lista .enc-der{align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:2px;min-height:100%;}
.item-plan.lista .insignias-encabezado{display:flex;gap:4px;flex-wrap:wrap;margin:0;}
.item-plan.lista .insignias-encabezado .insignia{margin:0;line-height:1.1;}
.item-plan.lista .precio-encabezado{text-align:right;line-height:1.05;margin:0;}
.item-plan.lista .precio-encabezado .precio-inline{white-space:nowrap;}
.item-plan.lista .precio-encabezado .precio-principal{font-weight:var(--fw-bold);}
.item-plan.lista .bloque-kpis--metricas{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:var(--s-12);}
.item-plan.lista .kpi{justify-content:center;gap:var(--s-10);min-height:64px;}
.item-plan.lista .kpi .kpi-icono{width:20px;height:20px;flex:0 0 20px;}
.item-plan.lista .kpi .kpi-info{display:flex;flex-direction:column;gap:2px;min-width:0;align-items:flex-start;}
.item-plan.lista .kpi .kpi-titulo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;}
.item-plan.lista .kpi .kpi-valor{line-height:1.1;}
.item-plan.lista .kpi-acciones{border:none;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;}
.item-plan.lista .kpi-acciones .cta-en-kpi{display:flex;flex-direction:column;align-items:center;gap:var(--s-6);}
@media(max-width:640px){
  .item-plan.lista .encabezado-plan--lista{grid-template-columns:var(--logo-w) 1fr;row-gap:8px;}
  .item-plan.lista .enc-der{grid-column:1/-1;align-items:flex-start;}
}

/* ---------------------------------------------------------
   25) Motion / a11y global
   --------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .tarjeta-plan:hover,.tarjeta-plan--back:hover{animation:none;background-size:auto;}
  .tarjeta-plan.is-top1{animation:none!important;}
}

/* ---------------------------------------------------------
   26) Mobile ajustes reverso
   --------------------------------------------------------- */
@media(max-width:768px){
  .tarjeta-plan--back{padding:var(--s-14,14px) var(--s-14,14px) var(--s-16,16px);border-radius:20px;}
  .encabezado-plan--back{flex-direction:column;align-items:flex-start;gap:var(--s-6,6px);}
  .actividad-row--top{grid-template-columns:repeat(2,minmax(0,1fr));}
  .actividad-row--mid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .actividad-row--qual{grid-template-columns:1fr;}
  .actividad-plan-rankings{grid-template-columns:1fr;}
}

/* =========================================================
   PERF: virtualiza pintura/layout de tarjetas fuera de viewport
   ========================================================= */
@supports (content-visibility:auto){
  #planes-recomendados .item-plan{
    content-visibility:auto;
    contain-intrinsic-size: 360px;
  }
  #planes-recomendados .tarjeta-plan{
    contain: content;
  }
}