/* DEFAULTS
----------------------------------------------------------*/

body   
{
    /* Estilos base del body */
    /*margin: 0px;
    padding: 0px;
    width: 1484px;*/
}


.form_a
{
background-color: #E5E5E5;
/*para Firefox*/
-moz-border-radius: 5px 5px 5px 5px;
/*para Safari y Chrome*/
-webkit-border-radius: 5px 5px 5px 5px;
/* para Opera */
border-radius: 5px 5px 5px 5px;

}
.form_a_titulo
{
background-color: #8EBC28;
padding: 10px;
/*para Firefox*/
-moz-border-radius: 5px 5px 5px 5px;
/*para Safari y Chrome*/
-webkit-border-radius: 5px 5px 5px 5px;
/* para Opera */
border-radius: 5px 5px 5px 5px;
}
.form_a_titulo_rojo
{
background-color:orange;
padding: 10px;
/*para Firefox*/
-moz-border-radius: 5px 5px 5px 5px;
/*para Safari y Chrome*/
-webkit-border-radius: 5px 5px 5px 5px;
/* para Opera */
border-radius: 5px 5px 5px 5px;
}

.conderecha
{
background-color: #E5E5E5;
/*para Firefox*/
-moz-border-radius: 5px 5px 5px 5px;
/*para Safari y Chrome*/
-webkit-border-radius: 5px 5px 5px 5px;
/* para Opera */
border-radius: 5px 5px 5px 5px;

}
.conderecha_titulo
{
background-color: #8EBC28;
padding: 10px;
/*para Firefox*/
-moz-border-radius: 5px 5px 5px 5px;
/*para Safari y Chrome*/
-webkit-border-radius: 5px 5px 5px 5px;
/* para Opera */
border-radius: 5px 5px 5px 5px;
}





a:link
{
    color:blue;
    text-decoration:none;
}
a:visited
{
    color:blue;
    text-decoration:none;
}

a:hover
{
   color:blue;
   text-decoration:none;
}

a:active
{
	color:darkgreen;
    text-decoration:none;
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}


/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: black;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/



/* TAB MENU   
----------------------------------------------------------*/


div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #FEE600;
    border: 1px;
    color: Black;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #FCD707;
    color: Black;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #FEE600;
    color: Black;
    text-decoration: none;
}


/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display: block;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo
{
    width: 42%;
}

/* MISC  
----------------------------------------------------------*/

.clear
{
    
    clear: both;
}

.title
{
    display: block;
    float: left;
    text-align: left;
    width: auto;
}


.submitButton
{
    text-align: right;
    padding-right: 10px;
}
.button
{
    margin: 5px;
    text-decoration: none;
    font: bold 1.1em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
    display: inline-block;
    text-align: center;
    color: #3E3E3E;
    
    border: 1px solid #9c9c9c; /* Fallback style */
    border: 1px solid rgba(0, 0, 0, 0.3);            
    
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    
    box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    
}

.button_admin
{
    margin: 1px;
    text-decoration: none;
    font: bold 0.8em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
    display: inline-block;
    text-align: center;
    color: #3E3E3E;
	background-color: chocolate;
    
    border: 1px solid #9c9c9c; /* Fallback style */
    border: 1px solid rgba(0, 0, 0, 0.3);            
    
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    
    box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    
}

.button_suscribirme
{
    margin: 1px;
    text-decoration: none;
    font: bold 0.8em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
    display: inline-block;
    text-align: center;
    color: #3E3E3E;

    
    border: 1px solid #9c9c9c; /* Fallback style */
    border: 1px solid rgba(0, 0, 0, 0.3);            
    
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    
    box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    
}

.button, .button span
{
    -moz-border-radius: .3em;
    border-radius: .3em;
}

