/* ESTILOS PRINCIPALES SICAB TV */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap');
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");
@import url(plantilla/classy-nav.css);
@import url(plantilla/owl.carousel.css);

/*@import url(themify-icons.css);*/
/*@import url(style_plantilla.css);		PENDIENTE - CREAR - ESTILOS QUE NO USAMOS EN NUESTRO DISEÑO
SI SE USAN ESTILOS DE PLANTILLA, SE PASAN AL STYLE PRINCIPAL */

* {
	margin: 0;
	padding: 0;
}

@font-face {
	font-family: classyfonts;
	src: url(../fonts/classy.eot?fftrrv);
	src: url(../fonts/classy.eot?fftrrv#iefix) format("embedded-opentype"),url(../fonts/classy.ttf?fftrrv) format("truetype"),url(../fonts/classy.woff?fftrrv) format("woff"),url(../fonts/classy.svg?fftrrv#classyfonts) format("svg");
	font-weight: 400;
	font-style: normal
}

body {
	font-family: "Nunito", sans-serif;
	font-size: 14px;
	background-color: #181e27 !important;
	color: #FFF;
}

h1, h2{
	margin-bottom: 0px !important;
	padding-bottom: 2px;
	display: inline-block;
}

h1, h2, h3, h4, h5, h6 {
	color: #FFF;
}

h2, h3, h4, h5 {
	line-height: 1.3;
	font-weight: 500;
}

h1 {
	line-height: 1;
	font-weight: bold;
	font-size: 38px;
	padding-top: 8px;
}

h2 {
	font-size: 16px !important;
	font-style: italic;
	padding-top: 2px;
}

h3 {
	font-size: 45px;
}

h4 {
	font-size: 35px;
	font-weight: 700;
	margin-bottom: 10px;
}

h5 {
	font-size: 25px;
}

h6 {
	line-height: 1.5;
	font-weight: 600;
	font-size: 16px;
}


/*cambios a bootstrap*/
.btn-danger {
	background: linear-gradient(135deg, #2e1b1b 0%, #cd242c 100%);
	border-color: linear-gradient(135deg, #2e1b1b 0%, #cd242c 100%);
}
.btn-danger:hover {
	background-color: #6b1216;
	border-color: #6b1216;
}

.btn-warning {
	background-color: #f5cc00ff;
	border-color: #f5cc00ff;
}
.btn-warning:hover {
	background-color: #c19e00;
	border-color: #c19e00;
}


p {
	font-family: "Nunito", sans-serif;
	font-size: 14px;
	color: #909090;
	line-height: 1.5;
	font-weight: 400;
}

a {
	color: linear-gradient(135deg, #2e1b1b 0%, #cd242c 100%);
	font-weight: 500;
	-webkit-transition-duration: 500ms;
	-o-transition-duration: 500ms;
	transition-duration: 500ms;
	text-decoration: none;
}

.post-author {
	color: #9e9e9e;
}

a:hover, a:focus {
	text-decoration: none;
	outline: 0 solid transparent;
	color: #ffde31;
	/*border-bottom: dashed 1px #f5cc00ff;*/
}



/* FONDOS IMAGENES */

.bg-background {
	background-color: #222627;
}

/* MARGENES DEFINIDOS */

.mt-15 {
	margin-top: 15px !important;
}
.mt-30 {
	margin-top: 30px !important;
}
.mt-50 {
	margin-top: 50px !important;
}
.mt-70 {
	margin-top: 70px !important;
}
.mt-80 {
	margin-top: 80px !important;
}
.mt-100 {
	margin-top: 100px !important;
}
.mt-150 {
	margin-top: 150px !important;
}

.mb-15 {
	margin-bottom: 15px !important;
}
.mb-30 {
	margin-bottom: 30px !important;
}
.mb-50 {
	margin-bottom: 50px !important;
}
.mb-70 {
	margin-bottom: 70px !important;
}
.mb-80 {
	margin-bottom: 80px !important;
}
.mb-100 {
	margin-bottom: 100px !important;
}
.mb-150 {
	margin-bottom: 150px !important;
}

/* PRELOADER */

.preloader{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999999;
	-webkit-transition: .2s; /*.6s*/
	-o-transition: .2s;
	transition: .2s;
	margin: 0 auto;
}

.preloader .preloader-circle{
	width: 100px;
	height: 100px;
	position: relative;
	border-style: solid;
	border-width: 1px;
	border-top-color: #ff2143;
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	z-index: 10;
	border-radius: 50%;
	-webkit-box-shadow: 0 1px 5px 0 rgba(35,181,185,0.15);
	box-shadow: 0 1px 5px 0 rgba(35,181,185,0.15);
	background-color: #ffffff;
	-webkit-animation: zoom 1500ms infinite ease;
	animation: zoom 1500ms infinite ease;
	-webkit-transition: .2s;
	-o-transition: .2s;
	transition: .2s;
}

.preloader .preloader-circle2{
	border-top-color: #0078ff;
}

.preloader .preloader-img{
	position: absolute;
	top: 50%;
	z-index: 200;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	display: inline-block;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	padding-top: 0px;
	-webkit-transition: .2s;
	-o-transition: .2s;
	transition: .2s;
}

.preloader .preloader-img img{
	max-width: 100%;
}

/* ANIMACIONES PRELOADER */

@-webkit-keyframes zoom{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .6s;
		-o-transition: .6s;
		transition: .6s;
	}
	100%{
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		-webkit-transition: .6s;
		-o-transition: .6s;
		transition: .6s;
	}
}

@keyframes zoom{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .6s;
		-o-transition: .6s;
		transition: .6s;
	}
	100%{
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		-webkit-transition: .6s;
		-o-transition: .6s;
		transition: .6s;
	}
}

/* LOGO*/
.logo-movil {
	margin-bottom: -26px;
}

.logo-pc {
	position: relative;
	z-index: 10;
	margin-bottom: -19px;
}

/* BARRA MENU principal, para que se quede logo por encima */
#sticker {
	position: relative;
	z-index: 5;
}


/* POSICION DE ALGUNOS HEADINGS */

.section-heading {
	margin-bottom: 50px;
	text-align: center;
}

.style-2 {
	text-align: left;
}

@media only screen and (max-width: 767px) {
	.section-heading h4 {
		font-size: 20px;
	}
}

/* NAVEGACIÓN DE TABLA DE PARTICIPANTES */
.table-participantes-container {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.table-info {
    background: linear-gradient(135deg, rgba(108, 117, 125, 0.15), rgba(108, 117, 125, 0.25));
    padding: 10px 15px;
    border-radius: 6px;
    border-left: 3px solid #6c757d;
    font-size: 0.9em;
}

/* Contenedor de tabla con scroll nativo */
.tabla-scroll {
    border: 1px solid #495057;
    border-radius: 6px;
    background: #343a40;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 15px;
    /* Asegurar que el scroll funcione correctamente */
    scrollbar-width: thin;
    scrollbar-color: #666 #333;
}

/* Webkit scrollbar styling para mejor UX */
.tabla-scroll::-webkit-scrollbar {
    width: 8px;
}

.tabla-scroll::-webkit-scrollbar-track {
    background: #333;
    border-radius: 4px;
}

.tabla-scroll::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 4px;
}

.tabla-scroll::-webkit-scrollbar-thumb:hover {
    background: #888;
}

/* Header fijo en la tabla */
.tabla-scroll .sticky-top {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #343a40 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Mejorar presentación de la tabla de participantes */
#tabla-participantes {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

#tabla-participantes thead th {
    background: linear-gradient(135deg, #343a40, #495057) !important;
    border-color: #495057;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.8px;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 12px 8px;
    border-bottom: 2px solid #6c757d;
}

#tabla-participantes tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#tabla-participantes tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    transform: scale(1.01);
}



/* PARTICIPANTE EN PISTA - Solución definitiva */
#tabla-participantes.table.table-dark tbody tr.participante-en-pista {
    background: linear-gradient(135deg, #857375, #290d10) !important;
    color: white !important;
    font-weight: 500 !important;
    animation: gentle-pulse-brown 3s ease-in-out infinite !important;
}

#tabla-participantes.table.table-dark tbody tr.participante-en-pista > * {
    box-shadow: none !important;
    background-color: transparent !important;
}

/* ÚLTIMO PUNTUADO - Solución definitiva */
#tabla-participantes.table.table-dark tbody tr.ultimo-puntuado-destacado {
    background: linear-gradient(135deg, #1e0a2e, #000000) !important;
    color: white !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
    animation: highlight-pulse-dark-purple 2.2s ease-in-out infinite !important;
}

#tabla-participantes.table.table-dark tbody tr.ultimo-puntuado-destacado > * {
    box-shadow: none !important;
    background-color: transparent !important;
    color: white !important;
}

#tabla-participantes.table.table-dark tbody tr.ultimo-puntuado-destacado td,
#tabla-participantes.table.table-dark tbody tr.ultimo-puntuado-destacado th {
    color: white !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* LAYOUT DE TÍTULO API CON DOS COLUMNAS */
