/* 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-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;
}

/* 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: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-logo {
    width: 160px;
    height: auto;
    margin-bottom: 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.25rem;
}

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

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

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

.nav-icon {
    margin-right: 0.65rem;
    font-size: 1.1rem;
}

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

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

.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 {
    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 | Estado | Área | Cliente | Acciones */
.nodes-table .data-table {
    width: 100%;
    table-layout: fixed;
}

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

/* Distribución OPTIMIZADA para monitor 17" - Prioriza columnas técnicas */
.nodes-table .data-table th:nth-child(1),
.nodes-table .data-table td:nth-child(1) { width: 5%; }   /* ID - MÁS espacio para números */

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

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

.nodes-table .data-table th:nth-child(4),
.nodes-table .data-table td:nth-child(4) { width: 12%; }  /* Chip ID - AMPLIADO para códigos */

.nodes-table .data-table th:nth-child(5),
.nodes-table .data-table td:nth-child(5) { width: 14%; }  /* Token - AMPLIADO para identificadores */

.nodes-table .data-table th:nth-child(6),
.nodes-table .data-table td:nth-child(6) { width: 12%; }  /* Estado - MÁS AMPLIADO */

.nodes-table .data-table th:nth-child(7),
.nodes-table .data-table td:nth-child(7) { width: 12%; }  /* Área - REDUCIDO (filtros compensan) */

.nodes-table .data-table th:nth-child(8),
.nodes-table .data-table td:nth-child(8) { width: 13%; }  /* Cliente - MÁS COMPACTO */

.nodes-table .data-table th:nth-child(9),
.nodes-table .data-table td:nth-child(9) { 
    width: 140px; /* REDUCIDO - ajustado a botones pequeños */
    min-width: 140px; 
    max-width: 140px;
    text-align: center;
}  /* Acciones - OPTIMIZADO para botones 22px */

/* 🔧 ESPECÍFICO: Contenedor de acciones en tabla de nodos */
.nodes-table .action-buttons {
    gap: 0.375rem; /* Más espacio entre botones */
    min-width: 120px; /* REDUCIDO - ajustado para botones de 22px */
    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 */
}

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

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

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

.sensors-table .data-table th:nth-child(4),
.sensors-table .data-table td:nth-child(4) { width: 70px; min-width: 70px; }    /* Unidad */

.sensors-table .data-table th:nth-child(5),
.sensors-table .data-table td:nth-child(5) { width: 80px; min-width: 80px; }    /* Operación */

.sensors-table .data-table th:nth-child(6),
.sensors-table .data-table td:nth-child(6) { width: 80px; min-width: 80px; }    /* Código */

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

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

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

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

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

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

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

/* 🔧 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 */
}

/* 📱 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 {
    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 {
    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 {
    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 {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

/* 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 {
    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 {
    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 {
    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 {
    background-color: #fee2e2;
    border-color: #f87171;
    color: #b91c1c;
}

/* 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;
}

/* 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;
}

.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;
}

.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-content {
    padding: 24px;
}

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

/* 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: 1.5rem;
    margin-bottom: 1.5rem;
}

.delete-modal .info-row {
    display: flex;
    align-items: baseline;
    padding: 0.5rem 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.875rem;
    min-width: 90px;
    margin-right: 1rem;
    flex-shrink: 0;
}

.delete-modal .info-value {
    font-size: 0.875rem;
    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.75rem;
    background-color: #fff5f5;
    border: 1px solid #ffebeb;
    border-left: 4px solid #dc3545;
    border-radius: 8px;
    padding: 1rem;
}

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

.delete-modal .alert-content h4 {
    color: #dc3545;
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    font-weight: 600;
}

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

.delete-modal .alert-content li {
    margin-bottom: 0.25rem;
    color: #6c757d;
    font-size: 0.813rem;
}

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

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

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

.delete-modal #confirmation-input {
    width: 100%;
    padding: 0.625rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    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-danger {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    background-color: #dc3545;
    border: 1px solid #dc3545;
    border-radius: 0.375rem;
    color: white;
    font-size: 0.875rem;
    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: 1rem;
}

.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: 180px;
    max-width: 250px;
    flex: 1;
}

.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: 1rem;
}

.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.375rem;
}

.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;
}

.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;
}

/* 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: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1.25rem;
    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: 1rem;
}

.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 */
.delete-modal .area-delete-info {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

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

.delete-modal .area-name-highlight {
    font-size: 1.1rem;
    font-weight: 600;
    color: #dc3545;
}

.delete-modal .client-info-text {
    font-size: 0.9rem;
    color: #6c757d;
}

.delete-modal .badge {
    align-self: flex-start;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
}

.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: 16px;
    margin-bottom: 16px;
}

/* =============================================
   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;
}

.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.5rem;
}

/* 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: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.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;
}

.last-update {
    font-size: 0.7rem;
    color: #64748b;
    flex: 1;
    line-height: 1.2;
}

.timestamp {
    font-weight: 600;
    color: #374151;
}

.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-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;
    }
}

/* Modal Size Variants - Sistema de tamaños estandarizado */
.slide-modal.modal-small {
    max-width: 400px;
    max-height: 300px;
}



.slide-modal.modal-medium {
    max-width: 600px;
    max-height: 500px; /* Aumentado para formularios */
}

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

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



/* Optimizar el contenido para uso completo del espacio */
.slide-modal.modal-form .slide-modal-content {
    padding: 16px 24px;
    max-height: none;
    overflow-y: visible;
}

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

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

/* 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 {
        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 {
        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 */
.stats-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #2563eb;
}

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

.stat-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-item.critical {
    border-left: 4px solid #dc2626;
}

.stat-item.high {
    border-left: 4px solid #ea580c;
}

.stat-item.medium {
    border-left: 4px solid #ca8a04;
}

.stat-item.low {
    border-left: 4px solid #16a34a;
}

.stat-item.active {
    border-left: 4px solid #7c3aed;
}

.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 */
.alarm-row {
    transition: all 0.2s ease;
}

.alarm-row:hover {
    background: #f8fafc;
}

.alarm-row.critical {
    border-left: 4px solid #dc2626;
    background: #fef2f2;
}

.alarm-row.high {
    border-left: 4px solid #ea580c;
    background: #fff7ed;
}

.alarm-row.medium {
    border-left: 4px solid #ca8a04;
    background: #fefce8;
}

.alarm-row.low {
    border-left: 4px solid #16a34a;
    background: #f0fdf4;
}

.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;
    background: #f8fafc;
}

.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: 1200px;
}

.alarms-table th {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}

/* 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;
    }
}