/*=============================================================================
  custom.css — Hoja de estilos principal del sistema (plantilla Admire)
  -----------------------------------------------------------------------------
  Se carga en TODAS las vistas junto a components.css (base de la plantilla).
  Aquí viven los ajustes propios del proyecto sobre la plantilla: navbar,
  menú lateral (tokens --menu-*), skins de color, tablas, buscador central
  y media queries. Ante un cambio visual global, buscar primero aquí.
=============================================================================*/
/*   ADMIRE ADMIN Project CSS Table of Content  */
/*

    1. Reset css
    2. Nav bars
      2.1 Top bar
      2.2 Left menu
      2.3 Minimize menu
      2.4 Right bar
    3. Body header
    4.Skin colors
    5. Common css
    6. Users css
    7. Tables
    8. Media queries.
*/
/* ================ 1.Reset css========================== */
.card-header {
  font-family: "Hind", sans-serif;
  font-size: 16px; }

.card {
  margin-bottom: 0; }

.card-header i {
  padding: 0 5px; }

.disabled {
  opacity: 0.65; }

.card-body {
  padding: 0 1.25rem 1.25rem 1.25rem; }

.custom-control-indicator {
  pointer-events: all !important; }

.custom-radio .custom-control-input:checked ~ .custom-control-indicator {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -4 7 9'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E"); }

.bg-primary, .bg-danger, .bg-success, .bg-warning, .bg-info, .bg-mint {
  color: #fff; }

.btn-light, .btn-light.disabled {
  border-color: #ccc; }

.btn {
  outline: none !important; }

.button-rounded {
  border-radius: 50px; }

.main-bar .breadcrumb > li + li:before {
  padding: 0 6px;
  font: normal normal normal 15px/1 FontAwesome; }

a.btn:focus {
  color: #fff; }

.btn-secondary:hover {
  background-color: #60686f !important; }

/*================Different card styles====================*/
/*card header colors*/
.header_colors {
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  padding-bottom: 5px; }

.header_colors .inline_table {
  display: inline-table;
  margin-left: 15px;
  margin-top: 15px; }

.header_colors .inline_table div {
  width: 25px;
  height: 25px;
  border-radius: 50px; }

.inline_table .bg-white {
  box-shadow: -1px 1px 5px 2px #ccc; }

.text_for_save {
  border-radius: 0; }

/*full screen*/
.fullscreen {
  z-index: 99999;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0; }

.card-header .fa {
  cursor: pointer; }

.card_refresh_section {
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  opacity: 0.5; }

.card_refresh_section img {
  position: absolute;
  width: 40px;
  height: 40px;
  left: 50%;
  top: 50%;
  margin-left: -20px; }

.jspPane {
  width: 100% !important; }

button, .btn {
  cursor: pointer; }

/*=================== End of different card styles=============*/
/*============================2. Nav bars=========================*/
/* 2.1 Top bar */
.admin_img {
  width: clamp(120px, 40vw, 200px);
  height: auto;
  max-height: 55px;
  object-fit: contain;
  margin-top: -5px;
}

.admin_img2 {
  width: 30px;
  height: 30px; }

.navbar-brand h4 {
  font-size: 21px; }

#menu-toggle {
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1); }

#menu-toggle:hover {
  background-color: rgba(0, 0, 0, 0.07); }

#menu-toggle:active {
  background-color: rgba(0, 0, 0, 0.14); }

#menu-toggle .fa {
  font-size: 18px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); }

.sidebar-left-hidden #menu-toggle .fa,
.sidebar-left-opened #menu-toggle .fa {
  transform: rotate(90deg); }

.micheal_btn {
  padding-right: 2px !important; }

#menu li {
  border-bottom: none; }

#top .user-settings .btn {
  outline: none !important;
  box-shadow: none; }

#top .user-settings .micheal_btn {
  font-family: "Source Sans Pro", sans-serif !important; }

#top .badge {
  font-size: 9px; }

#top .navbar-brand {
  padding-top: 16px; }

.user-info li {
  color: #ccc; }

.top_menubar li {
  padding: 9px 0; }

.top_menubar li a {
  padding: 9px 7px; }

.card:hover {
  box-shadow: 0 0 25px -5px #9e9c9e; }

.without_border {
  border: 0;
  background-color: #ccc; }

.hidden-md-up {
  margin: 10px;
  color: white;
  border: 1px solid white; }

.user-info {
  margin: 0 0 14px 0;
  line-height: 1.4;
  font-size: 16px;
  text-align: center; }

.user-info strong {
  display: block;
  font-weight: 700; }

.user-data-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    font-size: 16px;
    line-height: 1;
    text-align: center;
}

.user-data-link i {
    font-size: 16px;
}

.admire_admin {
  margin-top: 14px; }

.drop_box_align {
  margin-top: 6px; }

.calendar_badge {
  margin-right: 10px; }

#top .navbar {
  padding: 0;
  margin-bottom: 0;
  background: #fff;
  box-shadow: 0 0 10px 1px #ccc; }

.menu {
  margin-top: 5px;
  margin-left: 15px;
  cursor: pointer; }

.messages {
  line-height: 19px; }

#top .btn {
  padding: 0.5rem 0 !important; }

.notifications_badge_top {
  top: -12px !important;
  margin-left: -7px !important; }

.user-settings button {
  color: #343434;
  border: none; }

.messages .fa-bell-o, .messages .fa-envelope-o {
  font-size: 16px; }

.notifications .popover-header {
  background-color: #0056D2;
  color: #ffffff;
  font-size: 14px;
  margin-top: -8px;
  font-weight: bold;
  text-align: center; }

#request_btn .badge {
  top: -12px !important;
  left: -9px !important; }

.request_section .fa-bell {
  font-size: 15px;
  color: var(--text-on-accent); }

.request_section .fa-bell:hover {
  color: var(--text-disabled); }

.request_section .message-img {
  width: 34px;
  height: auto; }

#requests .chat_name {
  font-size: 15px;
  font-weight: 500; }

#requests .data {
  border: 0;
  margin-top: 4px; }

#requests .setting_title {
  color: #666;
  margin: 25px 0 0 8px; }

#requests .fa-circle {
  margin-top: 7px; }

#requests .progress {
  height: 10px;
  margin-bottom: 0; }

.dropdown-item.title {
  margin-top: -8px;
  font-weight: bold;
  padding: 7px 0;
  background-color: #0056D2;
  color: #0056D2;
  text-align: center;
  font-size: 15px; }

.setting_ions {
  font-size: 20px;
  margin-top: 10px; }

/* End of Navbar Sliders dropdown */
/* top right menu dropdowns */
.dropdown-menu#request_list {
  left: -254%; }

.notifications .dropdown-menu {
  width: 230px;
  left: -113%;
  top: 38px; }

.messages .dropdown-menu {
  width: 220px !important;
  left: -130%; }

.messages .dropdown-menu .popover-footer a, .notifications .dropdown-menu .popover-footer a {
  display: block; }

.user-settings .dropdown-menu {
  width: 167px;
  left: -63px;
  top: 34px; }

.notifications .data {
  border-bottom: 1px solid #ddd;
  padding: 5px 15px 5px 15px;
  display: inline-block;
  width: 100%;
  cursor: pointer;
  font-size: 12px; }

.notifications .message-data {
  max-width: 100%;
  min-width: 30px;
  height: auto; }

.notifications .dropdown-menu:before {
  position: absolute;
  top: -9px;
  left: 24%;
  display: inline-block;
  content: '';
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ccc;
  border-bottom-color: #ffb366;
  border-left: 10px solid transparent; }

#notifications .data:hover, #messages .data:hover {
  background-color: #eee; }

.messages .dropdown-menu:before {
  position: absolute;
  top: -9px;
  left: 29%;
  display: inline-block;
  content: '';
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ccc;
  border-bottom-color: #ffb366;
  border-left: 10px solid transparent; }

.user-settings .dropdown-menu:before {
  position: absolute;
  top: -9px;
  left: 80%;
  display: inline-block;
  content: '';
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ccc;
  border-bottom-color: #002D62;
  border-left: 10px solid transparent; }