.titulo-prueba {
    text-align: center;
    font-weight: 600;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.referencia-colores {
    flex: 0 0 20%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    justify-content: center;
    flex-shrink: 0;
	align-self: self-end;
}

.color-reference-item {
    display: block;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.75rem;
    white-space: nowrap;
    font-weight: 500;
	width: 8em !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ESTILOS PARA EL FALDÓN EN PISTA */
.faldon-en-pista {
    background: linear-gradient(135deg, #857375, #290d10);
    color: white;
    padding: 12px 15px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(133, 115, 117, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: gentle-pulse 3s ease-in-out infinite;
}

/* Fondo unificado del contenedor padre en Directo */
/* .contenedor-padre {
	background: linear-gradient(77deg, var(--color-fondo-directo, #1b1d22) 0%, rgba(18, 20, 24, 1) 40%, #0a0c0f 75%, #000 100%);
} */

/* CENTRAR PLAYERS - SOLUCIÓN DEFINITIVA */
#contenedor_directo iframe {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.en-pista-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.en-pista-indicator {
    font-size: 1.1em;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    animation: pulse 2s infinite;
}

.participante-info {
    text-align: center;
}

.participante-nombre {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.participante-ganaderia {
    font-size: 0.9em;
    opacity: 0.9;
    font-weight: 400;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ESTILOS PARA FALDÓN DIRECTO - Anchura completa del contenedor */

/* =============================
   DIRECTO: MODOS DE PRESENTACIÓN
   - Modo compacto cuando hay pocos participantes o solo mensajes.
   - Mejora estética evitando zonas negras vacías.
   ============================= */
#contenedor_datos_api {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0 2rem;
}

#contenedor_datos_api.directo-modo-compacto,
#contenedor_datos_api.directo-modo-extenso {
	position: relative;
}

#contenedor_datos_api.directo-modo-compacto {
	justify-content: center;
	align-items: center;
}

#contenedor_datos_api.directo-modo-extenso {
	padding: 1rem .75rem 2rem;
}

/* Texturas suaves via pseudo-elemento para modo compacto (pattern sutil) */
#contenedor_datos_api.directo-modo-compacto::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .9;
}

/* En modo compacto, tabla y paneles se centran con drop shadow suave */
#contenedor_datos_api.directo-modo-compacto .table-participantes-container,
#contenedor_datos_api.directo-modo-compacto .proximo-evento,
#contenedor_datos_api.directo-modo-compacto .texto-sin-datos,
#contenedor_datos_api.directo-modo-compacto .faldon-en-pista,
#contenedor_datos_api.directo-modo-compacto #api_titulo {
	width: 100%;
	background: rgba(14,16,20,0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	#contenedor_datos_api.directo-modo-extenso #api_titulo {
		width: 100%;
		max-width: 1080px;
		margin: 0 auto .75rem;
	}

	#contenedor_datos_api.directo-modo-compacto #api_titulo {
		margin: 0 auto 1rem;
	}

	#api_titulo {
		width: 100%;
		margin: 0 auto .5rem;
		padding: .65rem 1rem;
		box-sizing: border-box;
	}

	#contenedor_datos_api.directo-modo-extenso .table-participantes-container { max-width: 1080px; margin: 0 auto; }

	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 0 0 14px 14px;
	box-shadow: 0 8px 24px -6px rgba(0,0,0,0.55);
	animation: fadeInScale .5s ease;
}

/* Ajustes tabla en modo compacto */
#contenedor_datos_api.directo-modo-compacto #tabla-participantes {
	margin-bottom: 0;
}

/* Scroll en modo extenso mantiene presentación previa */
.table-participantes-container { flex: 1; }
.table-participantes-container .tabla-scroll { height: 100%; }

/* Panel de mensajes (proximo, sin datos) estilizado */
.proximo-evento, .texto-sin-datos {
	background: linear-gradient(145deg, rgba(22,24,28,0.85) 0%, rgba(16,18,22,0.92) 60%, rgba(10,12,15,0.95) 100%);
	border: 1px solid rgba(255,255,255,0.06);
	/* Border radius sólo abajo */
	border-radius: 0 0 14px 14px;
	box-shadow: 0 8px 24px -6px rgba(0,0,0,0.55);
	padding: 1.25rem 1.4rem 1.4rem;
}

/* Indicadores dentro de panel compacto */
#contenedor_datos_api.directo-modo-compacto .en-pista-indicator span:first-child {
	filter: drop-shadow(0 0 4px rgba(255,0,0,0.5));
}

/* Animación aparición */
@keyframes fadeInScale {
	0% { opacity: 0; transform: scale(.96); }
	100% { opacity: 1; transform: scale(1); }
}

/* Responsive refinements */
@media (max-width: 992px) {
	#contenedor_datos_api.directo-modo-compacto { padding: 1.8rem 1.1rem 2rem; }
	#contenedor_datos_api.directo-modo-compacto .table-participantes-container,
	#contenedor_datos_api.directo-modo-compacto #api_titulo { max-width: 100%; }
	#contenedor_datos_api.directo-modo-extenso .table-participantes-container { max-width: 100%; }
}

@media (max-width: 600px) {
	#contenedor_datos_api.directo-modo-compacto .table-responsive { max-height: none; }
	#api_titulo { padding: .55rem .85rem; }
	.proximo-evento, .texto-sin-datos { padding: 1rem 1rem 1.1rem; }
}
.faldon-directo {
	width: 100% !important;
	margin: 0 !important;
	padding: 8px 0 !important;
	display: block !important;
	text-align: center !important;
}



@keyframes gentle-pulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(133, 115, 117, 0.4);
    }
    50% { 
        opacity: 0.85; 
        transform: scale(1.005);
        box-shadow: 0 6px 16px rgba(133, 115, 117, 0.6);
    }
}

