/* Estilos para h1 y h2 */
h1, h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 100;
    margin-top: 0.3rem;
    margin-bottom: 0px;
}
h1 {
    font-size: 2rem;
}

/* Estilos para el resto del contenido */
body, p, a, input, button {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}
/* Estilo para cambiar el color del botón activo a amarillo */
.nav-pills .nav-link {
    color: #fff;
}
.nav-pills .nav-link.active {
    background-color: #ffc107;
    color: #000;
}
.ocultar {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.mostrar {
    display: block;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
.img-nuevo {
    width: 8rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.img-cerrar {
    width: 8rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.grayscale-hover:hover {
    filter: grayscale(100%);
    transform: scale(1.1);
}
.menu_sistema {
    background-color: #0f0f0f;
    border-bottom: solid 1px #424242;
}
.fullscreen-btn {
    width: 3rem;
    height: 3rem;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1000;
    padding: 0;
    font-size: 1rem;
    transition: all 0.3s ease-in-out;
    display: block;
    cursor: pointer;
}

.fullscreen-btn:hover {
    filter: grayscale(100%);
    transform: scale(1.1);
}
.cursor {
    cursor: pointer;
}
.list-group>.cursor:hover {
    background-color: #ffc107;
    color: #000;
}
.categoria h3 {
    margin-bottom: 0.5rem; /* Reduce el margen inferior entre el título y el select */
}

.categoria {
    margin-bottom: 1.5rem; /* Añade espacio entre las categorías */
}
.alto {
    height: 5rem;
}
.toast {
    margin-bottom: 10px; /* Añade espacio entre cada mensaje */
}
.verEquipo {
    cursor: pointer;
}
.verEquipo:hover {
    background-color: #198754;
    color: #ffffff;
}
#VerRescatista {
    border: solid thin #999;
    padding: 1rem 1rem;
    border-radius: 15px;
}
#VerRescatista h3 {
    background-color: #878787;
    text-align: center;
    padding: .5rem .2rem;
    color: #333;
    font-size: 1.3rem;
}
#VerRescatista p {
    margin-top: 0;
    margin-bottom: .5rem;
    border-bottom: solid thin #5c5c5c;
    padding-bottom: .5rem;
}


/* Aplica a selects con esta clase */
.form-select-contrast {
  background-color: #111827;   /* gris oscuro, no negro absoluto */
  color: #f8fafc;              /* texto claro */
  border-color: #374151;       /* borde visible */
}

/* Hover del control cerrado */
.form-select-contrast:hover {
  border-color: #6b7280;       /* un poco más claro al pasar el mouse */
}

/* Estado focus accesible */
.form-select-contrast:focus {
  border-color: #60a5fa;       /* azul */
  box-shadow: 0 0 0 .25rem rgba(96,165,250,.25);
  outline: none;
}

/* Placeholder (la opción 'Seleccionar...') */
.form-select-contrast option[value=""][disabled],
.form-select-contrast option.placeholder {
  color: #9ca3af;              /* gris medio */
}

/* ===== Estilos del menú de opciones (si el navegador lo permite) ===== */
.form-select-contrast option {
  background-color: #0f172a;   /* fondo del dropdown */
  color: #e5e7eb;              /* texto claro */
}

/* opción resaltada (seleccionada o hover) */
.form-select-contrast option:checked,
.form-select-contrast option:hover {
  background-color: #1f2937;   /* un poco más claro para resaltar */
  color: #ffffff;
}

/* Para que el dropdown no quede tapado por contenedores con z-index */
.form-select-contrast {
  position: relative;
  z-index: 2;
}