/* ======== COMPLEMENTO CSS ORIGINAL=======================*/
.header-logo-center .header-icon-2-right {
  right: 10px;
}
/*========= HOME ===============================*/
.card .card-home {
  position: relative;
}
.card-style .card-home {
  position: relative;
}
.icono-card {
  font-size: 100px;
  opacity: 0.2;
  position: absolute;
  right: -20px;  /* Aumenta este valor para mover el ícono más a la derecha */
  top: 40px;  /* Aumenta este valor para mover el ícono más abajo */
}
/* Estilo base para dispositivos móviles */
.vethome {
  width: 100%;
}
.vethomeadd {
  padding-bottom: 40px;
}
.card-container {
  display: flex;
  flex-wrap: wrap; /* Permite que los cards se envuelvan a la siguiente fila */
  justify-content: space-between;
}
@media (min-width: 768px) {
  .vethome {
    width: 45%; /* Reducido al 48% para dar espacio a posibles márgenes y paddings */
  }
  .custom-width {
    width: 50%;
  }
  .vethomeadd {
    padding-bottom: 0px;
  }
}
/*========= LOGIN ===============================*/

.card-login::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*backdrop-filter: blur(5px) brightness(1.5);*/
  z-index: -1;
}

.content-login {
  /*backdrop-filter: blur(10px);*/
  /*background-color: rgba(255, 255, 255, 0.5);*/
  /*background-color: rgba(212, 234, 247, 0.5);*/
  background-color: rgba(255, 255, 255, 1);
  border-radius: 15px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3); 
 /* border: 1px solid rgba(212, 234, 247, 0.3);*/
}
/* Estilos por defecto para dispositivos grandes como computadoras de escritorio */
.img-responsive {
  width: 150px;
  height: 150px;
}

/* Estilos para tablets */
@media (max-width: 768px) {
  .img-responsive {
    width: 160px;
    height: 160px;
  }
  
}

/* Estilos para celulares */
@media (max-width: 576px) {
  .img-responsive {
    width: 160px;
    height: 160px;
  }
}
/* =============== COLORES ===============================*/
.vetzy-primary {
  color : #153b44;
}
.vetzy-secondary {
  color : #2d6e7e;
}
.vetzy-accent {
  color : #c6de41;
}
.vetzy-dark {
  color : #071c21;
}
.vetzy-gray-light {
  color : #e4e6f0;
}
.vetzy-gray {
  color : #83a5ad;
}
.vetzy-primary-bg{
  background-color : #153b44;
}
.vetzy-secondary-bg {
  background-color : #2d6e7e;
}
.vetzy-accent-bg {
  background-color : #c6de41;
}
.vetzy-dark-bg {
  background-color : #071c21;
}
.vetzy-gray-bg {
  background-color : #83a5ad;
}
.vetzy-gray-light-bg {
  background-color : #e4e6f0;
}
.bg-accent-300 {
  background-color : #F18F01;
}
.bg-accent-100 {
  background-color : #b6ccd8;
}
.bg-accent-700{
  background-color : #ffbfab;
}
.bg-accent-400 {
  background-color :#F5ECD7
}
.bg-rosa-light {
  background-color: #f7cac9;
}
.bg-salmon {
  background-color: #ff6384;
}
.bg-recorda {
  background-color: #ffd6a5;
}
.bg-gray {
  background-color:#788189;
}
.bg-violet {
  background-color:#ffc7ff;
}
.vetzy-gradient-1 {
  background: rgb(21,59,68);
  background: linear-gradient(0deg, rgba(21,59,68,1) 0%, rgba(45,110,126,1) 35%, rgba(220,231,233,1) 100%);
}
.bg-transparent {
  background-color: transparent !important;
}
.bg-green-home {
  background-color :#c6ffe6;
}
.bg-200 {
  background-color : #D0EBEA;
}
.bg-edit-form {
  background-color: #FFCE54 !important;
  color: #000 !important;
}

