/* Cores padrões */
:root {
  /* Cores principais */
  --main-color-ano-1: rgba(247,149,91); /* #F7955B */
  --main-color-ano-2: rgba(179,122,180); /* #B37AB4 */
  --main-color-ano-3: rgba(118,155,101); /* #769B65 */
  --main-color-ano-4: rgba(244,132,122); /* #F4847A */
  --main-color-ano-5: rgba(100,175,193); /* #64AFC1 */
  
  /* Cores secundárias (gradiente) */
  --secundary-color-ano-1: rgba(255,236,224); /* #FFECE0 */
  --secundary-color-ano-2: rgba(254,239,255); /* #FEEFFF */
  --secundary-color-ano-3: rgba(243,255,235); /* #FEEFFF */
  --secundary-color-ano-4: rgba(255,237,234); /* #FFEDEA */
  --secundary-color-ano-5: rgba(230,238,240); /* #E6EEF0 */
  
  /* Cores extras (jogo) */
  --extra-color-ano-1: rgba(255,211,182); /* #FFD3B6 */
  --extra-color-ano-2: rgba(241,207,244); /* #F1CFF4 */
  --extra-color-ano-3: rgba(204,225,190); /* #CCE1BE */
  --extra-color-ano-4: rgba(255,199,194); /* #FFC7C2 */
  --extra-color-ano-5: rgba(161,201,213); /* #A1C9D5 */
    
  /* Cores extras (lições) */
  --extra-color2-ano-1: rgba(251,189,147); /* #FBBD93 */  
  --extra-color2-ano-2: rgba(204,168,207); /* #CCA8CF */
  --extra-color2-ano-3: rgba(166,187,151); /* #A6BB97 */
  --extra-color2-ano-4: rgba(249,178,166); /* #F9B2A6 */
  --extra-color2-ano-5: rgba(161,201,213); /* #A1C9D5 */
  
  --extra-color3-ano-1: rgba(255,223,202); /* #FFDFCA */
  --extra-color3-ano-2: rgba(225,198,227); /* #E1C6E3 */
  --extra-color3-ano-3: rgba(208,223,198); /* #D0DFC6 */
  --extra-color3-ano-4: rgba(255,213,206); /* #FFD5CE */
  --extra-color3-ano-5: rgba(208,230,237); /* #D0E6ED */
  
  
  /* Branco */
  --main-color-branco: rgba(255,255,255);  
}

/* Células */ 
/* 
.cell-ano1 { background: linear-gradient(180deg, var(--secundary-color-ano-1), var(--main-color-ano-1)) !important; }
.cell-ano2 { background: linear-gradient(180deg, var(--secundary-color-ano-2), var(--main-color-ano-2)) !important; }
.cell-ano3 { background: linear-gradient(180deg, var(--secundary-color-ano-3), var(--main-color-ano-3)) !important; }
.cell-ano4 { background: linear-gradient(180deg, var(--secundary-color-ano-4), var(--main-color-ano-4)) !important; }
.cell-ano5 { background: linear-gradient(180deg, var(--secundary-color-ano-5), var(--main-color-ano-5)) !important; }
*/

.cell-ano1 { background: linear-gradient(180deg, var(--main-color-branco) 20%, var(--extra-color2-ano-1) 100%) !important; }
.cell-ano2 { background: linear-gradient(180deg, var(--main-color-branco) 20%, var(--extra-color2-ano-2) 100%) !important; }
.cell-ano3 { background: linear-gradient(180deg, var(--main-color-branco) 20%, var(--extra-color2-ano-3) 100%) !important; }
.cell-ano4 { background: linear-gradient(180deg, var(--main-color-branco) 20%, var(--extra-color2-ano-4) 100%) !important; }
.cell-ano5 { background: linear-gradient(180deg, var(--main-color-branco) 20%, var(--extra-color2-ano-5) 100%) !important; }

.cell-celular-titulo-ano1 { background-color: var(--main-color-ano-1) !important; }
.cell-celular-titulo-ano2 { background-color: var(--main-color-ano-2) !important; }
.cell-celular-titulo-ano3 { background-color: var(--main-color-ano-3) !important; }
.cell-celular-titulo-ano4 { background-color: var(--main-color-ano-4) !important; }
.cell-celular-titulo-ano5 { background-color: var(--main-color-ano-5) !important; }

.cell-celular-fundo-ano1 { background-color: rgba(255,211,182) !important; }
.cell-celular-fundo-ano2 { background-color: rgba(241,207,244) !important; }
.cell-celular-fundo-ano3 { background-color: rgba(204,225,190) !important; }
.cell-celular-fundo-ano4 { background-color: rgba(255,199,194) !important; }
.cell-celular-fundo-ano5 { background-color: rgba(197,225,235) !important; }

/* Botão aba */
.btn-aba-ano1 {	background-color: var(--extra-color3-ano-1) !important; }
.btn-aba-ano2 {	background-color: var(--extra-color3-ano-2) !important; }
.btn-aba-ano3 {	background-color: var(--extra-color3-ano-3) !important; }
.btn-aba-ano4 {	background-color: var(--extra-color3-ano-4) !important; }
.btn-aba-ano5 { background-color: var(--extra-color3-ano-5) !important; }

/* Botão aba (estados) */
.btn-aba-ano1.active { background-color: var(--main-color-branco) !important; font-weight: bold !important; }
.btn-aba-ano2.active { background-color: var(--main-color-branco) !important; font-weight: bold !important; }
.btn-aba-ano3.active { background-color: var(--main-color-branco) !important; font-weight: bold !important; }
.btn-aba-ano4.active { background-color: var(--main-color-branco) !important; font-weight: bold !important; }
.btn-aba-ano5.active { background-color: var(--main-color-branco) !important; font-weight: bold !important; }

/* Texto */
.txt-ano1 {	color: var(--main-color-ano-1) !important; }
.txt-ano2 {	color: var(--main-color-ano-2) !important; }
.txt-ano3 {	color: var(--main-color-ano-3) !important; }
.txt-ano4 {	color: var(--main-color-ano-4) !important; }
.txt-ano5 {	color: var(--main-color-ano-5) !important; }

/* Barra de progresso (timer) */
.prog-bar-ano1 { background-color: var(--main-color-ano-1) !important; }
.prog-bar-ano2 { background-color: var(--main-color-ano-2) !important; }
.prog-bar-ano3 { background-color: var(--main-color-ano-3) !important; }
.prog-bar-ano4 { background-color: var(--main-color-ano-4) !important; }
.prog-bar-ano5 { background-color: var(--main-color-ano-5) !important; }

/* Background sobre páginas específicas ao modificar 'abas' */
.page-bg-ano1 { background: linear-gradient(-90deg, var(--extra-color3-ano-1) 0%, var(--main-color-ano-1) 55%), url('../elementos/background/background-03.png') !important; } 
.page-bg-ano2 { background: linear-gradient(-90deg, var(--extra-color3-ano-2) 0%, var(--main-color-ano-2) 55%), url('../elementos/background/background-03.png') !important; }
.page-bg-ano3 { background: linear-gradient(-90deg, var(--extra-color3-ano-3) 0%, var(--main-color-ano-3) 55%), url('../elementos/background/background-03.png') !important; }
.page-bg-ano4 { background: linear-gradient(-90deg, var(--extra-color3-ano-4) 0%, var(--main-color-ano-4) 55%), url('../elementos/background/background-03.png') !important; }
.page-bg-ano5 { background: linear-gradient(-90deg, var(--extra-color3-ano-5) 0%, var(--main-color-ano-5) 55%), url('../elementos/background/background-03.png') !important; }