body {
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

#swagger-ui {
    padding-bottom: 70px;
    flex-grow: 1;
}

.button-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
}

/* ---------- COLOR DEL TEXTO "Loading..." EN MODO OSCURO ---------- */
.dark-mode .swagger-ui .loading-container .loading:after {
    color: #f8f9fa !important;
}


/* ---------- LETRAS DEL MODAL DE AUTENTICACIÓN EN MODO OSCURO ---------- */
.dark-mode .swagger-ui .auth-container h4,
.dark-mode .swagger-ui .auth-container p,
.dark-mode .swagger-ui .auth-container .wrapper,
.dark-mode .swagger-ui .auth-container .wrapper p {
    color: #f8f9fa !important;
}

/* ---------- FONDOS OSCUROS PARA LAS SECCIONES ---------- */

.dark-mode .swagger-ui .scheme-container {
    background-color: #212529 !important;
}

/* ---------- TÍTULOS Y DESCRIPCIONES EN BLANCO ---------- */
/* "Titulo" */
.dark-mode .swagger-ui .info h2,
/* "Descripcion" */
.dark-mode .swagger-ui .info .base-url,
/* "Testimonial CMS - Website" */
.dark-mode .swagger-ui .info .description p,
/* "Send email to TESTIMONIAL" */
.dark-mode .swagger-ui .opblock .opblock-summary-description,
/* Rutas como "/api/login/" */
.dark-mode .swagger-ui .opblock .opblock-summary-method {
    /* Métodos como "POST" */
    color: #ffffff !important;
}

/* ---------- SECCIONES DE PARÁMETROS Y REQUEST BODY ---------- */
.dark-mode .swagger-ui .opblock-section-header {
    background-color: #2c3034 !important;
    border-color: #495057 !important;
}

.dark-mode .swagger-ui .opblock-description-wrapper p,
.dark-mode .swagger-ui .opblock-description-wrapper .markdown p,
.dark-mode .swagger-ui .opblock-description-wrapper .opblock-description {
    color: #f8f9fa !important;
}

/* Bordes de las pestañas */
.dark-mode .swagger-ui .tab-item {
    border-color: #495057 !important;
}

/* Try it out */
.dark-mode .swagger-ui .btn {
    color: #ffffff !important;
    border-color: #ffffff !important;
}


/* ---------- DARK MODE GENERAL ---------- */
.dark-mode {
    background-color: #212529 !important;
    color: #f8f9fa !important;
}
/*Boton azul de autorizacion*/
.dark-mode .swagger-ui .btn.authorize {
    background-color: #38618c;
    color: #f8f9fa;
}
/*ESTILOS MODAL*/
.dark-mode .swagger-ui .modal-ux-content {
    background-color: #2c3034;
    color: #f8f9fa;
}


/* ---------- ENDPOINTS EN TEXTO BLANCO ---------- */
.dark-mode .swagger-ui .opblock-summary-method,
.dark-mode .swagger-ui .opblock-summary-path,
.dark-mode .swagger-ui .opblock-summary-description,
.dark-mode .swagger-ui .opblock-summary-path__deprecated,
.dark-mode .swagger-ui .opblock-tag,
.dark-mode .swagger-ui .opblock-tag.no-desc span,
.dark-mode .swagger-ui .opblock-tag-section h4,
.dark-mode .swagger-ui .response-col_status,
.dark-mode .swagger-ui .response-col_description,
.dark-mode .swagger-ui .opblock-tag small {
    color: #ffffff !important;
}

/* Fondo oscuro para los bloques de endpoints */
.dark-mode .swagger-ui .opblock {
    background-color: #2c3034 !important;
}

/* Tablas, inputs y labels */
/*Cuadro de aplication/json*/
.dark-mode .swagger-ui table,
.dark-mode .swagger-ui td,
.dark-mode .swagger-ui th,
.dark-mode .swagger-ui label,
.dark-mode .swagger-ui input,
.dark-mode .swagger-ui textarea,
.dark-mode .swagger-ui select {
    color: #ffffff !important;
    background-color: #343a40 !important;
}