@keyframes gentle-pulse-brown {
    0%, 100% { 
        background: linear-gradient(135deg, #857375, #290d10) !important;
        opacity: 1; 
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(133, 115, 117, 0.4);
    }
    50% { 
        background: linear-gradient(135deg, rgba(133, 115, 117, 0.9), rgba(41, 13, 16, 0.9)) !important;
        opacity: 0.9; 
        transform: scale(1.005);
        box-shadow: 0 6px 16px rgba(133, 115, 117, 0.6);
    }
}

@keyframes highlight-pulse-dark-purple {
    0%, 100% { 
        background: linear-gradient(135deg, #1e0a2e, #000000) !important;
        opacity: 1; 
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(30, 10, 46, 0.6);
    }
    20% {
        background: linear-gradient(135deg, #2d1040, #1a0a1a) !important;
        opacity: 0.95;
        transform: scale(1.005);
        box-shadow: 0 5px 18px rgba(45, 16, 64, 0.7);
    }
    50% { 
        background: linear-gradient(135deg, #4a1a5a, #2d1040) !important;
        opacity: 0.9; 
        transform: scale(1.010);
        box-shadow: 0 6px 22px rgba(74, 26, 90, 0.8);
    }
    80% {
        background: linear-gradient(135deg, #2d1040, #1a0a1a) !important;
        opacity: 0.95;
        transform: scale(1.005);
        box-shadow: 0 5px 18px rgba(45, 16, 64, 0.7);
    }
}

/* Responsive */
@media only screen and (max-width: 767px) {
    
    .tabla-scroll {
        max-height: 60vh !important;
    }
    
    .faldon-en-pista {
        padding: 10px;
    }
    
    .en-pista-content {
        flex-direction: column;
        gap: 8px;
    }
    
    .participante-nombre {
        font-size: 1em;
    }
    
    .participante-ganaderia {
        font-size: 0.8em;
    }

	.participante-info {
		margin-top: 5px !important;
	}
}

/* TODO EL HEADER */

.header-area {
	position: relative;
	z-index: 500;
}

.owl-carousel {
	width: -webkit-fill-available;
	touch-action: manipulation;
}

/* _cabecera_banner.phtml*/

.header-area .header-mid{
	padding: 20px 0px 5px 0px;
}

.f-right{
	float: right;
}


.header-area .classy-nav-container {
	background: rgb(205,36,44);
	background: linear-gradient(135deg, #2e1b1b 0%, #cd242c 100%);;
}

.header-area .classy-navbar {
	padding: 0;
	height: 90px;
}



@media only screen and (min-width: 768px) and (max-width: 1199px) {
	.header-area .classy-navbar {
		height: 70px;
	}

	.button-anio{
		max-width: 47px;
	}
}


@media only screen and (max-width: 900px) {
	.anios-disponibles {
		display: none;
	}
}

/*menu principal*/
.classynav ul {
	margin-bottom: -10px !important;
}
/* Buscador diferido con icono */
.search-wrapper { position: relative; }
.search-wrapper .search-icon-input {
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	font-size: 22px;
	color: #6c757d;
	pointer-events: none;
}
input.buscador-videos { padding-left: 44px !important; }
.search-clamp { width: clamp(300px, 42vw, 420px); }
@media (max-width: 575.98px){
	.search-wrapper .search-icon-input { left: 10px; font-size:20px; }
	input.buscador-videos { padding-left:42px !important; }
	.search-clamp { width: auto; }

	.form-select-lg, .btn-disciplina {
		font-size: 1rem !important;
	}
}

/* DESPLEGABLE DEL MENU */

.header-area .classy-navbar .classynav ul li a {
	font-weight: 700 !important;
	text-transform: uppercase !important;
	font-size: 16px !important;
	color: #FFF !important;
	height: 79px !important;
	line-height: 90px !important;
	border-bottom: 3px solid transparent !important;
	padding: 0px 15px !important;
}


/* icono en menu */
.ico-menu-inicio .ico-span {
	position: relative;
	font-size: 37px;
	top: 11px;
}
.ico-menu .ico-span {
	position: relative;
	font-size: 24px;
	top: 4px;
}
.ico-txt {
	display: none;
}

.ico-span {
	width: 33px;
}
.ico-txt {
	float: left;
	text-align: left;
}

/*menu movil*/
@media only screen and (max-width: 991px) {
	.header-area .classy-navbar .classynav ul li a {
		height: 61px !important;
		line-height: 24px !important;
		font-size: 14px;
		background-color: #222627;
		border-bottom: none;
	}

	.ico-span {
		width: 33px;
		float: left;
	}

	.ico-txt {
		display: block;
		font-size: 16px;
		margin-left: 8px;
		margin-top: 5px;
	}

	.ico-menu-inicio .ico-span {
		top: -5px !important;
	}

}

/*elementos del menu*/
.header-area .classy-navbar .classynav ul li a:hover, .header-area .classy-navbar .classynav ul li a:focus {
	color: #f5cc00ff !important;
	border-bottom-color: #f5cc00ff !important;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.header-area .classy-navbar .classynav ul li a:hover, .header-area .classy-navbar .classynav ul li a:focus {
		color: #f5cc00ff;
	}
}

@media only screen and (max-width: 767px) {
	.header-area .classy-navbar .classynav ul li a:hover, .header-area .classy-navbar .classynav ul li a:focus {
		color: #f5cc00ff;
	}
}

.header-area .classy-navbar .classynav ul li a::after {
	color: #ffffff !important;
}

.header-area .classy-navbar .classynav ul li ul li a {
	text-transform: capitalize;
	padding: 0 20px;
	font-size: 14px;
	color: #0f1112;
	line-height: 34px;
	height: 35px;
}

/* para movil */
@media only screen and (max-width: 991px) {
	.header-area .classy-navbar .classynav ul li ul li a {
		color: #a6a6a6;
	}

	.header-area .classy-navbar .classynav ul li a:hover, .header-area .classy-navbar .classynav ul li a:focus {
		border: none !important;
	}

}

.header-area .classy-navbar .classynav ul li ul li a:hover, .header-area .classy-navbar .classynav ul li ul li a:focus {
	color: #f5cc00ff;
}

.header-area .classy-navbar .classynav ul li a.active {
	border-bottom-color: #f5cc00ff !important;
}

.classynav ul li a img{
	-webkit-transition-duration: 500ms !important;
	-o-transition-duration: 500ms !important;
	transition-duration: 500ms !important;
}

.classynav ul li a img:hover{
	filter: brightness(0);
}

/* DROPDOWN DEL MENU */

.unordered-list {
	position: relative;
	z-index: 1;
}

.unordered-list li {
	position: relative;
	z-index: 1;
	padding-left: 20px;
	font-size: 16px;
	margin-bottom: 10px;
}

@media only screen and (max-width: 767px) {
	.unordered-list li {
		font-size: 14px;
	}
}

.unordered-list li:last-child {
	margin-bottom: 0;
}

.unordered-list li::after {
	position: absolute;
	top: 5px;
	left: 0;
	z-index: 2;
	content: '\f111';
	font-family: 'FontAwesome';
	font-size: 8px;
}

.single-widget {
	border: 1px solid #393c3d;
	border-radius: 3px;
	padding: 10px 30px;
}

@media only screen and (max-width: 991px) {
	.single-widget {
		padding: 30px 20px;
	}
}

/* MENU LATERAL EN MOVIL */

.header-area .classy-navbar-toggler .navbarToggler span {
	background-color: #ffffff;
}

.breakpoint-on .classy-navbar .classy-menu {
	background-color: #222627;
	box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.2);
}

.breakpoint-on .classycloseIcon .cross-wrap span {
	background: #ffffff;
}

/* LINEAS */

.line {
	width: 150px;
	height: 1px;
	background-color: #4e5152;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.line::after {
	width: 60px;
	height: 2px;
	background: linear-gradient(135deg, #2e1b1b 0%, #cd242c 100%);
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -30px;
}

.style-2 .line {
	width: 100%;
}

.style-2 .line::after {
	left: 0;
	margin-left: 0;
}

/* BOTON PARA SUBIR */

#scrollUp {
	background: linear-gradient(135deg, #2e1b1b 0%, #cd242c 100%) ;
	border-radius: 8px;
	bottom: 50px;
	color: #ffffff;
	font-size: 14px;
	height: 40px;
	line-height: 42px;
	right: 50px;
	text-align: center;
	width: 40px;
	-webkit-transition-duration: 500ms;
	-o-transition-duration: 500ms;
	transition-duration: 500ms;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
}

#scrollUp:hover, #scrollUp:focus {
	background-color: #f5cc00ff;
	color: #ffffff;
}

/* BOTONES */

.el-camino {
	margin-left: 2px;
}

.button {
	margin: auto;
	text-align: -webkit-center;
	cursor: pointer;
}

.button-anio {
	margin: 0px 3px 0px 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row-reverse;
}

.bt-disciplina {
	margin-right: 19px;
	margin-top: 10px;
	cursor: pointer;
}

.a-disciplina {
	padding-right: 4px;
	overflow: hidden;
	text-align: left;
	padding-right: 30px;
	transition: background-color 0.3s;
}

.a-disciplina-flecha {
	background: url(/../img/iconos/flecha.png) no-repeat center right;
	padding-right: 4px;
	overflow: hidden;
	text-align: left;
	padding-right: 30px;
	transition: background-color 0.3s;
}

/*.a-disciplina:hover {
background: url(/../img/flecha1.png) no-repeat center right;

}*/

.single-post-area .texto-boton a, .single-post-area .texto-boton select{
	padding: 8px 15px 6px 15px;
	border-radius: 10px;
	border: 1px solid gray;
	color: #ffffff;
	line-height: 1.3;
	display: inline-block;
	-webkit-transition-duration: 500ms !important;
	-o-transition-duration: 500ms !important;
	transition-duration: 500ms !important;
}

.borde-texto {
	background-color: #222627;
	padding: 6px 10px 4px 10px;
	margin-right: 15px;
	border-radius: 10px;
	border: 1px solid #666;
	color: #666;
	line-height: 1.3;
	display: inline-block;
	-webkit-transition-duration: 500ms !important;
	-o-transition-duration: 500ms !important;
	transition-duration: 500ms !important;
}

.single-post-area:hover .texto-boton > a, .single-post-area:focus .texto-boton > a, .single-post-area:hover .texto-boton > select, .single-post-area:focus .texto-boton > select{
	color: #CD242C !important;
}

.single-post-area:hover > img{
	filter: brightness(0.5);
	/*	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
}

.row-anios {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 50px;
}

/* media query oculta elementos camino de migas */

@media only screen and (max-width: 767px) {
	#bt-inicio, #bt-diferido, #bt-anios {
		display: none;
	}
}

@media screen and (min-width: 991px) and (max-width: 1199px){
	.row-anios {
		max-width: 45px;
	}
}

@media screen and (min-width: 990px) {
	.row-anios {
		max-width: none;
	}
}

@media only screen and (min-width: 767px){
	#pc {
		display: flex;
	}
}

@media only screen and (max-width: 767px){
	#pc {
		display: none;
	}
}

@media only screen and (min-width: 767px){
	#movil {
		display: none;
	}
}

@media only screen and (max-width: 767px){
	#movil {
		display: flex;
		margin-top: 45px;
	}
}

.activado {
	background-color: #f5cc00ff !important;
	border-color: #f5cc00ff !important;
	color: #CD242C !important;
	font-weight: bold !important;
}

.directo a{
	margin: auto;
	border-color: transparent !important;
	margin-top: -8px !important;
	font-size: 16px !important;
	line-height: 1.3 !important;
}

