*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#ECE0CD;font-family:'Hanken Grotesk',system-ui,sans-serif;color:#221D18;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#D6CCB9;border-radius:8px;border:3px solid #ECE0CD}
input,select,button,textarea{font-family:inherit;color:inherit}
input:focus,select:focus{outline:none}
input::placeholder{color:#B3A998}
button{font-family:inherit}
/* Quitar las flechas (spinners) de los campos numéricos — estorban en campos angostos */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
/* Selectores chiquitos en la receta (unidad, parte): sin flecha nativa; ponemos una "▾" propia al lado (visible en Mac y iPad) */
select.selu{-webkit-appearance:none;-moz-appearance:none;appearance:none}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- esqueleto responsivo ---- */
.layout{display:flex;height:100vh;width:100%;overflow:hidden;background:#ECE0CD}
.sidebar{width:236px;flex:0 0 236px;height:100%;display:flex;flex-direction:column;background:#211D18;color:#EFE9DE;padding:26px 0}
.main{flex:1;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.content{max-width:1180px;margin:0 auto;padding:40px 48px 90px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.g-editor{display:grid;grid-template-columns:1.55fr .95fr;gap:22px;align-items:start}
.g-inv{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:start}
.g-ped{display:grid;grid-template-columns:1.7fr 1fr;gap:22px;align-items:start}
/* Las tablas densas conservan sus columnas; en móvil se deslizan de lado */
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scrollx>*{min-width:560px}

/* ============ MÓVIL (iPhone) + TABLET VERTICAL (iPad en portrait, incl. 12.9") ============ */
@media (max-width:820px), (orientation:portrait) and (max-width:1200px){
  .layout{flex-direction:column;height:100vh}
  .sidebar{width:100%!important;flex:0 0 auto!important;height:auto;flex-direction:column;padding:14px 0 10px;position:sticky;top:0;z-index:20}
  .sidebar .brandbox{padding:0 16px 10px!important}
  .sidebar-nav{flex-direction:row!important;flex-wrap:wrap!important;overflow:visible!important;gap:7px!important;padding:6px 14px 2px!important}
  .sidebar-nav button{width:auto!important;flex:0 0 auto!important;white-space:nowrap;padding:9px 14px!important;justify-content:center!important;border:1px solid #3A322A!important;border-radius:20px!important}
  .sidebar-nav button span:last-child{display:none}
  .sidebar-foot{display:none!important}
  .main{height:auto;flex:1;min-height:0}
  .content{padding:20px 16px 120px!important}
  .g3,.g2,.g-editor,.g-inv,.g-ped{grid-template-columns:1fr!important}
  .content h1{font-size:30px!important}
  .editor-head{margin:-20px -16px 0!important;padding:14px 16px 12px!important}
  .sticky-right{position:static!important}
  .scrollx>*{min-width:640px}
  .modal-card{width:100%!important;padding:20px!important}
}