/* ══════════════════════════════════════════════════
   TAP IN CONNECT — PRODUCT PAGES
   Páginas: comedor-escolar / centro-de-padres /
            gestion-de-proveedores / ligas-y-talleres
   Base estructural compartida + variantes por producto
   ══════════════════════════════════════════════════ */

/* ─── PRODUCT PAGE SHELL ──────────────────────── */
.pp-shell {
  background: linear-gradient(180deg, #FBFAFE 0%, #F2F1F8 100%);
  color: var(--c-text);
  min-height: 100vh;
  padding-top: 96px;
  position: relative;
}

/* Override navbar para páginas de producto:
   1) Ocultar nav-shield. El shield del Home (backdrop-filter + mask-image)
      creaba un edge horizontal visible sobre el bg claro. No se necesita
      acá porque el bg de pp-shell es casi blanco — no hay contraste con
      contenido que pase por debajo del navbar.
   2) Suavizar mucho más la sombra del navbar — un drop morado mínimo
      muy cerca del pill, sin offset Y grande que produzca banda. */
body:has(.pp-shell) .nav-shield {
  display: none;
}
body:has(.pp-shell) .nav-inner {
  /* !important porque la regla base en styles.css también usa !important.
     Eliminamos los inset shadows (sobre todo el inset bottom oscuro que
     creaba una micro-línea) y dejamos solo un drop suave morado. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 4px 14px rgba(45,37,96,.08) !important;
}
body:has(.pp-shell) .nav-inner:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 6px 20px rgba(45,37,96,.12) !important;
}

/* Atmospheric transition light → dark
   Replica section-objeciones::after del Home: bloom morado en la parte
   superior, dark canvas dissolviendo al fondo. 220px de altura. */
.pp-shell::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 220px;
  background:
    linear-gradient(180deg,
      var(--c-white) 0%,
      rgba(255,255,255,.92) 2%,
      rgba(255,255,255,.55) 8%,
      transparent 18%,
      transparent 100%),
    radial-gradient(ellipse 55% 60% at 32% 30%,
      rgba(155,142,240,.30) 0%,
      rgba(107,92,231,.14) 42%,
      transparent 75%),
    radial-gradient(ellipse 45% 50% at 78% 26%,
      rgba(192,132,252,.16) 0%,
      transparent 75%),
    radial-gradient(ellipse 140% 100% at 50% 110%,
      #0E0C1E 0%,
      #0E0C1E 38%,
      #14112C 50%,
      #1B1740 60%,
      rgba(45,37,96,.55) 70%,
      rgba(74,60,174,.32) 78%,
      rgba(107,92,231,.20) 84%,
      rgba(155,142,240,.12) 89%,
      rgba(155,142,240,.06) 93%,
      rgba(155,142,240,.02) 97%,
      transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Capa de atmósfera superior: blooms que cubren DESDE el borde superior
   (detrás de la navbar fixed) hacia abajo, para que el fondo del hero sea
   continuo, sin línea de corte bajo la barra. El color lo define cada
   página en su override .pp-shell--X::before. */
.pp-shell::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(560px, 82svh, 860px);
  pointer-events: none;
  z-index: 0;
}
.pp-shell > * { position: relative; z-index: 1; }

/* La última pp-section necesita padding-bottom extra para que el
   contenido no quede tapado por el dissolve de 220px */
.pp-shell > .pp-section:last-of-type {
  padding-bottom: 320px;
}

.pp-shell .container { max-width: 1180px; }

/* ─── ANCHOR · back to /connect ───────────────── */
.pp-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-main);
  margin-bottom: 18px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(155,142,240,.28);
  box-shadow: 0 2px 8px rgba(74,60,174,.06);
  transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  position: relative;
}
.pp-back svg {
  width: 14px; height: 14px;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
/* .pp-back también lleva .pp-reveal (animación de entrada). La regla
   .pp-reveal.is-in {transform:translateY(0)} tiene igual especificidad pero
   va más abajo en el archivo → pisaba el lift del hover. Y la transición de
   .pp-reveal (solo opacity/transform .8s) hacía saltar la sombra. Subimos
   especificidad con .pp-back.pp-reveal y redefinimos la transición. */
.pp-back.pp-reveal {
  transition:
    opacity .25s ease,
    color .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s cubic-bezier(.4,0,.2,1);
}
.pp-back:hover,
.pp-back.pp-reveal:hover {
  color: var(--c-deep);
  background: #fff;
  border-color: rgba(155,142,240,.55);
  transform: translateY(-3px);
  box-shadow:
    0 10px 22px rgba(74,60,174,.16),
    0 2px 6px rgba(74,60,174,.08);
}
.pp-back:active,
.pp-back.pp-reveal:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74,60,174,.10);
}
.pp-back:hover svg { transform: translateX(-3px); }

/* ─── BADGE / KICKER ──────────────────────────── */
.pp-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  background: rgba(155,142,240,.12);
  border: 1px solid rgba(155,142,240,.32);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-main);
  margin-bottom: 20px;
}
.pp-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-mid);
  box-shadow: 0 0 0 0 rgba(107,92,231,.55);
  animation: pp-pulse 2.2s ease-in-out infinite;
}
.pp-badge--live { background: rgba(58,178,99,.10); border-color: rgba(58,178,99,.32); color: #207a3c; }
.pp-badge--live .pp-badge-dot { background: #3ab263; box-shadow: 0 0 0 0 rgba(58,178,99,.55); }

@keyframes pp-pulse {
  0% { box-shadow: 0 0 0 0 rgba(107,92,231,.55); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(107,92,231,0); }
}

/* ─── HERO ────────────────────────────────────── */
.pp-hero {
  position: relative;
  padding: 22px 0 36px;
  /* clip SOLO en X (evita scroll horizontal por los mockups inclinados);
     Y visible para que la sombra del mockup no se corte arriba/abajo. */
  overflow-x: clip;
  overflow-y: visible;
}

/* Hero de Comedor (scope vía :has, sólo esta página).
   La frase enfatizada "puede respirar" no se parte entre líneas. */
.pp-hero:has(.pp-cas-hero-v2) .pp-hero-headline .hl {
  white-space: nowrap;
}

/* ── Centrado del conjunto · SÓLO desktop 2-columnas (≥1025px) ──────────
   El grupo badge→botones y el mock se co-centran verticalmente en el
   espacio [borde inferior del navbar, fondo de la pantalla]. El back-link
   se fija arriba, fuera del centrado. En ≤1024 todo queda en flujo natural
   (no rompemos el stack mobile). */
@media (min-width: 1025px) {
  .pp-hero:has(.pp-cas-hero-v2) {
    /* main.pp-shell tiene padding-top:96px (navbar fixed termina en y72 + 24
       de aire). Tiramos la sección 24px arriba para que su tope quede en el
       borde inferior del navbar (72) y el alto llegue al fondo del viewport. */
    margin-top: -24px;
    min-height: calc(100svh - 72px);
    display: flex;
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* El container llena el alto y centra el grid en TODO el espacio. */
  .pp-hero:has(.pp-cas-hero-v2) > .container {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Back-link fijado arriba, fuera del centrado. */
  .pp-hero:has(.pp-cas-hero-v2) .pp-back {
    position: absolute;
    top: 28px;
    left: 24px;                    /* alinea con el padding del container */
    margin: 0;
  }
  /* El CTA es el último elemento; su margin-bottom (28px) inflaba la caja y
     descentraba el grupo visible. Lo quitamos para centrar de verdad. */
  .pp-hero:has(.pp-cas-hero-v2) .pp-hero-cta {
    margin-bottom: 0;
  }
  .pp-hero:has(.pp-cas-hero-v2) .pp-hero-grid {
    /* badge→botones y mock co-centrados verticalmente en el espacio. */
    align-items: center;
    /* Columnas balanceadas: headline limpio + mock del mismo ancho. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
  }
  /* Inclinación 3D del card (sin translateX: queda centrado en su columna). */
  .pp-hero:has(.pp-cas-hero-v2) .pp-hero-mock.is-mock-real .pp-cas-hero-v2 {
    transform: perspective(2200px) rotateY(-9deg) rotateX(3deg) rotate(-1.5deg) scale(0.9);
  }
}
/* Capa ambiente — estrellas/dots tenues (la grilla se eliminó; los blooms
   morados ahora viven en .pp-shell::before para que el fondo sea continuo). */
.pp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 1.5px at 8% 22%, rgba(155,142,240,.6) 0%, transparent 60%),
    radial-gradient(circle 1px at 18% 78%, rgba(155,142,240,.55) 0%, transparent 65%),
    radial-gradient(circle 1.5px at 32% 38%, rgba(155,142,240,.45) 0%, transparent 65%),
    radial-gradient(circle 1px at 44% 14%, rgba(155,142,240,.55) 0%, transparent 60%),
    radial-gradient(circle 1px at 58% 68%, rgba(155,142,240,.40) 0%, transparent 65%),
    radial-gradient(circle 1.5px at 72% 30%, rgba(155,142,240,.5) 0%, transparent 65%),
    radial-gradient(circle 1px at 84% 60%, rgba(155,142,240,.45) 0%, transparent 60%),
    radial-gradient(circle 1.5px at 94% 12%, rgba(155,142,240,.55) 0%, transparent 65%),
    radial-gradient(circle 1px at 28% 88%, rgba(155,142,240,.40) 0%, transparent 65%),
    radial-gradient(circle 1px at 66% 92%, rgba(155,142,240,.40) 0%, transparent 65%);
  /* Fade hacia los bordes para que los dots no corten en seco */
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 30%, transparent 95%);
          mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 30%, transparent 95%);
  pointer-events: none;
  z-index: 0;
}

/* Animación sutil para las estrellas — twinkle/breathe */
@keyframes pp-hero-stars-breathe {
  0%, 100% { opacity: .85; }
  50% { opacity: 1; }
}
.pp-hero::after { animation: pp-hero-stars-breathe 6s ease-in-out infinite; }

.pp-hero > .container { position: relative; z-index: 1; }

/* Hero usa container más ancho que el default (1180) para dar
   más aire al mockup sin comprimir el texto. */
.pp-hero > .container {
  max-width: 1320px;
}
.pp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.5fr);
  gap: 40px;
  align-items: center;
}

.pp-hero-text { min-width: 0; }

/* Matching Home hero typography: weight 800 base, hl-light 300 para
   contraste tipográfico, hl gradient morado en el énfasis. */
.pp-hero-headline {
  font-size: clamp(23px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--c-text);
  margin-bottom: 18px;
}
.pp-hero-headline .hl-light {
  font-weight: 300;
  color: var(--c-text);
}
/* hl-bright = mismo gradient que "ecosistema escolar" del Home
   (var(--c-mid) → var(--c-light) → #C0A4FF). Claro y vibrante. */
.pp-hero-headline .hl-bright {
  background: linear-gradient(135deg, var(--c-mid) 0%, var(--c-light) 45%, #C0A4FF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
}
.pp-hero-headline .hl {
  background: linear-gradient(135deg, var(--c-deep) 0%, var(--c-mid) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
}

.pp-hero-tagline {
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-muted);
  margin-bottom: 32px;
  max-width: 460px;
}
.pp-hero-tagline strong { color: var(--c-text); font-weight: 600; }

.pp-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.pp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: var(--font);
  overflow: hidden;
}
.pp-btn svg {
  width: 14px; height: 14px;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.pp-btn:hover svg { transform: translateX(3px); }

/* Primary — gradient morado con shimmer en hover */
.pp-btn--primary {
  background: linear-gradient(135deg, #7C6EE8 0%, #4A3CAE 100%);
  color: #fff;
  box-shadow:
    0 6px 20px rgba(74,60,174,.32),
    inset 0 1px 0 rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.14);
}
.pp-btn--primary::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-15deg);
  transition: left .65s ease;
  pointer-events: none;
}
.pp-btn--primary:hover::before { left: 130%; }
.pp-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 32px rgba(74,60,174,.50),
    inset 0 1px 0 rgba(255,255,255,.22);
}

/* Ghost — sólido y definido en reposo (se lee como botón sin hover),
   con lift + borde más fuerte en hover. */
.pp-btn--ghost {
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
          backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid rgba(124,110,232,.45);
  color: var(--c-deep);
  box-shadow:
    0 4px 14px rgba(74,60,174,.12),
    0 1px 3px rgba(74,60,174,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.pp-btn--ghost:hover {
  background: #fff;
  border-color: rgba(124,110,232,.7);
  color: var(--c-deep);
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px rgba(74,60,174,.18),
    0 2px 6px rgba(74,60,174,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.pp-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  margin-top: 4px;
}
.pp-hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--c-muted);
  font-weight: 500;
}
.pp-hero-meta-item svg {
  width: 14px; height: 14px;
  color: var(--c-main);
  flex-shrink: 0;
}

/* Hero mockup (primary product image) — usa filter:drop-shadow
   en lugar de box-shadow para que las sombras sigan la forma del
   contenido interno, igual que el Home (.hero-mock). */
.pp-hero-mock {
  position: relative;
  background:
    linear-gradient(135deg, #fff 0%, #F2F1F8 100%);
  border: 1px solid rgba(155,142,240,.28);
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 24px 60px rgba(74,60,174,.18),
    0 4px 12px rgba(74,60,174,.06);
  overflow: hidden;
}
/* Real mock — usa drop-shadow filter para sombra que respeta la
   forma del contenido interno (igual que el Home .hero-mock) */
.pp-hero-mock.is-mock-real {
  /* Nitidez bajo transform 3D — mismo tratamiento que .hero-mock del home.
     La sombra ahora vive como box-shadow en la tarjeta (copiada del módulo
     Comedor del home), no como drop-shadow aquí. */
  filter: contrast(1.03) saturate(1.02);
}
.pp-hero-mock::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(155,142,240,.20), transparent 70%);
  pointer-events: none;
}
.pp-mock-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(155,142,240,.05) 18px 36px);
}
.pp-mock-placeholder-tag {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-main);
  background: rgba(155,142,240,.16);
  padding: 5px 12px;
  border-radius: 999px;
}
.pp-mock-placeholder-title {
  font-size: 15px;
  color: var(--c-deep);
  font-weight: 600;
  text-align: center;
  max-width: 340px;
  line-height: 1.4;
}
.pp-mock-placeholder-sub {
  font-size: 12px;
  color: var(--c-muted);
  text-align: center;
  max-width: 320px;
  line-height: 1.5;
}

/* ─── SECTION FRAMEWORK ──────────────────────── */
.pp-section {
  padding: 80px 0;
  position: relative;
}
.pp-section--tight { padding: 56px 0; }
.pp-section--alt { background: #fff; border-top: 1px solid rgba(74,60,174,.06); border-bottom: 1px solid rgba(74,60,174,.06); }

.pp-section-head {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}
.pp-section-head--left { margin-left: 0; text-align: left; }

.pp-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-mid);
  background: var(--c-xlight);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.pp-section-title {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.018em;
  color: var(--c-text);
  margin-bottom: 14px;
}
.pp-section-title .hl {
  background: linear-gradient(135deg, var(--c-deep), var(--c-mid));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.pp-section-lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-muted);
  max-width: 640px;
  margin: 0 auto;
}
.pp-section-head--left .pp-section-lead { margin-left: 0; }

/* Nota secundaria bajo el subhead de contacto (argumento para la dirección) */
.contacto-subhead--note { margin-top: 12px; font-size: 14px; opacity: .85; }

/* ─── AUDIENCIA · lectores ───────────────────── */
.pp-audience {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
}
.pp-audience--single { grid-template-columns: 1fr; max-width: 720px; }

.pp-audience-card {
  background: #fff;
  border: 1px solid rgba(74,60,174,.10);
  border-radius: 20px;
  padding: 28px;
  position: relative;
  box-shadow: 0 2px 14px rgba(74,60,174,.05);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pp-audience-card:hover {
  border-color: rgba(155,142,240,.36);
  box-shadow: 0 8px 26px rgba(74,60,174,.10);
}
.pp-audience-card--primary {
  background: linear-gradient(135deg, #fff 0%, #F6F4FE 100%);
  border-color: rgba(155,142,240,.32);
}

.pp-audience-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-main);
  margin-bottom: 12px;
}
.pp-audience-role-dot {
  width: 6px; height: 6px;
  background: var(--c-mid);
  border-radius: 50%;
}
.pp-audience-card--secondary .pp-audience-role { color: var(--c-muted); }
.pp-audience-card--secondary .pp-audience-role-dot { background: var(--c-border); }

.pp-audience-title {
  font-size: 19px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 10px;
  line-height: 1.3;
}
.pp-audience-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-muted);
}
.pp-audience-text strong { color: var(--c-text); font-weight: 600; }

/* ─── PROBLEMAS · core argument ──────────────── */
.pp-problems {
  display: grid;
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}

.pp-problem {
  background: #fff;
  border: 1px solid rgba(74,60,174,.10);
  border-radius: 24px;
  padding: 40px;
  position: relative;
  box-shadow: 0 2px 18px rgba(74,60,174,.05);
  overflow: hidden;
}
.pp-problem::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-mid) 0%, var(--c-light) 100%);
  opacity: .6;
}

.pp-problem-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px dashed rgba(74,60,174,.14);
}
.pp-problem-num {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-main);
  background: var(--c-xlight);
  padding: 6px 12px;
  border-radius: 8px;
  letter-spacing: .04em;
}
.pp-problem-title {
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-text);
  margin: 0;
  letter-spacing: -.012em;
}

.pp-problem-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.pp-problem-col-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 14px;
}
.pp-problem-col-label-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-border);
}
.pp-problem-col-label--solution { color: var(--c-main); }
.pp-problem-col-label--solution .pp-problem-col-label-dot {
  background: linear-gradient(135deg, var(--c-main), var(--c-mid));
  box-shadow: 0 0 0 3px rgba(155,142,240,.18);
}

.pp-problem-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--c-text);
  margin-bottom: 16px;
}
.pp-problem-text--muted { color: var(--c-muted); }

.pp-symptoms { list-style: none; padding: 0; margin: 0; }
.pp-symptoms li {
  position: relative;
  padding: 10px 0 10px 26px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--c-muted);
  border-top: 1px solid rgba(74,60,174,.07);
}
.pp-symptoms li:first-child { border-top: 0; }
.pp-symptoms li::before {
  content: "";
  position: absolute;
  left: 0; top: 16px;
  width: 14px; height: 14px;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), #C44A6E calc(50% - 1px), #C44A6E calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), #C44A6E calc(50% - 1px), #C44A6E calc(50% + 1px), transparent calc(50% + 1px));
  border-radius: 50%;
  border: 1px solid rgba(196,74,110,.22);
  background-color: rgba(196,74,110,.06);
}

.pp-problem-solution {
  background: linear-gradient(135deg, #F6F4FE 0%, #FBFAFE 100%);
  border: 1px solid rgba(155,142,240,.30);
  border-radius: 16px;
  padding: 22px;
}
.pp-problem-solution .pp-problem-text {
  color: var(--c-text);
  margin-bottom: 14px;
}
.pp-feat-tag {
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-deep);
  background: #fff;
  border: 1px solid rgba(155,142,240,.32);
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 500;
}
.pp-feat-tag strong {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-main);
  margin-bottom: 5px;
}

/* Problem variant for Casino (more emotional, real-language quotes) */
.pp-problem--quote {
  background: linear-gradient(135deg, #FAF8FF 0%, #fff 100%);
}

/* ─── MOCKUPS · 3 paralelos ──────────────────── */
.pp-mocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}
.pp-mocks--featured {
  grid-template-columns: 1.4fr 1fr 1fr;
}

.pp-mock {
  background: #fff;
  border: 1px solid rgba(74,60,174,.10);
  border-radius: 22px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 2px 18px rgba(74,60,174,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pp-mock:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(74,60,174,.12);
  border-color: rgba(155,142,240,.32);
}

.pp-mock-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-main);
  background: var(--c-xlight);
  padding: 5px 12px;
  border-radius: 999px;
}
.pp-mock-tag-num {
  font-size: 11px;
  color: var(--c-mid);
  font-weight: 800;
}

.pp-mock-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
  letter-spacing: -.01em;
}
.pp-mock-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-muted);
}

/* Mock visual frame — IMAGE-REPLACEABLE PLACEHOLDER */
.pp-mock-frame {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 16px;
  border: 1px solid rgba(155,142,240,.28);
  background:
    linear-gradient(135deg, #F8F6FF 0%, #EEEBFD 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
}
.pp-mock-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent 0 20px, rgba(155,142,240,.06) 20px 40px);
  pointer-events: none;
}
.pp-mock-frame img,
.pp-mock-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.pp-mock-frame-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 16px;
}
.pp-mock-frame-label-tag {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-main);
  background: rgba(255,255,255,.7);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(155,142,240,.4);
  backdrop-filter: blur(4px);
}
.pp-mock-frame-label-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-deep);
  line-height: 1.45;
  max-width: 240px;
}

/* Featured mockup (first card, tall) */
.pp-mock--featured .pp-mock-frame { aspect-ratio: 4/3; }
.pp-mock--featured .pp-mock-title { font-size: 20px; }

.pp-mocks-note {
  margin: 24px auto 0;
  text-align: center;
  font-size: 12px;
  color: var(--c-muted);
  max-width: 720px;
  font-style: italic;
}
.pp-mocks-note strong { color: var(--c-main); font-style: normal; }

/* ─── MÓDULOS · tabla 3 columnas ────────────── */
.pp-modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
}

.pp-module {
  background: #fff;
  border: 1px solid rgba(74,60,174,.10);
  border-radius: 20px;
  padding: 30px;
  position: relative;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 2px 14px rgba(74,60,174,.04);
}
.pp-module:hover {
  transform: translateY(-3px);
  border-color: rgba(155,142,240,.36);
  box-shadow: 0 10px 30px rgba(74,60,174,.10);
}

.pp-module-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-mid) 0%, var(--c-main) 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 6px 20px rgba(74,60,174,.32);
}
.pp-module-icon svg { width: 22px; height: 22px; }

.pp-module-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.pp-module-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-muted);
  margin-bottom: 16px;
}
.pp-module-feats {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(74,60,174,.08);
  padding-top: 16px;
}
.pp-module-feats li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--c-text);
  padding: 5px 0;
  line-height: 1.5;
}
.pp-module-feats li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-mid), var(--c-light));
}

/* ─── HIGHLIGHT BULLETS · landing-style bullets ── */
.pp-bullets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0 0;
}
.pp-bullet {
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(74,60,174,.10);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.pp-bullet-check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(74,60,174,.30);
}
.pp-bullet-check svg { width: 12px; height: 12px; }
.pp-bullet p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--c-text);
  margin: 0;
  font-weight: 500;
}

/* ─── COMPARISON · hoy vs con Tap In (CPA + Ligas) ── */
.pp-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 1000px;
  margin: 0 auto;
}
.pp-vs-col {
  background: #fff;
  border: 1px solid rgba(74,60,174,.10);
  border-radius: 20px;
  padding: 28px;
}
.pp-vs-col--bad { background: linear-gradient(180deg, #FFFBFA 0%, #fff 100%); }
.pp-vs-col--good {
  background: linear-gradient(180deg, #F6F4FE 0%, #fff 100%);
  border-color: rgba(155,142,240,.36);
}
.pp-vs-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pp-vs-col--bad .pp-vs-tag { color: #C44A6E; }
.pp-vs-col--good .pp-vs-tag { color: var(--c-main); }
.pp-vs-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 14px;
  letter-spacing: -.01em;
}
.pp-vs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pp-vs-list li {
  position: relative;
  padding: 10px 0 10px 26px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-text);
  border-top: 1px solid rgba(74,60,174,.06);
}
.pp-vs-list li:first-child { border-top: 0; }
.pp-vs-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 14px;
  width: 12px; height: 12px;
  border-radius: 50%;
}
.pp-vs-col--bad .pp-vs-list li::before {
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), #C44A6E calc(50% - 1px), #C44A6E calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), #C44A6E calc(50% - 1px), #C44A6E calc(50% + 1px), transparent calc(50% + 1px));
  background-color: rgba(196,74,110,.06);
  border: 1px solid rgba(196,74,110,.24);
}
.pp-vs-col--good .pp-vs-list li::before {
  background:
    linear-gradient(135deg, var(--c-mid), var(--c-main));
  box-shadow: 0 0 0 3px rgba(155,142,240,.18);
}
.pp-vs-col--good .pp-vs-list li::after {
  content: "";
  position: absolute;
  left: 3px; top: 17.5px;
  width: 6px; height: 3px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}