.directo i {
	color: linear-gradient(135deg, #2e1b1b 0%, #cd242c 100%);
	padding-right: 10px;
}

.texto-directo a{
	margin: -10px 0 0 5px !important;
	color: #a6a6a6 !important;
	font-size: 13px;
	border: 0 !important;
}

@media only screen and (max-width: 1199px) {
	.texto-directo a{
		margin: auto !important;
		margin-top: -10px !important;
	}
}


.sin-borde {
	border: 0px !important;
}

.button .single-post-area .precarga1 {
	background-image: url('../img/botones/canal-1 seleccionado.png');
}

.button .single-post-area .precarga2 {
	background-image: url('../img/botones/canal-2 seleccionado.png');
}

.button .single-post-area .precarga3 {
	background-image: url('../img/botones/canal-3 seleccionado.png');
}

.button .single-post-area .precarga4 {
	background-image: url('../img/botones/video seleccionado.png');
}

.texto-boton {
	margin: auto;
	margin-top: 15px;
	display: block;
	text-align: center;
}

.button:hover .texto-boton .row-disciplina > a {
	color: #cd242c !important;
}

.texto-boton-sin-hover {
	margin: auto;
	margin-top: 15px !important;
}


/*BOCADILLO BOTONES*/
.post-thumbnail span {
	font-size: 14px;
	padding: 0;
	vertical-align: middle;
}

.parpadea {
	animation-name: parpadeo;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;

	-webkit-animation-name: parpadeo;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	transform: translateY(-2px);
}

/* ANIMACIONES */

@-moz-keyframes parpadeo{
	0% {
		opacity: 1.0;
	}
	50% {
		opacity: 0.7;
	}
	100% {
		opacity: 1.0;
	}
}

@-webkit-keyframes parpadeo {
	0% {
		opacity: 1.0;
	}
	50% {
		opacity: 0.7;
	}
	100% {
		opacity: 1.0;
	}
}

@keyframes parpadeo {
	0% {
		opacity: 1.0;
	}
	50% {
		opacity: 0.7;
	}
	100% {
		opacity: 1.0;
	}
}

/* ESTILOS PARA CANALES CON DIRECTO ACTIVO */
.canal-directo-activo {
	position: relative;
}

@keyframes glow-border {
	0%, 100% {
		opacity: 0.7;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.02);
	}
}

.canal-directo-activo:hover .post-thumbnail {
	box-shadow: 0 0 25px rgba(220, 53, 69, 0.8);
	transform: scale(1.05);
}

/* MEJORAS PARA EL TEXTO DE INFORMACIÓN */
.texto-directo {
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.texto-directo .txti {
	line-height: 1.2;
	text-align: center;
}


/*BOTON 1*/

.button .clase1 .post-thumbnail {
	width: 120px;
	height: 120px;
	background-image: url('../img/botones/canal-1.png');
	-webkit-transition-duration: 500ms !important;
	-o-transition-duration: 500ms !important;
	transition-duration: 500ms !important;
}

.button .activo1 .post-thumbnail {
	width: 120px;
	height: 120px;
	background-image: url('../img/botones/canal-1 relleno-rojo.png') !important;
}

.button .clase1:hover .post-thumbnail {
	background-image: url('../img/botones/canal-1 seleccionado.png') !important;
}

@media only screen and (min-width: 768px) and (max-width: 990px){
	.button .clase1 .post-thumbnail {
		margin-left: -15px;
	}
}

/*BOTON 2*/

.button .clase2 .post-thumbnail {
	width: 120px;
	height: 120px;
	background-image: url('../img/botones/canal-2.png');
	-webkit-transition-duration: 500ms !important;
	-o-transition-duration: 500ms !important;
	transition-duration: 500ms !important;
}

.button .activo2 .post-thumbnail {
	width: 120px;
	height: 120px;
	background-image: url('../img/botones/canal-2 relleno-rojo.png') !important;
}

.button .clase2:hover .post-thumbnail {
	background-image: url('../img/botones/canal-2 seleccionado.png') !important;
}


@media only screen and (min-width: 768px) and (max-width: 990px){
	.button .clase2 .post-thumbnail {
		margin-left: -15px;
	}
}

/*BOTON 3*/

.button .clase3 .post-thumbnail {
	width: 120px;
	height: 120px;
	background-image: url('../img/botones/canal-3.png');
	-webkit-transition-duration: 500ms !important;
	-o-transition-duration: 500ms !important;
	transition-duration: 500ms !important;
}

.button .activo3 .post-thumbnail {
	width: 120px;
	height: 120px;
	background-image: url('../img/botones/canal-3 relleno-rojo.png') !important;
}

.button .clase3:hover .post-thumbnail {
	background-image: url('../img/botones/canal-3 seleccionado.png') !important;
}

@media only screen and (min-width: 768px) and (max-width: 990px){
	.button .clase3 .post-thumbnail {
		margin-left: -15px;
	}
}

/*BOTON 4*/

.button .clase4 .post-thumbnail {
	width: 120px;
	height: 120px;
	background-image: url('../img/botones/canal-4.png');
	-webkit-transition-duration: 500ms !important;
	-o-transition-duration: 500ms !important;
	transition-duration: 500ms !important;
}

.button .activo4 .post-thumbnail {
	width: 120px;
	height: 120px;
	background-image: url('../img/botones/canal-4 relleno-rojo.png') !important;
}

.button .clase4:hover .post-thumbnail {
	background-image: url('../img/botones/canal-4 seleccionado.png') !important;
}

@media only screen and (min-width: 768px) and (max-width: 990px){
	.button .clase4 .post-thumbnail {
		margin-left: -15px;
	}
}

/*BOTON 5: DIFERIDO*/

.button .clase5 .post-thumbnail {
	width: 120px;
	height: 120px;
	background-image: url('../img/botones/video.png');
	-webkit-transition-duration: 500ms !important;
	-o-transition-duration: 500ms !important;
	transition-duration: 500ms !important;
}

.button .activo5 .post-thumbnail {
	width: 120px;
	height: 120px;

}



@media only screen and (min-width: 768px) and (max-width: 990px){
	.button .clase5 .post-thumbnail {
		margin-left: -15px;
	}
}


.btn-dis {
    width: clamp(150px, 10vw, 200px) !important;
}

@media (max-width: 576px) {
    /* Para dispositivos móviles: Contenedor Principal : si la última tarjeta queda sola, centrarla */
    #disciplinas-container .col-6:nth-child(2n+1):last-child {
        margin-left: auto;
        margin-right: auto;
    }
}

/*BOTON 6: ENTREVISTA*/

.button .clase6 .post-thumbnail {
	width: 120px;
	height: 120px;
	background-image: url('../img/botones/entrevistas.png');
	-webkit-transition-duration: 500ms !important;
	-o-transition-duration: 500ms !important;
	transition-duration: 500ms !important;
}



@media only screen and (min-width: 768px) and (max-width: 990px){
	.button .clase6 .post-thumbnail {
		margin-left: -15px;
	}
}

/*BOTON 7: PROGRAMA*/

.button .clase7 .post-thumbnail {
	width: 120px;
	height: 120px;
	background-image: url('../img/botones/programa.png');
	-webkit-transition-duration: 500ms !important;
	-o-transition-duration: 500ms !important;
	transition-duration: 500ms !important;
}

.button .clase7:hover .post-thumbnail {
	filter: brightness(0.5);
}

/*BOTON 8: RESUMENES*/

.button .clase8 .post-thumbnail {
	width: 120px;
	height: 120px;
	background-image: url('../img/botones/resumen.png');
	-webkit-transition-duration: 500ms !important;
	-o-transition-duration: 500ms !important;
	transition-duration: 500ms !important;
}





@media only screen and (min-width: 768px) and (max-width: 990px){
	.button .clase6 .post-thumbnail {
		margin-left: -15px;
	}
}


@media only screen and (min-width: 768px) and (max-width: 990px){
	.button .clase7 .post-thumbnail {
		margin-left: -15px;
	}
}

/* BOTON ANIOS */

.single-post-area .texto-boton-sin-hover a{
	background-color: #666;
	padding: 8px 15px 6px 15px;
	border-radius: 10px;
	border: 3px solid #6f6f6f;
	color: #CCC !important;
	line-height: 1.1;
	display: inline-block;
	font-weight: bold !important;
}

/* MAS Y MENOS */

#icono_mas, #icono_menos {
	font-size: 6em !important;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	#icono_mas, #icono_menos {
		font-size: 5em !important;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	#icono_mas, #icono_menos {
		font-size: 4em !important;
	}
}

@media only screen and (max-width: 767px) {
	#icono_mas, #icono_menos {
		font-size: 7em !important;
	}
}


/* PLAYER Y DISCIPINAS DE ULTIMOS VIDEOS*/

.sicab-nav-tab {
	align-content: baseline;
	overflow: hidden;
	outline: none;
	cursor: grab;
	touch-action: none;
	border: none;
}

.sicab-nav-tab .nav-link {
	padding: 15px 20px;
	border-left: solid transparent;
	border-width: 0 0 0 5px;
	border-radius: 0;
}

.sicab-nav-tab .nav-link:hover {
	border-color: #fce94f !important;
	background-color: #666;
}

.sicab-nav-tab .nav-link.active {
	background-color: #4d5051 !important;
	border-left-color: #cd242c !important;
}

.single-blog-post .post-thumbnail {
	flex: 0 0 100px;
}

.single-blog-post .post-thumbnail img{
	-webkit-transition-duration: 500ms;
	-o-transition-duration: 500ms;
	transition-duration: 500ms;
	height: auto;
	width: 600px;
}

.single-blog-post .post-content {
	margin: auto;
	margin-left: 0px;
	padding-left: 20px;
}

.single-blog-post .post-content .post-title {
	color: #ffffff;
	margin-bottom: 5px;
	display: block;
	font-size: 16px;
	font-family: "Roboto", sans-serif;
	font-weight: bold;
	-webkit-transition-duration: 500ms;
	-o-transition-duration: 500ms;
	transition-duration: 500ms;
}

.single-blog-post:hover .post-thumbnail > img, .single-blog-post:focus .post-thumbnail > img {
	filter: brightness(0.5);
}

