/* Importar fuente Inter de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* Variables globales */
:root {
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --secondary-color: #64748b;
    --success-color: #22c55e;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --background-color: #f1f5f9;
    --text-color: #1e293b;
    --text-color-secondary: #4b5563;
    --border-color: #e2e8f0;
    --box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    
    /* Dashboard específicas */
    --sidebar-width: 240px;
    --header-height: 64px;
    --sidebar-background: white;
}

/* Reset y estilos base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    color: var(--text-color);
    background-color: var(--background-color);
}

/* Estilos del Login */
/* Logo Management Styles */
.sismo-logo {
    max-height: 60px !important;
    max-width: 200px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
}

.hydro-logo {
    max-height: 65px !important;
    max-width: 65px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
    border-radius: 50% !important;
}

.zona-logo {
    /* Mantener estilos originales */
}

/* Responsive logo adjustments */
@media (max-width: 768px) {
    .sismo-logo {
        max-height: 45px !important;
        max-width: 150px !important;
    }
    
    .hydro-logo {
        max-height: 50px !important;
        max-width: 50px !important;
    }
}

@media (max-width: 480px) {
    .sismo-logo {
        max-height: 35px !important;
        max-width: 120px !important;
    }
    
    .hydro-logo {
        max-height: 40px !important;
        max-width: 40px !important;
    }
}

.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.login-version {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: #6b7280;
    letter-spacing: 0.06em;
    user-select: none;
}

.login-box {
    background: white;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: var(--box-shadow);
    width: 100%;
    max-width: 400px;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo {
    width: 200px;
    height: auto;
    margin-bottom: 1rem;
    object-fit: contain;
}

.login-header h1 {
    font-size: 1.5rem;
    color: var(--text-color);
}

/* Estilos base para formularios */
.form-container {
    font-family: 'Inter', sans-serif;
    padding: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 10;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #1f2937;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* Buttons */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
}

.btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

/* Checkbox personalizado para mantener sesión */
.checkbox-container {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    margin-bottom: 10px;
}

.checkbox-container input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    cursor: pointer;
}

.checkmark {
    position: relative;
    height: 18px;
    width: 18px;
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 3px;
    margin-right: 8px;
    transition: all 0.3s ease;
}

.checkbox-container:hover .checkmark {
    border-color: #007bff;
}

.checkbox-container input:checked ~ .checkmark {
    background-color: #007bff;
    border-color: #007bff;
}

.checkbox-container input:checked ~ .checkmark:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background-color: white;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.btn-secondary:hover {
    background-color: var(--background-color);
    border-color: var(--secondary-color);
}

.btn-secondary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.2);
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background-color: var(--danger-color);
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.btn-danger:hover {
    background-color: #dc2626;
}

.btn-danger:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}

.btn-danger:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background-color: #16a34a;
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.btn-success:hover {
    background-color: #15803d;
}

.btn-success:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
}

.btn-success:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Layout Base */
.dashboard-layout {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-background);
    border-right: 1px solid var(--border-color);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    z-index: 1000;
    left: 0;
    top: 0;
}

.sidebar-header {
    text-align: center;
    margin-bottom: 0.8rem;
    padding-bottom: 0.25rem;
    border-bottom: none;
}

.sidebar-logo {
    width: 160px;
    height: auto;
    margin-bottom: 0.35rem;
    object-fit: contain;
}

.client-brand-logo {
    display: block;
    width: 130px;
    height: auto;
    margin: 0.1rem auto 0.35rem;
    object-fit: contain;
}

.sidebar-header h1 {
    font-size: 1.15rem;
    color: var(--text-color);
}

.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 0.45rem 0.8rem;
    color: var(--text-color);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: all 0.15s ease-in-out;
    font-size: 0.875rem;
}

.nav-item:hover {
    background-color: var(--background-color);
}

.nav-item.active {
    background-color: var(--primary-color);
    color: white;
}

.nav-section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0.55rem 0.15rem 0.55rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 0.03em;
    text-transform: none;
    line-height: 1.1;
    user-select: none;
    pointer-events: none;
}

.nav-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #dbe2ea;
    opacity: 0.9;
}

.nav-icon {
    margin-right: 0.55rem;
    font-size: 1rem;
}
.nav-icon.material-symbols-outlined {
    font-size: 20px;
    vertical-align: -5px;
    line-height: 1;
    font-variation-settings: 'opsz' 24, 'wght' 400, 'FILL' 0, 'GRAD' 0;
}
.nav-item.active .nav-icon.material-symbols-outlined {
    font-variation-settings: 'opsz' 24, 'wght' 500, 'FILL' 1, 'GRAD' 0;
}
/* Material Symbols dentro de botones (.icon) y empty states (.empty-icon) */
.icon.material-symbols-outlined,
.material-symbols-outlined.icon {
    font-size: 16px;
    vertical-align: -3px;
    line-height: 1;
    font-variation-settings: 'opsz' 20, 'wght' 500, 'FILL' 0, 'GRAD' 0;
}
.empty-icon.material-symbols-outlined,
.material-symbols-outlined.empty-icon {
    font-size: 48px;
    line-height: 1;
    display: block;
    font-variation-settings: 'opsz' 48, 'wght' 400, 'FILL' 0, 'GRAD' 0;
}
/* Material Symbols dentro de avatares de header de modal (badge circular) */
.new-sensor-icon.material-symbols-outlined,
.new-node-icon.material-symbols-outlined,
.new-area-icon.material-symbols-outlined,
.new-client-icon.material-symbols-outlined,
.new-contact-icon.material-symbols-outlined,
.summary-icon-compact.material-symbols-outlined {
    font-size: 1.1rem;
    line-height: 1;
    font-variation-settings: 'opsz' 24, 'wght' 500, 'FILL' 1, 'GRAD' 0;
}
.alert-icon.material-symbols-outlined,
.warning-icon.material-symbols-outlined {
    font-size: 1.1em;
    line-height: 1;
    vertical-align: middle;
    font-variation-settings: 'opsz' 24, 'wght' 500, 'FILL' 0, 'GRAD' 0;
}
.node-icon.material-symbols-outlined {
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    font-variation-settings: 'opsz' 24, 'wght' 500, 'FILL' 0, 'GRAD' 0;
}
/* Pantalla "Próximamente" — para módulos en desarrollo */
.coming-soon-state {
    padding: 4rem 1.5rem;
    text-align: center;
    color: var(--text-muted, #6b7280);
}
.coming-soon-icon {
    font-size: 96px !important;
    color: #9ca3af;
    display: block !important;
    margin: 0 auto 1rem;
    line-height: 1;
    font-variation-settings: 'opsz' 48, 'wght' 300, 'FILL' 1, 'GRAD' 0;
}
.coming-soon-state h3 {
    color: var(--text-color, #1f2937);
    font-size: 1.5rem;
    margin: 0 0 0.5rem;
}
.coming-soon-state p {
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.5;
}
html[data-theme="dark"] .coming-soon-state h3 { color: #e2e8f0; }
html[data-theme="dark"] .coming-soon-state { color: #94a3b8; }
html[data-theme="dark"] .coming-soon-icon { color: #64748b; }
/* Stat cards (Alarmas, Valores en vivo, Centro Control) — mantener flex + tamaño */
.stat-icon.material-symbols-outlined {
    display: flex;
    font-size: 1.4rem;
    font-variation-settings: 'opsz' 24, 'wght' 500, 'FILL' 1, 'GRAD' 0;
}

/* Separador visual en el menú de navegación */
.nav-separator {
    height: 1px;
    background: linear-gradient(to right, transparent, #94a3b8, transparent);
    margin: 0.75rem 0.5rem;
    opacity: 0.95;
}

.sidebar-footer {
    margin-top: auto;
    padding: 0.75rem 0.5rem 0.5rem 0.5rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.sidebar-version {
    margin-top: 0.5rem;
    font-size: 0.65rem;
    color: #6b7280;
    opacity: 1;
    letter-spacing: 0.04em;
    user-select: none;
}

.user-info {
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background-color: #f8fafc;
    border-radius: 0.375rem;
    border: 1px solid #e2e8f0;
}

.user-email {
    display: block;
    font-size: 0.8rem;
    color: var(--text-color);
    font-weight: 500;
    margin-bottom: 0.15rem;
}

.user-role {
    display: block;
    font-size: 0.7rem;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.65rem 0.85rem;
    background-color: #fef2f2;
    color: var(--danger-color);
    border: 1px solid #fecaca;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    gap: 0.5rem;
}

.btn-logout:hover {
    background-color: #fee2e2;
    border-color: var(--danger-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
}

.btn-logout .icon {
    font-size: 0.875rem;
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 1.25rem 2rem 2rem;
    position: relative;
    z-index: 1;
    max-width: calc(100vw - var(--sidebar-width));
    overflow-x: hidden;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    gap: 2rem;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.stat-card {
    background: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: var(--box-shadow);
}

.stat-header h3 {
    font-size: 1rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color);
}

.stat-footer {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--secondary-color);
}

/* Charts Grid */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.chart-card {
    background: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: var(--box-shadow);
}

.chart-card h3 {
    font-size: 1rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.chart-container {
    height: 300px;
}

/* Utilities */
.hidden {
    display: none !important;
}

/* Section Container */
.section-container {
    margin-bottom: 2rem;
    max-width: 100%;
    overflow-x: hidden;
}

.section-container.hidden {
    display: none;
}

.section-content {
    margin-top: 1.5rem;
}

/* Content Header - Responsive + Alineado */
.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0.65rem 0.85rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: var(--box-shadow);
    max-width: calc(100vw - var(--sidebar-width) - 4rem);
}

.header-title {
    flex: 1;
}

.header-title h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.header-title p {
    margin: 0.2rem 0 0;
    color: var(--text-color-secondary);
    font-size: 0.85rem;
}

.header-actions {
    display: flex;
    gap: 1rem;
}

.header-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    height: 2.5rem;
    white-space: nowrap;
}

.header-actions .btn-primary .icon {
    font-size: 1rem;
}

/* Badge de Mensajes del Sistema */
.system-messages-badge-container {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}

.system-messages-badge-container:hover {
    background-color: #f3f4f6;
}

.system-messages-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.system-messages-badge-dot {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    background-color: #dc2626;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
}

/* Responsive Layout - Escala por viewport
 * Optimización para monitores pequeños (17"): espaciado compacto
 * Escalado proporcional según tamaño de pantalla para mejor UX
 * Pantallas ≤1366px: compacto | 1367-1680px: intermedio | >1680px: amplio
 * Incluye: main-content padding, content-header, filters-bar y títulos
 */
@media (min-width: 1681px) {
    /* Pantallas grandes: más espaciado */
    .main-content {
        padding: 1.75rem 2rem 2rem;
    }
    
    .content-header {
        margin-bottom: 1.25rem;
        padding: 0.9rem 1.1rem;
    }
    
    .filters-bar {
        margin-bottom: 0.85rem;
        padding: 0.65rem 0.9rem;
    }
    
    .filters-content {
        gap: 1.1rem;
    }
    
    .header-title h2 {
        font-size: 1.65rem;
    }
    
    .header-title p {
        font-size: 0.92rem;
        margin-top: 0.35rem;
    }
}

@media (min-width: 1367px) and (max-width: 1680px) {
    /* Pantallas medianas: espaciado intermedio */
    .main-content {
        padding: 1.5rem 2rem 2rem;
    }
    
    .content-header {
        margin-bottom: 1rem;
        padding: 0.75rem 1rem;
    }
    
    .filters-bar {
        margin-bottom: 0.7rem;
        padding: 0.6rem 0.8rem;
    }
    
    .filters-content {
        gap: 0.9rem;
    }
    
    .header-title h2 {
        font-size: 1.5rem;
    }
    
    .header-title p {
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
}

@media (max-width: 1366px) {
    /* Pantallas pequeñas como 17": ultra agresivo para eliminar scroll */
    body {
        overflow-y: auto; /* Permitir scroll pero optimizado */
    }
    
    .main-content {
        padding: 2rem 1.5rem 0.2rem; /* Reducido padding bottom para evitar scroll */
        overflow-y: hidden; /* Ocultar scroll en main-content */
    }
    
    .content-header {
        margin-bottom: 0.6rem; /* Reducido espaciado para evitar scroll */
        padding: 0.6rem 0.75rem; /* Padding equilibrado */
    }
    
    .filters-bar {
        margin-bottom: 0.6rem; /* Reducido espacio entre filtros y tabla */
        padding: 0.25rem 0.65rem; /* Ultra reducido */
    }
    
    .filters-content {
        gap: 0.4rem; /* Ultra reducido */
    }
    
    .header-title h2 {
        font-size: 1.4rem; /* Proporcional al aumento de tabla */
        margin-bottom: 0.05rem; /* Ultra reducido */
    }
    
    .header-title p {
        font-size: 0.85rem; /* Proporcional al aumento de tabla */
        margin-top: 0.02rem; /* Ultra reducido */
    }
}

/* Pantallas muy pequeñas: altura menor a 768px */
@media (max-width: 1366px) and (max-height: 768px) {
    .main-content {
        padding: 1.5rem 1.5rem 0rem; /* Eliminado padding bottom para evitar scroll */
    }
    
    .content-header {
        margin-bottom: 0.6rem; /* Reducido espaciado para evitar scroll */
        padding: 0.5rem 0.75rem; /* Padding equilibrado */
    }
    
    .filters-bar {
        margin-bottom: 0.5rem; /* Reducido espacio entre filtros y tabla */
        padding: 0.15rem 0.65rem; /* Extremadamente reducido */
    }
    
    .header-title h2 {
        font-size: 1.2rem; /* Proporcional para pantallas muy pequeñas */
        margin-bottom: 0.02rem; /* Extremadamente reducido */
    }
    
    .header-title p {
        font-size: 0.8rem; /* Proporcional para pantallas muy pequeñas */
        margin-top: 0.01rem; /* Extremadamente reducido */
    }
    
    .data-table th,
    .data-table td {
        padding: 0.1rem 0.6rem; /* Extremadamente reducido */
        font-size: 0.7rem; /* Muy pequeño */
    }
    /* ELIMINADA: Definición conflictiva de pagination-container */
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
        padding: 1.3rem 1rem 2rem; /* Más aire visual para pantallas móviles */
    }
    
    /* Alineación móvil - sin sidebar */
    .content-header,
    .filters-bar,
    .table-container,
    .pagination-container {
        max-width: calc(100vw - 2rem);
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-card {
        margin-bottom: 1rem;
    }

    .charts-grid {
        grid-template-columns: 1fr;
    }

    .chart-card {
        margin-bottom: 1rem;
    }
}

/* Error Message */
.error-message {
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: 0.375rem;
    color: var(--danger-color);
    font-size: 0.875rem;
}

/* Table Styles - Alineado con Headers/Filtros/Paginación
 * ✅ ALINEACIÓN VISUAL CONSISTENTE:
 * - content-header, filters-bar, table-container y pagination-container
 * - Todos comparten: max-width calc(100vw - var(--sidebar-width) - 4rem)
 * - Elimina sobresaliente del lado derecho
 * - Bordes y anchos visualmente alineados
 */
.table-container {
    width: 100%;
    overflow-x: auto;
    background: white;
    border-radius: 0.5rem;
    box-shadow: var(--box-shadow);
    position: relative;
    z-index: 1;
    max-width: calc(100vw - var(--sidebar-width) - 4rem);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* 🔧 ESPECÍFICO: Tabla de clientes ocupa todo el ancho disponible */
.clients-table .data-table {
    width: 100%;
    table-layout: fixed;
}

.clients-table .table-container {
    width: 100%;
    overflow-x: visible; /* Sin scroll horizontal */
}

/* 🔧 ESPECÍFICO: Tabla de áreas ocupa todo el ancho disponible */
.areas-table .data-table {
    width: 100%;
    table-layout: fixed;
}

.areas-table .table-container {
    width: 100%;
    overflow-x: visible; /* Sin scroll horizontal */
}

.data-table th,
.data-table td {
    padding: 0.375rem 1.125rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.data-table td {
    color: var(--text-color);
    font-size: 0.875rem;
    white-space: nowrap;
    line-height: 1.25;
    overflow: visible;
    text-overflow: unset;
}

/* Filas ultra compactas para monitores pequeños como 17" */
@media (max-width: 1366px) {
    .data-table th,
    .data-table td {
        padding: 0.15rem 0.8rem; /* Ultra reducido */
        font-size: 0.875rem; /* 14px para celdas de datos */
    }
    
    .data-table td {
        line-height: 1.1; /* Line height ultra compacto */
        font-size: 0.875rem; /* 14px para celdas de datos */
    }
    
    .data-table th {
        line-height: 1.05; /* Ultra compacto */
        font-size: 0.8rem; /* Proporcional a las celdas */
    }
    
    /* Botones de acción ultra pequeños */
    .data-table .action-btn,
    .data-table .btn-icon {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.65rem;
    }
    
    /* Status badges ultra compactos */
    .status-badge {
        padding: 1px 3px;
        font-size: 0.65rem;
    }
}

.data-table th {
    font-weight: 600;
    color: var(--text-color);
    background-color: #f8fafc;
    font-size: 0.8rem;
    position: sticky;
    top: 0;
    z-index: 10;
    line-height: 1.2;
}

.data-table tbody tr:hover {
    background-color: #f8fafc;
}

/* ==========================================
 * 📊 SISTEMA DE TABLAS MODULAR Y ESCALABLE
 * ==========================================
 * Reglas generales + específicas por módulo
 * Escalado proporcional por tamaño de monitor
 */

/* 🔧 REGLAS GENERALES - Aplican a TODAS las tablas */
.data-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    /* SIN min-width fijo - cada módulo controla sus necesidades */
}

.data-table th,
.data-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.375rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

/* 📊 MÓDULO: CLIENTES */
/* Columnas: ID | Nombre | Descripción | Estado | Último Cambio | Razón | Acciones */
.clients-table .data-table th:nth-child(1),
.clients-table .data-table td:nth-child(1) { width: 5%; }   /* ID */

.clients-table .data-table th:nth-child(2),
.clients-table .data-table td:nth-child(2) { width: 18%; }  /* Nombre */

.clients-table .data-table th:nth-child(3),
.clients-table .data-table td:nth-child(3) { width: 32%; }  /* Descripción - MÁS espacio */

.clients-table .data-table th:nth-child(4),
.clients-table .data-table td:nth-child(4) { width: 8%; }   /* Estado */

.clients-table .data-table th:nth-child(5),
.clients-table .data-table td:nth-child(5) { width: 15%; }  /* Último Cambio */

.clients-table .data-table th:nth-child(6),
.clients-table .data-table td:nth-child(6) { width: 22%; }  /* Razón del Cambio */

.clients-table .data-table th:nth-child(7),
.clients-table .data-table td:nth-child(7) { 
    width: 180px; /* ANCHO FIJO AUMENTADO para botones más grandes */
    min-width: 180px; 
    max-width: 180px;
    text-align: center;
}  /* Acciones - ANCHO FIJO */

/* 🔧 ESPECÍFICO: Contenedor de acciones en tabla de clientes */
.clients-table .action-buttons {
    gap: 0.375rem; /* Más espacio entre botones */
    min-width: 160px; /* Espacio ajustado para botones de 36px */
    justify-content: center;
    flex-wrap: nowrap; /* Evitar que los botones se salten de línea */
}

/* Reglas específicas movidas después de las generales */

/* 📊 MÓDULO: ÁREAS */
/* Columnas: ID | Área | Descripción | Cliente | Estado Cliente | Acciones */
.areas-table .data-table th:nth-child(1),
.areas-table .data-table td:nth-child(1) { width: 5%; }   /* ID */

.areas-table .data-table th:nth-child(2),
.areas-table .data-table td:nth-child(2) { width: 23%; }  /* Área - MÁS espacio */

.areas-table .data-table th:nth-child(3),
.areas-table .data-table td:nth-child(3) { width: 38%; }  /* Descripción - MÁS espacio */

.areas-table .data-table th:nth-child(4),
.areas-table .data-table td:nth-child(4) { width: 22%; }  /* Cliente - MÁS espacio */

.areas-table .data-table th:nth-child(5),
.areas-table .data-table td:nth-child(5) { width: 12%; }  /* Estado Cliente - REDUCIDO */

.areas-table .data-table th:nth-child(6),
.areas-table .data-table td:nth-child(6) { 
    width: 180px; /* ANCHO FIJO para acciones */
    min-width: 180px; 
    max-width: 180px;
    text-align: center;
}  /* Acciones - ANCHO FIJO */

/* 🔧 ESPECÍFICO: Contenedor de acciones en tabla de áreas */
.areas-table .action-buttons {
    gap: 0.375rem; /* Más espacio entre botones */
    min-width: 160px; /* Espacio ajustado para botones de 32px */
    justify-content: center;
    flex-wrap: nowrap; /* Evitar que los botones se salten de línea */
}

/* 📊 MÓDULO: NODOS */
/* Columnas: ID | Nombre | Ubicación | Chip ID | Token | Tipo | Estado | HB | Área | Cliente | Acciones */
.nodes-table .data-table {
    width: 100%;
    table-layout: fixed;
}

.nodes-table .table-container {
    overflow-x: visible; /* Sin scroll horizontal */
}

/* Distribución por posición (nth-child) - Token y Tipo estrechas, Estado y Cliente amplias */
.nodes-table .data-table th:nth-child(1),
.nodes-table .data-table td:nth-child(1) { width: 4%; min-width: 36px; }   /* ID */

.nodes-table .data-table th:nth-child(2),
.nodes-table .data-table td:nth-child(2) { width: 15%; min-width: 100px; }  /* Nombre */

.nodes-table .data-table th:nth-child(3),
.nodes-table .data-table td:nth-child(3) { width: 11%; min-width: 70px; }  /* Ubicación */

.nodes-table .data-table th:nth-child(4),
.nodes-table .data-table td:nth-child(4) { width: 8%; min-width: 60px; }  /* Chip ID */

.nodes-table .data-table th:nth-child(5),
.nodes-table .data-table td:nth-child(5) { width: 7%; min-width: 88px; }  /* Token - sin puntos suspensivos */

.nodes-table .data-table th:nth-child(6),
.nodes-table .data-table td:nth-child(6) { width: 7%; min-width: 92px; }  /* Tipo - badge completo sin truncar */

.nodes-table .data-table th:nth-child(7),
.nodes-table .data-table td:nth-child(7) { width: 9%; min-width: 88px; }  /* Estado - amplio */

.nodes-table .data-table th:nth-child(8),
.nodes-table .data-table td:nth-child(8) { 
    width: 70px !important; 
    min-width: 70px !important;
    max-width: 70px !important;
}  /* HB */

.nodes-table .data-table th:nth-child(9),
.nodes-table .data-table td:nth-child(9) { width: 10%; min-width: 75px; }  /* Área */

.nodes-table .data-table th:nth-child(10),
.nodes-table .data-table td:nth-child(10) { width: 14%; min-width: 110px; }  /* Cliente - amplio */

.nodes-table .data-table th:nth-child(11),
.nodes-table .data-table td:nth-child(11) { 
    width: 100px; 
    min-width: 100px; 
    max-width: 100px;
    text-align: center;
}  /* Acciones - reducido */

/* 🔧 ESPECÍFICO: Contenedor de acciones en tabla de nodos */
.nodes-table .action-buttons {
    gap: 0.25rem;
    min-width: 90px;
    justify-content: center;
    flex-wrap: nowrap; /* Evitar que los botones se salten de línea */
}

/* 📊 MÓDULO: SENSORES */
/* Columnas: ID | Sensor | Tipo | Unidad | Operación | Código | Ventana | Intervalo | Nodo | Área | Cliente | Estado | Acciones */
/* NOTA: Tabla compleja con 13 columnas - requiere scroll horizontal controlado */
.sensors-table .data-table {
    min-width: 1400px; /* Ancho mínimo para mostrar todas las columnas */
    width: 100%;
    table-layout: fixed;
}

.sensors-table .table-container {
    width: 100%;
    overflow-x: auto; /* Permite scroll horizontal para tabla compleja */
}

/* Columnas: ID | Sensor | Tipo | Und. | Oper. | C. Envío | Vent. | Interv. | Estado | Nodo | Área | Cliente | Acciones */
.sensors-table .data-table th {
    white-space: nowrap;
    overflow: visible;
}

.sensors-table .data-table th:nth-child(1),
.sensors-table .data-table td:nth-child(1) { width: 40px; min-width: 40px; text-align: center; }    /* ID */

.sensors-table .data-table th:nth-child(2),
.sensors-table .data-table td:nth-child(2) { width: 155px; min-width: 155px; }  /* Sensor */

.sensors-table .data-table th:nth-child(3),
.sensors-table .data-table td:nth-child(3) { width: 50px; min-width: 50px; }    /* Tipo */

.sensors-table .data-table th:nth-child(4),
.sensors-table .data-table td:nth-child(4) { width: 40px; min-width: 40px; text-align: center; }    /* Und. */

.sensors-table .data-table th:nth-child(5),
.sensors-table .data-table td:nth-child(5) { width: 55px; min-width: 55px; }    /* Oper. */

.sensors-table .data-table th:nth-child(6),
.sensors-table .data-table td:nth-child(6) { width: 60px; min-width: 60px; }    /* C. Envío */

.sensors-table .data-table th:nth-child(7),
.sensors-table .data-table td:nth-child(7) { width: 45px; min-width: 45px; text-align: center; }    /* Vent. */

.sensors-table .data-table th:nth-child(8),
.sensors-table .data-table td:nth-child(8) { width: 50px; min-width: 50px; text-align: center; }    /* Interv. */

.sensors-table .data-table th:nth-child(9),
.sensors-table .data-table td:nth-child(9) { width: 85px; min-width: 85px; text-align: center; }    /* Estado */

.sensors-table .data-table th:nth-child(10),
.sensors-table .data-table td:nth-child(10) { width: 125px; min-width: 125px; } /* Nodo */

.sensors-table .data-table th:nth-child(11),
.sensors-table .data-table td:nth-child(11) { width: 100px; min-width: 100px; } /* Área */

.sensors-table .data-table th:nth-child(12),
.sensors-table .data-table td:nth-child(12) { width: 80px; min-width: 80px; }   /* Cliente */

.sensors-table .data-table th:nth-child(13),
.sensors-table .data-table td:nth-child(13) { width: 120px; min-width: 120px; text-align: center; } /* Acciones */

/* 🔧 ESPECÍFICO: Contenedor de acciones en tabla de sensores */
.sensors-table .action-buttons {
    gap: 0.375rem; /* Más espacio entre botones */
    min-width: 110px; /* REDUCIDO - ajustado para botones de 22px */
    justify-content: center;
    flex-wrap: nowrap; /* Evitar que los botones se salten de línea */
}

/* 📊 MÓDULO: ACTUADORES - Anchos por tipo de dato */
/* Columnas: ID | Actuador | Tipo | C. Envío | Nodo | Área | Cliente | Estado | Acciones */
.actuators-table .data-table {
    table-layout: fixed;
    width: 100%;
}

.actuators-table .data-table th { white-space: nowrap; overflow: visible; }

.actuators-table .data-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.actuators-table .data-table th:nth-child(1),
.actuators-table .data-table td:nth-child(1) { width: 44px; min-width: 44px; text-align: center; }   /* ID */

.actuators-table .data-table th:nth-child(2),
.actuators-table .data-table td:nth-child(2) { width: 140px; min-width: 140px; }  /* Actuador */

.actuators-table .data-table th:nth-child(3),
.actuators-table .data-table td:nth-child(3) { width: 130px; min-width: 130px; }  /* Tipo */

.actuators-table .data-table th:nth-child(4),
.actuators-table .data-table td:nth-child(4) { width: 95px; min-width: 95px; }   /* C. Envío */

.actuators-table .data-table th:nth-child(5),
.actuators-table .data-table td:nth-child(5) { width: 180px; min-width: 180px; }  /* Nodo (nodo_nombre) */

.actuators-table .data-table th:nth-child(6),
.actuators-table .data-table td:nth-child(6) { width: 105px; min-width: 105px; }  /* Área */

.actuators-table .data-table th:nth-child(7),
.actuators-table .data-table td:nth-child(7) { width: 95px; min-width: 95px; }   /* Cliente */

.actuators-table .data-table th:nth-child(8),
.actuators-table .data-table td:nth-child(8) { width: 95px; min-width: 95px; text-align: center; }  /* Estado */

.actuators-table .data-table th:nth-child(9),
.actuators-table .data-table td:nth-child(9) { width: 120px; min-width: 120px; text-align: center; } /* Acciones */

.actuators-table .action-buttons {
    gap: 0.25rem;
    min-width: 110px;
    justify-content: center;
    flex-wrap: nowrap;
}

/* ========================================
   TABLA UMBRALES ANALÓGICOS
   Columnas: ID | Sensor | Min | Max | Hister. | Ret (s) | Arr | Reten. | Criticidad | Estado | Notif. | Nodo | Área | Cliente | Acciones
   ======================================== */
#table-analog-thresholds {
    width: 100%;
    table-layout: fixed;
}

#table-analog-thresholds th {
    white-space: nowrap;
    overflow: visible;
}

#table-analog-thresholds td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#table-analog-thresholds th:nth-child(1),
#table-analog-thresholds td:nth-child(1) { width: 35px; text-align: center; }    /* ID */

#table-analog-thresholds th:nth-child(2),
#table-analog-thresholds td:nth-child(2) { width: 135px; }   /* Sensor */

#table-analog-thresholds th:nth-child(3),
#table-analog-thresholds td:nth-child(3) { width: 50px; text-align: right; }     /* Min */

#table-analog-thresholds th:nth-child(4),
#table-analog-thresholds td:nth-child(4) { width: 50px; text-align: right; }     /* Max */

#table-analog-thresholds th:nth-child(5),
#table-analog-thresholds td:nth-child(5) { width: 50px; text-align: right; }     /* Hister. */

#table-analog-thresholds th:nth-child(6),
#table-analog-thresholds td:nth-child(6) { width: 50px; text-align: center; }    /* Ret (s) */

#table-analog-thresholds th:nth-child(7),
#table-analog-thresholds td:nth-child(7) { width: 48px; text-align: center; }    /* Arr (badges: Ok, Off, Pend., —) */

#table-analog-thresholds th:nth-child(8),
#table-analog-thresholds td:nth-child(8) { width: 48px; text-align: center; }    /* Reten. */

#table-analog-thresholds th:nth-child(9),
#table-analog-thresholds td:nth-child(9) { width: 72px; text-align: center; }    /* Criticidad */

#table-analog-thresholds th:nth-child(10),
#table-analog-thresholds td:nth-child(10) { width: 68px; text-align: center; }   /* Estado */

#table-analog-thresholds th:nth-child(11),
#table-analog-thresholds td:nth-child(11) { width: 50px; text-align: center; }   /* Notif. */

#table-analog-thresholds th:nth-child(12),
#table-analog-thresholds td:nth-child(12) { width: 115px; }  /* Nodo */

#table-analog-thresholds th:nth-child(13),
#table-analog-thresholds td:nth-child(13) { width: 100px; }  /* Área */

#table-analog-thresholds th:nth-child(14),
#table-analog-thresholds td:nth-child(14) { width: 85px; }   /* Cliente */

#table-analog-thresholds th:nth-child(15),
#table-analog-thresholds td:nth-child(15) { width: 95px; text-align: center; }   /* Acciones */

#table-analog-thresholds .action-buttons {
    gap: 0.25rem;
    justify-content: center;
    flex-wrap: nowrap;
}

/* Truncar texto largo en columnas de nombre */
#table-analog-thresholds td:nth-child(2),
#table-analog-thresholds td:nth-child(11),
#table-analog-thresholds td:nth-child(12),
#table-analog-thresholds td:nth-child(13) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================
   TABLA UMBRALES DIGITALES
   Columnas: ID | Sensor | Esperado | Ret (seg) | Reten. | Criticidad | Estado | Notif. | Nodo | Área | Cliente | Acciones
   ======================================== */
#table-digital-thresholds {
    width: 100%;
    table-layout: fixed;
}

#table-digital-thresholds th {
    white-space: nowrap;
    overflow: visible;
}

#table-digital-thresholds th:nth-child(1),
#table-digital-thresholds td:nth-child(1) { width: 35px; text-align: center; }    /* ID */

#table-digital-thresholds th:nth-child(2),
#table-digital-thresholds td:nth-child(2) { width: 120px; }   /* Sensor */

#table-digital-thresholds th:nth-child(3),
#table-digital-thresholds td:nth-child(3) { width: 70px; text-align: center; }    /* Esperado */

#table-digital-thresholds th:nth-child(4),
#table-digital-thresholds td:nth-child(4) { width: 75px; text-align: center; }    /* Ret (seg) */

#table-digital-thresholds th:nth-child(5),
#table-digital-thresholds td:nth-child(5) { width: 55px; text-align: center; }    /* Reten. */

#table-digital-thresholds th:nth-child(6),
#table-digital-thresholds td:nth-child(6) { width: 80px; text-align: center; }    /* Criticidad */

#table-digital-thresholds th:nth-child(7),
#table-digital-thresholds td:nth-child(7) { width: 70px; text-align: center; }    /* Estado */

#table-digital-thresholds th:nth-child(8),
#table-digital-thresholds td:nth-child(8) { width: 50px; text-align: center; }    /* Notif. */

#table-digital-thresholds th:nth-child(9),
#table-digital-thresholds td:nth-child(9) { width: 100px; }   /* Nodo */

#table-digital-thresholds th:nth-child(10),
#table-digital-thresholds td:nth-child(10) { width: 90px; }   /* Área */

#table-digital-thresholds th:nth-child(11),
#table-digital-thresholds td:nth-child(11) { width: 80px; }   /* Cliente */

#table-digital-thresholds th:nth-child(12),
#table-digital-thresholds td:nth-child(12) { width: 95px; text-align: center; }   /* Acciones */

#table-digital-thresholds .action-buttons {
    gap: 0.25rem;
    justify-content: center;
    flex-wrap: nowrap;
}

/* Truncar texto largo en columnas de nombre */
#table-digital-thresholds td:nth-child(2),
#table-digital-thresholds td:nth-child(9),
#table-digital-thresholds td:nth-child(10),
#table-digital-thresholds td:nth-child(11) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================
   BADGES SÍ/NO PARA COLUMNAS BOOLEANAS
   Usados en Ret., Notif., etc.
   ======================================== */
.badge-yes {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.25rem;
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.badge-no {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.25rem;
    background-color: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

/* 📱 MEDIA QUERIES PROPORCIONALES - Escalado basado en monitor */
/* Monitor Base: 17" (1366x768) - Referencia base */
/* Monitor Grande: 22"+ (1920x1080+) - Escalado proporcional */

/* Monitores pequeños ≤ 1366px (17") */
@media (max-width: 1366px) {
    .data-table th,
    .data-table td {
        padding: 0.25rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* Monitores medianos 1367px-1919px */
@media (min-width: 1367px) and (max-width: 1919px) {
    .data-table th,
    .data-table td {
        padding: 0.3rem 1rem; /* REDUCIDO: Menos padding vertical */
        font-size: 0.9rem;
    }
}

/* Monitores grandes ≥ 1920px (22"+) */
@media (min-width: 1920px) {
    .data-table th,
    .data-table td {
        padding: 0.35rem 1.25rem; /* REDUCIDO: Padding vertical conservador */
        font-size: 1rem;
    }
}

/* Action Buttons - Estilo unificado y mejorado v3.0 - Con colores base y especificidad */
.action-buttons {
    display: flex;
    gap: 0.25rem; /* Reducido para filas más compactas */
    align-items: center;
    justify-content: center;
}

/* Estilos base para todos los botones de acción */
.data-table .action-btn,
.data-table .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px !important; /* Más compacto para filas reducidas */
    height: 28px !important; /* Más compacto para filas reducidas */
    padding: 0;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem; /* Tamaño de icono reducido */
    text-decoration: none;
    border: 1px solid;
}

/* Colores base por tipo de acción */
.data-table .action-btn.view,
.data-table .btn-icon.view,
.data-table .action-btn.view-sensor,
.data-table .btn-icon.view-sensor,
.data-table .btn-icon.view-actuator {
    background: #f0f9ff;
    border-color: #bae6fd;
    color: #0284c7;
}

.data-table .action-btn.edit,
.data-table .btn-icon.edit,
.data-table .action-btn.edit-sensor,
.data-table .btn-icon.edit-sensor,
.data-table .btn-icon.edit-actuator {
    background: #fffbeb;
    border-color: #fed7aa;
    color: #ea580c;
}

.data-table .action-btn.status,
.data-table .btn-icon.status,
.data-table .action-btn.status-sensor,
.data-table .btn-icon.status-sensor,
.data-table .btn-icon.command-actuator {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #16a34a;
}

.data-table .action-btn.delete,
.data-table .btn-icon.delete,
.data-table .action-btn.delete-sensor,
.data-table .btn-icon.delete-sensor,
.data-table .btn-icon.delete-actuator {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

/* Catálogo: Configuración / Ajustes — gris neutro (minimalista). Usar .btn-icon.config o .action-btn.config en otras UIs */
.data-table .action-btn.config,
.data-table .btn-icon.config,
.data-table .btn-icon.configure-actuator {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #64748b;
}

/* Efectos hover intensificados */
.data-table .action-btn:hover,
.data-table .btn-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.data-table .action-btn.view:hover,
.data-table .btn-icon.view:hover,
.data-table .action-btn.view-sensor:hover,
.data-table .btn-icon.view-sensor:hover,
.data-table .btn-icon.view-actuator:hover {
    background-color: #dbeafe;
    border-color: #60a5fa;
    color: #1d4ed8;
}

.data-table .action-btn.edit:hover,
.data-table .btn-icon.edit:hover,
.data-table .action-btn.edit-sensor:hover,
.data-table .btn-icon.edit-sensor:hover,
.data-table .btn-icon.edit-actuator:hover {
    background-color: #fef3c7;
    border-color: #f59e0b;
    color: #d97706;
}

.data-table .action-btn.status:hover,
.data-table .btn-icon.status:hover,
.data-table .action-btn.status-sensor:hover,
.data-table .btn-icon.status-sensor:hover,
.data-table .btn-icon.command-actuator:hover {
    background-color: #ecfdf5;
    border-color: #4ade80;
    color: #15803d;
}

.data-table .action-btn.delete:hover,
.data-table .btn-icon.delete:hover,
.data-table .action-btn.delete-sensor:hover,
.data-table .btn-icon.delete-sensor:hover,
.data-table .btn-icon.delete-actuator:hover {
    background-color: #fee2e2;
    border-color: #f87171;
    color: #b91c1c;
}

.data-table .action-btn.config:hover,
.data-table .btn-icon.config:hover,
.data-table .btn-icon.configure-actuator:hover {
    background-color: #f1f5f9;
    border-color: #94a3b8;
    color: #475569;
}

/* Reglas movidas al final después de todos los media queries */

/* Responsive styles para botones de acción */
@media (max-width: 640px) {
    .action-buttons {
        gap: 0.25rem;
    }
    
    .data-table .action-btn,
    .data-table .btn-icon {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.7rem;
    }
    
    .data-table td {
        padding: 0.3rem 0.8rem;
    }
    
    .data-table th {
        padding: 0.3rem 0.8rem;
    }
    
    .table-container {
        border-radius: 0.375rem;
    }
    
    /* .data-table {
        min-width: 1300px;
    } */
    /* ↑ COMENTADO: Esta regla causaba scroll horizontal en tabla de clientes */
    
    /* 📊 MÓDULO: SENSORES - Ajustes para pantallas pequeñas */
    .sensors-table .data-table th:nth-child(2),
    .sensors-table .data-table td:nth-child(2) { width: 140px; min-width: 140px; }  /* Sensor: un poco más compacto */
    
    .sensors-table .data-table th:nth-child(10),
    .sensors-table .data-table td:nth-child(10) { width: 150px; min-width: 150px; } /* Área: más compacto */
    
    .sensors-table .data-table th:nth-child(11),
    .sensors-table .data-table td:nth-child(11) { width: 110px; min-width: 110px; } /* Cliente: más compacto */
}



/* Status Badges - Estilo unificado */
.status-badge {
    padding: 3px 6px;
    border-radius: 0.375rem;
    font-size: 0.75em;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    cursor: default;
    text-transform: capitalize;
    line-height: 1.1;
}

.status-active {
    background-color: #dcfce7;
    color: #166534;
}

.status-inactive {
    background-color: #fff7ed;
    color: #c2410c;
}

.status-suspended {
    background-color: #fce7f3;
    color: #be185d;
}

.status-unknown {
    background-color: #fef3c7;
    color: #92400e;
}

/* 💓 Heartbeat Indicators - Columna HB en tabla de nodos */
.hb-header {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    padding: 0.5rem 0.25rem !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.hb-cell {
    text-align: center !important;
    padding: 0.35rem 0.25rem !important;
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    white-space: nowrap !important;
}

/* Badges tipo pill para HB ON / HB OFF */
.hb-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    border-radius: 0.375rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    cursor: default;
    line-height: 1.2;
    white-space: nowrap;
}

.hb-on {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.hb-off {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 40px;
    color: #6c757d;
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.modal-overlay.active {
    display: block;
    opacity: 1;
}

/* Modal Deslizante */
.slide-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    width: 90%;
    max-width: 700px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease-in-out;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
}

.slide-modal.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.slide-modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.slide-modal-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
}

.slide-modal-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #6b7280;
}

.slide-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Botón Ayuda en header: mismo esquema minimalista gris que el catálogo .btn-icon.config */
.slide-modal-header-help {
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.slide-modal-header-help:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #475569;
}

.slide-modal-content {
    padding: 24px;
    flex: 1;
    overflow: visible;
}

.slide-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
}

/* Formulario */
.form-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-section h4 {
    margin: 0;
    font-size: 0.938rem;
    font-weight: 600;
    color: #374151;
}

.form-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.form-control,
.form-select {
    width: 100%;
    height: 42px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #111827;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.form-select {
    width: 100%;
    height: 42px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #111827;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Estilos para el dropdown */
select.form-select option {
    padding: 8px 12px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #111827;
    background-color: #fff;
}

/* Asegurar que el dropdown no se corte */
.form-select:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

/* Ajustar el z-index para que el dropdown aparezca sobre otros elementos */
.form-group {
    position: relative;
    z-index: 10;
}

/* Cuando el select está abierto, aumentar el z-index */
.form-select:focus {
    z-index: 20;
}

/* Estilos para el dropdown cuando está abierto */
.form-select[size]:not([size="1"]) {
    max-height: 200px;
    overflow-y: auto;
}

/* Ajustar el ancho máximo del dropdown para tipos de sensores largos */
#tipo_id.form-select {
    min-width: 250px;
}

/* Asegurar que las opciones largas no se corten */
.form-select option {
    white-space: normal;
    word-wrap: break-word;
    min-height: 1.5em;
}

/* Estilos para las opciones del select */
.form-select option {
    padding: 8px 12px;
    min-height: 42px;
    line-height: 1.5;
    background-color: #fff;
    color: #111827;
}

/* Estilos para el hover de las opciones */
.form-select option:hover,
.form-select option:focus,
.form-select option:checked {
    background-color: #2563eb;
    color: white;
}

/* Estilos específicos para diferentes navegadores */
/* Firefox */
@-moz-document url-prefix() {
    .form-select {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    
    .form-select option {
        padding: 10px 12px;
    }
}

/* Chrome/Safari */
.form-select::-webkit-listbox {
    border-radius: 6px;
    border: 1px solid #d1d5db;
}

.form-select option::-webkit-listbox {
    padding: 8px 12px;
}

/* Edge */
.form-select::-ms-expand {
    display: none;
}

.form-select option::-ms-expand {
    padding: 8px 12px;
}

/* Estilo cuando el select está abierto */
.form-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Estilo para el select cuando está deshabilitado */
.form-select:disabled {
    background-color: #f3f4f6;
    cursor: not-allowed;
    color: #6b7280;
}

.form-select:disabled option {
    color: #6b7280;
}

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.form-control:disabled,
.form-select:disabled {
    background-color: #f3f4f6;
    cursor: not-allowed;
}

/* Botones */
.btn-primary,
.btn-secondary {
    height: 36px;
    padding: 0 16px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
}

.btn-primary {
    background-color: #2563eb;
    color: white;
    border: none;
}

.btn-primary:hover {
    background-color: #1d4ed8;
}

.btn-secondary {
    background-color: white;
    color: #374151;
    border: 1px solid #d1d5db;
}

.btn-secondary:hover {
    background-color: #f3f4f6;
}

/* Estilos adicionales */
.details-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.details-row {
    display: flex;
    gap: 1rem;
}

.details-col {
    flex: 1;
}

.details-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.details-value {
    font-size: 0.875rem;
    color: #111827;
}



/* Estilos para el resumen de elementos en modales */
.details-section {
    margin-top: 2rem;
}

.details-section .section-title {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Grid de 3 columnas para clientes */
.details-section .summary-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1rem 0;
}

/* Grid de 2 columnas para áreas */
#areas-container .details-section .summary-group {
    grid-template-columns: repeat(2, 1fr);
}

/* Grid de 2 columnas para áreas */
#areas-container .details-section .summary-group {
    grid-template-columns: repeat(2, 1fr);
}

.details-section .summary-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.details-section .summary-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.details-section .summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.details-section .summary-icon i {
    font-size: 1.5rem;
}

.details-section .summary-content {
    flex: 1;
}

.details-section .summary-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.25rem;
}

.details-section .summary-label {
    font-size: 0.875rem;
    color: #64748b;
}

@media (max-width: 768px) {
    .details-section .summary-group,
    #areas-container .details-section .summary-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .details-section .summary-group,
    #areas-container .details-section .summary-group {
        grid-template-columns: 1fr;
    }
    
    .details-section .summary-item {
        padding: 0.625rem;
    }
    
    .details-section .summary-value {
        font-size: 1rem;
    }
}

/* Estructura de filas y columnas en detalles */
.details-row {
    display: flex;
    gap: 1.5rem;
    width: 100%;
}

.details-col {
    flex: 1;
    min-width: 0; /* Evita que el contenido fuerce el ancho mínimo */
}

.details-col .details-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive para las filas de detalles */
@media (max-width: 480px) {
    .details-row {
        flex-direction: column;
        gap: 1rem;
    }
    
    .details-col {
        width: 100%;
    }
    
    .details-col .details-value {
        white-space: normal;
    }
}

/* Sorting styles - Mejorados v2.1 - Sin fondo activo */
.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 2rem;
    transition: all 0.2s ease;
}

