/* v29.5.3 — scroll natural, lateral fijo y controles con contraste sutil.
   Esta hoja se carga al final para neutralizar reglas heredadas sin alterar
   los componentes móviles aprobados. */
:root{
  --control-bg:#f2e9e2;
  --control-hover:#e9ddd4;
  --control-border:#d9c8bc;
  --tab-bg:#eee4dc;
  --tab-idle:#faf5f1;
}
:root[data-theme="dark"]{
  --control-bg:#342c28;
  --control-hover:#403630;
  --control-border:#58483f;
  --tab-bg:#2d2521;
  --tab-idle:#39302b;
}

/* Pestañas: jerarquía por color, no por marcos repetidos. */
.recipe-hub-nav,
.subnav,
.inventory-tabs,
.planning-nav,
.calendar-view-switch{
  position:static;
  top:auto;
  z-index:auto;
  gap:5px;
  padding:5px;
  border:0;
  border-radius:14px;
  background:var(--tab-bg);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.subnav button,
.inventory-tabs button,
.planning-nav button,
.calendar-view-switch button{
  border:0;
  background:var(--tab-idle);
  color:var(--ink);
  box-shadow:none;
}
.subnav button:not(.active):hover,
.inventory-tabs button:not(.active):hover,
.planning-nav button:hover,
.calendar-view-switch button:not(.active):hover{
  border:0;
  background:var(--control-hover);
  color:var(--ink);
  box-shadow:none;
  transform:none;
}
.subnav button.active,
.inventory-tabs button.active,
.calendar-view-switch button.active{
  border:0;
  background:var(--wine);
  color:#fff;
  box-shadow:0 5px 13px color-mix(in srgb,var(--wine) 20%,transparent);
}

/* Botones secundarios visibles, sin apariencia de botón delineado. */
.secondary,
a.button.secondary{
  border-color:transparent;
  background:var(--control-bg);
  color:var(--ink);
  box-shadow:none;
}
.secondary:hover,
a.button.secondary:hover{
  border-color:transparent;
  background:var(--control-hover);
  color:var(--ink);
  box-shadow:none;
}

/* El pie del lateral siempre conserva contraste sobre el fondo oscuro. */
.side .sidefoot button,
.side #theme,
.side #logout{
  border:1px solid var(--nav-line);
  background:rgba(255,255,255,.075);
  color:var(--nav-ink);
  opacity:1;
  box-shadow:none;
}
.side .sidefoot button:hover,
.side #theme:hover,
.side #logout:hover{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.13);
  color:#fff;
}

/* Formularios y superficies mantienen separación suficiente en ambos temas. */
input,select,textarea{background:var(--surface);border-color:var(--control-border)}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--wine) 38%,var(--control-border))}
.card,.panel,.tablewrap,.inventory-stock-card,
.purchase-history-list article,.transformation-history-list article{border-color:var(--line)}

/* Escritorio: la ventana es el único scroll vertical. El menú queda anclado. */
@media (min-width:761px) and (min-height:601px){
  html{
    width:100%;
    height:auto;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:scroll;
  }
  body{
    width:100%;
    height:auto;
    min-height:100vh;
    overflow:visible;
    overscroll-behavior-y:auto;
  }
  .shell{
    display:block;
    width:100%;
    height:auto;
    min-height:100vh;
    overflow:visible;
  }
  .side{
    position:fixed;
    inset:0 auto 0 0;
    z-index:30;
    width:252px;
    height:100dvh;
    overflow:hidden;
  }
  .nav{min-height:0}
  .mainarea{
    display:block;
    width:calc(100% - 252px);
    height:auto;
    min-height:100vh;
    margin-left:252px;
    overflow:visible;
  }
  .main{
    height:auto;
    min-height:0;
    overflow:visible;
    scrollbar-gutter:auto;
  }
}

@media (min-width:901px) and (max-width:1180px) and (min-height:601px){
  .side{width:230px}
  .mainarea{width:calc(100% - 230px);margin-left:230px}
}
@media (min-width:761px) and (max-width:900px) and (min-height:601px){
  .side{width:205px}
  .mainarea{width:calc(100% - 205px);margin-left:205px}
}

/* En móvil se conserva el scroll interno de la app y la navegación aprobada. */
@media (max-width:760px){
  .recipe-hub-nav,.planning-nav{position:static;top:auto}
  .subnav,.inventory-tabs,.planning-nav{overflow-x:auto}
}