/* NUEVOS ESTILOS PARA LAS INFO CARDS DEL CONCENTRADOR */
.info-card {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;

}
.info-card .info-icon {
    font-size: 1.5rem;
    color: var(--secondary-color, #6c757d); /* Usamos --secondary-color si está definida, sino un gris */
    margin-right: 1rem;
    width: 30px; /* Ancho fijo para alinear iconos */
    text-align: center;
}
.info-card .info-label {
    font-size: 0.9rem;
    color: #6c757d; /* text-muted */
    margin-bottom: 0.2rem;
}
.info-card .info-value {
    font-size: 1rem;
    font-weight: 500;
    color: #343a40; /* text-dark */
}

/* Estilos específicos para la barra de señal */
.signal-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 20px;
    margin-top: 5px; /* Ajuste para separar del texto */
}
.signal-bars > div {
    width: 5px;
    border-radius: 2px;
    transition: height 0.3s, background-color 0.3s;
}
.signal-bars:hover > div {
    height: calc(100% + 4px); /* Aumenta un poco el alto al hacer hover */
}
/* Colores para las barras de señal basados en el rango */
.signal-bar-bad { background-color: #dc3545; } /* Rojo */
.signal-bar-medium { background-color: #ffc107; } /* Naranja */
.signal-bar-good { background-color: #28a745; } /* Verde */
.signal-bar-default { background-color: #d6d6d6; } /* Gris por defecto */

/* Estilos específicos para el estado de encendido */
.badge-encendido {
    font-size: 0.85em;
    padding: 0.4em 0.8em;
    border-radius: 0.3rem;
}

/* Estilos para el botón de firmware */
.firmware-update-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Asegura que ocupe todo el ancho disponible en la tarjeta */
}

/* Responsive adjustments for layout */
@media (max-width: 768px) {
    .info-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .info-card .info-icon {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    .firmware-update-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .firmware-update-section .text-end {
        text-align: left !important;
    }
}





















    .battery-container {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .battery {
        width: 20px;
        height: 40px;
        border: 2px solid #444;
        border-radius: 4px;
        position: relative;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
    }

    .battery::after {
        content: "";
        position: absolute;
        top: -5px;
        left: 50%;
        width: 6px;
        height: 4px;
        background: #444;
        transform: translateX(-50%);
        border-radius: 2px;
    }

    .battery-level {
        width: 100%;
        background: #4CAF50;
        transition: height 0.3s ease-in-out;
    }

    .battery-level[data-low="true"] {
        background: #f44336;
    }

    .battery-level[data-medium="true"] {
        background: #ffc107;
    }

    .transmisor-canales {
        background-color: #f9f9f9;
    }

    .transmisor-canales table {
        margin-bottom: 0;
    }

    .umbral-row {
        display: flex;
        gap: 10px;
        margin-bottom: 8px;
        align-items: center;
    }

    /* Botones consistentes */
    .btn-custom {
        font-size: 0.85rem;
        border-radius: 0.375rem;
        padding: 0.375rem 0.75rem;
        transition: all 0.2s ease-in-out;
    }

    .btn-custom i {
        margin-right: 5px;
    }

    .btn-custom:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    .table td:first-child {
        white-space: nowrap;
        width: 1%;
    }
   
    .busqueda-icono {
      filter: grayscale(100%);
      width: 18px;
      height: 18px;
      margin-right: 5px;
    }
    .blink {
      animation: blink 1s infinite;
    }
    
    .blinking-border {
      border: 2px solid red;
      animation: blink-border 1s infinite;
    }
    
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.2; }
    }
    
    @keyframes blink-border {
      0%, 100% { border-color: red; }
      50% { border-color: transparent; }
    }
@keyframes parpadeo-metalgear {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: 0.4; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.parpadeo-metalgear {
  animation: parpadeo-metalgear 1.2s infinite;
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 1.5px;
  font-size: 0.75rem;
  padding: 2px 5px;
  border-radius: 2px;
  border: 1px solid #ff0000;
  background-color: rgba(255, 0, 0, 0.1);
}


    

  /* Cebra SOLO para tabla principal de transmisores */
  .tabla-transmisores > tbody > tr.transmisor-row:nth-of-type(odd) {
    background-color: #f8f9fa; /* Blanco suave */
  }

  .tabla-transmisores > tbody > tr.transmisor-row:nth-of-type(even) {
    background-color: #e9ecef; /* Gris claro */
  }

  /* Hover elegante en filas */
  .tabla-transmisores > tbody > tr.transmisor-row:hover {
    background-color: #ced4da;
    color: black;
  }
  .leaflet-control .legend {
    background: white;
    padding: 8px;
    border-radius: 6px;
    line-height: 1.3em;
    font-size: 1.5rem;
    font-weight: 500;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    color: #333;
  }
  

  .signal-bars div {
      transition: height 0.3s, background-color 0.3s;
  }
  
  .signal-bars:hover div {
      height: calc(100% + 4px);
  }
    .transmisor-card {
      background-color: #f9f9f9;
      padding: 12px;
      border-radius: 6px;
      margin-bottom: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    #panel-metricas-mapa {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 1001;
      background: rgba(255, 255, 255, 0.95);
      padding: 12px 16px;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      font-size: 0.9rem;
      max-width: 250px;
      display: none; /* Oculto por defecto */
    }
    #map-container {
      position: relative;
    }
    

    @keyframes slideInRight {
      from { transform: translateX(100%); opacity: 0; }
      to   { transform: translateX(0); opacity: 1; }
    }
    .animate__slideInRight {
      animation: slideInRight 0.4s ease forwards;
    }
    .distancia-linea-label {
      pointer-events: none;
      animation: fadein 0.3s ease-in-out;
    }
    @keyframes fadein {
      from { opacity: 0; transform: translateY(-5px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    
      .linea-interactiva {
        pointer-events: stroke;
        stroke-width: 12px;
        stroke-opacity: 0;
      }
      .tooltip-distancia-linea {
        background-color: #fff;
        border: 1px solid #ccc;
        color: #000;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.75rem;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        pointer-events: none;
      }
      
  /* Reduce el padding para las celdas de la tabla de información principal */
  .table.table-bordered.align-middle th,
  .table.table-bordered.align-middle td {
      padding-top: 0.3rem; /* Reduce el relleno superior */
      padding-bottom: 0.3rem; /* Reduce el relleno inferior */
      font-size: 0.9rem; /* Hace el texto ligeramente más pequeño para mayor compacidad */
  }

  /* Opcional: Ajusta el tamaño de los íconos si se ven muy grandes con el padding reducido */
  .table.table-bordered.align-middle th i {
      font-size: 1rem; /* Ejemplo: ajusta el tamaño del ícono */
  }

  /* Ajuste específico para la fila de Firmware, que tiene contenido más complejo */
  /* Esto asegura que el padding se aplique también a esta celda específica */
  .table.table-bordered.align-middle td.d-flex.justify-content-between.align-items-center {
      padding-top: 0.3rem;
      padding-bottom: 0.3rem;
  }

  /* =========================================== */
/* Estilos para el Listado de Transmisores (Acordeón) */
/* =========================================== */

/* Estilo Zebra para las tarjetas de transmisores */
#accordion-transmisores .card:nth-of-type(odd) { /* Usamos nth-of-type para mayor robustez dentro del acordeón */
    background-color: #f8f9fa; /* Color suave para las tarjetas impares */
    border-left: 5px solid #e9ecef; /* Pequeño detalle de borde para diferenciar */
}

#accordion-transmisores .card:nth-of-type(even) { /* Usamos nth-of-type */
    background-color: #ffffff; /* Blanco para las tarjetas pares, contrasta con el odd */
    border-left: 5px solid #f8f9fa; /* Pequeño detalle de borde para diferenciar */
}

/* Efecto hover sutil para las tarjetas de transmisores */
#accordion-transmisores .card:hover {
    background-color: #e2e6ea; /* Un gris ligeramente más oscuro que el fondo normal */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Sombra para dar efecto de "elevación" */
    transform: translateY(-2px); /* Desplazamiento ligero hacia arriba */
    transition: all 0.3s ease-in-out; /* Suaviza todas las transiciones */
    cursor: pointer; /* Indica que es interactuable */
}

/* Reset de estilos al quitar el hover */
#accordion-transmisores .card {
    transition: all 0.3s ease-in-out; /* Asegura que el retorno también sea suave */
    border-left: 5px solid transparent; /* Asegura que el borde no cambie bruscamente */
}

/* Estilo para el estado de alarma (parpadeo) */
/* Asegúrate de que 'parpadeo-rojo' esté definido en tu CSS. Si no, aquí hay una sugerencia: */
.parpadeo-rojo {
    animation: parpadeo-alarma 1s infinite alternate; /* Animación de parpadeo suave */
    border-color: #dc3545 !important; /* Borde rojo que parpadea */
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.5); /* Sombra brillante */
}

@keyframes parpadeo-alarma {
    0% { background-color: #ffebeb; border-color: #dc3545; }
    100% { background-color: #ffffff; border-color: #f0f0f0; }
}

/* Mejoras generales para el card-header y card-body del acordeón */
#accordion-transmisores .card-header {
    background-color: transparent; /* Permite que el color zebra del card se vea */
    border-bottom: 1px solid rgba(0,0,0,.125); /* Mantiene un separador sutil */
    padding: 0.75rem 1.25rem; /* Ajusta el padding si lo necesitas */
}

#accordion-transmisores .card-body {
    padding: 1rem 1.25rem; /* Asegura un padding consistente dentro del cuerpo */
}

/* Estilo para la tabla dentro de cada transmisor colapsable */
#accordion-transmisores .card-body table {
    margin-top: 0.5rem; /* Pequeño margen superior para separar de otros elementos si los hay */
}

