:root{
    --color1:  rgb(9,9,121);
    --color2:  rgb(50,100,169);
    --color3:  rgb(0,212,255);
    --color4: rgba(209,209,209,1);
    --blanco: rgba(255,255,255,1);

    --color1_bg:  rgb(9,9,121);
    --color1_1_bg:  rgba(9,9,121,0.7);
    --color2_bg:  rgba(67,148,208, 0.6);
    --color2_2_bg:  rgba(67,148,208, 0.7);
    --color2_2_bg:  rgba(67,148,208, 0.8);
    --color3_bg:  rgba(191, 184, 218,0.6);
    --color4_bg: rgba(50,100,169,0.7);
    --color4_4_bg: rgba(50,100,169,0.8);
    --color5_bg: rgba(51,83,158,0.6);
    --blanco_bg: rgba(255,255,255,0.6);
    --negro: rgba(0,0,0,1);

    --color1_tx:  rgb(9,9,121);
    --color1_1_tx:  rgb(182, 85, 147);
    --color1_1_tx:  rgb(165,103,142);
    --color2_tx:  rgb(191, 184, 218);
    --color4_tx: rgb(50,100,169);
    --color5_tx: rgb(51,83,158);
    --blanco_tx: rgb(255,255,255);


}



input[readonly]{
    background-color:transparent;
    border: 0;
    font-size: 1em;
}

.gris_dc{
    background: rgba(226,226,226,1);
    background: -moz-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 35%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(226,226,226,1)), color-stop(35%, rgba(219,219,219,1)), color-stop(51%, rgba(209,209,209,1)), color-stop(100%, rgba(254,254,254,1)));
    background: -webkit-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 35%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 35%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 35%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
    background: linear-gradient(135deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 35%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=1 );
}


.color_deg_1{
    background: rgba(32,124,229,0.75);
    background: -moz-linear-gradient(45deg, rgba(32,124,229,0.75) 0%, rgba(30,117,184,0.65) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(32,124,229,0.75)), color-stop(100%, rgba(30,117,184,0.65)));
    background: -webkit-linear-gradient(45deg, rgba(32,124,229,0.75) 0%, rgba(30,117,184,0.65) 100%);
    background: -o-linear-gradient(45deg, rgba(32,124,229,0.75) 0%, rgba(30,117,184,0.65) 100%);
    background: -ms-linear-gradient(45deg, rgba(32,124,229,0.75) 0%, rgba(30,117,184,0.65) 100%);
    background: linear-gradient(45deg, rgba(32,124,229,0.75) 0%, rgba(30,117,184,0.65) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#207ce5', endColorstr='#1e75b8', GradientType=1 );
 
}




@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    background-image: url("../img/logo_3.png");
    background-repeat: no-repeat, repeat;
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: auto auto;
    background-attachment: fixed;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    position: fixed;
    width: 100%;
    padding: 1px 10px 1px 0px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 0px;
    box-shadow: 1px 1px 3px rgba(32,124,229, 0.1);
}

.navbar .container-fluid {
padding-left: 0px !important;

}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}



#sidebar {
    width: 250px;
    position: fixed;
    top: 0;
    left: -250px;
    height: 100vh;
    z-index: 9999;
    background: var( --color2);
    color: #fff;
    transition: all 0.3s;
    overflow-y: scroll;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

#sidebar.active {
    left: 0;
}

#dismiss {
    width: 38px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: var( --color2);
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 10px 0 0 0;
}

#dismiss:hover {
    background: #fff;
    color: var( --color2);
}

.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.overlay.active {
    display: block;
    opacity: 1;
}

#sidebar .sidebar-header {
    padding: 4px 1px 4px 1px;
    background: var( --color1);
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#titulo_menu_izq h3{
    margin-bottom: 0px !important;
    font-family: roboto;
    font-size: 1.5rem;
    font-weight: 450;
    letter-spacing: 3px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

#sidebar ul li a:hover {
    color: var( --color2);
    background: #fff;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
    background: var( --color1);
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: var( --color1);
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.pentrar {
    background: #fff;
    color: var( --color2);

}

a.article,
a.article:hover {
    background: var( --color1) !important;
    color: #fff !important;
}

#sidebarCollapse{
    margin: 0px !important;
    padding: 5px !important;
}

#sidebarCollapse_btn{
    margin: 0px 6px 0px 0px !important;
    padding: 0px 10px 0px 10px !important;
    height: 40px !important;
    background-color: var(--color2) !important;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 0 10px 10px 0;
}

#sidebarCollapse_btn:hover {
    background-color: var(--blanco) !important;
    color: var( --color2);
}

.btn-dark{
    padding: 5px !important;
}

div#sidebarCollapse{
    margin: 3px 3px 3px 3px !important;
    padding: 0px 3px 0px 3px !important;
}

