body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}

main {
  height: 100vh;
  max-height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Botones */
.btn-primary, .btn-success, .btn-warning, .btn-danger {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra en botones */
}

/* Tarjetas */
.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra en las tarjetas */
    border-radius: 8px; /* Bordes redondeados */
}

/* Tablas */
.table th, .table td {
    vertical-align: middle; /* Alinear texto en el centro vertical de la celda */
}

.table thead th {
    background-color: #1a4fa1;
    color: #ffffff;
}
#wrapper {
    display: flex;
}

#sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    flex: 1;
    padding-left: 250px;
}

/* Ajuste para dispositivos móviles */
@media (max-width: 768px) {
    #sidebar-wrapper {
        display: none;
    }

    #wrapper.toggled #sidebar-wrapper {
        display: block;
        position: absolute;
        z-index: 1000;
        height: 100%;
        background: #f8f9fa;
    }

    #page-content-wrapper {
        padding-left: 0;
    }
}
#menuToggle {
    background-color: #000000;
    color: white;
    border: none;
    border-radius: 10%;
    padding: 10px;
    font-size: 24px;
}

@media (max-width: 768px) {
    #sidebar-wrapper {
        transition: transform 0.3s ease; /* Transición suave */
        transform: translateX(-250px); /* Ocultar el menú inicialmente */
        position: fixed;
        z-index: 1040;
    }
    /* Mostrar el menú cuando #wrapper tiene la clase `toggled` */
    #wrapper.toggled #sidebar-wrapper {
        transform: translateX(0);
    }
}
/* Estilos para el contenedor de la bolilla */
.card {
    border-radius: 10px;
    background-color: #f8f9fa;
}

.bolilla-input {
    font-size: 3rem; /* Tamaño grande del texto */
    font-weight: bold;
    width: 150px; /* Ancho para destacar el campo */
    box-shadow: 0px 0px 20px rgba(0, 123, 255, 0.5); /* Sombra para efecto animado */
    border: 2px solid #1a4fa1;
    transition: box-shadow 0.5s ease;
}

/* Animación de parpadeo */
.bolilla-input:focus, .bolilla-input:hover {
    box-shadow: 0px 0px 30px #1a4fa1; /* Cambio de sombra al enfocarse */
}

.bolilla-input::placeholder {
    color: #1a4fa1;
    opacity: 0.6;
}

.btn-extra {
    font-size: 2rem; /* Tamaño grande del botón */
}

h2 {
    font-weight: bold;
}

h4 {
    font-size: 1.2rem;
}
.bolilla-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    font-size: 2em;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.bg-success {
    background-color: #2aaf49;
}

.bg-danger {
    background-color: #db3f4e;
}