/* ==========================================================
   mi-cuenta.css — Cable Diversión / NetControl ISP
   Versión funcional para mi-cuenta.php con pago PayPal
   ========================================================== */

:root{
  --bg:#f4f7fb;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --pri:#2563eb;
  --pri2:#1d4ed8;
  --ok:#16a34a;
  --err:#dc2626;
  --warn:#f59e0b;
  --soft:#eff6ff;
  --shadow:0 18px 45px rgba(15,23,42,.08);
  --radius:20px;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.14), transparent 34%),
    radial-gradient(circle at bottom right, rgba(22,163,74,.12), transparent 30%),
    var(--bg);
}

a{color:var(--pri)}
button,input{font:inherit}

.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-weight:700;
}

.mini{
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

/* ===================== LOGIN ===================== */
.loginbg{
  display:grid;
  place-items:center;
  padding:24px;
}

.logincard{
  width:min(440px,100%);
  background:rgba(255,255,255,.94);
  border:1px solid rgba(226,232,240,.95);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:26px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.brand img{
  width:58px;
  height:58px;
  object-fit:contain;
  border-radius:14px;
  background:#fff;
}

.brand h1{
  font-size:18px;
  line-height:1.2;
  margin:0;
}

.subtitle,.helper{
  color:var(--muted);
  line-height:1.45;
}

.logincard form{
  display:grid;
  gap:10px;
  margin-top:18px;
}

label{
  color:#334155;
  font-weight:700;
  font-size:13px;
}

input,.input{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 13px;
  outline:none;
  background:#fff;
  color:var(--ink);
}

input:focus,.input:focus{
  border-color:#93c5fd;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.btn,.logincard button,.actualizar button,.wifi-form button,.go button{
  border:0;
  cursor:pointer;
  border-radius:14px;
  padding:12px 15px;
  font-weight:800;
  transition:.18s transform ease,.18s background ease,.18s box-shadow ease;
}

.btn:hover,.logincard button:hover,.actualizar button:hover,.wifi-form button:hover,.go button:hover{
  transform:translateY(-1px);
}

.btn.pri,.logincard button,.actualizar button,.wifi-form button,.go button{
  color:#fff;
  background:linear-gradient(135deg,var(--pri),var(--pri2));
  box-shadow:0 10px 22px rgba(37,99,235,.18);
}

.btn.out{
  color:#1e293b;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:none;
}

.logout{
  color:#fff;
  text-decoration:none;
  background:#0f172a;
  padding:11px 14px;
  border-radius:14px;
  font-weight:800;
}

.errorbox,.success,.notice{
  margin:14px 0;
  padding:13px 14px;
  border-radius:15px;
  line-height:1.45;
}

.errorbox{
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#991b1b;
}

.success{
  background:#ecfdf5;
  border:1px solid #bbf7d0;
  color:#166534;
}

.notice{
  background:#fffbeb;
  border:1px solid #fde68a;
  color:#92400e;
}

/* ===================== HEADER ===================== */
header{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 22px;
  background:rgba(15,23,42,.92);
  color:#fff;
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

header .brand h1{font-size:17px}
header .brand img{width:50px;height:50px}
.head-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* ===================== LAYOUT ===================== */
.wrap{
  width:min(1200px,100%);
  margin:0 auto;
  padding:24px;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(320px,.75fr);
  gap:20px;
}

.card{
  background:rgba(255,255,255,.95);
  border:1px solid rgba(226,232,240,.92);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}

.card h2{
  margin:0 0 6px;
  font-size:22px;
}

.data{
  list-style:none;
  padding:0;
  margin:18px 0;
  display:grid;
  gap:10px;
}

.data li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  border:1px solid var(--line);
  background:#f8fafc;
  border-radius:15px;
  padding:12px 14px;
}

.k{
  color:#334155;
  font-weight:800;
}

.v{
  text-align:right;
  font-weight:800;
  color:#0f172a;
  overflow-wrap:anywhere;
}

.actualizar{
  display:grid;
  grid-template-columns:1fr 180px;
  gap:10px;
  align-items:end;
  border-top:1px dashed var(--line);
  padding-top:16px;
  margin-top:16px;
}

.actualizar label{
  grid-column:1 / -1;
}

/* ===================== SUBCARDS / WIFI ===================== */
.subcard{
  margin-top:18px;
  border:1px solid var(--line);
  background:#fbfdff;
  border-radius:18px;
  padding:16px;
}

.subhead h3{
  margin:0 0 4px;
  font-size:18px;
}

.wifi-forms{
  display:grid;
  gap:12px;
}

.wifi-form{
  border:1px solid #dbeafe;
  background:#fff;
  border-radius:16px;
  padding:14px;
}

.row{
  display:grid;
  grid-template-columns:1fr 1fr 145px;
  gap:12px;
  align-items:end;
}

.col{min-width:0}
.btncol{display:flex;align-items:end}

.wifi{
  display:grid;
  gap:14px;
}

.qr{
  display:flex;
  gap:14px;
  align-items:center;
  border:1px solid var(--line);
  background:#f8fafc;
  padding:13px;
  border-radius:17px;
}

.qr img{
  width:118px;
  height:118px;
  border-radius:12px;
  background:#fff;
  border:1px solid #e5e7eb;
}

.ssid{
  font-weight:900;
  margin-bottom:6px;
}

/* ===================== ACCIONES ===================== */
.grid-actions{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}

.action{
  min-height:178px;
  display:flex;
  flex-direction:column;
  gap:12px;
  border:1px solid var(--line);
  border-radius:19px;
  padding:16px;
  background:linear-gradient(180deg,#fff,#f8fafc);
  color:var(--ink);
  text-decoration:none;
}

.action svg{
  width:36px;
  height:36px;
  color:var(--pri);
}

.action h3{
  margin:0 0 5px;
  font-size:16px;
  line-height:1.2;
}

.action p{
  margin:0;
  color:var(--muted);
  line-height:1.35;
  font-size:13px;
}

.action .go{
  margin-top:auto;
}

.action.paypal{
  border-color:#bfdbfe;
  background:
    linear-gradient(180deg,rgba(239,246,255,.95),#fff);
}

.action.paypal svg{color:#003087}

.action.paypal .go button{
  background:linear-gradient(135deg,#003087,#0070ba);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1050px){
  .wrap{
    grid-template-columns:1fr;
  }
  .grid-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:720px){
  header{
    position:relative;
    align-items:flex-start;
    padding:14px;
  }

  header,.head-actions{
    flex-direction:column;
  }

  .head-actions,.head-actions form,.head-actions button,.logout{
    width:100%;
  }

  .wrap{
    padding:14px;
    gap:14px;
  }

  .card{
    padding:17px;
    border-radius:18px;
  }

  .data li{
    align-items:flex-start;
    flex-direction:column;
  }

  .v{
    text-align:left;
  }

  .actualizar{
    grid-template-columns:1fr;
  }

  .row{
    grid-template-columns:1fr;
  }

  .btncol,.btncol button{
    width:100%;
  }

  .grid-actions{
    grid-template-columns:1fr;
  }

  .action{
    min-height:auto;
  }

  .qr{
    align-items:flex-start;
  }

  .qr img{
    width:105px;
    height:105px;
  }

  .brand img{
    width:48px;
    height:48px;
  }

  .brand h1{
    font-size:16px;
  }
}

@media (max-width:420px){
  body{font-size:14px}
  .logincard{padding:20px}
  .qr{
    flex-direction:column;
  }
  .qr img{
    width:160px;
    height:160px;
    align-self:center;
  }
}


/* ==========================================================
   LOGIN TVCAM GLASS
   Consistente con /sistema/logo.png
   Este bloque modifica únicamente la vista de acceso.
   ========================================================== */

.loginbg{
  --tvcam-blue:#12379f;
  --tvcam-blue-dark:#09256f;
  --tvcam-cyan:#22b7ea;
  --tvcam-red:#ed1c2e;
  --tvcam-red-dark:#b90d1f;
  --tvcam-white:rgba(255,255,255,.82);

  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  min-height:100vh;
  min-height:100dvh;
  padding:
    calc(env(safe-area-inset-top) + 24px)
    18px
    calc(env(safe-area-inset-bottom) + 24px);
  overflow-x:hidden;
  background:
    radial-gradient(circle at 14% 16%,rgba(34,183,234,.42),transparent 31%),
    radial-gradient(circle at 88% 80%,rgba(237,28,46,.31),transparent 30%),
    radial-gradient(circle at 74% 8%,rgba(255,255,255,.20),transparent 24%),
    linear-gradient(145deg,#071b5b 0%,#12379f 37%,#126dc3 68%,#ed1c2e 135%);
  color:#102044;
}

.loginbg::before,
.loginbg::after{
  content:"";
  position:fixed;
  z-index:-1;
  pointer-events:none;
  border-radius:50%;
  filter:blur(12px);
}

.loginbg::before{
  width:390px;
  height:390px;
  left:-190px;
  top:20%;
  background:rgba(29,169,225,.22);
  border:1px solid rgba(255,255,255,.16);
}

.loginbg::after{
  width:430px;
  height:430px;
  right:-220px;
  bottom:-90px;
  background:rgba(237,28,46,.20);
  border:1px solid rgba(255,255,255,.12);
}

.loginbg .logincard{
  position:relative;
  width:min(460px,100%);
  margin:0;
  padding:30px 28px 27px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.70);
  border-radius:32px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.61));
  box-shadow:
    0 28px 68px rgba(3,18,70,.37),
    inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter:blur(27px) saturate(155%);
  -webkit-backdrop-filter:blur(27px) saturate(155%);
  animation:tvcamLoginIn .55s cubic-bezier(.2,.8,.2,1);
}

.loginbg .logincard::before{
  content:"";
  position:absolute;
  top:0;
  left:12%;
  right:12%;
  height:4px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(
    90deg,
    var(--tvcam-blue),
    var(--tvcam-cyan) 42%,
    var(--tvcam-red)
  );
  box-shadow:0 3px 15px rgba(18,55,159,.24);
}

.loginbg .brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:13px;
  text-align:center;
}

.loginbg .brand img{
  display:block;
  width:min(210px,68vw);
  height:auto;
  max-height:190px;
  padding:0;
  margin:0 auto;
  object-fit:contain;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  filter:
    drop-shadow(0 12px 18px rgba(8,31,102,.18))
    drop-shadow(0 2px 2px rgba(0,0,0,.08));
}

.loginbg .brand h1{
  margin:0;
  color:#172954;
  font-size:20px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.015em;
}

.loginbg .brand h1 b{
  display:block;
  margin-bottom:5px;
  color:var(--tvcam-red);
  font-size:12px;
  line-height:1;
  font-weight:950;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.loginbg .subtitle{
  margin:15px auto 0;
  max-width:350px;
  color:#52617c;
  text-align:center;
  font-size:14px;
  line-height:1.55;
}

.loginbg .subtitle strong{
  color:var(--tvcam-blue-dark);
  font-weight:900;
}

.loginbg .logincard form{
  display:grid;
  gap:9px;
  margin-top:21px;
}

.loginbg .logincard label{
  margin:3px 2px 0;
  color:#25385f;
  font-size:12px;
  font-weight:900;
  letter-spacing:.015em;
}

.loginbg .logincard input{
  min-height:52px;
  padding:13px 15px;
  border:1px solid rgba(38,71,135,.20);
  border-radius:16px;
  background:rgba(255,255,255,.74);
  color:#102044;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 7px 17px rgba(17,46,111,.06);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    transform .18s ease;
}

.loginbg .logincard input::placeholder{
  color:#8a96aa;
}

.loginbg .logincard input:focus{
  border-color:rgba(18,55,159,.67);
  background:#fff;
  box-shadow:
    0 0 0 4px rgba(34,183,234,.16),
    0 10px 24px rgba(18,55,159,.12);
  transform:translateY(-1px);
}

.loginbg .logincard button{
  position:relative;
  min-height:55px;
  margin-top:9px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.32);
  border-radius:17px;
  color:#fff;
  background:
    linear-gradient(135deg,var(--tvcam-blue-dark),var(--tvcam-blue) 55%,#1d75ce);
  box-shadow:
    0 15px 30px rgba(9,37,111,.28),
    inset 0 1px 0 rgba(255,255,255,.26);
  font-size:15px;
  font-weight:950;
  letter-spacing:.01em;
}

.loginbg .logincard button::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-115%);
  background:linear-gradient(
    110deg,
    transparent 20%,
    rgba(255,255,255,.28) 47%,
    transparent 74%
  );
  transition:transform .55s ease;
}

.loginbg .logincard button:hover{
  transform:translateY(-2px);
  box-shadow:
    0 18px 34px rgba(9,37,111,.34),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.loginbg .logincard button:hover::after{
  transform:translateX(115%);
}

.loginbg .logincard button:active{
  transform:translateY(0);
}

.loginbg .errorbox{
  margin:15px 0 0;
  padding:12px 14px;
  border:1px solid rgba(237,28,46,.22);
  border-radius:16px;
  background:rgba(255,235,239,.82);
  color:#a31627;
  text-align:center;
  font-size:13px;
  font-weight:750;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
}

.loginbg .helper{
  margin:18px 0 0;
  color:#69768c;
  text-align:center;
  font-size:12px;
  line-height:1.5;
}

.loginbg .helper a{
  color:var(--tvcam-blue);
  font-weight:900;
  text-decoration:none;
}

.loginbg .helper a:hover{
  color:var(--tvcam-red);
  text-decoration:underline;
}

/* Loader del login en colores TVCAM */
.loginbg #pageLoader{
  background:
    radial-gradient(circle at 50% 42%,rgba(34,183,234,.08),transparent 31%),
    #fff;
}

.loginbg .loader-logo{
  width:min(72vw,300px);
  max-height:280px;
  object-fit:contain;
  filter:drop-shadow(0 13px 22px rgba(17,55,145,.16));
}

.loginbg .loader-ring{
  border-color:rgba(18,55,159,.12);
  border-top-color:var(--tvcam-blue);
  border-right-color:var(--tvcam-cyan);
  border-bottom-color:var(--tvcam-red);
}

.loginbg .loader-text{
  color:var(--tvcam-blue-dark);
}

@keyframes tvcamLoginIn{
  from{
    opacity:0;
    transform:translateY(18px) scale(.98);
  }
  to{
    opacity:1;
    transform:none;
  }
}

@media(max-width:480px){
  .loginbg{
    padding:
      calc(env(safe-area-inset-top) + 15px)
      12px
      calc(env(safe-area-inset-bottom) + 15px);
  }

  .loginbg .logincard{
    padding:24px 18px 22px;
    border-radius:27px;
  }

  .loginbg .brand img{
    width:min(190px,64vw);
    max-height:165px;
  }

  .loginbg .brand h1{
    font-size:18px;
  }
}

@media(prefers-reduced-motion:reduce){
  .loginbg .logincard{
    animation:none;
  }

  .loginbg .logincard button::after{
    display:none;
  }
}