:root {
  --ux-primary: #0b2e4a;
  --ux-primary-2: #123d63;
  --ux-primary-3: #174b77;
  --ux-accent: #f47c20;
  --ux-accent-soft: #fff3eb;
  --ux-bg: #f4f6f9;
  --ux-surface: #ffffff;
  --ux-text: #172033;
  --ux-muted: #64748b;
  --ux-border: #e6ebf1;
  --ux-border-strong: #d7dee8;
  --ux-success: #16a34a;
  --ux-warning: #f59e0b;
  --ux-danger: #dc2626;
  --ux-info: #2563eb;
  --ux-radius: 16px;
  --ux-shadow: 0 14px 34px rgba(15, 23, 42, .08);
  --ux-shadow-soft: 0 8px 22px rgba(15, 23, 42, .06);
}

html, body {
  background: var(--ux-bg) !important;
  color: var(--ux-text);
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
}

body.nav-md,
body.nav-sm {
  background: var(--ux-bg) !important;
}

body .container.body,
body .main_container,
body .right_col {
  background: var(--ux-bg) !important;
}

.right_col {
  min-height: 100vh !important;
  padding: 28px 28px 72px !important;
}

/* Sidebar */
.left_col,
.nav_title,
.sidebar-footer,
.main_menu_side {
  background: var(--ux-primary) !important;
}

.left_col {
  box-shadow: 10px 0 28px rgba(11, 46, 74, .12);
}

.nav_title {
  height: 72px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.site_title {
  height: 72px !important;
  line-height: 72px !important;
  
  letter-spacing: -.6px;
  padding-left: 18px !important;
}

.site_title .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ux-accent), #ff9a3d);
  color: #fff;
  margin-right: 10px;
  box-shadow: 0 10px 20px rgba(244, 124, 32, .28);
}

.profile {
  padding: 18px 14px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.profile_pic {
  width: 48px !important;
}

.profile_img {
  width: 44px !important;
  height: 44px !important;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.8) !important;
  background: #fff;
}

.profile_info {
  padding: 4px 10px 0 !important;
  width: calc(100% - 52px) !important;
}

.profile_info span {
  color: rgba(255,255,255,.62) !important;
  font-size: 12px;
}

.profile_info h2 {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  margin-top: 2px !important;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav.side-menu > li > a {
  color: rgba(255,255,255,.78) !important;
  font-weight: 600 !important;
  padding: 13px 16px !important;
  margin: 4px 10px !important;
  border-radius: 12px;
  transition: all .18s ease;
}

.nav.side-menu > li > a i {
  width: 18px !important;
  color: rgba(255,255,255,.72);
  margin-right: 10px !important;
}

.nav.side-menu > li > a:hover,
.nav.side-menu > li.current-page > a,
.nav.side-menu > li.active > a,
.nav.side-menu > li.ux-active > a {
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--ux-accent);
}

.nav.side-menu > li > a:hover i,
.nav.side-menu > li.current-page > a i,
.nav.side-menu > li.active > a i,
.nav.side-menu > li.ux-active > a i {
  color: var(--ux-accent);
}

/* Top navigation */
.top_nav .nav_menu {
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid var(--ux-border) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
  backdrop-filter: blur(8px);
}

.nav.toggle a,
.top_nav .navbar-right li a {
  color: var(--ux-primary) !important;
}

.user-profile img {
  width: 34px !important;
  height: 34px !important;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(15,23,42,.12);
}

.dropdown-menu {
  border: 1px solid var(--ux-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--ux-shadow) !important;
  padding: 8px !important;
}

.dropdown-menu > li > a {
  border-radius: 10px;
  padding: 10px 12px !important;
}

/* Page titles */
.page-title,
.x_title {
  border-bottom: 0 !important;
}

.x_title h2,
.page-title h2,
.page-title h3 {
  color: var(--ux-primary);
  
  letter-spacing: -.3px;
}

.x_panel {
  border: 1px solid var(--ux-border) !important;
  border-radius: var(--ux-radius) !important;
  box-shadow: var(--ux-shadow-soft);
  overflow: hidden;
  padding: 18px !important;
}

.x_content {
  padding: 12px 4px 4px !important;
}

