:root{
  --bg:#0b0b0c; --bg-elev:#17171a; --bg-card:#1e1e22; --border:#2c2c31;
  --text:#f2f2f4; --text-dim:#9a9aa2; --accent:#e8b4d0; --accent-2:#8fb8e0;
  --swatch-border:rgba(255,255,255,.35);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f5f4f2; --bg-elev:#ffffff; --bg-card:#ffffff; --border:#e2e0dc;
    --text:#1c1c1e; --text-dim:#6b6b70; --accent:#b8447a; --accent-2:#3f6f9e;
    --swatch-border:rgba(0,0,0,.15);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
  min-height:100dvh;
}
.topbar{
  position:sticky; top:0; z-index:10;
  background:var(--bg); padding:calc(env(safe-area-inset-top) + 14px) 16px 4px;
  border-bottom:1px solid var(--border);
}
.topbar h1{margin:0; font-size:22px; font-weight:700}
.subtitulo{margin:2px 0 12px; font-size:13px; color:var(--text-dim)}

.tabs{display:flex; gap:6px; padding-bottom:10px}
.tab{
  flex:1; padding:8px 10px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg-elev); color:var(--text-dim); font-size:13.5px; font-weight:600; cursor:pointer;
}
.tab[aria-selected="true"]{background:var(--accent-2); border-color:var(--accent-2); color:#0b0b0c}

.buscador{padding:10px 16px; background:var(--bg); position:sticky; top:56px; z-index:9}
.buscador input{
  width:100%; padding:10px 14px; border-radius:12px; border:1px solid var(--border);
  background:var(--bg-elev); color:var(--text); font-size:16px;
}
.buscador input:focus{outline:2px solid var(--accent-2)}

.filtros{padding:0 16px 8px; position:sticky; top:112px; z-index:8; background:var(--bg)}
.filtro-grupo{display:flex; gap:8px; padding-bottom:8px; overflow-x:auto}
.chip{
  border:1px solid var(--border); background:var(--bg-elev); color:var(--text);
  padding:6px 14px; border-radius:999px; font-size:13px; white-space:nowrap; cursor:pointer;
}
.chip[aria-pressed="true"]{background:var(--accent-2); border-color:var(--accent-2); color:#0b0b0c}

.filtro-avanzado{font-size:13px; color:var(--text-dim)}
.filtro-avanzado summary{cursor:pointer; padding:4px 0; list-style:none}
.filtro-avanzado summary::-webkit-details-marker{display:none}
.filtro-avanzado summary::before{content:"▸ "}
.filtro-avanzado[open] summary::before{content:"▾ "}
.filtro-fila{display:flex; gap:10px; flex-wrap:wrap; padding:8px 0}
.filtro-fila label{display:flex; flex-direction:column; gap:4px; font-size:12px; flex:1; min-width:100px}
.filtro-fila select{
  padding:8px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg-elev); color:var(--text); font-size:14px;
}
#limpiar{
  border:none; background:transparent; color:var(--accent-2); font-size:13px;
  padding:4px 0; cursor:pointer;
}

.lista{padding:6px 16px calc(env(safe-area-inset-bottom) + 92px); display:flex; flex-direction:column; gap:8px}