.popover-footer {
  padding: 8px 14px;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  background-color: #0056D2;
  border-top: 1px solid #0056D2;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0 0 3px 3px;
  text-align: center;
  margin-bottom: -8px; }

.notifications .message-img {
  width: 30px;
  height: auto;
  margin: 7px 0 0 -7px; }

.no-bg {
  background: none !important; }

.bg-container {
  background: #ffffff;
  color: var(--brand-secondary); }

.user-settings .dropdown-menu li a span {
  float: left;
  display: inline-block;
  color: #aaa;
  padding-right: 10px; }

.user-settings .dropdown-menu li a {
  padding: -1px;
  display: table;
  width: 100%;
  font-size: 13px;
  letter-spacing: 0.05em; }

.user-settings .popover-header {
  margin-top: -5px;
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 12px;
  background-color: #e6e6e6;
  text-align: center; }

.well {
  margin-left: 5px;
  background-color: #fefefe;
  border-color: #fefefe;
  margin-bottom: 10px;
  padding: 10px 8px 1px 5px; }

#right .alert {
  margin-left: 5px; }

/* End of top right menu dropdowns */
/*=============================== top header search section css =======================*/
.small_device_search i {
  font-size: 15px;
  margin-right: 5px; }

.search_bar_small {
  padding: 10px 30px 30px 30px; }

#search_modal .close {
  margin: 10px 10px 0 0; }

.top_search_box:after, .top_search_box:before {
  content: " ";
  display: table; }

.header_input_search.closed {
  width: 37px;
  border-color: transparent;
  background-color: transparent; }

.header_input_search input:focus {
  border: 1px solid #6abef7 !important; }

/*=============================== top header search section css ================================*/
/* ================================ End of top bar ===================================*/
/* ================================ 2.2 Left menu ===================================*/
#left {
  background-color: #ffffff;
  font-size: 15px;
  margin-top: -1px;
  width: 240px;
  position: absolute;
  left: -250px;
  height: auto;
  overflow: hidden;
  box-shadow: 0 10px 8px 3px #ccc; }

.sidebar-left-opened #left {
  overflow-y: auto; }

.left_media {
  /* background-image: url("../img/2.JPG");  */
	background-color: var(--brand-primary);
}

.user-media .user-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; 
  color: var(--text-on-brand); }

.user-media .user-link .user-img {
  width: 86px;
  height: 86px;
  object-fit: cover;
  margin: 17px 10px 3px 17px;
  justify-content: center; }

.user-media .media-body {
  display: block;
  margin-left: 12px; }

.user-media .media-body h5.media-heading {
  align-items: center;
  color: #fff;
  padding-top: 8px;
  margin-bottom: 3px; }

.user-media .media-body ul.user-info li {
  color: #ccc; }

.side-right .user-link .user-label {
  left: 6px;
  right: auto; }

.sidebar-left-mini .user-wrapper {
  position: absolute;
  top: 0;
  left: -100%;
  display: none;
  min-width: 250px; }

.user-media-toggleHover {
  display: none; }

.sidebar-left-mini .user-media-toggleHover {
  font-size: 18px;
  color: #fff;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  display: inherit; }

.sidebar-left-mini .user-media:hover .user-wrapper {
  left: 100%;
  display: inherit;
  z-index: 99; }

.sidebar-left-mini.side-right .user-media:hover .user-wrapper {
  left: auto;
  right: 100%; }

.user-wrapper .user-info {
  width: 100%;
  text-align: center;
  padding: 20px 10px;
}

#menu.affix {
  position: fixed;
  width: 250px;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; }

#menu.affix:hover {
  overflow-y: scroll; }

.sidebar-left-mini #menu .nav-header {
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important; }

#menu .fa.arrow {
  float: right;
  padding-top: 3px;
  margin-right: 15px;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s ease;
  transform-origin: center; }

#menu .fa.arrow:before {
  content: "\f104"; }

#menu .active > a > .fa.arrow:before {
  content: "\f104"; }

#menu li.active > a > .fa.arrow {
  transform: rotate(-90deg); }

#menu > li.dropdown_menu > a {
  display: flex;
  align-items: center; }

#menu > li.dropdown_menu > a > .link-title {
  flex: 1; }

#menu > li.dropdown_menu > a > .fa.arrow {
  float: none; }

.badge {
  padding: 0.4em 0.4em; }

.badge-pill {
  padding-left: 0.6em;
  padding-right: 0.6em; }

.admin_img3 {
  width: 64px;
  height: 64px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.35s cubic-bezier(0.4, 0, 0.2, 1); }

#left, #right {
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: left, width;
  z-index: 90;
  width: 250px; }

#menu li a {
  color: var(--menu-text);
  padding: 15px 8px 15px 15px;
  border-bottom: none; }

#menu li.active > ul {
  background-color: var(--menu-submenu-bg); }

#menu li ul li a {
  padding: 10px 8px 10px 30px; }

#menu li.active > a {
  color: var(--menu-active-text); }

#menu > li.active {
  background-color: var(--menu-active-bg); }

#menu > li.active > a {
  border-left: 4px solid var(--brand-accent);
  padding-left: 11px; }

.sidebarbottom {
  top: auto !important;
  bottom: 0 !important; }

#menu li:nth-child(3) .sidebarbottom {
  top: 0 !important;
  bottom: auto !important; }

#menu, #menu ul, #menu li, #menu a {
  padding: 0;
  margin: 0;
  color: var(--menu-text); }

#menu, #menu ul {
  list-style: none; }

#menu li, #menu a {
  position: relative;
  display: block; }

#menu a, #menu a:hover, #menu a:focus, #menu a:active {
  text-decoration: none; }

#menu ul {
  background: var(--menu-submenu-bg); }

#menu li > ul.collapse {
  overflow: hidden;
  will-change: height; }

#menu li > ul.collapsing {
  overflow: hidden;
  transition: height 0.24s cubic-bezier(0.22, 1, 0.36, 1); }

#menu li > ul.collapse.show {
  animation: menuSubmenuFade 0.18s ease-out; }

@keyframes menuSubmenuFade {
  from {
    opacity: 0.75; }
  to {
    opacity: 1; } }

#menu ul > li > ul.sub-submenu > li > a {
  padding-left: 50px; }

#menu ul > li > ul > li > ul.sub-submenu > li > a {
  padding-left: 65px; }

#menu ul > li > ul > li > ul.sub-submenu > li > ul > li > a {
  padding-left: 80px; }

#menu ul > li > ul > li > ul.sub-submenu > li > ul > li > ul > li > a {
  padding-left: 95px; }

#menu li:not(.active) a:hover {
  background: var(--menu-hover-bg);
  color: var(--menu-hover-text);
  border-left: 4px solid var(--brand-accent);
  padding: 15px 8px 15px 11px;
  box-shadow: inset 0 1px 0 var(--border-default), inset 0 -1px 0 var(--border-default); }

#menu li ul li:not(.active) a:hover {
  background: var(--menu-hover-bg);
  color: var(--menu-hover-text);
  border-left: 4px solid var(--brand-accent);
  padding: 10px 8px 10px 26px;
  box-shadow: inset 0 1px 0 var(--border-default), inset 0 -1px 0 var(--border-default); }

#menu li.active > ul > li > a {
  color: var(--menu-text); }

#menu li.active ul li.active > a {
  color: var(--menu-active-text);
  background-color: var(--menu-active-bg);
  border-left: 4px solid var(--brand-accent);
  padding-left: 26px;
  font-weight: 600; }

.sub-menu.sub-submenu.collapse.show li a:hover {
  padding-left: 46px !important; }

.sub-menu.sub-submenu.collapse.show li.active a:hover {
  padding-left: 50px !important; }

.sub-menu.sub-submenu.collapse.show .sub-submenu li.active a:hover {
  padding-left: 65px !important; }

.sub-menu.sub-submenu.collapse.show .sub-submenu li a:hover {
  padding-left: 61px !important; }

.sub-menu.sub-submenu.collapse.show .sub-submenu .sub-submenu li.active a:hover {
  padding-left: 80px !important; }

.sub-menu.sub-submenu.collapse.show .sub-submenu .sub-submenu li a:hover {
  padding-left: 76px !important; }

