@media (max-width:359px){
  .hero .big{font-size:27px}
  .tile .v{font-size:17px}
}
@media (min-width:768px){
  .view{padding:16px 24px 120px}
  .strip{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .sheet{left:50%;right:auto;transform:translateX(-50%);width:560px;border-radius:22px;bottom:24px;max-height:86vh}
}
@media (min-width:1024px){
  .tabbar{display:none}
  .sidebar{display:flex;flex-direction:column;gap:2px;width:236px;flex:0 0 236px;
    background:var(--surface);border-right:1px solid var(--line);padding:18px 12px;
    position:sticky;top:0;height:100vh;overflow-y:auto}
  .sidebar .brand{font-weight:800;font-size:17px;padding:6px 12px 18px;letter-spacing:-.02em}
  .sidebar button{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;
    font-size:14px;font-weight:600;color:var(--muted);text-align:left;width:100%}
  .sidebar button.on{background:var(--brand-soft);color:var(--brand)}
  .sidebar .add{background:var(--brand);color:#fff;margin-top:14px;justify-content:center}
  .view{padding:18px 28px 60px}
  .toast-root{bottom:24px}
}

/* En pantallas estrechas dos campos por fila quedan demasiado justos */
@media (max-width:420px){
  .f2{grid-template-columns:1fr}
}