html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

img,
video,
canvas {
    max-width: 100%;
}

body {
    min-width: 0;
}

.content_container,
.inner_container,
.main_container,
.container,
.table_container {
    min-width: 0;
}

.table_container,
.tablaytitulo,
.tc_container {
    width: 100%;
    overflow-x: auto;
}

table {
    border-collapse: collapse;
}

input,
select,
button,
textarea {
    max-width: 100%;
}

.modal-content,
.popup,
#popup,
#popup_warning {
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    overflow: auto;
}

@media (max-width: 900px) {
    body {
        width: 100%;
        height: auto;
        min-height: 100svh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .main_container {
        width: 100%;
        min-height: 100svh;
    }

    .top_container,
    header.top_container {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .logo_titulo > .img_container {
        width: min(14rem, 55vw);
    }

    .log_container {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.5rem;
    }

    .mid_container {
        flex-direction: column;
        padding: 0.75rem;
    }

    .menu {
        width: 100%;
        padding: 0.75rem;
        overflow-x: auto;
    }

    .menu ul {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        width: max-content;
        max-width: none;
    }

    .menu li,
    .menu button {
        white-space: nowrap;
    }

    .margintop {
        margin-top: 0;
    }

    .content_container {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .container {
        width: 100%;
    }

    .filtros,
    .selectores,
    .contenedor,
    .titlebox,
    .botones,
    .bottom_container,
    .form_row,
    .config,
    .carga,
    .video_link {
        flex-wrap: wrap;
    }

    .filtros,
    .selectores {
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .filtro_container,
    .buscador {
        width: 100%;
    }

    .buscador input {
        flex: 1 1 auto;
        min-width: 0;
    }

    .table_container {
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
    }

    th,
    td {
        white-space: nowrap;
    }

    .canvas,
    canvas {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .popUp,
    .popUp#turnos,
    .popUp#editar,
    .popup_inner_container {
        width: calc(100vw - 2rem);
        height: auto;
        max-height: calc(100svh - 2rem);
        padding: 1rem;
    }

    #disponibilidad {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .top_container,
    header.top_container {
        justify-content: center;
        text-align: center;
    }

    .log_container,
    .logout {
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .menu ul {
        gap: 0.75rem;
    }

    .filtros,
    .selectores,
    .contenedor,
    .titlebox,
    .form_row,
    .bottom_container,
    .config,
    .static_container,
    .publicidad {
        flex-direction: column;
        align-items: stretch;
    }

    .links_container,
    .form,
    .lista_archivos,
    .static_container,
    .multichoice,
    .cantidad_container {
        width: 100%;
    }

    .modal-content {
        width: calc(100vw - 2rem) !important;
        margin: 1rem auto !important;
    }

    .doc-item {
        flex-direction: column;
        gap: 0.35rem;
    }
}