/* Material Design Theme para Swagger UI */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

:root {
    /* Material Design Colors */
    --md-primary: #495057;
    --md-primary-dark: #343a40;
    --md-primary-light: #42a5f5;
    --md-secondary: #03dac6;
    --md-secondary-dark: #018786;
    --md-error: #cf6679;
    --md-success: #495057;
    --md-warning: #ff9800;
    --md-info: #778da9;
    /* Surface colors */
    --md-surface: #ffffff;
    --md-surface-variant: #f5f5f5;
    --md-background: #fafafa;
    --md-on-surface: #212121;
    --md-on-surface-variant: #757575;
    /* Elevation shadows */
    --md-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --md-elevation-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --md-elevation-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    --md-elevation-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

html {
    overflow-y: auto;
}

/* Base typography */
.swagger-ui {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--md-background);
    color: var(--md-on-surface);
}

    /* Header Material */
    .swagger-ui .topbar {
        background: #4b6cb7; /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #0C2D48, #707370); /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #4a4a4a, #74226c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border: none;
        box-shadow: var(--md-elevation-2);
        height: 64px;
        display: flex;
        align-items: center;
        padding: 0 24px;
    }

        .swagger-ui .topbar .download-url-wrapper {
            display: none;
        }

    /* Info section Material */
    .swagger-ui .info {
        background: var(--md-surface);
        border: 1px solid #e76f51;
        border-left-width: 4px;
        border-radius: 8px;
        box-shadow: var(--md-elevation-1);
        padding: 24px;
        margin: 24px 0;
    }

        .swagger-ui .info .title {
            font-size: 32px;
            font-weight: 400;
            color: #e76f51;
            margin: 0 0 16px 0;
        }

        .swagger-ui .info .description {
            font-size: 16px;
            line-height: 1.5;
            color: var(--md-on-surface-variant);
        }

    /* Operation blocks Material */
    .swagger-ui .opblock {
        background: var(--md-surface);
        border: none;
        border-radius: 5px;
        box-shadow: var(--md-elevation-1);
        margin-bottom: 16px;
        overflow: hidden;
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

        .swagger-ui .opblock:hover {
            box-shadow: var(--md-elevation-2);
        }

        .swagger-ui .opblock .opblock-summary {
            border: none;
            padding: 10px 10px;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

            .swagger-ui .opblock .opblock-summary:hover {
                background-color: rgba(0,0,0,0.04);
            }

        /* HTTP method colors Material */
        .swagger-ui .opblock.opblock-get {
            border-left: 4px solid var(--md-info);
        }

            .swagger-ui .opblock.opblock-get .opblock-summary-method {
                background: var(--md-info);
                color: white;
                border-radius: 16px;
                padding: 4px 12px;
                font-size: 12px;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

        .swagger-ui .opblock.opblock-post {
            border-left: 4px solid var(--md-success);
        }

            .swagger-ui .opblock.opblock-post .opblock-summary-method {
                background: var(--md-success);
                color: white;
                border-radius: 16px;
                padding: 4px 12px;
                font-size: 12px;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

        .swagger-ui .opblock.opblock-put {
            border-left: 4px solid var(--md-warning);
        }

            .swagger-ui .opblock.opblock-put .opblock-summary-method {
                background: var(--md-warning);
                color: white;
                border-radius: 16px;
                padding: 4px 12px;
                font-size: 12px;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

        .swagger-ui .opblock.opblock-delete {
            border-left: 4px solid var(--md-error);
        }

            .swagger-ui .opblock.opblock-delete .opblock-summary-method {
                background: var(--md-error);
                color: white;
                border-radius: 16px;
                padding: 4px 12px;
                font-size: 12px;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

    /* Buttons Material */
    .swagger-ui .btn {
        border-radius: 24px;
        padding: 8px 24px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.2s ease;
        border: none;
        box-shadow: var(--md-elevation-1);
    }

        .swagger-ui .btn:hover {
            box-shadow: var(--md-elevation-2);
        }

        .swagger-ui .btn.authorize {
            background: var(--md-primary);
            color: white;
        }

            .swagger-ui .btn.authorize:hover {
                background: var(--md-primary-dark);
            }

        .swagger-ui .btn.execute {
            background: var(--md-success);
            color: white;
        }

            .swagger-ui .btn.execute:hover {
                background: #343a40;
            }

    /* Input fields Material */
    .swagger-ui input[type="text"],
    .swagger-ui input[type="password"],
    .swagger-ui textarea,
    .swagger-ui select {
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 12px 16px;
        font-size: 14px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        background: var(--md-surface);
    }

        .swagger-ui input[type="text"]:focus,
        .swagger-ui input[type="password"]:focus,
        .swagger-ui textarea:focus,
        .swagger-ui select:focus {
            border-color: var(--md-primary);
            box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.12);
            outline: none;
        }

    /* Response section Material */
    .swagger-ui .responses-inner {
        background: var(--md-surface-variant);
        border-radius: 8px;
        padding: 16px;
        margin-top: 16px;
    }

    .swagger-ui .response-col_status {
        font-weight: 500;
    }

    /* Models section Material */
    .swagger-ui .model-box {
        background: var(--md-surface);
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: var(--md-elevation-1);
    }

    /* Scheme container Material */
    .swagger-ui .scheme-container {
        background: none !important;
        border: none !important;
        padding: 16px;
        margin: 0 20px 20px;
        box-shadow: none !important
    }

    /* Filter Material */
    .swagger-ui .filter-container {
        background: var(--md-surface);
        border-radius: 8px;
        box-shadow: var(--md-elevation-1);
        padding: 16px;
        margin-bottom: 24px;
    }

    .swagger-ui .filter .operation-filter-input {
        border: 1px solid #ddd;
        border-radius: 24px;
        padding: 12px 20px;
        font-size: 14px;
        width: 100%;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

        .swagger-ui .filter .operation-filter-input:focus {
            border-color: var(--md-primary);
            box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.12);
            outline: none;
        }

/* Scrollbar Material */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--md-surface-variant);
}

::-webkit-scrollbar-thumb {
    background: var(--md-on-surface-variant);
    border-radius: 4px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--md-on-surface);
    }

/* Floating Action Button style for main actions */
.swagger-ui .btn.execute {
    border-radius: 28px;
    min-width: 64px;
    height: 56px;
    box-shadow: var(--md-elevation-3);
}

    .swagger-ui .btn.execute:hover {
        box-shadow: var(--md-elevation-4);
    }

/* Material ripple effect simulation */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.swagger-ui .btn:active::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    width: 100px;
    height: 100px;
    animation: ripple 0.6s linear;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
}

/* Ocultar solo el filtro por tags, mantener otros filtros */
.swagger-ui .filter-container .operation-filter-input[placeholder*="Filter by tag"] {
    display: none !important;
}

.swagger-ui .filter-container .operation-filter-input[placeholder*="tag"], .filter-container {
    display: none !important;
}

.swagger-ui .opblock-tag {
    margin: 0 0 15px;
}

.nostyle {
    color: #595959 !important;
}

.btn-done {
    margin-left: 5px !important;
}