/*jimmypazos.com*/
@import url(header.css);
@import url(banner.css);
@import url(swiper.min.css);
@import url(ilustracion.css);
@import url(servicios.css);
@import url(skills.css);
@import url(clientes.css);
@import url(noticias.css);
@import url(suscripcion.css);
@import url(cinta.css);
@import url(footer.css);

@import url(servicios-generales.css);


@import url(generales-internas.css);
@import url(nos-banner.css);
@import url(blog-post.css);

@import url(con-banner.css);
@import url(blog-banner.css);
@import url(trab-banner.css);
@import url(recla-banner.css);
@import url(termi-cond-banner.css);
@import url(actualiza-datos-banner.css);
@import url(poli-banner.css);
@import url(promociones-banner-post.css);
@import url(promociones-banner.css);

@import url(arbitraje-banner.css);
@import url(pf-banner.css);

@import url(error.css);

@import url(combo.css);
@import url(stecnico.css);

*{
	margin:0;
	padding:0;
    box-sizing: border-box;
    }
a{text-decoration:none} 
a:hover{text-decoration: none;} 
body{background-color: rgb(245, 244, 242);}

#contenedor-general{width: 100%; height: auto; position: relative; top: calc(60vh + 64px); background-color: rgb(245, 244, 242);}

@media (min-width:550px) and (max-width:960px){
    #contenedor-general{top: calc(50vh + 80px);}
}
@media (min-width:0px) and (max-width:549px){
    #contenedor-general{top: calc(550px + 80px);}
}

h1{font-size: 36px; /*font-size: 45px;*/ line-height: 42px; font-family: 'Roboto', sans-serif; font-weight: 500;}
h2{font-size: 28px;}
#b-post-contenedor h3,
#pbp-contenido h4{font-family: 'Roboto', sans-serif; font-weight: 500;}
/* Aplica - header*/
h3{font-size: 17px; line-height: 23px;}
h4{font-size: 22px; line-height: 35px;}
h5{font-size: 25px; line-height: 35px;}
#gen-contenedor h1{line-height: 34px;}

p{font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 14px; line-height: 22px;
color: rgb(36, 30, 18);}

.nos-negrita{font-family: 'Roboto', sans-serif; font-weight: 700;}
.pol-rojo{color: #d81f26; font-family: 'Roboto', sans-serif; font-weight: 700; cursor: pointer;}
.pol-rojo-lineal{color: #d81f26; font-family: 'Roboto', sans-serif; font-weight: 500; cursor: pointer;}
.pol-rojo-lineal:hover{text-decoration: underline;}
.pol-rojo:hover{text-decoration: underline;}
.rojotexto{color: #d81f26 !important; font-family: 'Roboto', sans-serif; font-weight: 500;}
a.m{position: absolute;right: 15px;}

/*botones swiper en el home*/

.swiper-button-next, .swiper-button-prev {
    background-color: #333;
    color: #ffffff;
    border-radius: 50%;
    height: 30px;
    width: 30px;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 15px;
}
.swiper-button-next{right:2px}
.swiper-button-prev{left:2px}

/*modal*/
.video-responsive {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	padding-top: 30px;
	position: relative;
	}
.video-responsive iframe, .video-responsive object, .video-responsive embed {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	}

.videoModalYT{display:block; margin-top:40px;}
.videoModalYT a, .paoc-popup.popupaoc-button{width: auto; height: auto; background-color: #ffffff; transition: 0.4s; cursor: pointer;
padding-top: 16px; padding-bottom: 16px; padding-left: 30px; padding-right: 30px;
border-top-right-radius: 20px; border-bottom-left-radius: 20px;
font-family: 'Roboto', sans-serif; font-weight: 500; color: #161616; margin-top: 20px; font-size: 18px;}
.videoModalYT a:hover,.paoc-popup.popupaoc-button:hover{background: #ffffff; border-top-right-radius: 0px; border-bottom-left-radius: 0px;}



/*formualrio suscripcion en el home*/
        .flecha {
            background-color: #f4f4f4 !important;
            border-radius: 50px !important;
            border: none !important;
            font-size: 16px !important;
            color: #d81f26 !important;
            padding: 8px !important;
            margin-left: -40px !important;
        }
		.container-fluid{
            width: 100%;
		}
        .flecha:hover {
            background-color: #ffddde !important;
        }

        .entrada {
            font-family: 'Roboto', sans-serif !important;
            font-weight: 400 !important;
            color: #161616 !important;
            font-size: 16px !important;
            border: solid 1px #999999 !important;
            padding: 12px !important;
            width: 100% !important;
            outline: none !important;
        }

        .zf-errorMessage {
            color: #d81f26 !important;
        }


/*tabla en pagina vidoe y monitoreo*/

@media screen and (max-width: 768px) {  
    .tabla-responsive {
        width: 100%;
        border: 1px solid #ddd; /* Opcional: Borde para diferenciar la tabla */
        border-radius: 8px; /* Opcional: Bordes redondeados */
        padding: 5px;
        position:relative;
    }

    .tabla-responsive table {
        min-width: 320px; /* Evita que la tabla se colapse en móviles */
        /*white-space: nowrap;  Impide saltos de línea en las celdas */
        width:320px;
          overflow-x: auto; /* Habilita el scroll horizontal en móviles */
          overflow-y:hidden;
        -webkit-overflow-scrolling: touch; /* Suaviza el desplazamiento */
        font-size:12px;
         border-collapse: collapse; /*Elimina espacios entre celdas */
        border-spacing: 0; /*Asegura que no haya separación */
    }
     /* Celdas */
    .tabla-responsive table th,
    .tabla-responsive table td {
        position: relative; /* Asegura que los tooltips puedan posicionarse */
    }

    /* Mejora la apariencia del scroll */
    .tabla-responsive table::-webkit-scrollbar {
        height: 6px;
    }

    .tabla-responsive table::-webkit-scrollbar-thumb {
        background-color: #bbb;
        border-radius: 3px;
    }
    .tabla-responsive table .tooltip-container,
    .tabla-responsive table .titu-cabe-tabla-inicio{
        width: 80px;
    }
    .tabla-responsive table  .tooltip-text {
        margin-left: 110px;
        top:0;
    }
    
     /* Efecto de cebra en móviles */
    .tabla-responsive table tbody tr:nth-child(even) {
        background-color: #f9f9f9; /* Color para filas pares */
    }

    .tabla-responsive table tbody tr:nth-child(odd) {
        background-color: #ffffff; /* Color para filas impares */
    }
    /* Primera columna fija */
    .tabla-responsive table tbody tr td:first-child,
    .tabla-responsive table thead tr th:first-child {
        position: sticky;
        left: 0;
        background: white;
        z-index: 2; /* Mantiene la columna sobre el resto, pero no oculta tooltips */
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    }
}