/* Ajustes para los botones dentro del card-header para que se vean mejor */
#accordion-transmisores .card-header .btn {
    white-space: nowrap; /* Evita que el texto de los botones se rompa en varias líneas */
    margin-left: 0.5rem; /* Espacio entre botones */
}

/* Asegurar que el input-group de búsqueda tenga un estilo consistente */
.input-group .form-control {
    border-left: none; /* Quita el borde izquierdo para que se fusione con el icono */
}

.input-group-text {
    border-right: none; /* Quita el borde derecho para que se fusione con el input */
}

/* Opcional: Ajusta el tamaño de fuente de la información del transmisor si lo ves muy grande/pequeño */
#accordion-transmisores .card-header strong {
    font-size: 1.1em;
}

#accordion-transmisores .card-header .text-muted {
    font-size: 0.85em;
}

/* Estilos para canales inactivos */
.canal-inactivo {
    opacity: 0.6; /* Atenúa toda la fila */
    filter: grayscale(30%); /* Opcional: para darle un toque más gris */
    /* Puedes ajustar el color del texto si lo deseas, por ejemplo: */
    /* color: #999; */
}

.canal-inactivo td {
    color: #999; /* Hace que el texto dentro de la celda sea más gris */
}

/* Si quieres que los badges también se vean atenuados en la fila inactiva */
.canal-inactivo .badge {
    opacity: 0.7;
}

