/* Variables de color base inspiradas en Delcomp */
:root {
    --delcomp-dark-blue: #0D1B2A;
    --delcomp-card-bg: #1B263B;
    --delcomp-yellow: #8C734B;
    --delcomp-yellow-hover: #8C734B;
    --delcomp-light-text: #f8f9fa;
    --delcomp-muted-text: #adb5bd;
    --delcomp-border: #495057;
    --delcomp-navbar-bg: #0D1B2A; /* Coincide con dark-blue para navbar */
    --delcomp-main-bg: #0D1B2A;   /* Coincide con card-bg para fondo principal */
}

body {
    padding-top: 70px; /* Ajuste para la navbar fixed-top */
    padding-bottom: 40px;
    background-color: var(--delcomp-main-bg); /* Usar la variable principal de fondo */
    color: var(--delcomp-light-text);
    min-height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.form-container {
    max-width: 500px;
    padding: 30px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--delcomp-card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    border: 1px solid var(--delcomp-border);
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--delcomp-border);
}

.logo-container img {
    max-width: 150px;
    height: auto;
    display: block;
}

/* Ajustes Pestañas (Login/Register) */
.nav-tabs {
     border-bottom: none;
     margin-bottom: 0;
}
.nav-tabs .nav-link {
    color: var(--delcomp-muted-text);
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}
.nav-tabs .nav-link.active {
    color: var(--delcomp-yellow);
    background-color: transparent;
    border-color: transparent transparent var(--delcomp-yellow) transparent;
    border-width: 2px;
    font-weight: 500;
    font-size: 0.85rem;
}
 .nav-tabs .nav-link:hover {
     color: var(--delcomp-light-text);
     border-color: transparent;
 }

/* Formularios */
label { color: var(--delcomp-muted-text); font-size: 0.9rem; margin-bottom: 0.3rem; }
.form-control {
     background-color: rgba(255, 255, 255, 0.05);
     border: 1px solid var(--delcomp-border);
     color: var(--delcomp-light-text) !important;
 }
 .form-control:focus {
      background-color: rgba(255, 255, 255, 0.1);
      border-color: var(--delcomp-yellow);
      box-shadow: 0 0 0 0.25rem rgba(173, 152, 65, 0.25);
      color: var(--delcomp-light-text);
 }
 .form-control::placeholder { /* Agregado: Placeholder */
     color: rgba(255, 255, 255, 0.5);
 }
 .form-control:disabled {
      background-color: rgba(255, 255, 255, 0.05) !important;
      color: var(--delcomp-light-text) !important;
      opacity: 1;
      -webkit-text-fill-color: var(--delcomp-light-text);
      border: 1px solid var(--delcomp-border) !important;
 }
 .form-text { color: var(--delcomp-muted-text); font-size: 0.8rem; }


/* Anular Estilos de Autocompletar del Navegador */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--delcomp-light-text) !important;
    color: var(--delcomp-light-text) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--delcomp-card-bg) inset !important;
    box-shadow: 0 0 0px 1000px var(--delcomp-card-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
    border: 1px solid var(--delcomp-border) !important;
}
input:-internal-autofill-selected {
     background-color: var(--delcomp-card-bg) !important;
     color: var(--delcomp-light-text) !important;
}

/* Estilo Botón Azul Oscuro con Borde Amarillo */
.btn-custom-delcomp {
    background-color: var(--delcomp-card-bg);
    border: 1px solid var(--delcomp-yellow);
    color: var(--delcomp-yellow);
    font-weight: 500;
    padding: 0.6rem 1.2rem;
    transition: all 0.2s ease-in-out;
    width: 100%;
    margin-top: 1rem;
}
.btn-custom-delcomp:hover,
.btn-custom-delcomp:focus {
    background-color: #2a3b50;
    border-color: var(--delcomp-yellow-hover);
    color: var(--delcomp-yellow-hover);
    box-shadow: 0 0 0 0.25rem rgba(173, 152, 65, 0.3);
}

/* Fieldset */
fieldset { border-color: var(--delcomp-border) !important; }
legend { color: var(--delcomp-muted-text); font-size: 0.95rem; }

/* Enlaces */
a { color: var(--delcomp-yellow); text-decoration: none; }
a:hover { color: var(--delcomp-yellow-hover); text-decoration: underline; }

/* Estilos navbar (adaptados del dashboard.css) */
.navbar.navbar-custom-theme {
    background-color: var(--delcomp-navbar-bg) !important;
    border-bottom: 1px solid var(--delcomp-border);
}
.navbar.navbar-custom-theme .navbar-brand,
.navbar.navbar-custom-theme .navbar-text {
    color: var(--delcomp-light-text);
}
.navbar.navbar-custom-theme .navbar-brand.dashboard-title {
    font-weight: 500;
}
.navbar.navbar-custom-theme .nav-link,
.navbar.navbar-custom-theme .btn-outline-info,
.navbar.navbar-custom-theme .btn-outline-light {
    color: var(--delcomp-muted-text);
    border-color: var(--delcomp-muted-text);
}
.navbar.navbar-custom-theme .nav-link:hover,
.navbar.navbar-custom-theme .btn-outline-info:hover,
.navbar.navbar-custom-theme .btn-outline-light:hover {
    color: var(--delcomp-dorado);
    border-color: var(--delcomp-dorado);
    background-color: rgba(173, 152, 65, 0.1);
}
.navbar.navbar-custom-theme .btn-outline-info,
.navbar.navbar-custom-theme .btn-outline-light {
    border-width: 1px;
}
.navbar-brand img.navbar-logo {
    max-height: 45px;
    width: auto;
    margin-right: 10px;
    margin-left: 20px;
}

/* Estilos del Dashboard (adaptados de dashboard.css y dark-theme.css) */
.main-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 20px 15px;
}

#no-data-placeholder {
    text-align: center;
    margin-top: 30px;
    color: #ccc;
}

.device-card-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.device-card-container {
    max-width: 1140px;
    margin: 0 auto;
}

.device-card {
    width: 100%;
    margin-bottom: 30px;
}

.log-container {
    max-width: 1140px;
    margin: 0 auto;
}

.gauge-size-control {
    max-width: 180px;
    height: 90px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.gauge-size-control canvas {
    max-width: 100%;
    max-height: 100%;
}

.gauge-wrapper.gauge-size-control {
    max-width: 180px;
    height: 90px;
    margin-left: auto;
    margin-right: auto;
}

.gauge-value-overlay {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.1em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    color: var(--delcomp-light-text);
    transition: color 0.3s ease;
}
.gauge-value-overlay.text-muted {
     color: var(--delcomp-muted-text) !important;
}
.gauge-value-overlay.text-dorado {
     color: var(--delcomp-dorado) !important;
}

#dashboard-area .device-card .card.bg-dark.border-secondary {
    background-color: var(--delcomp-navbar-bg);
    border-color: var(--delcomp-border);
}
#dashboard-area .device-card .card.bg-dark .card-header {
    background-color: var(--delcomp-navbar-bg);
    border-bottom-color: var(--delcomp-border);
}
#dashboard-area .device-card .card.bg-dark {
    background-color: var(--delcomp-navbar-bg) !important;
    border-color: var(--delcomp-border);
}

.device-card .text-muted {
    color: var(--delcomp-muted-text) !important;
}

.status-icons span i.text-success {
    color: var(--delcomp-dorado) !important;
}
.status-icons span i.text-danger {
    color: #dc3545 !important;
}
.status-icons span i.text-warning,
.status-icons span i:not(.text-success):not(.text-danger) {
    color: var(--delcomp-muted-text) !important;
}

.chart-container {
    height: 250px;
    position: relative;
}

#logTable.table-dark {
    background-color: var(--delcomp-navbar-bg) !important;
    color: var(--delcomp-light-text);
    border-color: var(--delcomp-border);
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
#logTable.table-dark th,
#logTable.table-dark td {
    border-color: var(--delcomp-border);
}
#logTable.table-dark thead th {
    color: var(--delcomp-muted-text);
    background-color: rgba(27, 38, 59, 0.2);
    border-bottom: 2px solid var(--delcomp-border);
    text-align: left;
    padding: 0.75rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
}
#logTable.table-dark > tbody > tr:nth-of-type(even) > td {
    background-color: rgba(27, 38, 59, 0.15) !important;
}
#logTable.table-dark > tbody > tr:nth-of-type(odd) > td {
     background-color: transparent !important;
}
#logTable.table-dark > tbody > tr:hover > td {
    background-color: rgba(173, 152, 65, 0.1) !important;
    color: var(--delcomp-light-text) !important;
}
#logTable.table-dark tbody tr:hover {
     background-color: rgba(173, 152, 65, 0.1) !important;
     color: var(--delcomp-light-text) !important;
}
#logTable.table-dark > tbody > tr > td {
    background-color: transparent;
    border-color: var(--delcomp-border) !important;
    padding: 0.5rem 0.5rem;
    vertical-align: middle;
    font-size: 0.85rem;
}