.single-blog-post:hover .post-content > a, .single-blog-post:focus .post-content > a {
	color: linear-gradient(135deg, #2e1b1b 0%, #cd242c 100%);
}









@media only screen and (max-width: 768px) {
	.sicab-nav-tab {
		touch-action: manipulation !important;
		height: 100%;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
	.single-blog-post .post-thumbnail {
		flex: 0 0 80px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.single-blog-post .post-content .post-title {
		font-size: 14px;
	}
}

@media only screen and (max-width: 991px) {
	.single-blog-post .post-content .post-title {
		font-size: 13px;
	}
}

.video-post {
	position: relative;
	height: 0;
	overflow: hidden;
	padding-bottom: 56.2%;
}

.video-post iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.video-post {
		height: 348px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.video-post {
		height: 226px;
	}
}




/* PANEL LATERAL */

.canal{
	border-left: 4px solid transparent;
	border-left-color: linear-gradient(135deg, #2e1b1b 0%, #cd242c 100%);
}

.div-panel-lateral {
	background-color: #FFF;
}

.panel-lateral {
	align-content: flex-start;
}

@media only screen and (max-width: 767px) {
	.canal{
		border-left: none !important;
		height: 500px;
	}
}

@media only screen and (max-width: 767px) {
	.div-panel-lateral {
		text-align: center !important;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.panel-lateral {
		height: 348px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.panel-lateral {
		height: 226px;
	}
}

@media only screen and (max-width: 767px) {
	.panel-lateral {
		height: 320px;
	}
}

/* ULTIMOS VIDEOS*/

.single-post-area .post-thumbnail {
	height: 200px;
}

.single-post-area .post-content .post-title {
	display: block;
	color: #C7C7C7;
	margin-bottom: 15px;
	font-size: 18px;
	text-align: center;
}

.single-post-area .post-content {
	margin-top: 8px;
}

@media only screen and (min-width: 768px) and (max-width: 990px){
	.single-post-area .post-thumbnail {
		height: 100px;
	}
}

@media only screen and (max-width: 767px){
	.single-post-area .post-thumbnail {
		height: 290px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.single-post-area .post-content .post-title {
		font-size: 18px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.single-post-area .post-content .post-title {
		font-size: 16px;
	}
}

@media only screen and (max-width: 767px) {
	.single-post-area .post-content .post-title {
		font-size: 18px;
	}
}

@media only screen and (max-width: 767px) {
	.sidebar-area {
		display: none ;
	}
}

/* VIDEOS DIFERIDOS */

.single-post-area .post-thumbnail-diferido{
	height: 300px;
	text-align: center;
}

@media only screen and (max-width: 1199px) {
	.single-post-area .post-thumbnail-diferido {
		height: 190px;
		text-align: center;
	}
}

/* ERROR 404 */

.error {
	height: 640px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.error{
		height: 500px;
	}
}

@media only screen and (max-width: 767px) {
	.error {
		height: 400px;
	}
}

/* FOOTER */

.footer-area {
	padding-top: 30px;
	background-color: #000;
}

.footer-area .widget-title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 20px;
}

.footer-area .footer-list {
	margin-bottom: 0 !important;
}

.footer-area .footer-list li {
	margin-bottom: 5px !important;
}

.footer-area .footer-list li a, .footer-area a {
	color: #909090;
}

.footer-area .footer-list li a:hover, .footer-area a:hover {
	color: #fce94f;
}

.text-foot:hover {
	text-decoration: underline !important;
}

/* Logos del footer */

.logofooter {
	opacity: 0.6;
}

.logofooter:hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}

/* Lista de redes sociales */

.social-icon li a {
	border: 1px solid #3c4858;
	display: inline-block;
	height: 32px;
	width: 32px;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	color: #adb5bd;
	border-color: #adb5bd;
}

.social-icon li a:hover {
	background-color: #676767;
	border-color: #adb5bd !important;
	color: #ffffff !important;
}

.list-inline-item:not(:last-child) {
	margin-right: 0px;
}

.fea.icon-sm {
	height: 30px;
	width: 25px;
}

.rounded {
	border-radius: 6px !important;
}

/* COPYWRITE */

.footer-area .copywrite-area {
	padding: 10px 0;
	background-color: #0a0a0a;
	text-align: center;
}

.footer-area .copywrite-area .copywrite-text {
	margin-bottom: 0;
	color: #8e8e8e;
}

.footer-area .copywrite-area .copywrite-text a {
	color: #ffffff;
}

.footer-area .copywrite-area .copywrite-text a:hover, .footer-area .copywrite-area .copywrite-text a:focus {
	color: linear-gradient(135deg, #2e1b1b 0%, #cd242c 100%);
}

@media only screen and (max-width: 991px) {
	.footer-area .copywrite-area .copywrite-text {
		font-size: 12px;
	}
}

@media only screen and (max-width: 991px) {
	.footer-area .copywrite-area .copywrite-text a {
		font-size: 12px;
	}
}

/* ELEMENTO VIDEO SIN ID */

.sin-video {
	padding: 0;
	opacity: 0.5;
}

.sin-video-unico {
	padding: 0;
	opacity: 0.5;
	height: 500px;
}

.iframe-video {
	height: 280px;
	width: 90%;
}

.iframe-video-unico {
	height: 500px;
	width: 100%;
}

@media only screen and (max-width: 1200px) {
	.sin-video {
		padding: 8px 0 0 0;
		opacity: 0.5;
	}

	.iframe-video {
		height: 250px;
		width: 90%;
	}


}

@media only screen and (max-width: 991px) {
	.sin-video {
		padding: 8px 0 0 0;
		opacity: 0.5;
	}

	.iframe-video {
		width: 90%;
	}
}

@media only screen and (max-width: 767px) {
	.sin-video {
		padding: 8px 0 0 0;
		opacity: 0.5;
	}
	.iframe-video {
		width: 90%;
	}
}

/* estilo para iconos de google */


.material-symbols-outlined {
	font-variation-settings: 'FILL' 0,
	'wght' 200,
	'GRAD' 0,
	'opsz' 24
}


/* estilo para iconos de google */

.icono-pequeño {
	font-size: 16px !important;
	vertical-align: bottom !important;
}

.icono-grande {
	font-size: 40px !important;
	vertical-align: sub !important;
}

.icono-grande-video {
	font-size: 30px !important;
	vertical-align: middle !important;
	margin-bottom: 5px !important;
}

/* ver resultados */

.ver-resultados {
	padding: 8px 20px 8px 15px;
	border-radius: 10px;
	border: 1px solid gray;
	line-height: 0.8;
	display: inline-block;
	float: right;
}

/* PROGRAMA */

.caja_programa{
	text-align: center;
	line-height: 23px;
	font-size: 15px;
	color: #ffffffff;
}

.p-columna {
	float: left;
	text-align: center;
}

.p-col-hora {
	min-width: 80px;
	max-width: 100px;
}

.p-col-pista {
	width: 100%;
}

.p-elemento {
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	margin: 0px 2px;
	padding: 3px;
	height: 29px;
	overflow: hidden;
}

.p-hora {
	border: solid 1px #313637;
	color: #CCC;
}

.p-activo {
	border: solid 1px #FFF;
}

.p-cabecera {
	background-color: #666;
	font-weight: bold;
}

.p-no {
	border: solid 1px #313637;
}

.p-col-hora .p-fila {
	text-align: right;
}

.p-ocultar {
	display: block;
}

@media only screen and (max-width: 768px) {
	.caja_programa{
		text-align: center;
		line-height: 18px;
		font-size: 13px;
	}

	.p-col-hora-derecha {
		display: none;
	}
}

@media only screen and (max-width: 1000px) {
	.p-ocultar {
		display: none;
	}
}

/*colores de los elementos del programa */

.p-color1 {
	background-color: #132b0f;
} /*morfologia*/

.p-color2 {
	background-color: #111a2d;
} /*doma clasica*/

.p-color112 {
	background-color: #4c73b5;
} /*doma clasica menores*/

.p-color6 {
	background-color: #2d1111;
} /*salto*/

.p-color115 {
	background-color: #6e7500;
	color: #000;
} /*espectaculo*/

.p-color8 {
	background-color: #985b87;
	color: #000;
} /*amazonas*/

/*.p-color111 { background-color: #dadada; color: #FFF; } campus sin color*/

.p-color7 {
	background-color: #864b4a;
	color: #000;
} /*equitacion de trabajo*/

.p-color4 {
	background-color: #00655d;
	color: #000;
} /*alta escuela*/

.p-color10 {
	background-color: #776f49;
	color: #000;
} /*exhibiciones*/

.p-color5 {
	background-color: #845402;
	color: #000;
} /*enganches*/

.p-color3 {
	background-color: #513e6a;
	color: #FFF;
} /*vaquera*/

.p-color0 {
	background-color: #cc0000;
	color: #FFF;
} /*sin grupo*/

/* programa dia */

.p-grupo-dia {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
}

.p-grupo-dia ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.p-dia {
	border: solid 1px #FFF;
	padding: 1px;
	margin: 5px;
	width: 85px;
	cursor: pointer;
	list-style: none;
}

.p-d-activo {
	/*dia activo*/
	background: linear-gradient(135deg, #2e1b1b 0%, #cd242c 100%);
}

.p-d-hoy {
	/*dia de hoy*/
	border: solid 4px green;
}

.p-tab-oculta {
	display: none;
}

.p-grupo-dia ul li:hover {
	background-color: #676767;
}

/* pestañas contenido de dias */

.p-tab-visible {
	display: flex;
}

.p-tab{
	width: 100%;
	overflow-y: scroll;
	scroll-behavior: smooth;
}

::-webkit-scrollbar {
	display: none;
}

/* linea indicadora de hora actual - MEJORADA */

.p-linea {
	position: absolute;
	height: 26px;
	background: linear-gradient(90deg, #ff4444, #ff6666);
	opacity: 0.4;
	border: solid 2px #FFF;
	border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
	color: #FFF;
	font-weight: bold;
	font-size: 12px;
	z-index: 1000;
	box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3);
	transition: all 0.3s ease;
}

.p-linea .material-icons-ancce {
	color: #FFF;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	animation: pulse 2s infinite;
}

.p-linea:hover {
	opacity: 0.5;
	transform: scale(1.02);
}

@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.1); }
	100% { transform: scale(1); }
}

/* Mejorar visibilidad en móviles */
@media only screen and (max-width: 500px) {
	.programa {
		padding-right: 0px !important;
		padding-left: 0px !important;
	}
	
	.p-linea {
		height: 22px;
		border-radius: 11px;
		font-size: 11px;
	}
}

/* para miniatura en players index */

.miniatura {
	position: relative;
	height: 4rem;
}

/* para mostrar y ocultar elementos en general */

.visible {
	display: block;
}

.oculto {
	display: none;
}

.blanco {
	color: #FFF;
}



/* popup */

.popup {
	background-color: #ffffff;
	color: #888888;
	height: 245px;
	left: 100%;
	padding: 20px;
	position: fixed;
	right: 30%;
	top: 25%;
	width: 550px;
	z-index: 101;
	-moz-box-shadow: 0px 0px 10px 1px #888888;
	-webkit-box-shadow: 0px 0px 10px 1px #888888;
	box-shadow: 0px 0px 10px 1px #888888;
	border-radius: 10px;
	-moz-border-radius: 10px;
}

.overlay {
	background: #000000;
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 100;
	opacity: 0.5;
}

a.close {
	background: url("cancel.png") repeat scroll left top transparent;
	cursor: pointer;
	float: right;
	height: 26px;
	left: 32px;
	position: relative;
	top: -33px;
	width: 26px;
}

/* iconos de google icons en btns: btn1, btn2.... */

.gi_boton_d {
	/* derecha */
	vertical-align: middle;
	margin: -2px 0 0 8px;
}

.gi_boton_i {
	/* izquierda */
	vertical-align: middle;
	margin: -4px 8px 0 0;
	float: left;
}

.gi_mid_i {
	vertical-align: sub;
	margin: 0 8px 0 0;
}

.gi_mid_d {
	vertical-align: sub;
	margin: 0 0 0 8px;
}

.gi_bot_i {
	vertical-align: bottom;
	margin: 0 8px 0 0;
}

.gi_bot_d {
	vertical-align: bottom;
	margin: 0 0 0 8px;
}

/* quitar flecha abajo
.logout > a:after {
display: none;
}*/

.breakpoint-off .classynav ul li .dropdown {
	background-color: #4d4d4d !important;
}

.breakpoint-off .classynav ul li .dropdown a {
	font-size: 13px !important;
	height: 59px !important;
	line-height: 44px !important;
}

.breakpoint-off .classynav ul li .dropdown {
	margin-top: 0px;
}

/*camino de migas */
.breadcrumb-custom {
	--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%23cd242c'/%3E%3C/svg%3E");
}

.breadcrumb-item {
	color: #cd242c !important;
}

.breadcrumb-item+.breadcrumb-item::before {
	float: none !important;	
}

.breadcrumb-item.active {
	color: #FFF !important;
	font-weight: bold;
}



/* Efecto de hover en las imágenes */
.disciplinas .card img {
	filter: none; /* Estado inicial */
	transition: filter 0.5s ease; /* Transición para el filtro de la imagen */
}

.disciplinas .card:hover img {
	filter: grayscale(71%) sepia(48%) hue-rotate(-6deg) saturate(8000%) brightness(47%);
	transition: filter 0.5s ease; /* Transición para el filtro de la imagen en hover */
}

/* Efecto de hover en el texto */
.disciplinas .card p {
	color: white; /* Estado inicial del texto */
	transition: color 0.5s ease; /* Transición para el color del texto */
}

.disciplinas .card:hover p {
	color: #cd242c !important; /* Color del texto en hover */
}

/* Efecto de hover en la tarjeta */
.disciplinas .card {
	background-color: transparent; /* Estado inicial del fondo */
	transition: background-color 0.5s ease; /* Transición para el fondo */
}






/* Restablece la imagen a su estado original cuando no está en hover */
.disciplinas .card img {
	transition: filter 0.5s ease;
}

/* Para proteger la resolución de la imagen */
	#disciplinas-container 	.card-img-top {
	width: unset !important;
}




.owl-nav .owl-prev,
.owl-nav .owl-next {
	display: flex; /* Asegura que el contenedor de iconos sea flexible */
	align-items: center; /* Centra verticalmente el icono */
	justify-content: center; /* Centra horizontalmente el icono */
	font-size: 0; /* Oculta el texto */
}

.owl-nav .owl-prev::before {
	content: 'arrow_back_ios'; /* Nombre del icono de flecha hacia atrás */
	font-family: 'Material Symbols Outlined'; /* Especifica la fuente de iconos */
	font-weight: 400; /* Peso del icono */
	font-size: 24px; /* Tamaño del icono */
	color: linear-gradient(135deg, #2e1b1b 0%, #cd242c 100%); /* Color del icono */
}

.owl-nav .owl-next::before {
	content: 'arrow_forward_ios'; /* Nombre del icono de flecha hacia adelante */
	font-family: 'Material Symbols Outlined'; /* Especifica la fuente de iconos */
	font-weight: 400; /* Peso del icono */
	font-size: 24px; /* Tamaño del icono */
	color: linear-gradient(135deg, #2e1b1b 0%, #cd242c 100%); /* Color del icono */
}

/* Efecto de desactivado para el botón prev */
.owl-prev.disabled::before {
	opacity: 0.5; /* Efecto de desactivado */
	pointer-events: none; /* Evita que el icono deshabilitado sea clickeable */
}

/*video api vimeo*/
.vimeo-player {
	width: 100%; /* El ancho se ajusta al contenedor */
	position: relative;
	height: 0; /* Importante para la relación de aspecto */
	overflow: hidden;
}

.vimeo-player iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/*Adaptación del scroll up con el chatBot: Mover hacia la izquierda*/
#scrollUp {
	right: auto !important;
	bottom: 1.5rem !important;
	margin-left: 1rem !important;
}




/*Mover Recaptcha a la izquierda*/
.grecaptcha-badge {
	width: 70px !important;
	overflow: hidden !important;
	transition: all 0.3s ease !important;
	left: -2px !important;
	bottom: 20px !important;
}
.grecaptcha-badge:hover {
	width: 256px !important;
}


/*/////////// CHATBOT ////////////////////*/
#chatbase-message-bubbles{
	margin-left: 20px !important;
	margin-bottom: 25px !important;
	background: none !important;
}

#chatbase-bubble-button{
	background-color: white !important;
	width: 75px !important;
	height: 75px !important;
	bottom: 1.5rem !important;
	/* margin-left: 20px !important;
	margin-bottom: 20px !important; */
}

#chatbase-bubble-button img {
	width: 75px !important;
	height: 75px !important;
}


/*api de resultados en directo*/

/*habilitamos scrolls bars*/
#api_datos::-webkit-scrollbar {
    display: block;
}

#api_datos {
    max-height: 530px;
    overflow-y: auto;
}

