:root { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
body { margin:0; background:#f6f7fb; color:#111827; -webkit-font-smoothing:antialiased; }
.screen { max-width:860px; margin:0 auto; padding:12px 12px 80px; }

.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 4px; }
.topbar h1 { margin:0; font-size:22px; }
.hint { color:#6b7280; font-size:12px; margin-top:2px; }
.controls { display:flex; gap:8px; align-items:center; }

.btn { border:0; background:#111827; color:white; padding:8px 12px; border-radius:10px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.btn.small { background:white; color:#111827; border:1px solid #e5e7eb; padding:8px; }

.empty { color:#6b7280; padding:14px 6px; }
.list { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:10px; }

.rowItem { display:flex; align-items:stretch; justify-content:space-between; gap:10px; background:white; border-radius:14px; padding:12px; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.rowMain { min-width:0; }
.rowTop { display:flex; align-items:center; gap:10px; }
.ticker { font-weight:800; font-size:18px; display:flex; align-items:center; gap:8px; }

.chip { font-size:12px; color:#6b7280; border:1px solid #e5e7eb; padding:3px 8px; border-radius:999px; }
.desc { margin-top:6px; color:#374151; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:520px; }

.quoteLine { margin-top:10px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.price { font-weight:800; font-size:18px; }
.pct { font-size:13px; color:#374151; }
.asof { font-size:12px; color:#6b7280; }

.rowActions { display:grid; gap:8px; align-content:start; }
.btn.mini { padding:6px 8px; font-size:13px; }
.btn.danger { background:#ef4444; color:white; }

.fab { position:fixed; right:16px; bottom:18px; width:54px; height:54px; border-radius:999px; border:0; background:#111827; color:white; font-size:28px; cursor:pointer; }

.modal { position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.28); }
.modal.hidden { display:none; }
.modalCard { width:min(560px,96%); background:white; border-radius:12px; padding:12px; box-shadow:0 20px 40px rgba(0,0,0,.25); }
.modalHead { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.form { display:grid; gap:8px; margin-top:8px; }
label { display:block; font-size:13px; }
input { width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px; font-size:15px; }

.error { position:fixed; left:12px; right:12px; bottom:12px; background:#fee2e2; color:#991b1b; padding:10px 12px; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.06); }

/* Cards for metodologia */
.card { background:white; border-radius:14px; padding:14px; margin-top:12px; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.card h2 { margin:0 0 10px; font-size:16px; }
.card h3 { margin:14px 0 6px; font-size:14px; }
code { background:#f1f5f9; padding:2px 6px; border-radius:8px; }

/* Trend dots */
.trendDot { width:10px; height:10px; border-radius:999px; display:inline-block; }
.trendDot.up { background:#22c55e; }    /* verde */
.trendDot.down { background:#ef4444; }  /* rojo */
.trendDot.side { background:#f59e0b; }  /* naranja */

.tickerLink { font-weight:800; font-size:18px; display:flex; align-items:center; gap:8px; color:#111827; text-decoration:underline; }
.bigScore { font-size:28px; font-weight:900; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }

.tickerLink { font-weight:800; font-size:18px; display:flex; align-items:center; gap:8px; color:#111827; text-decoration:underline; }
.bigScore { font-size:28px; font-weight:900; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.prebox { background:#0b1020; color:#e5e7eb; padding:10px; border-radius:12px; overflow:auto; font-size:12px; }