/* TABLETS */
@media all and (max-width: 959px) and (min-width: 480px) {
	.DivContenidoTotal {
		max-width:95%;
	}
	.PagRegistro {
		margin:0 auto;
		max-width:85%;
	}
	.DivTitulosTblDatos div, .DivItemsTblDatos div {
		width:28%;
		padding:10px 0px;
	}
	.DivTitulosTblDatos div:first-child, .DivItemsTblDatos div:first-child {
		width:36%;
	}
	.DivTitulosTblDatos div:nth-child(3), .DivItemsTblDatos div:nth-child(3) {
		width:20%;
	}
	.DivTitsAgregarProds div:first-child, .DivAgregarProductos div:first-child {
		width:45%;
	}
	.DivTitsAgregarProds div:nth-child(2), .DivAgregarProductos div:nth-child(2) {
		width:43%;
		padding:0;
	}
	.DivItemCarro div:first-child {
		width:25%;
	}
	.DivItemCarro div:last-child {
		width:30%;
		padding:0;
		text-align:center;
	}
	.AnclaCatalogo {
		left:301px !important;
	}
	#SectionCatalogo .AnclaCarro {
		left:336px !important;
	}
	input[type=checkbox] {
		border: 0px;
		/* IMPORTANTE: Cuando el siguiente width lo puse en 100% dio problemas la función eliminarProducto. No sé por qué, porque no tiene nada que ver, ni está relacionada aparentemente de ninguna forma. Pero inexplicablemente es así. Lo probé y comprobé varias veces y, luego de mucha búsqueda, comprobé que ésta es la fuente el problema. Repito, sorprendentemente, porque en apariencia no tienen nada que ver, ni hay razón alguna para que se afecta dicha función. */
		width: 80%;
		height:20px;
	}
	.DivMostrarOcultarCsna {
		left:235px;
	}
	.ContenedorSubir {
		top:30%;
		left:87%;
	}
	.DivIdea p {
		font-size:10px !important /* DEI */;
	}
	/* Css para la lupa del buscador */
	.DivBuscador img {
		top:30%;
		left:90%;
		width:7%;
	}
	.menu-toggle, .menu-toggle-open {
		//left:342px;
	}
	.DivSectionOpciones {
		width:80%;
	}
	.LabCatUsuAsg {
		left:203px !important /* DEI */;
	}
	/* En móviles hacemos que estos botones tengan un ancho mínimo del 60%, para que se vean siempre uno encima del otro, con el fin de poder ponerle al segundo el margin-top necesario, porque de lo contrario, si el contenido es corto, aparecerá un botón al lado del otro, y el margin-top afectará a los dos, y sólo se verá bien cuando el contenido sea largo y el segundo se ubique debajo del primero */
	.DivBotonesTitMenuSel button {
		margin: 0 auto !important /* DEI */;
		min-width:60%;
	}
	.DivBotonesTitMenuSel button:nth(1) {
		margin: 0 auto 10px !important /* DEI */;
		min-width:60%;
	}
	.DivBotonesTitMenuSel .BotonNomAsgUsu {
		margin-right:0px;
	}
	.DivBotonesTitMenuSel .BotonBorrarAsg {
		margin-top:15px;
		margin-left:0px;
	}
	.DivIconoCerrar {
		left:285px;
	}
	.calendar, .calendar table {
		top:10px;
		left:32px !important /* DEI */;
		z-index:30;
	}
	.calendar td{
		padding:20px;
		font-size:20px !important /* DEI */;
	}
	.PagAltaProducto .DivFormProdNuevo {
		width:90%;
	}
/*	.DivGrabarMas {
		margin:0 auto;
		width:100%;
	}*/
	.DivGrabarMas button {
		min-width:30%;
	}

	/*/////////////////////////////////////////////////////////////////////////
	
	ESTILOS PARA ELEMENTOS DE LISTAS ESPECIALES (LAS DIFERENTES A LA PREDETERMINADA) */
	
	.PagAltaUsuario .DivLstsEspeciales {
		display:block;
		width:90%;
	}
	.PagAltaUsuario .DivLstsEspeciales .DivItemSelLista {
		width:95%;
		padding:5px 0px;
	}
	.PagAltaUsuario .DivItemSelLista input[type="checkbox"] {
		margin-right:0px !important /*DEI*/;
	}
	.PagAltaUsuario .DivItemSelLista .DivCheck {
		width:15%;
		float:right;
		margin-top:-2px;
	}
	
	/* FIN ESTILOS ELEMENTOS DE LISTAS ESPECIALES (LAS DIFERENTES A LA PREDETERMINADA)
	
	////////////////////////////////////////////////////////////////////////// */


