:root{
  --bg:#0b0d12;
  --panel:#121622;
  --panel2:#0f1320;
  --line:#233049;
  --line2:#1b253a;
  --text:#e9ecf1;
  --muted:#93a1b6;
  --primary:#2563eb;
  --primary2:#1d4ed8;
  --danger:#7f1d1d;
  --chip:#0e1426;
  --ok:#16a34a;
  --warn:#f59e0b;

  
  --modalBackdrop: rgba(0,0,0,.72);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background: radial-gradient(1200px 600px at 20% -10%, #1a2440 0%, rgba(26,36,64,0) 55%),
              radial-gradient(1000px 600px at 80% 0%, #132457 0%, rgba(19,36,87,0) 60%),
              var(--bg);
  color:var(--text);
}
.wrap{max-width:1200px;margin:auto;padding:18px}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line2);
  border-radius:18px;
  padding:14px;
  margin:14px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* ===== TOP LAYOUT ===== */
.top{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  align-items:start;
}
@media (max-width: 980px){
  .top{grid-template-columns:1fr}
}

h1{
  margin:0;
  font-size:22px;
  letter-spacing:.2px;
}
.subhead{color:var(--muted);font-size:12.5px;margin-top:6px}

/* ===== LOGIN COLLAPSIBLE ===== */
details.authDetails{
  border:1px solid var(--line2);
  border-radius:16px;
  background: rgba(0,0,0,.16);
  overflow:hidden;
}
details.authDetails > summary{
  list-style:none;
  cursor:pointer;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  user-select:none;
  min-height: 44px;
}
details.authDetails > summary::-webkit-details-marker{display:none}

.authSummary{
  display:flex;align-items:center;gap:10px;
  font-weight:850;
  color: rgba(233,236,241,.92);
}
.authSummary .dot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(147,161,182,.35);
  border:1px solid rgba(147,161,182,.35);
}
.authSummary .txt{font-size:12.5px}

/* flecha chica SIEMPRE */
.authChevron{
  width:16px;height:16px;opacity:.9;flex:0 0 auto;
  transform-origin:center;
}
details.authDetails[open] .authChevron{ transform: rotate(180deg); }

.auth{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  padding:10px 12px 12px 12px;
  background: rgba(0,0,0,.10);
  border-top:1px solid var(--line2);
}
@media (max-width: 980px){
  .auth{justify-content:flex-start}
}

.auth .status{color:var(--muted);font-size:12px}
.auth input{
  background: rgba(0,0,0,.22);
  color: var(--text);
  border:1px solid var(--line2);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  width: min(240px, 100%);
}
.auth input::placeholder{color: rgba(233,236,241,.55)}
.auth .btn{
  border:1px solid var(--line2);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding:10px 12px;
  border-radius:12px;
  font-weight:750;
  cursor:pointer;
}
/* Entrar SIN color */
.auth .btn.primary{
  background: rgba(255,255,255,.06);
  border-color: var(--line2);
}
.auth .btn:disabled{opacity:.55;cursor:not-allowed}

/* ===== CTA + SALDO ===== */
.heroRow{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:14px;
  align-items:stretch;
  margin-top:14px;
  margin-bottom: 14px;
}
@media (max-width: 980px){
  .heroRow{grid-template-columns:1fr}
}

