/*=============================================
REDES SOCIALES
=============================================*/
.redSocial{
	width:30px;
	height:30px;
	text-align: center;
	line-height:30px;
  padding: 8px;
}

/*FACEBOOK*/
.facebookBlanco{
	color:white;
  background-color:black;
}
.facebookNegro{
	color:black;
}
.facebookColor{
	color:white;
	background:#46639f;
}

/*YOUTUBE*/
.youtubeColor{
	color:white;
	background:#ff0000;
}
.youtubeBlanco{
	color:white;
  background-color:black;
}
.youtubeNegro{
	color:black;
}

/*TWITTER*/
.twitterColor{
	color:white;
	background:#232323;
}
.twitterBlanco{
	color:white;  
  background-color:black;
}
.twitterNegro{
	color:black;
}

/*TIKTOK*/
.googleColor{
	color:white;
	background:linear-gradient(45deg, #2af0ea, #fe2858,  #397684);
}
.googleBlanco{
	color:white;
  background-color:black;
}
.googleNegro{
	color:black;
}

/*INSTAGRAM*/
.instagramColor{
	color:white;
	background:linear-gradient(45deg, #833ab4, #e1306c,  #f77737);
}
.instagramBlanco{
	color:white; 
  background-color:black;
}
.instagramNegro{
	color:black;
}

/* whatsapp */
.whatsappColor{
	color:white;
	background-color:#075e54;
}
.whatsappBlanco{
	color:white;
  background-color:black;

}
.whatsappNegro{
	color:black;
}

/* -------------------------------------------------------------------------- */
/*                            INFORMACION COMERCIO                            */
/* -------------------------------------------------------------------------- */
.costoNacional{
  display: grid;
  justify-items:auto;
  grid-template-columns:repeat(4,auto);
  margin:5px 5px;
  gap: 8px;
}
.costoNacional .valorDpto{
  margin-bottom: 6px; 
}
.costoNacional .etiqueta{
  margin:6px 0 0 6px; 
}


/* -------------------------------------------------------------------------- */
/*               GRID PARA INGRESAR CANTIDAD COLORES POR PRODUCTo             */
/* -------------------------------------------------------------------------- */
.layoutCantidades {
  width: 100%;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* -------------------------------------------------------------------------- */
/*                             BOTON AL CENTRO xy                             */
/* -------------------------------------------------------------------------- */
.centro{
  display: grid;
  place-items: center;
  float: right;
}
.selProductoManual{
  margin-bottom: 7px;
}

/* -------------------------------------------------------------------------- */
/*                       ACOMODAR AL CONTENIDO TEXTAREA                       */
/* -------------------------------------------------------------------------- */
textarea{
  field-sizing: content;
}

/* -------------------------------------------------------------------------- */
/*                                    LOGIN                                   */
/* -------------------------------------------------------------------------- */
.login-box {
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.login-box-body {
  padding: 20px;
  border-radius: 10px;
  background-color: #f9f9f9;
}

.login-box-header {
  border-radius: 10px 10px 0 0;
  background-color: #5EC4A4;
  color: #fff;
  padding: 10px;
  margin-top: 50%;
  text-align: center;
}

.login-logo {
  margin: 0 auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #fff;
  padding: 5px;
}

.login-logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.login-box-msg {
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.btn-primary {
  border-radius: 5px;
}

.imagen-fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(4px);
  z-index: -1;
}

.btn-mobi{
  background-color: #5EC4A4;
  color:#9FB8D2;
}

.login-box-body {
  text-align: center;
}

/* -------------------------------------------------------------------------- */
/*                         VENTANA MODAL VENTA MANUAL                         */
/* -------------------------------------------------------------------------- */
.btnLimpiarCliente {
  background-color: #dd4b39;
  color: white;
  border-color: #d73925;
  transition: all 0.3s;
}

.btnLimpiarCliente:hover {
  background-color: #c23321;
  border-color: #b0281a;
}

.contenedor-colores {
  width: 100%;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
.contenedor-colores > .form-group{
  flex-shrink: 0;
}

#contenedorProductos > .contenedor-producto{
  margin-bottom: 5px;
  border-radius: 10px;
  background-color: #00894957;
}

/* -------------------------------------------------------------------------- */
/*                           PANTALLA INICIO O PANEL                          */
/* -------------------------------------------------------------------------- */
.label-xl{
  height: 20px;
  width: 100px;
  font-size: 15px;
}

/* -------------------------------------------------------------------------- */
/*                             MODAL NUEVO CLIENTE                            */
/* -------------------------------------------------------------------------- */
.modal-content {
  border-radius: 0.8rem;
  overflow: hidden;
}

.bg-gradient-primary {
  background: linear-gradient(135deg, #3c8dbc 0%, #2d6a9f 100%);
}

.custom-file-label::after {
  content: "Examinar";
  background-color: #e9ecef;
  color: #495057;
}

.form-control {
  transition: all 0.3s ease;
  border: 1px solid #ced4da;
}

.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(60, 141, 188, 0.25);
  border-color: #3c8dbc;
}

.input-group-text {
  transition: all 0.3s ease;
}

/* -------------------------------------------------------------------------- */
/*                       MENSAJE DE VALIDACION DE CAMPOS                      */
/* -------------------------------------------------------------------------- */
.error-message {
  font-size: 1.2rem;
  color: #dc3545;
  padding: 2px 5px;
  background-color: #f8d7da;
  border-radius: 3px;
  display: inline-block;
  margin-top: 2px;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}