/* 1. Importar variables al principio */
@import url('./variables.css');
@import url('/css/cth-theme.css');
@import url('/css/header.css');
@import url('/css/cth-home.css');

/* 2. Reset básico */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 3. Tipografía y fondo */
body {font-family: var(--font-base); color: var(--color-text); background-color: #f5f5f5;}

.f_sbold{font-weight: 600 !important;}

/* 4. Inputs básicos */
input, button, select, textarea { font-family: inherit; font-size: 1rem; outline: none; line-height: inherit;} .pointer { cursor: pointer;}
.counter-small {font-size: 1.5rem; font-weight: bold; line-height: 1.2; text-align: center;}
.counter-medium {font-size: 3rem; font-weight: bold; line-height: 1.2; text-align: center;}

/*Colors*/

/*colores base*/
.col_primary {color: var(--color-primary);} .col_primary-dark{color: var(--color-primary-dark)} .col_primary-light {color: var(--color-primary-light);} .col_secondary{color:var(--color-secondary)}
/*colores neutro*/
.col_gray-900{color: var(--color-gray-900);} .col_gray-800{color: var(--color-gray-800);} .col_gray-700{color: var(--color-gray-700);} .col_gray-600{color: var(--color-gray-600);} .col_gray-500{color: var(--color-gray-500);} .col_gray-400{color: var(--color-gray-400);} .col_gray-300{color: var(--color-gray-300);} .col_gray-200{color: var(--color-gray-200);} .col_gray-100{color: var(--color-gray-100);} .col_white {color: var(--color-white);}


/*Background*/

/*colores base*/
.bg_primary { background-color: var(--color-primary);} .bg_primary-dark{background-color: var(--color-primary-dark)} .bg_primary-light {background-color: var(--color-primary-light);} .bg_secondary{background-color:var(--color-secondary)}
/*colores neutro*/
.bg_gray-900{background-color: var(--color-gray-900);} .bg_gray-800{background-color: var(--color-gray-800);} .bg_gray-700{background-color: var(--color-gray-700);} .bg_gray-600{background-color: var(--color-gray-600);} .bg_gray-500{background-color: var(--color-gray-500);} .bg_gray-400{background-color: var(--color-gray-400);} .bg_gray-300{background-color: var(--color-gray-200);} .bg_gray-200{background-color: var(--color-gray-200);} .bg_gray-100{color: var();} .bg_white {color: var(--color-white);}

/*  Iconos*/
.i-xlarge.i-plain {--i-size: 4.5rem; --i-fontsize: 3rem;}
.i-plain {--i-size: 3rem; --i-fontsize: 1.625rem;}
.i-plain {width: var(--i-size) !important; height: var(--i-size) !important; line-height: var(--i-size) !important;}
.i-plain {--i-color: var(--color-white); text-align: center !important; font-size: var(--i-fontsize); color: var(--i-color); font-style: normal; transition: all 0.3s ease;}

/*Buttons*/
.txt_btn_medium { font-size: 16px;}
:is(.btn_red_medium,.btn_black_medium,.btn_bicolor_medium) {padding: 7px 15px; gap: 10px;}

button {text-rendering: auto; letter-spacing: normal; word-spacing: normal; text-indent: 0px; text-shadow: none; display: inline-block; text-align: center; padding-block: 1px; padding-inline: 6px; background-color: var(--color-primary); color: var(--white);}

:is(.btn_red_small,.btn_red_medium,.btn_red_large,.btn_bicolor_small,.btn_bicolor_medium,.btn_bicolor_large) {background: var(--color-primary); color: var(--color-gray-600); border-radius: 3px; border-bottom: 4px solid var(--color-gray-600); justify-content: center; align-items: center; font-family: 'Poppins'; cursor: pointer;}
:is(.btn_black_small,.btn_black_medium,.btn_black_large) {background: var(--color-gray-800); color: var(--color-white); border-radius: 3px; border-bottom: 4px solid var(--color-text); display: initial; justify-content: center; align-items: center; font-family: 'Poppins'; cursor: pointer;}
:is(.btn_red_medium,.btn_black_medium,.btn_bicolor_medium) { padding: 7px 15px; gap: 10px;}

button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) {cursor: pointer;}
.btn-lg {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1.25rem;
    --bs-btn-border-radius: 0 !important;
    border-bottom: 4px solid var(--color-text) !important;
    background-color: var(--color-gray-800);
    font-size: 16px;
}

