/* ===================================================== Tema día/noche con variables CSS (a nivel aplicación). Cambiar de tema = setear data-theme="light|dark" en . El "papel tapiz" (escritorio) se mantiene azul; cambian las superficies (ventanas, formularios, grillas, barras). ============================================================ */ /* Densidad y tamaño de fuente de las grillas, configurables por usuario (menú Inicio → Preferencias). El tema Quartz deriva alto de fila y de header de estas dos variables, así que con cambiarlas alcanza. */ .ag-theme-quartz, .ag-theme-quartz-dark { --ag-font-size: var(--ux-grid-font, 14px); --ag-grid-size: var(--ux-grid-size, 8px); } /* Grillas sin registros: no mostrar el cartel "No Rows To Show" (global). */ .ag-overlay-no-rows-wrapper { display: none !important; } /* Fila seleccionada BIEN marcada (pedido de Hugo 2026-09-08): los botones de la barra operan sobre esta fila, así que tiene que verse sin dudas — fondo acento + barra izquierda + negrita, en tema claro y oscuro. */ /* Sin clase de tema como ancestro: las grillas usan la Theming API de AG Grid (los contenedores son .crud-grid pelados), así que el selector va directo. !important: el semáforo de leads pinta el fondo con style inline y sin esto la selección desaparece justo en las filas rojas/ámbar (las más riesgosas para operar la equivocada). El puntito 🔴/🟡 sigue diciendo la urgencia. */ .ag-row-selected { background-color: color-mix(in srgb, var(--accent), transparent 78%) !important; box-shadow: inset 4px 0 0 var(--accent); /* sin negrita: cambiaba el ancho del texto y parecía que las letras se movían */ } :root, [data-theme="light"] { --desk-bg: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); --bar-bg: #2b2b3c; --bar-fg: #eee; --bar-hover: #3d3d52; --bar-muted: #9fb8d8; --surface: #ffffff; /* fondo de ventanas / contenido */ --surface-2: #f7f7fa; /* toolbars, zonas suaves */ --text: #333333; --text-soft: #777777; --border: #e2e2e2; --input-bg: #ffffff; --input-border: #bbbbbb; --panel-bg: #f7f7fa; /* tarjetas / píldoras sobre la superficie (antes no existía: caía a transparente) */ --accent: #4a6cf7; --accent-hover: #3a5ce0; --legend: #4a6cf7; --danger: #c0392b; } [data-theme="dark"] { --desk-bg: linear-gradient(135deg, #0d1b34 0%, #11264a 100%); --bar-bg: #15151f; --bar-fg: #e8e8ee; --bar-hover: #2a2a3a; --bar-muted: #7e8aa0; --surface: #23232e; --surface-2: #2b2b38; --text: #e6e6ee; --text-soft: #9aa0b0; --border: #3a3a48; --input-bg: #2b2b38; --input-border: #4a4a5c; --panel-bg: #2b2b38; color-scheme: dark; /* controles nativos (date, scroll, select) en oscuro */ --accent: #5b7cff; --accent-hover: #6f8cff; --legend: #8aa6ff; --danger: #ff6b5e; } /* ====== Diálogo de Preferencias ====== */ .pref-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 13px; color: var(--text); } .pref-row { display: flex; flex-direction: column; gap: 4px; } .pref-row label { font-size: 13px; display: flex; justify-content: space-between; align-items: baseline; } .pref-row label b { color: var(--accent); font-weight: 600; } .pref-row input[type="range"] { width: 100%; accent-color: var(--accent); } .pref-hint { font-size: 12px; color: var(--text-soft); } .pref-preview { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--surface); } .pref-preview .pp-head, .pref-preview .pp-row { display: grid; grid-template-columns: 64px 1fr 92px; align-items: center; padding: 0 10px; gap: 8px; border-bottom: 1px solid var(--border); white-space: nowrap; } .pref-preview .pp-head { background: var(--surface-2); font-weight: 600; color: var(--text-soft); } .pref-preview .pp-row:last-child { border-bottom: none; } /* ====== Base / escritorio ====== */ * { box-sizing: border-box; } html, body { margin: 0; height: 100%; font-family: "Segoe UI", Tahoma, sans-serif; font-size: 13px; user-select: none; overflow: hidden; } #desktop { position: absolute; top: 34px; left: 0; right: 0; bottom: 34px; background: var(--desk-bg); overflow: hidden; } /* ====== Barra de menú superior ====== */ #topbar { position: absolute; top: 0; left: 0; right: 0; height: 34px; background: var(--bar-bg); color: var(--bar-fg); display: flex; align-items: center; padding: 0 8px; gap: 4px; z-index: 9999; box-shadow: 0 1px 4px rgba(0,0,0,.4); } #topbar .brand { font-weight: 600; margin-right: 12px; color: #6cb2ff; } /* Logo en el menú superior: recoloreado a blanco para contrastar con la barra oscura */ .brand-logo { height: 20px; margin-right: 14px; filter: brightness(0) invert(1); } .menu { position: relative; } .menu-title { padding: 6px 12px; cursor: pointer; border-radius: 4px; display: inline-block; } .menu:hover .menu-title { background: var(--bar-hover); } .menu-dropdown { display: none; position: absolute; top: 100%; left: 0; min-width: 180px; background: var(--bar-bg); border: 1px solid var(--border); border-radius: 0 0 6px 6px; box-shadow: 0 6px 18px rgba(0,0,0,.5); padding: 4px 0; } .menu:hover .menu-dropdown, .menu-dropdown.abierto { display: block; } .menu-dropdown.menu-flotante { display: block; position: fixed; top: auto; left: auto; border-radius: 6px; z-index: 1200; } .menu-dropdown a { display: block; padding: 8px 16px; color: var(--bar-fg); cursor: pointer; text-decoration: none; } .menu-dropdown a:hover { background: var(--accent); color: #fff; } .menu-dropdown hr { border: none; border-top: 1px solid var(--bar-hover); margin: 4px 0; } #topbar .clock { margin-left: auto; color: var(--bar-muted); font-variant-numeric: tabular-nums; } #topbar .theme-toggle { cursor: pointer; padding: 4px 8px; border-radius: 4px; font-size: 15px; } #topbar .theme-toggle:hover { background: var(--bar-hover); } /* ====== Iconos de escritorio ====== */ .desk-icon { position: absolute; width: 84px; text-align: center; color: #fff; cursor: grab; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 6px; text-shadow: 0 1px 2px rgba(0,0,0,.6); font-size: 12px; user-select: none; touch-action: none; } .desk-icon span { font-size: 34px; } .desk-icon:hover { background: rgba(255,255,255,.15); } .desk-icon.dragging { opacity: .75; cursor: grabbing; z-index: 5; } /* ====== Barra de tareas ====== */ #taskbar { position: absolute; bottom: 0; left: 0; right: 0; height: 34px; background: var(--bar-bg); display: flex; align-items: center; gap: 6px; padding: 0 6px; z-index: 9999; box-shadow: 0 -1px 4px rgba(0,0,0,.4); } .task-start { background: var(--accent); color: #fff; padding: 5px 14px; border-radius: 4px; font-weight: 600; cursor: pointer; user-select: none; } /* Menú de inicio (se despliega hacia arriba desde la barra de tareas) */ .start-menu { display: none; position: absolute; bottom: 36px; left: 6px; min-width: 210px; background: var(--bar-bg); border: 1px solid var(--border); border-radius: 6px 6px 0 0; box-shadow: 0 -6px 18px rgba(0,0,0,.5); padding: 4px 0; z-index: 10000; } .start-menu.open { display: block; } .start-menu a { display: block; padding: 9px 16px; color: var(--bar-fg); cursor: pointer; text-decoration: none; } .start-menu a:hover { background: var(--accent); color: #fff; } .start-menu hr { border: none; border-top: 1px solid var(--bar-hover); margin: 4px 0; } #taskbar-items { display: flex; gap: 6px; overflow-x: auto; } .task-item { background: var(--bar-hover); color: var(--bar-fg); padding: 5px 12px; border-radius: 4px; cursor: pointer; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; border-bottom: 2px solid transparent; } .task-item:hover { filter: brightness(1.2); } .task-item.active { border-bottom-color: #6cb2ff; color: #fff; } /* ====== Pantalla de Login ====== */ #login-overlay { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; background: var(--desk-bg); } .login-box { background: var(--surface); color: var(--text); padding: 28px 26px; border-radius: 10px; width: 300px; box-shadow: 0 14px 44px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 12px; } .login-logo { display: block; margin: 0 auto 10px; height: 40px; } [data-theme="dark"] .login-logo { filter: brightness(0) invert(1); } /* blanco en modo oscuro */ .login-box form { display: flex; flex-direction: column; gap: 12px; } .login-box input { padding: 9px 10px; border: 1px solid var(--input-border); border-radius: 5px; background: var(--input-bg); color: var(--text); font-size: 14px; } .lg-sub { font-weight: 600; color: var(--text); text-align: center; } .lg-error { color: var(--danger); font-size: 12px; min-height: 14px; text-align: center; } .lg-msg { color: var(--text-soft); font-size: 12px; min-height: 14px; text-align: center; word-break: break-all; } .lg-msg a { color: var(--accent); } .lg-link { color: var(--accent); font-size: 12px; text-align: center; cursor: pointer; } .lg-link:hover { text-decoration: underline; } /* Watermark del logo, centrado y tenue, detrás de las ventanas */ #desk-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42%; max-width: 480px; opacity: .10; z-index: 0; filter: brightness(0) invert(1); pointer-events: none; } /* ====== Lista flotante de autocompletar (lookup) ====== */ .lookup-list { position: fixed; z-index: 100000; background: var(--surface); color: var(--text); border: 1px solid var(--input-border); border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.35); max-height: 220px; overflow-y: auto; } .lookup-item { padding: 6px 10px; cursor: pointer; white-space: nowrap; } .lookup-item b { color: var(--legend); } .lookup-item.hi, .lookup-item:hover { background: var(--accent); color: #fff; } .lookup-item.hi b, .lookup-item:hover b { color: #fff; } /* ====== Overlay para ventanas modales ====== */ .modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.28); } /* ====== Superficie de las ventanas (jsPanel) ====== */ .jsPanel-content { background: var(--surface) !important; color: var(--text); } /* Separar visualmente las ventanas: borde fino + esquinas superiores redondeadas. */ .jsPanel { border: 1px solid var(--border); border-radius: 8px; } .jsPanel .jsPanel-hdr { border-top-left-radius: 7px; border-top-right-radius: 7px; } .jsPanel-content { border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; } .jsPanel.jsPanel-maximized { border-radius: 0; border: none; } /* Distinguir la ventana con foco: la barra (.jsPanel-hdr lleva el color del theme) de las ventanas inactivas se atenúa; la activa queda a color pleno, borde de acento y más sombra. */ .jsPanel:not(.panel-activo) .jsPanel-hdr { filter: grayscale(.6) brightness(.72); } .jsPanel.panel-activo { border-color: var(--accent); box-shadow: 0 12px 38px rgba(0,0,0,.5); } /* ====== Formularios dentro de las ventanas ====== */ .form-body { padding: 14px; color: var(--text); } .form-row { display: flex; align-items: center; margin-bottom: 10px; gap: 8px; } .form-row label { width: 110px; text-align: right; color: var(--text-soft); } /* El textarea entra en la misma regla que el resto de los campos: sin esto usaba su ancho intrínseco (~20 caracteres) y quedaba como un cuadradito en medio de una fila vacía, aunque estuviera en una fila de ancho completo. El alto sí queda a mano del usuario (resize vertical); el horizontal se deja fuera porque con flex:1 el navegador lo ignora. */ .form-row input, .form-row select, .form-row textarea, .form-row .ts-wrapper { flex: 1; padding: 6px 8px; border: 1px solid var(--input-border); border-radius: 4px; font-size: 13px; background: var(--input-bg); color: var(--text); } .form-row textarea { resize: vertical; min-height: 34px; font-family: inherit; line-height: 1.35; } /* Con un textarea de varias líneas, el label centrado queda flotando a media altura: se alinea con la primera línea, que es donde el ojo lo busca. */ .form-row:has(textarea) { align-items: flex-start; } .form-row:has(textarea) > label { padding-top: 7px; } .form-row .with-btn { display: flex; flex: 1; gap: 4px; } .form-row .with-btn input { flex: 1; } .btn { background: var(--accent); color: #fff; border: none; padding: 7px 14px; border-radius: 4px; cursor: pointer; font-size: 13px; } .btn:hover { background: var(--accent-hover); } .btn.sec { background: #777; } .btn.sec:hover { background: #666; } [data-theme="dark"] .btn.sec { background: #4a4a5e; } [data-theme="dark"] .btn.sec:hover { background: #5a5a72; } [data-theme="dark"] .btn.sec:disabled:hover { background: #4a4a5e; } /* Deshabilitado (p.ej. acción sin fila seleccionada): apagado y sin click */ .btn:disabled { opacity: .4; cursor: not-allowed; } .btn:disabled:hover { background: var(--accent); } .btn.sec:disabled:hover { background: #777; } .btn-sm { padding: 6px 10px; } .form-toolbar { padding: 8px 14px; border-top: 1px solid var(--border); background: var(--surface-2); display: flex; gap: 8px; justify-content: flex-end; } .form-toolbar.left { justify-content: flex-start; } .crud-buscar { background: var(--input-bg); color: var(--text); } /* Árbol de permisos (Roles) */ .roltree { font-size: 13px; } .roltree-toolbar { display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px; flex-wrap: wrap; } .roltree-toolbar .rt-busca { flex: 1 1 140px; min-width: 120px; } .rt-node { border-left: 2px solid transparent; } .rt-row { display: flex; align-items: center; gap: 6px; padding: 4px 4px; border-bottom: 1px solid var(--border); } .rt-hub > .rt-row { background: var(--input-bg); font-weight: 600; color: var(--text); } .rt-seccion > .rt-row { font-weight: 500; color: var(--text); } .rt-item > .rt-row { color: var(--text-soft); } .rt-caret { width: 16px; flex: 0 0 16px; text-align: center; cursor: pointer; user-select: none; color: var(--text-soft); } .rt-caret.is-leaf { visibility: hidden; } .rt-label { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .rt-label .rt-icon { flex: 0 0 auto; } .rt-acc { display: grid; gap: 8px; align-items: center; justify-content: end; flex: 0 0 auto; } .rt-acc label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-soft); cursor: pointer; white-space: nowrap; overflow: hidden; } .rt-acc label.is-disabled { opacity: .35; cursor: default; } .rt-acc .rt-acc-empty { display: block; } .rt-children { margin-left: 16px; } .rt-children.collapsed { display: none; } .rt-node.rt-hidden { display: none; } /* Formulario en 2 columnas + secciones (para forms grandes) */ /* align-content: start — sin esto, un grid más alto que su contenido reparte el sobrante ENTRE las filas: al agrandar la ventana los campos se despegaban unos de otros. Ahora conservan su alto natural y el sobrante queda para el bloque de adjuntos (.form-adjuntos), que es lo único que mejora con más lugar. */ .form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-content: start; grid-auto-rows: min-content; } .form-grid2 .form-row label { width: 120px; } /* permitir que inputs/selects/lookup se encojan dentro de la celda (evita scroll horizontal) */ .form-grid2 .form-row, .form-grid2 .with-btn { min-width: 0; } .form-grid2 .form-row input, .form-grid2 .form-row select, .form-grid2 .form-row textarea { min-width: 0; } .col-full { grid-column: 1 / -1; } .form-section { grid-column: 1 / -1; font-weight: 600; color: var(--legend); border-bottom: 1px solid var(--border); margin: 8px 0 8px; padding-bottom: 3px; } .grid-wrap { width: 100%; height: 100%; } fieldset { border: 1px solid var(--border); border-radius: 6px; margin: 0 0 12px; padding: 10px 14px; } legend { color: var(--legend); font-weight: 600; padding: 0 6px; } .hint { color: var(--text-soft); font-size: 12px; padding: 0 14px 10px; } /* Selector de días (contratos): grilla responsive de checkboxes. auto-fill reflowa según el ancho disponible (sin scroll horizontal); se resetea el width/text-align que .form-row label impone por defecto. */ .dias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px 10px; width: 100%; } .dias-grid label.dia-chk { width: auto; min-width: 0; text-align: left; margin: 0; display: flex; align-items: center; gap: 4px; font-weight: 400; font-size: 12px; color: var(--text); cursor: pointer; } .dias-grid label.dia-chk input { flex: 0 0 auto; margin: 0; } /* Diagrama de flujo de "Operatoria diaria" (hub Mesa de Entrada). Las cajas son las tarjetas normales (.mod-card) posicionadas en un lienzo de tamaño fijo, con las flechas SVG por debajo. */ /* Solo scroll horizontal (ventana angosta): el vertical lo maneja la ventana del hub — sin esto aparecía una segunda barra interior. */ .mod-flujo-sec { overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; } .flujo-op { position: relative; width: 920px; height: 410px; margin: 8px auto 4px; } .flujo-op.flujo-3filas { height: 590px; } /* diagramas con tercera fila (RRHH) */ .flujo-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } /* Selector anidado (.flujo-op .flujo-card) para ganarle en especificidad a .mod-card { width:100%; position:relative } que viene después en el archivo. */ .flujo-op .flujo-card { position: absolute; z-index: 2; width: 190px; min-height: 108px; } .flujo-op.flujo-5col { height: 470px; } .flujo-op.flujo-5col .flujo-card { width: 165px; } /* Cinco columnas dejan poco ancho: la descripción se corta a 5 líneas para que la segunda fila no se salga del diagrama (pasó con Torre Control). */ .flujo-op.flujo-5col .mod-card-desc { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .mod-flujo-extra { margin-top: 6px; } .flujo-op .flujo-card.destacada { border: 2px solid var(--accent); box-shadow: 0 8px 22px rgba(74,108,247,.40); } .flujo-op .flujo-card.destacada .mod-card-icon { background: var(--accent); color: #fff; } .flujo-op .flujo-card.is-off { opacity: .45; cursor: default; pointer-events: none; } /* En el diagrama, el tag "Pronto" va abajo a la derecha para no tapar el título. */ .flujo-op .mod-card-tag { top: auto; bottom: 8px; right: 8px; } /* Circuito lineal movido abajo como recordatorio: atenuado y con nota. */ .mod-flow-recordatorio { opacity: .65; margin-top: 18px; } .mod-flow-nota { display: block; width: 100%; font-size: 11px; color: var(--text-soft); margin-bottom: 6px; } /* MsgBox (diálogo modal estilo .NET) */ .msgbox { flex: 1 1 auto; display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px 6px; } .msgbox-ico { font-size: 34px; line-height: 1; flex: 0 0 auto; } .msgbox-text { line-height: 1.5; color: var(--text); padding-top: 3px; } .btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn.danger:hover { filter: brightness(1.08); } /* ====== Dashboard Ejecutivo (neón, fondo oscuro propio) ====== */ .dash { display: flex; flex-direction: column; height: 100%; background: radial-gradient(1200px 600px at 20% -10%, #16183a 0%, #0a0a16 55%, #06060e 100%); color: #e8ecff; } .dash-top { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 14px; border-bottom: 1px solid #ffffff1a; background: #0c0c1aee; } .dash-top .dash-title { font-weight: 700; letter-spacing: .4px; background: linear-gradient(90deg, #00eaff, #9b5cff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 18px #00eaff44; } .dash-top label { font-size: 12px; color: #8ea0c8; } .dash-top input[type="date"] { padding: 4px 7px; border: 1px solid #2a2f55; border-radius: 5px; background: #11132a; color: #e8ecff; } .dash-top .dash-now { margin-left: auto; color: #6f7aa0; font-size: 12px; } .dash-body { flex: 1 1 auto; overflow: auto; padding: 14px; } .dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; } .dash-kpi { border-radius: 14px; padding: 14px 16px; background: #11132aaa; border: 1px solid #ffffff1f; box-shadow: 0 0 22px #00000066; position: relative; overflow: hidden; } .dash-kpi .v { font-size: 30px; font-weight: 800; line-height: 1.1; } .dash-kpi .l { color: #8ea0c8; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; } .dash-kpi.c1 { border-color: #00eaff66; box-shadow: 0 0 26px #00eaff22, inset 0 0 18px #00eaff14; } .dash-kpi.c1 .v { color: #00eaff; text-shadow: 0 0 16px #00eaff88; } .dash-kpi.c2 { border-color: #ff2bd666; box-shadow: 0 0 26px #ff2bd622, inset 0 0 18px #ff2bd614; } .dash-kpi.c2 .v { color: #ff5cdf; text-shadow: 0 0 16px #ff2bd688; } .dash-kpi.c3 { border-color: #b6ff0066; box-shadow: 0 0 26px #b6ff0022, inset 0 0 18px #b6ff0014; } .dash-kpi.c3 .v { color: #c6ff3a; text-shadow: 0 0 16px #b6ff0088; } .dash-kpi.c4 { border-color: #ff8a0066; box-shadow: 0 0 26px #ff8a0022, inset 0 0 18px #ff8a0014; } .dash-kpi.c4 .v { color: #ffa235; text-shadow: 0 0 16px #ff8a0088; } /* Variación vs. período anterior y sublíneas de los tiles de tesorería. */ .dash-kpi .d { font-size: 11px; margin-top: 3px; color: #8ea0c8; } .dash-kpi .d.up { color: #b6ff00; } .dash-kpi .d.down { color: #ff5470; } .dash-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .dash-card { background: #0d0f22aa; border: 1px solid #ffffff14; border-radius: 14px; padding: 10px 12px 4px; box-shadow: 0 0 24px #00000055; } .dash-card.big { grid-column: 1 / -1; } .dash-card h4 { margin: 0 0 6px; font-size: 13px; color: #9fb4ff; font-weight: 600; letter-spacing: .4px; } /* ====== Torre de Control — tableros ====== */ .tc-wrap { display: flex; flex-direction: column; height: 100%; background: var(--surface); color: var(--text); } .tc-top { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .tc-top input[type="date"] { padding: 5px 7px; border: 1px solid var(--input-border); border-radius: 4px; background: var(--input-bg); color: var(--text); } .tc-top .tc-now { margin-left: auto; color: var(--text-soft); font-size: 12px; } .tc-chips { display: flex; gap: 6px; flex-wrap: wrap; } .tc-chip { font-size: 12px; padding: 3px 9px; border-radius: 12px; font-weight: 600; border: 1px solid var(--border); color: #fff; } .tc-chip.rojo { background: #c0392b; } .tc-chip.amarillo { background: #d49a00; } .tc-chip.verde { background: #2a8a4a; } .tc-chip.gris { background: #7a7a8a; } .tc-board { flex: 1 1 auto; overflow: auto; padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-content: start; } .tc-card { border: 1px solid var(--border); border-left: 6px solid var(--text-soft); border-radius: 8px; background: var(--surface); padding: 10px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); } .tc-card.rojo { border-left-color: #c0392b; } .tc-card.amarillo { border-left-color: #d49a00; } .tc-card.verde { border-left-color: #2a8a4a; } .tc-card.gris { border-left-color: #7a7a8a; } .tc-card h3 { margin: 0 0 2px; font-size: 15px; display: flex; align-items: center; gap: 7px; } .tc-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--text-soft); flex: 0 0 auto; } .tc-card.rojo .tc-dot { background: #c0392b; } .tc-card.amarillo .tc-dot { background: #d49a00; } .tc-card.verde .tc-dot { background: #2a8a4a; } .tc-card.gris .tc-dot { background: #7a7a8a; } .tc-sub { color: var(--text-soft); font-size: 12px; margin-bottom: 6px; } .tc-motivo { font-size: 13px; margin: 6px 0; } .tc-accion { font-size: 12px; color: var(--text-soft); font-style: italic; margin-bottom: 8px; } .tc-row { display: flex; justify-content: space-between; font-size: 12px; margin: 2px 0; } .tc-row b { font-weight: 600; } .tc-bar { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin: 4px 0 2px; } .tc-bar > span { display: block; height: 100%; background: var(--accent); } .tc-badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px; background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border); } .tc-empty { padding: 30px; text-align: center; color: var(--text-soft); } /* Badge de frescura GPS (Torre Central) */ .tc-gps { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; } .tc-gps.verde { color: #0f7a35; border-color: #16a34a55; background: #16a34a18; } .tc-gps.amarillo { color: #8a6300; border-color: #d9a30055; background: #d9a30018; } .tc-gps.rojo { color: #b91c1c; border-color: #dc262655; background: #dc262618; } .tc-gps.gris { color: var(--text-soft); } /* Mapa en vivo (Leaflet) */ .tc-mapa { flex: 1 1 auto; min-height: 300px; } .tc-mapa .leaflet-container { height: 100%; width: 100%; background: var(--surface-2); } .tc-mapa-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-soft); } .tc-mapa-chk input { margin: 0; } /* Picker de ubicación (elegirEnMapa) */ .geo-pick { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .geo-pin { background: transparent; border: 0; font-size: 24px; line-height: 24px; text-align: center; cursor: grab; } .geo-search { flex: 0 0 auto; display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--border); } .geo-search input { flex: 1; padding: 6px 8px; border: 1px solid var(--input-border); border-radius: 4px; background: var(--input-bg); color: var(--text); font-size: 13px; } .geo-results { flex: 0 0 auto; max-height: 132px; overflow: auto; background: var(--surface); } .geo-results:empty { display: none; } .geo-item { padding: 6px 10px; font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--border); } .geo-item:hover { background: var(--surface-2); } .geo-hint { padding: 8px 10px; font-size: 12px; color: var(--text-soft); } .geo-map { flex: 1 1 auto; min-height: 200px; } .geo-map .leaflet-container { height: 100%; width: 100%; background: var(--surface-2); } .geo-coords { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; color: var(--text-soft); border-top: 1px solid var(--border); background: var(--surface-2); } /* Libro diario */ .tc-libro-body { flex: 1 1 auto; display: flex; min-height: 0; } .tc-libro-main { flex: 1 1 auto; overflow: auto; padding: 12px; } .tc-libro-aside { flex: 0 0 230px; border-left: 1px solid var(--border); overflow: auto; padding: 12px; background: var(--surface-2); } .tc-libro-aside h3 { margin: 0 0 8px; font-size: 13px; color: var(--text); } .tc-jor { border: 1px solid var(--border); border-left: 6px solid var(--text-soft); border-radius: 8px; margin-bottom: 12px; background: var(--surface); } .tc-jor.rojo { border-left-color: #c0392b; } .tc-jor.amarillo { border-left-color: #d49a00; } .tc-jor.verde { border-left-color: #2a8a4a; } .tc-jor.gris { border-left-color: #7a7a8a; } .tc-jor-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border); } .tc-jor-title { font-weight: 600; } .tc-jor-motivo { font-size: 12px; color: var(--text-soft); } .tc-jor-accion { margin-left: auto; font-size: 12px; font-style: italic; color: var(--text-soft); } .tc-srv { width: 100%; border-collapse: collapse; font-size: 12.5px; } .tc-srv th, .tc-srv td { text-align: left; padding: 5px 9px; border-top: 1px solid var(--border); vertical-align: middle; } .tc-srv th { color: var(--text-soft); font-weight: 600; } .tc-postas { display: flex; gap: 5px; } .tc-pdot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--input-border); background: var(--surface-2); font-size: 9px; line-height: 12px; text-align: center; color: #fff; cursor: default; } .tc-pdot.ok { background: #2a8a4a; border-color: #2a8a4a; } .tc-pdot.vencida { background: #c0392b; border-color: #c0392b; } .tc-pdot.pronta { background: #d49a00; border-color: #d49a00; } .tc-pdot.next { box-shadow: 0 0 0 2px var(--accent); } .tc-pdot[role="button"] { cursor: pointer; } .tc-pdot[role="button"]:hover { filter: brightness(1.15); transform: scale(1.12); } .tc-alerta { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; margin-bottom: 8px; font-size: 12px; background: var(--surface); } .tc-alerta b { display: block; } /* Calendario */ .tc-cal-title { font-weight: 600; margin-left: 4px; } /* Bandeja de pedidos habilitados sin jornada (cronograma) */ .tc-pendientes { flex: 0 0 auto; border-bottom: 1px solid var(--border); background: var(--surface-2, var(--surface)); padding: 8px 12px; max-height: 132px; overflow: auto; } .tc-pend-hd { font-size: 11.5px; font-weight: 600; color: var(--text-soft); margin-bottom: 6px; } .tc-pend-list { display: flex; flex-wrap: wrap; gap: 8px; } .tc-pend-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 170px; max-width: 240px; text-align: left; cursor: pointer; border: 1px solid var(--border); border-left: 5px solid #4a6cf7; border-radius: 6px; padding: 6px 9px; background: var(--surface); color: var(--text); font: inherit; } .tc-pend-card:hover { border-color: #4a6cf7; box-shadow: 0 1px 6px rgba(74,108,247,.25); } .tc-pend-cod { font-weight: 600; font-size: 12px; } .tc-pend-cli { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .tc-pend-meta { color: var(--text-soft); font-size: 10.5px; } .tc-aviso-badge { display: inline-block; font-size: 10px; font-weight: 600; color: #fff; background: #d49a00; border-radius: 4px; padding: 1px 5px; margin-left: 4px; white-space: nowrap; } .tc-cal-body { flex: 1 1 auto; overflow: auto; padding: 12px; } .tc-cal-day { display: flex; flex-direction: column; gap: 6px; } .tc-evt { border: 1px solid var(--border); border-left: 5px solid var(--text-soft); border-radius: 6px; padding: 6px 10px; background: var(--surface); font-size: 12.5px; } .tc-evt.rojo { border-left-color: #c0392b; } .tc-evt.amarillo { border-left-color: #d49a00; } .tc-evt.verde { border-left-color: #2a8a4a; } .tc-evt.gris { border-left-color: #7a7a8a; } .tc-evt .h { font-weight: 600; } .tc-evt .m { color: var(--text-soft); font-size: 11px; } .tc-mini { margin: 3px 4px; padding: 3px 6px; border-radius: 4px; font-size: 11px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; } .tc-mini.rojo { background: #c0392b; } .tc-mini.amarillo { background: #d49a00; } .tc-mini.verde { background: #2a8a4a; } .tc-mini.gris { background: #7a7a8a; } .tc-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .tc-cal-week .col { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); min-height: 130px; display: flex; flex-direction: column; } .tc-cal-week .col > .hd { padding: 5px 7px; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--text-soft); text-align: center; } .tc-cal-week .col.hoy > .hd { color: var(--accent); font-weight: 700; } .tc-cal-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .tc-cal-month .dow { text-align: center; font-size: 11px; color: var(--text-soft); font-weight: 600; padding: 2px; } .tc-cal-month .cell { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); min-height: 88px; padding: 3px; overflow: hidden; } .tc-cal-month .cell.off { background: var(--surface-2); opacity: .5; } .tc-cal-month .cell.hoy { outline: 2px solid var(--accent); } .tc-cal-month .cell .dnum { font-size: 11px; color: var(--text-soft); text-align: right; } .tc-cal-month .cell.hoy .dnum { color: var(--accent); font-weight: 700; } .tc-cal-more { font-size: 10px; color: var(--text-soft); margin: 2px 4px; } .tc-edit { border: none; cursor: pointer; border-radius: 3px; font-size: 11px; line-height: 1; padding: 2px 5px; } .tc-mini { display: flex; align-items: center; gap: 4px; } .tc-mini .tc-mini-txt { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tc-mini .tc-edit { flex: 0 0 auto; background: rgba(255, 255, 255, .25); color: #fff; } .tc-mini .tc-edit:hover { background: rgba(255, 255, 255, .5); } .tc-evt { position: relative; padding-right: 34px; } .tc-evt .tc-edit { position: absolute; top: 7px; right: 8px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } .tc-evt .tc-edit:hover { border-color: var(--accent); color: var(--accent); } .tc-mini[draggable="true"] { cursor: grab; } .tc-mini[draggable="true"]:active { cursor: grabbing; } .tc-cal-week .col.drag-over, .tc-cal-month .cell.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; background: rgba(74, 108, 247, .10); } /* ====== UX modular: hubs funcionales ====== */ .mod-hub { min-height: 100%; padding: 16px; color: var(--text); background: linear-gradient(180deg, var(--surface), var(--surface-2)); } .mod-hero { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 8px 20px rgba(0,0,0,.08); } .mod-hero-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: var(--accent); color: #fff; font-size: 30px; } .mod-hero h2 { margin: 0 0 4px; font-size: 22px; } .mod-hero p { margin: 0; color: var(--text-soft); } .mod-objective { margin-top: 9px; padding: 8px 10px; border-left: 4px solid var(--accent); background: var(--surface-2); border-radius: 7px; color: var(--text); } .mod-flow, .mod-guidance { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .mod-flow-step, .mod-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-weight: 600; } .mod-flow-arrow { color: var(--text-soft); font-weight: 700; } .mod-section { margin-top: 16px; } .mod-section h3 { margin: 0 0 4px; font-size: 17px; } .mod-section p { margin: 0 0 10px; color: var(--text-soft); } .mod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; } .mod-card { position: relative; min-height: 108px; text-align: left; cursor: pointer; display: grid; grid-template-columns: 42px 1fr; gap: 2px 10px; align-content: start; width: 100%; padding: 12px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: 0 4px 14px rgba(0,0,0,.06); } .mod-card:hover { border-color: var(--accent); box-shadow: 0 8px 20px rgba(0,0,0,.12); transform: translateY(-1px); } .mod-card-icon { grid-row: 1 / span 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); font-size: 23px; } .mod-card-title { font-weight: 700; font-size: 14px; } .mod-card-desc { color: var(--text-soft); font-size: 12px; line-height: 1.35; } .mod-card.is-future { cursor: help; border-style: dashed; opacity: .82; } /* En construcción: se ve el circuito completo, pero la tarjeta no invita a entrar. */ .mod-card.is-obra { opacity: .5; filter: grayscale(.8); cursor: not-allowed; } .mod-card.is-obra:hover { transform: none; box-shadow: none; border-color: var(--border); } .mod-card.is-obra .mod-card-tag { background: #b7791f; color: #fff; } .menu-dropdown a.is-obra { opacity: .5; } /* Tarjetas que abren un HUB / menú (no un módulo): se distinguen del resto. Borde DOBLE (no sólido) + tinte de acento fuerte + ícono relleno + chevron ">". El borde doble lo separa de las normales (sólido), de las Futuro (punteado) y de la destacada (glow). */ .mod-card.is-hub { background: linear-gradient(180deg, color-mix(in srgb, var(--surface), var(--accent) 30%), color-mix(in srgb, var(--surface), var(--accent) 13%)); border: 3px double var(--accent); padding-right: 28px; /* espacio para el chevron */ } .mod-card.is-hub .mod-card-icon { background: var(--accent); color: #fff; } .mod-card.is-hub .mod-card-desc { color: color-mix(in srgb, var(--text-soft), var(--accent) 22%); } .mod-card.is-hub::after { content: '›'; position: absolute; top: 50%; right: 13px; transform: translateY(-50%); font-size: 27px; font-weight: 700; line-height: 1; color: var(--accent); opacity: .85; transition: opacity .12s, right .12s; } .mod-card.is-hub:hover::after { opacity: 1; right: 10px; } .mod-card.is-hub:hover { border-color: var(--accent); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent), transparent 55%); transform: translateY(-1px); } /* En el diagrama de flujo el chevron va arriba (las cajas son más bajas) */ .flujo-op .flujo-card.is-hub::after { top: 9px; right: 9px; transform: none; } .mod-card-tag { position: absolute; top: 8px; right: 8px; border-radius: 999px; padding: 2px 7px; background: #d49a00; color: #fff; font-size: 10px; font-weight: 700; } @media (max-width: 900px) { .mod-hero { grid-template-columns: 1fr; } .mod-grid { grid-template-columns: 1fr; } } /* ===================================================== Mensajería interna (js/mensajeria.js) ============================================================ */ /* Botón del topbar con el contador de no leídos */ #topbar .msg-boton { position: relative; cursor: pointer; padding: 4px 8px; border-radius: 4px; font-size: 15px; } #topbar .msg-boton:hover { background: var(--bar-hover); } /* Drop global de "Procesar un archivo" (js/automatizacion.js): aviso mientras se arrastra un archivo sobre la pantalla. pointer-events:none para que las zonas propias (adjuntos, asistente) sigan recibiendo el drop cuando corresponde. */ .aut-drop-global { position: fixed; inset: 0; z-index: 99990; pointer-events: none; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 12%, transparent); outline: 3px dashed var(--accent); outline-offset: -10px; } .aut-drop-global > div { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 10px; background: var(--surface); color: var(--text); font-size: 16px; font-weight: 600; box-shadow: 0 8px 30px rgba(0,0,0,.25); } .aut-drop-global > div > span { font-size: 26px; } #topbar .msg-badge { position: absolute; top: -1px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } /* Ventana: carpetas | lista | lectura */ .msg-wrap { display: grid; grid-template-columns: 168px 300px 1fr; height: 100%; background: var(--surface); } .msg-carpetas { display: flex; flex-direction: column; gap: 1px; padding: 8px 6px; border-right: 1px solid var(--border); overflow: auto; } .msg-carpetas a { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 5px; cursor: pointer; color: var(--text); font-size: 13px; } .msg-carpetas a:hover { background: color-mix(in srgb, var(--accent), transparent 88%); } .msg-carpetas a.sel { background: color-mix(in srgb, var(--accent), transparent 80%); font-weight: 600; } .msg-carpetas-pie { margin-top: auto; padding-top: 10px; } .msg-carpetas-pie .btn { width: 100%; } .msg-lista-col { display: flex; flex-direction: column; border-right: 1px solid var(--border); min-width: 0; } .msg-buscar { margin: 8px; padding: 6px 9px; border: 1px solid var(--input-border); border-radius: 4px; background: var(--input-bg); color: var(--text); font-size: 12px; } .msg-lista { flex: 1 1 auto; overflow: auto; } .msg-item { padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; } .msg-item:hover { background: color-mix(in srgb, var(--accent), transparent 92%); } .msg-item.sel { background: color-mix(in srgb, var(--accent), transparent 84%); } .msg-item.no-leido .msg-de, .msg-item.no-leido .msg-item-l2 { font-weight: 700; } .msg-item.no-leido { border-left: 3px solid var(--accent); padding-left: 7px; } .msg-item-l1 { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text); } .msg-item-l2 { font-size: 13px; margin-top: 2px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-item-l3 { font-size: 11px; color: var(--text-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-fecha { color: var(--text-soft); font-size: 11px; white-space: nowrap; } .msg-de { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-prio { display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; } .msg-lectura { display: flex; flex-direction: column; overflow: auto; min-width: 0; } .msg-cab { padding: 12px 14px 8px; border-bottom: 1px solid var(--border); } .msg-cab-asunto { font-size: 15px; font-weight: 600; color: var(--text); } .msg-cab-meta { margin-top: 5px; font-size: 12px; color: var(--text-soft); line-height: 1.5; } .msg-cuerpo { padding: 14px; flex: 1 1 auto; font-size: 13px; line-height: 1.6; color: var(--text); white-space: normal; word-break: break-word; } .msg-acciones { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--border); } .msg-vacio { padding: 24px; color: var(--text-soft); font-size: 13px; text-align: center; } @media (max-width: 860px) { .msg-wrap { grid-template-columns: 130px 1fr; } .msg-lectura { grid-column: 1 / -1; border-top: 1px solid var(--border); } } /* Tokens del mensaje: @menciones y #referencias (fase 2) */ .msg-ref { color: var(--accent); cursor: pointer; text-decoration: none; border-bottom: 1px dashed color-mix(in srgb, var(--accent), transparent 50%); } .msg-ref:hover { text-decoration: none; border-bottom-style: solid; } .msg-mencion { background: color-mix(in srgb, var(--accent), transparent 85%); color: var(--accent); border-radius: 3px; padding: 0 3px; font-weight: 600; } /* La mención propia se resalta: es lo que hace que el usuario la encuentre */ .msg-mencion.yo { background: var(--accent); color: #fff; } .msg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .msg-ref.chip { border: 1px solid color-mix(in srgb, var(--accent), transparent 60%); border-radius: 999px; padding: 2px 9px; font-size: 11px; background: var(--surface); } /* Popup de autocompletado del editor (reusa el look de .lookup-list) */ .msg-autoc { max-height: 232px; } /* ===================================================== Tom Select con los colores del sistema. El CSS de vendor/ trae fondo blanco y textos oscuros fijos: en tema noche el campo quedaba blanco y lo que se tipeaba, casi invisible. Se ata todo a las variables del tema, así sirve en claro y en oscuro y para cualquier combo del sistema, no sólo el de mensajería. ============================================================ */ .ts-wrapper .ts-control { background: var(--input-bg); border-color: var(--input-border); color: var(--text); } /* El input que se tipea hereda el color del navegador si no se fuerza: era el bug */ .ts-wrapper .ts-control > input, .ts-wrapper .ts-control > input::placeholder { color: var(--text); } .ts-wrapper .ts-control > input::placeholder { color: var(--text-soft); opacity: 1; } .ts-wrapper.focus .ts-control { border-color: var(--accent); } .ts-wrapper.disabled .ts-control { background: var(--surface-2, var(--surface)); opacity: .7; } .ts-dropdown { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); } .ts-dropdown .option { color: var(--text); } .ts-dropdown .active { background: color-mix(in srgb, var(--accent), transparent 80%); color: var(--text); } .ts-dropdown .optgroup-header { background: var(--surface); color: var(--text-soft); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; } .ts-dropdown .no-results { color: var(--text-soft); } /* Ítems ya elegidos (modo múltiple) */ .ts-wrapper.multi .ts-control > div { background: color-mix(in srgb, var(--accent), transparent 82%); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent), transparent 60%); } .ts-wrapper.multi .ts-control > div.active { background: var(--accent); color: #fff; border-color: var(--accent); } .ts-wrapper.plugin-remove_button .item .remove { border-left-color: color-mix(in srgb, var(--accent), transparent 60%); } .ts-wrapper.plugin-remove_button .item .remove:hover { background: color-mix(in srgb, var(--danger), transparent 70%); } /* Hilos de conversación y acuse de recibo (fase 3) */ .msg-hilo { flex: 1 1 auto; overflow: auto; } .msg-post { padding: 10px 14px; border-bottom: 1px solid var(--border); } /* El mensaje que se abrió desde la lista se distingue del resto del hilo */ .msg-post.principal { background: color-mix(in srgb, var(--accent), transparent 94%); border-left: 3px solid var(--accent); padding-left: 11px; } .msg-post .msg-cuerpo { padding: 6px 0 0; } .msg-post-cab { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } /* "De:" / "Para:" — el rótulo apagado, el nombre destacado. Sin el rótulo, el nombre del remitente se leía como un título suelto y no se entendía qué era. */ .msg-rot { color: var(--text-soft); font-size: 11px; } .msg-post-meta { font-size: 11px; color: var(--text-soft); margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .msg-acuse-tag { border: 1px solid var(--legend); color: var(--legend); border-radius: 999px; padding: 0 7px; font-size: 10px; font-weight: 700; } .msg-acuse-pedido { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 8px 10px; border-radius: 5px; background: color-mix(in srgb, var(--legend), transparent 88%); border: 1px solid color-mix(in srgb, var(--legend), transparent 65%); font-size: 12px; color: var(--text); } .msg-acuse-ok { margin-top: 8px; font-size: 12px; color: #2a8a4a; } .msg-tabla { width: 100%; border-collapse: collapse; font-size: 12px; } .msg-tabla th, .msg-tabla td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); } .msg-tabla th { color: var(--text-soft); font-weight: 600; } .msg-pend { color: var(--danger); } .msg-aviso { padding: 5px 10px; font-size: 11px; color: var(--text-soft); background: color-mix(in srgb, var(--accent), transparent 93%); border-bottom: 1px solid var(--border); } /* Chatter: mensajes de un registro (fase 4.a) */ .msg-chat { display: flex; flex-direction: column; height: 100%; background: var(--surface); } .msg-chat-barra { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--text-soft); } .msg-chat-seg { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-chat-hilo { flex: 1 1 auto; overflow: auto; } .msg-chat-nuevo { border-top: 1px solid var(--border); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); } .msg-chat-nuevo textarea { font-family: inherit; font-size: 13px; padding: 7px 8px; resize: vertical; border: 1px solid var(--input-border); border-radius: 4px; background: var(--input-bg); color: var(--text); } .msg-chat-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* ===================================================== Adjuntos (js/archivos.js) — widget de archivos por registro ============================================================ */ .adj { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .adj-zona { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px; text-align: center; border: 1px dashed var(--input-border); border-radius: 6px; background: var(--surface-2); color: var(--text-soft); font-size: 12px; } .adj-zona.adj-drag { border-color: var(--accent); border-style: solid; background: color-mix(in srgb, var(--accent), transparent 90%); } .adj-zona.adj-off { opacity: .5; pointer-events: none; } .adj-zona-txt { color: var(--text); } .adj-progreso { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; } .adj-barra { height: 100%; width: 0; background: var(--accent); transition: width .15s linear; } .adj-lista { display: flex; flex-direction: column; gap: 3px; max-height: 220px; overflow: auto; } .adj-item { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); } .adj-item:hover { border-color: var(--accent); } .adj-ico { flex: 0 0 auto; font-size: 15px; } .adj-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); text-decoration: none; font-size: 13px; } .adj-nom:hover { text-decoration: underline; } .adj-meta { flex: 0 0 auto; font-size: 11px; color: var(--text-soft); } /* ===================================================== Soporte (js/soporte.js) — reporte de problemas y seguimiento ============================================================ */ .sop-wrap { display: flex; flex-direction: column; height: 100%; background: var(--surface); } .sop-barra { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); } .sop-aviso { margin-left: auto; color: var(--danger); } .sop-lista { flex: 1 1 auto; overflow: auto; } .sop-item { padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; } .sop-item:hover { background: var(--surface-2); } .sop-item-top { display: flex; align-items: center; gap: 8px; } .sop-ref { font-family: monospace; font-size: 11px; color: var(--text-soft); flex: 0 0 auto; } .sop-tit { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sop-chip { flex: 0 0 auto; font-size: 11px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--border); color: var(--text-soft); } .sop-e-rec { border-color: #6b7280; color: #6b7280; } .sop-e-cur { border-color: #d49a00; color: #d49a00; } .sop-e-ok { border-color: #2a8a4a; color: #2a8a4a; } .sop-e-no { border-color: #c0392b; color: #c0392b; } .sop-e-pen { border-color: #8a6d3b; color: #8a6d3b; } .sop-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); } .sop-check input { width: 16px; height: 16px; flex: 0 0 auto; } .sop-cuerpo { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 8px; } .sop-upd { padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px; } /* ===================================================== Automatización (js/automatizacion.js) ============================================================ */ .aut-wrap { display: flex; flex-direction: column; height: 100%; background: var(--surface); } .aut-zona { margin: 16px; padding: 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 2px dashed var(--input-border); border-radius: 10px; background: var(--surface-2); color: var(--text); } .aut-zona.aut-drag { border-color: var(--accent); background: color-mix(in srgb, var(--accent), transparent 88%); } .aut-zona-ico { font-size: 34px; } /* Contexto opcional (asunto/detalle): mismo par de datos que trae la vía mail */ .aut-contexto { display: flex; flex-direction: column; gap: 6px; width: min(480px, 100%); margin-top: 6px; text-align: left; } .aut-contexto input, .aut-contexto textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--input-border); border-radius: 4px; background: var(--surface); color: var(--text); font: inherit; resize: vertical; } /* Entradas recibidas por mail, pendientes de revisión */ .aut-pendientes { width: min(560px, 100%); margin-top: 12px; text-align: left; } .aut-pend { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; margin-top: 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); } .aut-pend-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .aut-pend-info .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aut-pend-acciones { display: flex; gap: 6px; flex: 0 0 auto; } .aut-badge { margin-right: 4px; } .aut-mail-banner { padding: 8px 10px; margin-bottom: 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); } .aut-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .aut-cabecera { padding: 10px 14px; border-bottom: 1px solid var(--border); } .aut-cuerpo { flex: 1 1 auto; overflow: auto; padding: 10px 14px; } .aut-acciones { flex: 0 0 auto; display: flex; gap: 8px; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--border); background: var(--surface-2); } .aut-archivo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .aut-eleccion { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .aut-eleccion select { flex: 1 1 auto; } .aut-ia { margin-top: 6px; font-size: 12px; padding: 5px 8px; border-radius: 4px; background: color-mix(in srgb, var(--accent), transparent 90%); color: var(--text); } .aut-alerta { margin: 6px 0; font-size: 12px; padding: 6px 9px; border-radius: 4px; background: color-mix(in srgb, #d49a00, transparent 85%); color: var(--text); } .aut-error { color: var(--danger); } .aut-ok { font-size: 14px; color: #2a8a4a; } .aut-obs { margin: 6px 0 6px 18px; font-size: 13px; } .aut-info { margin: 6px 0; padding: 6px 9px 6px 24px; font-size: 13px; border-radius: 4px; background: color-mix(in srgb, var(--accent), transparent 92%); } /* ---- RRHH: calendario anual de vacaciones/licencias ---- */ .rrhh-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .rrhh-cal-mes { border: 1px solid var(--border); border-radius: 6px; padding: 8px; } .rrhh-cal-mes-tit { font-weight: 600; font-size: 13px; margin-bottom: 4px; } .rrhh-cal-sem, .rrhh-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .rrhh-cal-sem span { font-size: 10px; color: var(--text-soft); text-align: center; } .rrhh-cal-dia { font-size: 11px; text-align: center; padding: 3px 0; border-radius: 4px; cursor: pointer; user-select: none; } .rrhh-cal-dia:hover:not(.vacio) { outline: 1px solid var(--accent); } .rrhh-cal-dia.vacio { cursor: default; } .rrhh-cal-dia.personal { font-weight: 700; } .rrhh-cal-dia.t-feriado, .rrhh-cal-chip.t-feriado { background: color-mix(in srgb, #8e44ad, transparent 70%); } .rrhh-cal-dia.t-gremial, .rrhh-cal-chip.t-gremial { background: color-mix(in srgb, #8e44ad, transparent 45%); } .rrhh-cal-dia.t-vacaciones, .rrhh-cal-chip.t-vacaciones { background: color-mix(in srgb, #2a8a4a, transparent 55%); } .rrhh-cal-dia.t-licencia, .rrhh-cal-chip.t-licencia { background: color-mix(in srgb, #d4762c, transparent 55%); } .rrhh-cal-dia.t-certificado, .rrhh-cal-chip.t-certificado { background: color-mix(in srgb, #2c7bd4, transparent 55%); } .rrhh-cal-dia.t-otro, .rrhh-cal-chip.t-otro { background: color-mix(in srgb, #888, transparent 55%); } .rrhh-cal-chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; } .aut-tabla-wrap { overflow: auto; max-height: 340px; border: 1px solid var(--border); border-radius: 4px; } .aut-tabla { border-collapse: collapse; font-size: 12px; width: 100%; } .aut-tabla th, .aut-tabla td { border-bottom: 1px solid var(--border); padding: 4px 8px; text-align: left; white-space: nowrap; } .aut-tabla th { background: var(--surface-2); position: sticky; top: 0; } .aut-log { white-space: pre-wrap; word-break: break-word; font-family: monospace; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 8px; } .aut-corridas { flex: 1 1 auto; overflow: auto; } .aut-corrida { padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; } .aut-corrida:hover { background: var(--surface-2); } .aut-corrida-top { display: flex; align-items: center; gap: 8px; } /* El atributo `hidden` tiene que ganarle al display de la clase: sin esto, un contenedor flex marcado como hidden se sigue viendo (pasó con la zona de arrastre de Automatización y con el panel de resultados). */ .adj-zona[hidden], .adj-progreso[hidden], .aut-zona[hidden], .aut-panel[hidden] { display: none !important; } /* El texto del tilde de captura se partía en tres renglones: que ocupe el ancho. */ .sop-check { flex: 1 1 auto; } /* Bloque de adjuntos al pie del editor (lo arma crudEditar cuando el config tiene un campo type:'adjuntos'). Toma el alto sobrante de la ventana; la lista scrollea adentro en vez de estirar el formulario. */ .form-adjuntos { flex: 1 1 auto; min-height: 150px; display: flex; flex-direction: column; padding: 0 14px 4px; overflow: hidden; } .form-adjuntos .form-section { flex: 0 0 auto; margin-top: 0; } .form-adjuntos .adj-host { flex: 1 1 auto; min-height: 0; display: flex; } .form-adjuntos .adj { flex: 1 1 auto; min-height: 0; } .form-adjuntos .adj-lista { flex: 1 1 auto; max-height: none; } /* ====== Asistente IA ====== */ .ia-chat { display:flex; flex-direction:column; height:100%; } .ia-top { display:flex; gap:6px; align-items:center; padding:6px 8px; border-bottom:1px solid var(--border); flex:0 0 auto; } .ia-top select { padding:2px 4px; } .ia-cuerpo { display:flex; flex:1 1 auto; min-height:0; } .ia-lateral { width:260px; flex:0 0 auto; border-right:1px solid var(--border); display:flex; flex-direction:column; background:var(--surface-2); } .ia-lat-tit { padding:6px 8px; font-weight:600; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; } .ia-lat-lista { overflow:auto; flex:1 1 auto; } .ia-lat-item { padding:6px 8px; border-bottom:1px solid var(--border); cursor:pointer; } .ia-lat-item:hover, .ia-lat-item.activa { background:color-mix(in srgb, var(--accent) 12%, var(--surface)); } .ia-lat-fecha { font-size:11px; color:var(--text-soft); display:flex; justify-content:space-between; } .ia-lat-borrar { border:0; background:none; cursor:pointer; opacity:.5; } .ia-lat-borrar:hover { opacity:1; } .ia-lat-txt { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ia-lista { flex:1 1 auto; overflow:auto; padding:10px 12px; display:flex; flex-direction:column; gap:10px; } .ia-msg { max-width:92%; padding:8px 12px; border-radius:10px; line-height:1.4; font-size:13px; } .ia-user { align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:2px; } .ia-assistant { align-self:flex-start; background:var(--surface-2); border:1px solid var(--border); border-bottom-left-radius:2px; max-width:98%; } .ia-error { align-self:flex-start; background:color-mix(in srgb, var(--danger) 12%, var(--surface)); border:1px solid var(--danger); } .ia-html p { margin:4px 0; } .ia-html ul, .ia-html ol { margin:4px 0 4px 18px; } .ia-html table { border-collapse:collapse; margin:6px 0; font-size:12px; } .ia-html td, .ia-html th { border:1px solid var(--border); padding:2px 6px; } .ia-html pre, .ia-pasos pre { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:6px; font-size:11px; overflow:auto; white-space:pre-wrap; margin:4px 0; } .ia-pasos { margin-top:6px; font-size:12px; color:var(--text-soft); } .ia-pasos summary { cursor:pointer; } .ia-pasos ul { margin:4px 0 0 16px; } .ia-paso-error { color:var(--danger); } .ia-aviso { margin-top:6px; color:var(--danger); font-size:12px; } .ia-bloque { margin-top:8px; border:1px solid var(--border); border-radius:6px; padding:6px; background:var(--surface); } .ia-bloque-tit { font-weight:600; margin-bottom:4px; font-size:12px; } .ia-grid-inline { height:280px; width:100%; } .ia-ficha { border-collapse:collapse; font-size:12px; } .ia-ficha th { text-align:left; padding:2px 10px 2px 2px; color:var(--text-soft); font-weight:500; white-space:nowrap; vertical-align:top; } .ia-ficha td { padding:2px 4px; } .ia-calif { margin-top:6px; font-size:12px; display:flex; gap:4px; align-items:center; } .ia-thumb { border:1px solid var(--border); background:var(--surface); border-radius:4px; cursor:pointer; padding:1px 6px; } .ia-thumb:hover { border-color:var(--accent); } .ia-input { display:flex; gap:6px; padding:8px; border-top:1px solid var(--border); flex:0 0 auto; } .ia-input textarea { flex:1; resize:none; } .ia-estado { padding:0 10px 6px; min-height:16px; font-size:11px; } .ia-dots span { animation: ia-blink 1.2s infinite; } .ia-dots span:nth-child(2) { animation-delay:.2s; } .ia-dots span:nth-child(3) { animation-delay:.4s; } @keyframes ia-blink { 0%,100% { opacity:.2 } 50% { opacity:1 } } .ia-radios { display:flex; flex-direction:column; gap:4px; } .ia-radio { cursor:pointer; } /* admin */ .ia-adm-filtros { display:flex; gap:8px; align-items:flex-end; padding:8px; flex-wrap:wrap; border-bottom:1px solid var(--border); } .ia-adm-filtros label { display:flex; flex-direction:column; font-size:11px; color:var(--text-soft); gap:2px; } .ia-adm-filtros input, .ia-adm-filtros select { padding:3px 4px; } .ia-adm-resumen { padding:6px 8px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:12px; } .ia-chip { display:inline-block; padding:1px 8px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); font-size:11px; } .ia-chip-ok { background:color-mix(in srgb, #2a8a4a 18%, var(--surface)); } .ia-chip-mal { background:color-mix(in srgb, var(--danger) 18%, var(--surface)); } .ia-fila-mala { background:color-mix(in srgb, var(--danger) 14%, transparent) !important; } .ia-fila-borrada { color:var(--text-soft) !important; font-style:italic; } .ia-rp { padding:6px 8px; margin:4px 0; border-radius:6px; font-size:12px; border:1px solid var(--border); } .ia-rp-user { background:color-mix(in srgb, var(--accent) 14%, var(--surface)); } .ia-rp-asst { background:var(--surface-2); } .ia-rp-tool { background:var(--surface); border-style:dashed; } .ia-rp-res { background:var(--surface); color:var(--text-soft); } .ia-rp-res .ia-rp-txt { white-space:pre-wrap; font-family:monospace; font-size:11px; } .ia-rp-err { background:color-mix(in srgb, var(--danger) 12%, var(--surface)); } .ia-rp-meta { float:right; font-size:10px; color:var(--text-soft); } .ia-rp-com { font-style:italic; margin-top:4px; } .ia-rp-cab { padding:8px; border-bottom:1px solid var(--border); font-size:12px; } .ia-rp pre { margin:4px 0; white-space:pre-wrap; font-size:11px; } /* Asistente IA: archivos */ .ia-archivos { padding:4px 10px; border-top:1px solid var(--border); font-size:12px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; } .ia-arch { display:inline-flex; align-items:center; gap:2px; padding:1px 6px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); } .ia-arch.nuevo { border-color:var(--accent); } .ia-arch-dl { color:inherit; text-decoration:none; } .ia-arch-dl:hover { text-decoration:underline; } .ia-arch-x { border:0; background:none; cursor:pointer; opacity:.5; padding:0 2px; } .ia-arch-x:hover { opacity:1; } .ia-chat { position:relative; } .ia-drop { display:none; position:absolute; inset:0; background:color-mix(in srgb, var(--accent) 18%, var(--surface)); border:2px dashed var(--accent); border-radius:8px; z-index:5; align-items:center; justify-content:center; font-size:16px; pointer-events:none; } .ia-drop.on { display:flex; } /* Asistente IA: acciones con confirmación */ .ia-sistema { align-self:center; background:var(--surface-2); border:1px dashed var(--border); color:var(--text-soft); font-size:12px; max-width:80%; } .ia-accion { border-left:3px solid var(--accent); } .ia-accion-ejecutada { border-left-color:#2a8a4a; } .ia-accion-rechazada, .ia-accion-vencida { border-left-color:var(--text-soft); opacity:.8; } .ia-accion-error { border-left-color:var(--danger); } .ia-accion-chip { font-weight:normal; font-size:11px; margin-left:6px; color:var(--text-soft); } .ia-accion-res { font-size:13px; margin:2px 0 4px; } .ia-accion-det { white-space:pre-wrap; font-size:12px; background:var(--surface-2); border:1px solid var(--border); border-radius:4px; padding:6px; margin:4px 0; max-height:220px; overflow:auto; } .ia-accion-out { font-size:12px; margin-top:4px; } .ia-accion-btns { margin-top:6px; display:flex; gap:6px; align-items:center; } /* ====== Pestañas de editor (js/tabs.js) ====== */ .tabs { display: flex; flex-direction: column; height: 100%; min-height: 0; } .tabs-bar { flex: 0 0 auto; display: flex; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid var(--border); background: var(--surface-2); overflow-x: auto; scrollbar-width: thin; } .tab-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; background: none; cursor: pointer; color: var(--text-soft); font-size: 13px; font-family: inherit; white-space: nowrap; } .tab-btn:hover { color: var(--text); background: var(--surface); } .tab-btn.on { color: var(--accent); background: var(--surface); border-color: var(--border); box-shadow: inset 0 2px 0 var(--accent); } .tab-btn .tab-cont { min-width: 17px; padding: 0 5px; border-radius: 9px; font-size: 11px; background: var(--border); color: var(--text); text-align: center; } .tab-btn.on .tab-cont { background: var(--accent); color: #fff; } .tabs-body { flex: 1 1 auto; min-height: 0; background: var(--surface); } /* Variante: barra de pestañas VERTICAL al costado (pedido de Hugo 2026-09-08 para Originación: separar leads / cotizaciones / clientes / pendientes en un panel fijo). Se activa con la clase extra .tabs-vder en el contenedor .tabs. Va a la IZQUIERDA y grande (feedback de Fede: a la derecha quedaba chica). */ .tabs.tabs-vder { flex-direction: row !important; } .tabs.tabs-vder > .tabs-bar { flex-direction: column; align-items: stretch; gap: 6px; width: 190px; padding: 12px 10px; border-bottom: none; border-right: 1px solid var(--border); overflow-x: visible; overflow-y: auto; } .tabs.tabs-vder > .tabs-bar > .tab-btn { justify-content: flex-start; width: 100%; padding: 13px 12px; border-radius: 10px; border: 1px solid transparent; font-size: 15px; gap: 9px; } .tabs.tabs-vder > .tabs-bar > .tab-btn .tab-cont { margin-left: auto; } .tabs.tabs-vder > .tabs-bar > .tab-btn.on { color: var(--accent); background: color-mix(in srgb, var(--accent), transparent 86%); border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); font-weight: 700; } .tabs-body > [data-pane] { display: none; } .tabs-body > [data-pane].on { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: auto; } /* Grillas dentro de una pestaña: ocupan lo que sobra sin desbordar. */ .tabs-body > [data-pane] > .pane-grid { flex: 1 1 auto; min-height: 100px; width: 100%; } /* Adjuntos en modo documentos: qué es y cuándo vence (js/archivos.js) */ .adj-tipo { flex: 0 0 auto; font-size: 11px; padding: 1px 7px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-soft); } .adj-venc { flex: 0 0 auto; font-size: 11px; color: var(--text-soft); } .adj-venc-pronto { color: #d49a00; font-weight: 600; } .adj-venc-mal { color: var(--danger); font-weight: 600; } /* ====== Ficha de cliente: pestaña Historial (360) ====== */ .c360-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; } .c360-card { border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); padding: 10px 12px; } .c360-lbl { font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .03em; } .c360-val { font-size: 20px; font-weight: 600; color: var(--text); margin: 2px 0; } .c360-pie { font-size: 11px; color: var(--text-soft); } .c360-chips { margin-bottom: 8px; font-size: 12px; color: var(--text-soft); } .c360-chip { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); } .c360-chip i { color: var(--text-soft); font-style: normal; font-size: 11px; } .c360-sec { margin: 0 0 10px; } .c360-tabla-wrap { overflow: auto; max-height: 260px; } .c360-tabla { width: 100%; border-collapse: collapse; font-size: 12px; } .c360-tabla th, .c360-tabla td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; } .c360-tabla th { color: var(--text-soft); font-weight: 600; background: var(--surface-2); position: sticky; top: 0; } .c360-vacio { font-size: 12px; color: var(--text-soft); padding: 2px 0; } /* ===================================================== Solicitudes de servicio (link al cliente) ============================================================ */ .sol-wrap { display: flex; flex-direction: column; height: 100%; } .sol-emitir { overflow: auto; } .sol-cli-nuevo { margin: 0 0 8px 118px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 6px; background: var(--surface-2); } .sol-cli-nuevo .form-row label { width: 90px; } .sol-familias { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; } .sol-fam { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; } .sol-fam:hover { background: var(--surface-2); } .sol-fam input { margin-top: 3px; } .sol-fam b { display: block; } .sol-fam small { color: var(--text-soft); } .sol-check { display: flex; gap: 8px; align-items: flex-start; width: auto !important; text-align: left !important; color: var(--text) !important; } .sol-check input { margin-top: 3px; } .sol-check small { display: block; color: var(--text-soft); } .sol-resultado { margin-top: 10px; padding: 10px 12px; border: 1px solid #bfe3cd; background: #e8f5ee; border-radius: 6px; color: #1f5a3a; } [data-theme="dark"] .sol-resultado { background: #1e3328; border-color: #2e5a41; color: #bfe3cd; } .sol-resultado-tit { margin-bottom: 6px; } .sol-resultado input { flex: 1; font-family: monospace; font-size: 12px; } .sol-lista { flex: 1 1 auto; overflow: auto; } .sol-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); } .sol-item-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .sol-item-acciones { flex: 0 0 auto; display: flex; gap: 6px; } .sol-chip { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border); } .sol-chip.azul { background: #eef3fb; color: #2a5298; border-color: #c9d6ee; } .sol-chip.verde { background: #e8f5ee; color: #2e7d4f; border-color: #bfe3cd; } .sol-chip.rojo { background: #fbe9e7; color: #b3261e; border-color: #f0c3bd; } .sol-chip.gris { } /* Menú clásico del topbar (desplegable armado desde seg_nodos) */ .menu-dropdown.menu-clasico { min-width: 250px; max-height: 80vh; overflow: auto; z-index: 1000; } .menu-dropdown .menu-seccion { padding: 8px 16px 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--bar-muted); } .menu-dropdown .menu-ico { display: inline-block; width: 22px; } .menu-dropdown a.is-future { opacity: .55; } .menu-dropdown a small { color: var(--bar-muted); } .menu-dropdown a:hover small { color: #fff; } /* Revisión de una solicitud */ .sol-det { display: flex; flex-direction: column; height: 100%; } .sol-det-cab { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); } .sol-det-cab > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sol-det-acc { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; } .sol-chip.ambar { background: #fdf3e1; color: #7a5112; border-color: #f1d9a6; } /* Tema noche: los chips de color se veían con fondo pastel claro (pensados para el tema día). Fondo translúcido + texto claro del mismo tono. */ [data-theme="dark"] .sol-chip.azul { background: rgba(74, 108, 247, .18); color: #a9bcff; border-color: rgba(74, 108, 247, .45); } [data-theme="dark"] .sol-chip.verde { background: rgba(46, 125, 79, .22); color: #8fe0b4; border-color: rgba(46, 125, 79, .5); } [data-theme="dark"] .sol-chip.rojo { background: rgba(220, 53, 69, .2); color: #ff9a92; border-color: rgba(220, 53, 69, .5); } [data-theme="dark"] .sol-chip.ambar { background: rgba(245, 158, 11, .18); color: #f5c76a; border-color: rgba(245, 158, 11, .5); } .sol-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; } .sol-tabla th { text-align: left; color: var(--text-soft); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--border); } .sol-tabla td { padding: 4px 6px; border-bottom: 1px dashed var(--border); vertical-align: top; } .sol-tabla tr.dif td:nth-child(3) { color: var(--accent); font-weight: 600; } .sol-tabla td i { color: var(--text-soft); } .sol-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .sol-2col select { width: 100%; margin-top: 4px; } .sol-lugar, .sol-svc { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; transition: box-shadow .3s; } .sol-svc.sol-svc-sug { box-shadow: 0 0 0 2px #4a6cf7 inset; } /* Pestaña Servicios: líneas a la izquierda, resumen de la cotización a la derecha */ .sol-split { display: flex; height: 100%; min-height: 0; } .sol-split-izq { flex: 1 1 auto; min-width: 0; } .sol-split-der { flex: 0 0 380px; border-left: 1px solid var(--border); overflow: auto; padding: 8px 10px; background: var(--surface-2); } .sol-split.sin-cot .sol-split-izq { flex: 1 1 100%; } .sol-cot-cab { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .sol-cot-tot { font-size: 12.5px; } .sol-cot-items { display: flex; flex-direction: column; gap: 6px; } .sol-cot-item { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; background: var(--surface); font-size: 12.5px; cursor: default; } .sol-cot-item.con-linea { cursor: pointer; } .sol-cot-item.con-linea:hover { border-color: #4a6cf7; } select.sol-falta { border-color: var(--cuit-bad, #c62828); } .sol-cot-desc { line-height: 1.3; } .sol-cot-num { color: var(--text-soft); margin-top: 2px; } .sol-cot-sug { margin-top: 3px; } .sol-cot-est { margin-top: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } @media (max-width: 1100px) { .sol-split { flex-direction: column; } .sol-split-der { flex: 0 0 auto; border-left: 0; border-top: 1px solid var(--border); max-height: 45%; } } .sol-lugar-tit { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; } .sol-kvs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0; } .sol-kv { font-size: 12.5px; } .sol-kv > span { color: var(--text-soft); margin-right: 4px; text-transform: capitalize; } .sol-ver { padding: 6px 0; border-bottom: 1px dashed var(--border); } .sol-dif { margin: 4px 0 0 16px; padding: 0; font-size: 12.5px; } .aviso-ok { margin: 8px 14px 0; padding: 6px 10px; border-radius: 6px; background: #e8f5ee; color: #1f5a3a; border: 1px solid #bfe3cd; font-size: 13px; } [data-theme="dark"] .aviso-ok { background: #1e3328; border-color: #2e5a41; color: #bfe3cd; } .aviso-ok a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } [data-theme="dark"] .aviso-ok a { color: #8fe0b4; } /* ---------- Ayuda en línea (js/ayuda.js) ---------- */ .jsPanel-btn-ayuda { font-weight: 700; font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-right: 14px; border-radius: 6px; background: rgba(255,255,255,.14); opacity: .9; } .jsPanel-btn-ayuda:hover { opacity: 1; background: rgba(255,255,255,.28); } .jsPanel.ayuda-modo, .jsPanel.ayuda-modo * { cursor: help !important; } .jsPanel.ayuda-modo .jsPanel-btn-ayuda { background: rgba(255,255,255,.4); } .ayuda-target { outline: 2px solid var(--accent) !important; outline-offset: 2px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 10%, transparent) !important; } .ayuda-globo { position: absolute; z-index: 99999; width: 380px; max-width: calc(100% - 16px); background: var(--surface); color: var(--text); border: 1px solid var(--accent); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: 13px; display: flex; flex-direction: column; max-height: 70vh; } .ayuda-globo-tit { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; font-weight: 600; color: var(--legend); border-bottom: 1px solid var(--border); } .ayuda-globo-tit span { flex: 1; } .ayuda-x { background: none; border: none; color: var(--text-soft); cursor: pointer; font-size: 13px; padding: 2px 4px; } .ayuda-x:hover { color: var(--text); } .ayuda-globo-cuerpo { padding: 8px 12px; overflow: auto; line-height: 1.45; } .ayuda-globo-cuerpo p { margin: 0 0 8px; } .ayuda-globo-cuerpo ul, .ayuda-globo-cuerpo ol { margin: 0 0 8px; padding-left: 20px; } .ayuda-globo-cuerpo li { margin: 2px 0; } .ayuda-globo-cuerpo h4 { margin: 10px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-soft); } .ayuda-globo-cuerpo code { background: var(--input-bg); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; font-size: 12px; } .ayuda-globo-cuerpo a { color: var(--accent); } .ayuda-falta { color: var(--text-soft); font-style: italic; } .ayuda-globo-pie { display: flex; gap: 14px; align-items: center; padding: 6px 12px 8px; border-top: 1px solid var(--border); font-size: 12px; } .ayuda-globo-pie a { color: var(--accent); text-decoration: none; } .ayuda-globo-pie a:hover { text-decoration: underline; } .ayuda-clave { margin-left: auto; color: var(--text-soft); opacity: .55; font-family: monospace; font-size: 10px; } /* Selector de modo en Nueva solicitud */ .sol-modo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; } .sol-modo-opt { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 6px; cursor: pointer; } .sol-modo-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent), transparent 88%); } .sol-modo-opt input { margin-top: 3px; } .sol-modo-opt small { display: block; color: var(--text-soft); } /* ===== Originación: secciones colapsables y panel de clientes plegable ===== */ .orig-sec { border: 1px solid var(--border); border-radius: 8px; margin: 0 0 8px; padding: 0 10px 6px; } .orig-sec > summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: center; padding: 7px 0 5px; font-weight: 600; font-size: 13px; color: var(--legend); user-select: none; } .orig-sec > summary::before { content: '▸'; transition: transform .15s; flex: 0 0 auto; } .orig-sec[open] > summary::before { transform: rotate(90deg); } .orig-sec > summary::-webkit-details-marker { display: none; } .orig-sec > summary .sol-chip { font-weight: 400; } .orig-colapsada { flex: 0 0 30px !important; cursor: pointer; display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; border-right: 1px solid var(--border); } .orig-colapsada span { writing-mode: vertical-rl; color: var(--text-soft); font-size: 12px; } .orig-colapsada[hidden], [data-cli-col][hidden] { display: none !important; } /* ===== Ficha de cliente: carga por botones (estilo formulario de solicitud) ===== */ .pill-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .pill { border: 1px solid var(--border); background: var(--panel-bg); border-radius: 18px; padding: 5px 14px; cursor: pointer; font-size: 13px; color: var(--text); line-height: 1.2; } .pill:hover { border-color: var(--legend); } .pill.on { background: #2e4a9e; border-color: #2e4a9e; color: #fff; font-weight: 600; } .ficha-owner { font-weight: 400; font-size: 12px; } /* ===== Tesorería: informe de gastos ===== */ /* Fila "(SIN CLASIFICAR)": alerta suave, translúcida (sirve en tema día y noche). */ .tes-fila-pend { background: color-mix(in srgb, #d49a00 16%, transparent) !important; } /* Celda con desvío: gasto muy por encima del promedio del rubro. */ .tes-celda-desvio { background: color-mix(in srgb, #d9534f 22%, transparent) !important; } .tes-leyenda-desvio { background: color-mix(in srgb, #d9534f 22%, transparent); border-radius: 3px; padding: 0 4px; } /* Header de semana en dos líneas: "Semana 1" / rango de fechas. */ .tes-hdr-2l .ag-header-cell-text { white-space: pre-line; text-align: center; line-height: 1.3; } /* Tablero: tarjetas sobrias (nada del neón del dashboard BDM) e importes negativos. */ .tes-kpis { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px 14px 8px; } .tes-kpi { flex: 1 1 150px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; } .tes-kpi .v { font-size: 17px; font-weight: 700; } .tes-kpi .l { font-size: 11px; color: var(--text-soft); } .tes-kpi.alerta { border-color: #d49a00; } .tes-imp-neg { color: #e05a4d; } /* Dashboard gerencial: bloques RESUMEN por empresa con badge de cuadre. */ .tes-ger-bloque { margin: 8px 4px 18px; } .tes-ger-titulo { display: flex; align-items: baseline; gap: 12px; padding: 4px 2px; font-size: 15px; } .tes-ger-badge { font-size: 12px; color: var(--danger); } .tes-ger-badge.ok { color: #27ae60; } .tes-ger-grafico { margin: 2px 4px 6px; } /* Pendientes: placeholder de la columna Clasificación y su editor. */ .tes-elegir { color: var(--text-soft); font-style: italic; cursor: pointer; } .tes-rubro-editor { padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; } .tes-rubro-editor input { width: 280px; padding: 5px 8px; } /* Mini-alta de lead: CUIT en rojo mientras no es válido, y panel lateral con lo que ya sabemos del cliente (bloqueo e historial). */ input.cuit-invalido { color: var(--cuit-bad) !important; border-color: var(--cuit-bad) !important; } :root, [data-theme="light"] { --cuit-bad: #c0392b; } [data-theme="dark"] { --cuit-bad: #ff7b72; } /* Originación: los inputs sueltos (buscar, registrar contacto, fecha) no están en .form-row y quedaban con el blanco del navegador en tema noche. */ .orig-win input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .orig-win textarea, .orig-win select { padding: 5px 8px; border: 1px solid var(--input-border); border-radius: 4px; font-size: 13px; background: var(--input-bg); color: var(--text); font-family: inherit; } .orig-win textarea { resize: vertical; line-height: 1.35; } .orig-win input::placeholder, .orig-win textarea::placeholder { color: var(--text-soft); } /* Grilla de leads: aire entre "Cotizado" (a la derecha) y "Asignado" */ .orig-gap { padding-left: 18px !important; } .lead-cuit-panel { flex: 0 0 300px; border-left: 1px solid var(--border); padding: 8px 10px; overflow-y: auto; font-size: 12.5px; } .lead-cuit-panel h4 { margin: 0 0 6px; font-size: 13px; } .lead-cuit-panel .hint { padding: 0; } .lead-cuit-panel .bloq { background: #c0392b; color: #fff; border-radius: 6px; padding: 8px 10px; margin: 6px 0 10px; font-weight: 600; } .lead-cuit-panel .bloq small { display: block; font-weight: 400; margin-top: 3px; } .lead-cuit-panel .ok-nuevo { background: #1e7d4a; color: #fff; border-radius: 6px; padding: 8px 10px; margin: 6px 0; } .lead-cuit-panel .sec { margin: 8px 0 2px; font-weight: 600; color: var(--legend); } .lead-cuit-panel ul { margin: 0; padding-left: 16px; } .lead-cuit-panel li { margin: 1px 0; } /* ============================================================ Comercial v2: Gestión de Leads + Gestión de Cotizaciones (js/comercial_comun.js, js/leads.js, js/originacion.js) ============================================================ */ .cm-win { display: flex; flex-direction: column; height: 100%; } .cm-barra { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--border); flex: 0 0 auto; flex-wrap: wrap; } .cm-busc { flex: 0 1 460px; min-width: 220px; } .cm-busc input { width: 100%; } .cm-busc-res { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; max-height: 360px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px; } .cm-busc-fila { padding: 6px 8px; border-radius: 6px; cursor: pointer; } .cm-busc-fila:hover { background: var(--surface-2); } .cm-busc-pie { border-top: 1px solid var(--border); padding: 6px 4px 2px; } .cm-toggle { display: inline-flex; gap: 0; } .cm-toggle .btn { border-radius: 0; } .cm-toggle .btn:first-child { border-radius: 6px 0 0 6px; } .cm-toggle .btn:last-child { border-radius: 0 6px 6px 0; } .cm-lista-barra { display: flex; gap: 6px; align-items: center; padding: 6px 10px; flex: 0 0 auto; flex-wrap: wrap; } .cm-split { display: flex; flex-direction: column; height: 100%; min-height: 0; } .cm-split-top { flex: 0 0 42%; display: flex; flex-direction: column; min-height: 80px; } .cm-split-bar { flex: 0 0 6px; cursor: row-resize; background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .cm-split-bar:hover { background: var(--accent); opacity: .5; } .cm-split-bottom { flex: 1 1 auto; min-height: 120px; display: flex; flex-direction: column; overflow: hidden; } .cm-ficha-cab { display: flex; gap: 8px; align-items: center; padding: 6px 10px; flex: 0 0 auto; flex-wrap: wrap; } .cm-ficha-tit { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; flex: 1 1 auto; } .cm-ficha-acc { display: flex; gap: 5px; flex-wrap: wrap; } .cm-ficha-tabs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .cm-ficha-tabs > .tabs-body { flex: 1 1 auto; min-height: 0; } .cm-sec-cab { display: flex; gap: 6px; align-items: center; padding: 4px 0; } .cm-datos-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; } @media (max-width: 1000px) { .cm-datos-grid { grid-template-columns: 1fr; } } .cm-log { border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; margin-bottom: 8px; background: var(--surface-2); } .cm-log-tipos { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-bottom: 5px; } .cm-log textarea { width: 100%; } .cm-log-paso { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: 5px; font-size: 12px; } .cm-sin-paso { display: inline-flex; gap: 3px; align-items: center; color: var(--text-soft); } .cm-paso-pend { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 10px; margin-bottom: 8px; border-left: 4px solid var(--accent); background: var(--surface-2); border-radius: 6px; } .cm-paso-pend.vacio { border-left-color: var(--danger); } .cm-tl-filtros { display: flex; gap: 5px; margin: 4px 0 6px; } .cm-tl-filtros .sol-chip { cursor: pointer; } .cm-tl-dia { font-weight: 600; color: var(--legend); margin: 10px 0 4px; font-size: 12px; } .cm-tl-item { display: flex; gap: 8px; padding: 4px 0 6px; border-bottom: 1px dashed var(--border); } .cm-tl-item.evento { opacity: .85; } .cm-tl-item.evento .cm-tl-cab b { font-weight: 500; } .cm-tl-ico { flex: 0 0 22px; text-align: center; } .cm-tl-cuerpo { flex: 1 1 auto; min-width: 0; } .cm-tl-cab { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .cm-tl-det { white-space: pre-wrap; margin-top: 2px; font-size: 12.5px; } .cm-tl-paso { font-size: 12px; color: var(--accent); margin-top: 2px; } .cm-tl-paso.hecho { color: var(--text-soft); text-decoration: line-through; } .cm-hoy-fila { display: flex; gap: 8px; align-items: center; padding: 4px 0; flex-wrap: wrap; } .cm-check-barra { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin: 4px 0; } .cm-check-barra > div { height: 100%; background: #2e7d4f; } .cm-check-fila { display: flex; gap: 8px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--border); } .cm-embudo { display: flex; gap: 10px; padding: 10px; align-items: flex-start; flex-wrap: wrap; } .cm-col { flex: 1 1 260px; min-width: 240px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; } .cm-col.sobre { outline: 2px dashed var(--accent); } .cm-col-cab { padding: 6px 8px; border-bottom: 1px solid var(--border); display: flex; gap: 6px; align-items: center; } .cm-col-cuerpo { padding: 6px; display: flex; flex-direction: column; gap: 6px; max-height: 520px; overflow: auto; } .cm-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; cursor: pointer; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; } .cm-card:hover { border-color: var(--accent); } .cm-card.trabado { border-left: 4px solid #d33; } .cm-embudo-nota { flex: 1 1 100%; } .cm-apr-sec { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; } .cm-apr-sec.alerta { border-color: #f0c3bd; background: rgba(220, 53, 69, .06); } .cm-apr-tit { font-weight: 600; margin-bottom: 6px; } .cm-apr-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; } .cm-apr-tabla th { text-align: left; color: var(--text-soft); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--border); } .cm-apr-tabla td { padding: 5px 6px; border-bottom: 1px solid var(--border); vertical-align: top; } .cm-apr-tabla tr.off td { opacity: .55; } .cm-apr-tabla select { max-width: 200px; } .cm-dias { display: flex; gap: 3px; margin-top: 3px; } .cm-dias label { display: inline-flex; flex-direction: column; align-items: center; font-size: 11px; } /* ============================================================ RRHH v2 (2026-09-28): acciones a la vista, avisos de una línea, filtros con listas y ausencias como eventos. Usa SOLO las variables del tema (acento, superficies, texto): se ve igual que el resto del sistema, en día y en noche. Los colores de estado son los mismos tonos que ya usaba el calendario de licencias (.rrhh-cal-*). ============================================================ */ .rrhh-win { display: flex; flex-direction: column; height: 100%; min-height: 0; color: var(--text); background: var(--surface); } /* `hidden` tiene que ganarle a los display:flex de estas clases. */ .rrhh-win [hidden], .rrhh-filtros [hidden] { display: none !important; } .rrhh-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; } .rrhh-pad { padding: 12px 14px; } .rrhh-row { display: flex; align-items: center; gap: 8px; } .rrhh-sp { flex: 1 1 auto; } .rrhh-soft { color: var(--text-soft); } .rrhh-small { font-size: 12px; } .rrhh-h { font-size: 17px; font-weight: 600; margin: 0; } .rrhh-h3 { font-size: 14px; font-weight: 600; margin: 0; } .rrhh-num { font-variant-numeric: tabular-nums; } /* Barra de filtros: etiqueta arriba, control abajo; filtra al elegir. */ .rrhh-filtros { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .rrhh-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .rrhh-campo > label { font-size: 11.5px; font-weight: 600; color: var(--text-soft); } .rrhh-campo select, .rrhh-campo input { padding: 6px 8px; border: 1px solid var(--input-border); border-radius: 4px; font-size: 13px; background: var(--input-bg); color: var(--text); font-family: inherit; } .rrhh-campo .ts-wrapper { min-width: 0; } .rrhh-campo .ts-control { min-height: 32px; padding: 4px 8px; font-size: 13px; } .rrhh-rango { display: flex; gap: 6px; } .rrhh-rango input { width: 140px; } .ts-dropdown.rrhh-dd { z-index: 20000; font-size: 13px; } .ts-dropdown.rrhh-dd .option { display: flex; align-items: center; gap: 8px; padding: 6px 10px; } .rrhh-opt-sub { font-size: 11.5px; color: var(--text-soft); } .rrhh-opt-der { margin-left: auto; font-size: 11.5px; color: var(--text-soft); } /* Chips de estado: texto corto sobre un tono suave (sirve en día y noche). */ .rrhh-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; line-height: 18px; white-space: nowrap; background: color-mix(in srgb, var(--c, #888) 16%, transparent); color: color-mix(in srgb, var(--c, #888) 78%, var(--text)); } .rrhh-chip.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .rrhh-chip.warn { --c: #d49a00; } .rrhh-chip.bad { --c: #c0392b; } .rrhh-chip.ok { --c: #27ae60; } .rrhh-chip.acc { --c: var(--accent); } .rrhh-chip.neu { --c: #888; } .rrhh-chip.t-vacaciones { --c: #2a8a4a; } .rrhh-chip.t-licencia { --c: #d4762c; } .rrhh-chip.t-certificado { --c: #2c7bd4; } .rrhh-chip.t-otro { --c: #888; } .rrhh-chip.t-feriado, .rrhh-chip.t-gremial { --c: #8e44ad; } /* Aviso de una línea: número + contexto + botón. */ .rrhh-aviso { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 12px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, var(--surface)); font-size: 13px; } .rrhh-aviso b { font-weight: 600; } .rrhh-aviso.warn { --c: #d49a00; } .rrhh-aviso.ok { --c: #27ae60; } .rrhh-aviso.info { --c: var(--accent); } .rrhh-aviso .ico { font-size: 14px; } .rrhh-avisos { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 0; } .rrhh-avisos:empty { display: none; } /* Botones extra, sobre la base .btn del sistema. */ .btn.btn-xs { padding: 3px 9px; font-size: 12px; } .btn.ok { background: #27ae60; } .btn.ok:hover { background: #229954; } .btn.link { background: none; color: var(--accent); padding-left: 4px; padding-right: 4px; } .btn.link:hover { background: none; text-decoration: underline; } .btn.borde { background: var(--surface); color: var(--text); border: 1px solid var(--input-border); } .btn.borde:hover { background: var(--surface-2); } .btn.borde.rojo { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); } /* Iniciales de la persona. */ .rrhh-av { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; flex: 0 0 auto; line-height: 1; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--accent); } .rrhh-persona { display: flex; align-items: center; gap: 8px; min-width: 0; height: 100%; line-height: 1.25; } .rrhh-persona .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rrhh-persona .s { font-size: 11.5px; color: var(--text-soft); } /* Tarjetas KPI (mismo criterio que .tes-kpi). */ .rrhh-kpis { display: flex; gap: 10px; flex-wrap: wrap; } .rrhh-kpi { flex: 1 1 130px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; } .rrhh-kpi .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .rrhh-kpi .v small { font-size: 12px; font-weight: 500; color: var(--text-soft); } .rrhh-kpi .l { font-size: 11.5px; color: var(--text-soft); } /* Cierre del mes: pasos en orden. */ .rrhh-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; } .rrhh-pasos .paso { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); } .rrhh-pasos .paso:last-child { border-bottom: none; } .rrhh-pasos .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-weight: 700; font-size: 12px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); } .rrhh-pasos .paso.listo .num { background: #27ae60; color: #fff; } .rrhh-pasos .txt { flex: 1 1 auto; min-width: 0; } .rrhh-pasos .txt b { font-weight: 600; font-size: 13.5px; } .rrhh-pasos .txt div { font-size: 12px; color: var(--text-soft); margin-top: 1px; } .rrhh-barra { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); } .rrhh-barra > span { display: block; height: 100%; background: var(--accent); } .rrhh-drop { border: 2px dashed var(--border); border-radius: 8px; padding: 10px; text-align: center; color: var(--text-soft); font-size: 12.5px; cursor: pointer; } .rrhh-drop.sobre { border-color: var(--accent); color: var(--accent); } /* Revisión: lista de personas + días como tarjetas con la corrección en línea. */ .rrhh-rev { display: flex; flex: 1 1 auto; min-height: 0; } .rrhh-rev-lista { flex: 0 0 270px; border-right: 1px solid var(--border); overflow: auto; padding: 6px; background: var(--surface-2); } .rrhh-rev-lista .p { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 6px; cursor: pointer; } .rrhh-rev-lista .p:hover { background: var(--surface); } .rrhh-rev-lista .p.on { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); } .rrhh-rev-lista .vacio { padding: 20px 10px; text-align: center; color: var(--text-soft); } .rrhh-rev-det { flex: 1 1 auto; min-width: 0; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; } .rrhh-dia { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); } .rrhh-dia.activo { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); } .rrhh-dia.hecho { opacity: .55; } .rrhh-dia .fecha { font-weight: 700; width: 100px; } .rrhh-marcas { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .rrhh-marca { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; font-size: 12px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); font-variant-numeric: tabular-nums; } .rrhh-marca.manual { border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .rrhh-marca.anulada, .rrhh-marca.doble { text-decoration: line-through; color: var(--text-soft); font-weight: 400; } .rrhh-marca.falta { border: 1.5px dashed #d49a00; color: color-mix(in srgb, #d49a00 80%, var(--text)); background: transparent; } .rrhh-marcas .ln { width: 10px; height: 1px; background: var(--border); } .rrhh-dia input[type="time"] { width: 105px; padding: 4px 6px; border: 1px solid var(--input-border); border-radius: 4px; background: var(--input-bg); color: var(--text); font-family: inherit; } .rrhh-dia select { padding: 4px 6px; border: 1px solid var(--input-border); border-radius: 4px; background: var(--input-bg); color: var(--text); font-family: inherit; font-size: 13px; } .rrhh-mas { border-top: 1px dashed var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; } .rrhh-mas .m { display: flex; align-items: center; gap: 8px; font-size: 12.5px; } .rrhh-kbd { display: inline-block; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 11px; background: var(--surface); } /* Acciones dentro de una grilla (AG Grid): botones compactos en la celda. */ .rrhh-cel-acc { display: flex; gap: 4px; align-items: center; height: 100%; } .rrhh-cel-acc .btn { line-height: 1.2; } /* Barra que aparece al seleccionar filas (Horas extra). */ .rrhh-seleccion { display: flex; align-items: center; gap: 10px; padding: 7px 12px; margin: 8px 14px 0; border-radius: 6px; background: var(--accent); color: #fff; font-size: 13px; } .rrhh-seleccion .btn { background: #fff; color: var(--accent); } .rrhh-seleccion .btn.sec { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); } /* Selector segmentado (pestañas de estado dentro de una ventana). */ .rrhh-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px; gap: 2px; } .rrhh-seg button { border: none; background: none; padding: 5px 11px; border-radius: 4px; cursor: pointer; font: inherit; font-size: 13px; color: var(--text-soft); } .rrhh-seg button.on { background: var(--surface); color: var(--accent); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); } .rrhh-seg button em { font-style: normal; margin-left: 4px; color: var(--text-soft); font-weight: 400; } /* Ausencias: panel lateral dentro de la ventana. */ .rrhh-panel-lat { position: absolute; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100%; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -8px 0 22px rgba(0,0,0,.18); display: flex; flex-direction: column; z-index: 5; } .rrhh-panel-lat .cab { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); } .rrhh-panel-lat .cuerpo { flex: 1 1 auto; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; } .rrhh-panel-lat .pie { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--surface-2); } .rrhh-velo { position: absolute; inset: 0; background: rgba(0,0,0,.18); z-index: 4; } .rrhh-panel-lat textarea { width: 100%; min-height: 56px; padding: 6px 8px; border: 1px solid var(--input-border); border-radius: 4px; background: var(--input-bg); color: var(--text); font-family: inherit; font-size: 13px; resize: vertical; } /* Ausencias: calendario del equipo (personas x días del mes). */ .rrhh-gantt { display: grid; font-size: 11.5px; min-width: 900px; } .rrhh-gantt .h { padding: 4px 0; text-align: center; color: var(--text-soft); font-weight: 600; border-bottom: 1px solid var(--border); line-height: 1.25; background: var(--surface-2); } .rrhh-gantt .h.nm { text-align: left; padding-left: 10px; } .rrhh-gantt .nm { padding: 0 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; overflow: hidden; background: var(--surface); position: sticky; left: 0; z-index: 2; } .rrhh-gantt .c { border-bottom: 1px solid var(--border); border-left: 1px solid color-mix(in srgb, var(--border) 60%, transparent); height: 34px; position: relative; cursor: pointer; } .rrhh-gantt .c:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .rrhh-gantt .we { background: color-mix(in srgb, var(--text-soft) 7%, transparent); } .rrhh-gantt .fe { background: color-mix(in srgb, #8e44ad 12%, transparent); } .rrhh-gantt .barra { position: absolute; top: 7px; height: 20px; border-radius: 4px; color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; padding: 0 6px; overflow: hidden; white-space: nowrap; z-index: 1; cursor: pointer; } .rrhh-gantt .barra.t-vacaciones { background: #2a8a4a; } .rrhh-gantt .barra.t-licencia { background: #d4762c; } .rrhh-gantt .barra.t-certificado { background: #2c7bd4; } .rrhh-gantt .barra.t-otro { background: #888; } /* Confirmación breve (rrhhToast): abajo a la derecha, no bloquea y se va sola. */ #rrhh-toasts { position: fixed; right: 18px; bottom: 46px; display: flex; flex-direction: column; gap: 8px; z-index: 30000; pointer-events: none; } .rrhh-toast { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid #27ae60; border-radius: 6px; padding: 9px 14px; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.22); max-width: 380px; transition: opacity .35s, transform .35s; } .rrhh-toast.err { border-left-color: #d49a00; } .rrhh-toast.fuera { opacity: 0; transform: translateY(6px); } .rrhh-panel-lat .rrhh-aviso { flex-wrap: wrap; row-gap: 2px; } /* Cierre del mes: tira de días del mes con el estado de la importación. */ .rrhh-cob-fila { margin-top: 7px; } .rrhh-cob { display: flex; gap: 2px; flex-wrap: wrap; } .rrhh-cob i { display: block; width: 11px; height: 16px; border-radius: 2px; } .rrhh-cob i.completo { background: #27ae60; } .rrhh-cob i.parcial { background: #d49a00; } .rrhh-cob i.sin_marcas { background: #c0392b; } .rrhh-cob i.futuro { background: var(--surface-2); border: 1px solid var(--border); } .rrhh-cob i.no_laborable { background: transparent; border: 1px dashed var(--border); } /* Empleados del reloj: celdas editables con un clic y dato faltante resaltado. */ .rrhh-cel-edit { cursor: pointer; } .rrhh-cel-edit::after { content: '▾'; float: right; color: var(--text-soft); margin-left: 6px; } .rrhh-cel-falta { color: #b9770e; font-style: italic; } .rrhh-cel-editor { width: 100%; height: 100%; border: 1px solid var(--accent); border-radius: 3px; background: var(--input-bg); color: var(--text); font: inherit; padding: 0 4px; }