@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg-deep:#050a1f;
  --bg-panel:rgba(11,19,43,0.72);
  --bg-card:rgba(255,255,255,0.04);
  --cian:#00d2ff;
  --naranja:#ff7a1a;
  --verde:#25d366;
  --rojo:#ff4d4d;
  --text:#ffffff;
  --text-dim:#a0aec0;
  --border:rgba(0,210,255,0.18);
  --border-glow:rgba(0,210,255,0.6);
}
*{box-sizing:border-box; margin:0; padding:0; scrollbar-width:thin; scrollbar-color:var(--cian) var(--bg-deep);}
:root{ color-scheme: dark; }
input, select, textarea{ accent-color: var(--cian); color-scheme: dark; }
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2300d2ff' d='M1 1l5 5 5-5' stroke='%2300d2ff' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:11px;
  padding-right:34px !important;
  cursor:pointer;
}
body{
  font-family:'Montserrat',sans-serif;
  background-color:var(--bg-deep);
  background-image:
    radial-gradient(circle at 8% 8%, rgba(0,210,255,0.07) 0%, transparent 45%),
    radial-gradient(circle at 92% 92%, rgba(255,122,26,0.05) 0%, transparent 45%),
    radial-gradient(circle at 50% 0%, #142449 0%, var(--bg-deep) 75%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
  color:var(--text);
  min-height:100vh;
}
::-webkit-scrollbar{width:7px; height:7px;}
::-webkit-scrollbar-track{background:var(--bg-deep);}
::-webkit-scrollbar-thumb{background:rgba(0,210,255,.4); border-radius:4px;}
select option{background:#0b1330; color:#fff; padding:8px;}
a{color:inherit;}

@keyframes pulseElite{
  0%{transform:scale(.98); box-shadow:0 0 0 0 rgba(37,211,102,.6);}
  70%{transform:scale(1); box-shadow:0 0 0 9px rgba(37,211,102,0);}
  100%{transform:scale(.98); box-shadow:0 0 0 0 rgba(37,211,102,0);}
}
@keyframes pulseRoja{
  0%{transform:scale(.98); box-shadow:0 0 0 0 rgba(255,77,77,.6);}
  70%{transform:scale(1); box-shadow:0 0 0 9px rgba(255,77,77,0);}
  100%{transform:scale(.98); box-shadow:0 0 0 0 rgba(255,77,77,0);}
}

/* ---- topbar ---- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  background:rgba(5,10,31,0.75);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(18px);
  position:sticky; top:0; z-index:60;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{
  width:34px; height:34px; border-radius:10px;
  background:linear-gradient(135deg, var(--cian), #00d2ff);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:15px; color:#050a1f;
  box-shadow:0 0 15px rgba(0,210,255,.45);
}
.brand-name{font-weight:800; font-size:15px; letter-spacing:.3px;}
.brand-sub{font-size:11px; color:var(--text-dim); letter-spacing:1px;}
.user-chip{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-dim);}
.logout-btn{
  background:var(--bg-card); border:1px solid var(--border); color:var(--text-dim);
  padding:7px 14px; border-radius:8px; font-family:inherit; font-size:12px;
  cursor:pointer; transition:.2s; text-decoration:none; display:inline-block;
}
.logout-btn:hover{border-color:var(--naranja); color:var(--naranja); box-shadow:0 0 12px rgba(255,122,26,.25);}

.wrap{max-width:920px; margin:0 auto; padding:28px 20px 0;}

/* ---- estado hero ---- */
.estado-hero{
  background:var(--bg-panel); backdrop-filter:blur(18px); border:1px solid var(--border); border-radius:18px;
  padding:26px 28px; display:flex; justify-content:space-between; align-items:center;
  gap:20px; margin-bottom:20px; position:relative; overflow:hidden; flex-wrap:wrap;
  box-shadow:0 15px 35px rgba(0,0,0,.35);
}
.estado-hero::before{
  content:""; position:absolute; top:-40%; right:-10%;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,210,255,.15), transparent 70%);
}
.estado-left{position:relative; z-index:1;}
.estado-label{font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); margin-bottom:6px; font-weight:700;}
.estado-valor{font-size:26px; font-weight:900; display:flex; align-items:center; gap:10px;}
.dot{width:10px; height:10px; border-radius:50%; background:var(--verde); box-shadow:0 0 10px var(--verde); animation:pulseElite 2s infinite;}
.dot.suspendido{background:var(--rojo); box-shadow:0 0 10px var(--rojo); animation:pulseRoja 2s infinite;}
.estado-plan{font-size:13px; color:var(--text-dim); margin-top:6px;}
.estado-plan b{color:var(--cian); font-weight:700;}
.btn-primary{
  background:linear-gradient(135deg, var(--cian), #00d2ff);
  color:#052229; border:none; font-weight:800; font-size:13px;
  padding:12px 20px; border-radius:11px; cursor:pointer; font-family:inherit;
  position:relative; z-index:1; white-space:nowrap; text-decoration:none; display:inline-block;
  box-shadow:0 0 18px rgba(0,210,255,.3); transition:all .25s;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 0 28px rgba(0,210,255,.5);}

/* ---- grid cards ---- */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px;}
.card{background:var(--bg-panel); backdrop-filter:blur(15px); border:1px solid var(--border); border-radius:16px; padding:20px 22px; transition:all .3s;}
.card:hover{border-color:var(--border-glow); transform:translateY(-3px);}
.card-label{font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); margin-bottom:10px; font-weight:700;}
.card-main{font-size:22px; font-weight:900; font-family:'JetBrains Mono',monospace;}
.card-main-grande{font-size:32px; font-weight:900; font-family:'JetBrains Mono',monospace;}
.card-main.naranja{color:var(--naranja);}
.card-sub{font-size:12px; color:var(--text-dim); margin-top:4px;}