h5 {
    margin-bottom: 0px !important;
    color: rgb(61, 59, 109);
    font-size: 0.9rem !important;
    font-weight: 600;
    font-family: roboto;
}

.texto_pequenio {
    margin-bottom: 0px !important;
    color: rgb(61, 59, 109);
    font-size: 0.7rem !important;
}

 
#content {
    width: 100%;
    padding: 0px;
    /* min-height: 100vh; */
    transition: all 0.3s;
    /* position: absolute; */
    /* top: 0; */
    /* right: 0; */
}

/***********************************************/
.centrar_item{
    display: flex;
    justify-content: center;
    align-items: center;
}

.texto_centrado {
    text-align: center !important;
    align-content: center;
}

/**********************************************/

/*********** INICIO VIDEO BACKGROUND ***********/

.header{
    
    height: 100vh;

  
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
/* 
  background: rgba(75,165,174,0.18);
  background: -moz-radial-gradient(center, ellipse cover, rgba(75,165,174,0.18) 0%, rgba(12,55,123,0.38) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(75,165,174,0.18)), color-stop(100%, rgba(12,55,123,0.38)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(75,165,174,0.18) 0%, rgba(12,55,123,0.38) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(75,165,174,0.18) 0%, rgba(12,55,123,0.38) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(75,165,174,0.18) 0%, rgba(12,55,123,0.38) 100%);
  background: radial-gradient(ellipse at center, rgba(75,165,174,0.18) 0%, rgba(12,55,123,0.38) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ba5ae', endColorstr='#0c377b', GradientType=1 )
 */
}

.video-background{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
}

@media (min-aspect-ratio:16/9){

    .video-background{
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio:16/9){

    .video-background{
        width: auto;
        height: 100%;
    }
}

.logo{
    margin: 5px;
    height: 40px;
}

.logo_menu{
    margin: 0px 0px 10px 0px;
    width: 60%;
    height: auto;
}

.caja_logo{
    margin-top: 0px !important;
    padding: 0px !important;
}



.bienbenido_msg{
    position: relative;
    text-align: center;
    font-family: roboto;
    color: #fff !important;
    top: 100px;
}

.bienbenido_msg h1{
    font-size: 4.7rem;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 0px;
    color: var(--blanco) !important;
}

.bienbenido_msg h3{
    font-size: 2rem;
    font-weight: 250;
    letter-spacing: 2px;
    margin-bottom: 5px;
    font-family: roboto;
}

.bienbenido_msg h4{
    font-size: 1.5rem;
    font-weight: 100;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.bienbenido_msg p{
    font-size: 0.9rem;
    font-weight: 300;
    letter-spacing: 10px;
    margin-bottom: 10px;
    color: #d41616;
    font-family: noto-sans;
}
.bienbenido_msg img{
    margin: 0px 0px 10px 0px;
    width: 200px;
    height: auto;
}
/*********** FIN VIDEO BACKGROUND ************/


#portada_bt_entrar{
    max-width: 350px;
    font-size: 1.5rem !important;
    font-weight: 350 !important;
    color: coral;
    margin: 0px 5px 15px 5px !important;
    padding: 7px 22px;
    background: #fff;
    color: var( --color2);
}

#portada_bt_entrar:hover{
    background: coral;
    color: var( --blanco);
    transition: -5s;
}

#videotutorial{
    max-width: 350px;
    font-size: 1.5rem !important;
    font-weight: 350 !important;
    color: coral;
    margin: 0px 5px 15px 5px !important;
    padding: 7px 22px;
    background: #fff;
    color: var( --color2);
}

#videotutorial:hover{
    background: coral;
    color: var( --blanco);
    transition: -5s;
}



/*************INICIO LOGIN ****************/
#caja_clave {
    display: none;
}

.enlace {
    color: var( --negro);
}

#login {
    
    border-radius: 5px;
    min-height: 100vh;

    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);

}



#login > div {
    
    border: 0px solid #000080;
    box-shadow: 2px 2px 7px var( --color1);
    border-radius: 5px;
    background-color: #ffffff;
    padding: 1em 1em 1em 1em;
    color: #d9480f;
}

#login{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0px;

    grid-template-areas:
    ". b b ." 
    ". a a ."
    ". a a ."   
    ". a a ."
    ". a a ."  
    ". a a ."   
    ". a a ."
    ". a a ."  
    ". c c .";
}

#encabezado_formulario_login{
    grid-area: b;
    margin-bottom: 0px !important;
    align-self: center;
    justify-self: center;
    min-width: 350px !important;
    height: 240px !important;

}

#formulario_login{
    /* display: none; */
    grid-area: a;
    align-self: center;
    justify-self: center; 
    min-width: 350px;   
    min-height: 185px;
}



#msg{
    grid-area: c;
    margin-bottom: 0px !important;
    align-self: center;
    justify-self: center;
    min-width: 350px !important;
    height: 10px !important;  
}

