/*
 * Tema AdminLTE - IVA Apartamentos Turisticos
 * Cargar DESPUES de AdminLTE.min.css y _all-skins.min.css.
 */
:root {
  --iva-blue: #367FA9;
  --iva-blue-dark: #286783;
  --iva-blue-pale: #EAF3F8;
  --iva-bg: #EEF1F4;
  --iva-panel: #FFFFFF;
  --iva-border: #DDE3E9;
  --iva-text: #344054;
  --iva-muted: #667085;
  --iva-danger: #C94A4A;
}

/* Fondo general gris suave y zona de trabajo */
html, body, .wrapper { background: var(--iva-bg) !important; color: var(--iva-text); }
.content-wrapper, .right-side { background: var(--iva-bg) !important; }
.content { background: transparent; }
.content-header { color: var(--iva-text); }

/* Cabecera blanca */
.skin-blue .main-header .logo,
.skin-blue .main-header .logo:hover,
.skin-blue .main-header .navbar,
.skin-blue .main-header .navbar .sidebar-toggle,
.skin-blue .main-header .navbar .sidebar-toggle:hover,
.skin-blue .main-header .navbar .nav > li > a,
.skin-blue .main-header .navbar .nav > li > a:hover {
  background: #fff !important;
  color: var(--iva-text) !important;
}
.skin-blue .main-header .logo { border-bottom: 1px solid var(--iva-border); }
.skin-blue .main-header .navbar { border-bottom: 1px solid var(--iva-border); }
.skin-blue .main-header .navbar .sidebar-toggle:hover { color: var(--iva-blue) !important; }