.main-container {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.footer { /* Estilo para el footer en base.html */
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: var(--delcomp-navbar-bg); /* O un color específico para el footer */
    color: var(--delcomp-muted-text);
    text-align: center;
}


/* Estilos para el botón del actuador (si aplica en dashboard.html) */
.btn-dorado-theme {
    background-color: var(--delcomp-card-bg);
    border: 1px solid var(--delcomp-dorado);
    color: var(--delcomp-dorado);
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease-in-out;
}
.btn-dorado-theme:hover,
.btn-dorado-theme:focus {
    background-color: rgba(173, 152, 65, 0.1);
    border-color: var(--delcomp-dorado-hover);
    color: var(--delcomp-dorado-hover);
    box-shadow: 0 0 0 0.25rem rgba(173, 152, 65, 0.3);
}

/* Estilo para el contenedor de la tarjeta del actuador (opcional) */
.actuator-card {
     background-color: var(--delcomp-navbar-bg);
     border: 1px solid var(--delcomp-border);
}
.actuator-card h4.text-dorado {
    color: var(--delcomp-dorado) !important;
}

/* Estilo para la tabla de logs de comandos */
#commandLogTable {
    background-color: var(--delcomp-navbar-bg);
    border: 1px solid var(--delcomp-border);
    color: var(--delcomp-light-text);
    border-radius: 8px;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
#commandLogTable thead th {
    color: var(--delcomp-muted-text);
    background-color: rgba(27, 38, 59, 0.2);
    border-bottom: 2px solid var(--delcomp-border);
    text-align: left;
    padding: 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
}
#commandLogTable tbody td {
    border-top: 1px solid var(--delcomp-border);
    color: var(--delcomp-light-text);
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
    font-size: 0.85rem;
}
#commandLogTable tbody tr:nth-of-type(even) > td {
    background-color: rgba(27, 38, 59, 0.15);
}
#commandLogTable tbody tr:hover > td {
    background-color: rgba(173, 152, 65, 0.1);
}

/* --- Estilos para Sidebar Responsive (versión integrada) --- */
.layout-flex-body {
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Sidebar principal */

/* Cabecera del sidebar */
.sidebar-header {
    padding: 1rem;
    text-align: center;
}
.sidebar-header img {
    max-width: 100%;
    height: auto;
}

/* Cuerpo del sidebar */
.sidebar-body {
    padding: 1rem;
    overflow-y: auto;
    flex-grow: 1;
}

/* Pie del sidebar */
.sidebar-footer {
    padding: 1rem;
    text-align: center;
}

/* Área de contenido principal */
.content-area {
    flex-grow: 1;
    padding: 0.5rem;
    background-color: var(--delcomp-main-bg);
    color: var(--delcomp-light-text);
}

/* Estilo para ítems de dispositivos */
.device-item {
    background-color: var(--delcomp-main-bg);
    border: 1px solid var(--delcomp-border);
    border-radius: 5px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

/* Botón para colapsar el menú lateral */
.toggle-btn {
    position: absolute;
    left: 250px;
    top: 10px;
    z-index: 2000;
    background-color: var(--delcomp-yellow);
    border: none;
    padding: 4px 8px;
    font-size: 0.8rem;
    border-radius: 0 4px 4px 0;
}

/* Responsividad adicional para móviles */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        height: 100%;
        z-index: 1050;
    }

    .toggle-btn {
        left: 0;
        border-radius: 0 4px 4px 0;
    }

    .sidebar.collapsed + .content-area {
        margin-left: 0;
    }

    .content-area {
        padding: 1rem;
    }
}

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}


.content-area {
  margin-left: 250px;
  padding: 0.5rem;
  transition: margin-left 0.3s ease;
}


.footer {
  padding: 1rem;
  background-color: transparent;
  color: white;
}



/*nuevo */

/* === Sidebar fijo + colapso universal (desktop y mobile) === */

/* ancho “oficial” del sidebar */
:root{
  --sbw: 220px;           /* sidebar width */
  --seam-fix: -8px;        /* ajuste fino por el borde del sidebar */
  --toggle-v-offset: 0px; /* por si lo quieres subir/bajar un poco */
  --sb-gutter: 1rem; 
}

/* Sidebar a la izquierda, alto completo y con transición */
.sidebar{
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sbw);
  overflow-y: auto;
  z-index: 1000;
  background: var(--delcomp-main-bg);
  border-right: 1px solid rgba(255,255,255,.08);
  transition: transform .25s ease-in-out;
}

#sidebarToggle i,
#sidebarToggle svg {
  display: inline-block;
  transition: transform .2s ease;
  transform: rotate(90deg);             /* sidebar abierto */
}
.body--sidebar-collapsed #sidebarToggle i,
.body--sidebar-collapsed #sidebarToggle svg {
  transform: rotate(0deg);              /* sidebar cerrado */
}


/* Área principal desplazada por el ancho del sidebar */
.content-area{
  margin-left: var(--sbw) !important;
  transition: margin-left .25s ease-in-out;
}




/* márgenes del contenido según estado */
.content-area { margin-left: var(--sbw); transition: margin-left .25s ease; }
.body--sidebar-collapsed .content-area { margin-left: 0; }

/* botón siempre visible, pegado a la unión sidebar/contenido */
#sidebarToggle{
  position: fixed;
  left: calc(var(--sbw) + var(--seam-fix));   /* justo en el borde derecho del sidebar */
  top: calc(50vh + var(--toggle-v-offset));  /* centro vertical del viewport */
  transform: translate(-50%, -50%);          /* centra el botón sobre la línea */
  z-index: 2002;                             
}

/* cuando el sidebar está colapsado, el botón queda al borde izquierdo */
.body--sidebar-collapsed #sidebarToggle{
  left: 10px;                 /* visible al borde */
  transform: translate(0, -50%);
}

/* Ocultar el sidebar cuando se colapsa (en cualquier viewport) */
.sidebar.collapsed { 
  transform: translateX(-100%); 
}

/* Alternativa/soporte con la clase en <body> (tu JS ya la usa) */
.body--sidebar-collapsed .sidebar { 
  transform: translateX(-100%); 
}

/* Que el contenido aproveche todo el ancho cuando el sidebar está oculto */
.body--sidebar-collapsed .content-area { 
  margin-left: 0 !important; 
}

/* Sidebar como contenedor flex en columna */
.sidebar{
  display: flex;
  flex-direction: column;
  overflow: hidden;                 /* el scroll lo maneja el área de contenido */
}

/* La parte superior del sidebar ocupa el alto disponible y es scrollable */
.sidebar-content{
  flex: 1 1 auto;
  overflow-y: auto;
}

/* Empuja los botones al fondo */
.sidebar-footer{
  margin-top: auto;                 /* ¡pega al fondo! */
  padding: 0.75rem 0.75rem 0.9rem;
}

/* Copyright del sidebar: pequeño y en dorado DLCP */
.sidebar-copy{
  text-align: center;
  font-size: 0.75rem;
  color: var(--delcomp-yellow);
  opacity: .9;
  margin-top: .6rem;
}

/* Logo al 60% del ancho del contenedor, manteniendo proporción */
.sidebar-header .brand-logo{
  width: 50%;
  height: auto;
  display: block;
  margin: 6px auto 8px;
}

/* Subtítulo bajo el logo */
.sidebar-header .brand-subtitle{
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 800;           /* bien “gruesa” */
  font-size: 1.5rem;         /* ajusta a gusto */
  text-transform: uppercase;  /* opcional: mayúsculas */
  letter-spacing: 0.06em;     /* ligero tracking */
  text-align: center;
  color: var(--delcomp-yellow-hover); /* dorado del tema */
  margin-bottom: 10px;
}

