/** Add styles here */
/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500&family=Poppins:wght@400;500&display=swap");

/* =============== VARIABLES CSS ============== =*/
:root {
  --header-height: 3.5rem;

  /* ========== Colors ========== */
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: #02da14;
  --second-color: #ff3c00;
  --first-color-rgb: 102, 187, 106;
  --gradient-color: linear-gradient(
    75deg,
    var(--second-color) 20%,
    var(--first-color) 66%
  );
  --gradient-color2: linear-gradient(
    75deg,
    var(--first-color) 20%,
    var(--second-color) 66%
  );
  --first-color-light: hsl(260, 88%, 92%);
  --first-color-dark: hsl(0, 0%, 0%);
  --title-color: hsl(260, 80%, 18%);
  --text-color: hsl(259, 22%, 23%);
  --text-color-light: hsl(260, 16%, 65%);
  --white-color: hsl(0, 0%, 100%);
  --body-color: hsl(215, 33%, 93%);
  --container-color: hsl(0, 0%, 100%);
  --select-page: hsl(276, 92%, 54%);
  --check--icon: var(--first-color);
  --footer-color: #000;
  --section-bg-color: #f4f6f8;
  --card-bg-color: #ffffff;
  --nav-menu-bg: hsla(215, 33%, 93%, 0.85);

  /* ========== Font and typography ========== */
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Poppins", sans-serif;
  --second-font: "Lora", serif;
  --biggest-font-size: 1.75rem;
  --bigger-font-size: 2rem;
  --big-font-size: 1.75rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --logo-font-size: 1.9rem;
  --normal-font-size: 0.938rem;
  --small-font-size: 0.813rem;
  --smaller-font-size: 0.75rem;

  --container-padding-mobile: 15px;
  --container-padding-tablet: 20px;
  --container-padding-desktop: 25px;
  --container-max-width-sm: 540px;
  --container-max-width-md: 720px;
  --container-max-width-lg: 960px;
  --container-max-width-xl: 1140px;
  --container-max-width-xxl: 1320px;

  /* ========== Font weight ========== */
  --font-regular: 400;
  --font-medium: 500;

  /* ========== z index ========== */
  --z-tooltip: 10;
  --z-fixed: 100;
}

/* ========== Responsive typography ========== */
@media screen and (min-width: 1152px) {
  :root {
    --biggest-font-size: 3rem;
    --bigger-font-size: 4rem;
    --big-font-size: 3.5rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: 0.875rem;
    --smaller-font-size: 0.813rem;
  }
}

/* =============== BASE =============== */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body,
input,
button {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}

body {
  background-color: var(--body-color);
  color: var(--text-color);
  transition: background 0.4s;
}

h1,
h2,
h3,
h4 {
  font-weight: var(--font-regular);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-mobile);
  padding-right: var(--container-padding-mobile);
}

/* ================ CUSTOM SCROLLBAR (WebKit/Blink) ================ */
/* Aplicar al body o a elementos específicos con overflow si es necesario */
body::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

body::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 9px;
}

body::-webkit-scrollbar-thumb {
  background-color: var(--first-color);
  border-radius: 11px;
  border: 2px solid var(--body-color);
}

body::-webkit-scrollbar-thumb:hover {
  background-color: var(--second-color);
}

body::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* ================ SELECCIONAR EN LA PAGINA ================ */
::-webkit-selection {
  color: var(--select-page);
  background-color: transparent;
}

::selection {
  color: var(--select-page);
  background-color: transparent;
}

/* =============== THEME =============== */
.NavButtons {
  display: flex;
  align-items: center;
  column-gap: 1.25rem;
}

.ChangeTheme {
  font-size: 1.5rem;
  color: var(--title-color);
  cursor: pointer;
}

/* ========== MODE DARK ========== */
body.dark-theme {
  --title-color: hsl(261, 100%, 89%);
  --text-color: hsl(261, 41%, 87%);
  --body-color: hsl(0, 0%, 16%);
  --container-color: hsl(262, 34%, 19%);
  --select-page: hsl(197, 100%, 50%);
  --check--icon: var(--second-color);
  --section-bg-color: #222;
  --card-bg-color: #333;
  --nav-menu-bg: hsla(0, 0%, 16%, 0.85);
}

/*=============== SCROLL TO TOP BUTTON ===============*/
.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background-color: var(--first-color);
  color: var(--white-color);
  padding: 0.75rem;
  border-radius: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-tooltip, 10);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease,
    background-color 0.3s ease;
}

.scroll-to-top i {
  font-size: 1.5rem;
}

.scroll-to-top:hover {
  background-color: var(--second-color);
}

/* Clase para mostrar el botón */
.scroll-to-top.show-scroll {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ======================================================== */
/* ==        ESTILOS PARA SCROLLBAR PERSONALIZADO        == */
/* ======================================================== */

/* --- Estilos para navegadores WebKit (Chrome, Safari, Edge) --- */
/* Define el ancho del scrollbar */
.dashboard-main-content::-webkit-scrollbar {
  width: 10px;
}

/* El fondo o riel del scrollbar */
.dashboard-main-content::-webkit-scrollbar-track {
  background-color: hsl(220, 18%, 15%);
  border-radius: 10px;
}

/* La barra móvil del scrollbar */
.dashboard-main-content::-webkit-scrollbar-thumb {
  background-color: var(--first-color);
  border-radius: 10px;
  border: 2px solid hsl(220, 18%, 15%);
}

/* Efecto al pasar el mouse sobre la barra */
.dashboard-main-content::-webkit-scrollbar-thumb:hover {
  background-color: #02ff17;
  border-color: hsl(220, 18%, 20%);
}

/* --- Estilos para Firefox --- */
/* Firefox usa una sintaxis más moderna y simple */
.dashboard-main-content {
  scrollbar-width: thin;
  scrollbar-color: var(--first-color) hsl(220, 18%, 15%);
}

/* === PUNTOS DE QUIEBRE COMUNES PARA EL ANCHO DEL CONTENEDOR === */
@media (min-width: 576px) {
  .container {
    max-width: var(--container-max-width-sm);
  }
}

@media (min-width: 768px) {
  .container {
    max-width: var(--container-max-width-md);
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }
}

@media (min-width: 992px) {
  .container {
    max-width: var(--container-max-width-lg);
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: var(--container-max-width-xl);
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: var(--container-max-width-xxl);
  }
}