/* 
Sitio Web Creado por ITred Spa.
Direccion: Guido Reni #4190
Pedro Aguirre Cerda - Santiago - Chile
contacto@itred.cl o itred.spa@gmail.com
https://www.itred.cl
Creado, Programado y Diseñado por ITred Spa.
BPPJ 
*/


/* -------------------------------------------------------------------------------------------------------------
   ------------------------------------- INICIO ITred Spa inicio_sesion .CSS -----------------------------------
   ------------------------------------------------------------------------------------------------------------- */


/* IMPORTACION DE FUENTE RALEWAY */

@font-face {
    font-family: 'Raleway'; /* establece el nombre de la fuente que podrá utilizar el sitio */
    src: url('/fuentes/fuentes_google/fuente_raleway.ttf') format('truetype'); /* establece la ruta del archivo de fuente y su formato */
    font-weight: 100 900; /* permite utilizar los diferentes grosores disponibles de la fuente */
    font-style: normal; /* establece el estilo normal de la fuente */
}


/* TITULO 1 CONTENEDOR INICIO SESION */

    .inicio_sesion {
        display: flex; /* establece una estructura flexible para la alineacion interna */
        justify-content: center; /* centra el boton horizontalmente */
        align-items: center; /* centra el boton verticalmente */
    }


    /* SUBTITULO 1 BOTON INICIO SESION */

        .boton_inicio_sesion {
            width: 10vw; /* establece el ancho en funcion del ancho de la pantalla */
            min-width: 9.5rem; /* establece el ancho minimo relativo a la fuente base */
            height: clamp(38px, 3vw, 20px); /* establece una altura adaptable con limites para evitar tamaños excesivos */
            display: flex; /* establece una estructura flexible para la alineacion interna */
            justify-content: center; /* centra el texto interno horizontalmente */
            align-items: center; /* centra el texto interno verticalmente */
            padding: 0 1vw; /* establece el relleno lateral interno */
            background: linear-gradient(135deg, #cb9847, #b8862e); /* establece el fondo degradado en un angulo de 135 grados */
            border: none; /* elimina el borde perimetral */
            border-radius: 0.5rem; /* establece la curvatura de las esquinas */
            cursor: pointer; /* establece el cursor de seleccion */
            box-shadow: 0 4px 12px rgba(184, 134, 46, 0.35); /* agrega una sombra estable independiente de la altura de la pantalla */
            transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* establece las transiciones visuales del boton */
        }

        .boton_inicio_sesion:hover {
            background: linear-gradient(135deg, #b8862e, #a37324); /* modifica el degradado durante el estado hover */
            color: #ffffff; /* establece el color blanco durante el estado hover */
            box-shadow: 0 5px 14px rgba(184, 134, 46, 0.40); /* aumenta suavemente la sombra al posicionar el cursor */
        }


    /* SUBTITULO 2 TEXTO INICIO SESION */

        .texto_inicio_sesion {
            color: #ffffff; /* establece el color blanco del texto */
            font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif; /* establece la tipografia principal y sus alternativas */
            font-size: 11.25pt; /* establece el tamaño del texto en puntos */
            font-weight: 700; /* establece el grosor del texto */
            letter-spacing: 0.02em; /* establece el espaciado entre caracteres */
            white-space: nowrap; /* impide saltos de linea dentro del texto */
        }


    /* pantallas grandes (monitores Full HD+, iMac, monitores gaming QHD/4K) */
    @media (min-width: 1441px) {

        /* Sin media */

    }


    /* notebooks grandes (1600x900, 1920x1080) */
    @media (max-width: 1440px) {

        /* SUBTITULO 1 BOTON INICIO SESION */

            .boton_inicio_sesion {
                min-width: 9rem; /* reduce ligeramente el ancho minimo del boton */
            }

    }


    /* notebooks comunes (1366x768, MacBook Air/Pro) */
    @media (max-width: 1200px) {

        /* SUBTITULO 1 BOTON INICIO SESION */

            .boton_inicio_sesion {
                width: 12vw; /* aumenta proporcionalmente el ancho del boton */
                min-width: 8.5rem; /* reduce el ancho minimo del boton */
            }

    }


    /* tablets horizontales / pantallas medianas (iPad Pro en horizontal, notebooks pequeños) */
    @media (max-width: 992px) {

        /* SUBTITULO 1 BOTON INICIO SESION */

            .boton_inicio_sesion {
                width: 14vw; /* aumenta proporcionalmente el ancho del boton */
                min-width: 8rem; /* adapta el ancho minimo a pantallas medianas */
            }

    }


    /* tablets verticales (iPad clásico, tablets Android estándar) */
    @media (max-width: 768px) {

        /* SUBTITULO 1 BOTON INICIO SESION */

            .boton_inicio_sesion {
                width: 18vw; /* aumenta el ancho proporcional para mantener visible el texto */
                min-width: 7.5rem; /* reduce el ancho minimo para tablets verticales */
                padding: 0 2vw; /* aumenta el espacio interno lateral del boton */
            }

    }


   /* móviles extragrandes (pantallas compactas y dispositivos de gran tamaño) */
   @media (max-width: 576px) {

        /* SUBTITULO 1 BOTON INICIO SESION */

            .boton_inicio_sesion {
                width: 32vw; /* adapta el ancho del boton a pantallas moviles */
                min-width: 7rem; /* reduce el ancho minimo para dispositivos moviles */
                height: 4.5vh; /* reduce ligeramente la altura del boton */
                padding: 0 3vw; /* adapta el espacio interno lateral */
            }


        /* SUBTITULO 2 TEXTO INICIO SESION */

            .texto_inicio_sesion {
                font-size: 10.5pt; /* reduce ligeramente el tamaño del texto */
            }

    }

    /* móviles grandes (iPhone 11, iPhone Plus/Max, Android grandes) */
    @media (max-width: 414px) {

        /* Sin media */

    }


    /* móviles medianos (iPhone 12/13/14, Android gama media) */
    @media (max-width: 390px) {

        /* SUBTITULO 1 BOTON INICIO SESION */

            .boton_inicio_sesion {
                width: 34vw; /* aumenta proporcionalmente el ancho para pantallas mas estrechas */
            }

    }


    /* móviles pequeños (Android estándar, iPhone SE) */
    @media (max-width: 360px) {

        /* SUBTITULO 1 BOTON INICIO SESION */

            .boton_inicio_sesion {
                width: 36vw; /* adapta el ancho del boton a dispositivos pequeños */
                min-width: 6.5rem; /* reduce el ancho minimo para evitar ocupar demasiado espacio */
            }


        /* SUBTITULO 2 TEXTO INICIO SESION */

            .texto_inicio_sesion {
                font-size: 10pt; /* reduce el texto para pantallas pequeñas */
            }

    }
            
/* -------------------------------------------------------------------------------------------------------------
   -------------------------------------- FIN ITred Spa inicio_sesion .CSS -------------------------------------
   ------------------------------------------------------------------------------------------------------------- */


/* 
Sitio Web Creado por ITred Spa.
Direccion: Guido Reni #4190
Pedro Aguirre Cerda - Santiago - Chile
contacto@itred.cl o itred.spa@gmail.com
https://www.itred.cl
Creado, Programado y Diseñado por ITred Spa.
BPPJ 
*/