/* Pequeños ajustes por tamaño de pantalla */
@media (min-width: 1440px){
  .sidebar-header .brand-logo{ width: 50%; }
  .sidebar-header .brand-subtitle{ font-size: 1.5rem; }
}
@media (max-width: 480px){
  .sidebar-header .brand-logo{ width: 70%; }
  .sidebar-header .brand-subtitle{ font-size: 1.5rem; }
}

/* --- Escala tipográfica global: 80% --- */
/* 16px * 0.8 = 12.8px aprox.  */
html { font-size: 90%; }

/* Asegura que el body hereda el nuevo base y no lo pisa en otro lado */
body { font-size: 1rem; }


/* Ya lo tienes, pero por claridad: */
.sidebar-header{ padding: var(--sb-gutter); }
.sidebar-footer{ padding: var(--sb-gutter); }

/* >>> NUEVO: alinea las tarjetas con el mismo padding que los botones <<< */
#device-card-container{
  padding: 0 var(--sb-gutter);  /* mismo margen lateral que header/footer */
}

/* Que cada card ocupe ancho completo dentro del gutter y tenga separación */
#device-card-container > .device-item,
#device-card-container > .device-box,
#device-card-container > .card,
#device-card-container > div{
  width: 100%;
  margin-bottom: .75rem;        /* separación vertical entre cards */
  box-sizing: border-box;
  border: 1px solid var(--delcomp-yellow) !important;
  box-shadow: none !important; /* evita el "doble" borde */
}

.btn.btn-warning{
  --bs-btn-bg: var(--delcomp-yellow);
  --bs-btn-border-color: var(--delcomp-yellow);
  --bs-btn-hover-bg: var(--delcomp-yellow-hover);
  --bs-btn-hover-border-color: var(--delcomp-yellow-hover);
  --bs-btn-color: #0d1b2a;              /* texto oscuro sobre dorado */
  --bs-btn-hover-color: #0d1b2a;
  --bs-btn-active-bg: var(--delcomp-yellow-hover);
  --bs-btn-active-border-color: var(--delcomp-yellow-hover);
}


/*ultimo para achicar pantalla*/
/* El contenedor define la altura del gráfico */
.rt-chart-box{
  position: relative;
  height: 250px;            /* ajústalo al gusto */
}
/* La caja que envuelve el canvas de la gráfica */
.rt-chart-box{
  padding: 0;           /* sin padding para que alinee perfecto con los bordes */
}


/* El canvas ocupa todo el contenedor y gana a los atributos inline */
.rt-chart-box > canvas{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* Opcional: altura algo menor en móviles */
@media (max-width: 576px){
  .rt-chart-box{ height: 210px; }
}


/*nuevo para pestañas*/

/* Header del detalle (scoped y simple) */
.devhdr{
  background: var(--delcomp-card-bg);
  border: 1px solid var(--delcomp-border);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.devhdr-left{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem; /* espacio entre elementos en línea */
}

.kv .k{
  display:block;
  font-size:.70rem;
  color: var(--delcomp-muted-text);
  letter-spacing:.04em;
  text-transform: uppercase;
}
.kv .v{
  display:block;
  font-weight:600;
  color: var(--delcomp-light-text);
}

/* Estado */
.status{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left: 4px;
}
.status-dot{
  width:10px;height:10px;border-radius:50%;
  background:#6c757d;
  box-shadow:0 0 0 2px rgba(0,0,0,.15) inset;
}
.status-dot.is-online{ background:#2ecc71; }
.status-dot.is-offline{ background:#e74c3c; }
.status-dot.is-warning{ background:#f39c12; }
.status-label{ font-weight:600; color:var(--delcomp-light-text); }

/* Tabs */
.devhdr-tabs{
  margin-left:auto;
  display:flex;
  gap:8px;
}
.devtab{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--delcomp-light-text);
  padding:8px 12px;
  border-radius: 10px;
  font-weight:600;
  font-size:.9rem;
  line-height:1;
}
.devtab:hover{ background: rgba(255,255,255,.12); }
.devtab.active{
  background: var(--delcomp-yellow);
  color: #111; /* contraste sobre dorado */
}

/* Responsive: En pantallas pequeñas, diseño compacto de 2 columnas */
@media (max-width: 768px){
  .devhdr{
    flex-direction: column;
    align-items:stretch;
    gap:12px;
    padding: 16px;
  }

  .devhdr-left{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    align-items: start;
  }

  .devhdr-tabs{
    margin-left:0;
    justify-content: flex-end;
  }
}


/* =========================================================
   1) Botones inferiores de la viñeta: mismo estilo + centrados
   ========================================================= */
.sidebar-footer .btn,
.sidebar-footer .sidebar-button {
  /* aspecto tipo “pill” igual que las tabs */
  border-color: transparent !important;
  background: rgba(255,255,255,.06);
  color: var(--delcomp-light-text);
  font-weight: 600;
  font-size: .9rem;
  line-height: 1;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: none;

  /* centrado real del icono + texto */
  display: flex;
  align-items: center;
  justify-content: center;   /* <— centra horizontalmente */
  gap: 8px;
  text-align: center;        /* por si hubiera spans internos */
  width: 100%;
}

.sidebar-footer .btn:hover,
.sidebar-footer .sidebar-button:hover {
  background: rgba(255,255,255,.12);
  color: var(--delcomp-light-text);
}

.sidebar-footer .btn:active,
.sidebar-footer .sidebar-button:active,
.sidebar-footer .btn.active,
.sidebar-footer .sidebar-button.active {
  background: var(--delcomp-light-text);
  color: #111;
  border-color: transparent;
}

/* =========================================================
   2) Tarjetas de dispositivos (con checkbox) con el mismo estilo
   ========================================================= */
/* Contenedor base de las cards del sidebar superior */
#device-card-container > .device-item,
#device-card-container > .device-box,
#device-card-container > .card,
#device-card-container > div {
  background: var(--delcomp-card-bg);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--delcomp-light-text);
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
  margin-bottom: 10px;       /* respiración entre tarjetas */
}

/* Hover coherente con las tabs/botones */
#device-card-container > .device-item:hover,
#device-card-container > .device-box:hover,
#device-card-container > .card:hover,
#device-card-container > div:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.20);
}

/* Cuando el checkbox de la tarjeta está marcado => estado “activo”
   (usa :has que ya soportan Chrome/Edge/Firefox modernos) */
#device-card-container > .device-item:has(input[type="checkbox"]:checked),
#device-card-container > .device-box:has(input[type="checkbox"]:checked),
#device-card-container > .card:has(input[type="checkbox"]:checked),
#device-card-container > div:has(input[type="checkbox"]:checked) {
  background: var(--delcomp-card-bg);
  color: var(--delcomp-light-text);
}

/* Acento del checkbox para que combine con el theme */
#device-card-container input[type="checkbox"] {
  accent-color: var(--delcomp-yellow);
}

/* Si el layout interno usa filas, evitamos que el contenido pegue a los bordes */
#device-card-container .row,
#device-card-container .device-row {
  margin-left: 0;
  margin-right: 0;
}


/* === Cards de dispositivos en la viñeta (mismo look que las tabs) === */
/* Contenedor directo de cada tarjeta en el sidebar */
#device-card-container > .device-item,
#device-card-container > .device-box,
#device-card-container > .card,
#device-card-container > div {
  /* MISMO fondo y borde que los botones/pestañas del área principal */
  background: rgba(255,255,255,.06) !important;   /* mismo fondo translúcido */
  border: 1px solid rgba(255,255,255,.12) !important;  /* mismo borde suave */
  border-radius: 12px;
  /* Menos aire vertical */
  padding: 6px 10px;            /* <= antes tenías 10px 12px, lo compactamos */
  color: var(--delcomp-light-text);
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

/* Hover coherente */
#device-card-container > .device-item:hover,
#device-card-container > .device-box:hover,
#device-card-container > .card:hover,
#device-card-container > div:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.20) !important;
}


/* Un poco más apretado el interlineado del texto para que no “respire de más” */
#device-card-container > .device-item *,
#device-card-container > .device-box *,
#device-card-container > .card *,
#device-card-container > div * {
  line-height: 1.15;
}

/* Check con el acento del tema */
#device-card-container input[type="checkbox"] {
  accent-color: var(--delcomp-yellow);
}


/*tabla de datos*/
/* Contenedor scrolleable y con estética del tema */
.rt-table-wrap{
  /* mueve aquí lo que tienes inline */
  max-height: 260px;
  overflow: auto;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);

  /* elimina sangrías de bootstrap si las hubiera */
  padding: 0;
}