/*Counter summary*/
.br-header{ background-color: var(--color-primary); color: var(--white) !important; padding: 1rem;}

/* labels */
.label-chart_rouned {background-color: var(--color-primary); color: #fff; border-radius: 20px !important; font-size: 20px !important; padding: 5px 0 5px 0;}
.title_top{background-color: var(--color-primary); color: var(--color-white) !important; text-transform: uppercase;}
/* 5. Enlaces */
a { text-decoration: none; color: inherit; }

/* 6. Utilidades mínimas */
.text-center { text-align: center; }
.text-mys {text-transform: uppercase;}
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.my-3 {margin-left: 3px; margin-right: 3px;}
.mr-50 {margin-right: 50px;}
.pr-3 {padding-right: 3px;}
.pl-2 {padding-left: 2px;}
.py-3 {padding-left: 3px; padding-right: 3px;}
.mb-0 {margin-bottom: 0;}
.w-300 {min-width: 300px !important;}
.mx-auto {position: relative !important; float: none !important; margin-right: auto !important; margin-left: auto !important;}
html { scroll-behavior: smooth; }
.border-0 {border: 0 !important;}
.border-5{border-radius: 5px;}
.pt-2 {padding-top: 0.5rem !important;}
.pr-1 {padding-right: 1em !important;}

/* =======================================================
   Utilidad compartida: Contenedor de página
   ======================================================= */
.page-container{max-width: var(--page-container-max-width) !important; width: calc(100% - (var(--page-container-x-margin) * 2)); margin-left: var(--page-container-x-margin); margin-right: var(--page-container-x-margin);}

/* =======================================================
   SUBHEADER / INFO BAR (debajo del header)
   ======================================================= */
.app-topbar{ background: var(--topbar-bg); color: var(--topbar-text); box-shadow: 0 6px 14px rgba(0,0,0,.08); position: relative; z-index: 5;}
.app-topbar .app-topbar__inner{ display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; padding-left: calc(var(--bs-gutter-x, 1.5rem) / 2); padding-right: calc(var(--bs-gutter-x, 1.5rem) / 2);}
.app-topbar__left, .app-topbar__right{ display: inline-flex; align-items: center; gap: 8px; font-size: var(--topbar-font-size, .95rem); font-weight: var(--topbar-font-weight, 400); color: var(--topbar-text); min-width: 0;}
.app-topbar__welcome, .app-topbar__login, .app-topbar__project{ display: inline-block; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.app-topbar__sep{ opacity: var(--topbar-sep-opacity, .45); margin: 0 4px; }
.app-topbar__avatar{ width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.12); box-shadow: 0 1px 2px rgba(0,0,0,.18); flex: 0 0 auto;}
.app-topbar__left{ max-width: 68vw; }
.app-topbar__right{ max-width: 32vw; justify-content: flex-end; }
.app-topbar__project{ max-width: calc(100% - 44px); }

@media (max-width: 768px){
  .app-topbar .app-topbar__inner{grid-template-columns: 1fr; row-gap: 6px; justify-items: center; text-align: center;}
  .app-topbar__left, .app-topbar__right{justify-content: center; font-size: var(--topbar-font-size-sm, .85rem); max-width: 100%;}
  .app-topbar__project{ max-width: 82vw; }
  .app-topbar__avatar{ width: 32px; height: 32px; }
}
@media (max-width: 360px){
  .app-topbar__left, .app-topbar__right{ font-size: var(--topbar-font-size-xs, .8rem); }
}

/* =======================================================
   🔹 PAGE TOOLBAR (bajo el topbar)
   ======================================================= */
.page-toolbar{background: var(--toolbar-bg, var(--color-gray-300)); color: var(--toolbar-text, var(--color-primary)); box-shadow: inset 0 -1px 0 rgba(255,255,255,.25), 0 6px 14px rgba(0,0,0,.08);}

.page-toolbar__inner{display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--toolbar-y-pad) 0; padding-left: calc(var(--bs-gutter-x, 1.5rem) / 2); padding-right: calc(var(--bs-gutter-x, 1.5rem) / 2); min-height: var(--toolbar-min-h);}