/* Cards and dashboard */
.top_tiles .tile-stats,
.tile-stats,
.dash-card,
.ux-card {
  border: 1px solid var(--ux-border) !important;
  border-radius: var(--ux-radius) !important;
  box-shadow: var(--ux-shadow-soft) !important;
  background: var(--ux-surface) !important;
}

.tile-stats {
  padding: 18px !important;
}

.tile-stats .count,
.dash-card .dash-number {
  color: var(--ux-primary) !important;
  font-weight: 850 !important;
}

.tile-stats h3,
.dash-card .dash-label {
  color: var(--ux-muted) !important;
  font-weight: 600 !important;
}

.tile-stats .icon,
.dash-card .dash-icon {
  color: var(--ux-primary) !important;
  opacity: 1 !important;
}

/* Tables */
.table-responsive {
  border: 0 !important;
}

.table {
  background: #fff;
  border-collapse: separate !important;
  border-spacing: 0;
}

.table > thead > tr > th {
  background: #f8fafc !important;
  color: var(--ux-primary) !important;
  border-bottom: 1px solid var(--ux-border) !important;
  
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.table > tbody > tr > td {
  border-top: 1px solid var(--ux-border) !important;
  color: var(--ux-text);
  vertical-align: middle !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: #fbfdff !important;
}

.table-hover > tbody > tr:hover,
.table-striped > tbody > tr:hover {
  background: #fff7f1 !important;
}

.jambo_table thead,
.jambo_table thead tr,
.jambo_table thead tr th {
  background: var(--ux-primary) !important;
  color: #fff !important;
}

/* Forms */
.form-control,
select.form-control,
textarea.form-control {
  border: 1px solid var(--ux-border-strong) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: var(--ux-text);
  min-height: 40px;
}

.form-control:focus {
  border-color: var(--ux-primary-3) !important;
  box-shadow: 0 0 0 3px rgba(23,75,119,.12) !important;
}

label,
.control-label {
  color: var(--ux-primary) !important;
  font-weight: 700 !important;
}

.input-group-addon {
  background: #f8fafc !important;
  border-color: var(--ux-border-strong) !important;
  color: var(--ux-primary) !important;
  border-radius: 12px 0 0 12px !important;
}

/* Buttons */
.btn {
  border-radius: 12px !important;
  font-weight: 700 !important;
  border-width: 1px !important;
  transition: all .16s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary,
.btn-success {
  background: var(--ux-primary) !important;
  border-color: var(--ux-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-success:hover {
  background: var(--ux-primary-2) !important;
  border-color: var(--ux-primary-2) !important;
}

.btn-default {
  border-color: var(--ux-border-strong) !important;
  color: var(--ux-primary) !important;
  background: #fff !important;
}

.btn-default:hover {
  background: var(--ux-accent-soft) !important;
  color: var(--ux-primary) !important;
  border-color: #ffd1b5 !important;
}

.btn-danger {
  background: var(--ux-danger) !important;
  border-color: var(--ux-danger) !important;
}

/* Badges / labels */
.label,
.badge,
.ux-badge {
  border-radius: 999px !important;
  padding: 6px 10px !important;
  
}

.label-success { background: var(--ux-success) !important; }
.label-warning { background: var(--ux-warning) !important; }
.label-danger { background: var(--ux-danger) !important; }
.label-info { background: var(--ux-info) !important; }
.label-primary { background: var(--ux-primary) !important; }

/* Modals */
.modal-content {
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 28px 80px rgba(15,23,42,.26) !important;
  overflow: hidden;
}

.modal-header {
  background: var(--ux-primary) !important;
  color: #fff !important;
  border-bottom: 0 !important;
  padding: 18px 22px !important;
}

.modal-title,
.modal-header h4 {
  color: #fff !important;
  
}

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

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

.modal-footer {
  background: #f8fafc;
  border-top: 1px solid var(--ux-border) !important;
}

/* Alerts */
.alert {
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: var(--ux-shadow-soft);
}

.alert-success { background: #ecfdf3 !important; color: #166534 !important; }
.alert-danger { background: #fef2f2 !important; color: #991b1b !important; }
.alert-warning { background: #fffbeb !important; color: #92400e !important; }
.alert-info { background: #eff6ff !important; color: #1d4ed8 !important; }

/* Login */
body.login {
  background: radial-gradient(circle at top left, rgba(244,124,32,.18), transparent 34%), linear-gradient(135deg, #071c2e 0%, #0b2e4a 58%, #123d63 100%) !important;
  min-height: 100vh;
}

.ux-login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ux-login-card {
  width: 100%;
  max-width: 420px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 24px;
  box-shadow: 0 34px 90px rgba(0,0,0,.28);
  padding: 34px;
}

.ux-login-brand {
  text-align: center;
  margin-bottom: 24px;
}

.ux-login-brand .brand-mark {
  margin: 0 auto 12px;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ux-accent), #ff9a3d);
  color: #fff;
  font-size: 24px;
  box-shadow: 0 16px 34px rgba(244,124,32,.32);
}

.ux-login-brand h1 {
  margin: 0;
  color: var(--ux-primary);
  font-weight: 900;
  letter-spacing: -.8px;
}

.ux-login-brand p {
  margin-top: 8px;
  color: var(--ux-muted);
}

.ux-login-card .btn {
  width: 100%;
  padding: 11px 16px;
  margin-top: 8px;
}

/* Chart containers */
.ux-chart-box,
.chart-box,
.dashboard-chart-box {
  position: relative;
  height: 320px;
  max-height: 320px;
  width: 100%;
}

.ux-chart-box canvas,
.chart-box canvas,
.dashboard-chart-box canvas {
  max-height: 320px !important;
}

/* Utilities */
.ux-muted { color: var(--ux-muted); }
.ux-text-primary { color: var(--ux-primary); }
.ux-accent { color: var(--ux-accent); }
.ux-mb-16 { margin-bottom: 16px; }
.ux-mt-16 { margin-top: 16px; }

footer {
  background: #fff !important;
  border-top: 1px solid var(--ux-border) !important;
  color: var(--ux-muted) !important;
  padding: 14px 24px !important;
}

footer a { color: var(--ux-primary) !important; }

/* Responsive */
@media (max-width: 991px) {
  .right_col {
    padding: 20px 14px 72px !important;
  }

  .x_panel {
    padding: 14px !important;
  }

  .nav-md .container.body .right_col,
  .nav-sm .container.body .right_col {
    margin-left: 0 !important;
  }

  .top_nav {
    margin-left: 0 !important;
  }

  .left_col {
    z-index: 1050;
  }
}

@media (max-width: 767px) {
  .right_col {
    padding: 16px 10px 76px !important;
  }

  .x_title h2,
  .page-title h2 {
    font-size: 20px !important;
    width: 100%;
  }

  .form-horizontal .control-label {
    text-align: left !important;
    margin-bottom: 6px;
  }

  .btn,
  .form-control,
  select.form-control {
    min-height: 42px;
  }

  .modal-dialog {
    margin: 12px !important;
  }

  .ux-login-card {
    padding: 26px 20px;
  }

  .table-responsive .table {
    min-width: 720px;
  }
}

/* =========================================================
   FIX MENU COLAPSADO / EXPANDIDO
   - Expandido: icono + nombre
   - Colapsado: solo iconos centrados
   ========================================================= */
body.nav-md .left_col,
body.nav-md .left_col.scroll-view {
  width: 230px !important;
  overflow: hidden !important;
}

body.nav-sm .left_col,
body.nav-sm .left_col.scroll-view {
  width: 72px !important;
  overflow: hidden !important;
}

body.nav-md .container.body .right_col,
body.nav-md .main_container .top_nav {
  margin-left: 230px !important;
}

body.nav-sm .container.body .right_col,
body.nav-sm .main_container .top_nav {
  margin-left: 72px !important;
}

body.nav-sm .container.body .right_col {
  width: calc(100% - 72px) !important;
}

body.nav-md .container.body .right_col {
  width: calc(100% - 230px) !important;
}

.nav.side-menu.ticka-sidebar-menu,
.nav.side-menu.ticka-sidebar-menu > li {
  width: 100% !important;
  overflow: visible !important;
}

.nav.side-menu.ticka-sidebar-menu > li > a {
  display: flex !important;
  align-items: center !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
  color: rgba(255,255,255,.82) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

body.nav-md .nav.side-menu.ticka-sidebar-menu > li > a {
  justify-content: flex-start !important;
  gap: 12px !important;
  width: calc(100% - 20px) !important;
  margin: 6px 10px !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  text-align: left !important;
}

.nav.side-menu.ticka-sidebar-menu > li > a i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: rgba(255,255,255,.72) !important;
}

.nav.side-menu.ticka-sidebar-menu > li > a .menu-text {
  display: inline-block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

.nav.side-menu.ticka-sidebar-menu > li > a:hover,
.nav.side-menu.ticka-sidebar-menu > li.active > a,
.nav.side-menu.ticka-sidebar-menu > li.current-page > a,
.nav.side-menu.ticka-sidebar-menu > li.ux-active > a {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  box-shadow: inset 4px 0 0 var(--ux-accent) !important;
}

.nav.side-menu.ticka-sidebar-menu > li > a:hover i,
.nav.side-menu.ticka-sidebar-menu > li.active > a i,
.nav.side-menu.ticka-sidebar-menu > li.current-page > a i,
.nav.side-menu.ticka-sidebar-menu > li.ux-active > a i {
  color: var(--ux-accent) !important;
}

/* Colapsado: no se muestra ningún nombre del menú */
body.nav-sm .nav.side-menu.ticka-sidebar-menu > li > a {
  justify-content: center !important;
  align-items: center !important;
  width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 8px auto !important;
  padding: 0 !important;
  border-radius: 16px !important;
  text-align: center !important;
  gap: 0 !important;
}

body.nav-sm .nav.side-menu.ticka-sidebar-menu > li > a .menu-text {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  max-width: 0 !important;
  opacity: 0 !important;
}

body.nav-sm .nav.side-menu.ticka-sidebar-menu > li > a i {
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 24px !important;
  text-align: center !important;
}

/* Marca y perfil en colapsado */
body.nav-sm .site_title {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  width: 72px !important;
}

body.nav-sm .site_title .brand-mark {
  margin: 0 !important;
}

body.nav-sm .site_title > span:not(.brand-mark),
body.nav-sm .profile,
body.nav-sm .menu_section h3 {
  display: none !important;
}

body.nav-sm #sidebar-menu {
  margin-top: 14px !important;
}

/* Evita que Gentelella meta textos pequeños debajo del icono */
body.nav-sm .nav.side-menu.ticka-sidebar-menu > li > a,
body.nav-sm .nav.side-menu.ticka-sidebar-menu > li > a * {
  text-transform: none !important;
}

/* Responsive móvil: conserva menú sobre el contenido cuando se abre */
@media (max-width: 991px) {
  body.nav-md .container.body .right_col,
  body.nav-sm .container.body .right_col,
  body.nav-md .main_container .top_nav,
  body.nav-sm .main_container .top_nav {
    margin-left: 0 !important;
    width: 100% !important;
  }
}
/* Mantener visible la barra superior */
.top_nav,
.nav_menu {
    position: relative !important;
    z-index: 9999 !important;
}

/* Mantener visible el usuario y menú hamburguesa */
.toggle,
.navbar-right,
.top_nav .navbar-right,
.nav_menu .navbar-nav {
    position: relative !important;
    z-index: 10000 !important;
}

/* Pintar fondo azul del menú lateral sin tapar el top */
body.nav-md {
    background: linear-gradient(
        to right,
        #0b3554 0,
        #0b3554 230px,
        #f3f6fa 230px,
        #f3f6fa 100%
    ) !important;
}

body.nav-sm {
    background: linear-gradient(
        to right,
        #0b3554 0,
        #0b3554 70px,
        #f3f6fa 70px,
        #f3f6fa 100%
    ) !important;
}

/* Asegurar que el menú lateral tenga fondo propio */
.left_col,
.nav_title,
.sidebar-footer {
    background: #0b3554 !important;
}

/* Contenido principal encima del fondo */
.right_col {
    background: #f3f6fa !important;
    min-height: 100vh !important;
}
/* =========================================================
   ESTÁNDAR VISUAL GLOBAL TICKA
   Basado en pantalla Perfiles
   Solo ajusta orden visual, espacios, cabeceras y contenedores.
   No afecta lógica, AJAX, PHP ni permisos.
   ========================================================= */

/* Espaciado base dentro de cada página */
.right_col > .admin-page,
.right_col > .tp-page,
.right_col > .parameters-page,
.right_col > .rp-page,
.right_col > .knowledge-page {
    padding: 24px 6px 40px !important;
    max-width: 100% !important;
}

/* Cabecera azul estándar */
.admin-hero,
.knowledge-hero,
.ticka-standard-hero,
.rp-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;

    min-height: 136px !important;
    margin: 0 0 20px !important;
    padding: 26px 28px !important;

    border-radius: 22px !important;
    background: linear-gradient(135deg, #0B2E4A, #123D63) !important;
    color: #fff !important;
    box-shadow: 0 18px 40px rgba(11,46,74,.18) !important;
}

/* Texto superior pequeño: ROLES Y PERMISOS, MESA DE AYUDA, etc. */
.admin-eyebrow,
.knowledge-eyebrow,
.hero-eyebrow,
.rp-eyebrow {
    display: block !important;
    margin: 0 0 6px !important;
    color: #F47C20 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

/* Títulos principales */
.admin-hero h1,
.knowledge-hero h1,
.ticka-standard-hero h1,
.rp-hero h1 {
    margin: 4px 0 6px !important;
    color: #fff !important;
    font-size: 30px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
}

/* Descripción de cabecera */
.admin-hero p,
.knowledge-hero p,
.ticka-standard-hero p,
.rp-hero p {
    margin: 0 !important;
    max-width: 820px !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

/* Botones de la cabecera */
.admin-hero-actions,
.knowledge-hero-actions,
.hero-actions,
.rp-hero-actions {
    flex-shrink: 0 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Botón naranja principal */
.admin-primary-btn,
.knowledge-primary-btn,
.btn-hero-primary,
.rp-btn-primary {
    border: none !important;
    border-radius: 14px !important;
    background: #F47C20 !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(244,124,32,.28) !important;
    font-weight: 700 !important;
    padding: 11px 16px !important;
    white-space: nowrap !important;
}

/* Tarjetas, paneles y contenedores principales */
.admin-list-card,
.tp-card,
.parameter-card,
.rp-card,
.knowledge-card,
.knowledge-kpi,
.ticka-panel,
.ticka-kpi-card {
    border: 1px solid #E5E7EB !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.04) !important;
}

/* Barras de búsqueda y filtros */
.admin-toolbar,
.knowledge-toolbar,
.tp-filter-card,
.parameter-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    margin: 18px 0 !important;
    padding: 14px !important;

    border: 1px solid #E5E7EB !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.04) !important;
}

/* Altura uniforme para inputs, selects y botones dentro de filtros */
.admin-toolbar .form-control,
.knowledge-toolbar .form-control,
.tp-filter-card .form-control,
.parameter-toolbar .form-control,
.admin-toolbar .btn,
.knowledge-toolbar .btn,
.tp-filter-card .btn,
.parameter-toolbar .btn {
    min-height: 40px !important;
    border-radius: 12px !important;
}

/* Separación uniforme entre bloques */
.admin-help-card,
.alert-ticka,
.knowledge-alert {
    margin-bottom: 18px !important;
    border-radius: 18px !important;
}

/* Grillas limpias */
.admin-grid-list,
.knowledge-grid,
.ticka-dashboard-grid,
.rp-kpi-grid,
.knowledge-kpis {
    gap: 16px !important;
}

/* Responsive estándar */
@media (max-width: 991px) {
    .admin-hero,
    .knowledge-hero,
    .ticka-standard-hero,
    .rp-hero {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .admin-hero-actions,
    .knowledge-hero-actions,
    .hero-actions,
    .rp-hero-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 767px) {
    .right_col > .admin-page,
    .right_col > .tp-page,
    .right_col > .parameters-page,
    .right_col > .rp-page,
    .right_col > .knowledge-page {
        padding: 14px 0 30px !important;
    }

    .admin-hero,
    .knowledge-hero,
    .ticka-standard-hero,
    .rp-hero {
        min-height: auto !important;
        padding: 20px !important;
        border-radius: 18px !important;
    }

    .admin-hero h1,
    .knowledge-hero h1,
    .ticka-standard-hero h1,
    .rp-hero h1 {
        font-size: 24px !important;
    }
}

/* =========================================================
   FONDO AZUL LATERAL GLOBAL
   Mantiene el menú azul hasta el final de la pantalla
   sin tapar la barra superior ni mover el contenido.
   ========================================================= */

html,
body {
    min-height: 100%;
}

/* Menú expandido */
body.ticka-ux-body.nav-md {
    background: linear-gradient(
        to right,
        #0b2e4a 0,
        #0b2e4a 230px,
        #f4f6f9 230px,
        #f4f6f9 100%
    ) !important;
    background-attachment: fixed !important;
}

/* Menú colapsado */
body.ticka-ux-body.nav-sm {
    background: linear-gradient(
        to right,
        #0b2e4a 0,
        #0b2e4a 72px,
        #f4f6f9 72px,
        #f4f6f9 100%
    ) !important;
    background-attachment: fixed !important;
}

/* Permite que se vea el fondo azul detrás del menú */
body.ticka-ux-body .container.body,
body.ticka-ux-body .main_container {
    background: transparent !important;
    min-height: 100vh !important;
}

/* El contenido principal mantiene fondo claro */
body.ticka-ux-body .right_col {
    background: #f4f6f9 !important;
    min-height: 100vh !important;
}

/* El menú real conserva su color */
body.ticka-ux-body .left_col,
body.ticka-ux-body .left_col.scroll-view,
body.ticka-ux-body .nav_title,
body.ticka-ux-body .main_menu_side,
body.ticka-ux-body .sidebar-footer {
    background: #0b2e4a !important;
}
/* Centrado vertical para modales de creación/edición */
.modal.admin-modal.in,
.modal.tp-modal.in {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 18px !important;
}

.modal.admin-modal.in .modal-dialog,
.modal.tp-modal.in .modal-dialog {
  margin: 0 auto !important;
  transform: none !important;
}

.modal.admin-modal .modal-content,
.modal.tp-modal .modal-content {
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

@media (max-height: 700px), (max-width: 767px) {
  .modal.admin-modal.in,
  .modal.tp-modal.in {
    align-items: flex-start;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
}

/* =========================================================
   MODALES SIN SCROLLBAR INTERNO INNECESARIO
   Estructura visual: cabecera / cuerpo / pie
   ========================================================= */
.modal.admin-modal.in,
.modal.tp-modal.in {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  overflow-y: auto !important;
}

.modal.admin-modal.in .modal-dialog,
.modal.tp-modal.in .modal-dialog {
  width: 100%;
  margin: 0 auto !important;
  transform: none !important;
}

.modal.admin-modal.in .modal-dialog.modal-md {
  max-width: 650px;
}

.modal.tp-modal.in .modal-dialog.modal-lg {
  max-width: 860px;
}

.modal.admin-modal .modal-content,
.modal.tp-modal .modal-content {
  display: flex;
  flex-direction: column;
  max-height: none !important;
  overflow: hidden !important;
  border-radius: 20px !important;
}

.modal.admin-modal .modal-header,
.modal.tp-modal .modal-header {
  flex: 0 0 auto;
}

.modal.admin-modal .modal-body,
.modal.tp-modal .modal-body {
  flex: 1 1 auto;
  overflow: visible !important;
  padding: 18px 22px !important;
}

.modal.admin-modal .modal-footer,
.modal.tp-modal .modal-footer,
.modal.admin-modal .admin-modal-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #f8fafc !important;
  border-top: 1px solid var(--ux-border) !important;
  padding: 14px 22px !important;
}

.modal.admin-modal .admin-modal-footer {
  margin: 16px -22px -18px !important;
}

.modal.admin-modal .form-group,
.modal.tp-modal .form-group {
  margin-bottom: 12px !important;
}

.modal.admin-modal textarea.form-control,
.modal.tp-modal textarea.form-control {
  min-height: 92px;
  resize: vertical;
}

.modal.admin-modal .admin-check-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
}

.modal.admin-modal .admin-check-grid label {
  padding: 8px 10px !important;
  margin-bottom: 0 !important;
}

.modal.admin-modal .alert,
.modal.tp-modal .alert {
  margin-bottom: 12px !important;
  padding: 10px 12px !important;
}

@media (max-height: 760px) {
  .modal.admin-modal .modal-body,
  .modal.tp-modal .modal-body {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .modal.admin-modal .form-group,
  .modal.tp-modal .form-group {
    margin-bottom: 9px !important;
  }

  .modal.admin-modal textarea.form-control,
  .modal.tp-modal textarea.form-control {
    min-height: 76px;
  }
}

@media (max-height: 640px), (max-width: 767px) {
  .modal.admin-modal.in,
  .modal.tp-modal.in {
    align-items: flex-start !important;
  }

  .modal.admin-modal .modal-content,
  .modal.tp-modal .modal-content {
    max-height: calc(100vh - 36px) !important;
  }

  .modal.admin-modal .modal-body,
  .modal.tp-modal .modal-body {
    overflow-y: auto !important;
  }

  .modal.admin-modal .admin-check-grid {
    grid-template-columns: 1fr;
  }
}
#ticka-notify-container {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 99999;
    width: 360px;
    max-width: calc(100vw - 30px);
}

.ticka-notify-toast {
    display: flex;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #dbe3ef;
    border-left: 5px solid #f47c20;
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
    padding: 14px;
    margin-top: 12px;
    animation: tickaNotifyIn .25s ease-out;
}

.ticka-notify-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #0b3554;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ticka-notify-body {
    flex: 1;
}

.ticka-notify-body strong {
    display: block;
    color: #0b3554;
    font-size: 14px;
    margin-bottom: 4px;
}

.ticka-notify-body p {
    margin: 0 0 8px;
    color: #475569;
    font-size: 13px;
    line-height: 1.35;
}

.ticka-notify-actions {
    display: flex;
    gap: 6px;
}

@keyframes tickaNotifyIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Modal registrar ticket - responsive para laptops pequeñas */
.modal.tp-modal.in {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  overflow-y: auto !important;
}

.modal.tp-modal .modal-dialog {
  width: 100%;
  max-width: 860px;
  margin: 0 auto !important;
}

.modal.tp-modal .modal-content {
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100vh - 32px) !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

.modal.tp-modal .modal-header {
  flex: 0 0 auto !important;
}

.modal.tp-modal .modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 16px 22px !important;
}

.modal.tp-modal .modal-footer {
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 14px 22px !important;
  background: #fff !important;
  border-top: 1px solid #e5e7eb !important;
}

/* Ajuste extra para pantallas pequeñas */
@media (max-height: 760px) {
  .modal.tp-modal .modal-content {
    max-height: calc(100vh - 20px) !important;
  }

  .modal.tp-modal .modal-body {
    padding: 14px 18px !important;
  }

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

/* =========================================================
   Modal Nuevo Ticket - soporte para pantallas pequeñas
   El body hace scroll y el footer queda visible
   ========================================================= */

.modal.tp-modal.in {
    overflow-y: auto !important;
    padding: 12px !important;
}

.modal.tp-modal .modal-dialog {
    width: 100% !important;
    max-width: 860px !important;
    margin: 12px auto !important;
}

.modal.tp-modal .modal-content {
    max-height: calc(100vh - 24px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}

.modal.tp-modal .modal-header {
    flex: 0 0 auto !important;
}

.modal.tp-modal .modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 170px) !important;
    padding: 16px 22px !important;
}

.modal.tp-modal .modal-footer {
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    background: #fff !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 14px 22px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

/* Para laptops pequeñas o pantallas bajas */
@media (max-height: 760px) {
    .modal.tp-modal .modal-dialog {
        margin: 8px auto !important;
    }

    .modal.tp-modal .modal-content {
        max-height: calc(100vh - 16px) !important;
    }

    .modal.tp-modal .modal-body {
        max-height: calc(100vh - 155px) !important;
        padding: 14px 18px !important;
    }

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