/* Asegura que el ícono de inactivo sea claramente visible */
.canal-inactivo .fa-ban {
    color: var(--bs-secondary); /* O el color que prefieras para un icono de inactivo */
    opacity: 1; /* Para que no se atenúe con la fila */
}

/* Estilos para los elementos de navegación de la barra lateral */
#sidebar .sidebar-nav .sidebar-item .sidebar-link {
    padding-left: 1.5rem; /* Ajusta este valor para más o menos espacio */
    /* Si ya tiene un padding, asegúrate de que este lo sobrescriba o súmale */
}

/* Opcional: Para asegurar que el icono y el texto tengan un buen espaciado entre sí */
#sidebar .sidebar-nav .sidebar-item .sidebar-link i {
    margin-right: 0.75rem; /* Espacio entre el icono y el texto del menú */
}


/* === Ajustes visuales para NUEVOS bloques de sensores (tabs) === */
/* Encabezados oscuros como antes (solo dentro de las pestañas de sensores) */
#sensorTabs ~ .tab-content .card > .card-header.bg-light {
  background-color: #212529 !important;
  color: #fff !important;
}
#sensorTabs ~ .tab-content .card > .card-header.bg-light .text-primary {
  color: #fff !important;
}
#sensorTabs ~ .tab-content .card > .card-header.bg-light .btn.btn-outline-primary {
  color: #fff;
  border-color: rgba(255,255,255,.6);
}
#sensorTabs ~ .tab-content .card > .card-header.bg-light .btn.btn-outline-primary:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}