.saldoPill{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(37,99,235,.18), rgba(37,99,235,.06));
  border-radius:18px;
  padding:14px 16px;
  min-height:92px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.saldoPill .ttl{font-size:12px;color:#cfe0ff;letter-spacing:.2px}
.saldoPill .amt{
  font-size:34px;
  font-weight:900;
  margin:4px 0 2px 0;
  line-height:1.05;
}
.saldoPill .extra{
  color: rgba(233,236,241,.82);
  font-size:12.5px;
}

.ctaCol{
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:stretch;
  min-width: 340px;
}
@media (max-width: 980px){
  .ctaCol{min-width:unset}
}

.btnRow{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width: 980px){
  .btnRow{justify-content:flex-start}
}

.btn{
  border:1px solid var(--line2);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  gap:10px;
  align-items:center;
  line-height:1;
}
.btn.primary{
  background: linear-gradient(180deg, rgba(37,99,235,.95), rgba(29,78,216,.95));
  border-color: rgba(29,78,216,.9);
}
.btn.danger{
  background: linear-gradient(180deg, rgba(127,29,29,.92), rgba(153,27,27,.92));
  border-color: rgba(153,27,27,.9);
}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* CTA “Ver acuerdo + plan” */
.btn.agreement{
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.06));
  border-color: rgba(147,197,253,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.btn.agreement:hover{border-color: rgba(147,197,253,.6)}
.btn svg{width:18px;height:18px;opacity:.95}

/* ===== SECCIONES DESPLEGABLES ===== */
details.section{
  border:1px solid var(--line2);
  border-radius:16px;
  background: rgba(0,0,0,.16);
  overflow:hidden;
}
details.section > summary{
  list-style:none;
  cursor:pointer;
  padding:12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
details.section > summary::-webkit-details-marker{display:none}
.sumLeft{display:flex;gap:10px;align-items:center}
.ico{
  width:28px;height:28px;border-radius:10px;
  display:grid;place-items:center;
  background: rgba(37,99,235,.18);
  border:1px solid rgba(37,99,235,.25);
}
.sumTitle{font-weight:850}
.sumDesc{font-size:12px;color:var(--muted);margin-top:2px}
.sumText{display:flex;flex-direction:column}
.sumRight{
  display:inline-flex;align-items:center;gap:10px;
  color: rgba(233,236,241,.9);
  font-weight:850;
  font-size:12.5px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.05);
}
.sumRight svg{width:16px;height:16px}
details.section[open] .sumRight svg{transform: rotate(180deg)}
.sectionBody{padding:0 12px 12px 12px}

/* ===== TABLAS RESPONSIVE SIN SCROLL HORIZONTAL ===== */
table{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
th,td{border-bottom:1px solid var(--line2);padding:10px 8px;vertical-align:top}
th{color:var(--muted);text-align:left;font-weight:800}
td.num{text-align:right;white-space:nowrap}
a{color:#93c5fd;text-decoration:none}
a:hover{text-decoration:underline}

/* concepto SIEMPRE horizontal */
td.conceptCell{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap:anywhere;
  hyphens:auto;
  line-height:1.25;
}

/* “lista” mobile */
@media (max-width: 900px){
  table, thead, tbody, th, tr{display:block}
  thead{display:none}
  tbody{display:block}
  tr{
    border:1px solid var(--line2);
    border-radius:14px;
    margin:10px 0;
    background: rgba(255,255,255,.03);
    overflow:hidden;
  }
  td{
    display:flex;
    gap:12px;
    justify-content:space-between;
    align-items:flex-start;
    border-bottom:1px solid rgba(35,48,73,.55);
    padding:10px 12px;
  }
  td::before{
    content: attr(data-label);
    color: var(--muted);
    font-weight:800;
    min-width: 120px;
    max-width: 45%;
  }
  td.num{justify-content:space-between}
  td.num::before{white-space:nowrap}
}

.muted{color:var(--muted);font-size:12px}
.small{font-size:12px;color:var(--muted)}
.err{font-size:12px;color:#fca5a5}

/* ===== MODAL ===== */
.modal{
  position:fixed; inset:0;
  display:none;
  background: var(--modalBackdrop);
  padding:14px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  align-items:stretch;
  justify-content:center;
  backdrop-filter: blur(6px);
}
.modal.show{display:flex}
.modal .card{
  max-width:920px;width:100%;margin:auto;
  background: linear-gradient(180deg, rgba(18,22,34,.98), rgba(15,19,32,.96));
  border-color: rgba(147,197,253,.18);
}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:900px){ .grid{grid-template-columns:1fr} }

select, textarea, input[type="text"], input[type="number"], input[type="password"], input[type="email"]{
  background: rgba(0,0,0,.22);
  color: var(--text);
  border:1px solid var(--line2);
  border-radius:12px;
  padding:10px 12px;
  width:100%;
  outline:none;
}
textarea{min-height:80px;resize:vertical}

#i_preview img{max-height:40vh;width:auto;display:block;border-radius:12px;border:1px solid var(--line2)}
.ck{display:flex;gap:10px;align-items:flex-start}
.ck input{width:auto;margin-top:3px}

/* util */
.hide{display:none !important}