.item{background:var(--bg-card); border:1px solid var(--border); border-radius:14px; overflow:hidden}
.item-cabecera{
  width:100%; display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:none; border:none; color:inherit; text-align:left; cursor:pointer;
}
.swatch{width:26px; height:26px; border-radius:50%; flex:none; border:1px solid var(--swatch-border)}
.item-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.codigo{font-weight:700; font-size:15px}
.descripcion{font-size:12.5px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cantidad{font-size:14px; font-weight:600; color:var(--accent-2); flex:none}
.cantidad.con-compras::after{content:" 🛒"; font-size:11px}
.badge-local{
  font-size:10.5px; font-weight:600; color:var(--accent); border:1px solid var(--accent);
  border-radius:999px; padding:2px 8px; flex:none;
}

.item-detalle{display:none; padding:0 14px 14px; border-top:1px solid var(--border)}
.item.abierto .item-detalle{display:block}
.item.abierto .item-cabecera{border-bottom:1px solid var(--border)}
.sin-compras{font-size:12.5px; color:var(--text-dim); margin:10px 0 2px}
.compras{width:100%; border-collapse:collapse; font-size:12.5px; margin-top:8px}
.compras th{text-align:left; color:var(--text-dim); font-weight:500; padding:4px 6px; border-bottom:1px solid var(--border)}
.compras td{padding:6px 6px; border-bottom:1px solid var(--border)}
.compras tr:last-child td{border-bottom:none}
.aprox{color:var(--text-dim); font-size:11px}
.borrar-local{
  margin-top:10px; border:1px solid #c23b3b; color:#c23b3b; background:none;
  border-radius:8px; padding:8px 10px; font-size:12.5px; width:100%; cursor:pointer;
}

.vacio{padding:40px 20px; text-align:center; color:var(--text-dim); font-size:14px}

.fab{
  position:fixed; right:20px; bottom:calc(env(safe-area-inset-bottom) + 20px);
  width:52px; height:52px; border-radius:50%; border:none; background:var(--accent-2);
  color:#0b0b0c; font-size:28px; line-height:1; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.3);
}

#panel-combinar{padding:0 16px 40px}
.combinar-intro{padding:10px 0; font-size:13px; color:var(--text-dim)}
.subtitulo-seccion{font-size:14px; margin:18px 0 8px}

.paleta{
  min-height:44px; display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:8px 0;
}
.paleta-vacia{font-size:12.5px; color:var(--text-dim)}
.paleta-chip{
  display:flex; align-items:center; gap:6px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:999px; padding:5px 10px 5px 6px; font-size:13px;
}
.paleta-chip .swatch{width:16px; height:16px}
.paleta-chip button{border:none; background:none; color:var(--text-dim); font-size:14px; cursor:pointer; padding:0}

.grid-colores{display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:10px}
.swatch-btn{
  display:flex; flex-direction:column; align-items:center; gap:5px; background:none; border:none;
  cursor:pointer; padding:6px; border-radius:10px; color:var(--text);
}
.swatch-btn[aria-pressed="true"]{background:var(--bg-card); outline:2px solid var(--accent-2)}
.swatch-btn .swatch{width:34px; height:34px}
.swatch-nombre{font-size:11px; text-align:center; line-height:1.2}

.sugerencias{display:flex; flex-direction:column; gap:14px; margin-top:6px}
.sugerencia-grupo h3{font-size:13px; margin:0 0 6px; color:var(--text-dim); font-weight:600}
.sugerencia-lista{display:flex; flex-wrap:wrap; gap:8px}
.sugerencia-card{
  display:flex; align-items:center; gap:8px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:12px; padding:8px 10px; font-size:12.5px; cursor:pointer;
}
.sugerencia-card .swatch{width:20px; height:20px}
.sugerencia-card .info{display:flex; flex-direction:column; line-height:1.3}
.sugerencia-card .cant{color:var(--text-dim); font-size:11px}

.patrones{display:flex; flex-direction:column; gap:8px}
.patron-card{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--bg-card); border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; cursor:pointer; color:inherit;
}
.patron-swatches{display:flex; flex:none}
.patron-swatches .swatch{width:22px; height:22px; margin-left:-8px; border:2px solid var(--bg-card)}
.patron-swatches .swatch:first-child{margin-left:0}
.patron-info{display:flex; flex-direction:column; gap:2px; min-width:0}
.patron-tipo{font-size:12.5px; font-weight:600}
.patron-colores{font-size:11.5px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

dialog#dialogo-agregar, dialog#dialogo-exportar{
  border:none; border-radius:16px 16px 0 0; padding:0; width:100%; max-width:480px;
  margin:auto auto 0; background:var(--bg-elev); color:var(--text);
}
dialog#dialogo-agregar::backdrop, dialog#dialogo-exportar::backdrop{background:rgba(0,0,0,.5)}
#form-agregar, #form-exportar{display:flex; flex-direction:column; gap:10px; padding:20px; padding-bottom:calc(env(safe-area-inset-bottom) + 20px)}
#form-agregar h2, #form-exportar h2{margin:0; font-size:17px}
.dialogo-nota{font-size:12px; color:var(--text-dim); margin:0}
#form-agregar label{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--text-dim)}
#form-agregar input, #form-agregar select{
  padding:9px 10px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg-card); color:var(--text); font-size:15px;
}
#texto-exportar{
  padding:10px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg-card); color:var(--text); font-size:12.5px;
  font-family:ui-monospace, "SF Mono", Menlo, monospace; resize:vertical;
}
.dialogo-botones{display:flex; gap:10px; margin-top:6px}
.dialogo-botones button{flex:1; padding:11px; border-radius:10px; font-size:14.5px; border:1px solid var(--border)}
#cancelar-agregar, #cerrar-exportar{background:none; color:var(--text)}
#guardar-agregar, #compartir-exportar, #copiar-exportar{background:var(--accent-2); color:#0b0b0c; border-color:var(--accent-2); font-weight:600}

.link-exportar{
  display:inline-block; margin:0 0 10px; padding:0; border:none; background:none;
  color:var(--accent-2); font-size:12.5px; font-weight:600; cursor:pointer;
}
.link-exportar[hidden]{display:none} /* un display propio le gana a [hidden] del UA si no se repite aquí */