/* Borde sutil para .card border-0 (igual al resto) */
#sensorTabs ~ .tab-content .card.border-0 {
  border: 1px solid #dee2e6;
  border-radius: .5rem;
}

/* Tablas compactas, alineadas y con hover suave (nuevos bloques usan .table-sm) */
#sensorTabs ~ .tab-content table.table-sm.align-middle th,
#sensorTabs ~ .tab-content table.table-sm.align-middle td {
  padding-top: .35rem;
  padding-bottom: .35rem;
  font-size: .92rem;
}
#sensorTabs ~ .tab-content table.table-sm tbody tr:hover {
  background-color: #f6f7f8;
}

/* Botones de acciones: que hereden el estilo compacto del sistema */
#sensorTabs ~ .tab-content .btn-grafico-live,
#sensorTabs ~ .tab-content .btn-configurar-canal,
#sensorTabs ~ .tab-content .editar-canal,
#sensorTabs ~ .tab-content .editar-canal-pulso,
#sensorTabs ~ .tab-content .editar-canal-sdi12-btn,
#sensorTabs ~ .tab-content .editar-canal-modbus-btn,
#sensorTabs ~ .tab-content .toggle-canal-btn {
  font-size: 0.85rem;
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  transition: all .2s ease-in-out;
}
#sensorTabs ~ .tab-content .btn-grafico-live:hover,
#sensorTabs ~ .tab-content .btn-configurar-canal:hover,
#sensorTabs ~ .tab-content .editar-canal:hover,
#sensorTabs ~ .tab-content .editar-canal-pulso:hover,
#sensorTabs ~ .tab-content .editar-canal-sdi12-btn:hover,
#sensorTabs ~ .tab-content .editar-canal-modbus-btn:hover,
#sensorTabs ~ .tab-content .toggle-canal-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* Badges y estados en filas (coherente con lo anterior) */
#sensorTabs ~ .tab-content .badge.bg-warning.text-dark {
  font-weight: 600;
}
#sensorTabs ~ .tab-content .parpadeo-metalgear {
  /* Ya definida en tu CSS; aquí solo reforzamos la visibilidad en tablas pequeñas */
  letter-spacing: 1.2px;
}

/* Filas inactivas: la lógica ya venía en plantillas,
   unificamos la apariencia para cualquier bloque */
#sensorTabs ~ .tab-content tr.table-secondary.text-muted,
#sensorTabs ~ .tab-content tr.canal-inactivo {
  opacity: .75;
  filter: grayscale(20%);
}

/* Celdas numéricas alineadas a la derecha (valores) */
#sensorTabs ~ .tab-content td.text-end {
  font-variant-numeric: tabular-nums;
}

/* Nombre del canal: evita saltos raros y cortes bruscos */
#sensorTabs ~ .tab-content .canal-nombre {
  display: inline-block;
  max-width: 22ch;             /* ancho sensato en tablas estrechas */
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* “Última lectura” en una sola línea en pantallas angostas */
@media (max-width: 576px) {
  #sensorTabs ~ .tab-content td.text-nowrap {
    white-space: nowrap;
  }
}

/* Icono campana/estado siempre bien alineado al texto del canal */
#sensorTabs ~ .tab-content td .d-flex.align-items-center.gap-2 i.fas {
  line-height: 1;
}

/* Botón “Agregar sensor” del header de MODBUS (nuevo bloque) con contraste en oscuro */
#modbus-tab-pane .card > .card-header .btn.btn-outline-primary {
  color: #fff;
  border-color: rgba(255,255,255,.6);
}
#modbus-tab-pane .card > .card-header .btn.btn-outline-primary:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
/* ====== Overrides v2 para detalles de concentrador (estilo antiguo) ====== */

