/* ============================================
   TENNERY® — Estado de cuenta · misma familia que tennery.com.mx
   Barra rosa con logo blanco, gato asomándose, tarjetas blancas con brillo rosa (como los círculos de marcas)
   © TENNERY®. Todos los derechos reservados.
   ============================================ */
:root {
    --pink: #FF4FAE;
    --pink-2: #FF2E9A;
    --rose: #E0157A;
    --ink: #1F1023;
    --ink-soft: #5B3A4B;
    --muted: #7A6570;
    --line: #FFD0E8;
    --line-soft: #FFE8F3;
    --soft: #FFF3F9;
    --glow: 0 0 0 2px #FF4FAE, 0 0 22px rgba(255, 79, 174, 0.35);
    --shadow: 0 10px 30px -16px rgba(224, 21, 122, 0.45);
    --ok: #04754C;
    --ok-bg: #E8FBF3;
    --warn: #8A3B00;
    --warn-bg: #FFF1E5;
    --bad: #C62828;
    --bad-bg: #FDE7E5;
    --font: 'Montserrat', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body { font-family: var(--font); color: var(--ink); background: #FFFFFF; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--rose); }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
svg.fill { fill: currentColor; stroke: none; }

/* Barra rosa (igual que la página principal) */
.top { position: sticky; top: 0; z-index: 30; background: var(--pink); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 18px 6vw; transition: padding 0.3s; }
.top.scrolled { padding: 8px 6vw; }
.brand img { height: 62px; width: auto; display: block; transition: height 0.3s; }
.top.scrolled .brand img { height: 42px; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav.left { justify-content: flex-start; }
.nav.right { justify-content: flex-end; padding-right: calc(425px - 6vw); }
@media (max-width: 1250px) { .wa-pill span { display: none; } .wa-pill { padding: 9px; } }
.nav a { color: #fff; text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.wa-pill { display: inline-flex; align-items: center; gap: 7px; background: #25D366; border-radius: 999px; padding: 8px 16px; font-weight: 700 !important; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5); }
.wa-pill svg { width: 18px; height: 18px; }
.wa-pill:hover { text-decoration: none !important; filter: brightness(1.05); }

.wrap { max-width: 1320px; margin: 0 auto; padding: 12px 20px 36px; display: flex; flex-direction: column; gap: 12px; }
.box { background: #fff; border-radius: 26px; box-shadow: var(--glow); }

/* Nombre */
.hero { text-align: center; padding-top: 4px; }
.kicker { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; color: var(--pink); }
.title { font-weight: 900; font-size: clamp(22px, 3.2vw, 32px); line-height: 1.05; letter-spacing: -0.02em; margin-top: 2px; color: var(--pink-2); overflow-wrap: anywhere; }

.note { background: var(--soft); border: 1px solid var(--line); color: var(--ink-soft); border-radius: 18px; padding: 11px 16px; font-size: 13.5px; }
.note.soft { text-align: center; }

/* Datos de la clienta */
.info { display: grid; grid-template-columns: 1fr 1fr 1.6fr; }
.info-item { padding: 11px 16px; border-right: 1px solid var(--line-soft); min-width: 0; }
.info-item:last-child { border-right: 0; }
.lbl { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pink); margin-bottom: 4px; }
.val { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.val.addr { font-weight: 500; font-size: 14px; color: var(--ink-soft); }
.info .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.link-btn { margin-top: 8px; border: 0; background: none; color: var(--rose); font-weight: 700; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.dom-pend { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--warn); background: var(--warn-bg); border-radius: 10px; padding: 6px 10px; display: inline-block; }

/* Formulario de domicilio */
.dom { padding: 20px 22px; }
.dom h2 { font-size: 20px; font-weight: 800; }
.dom-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.dom-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.dom-form input { height: 46px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; padding: 0 14px; font-size: 16px; font-weight: 500; outline: 0; }
.dom-form input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 79, 174, 0.18); }
.span2 { grid-column: 1 / -1; }
.dom-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.form-msg { font-size: 13px; color: var(--bad); font-weight: 600; }

/* Saldo + calendario en una sola fila */
.resumen { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.resumen .balance.main { justify-content: center; }
/* Feliz cumpleaños (solo ese día) */
.bday { display: flex; align-items: center; gap: 14px; background: linear-gradient(120deg, #FF4FAE, #FF8AC8); color: #fff; border-radius: 22px; padding: 12px 18px; box-shadow: 0 12px 26px -14px rgba(255, 46, 154, 0.9); }
.bday-ico { font-size: 36px; line-height: 1; animation: mascota-float 2.4s ease-in-out infinite; }
.bday strong { display: block; font-size: 20px; font-weight: 900; }
.bday span { font-size: 13px; opacity: 0.95; }

/* Saldos */
.balances { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.balance { background: #fff; border-radius: 24px; box-shadow: var(--glow); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; text-align: center; align-items: center; }
.balance.main { background: var(--pink); color: #fff; box-shadow: 0 14px 34px -14px rgba(255, 46, 154, 0.8); }
.b-head { display: flex; flex-direction: column; gap: 2px; }
.b-lbl { font-size: 12.5px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.b-sub { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.b-sub b { color: var(--ink); }
.balance.main .b-sub, .balance.main .b-sub b { color: rgba(255, 255, 255, 0.9); }
.balance strong { font-size: clamp(30px, 4.2vw, 40px); font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--pink-2); font-variant-numeric: tabular-nums; }
.balance.main strong { color: #fff; }
.b-tag { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: #fff; color: var(--pink-2); border-radius: 999px; padding: 5px 14px; }
.b-tag.soft { background: var(--pink); color: #fff; }

/* 📅 Calendario de pagos (compacto) */
.plan { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.plan-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.plan-head h2 { font-size: 16px; font-weight: 900; }
.plan-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: var(--soft); border: 1.5px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.tile small { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pink); }
.tile strong { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.tile strong.date { font-size: 18px; padding: 5px 0 4px; }
.tile span { font-size: 12px; color: var(--muted); }
.tile .btn { margin-top: 6px; min-height: 36px; padding: 0 16px; font-size: 12.5px; }
.tile.bad { background: var(--bad-bg); border-color: #F5B4AE; }
.tile.bad small, .tile.bad strong { color: var(--bad); }
.tile.soft { background: #fff; }
.weeks-wrap { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.weeks-lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.weeks { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.weeks li { display: inline-flex; gap: 6px; align-items: baseline; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 12px; background: #fff; }
.weeks li b { font-weight: 800; color: var(--pink-2); }
.weeks-wrap .link-btn { margin: 0; font-size: 12px; }
.plan-det summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--rose); }
.plan-det h4 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 10px 0 4px; }
.plan-det ul { list-style: none; max-height: 220px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: 12px; padding: 4px 10px; }
.plan-det li { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 4px 0; border-bottom: 1px dashed var(--line-soft); }
.plan-det li:last-child { border-bottom: 0; }

/* Cumpleaños */
.cumple { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; padding: 12px 18px; background: linear-gradient(120deg, #FFF8E6, #FFFFFF); }
.cumple-ico { font-size: 30px; grid-row: span 2; }
.cumple-txt h2 { font-size: 16px; font-weight: 800; }
.cumple-txt p { font-size: 13.5px; color: var(--ink-soft); }
.cumple-form { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 8px; }
.cumple-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cumple-form select { height: 40px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; padding: 0 10px; font-size: 16px; min-width: 90px; }
.cumple-form label:nth-child(2) select { min-width: 150px; }
.cumple .form-msg { grid-column: 1 / -1; }

/* Pestañas */
.pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tab { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 2px var(--line); font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-soft); text-align: center; transition: box-shadow 0.2s, background 0.2s, color 0.2s; }
.tab:hover { box-shadow: var(--glow); }
.tab span { font-size: 11.5px; background: var(--line-soft); color: var(--pink-2); border-radius: 999px; padding: 1px 8px; }
.tab.active { background: var(--pink); color: #fff; box-shadow: 0 10px 22px -10px rgba(255, 46, 154, 0.9); }
.tab.active span { background: #fff; }

/* Secciones */
.panel { display: flex; flex-direction: column; gap: 12px; }
.sec-title { font-size: clamp(18px, 2.4vw, 22px); font-weight: 900; text-align: center; }
.semanal { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--soft); border: 1.5px solid var(--line); border-radius: 16px; padding: 10px 18px; }
.semanal span { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.semanal strong { font-size: 22px; font-weight: 900; color: var(--pink-2); }

/* Tarjetas de producto (foto arriba, como el catálogo) */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 16px; }
.pcard { min-width: 0; background: #fff; border-radius: 22px; padding: 8px; display: flex; flex-direction: column; box-shadow: 0 0 0 2px var(--line); transition: transform 0.3s, box-shadow 0.3s; }
.pcard:hover { transform: translateY(-5px); box-shadow: var(--glow); }
.photo { position: relative; aspect-ratio: 1 / 1; border-radius: 16px; background: radial-gradient(circle at 50% 58%, #FFD3E6 0%, #FFF4F9 55%, #FFFFFF 100%); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.no-photo { font-weight: 900; letter-spacing: 0.2em; color: rgba(255, 79, 174, 0.4); }
.ph-chips { position: absolute; top: 10px; left: 10px; display: flex; gap: 5px; }
.pinfo { padding: 10px 6px 4px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ptop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.orden { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); white-space: nowrap; }
.pname { font-size: 14px; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pmeta { font-size: 11px; color: var(--muted); }
.pprice { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); padding: 7px; }
.pprice > div { display: flex; flex-direction: column; min-width: 0; }
.pprice small { font-size: 9px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.pprice em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.pprice strong { font-size: 18px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; }
.pprice .reg { background: #fff; border-radius: 10px; padding: 4px 8px; }
.pprice .reg strong { color: var(--pink-2); }
.pprice .reg.ok strong { color: var(--ok); }
.kvs { display: flex; flex-direction: column; }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; padding: 4px 2px; border-bottom: 1px dashed var(--line); }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--muted); }
.kv b { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.kv.strong b { color: var(--pink-2); }
.chip { display: inline-block; font-size: 9.5px; font-weight: 800; border-radius: 999px; padding: 3px 9px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; background: #fff; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.off { background: #EEE; color: #666; }
.ph-chips .chip { box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.35); }
.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 44px 16px; color: var(--muted); border: 2px dashed var(--line); border-radius: 26px; }
.empty span { font-size: 32px; }
.ptable { display: none; }

/* Formas de pago */
.pays { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pay { background: #fff; border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--glow); }
.pay-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; color: #fff; }
.pay-head > span { font-size: 26px; }
.pay-head strong { display: block; font-size: 17px; font-weight: 800; }
.pay-head small { font-size: 12px; opacity: 0.92; }
.pay-head.pink { background: var(--pink); }
.pay-head.blue { background: #009EE3; }
.pay-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.pay-body img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); }
.mp-box { background: #EAF7FD; border: 1px solid #BFE6F8; border-radius: 18px; padding: 14px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.mp-box strong { color: #00699A; font-size: 17px; }
.mp-box span { font-size: 13px; color: #24576F; }
.small { font-size: 12.5px; color: var(--muted); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 999px; padding: 0 24px; font-weight: 800; font-size: 14.5px; text-decoration: none; border: 0; white-space: nowrap; }
.btn.small { min-height: 42px; padding: 0 18px; font-size: 13.5px; }
.btn svg { width: 18px; height: 18px; }
.btn.main { background: var(--pink); color: #fff; box-shadow: 0 10px 22px -12px rgba(255, 46, 154, 0.9); }
.btn.main:disabled { opacity: 0.6; }
.btn.mp { background: #009EE3; color: #fff; }
.btn.wa { background: #25D366; color: #fff; }
.btn.ghost { background: #fff; color: var(--pink-2); box-shadow: 0 0 0 2px var(--line); }
.btn.ghost:hover { box-shadow: var(--glow); }

.actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.updated { font-size: 12.5px; color: var(--muted); text-align: center; }

.msg { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 40px 22px; margin-top: 24px; }
.msg-ico { font-size: 44px; }
.msg h1 { font-size: 26px; font-weight: 900; }
.msg p { color: var(--ink-soft); max-width: 440px; }

/* 🐱 Mascota asomándose desde la barra rosa, como en tennery.com.mx */
.mascota { position: fixed; right: 0; top: 0; z-index: 40; pointer-events: none; transition: right 0.3s ease, top 0.3s ease; }
.mascota img { width: 260px; height: auto; display: block; transform: rotate(3deg); transform-origin: bottom center; filter: drop-shadow(2px 4px 10px rgba(0, 0, 0, 0.22)); animation: mascota-float 2.8s ease-in-out infinite; transition: width 0.3s ease; }
.mascota.scrolled img { width: 180px; }
@keyframes mascota-float {
    0%, 100% { transform: rotate(3deg) translateY(0); }
    50% { transform: rotate(3deg) translateY(-6px); }
}
.mascota .bubble { position: absolute; top: 22px; right: 180px; width: 220px; background: #fff; color: #FF4FA3; font-weight: 800; font-size: 10.5px; padding: 6px 12px; border-radius: 14px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18); text-align: center; line-height: 1.3; animation: bubble-show 6s ease-in-out infinite; transition: font-size 0.3s, padding 0.3s, top 0.3s, right 0.3s; }
.mascota .bubble::after { content: ''; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); border-width: 6px 0 6px 9px; border-style: solid; border-color: transparent transparent transparent #fff; }
@keyframes bubble-show {
    0% { opacity: 0; transform: translateY(8px) scale(0.85); }
    10% { opacity: 1; transform: translateY(0) scale(1); }
    70% { opacity: 1; transform: translateY(0) scale(1); }
    85% { opacity: 0; transform: translateY(-5px) scale(0.9); }
    100% { opacity: 0; }
}
.mascota.scrolled .bubble { font-size: 9px; padding: 3px 8px; top: 14px; right: 140px; }
@media (prefers-reduced-motion: reduce) { .mascota img, .mascota .bubble { animation: none; } }

.foot { background: var(--pink); color: rgba(255, 255, 255, 0.92); text-align: center; padding: 16px 16px 18px; font-size: 10.5px; line-height: 1.45; margin-top: 16px; }
.foot .social { margin-bottom: 6px; }
.foot .social a { font-size: 12px; }
.social { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 8px; }
.social a { color: #fff; font-weight: 700; text-decoration: none; }
.print-head, .print-foot { display: none; }

@media (max-width: 989px) {
    .mascota img { width: 200px; }
    .mascota .bubble { font-size: 9px; top: 16px; right: 155px; width: 170px; }
    .mascota.scrolled img { width: 150px; }
    .mascota.scrolled .bubble { font-size: 8px; top: 12px; right: 118px; }
    .nav.right { display: none; }
}
@media (max-width: 860px) {
    .top { grid-template-columns: 1fr; justify-items: center; padding: 12px 16px; }
    .top.scrolled { padding: 6px 16px; }
    .nav.left { display: none; }
    .brand img { height: 46px; }
    .top.scrolled .brand img { height: 34px; }
    .info { grid-template-columns: 1fr; }
    .info-item { border-right: 0; border-bottom: 1px solid var(--line-soft); }
    .info-item:last-child { border-bottom: 0; }
    .balances, .pays, .resumen { grid-template-columns: 1fr; }
    .pills { grid-template-columns: 1fr 1fr; gap: 8px; }
    .dom-form { grid-template-columns: 1fr; }
}
@media (max-width: 749px) {
    .mascota { right: -30px; top: 20px; }
    .mascota img { width: 160px; }
    .mascota .bubble { top: 158px; right: 58px; width: 150px; font-size: 9.5px; padding: 6px 9px; border-radius: 14px 4px 14px 14px; }
    /* En el celular el gato solo habla un momento al abrir, o cuando lo tocas */
    .mascota .bubble { animation: none; opacity: 0; transform: translateY(-6px) scale(0.9); transition: opacity 0.35s, transform 0.35s; pointer-events: none; }
    .mascota.hablar .bubble { opacity: 1; transform: none; }
    .mascota img { pointer-events: auto; cursor: pointer; }
    .mascota .bubble::after { right: 10px; left: auto; top: -8px; transform: none; border-width: 0 0 9px 9px; border-color: transparent transparent #fff transparent; }
    .bday { padding-right: 96px; }
    .bday strong { font-size: 17px; }
    .mascota.scrolled { right: -15px; top: 15px; }
    .mascota.scrolled img { width: 115px; }
    .mascota.scrolled:not(.hablar) .bubble { opacity: 0; }
    .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .pcard { border-radius: 22px; padding: 7px; }
    .pname { font-size: 13px; }
    .pprice { grid-template-columns: 1fr; padding: 8px; }
    .pprice strong { font-size: 16px; }
    .kv { font-size: 10.5px; gap: 6px; }
    .nav.right { display: none; }
    .tab { font-size: 11px; padding: 6px 8px; min-height: 48px; }
    .tile strong { font-size: 24px; }
}
@media (max-width: 480px) {
    .mascota { right: -30px; top: 20px; }
    .mascota img { width: 135px; }
    .mascota .bubble { top: 136px; right: 50px; width: 140px; font-size: 9px; }

    .mascota.scrolled { right: -12px; top: 15px; }
    .mascota.scrolled img { width: 100px; }

}
@media (max-width: 370px) { .grid { grid-template-columns: 1fr; } }

/* Impresión: la tabla de siempre, en blanco */
@media print {
    @page { margin: 10mm; }
    .top, .pills, .actions, .mascota, .cumple, .note, .foot, .panel[data-panel="pagar"], .grid, .semanal, .dom, .link-btn, .plan .btn { display: none !important; }
    .box, .balance, .pay { box-shadow: none; border: 1px solid #ddd; }
    .print-head { display: flex; align-items: center; gap: 14px; padding: 0 0 10px; border-bottom: 2px solid var(--pink); margin-bottom: 10px; }
    .print-head img { height: 34px; background: var(--pink); border-radius: 8px; padding: 4px 10px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .print-head strong { display: block; font-size: 16px; }
    .print-head span { font-size: 11px; color: var(--muted); }
    .print-foot { display: block; text-align: center; font-size: 10.5px; color: var(--muted); border-top: 1px solid #ddd; padding-top: 8px; margin-top: 12px; }
    .panel[hidden] { display: flex !important; }
    .wrap { padding: 0; max-width: none; gap: 10px; }
    .balance.main { background: #fff; color: var(--ink); }
    .balance.main strong, .balance.main .b-sub, .balance.main .b-sub b { color: var(--pink-2); }
    .b-tag { border: 1px solid var(--pink); }
    .info { grid-template-columns: 1fr 1fr 1.4fr !important; }
    .resumen { grid-template-columns: 1fr !important; }
    .weeks .more { display: flex !important; }
    .sec-title { font-size: 15px; text-align: left; }
    .ptable { display: table; width: 100%; border-collapse: collapse; font-size: 8.5px; }
    .ptable th, .ptable td { border: 1px solid #ddd; padding: 4px; text-align: left; }
    .ptable th { background: #FFF0F7; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.kv b .chip { margin-left: 4px; vertical-align: 1px; }
.addr-link { color: inherit; text-decoration: none; }
.addr-link:hover .val { text-decoration: underline; }
.map-hint { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--rose); }

/* 🎀 Avance del apartado */
.prog { display: flex; flex-direction: column; gap: 3px; }
.prog progress { width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--line-soft); -webkit-appearance: none; appearance: none; }
.prog progress::-webkit-progress-bar { background: var(--line-soft); border-radius: 999px; }
.prog progress::-webkit-progress-value { background: linear-gradient(90deg, #FF8AC8, #FF2E9A); border-radius: 999px; }
.prog progress::-moz-progress-bar { background: linear-gradient(90deg, #FF8AC8, #FF2E9A); border-radius: 999px; }
.prog span { font-size: 11px; color: var(--muted); }
.prog span b { color: var(--ink); }
.aviso-fin { font-size: 11px; font-weight: 600; color: var(--warn); background: var(--warn-bg); border-radius: 10px; padding: 4px 8px; }
/* ⭐ Reseña */
.resena { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #FFF8E6; border: 1.5px solid #F5DFA0; border-radius: 16px; padding: 10px 14px; font-size: 13px; }
/* 📲 Instalar */
.instalar { position: relative; display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; background: var(--soft); border: 1px solid var(--line); border-radius: 14px; padding: 7px 34px 7px 12px; font-size: 11.5px; }
.instalar span { flex: 1; min-width: 150px; }
.instalar .btn.small { min-height: 30px; padding: 0 14px; font-size: 12px; box-shadow: none; }
.instalar .x { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--muted); }
.instalar-ios { flex-basis: 100%; font-size: 12px; color: var(--ink-soft); }
/* 💳 Regreso de Mercado Pago */
.mp-msg { border-radius: 16px; padding: 11px 16px; font-size: 13.5px; }
.mp-msg.ok { background: var(--ok-bg); color: var(--ok); border: 1.5px solid #A6E3C6; }
.mp-msg.pendiente { background: var(--warn-bg); color: var(--warn); border: 1.5px solid #F5C08A; }
.mp-msg.error { background: var(--bad-bg); color: var(--bad); border: 1.5px solid #F5B4AE; }
.btn.liq { margin-top: 4px; min-height: 36px; padding: 0 16px; font-size: 12.5px; background: rgba(255, 255, 255, 0.2); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.8); }

/* 💳 Opciones de "Liquida a 3 MSI" */
.paymenu { position: relative; display: flex; justify-content: center; }
.b-tag.act { border: 0; cursor: pointer; font-family: inherit; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.35); transition: transform 0.15s; }
.b-tag.act:hover { transform: translateY(-1px); }
.paymenu-list { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 25; width: min(300px, 86vw); background: #fff; color: var(--ink); border-radius: 18px; padding: 10px; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 6px; text-align: left; }
.paymenu-list small { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 2px 4px; }
.paymenu-list a { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; }
.paymenu-list a:hover { border-color: var(--pink); }
.paymenu-list a b { color: #009EE3; font-weight: 900; }
.paymenu-list p { font-size: 10.5px; color: var(--muted); padding: 2px 4px; }

.paymenu-list a.urge { background: #fff1f1; border-color: #f3b4b4; }
.paymenu-list a.urge b { color: #c62828; }
.paymenu-list a span em { display: block; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #c62828; margin-bottom: 1px; }
.tile-note { display: block; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 8px; line-height: 1.3; }

/* 🏦 Descuento por transferencia */
.paymenu-list a.desc-hint { background: #f0fbf4; border-color: #b7e4c7; font-size: 12px; }
.paymenu-list a.desc-hint b { color: #1b7a43; white-space: nowrap; }
.tile-desc { font-size: 11.5px; color: var(--bad); text-decoration: none; margin-top: 4px; }
.tile-desc b { font-weight: 900; }
.desc-box { background: #f0fbf4; border: 1.5px solid #b7e4c7; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.desc-box > strong { font-size: 14px; color: #1b7a43; }
.desc-row { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 10px; font-size: 13.5px; }
.desc-row s { color: var(--muted); font-size: 12px; }
.desc-row b { color: #1b7a43; font-weight: 900; font-size: 15px; }
.desc-box small { font-size: 11px; color: var(--muted); line-height: 1.35; }
.btn.wa.ghost-wa { background: #fff; color: #1b7a43; border: 1.5px solid #25D366; }
.link-sm { font-size: 12px; color: var(--muted); text-align: center; }

/* ⭐ Nivel de clienta */
.box.nivel { padding: 18px 20px; border: 1.5px solid; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(135deg, #FFF8E6, #FFEFF6); border-color: #F6D78B; }
.box.nivel.plata { background: linear-gradient(135deg, #F5F7FA, #FFF0F6); border-color: #D7DCE3; }
.box.nivel.diamante { background: linear-gradient(135deg, #EEF7FF, #FFEFF8); border-color: #B9DBF7; }
.box.nivel.rosa { background: linear-gradient(135deg, #FFF3F8, #FFFFFF); }
.box.nivel.pausa { background: #FFF4F4; border-color: #F3B4B4; }
.nv-head { display: flex; align-items: center; gap: 12px; }
.nv-head .nv-ico { font-size: 34px; line-height: 1; }
.nv-head small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pink); }
.nv-head h2 { font-size: 19px; margin: 0; }
.nv-txt, .nv-next { font-size: 13px; color: var(--muted); margin: 0; }
.nv-txt b, .nv-next b { color: var(--ink); }
.nv-bar { width: 100%; height: 8px; accent-color: var(--pink); }
.box.nivel .btn { align-self: flex-start; }
.mi-id { color: var(--pink); letter-spacing: 0.03em; }

/* 🏆 Retos */
.nv-retos { background: rgba(255, 255, 255, 0.7); border-radius: 14px; padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.nv-retos .sub { font-size: 12px; color: var(--muted); margin: 0; }
.nv-retos p { margin: 0; }
.nv-retos summary { cursor: pointer; font-weight: 700; color: var(--pink); font-size: 12.5px; }
.nv-retos ul { margin: 6px 0 4px 18px; padding: 0; display: flex; flex-direction: column; gap: 2px; }

/* 🧾 Mis recibos */
.pills:has(.tab:nth-child(5)) { grid-template-columns: repeat(5, 1fr); }
.rc-sub { font-size: 13px; color: var(--muted); margin: -4px 0 10px; }
.rc-lista { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.rc-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line, #FFD0E8); background: #fff; text-decoration: none; color: inherit; }
.rc-item:hover { border-color: var(--pink); }
.rc-ico { width: 40px; height: 40px; border-radius: 12px; background: #FFE3EF; display: grid; place-items: center; font-size: 19px; flex: none; }
.rc-it { min-width: 0; }
.rc-it b { display: block; font-size: 14px; }
.rc-it small { font-size: 12px; color: var(--muted); }
.rc-m { margin-left: auto; text-align: right; font-weight: 800; font-size: 15px; white-space: nowrap; }
.rc-m em { display: block; font-style: normal; font-size: 11px; font-weight: 700; }
.rc-m em.aplicado, .rc-nota .ok { color: #04754C; }
.rc-m em.pendiente, .rc-nota .or { color: #C45A00; }
.rc-m em.cancelado { color: #9A8A92; }
.rc-nota { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.6; max-width: 560px; }
@media (max-width: 700px) { .pills:has(.tab:nth-child(5)) { grid-template-columns: 1fr 1fr; } .pills .tab:nth-child(5) { grid-column: span 2; } }
@media print { .panel[data-panel="recibos"] { display: none !important; } }

/* ☰ Menú lateral en el celular (como en tennery.com.mx: rosa translúcido sobre la página) */
.menu-tg { position: absolute; opacity: 0; pointer-events: none; }
.burger { display: none; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; cursor: pointer; flex-direction: column; justify-content: center; gap: 6px; padding: 0 8px; }
.burger span { display: block; height: 2px; border-radius: 2px; background: #fff; }
.menu { position: fixed; inset: 0; z-index: 60; color: #fff; padding: 22px 30px 40px; display: flex; flex-direction: column;
    background: rgba(255, 79, 174, 0.86); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; overflow-y: auto; }
.menu-tg:checked ~ .menu { opacity: 1; visibility: visible; }
body:has(.menu-tg:checked) { overflow: hidden; }
.menu-x { position: absolute; left: 22px; top: 18px; width: 44px; height: 44px; display: grid; place-items: center; font-size: 44px; font-weight: 200; line-height: 1; cursor: pointer; }
.menu-logo { height: 46px; width: auto; align-self: center; margin: 4px 0 56px; }
.menu-links { display: flex; flex-direction: column; gap: 6px; }
.menu-links a { color: #fff; text-decoration: none; font-size: 26px; font-weight: 400; letter-spacing: 0.02em; padding: 12px 0; opacity: 0; transform: translateX(-10px); transition: opacity 0.35s, transform 0.35s; }
.menu-tg:checked ~ .menu .menu-links a { opacity: 1; transform: none; }
.menu-tg:checked ~ .menu .menu-links a:nth-child(2) { transition-delay: 0.05s; }
.menu-tg:checked ~ .menu .menu-links a:nth-child(3) { transition-delay: 0.1s; }
.menu-links a span { font-size: 20px; }
.menu-soc { margin-top: auto; padding-top: 30px; display: flex; gap: 26px; }
.menu-soc a { color: #fff; display: grid; place-items: center; width: 34px; height: 34px; }
.menu-soc svg { width: 28px; height: 28px; }
.burger:focus-visible, .menu-x:focus-visible, .menu a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 8px; }
@media (max-width: 860px) { .burger { display: flex; } }
@media (min-width: 861px) { .menu { display: none; } }
@media print { .burger, .menu { display: none !important; } }

/* 🔒 Contraseña */
.clave { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 14px; align-items: center; padding: 12px 18px; background: linear-gradient(120deg, #FDEEF6, #FFFFFF); }
.clave-abrir { grid-row: span 2; }
.clave-form { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 10px; }
.clave-form[hidden] { display: none; }
.clave-form label, .entrar-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: var(--muted); flex: 1 1 200px; }
.clave-form input, .entrar-form input { height: 44px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; padding: 0 12px; font-size: 16px; color: var(--ink); }
.clave-form small { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.clave .form-msg { grid-column: 1 / -1; }
.form-msg.ok { color: var(--ok, #04754C); }
.entrar { text-align: center; padding: 22px 20px; margin-top: 14px; }
.entrar h2 { font-size: 18px; font-weight: 800; }
.entrar p { font-size: 14px; color: var(--ink-soft); margin: 4px 0 12px; }
.entrar-form { display: flex; flex-direction: column; gap: 10px; max-width: 360px; margin: 0 auto; text-align: left; }
@media (max-width: 749px) { .clave { grid-template-columns: auto 1fr; } .clave-abrir { grid-row: auto; grid-column: 1 / -1; } }
.entrar-form label { flex: none; }

/* 📦 Tu entrega */
.entrega { padding: 16px 18px; border: 2px solid var(--pink); background: linear-gradient(120deg, #FFF0F7, #FFFFFF); }
.entrega.ok { border-color: #34B58A; background: linear-gradient(120deg, #E8FBF3, #FFFFFF); }
.en-head { display: flex; gap: 12px; align-items: center; }
.en-ico { font-size: 30px; }
.en-head h2 { font-size: 17px; font-weight: 800; }
.en-head p { font-size: 14px; color: var(--ink-soft); }
.en-dir { font-size: 14px; margin-top: 10px; line-height: 1.5; }
.en-dir small { color: var(--muted); }
.en-prods { margin: 8px 0 0 20px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
.en-pago { font-size: 14px; margin-top: 8px; }
.en-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.en-listo { font-weight: 800; color: #04754C; font-size: 15px; }
.en-nota { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted); }

/* 🚚 Sigue tu entrega */
.en-pasos { list-style: none; margin: 14px 0 4px; padding: 0; display: grid; gap: 0; }
.en-pasos li { position: relative; display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; padding: 0 0 14px; }
.en-pasos li span { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid #D9C9D1; background: #fff; margin-top: 2px; grid-row: span 2; z-index: 1; }
.en-pasos li:not(:last-child)::before { content: ''; position: absolute; left: 7px; top: 18px; bottom: 0; width: 2.5px; background: #E9DDE3; }
.en-pasos li.ok span { background: #34B58A; border-color: #34B58A; box-shadow: 0 0 0 4px rgba(52, 181, 138, 0.18); }
.en-pasos li.ok:not(:last-child)::before { background: #34B58A; }
.en-pasos li b { font-size: 14px; color: var(--muted); }
.en-pasos li.ok b { color: var(--ink); }
.en-pasos li small { font-size: 12px; color: #04754C; font-weight: 600; min-height: 0; }
.en-punto { font-size: 13.5px; margin-top: 10px; color: var(--ink-soft); }
/* 📍 Mapa */
body.mapa-abierto { overflow: hidden; }
.mapa-modal { position: fixed; inset: 0; z-index: 70; background: rgba(31, 16, 35, 0.45); display: flex; align-items: flex-end; justify-content: center; }
.mapa-modal[hidden] { display: none; }
.mapa-hoja { width: min(560px, 100%); height: min(88vh, 720px); background: #fff; border-radius: 22px 22px 0 0; display: flex; flex-direction: column; overflow: hidden; }
.mapa-cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
.mapa-cab b { font-size: 17px; font-weight: 800; }
.mapa-x { border: 0; background: #F6EEF2; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; }
.mapa-ayuda { font-size: 13px; color: var(--ink-soft); padding: 0 16px 10px; }
.mapa { flex: 1; min-height: 260px; }
.mapa-btns { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
@media (min-width: 600px) { .mapa-modal { align-items: center; } .mapa-hoja { border-radius: 22px; } }
/* 📍 Punto de entrega (Paso 38) */
.en-lugar { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #FFF6E0; border: 1px solid #F3DFA8; }
.en-lugar.ok { background: #E9F7EF; border-color: #BFE5CE; }
.en-lugar-t { display: block; font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.en-lugar p { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.en-lugar .en-dir { margin-top: 8px; color: var(--ink); }
.en-lugar .btn { margin-top: 10px; width: 100%; }
.mapa-wrap { position: relative; flex: 1; min-height: 260px; display: flex; }
.mapa-wrap .mapa { flex: 1; }
.mapa-candado { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 500; background: rgba(31, 16, 35, 0.78); color: #fff; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
.mapa-candado[hidden] { display: none; }
.mapa-btns[hidden] { display: none; }
.mapa-fila { display: flex; gap: 8px; }
.mapa-fila .btn { flex: 1; }
#mapaAqui { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#mapaAqui small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.mapa-pregunta { font-size: 14px; line-height: 1.45; text-align: center; }
.mapa-lejos { font-size: 13px; line-height: 1.45; background: #FDECEC; color: #9B1C1C; padding: 8px 10px; border-radius: 10px; }
.mapa-lejos[hidden] { display: none; }