.sub-menu.sub-submenu.collapse.show .sub-submenu .sub-submenu .sub-submenu li a:hover {
  padding-left: 91px !important; }

.new_badge {
  margin-left: 10px; }

.no_header #left {
  display: table-cell;
  float: inherit; }

.no_header #content {
  display: table-cell;
  vertical-align: top; }

/* ================================ End of left menu ===================================*/
/*========================== 2.3 Minimize menu hover ======================*/
.dropdown_menu.active:hover {
  background-color: var(--menu-active-bg) !important; }

.sidebar-left-hidden .dropdown_menu .sub-menu .active {
  background-color: var(--menu-active-bg) !important; }

.sidebar-left-hidden .dropdown_menu .sub-menu li.active > a {
  background-color: var(--menu-active-bg) !important;
  color: var(--menu-active-text) !important;
  padding-top: 10px  !important;
  padding-bottom: 10px !important; }

.sidebar-left-hidden .dropdown_menu li.active > a:hover {
  background-color: var(--menu-active-bg) !important;
  border-left: 0 !important;
  padding: 10px 8px 10px 30px !important; }

.sidebar-left-hidden .dropdown_menu .sub-menu li.active a:hover {
  box-shadow: none !important;
  padding-top: 10px  !important;
  padding-bottom: 10px !important; }

.sidebar-left-hidden .sub-submenu li.active > a:hover {
  border-left: 0 !important; }

.sidebar-left-hidden .dropdown_menu .collapse li.active > a {
  background-color: var(--menu-active-bg); }

.sidebar-left-hidden .dropdown_menu .collapse li.active > a:hover {
  background-color: var(--menu-active-bg); }

.sidebar-left-hidden .dropdown_menu.active .collapse li.active > a:hover {
  background-color: var(--menu-active-bg) !important;
  border-left: 0;
  padding: 10px 8px 10px 30px !important; }

.sidebar-left-hidden #menu .dropdown_menu > ul {
  max-height: 500px;
  overflow-y: auto; }

/*======================= minimize menu hover end ===========================*/
/*================================== 2.4 Right menu Css =====================================*/
#top .navbar-static-top {
  background-color:var(--brand-secondary);  /*color de fondo de la cabecera*/ 
  color: var(--text-on-accent); /* color componentes cabecera*/	
  z-index: 9999; }

#left #menu > li > a > .fa {
  margin-right: 10px;
  color: var(--sidebar-icon);
}

#left #menu > li.active > a > .fa {
  color: var(--menu-active-icon);
}

#request_list.rightsidebar-without-nav {
  padding-top: 0 !important;
  bottom: -52px; }

#request_list {
  top: 0;
  width: 250px;
  position: fixed;
  right: -250px;
  background-color: #fff;
  transition: all 0.3s ease-in-out; }

.right_menu_section #request_list {
  box-shadow: 0 1px 8px 0 #999;
  right: 0;
  z-index: 999; }

#request_list .message-img {
  width: 30px;
  height: auto;
  margin: 7px 0 0 -7px; }

#request_list .data {
  padding: 10px 0 3px 0;
  display: inline-block;
  width: 100%;
  cursor: pointer;
  font-size: 12px; }

#request_list .chat_name {
  font-size: 14px; }

.fixedMenu_left #left {
  padding-top: 52px; }

.fixedNav_top #left.fixed {
  padding-top: 52px !important; }

.fixedNav_position #request_list.rightsidebar-without-nav {
  padding-top: 52px !important; }

.jspVerticalBar {
  width: 4px !important;
  background: none; }

.sidebar-left-hidden #left .jspVerticalBar {
  width: 0 !important; }

.jspTrack {
  background: transparent !important; }

.lcs_switch {
  margin-top: 5px;
  width: 60px;
  height: 24px; }

.lcs_label {
  top: 4px; }

.lcs_cursor {
  width: 17px;
  height: 17px; }

.lcs_switch.lcs_on .lcs_cursor {
  left: 39px; }

.lcs_switch.lcs_on .lcs_label_on {
  left: 5px; }

.lcs_switch.lcs_off .lcs_label_off {
  right: 5px; }

/*checkbox*/
#request_list .checkbox label input[type="checkbox"] {
  display: none; }

#request_list .checkbox .cr {
  position: relative;
  display: inline-block;
  border: 1px solid #a9a9a9;
  border-radius: .25em;
  width: 1.3em;
  height: 1.3em;
  float: left;
  margin-right: .5em; }

#request_list .checkbox label input[type="checkbox"] + .cr > .cr-icon {
  transform: scale(3) rotateZ(-20deg);
  opacity: 0;
  transition: all .3s ease-in; }

#request_list .checkbox label input[type="checkbox"]:checked + .cr > .cr-icon {
  transform: scale(1) rotateZ(0deg);
  opacity: 1; }

#request_list .checkbox .cr .cr-icon {
  position: absolute;
  font-size: .8em;
  line-height: 0;
  top: 50%;
  left: 17%; }

#settings_section .checkbox {
  margin-top: 7px; }

#request_list li {
  width: 49%; }

#request_list li a {
  border: none;
  background-color: #fff; }

#request_list .nav-tabs {
  border-bottom: 0; }

#request_list li a:hover {
  color: var(--brand-accent); }

#request_list li a {
  border-bottom: 3px solid var(--border-default); }

#request_list li a.active {
  border-bottom: 3px solid var(--brand-accent);
  color: var(--brand-accent) !important;
  transition: 1s; }

#request_list .jspPane .tab-content {
  padding-bottom: 20px; }

