:root {
	
	/* TENER PRESENTE QUE EN MÓVILES NO SIEMPRE FUNCIONAN LAS VARIABLES CSS. EN ESOS CASOS ES NECESARIO PONER UN LA PSEUDOCLASE :root EXPRESAMENTE EN LAS MEDIAQUERIES GENERALES, O EN LA INDIVIDUAL DE LA RESPECTIVA PÁGINA */
	
/*	PARA LA PRÓXIMA APP, LOS COLORES MEJOR DESIGNARLO COMO: --Azul: #3E92CC; --Azul-2:  #5ea3d4; (QUE ES EL AZUL, PERO DOS PASOS MÁS CLARO) / --Azul+2: #2f7bb1; (QUE ES EL AZUL, PERO DOS PASOS MÁS OSCURO) / etc. PORQUE ASÍ SERÁ MÁS FÁCIL PARA RECORDAR LOS NOMBRES DE LAS VARIABLES, PUES YA SE SABRÁ QUE CUANDO SE QUIERA EL AZUL, SERÁ --Azul; EL AZUL UN POCO MÁS CLARO: --Azul-2, Y ASÍ INDEFINIDAMENTE. */
	
	--colorOn: #22AAA1; /* Color para cuando se toca un botón o enlace */
	--colorOn: #00cccc; /* Color para cuando se toca un botón o enlace */
	--colorOff: #00A6A6; /* Color para cuando se desactiva un botón o enlace */

	--naranja: #ff9b00;
	
	--standBy: #00A6A6; /* Color para cuando se toca un botón o enlace */
	--hover: #00cccc; /* Color para cuando se toca un botón o enlace */
	--hover: #00e0e0; /* Color para cuando se toca un botón o enlace */
	--active: #c2ffff; /* Color para cuando se toca un botón o enlace */

	--color1: #475757; /* Verde grisáceo */
	--color1A: #f4f6f6; /* Verde grisáceo claro = blanco Lista Compra */
	--color2: #DB5461; /* Rojo */
	--color3: #DDDBF1; /* Violeta claro  */
	--color3A: #b9b6e2; /* Violeta medio, para padre del DDDBF1 */
	--color4: #3BB273; /* Verde */
	--color5: #FF9B00; /* Naranja */
	--color6: #3E92CC; /* Azul */
	--color6-2: #5ea3d4; /* Azul, dos pasos más claro que el 6 */
	--color7: #7b9ac5; /* Azul claro */
	--color8: #A6EADD; /* Verde claro */
	--color9: #5DD9C1; /* Verde claro */
	--colorGrd1A: #f7965f; /* Color inicio para gradiente 1 */
	--colorGrd1B: #F35B04; /* Color final para gradiente 1 */
	
	--colorGrd2A: #5e99bd; /* Color inicio para gradiente 1 */
	--colorGrd2B: #2274A5; /* Color final para gradiente 1 */

	--colorGrd3A: #73cece; /* Color inicio para gradiente 1 */
	--colorGrd3B: #00A6A6; /* Color final para gradiente 1 */
	
	--color11: #111111;
	--color22: #222222;
	--color33: #333333;
	--color44: #444444;
	--color55: #555555;
	--color66: #666666;
	--color77: #777777;
	--color88: #888888;
	--color99: #999999;
	
	--colorA: #aaaaaa;
	--colorB: #bbbbbb;
	--colorC: #cccccc;
	--colorD: #dddddd;
	--colorE: #eeeeee;
	--colorF: #ffffff;
	
	--txt-4: 8px;
	--txt-3: 10px;
	--txt-2: 12px;
	--txt-1: 14px;
	--txt0: 16px;
	--txt1: 18px;
	--txt2: 20px;
	--txt3: 22px;
	--txt4: 24px;
	--txt5: 25px;
	--txt6: 26px;
	
	/* Color para los elementos en los que se da información al usuario */	
	--ColorInfo: #119822;
	--ColorInfoOn: #AFA2FF;
	
	--Amarillo1: #D8572A;
	--Amarillo2: #FF9B00;
	--Amarillo3: #FDCA40;
	--Amarillo4: #F3D34A;
	--Amarillo5: #F3E37C;
	--Amarillo6: #F5FDC6;
	--Amarillo7: #D8572A;
	
	--ColorLista1: #475757;
	--ColorLista2: #687575;
	--ColorLista3: #899494;
	--ColorLista4: #ABB2B2;
	--ColorLista5: #CCD1D1;
	--ColorLista6: #DDE0E0;
	--ColorLista7: #EEEFEF;
	
	--ColorUsuario: var(--color2);

	--ColorCarro1: #d17f00;
	--ColorCarro2: #ff9b00;
	--ColorCarro3: #ffad2e;
	--ColorCarro4: #ffbf5c;
	--ColorCarro5: #ffd18b;
	--ColorCarro6: #ffe3b9;
	--ColorCarro7: #fff5e7;
	
	--ColorCatalogo1: #3378a7;
	--ColorCatalogo2: #3e92cc;
	--ColorCatalogo3: #61a5d5;
	--ColorCatalogo4: #84b9de;
	--ColorCatalogo5: #a7cde7;
	--ColorCatalogo6: #cae1f1;
	--ColorCatalogo7: #edf5fa;
	
	--FilaImpar: #899494;
	--FilaPar: #abb2b2;
	
	--FilaImpar: #abb2b2;
	--FilaPar: #ccd1d1;
	
/*Formato para utilizar variables:
	var(--color-1A);
*/
}

/*Configuramos el selector para que en las dimensiones de las cajas no se tengan en cuenta los margin, padding y border*/
* {
	box-sizing: border-box;
}

body {
	/* Ponemos color de respaldo, por si el dispositivo no coge el gradient */
//	background: #475757;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:normal;

//	/* Configuramos el fondo con color degradado radial */
//	-webkit-background: radial-gradient(at 50% 50%,white,#475757);
//	-moz-background: radial-gradient(at 50% 50%,white,#475757);
//	-ms-background: radial-gradient(at 50% 50%,white,#475757);
//	-o-background: radial-gradient(at 50% 50%,white,#475757);
//	background: radial-gradient(at 50% 50%,white,#475757);
//
//	/* Y dejamos el gradiente de fondo en posición fija */
//	background-attachment: fixed;
}
.DivContenidoTotal {
	margin:0 auto;
	max-width:50%;
/* En pantallas super-anchas se descompone demasiado el diseño. Mejor medidas fijas */
	max-width:500px;
}
a {
	display:inline-block !important; /* No sé por qué tuve que poner esto para el enlace de las notificaciones en la variable TxtRuta de la SeccionLista (la etiqueta a normalmente ya es inline)  */
	font-family:"Trebuchet MS", sans-serif;
	font-size:15px;
	color:var(--color6);
	font-weight:bold;
	text-decoration:none;
}
a:hover {
	font-style:italic;
	color:var(--color6-2);
}
p {
	font-size:var(--txt-2);
	line-height:22px;
}
input {
	width:100px;
	padding:0;
}
input[type=text], input[type=password], textarea {
	cursor:text;
/*	Para evitar que los caret-color:transparent de los iconos se hereden a sus campos asociados, nos aseguramos de declarar el color de éstos */
	caret-color: black;
}
input[type="checkbox"] {
	width:15px;
	height:15px;
}
input:disabled {
	background: white;
}
hr + input {
	margin-top:30px;
}
/* Css de todos los textarea para que opere la función js redimTextareas() */
textarea {
  display:block;
  overflow:hidden;
  margin:50px auto;
}
/* Quitamos el resaltado azul al hacer foco */
input:focus,
textarea:focus {
	outline:0px;
}
Button {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	border: 1px grey solid !important;

	cursor:pointer;
}
.ButtonCorto {
	width:75%;
}
/* En principio, todo botón que vaya dentro de un div deberá ir centrado */
.DivBotones {
	text-align:center;
}
.Boton1 {
	/*background-color:#3bb273;*/
	background-color:var(--standBy);
	display:block;
	margin:20px auto;
	padding:10px 20px;
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;

	/* Redondeamos los bordes */
	border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border: 0px solid #000000;
}
.Boton2 {
	background-color:#80DED9;
	margin:0;
	padding:0 20px !important /* DEI */;
	font-size:var(--txt-2) !important /* DEI */;
	letter-spacing:1px;
	line-height:0;
	/*height:30px;*/
	min-height:30px;

	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	border: 0px solid #000000;
}
.Boton3 {
	background-color:#3E92CC !important /* DEI */;
	margin:0;
	padding:1px 20px 1px !important /* DEI */;
	font-size:var(--txt-2) !important /* DEI */;
	color:var(--color3);
	letter-spacing:1px;
	line-height:28px;
	cursor:pointer;

	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;
	border-radius: 6px !important /* DEI */;
	border: 0px solid #000000;
}
.Boton3:hover {
	border: 1px solid #1a4361;
	font-style:italic;
	font-weight:bold;
	color:white;
}
.Boton4, .Boton5 {
	background-color:#3E92CC !important /* DEI */;
	margin:0;
	padding:1px 20px 1px !important /* DEI */;
	font-size:var(--txt-2) !important /* DEI */;
	color:var(--color3);
	letter-spacing:1px;
	line-height:1px;
	cursor:pointer;
	min-height:25px;

	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;
	border-radius: 6px !important /* DEI */;
	border: 0px solid #000000;
}
.Boton5 {
	display:inline-block;
	cursor:pointer !important;
}
.Boton1:hover {
	/*background-color:#339963;*/
	background-color:var(--hover);
	border: 2px solid #297a4f !important /* DEI */;
	font-style:italic;
	font-weight:bold;
}
.Boton1:active {
	background-color:var(--active);
}

Div[class*="DivForm"] button {
	line-height:25px;
}
.Oculto {
	display:none;
}
a:active,
input:active,
button:active,
.button:active,
.DivProducto,
li:active {
	background-color:var(--colorOn);
}

/*ESTILOS PARA LOS BOTONES QUE LLEVAN FLECHAS LATERALES DE ABRIR Y CERRAR
(Se deben combinar con la función js conmutarClaseSegunDisplayOtroElem)*/
.FlechaOpen::after {
	content:url("/Img/Iconos/FlechaOpen.svg");
	position:relative;
	float:right;
	margin-left:10px;
	margin-top:5px;
	width:12px;
}
.FlechaClose::after {
	content:url("/Img/Iconos/FlechaClose.svg");
	position:relative;
	float:right;
	margin-left:10px;
	margin-top:5px;
	width:12px;
}

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

/* El estilo de los títulos (hx) debe ser lo más homogéneo posible en todo el sitio, por lo tanto, particularizar sólo las propiedades estrictamente necesarias en cada caso */

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

ESTILOS PARA LOS ELEMENTOS H */

h1,
h1 + p {
	font-size:var(--txt5);
	font-weight:bold;
	text-align:center;
	text-transform:uppercase;
	line-height:20px;
}
h2,
h2 + p:not(.pNormal) {
	font-size:var(--txt5);
	font-weight:bold;
	text-align:center;
	text-transform:uppercase;
	line-height:20px;
}
h3,
h3 + p {
	font-size:var(--txt4);
	/*font-weight:bold;*/
	text-align:center;
	text-transform:uppercase;
	line-height:20px;
}
h4,
h4 + p {
	margin:15px auto 10px;
	font-size:var(--txt3);
	font-size:var(--txt0);
	//font-weight:bold;
	text-align:center;
	text-transform:uppercase;
	line-height:20px;
}
h5:not(.Acordeon),
h5 + p:not(.Acordeon) {
	margin:7px auto 25px;
	color:var(--color3);
	color:black;
	font-size:var(--txt2);
	font-size:var(--txt-1);
	//font-weight:bold;
	text-align:center;
	text-transform:uppercase;
	text-transform:none;
	line-height:15px;
}
h6,
h6 + p {
	margin:0 !important;
	font-size:var(--txt-2);
	font-weight:bold;
	text-align:center;
	text-transform:uppercase;
	line-height:20px;
}
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
	text-transform:none;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS H

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


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

ESTILOS GENÉRICOS PARA LOS ELEMENTOS MENÚ/SELECT */

select {
	margin: 10px auto;
	width:100%;
	height:60px;
	outline: none;

	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	border: 0px solid transparent;
}
select option {
	width:80%;
	height:40px;
	padding:50px;
	font-size:17px;
}
option:nth-child(2n+1) {
	background-color:#abb2b2;
	background-color:var(--FilaImpar);
}
option:nth-child(2n+2) {
	background-color:#ccd1d1;
	background-color:var(--FilaPar);
}