/* Izquierda */
.page-toolbar__left{display: inline-flex; align-items: center; gap: 12px; min-width: 0;}
.page-toolbar__left > i{font-size: clamp(1.9rem, 2.2vw + 1rem, 2.8rem); line-height: 1; color: var(--toolbar-text, var(--color-primary));}
.page-toolbar__title{font-size: clamp(1.6rem, 1.4vw + 1rem, 2.2rem); font-weight: 700; letter-spacing: .2px; color: var(--toolbar-text, var(--color-primary)); max-width: 48vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/* Acciones */
.page-toolbar__actions{display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;}

/* Botón */
.action-card{
  --_bg: var(--toolbar-card-bg, var(--toolbar-bg)); 
  --_fg: var(--toolbar-card-fg, var(--toolbar-text));
  --_bd: var(--toolbar-card-bd, rgba(0,0,0,.08));
  background: var(--_bg); color: var(--_fg); width: clamp(92px, 12vw, 120px); height: var(--toolbar-card-h); border-radius: 14px; border: 1px solid var(--_bd); 
  display: grid; grid-template-rows: auto 2.6em; justify-items: center; align-items: center; gap: 6px; text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,.06); 
  position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease;}

.action-card i{font-size: 1.55rem; line-height: 1; opacity: .9; align-self: end;}
.action-card span{font-size: .88rem; font-weight: 600; opacity: .95; line-height: 1.2; max-width: 95%; max-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; align-self: center;}
.action-card::before{content: ""; position: absolute; inset: -45% -70% auto -70%; height: 140%; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%); transform: translateY(30%); transition: transform .35s ease;}
.action-card:hover{transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.10); border-color: rgba(0,0,0,.12); filter: brightness(1.02) saturate(1.02);}
.action-card:hover::before{ transform: translateY(0%); }

.action-card--primary,
.action-card--accent,
.action-card--neutral{
  --_bg: var(--toolbar-card-bg, var(--toolbar-bg));
  --_fg: var(--toolbar-card-fg, var(--toolbar-text));
}

@media (max-width: 992px){
  .page-toolbar__title{ font-size: clamp(1.4rem, 1vw + 1rem, 1.8rem); }
}
@media (max-width: 768px){
  .page-toolbar__inner{
    flex-direction: column; align-items: stretch; gap: 12px;
  }
  .page-toolbar__left{ justify-content: center; }
  .page-toolbar__actions{ justify-content: center; }
}
@media (max-width: 380px){
  .action-card{ width: clamp(92px, 31vw, 120px); }
}

/* ====== Modo sin botones ====== */
.page-toolbar--no-actions .page-toolbar__actions{display: none !important;}

/* =======================================================
   Separador vertical automático entre icono y título
   ======================================================= */

.page-toolbar__left{ gap: 0; } .page-toolbar__left > i + .page-toolbar__title{position: relative;}
.page-toolbar__left > i + .page-toolbar__title::before{content: var(--title-sep-char, "⋮"); display: inline-block; margin-left: var(--title-sep-gap, 16px); margin-right: var(--title-sep-gap, 16px); font-size: var(--title-sep-size, 1.3em); color: var(--title-sep-color, currentColor); opacity: var(--title-sep-opacity, .95); line-height: 1; transform: translateY(var(--title-sep-translate-y, 0));}

/* =========================
   Tabs con icono arriba + texto
   ========================= */
:root{
  /* controla dimensiones y radio globalmente */
  --tab-w: clamp(120px, 14vw, 150px);
  --tab-h: clamp(80px, 10vw, 96px);
  --tab-radius: 14px;
}

.cth-icon-tabs{border-bottom: 1px solid var(--color-gray-300); gap: clamp(14px, 6vw, 36px);}

/* TABS del mismo tamaño */
.cth-icon-tabs .nav-link{
  border: 0; background: transparent; color: var(--color-primary);
  opacity: .9; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: var(--tab-w); height: var(--tab-h); border-radius: var(--tab-radius) var(--tab-radius) 0 0;
  transform: none; transition: background-color .2s ease, color .2s ease, filter .2s ease, opacity .2s ease;}

/* Icono y texto heredan el color */
.cth-icon-tabs .nav-link i{font-size: 1.8rem; line-height: 1; color: currentColor;}
.cth-icon-tabs .nav-link span{font-size: .95rem; color: currentColor;}
.cth-icon-tabs .nav-link::after{ content:none !important; }

