/* ------------------------------ VARIABLES Y CONFIGURACIONES ------------------------------ */ :root { /* Colores base */ --color-background: #1e1e2d; --color-background-light: #252538; --color-background-hover: #2d2d44; --color-background-active: #32324f; --color-text: #ffffff; --color-text-secondary: #a3a3c2; --color-text-muted: #6c6c94; --color-border: #2d2d44; /* Colores primarios y de acento */ --color-primary: #4361ee; --color-primary-hover: #3a56d4; --color-primary-transparent: rgba(67, 97, 238, 0.15); --color-accent: #6c63ff; /* Colores semánticos */ --color-success: #2ecc71; --color-info: #3498db; --color-warning: #f39c12; --color-danger: #e74c3c; /* Colores para niveles de alerta */ --color-level1: var(--color-warning); --color-level2: #ff9800; --color-level3: var(--color-danger); /* Sombras */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3); /* Bordes */ --border-radius: 8px; --border-radius-sm: 4px; --border-radius-lg: 12px; /* Espaciado */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; /* Tipografía */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; /* Transiciones */ --transition-fast: 0.15s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; /* UI helpers */ --focus-ring: 0 0 0 2px rgba(67, 97, 238, 0.35); /* Aliases para compatibilidad con estilos existentes */ --header-bg: var(--color-background); --card-bg: var(--color-background-light); --border-color: var(--color-border); --text-primary: var(--color-text); --text-secondary: var(--color-text-secondary); --accent-color: var(--color-accent); --accent-color-rgb: 108, 99, 255; /* #6c63ff */ --input-bg: var(--color-background); --bg-hover: var(--color-background-hover); --text-color: var(--color-text); --stripe-bg: rgba(255,255,255,0.04); } /* Tema claro: sobreescribe variables cuando [data-theme="light"] en */ html[data-theme="light"] { --color-background: #f5f7fb; --color-background-light: #ffffff; --color-background-hover: #eef1f7; --color-background-active: #e6ebf5; --color-text: #1f2937; --color-text-secondary: #495266; --color-text-muted: #6b7280; --color-border: #e3e7ef; --color-primary: #3a56d4; --color-primary-hover: #2f45b5; --color-primary-transparent: rgba(58, 86, 212, 0.15); --color-accent: #5750ff; --shadow-sm: 0 2px 4px rgba(31, 41, 55, 0.08); --shadow-md: 0 6px 12px rgba(31, 41, 55, 0.10); --shadow-lg: 0 12px 20px rgba(31, 41, 55, 0.12); /* Aliases mapeados para tema claro */ --header-bg: var(--color-background-light); --card-bg: var(--color-background-light); --border-color: var(--color-border); --text-primary: var(--color-text); --text-secondary: var(--color-text-secondary); --accent-color: var(--color-accent); --accent-color-rgb: 87, 80, 255; /* #5750ff */ --input-bg: #f9fbff; --bg-hover: var(--color-background-hover); --text-color: var(--color-text); --stripe-bg: rgba(0,0,0,0.03); } /* ------------------------------ RESET Y ESTILOS BASE ------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { margin: 0; padding: 0; font-family: var(--font-family); font-size: var(--font-size-base); color: var(--color-text); background-color: var(--color-background); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: auto; height: 100%; transition: background-color var(--transition-base), color var(--transition-base); } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-hover); } button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5rem; font-weight: 600; line-height: 1.2; } p { margin-bottom: 1rem; } /* ------------------------------ LAYOUT PRINCIPAL ------------------------------ */ .app-container { display: flex; min-height: 100vh; background-color: var(--color-background); overflow-y: auto; } .main-content { flex: 1; padding: var(--spacing-xl); background-color: var(--color-background); overflow-y: auto; height: 100vh; } .content { display: flex; flex-direction: column; min-height: 100%; width: 100%; max-width: 100%; overflow-y: auto; } /* ------------------------------ SECCIONES PRINCIPALES ------------------------------ */ .content-section { display: none; width: 100%; flex-direction: column; gap: var(--spacing-xl); overflow-y: auto; } .content-section.active { display: block; opacity: 1; animation: fadeIn var(--transition-base) forwards; } .section-header { margin-bottom: var(--spacing-lg); } .section-header h2 { display: flex; align-items: center; gap: var(--spacing-sm); color: var(--color-text); margin-bottom: var(--spacing-xs); } .section-description { color: var(--color-text-secondary); font-size: var(--font-size-md); margin-bottom: var(--spacing-md); } /* ------------------------------ DASHBOARD LAYOUT Y COMPONENTES ------------------------------ */ .dashboard-content { display: flex; flex-direction: column; gap: var(--spacing-md); width: 100%; overflow-y: auto; } /* Contenedor para el selector de sensores */ .sensor-selector-container { width: 100%; } .sensor-selector-card { display: flex; flex-direction: row; align-items: center; background-color: var(--color-background-light); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); overflow: hidden; transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base); } .sensor-selector-card .card-header { display: flex; align-items: center; padding: var(--spacing-md) var(--spacing-lg); background-color: rgba(67, 97, 238, 0.1); border-right: 1px solid var(--color-border); min-width: 120px; } .sensor-selector-card .card-header h5 { margin: 0; color: var(--color-primary); font-size: var(--font-size-md); display: flex; align-items: center; gap: var(--spacing-sm); } .sensor-selector-card .card-body { display: flex; flex: 1; align-items: center; padding: var(--spacing-md) var(--spacing-lg); gap: var(--spacing-md); } .sensor-selector-card #sensorSelector { max-width: 300px; flex: 1; } .sensor-selector-card #dataStatus { margin: 0; padding-left: var(--spacing-md); } @media (max-width: 768px) { .sensor-selector-card { flex-direction: column; } .sensor-selector-card .card-header { width: 100%; border-right: none; border-bottom: 1px solid var(--color-border); } .sensor-selector-card .card-body { flex-direction: column; align-items: stretch; } .sensor-selector-card #sensorSelector { max-width: 100%; } } /* Contenedor de filtros horizontales */ .filters-bar { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--spacing-md); background-color: var(--color-background-light); padding: var(--spacing-md); border-radius: var(--border-radius); margin-bottom: var(--spacing-md); box-shadow: var(--shadow-sm); transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base); } .filter-group { display: flex; flex-direction: column; margin-bottom: 0; flex: 0 0 auto; } .filter-group label { font-size: var(--font-size-sm); font-weight: 600; margin-bottom: var(--spacing-xs); color: var(--color-text-secondary); } .filter-group .form-control { width: auto; } /* Estilos para el contenedor de gráficos apilados verticalmente */ .charts-stack { display: flex; flex-direction: column; gap: var(--spacing-md); margin-top: var(--spacing-md); width: 100%; } .chart-card { width: 100%; background-color: var(--color-background-light); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .chart-card:hover { box-shadow: var(--shadow-md); } .chart-card .card-body { padding: var(--spacing-md); } .chart-container { width: 100%; height: 300px; /* Altura fija para todos los gráficos */ position: relative; } /* Estilos para los toggles de límites */ .limits-toggle { display: none; } .limits-label { display: inline-flex; align-items: center; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--border-radius-sm); background-color: var(--color-background); color: var(--color-text-secondary); font-size: var(--font-size-sm); cursor: pointer; transition: all var(--transition-fast); } .limits-label::before { content: ''; display: inline-block; width: 16px; height: 16px; margin-right: var(--spacing-xs); border-radius: 4px; border: 2px solid currentColor; transition: all var(--transition-fast); } .limits-toggle:checked + .limits-label { color: var(--color-text); background-color: var(--color-background-active); } .limits-toggle:checked + .limits-label::before { background-color: currentColor; border-color: currentColor; } .limits-label.x-axis { color: var(--color-success); } .limits-label.y-axis { color: var(--color-warning); } .limits-label.z-axis { color: var(--color-danger); } /* Intensificar fondo por eje para legibilidad */ .limits-label.x-axis { background-color: rgba(46, 204, 113, 0.1); } .limits-label.y-axis { background-color: rgba(243, 156, 18, 0.1); } .limits-label.z-axis { background-color: rgba(231, 76, 60, 0.1); } /* Controles de datos (puntos y frecuencia) */ .data-controls { display: inline-flex; align-items: center; gap: var(--spacing-sm); } .data-controls .control { display: inline-flex; align-items: center; gap: var(--spacing-xs); } .data-controls .control .form-control-sm { width: 90px; } .control-help { color: var(--color-text-secondary); font-size: var(--font-size-sm); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } } /* Responsive adjustments for mobile */ @media (max-width: 768px) { .filters-bar { flex-direction: column; align-items: flex-start; } .filter-group { width: 100%; margin-bottom: var(--spacing-sm); } .filter-group .form-control { width: 100%; } .chart-container { height: 250px; /* Menor altura en móviles */ } } /* ------------------------------ COMPONENTES DE INTERFAZ ------------------------------ */ .card { background-color: var(--color-background-light); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base), transform var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base); overflow: hidden; } .card:hover { box-shadow: var(--shadow-md); } .card-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--color-border); background-color: var(--color-background); } .card-header h5 { margin: 0; font-size: var(--font-size-md); font-weight: 600; color: var(--color-text); display: flex; align-items: center; gap: var(--spacing-sm); } .card-body { padding: var(--spacing-md); } .filter-card { height: 100%; display: flex; flex-direction: column; background-color: var(--color-background-light); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast); overflow: hidden; } .filter-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .filter-card .card-body { flex: 1; padding: var(--spacing-md); } .config-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); width: 100%; } @media (max-width: 1200px) { .config-grid { grid-template-columns: 1fr; } } .config-card { background-color: var(--color-background-light); border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .config-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); } .config-card .card-header { display: flex; justify-content: space-between; align-items: center; background-color: var(--header-bg); padding: 15px 20px; border-bottom: 1px solid var(--border-color); } .config-card .card-header h5 { margin: 0; color: var(--text-primary); font-weight: 600; display: flex; align-items: center; } .config-card .card-header h5 i { margin-right: 10px; color: var(--accent-color); } .config-card .card-body { padding: 20px; } .form-group { margin-bottom: 15px; } .form-group h6 { margin-bottom: 10px; font-weight: 600; color: var(--text-primary); border-bottom: 1px solid var(--border-color); padding-bottom: 5px; } .form-group label { display: block; margin-bottom: 5px; color: var(--text-secondary); font-weight: 500; } .form-control { width: 100%; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--input-bg); color: var(--text-primary); transition: border-color 0.3s; } .form-control:focus { border-color: var(--accent-color); outline: none; box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.25); } .file-selector { display: flex; align-items: center; } .file-selector input[type="text"] { flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; } .file-selector button { border-top-left-radius: 0; border-bottom-left-radius: 0; background-color: var(--accent-color); color: white; border: none; padding: 8px 12px; cursor: pointer; } .limit-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .limit-input-group { display: flex; flex-direction: column; } .d-flex { display: flex; gap: 5px; } .d-flex input { width: 50%; } .config-actions { padding: 20px; display: flex; justify-content: flex-end; align-items: center; background-color: var(--color-background-light); border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .btn { padding: 8px 16px; border-radius: 4px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .btn-primary { background-color: var(--accent-color); color: white; border: none; } .btn-primary:hover { background-color: var(--accent-hover); } .btn-outline-secondary { background-color: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); } .btn-outline-secondary:hover { background-color: var(--border-color); color: var(--text-primary); } .btn-info { background-color: var(--info-color, #0dcaf0); color: white; border: none; } .btn-info:hover { background-color: var(--info-hover, #0bacdf); } .me-2 { margin-right: 10px; } /* Estilos para las tablas de configuración */ .config-tables-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; } .config-table h6 { margin-bottom: 10px; font-weight: 600; color: var(--text-primary); border-bottom: 1px solid var(--border-color); padding-bottom: 5px; } .table { width: 100%; margin-bottom: 1rem; color: var(--text-primary); border-collapse: collapse; } .table th, .table td { padding: 8px; border-bottom: 1px solid var(--border-color); } /* Mejoras estéticas adicionales */ .table-hover tbody tr:hover { background-color: var(--color-background-hover); } .data-table-card .card-header { position: sticky; top: 0; z-index: 6; backdrop-filter: blur(4px); background: var(--header-bg); } .table th { text-align: left; font-weight: 600; background-color: var(--header-bg); } .table-striped tbody tr:nth-of-type(odd) { background-color: var(--stripe-bg, rgba(0,0,0,0.05)); } .table-sm th, .table-sm td { padding: 5px; font-size: 0.875rem; } /* Severidades en tabla */ .severity-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; } .severity-dot { width: 8px; height: 8px; border-radius: 50%; } .severity-normal { color: var(--color-success); background: rgba(46, 204, 113, 0.12); } .severity-normal .severity-dot { background: var(--color-success); } .severity-warning { color: var(--color-warning); background: rgba(243, 156, 18, 0.12); } .severity-warning .severity-dot { background: var(--color-warning); } .severity-critical { color: var(--color-danger); background: rgba(231, 76, 60, 0.12); } .severity-critical .severity-dot { background: var(--color-danger); } .table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ------------------------------ BOTONES E ÍCONOS ------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-lg); background-color: var(--color-background-hover); color: var(--color-text); border: none; border-radius: var(--border-radius-sm); font-weight: 500; cursor: pointer; transition: all var(--transition-base); text-align: center; } .btn:hover { background-color: var(--color-background-active); transform: translateY(-1px); box-shadow: var(--focus-ring); } .btn-primary { background-color: var(--color-primary); color: white; } .btn-primary:hover { background-color: var(--color-primary-hover); } .btn-outline-secondary { background-color: transparent; border: 1px solid var(--color-border); } .btn-outline-secondary:hover { background-color: var(--color-background-hover); } .btn-block { width: 100%; } /* ------------------------------ SIDEBAR Y NAVEGACIÓN ------------------------------ */ .sidebar { width: 250px; background-color: var(--color-background-light); display: flex; flex-direction: column; transition: width var(--transition-base); z-index: 100; border-right: 1px solid var(--color-border); transition: width var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base); } .sidebar-header { padding: var(--spacing-lg); border-bottom: 1px solid var(--color-border); } .logo-container { display: flex; align-items: center; gap: var(--spacing-sm); } .logo-icon { font-size: 1.5rem; color: var(--color-primary); } .logo-text { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text); } .sidebar-menu { flex: 1; padding: var(--spacing-md) 0; overflow-y: auto; } .nav { list-style: none; } .nav-item { margin-bottom: var(--spacing-xs); } .nav-link { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-lg); color: var(--color-text-secondary); transition: all var(--transition-base); } .nav-link:hover { color: var(--color-text); background-color: var(--color-background-hover); } .nav-link.active { color: var(--color-text); background-color: var(--color-primary); } .nav-icon { display: flex; align-items: center; justify-content: center; width: 20px; font-size: var(--font-size-md); } .sidebar-footer { padding: var(--spacing-md); border-top: 1px solid var(--color-border); } .system-status { margin-bottom: var(--spacing-md); } .status-title { font-size: var(--font-size-sm); font-weight: 600; margin-bottom: var(--spacing-sm); color: var(--color-text-secondary); } .status-indicator { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-xs); } .status-dot { width: 10px; height: 10px; border-radius: 50%; background-color: var(--color-danger); } .status-dot.connected { background-color: var(--color-success); } .status-text { font-size: var(--font-size-sm); color: var(--color-text); } .status-message { color: var(--color-text-secondary); font-size: var(--font-size-sm); padding: var(--spacing-xs) var(--spacing-sm); background-color: var(--color-background); border-radius: var(--border-radius-sm); display: flex; align-items: center; gap: var(--spacing-xs); margin: 0; } /* Estilo para el bloque de monitoreo en el sidebar */ .monitoring-status { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); padding: var(--spacing-sm) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .monitoring-status .status-indicator { width: 10px; height: 10px; border-radius: 50%; background-color: var(--color-danger); margin-bottom: 0; } .monitoring-status .status-indicator.active { background-color: var(--color-success); } /* Estilos para las acciones del sidebar */ .sidebar-actions { margin-top: var(--spacing-md); } .sidebar-action-item { margin-bottom: 0; } .sidebar-action-item:last-child { margin-bottom: 0; } /* ------------------------------ ELEMENTOS DE ALERTA ------------------------------ */ /* Contenedor de alertas horizontales */ .alert-cards-grid { display: flex; flex-direction: row; justify-content: space-between; gap: var(--spacing-md); width: 100%; margin-bottom: var(--spacing-lg); flex-wrap: wrap; } .alert-card-wrapper { flex: 1; min-width: 220px; } .alert-card { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background-color: var(--color-background-light); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .alert-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .alert-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--color-background-hover); font-size: var(--font-size-lg); } .alert-card.level-1 .alert-icon { color: var(--color-level1); } .alert-card.level-2 .alert-icon { color: var(--color-level2); } .alert-card.level-3 .alert-icon { color: var(--color-level3); } .alert-card.total .alert-icon { color: var(--color-info); } .alert-info { flex: 1; } .alert-count { font-size: var(--font-size-2xl); font-weight: 700; margin: 0; } .alert-label { color: var(--color-text-secondary); font-size: var(--font-size-sm); margin: 0; } @media (max-width: 768px) { .alert-cards-grid { flex-direction: column; } .alert-card-wrapper { width: 100%; } } /* ------------------------------ UTILIDADES ------------------------------ */ .text-muted { color: var(--color-text-muted); } .text-accent { color: var(--color-accent); } .mr-1 { margin-right: 0.25rem; } .mr-2 { margin-right: 0.5rem; } .mr-3 { margin-right: 1rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 2rem; } .d-none { display: none !important; } .d-block { display: block !important; } .d-flex { display: flex !important; } .align-items-center { align-items: center !important; } .justify-content-between { justify-content: space-between !important; } /* ------------------------------ ANIMACIONES ------------------------------ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn var(--transition-base) forwards; } .animate-slide-up { animation: slideUp var(--transition-base) forwards; } /* Micro-animaciones al entrar en viewport */ .reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; } .reveal.in-view { opacity: 1; transform: translateY(0); } /* Skeleton loading (shimmer) */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient(90deg, var(--color-background-hover) 25%, var(--color-background-active) 37%, var(--color-background-hover) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 4px; } .skeleton-text { height: 12px; } .skeleton-row td { padding: 8px; } /* ------------------------------ MEDIA QUERIES ------------------------------ */ @media (max-width: 768px) { .sidebar { width: 200px; } .nav-link { padding: var(--spacing-sm) var(--spacing-md); } .card-header { padding: var(--spacing-sm) var(--spacing-md); } .card-body { padding: var(--spacing-sm) var(--spacing-md); } } /* Prevenir múltiples scrolls */ body, .app-container, .content, .dashboard-grid { overflow-y: auto !important; overflow-x: hidden; } body::-webkit-scrollbar, .app-container::-webkit-scrollbar, .content::-webkit-scrollbar, .dashboard-grid::-webkit-scrollbar { width: 8px; height: 8px; } body::-webkit-scrollbar-track, .app-container::-webkit-scrollbar-track, .content::-webkit-scrollbar-track, .dashboard-grid::-webkit-scrollbar-track { background: var(--color-background); } body::-webkit-scrollbar-thumb, .app-container::-webkit-scrollbar-thumb, .content::-webkit-scrollbar-thumb, .dashboard-grid::-webkit-scrollbar-thumb { background-color: var(--color-border); border-radius: 4px; } /* Estilos para efectos de navegación */ .nav-link.navigating { animation: linkPulse 0.5s ease; } @keyframes linkPulse { 0% { background-color: var(--color-primary); } 50% { background-color: var(--color-primary-hover); } 100% { background-color: var(--color-primary); } } .main-content.loading { position: relative; pointer-events: none; } .main-content.loading::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); animation: loadingProgress 0.3s ease-in-out; z-index: 1000; } @keyframes loadingProgress { 0% { width: 0; opacity: 1; } 100% { width: 100%; opacity: 0.7; } } /* Estilos para estados de configuración */ .warning-message { color: var(--color-warning); font-weight: 500; display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border-left: 3px solid var(--color-warning); background-color: rgba(243, 156, 18, 0.1); border-radius: var(--border-radius-sm); } .configuration-warning { display: flex; align-items: center; gap: var(--spacing-sm); margin-top: var(--spacing-sm); padding: var(--spacing-sm); font-size: var(--font-size-xs); color: var(--color-warning); background-color: rgba(243, 156, 18, 0.1); border-radius: var(--border-radius-sm); border-left: 3px solid var(--color-warning); } .btn:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; } /* Estilos para el toast container */ .toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; max-width: 350px; } .toast { background-color: var(--color-background-light); border-radius: var(--border-radius); box-shadow: var(--shadow-md); overflow: hidden; transform: translateX(100%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; } .toast.show { transform: translateX(0); opacity: 1; } .toast-header { display: flex; align-items: center; padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--color-border); background-color: var(--color-background); } .toast-header i { margin-right: var(--spacing-sm); } .toast-header span { flex: 1; font-weight: 600; } .toast-close { background: none; border: none; color: var(--color-text-secondary); cursor: pointer; } .toast-body { padding: var(--spacing-md); color: var(--color-text); } .toast.info { border-left: 4px solid var(--color-info); } .toast.success { border-left: 4px solid var(--color-success); } .toast.warning { border-left: 4px solid var(--color-warning); } .toast.error { border-left: 4px solid var(--color-danger); } /* Estilos para toggles de ejes */ .toggle-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .toggle-item { display: flex; align-items: center; margin-right: 15px; } .axis-toggle { margin-right: 5px; cursor: pointer; } .axis-label { font-weight: 500; cursor: pointer; padding: 3px 8px; border-radius: 4px; transition: all 0.2s ease; } .axis-label.x-axis { color: rgba(75, 192, 192, 1); background-color: rgba(75, 192, 192, 0.1); } .axis-label.y-axis { color: rgba(255, 159, 64, 1); background-color: rgba(255, 159, 64, 0.1); } .axis-label.z-axis { color: rgba(255, 99, 132, 1); background-color: rgba(255, 99, 132, 0.1); } .axis-toggle:not(:checked) + .axis-label { opacity: 0.5; text-decoration: line-through; } /* Estilos para las tablas de datos en tiempo real */ .table-actions { display: flex; gap: 5px; } .table-actions button { padding: 4px 8px; font-size: 0.8rem; } .btn-sm { padding: 4px 8px; font-size: 0.85rem; } .action-btn-edit { background-color: var(--color-info); color: white; border: none; border-radius: var(--border-radius-sm); } .action-btn-edit:hover { background-color: #2980b9; } .action-btn-delete { background-color: var(--color-danger); color: white; border: none; border-radius: var(--border-radius-sm); } .action-btn-delete:hover { background-color: #c0392b; } /* Modal de edición/creación */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .modal-overlay.active { opacity: 1; visibility: visible; } .modal-content { background-color: var(--color-background-light); border-radius: var(--border-radius); box-shadow: var(--shadow-lg); width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; transition: transform 0.3s ease; transform: translateY(-20px); } .modal-overlay.active .modal-content { transform: translateY(0); } .modal-header { padding: 15px 20px; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; } .modal-header h5 { margin: 0; font-weight: 600; } .modal-close { background: transparent; border: none; color: var(--color-text-secondary); font-size: 1.5rem; cursor: pointer; line-height: 1; } .modal-body { padding: 20px; } .modal-footer { padding: 15px 20px; border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: 10px; } /* Estilos para las pestañas de configuración */ .config-nav { margin-bottom: 20px; } .nav-tabs { display: flex; list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--border-color); } .nav-tabs .nav-item { margin-bottom: -1px; } .nav-tabs .nav-link { display: block; padding: 12px 16px; border: 1px solid transparent; border-radius: 4px 4px 0 0; text-decoration: none; color: var(--text-color); font-weight: 500; transition: all 0.2s ease; } .nav-tabs .nav-link:hover { background-color: var(--bg-hover); border-color: var(--border-color) var(--border-color) transparent; } .nav-tabs .nav-link.active { color: var(--accent-color); background-color: var(--card-bg); border-color: var(--border-color) var(--border-color) var(--card-bg); } .nav-tabs .nav-link i { margin-right: 8px; } /* Contenido de las pestañas */ .config-tab-content { display: none; animation: fadeIn 0.3s ease-in-out; } .config-tab-content.active { display: block; } .form-buttons { display: flex; justify-content: space-between; gap: 10px; } .config-status, .config-last-update { display: inline-block; margin-right: 16px; color: var(--text-muted); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Mejora en formularios */ form label { font-weight: 500; margin-bottom: 6px; display: block; } .form-control:focus { border-color: var(--accent-color); box-shadow: 0 0 0 0.2rem rgba(var(--accent-color-rgb), 0.25); } select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 40px; } /* Responsividad para formularios y tablas */ @media (max-width: 992px) { .config-grid { grid-template-columns: 1fr; } .nav-tabs { flex-wrap: wrap; } .nav-tabs .nav-item { flex: 1 1 auto; text-align: center; } .nav-tabs .nav-link { padding: 10px; } .nav-tabs .nav-link i { margin-right: 0; display: block; margin-bottom: 4px; } } /* Mejoras para el diseño horizontal */ .filter-group .toggle-container { display: flex; flex-direction: row; gap: var(--spacing-sm); align-items: center; } /* Mejoras para las tarjetas de gráficos */ .chart-card { margin-bottom: var(--spacing-sm); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); overflow: hidden; } .chart-card .card-body { padding: var(--spacing-md); } @media (min-width: 992px) { .chart-container { height: 280px; } } /* Estilos adicionales para la barra de estado inferior */ .config-card .card-body.text-center { padding: 1rem; } .ms-3 { margin-left: 1rem; } .mb-3 { margin-bottom: 1rem; } .mb-md-0 { margin-bottom: 0; } .mx-md-4 { margin-left: 1.5rem; margin-right: 1.5rem; } .gap-2 { gap: 0.5rem; } @media (max-width: 768px) { .card-body.flex-column { gap: 1rem; } .config-status, .config-last-update { display: block; margin-right: 0; margin-bottom: 0.5rem; } .config-last-update { margin-left: 0 !important; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Layout específico para la sección de límites */ .limits-layout { display: grid; grid-template-columns: 1fr 1fr; /* Dos columnas iguales */ gap: var(--spacing-lg); } /* Estilos para las tarjetas dentro del layout de límites */ .config-card-form { /* Estilos específicos si son necesarios */ } .config-card-table { /* Estilos específicos si son necesarios */ } /* Ajuste responsivo para el layout de límites */ @media (max-width: 1200px) { .limits-layout { grid-template-columns: 1fr; /* Una columna en pantallas más pequeñas */ } } .config-card .card-header { display: flex; justify-content: space-between; align-items: center; background-color: var(--header-bg); padding: 15px 20px; border-bottom: 1px solid var(--border-color); } /* Estructura del formulario de límites mejorada */ .form-section { margin-bottom: 20px; /* Más espacio entre secciones de ejes */ } .form-section h6 { color: var(--color-primary); /* Color de acento para los títulos de eje */ margin-bottom: 10px; border-bottom: 1px solid var(--color-border); padding-bottom: 5px; } .limit-row { display: grid; grid-template-columns: repeat(2, 1fr); /* Dos grupos por fila */ gap: 15px; } .limit-input-group { display: flex; flex-direction: column; } .limit-input-group label { font-size: 0.85rem; /* Tamaño de fuente más pequeño para etiquetas */ color: var(--color-text-secondary); margin-bottom: 4px; } .input-pair { display: flex; gap: 5px; } .input-pair input { /* Los inputs ya tienen estilo de .form-control */ } /* Estilos para la tabla de límites */ .table-limits th { background-color: var(--color-background); /* Fondo más oscuro para cabecera */ color: var(--color-text-secondary); font-weight: 600; text-align: center; } .table-limits td { vertical-align: middle; font-size: 0.9rem; text-align: center; } /* Estilos específicos para la tabla de formulario de límites */ .table-limits-form { width: 100%; border-collapse: separate; /* Separar bordes para rowspan */ border-spacing: 0 5px; /* Espacio vertical entre filas de ejes */ } .table-limits-form thead th { background-color: var(--color-background); color: var(--color-text-secondary); font-weight: 600; padding: 8px; text-align: center; border-bottom: 2px solid var(--color-primary); } .table-limits-form tbody td { padding: 6px 8px; vertical-align: middle; text-align: center; } .table-limits-form .axis-label { font-weight: 600; font-size: 1.1rem; vertical-align: middle; /* Centrar verticalmente */ border-right: 1px solid var(--color-border); width: 40px; /* Ancho fijo para la etiqueta del eje */ } .table-limits-form .form-control-sm { padding: 0.25rem 0.5rem; /* Input más pequeño */ font-size: 0.875rem; border-radius: var(--border-radius-sm); background-color: var(--color-background); /* Fondo oscuro para inputs */ color: var(--color-text); border: 1px solid var(--color-border); text-align: center; max-width: 100px; /* Ancho máximo para inputs */ } .table-limits-form .form-control-sm:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-transparent); } .table-limits .axis-x { color: var(--color-success); font-weight: 500; } .table-limits .axis-y { color: var(--color-warning); font-weight: 500; } .table-limits .axis-z { color: var(--color-danger); font-weight: 500; } .table-limits .level-warning { background-color: rgba(243, 156, 18, 0.1); } .table-limits .level-critical { background-color: rgba(231, 76, 60, 0.1); } .form-group label { display: block; margin-bottom: 5px; color: var(--text-secondary); font-weight: 500; } /*TOP BAR*/ .sidebar-footer .logout-button { width: 100%; text-align: left; padding: var(--spacing-sm) var(--spacing-lg); background-color: var(--color-background-hover); color: var(--color-text-secondary); border: none; border-radius: var(--border-radius-sm); transition: all var(--transition-base); } .sidebar-footer .logout-button:hover { color: var(--color-text); background-color: var(--color-background-active); } .top-bar { display: none; } /* Topbar con botón de tema */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; justify-content: flex-end; align-items: center; padding: 8px 0 16px; backdrop-filter: blur(6px); background: linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(0,0,0,0)); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: var(--color-background-light); color: var(--color-text); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); transition: all var(--transition-base); } .icon-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); background: var(--color-background-hover); } .icon-btn i { font-size: 16px; } /* Sombra sutil en tarjetas en tema claro para profundidad */ html[data-theme="light"] .card { box-shadow: 0 6px 14px rgba(31,41,55,0.08); } html[data-theme="light"] .sidebar { box-shadow: inset -1px 0 0 var(--border-color); } /* Tema claro: topbar con fondo translúcido claro */ html[data-theme="light"] .topbar { background: linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(255,255,255,0)); } /* Tablas con cabecera sticky */ .table-responsive.sticky-header { max-height: 360px; overflow: auto; } .table-responsive.sticky-header thead th { position: sticky; top: 0; z-index: 5; background: var(--header-bg); color: var(--text-secondary); } /* LOGIN SPLIT SCREEN */ .login-split-container { display: flex; min-height: 100vh; background: var(--color-background); } .login-visual { flex: 1.2; background: var(--color-background-light); display: flex; align-items: center; justify-content: center; position: relative; min-width: 320px; box-shadow: 2px 0 8px rgba(0,0,0,0.08); } .login-visual-content { text-align: center; color: var(--color-text); padding: 2rem; } .login-visual-content h1 { font-size: 2.2rem; color: var(--color-primary); margin-bottom: 1rem; } .login-visual-content p { color: var(--color-text-secondary); font-size: 1.1rem; margin-bottom: 2rem; } .login-illustration { width: 75%; max-width: 480px; min-width: 180px; margin: 0 auto; display: block; transition: width 0.3s, max-width 0.3s; } @media (max-width: 900px) { .login-illustration { width: 80vw; max-width: 95vw; } } .login-form-panel { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--color-background); } .login-form-box { background: var(--color-background-light); border-radius: var(--border-radius); box-shadow: var(--shadow-md); padding: 2.5rem 2rem; min-width: 320px; width: 100%; max-width: 370px; display: flex; flex-direction: column; gap: 1.5rem; } .login-form-box h2 { color: var(--color-primary); margin-bottom: 1rem; text-align: center; } .login-form-box .error { color: var(--color-danger); background: rgba(231,76,60,0.08); border-radius: 4px; padding: 0.5rem 1rem; margin-bottom: 1rem; text-align: center; font-size: 1rem; } .login-form-box form { display: flex; flex-direction: column; gap: 1rem; } .login-form-box .form-control { background: var(--color-background); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); padding: 0.75rem 1rem; font-size: 1rem; transition: border-color var(--transition-fast); } .login-form-box .form-control:focus { border-color: var(--color-primary); outline: none; } .login-form-box .btn { margin-top: 0.5rem; } @media (max-width: 900px) { .login-split-container { flex-direction: column; } .login-visual, .login-form-panel { flex: unset; min-width: 0; width: 100%; min-height: 240px; } .login-form-box { max-width: 100vw; } } /* Estilos para el ícono de mostrar/ocultar contraseña */ .password-container { position: relative; display: inline-block; width: 100%; } .password-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #666; font-size: 16px; user-select: none; } .password-toggle:hover { color: #333; } /* Estilos para mensajes de alerta */ .error { color: var(--color-danger, #e74c3c); /* Rojo para errores */ background-color: rgba(231, 76, 60, 0.1); /* Fondo rojo claro translúcido */ border: 1px solid var(--color-danger, #e74c3c); padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem); margin-bottom: var(--spacing-md, 1rem); border-radius: var(--border-radius-sm, 4px); text-align: center; } .success { color: var(--color-success, #2ecc71); /* Verde para éxitos */ background-color: rgba(46, 204, 113, 0.1); /* Fondo verde claro translúcido */ border: 1px solid var(--color-success, #2ecc71); padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem); margin-bottom: var(--spacing-md, 1rem); border-radius: var(--border-radius-sm, 4px); text-align: center; }