/* Adaptación a celular de las páginas diseñadas en canvas (ancho fijo).
   El diseño original se arma a ~860px; acá se le enseña a caber en 390. */
@media (max-width: 820px){

  /* El menú superior no cabe: que se deslice en vez de empujar la página. */
  header nav{ overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch }
  header nav::-webkit-scrollbar{ display:none }
  header nav > *{ flex:0 0 auto }

  /* Nada puede ser más ancho que la pantalla… */
  #dc-root, #dc-root *{ max-width:100% }

  /* …salvo las maquetas del producto, que ya viven dentro de un
     contenedor con desplazamiento propio y necesitan su ancho. */
  [style*="min-width: 860px"], [style*="min-width:860px"],
  [style*="min-width: 860px"] *, [style*="min-width:860px"] *{ max-width:none }

  /* Las rejillas de dos o tres columnas pasan a una. */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns:1fr !important }

  /* El índice fijo de las páginas legales estorba en pantalla chica. */
  aside[style*="position: sticky"], aside[style*="position:sticky"]{ position:static }

  img, video, svg{ max-width:100%; height:auto }

  /* Las tablas de datos (conservación, proveedores) se deslizan solas. */
  table{ display:block; overflow-x:auto; width:100% !important; white-space:normal }
  table td, table th{ min-width:9ch }
}

/* Teléfonos angostos: la tabla pasa a fichas apiladas, más legible que
   una tabla que se arrastra de lado. */
@media (max-width: 560px){
  table, table tbody, table tr, table td{ display:block; width:100% !important }
  table thead{ display:none }
  table tr{ border:1px solid rgba(0,0,0,.1); border-radius:12px;
            padding:6px 4px; margin-bottom:12px }
  table td{ border:0 !important; padding:7px 14px !important; min-width:0 }
  table td:first-child{ font-weight:600 }
}