/* Hover en NO activo: fondo azul y texto/icono blancos */
.cth-icon-tabs .nav-link:not(.active):hover, .cth-icon-tabs .nav-link:not(.active):focus{background: var(--color-primary); color: var(--color-white); opacity: 1;}

/* Activo permanente: azul + blanco, mismo tamaño y radio */
.cth-icon-tabs .nav-link.active{background: var(--color-primary); color: var(--color-white); opacity: 1; border-radius: var(--tab-radius) var(--tab-radius) 0 0; margin-bottom: -1px;}
.cth-icon-tabs .nav-link.active:hover, .cth-icon-tabs .nav-link.active:focus{background: var(--color-primary); color: var(--color-white);}

/* =======================================================
   Appliance — Status Cards
   ======================================================= */
:root{
  --status-radius: 12px;
  --status-head-h: 38px;     /* alto encabezado */
  --status-foot-h: 42px;     /* alto pie */
}

.status-card{display: flex; flex-direction: column; height: 100%; border-radius: var(--status-radius); background: var(--color-white); box-shadow: 0 8px 24px rgba(0,0,0,.08); overflow: hidden; border: 1px solid rgba(0,0,0,.06);}

/* Header: fondo primario + 3 puntitos centrados */
.status-card__head{height: var(--status-head-h); background: var(--color-primary); display: grid; place-items: center; color: var(--color-white);}
.status-card__dots{font-size: .9rem; letter-spacing: 6px; line-height: 1;}

/* Body: gris claro + imagen centrada */
.status-card__body{ flex: 1; background: var(--color-gray-400); display: grid; place-items: center; padding: 18px; min-height: 160px;}
.status-card__body img{max-width: 80%; max-height: 110px; object-fit: contain;}

/* Footer: gris oscuro + label + luz */
.status-card__foot{height: var(--status-foot-h); background: var(--color-gray-800); color: var(--color-white); display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 12px;}
.status-card__label{font-weight: 600;}

/* Luz de estado (animada) */
.status-light{ width: 18px; height: 18px; border-radius: 50%; display: inline-block; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 0 0 0 rgba(0,0,0,0);}