/* FIN DE ESTILOS GENÉRICOS PARA LOS ELEMENTOS MENÚ/SELECT

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


.DivCamposForm {
	margin:10% auto 0;
	margin:0% auto 0;
	width:80%;
}
Div[class*="DivCampos"] p:nth-child(1) {
	text-align:center;
}
Div[class*="DivCampos"] .DivDatosUsuario {
	margin-bottom:30px;
	text-align:center;
}
Div[class*="DivCampos"] .DivDatosUsuario p {
	text-align:center;
}
.DivPagSugerencias Div[class*="DivCampos"] {
	margin:7% auto;
}
input[type="date"],
Div[class*="Pag"] input[type="text"],
Div[class*="Pag"] input[type="password"],
Div[class*="Pag"] textarea,
Div[class*="DivPag"] input[type="text"],
Div[class*="DivPag"] input[type="password"],
.PagRegistro input[type="text"],
.PagRegistro input[type="password"],
Div[class*="PagAlta"] input[type="text"],
Div[class*="PagAlta"] input[type="password"],
Div[class*="PagAlta"] textarea,
Div[class*="PagAlta"] select {
	display:block;
	margin:0 auto;
	width:100%;
	height:45px;
	padding:14px 20px 0px;
	border:0;

	/* Redondeamos los bordes */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
}
Div[class*="PagAlta"] select {
	margin: 10px auto;
	width:100%;
	height:60px;

	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	border: 0px solid #000000;
}
Div[class*="PagAlta"] select option {
	font-size:16px;
}
Div[class*="PagAlta"] select option:nth-child(2n+1) {
	background-color:#abb2b2;
	background-color:var(--FilaImpar);
}
Div[class*="PagAlta"] select option:nth-child(2n+2) {
	background-color:#ccd1d1;
	background-color:var(--FilaPar);
}

.DivPagLista input[type="text"],
.DivPagCuenta input[type="text"] {
	margin:0 !important;
	height:35px;
	padding:0px 7px;
	font-size: 14px;
}
.DivTitulosTblDatos div, .DivItemsTblDatos div {
	display:inline-block;
	text-align:center;
}
/*h2 {
	width:100%;
	margin:0 auto;
	padding:10px;
	font-size:18px;
	text-transform:uppercase;
	text-align:center;
}
h3 {
	width:100%;
	margin:0 auto;
	padding:0px;
	font-size:14px;
	text-align:center;
}*/
h1 {
	width:100%;
	margin:0 auto;
	padding:10px;
	font-size:16px;
	font-size:var(--txt0);
	text-transform:uppercase;
	text-align:center;
}
h2 {
	width:100%;
	margin:0 auto;
	padding:0px;
	font-size:14px;
	font-size:var(--txt-1);
	text-align:center;
}
h3 {
	width:100%;
	margin:30px auto 0;
	padding:0px;
	font-size:14px;
	font-size:var(--txt-1);
	color:var(--color1);
	text-align:center;
}
/*div[class*="DivPagPol"] h3 + p,
div[class*="DivPagPol"] p,
div[class*="DivPagConContratacion"] h3 + p,
div[class*="DivPagConContratacion"] p {
	font-size:var(--txt-2);
	font-weight:500;
	color:black;
	text-align:left;
	text-transform:none;
	line-height:16px;
}
*/
.DocLegal h3 + p,
.DocLegal p {
	font-size:var(--txt-2);
	font-weight:500;
	color:black;
	text-align:left;
	text-transform:none;
	line-height:16px;
}
.DocLegal h4 {
	width:100%;
	margin:30px auto 0;
	padding:0px;
	font-size:12px;
	font-size:var(--txt-2);
	color:var(--color1);
	text-align:left;
}
.DocLegal h5:not(.Acordeon) {
	width:100%;
	margin:20px 0 0 30px;
	padding:0 0 0 0px;
	font-size:10px;
	font-size:var(--txt-2);
	font-style:italic;
	font-weight:bold;
	color:var(--color1);
	text-align:left;
	text-decoration:underline;
	text-transform:none;
}
/*h5,
h5 + p {
	margin:7px auto 25px;
	color:var(--color3);
	color:black;
	font-size:var(--txt2);
	font-size:var(--txt-1);
	//font-weight:bold;
	text-align:center;
	text-transform:uppercase;
	text-transform:none;
	line-height:15px;
}*/

.DocLegal h5 + p:not(.Acordeon),
.DocLegal p.pSangria1 {
	margin:10px 0 0 30px;
	font-size:var(--txt-2);
	text-align:left;
}
.DivTitProducto {
	text-align:left !important;
}
.DivProducto {
	padding-left:10px !important;
	text-align:left !important;
}
.DivAgregarProductos {
	padding:0 !important;
}
.DivCantidad input {
	text-align:center !important;
}
.DivTitulosTblDatos {
	background-color:#FDCA40;
	background-color:var(--ColorLista2);
	margin-top:0px;
	padding:0px 0px;
	font-size:12px;
	font-weight:bold;
	color:var(--ColorLista7);
	text-align:center;
	text-transform:uppercase;
}
#SectionLista .DivTitulosTblDatos,
#SectionCarro .DivTitulosTblDatos {
	border-top: 2px var(--ColorLista6) solid;
			
	-webkit-position: sticky;
	-moz-position: sticky;
	-ms-position: sticky;
	-o-position: sticky;
	position: sticky;
	top: 73px;
	top: 85px;
	z-index: 12;
}

.DivTitsAgregarProds {
	background-color:var(--ColorCatalogo2);
}
.DivTitsAgregarProds div {
	width:29%;
}
.DivAgregarProductos div:first-child {
	width:55%;
}
.DivAgregarProductos div:nth-child(2) {
	width:30%;
}
.DivItemsTblDatos .DivProducto, 
.DivItemCarro .DivProducto,
.DivAgregarProductos .DivProducto {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
	
	background-color:var(--ColorLista4);
	margin:5px 0;
	margin-left:10px;
	cursor:pointer;
	z-index: 20;
}
#SectionLista .ButtonProducto span {
	display:table-cell;
	width:145px;
}
#SectionCatalogo .ButtonProducto span {
	display:table-cell;
	width:245px;
}
.DivItemCarro .DivProducto {
	background-color:var(--ColorCarro4);
}
.SectionLstProductos .DivProducto {
	background-color:var(--ColorCatalogo4);
}
#SectionCatalogo .DivAgregarProductos:nth-child(2n+1) {
	background-color:var(--ColorCatalogo5);
}
#SectionCatalogo .DivAgregarProductos:nth-child(2n+2) {
	background-color:var(--ColorCatalogo6);
}
.DivAgregarProductos .DivProducto:hover {
	background-color:#6d98b6;
	color:#ffffff;
	border: white 1px solid;
}
.DivProducto:active {
	background-color:var(--colorOn) !important;
	color:#000000 !important;
}
.DivNotificaciones p {
	display:inline-block;
	margin:10px auto;
	width:100%;
	font-weight:bold;
	text-align:center;
}
.SectionBotones, .ArticleBotones {
	margin:0;
	padding:0;
}
.SectionBotones:last-child,
.ArticleBotones:last-child {
	margin:30px 0 50px;
}
#PagCategorias .SectionBotones:last-child,
#PagCategorias .ArticleBotones:last-child {
	margin:0;
	padding:0;
}
.SectionBotones button,
.ArticleBotones button {
	display:block;
	margin:20px auto;
	padding:10px 20px;
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;

	/* Redondeamos los bordes */
	-webkit-border-radius: 0.5rem;
	-moz-border-radius: 0.5rem;
	-ms-border-radius: 0.5rem;
	-o-border-radius: 0.5rem;
	border-radius: 10px;
}
.SectionBotones button:hover, .ArticleBotones button:hover {
	font-style:italic;
}
.DivFechaCompra {
	background-color:white;
	margin:0 auto;
	width:72%;
	padding:5px 5px;
	font-size:12px;
	color:var(--ColorLista1);
	font-weight:bold;
	text-align:center;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;

}
.LabelCategoria {
	background-color:var(--ColorLista3);
	display:inline-block;
	position:relative;
	margin:20px 0 0 10px;
	padding:10px;
	min-width:150px;
	width:auto;
	font-size:12px;
	font-weight:bold;
	text-transform:uppercase;
	
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
.LabCatUsuAsg {
	background-color:var(--color2);
	left:322px;
	text-align:right;
}
.SectionLstProductos .ArticleCategoria {
	background-color:var(--ColorCatalogo3);
}
.PrdsRestantes {
	background-color:#3E92CC;
}
section {
	counter-reset: producto;
}
section .DivProducto:before {
  content: counter(producto) ". ";
	counter-increment: producto; 
	font-size:12px;
	font-weight:bold;
}
#SectionCarro .DivProducto:before {
	counter-increment: producto    -1; 
}
.TbBotonLimpiar:focus {
	outline:0;
}
.TxtSubrayado {
	text-decoration:underline;
}
.TxtNegrita, .TxtNegrilla {
	font-weight:bold !important;  /*DEI*/
}
.TxtCursiva {
	font-style:italic;
}
.TxtNegritaCursiva {
	font-style:italic;
	font-weight:bold !important;  /*DEI*/
}
.TxtAzul {
	color: var(--color6);
}
.TxtMovil {
	display:none;
}
.Txt1 {
	font-size:var(--txt1);
	line-height:24px;
}
.Txt2 {
	font-size:var(--txt2);
	line-height:26px;
}
.Txt-1 {
	font-size:var(--txt-1);
	line-height:20px;
}
.Txt-2 {
	font-size:var(--txt-2);
	line-height:18px;
}
.Txt-3 {
	font-size:var(--txt-2);
	line-height:16px;
}

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

/* CSS PARA LOS AVISOS OK/ERROR */
.DivError {
	background-color:var(--ColorLista7);
	margin:0 auto;
	width:90%;
	font-size:var(--txt-2);
	color:red;
	line-height:16px;
	padding:10px;
	text-align:center;
	
	opacity:0.5;

	/* Redondeamos los bordes */
	-webkit-border-radius: 0.5rem;
	-moz-border-radius: 0.5rem;
	-ms-border-radius: 0.5rem;
	-o-border-radius: 0.5rem;
	border-radius: 10px;
	
		border: red 2px solid !important;
}
.DivAvisoOkError {
	margin:0 auto;
	padding:0;
	width:40%;
	border: white 1px solid;
}
.TituloOkError {
	vertical-align:top !important;
	background-color:var(--color1);
	height:40px;
	padding:15px 0 0 0 !important;
}
.PaginaOkError p {
	text-align:center;
}
.DivTxtError {
	padding:0 50px;
}
/* FIN DE CSS PARA LOS AVISOS OK/ERROR */

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

section {
	/* Redondeamos los bordes */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius:10px;
}
.SectionCarro, .SectionLstProductos {
	margin-top:40px;
}
.DivCabecera {
	width:100%;
	//height:75px;
	background-color:var(--ColorLista1);
	color:var(--ColorLista7);
}
.DivFijoLista,
.DivFijoCuenta,
.DivFijoCarro,
.DivFijoRestantes,
.DivCabeceraFijo {
	position:relative;
	width:100%;
	//height:75px;
	padding-bottom:10px;
	background-color:var(--ColorLista1);
	color:var(--ColorLista7);

	-webkit-position: sticky;
	-moz-position: sticky;
	-ms-position: sticky;
	-o-position: sticky;
	position: sticky;
	top: 0px;
	left:0;
	z-index:22;
}
.DivFijoCarro {
	background-color:var(--ColorCarro1);
	color:var(--ColorCarro7);
}
.DivFijoRestantes {
	background-color:var(--ColorCatalogo1);
}
Section[class*="SectionForm"],
.SectionContenido,
.SectionError {
	border: var(--ColorLista1) 2px solid;
	background-color:var(--ColorLista7);
}
.SectionCarro {
	border: var(--ColorCarro1) 2px solid;
	background-color:var(--ColorCarro7);
}
.SectionLstProductos {
	border: var(--ColorCatalogo1) 2px solid;
	background-color:var(--ColorCatalogo7);
}
.DivNotificacionesCambios {
	background-color:orange;
	margin:10px auto 5px;
	padding:5px;
	width:90%;
	text-align:center;

	-webkit-border-radius: 0.5rem;
	-moz-border-radius: 0.5rem;
	-ms-border-radius: 0.5rem;
	-o-border-radius: 0.5rem;
	border-radius: 1rem;	
}
.DivFijoLista .DivIcono,
.DivFijoCuenta .DivIcono,
.DivFijoCarro .DivIcono,
.DivFijoRestantes .DivIcono,
.DivCabeceraFijo {
	display:inline-block;
	width:30px;
	height:30px;
	cursor:pointer;
	
	background-size: 20px;
	background-position: center;
	background-repeat: no-repeat;

//	position:absolute;
/*	top:36px;
	top:0px;*/
	
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
}
#PagCategorias .DivCabecera .DivIcono {
	display:inline-block;
	width:30px;
	height:30px;
	cursor:pointer;
	
	background-size: 20px;
	background-position: center;
	background-repeat: no-repeat;