/* ==================== End of right menu css ======================*/
/*======================= 3. header breadcrumb ===================================*/
.head {
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  color: var(--brand-secondary);
  background-color: #ffffff; }

.nav_top_align {
  margin-top: 15px; }

.nav_breadcrumb_top_align {
  margin: 7px 0 7px 0; }

.breadcrumb-item a {
  color: var(--brand-secondary); }

.breadcrumb-item a:hover {
  color: var(--text-disabled); }

.breadcrumb-item.active {
  color: var(--secondary); }

.breadcrumb {
  padding: 0.5rem 0; }

.breadcrumb li:nth-child(2) a {
  margin-left: -3px; }

.head .main-bar {
  padding: 5px 20px; }

.head {
  margin-bottom: 10px; }

.head .main-bar h3 {
  margin-top: 0;
  margin-bottom: 0;
  color: #bababa; }

/*==================================== header breadcrumb end ===========================*/
/*============================ 4.Skin clors section css ======================*/
/*skins*/
/*	RIGHT = TARGETA DERECHA DE AYUDA		*/
#right {
  top: 130px;
  width: 600px;						/* width: npx  valor debe ser igual al right de .sidebar-right-opened*/
  right: -600px;					/* width: npx  valor debe ser igual al right de .sidebar-right-opened*/
  border: 2px solid #00cc99;
  border-right: 0;
  border-radius: 8px 0 0 8px;
  position: fixed;
  
  background-color: #fff; }

.sidebar-right-opened .no-print {
  background-color: var(--primary);
  right: 600px !important; }		/* right: npx  valor debe ser igual al width de #right*/

.skin-icon {
  color: #fff;
  padding: 4px;
  border-radius: 15px;
  width: 30px;
  height: 30px;
  font-size: 22px !important; }

.sidebar-right-opened #right {
  box-shadow: 8px 0 7px 1px #999;
  right: 0; }

.no-print {
  background-color: var(--primary); 
  z-index: 90; }

.skinmulti_btn {
  width: 40px;
  height: 40px;
  display: inline-table;
  cursor: pointer;
  margin-bottom: 12px; }

.skin_size {
  height: 20px;
  width: 40px; }

.skin_btn {
  width: 40px;
  height: 40px;
  display: inline-table;
  cursor: pointer; }

#right .default_skin {
  border: 1px solid #ccc;
  background-color: transparent;
  color: #525252; }

#right .default_skin:active, #right .default_skin:hover {
  color: #282828;
  background-color: #e6e6e6 !important; }

#right .btn.btn-dark:hover {
  color: #fff; }

.skinmulti_btn, .skin_btn {
  margin-left: 15px; }

.b_t_r {
  border-top-left-radius: 50px;
  border-top-right-radius: 50px; }

.b_b_r {
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px; }

.b_r {
  border-radius: 50px; }

.skin_shaddow {
  box-shadow: 1px 4px 5px 2px #ccc; }

.skinsingle_btn {
  margin-top: 10px; }

/*for dark button*/
.btn-dark {
  background-color: #282828;
  border: #282828;
  color: #fff; }

/*for default button*/
.default_skin {
  margin-left: 10px; }

.skin_blue {
  background-color: #539CC1; }

.skin_green {
  background-color: #7F9E40; }

.skin_purple {
  background-color: #E07298; }

.skin_orange {
  background-color: #ffb25a; }

.skin_red {
  background-color: #e74c4c; }

.skin_mint {
  background-color: #69d3bf; }

.mint_bg {
  background-color: #69d3bf; }

/*skin clors section css end*/
/*============================ End of skin clors section css ======================*/
/*======================== 5. Common css ==========================*/
.text-white {
  color: #fff; }

.text-mint {
  color: #0FB0C0; }

.text-brown {
  color: #9C6426; }

.bg-white {
  background-color: #fff; }

.font_18 {
  font-size: 18px; }

.section_border {
  border: 1px solid rgba(0, 0, 0, 0.125); }

.m-r-0 {
  margin: 0; }

.m-r-5 {
  margin-right: 5px; }

.m-r-20 {
  margin-right: 20px; }

.m-t-5 {
  margin-top: 5px; }

.m-t-10 {
  margin-top: 10px !important; }

.m-t-15 {
  margin-top: 15px; }

.m-t-20 {
  margin-top: 20px; }

.m-t-25 {
  margin-top: 25px; }

.m-t-30 {
  margin-top: 30px; }

.m-t-35 {
  margin-top: 35px; }

.m-t-40 {
  margin-top: 40px; }

.m-l-0 {
  margin-left: 0; }

.m-l-10 {
  margin-left: 10px; }

.m-l-20 {
  margin-left: 20px; }

.m-r-15 {
  margin-right: 15px; }

.m-b-0 {
  margin-bottom: 0; }

.m-b-20 {
  margin-bottom: 20px; }

.p-b-15 {
  padding-bottom: 15px; }

.p-b-20 {
  padding-bottom: 20px; }

.p-t-15 {
  padding-top: 15px; }

.p-t-25 {
  padding-top: 25px; }

.p-l-0 {
  padding-left: 0; }

.p-r-0 {
  padding-right: 0; }

.p-lr-0 {
  padding-left: 0;
  padding-right: 0; }

.p-l-5 {
  padding-left: 5px; }

.p-d-0 {
  padding: 0; }

.p-d-15 {
  padding: 15px; }

.p-l-10 {
  padding-left: 10px; }

.b_r_20 {
  border-radius: 20px; }

.pointer {
  cursor: pointer; }

#content {
  transition: width 0.4s;
  padding-bottom: 15px; }

.outer {
  padding: 10px;
  margin-top: 25px; }

.outer:before, .outer:after {
  content: " ";
  display: table; }

.outer:after {
  clear: both; }

.inner {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px; }

.inner hr {
  border-top-color: #ccc; }

body.error {
  padding-top: 40px; }

body.error .logo h1 {
  color: #FFFFFF;
  font-size: 100px;
  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15); }

.skin_txt {
  color: #4f4d4d; }

.user-media .media-body ul.user-info li {
  color: #ccc; }

.modal-backdrop.show {
  z-index: 99999 !important; }

.modal {
  z-index: 999999; }

/* ===================End of common css ==================*/
/* ============================ 6.Users section ===================*/
.input_field_sections {
  margin-top: 35px;
  padding: 0 30px 0 15px; }

.has-error label, .has-error span, .has-error small {
  color: #ff6666; }

.users_grid_tools .tools a {
  background-color: #424242;
  border: 1px solid gray;
  padding: 8px; }

.view_user_nav_padding {
  padding: 12px 0 2px 20px !important; }

.view_user_nav_padding > li > a {
  color: #000; }

.view_user_nav_padding.nav-tabs .nav-link.active, .view_user_nav_padding.nav-tabs .nav-link:hover {
  padding-bottom: 10px;
  border-bottom: 4px solid #ff8080;
  position: relative;
  color: #000;
  background: none;
  border-color: #fff #fff #ff8080 #fff; }

.jspPane .nav-tabs .nav-link.active {
  padding-bottom: 7px; }

.inner hr {
  margin-top: -6px; }

.card_nav_hover > a:hover {
  padding-bottom: 10px;
  border-bottom: 4px solid red; }

.card_nav_body_padding {
  padding: 15px; }

a.list-group-item {
  color: #555;
  text-decoration: none; }

#tryitForm .has-error label {
  color: #e74c3c; }

#tryitForm .has-error small {
  font-size: 14px;
  padding: 0; }

#tryitForm .help-block {
  padding-left: 15px; }

.help-block {
  font-size: 14px !important; }

.fileinput-new, .fileinput-preview img {
  width: 100%;
  max-width: 240px;
  height: auto;
  max-height: 180px;
  object-fit: cover; }

.img-thumbnail {
  background-color: #fff !important; }

.custom-control-description {
  color: #5a5a5a !important; }

.gender_message .custom-controls-stacked {
  overflow: auto; }

.custom-control .custom-control-indicator {
  margin-top: -2px; }

.gender_message .custom-radio .custom-control-indicator {
  margin-left: 3px; }

#select2_sample_chosen {
  width: 100% !important; }

.card_block_top_align {
  margin-top: 15px; }

/* ==========================End of users section ==============================*/
/* izi toast*/
.iziToast > .iziToast-progressbar > div {
  background: red; }

.iziToast {
  background-color: #f8f8f8; }

/* end of izi toast */
.toggle_icon {
  color: #000;
  border: 1px solid #fff; }

.margin15_bottom {
  margin-bottom: 15px; }

#wrap:before, #top:before, .head:before, .Footer:before, #wrap:after, #top:after, .head:after, .Footer:after {
  content: " ";
  display: table; }

#wrap:after, #top:after, .head:after, .Footer:after {
  clear: both; }

.Wrap, #wrap {
  margin: 0 auto -20px auto;
  position: relative;
  background: #fff !important; }

.xs_skin_hide {
  float: right;
  right: 4px;
  color: #525252;
  font-size: 14px;
  border: 1px solid black;
  padding: 3px 10px;
  border-radius: 5px; }

.sidebar-left-opened #left {
  left: 0; }

.sidebar-right-opened {
  position: relative; }

.sidebar-right-opened.fixed .navbar-fixed-top {
  right: 0; }

.right_progressbar_section .progress {
  height: 0.7rem;
  margin-bottom: 20px; }

.main-bar .breadcrumb > li + li:before {
  padding: 0 3px;
  font: normal normal normal 15px/1 FontAwesome; }

.main-bar.row {
  margin: 0; }

/* ========== Maps  ============= */
.noheader_logo {
  padding: 15px 0 0 15px; }

.sidebar-right-opened .fixed_header_menu_conainer {
  margin-left: 0; }

.form_div > div {
  padding: 10px; }

.search_route_maps_buttons_margin {
  margin: 20px 0 0 37px; }

.search_route_maps_buttons_margin a {
  padding: 5px 10px; }

.maps_body {
  margin: 0; }

#get_route, #back, #forward {
  margin: 10px 0; }

.vector_maps {
  height: 400px; }

.vector_maps .jqvmap-zoomin, .vector_maps .jqvmap-zoomout {
  background-color: #bd7bda;
  width: 15px;
  height: 15px; }

.jqvmap-zoomin, .jqvmap-zoomout {
  padding: 2px; }

.vector_maps {
  background-color: #fff !important; }

/* ==================End of maps ========================*/
/* END CONTENT STYLES */
/*==================================7. Tables==========================*/
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:before, table.dataTable thead .sorting_desc_disabled:after {
  position: absolute;
  bottom: 0.9em;
  display: block;
  opacity: 0.3; }

table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
  right: 1em;
  content: "\2191"; }

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
  right: 0.5em;
  content: "\2193"; }

table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:after {
  opacity: 1; }

/*================================== End of Tables==========================*/
/* ========================== tooltips ===============================*/
.tipso_style {
  cursor: pointer !important;
  border-bottom: none !important; }

.tipso_bubble, .popover, .tooltip {
  z-index: 1000 !important; }

/* =============================8. Media queries =========================*/
/*=========== Boxed =================*/
@media (min-width: 768px) and (max-width: 790px) {
  .boxed .top_search_box {
    width: 150px; } }

@media (max-width: 767px) {
  .layout_styles {
    display: none; } }

@media (min-width: 767px) {
  /* =============================End of Boxed layout css =========================*/
  .head {
    margin-top: 10px; }
  #top.fixed {
    position: fixed;
    z-index: 91040;
    top: 0;
    left: 0;
    right: 0; }
  .small_device_search {
    display: none; }
  #left.fixed {
    position: fixed;
    z-index: 90;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 52px; }
  .fixedMenu_left #left .jspScrollable, .fixedMenu_left #left .jspContainer {
    overflow: visible !important; }
  #left.fixed.rightsidebar-without-nav {
    padding-top: 0; }
  .fixedNav_top {
    margin-top: 72px; /* margen de separacion de contenido bajo el menu, antes 52px*/ 
	}
  .sidebar-left-hidden .fixedNav_top #content {
    margin-left: 70px; }
  .fixedNav_top #content, .fixedMenu_left #content {
    margin-left: 250px; }
  .sidebar-left-hidden.fixedMenu_left #content {
    margin-left: 70px; }
  /*Bread crumb hide*/
  .breadcrumb_hide {
    display: none; } }

@media (max-width: 546px) {
  .preloader_img {
    left: 46%;
    top: 47%; } }

@media (max-width: 767px) {
  body.error .logo h1 {
    font-size: 60px; } }

@media (min-width: 768px) {
  #left {
    position: relative;
    float: left;
    left: auto;
    height: auto; }
  .sidebar-left-hidden #left {
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden; }
  .sidebar-left-mini #left {
    width: 50px; }
  #content {
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: width, margin-left;
    overflow: hidden; }
  .sidebar-right-opened {
    right: 0; }
  body.boxed {
    margin-bottom: 0; }
  body.boxed .Wrap, body.boxed #wrap, body.boxed .Footer, body.boxed #top .navbar.navbar-fixed-top {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    float: none; }
  body.boxed .Footer, body.boxed #footer {
    position: relative; }
  .sidebar-left-hidden #left {
    width: 70px !important;
    height: auto !important;
    visibility: visible !important;
    overflow: hidden !important; }
  .sidebar-left-hidden #left.transition-done {
    overflow: visible !important; }
  .menu_hide {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    max-width: 300px;
    overflow: hidden;
    /* normal permite que etiquetas largas (ej. "Mis Instrumentos de
       Financiamiento") bajen a una segunda linea en vez de cortarse */
    white-space: normal; }
  .sidebar-left-hidden #left .menu_hide {
    opacity: 0;
    max-width: 0;
    white-space: nowrap;
    pointer-events: none; }
  .sidebar-left-hidden #left .fa {
    font-size: 18px;
    margin-left: 10px; }
  .sidebar-left-hidden #left .admin_img3 {
    width: 45px;
    height: 45px;
    margin: 17px 0 0 12px; }
  .sm_content {
    min-height: 960px !important; }
  /*==========================menu hover=============================*/
  body.sidebar-left-hidden #menu ul.collapse:not(.sub-submenu) {
    position: absolute;
    width: 250px !important;
    top: 0;
    right: -250px;
    z-index: 2;
    display: none;
    height: auto; }
  body.sidebar-left-hidden #menu > li:not(.active):hover > a {
    background: var(--menu-hover-bg) !important;
    border-left: 4px solid var(--brand-accent) !important;
    padding: 15px 8px 15px 11px !important;
    box-shadow: none !important; }
  body.sidebar-left-hidden #menu > li:hover ul.collapse:not(.sub-submenu) {
    display: block;
    height: auto;
    z-index: 1000;
    background-color: #fff;
    border-left: 2px solid #ccc;
    box-shadow: 3px 0 12px -1px #525252; }
  .header_input_search {
    width: 100%;
    height: 30px;
    position: relative;
    padding: 0 35px 0 0;
    border: 1px solid #9bd6fe;
    border-radius: 25rem;
    background: #fff;
    overflow: hidden;
    transition: all .5s ease-in-out; }
  .header_input_search.closed input[type=text] {
    opacity: 0; }
  .font-icon-search:before {
    content: "\f002";
    color: #4fb7fe;
    font-size: 16px; }
  [class*=" font-icon-"]:before, [class^=font-icon-]:before, [data-icon]:before {
    font-family: FontAwesome !important; }
  .header_input_search {
    background-color: #e7f1ff; }
  .header_input_search input[type=text] {
    width: 100%;
    padding: 1px 0 0 14px !important;
    border: none;
    background: none;
    color: #343434;
    transition: all .5s ease-in-out;
    border-top-left-radius: 25rem !important;
    border-bottom-left-radius: 25rem !important; }
  .header_input_search input:focus, .header_input_search button:focus {
    outline: none; }
  .header_input_search button {
    display: block;
    position: absolute;
    right: 0;
    top: -2px;
    width: 35px;
    height: 100%;
    text-align: center;
    border: none !important;
    background: none !important; }
  .header_input_search .overlay {
    display: none; }
  .inner {
    float: left;
    width: 100%; }
  .head .search-bar .main-search {
    margin-right: auto; }
  .head .main-bar h3 {
    margin-top: 5px; }
  .search-bar {
    float: left;
    padding: 10px 4px; }
  .side-right .search-bar {
    float: right; }
  .search-bar .input-small.form-control {
    border-radius: 3px; }
  #top .topnav {
    margin: 4px 0; }
  .top_menu {
    margin-top: 1px;
    padding: 0 0 2px 45px; }
  .head .search-bar {
    border-bottom-width: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.05) inset; }
  .side-right .head .search-bar {
    border-right-width: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.05) inset; }
  .search-bar {
    float: left;
    padding: 10px 4px; }
  .side-right .search-bar {
    float: right; }
  .search-bar .input-small.form-control {
    border-radius: 3px; }
  .main-bar {
    display: block;
    overflow: hidden; }
  .head .search-bar .main-search {
    margin-right: auto; }
  .head .main-bar h3 {
    margin-top: 5px; } }

