/* ===== Mi Cuenta (michester.pe/mi-cuenta) — pensado PRIMERO para el celular =====
   ~95% de los clientes entra desde el telefono: todo cabe en 360px, los botones miden
   48px o mas (dedo), los campos usan 16px (si no, el iPhone hace zoom al tocarlos) y se
   respetan el notch y la barra de abajo del iPhone (env(safe-area-inset-*)).            */

body.mc{min-height:100dvh;padding-bottom:env(safe-area-inset-bottom)}
.mc [hidden]{display:none !important}  /* .boton trae display:inline-flex y le ganaba al atributo hidden */

/* ---- Barra de arriba ---- */
.mc-barra{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background:rgba(8,8,12,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borde);
}
.mc-barra .marca img{width:34px;height:34px}
.mc-barra__enlace{
  margin-left:auto;background:none;border:1px solid var(--borde);color:var(--suave);
  font:600 .88rem/1 Inter,system-ui,sans-serif;padding:10px 14px;border-radius:999px;cursor:pointer;
}
.mc-barra__enlace:hover{color:var(--texto)}
.mc-barra__enlace[hidden]{display:none}

/* ---- Cuerpo ---- */
.mc-cuerpo{
  width:100%;max-width:560px;margin:0 auto;
  padding:22px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left));
}
.mc-cuerpo section{display:flex;flex-direction:column;gap:16px}
.mc-cuerpo section[hidden]{display:none}
.mc-hero h1,.mc-saludo h1{font-size:clamp(1.65rem,7vw,2.3rem);margin-bottom:.3em}
.mc-hero .plomo,.mc-saludo .plomo{font-size:1rem;margin:0}
.mc-oro{color:var(--oro)}

.mc-tarjeta{
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:20px;padding:18px;
}
.mc-centro{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 18px}
.mc-emoji{font-size:2.4rem;line-height:1}