/* Personalización de la barra de desplazamiento en WebKit (Chrome, Safari) */
#api_datos::-webkit-scrollbar {
    width: 20px; /* Ancho de la barra de desplazamiento */
}

#api_datos::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color de fondo de la barra */
}

#api_datos::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #2e1b1b 0%, #cd242c 100%); /* Color del pulgar de la barra */
    border-radius: 5px; /* Redondeo del pulgar */
    border: 2px solid #f1f1f1; /* Borde alrededor del pulgar */
}

#api_datos::-webkit-scrollbar-thumb:hover {
    background-color: #a81c22; /* Color del pulgar en hover */
}

#api_datos .accordion-item{
	background-color: unset !important;
	border: unset !important;
}

#api_datos .accordion-button{
	padding: unset !important;
    background-color: #636262 !important;
	color: #ffffff;
}

#api_datos .accordion-button div div{
	font-size: 13px !important;
	font-family: "Nunito", sans-serif !important;
	text-align: left !important;
	padding: 5px 0 !important;

}

#api_datos .accordion-body{
	background-color: #f3f3f3;
	padding: 0;
}

#api_datos .accordion-body p{
	color: #000;
}

#api_datos .accordion-button::after{
	color: beige;
}


#api_datos .accordion-button::after{
	display: none !important;
}