/* ─── CALLOUT BLOCK · cita / quote / decisión ── */
.pp-callout {
  background: linear-gradient(135deg, var(--c-deep) 0%, var(--c-main) 100%);
  border-radius: 28px;
  padding: 48px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(45,37,96,.32);
}
.pp-callout::before {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(155,142,240,.4) 0%, transparent 70%);
  pointer-events: none;
}
.pp-callout-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-light);
  background: rgba(255,255,255,.10);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.pp-callout-text {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  position: relative;
  z-index: 1;
  letter-spacing: -.01em;
}
.pp-callout-text em { font-style: normal; color: var(--c-light); }
.pp-callout-attribution {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  margin-top: 16px;
  position: relative;
  z-index: 1;
}

/* HUÉRFANO POST-REFACTOR — revisar si eliminar.
   .pp-final removido del HTML en las 4 páginas internas (Diego 19/05/2026):
   el form de demo está justo abajo en la misma sección, no necesita duplicado.
   Conservado en CSS por si se reactiva. El home (index.html) no usa estas clases. */
/* ─── FINAL CTA · pre-form summary ──────────── */
.pp-final {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.pp-final h2 {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.018em;
  color: var(--c-text);
  margin-bottom: 16px;
}
.pp-final h2 .hl {
  background: linear-gradient(135deg, var(--c-deep), var(--c-mid));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pp-final p {
  font-size: 16px;
  color: var(--c-muted);
  line-height: 1.6;
  margin-bottom: 26px;
}

/* ─── OTROS MÓDULOS · ver también ───────────── */
.pp-others {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.pp-other {
  background: #fff;
  border: 1px solid rgba(74,60,174,.10);
  border-radius: 16px;
  padding: 18px 20px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pp-other:hover {
  transform: translateY(-2px);
  border-color: rgba(155,142,240,.36);
  box-shadow: 0 8px 24px rgba(74,60,174,.10);
}
.pp-other-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-main);
}
.pp-other-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: -.01em;
}
.pp-other-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--c-main);
  font-weight: 600;
  margin-top: 4px;
  transition: gap .2s ease;
}
.pp-other:hover .pp-other-arrow { gap: 8px; }
.pp-other-arrow svg { width: 12px; height: 12px; }

/* ═══════════════════════════════════════════════
   PRODUCT-SPECIFIC ACCENT VARIANTS
   ═══════════════════════════════════════════════ */

/* Atmósfera del hero · color por página, aplicado a la capa continua
   .pp-shell::before (cubre desde detrás de la navbar hacia abajo).
   Centros de bloom subidos a la franja superior para llenar la zona de
   la barra y que no haya corte. */

/* Comedor + CPA · fondo IDÉNTICO (morado, sin acento cálido naranjo) */
.pp-shell--casino::before,
.pp-shell--cpa::before {
  background:
    radial-gradient(ellipse 50% 48% at 16% 4%, rgba(155,142,240,.22), transparent 60%),
    radial-gradient(ellipse 58% 42% at 89% 0%, rgba(107,92,231,.14), transparent 65%);
}

/* CPA · fondo continuo: las secciones no pintan bloques blancos ni bordes de
   1px, así el degradé del shell fluye sin cortes horizontales. (Las cards de
   las funciones tienen su propia superficie, así que igual destacan.) */
.pp-shell--cpa .pp-statbar,
.pp-shell--cpa .pp-section--alt {
  background: transparent;
  border-top: 0;
  border-bottom: 0;
}


/* CPA · cierre light→dark SIN banda brillante: un único disolvido oscuro que
   sube desde el fondo y se desvanece a transparente arriba, así el lavanda de
   la página se funde con el navy sin línea de corte. (Override del ::after
   global, solo en CPA.) */
.pp-shell--cpa::after {
  background:
    radial-gradient(ellipse 155% 105% at 50% 122%,
      #0E0C1E 0%,
      #14112C 40%,
      #1B1740 52%,
      rgba(45,37,96,.50) 64%,
      rgba(74,60,174,.26) 74%,
      rgba(107,92,231,.15) 83%,
      rgba(155,142,240,.06) 91%,
      transparent 100%);
}

/* PROVEEDORES · institucional, gris-purpura */
.pp-shell--prov::before {
  background:
    radial-gradient(ellipse 50% 48% at 18% 6%, rgba(155,142,240,.16), transparent 60%),
    radial-gradient(ellipse 60% 42% at 92% 2%, rgba(107,92,231,.12), transparent 65%);
}

/* LIGAS · energético */
.pp-shell--ligas::before {
  background:
    radial-gradient(ellipse 50% 48% at 14% 4%, rgba(107,92,231,.24), transparent 60%),
    radial-gradient(ellipse 60% 42% at 90% 0%, rgba(58,178,99,.12), transparent 65%);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .pp-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .pp-mocks, .pp-mocks--featured { grid-template-columns: 1fr; }
  .pp-modules { grid-template-columns: 1fr; }
  .pp-bullets { grid-template-columns: 1fr; }
  .pp-others { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .pp-shell { padding-top: 88px; }
  .pp-section { padding: 56px 0; }
  .pp-hero { padding: 24px 0 40px; }
  .pp-hero-headline { font-size: 24px; }
  .pp-audience { grid-template-columns: 1fr; }
  .pp-problem { padding: 26px; }
  .pp-problem-body { grid-template-columns: 1fr; gap: 22px; }
  .pp-vs { grid-template-columns: 1fr; }
  .pp-callout { padding: 28px; border-radius: 22px; }
  .pp-mock { padding: 22px; }
}

/* ═══════════════════════════════════════════════
   STAT BAR · línea de credibilidad post-hero
   ═══════════════════════════════════════════════ */
.pp-statbar {
  background: linear-gradient(180deg, #FBFAFE 0%, #fff 100%);
  border-top: 1px solid rgba(74,60,174,.08);
  border-bottom: 1px solid rgba(74,60,174,.08);
  padding: 22px 0;
  margin-top: 12px;
}
.pp-statbar-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
.pp-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.pp-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, transparent, rgba(74,60,174,.20), transparent);
}
.pp-stat-num {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--c-deep);
  background: linear-gradient(135deg, var(--c-deep), var(--c-mid));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.pp-stat-lab {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-muted);
  line-height: 1.35;
  letter-spacing: .01em;
}
.pp-stat-lab strong {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 1px;
  letter-spacing: -.01em;
}

@media (max-width: 720px) {
  .pp-statbar-inner { grid-template-columns: 1fr 1fr; gap: 18px 24px; }
  .pp-stat:nth-child(2)::after { display: none; }
}

/* ═══════════════════════════════════════════════
   ACCORDION · problemas
   ═══════════════════════════════════════════════ */
.pp-acc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Item — glassmorphic pill, invitante al click */
.pp-acc-item {
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.6));
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 22px;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .25s ease, background .35s ease;
  position: relative;
  box-shadow:
    0 6px 20px rgba(74,60,174,.07),
    0 1px 3px rgba(74,60,174,.04),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(155,142,240,.10);
}
.pp-acc-item:hover {
  transform: translateY(-2px);
  border-color: rgba(155,142,240,.50);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(246,244,254,.75));
  box-shadow:
    0 14px 36px rgba(74,60,174,.14),
    0 2px 6px rgba(74,60,174,.08),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(155,142,240,.22);
}
.pp-acc-item.is-open {
  background: linear-gradient(180deg, #fff, #FBFAFE);
  border-color: rgba(155,142,240,.46);
  box-shadow:
    0 18px 48px rgba(74,60,174,.16),
    0 4px 10px rgba(74,60,174,.08),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(155,142,240,.30);
}

/* Subtle gradient ribbon (acent superior cuando hover/open) */
.pp-acc-item::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(155,142,240,.45) 0%,
    rgba(192,132,252,.10) 35%,
    transparent 60%,
    rgba(107,92,231,.30) 100%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: -1;
}
.pp-acc-item:hover::before { opacity: .35; }
.pp-acc-item.is-open::before { opacity: .55; }

/* Top accent bar */
.pp-acc-item::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-mid) 0%, var(--c-light) 100%);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 1;
}
.pp-acc-item.is-open::after { opacity: .9; }

.pp-acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  position: relative;
  z-index: 1;
}

/* Number badge — gradient morado, glassmorphic ribete blanco */
.pp-acc-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(135deg, var(--c-mid) 0%, var(--c-main) 100%);
  border-radius: 11px;
  white-space: nowrap;
  box-shadow:
    0 6px 14px rgba(74,60,174,.32),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.08);
  font-variant-numeric: tabular-nums;
  transition: transform .3s ease, box-shadow .3s ease;
}
.pp-acc-item:hover .pp-acc-num {
  transform: rotate(-3deg) scale(1.05);
  box-shadow:
    0 8px 20px rgba(74,60,174,.42),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.08);
}
.pp-acc-item.is-open .pp-acc-num {
  background: linear-gradient(135deg, #C084FC 0%, var(--c-main) 100%);
  transform: rotate(-2deg) scale(1.02);
}

.pp-acc-title {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.35;
  letter-spacing: -.01em;
  transition: color .2s ease;
}
.pp-acc-item:hover .pp-acc-title { color: var(--c-deep); }

.pp-acc-chev {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(155,142,240,.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-main);
  transition: transform .35s cubic-bezier(.4,0,.2,1), background .25s ease, box-shadow .25s ease;
}
.pp-acc-chev svg { width: 14px; height: 14px; }
.pp-acc-item:hover .pp-acc-chev {
  background: rgba(155,142,240,.18);
}
.pp-acc-item.is-open .pp-acc-chev {
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  color: #fff;
  transform: rotate(180deg);
  box-shadow: 0 4px 12px rgba(74,60,174,.32);
}

.pp-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1);
}
.pp-acc-item.is-open .pp-acc-body {
  max-height: 900px;
}
.pp-acc-body-inner {
  padding: 0 28px 28px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease .12s, transform .4s ease .12s;
}
.pp-acc-item.is-open .pp-acc-body-inner {
  opacity: 1;
  transform: translateY(0);
}

.pp-acc-col-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 12px;
}
.pp-acc-col-label::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-border);
}
.pp-acc-col-label--solution { color: var(--c-main); }
.pp-acc-col-label--solution::before {
  background: linear-gradient(135deg, var(--c-main), var(--c-mid));
  box-shadow: 0 0 0 3px rgba(155,142,240,.18);
}
.pp-acc-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-muted);
  margin-bottom: 14px;
}
.pp-acc-text strong { color: var(--c-text); font-weight: 600; }
.pp-acc-text em { color: var(--c-deep); font-style: italic; font-weight: 500; }

.pp-acc-symptoms {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pp-acc-symptoms li {
  position: relative;
  padding: 9px 0 9px 24px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-muted);
  border-top: 1px solid rgba(74,60,174,.07);
}
.pp-acc-symptoms li:first-child { border-top: 0; }
.pp-acc-symptoms li::before {
  content: "";
  position: absolute;
  left: 0; top: 14px;
  width: 12px; height: 12px;
  background-color: rgba(196,74,110,.06);
  border-radius: 50%;
  border: 1px solid rgba(196,74,110,.22);
  background-image:
    linear-gradient(45deg, transparent calc(50% - 1px), #C44A6E calc(50% - 1px), #C44A6E calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), #C44A6E calc(50% - 1px), #C44A6E calc(50% + 1px), transparent calc(50% + 1px));
}

.pp-acc-solution {
  background: linear-gradient(135deg, #F6F4FE 0%, #FBFAFE 100%);
  border: 1px solid rgba(155,142,240,.30);
  border-radius: 14px;
  padding: 20px;
}
.pp-acc-solution .pp-acc-text { color: var(--c-text); margin-bottom: 12px; }
.pp-acc-feat {
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-deep);
  background: #fff;
  border: 1px solid rgba(155,142,240,.32);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 500;
}
.pp-acc-feat strong {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-main);
  margin-bottom: 4px;
}

@media (max-width: 720px) {
  .pp-acc-trigger { padding: 18px 20px; gap: 12px; }
  .pp-acc-title { font-size: 15px; }
  .pp-acc-body-inner { grid-template-columns: 1fr; gap: 18px; padding: 0 20px 22px; }
}

/* ═══════════════════════════════════════════════
   HOW · sección integrada problema↔solución↔mockup
   ═══════════════════════════════════════════════ */
.pp-how {
  display: flex;
  flex-direction: column;
  gap: 88px;
  max-width: 1180px;
  margin: 0 auto;
}
.pp-how-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
}
.pp-how-block--reverse {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.pp-how-block--reverse .pp-how-copy { order: 2; }
.pp-how-block--reverse .pp-how-mock { order: 1; }

.pp-how-copy { min-width: 0; }
.pp-how-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-main);
  margin-bottom: 18px;
}
.pp-how-step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(74,60,174,.32);
}
.pp-how-title {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.018em;
  color: var(--c-text);
  margin-bottom: 14px;
}
.pp-how-title .hl {
  background: linear-gradient(135deg, var(--c-deep), var(--c-mid));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pp-how-text {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--c-muted);
  margin-bottom: 22px;
}
.pp-how-text strong { color: var(--c-text); font-weight: 600; }

.pp-how-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pp-how-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-deep);
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  padding: 8px 14px;
  box-shadow:
    0 6px 18px rgba(74,60,174,.10),
    0 1px 3px rgba(74,60,174,.06),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(155,142,240,.18);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.pp-how-chip:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.75);
  box-shadow:
    0 10px 24px rgba(74,60,174,.14),
    0 2px 6px rgba(74,60,174,.10),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(155,142,240,.28);
}
.pp-how-chip svg {
  width: 12px; height: 12px;
  color: var(--c-main);
}

/* ── Puntos en lista · reemplazan los chips cortos en las 4 funciones de
   Comedor (frases completas que envuelven en varias líneas). Check morado
   a la izquierda, alineado al inicio del texto. Scope Comedor. ── */
.pp-shell--casino .pp-how-points,
.pp-shell--cpa .pp-how-points,
.pp-shell--prov .pp-how-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.pp-shell--casino .pp-how-point,
.pp-shell--cpa .pp-how-point,
.pp-shell--prov .pp-how-point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-text);
  text-align: left;
}
.pp-shell--casino .pp-how-point-ic,
.pp-shell--cpa .pp-how-point-ic,
.pp-shell--prov .pp-how-point-ic {
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(107,92,231,.13);
  border: 1px solid rgba(107,92,231,.30);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pp-shell--casino .pp-how-point-ic svg,
.pp-shell--cpa .pp-how-point-ic svg,
.pp-shell--prov .pp-how-point-ic svg {
  width: 12px; height: 12px;
  color: var(--c-main);
}
/* A.5 · Respiración visual: más aire entre funciones y entre subtítulo y
   lista de puntos. Solo espaciado. Scope Comedor + CPA + Gestión Interna. */
.pp-shell--casino .pp-how,
.pp-shell--cpa .pp-how,
.pp-shell--prov .pp-how { gap: 112px; }
.pp-shell--casino .pp-how-title,
.pp-shell--cpa .pp-how-title,
.pp-shell--prov .pp-how-title { margin-bottom: 24px; }
/* Bloques --reverse: puntos alineados al borde derecho en desktop,
   manteniendo el check a la izquierda del texto. */
@media (min-width: 1025px) {
  .pp-shell--casino .pp-how-block--reverse .pp-how-points,
  .pp-shell--cpa .pp-how-block--reverse .pp-how-points,
  .pp-shell--prov .pp-how-block--reverse .pp-how-points { align-items: flex-end; }
  /* Gestión: los puntos quedan a la izquierda (alineados con el título), para
     que el check del primer bullet no se corra al borde derecho. */
  .pp-shell--prov .pp-how-block--reverse .pp-how-points { align-items: stretch; }
}

.pp-how-mock {
  position: relative;
}
.pp-how-mock-frame {
  position: relative;
  border-radius: 22px;
  padding: 20px;
  background:
    linear-gradient(135deg, #F8F6FF 0%, #EEEBFD 100%);
  border: 1px solid rgba(155,142,240,.24);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 24px 60px rgba(74,60,174,.16),
    0 4px 12px rgba(74,60,174,.06);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .4s ease, box-shadow .4s ease;
}
.pp-how-mock-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(155,142,240,.20), transparent 70%);
  pointer-events: none;
}
.pp-how-mock-frame:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 32px 72px rgba(74,60,174,.22),
    0 8px 18px rgba(74,60,174,.08);
}

@media (max-width: 1024px) {
  .pp-how { gap: 56px; }
  .pp-how-block, .pp-how-block--reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pp-how-block--reverse .pp-how-copy { order: 1; }
  .pp-how-block--reverse .pp-how-mock { order: 2; }
}

/* ═══════════════════════════════════════════════
   REVEAL ON SCROLL
   ═══════════════════════════════════════════════ */
.pp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .8s cubic-bezier(.25,.46,.45,.94),
    transform .8s cubic-bezier(.25,.46,.45,.94);
  will-change: opacity, transform;
}
.pp-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.pp-reveal--delay1 { transition-delay: .12s; }
.pp-reveal--delay2 { transition-delay: .24s; }
.pp-reveal--delay3 { transition-delay: .36s; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .pp-reveal { opacity: 1; transform: none; transition: none; }
  .pp-cas-push, .pp-cas-term-check { animation: none !important; }
}

/* ═══════════════════════════════════════════════
   HOVER MICRO-INTERACTIONS · mockups
   ═══════════════════════════════════════════════ */

/* Mock 1 — Calendar: animated unselected day flips to selected on hover */
.pp-how-mock-frame:hover .pp-cas-cal-day[data-flip="1"] {
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(74,60,174,.32);
  transition: background .35s ease, color .35s ease, box-shadow .35s ease;
}

/* Mock 2 — Conciliación: arrow pulses on hover */
.pp-how-mock-frame:hover .pp-cas-conc-arrow svg {
  animation: pp-arrow-down 1.2s ease-in-out infinite;
}
@keyframes pp-arrow-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Mock 3 — Terminal: stronger pulse on hover */
.pp-how-mock-frame:hover .pp-cas-term-check {
  animation-duration: 1.2s;
}

/* ═══════════════════════════════════════════════
   BENEFICIOS · 4 dolores resueltos + mockups "zoom" enfocados
   Reusa el layout pp-how-block; añade kicker de beneficio, línea de dolor,
   línea de apoyo, y componentes UI enfocados flotando sobre un halo
   morado→rosado pastel con una card tenue desfasada detrás (profundidad).
   ═══════════════════════════════════════════════ */
.pp-bnf-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-mid);
  background: var(--c-xlight);
  padding: 6px 13px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.pp-bnf-pain {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-muted);
  font-style: italic;
  border-left: 2px solid rgba(124,110,232,.45);
  padding-left: 14px;
  margin-bottom: 16px;
}
/* Nota secundaria compacta (pliega la predicción de demanda en Cobranza).
   Tratamiento liviano para que el bloque no quede más alto que los otros 3. */
.pp-bnf-support {
  margin-top: 13px;
  padding-top: 12px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--c-muted);
  border-top: 1px solid rgba(124,110,232,.18);
}
.pp-bnf-support strong { color: var(--c-main); font-weight: 600; }

/* ── Head de la sección · réplica EXACTA del header "EL ECOSISTEMA" del home
   (eco-kicker + prodv6-closing-title). Esta página no carga prodv6.css, así
   que replicamos los estilos aquí, scopeados a .pp-bnf y centrados. */
.pp-bnf .eco-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(107,92,231,.09);
  color: #5B4EDB;
  border: 1px solid rgba(107,92,231,.22);
  letter-spacing: .07em;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  margin-bottom: 18px;
}
.pp-bnf .eco-kicker .kicker-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #28C840;
  box-shadow: 0 0 0 0 rgba(40,200,64,.6), 0 0 8px rgba(40,200,64,.5);
  flex-shrink: 0;
  animation: pp-eco-kicker-pulse 2.2s ease-in-out infinite;
}
@keyframes pp-eco-kicker-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(40,200,64,.55), 0 0 8px rgba(40,200,64,.5); }
  50%      { box-shadow: 0 0 0 6px rgba(40,200,64,0), 0 0 12px rgba(40,200,64,.65); }
}
.pp-bnf .prodv6-closing-title {
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -.018em;
  color: var(--c-deep);
}
.pp-bnf .prodv6-closing-title .cn-em {
  display: block;
  font-weight: 700;
  background: linear-gradient(140deg, #5B4EDB 0%, #9B8EF0 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.025em;
  line-height: 1.12;
}
.pp-bnf .prodv6-closing-title .cn-2 {
  display: block;
  font-weight: 400;
  color: var(--c-deep);
  letter-spacing: -.018em;
  line-height: 1.22;
}
.pp-bnf .prodv6-closing-title .cn-2 strong {
  font-weight: 700;
  color: var(--c-deep);
  -webkit-text-fill-color: var(--c-deep);
  background: none;
  letter-spacing: -.025em;
}
@media (prefers-reduced-motion: reduce) {
  .pp-bnf .eco-kicker .kicker-dot { animation: none !important; }
}

/* ── Tarea 5 · Pills (.pp-how-chip) como tags claras (scope benefits) ──
   Tinte morado Connect sólido + borde definido + check morado nítido. */
.pp-bnf .pp-how-chip {
  color: var(--c-main);
  background: rgba(107,92,231,.13);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border: 1px solid rgba(107,92,231,.38);
  padding: 8px 15px;
  box-shadow: none;
}
.pp-bnf .pp-how-chip svg { color: var(--c-mid); }
.pp-bnf .pp-how-chip:hover {
  transform: translateY(-1px);
  background: rgba(107,92,231,.2);
  border-color: rgba(107,92,231,.55);
  box-shadow: 0 4px 12px rgba(74,60,174,.14);
}

/* ── Tarea 3 · Bloques --reverse (Validaciones, Cobranza): copy a la
   derecha SOLO en desktop. En ≤1024 (apilado) vuelve a izquierda. ── */
@media (min-width: 1025px) {
  .pp-bnf .pp-how-block--reverse .pp-how-copy { text-align: right; }
  .pp-bnf .pp-how-block--reverse .pp-how-meta { justify-content: flex-end; }
  .pp-bnf .pp-how-block--reverse .pp-bnf-pain {
    border-left: 0;
    border-right: 2px solid rgba(124,110,232,.45);
    padding-left: 0;
    padding-right: 14px;
  }
}

/* ── Zoom: SIN rectángulo contenedor. La card y su ghost flotan libres
   sobre el fondo de la sección, con un glow radial suave detrás (morado→
   rosado, bordes que se desvanecen, sin aristas). min-height para balancear
   las dos columnas. ── */
.pp-zoom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 368px;
  padding: 20px 4px;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.pp-zoom-stack { position: relative; width: 100%; max-width: 320px; }
/* El glow vive en el stack para que SIGA a la card al alinearla. */
.pp-zoom-stack::before {
  content: '';
  position: absolute;
  inset: -54px -46px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 54% at 50% 46%, rgba(124,110,232,.18), transparent 70%),
    radial-gradient(ellipse 50% 46% at 72% 80%, rgba(244,170,198,.22), transparent 72%);
}
/* Conjunto copy+mockup centrado en pantalla: la card se alinea al borde
   EXTERNO de su columna (llega al margen, como el texto al margen opuesto)
   → el par queda simétrico. Columna del mockup más angosta para que el hueco
   central no quede excesivo. Sólo en 2-columnas (≥1025px). */
@media (min-width: 1025px) {
  .pp-bnf .pp-how-block { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .pp-bnf .pp-how-block--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
  .pp-bnf .pp-how-block:not(.pp-how-block--reverse) .pp-zoom { justify-content: flex-end; }
  .pp-bnf .pp-how-block--reverse .pp-zoom { justify-content: flex-start; }
}
.pp-zoom-ghost {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(187,186,198,.4);
  box-shadow: 0 12px 30px rgba(74,60,174,.10);
  transform: translate(15px, 16px) rotate(2.4deg);
  z-index: 0;
}
.pp-zoom-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid #BBBAC6;
  border-radius: 16px;
  padding: 16px 16px 17px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 14px 34px rgba(45,37,96,.12),
    0 3px 8px rgba(45,37,96,.06);
}