#msg{
    display: none;
    text-align: center;
    font-family: monospace;
    color: #000 !important;
    border: 0px solid #000080;
    box-shadow: 2px 2px 7px transparent !important;
    border-radius: 5px;
    background-color: transparent !important;
    margin-top: -150px;
}

.logo{
    width: 150px;
    height: auto;
    padding-right: 1px;
}

/********** FORMULARIO LOGIN *************/

.btn-l {
    background-color: var( --color1) !important;
    border: none;
    color: white;
    padding-top: 6px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
}

.btn-l:hover {
    
    background-color: var( --color2) !important;
    box-shadow: 2px 2px 7px var( --color4) !important;
    color: white;
    border-color:#cccccc !important;
    outline: 0 !important;
    text-decoration: none;
}

.btn-l:focus {
    outline: none !important;
    border-color: #cccccc !important;
}

.btn-l:active{
    outline: none !important;
    border-color: #cccccc !important;
    background-color: var( --color3) !important;
}

.alert{
    text-align: center !important;
}

.responsive {
    width: 100px;
    height: auto;
  }

.previsualizar{
    width: 100%;
    height: auto; 
}  

#l_encabezado{
    display: grid;
    grid-template-columns: 50px auto 200px;
    grid-gap: 2px;
    background-color:rgb(71,204,202);
    padding: 10px;
}
#l_encabezado > div{

    text-align: left;
    padding: 12px 0;
}

.e-item1{
    padding-top: 10px;
    padding-left: 20px;
}

#l_titulo{
    display: grid;
    grid-template-rows: 30px 35px;
    grid-gap: 0px;
    background-color:rgb(255, 255, 255);
    padding: 10px;
}
#l_titulo > div{
    /*background-color: rgba(245, 19, 19, 0.4);*/
    text-align: center;
    vertical-align: bottom;
    font-family: noto-sans;
    font-size: 1.4rem;
    color: rgb(71,204,202);
    padding: 0px 0;

}

#l_cuerpo{
    display: grid;
    grid-template-columns: 53% 47%;
    grid-gap: 0px;

    padding: 0px 0;
    min-height: 80vh;
}

#l_cuerpo > div{
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 8px 0;

}

.e-item2{
    padding-top: 10px  !important;
    padding-left: 3px !important;
}

.e-item3{
    padding-top: 12px  !important;
    text-align: right !important;
}

.l_icono{
    color: rgb(255,255,255) !important;
    font-size: 1.5em;
    
}

.l_icono2{
    color: rgb(255,255,255) !important;
    font-size: 1.3em;
    margin-right: 15px;
    text-decoration: none;
}

.l_icono a:hover{
    text-decoration: none;
}


.container1 {
    height: 90%;
    display: grid;

 }

 .container2 {
    height: 90%;
    display: grid;
    padding-right: 40px;
 }

.centered-item1 {
    margin: auto;

    clear: none;
    float: right!important;

    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-gap: 10px;
    padding: 2px 0;
    width: 90%;
    min-height: 350px;
    max-width: 645px;
}

.centered-item2 {
    margin: auto;
    /*border: 1px solid rgb(20, 87, 233);*/
    clear: none;
    float: right!important;

    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-gap: 10px;
    padding: 2px 0;
    width: 77%;
    min-height: 400px;
    background-color: #fff;
    padding-left: 40px;
    padding-right: 40px;
    box-shadow: 2px 2px 7px rgba(201, 201, 201, 0.75);
}

.centered-item{
    padding-left: 40px;
    padding-right: 30px;  
}


.l-cuerpo-izq{
    display: grid;
    grid-template-columns: 50px auto;
    grid-gap: 10px;
    padding: 0px 0; 
}

.l-cuerpo-izq-item1{
    text-align: center;
    padding: 10px 0;
    text-align: left;
    padding-left: 10px;
}

.l-cuerpo-izq-item2{
    text-align: center;
    padding: 0px 0;
    text-align: left;
    padding-left: 0px;
}


.label_titulo{
    font-weight: 500;
    display: block;
    font-family: "noto-sans";
    font-size: 1rem;
}

.theme_color {
    color: rgb(71,204,202) !important;
}

.iColor{
    background-color: rgb(71,204,202) !important;
}

.subtext{
    font-size: 0.9rem;
    font-family: "noto-sans-regular";
    color: #757575;
}


.isesion{
    padding-bottom: 3px;
    padding-top: 10px;
    font-size: 1.58rem !important;
    text-align: center;
    line-height: normal;
    font-weight: 600;
    font-size: 1.1rem;
    font-family: "roboto";
    color: #757575;
}


.l-cuerpo-der{
    display: grid;
    grid-template-columns: 30px auto;
    grid-gap: 10px;
    /*background-color:rgb(71,204,202);*/
    padding: 2px 0; 
}