.sortable:hover {
    background-color: #f8f9fa;
    color: #2196F3;
}

.sort-icon {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    opacity: 0.4;
    transition: all 0.2s ease;
    color: #6c757d;
}

.sortable:hover .sort-icon {
    opacity: 0.7;
    color: #2196F3;
}

/* Estados activos de ordenamiento */
.sortable.active {
    color: #1976d2;
    font-weight: 500;
}

.sortable.active .sort-icon {
    opacity: 1;
    color: #1976d2;
    font-weight: bold;
}

/* Iconos específicos para dirección */
.sortable[data-order="asc"] .sort-icon::before {
    content: "▲";
}

.sortable[data-order="desc"] .sort-icon::before {
    content: "▼";
}

.sortable:not([data-order]) .sort-icon::before {
    content: "⇅";
}

/* Estilos para mensajes de error y éxito */
.error-message,
.success-message {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    padding: 0.75rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.error-message {
    color: #991b1b;
    background-color: #fee2e2;
    border: 1px solid #fecaca;
}

.success-message {
    color: #065f46;
    background-color: #d1fae5;
    border: 1px solid #a7f3d0;
}

/* Estilos para el modal de eliminación - Diseño minimalista */
.delete-modal .client-info {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 0.875rem;
    margin-bottom: 0.875rem;
}

.delete-modal .info-row {
    display: flex;
    align-items: baseline;
    padding: 0.375rem 0;
    border-bottom: 1px solid #f5f5f5;
}

.delete-modal .info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.delete-modal .info-label {
    font-weight: 500;
    color: #7A7A7A;
    font-size: 0.813rem;
    min-width: 75px;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.delete-modal .info-value {
    font-size: 0.813rem;
    color: #022332;
    font-weight: 500;
    flex: 1;
}

.delete-modal .info-value.highlight {
    color: #E35156;
    font-weight: 600;
}

.delete-modal .alert-danger {
    display: flex;
    gap: 0.5rem;
    background-color: #fff5f5;
    border: 1px solid #ffebeb;
    border-left: 4px solid #dc3545;
    border-radius: 6px;
    padding: 0.75rem;
}

.delete-modal .alert-icon {
    font-size: 1.125rem;
}

.delete-modal .alert-content h4 {
    color: #dc3545;
    margin: 0 0 0.375rem 0;
    font-size: 0.813rem;
    font-weight: 600;
    line-height: 1.3;
}

.delete-modal .alert-content p {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.3;
}

.delete-modal .alert-content ul {
    margin: 0.25rem 0 0 0;
    padding-left: 1.25rem;
}

.delete-modal .alert-content li {
    margin-bottom: 0.125rem;
    color: #6c757d;
    font-size: 0.75rem;
    line-height: 1.3;
}

.delete-modal .confirmation-section {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 0.75rem;
}

.delete-modal .confirmation-text {
    margin-bottom: 0.5rem;
    color: #495057;
    font-size: 0.813rem;
}

.delete-modal .confirmation-text strong {
    color: #dc3545;
    font-weight: 600;
}

.delete-modal #confirmation-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    font-size: 0.813rem;
    transition: all 0.2s ease;
}

.delete-modal #confirmation-input:focus {
    outline: none;
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.delete-modal #confirmation-input.is-valid {
    border-color: #28a745;
    background-color: #f8fff9;
}

.delete-modal #confirmation-input.is-invalid {
    border-color: #dc3545;
    background-color: #fff5f5;
}

.delete-modal .btn-secondary {
    padding: 0.5rem 1rem;
    font-size: 0.813rem;
}

.delete-modal .btn-danger {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: #dc3545;
    border: 1px solid #dc3545;
    border-radius: 0.375rem;
    color: white;
    font-size: 0.813rem;
    font-weight: 500;
    opacity: 0.65;
    cursor: not-allowed;
    transition: all 0.2s ease;
}

.delete-modal .btn-danger:not(:disabled) {
    opacity: 1;
    cursor: pointer;
}

.delete-modal .btn-danger:not(:disabled):hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.mt-4 {
    margin-top: 1rem;
}



/* Table styles */
.table {
    width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
}

.table thead th {
    font-weight: 600;
    background-color: #f8fafc;
    border-bottom: 2px solid var(--border-color);
}

.table tbody tr:hover {
    background-color: #f1f5f9;
}

/* Client Details Modal Styles */
.client-details-container {
    padding: 1rem;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.client-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.client-id-badge {
    background: #f0f0f0;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

.client-main-info {
    margin: 1.5rem 0;
    padding: 0 0.5rem;
}

.client-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.client-description {
    color: #666;
    line-height: 1.5;
    font-size: 1rem;
}

.client-status-info {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.status-update-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.info-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-group label {
    font-size: 0.85rem;
    color: #666;
    font-weight: 500;
}

.info-group span {
    font-size: 1rem;
    color: #333;
}

/* Estilos para el modal de detalles del área */
.modal-title-group {
    flex: 1;
    min-width: 0; /* Para que el texto se ajuste correctamente */
}

.modal-title-group h3 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-color);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-subtitle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-color-secondary);
}

.area-ref {
    color: var(--primary-color);
    font-weight: 500;
}

.separator {
    color: var(--surface-border);
}

.client-info {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.client-info i {
    color: var(--text-color-secondary);
    font-size: 0.875rem;
}

.area-description {
    background-color: var(--surface-ground);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.area-description h5 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    color: var(--text-color);
    font-weight: 600;
}

.area-description p {
    margin: 0;
    color: var(--text-color-secondary);
    line-height: 1.5;
}

.summary-item {
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--border-radius);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.summary-icon i {
    font-size: 1.5rem;
}

.summary-icon i.fa-plus-circle {
    color: #FF4081;
}

.summary-icon i.fa-search {
    color: #2196F3;
}

.summary-content {
    flex: 1;
}

.summary-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.summary-label {
    color: var(--text-color-secondary);
    font-size: 0.875rem;
}

.area-title {
    font-size: 1.25rem;
    color: var(--text-color);
    margin: 0 0 1.5rem 0;
    font-weight: 500;
}

.section-title {
    font-size: 0.875rem;
    color: var(--text-color-secondary);
    margin: 0 0 1rem 0;
    font-weight: 600;
    text-transform: uppercase;
}

.client-info {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-label {
    color: var(--text-color);
    font-weight: 500;
}

.info-value {
    color: var(--text-color-secondary);
}

.details-section {
    margin-bottom: 1.5rem;
}

.details-section p {
    color: var(--text-color-secondary);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .summary-group {
        grid-template-columns: 1fr;
    }
    
    .summary-item {
        padding: 0.75rem;
    }
    
    .summary-icon {
        font-size: 1.25rem;
    }
    
    .summary-value {
        font-size: 1.125rem;
    }
}

/* Filters Bar - Responsive + Alineado */
.filters-bar {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 0.35rem;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    max-width: calc(100vw - var(--sidebar-width) - 4rem);
}

.filters-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.filters-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 0.9rem;
    white-space: nowrap;
    padding-right: 0.5rem;
}

.filters-title .icon {
    color: #2196F3;
}

.filter-item {
    min-width: 140px;
    max-width: 220px;
    flex: 1;
}

/* Filtros de cascada jerárquica (cliente/área/nodo) - un poco más anchos */
.filter-item:has(#filter-cliente),
.filter-item:has(#filter-area),
.filter-item:has(#filter-nodo) {
    min-width: 150px;
}

.filter-select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: white;
    font-size: 0.9rem;
    color: #333;
    transition: all 0.2s ease;
    height: 36px;
}

.filter-select:hover:not(:disabled) {
    border-color: #2196F3;
}

.filter-select:focus {
    outline: none;
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33,150,243,0.1);
}

.filter-select:disabled {
    background-color: #f8f9fa;
    cursor: not-allowed;
    color: #999;
    border-color: #e0e0e0;
}

.filter-select option {
    padding: 0.5rem;
    font-size: 0.875rem;
}

/* Botón de limpiar filtros - específico */
.filters-bar .btn-icon {
    padding: 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #666;
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filters-bar .btn-icon:hover {
    background-color: #f8f9fa;
    border-color: #2196F3;
    color: #2196F3;
}

/* Nuevo estilo para campos en línea */
.form-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    min-height: 4rem;
}

/* Clases de utilidad para el ancho de los campos */
.flex-grow-1 {
    flex: 1;
}

.flex-grow-2 {
    flex: 2;
}

/* Ajustes responsive */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .form-group {
        width: 100%;
    }

    .slide-modal {
        width: 95%;
        margin: 16px;
    }
}

/* Estilos Mejorados para el Modal de Cambio de Estado del Sensor v3 */

/* Header principal más limpio */
.sensor-header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.sensor-primary-info {
    flex: 1;
}

.sensor-id-badge {
    display: inline-block;
    background: #2196F3;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    margin-bottom: 0.25rem;
    letter-spacing: 0.5px;
}

