/* =========================
   CUSTOM.CSS
   ========================= */

/* HEADER */
.main-header .logo,
.main-header .navbar {
  background-color: #283B6A !important;
}

/* BOTONES BASE */
.btn {
  border-radius: 10px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0.3px;
  transition: all .25s ease !important;
  box-shadow: none !important;
}

/* BOTON PRINCIPAL */
.btn-primary {
  background-color: #283B6A !important;
  border-color: #283B6A !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: #1f2f57 !important;
  border-color: #1f2f57 !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(40, 59, 106, 0.25) !important;
  transform: translateY(-1px);
}

/* BOTON SUCCESS */
.btn-success {
  background-color: #00bcd4 !important;
  border-color: #00bcd4 !important;
  color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  background-color: #00a4b9 !important;
  border-color: #00a4b9 !important;
  color: #fff !important;
}

/* BOTON DANGER */
.btn-danger {
  background-color: #c70039 !important;
  border-color: #c70039 !important;
  color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
  background-color: #a80030 !important;
  border-color: #a80030 !important;
  color: #fff !important;
}

/* BOTON WARNING */
.btn-warning {
  background-color: #f39c12 !important;
  border-color: #f39c12 !important;
  color: #fff !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  background-color: #d58512 !important;
  border-color: #d58512 !important;
  color: #fff !important;
}

/* BOTON INFO */
.btn-info {
  background-color: #03C4EB !important;
  border-color: #03C4EB !important;
  color: #fff !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  background-color: #02a8ca !important;
  border-color: #02a8ca !important;
  color: #fff !important;
}

/* BOTONES CHICOS DE TABLAS */
.btn.btn-xs,
.btn-group-xs > .btn {
  padding: 6px 10px !important;
  border-radius: 8px !important;
}

/* BOTONES SM */
.btn-sm,
.btn-group-sm > .btn {
  border-radius: 8px !important;
}

/* INPUTS AL ENFOCAR */
.form-control:focus {
  border-color: #283B6A !important;
  box-shadow: 0 0 0 2px rgba(40, 59, 106, 0.12) !important;
}

/* PAGINACION ACTIVA */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: #283B6A !important;
  border-color: #283B6A !important;
}

/* TABS ACTIVAS */
.nav-tabs-custom > .nav-tabs > li.active {
  border-top-color: #283B6A !important;
}

/* BOXES */
.box.box-primary {
  border-top-color: #283B6A !important;
}

.box.box-solid.box-primary > .box-header {
  background: #283B6A !important;
  background-color: #283B6A !important;
  border-color: #283B6A !important;
}

/* LABEL PRIMARY */
.label-primary {
  background-color: #283B6A !important;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .btn {
    border-radius: 8px !important;
  }
}

/* BARRAS / HEADERS DE BOX */
.box.box-primary {
  border-top-color: #283B6A !important;
}

.box.box-solid.box-primary > .box-header,
.box-header.with-border[style*="#0099CC"],
.box-header.with-border[style*="#00AEEF"],
.box-header.with-border[style*="#00aeef"],
.box-header.with-border[style*="#0099cc"] {
  background-color: #283B6A !important;
  color: #fff !important;
  border-bottom-color: #283B6A !important;
}

/* por si el header no tiene inline style */
.box-header.with-border {
  border-bottom: 1px solid #dfe6f1 !important;
}

/* texto e iconos dentro de esas barras */
.box-header,
.box-header .box-title,
.box-header > .fa,
.box-header > .glyphicon,
.box-header > .ion,
.box-header .btn-box-tool {
  color: #fff !important;
}

/* TODAS LAS CABECERAS DE BOX */
.box > .box-header,
.box .box-header,
.box-header,
.box-header.with-border,
.box.box-primary > .box-header,
.box.box-info > .box-header,
.box.box-success > .box-header,
.box.box-warning > .box-header,
.box.box-danger > .box-header,
.box.box-solid > .box-header,
.box.box-solid.box-primary > .box-header,
.box.box-solid.box-info > .box-header,
.box.box-solid.box-success > .box-header,
.box.box-solid.box-warning > .box-header,
.box.box-solid.box-danger > .box-header {
  background: #283B6A !important;
  background-color: #283B6A !important;
  color: #fff !important;
  border-bottom-color: #283B6A !important;
}