.l-cuerpo-der-item1{
    text-align: center;
    padding: 6px 0;
    padding-bottom: 10px;

    text-align: left;
    padding-left: 0px;
}

.l-cuerpo-der-item2{
    text-align: center;
    padding: 0px 0;

    text-align: left;
    padding-left: 0px;
}

.isprop{
    width: 90%;
    height: auto;  
}

.inputpro{
    font-size: 0.9rem;
}

.texto_pequenio {
    margin-bottom: 0px !important;
    color: rgb(61, 59, 109);
    font-size: 0.8rem !important;
}

/********* FIN FORMULARIO LOGIN **********/

/************* FIN LOGIN ****************/

/************* INICIO DASHBOARD ****************/

#total_centros {
    padding: 0px !important;
}

#total_centros .row{
    padding: 0px !important;
}

.ventana{
    padding-bottom: 0px !important;
    width: 90%;
    
}

.tarjeta6 {
    padding-top: -10px !important;
    padding-bottom: 0px !important;
    margin-top: 0px;
    background-color: transparent !important;
}
.tarjeta6 div {
    padding-bottom: 0px !important;
    margin-top: -10px;
    background-color: transparent !important;
}
.tarjeta6 .d-block {
    padding-bottom: 0px !important;
    margin-top: -10px;
    background-color: transparent !important;
}

.tarjeta6 #total_centros {
    padding-bottom: 0px !important;
    padding-top: 10px !important;
    margin-top: 0px !important;
    background-color: transparent !important;
    max-height: 40px;
}
.tarjeta6 #total_electores {
    padding-bottom: 0px !important;

  
    background-color: transparent !important;
    max-height: 40px;
}


/************* FIN DASHBOARD ****************/



/************ INICIO CALL CENTER ***********/
#btn_callcenter_consultar {
    background-color: #4CAF50;
    color: black;
    font-size: 1.0em;
    padding: 0.4em 1em;
}

#btn_callcenter_finalizar {
    background-color: #4CAF50 !important;
    color: black;
    font-size: 1.0em;
    padding: 0.4em 1em;
}

.container {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espaciado entre filas */
}

.radio-row {
    display: flex;
    align-items: center;
    gap: 10px; /* Espaciado entre título y botones */
}

/* Títulos con el mismo ancho basado en el más largo */
.label_titulo {
    font-size: 1rem;
    font-weight: bold;
    color: #000080;
    width: 200px; /* Ajustar según el título más largo */
    text-align: right;
    padding-right: 10px;
}

/* Grupo de radios alineados */
.radio-group {
    display: flex;
    gap: 1em; /* Espaciado entre botones */
    align-items: center;
}

/* Ocultar el input de radio */
input[type="radio"] {
    display: none;
}

/* Botón de radio */
.label_radio {
    position: relative;
    color: #000080;
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    border: 3px solid #000080;
    padding: 0.5em 0.5em;
    border-radius: 0.3em;
    width: 160px; /* Asegurar que todos tengan el mismo tamaño */
    text-align: center;
    transition: background 0.3s ease-in-out;
}

/* Círculo vacío cuando no está seleccionado */
.label_radio::before {
    content: "○"; /* Círculo vacío */
    font-size: 1.2em;
    color: #000080;
    transition: all 0.3s ease-in-out;
}

/* Cuando está seleccionado, cambia el contenido a una plumilla ✓ */
input[type="radio"]:checked + .label_radio::before {
    content: "✔"; /* Plumilla de selección */
    font-size: 1.2em;
    color: #ffffff;
}

/* Efecto visual cuando está seleccionado */
input[type="radio"]:checked + .label_radio {
    color: #ffffff;
    background-color: #2400a5;
}

/*****************************************/

.hidden{
    overflow: hidden;
  }
  
  .centrado{
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .lds-facebook {
    font-family: "Arista";
    line-height: 64px;
    color: var(--color1);
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
    text-align: center;
  }
  
  .lds-facebook div {
    border-radius: 4px 4px 4px 4px;
    display: inline-block;
    position: absolute;
    left: 6px;
    width: 13px;
    
    animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  }
  
  .lds-facebook div:nth-child(1) {
    left: 6px;
    background: linear-gradient(to bottom, rgba(50,100,169,1), rgba(9,9,121,1) );
    animation-delay: -0.36s;
  }
  
  .lds-facebook div:nth-child(2) {
    left: 26px;
    background: linear-gradient(to bottom, rgba(0,212,255,1), rgb(50,100,169) );
    animation-delay: -0.24s;
  }
  
  .lds-facebook div:nth-child(3) {
    left: 45px;
    background: linear-gradient(to bottom, rgba(0,0,0,1), rgb(19, 23, 29) );
    animation-delay: -0.12s;
  }
  
  @keyframes lds-facebook {
    0% {
      top: 6px;
      height: 51px;
    }
  
    50%,
    100% {
      top: 19px;
      height: 26px;
    }
  }

/**************** FIN PRELOADER **************/


#cargando_fondo{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99999999999;

    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
}