/* keyframes compartidas de los mockups vivos */
@keyframes pzc-scan { to { transform: translateX(100%); } }
@keyframes pzc-rowin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pzv-scanline { 0% { transform: translateY(0); } 100% { transform: translateY(92px); } }
@keyframes pz-bump { 30% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* ═ 1 · CONCILIACIÓN — motor de matching en vivo ═ */
.pp-zoom-card--concilia { padding: 14px 15px 14px; }
.pzc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.pzc-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--c-deep); }
.pzc-live i { width: 6px; height: 6px; border-radius: 50%; background: #3ab263; animation: pp-pulse-dot 1.6s ease-in-out infinite; }
.pzc-count { font-size: 10.5px; color: var(--c-muted); }
.pzc-count strong { color: var(--c-mid); font-weight: 700; font-size: 13px; display: inline-block; }
.pzc-active {
  position: relative; overflow: hidden;
  border: 1px solid rgba(124,110,232,.28); border-radius: 12px;
  padding: 11px 12px; background: linear-gradient(135deg, #F6F4FE, #fff);
}
.pzc-active::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 32%, rgba(124,110,232,.12) 50%, transparent 68%);
  transform: translateX(-100%);
}
.pp-zoom-card--concilia.is-matching .pzc-active::before { animation: pzc-scan 1.4s ease-in-out infinite; }
.pzc-active-top { display: flex; gap: 10px; align-items: center; }
.pzc-bank {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, #2C3E66, #1B2746); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700;
}
.pzc-bank--wp { background: linear-gradient(135deg, #6B5CE7, #4A3CAE); font-size: 8px; }
.pzc-active-mid { flex: 1; min-width: 0; }
.pzc-amt { font-size: 14px; font-weight: 700; color: var(--c-deep); letter-spacing: -.01em; }
.pzc-glosa { display: block; font-size: 10px; color: var(--c-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pzc-state { flex-shrink: 0; font-size: 9.5px; font-weight: 700; color: var(--c-mid); }
.pp-zoom-card--concilia.is-resolved .pzc-state { color: #207a3c; }
.pzc-sigs { display: flex; gap: 5px; margin-top: 10px; }
.pzc-sig {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 600; color: var(--c-muted);
  background: var(--c-surface); border: 1px solid transparent;
  padding: 3px 8px; border-radius: 999px;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.pzc-sig svg { width: 8px; height: 8px; opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .25s ease; }
.pzc-sig.on { color: #207a3c; background: rgba(58,178,99,.10); border-color: rgba(58,178,99,.25); }
.pzc-sig.on svg { opacity: 1; transform: scale(1); }
.pzc-assigned {
  display: flex; align-items: center; gap: 7px; margin-top: 11px;
  font-size: 11px; font-weight: 600; color: #207a3c;
  opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .4s ease;
}
.pzc-assigned strong { color: var(--c-deep); font-weight: 700; margin-left: 2px; }
.pp-zoom-card--concilia.is-resolved .pzc-assigned { opacity: 1; transform: translateY(0); }
.pzc-check {
  width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #3ab263, #207a3c); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.pzc-check svg { width: 10px; height: 10px; }
.pzc-recent { margin-top: 11px; display: flex; flex-direction: column; }
.pzc-recent-row {
  display: flex; align-items: center; gap: 9px; font-size: 10px; color: var(--c-muted);
  padding: 7px 2px; border-top: 1px solid rgba(187,186,198,.28);
}
.pzc-recent-row.pzc-in { animation: pzc-rowin .5s ease; }
.pzc-recent-bank { font-weight: 700; color: var(--c-deep); font-size: 9px; background: var(--c-surface); padding: 3px 6px; border-radius: 5px; min-width: 36px; text-align: center; }
.pzc-recent-fam { flex: 1; color: var(--c-text); font-weight: 500; }
.pzc-recent-amt { font-weight: 600; color: var(--c-deep); }

/* ═ 2 · VALIDACIONES — terminal de validación en tiempo real ═ */
.pp-zoom-card--valida { padding: 0; overflow: hidden; }
.pzv-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 13px; background: linear-gradient(180deg, #FBFAFE, #fff);
  border-bottom: 1px solid rgba(187,186,198,.35); font-size: 10px; color: var(--c-muted);
}
.pzv-bar-l { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--c-deep); }
.pzv-bar-l i, .pzv-foot-live i { width: 6px; height: 6px; border-radius: 50%; background: #3ab263; animation: pp-pulse-dot 1.6s ease-in-out infinite; }
.pzv-clock { font-variant-numeric: tabular-nums; font-weight: 600; }
.pzv-stage { position: relative; padding: 15px 14px; overflow: hidden; }
.pzv-scan {
  position: absolute; left: 0; right: 0; top: 6px; height: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--c-mid), transparent);
  box-shadow: 0 0 12px rgba(107,92,231,.6);
}
.pp-zoom-card--valida.is-scanning .pzv-scan { opacity: 1; animation: pzv-scanline 1.1s ease-in-out infinite alternate; }
.pzv-id { display: flex; align-items: center; gap: 10px; }
.pzv-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #9B8EF0, #6B5CE7); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.pzv-id-txt { flex: 1; min-width: 0; }
.pzv-name { font-size: 13px; font-weight: 700; color: var(--c-text); }
.pzv-sub { font-size: 10px; color: var(--c-muted); }
.pzv-tag { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-mid); background: var(--c-xlight); padding: 4px 7px; border-radius: 6px; white-space: nowrap; }
.pzv-result {
  display: flex; align-items: center; gap: 11px; margin-top: 13px;
  padding: 11px 13px; border-radius: 12px;
  background: rgba(58,178,99,.09); border: 1px solid rgba(58,178,99,.24);
  transition: background .3s ease, border-color .3s ease, opacity .3s ease, transform .3s ease;
}
.pp-zoom-card--valida.is-scanning .pzv-result { opacity: .4; transform: scale(.98); }
.pzv-result-ic {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #3ab263, #207a3c); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(32,122,60,.30); transition: background .3s ease, box-shadow .3s ease;
}
.pzv-result-ic svg { width: 18px; height: 18px; }
.pzv-ic-no { display: none; }
.pzv-result-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pzv-result-txt { font-size: 13.5px; font-weight: 800; color: #207a3c; letter-spacing: -.01em; line-height: 1.1; }
.pzv-result-sub { font-size: 9.5px; color: var(--c-muted); line-height: 1.3; }
.pp-zoom-card--valida.is-denied .pzv-result { background: var(--c-surface); border-color: rgba(187,186,198,.5); }
.pp-zoom-card--valida.is-denied .pzv-result-ic { background: linear-gradient(135deg, #9A98A8, #6B6A7D); box-shadow: 0 6px 14px rgba(107,106,125,.25); }
.pp-zoom-card--valida.is-denied .pzv-ic-ok { display: none; }
.pp-zoom-card--valida.is-denied .pzv-ic-no { display: block; }
.pp-zoom-card--valida.is-denied .pzv-result-txt { color: var(--c-text); }
.pzv-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-top: 1px solid rgba(187,186,198,.35); font-size: 10px; color: var(--c-muted);
}
.pzv-foot-item strong { color: var(--c-deep); font-weight: 700; font-size: 12px; margin-left: 3px; display: inline-block; }
.pzv-foot-live { display: inline-flex; align-items: center; gap: 5px; }

/* ═ 3 · WALLET — saldo vivo con barra de nivel + libro de movimientos ═ */
.pp-zoom-card--wallet { padding: 15px 16px 14px; }
.pzw-head { display: flex; align-items: center; gap: 9px; }
.pzw-ic { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; background: var(--c-xlight); color: var(--c-mid); display: inline-flex; align-items: center; justify-content: center; }
.pzw-ic svg { width: 17px; height: 17px; }
.pzw-head-id { flex: 1; min-width: 0; }
.pzw-lab { font-size: 12px; font-weight: 700; color: var(--c-text); }
.pzw-sub { font-size: 9.5px; color: var(--c-muted); }
.pzw-flag { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #207a3c; background: rgba(58,178,99,.10); padding: 4px 8px; border-radius: 6px; white-space: nowrap; transition: color .3s, background .3s; }
.pzw-flag.is-low { color: #9a6a1c; background: rgba(232,178,80,.18); }
.pzw-amt { font-size: 30px; font-weight: 700; color: var(--c-deep); letter-spacing: -.02em; margin: 12px 0 10px; font-variant-numeric: tabular-nums; transform-origin: left center; }
.pzw-amt.bump { animation: pz-bump .4s ease; }
.pzw-bar { height: 7px; border-radius: 999px; background: rgba(124,110,232,.14); overflow: hidden; }
.pzw-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-mid), var(--c-main)); transition: width .7s cubic-bezier(.4,0,.2,1), background .4s; }
.pzw-bar-fill.is-low { background: linear-gradient(90deg, #E8B250, #D9924F); }
.pzw-ledger { margin-top: 13px; display: flex; flex-direction: column; gap: 6px; }
.pzw-row { display: flex; align-items: center; gap: 9px; background: var(--c-surface); border-radius: 9px; padding: 8px 10px; }
.pzw-row.pzw-in { animation: pzc-rowin .45s ease; }
.pzw-row-ic { width: 21px; height: 21px; border-radius: 6px; flex-shrink: 0; background: rgba(124,110,232,.14); color: var(--c-mid); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; line-height: 1; }
.pzw-row.is-recharge .pzw-row-ic { background: rgba(58,178,99,.14); color: #207a3c; }
.pzw-row-lab { flex: 1; font-size: 11px; font-weight: 600; color: var(--c-text); }
.pzw-row-amt { font-size: 11px; font-weight: 700; color: var(--c-deep); }
.pzw-row.is-recharge .pzw-row-amt { color: #207a3c; }

/* ═ 4 · COBRANZA — depleción → aviso → recarga + demanda semanal ═ */
.pp-zoom-card--cobranza { padding: 15px 16px 15px; }
.pzo-head { display: flex; align-items: flex-start; justify-content: space-between; }
.pzo-lab { font-size: 12px; font-weight: 700; color: var(--c-text); }
.pzo-sub { font-size: 9.5px; color: var(--c-muted); }
.pzo-tickets { text-align: right; line-height: 1; }
.pzo-tickets strong { font-size: 26px; font-weight: 700; color: var(--c-deep); letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: inline-block; transform-origin: center; transition: color .3s; }
.pzo-tickets span { display: block; font-size: 9px; color: var(--c-muted); margin-top: 3px; }
.pzo-tickets.is-low strong { color: #9a6a1c; }
.pzo-tickets.bump strong { animation: pz-bump .4s ease; }
.pzo-alert {
  display: flex; gap: 9px; align-items: flex-start; padding: 11px 12px; border-radius: 12px;
  background: linear-gradient(135deg, #F6F4FE, #fff); border: 1px solid rgba(124,110,232,.28);
  box-shadow: 0 8px 20px rgba(74,60,174,.12);
  transition: box-shadow .3s ease;
}
/* El aviso queda SIEMPRE visible (no aparece/desaparece) para que el
   mockup no tenga huecos vacíos; is-alert sólo agrega un realce breve
   cuando el texto se actualiza, como "recién llegado". */
.pp-zoom-card--cobranza.is-alert .pzo-alert { box-shadow: 0 10px 26px rgba(74,60,174,.22), 0 0 0 3px rgba(124,110,232,.16); }
.pzo-alert-ic { width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; background: linear-gradient(135deg, var(--c-mid), var(--c-main)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.pzo-alert-body { flex: 1; min-width: 0; }
.pzo-alert-text { font-size: 12px; color: var(--c-text); line-height: 1.4; }
.pzo-alert-text strong { color: var(--c-main); font-weight: 700; }
.pzo-alert-meta { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 5px; font-size: 9.5px; color: var(--c-muted); }
.pzo-sent { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: #207a3c; opacity: 0; transition: opacity .35s ease .3s; }
.pp-zoom-card--cobranza.is-alert .pzo-sent { opacity: 1; }
.pzo-sent svg { width: 11px; height: 11px; }
.pzo-demand { margin-top: 12px; }
.pzo-demand-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 10px; color: var(--c-muted); margin-bottom: 9px; }
.pzo-demand-head strong { font-size: 13px; font-weight: 700; color: var(--c-mid); }
.pzo-demand-bars { display: flex; gap: 9px; height: 58px; }
.pzo-demand-bars span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; font-size: 8.5px; color: var(--c-muted); font-weight: 600; }
.pzo-demand-bars i { width: 100%; height: var(--h); border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--c-light), var(--c-mid)); transition: height .6s cubic-bezier(.4,0,.2,1); }

/* ── Cobranza · Historial de recargas (reemplaza las barras de demanda) ── */
.pzo-hist { margin-top: 0; }
.pzo-hist-head { font-size: 10px; color: var(--c-muted); margin-bottom: 7px; font-weight: 600; }
.pzo-hist-list { display: flex; flex-direction: column; gap: 5px; }
.pzo-hist-row { display: flex; align-items: center; gap: 9px; background: var(--c-surface); border-radius: 9px; padding: 6px 10px; font-size: 11px; }
.pzo-hist-ic { width: 19px; height: 19px; border-radius: 6px; flex-shrink: 0; background: rgba(58,178,99,.14); color: #207a3c; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; line-height: 1; }
.pzo-hist-lab { flex: 1; font-weight: 600; color: var(--c-text); }
.pzo-hist-date { font-weight: 600; color: var(--c-muted); }
/* Flash al entrar una recarga nueva (coordinado con el aviso + subida de tickets) */
.pzo-hist-row.is-new { animation: pzc-rowin .5s ease; }

/* Cobranza · el mockup completo queda enmarcado como un teléfono real
   (mismo lenguaje visual que .pp-cpa-phone en Centro de Padres) para que
   se lea de inmediato como el celular del apoderado, no como una tarjeta
   flotante. El contenido existente (pzo-head, notificación, historial) se
   reparte dentro del marco. Scope Comedor. */
.pp-shell--casino .pp-zoom-card--cobranza {
  width: 196px;
  height: 414px;
  max-width: 100%;
  padding: 28px 14px 14px;
  border: 0;
  border-radius: 32px;
  box-shadow:
    0 0 0 4px rgba(45,37,96,.92),
    0 20px 38px rgba(45,37,96,.20),
    0 8px 16px rgba(45,37,96,.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.pp-shell--casino .pp-zoom-card--cobranza::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 78px; height: 18px;
  background: rgba(45,37,96,.92);
  border-radius: 0 0 14px 14px;
  z-index: 5;
}
.pp-shell--casino .pp-zoom-card--cobranza .pzo-hist { margin-top: auto; }
.pp-shell--casino .pp-zoom-card--cobranza .pzo-lab { font-size: 11.5px; }
.pp-shell--casino .pp-zoom-card--cobranza .pzo-tickets strong { font-size: 22px; }
.pp-shell--casino .pp-zoom-card--cobranza .pzo-alert-text { font-size: 11px; }
.pp-shell--casino .pzo-phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pp-shell--casino .pzo-phone-clock { font-size: 9px; font-weight: 700; color: var(--c-deep); }
.pp-shell--casino .pzo-phone-bits { display: inline-flex; align-items: center; gap: 3px; }
.pp-shell--casino .pzo-phone-bits i { width: 4px; height: 4px; border-radius: 50%; background: rgba(74,60,174,.40); }

/* ── MIA · administradora IA del comedor (Diego 21/09/2026), primer
   módulo con tratamiento destacado (panel propio) para que se lea como
   "la principal" de cara a las reuniones con empresas de Food Service.
   Reusa el layout de .pp-how-block; el mockup es un chat, no un panel. ── */
.pp-shell--casino .pp-mia {
  background: linear-gradient(160deg, var(--c-xlight) 0%, #fff 62%);
  border: 1px solid rgba(124,110,232,.20);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px);
  box-shadow: 0 20px 50px rgba(74,60,174,.10);
}
.pp-shell--casino .pp-mia .pp-how-block { gap: 56px; }
.pp-shell--casino .pp-mia-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 8px rgba(74,60,174,.10);
}
.pp-shell--casino .pp-mia-kicker-ic { width: 13px; height: 13px; color: var(--c-mid); flex-shrink: 0; }

/* Mockup: tarjeta de chat, no un panel de datos como los otros 4 */
/* Mockup MIA · mismo layout que la referencia adjuntada por Agustín:
   ícono centrado arriba, saludo centrado debajo, input con placeholder de
   ejemplo, y chips de acciones recurrentes al final. */
.pp-shell--casino .pp-mia-chat {
  position: relative;
  background: #fff;
  border: 1px solid #BBBAC6;
  border-radius: 20px;
  padding: 32px 22px 22px;
  max-width: 380px;
  margin: 0 auto;
  text-align: center;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 14px 34px rgba(45,37,96,.12),
    0 3px 8px rgba(45,37,96,.06);
}
.pp-shell--casino .pp-mia-chat-icon {
  display: inline-flex;
  width: 26px; height: 26px;
  color: var(--c-mid);
  margin-bottom: 14px;
}
.pp-shell--casino .pp-mia-chat-icon svg { width: 100%; height: 100%; }
.pp-shell--casino .pp-mia-chat-title {
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--c-text);
}
/* Degradado animado (paleta Tap In + acento rosa ya usado en los glows del
   hero) para que MIA se sienta "viva". Estático en reduced-motion. */
.pp-shell--casino .pp-mia-chat-title .hl {
  background: linear-gradient(90deg, var(--c-deep), var(--c-mid), #E79BC0, var(--c-mid), var(--c-deep));
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .pp-shell--casino .pp-mia-chat-title .hl {
    animation: pp-mia-gradient-shift 4s ease-in-out infinite;
  }
}
.pp-shell--casino .pp-mia-chat-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 1.5px solid transparent;
  border-radius: 16px;
  padding: 12px 10px 12px 14px;
  margin-bottom: 16px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, var(--c-mid), #E79BC0, var(--c-deep), var(--c-mid)) border-box;
  background-size: 100% 100%, 300% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .pp-shell--casino .pp-mia-chat-input {
    animation: pp-mia-border-shift 5s linear infinite;
  }
}
@keyframes pp-mia-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes pp-mia-border-shift {
  0% { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 300% 50%; }
}
.pp-shell--casino .pp-mia-chat-input span:first-child {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--c-muted);
}
.pp-shell--casino .pp-mia-chat-send {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 9px;
  background: var(--c-xlight);
  color: var(--c-mid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pp-shell--casino .pp-mia-chat-send svg { width: 13px; height: 13px; }
.pp-shell--casino .pp-mia-chat-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.pp-shell--casino .pp-mia-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text);
  background: #fff;
  border: 1px solid #DDDBE8;
  border-radius: 999px;
  padding: 7px 12px;
  box-shadow: 0 1px 2px rgba(45,37,96,.06);
}
.pp-shell--casino .pp-mia-chip svg { width: 13px; height: 13px; color: var(--c-mid); flex-shrink: 0; }

/* Piso de altura suave para emparejar los 4 mockups de función CPA sin dejar
   huecos: los más cortos (eventos/reportes) suben al nivel de los más altos
   sin forzar el del tope, evitando el salto visible entre secciones. */
.pp-zoom-card--finanzas,
.pp-zoom-card--recauda,
.pp-zoom-card--eventos,
.pp-zoom-card--reportes { box-sizing: border-box; min-height: 250px; }

/* ═ 5 · FINANZAS (CPA) — cartola que se auto-clasifica línea por línea ═ */
.pp-zoom-card--finanzas { padding: 13px 14px; }
.pzf-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pzf-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--c-deep); }
.pzf-live i { width: 6px; height: 6px; border-radius: 50%; background: #3ab263; animation: pp-pulse-dot 1.6s ease-in-out infinite; }
.pzf-count { font-size: 10.5px; color: var(--c-muted); }
.pzf-count strong { color: var(--c-mid); font-weight: 700; font-size: 13px; }

.pzf-ledger { border: 1px solid rgba(187,186,198,.5); border-radius: 12px; overflow: hidden; background: var(--c-surface); }
.pzf-cols {
  display: grid; grid-template-columns: 1fr auto 96px; gap: 10px;
  padding: 7px 11px; background: rgba(187,186,198,.14);
  font-size: 8.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--c-muted);
}
.pzf-cols span:nth-child(2) { text-align: right; }
.pzf-rows { height: 102px; overflow: hidden; }   /* viewport de alto fijo: recorta la fila que sale */
.pzf-track { display: flex; flex-direction: column; will-change: transform; }   /* parte móvil (slide por transform) */
.pzf-row {
  display: grid; grid-template-columns: 1fr auto 96px; gap: 10px; align-items: center;
  padding: 7px 11px; border-top: 1px solid rgba(187,186,198,.26);
}
.pzf-row:first-child { border-top: 0; }
.pzf-row.is-classified { animation: pzf-line .6s ease; }
@keyframes pzf-line { from { background: rgba(107,92,231,.06); } to { background: transparent; } }
/* Feed en vivo: el slide de entrada lo hace .pzf-track con transform (inline,
   desde el driver) para que sea fluido; .pzf-rows recorta la fila que sale. */
.pzf-row-glosa { font-size: 11px; font-weight: 500; color: var(--c-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pzf-row-amt { font-size: 12px; font-weight: 600; text-align: right; letter-spacing: -.01em; color: var(--c-text); font-variant-numeric: tabular-nums; }
.pzf-row-amt.is-in { color: #207a3c; }
.pzf-row-amt.is-out { color: var(--c-text); }
.pzf-row-cat {
  justify-self: start; max-width: 100%; box-sizing: border-box;
  padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 9px; font-weight: 600; color: var(--c-muted); background: rgba(187,186,198,.18);
  opacity: .6; transition: background .5s ease, color .5s ease;
}
.pzf-row.is-classified .pzf-row-cat { opacity: 1; animation: pzf-cat-in .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes pzf-cat-in {
  0%   { opacity: 0; transform: translateY(3px) scale(.96); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.pzf-row.is-classified .pzf-row-cat.is-in { color: #207a3c; background: rgba(58,178,99,.14); }
.pzf-row.is-classified .pzf-row-cat.is-out { color: var(--c-text); background: rgba(187,186,198,.34); }

.pzf-more {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 11px; border-top: 1px solid rgba(187,186,198,.26);
  font-size: 10px; font-weight: 600; color: var(--c-main); background: rgba(107,92,231,.045);
}
.pzf-more svg { opacity: .8; }

.pzf-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.pzf-group {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--c-surface); border: 1px solid rgba(187,186,198,.4);
  border-radius: 10px; padding: 7px 10px;
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1);
}
.pzf-group-lab { font-size: 9px; color: var(--c-muted); font-weight: 500; }
.pzf-group-amt { font-size: 12px; font-weight: 700; color: var(--c-deep); letter-spacing: -.01em; font-variant-numeric: tabular-nums; transition: color .5s ease; }
.pzf-group.is-bump { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(74,60,174,.18); }
.pzf-group.is-bump .pzf-group-amt { color: var(--c-main); }

/* ═ 6 · RECAUDACIÓN (CPA) — panel de estado de cuotas en vivo ═ */
.pp-zoom-card--recauda { padding: 14px 15px; position: relative; }
.pzr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pzr-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--c-deep); }
.pzr-live i { width: 6px; height: 6px; border-radius: 50%; background: #3ab263; animation: pp-pulse-dot 1.6s ease-in-out infinite; }
.pzr-count { font-size: 10.5px; color: var(--c-muted); }
.pzr-count strong { color: var(--c-mid); font-weight: 700; font-size: 13px; }
.pzr-cover { height: 6px; border-radius: 999px; background: rgba(187,186,198,.35); overflow: hidden; margin-bottom: 11px; }
.pzr-cover-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-light), var(--c-mid)); transition: width .7s cubic-bezier(.22,1,.36,1); }
/* Alto fijado por JS al iniciar (5 filas) + overflow hidden: durante la
   transición hay 6 filas un instante, pero el panel NUNCA cambia de tamaño. */
.pzr-list { display: flex; flex-direction: column; overflow: hidden; }
.pzr-row { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border-bottom: 1px solid rgba(187,186,198,.28); border-radius: 6px; transition: background .6s ease; }
.pzr-row:last-child { border-bottom: 0; }
/* Cuando una familia cambia de estado, su contenido entra con un fade suave */
.pzr-row.is-pending { animation: pzr-rowin .5s cubic-bezier(.22,1,.36,1); }
@keyframes pzr-rowin { from { opacity: .35; } to { opacity: 1; } }
/* Familia nueva que entra por arriba: sólo un fade. El desplazamiento de las
   filas de abajo lo anima el JS con FLIP (transform), que es lo que da el
   movimiento fluido. Doble clase para ganarle en especificidad a
   .pzr-row.is-pending y aplicar también a las cuotas pendientes nuevas. */
.pzr-row.pzr-row--new { animation: pzr-enter .5s cubic-bezier(.22,.85,.3,1); }
@keyframes pzr-enter { from { opacity: 0; } to { opacity: 1; } }
/* Cierre · 30/30 — leve celebración de "completado" */
.pp-zoom-card--recauda.is-complete .pzr-cover-fill {
  background: linear-gradient(90deg, #34a85f, #2FB36B);
  animation: pzr-cover-glow 1.5s ease;
}
@keyframes pzr-cover-glow {
  0%   { box-shadow: 0 0 0 0 rgba(47,179,107,0); }
  35%  { box-shadow: 0 0 13px 1px rgba(47,179,107,.7); }
  100% { box-shadow: 0 0 0 0 rgba(47,179,107,0); }
}
.pp-zoom-card--recauda.is-complete .pzr-count strong {
  display: inline-block;
  color: #207a3c;
  animation: pzr-count-pop .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pzr-count-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.pzr-toast.is-done {
  border-color: rgba(47,179,107,.5);
  background: rgba(238,250,242,.98);
}
.pzr-toast.is-done .pzr-toast-amt { color: #207a3c; }
.pzr-ava { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 700; color: var(--c-main); background: rgba(107,92,231,.12); letter-spacing: .02em; transition: background .5s ease, color .5s ease; }
.pzr-fam { flex: 1; min-width: 0; font-size: 11px; font-weight: 600; color: var(--c-text); }
.pzr-status { font-size: 9.5px; font-weight: 700; flex-shrink: 0; transition: color .45s ease; }
.pzr-row.is-ok .pzr-status { color: #207a3c; }
.pzr-row.is-pending .pzr-status { color: #9a6a1c; }
.pzr-row.is-justpaid { background: rgba(58,178,99,.16); }
/* Toast · entra deslizando DESDE ARRIBA, ubicado bajo el head y la barra de
   cobertura (no tapa la barra "en vivo" ni el progreso). */
.pzr-toast {
  position: absolute; left: 15px; right: 15px; top: 58px;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border-radius: 12px;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
          backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(58,178,99,.32);
  box-shadow: 0 12px 26px rgba(45,37,96,.18);
  opacity: 0; transform: translateY(-14px); pointer-events: none;
  transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
}
.pzr-toast.is-show { opacity: 1; transform: translateY(0); }
.pzr-toast-ic { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: #2FB36B; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.pzr-toast-ic svg { width: 12px; height: 12px; }
.pzr-toast-tx { flex: 1; min-width: 0; font-size: 10px; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pzr-toast-tx strong { font-weight: 700; }
.pzr-toast-amt { flex-shrink: 0; font-size: 11px; font-weight: 700; color: #207a3c; }

/* ═ 7 · EVENTOS (CPA) — panel de venta de entradas con QR ═ */
.pp-zoom-card--eventos { padding: 14px 15px; }
.pze-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.pze-brand { display: inline-flex; align-items: center; gap: 7px; }
/* Marca de Connect — mismo formato que en el mockup de Solicitudes (Gestión) */
.pze-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(135deg, var(--c-mid), var(--c-main)); color: #fff; flex-shrink: 0; }
.pze-mark svg { width: 11px; height: 11px; display: block; }
.pze-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--c-deep); }
.pze-live i { width: 6px; height: 6px; border-radius: 50%; background: #3ab263; animation: pp-pulse-dot 1.6s ease-in-out infinite; }
.pze-count { font-size: 10.5px; color: var(--c-muted); white-space: nowrap; }
/* Al agotarse, se oculta el sufijo para que "180 · Agotada" quepa en una línea
   y el header NO cambie de alto (el mockup mantiene sus dimensiones). */
.pp-zoom-card--eventos.is-soldout .pze-count-suf { display: none; }
.pze-count strong { color: var(--c-mid); font-weight: 700; font-size: 13px; }
.pze-count strong.is-flash { display: inline-block; animation: pze-flash .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes pze-flash { 0% { transform: scale(1); } 45% { transform: scale(1.18); color: var(--c-main); } 100% { transform: scale(1); } }
.pze-soldout {
  display: none; margin-left: 7px; font-size: 8.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  color: #207a3c; background: rgba(58,178,99,.16); vertical-align: middle;
}
.pze-soldout.is-show { display: inline-block; animation: pze-flash .55s cubic-bezier(.34,1.56,.64,1); }
.pze-event {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid rgba(187,186,198,.5); border-radius: 12px; padding: 11px;
  background: var(--c-surface); margin-bottom: 11px;
}
.pze-event-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pze-event-name { font-size: 12px; font-weight: 700; color: var(--c-text); letter-spacing: -.01em; }
.pze-event-meta { font-size: 9.5px; color: var(--c-muted); font-weight: 600; }
.pze-qr {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-main); background: rgba(107,92,231,.10);
}
.pze-qr svg { width: 26px; height: 26px; }
.pze-qr.is-gen { animation: pze-qrpulse .7s cubic-bezier(.22,1,.36,1); }
@keyframes pze-qrpulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(107,92,231,.4); }
  40% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(107,92,231,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(107,92,231,0); }
}
/* Alto fijado por JS (3 filas) + overflow hidden: el feed mantiene siempre
   sus dimensiones aunque entre/salga una venta. Sin gap (se usa margin por
   fila) para poder colapsar el alto de forma fluida al salir. */
.pze-list { display: flex; flex-direction: column; overflow: hidden; min-height: 80px; }
.pze-row { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.pze-row:last-child { margin-bottom: 0; }
.pze-row-qr {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-mid); background: rgba(107,92,231,.10);
}
.pze-row-qr svg { width: 15px; height: 15px; }
.pze-row-fam { flex: 1; min-width: 0; font-size: 11px; font-weight: 600; color: var(--c-text); }
.pze-row-qty { flex-shrink: 0; font-size: 10px; font-weight: 700; color: var(--c-mid); }
/* Venta nueva: sólo fade. El desplazamiento de las filas lo anima el JS con
   FLIP (transform) → movimiento fluido sin "tirón". */
.pze-row--new { animation: pze-enter .5s cubic-bezier(.22,.85,.3,1); }
@keyframes pze-enter { from { opacity: 0; } to { opacity: 1; } }

/* ═ 8 · REPORTES (CPA) — resumen que se arma por campaña ═ */
.pp-zoom-card--reportes { padding: 14px 15px; }
.pzp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.pzp-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--c-deep); }
.pzp-live i { width: 6px; height: 6px; border-radius: 50%; background: #3ab263; animation: pp-pulse-dot 1.6s ease-in-out infinite; }
.pzp-state {
  font-size: 9.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  color: #207a3c; background: rgba(58,178,99,.14);
  transition: color .3s ease, background .3s ease;
}
.pp-zoom-card--reportes.is-building .pzp-state { color: var(--c-mid); background: rgba(107,92,231,.12); animation: pzp-pulse 1.1s ease-in-out infinite; }
@keyframes pzp-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.pzp-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.pzp-filter {
  font-size: 9.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px;
  color: var(--c-muted); background: var(--c-surface); border: 1px solid rgba(187,186,198,.5);
}
.pzp-filter--accent { color: var(--c-main); background: rgba(107,92,231,.10); border-color: rgba(107,92,231,.30); }
/* Al cambiar de campaña, el chip hace un "swap" suave (entra desde la izquierda) */
.pzp-filter--accent.is-swap { animation: pzp-swap .5s cubic-bezier(.22,.85,.3,1); }
@keyframes pzp-swap {
  0%   { opacity: .25; transform: translateX(-6px); }
  100% { opacity: 1;   transform: translateX(0); }
}
.pzp-summary { border: 1px solid rgba(187,186,198,.5); border-radius: 12px; padding: 11px; background: var(--c-surface); }
.pzp-sum-row { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 0; }
.pzp-sum-lab { font-size: 10.5px; color: var(--c-muted); }
.pzp-sum-val { font-size: 12.5px; font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; transition: opacity .3s ease; }
.pzp-sum-row--total { margin-top: 4px; padding-top: 8px; border-top: 1px solid rgba(187,186,198,.45); }
.pzp-sum-row--total .pzp-sum-lab { font-weight: 700; color: var(--c-text); }
.pzp-sum-row--total .pzp-sum-val { font-size: 15px; color: var(--c-main); }
.pzp-sum-foot { margin-top: 9px; font-size: 9px; color: var(--c-muted); }
.pzp-sum-foot strong { color: var(--c-mid); font-weight: 700; }
.pp-zoom-card--reportes.is-building .pzp-sum-val { opacity: .7; }
/* Estado "PDF descargado" — el chip se pone verde como un check de éxito */
.pp-zoom-card--reportes.is-exported .pzp-state { color: #207a3c; background: rgba(58,178,99,.16); }
/* El saldo total "late" cuando aterriza el resumen */
.pzp-sum-row--total .pzp-sum-val.is-pop { display: inline-block; animation: pzp-pop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes pzp-pop { 0% { transform: scale(1); } 45% { transform: scale(1.13); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .pzf-live i, .pzr-live i, .pze-live i, .pzp-live i { animation: none !important; }
  .pzf-row.is-classified, .pzf-row.is-classified .pzf-row-cat,
  .pzr-row.is-pending, .pzr-row.pzr-row--new,
  .pze-qr.is-gen, .pze-row--new,
  .pze-count strong.is-flash, .pze-soldout.is-show,
  .pzp-sum-val.is-pop, .pzp-filter--accent.is-swap,
  .pp-zoom-card--reportes.is-building .pzp-state { animation: none !important; }
}

/* ── Sección "Integrado a tu día a día" · 4 tarjetas con pills de logos ── */
.pp-integra-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 46px; }
.pp-integra-card {
  background: #fff;
  border: 1px solid rgba(107,92,231,.20);
  border-radius: 18px;
  padding: 24px 22px;
  box-shadow: 0 4px 16px -6px rgba(74,60,174,.12), 0 12px 32px -12px rgba(74,60,174,.16);
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, opacity .25s ease;
}
.pp-integra-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -10px rgba(74,60,174,.30); }
/* Mismo patrón que la sección Ecosistema del home: al hover de la grilla
   las demás tarjetas se atenúan y la apuntada queda full. */
.pp-integra-grid:hover .pp-integra-card { opacity: .7; }
.pp-integra-grid:hover .pp-integra-card:hover { opacity: 1; }
/* Pills de integración (logo + nombre) · estilo pill como en Ecosistema. */
.pp-integra-card-logos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pp-integra-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 7px;
  background: rgba(107,92,231,.06);
  border: 1px solid rgba(107,92,231,.18);
  border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--c-deep); line-height: 1;
}
.pp-integra-chip svg, .pp-integra-chip img { width: 18px; height: 18px; display: block; flex-shrink: 0; }
.pp-integra-chip--brand svg { color: var(--c-main,#4A3CAE); }
.pp-integra-title { font-size: 16px; font-weight: 700; color: var(--c-deep); margin: 0 0 6px; letter-spacing: -.01em; }
.pp-integra-text { font-size: 13.5px; line-height: 1.55; color: var(--c-muted); margin: 0; }
@media (max-width: 900px) { .pp-integra-grid { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (max-width: 540px) { .pp-integra-grid { grid-template-columns: 1fr; } }

/* ── Sección "Más capacidades" · grid 3×2 (Comedor: "Más que un sistema de
   comedor" · CPA: "Más que solo transparencia") ──
   Mismo lenguaje visual que pp-integra: tarjeta blanca, borde morado tenue,
   atenuación al hover de la grilla. Ícono de línea en círculo morado. ── */
.pp-shell--casino .pp-caps-grid,
.pp-shell--cpa .pp-caps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.pp-shell--casino .pp-caps-card,
.pp-shell--cpa .pp-caps-card {
  background: #fff;
  border: 1px solid rgba(107,92,231,.18);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 4px 16px -6px rgba(74,60,174,.12), 0 12px 32px -12px rgba(74,60,174,.16);
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, opacity .25s ease, border-color .3s ease;
}
.pp-shell--casino .pp-caps-card:hover,
.pp-shell--cpa .pp-caps-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -10px rgba(74,60,174,.30); border-color: rgba(107,92,231,.40); }
.pp-shell--casino .pp-caps-grid:hover .pp-caps-card,
.pp-shell--cpa .pp-caps-grid:hover .pp-caps-card { opacity: .7; }
.pp-shell--casino .pp-caps-grid:hover .pp-caps-card:hover,
.pp-shell--cpa .pp-caps-grid:hover .pp-caps-card:hover { opacity: 1; }
/* Ícono: squircle morado tenue con trazo de marca en reposo (más liviano y
   elegante); al hover de la tarjeta se "rellena" con el gradiente de marca. */
.pp-shell--casino .pp-caps-ic,
.pp-shell--cpa .pp-caps-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: rgba(107,92,231,.10);
  border: 1px solid rgba(107,92,231,.20);
  color: var(--c-main);
  margin-bottom: 16px;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.pp-shell--casino .pp-caps-ic svg,
.pp-shell--cpa .pp-caps-ic svg { width: 22px; height: 22px; }
.pp-shell--casino .pp-caps-card:hover .pp-caps-ic,
.pp-shell--cpa .pp-caps-card:hover .pp-caps-ic {
  background: rgba(107,92,231,.15);
  border-color: rgba(107,92,231,.34);
  transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(107,92,231,.08);
}
/* min-height ≈ 2 líneas: las descripciones arrancan a la misma altura aunque
   el título ocupe 1 o 2 líneas → grilla pareja. */
.pp-shell--casino .pp-caps-title,
.pp-shell--cpa .pp-caps-title { font-size: 16.5px; font-weight: 700; color: var(--c-deep); margin: 0 0 8px; letter-spacing: -.01em; line-height: 1.3; min-height: 2.6em; }
.pp-shell--casino .pp-caps-text,
.pp-shell--cpa .pp-caps-text { font-size: 13.5px; line-height: 1.55; color: var(--c-muted); margin: 0; }
@media (max-width: 900px) { .pp-shell--casino .pp-caps-grid, .pp-shell--cpa .pp-caps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pp-shell--casino .pp-caps-grid, .pp-shell--cpa .pp-caps-grid { grid-template-columns: 1fr; } }

/* "Más capacidades" (Comedor) no tenía fondo propio: al ser transparente,
   mostraba el punto exacto del degradé de .pp-shell (FBFAFE → F2F1F8) que
   le tocaba según su altura en la página — ahí, ya bastante hacia el
   F2F1F8 más gris, se sentía como un corte respecto a la sección blanca
   de arriba (Cobranza, que sí usa #fff explícito). Fondo blanco sólido,
   igual al resto de secciones claras, sin degradé. */
.pp-shell--casino .pp-caps { background: #fff; }
/* Mismo problema, misma causa: "Integrado a tu día a día" (justo debajo
   de Más capacidades) tampoco tenía fondo propio. */
.pp-shell--casino .pp-integra { background: #fff; }

/* ── Cobranza · apartado de recarga (29/09, v2 tras feedback "muy
   sobrecargado"): sin card anidada dentro del teléfono, sin ícono+título
   redundantes, sin CTA de texto repetida — sólo el mensaje de contexto y
   los montos, que son la acción en sí. Menos capas, más claro. Scope
   Comedor. ── */
.pp-shell--casino .pzo-recharge { padding: 0; }
.pp-shell--casino .pzo-recharge-msg {
  margin: 0 0 9px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--c-text);
}
.pp-shell--casino .pzo-recharge-msg strong { color: var(--c-main); font-weight: 700; }
.pp-shell--casino .pzo-recharge-row {
  display: flex;
  gap: 6px;
  width: 100%;
}
.pp-shell--casino .pzo-recharge-btn {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--c-main);
  background: var(--c-xlight);
  border-radius: 9px;
  padding: 9px 2px;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.pp-shell--casino .pzo-recharge-btn--hl {
  color: #fff;
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  box-shadow: 0 3px 8px rgba(74,60,174,.30);
}

/* Reduced motion: estados representativos, sin loops ni barridos */
@media (prefers-reduced-motion: reduce) {
  .pzc-active::before, .pzv-scan, .pzc-live i, .pzv-bar-l i, .pzv-foot-live i { animation: none !important; }
  .pzv-scan { opacity: 0 !important; }
  .pzc-assigned, .pzo-alert, .pzo-sent { opacity: 1 !important; transform: none !important; }
  .pzc-sig { color: #207a3c; background: rgba(58,178,99,.10); border-color: rgba(58,178,99,.25); }
  .pzc-sig svg { opacity: 1; transform: none; }
  .pp-zoom-card--valida.is-scanning .pzv-result { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════
   COUNTER · animated number display
   Uses CSS transitions, the JS swaps textContent */
.pp-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  /* Aire entre el número y el sufijo (% / x) para que no queden pegados. */
  margin-right: .04em;
}

/* ═══════════════════════════════════════════════
   CASINO · custom CSS mockups
   Pintados en CSS · listos para reemplazo con imágenes reales
   ═══════════════════════════════════════════════ */

/* Containers neutralizan el placeholder dotted */
.pp-mock-frame.is-mock-real { background: transparent; border: 0; padding: 0; }
.pp-mock-frame.is-mock-real::after { display: none; }
.pp-mock-frame.is-mock-real { display: block; aspect-ratio: auto; }
/* Sin glow detrás del mockup real: su borde superior duro (inset:0) generaba
   una banda lavanda "cortada" justo arriba del mockup. El mockup ya tiene su
   propia sombra para dar profundidad. */
.pp-hero-mock.is-mock-real::before { display: none; }
.pp-hero-mock.is-mock-real .pp-mock-placeholder { display: none; }

/* Hero mock — frame full-bleed */
.pp-hero-mock.is-mock-real {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Common mock window/phone primitives ───── */
.pp-mw {
  position: relative;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(155,142,240,.20);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 24px 48px rgba(45,37,96,.16),
    0 4px 12px rgba(74,60,174,.08);
  overflow: hidden;
  width: 100%;
}
.pp-mw-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(155,142,240,.12);
  background: linear-gradient(180deg, #FBFAFE, #fff);
}
.pp-mw-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #E5E0F4;
}
.pp-mw-dot:nth-child(1) { background: #F4B5B5; }
.pp-mw-dot:nth-child(2) { background: #F0DFA1; }
.pp-mw-dot:nth-child(3) { background: #B5DEC1; }
.pp-mw-title {
  margin-left: 8px;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--c-muted);
  font-weight: 500;
}
.pp-mw-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #3ab263;
  font-weight: 700;
}
.pp-mw-live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #3ab263;
  box-shadow: 0 0 0 0 rgba(58,178,99,.5);
  animation: pp-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pp-pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(58,178,99,.5); }
  70%, 100% { box-shadow: 0 0 0 6px rgba(58,178,99,0); }
}

.pp-mw-body {
  padding: 18px 18px 20px;
}

.pp-ph {
  position: relative;
  width: 100%;
  max-width: 248px;
  margin: 0 auto;
  aspect-ratio: 9 / 19.5;
  background: #1a1530;
  border-radius: 36px;
  padding: 8px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 20px 48px rgba(45,37,96,.20),
    0 4px 12px rgba(74,60,174,.10);
}
.pp-ph-screen {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  padding: 24px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pp-ph-screen::before {
  content: "";
  position: absolute;
  top: 7px; left: 50%;
  transform: translateX(-50%);
  width: 70px; height: 18px;
  background: #1a1530;
  border-radius: 999px;
}
.pp-ph-app-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
}
.pp-ph-back { font-size: 14px; color: var(--c-muted); }
.pp-ph-app-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text);
}
.pp-ph-app-sub {
  font-size: 9px;
  color: var(--c-muted);
}

/* ─── HERO · Operator panel ────────────────── */
.pp-cas-hero {
  max-width: 480px;
  width: 100%;
}

.pp-cas-hero-stat {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}
.pp-cas-hero-stat-big {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--c-deep);
  background: linear-gradient(135deg, var(--c-deep), var(--c-mid));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pp-cas-hero-stat-lab {
  display: flex;
  flex-direction: column;
  font-size: 10px;
  color: var(--c-muted);
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.pp-cas-hero-stat-lab strong {
  font-size: 12px;
  color: var(--c-text);
  font-weight: 600;
  letter-spacing: 0;
}
.pp-cas-hero-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #207a3c;
  background: rgba(58,178,99,.10);
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: auto;
  margin-bottom: 4px;
}

.pp-cas-spark {
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
}

.pp-cas-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}
.pp-cas-kpi {
  background: #F7F5FE;
  border: 1px solid rgba(155,142,240,.18);
  border-radius: 10px;
  padding: 10px;
}
.pp-cas-kpi-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-deep);
  letter-spacing: -.01em;
}
.pp-cas-kpi-lab {
  font-size: 9.5px;
  color: var(--c-muted);
  margin-top: 2px;
  letter-spacing: .04em;
}

.pp-cas-feed-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--c-muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pp-cas-feed {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pp-cas-feed-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid rgba(155,142,240,.14);
  border-radius: 10px;
}
.pp-cas-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.pp-cas-avatar--b { background: linear-gradient(135deg, #F4B5B5, #C76A6A); }
.pp-cas-avatar--c { background: linear-gradient(135deg, #B5DEC1, #4D9D6A); }
.pp-cas-feed-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-text);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pp-cas-feed-name span {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--c-muted);
}
.pp-cas-feed-time {
  font-size: 10px;
  color: var(--c-muted);
  font-weight: 600;
  letter-spacing: .02em;
}
.pp-cas-feed-row--ok .pp-cas-feed-time {
  color: #207a3c;
}

/* ─── MOCK 1 · Suscripción / Tickets ──────── */
.pp-cas-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #F2F1F8;
  border-radius: 999px;
  padding: 3px;
  margin-bottom: 12px;
  font-size: 10px;
  font-weight: 600;
}
.pp-cas-tab {
  text-align: center;
  padding: 7px 0;
  border-radius: 999px;
  color: var(--c-muted);
  transition: background .2s ease, color .2s ease;
}
.pp-cas-tab.is-active {
  background: #fff;
  color: var(--c-deep);
  box-shadow: 0 2px 6px rgba(74,60,174,.10);
}
.pp-cas-cal {
  background: #fff;
  border: 1px solid rgba(155,142,240,.16);
  border-radius: 14px;
  padding: 12px;
}
.pp-cas-cal-month {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-text);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 8px;
}
.pp-cas-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.pp-cas-cal-h {
  font-size: 8px;
  color: var(--c-muted);
  text-align: center;
  font-weight: 700;
  padding: 4px 0;
  letter-spacing: .04em;
}
.pp-cas-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 500;
  color: var(--c-text);
  border-radius: 7px;
  position: relative;
}
.pp-cas-cal-day--out { color: var(--c-border); }
.pp-cas-cal-day--we { color: var(--c-border); }
.pp-cas-cal-day--sel {
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(74,60,174,.32);
}
.pp-cas-cal-day--today {
  border: 1.5px solid var(--c-main);
  font-weight: 700;
}

.pp-cas-confirm {
  margin-top: 10px;
  background: linear-gradient(180deg, #FBFAFE, #F2F1F8);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(155,142,240,.18);
}
.pp-cas-confirm-lab {
  font-size: 9.5px;
  color: var(--c-muted);
  letter-spacing: .03em;
}
.pp-cas-confirm-lab strong {
  display: block;
  font-size: 11.5px;
  color: var(--c-deep);
  font-weight: 700;
  letter-spacing: -.01em;
  margin-top: 1px;
}
.pp-cas-confirm-btn {
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  padding: 6px 10px;
  border-radius: 999px;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ─── MOCK 2 · Conciliación de transferencia ─── */
.pp-cas-conc {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 18px;
  background: linear-gradient(180deg, #FBFAFE 0%, #F2F1F8 100%);
  border-radius: 18px;
  border: 1px solid rgba(155,142,240,.20);
  width: 100%;
}
.pp-cas-bank-msg {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(155,142,240,.18);
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  box-shadow: 0 4px 12px rgba(74,60,174,.06);
}
.pp-cas-bank-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2C3E66, #1B2746);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.pp-cas-bank-body {
  flex: 1;
  min-width: 0;
}
.pp-cas-bank-head {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--c-muted);
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 2px;
}
.pp-cas-bank-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.01em;
  margin-bottom: 2px;
}
.pp-cas-bank-detail {
  font-size: 10.5px;
  color: var(--c-muted);
  line-height: 1.4;
}
.pp-cas-bank-detail strong { color: var(--c-text); font-weight: 600; }

.pp-cas-conc-arrow {
  align-self: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 12px 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-main);
}
.pp-cas-conc-arrow-line {
  width: 1.5px; height: 18px;
  background: linear-gradient(180deg, var(--c-mid), var(--c-light));
  border-radius: 2px;
}
.pp-cas-conc-arrow svg { width: 14px; height: 14px; color: var(--c-mid); }

.pp-cas-assign {
  background: linear-gradient(135deg, #F6F4FE 0%, #fff 100%);
  border: 1px solid rgba(155,142,240,.36);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(74,60,174,.10);
}
.pp-cas-assign-check {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3ab263, #207a3c);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(32,122,60,.30);
}
.pp-cas-assign-check svg { width: 14px; height: 14px; }
.pp-cas-assign-body {
  flex: 1;
  min-width: 0;
}
.pp-cas-assign-tag {
  font-size: 8.5px;
  font-weight: 700;
  color: #207a3c;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pp-cas-assign-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.01em;
  margin-top: 2px;
}
.pp-cas-assign-meta {
  font-size: 10px;
  color: var(--c-muted);
  margin-top: 1px;
}
.pp-cas-assign-amt {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-deep);
  letter-spacing: -.01em;
}

/* ─── MOCK 3 · Validación en comedor + push ─── */
.pp-cas-valid {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pp-cas-terminal {
  background: linear-gradient(135deg, #1F1942 0%, #2D2560 100%);
  border-radius: 20px;
  padding: 24px 20px;
  width: 100%;
  max-width: 280px;
  text-align: center;
  color: #fff;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 16px 36px rgba(45,37,96,.30);
}
.pp-cas-term-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-light);
  background: rgba(155,142,240,.15);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.pp-cas-term-check {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3ab263, #207a3c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  box-shadow:
    0 0 0 6px rgba(58,178,99,.15),
    0 0 0 12px rgba(58,178,99,.06),
    0 8px 20px rgba(32,122,60,.40);
  animation: pp-cas-check-pulse 2.4s ease-in-out infinite;
}
.pp-cas-term-check svg { width: 28px; height: 28px; color: #fff; }
@keyframes pp-cas-check-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(58,178,99,.15), 0 0 0 12px rgba(58,178,99,.06), 0 8px 20px rgba(32,122,60,.40); }
  50% { box-shadow: 0 0 0 10px rgba(58,178,99,.20), 0 0 0 18px rgba(58,178,99,.08), 0 8px 24px rgba(32,122,60,.50); }
}
.pp-cas-term-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.pp-cas-term-grade {
  font-size: 11px;
  color: var(--c-light);
  letter-spacing: .04em;
  margin-bottom: 16px;
}
.pp-cas-term-stat {
  font-size: 10px;
  color: rgba(255,255,255,.65);
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 12px;
}
.pp-cas-term-stat strong { color: #fff; font-weight: 600; }

.pp-cas-push {
  position: absolute;
  bottom: 18px;
  right: 14px;
  width: 86%;
  max-width: 240px;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(14px);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  border: 1px solid rgba(155,142,240,.20);
  box-shadow:
    0 8px 24px rgba(45,37,96,.20),
    0 2px 6px rgba(45,37,96,.08);
  transform: translateY(0);
  animation: pp-cas-push-in 4.5s ease-in-out infinite;
}
@keyframes pp-cas-push-in {
  0%, 5% { transform: translateY(10px); opacity: 0; }
  15%, 90% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
.pp-cas-push-icon {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
}
.pp-cas-push-body { flex: 1; min-width: 0; }
.pp-cas-push-head {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  color: var(--c-muted);
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 1px;
}
.pp-cas-push-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.01em;
}
.pp-cas-push-text {
  font-size: 10px;
  color: var(--c-muted);
  margin-top: 2px;
  line-height: 1.4;
}
.pp-cas-push-text strong { color: var(--c-deep); font-weight: 700; }

/* Hero mock alt — operator panel inside hero container */
.pp-hero-mock.is-mock-real .pp-cas-hero {
  background: #fff;
  border: 1px solid rgba(155,142,240,.20);
  border-radius: 22px;
  padding: 22px 22px 20px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 24px 60px rgba(45,37,96,.18),
    0 4px 12px rgba(74,60,174,.08);
}

@media (max-width: 720px) {
  .pp-cas-terminal { max-width: 100%; }
  .pp-cas-push { right: 8px; bottom: 10px; }
}

/* ═══════════════════════════════════════════════
   CASINO MOCKS V2 · más densidad y realismo
   ═══════════════════════════════════════════════ */

/* ─── Hero mock v2 — operator dashboard ──────
   Sombras pesadas se mueven al wrapper .pp-hero-mock.is-mock-real
   vía filter:drop-shadow. Aquí solo dejamos ring inset + leve borde. */
.pp-cas-hero-v2 {
  background: #fff;
  border: 1px solid rgba(155,142,240,.18);
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(155,142,240,.06);
  display: flex;
  flex-direction: column;
}

.pp-hero-mock.is-mock-real .pp-cas-hero-v2 {
  background: #fff;
  width: 100%;
  /* Sombra flotante copiada del módulo Comedor del home (.mock-window).
     La inclinación 3D + scale + nudge horizontal se aplican SÓLO en el
     layout 2-columnas (≥1025px) — ver media query más arriba —; en mobile
     el card queda plano para que entre sin recortarse. */
  transform-origin: center center;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 0 0 1px rgba(155,142,240,0.18),
    0 30px 60px rgba(74,60,174,.28),
    0 18px 42px rgba(74,60,174,.18),
    0 6px 16px rgba(74,60,174,.12);
  backface-visibility: hidden;
  will-change: transform;
}

/* Aire interno del hero mock — contenido separado de los bordes
   redondeados, KPIs agrupados al centro y pills con buenos márgenes. */
.pp-cas-hero-v2 .pp-cas-chrome  { padding: 11px 18px; }
.pp-cas-hero-v2 .pp-cas-feed-v2 { padding: 14px 18px 18px; }

/* KPIs · cluster centrado con divisores sutiles (más juntos y al centro). */
.pp-cas-hero-v2 .pp-cas-kpis-v2 {
  display: flex;
  justify-content: center;
  gap: 0;
  background: transparent;
}
.pp-cas-hero-v2 .pp-cas-kpi-v2 {
  flex: 0 0 auto;
  padding: 12px 40px;
}
.pp-cas-hero-v2 .pp-cas-kpi-v2 + .pp-cas-kpi-v2 {
  border-left: 1px solid rgba(155,142,240,.16);
}

/* Pills de pago · márgenes internos generosos + más separación entre filas. */
.pp-cas-hero-v2 .pp-cas-panel-v2-body { padding: 12px; gap: 8px; }
.pp-cas-hero-v2 .pp-cas-tx { padding: 14px 16px; gap: 13px; }
.pp-cas-hero-v2 .pp-cas-match-chips { margin-top: 10px; padding-top: 10px; }

/* Window chrome with tabs */
.pp-cas-chrome {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(155,142,240,.12);
  background: linear-gradient(180deg, #FBFAFE, #fff);
  gap: 8px;
}
.pp-cas-chrome-dots {
  display: flex;
  gap: 5px;
  margin-right: 8px;
}
.pp-cas-chrome-dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #E5E0F4;
}
.pp-cas-chrome-dots span:nth-child(1) { background: #F4B5B5; }
.pp-cas-chrome-dots span:nth-child(2) { background: #F0DFA1; }
.pp-cas-chrome-dots span:nth-child(3) { background: #B5DEC1; }

.pp-cas-tabs-line {
  display: flex;
  gap: 4px;
  flex: 1;
}
.pp-cas-tabs-line span {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--c-muted);
  padding: 5px 11px;
  border-radius: 7px;
  letter-spacing: .02em;
}
.pp-cas-tabs-line span.is-active {
  background: var(--c-xlight);
  color: var(--c-deep);
}

.pp-cas-chrome-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 700;
  color: #207a3c;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pp-cas-chrome-live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #3ab263;
  box-shadow: 0 0 0 0 rgba(58,178,99,.55);
  animation: pp-pulse-dot 1.6s ease-in-out infinite;
}

/* Hero stat panel */
.pp-cas-hero-main {
  padding: 16px 18px 14px;
}
.pp-cas-hero-stat-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pp-cas-hero-stat-v2 {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pp-cas-hero-stat-lab2 {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 4px;
}
.pp-cas-hero-stat-num {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--c-deep), var(--c-mid));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 2px;
}
.pp-cas-hero-stat-sub {
  font-size: 11px;
  color: var(--c-muted);
  display: flex;
  gap: 10px;
  align-items: center;
}
.pp-cas-hero-stat-sub strong { color: var(--c-text); font-weight: 600; }
.pp-cas-hero-trend-v2 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 700;
  color: #207a3c;
  background: rgba(58,178,99,.10);
  padding: 4px 8px;
  border-radius: 999px;
  margin-left: auto;
  align-self: flex-start;
}
.pp-cas-trend-vs {
  font-size: 10px;
  color: var(--c-muted);
  margin-left: 8px;
  font-weight: 500;
}

/* Demand bars · próximos 5 días */
.pp-cas-bars {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(155,142,240,.20);
}
.pp-cas-bars-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 8px;
}
.pp-cas-bars-head em {
  font-style: normal;
  font-size: 9.5px;
  color: var(--c-main);
  background: var(--c-xlight);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .04em;
  font-weight: 600;
}
.pp-cas-bars-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  align-items: flex-end;
}
.pp-cas-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.pp-cas-bar-track {
  width: 100%;
  height: 38px;
  background: rgba(155,142,240,.08);
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
}
.pp-cas-bar-fill {
  width: 100%;
  background: linear-gradient(180deg, #9B8EF0 0%, var(--c-main) 100%);
  border-radius: 5px;
  box-shadow: 0 -2px 8px rgba(74,60,174,.20);
  transition: height .8s cubic-bezier(.4,0,.2,1);
}
.pp-cas-bar-col--peak .pp-cas-bar-fill {
  background: linear-gradient(180deg, #C084FC 0%, #7C3AED 100%);
  box-shadow: 0 -2px 12px rgba(124,58,237,.32);
}
.pp-cas-bar-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.01em;
}
.pp-cas-bar-col--peak .pp-cas-bar-num { color: var(--c-deep); }
.pp-cas-bar-day {
  font-size: 9px;
  font-weight: 600;
  color: var(--c-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* KPIs v2 with progress bars */
.pp-cas-kpis-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(155,142,240,.16);
  border-top: 1px solid rgba(155,142,240,.16);
  border-bottom: 1px solid rgba(155,142,240,.16);
}
.pp-cas-kpi-v2 {
  background: #fff;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pp-cas-kpi-v2-lab {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.pp-cas-kpi-v2-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pp-cas-kpi-v2-num {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-deep);
  letter-spacing: -.02em;
  line-height: 1;
}
.pp-cas-kpi-v2-of {
  font-size: 11px;
  color: var(--c-muted);
  font-weight: 500;
}
.pp-cas-kpi-v2-bar {
  height: 4px;
  background: rgba(155,142,240,.14);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.pp-cas-kpi-v2-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-mid), var(--c-main));
}
/* Delta vs. período anterior: da el detalle de dashboard real en uso que
   antes faltaba (tira de cifras sin contexto de tendencia). */
.pp-cas-kpi-v2-delta {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 5px 2px 4px;
  border-radius: 999px;
  line-height: 1;
}
.pp-cas-kpi-v2-delta svg { width: 8px; height: 8px; flex-shrink: 0; }
.pp-cas-kpi-v2-delta--up { color: #207a3c; background: rgba(58,178,99,.14); }
/* Punto "en vivo" junto al tab activo (Hoy): refuerza que son datos del día. */
.pp-cas-tab-live-dot {
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: #3ab263;
  box-shadow: 0 0 0 2px rgba(58,178,99,.18);
}
.pp-cas-kpi-v2--ok .pp-cas-kpi-v2-num { color: #207a3c; }
.pp-cas-kpi-v2--ok .pp-cas-kpi-v2-bar-fill {
  background: linear-gradient(90deg, #3ab263, #207a3c);
}

/* Feed v2 */
.pp-cas-feed-v2 {
  padding: 10px 18px 14px;
}
.pp-cas-feed-v2-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.pp-cas-feed-v2-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.pp-cas-feed-v2-link {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--c-main);
  letter-spacing: 0;
}
.pp-cas-feed-v2-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pp-cas-feed-v2-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(74,60,174,.05);
}
.pp-cas-feed-v2-row:last-child { border-bottom: 0; }
.pp-cas-feed-v2-row--new {
  background: linear-gradient(90deg, rgba(155,142,240,.08), transparent);
  margin: 0 -10px;
  padding: 5px 10px;
  border-radius: 8px;
  border-bottom: 0;
}
.pp-cas-feed-v2-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  flex-shrink: 0;
}
.pp-cas-feed-v2-avatar--b { background: linear-gradient(135deg, #F4B5B5, #C76A6A); }
.pp-cas-feed-v2-avatar--c { background: linear-gradient(135deg, #B5DEC1, #4D9D6A); }
.pp-cas-feed-v2-avatar--d { background: linear-gradient(135deg, #FFD9A8, #E89A4C); }
.pp-cas-feed-v2-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--c-text);
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 1px;
  letter-spacing: -.01em;
}
.pp-cas-feed-v2-name span {
  font-size: 10px;
  font-weight: 500;
  color: var(--c-muted);
  letter-spacing: 0;
}
.pp-cas-feed-v2-pill {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.pp-cas-feed-v2-pill--ok { color: #207a3c; background: rgba(58,178,99,.10); }
.pp-cas-feed-v2-pill--time { color: var(--c-muted); background: #F7F5FE; }
.pp-cas-feed-v2-row--new .pp-cas-feed-v2-pill--time {
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  color: #fff;
}

/* ─── PHONE v2 — iOS-style chrome ──────────── */
.pp-ph-v2 {
  position: relative;
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  aspect-ratio: 9 / 18.5;
  background: linear-gradient(135deg, #2B2354 0%, #1a1530 100%);
  border-radius: 34px;
  padding: 5px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 1px 0 rgba(255,255,255,.04) inset 0 -1px 0,
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 24px 56px rgba(45,37,96,.22),
    0 6px 14px rgba(74,60,174,.12);
}
.pp-ph-v2-screen {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 32px;
  position: relative;
  overflow: hidden;
}
/* iOS notch */
.pp-ph-v2-screen::before {
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 86px; height: 22px;
  background: #1a1530;
  border-radius: 999px;
  z-index: 4;
}

.pp-ph-v2-status {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 22px 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-deep);
  letter-spacing: -.01em;
  position: relative;
  z-index: 3;
}
.pp-ph-v2-status-right {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pp-ph-v2-status-right svg { width: 14px; height: 12px; color: var(--c-text); }

.pp-ph-v2-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: calc(100% - 32px);
  overflow: hidden;
}

.pp-ph-v2-appbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.pp-ph-v2-back {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-xlight);
  color: var(--c-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.pp-ph-v2-appbar-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.01em;
}
.pp-ph-v2-appbar-sub {
  font-size: 9.5px;
  color: var(--c-muted);
  margin-top: 1px;
}
.pp-ph-v2-appbar-spacer { flex: 1; }
.pp-ph-v2-avatar-circle {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

/* Plan actual card */
.pp-ph-v2-plan {
  background: linear-gradient(135deg, #2D2560 0%, #4A3CAE 100%);
  border-radius: 12px;
  padding: 10px 12px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.pp-ph-v2-plan::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(155,142,240,.4) 0%, transparent 70%);
}
.pp-ph-v2-plan-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-light);
  margin-bottom: 5px;
}
.pp-ph-v2-plan-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.pp-ph-v2-plan-stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 4px;
}
.pp-ph-v2-plan-num {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}
.pp-ph-v2-plan-of {
  font-size: 10px;
  color: rgba(255,255,255,.7);
}
.pp-ph-v2-plan-bar {
  height: 3px;
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 5px;
  position: relative;
  z-index: 1;
}
.pp-ph-v2-plan-bar-fill {
  height: 100%;
  width: 65%;
  background: linear-gradient(90deg, #C084FC, #fff);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(192,132,252,.6);
}

.pp-ph-v2-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #F2F1F8;
  border-radius: 999px;
  padding: 3px;
  font-size: 10px;
  font-weight: 600;
}
.pp-ph-v2-tab {
  text-align: center;
  padding: 7px 0;
  border-radius: 999px;
  color: var(--c-muted);
  transition: background .2s ease, color .2s ease;
}
.pp-ph-v2-tab.is-active {
  background: #fff;
  color: var(--c-deep);
  box-shadow: 0 2px 6px rgba(74,60,174,.10);
}

/* Calendar v2 */
.pp-ph-v2-cal {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(155,142,240,.12);
  border-radius: 10px;
  padding: 7px 8px;
  min-height: 0;
}
.pp-ph-v2-cal-month {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-text);
  text-align: center;
  margin-bottom: 8px;
}
.pp-ph-v2-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  flex: 1;
}
.pp-ph-v2-cal-h {
  font-size: 7.5px;
  color: var(--c-muted);
  text-align: center;
  font-weight: 700;
  padding: 3px 0;
  letter-spacing: .04em;
}
.pp-ph-v2-cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 500;
  color: var(--c-text);
  border-radius: 5px;
  min-height: 18px;
  position: relative;
}
.pp-ph-v2-cal-day--out { color: var(--c-border); }
.pp-ph-v2-cal-day--we { color: var(--c-border); }
.pp-ph-v2-cal-day--sel {
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(74,60,174,.30);
}
.pp-ph-v2-cal-day--today {
  border: 1.5px solid var(--c-main);
  font-weight: 700;
}

.pp-ph-v2-confirm {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #FBFAFE, #fff);
  border: 1px solid rgba(155,142,240,.18);
  border-radius: 12px;
  padding: 8px 10px;
}
.pp-ph-v2-confirm-info { flex: 1; }
.pp-ph-v2-confirm-lab {
  font-size: 9px;
  color: var(--c-muted);
  font-weight: 500;
}
.pp-ph-v2-confirm-amt {
  font-size: 13px;
  color: var(--c-deep);
  font-weight: 700;
  letter-spacing: -.01em;
  margin-top: 1px;
}
.pp-ph-v2-confirm-btn {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(74,60,174,.30);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ─── Conciliación v2 — multi-row panel ────── */
.pp-cas-panel-v2 {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(155,142,240,.18);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 12px 32px rgba(45,37,96,.10);
}
.pp-cas-panel-v2-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(155,142,240,.12);
  background: linear-gradient(180deg, #FBFAFE, #fff);
}
.pp-cas-panel-v2-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.01em;
}
.pp-cas-panel-v2-sub {
  font-size: 10px;
  color: var(--c-muted);
  margin-top: 1px;
}
.pp-cas-panel-v2-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  color: #207a3c;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pp-cas-panel-v2-live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #3ab263;
  box-shadow: 0 0 0 0 rgba(58,178,99,.55);
  animation: pp-pulse-dot 1.6s ease-in-out infinite;
}
.pp-cas-panel-v2-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pp-cas-tx {
  background: #fff;
  border: 1px solid rgba(155,142,240,.12);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pp-cas-tx--new {
  background: linear-gradient(135deg, #F6F4FE 0%, #fff 100%);
  border-color: rgba(155,142,240,.36);
  box-shadow: 0 4px 14px rgba(74,60,174,.10);
  position: relative;
}
.pp-cas-tx--new::before {
  content: 'NUEVO';
  position: absolute;
  top: -6px; left: 14px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
  color: #fff;
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  padding: 3px 7px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(74,60,174,.30);
}
.pp-cas-tx-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2C3E66, #1B2746);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.pp-cas-tx-icon--wp { background: linear-gradient(135deg, #6B5CE7, #4A3CAE); font-size: 7.5px; letter-spacing: -.01em; padding: 0 3px; }
.pp-cas-tx-body { flex: 1; min-width: 0; }
.pp-cas-tx-row1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1px;
}
.pp-cas-tx-amt {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-deep);
  letter-spacing: -.01em;
}
.pp-cas-tx-time {
  font-size: 9.5px;
  color: var(--c-muted);
  font-weight: 600;
  letter-spacing: .02em;
}
.pp-cas-tx-detail {
  font-size: 10.5px;
  color: var(--c-muted);
  line-height: 1.4;
}
.pp-cas-tx-detail strong { color: var(--c-text); font-weight: 600; }
.pp-cas-tx-status {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #207a3c;
  font-weight: 600;
}
.pp-cas-tx-status-icon {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3ab263, #207a3c);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pp-cas-tx-status-icon svg { width: 9px; height: 9px; }

.pp-cas-match-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(155,142,240,.20);
}
.pp-cas-match-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 600;
  color: #207a3c;
  background: rgba(58,178,99,.10);
  padding: 3px 7px;
  border-radius: 999px;
}
.pp-cas-match-chip svg { width: 8px; height: 8px; }

/* ── Feed de conciliación EN VIVO (hero) ───────────────────────────
   Réplica del lenguaje de movimiento de los mockups del home: la fila
   nueva entra con slide-in y los KPIs (consumos, recaudado) laten con
   un flash al actualizarse. JS: comedorHeroFeed() en main.js. */
@keyframes pp-cas-tx-in {
  0%   { opacity: 0; transform: translateY(-10px) scale(.985); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pp-tick {
  0%   { transform: scale(1); }
  32%  { transform: scale(1.13); }
  100% { transform: scale(1); }
}
.pp-tick {
  animation: pp-tick .55s cubic-bezier(.22,.61,.36,1);
  transform-origin: left center;
}
@media (prefers-reduced-motion: reduce) {
  .pp-cas-tx, .pp-tick { animation: none !important; }
}

/* ─── Validación v2 — terminal + push stacked vertical ── */
.pp-cas-valid-v2 {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.pp-cas-terminal-v2 {
  background: linear-gradient(135deg, #1a1442 0%, #2D2560 60%, #3B2E8E 100%);
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  position: relative;
  color: #fff;
  width: 100%;
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 0 0 1px rgba(155,142,240,.20) inset,
    0 16px 36px rgba(45,37,96,.30),
    0 4px 10px rgba(45,37,96,.16);
}
.pp-cas-terminal-v2::before {
  content: '';
  position: absolute;
  top: -30%; right: -20%;
  width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(155,142,240,.30) 0%, transparent 70%);
  pointer-events: none;
}
.pp-cas-term-v2-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
  z-index: 1;
}
.pp-cas-term-v2-bar-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pp-cas-term-v2-bar-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #3ab263;
  box-shadow: 0 0 0 0 rgba(58,178,99,.6);
  animation: pp-pulse-dot 1.6s ease-in-out infinite;
}
.pp-cas-term-v2-bar-time {
  font-size: 10px;
  color: rgba(255,255,255,.55);
  font-variant-numeric: tabular-nums;
}

.pp-cas-term-v2-main {
  padding: 20px 22px 18px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.pp-cas-fp {
  width: 64px; height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3ab263, #207a3c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow:
    0 0 0 5px rgba(58,178,99,.16),
    0 0 0 11px rgba(58,178,99,.08),
    0 10px 22px rgba(32,122,60,.40);
  animation: pp-cas-check-pulse 2.4s ease-in-out infinite;
}
.pp-cas-fp svg { width: 32px; height: 32px; color: #fff; }
.pp-cas-fp-orbit {
  position: absolute;
  inset: -8px;
  border: 1.5px dashed rgba(58,178,99,.30);
  border-radius: 50%;
  animation: pp-cas-orbit-rot 8s linear infinite;
}
@keyframes pp-cas-orbit-rot {
  to { transform: rotate(360deg); }
}

.pp-cas-term-v2-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 3px;
}
.pp-cas-term-v2-grade {
  font-size: 10.5px;
  color: rgba(155,142,240,.95);
  letter-spacing: .06em;
  font-weight: 600;
  margin-bottom: 14px;
}
.pp-cas-term-v2-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 12px;
  margin: 0 -8px;
}
.pp-cas-term-v2-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.pp-cas-term-v2-meta-item + .pp-cas-term-v2-meta-item {
  border-left: 1px solid rgba(255,255,255,.10);
}
.pp-cas-term-v2-meta-lab {
  font-size: 8.5px;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pp-cas-term-v2-meta-val {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}
.pp-cas-term-v2-meta-val em {
  font-style: normal;
  color: var(--c-light);
}

/* Connector between terminal and push */
.pp-cas-valid-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 10px 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-main);
}
.pp-cas-valid-arrow-line {
  width: 1.5px; height: 14px;
  background: linear-gradient(180deg, var(--c-mid), var(--c-light));
  border-radius: 2px;
}
.pp-cas-valid-arrow svg { width: 12px; height: 12px; color: var(--c-mid); }

/* iOS-style push notification (single, clean, in-flow) */
.pp-cas-push-v2 {
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 14px;
  padding: 11px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid rgba(155,142,240,.22);
  box-shadow:
    0 8px 22px rgba(45,37,96,.16),
    0 2px 6px rgba(45,37,96,.08),
    0 1px 0 rgba(255,255,255,.95) inset;
  width: 100%;
}
.pp-cas-push-v2-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.04em;
  box-shadow: 0 2px 6px rgba(74,60,174,.30);
}
.pp-cas-push-v2-body { flex: 1; min-width: 0; }
.pp-cas-push-v2-head {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--c-muted);
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.pp-cas-push-v2-head strong {
  color: var(--c-deep);
  font-weight: 700;
  letter-spacing: 0;
}
.pp-cas-push-v2-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.01em;
}
.pp-cas-push-v2-text {
  font-size: 10px;
  color: var(--c-muted);
  margin-top: 1px;
  line-height: 1.4;
}
.pp-cas-push-v2-text strong { color: var(--c-deep); font-weight: 700; }

/* ══════════════════════════════════════════════════
   CPA · mockup hero (panel financiero) + sección rendición
   Todo scopeado bajo .pp-shell--cpa para no tocar otras páginas.
   Clases pp-cpa-* propias (el JS de Comedor captura pp-cas-*).
   ══════════════════════════════════════════════════ */

/* ── Layout hero · centrado desktop + inclinación 3D (réplica de la
   regla :has(.pp-cas-hero-v2) del hero de Comedor). El .hl aquí es una
   línea larga, así que se deja envolver con normalidad (sin nowrap). ── */
@media (min-width: 1025px) {
  .pp-shell--cpa .pp-hero:has(.pp-cpa-hero) {
    margin-top: -24px;
    min-height: calc(100svh - 72px);
    display: flex;
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 0;
  }
  .pp-shell--cpa .pp-hero:has(.pp-cpa-hero) > .container {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .pp-shell--cpa .pp-hero:has(.pp-cpa-hero) .pp-back {
    position: absolute;
    top: 28px;
    left: 24px;
    margin: 0;
  }
  .pp-shell--cpa .pp-hero:has(.pp-cpa-hero) .pp-hero-cta {
    margin-bottom: 0;
  }
  .pp-shell--cpa .pp-hero:has(.pp-cpa-hero) .pp-hero-grid {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
  }
}

/* ── Contenedor del mockup · celular (adelante, izquierda) + dashboard
   (atrás, derecha), con la estética de los dispositivos de los mockups de
   módulos del home. El .pp-cpa-stage tiene tamaño de diseño fijo (540×440)
   y se escala con cqw para llenar la columna en cualquier ancho. ── */
.pp-shell--cpa .pp-cpa-hero {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  /* Caja más alta que el stage (540×440) SOLO para dejar aire arriba/abajo: el
     container-type recorta su desborde, y la sombra del mockup bleed ~32-38px
     fuera del stage. Como container-type usa solo el ancho (inline-size), subir
     el alto NO cambia la escala. */
  aspect-ratio: 540 / 520;
  container-type: inline-size;
}
.pp-shell--cpa .pp-cpa-stage {
  position: absolute;
  top: 40px; left: 0;
  width: 540px;
  height: 440px;
  transform: scale(calc(100cqw / 540px));
  transform-origin: top left;
}

/* ── DASHBOARD del tesorero (capa de atrás, derecha) · ventana del home ──
   padding-left grande = canal donde se superpone el celular, para que el
   contenido del dashboard no quede tapado. */
.pp-shell--cpa .pp-cpa-dash {
  position: absolute;
  top: 22px;
  right: 0;
  width: 372px;
  background: #fff;
  border: 1px solid #EDE9FB;
  border-radius: 16px;
  padding: 15px 18px 17px 78px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 28px 60px rgba(45,37,96,.22),
    0 6px 16px rgba(45,37,96,.10);
  transform: rotate(1.8deg);
  transform-origin: center center;
  z-index: 1;
}

/* Chrome de navegador · semáforo + url (igual que el dashboard del home) */
.pp-shell--cpa .pp-cpa-dash-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 9px;
  margin-bottom: 12px;
  border-bottom: 1px solid #F0EDFB;
}
.pp-shell--cpa .pp-cpa-dash-dots { display: flex; gap: 5px; flex-shrink: 0; }
.pp-shell--cpa .pp-cpa-dash-dots i { width: 8px; height: 8px; border-radius: 50%; }
.pp-shell--cpa .pp-cpa-dash-dots i:nth-child(1) { background: #FF5F57; }
.pp-shell--cpa .pp-cpa-dash-dots i:nth-child(2) { background: #FEBC2E; }
.pp-shell--cpa .pp-cpa-dash-dots i:nth-child(3) { background: #28C840; }
.pp-shell--cpa .pp-cpa-dash-url {
  flex: 1;
  background: #F2F1F8;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 8.5px;
  color: var(--c-muted);
  font-weight: 500;
  text-align: center;
  letter-spacing: .02em;
}

/* Header del dashboard */
.pp-shell--cpa .pp-cpa-dash-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.pp-shell--cpa .pp-cpa-dash-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.pp-shell--cpa .pp-cpa-dash-sub {
  font-size: 9px;
  color: var(--c-muted);
  margin-top: 2px;
}

/* "En vivo" · pill verde (estética del home) */
.pp-shell--cpa .pp-cpa-live {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  font-weight: 700;
  color: #22A459;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #E8F8EE;
  border: 1px solid #22A459;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.pp-shell--cpa .pp-cpa-live i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #22A459;
  animation: pp-pulse-dot 1.6s ease-in-out infinite;
}

/* Bloque de la meta */
.pp-shell--cpa .pp-cpa-goal { margin-bottom: 13px; }
.pp-shell--cpa .pp-cpa-goal-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 8px;
}
.pp-shell--cpa .pp-cpa-goal-amt {
  font-size: 24px;
  font-weight: 800;
  color: var(--c-main);
  letter-spacing: -.02em;
  line-height: 1;
}
.pp-shell--cpa .pp-cpa-goal-meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-muted);
}
.pp-shell--cpa .pp-cpa-goal-bar {
  height: 9px;
  background: #EEEBFA;
  border-radius: 999px;
  overflow: hidden;
}
.pp-shell--cpa .pp-cpa-goal-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-light), var(--c-mid));
  transition: width .6s ease;
}
.pp-shell--cpa .pp-cpa-goal-sub {
  margin-top: 7px;
  font-size: 10px;
  color: var(--c-muted);
}
.pp-shell--cpa .pp-cpa-goal-sub span { font-weight: 700; color: var(--c-deep); }

/* Feed de aportes */
.pp-shell--cpa .pp-cpa-dash-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #F0EDFB;
}
.pp-shell--cpa .pp-cpa-feed-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.pp-shell--cpa .pp-cpa-feed-ava {
  width: 26px; height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--c-main);
  background: rgba(107,92,231,.12);
  letter-spacing: .02em;
}
.pp-shell--cpa .pp-cpa-feed-txt {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--c-muted);
}
.pp-shell--cpa .pp-cpa-feed-txt strong { color: var(--c-text); font-weight: 600; }
.pp-shell--cpa .pp-cpa-feed-amt {
  font-size: 11.5px;
  font-weight: 700;
  color: #207a3c;
  letter-spacing: -.01em;
}
/* Entrada por deslizamiento (sin tocar opacity) para que las filas queden
   SIEMPRE visibles aunque el perf-pause congele la animación fuera de vista. */