.accordion-button::after {
	min-height: max-content;
	filter: brightness(0) saturate(100%) invert(16%) sepia(41%) saturate(5581%) hue-rotate(344deg) brightness(89%) contrast(96%);
	background-size: contain; /* Tamaño de la imagen */
    background-position: center; /* Centra la imagen verticalmente */
	margin-right: 5px;
}

.directo-player-video-div {
	display: flex;
	justify-content: center;
}

#player_contenedor {
	position: relative;
	width: 100%;
	margin: 0 auto; /* Centrar horizontalmente */
	aspect-ratio: 16 / 9; /* Mantiene la proporción del video */
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000; /* Fondo negro para que no se vea vacío mientras carga */
	overflow: hidden; /* Asegura que nada se desborde */
}

#contenedor_directo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#player_contenedor iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}


/* ESTILOS PARA DIRECTO EN PANTALLA COMPLETA: CASO MÓVIL*/
@media (max-width: 600px) {

	/* body{
		padding-top: unset !important;
	} */
	.directo-player-video-div-titulo{
		width: 100%;
		z-index: 1000;
		margin: unset !important;
		background: #181e27 !important;
		padding: 4px !important;
	}



	.directo-player-video-div {
		position: sticky !important;
		top:46px !important;
		width: 100%;
		z-index: 500;
		background-color: #181e27 !important;
		/* margin: unset !important; */
	}
	#api_datos{
		/* min-height: unset !important; */
		max-height: unset !important; /* Quitar el scroll interno */
		/* font-size: 12px !important; */
	}
	.container-padre-directo-player{
		overflow: unset !important;  /* Overflow y position:sticky no son compatibles */
	}

	/* Quitar el height para contenedor de directos en caso movil */
	#player_contenedor {
		min-height: unset !important;
	}
}
/* ESTILOS PARA DIRECTO EN PANTALLA NORMAL: CASO MÓVIL*/
@media (max-width: 600px) {
	.titulo-compet {
		font-size: 13px !important;
	}
	.directo-player-video-div-titulo h1{
		font-size: 28px !important;
	}

	.tabla-puntos{
		font-size: 10px !important;
	}

	.directo-player-video-div-titulo a{
		font-size: 14px !important;
	}
	.lead-div{
		text-align: left !important;
	}
	.lead {
		font-size: 14px !important;
	}
	#api_datos .accordion-button div div{
		font-size: 11px !important;
	}

	.titulo-directo-ejemplar, .dato-directo-ejemplar{
		width: 40% !important;
	}

	.titulo-directo-ganaderia, 	.dato-directo-ganaderia{
		width: 40% !important;
	}

	.titulo-directo-puntos, .dato-directo-puntos{
		width: 20% !important;
	}
}




    /* Estilos para contenido de estado mejorado */
    .contenido-estado {
        border-radius: 8px;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
        min-height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .contenido-estado:hover {
        transform: translateY(-10px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .contenido-estado h2 {
        line-height: 1.3;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .contenido-estado .material-symbols-outlined {
        font-size: 1.8rem;
        vertical-align: middle;
    }

/* ===============================
   ESTILOS API DIRECTOS
   =============================== */

/* CONTENEDOR UNIFICADO - API Título + Contenido conectados */
#api_datos {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 0;
}

/* API TÍTULO - Cabecera siempre conectada */
#api_titulo {
    background: linear-gradient(135deg, #2e1b1b 0%, #cd242c 100%) !important;
    border: none;
    border-radius: 8px 8px 0 0 !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    box-shadow: none;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}



#api_titulo .fs-6 {
    font-size: 0.9rem !important;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    margin: 0;
}

/* PROGRAMA INFO - Conectado directamente al título */
.programa-info {
    border-radius: 0 0 8px 8px !important;
    background: #ffffff;
    border: none;
    box-shadow: none;
    overflow: hidden;
    transition: all 0.3s ease;
    margin: 0 !important;
    padding: 0 !important;
    border-top: none !important;
}



/* EVENTO ACTUAL - EN VIVO alta visibilidad */
.evento-actual {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    border: none;
    position: relative;
    overflow: hidden;
    padding: 16px !important;
    margin: 0;
    color: #ffffff !important;
}



/* PRÓXIMO EVENTO - Azul profesional */
.proximo-evento {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
    color: #ffffff !important;
    border: none;
    position: relative;
    padding: 16px !important;
    margin: 0;
}

.proximo-evento h4,
.proximo-evento h5,
.proximo-evento p,
.proximo-evento strong {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* EVENTO ACTUAL - Todos los elementos en blanco */
.evento-actual h4,
.evento-actual h5,
.evento-actual p,
.evento-actual strong,
.evento-actual small,
.evento-actual span {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* SIN EVENTOS - Gris profesional */
.sin-eventos {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
    border: none;
    padding: 16px !important;
    margin: 0;
    color: #ffffff !important;
}

.sin-eventos h4,
.sin-eventos h5,
.sin-eventos p,
.sin-eventos strong {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* TABLAS - Conectadas directamente al título */
.table-responsive {
    border-radius: 0 0 8px 8px !important;
    overflow: hidden;
    box-shadow: none;
    background: #fff;
    margin: 0 !important;
    border-top: none !important;
}

.table-dark {
    background: linear-gradient(135deg, #343a40 0%, #495057 100%);
    margin: 0;
}

.table-dark thead th {
    background: linear-gradient(135deg, #212529 0%, #343a40 100%);
    border: none;
    padding: 16px 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.table-dark tbody td {
    padding: 14px 12px;
    border-color: rgba(255, 255, 255, 0.1);
    vertical-align: middle;
    font-size: 0.9rem;
}

.table-dark tbody tr:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: scale(1.01);
    transition: all 0.2s ease;
}

/* FILAS ESPECIALES - Participantes destacados */

/* EN PISTA - Participante actualmente compitiendo - ELIMINADO: Conflicto con estilos anteriores */

/* ÚLTIMO PUNTUADO - Participante con resultado más reciente */
.table-warning {
    background: linear-gradient(135deg, #f8c146 0%, #f39c12 100%) !important;
    color: #2c3e50 !important;
    font-weight: 600 !important;
    border: 1px solid #f1c40f !important;
    box-shadow: 0 2px 6px rgba(248, 193, 70, 0.25) !important;
}

.table-warning td {
    border-color: rgba(44, 62, 80, 0.1) !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    color: #2c3e50 !important;
}

/* Hover states suaves para mejor UX */

.table-warning:hover {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
    box-shadow: 0 3px 8px rgba(248, 193, 70, 0.35) !important;
    transition: all 0.2s ease;
}

/* Responsive */
@media (max-width: 768px) {
    .table-warning {
        border-width: 1px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
        font-weight: 600 !important;
    }
}



/* ===============================
   RESPONSIVE DESIGN
   =============================== */

/* Tablets y pantallas medianas */
@media (max-width: 992px) {
    #api_datos {
        border-radius: 6px;
    }
    
    #api_titulo {
        padding: 10px 14px !important;
        margin: 0 !important;
        border-radius: 6px 6px 0 0 !important;
    }
    
    #api_titulo .fs-6 {
        font-size: 0.8rem !important;
    }
    
    .programa-info {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 0 6px 6px !important;
    }
    
    .table-responsive {
        border-radius: 0 0 6px 6px !important;
    }
    
    .evento-actual,
    .proximo-evento,
    .sin-eventos {
        padding: 14px !important;
        margin: 0 !important;
    }
    
    .table-dark thead th,
    .table-dark tbody td {
        padding: 12px 8px;
        font-size: 0.85rem;
    }

}

/* Móviles */
@media (max-width: 768px) {
    #api_datos {
        border-radius: 6px;
    }
    
    #api_titulo {
        padding: 8px 12px !important;
        margin: 0 !important;
        border-radius: 6px 6px 0 0 !important;
    }
    
    #api_titulo .fs-6 {
        font-size: 0.75rem !important;
        line-height: 1.3;
    }
    
    .programa-info {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 0 6px 6px !important;
    }
    
    .table-responsive {
        border-radius: 0 0 6px 6px !important;
    }
    
    .evento-actual h4,
    .proximo-evento h4,
    .sin-eventos h4 {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }
    
    .evento-actual h5,
    .proximo-evento h5 {
        font-size: 1rem !important;
        margin-bottom: 6px !important;
    }
    
    .evento-actual,
    .proximo-evento,
    .sin-eventos {
        padding: 12px !important;
        margin: 0 !important;
    }
    
    /* Tablas en móvil - conectadas */
    .table-responsive {
        border-radius: 0 0 6px 6px !important;
        font-size: 0.8rem;
    }
    
    .table-dark thead th {
        padding: 10px 6px;
        font-size: 0.7rem;
    }
    
    .table-dark tbody td {
        padding: 10px 6px;
        font-size: 0.75rem;
        line-height: 1.3;
    }
    
}

/* Móviles muy pequeños */
@media (max-width: 480px) {
    #api_datos {
        border-radius: 4px;
    }
    
    #api_titulo {
        padding: 6px 10px !important;
        margin: 0 !important;
        border-radius: 4px 4px 0 0 !important;
    }
    
    #api_titulo .fs-6 {
        font-size: 0.7rem !important;
    }
    
    .programa-info {
        border-radius: 0 0 4px 4px !important;
    }
    
    .table-responsive {
        border-radius: 0 0 4px 4px !important;
    }
    
    .evento-actual,
    .proximo-evento,
    .sin-eventos {
        padding: 10px !important;
        margin: 0 !important;
    }
    
    .table-dark thead th,
    .table-dark tbody td {
        padding: 8px 4px;
        font-size: 0.7rem;
    }
}

