:root {

    /*
    Colores para letras:  #EEEEEE, #FFFF00, #00FF00
    Colores para fondos: #1d3557
    Azul oscuro: #1A2E3A, Azul claro: #C5D5E5
    Azul oscuro: #163D5F, Azul claro: #87A3BB
    Azul oscuro: #2E3C43, Azul claro: #D0E1E9
    Azul oscuro: #1C2541, Azul claro: #AAB8D2
    Azul oscuro: #0B3954, Azul claro: #6D98BA
    claros  #D1E4ED, #BED8E4

    Color Theme Swatches in Hex
    .KPI-Key-Performance-Indicator-business-industrial-concept.-1-hex { color: #111A26; }
    .KPI-Key-Performance-Indicator-business-industrial-concept.-2-hex { color: #284259; }
    .KPI-Key-Performance-Indicator-business-industrial-concept.-3-hex { color: #5B83A6; }
    .KPI-Key-Performance-Indicator-business-industrial-concept.-4-hex { color: #A0BED9; }
    .KPI-Key-Performance-Indicator-business-industrial-concept.-5-hex { color: #D0F2EF; }

    Color Theme Swatches in Hex 
    .UI/UX-1-hex { color: #0455BF; }
    .UI/UX-2-hex { color: #0468BF; }
    .UI/UX-3-hex { color: #A9CBD9; }
    .UI/UX-4-hex { color: #037F8C; }
    .UI/UX-5-hex { color: #04BFBF; }

    Color Theme Swatches in Hex 
    .1-hex { color: #AAB7BF; }
    .2-hex { color: #013440; }
    .3-hex { color: #011F26; }
    .4-hex { color: #65858C; }
    .5-hex { color: #F2F2F2; }

    --color-fondo-claro: #BED8E4;
    */


    --color-base1: #0c0c0c;
    --color-base2: #e4ded0;
    --color-base3: #2f5d55;
    --color-base4: #e4ded0;
    --color-base5: #89ae29;
    --color-base6: #5e7430;
    --color-base7: #0c0c0c;
    --color-base8: #ffffff;
    --color-base9: #91aca6;
  
     /*Color de fondo para el boby*/
     --color-fondo-body: var(--color-base6);
  
     /*Texto Principal (Negro):*/
     --color-texto-principal: var(--color-base1);
  
     /*Bordes y Líneas (Azul Oscuro):*/
     --color-bordes-lineas: var(--color-base9);
  
     /*Botones Normales*/
     --color-btn-fondo: var(--color-base3);
     --color-btn-texto: var(--color-base4);
  
     /*Botones en Hover:*/
     --color-hover-fondo: var(--color-base5);
     --color-hover-texto: var(--color-base8);
     --color-hover-filas: var(--color-base4);
  
     /*Botones en Clic/Activo:*/
     --color-clic-fondo:var(--color-base2);
     --color-clic-texto: var(--color-base1);
  
     /*KPI (Números Grandes):*/
     --color-gr-kpi-fondo: var(--color-base2);
     --color-gr-kpi-texto: var(--color-base6);
  
     /*KPI Detalles (Números Pequeños):*/
     --color-dt-kpi-fondo: var(--color-base3);
     --color-dt-kpi-texto: var(--color-base4);
  
     /*Sombra para Elementos:*/
     --color-sombra-elementos: var(--color-base5);
     --color-sombra-elementos-px: 2px 2px 5px var(--color-base5);
     --color-sombra-elementos1: var(--color-base6);
  
  


    --max-width: 1200px;
    --max-height: 400px
}

* {
    margin: 0;
    padding: 0;
    --font-family: var(--font-family-base, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif);
    font-family: var(--font-family-base, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif);
}

html{
    height: 100%;
}