@media (max-width: 1240px) {
  .sidebar-right-opened #nav-content {
    width: 30%; }
  .sidebar-right-opened .quick_text {
    display: none; } }

@media (min-width: 992px) {
  .search-bar {
    width: 250px;
    padding: 10px 15px; }
  .search-bar .input-group-btn {
    display: table-cell; }
  .search-bar .input-small.form-control {
    border-radius: 3px 0 0 3px; } }

@media (max-width: 967px) {
  .advancnced_customized_fade {
    padding-top: 30px !important; } }

@media (max-width: 768px) {
  .flip-scroll th {
    padding: 11px; }
  .small_device_search {
    border: none; } }

@media (min-width: 768px) and (max-width: 1200px) {
  .fixed-header_menu {
    position: fixed !important;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    margin-top: 53px; } }

@media (min-width: 767px) {
  .fixed_header_menu_conainer {
    margin-left: 250px; } }

@media (min-width: 422px) {
  .xs_skin_hide {
    display: none; } }

@media (min-width: 320px) and (max-width: 382px) {
  .pagination_padding_general_components > li > a {
    padding: 5px 7px !important; }
  .nav-inline .nav-link {
    padding: 6px 9px; } }

@media (max-width: 991px) and (min-width: 768px) {
  .user-settings .dropdown-menu {
    top: 34px !important; } }

@media (max-width: 553px) {
  .notifications .dropdown-menu {
    top: 34px !important; }
  .user-settings .dropdown-menu {
    top: 30px !important; } }

@media (min-width: 992px) and (max-width: 1023px) {
  .top_menu {
    margin-top: 1px;
    padding: 0 0 2px 20px; } }