/*************** INICIO CUERPO PRINCIPAL *************/

 #cuerpo_principal{
    min-height: 95vh;
    padding: 20px 20px 20px 20px !important;
    background-color: rgba(255,255,255,0.9) !important;
}

.identificador{
    font-size: 1.0rem;
    color: var(--color1);
    padding-left: 0px;
    padding-top: 1px;
}

/*************** FIN CUERPO PRINCIPAL ****************/
.cuerpo-row {
    display: flex;
    align-items: center;
    gap: 10px; /* Espaciado entre título y botones */
}

select > .selectpicker {
    background-color: red !important;
    color: #000 !important;
}


.titulo_pag{
    font-size: 1.0rem !important;
    padding-bottom: 2px !important;
    padding-top: 2px !important;
    border-bottom: var(--color1) !important;
}


.titulo_resumen{
    /* font-size: 1.0rem !important; */
    padding-bottom: 2px !important;
    padding-top: 2px !important;
    border-bottom: var(--blanco_bg) !important;
    border-radius: 5px;
    margin-bottom: 3px !important;
    color: var(--blanco_tx) !important;
    font-size: 1.2rem !important;
    background-color: var(--color4_4_bg) !important;
}

.valor_resumen{
    /* font-size: 1.0rem !important; */
    padding-bottom: 2px !important;
    padding-top: 2px !important;
    border-bottom: var(--blanco_bg) !important;
    border-radius: 5px;
    margin-bottom: 3px !important;
    color: rgb(255, 255, 255) !important;
    font-size: 1.2rem !important;
    background-color: var(--color1_bg) !important;
}


.titulo_resumen_2{
    /* font-size: 1.0rem !important; */
    padding-bottom: 2px !important;
    padding-top: 2px !important;
    border-bottom: var(--blanco_bg) !important;
    border-radius: 5px;
    margin-bottom: 3px !important;
    color: var(--blanco) !important;
    font-size: 1.0rem !important;
    background-color: var(--color4_4_bg) !important;
}

.valor_resumen_2{
    /* font-size: 1.0rem !important; */
    padding-bottom: 2px !important;
    padding-top: 2px !important;
    border-bottom: var(--blanco_bg) !important;
    border-radius: 5px;
    margin-bottom: 3px !important;
    color: rgb(255, 255, 255) !important;
    font-size: 1.0rem !important;
    background-color: var(--color1_bg) !important;
}

.titulo_resumen_2 > label{
    text-align: center !important;
}




/*************** INICIO CONFIGURACION *************/
.ocultar{
    visibility:hidden ;
    display: none;
}


.d-block{
    margin-top: 0px !important;
    padding-top: 0px !important;
}

.btn-primary {
    background-color: var(--color2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase;
}


#formularioUsuario > .form-group {
    margin-bottom: 5px !important;
}

.card {
    background-color: transparent !important;
    border-color: var(--color1_bg);
    margin-bottom: 15px !important;
}
.card-header {
    background-color: var(--color1_1_bg) !important;
    color: rgb(255, 255, 255) !important;
    font-size: 1.2rem !important;
}

label {
    display: inline-block;
    margin-bottom: 0.2rem !important;
}
#columna_a {
    background-color: transparent !important;
}
#columna_a .card-header {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 1rem !important;
}

#columna_a .card {
    margin-bottom: 8px;
}
#columna_a .card-body {
    padding: 0px !important;
}
#columna_b .card {
    /* min-height: 86vh; */
    margin-bottom: 5px;
}
#columna_b .card-body {
    background-color: var(--color2_2_bg) !important;
    padding-bottom: 10px !important;
}

#columna_b .card-header {
    font-family: roboto;
    font-size: 1.6rem;
    letter-spacing: 2px;
    color: var( --color4_bg);
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    /* -webkit-text-stroke: 1px #33b5e5  !important; */
    /* text-shadow: 0 0 5px rgb(138,88,179); */
}
/* 
.btn-primary {
    background-color: var(--color4_bg) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase;
}
 */
.btn-primary.dropdown-toggle {
    background-color: rgba(255, 255, 255, 1) !important;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    color: #495057;
    height: 2.25rem !important;
    margin: 0px;
    padding: 0.375rem 0.75rem;
}

.btn_ancho {
    margin-left: 0px !important;
}

.botones{
    font-size: 0.7rem !important;
    font-weight: 350 !important;
    margin: 0px 3px 10px 3px !important;
    padding: 6px 8px !important; 
    color: var( --blanco);
}

.botones:hover{
    background-color: var(--color1) !important;
    color: var( --blanco);
    transition: -5s;
}

