@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=Playfair+Display:wght@400;500&display=swap");

:root {
  --base: #2f4155;
  --baselight: #4f6882;
  --basefaint: #95a2b083;
  --background: #eff4f4;
  --figures: #34a853;
  --oficial: #4da4c4ff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --base: #d7e7f7;
    --baselight: #afb8c1;
    --basefaint: #808991;
    --background: #22262b;
  }
}


#observablehq-center {
  margin: 0;
}


body {
  font-family: "Libre Franklin", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: var(--base);
  margin: 30px 0;
}

#titulo {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 2.5em;
  text-align: center;
  line-height: 1;
}

#grafico {
  background-color: var(--background);
  margin: 0 30px;
}

#opcionesCompraVenta,
#opcionesTiempo {
  display: flex;
  align-items: end;
  justify-content: center;
  width: 100%;
  color: var(--base);

  form div {
    display: flex;
    align-items: end;
    justify-content: center;
    margin: 2rem 0 1rem;
    border-radius: 5px;
    background-color: var(--theme-foreground-faintest);
    background-color: var(--background);

    label {
      margin: 0px;
      padding: 10px;

      input[type="radio"] {
        font-family: "Libre Franklin", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        margin: 0;
        appearance: none;
      }
    }

    label:has(input[type="radio"]:checked) {
      background-color: var(--theme-background-a);
      border-radius: 5px;
      border: 1px solid var(--baselight);
    }

    label:has(input[type="radio"]:not(:checked)) {
      cursor: pointer;
    }
  }
}

#opcionesTiempo {
  form div {
    background-color: var(--theme-background-b);
    margin: 0;
    align-items: center;
    gap: 5px;
    label {
      font-size: 0.9em;
      padding: 5px 7px !important;
      background-color: var(--background);
      border: 1px solid var(--basefaint);
      border-radius: 0;
    }
    label:has(input[type="radio"]:not(:checked)) {
      color: var(--baselight);
    }
    label:has(input[type="radio"]:checked) {
      background-color: var(--theme-background-a);
      border: 1px solid var(--baselight);
      border-radius: 0;
    }
    label:first-of-type {
      border-radius: 5px 0 0 5px !important;
    }
    label:last-of-type {
      border-radius: 0 5px 5px 0 !important;
    }
  }
}

.observation {
  font-size: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--base);
  line-height: 1.3;
  margin: 1rem 0 2rem 0;

  .price {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .mid,
    .varieties,
    .variety,
    .limit {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .currency,
    .limit,
    .annotation {
      font-size: 0.8em;
    }

    .mid {
      align-items: center;
      justify-content: start;
      gap: 5px;

      .varieties {
        flex-direction: row;
        align-items: end;
        gap: 3px;

        .variety {
            gap: 5px;
            min-width: 60px;
        }

        .currency {
            font-weight: 700;
        }
      }

      .midValue {
        font-weight: 700;
        display: flex;
        align-items: baseline;
        flex-direction: row;

        .value {
          font-size: 1.3em;
          margin-left: 2px;
          color: var(--figures);
        }

        .oficial {
          color: var(--oficial);
        }
      }

      .annotation {
        font-weight: 600;
        font-size: 0.7em;
      }
      .fuente {
        opacity: 0.7;
      }
    }

    .limit {
      margin: 0 15px;
      min-width: 28px;
    }
  }

  .date {
    font-size: 0.8em;
  }
}

#creditos {
  opacity: 0.8;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 5em 0 0 0;
  font-size: 0.6em;
  color: var(--base);
  gap: .5rem;

  .credito {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100px;
  }

  a {
    color: var(--base);
    text-decoration: underline dotted;
  }

  .creditoNota {
    opacity: 0.8;
  }
}

#devaluacion {
  color: var(--base);
  font-size: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
  gap: 0.8rem;

  div {
    font-size: 0.8em;
  }

  input[type="number"] {
    margin: 0 5px;
    padding: 5px;
    text-align: center;
    background-color: var(--theme-background-a);
    border-radius: 5px;
    border: 1px solid var(--base);
    appearance: textfield;
  }

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }

  .underlined {
    margin: 0 3px;
    text-decoration: underline 1px dotted var(--figures);
    text-underline-offset: 5px;
  }
}

#explicacion {
  display: grid;
  text-underline-offset: 2px;
  font-size: 15px;
  margin: 2em 0 0 0;

  details {
    justify-self: center;
    align-self: center;
    color: var(--base);

    p {
      font-size: 0.8em;
      opacity: 0.8;
    }

    summary {
      background-color: var(--theme-background-a);
      padding: 10px;
      font-style: italic;
      cursor: pointer;
      text-align: center;
      list-style: none;
      text-decoration: 1px dotted underline var(--base);
      font-size: 0.8em;
    }
    div.content {
      background-color: var(--theme-background-b);
      padding: 1px 15px;
      border-radius: 5px;
      a {
        color: var(--base);
        text-decoration: 1px dotted underline var(--base);
      }
      a:hover,
      summary:hover {
        text-decoration: 1px dotted underline var(--figures);
      }

      .cotizacion {
        cursor: pointer;
        font-weight: bold;
        text-decoration: 1px dotted underline var(--base);
      }
      .cotizacion:hover,
      .cotizacion.selected {
        color: var(--figures);
        text-decoration: 1px dotted underline var(--figures);
      }
    }
  }
}

#graficoNota {
  display: flex;
  align-items: center;
  justify-content: center;

  #cotizacionSeleccionada {
    padding: 15px 0 5px 0;
    color: var(--baselight);
    font-size: 0.8em;
    margin: 10px 0 0 0;
    text-align: center;
    /* border-top: 1px dotted var(--baselight); */
    font-style: italic;
  }
}

div.center {
  margin: 3em 0 0 0;
  text-align: center;
}

@media screen and (max-width: 768px) {
  #grafico {
    border-radius: 0em !important;
    border-left: 0;
    border-right: 0;
    margin: 0;
  }
}