/* ==================================================================================

   SMAARTTARGET V5

   ÍNDICE DE CLASES - Main.css

   ================================================================================== */



/* VARIABLES Y COLORES:

   Línea 74 - :root (variables personalizadas)

*/



/* COMPONENTES PRINCIPALES:

   Línea 81 - .zCard

   Línea 93 - #IdImgLogoFooterBlanco

   Línea 97 - .zImg-Fluid

   Línea 102 - .zCursorPointer

   Línea 108 - .zProductoNombre

   Línea 113 - .zProductoPrecio

   Línea 120 - .img-fluid

   Línea 125 - .zmt-10

*/



/* FUENTES PERSONALIZADAS:

   Línea 131 - @font-face (ChelseaStudio)

   Línea 137 - @font-face (Poppins Regular)

   Línea 144 - @font-face (Poppins Medium)

   Línea 151 - @font-face (Poppins Bold)

*/



/* NOTIFICACIONES:

   Línea 158 - CLASES DE NOTIFICACION

   Línea 164 - .center

   Línea 173 - .notification

   Línea 194 - .notification .notification-icon

   Línea 202 - .details

   Línea 213 - .name

   Línea 218 - .message

   Línea 225 - .zbtn2 (BOTONES)

   Línea 236 - .zbtn

   Línea 246 - .zbtn-Verde

   Línea 250 - .zbtn-Ingresar

   Línea 254 - .zbtn-General

   Línea 258 - .zinput

   Línea 274 - .inputl:focus

   Línea 282 - .notify

   Línea 292 - .notify span

   Línea 296 - .notification.fadeout

   Línea 301 - .notification.active

   Línea 308 - .notification.active .notification-icon

   Línea 315 - .notification .notification-close-icon

   Línea 324 - @keyframes showNote

   Línea 344 - @keyframes resize

*/



/* MODAL:

   Línea 361 - MODAL BASE

   Línea 364 - .zModal

   Línea 376 - .modalConido

   Línea 382 - .zModalTitutlo, .zModalCuerpo, .zModalPie

   Línea 387 - .zModalTitutlo

   Línea 394 - .zModalCuerpo

   Línea 400 - .zModalPie

   Línea 406 - .zw-100

   Línea 410 - .zfont-s20

   Línea 414 - .zfont-bold

*/



/* WHATSAPP CHAT:

   Línea 418 - WHATSAPP CHAT DE CONTACTO

   Línea 421 - #IdWhatsappChat

   Línea 427 - #IdWhatsappChat img

*/



/* CLASES DE SUSTITUCIÓN DE BOOTSTRAP - PADDING Y TEXT-ALIGN:

   Línea 432 - Padding General (todos los lados)

   Línea 445 - Padding Start (izquierda)

   Línea 465 - Padding End (derecha)

   Línea 490 - Padding Top (arriba)

   Línea 515 - Padding Bottom (abajo)

   Línea 540 - Text Align

*/



:root {

  --color-ingresar: #c2a476;

}



.zCard {

  border: 1px solid #ddd;

  border-radius: 8px;

  padding: 10px;

  margin-top: 15px;

  margin-bottom: 20px;

  background-color: #fff;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}



#IdImgLogoFooterBlanco {

  width: 100px;

  height: auto;

  margin-bottom: 20px;

}



.zImg-Fluid {

  max-width: 100%;

  height: auto;

}



.zCursorPointer {

  cursor: pointer;

}



/* Estilos para Prodcuto */



.zProductoNombre {

  font-size: 18px;

  margin-top: 10px;

}



.zProductoPrecio {

  font-size: 22px;

  font-weight: bold;

  color: #555;

  margin-top: 5px;

}



.img-fluid {

  width: 100%;

  height: auto;

}



.zmt-10 {

  margin-top: 10px;

}



/* ---------- FUENTES PERSONALIZADAS */



@font-face {

  font-family: "ChelseaStudio";

  src: url("/fonts/ChelseaStudio.TTF") format("truetype");

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: "Poppins";

  src: url("/fonts/Poppins-Regular.ttf") format("truetype");

  font-weight: 400;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Poppins";

  src: url("/fonts/Poppins-Medium.ttf") format("truetype");

  font-weight: 500;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Poppins";

  src: url("/fonts/Poppins-Bold.ttf") format("truetype");

  font-weight: 700;

  font-style: normal;

  font-display: swap;

}



/*----------- CLASES DE NOTIFICACION    */



.center {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgb(246, 248, 250);

}