/* Tabla coherente con el resto del dashboard */
.device-data-table{
  margin: 0;
  width: 100%;
  color: var(--delcomp-light-text);
  border-collapse: separate;            /* para que se vean los bordes sutiles */
  border-spacing: 0;
}

/* Encabezado “pegajoso” y uniforme */
.device-data-table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(255,255,255,.08);    /* NO inline background #111 */
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Celdas */
.device-data-table tbody td,
.device-data-table thead th{
  border-color: rgba(255,255,255,.08);
  padding: .55rem .75rem;               /* más compacto y simétrico */
  vertical-align: middle;
}

/* Zebra + hover en la zona scrolleable */
.rt-table-wrap tbody tr:nth-child(odd){  background: rgba(255,255,255,.03); }
.rt-table-wrap tbody tr:nth-child(even){ background: rgba(255,255,255,.01); }
.rt-table-wrap tbody tr:hover{           background: rgba(255,255,255,.10); }

/* Scrollbar a tono (opcional) */
.rt-table-wrap::-webkit-scrollbar{ width:8px; height:8px; }
.rt-table-wrap::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 8px;
}


/* === Tabla del bloque RT (coherente con el tema) === */
.rt-table-wrap{
  background: var(--delcomp-panel, #14202b);
  border: 1px solid var(--delcomp-stroke, rgba(255,255,255,.12));
  border-radius: 10px;
  overflow: auto;
}

/* fuerza colores de Bootstrap a nuestro tema */
.rt-table-wrap .table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--delcomp-fg, #e6edf3);
  --bs-table-border-color: rgba(255,255,255,.10);
  margin-bottom: 0;
  background: transparent !important;
  color: var(--delcomp-fg, #e6edf3) !important;
}

/* encabezado fijo y con fondo del panel */
.rt-table-wrap thead th{
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.06);
  color: var(--delcomp-fg, #e6edf3);
  font-weight: 600;
  z-index: 1;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

/* filas */
.rt-table-wrap tbody tr{
  background: transparent;
}
.rt-table-wrap tbody tr:nth-child(even){
  background: rgba(255,255,255,.03);
}
.rt-table-wrap tbody tr:hover{
  background: rgba(255,255,255,.06);
}

/* celdas */
.rt-table-wrap td, .rt-table-wrap th{
  border-color: rgba(255,255,255,.08) !important;
}


/*para poner los botnos unos encima de otro en celulares*/

/* Header de la tarjeta (info + pestañas) */
.device-tabs-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;              /* permite que baje a otra línea */
}

/* Bloque compacto de info (UID, nombre, etc.) */
.device-info-compact{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-width: 260px;
}

/* Lista de pestañas/botones */
.tabs-integrated{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;            /* empuja a la derecha cuando hay espacio */
}

/* Botón de pestaña (ajusta al nombre que uses) */
.tab-button-integrated{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border-radius: .7rem;
  white-space: nowrap;          /* no cortar texto */
}

/* --- BREAKPOINTS --- */

/* 1) Cuando ya no entra, baja el grupo de pestañas a la línea siguiente */
@media (max-width: 1100px){
  .tabs-integrated{
    width: 100%;                /* ocupa fila completa debajo */
    margin-left: 0;
    justify-content: flex-start;
  }
}

/* 2) En anchos pequeños, apilar los botones uno debajo del otro */
@media (max-width: 720px){
  .tab-button-integrated{
    flex: 1 1 100%;             /* cada botón ocupa toda la fila */
  }
}

/* 3) En móviles muy estrechos, un poco menos de padding y tipografía */
@media (max-width: 420px){
  .tab-button-integrated{
    padding: .5rem .75rem;
    font-size: .95rem;
  }
}

/* --- HEADER: info + pestañas --- */
.device-tabs-header{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;                /* permite saltar a otra línea */
}

/* bloque de datos compactos */
.device-info-compact{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-width: 260px;
}

/* contenedor de pestañas/botones */
.tabs-integrated{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;              /* a la derecha cuando hay espacio */
  flex-wrap: wrap;                /* ¡clave! habilita el wrap */
  white-space: normal !important; /* anula posibles nowrap (btn-group) */
}

/* botón de pestaña */
.tab-button-integrated{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border-radius: .7rem;
  white-space: nowrap;            /* el texto no se corta dentro del botón */
}

/* ---------- Breakpoints ---------- */

/* 1) Si no cabe, baja TODO el grupo de pestañas a la siguiente línea */
@media (max-width: 1100px){
  .tabs-integrated{
    order: 2;
    flex-basis: 100%;             /* ocupa toda la fila debajo */
    margin-left: 0;
    justify-content: flex-start;
  }
  .device-info-compact{
    order: 1;
  }
}

/* 2) En móviles, apilar botones verticalmente (100% de ancho) */
@media (max-width: 680px){
  .tabs-integrated .tab-integrated{   /* el <li> si lo usas */
    flex: 1 1 100%;
  }
  .tabs-integrated .tab-button-integrated{
    width: 100%;
  }
}

/* 3) Mini-ajuste en muy estrecho */
@media (max-width: 420px){
  .tab-button-integrated{
    padding: .5rem .75rem;
    font-size: .95rem;
  }
}


/* ====== Device detail header (responsive) ====== */

/* fila principal: permite romper línea */
.devhdr{
  display:flex;
  align-items:center;
  column-gap:14px;
  row-gap:10px;
  flex-wrap:wrap;       /* <-- clave para que pueda bajar */
  min-width:0;
}

/* bloque izquierdo (UID/NOMBRE/UBICACIÓN/ULT.CONEXIÓN/estado) */
.devhdr-left{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  min-width:0;          /* permite encogerse dentro de flex sin forzar overflow */
}

/* par etiqueta-valor */
.devhdr-left .kv{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

/* container de pestañas/botones */
.devhdr-tabs{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;     /* a la derecha cuando hay espacio */
  flex-wrap:wrap;       /* <-- clave para que rompa línea */
  white-space:normal !important; /* por si algo trae nowrap */
  min-width:0;
}

/* botón de pestaña (estilo base, no cambia tu look) */
.devhdr-tabs .devtab{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .9rem;
  border-radius:.7rem;
  white-space:nowrap;   /* el texto del botón no se parte */
}

/* --- breakpoints --- */

/* Cuando ya no cabe, baja TODO el bloque de pestañas a la siguiente línea */
@media (max-width: 1100px){
  .devhdr-tabs{
    order:2;             /* pestañas después del bloque izquierdo */
    flex-basis:100%;     /* ocupa toda la fila debajo */
    margin-left:0;
    justify-content:flex-start;
  }
  .devhdr-left{
    order:1;
  }
}

/* En móviles, apilar botones uno bajo otro a 100% de ancho */
@media (max-width: 680px){
  .devhdr-tabs .devtab{
    width:100%;
  }
}

/* Ajuste fino en muy estrecho */
@media (max-width: 420px){
  .devhdr-tabs .devtab{
    padding:.5rem .75rem;
    font-size:.95rem;
  }
}


/*redondeos y redimensionamiento*/

:root{
  --delcomp-dark-blue: #0D1B2A;         /* color que quieres para cabecera tabla */
  --dlcp-card-radius: 14px;              /* mismo radio en todo el bloque */
}

/* 1) Hacer más ancho el área de contenido (≈ 90–92% del viewport) */
.content-area #main-content.container{
  /* en pantallas grandes usa casi todo el ancho disponible */
  max-width: 96vw;                       /* margen lateral ≈ 4% por lado */
}
@media (min-width: 1600px){
  .content-area #main-content.container{ max-width: 96vw; }  /* un pelín más ancho aún */
}

/* 2) Mantener esquinas redondeadas de la tarjeta y que todo “recorte” dentro */
#main-content .card{
  border-radius: var(--dlcp-card-radius);
  overflow: hidden;                      /* para que los hijos respeten el redondeo */
}

/* 3) Contenedor de la tabla (marco) con mismo look del bloque */
.rt-table-wrap{
  border-radius: calc(var(--dlcp-card-radius) - 2px);
  background: rgba(13,27,42,.35);
  border: 1px solid rgba(255,255,255,.08);
}