//	position:absolute;
//	top:36px;
	
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
}
.AnclaLista {
//	left:21px;
	background-image:url("/Img/Iconos/Lista.svg");
	background-color:var(--ColorLista5);
	border: var(--ColorLista1) 1px solid !important;
}
#PagCategorias .DivCabecera .AnclaLista {
	left:50%;
}
.AnclaUsuario {
	left:25px;
	background-image:url("/Img/Iconos/Usuario.svg");
	background-color:var(--ColorUsuario);
	border: var(--ColorLista7) 1px solid !important;
}
.AnclaCarro {
	left:25px;
	background-image:url("/Img/Iconos/Carro.svg");
	background-color:var(--ColorCarro1);
	border: var(--ColorLista7) 1px solid !important;
}
.AnclaCatalogo {
	left:437px;
	background-image:url("/Img/Iconos/Catalogo.svg");
	background-color:var(--ColorCatalogo1);
	border: var(--ColorLista7) 1px solid !important;
}
#SectionCatalogo .AnclaCarro {
	left:437px;
}
.DivNotificacionesCambios img {
	width:18px;
	margin-right:10px;
}

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

ESTILOS PARA LOS CAMPOS AUTOCOMPLETAR*/

/*Div sobre el que se muestran los registros bd para autocompletar en campos input, y que se aplican mediante la función js 'autoCompletar(idCampoAC)'*/
#DivAutoComp,
.DivAutoComp {
	position:relative;
	top:0.2rem; left:1rem;
	background:#aaa;
	padding:0;
	border: #4d90fe 0.1rem solid;
	text-align:left;
	z-index: 25;
	max-width:20rem;
	cursor:pointer;

	/*Configuramos la curvatura de las esquinas*/
	-ms-border-radius: 7px 7px 7px 7px;
	-webkit-border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-o-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;
}

/*Configuramos el css para los párrafos que van dentro del #DivAutoComp*/
#DivAutoComp p {margin:0 !important /*DEI*/; padding:0.3rem 1rem !important /*DEI*/;}
#DivAutoComp p:nth-child(2n+1){ background:#ddd;}
#DivAutoComp p:nth-child(2n+2){ background:#bbb;}

#DivAutoComp select option:nth-child(2n+1){ background:#ddd;}
#DivAutoComp select option:nth-child(2n+2){ background:#bbb;}

/*FIN DE ESTILOS PARA LOS CAMPOS AUTOCOMPLETAR

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

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

ESTILOS PARA LOS CAMPOS DEL BUSCADOR */

.DivBuscador {
	position:relative;
	margin:10px auto;
	width:70% !important /*DEI*/;
	text-align:center;
}
.DivBuscador input[type="text"] {
	height:40px;
	padding:0 10px;
	cursor:text;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
}
/* Insertamos css para la clase DivAnclaBuscador, elemento que se pone mediante js */
.SectionListaCesta .DivAnclaBuscador::before {
  content: "Este producto ya se ha incluido en la Lista";
  font-size:10px;
  color: red;
}
.SectionCarro .DivAnclaBuscador::before {
  content: "Este producto ya se ha incluido en el carro";
  font-size:10px;
  color: red;
}
/* Css para la lupa del buscador */
.DivBuscador img {
	position:absolute;
	top:15px;
	left:90%;
	width:6%;
}

/*FIN DE ESTILOS PARA LOS CAMPOS DEL BUSCADOR

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

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

ESTILOS PARA LOS CAMPOS CON PLACEHOLDER MOVIBLE */

.SpanPlaceholder {
	display:block;
	margin:0;
	padding-left:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:var(--colorA);
	text-align:left;
	opacity:1;
	transition: all 1s ease-out, font-size 1s ease-out;
	pointer-events: none;

	position:relative;
	top:-45px;
	left:0px;
}

input:placeholder-shown + hr + .SpanPlaceholder,
textarea:placeholder-shown + hr + .SpanPlaceholder {
	top:-25px;
	left:0px;
	font-size:14px;
	opacity:0;
}

/*FIN DE ESTILOS PARA LOS CAMPOS CON PLACEHOLDER MOVIBLE

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

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

ESTILOS PARA LOS CAMPOS DE MOSTRAR LA CONTRASEÑA */

.DivMostrarOcultarCsna {
	display:inline-block;
	width:20px;
	height:20px;
	cursor:pointer;
	vertical-align:bottom;
	
	position:relative;
	top:-50px;
	left:365px;
}
#DivMostrarOcultarCsna,
#DivMostrarOcultarCsna1,
#DivMostrarOcultarCsna2 {
	background:url("/Imagenes/Dibujos/OjoAbierto.png") no-repeat scroll right center transparent;
}

/*FIN DE ESTILOS PARA LOS CAMPOS DE MOSTRAR LA CONTRASEÑA

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

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

/* SUBIR - INICIAMOS ESTILOS PARA EL ENLACE DE SUBIR */

.ContenedorSubir {
	position:fixed;
	top:50%;
	left:75%;
	display:none;
	z-index:10;
}
.Triangulo {
	border-style: solid;
	border-width: 21px;
	border-color: black;
	width: 0;
	height: 0;
}
.Triangulo > div {
	border-style: solid;
	border-width: 10px;
	width: 0;
	height: 0;
	position:relative;
}
.Triangulo.Up {
	border-color: transparent transparent rgba(255,255,255,0.5) transparent;
}
.Triangulo.Up > div {
	border-color: transparent transparent #412307 transparent;
	top:1px;
	left:-10px;
}
.DivSubir {
	background-color:rgba(255,255,255,0.5);
	width:50px;
	height:23px;
	padding:5px 3px;
	font-size:12px;
	font-style:italic;
	font-weight:bold;
	color:var(--color1);
	text-align:center;
	text-transform:uppercase;
}

/*FIN DE ESTILOS PARA EL ENLACE DE SUBIR

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

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

ESTILOS PARA PÁGINA DE REGISTRO */

/*.SectionFormRegistro {*/
Section[class*="SectionForm"],
Section[class*="SectionContenido"] {
	/* Para centrar verticalmente en la pantalla */
	margin:7% 0;
}
.PagRegistro .SectionBotones,
.PagRegistro .ArticleBotones {
	margin-top:-20px;
}
Div[class*="DivCampos"],
.DivCamposRegistro {
	position:relative;
	margin:10% auto 0;
	width:80%;
}
input + hr,
textarea + hr {
	background-color:red;
	margin:0;
	width:0;
	height:2px;
	border:0; /* Para que no tenga borde, y sólo se vea el color del fondo */
	transition: width 1s;
}
input:focus + hr,
textarea:focus + hr {
	width:100%;
}

/*FIN DE ESTILOS PARA PÁGINA DE REGISTRO

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

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

ESTILOS PARA LOS ELEMENTOS DEL RECUADRO IDEA */

.DivIdea {
	background-color:rgba(255,255,255,0.5);
	margin:0 auto;
	width:90%;
	border: #fff61a 2px solid;

	/* Redondeamos los bordes */
	-webkit-border-radius: 0.5rem;
	-moz-border-radius: 0.5rem;
	-ms-border-radius: 0.5rem;
	-o-border-radius: 0.5rem;
	border-radius: 1rem;

}
.DivIdea img {
	display:inline-block;
	margin-left:10px;
	width:7%;
}
.SectionListaCesta .DivIdea img {
	display:inline-block;
	margin: 0 10px 15px 5px;
	width:10%;
}
.DivIdea p {
	display:inline-block;
	width:85%;
	font-size:12px;
	font-weight:400;
	color:black;
}
.DivIdea a {
	display:block;
	font-style:italic;
	color:#C3423F;
}
.DivIdea a:hover {
	font-weight:bold;
}

/*FIN DE ESTILOS PARA LOS ELEMENTOS DEL RECUADRO IDEA

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

.DivCategorias {
	margin:0 auto;
	width:70%;
}

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

ESTILOS PARA LOS ELEMENTOS DE LAS LISTAS DRAGABLES */

.ListaDrag {
	width:100%;
}
.ListaDrag li {
	width:70%;
	width:100%;
	margin:10px 30px;
	margin:10px auto;
	margin:10px 0;
  padding:10px;
  background:white;
  border:solid 1px grey;

	-webkit-border-radius: 0.5rem;
	-moz-border-radius: 0.5rem;
	-ms-border-radius: 0.5rem;
	-o-border-radius: 0.5rem;
	border-radius: 1rem;
}
/*li::before {
	content:url("/Img/Iconos/FlechasUpDown.svg");
	position:relative;
	left:300px;
	top:2px;
	width:50%;
}*/
.DivLiCat {
	position:relative;
}
.DivLiCat img {
	position:absolute;
	top:0;
	right:1rem;
	margin:0.7rem 0;
	width:3%;
}
.PagCategorias li {
	padding-left:40px;
	text-indent:-25px;
}
.PagCategorias li span {
	display:block;
	max-width:90%;
}

/*FIN DE ESTILOS PARA LOS ELEMENTOS DE LAS LISTAS DRAGABLES

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

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

ESTILOS PARA LOS ELEMENTOS DEL TEXTO INTRODUCTORIO DESPUÉS DEL TÍTULO */

.DivIntro {
	background-color:rgba(255,255,255,0.5);
	margin:30px auto;
	width:90%;
	padding:10px 20px;

	/* Redondeamos los bordes */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;

	border: white 1px solid;
}
.DivIntro p {
	line-height:20px;
	text-align:center;
}
.DivIntro2 {
	margin-top:-20px;
}
.DivIntro2 p {
	font-family:Verdana, Geneva, sans-serif;
	font-size:var(--txt-2);
	text-align:center;
	line-height:17px;
}

/*FIN DE ESTILOS PARA LOS ELEMENTOS DEL TEXTO INTRODUCTORIO DESPUÉS DEL TÍTULO

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

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

ESTILOS PARA LOS ELEMENTOS DEL MENÚ HAMBURGUESA */

/* Css del contenedor */
.menu-toggle {
	position:relative;
	width:20px;
	cursor:pointer;
	caret-color: transparent !important;
}
/* Css que crea la línea central */
.menu-toggle span {
	display:block;
	position:relative;
	margin:10px auto 0;
	background-color:var(--ColorLista7);
	width:20px;
	height:2px;
	margin-bottom:50px !important;
}
/*Con el menú abierto, no mostramos la línea central*/
.SectionOpciones .menu-toggle span,
.SectionUsuario .menu-toggle span {
	display:none;
}
/* Css que crea las líneas superior e inferior */ 
.menu-toggle span::before,
.menu-toggle span::after {
	content:'';
	display:block;
	position:absolute;
	background-color:var(--ColorLista7);
	width:20px;
	height:2px;
}
/* Css que posiciona la línea superior con respecto a la línea madre */
.menu-toggle span::before {
	bottom:5px;
}
/* Con el menú abierto, no mostramos la línea superior */
.SectionOpciones .menu-toggle span::before,
.SectionUsuario .menu-toggle span::before {
	display:none;
}
/* Css que posiciona la línea inferior con respecto a la línea madre */
.menu-toggle span::after {
	top:5px;
}
/* Con el menú abierto, no mostramos la línea inferior */
.SectionOpciones .menu-toggle span::after,
.SectionUsuario .menu-toggle span::after {
	display:none;
}
.SectionOpciones .menu-toggle,
.SectionUsuario .menu-toggle {
	position:absolute;
	top:15px;
	left:87%;
	width:20px;
	height:20px;
}
.SectionOpciones .menu-toggle-open,
.SectionUsuario .menu-toggle-open {
	display:none;
}
.DivSectionOpciones,
.DivSectionErroresUsuario,
.DivSectionUsuario {
	display:none;
	background-color:rgba(71,87,87,0.8);
	position:absolute;
	left: 50%;
	width:40%;
	z-index:25;
	border: white 2px solid;
	border: var(--color1A) 2px solid;
	
	/* centramos horizontalmente */
	-webkit-transform: translate(-50%);
	-moz-transform: translate(-50%);
	-ms-transform: translate(-50%);
	-o-transform: translate(-50%);
	transform: translate(-50%);
	
	/* Redondeamos los bordes */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius:10px;
}