/* Verde parpadeante */
@keyframes pulseGreen{0%   { box-shadow: 0 0 0 0 rgba(67, 209, 93, .6); } 70%  { box-shadow: 0 0 0 8px rgba(67, 209, 93, 0); } 100% { box-shadow: 0 0 0 0 rgba(67, 209, 93, 0); }}
.greenlight{background: var(--green-500, #3CB371); animation: pulseGreen 2.4s ease-in-out infinite;}

/* Rojo parpadeante */
@keyframes pulseRed{ 0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, .6); } 70%  { box-shadow: 0 0 0 8px rgba(220, 53, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }}
.redlight{background: var(--cherry-500, #FF4D6E); animation: pulseRed 2.4s ease-in-out infinite;}

/* Responsivo (cols de Bootstrap 12/6/3) */
@media (max-width: 576px){
  .status-card__body{ min-height: 140px; }
}

/* ============================
   DateRangePicker (global)
   ============================ */

.cth-daterange-input{ min-height: 48px; font-family: var(--font-base); transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.daterangepicker{ z-index: 999999 !important; font-family: var(--font-base); }
/* Colores con variables del tema */
.daterangepicker td.active, .daterangepicker td.active:hover{ background-color: var(--color-primary); color: var(--color-white); }
.daterangepicker td.in-range{ background-color: rgba(21,37,66,.08); /* var(--color-primary) con alpha */ }
.daterangepicker .ranges li.active{ background-color: var(--color-primary); color: var(--color-white); }
.daterangepicker .calendar-time select{ color: var(--color-primary); }
/* Botones del footer del picker */
.daterangepicker .drp-buttons .btn.applyBtn{ background: var(--color-primary); color: var(--color-white); border: 0; }
.daterangepicker .drp-buttons .btn.cancelBtn{ background: var(--color-gray-600); color: var(--color-white); border: 0; margin-right: .5rem; }

#tab-monitoring,
#applianceTabsContent {
  overflow: visible !important;
}

/* Algunos layouts con transform/filters crean nuevos stacking contexts.
   Esto ayuda a que el popup no quede "detrás" visualmente. */
.page-toolbar,
.cth-topbar,
header,
.navbar {
  transform: none !important;
  filter: none !important;
}

/* ================================
   Hover/focus para rango de fechas
   ================================ */
.cth-daterange-input:hover{ border-color: var(--color-primary); background-color: var(--color-gray-100); box-shadow: 0 0 0 .2rem rgba(21,37,66,.10); /* brillo sutil */ }
.cth-daterange-input:focus{ border-color: var(--color-primary); box-shadow: 0 0 0 .25rem rgba(21,37,66,.20); }
.cth-daterange-input:focus-visible{ border-color: var(--color-primary); box-shadow: 0 0 0 .28rem rgba(21,37,66,.22); }

/* Grupo input + botón (SEARCH) */
.input-group.cth-daterange:hover .cth-daterange-input,
.input-group.cth-daterange:focus-within .cth-daterange-input{ border-color: var(--color-primary); box-shadow: 0 0 0 .25rem rgba(21,37,66,.20); }
.input-group.cth-daterange:hover .btn,
.input-group.cth-daterange:focus-within .btn{ background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.input-group.cth-daterange .btn:focus-visible{ outline: 0; box-shadow: 0 0 0 .28rem rgba(21,37,66,.22); }


/* Charts */
.chart-container {position: relative; height: 500px;overflow: hidden;margin: 0; padding: 0;}
.chart-basicbar {position: relative; height: 400px; overflow: hidden; margin: 0; padding: 0;  width: 100%;}
#globalAttacks {
  width: 100%;
  height: 400px;   /* Puedes ajustar la altura */
}


/*mapa*/
.fa-marker {
    color: red;
    font-size: 24px;
    text-shadow: 1px 1px 2px white;
}

/* =========================
   DataTables (tema CTH)
   ========================= */
table.cth-dt{width: 100% !important; border-collapse: collapse; border-spacing: 0;}

/* Encabezado y pie */
table.cth-dt thead th {background: var(--color-primary); color: var(--color-white); border-color: rgba(255,255,255,.15); vertical-align: middle;}
table.cth-dt tfoot th {background: var(--color-gray-200); color: var(--color-primary); border-color: var(--color-gray-300);}

/* Bordes y estados de filas */
table.cth-dt td, table.cth-dt th {border-color: var(--color-gray-300);}
table.cth-dt tbody tr:hover {background: var(--color-gray-200);}

/* Controles superiores (Show / Search) */
.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter {padding: .25rem 0;}
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input {height: 38px; padding: .375rem .75rem; border: 1px solid var(--color-gray-400); border-radius: .5rem; font-family: var(--font-base);}
.dataTables_wrapper .dataTables_filter input::placeholder {color: var(--color-gray-600);}
.dataTables_wrapper .dataTables_filter input:focus,.dataTables_wrapper .dataTables_length select:focus {box-shadow: 0 0 0 .2rem rgba(21,37,66,.15); border-color: var(--color-primary);}

/* Paginación */
.dataTables_wrapper .dataTables_paginate {margin-top: .75rem;}
.dataTables_wrapper .dataTables_paginate .paginate_button {color: var(--color-primary) !important; background: transparent; border: 1px solid transparent; border-radius: .375rem; padding: .35rem .65rem; margin: 0 .125rem; transition: background-color .15s ease, border-color .15s ease;}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {background: rgba(21,37,66,.08); border-color: rgba(21,37,66,.15); color: var(--color-primary) !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {background: var(--color-primary); color: var(--color-white) !important; border: 0;}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {color: var(--color-gray-600) !important; background: transparent !important; border: 0;}

/* Texto informativo */
.dataTables_wrapper .dataTables_info {color: var(--color-gray-700); padding-top: .5rem;}

/* Soporte Responsive */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  background-color: var(--color-primary); box-shadow: none; border: 0;}
table.dataTable > tbody > tr.child ul.dtr-details > li {border-bottom: 1px dashed var(--color-gray-300);}
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {border-bottom: 0;}

/* Scroll horizontal (fallback) */
.dataTables_wrapper .dataTables_scrollHead { border-bottom: 1px solid var(--color-gray-300);}

/* Responsive: que los controles superiores se apilen bien */
@media (max-width: 576px) {
  .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {float: none !important; text-align: left; width: 100%;}
  .dataTables_wrapper .dataTables_filter {margin-top: .5rem;}
  .dataTables_wrapper .dataTables_filter input {width: 100%}
  .dataTables_wrapper .dataTables_paginate {margin-top: .5rem;}
}

/* Fuerza ancho mínimo para que aparezca scroll horizontal si hace falta */
#appliance-dt { min-width: 1200px; }

/* Habilita scroll táctil en móvil dentro del wrapper de DataTables */
.dataTables_wrapper .dataTables_scroll, .dataTables_wrapper .dataTables_scrollBody {overflow-x: auto !important; -webkit-overflow-scrolling: touch; touch-action: pan-x;}

#appliance-dt_wrapper { margin-top: 1rem; }

/* En móvil, centrar length + search + info + paginación */
@media (max-width: 576px) {
  .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {float: none !important; text-align: center !important; width: 100% !important;}
  .dataTables_wrapper .dataTables_filter input {width: 100% !important; max-width: 320px; margin: .5rem auto 0; display: block;}
  .dataTables_wrapper .dataTables_length select {margin: 0 auto;}
}

/* contenedor con scroll horizontal NÁTIVO */
.cth-dt-scroll{overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x;}

/* min-width de la tabla */
#appliance-dt { min-width: 1200px; }
#appliance-dt_wrapper { margin-top: 1rem; }

/* centrar length, search, info y paginación en móvil */
@media (max-width: 576px){
  .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate{float: none !important; text-align: center !important; width: 100% !important;}
  .dataTables_wrapper .dataTables_filter input{width: 100% !important; max-width: 320px; margin: .5rem auto 0; display: block;}
  .dataTables_wrapper .dataTables_length select{margin: 0 auto;}
}

/* =====Data sources =====*/
.contds {background-color: #F2F2F2;border: 1px solid var(--secondary-800);padding: 10px;gap: 0px; width: 100%; display: flex;flex-wrap: wrap;}
.imgsrc {width: 200px !important;}
.imgsrc-100 {width: 100px !important;}
.chds1 {flex-basis: 200px;text-align: center; align-content: center;}
.chids {flex-grow: 1;}
.labelcred {background-color: var(--color-primary);border-radius: 0 20px 20px 0;color: var(--color-white);font-size: 20px;border-bottom: 4px solid var(--color-primary-dark); padding: 0 10px; min-width: 260px;}
.txtsecds {font-size: 22px;letter-spacing: 1px;font-weight: 700;}
.txtsecmin {font-size: 10px;letter-spacing: 1px;font-weight: bold;text-transform: uppercase;}
.txtds {font-size: 16px;line-height: 18px;text-align: justify;max-width: 1130px;min-width: 360px;width: auto;padding-top: 11px;text-align: justify;}
.lbhde {overflow: hidden;}
.lbldvs {display: flex;justify-content: space-between;align-items: flex-end;height: 50px;}
.lblgry {background-color: var(--main-gray-medium);color: var(--color-white); font-size: 13px; text-transform: uppercase;line-height: 14px;padding: 3px 10px;border-radius: 15px; text-wrap: balance;}
.justAlign{justify-self: center;}

/* --- Data sources Ajustes responsivos --- */

/* Tablets medianas o más pequeñas */
@media (max-width: 992px) {
  .contds {flex-direction: column; align-items: center;}.chds1 {flex-basis: auto;margin-bottom: 1rem;}.imgsrc {width: 150px !important;}.txtds {max-width: 100%;min-width: auto;font-size: 14px;line-height: 18px;text-align: left;text-align: justify;}.lbldvs {flex-wrap: wrap;gap: 5px;height: auto;justify-content: center;} .lblgry {font-size: 11px;padding: 2px 8px;}
}

/* Móviles pequeños */
@media (max-width: 576px) {.imgsrc {width: 120px !important;}.labelcred {font-size: 16px;min-width: auto;border-radius: 10px;text-align: center;display: block;}.txtsecds {font-size: 18px;}.txtsecmin {font-size: 9px;}.txtds {font-size: 13px;line-height: 16px;} .lblgry {font-size: 10px;padding: 2px 6px;}
}



/* ==============================
   Assets Dashboard — Cards/Charts
   ============================== */
.assets-dashboard .cth-card{
  background:#fff;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:1.25rem;
}

.cth-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.5rem;
}

.cth-card__title{ font-weight:700; color:var(--color-primary); }

/* Charts — wrapper + canvas */
.cth-chart{ position:relative; width:100%; }
.cth-chart__canvas{ width:100%; height:var(--chart-h,380px); }

/* Base heights */
@media (max-width:576px){ .cth-chart__canvas{ --chart-h:320px; } }
@media (min-width:768px){ .cth-chart__canvas{ --chart-h:420px; } }
@media (min-width:1200px){ .cth-chart__canvas{ --chart-h:520px; } }
@media (min-width:1400px){ .cth-chart__canvas{ --chart-h:560px; } }

/* Pyramid width cap on large screens */
.cth-chart--pyramid{ width:100%; margin-left:auto; margin-right:auto; }
@media (min-width:1200px){ .cth-chart--pyramid{ max-width:1100px; } }
@media (min-width:1400px){ .cth-chart--pyramid{ max-width:1200px; } }

/* Pyramid height tweaks */
.cth-chart--pyramid .cth-chart__canvas{ --chart-h:320px; }
@media (min-width:768px){ .cth-chart--pyramid .cth-chart__canvas{ --chart-h:420px; } }
@media (min-width:1200px){ .cth-chart--pyramid .cth-chart__canvas{ --chart-h:520px; } }
@media (min-width:1400px){ .cth-chart--pyramid .cth-chart__canvas{ --chart-h:560px; } }

/* Reusable chart headers */
.cth-chart-header{ display:flex; flex-direction:column; align-items:center; gap:.5rem; margin-bottom:.75rem; }
.cth-chart-subtitle{ font-weight:600; color:var(--color-text); opacity:.8; }
.cth-chart-title-badge{
  background:var(--color-primary);
  color:var(--color-white);
  padding:.5rem 1rem;
  border-radius:999px;
  font-weight:700;
  box-shadow:0 8px 16px rgba(0,0,0,.08);
}

/* Donut heights */
.cth-chart--donut .cth-chart__canvas{ --chart-h:300px; }
@media (max-width:576px){ .cth-chart--donut .cth-chart__canvas{ --chart-h:320px; } }
@media (min-width:992px){ .cth-chart--donut .cth-chart__canvas{ --chart-h:360px; } }

/* Cards with charts */
.cth-card--chart{ padding-bottom:1rem; }

/* Layout helpers */
.assets-dashboard{ width:100%; }
@media (max-width:576px){ .assets-dashboard .cth-card{ padding:1rem; } }

/* DataTable min-width (scroll when needed) */
#assets-dt{ min-width:1200px; }

.btn-cth-action{ background: var(--color-primary); color: var(--color-white); border:0; box-shadow:0 6px 14px rgba(0,0,0,.12); }
.btn-cth-action:hover,.btn-cth-action:focus{ background: var(--color-gray-600); color: var(--color-white); border:0; }
.btn-cth-danger{ background:#dc3545; color:var(--color-white); border:0; }
.btn-cth-danger:hover,.btn-cth-danger:focus{ background: var(--color-gray-600); color:var(--color-white); border:0; }
table#users-dt td:first-child img{ border-radius:50% !important; }

/* ==== Fix avatar aspect ratio ==== */
#users-dt td img, #avatarPreview { width: 96px !important; height: 96px !important; border-radius: 50% !important; object-fit: cover; object-position: center;}
#users-dt td img {width: 40px !important;height: 40px !important;}

/* === Modal header: texto blanco === */
#userModal .modal-header .modal-title, #userModal .modal-header .modal-title span, #userModal .modal-header .modal-title i {color: var(--color-white) !important;}

/* === Confirm Modal header: texto blanco === */
#confirmModal .modal-header .modal-title, #confirmModal .modal-header .modal-title span, #confirmModal .modal-header .modal-title i {color: var(--color-white) !important;}

/* === Coming Soon === */
.coming-soon-block{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 3rem 1rem; text-align: center;}
.coming-icon{font-size: 5rem; color: var(--color-primary); animation: pulseRotate 2.5s linear infinite;}
.coming-text{font-size: 2.2rem; font-weight: 700; color: var(--color-primary); letter-spacing: 2px;}
@keyframes pulseRotate {0% { transform: scale(1) rotate(0deg); opacity: 1;} 25%  {transform: scale(1.1) rotate(90deg); opacity: .9;} 50%  {transform: scale(1) rotate(180deg); opacity: 1;} 75%  { transform: scale(1.1) rotate(270deg); opacity: .9;} 100% { transform: scale(1) rotate(360deg); opacity: 1; }}

.chargraph{border: 1px solid var(--color-gray-500);}