.clear {
    clear: both; }

  ol li {
    margin: 5px 0; }

  /*******************
  Paddings
  *******************/
  .p-0 {
    padding: 0px; }

  .p-10 {
    padding: 10px; }

  .p-20 {
    padding: 20px; }

  .p-30 {
    padding: 30px; }

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

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

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

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

  .p-r-10 {
    padding-right: 10px; }

  .p-r-20 {
    padding-right: 20px; }

  .p-r-30 {
    padding-right: 30px; }

  .p-r-40 {
    padding-right: 40px; }

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

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

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

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

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

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

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

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

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

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

  /*******************
  Margin
  *******************/
  .m-0 {
    margin: 0px; }

  .ml-1 {
    margin-left: 5px; }

  .ml-2 {
    margin-left: 10px; }

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

  .ml-3 {
    margin-left: 20px; }

  .ml-4 {
    margin-left: 30px; }

  .ml-5 {
    margin-left: 40px; }

  .mr-1 {
    margin-right: 5px; }

  .mr-2 {
    margin-right: 10px; }

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

  .mr-3 {
    margin-right: 20px; }

  .mr-4 {
    margin-right: 30px; }

  .mr-5 {
    margin-right: 40px; }

  .mt-0 {
    margin-top: 0px; }

  /* =========================
     MQTT Global Status Badge
     ========================= */
  .mqtt-status-floating {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 9999;
    display: none;
    pointer-events: auto;
  }

  .mqtt-status-floating .badge {
    font-size: 11px;
    padding: 6px 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
    cursor: default;
    user-select: none;
  }

  /* =========================
     Shared Detail Dark Surface
     ========================= */
  body.template-transparent .myruns-detail-surface-scope,
  body.dark-mode .myruns-detail-surface-scope,
  body[data-bs-theme='dark'] .myruns-detail-surface-scope,
  html[data-bs-theme='dark'] body .myruns-detail-surface-scope,
  body.theme-gray-600 .myruns-detail-surface-scope,
  body[class*='theme-gray'] .myruns-detail-surface-scope,
  body.panel-header-theme-gray .myruns-detail-surface-scope {
    --bs-card-bg: #0f172a;
  }

  body.template-transparent .myruns-detail-surface-scope .panel,
  body.dark-mode .myruns-detail-surface-scope .panel,
  body[data-bs-theme='dark'] .myruns-detail-surface-scope .panel,
  html[data-bs-theme='dark'] body .myruns-detail-surface-scope .panel,
  body.theme-gray-600 .myruns-detail-surface-scope .panel,
  body[class*='theme-gray'] .myruns-detail-surface-scope .panel,
  body.panel-header-theme-gray .myruns-detail-surface-scope .panel,
  body.template-transparent .myruns-detail-surface-scope .card,
  body.dark-mode .myruns-detail-surface-scope .card,
  body[data-bs-theme='dark'] .myruns-detail-surface-scope .card,
  html[data-bs-theme='dark'] body .myruns-detail-surface-scope .card,
  body.theme-gray-600 .myruns-detail-surface-scope .card,
  body[class*='theme-gray'] .myruns-detail-surface-scope .card,
  body.panel-header-theme-gray .myruns-detail-surface-scope .card {
    background-color: #0f172a !important;
    border-color: rgba(100, 116, 139, 0.24) !important;
  }

  body.template-transparent .myruns-detail-surface-scope .card,
  body.dark-mode .myruns-detail-surface-scope .card,
  body[data-bs-theme='dark'] .myruns-detail-surface-scope .card,
  html[data-bs-theme='dark'] body .myruns-detail-surface-scope .card,
  body.theme-gray-600 .myruns-detail-surface-scope .card,
  body[class*='theme-gray'] .myruns-detail-surface-scope .card,
  body.panel-header-theme-gray .myruns-detail-surface-scope .card {
    --bs-card-bg: #0f172a;
  }

  body.template-transparent .myruns-detail-surface-scope .tab-content.panel,
  body.dark-mode .myruns-detail-surface-scope .tab-content.panel,
  body[data-bs-theme='dark'] .myruns-detail-surface-scope .tab-content.panel,
  html[data-bs-theme='dark'] body .myruns-detail-surface-scope .tab-content.panel,
  body.theme-gray-600 .myruns-detail-surface-scope .tab-content.panel,
  body[class*='theme-gray'] .myruns-detail-surface-scope .tab-content.panel,
  body.panel-header-theme-gray .myruns-detail-surface-scope .tab-content.panel,
  body.template-transparent .myruns-detail-surface-scope .tab-base,
  body.dark-mode .myruns-detail-surface-scope .tab-base,
  body[data-bs-theme='dark'] .myruns-detail-surface-scope .tab-base,
  html[data-bs-theme='dark'] body .myruns-detail-surface-scope .tab-base,
  body.theme-gray-600 .myruns-detail-surface-scope .tab-base,
  body[class*='theme-gray'] .myruns-detail-surface-scope .tab-base,
  body.panel-header-theme-gray .myruns-detail-surface-scope .tab-base,
  body.template-transparent .myruns-detail-surface-scope .tab-base > .nav.nav-pills,
  body.dark-mode .myruns-detail-surface-scope .tab-base > .nav.nav-pills,
  body[data-bs-theme='dark'] .myruns-detail-surface-scope .tab-base > .nav.nav-pills,
  html[data-bs-theme='dark'] body .myruns-detail-surface-scope .tab-base > .nav.nav-pills,
  body.theme-gray-600 .myruns-detail-surface-scope .tab-base > .nav.nav-pills,
  body[class*='theme-gray'] .myruns-detail-surface-scope .tab-base > .nav.nav-pills,
  body.panel-header-theme-gray .myruns-detail-surface-scope .tab-base > .nav.nav-pills,
  body.template-transparent .myruns-detail-surface-scope .device-view-toggle,
  body.dark-mode .myruns-detail-surface-scope .device-view-toggle,
  body[data-bs-theme='dark'] .myruns-detail-surface-scope .device-view-toggle,
  html[data-bs-theme='dark'] body .myruns-detail-surface-scope .device-view-toggle,
  body.theme-gray-600 .myruns-detail-surface-scope .device-view-toggle,
  body[class*='theme-gray'] .myruns-detail-surface-scope .device-view-toggle,
  body.panel-header-theme-gray .myruns-detail-surface-scope .device-view-toggle,
  body.template-transparent .myruns-detail-surface-scope .plant-view-toggle,
  body.dark-mode .myruns-detail-surface-scope .plant-view-toggle,
  body[data-bs-theme='dark'] .myruns-detail-surface-scope .plant-view-toggle,
  html[data-bs-theme='dark'] body .myruns-detail-surface-scope .plant-view-toggle,
  body.theme-gray-600 .myruns-detail-surface-scope .plant-view-toggle,
  body[class*='theme-gray'] .myruns-detail-surface-scope .plant-view-toggle,
  body.panel-header-theme-gray .myruns-detail-surface-scope .plant-view-toggle {
    background-color: #0f172a !important;
    background-image: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(11, 18, 32, 0.96) 100%) !important;
    border-color: rgba(100, 116, 139, 0.24) !important;
  }

  body.template-transparent .myruns-detail-surface-scope .tab-base,
  body.dark-mode .myruns-detail-surface-scope .tab-base,
  body[data-bs-theme='dark'] .myruns-detail-surface-scope .tab-base,
  html[data-bs-theme='dark'] body .myruns-detail-surface-scope .tab-base,
  body.theme-gray-600 .myruns-detail-surface-scope .tab-base,
  body[class*='theme-gray'] .myruns-detail-surface-scope .tab-base,
  body.panel-header-theme-gray .myruns-detail-surface-scope .tab-base {
    border-radius: 12px;
  }

  body.template-transparent .myruns-detail-surface-scope .tab-content.panel.p-3.rounded,
  body.dark-mode .myruns-detail-surface-scope .tab-content.panel.p-3.rounded,
  body[data-bs-theme='dark'] .myruns-detail-surface-scope .tab-content.panel.p-3.rounded,
  html[data-bs-theme='dark'] body .myruns-detail-surface-scope .tab-content.panel.p-3.rounded,
  body.theme-gray-600 .myruns-detail-surface-scope .tab-content.panel.p-3.rounded,
  body[class*='theme-gray'] .myruns-detail-surface-scope .tab-content.panel.p-3.rounded,
  body.panel-header-theme-gray .myruns-detail-surface-scope .tab-content.panel.p-3.rounded {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(11, 18, 32, 0.96) 100%) !important;
    background-color: #0f172a !important;
    border-color: rgba(100, 116, 139, 0.24) !important;
  }

  body.template-transparent .myruns-detail-host.panel.panel-inverse > .panel-heading,
  body.dark-mode .myruns-detail-host.panel.panel-inverse > .panel-heading,
  body[data-bs-theme='dark'] .myruns-detail-host.panel.panel-inverse > .panel-heading,
  html[data-bs-theme='dark'] body .myruns-detail-host.panel.panel-inverse > .panel-heading,
  body.theme-gray-600 .myruns-detail-host.panel.panel-inverse > .panel-heading,
  body[class*='theme-gray'] .myruns-detail-host.panel.panel-inverse > .panel-heading,
  body.panel-header-theme-gray .myruns-detail-host.panel.panel-inverse > .panel-heading {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.99) 0%, rgba(11, 18, 32, 0.97) 100%) !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.24) !important;
  }

  body.template-transparent .myruns-detail-host.panel.panel-inverse,
  body.dark-mode .myruns-detail-host.panel.panel-inverse,
  body[data-bs-theme='dark'] .myruns-detail-host.panel.panel-inverse,
  html[data-bs-theme='dark'] body .myruns-detail-host.panel.panel-inverse,
  body.theme-gray-600 .myruns-detail-host.panel.panel-inverse,
  body[class*='theme-gray'] .myruns-detail-host.panel.panel-inverse,
  body.panel-header-theme-gray .myruns-detail-host.panel.panel-inverse,
  body.template-transparent .myruns-detail-host #editorCAM,
  body.dark-mode .myruns-detail-host #editorCAM,
  body[data-bs-theme='dark'] .myruns-detail-host #editorCAM,
  html[data-bs-theme='dark'] body .myruns-detail-host #editorCAM,
  body.theme-gray-600 .myruns-detail-host #editorCAM,
  body[class*='theme-gray'] .myruns-detail-host #editorCAM,
  body.panel-header-theme-gray .myruns-detail-host #editorCAM {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.99) 0%, rgba(11, 18, 32, 0.97) 100%) !important;
    background-color: #0f172a !important;
    border-color: rgba(100, 116, 139, 0.24) !important;
  }

  body.template-transparent .myruns-detail-host .panel-body,
  body.dark-mode .myruns-detail-host .panel-body,
  body[data-bs-theme='dark'] .myruns-detail-host .panel-body,
  html[data-bs-theme='dark'] body .myruns-detail-host .panel-body,
  body.theme-gray-600 .myruns-detail-host .panel-body,
  body[class*='theme-gray'] .myruns-detail-host .panel-body,
  body.panel-header-theme-gray .myruns-detail-host .panel-body,
  body.template-transparent .myruns-detail-host #editorCAM,
  body.dark-mode .myruns-detail-host #editorCAM,
  body[data-bs-theme='dark'] .myruns-detail-host #editorCAM,
  html[data-bs-theme='dark'] body .myruns-detail-host #editorCAM,
  body.theme-gray-600 .myruns-detail-host #editorCAM,
  body[class*='theme-gray'] .myruns-detail-host #editorCAM,
  body.panel-header-theme-gray .myruns-detail-host #editorCAM {
    padding: 0 !important;
  }

  body.template-transparent [class*='am5-layer'] text,
  body.dark-mode [class*='am5-layer'] text,
  body[data-bs-theme='dark'] [class*='am5-layer'] text,
  html[data-bs-theme='dark'] body [class*='am5-layer'] text,
  body.theme-gray-600 [class*='am5-layer'] text,
  body[class*='theme-gray'] [class*='am5-layer'] text,
  body.panel-header-theme-gray [class*='am5-layer'] text,
  body.template-transparent [class*='am5-layer'] tspan,
  body.dark-mode [class*='am5-layer'] tspan,
  body[data-bs-theme='dark'] [class*='am5-layer'] tspan,
  html[data-bs-theme='dark'] body [class*='am5-layer'] tspan,
  body.theme-gray-600 [class*='am5-layer'] tspan,
  body[class*='theme-gray'] [class*='am5-layer'] tspan,
  body.panel-header-theme-gray [class*='am5-layer'] tspan {
    fill: #e2e8f0 !important;
  }

  .mt-1 {
    margin-top: 5px; }

  .mt-2 {
    margin-top: 10px; }

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

  .mt-3 {
    margin-top: 20px; }

  .mt-4 {
    margin-top: 30px; }

  .mt-5 {
    margin-top: 40px; }

  .mb-0 {
    margin-bottom: 0px; }

  .mb-1 {
    margin-bottom: 5px; }

  .mb-2 {
    margin-bottom: 10px; }

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

  .mb-3 {
    margin-bottom: 20px; }

  .mb-4 {
    margin-bottom: 30px; }

  .mb-5 {
    margin-bottom: 40px; }

  /*******************
  vertical alignment
  *******************/
  .vt {
    vertical-align: top; }

  .vm {
    vertical-align: middle; }

  .vb {
    vertical-align: bottom; }

  /*******************
  font weight
  *******************/
  .font-bold {
    font-weight: 700; }

  .font-normal {
    font-weight: normal; }

  .font-light {
    font-weight: 300; }

  .font-medium {
    font-weight: 400; }

  .font-16 {
    font-size: 16px; }

  .font-14 {
    font-size: 14px; }

  .font-18 {
    font-size: 18px; }

  .font-20 {
    font-size: 20px; }
    
  .font-10 {
    font-size: 10px; }

  /* =========================
     Panel Header Themes
     ========================= */
  .panel-header-theme-minimalist .panel .panel-heading {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
  }

  .panel-header-theme-minimalist .panel .panel-title,
  .panel-header-theme-minimalist .panel .panel-title i {
    color: #495057;
    font-weight: 600;
  }

  .panel-header-theme-minimalist .panel .panel-heading-btn .btn {
    background: transparent;
    border-color: transparent;
    color: #6c757d;
    box-shadow: none;
    opacity: 0.8;
  }

  .panel-header-theme-minimalist .panel .panel-heading-btn .btn:hover {
    color: #212529;
    background: rgba(0, 0, 0, 0.04);
    opacity: 1;
  }

  /* Brand logo: switch to negative when header is inverse.
     Do not rely on app-theme-header cookie because the theme panel may use localStorage/cookies depending on build.
     The runtime state is reflected on the header element via class/attribute. */
  .app-header .navbar-logo-negative {
      display: none;
  }

  .app-header.app-header-inverse .navbar-logo-positive,
  .app-header[data-bs-theme="dark"] .navbar-logo-positive {
      display: none;
  }

  .app-header.app-header-inverse .navbar-logo-negative,
  .app-header[data-bs-theme="dark"] .navbar-logo-negative {
      display: inline-block;
  }

  .panel-header-theme-clear-colored .panel .panel-heading {
    background: var(--bs-primary) !important;
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.25);
    border-top: 3px solid rgba(0, 0, 0, 0.1);
  }

  .panel-header-theme-clear-colored .panel.panel-inverse > .panel-heading,
  .panel-header-theme-clear-colored .panel.panel-inverse > .panel-heading {
    background: var(--bs-primary) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.25) !important;
    border-top: 3px solid rgba(0, 0, 0, 0.1) !important;
  }

  .panel-header-theme-clear-colored .panel .panel-title,
  .panel-header-theme-clear-colored .panel .panel-title i {
    color: #ffffff;
    font-weight: 600;
  }

  .panel-header-theme-clear-colored .panel .panel-heading-btn .btn {
    background: transparent;
    border-color: transparent;
    color: #ffffff;
    box-shadow: none;
    opacity: 0.7;
  }

  .panel-header-theme-clear-colored .panel .panel-heading-btn .btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    opacity: 1;
  }
    
  .font-12 {
    font-size: 12px; }

  /*******************
  Border
  *******************/
  .b-0 {
    border: none; }

  .b-r {
    border-right: 1px solid rgba(120, 130, 140, 0.13); }

  .b-l {
    border-left: 1px solid rgba(120, 130, 140, 0.13); }

  .b-b {
    border-bottom: 1px solid rgba(120, 130, 140, 0.13); }

  .b-t {
    border-top: 1px solid rgba(120, 130, 140, 0.13); }

  .b-all {
    border: 1px solid rgba(120, 130, 140, 0.13) !important; }

  .dl {
    display: inline-block; }

  .db {
    display: block; }

  .no-wrap td, .no-wrap th {
    white-space: nowrap; }

