/* ============================================================
   Factor Partido · Penca UX Pro v1
   Capa de experiencia sobre la estructura real actual.
   No cambia BD ni lógica. Mejora dashboard, grupos, pronósticos,
   ranking, formularios y móvil.
   ============================================================ */

body.fp-penca-page{
  --penca-glow-cyan:0 18px 60px rgba(0,212,232,.16);
  --penca-glow-green:0 18px 60px rgba(34,197,94,.12);
  --penca-radius-xl:28px;
  --penca-radius-lg:22px;
  --penca-radius-md:16px;
}

body.fp-penca-page .penca-wrap,
body.fp-penca-page .penca-play-wrap{
  background:
    radial-gradient(circle at 8% 0%,rgba(0,212,232,.16),transparent 28%),
    radial-gradient(circle at 96% 10%,rgba(34,197,94,.08),transparent 30%),
    linear-gradient(180deg,#070b13 0%,#090f19 46%,#070b13 100%)!important;
}

body.fp-penca-page .penca-container,
body.fp-penca-page .penca-play-container{
  position:relative;
}

body.fp-penca-page .penca-container:before,
body.fp-penca-page .penca-play-container:before{
  content:"";
  position:absolute;
  inset:-20px -10px auto auto;
  width:240px;
  height:240px;
  border-radius:999px;
  background:rgba(0,212,232,.055);
  filter:blur(10px);
  pointer-events:none;
  z-index:0;
}

body.fp-penca-page .penca-container > *,
body.fp-penca-page .penca-play-container > *{
  position:relative;
  z-index:1;
}

/* Hero / landing */
body.fp-penca-page .penca-cinematic-hero,
body.fp-penca-page .penca-app-hero,
body.fp-penca-page .penca-play-hero,
body.fp-penca-page .penca-profile-hero,
body.fp-penca-page .penca-rank-hero-v3,
body.fp-penca-page .penca-onboarding-hero{
  border-radius:var(--penca-radius-xl)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
    radial-gradient(circle at 18% 0%,rgba(0,212,232,.14),transparent 32%)!important;
  box-shadow:var(--penca-glow-cyan),0 18px 50px rgba(0,0,0,.22)!important;
  overflow:hidden;
}

body.fp-penca-page .penca-cinematic-title,
body.fp-penca-page .penca-hero-title,
body.fp-penca-page .penca-rank-title-v3,
body.fp-penca-page .penca-play-copy h1{
  letter-spacing:-1.1px!important;
}

body.fp-penca-page .penca-hero-title strong,
body.fp-penca-page .penca-cinematic-title strong{
  color:var(--penca-cyan)!important;
  text-shadow:0 0 28px rgba(0,212,232,.20);
}

body.fp-penca-page .penca-kicker{
  box-shadow:inset 0 0 0 1px rgba(0,212,232,.04);
}

/* Botones */
body.fp-penca-page .penca-btn,
body.fp-penca-page .penca-action-main,
body.fp-penca-page .penca-action-ghost,
body.fp-penca-page .penca-share-btn{
  border-radius:999px!important;
  min-height:42px;
  font-weight:950!important;
  letter-spacing:.25px;
}

body.fp-penca-page .penca-btn.primary,
body.fp-penca-page .penca-action-main{
  box-shadow:0 12px 34px rgba(0,212,232,.20)!important;
}

body.fp-penca-page .penca-btn:hover,
body.fp-penca-page .penca-action-main:hover,
body.fp-penca-page .penca-action-ghost:hover,
body.fp-penca-page .penca-share-btn:hover{
  transform:translateY(-2px);
}

/* Cards generales */
body.fp-penca-page .penca-card,
body.fp-penca-page .penca-group-pro,
body.fp-penca-page .penca-dashboard-card-pro,
body.fp-penca-page .penca-app-panel,
body.fp-penca-page .penca-empty-state,
body.fp-penca-page .penca-form-card,
body.fp-penca-page .penca-join-card,
body.fp-penca-page .penca-profile-card,
body.fp-penca-page .penca-rank-status-v3,
body.fp-penca-page .penca-podium-card-v3,
body.fp-penca-page .penca-match-card-pro,
body.fp-penca-page .penca-stage-shell,
body.fp-penca-page .penca-owner-hero-pro .penca-share-box{
  border-radius:var(--penca-radius-lg)!important;
  border-color:rgba(255,255,255,.095)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.018))!important;
  box-shadow:0 18px 42px rgba(0,0,0,.18)!important;
}

/* Dashboard */
body.fp-penca-page .penca-dashboard-metrics-pro,
body.fp-penca-page .penca-metric-grid,
body.fp-penca-page .penca-play-stats,
body.fp-penca-page .penca-rank-status-grid-v3{
  gap:12px!important;
}

body.fp-penca-page .penca-metric,
body.fp-penca-page .penca-play-stats div,
body.fp-penca-page .penca-rank-target-v3{
  border-radius:18px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.035)!important;
}

body.fp-penca-page .penca-metric b,
body.fp-penca-page .penca-play-stats strong{
  letter-spacing:-.5px;
}