.DivSectionErroresUsuario {
	position:absolute;
	top:120px;
	display:block;
	background-color:var(--color3);
	line-height:23px;
}
/* Css que crea la línea superior en estado abierto */
.DivSectionOpciones .menu-toggle::before,
.DivSectionUsuario .menu-toggle::before {
	content:'';
	display:block;
	background-color:var(--ColorLista7);
	position:absolute;
	left:0px;
	width:20px;
	height:2px;

	/* Rotamos el elemento */
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
/* Css que crea la línea inferior en estado abierto */
.DivSectionOpciones .menu-toggle::after,
.DivSectionUsuario .menu-toggle::after {
	content:'';
	display:block;
	width:20px;
	position:absolute;
	height:2px;
	background-color:var(--ColorLista7);
	left:0px;

	/* Rotamos el elemento */
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

/*FIN DE ESTILOS PARA LOS ELEMENTOS DEL MENÚ HAMBURGUESA

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

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

ESTILOS PARA LOS ELEMENTOS DE LOS MENÚ DE SELECCIÓN */

.DivMenuSel, .DivMenuSelPeq {
	background-color:var(--ColorLista5);
	margin:20px auto 0;
	padding:10px 0;
	width:53%;
	text-align:center;
	border: var(--ColorLista7) 2px solid;

	/* Redondeamos los bordes */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;

}
.DivMenuSel div:not(.DivWrapItemsMenuSel),
.DivMenuSelPeq div:not(.DivWrapItemsMenuSel) {
	margin:4px auto;
	padding:10px 5px;
	width:80%;
	cursor:pointer;
	border: var(--ColorLista7) 1px solid;

	/* Redondeamos los bordes */
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-ms-border-radius: 7px;
	-o-border-radius: 7px;
	border-radius: 7px;
}
.DivMenuSelPeq div:not(.DivWrapItemsMenuSel) {
	padding:5px !important;
}
.DivMenuSel .DivTitMenuSel,
.DivMenuSelPeq .DivTitMenuSel {
	background-color:var(--ColorLista1);
	font-size:var(--txt0);
	font-weight:bold;
	color:var(--ColorLista7);
	text-transform:uppercase;
}
.DivMenuSelPeq .DivTitMenuSel {
	/* Le damos position relative para que en el DivIconoCerrar funciones la position absolute como debe ser */
	position:relative;
	margin:0 auto !important;
	font-size:var(--txt-1);
}
.DivItemMenuSel:nth-child(2n+1) {
	background-color:var(--FilaImpar);
}
.DivItemMenuSel:nth-child(2n+2) {
	background-color:var(--FilaPar);
}
.DivWrapItemsMenuSel, .DivWrapItemsMenuSelPeq {
	display:none;
	margin:0 auto;
	padding:0 !important;
	width:90%;
}

/*FIN DE ESTILOS PARA LOS ELEMENTOS DE LOS MENÚ DE SELECCIÓN

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

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

ESTILOS PARA ELEMENTOS DE LISTAS ESPECIALES (LAS DIFERENTES A LA PREDETERMINADA) */

.DivLstsEspeciales {
	display:none;
	background-color:var(--ColorLista4);
	margin:-18px auto 0;
	padding:5px 0;
	width:53%;
	text-align:center;
	border: var(--ColorLista7) 2px solid;

	/* Redondeamos los bordes */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
}
.SectionOpciones .DivLstsEspeciales input[type="text"] {
	margin: 20px auto !important;
}
.SectionOpciones .DivItemSelLista {
	display:table;
	/*margin: 0 auto;*/
	margin: 0 auto 10px;
	width:80%;
}
.SectionOpciones .DivItemSelLista span {
	display:table-cell;
	width:70%;
	font-size:var(--txt-2);
	text-align:right;
}
.SectionOpciones .DivItemSelLista input[type="checkbox"] {
	margin-left:10px;
}
#DivPagAltaUsuario .DivLstsEspeciales {
	margin:20 auto;
	padding:5px 0;
}
.DivLstsEspeciales > p {
	margin:10px 20px 20px;
}
.DivLstsEspeciales > div {
	margin:4px auto;
	width:80%;
	padding:0px;
	color:black;
	cursor:pointer;
	border: var(--ColorLista7) 1px solid;

	/* Redondeamos los bordes */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 7px;
}
.DivItemSelLista:nth-child(2n+1) {
	background-color:var(--FilaPar);
}
.DivItemSelLista:nth-child(2n+2) {
	background-color:var(--FilaImpar);
}
.PagAltaUsuario .DivLstsEspeciales {
	display:block;
	width:100%;
}
.PagAltaUsuario .DivItemSelLista {
	margin:5px auto;
	width: 75%;
	padding:3px 10px;
	text-align:left;
}
.PagAltaUsuario .DivItemSelLista p,
.PagAltaUsuario .DivCabezaLista p {
	display:inline;
}
.PagAltaUsuario .DivItemSelLista .DivCheck {
	width: 10%;
	float:right;
}
.PagAltaUsuario .DivItemSelLista input[type="checkbox"] {
	position:relative;
	margin:0;
	margin-right:-40px;
	float:right;
}

/* FIN ESTILOS ELEMENTOS DE LISTAS ESPECIALES (LAS DIFERENTES A LA PREDETERMINADA)

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


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

ESTILOS PARA LOS ELEMENTOS DE LISTAS ESPECIALES EN LOS DivIntro */

#DivPagAltaUsuario .DivIntro {
	margin:-30px auto 0;
	width:100%;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	border: 0px solid #000000;
}
.Tabla {
	display:table;
	margin:0 auto;
	width:100%;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	-ms-border-radius: 50px;
	-o-border-radius: 50px;
	border-radius: 50px;
	border: 0px solid #000000;
}
.FilaTitulo {
	display:table-caption;
	background-color:var(--colorA);

	-webkit-border-radius: 10px 10px 0px 0px;
	-moz-border-radius: 10px 10px 0px 0px;
	-ms-border-radius: 10px 10px 0px 0px;
	-o-border-radius: 10px 10px 0px 0px;
	border-radius: 5px 5px 0px 0px;
	border: 0px solid #000000;
}
.FilaTitulo p {
	margin:0;
	font-size:11px;
	font-weight:bold;
	text-transform:uppercase;
}
.FilaCabeza {
	display:table-row; /*Aunque no muestra la propiedad border, el resto, sí*/
	margin:0 auto;
	max-width:70%;
	width:90%;
	background-color:var(--colorB);
}
.Fila {
	display:table-row; /*Aunque no muestra la propiedad border, el resto, sí*/
	margin:0 auto;
	max-width:70%;
	width:70%;
}
.Fila:nth-child(2n+1) {
	background-color:#eee;
}
.Fila:nth-child(2n+2) {
	background-color:#ddd;
}
.FilaCabeza p {
	font-size:var(--txt-3);
	font-weight:bold;
	text-transform:uppercase;
	line-height:13px;
}
.Fila p {
	font-size:var(--txt-2);
	line-height:11px;
}
.CeldaCabeza {
	display:table-cell;
	width:100%;
}
.Fila .CeldaCabeza p {
	text-align:left;
	padding-left:15px;
	text-align:left !important;
}
.Celda {
	display:table-cell;
	width:5%;
	text-align:center;
}
.FilaCabeza .CeldaCabeza {
	padding-left:0px;
	text-align:center;
}
.FilaCabeza .CeldaCabeza p {
	display:inline;
	position:relative;
	top:6px; /* Habrá que ajustarlo dependiendo del número de líneas que tenga el texto de ésta u otras celdas de la cabeza */
}
div[class*="Celda"] {
	padding: 4px 5px;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DE LISTAS ESPECIALES EN LOS DivIntro

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


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

ESTILOS PARA LOS ELEMENTOS RELACIONADOS CON LA ASIGNACIÓN DE USUARIOS */

.ArticleAsignarUsuarios {
	display:none;
	position:relative;
	margin:0 auto;
	width:90%;
	cursor:default;
}
.DivMenuSelPeq {
	width:100%;
}
.DivTitMenuSel {
	width:95% !important /* DEI */;
}
.DivMostrarProdsAsg {
	background-color:var(--ColorLista7);
	width:90%;
	padding:20px;
	line-height:20px;
	cursor:default !important /* DEI */;
}
.DivMostrarProdsAsg:empty {
	display:none;
}
.DivItemOnlyProdAsg {
	text-align:left;
	padding-left:15px;
	line-height:10px;
}
/* Insertamos el icono para eliminar el item */
.DivItemOnlyProdAsg::after {
	content:"X";
	float:right;
	margin-top:-10px;
	margin-right:5px;
	font-weight:bold;
	font-size:12px;
	color:red;
	opacity:0.7;
}
.DivItemOnlyProdAsg:nth-child(2n+1) {
	background-color:var(--FilaImpar);
}
.DivItemOnlyProdAsg:nth-child(2n+2) {
	background-color:var(--FilaPar);
}
.DivErrorAsg {
	width:100%;
}
.DivErrorAsg:empty {
	display:none;
}
.DivBotonesTitMenuSel {
	width:95% !important /* DEI */;
	text-align:center;
	border-color:transparent !important /* DEI */;
}
.DivBotonesTitMenuSel button {
	max-width:180px;
	width:auto;
	padding:3px 8px;

	/* Redondeamos los bordes */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}
.DivBotonesTitMenuSel .BotonNomAsgUsu {
	margin-right:10px;
}
.DivBotonesTitMenuSel .BotonConfirmarAccion {
	margin-left:10px;
}
.DivAvisoNota {
	background-color:var(--ColorLista7);
	width:98%;
	margin:10px auto;
	padding:10px 20px;
	font-size:var(--txt-2);
	text-align:center;
	line-height:20px;
	border: red 2px solid;

	/* Redondeamos los bordes */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;

}

/*FIN DE ESTILOS PARA LOS ELEMENTOS RELACIONADOS CON LA ASIGNACIÓN DE USUARIOS

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

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

ESTILOS PARA LOS ELEMENTOS DE LOS DIVS PARA CONFIRMAR ACCIÓN */

.DivConfirmar {
	display:none;
	background-color:var(--ColorLista7);
	margin:10px auto;
	width:90%;
	padding:20px;
	padding:5px 20px;
	text-align:center;
	line-height:20px;
	cursor:default !important /* DEI */;
	
		border: red 2px solid !important;
		
	/* Redondeamos los bordes */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
		
}
.DivConfirmar p {
	font-size:var(--txt-2);
	font-weight:normal;
	text-transform:none;
	color:var(--color1);
}
.DivConfirmar button {
	padding:0 20px;
}
.DivConfirmar button + button {
	margin-left:60px;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DE LOS DIVS PARA CONFIRMAR ACCIÓN

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

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

ESTILOS PARA LOS ELEMENTOS DEL ICONO DE CERRAR VENTANA */

.DivIconoCerrar {
	position:absolute;
	top:2px;
	left:385px;
	
	display:inline;
	width:18px !important /* DEI */;
	height:18px;
	padding:9px;
	cursor:pointer;
	border: var(--ColorLista7) 2px solid;
	
		/* Redondeamos los bordes */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 40px;
}
.DivIconoCerrar hr {
	position:absolute;
	top:0px; /*  Aunque sea 0, es necesario especificarlo  */
	left:3px;
	width:10px;
	border: var(--ColorLista7) 1px solid;
}
.DivIconoCerrar .Hr1 {
	/* Rotamos el elemento */
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.DivIconoCerrar .Hr2 {
	/* Rotamos el elemento */
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.DivIconoCerrar:hover {
	border-color:blue;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DEL ICONO DE CERRAR VENTANA

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

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

ESTILOS PARA LOS ELEMENTOS DEL DIV DivNvaListaEspecial */

#DivNvaListaEspecial {
	position:relative;
	width:95%;
	text-align:center;
}
#DivNvaListaEspecial input[type="text"]{
	margin:10px auto;
	width:70%;
	height:30px;
	padding:0 10px;
	text-align:center;
	cursor:text;

	/* Redondeamos los bordes */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	-o-border-radius: 8px;
	border-radius: 8px;
}
#DivNvaListaEspecial input[type="checkbox"] {
	display:inline-block;
	float:right;
}
.SectionOpciones #DivNvaListaEspecial input[type="checkbox"] {
	float:left;
}
#DivNvaListaEspecial p {
	display:inline-block;
	padding-left:10px;
}
.DivSelectUsuariosLst {
	padding:10px 0 !important;
}
.DivItemSelLista p {
	margin:0 !important;
	padding:5px;
}
.FechaNvaListaEsp {
	display:inline-block;
	background-color:white;
	width:70%;
	height:30px;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DEL DIV DivNvaListaEspecial

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

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

ESTILOS PARA LOS ELEMENTOS DE LAS PÁGINAS DE ERROR / OK */

#PagErrorOk .DivCamposForm p {
	font-size:var(--txt-1);
	line-height:20px;
	text-align:center;
}
#PagErrorOk .SectionBotones,
#PagErrorOk .ArticleBotones {
	margin-top:40px !important;  /*DEI*/
}
#PagErrorOk .DivIconoSeguridad {
	margin-top:30px;
	text-align:center;
}
#PagErrorOk .DivIconoSeguridad img {
	width:12%;
}
#PagErrorOk .SectionContenido {
	/* Para centrar verticalmente en la pantalla */
	margin:10% 0;
}
#PagErrorOk .DivCamposForm {
	margin: 5% auto;
	padding: 2% 5%;
	border: 2px white solid;
	
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
}
#PagErrorOk .DivFijoLista {
	height:45px;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DE LAS PÁGINAS DE ERROR / OK

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

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

