:root {
  --primario: #91df71;
  --secundario: #5c7aff;
  --terciario: #ffc857;
  --secundario-variacion: #4a8fe7;
  --primario-desvanecido: #90df712a;
  --primario-fondotvc: #90df7152;
  --secundario-desvanecido: #5c7aff2a;
  --terciario-desvanecido: #ffc7572a;
  --oscuro: #202124;
  --gris: #909092;
  --gris-claro: #f7f7f7;
  --oro: #efbf04;
  --plata: #d9d9d9;
  --bronce: #ce8946;
  --oro-desvanecido: #efc004cb;
  --plata-desvanecido: #d9d9d9cb;
  --bronce-desvanecido: #ce8a46cb;
  --transicion-time: 0.3s;
}

*,
::after,
::before,
h1,
h2,
h3,
h4 {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

body {
  color: #000000;
  background-color: #ffffff;
}

a {
  text-decoration: none;
  color: inherit;
}

/* comportamiento por defecto de las imagenes */
.green-placeholder {
  background-color: var(--gris-claro); /* Verde claro para imágenes */
}
img {
  width: 100%;
  height: 100%;
}

/*Define el estilo de boton general para todo el documento*/
.btn {
  /* Definimos un color por defecto por si olvidas asignarlo */
  --btn-color: #cccccc;

  background-color: var(--btn-color);

  display: inline-block;
  padding: 10px 24px;
  border-radius: 20px;
  font-weight: 600;
  text-align: center;
  transition:
    opacity var(--transicion-time) ease,
    box-shadow var(--transicion-time) ease;

  &.btn-verde {
    --btn-color: var(--primario);
  }
  &.btn-azul {
    --btn-color: var(--secundario);
  }
  &.btn-amarillo {
    --btn-color: var(--terciario);
  }
  &.btn-oro {
    --btn-color: var(--oro);
  }
  &.btn-plata {
    --btn-color: var(--plata);
  }
  &.btn-bronce {
    --btn-color: var(--bronce);
  }
  &.btn-amarillo-desvanecido {
    --btn-color: var(--terciario-desvanecido);
  }

  &:hover {
    opacity: 0.9;
    box-shadow: 
    /* Primer anillo: 50% del color original, 50% transparente */
      0 0 0 8px color-mix(in srgb, var(--btn-color) 50%, transparent),
      /* Segundo anillo: 20% del color original, 80% transparente */ 0 0 0 16px
        color-mix(in srgb, var(--btn-color) 20%, transparent);
  }

  &:active {
    transform: translateY(2px) scale(0.98);
  }
}

.btn-desactivado {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 20px;
  font-weight: 600;
  background-color: white;
  cursor: default;
}

.date {
  text-transform: capitalize;
  color: var(--gris);
  font-weight: 500;
}