/* =====================================================================
   WEB EN EL MÓVIL  -  entrega 472
   Todo lo de aquí solo se aplica en pantallas de como mucho 820 px de ancho
   (móviles y tabletas en vertical). En el ordenador no cambia nada.
   Se carga solo en todas las páginas (ver movil472.php).
   ===================================================================== */
@media (max-width: 820px){

:root{
	--m472-cabecera: #5a5959;	/* gris de la cabecera */
	--m472-alto-logo: 58px;		/* alto de la franja del logotipo */
}

/* ---- imágenes y vídeos nunca más anchos que la pantalla ---- */
img, video, iframe{ max-width:100%; }
img{ height:auto; }

/* ---------------- CABECERA DE LA WEB PÚBLICA (index_top) ---------------- */
body > table:has(td.login){ width:100% !important; }
td.login > table[width="986"]{ width:100% !important; }
td.login td[height="111"]{
	display:block; height:auto !important; width:auto !important;
	background-color:var(--m472-cabecera); background-repeat:no-repeat;
	background-size:auto var(--m472-alto-logo); background-position:-6px 0;
	padding-top:calc(var(--m472-alto-logo) + 2px);
}
td.login a.logo-cab302{ width:62%; height:var(--m472-alto-logo); }
td.login td[height="111"] > table{ width:100% !important; height:auto !important; }
td.login td[height="47"], td.login td[height="40"], td.login td[height="32"]{ height:auto !important; padding:0 12px 8px !important; }
td.login td[height="40"]:not(:has(img)){ display:none; }		/* fila de idiomas vacía */
td.login td[height="47"]{ position:absolute; top:12px; right:0; padding:0 10px !important; }
td.login a.boton-acceso297{ padding:7px 11px; font-size:12px; }
td.login td[height="32"]{ text-align:left; padding:0 0 10px !important; }
td.login td[height="32"] > table{ width:100%; }
span.enlaces-cab298{ display:flex; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:0 10px; gap:6px; }
span.enlaces-cab298::-webkit-scrollbar{ display:none; }
a.enlace-cab298{ flex:none; white-space:nowrap; background:rgba(255,255,255,.10); }

/* pase de banners de arriba: en el móvil no cabe (986 x 200) */
body > table[width="986"][bgcolor="#ebe7e8"]{ display:none !important; }

/* el botón de la cabecera necesita un sitio donde colocarse */
td.login td[height="111"]{ position:relative; }

/* ---------------- ZONA DE DISTRIBUIDORES (cabecera nueva) ---------------- */
div.zd-cab-fila{ min-height:0; flex-direction:column; align-items:stretch; background-size:auto var(--m472-alto-logo); background-position:-6px 0; padding-top:var(--m472-alto-logo); }
a.zd-logo{ width:60%; max-width:none; height:var(--m472-alto-logo); }
div.zd-cab-derecha{ align-items:stretch; padding:0 0 8px; gap:6px; }
div.zd-usuario{ justify-content:space-between; }
div.zd-usuario-datos b{ max-width:150px; }
a.zd-salir{ padding:7px 10px; font-size:13px; }
nav.zd-enlaces{ justify-content:flex-start; }
/* botones del menú: en una fila que se desliza con el dedo */
div.zd-menu-fila{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-left:10px; padding-right:10px; }
div.zd-menu-fila::-webkit-scrollbar{ display:none; }
a.zd-boton{ flex:none; padding:8px 10px; font-size:13.5px; }
/* aviso de rápel más compacto: sin la explicación larga y los dos importes uno al lado del otro */
div.zd-rapel-caja{ padding:12px 14px; gap:10px; }
span.zd-rapel-icono, div.zd-rapel-titulo small{ display:none; }
div.zd-rapel-titulo b{ font-size:16px; }
dl.zd-rapel-datos{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; }
dl.zd-rapel-datos > div{ min-width:0; padding:8px 10px; }
dl.zd-rapel-datos dt{ font-size:12px; }
dl.zd-rapel-datos dd{ font-size:19px; }
button.zd-rapel-boton{ padding:9px 14px; font-size:14px; }
/* columnas que en el móvil van una debajo de otra */
.cq362 div.cq362-tarjetas,
.sat407 div.sat407-selects,
.cq362 dl.ls395-detalle,
.cq362 dl.ls432-detalle,
.pe420 div.pe420-rejilla,
.pe420 dl.pe420-ficha,
.pe420 dl.pe420-ficha-res,
.md403 div.md403-rejilla{ grid-template-columns:minmax(0,1fr) !important; }
.sat407 div.sat407-selects label:last-child{ grid-column:auto; }
/* listados antiguos (historiales): se deslizan de lado dentro de su recuadro, sin salirse de la pantalla */
.cq362 div.cq362-lista-cuerpo, .cq362 div.cq362-antiguo{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
.cq362 div.cq362-antiguo table.ls368{ min-width:640px; }	/* que las columnas no se aplasten: el listado se desliza de lado */
.cq362 #form_reparacion, .cq362 #form_nombreCli{ width:150px !important; }

}