/* Tipstat responsive UI layer. Loaded last and scoped to the authenticated layout. */
body.tipstat-app {
  --tipstat-bg: #eef3f8;
  --tipstat-surface: #ffffff;
  --tipstat-surface-soft: #f7faff;
  --tipstat-border: #d7e2ee;
  --tipstat-text: #10223b;
  --tipstat-muted: #607089;
  --tipstat-navy: #061426;
  --tipstat-navy-soft: #0a223f;
  --tipstat-blue: #0b5fe8;
  --tipstat-cyan: #09bdf2;
  --tipstat-success: #23864a;
  --tipstat-danger: #c1433f;
  --tipstat-header-height: 64px;
  --tipstat-sidebar-open: 272px;
  --tipstat-sidebar-closed: 72px;
  background: var(--tipstat-bg);
  color: var(--tipstat-text);
  font-family: 'Montserrat', 'Open Sans', sans-serif;
  min-width: 0;
  overflow-x: hidden;
}

body.tipstat-app *,
body.tipstat-app *::before,
body.tipstat-app *::after {
  box-sizing: border-box;
}

body.tipstat-app a:focus-visible,
body.tipstat-app button:focus-visible,
body.tipstat-app input:focus-visible,
body.tipstat-app select:focus-visible,
body.tipstat-app textarea:focus-visible {
  outline: 3px solid rgba(9, 189, 242, 0.34);
  outline-offset: 2px;
}

body.tipstat-app #header.navbar {
  align-items: center;
  display: flex;
  height: var(--tipstat-header-height);
  left: 0;
  margin: 0;
  min-height: var(--tipstat-header-height);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1200;
}

body.tipstat-app #header.navbar > div {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

body.tipstat-app #header .navbar-brand {
  align-items: center;
  display: flex;
  height: var(--tipstat-header-height);
  padding: 0 10px !important;
}

body.tipstat-app #sidebar-collapse.sidebar-collapse {
  align-items: center;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  margin: 0;
  padding: 0 !important;
  position: static;
  width: 42px;
}

body.tipstat-app #sidebar-collapse.sidebar-collapse:hover,
body.tipstat-app #sidebar-collapse.sidebar-collapse:focus {
  background: rgba(9, 189, 242, 0.2) !important;
  border-color: rgba(82, 213, 255, 0.62) !important;
}

body.tipstat-app #sidebar-collapse i {
  font-size: 17px;
}

body.tipstat-app #header .navbar-nav.pull-right {
  align-items: center;
  display: flex;
  float: none !important;
  margin: 0 10px 0 auto !important;
}

body.tipstat-app #header-user > a.dropdown-toggle {
  margin: 0 !important;
}

body.tipstat-app #page {
  min-height: 100vh;
  padding-top: var(--tipstat-header-height);
}

body.tipstat-app #sidebar.sidebar {
  background: linear-gradient(180deg, #010713 0%, #051528 100%) !important;
  border-right: 1px solid rgba(82, 213, 255, 0.22) !important;
  bottom: 0;
  box-shadow: 12px 0 34px rgba(1, 7, 19, 0.2) !important;
  display: block !important;
  left: 0;
  max-width: none !important;
  min-height: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: var(--tipstat-header-height);
  transition: width 220ms ease, transform 220ms ease;
  z-index: 1100;
}

body.tipstat-app #sidebar.sidebar[abierto='1'] {
  width: var(--tipstat-sidebar-open) !important;
}

body.tipstat-app #sidebar.sidebar[abierto='0'] {
  width: var(--tipstat-sidebar-closed) !important;
}

body.tipstat-app #sidebar .sidebar-menu {
  padding: 14px 10px 28px !important;
}

body.tipstat-app #sidebar .sidebar-menu > ul {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.tipstat-app #sidebar .sidebar-menu li {
  list-style: none;
  margin: 4px 0 !important;
}

body.tipstat-app #sidebar .sidebar-menu li > a {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: #dcecff !important;
  display: flex !important;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px !important;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