/* Menú lateral blanco */
.skin-blue .main-sidebar, .skin-blue .left-side {
  background: #fff !important;
  border-right: 1px solid var(--iva-border);
}
.skin-blue .sidebar a,
.skin-blue .user-panel > .info,
.skin-blue .user-panel > .info > a { color: var(--iva-text) !important; }
.skin-blue .user-panel { border-bottom: 1px solid var(--iva-border) !important; }
.skin-blue .sidebar-menu > li > a {
  color: var(--iva-text) !important;
  border-left: 3px solid transparent;
}
.skin-blue .sidebar-menu > li > a > .fa,
.skin-blue .sidebar-menu > li > a > .glyphicon,
.skin-blue .sidebar-menu > li > a > .ion { color: var(--iva-muted) !important; }
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a {
  color: var(--iva-blue-dark) !important;
  background: var(--iva-blue-pale) !important;
  border-left-color: var(--iva-blue) !important;
}
.skin-blue .sidebar-menu > li:hover > a > .fa,
.skin-blue .sidebar-menu > li.active > a > .fa,
.skin-blue .sidebar-menu > li.menu-open > a > .fa { color: var(--iva-blue) !important; }
.skin-blue .treeview-menu { background: #F5F7F9 !important; }
.skin-blue .treeview-menu > li > a { color: #596579 !important; }
.skin-blue .treeview-menu > li.active > a,
.skin-blue .treeview-menu > li > a:hover { color: var(--iva-blue-dark) !important; }

/* Paneles, tablas y tarjetas: blanco sobre fondo gris */
.box, .info-box, .small-box, .nav-tabs-custom, .dataTables_wrapper,
.box-body, .box-footer { background: var(--iva-panel); }
.box, .nav-tabs-custom, .info-box {
  border-color: var(--iva-border);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}
.box.box-primary { border-top-color: var(--iva-blue) !important; }
.table { background: #fff; }
.table > thead > tr > th {
  background: #F5F7F9;
  color: var(--iva-text);
  border-bottom: 1px solid var(--iva-border);
}
.table > tbody > tr:nth-child(even) { background: #F7F8FA; }
.table > tbody > tr:hover { background: var(--iva-blue-pale); }
.table > tbody > tr > td,
.table > thead > tr > th { border-color: var(--iva-border) !important; }

/* Botones en negativo de la identidad web:
   fondo claro, texto y borde en color corporativo.
   Al pasar el ratón se invierten: fondo azul y texto blanco. */
.btn-primary, .btn-info, .btn-success, .btn-default,
.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: #fff !important;
  color: var(--iva-blue-dark) !important;
  border: 1px solid var(--iva-blue) !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info:hover, .btn-info:focus, .btn-info:active,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-default:hover, .btn-default:focus, .btn-default:active,
.dataTables_wrapper .dt-buttons .btn:hover {
  background: var(--iva-blue) !important;
  color: #fff !important;
  border-color: var(--iva-blue) !important;
}

/* Eliminar: mismo tratamiento invertido, conservando señal de peligro */
.btn-danger {
  background: #fff !important;
  color: var(--iva-danger) !important;
  border: 1px solid var(--iva-danger) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background: var(--iva-danger) !important;
  color: #fff !important;
  border-color: var(--iva-danger) !important;
}

/* Paginación DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--iva-blue) !important;
  color: #fff !important;
  border-color: var(--iva-blue) !important;
}

/* Campos */
.form-control { border-color: var(--iva-border); }
.form-control:focus { border-color: var(--iva-blue) !important; box-shadow: 0 0 0 2px rgba(54,127,169,.10) !important; }

/* Desplegable de usuario */
.skin-blue .navbar-nav > .user-menu > .dropdown-menu { border: 1px solid var(--iva-border) !important; }
.skin-blue .navbar-nav > .user-menu > .dropdown-menu > li.user-header { background: var(--iva-blue) !important; }

@media (max-width: 767px) {
  .skin-blue .main-header .navbar,
  .skin-blue .main-header .logo { background: #fff !important; }
}


/* SEPARACION VISIBLE DE LAS TRES ZONAS PRINCIPALES:
   1) cabecera superior  2) menu lateral  3) contenido */
.skin-blue .main-header {
  border-bottom: 2px solid #D5DDE5 !important;
  box-shadow: 0 2px 5px rgba(30, 45, 62, .07) !important;
  position: relative;
  z-index: 1035;
}

.skin-blue .main-header .logo {
  border-right: 2px solid #D5DDE5 !important;
}

.skin-blue .main-sidebar,
.skin-blue .left-side {
  border-right: 2px solid #D5DDE5 !important;
  box-shadow: 2px 0 6px rgba(30, 45, 62, .05) !important;
}

.content-wrapper,
.right-side {
  background: #EEF1F4 !important;
  border-left: 1px solid #D5DDE5 !important;
  min-height: 100vh;
}

/* Que los bloques interiores también se distingan del fondo */
.content .box,
.content .well,
.content .panel,
.content .small-box,
.content .info-box,
.content .nav-tabs-custom {
  background: #FFFFFF !important;
  border: 1px solid #D9E0E7 !important;
  border-radius: 5px !important;
  box-shadow: 0 2px 7px rgba(30, 45, 62, .07) !important;
}

/* Separación entre bloques consecutivos */
.content .box,
.content .panel,
.content .well,
.content .small-box,
.content .info-box {
  margin-bottom: 18px !important;
}

/* Separación visual de cabecera de página y contenido */
.content-header {
  padding-bottom: 12px !important;
  border-bottom: 1px solid #D5DDE5 !important;
  margin-bottom: 12px !important;
}

/* Separación en pantallas pequeñas */
@media (max-width: 767px) {
  .skin-blue .main-header { border-bottom-width: 2px !important; }
  .skin-blue .main-sidebar { border-right: 0 !important; }
  .content-wrapper { border-left: 0 !important; }
}


/* CONTRASTE EXTRA EN EL MENU LATERAL */
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a {
  background: #DCEAF3 !important;
  color: #205B7D !important;
  border-left: 4px solid #367FA9 !important;
  font-weight: 600 !important;
}

/* Fondo de submenús más oscuro para distinguirlos del menú principal */
.skin-blue .sidebar-menu .treeview-menu {
  background: #E5E9EE !important;
  border-left: 1px solid #CDD5DE !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.skin-blue .sidebar-menu .treeview-menu > li > a {
  color: #344054 !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

.skin-blue .sidebar-menu .treeview-menu > li > a:hover,
.skin-blue .sidebar-menu .treeview-menu > li.active > a {
  background: #D2DCE6 !important;
  color: #174F70 !important;
  font-weight: 600 !important;
}

/* Flechas y pequeños indicadores más visibles */
.skin-blue .sidebar-menu > li > a > .pull-right-container,
.skin-blue .sidebar-menu > li > a > .fa-angle-left {
  color: #526477 !important;
}