/* Hocico Phone — Mi Hocico Freemium (paywall + upsell + simulador de estados)
   Hereda los tokens de .mh (mihocico-dash.css). Raíz del componente: .mh.mhf */

/* ── barra simuladora de estado (solo demo) ── */
.mhf-statebar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:22px; padding:12px 16px; border-radius:16px;
  background:linear-gradient(120deg, rgba(143,194,172,.06), transparent);
  border:1px dashed rgba(var(--sg),.28); }
.mhf-statebar-lbl{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--sage-t); }
.mhf-seg{ display:flex; gap:4px; flex-wrap:wrap; }
.mhf-seg-btn{ padding:8px 14px; border-radius:999px; border:1px solid rgba(var(--sg),.18);
  background:rgba(var(--sg),.05); color:rgba(var(--tx),.65); font-family:inherit; font-size:12.5px;
  font-weight:700; cursor:pointer; transition:all .16s; white-space:nowrap; }
.mhf-seg-btn:hover{ color:var(--strong); border-color:rgba(var(--sg),.34); }
.mhf-seg-btn.on{ color:#04130D; background:linear-gradient(135deg,#37E6A4,var(--hp-green)); border-color:transparent; }

/* lock badge en la navegación */
.mhf-nav-lock{ margin-left:auto; display:inline-flex; opacity:.6; }
.mh-nav-item.locked{ color:rgba(var(--tx),.42); }
.mh-nav-item.locked.on{ color:#04130D; }

/* ── Sidebar fijo en laptop/desktop: la columna del menú queda pegada al viewport para que
   "Cerrar sesión" (en .mh-side-foot) esté SIEMPRE visible sin scrollear. Solo donde el sidebar
   se ve (>920px); en móvil está oculto y el logout vive en la cabecera (.mh-logout-m). El
   contenido (.mh-main) sigue scrolleando con la ventana como hasta ahora. */
@media (min-width: 921px){
  .mh-side{
    position: sticky;
    top: 0;
    align-self: start;          /* evita que el grid lo estire al alto del contenido */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;           /* scroll interno solo si el menú excede el alto del viewport */
  }
}

/* ── Campana de notificaciones (panel desplegable) ──────────────────────────────────────── */
.mhf-notif-wrap{ position:relative; }
.mhf-notif-badge{ position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px; box-sizing:border-box;
  border-radius:9px; background:#F2553D; color:#fff; font-size:10px; font-weight:800; line-height:1;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px rgba(11,24,19,.9); }
.mh.light .mhf-notif-badge{ box-shadow:0 0 0 2px #EDEFEE; }
.mhf-notif-panel{ position:absolute; top:calc(100% + 10px); right:0; z-index:60;
  width:min(340px, calc(100vw - 28px)); background:#0E1A15; border:1px solid rgba(var(--sg),.16);
  border-radius:16px; box-shadow:0 24px 60px -18px rgba(0,0,0,.6); overflow:hidden; animation:mhfNotifIn .16s ease; }
.mh.light .mhf-notif-panel{ background:#fff; box-shadow:0 24px 60px -18px rgba(20,40,33,.22); }
@keyframes mhfNotifIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.mhf-notif-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px;
  border-bottom:1px solid rgba(var(--sg),.12); font-size:14px; font-weight:800; color:var(--strong); }
.mhf-notif-readall{ background:none; border:none; cursor:pointer; font-family:inherit; font-size:11.5px; font-weight:700;
  color:var(--acc); padding:0; }
.mhf-notif-readall:hover{ text-decoration:underline; }
.mhf-notif-list{ max-height:380px; overflow-y:auto; }
.mhf-notif-item{ display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; padding:13px 16px;
  background:transparent; border:none; border-bottom:1px solid rgba(var(--sg),.08); cursor:pointer; transition:background .14s; }
.mhf-notif-item:last-child{ border-bottom:none; }
.mhf-notif-item:hover{ background:rgba(var(--sg),.07); }
.mhf-notif-ic{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(55,230,164,.13); color:var(--acc); }
.mhf-notif-body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.mhf-notif-title{ font-size:13.5px; font-weight:700; color:var(--strong); }
.mhf-notif-text{ font-size:12.5px; line-height:1.4; color:rgba(var(--tx),.6); }
.mhf-notif-time{ font-size:11px; color:rgba(var(--tx),.42); margin-top:2px; }
.mhf-notif-dot{ flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--acc); margin-top:6px; }
.mhf-notif-item.read{ opacity:.62; }
.mhf-notif-item.read .mhf-notif-title{ font-weight:600; }
.mhf-notif-empty{ padding:30px 16px; text-align:center; font-size:13px; color:rgba(var(--tx),.5); }

/* ── Estado vacío genérico (p. ej. facturas sin histórico) ──────────────────────────────── */
.mhf-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:44px 20px; gap:6px; }
.mhf-empty-ic{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:rgba(var(--sg),.08); color:rgba(var(--tx),.55); margin-bottom:6px; }
.mhf-empty-t{ font-size:16px; font-weight:800; color:var(--strong); }
.mhf-empty-s{ font-size:13.5px; color:rgba(var(--tx),.55); max-width:340px; line-height:1.5; }

/* ── Solicitar baja: enlace discreto (tono baja) + pie en Modo Alerta ───────────────────── */
.mhf-baja-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px;
  padding-top:14px; border-top:1px solid rgba(var(--sg),.1); font-size:12.5px; color:rgba(var(--tx),.5); }
.mhf-baja-link{ background:none; border:none; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:700;
  color:rgba(224,101,79,.92); padding:0; text-decoration:underline; text-underline-offset:2px; }
.mhf-baja-link:hover{ color:#E0654F; }

/* ── sección con paywall ── */
.mhf-section{ display:flex; flex-direction:column; gap:20px; }
.mhf-head{ margin-bottom:2px; }
.mhf-head-t{ font-family:var(--font-display); font-size:21px; font-weight:800; letter-spacing:-.02em; }
.mhf-head-s{ font-size:13px; color:rgba(var(--tx),.55); margin-top:4px; max-width:46ch; line-height:1.5; }

/* contenedor bloqueado: contenido borroso + glass overlay */
.mhf-lock{ position:relative; border-radius:22px; overflow:hidden; min-height:240px; }
/* el esqueleto va de FONDO (absoluto); la tarjeta de bloqueo (en flujo) marca la altura
   → la tarjeta queda justo bajo el título, sin hueco que la empuje abajo en móvil */
.mhf-lock-blur{ position:absolute; inset:0; filter:blur(7px) saturate(.8); opacity:.55; pointer-events:none; user-select:none; }
.mhf-lock-over{ position:relative; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(120% 90% at 50% 0%, rgba(7,15,12,.5), rgba(7,15,12,.78)); }
.mhf-lock-card{ max-width:420px; text-align:center; padding:30px 28px; border-radius:22px;
  background:linear-gradient(180deg, rgba(20,40,30,.9), rgba(11,24,19,.85)); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(var(--sg),.2); box-shadow:0 30px 70px -30px rgba(0,0,0,.7); }
.mhf-lock-ic{ width:54px; height:54px; margin:0 auto; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:rgba(55,230,164,.12); border:1px solid rgba(55,230,164,.3); }
.mhf-lock-t{ font-family:var(--font-display); font-size:20px; font-weight:800; letter-spacing:-.01em; margin-top:16px; }
.mhf-lock-d{ font-size:13.5px; line-height:1.55; color:rgba(var(--tx),.65); margin-top:9px; }
.mhf-lock-cta{ display:inline-flex; align-items:center; gap:9px; margin-top:20px; padding:13px 24px; border-radius:13px;
  border:none; cursor:pointer; font-family:inherit; font-size:14.5px; font-weight:800; color:#04130D;
  background:linear-gradient(135deg,#37E6A4,var(--hp-green)); box-shadow:0 14px 30px -10px rgba(55,230,164,.55);
  transition:transform .15s; }
.mhf-lock-cta:hover{ transform:translateY(-2px); }
.mhf-lock-price{ font-size:12px; color:var(--sage-t); margin-top:12px; font-weight:600; }

/* etiqueta candado en cabecera de tarjeta */
.mhf-locktag{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:#F2B237; padding:4px 10px; border-radius:999px;
  background:rgba(242,178,55,.12); border:1px solid rgba(242,178,55,.28); }

/* faux skeleton (relleno borroso de fondo) */
.mhf-skel{ display:flex; flex-direction:column; gap:14px; padding:24px; }
.mhf-skel-row{ height:16px; border-radius:8px; background:rgba(var(--sg),.16); }
.mhf-skel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:24px; }
.mhf-skel-box{ height:120px; border-radius:16px; background:rgba(var(--sg),.1); border:1px solid rgba(var(--sg),.14); }

/* ── ficha de mascota ── */
.mhf-pet{ display:grid; grid-template-columns:300px 1fr; gap:20px; align-items:start; }
.mhf-petcol{ display:flex; flex-direction:column; gap:16px; }
.mhf-petcard{ border-radius:22px; padding:22px; background:linear-gradient(180deg, rgba(var(--sg),.08), rgba(var(--sg),.03));
  border:1px solid rgba(var(--sg),.14); }
.mhf-petphoto{ position:relative; width:100%; aspect-ratio:1/1; border-radius:18px; overflow:hidden;
  background-size:cover; background-position:center; box-shadow:inset 0 0 0 1px rgba(var(--sg),.14); }
.mhf-petphoto-grad{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(7,15,12,.9)); }
.mhf-petphoto-meta{ position:absolute; left:16px; right:16px; bottom:14px; }
.mhf-petname{ font-family:var(--font-display); font-size:24px; font-weight:800; color:#fff; letter-spacing:-.01em; }
.mhf-petbreed{ font-size:12.5px; color:rgba(255,255,255,.78); margin-top:2px; }
.mhf-status{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; font-size:11.5px; font-weight:700; }
.mhf-status.ok{ color:#37E6A4; background:rgba(55,230,164,.12); border:1px solid rgba(55,230,164,.26); }
.mhf-status.free{ color:var(--sage-t); background:rgba(var(--sg),.08); border:1px solid rgba(var(--sg),.2); }
.mhf-peturl{ font-family:"JetBrains Mono", ui-monospace, monospace; font-size:11.5px; color:rgba(var(--tx),.45); text-align:center; }

.mhf-fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.mhf-field{ display:flex; flex-direction:column; gap:6px; }
.mhf-field.full{ grid-column:1 / -1; }
.mhf-field label{ font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:rgba(var(--tx),.5); }
.mhf-input{ width:100%; box-sizing:border-box; padding:12px 14px; border-radius:12px; font-family:inherit; font-size:14px;
  color:var(--strong); background:rgba(var(--sg),.06); border:1px solid rgba(var(--sg),.18); transition:border-color .18s; }
.mhf-input:focus{ outline:none; border-color:rgba(55,230,164,.5); background:rgba(55,230,164,.05); }
.mhf-input::placeholder{ color:rgba(var(--tx),.32); }
.mhf-save{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:4px; padding:12px 22px; border-radius:12px;
  border:none; cursor:pointer; font-family:inherit; font-size:14px; font-weight:800; color:#04130D;
  background:linear-gradient(135deg,#37E6A4,var(--hp-green)); transition:transform .15s; }
.mhf-save:hover{ transform:translateY(-2px); }

.mhf-card-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }

/* ── modal de upselling ── */
.mhf-modal-back{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(4,10,7,.7); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:mhfFade .2s ease; }
@keyframes mhfFade{ from{opacity:0;} to{opacity:1;} }
.mhf-modal{ position:relative; width:100%; max-width:480px; border-radius:26px; padding:34px 32px;
  background:radial-gradient(120% 80% at 80% 0%, rgba(20,48,37,.96), rgba(10,23,18,.98));
  border:1px solid rgba(var(--sg),.2); box-shadow:0 40px 100px -30px rgba(0,0,0,.8); color:var(--strong);
  animation:mhfRise .26s cubic-bezier(.2,.9,.3,1); }
@keyframes mhfRise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
.mhf-modal-x{ position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(var(--sg),.08); border:1px solid rgba(var(--sg),.18); color:rgba(var(--tx),.7); cursor:pointer; }
.mhf-modal-x:hover{ color:var(--strong); }
.mhf-modal-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#37E6A4; }
.mhf-modal-t{ font-family:var(--font-display); font-size:27px; font-weight:800; letter-spacing:-.02em; margin:14px 0 0; text-wrap:balance; }
.mhf-modal-p{ font-size:14.5px; line-height:1.55; color:rgba(var(--tx),.7); margin:10px 0 0; }
.mhf-modal-price{ display:flex; align-items:baseline; gap:8px; margin:20px 0 4px; }
.mhf-modal-price b{ font-family:var(--font-display); font-size:38px; font-weight:800; letter-spacing:-.03em; }
.mhf-modal-price span{ font-size:14px; color:rgba(var(--tx),.55); font-weight:600; }
.mhf-modal-feats{ list-style:none; margin:18px 0 0; padding:18px 0 0; border-top:1px solid rgba(var(--sg),.14);
  display:flex; flex-direction:column; gap:12px; }
.mhf-modal-feats li{ display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.45; color:rgba(var(--tx),.85); }
.mhf-modal-feats li svg{ flex:0 0 auto; margin-top:2px; }
.mhf-modal-actions{ display:flex; gap:12px; margin-top:24px; }
.mhf-modal-btn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 20px; border-radius:13px;
  border:none; cursor:pointer; font-family:inherit; font-size:14.5px; font-weight:800; transition:transform .15s; }
.mhf-modal-btn:hover{ transform:translateY(-2px); }
.mhf-modal-btn.primary{ color:#04130D; background:linear-gradient(135deg,#37E6A4,var(--hp-green)); box-shadow:0 16px 34px -12px rgba(55,230,164,.55); }
.mhf-modal-btn.ghost{ flex:0 0 auto; color:rgba(var(--tx),.7); background:transparent; border:1px solid rgba(var(--sg),.2); }
.mhf-modal-note{ font-size:11.5px; color:rgba(var(--tx),.45); margin-top:14px; line-height:1.5; text-align:center; }

/* ── tiles "completa tu Hocico" en Resumen ── */
.mhf-up-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.mhf-up{ display:flex; gap:16px; align-items:flex-start; padding:20px; border-radius:18px; cursor:pointer; text-align:left; font-family:inherit;
  background:rgba(var(--sg),.05); border:1px solid rgba(var(--sg),.14); transition:border-color .2s, transform .15s, background .2s; }
.mhf-up:hover{ border-color:rgba(55,230,164,.35); background:rgba(55,230,164,.05); transform:translateY(-2px); }
.mhf-up-ic{ width:46px; height:46px; border-radius:13px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:rgba(55,230,164,.1); border:1px solid rgba(55,230,164,.24); }
.mhf-up-t{ font-size:15px; font-weight:800; color:var(--strong); }
.mhf-up-d{ font-size:12.5px; color:rgba(var(--tx),.55); margin-top:3px; line-height:1.45; }
.mhf-up-go{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--acc); margin-top:10px; }
.mhf-up.done{ cursor:default; }
.mhf-up.done:hover{ transform:none; border-color:rgba(var(--sg),.14); background:rgba(var(--sg),.05); }
.mhf-up.done .mhf-up-ic{ background:rgba(var(--sg),.08); border-color:rgba(var(--sg),.18); }

/* hero de bienvenida adaptable */
.mhf-hero{ position:relative; overflow:hidden; border-radius:22px; padding:28px; margin-bottom:4px;
  background:linear-gradient(120deg, rgba(55,230,164,.1), rgba(var(--sg),.02)); border:1px solid rgba(55,230,164,.18); }
.mhf-hero-glow{ position:absolute; top:-50px; right:-30px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(55,230,164,.22), transparent); pointer-events:none; }
.mhf-hero-t{ font-family:var(--font-display); font-size:22px; font-weight:800; letter-spacing:-.02em; }
.mhf-hero-d{ font-size:14px; color:rgba(var(--tx),.7); margin-top:8px; max-width:54ch; line-height:1.55; }
.mhf-hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.mhf-hero-btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:12px; border:none; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:800; transition:transform .15s; }
.mhf-hero-btn:hover{ transform:translateY(-2px); }
.mhf-hero-btn.primary{ color:#04130D; background:linear-gradient(135deg,#37E6A4,var(--hp-green)); }
.mhf-hero-btn.ghost{ color:var(--strong); background:rgba(var(--sg),.08); border:1px solid rgba(var(--sg),.2); }

/* selector de mascotas + foto subible */
.mhf-petbar{ display:flex; gap:10px; flex-wrap:wrap; }
.mhf-petchip{ display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border-radius:14px; cursor:pointer; font-family:inherit;
  background:rgba(var(--sg),.05); border:1px solid rgba(var(--sg),.16); color:rgba(var(--tx),.72); font-size:13.5px; font-weight:700; transition:all .16s; }
.mhf-petchip:hover{ color:var(--strong); border-color:rgba(var(--sg),.3); }
.mhf-petchip.on{ color:#04130D; background:linear-gradient(135deg,#37E6A4,var(--hp-green)); border-color:transparent; }
.mhf-petchip.add{ color:var(--acc); border-style:dashed; }
.mhf-petslot{ width:100%; aspect-ratio:1/1; display:block; border-radius:18px; overflow:hidden; }
.mhf-remove{ background:none; border:none; color:#E8836A; font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; padding:0; margin-top:12px; }
.mhf-remove:hover{ color:#FF6B5A; }

/* tarjetas de tarifa en "Descubrir tarifas" */
.mhf-plans{ grid-template-columns:repeat(3,1fr); }
.mhf-plan{ position:relative; display:flex; flex-direction:column; padding:22px; border-radius:18px;
  background:rgba(var(--sg),.05); border:1px solid rgba(var(--sg),.14); }
.mhf-plan-flag{ position:absolute; top:-11px; left:18px; padding:4px 11px; border-radius:999px; font-size:10.5px; font-weight:800;
  color:#04130D; background:linear-gradient(135deg,#37E6A4,var(--hp-green)); }
.mhf-plan-name{ font-size:15px; font-weight:800; }
.mhf-plan-price{ font-family:var(--font-display); font-size:30px; font-weight:800; letter-spacing:-.02em; margin-top:6px; }
.mhf-plan-price span{ font-size:14px; color:rgba(var(--tx),.5); font-weight:600; }
.mhf-plan-d{ font-size:12.5px; color:rgba(var(--tx),.55); margin-top:6px; flex:1; }
.mhf-plan-btn{ margin-top:16px; padding:12px; border-radius:11px; border:none; cursor:pointer; font-family:inherit; font-weight:800; font-size:13.5px;
  color:#04130D; background:linear-gradient(135deg,#37E6A4,var(--hp-green)); transition:transform .15s; }
.mhf-plan-btn:hover{ transform:translateY(-2px); }

/* tarjeta "Tu plan" — qué tiene el cliente + contratar desde dentro */
.mhf-ps{ border-radius:22px; padding:6px 24px 14px; margin-bottom:4px;
  background:linear-gradient(180deg, rgba(var(--sg),.07), rgba(var(--sg),.03)); border:1px solid rgba(var(--sg),.16); }
.mhf-ps-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:16px 0 2px; }
.mhf-ps-h-t{ font-family:var(--font-display); font-size:18px; font-weight:800; letter-spacing:-.01em; }
.mhf-ps-hint{ font-size:12px; color:rgba(var(--tx),.5); }
.mhf-ps-row{ display:flex; align-items:center; gap:15px; padding:16px 0; border-top:1px solid rgba(var(--sg),.1); flex-wrap:wrap; }
.mhf-ps-ic{ width:44px; height:44px; border-radius:13px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:rgba(var(--sg),.07); border:1px solid rgba(var(--sg),.16); }
.mhf-ps-ic.on{ background:rgba(55,230,164,.12); border-color:rgba(55,230,164,.3); }
.mhf-ps-main{ flex:1; min-width:160px; }
.mhf-ps-name{ font-size:15px; font-weight:800; }
.mhf-ps-sub{ font-size:12.5px; color:rgba(var(--tx),.55); margin-top:2px; line-height:1.4; }
.mhf-ps-state{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; padding:6px 12px; border-radius:999px; white-space:nowrap; }
.mhf-ps-state.on{ color:#37E6A4; background:rgba(55,230,164,.1); border:1px solid rgba(55,230,164,.24); }
.mhf-ps-state.off{ color:var(--sage-t); background:rgba(var(--sg),.06); border:1px solid rgba(var(--sg),.16); }
.mhf-ps-btn{ display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:11px; border:none; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:800; color:#04130D; background:linear-gradient(135deg,#37E6A4,var(--hp-green)); white-space:nowrap; transition:transform .15s; }
.mhf-ps-btn:hover{ transform:translateY(-2px); }

/* indicador de plan en la cabecera */
.mhf-planpills{ display:flex; gap:8px; flex-wrap:wrap; margin-top:9px; }
.mhf-planpill{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; }
.mhf-planpill.on{ color:#37E6A4; background:rgba(55,230,164,.1); border:1px solid rgba(55,230,164,.22); }
.mhf-planpill.off{ color:rgba(var(--tx),.5); background:rgba(var(--sg),.05); border:1px solid rgba(var(--sg),.16); }
.mhf-statebar-help{ font-size:11.5px; color:rgba(var(--tx),.5); width:100%; margin-top:2px; }

/* ── TEMA CLARO ── los mhf heredan los tokens remapeados de .mh.light; aquí ajustamos
   los fondos/textos oscuros hardcodeados para que el panel se vea limpio en claro. */
.mh.light .mhf-petcard, .mh.light .mhf-plan, .mh.light .mhf-ps, .mh.light .mhf-up{
  background:#fff; border-color:rgba(23,82,61,.13); box-shadow:0 18px 40px -30px rgba(20,60,45,.3); }
.mh.light .mhf-input{ background:#fff; color:#14241F; border-color:rgba(23,82,61,.2); }
.mh.light .mhf-input:focus{ background:#fff; }
.mh.light .mhf-petname, .mh.light .mhf-lock-t, .mh.light .mhf-modal-t, .mh.light .mhf-ps-h-t, .mh.light .mhf-head-t{ color:#0B1813; }
.mh.light .mhf-hero{ background:linear-gradient(120deg, rgba(42,159,132,.12), #fff); border-color:rgba(42,159,132,.28); }
.mh.light .mhf-lock-over{ background:radial-gradient(120% 90% at 50% 0%, rgba(243,248,244,.55), rgba(233,241,236,.85)); }
.mh.light .mhf-lock-card{ background:#fff; border-color:rgba(23,82,61,.14); box-shadow:0 30px 70px -34px rgba(20,60,45,.4); }
.mh.light .mhf-modal{ background:#fff; border-color:rgba(23,82,61,.14); color:#14241F; }
.mh.light .mhf-modal-back{ background:rgba(10,18,14,.45); }
.mh.light .mhf-modal-x{ background:rgba(23,82,61,.06); border-color:rgba(23,82,61,.16); }
.mh.light .mhf-statebar{ border-color:rgba(23,82,61,.28); }
.mh.light .mhf-seg-btn.on, .mh.light .mhf-petchip.on{ color:#04130D; }
.mh.light .mhf-petslot{ box-shadow:inset 0 0 0 1px rgba(23,82,61,.14); }

@media (max-width:920px){
  .mhf-pet{ grid-template-columns:1fr; }
  .mhf-up-grid{ grid-template-columns:1fr; }
  .mhf-plans{ grid-template-columns:1fr; }
  .mhf-fields{ grid-template-columns:1fr; }
  .mhf-statebar{ flex-direction:column; align-items:flex-start; }
}

/* ── Selector de ejes demo (QA) · solo visible en modo mock ─────────────────── */
.mhf-qa{ display:flex; align-items:center; gap:8px; padding:5px 8px 5px 6px; border-radius:12px;
  background:linear-gradient(120deg, rgba(143,194,172,.08), transparent); border:1px dashed rgba(var(--sg),.34); flex-wrap:wrap; }
.mhf-qa-tag{ display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--sage-t); padding:3px 7px; border-radius:7px; background:rgba(var(--sg),.1); }
.mhf-qa-group{ display:flex; align-items:center; gap:3px; }
.mhf-qa-lbl{ font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:rgba(var(--tx),.5); margin-right:3px; }
.mhf-qa-seg{ padding:5px 10px; border-radius:8px; border:1px solid rgba(var(--sg),.2); background:rgba(var(--sg),.05);
  color:rgba(var(--tx),.62); font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; transition:all .14s; white-space:nowrap; }
.mhf-qa-seg:hover{ color:var(--strong); border-color:rgba(var(--sg),.36); }
.mhf-qa-seg.on{ background:#37E6A4; color:#04130D; border-color:#37E6A4; }
.mh.light .mhf-qa-seg.on{ color:#04130D; }
.mh.light .mhf-qa{ border-color:rgba(23,82,61,.3); }

/* ── Modal upsell: estados éxito / error · botón ancho · nota segura ─────────── */
.mhf-modal-ok{ text-align:center; padding:6px 2px 2px; }
.mhf-modal-okic{ width:56px; height:56px; margin:2px auto 14px; border-radius:50%; display:grid; place-items:center; background:#37E6A4; }
.mhf-modal-okic.err{ background:#E8654B; }
.mhf-modal-ok .mhf-modal-t{ text-align:center; }
.mhf-modal-ok .mhf-modal-p{ text-align:center; }
.mhf-modal-btn.wide{ width:100%; margin-top:18px; justify-content:center; }
.mhf-modal-secure{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:12px;
  font-size:11.5px; color:rgba(var(--tx),.5); }

@media (max-width:760px){ .mhf-qa{ display:none; } }   /* en móvil el QA se oculta para no estorbar */

/* ── Impago + Stripe Customer Portal (pestaña Facturas) ─────────────────────────
   El banner solo aparece si clientes.impago_desde != null (lo marca el webhook en
   invoice.payment_failed y lo limpia invoice.paid). El botón abre el Customer
   Portal de Stripe (actualizar tarjeta / ver recibos) vía Edge billing-portal. */
.mhf-impago{ border:1px solid rgba(224,101,79,.45); background:rgba(224,101,79,.08);
  border-radius:14px; padding:16px 18px; margin:0 0 16px; }
.mhf-impago-t{ display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:800; color:#E0654F; }
.mhf-impago-s{ font-size:13px; color:rgba(var(--tx),.72); margin:6px 0 12px; line-height:1.5; max-width:52ch; }
.mhf-impago-btn{ background:#37E6A4; color:#04130D; border:none; border-radius:999px;
  padding:10px 18px; font-family:inherit; font-size:13.5px; font-weight:800; cursor:pointer; }
.mhf-impago-btn:hover{ filter:brightness(1.06); }
.mhf-impago-btn:disabled{ opacity:.6; cursor:default; }
.mhf-pay-link{ background:none; border:none; cursor:pointer; font-family:inherit; font-size:12.5px;
  font-weight:700; color:rgba(var(--tx),.6); padding:0; margin-top:16px; text-decoration:underline;
  text-underline-offset:2px; align-self:flex-start; }
.mhf-pay-link:hover{ color:var(--strong); }
.mhf-pay-link:disabled{ opacity:.6; cursor:default; }
.mhf-pay-err{ font-size:12.5px; color:#E0654F; margin-top:8px; }