:root {
    /* Box model */
    --header-height: 7vh;
    --min-height: 100dvh;
    --min-height: calc(100vh - 7vh); /* Sacando el header */
    --padding: 0% 10%; /* Se entiende a lo largo de todos los CSS, no se como */
    --section-padding: 3% 5%;
    --section-padding-desktop: 3% 10%;

    /* Colors */
    /* Primario */
    --lila-1: #6c66c2;/* rgb(34, 104, 235); */
    --lila-2: #9893da;  /* rgb(34, 104, 235); */
    --lila-3: #ede9fe;/* rgb(229,229,255); */
    /* Yellow */
    --yellow-2: #f3c262;
    --yellow-3: #fad4a6;
    /* Green */
    --green-2: #8ea678; /* rgb(4,185,118);  */
    --green-3: #b7bda0; /* rgb(228,254,245); */
    /* Red */
    --red-2:  #ec6a52;
    --red-3: #f3b7ad;
    /* Blue */
    --blue-2:  #49639f;/* #1F5BB5 */
    --blue-3: #acbedd;/* 5C8FEA */
    /* Gray */
    --gray-2:  #625f63;
    --gray-3: #d1d5db;

    --col: #cce5ff;
    --col2: #040404;
    --col3: #10b981;
    --col4: #f0fdf4;

    /* Otros */
    --bc-1: #212121; /* Familia de #000021: https://www.colorhexa.com/000021 y  Familia de #013220: https://www.colorhexa.com/013220 */
    --bc-2: #f2f2f2;
    --bc-3: #fff;

    /* Font */
    --font-family: "Poppins", "Nunito Sans", "Space Grotesk";  /* "Outfit", sans-serif,  */
    --color: #333;

    /* Sizes Fallback (para navegadores viejos) */
    --fs: 16px; 
    --fs-disclaimer: 12px;
    --fs-info_message: 10px;
    --fs-h1: 50px;
    --fs-h2: 35px;
    --fs-h3: 26px;
    --fs-h4: 20px;
    --fs-h5: 16px;
    --fs-header: 16px;
    --fs-header-logo: 25px;
    --fs-tabla_predicciones: 12px;  /* Fallback x posible imcompatibilidad de clamp() */
    --fs-metric: 120px;
    --fs-metric-medium: 80px;

    /* Sizes en navegadores modernos */
    --fs: clamp(16px, 1vw, 20px);
    --fs-small: clamp(13px, 0.9vw, 16px);
    --fs-disclaimer: clamp(10px, 0.8vw, 12px);
    --fs-info_message: clamp(8px, 0.8vw, 12px);
    --fs-h1: clamp(36px, 8vw, 72px);  /* clamp(40px, 3vw, 40px); */
    --fs-h2: clamp(28px, 6vw, 54px); /* clamp(30px, 2vw, 40px); */
    --fs-h3: clamp(24px, 4vw, 36px); /* clamp(20px, 1vw, 24px); */
    --fs-h4: clamp(20px, 3vw, 28px); /* (14px, 1vw, 18px); */
    --fs-h5: clamp(16px, 3vw, 20px);
    --fs-header: clamp(14px, 1vw, 20px);
    --fs-header-logo: clamp(28px, 3vw, 40px);
    --fs-tabla_predicciones: clamp(12px, 1.8vw, 20px); /* Ajusta entre 8px y 50px basado en 3vw */
    --fs-metric: clamp(80px, 10vw, 180px);
    --fs-metric-medium: clamp(60px, 8vw, 120px);

    /* Button */
    --border-radius-button: 1rem;
    --padding-button: 1rem;
    --padding-button: clamp(8px, 2vw, 14px)
}

/* -------------------------------------------- GENERALES -------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    /* Box model */
    min-height: 100vh; /* Para garantizar que la pagina ocupe siempre al menos el 100% del viewport height */
    width: 100vw;
    box-sizing: border-box;

    /* Font */
    font-family: var(--font-family);
    font-size: var(--fs);
    text-align: center;
    color: var(--color);
    line-height: 180%;

    /* Color */
    background: var(--bc-2);
}

header, main > section, footer {
    padding: var(--padding);  /* Margen en main */
}

header {
    height: var(--header-height);
}

main {
    min-height: var(--min-height);  /* Le agrego un poco mas que 100vh porque en mobile el zocalo del navegador le come un poco de altura y queda mal, prefiero que sobre */
}

footer {
    background-color: var(--bc-1);
    color: white;
}

/* Styles por defecto */
h1, h2, h3, h4, h5, h6 {
    line-height: initial;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color:black;
    padding: 0;
}

/* ---------------------
Estilo para background colors
 --------------------- */
.bc-lila1 {
    background-color: var(--lila-1);
    color: var(--color);
}

.bc-lila3 {
    background-color: var(--lila-3);
    color: var(--color);
}

.bc-blue3 {
    background-color: var(--blue-3);
    color: var(--color);
}

.bc-yellow2 {
    background-color: var(--yellow-2);
    color: var(--color);
}

.bc-yellow3 {
    background-color: var(--yellow-3);
    color: var(--color);
}

.bc-green3 {
    background-color: var(--green-3);
    background-color: var(--col4);
    color: var(--color);    
}

.bc-red3 {
    background-color: var(--red-3);
    color: var(--color);
}

.bc-gray1 {
    background-color: var(--bc-1);
    color: #fff;
}

