:root{
  --im-azul: #0046E3;
  --im-azul-osc: #002DAA;

  --im-negro: #000000;
  --im-blanco: #FFFFFF;

  --sidebar-bg: #EEEEEE;        /* tu sidebar final */
  --sidebar-submenu-bg: #f7f7f7;

  --page-bg: #EEEEEE;           /* fondo general abajo */
  --text: #111111;

  --toggle-hover: var(--im-azul); /* hover del botón hamburguesa */

  --box-border: rgba(0,45,170,0.25);
  --box-header-bg: rgba(0,45,170,0.06);
  --box-header-border: rgba(0,45,170,0.18);
}


/* DEclaro las letras */

@font-face {
  font-family: 'Ciudadana';
  src: url('fonts/ciudadana-regular.woff2') format('woff2'),
       url('fonts/ciudadana-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Ciudadana';
  src: url('fonts/ciudadana-bold.woff2') format('woff2'),
       url('fonts/ciudadana-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

body {
  font-family: 'Ciudadana', sans-serif;
}


/* Fuente global para shinydashboard */
.skin-blue, 
.skin-blue .wrapper,
.skin-blue .content-wrapper,
.skin-blue .main-header,
.skin-blue .main-sidebar,
.skin-blue .main-footer,
.skin-blue .content,
.skin-blue .sidebar,
.skin-blue .sidebar-menu,
.skin-blue .navbar,
.skin-blue .box,
.skin-blue .box * {
  font-family: 'Ciudadana', sans-serif !important;
}


/* Títulos de boxes y secciones */
.skin-blue .box .box-header,
.skin-blue .box .box-title,
.skin-blue .box-header .box-title,
.skin-blue h1, .skin-blue h2, .skin-blue h3, .skin-blue h4, .skin-blue h5,
.skin-blue .control-label {
  font-family: 'Ciudadana', sans-serif !important;
}

/* logo when hovered */
.skin-blue .main-header .logo:hover {
                      background-color: var(--im-verde);
                      }

/* navbar (rest of the header) */
.skin-blue .main-header .navbar {
                      background-color: var(--im-verde);
                      }        

/* main sidebar (fondo del slider bar)*/
.skin-blue .main-sidebar {
                      background-color: #E2ECE5;
                      }

/* active selected tab in the sidebarmenu */
.skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
                      background-color: var(--im-azul-osc);
                      }

/* other links in the sidebarmenu */
.skin-blue .main-sidebar .sidebar .sidebar-menu a{
                      background-color: #E2ECE5;
                      color: var(--im-negro);
}
                      


/* other links in the sidebarmenu when hovered */
 .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
                      background-color: var(--im-azul-osc);
                      color: #FFFFFF;
 }
                      
/* toggle button when hovered  */                    
 .skin-blue .main-header .navbar .sidebar-toggle:hover{
                      background-color: var(--toggle-hover);
 }
                      
/* siderbar text color */ 
.skin-blue .main-sidebar .sidebar{
  color: var(--im-negro);
} 

/* Color de fondo de los items desplegables */     
.skin-blue .sidebar-menu>li>.treeview-menu {
margin: 0 1px;
background: var(--sidebar-submenu-bg);
}



.box.box-solid.box-danger>.box-header {
color:#fff;
background:var(--im-azul-osc)
        }

.box.box-solid.box-danger{
border-bottom-color:var(--im-azul-osc);
border-left-color:var(--im-azul-osc);
border-right-color:var(--im-azul-osc);
border-top-color:var(--im-azul-osc);
}

.box.box-danger>.box-header {
color:var(--im-negro);
background:#fff
        }

.box.box-danger{
border-bottom-color:var(--im-azul-osc);
border-left-color:var(--im-azul-osc);
border-right-color:var(--im-azul-osc);
border-top-color:var(--im-azul-osc);
}
    
  /*  Blue background when checked */
.custom-control-input:checked~.custom-control-label::before {
  color: #fff;
  border-color: var(--im-azul-osc);
  background-color: var(--im-azul-osc);
}


  /*  Atenua los box los have menos danger */
.box.box-danger{
border: 1px solid rgba(0,45,170,0.25);
}
.box.box-danger>.box-header{
background: rgba(0,45,170,0.06);
color: var(--im-azul-osc);
border-bottom: 1px solid rgba(0,45,170,0.18);
}


  /*  Arma una clase para action boton */

.skin-blue .btn-primary{
background-color: #002DAA !important;
border-color: #002DAA !important;
color: var(--im-blanco) !important;
}

.skin-blue .btn-primary:hover{
background-color: #0046E3 !important;
border-color: #0046E3 !important;
}


  /*  Setea el color de abajo */
.skin-blue .content-wrapper,
.skin-blue .right-side{
background-color: var(--sidebar-bg) !important;
}



/*  Cruz de las opciones elegidas */

.skin-blue .selectize-control.multi .selectize-input > div .remove{
background-color: #002DAA;
color: var(--im-blanco) !important;
border-radius: 3px;
padding: 0 4px;
}

.skin-blue .selectize-control.multi .selectize-input > div .remove:hover{
background-color: #0046E3;
color: var(--im-blanco) !important;
}


/*  color de fonde de la pestana */

/* que el contenedor del tab sea blanco y cubra todo el área */
.skin-blue .tab-content{
background: var(--im-blanco);
padding: 15px;            /* o 0 si querés full-bleed */
border-radius: 6px;
}

/* asegurá que el pane activo sea blanco */
.skin-blue .tab-content > .tab-pane.active{
background: var(--im-blanco);
}

/* opcional: que el padding gris externo no “se note” */
.skin-blue .content{
padding: 10px;            /* bajalo si querés menos gris alrededor */
}



/* Tabs no activas */
/* fondo blanco para todas las tabs */
.skin-blue .nav-tabs > li > a{
background-color: var(--im-blanco) !important;
border-color: var(--im-blanco) !important;
color: var(--im-azul) !important;   /* azul claro (ajustable) */
font-weight: 600;
}

/* hover de tabs no activas */
.skin-blue .nav-tabs > li > a:hover{
background-color: var(--im-blanco) !important;
color: var(--im-negro) !important;   /* azul más oscuro al hover */
}

/* tab activa: texto negro */
.skin-blue .nav-tabs > li.active > a,
.skin-blue .nav-tabs > li.active > a:hover,
.skin-blue .nav-tabs > li.active > a:focus{
background-color: var(--im-blanco) !important;
border-color: var(--im-blanco) !important;
color: var(--im-negro) !important;
}

/* fondo del sideBar */
.skin-blue .main-sidebar{
background-color: var(--sidebar-bg) !important;  /* poné acá el color que quieras */
}



.skin-blue .main-sidebar .sidebar{
background-color: var(--sidebar-bg) !important;
}


/* fondo real del menuItem */
.skin-blue .main-sidebar .sidebar-menu > li > a{
background-color: var(--sidebar-bg) !important;
color: #111111 !important;
}

/* que no cambie al estar inactivo */
.skin-blue .main-sidebar .sidebar-menu > li:not(.active) > a{
background-color: var(--sidebar-bg) !important;
}


/* botón toggle normal */
.skin-blue .main-header .navbar .sidebar-toggle{
color: var(--im-blanco);
}

/* hover del botón toggle */
.skin-blue .main-header .navbar .sidebar-toggle:hover{
background-color: var(--im-azul) !important;  /* poné el color que quieras */
color: var(--im-blanco) !important;
}


/* checkbox marcado */

.skin-blue input[type="checkbox"]{
accent-color: #002DAA;
}





/* reemplaza el icono filter por tu filtro SVG */
.skin-blue .sidebar-menu i.icono-filtro{
display: inline-block;
width: 16px;
height: 16px;
background-image: url("filtro_icon.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;

vertical-align: middle;   /* ← esto alinea con el texto */
margin-right: 6px;
}

/* opcional: azul normal */
.skin-blue .sidebar-menu > li > a i.icono-filtro{
filter: none;
}

/* opcional: cuando está activo */
.skin-blue .sidebar-menu > li.active > a i.icono-filtro{
filter: brightness(0);  /* lo pone negro */
}


/* Hover del menuItem */
.skin-blue .main-sidebar .sidebar-menu > li > a:hover{
background-color: #002DAA !important;
color: var(--im-blanco) !important;
}



/* icono blanco en hover */
.skin-blue .sidebar-menu > li > a:hover i.icono-filtro{
filter: brightness(0) invert(1);
}


.skin-blue .sidebar-menu > li.active > a i.icono-filtro{
filter: brightness(0) invert(1);
}


/* tamano colunas */
div.col-sm-6 { padding: 5px; }
div.col-sm-5 { padding: 10px; }
div.col-sm-2 { padding: 15px; }
div.col-sm-3 { padding: 0px; }

a { color: var(--im-negro); }



/* logo en navbar */
/* zona azul izquierda */
.skin-blue .main-header .logo{
  background-color: var(--im-azul);
  display: flex;
  align-items: center;
  justify-content: left;
}

/* imagen dentro del logo */
.logo-img{
  height: 45px;
  width: auto;
}


/* título: lo corrés a la derecha del logo */
.titulo-navbar-li{
  position: absolute !important;
  left: 55px;          /* base */
  top: 50%;
  transform: translateY(-50%);
}

.titulo-navbar{
  margin-left: 10px;  /* separa del logo (ajustable) */
}

.sidebar-title{
  padding-left: 15px;
  padding-top: 10px;
  padding-bottom: 5px;
}


/* icono de las pestanas */
.icono-tab {
  height: 18px;   /* tamaño del ícono */
  width: auto;
  margin-right: 6px;  /* separación con el texto */
  vertical-align: middle;
}


/* ====== hover del botón "3 rayitas" (sidebar-toggle) ====== */
.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background-color: var(--im-negro) !important;   /* o el color que uses en navbar */
  color: #fff !important;
}

/* ====== hover del logo (evitar que se ponga gris) ====== */
.skin-blue .main-header .logo:hover {
  background-color: var(--im-azul) !important;    /* mismo azul del logo */
  color: #fff !important;
}


.btn-run i {
  margin-left: 8px;   /* probá 8px, 10px o 12px */
}