:root {
  /* 🎨 Paleta de colores búho */
  --color-fondo-principal: #353535;
  --color-logo-arriba: #E3CECF;
  --color-header-boton: #98c1d9;
  --color-texto-titulos: #333;
  --color-texto-hover: #666;
  --color-texto-boton: #000;
  --color-tarjeta-contacto: #d2edfd;
  --color-enlace: #ffffff;
  --color-enlace-hover: #333;
  --color-boton-principal: #ffc107;
  --color-chat-header: #6585ae;
  --color-boton-hover: #000000;
  --color-tarjeta-fondo: #ffffff;
  --sombra-general: rgba(0, 0, 0, 0.3);
}

/* Estilos generales */
body {
  /* background-color: var(--color-fondo-principal); */
  font-family: 'Raleway', serif;
  font-weight: 400;
  height: 100%;
  margin: 0;
  padding: 0;
}

h1, h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 100;
  margin-top: 0.3rem;
  margin-bottom: 0px;
  color: var(--color-texto-titulos);
}
h1 {
  font-size: 2rem;
}

p, a, input, button {
  font-family: 'Raleway', serif;
  font-weight: 400;
}

/* Botones */
.btn-primary {
  background-color: var(--color-boton-principal);
  border-color: var(--color-boton-principal);
  color: var(--color-texto-boton);
}
.btn-primary:hover {
  background-color: var(--color-boton-hover);
  border-color: var(--color-boton-hover);
}

/* Alinear botón a la derecha en formularios */
form .btn-primary {
  display: block;
  margin-left: auto;
  margin-right: 0;
}

/* Botón secundario tipo outline */
.btn-outline-rosa {
  --bs-btn-color: var(--color-boton-principal);
  --bs-btn-border-color: var(--color-boton-principal);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-boton-principal);
  --bs-btn-hover-border-color: var(--color-boton-principal);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-boton-hover);
  --bs-btn-active-border-color: var(--color-boton-hover);
  --bs-btn-disabled-color: var(--color-boton-principal);
  --bs-btn-disabled-border-color: var(--color-boton-principal);
}

/* Imagenes */
.img-nuevo, .img-cerrar {
  width: 8rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.grayscale-hover:hover {
  filter: grayscale(100%);
  transform: scale(1.1);
}

/* Transiciones de mostrar/ocultar */
.ocultar {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.mostrar {
  display: block;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* Formularios */
.form-agregar, .form-sesion {
  max-width: 400px;
}

.divAlta {
  background-color: #d3d3d3;
  padding: 1rem 0 1.5rem;
}

.divBotonAlta {
  position: fixed;
  bottom: 100px;
  right: 10px;
  z-index: 1000;
  cursor: pointer;
}
.divBotonAlta img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0px 4px 6px var(--sombra-general);
  transition: transform 0.3s ease;
}
.divBotonAlta img:hover {
  transform: scale(1.1);
  box-shadow: 0px 6px 8px var(--sombra-general);
}

/* Loader */
#div_cargar {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(96, 96, 96, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.loading {
  width: 50px;
  height: 50px;
  border: 6px solid #f3f3f3;
  border-top: 6px solid var(--color-boton-principal);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Inputs de fecha */
#inputFecha {
  font-size: 16px;
  padding: 10px;
  border: 2px solid var(--color-boton-principal);
  border-radius: 8px 8px 0 0;
  background-color: var(--color-boton-principal);
  color: #fff;
  width: 100%;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* ✅ Foco visible: mantiene fondo y mejora borde */
#inputFecha:focus {
  border-color: var(--color-boton-hover);
  outline: 2px solid rgba(255, 255, 255, 0.4);
  background-color: var(--color-boton-principal);
  color: #fff;
}

/* ✅ Icono de calendario blanco (para fondo oscuro) */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); 
  cursor: pointer;
}

/* ✅ Asegura que el placeholder o valor seleccionado sea visible */
#inputFecha::placeholder {
  color: #ffffffcc;
}