/* ---- facturas ---- */
.section-title{font-size:14px; font-weight:800; margin:26px 0 12px; color:var(--text);}
.table{background:var(--bg-panel); backdrop-filter:blur(15px); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:0 15px 35px rgba(0,0,0,.3);}
.row{
  display:grid; grid-template-columns:1fr 1fr 1fr 100px;
  padding:14px 20px; font-size:13px; align-items:center;
  border-bottom:1px solid var(--border);
}
.row.row-factura{ grid-template-columns:0.9fr 0.9fr 1.1fr 0.9fr 0.9fr 280px; }
.row:last-child{border-bottom:none;}
.row:hover{background:rgba(0,210,255,0.03);}
.row.head{color:var(--cian); font-size:10.5px; text-transform:uppercase; letter-spacing:1px; background:rgba(255,255,255,0.02); font-family:'JetBrains Mono',monospace; font-weight:700;}
.row.head:hover{background:rgba(255,255,255,0.02);}
.badge{display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:20px; font-size:10.5px; font-weight:800; font-family:'JetBrains Mono',monospace; letter-spacing:.3px; text-transform:uppercase; border:1px solid transparent;}
.badge.pagado{background:rgba(37,211,102,.13); color:var(--verde); border-color:rgba(37,211,102,.35);}
.badge.pendiente{background:rgba(255,122,26,.13); color:var(--naranja); border-color:rgba(255,122,26,.35);}
.badge.vencido{background:rgba(255,77,77,.13); color:var(--rojo); border-color:rgba(255,77,77,.35);}

.footnote{text-align:center; color:var(--text-dim); font-size:11px; margin:28px 0 40px;}

/* ---- login ---- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-card{
  background:var(--bg-panel); backdrop-filter:blur(24px); border:1px solid var(--border-glow); border-radius:18px;
  padding:36px 32px; width:100%; max-width:360px;
  box-shadow:0 25px 60px rgba(0,0,0,.6), 0 0 40px rgba(0,210,255,.1);
}
.login-brand{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:28px;}
.login-brand .brand-mark{width:48px; height:48px; font-size:20px; box-shadow:0 0 25px rgba(0,210,255,.5);}
.login-title{font-size:15px; font-weight:800;}
.login-sub{font-size:12px; color:var(--text-dim);}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px; font-weight:600;}
.field input{
  width:100%; padding:11px 14px; border-radius:10px;
  background:var(--bg-card); border:1px solid var(--border); color:var(--text);
  font-family:inherit; font-size:14px; outline:none; transition:border-color .2s, box-shadow .2s;
}
.field input:focus{border-color:var(--cian); box-shadow:0 0 12px rgba(0,210,255,.2);}
.btn-login{
  width:100%; margin-top:6px;
  background:linear-gradient(135deg, var(--cian), #00d2ff);
  color:#052229; border:none; font-weight:800; font-size:14px;
  padding:12px; border-radius:10px; cursor:pointer; font-family:inherit;
  box-shadow:0 0 20px rgba(0,210,255,.35); transition:all .25s;
}
.btn-login:hover{transform:translateY(-2px); box-shadow:0 0 32px rgba(0,210,255,.55);}
.error-msg{
  background:rgba(255,77,77,.12); border:1px solid rgba(255,77,77,.35); color:var(--rojo);
  font-size:12px; padding:10px 14px; border-radius:10px; margin-bottom:16px;
}
.decoy{position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; width:0;}

@media (max-width:640px){
  .grid{grid-template-columns:1fr;}
  .row{grid-template-columns:1fr 1fr; row-gap:4px;}
  .row.row-factura{grid-template-columns:1fr 1fr;}
  .wrap{padding:20px 14px 0;}
}

/* Botones chicos dentro de filas de tabla (historial de facturas) */
.btn-mini{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:8px; font-size:11px; font-weight:700;
  text-decoration:none; white-space:nowrap; transition:all .2s;
}
.btn-mini-outline{
  background:rgba(0,210,255,.08); border:1px solid rgba(0,210,255,.3); color:var(--cian);
}
.btn-mini-outline:hover{ background:rgba(0,210,255,.16); box-shadow:0 0 12px rgba(0,210,255,.25); }
.btn-mini-fill{
  background:linear-gradient(135deg, var(--verde), #17a34a); color:#052212;
  box-shadow:0 0 14px rgba(37,211,102,.3);
}
.btn-mini-fill:hover{ transform:translateY(-1px); box-shadow:0 0 20px rgba(37,211,102,.5); }

.btn-secundario{
  background:var(--bg-card); border:1px solid var(--border); color:var(--text);
  padding:12px 20px; border-radius:11px; font-weight:800; font-size:13px;
  cursor:pointer; font-family:inherit; text-decoration:none; display:inline-block;
  transition:all .25s;
}
.btn-secundario:hover{ border-color:var(--naranja); color:var(--naranja); box-shadow:0 0 14px rgba(255,122,26,.3); transform:translateY(-2px); }