/* Vinipad - Panel Admin - Adaptación a smartphones y tablets en vertical - Jade Molano - Sep, 2026
   Sólo contiene reglas dentro de media queries: hasta 640 px (smartphones), la franja de botones fijos hasta 1023 px y la lista de artículos entre 641 y 768 px. En escritorio no cambia nada.
   Se carga en todas las páginas del panel después del resto de hojas (core/te-panel_main.class.php), por lo que sus reglas prevalecen. */

/* ============================================================== Hasta 1023 px: franja traslúcida bajo los botones fijos ============================================================== */
@media (max-width: 1023px)
{
	#fixedbuttons {position: fixed; left: 0; right: 0; bottom: 0; height: 6.2em; z-index: 9; background: rgba(28, 4, 14, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-top: 1px solid rgba(255, 255, 255, 0.14);}
	#fixedbuttons:not(:has(button)) {display: none;}
	#btn_back, #btn_logout, #btn_trans, #btn_print, #btn_ai, #btn_pdf, #btn_csv, #btn_minstockpage, #btn_openedstockpage {bottom: 1.2em; z-index: 10;}
	#footer {padding-bottom: 8em;}
}

/* ============================================================== Tablet en vertical (641 a 768 px): sólo la lista de artículos (list.php) ============================================================== */
@media (min-width: 641px) and (max-width: 840px)
{
	/* En escritorio la página mide 82em fijos; aquí se ajusta al ancho de la pantalla. La lista ocupa todo el ancho y los campos de precio siguen
	   anclados al borde derecho, como sus encabezados (ambos flotan a la derecha del mismo contenedor), por lo que se mantienen alineados */
	body:has(#list_box) {width: auto !important; max-width: 100%; padding: 0 1em; box-sizing: border-box; overflow-x: hidden;}
	body:has(#list_box) > h1 {width: auto;}
	#list_box {width: auto !important; max-width: 100%;}
	#list_box fieldset > div {padding-left: 1em; padding-right: 1em;}
	#list_box #list_blk ul.list {width: 100%; box-sizing: border-box;}
	#list_box #list_blk ul.list li {width: auto;}
	#list_box #list_blk ul.list li span.i2, #list_box #list_blk ul.list li span.i4 {width: 30%;} /* Con el 33% las dos columnas de texto no cabían en la fila más estrecha y la segunda saltaba de línea */
	/* Modo precios: la columna de precios necesita 18.5em para los tres campos, y los encabezados van en su propia fila sobre la lista (en escritorio caben junto a los desplegables de idioma) */
	#list_box #list_blk ul.list li:has(input.pricefield) span.i4 {width: 18.5em;}
	#list_box #list_blk ul.list li:has(input.pricefield) span.i3 {width: calc(100% - 23em);}
	#list_box #pricehdr_blk {clear: both; width: auto; height: 2.2em; padding-right: 3em;} /* El relleno alinea los encabezados con los campos (la fila llega hasta el borde del bloque: sin barra de desplazamiento clásica) */
	#list_box #list_blk {clear: both;}
	/* Fila inferior: botones a la izquierda y búsqueda a su derecha; las opciones de lista pasan debajo, en una sola fila */
	#list_box #listbtn_blk, #list_box #listbtntrad_blk {margin: 0 1.2em 0 0;}
	#list_box #listoptions_blk {float: none; clear: both; width: auto; padding: 0.5em 0 0;}
	#list_box #listoptions_fs {width: auto; display: flex; flex-wrap: wrap; gap: 0 1.2em; padding-top: 0.6em;}
	#list_box #listoptions_fs > div {flex: 0 0 auto; width: 13.5em; clear: none;}
	#list_box #footer {margin-top: 2em;}
}

/* ============================================================== Smartphone (hasta 640 px) ============================================================== */
@media (max-width: 640px)
{
	html {-webkit-text-size-adjust: 100%;}
	body, h1 {width: auto !important; max-width: 100%;}
	body {padding: 0 1em; box-sizing: border-box; overflow-x: hidden; font-size: 100%;}
	#businesslogo {left: 50%;}
	#content > div, #login_box, #list_box, #form_box, #settings_box, #menu_box, #menu_box_2, #menu_box_3, #ctlist_box,
	#userlist_box, #userform_box, #stocklist_box, #stockreportlist_box, #stockstats_box, #stockreport_box,
	#tblelementslist_box, #tblelementslist_box_ml, #tablelist_box, #advlist_box, #advform_box, #listgen_box, #customimg_box, #fonts_box
	{
		width: auto !important; max-width: 100%;
	}
	#fonts_box {overflow-x: auto; -webkit-overflow-scrolling: touch;} /* Ajuste de tamaños de texto: sus previsualizaciones son de ancho fijo; se desplazan dentro de su caja */
	.mfp-iframe {min-width: 0;}
	#thumb_preview img {max-width: 60vw; height: auto;}

	/* ---------- Cabecera: los tres logotipos en una fila ---------- */
	h1, #logo_cust, #logo_teadm {height: auto;}
	h1 {display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; min-height: 9.4em; margin: 0 0 0.5em; padding: 0;}
	#logo_cust {float: none; width: 5.6em; height: 5.6em; margin: 1.6em 0 0; flex: 0 0 auto;}
	#businesslogo {position: static; left: auto; top: auto; flex: 0 1 auto; min-width: 0; text-align: center; margin-top: 1.4em;}
	#businesslogo img {position: static; left: auto; width: auto !important; max-width: 12em; height: 6.6em !important;}
	#logo_teadm {float: none; width: 9em; margin: 0; flex: 0 0 auto;} /* Cuelga del borde superior, como en escritorio */
	h1.nocust #logo_teadm {margin: 0;}
	#btn_cfg {float: none; width: 6em; height: 7.5em; margin: 1.2em 0 0; background-size: 5.4em auto; background-position-y: top; background-position-x: 9px; flex: 0 0 auto;} /* Icono centrado sobre el texto */
	#btn_cfg span {padding: 5.6em 0 0; font-size: 1.1em;}
	#topmenu {float: none; width: auto; height: auto; margin: 0;}

	/* ---------- Estructura de formularios: etiqueta encima y control a todo el ancho ---------- */
	#content {margin-top: 0.5em;}
	#login_box {margin-top: 1.5em;}
	#login_box span.pwd_eye {top: auto; bottom: 0.65em; right: 0.6em;} /* Con la etiqueta encima del campo, el ojo va dentro del campo */
	fieldset div {padding: 1.2em 0.2em;}
	fieldset div div {height: auto; margin-bottom: 1.2em;}
	fieldset legend {font-size: 1.4em;}
	label {float: none; display: block; padding: 0 0 0.35em; clear: both;}
	input, textarea, select, input.thickbox, input.multival, input[id^="mvb_"], input.narrowerforopt, #login_box input, #settings_box input, #settings_box input.thickbox, #listgen_box input, #listsearch_blk input, input#sel_etiqueta, div.listsearch_frm input, fieldset.simplebox .listsearch_frm fieldset input, #sel_idioma, .blng, #multilang_blk input.thickbox, #list_box #multilang_blk input.thickbox, div.pictures_blk input
	{
		float: none; display: block; width: 100% !important; box-sizing: border-box; height: auto; min-height: 2.5em; margin-left: 0; margin-right: 0;
	}
	input[type="hidden"] {display: none;}
	textarea {min-width: 0; max-width: none; height: 8em;}
	div.txa {height: auto;}
	div.txa div {width: auto; height: auto;}
	input.chkbox, button.chkbox, #settings_box button.chkbox, #listgen_box button.chkbox, div.opt_blk button.chkbox {float: none; display: inline-block; width: 2.6em !important; height: 2.4em; margin: 0; min-height: 0;}
	input.txt_units {width: 3em !important; display: inline-block;}
	#settings_box input.colorinput, input[type="color"] {min-height: 3.75em; height: 3.75em; padding: 0.4em;} /* Más alto que un campo normal para que se aprecie el color */
	input.txt_pass {width: 100% !important;}

	/* Controles que estaban colocados por coordenadas junto a los campos: van al extremo derecho de su fila */
	fieldset div div:has(> div.multiclear), fieldset div div:has(> button.btn_options_box), fieldset div div:has(> button.btn_reset_img), fieldset div div:has(> div.currency) {display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end;} /* Los adornos, en su propia línea alineada a la derecha, se superponen al campo */
	fieldset div div:has(> div.multiclear) > label, fieldset div div:has(> button.btn_options_box) > label, fieldset div div:has(> button.btn_reset_img) > label, fieldset div div:has(> div.currency) > label {flex: 1 1 100%; order: 1;}
	fieldset div div:has(> div.multiclear) > input, fieldset div div:has(> button.btn_options_box) > input, fieldset div div:has(> button.btn_reset_img) > input, fieldset div div:has(> div.currency) > input {flex: 1 1 100%; order: 2;}
	fieldset div div:has(> div.multiclear) > div.imgfld, fieldset div div:has(> button.btn_reset_img) > div.imgfld {flex: 0 0 auto; max-width: 100%; margin-left: auto !important; margin-right: auto !important; order: 5;} /* En su propia línea (ver ::after), sólo tan ancha como la imagen y centrada */
	fieldset div div:has(> div.multiclear):has(> div.imgfld)::after, fieldset div div:has(> button.btn_reset_img):has(> div.imgfld)::after {content: ''; flex: 1 1 100%; height: 0; order: 4;} /* Salto de línea entre la aspa y la previsualización */
	div.multiclear, button.btn_options_box, button.btn_reset_img, div.currency, #settings_box div.currency
	{
		position: static !important; order: 3; flex: 0 0 auto; align-self: flex-start; clear: none; z-index: 1; margin: -31px 0.25em 0 0.3em !important; /* Se superpone al extremo derecho del campo (34 px de alto), con un pequeño margen */
	}
	button.btn_options_box, button.btn_reset_img {margin-top: -32px !important;}
	button.btn_options_box {order: 4; margin-right: 0.15em !important;} /* "Agrupar bajo etiqueta": el botón de opciones en el extremo derecho y la aspa a su izquierda */
	div.currency, #settings_box div.currency {width: auto; height: auto; font-size: 1.2em; margin-top: -26px !important; margin-right: 0.6em !important;}
	div.multiclear {height: auto; line-height: 1em; padding: 0.3em 0.4em; font-size: 1.3em;}
	fieldset div div:has(> div.multiclear:not(.inv)) > input.thickbox {padding-right: 2.6em;}
	fieldset div div:has(> button.btn_options_box) > input.thickbox {padding-right: 6em;}
	fieldset div div:has(> button.btn_reset_img) > input.thickbox {padding-right: 3.2em;}
	fieldset div div:has(> div.currency) > input {padding-right: 6em;}
	button.btn_infomsg, #settings_box button.btn_infomsg {position: absolute; left: auto !important; right: 0; top: -0.4em; clear: none; float: none; margin: 0;}
	fieldset div div:has(> button.btn_infomsg) > label {padding-right: 3em;}
	input.file_ctl {position: static; margin: 0.5em 0 0;}
	div.imgfld, #imgctl_m_imagen_tn, #advform_box #imgctl_imagen_tn, #customimg_box div.imgfld, div.pic_ios div.imgfld, div.pic_android div.imgfld, div.pic_qr div.imgfld
	{
		float: none; clear: both; width: fit-content !important; max-width: 100%; margin: 0.8em auto 0 !important; box-sizing: border-box; /* Sólo tan ancha como la imagen, como en escritorio, y centrada */
	}
	div.imgfld img, #imgctl_m_imagen_tn img {max-width: 100%; height: auto;}
	#customimg_box label {position: static; width: auto;}
	#customimg_box div.pictures_blk div.imgfld {display: block; max-width: 100%; overflow: hidden;}
	#customimg_box div.pic_ios img, #customimg_box div.pic_ios video, #customimg_box div.pic_android img, #customimg_box div.pic_android video {max-width: 100%; height: auto;}
	#customimg_box div.pic_qr img {width: 240px; max-width: 100%; height: auto;} /* Carta QR: tan anchas como las de la pestaña Carta Tablet (iPad: 240 px, Android: 300 px) */
	#customimg_box:has(#custom_android:not(.inv)) div.pic_qr img {width: 300px;}
	div.fieldtip {margin-left: 0; width: auto;}
	div.autotrans {margin-left: 0;}
	div.opt_blk div.chb_desc {margin-left: 0;}
	div.tagiconbox {width: auto; height: auto; display: flex; flex-wrap: wrap; justify-content: center; padding: 4px 2px;}
	div.tagiconbox .tagicon {float: none; width: 24px; height: 24px; margin: 2px 1px; background-size: contain;} /* También el primero (sin icono), que es un div */
	#multilang_blk {width: auto; margin: 0;}
	#multilang_blk div {width: auto; float: none;}
	#multilang_blk label {width: auto;}
	/* Idioma base y selector de idioma en dos columnas, con el mismo ancho y los mismos bordes que las dos columnas de filas de debajo (filas: margen 0.3em = 3.6 px a 12 px, hueco 8 px) */
	#tblelementslist_box_ml #multilang_blk {display: flex; align-items: flex-start; gap: 8px; margin: 0 3px;}
	#tblelementslist_box_ml #multilang_blk > input.blng, #tblelementslist_box_ml #multilang_blk > div {flex: 0 0 calc(50% - 4px); min-width: 0; width: auto !important; float: none; margin: 0; height: auto;} /* Base fija: con "flex: 1 1 0" el botón quedaba 10 px más ancho por su relleno y borde */
	#tblelementslist_box_ml #multilang_blk input.blng, #tblelementslist_box_ml #multilang_blk input#sel_idioma {padding-left: 5px;} /* Mismo relleno en los dos (el botón tenía 0.3em y el selector 0.5em) */
	#pricehdr_blk {float: none; width: auto; height: auto;}

	/* Botones de acción: centrados y en fila cuando caben */
	fieldset div button, div button {margin: 1.4em auto 0;}
	div.fb_blk {width: auto; height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8em; padding: 0.6em 0 0;}
	div.fb_blk button {float: none; margin: 0;}
	#listbtn_blk, #listbtntrad_blk, #ctlist_box #listbtn_blk, #tablelist_box #listbtn_blk, #listbtn_blk_sgl
	{
		float: none; clear: both; width: auto; height: auto; margin: 1em -0.6em 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6em 0.4em; /* Margen negativo: recupera el relleno lateral para que quepan dos botones de 166 px en 384 px */
	}
	#listbtn_blk button, #listbtntrad_blk button, #ctlist_box #listbtn_blk button, #tablelist_box #listbtn_blk button {float: none; clear: none; margin: 0 !important;}
	#listbtn_blk button.inv {display: none !important;}

	/* ---------- Listas ---------- */
	#list_blk, #ctlist_box #list_blk, #stocklist_box #list_blk, #stockreportlist_box #list_blk, #tablelist_box #list_blk {height: auto; margin-top: 1em;}
	ul.list {width: auto !important; float: none; margin-right: 0;}
	#list_blk ul.list, #ctlist_box #list_blk ul.list, #stocklist_box ul.list, #stockreportlist_box ul.list, #tablelist_box #list_blk ul.list, #listgen_box #list_blk ul.list {height: 52vh; max-height: 52vh;}
	ul.list li, #list_blk ul.list li {width: auto !important; margin: 0 0.3em 0.5em; box-sizing: border-box; min-height: 0; padding-bottom: 0.2em;}
	#list_blk ul.list li, #msg_importlist li {height: 3.35em; font-size: 12px;} /* Texto algo menor y altura ajustada a la miniatura, sin hueco debajo */
	ul.list li {-webkit-touch-callout: none; -webkit-user-select: none; user-select: none;} /* La pulsación larga no debe iniciar la selección de texto ni el menú contextual (cancelarían el toque en Android) */
	#list_blk #ajax_load_list, #msg_delmultilist #ajax_load, #msg_importlist #ajax_load_imp {width: auto !important; margin-left: 0.3em; margin-right: 0.3em; padding: 0; background-position: center top;} /* Icono de carga centrado (la fila ocupa todo el ancho) */
	#list_blk.singleht ul.list li, #ctlist_box ul.list li, #tablelist_box ul.list li, #tblelementslist_box ul.list li, #tblelementslist_box_ml ul.list li, .msgbox ul.list li, ul.list li.enter {height: auto;}
	ul.list li img.thumb, ul.list li div.emptythumb, ul.list li img.menuthumb, ul.list li div.emptymenuthumb {height: 2.85em; top: -0.1em;} /* La pastilla se ajusta a la miniatura, sin hueco debajo */
	ul.list li img.detailthumb {top: 0.35em;}
	.multisel_hint {display: none;} /* Sin tecla Ctrl/Cmd en el móvil: la multiselección es con pulsación larga */
	/* Edición de precios en la lista: encabezados a la derecha y campos de precio bajo los textos de cada fila */
	#pricehdr_blk {float: none; clear: both; width: auto; height: auto; display: flex; justify-content: flex-end; padding-right: 9px;} /* Anchos en px: la fila tiene otro tamaño de letra que los encabezados */
	#pricehdr_blk .pricehdr {flex: 0 0 auto; width: 62px; margin: 0.4em 0 0 4px; box-sizing: border-box;}
	#list_blk ul.list li:has(input.pricefield) {height: 5.6em;}
	#list_blk ul.list li:has(input.pricefield) span.i4 {float: none; position: absolute; left: 0.4em; right: 0.4em; bottom: 0.3em; width: auto; height: auto; margin: 0; overflow: visible;}
	span.i4 input.pricefield {display: block; float: right; width: 62px !important; min-height: 0; height: 1.6em; padding: 0.15em 0.25em; margin: 0 0 0 4px; box-sizing: border-box; text-align: right; font-size: 1em;} /* Flotando a la derecha, como en escritorio: el primer campo (coste) queda en la última columna */
	/* Casillas de verificación: texto a la izquierda, casilla a la derecha, en una sola línea */
	fieldset div div:has(> button.chkbox) {display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 0.6em; height: auto;}
	fieldset div div:has(> button.chkbox) > label {flex: 1 1 0; min-width: 0; padding: 0; margin: 0; order: 1; line-height: 1.25; align-self: center;}
	fieldset div div:has(> button.chkbox) > button.btn_infomsg, #settings_box fieldset div div:has(> button.chkbox) > button.btn_infomsg {position: static !important; left: auto !important; right: auto !important; top: auto !important; order: 2; margin: 0; flex: 0 0 auto;}
	fieldset div div:has(> button.chkbox) > button.chkbox {order: 3; flex: 0 0 auto; margin: 0;}
	fieldset div div:has(> button.chkbox) > div.chb_desc {flex: 1 1 100%; order: 4; margin: 0;}
	#listoptions_blk label br {display: none;}
	#listoptions_blk div {margin-bottom: 0.8em;}
	#tblelementslist_box_ml #list_blk ul.list li {float: left; width: calc(50% - 0.6em) !important; min-height: 2.2em; overflow: hidden;} /* Cada entrada y su traducción, en dos columnas como en escritorio */
	#list_blk ul.list + ul.list {margin-top: 1.5em; border-top: 1px solid #a15f79; padding-top: 0.8em;}
	span.i1, span.i3 {width: 42%;}
	span.i2, span.i4 {width: 48%; margin-right: 0.2em;}
	ul.list li img.thumb, ul.list li div.emptythumb, ul.list li img.detailthumb {left: 0.2em;}
	span.p1, span.p2 {position: static; float: right; clear: right; margin: 0.15em 0 0 0.4em;}
	span.p1 input, span.p2 input {display: inline-block; width: 6.2em !important; min-height: 0;}
	#list_blk ul.list li:has(span.p1) {min-height: 5.6em;}
	span.i0 {width: 4%;}
	#columns_blk #c1, #columns_blk #c2, #c1, #c2 {width: auto; margin: 0 0.5em;}
	/* Páginas de ordenación: las dos columnas (sin ordenar / ordenados) lado a lado, con filas de una sola línea */
	#sort_box #columns_blk {display: flex; height: auto; line-height: 1.3; margin: 0 0 0.4em;}
	#sort_box #columns_blk #c1, #sort_box #columns_blk #c2 {flex: 1 1 0; min-width: 0; float: none; width: auto; margin: 0 0.3em; text-align: center;}
	#sort_box #list_blk {display: flex; height: auto; margin-top: 0;}
	#sort_box #list_blk ul.list {flex: 1 1 0; min-width: 0; float: none; width: auto !important; margin: 0 0.3em; padding: 0;}
	#sort_box #list_blk ul.list + ul.list {margin-top: 0; border-top: 0; padding-top: 0;}
	#sort_box #list_blk ul.list li {float: none; width: auto !important; height: auto; min-height: 0; line-height: 1.35em; padding: 0.4em; margin: 0 0 0.4em; overflow: hidden;}

	/* Bloques de búsqueda y opciones que iban flotando junto a la lista */
	#listsearch_blk, #list_box #listsearch_blk {float: none; clear: both; width: auto; height: auto !important; margin: 1.2em 0 0; position: relative;}
	#listsearch_blk div {height: auto;}
	#listsearch_blk label {margin: 0.4em 0 0.3em; height: auto;}
	#listsearch_blk label #progress {margin-left: 1em;}
	#listsearch_blk #lbl_etiqueta {margin-top: 0.5em;}
	#search_info {width: auto; height: auto !important; padding: 0.6em 0 0;}
	#search_clear {position: absolute; left: auto !important; right: 0.8em !important; top: 1.9em !important; height: auto !important; line-height: 1em; padding: 0.3em 0.5em; font-size: 1.3em; z-index: 2;}
	#listsearch_blk #clr_etiqueta.multiclear {left: auto !important; right: 0.6em !important; top: auto !important; bottom: 0.5em !important;}
	div.listsearch_frm {float: none; width: auto; height: auto; margin: 1em 0 0; position: relative;}
	div.listsearch_frm fieldset {display: flex; flex-wrap: wrap; align-items: center;}
	div.listsearch_frm fieldset legend {flex: 1 1 100%;}
	fieldset.simplebox .listsearch_frm fieldset input, div.listsearch_frm input {flex: 1 1 auto; width: auto !important; margin: 0.4em 0 0; padding-right: 2.4em; order: 2;}
	div.listsearch_frm button.btn_add_elem {float: none; flex: 0 0 auto; margin: 0.4em 0 0 0.6em; order: 3;} /* El [+] a la derecha del campo (en el HTML va antes) */
	fieldset.simplebox div.search_clear_frm, div.search_clear_frm {position: absolute; left: auto !important; right: 38px !important; top: auto !important; bottom: 3px !important; margin: 0; height: auto !important; line-height: 1em; padding: 0.25em 0.35em; font-size: 1.3em; z-index: 2;}
	div.ia_blk {float: none; clear: both; width: auto; height: auto; margin: 1em 0 0;}
	#listoptions_blk {float: none; clear: both; width: auto; padding: 1em 0 0;}
	#listoptions_fs {width: auto;}
	#listoptions_blk label {width: auto; margin-top: 0;}
	#listoptions_blk button {margin: 0.6em 0 0;}
	#listoptions_blk button.chkbox {margin: 0;} /* Centrada con su texto */

	/* ---------- Menús de botones grandes (categorías, configuración, menú de categoría) ---------- */
	#menu_box fieldset > div, #menu_box_2 fieldset > div, #menu_box_3 fieldset > div {display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6em 0; padding-left: 0; padding-right: 0;}
	#menu_box button, #menu_box_2 button, #menu_box_3 button {float: none; margin: 0.4em 0.4em 0 !important; width: 15em; max-width: 46%; height: 17em; background-size: auto 14em; box-sizing: border-box;}
	#menu_box button span, #menu_box_2 button span, #menu_box_3 button span {padding-top: 13.2em; font-size: 1.1em;}
	#btn_opt4, #btn_opt5, #btn_opt6, #btn_cfg5 {margin-top: 0.4em !important;}
	#food_menu #btn_opt4, #food_menu #btn_opt5 {float: none !important; margin: 0.4em 0.4em 0 !important;}
	#menu_box_2 {margin-bottom: 4em;}
	#menu_box_2 div {width: auto; margin: 1em auto;}
	#menu_box_2 fieldset > div > div {flex: 1 1 100%;}
	#list_ct {display: flex; flex-wrap: wrap; justify-content: center;}
	#list_ct li {margin: 0 0.4em 1em;}

	/* ---------- Páginas concretas ---------- */
	#listgen_info_blk, #listgen_options, #listgen_icon_blk {width: auto; height: auto;}
	#chart_blk, #chart {width: 100%; max-width: 100%; height: auto; min-height: 20em;}
	#chart img, #chart_blk img {max-width: 100%; height: auto;}
	#customimg_tabs {flex-wrap: wrap; padding: 0;}
	#customimg_tabs button {min-width: 0; flex: 1 1 auto;}
	div.pictures_blk div {height: auto;}
	#stockreport_box {margin-bottom: 2em;}
	#msg_delitem, #msg_delitemtr, #msg_addunitsitem, #msg_remunitsitem, #msg_minstockitem, #msg_addelemitem, #msg_modelemitem, #msg_remelemitem,
	#msg_addelemtritem, #msg_modelemtritem, #msg_remelemtritem, #msg_resbackupitem, #msg_delbackupitem, #msg_stocklogitem, #msg_minstockctitem {width: auto;}

	/* ---------- Ventanas emergentes ---------- */
	.msgbox, .selbox, .optbox, #msg_infobox, #msg_import, .msgbox-wide, .msgbox-narrow, #msg_sav,
	#msg_exit, #msg_del, #msg_deltr, #msg_delmulti, #msg_versionupd, #msg_addunits, #msg_remunits, #msg_minstock, #msg_autr, #msg_remelemtr, #msg_remstocklog,
	#msg_notr, #msg_auer, #msg_aunf, #msg_usrex, #msg_minstockct
	{
		width: calc(100vw - 2em) !important; max-width: calc(100vw - 2em) !important; min-width: 0 !important; padding: 12px; box-sizing: border-box;
	}
	#msg_importlist, #msg_delmultilist, #msg_remelemlist, #msg_minstockctoptlist, #msg_remunitsoptlist, #txt_impsearch {width: auto !important; margin-left: 0; margin-right: 0;}
	#msg_importlist li, #msg_remelemlist li, #msg_minstockctoptlist li, #msg_delmultilist li {width: auto !important;}
	#msg_remelemnotice, #msg_minstockctnotice {height: auto;} /* El aviso ocupa más líneas en pantallas estrechas: con altura fija quedaba tapado por los botones */
	.msgbox ul.list {height: 40vh;}
	.msgbox ul.list li {width: auto !important; margin-left: 0.3em; margin-right: 0.3em;}
	li[id^="item_m_caracteristica"], li[id^="item_m_alergeno"], div.feat li, div.allg li, li[id$='_selthis'], li[id$='_addnew'], li[id$='_notf'] {width: auto !important;}
	div.progress_blk, #progress_bar, div.progress_spinner {width: 100%; max-width: 360px;}
	.mfp-iframe-holder .mfp-content {width: 100% !important; height: 95% !important;}
	.mfp-iframe {min-width: 0; border-radius: 0;}
	iframe {width: 100%;}

	/* ---------- Botones fijos (sobre una franja traslúcida, para que se vean y respondan sobre cualquier contenido) y pie ---------- */
	#btn_back {left: 1em;}
	#btn_logout {right: 1em;}
	#btn_trans, #btn_print, #btn_ai, #btn_pdf {left: 5.6em;}
	#btn_csv {left: 10.2em;}
	#btn_minstockpage {left: 14.8em;}
	#btn_openedstockpage {left: 19.4em;}
	#footer {margin-top: 3em; padding-bottom: 8em;}
}

/* ============================================================== Pantallas muy estrechas (hasta 380 px) ============================================================== */
@media (max-width: 380px)
{
	#menu_box button, #menu_box_2 button, #menu_box_3 button {max-width: 100%;}
	#logo_teadm {width: 6em;}
	#businesslogo img {max-width: 9em; height: 5.6em !important;}
}