ESTILOS PARA LOS ELEMENTOS DEL CALENDARIO DHTML DYNARC */

.calendar, .calendar table {
	position:absolute;
	top:10px;
	left:-175px;

	z-index:30 !important;
}
.calendar td{
	padding:3px !important;
	font-size:15px !important;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DEL CALENDARIO DHTML DYNARC

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


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

ESTILOS PARA LOS ELEMENTOS DEL FORMULARIO ALTA DE CUALQUIER PÁGINA */

Div[class*="PagAlta"] Section[class*="SectionForm"] {
	/* Para centrar verticalmente en la pantalla */
	margin:10% 0;
}
Div[class*="PagAlta"] .DivFormProdNuevo {
	margin: 0 auto;
	width:40%;
	text-align:center;
}
Div[class*="PagAlta"] .DivWrapItemsForm {
	margin:0 auto;
	width:80%;
}
Div[class*="PagAlta"] .DivFormItem {
	padding:0 !important;
	border: 2px red solid !important;
}
Div[class*="PagAlta"] input[type="text"],
Div[class*="PagAlta"] input[type="password"],
Div[class*="PagAlta"] textarea {
	margin:20px 0 !important;
	padding:35px 10px 10px;
	width:100%;
	height:60px;
	font-size:16px;

	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	border: 0px solid #000000;
}
Div[class*="PagAlta"] .SpanPlaceholder {
	top:-55px;
	left:0px;
}
Div[class*="PagAlta"] input:placeholder-shown + hr + .SpanPlaceholder,
Div[class*="PagAlta"] textarea:placeholder-shown + hr + .SpanPlaceholder
 {
	top:-35px !important;
	left:10px;
}
Div[class*="PagAlta"] input + hr,
Div[class*="PagAlta"] textarea + hr
 {
	margin-top:-18px;
}
Div[class*="PagAlta"] .DivCategorias, .DivSubCategorias {
	display:none;
	margin-top:-10px;
	margin-left:40px;
	margin-right:40px;
}
Div[class*="PagAlta"] .DivCategorias p, .DivSubCategorias p {
	margin:0px;
}
Div[class*="PagAlta"] .DivItemMenuSel {
	padding:10px;
	cursor:pointer;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DEL FORMULARIO ALTA DE CUALQUIER PÁGINA

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


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

ESTILOS PARA LOS ELEMENTOS DEL FORMULARIO NUEVO PRODUCTO */

Div[id*="DivPagAlta"] .SectionBotones {
	margin-top:20px !important;  /*DEI*/
}
.DivGrabarMas {
	margin:0 auto 40px;
	width:80%;
}
.DivGrabarMas p {
	text-align:center;
}
.DivGrabarMas button {
	min-width:40%;
}
.DivGrabarMas button:focus {
	outline: none;
	border: 1px lime solid !important;
}
.DivGrabarMas a:nth-child(2n+1) {
	float:right;
}
#DivPagAltaProducto .Div[class*="DivCampos"],
#DivPagAltaProducto .DivCamposRegistro {
	margin:0 auto;
	width:80%;
}
.DivIntro2 {
	margin-top:0px;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DEL FORMULARIO NUEVO PRODUCTO

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

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

ESTILOS PARA LOS ELEMENTOS DEL PERMISO COMO ADMINISTRADOR */

.DivPermisoNvoAdm {
	//display:table;
	margin:20px 0;
	background-color:#ffffff;
	padding:10px 20px;
	width:100%;
	
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	border: 0px solid #000000;
}
.DivRadioPermisoNvoAdm {
	display:table;
	margin:0 auto;
	max-width:90%;
	width:90%;
}
.DivRadioPermisoNvoAdm p,
.DivRadioPermisoNvoAdm .DivRadio {
	display:table-cell;
	width:20% !important;
	text-align:right;
}
.DivRadioPermisoNvoAdm input[type="radio"] {
	position:relative;
	left:-35px;
}
/* FIN DE ESTILOS PARA LOS ELEMENTOS DEL PERMISO COMO ADMINISTRADOR

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

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

ESTILOS PARA LOS ELEMENTOS Text_Input_Text, ES DECIR, DONDE HAY UN INPUT DE TIPO TEXT EN MEDIO DE UN TEXTO */

.Text_Input_Text {
	display: table;
	padding:0;
}
.Text_Input_Text p {
	display:table-cell;
}
.Text_Input_Text .DivInputInline {
	display:table-cell;
	padding: 0 10px;
	width:65px;
	text-align:center;
}
Div[class*="PagAlta"] .Text_Input_Text input[type="text"] {
	display:table-cell;
	margin: 0 !important /*DEI*/;
	width:100%;
	height:25px;
	padding:2px 0px 0px 0px;
	text-align:center;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	border: 0px solid #000000;
}
Div[class*="PagAlta"] .Text_Input_Text input + hr,
Div[class*="PagAlta"] .Text_Input_Text textarea + hr
 {
	margin-top:0px;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS Text_Input_Text, ES DECIR, DONDE HAY UN INPUT DE TIPO TEXT EN MEDIO DE UN TEXTO

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


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

ESTILOS PARA LOS ELEMENTOS ChecksBlock, ES DECIR, DONDE HAY VARIOS CHECKBOX UBICADOS UNO DEBAJO DEL OTRO*/

.DivChecksBlock {
	margin:0 auto;
	width:35%;
}
.DivChecksBlock div {
	display:table;
	width:100%;
	padding:5px 10px;
}
.DivChecksBlock div:nth-child(2n+1) {
	background-color:var(--FilaImpar);
}
.DivChecksBlock div:nth-child(2n+1) {
	background-color:var(--FilaPar);
}
.DivChecksBlock p {
	display:table-cell;
	font-size:var(--txt-2);
}
/*Incluyo checks y radios, porque en la página FormNvoSuscriptor cambia de check a radio dependiendo del número de días de periodicidad*/
.DivChecksBlock input[type="checkbox"],
.DivChecksBlock input[type="radio"] {
	float:right;
	display:inline;
	width:20px;
	margin:0 !important;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS ChecksBlock, ES DECIR, DONDE HAY VARIOS CHECKBOX UBICADOS UNO DEBAJO DEL OTRO

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

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

ESTILOS PARA LOS ELEMENTOS DEL ArticleChecksInline, ES DECIR, DONDE HAY VARIOS CHECKBOX EN LÍNEA */

.ArticleChecksInline {
	display:block;
	width:100%;
	padding:5px 10px;
}
.ArticleChecksInline > p {
	display:block;
	width:100%;
	padding:5px 10px;
	line-height:20px;
}
.ArticleChecksInline .DivChecksInline {
	display:table;
	margin:0 auto;
	width:50%;
}
.ArticleChecksInline .DivChecksInline p {
	display:table-cell;
	width:20%;
	font-size:var(--txt-2);
	text-align:right;
}
.ArticleChecksInline .DivChecksInline div {
	display:table-cell;
	width:20%;
}
.ArticleChecksInline .DivChecksInline input {
	float:left;
	display:inline;
	width:20px;
	margin:0;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DEL ArticleChecksInline, ES DECIR, DONDE HAY VARIOS CHECKBOX EN LÍNEA

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


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

ESTILOS PARA LOS ELEMENTOS CheckUnicoInline, ES DECIR UN SOLO CHECBOX EN LÍNEA CON UN TEXTO */

.ArticleCheckUnicoInline {
	display:table;
	width:85%;
	margin: 0 auto;
	padding:5px 10px;
}
.ArticleCheckUnicoInline div > p {
	display:table-cell;
	width:90%;
	padding:5px 10px;
	line-height:20px;
}
.ArticleCheckUnicoInline .DivCheckInline {
	display:table-cell;
	margin:0 auto;
}
.ArticleCheckUnicoInline .DivCheckInline input {
	float:left;
	display:inline;
	width:20px;
	margin:0 auto;
}
.ArticleCheckUnicoInline a {
	white-space:nowrap;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS CheckUnicoInline, ES DECIR UN SOLO CHECBOX EN LÍNEA CON UN TEXTO

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


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

ESTILOS PARA LOS TEXTOS DE ENLACE */

.TxtEnlace {
	background-color:#3E92CC;
	padding:3px 10px;
	font-size:var(--txt-2);
	color:var(--color1);
	color:var(--color3);
	border: var(--color1) 1px solid;	

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}
.TxtEnlace:hover {
	background-color:var(--color1);
	font-size:var(--txt-2);
	font-style:italic;
	font-weight:bold;
	color:var(--colorF);
	text-decoration:none;
	cursor:url("/Img/Dibujos/Cursor.png"), pointer;
}

/* FIN DE ESTILOS PARA LOS TEXTOS DE ENLACE

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

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



ESTILOS PARA LOS ELEMENTOS DivBotonesInline, ES DECIR LOS QUE CONTIENEN VARIOS BOTONES EN LÍNEA, PRECEDIDOS DE UN TÍTULO O UN TEXTO <p>. IMPORTANTE: EN LOS PARÁMETROS width: calc(100% / 2), HAY QUE CAMBIAR EL DIVISOR PONIENDO EL NÚMERO DE BOTONES QUE CONTENGA EL DIV */

.DivBotonesInline {
	display:table;
	box-sizing: border-box;
	margin: 0 auto;
	width:80%;
	text-align:center;
	
	/* ****************************************************** */
	
	/* Agregados en FormEnvioCsna.asp. Si descompone otros, hacer propiedad exclusiva para esa página */
	background-color:var(--ColorLista7);
	width:50%;
	padding:2%;
	font-size:var(--txt-2);
	line-height:25px;

	/* ****************************************************** */
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;

			border: 2px red solid !important;
}
.DivPagSugerencias .DivBotonesInline {
	width:100%;
	border: 2px var(--color9) solid !important;
}
.DivBotonesInline .DivContenido {
	display:table;
	box-sizing: border-box;
	width:100%;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius:5px;
}
.DivBotonesInline p {
	display:table-caption;
	box-sizing: border-box;
	margin:10px auto;
	width:100%;
	text-align:center;

	-webkit-border-radius: inherit;
	-moz-border-radius: inherit;
	-ms-border-radius: inherit;
	-o-border-radius: inherit;
	border-radius:inherit;
}
.DivBotonesInline a {
	display:table-cell;
	box-sizing: border-box;
	width: 48%;
	padding:5px 0;

	-webkit-border-radius: inherit;
	-moz-border-radius: inherit;
	-ms-border-radius: inherit;
	-o-border-radius: inherit;
	border-radius:inherit;
}
.DivPagSugerencias .DivBoton {
	display:table-cell;
	width: calc(100% / 2); /* Dividir entre el número de botones */
	text-align:center !important;
}
.DivPagSugerencias .DivBoton a {
	margin-left: 50%;
	margin-right: 50%;
	transform: translateX(50%);
}
.DivBotonesInline button {
	box-sizing: border-box;
	width:70%;
	padding: 2px 20%;

	-webkit-border-radius: inherit;
	-moz-border-radius: inherit;
	-ms-border-radius: inherit;
	-o-border-radius: inherit;
	border-radius:inherit;
}
.DivBotonSugerencias {
	margin:0 auto;
	text-align:center;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DivBotonesInline, ES DECIR LOS QUE CONTIENEN VARIOS BOTONES EN LÍNEA, PRECEDIDOS DE UN TÍTULO O UN TEXTO <p>.

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


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

ESTILOS PARA LOS ELEMENTOS DEL DIV QUE CONTIENE LOS LOGOS DE LAS FORMAS DE PAGO */

.LogosPagos {
	display:table;
	background-color:white;
	margin: 30px auto 20px;
	width:100%;
	
	-webkit-border-radius: 0px 0px 10px 10px;
	-moz-border-radius: 0px 0px 10px 10px;
	-ms-border-radius: 0px 0px 10px 10px;
	-o-border-radius: 0px 0px 10px 10px;
	border-radius: 0px 0px 10px 10px;
	border: 0px solid #000000;
}
.TituloPagos {
	display:table-caption;
	background-color:white;
	width:100%;
	padding: 10px 20px;
	text-align:center;

	-webkit-border-radius: 10px 10px 0px 0px;
	-moz-border-radius: 10px 10px 0px 0px;
	-ms-border-radius: 10px 10px 0px 0px;
	-o-border-radius: 10px 10px 0px 0px;
	border-radius: 10px 10px 0px 0px;
	border: 0px solid #000000;
}
.TituloPagos p {
	display:inline;
	font-size:var(--txt-2) !important /*DEI*/;
}
.LogosPagos .ItemLogoPago {
	display:table-cell;
	width:45%;
	padding: 10px 20px;
	text-align:center;
}
.LogosPagos .ItemLogoPago img {
	margin:0 auto;
	width:60%;
	cursor:pointer;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DEL DIV QUE CONTIENE LAS FORMAS DE PAGO

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

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

ESTILOS PARA LOS ELEMENTOS AVISO DE SESSION */

.AvisoSessionVerde {
	background-color:transparent;
	padding:0;
	color:black;
	font-size: 10px;
}

.AvisoSessionNaranja {
	background-color:orange;
	padding:2px 3px;
	color:blue;
	font-size: 11px;
	text-align:center;

	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	border: 0px solid #000000;
}

.AvisoSessionRojo {
	background-color:white;
	padding:5px 10px;
	color:red;
	font-size: 12px;
	text-align:center;

	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	border: 0px solid #000000;
}

.AvisoParpadeante {
	background-color:white;
	padding:7px 12px;
	color:red;
	font-size: 12px;
	text-align:center;

	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	border: 0px solid #000000;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS AVISO DE SESSION

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


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

ESTILOS PARA LOS ELEMENTOS DE LA SECCIÓN LISTA */
#SectionLista .DivListaFecha,
#SectionCuenta .DivCuenta {
	background:var(--ColorLista6);
}
#SectionLista .DivTitulosTblDatos,
#SectionLista .DivSelChecks {
  display: grid;
  grid-template-columns: repeat(100, 1fr);
	padding:7px !important /*DEI*/;
}
#SectionLista .DivTitulosTblDatos .DivTitProducto,
#SectionLista .DivSelChecks .DivSelChecksLst_a_Cat {
	grid-area: 1 / 1 / 2 / 48;
	background:transparent !important;
	width:100%;
	text-align:center !important;
}
#SectionLista .DivTitulosTblDatos .DivTitCantidad {
	grid-area: 1 / 48 / 2 / 71;
	background:transparent !important;
	width:100%;
}
#SectionLista .DivTitulosTblDatos .DivTitEnviarCarro,
#SectionLista .DivSelChecks .DivSelChecksLst_a_Car {
	grid-area: 1 / 71 / 2 / 101;
	background:transparent !important;
	width:100%;
}
#SectionLista .DivAgregarProductos {
  display: grid;
  grid-template-columns: repeat(100, 1fr);
	padding:7px !important /*DEI*/;
}
#SectionLista .DivAgregarProductos div {
	margin:0 !important /*DEI*/;
	padding:5px 0 !important;
}
#SectionLista .DivAgregarProductos .DivProducto {
	grid-area: 1 / 1 / 2 / 48;
	align-content:center;
	width:100%;
	
	/* Los padding intenté resumirlos en uno solo, pero no funciona */
	padding-top:auto !important /*DEI*/;
	padding-right:10px !important /*DEI*/;
	padding-bottom:auto !important /*DEI*/;
	padding-left:20px !important /*DEI*/;
}
#SectionLista .DivAgregarProductos div {
	display:inline;
	width:100%;
	text-align:left /*DEI*/;
}
#SectionLista .DivAgregarProductos input[type="checkbox"] {
	float:right;