/* TEXTO E ICONOS DENTRO DE ESAS BARRAS */
.box-header,
.box-header .box-title,
.box-header h1,
.box-header h2,
.box-header h3,
.box-header h4,
.box-header h5,
.box-header h6,
.box-header > .fa,
.box-header > .glyphicon,
.box-header > .ion,
.box-header .fa,
.box-header .glyphicon,
.box-header .ion,
.box-header .btn-box-tool,
.box-header a {
  color: #fff !important;
}

/* SI VIENEN CON STYLE INLINE CELESTE */
.box-header[style*="background-color"] {
  background: #283B6A !important;
  background-color: #283B6A !important;
}

/* BORDES SUPERIORES DE LOS BOX */
.box,
.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger {
  border-top-color: #283B6A !important;
}

/* ALERTAS / CAJAS CELESTES */
.alert-info,
.alert-info h1,
.alert-info h2,
.alert-info h3,
.alert-info h4,
.alert-info h5,
.alert-info h6,
.alert-info .fa,
.alert-info .glyphicon,
.alert-info .ion {
  background-color: #283B6A !important;
  border-color: #283B6A !important;
  color: #fff !important;
}

/* BOX INFO */
.box.box-info {
  border-top-color: #283B6A !important;
}

.box.box-info > .box-header,
.box.box-solid.box-info > .box-header {
  background: #283B6A !important;
  background-color: #283B6A !important;
  color: #fff !important;
  border-color: #283B6A !important;
}

