/* R67 list surface. Loaded after Apariencia comun so shared tokens remain authoritative. */
body[data-ikatu-app=mercadito][data-view=list] .list-pane{background:var(--bg)}
.list-command-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px clamp(18px,5vw,64px) 4px;flex-shrink:0}
.list-command-bar>.touch-back{margin:0;min-width:max-content;padding-inline:14px;background:var(--surface);font-weight:750}
.list-command-bar>.touch-back span{font-size:18px;line-height:1}
.list-command-bar .notebook-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0;margin:0;flex-wrap:nowrap}
.list-command-bar .notebook-toolbar button{margin:0;min-width:44px;padding:9px 12px;font-size:12px}
body[data-ikatu-app=mercadito][data-view=list] .pane-heading{align-items:center;padding-top:12px;padding-bottom:5px}
body[data-ikatu-app=mercadito][data-view=list] .pane-heading h1{font-size:clamp(24px,3vw,32px)}
body[data-ikatu-app=mercadito][data-view=list] .pane-heading .secondary{white-space:nowrap}
body[data-ikatu-app=mercadito][data-view=list] .pane-intro{display:block;padding-bottom:8px}
body[data-ikatu-app=mercadito][data-view=list] .list-scroll{padding-top:8px;padding-bottom:22px}
.notebook-section{display:grid;gap:10px}
.notebook-section+.notebook-section{margin-top:18px}
body[data-ikatu-app=mercadito][data-view=list] .notebook-section>h2{padding:0 2px;margin:0;font-size:11px;letter-spacing:.09em;color:var(--muted)}
body[data-ikatu-app=mercadito][data-view=list] .list-item{display:grid;grid-template-columns:minmax(300px,1fr) minmax(230px,auto);gap:10px 16px;margin:0;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 1px 0 color-mix(in srgb,var(--text) 4%,transparent)}
body[data-ikatu-app=mercadito][data-view=list] .editable-row{display:grid;grid-template-columns:48px minmax(0,1fr) 66px;gap:10px;align-items:center;min-width:0}
body[data-ikatu-app=mercadito][data-view=list] .editable-row .product-visual{width:48px;flex-basis:48px;align-self:center}
body[data-ikatu-app=mercadito][data-view=list] .editable-row .product-visual img{border:1px solid var(--line);border-radius:11px;background:var(--surface-2)}
body[data-ikatu-app=mercadito][data-view=list] .editable-row .product-visual figcaption{display:none}
body[data-ikatu-app=mercadito][data-view=list] .line-label{min-height:44px;padding:9px 11px;border-color:transparent;background:transparent;font-size:14px;font-weight:720;line-height:1.3}
body[data-ikatu-app=mercadito][data-view=list] .line-label:hover{background:var(--surface-2)}
body[data-ikatu-app=mercadito][data-view=list] .line-label:focus{padding:9px 11px;border-color:var(--brand);background:var(--surface-2)}
.line-quantity-field{display:grid;grid-template-rows:auto 1fr;gap:2px;color:var(--muted);font-size:9px;text-align:center;text-transform:uppercase;letter-spacing:.07em}
body[data-ikatu-app=mercadito][data-view=list] .line-quantity{min-height:36px;padding:5px 4px;border-color:var(--line);background:var(--surface-2);font-size:14px;text-align:center;font-variant-numeric:tabular-nums}
body[data-ikatu-app=mercadito][data-view=list] .line-meta{display:grid;grid-template-columns:auto minmax(155px,220px);align-items:end;justify-content:end;gap:10px;margin:0}
body[data-ikatu-app=mercadito][data-view=list] .presentation-action{min-height:40px;padding:8px 11px;max-width:none;overflow:visible;text-overflow:clip;white-space:normal;font-size:12px}
.substitution-choice{display:grid;gap:3px;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.substitution-choice select{min-height:40px;padding:7px 30px 7px 10px;font-size:12px;text-transform:none;letter-spacing:normal}
body[data-ikatu-app=mercadito][data-view=list] .line-details{grid-column:1/-1;margin:0;border-top:1px solid transparent;border-radius:0}
body[data-ikatu-app=mercadito][data-view=list] .line-details[open]{margin-top:2px;padding-top:4px;border-top-color:var(--line)}
body[data-ikatu-app=mercadito][data-view=list] .line-details summary{min-height:32px;padding:0;color:var(--muted);font-size:11px}
body[data-ikatu-app=mercadito][data-view=list] .line-details summary::after{content:"+";margin-left:7px;color:var(--brand);font-weight:800}
body[data-ikatu-app=mercadito][data-view=list] .line-details[open] summary::after{content:"−"}
body[data-ikatu-app=mercadito][data-view=list] .demo-launch{margin-top:6px;margin-bottom:3px;background:var(--surface);border-style:dashed}
body[data-ikatu-app=mercadito][data-view=list] .empty-state{margin:10px 0;padding:34px 18px;border:1px dashed var(--line);border-radius:14px;background:var(--surface)}
body[data-ikatu-app=mercadito][data-view=list] .list-footer{padding-top:10px;padding-bottom:max(12px,env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:0 -8px 22px color-mix(in srgb,var(--bg) 80%,transparent)}
#saveStatus{display:flex;align-items:center;gap:7px}
#saveStatus::before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--brand)}
#compareButton{justify-content:flex-start;min-height:48px;padding-inline:16px}
#compareButton>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#compareButton .count-badge{display:grid;place-items:center;min-width:26px;height:26px;margin-left:auto;padding:0 8px;border-radius:999px;background:color-mix(in srgb,var(--on-brand) 18%,transparent);font-size:12px;font-variant-numeric:tabular-nums}
#compareButton>span:last-child{font-size:18px}

/* The active destination uses the brand, not a disconnected grey tab. */
body[data-ikatu-app=mercadito] .mobile-nav :is(a,button){border:1px solid transparent;background:transparent;color:var(--muted);text-decoration:none}
body[data-ikatu-app=mercadito] .mobile-nav :is(a,button)[aria-current=page]{background:color-mix(in srgb,var(--brand) 14%,var(--surface));border-color:color-mix(in srgb,var(--brand) 30%,var(--line));color:var(--brand)}

@media(max-width:760px){
  .list-command-bar{padding:8px 12px 2px;gap:6px}
  .list-command-bar>.touch-back{padding-inline:10px;font-size:12px}
  .list-command-bar .notebook-toolbar{gap:5px}
  .list-command-bar .notebook-toolbar button{padding-inline:9px}
  body[data-ikatu-app=mercadito][data-view=list] .pane-heading{padding:10px 12px 4px}
  body[data-ikatu-app=mercadito][data-view=list] .pane-heading .secondary{padding-inline:10px;font-size:12px}
  body[data-ikatu-app=mercadito][data-view=list] .pane-intro{padding:0 12px 6px;font-size:12px}
  body[data-ikatu-app=mercadito][data-view=list] .list-scroll{padding:7px 12px 18px}
  body[data-ikatu-app=mercadito][data-view=list] .list-item{grid-template-columns:1fr;gap:9px;padding:12px}
  body[data-ikatu-app=mercadito][data-view=list] .editable-row{grid-template-columns:44px minmax(0,1fr) 58px;gap:7px}
  body[data-ikatu-app=mercadito][data-view=list] .editable-row .product-visual{width:44px;flex-basis:44px}
  body[data-ikatu-app=mercadito][data-view=list] .line-label{padding-inline:7px;font-size:14px}
  body[data-ikatu-app=mercadito][data-view=list] .line-label:focus{padding-inline:7px}
  body[data-ikatu-app=mercadito][data-view=list] .line-meta{grid-template-columns:minmax(0,1fr) minmax(150px,1.15fr);justify-content:stretch;align-items:end;gap:7px}
  body[data-ikatu-app=mercadito][data-view=list] .presentation-action{width:100%;padding-inline:7px}
  body[data-ikatu-app=mercadito][data-view=list] .substitution-choice select{padding-inline:8px 26px}
  body[data-ikatu-app=mercadito][data-view=list] .demo-launch{margin-inline:12px}
  body[data-ikatu-app=mercadito][data-view=list] .list-footer{padding-inline:12px}
}

@media(max-width:410px){
  .list-command-bar .button-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .list-command-bar .notebook-toolbar button{width:44px;padding:0}
  body[data-ikatu-app=mercadito][data-view=list] .line-meta{grid-template-columns:1fr}
  body[data-ikatu-app=mercadito][data-view=list] .substitution-choice{width:100%}
  #compareButton{font-size:13px}
}

@media(max-width:500px){
  body[data-ikatu-app=mercadito][data-view=list] .editable-row{grid-template-columns:44px minmax(0,1fr)}
  body[data-ikatu-app=mercadito][data-view=list] .line-quantity-field{grid-column:2;grid-template-columns:auto 58px;grid-template-rows:1fr;align-items:center;justify-content:end;gap:7px;text-align:right}
  body[data-ikatu-app=mercadito][data-view=list] .substitution-choice select{width:100%}
}

@media(min-width:761px) and (pointer:fine){
  body[data-ikatu-app=mercadito][data-view=list] .list-command-bar button{min-height:40px}
  body[data-ikatu-app=mercadito][data-view=list] .list-scroll{padding-top:10px}
  body[data-ikatu-app=mercadito][data-view=list] .list-item :is(input,select,button){min-height:40px}
}