:root{
  --bg: #17130f;
  --surface: #211b16;
  --surface-raised: #2b241d;
  --border: #3d3327;
  --ember: #d4652a;
  --ember-dim: #8f4a25;
  --text: #ede4d3;
  --text-muted: #a89a86;
  --success: #6b9b5e;
  --danger: #c1503f;
  --gold: #e8c547;
  --grade-ng: #8a8a8a;
  --grade-d: #e8e4dc;
  --grade-c: #4caf50;
  --grade-b: #4a90d9;
  --grade-a: #b968d9;
  --grade-s: #e8c547;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  padding:32px 20px 80px;
}
.wrap{max-width:980px; margin:0 auto;}
header{margin-bottom:22px;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--ember); margin-bottom:6px;
}
h1{
  font-family:'Cinzel', serif; font-weight:700; font-size:32px; margin:0 0 4px;
  color:var(--text); letter-spacing:0.5px;
}
.sub{color:var(--text-muted); font-size:14px; margin:0;}

.search-wrap{position:relative; margin-top:20px;}
.search-input{
  width:100%; background:var(--surface); border:1px solid var(--border);
  color:var(--text); font-family:'IBM Plex Sans',sans-serif; font-size:15px;
  padding:13px 16px; border-radius:8px; outline:none;
}
.search-input:focus{border-color:var(--ember);}
.search-results{
  position:absolute; top:calc(100% + 6px); left:0; right:0; max-height:340px;
  overflow-y:auto; background:var(--surface-raised); border:1px solid var(--border);
  border-radius:8px; z-index:20; box-shadow:0 12px 28px rgba(0,0,0,.5); display:none;
}
.search-results.open{display:block;}
.search-item{
  display:flex; align-items:center; gap:10px; padding:9px 14px; cursor:pointer;
  border-bottom:1px solid var(--border); font-size:13.5px;
}
.search-item:last-child{border-bottom:none;}
.search-item:hover{background:var(--surface);}
.search-item .name{flex:1;}
.search-item .meta{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-muted);}
.search-empty{padding:14px; color:var(--text-muted); font-size:13px; text-align:center;}

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:6px;
  padding:20px; margin-bottom:20px;
}
.empty-state{text-align:center; padding:50px 20px; color:var(--text-muted); font-size:14px;}
.recipe-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.recipe-title-row{display:flex; align-items:center; gap:10px;}
.recipe-icon{width:36px; height:36px; border-radius:3px; border:1px solid var(--border); background:var(--surface-raised); padding:0px; image-rendering:pixelated;}
.recipe-title{font-family:'Cinzel', serif; font-size:19px; font-weight:600;}
.meta-row{display:flex; gap:18px; flex-wrap:wrap; margin-top:10px; font-size:12.5px; color:var(--text-muted); font-family:'IBM Plex Mono',monospace;}
.meta-row b{color:var(--text); font-weight:600;}
.qty-control{display:flex; align-items:center; gap:8px;}
.qty-control label{font-size:12px; color:var(--text-muted);}
.qty-control input{
  width:70px; background:var(--surface-raised); border:1px solid var(--border);
  color:var(--text); font-family:'IBM Plex Mono',monospace; font-size:14px;
  padding:6px 8px; border-radius:4px;
}
.variant-switch{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap;}
.variant-pill{
  font-family:'IBM Plex Mono',monospace; font-size:11px; padding:4px 9px;
  border-radius:12px; border:1px solid var(--border); color:var(--text-muted);
  cursor:pointer; background:var(--surface-raised);
}
.variant-pill.active{border-color:var(--ember); color:var(--ember);}

.cart-item{
  display:flex; align-items:center; gap:14px; padding:12px 0;
  border-bottom:1px solid var(--border);
}
.cart-item:last-of-type{border-bottom:none;}
.cart-item-info{flex:1 1 auto; min-width:0;}
.remove-btn{
  background:transparent; border:1px solid var(--border); color:var(--text-muted);
  width:28px; height:28px; border-radius:6px; cursor:pointer; font-size:13px;
  flex-shrink:0;
}
.remove-btn:hover{border-color:var(--danger); color:var(--danger);}
.btn-secondary{
  background:transparent; border:1px dashed var(--ember-dim); color:var(--ember);
  margin-top:14px;
}
.btn-secondary:hover{background:var(--surface-raised);}
  font-family:'Cinzel', serif; font-size:16px; font-weight:600; margin:0 0 4px;
  display:flex; align-items:center; gap:8px;
}
h2.section .count{
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-muted);
  font-weight:400;
}
.section-hint{font-size:12px; color:var(--text-muted); margin:0 0 14px;}