.notification {

  position: fixed;

  top: 15px;

  left: 50%;

  transform: translate(-50%, -200px);

  background: rgb(0, 0, 0);

  width: fit-content;

  height: 54px;

  box-sizing: border-box;

  padding: 8px;

  border-radius: 15mm;

  display: flex;

  align-items: center;

  justify-content: space-between;

  overflow: hidden;

  box-shadow: rgba(38, 57, 77, 0.7) 0px 20px 30px -10px;

  transition: 0.5s ease-in;

  max-width: 1000px;

  z-index: 9999999999999999999999999999999;

}



.notification .notification-icon {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  border: 2px solid rgb(80, 80, 80);

  transition: 0.35s ease-in;

}



.details {

  display: flex;

  align-items: flex-start;

  justify-content: center;

  flex-direction: column;

  font-family: poppins;

  margin: 0 15px;

  padding: 1px;

  white-space: nowrap;

}



.name {

  font-size: 12px;

  color: rgba(255, 255, 255, 0.6);

}



.message {

  font-size: 14px;

  color: white;

}



/*----------- BOTONES E INPUTS */



.zbtn2 {

  width: 35px;

  height: 35px;

  color: white;

  text-align: center;

  line-height: 35px;

  font-size: 22px;

  border-radius: 50%;

  cursor: pointer;

}



.zbtn {

  width: 70%;

  color: white;

  text-align: center;

  line-height: 35px;

  font-size: 16px;

  border-radius: 10px;

  cursor: pointer;

}



.zbtn-Verde {

  background-color: #28a745;

}



.zbtn-Ingresar {

  background-color: var(--color-ingresar);

}



.zbtn-General {

  background-color: var(--color-ingresar);

}



.zinput {

  display: block;

  width: 100%;

  padding: 0.375rem 0.75rem;

  font-size: 1.5rem;

  line-height: 1.5;

  color: #212529;

  background-color: #fff;

  background-clip: padding-box;

  border: 1px solid #ced4da;

  border-radius: 0.7rem;

  transition:

    border-color 0.15s ease-in-out,

    box-shadow 0.15s ease-in-out;

}



.inputl:focus {

  color: #212529;

  background-color: #fff;

  border-color: #86b7fe;

  outline: 0;

  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);

}



.notify {

  background: rgb(226, 230, 233);

  width: 50px;

  height: 50px;

  border-radius: 50%;

  border: none;

  outline: none;

  cursor: pointer;

}



.notify span {

  font-size: 30px;

}



.notification.fadeout {

  opacity: 0;

  transition: opacity 500ms ease;

}



.notification.active {

  animation: showNote 1s ease-in-out;

  max-width: 1000px;

  transform: translate(-50%, 0);

  padding: 8px;

}



.notification.active .notification-icon {

  animation: resize 1s ease-in-out;

  width: 32px;

  height: 32px;

  border: 4px solid rgb(80, 80, 80);

}



.notification .notification-close-icon {

  width: 44px;

  height: 44px;

  padding: 7px;

  display: block;

  object-fit: contain;

  border: none;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.2);

}





/* --------- ESTILOS DE PRODUCTOS */

.zProductoImagen {

  width: 100%;

  height: auto;

  border-radius: 8px;

}



.zProductoImagen:hover {

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}



.zProductoNombre {

  font-size: 14px;

  margin-top: 10px;

  height: 40px;

}



#IdFooterEmpresaIntro {

  font-size: 12px;

}



@keyframes showNote {

  0% {

    transform: translate(-50%, -200px);

    max-width: 54px;

    padding: 0;

  }



  35% {

    transform: translate(-50%, 0px);

    max-width: 54px;

    padding: 0;

  }



  100% {

    transform: translate(-50%, 0px);

    max-width: 1000px;

    padding: 8px;

  }

}



@keyframes resize {



  0%,

  40% {

    width: 38px;

    height: 38px;

    border: 8px solid rgb(80, 80, 80);

  }



  100% {

    width: 32px;

    height: 32px;

    border: 4px solid rgb(80, 80, 80);

  }

}



/*----------- MODAL BASE */



.zModal {

  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 16px;

  background: rgba(255, 255, 255, 0.8);

}



.modalConido {

  width: 100%;

  max-width: 400px;

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);

}



.zModalTitutlo,

.zModalCuerpo,

.zModalPie {

  width: 100%;

  background: #ffffff;

}



.zModalTitutlo {

  padding: 14px 16px;

  font-size: 18px;

  font-weight: 700;

  border-radius: 12px 12px 0 0;

  border-bottom: 1px solid #e8e8e8;

}



.zModalCuerpo {

  padding: 16px;

  font-size: 15px;

  color: #333333;

}