/* 4) Cabecera de la tabla con el azul oscuro del tema (reemplaza el negro) */
.dlcp-table thead{
  position: sticky;                      /* si ya lo pones inline, esto asegura el stick */
  top: 0;
  background: var(--delcomp-dark-blue) !important;  /* sobrescribe el inline #111 */
  z-index: 1;
}
.dlcp-table thead th{
  color: #E8EEF7;
  border-color: rgba(255,255,255,.10);
}

/* 5) Filas del cuerpo en el mismo esquema del dashboard */
.dlcp-table,
.dlcp-table tbody,
.dlcp-table tbody tr{
  background: #0e1622 !important;
  color: #E8EEF7 !important;
}
.dlcp-table tbody tr:nth-child(even){
  background: #1d2736 !important;
}
.dlcp-table tbody td{
  border: 1px solid #223043 !important;
  color: #E8EEF7 !important;
  background: transparent !important;
}
.dlcp-table thead,
.dlcp-table thead th {
  background: #1d2736 !important;
  border: 1px solid #223043 !important;
  color: #E8EEF7 !important;
}

/*estado*/
.status-dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  vertical-align:middle; margin-right:.35rem;
  background:#dc3545; /* offline por defecto */
}
.status-dot.is-online{
  background:#28a745;
  box-shadow:0 0 0 0 rgba(40,167,69,.6);
  animation:dlcpPulse 1.6s infinite;
}
.status-dot.is-offline{ background:#dc3545; animation:none; }

@keyframes dlcpPulse{
  0%   { box-shadow:0 0 0 0 rgba(40,167,69,.6); }
  70%  { box-shadow:0 0 0 6px rgba(40,167,69,0); }
  100% { box-shadow:0 0 0 0 rgba(40,167,69,0); }
}

/*centrar uid*/

/* Centrar títulos y valores en el header del device */
.devhdr-left {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.devhdr-left .kv{
  display: flex;
  flex-direction: column;
  align-items: center;     /* <-- centra horizontalmente */
  justify-content: center; /* <-- alinea verticalmente dentro del propio bloque */
  text-align: center;      /* <-- textos centrados */
  line-height: 1.15;
  min-width: 120px;        /* opcional: ancho consistente para que no “bailen” */
}

.devhdr-left .kv .k{
  font-size: .68rem;
  opacity: .8;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 2px;      /* separa título del valor */
}

.devhdr-left .kv .v{
  font-weight: 700;
  font-size: .95rem;
}

/* Si el texto de “Ult. Conexión” es más largo, dale un poco más de base */
.devhdr-left .kv:nth-child(4){
  min-width: 180px;        /* solo para ULT. CONEXIÓN, ajusta si quieres */
}

/* En pantallas muy estrechas, que cada par ocupe media fila */
@media (max-width: 576px){
  .devhdr-left .kv{
    min-width: calc(50% - .75rem);
  }
}


/*historico*/

/* barra y controles del histórico */
.hist-toolbar{
  display:flex; gap:1rem; align-items:end; justify-content:space-between;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:12px 14px; margin-bottom:14px;
}
.hist-fields{ display:flex; flex-wrap:wrap; gap:12px; }
.hist-fields label{ display:flex; flex-direction:column; gap:6px; font-size:.85rem; color:#a9b7c6; }
.hist-fields input[type="datetime-local"],
.hist-fields select{
  background:#0D1B2A; color:#e8edf4; border:1px solid rgba(255,255,255,.14);
  border-radius:10px; padding:7px 10px; min-width:220px;
}
.hist-actions{ display:flex; gap:10px; }
.devtab.gen{ background:#2b3a4d; }
.devtab.ghost{ background:transparent; border:1px dashed rgba(255,255,255,.25); }

.hist-kpi{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:10px 12px; margin-bottom:8px;}
.hist-kpi-title{ font-weight:700; letter-spacing:.03em; color:#dfe7ef; margin-bottom:6px; }
.hist-kpi-list{ list-style:none; padding:0; margin:0; }
.hist-kpi-list li{ display:flex; justify-content:space-between; padding:2px 0; color:#b9c6d6; }
.hist-box{ height:260px; }

/* encabezado tabla histórico del mismo azul del tema */
#content .rt-table-wrap thead,
.rt-table-wrap thead{
  background:#0D1B2A !important;
}

/* alternancia de secciones del card */
.section-hidden { display: none !important; }

/*device gateway1*/
.sensor-box {
  background-color: var(--delcomp-kpi-bg);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}

.status-text {
  font-size: 1.5em;
  font-weight: bold;
}

.status-text.is-open {
  color: #dc3545; /* Rojo para abierto */
}

.status-text.is-closed {
  color: #28a745; /* Verde para cerrado */
}

.log-container {
  max-height: 200px;
  overflow-y: auto;
  background-color: #2b3a4a;
  padding: 10px;
  border-radius: 5px;
}

/* //historic::after */
/* =========================================================
   ESTILOS FINALES PARA LA TABLA DE DATOS HISTÓRICOS
   ========================================================= */

/* 1. Contenedor de la tabla: Mantiene el borde y el scroll */
.historic-table-container {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--delcomp-border);
  border-radius: 12px;
}

/* 2. Estilos base de la tabla */
.historic-table-container .dlcp-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--delcomp-light-text);
  --bs-table-border-color: rgba(255, 255, 255, 0.1);
  width: 100%;
  margin: 0;
}

/* 3. Cabecera (THEAD) - Fondo sutil y fijo */
.historic-table-container .dlcp-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: rgba(27, 38, 59, 0.6);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* 4. Celdas de Cabecera (TH) - Estilo de texto unificado */
.historic-table-container .dlcp-table thead th {
  color: var(--delcomp-muted-text) !important;
  font-weight: 500;
  font-size: 0.8rem;
  padding: 0.75rem;
  text-transform: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--bs-table-border-color) !important;
  border-top: 0;
  text-align: center;
}

/* 5. Celdas de Datos (TD) - La línea delgada entre filas se define aquí */
.historic-table-container .dlcp-table tbody td {
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--bs-table-border-color);
  vertical-align: middle;
  text-align: center;
}

/* 6. Alineación específica para la primera columna */
.historic-table-container .dlcp-table th:first-child,
.historic-table-container .dlcp-table td:first-child {
  text-align: left;
}

/* 7. Estilo de filas y Hover */
/* Todas las filas tienen el mismo fondo transparente por defecto, como solicitaste */
.historic-table-container .dlcp-table tbody tr {
  background-color: transparent;
}

/* Efecto hover sutil que se activa al pasar el mouse */
.historic-table-container .dlcp-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* 8. Scrollbar estilizado SIN cambio de color al pasar el mouse */
.historic-table-container::-webkit-scrollbar {
  width: 8px;
}

.historic-table-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}
/* Se elimina la regla :hover para que el color no cambie, tal como se encuentra en tu tema */


/* =========================================================
   SOBRESCRIBIR ESTILO DE BTN-WARNING PARA EL BOTÓN DE HISTÓRICO
   ========================================================= */

/* Apuntamos específicamente al botón dentro de la sección histórica */
.section-hist .btn.btn-warning {
  /* Replicamos el estilo exacto de .devtab */
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--delcomp-light-text) !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: .9rem !important;
  line-height: 1 !important;
  
  /* Anulamos cualquier sombra o efecto específico de .btn-warning */
  box-shadow: none !important;
  transition: background-color 0.2s ease-in-out;
}

/* Efecto hover consistente con .devtab */
.section-hist .btn.btn-warning:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--delcomp-light-text) !important;
}

/* Estilo para cuando el botón está deshabilitado (cargando) */
.section-hist .btn.btn-warning:disabled {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  opacity: 0.65;
}

/* historic */

/* Agregar estos estilos al CSS del dashboard o como <style> en el head */

/* --- ESTILOS PARA EL NUEVO ENCABEZADO COMPACTO DEL SIDEBAR --- */

.sidebar-header {
  display: flex;         /* Activa el modo Flexbox para alinear elementos horizontalmente */
  align-items: center;   /* Centra los elementos verticalmente */
  gap: 15px;             /* Añade un espacio entre el logo y el texto */
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--delcomp-border);
  margin-bottom: 1rem;
}

.sidebar-header .brand-logo {
  height: 38px;          /* Reduce un poco la altura del logo */
  width: auto;
  flex-shrink: 0;        /* Evita que el logo se encoja */
}

.sidebar-header .sidebar-header-text {
  display: flex;
  flex-direction: column; /* Apila "DASHBOARD" y "Bienvenido" verticalmente */
}