@media (min-width: 1024px) {
  .top_menu {
    margin-top: 1px;
    padding: 0 0 2px 45px; } }

@media (max-width: 504px) {
  .menu {
    float: right; } }

/*boxed layouts*/
@media (max-width: 1200px) {
  .boxed_top_menu {
    padding: 0 0 2px 31px !important; } }

@media (max-width: 1199px) {
  .media_max_1199 {
    margin-top: 35px; } }

@media (max-width: 991px) {
  .media_max_991 {
    margin-top: 35px; } }

@media (max-width: 573px) {
  .media_max_573 {
    margin-top: 35px; }
  .topnav.dropdown-menu-right {
    margin-left: auto; } }

@media (max-width: 424px) {
  .vector_maps {
    height: 250px; } }

/* ============================= End of media queries ===============================*/
#input_search {
  border: 1px solid #ddd;
  padding-bottom: 7px;
  padding-top: 3px; }

.modal-header .btn-outline-primary:hover,
.modal-header .btn-outline-primary:focus {
  cursor: pointer;
  background: none;
  border: none; }

/* ============================= input group append and prepend ===============================*/
.input-group-text {
  border-radius: 0; }

.custom-control-label::before {
  top: 0.464rem; }

.btn-outline-warning:hover, .btn-outline-danger:hover {
  color: #fff !important; }

.card #jstree_events {
  display: none; }

/* ==========================================================================
   FASE 1 — OVERRIDES BOOTSTRAP CON TOKENS DE MARCA
   --------------------------------------------------------------------------
   Bootstrap (components.css) compila con valores hex literales, por lo que
   sobreescribir las variables --primary/--success/etc. en :root NO basta.
   Estas reglas re-mapean los componentes Bootstrap a los tokens de marca,
   asi un cambio en :root SI se propaga.
   ========================================================================== */

/* Botones */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  color: var(--text-on-brand);
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg); }

/* =============================================================================
   Módulo Notificaciones — campanita navbar + dropdown + formulario admin
   ============================================================================= */

/* Campanita wrapper */
.notif-wrapper {
    position: relative;
    display: inline-block;
}

#notif-bell {
    position: relative;
    cursor: pointer;
}

/* Badge de conteo */
#notif-badge {
    display: none;
    position: absolute;
    top: -6px;
    right: -8px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    padding: 0 4px;
    pointer-events: none;
}

/* Dropdown */
#notif-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    z-index: 9999;
    overflow: hidden;
    font-size: 13px;
}

.notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    color: #343a40;
}

.notif-count {
    font-size: 11px;
    font-weight: 400;
    color: #6c757d;
}

.notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 340px;
    overflow-y: auto;
}

.notif-item {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f1f1;
    transition: background .15s;
}

.notif-item:last-child { border-bottom: none; }

.notif-item:hover { background: #f8f9fa; }

.notif-enlace a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.notif-enlace a:hover .notif-titulo {
    color: var(--primary-color, #007bff);
    text-decoration: underline;
}

.notif-titulo {
    font-weight: 600;
    color: #212529;
    margin-bottom: 3px;
}

.notif-cuerpo {
    color: #495057;
    line-height: 1.4;
    margin-bottom: 4px;
}

.notif-fecha {
    font-size: 11px;
    color: #adb5bd;
}

.notif-empty {
    padding: 20px 14px;
    text-align: center;
    color: #6c757d;
    font-size: 13px;
}

/* Grilla de checkboxes de perfiles (formulario crear) */
.notif-perfiles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    padding: 10px 0;
}

@media (max-width: 576px) {
    .notif-perfiles-grid { grid-template-columns: 1fr; }
    #notif-dropdown { width: 280px; right: -60px; }
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: var(--text-on-brand);
  background-color: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover); }

.btn-secondary,
.btn-secondary.disabled,
.btn-secondary:disabled {
  color: var(--text-on-brand);
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary); }
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: var(--text-on-brand);
  background-color: var(--rp-icon-sidebar) !important;
  border-color: var(--rp-icon-sidebar); }

.btn-success,
.btn-success.disabled,
.btn-success:disabled {
  color: var(--text-on-brand);
  background-color: var(--btn-success-bg);
  border-color: var(--btn-success-bg); }
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active {
  color: var(--text-on-brand);
  background-color: var(--rp-mint);
  border-color: var(--rp-mint); }

.btn-warning,
.btn-warning.disabled,
.btn-warning:disabled {
  color: var(--text-on-brand);
  background-color: var(--btn-warning-bg);
  border-color: var(--btn-warning-bg); }
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active {
  color: var(--text-on-brand);
  background-color: #d68a13;
  border-color: #d68a13; }

.btn-danger,
.btn-danger.disabled,
.btn-danger:disabled {
  color: var(--text-on-brand);
  background-color: var(--btn-danger-bg);
  border-color: var(--btn-danger-bg); }
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active {
  color: var(--text-on-brand);
  background-color: #c93838;
  border-color: #c93838; }

.btn-info,
.btn-info.disabled,
.btn-info:disabled {
  color: var(--text-on-brand);
  background-color: var(--btn-info-bg);
  border-color: var(--btn-info-bg); }
.btn-info:hover,
.btn-info:focus,
.btn-info.focus {
  color: var(--text-on-brand);
  background-color: #4d75ff;
  border-color: #4d75ff; }

/* Outline buttons */
.btn-outline-primary { color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-outline-primary:hover { background-color: var(--brand-primary); border-color: var(--brand-primary); color: var(--text-on-brand); }
.btn-outline-secondary { color: var(--brand-secondary); border-color: var(--brand-secondary); }
.btn-outline-secondary:hover { background-color: var(--brand-secondary); border-color: var(--brand-secondary); color: var(--text-on-brand); }
.btn-outline-success { color: var(--rp-teal); border-color: var(--rp-teal); }
.btn-outline-success:hover { background-color: var(--rp-teal); border-color: var(--rp-teal); color: var(--text-on-brand); }
.btn-outline-warning { color: var(--rp-orange); border-color: var(--rp-orange); }
.btn-outline-warning:hover { background-color: var(--rp-orange); border-color: var(--rp-orange); color: var(--text-on-brand); }
.btn-outline-danger { color: var(--rp-red); border-color: var(--rp-red); }
.btn-outline-danger:hover { background-color: var(--rp-red); border-color: var(--rp-red); color: var(--text-on-brand); }
.btn-outline-info { color: var(--rp-info); border-color: var(--rp-info); }
.btn-outline-info:hover { background-color: var(--rp-info); border-color: var(--rp-info); color: var(--text-on-brand); }

/* Backgrounds utilitarios */
.bg-primary   { background-color: var(--brand-primary)   !important; }
.bg-secondary { background-color: var(--brand-primary) !important; }
.bg-success   { background-color: var(--rp-teal)         !important; }
.bg-warning   { background-color: var(--rp-orange)       !important; }
.bg-danger    { background-color: var(--rp-red)          !important; }
.bg-info      { background-color: var(--rp-info)         !important; }
.bg-mint      { background-color: var(--rp-mint)         !important; }

/* Texto utilitario */
.text-primary   { color: var(--brand-primary)   !important; }
.text-secondary { color: var(--brand-secondary) !important; }
.text-success   { color: var(--rp-teal)         !important; }
.text-warning   { color: var(--rp-orange)       !important; }
.text-danger    { color: var(--rp-red)          !important; }
.text-info      { color: var(--rp-info)         !important; }

/* Bordes utilitarios */
.border-primary   { border-color: var(--brand-primary)   !important; }
.border-secondary { border-color: var(--brand-secondary) !important; }
.border-success   { border-color: var(--rp-teal)         !important; }
.border-warning   { border-color: var(--rp-orange)       !important; }
.border-danger    { border-color: var(--rp-red)          !important; }
.border-info      { border-color: var(--rp-info)         !important; }

/* Badges (Bootstrap 4) */
.badge-primary   { background-color: var(--brand-primary)   !important; color: var(--text-on-brand); }
.badge-secondary { background-color: var(--brand-secondary) !important; color: var(--text-on-brand); }
.badge-success   { background-color: var(--rp-teal)         !important; color: var(--text-on-brand); }
.badge-warning   { background-color: var(--rp-orange)       !important; color: var(--text-on-brand); }
.badge-danger    { background-color: var(--rp-red)          !important; color: var(--text-on-brand); }
.badge-info      { background-color: var(--rp-info)         !important; color: var(--text-on-brand); }

/* Alerts */
.alert-primary   { background-color: var(--brand-primary);   border-color: var(--brand-primary);   color: var(--text-on-brand); }
.alert-secondary { background-color: var(--brand-secondary); border-color: var(--brand-secondary); color: var(--text-on-brand); }
.alert-success   { background-color: var(--rp-teal);         border-color: var(--rp-teal);         color: var(--text-on-brand); }
.alert-warning   { background-color: var(--rp-orange);       border-color: var(--rp-orange);       color: var(--text-on-brand); }
.alert-danger    { background-color: var(--rp-red);          border-color: var(--rp-red);          color: var(--text-on-brand); }
.alert-info      { background-color: var(--rp-info);         border-color: var(--rp-info);         color: var(--text-on-brand); }

/* Progress bars */
.progress-bar          { background-color: var(--brand-primary); }
.bg-success.progress-bar { background-color: var(--rp-teal)   !important; }
.bg-warning.progress-bar { background-color: var(--rp-orange) !important; }
.bg-danger.progress-bar  { background-color: var(--rp-red)    !important; }
.bg-info.progress-bar    { background-color: var(--rp-info)   !important; }

/* DataTables — encabezados y bordes */
table.dataTable thead th,
table.dataTable thead td {
  background-color: var(--table-header-bg);
  border-bottom-color: var(--table-border); }
table.dataTable tbody tr:hover {
  background-color: var(--table-row-hover); }

/* Form controls — focus respeta marca */
.form-control:focus,
.custom-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem rgba(173, 192, 200, 0.25); }

/* Links */
a { color: var(--brand-secondary); }
a:hover { color: var(--text-on-brand); }

/* ========================================================================
   BUSCADOR CENTRAL — PANEL HERO SEARCH
   ======================================================================== */
.panel-hero {
    background: #fff;
    border: 1px solid #e3e7eb;
    border-radius: 12px;
    padding: 36px 28px 30px;
    text-align: center;
    margin-bottom: 0;
}

.panel-hero h2 {
    font-weight: 700;
    color: var(--brand-secondary);
    margin-bottom: 6px;
}

.panel-hero p {
    color: #6c757d;
    margin-bottom: 20px;
}

.panel-search-wrap {
    position: relative;
    max-width: 620px;
    margin: 0 auto 16px;
}

.panel-search-wrap input[type="text"] {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    border: 1.5px solid #d0d7de;
    padding: 0 62px 0 22px;
    outline: none;
    transition: border-color .2s;
    background: #fff;
    color: var(--brand-secondary);
}

.panel-search-wrap input[type="text"]:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(173, 192, 200, 0.15);
}

.panel-search-wrap button[type="submit"] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--brand-primary);
    color: var(--text-on-brand);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}