body.tipstat-app #sidebar .sidebar-menu li > a > i:first-child {
  align-items: center;
  background: rgba(9, 189, 242, 0.1) !important;
  border: 1px solid rgba(82, 213, 255, 0.28) !important;
  border-radius: 8px;
  color: #52d5ff !important;
  display: inline-flex;
  flex: 0 0 34px;
  font-size: 16px;
  height: 34px;
  justify-content: center;
  margin: 0 !important;
  width: 34px;
}

body.tipstat-app #sidebar .sidebar-menu .menu-text {
  color: inherit !important;
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.tipstat-app #sidebar .sidebar-menu .fa_main_menu {
  color: rgba(220, 236, 255, 0.58) !important;
  font-size: 11px !important;
  margin: 0 0 0 auto !important;
  transform: rotate(0deg);
  transition: transform 180ms ease;
}

body.tipstat-app #sidebar .menu_dropdown.active > a .fa_main_menu {
  transform: rotate(90deg);
}

body.tipstat-app #sidebar[abierto='1'] .sidebar-menu > ul > li > a:hover,
body.tipstat-app #sidebar[abierto='1'] .sidebar-menu > ul > li > a:focus,
body.tipstat-app #sidebar[abierto='1'] .sidebar-menu > ul > li.active > a {
  background: linear-gradient(90deg, rgba(9, 189, 242, 0.2), rgba(11, 95, 232, 0.1)) !important;
  box-shadow: inset 3px 0 0 var(--tipstat-cyan) !important;
  color: #ffffff !important;
}

body.tipstat-app #sidebar .menu_dropdown > .sidebar-submenu {
  display: block !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 240ms ease, opacity 180ms ease;
}

body.tipstat-app #sidebar .menu_dropdown.active > .sidebar-submenu {
  max-height: 900px;
  opacity: 1;
}

body.tipstat-app #sidebar .ul_submenu {
  border-left: 1px solid rgba(82, 213, 255, 0.24) !important;
  margin: 5px 0 8px 29px !important;
  padding: 0 0 0 10px !important;
}

body.tipstat-app #sidebar .ul_submenu li > a {
  min-height: 42px;
  padding: 6px 9px !important;
}

body.tipstat-app #sidebar .ul_submenu li > a > i:first-child {
  background: transparent !important;
  border: 0 !important;
  flex-basis: 26px;
  height: 26px;
  width: 26px;
}

body.tipstat-app #sidebar .ul_submenu li.active > a,
body.tipstat-app #sidebar .ul_submenu li > a:hover,
body.tipstat-app #sidebar .ul_submenu li > a:focus {
  background: rgba(9, 189, 242, 0.1) !important;
  color: #ffffff !important;
}

body.tipstat-app #sidebar[abierto='0'] .sidebar-menu {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

body.tipstat-app #sidebar[abierto='0'] .sidebar-menu > ul > li {
  margin: 8px 0 !important;
}

body.tipstat-app #sidebar[abierto='0'] .sidebar-menu > ul > li > a {
  background: transparent !important;
  box-shadow: none !important;
  height: 48px !important;
  justify-content: center;
  min-height: 48px !important;
  padding: 7px !important;
  width: 56px !important;
}

body.tipstat-app #sidebar[abierto='0'] .sidebar-menu > ul > li > a:hover,
body.tipstat-app #sidebar[abierto='0'] .sidebar-menu > ul > li > a:focus,
body.tipstat-app #sidebar[abierto='0'] .sidebar-menu > ul > li.active > a {
  background: transparent !important;
  box-shadow: none !important;
}

body.tipstat-app #sidebar[abierto='0'] .sidebar-menu > ul > li > a > i:first-child {
  background: transparent !important;
  border: 0 !important;
  color: #52d5ff !important;
  flex-basis: 34px;
  height: 34px;
  width: 34px;
}

body.tipstat-app #sidebar[abierto='0'] .menu-text,
body.tipstat-app #sidebar[abierto='0'] .fa_main_menu,
body.tipstat-app #sidebar[abierto='0'] .sidebar-submenu {
  display: none !important;
}

body.tipstat-app #main-content {
  background: var(--tipstat-bg);
  min-height: calc(100vh - var(--tipstat-header-height));
  min-width: 0;
  transition: margin-left 220ms ease;
}

body.tipstat-app #sidebar[abierto='1'] + .sidebar-backdrop + #main-content,
body.tipstat-app #sidebar[abierto='1'] + #main-content {
  margin-left: var(--tipstat-sidebar-open) !important;
}