.sensor-name-main {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    line-height: 1.2;
}

.current-status-main {
    flex-shrink: 0;
}

.status-badge.status-current {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 12px;
    white-space: nowrap;
}

/* Detalles técnicos separados */
.sensor-technical-details {
    display: flex;
    gap: 1.5rem;
    padding: 0.5rem 0.75rem;
    background: #fafbfc;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    border-left: 3px solid #2196F3;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
}

.detail-value {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
}

/* Ubicación mejorada */
.sensor-location-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
    color: #495057;
    font-size: 0.75rem;
    margin-bottom: 1rem;
}

.sensor-location-info i.fa-map-marker-alt {
    color: #28a745;
    font-size: 0.7rem;
}

.location-text {
    flex: 1;
}

/* Selector minimalista mejorado */
.status-selector-minimal {
    margin-top: 0.75rem;
}

.selector-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    cursor: default;
}

.selector-label i {
    color: #2196F3;
    font-size: 0.8rem;
}

.status-select-minimal {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid #e9ecef;
    border-radius: 8px;
    background: white;
    font-size: 0.875rem;
    color: #2c3e50;
    transition: all 0.2s ease;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
    padding-right: 2.5rem;
}

.status-select-minimal:hover {
    border-color: #2196F3;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
}

.status-select-minimal:focus {
    outline: none;
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.status-select-minimal option {
    padding: 0.75rem;
    font-size: 0.875rem;
    background: white;
    color: #2c3e50;
}

.status-select-minimal option:disabled {
    color: #6c757d;
    background: #f8f9fa;
}

/* Corregir el estado maintenance para coherencia visual */
.status-maintenance {
    background-color: #fff3cd !important;
    color: #856404 !important;
    border: 1px solid #ffeaa7 !important;
}

/* Estados adicionales para nodos */
.status-stored {
    background-color: #e0f2fe;
    color: #0277bd;
}

.status-retired {
    background-color: #fce4ec;
    color: #ad1457;
}

/* Estilos para la sección de edición - Modal Editar Sensor v3 */
.edit-fields-section {
    margin-top: 1rem;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

.section-title i {
    color: #2196F3;
    font-size: 0.8rem;
}

.edit-field-group {
    margin-bottom: 0.75rem;
}

.edit-field-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.3rem;
}

.edit-field-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid #e9ecef;
    border-radius: 6px;
    background: white;
    font-size: 0.875rem;
    color: #2c3e50;
    transition: all 0.2s ease;
}

.edit-field-input:hover {
    border-color: #2196F3;
    box-shadow: 0 1px 3px rgba(33, 150, 243, 0.1);
}