.sidebar-header .brand-subtitle {
  font-size: 1.1rem;      /* Ajusta el tamaño del título */
  font-weight: bold;
  color: var(--delcomp-light-text);
  line-height: 1.2;
}

.sidebar-header .welcome-text {
  font-size: 0.8rem;      /* Ajusta el tamaño del texto de bienvenida */
  color: var(--delcomp-muted-text);
  line-height: 1.2;
}

/* onoine offline texto no está */
.devhdr .status .status-label {
  display: none !important;
}

/* Centra el punto de estado verticalmente ahora que el texto no está */
.devhdr-left .status {
  align-items: center;
}

/* --- Modificación para maximizar el área de datos y gráficas (SOLUCIÓN LATERAL) --- */

/* 1. Modificar el padding lateral del área de contenido principal (.content-area) */
.content-area {
  /* Reducimos el padding lateral (izquierda y derecha) a un mínimo de 10px */
  padding-left: 10px !important; 
  padding-right: 10px !important; 
}

/* 2. Reducir el padding lateral del contenedor interno (#main-content.container) */
.content-area #main-content.container {
    /* Mínimo padding interno, si el anterior no es suficiente */
    padding-left: 5px !important; 
    padding-right: 5px !important;
}

/* 3. Ajuste fino de padding superior (mantenido de la corrección anterior) */
.content-area {
    padding-top: 0.5rem !important;
}


/* 1. Reducir el tamaño de fuente de los KPIs (2.5rem es un buen estándar) */
.text-center .display-4 {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
    /* Aseguramos un margen vertical mínimo para acercar la gráfica */
    margin-top: 0.25rem !important; /* Mínimo margen superior */
    margin-bottom: 0.25rem !important; /* Mínimo margen inferior */
}

/* ============================================= */
/* == ESTILOS PARA BOTONES DE TABS DE DISPOSITIVO == */
/* ============================================= */