.pp-shell--cpa .pp-cpa-feed-row--new {
  animation: cpaFeedIn .45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cpaFeedIn {
  from { transform: translateY(-7px); }
  to   { transform: translateY(0); }
}

/* ── TELÉFONO del apoderado (capa de adelante, izquierda) · marco oscuro
   + notch, igual que el celular de los mockups del home. ── */
.pp-shell--cpa .pp-cpa-phone {
  position: absolute;
  left: 12px;
  bottom: 6px;
  width: 196px;
  height: 414px;
  background: #fff;
  border-radius: 32px;
  box-shadow:
    0 0 0 4px rgba(45,37,96,.92),
    0 20px 38px rgba(45,37,96,.20),
    0 8px 16px rgba(45,37,96,.12);
  transform: rotate(-2deg);
  transform-origin: center center;
  z-index: 2;
  overflow: hidden;
}
.pp-shell--cpa .pp-cpa-phone-notch {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 78px; height: 18px;
  background: rgba(45,37,96,.92);
  border-radius: 0 0 14px 14px;
  z-index: 5;
}
.pp-shell--cpa .pp-cpa-phone-screen {
  position: absolute;
  inset: 5px;
  border-radius: 27px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 110% 55% at 50% 0%, rgba(155,142,240,.09), transparent 62%),
    linear-gradient(180deg, #FBFAFE 0%, #FEFEFF 55%);
  padding: 26px 13px 12px;
  display: flex;
  flex-direction: column;
}

/* Barra de estado del teléfono */
.pp-shell--cpa .pp-cpa-phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  margin-bottom: 13px;
}
.pp-shell--cpa .pp-cpa-phone-clock {
  font-size: 9px;
  font-weight: 700;
  color: var(--c-deep);
}
.pp-shell--cpa .pp-cpa-phone-bits { display: inline-flex; align-items: center; gap: 3px; }
.pp-shell--cpa .pp-cpa-phone-bits i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(74,60,174,.40);
}

