/*
	CSS personalizado para 01 PROGRAMACION
*/

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

/*    Azul oscuro: 236089 rgb( 35, 96,137)*/
/*           Gris: 999999 rgb(153,153,153)*/
/*     Azul medio: 95A3BB rgb(149,163,187)*/
/*     Azul claro: CAD1DD rgb(202,209,221)*/
/* Azul muy claro: E4E8EE rgb(228,232,238)*/

/*           Azul: 4691B0 rgb( 70,145,176)*/
/*          Beige: E3C4A7 rgb(227,196,167)*/
/*        Magenta: 883848 rgb(136, 56, 72)*/

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

/************************************ #rowProgramacionHeading ************************************/

#rowProgramacionHeading .divHeading { margin: 50px 0px 100px 0px; }

@media (max-width: 980px) { #rowProgramacionHeading .divHeading { margin: 50px 0px 50px 0px; } }
@media (max-width: 780px) { #rowProgramacionHeading .divHeading { margin: 30px 0px 30px 0px; } }

/******************************* #rowProgramacionFiltrosCalendario *******************************/

#rowProgramacionFiltrosCalendario { padding: 0px !important; margin: 0px 0px 60px 0px; } /*Tiene que ser así*/

#rowProgramacionFiltrosCalendario div[id^="pgc"][id$="0"] { position: relative; width: calc(100% - 400px) !important; }
#rowProgramacionFiltrosCalendario div[id^="pgc"][id$="1"] { position: relative; width: 400px !important; }

@media (max-width: 880px) {
	#rowProgramacionFiltrosCalendario div[id^="pgc"][id$="0"] { width: calc(100% - 300px) !important; }
	#rowProgramacionFiltrosCalendario div[id^="pgc"][id$="1"] { width: 300px !important; }
}

@media (max-width: 780px) {
	#rowProgramacionFiltrosCalendario                         { margin: 0px 0px 30px 0px; }
	#rowProgramacionFiltrosCalendario div[id^="pgc"][id$="0"] { width: calc(100% - 260px) !important; }
	#rowProgramacionFiltrosCalendario div[id^="pgc"][id$="1"] { width: 260px !important; }
}

@media (max-width: 680px) {
	#rowProgramacionFiltrosCalendario div[id^="pgc"][id$="0"] { width: calc(100% - 200px) !important; }
	#rowProgramacionFiltrosCalendario div[id^="pgc"][id$="1"] { width: 200px !important; }
}

@media (max-width: 580px) {
	#rowProgramacionFiltrosCalendario                         { flex-direction: column-reverse; }
	#rowProgramacionFiltrosCalendario div[id^="pgc"][id$="0"] { width: 100% !important; }
	#rowProgramacionFiltrosCalendario div[id^="pgc"][id$="1"] { width: 100% !important; }
}

/***** FILTROS *****/

#divProgramacionFiltros      { padding: 0px !important; color: #000000; }
#divProgramacionFiltros *    { font-family: var(--font-family-normal-roboto); }
#divProgramacionFiltros i.fa { font-family: "FontAwesome" !important; }

@media (max-width: 580px) { #divProgramacionFiltros { display: flex; flex-wrap: wrap; justify-content: space-between; } }

/* FECHAS */

#divFechas                { position: relative; margin-bottom: 40px; padding: 0px !important; display: inline-block; }
#divFechas #divDesde      { float: left; margin: 0px 20px 20px 0px; width: 140px; font-weight: 600; border-bottom: solid 1px #000000; }
#divFechas #divHasta      { float: left; margin: 0px 20px 20px 0px; width: 140px; font-weight: 600; border-bottom: solid 1px #000000; }
#divFechas .divCalendar   { float: left; margin-right: 10px; }
#divFechas .divValue      { float: left; color: #666666; font-weight: normal; }
#divFechas #divBotonFecha { float: left; width: 140px; height: 40px; font-weight: 600; border: solid 1px #DDDDDD; line-height: 38px; }
#divFechas #divBotonFecha { background-color: #FFFFFF; box-shadow: 1px 1px 1px #CCCCCC; text-align: center; cursor: pointer; }

#divFechas #divMensajeDesde           { position: absolute; top: 55px; min-width: 100px; min-height: 24px; display: none; }
#divFechas #divMensajeDesde           { background-color: #FFDD55; border: solid 1px var(--colorBeige-hex); border-radius: 10px; box-shadow: 0px 0px 5px #CCCCCC; }
#divFechas #divMensajeDesde i         { position: absolute; top: -18px; left: 15px; color: #FFDD55; font-size: 20px; }
#divFechas #divMensajeDesde i         { transform: rotate(-90deg); text-shadow: 2px 0px 5px #CCCCCC; }
#divFechas #divMensajeDesde .divTexto { padding: 10px; color: #81807F; font-weight: normal; }

#divFechas #divMensajeHasta           { position: absolute; top: 55px; min-width: 100px; min-height: 24px; display: none; }
#divFechas #divMensajeHasta           { background-color: #FFDD55; border: solid 1px var(--colorBeige-hex); border-radius: 10px; box-shadow: 0px 0px 5px #CCCCCC; }
#divFechas #divMensajeHasta i         { position: absolute; top: -18px; left: 15px; color: #FFDD55; font-size: 20px; }
#divFechas #divMensajeHasta i         { transform: rotate(-90deg); text-shadow: 2px 0px 5px #CCCCCC; }
#divFechas #divMensajeHasta .divTexto { padding: 10px; color: #81807F; font-weight: normal; }

#divFechas input.datepicker { width: 80px; background: none; border: none; }

#ui-datepicker-div                            { transform: translate(-23px,5px);}
#ui-datepicker-div *                          { font-family: var(--font-family-normal-roboto); }
#ui-datepicker-div .ui-widget-header          { border: none !important; background: var(--color1-hex) !important; color: #FFFFFF !important; }
#ui-datepicker-div .ui-icon                   { background: none !important; }
#ui-datepicker-div .ui-datepicker-prev:before { content: "\f0d9"; font-family: "FontAwesome"; color: white; line-height: 24px; margin-left: 10px; }
#ui-datepicker-div .ui-datepicker-next:before { content: "\f0da"; font-family: "FontAwesome"; color: white; line-height: 24px; margin-left: 10px; }

@media (max-width: 980px) {
	#divFechas                { margin-bottom: 25px; }
	#divFechas #divDesde      { width: 110px; }
	#divFechas #divHasta      { width: 110px; }
	#divFechas #divBotonFecha { width: 110px; }
}

@media (max-width: 880px) { #divFechas { margin-bottom: 15px; } }

@media (max-width: 780px) {
	#divFechas                  { margin-bottom: 0px; }
	#divFechas #divDesde        { margin: 0px 15px 20px 0px; width: 95px; }
	#divFechas #divHasta        { margin: 0px 15px 20px 0px; width: 95px; }
	#divFechas #divBotonFecha   { width: 95px; }
	#divFechas .divCalendar     { margin-right: 3px; }
	#divFechas input.datepicker { width: 75px; }
}

@media (max-width: 680px) {
	#divFechas #divDesde        { margin: 0px 10px 39px 0px; width: 90px; }
	#divFechas #divHasta        { margin: 0px 10px 39px 0px; width: 90px; }
	#divFechas #divBotonFecha   { width: 70px; }
	#divFechas input.datepicker { width: 70px; font-size: 12px; }
}

@media (max-width: 580px) {
	#divFechas                   { margin: 0px 0px 30px 0px; width: 220px; display: flex; flex-wrap: wrap; }
	#divFechas #divDesde         { margin: 0px; width: 110px; }
	#divFechas #divHasta         { margin: 0px; width: 110px; }
	#divFechas #divBotonFecha    { margin-top: 10px; width: 90px; height: 30px; line-height: 30px;	}
}

@media (max-width: 480px) {
	#divFechas                   { margin-bottom: 10px; width: 100%; justify-content: space-between; }
	#divFechas #divDesde         { width: 45%; }
	#divFechas #divHasta         { width: 45%; }
	#divFechas label             { font-size: 12px; }
	#divFechas .divValue         { width: calc(100% - 25px); }
	#divFechas input.datepicker  { width: 100%; }
	#divFechas #divBotonFecha    { margin: 10px auto 0px auto; width: 90px; height: 24px; font-size: 12px; line-height: 24px;	}
}

/* BUSCAR */

#divBuscar                 { position: relative; margin-bottom: 40px; display: inline-block; }
#divBuscar #divQue         { float: left; margin: 0px 20px 20px 0px; width: 300px; border-bottom: solid 1px #000000; }
#divBuscar .divLabel       { font-weight: 600; }
#divBuscar .divSearch      { float: left; margin-right: 10px; }
#divBuscar .divValue       { float: left; color: #666666; font-weight: normal; }
#divBuscar #divBotonBuscar { float: left; width: 140px; height: 40px; font-weight: 600; border: solid 1px #DDDDDD; line-height: 38px; }
#divBuscar #divBotonBuscar { background-color: #FFFFFF; box-shadow: 1px 1px 1px #CCCCCC; text-align: center; cursor: pointer; }
#divBuscar input           { width: 260px; background: none; border: none; }
#divBuscar .divReset       { position: absolute; left: 290px; color: #000000; cursor: pointer; }

#divBuscar #divMensajeBuscar           { position: absolute; top: 55px; min-width: 100px; min-height: 24px; display: none; }
#divBuscar #divMensajeBuscar           { background-color: #FFDD55; border: solid 1px var(--colorBeige-hex); border-radius: 10px; box-shadow: 0px 0px 5px #CCCCCC; }
#divBuscar #divMensajeBuscar i         { position: absolute; top: -18px; left: 15px; color: #FFDD55; font-size: 20px; }
#divBuscar #divMensajeBuscar i         { transform: rotate(-90deg); text-shadow: 2px 0px 5px #CCCCCC; }
#divBuscar #divMensajeBuscar .divTexto { padding: 10px; color: #81807F; font-weight: normal; }

@media (max-width: 980px) { #divBuscar         { margin-bottom: 30px; } #divBuscar .divReset { left: 230px; } }
@media (max-width: 980px) { #divBuscar #divQue { width: 240px; } #divBuscar input { width: 200px; } #divBuscar #divBotonBuscar { width: 110px; } }
@media (max-width: 880px) { #divBuscar         { margin-bottom: 20px; } }

@media (max-width: 780px) {
	#divBuscar                 { margin-bottom: 10px; }
	#divBuscar #divQue         { margin: 0px 15px 20px 0px; width: 205px; }
	#divBuscar input           { width: 160px; }
	#divBuscar #divBotonBuscar { width:  95px; }
	#divBuscar .divReset       { left: 190px; }
}

@media (max-width: 680px) {
	#divBuscar #divQue         { margin: 0px 10px 39px 0px; width: 190px; }
	#divBuscar input           { width: 150px; }
	#divBuscar #divBotonBuscar { width:  70px; }
	#divBuscar .divReset       { left: 180px; }
}

@media (max-width: 580px) {
	#divBuscar                 { margin: 0px 0px 30px 0px; width: 155px; display: flex; flex-wrap: wrap; }
	#divBuscar #divQue         { margin: 0px; width: 160px; }
	#divBuscar input           { width: 120px; }
	#divBuscar #divBotonBuscar { margin-top: 10px; width:  90px; height: 30px; line-height: 30px; }
	#divBuscar .divReset       { left: 145px; }
}

@media (max-width: 480px) {
	#divBuscar                        { margin-bottom: 20px; width: 100%; justify-content: space-between; }
	#divBuscar #divQue                { margin: 0px; width: calc(100% - 40px); }
	#divBuscar .divValue              { width: calc(100% - 40px); }
	#divBuscar input                  { width: 100%; }
	#divBuscar #divBotonBuscar        { margin-top: 10px; width: 32px; height: 29px; font-size: 0px; line-height: 24px; }
	#divBuscar #divBotonBuscar:before { content: "\f002"; font-family: "FontAwesome"; font-size: 16px; }
	#divBuscar .divReset              { left: auto; right: 40px; }
}

/* COMBO CATEGORIAS */

#divComboCategorias                      { clear: both; margin-bottom: 60px; display: inline-block; }
#divComboCategorias #divSeleccion        { padding: 0px 15px; width: 460px; height: 56px; font-weight: 600; color: #FFFFFF; }
#divComboCategorias #divSeleccion        { background-color: var(--color1-hex); line-height: 56px; cursor: pointer; }
#divComboCategorias #divSeleccion i      { float: right; font-size: 28px; line-height: 55px; }

#divComboCategorias #divLista            { position: absolute; width: 460px; background-color: #FFFFFF; display: none; z-index: 101; }
#divComboCategorias .divCategoria        { padding: 0px 15px; width: 460px; height: 40px; font-weight: 600; color: #000000; }
#divComboCategorias .divCategoria        { display: flex; align-items: center; cursor: pointer; text-transform: uppercase; }
#divComboCategorias .divCategoria        { border-left: solid 10px var(--color1-hex); border-bottom: solid 1px #CCCCCC; border-right: solid 1px #CCCCCC; }
#divComboCategorias .divCategoria:hover  { background-color: var(--colorBeige-hex); }
#divComboCategorias .divCategoria img    { margin-right: 10px; }
#divComboCategorias #divLista #cat_todas { background-color: var(--color4-hex); }

@media (max-width: 980px) { #divComboCategorias { margin-bottom: 50px; } }
@media (max-width: 980px) { #divComboCategorias #divSeleccion, #divComboCategorias #divLista, #divComboCategorias .divCategoria { width: 370px; } }

@media (max-width: 880px) {
	#divComboCategorias                 { margin-bottom: 40px; }
	#divComboCategorias #divSeleccion   { height: 44px; line-height: 44px; }
	#divComboCategorias #divSeleccion i { line-height: 44px; }
}

@media (max-width: 780px) { #divComboCategorias #divSeleccion, #divComboCategorias #divLista, #divComboCategorias .divCategoria { width: 315px; } }
@media (max-width: 680px) { #divComboCategorias #divSeleccion, #divComboCategorias #divLista, #divComboCategorias .divCategoria { width: 270px; } }

@media (max-width: 580px) {
	#divComboCategorias                                                                                 { margin-bottom: 20px; width: 100%; }
	#divComboCategorias #divSeleccion, #divComboCategorias #divLista, #divComboCategorias .divCategoria { width: 100%; }
}

@media (max-width: 480px) {
	#divComboCategorias #divSeleccion   { height: 34px; line-height: 34px; }
	#divComboCategorias #divSeleccion i { line-height: 34px; }
	#divComboCategorias .divCategoria   { font-size: 12px; height: 32px; }
}

/* BOTONES CATEGORIAS */

#divBotonesCategorias                    { position: absolute; top: 358px; width: 460px; display: flex; flex-wrap: wrap; justify-content: space-around; }
#divBotonesCategorias .divBotonCategoria { margin: 5px 0px; cursor: pointer; }

@media (max-width: 980px) { #divBotonesCategorias { top: 320px; width: 370px; } }

@media (max-width: 880px) {
	#divBotonesCategorias                    { top: 246px; }
	#divBotonesCategorias .divBotonCategoria { margin: 3px 0px; padding: 6px 0px 4px 0px; font-size: 11px !important; border-radius: 10px; }
}

@media (max-width: 780px) {
	#divBotonesCategorias                    { top: 210px; width: 315px; }
	#divBotonesCategorias .divBotonCategoria { margin: 3px 0px; padding: 3px 0px 2px 0px; width: 75px !important; font-size: 10px !important; border-radius: 5px; }
}

@media (max-width: 680px) {
	#divBotonesCategorias                    { top: 240px; width: calc(100% + 200px); justify-content: space-between; }
	#divBotonesCategorias .divBotonCategoria { margin: 5px 0px; padding: 5px 0px 3px 0px; width: 110px !important; font-size: 11px !important; border-radius: 8px; }
}

@media (max-width: 580px) {
	#divBotonesCategorias                    { position: relative; top: auto; width: 100%; }
	#divBotonesCategorias div[id^="cat_"]    { width: 24%; }
	#divBotonesCategorias .divBotonCategoria { width: 100% !important; }
}

@media (max-width: 480px) {
	#divBotonesCategorias                    { flex-wrap: wrap; justify-content: space-around; }
	#divBotonesCategorias div[id^="cat_"]    { width: 30%; }
	#divBotonesCategorias .divBotonCategoria { margin: 3px 0px; padding: 3px 0px 2px 0px; font-size: 10px !important; border-radius: 5px; }
}

/***** CALENDARIO *****/

#divProgramacionJalendar                           { margin: 0px; width: 100%; }
#divProgramacionJalendar *                         { font-family: var(--font-family-normal-roboto); }
#divProgramacionJalendar .jalendar-pages           { padding: 0px; background: none !important; }

#divProgramacionJalendar .header                   { border: solid 2px #EEEEEE; background: var(--color1-hex) !important; }
#divProgramacionJalendar .total-bar                { display: none; }
#divProgramacionJalendar h1                        { margin: 0px; font-size: 24px; line-height: 46px; }
#divProgramacionJalendar i                         { font-family: "FontAwesome"; font-size: 24px; line-height: 40px; }

#divProgramacionJalendar .day-names                { background-color: #EEEEEE; line-height: 0px; }
#divProgramacionJalendar .day-names h2             { width: calc((100% - 24px) / 7); font-size: 14px; background-color: var(--colorBeige-hex); box-sizing: initial; }
#divProgramacionJalendar .day-names h2             { border-style: solid; border-color: #EEEEEE; border-width: 4px 2px 0px 2px;  }
#divProgramacionJalendar .day-names h2:first-child { border-left: none; }
#divProgramacionJalendar .day-names h2:last-child  { border-right: none; }

#divProgramacionJalendar .days                     { margin: 0px; }
#divProgramacionJalendar .day                      { margin: 2px; width: calc((100% - 28px) / 7); height: 56px; border: solid 1px var(--colorBeige-hex); }
#divProgramacionJalendar .day                      { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; background-color: #EEEEEE; }
#divProgramacionJalendar .day span                 { margin: 0px; padding: 0px; width: 100%; height: 100%; }
#divProgramacionJalendar .day span                 { font-size: 28px; line-height: 56px; background: none; display: none; }

#divProgramacionJalendar .this-month               { background-color: #FFFFFF; }
#divProgramacionJalendar .this-month span          { color: #81807F !important; display: inline-block; }

#divProgramacionJalendar .today                    { background-color: var(--colorBeige-hex); }
#divProgramacionJalendar .today span               { color: var(--color1-hex) !important; }

#divProgramacionJalendar .have-event span:before   { display: none; }
#divProgramacionJalendar .have-event               { background-color: var(--color1-hex); }
#divProgramacionJalendar .have-event span          { color: #FFFFFF !important; }
#divProgramacionJalendar .add-event                { display: none; }

#divProgramacionJalendar .this-month span:hover    { cursor: default; color: #81807F !important; text-decoration: none; }
#divProgramacionJalendar .have-event span:hover    { cursor: pointer; color: #81807F !important; text-decoration: none; }

@media (max-width: 880px) { #divProgramacionJalendar .day { height: 40px; } #divProgramacionJalendar .day span { font-size: 20px; line-height: 40px; } }

@media (max-width: 780px) {
	#divProgramacionJalendar .day      { height: 30px; }
	#divProgramacionJalendar .day span { font-size: 16px; line-height: 30px; }
	#divProgramacionJalendar h1        { font-size: 18px; line-height: 30px; }
	#divProgramacionJalendar i         { font-size: 18px; line-height: 23px; }
}

@media (max-width: 680px) {
	#divProgramacionJalendar .day      { height: 24px; }
	#divProgramacionJalendar .day span { font-size: 14px; line-height: 24px; }
}

@media (max-width: 580px) {
	#divProgramacionJalendar           { margin-bottom: 20px; }
	#divProgramacionJalendar .day      { height: 24px; }
	#divProgramacionJalendar .day span { font-size: 11px; line-height: 24px; }
}

@media (max-width: 580px) {
	#divProgramacionJalendar           { margin-bottom: 10px; }
	#divProgramacionJalendar .day      { height: 20px; }
	#divProgramacionJalendar .day span { line-height: 20px; }
}

/***** BOX EVENTOS *****/

#divBoxProgramacionJalendarWindow    { position: absolute;	top: 0px; left: -10px; padding: 15px; width: 470px; /*height: 130px !important;*/	background-color: #FFFFFF; }
#divBoxProgramacionJalendarWindow    { font-size: 16px; color: #000000; text-align: left; line-height: normal; opacity: 0; display: none; z-index: 102; }
#divBoxProgramacionJalendarWindow    { -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease;	box-shadow: 0px 0px 5px var(--color1-hex); }
#divBoxProgramacionJalendarContenido { position: relative; width: 100%; height: 100%; }
#divBoxProgramacionJalendarPico      { position: absolute; top: 0px; left: -10px; width: 54px; height: 24px; }
#divBoxProgramacionJalendarPico      { background-image: url("/wp-content/uploads/pico_calendario.png"); opacity: 0; display: none; z-index: 103; }
#divBoxProgramacionJalendarPico      { -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; }
#divBoxProgramacionJalendarCerrar    { position: absolute; top: 0px; left: -42px; width: 32px; height: 32px; border-radius: 8px 0px 0px 8px; background-color: #FFFFFF; }
#divBoxProgramacionJalendarCerrar    { opacity: 0; display: none; z-index: 104; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; }
#divBoxProgramacionJalendarCerrar    { box-shadow: -3px 0px 5px var(--color1-hex); cursor: pointer; }
#divBoxProgramacionJalendarCerrar i  { font-size: 24px !important; line-height: 32px !important; }

#divBoxProgramacionJalendarContenido div[id$="scrollbar_horizontal"] { display: none !important; }
#divBoxProgramacionJalendarContenido div[id$="scrollbar_vertical"]   { display: none !important; }
#divBoxProgramacionJalendarContenido .mCSB_container_wrapper         { margin-bottom: 0px !important; }
#divBoxProgramacionJalendarContenido .mCSB_scrollTools               { background-color: rgba(0,0,0,0) !important; }
#divBoxProgramacionJalendarContenido .mCSB_container                 { padding-bottom: 0px !important; }
#divBoxProgramacionJalendarContenido .mCSB_draggerContainer          { background-color: rgba(0,0,0,0) !important; }
#divBoxProgramacionJalendarContenido .mCSB_dragger                   { background-color: rgba(0,0,0,0) !important; }

#divBoxEvento                              { margin-bottom: 20px; width: 440px; height: 100px; border-bottom: solid 1px #D5D5D5; /*overflow-y: hidden;*/ }
#divBoxEvento .divFoto                     { width:  100px; height:  100px; display: inline-block; vertical-align: top; }
#divBoxEvento .divDatos                    { margin-left: 10px; width: 325px; display: inline-block; vertical-align: top; }
#divBoxEvento .divDatos .divBotonCategoria { padding: 6px 0px 3px 0px; }
#divBoxEvento .divDatos .divTitulo         { font-size: 24px; font-weight: 600; color: var(--color1-hex); line-height: 32px; }
#divBoxEvento .divDatos .divFecha          { font-size: 14px !important; color: #444444; line-height: 18px !important; }
#divBoxEvento .divDatos .divFecha i        { font-size: 14px !important; color: #444444; line-height: 18px !important; }
#divBoxEvento .divDatos .divHora           { font-size: 14px !important; color: #444444; line-height: 20px !important; }
#divBoxEvento .divDatos .divHora i         { font-size: 14px !important; color: #444444; line-height: 20px !important; }

@media (max-width: 1180px) { #divBoxProgramacionJalendarWindow  { left: -40px; } #divBoxProgramacionJalendarCerrar { left: -72px; } }

@media (max-width: 880px) {
	#divBoxProgramacionJalendarWindow                        { left: -15px; width: 320px; }
	#divBoxProgramacionJalendarCerrar                        { left: 305px; transform: rotate(180deg); }
	#divBoxProgramacionJalendarContenido .mCSB_container     { left: 0px !important; width: 100% !important; }
	#divBoxEvento                                            { position: relative; width: 100%; }
	#divBoxEvento .divFoto                                   { position: absolute; top: 30px; left: 0px; width: 70px; height: 70px; }
	#divBoxEvento .divDatos                                  { margin-left: 0px; width: auto; display: block; }
	#divBoxEvento .divDatos .divTitulo                       { position: absolute; top: -5px; left:  0px; width:   95%; font-size: 20px; }
	#divBoxEvento .divDatos .divFecha                        { position: absolute; top: 40px; left: 80px; font-size: 13px !important; width: 205px; }
	#divBoxEvento .divDatos .divHora                         { position: absolute; top: 60px; left: 80px; font-size: 13px !important; }
	#divBoxEvento .divDatos .divCategoria                    { position: absolute; top: 80px; right: 0px; }
	#divBoxEvento .divDatos .divCategoria .divBotonCategoria { padding: 4px 0px 2px 0px; width: 80px !important; border-radius: 0px; }
}

@media (max-width: 780px) {
	#divBoxProgramacionJalendarWindow { left: -55px; }
	#divBoxProgramacionJalendarCerrar { left: 265px; }
}

@media (max-width: 680px) {
	#divBoxProgramacionJalendarWindow  { left: -15px; width: 245px; }
	#divBoxProgramacionJalendarPico    { width: 40px; height: 19px; background-size: cover; transform: translate(10px,7px); }
	#divBoxProgramacionJalendarCerrar  { left: -47px; transform: none; }
	#divBoxEvento .divFoto             { width: 60px; height: 60px; }
	#divBoxEvento .divDatos .divTitulo { font-size: 18px; }
	#divBoxEvento .divDatos .divFecha  { top: 30px; left: 65px; font-size: 12px !important; width: 150px; }
	#divBoxEvento .divDatos .divHora   { top: 50px; left: 65px; font-size: 12px !important; }
}

@media (max-width: 580px) {
	#divBoxProgramacionJalendarWindow  { left: 0px; width: 100%; }
	#divBoxProgramacionJalendarPico    { transform: translate(10px,7px); }
	#divBoxProgramacionJalendarCerrar  { left: auto; right: 0px; box-shadow: none; }
	#divBoxEvento .divFoto             { width: 70px; height: 70px; }
	#divBoxEvento .divDatos .divFecha  { left: 75px; width: calc(100% - 75px); }
	#divBoxEvento .divDatos .divHora   { left: 75px; }
}

/***** LEYENDA *****/

#rowProgramacionLeyenda      { margin: 0px 0px 60px 0px; padding: 0px !important; font-weight: 600; }
#rowProgramacionLeyenda *    { font-family: var(--font-family-narrow); }
#rowProgramacionLeyenda i.fa { font-family: "FontAwesome" !important; }

#divProgramacionLeyenda                                { display: flex; justify-content: space-between; }
#divProgramacionLeyenda .divCuadros                    { font-size: 14px; }
#divProgramacionLeyenda .divHoy                        { display: flex; align-items: center; }
#divProgramacionLeyenda .divHoy div:first-of-type      { margin-right: 5px; width: 28px; height: 28px; background: var(--colorBeige-hex); }
#divProgramacionLeyenda .divHoy div:last-of-type       { line-height: 100%;; }
#divProgramacionLeyenda .divProximos                   { margin-top: 5px; display: flex; align-items: center; }
#divProgramacionLeyenda .divProximos div:first-of-type { margin-right: 5px; width: 28px; height: 28px; background: var(--color1-hex); }
#divProgramacionLeyenda .divProximos div:last-of-type  { line-height: 100%;; }

#divProgramacionLeyenda .divFiltros { display: flex; }
#divProgramacionLeyenda .divPeriodo,
#divProgramacionLeyenda .divBuscar,
#divProgramacionLeyenda .divCategoria,
#divProgramacionLeyenda .aButton { margin-left: 15px; padding: 10px; font-size: 16px; font-weight: normal; border: solid 1px #CCCCCC; border-radius: 8px; }

#divProgramacionLeyenda .divPeriodo    { margin-left: 0px; }

#divProgramacionLeyenda .aButton       { padding: 0px 20px; background: var(--color1-hex); border: none; display: flex; align-items: center;  }
#divProgramacionLeyenda .aButton:hover { background: var(--color3-hex); color: #FFFFFF !important;  }

@media (max-width: 880px) {
	#divProgramacionLeyenda .divPeriodo,
	#divProgramacionLeyenda .divBuscar,
	#divProgramacionLeyenda .divCategoria,
	#divProgramacionLeyenda .aButton { font-size: 14px; }
}

@media (max-width: 780px) {
	#rowProgramacionLeyenda                                { margin: 0px; }
	#divProgramacionLeyenda .divHoy,
	#divProgramacionLeyenda .divProximos                   { font-size: 12px; }
	#divProgramacionLeyenda .divHoy      div:first-of-type { width: 20px; height: 20px; }
	#divProgramacionLeyenda .divProximos div:first-of-type { width: 20px; height: 20px; }
	#divProgramacionLeyenda .divPeriodo,
	#divProgramacionLeyenda .divBuscar,
	#divProgramacionLeyenda .divCategoria                  { padding: 8px; font-size: 12px; }
}

@media (max-width: 680px) {
	#rowProgramacionLeyenda                      { margin: 70px 0px 0px 0px; }
	#divProgramacionLeyenda                      { flex-wrap: wrap; justify-content: center; }
	#divProgramacionLeyenda .divCuadros          { margin-bottom: 15px; display: flex; align-items: center; }
	#divProgramacionLeyenda .divHoy br800:before { content: " "; }
	#divProgramacionLeyenda .divProximos         { margin-top: 0px; margin-left: 15px; }
}

@media (max-width: 580px) {
	#rowProgramacionLeyenda               { margin: 20px 0px; }
	#divProgramacionLeyenda .divPeriodo   { margin: 0px 5px; }
	#divProgramacionLeyenda .divBuscar    { margin: 0px 5px; }
	#divProgramacionLeyenda .divCategoria { margin: 0px 5px; }
	#divProgramacionLeyenda .aButton      { margin: 0px 5px; }
}

@media (max-width: 480px) {
	#rowProgramacionLeyenda             { margin: 10px 0px; padding: 0px !important; }
	#divProgramacionLeyenda .divFiltros { flex-wrap: wrap; justify-content: center; }
	#divProgramacionLeyenda .aButton    { margin-top: 10px; padding: 5px 15px; }
	#divProgramacionLeyenda .aButton br { content: " "; margin: 0px 2px; }
}

@media (max-width: 400px) {
	#divProgramacionLeyenda .divHoy br800:before { content: "\A"; }
}

@media (max-width: 380px) {
	#divProgramacionLeyenda .divPeriodo   { margin: 0px; width: 100%; }
	#divProgramacionLeyenda .divBuscar    { margin: 5px 5px 0px 0px; width: calc(50% - 5px); }
	#divProgramacionLeyenda .divCategoria { margin: 5px 0px 0px 5px; width: calc(50% - 5px); }
}

/***** EVENTOS *****/

#rowProgramacionEventos { margin: 0px; padding: 0px !important; } /*Tiene que ser así*/

#divProgramacionEventos            { width: 100%; font-weight: bold; color: #81807F; display: flex; flex-wrap: wrap; justify-content: center; }
#divProgramacionEventos a, a:hover { color: #81807F; }

#divProgramacionEventos .divEvento       { position: relative; margin: 13px; width: 315px; height: 360px; }
#divProgramacionEventos .divEvento       { border: solid 1px #CCCCCC; background-color: #FFFFFF; box-shadow: 0px 0px 5px #CCCCCC; cursor: pointer; }
#divProgramacionEventos .divEvento       { -webkit-transition: all 0.2s ease; transition: all 0.3s ease; transform: scale(0); }
#divProgramacionEventos .divEvento:hover { transform: translateY(-30px) !important; opacity: 0.5; }

.divEvento .divFondoFecha                { position: absolute; width: 40px; height: 140px; opacity: 0.85; }
.divEvento .divFechaInicio               { position: absolute; width: 40px; font-weight: bold; color: #FFFFFF; text-align: center; }
.divEvento .divFechaInicio span          { display: block; }
.divEvento .divFechaInicio .spanDia      { font-size: 28px; line-height: 40px; }
.divEvento .divFechaInicio .spanMes      { font-size: 18px; line-height: 12px; }
.divEvento .divFechaInicio .spanAño      { font-size: 16px; line-height: 26px; }
.divEvento .divFoto                      { height: 140px; overflow: hidden; }
.divEvento .divTitulo                    { padding: 0px 15px; width: 100%; font-size: 22px; font-weight: normal; color: #FFFFFF; line-height: 40px; }
.divEvento .divCategoria                 { margin: 15px 0px 11px 0px; }
.divEvento .divDescripcion               { padding: 0px 15px; font-weight: normal; text-align: left; line-height: 120%; }
.divEvento .divDescripcion               { height: calc(13px * 1.2 * 4); -webkit-line-clamp: 4; } /* height: font-size * line-height * num-lineas */
.divEvento .divDescripcion               { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

.divEvento .divFechaLarga                { position: absolute; left:  15px; bottom: 27px; }
.divEvento .divHora                      { position: absolute; left:  15px; bottom: 10px; }
.divEvento i                             { margin-right: 10px; width: 12px; color: var(--color1-hex); text-align: center; }

.divEvento .divPrecios                   { position: absolute; right: 10px; bottom: 10px; padding: 5px 10px; max-width: 160px; display: flex; text-align: left; }
.divEvento .divPrecios                   { color: #FFFFFF; background: var(--colorMagenta-hex); overflow: hidden; }
.divEvento .divPrecios i                 { margin-right: 5px; width: auto; color: #FFFFFF; font-size: 16px; }
.divEvento .divPrecios span              { font-family: var(--font-family-normal-roboto); font-weight: normal; }
.divEvento .divPrecios span sup          { bottom: 0.3ex; }
.divEvento .divPrecios.SoloPrecio        { align-items: center; }
.divEvento .divPrecios.SoloPrecio i      { margin-right: 2px; }
.divEvento .divPrecios.SoloPrecio span   { font-size: 18px; font-weight: 500; }
.divEvento .divPrecios.TextoLargo span   { font-family: var(--font-family-narrow); line-height: 100%; max-height: calc(13px * 1 * 3); -webkit-line-clamp: 3; }
.divEvento .divPrecios.TextoLargo span   { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

.resaltarTexto { padding: 0px 2px; color: #81807F; font-weight: bold; background-color: #FFFF88; border-radius: 2px; }

@media (max-width: 1080px) { #divProgramacionEventos .divEvento { margin: 10px; width: 285px; } .divEvento .divPrecios { max-width: calc(100% - 200px); } }
@media (max-width:  980px) { #divProgramacionEventos .divEvento { width: calc(50% - 20px); } }
@media (max-width:  680px) { .divEvento .divPrecios { max-width: 80px; } .divEvento .divPrecios.TextoLargo  { display: none; } }

@media (max-width:  580px) {
	#rowProgramacionEventos                         { padding: 0px 20px !important; }
	#divProgramacionEventos .divEvento              { margin: 15px 0px; width: 100%; height: 300px; }
	.divEvento .divCategoria                        { position: absolute; margin: 0px; top: 195px; left: 15px; }
	.divEvento .divCategoria .divBotonCategoria     { padding: 0px; width: 80px !important; height: 45px; border-radius: 10px; flex-direction: column; }
	.divEvento .divCategoria .divBotonCategoria img { margin: 2px 0px; width: 14px; }
	.divEvento .divDescripcion                      { position: absolute; top: 195px; left: 95px; height: calc(13px * 1.2 * 3); -webkit-line-clamp: 3; }
	.divEvento .divPrecios                          { max-width: 50%; }
	.divEvento .divPrecios.TextoLargo               { display: flex; }
	.divEvento .divPrecios.TextoLargo span          { max-height: calc(13px * 1.4 * 2); -webkit-line-clamp: 2; }
}

@media (max-width:  480px) {
	#rowProgramacionEventos                         { padding: 0px !important; }
	#divProgramacionEventos .divEvento              { height: 375px; }
	.divEvento .divCategoria                        { left: 50%; transform: translateX(-50%); }
	.divEvento .divCategoria .divBotonCategoria     { padding-top: 3px; width: 120px !important; height: 30px; flex-direction: row; }
	.divEvento .divCategoria .divBotonCategoria img { margin: 0px 5px; }
	.divEvento .divDescripcion                      { top: 235px; left: 0px; }
	.divEvento .divFechaLarga                       { top: 290px; bottom: auto; }
	.divEvento .divHora                             { top: 307px; bottom: auto; }
	.divEvento .divPrecios                          { top: auto; right: auto; bottom: 0px; left: 0px; padding: 0px; width: 100%; max-width: 100%; }
	.divEvento .divPrecios                          { height: 35px !important; align-items: center !important; justify-content: center; }
}