/*/////////////////////////////////////////////////////////////////////////

ESTILOS PARA LOS ELEMENTOS RadiosInline, ES DECIR, DONDE HAY VARIOS RADIOBUTTONS EN LÍNEA CON UN TEXTO */

	.DivChecksInline {
		width:50% !important;  /*DEI*/
	}

/* FIN DE ESTILOS PARA LOS ELEMENTOS RadiosInline, ES DECIR, DONDE HAY VARIOS RADIOBUTTONS EN LÍNEA CON UN TEXTO

////////////////////////////////////////////////////////////////////////// */

	.ArticleCheckUnicoInline {
		width:100%;
	}
	.ArticleCheckUnicoInline > p {
		width:100%;
	}

/*/////////////////////////////////////////////////////////////////////////

ESTILOS PARA LOS ELEMENTOS AVISO DE SESSION */

	.AvisoSessionVerde {
		padding:0;
		font-size: 20px;
	}
	
	.AvisoSessionNaranja {
		padding:2px 3px;
		font-size: 22px;
	}
	
	.AvisoSessionRojo {
		padding:5px 10px;
		font-size: 24px;
	}
	
	.AvisoParpadeante {
		padding:7px 12px;
		font-size: 12px;
	}

/* FIN DE ESTILOS PARA LOS ELEMENTOS XXXXXXXXXXXX

////////////////////////////////////////////////////////////////////////// */


/*/////////////////////////////////////////////////////////////////////////

ESTILOS PARA LOS ELEMENTOS PARA LA PÁGINA CATEGORÍAS */

	.PagCategorias .ListaDrag li {
		padding-left:25px;
	}
	.PagCategorias li::before {
		left:-12px;
	}
	.PagCategorias .DivCabecera {
		padding-bottom:10px;
	}

/* FIN DE ESTILOS PARA LOS ELEMENTOS PARA LA PÁGINA CATEGORÍAS

////////////////////////////////////////////////////////////////////////// */

	.Txt1EnviarAlCarro {
		display:none;
	}
	.Txt2EnviarAlCarro {
		display:block;
	}
	#SectionLista .DivSelChecks p,
	#SectionCarro .DivSelChecks p {
		font-size:var(--txt-3);
	}
	.DivCategorias {
		margin:0 auto;
		padding: 0 10%;
		width:90%;
	}
	.PagCategorias li {
		padding-left:35px !important /*DEI*/;
		text-indent:-20px;
	}
	.ButtonProducto span {
		width:180px;
	}
	.DivTextInfo {
		top:30px;
		left:-60px;
		
		width:250px !important;  /*DEI*/
		padding:5px 10px !important;  /*DEI*/
	}
	.material-icons {
		font-size: 20px;
		width:20px;
	}
}

/* MÓVILES */
@media all and (max-width: 479px) and (min-width: 320px) {
	.DivContenidoTotal {
		max-width:98%;
	}
	.PagRegistro {
		margin:0 auto;
		max-width:85%;
	}
	.DivTitulosTblDatos {
		padding:0px !important;
	}
	.DivTitulosTblDatos div, .DivItemsTblDatos div {
		width:28%;
	}
	.DivTitulosTblDatos div:first-child, .DivItemsTblDatos div:first-child {
		width:36%;
	}
	.DivTitulosTblDatos div:nth-child(3), .DivItemsTblDatos div:nth-child(3) {
		width:20%;
	}
	.DivTitsAgregarProds div:first-child, .DivAgregarProductos div:first-child {
		width:45%;
	}
	.DivTitsAgregarProds div:nth-child(2), .DivAgregarProductos div:nth-child(2) {
		width:43%;
		padding:0;
	}
	.DivItemCarro div:first-child {
		width:25%;
	}
	.DivItemCarro div:last-child {
		width:30%;
		padding:0;
		text-align:center;
	}
	.AnclaCatalogo {
		left:331px !important;
	}
	#SectionCatalogo .AnclaCarro {
		left:336px !important;
	}
	input[type=checkbox] {
		border: 0px;
		/* IMPORTANTE: Cuando el siguiente width lo puse en 100% dio problemas la función eliminarProducto. No sé por qué, porque no tiene nada que ver, ni está relacionada aparentemente de ninguna forma. Pero inexplicablemente es así. Lo probé y comprobé varias veces y, luego de mucha búsqueda, comprobé que ésta es la fuente el problema. Repito, sorprendentemente, porque en apariencia no tienen nada que ver, ni hay razón alguna para que se afecta dicha función. */
		width: 15%;
		height:20px;
	}
	.DivMostrarOcultarCsna {
		left:235px;
	}
	.ContenedorSubir {
		top:30%;
		left:87%;
	}
	.DivIdea p {
		font-size:10px !important /* DEI */;
	}
	/* Css para la lupa del buscador */
	.DivBuscador img {
		top:30%;
		left:90%;
		width:7%;
	}
	#SectionLista .menu-toggle, #SectionLista .menu-toggle-open {
		//left:342px;
	}
	#SectionOpciones .menu-toggle,
	#SectionOpciones .menu-toggle-open {
		//left:277px;
	}
	.DivSectionOpciones {
		width:85%;
		padding: 0 3%;
	}
	.LabCatUsuAsg {
		left:203px !important /* DEI */;
	}
	/* En móviles hacemos que estos botones tengan un ancho mínimo del 60%, para que se vean siempre uno encima del otro, con el fin de poder ponerle al segundo el margin-top necesario, porque de lo contrario, si el contenido es corto, aparecerá un botón al lado del otro, y el margin-top afectará a los dos, y sólo se verá bien cuando el contenido sea largo y el segundo se ubique debajo del primero */
	.DivBotonesTitMenuSel button {
		margin: 0 auto !important /* DEI */;
		min-width:60%;
	}
	.DivBotonesTitMenuSel button:nth-child(1) {
		margin: 0 auto 10px !important /* DEI */;
		min-width:60%;
	}
	.DivBotonesTitMenuSel .BotonNomAsgUsu {
		margin-right:0px;
	}
	.DivBotonesTitMenuSel .BotonBorrarAsg {
		margin-top:15px;
		margin-left:0px;
	}
	.DivIconoCerrar {
		left:285px;
	}
	.calendar, .calendar table {
		top:10px;
		left:32px !important /* DEI */;
		z-index:30;
	}
	.calendar td{
		padding:20px;
		font-size:20px !important /* DEI */;
	}
	.PagAltaProducto .DivFormProdNuevo {
		width:90%;
	}