body.page-login,
body.page-change-password {
    display: flex;
    --justify-content: center;
    flex-direction: column;
    --align-items: center;
    height: 100vh;
    margin: 0;
    --font-family: var(--font-family-base, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif);
    font-size: 1rem;
    min-height: 100%;
    color: var(--color-texto-principal);
    --background-color: var(--color-dt-kpi-fondo);
    background: radial-gradient(circle at 20% 95%, #056877, #051828 96%);

}



.contenedor1{
    display: flex;
    flex-direction: column;
    align-items: center;
    --margin-top: 100px;
    padding: 30px 40px 80px;
    gap: 20px;
}

.titulo_login{
    display: flex;
    color: var(--color-texto-principal);
    --margin-bottom: 1.5rem;
    --margin-right: 1.5rem;
    font-size: 4rem;
    cursor: default;
}


.titulo_login span{
    color: white;
}

.f_label{
    width: max-content;
    width: 100%;
    display: grid;
    grid-template-areas: "f_input";
}


.f_input{
    grid-area: f_input;
    border-radius: 5px;
    outline: none;
    border: 1px solid var(--color-bordes-lineas);
    padding: 0.75rem 0.75rem 0.375rem 1rem;
}

.label_name{
    grid-area: f_input;
    z-index: 100;
    width: max-content;
    margin-left: 1rem;
    padding: 0 .5rem;
    align-self: center;
    height: 100%;
    display: flex;
    align-items: center;
    color:  var(--color-btn-fondo);
    font-size: 0.8rem;
    cursor: text;

    transition: transform .3s;
    transform-origin: center left;

}

.f_input:focus {
    border: 1px solid var(--color-clic-texto);
    }

.f_input:focus + .label_name,
.f_input:hover + .label_name,
.f_input:not(:placeholder-shown) + .label_name{
    transform: translateY(-50%) scale(.7);
    background-color: white;
    border-radius: 10px;
}

.f_area_label_pregunta {
    display: flex;
    width: 100%;
    height: 1.5rem;
    --border-radius:  0.25rem 0.25rem 0rem 0rem;
    --border: 1px solid var(--color-bordes-lineas);
    border-bottom: none;
    margin: 0.1rem 0rem 0.1rem 0rem;
}

.f_area_label_pregunta .f_label_pregunta {
    display: flex;
    overflow-wrap: break-word;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: initial;
    font-size: 1rem;
    line-height: 1.3;
    max-width: 100%;
    white-space: pre-wrap;
}

.f_label_pregunta .f_formato_label {
    --font-weight: bold;
    padding: 0rem 0.75rem 0rem 0rem;
}

.area_input {
    margin: 0;
    --margin-top: 1.5rem;
}
 
.area_input .area_input_imagen {
    display: flex;
    flex-direction: row;
    margin: 1.25rem 0px 0px 0px;
    align-items: center;
}

.f_area_input_respuesta{
    display: flex;
    margin: 0rem 0.25px 0px 0rem;
    border-radius:  0.2rem;
    border: 1px solid var(--color-bordes-lineas);
    border-bottom-width: 0.125rem ;
}

.f_area_input_respuesta .f_input_respuesta {
    display: flex;
    background-color: white;
    color:  rgb(56, 56, 56);  
    width: 100%;
    min-height: 1rem;
    font-size: 0.75rem;
    line-height: 0.7rem;
    border-radius:  0.2rem;
    padding: 0.375rem 0.75rem;
    resize: none;
    user-select: text;
    outline: none;
    align-items: center;
    }

.f_area_input_respuesta:hover {
    border-bottom-color:var(--color-clic-texto)
}

.f_area_input_respuesta_filtrado {
    background-color: var(--color-btn-texto);
    display: flex;
    margin: 0rem 0.25px 0px 0rem;
    border-radius:  0.2rem;
    border: 1px solid var(--color-bordes-lineas);
}

.f_area_input_respuesta_filtrado .f_input_respuesta_filtrado {
    display: flex;
    background-color: var(--color-btn-texto);
    color:  rgb(56, 56, 56);  
    min-height: 1rem;
    font-size: 0.75rem;
    line-height: 0.7rem;
    border-radius:  0.2rem;
    padding: 0.375rem 0.75rem;
    resize: none;
    user-select: text;
    outline: none;
    align-items: center;
    }



.f_input_respuesta .f_input_formato {
    --background-color: var(--color-btn-texto);
    --background-color: white;
    color:  rgb(61, 61, 61);
    width: 100%;
    min-height: 1rem;
    font-size: 0.8rem;
    line-height: 0.7rem;
    border-width: 0px 0px 0.125rem;
    padding: 0;
    resize: none;
    user-select: text;
    border: 0;
    outline: none;
}

.validar_usuario {
    color: #D9534F; 
    background-color: #F9E2E1; 
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    opacity: 1;
    --margin-top: 1rem;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  }
  
.show {
    opacity: 1;
    transform: translateY(0); /* Regresa a su posición original */
}

.usuario_logueado {
    color: #377329; 
    background-color: #c5f3c7; 
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    opacity: 1;
    --margin-top: 1rem;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  }

.login-container {
    text-align: center;
    width: 400px;
    padding: 50px;
    border: 1px solid #fff;
    border-radius: 25px;
    box-shadow: 0 0 10px rgb(0 0 0 / 27%);
    background-color: white;
    cursor: default;
}

.sso-access {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
}

.sso-access p {
    color: #3d4d59;
    font-size: 0.9rem;
    line-height: 1.4;
}

.sso-login-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    border-radius: 0.5rem;
    background: #032f52;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

.sso-login-link:hover,
.sso-login-link:focus-visible {
    background: #045b7f;
}

.login-local-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #5c6871;
    font-size: 0.75rem;
    margin: 1.5rem 0;
}