//	width:15px;
//	height:15px;
}
#SectionLista .DivAgregarProductos .DivCantidad {
	grid-area: 1 / 49 / 2 / 71;
	align-content:center;
	text-align:center;
	width:100%;
	padding:0 !important /*DEI*/;
}
#SectionLista .DivCubierta > div:nth-child(2n+1){
	background-color:var(--ColorLista5);
}
#SectionLista .DivCubierta > div:nth-child(2n+1) > div {
	background-color:transparent;
}
#SectionLista .DivCubierta > div:nth-child(2n+2){
	background-color:var(--ColorLista7);
}
#SectionLista .DivCubierta > div:nth-child(2n+2) > div {
	background-color:transparent;
}
#SectionLista .DivAgregarProductos .DivCantidad input[type="text"] {
	width:100%;
	padding:0 7px;
	height:30px;
	text-align:center;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	border: 0px solid #000000;
}
#SectionLista .DivAgregarProductos .DivAgregarAlCarro {
	grid-area: 1 / 71 / 2 / 101;
	align-content:center !important;
	text-align:center;
	width:100%;
	padding:0 !important /*DEI*/;
}
#SectionLista .DivFijoRestantes {
	padding-bottom:0px;
}
#SectionLista .SectionBotones,
#SectionCuenta .SectionBotones {
	background:var(--ColorCatalogo7);
	margin:10px auto 0;
	padding:0.1% 0;

	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-ms-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;

	-webkit-position: sticky;
	-moz-position: sticky;
	-ms-position: sticky;
	-o-position: sticky;
	position: sticky;
	top: 70px;
	z-index: 10;
}
#SectionLista .DivItemsTblDatos {
  position: relative;
  left: 0px;
  top: 0px;
  z-index: 0 !important /*DEI*/;
}
#SectionLista .LabelCategoria {
	border-top: 2px var(--ColorLista5) solid;
}
#SectionLista .LabelCategoria input[type="checkbox"] {
//	width:15px;
//	height:15px;
	margin-left:25px !important;
	margin-right:10px !important;
}
#SectionLista .DivAgregarAlCarro button {
	height:30px;
}
.SectionListaCesta,
.SectionCuenta {
	border: var(--ColorLista1) 2px solid;
	border-bottom-width:10px !important /* DEI */;
}
/* Cubierta usada en el ArticleAsignarUsuarios */
#SectionLista .DivCubiertaUA {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	border-bottom: 5px var(--color2) solid;
	margin-bottom:10px;	
}

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

#SectionLista .DivSelChecks,
#SectionCarro .DivSelChecks {
	margin:0 !important;
	padding:0 !important;
}
#SectionLista .DivSelChecks > div,
#SectionCarro .DivSelChecks > div {
	display:inline;
}
#SectionLista .DivSelChecks p,
#SectionCarro .DivSelChecks p {
	display:inline;
	font-size:var(--txt-2);
	font-style:italic;
}
#SectionLista .DivSelChecks input[type="checkbox"],
#SectionCarro .DivSelChecks input[type="checkbox"] {
//	width:15px;
//	height:15px;
}
#SectionLista .DivSelChecks .DivSelChecksLst_a_Cat,
#SectionCarro .DivSelChecks .DivSelChecksLst_a_Cat {
	text-align:right !important;
}


/* FIN DE ESTILOS PARA LOS ELEMENTOS DE LA SECCIÓN LISTA

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

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

ESTILOS PARA LOS ELEMENTOS DE LA SECCIÓN CARRO */


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

#SectionCarro .DivItemCarro,
#SectionCarro .DivSelChecks {
  display: grid;
  grid-template-columns: repeat(100, 1fr);
	padding:7px !important /*DEI*/;
}
#SectionCarro .DivProducto,
#SectionCarro .DivSelChecksLst_a_Cat {
	grid-area: 1 / 1 / 2 / 48;
	align-content:center;
	width:100%;
	
	/* Los padding intenté resumirlos en uno solo, pero no funciona */
	padding-top:auto !important /*DEI*/;
	padding-right:10px !important /*DEI*/;
	padding-bottom:auto !important /*DEI*/;
	padding-left:20px !important /*DEI*/;
}
#SectionCarro .DivCantidad {
	grid-area: 1 / 49 / 2 / 71;
	align-content:center;
	text-align:center;
	width:100%;
	padding:0 !important /*DEI*/;
}
#SectionCarro .DivCantidad input[type="text"] {
	width:100%;
	padding:0 7px;
	height:30px;
	text-align:center;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	border: 0px solid #000000;
}
#SectionCarro .DivDevolverALista,
#SectionCarro .DivSelChecksCar_a_Lst {
	grid-area: 1 / 71 / 2 / 101;
	align-content:center !important;
	text-align:center;
	width:100%;
	padding:0 !important /*DEI*/;
}

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


#SectionCarro .DivItemCarro div {
	display:inline-block;
	padding:5px;
	text-align:center;
}
#SectionCarro .DivProducto {
	grid-area: 1 / 1 / 2 / 45;
}
#SectionCarro .DivCantidad {
	grid-area: 1 / 48 / 2 / 69;
}
#SectionCarro .DivDevolverALista {
	grid-area: 1 / 69 / 2 / 101;
}
#SectionCarro .DivCantidad input[type="text"],
#SectionCarro .DivDevolverALista button {
	margin:4px 0 !important /*DEI*/;
}
#SectionCarro .DivCarro > div:nth-child(2n+1) {
	background-color:var(--ColorCarro6);
}
#SectionCarro .DivCarro > div:nth-child(2n+2) {
	background-color:var(--ColorCarro7);
}
#SectionCarro .DivItemCarro {
	padding:0 !important;
	padding-top:0 !important;
	padding-right:0 !important;
	padding-bottom:0 !important;
	padding-left:0 !important;
}
#SectionCarro .DivDevolverALista input[type="checkbox"] {
	float:right;
	margin-right:10px !important;
//	width:15px;
//	height:15px;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DE LA SECCIÓN CARRO

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

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

ESTILOS PARA LOS ELEMENTOS DE LA SECCIÓN CATÁLOGO */

#SectionCatalogo .DivAgregarProductos {
  display: grid;
  grid-template-columns: repeat(100, 1fr);
	padding:7px !important /*DEI*/;
}
#SectionCatalogo .DivAgregarProductos div {
	margin:0 !important /*DEI*/;
	padding:5px 0 !important;
}
#SectionCatalogo .DivAgregarProductos .DivProducto {
	grid-area: 1 / 1 / 2 / 74;
	width:100%;
	padding-top:auto !important /*DEI*/;
	padding-right:10px !important /*DEI*/;
	padding-bottom:auto !important /*DEI*/;
	padding-left:20px !important /*DEI*/;
}
#SectionCatalogo .DivAgregarProductos .DivProducto div {
	display:inline;
	width:100%;
	text-align:left /*DEI*/;
}
#SectionCatalogo .DivAgregarProductos .DivProducto input[type="checkbox"] {
	float:right;
//	width:15px;
//	height:15px;
}
#SectionCatalogo .DivAgregarProductos .DivCantidad {
	grid-area: 1 / 76 / 2 / 101;
	text-align:center;
	width:100%;
	padding:0 !important /*DEI*/;
}
#SectionCatalogo .DivAgregarProductos .DivCantidad input[type="text"] {
	width:100%;
	padding:0 7px;
	height:100%;
	text-align:center;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	border: 0px solid #000000;
}
#SectionCatalogo .DivFijoRestantes {
	padding-bottom:0px;
}
#SectionCatalogo .SectionBotones {
	background:var(--ColorCatalogo7);
	margin:10px auto 0;
	padding:0.1% 0;

	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-ms-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;

	-webkit-position: sticky;
	-moz-position: sticky;
	-ms-position: sticky;
	-o-position: sticky;
	position: sticky;
	top: 70px;
	z-index: 10;
}
#SectionCatalogo .DivProducto {
  position: relative;
  left: 0px;
  top: 0px;
  z-index: 0 !important /*DEI*/;
}
#SectionCatalogo .LabelCategoria input[type="checkbox"] {
//	width:15px;
//	height:15px;
	margin-left:25px !important;
	margin-right:10px !important;
}
#SectionCatalogo .LabelCategoria {
	border-top: 2px var(--ColorCatalogo4) solid;
}
#SectionCatalogo .DivTitulosTblDatos {
  display: grid;
  grid-template-columns: repeat(100, 1fr);
}
#SectionCatalogo .DivTitulosTblDatos .DivTitProducto {
	grid-area: 1 / 1 / 2 / 72;
	width:100%;
	padding:8px;
	text-align:center !important;  /*DEI*/
}
#SectionCatalogo .DivTitulosTblDatos .DivTitCantidad {
	grid-area: 1 / 72 / 2 / 101;
	width:100%;
	padding:8px;
	text-align:left;
}
#SectionCatalogo .DivTitulosTblDatos .DivTitProducto input[type="checkbox"]{
	float:right;
	margin:0;
			border: 2px blue solid !important;
	float:right;
//	width:15px;
//	height:15px;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DE LA SECCIÓN CATÁLOGO

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

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

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

.PagCategorias div p {
	padding:0 20px;
	text-align:center;
}	
.PagCategorias .DivTitulosTblDatos div {
	width:100% !important /* DEI */;
	padding:0;
}
.PagCategorias .DivSticky {
	background-color:#666666;
	background-color:var(--ColorLista2);
	padding:10px 0;
	text-align:center !important;
	
	position: sticky;
	position: -webkit-sticky; /* Safari */
	position: -moz-sticky; /* Firefox */
	position: -ms-sticky; /* Windows */
	position: -o-sticky; /* Ópera */
	top:0;
	
	z-index:30;
}
.PagCategorias .DivSticky button {
	margin:0px auto !important;
}
.PagCategorias .DivTruco {
	cursor:pointer;
}
.PagCategorias .DivItemTruco {
	display:none;
}
.PagCategorias .LiSubCatNueva {
	background-color:#FF9B00 !important /*DEI*/;
}

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

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


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