/* MODO DIRECTO-FULL - Maquetación equilibrada */
.container-fluid {
    padding: 0 20px;
}

.container-fluid .row {
    gap: 15px;
    justify-content: center;
}

.container-fluid .col-xl-6 {
    flex: 0 0 calc(50% - 7.5px);
    max-width: calc(50% - 7.5px);
}

.container-fluid #contenedor_datos_api {
    padding: 0 15px;
}

/* Responsive para directo-full */
@media (max-width: 1200px) {
    .container-fluid .col-xl-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 15px;
    }
}



/* FORZAR CONEXIÓN - Eliminar cualquier separación */
#api_titulo + * {
    margin-top: 0 !important;
    border-top: none !important;
}

#api_titulo + .programa-info,
#api_titulo + .table-responsive,
#api_titulo + div {
    border-radius: 0 0 8px 8px !important;
}

/* ============================================
   MEJORAS DE CABECERA Y MENÚ - RESPONSIVIDAD 
   ============================================ */

/* CORRECCIÓN MENÚ ACTIVO EN MÓVIL */
@media only screen and (max-width: 991px) {

	.header-area .classy-navbar .classynav ul li a {
		align-content: center !important;
	}
    .header-area .classy-navbar .classynav ul li a.active {
        border-bottom: none !important;
        background-color: #f5cc00ff !important;
        color: #222627 !important;
        margin-bottom: 8px !important;
        border-radius: 4px;
    }
    
    /* Separación adecuada entre elementos del menú móvil */
    .breakpoint-on .classynav ul li {
        margin-bottom: 2px;
    }
    
    .breakpoint-on .classynav ul li a {
        border-radius: 4px;
        margin: 2px 10px;
    }
}

/* MEJORAS PARA RANGO INTERMEDIO (992px - 1400px) */
@media only screen and (min-width: 992px) and (max-width: 1400px) {
    
    /* Reducir padding horizontal del menú para evitar wrap a dos líneas */
    .header-area .classy-navbar .classynav ul li a {
        padding: 0px 12px !important;
        font-size: 15px !important;
    }
    
    /* Ajustar altura del navbar para dispositivos medianos */
    .header-area .classy-navbar {
        height: 80px;
    }
    
    .header-area .classy-navbar .classynav ul li a {
        height: 69px !important;
        line-height: 80px !important;
    }
    
    /* Optimizar espaciado del contenedor */
    .header-area .classy-navbar {
        padding: 0 10px;
    }
    
    /* Logo más pequeño en rango intermedio */
    .logo-pc {
        max-width: 110px;
        height: auto;
    }
}

/* AJUSTES ESPECÍFICOS PARA 1200px - 1400px */
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
    .header-area .classy-navbar .classynav ul li a {
        padding: 0px 10px !important;
        font-size: 14px !important;
    }
    
    /* Reducir tamaño de iconos en el menú para ganar espacio */
    .ico-menu-inicio .ico-span {
        font-size: 32px;
        top: 9px;
    }
    
    .ico-menu .ico-span {
        font-size: 22px;
        top: 3px;
    }
}

/* MEJORAS PARA PANTALLAS GRANDES (>1400px) */
@media only screen and (min-width: 1401px) {
    .header-area .classy-navbar .classynav ul li a {
        padding: 0px 18px !important;
        font-size: 16px !important;
    }
    
    /* Restaurar tamaños originales en pantallas grandes */
    .ico-menu-inicio .ico-span {
        font-size: 37px;
        top: 11px;
    }
    
    .ico-menu .ico-span {
        font-size: 24px;
        top: 4px;
    }
}

/* TRANSICIONES SUAVES PARA TODOS LOS CAMBIOS */
.header-area .classy-navbar .classynav ul li a {
    transition: all 0.3s ease-in-out;
}

.header-area .classy-navbar .classynav ul li a.active {
    transition: all 0.3s ease-in-out;
}

/* CORRECCIÓN MENÚ ACTIVO PARA TABLETAS */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-area .classy-navbar .classynav ul li a.active {
        border-bottom: 3px solid #f5cc00ff !important;
        background-color: rgba(245, 204, 0, 0.1);
    }
}

/* OPTIMIZACIÓN DEL LOGO EN DIFERENTES TAMAÑOS */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .logo-pc {
        max-width: 100px;
        height: auto;
    }
}

/* ASEGURAR QUE EL MENÚ NO SE WRAPPE EN DOS LÍNEAS */
@media only screen and (min-width: 992px) {
    .classy-navbar {
        flex-wrap: nowrap !important;
    }
    
    .classynav ul {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }
    
    .classynav ul li {
        flex-shrink: 0;
    }
}

/* ===============================
   ESTILOS LOGIN
   =============================== */
/* Animación suave para los collapses */
.collapse {
	transition: height 0.35s ease;
}

/* Estilos para enlaces de colapso */
[data-bs-toggle="collapse"] {
	text-decoration: none;
	transition: color 0.2s ease;
}

[data-bs-toggle="collapse"]:hover {
	color: var(--bs-primary) !important;
}

/* Mejora visual de las tarjetas de información */
.card-body.bg-light {
	border-left: 4px solid var(--bs-info);
}

/* Estilos personalizados para el input de email */
#email_acceso {
	font-size: 1.8rem !important;
	height: 4rem !important;
	padding: 1.5rem 0.75rem 0.5rem !important;
}

/* Ajustar el label del floating input para que se vea bien con el nuevo tamaño */
#email_acceso + label {
	font-size: 1.1rem !important;
	padding: 1rem 0.75rem !important;
}

/* Cuando el input tiene focus o contenido, ajustar el label */
#email_acceso:focus + label,
#email_acceso:not(:placeholder-shown) + label {
	transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
	font-size: 0.9rem !important;
}

/* Estilos para columna informativa */
#columna-informativa {
	opacity: 0;
	transform: translateX(20px);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#columna-informativa:not(.d-none) {
	opacity: 1;
	transform: translateX(0);
}

/* Iconos destacados en características */
#columna-informativa .rounded-circle {
	width: 48px;
	height: 48px;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:all .25s ease;
	border:2px solid #198754;
	border-radius:50%;
	cursor: pointer;
	color:#198754;
}

#columna-informativa .rounded-circle .material-symbols-outlined {
	font-size:2.5rem;
	line-height:1;
}

#columna-informativa .rounded-circle:hover {
	transform:scale(1.1);
	background:#198754;
	color:#fff;
}

/* Efectos de gradiente para las tarjetas */
#columna-informativa .card {
	background: linear-gradient(135deg, #2e1b1b 0%, #cd242c 100%);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,0.2);
	box-shadow: 0 8px 32px rgba(0,0,0,0.1);
	color: white;
}

/* Ajustar colores de texto para el nuevo gradiente */
#columna-informativa .text-primary {
	color: #ffffff !important;
}

#columna-informativa .text-muted {
	color: rgba(255,255,255,0.8) !important;
}

#columna-informativa .fw-semibold {
	color: #ffffff !important;
}

/* Animación para los elementos de características */
#columna-informativa .d-flex {
	opacity: 0;
	transform: translateY(10px);
	animation: slideInUp 0.6s ease forwards;
}

#columna-informativa .d-flex:nth-child(1) { animation-delay: 0.1s; }
#columna-informativa .d-flex:nth-child(2) { animation-delay: 0.2s; }
#columna-informativa .d-flex:nth-child(3) { animation-delay: 0.3s; }
#columna-informativa .d-flex:nth-child(4) { animation-delay: 0.4s; }

@keyframes slideInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Efecto hover en la alerta */
#columna-informativa .alert {
	transition: all 0.3s ease;
	border: none;
	position: relative;
	overflow: hidden;
	background: rgba(255,255,255,0.15) !important;
	color: white !important;
}

#columna-informativa .alert strong {
	color: #ffffff !important;
}

#columna-informativa .alert small {
	color: rgba(255,255,255,0.9) !important;
}

#columna-informativa .alert::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
	transition: left 0.6s;
}

#columna-informativa .alert:hover::before {
	left: 100%;
}

/* Responsividad mejorada */
@media (max-width: 767px) {
	#columna-informativa {
		margin-top: 2rem;
	}
}

/* PÁGINA REDIREGIR - Loader personalizado */

.sicab-loader {
	width: 20px;
	height: 20px;
	border: 3px solid #e3f2fd;
	border-top: 3px solid #0d6efd;
	border-radius: 50%;
	animation: sicab-spin 1s linear infinite;
}

@keyframes sicab-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.card {
	transition: transform 0.2s ease-in-out;
}

.card:hover {
	transform: translateY(-2px);
}

.progress-bar-animated {
	animation: progress-bar-stripes 1s linear infinite;
}