/* Pantalla app del apoderado */
.pp-shell--cpa .pp-cpa-app {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pp-shell--cpa .pp-cpa-app-greet {
  font-size: 9.5px;
  color: var(--c-muted);
  font-weight: 500;
  margin: 2px 2px 2px;
}
.pp-shell--cpa .pp-cpa-app-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0 2px 13px;
}

/* Tarjeta de aporte · gradiente morado (sub-card del home) */
.pp-shell--cpa .pp-cpa-pay-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, var(--c-main) 0%, var(--c-mid) 100%);
  border-radius: 14px;
  padding: 13px 14px;
  color: #fff;
  box-shadow: 0 8px 20px rgba(74,60,174,.28);
  margin-bottom: 13px;
}
.pp-shell--cpa .pp-cpa-pay-card::after {
  content: "";
  position: absolute;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  top: -28px; right: -26px;
}
.pp-shell--cpa .pp-cpa-pay-label {
  display: block;
  font-size: 8px;
  font-weight: 600;
  opacity: .85;
  letter-spacing: .4px;
  text-transform: uppercase;
  position: relative; z-index: 1;
}
.pp-shell--cpa .pp-cpa-pay-amt {
  display: block;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.5px;
  margin-top: 5px;
  position: relative; z-index: 1;
}
.pp-shell--cpa .pp-cpa-pay-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: 8px;
  opacity: .85;
  position: relative; z-index: 1;
}

