/* «Mi plan» del cliente (prefijo .mpl) */
.mpl{--mpl-ink:#0b1b3d;--mpl-muted:#667691;--mpl-line:#e3eaf4;--mpl-blue:#0b63f6;display:grid;gap:16px;color:var(--mpl-ink)}
.mpl *{box-sizing:border-box}
.mpl-i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mpl h2,.mpl h3,.mpl p{letter-spacing:0}.mpl p{margin:0}
.mpl-card{border:1px solid var(--mpl-line);border-radius:20px;background:#fff;padding:18px;box-shadow:0 6px 22px rgba(11,31,77,.05);min-width:0;display:flex;flex-direction:column;gap:14px}
.mpl-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0}
.mpl-head>div{min-width:0;flex:1}.mpl .mpl-head h2{margin:0;font-size:18px;line-height:1.2;color:var(--mpl-ink)}
.mpl-head-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#e4efff;color:var(--mpl-blue);flex:none}
.mpl-sub,.mpl-muted,.mpl-fine{color:var(--mpl-muted);font-size:13px;line-height:1.4}
.mpl-link{margin-left:auto;display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:0;color:var(--mpl-blue);font:inherit;font-size:13px;font-weight:700;cursor:pointer}.mpl-link .mpl-i{width:14px;height:14px}.mpl-link:hover{text-decoration:underline}
.mpl .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}.mpl .btn .mpl-i{width:17px;height:17px}
.mpl-chip{display:inline-block;padding:3px 12px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;background:#dcf5e7;color:#0f6f3f}
.mpl-chip.is-warn{background:#fff1c7;color:#8a5b00}.mpl-chip.is-bad{background:#ffe1e1;color:#a3262a}.mpl-chip.is-info{background:#e4efff;color:#1b4fa8}.mpl-chip.is-grey{background:#eef1f6;color:#4a5a77}
.mpl-bar{display:block;height:6px;border-radius:999px;background:#e5ecf7;overflow:hidden}.mpl-bar i{display:block;height:100%;border-radius:inherit;background:var(--mpl-blue)}.mpl-bar.is-violet i{background:#7a46e0}

/* Indicadores */
.mpl-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mpl-kpi{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--mpl-line);border-radius:18px;background:#fff;box-shadow:0 6px 22px rgba(11,31,77,.05);min-width:0}
.mpl-kpi-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;flex:none}.mpl-kpi-ico .mpl-i{width:26px;height:26px}
.mpl-kpi.is-gold .mpl-kpi-ico{background:#fff1c7;color:#e09a00}.mpl-kpi.is-gold .mpl-kpi-ico .mpl-i{fill:#f7b500}
.mpl-kpi.is-blue .mpl-kpi-ico{background:#e3efff;color:#0b63f6}.mpl-kpi.is-ok .mpl-kpi-ico{background:#dcf5e7;color:#0f8a4c}.mpl-kpi.is-warn .mpl-kpi-ico{background:#fff1c7;color:#c98200}.mpl-kpi.is-bad .mpl-kpi-ico{background:#ffe1e1;color:#c0392b}.mpl-kpi.is-grey .mpl-kpi-ico{background:#eef1f6;color:#5a6a85}.mpl-kpi.is-violet .mpl-kpi-ico{background:#e4efff;color:#0b63f6}
.mpl-kpi>div{display:grid;gap:2px;min-width:0;flex:1;line-height:1.2}
.mpl-kpi small{color:var(--mpl-muted);font-size:12.5px}.mpl-kpi strong{font-size:22px;letter-spacing:-.02em;overflow-wrap:anywhere}.mpl-kpi>div>span{color:var(--mpl-muted);font-size:12.5px}
.mpl-unit{font-size:13px;font-weight:600;color:var(--mpl-ink);letter-spacing:0}
.mpl-state{font-style:normal;color:#0f8a4c}.mpl-state.is-warn{color:#b97800}.mpl-state.is-bad{color:#c0392b}.mpl-state.is-grey{color:#5a6a85}
.mpl-kpi .mpl-bar{margin-top:6px;margin-right:46px}.mpl-pct{position:absolute;right:18px;bottom:16px;font-size:12.5px;color:var(--mpl-ink)}
.mpl-kpi-go{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:none;color:#7b8aa3;cursor:pointer}.mpl-kpi-go:hover{background:#eef5ff;color:var(--mpl-blue)}.mpl-kpi-go .mpl-i{width:16px;height:16px}
.mpl-kpi:has(.mpl-kpi-go) strong{padding-right:26px}

/* Avisos de la cuenta (cancelación, suscripción, pagos pendientes) */
.mpl-notices{display:grid;gap:12px}.mpl-notices>*{margin:0}

/* Plan actual y facturación */
.mpl-main{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:stretch}
.mpl-hero{position:relative;overflow:hidden;background:#eaf3ff url(/assets/plans-water.webp) right center/cover no-repeat;gap:12px}
.mpl-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,250,255,.98),rgba(245,250,255,.93) 55%,rgba(245,250,255,.55))}
.mpl-hero>*{position:relative}
.mpl-tag{align-self:flex-start;padding:4px 12px;border-radius:999px;background:#e3efff;color:#1b4fa8;font-size:11px;font-weight:800;letter-spacing:.04em}
.mpl-hero-title{display:flex;align-items:center;gap:16px}
.mpl-crown{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:#fff1c7;color:#e09a00;flex:none}.mpl-crown .mpl-i{width:34px;height:34px;fill:#f7b500}
.mpl .mpl-hero h2{margin:0;font-size:clamp(28px,3.4vw,38px);line-height:1.1;letter-spacing:-.02em;color:var(--mpl-ink)}
.mpl-price{margin-top:2px!important;font-size:15px}.mpl-price b{font-size:clamp(26px,3vw,34px);letter-spacing:-.02em}.mpl-price span{color:#3b4f73;font-weight:600}
body[data-page="panel"] .mpl .mpl-desc{max-width:46ch;color:#2f4468;font-size:14.5px;line-height:1.45}
.mpl-benefits{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.mpl-benefits li{display:flex;align-items:center;gap:12px;min-width:0}
.mpl-ben-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#e3efff;color:#0b63f6;flex:none}.mpl-ben-ico .mpl-i{width:20px;height:20px}
.mpl-benefits div{display:grid;min-width:0;line-height:1.25}.mpl-benefits b{font-size:14px}.mpl-benefits small{color:var(--mpl-muted);font-size:12px}
.mpl-hero>.mpl-link{margin-left:0;align-self:flex-start}
.mpl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:auto;padding-top:10px}
.mpl-primary{min-height:48px}.mpl-change{min-height:48px;background:#fff}
.mpl-cancel{display:inline-flex;align-items:center;gap:7px;margin-left:auto;border:0;background:none;color:#0b63f6;font:inherit;font-size:13.5px;font-weight:600;text-decoration:underline;cursor:pointer}.mpl-cancel .mpl-i{width:18px;height:18px;color:#6b7a95}

.mpl-billing .mpl-head{flex-wrap:nowrap}.mpl-update{margin-left:auto;min-height:38px;font-size:12.5px!important}
.mpl-box{border:1px solid var(--mpl-line);border-radius:16px;padding:14px;display:grid;gap:10px}.mpl-box h3,.mpl-hist h3{margin:0;font-size:14.5px}
.mpl-method{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--mpl-line);border-radius:12px}.mpl-method>div{display:grid;gap:2px;min-width:0}.mpl-method b{font-size:14px}.mpl-method small{color:var(--mpl-muted);font-size:12px}
.mpl-method-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#eaf2ff;color:#0b63f6;flex:none}.mpl-method.is-empty .mpl-method-ico{background:#eef1f6;color:#5a6a85}
.mpl-fine{font-size:12px}
.mpl-facts{margin:0;display:grid;gap:2px}.mpl-facts div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 2px;border-top:1px solid #eef2f8}.mpl-facts div:first-child{border-top:0}
.mpl-facts dt{display:flex;align-items:center;gap:10px;color:#41557c;font-size:13.5px}.mpl-facts dt .mpl-i{width:19px;height:19px;color:#5a6a85}.mpl-facts dd{margin:0;font-weight:700;font-size:13.5px;text-align:right}
.mpl-hist{display:grid;gap:8px}.mpl-hist-head{display:flex;align-items:center;gap:10px}
.mpl-table-wrap{overflow-x:auto;border:1px solid var(--mpl-line);border-radius:12px}
.mpl-table{width:100%;border-collapse:collapse;font-size:12.5px}.mpl-table th{padding:8px 10px;background:#f6f9ff;color:#41557c;font-size:11.5px;text-align:left;white-space:nowrap}.mpl-table td{padding:8px 10px;border-top:1px solid #eef2f8;white-space:nowrap}.mpl-table td:nth-child(2){white-space:normal;min-width:130px}
.mpl-nopay{padding:6px 0}

/* Cómo estás aprovechando tu plan */
.mpl-use-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mpl-use-card{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--mpl-line);border-radius:16px;background:#fff;text-align:left;font:inherit;color:inherit;cursor:pointer;min-width:0}.mpl-use-card:hover{background:#f6f9ff}
.mpl-use-card.is-locked{cursor:default;background:#f7f9fc}.mpl-use-card.is-locked:hover{background:#f7f9fc}
.mpl-use-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;flex:none}.mpl-use-ico .mpl-i{width:23px;height:23px}
.mpl-use-ico.is-blue{background:#e3efff;color:#0b63f6}.mpl-use-ico.is-amber{background:#fff1c7;color:#c98200}.mpl-use-ico.is-green{background:#dcf5e7;color:#0f8a4c}.mpl-use-ico.is-grey{background:#eef1f6;color:#5a6a85}
.mpl-use-body{display:grid;gap:1px;min-width:0;flex:1;line-height:1.2}.mpl-use-body small{font-size:12.5px;color:#41557c}.mpl-use-body b{font-size:22px;letter-spacing:-.02em}.mpl-use-body em{font-style:normal;font-size:12px;color:var(--mpl-muted)}.mpl-use-body .mpl-bar{margin-top:6px}
.mpl-use-go{width:16px;height:16px;color:#9bb0d3}

/* Comparar planes */
.mpl-cmp-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
.mpl-plans{display:grid;grid-template-columns:repeat(var(--mpl-n,3),minmax(0,1fr));gap:10px}
.mpl-plan{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--mpl-line);border-radius:16px;background:#fff;min-width:0}
.mpl-plan.is-current{border:2px solid #0b63f6;background:#f4f9ff}
.mpl-plan-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);padding:2px 12px;border-radius:999px;background:#0b63f6;color:#fff;font-size:10px;font-weight:800;letter-spacing:.04em;white-space:nowrap}
.mpl-plan header{display:flex;align-items:center;gap:8px}.mpl .mpl-plan h3{margin:0;font-size:18px}
.mpl-plan-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#eef1f6;color:#5a6a85;flex:none}.mpl-plan-ico .mpl-i{width:18px;height:18px}
.mpl-plan:nth-child(2) .mpl-plan-ico{background:#fff1c7;color:#e09a00}.mpl-plan.is-current .mpl-plan-ico{background:#fff1c7;color:#e09a00}.mpl-plan.is-current .mpl-plan-ico .mpl-i{fill:#f7b500}
.mpl-plan>p{color:var(--mpl-muted);font-size:12.5px;line-height:1.35;min-height:2.7em}
.mpl-plan strong{font-size:24px;letter-spacing:-.02em}.mpl-plan strong small{font-size:13px;font-weight:600;color:#41557c;letter-spacing:0}
.mpl-plan .btn{min-height:36px;font-size:12.5px;padding:6px 8px}.mpl-plan .btn.block{width:100%}
.mpl-plan-cta{display:block;padding:9px 6px;border-radius:12px;background:#e8eef8;color:#7b8aa3;font-size:12.5px;font-weight:700;text-align:center}.mpl-plan-cta.is-current{background:#dbe7fb;color:#4c6fa8}
.mpl-plans-note{margin-top:10px;padding:10px 12px;border-radius:12px;background:#eef5ff;color:#27508f;font-size:12.5px;line-height:1.4}
.mpl-matrix-box{display:grid;gap:10px}.mpl-matrix-box .mpl-link{margin-left:0;justify-self:end}
.mpl-matrix{width:100%;border-collapse:collapse;font-size:12.5px}
.mpl-matrix th,.mpl-matrix td{padding:8px 10px;border-top:1px solid #eef2f8;text-align:center}.mpl-matrix thead th{border-top:0;font-size:12px;color:var(--mpl-ink)}
.mpl-matrix thead th:first-child,.mpl-matrix tbody th{text-align:left}.mpl-matrix tbody th{font-weight:500;color:#2f4468}
.mpl-matrix .is-current{background:#f0f6ff}
.mpl-yes{display:inline-grid;place-items:center;color:#0f9d58}.mpl-yes .mpl-i{width:17px;height:17px;stroke-width:2.6}.mpl-no{color:#aab6cb}

/* Ayuda */
.mpl-help{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mpl-banner{flex-direction:row;align-items:center;gap:16px;padding:16px 18px}.mpl-banner>div{min-width:0;flex:1;display:grid;gap:4px}
.mpl .mpl-banner h2{margin:0;font-size:16px}.mpl-banner p{color:var(--mpl-muted);font-size:12.5px;line-height:1.4}
.mpl-banner-ico{width:46px;height:46px;padding:11px;border-radius:50%;background:#e3efff;color:#0b63f6}.mpl-banner.is-pitch .mpl-banner-ico{background:#fff1c7;color:#e09a00}
.mpl-banner-actions{display:flex!important;flex-wrap:wrap;gap:8px;flex:none!important}

body[data-page="panel"] .mpl .mpl-price,body[data-page="panel"] .mpl .mpl-price b{color:#0b1b3d}body[data-page="panel"] .mpl .mpl-price span{color:#3b4f73}
body[data-page="panel"] .mpl .mpl-sub,body[data-page="panel"] .mpl .mpl-muted,body[data-page="panel"] .mpl .mpl-fine,body[data-page="panel"] .mpl .mpl-banner p,body[data-page="panel"] .mpl .mpl-plan>p{color:#667691}

@media (max-width:1180px){
 .mpl-kpis,.mpl-use-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mpl-main,.mpl-cmp-grid,.mpl-help{grid-template-columns:1fr}
}
@media (max-width:720px){
 .mpl-kpis,.mpl-use-grid,.mpl-benefits{grid-template-columns:1fr}
 .mpl-plans{grid-template-columns:1fr}.mpl-plan>p{min-height:0}
 .mpl-banner{flex-wrap:wrap}.mpl-banner>div{flex:1 1 180px}.mpl-banner-actions{flex:1 1 100%!important}.mpl-banner-actions .btn,.mpl-banner>.btn{width:100%}.mpl-table th,.mpl-table td{padding:8px 6px;white-space:normal}.mpl-cancel{margin-left:0}.mpl-billing .mpl-head{flex-wrap:wrap}.mpl-update{margin-left:0}
}

/* Prueba gratis de Club (client-trial.js): tarjeta con los días que quedan, píldora del encabezado y despedida cuando termina */
body[data-page="panel"] .trial{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;margin:0 0 16px;padding:18px 20px;border:1px solid #cfe0f7;border-radius:18px;background:linear-gradient(135deg,#eef5ff,#f8fbff);box-shadow:0 8px 24px rgba(11,31,77,.06)}
body[data-page="panel"] .trial-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(160deg,#0d3fb8,#082a7e);color:#fff}
body[data-page="panel"] .trial-ico .dx-i{width:24px;height:24px}
body[data-page="panel"] .trial-tag{display:inline-block;padding:3px 10px;border-radius:999px;background:#fff3d6;color:#8a5a00;font:700 11.5px Inter,system-ui,sans-serif;letter-spacing:.01em}
body[data-page="panel"] .trial-body h3{margin:6px 0 4px;font-size:18px;line-height:1.25;color:#0b1b3d}
body[data-page="panel"] .trial-body p{margin:0;color:#41536f;font-size:14px;line-height:1.5}
body[data-page="panel"] .trial-bar{margin:10px 0 6px;height:8px;border-radius:999px;background:#dbe7fb;overflow:hidden}
body[data-page="panel"] .trial-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1670ff,#0b57d9)}
body[data-page="panel"] .trial-after{display:block;color:#5b6b85;font-size:12.5px;line-height:1.45}
body[data-page="panel"] .trial-cta{display:grid;gap:6px;justify-items:end;text-align:right}
body[data-page="panel"] .trial-cta .btn{min-height:44px;white-space:nowrap}
body[data-page="panel"] .trial-cta small{color:#667691;font-size:12px;max-width:230px}
body[data-page="panel"] .trial.is-urgent{border-color:#f2c36b;background:linear-gradient(135deg,#fff7e4,#fffdf6)}
body[data-page="panel"] .trial.is-urgent .trial-bar{background:#f6e3b8}
body[data-page="panel"] .trial.is-urgent .trial-bar i{background:linear-gradient(90deg,#f5a623,#e08a00)}
body[data-page="panel"] .trial.is-ended{border-color:#d9e2f1;background:#f7faff}
body[data-page="panel"] .cp-status.is-trial{background:#fff3d6;color:#7a4e00}
body[data-page="panel"] .cp-status.is-trial .dx-i{width:15px;height:15px}
@media (max-width:760px){body[data-page="panel"] .trial{grid-template-columns:auto minmax(0,1fr);padding:16px}body[data-page="panel"] .trial-cta{grid-column:1 / -1;justify-items:stretch;text-align:left}body[data-page="panel"] .trial-cta .btn{justify-content:center}body[data-page="panel"] .trial-cta small{max-width:none}}