/* 
 * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 * See LICENSE in the project root for license information.
 */

 html,
 body {
     /* ⚠️ IMPORTANTE: El centrado vertical solo funciona si el padre tiene un alto definido */
    width: 100%;
    height: 100%; /* Ejemplo: Ocupar el 100% de la altura visible del viewport */

    /* 1. Habilitar Flexbox */
    display:block;

    /* 2. Centrado Horizontal (eje principal) */
    justify-content: center;

    
    /* Opcional: para visualizar el contenedor */
    /* border: 2px solid blue; */
     background: linear-gradient(to top, #00D9C5, #009896) no-repeat fixed;
     text-align: center;
     font-family: "Nunito", sans-serif;
 }
 #header{
   margin-top: 10px;
 }

 #container{
    width: 100%;
    margin: auto;
    padding:3px;
    color:#000;
 }

 #web-text{
    font-family: "Nunito", sans-serif;
    color: rgb(255, 255, 255);
    font-size: small;
 }

 #result-text{
   font-family: "Nunito", sans-serif;
   font-size: medium;
   color: #000;
}

.result-item{
   width: 90%;
   margin-top: 10px;
   padding: 5px;
   -webkit-border-radius:12px;
   -moz-border-radius:12px;
   border-radius: 12px;
   overflow-wrap: break-word;
   background-color: #fff;
}

.reliabilitySection{
   display:flex;
   align-items: center
}

 .resultReliable{
    background: linear-gradient(to top, #80CBC4, #00897B) no-repeat fixed;
    -webkit-border-radius:0px 0px 12px 12px;
    -moz-border-radius:0px 0px 12px 12px;
    border-radius:0px 0px 12px 12px;
    text-align: center;
    padding:5px;
    font-family: "Nunito", sans-serif;
    color:#ffffff;
 }

 .resultUnreliable{
    background: linear-gradient(to top, #EF9A9A, #F44336) no-repeat fixed;
    -webkit-border-radius:0px 0px 12px 12px;
    -moz-border-radius:0px 0px 12px 12px;
    border-radius:0px 0px 12px 12px;
    text-align: center;
    padding:5px;
    font-family: "Nunito", sans-serif;
    color:#ffffff;
 }

 .resultLow{
    background: linear-gradient(to top, #FFE082, #FFC107) no-repeat fixed;
    -webkit-border-radius:0px 0px 12px 12px;
    -moz-border-radius:0px 0px 12px 12px;
    border-radius:0px 0px 12px 12px;
    text-align: center;
    padding:5px;
    font-family: "Nunito", sans-serif;
    color:#ffffff;
 }


 .contenedor-loader{
    margin: 10px;
    color: #fff;
 }
 .loader{
    margin: auto;
    border: 3px solid #fff;
    border-radius: 50%;
    border-left-color: transparent;
    width: 25px;
    height: 25px;
    animation: giro 1s linear infinite;
 }

 @keyframes giro {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }

  .hide{
    display: none;
  }