html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* Evita el scroll horizontal */
    font-family: "Montserrat", sans-serif;
    color: rgb(132, 132, 132);
}

#MenuConfiguracions { display: none; /* Inicialmente oculto */ }
 /**** ***** Capçalera *******************/
     .header {
    height: 80px;
    background-color: rgb(231, 235, 237);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    position: relative;
}

.header-logo {
    max-height: 60px;
    height: auto;
    width: auto;
}

/* Agrupar elementos relacionados */
.header-center {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Espacio entre SVG y select */
}

.header-right {
    display: flex;
    align-items: center;
}

.custom-dropdown-btn {
    background-color: #083658;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
}

.custom-dropdown-btn:hover {
    background-color: #062842;
}

        /* Ajustes responsivos */
        @media (max-width: 768px) {
            .header-center {
                max-width: 50%;
            }
            
        
        }

        @media (max-width: 576px) {
            .header-center {
                max-width: 40%;
                font-size: 1rem;
            }
            
            .bandera-btn {
                font-size: 1rem;
                padding: 3px 6px;
            }
            
            .custom-dropdown-btn {
                padding: 6px 10px;
                font-size: 0.9rem;
            }
        }

  @media (max-width: 480px) {
    .header-center {
      max-width: 70%;
    }

    .header-logo {
      max-height: 40px;
    }
  }


.custom-dropdown-btn {
  background-color: #083658 !important;
  color: white !important;
  border: none;
}




/* ************************* CAPÇALERA ***************************/
.capcalera {
   /* background: linear-gradient(135deg, #61bde4, #043a61);*/
    background: linear-gradient(180deg, #c7dfed, #fcfcfc); /* Cambié el ángulo a 180deg */
    color: #f8f9fa;
    padding: 15px 20px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #043a61;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.subcapcalera {
    /* background: linear-gradient(135deg, #61bde4, #043a61);*/
    /*background: linear-gradient(180deg, #fdfdfd, #c0c2c2); /* Cambié el ángulo a 180deg */
    color: #f8f9fa;
    padding: 15px 20px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    /*border-bottom-left-radius: 15px; /* Añadido para redondear la esquina inferior izquierda */
    /*border-bottom-right-radius: 15px; /* Añadido para redondear la esquina inferior derecha */
}


 

.capcalera h1 {
    margin: 0;
    font-size: 1.5em;
    font-weight: bold;
}

.capcalera nav {
    display: flex;
    gap: 15px;
}

.capcalera nav a {
    color: #f8f9fa;
    text-decoration: none;
    font-size: 1em;
    transition: color 0.3s ease;
}

.capcalera nav a:hover {
    color: #d1ecf1;
}

.logo {
    width: 6%;
}
/*************************************************************************/


/**************** botones retoque imagenes *********************************/
#BotonesRetoque {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* espacio horizontal/vertical entre grupos */
}
#BotonesRetoque .btn-group {
  flex-shrink: 0;
}
/* Opcional: en pantallas pequeñas fuerza bloque completo */
@media (max-width: 576px) {
  #BotonesRetoque .btn-group {
    width: 100%;
  }
}

 
/* Media query para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
  .header-logo {
    max-height: 40px; /* más razonable para móviles */
    height: auto;
    width: auto;
  }

  .header-center {
    font-size: 1.1rem;
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


.dropzone {
    width: 85%;
    height: 85px;   
    border: 2px dashed #45ace8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* Centra horizontalmente */
    margin-bottom: 20px;
    margin-top: 10px;
    border-radius: 6px;
    padding:4px;
 
}


/* ******************************** CONTENIDOR CAIXES ***************************/
.ContenidorGeneralGran {
     width: 97%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    color:#04375b;
    background:#fbfcfc;
    margin: 0 auto;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    /*box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1);*/
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ContenidorEnllaços{
    padding: 5px 5px;
    background-color:rgb(197, 198, 201);
    color:#097DAE;
}
.ContenidorGeneral {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    color:#04375b;
    background:#fbfcfc;
    margin: 0 auto;
    /*border-radius: 5px;*/
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgb(194, 190, 190);
}
.ContenidorGeneral:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}
.ContenidorGeneral input {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: border-color 0.3s ease;
}
.ContenidorGeneral input:focus {
    border-color: #097DAE;
    outline: none;
 }
.ContenidorGeneral button {
    padding: 10px 20px;
    background-color: #043a61;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    
}
.ContenidorGeneral button:hover {
    background-color: #097DAE;
 
}


.ContenidorTiraImatges {
  width: 100%;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #04375b;
  margin: 0 auto;
  margin-top: 8px;
  margin-bottom: 8px;
  border: 1px solid rgb(194, 190, 190);
  border-radius: 5px;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #feffff;
}

    /* Este bloque es el que realmente evita que las imágenes se desborden */
    .ContenidorTiraImatges img {
      max-width: 100%;
      height: auto;
      object-fit: contain;
      flex: 0 1 auto;
    }

  .ContenidorTiraImatges img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    flex: 0 1 auto;
  }


    .CxImatge {
      width: 40px;
      height: 40px;
      box-sizing: border-box;
    }

    .Miniatura {
      width: 100%;
      height: 100%;
      object-fit: contain; /* Mostrar toda la imagen sin recorte */
      cursor: pointer;
      border-radius: 4px;
      background-color: #f0f0f0; /* Opcional: fondo para imágenes pequeñas */
      border:1px solid grey;
    }

 

 

 