body.fp-penca-page .penca-group-pro.has-pending{
  border-color:rgba(0,212,232,.24)!important;
  box-shadow:var(--penca-glow-cyan),0 18px 42px rgba(0,0,0,.18)!important;
}

body.fp-penca-page .penca-alert-inline{
  border-radius:16px!important;
}

/* Compartir */
body.fp-penca-page .penca-share-box,
body.fp-penca-page .penca-share-pro{
  border-radius:20px!important;
}

body.fp-penca-page .penca-share-code{
  letter-spacing:.08em!important;
  font-weight:950!important;
  text-shadow:0 0 18px rgba(0,212,232,.12);
}

body.fp-penca-page .penca-copy-toast{
  position:fixed;
  left:50%;
  bottom:calc(92px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%) translateY(20px);
  background:rgba(7,11,19,.92);
  color:#fff;
  border:1px solid rgba(0,212,232,.25);
  box-shadow:0 18px 42px rgba(0,0,0,.26);
  border-radius:999px;
  padding:11px 15px;
  font-size:12px;
  font-weight:900;
  z-index:10080;
  opacity:0;
  pointer-events:none;
  transition:.2s ease;
}

body.fp-penca-page .penca-copy-toast.is-visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* Pronósticos */
body.fp-penca-page .penca-savebar-pro{
  border-radius:0 0 22px 22px!important;
  background:rgba(7,11,19,.84)!important;
  backdrop-filter:blur(14px)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.22)!important;
}

body.fp-penca-page .penca-dirty-count.is-dirty{
  background:rgba(245,158,11,.14)!important;
  color:#fde68a!important;
  border-color:rgba(245,158,11,.30)!important;
}

body.fp-penca-page .penca-stage-tabs-pro{
  gap:8px!important;
}

body.fp-penca-page .penca-stage-tab-pro{
  border-radius:16px!important;
}

body.fp-penca-page .penca-stage-tab-pro.active{
  box-shadow:0 12px 30px rgba(0,212,232,.14)!important;
}

body.fp-penca-page .penca-match-card-pro.is-changed{
  border-color:rgba(245,158,11,.32)!important;
  box-shadow:0 0 0 1px rgba(245,158,11,.12),0 18px 42px rgba(0,0,0,.20)!important;
}

body.fp-penca-page .penca-status-badge.open{
  background:rgba(34,197,94,.12)!important;
  color:#bbf7d0!important;
}

body.fp-penca-page .penca-status-badge.blocked,
body.fp-penca-page .penca-status-badge.closed{
  background:rgba(239,68,68,.12)!important;
  color:#fecaca!important;
}

body.fp-penca-page .penca-score-control button{
  border-radius:14px!important;
}

body.fp-penca-page .penca-score-control input{
  border-radius:16px!important;
  box-shadow:inset 0 0 0 1px rgba(0,212,232,.08);
}

body.fp-penca-page .penca-stage-bottom-save{
  border-radius:22px!important;
}

/* Ranking */
body.fp-penca-page .penca-ranking-row-v3,
body.fp-penca-page .penca-ranking-row{
  border-radius:16px!important;
}

body.fp-penca-page .penca-ranking-row-v3.is-me,
body.fp-penca-page .penca-ranking-row.is-me{
  border-color:rgba(0,212,232,.26)!important;
  box-shadow:0 0 0 1px rgba(0,212,232,.10),0 14px 32px rgba(0,0,0,.16)!important;
}

body.fp-penca-page .penca-podium-medal-v3{
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}

/* Formularios */
body.fp-penca-page .penca-input-pro,
body.fp-penca-page .penca-textarea-pro,
body.fp-penca-page .penca-input,
body.fp-penca-page input,
body.fp-penca-page select,
body.fp-penca-page textarea{
  border-radius:16px!important;
}

body.fp-penca-page .penca-input-pro:focus,
body.fp-penca-page .penca-textarea-pro:focus,
body.fp-penca-page .penca-input:focus,
body.fp-penca-page input:focus,
body.fp-penca-page select:focus,
body.fp-penca-page textarea:focus{
  border-color:rgba(0,212,232,.38)!important;
  box-shadow:0 0 0 4px rgba(0,212,232,.075)!important;
}

/* Navegación móvil propia de Penca */
body.fp-penca-page .penca-mobile-nav{
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(7,11,19,.90)!important;
  backdrop-filter:blur(18px)!important;
  box-shadow:0 20px 44px rgba(0,0,0,.28)!important;
}

body.fp-penca-page .penca-mobile-nav a{
  border-radius:14px!important;
}

body.fp-penca-page .penca-mobile-nav a.active{
  background:rgba(0,212,232,.12)!important;
  color:var(--penca-cyan)!important;
}

/* Animación ligera */
body.fp-penca-page .penca-ux-reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .35s ease, transform .35s ease;
}

body.fp-penca-page .penca-ux-reveal.is-visible{
  opacity:1;
  transform:none;
}

