/* ============================================ */ /* PALETA DE COLORES CONNEX IT */ /* ============================================ */ :root { --connex-dark: #1a2b3c; --connex-primary: #1e4a6b; --connex-secondary: #2c6e8f; --connex-accent: #3d8faa; --connex-light: #f0f4f8; --connex-white: #ffffff; --connex-gray: #5a6e7c; --connex-gradient: linear-gradient(145deg, #1a3a4f 0%, #0f2a3a 100%); } /* ============================================ */ /* TEMA OSCURO */ /* Se activa con [data-bs-theme="dark"] en */ /* ============================================ */ [data-bs-theme="dark"] body { background-color: #12181f !important; } [data-bs-theme="dark"] .navbar.fixed-top { background-color: #12181f !important; } [data-bs-theme="dark"] .sidebar { background-color: #1a1f27; box-shadow: 2px 0 10px rgba(0,0,0,0.4); } [data-bs-theme="dark"] .main-content { background: #12181f; } [data-bs-theme="dark"] .nav-link { color: #c9d1d9 !important; } [data-bs-theme="dark"] .nav-link:hover, [data-bs-theme="dark"] .nav-link.active { background-color: rgba(61,143,170,0.15); color: #7ecde0 !important; } [data-bs-theme="dark"] .navbar .dropdown-toggle { background-color: #1a1f27 !important; border-color: #333c46 !important; color: #e8e8e8 !important; } [data-bs-theme="dark"] .navbar .dropdown-toggle:hover { background-color: #232a34 !important; } [data-bs-theme="dark"] .navbar .dropdown-item:hover { background-color: #232a34; color: #e8e8e8; } [data-bs-theme="dark"] .navbar .dropdown-item:active { background-color: #2c3644; color: #e8e8e8; } /* Clases utilitarias de Bootstrap (bg-white / bg-light) usadas sueltas en varios módulos (Reconectadores, Cisternas, WMeter, Patentes): son fondos fijos que Bootstrap no adapta solo con data-bs-theme, así que se sobreescriben acá una sola vez para todo el sitio. */ [data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .bg-light { background-color: #1a1f27 !important; border-color: #333c46 !important; } [data-bs-theme="dark"] .form-control.bg-white, [data-bs-theme="dark"] .form-control.bg-light, [data-bs-theme="dark"] textarea.bg-white, [data-bs-theme="dark"] textarea.bg-light, [data-bs-theme="dark"] .dropdown-menu.bg-white, [data-bs-theme="dark"] .btn.bg-white { color: #e8e8e8 !important; } /* Bootstrap no redefine el color de .text-danger/.text-success al pasar a data-bs-theme="dark": quedan fijos en el rojo/verde pensado para fondo claro (#dc3545 / #198754), con contraste insuficiente sobre los fondos oscuros del sitio. Se usa en muchos módulos (Sistema_Alarmas, HistAlarmas, Reconectadores, WMeter) para textos y números de alarma. */ [data-bs-theme="dark"] .text-danger { color: #f87171 !important; } [data-bs-theme="dark"] .text-success { color: #4ade80 !important; } /* .modal-header.bg-warning: el fondo amarillo es fijo en ambos temas, pero el texto del header hereda --bs-modal-color, que en oscuro se vuelve claro y queda ilegible sobre el amarillo (usado en el modal de confirmar cierre de WMeter y en el de "Sin selección" de Patentes). Se fija oscuro, igual que en tema claro. */ [data-bs-theme="dark"] .modal-header.bg-warning, [data-bs-theme="dark"] .modal-header.bg-warning .modal-title { color: #212529 !important; } [data-bs-theme="dark"] .content-section::before { opacity: 0.06; filter: invert(1); } [data-bs-theme="dark"] #global-loader { background: rgba(10,14,18,0.85); } /* Inicio */ [data-bs-theme="dark"] .inicio-service-card, [data-bs-theme="dark"] .inicio-benefit-card, [data-bs-theme="dark"] .inicio-team-card, [data-bs-theme="dark"] .inicio-grid-item, [data-bs-theme="dark"] .service-card { background-color: #1a1f27; border-color: rgba(255,255,255,0.06); } [data-bs-theme="dark"] .inicio-service-card h4, [data-bs-theme="dark"] .inicio-benefit-card h4, [data-bs-theme="dark"] .inicio-grid-item p { color: #e8e8e8; } [data-bs-theme="dark"] .inicio-bg-light { background: linear-gradient(135deg, #1a1f27 0%, #171c23 100%); } /* Selector múltiple con búsqueda (ej. Lista Negra) */ [data-bs-theme="dark"] .select-btn, [data-bs-theme="dark"] .list-items, [data-bs-theme="dark"] .search-box, [data-bs-theme="dark"] .options-container { background-color: #1e242c; border-color: #333c46; } [data-bs-theme="dark"] .select-btn .btn-text, [data-bs-theme="dark"] .item .item-text { color: #e8e8e8; } [data-bs-theme="dark"] .list-items .item:hover { background-color: #232a34; } /* ============================================ */ /* NAVBAR OSCURO CONNEX */ /* ============================================ */ .navbar-connex-app { background: var(--connex-dark) !important; padding: 0.4rem 0; transition: all 0.3s ease; } .navbar-connex-app .dropdown-toggle { background: rgba(255,255,255,0.1) !important; border: 1px solid rgba(255,255,255,0.2) !important; color: white !important; transition: all 0.3s ease; } .navbar-connex-app .dropdown-toggle:hover { background: rgba(255,255,255,0.18) !important; border-color: rgba(255,255,255,0.35) !important; } .navbar-connex-app .dropdown-toggle .text-muted { color: rgba(255,255,255,0.6) !important; } .navbar-connex-app .fw-bold { color: white; } .navbar-connex-app .btn-sidebar-toggle, .btn-sidebar-toggle { background: transparent; border: none; color: #adb5bd; border-radius: 6px; padding: 4px 8px; font-size: 0.85rem; line-height: 1; transition: color 0.2s ease; cursor: pointer; } .navbar-connex-app .btn-sidebar-toggle:hover, .btn-sidebar-toggle:hover { background: transparent; border-color: transparent; color: #6c757d; } /* ============================================ */ /* SIDEBAR */ /* ============================================ */ body { padding-top: 63px; background-color: #f5f5f5 !important; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow-x: hidden; max-width: 100vw; } html { overflow-x: hidden; } .sidebar { height: 100vh; position: fixed; top: 70px; left: 0; width: 250px; background-color: #fff; padding: 20px 0; box-shadow: 2px 0 10px rgba(0,0,0,0.1); overflow-y: hidden; z-index: 1000; transition: transform 0.3s ease, width 0.3s ease; } .sidebar:hover { overflow: auto; } /* Sidebar colapsado en escritorio */ .sidebar.collapsed { transform: translateX(-100%); } .main-content { margin-left: 250px; padding: 16px 6px; transition: margin-left 0.3s ease; background: #f5f5f5; } /* Contenedor principal: sin máximo de ancho para aprovechar todo el espacio */ .main-content > .container { max-width: 100%; padding-left: 6px; padding-right: 6px; } /* Main content expandido cuando sidebar está colapsado */ .main-content.expanded { margin-left: 0; } /* ─── Secciones: eliminar restricción de ancho en contenedores internos ─── */ .content-section .container, .content-section .container-sm, .content-section .container-md, .content-section .container-lg, .content-section .container-xl { max-width: 100%; padding-left: 0; padding-right: 0; } /* CisternasV2: quitar max-width del dashboard */ .CisternasV2_Tablero_dashboard-container { max-width: 100% !important; } /* ─── Cards: más columnas a pantallas más anchas ─── */ /* Reconectadores Tablero: 3 → 4 cols (solo en pantallas muy anchas, las cards necesitan ancho) */ @media (min-width: 1700px) { #Reconectadores_Tablero_section .row-cols-md-3 > * { flex: 0 0 25%; max-width: 25%; } } /* Cisternas Tablero: por defecto col-lg-6 da 2 por fila → pasar a 3 por fila en lg */ @media (min-width: 992px) { #CisternasV2_Tablero_section .col-lg-6 { flex: 0 0 33.3333%; width: 33.3333%; max-width: 33.3333%; } } @media (min-width: 1400px) { #CisternasV2_Tablero_section .col-xl-3, #CisternasV2_Tablero_section .col-lg-6 { flex: 0 0 25%; width: 25%; max-width: 25%; } } @media (min-width: 1700px) { #CisternasV2_Tablero_section .col-xxl-3, #CisternasV2_Tablero_section .col-xl-3, #CisternasV2_Tablero_section .col-lg-6 { flex: 0 0 20%; width: 20%; max-width: 20%; } } /* Inicio — Beneficios y Servicios: 3 → 4 → 6 cols */ @media (min-width: 1300px) { #MenuPrincipal_Inicio_section .col-md-4 { flex: 0 0 25%; max-width: 25%; } } @media (min-width: 1700px) { #MenuPrincipal_Inicio_section .col-md-4 { flex: 0 0 16.6666%; max-width: 16.6666%; } } .search-box { margin-bottom: 30px; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); color: white; border-radius: 10px; padding: 30px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .service-card { margin-bottom: 20px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease; border: none; background-color: white; } .service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); } .service-icon { font-size: 2.5rem; margin-bottom: 15px; color: #25fcbf; } .nav-link{ color: #495057 !important; border-radius: 5px; margin: 2px 2px; padding: 10px 15px; transition: all 0.2s ease; } .nav-link:hover, .nav-link.active { background-color: #e8f0f8; color: var(--connex-primary) !important; } .nav-link i { width: 20px; text-align: center; margin-right: 10px; } .navbar-brand { font-weight: 600; font-size: 1.3rem; } .navbarcolor{ color: #25fcbf; } /* Estilos para el contenedor del usuario */ .navbar .dropdown-toggle { border: 1px solid #dee2e6; background-color: white; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; } .navbar .dropdown-toggle:hover { background-color: #f8f9fa; border-color: #adb5bd; } .navbar .dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1); } /* Estilos para el menú desplegable */ .navbar .dropdown-menu { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; min-width: 200px; } .navbar .dropdown-item { padding: 8px 16px; font-size: 14px; display: flex; align-items: center; } .navbar .dropdown-item i { width: 20px; text-align: center; } .navbar .dropdown-divider { margin: 0.3rem 0; } /* Ajustes para móviles */ @media (max-width: 576px) { .navbar .dropdown-toggle { padding: 6px 10px; } .navbar .dropdown-toggle span { display: inline !important; font-size: 14px; } .navbar .dropdown-menu { min-width: 180px; } } /* Efecto hover para items del menú */ .navbar .dropdown-item:hover { background-color: #f8f9fa; color: #495057; } .navbar .dropdown-item:active { background-color: #e9ecef; } .section-title { position: relative; padding-bottom: 10px; margin-bottom: 25px; font-weight: 600; } .section-title:after { content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 3px; /* background: #f5f5f5; */ border-radius: 3px; } .Bloqueado { display: none !important; } .content-section{ display: none; position: relative; padding-top: 10px; padding-left: 16px; padding-right: 16px; box-sizing: border-box; } .content-section.active { display: block; } /* ─── H1 de sección: aparece al entrar, se oculta suavemente tras 15 segundos ─── */ .content-section > h1 { overflow: hidden; max-height: 4rem; opacity: 1; margin-bottom: 0.75rem; transition: max-height 0.6s ease, opacity 0.6s ease, margin 0.6s ease; } .content-section > h1.section-h1-oculto { max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; } /* Marca de agua centrada en cada sección */ .content-section::before { content: ''; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 320px; height: 320px; background-image: url('https://connex.com.ar/connex_logos/connex/Connex_Icono.png'); background-repeat: no-repeat; background-size: contain; background-position: center; opacity: 0.04; pointer-events: none; z-index: 0; } @media (max-width: 992px) { .sidebar { transform: translateX(-100%); width: 280px; } .sidebar.show { transform: translateX(0); } /* En móvil el sidebar colapsado no aplica, usa show/hide */ .sidebar.collapsed { transform: translateX(-100%); } .main-content, .main-content.expanded { margin-left: 0; } } /* ─── GIS: pantalla completa sin scroll ─── */ body:has(#Sistema_GIS_section.active) { overflow: hidden; } body:has(#Sistema_GIS_section.active) footer { display: none; } /* Responsive móvil / tablet */ @media (max-width: 768px) { .main-content { padding: 10px 4px; } .main-content > .container { padding-left: 4px; padding-right: 4px; } .content-section { padding-left: 8px; padding-right: 8px; } #Sistema_GIS_section, #Sistema_GIS_Section { height: auto; min-height: 0; } .content-section > h1 { font-size: 1.4rem; margin-top: 0.75rem; margin-bottom: 0.5rem; } } @media (max-width: 576px) { .main-content { padding: 8px 2px; } .main-content > .container { padding-left: 2px; padding-right: 2px; } .content-section { padding-left: 4px; padding-right: 4px; } .content-section > h1 { font-size: 1.2rem; } /* Cards de 1 columna en móvil */ #Reconectadores_Tablero_section .row-cols-md-3 > *, #CisternasV2_Tablero_section .col-lg-6, #CisternasV2_Tablero_section .col-xl-3, #CisternasV2_Tablero_section .col-xxl-3 { flex: 0 0 100%; width: 100%; max-width: 100%; } } /* ============================================ */ /* SECCIÓN INICIO */ /* ============================================ */ .inicio-hero { background: var(--connex-gradient); border-radius: 16px; padding: 1.4rem 1.8rem; color: white; position: relative; overflow: hidden; } .inicio-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 50%, rgba(61,143,170,0.2) 0%, transparent 65%); pointer-events: none; } .inicio-badge { display: inline-block; background: rgba(61,143,170,0.2); border: 1px solid rgba(61,143,170,0.4); padding: 0.3rem 1rem; border-radius: 50px; font-size: 0.75rem; color: #7ecde0; } .inicio-hero-title { font-size: 1.6rem; font-weight: 800; line-height: 1.2; color: white; margin-top: 0.6rem; margin-bottom: 0.5rem; } .inicio-gradient-text { background: linear-gradient(135deg, #ffffff, #7ecde0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .inicio-hero-sub { color: rgba(255,255,255,0.75); font-size: 0.85rem; margin-bottom: 0; } /* Stats */ .inicio-stats { background: linear-gradient(105deg, var(--connex-primary) 0%, var(--connex-secondary) 100%); border-radius: 16px; padding: 1.2rem 0; color: white; } .inicio-stat-item { padding: 0.6rem 0.5rem; } .inicio-stat-number { font-size: 1.9rem; font-weight: 800; margin-bottom: 0.1rem; } .inicio-stat-label { font-size: 0.75rem; opacity: 0.82; } /* Section title */ .inicio-section-title { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.4rem; background: linear-gradient(105deg, var(--connex-dark) 0%, var(--connex-primary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Service cards */ .inicio-service-card { background: white; border-radius: 16px; padding: 1.4rem 1.2rem; text-align: center; transition: all 0.3s ease; height: 100%; box-shadow: 0 4px 18px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.04); } .inicio-service-card:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(30,74,107,0.13); } .inicio-service-icon { width: 56px; height: 56px; background: linear-gradient(105deg, var(--connex-primary), var(--connex-secondary)); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.9rem; } .inicio-service-icon i { font-size: 1.4rem; color: white; } .inicio-service-card h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--connex-dark); } .inicio-service-card p { font-size: 0.8rem; color: var(--connex-gray); margin-bottom: 0; } /* Benefit cards */ .inicio-benefit-card { background: white; border-radius: 16px; padding: 1.4rem 1.2rem; text-align: center; transition: all 0.3s ease; height: 100%; box-shadow: 0 4px 18px rgba(0,0,0,0.06); } .inicio-benefit-card:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(30,74,107,0.13); } .inicio-benefit-icon { width: 56px; height: 56px; background: linear-gradient(105deg, var(--connex-primary), var(--connex-secondary)); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.9rem; } .inicio-benefit-icon i { font-size: 1.4rem; color: white; } .inicio-benefit-card h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--connex-dark); } .inicio-benefit-card p { font-size: 0.8rem; color: var(--connex-gray); margin-bottom: 0; } /* Team cards */ .inicio-team-card { background: white; border-radius: 16px; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 4px 18px rgba(0,0,0,0.06); } .inicio-team-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0,0,0,0.1); } .inicio-team-img-wrapper { background: linear-gradient(105deg, var(--connex-primary), var(--connex-secondary)); } .inicio-team-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .inicio-team-role { font-size: 0.75rem; color: var(--connex-primary); } /* Background ligero para secciones alternas */ .inicio-bg-light { background: linear-gradient(135deg, #ffffff 0%, #f4f8fc 100%); border-radius: 16px; padding: 2rem 1.5rem; } /* Grid tecnologías/clientes */ .inicio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: 0.9rem; } .inicio-grid-item { background: white; border-radius: 12px; padding: 0.9rem 0.6rem; text-align: center; transition: all 0.25s ease; box-shadow: 0 3px 10px rgba(0,0,0,0.05); display: flex; flex-direction: column; align-items: center; justify-content: center; } .inicio-grid-item:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(30,74,107,0.1); } .inicio-grid-item img { max-width: 85px; max-height: 52px; width: auto; height: auto; object-fit: contain; margin-bottom: 0.4rem; } .inicio-grid-item p { font-size: 0.68rem; font-weight: 600; color: var(--connex-dark); margin: 0; } /* CTA */ .inicio-cta { background: var(--connex-gradient); border-radius: 16px; padding: 2.5rem 2rem; text-align: center; color: white; } .inicio-btn-gradient { background: linear-gradient(105deg, var(--connex-accent), var(--connex-secondary)); border: none; padding: 10px 28px; border-radius: 50px; font-weight: 600; color: white; text-decoration: none; display: inline-block; transition: all 0.3s; } .inicio-btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(30,74,107,0.4); color: white; } @media (max-width: 768px) { .inicio-hero { padding: 1.5rem 1rem; } .inicio-hero-title { font-size: 1.5rem; } .inicio-stat-number { font-size: 1.4rem; } .inicio-section-title { font-size: 1.35rem; } .inicio-bg-light { padding: 1.2rem 1rem; } .inicio-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 0.6rem; } } /* -------------- Patentes - URegistros --------*/ .progress.vertical { position: relative; width: 20px; min-height: 240px; float: left; margin-right: 20px; background: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none; } /* Cisterna*/ .Cisternas_Tablero_progress-container { display: flex; flex-direction: row; align-items: flex-end; height: 120px; position: relative; gap: 4px; margin: 0 10px; } .Cisternas_Tablero_progress-labels { position: relative; height: 100%; width: 30px; text-align: right; } .Cisternas_Tablero_progress-labels span { position: absolute; right: 0; font-size: 0.75rem; color: #666; transform: translateY(50%); white-space: nowrap; } .Cisternas_Tablero_top-label { top: -17.5px; } .Cisternas_Tablero_bottom-label { bottom: 0; } .Cisternas_Tablero_percentage-value { position: absolute; right: 0; font-weight: bold; color: #0d6efd; font-size: 0.75rem; white-space: nowrap; transform: translateY(50%); } .Cisternas_Tablero_vertical-progress { height: 100%; width: 20px; background-color: #f0f0f0; border-radius: 10px; overflow: hidden; position: relative; } .Cisternas_Tablero_progress-bar-vertical { width: 100%; height: 0; transition: height 0.6s ease; background-color: #0d6efd; position: absolute; bottom: 0; } .Cisternas_Tablero_indicator { display: flex; align-items: center; margin-bottom: 8px; white-space: nowrap; } .Cisternas_Tablero_indicator-badge { width: 12px; height: 12px; margin-right: 6px; border-radius: 50%; flex-shrink: 0; } .Cisternas_Tablero_indicator-text { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; } .Cisternas_Tablero_compact-gauges { display: flex; align-items: center; gap: 10px; margin-left: 10px; flex-shrink: 0; } .Cisternas_Tablero_gauge { position: relative; width: 70px; height: 70px; flex-shrink: 0; } .Cisternas_Tablero_gauge-value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; } .Cisternas_Tablero_gauge-value-main { font-weight: bold; font-size: 14px; line-height: 1; } .Cisternas_Tablero_gauge-value-unit { font-size: 9px; color: #666; line-height: 1.2; } .Cisternas_Tablero_horizontal-container { display: flex; align-items: center; justify-content: space-between; width: 100%; flex-wrap: nowrap; } .Cisternas_Tablero_status-indicators { display: flex; flex-direction: column; margin-right: 10px; min-width: 80px; flex-shrink: 0; } .Cisternas_Tablero_separator { height: 120px; width: 1px; background-color: #e0e0e0; margin: 0 10px; flex-shrink: 0; } .Cisternas_Tablero_bombas-table { border-radius: 10px; overflow: hidden; margin: 0; /* Eliminamos márgenes */ font-size: 0.82rem; width: 100%; table-layout: fixed; border-collapse: collapse; } /* Primer th horizontal */ .Cisternas_Tablero_bombas-table th:first-child { text-align: center; padding: 4px 4px; /* Padding reducido */ background-color: #f8f9fa; width: 80px; /* Ancho más ajustado */ } /* Th verticales compactos */ .Cisternas_Tablero_bombas-table th:not(:first-child) { text-align: center; padding: 2px 4px; background-color: #f8f9fa; writing-mode: vertical-rl; transform: rotate(180deg); height: auto; min-height: 40px; width: 24px; vertical-align: middle; white-space: nowrap; line-height: 1.2; margin: 0 auto; } /* Celdas de datos */ .Cisternas_Tablero_bombas-table td { text-align: center; padding: 4px 4px; vertical-align: middle; word-break: break-word; } /* Primera columna */ .Cisternas_Tablero_bombas-table td:first-child { font-weight: bold; background-color: #f8f9fa; } .Cisternas_Tablero_estado-cell { text-align: left; padding-left: 10px !important; font-weight: 500; white-space: nowrap; } .Cisternas_Tablero_led-indicator { display: inline-block; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 2px rgba(0,0,0,0.1); } /* Estilos responsivos */ .Cisternas_Tablero_card-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 20px; } .Cisternas_Tablero_card-container_Tanques { display: grid; grid-template-columns: repeat(4, minmax(450px, 1fr)); /* Siempre 3 columnas iguales */ gap: 20px; /* Espacio entre cards */ } .Cisternas_Tablero_card { min-width: 0; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .Cisternas_Tablero_status-progress-container { display: flex; align-items: center; flex-shrink: 0; } .Cisternas_Tablero_compact-indicators { flex: 1; min-width: 0; overflow: auto; } /* Corrección específica para medidores circulares */ @media (max-width: 776px) { .tabla-consistente { font-size: 0.78rem; } .tabla-consistente thead th:first-child { width: 80px; padding: 6px 4px; } .tabla-consistente thead th:not(:first-child) { width: 28px; min-height: 50px; padding: 3px 4px; } .tabla-consistente tbody td { padding: 6px 4px; } .Cisternas_Tablero_gauge-value { top: 60%; left: 58%; transform: translate(-50%, -50%) scale(0.9); } .Cisternas_Tablero_gauge-value-main { font-size: 13px; } .Cisternas_Tablero_gauge-value-unit { font-size: 8px; } .Cisternas_Tablero_gauge { width: 65px; height: 65px; } } @media (max-width: 1200px) { .Cisternas_Tablero_indicator-text { font-size: 0.75rem; } .Cisternas_Tablero_status-indicators { min-width: 70px; } .Cisternas_Tablero_separator { margin: 0 8px; } } @media (max-width: 992px) { .Cisternas_Tablero_card-container { grid-template-columns: 1fr; } .Cisternas_Tablero_horizontal-container { flex-wrap: wrap; } .Cisternas_Tablero_status-progress-container { width: 100%; justify-content: flex-start; margin-bottom: 15px; } .Cisternas_Tablero_separator { height: 1px; width: 100%; margin: 10px 0; } .Cisternas_Tablero_compact-gauges { margin-left: 0; margin-top: 15px; justify-content: center; width: 100%; } } @media (max-width: 576px) { .Cisternas_Tablero_gauge { width: 60px; height: 60px; } .Cisternas_Tablero_gauge-value-main { font-size: 12px; } .Cisternas_Tablero_progress-container { height: 100px; } } .Cisternas_Tablero_gauge-title { font-size: 0.8rem; font-weight: bold; color: #555; margin-bottom: 0px; text-align: center; white-space: nowrap; line-height: 1.0; } /* ---------*/ /* Estilos para el select múltiple con búsqueda */ .select-container { position: relative; width: 100%; margin-bottom: 20px; } .select-btn { display: flex; height: 50px; align-items: center; justify-content: space-between; padding: 0 16px; border-radius: 8px; cursor: pointer; background-color: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); border: 1px solid #ddd; } .select-btn .btn-text { font-size: 16px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; } .select-btn .arrow-dwn { display: flex; height: 21px; width: 21px; color: #fff; font-size: 14px; border-radius: 50%; background: #6e93f7; align-items: center; justify-content: center; transition: 0.3s; flex-shrink: 0; } .select-btn.open .arrow-dwn { transform: rotate(-180deg); } .list-items { position: relative; margin-top: 10px; border-radius: 8px; background-color: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); display: none; max-height: 400px; overflow: hidden; border: 1px solid #eee; z-index: 1000; } .select-btn.open ~ .list-items { display: block; } .search-box { padding: 15px; border-bottom: 1px solid #eee; position: sticky; top: 0; background: white; z-index: 1; } .search-box input { width: 100%; padding: 10px 15px; border: 1px solid #ddd; border-radius: 5px; outline: none; font-size: 14px; } .search-box input:focus { border-color: #6e93f7; } .options-container { max-height: 300px; overflow-y: auto; padding: 5px 0; } .list-items .item { display: flex; align-items: center; list-style: none; height: 45px; cursor: pointer; transition: 0.3s; padding: 0 15px; border-radius: 8px; position: relative; } .list-items .item:hover { background-color: #e7edfe; } .item .item-text { font-size: 15px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item .checkbox { display: flex; align-items: center; justify-content: center; height: 16px; width: 16px; border-radius: 4px; margin-right: 12px; border: 1.5px solid #c0c0c0; transition: all 0.3s ease-in-out; flex-shrink: 0; } .item.checked .checkbox { background-color: #4070f4; border-color: #4070f4; } .checkbox .check-icon { color: #fff; font-size: 11px; transform: scale(0); transition: all 0.2s ease-in-out; } .item.checked .check-icon { transform: scale(1); } .max-selection { color: #ff4444; font-size: 13px; margin-top: 5px; display: none; text-align: center; padding: 5px; } .no-results { padding: 15px; text-align: center; color: #888; font-size: 14px; display: none; } .selected-data-display { margin-top: 20px; padding: 15px; background: #f0f0f0; border-radius: 5px; font-size: 14px; white-space: pre-wrap; max-height: 150px; overflow-y: auto; } .floating-bubble { position: fixed; bottom: 20px; right: 20px; width: 4rem; height: 4rem; border-radius: 50%; background-color: #0d6efd; color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1000; cursor: pointer; transition: all 0.3s; } .floating-bubble:hover { transform: scale(1.1); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } .bubble-icon { font-size: 1.5rem; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* Ajustes responsive */ @media (max-width: 768px) { .floating-bubble { width: 3.5rem; height: 3.5rem; bottom: 15px; right: 15px; } .bubble-icon { font-size: 1.3rem; } } @media (max-width: 576px) { .floating-bubble { width: 3rem; height: 3rem; bottom: 10px; right: 10px; } .bubble-icon { font-size: 1.1rem; } } /* Loader global */ #global-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(3px); } #global-loader .spinner-border { width: 3rem; height: 3rem; } /* ============================================ */ /* TEMA OSCURO - PARTE 2 */ /* Clases legacy de Cisternas y selector múltiple*/ /* ============================================ */ [data-bs-theme="dark"] .Cisternas_Tablero_progress-labels span, [data-bs-theme="dark"] .Cisternas_Tablero_gauge-value-unit { color: #9aa4af; } [data-bs-theme="dark"] .Cisternas_Tablero_gauge-title { color: #c9d1d9; } [data-bs-theme="dark"] .Cisternas_Tablero_vertical-progress { background-color: #232a34; } [data-bs-theme="dark"] .Cisternas_Tablero_separator { background-color: #333c46; } [data-bs-theme="dark"] .Cisternas_Tablero_bombas-table th:first-child, [data-bs-theme="dark"] .Cisternas_Tablero_bombas-table th:not(:first-child), [data-bs-theme="dark"] .Cisternas_Tablero_bombas-table td:first-child { background-color: #1e242c; color: #e8e8e8; } [data-bs-theme="dark"] .item .checkbox { border-color: #4a5568; } [data-bs-theme="dark"] .no-results { color: #9aa4af; } [data-bs-theme="dark"] .selected-data-display { background: #1e242c; color: #e8e8e8; } /* Chrome propio de Leaflet (Sistema_GIS, WMeter, Reconectadores) */ [data-bs-theme="dark"] .leaflet-popup-content-wrapper, [data-bs-theme="dark"] .leaflet-popup-tip { background: #1a1f27; color: #e8e8e8; } [data-bs-theme="dark"] .leaflet-popup-content-wrapper .text-muted { color: #9aa4af !important; } [data-bs-theme="dark"] .leaflet-popup-close-button { color: #c9d1d9 !important; } [data-bs-theme="dark"] .leaflet-control-zoom a, [data-bs-theme="dark"] .leaflet-bar a { background-color: #1a1f27; color: #e8e8e8; border-color: #333c46 !important; } [data-bs-theme="dark"] .leaflet-control-zoom a:hover, [data-bs-theme="dark"] .leaflet-bar a:hover { background-color: #232a34; } [data-bs-theme="dark"] .leaflet-control-attribution { background: rgba(26, 31, 39, 0.8); color: #9aa4af; } [data-bs-theme="dark"] .leaflet-control-attribution a { color: #7ecde0; }