/**********************************************************************/
.Contenidorfotos {
    width: 85%;
    height: auto; /* Cambia la altura a automática */
    /*display: flex;*/
    flex-wrap: wrap;
    gap: 10px;
    /*box-sizing: border-box;*/
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    background-color:#c4cccf;
    margin: 0 auto; /* Centra horizontalmente */
    border-radius: 6px;
    padding: 10px;

    border: 2px solid #043a61; /* Define el borde rojo */
}
.ContenidorLlistatSessions {
    width: 96%;
    margin-left: 10px;
    height: auto; /* Cambia la altura a automática */
    /*display: flex;*/
    flex-wrap: wrap;
    gap: 10px;
    /*box-sizing: border-box;*/
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    background-color:#f1f4f6;
    margin: 0 auto; /* Centra horizontalmente */
    /*border:1px solid grey;*/ 
    padding:20px;
}
.card:hover {
    transform: scale(01.00); /* Aumenta el tamaño de la tarjeta al pasar el ratón */
    transition: transform 0.3s ease; /* Suaviza la transición */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Agrega una sombra más prominente */
}
.box {
    width: 100px;
    height: 100px;
    border: 2px dashed #b4b8bd;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: rgb(238, 239, 240);
}
.box img {
    max-width: 100%;
    max-height: 100%;
}
.sombres{
    box-shadow: 0 4px 8px rgba(13, 13, 13, 0.5); /* Añade una sombra */
}

.textblanc{
    color:rgb(255, 255, 255);
}
.textblau{
    color:rgb(5, 65, 161);
}

#box9 {
    background-color: #f8d7da; /* Color de fondo para diferenciar la caja de eliminación */
}




/************************** ESTILOS PARA EL MODAL DE SUBIR IMAGENES ORIGINALES AL REGISTRO **************************/
.TiraImagenes{
    background-color: blue;
}

.TitolsModals{
    background: #b8d9e3; 
    color: #0e6386;
    padding: 10px;
    display: flex;
    justify-content: flex-end; /* Mueve todo el contenido al extremo derecho */
    align-items: center; /* Opcional: centra verticalmente */
}




 
 


/******************************** Estils data sessions fotografiques**************************************************/
.session-info {
    font-family: 'Arial', sans-serif; /* Elegante y legible */
    font-size: 14px; /* Tamaño del texto */
    color: #333; /* Color oscuro para el texto */
    /*margin: 10px 0;*/
    padding:6px 10px 6px 10px;
}

.fecha {
    font-weight: bold; /* Negrita */
    color: #4c4e4f; /* Color verde */
    font-size: 12px; /* Tamaño más grande */
    border: 1px solid #287ff0; /* Borde verde */
    padding: 5px 10px; /* Espaciado alrededor de la fecha */
    border-radius: 5px; /* Bordes redondeados */
    background-color: #f9f9f9; /* Fondo gris claro */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}
.CxFotosLlistatPacients {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
    background-color: #eff2f3;
    border: 2px solid #cdcecf;
    border-radius: 4px;
    width: 120px;
    height: 120px;
    /* overflow: hidden; */ /* Elimina esto */
}

.CxFotosLlistatPacients img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important; /* Fuerza el cambio */
    border-radius: 10px;
    height: auto !important; /* Anula height: auto del inline */
}



/* ********************* CSS per finestres quan et poses a sobre d'un botó ******************/
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Posición del tooltip */
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}



/* In your style.css if NOT using @apply or Tailwind build */
.upload-box {
  position: relative;
  width: 100%;
  height: 10rem;
  border: 2px dashed #93c5fd; /* Tailwind's blue-300 */
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease;
  background-color: #f0f9ff33; /* blue-200/30 simulated */
}
.upload-box:hover {
  border-color: #3b82f6; /* Tailwind's blue-500 */
}

/* **************** CSS REGISTROS ******************************/
  .valid-feedback, .invalid-feedback {
      display: none;
    }
    .was-validated .form-control:valid ~ .valid-feedback,
    .was-validated .form-control:invalid ~ .invalid-feedback,
    .is-valid ~ .valid-feedback,
    .is-invalid ~ .invalid-feedback {
      display: block;
    }
    .password-strength-meter {
      height: 5px;
      margin-top: 5px;
      border-radius: 5px;
      transition: all 0.3s ease;
    }
    .strength-weak {
      background-color: #dc3545;
      width: 25%;
    }
    .strength-fair {
      background-color: #fd7e14;
      width: 50%;
    }
    .strength-good {
      background-color: #ffc107;
      width: 75%;
    }
    .strength-strong {
      background-color: #198754;
      width: 100%;
    }
    .password-criteria {
      font-size: 0.85rem;
      margin-top: 5px;
    }
    .criteria-met {
      color: #198754;
    }
    .criteria-not-met {
      color: #6c757d;
    }
    .criteria-error {
      color: #dc3545;
    }
    /* Estilos para las cards de licencia */
    .license-card {
      transition: all 0.3s ease;
      cursor: pointer;
      border: 2px solid transparent;
    }
    .license-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .license-card.selected {
      border-color: #516994;
      background-color: #f8f9fa;
    }
    .license-card .card-header {
      background-color: #516994;
      color: white;
      font-weight: bold;
    }