/* Design system ENERGITEL — variables centralizadas, todo el CSS las reutiliza. */ :root { /* Sistema visual Energitel estandarizado (mismo :root que la bitácora del laboratorio). */ --azul-dodger: #40ADFF; --azul-medium: #0068D4; --navy: #102050; --blanco: #fff; --verde-solar: #8AC640; --verde-profundo: #0C7A21; --verde-ok: #1E9E4A; --violeta: #4C3FBF; --naranja: #F5A524; --page: #F5F8FD; --muted: #F3F6FB; --text: #102050; --text-2: #4E5D82; --text-3: #8892AC; --border: rgba(16,32,80,.12); --border-strong: rgba(16,32,80,.22); --warn: #B25400; --warn-bg: rgba(245,165,36,.16); --danger: #B3261E; --danger-bg: rgba(179,38,30,.10); --ok: #0C7A21; --ok-bg: rgba(138,198,64,.16); --info-bg: rgba(64,173,255,.14); --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --font: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', monospace; /* Alto de la barra superior (.eg-head). Lo usan los bloques sticky de Facturación y la pantalla "en construcción" para calcular su offset. */ --head-h: 56px; /* Alias de los nombres anteriores: las vistas todavía no migradas (Kanban, Proyectos, Seguimiento OR, Facturación) siguen funcionando tal cual y heredan la paleta nueva sin tocar ninguna de sus reglas. */ --energitel-navy: var(--navy); --energitel-blue: var(--azul-medium); --energitel-light-blue: var(--azul-dodger); --energitel-green: var(--verde-solar); --energitel-white: var(--blanco); --success: var(--ok); --warning: var(--naranja); --gray: var(--text-3); --bg: var(--page); --text-muted: var(--text-2); --radius: var(--r-lg); --radius-sm: var(--r-md); --shadow: 0 1px 2px rgba(16,32,80,.05); --shadow-hover: 0 3px 10px rgba(16,32,80,.08); font-family: var(--font); } * { box-sizing: border-box; } body { margin: 0; background: var(--page); color: var(--text); font-family: var(--font); font-size: 14.5px; line-height: 1.45; -webkit-font-smoothing: antialiased; } button, input, select, textarea { font-family: var(--font); } h1, h2, h3, h4, .brand-title { font-weight: 800; } /* ---------- Barra superior del área de contenido (.eg-head) ---------- */ .eg-head { display: flex; align-items: center; gap: 16px; background: #fff; border-bottom: 1px solid var(--border); padding: 10px 18px; justify-content: space-between; position: sticky; top: 0; z-index: 50; min-height: var(--head-h); box-sizing: border-box; } /* * La barra superior es de Gerencia y solo de Gerencia: su titulo, el * buscador, el estado de sincronizacion y "+ Nuevo proyecto" actuan sobre * los proyectos de Gerencia. En Seguimiento OR y Facturacion no aplican * —cada modulo trae su propia barra— asi que se oculta entera. * * Al ocultarla, --head-h pasa a 0 en esos modulos: es el alto que usan el * bloque sticky de Facturacion (pagosSolares.css) y la pantalla "en * construccion" (vistaEnConstruccion.css) para calcular su offset, y sin * esto dejarian 56px de hueco muerto donde ya no hay barra. * * Igual que con las pestanas, se oculta por excepcion: sin `:has()` la * barra se sigue viendo siempre, como antes. */ .eg-main:has(#view-seguimiento-or-kanban.active), .eg-main:has(#view-seguimiento-or.active), .eg-main:has(#view-pagos-solares.active) { --head-h: 0px; } .eg-main:has(#view-seguimiento-or-kanban.active) .eg-head, .eg-main:has(#view-seguimiento-or.active) .eg-head, .eg-main:has(#view-pagos-solares.active) .eg-head { display: none; } .eg-head__title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; } .eg-head__sub { font-size: 12px; color: var(--text-2); margin-top: 2px; } .eg-head__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .sync-info { font-size: 11.5px; font-weight: 500; color: var(--text-2); text-align: right; white-space: nowrap; } .search-box input { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 11px; font-size: 13px; background: #fff; color: var(--text); min-width: 200px; } .search-box input::placeholder { color: var(--text-3); } .search-box input:focus { outline: 1px solid var(--azul-medium); border-color: var(--azul-medium); } .eg-head .chk { font-size: 10.5px; color: var(--text-2); display: flex; align-items: center; gap: 4px; } /* ---------- Pestañas de las vistas de Gerencia ---------- */ .eg-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .eg-tab { font-size: 13.5px; font-weight: 700; color: var(--text-2); background: transparent; border: none; border-radius: var(--r-md); padding: 9px 18px; cursor: pointer; transition: background .15s, color .15s, transform .15s; } .eg-tab:hover { background: var(--muted); color: var(--text); } /* * Las pestañas SOLO pertenecen a Gerencia (Dashboard/Kanban/Proyectos). Al * entrar a otro módulo se ocultan: si no, quedan justo encima de las * pestañas de ese módulo (OR/Construcción/RETIE) y parecen el mismo * control, mezclando dos niveles de navegación distintos. * * Se oculta por excepción y no se muestra por regla, a propósito: en un * navegador sin `:has()` las pestañas siguen visibles siempre —como antes— * en vez de desaparecer y dejar la app sin navegación. * * La vuelta a Gerencia está en el menú lateral, que sí se ve desde * cualquier módulo. */ .eg-body:has(#view-seguimiento-or-kanban.active) #gerenciaTabs, .eg-body:has(#view-seguimiento-or.active) #gerenciaTabs, .eg-body:has(#view-pagos-solares.active) #gerenciaTabs { display: none; } /* * El resaltado se decide por la vista que está visible, no por la clase * .active que conmuta el JS. Hace falta porque "Gerencia" (menú lateral) y * "Dashboard" (pestaña) comparten data-view: el JS solo puede marcar el * botón pulsado, así que sin esto uno de los dos quedaría apagado. */ .eg-tab.active, .eg-app:has(#view-dashboard.active) .eg-tab[data-view="dashboard"], .eg-app:has(#view-kanban.active) .eg-tab[data-view="kanban"], .eg-app:has(#view-proyectos.active) .eg-tab[data-view="proyectos"] { background: var(--azul-medium); color: #fff; box-shadow: 0 2px 8px rgba(0,104,212,.28); } /* Botones: misma apariencia que .eg-btn del sistema visual, conservando los modificadores .primary / .dark que ya usan las vistas y la barra superior. */ .btn-mini { font-size: 12.5px; font-weight: 700; border-radius: var(--r-md); padding: 8px 15px; transition: .15s; border: 1px solid var(--border); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; background: #fff; color: var(--text); } .btn-mini:hover { background: var(--muted); } .btn-mini.primary { background: var(--azul-medium); color: #fff; border-color: var(--azul-medium); } .btn-mini.primary:hover { background: var(--azul-medium); filter: brightness(1.08); } .btn-mini.dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; } .btn-mini.dark:hover { background: rgba(255,255,255,.16); } .btn-mini:disabled { opacity: .5; cursor: not-allowed; } .btn-refresh { background: var(--azul-medium); color: #fff; border: none; border-radius: var(--r-md); padding: 7px 13px; cursor: pointer; font-weight: 600; font-size: 11px; } /* ---------- App shell: menú lateral navy + área principal (.eg-app) ---------- */ .eg-app { display: grid; grid-template-columns: auto 1fr; min-height: 100vh; background: var(--page); } .eg-main { min-width: 0; display: flex; flex-direction: column; } .eg-body { padding: 14px 18px 40px; display: flex; flex-direction: column; gap: 14px; animation: fadeIn .18s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .eg-side { width: 210px; background: var(--navy); color: #fff; display: flex; flex-direction: column; padding: 16px 0 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: width .18s ease; } .eg-side__brand { padding: 0 16px 16px; } .eg-side__brand-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* * El recuadro recorta el logo: con el menú contraído se estrecha hasta dejar * ver solo el símbolo. El logo es un lockup de 636x159 (proporción 4:1) con * la esfera ocupando el 27% izquierdo, así que a 28px de alto mide 112px de * ancho y su símbolo cabe en los primeros ~31px. */ .eg-side__logo-wrap { overflow: hidden; flex-shrink: 0; } .eg-side__logo { display: block; height: 34px; width: auto; } .eg-side__brand-sub { margin-top: 8px; font-size: 10.5px; color: rgba(255,255,255,.6); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eg-side__nav { display: flex; flex-direction: column; } .eg-side__nav button { display: flex; align-items: center; gap: 10px; padding: 11px 16px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.82); background: transparent; border: none; width: 100%; text-align: left; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; } .eg-side__nav button:hover { background: rgba(255,255,255,.10); color: #fff; } /* Mismo criterio que las pestañas: manda la vista visible. "Gerencia" queda marcado en cualquiera de sus tres vistas, aunque el clic haya sido en una pestaña y no en el propio botón del menú. */ .eg-side__nav button.active, .eg-app:has(#view-dashboard.active) .eg-side__nav button[data-view="dashboard"], .eg-app:has(#view-kanban.active) .eg-side__nav button[data-view="dashboard"], .eg-app:has(#view-proyectos.active) .eg-side__nav button[data-view="dashboard"], .eg-app:has(#view-seguimiento-or-kanban.active) .eg-side__nav button[data-view="seguimiento-or-kanban"], .eg-app:has(#view-pagos-solares.active) .eg-side__nav button[data-view="pagos-solares"] { background: var(--azul-medium); color: #fff; font-weight: 700; } .eg-side__group { font-size: 10px; letter-spacing: .14em; color: rgba(255,255,255,.5); padding: 18px 16px 6px; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; } .eg-side__icon { width: 16px; text-align: center; font-size: 14px; flex-shrink: 0; } .eg-side__foot { margin-top: auto; padding: 18px 16px 0; } /* Créditos de autoría, al fondo del menú y deliberadamente discretos: se leen si se buscan, pero no compiten con la navegación. */ .eg-side__creditos { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 3px; } .eg-side__creditos p { margin: 0; font-size: 9.5px; letter-spacing: .04em; color: rgba(255,255,255,.4); } .eg-side__creditos b { font-weight: 700; color: rgba(255,255,255,.62); } .sidebar-toggle { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; padding: 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 12px; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; } .sidebar-toggle:hover { background: rgba(255,255,255,.18); } /* Menú lateral contraído: se angosta a solo íconos, sin etiquetas. */ .eg-side.collapsed { width: 62px; } .eg-side.collapsed .eg-side__brand-sub, .eg-side.collapsed .eg-side__group, .eg-side.collapsed .eg-side__foot, .eg-side.collapsed .nav-label { display: none; } .eg-side.collapsed .eg-side__brand { padding: 0 8px 16px; } .eg-side.collapsed .eg-side__brand-row { justify-content: center; gap: 6px; } /* Solo el símbolo: se estrecha el recuadro y el resto del lockup queda fuera. */ .eg-side.collapsed .eg-side__logo-wrap { width: 30px; } .eg-side.collapsed .eg-side__logo { height: 28px; } .eg-side.collapsed .eg-side__nav button { justify-content: center; padding: 10px 0; } .nav-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--gray); } .nav-dot.dot-blue { background: var(--energitel-blue); } .nav-dot.dot-navy { background: var(--energitel-navy); } .nav-dot.dot-green { background: var(--energitel-green); } /* ---------- Barra de filtros compartida (Dashboard + Kanban + Proyectos) ---------- */ .filters-bar { padding: 11px 14px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 10px; } .filter-group { display: flex; flex-direction: column; gap: 6px; min-width: 140px; } .filter-group-inline { flex-direction: row; align-items: center; gap: 14px; margin-left: auto; } .filter-label { font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; } .filter-empty-hint { font-size: 12px; color: var(--text-3); font-style: italic; } .filters-bar select { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; font-size: 13px; background: #fff; color: var(--text); min-width: 160px; } .filters-bar .chk { font-size: 12.5px; font-weight: 500; color: var(--text-2); display: flex; align-items: center; gap: 6px; white-space: nowrap; } /* ---------- Desplegable de selección múltiple (Etapa / Estado del generador) ---------- */ .dropdown-multi { position: relative; } .dropdown-toggle { min-width: 170px; text-align: left; border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 11px; font-size: 13px; background: #fff; color: var(--text); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; } .dropdown-toggle:hover { border-color: var(--azul-medium); } .dropdown-caret { font-size: 11px; color: var(--text-3); } .dropdown-panel { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 12px 30px rgba(16,32,80,.15); padding: 8px; min-width: 220px; max-height: 260px; overflow-y: auto; } .dropdown-multi.open .dropdown-panel { display: block; } .dropdown-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; font-size: 13px; color: var(--text); border-radius: 6px; cursor: pointer; white-space: nowrap; } .dropdown-item:hover { background: var(--bg); } /* ---------- Views ---------- */ .view { display: none; } .view.active { display: block; } .section-title { font-size: 15px; color: var(--navy); margin: 10px 0 4px; font-weight: 800; letter-spacing: -.01em; } .section-title:first-child { margin-top: 0; } /* ---------- Secciones del tablero ---------- * Cada bloque del Dashboard va en su propio recuadro con cabecera. Antes * flotaban sueltos sobre el fondo, separados solo por un título, y la * página se leía como una lista plana de tarjetas sin principio ni fin. * * La cabecera va en blanco y el cuerpo en el gris de la página, para que * las tarjetas blancas de dentro resalten: así se distingue "la sección" * de "lo que hay en la sección". */ .eg-seccion { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .eg-seccion__head { padding: 13px 16px; border-bottom: 1px solid var(--border); } .eg-seccion__titulo { margin: 0; font-size: 15px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; } .eg-seccion__sub { margin: 3px 0 0; font-size: 12px; color: var(--text-2); } .eg-seccion__body { padding: 14px 16px; background: var(--page); display: flex; flex-direction: column; gap: 14px; } /* Las tablas que van sueltas dentro de una sección (sin panel propio) necesitan su fondo blanco, o quedarían sobre el gris del cuerpo. */ .eg-seccion__body > .eg-table-wrap { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); } /* ============================================================ Componentes del sistema visual Energitel estandarizado. Dashboard es la primera vista migrada; el resto conserva sus clases y las hereda vía los alias de :root. ============================================================ */ /* Ritmo vertical de la vista, equivalente a .eg-body del sistema. */ #dashboardContent { display: flex; flex-direction: column; gap: 14px; } #dashboardContent .section-title { margin: 0; } /* KPIs compactos: etapas e indicadores de cumplimiento. */ .eg-kpis { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); } .eg-kpis--2 { grid-template-columns: repeat(2, 1fr); } .eg-kpis--3 { grid-template-columns: repeat(3, 1fr); } /* Mismo criterio que .kpi2: icono a la izquierda, cifra y etiqueta a su derecha, y la barra de progreso cruzando la tarjeta entera debajo. */ .eg-kpi { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 13px 15px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1px 13px; transition: box-shadow .15s, transform .15s, border-color .15s; } .eg-kpi__icon { grid-row: 1 / span 2; } .eg-kpi__value { align-self: end; } .eg-kpi__label { align-self: start; } .eg-kpi .eg-hbar, .eg-kpi__meta { grid-column: 1 / -1; } .eg-kpi:hover { border-color: rgba(0,104,212,.32); transform: translateY(-1px); } .eg-kpi__icon { width: 34px; height: 34px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: var(--info-bg); color: var(--azul-medium); } .eg-kpi__icon--warn { background: var(--warn-bg); color: var(--warn); } .eg-kpi__icon--ok { background: var(--ok-bg); color: var(--ok); } .eg-kpi__icon--danger { background: var(--danger-bg); color: var(--danger); } .eg-kpi__icon--gray { background: #EDF0F6; color: var(--text-3); } .eg-kpi__value { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em; } .eg-kpi__label { font-size: 12.5px; font-weight: 600; color: var(--text-2); line-height: 1.45; } /* * Los dos datos del pie de la tarjeta, cada uno con su rótulo. Antes iban * en una sola línea ("107,8 kWp · 75% del portafolio") en monoespaciada de * 11px y gris medio: se leía mal y había que separar de cabeza dónde * terminaba un dato y empezaba el otro. */ .eg-kpi__meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .eg-kpi__dato { display: flex; flex-direction: column; gap: 1px; } /* En gris medio y no en el claro: el claro es justo lo que no se leía. */ .eg-kpi__dato-rotulo { font-size: 10px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; } .eg-kpi__dato b { font-size: 13.5px; font-weight: 700; color: var(--navy); } /* Entrada escalonada de las tarjetas de etapa. */ .eg-kpis .eg-kpi { animation: kpiIn .4s ease backwards; } .eg-kpis .eg-kpi:nth-child(1) { animation-delay: .02s; } .eg-kpis .eg-kpi:nth-child(2) { animation-delay: .09s; } .eg-kpis .eg-kpi:nth-child(3) { animation-delay: .16s; } .eg-kpis .eg-kpi:nth-child(4) { animation-delay: .23s; } /* Barra horizontal del sistema visual: muestra una proporción ya calculada. */ .eg-hbar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-top: 10px; } .eg-hbar__track { grid-column: 1 / -1; background: var(--muted); border-radius: 999px; height: 8px; overflow: hidden; } .eg-hbar__fill { height: 100%; border-radius: 999px; background: var(--azul-medium); animation: hbarGrow .7s cubic-bezier(.22,.61,.36,1) backwards; transition: width .3s ease; } @keyframes hbarGrow { from { width: 0 !important; } } .eg-hbar__label { font-size: 11px; font-weight: 700; color: var(--text-2); font-family: var(--font-mono); } /* KPIs de tablero: fila superior del Dashboard. */ .kpi2-grid { display: grid; gap: 12px; grid-template-columns: repeat(5, 1fr); } /* Con solo dos tarjetas, repartir todo el ancho las dejaba de medio metro y casi vacías; se les pone un tope y quedan alineadas a la izquierda. */ .kpi2-grid--2 { grid-template-columns: repeat(2, minmax(0, 330px)); justify-content: start; } .kpi2-grid--4 { grid-template-columns: repeat(4, 1fr); } .kpi2-grid--6 { grid-template-columns: repeat(6, 1fr); } .kpi2-grid .kpi2 { animation: kpiIn .35s ease backwards; } .kpi2-grid .kpi2:nth-child(1) { animation-delay: .02s; } .kpi2-grid .kpi2:nth-child(2) { animation-delay: .07s; } .kpi2-grid .kpi2:nth-child(3) { animation-delay: .12s; } .kpi2-grid .kpi2:nth-child(4) { animation-delay: .17s; } .kpi2-grid .kpi2:nth-child(5) { animation-delay: .22s; } .kpi2-grid .kpi2:nth-child(6) { animation-delay: .27s; } @keyframes kpiIn { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Con la tipografía más grande, seis KPIs en una fila solo caben holgados en pantallas anchas; por debajo se reparten en dos filas de tres. */ @media (max-width: 1400px) { .kpi2-grid--6 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1100px) { .kpi2-grid, .kpi2-grid--4, .kpi2-grid--6 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .kpi2-grid, .kpi2-grid--4, .kpi2-grid--6 { grid-template-columns: repeat(2, 1fr); } } /* * Icono a la izquierda y cifra+etiqueta a la derecha, en vez de apilarlo * todo arriba: apilado, el contenido ocupaba la esquina de una tarjeta * ancha y quedaba medio cuadro vacío. En horizontal la tarjeta se llena y * ademas baja de alto, así que entra más información en la misma pantalla. */ .kpi2 { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1px 13px; transition: .15s; } .kpi2__icon { grid-row: 1 / span 2; } .kpi2__value { align-self: end; } .kpi2__label { align-self: start; } .kpi2:hover { border-color: rgba(0,104,212,.35); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16,32,80,.06); } /* Solo las tarjetas que llevan a algún sitio se comportan como pulsables. */ .kpi2--filtro { cursor: pointer; } .kpi2--filtro:focus-visible { outline: 2px solid var(--azul-medium); outline-offset: 2px; } .kpi2.is-active { border-color: var(--azul-medium); box-shadow: 0 0 0 1px var(--azul-medium) inset; } /* ---------- Globo de ayuda ---------- * Explica un término al pasar el puntero, en cualquier elemento que lleve * data-ayuda. Se usa donde una palabra sola no basta: "Parcial" dice el * estado, pero no qué lo provoca. * * Frente al `title` del navegador: aparece al instante (el nativo tarda ~1s), * se puede leer en varias líneas y va con el resto del diseño. El nativo se * reserva para dentro de tablas, donde un globo dibujado por CSS quedaría * cortado por el desplazamiento lateral. */ [data-ayuda] { position: relative; cursor: help; } [data-ayuda]::after { content: attr(data-ayuda); position: absolute; bottom: calc(100% + 8px); left: 0; width: max-content; max-width: 260px; background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1.45; letter-spacing: normal; text-transform: none; white-space: normal; text-align: left; padding: 8px 10px; border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(16,32,80,.28); opacity: 0; visibility: hidden; transform: translateY(3px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 60; pointer-events: none; } [data-ayuda]:hover::after, [data-ayuda]:focus-visible::after { opacity: 1; visibility: visible; transform: translateY(0); } /* Cerca del borde derecho el globo se ancla por la derecha para no salirse. */ [data-ayuda].ayuda-derecha::after { left: auto; right: 0; } /* Aviso de tabla filtrada: sin él, una tabla recortada se confunde con la completa y parece que faltaran proyectos. */ .filtro-aviso { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--info-bg); border: 1px solid rgba(0,104,212,.24); border-radius: var(--r-md); padding: 9px 12px; font-size: 13px; color: var(--text); } .filtro-aviso b { color: var(--navy); } .kpi2__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; } .kpi2__icon--blue { background: var(--info-bg); color: var(--azul-medium); } .kpi2__icon--navy { background: rgba(16,32,80,.10); color: var(--navy); } .kpi2__icon--green { background: var(--ok-bg); color: var(--ok); } .kpi2__icon--amber { background: var(--warn-bg); color: var(--warn); } .kpi2__icon--red { background: #F6E4E2; color: #C1483C; } .kpi2__icon--gray { background: #EDF0F6; color: var(--text-3); } .kpi2__value { font-size: 32px; font-weight: 800; color: var(--text); line-height: 1; letter-spacing: -.02em; } .kpi2__label { font-size: 12.5px; font-weight: 600; color: var(--text-2); line-height: 1.4; } /* Paneles y rejilla de gráficas. */ .eg-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow .15s, border-color .15s; } .eg-panel:hover { border-color: rgba(0,104,212,.24); box-shadow: 0 4px 14px rgba(16,32,80,.06); } .eg-panel__head { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .eg-panel__title { font-size: 14.5px; font-weight: 700; } .eg-panel__body { padding: 12px 14px; } .eg-table-wrap { overflow: auto; max-height: 560px; } .eg-table-wrap table.data-table th { position: sticky; top: 0; z-index: 1; } .an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Con un número impar de paneles, el último ocupa la fila completa en vez de quedar suelto a media página. */ .an-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } @media (max-width: 900px) { .an-grid { grid-template-columns: 1fr; } } .chart-box { min-height: 240px; } .eg-mono { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2); } .chart-empty, .empty-state, .empty-col-msg { color: var(--text-3); text-align: center; padding: 40px 20px; font-size: 13px; } /* Tablas: apariencia de .eg-table del sistema visual. */ .table-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); } table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; } table.data-table th { text-align: left; background: var(--muted); color: var(--text-2); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 11px; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; white-space: nowrap; } table.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; } table.data-table tbody tr:hover td { background: var(--muted); } /* ---------- Kanban ---------- */ .kanban-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 1000px) { .kanban-board { grid-template-columns: 1fr; } } .kanban-col { /* La altura real la fija Kanban.fitToScreen() en JS (se ajusta al alto real disponible bajo la barra de filtros, que varía); esto es solo el respaldo antes de que corra ese cálculo. */ /* Mismo patrón que el tablero OR: la columna es el fondo gris y las tarjetas van en blanco encima. */ background: var(--muted); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 8px; transition: background .15s, box-shadow .15s; display: flex; flex-direction: column; min-height: 260px; } /* Zona de soltado igual que en el tablero OR: color de fondo más un borde interior, para que se vea claramente dónde va a caer la tarjeta. */ .kanban-col.drag-over { background: var(--info-bg); box-shadow: inset 0 0 0 2px var(--azul-medium); } /* El color de fondo lo pone kanban.js en línea, según la etapa. */ .kanban-col-header { border-radius: var(--r-md); color: #fff; padding: 9px 11px; margin-bottom: 8px; flex-shrink: 0; } .stage-title { font-size: 13.5px; font-weight: 800; display: flex; justify-content: space-between; gap: 8px; } /* El rango de avance (0%–30%) va junto al título y no en su propia línea: es una aclaración del nombre de la etapa, no un dato aparte. */ .stage-meta { display: flex; gap: 14px; font-size: 10.5px; margin-top: 7px; line-height: 1.3; } .stage-meta b { display: block; font-size: 14px; font-weight: 800; } .stage-range { font-size: 10px; opacity: .8; margin-top: 5px; font-family: var(--font-mono); } .kanban-cards { display: flex; flex-direction: column; gap: 8px; min-height: 40px; flex: 1 1 auto; overflow-y: auto; padding-right: 4px; min-height: 0; } .kanban-cards::-webkit-scrollbar { width: 6px; } .kanban-cards::-webkit-scrollbar-thumb { background: rgba(16,32,80,.2); border-radius: 4px; } .project-card { background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--gray); border-radius: var(--r-lg); padding: 9px 11px; box-shadow: 0 1px 2px rgba(16,32,80,.05); cursor: grab; transition: box-shadow .15s, transform .15s; } .project-card.dragging { opacity: .4; } .project-card:hover { box-shadow: 0 5px 16px rgba(16,32,80,.10); transform: translateY(-1px); } .project-card:active { cursor: grabbing; transform: none; } .project-card.sem-verde { border-left-color: var(--success); } .project-card.sem-azul { border-left-color: var(--energitel-blue); } .project-card.sem-rojo { border-left-color: var(--danger); } .project-card.sem-gris { border-left-color: var(--gray); } .pc-title { font-weight: 700; font-size: 13.5px; color: var(--navy); line-height: 1.3; } .pc-sub { font-size: 10.5px; color: var(--text-3); margin: 2px 0 7px; font-family: var(--font-mono); } .pc-bar-bg { background: var(--muted); border-radius: 999px; height: 6px; overflow: hidden; margin-bottom: 7px; } .pc-bar-fill { background: linear-gradient(90deg, var(--azul-dodger), var(--azul-medium)); height: 100%; border-radius: 999px; transition: width .3s ease; } .pc-avance-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); margin-bottom: 7px; } .pc-avance-input { width: 50px; padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 12px; } .pc-avance-input:focus { outline: 1px solid var(--azul-medium); border-color: var(--azul-medium); } .pc-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-2); margin-bottom: 1px; gap: 8px; line-height: 1.5; } .pc-row .truncate { max-width: 60%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; } .pc-actions { display: flex; gap: 5px; margin-top: 7px; } .pc-actions .btn-mini { padding: 4px 9px; font-size: 11.5px; } /* Las pastillas de la tarjeta, más pequeñas que las de las tablas: aquí hay dos o tres por tarjeta y a tamaño normal dominaban la ficha. */ .pc-badges .badge { font-size: 10.5px; padding: 3px 8px; gap: 5px; } .pc-badges .badge::before { width: 5px; height: 5px; } /* Pills de estado del sistema visual. Se mantienen los nombres de tono que ya usa badge() en utils.js (rojo/azul/verde/gris/naranja) para no tocar el JS: solo cambia su apariencia a la del componente .pill estandarizado. */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .badge.rojo { background: #F6E4E2; color: #C1483C; } .badge.rojo::before { background: #C1483C; } .badge.azul { background: var(--info-bg); color: var(--azul-medium); } .badge.azul::before { background: var(--azul-dodger); } .badge.verde { background: var(--ok-bg); color: var(--ok); } .badge.verde::before { background: var(--verde-ok); } .badge.gris { background: #EDF0F6; color: var(--text-2); } .badge.gris::before { background: var(--text-3); } .badge.naranja { background: var(--warn-bg); color: var(--warn); } .badge.naranja::before { background: var(--naranja); } /* ---------- Side panel (form / detalle) ---------- */ .overlay { position: fixed; inset: 0; background: rgba(16,32,80,.45); display: none; z-index: 100; } .overlay.active { display: block; } .side-panel { position: fixed; top: 0; right: 0; width: min(520px, 100vw); height: 100vh; background: #fff; box-shadow: -8px 0 24px rgba(16,32,80,.2); transform: translateX(100%); transition: transform .2s ease; overflow-y: auto; z-index: 101; } .side-panel.active { transform: translateX(0); } .sp-header { background: var(--energitel-navy); color: #fff; padding: 18px 20px; position: sticky; top: 0; z-index: 2; } .sp-header h3 { margin: 0 0 3px; font-size: 17px; padding-right: 36px; } .sp-subtitle { font-size: 12.5px; color: #A9B6D6; padding-right: 36px; } .sp-close { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-md); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .sp-close:hover { background: rgba(255,255,255,.22); } .sp-body { padding: 16px 20px 20px; } /* * `sticky`, no `fixed`. Con `fixed` la barra se metía en mitad del * formulario al hacer scroll, tapando los campos que quedaran debajo: * .side-panel lleva un transform (la animación de entrada del panel), y un * transform convierte a ese elemento en el marco de referencia de sus hijos * `fixed` — dejan de anclarse a la ventana y pasan a desplazarse con el * contenido, que es justo lo que no se quería. * * `sticky` sí se queda abajo del área visible mientras se hace scroll, y * además ocupa su sitio en el flujo, así que .sp-body ya no necesita los * 90px de relleno inferior que compensaban el solapamiento. */ .sp-footer { position: sticky; bottom: 0; z-index: 2; background: #fff; border-top: 1px solid var(--border); padding: 12px 20px; } /* Separador entre secciones: antes solo las distinguía el título en negrita y el formulario se leía como una lista larga de campos sin agrupar. */ .form-section { margin-bottom: 20px; } .form-section + .form-section { border-top: 1px solid var(--border); padding-top: 18px; } .form-section h4 { margin: 0 0 12px; font-size: 12px; font-weight: 800; color: var(--navy); text-transform: uppercase; letter-spacing: .06em; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* * `min-width: 0` es imprescindible, no cosmético: por defecto un elemento de * grid no se encoge por debajo de su contenido, y un