/* ESTILOS DE LA VISITA PELUQUERIA */
.input-wrapper {
  width: 100%;
  align-items: stretch; /* Asegura que el textarea y el icono tengan la misma altura */
}
/* Estilo base para el textarea */
#visnotes {
width: 90%;              /* Ocupa todo el ancho */
background-color: #ffebcd; /* Fondo amarillo claro */
border: none;             /* Sin bordes */
border-radius: 5px;       /* Bordes redondeados */
resize: none;             /* Deshabilita el redimensionado manual */
overflow: auto;           /* Permite el desplazamiento si el contenido es más largo */
transition: height 0.3s;  /* Efecto de transición suave al cambiar de altura */
height: auto;             /* Altura automática */
}

#visnotes:focus {
height: auto; /* Resetear la altura */
min-height: calc(1.5em * 4); /* Establecer una altura mínima basada en la altura de línea (1.5em es un ejemplo, ajústalo según tu diseño) */
}
.icon-container {
width: 10%; /* El icono ocupa el 10% del ancho */
background-color: #f3f3f3; /* Puedes establecer un color de fondo si lo deseas */
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px; /* Asegúrate de que esto coincida con el border-radius de tu textarea si quieres que se vea fluido */
}

.fa-microphone {
font-size: 1.5rem; /* Ajusta el tamaño del icono según lo necesites */
}

.underlined {
  border: none;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
}

/* Estilo para la etiqueta flotante */
.floating-label {
  position: relative;
}

.floating-label label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #ccc;
  transition: all 0.3s;
  pointer-events: none;
}
.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label ,
.floating-label select:focus + label,
.floating-label select:not([value=""]) + label{
  top: 0;
  font-size: 12px;
  color: #333;
}
/* Ocultar Milestones */
.toastui-calendar-milestone {
  display: none !important;
}

/* Ocultar All Day */
/*.toastui-calendar-task {
  display: none !important;
}*/

/* Ocultar Tasks */
.toastui-calendar-allday {
  display: none !important;
}
.toastui-calendar-ic-user-b{
  display: none !important;
}
.toastui-calendar-ic-state-b{
  display: none !important;
}
.toastui-calendar-template-popupDetailState{
  display: none !important; 
}
/* == links =============*/
.sinlink {
    color: inherit; /* El color del texto será el mismo que el de su elemento padre */
    text-decoration: none; /* Elimina el subrayado */
  }

  /* Opcional: Cambiar el aspecto del enlace al pasar el mouse */
.sinlink :hover {
    color: inherit; /* El color del texto será el mismo que el de su elemento padre */
    text-decoration: none; /* Elimina el subrayado */
  }
.sinlink :visited,.sinlink :focus,.sinlink :active {
    color: inherit; /* El color del texto será el mismo que el de su elemento padre */
    text-decoration: none; /* Elimina el subrayado */
  }
/* ==== LISTAS ======================================*/
.custom-list-item-2 {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 15px 10px;  
  border-bottom: 1px solid #e0e0e0;  
}

.custom-list-group .text-content {
  flex: 1;
  margin-left: 15px;
  display: flex;
  flex-direction: column;
}
.custom-list-group .delete-icon {
  margin-left: 10px;   
    color: #ff0000;    
    align-self: center;  
}
.custom-list-group .custom-list-item-2:last-child {
  border-bottom: none;
}
.balances-container {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
  padding-right: 1rem;
}
.custom-label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.75rem;  /* Ajusta este valor según sea necesario */
  color: #6c757d;  /* Color gris oscuro de Bootstrap */
}
.label-container {
  position: relative;
  padding-top: 1.2rem;  /* Ajusta este valor según sea necesario */
}
/* == ANIMACIONES ===========================================*/
@keyframes pulse {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.5);
  }
  100% {
      transform: scale(1);
  }
}

.pulse {
  display: inline-block;
  animation: pulse 2s infinite;
}