/* --- Pestañas (Analógicos, Pulso, SDI12, MODBUS, Calculados, ET0) --- */
.nav.nav-tabs.nav-justified {
  border: 0;
  gap: .5rem;
  margin-top: .25rem;
}
.nav.nav-tabs.nav-justified .nav-link {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  background: #f7f8fb;
  color: #0f172a;
  border-radius: .75rem;
  padding: .45rem .85rem;
}
.nav.nav-tabs.nav-justified .nav-link i { opacity: .75; }
.nav.nav-tabs.nav-justified .nav-link.active {
  background: #ffffff;
  color: #0b1324;
  border-color: #0f172a;
  box-shadow: inset 0 0 0 2px rgba(15,23,42,.10), 0 1px 0 rgba(15,23,42,.08);
}
.nav.nav-tabs.nav-justified .nav-link.active i { opacity: 1; }

/* --- Card headers (ligeros, como antes) --- */
.card.shadow-sm .card-header.bg-light {
  background: linear-gradient(180deg,#f9fafb,#f3f4f6);
  border: 1px solid #e5e7eb;
  border-bottom-color: #e5e7eb;
  color: #0f172a;
}
.card.shadow-sm .card-header.bg-secondary {
  background: #4b5563 !important; /* gris “secondary” clásico */
  color: #fff;
  border: 0;
}

/* --- Tablas: zebra + hover + col # angosta --- */
.table thead th:first-child,
.table tbody td:first-child { width: 64px; }
.table-hover tbody tr:hover { background: #f8fafc; }
.table tbody tr + tr { border-top: 1px solid #eef2f7; }

/* Filas inactivas (como “deshabilitado” de antes) */
.table tbody tr.table-secondary.text-muted {
  background: #eef2f7 !important;
  color: #6b7280 !important;
}
.table tbody tr.table-secondary.text-muted td {
  border-color: #e5e7eb !important;
}
.table tbody tr.table-secondary .badge.bg-secondary {
  background: #d1d5db !important; color: #111827 !important;
}

/* Badges de estado (STANDBY / ALERT) un poco más “vivos” */
.badge.bg-warning.text-dark { font-weight: 700; }
.parpadeo-metalgear {
  animation: parpadeoMetal 1.1s ease-in-out infinite;
}
@keyframes parpadeoMetal { 0%,100%{opacity:1} 50%{opacity:.55} }

/* Celdas de datos centradas en tablas internas (como antes) */
.table .text-center { vertical-align: middle; }

/* --- Botones de acción (Gráfico / Editar / Activar/Desactivar) --- */
.btn.btn-sm { border-radius: .55rem; }
.btn-custom { font-weight: 600; } /* por compatibilidad con tus plantillas viejas */

.toggle-canal-btn.btn-outline-danger {
  color: #ef4444; border-color: #ef4444;
}
.toggle-canal-btn.btn-outline-danger:hover {
  background: #fee2e2; color: #b91c1c; border-color: #b91c1c;
}
.toggle-canal-btn.btn-outline-success {
  color: #059669; border-color: #059669;
}
.toggle-canal-btn.btn-outline-success:hover {
  background: #dcfce7; color: #047857; border-color: #047857;
}

/* Botón “Gráfico” y “Configurar/Editar” con borde suave */
.btn-outline-secondary { color:#334155; border-color:#cbd5e1; }
.btn-outline-secondary:hover { background:#eef2f7; color:#0f172a; border-color:#94a3b8; }

/* --- Listado “mapa → canales internos” dentro del popup: filas compactas --- */
.popup-conc table.table.table-sm td {
  padding: .25rem .35rem;
  font-size: .875rem;
}

/* --- Warmup / meta en headers, tipografía pequeña y color tenue --- */
.card-header .small, .card-header small { color:#6b7280; }

/* Mini ajuste de iconos a la izquierda del nombre de canal */
.table td .fa-bell,
.table td .fa-bell-slash,
.table td .fa-ban { font-size: .95rem; }