.bc-gray2 {
    background-color: var(--bc-2);
    color: var(--color);
}

.bc-white {
    background-color: var(--bc-3);
    color: var(--color);
}

/* ---------------------
Estilo para titulos h
 --------------------- */
h1, .font_size_h1 {
    font-size: var(--fs-h1);
    margin: 0;
    padding: 2rem 0;
}

h2, .font_size_h2 {
    font-size: var(--fs-h2);
    margin: 0;
    padding: 1.5rem 0;
}

h3, .font_size_h3 {
    font-size: var(--fs-h3);
    margin: 0;
    padding: 1rem 0;
}

h4, .font_size_h4 {
    font-size: var(--fs-h4);
    margin: 0;
    padding: 0.5rem 0;
}

h5, .font_size_h5 {
    font-size: var(--fs-h4);
    margin: 0;
    padding: 0.5rem 0;
}

.title-style {
  background-color: var(--lila-2);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: var(--fs-h4);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  margin-bottom: 16px;
}

.subtitle-style {
  background-color: var(--lila-3);
  padding: 10px 18px;
  border-radius: 6px;
  font-size: var(--fs-h5);
  font-weight: 400;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 12px;
}

/* ---------------------
Padding y margin en secciones
 --------------------- */
.section_padding {
    padding: var(--section-padding);
}

.complete_section {
    min-height: 100dvh;
    min-height: var(--min-height);
}

.complete_section_center {
    min-height: 100dvh;
    min-height: var(--min-height);
    padding-top: 0 !important; /* si hay padding vertical, se descalibra */
    padding-bottom: 0 !important;

    /* Si queres que la calculadora este centrada verticalmente antes de resultados */
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

/* ---------------------
Estilo para botones
 --------------------- */
.button_container {
    display: flex;
    justify-content: center;
}

.button_1, .button_2, .button_3, .button_4{
    display: block;
    width: min-content;
    min-width: 50px;
    padding: 12px 24px;
    /* Font */
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    /* Color */
    background-color: var(--lila-1);
    color: #fff;
    /* Border */
    border: none;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    /* Otros */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.button_2 {
    background-color: var(--red-2);
}

.button_3 {
    background-color: var(--yellow-2);
    color: var(--color);
}

.button_4 {
    background-color: var(--blue-2);
}

/* ---------------------
Estilo para Listas ul y elementos li 
 --------------------- */
.list {
    padding-left: 3rem;
    padding-left: clamp(1.5rem, 3vw, 3rem);
    margin-left: 0;
}

/* Variante con números romanos */
.list-num-romana {
    list-style-type: lower-roman;
}

/* Variante con círculos */
.list-circle {
    list-style-type: circle;
}

/* Variante con números decimales */
.list-numerada {
    list-style-type: decimal;
}

.list li {
    text-align: left;
    margin-bottom: 0.5rem;
    list-style-type: inherit; 
}

/* Estilo de enlaces dentro de la lista */
.list li a[href] {
    text-decoration: none;
    color: var(--blue-2);
}

/* Listas dentro de la lista pricipal */
.sublist {
    list-style: circle;
    padding-left: 3rem; 
    padding-left: clamp(1.5rem, 3vw, 3rem);
    margin-left: 0; 
}

/* ---------------------
Estilo para Formulas / Ecuaciones matematicas
 --------------------- */
.formula {
    display: block;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-style: italic;
    overflow-x: auto;
    text-align: center;
}

/* Fórmulas inline dentro de párrafos */
.formula-inline {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    padding: 0.2rem 0.4rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
}

/* ---------------------
Estilo para Tablas HTML
 --------------------- */
.HTMLtable__container {
    display: flex;
    justify-content: center;
}

.HTMLtable {
    text-align: center;
    border-bottom: 1px solid #212121;
}

.HTMLtable th, .HTMLtable td {
    border-top: 1px solid #212121;
}

/* ---------------------
Clases de alineacion
 --------------------- */
.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

/* ---------------------
Estilo para palabras a remarcar
 --------------------- */
/* Highlight abreviado como 'hl' */
.hl-word-lila {
    color: var(--lila-1) !important;
    font-weight: 1000;
}

.hl-word-red {
    color: var(--red-2);
    font-weight: 1000;
}

.hl-word-yellow {
    color: var(--yellow-2);
    font-weight: 1000;
}

.hl-word-green {
    color: var(--green-2);
    font-weight: 1000;
}

.hl-word-blue {
    color: var(--blue-2);
    font-weight: 1000;
}

/* ---------------------
Otros
 --------------------- */
.margin-top {
    margin-top: 2rem;
    margin-top: clamp(20px, 2vw, 32px);
}

.margin-bottom {
    margin-bottom: 2rem;
    margin-bottom: clamp(20px, 2vw, 32px);
}


.italic {
    font-style: italic;
}

hr {
  border: none;
  height: 1px;
  background-color: #ddd;
  margin: 2em 0;
}

.big-result {
    font-size: var(--fs-h1);
    padding: 5%;
    text-align: center;
}

.bb {
    border-bottom: 4px solid black;
}

/* -------------------------------------------- 
Desktop config 
-------------------------------------------- */
@media only screen and (min-width: 1000px) {
    .section_padding {
        padding: var(--section-padding-desktop);
    }

    .button_1, .button_2, .button_3, .button_4 {
        min-width: 200px;
    }
}