.edit-field-input:focus {
    outline: none;
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.edit-field-input:required:invalid {
    border-color: #dc3545;
}

.edit-field-input:required:valid {
    border-color: #28a745;
}

.edit-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.edit-field-input[type="number"] {
    text-align: center;
}

.edit-field-input::placeholder {
    color: #6c757d;
    font-style: italic;
}

/* Responsive mejorado */
@media (max-width: 768px) {
    .sensor-header-main {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .current-status-main {
        align-self: center;
    }
    
    .sensor-technical-details {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .detail-item {
        justify-content: space-between;
    }
    
    .sensor-location-info {
        text-align: center;
        justify-content: center;
    }
    
    .status-select-minimal {
        font-size: 0.8rem;
        padding: 0.6rem 0.8rem;
        padding-right: 2.2rem;
    }
    
    .edit-fields-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .edit-field-input {
        font-size: 0.8rem;
        padding: 0.5rem 0.6rem;
    }
    
    .edit-field-label {
        font-size: 0.75rem;
    }
}

/* Estilos para input-group (campo con botón adjunto) */
.input-group {
    display: flex;
    align-items: stretch;
}

.input-group .form-control {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.input-group .btn-secondary {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.input-group .btn-secondary:hover {
    z-index: 2;
}

/* Estilos para campos con errores de validación */
.field-error {
    border-color: var(--danger-color) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
    background-color: #fef2f2 !important;
}

.field-error:focus {
    border-color: var(--danger-color) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3) !important;
}

/* Estilos para input-group con field-error */
.input-group .field-error {
    border-right: 1px solid var(--danger-color) !important;
}

/* Animación suave para la transición del error */
.form-control,
.form-select {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

/* Required field asterisk styling */
.required {
    color: #ef4444;
    font-weight: 500;
    margin-left: 2px;
}

/* Form text help styling */
.form-text {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
    line-height: 1.25;
}

.form-text.text-muted {
    color: #9ca3af;
}

/* Compact form styling for status change modal */
.compact-form {
    padding: 0;
    margin: 0;
}

.status-change-header {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e2e8f0;
}

.current-status-compact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    margin: 0;
}

.status-change-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.field-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
}

.field-row:last-child {
    margin-bottom: 0;
}

.field-compact {
    flex: 1;
    width: 100%;
}

.field-compact label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
}

.form-select-compact,
.form-textarea-compact {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #1f2937;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-select-compact {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.25rem;
    position: relative;
    z-index: 1;
}

/* Cuando el select está abierto (focus), aumentar z-index para que el dropdown aparezca correctamente */
.form-select-compact:focus {
    z-index: 10;
}

.form-textarea-compact {
    resize: vertical;
    min-height: 2.5rem;
}

.form-select-compact:focus,
.form-textarea-compact:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-select-compact:hover,
.form-textarea-compact:hover {
    border-color: #9ca3af;
}

/* Override modal padding for compact forms */
.slide-modal .compact-form {
    margin: -1.5rem;
    padding: 1.5rem;
    overflow: visible;
}

/* Asegurar que el contenido del modal permita que los dropdowns se muestren */
.slide-modal.modal-form .slide-modal-content {
    overflow: visible;
}

/* Edit client modal specific styles */
.edit-client-header {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e2e8f0;
}

.client-info-compact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.client-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    margin: 0;
}

.client-id-badge {
    background: #e0e7ff;
    color: #3730a3;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: monospace;
}

.edit-client-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-input-compact {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #1f2937;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-input-compact:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input-compact:hover {
    border-color: #9ca3af;
}

.form-input-compact::placeholder {
    color: #9ca3af;
    font-style: italic;
}

/* Responsive adjustments for compact modals */
@media (max-width: 640px) {
    .client-info-compact {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .edit-client-header,
    .status-change-header {
        padding: 0.75rem;
    }
    
    .field-compact label {
        font-size: 0.8rem;
    }
    
    .form-input-compact,
    .form-select-compact,
    .form-textarea-compact {
        font-size: 0.8rem;
        padding: 0.5rem;
    }
}

/* New client modal specific styles */
.new-client-header {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1.25rem;
    border: 1px solid #bae6fd;
}

.new-client-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.new-client-icon {
    font-size: 1.5rem;
    background: #0ea5e9;
    color: white;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.new-client-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.new-client-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0369a1;
    margin: 0;
}

.new-client-subtitle {
    font-size: 0.75rem;
    color: #0891b2;
    margin: 0;
}

.new-client-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Responsive adjustments for new client modal */
@media (max-width: 640px) {
    .new-client-header {
        padding: 0.75rem;
    }
    
    .new-client-icon {
        width: 2rem;
        height: 2rem;
        font-size: 1.25rem;
    }
    
    .new-client-title {
        font-size: 0.8rem;
    }
    
    .new-client-subtitle {
        font-size: 0.7rem;
    }
}

/* New node modal styles */
.new-node-header {
    background: linear-gradient(135deg, #e6fffa 0%, #b2f5ea 100%);
    padding: 0.875rem;
    border-radius: 0.375rem;
    margin-bottom: 0.875rem;
    border: 1px solid #089082;
}

.new-node-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.new-node-icon {
    font-size: 1.5rem;
    background: #089082;
    color: white;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.new-node-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.new-node-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #065f46;
    margin: 0;
}

.new-node-subtitle {
    font-size: 0.75rem;
    color: #047857;
    margin: 0;
}

.new-node-fields {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.input-group-compact {
    display: flex;
    border-radius: 0.375rem;
    overflow: hidden;
    border: 1px solid #d1d5db;
}

.input-group-compact input {
    flex: 1;
    border: none;
    border-radius: 0;
    outline: none;
}

.input-group-compact input:focus {
    box-shadow: 0 0 0 2px rgba(8, 144, 130, 0.2);
}

.btn-compact-secondary {
    background: #6b7280;
    color: white;
    border: none;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-compact-secondary:hover {
    background: #4b5563;
}

/* Responsive adjustments for new node modal */
@media (max-width: 640px) {
    .new-node-header {
        padding: 0.75rem;
    }
    
    .new-node-icon {
        width: 2rem;
        height: 2rem;
        font-size: 1.25rem;
    }
    
    .new-node-title {
        font-size: 0.8rem;
    }
    
    .new-node-subtitle {
        font-size: 0.7rem;
    }
    
    .btn-compact-secondary {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }
}

/* Areas module compact styles */

/* New area modal styles */
.new-area-header {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1.25rem;
    border: 1px solid #f59e0b;
}

.new-area-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.new-area-icon {
    font-size: 1.5rem;
    background: #f59e0b;
    color: white;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.new-area-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.new-area-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #92400e;
    margin: 0;
}

.new-area-subtitle {
    font-size: 0.75rem;
    color: #b45309;
    margin: 0;
}

.new-area-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Edit area modal styles */
.edit-area-header {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e2e8f0;
}

.area-info-compact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.area-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    margin: 0;
}

.area-id-badge {
    background: #fef3c7;
    color: #92400e;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: monospace;
}

.client-info-pill {
    background: #e0f2fe;
    color: #0369a1;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.edit-area-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* View area details styles */
.area-details-container {
    padding: 0;
}

.area-header-compact {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e2e8f0;
}

.area-main-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.area-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    flex-grow: 1;
}

.client-info-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.client-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
    margin: 0;
}

.client-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0369a1;
    margin: 0;
}

.area-description-section {
    margin-bottom: 1.25rem;
}

.section-title-compact {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.area-description-text {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb;
}

.area-summary-section {
    margin-bottom: 1rem;
}

.summary-grid-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.summary-item-compact {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
}

.summary-item-compact:hover {
    border-color: #d1d5db;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.summary-icon-compact {
    font-size: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.summary-content-compact {
    flex-grow: 1;
}

.summary-value-compact {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
}

.summary-label-compact {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

/* Responsive adjustments for areas modals */
@media (max-width: 640px) {
    .area-info-compact,
    .area-main-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .new-area-header,
    .edit-area-header,
    .area-header-compact {
        padding: 0.75rem;
    }
    
    .new-area-icon {
        width: 2rem;
        height: 2rem;
        font-size: 1.25rem;
    }
    
    .summary-grid-compact {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .summary-item-compact {
        padding: 0.75rem;
    }
}

/* Estilos para modal de eliminar área - diseño compacto */
/* Reducir espaciado en delete-modal para que todo quepa dentro del modal */
.delete-modal .slide-modal-header {
    padding: 12px 20px;
}

.delete-modal .slide-modal-header h3 {
    font-size: 1rem;
}

.delete-modal .slide-modal-content {
    padding: 16px 20px;
    line-height: 1.4;
}

.delete-modal .slide-modal-footer {
    padding: 12px 20px;
}

.delete-modal p {
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

.delete-modal .mt-4 {
    margin-top: 0.5rem;
}

.delete-modal .area-delete-info {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.delete-modal .delete-area-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.delete-modal .area-name-highlight {
    font-size: 1rem;
    font-weight: 600;
    color: #dc3545;
    line-height: 1.3;
}

.delete-modal .client-info-text {
    font-size: 0.813rem;
    color: #6c757d;
    line-height: 1.3;
}

.delete-modal .badge {
    align-self: flex-start;
    font-size: 0.688rem;
    padding: 0.188rem 0.625rem;
    border-radius: 10px;
}

.delete-modal .badge.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.delete-modal .badge.danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Estilos específicos para modal de eliminación de nodos */
.delete-modal .node-delete-info {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
}

/* =============================================
   SENSOR VALUES LIVE DASHBOARD STYLES
   ============================================= */

/* Connection Status */
.connection-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.status-indicator {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-indicator.online {
    background-color: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

.status-indicator.offline {
    background-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

/* Live Stats */
.live-stats {
    margin-bottom: 1.5rem;
}

.live-stats .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.stat-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
}

.stat-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.stat-icon {
    font-size: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-content {
    flex-grow: 1;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

/* Sensors Grid */
.sensors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Loading State */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #64748b;
}

.loading-spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid #e2e8f0;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: #64748b;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.empty-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

/* NUEVO: Welcome State - Estado inicial amigable */
.welcome-state {
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 12px;
    margin: 2rem 0;
    border: 2px dashed #cbd5e1;
}

.welcome-content {
    max-width: 600px;
    margin: 0 auto;
}

.welcome-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    display: block;
}

.welcome-state h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.welcome-state p {
    font-size: 1rem;
    color: #64748b;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.welcome-actions {
    margin-bottom: 2rem;
}

.welcome-actions .btn-primary {
    font-size: 1.1rem;
    padding: 0.75rem 2rem;
    margin-bottom: 1rem;
}

.welcome-hint {
    margin-top: 1rem;
}

.welcome-hint small {
    color: #6b7280;
    font-style: italic;
}

.quick-filters {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.quick-filters-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 1rem;
}

.btn-quick-filter {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    margin: 0 0.5rem 0.5rem 0;
    color: #374151;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-quick-filter:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: #eff6ff;
    transform: translateY(-1px);
}

.btn-quick-filter:active {
    transform: translateY(0);
}

/* Sensor Cards */
.sensor-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.75rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    max-width: 280px;
}

/* 💓 Estado OFFLINE del nodo (heartbeat inactivo) */
.sensor-card--offline {
    background: #fff5f5;
    border: 1px solid #ffc2c2;
}

/* 🚨 Estado de ALARMA del sensor (en_alarma=true) */
.sensor-card.sensor-alarma {
    background: #fef2f2;
    border: 2px solid #fca5a5;
}

.sensor-card.sensor-alarma .status-text-large {
    color: #dc2626;
    font-weight: 800;
}

/* 💓 Badge base de heartbeat */
.badge-hb {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 0.688rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
}

/* 💓 Badge HB ON (verde) */
.badge-hb-on {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #047857;
}

/* 💓 Badge HB OFF (rojo) */
.badge-hb-off {
    background: #fff0f0;
    border: 1px solid #ffcaca;
    color: #dc2626;
}

/* 💓 Badge HB N/A (gris) */
.badge-hb-na {
    background: #f5f5f5;
    border: 1px solid #d4d4d4;
    color: #6b7280;
}

.sensor-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.sensor-card.updating {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    animation: pulse-border 1s ease-in-out;
}

@keyframes pulse-border {
    0%, 100% { border-color: #3b82f6; }
    50% { border-color: #1d4ed8; }
}

/* Sensor Header */
.sensor-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.sensor-title {
    width: 100%;
}

/* Nueva línea para ID del sensor */
.sensor-id-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.sensor-id-number {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    gap: 0.25rem;
}

.sensor-id-number .sensor-id {
    color: #1e293b;
    font-weight: 700;
}

.sensor-header-right {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

/* 🎯 Indicador de umbrales (círculo) */
.sensor-th-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sensor-th-dot--on {
    background-color: #10b981;
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
}

.sensor-th-dot--off {
    background-color: #d1d5db;
    opacity: 0.5;
}

/* Nueva línea para nombre del sensor */
.sensor-name-line {
    width: 100%;
}

.sensor-name-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    line-height: 1.3;
    /* Truncado elegante */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

.threshold-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 0.15rem;
    transition: all 0.3s ease;
    position: relative;
    cursor: help;
}

.threshold-indicator.has-thresholds {
    background-color: #10b981;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px #10b981, 0 0 12px rgba(16, 185, 129, 0.8);
}

.threshold-indicator.no-thresholds {
    background-color: #f59e0b;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px #f59e0b, 0 0 12px rgba(245, 158, 11, 0.8);
}


.sensor-name {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.125rem 0;
    line-height: 1.2;
}

.sensor-id {
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    margin-right: 0.5rem;
    border: 1px solid #e2e8f0;
    display: inline-block;
    min-width: 1.5rem;
    text-align: center;
}

.sensor-name-text {
    color: #1e293b;
}

/* .sensor-unit - Ya no se usa, unidad integrada en el valor */
/* .sensor-type-label - Eliminado de sensores digitales */

/* Type Badges */
.sensor-type-badge {
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 0.688rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    flex-shrink: 0;
    line-height: 1;
    white-space: nowrap;
}

.sensor-type-badge.analog {
    background-color: #dbeafe;
    color: #1e40af;
}

.sensor-type-badge.digital {
    background-color: #dcfce7;
    color: #16a34a;
}

/* Analog Sensor Value Section */
.sensor-value-section {
    margin-bottom: 1rem;
    text-align: center;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Contenedor de valor con espacio fijo reservado */
.value-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 4rem; /* Altura fija para valor + etiqueta */
    gap: 0.25rem;
}

.current-value {
    text-align: center;
    flex-shrink: 0; /* No se comprime */
}

.value-number {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
    display: block;
    text-align: center;
}

.value-status {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.2rem; /* Espacio reservado fijo para etiqueta */
    flex-shrink: 0; /* No se comprime */
}

.value-status .status-indicator {
    width: 0.5rem;
    height: 0.5rem;
}

.status-text {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    /* Estilo base para etiquetas - colores por defecto */
    color: #dc2626;
    background-color: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.2);
}

/* Digital Sensor Value Section */
.sensor-value-section.digital {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    height: 120px;
}

.digital-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.status-circle {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
}

.status-circle.active {
    background-color: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}

.status-circle.inactive {
    background-color: #6b7280;
    box-shadow: 0 0 0 4px rgba(107, 114, 128, 0.2);
}

.status-circle::before {
    content: '';
    width: 1rem;
    height: 1rem;
    background: white;
    border-radius: 50%;
}

/* Toggle Switch Styles */
.toggle-switch {
    width: 4rem;
    height: 2rem;
    background-color: #9ca3af;
    border-radius: 2rem;
    position: relative;
    transition: background-color 0.3s ease;
    cursor: pointer;
    border: 2px solid #e5e7eb;
}

.toggle-slider {
    width: 1.5rem;
    height: 1.5rem;
    background-color: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0.25rem;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch.active {
    background-color: #22c55e;
    border-color: #16a34a;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}

.toggle-switch.active .toggle-slider {
    left: 2.25rem;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

.toggle-switch.inactive {
    background-color: #9ca3af;
    border-color: #6b7280;
    box-shadow: 0 0 0 4px rgba(107, 114, 128, 0.2);
}

.toggle-switch.inactive .toggle-slider {
    left: 0.25rem;
}

/* LED Indicator Styles */
.led-indicator {
    width: 3.5rem;
    height: 3.5rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.led-light {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    transition: all 0.4s ease;
    border: 3px solid #e5e7eb;
}

.led-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    z-index: 1;
    transition: all 0.4s ease;
    opacity: 0;
}

.led-indicator.active .led-light {
    background: radial-gradient(circle at 30% 30%, #f87171, #ef4444, #dc2626);
    border-color: #dc2626;
    box-shadow: 
        inset 0 2px 6px rgba(255, 255, 255, 0.3),
        0 0 25px rgba(239, 68, 68, 0.8);
}

.led-indicator.active .led-glow {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.6) 0%, rgba(239, 68, 68, 0.3) 50%, transparent 70%);
    opacity: 1;
    animation: alertPulse 1s ease-in-out infinite;
}

.led-indicator.inactive .led-light {
    background: radial-gradient(circle at 30% 30%, #4ade80, #22c55e, #16a34a);
    border-color: #16a34a;
    box-shadow: 
        inset 0 2px 6px rgba(255, 255, 255, 0.3),
        0 0 15px rgba(34, 197, 94, 0.4);
}

.led-indicator.inactive .led-glow {
    background: radial-gradient(circle, rgba(34, 197, 94, 0.3) 0%, rgba(34, 197, 94, 0.1) 50%, transparent 70%);
    opacity: 0.8;
    animation: normalGlow 3s ease-in-out infinite;
}

@keyframes ledPulse {
    0%, 100% { 
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    50% { 
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

@keyframes alertPulse {
    0%, 100% { 
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 25px rgba(239, 68, 68, 0.8);
    }
    50% { 
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
        box-shadow: 0 0 35px rgba(239, 68, 68, 1);
    }
}

@keyframes normalGlow {
    0%, 100% { 
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    50% { 
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

.status-text-large {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Sensor Info */
.sensor-info {
    margin-bottom: 1rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f8fafc;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
}

.info-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    text-align: right;
}

/* Nuevo estilo compacto para ubicación */
.info-compact {
    padding: 0.25rem 0;
    text-align: center;
    line-height: 1.1;
}

.info-node {
    font-size: 0.75rem;
    color: #374151;
    font-weight: 600;
    margin-bottom: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.info-path {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.info-path .client-name,
.info-path .area-name {
    color: #1f2937;
    font-weight: 600;
    font-size: inherit;
}

/* Sensor Footer */
.sensor-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
    gap: 0.5rem;
}

/* 📅 Texto de última lectura - Estilo secundario */
.sensor-last-reading {
    font-size: 0.7rem;
    color: #94a3b8;
    flex: 1;
    line-height: 1.2;
    white-space: nowrap;
}

.last-reading-label {
    color: #94a3b8;
    font-weight: 500;
    margin-right: 0.375rem;
}

.timestamp {
    font-weight: 500;
    color: #64748b;
    letter-spacing: 0.01em;
}

/* Mantener compatibilidad con .last-update (deprecated) */
.last-update {
    font-size: 0.7rem;
    color: #64748b;
    flex: 1;
    line-height: 1.2;
}

.btn-history {
    padding: 0.25rem 0.5rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 0.2rem;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: auto;
    line-height: 1.2;
}

.btn-history:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
}

/* Estilos específicos para etiquetas de alerta sutiles - FORZADOS */
/* VALOR BAJO - Azul sutil */
span.status-text.low {
    color: #1e40af !important;
    background-color: rgba(30, 64, 175, 0.08) !important;
    border: 1px solid rgba(30, 64, 175, 0.2) !important;
    box-shadow: 0 1px 2px rgba(30, 64, 175, 0.1) !important;
}

/* VALOR ALTO - Naranja sutil */
span.status-text.high {
    color: #ea580c !important;
    background-color: rgba(234, 88, 12, 0.08) !important;
    border: 1px solid rgba(234, 88, 12, 0.2) !important;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.1) !important;
}

/* Backup con mayor especificidad */
.sensor-card .value-status .status-text.low {
    color: #1e40af !important;
    background-color: rgba(30, 64, 175, 0.08) !important;
    border-color: rgba(30, 64, 175, 0.2) !important;
}

.sensor-card .value-status .status-text.high {
    color: #ea580c !important;
    background-color: rgba(234, 88, 12, 0.08) !important;
    border-color: rgba(234, 88, 12, 0.2) !important;
}

/* Estilos para sensores digitales */
span.status-text.alert,
.sensor-card .value-status .status-text.alert {
    color: #f59e0b !important;
    background-color: rgba(245, 158, 11, 0.08) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

span.status-text.critical,
.sensor-card .value-status .status-text.critical {
    color: #dc2626 !important;
    background-color: rgba(220, 38, 38, 0.08) !important;
    border: 1px solid rgba(220, 38, 38, 0.2) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sensors-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .sensor-card {
        padding: 1rem;
    }
    
    .sensor-header {
        margin-bottom: 0.5rem;
        padding-bottom: 0.4rem;
    }
    
    .sensor-id-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 0.6rem;
    }
    
    .sensor-header-right {
        align-self: flex-start;
    }
    
    .sensor-name-text {
        font-size: 0.9rem;
    }
    
    .sensor-type-badge {
        align-self: flex-start;
    }
    
    .value-container {
        min-height: 3.5rem; /* Altura reducida en móvil */
        gap: 0.2rem;
    }
    
    .value-number {
        font-size: 1.5rem;
    }
    
    .status-circle {
        width: 3rem;
        height: 3rem;
    }
    
    .status-circle::before {
        width: 1rem;
        height: 1rem;
    }
    
    .sensor-footer {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
    
    .live-stats .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .live-stats .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-item {
        padding: 0.75rem;
    }
    
    .stat-icon {
        width: 2rem;
        height: 2rem;
        font-size: 1.25rem;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
}

/* Estilo para campos con error de validación */
.field-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2) !important;
    background-color: #fef2f2 !important;
}

.field-error:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3) !important;
}

/* Estilos para Editar Nodos */
.edit-node-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.node-info-compact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.node-label {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
}

.node-id-badge {
    background: linear-gradient(135deg, #089082, #07a691);
    color: white;
    padding: 0.25rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(8, 144, 130, 0.2);
}

.node-name {
    font-size: 1rem;
    font-weight: 600;
    color: #022332;
}

.edit-node-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.help-text {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
    font-style: italic;
}

.form-input-compact[readonly] {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .node-info-compact {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .edit-node-header {
        margin-bottom: 1rem;
    }
}

/* New sensor modal styles - Optimized for space */
.new-sensor-header {
    background: linear-gradient(135deg, #e6fffa 0%, #b2f5ea 100%);
    padding: 0.75rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    border: 1px solid #089082;
}

/* Header expandido para modal de edición */
.new-sensor-header .sensor-location-info {
    color: #047857;
    font-size: 0.85rem;
}

.new-sensor-header .sensor-location-info i {
    color: #089082;
    margin-right: 0.5rem;
}

.new-sensor-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.new-sensor-icon {
    font-size: 1.25rem;
    background: #089082;
    color: white;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.new-sensor-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.new-sensor-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #065f46;
    margin: 0;
}

.new-sensor-subtitle {
    font-size: 0.75rem;
    color: #047857;
    margin: 0;
}

.new-sensor-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* 2-column layout for sensor name and type */
.field-row-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

/* 3-column layout for location row */
.field-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

/* 3-column balanced layout for config row */
.field-row-3-balanced {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 0.75rem;
}

/* Optimize modal width - Solo para modales sin clase específica */
.slide-modal:not(.modal-small):not(.modal-medium):not(.modal-large):not(.modal-xl):not(.modal-xxl):not(.modal-form) {
    max-width: 750px;
}

/* Responsive adjustments for new sensor modal */
@media (max-width: 900px) {
    .field-row-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .field-row-3-balanced {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .new-sensor-header {
        padding: 0.5rem;
    }
    
    .new-sensor-icon {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 1rem;
    }
    
    .new-sensor-title {
        font-size: 0.8rem;
    }
    
    .new-sensor-subtitle {
        font-size: 0.7rem;
    }
    
    .field-row-2,
    .field-row-3,
    .field-row-3-balanced {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .new-sensor-fields {
        gap: 0.5rem;
    }
}

/* ============================================
   HEARTBEAT BLOCK STYLES - Nodos IoT
   ============================================ */

.heartbeat-row {
    background: linear-gradient(135deg, #fef3c7 0%, #fef9e7 100%);
    border: 1px solid #fcd34d;
    border-radius: 0.375rem;
    padding: 0.625rem 0.875rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.heartbeat-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

.heartbeat-toggle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    user-select: none;
}

.heartbeat-toggle input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.heartbeat-toggle span {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.heartbeat-interval {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.heartbeat-interval label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

.heartbeat-interval input {
    padding: 0.375rem 0.625rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background: white;
    width: 6.25rem;
    transition: all 0.2s ease;
}

.heartbeat-interval input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.heartbeat-interval input:disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Responsive para heartbeat */
@media (max-width: 640px) {
    .heartbeat-row {
        flex-wrap: wrap;
        gap: 0.625rem;
    }
    
    .heartbeat-label {
        width: 100%;
    }
}

/* ============================================
   ESTADO DE COMUNICACIÓN - Detalle Nodo
   ============================================ */

.comm-status-block {
    background: #f8fafc;
    border-radius: 0.375rem;
    padding: 0.625rem;
    margin-bottom: 0.625rem;
    border: 1px solid #e2e8f0;
}

.comm-status-title {
    color: #475569;
    font-size: 0.813rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.comm-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.comm-status-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.comm-status-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.3;
}

.comm-status-label {
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
}

.comm-status-value {
    color: #374151;
    font-weight: 400;
}

/* Badges de estado de conexión */
.conn-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.688rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.conn-badge-online {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 1px solid #10b981;
}

.conn-badge-offline {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #ef4444;
}

.conn-badge-no-control {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #4b5563;
    border: 1px solid #9ca3af;
}

.conn-badge-not-monitored {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    color: #6b7280;
    border: 1px solid #d1d5db;
}

/* Badge tipo de nodo (Detalle del Nodo) */
.node-class-badge {
    border-radius: 0.375rem;
    font-weight: 600;
}
.node-class-badge.nc-sensors {
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #a78bfa;
}
.node-class-badge.nc-actuators {
    background: #ffedd5;
    color: #c2410c;
    border: 1px solid #fb923c;
}
.node-class-badge.nc-mixed {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #60a5fa;
}
.node-class-badge.nc-empty {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

/* Badge tipo de nodo en tabla (reutiliza nc-* para colores) */
.badge-nodeclass {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-nodeclass.nc-sensors {
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #a78bfa;
}
.badge-nodeclass.nc-actuators {
    background: #ffedd5;
    color: #c2410c;
    border: 1px solid #fb923c;
}
.badge-nodeclass.nc-mixed {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #60a5fa;
}
.badge-nodeclass.nc-empty {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

.conn-badge-icon {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.conn-badge-online .conn-badge-icon {
    background: #10b981;
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.6);
}

.conn-badge-offline .conn-badge-icon {
    background: #ef4444;
}

.conn-badge-no-control .conn-badge-icon {
    background: #9ca3af;
}

.conn-badge-not-monitored .conn-badge-icon {
    background: #d1d5db;
}

/* Responsive para estado de comunicación */
@media (max-width: 640px) {
    .comm-status-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* Modal Size Variants - Sistema de tamaños estandarizado */
/* Sin scroll interno, la altura se ajusta al contenido */
.slide-modal.modal-small {
    max-width: 400px;
    height: auto;
}

.slide-modal.modal-medium {
    max-width: 600px;
    height: auto;
}

.slide-modal.modal-large {
    max-width: 900px;
    height: auto;
}

/* XL — tablas históricas, vistas amplias (≤1000px) */
.slide-modal.modal-xl {
    max-width: 1000px;
    width: min(1000px, 95vw);
    height: auto;
    max-height: 90vh;
}
.slide-modal.modal-xl .slide-modal-content {
    max-height: calc(90vh - 130px);
    overflow-y: auto;
}

/* Centro Control — cabecera de identidad compartida (Historial + Detalles desde card) */
.slide-modal.actuator-historial-modal .cc-historial-identity,
.slide-modal.modal-form .cc-historial-identity {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.slide-modal.actuator-historial-modal .cc-historial-meta,
.slide-modal.modal-form .cc-historial-meta {
    text-align: right;
    flex-shrink: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    min-width: min(100%, 12rem);
}
.slide-modal.actuator-historial-modal .cc-historial-meta p,
.slide-modal.modal-form .cc-historial-meta p {
    margin: 0 0 0.2rem;
}
.slide-modal.actuator-historial-modal .cc-historial-meta p:last-child,
.slide-modal.modal-form .cc-historial-meta p:last-child {
    margin-bottom: 0;
}
.slide-modal.actuator-historial-modal .cc-historial-table-wrap {
    overflow-x: auto;
    margin-top: 0.25rem;
}
.slide-modal.actuator-historial-modal .cc-historial-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
}
.slide-modal.actuator-historial-modal .cc-historial-table thead tr {
    background: #e2e8f0;
    border-bottom: 2px solid #cbd5e1;
}
.slide-modal.actuator-historial-modal .cc-historial-table th {
    padding: 0.5rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0f172a;
    text-align: left;
    white-space: nowrap;
}
.slide-modal.actuator-historial-modal .cc-historial-table td {
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
    color: #1e293b;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top;
}
.slide-modal.actuator-historial-modal .cc-historial-table tbody tr:nth-child(even) {
    background: #fafafa;
}
.slide-modal.actuator-historial-modal .cc-historial-table tbody tr:hover {
    background: #ecfdf5;
}
.slide-modal.actuator-historial-modal .cc-historial-table .cc-hist-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.slide-modal.actuator-historial-modal .cc-hist-cmd {
    display: inline-block;
    padding: 0.12rem 0.45rem;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
    font-weight: 600;
    font-size: 0.78rem;
}

/* XXL — vistas de diagnóstico, comparadores, dashboards anchos (≤1300px) */
.slide-modal.modal-xxl {
    max-width: 1300px;
    width: min(1300px, 98vw);
    height: auto;
    max-height: 92vh;
}
.slide-modal.modal-xxl .slide-modal-content {
    max-height: calc(92vh - 130px);
    overflow-y: auto;
}

/* Tamaño personalizado para modales de formularios */
.slide-modal.modal-form {
    max-width: 750px;
    width: 90%;
    height: auto;
    max-height: 95vh;
}

/* Sin scroll interno - ajustar modal al contenido */
.slide-modal.modal-form .slide-modal-content {
    max-height: none;
    overflow: visible;
    padding-right: 20px;
}

/* Ajuste puntual: modal Ver Detalles del Actuador
   Sin scroll interno (estándar), con compactación leve */
.slide-modal.actuator-details-modal-shell .slide-modal-content {
    max-height: none;
    overflow: visible;
    padding-right: 20px;
}

.slide-modal.actuator-details-modal-shell .compact-form.actuator-details-modal {
    margin: -0.75rem;
    padding: 0.75rem;
}

/* Compactar "Ver Detalles del Actuador":
   quitar separadores grises entre bloques para reducir alto visual */
.slide-modal.actuator-details-modal-shell .actuator-details-section,
.slide-modal.actuator-details-modal-shell .actuator-details-section + .actuator-details-section,
.slide-modal.actuator-details-modal-shell .actuator-details-cfg-block,
.slide-modal.actuator-details-modal-shell .actuator-details-cfg-header {
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Forzar sin líneas separadoras en esta vista */
.slide-modal.actuator-details-modal-shell .new-sensor-fields.actuator-details-body > section,
.slide-modal.actuator-details-modal-shell .new-sensor-fields.actuator-details-body > section + section,
.slide-modal.actuator-details-modal-shell .actuator-details-cfg-section-title {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* Compactación vertical puntual */
.slide-modal.actuator-details-modal-shell .new-sensor-header {
    padding: 0.625rem;
    margin-bottom: 0.5rem;
}
.slide-modal.actuator-details-modal-shell .new-sensor-fields {
    gap: 0.65rem;
}
/* Dar más aire al bloque superior (Nombre/Tipo/Estado/Operación) */
.slide-modal.actuator-details-modal-shell .actuator-details-body > .actuator-details-section:first-of-type .field-row:last-child {
    margin-bottom: 0.45rem;
}
.slide-modal.actuator-details-modal-shell .actuator-details-body > .actuator-details-section:first-of-type + .actuator-details-section {
    margin-top: 0.2rem;
}
.slide-modal.actuator-details-modal-shell .field-row {
    margin-bottom: 0.35rem;
}
.slide-modal.actuator-details-modal-shell .field-compact label {
    margin-bottom: 0.2rem;
}
.slide-modal.actuator-details-modal-shell .actuator-details-top-section .field-compact label {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.01em;
}
.slide-modal.actuator-details-modal-shell .actuator-details-top-section .readonly-field {
    line-height: 1.35;
}
.slide-modal.actuator-details-modal-shell .actuator-details-top-section .field-row + .field-row {
    margin-top: 0.15rem;
}
.slide-modal.actuator-details-modal-shell .readonly-field,
.slide-modal.actuator-details-modal-shell .actuator-details-cfg-section-title {
    margin: 0;
}

/* Responsive adjustments para tamaños específicos */
@media (max-width: 800px) {
    .slide-modal.modal-form {
        max-width: 95%;
    }
}

@media (max-width: 640px) {
    .slide-modal.modal-small,
    .slide-modal.modal-medium,
    .slide-modal.modal-large,
    .slide-modal.modal-form {
        max-width: 95%;
    }
}

/* Botón de acción deshabilitado */
.btn-icon.disabled-action {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
    background-color: #f5f5f5 !important;
    color: #999 !important;
}

.btn-icon.disabled-action:hover {
    background-color: #f5f5f5 !important;
    color: #999 !important;
    transform: none !important;
}

/* 📊 REGLAS MOVIDAS A SECCIÓN ESPECÍFICA DE SENSORES */
/* Las reglas de anchos de columnas específicas para sensores 
   se han movido a la sección modular correspondiente arriba
   para evitar conflictos con otras tablas */

/* 📊 CONTADORES DE ELEMENTOS - BADGES INFORMATIVOS
 * ===============================================
 * Badges sutiles para mostrar totales en headers de módulos
 * Diseño discreto similar al header de las tablas
 */

.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    margin-left: 0.75rem;
    background: #f1f5f9;
    color: var(--text-color-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    position: relative;
}

.count-badge:hover {
    background: #e2e8f0;
    color: var(--text-color);
}

/* Variantes sutiles por tipo de módulo - todos usan el mismo estilo discreto */
.count-badge.clients,
.count-badge.areas,
.count-badge.nodes,
.count-badge.sensors {
    background: #f1f5f9;
    color: var(--text-color-secondary);
    border: 1px solid #e2e8f0;
}

.count-badge.clients:hover,
.count-badge.areas:hover,
.count-badge.nodes:hover,
.count-badge.sensors:hover {
    background: #e2e8f0;
    color: var(--text-color);
}

/* Responsive para badges */
@media (max-width: 768px) {
    .count-badge {
        min-width: 1.75rem;
        height: 1.25rem;
        font-size: 0.7rem;
        margin-left: 0.5rem;
    }
}

/* 🎯 PAGINACIÓN NUEVA v3.0 - ESTRUCTURA LIMPIA Y FUNCIONAL
 * ========================================================
 * Reescrita desde cero para eliminar todos los conflictos
 */

/* BASE: Estructura principal */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.8rem;
    margin: 0.5rem 0;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    max-width: calc(100vw - var(--sidebar-width) - 4rem);
    height: 2.25rem;
    width: 100%;
    flex-wrap: nowrap; /* Evitar que los elementos se envuelvan */
    min-width: 700px; /* 🎯 CORREGIDO: Mismo ancho que monitor 17" */
    /* 🗑️ ELIMINADO: overflow-x: auto - Comportamiento uniforme sin scroll */
}

/* INFORMACIÓN: Texto de estado */
.pagination-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
    flex-shrink: 0; /* No comprimir el texto */
    white-space: nowrap; /* Evitar que el texto se envuelva */
}

.page-info {
    font-weight: 500;
    color: #374151;
    white-space: nowrap; /* Evitar que el texto se envuelva */
}

.page-size-info {
    display: none !important;
}

/* CONTROLES: Botones de navegación */
.pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    margin-left: auto; /* ← RESTAURADO: Forzar botones a la derecha */
    white-space: nowrap; /* Evitar wrap de botones */
}

/* CRITICAL: Fuerza que NUNCA se envuelvan */
.pagination-container > * {
    flex-shrink: 0;
    white-space: nowrap;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #374151;
    font-size: 0.75rem;
}

.pagination-btn:hover:not(:disabled) {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    color: #1f2937;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f9fafb;
}

.page-numbers {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0 0.3rem;
}

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.25rem;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #374151;
    font-size: 0.75rem;
    font-weight: 500;
}

.page-btn:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    color: #1f2937;
}

.page-btn.active {
    background-color: #2563eb;
    border-color: #2563eb;
    color: white;
    font-weight: 600;
}

.page-btn.active:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
}

.page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    color: #6b7280;
    font-size: 0.75rem;
    user-select: none;
}

/* RESPONSIVE: Adaptaciones por tamaño de pantalla */
@media (max-width: 1366px) {
    .pagination-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.15rem 0.75rem;
        margin: 0.1rem 0;
        height: 2.5rem; /* AUMENTADO: Más altura para evitar apilamiento vertical */
        border: 1px solid #e5e7eb;
        border-radius: 0.375rem;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        flex-wrap: nowrap; /* Evitar que los elementos se envuelvan */
        min-width: 700px; /* AUMENTADO: Más espacio para evitar wrap */
        width: 100%; /* Asegurar que use todo el ancho disponible */
    }
    
    .page-info {
        font-size: 0.75rem;
    }
    
    .page-size-info {
        display: none !important;
    }
    
    .pagination-controls {
        gap: 0.15rem;
        margin-left: auto; /* Forzar botones a la derecha */
    }
    
    .page-numbers {
        gap: 0.1rem;
        margin: 0 0.15rem;
    }
    
    .page-btn,
    .pagination-btn {
        width: 20px;
        height: 20px;
        font-size: 0.7rem;
    }
    
    .page-btn {
        min-width: 20px;
    }
    
    .page-ellipsis {
        min-width: 20px;
        height: 20px;
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    .pagination-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.35rem 0.6rem;
        margin: 0.1rem 0;
        height: 2.8rem; /* AUMENTADO: Más altura para evitar apilamiento vertical */
        border: 1px solid #e5e7eb;
        border-radius: 0.375rem;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    
    .page-info {
        font-size: 0.75rem;
    }
    
    .page-size-info {
        display: none !important;
    }
    
    .pagination-controls {
        gap: 0.2rem;
        margin-left: auto; /* Forzar botones a la derecha */
    }
    
    .page-btn,
    .pagination-btn {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }
    
    .page-btn {
        min-width: 22px;
    }
    
    .page-ellipsis {
        min-width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .pagination-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.3rem 0.5rem;
        margin: 0.1rem 0;
        height: 3rem; /* AUMENTADO: Más altura para evitar apilamiento vertical */
        border: 1px solid #e5e7eb;
        border-radius: 0.375rem;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    
    .page-info {
        font-size: 0.7rem;
    }
    
    .page-size-info {
        display: none !important;
    }
    
    .pagination-controls {
        gap: 0.15rem;
        margin-left: auto; /* Forzar botones a la derecha */
    }
    
    .page-numbers {
        gap: 0.1rem;
        margin: 0 0.1rem;
    }
    
    .page-btn,
    .pagination-btn {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }
    
    .page-btn {
        min-width: 20px;
    }
    
    .page-ellipsis {
        min-width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }
}

/* UTILIDADES: Estados especiales */
.pagination-container[style*="display: none"],
.pagination-container.hidden {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* Estilos para input-group (campo con botón adjunto) */
.input-group {
    display: flex;
    align-items: stretch;
}

/* ========================================== 
 * 🎨 REGLAS ESPECÍFICAS PARA TABLA CLIENTES
 * UBICADAS AL FINAL PARA MÁXIMA PRIORIDAD
 * ==========================================
 */

/* 🎯 BOTONES OPTIMIZADOS - Equilibrio entre elegancia y espacio vertical */

/* 📱 PANTALLAS PEQUEÑAS (≤1366px): Botones ultra compactos */
@media (max-width: 1366px) {
    .clients-table .data-table .action-btn,
    .clients-table .data-table .btn-icon,
    .areas-table .data-table .action-btn,
    .areas-table .data-table .btn-icon,
    .nodes-table .data-table .action-btn,
    .nodes-table .data-table .btn-icon,
    .sensors-table .data-table .action-btn,
    .sensors-table .data-table .btn-icon,
    .actuators-table .data-table .action-btn,
    .actuators-table .data-table .btn-icon {
        width: 22px !important; /* Ultra compacto para máximo espacio */
        height: 22px !important; /* Mantener proporción cuadrada */
        font-size: 0.7rem !important; /* Iconos ajustados pero legibles */
        border-radius: 0.3rem !important; /* Bordes sutiles */
    }
}

/* 🖥️ PANTALLAS GRANDES (>1366px): Botones elegantes pero conservadores */
@media (min-width: 1367px) {
    .clients-table .data-table .action-btn,
    .clients-table .data-table .btn-icon,
    .areas-table .data-table .action-btn,
    .areas-table .data-table .btn-icon,
    .nodes-table .data-table .action-btn,
    .nodes-table .data-table .btn-icon,
    .sensors-table .data-table .action-btn,
    .sensors-table .data-table .btn-icon,
    .actuators-table .data-table .action-btn,
    .actuators-table .data-table .btn-icon {
        width: 28px !important; /* Elegantes pero sin consumir mucho espacio vertical */
        height: 28px !important; /* Altura controlada para conservar filas */
        font-size: 0.8rem !important; /* Iconos bien visibles */
        border-radius: 0.4rem !important; /* Bordes elegantes pero conservadores */
    }
}

/* =======================================
   ESTILOS ESPECÍFICOS DEL MÓDULO THRESHOLDS
   ======================================= */

.threshold-section {
    margin-bottom: 2rem;
}

.threshold-separator {
    height: 1px;
    background: linear-gradient(to right, transparent, #e2e8f0, transparent);
    margin: 2rem 0;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0 0.5rem;
}

.table-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

.count-badge {
    background: #3b82f6;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.criticality-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.criticality-badge.baja {
    background: #dcfce7;
    color: #166534;
}

.criticality-badge.media {
    background: #fef3c7;
    color: #92400e;
}

.criticality-badge.alta {
    background: #fed7d7;
    color: #c53030;
}

.criticality-badge.critica {
    background: #fbb6ce;
    color: #97266d;
}

.tables-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Responsive para tablas de umbrales */
@media (max-width: 768px) {
    .threshold-section .table-container {
        overflow-x: auto;
    }
    
    .threshold-section .data-table {
        min-width: 800px;
    }
    
    .tables-container {
        gap: 1.5rem;
    }
}

/* ============================================================================= */
/* ESTILOS ESPECÍFICOS DEL MÓDULO DE ALARMAS v1.0                              */
/* ============================================================================= */

/* Estadísticas de alarmas - Estilo consistente con Valores en Vivo */
.stats-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stats-row .stat-item {
    flex: 1;
    min-width: 0;
}

.stat-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.stat-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Badges de criticidad y estado */
.criticality-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.criticality-badge.critical {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.criticality-badge.high {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
}

.criticality-badge.medium {
    background: #fefce8;
    color: #ca8a04;
    border: 1px solid #fef08a;
}

.criticality-badge.low {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.status-badge.active {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.status-badge.acknowledged {
    background: #fefce8;
    color: #ca8a04;
    border: 1px solid #fef08a;
}

.status-badge.resolved {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.type-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.type-badge.analogico {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #dbeafe;
}

.type-badge.digital {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

/* Filas de tabla de alarmas - Estilo consistente con otras tablas */
.alarm-row {
    transition: all 0.2s ease;
    background: white;
}

.alarm-row:hover {
    background: #f8fafc;
}

/* Filas de criticidad sin fondo de color (solo el badge tiene color) */
.alarm-row.critical,
.alarm-row.high,
.alarm-row.medium,
.alarm-row.low {
    background: white;
    border-left: none;
}

.alarm-row.resolved {
    opacity: 0.7;
}

/* Mensaje de alarma */
.alarm-message {
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alarm-message-full {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #2563eb;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
}

/* Celda de valor */
.value-cell {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-weight: 600;
}

.value-highlight {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 1.1em;
    color: #dc2626;
    background: #fef2f2;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #fecaca;
}

/* Duración */
.duration {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.duration.active {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    animation: pulse-duration 2s infinite;
}

@keyframes pulse-duration {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Modal de detalles de alarma */
.alarm-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.detail-section {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.detail-section.full-width {
    grid-column: 1 / -1;
}

.detail-section h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e9ecef;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row label {
    font-weight: 600;
    color: #64748b;
    font-size: 0.875rem;
}

.detail-row span {
    font-weight: 500;
    color: #1e293b;
}

/* Botones de acción específicos para alarmas */
.btn-warning {
    background: #f59e0b;
    color: white;
    border: 1px solid #d97706;
}

.btn-warning:hover {
    background: #d97706;
    border-color: #b45309;
}

.btn-warning:disabled {
    background: #fbbf24;
    border-color: #f59e0b;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading spinner para alarmas */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: #64748b;
}

.loading-spinner span {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Estado vacío mejorado para alarmas */
#alarms-container .empty-state {
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 12px;
    border: 2px solid #bbf7d0;
}

#alarms-container .empty-state .empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

#alarms-container .empty-state h3 {
    color: #16a34a;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

#alarms-container .empty-state p {
    color: #166534;
    font-size: 1.125rem;
    margin: 0;
}

/* Tabla de alarmas específica */
.alarms-table .data-table {
    min-width: 1100px;
    table-layout: fixed;
}

/* Anchos específicos de columnas de alarmas */
/* Orden: # | Fecha | Sensor | Criticidad | Valor | Mensaje | Duración | Estado | Ubicación | Acciones */
.alarms-table .data-table th:nth-child(1),
.alarms-table .data-table td:nth-child(1) { width: 30px; }  /* # */

.alarms-table .data-table th:nth-child(2),
.alarms-table .data-table td:nth-child(2) { width: 60px; }  /* Fecha */

.alarms-table .data-table th:nth-child(3),
.alarms-table .data-table td:nth-child(3) { width: 17%; }   /* Sensor: (Id:XX) + nombre */

.alarms-table .data-table th:nth-child(4),
.alarms-table .data-table td:nth-child(4) { width: 75px; }  /* Criticidad */

.alarms-table .data-table th:nth-child(5),
.alarms-table .data-table td:nth-child(5) { width: 65px; }  /* Valor */

.alarms-table .data-table th:nth-child(6),
.alarms-table .data-table td:nth-child(6) { width: 14%; }   /* Mensaje */

.alarms-table .data-table th:nth-child(7),
.alarms-table .data-table td:nth-child(7) { width: 60px; }  /* Duración */

.alarms-table .data-table th:nth-child(8),
.alarms-table .data-table td:nth-child(8) { width: 75px; }  /* Estado */

.alarms-table .data-table th:nth-child(9),
.alarms-table .data-table td:nth-child(9) { width: 19%; }   /* Ubicación: Cliente / Area / Nodo */

.alarms-table .data-table th:nth-child(10),
.alarms-table .data-table td:nth-child(10) { width: 85px; } /* Acciones */

/* Columna de enumeración de filas */
.alarms-table th.row-number,
.alarms-table .row-number-cell {
    text-align: center;
    color: #6b7280;
    font-weight: 500;
}

.alarms-table .row-number-cell .row-number {
    font-size: 0.85rem;
    color: #9ca3af;
}

/* Asegurar que el texto truncado tenga ellipsis */
.alarms-table .sensor-cell,
.alarms-table .message-cell,
.alarms-table .location-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Botones de acción específicos para alarmas */
.alarms-table .action-buttons {
    gap: 0.35rem;
    justify-content: center;
}

.alarms-table .btn-icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.85rem;
    font-weight: 600;
}

.alarms-table .btn-icon.view {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.alarms-table .btn-icon.view:hover:not(.disabled) {
    background: #dbeafe;
    border-color: #60a5fa;
    color: #1d4ed8;
}

.alarms-table .btn-icon.edit {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #d97706;
}

.alarms-table .btn-icon.edit:hover:not(.disabled) {
    background: #fde68a;
    border-color: #f59e0b;
    color: #b45309;
}

.alarms-table .btn-icon.status {
    background: #dcfce7;
    border-color: #86efac;
    color: #16a34a;
}

.alarms-table .btn-icon.status:hover:not(.disabled) {
    background: #bbf7d0;
    border-color: #4ade80;
    color: #15803d;
}

/* Botones deshabilitados en tabla de alarmas */
.alarms-table .btn-icon.disabled,
.alarms-table .btn-icon:disabled {
    background: #f5f5f5 !important;
    border-color: #e5e5e5 !important;
    color: #c0c0c0 !important;
    cursor: not-allowed;
    opacity: 0.6;
}

.alarms-table .btn-icon.disabled:hover,
.alarms-table .btn-icon:disabled:hover {
    background: #f5f5f5 !important;
    border-color: #e5e5e5 !important;
    color: #c0c0c0 !important;
    transform: none;
    box-shadow: none;
}

/* Badge de contador para alarmas */
.count-badge.alarms {
    background: #dc2626;
    color: white;
}

/* Estilos específicos para la tarjeta de alarmas en el dashboard */
.alarm-pending-card {
    position: relative;
    transition: all 0.3s ease;
}

.alarm-pending-card.has-critical {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #fecaca;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
}

.alarm-pending-card.has-critical .stat-value {
    color: #dc2626;
    animation: pulse-critical 2s infinite;
}

.alarm-pending-card.has-high {
    background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
    border: 2px solid #fed7aa;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.15);
}

.alarm-pending-card.has-high .stat-value {
    color: #ea580c;
}

.alarm-pending-card.no-alarms {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #bbf7d0;
}

.alarm-pending-card.no-alarms .stat-value {
    color: #16a34a;
}

@keyframes pulse-critical {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.8; 
        transform: scale(1.05);
    }
}

/* Indicador de alarmas críticas en el menú */
.nav-item[data-section="alarms"] {
    position: relative;
}

.nav-item[data-section="alarms"].has-critical-alarms::after {
    content: '!';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 12px;
    height: 12px;
    background: #dc2626;
    color: white;
    border-radius: 50%;
    font-size: 8px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-critical 2s infinite;
}

/* Responsive para alarmas */
@media (max-width: 1200px) {
    .alarm-detail-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-row {
        flex-wrap: wrap;
    }
    
    .stat-item {
        min-width: calc(50% - 0.5rem);
    }
}

@media (max-width: 768px) {
    .stats-row {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .stat-item {
        min-width: 100%;
    }
    
    .alarms-table .data-table {
        min-width: 900px;
    }
    
    .alarm-message {
        max-width: 150px;
    }
}

/* ============================================ */
/* FILTROS AVANZADOS - PANEL COMPLETO */
/* ============================================ */

.advanced-filters-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 1rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.advanced-filters-header {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s;
    min-height: 44px; /* Misma altura que los filtros básicos */
}

.advanced-filters-header:hover {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
}

.advanced-filters-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-direction: row; /* Cambio a fila horizontal */
}

.advanced-filters-title .icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.advanced-filters-title span:not(.icon) {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.9rem;
    line-height: 1;
    white-space: nowrap;
}

.advanced-filters-subtitle {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 400;
    margin-left: 0.5rem;
    line-height: 1;
    white-space: nowrap;
}

.toggle-icon {
    font-size: 1rem;
    color: #64748b;
    transition: transform 0.3s ease;
    user-select: none;
    flex-shrink: 0;
}

.advanced-filters-panel.expanded .toggle-icon {
    transform: rotate(180deg);
}

.advanced-filters-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.advanced-filters-panel.expanded .advanced-filters-content {
    max-height: 1000px;
    transition: max-height 0.5s ease-in;
}

.advanced-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

.advanced-filter-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.25rem;
}

.filter-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.filter-section-title .icon {
    font-size: 1.1rem;
}

/* Inputs de rango */
.range-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.range-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.range-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Grupos de checkboxes */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.checkbox-item:hover {
    background: rgba(59, 130, 246, 0.05);
}

.checkbox-item input[type="checkbox"],
.checkbox-item input[type="radio"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #3b82f6;
}

.checkbox-label {
    font-size: 0.9rem;
    color: #374151;
    user-select: none;
}

/* Botones de preset temporal */
.preset-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.btn-preset {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    background: #ffffff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
    color: #374151;
}

.btn-preset:hover {
    border-color: #3b82f6;
    background: #f0f9ff;
}

.btn-preset.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* Inputs de fecha/hora */
.datetime-inputs {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
}

.datetime-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.datetime-group label {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

.datetime-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

.datetime-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.period-info {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #f0f9ff;
    border-radius: 4px;
    border-left: 3px solid #3b82f6;
}

.period-info .text-muted {
    color: #64748b;
    font-size: 0.85rem;
}

.period-info #period-text {
    font-weight: 600;
    color: #1e40af;
}

/* Acciones rápidas */
.quick-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn-quick-action {
    padding: 0.75rem 1rem;
    border: none;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
    text-align: left;
}

.btn-quick-action:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

/* Mensaje de advertencia para filtros avanzados */
.advanced-filter-warning {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    color: #92400e;
    font-size: 0.9rem;
    margin: 0 1.5rem 1rem;
    border-radius: 4px;
}

.advanced-filter-warning .icon {
    font-size: 1.25rem;
}

/* Acciones del panel */
.advanced-filter-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    gap: 1rem;
}

.actions-left, .actions-right {
    display: flex;
    gap: 0.75rem;
}

.btn-secondary {
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-secondary:hover {
    border-color: #9ca3af;
    background: #f9fafb;
}

.btn-primary {
    padding: 0.5rem 1.25rem;
    border: none;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

/* Responsivo para filtros avanzados */
@media (max-width: 768px) {
    .advanced-filters-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }
    
    .advanced-filter-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .actions-left, .actions-right {
        justify-content: center;
    }
    
    .preset-buttons {
        grid-template-columns: 1fr;
    }
    
    .range-inputs, .datetime-inputs {
        grid-template-columns: 1fr;
    }
}

/* ============================================ */
/* MODO COMPACTO PARA SENSORES */
/* ============================================ */

.sensors-grid.compact-mode {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.sensors-grid.compact-mode .sensor-card {
    padding: 0.75rem;
    min-height: auto;
}

.sensors-grid.compact-mode .sensor-header h3 {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.sensors-grid.compact-mode .sensor-info {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
}

.sensors-grid.compact-mode .sensor-value {
    font-size: 1.25rem;
    margin: 0.5rem 0;
}

.sensors-grid.compact-mode .sensor-meta {
    font-size: 0.7rem;
    gap: 0.25rem;
}

.sensors-grid.compact-mode .sensor-meta .meta-item {
    padding: 0.125rem 0.375rem;
}

/* 💓 Badges más pequeños en vista compacta */
.sensors-grid.compact-mode .sensor-type-badge {
    font-size: 0.625rem;
    padding: 2px 6px;
}

.sensors-grid.compact-mode .badge-hb {
    font-size: 0.625rem;
    padding: 2px 6px;
}

/* 📅 Texto de última lectura más pequeño en vista compacta */
.sensors-grid.compact-mode .sensor-last-reading {
    font-size: 0.65rem;
}

.sensors-grid.compact-mode .timestamp {
    font-size: 0.65rem;
}

/* 🎯 Indicador de umbrales más pequeño en vista compacta */
.sensors-grid.compact-mode .sensor-th-dot {
    width: 6px;
    height: 6px;
}

/* ============================================ */
/* BARRA DE FILTROS REESTRUCTURADA */
/* ============================================ */

.filters-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    background: #ffffff;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.filters-left-section {
    flex: 1;
    display: flex;
    align-items: center;
}

/* ============================================ */
/* SELECTOR DE VISUALIZACIÓN */
/* ============================================ */

.view-selector-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.view-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
}

.view-label .icon {
    font-size: 1rem;
}

.label-text {
    font-weight: 500;
    white-space: nowrap;
}

.view-selector {
    padding: 0.375rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 140px;
}

.view-selector:hover {
    border-color: #9ca3af;
    background: #f9fafb;
}

.view-selector:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Responsivo para barra de filtros */
@media (max-width: 768px) {
    .filters-bar {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .filters-left-section {
        flex: none;
    }
    
    .view-selector-container {
        align-self: flex-end;
    }
    
    .label-text {
        display: none; /* Ocultar texto en móvil, solo ícono */
    }
    
    .view-selector {
        min-width: 120px;
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
}

/* ========================================
   VISTA AGRUPADA POR NODO
   ======================================== */

/* Contenedor principal para vista agrupada */
.sensors-grid.grouped-mode {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Grupo de nodo */
.node-group {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

.node-group:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 💓 Estado OFFLINE del nodo en vista agrupada */
.node-group--offline {
    background: #fff5f5;
    border: 1px solid #ffc2c2;
}

/* Header del nodo */
.node-header {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 60px;
}

/* 💓 Fondo rosado suave cuando el nodo está offline */
.node-header--offline {
    background: #fff8f8;
}

.node-icon {
    font-size: 1.25rem;
    width: 36px;
    height: 36px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.node-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.node-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

.node-subtitle {
    margin: 0;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    line-height: 1.2;
}

.node-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    flex-shrink: 0;
}

.sensor-count-badge {
    background: #e0f2fe;
    color: #0369a1;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.688rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
}

/* Mantener compatibilidad con .node-stats y .sensor-count (deprecated) */
.node-stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sensor-count {
    background: #e0f2fe;
    color: #0369a1;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Contenedor de sensores del nodo */
.node-sensors {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Tarjeta compacta de sensor */
.compact-sensor-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
    position: relative;
}

.compact-sensor-card:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    transform: translateY(-1px);
}

.compact-sensor-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 1rem;
}

/* Quitar el espacio en blanco grande entre el nombre del sensor y su valor
   dentro de las vistas agrupadas (Por Nodo y Por Área), pero manteniendo
   los valores alineados en columna */
.sensors-grid.grouped-mode .compact-sensor-main,
.sensors-grid.grouped-area-mode .compact-sensor-main {
    justify-content: flex-start;
    gap: 1.5rem;
}

.sensors-grid.grouped-mode .compact-sensor-info,
.sensors-grid.grouped-area-mode .compact-sensor-info {
    min-width: 180px;
}

/* ============================================================
   LAYOUT ADAPTATIVO DE VISTAS AGRUPADAS (Por Nodo / Por Área)
   Se adapta según la cantidad de tarjetas detectada con :has()
   ============================================================ */

/* Grid base de 5 columnas (la unidad "fila") */
.sensors-grid.grouped-mode,
.sensors-grid.grouped-area-mode {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}

/* ============================================================
   CANTIDAD Y PROPORCIÓN DE COLUMNAS DEL GRID SEGÚN LA CANTIDAD
   DE TARJETAS. Las tarjetas ocupan siempre TODO el ancho.
   ============================================================ */

/* 1 tarjeta → 1 columna de ancho completo */
.sensors-grid.grouped-mode:has(> .node-group:nth-child(1):last-child),
.sensors-grid.grouped-area-mode:has(> .node-group:nth-child(1):last-child) {
    grid-template-columns: minmax(0, 1fr);
}

/* 2 tarjetas → 2 columnas iguales */
.sensors-grid.grouped-mode:has(> .node-group:nth-child(2):last-child),
.sensors-grid.grouped-area-mode:has(> .node-group:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 3 tarjetas → 2 anchas (2fr) + 1 angosta (1fr) */
.sensors-grid.grouped-mode:has(> .node-group:nth-child(3):last-child),
.sensors-grid.grouped-area-mode:has(> .node-group:nth-child(3):last-child) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr);
}

/* 4 tarjetas → 3 angostas (1fr) + 1 ancha (2fr) */
.sensors-grid.grouped-mode:has(> .node-group:nth-child(4):last-child),
.sensors-grid.grouped-area-mode:has(> .node-group:nth-child(4):last-child) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
}

/* ============================================================
   LAYOUT DE ETIQUETAS DENTRO DE CADA TARJETA
   Cantidad de columnas de tags = span de la tarjeta
   ============================================================ */

/* Base: 1 columna de tags (stacked) */
.sensors-grid.grouped-mode .node-sensors,
.sensors-grid.grouped-area-mode .node-sensors {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    align-items: stretch;
}

/* 1 tarjeta → 5 cols de tags */
.sensors-grid.grouped-mode:has(> .node-group:nth-child(1):last-child) .node-sensors,
.sensors-grid.grouped-area-mode:has(> .node-group:nth-child(1):last-child) .node-sensors {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* 2 tarjetas → 2 cols de tags cada una */
.sensors-grid.grouped-mode:has(> .node-group:nth-child(2):last-child) .node-sensors,
.sensors-grid.grouped-area-mode:has(> .node-group:nth-child(2):last-child) .node-sensors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 3 tarjetas → las 2 que NO son narrow tienen 2 cols de tags */
.sensors-grid.grouped-mode:has(> .node-group:nth-child(3):last-child) > .node-group:not(.node-group--narrow) .node-sensors,
.sensors-grid.grouped-area-mode:has(> .node-group:nth-child(3):last-child) > .node-group:not(.node-group--narrow) .node-sensors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 4 tarjetas → la wide (la de más etiquetas) tiene 2 cols de tags */
.sensors-grid.grouped-mode:has(> .node-group:nth-child(4):last-child) > .node-group--wide .node-sensors,
.sensors-grid.grouped-area-mode:has(> .node-group:nth-child(4):last-child) > .node-group--wide .node-sensors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Las tarjetas especiales se mueven a la posición correcta del grid */
.sensors-grid.grouped-mode:has(> .node-group:nth-child(3):last-child) > .node-group--narrow,
.sensors-grid.grouped-area-mode:has(> .node-group:nth-child(3):last-child) > .node-group--narrow,
.sensors-grid.grouped-mode:has(> .node-group:nth-child(4):last-child) > .node-group--wide,
.sensors-grid.grouped-area-mode:has(> .node-group:nth-child(4):last-child) > .node-group--wide {
    order: 99;
}

/* ============================================================
   LAYOUT INTERNO DE LAS ETIQUETAS
   Tarjetas ANGOSTAS (5+) → layout compacto, valor a la derecha
   Tarjetas ANCHAS (span 2+) → nombre y valor alineados a izquierda
   ============================================================ */

/* Base (tarjetas angostas, para 5+ tarjetas): layout compacto */
.sensors-grid.grouped-mode .compact-sensor-main,
.sensors-grid.grouped-area-mode .compact-sensor-main {
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.sensors-grid.grouped-mode .compact-sensor-info,
.sensors-grid.grouped-area-mode .compact-sensor-info {
    min-width: 0;
    flex: 1 1 auto;
}

/* Valor nunca se parte en varias líneas */
.sensors-grid.grouped-mode .compact-sensor-value,
.sensors-grid.grouped-area-mode .compact-sensor-value {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Que la fecha/hora tampoco se parta */
.sensors-grid.grouped-mode .value-time,
.sensors-grid.grouped-area-mode .value-time {
    white-space: nowrap;
}

/* Permitir que tarjetas y tags se encojan dentro del grid */
.sensors-grid.grouped-mode .node-group,
.sensors-grid.grouped-area-mode .node-group {
    min-width: 0;
}

.sensors-grid.grouped-mode .compact-sensor-card,
.sensors-grid.grouped-area-mode .compact-sensor-card {
    min-width: 0;
}

.compact-sensor-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
}

/* Fila de ID del sensor + indicador de umbrales */
.compact-sensor-id-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.compact-sensor-name {
    font-weight: 500;
    color: #1f2937;
    font-size: 0.875rem;
    line-height: 1.2;
}

.compact-sensor-id {
    font-size: 0.75rem;
    color: #6b7280;
    font-family: 'Courier New', monospace;
}

.compact-sensor-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.value-text {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.2;
}

.value-time {
    font-size: 0.75rem;
    color: #6b7280;
    font-family: 'Courier New', monospace;
}

/* 📅 Timestamp inline en vista Por Nodo - estilo discreto/secundario */
.sensor-last-time-inline {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 500;
    margin-left: 0.375rem;
}

/* LED para sensores digitales */
.compact-led {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 0.75rem;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

/* Estados de sensores */
.compact-sensor-card.normal .value-text {
    color: #059669;
}

.compact-sensor-card.alerta .value-text {
    color: #d97706;
}

.compact-sensor-card.critico .value-text {
    color: #dc2626;
}

.compact-sensor-card.sin-datos .value-text {
    color: #6b7280;
}

.compact-sensor-card.sin-umbrales .value-text {
    color: #4f46e5;
}

/* Estados digitales */
.compact-sensor-card.activo .value-text {
    color: #059669;
}

.compact-sensor-card.inactivo .value-text {
    color: #6b7280;
}

/* Estados digitales - NORMAL/ALERTA */
.compact-sensor-card.normal .value-text {
    color: #059669;
}

.compact-sensor-card.alerta .value-text {
    color: #dc2626;
}

/* LEDs digitales */
.compact-led.activo {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.compact-led.inactivo {
    background: #6b7280;
    box-shadow: 0 0 4px rgba(107, 114, 128, 0.3);
}

/* LEDs digitales - Estados NORMAL/ALERTA */
.compact-led.normal {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.compact-led.alerta {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.compact-led.sin-datos {
    background: #9ca3af;
    box-shadow: none;
}

@keyframes sensor-alert-blink {
    0%, 100% {
        background: #fee2e2;
        border-color: #ef4444;
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0);
    }
    50% {
        background: #fecaca;
        border-color: #b91c1c;
        box-shadow: 0 0 14px 2px rgba(239, 68, 68, 0.55);
    }
}

.compact-sensor-card.alerta,
.compact-sensor-card.critico {
    animation: sensor-alert-blink 1s ease-in-out infinite;
    border-color: #ef4444;
}

.compact-sensor-card.alerta:hover,
.compact-sensor-card.critico:hover {
    background: #fecaca;
    border-color: #b91c1c;
    transform: translateY(-1px);
}

@keyframes sensor-alert-led-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(239, 68, 68, 0.6); transform: scale(1); }
    50%      { box-shadow: 0 0 14px rgba(239, 68, 68, 0.95); transform: scale(1.15); }
}
.compact-sensor-card.alerta .compact-led,
.compact-sensor-card.critico .compact-led {
    animation: sensor-alert-led-pulse 1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .compact-sensor-card.alerta,
    .compact-sensor-card.critico {
        animation: none;
        background: #fee2e2;
        border-color: #ef4444;
    }
    .compact-sensor-card.alerta .compact-led,
    .compact-sensor-card.critico .compact-led {
        animation: none;
    }
}

/* Responsive para vista agrupada */
@media (max-width: 768px) {
    .node-header {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }
    
    .node-icon {
        width: 32px;
        height: 32px;
        font-size: 1.2rem;
    }
    
    .node-title {
        font-size: 1rem;
    }
    
    .node-subtitle {
        font-size: 0.8rem;
    }
    
    .node-sensors {
        padding: 0.75rem 1rem;
        gap: 0.5rem;
    }
    
    .compact-sensor-card {
        padding: 0.5rem 0.75rem;
    }
    
    .compact-sensor-main {
        gap: 0.75rem;
    }
    
    .compact-sensor-name {
        font-size: 0.8rem;
    }
    
    .compact-sensor-id {
        font-size: 0.7rem;
    }
    
    .value-text {
        font-size: 0.8rem;
    }
    
    .value_time {
        font-size: 0.7rem;
    }
}

/* =====================================================
   ⭐ MODO DEMO - Estilos del Banner y Modo Solo Lectura
   ===================================================== */

.demo-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 20px;
    margin: 0 0 20px 0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    animation: slideDownDemo 0.3s ease-out;
    position: relative;
    z-index: 10;
}

.demo-banner-content {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 1400px;
    margin: 0 auto;
}

.demo-icon {
    font-size: 24px;
    animation: pulseDemo 2s ease-in-out infinite;
}

.demo-text {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.demo-info {
    flex: 1;
    font-size: 14px;
    opacity: 0.9;
}

.demo-exit-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.demo-exit-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.demo-exit-btn:active {
    transform: translateY(0);
}

/* Animaciones */
@keyframes slideDownDemo {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseDemo {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* ⭐ Modo Solo Lectura - Deshabilitar botones de creación/edición/eliminación */
.demo-readonly-mode .btn-primary:not(.demo-exit-btn),
.demo-readonly-mode #btn-create-sensor,
.demo-readonly-mode #btn-create-actuator,
.demo-readonly-mode #btn-create-client,
.demo-readonly-mode #btn-create-area,
.demo-readonly-mode #btn-create-node,
.demo-readonly-mode #btn-create-sensor-type,
.demo-readonly-mode #btn-create-threshold,
.demo-readonly-mode .btn-icon.btn-edit,
.demo-readonly-mode .btn-icon.btn-delete,
.demo-readonly-mode .btn-icon.delete-sensor,
.demo-readonly-mode .btn-icon.edit-sensor,
.demo-readonly-mode .btn-icon.status-sensor {
    opacity: 0.3;
    cursor: not-allowed !important;
    pointer-events: none !important;
    position: relative;
}

.demo-readonly-mode .btn-primary:not(.demo-exit-btn)::after,
.demo-readonly-mode #btn-create-sensor::after,
.demo-readonly-mode #btn-create-actuator::after,
.demo-readonly-mode #btn-create-client::after,
.demo-readonly-mode #btn-create-area::after,
.demo-readonly-mode #btn-create-node::after {
    content: '🔒';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
}

/* Indicador visual en formularios (aunque no deberían ser accesibles) */
.demo-readonly-mode form input:not([type="checkbox"]),
.demo-readonly-mode form select,
.demo-readonly-mode form textarea {
    background-color: #f3f4f6;
    cursor: not-allowed;
}

/* Responsive para el banner demo */
@media (max-width: 768px) {
    .demo-banner {
        padding: 10px 15px;
    }
    
    .demo-banner-content {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .demo-text {
        font-size: 14px;
    }
    
    .demo-info {
        flex-basis: 100%;
        font-size: 12px;
    }
    
    .demo-exit-btn {
        font-size: 12px;
        padding: 5px 12px;
    }
}

@media (max-width: 480px) {
    .demo-icon {
        font-size: 20px;
    }
    
    .demo-text {
        font-size: 12px;
    }
}
/* ============================================
   ALERT CONTACTS MODULE
   Estilos espec�ficos para el m�dulo de contactos de alerta
   ============================================ */

/* Form hints - Textos de ayuda debajo de inputs */
.form-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
}

/* Form error messages */
.form-error {
    padding: 12px;
    margin-top: 16px;
    background-color: #fee;
    border: 1px solid #fcc;
    border-radius: 4px;
    color: #c33;
    font-size: 14px;
}

.form-error.hidden {
    display: none;
}

/* Form textarea (si no existe una clase gen�rica) */
.form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.2s;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-textarea:hover {
    border-color: #9ca3af;
}

/* Form checkbox styling */
.form-checkbox {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    cursor: pointer;
    accent-color: var(--primary-color, #2563eb);
}

/* Required field indicator */
.form-label.required::after {
    content: ' *';
    color: #ef4444;
}

/* Empty state icon para contactos */
.empty-state-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Badges de canales de contacto */
.channel-badge {
    display: inline-block;
    padding: 4px 8px;
    margin: 0 2px;
    border-radius: 4px;
    font-size: 16px;
    background-color: #f3f4f6;
    cursor: help;
}

.channel-badge.email {
    background-color: #e0f2fe;
}

.channel-badge.whatsapp {
    background-color: #dcfce7;
}

.channel-badge.telegram {
    background-color: #dbeafe;
}

/* Contact modal styles - siguiendo el patrón de áreas */
.new-contact-header {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1.25rem;
    border: 1px solid #3b82f6;
}

.new-contact-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.new-contact-icon {
    font-size: 1.5rem;
    background: #3b82f6;
    color: white;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.new-contact-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.new-contact-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e40af;
    margin: 0;
}

.new-contact-subtitle {
    font-size: 0.75rem;
    color: #2563eb;
    margin: 0;
}

.new-contact-fields {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* Versión compacta del header para formularios sin scroll */
.new-contact-header-compact {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    padding: 0.625rem 0.875rem;
    border-radius: 0.375rem;
    margin-bottom: 0.875rem;
    border: 1px solid #3b82f6;
}

/* Campos con menos espacio vertical */
.new-contact-fields-compact {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    overflow: visible;
}

/* Asegurar que los campos del formulario permitan que los dropdowns se muestren */
.field-compact {
    position: relative;
    overflow: visible;
}

/* Asegurar que el formulario compacto permita que los dropdowns se muestren */
.compact-form {
    overflow: visible;
}

/* ============================================
   TABLA CONTACTOS DE ALERTA - Anchos de columnas
   ============================================ */
#alert-contacts-container .data-table {
    table-layout: fixed;
    width: 100%;
}

/* Quitar negritas de los datos en las filas */
#alert-contacts-container .data-table tbody td {
    font-weight: normal !important;
}

/* Quitar negritas de los datos en Políticas de Escalamiento */
#policies-container .data-table tbody td {
    font-weight: normal !important;
}

/* Estilos para columna de acciones en Políticas de Escalamiento */
#policies-container .col-acciones {
    width: 170px;
    text-align: center;
}

#policies-container .data-table td.col-acciones {
    vertical-align: middle;
}

#policies-container .action-buttons {
    flex-wrap: nowrap;
}

#alert-contacts-container .col-id {
    width: 60px;
    min-width: 60px;
    text-align: center;
}

#alert-contacts-container .col-nombre {
    width: 18%;
    min-width: 140px;
}

#alert-contacts-container .col-cliente {
    width: 12%;
    min-width: 100px;
}

#alert-contacts-container .col-canales {
    width: 130px;
    min-width: 130px;
    text-align: left;
}

/* Contenedor de iconos de canales */
.canales-icons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.canales-icons .channel-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 14px;
}

.canales-icons .channel-icon.email {
    background-color: #dbeafe;
    color: #2563eb;
}

.canales-icons .channel-icon.whatsapp {
    background-color: #dcfce7;
    color: #16a34a;
}

.canales-icons .channel-icon.telegram {
    background-color: #e0f2fe;
    color: #0284c7;
}

.canales-icons .channel-icon.disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    opacity: 0.5;
}

#alert-contacts-container .col-contacto {
    width: auto; /* Toma el espacio restante */
    min-width: 150px;
}

#alert-contacts-container .col-rol {
    width: 15%;
    min-width: 130px;
}

#alert-contacts-container .col-estado {
    width: 120px;
    min-width: 120px;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
}

#alert-contacts-container .col-acciones {
    width: 130px;
    text-align: center;
}

/* Clase utilitaria para truncar texto con ellipsis */
.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Grupo de checkboxes inline para formularios */
.checkbox-group-inline {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #374151;
}

.checkbox-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox-inline i {
    font-size: 14px;
}

/* Mensaje de error del formulario */
.form-error-message {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 12px;
    font-size: 0.875rem;
}


/* Fila con dos columnas para formulario compacto */
.field-row-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Responsive para contact header */
@media (max-width: 768px) {
    .new-contact-header {
        padding: 0.75rem;
    }
    
    .new-contact-icon {
        width: 2rem;
        height: 2rem;
        font-size: 1.25rem;
    }

    .field-row-two-cols {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
}

/* =========================================
   WEBHOOK INTEGRATIONS MODULE STYLES
   ========================================= */

/* Tabla de webhooks - Distribución optimizada */
#webhook-integrations-container .data-table {
    table-layout: fixed;
    width: 100%;
}

/* Anchos específicos por columna - CON ID */
#webhook-integrations-container .data-table thead th:nth-child(1),
#webhook-integrations-container .data-table tbody td:nth-child(1) {
    width: 60px; /* ID */
}

#webhook-integrations-container .data-table thead th:nth-child(2),
#webhook-integrations-container .data-table tbody td:nth-child(2) {
    width: 300px; /* Cliente - MÍNIMO 300px para nombres completos */
}

#webhook-integrations-container .data-table thead th:nth-child(3),
#webhook-integrations-container .data-table tbody td:nth-child(3) {
    width: auto; /* URL del Webhook - 50% del espacio restante */
    min-width: 200px;
}

#webhook-integrations-container .data-table thead th:nth-child(4),
#webhook-integrations-container .data-table tbody td:nth-child(4) {
    width: auto; /* Descripción - 50% del espacio restante (igual que URL) */
    min-width: 200px;
}

#webhook-integrations-container .data-table thead th:nth-child(5),
#webhook-integrations-container .data-table tbody td:nth-child(5) {
    width: 130px; /* Estado */
    text-align: center;
}

#webhook-integrations-container .data-table thead th:nth-child(6),
#webhook-integrations-container .data-table tbody td:nth-child(6) {
    width: 150px; /* Última Actualización */
}

#webhook-integrations-container .data-table thead th:nth-child(7),
#webhook-integrations-container .data-table tbody td:nth-child(7) {
    width: 110px; /* Acciones */
    text-align: center;
}

/* Cuando NO es superadmin (sin columna Cliente) */
#webhook-integrations-container .data-table.no-cliente-column thead th:nth-child(1),
#webhook-integrations-container .data-table.no-cliente-column tbody td:nth-child(1) {
    width: 60px; /* ID */
}

#webhook-integrations-container .data-table.no-cliente-column thead th:nth-child(2),
#webhook-integrations-container .data-table.no-cliente-column tbody td:nth-child(2) {
    width: auto; /* URL del Webhook - 50% del espacio disponible */
    min-width: 250px;
}

#webhook-integrations-container .data-table.no-cliente-column thead th:nth-child(3),
#webhook-integrations-container .data-table.no-cliente-column tbody td:nth-child(3) {
    width: auto; /* Descripción - 50% del espacio disponible */
    min-width: 250px;
}

#webhook-integrations-container .data-table.no-cliente-column thead th:nth-child(4),
#webhook-integrations-container .data-table.no-cliente-column tbody td:nth-child(4) {
    width: 130px; /* Estado */
}

#webhook-integrations-container .data-table.no-cliente-column thead th:nth-child(5),
#webhook-integrations-container .data-table.no-cliente-column tbody td:nth-child(5) {
    width: 150px; /* Última Actualización */
}

#webhook-integrations-container .data-table.no-cliente-column thead th:nth-child(6),
#webhook-integrations-container .data-table.no-cliente-column tbody td:nth-child(6) {
    width: 110px; /* Acciones */
}

/* Columna ID */
#webhook-integrations-container .col-id {
    text-align: center;
    font-weight: 500;
    color: #64748b;
}

/* Columna de URL con truncado */
#webhook-integrations-container .col-webhook-url {
    overflow: hidden;
}

#webhook-integrations-container .webhook-url {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.85rem;
    color: #4b5563;
    background-color: #f9fafb;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
}

/* Columna descripción con truncado */
#webhook-integrations-container .col-descripcion {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Columna Cliente - SIN truncado para mejor lectura */
#webhook-integrations-container .col-cliente {
    white-space: normal;
    word-wrap: break-word;
}

/* Columna Estado - SIN truncado, más ancho */
#webhook-integrations-container .col-estado {
    text-align: center;
    white-space: nowrap;
}

/* Botones de acción para webhooks */
#webhook-integrations-container .action-buttons {
    gap: 0.375rem;
    justify-content: center;
    flex-wrap: nowrap;
}

/* Responsive para webhooks */
@media (max-width: 1366px) {
    #webhook-integrations-container .data-table thead th:nth-child(2),
    #webhook-integrations-container .data-table tbody td:nth-child(2) {
        width: 250px; /* Cliente más compacto en pantallas pequeñas */
    }
    
    #webhook-integrations-container .data-table thead th:nth-child(3),
    #webhook-integrations-container .data-table tbody td:nth-child(3) {
        min-width: 180px; /* URL más compacta */
    }
    
    #webhook-integrations-container .data-table thead th:nth-child(4),
    #webhook-integrations-container .data-table tbody td:nth-child(4) {
        min-width: 180px; /* Descripción más compacta */
    }
    
    #webhook-integrations-container .data-table thead th:nth-child(5),
    #webhook-integrations-container .data-table tbody td:nth-child(5) {
        width: 120px; /* Estado ligeramente más compacto */
    }
}