.zModalPie {

  padding: 12px 16px;

  border-top: 1px solid #e8e8e8;

  border-radius: 0 0 12px 12px;

}



.zw-100 {

  width: 100%;

}



.zfont-s20 {

  font-size: 20px;

}



.zfont-bold {

  font-weight: bold;

}



/*----------- WHATSAPP CHAT DE CONTACTO */



#IdWhatsappChat {

  width: 200px;

  position: fixed;

  bottom: 20px;

  right: 20px;

}



#IdWhatsappChat img {

  width: 100%;

}



/* ==================================================================================

   CLASES DE SUSTITUCIÓN DE BOOTSTRAP - PADDING Y TEXT-ALIGN

   Estas clases permiten trabajar sin depender de Bootstrap

   ================================================================================== */



/* Padding General (todos los lados) */

.zp-0 {

  padding: 0px;

}



.zp-1 {

  padding: 4px;

}



.zp-2 {

  padding: 8px;

}



.zp-3 {

  padding: 12px;

}



.zp-4 {

  padding: 16px;

}



.zp-5 {

  padding: 20px;

}



/* Padding Start (izquierda) */

.zps-0 {

  padding-left: 0px;

}



.zps-1 {

  padding-left: 4px;

}



.zps-2 {

  padding-left: 8px;

}



.zps-3 {

  padding-left: 12px;

}



.zps-4 {

  padding-left: 16px;

}



.zps-5 {

  padding-left: 20px;

}



/* Padding End (derecha) */

.zpe-0 {

  padding-right: 0px;

}



.zpe-1 {

  padding-right: 4px;

}



.zpe-2 {

  padding-right: 8px;

}



.zpe-3 {

  padding-right: 12px;

}



.zpe-4 {

  padding-right: 16px;

}



.zpe-5 {

  padding-right: 20px;

}



/* Padding Top (arriba) */

.zpt-0 {

  padding-top: 0px;

}



.zpt-1 {

  padding-top: 4px;

}



.zpt-2 {

  padding-top: 8px;

}



.zpt-3 {

  padding-top: 12px;

}



.zpt-4 {

  padding-top: 16px;

}



.zpt-5 {

  padding-top: 20px;

}



/* Padding Bottom (abajo) */

.zpb-0 {

  padding-bottom: 0px;

}



.zpb-1 {

  padding-bottom: 4px;

}



.zpb-2 {

  padding-bottom: 8px;

}



.zpb-3 {

  padding-bottom: 12px;

}



.zpb-4 {

  padding-bottom: 16px;

}



.zpb-5 {

  padding-bottom: 20px;

}



/* Margin General (todos los lados) */

.zm-0 {

  margin: 0px;

}



.zm-1 {

  margin: 4px;

}



.zm-2 {

  margin: 8px;

}



.zm-3 {

  margin: 12px;

}



.zm-4 {

  margin: 16px;

}



.zm-5 {

  margin: 20px;

}



/* Margin Start (izquierda) */

.zms-0 {

  margin-left: 0px;

}



.zms-1 {

  margin-left: 4px;

}



.zms-2 {

  margin-left: 8px;

}



.zms-3 {

  margin-left: 12px;

}



.zms-4 {

  margin-left: 16px;

}



.zms-5 {

  margin-left: 20px;

}



/* Margin End (derecha) */

.zme-0 {

  margin-right: 0px;

}



.zme-1 {

  margin-right: 4px;

}



.zme-2 {

  margin-right: 8px;

}



.zme-3 {

  margin-right: 12px;

}



.zme-4 {

  margin-right: 16px;

}



.zme-5 {

  margin-right: 20px;

}



/* Margin Top (arriba) */

.zmt-0 {

  margin-top: 0px;

}



.zmt-1 {

  margin-top: 4px;

}



.zmt-2 {

  margin-top: 8px;

}



.zmt-3 {

  margin-top: 12px;

}



.zmt-4 {

  margin-top: 16px;

}



.zmt-5 {

  margin-top: 20px;

}



/* Margin Bottom (abajo) */

.zmb-0 {

  margin-bottom: 0px;

}



.zmb-1 {

  margin-bottom: 4px;

}



.zmb-2 {

  margin-bottom: 8px;

}



.zmb-3 {

  margin-bottom: 12px;

}



.zmb-4 {

  margin-bottom: 16px;

}



.zmb-5 {

  margin-bottom: 20px;

}



/* Text Align */

.ztext-center {

  text-align: center;

}



.ztext-left {

  text-align: left;

}



.ztext-right {

  text-align: right;

}



.ztext-justify {

  text-align: justify;

}