.login-local-divider::before,
.login-local-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #d6dde1;
}

form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.recuperar_contrasena{ 
    --margin-top: 20px;
}

.recuperar_contrasena span{
    color:  var(--color-btn-fondo);
}

.area_boton{
    display: flex;
    flex-direction: row;
    --padding: 0rem 1rem 0rem 1rem;
    --flex-flow: row wrap;
    --align-items: center;
    --justify-content: space-between;
    justify-content: center;
    --width: 100%;
    height: 3rem;
   --margin-top: 1rem;
}

.area_boton .boton{
    display: flex;
    --flex-flow: row nowrap;
    align-items: center;
    justify-items: center;
    --column-gap: 1.25rem;
    margin: 0rem 0.2rem;
    width: 100%;
}

.boton .formato_boton{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.125rem solid transparent;
    vertical-align: middle;
    cursor: pointer;
    text-decoration-line: none;
    outline-style: none;
    color: var(--color-btn-texto);
    background: #0c0c0c;
    border-radius: 25px;
    min-width: 6rem;
    min-height: 40px;
    line-height: 1.375rem;
    font-weight: 600;
    width: 100%;
}

.formato_boton:hover{
    background-color: #252526;
}

.formato_boton:active{
    background-color: #0c0c0c;
}

.login-container h2{
    color: var(--color-clic-texto);
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}


.page-login .grid-container{
    display: grid;
    gap: 10px; 
    grid-template:
    "header     header  header"     56px
    "navbar     main    sidebar "   1fr
    "footer     footer  footer"     20px /
    170px       minmax(0, 1fr)    200px;
    height: 100vh;
}



@media (max-width: 900px){
    .page-login .grid-container{
        /***************
        grid-template-columns: 200px auto;
        grid-template-rows: 100px 50px auto 100px;
        grid-template-areas: 
        "header header"
        "navbar navbar"
        "sidebar main"
        "footer footer";
        ****************/
        grid-template:
        "header     header" 100px
        "navbar     navbar" 50px
        "sidebar    main" auto
        "footer     footer" 100px /
        200px       auto
    }
}


@media (max-width: 600px){
    /*
    .page-login .grid-container{
        grid-template:
        "header     header  header"     100px
        "navbar     main    sidebar "   auto
        "footer     footer  footer"     100px /
        200px       auto    200px
    }

    .grid-header{
        display: grid;
        gap: 10px;
        grid-template: 
        "inicio centro  fin" 100px /
        200px auto 200px;
    }*/
    .page-login .grid-container{
    display: grid;
    gap: 10px;
    grid-template: 
    "header"    100px
    "navbar"    50px
    "main"      auto
    "sidebar"   100px
    "footer"    100px;   
    
}
}

@media (max-width: 520px) {
    .contenedor1 {
        width: 100%;
        box-sizing: border-box;
        padding: 1.5rem 1rem;
    }

    .cripton-login-brand {
        width: min(280px, 80vw);
        height: auto;
    }

    .login-container {
        width: 100%;
        box-sizing: border-box;
        padding: 2rem 1.25rem;
        border-radius: 1rem;
    }
}