/* Badge de contador para webhooks */
.count-badge.webhooks {
    background-color: #8b5cf6;
}

/* Estado vacío mejorado */
#webhooks-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
}

#webhooks-empty-state .empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

#webhooks-empty-state .empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

#webhooks-empty-state .empty-state-description {
    color: var(--text-color-secondary);
    font-size: 0.95rem;
}

/* Formulario de webhook */
#webhook-form .form-help {
    display: block;
    font-size: 0.8rem;
    color: var(--text-color-secondary);
    margin-top: 4px;
}

#webhook-form input[type="url"] {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    #webhook-integrations-container .col-webhook-url {
        max-width: 200px;
    }
    
    #webhook-integrations-container .col-descripcion {
        max-width: 150px;
    }
}

/* ========================================
   INDICADORES DE FILTROS ACTIVOS (UX)
   ======================================== */

/* Badge contador de filtros avanzados */
.filters-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #3b82f6;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 10px;
    margin-left: 0.5rem;
}

/* Barra de chips de filtros aplicados */
.active-filters-chips {
    background: #f0f9ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.filters-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e40af;
    white-space: nowrap;
}

.filters-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    border: 1px solid #3b82f6;
    color: #1e40af;
    padding: 0.4rem 0.75rem;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s;
    cursor: default;
}