/* Botón volver arriba exclusivo Penca */
body.fp-penca-page .penca-ux-top{
  position:fixed;
  right:14px;
  bottom:calc(96px + env(safe-area-inset-bottom,0px));
  width:42px;
  height:42px;
  border-radius:15px;
  border:1px solid rgba(0,212,232,.24);
  background:rgba(7,11,19,.90);
  color:var(--penca-cyan);
  z-index:10060;
  display:none;
  align-items:center;
  justify-content:center;
  font-weight:950;
  box-shadow:0 14px 34px rgba(0,0,0,.24);
  cursor:pointer;
}

body.fp-penca-page .penca-ux-top.show{
  display:flex;
}

/* Mobile */
@media(max-width:760px){
  body.fp-penca-page .penca-wrap,
  body.fp-penca-page .penca-play-wrap{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  body.fp-penca-page .penca-cinematic-hero,
  body.fp-penca-page .penca-app-hero,
  body.fp-penca-page .penca-play-hero,
  body.fp-penca-page .penca-profile-hero,
  body.fp-penca-page .penca-rank-hero-v3,
  body.fp-penca-page .penca-onboarding-hero{
    padding:22px!important;
    border-radius:24px!important;
  }

  body.fp-penca-page .penca-cinematic-title,
  body.fp-penca-page .penca-hero-title,
  body.fp-penca-page .penca-rank-title-v3,
  body.fp-penca-page .penca-play-copy h1{
    font-size:clamp(34px,11vw,48px)!important;
    line-height:.96!important;
  }

  body.fp-penca-page .penca-cinematic-copy,
  body.fp-penca-page .penca-hero-copy,
  body.fp-penca-page .penca-play-copy p{
    font-size:14px!important;
    line-height:1.62!important;
  }

  body.fp-penca-page .penca-app-row,
  body.fp-penca-page .penca-profile-grid,
  body.fp-penca-page .penca-rank-status-grid-v3,
  body.fp-penca-page .penca-group-grid-pro,
  body.fp-penca-page .penca-dashboard-groups-pro,
  body.fp-penca-page .penca-action-cards-pro{
    grid-template-columns:1fr!important;
  }

  body.fp-penca-page .penca-actions,
  body.fp-penca-page .penca-cinematic-actions,
  body.fp-penca-page .penca-play-actions,
  body.fp-penca-page .penca-submit-row,
  body.fp-penca-page .penca-share-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  body.fp-penca-page .penca-btn,
  body.fp-penca-page .penca-action-main,
  body.fp-penca-page .penca-action-ghost,
  body.fp-penca-page .penca-share-btn{
    width:100%!important;
  }

  body.fp-penca-page .penca-share-compact,
  body.fp-penca-page .penca-share-main{
    grid-template-columns:1fr!important;
    text-align:center!important;
  }

  body.fp-penca-page .penca-stage-bottom-save{
    bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;
  }
}


/* ============================================================
   HOTFIX — títulos de formularios Penca visibles
   Corrige títulos negros en Crear grupo / Unirse.
   ============================================================ */

body.fp-penca-page .penca-form-card h1,
body.fp-penca-page .penca-form-card h2,
body.fp-penca-page .penca-form-card h3,
body.fp-penca-page .penca-join-card h1,
body.fp-penca-page .penca-join-card h2,
body.fp-penca-page .penca-join-card h3,
body.fp-penca-page .penca-card h1,
body.fp-penca-page .penca-card h2,
body.fp-penca-page .penca-card h3,
body.fp-penca-page .penca-app-panel h1,
body.fp-penca-page .penca-app-panel h2,
body.fp-penca-page .penca-app-panel h3,
body.fp-penca-page .penca-onboarding-card h1,
body.fp-penca-page .penca-onboarding-card h2,
body.fp-penca-page .penca-onboarding-card h3,
body.fp-penca-page .penca-section-title,
body.fp-penca-page .penca-form-title,
body.fp-penca-page .penca-panel-title{
  color:#f8fafc!important;
  text-shadow:0 10px 28px rgba(0,0,0,.22);
}

body.fp-penca-page .penca-form-card p,
body.fp-penca-page .penca-join-card p,
body.fp-penca-page .penca-card p,
body.fp-penca-page .penca-app-panel p,
body.fp-penca-page .penca-onboarding-card p,
body.fp-penca-page .penca-form-card label,
body.fp-penca-page .penca-join-card label,
body.fp-penca-page .penca-card label,
body.fp-penca-page .penca-app-panel label{
  color:#9fb0c8!important;
}

body.fp-penca-page .penca-form-card .penca-muted,
body.fp-penca-page .penca-join-card .penca-muted,
body.fp-penca-page .penca-card .penca-muted,
body.fp-penca-page .penca-app-panel .penca-muted{
  color:#8ea0ba!important;
}

body.fp-penca-page .penca-form-card input,
body.fp-penca-page .penca-form-card textarea,
body.fp-penca-page .penca-join-card input,
body.fp-penca-page .penca-join-card textarea{
  background:#f8fafc!important;
  color:#0f172a!important;
}

body.fp-penca-page .penca-form-card input::placeholder,
body.fp-penca-page .penca-form-card textarea::placeholder,
body.fp-penca-page .penca-join-card input::placeholder,
body.fp-penca-page .penca-join-card textarea::placeholder{
  color:#64748b!important;
}