ESTILOS PARA LOS ELEMENTOS ICONOS DE GOOGLE */

.material-icons {
	background:white;
	color: #119822;
	color: var(--ColorInfo);
	font-size: 18px;
	width:18px;
	cursor:pointer;

	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	-ms-border-radius: 9px;
	-o-border-radius: 9px;
	border-radius: 9px;
	border: 0px solid #000000;
}
.material-icons-outlined {
	color:#ff9b00;
	color:var(--naranja);
	border: 2px #ff9b00 solid !important;

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
}
.FlechaAbajo, .FlechaArriba {
	position:relative;
	left:-40px;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS ICONOS DE GOOGLE

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


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

ESTILOS PARA LOS ELEMENTOS QUE DAN INFORMACIÓN SOBRE POSIBLES ACCIONES */

.DivInfo {
	position:relative;
	width:100%;
}
.DivInfo i {
	cursor:help;
}
div[class*="DivInfo"] {
	caret-color: transparent; /* Debe ir aquí, no en el DivInfo i */
}
.DivTextoInfo {
	position:fixed !important;  /*DEI*/ /* No es absolute, porque éste se coloca en relación con el ancestro posicionado más cercano, y dicho ancestro puede variar en cada caso. En cambio, fixed se posiciona con respecto a la ventana gráfica, que es lo que buscamos. El top y/o left se los pone la función conmutarDivInfo de js*/
	background:var(--color9);
	padding:5px 5px;
	text-align:center; /* No debe ir en p */
	z-index:35;
	white-space:pre-line; /* Para que se apliquen automáticamente los saltos de línea en párrafos creados con js */

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	border: 2px solid green;
	border: 2px solid #ffffff;
}
.DivTextoInfo p {
	margin:0;
	font-family:Verdana, Geneva, sans-serif;
	font-size:var(--txt-2);
	font-style:normal;
	font-weight:500;
	color:black;
	text-transform:none;
	line-height:18px;
	/* Al padding le pondremos important, para evitar que lo herede */
	padding-left:10px !important;
	padding-right:10px !important;
}
.DivTituloCabecera {
	width:100%;
	height:43px;
}
/*#SectionLista .DivTituloCabecera,
#SectionCuenta .DivTituloCabecera,
#SectionLista .DivSubtituloCabecera,
#SectionCuenta .DivSubtituloCabecera,
#SectionCarro .DivSubtituloCabecera,
#SectionCatalogo .DivSubtituloCabecera,
#DivPagAltaProducto .DivSubtituloCabecera,
#DivPagAltaUsuario .DivSubtituloCabecera,
#DivPagSugerencias .DivSubtituloCabecera,
#PagCategorias .DivSubtituloCabecera {
	display:flex;
	justify-content: space-between;
	padding-bottom:5px;
}
*/
.DivTituloCabecera,
.DivSubtituloCabecera {
	display:flex;
	justify-content: space-between;
	padding-bottom:5px;
}

.DivSubtituloCabecera div {
	align-self: center;
	text-align:center;
}

.DivInfoIzq,
.DivInfoDer {
	align-self: flex-end !important; /* DEI */
	width:5%;
	text-align:center;
}
.DivTituloCabecera Div[class*="DivInfo"],
.DivSubtituloCabecera Div[class*="DivInfo"] {
	align-self: flex-end !important;  /*DEI*/
	width:5%;
	text-align:center;
	
/*	De momento, ocultaremos los iconos de las cabeceras, porque para saber qué hacen los iconos da lo mismo hacer click en el info que hacer click directamente en el icono, y en cambio se ve mal con tanto icono info. Para no dejar el espacio completamente vacío, lo haremos con visibility y reduciendo el ancho del div */
	visibility:collapse;
	width:2%;
}
/*#SectionLista .DivTituloCabecera .DivIconoUsuario,
#SectionCuenta .DivTituloCabecera .DivIconoUsuario {
	width:8%;
	text-align:center;
	padding-top:5px;
}*/
.DivTituloCabecera .DivIconoUsuario {
	width:8%;
	text-align:center;
	padding-top:5px;
}
Div[id^="Section"] .DivSubtituloCabecera Div[class*="DivIcono"],
Div[id^="Pag"] .DivSubtituloCabecera Div[class*="DivIcono"] {
	width:8%;
}

.DivTituloCabecera .DivTextTitulo,
.DivSubtituloCabecera .DivTextSubtitulo {
	width:74%;
	margin:0 auto;
}
#SectionLista .DivTituloCabecera .menu-toggle {
	justify-content: center;
	position:relative;
	width:8%;
	padding-top:10px;
	text-align:center;
}
#SectionLista .DivCubiertaBuscador {
	display:flex;
	justify-content: center !important;
	align-items:flex-end;
	width:80%;
	margin:0 auto;
}
#SectionLista .DivCubiertaBuscador .DivCuna {
	width:10%;
}
#SectionLista .DivCubiertaBuscador .DivBuscador {
	width:80% !important;
}
#SectionLista .DivCubiertaBuscador .DivInfoBuscador {
	align-items:flex-end !important;
	width:10%;
}
#SectionLista .DivTitulosTblDatos,
#SectionCatalogo .DivTitulosTblDatos {
	display:flex;
	justify-content: space-around;
}
#SectionLista .DivTitulosTblDatos div,
#SectionCatalogo .DivTitulosTblDatos div {
	/* Para centrar los contenidos, hacemos también flex los divs internos */
	display:flex;
	justify-content: center;
	align-items:center !important;
}
#SectionLista .DivTitulosTblDatos i,
#SectionCatalogo .DivTitulosTblDatos i {
	margin-left:10px;
}
#SectionCatalogo .DivTitulosTblDatos .DivTitProducto {
	width:70%;
}
#SectionCatalogo .DivTitulosTblDatos .DivTitCantidad {
	width:30%;
}
#SectionCarro .DivInfoIzq p{
	font-style:normal;
}
#SectionCarro .DivSelChecks {
	display:flex;
	justify-content: end;
	padding:0 !important;  /*DEI*/
}
#SectionCarro .DivSelChecks div {
	display:inline-block;
}
#SectionCarro .DivSelChecks .DivInfoIzq {
	padding-right:10px;
}
#SectionCarro .DivSelChecks .DivSelChecksCar_a_Lst {
	width:30%;
}
#ArticleAsignarUsuarios .DivInfoAsignUsu {
	position:absolute;
	left:100%;
	top:50%;
}
#SectionOpciones .DivCubiertaBoton,
#SectionUsuario .DivCubiertaBoton {
	display:flex;
	align-items:center;
	
	width:90%;
	margin:0 auto;
	padding-left:10px;
}
#SectionOpciones .DivInfoLlamarPredeterminada,
#SectionUsuario .DivInfoLlamarPredeterminada {
	padding-left:10px;
}

