/* Phi Pay: los 5 diseños de panel (phi, orbita, espejo, cristal, nexo). Cargar DESPUÉS de pay.css.
   Mismo DOM y mismo contenido: solo cambia el diseño con html[data-panel="..."].
   Los diseños de escritorio solo aplican desde 721px; en celular todos conservan la barra de pestañas original. */

/* ---------- paletas (claro y noche, distintas entre sí) ---------- */
html[data-panel="orbita"]{--bg:#eef1ff;--surface2:#f4f6ff;--line:#dce2fa;--ink:#0d1330;--ink-soft:#56608a;--ink-faint:#8f98bd;--accent:#4361ee;--accent2:#06b6d4;--accent3:#a78bfa;--r:22px}
html[data-theme="dark"][data-panel="orbita"]{--bg:#050a1c;--surface:#0e1630;--surface2:#131d3d;--line:#1d2a58;--ink:#e8efff;--ink-soft:#97a5d6;--ink-faint:#64739f;--accent:#60a5fa;--accent2:#22d3ee;--accent3:#a78bfa}
html[data-panel="espejo"]{--bg:#f7f3ec;--surface:#fffdf8;--surface2:#f3eee3;--line:#e4dccd;--ink:#1f1a14;--ink-soft:#6b6355;--ink-faint:#9a9182;--accent:#9a3412;--accent2:#c2410c;--accent3:#0f766e;--r:10px;--sh:0 1px 0 rgba(60,40,10,.04);--sh-hover:0 10px 24px -14px rgba(90,50,10,.35)}
html[data-theme="dark"][data-panel="espejo"]{--bg:#14110d;--surface:#1c1813;--surface2:#231e18;--line:#352e24;--ink:#f4ede1;--ink-soft:#b9ae9c;--ink-faint:#85796a;--accent:#f59e6b;--accent2:#fb923c;--accent3:#5eead4;--sh:none}
html[data-panel="cristal"]{--bg:#fdeef4;--surface:#ffffff;--surface2:#fff4f8;--line:#f4d4e0;--ink:#2a0d19;--ink-soft:#7a4a5e;--ink-faint:#ad8497;--accent:#e0457b;--accent2:#f97316;--accent3:#a855f7;--r:26px}
html[data-theme="dark"][data-panel="cristal"]{--bg:#18080f;--surface:#2a1220;--surface2:#331828;--line:#4a2740;--ink:#ffeef5;--ink-soft:#d8a9c0;--ink-faint:#9b6f86;--accent:#ff7aa8;--accent2:#ffa24d;--accent3:#c084fc}
html[data-panel="nexo"]{--bg:#eef2ef;--surface:#ffffff;--surface2:#f4f8f5;--line:#dae4de;--ink:#0b1410;--ink-soft:#4c5d55;--ink-faint:#7f918a;--accent:#059669;--accent2:#0d9488;--accent3:#84cc16;--r:24px}
html[data-theme="dark"][data-panel="nexo"]{--bg:#050908;--surface:#0e1512;--surface2:#131c18;--line:#1d2b25;--ink:#e9fff4;--ink-soft:#9bb8aa;--ink-faint:#67857a;--accent:#34d399;--accent2:#2dd4bf;--accent3:#a3e635}

em.lw{font-style:normal}

/* ---------- fondos ---------- */
html[data-panel="orbita"] body::before{background:radial-gradient(55% 55% at 12% 6%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 70%),radial-gradient(50% 50% at 92% 14%,color-mix(in srgb,var(--accent2) 30%,transparent),transparent 70%),radial-gradient(48% 48% at 60% 100%,color-mix(in srgb,var(--accent3) 28%,transparent),transparent 70%);animation:thDrift 16s ease-in-out infinite alternate}
@keyframes thDrift{0%{transform:translate3d(-2%,0,0) scale(1)}100%{transform:translate3d(3%,-3%,0) scale(1.08)}}
html[data-panel="espejo"] body::before{display:none}
html[data-panel="cristal"] body::before{background:radial-gradient(50% 46% at 10% 8%,color-mix(in srgb,var(--accent) 40%,transparent),transparent 70%),radial-gradient(46% 44% at 92% 20%,color-mix(in srgb,var(--accent2) 36%,transparent),transparent 70%),radial-gradient(52% 48% at 55% 100%,color-mix(in srgb,var(--accent3) 34%,transparent),transparent 70%)}
html[data-panel="nexo"] body::before{background:radial-gradient(40% 36% at 85% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)}

/* ---------- ESPEJO: editorial ---------- */
html[data-panel="espejo"] .hero h1,html[data-panel="espejo"] .card h3,html[data-panel="espejo"] .modal h2{font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;font-weight:500}
html[data-panel="espejo"] em.lw{font-style:italic;color:var(--accent)}
html[data-panel="espejo"] .hero{background:none;color:var(--ink);box-shadow:none;border-radius:0;padding:6px 0 20px;border-bottom:1px solid var(--line)}
html[data-panel="espejo"] .hero::before,html[data-panel="espejo"] .hero .bg-ic{display:none}
html[data-panel="espejo"] .hero h1{font-size:clamp(30px,4vw,44px)}
html[data-panel="espejo"] .hero p{color:var(--ink-soft);opacity:1}
html[data-panel="espejo"] .btn.white{background:var(--ink);color:var(--bg);border-color:var(--ink)}
html[data-panel="espejo"] .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
html[data-panel="espejo"] .card,html[data-panel="espejo"] .kpi{border-radius:10px;box-shadow:none}
html[data-panel="espejo"] .card::before,html[data-panel="espejo"] .kpi::before{height:2px;background:var(--accent)}
html[data-panel="espejo"] .grid.g4.k{gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
html[data-panel="espejo"] .grid.g4.k .kpi{border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
html[data-panel="espejo"] .grid.g4.k .kpi:last-child{border-right:0}
html[data-panel="espejo"] .grid.g4.k .kpi::before{display:none}
html[data-panel="espejo"] .kpi.hot{background:var(--ink)!important;color:var(--bg)}
html[data-panel="espejo"] .kpi.hot .lbl,html[data-panel="espejo"] .kpi.hot .ctx{color:color-mix(in srgb,var(--bg) 75%,transparent)}
html[data-panel="espejo"] .kpi .ico,html[data-panel="espejo"] .card h3 .ico{border-radius:8px}
html[data-panel="espejo"] .kpi .val{font-family:"Iowan Old Style",Georgia,serif;font-weight:500}
html[data-panel="espejo"] .bar,html[data-panel="espejo"] .bar.cur,html[data-panel="espejo"] .bar.max{border-radius:4px 4px 0 0}
html[data-panel="espejo"] .btn.primary,html[data-panel="espejo"] .chip.on,html[data-panel="espejo"] .nav a.on{background:var(--ink);color:var(--bg);border-color:var(--ink);box-shadow:none}

/* ---------- CRISTAL: vidrio ---------- */
html[data-panel="cristal"] .card,html[data-panel="cristal"] .kpi,html[data-panel="cristal"] .subcard,html[data-panel="cristal"] .modal{background:color-mix(in srgb,var(--surface) 58%,transparent);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.55);box-shadow:0 18px 40px -22px color-mix(in srgb,var(--accent) 60%,transparent)}
html[data-theme="dark"][data-panel="cristal"] .card,html[data-theme="dark"][data-panel="cristal"] .kpi,html[data-theme="dark"][data-panel="cristal"] .subcard{border-color:rgba(255,255,255,.12)}
html[data-panel="cristal"] .kpi.hot{background:var(--grad)}
html[data-panel="cristal"] .hero{border-radius:34px}
html[data-panel="cristal"] input,html[data-panel="cristal"] select,html[data-panel="cristal"] textarea{background:color-mix(in srgb,var(--surface) 55%,transparent)}

/* ---------- diseños con layout propio (solo escritorio) ---------- */
@media (min-width:721px){
  html:not([data-panel="phi"]) .app{grid-template-columns:1fr}

  /* ÓRBITA: barra superior fija + dock flotante con ícono y texto */
  html[data-panel="orbita"] .side{position:fixed;top:0;left:0;right:0;height:76px;flex-direction:row;align-items:center;gap:16px;padding:0 24px;background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(18px) saturate(1.5);border:0;border-bottom:1px solid var(--line)}
  html[data-panel="orbita"] .brand{padding:0}html[data-panel="orbita"] .brand small{display:none}
  html[data-panel="orbita"] .nav{display:flex;gap:2px;margin:0 auto;padding:6px;border-radius:26px;background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--line);box-shadow:var(--sh)}
  html[data-panel="orbita"] .nav-label{display:none}
  html[data-panel="orbita"] .nav a{flex-direction:column;justify-content:center;gap:2px;width:92px;padding:8px 4px;font-size:11px;text-align:center;border-radius:20px;animation:none}
  html[data-panel="orbita"] .nav a .pill{position:absolute;top:3px;right:16px;margin:0}
  html[data-panel="orbita"] .side-foot{margin:0;flex-direction:row;align-items:center}
  html[data-panel="orbita"] .env-chip{display:none}html[data-panel="orbita"] .theme-btn span{display:none}
  html[data-panel="orbita"] main{padding-top:104px;max-width:1280px;margin:0 auto;width:100%}

  /* ESPEJO: barra superior con pestañas en caja */
  html[data-panel="espejo"] .side{position:fixed;top:0;left:0;right:0;height:64px;flex-direction:row;align-items:center;gap:14px;padding:0 24px;background:var(--surface);border:0;border-bottom:1px solid var(--line)}
  html[data-panel="espejo"] .brand{padding:0}html[data-panel="espejo"] .brand small{display:none}
  html[data-panel="espejo"] .brand-mark{border-radius:8px;background:var(--ink);color:var(--bg);box-shadow:none}html[data-panel="espejo"] .brand-mark::after{display:none}
  html[data-panel="espejo"] .nav{display:flex;gap:5px;margin-left:12px}
  html[data-panel="espejo"] .nav-label{display:none}
  html[data-panel="espejo"] .nav a{flex-direction:row;gap:7px;padding:7px 11px;font-size:13px;border:1px solid var(--line);border-radius:8px;background:var(--surface);animation:none}
  html[data-panel="espejo"] .nav a .pill{margin-left:2px}
  html[data-panel="espejo"] .side-foot{margin:0 0 0 auto;flex-direction:row;align-items:center}
  html[data-panel="espejo"] .env-chip{display:none}html[data-panel="espejo"] .theme-btn span{display:none}
  html[data-panel="espejo"] main{padding-top:92px;max-width:1240px;margin:0 auto;width:100%}

  /* CRISTAL: riel flotante de vidrio de 76px */
  html[data-panel="cristal"] .side{position:fixed;left:14px;top:14px;bottom:14px;width:76px;height:auto;padding:16px 8px;align-items:center;border-radius:32px;background:color-mix(in srgb,var(--accent) 80%,#2a0d09);border:1px solid rgba(255,255,255,.28);box-shadow:0 30px 60px -24px color-mix(in srgb,var(--accent) 70%,#000);color:#fff;overflow:hidden auto;scrollbar-width:none;z-index:60}
  html[data-panel="cristal"] .brand{padding:0 0 12px}html[data-panel="cristal"] .brand>div:last-child{display:none}
  html[data-panel="cristal"] .brand-mark{background:rgba(255,255,255,.22);box-shadow:none}
  html[data-panel="cristal"] .nav{display:grid;gap:4px;justify-items:center;width:100%}
  html[data-panel="cristal"] .nav-label{display:none}
  html[data-panel="cristal"] .nav a{width:48px;height:48px;padding:0;justify-content:center;color:rgba(255,255,255,.82);border-radius:17px;animation:none}
  html[data-panel="cristal"] .nav a span:not(.pill){display:none}
  html[data-panel="cristal"] .nav a:hover{background:rgba(255,255,255,.18);color:#fff}
  html[data-panel="cristal"] .nav a.on{background:#fff;color:var(--accent);box-shadow:0 8px 20px -8px rgba(0,0,0,.45)}
  html[data-panel="cristal"] .nav a .pill{position:absolute;top:1px;right:1px;margin:0;padding:0 5px}
  html[data-panel="cristal"] .side-foot{margin-top:auto;width:100%;justify-items:center}
  html[data-panel="cristal"] .env-chip{display:none}
  html[data-panel="cristal"] .theme-btn{width:48px;height:48px;padding:0;justify-content:center;background:rgba(255,255,255,.18);border:0;color:#fff;margin:0 auto}html[data-panel="cristal"] .theme-btn span{display:none}
  html[data-panel="cristal"] main{padding-left:122px;padding-top:26px;max-width:1360px}

  /* NEXO: dock fijo inferior (el aside no lleva blur ni transform) */
  html[data-panel="nexo"] .side{position:static;display:contents}
  html[data-panel="nexo"] .brand{position:fixed;top:14px;left:22px;z-index:60;padding:0}html[data-panel="nexo"] .brand small{display:none}
  html[data-panel="nexo"] .nav{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;gap:2px;padding:8px;border-radius:32px;background:color-mix(in srgb,var(--ink) 94%,transparent);backdrop-filter:blur(16px);box-shadow:0 26px 50px -18px rgba(0,0,0,.55);max-width:calc(100vw - 28px);overflow-x:auto;scrollbar-width:none}
  html[data-panel="nexo"] .nav-label{display:none}
  html[data-panel="nexo"] .nav a{flex:none;flex-direction:column;justify-content:center;gap:2px;width:74px;padding:8px 2px;font-size:10.5px;text-align:center;color:color-mix(in srgb,var(--bg) 72%,transparent);border-radius:24px;animation:none}
  html[data-panel="nexo"] .nav a:hover{background:color-mix(in srgb,var(--bg) 14%,transparent);color:var(--bg)}
  html[data-panel="nexo"] .nav a.on{background:var(--accent);color:#04130c;box-shadow:none}
  html[data-panel="nexo"] .nav a .pill{position:absolute;top:2px;right:12px;margin:0}
  html[data-panel="nexo"] .side-foot{position:fixed;top:14px;right:22px;z-index:60;margin:0;flex-direction:row}
  html[data-panel="nexo"] .env-chip{display:none}html[data-panel="nexo"] .theme-btn span{display:none}
  html[data-panel="nexo"] main{padding-top:86px;padding-bottom:130px;max-width:1240px;margin:0 auto;width:100%}
  html[data-panel="nexo"] .hero::after,html[data-panel="nexo"] .kpi.hot::after{content:"";position:absolute;right:-70px;top:50%;width:340px;height:340px;transform:translateY(-50%);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 20px,rgba(255,255,255,.17) 21px 23px);pointer-events:none}
  html[data-panel="nexo"] .kpi.hot::after{width:170px;height:170px;right:-40px}
  html[data-panel="nexo"] .hero{border-radius:32px;padding:34px clamp(22px,3vw,40px)}
  html[data-panel="nexo"] .kpi.hot{border-radius:24px}

  /* íconos solos cuando falta espacio */
  @media (max-width:1560px){html[data-panel="orbita"] .nav a{width:78px}}
  @media (max-width:1180px){html[data-panel="orbita"] .nav a{width:48px}html[data-panel="orbita"] .nav a span:not(.pill){display:none}}
  @media (max-width:1560px){html[data-panel="espejo"] .nav a span:not(.pill){display:none}html[data-panel="espejo"] .nav a.on span:not(.pill){display:inline}}
  @media (max-width:1180px){html[data-panel="nexo"] .nav a{width:64px}}
}

/* ---------- miniaturas para elegir diseño ---------- */
.mp{position:relative;height:96px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--pbg,#eef0fb)}
.mp i{position:absolute;display:block;border-radius:5px}
.mp-phi{--pbg:#eef0fb;--pa:#4f46e5}.mp-orbita{--pbg:#dfe7ff;--pa:#4361ee}.mp-espejo{--pbg:#f7f3ec;--pa:#9a3412}.mp-cristal{--pbg:#fbdbe6;--pa:#e0457b}.mp-nexo{--pbg:#e3ebe6;--pa:#059669}
html[data-theme="dark"] .mp-phi{--pbg:#171a38}html[data-theme="dark"] .mp-orbita{--pbg:#0b1530}html[data-theme="dark"] .mp-espejo{--pbg:#1c1813}html[data-theme="dark"] .mp-cristal{--pbg:#2a1220}html[data-theme="dark"] .mp-nexo{--pbg:#0e1512}
.mp i:nth-child(1){background:var(--pa);opacity:.9}
.mp i:nth-child(2){background:linear-gradient(135deg,var(--pa),color-mix(in srgb,var(--pa) 50%,#000))}
.mp i:nth-child(3),.mp i:nth-child(4),.mp i:nth-child(5){background:color-mix(in srgb,#fff 82%,var(--pa))}
html[data-theme="dark"] .mp i:nth-child(3),html[data-theme="dark"] .mp i:nth-child(4),html[data-theme="dark"] .mp i:nth-child(5){background:color-mix(in srgb,#000 55%,var(--pa))}
.mp-phi i:nth-child(1){left:0;top:0;bottom:0;width:22%;border-radius:0;opacity:.18}
.mp-phi i:nth-child(2){left:27%;right:6%;top:10%;height:34%}
.mp-phi i:nth-child(3){left:27%;width:21%;top:52%;height:36%}.mp-phi i:nth-child(4){left:51%;width:21%;top:52%;height:36%}.mp-phi i:nth-child(5){left:75%;width:19%;top:52%;height:36%}
.mp-orbita i:nth-child(1){left:0;right:0;top:0;height:15%;border-radius:0;opacity:.18}
.mp-orbita i:nth-child(2){left:22%;right:22%;top:20%;height:8%;border-radius:99px;opacity:.9;background:var(--pa)}
.mp-orbita i:nth-child(3){left:6%;right:6%;top:34%;height:26%;background:linear-gradient(135deg,var(--pa),#22d3ee)}
.mp-orbita i:nth-child(4){left:6%;width:42%;top:66%;height:24%}.mp-orbita i:nth-child(5){left:52%;width:42%;top:66%;height:24%}
.mp-espejo i:nth-child(1){left:0;right:0;top:0;height:15%;border-radius:0;background:var(--pbg);border-bottom:1px solid color-mix(in srgb,var(--pa) 30%,transparent);opacity:1}
.mp-espejo i:nth-child(2){left:6%;top:26%;width:46%;height:9%;border-radius:2px;background:#1f1a14}
html[data-theme="dark"] .mp-espejo i:nth-child(2){background:#f4ede1}
.mp-espejo i:nth-child(3){left:6%;right:6%;top:46%;height:16%;border-radius:3px;background:none;border:1px solid color-mix(in srgb,var(--pa) 40%,transparent)}
.mp-espejo i:nth-child(4){left:6%;width:42%;top:68%;height:22%;border-radius:3px}.mp-espejo i:nth-child(5){left:52%;width:42%;top:68%;height:22%;border-radius:3px}
.mp-cristal i:nth-child(1){left:3%;top:6%;bottom:6%;width:11%;border-radius:12px}
.mp-cristal i:nth-child(2){left:19%;right:5%;top:8%;height:32%;border-radius:12px;background:linear-gradient(135deg,#e0457b,#f97316)}
.mp-cristal i:nth-child(3){left:19%;width:35%;top:48%;height:42%;border-radius:12px;background:rgba(255,255,255,.55)}.mp-cristal i:nth-child(4){left:58%;width:37%;top:48%;height:42%;border-radius:12px;background:rgba(255,255,255,.55)}
html[data-theme="dark"] .mp-cristal i:nth-child(3),html[data-theme="dark"] .mp-cristal i:nth-child(4){background:rgba(255,255,255,.12)}
.mp-cristal i:nth-child(5){display:none}
.mp-nexo i:nth-child(1){left:24%;right:24%;bottom:6%;height:12%;border-radius:99px;background:#0b1410;opacity:1}
html[data-theme="dark"] .mp-nexo i:nth-child(1){background:#e9fff4}
.mp-nexo i:nth-child(2){left:6%;right:6%;top:8%;height:38%;border-radius:12px}
.mp-nexo i:nth-child(3){left:6%;width:42%;top:52%;height:28%;border-radius:8px}.mp-nexo i:nth-child(4){left:52%;width:42%;top:52%;height:28%;border-radius:8px}.mp-nexo i:nth-child(5){display:none}
.tpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:6px 0 4px}
.tcard{text-align:left;border:2px solid var(--line);border-radius:18px;padding:10px;background:var(--surface);cursor:pointer;transition:transform .25s var(--ease),border-color .2s,box-shadow .25s;color:var(--ink)}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--sh-hover)}
.tcard.sel{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.tcard b{display:block;margin-top:9px}.tcard small{display:block;color:var(--ink-faint);font-size:12px;line-height:1.35;margin-top:2px}