/* ---- Formularios ---- */
.mc-form{display:flex;flex-direction:column;gap:14px}
.mc-campo{display:flex;flex-direction:column;gap:6px}
.mc-campo > span:first-child{font-size:.86rem;font-weight:700;color:var(--suave)}
.mc input[type=tel],.mc input[type=password],.mc input[type=text],.mc input[type=email],.mc input[type=date],.mc .mc-campo input{
  width:100%;min-height:52px;font:16px/1.2 Inter,system-ui,sans-serif;   /* 16px: el iPhone no hace zoom */
  padding:14px 16px;border-radius:14px;border:1.5px solid rgba(255,255,255,.14);
  background:#0c0c13;color:var(--texto);-webkit-appearance:none;appearance:none;
}
.mc input:focus{outline:none;border-color:var(--rojo-claro);box-shadow:0 0 0 3px rgba(229,9,20,.18)}
.mc input[type=date]{color-scheme:dark}
.mc-clave{position:relative;display:block}
.mc-clave input{padding-right:84px}
.mc-ojo{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  min-height:40px;padding:0 14px;border-radius:10px;border:0;cursor:pointer;
  background:rgba(255,255,255,.07);color:var(--suave);font:700 .82rem Inter,system-ui,sans-serif;
}
.mc-check{display:flex;gap:12px;align-items:center;font-size:.95rem;cursor:pointer;min-height:44px}
.mc-check input{width:22px;height:22px;accent-color:var(--rojo);flex:none}
.mc-boton{min-height:52px;font-size:1.02rem}
.mc-boton:disabled{opacity:.6;cursor:wait;transform:none}
.mc-nota{font-size:.84rem;color:var(--suave);margin:0}
.mc-nota--centro{text-align:center}
.mc-aviso{margin:0;padding:11px 14px;border-radius:12px;font-size:.92rem;background:rgba(229,9,20,.12);border:1px solid rgba(229,9,20,.35);color:#ffc9cc}
.mc-aviso--bien{background:rgba(37,211,102,.1);border-color:rgba(37,211,102,.35);color:#c9f5da}
.mc-aviso[hidden]{display:none}
.mc-enlace{background:none;border:0;color:var(--suave);font:600 .95rem Inter,system-ui,sans-serif;padding:12px;cursor:pointer;text-decoration:underline}

.mc-primera h3{margin-bottom:.35em}
.mc-primera p{color:var(--suave);font-size:.95rem}
.mc-primera .boton{margin-bottom:10px}

.mc-ventajas{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px}
.mc-ventajas li{display:flex;gap:12px;align-items:center;font-size:.95rem;color:var(--suave)}
.mc-ventajas li span{font-size:1.4rem;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.05);flex:none}
.mc-ventajas b{color:var(--texto)}

/* ---- Panel ---- */
.mc-regalo{
  display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:18px;
  background:linear-gradient(100deg,rgba(255,194,71,.18),rgba(37,211,102,.1));
  border:1px solid rgba(255,194,71,.32);
}
.mc-regalo__icono{font-size:1.7rem}
.mc-regalo b{display:block;color:var(--oro);font-size:.98rem;line-height:1.3}
.mc-regalo small{color:var(--suave);font-size:.8rem}

.mc-cuentas{display:flex;flex-direction:column;gap:14px}
.mc-cuenta{
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:22px;padding:16px;
  display:flex;flex-direction:column;gap:14px;
}
.mc-cuenta--urge{border-color:rgba(229,9,20,.45);box-shadow:0 0 0 1px rgba(229,9,20,.15),0 12px 30px rgba(229,9,20,.08)}
.mc-cuenta__cabeza{display:flex;gap:14px;align-items:center}
.mc-logo{width:56px;height:56px;border-radius:16px;overflow:hidden;flex:none;background:#000;display:grid;place-items:center;border:1px solid var(--borde)}
.mc-logo img{width:100%;height:100%;object-fit:cover}
.mc-logo__letra{font-weight:800;font-size:1.5rem;color:var(--suave)}
.mc-cuenta__titulo{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.mc-cuenta__titulo h3{margin:0;font-size:1.12rem}

.mc-pildora{font-size:.78rem;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.mc-pildora--ok{background:rgba(37,211,102,.13);color:#7ee8a8}
.mc-pildora--aviso{background:rgba(255,194,71,.15);color:var(--oro)}
.mc-pildora--mal{background:rgba(229,9,20,.16);color:#ff8a90}
.mc-pildora--oro{background:rgba(255,194,71,.15);color:var(--oro)}

.mc-filas{display:flex;flex-direction:column;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--borde)}
.mc-fila{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:center;padding:11px 12px;min-height:48px}
.mc-fila + .mc-fila,.mc-fila + .mc-nota-disney,.mc-nota-disney + .mc-fila{border-top:1px solid var(--borde)}
.mc-fila--accion{grid-template-columns:62px 1fr auto}
.mc-fila__etq{font-size:.78rem;font-weight:700;color:var(--suave);text-transform:uppercase;letter-spacing:.05em}
.mc-fila__val{font-size:.95rem;min-width:0;overflow-wrap:anywhere}
.mc-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92rem}
.mc-chip{
  min-height:38px;padding:0 13px;border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:var(--texto);
  font:700 .82rem Inter,system-ui,sans-serif;display:inline-flex;align-items:center;
}
.mc-chip:active{transform:scale(.96)}
.mc-chip--oro{border-color:rgba(255,194,71,.45);color:var(--oro)}
/* Premium de IPTV: verde, que se note que esta activo */
.mc-premium{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  background:linear-gradient(100deg,rgba(37,211,102,.22),rgba(37,211,102,.1));
  border:1px solid rgba(37,211,102,.45);color:#8ff0b5;font-weight:800;font-size:.86rem;line-height:1.25;
}
.mc-nota-disney{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px;font-size:.88rem;color:var(--suave)}

.mc-datos--pendiente{border-color:rgba(255,194,71,.4)}
.mc-datos__cabeza h3{margin-bottom:.25em}
.mc-seguridad summary{cursor:pointer;font-weight:700;min-height:28px;list-style:none;display:flex;align-items:center;justify-content:space-between}
.mc-seguridad summary::-webkit-details-marker{display:none}
.mc-seguridad summary::after{content:'›';font-size:1.4rem;color:var(--suave);transition:transform .2s}
.mc-seguridad[open] summary::after{transform:rotate(90deg)}
.mc-seguridad .mc-form{margin-top:14px}
.mc-ayuda{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--suave);font-size:.92rem;padding:8px 0 4px}

/* ---- Hoja de renovar: sube desde abajo ---- */
.mc-hoja{position:fixed;inset:0;z-index:80}
.mc-hoja[hidden]{display:none}
.mc-hoja__fondo{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .2s}
.mc-hoja__panel{
  position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:560px;
  background:var(--fondo-2);border:1px solid var(--borde);border-bottom:0;border-radius:24px 24px 0 0;
  padding:10px 18px calc(18px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:12px;max-height:88dvh;overflow:auto;
  transform:translateY(100%);transition:transform .22s ease;
}
.mc-hoja.abierta .mc-hoja__fondo{opacity:1}
.mc-hoja.abierta .mc-hoja__panel{transform:none}
.mc-hoja__asa{width:44px;height:5px;border-radius:9px;background:rgba(255,255,255,.2);margin:0 auto 4px}
.mc-hoja h3{margin:0;font-size:1.2rem}
.mc-planes{display:flex;flex-direction:column;gap:10px}
.mc-plan{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;text-align:left;
  min-height:60px;padding:12px 16px;border-radius:16px;cursor:pointer;
  border:1.5px solid var(--borde);background:var(--tarjeta);color:var(--texto);font-family:inherit;
}
.mc-plan.activo{border-color:var(--rojo-claro);background:rgba(229,9,20,.09)}
.mc-plan__meses{font-weight:700;font-size:1rem}
.mc-plan__precio{font-weight:800;font-size:1.15rem;grid-row:span 2}
.mc-plan__ahorro{font-size:.8rem;color:#7ee8a8}
.mc-hoja__regalo{margin:0;text-align:center;font-size:.92rem;color:var(--oro)}

/* ---- Aviso flotante (copiado, guardado) ---- */
.mc-toast{
  position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;
  background:#1d1d28;border:1px solid var(--borde);color:var(--texto);
  padding:12px 18px;border-radius:999px;font-weight:700;font-size:.92rem;box-shadow:0 12px 30px rgba(0,0,0,.4);
  max-width:calc(100% - 32px);text-align:center;
}
.mc-toast[hidden]{display:none}

.mc-girando{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--rojo);animation:mc-gira .8s linear infinite}
@keyframes mc-gira{to{transform:rotate(360deg)}}

/* Celulares chicos (iPhone SE, Android de 360px) */
@media (max-width:380px){
  .mc-tarjeta,.mc-cuenta{padding:14px}
  .mc-fila{grid-template-columns:54px 1fr;gap:8px;padding:10px}
  .mc-fila.mc-fila--accion{grid-template-columns:54px 1fr auto}
  .mc-chip{padding:0 11px}
  .mc-logo{width:50px;height:50px}
}
@media (prefers-reduced-motion:reduce){
  .mc-hoja__panel,.mc-hoja__fondo{transition:none}
  .mc-girando{animation-duration:2s}
}
.mc-ilimitado{color:var(--oro);font-weight:700}  /* cortesia: "Sin corte · ilimitado" */

/* ---- Pagar en la web ---- */
.mc-volver{align-self:flex-start;padding:4px 0;text-decoration:none}
.mc-resumen-pago h2{font-size:1.2rem;margin:.2em 0 .4em}
.mc-monto{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.mc-monto span{font-size:2.3rem;font-weight:800;letter-spacing:-.02em}
.mc-monto small{color:var(--suave);font-size:.95rem}
.mc-resumen-pago .mc-hoja__regalo{text-align:left;margin-top:6px}
.mc-pagar{display:flex;flex-direction:column;gap:14px}
.mc-pagar h3{margin:0;font-size:1.08rem;line-height:1.35}
.mc-numero{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:16px;
  background:rgba(37,211,102,.08);border:1.5px dashed rgba(37,211,102,.45)}
.mc-numero b{font-size:1.6rem;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.mc-pasos{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--suave);font-size:.95rem}
.mc-pasos b{color:var(--texto)}
.mc-esperando{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--borde);font-weight:700}
.mc-esperando .mc-girando{width:22px;height:22px;border-width:2.5px;flex:none}

/* ---- Comprar otra plataforma ---- */
/* "Agrega otra plataforma": que llame la atencion (Andree 1/10: "más vistosa y bonita") */
.mc-agregar{
  position:relative;display:flex;flex-direction:column;gap:14px;width:100%;text-align:left;cursor:pointer;overflow:hidden;
  padding:18px 16px 16px;border-radius:24px;color:var(--texto);font-family:inherit;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(229,9,20,.35), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(255,194,71,.22), transparent 55%),
    #15121a;
  border:1px solid rgba(255,120,90,.35);
  box-shadow:0 14px 34px rgba(229,9,20,.18), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
.mc-agregar:active{transform:scale(.985)}
.mc-agregar:hover{box-shadow:0 18px 40px rgba(229,9,20,.26), inset 0 1px 0 rgba(255,255,255,.08)}
/* brillo que cruza de vez en cuando */
.mc-agregar::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.09) 50%, transparent 65%);
  transform:translateX(-120%);animation:mc-brillo 5s ease-in-out infinite;
}
@keyframes mc-brillo{0%,62%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}
.mc-agregar__fila{display:flex;align-items:center;gap:14px}
.mc-agregar__mas{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;flex:none;
  font-size:2rem;font-weight:300;line-height:1;color:#fff;
  background:linear-gradient(140deg,var(--rojo-claro),var(--rojo));box-shadow:0 8px 20px rgba(229,9,20,.45);
}
.mc-agregar__txt{flex:1;min-width:0}
.mc-agregar__txt b{display:block;font-size:1.12rem;letter-spacing:-.01em}
.mc-agregar__txt small{color:#cfc6cc;font-size:.86rem}
.mc-agregar__flecha{font-size:2rem;line-height:1;color:var(--oro);flex:none}
.mc-agregar__regalo{
  position:absolute;top:12px;right:14px;font-size:.74rem;font-weight:800;letter-spacing:.02em;
  padding:4px 10px;border-radius:999px;color:#1a1205;background:var(--oro);box-shadow:0 6px 16px rgba(255,194,71,.3);
}
.mc-agregar__regalo + .mc-agregar__fila{margin-top:14px}
.mc-agregar__logos{display:flex;gap:8px;overflow:hidden;padding-left:2px}
.mc-agregar__logos img{width:38px;height:38px;border-radius:11px;object-fit:cover;flex:none;
  border:1.5px solid rgba(255,255,255,.14);box-shadow:0 4px 10px rgba(0,0,0,.35)}
@media (max-width:360px){ .mc-agregar__logos img{width:32px;height:32px} }
@media (prefers-reduced-motion:reduce){ .mc-agregar::after{animation:none} }

/* "Mis datos" con un poco mas de vida */
.mc-datos{background:linear-gradient(180deg,rgba(255,194,71,.07),transparent 120px),var(--tarjeta)}
.mc-datos__cabeza{position:relative;padding-left:52px;min-height:42px}
.mc-datos__icono{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  font-size:1.25rem;background:rgba(255,194,71,.14);border:1px solid rgba(255,194,71,.3)}
.mc-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mc-app{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;border-radius:14px;cursor:pointer;
  border:1.5px solid var(--borde);background:var(--tarjeta);color:var(--texto);font:600 .72rem/1.15 Inter,system-ui,sans-serif;text-align:center}
.mc-app img{width:44px;height:44px;border-radius:12px;object-fit:cover}
.mc-app small{color:var(--suave);font-weight:700}
.mc-app.activo{border-color:var(--rojo-claro);background:rgba(229,9,20,.09)}
@media (max-width:360px){ .mc-apps{grid-template-columns:repeat(3,1fr)} }
.mc-fila__val a{color:inherit;text-decoration:none}  /* el iPhone convierte correos en enlace: que no se note */
.mc-tip{margin:0;padding:11px 13px;border-radius:14px;font-size:.88rem;line-height:1.45;color:#d9d9e3;background:rgba(255,194,71,.07);border:1px solid rgba(255,194,71,.22)}
.mc-tip b{color:var(--oro)}
.mc-agregar__logos{-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
.mc-tip p{margin:0 0 10px}
.mc-chip--ok{border-color:rgba(37,211,102,.5);color:#8ff0b5;background:rgba(37,211,102,.1)}

/* ---- Codigo de acceso en el panel ---- */
#kCuerpo{display:flex;flex-direction:column;gap:10px}
.mc-codigo{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:16px;background:rgba(37,211,102,.07);border:1.5px solid rgba(37,211,102,.4)}
.mc-codigo--viejo{background:rgba(255,255,255,.03);border-color:var(--borde);opacity:.75}
.mc-codigo__etq{font-size:.82rem;font-weight:700;color:var(--suave);text-transform:uppercase;letter-spacing:.05em}
.mc-codigo__fila{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mc-codigo__num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:2rem;letter-spacing:.18em;font-weight:800}
.mc-codigo--viejo .mc-codigo__num{font-size:1.3rem}

/* Modo demo (?demo, 2/10): cinta fija para que nadie lo confunda con su cuenta real */
.mc-demo-cinta{background:#3a2a06;color:#ffe2a0;border-bottom:1px solid #6b4f12;
  text-align:center;font-size:13px;line-height:1.35;padding:8px 16px}
.mc-demo-cinta b{color:#ffd166}

/* Correo del comprobante (2/10 noche, Andree): campo grande y siempre a la vista, no un check chico */
.mc-copia{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid rgba(232,184,74,.35);border-radius:14px;background:rgba(232,184,74,.06)}
.mc-campo--grande > span:first-child{font-size:1rem;color:var(--texto,#fff)}
.mc .mc-campo--grande input{min-height:54px;font-size:1.08rem}