.botones:focus {
    outline: none !important;
    border: none !important;
    color: var( --blanco) !important;
}

.botones:active{
    outline: none !important;
    border: none !important;
    box-shadow: inset 2px 2px 7px var( --color3) !important;
    top: 3px !important;
    left: 2px !important;
}

.separador{
    margin-right: 10px;
}

.separador_izq{
    margin-left: 10px;
}

.botones_tabla{
    font-size: 0.7rem !important;
    font-weight: 350 !important;
    margin: 0px !important;
    padding: 1px 8px !important; 
    color: var( --blanco);
}

.botones_tabla:hover{
    background-color: var(--color1) !important;
    color: var( --blanco);
    transition: -5s;
}

.botones_tabla:focus {
    outline: none !important;
    border: none !important;
    color: var( --blanco) !important;
}

.botones_tabla:active{
    outline: none !important;
    border: none !important;
    box-shadow: inset 2px 2px 7px var( --color3) !important;
    top: 3px !important;
    left: 2px !important;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none !important; 
  margin: 0 !important; 
}

input[type=number] { -moz-appearance:textfield !important; }

/*************** FIN CONFIGURACION *************/




/* Color inicial (antes de hacer clic) */
.bootstrap-select .dropdown-toggle {
    background-color: #5e4eb8 !important; /* morado, ajusta como quieras */
    color: white !important;
    border: 1px solid #ccc;
  }
  
  /* Color cuando tiene focus */
  .bootstrap-select .dropdown-toggle:focus,
  .bootstrap-select .dropdown-toggle:active {
    background-color: #483ba1 !important;
    color: #fff !important;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(94, 78, 184, 0.5);
  }
  
  /* Color del texto seleccionado */
  .bootstrap-select .dropdown-toggle .filter-option {
    color: white !important;
  }
  
  /* Menú desplegable */
  .bootstrap-select .dropdown-menu {
    background-color: #f4f4f4;
  }
  
  /* Opciones dentro del menú */
  .bootstrap-select .dropdown-menu li a {
    color: #333 !important;
  }
  
  /* Opción activa/hover */
  .bootstrap-select .dropdown-menu li a:hover,
  .bootstrap-select .dropdown-menu li.active > a {
    background-color: #5e4eb8 !important;
    color: white !important;
  }
  




/*************** INICIO CONFIGURACION TABLAS *************/
#tabla_centros {
    font-size: 0.175rem !important;
    /* color: red !important */;
}

table.dataTable thead th, table.dataTable  td {
    font-size: 0.7rem !important;
}



.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 0 !important;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    cursor: hand;
    color: #333 !important;
    border: 0px solid transparent !important;
    border-radius: 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    
        background-color: var(--color1) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    
    background-color: var(--color1) !important;
}

.custom-select {
    display: inline-block;
    /* max-width: 50px !important; */
    height: calc(1.0em + 0.75rem + 2px);
    padding: 0px 0px 0px 2px !important;
    font-size: 0.7rem !important;
    font-weight: 300;
    line-height: 1.0 !important;
    color: #495057;
    vertical-align: middle;
    
    /* background-color: #fff; */
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#tabla_usuarios_length > label{
    color: var(--color1) !important;
    font-size: 0.7rem !important;
}

#tabla_usuarios_filter > label{
    color: var(--color1) !important;
    font-size: 0.7rem !important;
}

#tabla_usuarios_filter label .form-control {
    display: block;
    width: 100%;
    height: calc(1.0em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 300;
    line-height: 1.0 !important;
    color: #495057;
    /* background-color: #fff; */
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    scroll-margin-right: 10px !important;
}

.encabezado_tabla{
    /* background-color: var(--color1) !important; */
    color: var(--blanco) !important;

    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);

}


.cuerpo_tabla {
    background-color: transparent !important;
}
/*************** FIN CONFIGURACION TABLAS *************/




/*************** INICIO USUARIOS *************/

.swal2-input{
    font-size: 0.9rem !important;
    line-height: 0.9rem !important;
    
    margin: 4px 0px !important;
}

.swal2-actions {
    display: flex;
    z-index: 1;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 1.25em auto 0;
    padding: 0 1.6em;
}

/*************** FIN USUARIOS *************/


