: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:12px;
}
@media (min-width:600px){ .wrap{ 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:1fr;
  gap:12px;
  align-items:start;
}
@media (min-width:980px){
  .top{ grid-template-columns:1.2fr .8fr; gap:14px }
}

h1{
  margin:0;
  font-size:18px;
  letter-spacing:.2px;
}
@media (min-width:600px){ h1{ font-size:22px } }
.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}

.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-start;
  padding:10px 12px 12px 12px;
  background: rgba(0,0,0,.10);
  border-top:1px solid var(--line2);
}
@media (min-width:980px){ .auth{ justify-content:flex-end } }

.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;
}
.auth .btn.primary{
  background: rgba(255,255,255,.06);
  border-color: var(--line2);
}
.auth .btn:disabled{opacity:.55;cursor:not-allowed}

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

.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:80px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
@media (min-width:980px){ .saldoPill{ min-height:92px } }
.saldoPill .ttl{font-size:12px;color:#cfe0ff;letter-spacing:.2px}
.saldoPill .amt{
  font-size:28px;
  font-weight:900;
  margin:4px 0 2px 0;
  line-height:1.05;
}
@media (min-width:600px){ .saldoPill .amt{ font-size:34px } }
.saldoPill .extra{
  color: rgba(233,236,241,.82);
  font-size:11.5px;
  line-height:1.4;
}
@media (min-width:600px){ .saldoPill .extra{ font-size:12.5px } }

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

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

.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:8px;
  align-items:center;
  line-height:1;
  min-height:44px;
  font-size:13px;
}
@media (min-width:600px){ .btn{ gap:10px; font-size:inherit } }
.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}

.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;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:44px;
}
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);
  flex-shrink:0;
}
.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:8px;
  color: rgba(233,236,241,.9);
  font-weight:850;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.05);
  flex-shrink:0;
  white-space:nowrap;
}
.sumRight svg{width:16px;height:16px}
details.section[open] .sumRight svg{transform: rotate(180deg)}
.sectionBody{padding:0 12px 12px 12px;font-size:13.5px;line-height:1.6}

/* ===== TABLAS RESPONSIVE — mobile: card list ===== */
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}

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;
}

/* mobile: tabla como lista de cards */
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:110px;
  max-width:45%;
  flex-shrink:0;
}
td.num{ justify-content:space-between }
td.num::before{ white-space:nowrap }
td.conceptCell{ flex-direction:column; gap:4px }
td.conceptCell::before{ min-width:unset; max-width:unset }

/* desktop: tabla clásica */
@media (min-width:900px){
  table{ display:table }
  thead{ display:table-header-group }
  tbody{ display:table-row-group }
  tr{ display:table-row; border:none; border-radius:0; margin:0; background:transparent; overflow:visible }
  th{ display:table-cell }
  td{ display:table-cell; border-bottom:1px solid var(--line2); padding:10px 8px }
  td::before{ display:none }
  td.num{ text-align:right }
}

.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:10px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  align-items:flex-start;
  justify-content:center;
  backdrop-filter: blur(6px);
}
@media (min-width:600px){
  .modal{ padding:14px; align-items:center }
}
.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);
}
.modalAdjuntoCard{
  max-width:1100px;
}

.grid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:600px){ .grid{ grid-template-columns:1fr 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;
  font-size:16px; /* evita zoom en iOS */
}
@media (min-width:600px){
  select, textarea, input[type="text"], input[type="number"], input[type="password"], input[type="email"]{
    font-size:inherit;
  }
}
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}