.filter-chip .chip-remove {
    cursor: pointer;
    color: #64748b;
    font-weight: 700;
    transition: color 0.2s;
    margin-left: 0.25rem;
}

.filter-chip .chip-remove:hover {
    color: #dc2626;
}

/* ========================================
   SUBBADGES DE ESTADO DE ALARMAS (RUNTIME)
   ======================================== */

/* Contenedor para badge principal + subbadge */
.status-with-substate {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/* Estilos para subbadges contextuales */
.alarm-substate-badge {
    display: inline-block;
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

/* Subbadge: CERRADA (estado resuelta) */
.alarm-substate-badge.resolved {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

/* Subbadge: Condición presente (runtime_en_fuera_rango = true) */
.alarm-substate-badge.condition-present {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

/* Subbadge: Retorno a normal / Pendiente de cierre (runtime_en_fuera_rango = false) */
.alarm-substate-badge.pending-close {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

/* ========================================
   NOTIFICACIONES OUTBOX
   ======================================== */

#notifications-outbox-container .data-table tbody td {
    font-weight: normal;
}

/* Anchos optimizados para columnas de Notificaciones Outbox */

/* Columnas ESTRECHAS (ancho fijo mínimo) */
#notifications-outbox-container .col-fecha {
    width: 90px;
    min-width: 90px;
    white-space: nowrap;
}

#notifications-outbox-container .col-id {
    width: 60px;
    min-width: 60px;
    text-align: center;
}

#notifications-outbox-container .col-canal {
    width: 100px;
    min-width: 100px;
    text-align: center;
}

#notifications-outbox-container .col-acciones {
    width: 70px;
    min-width: 70px;
    text-align: center;
}

/* Columnas MEDIAS */
#notifications-outbox-container .col-cliente {
    width: 120px;
    min-width: 120px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#notifications-outbox-container .col-estado {
    width: 100px;
    min-width: 100px;
    text-align: center;
}

#notifications-outbox-container .col-antiguedad {
    width: 90px;
    min-width: 90px;
    text-align: center;
}

/* Semántica visual para Antigüedad */
#notifications-outbox-container .col-antiguedad.age-warning {
    color: #0369a1; /* Azul oscuro - advertencia pasiva (> 24h, ≤ 48h) */
}

#notifications-outbox-container .col-antiguedad.age-delay {
    color: #ea580c; /* Naranja - atraso prolongado (> 48h) */
}

/* Íconos de canal en Notificaciones Outbox */
#notifications-outbox-container .col-canal .channel-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 14px;
    cursor: help;
}

#notifications-outbox-container .col-canal .channel-icon.email {
    background-color: #dbeafe;
    color: #2563eb;
}

#notifications-outbox-container .col-canal .channel-icon.whatsapp {
    background-color: #dcfce7;
    color: #16a34a;
}

#notifications-outbox-container .col-canal .channel-icon.telegram {
    background-color: #e0f2fe;
    color: #0284c7;
}

#notifications-outbox-container .col-canal .channel-icon.sms {
    background-color: #fef3c7;
    color: #d97706;
}

#notifications-outbox-container .col-canal .channel-icon.webhook {
    background-color: #f3f4f6;
    color: #6b7280;
}

#notifications-outbox-container .col-canal .channel-icon.unknown {
    background-color: #fef2f2;
    color: #dc2626;
}

#notifications-outbox-container .col-estado-alarma {
    width: 110px;
    min-width: 110px;
    text-align: center;
}

/* Columnas ANCHAS (prioridad visual) */
#notifications-outbox-container .col-sensor {
    width: 200px;
    min-width: 180px;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#notifications-outbox-container .col-contacto {
    width: 180px;
    min-width: 150px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#notifications-outbox-container .col-alarma-id {
    width: 280px;
    min-width: 250px;
    max-width: 320px;
    font-family: monospace;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tooltip para columnas truncadas */
#notifications-outbox-container .col-sensor,
#notifications-outbox-container .col-contacto,
#notifications-outbox-container .col-cliente {
    cursor: default;
}

/* Badges para columnas Estado y Alarma */
.badge {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 0.375rem;
}

.badge-success {
    background-color: #d1fae5;
    color: #047857;
    border: 1px solid #6ee7b7;
}

.badge-danger {
    background-color: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

.badge-warning {
    background-color: #fef3c7;
    color: #d97706;
    border: 1px solid #fcd34d;
}

.badge-info {
    background-color: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.badge-secondary {
    background-color: #f3f4f6;
    color: #6b7280;
    border: 1px solid #d1d5db;
}

/* ========================================
   BITÁCORA DEL SISTEMA
   ======================================== */

/* Error message */
#notif-audit-error.error {
    padding: 0.75rem 1rem;
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    font-size: 0.9rem;
}

/* 🚨 Alerta visual: el tag del sensor parpadea en rojo cuando está en alerta/crítico.
   Solo afecta a .compact-sensor-card (vista agrupada por nodo); el header del nodo
   no lleva esta clase, por lo que NO parpadea. */
@keyframes sensor-alert-blink {
    0%, 100% {
        background: #fee2e2;
        border-color: #ef4444;
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0);
    }
    50% {
        background: #fecaca;
        border-color: #b91c1c;
        box-shadow: 0 0 14px 2px rgba(239, 68, 68, 0.55);
    }
}

.compact-sensor-card.alerta,
.compact-sensor-card.critico {
    animation: sensor-alert-blink 1s ease-in-out infinite;
    border-color: #ef4444;
}

/* Evitar que :hover corte la animación (el hover original cambia background y borde) */
.compact-sensor-card.alerta:hover,
.compact-sensor-card.critico:hover {
    background: #fecaca;
    border-color: #b91c1c;
    transform: translateY(-1px);
}

/* LED digital: pulso sincronizado para reforzar la señal */
@keyframes sensor-alert-led-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(239, 68, 68, 0.6); transform: scale(1); }
    50%      { box-shadow: 0 0 14px rgba(239, 68, 68, 0.95); transform: scale(1.15); }
}
.compact-sensor-card.alerta .compact-led,
.compact-sensor-card.critico .compact-led {
    animation: sensor-alert-led-pulse 1s ease-in-out infinite;
}

/* Accesibilidad: respetar "reduce motion" del sistema */
@media (prefers-reduced-motion: reduce) {
    .compact-sensor-card.alerta,
    .compact-sensor-card.critico {
        animation: none;
        background: #fee2e2;
        border-color: #ef4444;
    }
    .compact-sensor-card.alerta .compact-led,
    .compact-sensor-card.critico .compact-led {
        animation: none;
    }
}

/* ==========================================================================
 * 📱 RESPONSIVE DESIGN — Sistema unificado v1.0
 * --------------------------------------------------------------------------
 * Breakpoints:
 *   - ≥1280px  → Desktop (sin cambios)
 *   - 1024–1279px → Laptop pequeña (ajustes mínimos)
 *   - 768–1023px  → Tablet vertical (drawer + ajustes layout)
 *   - 480–767px   → Móvil grande (drawer + 1 columna)
 *   - <480px      → Móvil pequeño (modal full + tipografía menor)
 *
 * Las reglas se ubican al final para tener precedencia sobre el CSS legacy.
 * ========================================================================== */

/* --- Top bar móvil y botón hamburguesa (ocultos por defecto en desktop) --- */
.mobile-topbar {
    display: none;
}

.mobile-menu-toggle {
    display: none;
}

.sidebar-overlay {
    display: none;
}

.hamburger-icon {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 22px;
    height: 16px;
}

.hamburger-icon span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: currentColor;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Animación hamburguesa → X cuando la sidebar está abierta */
body.sidebar-open .hamburger-icon span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
body.sidebar-open .hamburger-icon span:nth-child(2) {
    opacity: 0;
}
body.sidebar-open .hamburger-icon span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
 * 📐 LG: Laptop pequeña (1024–1279px) — ajustes mínimos
 * ========================================================================== */
@media (max-width: 1279px) and (min-width: 1024px) {
    .main-content {
        padding: 1.25rem 1.25rem 1.5rem;
    }
    /* La sidebar mantiene 240px fija */
}

/* ==========================================================================
 * 📱 MD + SM: Tablet y móvil (≤1023px)
 *   - Sidebar pasa a drawer con hamburguesa
 *   - Top bar móvil visible
 * ========================================================================== */
@media (max-width: 1023px) {
    /* Body pasa a columna para que la top bar quede encima de main */
    body.dashboard-layout {
        flex-direction: column;
    }

    /* Mostrar top bar móvil */
    .mobile-topbar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 56px;
        padding: 0 0.75rem;
        background: white;
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        z-index: 998;
        flex-shrink: 0;
    }

    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--text-color);
        cursor: pointer;
        border-radius: 0.375rem;
        transition: background-color 0.15s ease;
    }
    .mobile-menu-toggle:hover {
        background-color: var(--background-color);
    }
    .mobile-menu-toggle:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }

    .mobile-topbar-title {
        flex: 1;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-topbar-spacer {
        width: 40px;
    }

    /* Sidebar como drawer */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        width: 280px;
        box-shadow: 4px 0 12px rgba(0, 0, 0, 0.08);
        z-index: 1001;
    }
    .sidebar.open {
        transform: translateX(0);
    }

    /* Overlay backdrop */
    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
        z-index: 1000;
    }
    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Bloquear scroll de body cuando el drawer está abierto */
    body.sidebar-open {
        overflow: hidden;
    }

    /* Main content: liberar margen izquierdo y dar padding razonable */
    .main-content {
        margin-left: 0;
        padding: 1rem 1rem 2rem;
        max-width: 100vw;
        overflow-x: hidden;
        overflow-y: visible; /* permitir scroll natural en móvil */
    }

    /* Forzar contenedores a respetar el viewport sin la sidebar */
    .content-header,
    .filters-bar,
    .table-container,
    .pagination-container {
        max-width: 100%;
    }

    /* Banner demo: que no rompa el layout */
    .demo-banner {
        max-width: 100%;
    }
}

/* ==========================================================================
 * 📱 MD: Tablet vertical (768–1023px)
 * Sin reducción de tamaños de texto — solo se ajusta el layout.
 * Los grids con auto-fit se acomodan solos al ancho disponible.
 * ========================================================================== */
@media (max-width: 1023px) and (min-width: 768px) {
    .content-header {
        padding: 0.85rem 1rem;
    }

    .filters-content {
        gap: 0.6rem;
    }

    .filter-item {
        min-width: 160px;
    }
}

/* ==========================================================================
 * 📱 SM: Móvil grande (480–767px)
 * Política: NO se reducen tamaños de texto. Los textos quedan al tamaño desktop.
 * Las tarjetas/grids se apilan a una sola columna para que el contenido tenga
 * espacio suficiente y los textos no se sobrepongan.
 * ========================================================================== */
@media (max-width: 767px) {
    /* Section container */
    .section-container {
        margin-bottom: 1.25rem;
    }

    /* Content header: apila título y acciones — sin reducir tamaño de texto */
    .content-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0.85rem 0.9rem;
        margin-bottom: 0.75rem;
    }

    /* Header actions: botones a tamaño natural, no se estiran a full width */
    .header-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-start;
    }

    .header-actions .btn-primary,
    .header-actions .btn-secondary,
    .header-actions .btn-danger {
        flex: 0 0 auto;
    }

    /* Filtros: dejamos el comportamiento natural (row + wrap) — se acomodan
       solos al ancho disponible. No forzamos column-direction ni full-width. */
    .filters-bar {
        padding: 0.65rem 0.75rem;
        margin-bottom: 0.75rem;
    }

    .filters-title {
        padding-right: 0;
    }

    .stat-card {
        padding: 1.1rem;
    }

    /* Tablas: scroll horizontal con pista visual — sin reducir tamaño de texto */
    .table-container {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
        background:
            linear-gradient(to right, white, white) left center / 20px 100% no-repeat,
            linear-gradient(to right, white, white) right center / 20px 100% no-repeat,
            linear-gradient(to right, rgba(0, 0, 0, 0.12), transparent) left center / 12px 100% no-repeat,
            linear-gradient(to left, rgba(0, 0, 0, 0.12), transparent) right center / 12px 100% no-repeat,
            white;
        background-attachment: local, local, scroll, scroll, local;
    }

    .data-table {
        min-width: 600px;
    }

    /* Botones de acción tap-friendly (32×32 mínimo) */
    .data-table .action-btn,
    .data-table .btn-icon,
    .data-table .action-icon {
        min-width: 32px;
        min-height: 32px;
        width: 32px !important;
        height: 32px !important;
    }

    /* Modales: bottom-sheet */
    .slide-modal {
        width: 100%;
        max-width: 100%;
        margin: 0;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: translateY(100%);
        border-radius: 16px 16px 0 0;
        max-height: 92vh;
        height: auto;
    }

    .slide-modal.open {
        transform: translateY(0);
    }

    .slide-modal,
    .slide-modal.modal-small,
    .slide-modal.modal-medium,
    .slide-modal.modal-large,
    .slide-modal.modal-xl,
    .slide-modal.modal-xxl,
    .slide-modal.modal-form {
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        transform: translateY(100%);
    }
    .slide-modal.open,
    .slide-modal.modal-small.open,
    .slide-modal.modal-medium.open,
    .slide-modal.modal-large.open,
    .slide-modal.modal-xl.open,
    .slide-modal.modal-xxl.open,
    .slide-modal.modal-form.open {
        transform: translateY(0);
    }

    /* Bottom-sheet "handle" visual */
    .slide-modal::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background-color: #d1d5db;
        border-radius: 2px;
        margin: 8px auto 4px;
        flex-shrink: 0;
    }

    .slide-modal-header {
        padding: 12px 16px 14px;
    }

    .slide-modal-content {
        padding: 16px;
        overflow-y: auto;
        max-height: calc(92vh - 140px);
    }

    .slide-modal-footer {
        padding: 12px 16px;
        flex-wrap: wrap;
    }

    .slide-modal-footer > * {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Form rows en una columna */
    .form-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    .form-group {
        width: 100%;
    }

    /* Pagination más compacta */
    .pagination-container {
        max-width: 100%;
        flex-wrap: wrap;
    }
}

/* ==========================================================================
 * 📱 XS: Móvil pequeño (<480px)
 * Política: NO se reducen tamaños de texto. Solo ajustes de layout/padding.
 * ========================================================================== */
@media (max-width: 479px) {
    .main-content {
        padding: 0.75rem 0.75rem 2rem;
    }

    .sidebar {
        width: 85%;
        max-width: 320px;
    }

    .content-header {
        padding: 0.75rem;
    }

    /* Modal: full-screen en pantallas muy chicas */
    .slide-modal {
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
    .slide-modal::before {
        display: none;
    }
    .slide-modal-content {
        max-height: calc(100vh - 130px);
    }

    /* Login/password pages: padding mínimo */
    .login-container {
        padding: 0.75rem;
    }
    .login-box {
        padding: 1.5rem 1.25rem;
    }
}

/* ==========================================================================
 * 📱 Inputs en móvil: prevenir zoom del navegador (font-size ≥16px)
 * ========================================================================== */
@media (max-width: 767px) {
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="password"],
    .form-group input[type="number"],
    .form-group input[type="date"],
    .form-group input[type="datetime-local"],
    .form-group input[type="time"],
    .form-group input[type="search"],
    .form-group input[type="tel"],
    .form-group input[type="url"],
    .form-group select,
    .form-group textarea,
    .login-box input,
    input.filter-select {
        font-size: 16px;
    }
}

/* ==========================================================================
 * 📐 GRIDS RESPONSIVAS: auto-fit en TODOS los tamaños
 * --------------------------------------------------------------------------
 * Reemplaza todas las grids con número fijo de columnas (`repeat(N, ...)`)
 * por `auto-fit, minmax(MIN, 1fr)` para que las tarjetas se apilen solas
 * cuando no caben lado a lado, a cualquier tamaño de pantalla.
 *
 * Política del proyecto: tamaño de texto fijo en todos los breakpoints.
 * Si las tarjetas no caben, bajan a la siguiente fila — nunca se encogen.
 *
 * Estas reglas usan !important para sobrescribir las múltiples reglas legacy
 * con :has() y selectores complejos.
 * ========================================================================== */

/* Grids principales — auto-fit con anchos mínimos cómodos */
.sensors-grid.grouped-mode,
.sensors-grid.grouped-area-mode {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}

.sensors-grid.grouped-mode .node-sensors,
.sensors-grid.grouped-area-mode .node-sensors {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.cc-cards-grid,
.cc-cards-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}

/* Form rows: caben lado a lado cuando hay espacio, sino apilan */
.field-row-2 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.field-row-3,
.field-row-3-balanced {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

/* Summary group (modal de detalles) */
.details-section .summary-group,
#areas-container .details-section .summary-group {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}

/* Live stats (Valores en Vivo) — minmax más amplio para que el reloj quepa */
.live-stats .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
}

/* ==========================================================================
 * 🌙 BOTÓN TOGGLE DE TEMA (sol/luna)
 * --------------------------------------------------------------------------
 * Inyectado por theme-toggle.js junto al badge de mensajes del sistema en
 * cada `.content-header .header-actions`.
 * ========================================================================== */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    flex: 0 0 auto;
}
.theme-toggle-btn:hover {
    background-color: #f3f4f6;
    color: #334155;
}
.theme-toggle-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.theme-toggle-btn:active {
    transform: scale(0.92);
}
.theme-toggle-btn svg {
    display: block;
    pointer-events: none;
}

/* ==========================================================================
 * 🌙 MODO OSCURO
 * --------------------------------------------------------------------------
 * Activado por `<html data-theme="dark">`. Se aplica via override de las
 * variables CSS globales + overrides puntuales para elementos que tienen
 * colores hardcoded (blancos, grises claros) en sus reglas legacy.
 *
 * Paleta:
 *   - Fondo base:        #0f172a (slate-900)
 *   - Superficies:       #1e293b (slate-800)
 *   - Superficies hover: #283548
 *   - Bordes:            #334155 (slate-700)
 *   - Texto principal:   #e2e8f0 (slate-200)
 *   - Texto secundario:  #94a3b8 (slate-400)
 * ========================================================================== */

html[data-theme="dark"] {
    --primary-color: #3b82f6;
    --primary-hover: #60a5fa;
    --secondary-color: #94a3b8;
    --success-color: #22c55e;
    --danger-color: #f87171;
    --warning-color: #fbbf24;
    --background-color: #0f172a;
    --text-color: #e2e8f0;
    --text-color-secondary: #94a3b8;
    --border-color: #334155;
    --box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --sidebar-background: #1e293b;
    color-scheme: dark;
}

html[data-theme="dark"] body {
    background-color: var(--background-color);
    color: var(--text-color);
}

/* Sidebar */
html[data-theme="dark"] .sidebar {
    background-color: #1e293b;
    border-right-color: #334155;
}
html[data-theme="dark"] .sidebar-header h1 {
    color: var(--text-color);
}
html[data-theme="dark"] .nav-item {
    color: var(--text-color);
}
html[data-theme="dark"] .nav-item:hover {
    background-color: #283548;
}
html[data-theme="dark"] .nav-section-title {
    color: #94a3b8;
}
html[data-theme="dark"] .nav-section-title::after {
    background: #334155;
}
html[data-theme="dark"] .sidebar-footer {
    border-top-color: #334155;
}
html[data-theme="dark"] .user-info {
    background-color: #0f172a;
    border-color: #334155;
}
html[data-theme="dark"] .user-email {
    color: var(--text-color);
}
html[data-theme="dark"] .user-role {
    color: var(--text-color-secondary);
}
html[data-theme="dark"] .btn-logout {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}
html[data-theme="dark"] .btn-logout:hover {
    background-color: rgba(239, 68, 68, 0.2);
    border-color: #f87171;
}
html[data-theme="dark"] .sidebar-version {
    color: #94a3b8;
}

/* Mobile top bar */
html[data-theme="dark"] .mobile-topbar {
    background-color: #1e293b;
    border-bottom-color: #334155;
}
html[data-theme="dark"] .mobile-topbar-title {
    color: var(--text-color);
}
html[data-theme="dark"] .mobile-menu-toggle {
    color: var(--text-color);
}
html[data-theme="dark"] .mobile-menu-toggle:hover {
    background-color: #283548;
}

/* Cards / contenedores blancos */
html[data-theme="dark"] .content-header,
html[data-theme="dark"] .filters-bar,
html[data-theme="dark"] .table-container,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .stat-item,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .login-box,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .welcome-state,
html[data-theme="dark"] .node-group,
html[data-theme="dark"] .cc-card {
    background-color: #1e293b;
    border-color: #334155;
    color: var(--text-color);
}

html[data-theme="dark"] .content-header,
html[data-theme="dark"] .filters-bar,
html[data-theme="dark"] .table-container {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Headers de tabla */
html[data-theme="dark"] .data-table {
    color: var(--text-color);
}
html[data-theme="dark"] .data-table th {
    background-color: #283548;
    color: var(--text-color);
    border-bottom-color: #334155;
}
html[data-theme="dark"] .data-table td {
    color: var(--text-color);
    border-bottom-color: #334155;
}
html[data-theme="dark"] .data-table tbody tr:hover {
    background-color: #283548;
}

/* Inputs y selects */
html[data-theme="dark"] .form-group input[type="text"],
html[data-theme="dark"] .form-group input[type="email"],
html[data-theme="dark"] .form-group input[type="password"],
html[data-theme="dark"] .form-group input[type="number"],
html[data-theme="dark"] .form-group input[type="date"],
html[data-theme="dark"] .form-group input[type="datetime-local"],
html[data-theme="dark"] .form-group input[type="time"],
html[data-theme="dark"] .form-group input[type="search"],
html[data-theme="dark"] .form-group input[type="tel"],
html[data-theme="dark"] .form-group input[type="url"],
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .filter-select,
html[data-theme="dark"] .view-selector,
html[data-theme="dark"] .datetime-input,
html[data-theme="dark"] .range-input,
html[data-theme="dark"] .login-box input {
    background-color: #0f172a;
    border-color: #334155;
    color: var(--text-color);
}

html[data-theme="dark"] .form-group input::placeholder,
html[data-theme="dark"] .form-group textarea::placeholder,
html[data-theme="dark"] .filter-select::placeholder {
    color: #64748b;
}

html[data-theme="dark"] .filter-select:disabled {
    background-color: #1a2335;
    color: #64748b;
}

/* Botones secundarios (que en claro son blancos) */
html[data-theme="dark"] .btn-secondary {
    background-color: #283548;
    border-color: #334155;
    color: var(--text-color);
}
html[data-theme="dark"] .btn-secondary:hover {
    background-color: #334155;
    border-color: #475569;
}
html[data-theme="dark"] .filters-bar .btn-icon {
    background-color: #283548;
    border-color: #334155;
    color: var(--text-color);
}
html[data-theme="dark"] .filters-bar .btn-icon:hover {
    background-color: #334155;
    color: var(--primary-color);
}

/* Toggle de tema en oscuro */
html[data-theme="dark"] .theme-toggle-btn {
    color: #fbbf24;
}
html[data-theme="dark"] .theme-toggle-btn:hover {
    background-color: #283548;
    color: #fcd34d;
}

/* Badge de sistema en oscuro */
html[data-theme="dark"] .system-messages-badge-container:hover {
    background-color: #283548 !important;
}

/* Títulos */
html[data-theme="dark"] .header-title h2,
html[data-theme="dark"] .header-title p,
html[data-theme="dark"] .stat-header h3,
html[data-theme="dark"] .stat-value,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .filters-title,
html[data-theme="dark"] .empty-state h3 {
    color: var(--text-color);
}
html[data-theme="dark"] .header-title p,
html[data-theme="dark"] .stat-header h3,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .empty-state {
    color: var(--text-color-secondary);
}

/* Modales */
html[data-theme="dark"] .modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}
html[data-theme="dark"] .slide-modal {
    background-color: #1e293b;
    color: var(--text-color);
}
html[data-theme="dark"] .slide-modal-header,
html[data-theme="dark"] .slide-modal-footer {
    border-color: #334155;
}
html[data-theme="dark"] .slide-modal-header h3 {
    color: var(--text-color);
}
html[data-theme="dark"] .slide-modal-close {
    color: var(--text-color-secondary);
}
html[data-theme="dark"] .slide-modal-header-help {
    background: #283548;
    border-color: #334155;
    color: var(--text-color-secondary);
}
html[data-theme="dark"] .slide-modal-header-help:hover {
    background: #334155;
    color: var(--text-color);
}
html[data-theme="dark"] .form-group label,
html[data-theme="dark"] .form-section h4 {
    color: var(--text-color);
}

/* Paginación */
html[data-theme="dark"] .pagination-container {
    background-color: #1e293b;
    border-color: #334155;
    color: var(--text-color);
}

/* Sidebar overlay del drawer */
html[data-theme="dark"] .sidebar-overlay {
    background-color: rgba(0, 0, 0, 0.65);
}

/* Estados vacíos */
html[data-theme="dark"] .welcome-state {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: #334155;
    color: var(--text-color);
}

/* Inputs nativos: hint al navegador para usar UI nativa oscura */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    color-scheme: dark;
}

/* ==========================================================================
 * 🌙 MODO OSCURO — Extensiones para componentes específicos
 * ========================================================================== */

/* ----- Inputs compactos (.form-input-compact y demás variantes) ----- */
html[data-theme="dark"] .form-input-compact,
html[data-theme="dark"] .compact-form input,
html[data-theme="dark"] .compact-form select,
html[data-theme="dark"] .compact-form textarea,
html[data-theme="dark"] .slide-modal input[type="text"],
html[data-theme="dark"] .slide-modal input[type="email"],
html[data-theme="dark"] .slide-modal input[type="password"],
html[data-theme="dark"] .slide-modal input[type="number"],
html[data-theme="dark"] .slide-modal input[type="date"],
html[data-theme="dark"] .slide-modal input[type="datetime-local"],
html[data-theme="dark"] .slide-modal input[type="time"],
html[data-theme="dark"] .slide-modal input[type="search"],
html[data-theme="dark"] .slide-modal input[type="tel"],
html[data-theme="dark"] .slide-modal input[type="url"],
html[data-theme="dark"] .slide-modal select,
html[data-theme="dark"] .slide-modal textarea {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: var(--text-color) !important;
}
html[data-theme="dark"] .form-input-compact::placeholder,
html[data-theme="dark"] .slide-modal input::placeholder,
html[data-theme="dark"] .slide-modal textarea::placeholder {
    color: #64748b !important;
}
html[data-theme="dark"] .form-input-compact:focus,
html[data-theme="dark"] .slide-modal input:focus,
html[data-theme="dark"] .slide-modal select:focus,
html[data-theme="dark"] .slide-modal textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}
html[data-theme="dark"] .form-input-compact[readonly] {
    background-color: #1a2335 !important;
    color: #94a3b8 !important;
}