/*********** INICIO DASHBOARD *************/

    .caja_tarjeta {
        display: grid;
        padding: 0.5rem;
        grid-gap: 0rem;
        grid-template-columns: repeat(auto-fit, minmax(49%, 50%));
        grid-template-rows: repeat(1, 1fr);
        font-size: 5rem;
    }

    .caja_tarjeta div {
        background-color: rgba(126, 174, 228, 0.3);
        color: white;
        padding: 0.1em 0.1em 0.1em 0.1em !important;
        /* box-shadow: 2px 2px 7px var( --color4) !important; */
    }

    .tarjeta {
        display: grid;
        padding: 0.5rem;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-template-rows: repeat(1, 200px);
        font-size: 5rem;
    }

    .tarjeta div {
        background-color: transparent;
        color: white;
        padding: 10px 5px 10px 5px !important;
        box-shadow: 2px 2px 7px var( --color3) !important;
    }

  
    .tarjeta3 {
        display: grid;
        padding: 0;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(1fr, 1fr));
        grid-template-rows: repeat(1, 1fr);
        font-size: 5rem;
    }

    .tarjeta3 div {
        background-color:  transparent;
        color: white;
        padding: 0px !important;
        box-shadow: 2px 2px 7px var( --color3) !important;
    }

    .tarjeta4 {
        display: grid;
        padding: 0.5rem;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-template-rows: repeat(1, 1fr);
        font-size: 5rem;
    }

    .tarjeta4 div {
        background-color: transparent;
        color: white;
        padding: 10px 5px 10px 5px !important;
        box-shadow: 2px 2px 7px var( --color3) !important;
    }

    .tarjeta5 {
        display: grid;
        padding: 0.5rem;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        grid-template-rows: repeat(1, 68px);
        font-size: 5rem;
    }

    .tarjeta5 div {
        /* background-color: var(--color3); */
        color: white;
        padding: 10px 5px 10px 5px !important;
        box-shadow: 2px 2px 7px var( --color3) !important;

        background: rgb(2,0,36);
        background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    }

    .tarjeta6 {
        display: grid;
        padding: 0px;
        grid-gap: 0rem;
        grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
        grid-template-rows: repeat(1, 28px);
        font-size: 4rem;
    }

    .tarjeta div > p {
        color: black;
        font-size: 1rem;
        line-height: 1.3rem;
        text-align: center;
        font-family: "noto-sans";
        margin-bottom: 5px !important;
        /*box-shadow: 2px 2px 7px var( --color4) !important;*/
    } 

 
    .logo_dashboard{
        margin: 0px 10px 10px 0px;
        width: 20%;
        height: auto;
        max-width: 45px;
        max-height: 45px;
    }

    .logo_dashboard2{
        margin: 0px 0px 0px 0px;
        width: 40%;
        height: auto;
        max-width: 65px;
        max-height: 65px;
    }

    .titulo_etiqueta_dashboard{
        padding: 1px 1px 1px 4px;
        font-size: 1.58rem !important;
        text-align: center;
        line-height: 1rem;
        font-weight: 600;
        font-size: 1.1em;
        font-family: "roboto";
        color: #ffffff;
        margin: 0px !important;
    }

    .texto_etiqueta_dashboard{
        padding: 1px 1px 1px 0px;
        font-size: 3.3rem !important;
        text-align: center;
        line-height: 1rem;
        font-weight: 600;
        font-size: 1.1rem;
        font-family: "roboto";
        color: #ffffff;
        margin-top: 18px !important;
    }


    .titulo_etiqueta_dashboard2{
        padding: 1px 1px 1px 4px;
        font-size: 1.44rem !important;
        text-align: center;
        line-height: 0.8rem;
        font-weight: 600;
        font-size: 1.1em;
        font-family: "roboto";
        color: #ffffff;
        margin-top: -10px !important;
    }

    .texto_etiqueta_dashboard2{
        padding: 1px 1px 1px 0px;
        font-size: 2.3rem !important;
        text-align: center;
        line-height: 1rem;
        font-weight: 600;
        font-size: 1.1rem;
        font-family: "roboto";
        color: #ffffff;
        margin-top: 18px !important;
    }
/*********** FIN DASHBOARD ****************/



/*********** INICIO MAPA GEO LOCALIZACION ****************/
    
     #mi-mapa {
        margin-top: 10px;
        width: 100%;
        height: 87vh;
        box-shadow: 5px 5px 5px #888;
    }

    .bootstrap-select{
        padding-top: -10px !important;
        background-color: transparent !important; 
    }
    
    .bootstrap-select .dropdown-toggle .filter-option {
        position: static;
        top: 0;
        left: 0;
        float: left;
        height: 100%;
        width: 100%;
        text-align: left;
        overflow: hidden;
        -webkit-box-flex: 0;
        -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        padding-top: -20px !important;
        background-color: var(--color1_1_bg) !important; 
        font-weight: 200 !important;
    }

    .btn-primary.dropdown-toggle:hover, .btn-primary.dropdown-toggle:focus {
        background-color: var(--color3_bg) !important;
    }

    .btn-primary.dropdown-toggle:active, .btn-primary.dropdown-toggle:focus {
        background-color: var(--color4) !important;
    }

     #btn_imprimir_planillas {
        height: 33px !important;
        margin-top: 10px !important;
        font-size: 1rem !important;
        padding: 5px 20px 5px 20px !important;
     }

    .selectpicker{
        margin-top: -10px !important;
    }
    