/* BOTONES SUCCESS TAMBIÉN AL MISMO COLOR */
.btn-success,
input.btn-success,
button.btn-success,
a .btn-success,
a.btn-success {
  background-color: #283B6A !important;
  border-color: #283B6A !important;
  color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success,
input.btn-success:hover,
button.btn-success:hover,
a.btn-success:hover {
  background-color: #1f2f57 !important;
  border-color: #1f2f57 !important;
  color: #fff !important;
}

/* TEXTO BLANCO SOLO EN ESOS BOTONES DEL MENU USUARIO */
.navbar-nav > .user-menu > .dropdown-menu > .user-body .btn,
.navbar-nav > .user-menu > .dropdown-menu > .user-body .btn.btn-primary,
.navbar-nav > .user-menu > .dropdown-menu > .user-body .btn.btn-danger,
.navbar-nav > .user-menu > .dropdown-menu > .user-body a.btn {
  color: #fff !important;
}

/* también hover/focus */
.navbar-nav > .user-menu > .dropdown-menu > .user-body .btn:hover,
.navbar-nav > .user-menu > .dropdown-menu > .user-body .btn:focus,
.navbar-nav > .user-menu > .dropdown-menu > .user-body .btn:active,
.navbar-nav > .user-menu > .dropdown-menu > .user-body a.btn:hover,
.navbar-nav > .user-menu > .dropdown-menu > .user-body a.btn:focus,
.navbar-nav > .user-menu > .dropdown-menu > .user-body a.btn:active {
  color: #fff !important;
}

/* SMALL BOX CELESTES */
.small-box.bg-aqua,
.small-box.bg-aqua .inner,
.bg-aqua {
  background: #283B6A !important;
  background-color: #283B6A !important;
  color: #fff !important;
}

.small-box.bg-aqua h3,
.small-box.bg-aqua p,
.small-box.bg-aqua small,
.small-box.bg-aqua .icon,
.bg-aqua h3,
.bg-aqua p,
.bg-aqua small,
.bg-aqua .icon {
  color: #fff !important;
}

/* BOTONES INFO */
.btn-info,
button.btn-info,
input.btn-info,
a.btn-info {
  background-color: #283B6A !important;
  border-color: #283B6A !important;
  color: #fff !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  background-color: #1f2f57 !important;
  border-color: #1f2f57 !important;
  color: #fff !important;
}

/* =========================
   MOBILE SIDEBAR FIX REAL
   ========================= */
@media (max-width: 767px) {

  html, body {
    overflow-x: hidden !important;
  }

  .wrapper {
    overflow-x: hidden !important;
  }

  /* HEADER */
  .main-header {
    position: relative !important;
    z-index: 1002 !important;
  }

  .main-header .logo {
    display: none !important;
  }

  .main-header .navbar {
    margin-left: 0 !important;
    width: 100% !important;
    min-height: 50px !important;
  }

  /* HAMBURGUESA */
  .main-header .sidebar-toggle {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 50px !important;
    height: 50px !important;
    padding: 15px 0 !important;
    text-align: center !important;
    color: #fff !important;
    z-index: 1003 !important;
    background: transparent !important;
  }

  .main-header .sidebar-toggle:before {
    content: "\f0c9" !important;
    font-family: FontAwesome !important;
    font-size: 18px !important;
    color: #fff !important;
  }

  .main-header .sidebar-toggle:hover,
  .main-header .sidebar-toggle:focus,
  .main-header .sidebar-toggle:active {
    background: transparent !important;
    color: #fff !important;
  }

  /* USER MENU A LA DERECHA */
  .main-header .navbar-custom-menu,
  .main-header .navbar-right {
    float: right !important;
  }

  .main-header .navbar-nav {
    margin: 0 !important;
  }

  .main-header .navbar-nav > li > a {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  /* CONTENIDO NORMAL */
  .content-wrapper,
  .right-side,
  .main-footer {
    margin-left: 0 !important;
    width: 100% !important;
    min-height: 100vh !important;
    transform: translate(0,0) !important;
    transition: transform .3s ease-in-out !important;
  }

  /* SIDEBAR */
  .main-sidebar,
  .left-side {
    position: fixed !important;
    top: 50px !important;
    left: 0 !important;
    width: 245px !important;
    height: calc(100% - 50px) !important;
    padding-top: 0 !important;
    transform: translateX(-245px) !important;
    transition: transform .3s ease-in-out !important;
    z-index: 1001 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* CUANDO ABRE */
  .sidebar-open .main-sidebar,
  .sidebar-open .left-side {
    transform: translateX(0) !important;
  }

  .sidebar-open .content-wrapper,
  .sidebar-open .right-side,
  .sidebar-open .main-footer {
    transform: translateX(245px) !important;
  }

  /* SI BODY TIENE sidebar-collapse */
  .sidebar-collapse .main-sidebar,
  .sidebar-collapse .left-side {
    transform: translateX(-245px) !important;
  }

  .sidebar-collapse.sidebar-open .main-sidebar,
  .sidebar-collapse.sidebar-open .left-side {
    transform: translateX(0) !important;
  }

  .sidebar-collapse .content-wrapper,
  .sidebar-collapse .right-side,
  .sidebar-collapse .main-footer {
    transform: translateX(0) !important;
  }

  .sidebar-collapse.sidebar-open .content-wrapper,
  .sidebar-collapse.sidebar-open .right-side,
  .sidebar-collapse.sidebar-open .main-footer {
    transform: translateX(245px) !important;
  }

  /* MENÚ BASE */
  .sidebar-menu,
  .sidebar-menu > li {
    width: 100% !important;
  }

  .sidebar-menu > li > a {
    display: block !important;
    position: relative !important;
    padding: 14px 42px 14px 15px !important;
    white-space: normal !important;
    overflow: hidden !important;
  }

  .sidebar-menu > li > a > span {
    display: inline-block !important;
    white-space: normal !important;
  }

  /* FLECHAS BIEN ALINEADAS */
  .sidebar-menu li > a > .pull-right-container {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
  }

  .sidebar-menu li > a > .pull-right-container > .fa-angle-left,
  .sidebar-menu li > a > .fa-angle-left {
    position: static !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    transition: transform .2s ease !important;
  }

  .sidebar-menu .menu-open > a > .pull-right-container > .fa-angle-left,
  .sidebar-menu .menu-open > a > .fa-angle-left {
    transform: rotate(-90deg) !important;
  }

  /* SUBMENÚS HACIA ABAJO, NO AL COSTADO */
  .sidebar-menu .treeview-menu {
    position: static !important;
    display: none !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-shadow: none !important;
    background: rgba(255,255,255,.03) !important;
  }

  .sidebar-menu .treeview.menu-open > .treeview-menu,
  .sidebar-menu .active > .treeview-menu {
    display: block !important;
  }

  .treeview-menu > li > a {
    display: block !important;
    padding: 10px 15px 10px 42px !important;
    font-size: 14px !important;
    white-space: normal !important;
  }

  /* ANULA EL BUG DE ADMINLTE QUE LOS SACA AL COSTADO */
  .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span,
  .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu,
  .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span,
  .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu,
  .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
  .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right) {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    margin-left: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline !important;
  }

  /* NO CORTAR TEXTO RARO */
  .sidebar-menu,
  .main-sidebar .user-panel,
  .sidebar-menu > li.header {
    white-space: normal !important;
    overflow: visible !important;
  }

  /* OVERLAY SUAVE OPCIONAL */
  .sidebar-open:before {
    content: "" !important;
    position: fixed !important;
    top: 50px !important;
    left: 245px !important;
    width: calc(100% - 245px) !important;
    height: calc(100% - 50px) !important;
    background: rgba(0,0,0,.15) !important;
    z-index: 1000 !important;
  }
}

.logo-web-link{
  position:absolute;
  top:-52px;
  left:calc(50% - 52px);
  width:104px;
  height:104px;
  border-radius:50%;
  z-index:3;
  display:block;
}

.logo-web-link:hover{
  cursor:pointer;
}

@media (max-width: 767px){
  .navbar-nav > .user-menu > .dropdown-menu > .user-body .pull-right a.btn,
  .navbar-nav > .user-menu > .dropdown-menu > .user-body .pull-right a.btn.btn-primary,
  .navbar-nav > .user-menu > .dropdown-menu > .user-body .pull-right a.btn.btn-danger{
    color: #fff !important;
    display: inline-block !important;
  }

  .navbar-nav > .user-menu > .dropdown-menu > .user-body .pull-right a.btn.btn-primary{
    background: #283B6A !important;
    border-color: #283B6A !important;
    color: #fff !important;
  }

  .navbar-nav > .user-menu > .dropdown-menu > .user-body .pull-right a.btn.btn-danger{
    background: #d81b60 !important;
    border-color: #d81b60 !important;
    color: #fff !important;
  }
}

/* ===== MODALES MOBILE ===== */
@media (max-width: 767px){

  .modal-header{
    background: #283B6A !important;
    border-bottom: 1px solid #283B6A !important;
    padding: 12px 14px !important;
  }

  .modal-header .modal-title,
  .modal-header h4,
  .modal-header h4.modal-title{
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .modal-header .close{
    color: #fff !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  .modal-header .close span{
    color: #fff !important;
  }

  .modal-content{
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .modal-dialog{
    width: 95% !important;
    margin: 10px auto !important;
  }

  .modal-body{
    padding: 12px !important;
  }

  .modal-footer{
    padding: 10px 12px !important;
  }
}
/* ===== MODALES: header prolijo y legible ===== */
.modal-header{
  background: #283B6A !important;
  border-bottom: 1px solid #283B6A !important;
  padding: 14px 18px !important;
}

.modal-header .modal-title,
.modal-header h4,
.modal-header h4.modal-title{
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  white-space: normal !important;
  word-break: break-word !important;
  padding-right: 28px !important;
}

.modal-header .close{
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.modal-header .close span{
  color: #ffffff !important;
}

.modal-content{
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* ===== MOBILE ===== */
@media (max-width: 767px){

  .modal-dialog{
    width: 95% !important;
    margin: 10px auto !important;
  }

  .modal-header{
    padding: 12px 14px !important;
  }

  .modal-header .modal-title,
  .modal-header h4,
  .modal-header h4.modal-title{
    font-size: 16px !important;
    line-height: 1.3 !important;
    padding-right: 24px !important;
  }

  .modal-body{
    padding: 12px !important;
  }

  .modal-footer{
    padding: 10px 12px !important;
  }
}