.bootstrap-table .fixed-table-container .fixed-table-body{

    overflow: visible !important;

}

.floating-like-gmail, .floating-like-gmail2, .floating-like-gmail-fade {
    position: absolute;
    bottom: 10px;
    right: 10px;
    max-width: 100vw;
    width: 400px;
    right: 10px;
    text-align: right;
    opacity: 0;
    transition: 500ms;
}

.hover-this:hover .floating-like-gmail,.floating-like-gmail:hover {
    opacity: 0.6;
    animation: fadeIn 1.5s, bounceInRight 0.8s;
}

.hover-this:hover .floating-like-gmail2,.floating-like-gmail2:hover,
.grey-on-hover:hover .floating-like-gmail2 {
    opacity: 0.6;
}

/* Fade effect for Bootstrap items */
.bootstrap-item:hover .floating-like-gmail-fade,
.elemento_dashboard:hover .floating-like-gmail-fade,
.floating-like-gmail-fade:hover {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.dropdown-header {
    padding: 5px 10px;
    font-size: 14px;
    color: #999;
    text-transform: uppercase;
    font-weight: 600;
    font-style: italic;
    background-color: #f5f5f5;
}

.round {
    line-height: 45px;
    color: #fff;
    width: 45px;
    height: 45px;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    border-radius: 100%;
    background: #009efb
}
.round img {
    border-radius: 100%
}
.round.round-info {
    background: #009efb
}
.round.round-warning {
    background: #ffbc34
}
.round.round-danger {
    background: #f62d51
}
.round.round-success {
    background: #55ce63
}
.round.round-primary {
    background: #7460ee
}
.label {
    padding: 2px 10px;
    line-height: 13px;
    color: #fff;
    font-weight: 400;
    border-radius: 4px;
    font-size: 75%
}
.label-rounded {
    border-radius: 60px
}

.breadcrumb{
    padding-bottom: 0px !important;
}

.hover-this:hover .floating-like-gmail,.floating-like-gmail:hover {
    opacity: 1;
    cursor: pointer;
}
.table-hover:hover {
    cursor: pointer;
}
.chk_verde .custom-control-input:checked~.custom-control-label::before{
	background-color:#28a745;
}
.chk_rojo .custom-control-input:checked~.custom-control-label::before{
    background-color:#dc3545;
}
.select2-container {
    /* width: calc(100% - 72px) !important; */
    padding-right: 0px;
}


.rounded{
  border-radius: 4px;
}
.rounded2{
  border-radius: 6px;
}
.rounded3{
  border-radius: 8px;
}
.rounded4{
  border-radius: 10px;
}

.cursor-pointer{
  cursor: pointer;
}

td{
  font-size: 14px;
}

.blink_me {
  animation: blinker 3s linear infinite;
}

@keyframes blinker {
  50% {
      opacity: .2;
  }
}

/* Estilos para los dashboard y KPIs */
.body_zona {
  padding: 0px 0px 0px 0px !important;
}

.card-body-zonas {
  padding: 0px 0px 0px 0px !important;
}


.grid-item { width: 120px; 
  height: 120px;
  float: left;
}
.grid-item--width1 { width: 120px; }
.grid-item--width2 { width: 240px; }
.grid-item--width3 { width: 360px; }
.grid-item--width4 { width: 480px; }
.grid-item--width5 { width: 600px; }
.grid-item--width6 { width: 720px; }
.grid-item--width7 { width: 840px; }
.grid-item--width8 { width: 960px; }
.grid-item--width9 { width: 1080px; }
.grid-item--width10 { width: 1200px; }
.grid-item--width11 { width: 1320px; }
.grid-item--width12 { width: 1440px; }
.grid-item--width13 { width: 1560px; }
.grid-item--width14 { width: 1680px; }
.grid-item--width15 { width: 1800px; }
.grid-item--width16 { width: 1920px; }
.grid-item--width17 { width: 2040px; }
.grid-item--width18 { width: 2160px; }
.grid-item--width19 { width: 2280px; }
.grid-item--width20 { width: 2400px; }
.grid-item--height1 { height: 120px; }
.grid-item--height2 { height: 240px; }
.grid-item--height3 { height: 360px; }
.grid-item--height4 { height: 480px; }
.grid-item--height5 { height: 600px; }
.grid-item--height6 { height: 720px; }
.grid-item--height7 { height: 840px; }
.grid-item--height8 { height: 960px; }
.grid-item--height9 { height: 1080px; }
.grid-item--height10 { height: 1200px; }
.grid-item--height11 { height: 1320px; }
.grid-item--height12 { height: 1440px; }
.grid-item--height13 { height: 1560px; }
.grid-item--height14 { height: 1680px; }
.grid-item--height15 { height: 1800px; }
.grid-item--height16 { height: 1920px; }
.grid-item--height17 { height: 2040px; }
.grid-item--height18 { height: 2160px; }
.grid-item--height19 { height: 2200px; }
.grid-item--height20 { height: 2400px; }

.grid-item-debug{
background: #fff394;
border: 1px dotted #f45d69;
}
.grid-item-content {
width:  100%;
height: 100%;
background: #09D;
transition: width 0.4s, height 0.4s;
}
/* item has expanded size */
.grid-item.is-expanded {
width: 80%;
height: 600px;
}

.grid-item-editor{
background: #fdfcdd;
border: 2px solid #ccc;
border-radius: 5px;
padding: 5px;

}

.grid-item.is-dragging,
/* Packery adds class while transitioning to drop position */
.grid-item.is-positioning-post-drag {
background: #EA0;
z-index: 2; /* keep dragged item on top */
}

.packery-drop-placeholder {
outline: 3px dashed #444;
outline-offset: -6px;
/* transition position changing */
-webkit-transition: -webkit-transform 0.2s;
      transition: transform 0.2s;
}

.indicador_debug{
font-size: 10px;
color: #7460ee;
}


.error {
color: red;
font-size: 16px;
font-weight: 700;
}

/*********************
 * Table Enhancements
 *********************/
.td-with-floating-buttons {
    position: relative;
}

/* Auto-apply to last column in server-side tables */
.panel-body-with-table tbody tr td:last-child {
    position: relative;
}

/*********************
 * Draggable Panels
 *********************/
.panel-draggable-details {
    display: none;
    position: absolute;
    cursor: move;
    width: 600px;
    border: 1px solid #ccc !important;
    box-shadow: 0 0 20px rgba(0,0,0,0.3) !important;
    z-index: 1000;
}

/* Override display for panels that should be visible by default */
.panel-draggable-details.show-by-default {
    display: block;
}

.panel-draggable-details-wide {
    width: 800px;
}

.panel-draggable-details-offset {
    top: 150px;
}

/*********************
 * Z-Index Scale
 *********************/
.z-base { z-index: 1 !important; }
.z-content { z-index: 10 !important; }
.z-floating-buttons { z-index: 10 !important; }
.z-tooltips { z-index: 100 !important; }
.z-sticky { z-index: 500 !important; }
.z-panel { z-index: 1000 !important; }
.z-panel-header { z-index: 1001 !important; }
.z-drawer { z-index: 1500 !important; }
.z-dropdown-row { z-index: 2000 !important; }
.z-dropdown-trigger { z-index: 2001 !important; }
.z-dropdown-btn-group { z-index: 2002 !important; }
.z-dropdown-menu { z-index: 2055 !important; }
.z-notification { z-index: 3000 !important; }
.z-critical { z-index: 3005 !important; }
.z-modal-backdrop { z-index: 9000 !important; }
.z-modal { z-index: 9999 !important; }

/*********************
 * Width Utilities
 *********************/
.select2-full-width {
    width: 100% !important;
}

.select2-medium {
    width: 350px !important;
}

/* Table column widths */
.th-checkbox { width: 10px; }
.th-id { width: 30px; }
.th-small { width: 80px; }
.th-medium { width: 150px; }
.th-large { width: 250px; }
.th-date { width: 130px; }
.th-actions { width: 200px; }
.th-30pct { width: 30%; }
.th-40pct { width: 40%; }

/*********************
 * Overflow Utilities
 *********************/
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }

.log-viewer {
    overflow: auto;
    max-height: 400px;
    background: #1e1e1e;
    color: #dcdcdc;
    padding: 10px;
    font-size: 12px;
    font-family: 'Consolas', 'Monaco', monospace;
}

.form-photo-container {
    overflow: hidden;
    border: 1px solid #ccc;
}

/*********************
 * Border Utilities
 *********************/
.border-default { border: 1px solid #ccc; }
.border-light-gray { border: 1px solid #cccccc; }
.border-danger { border: 1px solid darkred; }
.border-warning { border: 1px solid saddlebrown; }
.border-card { border: 1px solid #dee2e6; }
.border-input { border: 1px solid #e1e8ed; }

.ace-editor-container {
    border: 1px solid #e1e8ed;
    border-radius: 8px;
}

/*********************
 * Shadow Utilities
 *********************/
.shadow-panel {
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.shadow-hover-sm {
    transition: box-shadow 0.3s ease;
}
.shadow-hover-sm:hover {
    box-shadow: 0 0 5px rgba(92, 184, 92, 0.3);
}

.shadow-hover-md:hover {
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.4);
}

.shadow-hover-lg:hover {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.8), 0 0 30px rgba(118, 75, 162, 0.6);
}

/*********************
 * Report Tables
 *********************/
.table-informes th {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
}

.table-informes th.excel-header {
    background-color: #cccccc !important;
}

.table-informes th.pdf-header {
    background-color: #f0f0f0 !important;
    white-space: nowrap;
    font-size: 11px;
    padding: 5px 3px;
}

.table-informes td.pdf-cell {
    background-color: white !important;
    text-align: center;
}

/* Automatic application for report tables based on output type */
.table-informes.excel-output th {
    text-align: center;
    background-color: #cccccc;
    font-size: 12px;
    font-weight: bold;
}

.table-informes.pdf-output th {
    background-color: #f0f0f0 !important;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    font-size: 11px;
    padding: 5px 3px;
}

.table-informes.pdf-output td {
    background-color: white !important;
}

.table-informes.pdf-output tr {
    background-color: white !important;
}

/* Excel output styles */
.table-informes.excel-output {
    font-size: 12px;
}

.table-informes.excel-output th {
    text-align: center;
    background-color: #cccccc;
    font-size: 12px;
    font-weight: bold;
}

/* Screen/Pantalla output styles */
.table-informes.pantalla-output {
    font-size: 12px;
}

/*********************
 * State Backgrounds
 *********************/
.bg-state-active {
    background-color: #007bff !important;
}

.bg-state-inactive {
    background-color: #f8f9fa !important;
}

.bg-state-dark {
    background-color: #333333 !important;
}

.bg-report-header-excel {
    background-color: #cccccc !important;
}

.bg-report-header-pdf {
    background-color: #f0f0f0 !important;
}

.bg-report-cell {
    background-color: white !important;
}

/* Selection pills */
.pill-selected {
    background-color: #02c59b !important;
}

.pill-unselected {
    background-color: #eae3b8 !important;
}

/* Status colors (complement existing badge classes) */
.bg-orange {
    background-color: #fd7e14 !important;
}

.bg-light-gray {
    background-color: #aaa !important;
}

/* ============================================
   STATUS INDICATOR ANIMATIONS
   ============================================ */

/* Pulse animations - opacity fade in/out */
@keyframes status-pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes status-pulse-medium {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@keyframes status-pulse-fast {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-effect-pulse-slow {
    animation: status-pulse-slow 3s ease-in-out infinite;
}

.status-effect-pulse-medium {
    animation: status-pulse-medium 2s ease-in-out infinite;
}

.status-effect-pulse-fast {
    animation: status-pulse-fast 1s ease-in-out infinite;
}

/* Flash animation - quick on/off */
@keyframes status-flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

.status-effect-flash {
    animation: status-flash 1.5s linear infinite;
}

/* Blink animation - standard on/off */
@keyframes status-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.status-effect-blink {
    animation: status-blink 1s step-end infinite;
}

/* Glow animation - scale and opacity */
@keyframes status-glow {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
        filter: drop-shadow(0 0 2px currentColor);
    }
    50% { 
        opacity: 0.6; 
        transform: scale(1.2);
        filter: drop-shadow(0 0 6px currentColor);
    }
}

.status-effect-glow {
    animation: status-glow 2s ease-in-out infinite;
    transform-origin: center;
}

/* Bounce animation - vertical movement */
@keyframes status-bounce {
    0%, 100% { 
        transform: translateY(0); 
    }
    50% { 
        transform: translateY(-4px); 
    }
}

.status-effect-bounce {
    animation: status-bounce 1.5s ease-in-out infinite;
}

/* Base status styling */
.device-shape-status {
    transition: all 0.2s ease;
}

/* ===================================
   Device Editor Styles
   =================================== */

/* Antenna power input - consistent width across all contexts */
.input-antena-pwr {
    width: 95px !important;
    max-width: 100%;
}

/* Device editor card body */
.device-editor .card-body {
    padding: 16px;
    height: auto;
    min-height: 100px;
}

/* Floor plan positions - prevent cursor change */
.flpuesto {
    cursor: default !important;
}

/* Quill editor for observations */
#edit_observaciones .ql-container {
    height: 100px;
}

#edit_observaciones .ql-editor {
    min-height: 50px;
    height: auto !important;
}

/* Announcements editor modal */
.announcement-quill .ql-container {
  height: 340px;
}

.announcement-quill .ql-editor {
  min-height: 240px;
  height: auto !important;
}

.announcement-dropzone {
  min-height: 120px;
}

/* Announcements: Dropzone message should be muted */
.announcement-dropzone .dz-message,
.announcement-dropzone .dz-message span,
.announcement-dropzone .dz-message h4 {
  color: var(--bs-secondary-color) !important;
}

.announcement-dropzone .dz-message .upload-icon,
.announcement-dropzone .dz-message .fa,
.announcement-dropzone .dz-message i {
  color: var(--bs-secondary-color) !important;
}

/* Announcements: small theme preview square (like MKD) */
.announcement-theme-preview {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex: 0 0 auto;
}

/* Select2 dropdown swatch */
.announcement-theme-option-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex: 0 0 auto;
  display: inline-block;
}

.announcement-theme-preview.none,
.announcement-theme-option-swatch.none { background: repeating-linear-gradient(45deg, #f8f9fa, #f8f9fa 10px, #dee2e6 10px, #dee2e6 20px); }
.announcement-theme-preview.none { border: 2px dashed #6c757d; }

.announcement-theme-preview.clean,
.announcement-theme-option-swatch.clean { background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); }
.announcement-theme-preview.enhanced,
.announcement-theme-option-swatch.enhanced { background: linear-gradient(135deg, #f5f7fa 0%, #edf2f7 100%); }
.announcement-theme-preview.dark,
.announcement-theme-option-swatch.dark { background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); }
.announcement-theme-preview.retro,
.announcement-theme-option-swatch.retro { background: linear-gradient(135deg, #f0e7db 0%, #d4a373 100%); }
.announcement-theme-preview.neon,
.announcement-theme-option-swatch.neon { background: linear-gradient(135deg, #0a0e27 0%, #00ffff 100%); }
.announcement-theme-preview.minimal,
.announcement-theme-option-swatch.minimal { background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%); }
.announcement-theme-preview.forest,
.announcement-theme-option-swatch.forest { background: linear-gradient(135deg, #e8f5e9 0%, #4a7c4e 100%); }
.announcement-theme-preview.ocean,
.announcement-theme-option-swatch.ocean { background: linear-gradient(135deg, #cfe9ff 0%, #006494 100%); }
.announcement-theme-preview.sun,
.announcement-theme-option-swatch.sun { background: linear-gradient(135deg, #fffbeb 0%, #f59e0b 100%); }
.announcement-theme-preview.space,
.announcement-theme-option-swatch.space { background: linear-gradient(135deg, #0b0d17 0%, #4f7cff 100%); }
.announcement-theme-preview.desert,
.announcement-theme-option-swatch.desert { background: linear-gradient(135deg, #f4e8d8 0%, #d4a574 100%); }
.announcement-theme-preview.mountain,
.announcement-theme-option-swatch.mountain { background: linear-gradient(135deg, #d6eaf8 0%, #5499c7 100%); }
.announcement-theme-preview.city,
.announcement-theme-option-swatch.city { background: linear-gradient(135deg, #ecf0f1 0%, #3498db 100%); }
.announcement-theme-preview.classic,
.announcement-theme-option-swatch.classic { background: linear-gradient(135deg, #faf8f5 0%, #c9a961 100%); }
.announcement-theme-preview.industrial,
.announcement-theme-option-swatch.industrial { background: linear-gradient(135deg, #2a2e35 0%, #95a5a6 100%); }
.announcement-theme-preview.wood,
.announcement-theme-option-swatch.wood { background: linear-gradient(135deg, #f5f1e8 0%, #8d6e63 100%); }
.announcement-theme-preview.softpink,
.announcement-theme-option-swatch.softpink { background: linear-gradient(135deg, #fef6f9 0%, #f8bbd0 100%); }
.announcement-theme-preview.custom,
.announcement-theme-option-swatch.custom { background: linear-gradient(135deg, #e0e0e0 0%, #ffffff 100%); }

/* Announcements: apply selected theme to the user-facing modal + editor preview modal (scoped) */
#modal-announcement.announcement-theme-none .modal-header,
#modal-announcement.announcement-theme-none .modal-body,
#modal-announcement.announcement-theme-none .modal-footer,
#modal-announcement-preview.announcement-theme-none .modal-header,
#modal-announcement-preview.announcement-theme-none .modal-body,
#modal-announcement-preview.announcement-theme-none .modal-footer {
  /* no-op */
}

#modal-announcement[class*="announcement-theme-"] .modal-header,
#modal-announcement-preview[class*="announcement-theme-"] .modal-header {
  background-image: none;
}

/* Default body/footer background stays white unless overridden below */
#modal-announcement[class*="announcement-theme-"] .modal-body,
#modal-announcement-preview[class*="announcement-theme-"] .modal-body,
#modal-announcement[class*="announcement-theme-"] .modal-footer,
#modal-announcement-preview[class*="announcement-theme-"] .modal-footer {
  background: #fff;
}

/* Apply theme backgrounds to body/footer too (lighter variants) */
#modal-announcement.announcement-theme-clean .modal-body,
#modal-announcement-preview.announcement-theme-clean .modal-body,
#modal-announcement.announcement-theme-clean .modal-footer,
#modal-announcement-preview.announcement-theme-clean .modal-footer { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); }

#modal-announcement.announcement-theme-enhanced .modal-body,
#modal-announcement-preview.announcement-theme-enhanced .modal-body,
#modal-announcement.announcement-theme-enhanced .modal-footer,
#modal-announcement-preview.announcement-theme-enhanced .modal-footer { background: linear-gradient(135deg, #ffffff 0%, #edf2f7 100%); }

#modal-announcement.announcement-theme-retro .modal-body,
#modal-announcement-preview.announcement-theme-retro .modal-body,
#modal-announcement.announcement-theme-retro .modal-footer,
#modal-announcement-preview.announcement-theme-retro .modal-footer { background: linear-gradient(135deg, #fffaf2 0%, #f0e7db 100%); }

#modal-announcement.announcement-theme-neon .modal-body,
#modal-announcement-preview.announcement-theme-neon .modal-body,
#modal-announcement.announcement-theme-neon .modal-footer,
#modal-announcement-preview.announcement-theme-neon .modal-footer { background: linear-gradient(135deg, #f8fbff 0%, #e6ffff 100%); }

#modal-announcement.announcement-theme-minimal .modal-body,
#modal-announcement-preview.announcement-theme-minimal .modal-body,
#modal-announcement.announcement-theme-minimal .modal-footer,
#modal-announcement-preview.announcement-theme-minimal .modal-footer { background: #ffffff; }

#modal-announcement.announcement-theme-forest .modal-body,
#modal-announcement-preview.announcement-theme-forest .modal-body,
#modal-announcement.announcement-theme-forest .modal-footer,
#modal-announcement-preview.announcement-theme-forest .modal-footer { background: linear-gradient(135deg, #ffffff 0%, #e8f5e9 100%); }

#modal-announcement.announcement-theme-ocean .modal-body,
#modal-announcement-preview.announcement-theme-ocean .modal-body,
#modal-announcement.announcement-theme-ocean .modal-footer,
#modal-announcement-preview.announcement-theme-ocean .modal-footer { background: linear-gradient(135deg, #ffffff 0%, #cfe9ff 100%); }

#modal-announcement.announcement-theme-sun .modal-body,
#modal-announcement-preview.announcement-theme-sun .modal-body,
#modal-announcement.announcement-theme-sun .modal-footer,
#modal-announcement-preview.announcement-theme-sun .modal-footer { background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%); }

#modal-announcement.announcement-theme-desert .modal-body,
#modal-announcement-preview.announcement-theme-desert .modal-body,
#modal-announcement.announcement-theme-desert .modal-footer,
#modal-announcement-preview.announcement-theme-desert .modal-footer { background: linear-gradient(135deg, #ffffff 0%, #f4e8d8 100%); }

#modal-announcement.announcement-theme-mountain .modal-body,
#modal-announcement-preview.announcement-theme-mountain .modal-body,
#modal-announcement.announcement-theme-mountain .modal-footer,
#modal-announcement-preview.announcement-theme-mountain .modal-footer { background: linear-gradient(135deg, #ffffff 0%, #d6eaf8 100%); }

#modal-announcement.announcement-theme-city .modal-body,
#modal-announcement-preview.announcement-theme-city .modal-body,
#modal-announcement.announcement-theme-city .modal-footer,
#modal-announcement-preview.announcement-theme-city .modal-footer { background: linear-gradient(135deg, #ffffff 0%, #ecf0f1 100%); }

#modal-announcement.announcement-theme-classic .modal-body,
#modal-announcement-preview.announcement-theme-classic .modal-body,
#modal-announcement.announcement-theme-classic .modal-footer,
#modal-announcement-preview.announcement-theme-classic .modal-footer { background: linear-gradient(135deg, #ffffff 0%, #faf8f5 100%); }

#modal-announcement.announcement-theme-wood .modal-body,
#modal-announcement-preview.announcement-theme-wood .modal-body,
#modal-announcement.announcement-theme-wood .modal-footer,
#modal-announcement-preview.announcement-theme-wood .modal-footer { background: linear-gradient(135deg, #ffffff 0%, #f5f1e8 100%); }

#modal-announcement.announcement-theme-softpink .modal-body,
#modal-announcement-preview.announcement-theme-softpink .modal-body,
#modal-announcement.announcement-theme-softpink .modal-footer,
#modal-announcement-preview.announcement-theme-softpink .modal-footer { background: linear-gradient(135deg, #ffffff 0%, #fef6f9 100%); }

#modal-announcement.announcement-theme-clean .modal-header,
#modal-announcement-preview.announcement-theme-clean .modal-header { background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); }
#modal-announcement.announcement-theme-enhanced .modal-header,
#modal-announcement-preview.announcement-theme-enhanced .modal-header { background: linear-gradient(135deg, #f5f7fa 0%, #edf2f7 100%); }
#modal-announcement.announcement-theme-dark .modal-header,
#modal-announcement-preview.announcement-theme-dark .modal-header { background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); color: #fff; }
#modal-announcement.announcement-theme-retro .modal-header,
#modal-announcement-preview.announcement-theme-retro .modal-header { background: linear-gradient(135deg, #f0e7db 0%, #d4a373 100%); }
#modal-announcement.announcement-theme-neon .modal-header,
#modal-announcement-preview.announcement-theme-neon .modal-header { background: linear-gradient(135deg, #0a0e27 0%, #00ffff 100%); color: #0a0e27; }
#modal-announcement.announcement-theme-minimal .modal-header,
#modal-announcement-preview.announcement-theme-minimal .modal-header { background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%); }
#modal-announcement.announcement-theme-forest .modal-header,
#modal-announcement-preview.announcement-theme-forest .modal-header { background: linear-gradient(135deg, #e8f5e9 0%, #4a7c4e 100%); color: #fff; }
#modal-announcement.announcement-theme-ocean .modal-header,
#modal-announcement-preview.announcement-theme-ocean .modal-header { background: linear-gradient(135deg, #cfe9ff 0%, #006494 100%); color: #fff; }
#modal-announcement.announcement-theme-sun .modal-header,
#modal-announcement-preview.announcement-theme-sun .modal-header { background: linear-gradient(135deg, #fffbeb 0%, #f59e0b 100%); }
#modal-announcement.announcement-theme-space .modal-header,
#modal-announcement-preview.announcement-theme-space .modal-header { background: linear-gradient(135deg, #0b0d17 0%, #4f7cff 100%); color: #fff; }
#modal-announcement.announcement-theme-desert .modal-header,
#modal-announcement-preview.announcement-theme-desert .modal-header { background: linear-gradient(135deg, #f4e8d8 0%, #d4a574 100%); }
#modal-announcement.announcement-theme-mountain .modal-header,
#modal-announcement-preview.announcement-theme-mountain .modal-header { background: linear-gradient(135deg, #d6eaf8 0%, #5499c7 100%); color: #fff; }
#modal-announcement.announcement-theme-city .modal-header,
#modal-announcement-preview.announcement-theme-city .modal-header { background: linear-gradient(135deg, #ecf0f1 0%, #3498db 100%); color: #fff; }
#modal-announcement.announcement-theme-classic .modal-header,
#modal-announcement-preview.announcement-theme-classic .modal-header { background: linear-gradient(135deg, #faf8f5 0%, #c9a961 100%); }
#modal-announcement.announcement-theme-industrial .modal-header,
#modal-announcement-preview.announcement-theme-industrial .modal-header { background: linear-gradient(135deg, #2a2e35 0%, #95a5a6 100%); color: #fff; }
#modal-announcement.announcement-theme-wood .modal-header,
#modal-announcement-preview.announcement-theme-wood .modal-header { background: linear-gradient(135deg, #f5f1e8 0%, #8d6e63 100%); color: #fff; }
#modal-announcement.announcement-theme-softpink .modal-header,
#modal-announcement-preview.announcement-theme-softpink .modal-header { background: linear-gradient(135deg, #fef6f9 0%, #f8bbd0 100%); }

/* Dark-ish themes: also tint body/footer for better coherence */
#modal-announcement.announcement-theme-dark .modal-body,
#modal-announcement-preview.announcement-theme-dark .modal-body,
#modal-announcement.announcement-theme-dark .modal-footer,
#modal-announcement-preview.announcement-theme-dark .modal-footer {
  background: #111827;
  color: rgba(255, 255, 255, 0.92);
}

#modal-announcement.announcement-theme-space .modal-body,
#modal-announcement-preview.announcement-theme-space .modal-body,
#modal-announcement.announcement-theme-space .modal-footer,
#modal-announcement-preview.announcement-theme-space .modal-footer {
  background: #0b0d17;
  color: rgba(255, 255, 255, 0.92);
}

#modal-announcement.announcement-theme-industrial .modal-body,
#modal-announcement-preview.announcement-theme-industrial .modal-body,
#modal-announcement.announcement-theme-industrial .modal-footer,
#modal-announcement-preview.announcement-theme-industrial .modal-footer {
  background: #1f2937;
  color: rgba(255, 255, 255, 0.92);
}

/* Keep close button readable on dark-ish headers */
#modal-announcement.announcement-theme-dark .btn-link,
#modal-announcement-preview.announcement-theme-dark .btn-link,
#modal-announcement.announcement-theme-space .btn-link,
#modal-announcement-preview.announcement-theme-space .btn-link,
#modal-announcement.announcement-theme-industrial .btn-link,
#modal-announcement-preview.announcement-theme-industrial .btn-link,
#modal-announcement.announcement-theme-forest .btn-link,
#modal-announcement-preview.announcement-theme-forest .btn-link,
#modal-announcement.announcement-theme-ocean .btn-link,
#modal-announcement-preview.announcement-theme-ocean .btn-link,
#modal-announcement.announcement-theme-city .btn-link,
#modal-announcement-preview.announcement-theme-city .btn-link,
#modal-announcement.announcement-theme-mountain .btn-link,
#modal-announcement-preview.announcement-theme-mountain .btn-link,
#modal-announcement.announcement-theme-wood .btn-link,
#modal-announcement-preview.announcement-theme-wood .btn-link {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Antenna configuration alignment */
.d-flex.align-items-center {
    flex-wrap: nowrap;
}

/* Fan spinning animation for device status */
@keyframes fan-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.fan-spinning {
    animation: fan-spin 1.5s linear infinite;
    display: inline-block;
}

/* Terminal Console Styles */
.terminal-container {
    background: #1e1e1e;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    font-family: 'Courier New', Courier, monospace;
    overflow: hidden;
}

.terminal-header {
    background: #2d2d2d;
    padding: 8px 12px;
    border-bottom: 1px solid #3a3a3a;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.terminal-title {
    color: #00ff00;
    font-weight: bold;
    font-size: 13px;
}

.terminal-body {
    background: #0c0c0c;
    color: #00ff00;
    padding: 12px;
    height: 500px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.5;
}

.terminal-body::-webkit-scrollbar {
    width: 8px;
}

.terminal-body::-webkit-scrollbar-track {
    background: #1e1e1e;
}

.terminal-body::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 4px;
}

.terminal-body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.console-line {
    margin-bottom: 4px;
    word-wrap: break-word;
}

.console-timestamp {
    color: #ffa500;
    margin-right: 8px;
}

.console-message {
    color: #00ff00;
}

.console-prompt {
    color: #00ff00;
    margin-right: 4px;
    font-weight: bold;
}

.terminal-cursor {
    display: inline-block;
    width: 10px;
    height: 16px;
    background-color: #00ff00;
    animation: blink-cursor 1s step-end infinite;
    margin-left: 2px;
    vertical-align: text-bottom;
}

@keyframes blink-cursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.blink-slow {
    animation: blink-slow 1.5s ease-in-out infinite;
}

@keyframes blink-slow {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

/* Google theme: keep header search button on the right. */
.template-google #app.app-with-top-menu #header.app-header {
  z-index: 1010 !important;
}

/* Google theme + top menu: client switcher dropdown must appear above top menu.
   Keep header below top-menu by default, but temporarily raise while dropdown is open
   (avoids the menu getting stuck/floating after scroll). */
.template-google #app.app-with-top-menu.client-switcher-open #header.app-header {
  z-index: 1020 !important;
}

.template-google #client-switcher-menu.dropdown-menu {
  z-index: 1030;
}

/* Client switcher dropdown: unify logo thumbnails (rounded square + crop). */
.template-google .img_logo_cliente {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* Client switcher (all themes): keep client logos constrained in the header + dropdown.
   Scoped to #header because #dropdown-menu-acciones is reused across the app. */
#header #client-switcher-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  cursor: pointer;
}

#header #client-switcher-toggle .img_logo_cliente {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

#header #client-switcher-toggle .img_logo_cliente > img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

#header #client-switcher-menu.dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

#header #client-switcher-menu.dropdown-menu .dropdown-item > img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  flex: 0 0 auto;
}

.template-google .img_logo_cliente > img {
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  display: block;
}

.template-google #client-switcher-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.template-google #client-switcher-menu .dropdown-item > img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  flex: 0 0 auto;
}

.template-google .app-header .navbar-form .btn-search {
  left: auto;
  right: 0;
  border-radius: 0;
  width: 48px;
}

.template-google .app-header .navbar-form .form-control {
  padding-left: 15px;
  padding-right: 55px;
}

@media (max-width: 767.98px) {
  .template-google .app-header .navbar-form .btn-search {
    width: 40px;
  }

  .template-google .app-header .navbar-form .form-control {
    padding-left: 15px;
    padding-right: 45px;
  }
}

/* Google theme: keep BootstrapTable search buttons on the right. */
.template-google .bootstrap-table .fixed-table-toolbar .search .input-group {
  display: flex;
  flex-direction: row;
  direction: ltr;
}

.template-google .bootstrap-table .fixed-table-toolbar .search .input-group > .form-control {
  order: 1;
}

.template-google .bootstrap-table .fixed-table-toolbar .search .input-group > .btn,
.template-google .bootstrap-table .fixed-table-toolbar .search .input-group > .input-group-append {
  order: 2;
}

.template-google .bootstrap-table .fixed-table-toolbar .search .input-group > .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.template-google .bootstrap-table .fixed-table-toolbar .search .input-group > .btn,
.template-google .bootstrap-table .fixed-table-toolbar .search .input-group > .input-group-append .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}