/* Botón pagar (lo anima el JS: → "Pagado") */
.pp-shell--cpa .pp-cpa-pay-btn {
  width: 100%;
  margin-top: auto;
  border: 0;
  border-radius: 11px;
  padding: 11px 12px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #fff;
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  box-shadow: 0 6px 16px rgba(107,92,231,.40);
  cursor: default;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .3s ease, box-shadow .3s ease, color .3s ease;
}
.pp-shell--cpa .pp-cpa-pay-btn.is-paid {
  background: linear-gradient(135deg, #2BB56B, #1F9152);
  color: #fff;
  box-shadow: 0 6px 16px rgba(31,145,82,.32);
}
.pp-shell--cpa .pp-cpa-pay-btn.is-paid::before {
  content: "";
  width: 13px; height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Indicador "home" del teléfono */
.pp-shell--cpa .pp-cpa-phone-home {
  margin: 11px auto 0;
  width: 80px;
  height: 4px;
  border-radius: 999px;
  background: rgba(45,37,96,.22);
}

/* ── Toast de confirmación dentro del teléfono (oculto por defecto) ── */
.pp-shell--cpa .pp-cpa-app-confirm {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(45,37,96,.18), 0 2px 6px rgba(45,37,96,.10);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.pp-shell--cpa .pp-cpa-app-confirm.is-show {
  opacity: 1;
  transform: none;
}
.pp-shell--cpa .pp-cpa-confirm-ic {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #2FB36B;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.pp-shell--cpa .pp-cpa-confirm-tx {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.2;
}
.pp-shell--cpa .pp-cpa-confirm-tx small {
  display: block;
  font-size: 8.5px;
  font-weight: 500;
  color: var(--c-muted);
  margin-top: 1px;
}

/* ── Banner de cierre en el dashboard (oculto por defecto) ── */
.pp-shell--cpa .pp-cpa-dash-done {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #E8F8EE;
  border: 1px solid #2FB36B;
  color: #1F9152;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(31,145,82,.22);
  opacity: 0;
  transform: scale(.92) translateY(-4px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.pp-shell--cpa .pp-cpa-dash-done.is-show {
  opacity: 1;
  transform: none;
}
.pp-shell--cpa .pp-cpa-done-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #2FB36B;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

/* ── Teléfono · pantallas que navegan (home → detalle → procesando →
   confirmación). Ocupan el área de contenido interna sin tocar la caja
   externa del teléfono. ── */
.pp-shell--cpa .pp-cpa-screens { position: relative; flex: 1 1 auto; min-height: 215px; }
.pp-shell--cpa .pp-cpa-screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
.pp-shell--cpa .pp-cpa-screen.is-active { opacity: 1; transform: none; pointer-events: auto; }
.pp-shell--cpa .pp-cpa-screen--center { align-items: center; justify-content: center; text-align: center; gap: 12px; }

/* Home · lista de colectas tipo app */
.pp-shell--cpa .pp-cpa-home-label {
  font-size: 8px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--c-muted); margin: 2px 2px 0;
}
.pp-shell--cpa .pp-cpa-home-item {
  width: 100%; text-align: left; font-family: inherit; cursor: default;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 13px;
  background: #fff; border: 1px solid rgba(107,92,231,.16);
  box-shadow: 0 4px 12px rgba(74,60,174,.07);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pp-shell--cpa .pp-cpa-home-item-ic {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(107,92,231,.12); color: var(--c-main);
}
.pp-shell--cpa .pp-cpa-home-item-ic svg { width: 17px; height: 17px; }
.pp-shell--cpa .pp-cpa-home-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-shell--cpa .pp-cpa-home-item-txt strong { font-size: 11px; font-weight: 700; color: var(--c-text); letter-spacing: -.01em; }
.pp-shell--cpa .pp-cpa-home-item-state { font-size: 9px; color: var(--c-muted); font-weight: 600; transition: color .3s ease; }
.pp-shell--cpa .pp-cpa-home-item-arrow { flex-shrink: 0; color: rgba(74,60,174,.4); display: inline-flex; }
.pp-shell--cpa .pp-cpa-home-item-arrow svg { width: 12px; height: 12px; }
/* Estado "al día" (verde) */
.pp-shell--cpa .pp-cpa-home-item-ic--ok { background: rgba(47,179,107,.14); color: #1F9152; }
.pp-shell--cpa .pp-cpa-home-item--ok .pp-cpa-home-item-state { color: #1F9152; }
/* Pulso "toca aquí" antes de navegar al detalle */
.pp-shell--cpa .pp-cpa-home-item.is-tap {
  border-color: rgba(107,92,231,.45);
  animation: cpaTap 1.1s ease-in-out infinite;
}
@keyframes cpaTap {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(107,92,231,.30), 0 6px 16px rgba(74,60,174,.12); }
  50%     { transform: scale(1.02); box-shadow: 0 0 0 5px rgba(107,92,231,0), 0 8px 20px rgba(74,60,174,.16); }
}
/* Colecta pagada → queda "al día" (verde): tinte suave, ícono verde con
   badge de check en la esquina y estado en verde. Sin píldora que choque
   con el título. */
.pp-shell--cpa .pp-cpa-home-item.is-done {
  border-color: rgba(47,179,107,.40);
  background: linear-gradient(135deg, rgba(47,179,107,.07), rgba(47,179,107,.02));
}
.pp-shell--cpa .pp-cpa-home-item.is-done .pp-cpa-home-item-ic {
  background: rgba(47,179,107,.14); color: #1F9152;
}
/* El ícono alterna cámara (pendiente) → check (pagada) */
.pp-shell--cpa .pp-cpa-ic-done { display: none; }
.pp-shell--cpa .pp-cpa-home-item.is-done .pp-cpa-ic-pending { display: none; }
.pp-shell--cpa .pp-cpa-home-item.is-done .pp-cpa-ic-done { display: block; }
.pp-shell--cpa .pp-cpa-home-item.is-done .pp-cpa-home-item-state { color: #1F9152; font-weight: 600; }
.pp-shell--cpa .pp-cpa-home-item.is-done .pp-cpa-home-item-arrow { display: none; }

/* Acción "Ver comprobante" · botón fantasma morado. Solo aparece cuando la
   colecta queda pagada (ligado a #cpaHomeColecta.is-done). */
.pp-shell--cpa .pp-cpa-home-action {
  display: none;
  width: 100%; font-family: inherit; cursor: default; text-align: left;
  align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 13px;
  background: rgba(107,92,231,.07);
  border: 1px solid rgba(107,92,231,.28);
  color: var(--c-main);
  font-size: 11px; font-weight: 700; letter-spacing: -.005em;
}
.pp-shell--cpa #cpaHomeColecta.is-done ~ #cpaVerComprobante { display: flex; }
.pp-shell--cpa .pp-cpa-home-action-ic {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(107,92,231,.12); color: var(--c-main);
}
.pp-shell--cpa .pp-cpa-home-action-ic svg { width: 14px; height: 14px; }
.pp-shell--cpa .pp-cpa-home-action-cta { margin-left: auto; flex-shrink: 0; display: inline-flex; color: rgba(107,92,231,.6); }
.pp-shell--cpa .pp-cpa-home-action-cta svg { width: 13px; height: 13px; }

/* Header de la app: avatar + saludo + campana */
.pp-shell--cpa .pp-cpa-home-top {
  display: flex; align-items: center; gap: 9px; margin: 0 2px 2px;
}
.pp-shell--cpa .pp-cpa-home-ava {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  box-shadow: 0 4px 10px rgba(74,60,174,.28);
}
.pp-shell--cpa .pp-cpa-home-hello { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.pp-shell--cpa .pp-cpa-home-hello strong { font-size: 11.5px; font-weight: 700; color: var(--c-text); letter-spacing: -.01em; }
.pp-shell--cpa .pp-cpa-home-hello span { font-size: 8.5px; color: var(--c-muted); font-weight: 500; margin-top: 1px; }
.pp-shell--cpa .pp-cpa-home-bell {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-main); background: rgba(107,92,231,.10);
}
.pp-shell--cpa .pp-cpa-home-bell svg { width: 14px; height: 14px; }

/* Recordatorio ámbar (solo pantalla inicial): la colecta está pendiente.
   Cuando la colecta queda pagada, este recordatorio desaparece y el estado
   "al día" se fusiona en la propia tarjeta de la colecta. */
.pp-shell--cpa .pp-cpa-home-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 13px;
  background: rgba(154,106,28,.08);
  border: 1px solid rgba(154,106,28,.22);
}
.pp-shell--cpa .pp-cpa-home-summary-ic {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #9a6a1c; background: rgba(154,106,28,.14);
}
.pp-shell--cpa .pp-cpa-home-summary-ic svg { width: 17px; height: 17px; }
.pp-shell--cpa .pp-cpa-home-summary-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pp-shell--cpa .pp-cpa-home-summary-tx strong { font-size: 11px; font-weight: 700; color: var(--c-text); }
.pp-shell--cpa .pp-cpa-home-summary-tx span { font-size: 8.5px; color: var(--c-muted); font-weight: 500; margin-top: 2px; }
/* Pagada → se oculta el recordatorio */
.pp-shell--cpa #cpaHomeColecta.is-done ~ #cpaHomeSummary { display: none; }

/* Procesando · spinner morado */
.pp-shell--cpa .pp-cpa-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(107,92,231,.18);
  border-top-color: var(--c-main);
  animation: cpaSpin .8s linear infinite;
}
@keyframes cpaSpin { to { transform: rotate(360deg); } }
.pp-shell--cpa .pp-cpa-processing-tx { font-size: 10.5px; font-weight: 600; color: var(--c-muted); }

/* Botón pagar · estado cargando */
.pp-shell--cpa .pp-cpa-pay-btn.is-loading { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .pp-shell--cpa .pp-cpa-home-item.is-tap { animation: none; }
  .pp-shell--cpa .pp-cpa-spinner { animation-duration: 2.4s; }
}

/* ── Placeholder limpio de mocks de función / hero (CPA + Gestión Interna) ── */
.pp-shell--cpa .pp-how-mock-soon,
.pp-shell--prov .pp-how-mock-soon {
  min-height: 220px;
  border-radius: 22px;
  background: linear-gradient(135deg, #F8F6FF 0%, #EEEBFD 100%);
  border: 1px solid rgba(155,142,240,.24);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 18px 44px rgba(74,60,174,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.pp-shell--cpa .pp-how-mock-soon-dot,
.pp-shell--prov .pp-how-mock-soon-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-light);
  box-shadow: 0 0 0 4px rgba(155,142,240,.18);
}
.pp-shell--cpa .pp-how-mock-soon-text,
.pp-shell--prov .pp-how-mock-soon-text {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--c-mid);
}

/* ── Sección rendición ── */
.pp-shell--cpa .pp-cpa-rendicion .eco-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(107,92,231,.09);
  color: #5B4EDB;
  border: 1px solid rgba(107,92,231,.22);
  letter-spacing: .07em;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.pp-shell--cpa .pp-cpa-rendicion .eco-kicker .kicker-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #28C840;
  box-shadow: 0 0 0 0 rgba(40,200,64,.6), 0 0 8px rgba(40,200,64,.5);
  flex-shrink: 0;
  animation: pp-eco-kicker-pulse 2.2s ease-in-out infinite;
}
.pp-shell--cpa .pp-cpa-rendicion-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 32px;
  max-width: 720px;
}
.pp-shell--cpa .pp-cpa-report {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 620px;
  margin: 0 auto;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid rgba(155,142,240,.22);
  border-radius: 20px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 18px 44px rgba(74,60,174,.12),
    0 4px 12px rgba(74,60,174,.06);
}
.pp-shell--cpa .pp-cpa-report-main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.pp-shell--cpa .pp-cpa-report-ic {
  width: 46px; height: 46px;
  border-radius: 13px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  box-shadow: 0 6px 16px rgba(74,60,174,.28);
}
.pp-shell--cpa .pp-cpa-report-ic svg { width: 22px; height: 22px; }
.pp-shell--cpa .pp-cpa-report-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-deep);
  letter-spacing: -.01em;
}
.pp-shell--cpa .pp-cpa-report-sub {
  font-size: 12px;
  color: var(--c-muted);
  margin-top: 2px;
}
.pp-shell--cpa .pp-cpa-report-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.pp-shell--cpa .pp-cpa-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-main);
  background: rgba(107,92,231,.10);
  border: 1px solid rgba(107,92,231,.28);
  border-radius: 10px;
  padding: 9px 15px;
}
.pp-shell--cpa .pp-cpa-report-btn svg { width: 15px; height: 15px; }

@media (max-width: 720px) {
  .pp-shell--cpa .pp-cpa-report { justify-content: center; text-align: center; }
  .pp-shell--cpa .pp-cpa-report-main { flex-direction: column; text-align: center; }
}

/* ══════════════════════════════════════════════════
   GESTIÓN INTERNA · mockup hero · Kanban de operaciones
   Panel del administrador: Total/Pendientes/Asignados/Completados + 3 columnas
   de tickets. Look de software real, scope .pp-shell--prov.
   ══════════════════════════════════════════════════ */