.panel-search-wrap button[type="submit"]:hover {
    background: var(--btn-primary-hover);
}

/* V102 06/07/26 - dropdown de autocompletado del buscador (gb_busqueda_*),
   compartido por las 4 cajas de busqueda del navbar (sadmin/admin/proveedor/mandante) */
.panel-search-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 12px;
    margin-top: 6px;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    text-align: left;
}

.panel-search-suggestions a {
    display: block;
    padding: 10px 22px;
    color: var(--brand-secondary);
    text-decoration: none;
}

.panel-search-suggestions a:hover {
    background: #f2f5f7;
}

.panel-search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 4px;
}

.panel-search-chips .chip {
    background: #f1f4f7;
    border: none;
    border-radius: 999px;
    padding: 5px 14px;
    color: #4a5568;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.panel-search-chips .chip:hover {
    background: var(--brand-primary);
    color: var(--text-on-brand);
}

/* Chips de búsquedas populares (A-14) — div propio, por encima de .panel-search-chips */
.panel-search-popular {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 4px;
}

.panel-search-popular .chip-pop {
    background: #fff1e6;
    border: none;
    border-radius: 999px;
    padding: 5px 14px;
    color: #c2410c;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.3px;
    transition: background .15s, color .15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.panel-search-popular .chip-pop:hover {
    background: #c2410c;
    color: #fff;
}

/* ================ Círculo informativo: empresa liderada por mujeres ========================== */
.info-liderada-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    flex-shrink: 0;
}

.info-circulo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: #17a2b8;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: background-color 0.2s, transform 0.15s;
    user-select: none;
}
.info-circulo:hover {
    background-color: #117a8b;
    transform: scale(1.15);
}

.info-liderada-tooltip {
    display: none;
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    width: 360px;
    background-color: #1a3a5c;
    color: #fff;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 0.85em;
    line-height: 1.7;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 9999;
    pointer-events: none;
}
.info-liderada-tooltip ul {
    margin: 8px 0 0 0;
    padding-left: 18px;
}
.info-liderada-tooltip li {
    margin-bottom: 4px;
}

.info-liderada-wrapper:hover .info-liderada-tooltip {
    display: block;
}
.info-liderada-wrapper.tooltip-izquierda .info-liderada-tooltip {
    left: auto;
    right: calc(100% + 12px);
}


.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 28px 0 14px;
}

/* Performance Optimization: CSS transitions for dropdowns (replaces jQuery animations) */
.dropdown-menu {
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.dropdown-menu.show-dropdown,
.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Menu animations optimization */
ul.collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.15s ease-in-out;
}

ul.collapse.show {
    max-height: 500px;
}

/* Fix: btn-label en botones de tabla sin texto acompañante */
td .btn .btn-label {
    position: static;
    left: auto;
    display: inline;
    padding: 0;
    background: none;
    border-radius: 0;
}

/* ── Fix: sidebar cortado — estirar #left a toda la altura de la página ──
   En escritorio #left era float:left, y un float nunca se estira al alto del
   contenedor: dependía de un min-height calculado por JS que quedaba corto
   cuando el contenido crecía via AJAX. Se ancla arriba/abajo del .wrapper
   (que siempre mide el alto real del contenido) para que llegue al final.
   Se excluyen #left.fixed (modo menú fijo al hacer scroll) y .no_header
   (layout de tabla), que usan otro posicionamiento. */
@media (min-width: 768px) {
  body:not(.no_header) .wrapper {
    position: relative;
  }
  body:not(.no_header) .wrapper > #left:not(.fixed) {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    float: none;
    height: auto;
  }
}

/* Notificaciones: estado leído / no leído */
.notif-nueva { background: #f0f7ff; cursor: pointer; }
.notif-nueva:hover { background: #e0efff; }
.notif-leida { opacity: 0.75; }
.notif-punto {
    display: inline-block;
    width: 8px; height: 8px;
    background: #007bff;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
    align-self: center;
}

/* ══════════════════════════════════════════════════════════════════
   FIXES RESPONSIVIDAD — 2026-06-22
   Correcciones para adaptar el layout a móvil, tablet y escritorio.
   No eliminar: estos overrides corrigen la plantilla Admire heredada.
   ══════════════════════════════════════════════════════════════════ */

/* ── R-01: Panel derecho (#right) en móvil ────────────────────────
   #right tiene width:600px fijo que desborda en pantallas <600px.
   En móvil se convierte en panel de ancho completo. */
@media (max-width: 767px) {
  #right {
    width: 100vw;
    right: -100vw;
    top: 52px;
    border-radius: 0;
    border-right: none;
    border-left: none;
  }
  .sidebar-right-opened #right {
    right: 0;
  }
  .sidebar-right-opened .no-print {
    right: 100vw !important;
  }
}

/* ── R-02: Dropdowns del navbar en móvil ──────────────────────────
   Los dropdowns usan left:-113% / left:-130% que producen overflow.
   En móvil se anclan a posición fija, ancho de pantalla completo. */