/*	.DivGrabarMas {
		margin:0 auto;
		width:100%;
	}*/
	.DivGrabarMas button {
		min-width:30%;
	}

	/*/////////////////////////////////////////////////////////////////////////
	
	ESTILOS PARA ELEMENTOS DE LISTAS ESPECIALES (LAS DIFERENTES A LA PREDETERMINADA) */
	
	.PagAltaUsuario .DivLstsEspeciales {
		display:block;
		width:90%;
	}
	.PagAltaUsuario .DivLstsEspeciales .DivItemSelLista {
		width:95%;
		padding:5px 0px;
	}
	.PagAltaUsuario .DivItemSelLista input[type="checkbox"] {
		margin-right:0px !important /*DEI*/;
	}
	.PagAltaUsuario .DivItemSelLista .DivCheck {
		width:15%;
		float:right;
		margin-top:-2px;
	}
	
	/* FIN ESTILOS ELEMENTOS DE LISTAS ESPECIALES (LAS DIFERENTES A LA PREDETERMINADA)
	
	////////////////////////////////////////////////////////////////////////// */


/*/////////////////////////////////////////////////////////////////////////

ESTILOS PARA LOS ELEMENTOS RadiosInline, ES DECIR, DONDE HAY VARIOS RADIOBUTTONS EN LÍNEA CON UN TEXTO */

	.DivChecksInline {
		width:50% !important;  /*DEI*/
	}

/* FIN DE ESTILOS PARA LOS ELEMENTOS RadiosInline, ES DECIR, DONDE HAY VARIOS RADIOBUTTONS EN LÍNEA CON UN TEXTO

////////////////////////////////////////////////////////////////////////// */

	.ArticleCheckUnicoInline {
		width:100%;
	}
	.ArticleCheckUnicoInline > p {
		width:100%;
	}

/*/////////////////////////////////////////////////////////////////////////

ESTILOS PARA LOS ELEMENTOS AVISO DE SESSION */

	.AvisoSessionVerde {
		padding:0;
		font-size: 20px;
	}
	
	.AvisoSessionNaranja {
		padding:2px 3px;
		font-size: 22px;
	}
	
	.AvisoSessionRojo {
		padding:5px 10px;
		font-size: 24px;
	}
	
	.AvisoParpadeante {
		padding:7px 12px;
		font-size: 12px;
	}

/* FIN DE ESTILOS PARA LOS ELEMENTOS XXXXXXXXXXXX

////////////////////////////////////////////////////////////////////////// */


/*/////////////////////////////////////////////////////////////////////////

ESTILOS PARA LOS ELEMENTOS PARA LA PÁGINA CATEGORÍAS */

	.PagCategorias .ListaDrag li {
		padding-left:25px;
	}
	.PagCategorias li::before {
		left:-12px;
	}
	.PagCategorias .DivCabecera {
		padding-bottom:10px;
	}