/* Cabecera de columnas de la tabla-árbol */
.tree-columns-header{
  display:flex; align-items:center; gap:8px; padding:4px 6px 10px;
  border-bottom:1px solid var(--border); margin-bottom:4px;
}
.tree-columns-header .col-name{
  font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase;
  letter-spacing:1px; color:var(--text-muted); flex:1 1 auto; min-width:0;
}
.tree-columns-header .col-group{
  display:flex; gap:0; flex:0 0 auto;
}
.tree-columns-header .col{
  font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase;
  letter-spacing:1px; color:var(--text-muted); text-align:right;
}

.tree-row{
  display:flex; align-items:center; gap:8px; padding:7px 6px; border-radius:4px;
  flex-wrap:nowrap;
}
.tree-row.root-row{padding-bottom:10px; border-bottom:1px solid var(--border); margin-bottom:6px;}
.tree-row-main{cursor:default; display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0;}
.tree-row-main.expandable{cursor:pointer;}
.tree-row-main.expandable:hover{background:var(--surface-raised); border-radius:4px;}
.chevron{
  width:14px; text-align:center; color:var(--ember); font-size:11px;
  transition:transform .15s ease; flex-shrink:0;
}
.chevron.open{transform:rotate(90deg);}
.chevron.hidden{visibility:hidden;}
.mat-icon{
  width:32px; height:32px; flex-shrink:0; border-radius:3px;
  border:1px solid var(--border); background:var(--surface-raised);
  object-fit:contain; padding:0px;
}
.tree-name{
  flex:1 1 auto; min-width:0; font-size:13.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tree-tag{
  font-size:10px; font-family:'IBM Plex Mono',monospace; color:var(--ember);
  border:1px solid var(--ember-dim); border-radius:3px; padding:1px 5px; margin-left:6px;
  white-space:nowrap;
}
.variant-select{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; background:var(--surface-raised);
  color:var(--text-muted); border:1px solid var(--border); border-radius:3px;
  padding:1px 4px; margin-left:6px; cursor:pointer;
}

.col-group{display:flex; gap:0; flex:0 0 auto;}
.col-req{width:90px; text-align:right; font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--text-muted); padding-right:10px;}
.col-req b{color:var(--text); font-weight:600;}
.col-have{width:74px; text-align:right; padding-right:10px;}
.col-have input{
  width:64px; background:var(--surface-raised); border:1px solid var(--border);
  color:var(--text); font-family:'IBM Plex Mono',monospace; font-size:12.5px;
  padding:4px 6px; border-radius:4px; text-align:right;
}
.col-miss{width:70px; text-align:right; padding-right:10px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600;}
.col-miss.zero{color:var(--success);}
.col-miss.pos{color:var(--danger);}
.col-price{width:140px; text-align:right; padding-right:10px;}
.col-price input{
  width:130px; background:var(--surface-raised); border:1px solid var(--border);
  color:var(--text); font-family:'IBM Plex Mono',monospace; font-size:12.5px;
  padding:4px 6px; border-radius:4px; text-align:right;
}
.col-subtotal{width:150px; text-align:right; font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--gold);}

.children{margin-left:28px; padding:2px 0 2px 18px; border-left:2px solid var(--ember-dim); display:none; border-radius:0 0 0 4px;}
.children.open{display:block;}

.summary-bar{
  position:sticky; bottom:16px; margin-top:24px;
  background:var(--surface-raised); border:1px solid var(--ember-dim);
  border-radius:8px; padding:14px 20px; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.summary-bar .stat{font-size:13px;}
.summary-bar .stat b{
  font-family:'IBM Plex Mono',monospace; color:var(--ember); font-size:16px; margin-right:6px;
}
.summary-bar .stat.gold b{color:var(--gold);}
.btn{
  background:var(--ember); color:#17130f; border:none; padding:9px 16px;
  border-radius:6px; font-weight:600; font-size:13px; cursor:pointer;
  font-family:'IBM Plex Sans',sans-serif;
}
.btn:hover{background:#e37339;}

@media (max-width: 720px){
  .col-req, .col-have, .col-price{display:none;}
  .tree-columns-header .col-req, .tree-columns-header .col-have, .tree-columns-header .col-price{display:none;}
}