/* PARA LOS INFO QUE VAN CON FLOAT, COMO EL DE FormNvoSuscriptor.asp */
.DivInfoFloat {
	position:relative;
}
.DivInfoFloat .DivIconoInfo {
	position:absolute;
	bottom:50%;
	right:-20px;
}
.PagRegistro .DivInfoFloat .DivIconoInfo {
	bottom:23% !important;
	right:-25px !important;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS QUE DAN INFORMACIÓN SOBRE POSIBLES ACCIONES

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


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

ESTILOS PARA LOS TAMAÑOS DE FUENTE */

.txt-4 {
	font-size:var(--txt-4);
}
.txt-3 {
	font-size:var(--txt-3);
}
.txt-2 {
	font-size:var(--txt-2);
	line-height:20px;	
}
.txt-1 {
	font-size:var(--txt-1);
	line-height:22px;	
}
.txt0 {
	font-size:var(--txt0);
	line-height:24px;	
}
.txt1 {
	font-size:var(--txt1);
	line-height:26px;	
}
.txt2 {
	font-size:var(--txt2);
	line-height:28px;	
}
.txt3 {
	font-size:var(--txt3);
	line-height:30px;	
}
.txt4 {
	font-size:var(--txt4);
}
.txt5 {
	font-size:var(--txt5);
	line-height:32px;	
}
.txt6 {
	font-size:var(--txt6);
	line-height:32px;	
}

/* FIN DE ESTILOS PARA LOS TAMAÑOS DE FUENTE

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


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

ESTILOS PARA LOS ELEMENTOS DEL ICONO VER/OCULTAR (OJO ABIERTO / CERRADO) */

.DivCampoIconoVer {
	position:relative;
	padding:0;
	cursor:pointer;
}
i[class*="IconoVer"] {
	position:absolute;
	bottom:33px;
	right:3%;
	caret-color: transparent; /* Debe ir aquí, no en el DivInfo i */
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DEL ICONO VER/OCULTAR (OJO ABIERTO / CERRADO)

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


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

ESTILOS PARA LOS ELEMENTOS MARCAR/DESMARCAR CHECKBOX O RADIOS */

.TxtMarcarDesmarcar {
	margin-left:40%;
	text-align: right;
	font-style:italic;
	font-size:var(--txt-3);
	text-align:right;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS MARCAR/DESMARCAR CHECKBOX O RADIOS

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

p.NotaPieDeCampo {
	margin: -5px 0 40px;
	font-size: var(--txt-2);
	line-height:20px;
	text-align:center;
}


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

ESTILOS PARA LOS AVISOS DONDE SE MUESTRAN LOS CARACTERES RESTANTES DE UN CAMPO */

.DivCaracteresRestantes {
	position:absolute;
	height:30px;
	padding:0;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	color:grey;
	user-select:none;
}
.DivCaracteresRestantes span {
	float:right;
}
/* FIN DE ESTILOS PARA LOS AVISOS DONDE SE MUESTRAN LOS CARACTERES RESTANTES DE UN CAMPO

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


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

ESTILOS PARA LOS ELEMENTOS DEL BINOMIO PREFIJO-TELÉFONO */

.DivTelefono {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 10px;
}
.DivPrefijo {grid-area: 1 / 1 / 2 / 8;}
.DivMovil {grid-area: 1 / 8 / 2 / 21;}

.InputPrefijo {
	max-width:100%;
}
.InputTelefono {
	min-width:60%;
}
.DivTelefono input {
	display:inline;
  text-align: center;
}
.DivTelefono div {
	width:100%;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DEL BINOMIO PREFIJO-TELÉFONO

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


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

ESTILOS PARA LOS LOS ELEMENTOS DEL TEXTO ASTERISCO (AVISO CAMPOS NECESARIOS) */

.DivTxtCamposAsterisco {
	margin-top:-20px;
	text-align:right;
}
.DivTxtCamposAsterisco .SpanTxtCamposAsterisco {
	font-size:var(--txt-2);
	font-style:italic;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DEL TEXTO ASTERISCO (AVISO CAMPOS NECESARIOS)

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

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

ESTILOS PARA LOS LOS ELEMENTOS DE LAS PÁGINAS DE OK/ERROR */

.DivPagError .DivCamposError {
	border: 2px white solid !important;
	padding: 20px;
	
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
}
.DivPagError .DivCamposError p {
	margin:10px auto;
	text-align:center;
	line-height:25px;
}
.DivPagError .DivCamposError .VarTxtError {
	font-style:italic;
	font-weight:bold;
	color:var(--color6);
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DE LAS PÁGINAS DE OK/ERROR

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

#AvisoNvosProds {
	display:none;
}

.DivNotif {
	background-color:var(--color3);
	padding:10px;
	font-size:var(--txt-2);
	
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	border: 2px solid #ffffff;
}

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

ESTILOS PARA LOS LOS ELEMENTOS DE LA PÁGINA POLÍTICA DE PRIVACIDAD */

.DivPagPrivacidad .DivTxtContenido {
	padding:30px;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DE LA PÁGINA POLÍTICA DE PRIVACIDAD

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


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

ESTILOS PARA LOS LOS ELEMENTOS DE LAS TABLAS GRID Tabla2f3c (2 FILAS 3 CELDAS) */

.Tabla2f3c {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 1px;
	
	margin:0 auto;
	width:70%;
  padding: 1px;
}
/*grid-area: row-start / column-start / row-end / column-end | itemname;*/
.Tabla2f3c_C1 {
	grid-area: 1 / 1 / 2 / 11;
	text-align:center;
}
.Tabla2f3c_C2 {
	grid-area: 2 / 1 / 3 / 7;
	text-align:right;
}
.Tabla2f3c_C3 {
	grid-area: 2 / 7 / 3 / 11;
	text-align:left;
}
.Tabla2f3c > div {
  padding: 0px 5px;
  font-size: 14px;
}

/* Especiales para DivAvisoPermiso */
#DivAvisoPermiso .Tabla2f3c {
	width:100%;
}
#DivAvisoPermiso .Tabla2f3c_C1 {
	font-size:var(--txt-2);
}
#DivAvisoPermiso .Tabla2f3c_C2 {
	grid-area: 2 / 1 / 3 / 6;
	text-align:right;
}
#DivAvisoPermiso .Tabla2f3c_C3 {
	grid-area: 2 / 6 / 3 / 11;
	text-align:left;
}

/* Especiales para PagAltaUsuario */
.PagAltaUsuario .Tabla2f3c,
.DivPagPagos .Tabla2f3c {
  grid-template-columns: repeat(10, 1fr);
	align-items:center;
	width:100%;
}
/*grid-area: row-start / column-start / row-end / column-end | itemname;*/
.PagAltaUsuario .Tabla2f3c_C1,
.DivPagPagos .Tabla2f3c_C1 {
	grid-area: 1 / 1 / 2 / 11;
}
.PagAltaUsuario .Tabla2f3c_C2,
.DivPagPagos .Tabla2f3c_C2 {
	grid-area: 2 / 1 / 3 / 6;
}
.PagAltaUsuario .Tabla2f3c_C3,
.DivPagPagos .Tabla2f3c_C3 {
	grid-area: 2 / 6 / 3 / 11;
}
.PagAltaUsuario .Tabla2f3c div,
.DivPagPagos .Tabla2f3c div {
	text-align:center;
}
.PagAltaUsuario .Tabla2f3c_C2 a, .PagAltaUsuario .Tabla2f3c_C3 a {
	margin:0 auto;
	width:100%;
}
.PagAltaUsuario .Tabla2f3c button {
	width:100%;
	line-height:15px;
	padding:5px 0 !important;  /*DEI*/
}
/* Para seleccionar la segunda tabla de dos Tabla2f3c seguidas */
.Tabla2f3c + .Tabla2f3c {
	//margin:10px auto 50px;
}
/* FIN DE ESTILOS PARA LOS ELEMENTOS DE LAS TABLAS GRID Tabla2f3c (2 FILAS 3 CELDAS)

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


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

ESTILOS PARA LOS LOS ELEMENTOS DEL BOTÓN ACORDEÓN (DESPLEGABLE) */

.DivBotonAcordeon {
	margin-bottom:30px;

	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
}
.DivBotonAcordeon button {
	background-color:var(--color3A);
	margin-bottom:5px;
}
.DivBotonAcordeon div {
	background-color:var(--color3);
	margin-top:0;
	padding:0;
	border: 2px white solid !important;

	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
}
.DivBotonAcordeon div div {
	border: 2px transparent solid !important;
}
.DivInfoAcordeon {
	display:none;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DEL BOTÓN ACORDEÓN (DESPLEGABLE)

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

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

ESTILOS PARA LOS LOS ELEMENTOS RELACIONADOS CON EL ACORDEÓN DE SYA */

.Acordeon {
	margin:0 auto;
	width:95%;
}
.Acordeon .block {
	box-sizing: border-box;
	background-color:var(--color3);
	margin:0 auto;
	width:99%;
	height:0;
	opacity:0;
	overflow:hidden; /* Para ir ocultando el contenido a medida que se va cerrando el contenedor */
	-webkit-transition: all 2s; /* Safari */
	transition: all 2s;
}
/* Css para crear espacio equivalente al padding que no se puede poner */
.Acordeon .block p {
	margin:30px 50px;
	margin:20px 50px 10px;
	font-size:var(--txt-2);
	text-align:left !important;
	color:black;
}
/*.Acordeon .block p:first-child {
	margin-top:15px;
	margin-bottom:15px;
}*/
/* Como el ocultamiento mediante opacity hace que los elementos que lo tienen no se vean pero cubran o se solapen encima de los títulos sobre los que se debe hacer click, es necesario desactivar los eventos para los primeros */
.DivPagManual .Acordeon article,
.DivPagManual .Acordeon div,
.DivPagManual .Acordeon p,
.DivPagManual .Acordeon .block,
.DivPagManual .Acordeon .PieBlock {
	pointer-events: none !important;
}
.DivPagManual .Acordeon .block a, .Acordeon .block button {
	pointer-events: auto !important;
}
/* Y lo activamos para los títulos del acordeón */
.DivPagManual .Acordeon h5, .Acordeon h6 {
	background-color:#475757;
	background-color:var(--color1);
	margin:20px auto 0 !important;
	padding:5px 20px;
	font-size:12px;
	font-size:var(--txt-2);
	font-weight:bold;
	color:#f4f6f6;
	color:var(--color1A) !important;
	text-align:center;
	text-transform:uppercase;
	text-decoration:none !important;  /*DEI*/
	cursor:pointer;
	pointer-events: auto;
	border-radius: 10px 10px 0 0;
	
	/* Si hay PieBlock (barra debajo del div .block), el padding lo ponemos todo en el top y nulo en el bottom, para que siempre quede centrado verticalmente. Y le ponemos la respectiva transition */
	padding-top:10px !important /* DEI */;
	padding-bottom:0px !important /* DEI */;
	transition: padding-top 2s, padding-bottom 2s;

	-webkit-transition: all 2s !important; /* Safari */
	transition: all 2s !important;

}
.DivPagManual .Acordeon h6 {
	background-color:#3E92CC;
	background-color:var(--color6);
	max-height:20px !important;
	height:20px !important;
	padding-top:5px !important /* DEI */;
}
.DivPagManual .Acordeon h6 + .block {
	background-color:var(--color1A);
	padding-right:20px;
}
.DivPagManual .Acordeon h5:not(:first-child) {
	margin-top:35px;
}
/* Css para la barra que va debajo del block */
.DivPagManual .Acordeon .PieBlock {
	background-color:#475757;
	background-color:var(--color1);
	margin:0 auto;
	padding:0px;
	width:100%;
	height:10px; /* Igual al border-radius */
	pointer-events: none;
	border-radius: 0 0 10px 10px; /* Opuestos a los del h5 */
}
/* Css para la barra que va debajo del block */
.DivPagManual .Acordeon div[id^="AcordeonInt"] .PieBlock {
	background-color:#3E92CC;
	background-color:var(--color6);
}
.DivPagManual #AcordeonInt {
	margin:30px auto;
}
.DivPagManual p {
	font-size:var(--txt-2);
	text-align:left;
	text-transform:none;
	line-height:22px;
}
.DivPagManual div[id^="AcordeonInt"]:last-child {
	margin-bottom:20px;
}
.DivPagManual .Acordeon .DivTutorialImg img {
	margin: 0 10px;
}
.DivPagManual .Acordeon .DivTutorialImg {
	display:inline-block;
	margin: 0 auto;
	text-align:center;
}
.DivPagManual .Acordeon .block {
	transition: opacity 2s, height 2s !important;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS RELACIONADOS CON EL ACORDEÓN DE SYA

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


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

ESTILOS PARA LOS LOS ELEMENTOS DE LA CUENTA DE USUARIO */

.DivPagUsuarioCuenta .DivDatosUsuario {
	background-color: var(--color1A);
	margin:20px auto;
	padding:30px;
	width:80%;

	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	border: 2px solid #ffffff;

}
.DivPagUsuarioCuenta .DivDatosUsuario {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: min-content; /* Primera condición para altura según contenido */
  gap: 5px;
  padding: 10px;
}
.DivPagUsuarioCuenta .DivDatosUsuario > div {
  text-align: center;
  padding: 5px;
  font-size: 12px;
	height: fit-content; /* Segunda y última condición para altura según contenido */
}
.DivPagUsuarioCuenta .DivDatosUsuario > div:nth-last-child(2) {
	margin: 0 auto;
	grid-area: 7 / 1 / 8 / 3;
}
.DivPagUsuarioCuenta .DivDatosUsuario > div:nth-last-child(1) {
	margin: 0 auto;
	grid-area: 8 / 1 / 9 / 3;
}
.DivPagUsuarioCuenta .DivDatosUsuario > div:nth-child(2n+1) {
	text-align:right;
}
.DivPagUsuarioCuenta .DivDatosUsuario > div:nth-child(2n+2) {
	text-align:left;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DE LA CUENTA DE USUARIO

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

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

ESTILOS PARA LOS LOS ELEMENTOS DEL BOTÓN SWITCH SI/NO */

.ChkSwitchSiNo {
	display: inline-block;
	display:block;
	text-align:center;
	background-color:var(--color1A);
	margin:10px auto;
	padding:3px;
	caret-color: transparent;
}
.ChkSwitchSiNo span {
	display: inline-block;
	padding:0 10px;
}
.ChkSwitchSiNo .BotonSwitch {
	display: none;
}
.ChkSwitchSiNo .LabelSwitch {
	background-color: var(--color2);
	width: 3rem;
	height: 1.1rem;
	border-radius: 3rem;
	display: inline-block;
	position: relative;
}
.ChkSwitchSiNo .LabelSwitch:before {
	transition: .2s;
	display: block;
	position: absolute;
	top:0.05rem;
	left:0.12rem;
	width: 1rem;
	height: 1rem;
	background: #f4f6f6; /* Respaldo para la variable */
	background-color: var(--color1A);
	content: '';
	border-radius: 50%;
}
.ChkSwitchSiNo .BotonSwitch:checked + .LabelSwitch {
	background-color: var(--colorOn);
}
.ChkSwitchSiNo .BotonSwitch:checked + .LabelSwitch:before {
	transform: translateX(1.8rem);
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DEL BOTÓN SWITCH SI/NO

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

.DivPagPrivacidad p {
	font-size:13px;
	line-height:18px;
	text-align:justify !important; /*DEI*/
}
.TxtNombreEmpresa {
	font-style:oblique;
	font-weight:bolder;
	font-variant:small-caps;
}
.DivPagConContratacion .DivCampos p {
	text-align:justify !important; /*DEI*/
}
.DivPagSugerencias textarea {
	min-height:115px;
}
#TbEmail {
	text-transform:none; /* Para evitar que los campos Email pongan capital por defecto */
}


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

ESTILOS PARA LOS LOS ELEMENTOS DE LOS FORMULARIOS PARA ACEPTAR CONDICIONES Y PARA LOS AVISOS DE ERROR POR DATOS DE ACCESO. */

div[class^="DivAceptar"] .DivSectionUsuario,
.DivErroresCuenta .DivSectionUsuario {
	display:block !important;
	margin:5% auto;
	width:60%;
}
div[class^="DivAceptar"] .DivUsuario,
.DivErroresCuenta .DivUsuario {
	background-color:var(--color1A);
	width:70%;
	margin: 0 auto;
	padding:20px;

	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	border: 0px solid #000000;
}
div[class^="DivAceptar"] .DivUsuario p,
.DivErroresCuenta .DivUsuario p {
	font-size:var(--txt-2);
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS DE LOS FORMULARIOS PARA ACEPTAR CONDICIONES.

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

#WindowLoad {
	z-index:40 !important;
}
p.Centrado {
	text-align:center !important;
}
.ContenidoCentrado {
	text-align:center !important;
}
li {
	font-size:var(--txt-2);
	line-height:20px;
}

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

ESTILOS PARA LOS LOS ELEMENTOS QUE TIENEN QUE VER CON CUENTA DE USUARIO */

.AdmUsuario p {
	font-size: var(--txt-2);
}
.DivPagUsuarioCuenta .DivContenidoTotal {
	max-width:70%  !important;
}
.DivPagUsuarioCuenta .DivInfoRenovAuto {
	display:inline-block;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS QUE TIENEN QUE VER CON CUENTA DE USUARIO

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


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

ESTILOS PARA LOS LOS ELEMENTOS RELACIONADOS CON LAS COOKIES */

.FormCookies .DivBotones button {
	margin: 0;
}
.FormCookies .ChkSwitchSiNo {
	margin: 0;
}

/* FIN DE ESTILOS PARA LOS ELEMENTOS RELACIONADOS CON LAS COOKIES

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


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

ESTILOS PARA LOS AVISOS POR ERRORES DE ACCESO */

.DivErroresCuenta .DivNotif {
	background-color:var(--color3);
	margin:10px 0;
}
.DivErroresCuenta .DivNotif button {
	margin:10px 0 0;
}
.DivErroresCuenta .DivNotif div {
	margin:10px 0;
}
.DivErroresCuenta p {
	margin:5px auto;
}

/* FIN DE ESTILOS PARA LOS AVISOS POR ERRORES DE ACCESO

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

Div[class*="DivBoton"] {
	text-align:center;
}
.DivInputCorto {
	margin:0 auto;
	width:130px;
	text-align:center;
}
.DivInputCorto input {
	text-align:center;
}
.ResaltarRow {
	background-color:lime !important;
}