body.tipstat-app #sidebar[abierto='0'] + .sidebar-backdrop + #main-content,
body.tipstat-app #sidebar[abierto='0'] + #main-content {
  margin-left: var(--tipstat-sidebar-closed) !important;
}

body.tipstat-app .container.container_backend {
  max-width: none;
  padding: 24px !important;
  width: 100%;
}

body.tipstat-app #content {
  min-width: 0;
  padding: 0 !important;
}

body.tipstat-app .sidebar-backdrop {
  display: none;
}

body.tipstat-app .panel,
body.tipstat-app .box,
body.tipstat-app .data-list {
  background: var(--tipstat-surface);
  border: 1px solid var(--tipstat-border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(6, 20, 38, 0.07);
}

body.tipstat-app .panel-heading,
body.tipstat-app .box-title {
  background: linear-gradient(135deg, #f8fbff, #edf5fc) !important;
  border-bottom: 1px solid var(--tipstat-border) !important;
  border-radius: 12px 12px 0 0;
  color: var(--tipstat-text) !important;
  min-height: 52px;
  padding: 14px 18px !important;
}

body.tipstat-app .panel-heading h4,
body.tipstat-app .box-title h4,
body.tipstat-app .panel-title {
  color: var(--tipstat-text) !important;
  font-family: 'Rajdhani', 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 0;
}

body.tipstat-app .panel-body,
body.tipstat-app .box-body {
  padding: 18px !important;
}

body.tipstat-app .btn,
body.tipstat-app input[type='button'],
body.tipstat-app input[type='submit'],
body.tipstat-app button {
  animation: none !important;
  background-image: none;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(6, 20, 38, 0.08);
  font-family: 'Montserrat', 'Open Sans', sans-serif;
  font-weight: 700;
  min-height: 40px;
  transform: none !important;
  transition: background-color 160ms ease, background-image 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, filter 160ms ease;
}

body.tipstat-app .btn:hover,
body.tipstat-app input[type='button']:hover,
body.tipstat-app input[type='submit']:hover,
body.tipstat-app button:hover {
  animation: none !important;
  filter: brightness(1.035) saturate(1.04);
  transform: none !important;
}

body.tipstat-app .btn:active,
body.tipstat-app input[type='button']:active,
body.tipstat-app input[type='submit']:active,
body.tipstat-app button:active,
body.tipstat-app .btn.active {
  box-shadow: inset 0 2px 5px rgba(6, 20, 38, 0.18) !important;
  filter: brightness(0.96);
  transform: none !important;
  transition-duration: 70ms;
}

body.tipstat-app .btn[disabled],
body.tipstat-app input[disabled],
body.tipstat-app button[disabled],
body.tipstat-app .btn.disabled {
  box-shadow: none !important;
  cursor: not-allowed;
  filter: grayscale(0.2);
  opacity: 0.56;
}

body.tipstat-app .btn-primary,
body.tipstat-app input.btn-primary,
body.tipstat-app #boton_buscador,
body.tipstat-app [id^='boton_buscador'],
body.tipstat-app [id^='boton_actualizar'] {
  background: linear-gradient(135deg, var(--tipstat-blue), #087fcf) !important;
  border: 1px solid var(--tipstat-blue) !important;
  color: #ffffff !important;
  padding: 9px 16px;
}

body.tipstat-app .btn-primary:hover,
body.tipstat-app input.btn-primary:hover,
body.tipstat-app #boton_buscador:hover,
body.tipstat-app [id^='boton_buscador']:hover,
body.tipstat-app [id^='boton_actualizar']:hover {
  box-shadow: 0 0 0 1px rgba(9, 189, 242, 0.24), 0 8px 20px rgba(11, 95, 232, 0.2);
  transform: none !important;
}

body.tipstat-app .btn-secondary,
body.tipstat-app .btn-default {
  background: #ffffff !important;
  border: 1px solid #b9c9da !important;
  color: #253953 !important;
}

body.tipstat-app .btn-secondary:hover,
body.tipstat-app .btn-default:hover {
  background: #edf5fc !important;
  border-color: #8ea9c5 !important;
  color: var(--tipstat-navy) !important;
}

body.tipstat-app .btn-success {
  background: #23864a !important;
  border-color: #23864a !important;
  color: #ffffff !important;
}

body.tipstat-app .btn-warning {
  background: #d98917 !important;
  border-color: #d98917 !important;
  color: #ffffff !important;
}

body.tipstat-app .btn-danger {
  background: #c1433f !important;
  border-color: #c1433f !important;
  color: #ffffff !important;
}

body.tipstat-app .btn-success:hover,
body.tipstat-app .btn-warning:hover,
body.tipstat-app .btn-danger:hover {
  box-shadow: 0 7px 18px rgba(6, 20, 38, 0.18);
}

body.tipstat-app input[type='text'],
body.tipstat-app input[type='password'],
body.tipstat-app input[type='email'],
body.tipstat-app input[type='number'],
body.tipstat-app select,
body.tipstat-app textarea,
body.tipstat-app .form-control {
  background: #ffffff;
  border: 1px solid #bfd0e2;
  border-radius: 8px;
  box-shadow: none;
  color: var(--tipstat-text);
  font-size: 14px;
  min-height: 40px;
  max-width: 100%;
  padding: 8px 11px;
}

body.tipstat-app input:focus,
body.tipstat-app select:focus,
body.tipstat-app textarea:focus,
body.tipstat-app .form-control:focus {
  border-color: var(--tipstat-blue);
  box-shadow: 0 0 0 3px rgba(9, 189, 242, 0.14);
  outline: 0;
}

body.tipstat-app input[type='checkbox'],
body.tipstat-app input[type='radio'] {
  accent-color: var(--tipstat-blue);
}

body.tipstat-app .buscador_container,
body.tipstat-app [class*='buscador_container_'] {
  align-items: end;
  background: var(--tipstat-surface) !important;
  border: 1px solid var(--tipstat-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(6, 20, 38, 0.07);
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px 16px;
  margin: 0 0 18px !important;
  padding: 18px !important;
}

body.tipstat-app .buscador_filtro_item_container {
  align-items: stretch;
  display: flex !important;
  flex: 1 1 190px;
  flex-direction: column;
  gap: 6px;
  margin: 0 !important;
  min-width: 160px;
  vertical-align: top;
}

body.tipstat-app .buscador_filtro_item_container label {
  color: #40516a;
  display: block;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.25px;
  margin: 0;
  text-align: left;
}

body.tipstat-app .aviso-index .buscador_container {
  align-items: stretch;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
}

body.tipstat-app .table-responsive-shell {
  border-radius: inherit;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

body.tipstat-app table.table {
  background: var(--tipstat-surface);
  display: table !important;
  margin: 0;
  min-width: 720px;
  white-space: normal !important;
  width: 100% !important;
}

body.tipstat-app table.table > thead > tr > th {
  background: var(--tipstat-navy) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #eaf6ff !important;
  font-family: 'Rajdhani', 'Montserrat', sans-serif;
  font-size: 13px;
  letter-spacing: 0.35px;
  padding: 12px;
  vertical-align: middle;
}

body.tipstat-app table.table > tbody > tr > td {
  border-color: #e5edf5;
  color: #344154;
  font-size: 13px;
  padding: 11px 12px;
  vertical-align: middle;
}

body.tipstat-app table.table-striped > tbody > tr:nth-child(odd) > td {
  background: #f7faff;
}

body.tipstat-app table.table-hover > tbody > tr:hover > td {
  background: #edf7ff;
}

body.tipstat-app.has-analytics .analytics-page,
body.tipstat-app.has-analytics .analytics-panel {
  min-width: 0;
}

body.tipstat-app .modern-chart {
  background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
  border: 1px solid var(--tipstat-border);
  border-radius: 12px;
  margin-bottom: 20px !important;
  min-height: 360px;
  overflow: hidden;
  width: 100% !important;
}

body.tipstat-app .modern-chart .highcharts-container,
body.tipstat-app .modern-chart .highcharts-root,
body.tipstat-app .modern-chart svg {
  max-width: 100% !important;
}

body.tipstat-app.has-analytics .wp_resultados_grafica_container {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(260px, 0.34fr) minmax(0, 0.66fr);
}

body.tipstat-app.has-analytics .wp_resultados_grafica_left,
body.tipstat-app.has-analytics .wp_resultados_grafica_right,
body.tipstat-app.has-analytics .wp_result_grafica_container {
  min-width: 0;
  width: 100% !important;
}

body.tipstat-app.has-analytics .wp_result_grafica_opciones_tabs {
  background: #eaf1f8;
  border-radius: 10px;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
}

body.tipstat-app.has-analytics .wp_result_grafica_opciones_tabs_boton {
  border-radius: 7px;
}

@media (max-width: 1100px) {
  body.tipstat-app.has-analytics .wp_resultados_grafica_container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  body.tipstat-app {
    --tipstat-header-height: 58px;
  }

  body.tipstat-app #header-user .username,
  body.tipstat-app #header-user .fa-angle-down {
    display: none !important;
  }

  body.tipstat-app #header-user > a.dropdown-toggle {
    padding-right: 5px;
  }

  body.tipstat-app #sidebar.sidebar,
  body.tipstat-app #sidebar.sidebar[abierto='0'],
  body.tipstat-app #sidebar.sidebar[abierto='1'] {
    display: block !important;
    max-width: 340px !important;
    transform: translateX(-104%);
    width: min(86vw, 340px) !important;
  }

  body.tipstat-app.sidebar-mobile-open #sidebar.sidebar {
    transform: translateX(0);
  }

  body.tipstat-app.sidebar-mobile-open {
    overflow: hidden;
  }

  body.tipstat-app .sidebar-backdrop {
    background: rgba(1, 7, 19, 0.62);
    bottom: 0;
    display: block;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: var(--tipstat-header-height);
    transition: opacity 180ms ease;
    z-index: 1050;
  }

  body.tipstat-app.sidebar-mobile-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  body.tipstat-app #sidebar[abierto='1'] .sidebar-menu .menu-text,
  body.tipstat-app #sidebar[abierto='1'] .sidebar-menu .fa_main_menu {
    display: block !important;
  }

  body.tipstat-app #sidebar[abierto='1'] .sidebar-menu > ul > li > a {
    justify-content: flex-start;
    width: 100% !important;
  }

  body.tipstat-app #main-content,
  body.tipstat-app #sidebar + .sidebar-backdrop + #main-content,
  body.tipstat-app #sidebar[abierto='0'] + .sidebar-backdrop + #main-content,
  body.tipstat-app #sidebar[abierto='1'] + .sidebar-backdrop + #main-content {
    margin-left: 0 !important;
  }

  body.tipstat-app .container.container_backend {
    padding: 18px !important;
  }

  body.tipstat-app .aviso-index .buscador_container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 615px) {
  body.tipstat-app .container.container_backend {
    padding: 12px !important;
  }

  body.tipstat-app #main-content #content {
    padding: 0 !important;
  }

  body.tipstat-app .panel-body,
  body.tipstat-app .box-body,
  body.tipstat-app .buscador_container,
  body.tipstat-app [class*='buscador_container_'] {
    padding: 14px !important;
  }

  body.tipstat-app .buscador_filtro_item_container,
  body.tipstat-app .buscador_filtro_item_container input,
  body.tipstat-app .buscador_filtro_item_container select,
  body.tipstat-app .buscador_container > .btn,
  body.tipstat-app [class*='buscador_container_'] > .btn {
    flex-basis: 100%;
    width: 100% !important;
  }

  body.tipstat-app .modern-chart,
  body.tipstat-app [id^='grafica_'],
  body.tipstat-app [id^='result_grafica_'] {
    height: 340px !important;
    min-height: 340px !important;
  }

  body.tipstat-app .aviso-index .buscador_metricas {
    align-items: stretch;
    flex-direction: column;
  }

  body.tipstat-app .aviso-index .buscador_metricas > span {
    justify-content: center;
    width: 100%;
  }

  body.tipstat-app .modal-dialog,
  body.tipstat-app div.popup {
    left: 3% !important;
    margin: 0 !important;
    max-height: calc(100vh - 24px) !important;
    max-width: none !important;
    overflow-y: auto;
    top: 12px !important;
    width: 94% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tipstat-app *,
  body.tipstat-app *::before,
  body.tipstat-app *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}