@media (max-width: 575px) {
  .notifications .dropdown-menu,
  .messages .dropdown-menu,
  .user-settings .dropdown-menu,
  .dropdown-menu#request_list {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    top: 52px !important;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
  }
  /* Ocultar triángulos decorativos: no tienen sentido en panel full-width */
  .notifications .dropdown-menu:before,
  .messages .dropdown-menu:before,
  .user-settings .dropdown-menu:before {
    display: none;
  }
  /* Dropdown de notificaciones personalizado */
  #notif-dropdown {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    top: 52px !important;
    border-radius: 0 0 8px 8px;
  }
}

/* ── R-03: Sidebar como drawer con overlay en móvil ───────────────
   En móvil el sidebar (#left) es un drawer lateral. Al abrirse se
   muestra un overlay oscuro encima del contenido y se bloquea el
   scroll del body para que el foco quede en el menú. */
@media (max-width: 767px) {
  #left {
    position: fixed !important;
    top: 52px !important;          /* altura del navbar */
    left: -260px !important;
    width: min(240px, 85vw) !important;
    height: calc(100vh - 52px) !important;  /* llena toda la pantalla bajo el navbar */
    overflow-y: auto !important;            /* habilita scroll dentro del drawer */
    overflow-x: hidden !important;
    z-index: 9999 !important;
    box-shadow: 2px 0 16px rgba(0,0,0,.25) !important;
    transition: left 0.3s ease !important;
    min-height: unset !important;           /* cancela el min-height de _fix() en móvil */
  }

  /* Cuando se abre el drawer, desplazar a left:0 */
  body.sidebar-left-opened #left {
    left: 0 !important;
  }

  /* Overlay oscuro generado con ::after sobre el body */
  body.sidebar-left-opened::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9998;
    animation: rp-fade-overlay .2s ease;
  }

  @keyframes rp-fade-overlay {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Prevenir scroll de fondo mientras el sidebar está abierto */
  body.sidebar-left-opened {
    overflow: hidden;
  }

  /* El #content no se desplaza al abrir el sidebar en móvil */
  body.sidebar-left-opened #content {
    margin-left: 0 !important;
  }
}

/* ── R-04: Preloader centrado en todos los dispositivos ───────────
   El original usa left:48%/top:48% que no centra en pantallas
   pequeñas. transform: translate(-50%,-50%) es el método correcto. */
@media (max-width: 767px) {
  .preloader_img {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* ── R-05: Tablas DataTables responsivas ──────────────────────────
   DataTables genera tablas que desbordan en móvil. El wrapper debe
   tener overflow-x:auto para contener el scroll horizontal. */
.dataTables_wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  .dataTables_length,
  .dataTables_filter {
    text-align: left;
    float: none;
    margin-bottom: 0.5rem;
  }
  .dataTables_info,
  .dataTables_paginate {
    text-align: center;
    float: none;
  }
  .dataTables_paginate .paginate_button {
    padding: 0.3rem 0.5rem !important;
    font-size: 12px;
  }
  table.dataTable {
    min-width: 500px;
  }
}

/* ── R-06: Formularios — padding en móvil ─────────────────────────
   .input_field_sections tiene padding 0 30px que en móvil es excesivo. */
@media (max-width: 767px) {
  .input_field_sections {
    padding: 0 10px 0 10px;
    margin-top: 20px;
  }
}

/* ── R-07: Panel hero search responsivo ───────────────────────────
   El buscador central en paneles tiene padding fijo; se ajusta para
   pantallas pequeñas. */
@media (max-width: 767px) {
  .panel-hero {
    padding: 1.5rem 1rem 1.25rem;
    border-radius: 8px;
  }
  .panel-hero h2 {
    font-size: clamp(1rem, 4.5vw, 1.4rem);
    margin-bottom: 4px;
  }
  .panel-hero p {
    font-size: 0.875rem;
    margin-bottom: 14px;
  }
  .panel-search-wrap input[type="text"] {
    height: 46px;
    font-size: 14px;
    padding: 0 54px 0 16px;
  }
  .panel-search-wrap button[type="submit"] {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }
  .panel-search-chips,
  .panel-search-popular {
    gap: 6px;
  }
  .panel-search-chips .chip,
  .panel-search-popular .chip-pop {
    padding: 4px 11px;
    font-size: 0.75rem;
  }
}

/* ── R-08: Contenedores sin scroll horizontal no deseado ──────────
   Evitar que cualquier elemento interno rompa el layout horizontal. */
#wrap,
.wrapper {
  max-width: 100%;
}
#content {
  max-width: 100%;
  overflow-x: hidden;
}

/* ── R-09: Imágenes fluidas globales ──────────────────────────────
   Todas las imágenes fuera de las de logo/avatar escalan
   proporcionalmente para no desbordar su contenedor. */
.card img,
.inner img,
.outer img,
.card-body img {
  max-width: 100%;
  height: auto;
}

/* ── R-10: Tooltip de "empresa liderada" en móvil ─────────────────
   El tooltip tiene width:360px fijo que desborda en móvil.
   En pantallas pequeñas se reposiciona arriba del círculo. */
@media (max-width: 575px) {
  .info-liderada-tooltip {
    left: auto !important;
    right: auto !important;
    top: auto;
    bottom: calc(100% + 10px);
    transform: translateX(-80%);
    width: min(290px, 90vw);
    font-size: 0.8em;
  }
}

/* ── R-11: Modal responsivo en móvil ──────────────────────────────
   Los modales deben usar margen mínimo en pantallas pequeñas. */
@media (max-width: 575px) {
  .modal-dialog {
    margin: 0.5rem auto;
    max-width: calc(100vw - 1rem);
  }
  .modal-body {
    padding: 0.75rem;
  }
  .modal-header,
  .modal-footer {
    padding: 0.75rem 1rem;
  }
}

/* ── R-12: Notif-dropdown ancho ajustado en tablet ────────────────
   Entre 576px y 767px el dropdown puede tener un ancho razonable
   sin necesidad de ser full-width. */
@media (min-width: 576px) and (max-width: 767px) {
  #notif-dropdown {
    width: 320px;
    right: 0;
    left: auto !important;
  }
}

/* ── R-13: Cabecera de página (.head) en móvil ────────────────────
   El área de breadcrumb ocupa demasiado espacio en móvil. */
@media (max-width: 767px) {
  .head .main-bar {
    padding: 5px 12px;
  }
  .head .main-bar h4 {
    font-size: 1rem;
    margin-bottom: 0;
  }
}

/* ── R-14: Grillas Bootstrap — evitar desborde de columnas ───────
   Las columnas con contenido fijo (tablas, formularios largos) no
   deben romper fuera del row. */
[class*="col-"] {
  min-width: 0;
}

/* ── R-00: Navbar — forzar fila única, sin wrap ──────────────────
   Bootstrap 4 pone flex-wrap:wrap en .navbar por defecto, lo que
   permite que los items caigan a una segunda fila visual. Se fuerza
   nowrap para que todos los elementos permanezcan en una sola fila.
   overflow:hidden oculta cualquier elemento que no quepa. */
nav.navbar .container-fluid {
  flex-wrap: nowrap !important;
  align-items: center;
  overflow: hidden;
}

/* Evitar que el navbar crezca en altura por items que desbordan */
nav.navbar {
  min-height: 52px;
  overflow: visible;   /* el dropdown de notificaciones necesita salir */
}

/* ── R-16: Grupo derecho del navbar (avatar + campana + salir) ────
   Los 3 ítems se agrupan en .navbar-right-group sin espacio entre
   ellos. gap:4px da un respiro mínimo sin separarlos visualmente. */
.navbar-right-group {
  justify-content: space-between;
  gap: 0;
  flex-shrink: 0;
  min-width: 90px;   /* ancho mínimo para que space-around tenga efecto */
}

.navbar-perfil-avatar {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.navbar-perfil-avatar img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* ── R-15: Outer/inner padding en móvil ──────────────────────────
   .outer tiene margin-top:25px y padding:10px que en móvil son
   grandes relativos al viewport disponible. */
@media (max-width: 575px) {
  .outer {
    margin-top: 12px;
    padding: 6px;
  }
  .inner {
    padding-left: 6px;
    padding-right: 6px;
  }
}