.pp-shell--prov .pp-gi-board {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(187,186,198,.6);
  border-radius: 16px;
  padding: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 0 0 1px rgba(155,142,240,0.18),
    0 30px 60px rgba(74,60,174,.28),
    0 18px 42px rgba(74,60,174,.18),
    0 6px 16px rgba(74,60,174,.12);
  font-size: 11px;
  color: var(--c-text);
  overflow: hidden;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform;
}
/* Hero Gestión: centrado vertical desktop (réplica de las reglas de Comedor
   y CPA) + inclinación 3D propia del board. Antes solo tenía el grid + tilt,
   por eso el contenido quedaba más arriba que en Comedor/CPA. */
@media (min-width: 1025px) {
  .pp-shell--prov .pp-hero:has(.pp-gi-board) {
    margin-top: -24px;
    min-height: calc(100svh - 72px);
    display: flex;
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 0;
  }
  .pp-shell--prov .pp-hero:has(.pp-gi-board) > .container {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .pp-shell--prov .pp-hero:has(.pp-gi-board) .pp-back {
    position: absolute;
    top: 28px;
    left: 24px;
    margin: 0;
  }
  .pp-shell--prov .pp-hero:has(.pp-gi-board) .pp-hero-cta {
    margin-bottom: 0;
  }
  .pp-shell--prov .pp-hero:has(.pp-gi-board) .pp-hero-grid {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
  }
  .pp-shell--prov .pp-hero-mock.is-mock-real .pp-gi-board {
    transform: perspective(1800px) rotateX(5deg) rotateY(-9deg) scale(0.96);
  }
}
.pp-shell--prov .pp-gi-bar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 11px; margin-bottom: 12px; border-bottom: 1px solid rgba(187,186,198,.5); }
.pp-shell--prov .pp-gi-bar-title { font-size: 12.5px; font-weight: 700; color: var(--c-deep); letter-spacing: -.01em; }
.pp-shell--prov .pp-gi-live { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; color: var(--c-main); background: rgba(107,92,231,.08); border: 1px solid rgba(107,92,231,.18); border-radius: 999px; padding: 3px 9px; }
.pp-shell--prov .pp-gi-live i { width: 6px; height: 6px; border-radius: 50%; background: #3ab263; animation: pp-pulse-dot 1.6s ease-in-out infinite; }

.pp-shell--prov .pp-gi-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 13px; }
.pp-shell--prov .pp-gi-metric {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--c-surface); border: 1px solid rgba(187,186,198,.45);
  border-radius: 10px; padding: 7px 9px;
}
.pp-shell--prov .pp-gi-metric-num { font-size: 17px; font-weight: 800; color: var(--c-main); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.pp-shell--prov .pp-gi-metric-num.is-bump { animation: pp-gi-bump .45s ease; }
@keyframes pp-gi-bump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.25); color: var(--c-deep); } }
.pp-shell--prov .pp-gi-metric-lab { font-size: 8.5px; color: var(--c-muted); font-weight: 600; }
.pp-shell--prov .pp-gi-metric--pend { background: rgba(214,158,46,.07); border-color: rgba(214,158,46,.25); }
.pp-shell--prov .pp-gi-metric--pend .pp-gi-metric-num { color: #c0871f; }
.pp-shell--prov .pp-gi-metric--asig { background: rgba(107,92,231,.06); border-color: rgba(107,92,231,.20); }
.pp-shell--prov .pp-gi-metric--comp { background: rgba(47,158,99,.07); border-color: rgba(47,158,99,.22); }
.pp-shell--prov .pp-gi-metric--comp .pp-gi-metric-num { color: #2f9e63; }

.pp-shell--prov .pp-gi-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; position: relative; }
.pp-shell--prov .pp-gi-col { min-width: 0; background: var(--c-surface); border: 1px solid rgba(187,186,198,.4); border-radius: 12px; padding: 9px 8px; }
.pp-shell--prov .pp-gi-col-head { display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); padding-bottom: 6px; margin-bottom: 7px; border-bottom: 1px solid rgba(187,186,198,.45); }
.pp-shell--prov .pp-gi-col-head::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--c-muted); }
.pp-shell--prov .pp-gi-col--pend .pp-gi-col-head::before { background: #d69e2e; }
.pp-shell--prov .pp-gi-col--asig .pp-gi-col-head::before { background: var(--c-main); }
.pp-shell--prov .pp-gi-col--comp .pp-gi-col-head::before { background: #2f9e63; }
.pp-shell--prov .pp-gi-col-body { display: flex; flex-direction: column; gap: 7px; height: 232px; overflow: hidden; }

.pp-shell--prov .pp-gi-card {
  background: #fff; border: 1px solid rgba(187,186,198,.55); border-radius: 10px; padding: 8px;
  box-shadow: 0 2px 6px rgba(74,60,174,.06);
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.pp-shell--prov .pp-gi-card-top { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.pp-shell--prov .pp-gi-card-id { font-size: 8.5px; font-weight: 700; color: var(--c-muted); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.pp-shell--prov .pp-gi-card-cat { font-size: 8px; font-weight: 600; color: var(--c-main); background: rgba(107,92,231,.10); border-radius: 999px; padding: 2px 7px; }
.pp-shell--prov .pp-gi-card-desc { font-size: 10px; font-weight: 500; color: var(--c-text); line-height: 1.35; }
.pp-shell--prov .pp-gi-card-foot { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 8.5px; color: var(--c-muted); font-weight: 600; }
.pp-shell--prov .pp-gi-ava { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--c-mid), var(--c-main)); }
.pp-shell--prov .pp-gi-photo { display: inline-flex; align-items: center; gap: 3px; color: var(--c-mid); font-weight: 700; }
.pp-shell--prov .pp-gi-photo svg { width: 11px; height: 11px; }
.pp-shell--prov .pp-gi-badge { font-size: 7.5px; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--c-main); border-radius: 999px; padding: 2px 6px; margin-left: auto; }
.pp-shell--prov .pp-gi-stars { color: #f0a020; letter-spacing: 1px; }
.pp-shell--prov .pp-gi-card.is-done { background: linear-gradient(135deg, rgba(47,179,107,.06), rgba(47,179,107,.02)); border-color: rgba(47,179,107,.3); }
.pp-shell--prov .pp-gi-card.is-new { animation: pp-gi-board-cardin .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes pp-gi-board-cardin { from { opacity: 0; transform: translateY(-12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.pp-shell--prov .pp-gi-card.is-leaving { opacity: 0; transform: translateY(7px) scale(.955); transition: opacity .28s ease, transform .28s cubic-bezier(.4,0,.6,1); }
.pp-shell--prov .pp-gi-card.is-pulse { box-shadow: 0 0 0 3px rgba(107,92,231,.18); border-color: rgba(107,92,231,.5); }

/* Panel lateral · detalle + asignación (oculto por defecto) */
.pp-shell--prov .pp-gi-panel {
  position: absolute; top: 0; right: 0; width: 68%;
  background: #fff; border: 1px solid rgba(187,186,198,.6); border-radius: 13px; padding: 13px;
  box-shadow: -11px 14px 30px rgba(45,37,96,.10), -3px 4px 10px rgba(45,37,96,.06), 0 1px 2px rgba(45,37,96,.04);
  opacity: 0; transform: translateX(16px); pointer-events: none;
  transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1);
  z-index: 4;
}
.pp-shell--prov .pp-gi-panel.is-show { opacity: 1; transform: translateX(0); }
.pp-shell--prov .pp-gi-panel-head { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.pp-shell--prov .pp-gi-panel-id { font-size: 9px; font-weight: 700; color: var(--c-muted); }
.pp-shell--prov .pp-gi-panel-cat { font-size: 8.5px; font-weight: 600; color: var(--c-main); background: rgba(107,92,231,.10); border-radius: 999px; padding: 2px 8px; }
.pp-shell--prov .pp-gi-panel-desc { font-size: 12px; font-weight: 700; color: var(--c-text); line-height: 1.3; margin-bottom: 4px; }
.pp-shell--prov .pp-gi-panel-meta { font-size: 9px; color: var(--c-muted); margin-bottom: 11px; }
.pp-shell--prov .pp-gi-panel-btn {
  width: 100%; border: 0; border-radius: 9px; padding: 9px; font-family: inherit;
  font-size: 10.5px; font-weight: 700; color: #fff; cursor: default;
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  box-shadow: 0 6px 16px rgba(107,92,231,.34);
}
.pp-shell--prov .pp-gi-panel.is-selecting .pp-gi-panel-btn,
.pp-shell--prov .pp-gi-panel.is-ok .pp-gi-panel-btn { display: none; }
.pp-shell--prov .pp-gi-panel-sel { display: none; flex-direction: column; gap: 5px; }
.pp-shell--prov .pp-gi-panel.is-selecting .pp-gi-panel-sel { display: flex; }
.pp-shell--prov .pp-gi-panel.is-ok .pp-gi-panel-sel { display: none; }
.pp-shell--prov .pp-gi-sel-opt {
  font-size: 10px; font-weight: 600; color: var(--c-text);
  border: 1px solid rgba(187,186,198,.55); border-radius: 8px; padding: 7px 9px;
  transition: background .4s ease, border-color .4s ease, color .4s ease;
}
/* opciones entran escalonadas y suaves cuando aparece el selector */
.pp-shell--prov .pp-gi-panel.is-selecting .pp-gi-sel-opt { animation: pp-gi-panel-in .44s cubic-bezier(.22,1,.36,1) both; }
.pp-shell--prov .pp-gi-panel.is-selecting .pp-gi-sel-opt:nth-child(1) { animation-delay: .04s; }
.pp-shell--prov .pp-gi-panel.is-selecting .pp-gi-sel-opt:nth-child(2) { animation-delay: .12s; }
.pp-shell--prov .pp-gi-panel.is-selecting .pp-gi-sel-opt:nth-child(3) { animation-delay: .20s; }
/* el auxiliar elegido se resalta con un beat de retraso, como una elección real */
.pp-shell--prov .pp-gi-sel-opt.is-pick { background: rgba(107,92,231,.12); border-color: rgba(107,92,231,.45); color: var(--c-main); font-weight: 700; }
.pp-shell--prov .pp-gi-panel.is-selecting .pp-gi-sel-opt.is-pick { animation: pp-gi-panel-in .44s cubic-bezier(.22,1,.36,1) .12s both, pp-gi-pick 1.1s ease .62s; }
.pp-shell--prov .pp-gi-panel-ok {
  display: none; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; color: #1F9152;
  background: rgba(47,179,107,.10); border: 1px solid rgba(47,179,107,.3); border-radius: 9px; padding: 9px 10px;
}
.pp-shell--prov .pp-gi-panel.is-ok .pp-gi-panel-ok { display: flex; animation: pp-gi-panel-in .48s cubic-bezier(.22,1,.36,1) both; }
@keyframes pp-gi-panel-in { from { opacity: 0; transform: translateY(7px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pp-gi-pick { 0%, 100% { box-shadow: 0 0 0 0 rgba(107,92,231,0); } 45% { box-shadow: 0 0 0 3px rgba(107,92,231,.16); } }

@media (prefers-reduced-motion: reduce) {
  .pp-shell--prov .pp-gi-live i { animation: none !important; }
  .pp-shell--prov .pp-gi-card.is-new { animation: none !important; }
  .pp-shell--prov .pp-gi-panel.is-selecting .pp-gi-sel-opt,
  .pp-shell--prov .pp-gi-panel.is-ok .pp-gi-panel-ok { animation: none !important; }
}

/* ── Gestión Interna · mockups de función 1 (Solicitudes) y 2 (Seguimiento) ──
   Dentro del marco pp-zoom (motor benefitZooms). Scope .pp-shell--prov. ── */
.pp-zoom-card--gisol, .pp-zoom-card--giseg, .pp-zoom-card--girend, .pp-zoom-card--giplan { padding: 14px 15px; }
.pp-shell--prov .pp-gi-mk { font-size: 11px; color: var(--c-text); }

/* Solicitudes */
.pp-shell--prov .pp-gi-mk-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 9px; margin-bottom: 10px; border-bottom: 1px solid rgba(187,186,198,.5); font-size: 11px; font-weight: 700; color: var(--c-deep); }
.pp-shell--prov .pp-gi-mk-count { font-size: 14px; font-weight: 800; color: var(--c-main); font-variant-numeric: tabular-nums; }
.pp-shell--prov .pp-gi-mk-list { display: flex; flex-direction: column; gap: 7px; height: 406px; overflow: hidden; }
.pp-shell--prov .pp-gi-mk-card { background: #fff; border: 1px solid rgba(187,186,198,.55); border-radius: 10px; padding: 8px 9px; box-shadow: 0 2px 6px rgba(74,60,174,.05); transition: border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.pp-shell--prov .pp-gi-mk-card.is-in { animation: pp-gi-cardin .45s cubic-bezier(.22,1,.36,1); }
.pp-shell--prov .pp-gi-mk-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.pp-shell--prov .pp-gi-mk-cat { font-size: 8px; font-weight: 600; color: var(--c-main); background: rgba(107,92,231,.10); border-radius: 999px; padding: 2px 8px; }
.pp-shell--prov .pp-gi-mk-ago { font-size: 8.5px; color: var(--c-muted); font-weight: 600; flex-shrink: 0; }
.pp-shell--prov .pp-gi-mk-card-desc { font-size: 10.5px; font-weight: 500; color: var(--c-text); line-height: 1.35; }
.pp-shell--prov .pp-gi-mk-card-who { font-size: 8.5px; color: var(--c-muted); margin-top: 3px; }
.pp-shell--prov .pp-gi-mk-card.is-assigning { border-color: rgba(107,92,231,.4); box-shadow: 0 0 0 3px rgba(107,92,231,.12); }
.pp-shell--prov .pp-gi-mk-card.is-assigned { border-color: rgba(107,92,231,.45); background: linear-gradient(135deg, rgba(107,92,231,.06), rgba(107,92,231,.02)); }
.pp-shell--prov .pp-gi-mk-ok { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(107,92,231,.3); font-size: 9px; font-weight: 700; color: var(--c-main); }

/* Seguimiento */
.pp-shell--prov .pp-gi-mk--seg { display: flex; flex-direction: column; }
.pp-shell--prov .pp-gi-mk-tid { font-size: 11px; font-weight: 700; color: var(--c-deep); padding-bottom: 9px; margin-bottom: 13px; border-bottom: 1px solid rgba(187,186,198,.5); line-height: 1.3; }
.pp-shell--prov .pp-gi-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.pp-shell--prov .pp-gi-steps li { position: relative; padding-left: 24px; font-size: 10px; line-height: 1.35; color: var(--c-muted); transition: color .4s ease; }
.pp-shell--prov .pp-gi-step-dot { position: absolute; left: 0; top: 1px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(187,186,198,.7); background: #fff; transition: background .4s ease, border-color .4s ease, box-shadow .4s ease; }
.pp-shell--prov .pp-gi-steps li:not(:last-child) .pp-gi-step-dot::after { content: ""; position: absolute; left: 50%; top: 13px; transform: translateX(-50%); width: 2px; height: 14px; background: rgba(187,186,198,.5); }
.pp-shell--prov .pp-gi-steps li.is-on { color: var(--c-text); font-weight: 500; }
.pp-shell--prov .pp-gi-steps li.is-on .pp-gi-step-dot { background: var(--c-main); border-color: var(--c-main); box-shadow: 0 0 0 3px rgba(107,92,231,.15); }
/* El segmento ya recorrido se pinta morado (lee como progreso). */
.pp-shell--prov .pp-gi-steps li.is-on:not(:last-child) .pp-gi-step-dot::after { background: var(--c-main); }
/* Paso final "Resuelta": círculo verde con check, marca el cierre exitoso. */
.pp-shell--prov .pp-gi-steps li:last-child.is-on .pp-gi-step-dot { background: #2FB36B; border-color: #2FB36B; box-shadow: 0 0 0 3px rgba(47,179,107,.16); }
.pp-shell--prov .pp-gi-steps li:last-child.is-on .pp-gi-step-dot::before { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 8px; font-weight: 800; line-height: 1; }
.pp-shell--prov .pp-gi-seg-close { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(187,186,198,.5); opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.pp-shell--prov .pp-gi-seg-close.is-show { opacity: 1; transform: translateY(0); }
.pp-shell--prov .pp-gi-seg-note { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 600; color: var(--c-text); margin-bottom: 7px; }
.pp-shell--prov .pp-gi-seg-photo { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(107,92,231,.12); color: var(--c-main); font-size: 12px; flex-shrink: 0; }
.pp-shell--prov .pp-gi-seg-rate { font-size: 9.5px; font-weight: 700; color: #1F9152; }

@media (prefers-reduced-motion: reduce) {
  .pp-shell--prov .pp-gi-mk-card.is-in { animation: none !important; }
  .pp-shell--prov .pp-gi-steps li, .pp-shell--prov .pp-gi-step-dot, .pp-shell--prov .pp-gi-seg-close { transition: none !important; }
}

/* ── Gestión Interna · mockups de función 3 (Rendimiento) y 4 (Planificación) ──
   Dentro del marco pp-zoom (motor benefitZooms). Scope .pp-shell--prov. ── */
.pp-shell--prov .pp-gi-mk-sub { display: flex; align-items: baseline; gap: 5px; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); margin: 0 0 9px; }
.pp-shell--prov .pp-gi-mk-sub:not(:first-child) { margin-top: 15px; }
.pp-shell--prov .pp-gi-mk-sub-note { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--c-main); background: rgba(107,92,231,.10); border-radius: 999px; padding: 1px 7px; font-size: 8px; }

/* Rendimiento */
.pp-shell--prov .pp-gi-bars { display: flex; flex-direction: column; gap: 10px; }
.pp-shell--prov .pp-gi-bars .pp-gi-bar { display: flex; align-items: center; gap: 9px; margin: 0; }
.pp-shell--prov .pp-gi-bar-name { flex: 0 0 52px; font-size: 10px; font-weight: 600; color: var(--c-text); }
.pp-shell--prov .pp-gi-bar-track { flex: 1; height: 8px; border-radius: 999px; background: rgba(155,142,240,.16); box-shadow: inset 0 0 0 1px rgba(155,142,240,.12); overflow: hidden; }
.pp-shell--prov .pp-gi-bar-track i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--c-mid), var(--c-main)); transition: width .25s cubic-bezier(.4,0,.2,1); }
.pp-shell--prov .pp-gi-bar-val { flex: 0 0 18px; text-align: right; font-size: 11px; font-weight: 700; color: var(--c-deep); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pp-shell--prov .pp-gi-statcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pp-shell--prov .pp-gi-statcard { background: #fff; border: 1px solid rgba(187,186,198,.55); border-radius: 10px; padding: 9px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; box-shadow: 0 2px 6px rgba(74,60,174,.05); }
.pp-shell--prov .pp-gi-statcard .pp-gi-ava { margin-bottom: 2px; }
.pp-shell--prov .pp-gi-statcard-name { font-size: 8.5px; font-weight: 600; color: var(--c-muted); }
.pp-shell--prov .pp-gi-statcard-big { font-size: 13.5px; font-weight: 700; color: var(--c-deep); letter-spacing: -.01em; font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 2px; }
.pp-shell--prov .pp-gi-star { color: #f0a020; font-size: 11px; }
.pp-shell--prov .pp-gi-statcard-sub { font-size: 8px; color: var(--c-muted); font-weight: 600; }

/* Planificación */
.pp-shell--prov .pp-gi-mk--plan { display: flex; gap: 14px; align-items: stretch; }
.pp-shell--prov .pp-gi-plan-left { flex: 0 0 56%; min-width: 0; }
.pp-shell--prov .pp-gi-plan-right { flex: 1; min-width: 0; }
/* La lista reserva una altura fija: la card "Solicitada" y "Agendada" comparten
   estructura, así el mockup no cambia de tamaño durante la animación. */
.pp-shell--prov .pp-gi-plan-list { min-height: 106px; }
.pp-shell--prov .pp-gi-mk--plan .pp-gi-mk-card.is-approving { border-color: rgba(107,92,231,.4); box-shadow: 0 0 0 3px rgba(107,92,231,.12); }
.pp-shell--prov .pp-gi-mk--plan .pp-gi-mk-card.is-approved { border-color: rgba(107,92,231,.45); background: linear-gradient(135deg, rgba(107,92,231,.06), rgba(107,92,231,.02)); }
/* Card escaneable: chip de fecha + estado arriba, título, detalle y responsable. */
.pp-shell--prov .pp-gi-plan-card { display: flex; flex-direction: column; gap: 5px; }
.pp-shell--prov .pp-gi-plan-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pp-shell--prov .pp-gi-plan-date { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; color: var(--c-main); background: rgba(107,92,231,.10); border-radius: 999px; padding: 3px 8px; }
.pp-shell--prov .pp-gi-plan-date svg { width: 10px; height: 10px; flex-shrink: 0; }
.pp-shell--prov .pp-gi-plan-status { font-size: 8.5px; font-weight: 700; color: var(--c-muted); flex-shrink: 0; }
.pp-shell--prov .pp-gi-plan-card.is-approved .pp-gi-plan-status { color: #1F9152; }
.pp-shell--prov .pp-gi-plan-card-title { font-size: 11px; font-weight: 700; color: var(--c-deep); line-height: 1.25; letter-spacing: -.01em; }
.pp-shell--prov .pp-gi-plan-card-meta { font-size: 9px; color: var(--c-muted); line-height: 1.3; }
.pp-shell--prov .pp-gi-plan-card-who { display: flex; align-items: center; gap: 5px; font-size: 8.5px; color: var(--c-text); font-weight: 600; margin-top: 1px; }
.pp-shell--prov .pp-gi-plan-who-ava { width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 6.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--c-mid), var(--c-main)); }
.pp-shell--prov .pp-gi-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 3px; }
.pp-shell--prov .pp-gi-dow { display: flex; align-items: center; justify-content: center; font-size: 7.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--c-muted); padding-bottom: 4px; margin-bottom: 3px; border-bottom: 1px solid rgba(187,186,198,.5); }
.pp-shell--prov .pp-gi-day { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: var(--c-text); border-radius: 6px; }
.pp-shell--prov .pp-gi-day.is-empty { pointer-events: none; }
.pp-shell--prov .pp-gi-day.has-dot { color: var(--c-deep); }
.pp-shell--prov .pp-gi-day.has-dot::after { content: ""; position: absolute; bottom: 2.5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--c-main); }
.pp-shell--prov .pp-gi-day.is-new { color: #fff; font-weight: 800; background: var(--c-main); box-shadow: 0 3px 8px rgba(107,92,231,.4); transition: background .4s ease, box-shadow .4s ease, color .4s ease; }
.pp-shell--prov .pp-gi-day.is-new::after { content: ""; position: absolute; bottom: 2.5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: #fff; }

/* ═══ Gestión · Solicitudes (rediseño): pantalla de producto con lista
   de altura fija + notificación de WhatsApp de escritorio. Movimiento en
   su lugar; overflow oculto para que la tarjeta no cambie de tamaño. ═══ */
.pp-shell--prov .pp-gi-sol { position: relative; display: flex; flex-direction: column; }
.pp-shell--prov .pp-gi-sol-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(187,186,198,.5);
}
.pp-shell--prov .pp-gi-sol-title { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--c-deep); letter-spacing: -.01em; }
.pp-shell--prov .pp-gi-sol-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(135deg, var(--c-mid), var(--c-main)); color: #fff; font-size: 8.5px; font-weight: 800; }
.pp-shell--prov .pp-gi-sol-mark svg { width: 11px; height: 11px; display: block; }
.pp-shell--prov .pp-gi-sol-live { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; color: var(--c-main); }
.pp-shell--prov .pp-gi-sol-live i { width: 6px; height: 6px; border-radius: 50%; background: #3ab263; animation: pp-pulse-dot 1.6s ease-in-out infinite; }

.pp-shell--prov .pp-gi-sol-bar { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.pp-shell--prov .pp-gi-sol-tab { font-size: 9.5px; font-weight: 700; color: var(--c-muted); padding: 3px 9px; border-radius: 999px; }
.pp-shell--prov .pp-gi-sol-tab.is-on { color: var(--c-main); background: rgba(107,92,231,.10); }
.pp-shell--prov .pp-gi-sol-counter { margin-left: auto; font-size: 9.5px; font-weight: 600; color: var(--c-muted); }
.pp-shell--prov .pp-gi-sol-counter b { font-weight: 800; color: var(--c-deep); font-variant-numeric: tabular-nums; }

/* Lista: ALTURA FIJA + recorte (clave para que no cambie de tamaño). */
.pp-shell--prov .pp-gi-sol-list { position: relative; height: 220px; overflow: hidden; display: flex; flex-direction: column; gap: 7px; }
.pp-shell--prov .pp-gi-sol-row {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px;
  border: 1px solid rgba(187,186,198,.45); border-radius: 11px; background: #fff;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.pp-shell--prov .pp-gi-sol-row--new { border-color: rgba(107,92,231,.34); box-shadow: 0 0 0 3px rgba(107,92,231,.07); }
.pp-shell--prov .pp-gi-sol-row.is-assigning { box-shadow: 0 0 0 3px rgba(107,92,231,.14); border-color: rgba(107,92,231,.5); }
/* Entrada de la fila nueva: aparece con un fade suave. El descenso de las
   filas de abajo lo anima el JS con técnica FLIP (transform), así no hay
   saltos ni cambios de tamaño (overflow:hidden colapsaría la fila flex). */
@keyframes pp-gi-sol-enter { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.pp-shell--prov .pp-gi-sol-row.is-in { animation: pp-gi-sol-enter .45s ease; }

.pp-shell--prov .pp-gi-sol-cat { flex-shrink: 0; box-sizing: border-box; width: 82px; display: inline-flex; align-items: center; justify-content: center; font-size: 7.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: 4px 4px; border-radius: 6px; white-space: nowrap; overflow: hidden; }
.pp-shell--prov .pp-gi-sol-cat--tec { color: #2563c9; background: rgba(37,99,201,.12); }
.pp-shell--prov .pp-gi-sol-cat--gas { color: #0e7490; background: rgba(14,116,144,.12); }
.pp-shell--prov .pp-gi-sol-cat--ele { color: #b07a00; background: rgba(214,158,46,.16); }
.pp-shell--prov .pp-gi-sol-cat--mob { color: #6B5CE7; background: rgba(107,92,231,.12); }
.pp-shell--prov .pp-gi-sol-cat--inf { color: #2f8f57; background: rgba(47,143,87,.14); }

.pp-shell--prov .pp-gi-sol-main { flex: 1; min-width: 0; }
.pp-shell--prov .pp-gi-sol-desc { font-size: 10.5px; font-weight: 600; color: var(--c-deep); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-shell--prov .pp-gi-sol-who { font-size: 9px; color: var(--c-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pp-shell--prov .pp-gi-sol-av { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 7.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--c-mid), var(--c-main)); opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.pp-shell--prov .pp-gi-sol-av.is-on { opacity: 1; transform: scale(1); }

.pp-shell--prov .pp-gi-sol-pill { flex-shrink: 0; box-sizing: border-box; width: 64px; display: inline-flex; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 700; padding: 3px 0; border-radius: 999px; white-space: nowrap; }
.pp-shell--prov .pp-gi-sol-pill--pend { color: #b06a00; background: rgba(214,158,46,.16); }
.pp-shell--prov .pp-gi-sol-pill--asg { color: var(--c-main); background: rgba(107,92,231,.14); }
.pp-shell--prov .pp-gi-sol-pill--prog { color: #2563c9; background: rgba(37,99,201,.12); }
.pp-shell--prov .pp-gi-sol-pill--done { color: #2f8f57; background: rgba(47,143,87,.16); gap: 3px; }
.pp-shell--prov .pp-gi-sol-pill--done .pp-gi-sol-chk { width: 9px; height: 9px; flex-shrink: 0; }
.pp-shell--prov .pp-gi-sol-row.is-done { border-color: rgba(47,143,87,.42); box-shadow: 0 0 0 3px rgba(47,143,87,.08); }
/* Cambio de estado de la pill (pop al entrar el nuevo estado). */
@keyframes pp-gi-sol-pill-swap { 0% { opacity: 0; transform: scale(.55); } 55% { opacity: 1; transform: scale(1.14); } 100% { opacity: 1; transform: scale(1); } }
.pp-shell--prov .pp-gi-sol-pill.is-swap { animation: pp-gi-sol-pill-swap .45s cubic-bezier(.34,1.56,.64,1); }

/* Notificación de WhatsApp de escritorio (entra cuando la card tiene .is-toast). */
.pp-shell--prov .pp-gi-sol-toast {
  position: absolute; top: 68px; left: 0; right: 0;
  display: flex; gap: 9px; align-items: center; padding: 9px 11px;
  border-radius: 12px; background: #fff; border: 1px solid rgba(187,186,198,.5);
  box-shadow: 0 12px 28px rgba(45,37,96,.18);
  opacity: 0; transform: translateY(-12px); pointer-events: none; z-index: 4;
  transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.4,.5,1);
}
.pp-shell--prov .pp-zoom-card--gisol.is-toast .pp-gi-sol-toast { opacity: 1; transform: translateY(0); }
.pp-shell--prov .pp-gi-sol-toast-ic { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: #25D366; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.pp-shell--prov .pp-gi-sol-toast-ic svg { width: 15px; height: 15px; }
.pp-shell--prov .pp-gi-sol-toast-body { flex: 1; min-width: 0; }
.pp-shell--prov .pp-gi-sol-toast-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 1px; }
.pp-shell--prov .pp-gi-sol-toast-app { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }
.pp-shell--prov .pp-gi-sol-toast-time { font-size: 8.5px; color: var(--c-muted); }
.pp-shell--prov .pp-gi-sol-toast-txt { font-size: 11px; font-weight: 600; color: var(--c-deep); line-height: 1.3; }

/* ═══ Gestión · Seguimiento (rediseño): detalle de solicitud, una pasada +
   actualización ocasional. Namespace pp-gi-sg-* para no chocar con el CSS
   viejo de seguimiento (se limpia al final). ═══ */
.pp-shell--prov .pp-gi-sg { display: flex; flex-direction: column; position: relative; }

.pp-shell--prov .pp-gi-sg-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 11px; border-bottom: 1px solid rgba(187,186,198,.5); }
.pp-shell--prov .pp-gi-sg-crumb { font-size: 10px; font-weight: 600; color: var(--c-muted); }
.pp-shell--prov .pp-gi-sg-crumb i { font-style: normal; margin: 0 4px; opacity: .55; }
.pp-shell--prov .pp-gi-sg-crumb b { color: var(--c-deep); font-weight: 700; }

.pp-shell--prov .pp-gi-sg-tk { margin-bottom: 13px; }
.pp-shell--prov .pp-gi-sg-tk-title { font-size: 12px; font-weight: 700; color: var(--c-deep); line-height: 1.25; margin-top: 7px; }
.pp-shell--prov .pp-gi-sg-tk-by { font-size: 9.5px; color: var(--c-muted); margin-top: 3px; }

/* Tracker horizontal de progreso (reemplaza la pill). */
.pp-shell--prov .pp-gi-sg-track { position: relative; display: flex; justify-content: space-between; padding: 2px 0 0; margin-bottom: 13px; }
/* La línea va de centro a centro de los nodos extremos (12.5% / 87.5%), así
   el relleno cae justo sobre cada nodo. */
.pp-shell--prov .pp-gi-sg-line { position: absolute; top: 8px; left: 12.5%; right: 12.5%; height: 2px; background: rgba(187,186,198,.5); border-radius: 2px; overflow: hidden; }
.pp-shell--prov .pp-gi-sg-line i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--c-mid), var(--c-main)); transition: width .6s cubic-bezier(.4,0,.2,1); }
.pp-shell--prov .pp-gi-sg-step { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pp-shell--prov .pp-gi-sg-node { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid rgba(187,186,198,.7); transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.pp-shell--prov .pp-gi-sg-step.is-done .pp-gi-sg-node { background: var(--c-main); border-color: var(--c-main); }
.pp-shell--prov .pp-gi-sg-step.is-now .pp-gi-sg-node { background: var(--c-main); border-color: var(--c-main); box-shadow: 0 0 0 4px rgba(107,92,231,.18); }
/* Última etapa alcanzada (Resuelta): nodo verde, marca la tarea como lista. */
.pp-shell--prov .pp-gi-sg-step:last-child.is-now .pp-gi-sg-node { background: #2f8f57; border-color: #2f8f57; box-shadow: 0 0 0 4px rgba(47,143,87,.18); }
.pp-shell--prov .pp-gi-sg-lab { font-size: 8.5px; font-weight: 600; color: var(--c-muted); white-space: nowrap; transition: color .3s ease; }
/* Sólo la etapa ACTUAL lleva peso/realce; las anteriores vuelven a normal. */
.pp-shell--prov .pp-gi-sg-step.is-now .pp-gi-sg-lab { color: var(--c-deep); font-weight: 700; }
.pp-shell--prov .pp-gi-sg-step:last-child.is-now .pp-gi-sg-lab { color: #2f8f57; }

/* Registro de eventos: alto fijo, recorta (no cambia el tamaño). */
.pp-shell--prov .pp-gi-sg-log { height: 64px; overflow: hidden; display: flex; flex-direction: column; gap: 4px; margin-bottom: 11px; }
.pp-shell--prov .pp-gi-sg-log-row { position: relative; padding-left: 12px; font-size: 9.5px; color: var(--c-muted); line-height: 1.3; }
.pp-shell--prov .pp-gi-sg-log-row::before { content: ''; position: absolute; left: 2px; top: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--c-main); opacity: .55; }
@keyframes pp-gi-sg-logize { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pp-shell--prov .pp-gi-sg-log-row.is-in { animation: pp-gi-sg-logize .35s ease; }

/* Cierre: reserva su espacio siempre (alto constante), aparece al resolver. */
.pp-shell--prov .pp-gi-sg-close { display: flex; gap: 9px; align-items: flex-start; padding: 10px 11px; border-radius: 11px; background: var(--c-surface); border: 1px solid rgba(187,186,198,.45); opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
.pp-shell--prov .pp-zoom-card--giseg.is-resolved .pp-gi-sg-close { opacity: 1; transform: none; }
.pp-shell--prov .pp-gi-sg-photo { flex-shrink: 0; width: 30px; height: 30px; border-radius: 7px; background: rgba(107,92,231,.12); color: var(--c-main); display: inline-flex; align-items: center; justify-content: center; }
.pp-shell--prov .pp-gi-sg-photo svg { width: 16px; height: 16px; }
.pp-shell--prov .pp-gi-sg-close-main { flex: 1; min-width: 0; }
.pp-shell--prov .pp-gi-sg-note { font-size: 10.5px; font-weight: 600; color: var(--c-deep); line-height: 1.3; }
.pp-shell--prov .pp-gi-sg-rate { font-size: 9px; color: var(--c-muted); margin-top: 3px; }
.pp-shell--prov .pp-gi-sg-stars { color: #e0a93a; letter-spacing: 1px; }

/* Push del sistema (estilo Cobranza): entra desde abajo con .is-push. */
.pp-shell--prov .pp-gi-sg-push { position: absolute; left: 4px; right: 4px; bottom: 0; display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; border-radius: 12px; background: #fff; border: 1px solid rgba(187,186,198,.5); box-shadow: 0 14px 30px rgba(45,37,96,.20); opacity: 0; transform: translateY(16px); pointer-events: none; z-index: 5; transition: opacity .35s ease, transform .4s cubic-bezier(.34,1.4,.5,1); }
.pp-shell--prov .pp-zoom-card--giseg.is-push .pp-gi-sg-push { opacity: 1; transform: translateY(0); }
.pp-shell--prov .pp-gi-sg-push-ic { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--c-mid), var(--c-main)); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.pp-shell--prov .pp-gi-sg-push-ic svg { width: 14px; height: 14px; }
.pp-shell--prov .pp-gi-sg-push-body { flex: 1; min-width: 0; }
.pp-shell--prov .pp-gi-sg-push-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 1px; }
.pp-shell--prov .pp-gi-sg-push-app { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }
.pp-shell--prov .pp-gi-sg-push-time { font-size: 8.5px; color: var(--c-muted); }
.pp-shell--prov .pp-gi-sg-push-txt { font-size: 11px; font-weight: 600; color: var(--c-deep); line-height: 1.3; }

/* ═══ Gestión · Rendimiento (rediseño): leaderboard + tira de KPIs.
   Namespace pp-gi-rd-*. Una pasada + reordenamiento ocasional. ═══ */
.pp-shell--prov .pp-gi-rd { display: flex; flex-direction: column; }
.pp-shell--prov .pp-gi-rd-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 11px; border-bottom: 1px solid rgba(187,186,198,.5); }
.pp-shell--prov .pp-gi-rd-title { font-size: 12.5px; font-weight: 600; color: var(--c-deep); letter-spacing: -.01em; }
.pp-shell--prov .pp-gi-rd-period { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 500; color: var(--c-muted); background: var(--c-surface); border: 1px solid rgba(187,186,198,.5); border-radius: 999px; padding: 3px 9px; }
.pp-shell--prov .pp-gi-rd-period svg { width: 9px; height: 9px; opacity: .7; }
.pp-shell--prov .pp-gi-rd-sec { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); margin-bottom: 10px; }

/* Leaderboard */
.pp-shell--prov .pp-gi-rd-board { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.pp-shell--prov .pp-gi-rd-row { display: flex; align-items: center; gap: 8px; padding: 2px 6px; margin: 0 -6px; border-radius: 9px; }
.pp-shell--prov .pp-gi-rd-row.is-lead { background: rgba(107,92,231,.06); }
.pp-shell--prov .pp-gi-rd-rank { width: 13px; flex-shrink: 0; text-align: center; font-size: 9px; font-weight: 600; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.pp-shell--prov .pp-gi-rd-row.is-lead .pp-gi-rd-rank { color: var(--c-main); font-weight: 700; }
.pp-shell--prov .pp-gi-rd-av { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--c-mid), var(--c-main)); }
.pp-shell--prov .pp-gi-rd-name { flex-shrink: 0; width: 52px; font-size: 10px; font-weight: 500; color: var(--c-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-shell--prov .pp-gi-rd-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(187,186,198,.3); overflow: hidden; }
.pp-shell--prov .pp-gi-rd-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--c-mid), var(--c-main)); transition: width .6s cubic-bezier(.4,0,.2,1); }
.pp-shell--prov .pp-gi-rd-val { flex-shrink: 0; width: 22px; text-align: right; font-size: 11.5px; font-weight: 700; color: var(--c-deep); font-variant-numeric: tabular-nums; }
@keyframes pp-gi-rd-bump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.32); color: var(--c-main); } }
.pp-shell--prov .pp-gi-rd-val.is-bump { animation: pp-gi-rd-bump .55s ease; }

/* Tira de KPIs */
.pp-shell--prov .pp-gi-rd-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pp-shell--prov .pp-gi-rd-kpi { background: var(--c-surface); border: 1px solid rgba(187,186,198,.45); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.pp-shell--prov .pp-gi-rd-kpi-lab { font-size: 8.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: var(--c-muted); }
.pp-shell--prov .pp-gi-rd-kpi-num { font-size: 16px; font-weight: 700; color: var(--c-deep); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.pp-shell--prov .pp-gi-rd-star { color: #e0a93a; font-size: 12.5px; margin-left: 2px; }
.pp-shell--prov .pp-gi-rd-kpi-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 8.5px; font-weight: 600; color: #2f8f57; }
.pp-shell--prov .pp-gi-rd-kpi-trend svg { width: 9px; height: 9px; }
.pp-shell--prov .pp-gi-rd-kpi-sub { font-size: 8.5px; color: var(--c-muted); }

/* ═══ Gestión · Planificación (rediseño): cola + calendario realista.
   Namespace pp-gi-pl-*. Una pasada + agenda que se va llenando, silenciosa. ═══ */
/* Este mockup es más ancho que los otros (dos columnas con harto contenido):
   el calendario respira sin estirarse y la tarjeta no queda apretada. */
.pp-zoom-stack--plan { max-width: 384px; }
.pp-shell--prov .pp-gi-pl { display: flex; flex-direction: column; }
.pp-shell--prov .pp-gi-pl-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid rgba(187,186,198,.5); }
.pp-shell--prov .pp-gi-pl-title { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--c-deep); letter-spacing: -.01em; }
.pp-shell--prov .pp-gi-pl-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(135deg, var(--c-mid), var(--c-main)); color: #fff; }
.pp-shell--prov .pp-gi-pl-mark svg { width: 11px; height: 11px; display: block; }
.pp-shell--prov .pp-gi-pl-month { font-size: 9.5px; font-weight: 600; color: var(--c-muted); background: var(--c-surface); border: 1px solid rgba(187,186,198,.5); border-radius: 999px; padding: 3px 9px; }

/* minmax(0,...) fija la proporción de las columnas: el contenido de la
   tarjeta (izquierda) ya no puede ensanchar su pista ni empujar al calendario. */
.pp-shell--prov .pp-gi-pl-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.pp-shell--prov .pp-gi-pl-left, .pp-shell--prov .pp-gi-pl-right { min-width: 0; }
.pp-shell--prov .pp-gi-pl-col-lab { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); margin-bottom: 8px; }

/* Tarjeta de tarea (cola) */
.pp-shell--prov .pp-gi-pl-queue { height: 134px; }
.pp-shell--prov .pp-gi-pl-task { background: #fff; border: 1px solid rgba(187,186,198,.5); border-radius: 12px; padding: 11px; box-shadow: 0 4px 14px -8px rgba(74,60,174,.22); }
@keyframes pp-gi-pl-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pp-shell--prov .pp-gi-pl-task.is-in { animation: pp-gi-pl-in .4s ease; }
.pp-shell--prov .pp-gi-pl-task.is-approving { border-color: rgba(107,92,231,.4); box-shadow: 0 0 0 3px rgba(107,92,231,.10); }
.pp-shell--prov .pp-gi-pl-task.is-out { opacity: 0; transform: translateY(-8px) scale(.98); transition: opacity .4s ease, transform .4s ease; }
.pp-shell--prov .pp-gi-pl-task-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.pp-shell--prov .pp-gi-pl-date { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 30px; height: 32px; border-radius: 8px; background: rgba(107,92,231,.1); color: var(--c-main); font-size: 7px; font-weight: 700; letter-spacing: .05em; line-height: 1.1; }
.pp-shell--prov .pp-gi-pl-date b { font-size: 13px; font-weight: 800; }
.pp-shell--prov .pp-gi-pl-status { font-size: 8px; font-weight: 700; padding: 3px 8px; border-radius: 999px; color: #b06a00; background: rgba(214,158,46,.16); }
.pp-shell--prov .pp-gi-pl-status.is-on { color: #2f8f57; background: rgba(47,143,87,.15); }
.pp-shell--prov .pp-gi-pl-task-title { font-size: 11px; font-weight: 700; color: var(--c-deep); line-height: 1.25; }
.pp-shell--prov .pp-gi-pl-task-meta { font-size: 9px; color: var(--c-muted); margin-top: 3px; }
/* Pie de la tarjeta en línea: responsable + botón. El mockup ancho deja sitio
   de sobra, así la tarjeta queda compacta (mockup más bajo) y nada se recorta. */
.pp-shell--prov .pp-gi-pl-task-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; }
.pp-shell--prov .pp-gi-pl-who { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 9px; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-shell--prov .pp-gi-pl-av { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--c-mid), var(--c-main)); }
.pp-shell--prov .pp-gi-pl-btn { flex-shrink: 0; font-size: 9px; font-weight: 700; padding: 5px 11px; border-radius: 7px; color: #fff; background: linear-gradient(135deg, var(--c-mid), var(--c-main)); transition: background .3s ease, color .3s ease; }
.pp-shell--prov .pp-gi-pl-btn.is-on { background: rgba(47,143,87,.15); color: #2f8f57; }

/* Calendario realista */
.pp-shell--prov .pp-gi-pl-dows { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; margin-bottom: 4px; }
.pp-shell--prov .pp-gi-pl-dows span { text-align: center; font-size: 8px; font-weight: 700; color: var(--c-muted); }
.pp-shell--prov .pp-gi-pl-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px 2px; }
.pp-shell--prov .pp-gi-pl-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px 0; min-height: 25px; }
.pp-shell--prov .pp-gi-pl-day.is-empty { visibility: hidden; }
.pp-shell--prov .pp-gi-pl-dnum { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 9px; font-weight: 500; color: var(--c-text); transition: background .3s ease, color .3s ease; }
.pp-shell--prov .pp-gi-pl-day.is-wknd .pp-gi-pl-dnum { color: var(--c-muted); }
.pp-shell--prov .pp-gi-pl-day.is-today .pp-gi-pl-dnum { background: var(--c-main); color: #fff; font-weight: 700; }
.pp-shell--prov .pp-gi-pl-chip { width: 0; height: 3px; border-radius: 2px; background: var(--c-main); opacity: 0; transition: width .35s ease, opacity .35s ease; }
.pp-shell--prov .pp-gi-pl-day.has-task .pp-gi-pl-chip { width: 62%; opacity: .85; }
@keyframes pp-gi-pl-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: .85; } }
.pp-shell--prov .pp-gi-pl-day.is-new .pp-gi-pl-chip { animation: pp-gi-pl-pop .5s ease; }
.pp-shell--prov .pp-gi-pl-day.is-new:not(.is-today) .pp-gi-pl-dnum { color: var(--c-main); font-weight: 700; }

@media (max-width: 560px) {
  .pp-shell--prov .pp-gi-mk--plan { flex-direction: column; }
  .pp-shell--prov .pp-gi-plan-left, .pp-shell--prov .pp-gi-plan-right { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-shell--prov .pp-gi-bar-track i { transition: none !important; }
  .pp-shell--prov .pp-gi-day.is-new { transition: none !important; }
}

/* ═══ Gestión · "Más que un sistema de solicitudes" (bento) ═══
   Reusa la estética de las caps-cards de Comedor/CPA (scoped a --prov) y las
   dispone en bento asimétrico en vez de grid 3×2. */
.pp-shell--prov .pp-caps-card {
  background: #fff;
  border: 1px solid rgba(107,92,231,.18);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 4px 16px -6px rgba(74,60,174,.12), 0 12px 32px -12px rgba(74,60,174,.16);
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, opacity .25s ease, border-color .3s ease;
}
.pp-shell--prov .pp-caps-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -10px rgba(74,60,174,.30);
  border-color: rgba(107,92,231,.40);
}
.pp-shell--prov .pp-caps-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: rgba(107,92,231,.10); border: 1px solid rgba(107,92,231,.20);
  color: var(--c-main); margin-bottom: 16px;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.pp-shell--prov .pp-caps-ic svg { width: 22px; height: 22px; }
.pp-shell--prov .pp-caps-card:hover .pp-caps-ic {
  background: rgba(107,92,231,.15); border-color: rgba(107,92,231,.34);
  transform: scale(1.08); box-shadow: 0 0 0 4px rgba(107,92,231,.08);
}
.pp-shell--prov .pp-caps-title {
  font-size: 16.5px; font-weight: 700; color: var(--c-deep);
  margin: 0 0 8px; letter-spacing: -.01em; line-height: 1.3; min-height: 2.6em;
}
.pp-shell--prov .pp-caps-text { font-size: 13.5px; line-height: 1.55; color: var(--c-muted); margin: 0; }

/* Bento asimétrico: 4 columnas; la 1ª y la 6ª ocupan 2 (diagonal de énfasis). */
.pp-shell--prov .pp-gi-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.pp-shell--prov .pp-gi-bento .pp-caps-card:nth-child(1),
.pp-shell--prov .pp-gi-bento .pp-caps-card:nth-child(6) { grid-column: span 2; }
.pp-shell--prov .pp-gi-bento:hover .pp-caps-card { opacity: .7; }
.pp-shell--prov .pp-gi-bento:hover .pp-caps-card:hover { opacity: 1; }
@media (max-width: 900px) {
  .pp-shell--prov .pp-gi-bento { grid-template-columns: 1fr 1fr; }
  .pp-shell--prov .pp-gi-bento .pp-caps-card:nth-child(1),
  .pp-shell--prov .pp-gi-bento .pp-caps-card:nth-child(6) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .pp-shell--prov .pp-gi-bento { grid-template-columns: 1fr; }
  .pp-shell--prov .pp-gi-bento .pp-caps-card { grid-column: auto; }
}