:root{
  --bg:#f4f6fb; --card:#fff; --ink:#1c2433; --muted:#6b7689; --line:#e3e8f0;
  --accent:#2d6cdf; --accent-d:#1f54b8; --hot:#e8f7ee; --warm:#fbfbe9;
  --fire:#ff5c3a; --topebg:#fff3cd; --topeink:#8a6d00;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px;
  -webkit-user-select:none; user-select:none;
}
input,textarea{-webkit-user-select:text; user-select:text}
.hidden{display:none !important}
.muted{color:var(--muted); font-weight:400; font-size:.85em}
.err{color:#c0392b; min-height:18px; margin-top:6px; font-size:.9em}
button{font-family:inherit; cursor:pointer; border-radius:8px; border:1px solid var(--line); background:#fff; padding:8px 12px; font-size:14px}
button:hover{background:#f0f3fa}
button.primary{background:var(--accent); color:#fff; border-color:var(--accent)}
button.primary:hover{background:var(--accent-d)}
button.ghost{background:transparent}
input,select{font-family:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink)}
input:focus,select:focus{outline:2px solid #bcd0f7; border-color:var(--accent)}

/* Login */
.login-screen{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#2d6cdf,#1f54b8)}
.login-card{background:#fff; padding:34px 30px; border-radius:16px; width:340px; display:flex; flex-direction:column; gap:12px; box-shadow:0 20px 50px rgba(0,0,0,.25); text-align:center}
.login-logo{font-size:40px}
.login-card h1{font-size:20px; margin:0}
.login-card input{text-align:left}
.login-card button{margin-top:6px; padding:10px}

/* Topbar */
.topbar{display:flex; align-items:center; gap:18px; background:#16213a; color:#fff; padding:0 18px; height:56px; position:sticky; top:0; z-index:20}
.brand{font-weight:700; font-size:16px}
.brand .muted{color:#9fb0cc}
.tabs{display:flex; gap:6px; margin-left:8px}
.tab{background:transparent; color:#cdd8ee; border:none; padding:8px 14px; border-radius:8px}
.tab:hover{background:#24314f; color:#fff}
.tab.active{background:var(--accent); color:#fff}
#logout{margin-left:auto; color:#cdd8ee; border-color:#2f3e5e}
#logout:hover{background:#24314f}
main{padding:18px; max-width:1300px; margin:0 auto}

/* Dashboard */
.dashboard{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:0 1px 3px rgba(20,30,60,.04)}
.card h3{margin:0 0 12px; font-size:15px}
ol.rank{list-style:none; margin:0; padding:0; counter-reset:r}
ol.rank li{display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:4px 10px; padding:8px 0; border-bottom:1px solid var(--line); counter-increment:r}
ol.rank li:last-child{border-bottom:none}
ol.rank li::before{content:counter(r); color:var(--muted); font-weight:700; margin-right:8px}
.r-cat{font-weight:600}
.r-val{font-weight:700; color:var(--accent); text-align:right}
.r-sub{grid-column:1/-1; color:var(--muted); font-size:.82em; margin-left:22px}
table.mini{width:100%; border-collapse:collapse}
table.mini th,table.mini td{text-align:left; padding:6px 4px; border-bottom:1px solid var(--line)}
table.mini th{color:var(--muted); font-weight:600; font-size:.82em}
table.mini td:nth-child(n+2){text-align:right}

/* Filters */
.filters{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px}
.filters input[type=number]{width:108px}
.filters #q{flex:1; min-width:200px}
.chk{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.9em}
.presets{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px}
.preset{font-size:13px; padding:6px 10px}

/* Grid */
.grid-wrap{overflow:auto; border:1px solid var(--line); border-radius:12px; background:#fff; max-height:calc(100vh - 250px)}
table.grid{width:100%; border-collapse:collapse; font-size:13px}
table.grid thead th{position:sticky; top:0; background:#eef2fa; text-align:left; padding:10px 10px; border-bottom:2px solid var(--line); white-space:nowrap; z-index:1}
table.grid th.sortable{cursor:pointer; user-select:none}
table.grid th.sortable:hover{background:#e2e9f7}
table.grid td{padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top}
table.grid tbody tr:hover{background:#f7f9fe}
td.num{text-align:right; white-space:nowrap}
tr.row-hot{background:var(--hot)}
tr.row-warm{background:var(--warm)}
tr.row-hot:hover,tr.row-warm:hover{filter:brightness(.98)}
.c-prod{min-width:240px; max-width:340px}
.p-cat{font-weight:600}
.p-feat{color:var(--muted); font-size:.85em; margin-top:2px}
.c-mark{text-align:center}
.c-note input.note{width:140px; padding:5px 7px; font-size:12px}
.empty{text-align:center; color:var(--muted); padding:30px}
.badge{display:inline-block; font-size:11px; padding:1px 6px; border-radius:20px; margin-left:4px; font-weight:600}
.badge.fire{background:#ffe7e0; color:var(--fire)}
.badge.tope{background:var(--topebg); color:var(--topeink)}
.chip{display:inline-block; min-width:30px; text-align:center; padding:2px 8px; border-radius:20px; font-weight:700; color:#fff}
.chip.s-hi{background:#1aaf5d}
.chip.s-mid{background:#e0a106}
.chip.s-lo{background:#9aa6ba}

/* Pager */
.pager{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:12px}
.pager span{color:var(--muted)}
button:disabled{opacity:.45; cursor:default}

/* Price bars */
.bar-row{display:grid; grid-template-columns:150px 1fr 160px; align-items:center; gap:10px; padding:5px 0}
.bar-row.sweet{background:#eafbef; border-radius:8px; padding:5px 6px; font-weight:600}
.bar-lbl{font-size:.85em; white-space:nowrap}
.bar-track{background:#eef2fa; border-radius:6px; height:16px; overflow:hidden}
.bar-fill{background:var(--accent); height:100%}
.bar-row.sweet .bar-fill{background:#1aaf5d}
.bar-val{font-size:.82em; color:var(--muted); text-align:right}
#pa-padre{margin-bottom:10px; min-width:240px}
.card + .card{margin-top:16px}

/* Context menu */
.ctxmenu{position:absolute; z-index:50; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.18); padding:4px; display:flex; flex-direction:column; min-width:200px}
.ctxmenu button{border:none; text-align:left; border-radius:6px; padding:9px 12px}
.ctxmenu button:hover{background:#eef2fa}

/* ===== Ajustes v2: tablero mas ancho, foto y boton ML ===== */
main{max-width:1640px}
.dashboard{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}
.card.wide{grid-column:1 / -1}
.c-thumb{width:54px}
img.thumb{width:46px; height:46px; object-fit:cover; border-radius:8px; background:#eef2fa; display:block; border:1px solid var(--line)}
.c-ml{text-align:center; white-space:nowrap}
.ml-btn{display:inline-block; background:#fff159; color:#2d3277; font-weight:700; text-decoration:none; padding:5px 11px; border-radius:7px; font-size:12px; border:1px solid #ecdf3a}
.ml-btn:hover{background:#ffe600}
img.thumb{background:#eef2fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23aab3c5' stroke-width='1.6'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M3 15l5-5 4 4 3-3 6 6'/%3E%3Ccircle cx='9' cy='9' r='1.4'/%3E%3C/svg%3E") center/22px no-repeat}
.c-fecha{white-space:nowrap; font-size:12px}
/* Analizador */
.analizar-bar{display:flex; gap:8px; margin:12px 0}
.analizar-bar #az-input{flex:1; min-width:220px}
.az-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin-top:12px}
.az-item{background:#f7f9fe; border:1px solid var(--line); border-radius:10px; padding:10px 12px}
.az-item.az-wide{grid-column:1 / -1}
.az-item.az-hi{grid-column:1 / -1; background:#eafbef; border-color:#bfe8cd}
.az-lbl{display:block; color:var(--muted); font-size:.78em; margin-bottom:3px}
.az-val{font-weight:700}
.az-help{display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:4px; padding:0; border-radius:50%; border:1px solid var(--muted); background:transparent; color:var(--muted); font-size:11px; font-weight:700; line-height:1; cursor:pointer; vertical-align:middle}
.az-help:hover,.az-open .az-help{background:var(--accent); border-color:var(--accent); color:#fff}
.az-tip{display:none; margin-top:6px; font-size:.8em; color:var(--muted); line-height:1.35}
.az-open .az-tip{display:block}
.az-calc{display:flex; gap:20px; align-items:center; margin-top:14px; flex-wrap:wrap}
.az-calc input{width:150px}
#az-prom{color:var(--accent); font-size:1.15em}
/* Novedades */
.nv-toggle{display:flex; gap:8px; margin:6px 0 14px}
.nv-mode{font-size:13px}
.nv-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px}
.nv-card{display:flex; gap:10px; align-items:flex-start; background:#f7f9fe; border:1px solid var(--line); border-radius:12px; padding:10px}
.nv-thumb{width:62px; height:62px; object-fit:cover; border-radius:8px; flex:none; background:#eef2fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23aab3c5' stroke-width='1.6'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M3 15l5-5 4 4 3-3 6 6'/%3E%3C/svg%3E") center/22px no-repeat}
.nv-body{flex:1; min-width:0}
.nv-name{font-weight:600; font-size:13px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.nv-meta{color:var(--muted); font-size:.8em; margin:2px 0}
.nv-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.nv-tags span{font-size:11px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:1px 7px}
.nv-card .ml-btn{flex:none; align-self:center}