/* ============================================================
   RESPONSIVE - NI Servicios Industriales
   Archivo SOLO para pantallas chicas (tablet vertical y menores).
   Regla de oro: TODAS las reglas de este archivo viven dentro de
   @media (max-width: 768px) o (max-width: 480px), por lo que en
   pantallas >= 769px el sitio queda EXACTAMENTE como siempre.
   La unica regla fuera de media query es ocultar el boton
   hamburguesa (que el JS crea) en escritorio.
   ============================================================ */

/* El boton hamburguesa solo existe visualmente en pantallas chicas */
.menu-toggle {
	display: none;
}

/* Direccion/email para pantalla chica (.datos-movil): en escritorio no se
   ve; adentro del @media de abajo se muestra con fondo rojo sobre el login */
.datos-movil {
	display: none;
}

/* ---------- TITULO INICIO (escritorio): se ve el titulo normal, el marquee esta oculto ---------- */
/* Estilo original (como en ni.hopto.me): titulo azul (#006) con margen izquierdo */
.titulo-inicio {
	margin-left: 14px;
	color: #006;
}
.titulo-inicio .titulo-escritorio {
	display: block;
	font-size: 20px;
	font-weight: bold;
}
.titulo-inicio .titulo-movil-marquee {
	display: none;
}

@media (max-width: 768px) {

	/* ---------- ESTRUCTURA GENERAL ---------- */
	/* #bg es display:table (se ensancha con el contenido); en pantalla chica
	   debe ser ancho de viewport para que nada saque la pagina del ancho */
	#bg {
		display: block;
		width: 100%;
	}
	#shadow {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	/* Todos los hijos al mismo orden por defecto... */
	#shadow > * {
		order: 3;
	}
	/* ...y este es el orden final: header, menu (con login), contenido, pie */
	#shadow > #header    { order: 1; }
	#shadow > .newmenu   { order: 2; }
	#shadow > #footer    { order: 5; }

	/* ---------- HEADER ---------- */
	#header {
		position: relative;
		width: 100%;   /* barras a lo ancho; el logo queda a la izquierda */
		height: auto !important;
		background: #2770d7;
		text-align: left;
	}
	#header img {
		display: block;
		width: 100%;
		/* La imagen del header (cielo) debe cubrir todo el ancho disponible
		   para que no se corte y aparezca el fondo celeste a los lados en
		   pantallas intermedias o en apaisado. */
		max-width: 100% !important;
		height: auto !important;
	}
	/* Caja de direccion/tel/email: oculta por ahora en pantallas chicas */
	.datos {
		display: none !important;
	}

	/* Igual info que .datos pero en una franja roja sobre el login.
	   Esta dentro del header, y como el login queda pegado debajo de la
	   cabecera, el texto aparece justo arriba del formulario de ingreso. */
	.datos-movil {
		display: block;
		width: 100%;
		box-sizing: border-box;
		background: #d70000;
		color: #fff;
		font-family: Verdana, Geneva, sans-serif;
		font-size: 12px;
		line-height: 1.5;
		padding: 6px 10px;
		text-align: center;
	}
	.datos-movil p {
		margin: 0;
		padding: 0;
	}
	.datos-movil a:link,
	.datos-movil a:visited {
		color: #ffc800;   /* amarillo, igual que los links de .datos */
	}
	.datos-movil a:hover {
		color: #fff;
	}

	/* Boton hamburguesa (lo crea el JS dentro de #header) */
	.menu-toggle {
		display: block;
		position: absolute;
		top: 8px;
		right: 8px;
		z-index: 700;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 6px;
		background: rgba(17, 37, 61, 0.65);
		cursor: pointer;
	}
	.menu-toggle span {
		display: block;
		width: 22px;
		height: 3px;
		margin: 4px auto;
		background: #fff;
		border-radius: 2px;
	}

	/* ---------- MENU (panel) ---------- */
	.newmenu {
		position: static;
		top: auto;
		left: auto;
		width: 100%;
		height: auto;
		background: #d70000;
		display: flex;
		flex-direction: column;
	}
	/* El form de login siempre pegado al header (regla 5) */
	.newmenu > #LBaner { order: 1; }
	.newmenu > ul.dropdown { order: 2; }

	/* Sin JS el menu queda visible (fallback); con JS se colapsa */
	.newmenu.js-menu > ul.dropdown { display: none; }
	.newmenu.js-menu.menu-open > ul.dropdown { display: block; }

	ul.dropdown {
		float: none;
		width: 100%;
		position: relative;
	}
	ul.dropdown > li {
		float: none;
		display: block;
		border-top: 1px solid rgba(0, 0, 0, 0.25);
	}
	ul.dropdown > li > a {
		display: block;
		padding: 12px 14px;
		color: #fff;
		font-size: 14px;
	}
	ul.dropdown *.dir {
		background-image: none;
		padding-right: 14px;
	}
	/* Submenus (Servicios / Productos): siempre visibles dentro del panel */
	ul.dropdown ul {
		position: static;
		visibility: visible;
		width: 100%;
		background: #333;
		opacity: 1;
		filter: none;
	}
	ul.dropdown ul li a {
		display: block;
		float: none;
		width: auto;
		padding: 8px 8px 8px 26px;
		font-size: 13px;
		border: 0;
	}

	/* ---------- FORM DE LOGIN (#LBaner / #frmlog) ---------- */
	#LBaner {
		position: static;
		top: auto !important;
		left: auto;
		width: 100%;
		height: auto;
		padding: 2px 10px;
		box-sizing: border-box;
		color: #fff;
		background: #000; /* fondo negro de la franja de login (solo movil) */
	}
	#frmlog {
		padding: 0;
	}
	#frmlog table {
		width: 100%;
		border-spacing: 0;
	}
	#frmlog td {
		width: auto !important;
		padding: 0 2px !important;
	}
	#frmlog input.CajasInput {
		width: 100%;
		max-width: 160px;
		box-sizing: border-box;
		/* Inputs de Usuario/Password mas visibles en celular: mas altos y
		   con letra mas grande (16px evita ademas el zoom automatico de iOS).
		   Escritorio no se toca. */
		height: 30px;
		line-height: 28px;
		padding: 0 6px;
		font-size: 16px;
	}

	/* ---------- CONTENIDO ---------- */
	/* Nada de contenido puede ensanchar la pagina: imagenes y tablas se
	   acotan al ancho disponible (los anchos fijos de las secciones son
	   temporales hasta la adaptacion de tablas/formularios) */
	img {
		max-width: 100% !important;
		height: auto !important;
	}
	table {
		max-width: 100% !important;
	}
	#container,
	#contain-loged {
		width: 100%;
		background-image: none;
	}
	#container-shoulder,
	#container-loged {
		background-image: none;
	}
	#left-col,
	#left-loged {
		width: 100%;
		float: none;
		padding-top: 12px;
		/* En escritorio esta columna recorta (overflow:hidden). Aca el
		   contenido ancho (tablas de secciones) se alcanza deslizando
		   horizontalmente DENTRO de la columna, sin mover la pagina */
		overflow-x: auto;
		overflow-y: hidden;
	}
	#tx_bott,
	#tx_botta,
	#tx_liso,
	#tx_izq {
		float: none;
		width: auto;
		margin: 10px 0 0;
		padding: 0 10px;
	}
	#tx_bott img {
		width: 100%;
		height: auto;
	}

	/* ---------- PAGINAS SUELTAS DE SERVICIOS ---------- */
	/* servicios/mantenimiento.php, calibraciones, seguridad y valvulas traen
	   #tx_bott con ancho fijo inline (600px) y margin-left 30px: en celular se
	   van de pantalla y generan scroll horizontal. El inline le gana al CSS,
	   por eso hace falta !important. Escritorio no se toca. */
	#tx_bott {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}
	#tx_bott > table {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	#tx_bott li {
		text-align: left;
	}

	/* ---------- SLIDER DE EMPRESA (#banner-fullscreen) ---------- */
	/* En pantalla chica el slider (450x300 fijo) se colapsaba a 4px de ancho
	   porque #tx_liso no ocupaba su padre, y sus fotos quedaban en ~2px por la
	   regla global img{height:auto}. Aqui le damos ancho/alto fluidos y
	   anulamos esa regla global SOLO para estas 5 fotos. Escritorio intacto. */
	#tx_liso {
		width: 100%;
		box-sizing: border-box;
	}
	#banner-fullscreen {
		width: 100% !important;
		max-width: 450px;   /* nunca mas grande que en escritorio */
		height: auto !important;
		aspect-ratio: 450 / 300;  /* conserva la proporcion original */
		margin: 0 auto;           /* sigue centrado */
	}
	#banner-fullscreen .slide-fs img {
		/* !important para ganarle a la regla global img{} de este archivo */
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		object-fit: cover;
	}

	/* ---------- PAGINA SERVICIOS ---------- */
	/* La tabla de servicios venia fija en 532px (atributo width del PHP). La
	   tabla NO puede encoger solo con width:100%: el ancho lo termina fijando
	   el contenido de cada celda (los botones). table-layout:fixed obliga a la
	   tabla a respetar su ancho sin mirar el contenido, y con los botones al
	   100% la celda tambien encoge. Escritorio no se toca (esto vive en el
	   @media de pantalla chica). */
	#tx_botta table {
		width: 100% !important;
		max-width: 100% !important;
		table-layout: fixed !important;
	}
	#tx_botta td {
		width: auto !important;
	}
	#tx_botta .btn_servicio,
	#tx_botta .btn_banner,
	#tx_botta .btn_servicio_articulo,
	#tx_botta .btn_marca,
	#tx_botta .btn_articulo {
		width: 100% !important;
		box-sizing: border-box;
		/* el fondo PNG es un sprite de 2 estados, uniforme a lo ancho y sin
		   texto grabado: 100% 200% lo estira sin romper el hover */
		background-size: 100% 200% !important;
	}
	/* Los textos largos de los botones azules no entran en celular y quedaban
	   cortados (los <input> no parten el texto). Ahora son <button>, que si
	   envuelven: se permite 2 lineas y el boton crece en alto. Escritorio no
	   se toca (alla tienen una sola linea como siempre). */
	#tx_botta .btn_servicio,
	#tx_botta .btn_banner,
	#tx_botta .btn_servicio_articulo {
		font-size: 11px !important;
	}
	#tx_botta .btn_servicio_articulo {
		height: auto !important;
		min-height: 25px;
		white-space: normal !important;
		line-height: 1.25;
		padding: 3px 6px !important;
	}
	/* productos.php: la marca es un boton grande (530x43, 18px) y los
	   articulos van 3 por fila (172px cada uno). Aca se achican para entrar
	   en pantalla; escritorio no se toca. */
	#tx_botta .btn_marca {
		height: auto !important;
		min-height: 43px;
		font-size: 16px !important;
	}
	#tx_botta .btn_articulo {
		font-size: 10px !important;
		height: auto !important;
		min-height: 22px;
		white-space: normal !important;
		line-height: 1.2;
		padding: 3px 4px !important;
		word-break: break-word;
		overflow-wrap: anywhere;
	}
	.slider-wrapper,
	#slider {
		width: 100% !important;
	}
	#slider img {
		max-width: 100% !important;
		height: auto !important;
	}
	/* Los videos vienen guardados como <iframe width="520" height="390"> dentro
	   del campo `video` de la base (ej: Calibraciones de torquimetros). Al ser
	   ancho fijo se salen de pantalla. Aca se vuelven fluidos y mantienen la
	   proporcion 4:3 con aspect-ratio. Escritorio no se toca. */
	#tx_botta iframe {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		aspect-ratio: 520 / 390;
		display: block;
	}
	/* Los 30 <br/> + h3/p vacios del final dejaban ~490px de hueco en celular */
	#tx_botta > br,
	#tx_botta > h3,
	#tx_botta > p {
		display: none;
	}
	#tx_botta {
		padding-bottom: 8px;
	}

	/* ---------- FORMULARIO DE CV (enviarcv.php) ---------- */
	/* El form venia con #tx_botte 474px + margin-left 50, la tabla en 474 y el
	   textarea en 445 inline: todo se salia de pantalla en celular. Se pasan a
	   100% y se anula el margen. Escritorio no se toca. Tambien aplica a la
	   vista "Formulario enviado" (enviarcv_enviado.php, tabla de 450px). */
	#tx_botte {
		width: auto !important;
		max-width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box;
		overflow-x: hidden;
	}
	#tx_botte table,
	#tx_botte form table {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		/* table-layout:fixed evita que la tabla se estire por el ancho
		   minimo del contenido (ej. el textarea de Comentarios, que exige
		   ~304px). Sin esto, en 320px la caja se salia de la pantalla. */
		table-layout: fixed;
	}
	#tx_botte .tx_frm,
	#tx_botte input,
	#tx_botte textarea,
	#tx_botte select {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}
	#tx_botte textarea {
		width: 100% !important;
	}
	/* Boton Enviar CV: en celular se deja chico y centrado, igual que en
	   escritorio (su fondo PNG es una imagen de 100px; estirarlo se ve mal). */
	#tx_botte .btn_enviar {
		width: 100px !important;
		max-width: 100px !important;
		display: block;
		margin: 0 auto;
		background-size: auto !important;
	}
	#tx_botte td[colspan="2"] {
		text-align: center;
	}
	/* Los campos traen: <td>Etiqueta</td><td><input> &nbsp;(*)</td>.
	   OJO: usar display:flex en un <td> ROMPE la tabla (la etiqueta se
	   aplasta a 58px y el input se come todo el ancho). Se deja el td como
	   table-cell y se le descuenta al input el ancho del "(*)" para que
	   caiga en la misma linea. */
	#tx_botte td:has(> input.tx_frm) {
		white-space: nowrap;
	}
	#tx_botte input.tx_frm {
		width: calc(100% - 34px) !important;
		box-sizing: border-box;
	}
	/* reCAPTCHA v2: el widget mide 304px fijo y su div ocupa todo el ancho,
	   por eso quedaba pegado a la izquierda. Se vuelve inline-block para que
	   el td lo centre, y se achica un poco (scale 0.9 -> ~274px) para que
	   entre con aire tambien en pantallas de 320px. El margen inferior
	   negativo compensa el hueco que deja el escalado. */
	#tx_botte .g-recaptcha {
		display: inline-block;
		transform: scale(0.9);
		transform-origin: center top;
		margin-bottom: -8px;
	}
	#tx_botte .g-recaptcha > div {
		margin: 0 !important;
	}
	/* El margen izquierdo global de 20px de .entry_content corria todo el
	   contenido a la derecha y hacia que se corte en pantalla chica. En
	   celular se anula (da mas ancho util, no rompe nada). */
	.entry_content {
		margin-left: 0 !important;
	}
	#tx_botte .tabla,
	#tx_botte table.tabla {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* .tabla mide 95% + padding lateral sin box-sizing, por lo que se pasaba
	   unos px del ancho del padre y arrastraba el contenido. Con border-box
	   el 95% ya incluye el padding. */
	#tx_botte .tabla,
	#tx_botte td > table.tabla,
	.tabla {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	/* En celular la caja con bordes redondeados (.tabla) llegaba casi al
	   borde de la pantalla. Se deja un aire chico de 3px a cada lado para
	   que la caja se alcance a ver. Escritorio no se toca. */
	.tabla {
		width: calc(100% - 6px) !important;
		margin-left: 3px !important;
		margin-right: 3px !important;
	}
	#tx_botte table {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	#tx_botte td {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Regla 3: la imagen Inicio_02 no se ve en tablet vertical y menores */
	img[src*="Inicio_02"] {
		display: none !important;
	}
	/* Home logueado: el calendario puede desbordar -> scroll horizontal */
	#tx_loged {
		float: none;
		width: auto;
		margin: 10px;
		overflow-x: auto;
	}

	/* ---------- BARRA LATERAL ---------- */
	/* Regla 3: el menu lateral NO se ve en pantallas chicas */
	#sidebar > ul {
		display: none !important;
	}
	#sidebar {
		float: none;
		width: 100%;
		padding: 0 0 10px;
	}
	/* El banner de Calibraciones queda centrado "al medio" */
	#optinbox {
		background-image: none;
		margin: 0;
		height: auto !important;
		min-height: 0;
	}
	#optin-container {
		display: block;
		width: auto;
		padding: 0;
		background-image: none;
		height: auto !important;
		min-height: 0;
	}
	#banner-calibracion-unico {
		margin: 15px auto;
		max-width: 100%;
	}
	/* El banner solo existe en el inicio (marcado desde PHP). En las demas
	   paginas se oculta en pantalla chica; el escritorio no se toca. */
	#banner-calibracion-unico.banner-resto {
		display: none;
	}
	/* INICIO: acercar el titulo "Somos lideres..." al banner de calibraciones.
	   El hueco no era del banner: era el margen vacio de #tx_bott (su imagen
	   esta oculta en celular), los <p> vacios de .navigation y el margen de
	   arriba del banner. :has(.banner-inicio) identifica al home de verdad
	   (todas las paginas tienen body class="home blog", por eso no sirve). */
	body:has(.banner-inicio) #tx_bott { margin-top: 0; }
	body:has(.banner-inicio) .navigation { display: none; }
	body:has(.banner-inicio) #banner-calibracion-unico { margin-top: 6px; }

	/* ---------- ICONOS SOCIALES (vacio en home) ---------- */
	#socialize-icons {
		display: none !important;
	}

	/* ---------- PIE ---------- */
	#footer {
		width: 100%;
		height: auto;
		min-height: 50px;
		background-size: 100% 100%;
	}
	#copyright {
		position: static;
		left: auto;
		bottom: auto;
		width: auto;
		padding: 12px 14px 16px;
		box-sizing: border-box;
	}
	#footer td {
		width: auto !important;
	}

	/* ---------- TITULO INICIO (movil): marquee continuo con espacio ---------- */
	.titulo-inicio {
		margin-left: 14px;
		color: #006;
	}
	.titulo-inicio .titulo-escritorio {
		display: none;
	}
	.titulo-inicio .titulo-movil-marquee {
		display: block;
		width: 100%;
		overflow: hidden;
		line-height: 1.4;
		white-space: nowrap;
	}
	.titulo-inicio .titulo-movil-marquee .marquee-content {
		/* block + width:max-content: en Firefox Android el inline-block puede
		   colapsar al ancho de la pantalla y dejar los dos textos superpuestos.
		   Con block y max-content el ancho es siempre el del texto completo. */
		display: block;
		width: -webkit-max-content;
		width: -moz-max-content;
		width: max-content;
		min-width: -webkit-max-content;
		min-width: -moz-max-content;
		min-width: max-content;
		vertical-align: top;
		font-size: 22px !important;
		font-weight: bold;
		color: #006;
		white-space: nowrap;
		border: none !important;
		outline: none !important;
		will-change: transform;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-animation: titulo-marquee 40s linear infinite;
		-moz-animation: titulo-marquee 40s linear infinite;
		animation: titulo-marquee 40s linear infinite;
	}
	.titulo-inicio .titulo-movil-marquee .marquee-text {
		display: inline-block;
		padding-right: 100px; /* espacio entre la cola de un texto y el inicio del siguiente */
		white-space: nowrap;
		border: none !important;
		outline: none !important;
		vertical-align: top;
	}
	@-webkit-keyframes titulo-marquee {
		0%   { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
		100% { -webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0); }
	}
	@-moz-keyframes titulo-marquee {
		0%   { -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
		100% { -moz-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0); }
	}
	@keyframes titulo-marquee {
		0%   { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
		100% { -webkit-transform: translate3d(-50%,0,0); -moz-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0); }
	}

/* ============================================================
   PANTALLAS INTERMEDIAS / APAISADO: el header (cielo) cubre todo
   el ancho para que no se corte ni aparezca el fondo celeste.
   No afecta pantallas grandes (la imagen sigue a su ancho natural).
   ============================================================ */
@media (max-width: 900px), (orientation: landscape) {
	#header img {
		max-width: 100% !important;
		height: auto !important;
	}
}

/* ============================================================
   AJUSTES FINOS PARA CELULARES (480px y menos)
   ============================================================ */
@media (max-width: 480px) {

	#header img {
		max-width: 100% !important;
	}
	.menu-toggle {
		top: 6px;
		right: 6px;
	}
	ul.dropdown > li > a {
		padding: 11px 12px;
		font-size: 13px;
	}
	#LBaner {
		padding: 8px 8px 6px;
	}
	#frmlog input.CajasInput {
		max-width: 120px;
	}
	#copyright {
		font-size: 10px;
		padding: 10px 10px 14px;
	}
}