/* Estilo base para los botones del grupo */
.btn-outline-dlcp {
  color: var(--delcomp-muted-text, #adb5bd);
  border-color: var(--delcomp-border, #495057);
  padding: 0.25rem 0.75rem; /* Ajuste para un look más compacto */
}

/* Estilo al pasar el mouse por encima */
.btn-outline-dlcp:hover {
  color: #fff;
  background-color: var(--delcomp-yellow, #ffc107);
  border-color: var(--delcomp-yellow, #ffc107);
}

/* Estilo para el botón ACTIVO */
.btn-outline-dlcp.active {
  color: #1d2736; /* Texto oscuro para contraste */
  background-color: var(--delcomp-yellow, #ffc107);
  border-color: var(--delcomp-yellow, #ffc107);
  box-shadow: none; /* Quitar sombra de Bootstrap */
}

/* Asegurar que los íconos no tengan margen extra */
.btn-outline-dlcp .fas {
  margin-right: 0;
}

/* Contenedor principal del encabezado del dispositivo */
.devhdr {
  display: flex;                 /* Activa el modo "fila" (Flexbox) */
  justify-content: space-between;  /* Empuja los hijos a los extremos (izquierda y derecha) */
  align-items: flex-start;         /* Alinea verticalmente los elementos en la parte superior */
  flex-wrap: wrap;                 /* Permite que los botones bajen si la pantalla es extremadamente estrecha */
  gap: 1rem;                       /* Añade un espacio entre los elementos si se envuelven */
}

/* ========================================================= */
/* == ALINEACIÓN DEL PUNTO DE ESTADO JUNTO A "ULT. CONEXIÓN" == */
/* ========================================================= */

/* 1. Hacemos que el contenedor del texto se comporte como una fila flexible */
.devhdr-left .kv .k {
  display: flex;         /* Activa Flexbox para alinear elementos en una línea */
  align-items: center;   /* Centra verticalmente el texto y el punto */
  gap: 0.5em;            /* Añade un pequeño espacio entre el texto y el punto */
}

/* 2. Ocultamos el texto "ONLINE/OFFLINE" para que solo se vea el punto */
.devhdr-left .status-label {
  display: none;
}

/* 3. Aseguramos que el punto tenga el tamaño correcto */
.devhdr-left .status-dot {
  width: 9px;
  height: 9px;
}

/* =========================================================
   CORRECCIONES MÍNIMAS - AGREGAR AL FINAL DE dlcp_theme.css
   NO BORRAR NADA, SOLO AGREGAR ESTAS REGLAS
   ========================================================= */

/* ========== CORRECCIÓN 1: BOTONES DE PESTAÑAS ========== */
/* Solo ajustar el layout para que los botones bajen solo cuando realmente no quepan */

@media (max-width: 650px) {
  .devhdr {
    flex-wrap: wrap !important;
  }
  
  .devhdr-tabs {
    width: 100% !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-top: 8px !important;
  }
}

@media (max-width: 400px) {
  .devhdr-tabs {
    flex-direction: column !important;
  }
  
  .devtab {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ========== CORRECCIÓN 2: GRÁFICAS CONTENIDAS ========== */
/* Evitar que las gráficas se desborden especialmente en móvil */

.p-3.rounded-3 .flex-grow-1 {
  position: relative;
  overflow: hidden !important;
  max-width: 100% !important;
}

.p-3.rounded-3 .flex-grow-1 canvas {
  max-width: 100% !important;
  max-height: 100% !important;
}

/* En móviles, asegurar que todo esté contenido */
@media (max-width: 576px) {
  .p-3.rounded-3 .flex-grow-1 {
    height: 100px !important;
    min-height: 100px !important;
  }
  
  .p-3.rounded-3 {
    padding: 6px 8px !important;
  }
  
  .p-3.rounded-3 .text-center {
    min-width: 70px !important;
    max-width: 70px !important;
  }
  
  .display-4 {
    font-size: 1.8rem !important;
  }
}

/* Gráficas históricas también contenidas */
.hist-box {
  overflow: hidden !important;
  max-width: 100% !important;
}

.hist-box canvas {
  max-width: 100% !important;
  max-height: 100% !important;
}

@media (max-width: 576px) {
  .hist-box {
    height: 200px !important;
  }
}

/* ========== CORRECCIÓN 3: TABLA NO SE CORTA ========== */
/* La tabla debe verse completa sin cortarse */

.rt-table-wrap {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
}

@media (max-width: 576px) {
  .rt-table-wrap {
    max-height: 220px !important;
  }
  
  .rt-table-wrap td,
  .rt-table-wrap th {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.3rem !important;
  }
}

/* ========== CORRECCIÓN 4: EVITAR OVERFLOW HORIZONTAL GLOBAL ========== */
/* Prevenir scroll horizontal en el contenedor principal */

.card.mb-4.text-white {
  overflow-x: hidden !important;
}

.content-area {
  overflow-x: hidden !important;
}

/* ========== FIN DE LAS CORRECCIONES ========== */


/* =========================================================
   AGREGAR AL FINAL DE dlcp_theme.css
   Header más compacto en móviles
   ========================================================= */

/* En móviles medianos y pequeños, reorganizar el header */
@media (max-width: 768px) {
  .devhdr {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
    padding: 10px 12px;
  }

  .devhdr-left {
    display: contents; /* Los hijos de devhdr-left se comportan como hijos directos de devhdr */
  }

  /* Primera fila: UID y NOMBRE */
  .devhdr-left .kv:nth-child(1),  /* UID */
  .devhdr-left .kv:nth-child(2) { /* NOMBRE */
    width: 100%;
  }

  /* Segunda fila: UBICACIÓN y ULT. CONEXIÓN */
  .devhdr-left .kv:nth-child(3),  /* UBICACIÓN */
  .devhdr-left .kv:nth-child(4) { /* ULT. CONEXIÓN */
    width: 100%;
  }

  /* Tercera fila: RSSI WIFI en la columna izquierda */
  .devhdr-left .kv:nth-child(5) { /* RSSI WIFI */
    width: 100%;
  }

  /* Las pestañas se colocan en la columna derecha de la tercera fila */
  .devhdr-tabs {
    margin-left: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
  }

  .devtab {
    padding: 6px 10px;
    font-size: 0.85rem;
    width: 100%;
  }
}

/* En móviles muy pequeños, layout vertical completo */
@media (max-width: 480px) {
  .devhdr {
    position: relative;
    padding-right: 110px; /* Espacio para los botones a la derecha */
  }
  
  .devhdr-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
  }
  
  .devhdr-left .kv {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
  }
  
  /* Botones en columna a la derecha */
  .devhdr-tabs {
    position: absolute;
    top: 8px;
    right: 8px;
    flex-direction: column;
    gap: 4px;
    width: 100px;
  }
  
  .devtab {
    width: 100%;
    padding: 5px 8px;
    font-size: 0.8rem;
    justify-content: center;
  }
  
  /* Icono más pequeño en móviles */
  .devtab i {
    font-size: 0.9rem;
  }
}

/* En móviles extremadamente pequeños */
@media (max-width: 360px) {
  .devhdr {
    padding-right: 90px;
  }
  
  .devhdr-tabs {
    width: 85px;
  }
  
  .devtab {
    padding: 4px 6px;
    font-size: 0.75rem;
  }
  
  .devhdr-left .kv .k {
    font-size: 0.6rem;
  }
  
  .devhdr-left .kv .v {
    font-size: 0.85rem;
  }
}

/* =========================================================
   AGREGAR AL FINAL DE dlcp_theme.css
   Header más compacto en móviles + Gráficas maximizadas
   ========================================================= */

/* ========== REDUCIR PADDING DE BLOQUES DE GRÁFICAS EN MÓVILES ========== */
@media (max-width: 768px) {
  /* Reducir padding del bloque completo */
  .p-3.rounded-3 {
    padding: 4px 6px !important;
  }
  
  /* Ajustar contenedor del valor grande */
  .p-3.rounded-3 .text-center {
    min-width: 65px !important;
    max-width: 65px !important;
    padding-right: 0.3rem !important;
  }
  
  /* Número grande más compacto */
  .display-4 {
    font-size: 1.9rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* Maximizar altura de gráfica */
  .p-3.rounded-3 .flex-grow-1 {
    height: 110px !important;
    min-height: 110px !important;
  }
}

@media (max-width: 576px) {
  .p-3.rounded-3 {
    padding: 3px 5px !important;
  }
  
  .p-3.rounded-3 .flex-grow-1 {
    height: 100px !important;
  }
  
  .display-4 {
    font-size: 1.7rem !important;
  }
}

/* =========================================================
   AGREGAR AL FINAL DE dlcp_theme.css
   CORRECCIÃ"N: Más altura para gráficas + Header histórico responsive
   ========================================================= */

/* ========== 1. MAXIMIZAR ALTURA DE GRÃFICAS TIEMPO REAL ========== */

/* Aumentar altura base de las gráficas */
.rt-chart-box {
  height: 180px !important;  /* Era 250px, ahora 180px para aprovechar mejor el espacio */
  min-height: 180px !important;
}

/* Reducir padding vertical del contenedor para dar más espacio a la gráfica */
.p-3.rounded-3 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* Reducir margen del número grande para acercar a la gráfica */
.display-4 {
  margin-top: 0 !important;
  margin-bottom: 0.25rem !important;
  line-height: 1 !important;
}

/* Reducir el texto pequeño debajo del número */
.p-3.rounded-3 .text-center small {
  font-size: 0.7rem !important;
  margin-top: 0 !important;
  display: block;
  line-height: 1.1 !important;
}

/* En desktop, maximizar aún más */
@media (min-width: 992px) {
  .rt-chart-box {
    height: 200px !important;
    min-height: 200px !important;
  }
}

/* En tablets */
@media (max-width: 991px) and (min-width: 577px) {
  .rt-chart-box {
    height: 170px !important;
    min-height: 170px !important;
  }
}

/* En móviles, mantener altura razonable */
@media (max-width: 576px) {
  .rt-chart-box {
    height: 140px !important;
    min-height: 140px !important;
  }
  
  .p-3.rounded-3 {
    padding: 0.4rem 0.5rem !important;
  }
  
  .display-4 {
    font-size: 1.6rem !important;
  }
}

/* ========== 2. GRÃFICAS HISTÃ"RICAS CON MÃS ALTURA ========== */

.hist-box {
  height: 280px !important;  /* Era 260px, aumentamos a 280px */
  min-height: 280px !important;
}

@media (max-width: 768px) {
  .hist-box {
    height: 240px !important;
  }
}

@media (max-width: 576px) {
  .hist-box {
    height: 200px !important;
  }
}

/* ========== 3. HEADER HISTÃ"RICO RESPONSIVE (SOLUCIÃ"N A LA SUPERPOSICIÃ"N) ========== */

/* Layout base del toolbar histórico */
.hist-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: stretch;  /* Cambiado de 'end' a 'stretch' */
  justify-content: space-between;
}

/* Los campos ocupan el espacio disponible */
.hist-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;  /* Permite que se encoja si es necesario */
}

/* Las acciones (botones) se mantienen juntas */
.hist-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;  /* No crece, no encoge */
  align-items: center;
}

/* En tablets medianas, comenzar a apilar */
@media (max-width: 991px) {
  .hist-fields label {
    flex: 1 1 calc(50% - 6px);  /* 2 campos por fila */
    min-width: 0;
  }
  
  .hist-fields input[type="datetime-local"],
  .hist-fields select {
    width: 100%;
    min-width: 0;
  }
}

/* En tablets pequeñas, reorganizar completamente */
@media (max-width: 768px) {
  .hist-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  
  .hist-fields {
    width: 100%;
    justify-content: space-between;
  }
  
  .hist-fields label {
    flex: 1 1 calc(50% - 6px);
  }
  
  .hist-actions {
    width: 100%;
    justify-content: stretch;
  }
  
  .hist-actions button {
    flex: 1;  /* Botones de igual tamaño */
  }
}

/* En móviles, apilar todo verticalmente */
@media (max-width: 576px) {
  .hist-toolbar {
    padding: 10px;
  }
  
  .hist-fields {
    flex-direction: column;
    gap: 8px;
  }
  
  .hist-fields label {
    flex: 1 1 100%;
    width: 100%;
  }
  
  .hist-fields input[type="datetime-local"],
  .hist-fields select {
    min-width: 100%;
  }
  
  .hist-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .hist-actions button {
    width: 100%;
  }
}

/* En móviles muy pequeños (< 400px) */
@media (max-width: 399px) {
  .hist-toolbar {
    padding: 8px;
  }
  
  .hist-fields label {
    font-size: 0.8rem;
  }
  
  .hist-fields input[type="datetime-local"],
  .hist-fields select {
    padding: 6px 8px;
    font-size: 0.85rem;
  }
  
  .devtab {
    padding: 6px 10px;
    font-size: 0.85rem;
  }
}

/* ========== 4. AJUSTES ADICIONALES PARA KPIs HISTÃ"RICOS ========== */

/* Reducir padding de los bloques KPI para dar más espacio a gráficas */
.hist-kpi {
  padding: 8px 10px;
  margin-bottom: 6px;
}

.hist-kpi-title {
  margin-bottom: 4px;
  font-size: 0.9rem;
}

.hist-kpi-list li {
  padding: 1px 0;
  font-size: 0.85rem;
}

@media (max-width: 576px) {
  .hist-kpi {
    padding: 6px 8px;
  }
  
  .hist-kpi-title {
    font-size: 0.85rem;
  }
  
  .hist-kpi-list li {
    font-size: 0.8rem;
  }
}

/* ========== 5. OPTIMIZAR ESPACIADO ENTRE SECCIONES ========== */

/* Reducir espacio entre gráficas en la vista de tiempo real */
.mb-3 {
  margin-bottom: 0.75rem !important;
}

/* Reducir espacio entre secciones históricas */
.section-hist > .mb-3,
.section-hist > .mb-4 {
  margin-bottom: 0.75rem !important;
}

/* ========== 6. CONTENEDOR DE GRÃFICAS HISTÃ"RICAS ========== */

/* Asegurar que el contenedor de gráfica use todo el espacio */
.hist-box > canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Reducir padding del contenedor padre si existe */
.hist-box {
  padding: 0 !important;
  margin: 0 !important;
}

/* ========== FIN DE LAS CORRECCIONES ========== */

/* =========================================================
   AGREGAR AL FINAL DE dlcp_theme.css
   CORRECCIÓN DEFINITIVA: Header mobile con layout vertical limpio
   ========================================================= */

/* ========== CORRECCIÓN COMPLETA PARA MÓVILES ========== */

/* En móviles, reorganizar completamente el header */
@media (max-width: 768px) {
  .devhdr {
    display: flex;
    flex-direction: column;  /* Todo en columna */
    align-items: stretch;    /* Ocupa todo el ancho */
    gap: 10px;
    padding: 10px;
    position: relative;      /* Eliminar absolute que causa problemas */
  }
  
  /* Bloque izquierdo: info del dispositivo */
  .devhdr-left {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* 2 columnas iguales */
    gap: 8px;
    width: 100%;
  }
  
  /* Cada campo ocupa su celda */
  .devhdr-left .kv {
    display: flex;
    flex-direction: column;
    align-items: flex-start;  /* Alineado a la izquierda */
    text-align: left;
    min-width: 0;
    padding: 4px;
  }
  
  .devhdr-left .kv .k {
    font-size: 0.65rem;
    opacity: 0.8;
    margin-bottom: 2px;
  }
  
  .devhdr-left .kv .v {
    font-size: 0.9rem;
    font-weight: 600;
  }
  
  /* Botones de pestañas: fila completa debajo */
  .devhdr-tabs {
    display: flex;
    flex-direction: row;      /* Horizontal en fila */
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    margin-left: 0;
    position: static;         /* NO absolute */
  }
  
  .devtab {
    flex: 1;                  /* Todos del mismo tamaño */
    padding: 8px 6px;
    font-size: 0.8rem;
    text-align: center;
    white-space: nowrap;
  }
  
  /* Iconos más pequeños en mobile */
  .devtab i {
    font-size: 0.85rem;
    margin-right: 4px;
  }
}

/* En móviles pequeños (< 480px), apilar botones verticalmente */
@media (max-width: 480px) {
  .devhdr {
    padding: 8px;
  }
  
  /* Grid de 2x2 para la info */
  .devhdr-left {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  
  .devhdr-left .kv .k {
    font-size: 0.6rem;
  }
  
  .devhdr-left .kv .v {
    font-size: 0.85rem;
  }
  
  /* Botones en columna vertical */
  .devhdr-tabs {
    flex-direction: column;
    gap: 6px;
  }
  
  .devtab {
    width: 100%;
    padding: 10px;
    justify-content: center;
  }
}

/* En móviles extremadamente pequeños (< 360px) */
@media (max-width: 360px) {
  .devhdr {
    padding: 6px;
  }
  
  .devhdr-left .kv .k {
    font-size: 0.55rem;
  }
  
  .devhdr-left .kv .v {
    font-size: 0.8rem;
  }
  
  .devtab {
    padding: 8px;
    font-size: 0.75rem;
  }
}

/* ========== ASEGURAR QUE NO HAY POSITION ABSOLUTE PROBLEMÁTICO ========== */

/* Eliminar cualquier positioning absoluto en mobile */
@media (max-width: 768px) {
  .devhdr,
  .devhdr-left,
  .devhdr-tabs {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
  }
}

/* ========== OPTIMIZAR GRÁFICAS EN MOBILE ========== */

@media (max-width: 576px) {
  /* Reducir altura de gráficas en móvil para dar más espacio */
  .rt-chart-box {
    height: 130px !important;
    min-height: 130px !important;
  }
  
  /* Compactar el bloque del número grande */
  .p-3.rounded-3 {
    padding: 4px 6px !important;
  }
  
  .p-3.rounded-3 .text-center {
    min-width: 60px !important;
    max-width: 60px !important;
  }
  
  .display-4 {
    font-size: 1.5rem !important;
  }
  
  /* Texto descriptivo más pequeño */
  .p-3.rounded-3 .text-center small {
    font-size: 0.65rem !important;
  }
}

/* ========== AJUSTAR TABLA EN MOBILE ========== */

@media (max-width: 576px) {
  .rt-table-wrap {
    max-height: 200px !important;
  }
  
  .rt-table-wrap td,
  .rt-table-wrap th {
    font-size: 0.7rem !important;
    padding: 0.35rem 0.25rem !important;
  }
}

/* ========== FIN DE LAS CORRECCIONES ========== */


/* =========================================================
   ASEGURAR QUE LAS SECCIONES SE OCULTEN CORRECTAMENTE
   Agregar al final de dlcp_theme.css
   ========================================================= */

/* Ocultar secciones inactivas */
.section-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Asegurar que las secciones visibles se muestren correctamente */
.section-rt:not(.section-hidden),
.section-hist:not(.section-hidden),
.section-config:not(.section-hidden) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* Transición suave al cambiar de pestaña */
.section-rt,
.section-hist,
.section-config {
  transition: opacity 0.2s ease-in-out;
}

/* =========================================================
   AGREGAR AL FINAL DE dlcp_theme.css
   ESTILOS PARA TARJETAS DE DISPOSITIVOS EN TIEMPO REAL
   ========================================================= */
.slaves-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  padding: 15px 0;
}

.slave-card-rt {
  background: var(--delcomp-card-bg);
  border: 1px solid var(--delcomp-border);
  border-radius: 8px;
  padding: 15px;
  transition: transform 0.2s;
}

.slave-card-rt:hover {
  transform: translateY(-2px);
  border-color: var(--delcomp-yellow);
}

.slave-header-rt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--delcomp-border);
}

.slave-title {
  font-weight: 600;
  color: var(--delcomp-yellow);
  font-size: 0.95rem;
}

.slave-type-badge {
  background: var(--delcomp-dark-blue);
  color: var(--delcomp-light-text);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
}

.rssi-indicator {
  font-size: 0.8rem;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.rssi-good { background: #10b981; color: white; }
.rssi-medium { background: #f59e0b; color: black; }
.rssi-bad { background: #ef4444; color: white; }
.rssi-unknown { background: #6b7280; color: white; }

.input-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

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

.input-label {
  color: var(--delcomp-light-text);
  font-size: 0.9rem;
  flex: 1;
}

/* Botones de activación de salidas - Más grandes para móviles */
.input-item .btn {
  min-width: 120px;
  min-height: 42px;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.input-item .btn i {
  font-size: 1.1rem;
}

.input-item .btn:active {
  transform: scale(0.95);
}

/* Responsivo: Aún más grande en pantallas pequeñas */
@media (max-width: 768px) {
  .input-item .btn {
    min-width: 140px;
    min-height: 48px;
    font-size: 1rem;
    padding: 12px 24px;
  }
}

.status-led {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #dc3545;  /* Rojo por defecto (inactivo) */
    border: 2px solid #2d3748;
    transition: all 0.3s;
    box-shadow: 0 0 0 rgba(220, 53, 69, 0);
}

.status-led.active {
    background: #10b981;  /* Verde cuando activo */
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.8);
}

/* =========================================================
   fin
   ========================================================= */

   .signal-icon {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
}

.signal-bar {
    width: 3px;
    border-radius: 1px;
    transition: background 0.3s;
}

.signal-bar.bar-1 { height: 25%; }
.signal-bar.bar-2 { height: 50%; }
.signal-bar.bar-3 { height: 75%; }
.signal-bar.bar-4 { height: 100%; }

/* =========================================================
   ESTILOS PARA ICONOS DE EDITAR/ELIMINAR EN TABLA DE DISPOSITIVOS
   ========================================================= */

/* Mejorar centrado y padding de botones de acciones en tabla */
.devices-container .btn-group .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 0.5rem;
}

.devices-container .btn-group .btn i {
    margin: 0;
    font-size: 0.9rem;
}

/* Asegurar que el grupo de botones esté centrado */
.devices-container .btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive: ajustar tamaño en móviles */
@media (max-width: 768px) {
    .devices-container .btn-group .btn {
        min-width: 32px;
        min-height: 32px;
        padding: 0.4rem;
    }

    .devices-container .btn-group .btn i {
        font-size: 0.85rem;
    }
}

/* =========================================================
   SELECTOR DE ICONOS CON VISTA PREVIA
   ========================================================= */

.icon-selector {
    display: flex;
    gap: 10px;
    align-items: center;
}

.icon-selector .icon-select {
    flex: 1;
}

.icon-selector .icon-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 35px;
    background: rgba(140, 115, 75, 0.2);
    border: 1px solid rgba(140, 115, 75, 0.4);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.icon-selector .icon-preview i {
    font-size: 1.2rem;
    color: var(--delcomp-yellow);
}

.icon-selector .icon-preview:hover {
    background: rgba(140, 115, 75, 0.3);
    border-color: var(--delcomp-yellow);
    transform: scale(1.05);
}