/* ----- Labels y textos dentro de modales ----- */
html[data-theme="dark"] .slide-modal label,
html[data-theme="dark"] .field-compact label,
html[data-theme="dark"] .slide-modal h4 {
    color: var(--text-color);
}

/* ----- Banner de "Crear Nuevo Cliente" (y similares de info en modales) ----- */
html[data-theme="dark"] .new-client-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #0c4a6e 100%);
    border-color: #075985;
}
html[data-theme="dark"] .new-client-title {
    color: #7dd3fc;
}
html[data-theme="dark"] .new-client-subtitle {
    color: #67e8f9;
}

/* ----- Modal de "Detalles" — secciones, labels y valores ----- */
html[data-theme="dark"] .details-section,
html[data-theme="dark"] .details-section .section-title,
html[data-theme="dark"] .details-section .summary-value,
html[data-theme="dark"] .details-section .summary-label {
    color: var(--text-color);
}
html[data-theme="dark"] .details-label {
    color: var(--text-color-secondary);
}
html[data-theme="dark"] .details-value {
    color: var(--text-color);
}
html[data-theme="dark"] .details-section .section-title {
    border-bottom-color: #334155;
}
html[data-theme="dark"] .details-section .summary-item,
html[data-theme="dark"] .summary-item {
    background-color: #0f172a;
    border-color: #334155;
    color: var(--text-color);
}
html[data-theme="dark"] .details-section .summary-item:hover,
html[data-theme="dark"] .summary-item:hover {
    background-color: #1a2335;
}
html[data-theme="dark"] .summary-label {
    color: var(--text-color-secondary);
}

/* Cliente details (modal Detalles del Cliente) */
html[data-theme="dark"] .client-details-container {
    background: transparent;
    color: var(--text-color);
}
html[data-theme="dark"] .client-id-badge {
    background: #283548;
    color: var(--text-color-secondary);
}
html[data-theme="dark"] .client-name {
    color: var(--text-color);
}
html[data-theme="dark"] .client-description {
    color: var(--text-color-secondary);
}
html[data-theme="dark"] .client-status-info {
    background: #0f172a;
    border: 1px solid #334155;
}
html[data-theme="dark"] .info-group label {
    color: var(--text-color-secondary);
}
html[data-theme="dark"] .info-group span {
    color: var(--text-color);
}

/* ----- Sensor cards (Valores en Vivo — vista Estándar/Compacta) ----- */
html[data-theme="dark"] .sensor-card {
    background: #1e293b;
    border-color: #334155;
    color: var(--text-color);
}
html[data-theme="dark"] .sensor-card:hover {
    border-color: #475569;
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .sensor-card--offline {
    background: #2a1a1a;
    border-color: #7f1d1d;
}
html[data-theme="dark"] .sensor-card.sensor-alarma {
    background: #2a1313;
    border-color: #b91c1c;
}

/* Compact sensor cards en alarma: variante oscura del blink (sin fondo blanco) */
@keyframes sensor-alert-blink-dark {
    0%, 100% {
        background: rgba(239, 68, 68, 0.18);
        border-color: #ef4444;
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0);
    }
    50% {
        background: rgba(239, 68, 68, 0.32);
        border-color: #b91c1c;
        box-shadow: 0 0 14px 2px rgba(239, 68, 68, 0.55);
    }
}
html[data-theme="dark"] .compact-sensor-card.alerta,
html[data-theme="dark"] .compact-sensor-card.critico {
    animation-name: sensor-alert-blink-dark;
    color: var(--text-color);
}
html[data-theme="dark"] .compact-sensor-card.alerta:hover,
html[data-theme="dark"] .compact-sensor-card.critico:hover {
    background: rgba(239, 68, 68, 0.35);
    border-color: #f87171;
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme="dark"] .compact-sensor-card.alerta,
    html[data-theme="dark"] .compact-sensor-card.critico {
        background: rgba(239, 68, 68, 0.18);
        border-color: #ef4444;
    }
}
html[data-theme="dark"] .sensor-header {
    border-bottom-color: #334155;
}

/* ----- Compact sensor cards (Valores en Vivo — Por Nodo / Por Área) ----- */
html[data-theme="dark"] .compact-sensor-card {
    background: #0f172a;
    border-color: #334155;
    color: var(--text-color);
}
html[data-theme="dark"] .compact-sensor-card:hover {
    background: #1a2335;
    border-color: #475569;
}

/* ----- Node group (encabezado de cada grupo en vista Por Nodo) ----- */
html[data-theme="dark"] .node-group {
    background: #1e293b;
    border-color: #334155;
}
html[data-theme="dark"] .node-group:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ----- Badges HB y similares en oscuro: legibles ----- */
html[data-theme="dark"] .badge-hb-on {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.45);
    color: #6ee7b7;
}
html[data-theme="dark"] .badge-hb-off {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fca5a5;
}
html[data-theme="dark"] .badge-hb-na {
    background: rgba(148, 163, 184, 0.15);
    border-color: rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
}

/* ----- Centro de Control (cards de actuadores) ----- */
html[data-theme="dark"] .cc-card {
    background: #1e293b;
    border-color: #334155;
    color: var(--text-color);
}
html[data-theme="dark"] .cc-card-body {
    border-top-color: #334155;
}
html[data-theme="dark"] .cc-state-block {
    background: #0f172a;
    border-color: #334155;
}
html[data-theme="dark"] .cc-state-block.on {
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.25) 100%);
    border-color: rgba(34, 197, 94, 0.45);
    box-shadow: none;
}
html[data-theme="dark"] .cc-state-block.off {
    background: #0f172a;
}
html[data-theme="dark"] .cc-state-block.unknown {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.45);
}
html[data-theme="dark"] .cc-state-block.on .cc-state-big {
    color: #6ee7b7;
}
html[data-theme="dark"] .cc-state-block.off .cc-state-big {
    color: var(--text-color);
}
html[data-theme="dark"] .cc-state-block.unknown .cc-state-big {
    color: #fbbf24;
}
html[data-theme="dark"] .cc-card-meta-item {
    color: var(--text-color-secondary);
}
html[data-theme="dark"] .cc-card-meta-code {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}
html[data-theme="dark"] .cc-card-context .cc-context-info {
    color: var(--text-color-secondary);
}

/* ----- Toastify (notificaciones) ----- */
html[data-theme="dark"] .toastify {
    background: #1e293b !important;
    color: var(--text-color);
    border: 1px solid #334155;
}

/* ----- Borde inferior de tabla sensor-header ----- */
html[data-theme="dark"] .sensor-card .sensor-header {
    border-bottom-color: #334155;
}

/* ----- Datalist / dropdowns y filtros bar btn-icon (refresh) ----- */
html[data-theme="dark"] .btn-icon {
    background-color: #283548;
    border-color: #334155;
    color: var(--text-color);
}
html[data-theme="dark"] .btn-icon:hover {
    background-color: #334155;
    color: var(--primary-color);
}

/* ----- Datepicker / time inputs (sus iconos nativos) ----- */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.85);
}

/* ----- Estado vacío (empty-state) ----- */
html[data-theme="dark"] .empty-state {
    color: var(--text-color-secondary);
}
html[data-theme="dark"] .empty-state h3 {
    color: var(--text-color);
}

/* ----- Section title (h4 dentro de details/forms) ----- */
html[data-theme="dark"] .details-section .section-title {
    color: var(--text-color);
}

/* ----- Filtros: el contenido de cada select abierto sigue siendo nativo (color-scheme: dark hint hace el resto) ----- */
html[data-theme="dark"] .filter-select option,
html[data-theme="dark"] .view-selector option {
    background-color: #1e293b;
    color: var(--text-color);
}

/* ----- Borde de divider en sensor-card y otros ----- */
html[data-theme="dark"] hr,
html[data-theme="dark"] .separator,
html[data-theme="dark"] .divider {
    border-color: #334155;
}

/* ----- Tooltips simples (cuando se usen <span title="...">) — sólo color-scheme ----- */
html[data-theme="dark"] [title] {
    /* nada — el tooltip del navegador respeta color-scheme dark */
}

/* ----- Botones primarios: ligero ajuste de hover en oscuro ----- */
html[data-theme="dark"] .btn-primary {
    background-color: var(--primary-color);
}
html[data-theme="dark"] .btn-primary:hover {
    background-color: var(--primary-hover);
}

/* ==========================================================================
 * 🌙 MODO OSCURO — Textos internos de sensor-card y cc-card
 * Los selectores hijos tienen colores hardcodeados (color: #1e293b, etc.)
 * que no heredan del padre. Hay que apuntar a cada uno.
 * ========================================================================== */

/* Sensor-card: textos del header (nombre, id) */
html[data-theme="dark"] .sensor-card .sensor-name,
html[data-theme="dark"] .sensor-card .sensor-name-text,
html[data-theme="dark"] .sensor-card .sensor-name-main {
    color: var(--text-color);
}

/* Sensor ID badge — caja gris claro a oscuro */
html[data-theme="dark"] .sensor-card .sensor-id {
    background: #0f172a;
    color: var(--text-color);
    border-color: #334155;
}

/* Status text grande dentro del sensor-card (OFF, ON, etc.) */
html[data-theme="dark"] .sensor-card .status-text-large {
    color: var(--text-color);
}

/* Info rows (sección de sensor-info) */
html[data-theme="dark"] .sensor-card .info-row {
    border-bottom-color: #334155;
}
html[data-theme="dark"] .sensor-card .info-label {
    color: var(--text-color-secondary);
}
html[data-theme="dark"] .sensor-card .info-value {
    color: var(--text-color);
}

/* Info compacta de ubicación (nodo, cliente → area) */
html[data-theme="dark"] .sensor-card .info-node {
    color: var(--text-color);
}
html[data-theme="dark"] .sensor-card .info-path {
    color: var(--text-color-secondary);
}
html[data-theme="dark"] .sensor-card .info-path .client-name,
html[data-theme="dark"] .sensor-card .info-path .area-name {
    color: var(--text-color);
}

/* Footer: último dato y timestamp */
html[data-theme="dark"] .sensor-card .sensor-footer {
    border-top-color: #334155;
}
html[data-theme="dark"] .sensor-card .sensor-last-reading,
html[data-theme="dark"] .sensor-card .last-update,
html[data-theme="dark"] .sensor-card .last-reading-label {
    color: var(--text-color-secondary);
}
html[data-theme="dark"] .sensor-card .timestamp {
    color: var(--text-color);
}

/* Sensor location info (con icono de pin) */
html[data-theme="dark"] .sensor-location-info {
    color: var(--text-color-secondary);
    background: #0f172a;
}

/* Threshold indicator: el borde blanco se ve mal en oscuro */
html[data-theme="dark"] .threshold-indicator.has-thresholds {
    border-color: #1e293b;
    box-shadow: 0 0 0 1px #10b981, 0 0 12px rgba(16, 185, 129, 0.6);
}
html[data-theme="dark"] .threshold-indicator.no-thresholds {
    border-color: #1e293b;
    box-shadow: 0 0 0 1px #f59e0b, 0 0 12px rgba(245, 158, 11, 0.5);
}

/* Header principal del sensor (gradiente claro → oscuro) */
html[data-theme="dark"] .sensor-header-main {
    background: linear-gradient(135deg, #1e293b 0%, #283548 100%);
    border-color: #334155;
}

/* Detalles técnicos del sensor (banda gris clara) */
html[data-theme="dark"] .sensor-technical-details {
    background: #0f172a;
    border-left-color: var(--primary-color);
}
html[data-theme="dark"] .detail-label {
    color: var(--text-color);
}
html[data-theme="dark"] .detail-value {
    color: var(--text-color-secondary);
}

/* ----- Compact sensor-card: textos internos ----- */
html[data-theme="dark"] .compact-sensor-card .sensor-name,
html[data-theme="dark"] .compact-sensor-card .sensor-name-text,
html[data-theme="dark"] .compact-sensor-card .compact-sensor-info,
html[data-theme="dark"] .compact-sensor-card .compact-sensor-main {
    color: var(--text-color);
}
html[data-theme="dark"] .compact-sensor-card .value-text {
    color: var(--text-color);
}
html[data-theme="dark"] .compact-sensor-card.sin-datos .value-text,
html[data-theme="dark"] .compact-sensor-card.inactivo .value-text {
    color: var(--text-color-secondary);
}
html[data-theme="dark"] .compact-sensor-card .sensor-id {
    background: #1e293b;
    color: var(--text-color);
    border-color: #334155;
}

/* ----- Node-group header (cuando tiene subtítulos) ----- */
html[data-theme="dark"] .node-group .node-group-title,
html[data-theme="dark"] .node-group h3,
html[data-theme="dark"] .node-group h4 {
    color: var(--text-color);
}
html[data-theme="dark"] .node-group .node-group-subtitle,
html[data-theme="dark"] .node-group p {
    color: var(--text-color-secondary);
}

/* ----- CC card: header textos ----- */
html[data-theme="dark"] .cc-card-header,
html[data-theme="dark"] .cc-card-header-line1,
html[data-theme="dark"] .cc-card-name,
html[data-theme="dark"] .cc-card-id {
    color: var(--text-color);
}

/* ----- CC card: chips/badges/botones del header (sin fondos blancos) ----- */
html[data-theme="dark"] .cc-card-id-pill {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}
html[data-theme="dark"] .cc-chip-previo {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.40);
}
html[data-theme="dark"] .cc-badge-tipo {
    background: rgba(148, 163, 184, 0.20);
    color: #cbd5e1;
}
html[data-theme="dark"] .cc-badge-cmd.applied  { background: rgba(34, 197, 94, 0.18);  color: #86efac; }
html[data-theme="dark"] .cc-badge-cmd.pending  { background: rgba(251, 191, 36, 0.18); color: #fcd34d; }
html[data-theme="dark"] .cc-badge-cmd.queued   { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
html[data-theme="dark"] .cc-badge-cmd.timeout  { background: rgba(239, 68, 68, 0.18);  color: #fca5a5; }
html[data-theme="dark"] .cc-badge-cmd.error    { background: rgba(239, 68, 68, 0.22);  color: #fca5a5; }
html[data-theme="dark"] .cc-badge-cmd.rejected { background: rgba(251, 191, 36, 0.18); color: #fcd34d; }
html[data-theme="dark"] .cc-badge-cmd.idle     { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; }
html[data-theme="dark"] .cc-btn-header-details {
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.40);
}
html[data-theme="dark"] .cc-btn-header-details:hover {
    background: rgba(59, 130, 246, 0.22);
    border-color: rgba(59, 130, 246, 0.50);
    color: #93c5fd;
}

/* ----- Genérico: textos secundarios comunes ----- */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small {
    color: var(--text-color-secondary);
}

/* ----- Botones "Detalles" pequeños dentro de cards (azul) — ya OK ----- */
/* btn-history y similares se quedan en su color primario, legibles */

/* ==========================================================================
 * 🌙 MODO OSCURO — Barrida masiva de superficies blancas y textos oscuros
 * --------------------------------------------------------------------------
 * Cubre componentes que tienen `background: white` / `#fff` hardcoded
 * y textos con colores como #1e293b, #1f2937, #111827, #374151, #64748b.
 * ========================================================================== */

/* ----- Headers de grupos de sensores (vista Por Nodo / Por Área) ----- */
html[data-theme="dark"] .node-header {
    background: #1e293b;
    border-bottom-color: #334155;
}
html[data-theme="dark"] .node-header--offline {
    background: #2a1a1a;
}
html[data-theme="dark"] .node-title {
    color: var(--text-color);
}
html[data-theme="dark"] .node-subtitle {
    color: var(--text-color-secondary);
}
html[data-theme="dark"] .sensor-count-badge {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}
html[data-theme="dark"] .sensor-count {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

/* ----- Node group offline ----- */
html[data-theme="dark"] .node-group--offline {
    background: #2a1a1a;
    border-color: #7f1d1d;
}

/* ----- Selects/inputs adicionales con fondo blanco hardcoded ----- */
html[data-theme="dark"] .status-select-minimal,
html[data-theme="dark"] .status-select-minimal option,
html[data-theme="dark"] .delete-modal #confirmation-input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] select {
    background-color: #0f172a;
    color: var(--text-color);
    border-color: #334155;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #64748b;
}

/* ----- Delete modal y otros modales secundarios ----- */
html[data-theme="dark"] .delete-modal .client-info {
    background: #1e293b;
    border-color: #334155;
}
html[data-theme="dark"] .delete-modal .info-row {
    border-bottom-color: #334155;
}
html[data-theme="dark"] .delete-modal .info-label {
    color: var(--text-color-secondary);
}
html[data-theme="dark"] .delete-modal .info-value {
    color: var(--text-color);
}
html[data-theme="dark"] .delete-modal .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.4);
    border-left-color: #dc3545;
}
html[data-theme="dark"] .delete-modal .alert-content p,
html[data-theme="dark"] .delete-modal .alert-content li {
    color: var(--text-color-secondary);
}
html[data-theme="dark"] .delete-modal .confirmation-section {
    background: #0f172a;
}
html[data-theme="dark"] .delete-modal .confirmation-text {
    color: var(--text-color);
}

/* ----- Headers de modales (varios) ----- */
html[data-theme="dark"] .new-node-header,
html[data-theme="dark"] .edit-node-header {
    background: linear-gradient(135deg, #1e293b 0%, #283548 100%);
    border-color: #334155;
}
html[data-theme="dark"] .new-node-title,
html[data-theme="dark"] .edit-node-header h3 {
    color: var(--text-color);
}
html[data-theme="dark"] .new-node-info,
html[data-theme="dark"] .node-info-compact {
    color: var(--text-color-secondary);
}

/* ----- Sección detalles tabla deprecated table styles ----- */
html[data-theme="dark"] .table {
    color: var(--text-color);
}
html[data-theme="dark"] .table thead th {
    background-color: #283548;
    color: var(--text-color);
}
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
    border-bottom-color: #334155;
}
html[data-theme="dark"] .table tbody tr:hover {
    background-color: #283548;
}

/* ----- Iconos circulares con fondo claro ----- */
html[data-theme="dark"] .stat-icon {
    background: #283548;
}

/* ----- Status badges (preservar legibilidad de variantes) ----- */
html[data-theme="dark"] .status-badge {
    /* mantener el color del bg de cada variante (success/danger/etc.) pero
       asegurar contraste con texto blanco si tiene poco contraste */
}

/* ----- Texto genérico: en cualquier descendiente de body, los colores
       hardcoded grises medios o oscuros deben verse claros ----- */
html[data-theme="dark"] body,
html[data-theme="dark"] body * {
    /* No forzamos color globalmente — se controla por componente arriba.
       Pero los <p>, <h1-h6>, <span>, <label>, <div> heredan por defecto. */
}

/* ----- Texto general: <p>, <h1-h6> dentro del main si no tienen color propio ----- */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] label,
html[data-theme="dark"] span,
html[data-theme="dark"] li {
    color: inherit;
}

/* Forzar color heredado claro en contenedores principales */
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .mobile-topbar,
html[data-theme="dark"] .slide-modal {
    color: var(--text-color);
}

/* ----- Textos hardcoded oscuros (sobrescribir colores específicos) ----- */
html[data-theme="dark"] [style*="color: #1e293b"],
html[data-theme="dark"] [style*="color: #1f2937"],
html[data-theme="dark"] [style*="color: #111827"],
html[data-theme="dark"] [style*="color: #374151"] {
    color: var(--text-color) !important;
}
html[data-theme="dark"] [style*="color: #64748b"],
html[data-theme="dark"] [style*="color: #6b7280"],
html[data-theme="dark"] [style*="color: #94a3b8"],
html[data-theme="dark"] [style*="color: #475569"] {
    color: var(--text-color-secondary) !important;
}

/* ----- Action buttons en cards (e.g., view, edit, delete) ----- */
html[data-theme="dark"] .data-table .action-btn.view,
html[data-theme="dark"] .data-table .btn-icon.view,
html[data-theme="dark"] .data-table .action-btn.view-sensor,
html[data-theme="dark"] .data-table .btn-icon.view-sensor,
html[data-theme="dark"] .data-table .btn-icon.view-actuator {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

/* ----- Tooltips de bootstrap-like / popovers ----- */
html[data-theme="dark"] [role="tooltip"],
html[data-theme="dark"] .tooltip {
    background: #0f172a;
    color: var(--text-color);
    border: 1px solid #334155;
}

/* ----- Cards de info/help y secciones de detalle dentro de modales ----- */
html[data-theme="dark"] .modal-info-section,
html[data-theme="dark"] .info-section,
html[data-theme="dark"] .help-section {
    background: #0f172a;
    border-color: #334155;
    color: var(--text-color);
}

/* ----- HR genérico ----- */
html[data-theme="dark"] hr {
    border-color: #334155;
}

/* ----- Scrollbars (WebKit) en oscuro ----- */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0f172a;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 5px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* ==========================================================================
 * 🌙 MODO OSCURO — Badges, pills y botones de acción
 * --------------------------------------------------------------------------
 * Todos los tags pastel (criticidad, estado, ID badges, etc.) usan fondos
 * semi-transparentes oscuros con texto pastel brillante.
 * ========================================================================== */

/* ----- Status badges (estados de alarmas) ----- */
html[data-theme="dark"] .status-badge.active {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fca5a5;
}
html[data-theme="dark"] .status-badge.acknowledged {
    background: rgba(234, 179, 8, 0.18);
    border-color: rgba(234, 179, 8, 0.45);
    color: #fde047;
}
html[data-theme="dark"] .status-badge.resolved {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.45);
    color: #86efac;
}

/* Status genérico "ACTIVO" / "INACTIVO" (variantes verdes/grises) */
html[data-theme="dark"] .status-badge.activo,
html[data-theme="dark"] .status-activo,
html[data-theme="dark"] .badge-activo,
html[data-theme="dark"] .estado-activo {
    background: rgba(34, 197, 94, 0.18) !important;
    border-color: rgba(34, 197, 94, 0.45) !important;
    color: #86efac !important;
}
html[data-theme="dark"] .status-badge.inactivo,
html[data-theme="dark"] .status-inactivo,
html[data-theme="dark"] .badge-inactivo,
html[data-theme="dark"] .estado-inactivo {
    background: rgba(148, 163, 184, 0.2) !important;
    border-color: rgba(148, 163, 184, 0.4) !important;
    color: #cbd5e1 !important;
}

/* ----- Criticality badges (alarmas) ----- */
/* Versión 1: critica/alta/media/baja */
html[data-theme="dark"] .criticality-badge.critica,
html[data-theme="dark"] .criticidad-critica {
    background: rgba(220, 38, 127, 0.2);
    border-color: rgba(220, 38, 127, 0.45);
    color: #f9a8d4;
}
html[data-theme="dark"] .criticality-badge.alta,
html[data-theme="dark"] .criticidad-alta {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fca5a5;
}
html[data-theme="dark"] .criticality-badge.media,
html[data-theme="dark"] .criticidad-media {
    background: rgba(234, 179, 8, 0.2);
    border-color: rgba(234, 179, 8, 0.45);
    color: #fde047;
}
html[data-theme="dark"] .criticality-badge.baja,
html[data-theme="dark"] .criticidad-baja {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.4);
    color: #86efac;
}
/* Versión 2: critical/high/medium/low (en inglés) */
html[data-theme="dark"] .criticality-badge.critical {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(220, 38, 38, 0.45);
    color: #fca5a5;
}
html[data-theme="dark"] .criticality-badge.high {
    background: rgba(234, 88, 12, 0.2);
    border-color: rgba(234, 88, 12, 0.45);
    color: #fdba74;
}
html[data-theme="dark"] .criticality-badge.medium {
    background: rgba(202, 138, 4, 0.2);
    border-color: rgba(202, 138, 4, 0.45);
    color: #fde047;
}
html[data-theme="dark"] .criticality-badge.low {
    background: rgba(22, 163, 74, 0.18);
    border-color: rgba(22, 163, 74, 0.4);
    color: #86efac;
}

/* ----- Type badges (analogico/digital) ----- */
html[data-theme="dark"] .type-badge {
    background: rgba(148, 163, 184, 0.2);
    border-color: rgba(148, 163, 184, 0.4);
    color: #cbd5e1;
}
html[data-theme="dark"] .type-badge.analogico {
    background: rgba(37, 99, 235, 0.2);
    border-color: rgba(37, 99, 235, 0.45);
    color: #93c5fd;
}
html[data-theme="dark"] .type-badge.digital {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.45);
    color: #d8b4fe;
}

/* ----- Action buttons (view/edit/status/delete/config) en tablas ----- */
html[data-theme="dark"] .data-table .action-btn.view,
html[data-theme="dark"] .data-table .btn-icon.view,
html[data-theme="dark"] .data-table .action-btn.view-sensor,
html[data-theme="dark"] .data-table .btn-icon.view-sensor,
html[data-theme="dark"] .data-table .btn-icon.view-actuator {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.45);
    color: #93c5fd;
}
html[data-theme="dark"] .data-table .action-btn.view:hover,
html[data-theme="dark"] .data-table .btn-icon.view:hover,
html[data-theme="dark"] .data-table .action-btn.view-sensor:hover,
html[data-theme="dark"] .data-table .btn-icon.view-sensor:hover,
html[data-theme="dark"] .data-table .btn-icon.view-actuator:hover {
    background: rgba(59, 130, 246, 0.3);
    border-color: #60a5fa;
    color: #bfdbfe;
}

html[data-theme="dark"] .data-table .action-btn.edit,
html[data-theme="dark"] .data-table .btn-icon.edit,
html[data-theme="dark"] .data-table .action-btn.edit-sensor,
html[data-theme="dark"] .data-table .btn-icon.edit-sensor,
html[data-theme="dark"] .data-table .btn-icon.edit-actuator {
    background: rgba(234, 88, 12, 0.2);
    border-color: rgba(234, 88, 12, 0.45);
    color: #fdba74;
}
html[data-theme="dark"] .data-table .action-btn.edit:hover,
html[data-theme="dark"] .data-table .btn-icon.edit:hover,
html[data-theme="dark"] .data-table .action-btn.edit-sensor:hover,
html[data-theme="dark"] .data-table .btn-icon.edit-sensor:hover,
html[data-theme="dark"] .data-table .btn-icon.edit-actuator:hover {
    background: rgba(234, 88, 12, 0.3);
    border-color: #fb923c;
    color: #fed7aa;
}

html[data-theme="dark"] .data-table .action-btn.status,
html[data-theme="dark"] .data-table .btn-icon.status,
html[data-theme="dark"] .data-table .action-btn.status-sensor,
html[data-theme="dark"] .data-table .btn-icon.status-sensor,
html[data-theme="dark"] .data-table .btn-icon.command-actuator {
    background: rgba(22, 163, 74, 0.2);
    border-color: rgba(22, 163, 74, 0.45);
    color: #86efac;
}
html[data-theme="dark"] .data-table .action-btn.status:hover,
html[data-theme="dark"] .data-table .btn-icon.status:hover,
html[data-theme="dark"] .data-table .action-btn.status-sensor:hover,
html[data-theme="dark"] .data-table .btn-icon.status-sensor:hover,
html[data-theme="dark"] .data-table .btn-icon.command-actuator:hover {
    background: rgba(22, 163, 74, 0.3);
    border-color: #4ade80;
    color: #bbf7d0;
}

