/*botones blanco, naranja, verde, azul y morado*/
/*
	
				boton-text-all-color
				boton-centro
				boton-azul
				boton-verde
				boton-blanco-text
				boton-blanco
				boton-naranja
				boton-morado
			
			
			
			*/
/*General*/

.boton-text-all-color {
  display: block;
  font-family: Arial, Helvetica;
  font-size: 25px;
  font-weight: bold;
  line-height: 1.4;
}

.boton-centro {
  cursor: pointer;
  display: inline-block;
  margin-right: 0.1em;
  overflow: visible;
  padding: 5px 10px;
  position: relative;
  text-align: center;
  text-decoration: none;
  border-radius: 4px 4px 4px 4px;
}

/* Botón Rojo */
.boton-rojo {
  background: linear-gradient(to top, #e85252, #d03737);
  border: 1px solid #a32e2e;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  padding: 8px 15px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.boton-rojo:hover {
  background: linear-gradient(to top, #e53e3e, #cb2020);
  border-color: #991616;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.boton-rojo:active {
  background: linear-gradient(to top, #d33232, #c12020);
  border: 1px solid #8c1515;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Botón Rojo2 (sin borde y con tamaño mínimo) */
.boton-rojo2 {
  background: linear-gradient(to top, #e85252, #d03737);
  border: none;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  padding: 8px 15px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.boton-rojo2:hover {
  background: linear-gradient(to top, #e53e3e, #cb2020);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.boton-rojo2:active {
  background: linear-gradient(to top, #d33232, #c12020);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Botón Azul */
.boton-azul {
  background: linear-gradient(to top, #3e9de5, #206bcb);
  border: 1px solid #2e69a3;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  padding: 8px 15px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.boton-azul:hover {
  background: linear-gradient(to top, #3a8fd0, #1f5ea7);
  border-color: #165899;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.boton-azul:active {
  background: linear-gradient(to top, #3282d3, #2775b8);
  border: 1px solid #154c8c;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Botón Gris */
.boton-gris {
  background: linear-gradient(to top, #e1e2e2, #9e9e9f);
  border: 1px solid #9c9d9d;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  padding: 8px 15px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.boton-gris:hover {
  background: linear-gradient(to top, #c7c7c7, #969797);
  border-color: #848484;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.boton-gris:active {
  background: linear-gradient(to top, #a3a3a5, #8a8b8b);
  border: 1px solid #727373;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Botón Verde */
.boton-verde {
  background: linear-gradient(to top, #80d64a, #56c133);
  border: 1px solid #3e9a20;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  padding: 8px 15px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.boton-verde:hover {
  background: linear-gradient(to top, #67bb37, #6fcb3a);
  border-color: #59a62a;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.boton-verde:active {
  background: linear-gradient(to top, #32d335, #2eb42e);
  border: 1px solid #0e8e1e;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Botón Verde2 (sin borde y con tamaño mínimo) */
.boton-verde2 {
  background: linear-gradient(to top, #80d64a, #56c133);
  border: none;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  padding: 8px 15px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.boton-verde2:hover {
  background: linear-gradient(to top, #67bb37, #6fcb3a);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.boton-verde2:active {
  background: linear-gradient(to top, #32d335, #2eb42e);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Botón Blanco */
.boton-blanco {
  background: linear-gradient(to top, #ffffff, #dddddd);
  border: 1px solid #999999;
  border-radius: 5px;
  color: #000;
  font-weight: bold;
  padding: 8px 15px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.boton-blanco:hover {
  background: linear-gradient(to top, #ffffff, #eeeeee);
  border-color: #cccccc;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.boton-blanco:active {
  background: linear-gradient(to top, #cccccc, #bbbbbb);
  border: 1px solid #ffffff;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
  text-shadow: none;
}

/* Botón Naranja */
.boton-naranja {
  background: linear-gradient(to top, #fd9424, #cb8c38);
  border: 1px solid #b07840;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  padding: 8px 15px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.boton-naranja:hover {
  background: linear-gradient(to top, #eb9131, #ba7123);
  border-color: #bf8344;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.boton-naranja:active {
  background: linear-gradient(to top, #e28222, #d17020);
  border: 1px solid #954f09;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Botón Naranja2 (sin borde y con tamaño mínimo) */
.boton-naranja2 {
  background: linear-gradient(to top, #fd9424, #cb8c38);
  border: none;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  padding: 8px 15px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.boton-naranja2:hover {
  background: linear-gradient(to top, #eb9131, #ba7123);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.boton-naranja2:active {
  background: linear-gradient(to top, #e28222, #d17020);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Botón Morado */
.boton-morado {
  background: linear-gradient(to top, #a048e4, #7030a0);
  border: 1px solid #6f2ba2;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  padding: 8px 15px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.boton-morado:hover {
  background: linear-gradient(to top, #9e3ee8, #8220cd);
  border-color: #63169d;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.boton-morado:active {
  background: linear-gradient(to top, #892ed0, #8120cb);
  border: 1px solid #5b1690;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/*------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------Altura reducida MUUUCHOOO------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------*/
/* Botón Morado3 */
.boton-morado3 {
  background: linear-gradient(to top, #a048e4, #8d40c7);
  border: 1px solid #6f2ba2;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  padding: 1px 6px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.boton-morado3:hover {
  background: linear-gradient(to top, #8220cd, #9e3ee8);
  border-color: #63169d;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.boton-morado3:active {
  background: linear-gradient(to top, #892ed0, #8120cb);
  border: 1px solid #5b1690;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Botón Verde3 */
.boton-verde3 {
  background: linear-gradient(to top, #80d64a, #56c133);
  border: 1px solid #53a32e;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  padding: 1px 6px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.boton-verde3:hover {
  background: linear-gradient(to top, #67bb37, #6fcb3a);
  border-color: #59a62a;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.boton-verde3:active {
  background: linear-gradient(to top, #32d335, #2eb42e);
  border: 1px solid #0e8e1e;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Botón Rojo3 */
.boton-rojo3 {
  background: linear-gradient(to top, #e85252, #d03737);
  border: 1px solid #a32e2e;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  padding: 1px 6px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.boton-rojo3:hover {
  background: linear-gradient(to top, #e53e3e, #cb2020);
  border-color: #991616;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.boton-rojo3:active {
  background: linear-gradient(to top, #d33232, #c12020);
  border: 1px solid #8c1515;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Botón Azul3 */
.boton-azul3 {
  background: linear-gradient(to top, #52a7e8, #3779d0);
  border: 1px solid #2e69a3;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  padding: 1px 6px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.boton-azul3:hover {
  background: linear-gradient(to top, #206acb, #3e9de5);
  border-color: #165899;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.boton-azul3:active {
  background: linear-gradient(to top, #3282d3, #2775b8);
  border: 1px solid #154c8c;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/*------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------Altura reducida------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------*/
/* Botón Morado2 */
.boton-morado2 {
  background: linear-gradient(to top, #8d40c7, #a048e4);
  background-clip: padding-box;
  border: 1px solid #6f2ba2;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  padding: 3px 6px;
  text-align: center;
  text-shadow: 0 -1px 1px #7c2cb9;
  transition: all 0.3s ease;
}
.boton-morado2:hover {
  background: linear-gradient(to top, #8220cd, #9e3ee8);
  background-clip: padding-box;
  border: 1px solid #63169d;
  box-shadow: inset 0 1px 0 0 #ae62e8;
  cursor: pointer;
  text-shadow: 0 -1px 1px #6d1daa;
}
.boton-morado2:active {
  background: #892ed0;
  background-clip: padding-box;
  border: 1px solid #5b1690;
  box-shadow: inset 0 0 6px 3px #7116b6, 0 1px 0 0 #fff;
  text-shadow: 0 -1px 1px #6b22a2;
}

/* Botón Verde2 */
.boton-verde2 {
  background: linear-gradient(to top, #56c133, #80d64a);
  background-clip: padding-box;
  border: 1px solid #53a32e;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  padding: 3px 6px;
  text-align: center;
  text-shadow: 0 -1px 1px #6acb3c;
  transition: all 0.3s ease;
}
.boton-verde2:hover {
  background: linear-gradient(to top, #6fcb3a, #67bb37);
  background-clip: padding-box;
  border: 1px solid #59a62a;
  box-shadow: inset 0 1px 0 0 #a3eb72;
  cursor: pointer;
  text-shadow: 0 -1px 1px #6acb3c;
}
.boton-verde2:active {
  background: #32d335;
  background-clip: padding-box;
  border: 1px solid #0e8e1e;
  box-shadow: inset 0 0 6px 3px #1ab928, 0 1px 0 0 #fff;
  text-shadow: 0 -1px 1px #26ad2b;
}

/* Botón Rojo2 */
.boton-rojo2 {
  background: linear-gradient(to top, #d03737, #e85252);
  background-clip: padding-box;
  border: 1px solid #a32e2e;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  padding: 3px 6px;
  text-align: center;
  text-shadow: 0 -1px 1px #bc3232;
  transition: all 0.3s ease;
}
.boton-rojo2:hover {
  background: linear-gradient(to top, #cb2020, #e53e3e);
  background-clip: padding-box;
  border: 1px solid #991616;
  box-shadow: inset 0 1px 0 0 #e96262;
  cursor: pointer;
  text-shadow: 0 -1px 1px #ab1d1d;
}
.boton-rojo2:active {
  background: #d33232;
  background-clip: padding-box;
  border: 1px solid #8c1515;
  box-shadow: inset 0 0 6px 3px #b51616, 0 1px 0 0 #fff;
  text-shadow: 0 -1px 1px #a42323;
}

/* Botón Azul2 */
.boton-azul2 {
  background: linear-gradient(to top, #3779d0, #52a7e8);
  background-clip: padding-box;
  border: 1px solid #2e69a3;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  padding: 3px 6px;
  text-align: center;
  text-shadow: 0 -1px 1px #3275bc;
  transition: all 0.3s ease;
}
.boton-azul2:hover {
  background: linear-gradient(to top, #206acb, #3e9de5);
  background-clip: padding-box;
  border: 1px solid #165899;
  box-shadow: inset 0 1px 0 0 #62b1e9;
  cursor: pointer;
  text-shadow: 0 -1px 1px #1d62ab;
}
.boton-azul2:active {
  background: #3282d3;
  background-clip: padding-box;
  border: 1px solid #154c8c;
  box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
  text-shadow: 0 -1px 1px #2361a4;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------- Botones COLOR TD-----------------------------------------------------------------*/
/*--------------------------------------------------------- Botones COLOR TD-----------------------------------------------------------------*/
/*--------------------------------------------------------- Botones COLOR TD-----------------------------------------------------------------*/
/*--------------------------------------------------------- Botones COLOR TD-----------------------------------------------------------------*/
/*--------------------------------------------------------- Botones COLOR TD-----------------------------------------------------------------*/
/*--------------------------------------------------------- Botones COLOR TD-----------------------------------------------------------------*/
/*--------------------------------------------------------- Botones COLOR TD-----------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* Botón Rojo TD */
.boton-rojo-td {
  background: linear-gradient(to top, #e85252, #d03737);
  background-clip: padding-box;
  border: 1px solid #a32e2e;
  border-top-color: #af4040;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 0 #eb7272, 0 1px 2px 0 #b3b3b3;
  color: #fff;
  font-weight: bold;
  padding: 5px 10px;
  text-align: center;
  text-shadow: 0 -1px 1px #bc3232;
  vertical-align: middle;
  transition: all 0.3s ease;
}
.boton-rojo-td:hover {
  background: linear-gradient(to top, #e53e3e, #cb2020);
  background-clip: padding-box;
  border: 1px solid #991616;
  box-shadow: inset 0 1px 0 0 #e96262;
  text-shadow: 0 -1px 1px #ab1d1d;
  color: yellow;
  cursor: pointer;
}
.boton-rojo-td:active {
  background: #d33232;
  background-clip: padding-box;
  border: 1px solid #8c1515;
  border-bottom: 1px solid #8e0e0e;
  box-shadow: inset 0 0 6px 3px #b51616, 0 1px 0 0 #fff;
  text-shadow: 0 -1px 1px #a42323;
  color: #fff;
}

/* Botón Azul TD */
.boton-azul-td {
  background: linear-gradient(to top, #3e9de5, #206acb);
  background-clip: padding-box;
  border: 1px solid #2e69a3;
  border-top-color: #4081af;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
  color: #fff;
  font-weight: bold;
  padding: 5px 10px;
  text-align: center;
  text-shadow: 0 -1px 1px #3275bc;
  vertical-align: middle;
  transition: all 0.3s ease;
}
.boton-azul-td:hover {
  background: linear-gradient(to top, #3e9de5, #206acb);
  background-clip: padding-box;
  border: 1px solid #165899;
  box-shadow: inset 0 1px 0 0 #62b1e9;
  text-shadow: 0 -1px 1px #1d62ab;
  color: yellow;
  cursor: pointer;
}
.boton-azul-td:active {
  background: #3282d3;
  background-clip: padding-box;
  border: 1px solid #154c8c;
  border-bottom: 1px solid #0e408e;
  box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
  text-shadow: 0 -1px 1px #2361a4;
  color: #fff;
}

/* Botón Verde TD */
.boton-verde-td {
  background: linear-gradient(to top, #80d64a, #56c133);
  background-clip: padding-box;
  border: 1px solid #53a32e;
  border-top-color: #6caf40;
  border-radius: 5px;
  box-shadow: inset 0 -1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
  color: #fff;
  font-weight: bold;
  padding: 5px 10px;
  text-align: center;
  text-shadow: 0 -1px 1px #6acb3c;
  vertical-align: middle;
  transition: all 0.3s ease;
}
.boton-verde-td:hover {
  background: linear-gradient(to top, #67bb37, #6fcb3a);
  background-clip: padding-box;
  border: 1px solid #59a62a;
  box-shadow: inset 0 1px 0 0 #a3eb72;
  text-shadow: 0 -1px 1px #6acb3c;
  color: yellow;
  cursor: pointer;
}
.boton-verde-td:active {
  background: #32d335;
  background-clip: padding-box;
  border: 1px solid #0e8e1e;
  border-bottom: 1px solid #0e408e;
  box-shadow: inset 0 0 6px 3px #1ab928, 0 1px 0 0 #fff;
  text-shadow: 0 -1px 1px #26ad2b;
  color: #fff;
}

/* Botón Morado TD */
.boton-morado-td {
  background: linear-gradient(to top, #a048e4, #8d40c7);
  background-clip: padding-box;
  border: 1px solid #6f2ba2;
  border-top-color: #803db3;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 0 #b671eb, 0 1px 2px 0 #b3b3b3;
  color: #fff;
  font-weight: bold;
  padding: 5px 10px;
  text-align: center;
  text-shadow: 0 -1px 1px #7c2cb9;
  vertical-align: middle;
  transition: all 0.3s ease;
}
.boton-morado-td:hover {
  background: linear-gradient(to top, #8220cd, #9e3ee8);
  background-clip: padding-box;
  border: 1px solid #63169d;
  box-shadow: inset 0 1px 0 0 #ae62e8;
  text-shadow: 0 -1px 1px #6d1daa;
  color: yellow;
  cursor: pointer;
}
.boton-morado-td:active {
  background: #892ed0;
  background-clip: padding-box;
  border: 1px solid #5b1690;
  border-bottom: 1px solid #560d8e;
  box-shadow: inset 0 0 6px 3px #7116b6, 0 1px 0 0 #fff;
  text-shadow: 0 -1px 1px #6b22a2;
  color: #fff;
}

.cajamensajes {
  min-width: 100px;
  cursor: pointer;
}
.cajamensajes:hover {
  opacity: 1;
}

.fondotextoverde {
    background: linear-gradient(to top, #00CC00, #009900);
    background-clip: padding-box;
    border: 1px solid #00CC00;
    border-radius: 10px;
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    margin-bottom: 3px;
    user-select: none;       /* Evita la selección de texto */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
  
  .fondotextoverde:hover {
    background: linear-gradient(to top, #00FF00, #00CC00);
    border-color: #00B300;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
  
  .fondotextoverde:active {
    background: linear-gradient(to top, #009900, #007700);
    border-color: #007700;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
  }