/* 
    #caja_mapa{
        position: relative;
    }

    #rango{
        position: absolute;
        top: 0;
        left: 0;
    }

    #mi-mapa {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
     */
/*********** FIN MAPA GEO LOCALIZACION ****************/

/*********** INICIO RESPUESTA IMAGEN *******/


.breadcrumb {
    background-color: rgba(0,0,0,.03);
    border: 1px solid rgba(0,0,0,.125);
}

#content {
    margin-bottom: 25px;
}

.adsbygoogle {
    margin-bottom: 15px;
}

.footer-content {
    padding-top: 20px;
    padding-bottom: 20px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f5f5f5;
    text-align: center;
}

.footer a {
    color: rgba(255,255,255,.5);
    text-decoration: none;
}

.footer a:hover {
    color: #fff;
}

#previews {
    padding: 15px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 15px;
    min-height: 220px;
    background-color: #fbfbfb;
  }
  
  .dropzone-here {
      text-align: center;
      padding-top: 60px;
      width: 100%;
      position: absolute;
      font-size: 18px;
      font-weight: bold;
      top: 50px;
  }
  
  #previews .file-row .delete {
      display: none;
  }
  
  #previews .file-row.dz-success .start,
  #previews .file-row.dz-success .cancel {
      display: none;
  }
  
  #previews .file-row.dz-success .delete {
      display: block;
  }
  
  .dz-image-preview {
      border: 1px solid #d6d4d4;
      padding-top: 15px;
      padding-bottom: 15px;
      margin-bottom: 15px;
  }
      
  .preview {
      position: relative;
      background: #fff;
      border: 1px solid #dadada;
      text-align: center;
      display: table-cell;
      vertical-align: middle;
  }
  
  .preview img {
      cursor: pointer;
  }
  
  .progress {
      border: 1px solid #ccc;
      position: relative;
      display: block;
      height: 22px;
      padding: 0;
      min-width: 200px;
      margin:4px 0;
      background: #DEDEDE;
      background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#e9e9e9));
      background: -moz-linear-gradient(top, #ccc, #e9e9e9);
      filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#e9e9e9');
      -moz-box-shadow:0 1px 0 #fff;
      -webkit-box-shadow:0 1px 0 #fff;
      box-shadow:0 1px 0 #fff;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
  }
  
  .progress-bar {
      color: #ffffff;
      display: block;
      height: 20px;
      margin: 0;
      padding: 0;
      text-align:center;
      -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
      -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      border: 1px solid #0078a5;
      background-color: #5C9ADE;
      background: -moz-linear-gradient(top, #00adee 10%, #0078a5 90%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #00adee), color-stop(0.9, #0078a5));
  }
/********** FIN RESPUESTA IMAGEN **********/



.texto_menu_ver {
    margin-bottom: 0px !important;
    color: rgb(61, 59, 109);
    font-size: 1.0rem !important;
    font-weight: bold;
}

.texto_pequenio_menu {
    text-align: left !important;
    margin-bottom: 0px !important;
    color: rgb(61, 59, 109);
    font-size: 0.7rem !important;
}



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



.valores_totales{
    margin-left: 10px !important;
    font-size: 2rem !important;
    color: rgba(255,255,255,0.5);
}

.valores_totales2{
    margin-left: 0px !important;
    font-size: 1.5rem !important;
    color: rgba(255,255,255,0.5);
}

.valores_totales3{
    margin-left: 0px !important;
    font-size: 0.8rem !important;
    color: rgba(255,255,255,0.5);
}



.titulo_partido {
    font-size: 1.0rem !important;
    padding-bottom: 2px !important;
    padding-top: 2px !important;
    border-bottom: var(--color1) !important;
}
.subtitulo_partido {
    font-size: 0.9rem !important;
    padding-bottom: 2px !important;
    padding-top: 2px !important;
    border-bottom: var(--color1) !important;
    line-height: 1.0rem;
    letter-spacing: 2px;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {

    body{ background-size: 50%; }
    #sidebar { margin-left: -250px; }
    #sidebar.active { margin-left: 0; }
    #content { width: 100%; }
    #content.active { width: calc(100% - 250px); }
    #sidebarCollapse span { display: none; }



    .caja_tarjeta {
        display: grid;
        padding: 0.5rem;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(49%, 1fr));
        grid-template-rows: repeat(1, 1fr);
        font-size: 5rem;
    }

    .caja_tarjeta div {
        background-color: transparent;
        color: black;
        padding: 0.1em 0.1em 0.1em 0.1em !important;
        /* box-shadow: 2px 2px 7px var( --color4) !important; */
    }



    
}

@media (max-width: 705px) {
    .tarjeta5 {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 376px) {

    .tarjeta5 {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

}