html[data-theme="dark"] .data-table .action-btn.delete,
html[data-theme="dark"] .data-table .btn-icon.delete,
html[data-theme="dark"] .data-table .action-btn.delete-sensor,
html[data-theme="dark"] .data-table .btn-icon.delete-sensor,
html[data-theme="dark"] .data-table .btn-icon.delete-actuator {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(220, 38, 38, 0.45);
    color: #fca5a5;
}
html[data-theme="dark"] .data-table .action-btn.delete:hover,
html[data-theme="dark"] .data-table .btn-icon.delete:hover,
html[data-theme="dark"] .data-table .action-btn.delete-sensor:hover,
html[data-theme="dark"] .data-table .btn-icon.delete-sensor:hover,
html[data-theme="dark"] .data-table .btn-icon.delete-actuator:hover {
    background: rgba(220, 38, 38, 0.3);
    border-color: #f87171;
    color: #fecaca;
}

html[data-theme="dark"] .data-table .action-btn.config,
html[data-theme="dark"] .data-table .btn-icon.config,
html[data-theme="dark"] .data-table .btn-icon.configure-actuator {
    background: rgba(148, 163, 184, 0.2);
    border-color: rgba(148, 163, 184, 0.4);
    color: #cbd5e1;
}
html[data-theme="dark"] .data-table .action-btn.config:hover,
html[data-theme="dark"] .data-table .btn-icon.config:hover,
html[data-theme="dark"] .data-table .btn-icon.configure-actuator:hover {
    background: rgba(148, 163, 184, 0.3);
    border-color: #94a3b8;
    color: #e2e8f0;
}

/* ----- Headers de modales (gradientes claros → oscuros) ----- */
html[data-theme="dark"] .new-sensor-header,
html[data-theme="dark"] .new-node-header {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15) 0%, rgba(20, 184, 166, 0.25) 100%);
    border-color: rgba(20, 184, 166, 0.5);
}
html[data-theme="dark"] .new-sensor-header *,
html[data-theme="dark"] .new-node-header * {
    color: var(--text-color);
}
html[data-theme="dark"] .new-sensor-header .sensor-location-info {
    color: #5eead4;
}
html[data-theme="dark"] .new-sensor-header .sensor-location-info i {
    color: #2dd4bf;
}

html[data-theme="dark"] .new-area-header,
html[data-theme="dark"] .heartbeat-row {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.15) 0%, rgba(234, 179, 8, 0.25) 100%);
    border-color: rgba(234, 179, 8, 0.5);
}
html[data-theme="dark"] .new-area-header *,
html[data-theme="dark"] .heartbeat-row * {
    color: var(--text-color);
}

/* Conn-badge online (verde claro) */
html[data-theme="dark"] .conn-badge-online {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0.3) 100%);
    color: #86efac;
}

/* Alarm pending card variantes */
html[data-theme="dark"] .alarm-pending-card.has-critical {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(220, 38, 38, 0.25) 100%);
    border-color: rgba(220, 38, 38, 0.4);
}
html[data-theme="dark"] .alarm-pending-card.has-high {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.15) 0%, rgba(234, 88, 12, 0.25) 100%);
    border-color: rgba(234, 88, 12, 0.4);
}
html[data-theme="dark"] .alarm-pending-card.no-alarms {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.12) 0%, rgba(22, 163, 74, 0.22) 100%);
    border-color: rgba(22, 163, 74, 0.35);
}

/* ----- "Cliente Demo" + "ACTIVO" pills (banner de filtro/info) ----- */
html[data-theme="dark"] [class*="filter-info"],
html[data-theme="dark"] [class*="area-info"] {
    background: #0f172a;
    border-color: #334155;
    color: var(--text-color);
}

/* ----- ID badges genéricos (#22, #51, etc.) ----- */
html[data-theme="dark"] .sensor-id,
html[data-theme="dark"] .id-badge,
html[data-theme="dark"] [class*="-id-badge"] {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.4);
}

/* ----- Filas de alarmas: fondo blanco → fondo oscuro ----- */
html[data-theme="dark"] .alarm-row {
    background: transparent;
}
html[data-theme="dark"] .alarm-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* ----- Mensajes monoespaciados (logs/JSON dump) ----- */
html[data-theme="dark"] .alarm-message-full {
    background: #0f172a;
    border-left-color: var(--primary-color);
    color: var(--text-color);
}

/* ----- Switches/Checkboxes en modo oscuro: el cuadro blanco → oscuro ----- */
html[data-theme="dark"] input[type="checkbox"]:not(:checked),
html[data-theme="dark"] input[type="radio"]:not(:checked) {
    background-color: #0f172a;
    border-color: #475569;
}

/* ----- "Sí"/"No" toggle pills en tablas ----- */
html[data-theme="dark"] .toggle-yes,
html[data-theme="dark"] .toggle-si,
html[data-theme="dark"] .pill-yes {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.45);
}
html[data-theme="dark"] .toggle-no,
html[data-theme="dark"] .pill-no {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.4);
}

/* ----- Welcome state gradient ----- */
html[data-theme="dark"] .welcome-state {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.1) 0%, rgba(22, 163, 74, 0.18) 100%);
    border-color: rgba(22, 163, 74, 0.35);
}


/* ==========================================================================
 * 🔒 Ajustes específicos para móvil/tablet (anti-shrink selectivo)
 * --------------------------------------------------------------------------
 * Política del proyecto:
 *  - Tamaños de texto FIJOS: nunca crecen ni encogen entre breakpoints.
 *  - Los status-badge se quedan compactos en pantallas <1366px (el legacy ya
 *    los pone en 0.65rem y eso es lo que el usuario prefiere).
 *  - Botones de acción de tabla: tap-friendly en móvil/tablet (32×32).
 * ========================================================================== */
@media (max-width: 1023px) {
    /* Botones de acción de tabla: tamaño tap-friendly (override del legacy 20px) */
    .data-table .action-btn,
    .data-table .btn-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem;
    }

    /* Permitir scroll natural en main-content (legacy 1366 lo bloqueaba) */
    .main-content {
        overflow-y: visible;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Dashboard personalizable — v3
   Este bloque va al FINAL de assets/css/styles.css
   Usa [data-theme="dark"] para respetar el sistema de tema real de iotapp.
   ═══════════════════════════════════════════════════════════════════════ */

/* El contenedor principal del dashboard debe estirarse */
#dashboard-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: calc(100vh - 6rem);
}

/* Host del dashboard personalizable */
.dash-root {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: calc(100vh - 9rem);
  border-radius: 0.5rem;
  overflow: hidden;
  background: #0f172a;
  font-family: inherit;
  box-shadow: var(--box-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1));

  /* Variables del dashboard — tema claro por defecto */
  --dash-tx: #1A1D26;
  --dash-ts: #6B7280;
  --dash-td: #9CA3AF;
  --dash-glass: rgba(255,255,255,0.85);
  --dash-glass-b: rgba(0,0,0,0.08);
  --dash-glass-bh: rgba(0,0,0,0.14);
  --dash-ph-bg: #f1f5f9;
  --dash-ph-tx: #64748b;
}

/* Tema oscuro: aplicado si html tiene data-theme="dark" (switch global) */
[data-theme="dark"] .dash-root,
.dash-root[data-theme="dark"] {
  --dash-tx: #F1F3F8;
  --dash-ts: #A0AAC0;
  --dash-td: #6B7490;
  --dash-glass: rgba(11,17,32,0.72);
  --dash-glass-b: rgba(255,255,255,0.08);
  --dash-glass-bh: rgba(255,255,255,0.14);
  --dash-ph-bg: #0f172a;
  --dash-ph-tx: #cbd5e1;
}

/* ============ Fondo ============ */
.dash-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--dash-ph-bg);
}
.dash-bg img { width: 100%; height: 100%; object-fit: cover; }
.dash-bg-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--dash-ph-tx);
  gap: 0.5rem;
  pointer-events: none;
}
.dash-ph-icon { font-size: 64px; opacity: 0.4; }
.dash-ph-title { font-size: 16px; font-weight: 500; }
.dash-ph-sub { font-size: 12px; opacity: 0.75; text-align: center; max-width: 320px; }
.dash-ph-sub b { font-weight: 600; }

.dash-bg-overlay {
  position: absolute;
  inset: 0;
  transition: background 0.3s;
}
.dash-root.has-image .dash-bg-overlay {
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.2) 40%, rgba(255,255,255,0.7) 100%);
}
[data-theme="dark"] .dash-root.has-image .dash-bg-overlay {
  background: linear-gradient(180deg, rgba(11,17,32,0.25) 0%, rgba(11,17,32,0.5) 60%, rgba(11,17,32,0.85) 100%);
}
.dash-root.is-empty .dash-bg-overlay { background: none !important; }

/* ============ Topbar interno ============ */
.dash-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  gap: 10px;
}
.dash-topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dash-site-name {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="dark"] .dash-root.has-image .dash-site-name {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.dash-root.is-empty .dash-site-name {
  color: var(--dash-ph-tx);
  text-shadow: none;
}

.dash-site-tag {
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  background: rgba(37,99,235,0.9);
  white-space: nowrap;
}
.dash-root.is-empty .dash-site-tag {
  background: var(--dash-glass-b);
  color: var(--dash-ts);
}

.dash-topbar-right { display: flex; align-items: center; gap: 8px; }
.dash-time {
  font-size: 12px;
  color: #1e293b;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}
[data-theme="dark"] .dash-root.has-image .dash-time {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.dash-root.is-empty .dash-time { color: var(--dash-ts); text-shadow: none; }

.dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 0.5px solid transparent;
  font-family: inherit;
  transition: all 0.15s;
  backdrop-filter: blur(8px);
}
.dash-btn-outline {
  background: rgba(255,255,255,0.75);
  color: #1e293b;
  border-color: rgba(0,0,0,0.1);
}
.dash-btn-outline:hover { background: rgba(255,255,255,0.9); }
[data-theme="dark"] .dash-btn-outline {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}
[data-theme="dark"] .dash-btn-outline:hover { background: rgba(255,255,255,0.25); }

.dash-btn-primary {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.dash-btn-primary:hover { background: #1d4ed8; }
.dash-btn-success {
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
}
.dash-btn-success:hover { background: #15803d; }
.dash-btn-ghost {
  background: transparent;
  color: var(--dash-tx);
  border-color: var(--dash-glass-b);
}
.dash-btn-ghost:hover { background: var(--dash-glass-bh); }

/* ============ Banner modo edición ============ */
.dash-edit-banner {
  position: absolute;
  top: 56px; left: 12px; right: 12px;
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(37, 99, 235, 0.92);
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(37,99,235,0.3);
}
.dash-edit-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  animation: dashBlink 1.4s infinite;
}
@keyframes dashBlink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.dash-edit-hint { opacity: 0.85; font-weight: 400; font-size: 11px; }
.dash-edit-banner .dash-btn { font-size: 11px; padding: 5px 10px; }
.dash-edit-banner .dash-btn-ghost {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}
.dash-edit-banner .dash-btn-ghost:hover { background: rgba(255,255,255,0.3); }

/* ============ Pines ============ */
.dash-pins-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.dash-pin {
  position: absolute;
  cursor: pointer;
  z-index: 6;
  transition: transform 0.12s;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
.dash-pin:hover { transform: translate(-50%, -50%) scale(1.15); }
.dash-root.is-editing .dash-pin { cursor: grab; }
.dash-root.is-editing .dash-pin.dragging {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 12;
}
.dash-pin-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
  font-size: 13px;
  font-weight: 700;
}
.dash-pin-pulse {
  position: absolute;
  inset: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  animation: dashPulse 2.5s infinite;
  pointer-events: none;
}
@keyframes dashPulse { 0%{transform:scale(1);opacity:0.5} 100%{transform:scale(2.2);opacity:0} }
.dash-pin-tip {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dash-glass);
  border: 0.5px solid var(--dash-glass-b);
  border-radius: 8px;
  padding: 8px 11px;
  white-space: nowrap;
  display: none;
  z-index: 10;
  backdrop-filter: blur(16px);
  color: var(--dash-tx);
}
.dash-pin.show-tip .dash-pin-tip { display: block; }
.dash-pin-tip-t { font-size: 11px; font-weight: 600; }
.dash-pin-tip-s { font-size: 10px; opacity: 0.8; margin-top: 3px; }

/* Botones eliminar (rojo) y configurar (azul) — solo visibles en edición */
.dash-pin-del, .dash-stat-del {
  position: absolute;
  top: -7px; right: -7px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  display: none;
  align-items: center; justify-content: center;
  font-size: 10px;
  cursor: pointer;
  border: 1.5px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  z-index: 15;
}
.dash-pin-cfg, .dash-stat-cfg {
  position: absolute;
  top: -7px; left: -7px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  display: none;
  align-items: center; justify-content: center;
  font-size: 9px;
  cursor: pointer;
  border: 1.5px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  z-index: 15;
}
.dash-root.is-editing .dash-pin-del,
.dash-root.is-editing .dash-stat-del,
.dash-root.is-editing .dash-pin-cfg,
.dash-root.is-editing .dash-stat-cfg { display: flex; }
.dash-pin-del:hover, .dash-stat-del:hover { background: #dc2626; }
.dash-pin-cfg:hover, .dash-stat-cfg:hover { background: #1d4ed8; }

/* ============ Panel inferior ============ */
.dash-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  padding: 0 16px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.dash-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: calc(100% - 320px);
}

/* Stat card */
.dash-stat {
  position: relative;
  background: var(--dash-glass);
  backdrop-filter: blur(20px);
  border: 0.5px solid var(--dash-glass-b);
  border-radius: 10px;
  padding: 9px 14px;
  min-width: 120px;
  transition: all 0.2s;
}
.dash-root.is-editing .dash-stat { cursor: default; }
.dash-root.is-editing .dash-stat:hover { border-color: #2563eb; }
.dash-stat-label {
  font-size: 9px;
  color: var(--dash-ts);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 3px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.dash-stat-val {
  font-size: 17px;
  font-weight: 600;
  color: var(--dash-tx);
  line-height: 1.1;
}
.dash-stat-sub {
  font-size: 10px;
  color: var(--dash-td);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.dash-stat.dash-stat-alerta {
  border-color: rgba(239,68,68,0.5);
  box-shadow: 0 0 0 1px rgba(239,68,68,0.3);
}

/* ============ Feed ============ */
.dash-feed {
  margin-left: auto;
  width: 300px;
  background: var(--dash-glass);
  backdrop-filter: blur(20px);
  border: 0.5px solid var(--dash-glass-b);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  max-height: 320px;
}
.dash-feed.minimized { max-height: 40px; }
.dash-feed.minimized .dash-feed-body { opacity: 0; pointer-events: none; }
.dash-feed-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 13px;
  cursor: pointer;
  user-select: none;
}
.dash-feed-head:hover { background: var(--dash-glass-bh); }
.dash-feed-title { font-size: 12px; font-weight: 600; color: var(--dash-tx); }
.dash-feed-toggle { display: flex; align-items: center; gap: 6px; }
.dash-feed-badge {
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 500;
  background: rgba(239,68,68,0.15);
  color: #EF4444;
}
.dash-feed-chev {
  width: 14px; height: 14px;
  stroke: var(--dash-ts);
  fill: none;
  stroke-width: 2;
  transition: transform 0.25s;
}
.dash-feed.minimized .dash-feed-chev { transform: rotate(180deg); }
.dash-feed-body {
  transition: opacity 0.2s;
  overflow-y: auto;
  max-height: 280px;
}
.dash-feed-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 13px;
  border-top: 0.5px solid var(--dash-glass-b);
}
.dash-feed-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
}
.dash-feed-main { flex: 1; min-width: 0; }
.dash-feed-msg {
  font-size: 12px;
  font-weight: 500;
  color: var(--dash-tx);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-feed-meta {
  display: flex;
  gap: 6px;
  margin-top: 3px;
  flex-wrap: wrap;
  align-items: center;
}
.dash-feed-area {
  font-size: 10px;
  color: var(--dash-ts);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
.dash-feed-crit {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.dash-crit-critica { background: rgba(239,68,68,0.2); color: #EF4444; }
.dash-crit-alta    { background: rgba(239,68,68,0.15); color: #EF4444; }
.dash-crit-media   { background: rgba(245,158,11,0.2); color: #F59E0B; }
.dash-crit-baja    { background: rgba(59,130,246,0.2); color: #3B82F6; }
.dash-feed-time {
  font-size: 10px;
  color: var(--dash-td);
  margin-top: 2px;
}
.dash-feed-empty {
  padding: 20px 14px;
  font-size: 11px;
  color: var(--dash-td);
  text-align: center;
}

/* ============ Catálogo ============ */
.dash-catalog {
  position: absolute;
  top: 56px;
  right: 12px;
  z-index: 20;
  width: 300px;
  background: var(--dash-glass);
  backdrop-filter: blur(20px);
  border: 0.5px solid var(--dash-glass-b);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  overflow: hidden;
  max-height: calc(100% - 120px);
  display: flex;
  flex-direction: column;
}
.dash-catalog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--dash-glass-b);
}
.dash-catalog-title { font-size: 13px; font-weight: 600; color: var(--dash-tx); }
.dash-catalog-close {
  background: transparent;
  border: none;
  color: var(--dash-ts);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
}
.dash-catalog-close:hover { background: var(--dash-glass-bh); color: var(--dash-tx); }
.dash-catalog-body { padding: 8px; overflow-y: auto; }
.dash-catalog-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s;
}
.dash-catalog-item:hover { background: var(--dash-glass-bh); }
.dash-cat-preview {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 2px solid transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--dash-tx);
  flex-shrink: 0;
}
.dash-cat-info { flex: 1; min-width: 0; }
.dash-cat-name { font-size: 12px; font-weight: 500; color: var(--dash-tx); }
.dash-cat-desc { font-size: 10px; color: var(--dash-ts); margin-top: 1px; }
.dash-catalog-divider {
  height: 0.5px;
  background: var(--dash-glass-b);
  margin: 6px 4px;
}

/* ============ Modal selector de sensor ============ */
.dash-sensor-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-sensor-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
}
.dash-sensor-modal-card {
  position: relative;
  width: 520px;
  max-width: calc(100% - 32px);
  max-height: 70vh;
  background: #fff;
  color: #1e293b;
  border-radius: 10px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
[data-theme="dark"] .dash-sensor-modal-card {
  background: #1e293b;
  color: #f1f5f9;
  border-color: #334155;
}
.dash-sensor-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
}
[data-theme="dark"] .dash-sensor-modal-head { border-bottom-color: #334155; }
.dash-sensor-modal-title { font-size: 15px; font-weight: 600; }
.dash-sensor-modal-close {
  background: transparent;
  border: none;
  font-size: 16px;
  color: #64748b;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 5px;
}
.dash-sensor-modal-close:hover { background: #f1f5f9; }
[data-theme="dark"] .dash-sensor-modal-close:hover { background: #0f172a; color: #f1f5f9; }

.dash-sensor-modal-search-wrap {
  padding: 12px 18px;
  border-bottom: 1px solid #e2e8f0;
}
[data-theme="dark"] .dash-sensor-modal-search-wrap { border-bottom-color: #334155; }
.dash-sensor-search {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: #1e293b;
  outline: none;
  transition: border-color 0.15s;
}
.dash-sensor-search:focus { border-color: #2563eb; }
[data-theme="dark"] .dash-sensor-search {
  background: #0f172a;
  color: #f1f5f9;
  border-color: #334155;
}
.dash-sensor-list { flex: 1; overflow-y: auto; padding: 6px; }
.dash-sensor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s;
}
.dash-sensor-row:hover { background: #f1f5f9; }
[data-theme="dark"] .dash-sensor-row:hover { background: #0f172a; }
.dash-sensor-main { flex: 1; min-width: 0; }
.dash-sensor-name {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-sensor-meta {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-sensor-id {
  font-size: 11px;
  color: #64748b;
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 5px;
  flex-shrink: 0;
}
[data-theme="dark"] .dash-sensor-id { background: #0f172a; color: #94a3b8; }
.dash-sensor-empty {
  padding: 32px 16px;
  text-align: center;
  color: #64748b;
  font-size: 12px;
}

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .dash-stats { max-width: 100%; }
  .dash-feed { width: 100%; margin-left: 0; }
  .dash-bottom { flex-direction: column; }
  .dash-catalog { width: calc(100% - 24px); }
}

/* ============ Check verde "Guardado ✓" tras Listo ============ */
.dash-saved-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.4);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.dash-saved-check.show {
  opacity: 1;
  transform: translateY(0);
}
.dash-saved-check.is-error {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.4);
}
.dash-saved-check-icon {
  font-size: 14px;
  line-height: 1;
}

[data-theme="dark"] .dash-saved-check {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.5);
}
[data-theme="dark"] .dash-saved-check.is-error {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.5);
}
/* ==========================================================================
 * 🌙 MODO OSCURO — Badges de estado, criticidad y tipos en tablas
 * --------------------------------------------------------------------------
 * Cubre las clases que generan los módulos vía getStatusClass / getCriticalityClass:
 *   - .status-active / .status-inactive / .status-suspended / .status-maintenance / .status-retired
 *   - .status-badge.status-active / .status-inactive / etc.
 *   - .status-badge.status-critical / .status-high / .status-medium / .status-low
 *   - .estado-badge.activo / .inactivo
 *   - .hb-badge.hb-on / .hb-off
 *   - .badge-yes / .badge-no
 *   - .badge-nodeclass.nc-* / .node-class-badge.nc-*
 *   - .conn-badge variantes (offline, no-control, not-monitored)
 * ========================================================================== */

/* Estados ACTIVO / INACTIVO en tablas (clientes, areas, nodos, sensores, etc.) */
html[data-theme="dark"] .status-active,
html[data-theme="dark"] .status-badge.status-active,
html[data-theme="dark"] .estado-badge.activo {
    background-color: rgba(34, 197, 94, 0.18) !important;
    color: #86efac !important;
    border: 1px solid rgba(34, 197, 94, 0.45) !important;
}

html[data-theme="dark"] .status-inactive,
html[data-theme="dark"] .status-badge.status-inactive,
html[data-theme="dark"] .estado-badge.inactivo {
    background-color: rgba(148, 163, 184, 0.2) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(148, 163, 184, 0.4) !important;
}

html[data-theme="dark"] .status-suspended,
html[data-theme="dark"] .status-badge.status-suspended {
    background-color: rgba(168, 85, 247, 0.2) !important;
    color: #d8b4fe !important;
    border: 1px solid rgba(168, 85, 247, 0.45) !important;
}

html[data-theme="dark"] .status-maintenance,
html[data-theme="dark"] .status-badge.status-maintenance {
    background-color: rgba(234, 179, 8, 0.2) !important;
    color: #fde047 !important;
    border: 1px solid rgba(234, 179, 8, 0.45) !important;
}

html[data-theme="dark"] .status-retired,
html[data-theme="dark"] .status-badge.status-retired {
    background-color: rgba(190, 24, 93, 0.2) !important;
    color: #f9a8d4 !important;
    border: 1px solid rgba(190, 24, 93, 0.45) !important;
}

/* Criticidad mapeada a 'critical/high/medium/low' (alarms.js, umbrales) */
html[data-theme="dark"] .status-badge.status-critical,
html[data-theme="dark"] .criticality-badge.critical {
    background-color: rgba(220, 38, 38, 0.22) !important;
    color: #fecaca !important;
    border: 1px solid rgba(220, 38, 38, 0.5) !important;
}

html[data-theme="dark"] .status-badge.status-high,
html[data-theme="dark"] .criticality-badge.high {
    background-color: rgba(234, 88, 12, 0.22) !important;
    color: #fed7aa !important;
    border: 1px solid rgba(234, 88, 12, 0.5) !important;
}

html[data-theme="dark"] .status-badge.status-medium,
html[data-theme="dark"] .criticality-badge.medium {
    background-color: rgba(202, 138, 4, 0.22) !important;
    color: #fde68a !important;
    border: 1px solid rgba(202, 138, 4, 0.5) !important;
}

html[data-theme="dark"] .status-badge.status-low,
html[data-theme="dark"] .criticality-badge.low {
    background-color: rgba(22, 163, 74, 0.18) !important;
    color: #bbf7d0 !important;
    border: 1px solid rgba(22, 163, 74, 0.4) !important;
}

/* Heartbeat badges (HB ON / HB OFF) */
html[data-theme="dark"] .hb-badge.hb-on {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #86efac !important;
    border-color: rgba(34, 197, 94, 0.45) !important;
}

html[data-theme="dark"] .hb-badge.hb-off {
    background: rgba(148, 163, 184, 0.18) !important;
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, 0.4) !important;
}

/* Sí / No toggles en tablas (umbrales, contactos, actuadores) */
html[data-theme="dark"] .badge-yes {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
    border: 1px solid rgba(34, 197, 94, 0.45) !important;
}

html[data-theme="dark"] .badge-no {
    background: rgba(148, 163, 184, 0.18) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(148, 163, 184, 0.4) !important;
}

/* Node class badges (Actuadores / Sensores / Mixto / Vacío) */
html[data-theme="dark"] .badge-nodeclass.nc-sensors,
html[data-theme="dark"] .node-class-badge.nc-sensors,
html[data-theme="dark"] .status-badge.node-class-badge.nc-sensors {
    background: rgba(168, 85, 247, 0.2) !important;
    color: #d8b4fe !important;
    border: 1px solid rgba(168, 85, 247, 0.45) !important;
}

html[data-theme="dark"] .badge-nodeclass.nc-actuators,
html[data-theme="dark"] .node-class-badge.nc-actuators,
html[data-theme="dark"] .status-badge.node-class-badge.nc-actuators {
    background: rgba(234, 88, 12, 0.2) !important;
    color: #fdba74 !important;
    border: 1px solid rgba(234, 88, 12, 0.45) !important;
}

html[data-theme="dark"] .badge-nodeclass.nc-mixed,
html[data-theme="dark"] .node-class-badge.nc-mixed,
html[data-theme="dark"] .status-badge.node-class-badge.nc-mixed {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(59, 130, 246, 0.45) !important;
}

html[data-theme="dark"] .badge-nodeclass.nc-empty,
html[data-theme="dark"] .node-class-badge.nc-empty,
html[data-theme="dark"] .status-badge.node-class-badge.nc-empty {
    background: rgba(148, 163, 184, 0.18) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(148, 163, 184, 0.4) !important;
}

/* Conn badges (offline / no-control / not-monitored) — online ya estaba */
html[data-theme="dark"] .conn-badge-offline {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}

html[data-theme="dark"] .conn-badge-no-control {
    background: rgba(234, 179, 8, 0.18) !important;
    color: #fde047 !important;
    border-color: rgba(234, 179, 8, 0.4) !important;
}

html[data-theme="dark"] .conn-badge-not-monitored {
    background: rgba(148, 163, 184, 0.18) !important;
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, 0.4) !important;
}

/* Badge genérico .badge.success / .badge.danger (areas, etc.) */
html[data-theme="dark"] .badge.success {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #86efac !important;
}
html[data-theme="dark"] .badge.danger {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #fca5a5 !important;
}

/* Alarm substate badges (resolved / pending-close / condition-present) */
html[data-theme="dark"] .alarm-substate-badge.resolved {
    background: rgba(22, 163, 74, 0.18) !important;
    color: #86efac !important;
}
html[data-theme="dark"] .alarm-substate-badge.pending-close {
    background: rgba(234, 179, 8, 0.18) !important;
    color: #fde047 !important;
}
html[data-theme="dark"] .alarm-substate-badge.condition-present {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #fca5a5 !important;
}