@import url('https://fonts.googleapis.com/css2?family=Anton&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

/* Variables y configuración base */
:root {
    /* Tipografía y colores */
    --font-family: Arial, Helvetica, sans-serif;
    --body-bg: #F5F8F9;
    --header-color: #03a600;
    --container-bg: #F6F6F6;
    --container-border: #D6D6D6;
    --primary: #03A600;
    --secondary: #04AA6D;
    --rounded-button-bg: #F6F6F6;
    --rounded-button-border: #e7e7e7;
    --rounded-button2-border: #008CBA;
    --loading-spinner-border: #f3f3f3;
    --loading-spinner-top: #03A600;
    
    /* Unidad base (1rem = 16px) */
    --base-unit: 1rem;
}

/* Reset y configuración global */
* {
    box-sizing: border-box;
}

/* Cuerpo de la página */
body {
    font-family: var(--font-family);
    background-color: var(--body-bg);
}

/* Encabezado */
header {
    text-align: left;
    color: var(--header-color);
}

/* Sección principal */
section {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Tabla contenedora */
.container-table {
    transition: 0.3s;
    width: 100%;
    border-radius: 0.625rem; /* 10px */
}

/* Encabezado del contenedor */
.container-header {
    padding: 0.125rem 1rem; /* 2px 16px */
    background-color: var(--container-bg);
    border-radius: 0.625rem 0.625rem 0 0;
    border: 0.0625rem solid var(--container-border); /* 1px */
    text-align: left;
}

/* Contenedor general */
.container {
    padding: 0.125rem 1rem;
    background-color: #fff;
    border-radius: 0 0 0.625rem 0.625rem;
    padding-top: 1.25rem;   /* 20px */
    padding-bottom: 2.5rem; /* 40px */
}

/* Contenedor flexible principal */
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    background-color: #fff;
}

/* Elemento izquierdo */
.item-left {
    height: 18.75rem; /* 300px */
    width: 15%;
    background: url('/static/impact_es.svg') no-repeat center;
    background-size: contain;
    display: flex;
    align-items: center;
    margin-top: 6.25rem; /* 100px */
}

/* Elemento central */
.item-middle {
    width: 80%;
}

/* Elemento derecho */
.item-right {
    width: 5%;
    height: 18.75rem; /* 300px */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 6.25rem; /* 100px */
}

/* Menú de la cabecera */
.flex-container-menu {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    background-color: #fff;
    padding: 2.5rem 1.25rem; /* 40px 20px */
}

/* Menú lateral izquierdo */
.item-left-menu {
    height: 6.25rem; /* 100px */
    width: 30%;
    background-size: contain;
    display: flow-root;
    align-items: center;
}

/* Menú central */
.item-middle-menu {
    width: 20%;
}

/* Menú lateral derecho */
.item-right-menu {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Etiqueta de identificador */
.identificador {
    padding-left: 1.25rem; /* 20px */
    width: 100%;
}

/* Elemento individual */
.item {
    height: 6.25rem; /* 100px */
    display: flex;
    align-items: center;
}

/* Puntos de riesgo */
.dot1, .dot2, .dot3, .dot4, .dot5 {
    height: 0.9375rem; /* 15px */
    width: 0.9375rem;  /* 15px */
    border-radius: 50%;
    display: inline-block;
}
.dot1 { background-color: #CE2727; }
.dot2 { background-color: #FDBE6E; }
.dot3 { background-color: #F0F8AB; }
.dot4 { background-color: #76C464; }
.dot5 { background-color: #046F3B; }

/* Menú de navegación */
.nav2 {
    width: 100%;
    text-align: left;
}

/* Estilos para Material Symbols Outlined */
.material-symbols-outlined {
    text-align: center;
    font-size: 2.5rem;
    font-variation-settings:
        'FILL' 0,
        'wght' 300,
        'GRAD' 0,
        'opsz' 24;
}

/* Icono personalizado */
.icon {
    font-family: "Material Symbols Outlined";
    content: "\xf192";
}

/* Clase para seleccionar 100% del ancho */
.user-select-none {
    width: 100%;
}

/* Encabezados */
h1 {
    color: var(--header-color);
    font-size: 4rem; /* 64px */
    font-style: normal;
}
h2 {
    color: var(--header-color);
    font-size: 2rem; /* 18px */
}
h3 {
    color: #333333;
    font-size: 2.5rem;
    line-height: 80px; /* 20px */
}
h4 {
    color: #333333;
    font-size: 1.125rem; /* 18px */
}

/* Botón principal */
.button {
    background-color: var(--primary);
    border: none;
    color: white;
    padding: 1rem 2rem; /* 16px 32px */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.25rem; /* 20px */
    margin: 0.25rem 0.125rem; /* aprox. 4px 2px */
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 0.625rem; /* 10px */
}

/* Botón alternativo */
.button1 {
    background-color: #fff;
    color: black;
    border: 0.125rem solid var(--secondary); /* 2px */
}
.button1:hover,
.button1.active {
    background-color: var(--secondary);
    color: white;
}
.button1:visited {
    background-color: #666;
    color: white;
}

/* Botón con borde redondeado */
.rounded-button {
    background-color: var(--rounded-button-bg);
    color: black;
    border: 0.125rem solid var(--rounded-button-border);
    border-radius: 0;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 1rem 2rem;
    text-align: center;
    text-decoration: none;
    margin: 0.25rem 0.125rem;
    transition-duration: 0.4s;
}
.rounded-button:hover,
.rounded-button.active {
    background-color: var(--secondary);
    color: white;
}

/* Botón redondeado alternativo */
.rounded-button2 {
    background-color: #fff;
    color: black;
    border: 0.125rem solid var(--rounded-button2-border);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 1rem 2rem;
    text-align: center;
    text-decoration: none;
    margin: 0.25rem 0.125rem;
    transition-duration: 0.4s;
}
.rounded-button2:hover {
    background-color: var(--rounded-button2-border);
    color: white;
}

/* Contenedor del heatmap */
#heatmap {
    height: 29.375rem; /* 470px */
    width: 100%;
}

/* Botones de intervalo */
.interval-buttons {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 1.25rem; /* 20px */
}

/* Botón para días */
.button-day {
    background-color: var(--primary);
    border: none;
    color: white;
    padding: 0.25rem 0.375rem; /* 4px 6px */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.25rem;
    margin: 0.25rem 0.125rem;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 0.625rem;
    width: 3.75rem; /* 60px */
}

/* Botón alternativo 2 */
.button2 {
    background-color: #fff;
    color: black;
    border: 0.125rem solid var(--secondary);
}
.button2:hover,
.button2.active {
    background-color: var(--secondary);
    color: white;
}
.button2:visited {
    background-color: #666;
    color: white;
}

/* Botón de temperatura */
.button-temp {
    background-color: var(--primary);
    border: none;
    color: white;
    padding: 1rem 2rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.25rem;
    margin: 0.25rem 0.125rem;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 0.625rem;
}

/* Botón de alerta */
.button-alert {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 0.875rem 1.625rem; /* aprox. 14px 26px */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.25rem;
    margin: 0.25rem 0.125rem;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 0.625rem;
}

/* Alerta tipo 1 */
.alert1 {
    background-color: #fff;
    color: black;
    border: 0.125rem solid var(--primary);
}
.alert1:hover,
.alert1.active {
    background-color: #14563E;
    color: white;
}
.alert1:visited {
    background-color: #666;
    color: white;
}

/* Campo de entrada personalizado */
.myinput {
    width: 15.625rem; /* 250px */
    height: 1.25rem;   /* 20px */
}

/* Contenedor del slider */
.slider-input {
    position: initial;
    margin-top: 1.1875rem; /* 19px */
    width: 16.875rem;     /* 270px */
    height: 3.5625rem;    /* 57px */
    padding: 1.25rem;     /* 20px */
    border: 0.125rem solid var(--primary);
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
}

/* Slider de rango */
#dayRange {
    -webkit-appearance: none !important;
    width: 12.5rem;      /* 200px */
    height: 0.3125rem;   /* 5px */
    background: var(--primary);
    border: none;
    outline: none;
    border-radius: 40px;
}
#dayRange::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 1.25rem;     /* 20px */
    height: 1.25rem;    /* 20px */
    margin-top: -0.875rem; /* -14px */
    background: #f5f5f5;
    border: 0.125rem solid var(--primary);
    border-radius: 50%;
    cursor: pointer;
}
#dayRange::-webkit-slider-thumb:hover {
    background: #14563E;
    width: 1.875rem;    /* 30px */
    height: 1.875rem;   /* 30px */
}

/* Indicador de carga */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    row-gap: 0.9375rem; /* 15px */
}
.loading .loading-spinner {
    border: 0.5rem solid var(--loading-spinner-border);
    border-top: 0.5rem solid var(--loading-spinner-top);
    border-radius: 70%;
    width: 3.75rem;  /* 60px */
    height: 3.75rem; /* 60px */
    animation: spin 1s linear infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loading .loading-label {
    font-weight: bold;
}

/* Animación de giro */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================= */
/*        MEDIA QUERIES RESPONSIVE          */
/* ========================================= */

/* Para pantallas pequeñas (móviles) */
@media only screen and (max-width: 600px) {
  html {
    font-size: 1rem;  /* Base: 16px */
  }
  /* Ajusta márgenes y paddings si es necesario */
  .container-table, .container {
    padding: 0.5rem;
  }
  .flex-container-menu {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
}

/* Para pantallas medianas (tablets) */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
  html {
    font-size: 1.125rem;  /* Base: 18px */
  }
  .container-table, .container {
    padding: 1rem;
  }
}

/* Para pantallas grandes (laptops y desktops) */
@media only screen and (min-width: 1025px) {
  html {
    font-size: 1.25rem;  /* Base: 20px */
  }
  .container-table, .container {
    padding: 1.5rem;
  }
}

/* Para monitores 4K */
@media only screen and (min-width: 3840px) {
  body {
    zoom: 1.5;
  }
  html {
    font-size: 3rem;
  }
}