.input-fecha-personalizada {
  font-size: 16px;
  padding: 10px;
  border: 2px solid var(--color-boton-principal, #3d5a80);
  border-radius: 8px;
  background-color: #f8f9fa; /* gris claro Bootstrap */
  color: #212529; /* texto oscuro */
  transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.input-fecha-personalizada:focus {
  background-color: #fff;
  border-color: var(--color-boton-hover, #2b4a70);
  outline: none;
  box-shadow: 0 0 0 0.15rem rgba(61, 90, 128, 0.25); /* sombra azul */
}

/* Estilizar ícono del calendario */
.input-fecha-personalizada::-webkit-calendar-picker-indicator {
  filter: invert(0.5); /* Gris oscuro */
  cursor: pointer;
  transition: filter 0.3s ease;
}

.input-fecha-personalizada:hover::-webkit-calendar-picker-indicator,
.input-fecha-personalizada:focus::-webkit-calendar-picker-indicator {
  filter: invert(0.2); /* Más oscuro al pasar */
}


/* Personaliza el ícono del calendario */
.input-fecha-personalizada::-webkit-calendar-picker-indicator {
  filter: invert(0.2) brightness(0.3); /* Oscurecer ícono */
  opacity: 1;
}

/* En Firefox */
.input-fecha-personalizada::-moz-focus-inner {
  border: 0;
}

/* En Microsoft Edge (obsoleto pero compatible) */
.input-fecha-personalizada::-ms-expand {
  display: none;
}


/* Menús y sistemas */
.menu_sistema {
  background-color: #0f0f0f;
  border-bottom: solid 1px #424242;
}

.cursor { cursor: pointer; }

.list-group > .cursor:hover {
  background-color: #ffc107;
  color: #000;
}

.toast {
  margin-bottom: 10px;
}

/* Otros ajustes visuales */
.asterisco {
  color: red;
  font-weight: bold;
  font-size: 1.2rem;
}

.agenda-body {
  background-color: #ebf3f7;
  padding-top: 10px;
}

#toastContainer {
  bottom: 60px !important;
}
.img-home {
  width: 100%;
  max-width: 12rem;
}
 .btn-group .btn {
    border-radius: 0.5rem;
  }
  .icono-estado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.35rem;
  background-color: #198754; /* verde */
  color: white;
  font-size: 1.2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.icono-estado.inactivo {
  background-color: #dc3545; /* rojo */
}
.btn-toggle-estado {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 0.4rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-credencial {
  background-image: url("/Imagenes/fondo-credencial-electronica.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000000;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 40px 20px;
  color: white;
}

.icon_atras{
  position: absolute;
     bottom: 10px;
    right: 10px;
  width: 50px;
  height: 50px;
}
.icon_atras img{
  width: 50px;
  height: 50px;
}
.icon_frente{
  position: relative;
     bottom: 10px;
    left: 10px;
  width: 50px;
  height: 50px;
}
.icon_frente img{
  width: 50px;
  height: 50px;
}
/* credencial atras */
.container-credencial-atras {
  background-image: url('/Imagenes/fondo-credencial-atras.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000000;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 40px 20px;
  font-family: 'Raleway', sans-serif;
}
.container-credencial-atras .qr img {
  width: 160px;
  height: 160px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px #00000055;
}

.container-credencial-atras .linea {
  font-size: 1.1rem;
  font-weight: 400;
  margin-top: 10px;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.container-credencial-atras .nombre {
  font-size: 1.5rem;
  font-weight: 700;
  color: #6ec1e4;
  line-height: 1.2;
}

.container-credencial-atras .cel {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 10px 0;
  color: white;
}

.container-credencial-atras .pie {
  margin-top: auto;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}
.tipo-sangre {
  background-color: #dc3545; /* rojo Bootstrap */
  color: white;
  padding: 4px 12px;
  border-radius: 10px;
  display: inline-block;
  font-weight: bold;
  margin-top: 8px;
}