/* ===================================
   Estilos Responsive Globales
   =================================== */

/* Asegurar que el body y html sean responsive */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* Container responsive general */
.container,
.container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

/* ===================================
   Breakpoints Mobile First
   =================================== */

/* Extra Small devices (phones, menos de 576px) */
@media (max-width: 575.98px) {
    body * {
        font-size: 14px !important;
    }
    
    .back-document {
        padding: 15px !important;
        width: 98% !important;
    }
    
    .container-form {
        padding: 15px !important;
        width: 98% !important;
    }
    
    .custom-radio-container .radio-label {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    .center-text {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .center-text button {
        width: 100% !important;
    }
    
    .logo-container {
        height: 15vh !important;
        min-height: 110px !important;
        width: 100% !important;
        padding: 10px !important;
    }
    
    .logo-Ecosistemas {
        height: 70px !important;
    }
    
    .container-logos {
        width: 100vw !important;
    }
}

/* Small devices (tablets, 576px y más) */
@media (min-width: 576px) {
    .container,
    .container-form {
        max-width: 540px;
    }
}

/* Medium devices (tablets landscape, 768px y más) */
@media (min-width: 768px) {
    .container,
    .container-form {
        max-width: 720px;
    }
    
    html {
        font-size: 16px;
    }
}

/* Large devices (desktops, 992px y más) */
@media (min-width: 992px) {
    .container,
    .container-form {
        max-width: 960px;
    }
    
    .back-document {
        max-width: 800px !important;
    }
}

/* Extra Large devices (large desktops, 1200px y más) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .container-form {
        max-width: 900px;
    }
    
    .back-document {
        max-width: 850px !important;
    }
    
    .logo-container {
        width: 100% !important;
        max-width: none !important;
    }
    
    .container-logos {
        width: 100vw !important;
        max-width: none !important;
    }
}

/* Extra Extra Large devices (larger desktops, 1400px y más) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    .container-form {
        max-width: 1000px;
    }
}

/* ===================================
   Utilidades de centrado
   =================================== */

.center-horizontal {
    margin-left: auto !important;
    margin-right: auto !important;
}

.center-vertical {
    display: flex !important;
    align-items: center !important;
}

.center-both {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* ===================================
   Fix para elementos que se desbordan
   =================================== */

* {
    box-sizing: border-box;
}

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

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

/* ===================================
   Responsive para botones de acción
   =================================== */

@media (max-width: 767.98px) {
    .actions_buttons {
        width: 50px !important;
    }
    
    .actions_buttons .btn {
        padding: 8px !important;
        font-size: 0 !important;
    }
    
    .actions_buttons .btn:hover {
        font-size: 11px !important;
        width: auto !important;
    }
}

/* ===================================
   Mejoras para formularios responsive
   =================================== */

.form-group {
    width: 100%;
}

.form-control {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .form-control {
        font-size: 14px !important;
    }
}

/* ===================================
   Print styles (para imprimir)
   =================================== */

@media print {
    .actions_buttons,
    #conteinerButtonLogout,
    .btn,
    button {
        display: none !important;
    }
    
    .container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}