/* FIN DE ESTILOS PARA LOS ELEMENTOS PARA LA PÁGINA CATEGORÍAS

////////////////////////////////////////////////////////////////////////// */

	.TxtOrdenador {
		display:none;
	}
	.TxtMovil {
		display:block;
	}
	#SectionCarro .DivCantidad {
		grid-area: 1 / 50 / 2 / 71;
	}
	#SectionCarro .DivDevolverALista {
		grid-area: 1 / 71 / 2 / 101;
	}
	#SectionLista .DivSelChecks p,
	#SectionCarro .DivSelChecks p {
		font-size:var(--txt-3);
	}
	.DivCategorias {
		margin:0 auto;
		padding: 0 10%;
		width:90%;
	}
	.PagCategorias li {
		padding-left:35px !important /*DEI*/;
		text-indent:-20px;
	}
	#SectionCatalogo .ButtonProducto span {
		width:180px;
	}
	#SectionLista .ButtonProducto span {
		width:100px;
	}
	.DivInfo {
		display:block;
		padding-left:30px !important;  /*DEI*/
	}
	.DivItemInfo {
		display:block;
	}
	.DivTextInfo {
		width:250px !important;  /*DEI*/
		padding:10px 10px !important;  /*DEI*/
	}
	.DivTextInfo p {
		font-size:var(--txt-1);
		font-weight:400;
		color:black;
		text-transform:none;
		padding-left:10px !important;
		padding-right:10px !important;
	}
	.material-icons {
		font-size: 20px;
		width:20px;
	}
	.DivFijoRestantes .DivIcono {
		top:26px;
	}
	#PagCategorias .DivSubtituloCabecera .DivTextSubtitulo {
		width:68% !important; /*DEI*/
	}
	.DivFechaCompra {
		width:70%;
		padding:3px 3px;
		font-size:11px;
	}
	i[class*="IconoVer"] {
		bottom:30px;
	}
	#DivAutoComp p {
		padding:0.9rem 1rem !important /*DEI*/;
	}
	.DivSectionErroresUsuario {
		width:80%;
	}
	.DivPagUsuarioCuenta {
		max-width:95% !important /*DEI*/;
	}
	.DivPagUsuarioCuenta button {
		line-height:17px !important /*DEI*/;
	}
	.DivPagUsuarioCuenta .DivDatosUsuario {
		width:82%;
	}
	.DivSectionOpciones,
	.DivSectionErroresUsuario,
	.DivSectionUsuario {
		left: 15%;
		width:70%;
		
		/* centramos horizontalmente */
		-webkit-transform: translate(-0%);
		-moz-transform: translate(-0%);
		-ms-transform: translate(-0%);
		-o-transform: translate(-0%);
		transform: translate(-0%);
	}
	div[class^="DivAceptar"] .DivSectionUsuario {
		width:95%;
		left:2.5%;
	}
	.DivPagManual {
		max-width:98%;
		width:98%;
	}
	.Acordeon {
		max-width:100%;
		width:100%;
	}
	.TdPubli {
		display:none;
	}


/*/////////////////////////////////////////////////////////////////////////

ESTILOS PARA LOS ELEMENTOS DEL LOCUTORIO GORRITI */

	.PositionSticky {
		margin-top:-30px !important;
	}
	#Div2, #Div3, #Div5 {
		font-size:18px;
	}
	.DivBandera img {
		width:80%;
		height:100%;
	}

	@keyframes revolve {
		0% {
			--angle: 0deg;
			--z: 0;
			transform: scale(0.5);
		}
		25% {
			--angle: 90deg;
			--z: -1;
			transform: scale(0.25);
		}
		50% {
			--angle: 176deg;
			--z: -1;
			transform: scale(0.45);
		}
		55% {
			--angle: 180deg;
			--z: 5;
			transform: scale(0.5); /* Luna mediana cuando está en el extremo izquierdo */
		}
		75% {
			--angle: 270deg;
			--z: 10;
			transform: scale(0.75);
		}
		100% {
			--angle: 360deg;
			--z: 0;
			transform: scale(0.5);
		}
	}

	.planet {
		grid-area: 1 / 1;
		width:60%;
		padding: 10px;
		text-align: center;
		transform: none; /* Asegúrate de no tener transformaciones que lo desplacen */
	}	

	.planet img {
		width: 50px;
		width: 100%;
	}

	div[class*='moon'] img {
		width: 50px;
		width: 20%;
	}	

  .moon, .moon2, .moon3, .moon4, .moon5,
  .moon6, .moon7, .moon8, .moon9, .moon10,
  .moon11, .moon12, .moon13, .moon14, .moon15,
  .moon16, .moon17, .moon18, .moon19, .moon20 {
    --x-amplitude: calc(600px * 0.25); /* Reduce al 70% del valor original */
    --y-amplitude: calc(140px * 0.25); /* Reduce al 70% del valor original */
		translate: calc(var(--x) + 80px) var(--y); /* Desplazamos 200px a la derecha */
  }


/* FIN DE ESTILOS PARA LOS ELEMENTOS XXXXXXXXXXXX

////////////////////////////////////////////////////////////////////////// */



}