/* Fase 10 (item 7): reemplazo progresivo de style="display:none" por clases - .is-hidden gana SIEMPRE (!important a proposito, mismo criterio que .d-none de Bootstrap) sin importar que otra regla de display tenga el elemento (ej. .active-batch-banner declara display:flex por defecto). */ .is-hidden { display: none !important; } :root { /* ---- Tokens de marca SIImplifica ---- */ --color-navy: #081A33; --color-indigo: #151C4D; --color-violet: #7C3AED; --color-violet-light: #A855F7; /* Ajustado de #F7F8FC a #F6F7FB (pedido de diseño RRHH: casi el mismo tono, un pixel de diferencia, pero pidieron el valor exacto). */ --color-background: #F6F7FB; --color-card: #FFFFFF; /* Ajustado de #E5E7EB a #E2E8F0 (mismo motivo que el fondo de pagina). */ --color-border: #E2E8F0; --color-violet-soft: #F1ECFC; --color-indigo-soft: #EDEFF8; /* ---- Alias: el resto del CSS sigue usando estos nombres ---- */ --sidebar-bg: var(--color-navy); --primary: var(--color-violet); --primary-dark: #6D28D9; --secondary: var(--color-violet-light); --bg: var(--color-background); --card: var(--color-card); --text: var(--color-navy); --muted: #64748B; --success: #10B981; --success-bg: #ECFDF5; --danger: #EF4444; --danger-bg: #FEF2F2; --warning-bg: #FFFBEB; --warning: #B45309; --info: #2563EB; --info-bg: #EFF6FF; --border: var(--color-border); /* ---- Segunda pasada visual RR.HH. (Ago 2026) ---- */ /* Radios propios de esa pantalla: el resto del sitio ya tiene sus tarjetas ajustadas a 16-18px y no es parte de este pedido, asi que estos dos tokens solo se usan dentro de #view-rrhh (ver mas abajo). Despues los tomaron tambien Formulario 29, Liquidaciones y Cotizaciones. El de tarjeta bajo de 12 a 8px el 2/10/2026: el usuario pidio "esquinas un poco menos redondas" mirando el tablero del F29. */ --radius-card: 8px; --radius-control: 8px; /* Morado suave para hovers/fondos suaves. --color-violet-soft (#F1ECFC) ya existe pero se usa en iconos de todo el sitio (procesos, info-box); se agrega este con el tono exacto pedido para no correr el look de esas otras pantallas al tocarlo. */ --primary-soft: #F3E8FF; --primary-soft-border: #DDD6FE; /* --warning (#B45309) es un naranja mas oscuro elegido a proposito para que el TEXTO tenga contraste sobre fondo blanco/--warning-bg - con el naranja "puro" de abajo el texto se ve palido. Este token es solo para rellenos de icono o detalles decorativos, nunca para texto. */ --warning-icon: #F59E0B; } * { box-sizing: border-box; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); margin: 0; } h1, h2, h3 { margin: 0; font-weight: 700; } a { color: var(--primary); text-decoration: none; } /* Tapa TODA la pantalla por encima de cualquier cosa (position:fixed + z-index alto) mientras se sabe si hay sesion o no - antes era un bloque normal que solo ocupaba lugar arriba del resto, asi que durante una recarga lenta se veian los dos apilados (el cartel de carga y, debajo, el contenido de la pagina anterior que el navegador mantiene pintado un rato). Con esto tapa de verdad, no se ve nada de atras. */ #boot-loading { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.9rem; } /* Fase 10: public/login.html es su propio documento (ya no comparte pagina con #app-box) - siempre visible por defecto, no hay ningun JS que decida "mostrar login o app" en este archivo compartido. */ #login-box { display: flex; } /* ---------- Login ---------- */ .auth-wrapper { min-height: 100vh; align-items: center; justify-content: center; padding: 16px; position: relative; overflow: hidden; background: var(--color-background); } .auth-blob { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 32% 32%, rgba(124,58,237,0.18), rgba(124,58,237,0.05) 70%); } .auth-blob.b1 { width: 460px; height: 460px; top: -180px; right: -160px; } .auth-blob.b2 { width: 420px; height: 420px; bottom: -180px; left: -160px; } .auth-dots { position: absolute; width: 108px; height: 108px; pointer-events: none; background-image: radial-gradient(rgba(124,58,237,0.35) 1.4px, transparent 1.4px); background-size: 14px 14px; } .auth-dots.d1 { top: 26px; left: 26px; } .auth-dots.d2 { bottom: 26px; right: 26px; } .auth-card { background: var(--card); width: 100%; max-width: 440px; margin: 0 auto; border-radius: 24px; box-shadow: 0 24px 60px rgba(11,16,48,0.14), 0 1px 3px rgba(11,16,48,0.06); position: relative; z-index: 1; padding: 40px 40px 34px; } .auth-header { text-align: center; margin-bottom: 26px; } .auth-form-icon { width: 84px; height: 84px; margin-bottom: 16px; } .auth-wordmark { font-size: 1.7rem; line-height: 1.15; color: var(--text); } .auth-tagline { color: var(--primary); font-size: 0.82rem; font-weight: 600; margin: 6px 0 0; } .auth-field { position: relative; display: block; margin-bottom: 14px; } .auth-field-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); pointer-events: none; } .auth-field input { width: 100%; font-size: 0.9rem; padding: 13px 16px 13px 42px; margin: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; outline: none; transition: border-color .15s, background .15s; } .auth-field input:focus { background: #fff; border-color: var(--primary); } .auth-field-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 4px; display: flex; } .auth-field-toggle svg { width: 17px; height: 17px; } .auth-field-toggle:hover { color: var(--primary); } .auth-submit { margin-top: 6px; border-radius: 14px; padding: 13px 20px; font-size: 0.92rem; } .auth-error { color: var(--danger); font-size: 0.85rem; min-height: 1.2em; margin-top: 12px; text-align: center; } /* Aviso de por que la persona llego al login (ej. sesion vencida del portal de clientes). No es un error: es informativo. */ .auth-aviso { background: var(--info-bg, #EFF6FF); color: var(--info, #1D4ED8); font-size: 0.83rem; line-height: 1.4; border-radius: 10px; padding: 10px 12px; margin: 0 0 16px; text-align: center; } .auth-forgot { display: block; text-align: center; font-size: 0.82rem; color: var(--primary); font-weight: 600; margin-top: 18px; } .auth-forgot:hover { color: var(--primary-dark); } /* ---------- App shell ---------- */ #app-box { display: flex; min-height: 100vh; } .sidebar { width: 240px; flex-shrink: 0; background: var(--sidebar-bg); color: #cbd5e1; display: flex; flex-direction: column; padding: 20px 14px; position: sticky; top: 0; height: 100vh; transition: width .15s; } .sidebar-brand { display: flex; align-items: center; gap: 11px; color: #fff; font-weight: 700; padding: 6px 8px 14px; } .sidebar-brand .brand-badge { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: block; } .sidebar-brand-text { font-size: 0.98rem; letter-spacing: -0.01em; white-space: nowrap; } /* Boton para minimizar el menu a solo iconos - el estado se guarda en localStorage (ver toggleSidebarCollapsed) para que no vuelva a expandirse solo al recargar la pagina. */ .sidebar-collapse-btn { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 1px solid rgba(255,255,255,0.12); color: #94a3b8; border-radius: 8px; padding: 7px 10px; font-size: 0.78rem; cursor: pointer; margin-bottom: 16px; transition: background .15s, color .15s; } .sidebar-collapse-btn:hover { background: rgba(255,255,255,0.06); color: #fff; } .sidebar-collapse-btn svg { flex-shrink: 0; transition: transform .15s; } /* La marca de la seccion abierta NO es el fondo de cada enlace: es una sola pastilla del contenedor que se DESLIZA de una a otra, el mismo efecto que las pestañas pero en vertical (pedido del usuario, 14/9/2026). Con el fondo puesto en cada enlace no hay nada que animar: uno se apaga y el otro se prende. Su posicion y su alto los mide el JS (posicionarPastillaDelMenu) porque entre los enlaces hay titulos de grupo -"Principal", "Operaciones"- y algunos enlaces se esconden segun el rol: la distancia entre uno y otro no es fija, y el CSS no puede calcularla. */ .sidebar-nav { display: flex; flex-direction: column; gap: 5px; position: relative; } /* Con el navegador en zoom (o una pantalla baja) el menu no entra en el alto de la ventana, y la barra es sticky de 100vh: lo que sobraba quedaba debajo del borde, inalcanzable. "Salir" y la cuenta de Uwigo desaparecian (reportado el 21/9/2026, navegador al 125%: al menu le sobraban 35px; al 150%, 167px). Scrollea el MENU, no la barra entera, para que la marca, la cuenta y "Salir" queden siempre a la vista. La pastilla es un ::before de este mismo contenedor, asi que se mueve junto con los enlaces. */ .sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; /* Hasta el borde de la barra (los 14px de padding de .sidebar): ahí va el palito del activo, que con overflow-x: hidden se cortaría si quedara fuera del menú. Los enlaces siguen donde estaban. */ margin: 0 -14px; padding: 0 14px; } /* Sin esto, con el menu limitado en alto los renglones se ENCOGEN en vez de scrollear, y los primeros en encogerse son los titulos de grupo (su overflow: hidden les baja el minimo a 0): "Operaciones" y "Gestion" quedaban aplastados, cortados por la mitad. */ .sidebar-nav > * { flex-shrink: 0; } /* SE MUEVE IGUAL QUE EN SIIMPLIFICA (23/10/2026, pedido del dueño: "elimina el rebote y que se mueva igual que el de SIImplifica"): 280 ms y la curva del indicador del portal (.cp-nav-indicador en client-portal.css), que frena al llegar sin pasarse. Antes era el resorte del interruptor, con rebote. */ .sidebar-nav::before { content: ""; position: absolute; z-index: 0; left: 14px; right: 14px; top: 0; height: var(--nav-pastilla-h, 0); transform: translateY(var(--nav-pastilla-y, 0)); background: rgba(124, 58, 237, 0.22); border-radius: 9px; transition: var(--nav-pastilla-transicion, transform 280ms cubic-bezier(.3, .7, .3, 1), height 280ms cubic-bezier(.3, .7, .3, 1)); /* Sin alto -todavia no se midio- no se pinta: mejor nada que una barra violeta pegada arriba de todo. */ opacity: var(--nav-pastilla-visible, 0); } /* EL PALITO DEL ACTIVO, como en SIImplifica (mismo pedido): 3px violeta, fuera de la pastilla, pegado al borde izquierdo de la barra, y se mueve junto con ella. */ .sidebar-nav::after { content: ""; position: absolute; z-index: 0; left: 0; top: 9px; width: 3px; height: max(0px, calc(var(--nav-pastilla-h, 0px) - 18px)); transform: translateY(var(--nav-pastilla-y, 0)); border-radius: 0 3px 3px 0; background: #8B5CF6; transition: var(--nav-pastilla-transicion, transform 280ms cubic-bezier(.3, .7, .3, 1), height 280ms cubic-bezier(.3, .7, .3, 1)); opacity: var(--nav-pastilla-visible, 0); } @media (prefers-reduced-motion: reduce) { .sidebar-nav::before, .sidebar-nav::after { transition: none; } } .sidebar-nav-group-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; padding: 14px 13px 6px; white-space: nowrap; overflow: hidden; } .sidebar-nav-group-label:first-child { padding-top: 2px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 10px; color: #cbd5e1; font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; } .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; } /* Encima de la pastilla, que va detras. */ .nav-item { position: relative; z-index: 1; } .nav-item .nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; } /* Sin fondo propio (lo pone la pastilla, que se desliza) ni línea propia: el palito violeta va en .sidebar-nav::after, afuera, como en SIImplifica (volvió el 23/10/2026; antes se había sacado la línea pegada al enlace). */ .nav-item.active { color: #fff; } .sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); } .sidebar-footer .account-chip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); min-width: 0; width: 100%; margin-bottom: 10px; } .sidebar-footer .account-chip:hover { border-color: rgba(255,255,255,0.3); } .sidebar-footer .account-chip-title { color: #fff; } .sidebar-footer .account-chip-email { color: #94a3b8; } .sidebar-footer .account-chip svg { color: #94a3b8; } .sidebar-footer button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: transparent; border: 1px solid rgba(255,255,255,0.15); color: #cbd5e1; padding: 9px 12px; border-radius: 10px; font-size: 0.85rem; cursor: pointer; transition: background .15s; } .sidebar-footer button:hover { background: rgba(255,255,255,0.08); color: #fff; } /* ---------- Sidebar minimizado (solo iconos) ---------- */ .sidebar.collapsed { width: 72px; } .sidebar.collapsed .sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; } .sidebar.collapsed .sidebar-brand-text, .sidebar.collapsed .sidebar-collapse-btn span, .sidebar.collapsed .sidebar-nav-group-label, .sidebar.collapsed .nav-item .nav-label, .sidebar.collapsed .account-chip > div, .sidebar.collapsed .account-chip svg, .sidebar.collapsed .sidebar-footer button span { display: none; } .sidebar.collapsed .sidebar-collapse-btn { justify-content: center; } .sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); } .sidebar.collapsed .nav-item { justify-content: center; padding: 11px; } .sidebar.collapsed .sidebar-footer .account-chip { justify-content: center; padding: 8px; gap: 0; } /* EL AIRE DE ABAJO (--aire-natural) NO PUEDE SER EL MOTIVO DE UNA BARRA DE SCROLL. Esta para que la ultima tarjeta no quede pegada al borde cuando la pagina SI scrollea; cuando la pagina entra, lo que hay debajo del contenido ya es espacio vacio. Pero el alto de la pagina es contenido + este padding: una pantalla que entraba entera y terminaba a menos de 28px del borde igual se pasaba, y aparecia una barra para 7 pixeles de nada. Achicarlo (era 70px) solo hizo mas angosta la franja. Lo resuelve /js/compartido/aire-del-pie.js: si lo unico que se pasa de la ventana es este aire, lo achica hasta que la pagina entre (escribe --aire-del-pie); con contenido de verdad debajo del borde queda entero. Por eso el padding de abajo de esta columna se escribe SIEMPRE con esta formula. Una regla que le ponga un numero fijo deja a esa pantalla otra vez con la barra (lo vigila test/aireDelPie.test.js). */ .main-area { --aire-natural: 28px; flex: 1; min-width: 0; padding: 40px 48px var(--aire-del-pie, var(--aire-natural)); } /* Ventana baja: zoom del navegador o notebook. Se aprieta el menu para que entre entero, sin scroll. Solo escritorio: en movil el menu es una fila (ver el bloque de max-width: 720px). Los cortes salen de medir el menu con las 13 secciones del administrador (con Deudas) y la cuenta de Uwigo en dos renglones, como se ve en produccion (15/10/2026): normal necesita 951px de ventana; apretado, 800; mas apretado, 740. Con los cortes viejos (900 y 740, medidos el 8/10 con 12 secciones) una ventana de 901 a 950 scrolleaba hasta 50px: el dueño lo vio en la suya ("esta por centimetros"). Al sumar una seccion al menu hay que volver a medir (scratchpad: medir_menu.js). */ @media (min-width: 721px) and (max-height: 960px) { .sidebar { padding-top: 14px; padding-bottom: 14px; } .sidebar-brand { padding-bottom: 10px; } .sidebar-collapse-btn { margin-bottom: 10px; } .sidebar-nav { gap: 2px; } .sidebar-nav-group-label { padding-top: 10px; padding-bottom: 4px; } .nav-item { padding-top: 8px; padding-bottom: 8px; } .sidebar.collapsed .nav-item { padding: 8px 11px; } .sidebar-footer { padding-top: 10px; } .sidebar-footer .account-chip { margin-bottom: 8px; } } @media (min-width: 721px) and (max-height: 800px) { .nav-item { padding-top: 6px; padding-bottom: 6px; } .sidebar.collapsed .nav-item { padding: 6px 11px; } } /* Y con la ventana baja se recorta el aire de arriba del contenido: con zoom, esos 64px vacios eran lo primero que se veia. */ @media (min-width: 721px) and (max-height: 800px) { .main-area { padding-top: 24px; } .main-area > .topheader { margin-bottom: 12px; } } /* Ventana angosta (zoom alto): 48px de cada lado le quitaban casi 100px a tablas que ya no entraban. */ @media (min-width: 721px) and (max-width: 1100px) { .main-area { padding-left: 24px; padding-right: 24px; } } .topheader { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; } .topheader h1 { font-size: 1.6rem; } .topheader p { color: var(--muted); font-size: 0.92rem; margin-top: 4px; } .account-chip { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 8px 14px; cursor: pointer; transition: border-color .15s; min-width: 220px; } .account-chip:hover { border-color: var(--primary); } .account-chip .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .dot-success { background: var(--success); } .dot-warning { background: #F59E0B; } .dot-muted { background: var(--muted); } .dot-danger { background: var(--danger); } .account-chip > div { min-width: 0; flex: 1; } .account-chip-title { font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-chip-email { font-size: 0.76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-chip svg { margin-left: auto; width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; } .view { display: none; } .view.active { display: block; } /* ---------- Stat cards ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 20px; } /* En la columna de la derecha las fichas van UNA ABAJO DE LA OTRA. Con las dos al lado quedan en 159px y el texto se parte feo: "Procesos / en / ejecución" en tres líneas. Apareció al mover el resumen de Empresas a esa columna (pedido del usuario, 14/9/2026). */ .col-side .stat-grid { grid-template-columns: 1fr; gap: 12px; } .col-side .stat-card { padding: 16px 18px; } .stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 22px 22px; display: flex; align-items: center; gap: 16px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); } /* Los KPIs de Contabilidad son botones: tocar uno filtra la tabla por lo que ese número cuenta. Como son