:root{
  --bg:#0b0f17; --panel:#101725; --panel2:#0e1420; --border:#1e293b;
  --text:#e5e7eb; --muted:#94a3b8; --accent:#3b82f6; --accent2:#22c55e;
  --green:#22c55e; --red:#ef4444; --amber:#f59e0b; --radius:14px;
}
[data-theme="light"]{
  --bg:#f4f6fb; --panel:#ffffff; --panel2:#f1f5f9; --border:#e2e8f0;
  --text:#0f172a; --muted:#64748b;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:72px;
}
a{color:var(--accent)}
button{font-family:inherit}
.hidden{display:none !important}

/* Header */
header.app{
  position:sticky; top:0; z-index:20; background:var(--bg);
  border-bottom:1px solid var(--border); padding:12px 16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
header.app .brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px}
header.app .brand img{width:28px;height:28px}
header.app .spacer{flex:1}
.pill{
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  border-radius:999px; padding:6px 12px; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.pill:hover{border-color:var(--accent)}
.select, input, select, textarea{
  background:var(--panel2); border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:9px 11px; font-size:14px; width:100%;
}
.select{width:auto}
.muted{color:var(--muted)}
.last-update{font-size:12px;color:var(--muted)}

/* Layout */
main{max-width:1100px; margin:0 auto; padding:16px}
.view{animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.grid{display:grid; gap:14px}
.cards{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.two{grid-template-columns:1fr 1fr}
@media(max-width:760px){.two{grid-template-columns:1fr}}

.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px;
}
.card h3{margin:0 0 4px; font-size:13px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px}
.card .big{font-size:26px; font-weight:700}
.section-head{display:flex; align-items:center; gap:10px; margin:18px 0 10px}
.section-head h2{margin:0; font-size:20px}
.section-head .spacer{flex:1}

/* Buttons */
.btn{
  background:var(--accent); color:#fff; border:none; border-radius:10px;
  padding:9px 14px; font-size:14px; cursor:pointer; font-weight:600;
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; border:1px solid var(--border); color:var(--text)}
.btn.green{background:var(--green)}
.btn.red{background:var(--red)}
.btn.sm{padding:6px 10px; font-size:13px}
.row-actions{display:flex; gap:6px; flex-wrap:wrap}

/* Table */
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:10px 8px; border-bottom:1px solid var(--border); white-space:nowrap}
th{color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.3px}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
.table-wrap{overflow:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel)}
.pos{color:var(--green)} .neg{color:var(--red)}
.tag{font-size:11px; padding:2px 8px; border-radius:999px; border:1px solid var(--border); color:var(--muted)}
.tag.cripto{color:#f59e0b;border-color:#7c5b13}
.tag.accion{color:#3b82f6;border-color:#1e3a8a}
.tag.etf{color:#a78bfa;border-color:#4c1d95}
.tag.fondo{color:#22c55e;border-color:#14532d}
.tag.indice{color:#94a3b8}

/* Bottom nav */
nav.tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  background:var(--panel); border-top:1px solid var(--border);
  display:flex; justify-content:space-around; padding:6px 4px;
}
nav.tabbar button{
  background:none; border:none; color:var(--muted); font-size:11px;
  display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; padding:4px 6px; flex:1;
}
nav.tabbar button .ico{font-size:18px}
nav.tabbar button.active{color:var(--accent)}
@media(min-width:900px){
  body{padding-bottom:0}
  nav.tabbar{position:sticky; top:57px; bottom:auto; border-top:none; border-bottom:1px solid var(--border); justify-content:flex-start; gap:4px; padding:8px}
  nav.tabbar button{flex:none; flex-direction:row; font-size:13px; padding:8px 12px; border-radius:10px}
  nav.tabbar button.active{background:var(--panel2)}
}

/* Modal */
.modal-bg{position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; justify-content:center; z-index:50}
@media(min-width:700px){.modal-bg{align-items:center}}
.modal{
  background:var(--panel); border:1px solid var(--border); border-radius:18px 18px 0 0;
  width:100%; max-width:520px; max-height:92vh; overflow:auto; padding:20px;
}
@media(min-width:700px){.modal{border-radius:18px}}
.modal h3{margin:0 0 14px}
.field{margin-bottom:12px}
.field label{display:block; font-size:13px; color:var(--muted); margin-bottom:5px}
.field.inline{display:flex; gap:10px}
.field.inline > div{flex:1}
.modal-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:16px}

/* Donut + spark */
.allocation{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.legend{display:flex; flex-direction:column; gap:6px; font-size:13px}
.legend .it{display:flex; align-items:center; gap:8px}
.legend .dot{width:10px;height:10px;border-radius:3px}
canvas{max-width:100%}
.spark{height:34px;width:90px}
.disclaimer{font-size:12px; color:var(--muted); background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin:10px 0}
.empty{color:var(--muted); text-align:center; padding:30px}
.badge-live{font-size:11px;color:var(--green)}
.rec-action{font-weight:700}
.rec-action.compra{color:var(--green)} .rec-action.venta{color:var(--red)} .rec-action.mantener{color:var(--amber)}
.toast{position:fixed; bottom:84px; left:50%; transform:translateX(-50%); background:var(--panel); border:1px solid var(--border); padding:10px 16px; border-radius:10px; z-index:80; font-size:14px; box-shadow:0 8px 30px rgba(0,0,0,.4); max-width:90vw; text-align:center}
@media(min-width:900px){.toast{bottom:24px}}

/* ===== Adaptación a móvil ===== */
@media (max-width:600px){
  header.app{padding:8px 10px; gap:6px}
  header.app .brand{font-size:16px}
  header.app .brand img{width:24px; height:24px}
  .pill{padding:6px 9px; font-size:12px}
  /* La cartera ocupa su propia fila completa para que quepa todo */
  #portfolioSelect{order:10; flex-basis:100%; width:100%}
  #lastUpdate, #syncStatus{order:11; flex-basis:100%; font-size:11px}

  main{padding:12px 10px}
  .grid{gap:10px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .card{padding:13px}
  .card .big{font-size:22px}

  /* Cabeceras de sección: el título en su línea y los botones repartidos debajo */
  .section-head{flex-wrap:wrap; gap:8px; margin:16px 0 8px}
  .section-head h2{font-size:18px; flex-basis:100%}
  .section-head .spacer{display:none}
  .section-head .btn{flex:1 1 auto}

  .btn{padding:9px 11px; font-size:13px}
  .btn.sm{padding:7px 9px; font-size:12px}

  /* Tablas más compactas para que quepan más columnas */
  th, td{padding:8px 6px; font-size:13px}
  th{font-size:11px}
  .modal{padding:16px}
  .allocation{justify-content:center}
}
@media (max-width:380px){
  nav.tabbar button{font-size:10px; padding:4px 3px}
  nav.tabbar button .ico{font-size:16px}
  .card .big{font-size:20px}
}