.button span
{
    border-top: 1px solid #fff; /* Fallback style */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    padding: 0.5em 2.5em;
    
    /* The background pattern */
    
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
                      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),
                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
    background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                      -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                      -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
                      -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

    /* Pattern settings */
    
    -moz-background-size: 3px 3px;
    -webkit-background-size: 3px 3px;
    background-size: 3px 3px;            
}

.button:hover
{
    box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
}

.button:active
{
    /* When pressed, move it down 1px */
    position: relative;
    top: 1px;
}

.button-naranjo
{
    background: #d46116;
    background: -webkit-gradient(linear, left top, left bottom, from(#DE8E59), to(#d46116) );
    background: -moz-linear-gradient(-90deg, #DE8E59, #d46116);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#DE8E59', endColorstr='#d46116');
}

.button-naranjo:hover
{
    background: #d46116;
    background: -webkit-gradient(linear, left top, left bottom, from(#d46116), to(#DE8E59) );
    background: -moz-linear-gradient(-90deg, #d46116, #DE8E59);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#d46116', endColorstr='#DE8E59');            
}

.button-naranjo:active
{
    background: #d46116;
}


.button-verde
{
    background: #417517;
    background: -webkit-gradient(linear, left top, left bottom, from(#38A42E), to(#417517) );
    background: -moz-linear-gradient(-90deg, #4F8F49, #417517);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4F8F49', endColorstr='#417517');
}

.button-verde:hover
{
    background: #d46116;
    background: -webkit-gradient(linear, left top, left bottom, from(#417517), to(#4F8F49) );
    background: -moz-linear-gradient(-90deg, #417517, #4F8F49);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#417517', endColorstr='#4F8F49');            
}

.button-verde:active
{
    background: #417517;
}

.button-morado
{
    background: #735076;
    background: -webkit-gradient(linear, left top, left bottom, from(#AE83AB), to(#735076) );
    background: -moz-linear-gradient(-90deg, #AE83AB, #735076);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#AE83AB', endColorstr='#735076');
}

.button-morado:hover
{
    background: #735076;
    background: -webkit-gradient(linear, left top, left bottom, from(#A25BB6), to(#AE83AB) );
    background: -moz-linear-gradient(-90deg, #735076, #AE83AB);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#735076', endColorstr='#AE83AB');            
}

.button-morado:active
{
    background: #735076;
}

.button-amarillo
{
    background: #FCD707;
    background: -webkit-gradient(linear, left top, left bottom, from(#EED602), to(#FCD707) );
    background: -moz-linear-gradient(-90deg, #FEE600, #FCD707);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FEE600', endColorstr='#FCD707');
}

.button-amarillo:hover
{
    background: #d46116;
    background: -webkit-gradient(linear, left top, left bottom, from(#FCD707), to(#FEE600) );
    background: -moz-linear-gradient(-90deg, #FCD707, #FEE600);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FCD707', endColorstr='#FEE600');            
}

.button-amarillo:active
{
    background: #FCD707;
}


.boton-guardar {
	font-family: Arial, Helvetica, sans-serif;
	width: 80px;
	border: 1px solid #0087ca;
	border-radius: 4px;
	font-weight: bold;
	color: #FFF;
	background-color: #0087ca;
	text-align: center;
	vertical-align: middle;

}

#campos {
	clear: none;
	float: left;
	width: 100%;
	display: block;
	margin-top: 10px;
	margin-bottom: 10px;
}
.campos-p {
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 10px;
	margin-bottom: 10px;
	border: 1px solid #0087ca;
	border-radius: 4px;
}
.campos-i1 {
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	width: 130px;
	border: 1px solid #0087ca;
	height: 22px;
	border-radius: 4px;
	margin-top: 10px;
}
.campos-i2 {
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	width: 95%;
	margin-bottom: 10px;
	border: 1px solid #0087ca;
	height: 22px;
	border-radius: 4px;
}
.campos-i3 {
	font-family: Arial, Helvetica, sans-serif;
	width: 70%;
	margin-bottom: 10px;
	border: 1px solid #0087ca;
	height: 22px;
	border-radius: 4px;
}
.campos-txt1 {
	margin-bottom: 5px;
	border: 1px solid #0087ca;
	height: 80px;
	border-radius: 4px;
	width: 95%;
}
.campos-horarios {
	margin-bottom: 3px;
	border: 1px solid #0087ca;
	border-radius: 4px;
	margin-top: 3px;
}
.boton-p {
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	width: 80px;
	margin-top: 10px;
	margin-bottom: 10px;
	border: 1px solid #0087ca;
	height: 24px;
	border-radius: 4px;
	font-weight: bold;
	color: #FFF;
	background-color: #0087ca;
	text-align: center;
	margin-left: 20px;
}
.boton-i {
	font-family: Arial, Helvetica, sans-serif;
	width: 150px;
	border: 1px solid #0087ca;
	height: 24px;
	border-radius: 4px;
	font-weight: bold;
	color: #FFF;
	background-color: #0087ca;
	text-align: center;
}
.boton-cerrar {
	float: right;
	font-family: Arial, Helvetica, sans-serif;
	width: 60px;
	border: 1px solid #0087ca;
	height: 20px;
	border-radius: 4px;
	font-weight: bold;
	color: #FFF;
	background-color: #0087ca;
	text-align: center;
	vertical-align: middle;
	clear: left;
}
.boton-guardar {
	font-family: Arial, Helvetica, sans-serif;
	border: 1px solid #0087ca;
	border-radius: 4px;
	font-weight: bold;
	color: #FFF;
	background-color: #0087ca;
	text-align: center;
	vertical-align: middle;
	clear: left;
    margin-left: 1px;
}
.boton-seleccionar {
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	width: 100px;
	border: 1px solid #0087ca;
	height: 18px;
	border-radius: 4px;
	font-weight: bold;
	color: #FFF;
	background-color: #0087ca;
	text-align: center;
	vertical-align: middle;
	clear: left;
	margin-top: 5px;
	margin-bottom: 5px;
}
#botones-p {
	clear: none;
	float: left;
	width: 100%;
	display: block;
	margin-top: 10px;
}

.btnDescargar { 
   background-image:url('../images/descarga.png'); 
   background-color:transparent;
   background-attachment:inherit;
   border: 0px;
    height:28px; 
    width :70px; 
 }
 
 .btnDescargar:hover { 
   background-image:url('../images/descarga.png'); 
   background-color:transparent;
    border: 0px;
    height:28px; 
    width :70px; 

 }

#grilla-ficha {
	clear: none;
	float: left;
	margin-right: 5.2631%;
	margin-left: 5.2631%;
	width: 95%;
	display: block;
	margin-bottom: 20px;
}
.txt-tit-grilla {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	color: #333;
	text-align: center;
	background-color: #CCC;
	border: 1px solid #999;
	height: 24px;
	vertical-align: middle;
}
.txt-txt-grilla {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	font-weight: normal;
	color: #333;
	text-align: center;
	background-color: #f1f1f1;
	border: 1px solid #999;
	height: 60px;
	vertical-align: middle;
}
.txt-bold-ficha {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	color: #333;
	text-align: left;
	height: 20px;
}

#txt-posicion {
	clear: none;
	float: left;
	margin-left: 2.0408%;
	width: 100%;
	display: block;
}
.txt_titulos {
	font-family: exoitalic;
	font-size: 1.2em;
	color: #0087ca;
	text-align: center;
	line-height: normal;
	display: table;
	margin-bottom: 10px;
}
.txt_titulos-p {
	font-family: exoitalic;
	font-size: 1.6em;
	color: #0087ca;
	line-height: 80px;
}
.txt_textos {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	color: #666666;
}

.boton-azul {
	font-family: Arial, Helvetica, sans-serif;
	border: 1px solid #0087ca;
	border-radius: 4px;
	font-weight: bold;
	color: #FFF;
	background-color: #0087ca;
	text-align: center;
	vertical-align: middle;
}
.boton-azul:hover 
{
    background-color: #006DA3;
    border: 1px solid #006DA3;
}

.Venta_Rapida
{
    float: left;
    width:491px;
    background-color: #E5E5E5;
    padding: 10px;
    /*para Firefox*/
    -moz-border-radius: 15px 15px 15px 15px;
    /*para Safari y Chrome*/
    -webkit-border-radius: 15px 15px 15px 15px;
    /* para Opera */
    border-radius: 15px 15px 15px 15px;
    height: 250px;
    }
    
.TablaEmailsBD {
	margin:0px;
	padding:0px;
	width:90%;
	box-shadow: 10px 10px 5px #888888;
	
	-moz-border-radius-bottomleft:8px;
	-webkit-border-bottom-left-radius:8px;
	border-bottom-left-radius:8px;
	
	-moz-border-radius-bottomright:8px;
	-webkit-border-bottom-right-radius:8px;
	border-bottom-right-radius:8px;
	
	-moz-border-radius-topright:8px;
	-webkit-border-top-right-radius:8px;
	border-top-right-radius:8px;
	
	-moz-border-radius-topleft:8px;
	-webkit-border-top-left-radius:8px;
	border-top-left-radius:8px;
}

.TablaEmailsBD table{
    border-collapse: collapse;
    border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}


.TablaEmailsBD tr:last-child td:last-child {
	-moz-border-radius-bottomright:8px;
	-webkit-border-bottom-right-radius:8px;
	border-bottom-right-radius:8px;
}
.TablaEmailsBD table tr:first-child td:first-child {
	-moz-border-radius-topleft:8px;
	-webkit-border-top-left-radius:8px;
	border-top-left-radius:8px;
}
.TablaEmailsBD table tr:first-child td:last-child {
	-moz-border-radius-topright:8px;
	-webkit-border-top-right-radius:8px;
	border-top-right-radius:8px;
}.TablaEmailsBD tr:last-child td:first-child{
	-moz-border-radius-bottomleft:8px;
	-webkit-border-bottom-left-radius:8px;
	border-bottom-left-radius:8px;
}.TablaEmailsBD tr:hover td{
	/* Efecto hover para filas de tabla */
}
.TablaEmailsBD tr:nth-child(odd){ background-color:#ffffff; }
.TablaEmailsBD tr:nth-child(even)    { background-color:#f7f6f3; }
.TablaEmailsBD td{vertical-align:middle;
	
	
	border:0px solid #0070c0;
	border-width:0px 0px 0px 0px;
	padding:10px;
	font-size:12px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}.TablaEmailsBD tr:last-child td{
	border-width:0px 0px 0px 0px;
}.TablaEmailsBD tr td:last-child{
	border-width:0px 0px 0px 0px;
}.TablaEmailsBD tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.TablaEmailsBD tr:first-child td{
	background:-o-linear-gradient(bottom, #0070c0 5%, #0070c0 100%);	
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0070c0), color-stop(1, #038BD7) );
	background:-moz-linear-gradient( center top, #0070c0 5%, #0070c0 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#038BD7", endColorstr="#038BD7");	
	background: -o-linear-gradient(top,#0070c0,#0070c0);


	background-color:#0070c0;
	border:0px solid #0070c0;
	border-width:0px 0px 0px 0px;
	font-size:10px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}

.TablaEmailsBD tr:first-child td:first-child{
	border-width:0px 0px 0px 0px;
}
.TablaEmailsBD tr:first-child td:last-child{
	border-width:0px 0px 0px 0px;
}

.FormularioDatos
{  
background-color: #F2F2F2;
width:90%;
padding: 0px;
/*para Firefox*/
-moz-border-radius: 5px 5px 5px 5px;
/*para Safari y Chrome*/
-webkit-border-radius: 5px 5px 5px 5px;
/* para Opera */
border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 10px 10px 10px #484848; 
-webkit-box-shadow: 10px 10px 10px #484848;
box-shadow: 10px 10px 10px #484848; 
}

.TituloDatos 
{ 
background-color: #8EBC28;
height: 20px;
padding: 10px;
/*para Firefox*/
-moz-border-radius: 5px 5px 5px 5px;
/*para Safari y Chrome*/
-webkit-border-radius: 5px 5px 5px 5px;
/* para Opera */
border-radius: 5px 5px 5px 5px;
}

.tabs-menu {
    width:80%;
    padding:0px;
    padding-bottom:0px;
}

.tabs-menu li {
    height: 30px;
    line-height: 30px;
    float: left;
    margin-right: 0px;
    background-color: #fff;
    border-top: 1px solid #d4d4d1;
    border-bottom: 1px solid #d4d4d1;
    border-right: 1px solid #d4d4d1;
    border-left: 1px solid #d4d4d1;
    
     /*ARRIBA IZQUIERDA*/
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px;
	border-top-left-radius:5px;
	/*ARRIBA DERECHA*/
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px;
	border-top-right-radius:5px;
	
    list-style-type: none;
    
}

.tabs-menu li.current {
    position: relative;
    background-color: #0087ca;
    color: #0087ca;
    z-index: 5;
}

.tabs-menu li a {
    padding: 10px;
    text-transform: uppercase;
    color: #0087ca;
    text-decoration: none; 
}

.tabs-menu .current a {
    color: white;
}

.tab {
    border: 1px solid #d4d4d1;
    background-color: #fff;
    float: left;
    margin-bottom: 20px;
    padding:0px;
    width: 100%;
    
	/*ARRIBA DERECHA*/
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px;
	border-top-right-radius:5px;
	/*ABAJO IZQUIERDA*/
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px;
	border-bottom-left-radius:5px;	
	/*ABAJO DERECHA*/
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	border-bottom-right-radius:5px;
}

.tab-content 
{
    padding: 5px;
    display: none;
    width:100%;
}

#tab-1 {
 display: block;   
}

/* ========================================
   ESTILOS PARA PAGINADOR Y BÚSQUEDA
   ======================================== */

/* Contenedor de paginación */
.paginacion-container {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Estilos para el paginador */
.paginador {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 20px;
}

.paginador a {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 2px;
    background: #ffffff;
    border: 1px solid #007bff;
    color: #007bff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.paginador a:hover {
    background: #007bff;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,123,255,0.3);
}

.paginador a.activo {
    background: #007bff;
    color: #ffffff;
    border-color: #0056b3;
}

.paginador a.deshabilitado {
    background: #e9ecef;
    color: #6c757d;
    border-color: #dee2e6;
    cursor: not-allowed;
}

.paginador a.deshabilitado:hover {
    background: #e9ecef;
    color: #6c757d;
    transform: none;
    box-shadow: none;
}

.paginador .separador {
    color: #6c757d;
    font-weight: bold;
    margin: 0 5px;
}

/* Contenedor de búsqueda */
.busqueda-container {
    background: #ffffff;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.busqueda-container h4 {
    color: #495057;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 600;
}

/* Grupo de búsqueda por ticket */
.busqueda-ticket {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #28a745;
}

.busqueda-ticket input[type="text"] {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.busqueda-ticket input[type="text"]:focus {
    outline: none;
    border-color: #28a745;
    box-shadow: 0 0 0 2px rgba(40,167,69,0.2);
}

.busqueda-ticket input[type="text"]::placeholder {
    color: #6c757d;
    font-style: italic;
}

/* Botón "Ir" - Más prominente */
.btn-ir {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-ir:hover {
    background: linear-gradient(135deg, #218838 0%, #1ea085 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
}

.btn-ir:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

/* Grupo de búsqueda general */
.busqueda-general {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 10px;
    border-left: 4px solid #007bff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.busqueda-general input[type="text"] {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.busqueda-general input[type="text"]:focus {
    outline: none;
    border-color: #6c757d;
    box-shadow: 0 0 0 2px rgba(108,117,125,0.2);
}

.busqueda-general input[type="text"]::placeholder {
    color: #6c757d;
    font-style: italic;
}

/* Botón "Buscar" - Menos prominente */
.btn-buscar {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.btn-buscar:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4);
}

.btn-buscar:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

/* Checkboxes mejorados */
.opciones-busqueda {
    display: flex;
    gap: 25px;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border-radius: 8px;
    border-left: 4px solid #17a2b8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-top: 15px;
}

.opciones-busqueda label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
    color: #2c3e50;
    transition: all 0.3s ease;
    font-size: 14px;
    white-space: nowrap;
}

.opciones-busqueda label:hover {
    color: #17a2b8;
    transform: translateX(2px);
}

/* Mejorar tooltips de los checkboxes */
.opciones-busqueda label {
    position: relative;
}

.opciones-busqueda label[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: normal;
    white-space: normal;
    max-width: 300px;
    width: max-content;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
    line-height: 1.4;
}

.opciones-busqueda label[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    margin-bottom: 5px;
    z-index: 10000;
}

.opciones-busqueda input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #17a2b8;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
    .paginador {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .busqueda-ticket,
    .busqueda-general {
        flex-direction: column;
        align-items: stretch;
    }
    
    .opciones-busqueda {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ========================================
   ESTILOS PARA POPUP DE BÚSQUEDA
   ======================================== */

/* Botón de navegación */
.btn-navegacion {
    background: #007bff;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 10px;
}

.btn-navegacion:hover {
    background: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,123,255,0.3);
}

/* Popup de búsqueda */
.popup-busqueda {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.popup-contenido {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: popupFadeIn 0.3s ease;
    border: 1px solid #e9ecef;
}

/* Estilo específico para el popup de RUT/Contrato */
#popup-buscar-rut-contrato .popup-contenido {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid #dee2e6;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

/* Estilo específico para el popup de Navegación y Búsqueda */
#popup-busqueda .popup-contenido {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid #dee2e6;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    max-width: 600px;
    width: 95%;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.popup-header h4 {
    margin: 0;
    color: #495057;
    font-size: 18px;
    font-weight: 600;
}

.btn-cerrar {
    background: none;
    border: none;
    font-size: 24px;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.btn-cerrar:hover {
    background: #e9ecef;
    color: #495057;
}

/* Ajustar estilos del formulario dentro del popup */
.popup-contenido .busqueda-container {
    background: none;
    border: none;
    box-shadow: none;
    padding: 25px;
    margin: 0;
}

/* Estilos para las secciones de búsqueda */
.seccion-busqueda {
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.seccion-busqueda:last-child {
    margin-bottom: 0;
}

.titulo-seccion {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #0070c0;
    padding-bottom: 8px;
}

.popup-contenido .busqueda-container h4 {
    display: none;
}

.popup-contenido .busqueda-ticket,
.popup-contenido .busqueda-general {
    margin-bottom: 20px;
}

.popup-contenido .busqueda-ticket label,
.popup-contenido .busqueda-general label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
}

.popup-contenido .busqueda-ticket input[type="text"],
.popup-contenido .busqueda-general input[type="text"] {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.popup-contenido .busqueda-ticket input[type="text"]:focus,
.popup-contenido .busqueda-general input[type="text"]:focus {
    outline: none;
    border-color: #0070c0;
    box-shadow: 0 0 0 3px rgba(0, 112, 192, 0.15);
    transform: translateY(-1px);
}

.popup-contenido .busqueda-ticket input[type="text"]::placeholder,
.popup-contenido .busqueda-general input[type="text"]::placeholder {
    color: #95a5a6;
    font-style: italic;
}

.popup-contenido .opciones-busqueda {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

/* Estilos específicos para el popup de búsqueda de RUT/Contrato */
.busqueda-rut-contrato {
    padding: 25px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.busqueda-rut-contrato label {
    display: block;
    margin-bottom: 12px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 16px;
    text-align: left;
}

.busqueda-rut-contrato input[type="text"] {
    width: 100%;
    padding: 15px 18px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.busqueda-rut-contrato input[type="text"]:focus {
    outline: none;
    border-color: #0070c0;
    box-shadow: 0 0 0 3px rgba(0, 112, 192, 0.15);
    transform: translateY(-1px);
}

.busqueda-rut-contrato input[type="text"]::placeholder {
    color: #95a5a6;
    font-style: italic;
}

/* Mejorar el header del popup de RUT/Contrato */
#popup-buscar-rut-contrato .popup-header {
    background: linear-gradient(135deg, #0070c0 0%, #038BD7 100%);
    color: white;
    border-bottom: 3px solid #005a9e;
}

#popup-buscar-rut-contrato .popup-header h4 {
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#popup-buscar-rut-contrato .btn-cerrar {
    color: white;
    background: rgba(255,255,255,0.2);
}

#popup-buscar-rut-contrato .btn-cerrar:hover {
    background: rgba(255,255,255,0.3);
    color: white;
}

/* Mejorar el header del popup de Navegación y Búsqueda */
#popup-busqueda .popup-header {
    background: linear-gradient(135deg, #0070c0 0%, #038BD7 100%);
    color: white;
    border-bottom: 3px solid #005a9e;
}

#popup-busqueda .popup-header h4 {
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#popup-busqueda .btn-cerrar {
    color: white;
    background: rgba(255,255,255,0.2);
}

#popup-busqueda .btn-cerrar:hover {
    background: rgba(255,255,255,0.3);
    color: white;
}

/* Mejorar el botón consultar */
#boton_consultar_rut_contrato {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    width: 100%;
}

#boton_consultar_rut_contrato:hover {
    background: linear-gradient(135deg, #218838 0%, #1ea085 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
}

#boton_consultar_rut_contrato:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

/* ========================================
   ESTILOS PARA HOVER EN FILAS DE TICKETS (SOLO DESKTOP)
   ======================================== */

/* Hover para filas de tickets DESKTOP - Naranja claro (#f9e9d2) */
.row:not(.d-xl-none) > div[style*="background-color: #f9e9d2"]:hover,
.row:not(.d-xl-none) > div[style*="background-color: #f9e9d2"]:hover ~ div[style*="background-color: #f9e9d2"],
.row:not(.d-xl-none) > div[style*="background-color: #f9e9d2"]:hover + div[style*="background-color: #f9e9d2"],
.row:not(.d-xl-none) > div[style*="background-color: #f9e9d2"]:hover ~ div[style*="background-color: #f9e9d2"]:before,
.row:not(.d-xl-none) > div[style*="background-color: #f9e9d2"]:hover ~ div[style*="background-color: #f9e9d2"]:after {
    background-color: #f0d4a0 !important;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}

/* Hover para filas de tickets DESKTOP - Naranja oscuro (#f0c98e) - SLA vencido */
.row:not(.d-xl-none) > div[style*="background-color: #f0c98e"]:hover,
.row:not(.d-xl-none) > div[style*="background-color: #f0c98e"]:hover ~ div[style*="background-color: #f0c98e"],
.row:not(.d-xl-none) > div[style*="background-color: #f0c98e"]:hover + div[style*="background-color: #f0c98e"] {
    background-color: #e6b874 !important;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.15);
}

/* Hover para filas de tickets DESKTOP - Verde (#e6ffcc) - Ya leído */
.row:not(.d-xl-none) > div[style*="background-color: #e6ffcc"]:hover,
.row:not(.d-xl-none) > div[style*="background-color: #e6ffcc"]:hover ~ div[style*="background-color: #e6ffcc"],
.row:not(.d-xl-none) > div[style*="background-color: #e6ffcc"]:hover + div[style*="background-color: #e6ffcc"] {
    background-color: #d4f2b8 !important;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}

/* Hover para filas de tickets DESKTOP - Azul (#3EC3F4) - Privado */
.row:not(.d-xl-none) > div[style*="background-color: #3EC3F4"]:hover,
.row:not(.d-xl-none) > div[style*="background-color: #3EC3F4"]:hover ~ div[style*="background-color: #3EC3F4"],
.row:not(.d-xl-none) > div[style*="background-color: #3EC3F4"]:hover + div[style*="background-color: #3EC3F4"] {
    background-color: #2bb8e8 !important;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.15);
}

/* Hover para filas de tickets DESKTOP - Gris (#8c8c8c) - Estado 4 */
.row:not(.d-xl-none) > div[style*="background-color: #8c8c8c"]:hover,
.row:not(.d-xl-none) > div[style*="background-color: #8c8c8c"]:hover ~ div[style*="background-color: #8c8c8c"],
.row:not(.d-xl-none) > div[style*="background-color: #8c8c8c"]:hover + div[style*="background-color: #8c8c8c"] {
    background-color: #7a7a7a !important;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

/* Hover para filas de tickets DESKTOP - Azure - Finalizado */
.row:not(.d-xl-none) > div[style*="background-color: azure"]:hover,
.row:not(.d-xl-none) > div[style*="background-color: azure"]:hover ~ div[style*="background-color: azure"],
.row:not(.d-xl-none) > div[style*="background-color: azure"]:hover + div[style*="background-color: azure"] {
    background-color: #e6f3ff !important;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}

/* SOLUCIÓN ALTERNATIVA: Hover en la fila completa usando :focus-within */
.row:not(.d-xl-none):focus-within > div[style*="background-color: #f9e9d2"] {
    background-color: #f0d4a0 !important;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}

.row:not(.d-xl-none):focus-within > div[style*="background-color: #f0c98e"] {
    background-color: #e6b874 !important;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.15);
}

.row:not(.d-xl-none):focus-within > div[style*="background-color: #e6ffcc"] {
    background-color: #d4f2b8 !important;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}

.row:not(.d-xl-none):focus-within > div[style*="background-color: #3EC3F4"] {
    background-color: #2bb8e8 !important;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.15);
}

.row:not(.d-xl-none):focus-within > div[style*="background-color: #8c8c8c"] {
    background-color: #7a7a7a !important;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

.row:not(.d-xl-none):focus-within > div[style*="background-color: azure"] {
    background-color: #e6f3ff !important;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}

/* Cursor pointer para indicar que es clickeable (SOLO DESKTOP) */
.row:not(.d-xl-none) > div[style*="background-color"] {
    cursor: pointer;
}

/* Efecto de transición suave para elementos desktop */
.row:not(.d-xl-none) > div {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ========================================
   CLASES CSS PARA JAVASCRIPT
   ======================================== */

/* Clases para hover de fila completa */
.row-hover-naranja-claro > div {
    background-color: #f0d4a0 !important;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}

.row-hover-naranja-oscuro > div {
    background-color: #e6b874 !important;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.15);
}

.row-hover-verde > div {
    background-color: #d4f2b8 !important;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}

.row-hover-azul > div {
    background-color: #2bb8e8 !important;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.15);
}

.row-hover-gris > div {
    background-color: #7a7a7a !important;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

.row-hover-azure > div {
    background-color: #e6f3ff !important;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}

/* ========================================
   DEBUG COMPLETADO - BORDES ELIMINADOS
   ======================================== */

/* ========================================
   ACTUALIZACIÓN: Efecto hover implementado (FILA COMPLETA CON JS MEJORADO)
   Fecha: 2024-12-19 17:45:00
   ======================================== */