/*
	CSS personalizado para 02 PROJECT
*/

/**************************************** GAMA DE COLORES ****************************************/

/*    Azul Oscuro: 017CBA rgb(  1,124,186) */
/*           Gris: 999999 rgb(153,153,153) */
/*     Azul Medio: 80BDDC rgb(128,189,220) */
/*     Azul Claro: BFDEED rgb(191,222,237) */
/* Azul Muy Claro: DFEEF6 rgb(223,238,243) */

/*   Verde Oscuro: 07B289 rgb(  7,178,137) */
/*    Verde Medio: 83D8C4 rgb(131,216,196) */
/*    Verde Claro: C1EBE1 rgb(193,235,225) */
/*Verde Muy Claro: E0F5F0 rgb(224,245,240) */

/************************************ MODIFICADOS DE syle-home ***********************************/

/******************************************* GENERALES *******************************************/

div[id^="rowContent-"] .divTitle   h1             { font-family: var(--font-family-narrow); font-size: 24px; font-weight: 600; }
div[id^="rowContent-"] .divContent p              { margin: 15px 0px; text-align: justify; }
div[id^="rowContent-"] .divContent p:last-of-type { margin-bottom: 0px; }
div[id^="rowContent-"] .divContent a              { color: var(--color1-hex) !important; }
div[id^="rowContent-"] .divContent a:hover        { color: var(--color3-hex) !important; }

div[id^="rowContent-"] div[class^="divContent-"] { padding-left: 20px; /*max-width: 780px;*/ border-left: solid 4px var(--color3-hex); }

@media (max-width: 1180px) { div[id^="rowContent-"] div[class^="divContent-"] { margin: 0px 20px; } }

@media (max-width:  980px) { div[id^="rowContent-"] .divTitle h1 { font-size: 20px; } }

@media (max-width:  780px) {
	div[id^="rowContent-"] div[class^="divContent-"] { padding-left: 15px; }
	div[id^="rowContent-"] .divTitle   h1 { font-size: 18px; }
	div[id^="rowContent-"] .divContent p  { margin: 10px 0px; font-size: 14px; }
}

@media (max-width:  480px) { div[id^="rowContent-"] div[class^="divContent-"] { margin: 0px; padding-left: 10px; border-left: solid 2px var(--color3-hex); } }

/******************************************* #rowGantt *******************************************/

#rowGantt .divGantt                  { padding-left: 24px; }
#rowGantt .divGantt .divTitle h3     { font-family: var(--font-family-narrow); font-size: 20px; font-weight: 600; }
#rowGantt .divGantt .divMeses        { margin-top: 15px; border: solid 1px var(--color1-hex); border-width: 1px 0px 0px 1px; }
#rowGantt .divGantt .divMeses        { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
#rowGantt .divGantt .divMes          { padding: 5px 0px; width: calc(100% / 12); font-family: var(--font-family-narrow); font-size: 13px; }
#rowGantt .divGantt .divMes          { border: solid 1px var(--color1-hex); border-width: 0px 1px 1px 0px;  text-align: center; line-height: 120%; cursor: default; }

#rowGantt .divGantt .divMes.pasado   { background:           var(--color-ver1-hex); color:           #FFFFFF; font-weight: 500; }
#rowGantt .divGantt .divMes.presente { background:           var(--color-ver3-hex); color:           #333333; font-weight: 600; }
#rowGantt .divGantt .divMes.futuro   { background: rgba(var(--color-ver4-rgb),0.5); color: var(--color1-hex); font-weight: 500; }

#rowGantt .divGantt .divFalta        { margin-top: 10px; font-family: var(--font-family-narrow); font-size: 18px; font-weight: 600; font-style: italic; color: var(--color-ver1-hex); }

@media (max-width: 1180px) { #rowGantt .divGantt { padding: 0px 20px 0px 24px; } }

@media (max-width:  980px) {
	#rowGantt .divGantt .divTitle h3 { font-size: 18px; }
	#rowGantt .divGantt .divMes      { width: calc(100% / 12); }
}

@media (max-width:  780px) {
	#rowGantt .divGantt .divTitle h3 { font-size: 16px; }
	#rowGantt .divGantt .divMeses    { margin-top: 10px; }
	#rowGantt .divGantt .divFalta    { margin-top: 5px; font-size: 16px; }
}

@media (max-width:  580px) { #rowGantt .divGantt .divMes { width: calc(100% / 8); } }
@media (max-width:  480px) { #rowGantt .divGantt         { padding: 0px 0px 0px 2px; } }
@media (max-width:  380px) { #rowGantt .divGantt .divMes { width: calc(100% / 6); } }

/***************************************** #rowContent-2 *****************************************/

#rowContent-2 .divContent img { margin: auto; width: 100%; max-width: 780px; display: table; }