/* ===================================================================== PelisAnime · Cuenta unificada — INTERFAZ DE ESCRITORIO (diseño v3.3.2) --------------------------------------------------------------------- Sustituye el aspecto de escritorio del plugin por el del mockup HTML: 12 paletas intercambiables, barra lateral con tarjeta de usuario, tarjetas minimalistas y tablas/formularios coherentes. - Solo afecta a pantallas > 600px (el móvil no se toca). - Se carga DESPUÉS de pelisanime-cuenta-unificada.css y lo reemplaza visualmente sin tocar la lógica (router AJAX, PMS, WooCommerce, Stripe). - "#pa-app#pa-app" = #pa-app#pa-app (doble id para ganar a las reglas antiguas). ===================================================================== */ @media (min-width:601px){ /* --------------------------------------------------------------------- 1 · PALETAS --------------------------------------------------------------------- */ #pa-app#pa-app, #pa-app#pa-app[data-pa-theme="grafito"]{color-scheme:dark;--bg:#0a0a0c;--card:#111114;--tx:#ededf0;--ac:#818cf8;--btn:#ededf0;--btnt:#0a0a0c} #pa-app#pa-app[data-pa-theme="papel"]{color-scheme:light;--bg:#f6f5f2;--card:#ffffff;--tx:#18181b;--ac:#0f766e;--btn:#18181b;--btnt:#ffffff} #pa-app#pa-app[data-pa-theme="oceano"]{color-scheme:dark;--bg:#070d14;--card:#0d1620;--tx:#e6eef7;--ac:#38bdf8;--btn:#38bdf8;--btnt:#04131d} #pa-app#pa-app[data-pa-theme="bosque"]{color-scheme:dark;--bg:#080c0a;--card:#0f1511;--tx:#e8f0ea;--ac:#4ade80;--btn:#4ade80;--btnt:#05160b} #pa-app#pa-app[data-pa-theme="atardecer"]{color-scheme:dark;--bg:#0e0a09;--card:#181210;--tx:#f5ece8;--ac:#fb923c;--btn:#fb923c;--btnt:#1c0b02} #pa-app#pa-app[data-pa-theme="lavanda"]{color-scheme:light;--bg:#f7f5fc;--card:#ffffff;--tx:#1e1b2e;--ac:#7c3aed;--btn:#7c3aed;--btnt:#ffffff} #pa-app#pa-app[data-pa-theme="medianoche"]{color-scheme:dark;--bg:#000000;--card:#0c0c0e;--tx:#f2f2f5;--ac:#3b82f6;--btn:#f2f2f5;--btnt:#000000} #pa-app#pa-app[data-pa-theme="rosa"]{color-scheme:dark;--bg:#0d080b;--card:#170f13;--tx:#f7eaf0;--ac:#f472b6;--btn:#f472b6;--btnt:#2a0716} #pa-app#pa-app[data-pa-theme="ambar"]{color-scheme:dark;--bg:#0f0f10;--card:#18181a;--tx:#f4f4f5;--ac:#facc15;--btn:#facc15;--btnt:#1a1500} #pa-app#pa-app[data-pa-theme="arena"]{color-scheme:light;--bg:#f4efe6;--card:#fffdf8;--tx:#2b2118;--ac:#b45309;--btn:#2b2118;--btnt:#fffdf8} #pa-app#pa-app[data-pa-theme="menta"]{color-scheme:light;--bg:#f1f7f4;--card:#ffffff;--tx:#10231b;--ac:#059669;--btn:#059669;--btnt:#ffffff} #pa-app#pa-app[data-pa-theme="cielo"]{color-scheme:light;--bg:#f2f6fb;--card:#ffffff;--tx:#0f1b2d;--ac:#2563eb;--btn:#2563eb;--btnt:#ffffff} /* valores derivados (a partir de los 6 base) */ #pa-app#pa-app{ --ac-s:color-mix(in srgb,var(--ac) 13%,transparent); --sb:color-mix(in srgb,var(--bg),var(--card) 55%); --s2:color-mix(in srgb,var(--card),var(--tx) 7%); --bd:color-mix(in srgb,var(--tx) 10%,transparent);--b2:color-mix(in srgb,var(--tx) 18%,transparent); --mu:color-mix(in srgb,var(--tx) 58%,var(--bg));--mu2:color-mix(in srgb,var(--tx) 38%,var(--bg));--txs:color-mix(in srgb,var(--tx) 76%,var(--bg)); --h1:color-mix(in srgb,var(--tx) 5%,transparent);--h2:color-mix(in srgb,var(--tx) 8.5%,transparent);--line:color-mix(in srgb,var(--tx) 6.5%,transparent); --pop:var(--card); --sh:0 1px 2px color-mix(in srgb,var(--tx) 7%,transparent); --btnh:color-mix(in srgb,var(--btn) 86%,var(--bg)); --gr:light-dark(#0f9d6b,#4ade80);--danger:light-dark(#d9482b,#f0785a);--amber:light-dark(#9a6412,#e5b94e); --cc1:color-mix(in srgb,var(--ac) 38%,#101012);--cc2:color-mix(in srgb,var(--ac) 8%,#08080a); --scr:color-mix(in srgb,var(--card),var(--tx) 15%);--sw:color-mix(in srgb,var(--card),var(--tx) 20%);--tk:color-mix(in srgb,var(--tx) 9%,transparent); --inp:color-mix(in srgb,var(--bg),var(--card) 45%); --ease:cubic-bezier(.4,0,.2,1); --pa-header-offset:61px; } /* --------------------------------------------------------------------- 2 · CASCARÓN (#pa-app): sidebar + contenido --------------------------------------------------------------------- */ #pa-app#pa-app{ background:var(--bg) !important;color:var(--tx) !important; font:14px/1.5 Inter,Arial,Helvetica,sans-serif !important; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; font-variant-numeric:tabular-nums; transition:background-color .25s,color .25s; } #pa-app#pa-app ::selection{background:var(--ac-s);color:var(--tx)} #pa-app#pa-app a{color:inherit;text-decoration:none} /* barra lateral */ #pa-app#pa-app .pa-sidebar{ width:264px !important;min-width:264px !important;flex:0 0 264px !important; height:100vh !important;display:flex !important;flex-direction:column !important; padding:91px 14px 22px !important; background:var(--sb) !important;border-right:1px solid var(--bd) !important; box-shadow:none !important;position:relative !important;z-index:10 !important; overflow:visible !important;transition:background-color .25s,border-color .25s; } #pa-app#pa-app .pa-sidebar::before,#pa-app#pa-app .pa-sidebar::after{display:none !important} #pa-app#pa-app .pa-sidebar-brand{display:none !important} #pa-app#pa-app .pa-sidebar-nav{display:flex !important;flex-direction:column;gap:5px !important;transform:none !important;margin:0 !important;padding:0 !important} #pa-app#pa-app .pa-nav-item{ position:relative;display:flex !important;align-items:center;gap:12px !important; min-height:42px !important;height:auto !important;padding:0 13px !important; border-radius:10px !important;border:0 !important;background:transparent !important;box-shadow:none !important; color:var(--mu) !important;font:500 13px/1.2 Inter,Arial,sans-serif !important;cursor:pointer; transition:background-color .2s var(--ease),color .2s var(--ease) !important; } #pa-app#pa-app .pa-nav-item:hover{background:var(--h1) !important;color:var(--tx) !important;transform:none !important} #pa-app#pa-app .pa-nav-item.active{background:var(--ac-s) !important;color:var(--tx) !important;font-weight:600 !important} #pa-app#pa-app .pa-nav-item.active::before{ content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--ac);box-shadow:none; } #pa-app#pa-app .pa-nav-icon{display:grid !important;place-items:center;width:26px !important;min-width:26px !important;height:auto !important;background:none !important;border:0 !important;color:var(--mu) !important;font-size:18px} #pa-app#pa-app .pa-nav-icon svg{width:18px !important;height:18px !important;stroke-width:1.8} #pa-app#pa-app .pa-nav-item:hover .pa-nav-icon,#pa-app#pa-app .pa-nav-item.active .pa-nav-icon{color:var(--ac) !important} #pa-app#pa-app .pa-nav-label{flex:1;text-align:left} #pa-app#pa-app .pa-nav-badge{ margin-left:auto;padding:3px 8px !important;border-radius:999px !important; background:var(--ac-s) !important;color:var(--ac) !important; font:800 8px/1.2 Inter,Arial,sans-serif !important;letter-spacing:.04em;box-shadow:none !important; } #pa-app#pa-app .pa-nav-item:focus-visible,#pa-app#pa-app .pa-logout:focus-visible,#pa-app#pa-app .pa-theme-option:focus-visible,#pa-app#pa-app .pa-primary-button:focus-visible{outline:2px solid var(--ac);outline-offset:2px} /* parte inferior: tema, usuario, cerrar sesión */ #pa-app#pa-app .pa-sidebar-bottom{margin-top:auto !important;padding:0 !important;border:0 !important;position:relative;z-index:1} #pa-app#pa-app .pa-theme{position:relative;margin-bottom:6px} #pa-app#pa-app .pa-theme-toggle{width:100%;text-align:left;font-family:inherit} #pa-app#pa-app .pa-theme-toggle[aria-expanded="true"] .pa-nav-icon{color:var(--ac) !important} #pa-app#pa-app .pa-theme-panel{ display:none;position:absolute;left:calc(100% + 24px);bottom:0;width:340px;max-height:70vh;overflow:auto;padding:12px; border-radius:14px;background:var(--pop);border:1px solid var(--b2);box-shadow:0 30px 60px -24px rgba(0,0,0,.45);z-index:50; } #pa-app#pa-app .pa-theme-panel.is-open{display:block} #pa-app#pa-app .pa-theme-panel h4{display:flex;justify-content:space-between;margin:0 0 10px;font:600 11px/1.2 Inter,sans-serif;letter-spacing:.4px;color:var(--mu);text-transform:uppercase} #pa-app#pa-app .pa-theme-panel h4::after{content:"12";color:var(--mu2)} #pa-app#pa-app .pa-theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} #pa-app#pa-app .pa-theme-option{ display:flex;flex-direction:column;gap:7px;align-items:flex-start;padding:8px;border-radius:10px; border:1px solid var(--bd);background:transparent;color:var(--tx);font:500 11.5px Inter,sans-serif;cursor:pointer;text-align:left; } #pa-app#pa-app .pa-theme-option:hover{border-color:var(--b2)} #pa-app#pa-app .pa-theme-option[aria-pressed="true"]{border-color:var(--ac);background:var(--ac-s)} #pa-app#pa-app .pa-theme-swatches{display:flex;width:100%;height:24px;border-radius:7px;overflow:hidden;border:1px solid rgba(128,128,128,.25)} #pa-app#pa-app .pa-theme-swatches i{flex:1}#pa-app#pa-app .pa-theme-swatches i:nth-child(1){flex:2} #pa-app#pa-app .pa-me{display:flex;gap:11px;align-items:center;padding:12px;margin-bottom:8px;border-radius:14px;background:var(--card);border:1px solid var(--bd)} #pa-app#pa-app .pa-me-avatar{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 14px Inter,sans-serif;background:var(--cc1);color:#fff} #pa-app#pa-app .pa-me-info{min-width:0} #pa-app#pa-app .pa-me-info b{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #pa-app#pa-app .pa-me-info small{display:block;font-size:10.5px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #pa-app#pa-app .pa-me-info small.is-active{color:var(--gr)} #pa-app#pa-app .pa-logout{ display:flex !important;align-items:center;gap:12px !important;min-height:42px !important;padding:0 13px !important;border-radius:10px !important; color:var(--mu) !important;font:500 13px/1.2 Inter,Arial,sans-serif !important;background:transparent !important; } #pa-app#pa-app .pa-logout:hover{background:var(--h1) !important;color:var(--tx) !important} #pa-app#pa-app .pa-logout .pa-nav-icon{color:var(--mu) !important} /* contenido */ #pa-app#pa-app .pa-main{ flex:1 1 auto !important;min-width:0 !important;height:100vh !important; padding:calc(var(--pa-header-offset) + 36px) 40px 56px !important; background:transparent !important;overflow-y:auto !important;overflow-x:hidden !important; scrollbar-width:thin;scrollbar-color:var(--scr) transparent; } #pa-app#pa-app .pa-main::-webkit-scrollbar{width:10px} #pa-app#pa-app .pa-main::-webkit-scrollbar-track{background:transparent} #pa-app#pa-app .pa-main::-webkit-scrollbar-thumb{background:var(--scr);border-radius:10px;border:3px solid var(--bg)} #pa-app#pa-app .pa-content{width:100% !important;max-width:1240px;height:auto !important;min-height:0 !important;margin:0 !important;padding:0 !important;overflow:visible !important} #pa-app#pa-app #pa-dashboard-content.pa-dashboard-grid{ display:block !important;width:100% !important;max-width:none !important;height:auto !important;min-height:0 !important;max-height:none !important; margin:0 !important;padding:0 !important;overflow:visible !important;transform:none !important;background:transparent !important; } /* el Inicio es una cuadrícula 70/30 */ #pa-app#pa-app #pa-dashboard-content.pa-dashboard-grid[data-pa-page="inicio"]{ display:grid !important;grid-template-columns:minmax(0,70fr) minmax(0,30fr) !important;gap:22px !important;align-items:start; } #pa-app#pa-app .pa-center{display:flex !important;flex-direction:column;gap:18px;min-width:0;width:auto !important;max-width:none !important;transform:none !important;padding:0 !important} #pa-app#pa-app .pa-right{display:flex !important;flex-direction:column;gap:18px;min-width:0;width:auto !important;max-width:none !important;transform:none !important;padding:0 !important;position:static !important} @keyframes pa-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} #pa-app#pa-app #pa-dashboard-content > *,#pa-app#pa-app .pa-center > *,#pa-app#pa-app .pa-right > *{animation:pa-rise .45s cubic-bezier(.2,.7,.2,1) both} #pa-app#pa-app .pa-center > *:nth-child(2),#pa-app#pa-app .pa-right > *:nth-child(2){animation-delay:.05s} #pa-app#pa-app .pa-center > *:nth-child(3),#pa-app#pa-app .pa-right > *:nth-child(3){animation-delay:.1s} #pa-app#pa-app .pa-center > *:nth-child(n+4),#pa-app#pa-app .pa-right > *:nth-child(n+4){animation-delay:.15s} #pa-app#pa-app.pa-reduce-motion *{animation:none !important;transition:none !important} /* --------------------------------------------------------------------- 2b · NEUTRALIZAR RESTOS DEL DISEÑO ANTERIOR --------------------------------------------------------------------- */ #pa-app#pa-app svg[fill="currentColor"]{fill:currentColor !important;stroke:none !important} #pa-app#pa-app .pa-welcome::before,#pa-app#pa-app .pa-welcome::after,#pa-app#pa-app .pa-card::before,#pa-app#pa-app .pa-card::after, #pa-app#pa-app .pa-side-card::before,#pa-app#pa-app .pa-side-card::after,#pa-app#pa-app .pa-support::before,#pa-app#pa-app .pa-support::after, #pa-app#pa-app .pa-secure::before,#pa-app#pa-app .pa-secure::after,#pa-app#pa-app .pa-action::before,#pa-app#pa-app .pa-action::after, #pa-app#pa-app .pa-subscription::before,#pa-app#pa-app .pa-subscription::after,#pa-app#pa-app .pa-purchase-card::before,#pa-app#pa-app .pa-purchase-card::after, #pa-app#pa-app .pa-avatar::before,#pa-app#pa-app .pa-avatar::after{display:none !important;content:none !important} #pa-app#pa-app .pa-right{height:auto !important;min-height:0 !important;justify-content:flex-start !important;align-self:start !important;gap:18px !important;position:static !important;top:auto !important} #pa-app#pa-app .pa-center{height:auto !important;min-height:0 !important;justify-content:flex-start !important;align-self:start !important} #pa-app#pa-app .pa-right > *,#pa-app#pa-app .pa-center > *{transform:none !important;top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;margin-top:0 !important;margin-bottom:0 !important} #pa-app#pa-app .pa-features,#pa-app#pa-app .pa-renewal,#pa-app#pa-app .pa-subscription-main{position:static !important;transform:none !important;margin-top:0 !important;margin-bottom:0 !important;inset:auto !important;width:auto !important;height:auto !important;min-height:0 !important} #pa-app#pa-app .pa-subscription{min-height:0 !important;height:auto !important;width:100% !important} #pa-app#pa-app .pa-subscription-icon,#pa-app#pa-app .pa-action-icon,#pa-app#pa-app .pa-side-icon,#pa-app#pa-app .pa-mini-icon,#pa-app#pa-app .pa-product-image{transform:none !important;position:static !important} #pa-app#pa-app .pa-product-image{position:relative !important} /* ---- 2c · restos antiguos en suscripción / planes ---- */ #pa-app#pa-app #pms-change-subscription-form,#pa-app#pa-app #pa-cu-fragment{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important} #pa-app#pa-app #pms-change-subscription-form::before,#pa-app#pa-app #pms-change-subscription-form::after,#pa-app#pa-app .pa-plan-column::before,#pa-app#pa-app .pa-plan-column::after, #pa-app#pa-app .pa-plan-card::before,#pa-app#pa-app .pa-plan-card::after,#pa-app#pa-app .pa-box::before,#pa-app#pa-app .pa-box::after,#pa-app#pa-app .pa-new-header::before,#pa-app#pa-app .pa-new-header::after, #pa-app#pa-app .pa-plan-icon::before,#pa-app#pa-app .pa-plan-icon::after,#pa-app#pa-app .pa-payment-card-panel::before,#pa-app#pa-app .pa-payment-card-panel::after{display:none !important;content:none !important} #pa-app#pa-app .pa-plan-icon,#pa-app#pa-app .pa-plan-column-basic .pa-plan-icon,#pa-app#pa-app .pa-plan-column-standard .pa-plan-icon,#pa-app#pa-app .pa-plan-column-premium .pa-plan-icon{border:0 !important;box-shadow:none !important;background:var(--ac-s) !important;color:var(--ac) !important} #pa-app#pa-app .pa-plan-column-basic,#pa-app#pa-app .pa-plan-column-standard,#pa-app#pa-app .pa-plan-column-premium{border-color:var(--bd) !important} #pa-app#pa-app .pa-plan-card{min-height:0 !important;height:auto !important;overflow:hidden} #pa-app#pa-app .pa-subscription-actions .button,#pa-app#pa-app .pa-subscription-actions input[type=submit]{height:38px !important} #pa-app#pa-app .pa-subscription-actions input[type=checkbox]{width:16px !important;height:16px !important;padding:0 !important} #pa-app#pa-app .pa-support-icon{background:none !important;box-shadow:none !important;filter:none !important} #pa-app#pa-app .pa-support-icon::before,#pa-app#pa-app .pa-support-icon::after,#pa-app#pa-app .pa-support::before,#pa-app#pa-app .pa-support::after{display:none !important;content:none !important} #pa-app#pa-app .pa-plan-name{white-space:nowrap} /* --------------------------------------------------------------------- 3 · INICIO --------------------------------------------------------------------- */ #pa-app#pa-app .pa-card,#pa-app#pa-app .pa-welcome,#pa-app#pa-app .pa-side-card,#pa-app#pa-app .pa-support,#pa-app#pa-app .pa-secure{ background:linear-gradient(180deg,color-mix(in srgb,var(--card),var(--tx) 2.5%),var(--card)) !important; border:1px solid var(--bd) !important;border-radius:18px !important;box-shadow:var(--sh) !important; color:var(--tx) !important;padding:22px !important;margin:0 !important;width:auto !important;height:auto !important;min-height:0 !important; position:relative;overflow:visible; } #pa-app#pa-app .pa-welcome{ display:grid !important;grid-template-columns:1fr auto !important;gap:18px !important;align-items:center; background:linear-gradient(135deg,var(--ac-s),transparent 52%),var(--card) !important; } #pa-app#pa-app .pa-user{display:flex;gap:14px;align-items:center;min-width:0} #pa-app#pa-app .pa-avatar{ position:relative;width:64px !important;height:64px !important;flex:none;border-radius:50% !important;display:grid;place-items:center; font:700 26px Inter,sans-serif !important;background:var(--cc1) !important;color:#fff !important;box-shadow:0 0 0 4px var(--ac-s) !important;overflow:visible; } #pa-app#pa-app .pa-avatar img{border-radius:50%} #pa-app#pa-app .pa-online{position:absolute !important;right:2px !important;bottom:3px !important;width:11px !important;height:11px !important;border-radius:50%;background:var(--gr) !important;border:2px solid var(--card) !important;animation:pa-pulse 2.4s infinite} @keyframes pa-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gr) 55%,transparent)}60%{box-shadow:0 0 0 6px transparent}} #pa-app#pa-app .pa-welcome-text h1,#pa-app#pa-app .pa-welcome h1{margin:0 !important;font:650 23px/1.25 Inter,sans-serif !important;letter-spacing:-.02em;display:flex;gap:8px;align-items:center;color:var(--tx) !important} #pa-app#pa-app .pa-welcome h1 svg{width:20px;height:20px;color:var(--ac) !important;flex:none} #pa-app#pa-app .pa-welcome-text p{margin:4px 0 0 !important;color:var(--mu) !important;font-size:12px !important} #pa-app#pa-app .pa-welcome-info{ grid-column:1/-1;grid-row:2;display:flex !important;flex-wrap:wrap;gap:0 !important;align-items:center;justify-content:flex-start !important; padding:16px 0 0 !important;border-top:1px solid var(--bd);margin:0 !important; } #pa-app#pa-app .pa-mini-item{flex:1;display:flex;gap:10px;align-items:center;padding:0 18px;min-width:0} #pa-app#pa-app .pa-mini-item:first-child{padding-left:0} #pa-app#pa-app .pa-mini-icon{ flex:none;width:36px !important;height:36px !important;display:grid;place-items:center;border-radius:10px !important; background:var(--ac-s) !important;color:var(--ac) !important;border:0 !important; } #pa-app#pa-app .pa-mini-icon svg{width:18px !important;height:18px !important} #pa-app#pa-app .pa-mini-item small{display:block;color:var(--mu) !important;font-size:10px !important} #pa-app#pa-app .pa-mini-item strong{display:block;font-size:13px !important;white-space:nowrap;color:var(--tx) !important} #pa-app#pa-app .pa-mini-item em{font-style:normal;font-size:8px;margin-left:6px;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--gr) 13%,transparent) !important;color:var(--gr) !important} #pa-app#pa-app .pa-active-text{color:var(--gr) !important} #pa-app#pa-app .pa-mini-divider{width:1px;height:34px;background:var(--bd) !important;flex:none} #pa-app#pa-app .pa-primary-button,#pa-app#pa-app .pa-manage,#pa-app#pa-app .pa-support a{ display:inline-flex !important;gap:8px;align-items:center;justify-content:center;height:38px;padding:0 18px !important;border-radius:11px !important;border:0 !important; background:var(--btn) !important;color:var(--btnt) !important;font:600 12.5px Inter,sans-serif !important;letter-spacing:.01em;box-shadow:none !important;cursor:pointer; transition:background-color .2s,transform .15s var(--ease) !important;text-decoration:none !important;width:auto !important; } #pa-app#pa-app .pa-primary-button{grid-column:2;grid-row:1;justify-self:end} #pa-app#pa-app .pa-primary-button:hover,#pa-app#pa-app .pa-manage:hover,#pa-app#pa-app .pa-support a:hover{background:var(--btnh) !important;filter:none !important} #pa-app#pa-app .pa-primary-button:active,#pa-app#pa-app .pa-manage:active,#pa-app#pa-app .pa-support a:active{transform:scale(.97)} #pa-app#pa-app .pa-card-header{display:flex !important;justify-content:space-between;align-items:flex-start;margin:0 0 18px !important;padding:0 !important;border:0 !important} #pa-app#pa-app .pa-card-header h2,#pa-app#pa-app .pa-side-card h2{margin:0 !important;font:600 15px/1.3 Inter,sans-serif !important;display:flex;gap:8px;align-items:center;color:var(--tx) !important;letter-spacing:-.02em} #pa-app#pa-app .pa-card-header h2 svg,#pa-app#pa-app .pa-side-card h2 svg{width:28px !important;height:28px !important;padding:6px;border-radius:9px;background:var(--ac-s);color:var(--ac) !important;flex:none} #pa-app#pa-app .pa-card-header p{margin:4px 0 0 !important;color:var(--mu) !important;font-size:11.5px !important} #pa-app#pa-app .pa-see-all{color:var(--ac) !important;font-size:12px !important;font-weight:600} /* acciones rápidas (6 iconos) */ #pa-app#pa-app .pa-actions{display:grid !important;grid-template-columns:repeat(6,1fr) !important;gap:12px !important} #pa-app#pa-app .pa-action{ display:flex !important;flex-direction:column;gap:12px !important;align-items:center;padding:18px 8px !important;border:1px solid var(--bd) !important;border-radius:16px !important; background:var(--h1) !important;font:600 11px/1.3 Inter,sans-serif !important;text-align:center;cursor:pointer;color:var(--tx) !important;box-shadow:none !important; transition:transform .2s var(--ease),border-color .2s,background .2s !important;min-height:0 !important;height:auto !important; } #pa-app#pa-app .pa-action:hover{border-color:var(--b2) !important;background:var(--h1) !important;transform:translateY(-2px);box-shadow:0 10px 24px -16px color-mix(in srgb,var(--tx) 40%,transparent) !important} #pa-app#pa-app .pa-action strong{font-weight:600;font-size:11px;color:var(--tx) !important} #pa-app#pa-app .pa-action-icon{width:44px !important;height:44px !important;border-radius:13px !important;display:grid;place-items:center;background:var(--s2) !important;color:var(--ac) !important;border:0 !important;box-shadow:none !important;transition:transform .2s var(--ease),background .2s} #pa-app#pa-app .pa-action-icon svg{width:20px !important;height:20px !important} #pa-app#pa-app .pa-action:hover .pa-action-icon{background:var(--ac-s) !important;transform:scale(1.08)} /* tu suscripción actual */ #pa-app#pa-app .pa-subscription{display:grid !important;grid-template-columns:1fr auto auto !important;gap:22px !important;align-items:center;background:none !important;border:0 !important;padding:0 !important;box-shadow:none !important;margin:0 !important} #pa-app#pa-app .pa-subscription-main{display:flex;gap:12px;align-items:center;background:none !important;border:0 !important;padding:0 !important} #pa-app#pa-app .pa-subscription-icon{flex:none;width:48px !important;height:48px !important;border-radius:13px !important;display:grid;place-items:center;color:var(--ac) !important;background:var(--ac-s) !important;border:1px solid color-mix(in srgb,var(--ac) 30%,transparent) !important} #pa-app#pa-app .pa-subscription-icon svg{width:24px !important;height:24px !important} #pa-app#pa-app .pa-plan-name{font:700 15px/1.3 Inter,sans-serif !important;display:flex;gap:8px;align-items:center;color:var(--tx) !important} #pa-app#pa-app .pa-plan-name span{font-size:8px;font-weight:700;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--gr) 13%,transparent) !important;color:var(--gr) !important} #pa-app#pa-app .pa-subscription-main p{margin:3px 0 0 !important;color:var(--mu) !important;font-size:11.5px !important} #pa-app#pa-app .pa-features{display:flex;gap:6px;flex-wrap:wrap} #pa-app#pa-app .pa-features span{font-size:10.5px;padding:4px 10px;border-radius:999px;border:1px solid var(--bd);color:var(--txs);background:transparent !important} #pa-app#pa-app .pa-renewal{display:block !important;background:none !important;border:0 !important;padding:0 !important} #pa-app#pa-app .pa-renewal small{display:block;color:var(--mu) !important;font-size:10px !important} #pa-app#pa-app .pa-renewal strong{display:block;font-size:12.5px;margin:2px 0 8px;color:var(--tx) !important} #pa-app#pa-app .pa-renewal .pa-manage{height:auto;padding:0 !important;background:none !important;color:var(--ac) !important;font-size:12px !important;font-weight:600} #pa-app#pa-app .pa-renewal .pa-manage:hover{background:none !important;text-decoration:underline !important} /* historial de compras */ #pa-app#pa-app .pa-purchases{background:none !important;border:0 !important;padding:0 !important} #pa-app#pa-app .pa-purchases-slider{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:10px !important;overflow:visible !important;transform:none !important;padding:0 !important} #pa-app#pa-app .pa-purchase-card{ display:grid !important;grid-template-columns:40px 1fr !important;gap:4px 11px !important;align-items:center;padding:14px !important;border:1px solid var(--bd) !important;border-radius:14px !important; background:var(--h1) !important;cursor:pointer;color:var(--tx) !important;min-width:0 !important;width:auto !important;height:auto !important;box-shadow:none !important; transition:transform .2s var(--ease),border-color .2s,background .2s !important; } #pa-app#pa-app .pa-purchase-card:hover{border-color:var(--b2) !important;background:var(--h1) !important;transform:translateY(-2px);box-shadow:0 10px 24px -16px color-mix(in srgb,var(--tx) 40%,transparent) !important} #pa-app#pa-app .pa-product-image{grid-row:span 2;width:40px !important;height:40px !important;border-radius:50% !important;display:grid;place-items:center;font:700 13px Inter,sans-serif !important;color:var(--ac) !important;background:var(--ac-s) !important;border:0 !important;overflow:hidden} #pa-app#pa-app .pa-purchase-card > div:nth-child(2){min-width:0} #pa-app#pa-app .pa-purchase-card-title{display:block;font:600 13px/1.3 Inter,sans-serif !important;color:var(--tx) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #pa-app#pa-app .pa-purchase-card-sub{display:block;color:var(--mu) !important;font-size:10.5px !important} #pa-app#pa-app .pa-purchase-card-meta{grid-column:1/-1;display:flex !important;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;margin-top:8px;padding-top:10px;border-top:1px solid var(--bd);font-size:10.5px} #pa-app#pa-app .pa-status{color:var(--gr) !important;font-weight:600;background:none !important;border:0 !important;padding:0 !important;font-size:10.5px !important} #pa-app#pa-app .pa-purchase-card-date{color:var(--mu) !important;font-size:10.5px !important} #pa-app#pa-app .pa-purchase-card-payment{display:none !important} #pa-app#pa-app .pa-purchases-empty{padding:18px;text-align:center;color:var(--mu) !important;font-size:12.5px;border:1px dashed var(--b2);border-radius:14px} /* columna derecha */ #pa-app#pa-app .pa-side-card{display:flex !important;flex-direction:column;gap:6px !important;padding:22px !important} #pa-app#pa-app .pa-side-card h2{margin-bottom:8px !important} #pa-app#pa-app .pa-side-action{ display:flex !important;gap:11px !important;align-items:center;padding:12px 10px !important;border-radius:12px !important;cursor:pointer;color:var(--tx) !important; background:transparent !important;border:0 !important;box-shadow:none !important;transition:background .2s !important;min-height:0 !important;height:auto !important; } #pa-app#pa-app .pa-side-action:hover{background:var(--h1) !important} #pa-app#pa-app .pa-side-icon{flex:none;width:36px !important;height:36px !important;padding:9px;border-radius:12px !important;background:var(--s2) !important;color:var(--ac) !important;display:grid;place-items:center;border:0 !important} #pa-app#pa-app .pa-side-icon svg{width:18px !important;height:18px !important} #pa-app#pa-app .pa-side-info{flex:1;min-width:0} #pa-app#pa-app .pa-side-info strong{display:block;font-size:12px !important;font-weight:600;color:var(--tx) !important} #pa-app#pa-app .pa-side-info small{color:var(--mu) !important;font-size:10.5px !important} #pa-app#pa-app .pa-side-arrow{color:var(--mu) !important;font-size:18px;opacity:.45;transition:transform .2s,opacity .2s} #pa-app#pa-app .pa-side-action:hover .pa-side-arrow{transform:translateX(3px);opacity:1} #pa-app#pa-app .pa-support{text-align:center;display:block !important} #pa-app#pa-app .pa-support-icon{width:auto !important;height:auto !important;background:none !important;border:0 !important;margin:0 auto 8px !important;color:var(--ac) !important;display:block} #pa-app#pa-app .pa-support-icon svg{width:30px !important;height:30px !important;margin:0 auto;display:block} #pa-app#pa-app .pa-support h2{font:600 14px Inter,sans-serif !important;margin:0 0 4px !important;color:var(--tx) !important} #pa-app#pa-app .pa-support p{margin:0 0 12px !important;color:var(--mu) !important;font-size:11.5px !important} #pa-app#pa-app .pa-secure{text-align:center} #pa-app#pa-app .pa-secure-title{font-size:12px;font-weight:600;color:var(--tx) !important;display:flex;gap:6px;align-items:center;justify-content:center} #pa-app#pa-app .pa-secure-title svg{width:14px;height:14px;color:var(--ac)} #pa-app#pa-app .pa-secure p{color:var(--mu) !important;font-size:11px !important;margin:4px 0 10px !important} #pa-app#pa-app .pa-payments{display:flex;gap:12px;justify-content:center;font-weight:800;color:var(--txs) !important;font-size:12px} #pa-app#pa-app .pa-payments strong{color:var(--txs) !important;font-weight:800} /* --------------------------------------------------------------------- 4 · SUBPÁGINAS NATIVAS (WooCommerce / PMS): tipografía, tablas, formularios --------------------------------------------------------------------- */ #pa-app#pa-app #pa-dashboard-content:not([data-pa-page="inicio"]){color:var(--tx) !important} #pa-app#pa-app #pa-dashboard-content:not([data-pa-page="inicio"]) h1, #pa-app#pa-app #pa-dashboard-content:not([data-pa-page="inicio"]) h2, #pa-app#pa-app #pa-dashboard-content:not([data-pa-page="inicio"]) h3{color:var(--tx) !important;font-family:Inter,Arial,sans-serif !important;letter-spacing:-.02em} #pa-app#pa-app #pa-dashboard-content:not([data-pa-page="inicio"]) h2{font-size:22px;font-weight:650} #pa-app#pa-app #pa-dashboard-content:not([data-pa-page="inicio"]) h3{font-size:15px;font-weight:600} #pa-app#pa-app #pa-dashboard-content:not([data-pa-page="inicio"]) p, #pa-app#pa-app #pa-dashboard-content:not([data-pa-page="inicio"]) li, #pa-app#pa-app #pa-dashboard-content:not([data-pa-page="inicio"]) address{color:var(--txs)} #pa-app#pa-app #pa-dashboard-content:not([data-pa-page="inicio"]) a:not(.button):not(.woocommerce-Button):not([class*="pa-"]){color:var(--ac)} #pa-app#pa-app .woocommerce-MyAccount-content,#pa-app#pa-app .woocommerce{background:transparent !important;color:var(--tx) !important;border:0 !important;padding:0 !important;width:100% !important;max-width:none !important;float:none !important} #pa-app#pa-app .woocommerce-MyAccount-navigation{display:none !important} /* avisos */ #pa-app#pa-app .woocommerce-info,#pa-app#pa-app .woocommerce-message,#pa-app#pa-app .woocommerce-error,#pa-app#pa-app .woocommerce-notice,#pa-app#pa-app .woocommerce-Message{ background:var(--card) !important;color:var(--txs) !important;border:1px solid var(--bd) !important;border-left:3px solid var(--ac) !important;border-radius:12px !important;padding:14px 18px !important;margin:0 0 16px !important; list-style:none;box-shadow:none !important;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap; } #pa-app#pa-app .woocommerce-info::before,#pa-app#pa-app .woocommerce-message::before,#pa-app#pa-app .woocommerce-error::before{display:none !important} #pa-app#pa-app .woocommerce-error{border-left-color:var(--danger) !important;color:var(--danger) !important} #pa-app#pa-app .woocommerce-message{border-left-color:var(--gr) !important} /* botones */ #pa-app#pa-app .button,#pa-app#pa-app button.button,#pa-app#pa-app a.button,#pa-app#pa-app .woocommerce-Button,#pa-app#pa-app .woocommerce button[type="submit"],#pa-app#pa-app .woocommerce input[type="submit"],#pa-app#pa-app .pms-form-submit,#pa-app#pa-app input.pms-submit,#pa-app#pa-app .pms-account-subscription-action-link{ display:inline-flex !important;align-items:center;justify-content:center;gap:8px;height:38px !important;padding:0 18px !important;border-radius:11px !important; border:0 !important;background:var(--btn) !important;color:var(--btnt) !important;font:600 12.5px Inter,sans-serif !important;letter-spacing:.01em; box-shadow:none !important;text-shadow:none !important;cursor:pointer;line-height:1 !important;transition:background-color .2s,transform .15s var(--ease) !important;text-decoration:none !important; } #pa-app#pa-app .button:hover,#pa-app#pa-app a.button:hover,#pa-app#pa-app .woocommerce-Button:hover,#pa-app#pa-app .woocommerce button[type="submit"]:hover,#pa-app#pa-app .woocommerce input[type="submit"]:hover,#pa-app#pa-app .pms-form-submit:hover,#pa-app#pa-app input.pms-submit:hover{background:var(--btnh) !important;color:var(--btnt) !important} #pa-app#pa-app .button:active,#pa-app#pa-app .woocommerce-Button:active{transform:scale(.97)} #pa-app#pa-app .button.alt,#pa-app#pa-app .button.view,#pa-app#pa-app a.button.view,#pa-app#pa-app .button.pay,#pa-app#pa-app .button.cancel{background:transparent !important;color:var(--tx) !important;border:1px solid var(--b2) !important} #pa-app#pa-app .button.alt:hover,#pa-app#pa-app .button.view:hover,#pa-app#pa-app a.button.view:hover{background:var(--h1) !important;color:var(--tx) !important} #pa-app#pa-app .button.cancel{color:var(--danger) !important;border-color:color-mix(in srgb,var(--danger) 40%,transparent) !important} /* tablas (pedidos, descargas, historial) */ #pa-app#pa-app table.shop_table,#pa-app#pa-app table.woocommerce-orders-table,#pa-app#pa-app table.woocommerce-table,#pa-app#pa-app table.my_account_orders,#pa-app#pa-app table.woocommerce-MyAccount-downloads,#pa-app#pa-app table.pms-account-subscriptions-table{ width:100%;border-collapse:separate !important;border-spacing:0;background:linear-gradient(180deg,color-mix(in srgb,var(--card),var(--tx) 2.5%),var(--card)) !important; border:1px solid var(--bd) !important;border-radius:18px !important;overflow:hidden;box-shadow:var(--sh);color:var(--tx) !important;font-size:12.5px;margin:0 0 18px !important; } #pa-app#pa-app table.shop_table thead th,#pa-app#pa-app table.woocommerce-orders-table thead th,#pa-app#pa-app table.woocommerce-table thead th,#pa-app#pa-app table.my_account_orders thead th,#pa-app#pa-app table.pms-account-subscriptions-table thead th{ text-align:left;color:var(--mu) !important;background:transparent !important;font-size:10.5px !important;font-weight:600 !important;text-transform:uppercase;letter-spacing:.07em; padding:12px 16px !important;border:0 !important;border-bottom:1px solid var(--bd) !important; } #pa-app#pa-app table.shop_table td,#pa-app#pa-app table.shop_table tbody th,#pa-app#pa-app table.woocommerce-orders-table td,#pa-app#pa-app table.woocommerce-orders-table tbody th,#pa-app#pa-app table.woocommerce-table td,#pa-app#pa-app table.my_account_orders td,#pa-app#pa-app table.pms-account-subscriptions-table td{ padding:15px 16px !important;border:0 !important;border-bottom:1px solid var(--line) !important;color:var(--txs) !important;background:transparent !important;font-weight:400;vertical-align:middle; } #pa-app#pa-app table.shop_table tbody tr:last-child td,#pa-app#pa-app table.woocommerce-orders-table tbody tr:last-child td,#pa-app#pa-app table.woocommerce-table tbody tr:last-child td{border-bottom:0 !important} #pa-app#pa-app table.shop_table tbody tr:hover td,#pa-app#pa-app table.woocommerce-orders-table tbody tr:hover td,#pa-app#pa-app table.woocommerce-table tbody tr:hover td,#pa-app#pa-app table.pms-account-subscriptions-table tbody tr:hover td{background:var(--h1) !important} #pa-app#pa-app .woocommerce-orders-table__cell-order-number a{font-weight:700;color:var(--tx) !important} #pa-app#pa-app table.shop_table tfoot th,#pa-app#pa-app table.shop_table tfoot td{background:transparent !important;color:var(--tx) !important;font-weight:600} #pa-app#pa-app mark{background:var(--ac-s);color:var(--ac);border-radius:6px;padding:2px 8px;font-weight:600} #pa-app#pa-app .woocommerce-pagination{display:flex;gap:8px;justify-content:flex-end;margin-top:14px} /* formularios (editar cuenta, direcciones, PMS) */ #pa-app#pa-app .woocommerce form,#pa-app#pa-app .woocommerce-EditAccountForm,#pa-app#pa-app .pms-form,#pa-app#pa-app .woocommerce-address-fields{color:var(--tx)} #pa-app#pa-app .woocommerce-EditAccountForm,#pa-app#pa-app .woocommerce-address-fields__field-wrapper,#pa-app#pa-app .pms-form .pms-form-fields-wrapper,#pa-app#pa-app form.edit-account{ background:linear-gradient(180deg,color-mix(in srgb,var(--card),var(--tx) 2.5%),var(--card));border:1px solid var(--bd);border-radius:18px;padding:24px;max-width:820px;box-shadow:var(--sh); } #pa-app#pa-app .woocommerce form .form-row,#pa-app#pa-app .woocommerce-form-row,#pa-app#pa-app .pms-field{margin:0 0 16px !important;padding:0 !important} #pa-app#pa-app .woocommerce form .form-row label,#pa-app#pa-app .pms-field label,#pa-app#pa-app label{color:var(--mu);font-size:11.5px;font-weight:500;margin-bottom:6px;display:block} #pa-app#pa-app input[type="text"],#pa-app#pa-app input[type="email"],#pa-app#pa-app input[type="password"],#pa-app#pa-app input[type="tel"],#pa-app#pa-app input[type="number"],#pa-app#pa-app input[type="url"],#pa-app#pa-app input[type="search"],#pa-app#pa-app select,#pa-app#pa-app textarea,#pa-app#pa-app .select2-container--default .select2-selection--single{ width:100%;height:42px;padding:0 14px !important;border-radius:11px !important;border:1px solid var(--b2) !important;background:var(--inp) !important;color:var(--tx) !important; font:13px Inter,sans-serif !important;outline:0;box-shadow:none !important;transition:border-color .2s,box-shadow .2s; } #pa-app#pa-app textarea{height:auto;min-height:110px;padding:12px 14px !important} #pa-app#pa-app .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--tx) !important;line-height:40px !important} #pa-app#pa-app input:focus,#pa-app#pa-app select:focus,#pa-app#pa-app textarea:focus{border-color:var(--ac) !important;box-shadow:0 0 0 3px var(--ac-s) !important} #pa-app#pa-app input::placeholder{color:var(--mu2)} #pa-app#pa-app .woocommerce form .form-row .required{color:var(--danger)} #pa-app#pa-app fieldset{border:1px solid var(--bd);border-radius:14px;padding:18px;margin:20px 0 0} #pa-app#pa-app legend{padding:0 8px;color:var(--tx);font-weight:600;font-size:13px} #pa-app#pa-app em,#pa-app#pa-app .description{color:var(--mu);font-size:11.5px;font-style:normal} #pa-app#pa-app input[type="checkbox"],#pa-app#pa-app input[type="radio"]{accent-color:var(--ac);width:auto;height:auto} /* direcciones */ #pa-app#pa-app .woocommerce-Addresses,#pa-app#pa-app .u-columns.woocommerce-Addresses{display:grid !important;grid-template-columns:1fr 1fr;gap:14px;width:100%} #pa-app#pa-app .woocommerce-Addresses .u-column1,#pa-app#pa-app .woocommerce-Addresses .u-column2,#pa-app#pa-app .woocommerce-Address{ float:none !important;width:auto !important;background:linear-gradient(180deg,color-mix(in srgb,var(--card),var(--tx) 2.5%),var(--card));border:1px solid var(--bd);border-radius:18px;padding:22px;box-shadow:var(--sh);min-height:170px; } #pa-app#pa-app .woocommerce-Address-title{display:flex !important;justify-content:space-between;align-items:center;margin:0 0 10px;padding:0 !important;border:0 !important} #pa-app#pa-app .woocommerce-Address-title h2,#pa-app#pa-app .woocommerce-Address-title h3{margin:0 !important;font-size:14px !important;font-weight:600} #pa-app#pa-app .woocommerce-Address-title a.edit{color:var(--ac) !important;font-size:12px;font-weight:600} #pa-app#pa-app .woocommerce-Address address{font-style:normal;line-height:1.7;color:var(--txs);font-size:12.5px} /* --------------------------------------------------------------------- 5 · MI SUSCRIPCIÓN (vista generada por subscription-view.js) --------------------------------------------------------------------- */ #pa-app#pa-app .pa-new-subscription{display:flex !important;flex-direction:column;gap:18px;width:100% !important;max-width:none !important;background:transparent !important;border:0 !important;padding:0 !important;margin:0 !important;box-shadow:none !important;color:var(--tx) !important} #pa-app#pa-app .pa-new-header{ display:flex !important;justify-content:space-between;align-items:center;gap:24px;padding:24px 26px !important;margin:0 !important;border-radius:18px !important;border:1px solid var(--bd) !important; background:linear-gradient(135deg,var(--ac-s),transparent 52%),var(--card) !important;box-shadow:var(--sh) !important; } #pa-app#pa-app .pa-header-left{display:flex;gap:16px;align-items:center;min-width:0} #pa-app#pa-app .pa-header-crown{flex:none;width:52px !important;height:52px !important;display:grid;place-items:center;border-radius:14px !important;color:var(--ac) !important;background:var(--s2) !important;border:1px solid var(--b2) !important;box-shadow:none !important} #pa-app#pa-app .pa-header-crown svg{width:26px !important;height:26px !important} #pa-app#pa-app .pa-header-title h2{margin:0 !important;font:650 26px/1.2 Inter,sans-serif !important;letter-spacing:-.02em;color:var(--tx) !important} #pa-app#pa-app .pa-header-title p{margin:5px 0 0 !important;color:var(--mu) !important;font-size:12.5px !important;max-width:520px} #pa-app#pa-app .pa-header-status{display:flex;gap:10px;align-items:center;padding:10px 16px;border-radius:12px;background:color-mix(in srgb,var(--gr) 10%,transparent) !important;border:1px solid color-mix(in srgb,var(--gr) 30%,transparent) !important;flex:none} #pa-app#pa-app .pa-status-light{width:9px !important;height:9px !important;border-radius:50%;background:var(--gr) !important;box-shadow:none !important;animation:pa-pulse 2.4s infinite;flex:none} #pa-app#pa-app .pa-header-status strong{display:block;font-size:12.5px;color:var(--gr) !important} #pa-app#pa-app .pa-header-status span:not(.pa-status-light){font-size:10.5px;color:var(--mu) !important} #pa-app#pa-app .pa-main-row{display:grid !important;grid-template-columns:1.55fr 1fr !important;gap:18px !important;margin:0 !important} #pa-app#pa-app .pa-bottom-grid{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:18px !important;margin:0 !important} #pa-app#pa-app .pa-box{ position:relative;background:linear-gradient(180deg,color-mix(in srgb,var(--card),var(--tx) 2.5%),var(--card)) !important;border:1px solid var(--bd) !important;border-radius:18px !important; padding:22px !important;box-shadow:var(--sh) !important;color:var(--tx) !important;margin:0 !important;min-width:0; } #pa-app#pa-app .pa-box-title{display:flex !important;gap:9px;align-items:center;font:600 14px/1.3 Inter,sans-serif !important;margin:0 0 16px !important;color:var(--tx) !important} #pa-app#pa-app .pa-box-title-icon{width:28px !important;height:28px !important;display:grid;place-items:center;border-radius:9px !important;background:var(--ac-s) !important;color:var(--ac) !important;border:0 !important} #pa-app#pa-app .pa-box-title-icon svg{width:16px !important;height:16px !important} #pa-app#pa-app .pa-current-layout{display:grid !important;grid-template-columns:190px 1fr !important;gap:22px !important} #pa-app#pa-app .pa-plan-card{ position:relative;display:flex !important;flex-direction:column;gap:8px;align-items:center;justify-content:center;text-align:center;padding:22px 14px !important;border-radius:16px !important; border:1px solid color-mix(in srgb,var(--ac) 35%,transparent) !important;background:linear-gradient(160deg,var(--ac-s),transparent 70%),var(--h1) !important;box-shadow:none !important; } #pa-app#pa-app .pa-plan-badge{position:absolute;top:10px;right:10px;font-size:9px !important;font-weight:700;padding:3px 9px;border-radius:999px !important;background:var(--ac) !important;color:var(--btnt) !important} #pa-app#pa-app .pa-plan-symbol{color:var(--ac) !important;display:block} #pa-app#pa-app .pa-plan-symbol svg{width:34px !important;height:34px !important} #pa-app#pa-app .pa-plan-card .pa-plan-name{font:700 16px Inter,sans-serif !important;justify-content:center;color:var(--tx) !important} #pa-app#pa-app .pa-plan-desc{color:var(--mu) !important;font-size:11px !important} #pa-app#pa-app .pa-plan-heading{display:flex;gap:10px;align-items:center;margin-bottom:6px} #pa-app#pa-app .pa-plan-heading-name{font:700 17px Inter,sans-serif !important;color:var(--tx) !important} #pa-app#pa-app .pa-plan-active{font-size:9px !important;padding:3px 10px;border-radius:999px !important;background:color-mix(in srgb,var(--gr) 13%,transparent) !important;color:var(--gr) !important;font-weight:700} #pa-app#pa-app .pa-plan-description{color:var(--mu) !important;font-size:12px !important;margin-bottom:16px} #pa-app#pa-app .pa-plan-details{display:grid !important;grid-template-columns:1fr 1fr !important;gap:14px !important;margin-bottom:18px} #pa-app#pa-app .pa-plan-detail{display:flex;gap:10px;align-items:center} #pa-app#pa-app .pa-detail-icon{flex:none;width:34px !important;height:34px !important;display:grid;place-items:center;border-radius:10px !important;background:var(--ac-s) !important;color:var(--ac) !important} #pa-app#pa-app .pa-detail-icon svg{width:16px !important;height:16px !important} #pa-app#pa-app .pa-detail-label{color:var(--mu) !important;font-size:10.5px !important} #pa-app#pa-app .pa-detail-value{color:var(--tx) !important;font-size:12.5px !important;font-weight:600} #pa-app#pa-app .pa-plan-buttons{display:flex;gap:10px;flex-wrap:wrap} #pa-app#pa-app .pa-plan-button{display:inline-flex !important;gap:8px;align-items:center;justify-content:center;height:38px;padding:0 18px !important;border-radius:11px !important;font:600 12.5px Inter,sans-serif !important;text-decoration:none !important;box-shadow:none !important;cursor:pointer} #pa-app#pa-app .pa-plan-button svg{width:15px;height:15px} #pa-app#pa-app .pa-plan-button.pa-manage{background:var(--btn) !important;color:var(--btnt) !important;border:0 !important} #pa-app#pa-app .pa-plan-button.pa-manage:hover{background:var(--btnh) !important} #pa-app#pa-app .pa-plan-button.pa-cancel{background:color-mix(in srgb,var(--danger) 8%,transparent) !important;color:var(--danger) !important;border:1px solid color-mix(in srgb,var(--danger) 40%,transparent) !important} #pa-app#pa-app .pa-benefits-sub{color:var(--mu) !important;font-size:11.5px !important;margin:-8px 0 8px} #pa-app#pa-app .pa-benefit{display:flex;gap:12px;align-items:center;padding:11px 8px !important;border-radius:10px !important;background:transparent !important;border:0 !important;cursor:default} #pa-app#pa-app .pa-benefit + .pa-benefit{border-top:1px solid var(--line) !important} #pa-app#pa-app .pa-benefit-icon{flex:none;width:34px !important;height:34px !important;display:grid;place-items:center;border-radius:10px !important;background:var(--ac-s) !important;color:var(--ac) !important;font-size:12px;font-weight:800} #pa-app#pa-app .pa-benefit-icon svg{width:16px !important;height:16px !important} #pa-app#pa-app .pa-benefit-text{flex:1;min-width:0} #pa-app#pa-app .pa-benefit-name{font-size:12.5px !important;font-weight:600;color:var(--tx) !important} #pa-app#pa-app .pa-benefit-description{font-size:11px !important;color:var(--mu) !important} #pa-app#pa-app .pa-benefit-arrow{color:var(--mu2) !important} #pa-app#pa-app .pa-benefit-arrow svg{width:14px;height:14px} #pa-app#pa-app .pa-detail-edit{position:absolute;top:20px;right:20px;display:inline-flex;gap:6px;align-items:center;color:var(--ac) !important;font-size:12px;font-weight:600;text-decoration:none !important} #pa-app#pa-app .pa-detail-edit svg{width:13px;height:13px} #pa-app#pa-app .pa-details-grid{display:grid !important;grid-template-columns:1fr 1fr !important;gap:12px !important} #pa-app#pa-app .pa-detail-block label{display:block;color:var(--mu2) !important;font-size:10.5px !important;margin:0} #pa-app#pa-app .pa-detail-block span{font-weight:600;font-size:12.5px;color:var(--tx) !important} #pa-app#pa-app .pa-payment{display:flex;gap:12px;align-items:center} #pa-app#pa-app .pa-visa{flex:none;font:800 12px Inter,sans-serif !important;padding:10px 11px !important;border-radius:8px !important;background:linear-gradient(135deg,var(--cc1),var(--cc2)) !important;color:#fff !important;border:0 !important} #pa-app#pa-app .pa-card-number{font-size:13px !important;font-weight:600;color:var(--tx) !important} #pa-app#pa-app .pa-card-expiry{font-size:11px !important;color:var(--mu2) !important} #pa-app#pa-app .pa-history-item{display:grid !important;grid-template-columns:1fr auto auto 14px !important;gap:10px;align-items:center;padding:9px 0 !important;font-size:12px !important;background:none !important;border:0 !important;color:var(--tx) !important} #pa-app#pa-app .pa-history-item + .pa-history-item{border-top:1px solid var(--line) !important} #pa-app#pa-app .pa-history-price{color:var(--mu) !important} #pa-app#pa-app .pa-paid{font-style:normal;font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--gr) 13%,transparent) !important;color:var(--gr) !important} #pa-app#pa-app .pa-paid.pa-unpaid{background:color-mix(in srgb,var(--danger) 13%,transparent) !important;color:var(--danger) !important} #pa-app#pa-app .pa-history-arrow{color:var(--mu2) !important} #pa-app#pa-app .pa-history-arrow svg{width:12px;height:12px} #pa-app#pa-app .pa-empty-row{color:var(--mu) !important;font-size:12px;padding:10px 0} #pa-app#pa-app .pa-help{display:flex !important;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px !important;border-radius:18px !important;background:var(--card) !important;border:1px solid var(--bd) !important;box-shadow:var(--sh) !important;margin:0 !important} #pa-app#pa-app .pa-help-left{display:flex;gap:14px;align-items:center} #pa-app#pa-app .pa-help-icon{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--ac-s) !important;color:var(--ac) !important} #pa-app#pa-app .pa-help-icon svg{width:22px;height:22px} #pa-app#pa-app .pa-help-title{font-size:13.5px !important;font-weight:600;color:var(--tx) !important} #pa-app#pa-app .pa-help-description{font-size:11.5px !important;color:var(--mu) !important} #pa-app#pa-app .pa-help-button{display:inline-flex !important;gap:8px;align-items:center;height:38px;padding:0 16px !important;border-radius:11px !important;background:transparent !important;color:var(--tx) !important;border:1px solid var(--b2) !important;font:600 12.5px Inter,sans-serif !important;text-decoration:none !important;flex:none} #pa-app#pa-app .pa-help-button:hover{background:var(--h1) !important} #pa-app#pa-app .pa-help-button svg{width:14px;height:14px} /* panel "Gestionar membresía" */ #pa-app#pa-app .pa-manage-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px} #pa-app#pa-app .pa-manage-header-left{display:flex;gap:12px;align-items:center} #pa-app#pa-app .pa-manage-header-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--ac-s) !important;color:var(--ac) !important} #pa-app#pa-app .pa-manage-header-icon svg{width:20px;height:20px} #pa-app#pa-app .pa-manage-heading-title{font-size:14px !important;font-weight:600;color:var(--tx) !important} #pa-app#pa-app .pa-manage-heading-subtitle{font-size:11px !important;color:var(--mu) !important} #pa-app#pa-app .pa-manage-close{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--bd) !important;background:transparent !important;color:var(--mu) !important;cursor:pointer} #pa-app#pa-app .pa-manage-close svg{width:14px;height:14px} #pa-app#pa-app .pa-management-option{display:flex !important;gap:14px;align-items:center;padding:14px 8px !important;border-bottom:1px solid var(--line) !important;border-radius:10px !important;background:transparent !important;color:var(--tx) !important;text-decoration:none !important;transition:background .2s,transform .2s var(--ease) !important} #pa-app#pa-app .pa-management-option:hover{background:var(--h1) !important;transform:translateX(3px)} #pa-app#pa-app .pa-management-icon{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--ac-s) !important;color:var(--ac) !important} #pa-app#pa-app .pa-management-icon svg{width:18px;height:18px} #pa-app#pa-app .pa-management-text{flex:1} #pa-app#pa-app .pa-management-title{font-size:13.5px !important;font-weight:600;color:var(--tx) !important} #pa-app#pa-app .pa-management-description{font-size:11.5px !important;color:var(--mu) !important} #pa-app#pa-app .pa-management-arrow{color:var(--mu2) !important} #pa-app#pa-app .pa-management-arrow svg{width:14px;height:14px} #pa-app#pa-app .pa-management-cancel .pa-management-icon{background:color-mix(in srgb,var(--danger) 13%,transparent) !important;color:var(--danger) !important} /* --------------------------------------------------------------------- 6 · CAMBIAR PLAN (selector de planes de PMS en 3 columnas) --------------------------------------------------------------------- */ #pa-app#pa-app .pa-plan-columns{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:14px !important;align-items:start;background:none !important;border:0 !important;padding:0 !important} #pa-app#pa-app .pa-plan-column{ padding:16px !important;border-radius:18px !important;border:1px solid var(--bd) !important;background:linear-gradient(180deg,color-mix(in srgb,var(--card),var(--tx) 2.5%),var(--card)) !important; box-shadow:var(--sh) !important;transition:transform .25s var(--ease),border-color .2s !important; } #pa-app#pa-app .pa-plan-column:hover{transform:translateY(-3px);border-color:var(--b2) !important} #pa-app#pa-app .pa-plan-header{display:flex !important;gap:11px;align-items:center;margin-bottom:12px !important;background:none !important;border:0 !important;padding:0 !important} #pa-app#pa-app .pa-plan-icon{flex:none;width:44px !important;height:44px !important;padding:11px;border-radius:13px !important;background:var(--ac-s) !important;color:var(--ac) !important;display:grid;place-items:center} #pa-app#pa-app .pa-plan-icon svg{width:100%;height:100%} #pa-app#pa-app .pa-plan-title{font:600 15px Inter,sans-serif !important;color:var(--tx) !important} #pa-app#pa-app .pa-plan-list{display:flex;flex-direction:column;gap:8px} #pa-app#pa-app .pa-custom-plan{ display:block !important;margin:0 !important;border-radius:14px !important;border:1px solid var(--bd) !important;background:transparent !important;cursor:pointer;transition:border-color .2s,background .2s !important;position:relative; } #pa-app#pa-app .pa-custom-plan input{position:absolute;opacity:0;pointer-events:none} #pa-app#pa-app .pa-plan-card-content{display:flex !important;gap:11px;align-items:center;padding:14px !important} #pa-app#pa-app .pa-custom-plan:hover{border-color:var(--b2) !important} #pa-app#pa-app .pa-custom-plan.is-selected{background:var(--ac-s) !important;border-color:var(--ac) !important;box-shadow:0 0 0 1px var(--ac) !important} #pa-app#pa-app .pa-radio{flex:none;width:16px !important;height:16px !important;border-radius:50% !important;border:2px solid var(--mu2) !important;background:transparent !important;box-shadow:none !important} #pa-app#pa-app .pa-custom-plan.is-selected .pa-radio{border-color:var(--ac) !important;background:radial-gradient(var(--ac) 45%,transparent 50%) !important} #pa-app#pa-app .pa-plan-info{flex:1;min-width:0} #pa-app#pa-app .pa-plan-card-name{display:block;font-size:13px !important;font-weight:600;color:var(--tx) !important} #pa-app#pa-app .pa-plan-duration{display:block;font-size:10.5px !important;color:var(--mu) !important} #pa-app#pa-app .pa-plan-price{text-align:right} #pa-app#pa-app .pa-price-value{font-size:15px !important;font-weight:700;color:var(--tx) !important;display:block} #pa-app#pa-app .pa-price-period{display:block;font-size:10.5px !important;color:var(--mu) !important} #pa-app#pa-app .pa-subscription-actions{display:flex !important;justify-content:flex-end;align-items:center;gap:16px;margin-top:18px !important;background:none !important;border:0 !important;padding:0 !important} #pa-app#pa-app .pa-subscription-actions label,#pa-app#pa-app .pms-subscription-plan-auto-renew label{display:flex;gap:8px;align-items:center;color:var(--mu) !important;font-size:12px} #pa-app#pa-app .pms-subscription-plan-name,#pa-app#pa-app .pms-subscription-plan-price{color:var(--tx) !important} #pa-app#pa-app .pms-subscription-plan-description,#pa-app#pa-app .pms-subscription-plan-trial,#pa-app#pa-app .pms-subscription-plan-sign-up-fee{color:var(--mu) !important} /* --------------------------------------------------------------------- 7 · MÉTODOS DE PAGO --------------------------------------------------------------------- */ #pa-app#pa-app .pa-payment-view{width:100% !important;max-width:none !important;color:var(--tx) !important;background:transparent !important} #pa-app#pa-app .pa-payment-view-header{display:flex !important;gap:18px;align-items:center;margin-bottom:24px !important} #pa-app#pa-app .pa-payment-view-icon{flex:none;width:72px !important;height:72px !important;border-radius:19px !important;display:grid;place-items:center;color:var(--ac) !important;background:var(--s2) !important;border:1px solid var(--bd) !important;box-shadow:none !important} #pa-app#pa-app .pa-payment-view-icon svg,#pa-app#pa-app .pa-payment-card-symbol svg{width:32px;height:32px} #pa-app#pa-app .pa-payment-view-heading h1,#pa-app#pa-app .pa-payment-view-heading h2{margin:0 !important;font:650 32px/1.15 Inter,sans-serif !important;letter-spacing:-.03em;color:var(--tx) !important} #pa-app#pa-app .pa-payment-view-heading p{margin:5px 0 0 !important;color:var(--mu) !important;font-size:13px !important} #pa-app#pa-app .pa-payment-card-panel{ position:relative;overflow:hidden;display:grid !important;grid-template-columns:minmax(260px,420px) 1fr !important;gap:40px !important;align-items:center;padding:38px !important;border:1px solid var(--bd) !important;border-radius:20px !important; background:linear-gradient(135deg,var(--ac-s),transparent 55%),var(--card) !important;box-shadow:var(--sh) !important; } #pa-app#pa-app .pa-payment-orbit{display:none !important} #pa-app#pa-app .pa-payment-visual{position:relative;height:210px;display:grid;place-items:center;background:none !important} #pa-app#pa-app .pa-payment-card-stack{position:relative} #pa-app#pa-app .pa-payment-card-front,#pa-app#pa-app .pa-payment-card-back{ border-radius:18px !important;color:#fff !important;background:linear-gradient(135deg,var(--cc1),var(--cc2)) !important;border:1px solid rgba(255,255,255,.07) !important;box-shadow:0 24px 36px -24px rgba(0,0,0,.6) !important; } #pa-app#pa-app .pa-payment-card-chip{background:linear-gradient(135deg,#d4d4d8,#9a9aa3) !important} #pa-app#pa-app .pa-payment-card-brand,#pa-app#pa-app .pa-payment-card-number,#pa-app#pa-app .pa-payment-card-footer{color:#fff !important} #pa-app#pa-app .pa-payment-card-footer{color:rgba(255,255,255,.7) !important} #pa-app#pa-app .pa-payment-plus{background:var(--ac) !important;color:var(--btnt) !important} #pa-app#pa-app .pa-payment-info h1,#pa-app#pa-app .pa-payment-info h2{margin:0 0 10px !important;font:650 30px/1.15 Inter,sans-serif !important;letter-spacing:-.03em;color:var(--tx) !important} #pa-app#pa-app .pa-payment-info p{color:var(--mu) !important;font-size:13px !important} #pa-app#pa-app .pa-payment-status{display:flex;gap:8px;align-items:center;font:700 11px Inter,sans-serif !important;letter-spacing:.5px;color:var(--gr) !important;margin-bottom:10px} #pa-app#pa-app .pa-payment-status-dot{width:8px !important;height:8px !important;border-radius:50% !important;background:var(--gr) !important;box-shadow:none !important} #pa-app#pa-app .pa-payment-primary-button{display:inline-flex !important;gap:8px;align-items:center;justify-content:center;height:38px;padding:0 18px !important;border-radius:11px !important;border:0 !important;background:var(--btn) !important;color:var(--btnt) !important;font:600 12.5px Inter,sans-serif !important;box-shadow:none !important;text-decoration:none !important;cursor:pointer} #pa-app#pa-app .pa-payment-primary-button:hover{background:var(--btnh) !important} #pa-app#pa-app .pa-payment-secondary-button{display:inline-flex !important;gap:8px;align-items:center;justify-content:center;height:38px;padding:0 18px !important;border-radius:11px !important;border:1px solid var(--b2) !important;background:transparent !important;color:var(--tx) !important;font:600 12.5px Inter,sans-serif !important;box-shadow:none !important;text-decoration:none !important} #pa-app#pa-app .pa-payment-secondary-button:hover{background:var(--h1) !important} #pa-app#pa-app .pa-payment-method-list{display:flex !important;flex-direction:column;gap:10px !important;margin-bottom:16px} #pa-app#pa-app .pa-payment-method{display:flex !important;gap:14px;align-items:center;padding:14px 16px !important;border:1px solid var(--bd) !important;border-radius:14px !important;background:transparent !important;box-shadow:none !important} #pa-app#pa-app .pa-payment-method-mini-card{flex:none;width:46px !important;height:30px !important;border-radius:7px !important;background:linear-gradient(135deg,var(--cc1),var(--cc2)) !important;border:0 !important} #pa-app#pa-app .pa-payment-method-data{flex:1;color:var(--tx) !important} #pa-app#pa-app .pa-payment-method-data b,#pa-app#pa-app .pa-payment-method-data strong{display:block;font-size:13px;color:var(--tx) !important} #pa-app#pa-app .pa-payment-method-data small,#pa-app#pa-app .pa-payment-method-data span{color:var(--mu) !important;font-size:11px} #pa-app#pa-app .pa-payment-method-active{font-size:10.5px !important;font-weight:700;padding:3px 10px;border-radius:999px !important;background:color-mix(in srgb,var(--gr) 13%,transparent) !important;color:var(--gr) !important} #pa-app#pa-app .pa-payment-method-delete{color:var(--danger) !important;font-size:12px;font-weight:600;background:none !important;border:0 !important} #pa-app#pa-app .pa-payment-footnote{color:var(--mu) !important;font-size:11.5px !important} #pa-app#pa-app .pa-payment-view-heading{display:flex !important;gap:18px;align-items:center} #pa-app#pa-app .pa-payment-add-top{display:inline-flex !important;gap:8px;align-items:center;height:38px;padding:0 18px !important;border-radius:11px !important;background:var(--btn) !important;color:var(--btnt) !important;font:600 12.5px Inter,sans-serif !important;text-decoration:none !important;margin-left:auto} #pa-app#pa-app .pa-payment-info h2 span{display:block;color:var(--ac) !important} #pa-app#pa-app .pa-payment-method-default{color:var(--ac) !important;font-size:12px;font-weight:600} #pa-app#pa-app .pa-payment-method-actions{display:flex;gap:14px;align-items:center} #pa-app#pa-app .pa-payment-footnote{display:flex;gap:8px;margin-top:14px} #pa-app#pa-app .pa-payment-card-symbol{color:var(--ac) !important} /* formulario de "Añadir método de pago" (WooCommerce / Stripe) */ #pa-app#pa-app #add_payment_method,#pa-app#pa-app .pa-payment-native-page .woocommerce-PaymentBox,#pa-app#pa-app .pa-payment-native-page #payment{background:transparent !important;color:var(--tx) !important;border:0 !important} #pa-app#pa-app #add_payment_method #payment ul.payment_methods{border:0 !important;padding:0 !important} #pa-app#pa-app #add_payment_method #payment div.payment_box{background:var(--h1) !important;color:var(--txs) !important;border-radius:14px !important} #pa-app#pa-app #add_payment_method #payment div.payment_box::before{display:none !important} /* --------------------------------------------------------------------- 8 · RESPONSIVE (tablet / portátil estrecho) --------------------------------------------------------------------- */ @media (max-width:1180px){ #pa-app#pa-app #pa-dashboard-content.pa-dashboard-grid[data-pa-page="inicio"]{grid-template-columns:1fr !important} #pa-app#pa-app .pa-actions{grid-template-columns:repeat(3,1fr) !important} #pa-app#pa-app .pa-subscription,#pa-app#pa-app .pa-main-row,#pa-app#pa-app .pa-payment-card-panel,#pa-app#pa-app .pa-current-layout{grid-template-columns:1fr !important} #pa-app#pa-app .pa-bottom-grid,#pa-app#pa-app .pa-plan-columns{grid-template-columns:1fr !important} #pa-app#pa-app .pa-welcome{grid-template-columns:1fr !important} #pa-app#pa-app .pa-primary-button{grid-column:1;grid-row:auto;justify-self:start} #pa-app#pa-app .pa-welcome-info{flex-wrap:wrap;gap:14px 0 !important} #pa-app#pa-app .pa-purchases-slider{grid-template-columns:1fr !important} } @media (max-width:900px){ #pa-app#pa-app .pa-sidebar{width:78px !important;min-width:78px !important;flex-basis:78px !important;padding-left:10px !important;padding-right:10px !important} #pa-app#pa-app .pa-nav-label,#pa-app#pa-app .pa-nav-badge,#pa-app#pa-app .pa-me-info,#pa-app#pa-app .pa-logout > span:not(.pa-nav-icon){display:none !important} #pa-app#pa-app .pa-nav-item,#pa-app#pa-app .pa-logout{justify-content:center;padding:0 !important} #pa-app#pa-app .pa-me{justify-content:center;padding:8px} #pa-app#pa-app .pa-nav-item.active::before{left:-10px} #pa-app#pa-app .pa-main{padding:calc(var(--pa-header-offset) + 24px) 18px 40px !important} } @media (max-height:760px){ #pa-app#pa-app .pa-sidebar{padding-top:80px !important} #pa-app#pa-app .pa-nav-item{min-height:40px !important} #pa-app#pa-app .pa-me{display:none} } @media (prefers-reduced-motion:reduce){ #pa-app#pa-app *,#pa-app#pa-app *::before,#pa-app#pa-app *::after{animation:none !important;transition:none !important} } } /* ===== v3.1.1 · Mi suscripción: estructura adaptada del HTML de referencia ===== */ @media (min-width:601px){ #pa-app .pa-cu-subscription-overview{display:block;margin:0 0 28px;color:var(--tx);font-size:13px} #pa-app .pa-cu-sub-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:0 0 20px} #pa-app .pa-cu-sub-head h1{margin:2px 0 5px;font-size:30px;font-weight:750;letter-spacing:-1px} #pa-app .pa-cu-sub-head p{margin:0;color:var(--mu);font-size:13px} #pa-app .pa-cu-eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:1.2px;color:var(--ac);margin-bottom:5px} #pa-app .pa-cu-status{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--bd);border-radius:24px;font-size:11px;font-weight:700;white-space:nowrap} #pa-app .pa-cu-status i{display:block;width:7px;height:7px;border-radius:50%;background:var(--danger)} #pa-app .pa-cu-status.is-active i{background:var(--gr)} #pa-app .pa-cu-status.is-active{color:var(--gr);border-color:color-mix(in srgb,var(--gr) 28%,transparent);background:color-mix(in srgb,var(--gr) 7%,transparent)} #pa-app .pa-cu-sub-banner{display:grid;grid-template-columns:minmax(260px,1.5fr) minmax(130px,.8fr) minmax(140px,.9fr) auto;gap:0;align-items:center;margin-bottom:16px;padding:23px 24px;border:1px solid var(--bd);border-radius:16px;background:var(--card);box-shadow:var(--sh)} #pa-app .pa-cu-plan-identity{display:flex;gap:16px;align-items:center;padding-right:18px;min-width:0} #pa-app .pa-cu-crown{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:50%;font-size:29px;color:var(--ac);background:var(--s2);border:1px solid var(--b2)} #pa-app .pa-cu-plan-identity h2{margin:0 0 5px;font-size:23px;font-weight:750;letter-spacing:-.6px} #pa-app .pa-cu-plan-identity p{margin:0;color:var(--mu);font-size:11.5px;line-height:1.5;max-width:330px} #pa-app .pa-cu-stat{display:flex;flex-direction:column;gap:5px;padding:5px 17px;border-left:1px solid var(--bd);min-width:0} #pa-app .pa-cu-stat-icon{font-size:16px;color:var(--ac)} #pa-app .pa-cu-stat small{font-size:10px;color:var(--mu)} #pa-app .pa-cu-stat strong{font-size:12px;line-height:1.4;overflow-wrap:anywhere} #pa-app .pa-cu-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-left:12px;padding:11px 14px;border-radius:9px;background:var(--btn);color:var(--btnt);font-size:11.5px;font-weight:750;white-space:nowrap;text-decoration:none} #pa-app .pa-cu-primary:hover{filter:brightness(1.08)} #pa-app .pa-cu-sub-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start} #pa-app .pa-cu-sub-card{padding:20px;border:1px solid var(--bd);border-radius:15px;background:var(--card);box-shadow:var(--sh);min-width:0} #pa-app .pa-cu-card-title{display:flex;align-items:center;gap:9px;margin-bottom:12px} #pa-app .pa-cu-card-title>span{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--s2);color:var(--ac);font-size:15px} #pa-app .pa-cu-card-title h2{margin:0;font-size:14px;font-weight:750;letter-spacing:-.2px} #pa-app .pa-cu-detail-row{display:grid;grid-template-columns:minmax(115px,.85fr) minmax(0,1.15fr);gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:12px} #pa-app .pa-cu-detail-row>span{color:var(--mu)} #pa-app .pa-cu-detail-row>strong{font-weight:650;overflow-wrap:anywhere} #pa-app .pa-cu-status-pill{font-style:normal;display:inline-flex;padding:4px 9px;border-radius:20px;font-size:10px;background:var(--s2);color:var(--mu)} #pa-app .pa-cu-status-pill.is-active{background:color-mix(in srgb,var(--gr) 12%,transparent);color:var(--gr)} #pa-app .pa-cu-payment-title{margin-top:22px;padding-top:18px;border-top:1px solid var(--bd)} #pa-app .pa-cu-payment-title a{margin-left:auto;color:var(--ac);font-size:11px;text-decoration:none} #pa-app .pa-cu-payment-card{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--bd);border-radius:11px;background:var(--h1)} #pa-app .pa-cu-card-brand{display:grid;place-items:center;min-width:51px;height:34px;padding:0 7px;border-radius:7px;background:var(--cc1);color:#fff;font-size:10px;font-weight:850} #pa-app .pa-cu-payment-card strong{display:block;font-size:12px} #pa-app .pa-cu-payment-card small{display:block;margin-top:4px;color:var(--mu);font-size:10.5px} #pa-app .pa-cu-action{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line);color:var(--tx);text-decoration:none;border-radius:9px} #pa-app .pa-cu-action:hover{background:var(--h1)} #pa-app .pa-cu-action-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:var(--s2);color:var(--ac);font-size:17px} #pa-app .pa-cu-action>span:nth-child(2){flex:1;min-width:0} #pa-app .pa-cu-action strong{display:block;font-size:12px} #pa-app .pa-cu-action small{display:block;margin-top:4px;color:var(--mu);font-size:10.5px;line-height:1.45} #pa-app .pa-cu-action>b{color:var(--mu);font-size:20px;font-weight:400} #pa-app .pa-cu-help{display:flex;align-items:center;gap:10px;margin-top:15px;padding:12px;border-radius:10px;border:1px solid var(--bd);background:var(--h1)} #pa-app .pa-cu-help>span{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--s2);color:var(--ac);font-weight:800} #pa-app .pa-cu-help div{flex:1;min-width:0} #pa-app .pa-cu-help strong{display:block;font-size:11px} #pa-app .pa-cu-help small{display:block;margin-top:3px;color:var(--mu);font-size:10px;line-height:1.4} #pa-app .pa-cu-help a{color:var(--ac);font-size:10.5px;font-weight:700;white-space:nowrap;text-decoration:none} #pa-app .pa-cu-pms-native{margin-top:24px;padding-top:20px;border-top:1px solid var(--bd)} #pa-app .pa-cu-section-heading{margin-bottom:14px} #pa-app .pa-cu-section-heading h2{margin:0 0 4px;font-size:19px;font-weight:750} #pa-app .pa-cu-section-heading p{margin:0;color:var(--mu);font-size:12px} } @media (max-width:900px) and (min-width:601px){ #pa-app .pa-cu-sub-banner{grid-template-columns:1fr 1fr;gap:16px} #pa-app .pa-cu-plan-identity{grid-column:1/-1} #pa-app .pa-cu-stat{border-left:0;padding-left:0} #pa-app .pa-cu-primary{margin-left:0;justify-self:start} #pa-app .pa-cu-sub-grid{grid-template-columns:1fr} } /* ===== v3.1.2 · Mi suscripción: réplica visual de la sección del HTML v3.3.2 ===== */ @media (min-width:601px){ #pa-app .pa-cu-subscription-overview{margin:0 0 28px;color:var(--tx);font-size:13px} #pa-app .pa-ms-ban{position:relative;display:grid;grid-template-columns:minmax(220px,1.5fr) minmax(125px,.85fr) minmax(125px,.9fr) minmax(125px,.9fr) auto;gap:0;align-items:center;margin:0 0 16px;padding:23px 22px;border:1px solid var(--bd);border-radius:16px;background:var(--card);box-shadow:var(--sh);overflow:hidden} #pa-app .pa-ms-pl{display:flex;gap:16px;align-items:center;padding-right:17px;min-width:0} #pa-app .pa-ms-ring{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:50%;font-size:29px;color:var(--ac);background:var(--s2);border:1px solid var(--b2)} #pa-app .pa-ms-pl small{font-size:10px;letter-spacing:1px;color:var(--ac);font-weight:800} #pa-app .pa-ms-pl h2{margin:3px 0 4px;font-size:25px;line-height:1.2;font-weight:750;letter-spacing:-.7px} #pa-app .pa-ms-pl p{margin:0;color:var(--mu);font-size:11.5px;line-height:1.5;max-width:300px} #pa-app .pa-ms-st{display:flex;flex-direction:column;gap:5px;padding:4px 15px;border-left:1px solid var(--bd);min-width:0} #pa-app .pa-ms-symbol{font-size:16px;color:var(--ac);line-height:1.2} #pa-app .pa-ms-st small{font-size:10.5px;color:var(--mu)} #pa-app .pa-ms-st>b{font-size:12.5px;line-height:1.4;overflow-wrap:anywhere} #pa-app .pa-ms-ok{display:inline-flex;align-items:center;font-style:normal;font-size:10.5px;padding:4px 10px;border-radius:12px;background:var(--s2);color:var(--mu);font-weight:750} #pa-app .pa-ms-ok.is-active{background:color-mix(in srgb,var(--gr) 13%,transparent);color:var(--gr)} #pa-app .pa-ms-btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;margin-left:9px;padding:11px 13px;border-radius:9px;background:var(--btn);color:var(--btnt);font-size:11px;font-weight:750;line-height:1.35;text-decoration:none;text-align:center} #pa-app .pa-ms-btn:hover{background:var(--btnh)} #pa-app .pa-ms-prog{grid-column:1/-1;margin-top:19px;padding-top:15px;border-top:1px solid var(--bd)} #pa-app .pa-ms-prog>small{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:11px;color:var(--mu)} #pa-app .pa-ms-prog>small b{color:var(--ac);text-align:right} #pa-app .pa-ms-track{height:6px;border-radius:6px;background:var(--tk);overflow:hidden} #pa-app .pa-ms-fill{height:100%;width:100%;border-radius:6px;background:var(--ac);opacity:.65} #pa-app .pa-ms-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start} #pa-app .pa-ms-box{min-width:0;padding:20px;border:1px solid var(--bd);border-radius:16px;background:var(--card);box-shadow:var(--sh)} #pa-app .pa-ms-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px} #pa-app .pa-ms-heading>strong{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:750} #pa-app .pa-ms-heading>strong>span{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:var(--s2);color:var(--ac);font-size:15px} #pa-app .pa-ms-heading>a{color:var(--ac);font-size:11px;font-weight:650;text-decoration:none;white-space:nowrap} #pa-app .pa-ms-row{display:grid;grid-template-columns:minmax(105px,.85fr) minmax(0,1.15fr);gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:12px} #pa-app .pa-ms-row>span{color:var(--mu)} #pa-app .pa-ms-row>b{font-weight:650;overflow-wrap:anywhere} #pa-app .pa-ms-payment-heading{margin-top:22px;padding-top:18px;border-top:1px solid var(--bd)} #pa-app .pa-ms-payment{display:flex;gap:12px;align-items:center;padding:13px;border:1px solid var(--bd);border-radius:11px;background:var(--h1)} #pa-app .pa-ms-payment>i{display:grid;place-items:center;min-width:48px;height:34px;padding:0 7px;border-radius:7px;background:var(--cc1);color:#fff;font-size:10px;font-style:normal;font-weight:850} #pa-app .pa-ms-payment b{display:block;font-size:12px} #pa-app .pa-ms-payment small{display:block;margin-top:4px;color:var(--mu);font-size:10.5px} #pa-app .pa-ms-action{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line);border-radius:9px;color:var(--tx);text-decoration:none;transition:background .2s,transform .2s} #pa-app .pa-ms-action:hover{background:var(--h1);transform:translateX(3px)} #pa-app .pa-ms-action>span{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:var(--s2);color:var(--ac);font-size:17px} #pa-app .pa-ms-action>div{flex:1;min-width:0} #pa-app .pa-ms-action b{display:block;font-size:12px} #pa-app .pa-ms-action small{display:block;margin-top:4px;color:var(--mu);font-size:10.5px;line-height:1.45} #pa-app .pa-ms-action>i{color:var(--mu);font-size:20px;font-style:normal} #pa-app .pa-ms-help{display:flex;align-items:center;gap:10px;margin-top:15px;padding:12px;border-radius:11px;border:1px solid var(--bd);background:var(--h1)} #pa-app .pa-ms-help>span{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--s2);color:var(--ac);font-weight:800} #pa-app .pa-ms-help>div{flex:1;min-width:0} #pa-app .pa-ms-help b{display:block;font-size:11px} #pa-app .pa-ms-help small{display:block;margin-top:3px;color:var(--mu);font-size:10px;line-height:1.45} #pa-app .pa-ms-help>a{color:var(--ac);font-size:10.5px;font-weight:750;white-space:nowrap;text-decoration:none} #pa-app .pa-cu-pms-native{margin-top:24px;padding-top:20px;border-top:1px solid var(--bd)} } @media (max-width:1100px) and (min-width:601px){ #pa-app .pa-ms-ban{grid-template-columns:1fr 1fr;gap:15px} #pa-app .pa-ms-pl{grid-column:1/-1} #pa-app .pa-ms-st{border-left:0;padding-left:0} #pa-app .pa-ms-btn{margin-left:0;justify-self:start} #pa-app .pa-ms-grid{grid-template-columns:1fr} } /* v3.1.3 — Mi suscripción: estructura alineada con #p-subscription del HTML v3.3.2 */ #pa-app .pa-ms-html{--ms-gold:#d8a94c;--ms-text:#edf0f7;--ms-muted:#9aa4ba;color:var(--ms-text);font-family:Inter,system-ui,-apple-system,sans-serif;width:100%;max-width:none} #pa-app .pa-ms-html *{box-sizing:border-box} #pa-app .pa-ms-html .ms-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 22px;margin:0 0 16px;background:linear-gradient(135deg,#0e131c,#131a26);border:1px solid rgba(151,166,199,.14);border-radius:14px} #pa-app .pa-ms-html .ms-head-left{display:flex;gap:16px;align-items:center;min-width:0} #pa-app .pa-ms-html .ms-head-icon{width:52px;height:52px;flex:none;display:grid;place-items:center;font-size:26px;color:var(--ms-gold);border-radius:14px;background:rgba(216,169,76,.14);border:1px solid rgba(216,169,76,.4)} #pa-app .pa-ms-html .ms-head h2{margin:0;color:#edf0f7;font-size:25px;font-weight:650;line-height:1.2} #pa-app .pa-ms-html .ms-head p{margin:5px 0 0;color:var(--ms-muted);font-size:12px;max-width:520px;line-height:1.5} #pa-app .pa-ms-html .ms-head-status{display:flex;gap:10px;align-items:center;min-width:210px;padding:10px 14px;border-radius:12px;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3)} #pa-app .pa-ms-html .ms-head-status>i{width:8px;height:8px;flex:none;border-radius:50%;background:#34d399;box-shadow:0 0 10px #34d399} #pa-app .pa-ms-html .ms-head-status.is-inactive{background:rgba(240,120,90,.08);border-color:rgba(240,120,90,.3)} #pa-app .pa-ms-html .ms-head-status.is-inactive>i{background:#f0785a;box-shadow:none} #pa-app .pa-ms-html .ms-head-status b{display:block;font-size:12px;color:#34d399} #pa-app .pa-ms-html .ms-head-status.is-inactive b{color:#f0785a} #pa-app .pa-ms-html .ms-head-status small{display:block;margin-top:2px;font-size:10.5px;line-height:1.4;color:var(--ms-muted)} #pa-app .pa-ms-html .ms-ban{display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1fr auto;gap:0;align-items:center;padding:24px 26px;margin:0 0 16px;border-radius:16px;border:1px solid rgba(216,169,76,.28);background:linear-gradient(120deg,#0b0f18,#171b2a 60%,#1c1a22);position:relative;overflow:hidden} #pa-app .pa-ms-html .ms-pl{display:flex;gap:18px;align-items:center;padding-right:20px;min-width:0} #pa-app .pa-ms-html .ms-ring{flex:none;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:var(--ms-gold);border:2px solid rgba(216,169,76,.5);background:rgba(216,169,76,.08);box-shadow:0 0 30px rgba(216,169,76,.18)} #pa-app .pa-ms-html .ms-pl small{font-size:10px;letter-spacing:1px;color:var(--ms-gold);font-weight:700} #pa-app .pa-ms-html .ms-pl h3{margin:2px 0 4px;color:#f0f2f8;font-size:26px;font-weight:650;line-height:1.25} #pa-app .pa-ms-html .ms-pl p{margin:0;font-size:11.5px;color:var(--ms-muted);max-width:300px;line-height:1.5} #pa-app .pa-ms-html .ms-st{display:flex;flex-direction:column;gap:5px;padding:4px 20px;border-left:1px solid rgba(151,166,199,.16);min-width:0} #pa-app .pa-ms-html .ms-st-icon{color:#9aa4ba;font-size:16px} #pa-app .pa-ms-html .ms-st small{font-size:10.5px;color:#9aa4ba;line-height:1.4} #pa-app .pa-ms-html .ms-st b{font-size:13px;overflow-wrap:anywhere} #pa-app .pa-ms-html .ok{display:inline-block;font-style:normal;font-size:10px;padding:4px 10px;border-radius:12px;background:rgba(52,211,153,.14);color:#34d399;font-weight:700} #pa-app .pa-ms-html .ms-manage-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 15px;border-radius:10px;background:var(--ms-gold);color:#1a1204!important;font-size:12px;font-weight:750;text-decoration:none!important;white-space:nowrap;transition:filter .2s} #pa-app .pa-ms-html .ms-manage-btn:hover{filter:brightness(1.08)} #pa-app .pa-ms-html .ms-prog{grid-column:1/-1;margin-top:20px;padding-top:16px;border-top:1px solid rgba(151,166,199,.14)} #pa-app .pa-ms-html .ms-prog>small{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#9aa4ba;margin-bottom:8px} #pa-app .pa-ms-html .ms-prog>small b{color:var(--ms-gold);font-weight:650;text-align:right} #pa-app .pa-ms-html .tk{height:6px;border-radius:8px;background:rgba(151,166,199,.14);overflow:hidden} #pa-app .pa-ms-html .mf{height:100%;width:100%;border-radius:8px;background:#f0785a;opacity:.55} #pa-app .pa-ms-html .mf.g{background:linear-gradient(90deg,#b98a32,var(--ms-gold));opacity:.8} #pa-app .pa-ms-html .ms-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} #pa-app .pa-ms-html .ms-box{min-width:0;background:#0e131c;border:1px solid rgba(151,166,199,.14);border-radius:14px;padding:18px;position:relative;color:#edf0f7} #pa-app .pa-ms-html .ms-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px} #pa-app .pa-ms-html .ms-bt{display:flex;align-items:center;gap:9px;margin:0;font-weight:700;font-size:13px} #pa-app .pa-ms-html .ms-bt>span{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;background:rgba(216,169,76,.12);color:var(--ms-gold);font-size:15px} #pa-app .pa-ms-html .ms-h a{font-size:11.5px;color:var(--ms-gold);font-weight:600;text-decoration:none;white-space:nowrap} #pa-app .pa-ms-html .ms-r{display:grid;grid-template-columns:minmax(100px,130px) 1fr;gap:12px;padding:13px 0;font-size:12px;border-bottom:1px solid rgba(151,166,199,.08)} #pa-app .pa-ms-html .ms-r>span{color:#9aa4ba} #pa-app .pa-ms-html .ms-r>b{font-weight:600;overflow-wrap:anywhere} #pa-app .pa-ms-html .ms-payment-h{margin-top:22px;padding-top:20px;border-top:1px solid rgba(151,166,199,.12)} #pa-app .pa-ms-html .ms-cd{display:flex;gap:14px;align-items:center;padding:14px;border:1px solid rgba(151,166,199,.14);border-radius:12px} #pa-app .pa-ms-html .ms-cd>i{font-style:normal;font-weight:800;font-size:11px;padding:11px 12px;border-radius:8px;background:linear-gradient(135deg,#1a3a8f,#0d1f55);color:white} #pa-app .pa-ms-html .ms-cd b{display:block;font-size:12px;overflow-wrap:anywhere} #pa-app .pa-ms-html .ms-cd small{display:block;margin-top:4px;color:#9aa4ba;font-size:10.5px} #pa-app .pa-ms-html .ms-admin-title{margin-bottom:8px} #pa-app .pa-ms-html .ms-o{display:flex;gap:14px;align-items:center;padding:14px 8px;border-bottom:1px solid rgba(151,166,199,.1);cursor:pointer;border-radius:10px;transition:background .2s;text-decoration:none;color:#edf0f7} #pa-app .pa-ms-html .ms-o:hover{background:rgba(216,169,76,.07)} #pa-app .pa-ms-html .ms-o>span{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;font-size:19px;background:rgba(216,169,76,.1);color:var(--ms-gold)} #pa-app .pa-ms-html .ms-o>div{flex:1;min-width:0} #pa-app .pa-ms-html .ms-o b{display:block;font-size:12.5px} #pa-app .pa-ms-html .ms-o small{display:block;margin-top:4px;color:#9aa4ba;font-size:11px;line-height:1.45} #pa-app .pa-ms-html .ms-o>i{font-style:normal;color:#636e85;font-size:20px} #pa-app .pa-ms-html .ms-hp{display:flex;gap:14px;align-items:center;margin-top:16px;padding:14px;border-radius:12px;background:rgba(216,169,76,.06);border:1px solid rgba(216,169,76,.2)} #pa-app .pa-ms-html .ms-hp>span{font-size:22px;color:var(--ms-gold);flex:none} #pa-app .pa-ms-html .ms-hp>div{flex:1;min-width:0} #pa-app .pa-ms-html .ms-hp b{display:block;font-size:12px} #pa-app .pa-ms-html .ms-hp small{font-size:10.5px;line-height:1.45;color:#9aa4ba} #pa-app .pa-ms-html .ms-support-btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 11px;border:1px solid rgba(216,169,76,.3);border-radius:9px;color:var(--ms-gold)!important;font-size:10.5px;font-weight:700;text-decoration:none;white-space:nowrap} #pa-app .pa-cu-pms-native{margin-top:24px;padding-top:20px;border-top:1px solid rgba(151,166,199,.14)} @media(max-width:1180px){ #pa-app .pa-ms-html .ms-ban{grid-template-columns:1fr 1fr;gap:16px} #pa-app .pa-ms-html .ms-pl{grid-column:1/-1;padding:0 0 14px} #pa-app .pa-ms-html .ms-st{border-left:0;padding:4px 0} #pa-app .pa-ms-html .ms-manage-btn{justify-self:start} } @media(max-width:850px){ #pa-app .pa-ms-html .ms-grid{grid-template-columns:1fr} } @media(max-width:600px){ #pa-app .pa-ms-html .ms-head{align-items:flex-start;flex-direction:column;padding:16px} #pa-app .pa-ms-html .ms-head h2{font-size:22px} #pa-app .pa-ms-html .ms-head-status{width:100%;min-width:0} #pa-app .pa-ms-html .ms-ban{grid-template-columns:1fr;padding:18px} #pa-app .pa-ms-html .ms-pl{grid-column:auto;gap:12px} #pa-app .pa-ms-html .ms-ring{width:52px;height:52px;font-size:24px} #pa-app .pa-ms-html .ms-pl h3{font-size:22px} #pa-app .pa-ms-html .ms-st{padding:12px 0;border-left:0;border-top:1px solid rgba(151,166,199,.14)} #pa-app .pa-ms-html .ms-manage-btn{width:100%;white-space:normal} #pa-app .pa-ms-html .ms-prog{grid-column:auto} #pa-app .pa-ms-html .ms-prog>small{flex-direction:column} #pa-app .pa-ms-html .ms-prog>small b{text-align:left} #pa-app .pa-ms-html .ms-box{padding:14px} #pa-app .pa-ms-html .ms-hp{align-items:flex-start;flex-wrap:wrap} #pa-app .pa-ms-html .ms-support-btn{margin-left:36px} } /* v3.1.4: el contenido nativo de PMS se conserva, pero cerrado para evitar que duplique la interfaz personalizada de Mi suscripción. */ #pa-app details.pa-cu-pms-native{ display:block!important; margin:16px 0 24px!important; padding:0!important; border:1px solid rgba(126,142,177,.24)!important; border-radius:12px!important; background:#101116!important; color:#e8eaf2!important; overflow:hidden; } #pa-app details.pa-cu-pms-native>summary{ display:flex!important; align-items:center; gap:10px; min-height:48px; padding:13px 16px!important; cursor:pointer; list-style:none!important; font-size:13px!important; font-weight:600!important; color:#c9cfff!important; } #pa-app details.pa-cu-pms-native>summary::-webkit-details-marker{display:none} #pa-app details.pa-cu-pms-native>summary:after{ content:"+"; margin-left:auto; font-size:20px; color:#a5adff; } #pa-app details.pa-cu-pms-native[open]>summary:after{content:"−"} #pa-app .pa-cu-pms-native-inner{ padding:16px; border-top:1px solid rgba(126,142,177,.18); } /* v3.2.0 · modo incrustado (cuenta dentro del modal de Studio): sin barra de administración ni márgenes */ html.pa-embedded,html.pa-embedded body{margin:0 !important;padding:0 !important} html.pa-embedded #wpadminbar,body.pa-embed #wpadminbar{display:none !important} html.pa-embedded{margin-top:0 !important} /* v3.3.0 · «Mi suscripción» gestiona la suscripción: el bloque nativo de PMS ya no se muestra y las acciones (cambiar plan, cancelar…) se abren en un panel de esta misma interfaz. */ #pa-app .pa-cu-pms-native[hidden]{display:none!important} #pa-app .ms-o.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none} #pa-app .ms-o.is-disabled>i{display:none} #pa-app .pa-cu-sub-action{margin:0 0 24px;border:1px solid var(--bd,rgba(126,142,177,.24));border-radius:16px;background:var(--card,#101116);color:var(--tx,#e8eaf2);overflow:hidden} #pa-app .pa-cu-sub-action-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--bd,rgba(126,142,177,.24))} #pa-app .pa-cu-sub-action-head h3{margin:0;font-size:16px;font-weight:700;color:var(--tx,#fff)} #pa-app .pa-cu-sub-back{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--bd,rgba(126,142,177,.24));background:rgba(255,255,255,.04);color:var(--tx,#e8eaf2)!important;font-size:13px;font-weight:600;text-decoration:none!important;transition:background .15s,border-color .15s} #pa-app .pa-cu-sub-back:hover{background:rgba(255,255,255,.09);border-color:rgba(165,173,255,.5)} #pa-app .pa-cu-sub-action-body{padding:20px} #pa-app .pa-cu-sub-notices{margin:0 0 14px} @keyframes pa-ms-flash{0%{box-shadow:0 0 0 0 rgba(216,169,76,.55)}100%{box-shadow:0 0 0 14px rgba(216,169,76,0)}} #pa-app .pa-flash{animation:pa-ms-flash 1.1s ease-out 1} @media (prefers-reduced-motion:reduce){#pa-app .pa-flash{animation:none}} /* ===================================================================== v3.3.1 · CAMBIAR PLAN — cada plan con su propio tema Básico = morado · Estándar = azul · Premium = dorado (igual que PelisAnime_Cuenta_unificada_v3_3_3.html). Solo escritorio. ===================================================================== */ @media (min-width:601px){ #pa-app#pa-app .pa-plan-column-basic{--pc:#a78bfa} #pa-app#pa-app .pa-plan-column-standard{--pc:#4aa3ff} #pa-app#pa-app .pa-plan-column-premium{--pc:#f5c542} /* paletas claras: tonos más oscuros para que se lean sobre fondo blanco */ #pa-app#pa-app[data-pa-theme="papel"] .pa-plan-column-basic,#pa-app#pa-app[data-pa-theme="lavanda"] .pa-plan-column-basic,#pa-app#pa-app[data-pa-theme="arena"] .pa-plan-column-basic,#pa-app#pa-app[data-pa-theme="menta"] .pa-plan-column-basic,#pa-app#pa-app[data-pa-theme="cielo"] .pa-plan-column-basic{--pc:#7c3aed} #pa-app#pa-app[data-pa-theme="papel"] .pa-plan-column-standard,#pa-app#pa-app[data-pa-theme="lavanda"] .pa-plan-column-standard,#pa-app#pa-app[data-pa-theme="arena"] .pa-plan-column-standard,#pa-app#pa-app[data-pa-theme="menta"] .pa-plan-column-standard,#pa-app#pa-app[data-pa-theme="cielo"] .pa-plan-column-standard{--pc:#1d6fe0} #pa-app#pa-app[data-pa-theme="papel"] .pa-plan-column-premium,#pa-app#pa-app[data-pa-theme="lavanda"] .pa-plan-column-premium,#pa-app#pa-app[data-pa-theme="arena"] .pa-plan-column-premium,#pa-app#pa-app[data-pa-theme="menta"] .pa-plan-column-premium,#pa-app#pa-app[data-pa-theme="cielo"] .pa-plan-column-premium{--pc:#b7791f} #pa-app#pa-app .pa-plan-column-basic,#pa-app#pa-app .pa-plan-column-standard,#pa-app#pa-app .pa-plan-column-premium{ border-color:color-mix(in srgb,var(--pc) 55%,transparent) !important; background:linear-gradient(150deg,color-mix(in srgb,var(--pc) 15%,var(--card)),var(--card) 62%) !important; } #pa-app#pa-app .pa-plan-column-basic:hover,#pa-app#pa-app .pa-plan-column-standard:hover,#pa-app#pa-app .pa-plan-column-premium:hover{ border-color:var(--pc) !important;box-shadow:0 20px 40px -26px var(--pc) !important; } #pa-app#pa-app .pa-plan-column-basic .pa-plan-icon,#pa-app#pa-app .pa-plan-column-standard .pa-plan-icon,#pa-app#pa-app .pa-plan-column-premium .pa-plan-icon{ color:var(--pc) !important;background:color-mix(in srgb,var(--pc) 16%,transparent) !important; } #pa-app#pa-app .pa-plan-column-premium .pa-plan-icon{background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 30%,transparent),color-mix(in srgb,var(--pc) 10%,transparent)) !important} #pa-app#pa-app .pa-plan-column-basic .pa-plan-title h3,#pa-app#pa-app .pa-plan-column-standard .pa-plan-title h3,#pa-app#pa-app .pa-plan-column-premium .pa-plan-title h3{color:var(--pc) !important} #pa-app#pa-app .pa-plan-column-basic .pa-custom-plan:hover,#pa-app#pa-app .pa-plan-column-standard .pa-custom-plan:hover,#pa-app#pa-app .pa-plan-column-premium .pa-custom-plan:hover{border-color:var(--pc) !important} #pa-app#pa-app .pa-plan-column-basic .pa-price-value,#pa-app#pa-app .pa-plan-column-standard .pa-price-value,#pa-app#pa-app .pa-plan-column-premium .pa-price-value{color:var(--pc) !important} #pa-app#pa-app .pa-plan-column-basic .pa-custom-plan.is-selected,#pa-app#pa-app .pa-plan-column-standard .pa-custom-plan.is-selected,#pa-app#pa-app .pa-plan-column-premium .pa-custom-plan.is-selected{ border-color:var(--pc) !important;background:color-mix(in srgb,var(--pc) 13%,transparent) !important; box-shadow:0 0 0 1px var(--pc),0 10px 26px -16px var(--pc) !important; } #pa-app#pa-app .pa-plan-column-basic .pa-custom-plan.is-selected .pa-radio,#pa-app#pa-app .pa-plan-column-standard .pa-custom-plan.is-selected .pa-radio,#pa-app#pa-app .pa-plan-column-premium .pa-custom-plan.is-selected .pa-radio{ border-color:var(--pc) !important;background:radial-gradient(var(--pc) 45%,transparent 50%) !important; } } /* ===================================================================== v3.3.2 · SUSCRIPCIONES — idéntico al HTML v3.3.3 y de carga instantánea Encabezado «Cambiar plan», fila de acciones [Renovar automáticamente] [Volver] [Confirmar cambio], sin animaciones de entrada y con esqueleto de la estructura final mientras llegan los datos. Solo escritorio. ===================================================================== */ @media (min-width:601px){ /* encabezado de la sección (.vh del HTML) */ #pa-app#pa-app .pa-vh{margin:0 0 24px} #pa-app#pa-app .pa-vh h1{display:block;margin:0;padding:0;font:650 32px Inter,Arial,sans-serif !important;letter-spacing:-.02em !important;color:var(--tx) !important;background:none !important;border:0 !important} #pa-app#pa-app .pa-vh p{margin:5px 0 0 !important;max-width:560px;font-size:13px !important;color:var(--mu) !important} #pa-app#pa-app .pa-hide-native{display:none !important} /* fila de acciones (.act-row del HTML) */ #pa-app#pa-app .pa-subscription-actions{display:flex !important;justify-content:flex-end !important;align-items:center !important;gap:16px !important;margin-top:16px !important;width:100% !important;flex-wrap:nowrap !important} #pa-app#pa-app .pa-subscription-actions .pms-subscription-plan-auto-renew{flex:0 0 auto !important;margin:0 !important;padding:0 !important;background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;font-size:12px !important;color:var(--mu) !important} #pa-app#pa-app .pa-subscription-actions .pms-subscription-plan-auto-renew label{display:flex !important;gap:8px !important;align-items:center !important;margin:0 !important;font-size:12px !important;color:var(--mu) !important} #pa-app#pa-app .pa-subscription-actions input[type=checkbox]{appearance:auto !important;-webkit-appearance:checkbox !important;width:13px !important;height:13px !important;margin:3px 3px 3px 4px !important;padding:0 !important} #pa-app#pa-app .pa-subscription-actions input[type=submit]{display:inline-flex !important;align-items:center;justify-content:center;flex:0 0 auto !important;width:auto !important;min-width:0 !important;height:38px !important;min-height:0 !important;margin:0 !important;padding:0 18px !important;border-radius:11px !important;font:600 12.5px Inter,sans-serif !important;letter-spacing:.01em !important;white-space:nowrap;cursor:pointer;box-shadow:none !important;transform:none;transition:background-color .25s,border-color .25s,color .25s,transform .15s var(--ease) !important} #pa-app#pa-app .pa-subscription-actions input[type=submit]:active{transform:scale(.97)} #pa-app#pa-app .pa-subscription-actions input[name="pms_change_subscription"]{background:var(--btn) !important;color:var(--btnt) !important;border:0 !important} #pa-app#pa-app .pa-subscription-actions input[name="pms_change_subscription"]:hover{background:var(--btnh) !important;filter:none !important} #pa-app#pa-app .pa-subscription-actions input[name="pms_redirect_back"]{background:transparent !important;color:var(--tx) !important;border:1px solid var(--b2) !important} #pa-app#pa-app .pa-subscription-actions input[name="pms_redirect_back"]:hover{background:var(--h1) !important} /* carga instantánea: sin animación de entrada en esta sección */ #pa-app#pa-app #pa-dashboard-content[data-pa-page="subscriptions"] > *, #pa-app#pa-app #pa-dashboard-content[data-pa-page="subscriptions"] .pa-plan-column, #pa-app#pa-app #pa-dashboard-content[data-pa-page="subscriptions"] .pa-custom-plan, #pa-app#pa-app #pa-dashboard-content[data-pa-page="subscriptions"] .pa-vh{animation:none !important} /* esqueleto con la estructura final (mientras llega el formulario de PMS) */ #pa-app#pa-app .pa-skel-card{height:64px;border-radius:14px;border:1px solid var(--bd);background:linear-gradient(90deg,var(--h1),var(--h2),var(--h1));background-size:200% 100%;animation:pa-skel 1.2s linear infinite !important} @keyframes pa-skel{from{background-position:200% 0}to{background-position:-200% 0}} } /* v3.3.2 · medidas y tipografía de las tarjetas idénticas al HTML (.pcol / .pch / .opt) */ @media (min-width:601px){ #pa-app#pa-app .pa-plan-column{min-height:0 !important;font-size:14px !important;font-weight:400 !important;line-height:normal !important} #pa-app#pa-app .pa-plan-header{min-height:44px !important;margin:0 0 12px !important} #pa-app#pa-app .pa-plan-title h3{margin:0 !important;font:700 15px Inter,Arial,sans-serif !important;line-height:normal !important;letter-spacing:-.02em} #pa-app#pa-app .pa-plan-title p{margin:2px 0 0 !important;font-size:11px !important;font-weight:400 !important;line-height:normal !important;color:var(--mu) !important} #pa-app#pa-app .pa-plan-column-basic .pa-plan-title h3,#pa-app#pa-app .pa-plan-column-standard .pa-plan-title h3,#pa-app#pa-app .pa-plan-column-premium .pa-plan-title h3{color:var(--pc) !important} #pa-app#pa-app .pa-plan-list{gap:0 !important} #pa-app#pa-app .pa-custom-plan{margin:0 0 8px !important;padding:0 !important;min-height:0 !important;font-size:14px !important;font-weight:400 !important;line-height:normal !important;border-radius:14px !important} #pa-app#pa-app .pa-plan-card-content{padding:14px !important} #pa-app#pa-app .pa-plan-card-name{font-size:13px !important;font-weight:700 !important;line-height:normal !important;margin:0 !important} #pa-app#pa-app .pa-plan-duration{margin:0 !important;font-size:10.5px !important;font-weight:400 !important;line-height:normal !important} #pa-app#pa-app .pa-price-value{line-height:normal !important} #pa-app#pa-app .pa-price-period{margin:0 !important;font-size:10.5px !important;font-weight:700 !important;line-height:normal !important} #pa-app#pa-app .pa-subscription-actions label,#pa-app#pa-app .pa-subscription-actions .pms-subscription-plan-auto-renew label{padding:0 !important;font-weight:400 !important;line-height:normal !important} } /* v3.3.2 · los títulos de plan toman el color de su tema (gana a la regla general de h3 de la sección) */ @media (min-width:601px){ #pa-app#pa-app #pa-dashboard-content .pa-plan-column-basic .pa-plan-title h3, #pa-app#pa-app #pa-dashboard-content .pa-plan-column-standard .pa-plan-title h3, #pa-app#pa-app #pa-dashboard-content .pa-plan-column-premium .pa-plan-title h3{color:var(--pc) !important;font-weight:700 !important;font-size:15px !important} } /* ===================================================================== v3.3.3 · CAMBIAR PLAN — sin «tarjeta sobre tarjeta» (igual que el HTML) Se quitan la tarjeta envolvente del panel de acción (encabezado «Volver a mi suscripción / Cambiar plan») y el contenedor interior que PMS/estilos genéricos dibujan alrededor de las 3 columnas. El título «Cambiar plan» y las columnas quedan directamente sobre el fondo. Solo escritorio. ===================================================================== */ @media (min-width:601px){ #pa-app#pa-app .pa-cu-sub-action--plans, #pa-app#pa-app #pa-dashboard-content[data-pa-page="subscriptions"] .pa-cu-sub-action{ margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;overflow:visible !important} #pa-app#pa-app .pa-cu-sub-action--plans .pa-cu-sub-action-head{display:none !important} #pa-app#pa-app .pa-cu-sub-action--plans .pa-cu-sub-action-body{padding:0 !important;border:0 !important;background:transparent !important} /* contenedores intermedios de PMS alrededor de las columnas */ #pa-app#pa-app #pa-cu-fragment, #pa-app#pa-app #pa-cu-fragment .pelisanime-unified-pms-account, #pa-app#pa-app #pa-cu-fragment #pms-change-subscription-form, #pa-app#pa-app #pa-cu-fragment .pms-form, #pa-app#pa-app #pa-cu-fragment .pms-form-fields-wrapper, #pa-app#pa-app #pa-cu-fragment .pms-upgrade, #pa-app#pa-app #pa-cu-fragment .pms-upgrade__groups, #pa-app#pa-app #pa-cu-fragment .pms-upgrade__group, #pa-app#pa-app #pa-cu-fragment .pms-upgrade__group--change, #pa-app#pa-app #pa-cu-fragment .pms-subscription-plan-list, #pa-app#pa-app #pa-cu-fragment .pms-subscription-plans{ background:transparent !important;background-image:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important; padding:0 !important;margin-left:0 !important;margin-right:0 !important;width:100% !important;max-width:none !important;height:auto !important;min-height:0 !important;outline:0 !important} #pa-app#pa-app #pa-cu-fragment .pms-upgrade__group--change{display:block !important} #pa-app#pa-app #pa-cu-fragment .pa-plan-columns{margin:0 !important} /* tipografía de las opciones: sin tracking heredado del tema */ #pa-app#pa-app .pa-plan-column, #pa-app#pa-app .pa-plan-column *, #pa-app#pa-app .pa-subscription-actions label{letter-spacing:normal !important;text-transform:none !important} #pa-app#pa-app .pa-plan-column .pa-plan-title h3{letter-spacing:-.02em !important} #pa-app#pa-app .pa-plan-column .pa-plan-card-name, #pa-app#pa-app .pa-plan-column .pa-price-value, #pa-app#pa-app .pa-plan-column .pa-price-period, #pa-app#pa-app .pa-plan-column .pa-plan-duration{font-family:Inter,Arial,sans-serif !important} } /* ===================================================================== v3.3.4 · CAMBIAR PLAN → paso «Método de pago» Al confirmar el cambio se eligen las tarjetas guardadas o se agrega una nueva (con su formulario debajo) antes de enviar el formulario de PMS. ===================================================================== */ @media (min-width:601px){ #pa-app#pa-app #pa-cu-fragment.pa-step-pay #pms-change-subscription-form, #pa-app#pa-app #pa-cu-fragment.pa-step-pay > .pa-vh{display:none !important} #pa-app#pa-app .pa-pay-step{display:block;width:100%;max-width:760px} #pa-app#pa-app .pa-pay-step .pa-vh{display:block !important} #pa-app#pa-app .pa-pay-summary{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 16px;padding:16px 18px;border-radius:14px;border:1px solid var(--bd);background:linear-gradient(180deg,color-mix(in srgb,var(--card),var(--tx) 2.5%),var(--card))} #pa-app#pa-app .pa-pay-summary-label{display:block;font-size:10.5px;color:var(--mu);margin:0 0 3px} #pa-app#pa-app .pa-pay-summary-name{display:block;font:700 15px Inter,Arial,sans-serif;color:var(--tx)} #pa-app#pa-app .pa-pay-summary-dur{display:block;font-size:10.5px;color:var(--mu);margin-top:2px} #pa-app#pa-app .pa-pay-summary-price{text-align:right} #pa-app#pa-app .pa-pay-summary-price strong{display:block;font:700 18px Inter,Arial,sans-serif;color:var(--ac)} #pa-app#pa-app .pa-pay-summary-price span{display:block;font-size:10.5px;font-weight:700;color:var(--mu)} #pa-app#pa-app .pa-pay-list{display:flex;flex-direction:column;gap:8px;margin:0 0 16px} #pa-app#pa-app .pa-pay-opt{display:flex !important;align-items:center;gap:12px;margin:0 !important;padding:14px !important;border-radius:14px;border:1px solid var(--bd);background:var(--card);cursor:pointer;color:var(--tx);transition:border-color .2s,background-color .2s,box-shadow .2s} #pa-app#pa-app .pa-pay-opt:hover{border-color:var(--b2)} #pa-app#pa-app .pa-pay-opt input{position:absolute;opacity:0;pointer-events:none;width:0;height:0} #pa-app#pa-app .pa-pay-radio{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--b2);box-sizing:border-box} #pa-app#pa-app .pa-pay-opt.is-selected{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 10%,var(--card));box-shadow:0 0 0 1px var(--ac)} #pa-app#pa-app .pa-pay-opt.is-selected .pa-pay-radio{border-color:var(--ac);background:radial-gradient(var(--ac) 45%,transparent 50%)} #pa-app#pa-app .pa-pay-brand{flex:none;min-width:46px;height:28px;padding:0 8px;display:grid;place-items:center;border-radius:7px;background:var(--h1);border:1px solid var(--bd);font:700 10px Inter,Arial,sans-serif;letter-spacing:.04em;color:var(--tx)} #pa-app#pa-app .pa-pay-plus{font-size:16px;color:var(--ac)} #pa-app#pa-app .pa-pay-info{flex:1;min-width:0} #pa-app#pa-app .pa-pay-name{display:block;font:600 13px Inter,Arial,sans-serif;color:var(--tx)} #pa-app#pa-app .pa-pay-sub{display:block;font-size:10.5px;color:var(--mu);margin-top:2px} #pa-app#pa-app .pa-pay-badge{flex:none;font-size:9px;font-weight:700;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--gr) 13%,transparent);color:var(--gr)} #pa-app#pa-app .pa-pay-add{margin:0 0 16px} #pa-app#pa-app .pa-pay-frame-wrap{position:relative;height:630px;border-radius:14px;border:1px solid var(--bd);overflow:hidden;background:var(--card)} #pa-app#pa-app .pa-pay-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} #pa-app#pa-app .pa-pay-frame-loading{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:var(--mu)} #pa-app#pa-app .pa-pay-error{margin:0 0 14px;padding:10px 14px;border-radius:11px;font-size:12px;color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);background:color-mix(in srgb,var(--danger) 8%,transparent)} #pa-app#pa-app .pa-pay-error[hidden]{display:none !important} #pa-app#pa-app .pa-pay-actions{display:flex;justify-content:flex-end;align-items:center;gap:16px} #pa-app#pa-app .pa-pay-actions input{display:inline-flex !important;align-items:center;justify-content:center;width:auto !important;height:38px !important;margin:0 !important;padding:0 18px !important;border-radius:11px !important;font:600 12.5px Inter,sans-serif !important;letter-spacing:.01em !important;cursor:pointer;box-shadow:none !important;transition:background-color .25s,opacity .2s} #pa-app#pa-app .pa-pay-actions .pa-pay-back{background:transparent !important;color:var(--tx) !important;border:1px solid var(--b2) !important} #pa-app#pa-app .pa-pay-actions .pa-pay-back:hover{background:var(--h1) !important} #pa-app#pa-app .pa-pay-actions .pa-pay-confirm{background:var(--btn) !important;color:var(--btnt) !important;border:0 !important} #pa-app#pa-app .pa-pay-actions .pa-pay-confirm:hover{background:var(--btnh) !important} #pa-app#pa-app .pa-pay-actions input:disabled{opacity:.45;cursor:not-allowed} }