/*!***********************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./source_assets/backoffice/css/tokens.css ***! \***********************************************************************************************************************/ /* ========================================================================== Factuser — Panel del tenant tokens.css — tipografía y variables de tema (claro / oscuro) TODO color, radio, sombra y espaciado del panel sale de acá. Ninguna hoja posterior escribe un color literal: si lo hiciera, ese elemento se quedaría en el tema claro al cambiar a oscuro, que es exactamente el tipo de bug que este archivo existe para prevenir. El tema se conmuta con un atributo en (`data-theme="dark"`), no con una clase: es un valor único y excluyente —no se puede estar "medio oscuro"— y el atributo lo expresa mejor que una clase que se agrega y se saca. Lo escribe panel.js y lo persiste en localStorage; el lo aplica antes de pintar (ver widget/tenant/head.php) para que no haya destello blanco al recargar en modo oscuro. ========================================================================== */ /* -------------------------------------------------------------------------- Noto Sans — autohospedada (2026-08-10, reemplaza a Poppins en este panel). Nada se pide a Google en runtime: los binarios se bajaron una vez desde fonts.gstatic.com y viven en source_assets/tenant/fonts/noto-sans/. El navegador del cliente nunca contacta un CDN de terceros — sin fuga de IPs y sin una dependencia externa en el camino crítico del render. ESTRUCTURA: una regla por peso y por subset, y dentro de cada `src` los dos formatos EN ORDEN. El navegador descarga el primero que soporta: woff2 (fuente VARIABLE) → navegadores modernos, ~98% del tráfico woff (estática del peso) → respaldo (IE11, Safari < 10) Por qué una regla por peso y no una sola con `font-weight: 100 900`: probándolo en Chrome se vio que declarar además reglas sueltas con peso exacto para los `.woff` hacía que el navegador PREFIRIERA esas —el matching de CSS elige la coincidencia exacta antes que un rango— y terminara bajando los estáticos de 250 KB en vez del variable de 36 KB. Medido: 510 KB de más por página. Con esta estructura, cada peso ofrece el variable primero y el estático sólo como alternativa, así que un navegador moderno baja UN archivo (el mismo para los cuatro pesos, servido desde caché) y uno viejo baja el estático correcto. Noto Sans es variable de verdad: los cuatro "pesos" que devuelve la API de Google son el MISMO binario (verificado por md5, los cuatro dan 86d512f8…). SUBSETS: sólo `latin` y `latin-ext`. El segundo no es opcional acá aunque pese más: el guaraní usa ẽ ĩ ũ ỹ, que no están en `latin`. Quedaron afuera cyrillic, greek, devanagari y vietnamese, que este producto no necesita. Los `.woff` de respaldo no vienen subseteados (Google no los ofrece así), de ahí que el mismo archivo cubra los dos rangos. -------------------------------------------------------------------------- */ /* 400 · latin */ @font-face { font-family: "Noto Sans"; src: url(../fonts/NotoSans-Variable.woff2) format("woff2"), url(../fonts/NotoSans-Regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 400 · latin-ext */ @font-face { font-family: "Noto Sans"; src: url(../fonts/NotoSans-Variable-ext.woff2) format("woff2"), url(../fonts/NotoSans-Regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* 500 · latin */ @font-face { font-family: "Noto Sans"; src: url(../fonts/NotoSans-Variable.woff2) format("woff2"), url(../fonts/NotoSans-Medium.woff) format("woff"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 500 · latin-ext */ @font-face { font-family: "Noto Sans"; src: url(../fonts/NotoSans-Variable-ext.woff2) format("woff2"), url(../fonts/NotoSans-Medium.woff) format("woff"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* 600 · latin */ @font-face { font-family: "Noto Sans"; src: url(../fonts/NotoSans-Variable.woff2) format("woff2"), url(../fonts/NotoSans-SemiBold.woff) format("woff"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 600 · latin-ext */ @font-face { font-family: "Noto Sans"; src: url(../fonts/NotoSans-Variable-ext.woff2) format("woff2"), url(../fonts/NotoSans-SemiBold.woff) format("woff"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* 700 · latin */ @font-face { font-family: "Noto Sans"; src: url(../fonts/NotoSans-Variable.woff2) format("woff2"), url(../fonts/NotoSans-Bold.woff) format("woff"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 700 · latin-ext */ @font-face { font-family: "Noto Sans"; src: url(../fonts/NotoSans-Variable-ext.woff2) format("woff2"), url(../fonts/NotoSans-Bold.woff) format("woff"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ---- Tipografía ---------------------------------------------------- */ --ft-font: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ft-fs-xs: 11px; --ft-fs-sm: 13px; --ft-fs-md: 13.5px; --ft-fs-base: 14px; --ft-fs-lg: 16px; --ft-fs-xl: 20px; --ft-fs-2xl: 26px; --ft-fs-3xl: 32px; /* ---- Espaciado y formas -------------------------------------------- */ --ft-radius-sm: 8px; --ft-radius: 12px; --ft-radius-lg: 16px; --ft-radius-xl: 22px; --ft-radius-pill: 999px; --ft-sidebar-w: 268px; --ft-sidebar-w-collapsed: 64px; --ft-header-h: 68px; /* Duración única para todas las transiciones de tema/hover: si cada componente elige la suya, el cambio de tema se ve como una cascada desprolija en vez de un solo movimiento. */ --ft-transition: 160ms ease; /* ---- Marca (idéntica en ambos temas) ------------------------------- */ --ft-brand: #2568ef; --ft-brand-strong: #1b4fc0; --ft-brand-soft: rgba(37, 104, 239, 0.10); --ft-brand-contrast: #ffffff; } /* -------------------------------------------------------------------------- TEMA CLARO (default) El fondo de la página es el verde muy lavado del diseño; el "shell" flota encima con su propia sombra. Por eso hay dos niveles de fondo (--ft-bg y --ft-surface) más un tercero para las tarjetas internas. -------------------------------------------------------------------------- */ :root, :root[data-theme="light"] { color-scheme: light; --ft-bg: #dde5f4; --ft-bg-accent: #eceff3; --ft-shell: #f7f8f8; --ft-surface: #ffffff; --ft-surface-2: #fbfbfc; --ft-surface-hover: #f2f3f5; --ft-surface-active: #eef0f3; --ft-text: #16181d; --ft-text-soft: #4c525c; --ft-text-muted: #8c939e; --ft-text-faint: #aab0ba; --ft-border: #e9eaee; --ft-border-strong: #dcdee4; --ft-border-dashed: #dfe1e7; --ft-success: #17a34a; --ft-success-soft: rgba(23, 163, 74, 0.10); --ft-danger: #e0503c; --ft-danger-soft: rgba(224, 80, 60, 0.10); --ft-warning: #e08b1f; --ft-warning-soft: rgba(224, 139, 31, 0.12); --ft-info: #2568ef; --ft-info-soft: rgba(37, 104, 239, 0.10); --ft-shadow-sm: 0 1px 2px rgba(19, 22, 28, 0.05); --ft-shadow: 0 4px 16px rgba(19, 22, 28, 0.06); --ft-shadow-lg: 0 24px 60px rgba(19, 22, 28, 0.14); --ft-overlay: rgba(20, 23, 28, 0.45); --ft-skeleton: #eef0f3; } /* -------------------------------------------------------------------------- TEMA OSCURO No es el claro invertido: los grises suben de a poco (bg → shell → surface) para que el contenido siga leyéndose "más cerca" que el fondo, igual que en el claro. Los colores de estado se aclaran, porque los del tema claro sobre fondo oscuro quedan por debajo del contraste mínimo legible. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --ft-bg: #0e1013; --ft-bg-accent: #131619; --ft-shell: #16191d; --ft-surface: #1b1f24; --ft-surface-2: #1f242a; --ft-surface-hover: #242a31; --ft-surface-active: #2a313a; --ft-text: #eceef2; --ft-text-soft: #c2c7d0; --ft-text-muted: #8b929d; --ft-text-faint: #6b727d; --ft-border: #272d34; --ft-border-strong: #70767c; --ft-border-dashed: #2f363e; --ft-success: #45c96f; --ft-success-soft: rgba(69, 201, 111, 0.14); --ft-danger: #f4705c; --ft-danger-soft: rgba(244, 112, 92, 0.14); --ft-warning: #f0a63c; --ft-warning-soft: rgba(240, 166, 60, 0.14); --ft-info: #5c8dff; --ft-info-soft: rgba(92, 141, 255, 0.14); --ft-brand: #4d82ff; --ft-brand-strong: #6d99ff; --ft-brand-soft: rgba(77, 130, 255, 0.16); --ft-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ft-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); --ft-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); --ft-overlay: rgba(0, 0, 0, 0.62); --ft-skeleton: #242a31; } /* Respeta a quien pidió menos movimiento en su sistema operativo: el panel tiene transiciones por todos lados y para alguien con sensibilidad vestibular eso no es un detalle estético. */ @media (prefers-reduced-motion: reduce) { :root { --ft-transition: 0ms; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /*!**********************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./source_assets/backoffice/css/reset.css ***! \**********************************************************************************************************************/ /* ========================================================================== reset.css — base mínima. Escrito desde cero para este panel: no hay Bootstrap ni normalize acá. El diseño no usa grilla de framework ni componentes de terceros, así que arrastrar 200 KB de CSS para después pisarlo entero no tendría sentido. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul[class], ol[class] { margin: 0; padding: 0; list-style: none; } img, picture, svg { display: block; max-width: 100%; } svg { /* Los iconos son SVG inline con stroke="currentColor": así heredan el color del texto del elemento que los contiene y cambian solos con el tema, sin una regla por icono. */ flex-shrink: 0; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } table { border-collapse: collapse; width: 100%; } /* Foco visible SÓLO por teclado: el anillo en cada click de mouse es ruido, pero sacarlo del todo deja la navegación por teclado sin referencia — que es una barrera de accesibilidad real, no un detalle. */ :focus-visible { outline: 2px solid var(--ft-brand); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } [hidden] { display: none !important; } /*!***********************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./source_assets/backoffice/css/layout.css ***! \***********************************************************************************************************************/ /* ========================================================================== layout.css — el "shell" del panel: fondo, tarjeta flotante, sidebar, cabecera y área de contenido. Estructura (ver Tenants/Home/view/index.php): body.app └── .app-shell tarjeta redondeada que flota sobre el fondo ├── .app-header marca + buscador + acciones (una sola fila) └── .app-body ├── .sidebar └── .app-main └── #view-content ← acá se inyectan las vistas El shell es `position: fixed` + `inset` en vez de un `margin` sobre el flujo normal: el panel no scrollea como página, scrollea sólo su área de contenido. Con margin, el fondo verde se iría con el scroll y la cabecera dejaría de ser fija. ========================================================================== */ html, body { height: 100%; } body.app { font-family: var(--ft-font); font-size: var(--ft-fs-base); line-height: 1.5; color: var(--ft-text); /* Igual que el shell y no el degradado de antes: con el shell a ras de la ventana este fondo ya no se ve nunca, y dejarlo distinto sólo abre la puerta a que asome un color ajeno en un rebote de scroll o durante el primer pintado. El degradado sigue vivo en el login (body.auth), que sí lo muestra. */ background: var(--ft-shell); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; } body.noscroll { overflow: hidden; } /* -------------------------------------------------------------------------- Shell -------------------------------------------------------------------------- */ /** * `inset: 0` — el shell ocupa la ventana entera, sin margen alrededor * (pedido de Luis, 2026-08-10; antes flotaba con 22px de aire, como en el * diseño original). * * Con los bordes pegados a la ventana, tres propiedades del estado anterior * dejan de tener sentido y por eso se sacan en vez de quedar como ruido: * * - `border-radius`: unas esquinas redondeadas contra el borde del navegador * dejarían ver el fondo de la página en los cuatro vértices, que se lee * como un error de render y no como una decisión de diseño. * - `border` y `box-shadow`: separaban el shell de lo que tenía detrás. Ya no * hay nada detrás — la sombra no se proyecta sobre nada y el borde queda * contra el marco de la ventana. */ .app-shell { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--ft-shell); transition: background var(--ft-transition); } /* -------------------------------------------------------------------------- Cabecera -------------------------------------------------------------------------- */ .app-header { display: flex; align-items: center; flex-shrink: 0; height: var(--ft-header-h); padding-right: 18px; /*gap: 14px;*/ } .app-header-brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; width: var(--ft-sidebar-w); padding: 0 16px 0 20px; transition: width var(--ft-transition); } .brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--ft-fs-lg); font-weight: 600; letter-spacing: -0.01em; color: var(--ft-text); } /* -------------------------------------------------------------------------- Logo de la marca Dos piezas mutuamente excluyentes: .brand-full logotipo completo (con sus variantes clara/oscura adentro) .brand-iso sólo el isotipo, para cuando no hay ancho El contenedor `.brand-full` existe justamente para poder ocultar las dos variantes de una sola vez — ver la nota en Home/view/index.php. -------------------------------------------------------------------------- */ .brand-full { display: flex; align-items: center; min-width: 0; } .brand-logo { height: 26px; width: auto; } /* `height` fija y `width: auto`: el logo escala por altura sin deformarse, sin depender de la relación de aspecto exacta del archivo. */ .brand-iso { display: none; height: 26px; width: auto; } /* Variante según el tema. Misma mecánica que en el login: las dos imágenes están en el marcado y el CSS muestra la que corresponde, así alternar el tema es instantáneo y no hay un salto en blanco esperando la descarga. */ .brand-logo-dark { display: none; } :root[data-theme="dark"] .brand-logo-light { display: none; } :root[data-theme="dark"] .brand-logo-dark { display: block; } .app-header-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .app-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } /* -------------------------------------------------------------------------- Buscador -------------------------------------------------------------------------- */ .search { position: relative; flex: 1; max-width: 320px; } .search-input { max-width: 18%; width: 100%; height: 38px; padding: 0 10px 0 36px; font-size: var(--ft-fs-md); color: var(--ft-text); background: var(--ft-surface); border: 1px solid var(--ft-border); border-radius: var(--ft-radius); transition: border-color var(--ft-transition), background var(--ft-transition); } .search-input::placeholder { color: var(--ft-text-faint); } .search-input:focus { border-color: var(--ft-border-strong); outline: none; } .search-icon { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--ft-text-faint); pointer-events: none; } /* Atajo ⌘K: es una pista, no un control — `pointer-events: none` evita que robe el click destinado al input que tiene debajo. */ .search-hint { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: flex; gap: 3px; font-size: var(--ft-fs-xs); color: var(--ft-text-faint); pointer-events: none; } .search-hint kbd { min-width: 18px; padding: 1px 4px; font-family: inherit; font-size: var(--ft-fs-xs); text-align: center; background: var(--ft-surface-hover); border: 1px solid var(--ft-border); border-radius: 5px; } /* -------------------------------------------------------------------------- Cuerpo: sidebar + contenido -------------------------------------------------------------------------- */ .app-body { display: flex; flex: 1; min-height: 0; gap: 0; } .sidebar { display: flex; flex-direction: column; flex-shrink: 0; width: var(--ft-sidebar-w); padding: 0 12px 12px; overflow: hidden auto; scrollbar-width: thin; transition: width var(--ft-transition); } .app-main { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 0 12px 12px 0; } /* Alertas a nivel panel: hermano de #view-content, no su contenedor — ver el comentario en Home/view/index.php, donde está el bug que motivó separarlos. `:empty` lo colapsa del todo para que no deje un hueco cuando no hay nada que mostrar (que es casi siempre). */ .app-alerts { margin-bottom: 10px; } .app-alerts:empty { display: none; } /* La tarjeta blanca del contenido. `overflow-y: auto` acá y no en el body es lo que hace que la cabecera y el sidebar queden fijos mientras la vista scrollea. */ #view-content { flex: 1; min-height: 0; padding: 18px 20px; overflow: hidden auto; background: var(--ft-surface); border: 1px solid var(--ft-border); border-radius: var(--ft-radius-lg); transition: background var(--ft-transition), border-color var(--ft-transition); } /* -------------------------------------------------------------------------- Sidebar colapsado Un solo modificador en gobierna el ancho de la columna de la cabecera Y el del sidebar, para que las dos sigan alineadas. Los textos se ocultan con `display: none` (no con width:0) para que no dejen huecos invisibles que capturen clicks. -------------------------------------------------------------------------- */ body.sidebar-collapsed .app-header-brand, body.sidebar-collapsed .sidebar { width: var(--ft-sidebar-w-collapsed); } /* Marca + botón de colapso conviven en el riel: 26 + 34 + 6 de gap = 66px de contenido dentro de los 84px del riel, que es de dónde sale ese ancho. */ body.sidebar-collapsed .app-header-brand { justify-content: center; gap: 6px; padding: 0 8px; } body.sidebar-collapsed .brand { gap: 0; display: none; } /* En el riel sólo entra el isotipo. */ body.sidebar-collapsed .brand-iso { display: block; } /** * Qué se oculta al colapsar. * * `.sidebar-toggle` NO está en esta lista, y es a propósito: al principio sí * lo estaba y el resultado era un callejón sin salida — colapsabas el sidebar * y desaparecía el único control capaz de volver a expandirlo, así que la * única forma de recuperarlo era borrar localStorage a mano. Encontrado * mirando la captura del estado colapsado en el navegador. * * `.nav-soon` (el "Pronto" de los módulos futuros) tampoco estaba y sí tiene * que estar: al quedar visible ocupaba el ancho del riel y empujaba los iconos * fuera del centro. */ body.sidebar-collapsed .brand-full, body.sidebar-collapsed .nav-label, body.sidebar-collapsed .nav-badge, body.sidebar-collapsed .nav-caret, body.sidebar-collapsed .nav-soon, body.sidebar-collapsed .nav-submenu, body.sidebar-collapsed .workspace-label, body.sidebar-collapsed .workspace-caret, body.sidebar-collapsed .sidebar-widgets, body.sidebar-collapsed .theme-switch-label, body.sidebar-collapsed .nav-title { display: none; } body.sidebar-collapsed .nav-link, body.sidebar-collapsed .workspace { justify-content: center; padding-left: 0; padding-right: 0; } body.sidebar-collapsed .theme-switch { justify-content: center; } /* -------------------------------------------------------------------------- Responsive Por debajo de 1024px el sidebar deja de ocupar espacio y pasa a ser un panel deslizante sobre el contenido, con su propio backdrop. Es el mismo marcado: sólo cambia el posicionamiento, así no hay un segundo menú móvil que mantener en paralelo. -------------------------------------------------------------------------- */ .sidebar-backdrop { position: fixed; inset: 0; z-index: 40; background: var(--ft-overlay); opacity: 0; visibility: hidden; transition: opacity var(--ft-transition), visibility var(--ft-transition); } /* Botón de menú: sólo existe por debajo del breakpoint del sidebar fijo. Se controla acá y no con un `style` inline en el PHP — ver el comentario en partials/topbar.php. El selector lleva LAS DOS clases (`.icon-button.sidebar-open-btn`, 0-2-0) y no sólo `.sidebar-open-btn` (0-1-0) a propósito: el botón también es `.icon-button`, que en sidebar.css declara `display: grid` con la misma especificidad y —al cargar esa hoja después de ésta— ganaba por orden. El resultado era una hamburguesa visible también en escritorio. Empatar por especificidad en vez de depender del orden de los archivos deja la regla a salvo de que mañana se reordene la cascada en webpack.config.tenant.js. */ .icon-button.sidebar-open-btn { display: none; } @media (max-width: 1024px) { .icon-button.sidebar-open-btn { display: grid; } /* (El shell ya está a ras de la ventana en la regla base — antes esta media query lo forzaba sólo en pantallas chicas.) */ .app-header-brand { width: auto; padding-right: 4px; } .sidebar { position: absolute; top: 0; bottom: 0; left: 0; z-index: 50; width: var(--ft-sidebar-w); padding-top: 12px; background: var(--ft-shell); border-right: 1px solid var(--ft-border); transform: translateX(-100%); transition: transform var(--ft-transition); } body.sidebar-open .sidebar { transform: translateX(0); } body.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; } .app-main { padding: 0 12px 12px; } /* En móvil el colapso no aplica: el sidebar ya está fuera de pantalla. */ body.sidebar-collapsed .sidebar { width: var(--ft-sidebar-w); } body.sidebar-collapsed .nav-label, body.sidebar-collapsed .nav-badge, body.sidebar-collapsed .workspace-label, body.sidebar-collapsed .sidebar-widgets, body.sidebar-collapsed .theme-switch-label { display: revert; } /* El logotipo completo vuelve (y el isotipo se va) aunque haya quedado `sidebar-collapsed` guardado de una sesión en escritorio. */ body.sidebar-collapsed .brand-full { display: flex; } body.sidebar-collapsed .brand-iso { display: none; } body.sidebar-collapsed .nav-link, body.sidebar-collapsed .workspace { justify-content: flex-start; padding-left: 12px; padding-right: 12px; } } @media (max-width: 720px) { .search { max-width: none; } .search-hint { display: none; } #view-content { padding: 20px 16px 24px; } } /** * Cabecera en pantallas angostas. * * Medido en el navegador: a 390px el menú de usuario quedaba 167px FUERA de la * ventana, así que en un teléfono no había manera de cerrar sesión ni de * cambiar la contraseña — las dos cuelgan de ahí. La cabecera tenía que entrar * marca + nombre + colapso + hamburguesa + buscador + tres acciones + chip de * usuario, que no da ni de lejos. * * Se recorta por prioridad, dejando siempre lo que no tiene otro camino: * - el nombre de la marca (queda el isotipo, que ya identifica), * - el botón de colapsar (en móvil el sidebar es deslizante, no colapsable: * ese control no hace nada acá), * - las acciones `is-optional` (crear y archivos). * Se conservan la hamburguesa, el buscador, la campana y el menú de usuario. */ @media (max-width: 620px) { .app-header { gap: 8px; padding-right: 10px; } .app-header-brand { padding: 0 2px 0 12px; } /* Header angosto: el logotipo completo se cambia por el isotipo. Las variantes con `body.sidebar-collapsed` van explícitas porque esa regla tiene más especificidad que un selector de clase suelto: sin repetirlas acá, un `sidebar-collapsed` guardado en localStorage volvería a mostrar el logotipo largo justo donde no entra. */ .brand-full, body.sidebar-collapsed .brand-full, .app-header-brand .sidebar-toggle, .app-header-actions .icon-button.is-optional { display: none; } .brand-iso, body.sidebar-collapsed .brand-iso { display: block; } .app-header-actions { gap: 4px; } } .logo-collapsed{ display: none; } .sidebar-collapsed .logo-collapsed{ display: block; } /*!************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./source_assets/backoffice/css/sidebar.css ***! \************************************************************************************************************************/ /* ========================================================================== sidebar.css — selector de espacio de trabajo, navegación, tarjetas auxiliares y conmutador de tema. ========================================================================== */ /* -------------------------------------------------------------------------- Botón que colapsa/expande el sidebar (vive en la cabecera, junto a la marca) -------------------------------------------------------------------------- */ .sidebar-toggle, .icon-button { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; color: var(--ft-text-muted); background: transparent; border: 1px solid transparent; border-radius: var(--ft-radius-sm); transition: background var(--ft-transition), color var(--ft-transition), border-color var(--ft-transition); } .sidebar-toggle:hover, .icon-button:hover { color: var(--ft-text); background: var(--ft-surface-hover); } /* Botones de la cabecera: tienen borde propio, a diferencia del toggle. */ .app-header-actions .icon-button { position: relative; width: 36px; height: 36px; background: var(--ft-surface); border-color: var(--ft-border); } .app-header-actions .icon-button:hover { border-color: var(--ft-border-strong); } /* Punto de notificación. `box-shadow` en vez de `border` para que el aro tome el color del fondo real de la campana y siga funcionando al cambiar de tema, sin repetir el color acá. */ .icon-button .dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; background: var(--ft-danger); border-radius: 50%; box-shadow: 0 0 0 2px var(--ft-surface); } /* -------------------------------------------------------------------------- Usuario de la cabecera -------------------------------------------------------------------------- */ .user-chip { display: flex; align-items: center; text-align: left; gap: 10px; height: 40px; padding: 0 8px 0 6px; border-radius: var(--ft-radius); transition: background var(--ft-transition); } .user-chip:hover { background: var(--ft-surface-hover); } .user-chip-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .user-chip-name { font-size: var(--ft-fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-chip-mail { font-size: var(--ft-fs-sm); color: var(--ft-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 860px) { .user-chip-text { display: none; } } /* Menú desplegable del usuario */ .user-menu { position: relative; } .user-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 224px; padding: 6px; background: var(--ft-surface); border: 1px solid var(--ft-border); border-radius: var(--ft-radius); box-shadow: var(--ft-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--ft-transition), transform var(--ft-transition), visibility var(--ft-transition); } .user-menu-panel.show { opacity: 1; visibility: visible; transform: translateY(0); } .user-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; font-size: var(--ft-fs-md); color: var(--ft-text-soft); border-radius: var(--ft-radius-sm); transition: background var(--ft-transition), color var(--ft-transition); } .user-menu-item:hover { color: var(--ft-text); background: var(--ft-surface-hover); } .user-menu-item.is-danger { color: var(--ft-danger); } .user-menu-item.is-danger:hover { background: var(--ft-danger-soft); } .user-menu-separator { height: 1px; margin: 6px 4px; background: var(--ft-border); } /* -------------------------------------------------------------------------- Selector de espacio de trabajo (la empresa activa del tenant) -------------------------------------------------------------------------- */ .workspace { display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 12px; margin-bottom: 12px; color: var(--ft-text); border-radius: var(--ft-radius); transition: background var(--ft-transition); } .workspace:hover { background: var(--ft-surface-hover); } .workspace-icon { color: var(--ft-text-muted); } .sidebar-toggle svg, .workspace-icon svg, .nav-icon svg{ width: 20px; height: 20px; } .workspace-label { flex: 1; min-width: 0; font-size: var(--ft-fs-base); font-weight: 500; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .workspace-caret { color: var(--ft-text-faint); } /* -------------------------------------------------------------------------- Navegación -------------------------------------------------------------------------- */ .sidebar-nav { display: flex; flex-direction: column; gap: 2px; } .nav-title { padding: 14px 12px 6px; font-size: var(--ft-fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ft-text-faint); } .nav-link { display: flex; align-items: center; gap: 11px; width: 100%; height: 40px; padding: 0 12px; font-size: var(--ft-fs-base); color: var(--ft-text-soft); border-radius: var(--ft-radius); transition: background var(--ft-transition), color var(--ft-transition); } .nav-link:hover { color: var(--ft-text); background: var(--ft-surface-hover); } /* Activo: fondo blanco + borde, o sea la misma "elevación" que las tarjetas del contenido — así el ítem activo se lee como la superficie que está abierta a la derecha, no como un simple resaltado de color. */ .nav-link.is-active { color: var(--ft-text); font-weight: 500; background: var(--ft-surface); border: 1px solid var(--ft-border); box-shadow: var(--ft-shadow-sm); } .nav-link.is-active .nav-icon { color: var(--ft-brand); } .nav-icon { color: var(--ft-text-muted); transition: color var(--ft-transition); } .nav-label { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-badge { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: var(--ft-fs-xs); font-weight: 600; color: var(--ft-text-soft); background: var(--ft-surface-active); border-radius: var(--ft-radius-pill); } .nav-link.is-active .nav-badge { color: var(--ft-brand); background: var(--ft-brand-soft); } /* -------------------------------------------------------------------------- Acordeón (Punto de venta → Configuración/Caja/Operaciones, 2026-08-20) `.nav-group-toggle` es un `.nav-link` más (mismos estilos base: alto, tipografía, hover) — sólo se le agrega la flecha a la derecha (`.nav-caret`) y NO tiene `data-option` (no navega, sólo abre/cierra el submenú, ver `panel.js::_bind_nav_groups()`). El submenú colapsa con `max-height` (no `display:none`/`height:auto`): así la apertura/cierre se puede animar con una transición CSS común — `height: auto` no es animable de forma nativa, `max-height` con un techo generoso (más que suficiente para 3 ítems cortos) sí. `overflow: hidden` es lo que efectivamente "esconde" el contenido mientras `max-height` está en 0, no al revés. -------------------------------------------------------------------------- */ .nav-group-toggle { cursor: pointer; } .nav-caret { flex-shrink: 0; color: var(--ft-text-faint); transition: transform var(--ft-transition); } .nav-group.is-open .nav-caret { transform: rotate(180deg); } .nav-submenu { max-height: 0; overflow: hidden; transition: max-height var(--ft-transition); } .nav-group.is-open .nav-submenu { max-height: 200px; } /* Sub-ítem indentado, SIN ícono propio (a diferencia del resto de `.nav-link`) — el sangrado es lo que comunica la jerarquía, no hace falta repetir un ícono genérico al lado de cada uno. El padding-left iguala dónde arranca el TEXTO de los `.nav-link` de nivel superior (12px de padding + 18px de ícono + 11px de gap ≈ 41px), para que quede alineado visualmente con "Punto de venta" de arriba. */ .nav-link-sub { height: 36px; padding-left: 41px; font-size: var(--ft-fs-md); } /* -------------------------------------------------------------------------- Flyout de acordeón con el sidebar COLAPSADO (2026-08-20) Con el sidebar colapsado, `.nav-submenu` queda en `display: none` sin excepción (ver layout.css) — el acordeón vertical no tiene dónde crecer en un riel de sólo íconos. En su lugar, al pasar el cursor sobre un `.nav-group` colapsado se despliega este panel flotante con las mismas sub-opciones (ver `panel.js::_bind_collapsed_flyout()`), inspirado en la referencia que mandó Luis: ícono + título arriba, lista de opciones con guión abajo. Se arma y posiciona enteramente en JS, igual que `.table-menu-dropdown- portal` (ver components.css/ui.js): se cuelga de ``, no de `.sidebar`, así que el `overflow: hidden auto` de `.sidebar` (necesario para el scroll vertical del riel) nunca lo recorta — un descendiente `position: fixed` no responde al overflow de un ancestro que no sea su "containing block", y `` nunca lo es. No hizo falta tocar ninguna propiedad de overflow existente. -------------------------------------------------------------------------- */ .nav-flyout { position: fixed; z-index: 1150; /* mismo nivel que .table-menu-dropdown-portal, ver components.css */ min-width: 220px; padding: 14px 6px 8px; background: var(--ft-surface); border: 1px solid var(--ft-border); border-radius: var(--ft-radius-lg); box-shadow: var(--ft-shadow-lg); opacity: 0; transform: translateX(-4px); transition: opacity var(--ft-transition), transform var(--ft-transition); } .nav-flyout.show { opacity: 1; transform: translateX(0); } .nav-flyout-head { display: flex; align-items: center; gap: 10px; padding: 0 10px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--ft-border); } .nav-flyout-icon { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; color: var(--ft-brand); background: var(--ft-brand-soft); border-radius: var(--ft-radius-sm); } .nav-flyout-icon svg { width: 18px; height: 18px; } .nav-flyout-title { font-size: var(--ft-fs-lg); font-weight: 600; color: var(--ft-text); white-space: nowrap; } .nav-flyout-list { display: flex; flex-direction: column; gap: 1px; } .nav-flyout-link { position: relative; display: block; padding: 9px 14px 9px 22px; font-size: var(--ft-fs-md); color: var(--ft-text-soft); white-space: nowrap; border-radius: var(--ft-radius-sm); transition: background var(--ft-transition), color var(--ft-transition); } /* El guión de la referencia visual sale de `content`, no de un caracter metido en el texto del link — así el label sigue siendo el nombre de la opción solo, sin nada que limpiar si se reutiliza en otro lado. */ .nav-flyout-link::before { content: "\2013"; position: absolute; left: 10px; color: var(--ft-text-faint); } .nav-flyout-link:hover { color: var(--ft-text); background: var(--ft-surface-hover); } /* Ítems que todavía no tienen módulo: se ven, para que el panel comunique a dónde va, pero no simulan funcionar. El cursor y la opacidad lo dicen antes de que el usuario haga click. */ .nav-link.is-soon { cursor: default; opacity: 0.55; } .nav-link.is-soon:hover { background: transparent; } .nav-soon { font-size: var(--ft-fs-xs); font-weight: 500; color: var(--ft-text-faint); } /* -------------------------------------------------------------------------- Tarjetas auxiliares del sidebar -------------------------------------------------------------------------- */ .sidebar-widgets { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 18px; } .side-card { padding: 14px; background: var(--ft-surface); border: 1px solid var(--ft-border); border-radius: var(--ft-radius-lg); box-shadow: var(--ft-shadow-sm); } .side-card-title { font-size: var(--ft-fs-md); font-weight: 600; } .side-card-text { margin-top: 2px; font-size: var(--ft-fs-sm); color: var(--ft-text-muted); } .side-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; } /* Progreso del onboarding: un anillo hecho con conic-gradient, sin SVG ni imagen. El porcentaje entra por la custom property --value desde el PHP. */ .progress-ring { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--ft-brand) calc(var(--value, 0) * 1%), var(--ft-surface-active) 0); } .progress-ring::after { content: ""; width: 14px; height: 14px; background: var(--ft-surface); border-radius: 50%; } .progress-label { display: flex; align-items: center; gap: 7px; font-size: var(--ft-fs-sm); color: var(--ft-text-muted); } /* -------------------------------------------------------------------------- Conmutador de tema (pie del sidebar) -------------------------------------------------------------------------- */ .sidebar-footer { padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--ft-border); } .theme-switch { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px; color: var(--ft-text-soft); border-radius: var(--ft-radius); cursor: pointer; transition: background var(--ft-transition); } .theme-switch:hover { background: var(--ft-surface-hover); } .theme-switch-label { flex: 1; font-size: var(--ft-fs-base); text-align: left; } /* El componente del switch (.switch-input / .switch) se mudó a forms.css el 2026-08-13: dejó de ser exclusivo del sidebar cuando el login pasó a usarlo para "Recordarme". Acá quedan sólo las reglas del contenedor (.theme-switch), que sí son propias de esta barra. */ .sidebar-collapsed .sidebar-footer{ display: none; } /* -------------------------------------------------------------------------- Sin conexión (bug_fix `pwa_offline_navigation_fallback`, 2026-08-24) -------------------------------------------------------------------------- Sin servidor, la única opción del panel que sigue sirviendo para algo es la Caja: todo lo demás consulta datos que sólo el servidor tiene. Se atenúan igual que los ítems "próximamente" (`.is-soon`, arriba) — mismo lenguaje visual para el mismo mensaje: "esto está, pero ahora no". NO se bloquea el click a propósito. Un ítem que no responde se lee como que la app se colgó; clickeándolo, en cambio, aparece la pantalla que EXPLICA qué pasa y ofrece ir a la Caja (ver `Panel._offline_markup()`). La clase la pone el router con lo que realmente devolvió la red, no con `navigator.onLine` — ver `Panel._paint_connection()`. */ body.is-offline .nav-link[data-option]:not([data-option="pos"]) { opacity: 0.5; } /*!***************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./source_assets/backoffice/css/components.css ***! \***************************************************************************************************************************/ /* ========================================================================== components.css — piezas del área de contenido: cabecera de vista, tarjetas de métrica, grilla de items, tablas, botones, avatares y estados vacíos. ========================================================================== */ /* -------------------------------------------------------------------------- Cabecera de vista -------------------------------------------------------------------------- */ .view-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 5px; border-bottom: 1px solid var(--ft-border); padding-bottom: 10px; } .view-head.no-border{ border: none!important; } .view-title { font-size: var(--ft-fs-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; } .view-subtitle { margin-top: 4px; font-size: var(--ft-fs-md); color: var(--ft-text-muted); } .view-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 30px 0 16px; } .section-title { font-size: var(--ft-fs-xl); font-weight: 600; letter-spacing: -0.02em; } .section-subtitle { margin-top: 2px; font-size: var(--ft-fs-md); color: var(--ft-text-muted); } /* Grupo de flechas ‹ › del diseño */ .stepper { display: flex; align-items: center; gap: 6px; } .stepper .icon-button { width: 36px; height: 36px; background: var(--ft-surface); border-color: var(--ft-border); } .stepper .icon-button:hover { border-color: var(--ft-border-strong); } /* -------------------------------------------------------------------------- Botones -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; font-size: var(--ft-fs-md); font-weight: 500; white-space: nowrap; border: 1px solid transparent; border-radius: var(--ft-radius); transition: background var(--ft-transition), border-color var(--ft-transition), color var(--ft-transition), opacity var(--ft-transition); } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary { color: var(--ft-brand-contrast); background: var(--ft-brand); border-color: var(--ft-brand); } .btn-primary:hover:not(:disabled) { background: var(--ft-brand-strong); border-color: var(--ft-brand-strong); } .btn-secondary { color: var(--ft-text-soft); background: var(--ft-surface); border-color: var(--ft-border); } .btn-secondary:hover:not(:disabled) { color: var(--ft-text); background: var(--ft-surface-hover); border-color: var(--ft-border-strong); } .btn-ghost { color: var(--ft-text-soft); background: transparent; } .btn-ghost:hover:not(:disabled) { color: var(--ft-text); background: var(--ft-surface-hover); } .btn-danger { color: #ffffff; background: var(--ft-danger); border-color: var(--ft-danger); } .btn-danger:hover:not(:disabled) { opacity: 0.9; } .btn-sm { height: 32px; padding: 0 12px; font-size: var(--ft-fs-sm); } .btn-block { width: 100%; } /* Estado "cargando" de un botón: el ancho se congela en JS antes de vaciarlo (ui.js::blockButton) para que la fila no salte cuando el texto se reemplaza por el spinner. */ .btn.is-loading { pointer-events: none; opacity: 0.75; } /* -------------------------------------------------------------------------- Tarjetas de métrica (los 4 recuadros de arriba) -------------------------------------------------------------------------- */ .stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1180px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .stat-grid { grid-template-columns: minmax(0, 1fr); } } /* Variante de `.stat-grid` para secciones con una cantidad de tarjetas que NO es siempre 4 (hoy: "Punto de venta", con 3) — auto-fit en vez de un `repeat(4, ...)` fijo, así ni deja una columna vacía con menos tarjetas ni hay que inventar una cuarta tarjeta sólo para completar la grilla. Refinamiento `dashboard_overview_update`, 2026-08-23. */ .stat-grid.stat-grid--auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .stat-card { position: relative; padding: 16px 18px 18px; background: var(--ft-surface); border: 1px solid var(--ft-border); border-radius: var(--ft-radius-lg); transition: border-color var(--ft-transition), box-shadow var(--ft-transition); } .stat-card:hover { border-color: var(--ft-border-strong); box-shadow: var(--ft-shadow); } .stat-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .stat-label { font-size: var(--ft-fs-md); color: var(--ft-text-muted); } .stat-link { color: var(--ft-text-faint); transition: color var(--ft-transition); } .stat-card:hover .stat-link { color: var(--ft-text-soft); } .stat-value { margin-top: 14px; font-size: var(--ft-fs-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; } .stat-value .unit { font-size: var(--ft-fs-lg); font-weight: 500; color: var(--ft-text-muted); } .stat-foot { margin-top: 6px; font-size: var(--ft-fs-sm); color: var(--ft-text-muted); } .stat-foot.is-up { color: var(--ft-success); } .stat-foot.is-down { color: var(--ft-danger); } /* Mini gráfico de barras de la esquina. Son con altura porcentual — ni SVG ni canvas: es decorativo y tiene que repintarse con el tema, y así hereda el color de la variable sin ninguna lógica extra. */ .stat-spark { position: absolute; right: 18px; bottom: 18px; display: flex; align-items: flex-end; gap: 3px; height: 26px; opacity: 0.75; } .stat-spark span { width: 4px; background: var(--ft-border-strong); border-radius: 2px; } .stat-card:hover .stat-spark span { background: var(--ft-brand); opacity: 0.55; } /* -------------------------------------------------------------------------- Tarjetas de entidad (la fila de "columnas" del diseño) -------------------------------------------------------------------------- */ .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .entity-card { display: flex; align-items: center; gap: 11px; padding: 12px 14px; background: var(--ft-surface); border: 1px solid var(--ft-border); border-radius: var(--ft-radius-lg); text-align: left; transition: border-color var(--ft-transition), box-shadow var(--ft-transition); } .entity-card:hover { border-color: var(--ft-border-strong); box-shadow: var(--ft-shadow); } .entity-text { flex: 1; min-width: 0; } .entity-name { font-size: var(--ft-fs-base); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entity-meta { font-size: var(--ft-fs-sm); color: var(--ft-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entity-action { color: var(--ft-text-faint); } /* -------------------------------------------------------------------------- Avatar Sin foto muestra iniciales sobre un fondo tomado de una paleta fija. El índice lo calcula el PHP a partir del nombre, así que la misma persona siempre cae en el mismo color entre recargas — un color aleatorio en cada render haría el listado ilegible de un vistazo. -------------------------------------------------------------------------- */ .avatar { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; font-size: var(--ft-fs-sm); font-weight: 600; letter-spacing: 0.02em; color: var(--ft-text); background: var(--ft-surface-active); border-radius: 50%; overflow: hidden; user-select: none; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-sm { width: 28px; height: 28px; font-size: var(--ft-fs-xs); } .avatar-lg { width: 44px; height: 44px; font-size: var(--ft-fs-base); } .avatar.tone-1 { background: #dce7ff; color: #1f4fbf; } .avatar.tone-2 { background: #ffe6cc; color: #a35a10; } .avatar.tone-3 { background: #d9f2e1; color: #17713d; } .avatar.tone-4 { background: #f3ddf7; color: #7a2f8c; } .avatar.tone-5 { background: #ffe0e0; color: #b23434; } .avatar.tone-6 { background: #d7f0f5; color: #16697f; } :root[data-theme="dark"] .avatar.tone-1 { background: #1e2f52; color: #9dbaff; } :root[data-theme="dark"] .avatar.tone-2 { background: #4a3418; color: #f2c185; } :root[data-theme="dark"] .avatar.tone-3 { background: #1c3d29; color: #8ce0ab; } :root[data-theme="dark"] .avatar.tone-4 { background: #402045; color: #e0aeea; } :root[data-theme="dark"] .avatar.tone-5 { background: #4a2626; color: #f5a3a3; } :root[data-theme="dark"] .avatar.tone-6 { background: #17383f; color: #90d5e3; } /* -------------------------------------------------------------------------- Insignias -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; font-size: var(--ft-fs-sm); font-weight: 500; border-radius: var(--ft-radius-pill); } .badge-neutral { color: var(--ft-text-soft); background: var(--ft-surface-active); } .badge-success { color: var(--ft-success); background: var(--ft-success-soft); } .badge-danger { color: var(--ft-danger); background: var(--ft-danger-soft); } .badge-warning { color: var(--ft-warning); background: var(--ft-warning-soft); } .badge-info { color: var(--ft-info); background: var(--ft-info-soft); } /* -------------------------------------------------------------------------- Barra de lista (buscador + paginación) — PATRÓN ESTÁNDAR desde 2026-08-20 (ver factuser-listados-toolbar en la memoria del proyecto). Referencia visual de Luis: buscador a la izquierda, contador + anterior/ siguiente/actualizar a la derecha, todo en una sola franja arriba de la tabla. Se adaptó a los tokens propios del panel (`--ft-*`) en vez de clonar la paleta oscura del mockup — mismo criterio que el resto del panel con cualquier referencia visual externa. El buscador reusa el componente `.search`/`.search-icon`/`.search-input` que YA existía para el buscador global de la cabecera (topbar.php) — acá sin `.search-hint` (el "⌘K" es un atajo de ESE buscador puntual, no de cualquier buscador de lista) y sin el `max-width: 320px` que tenía ahí (ver la regla `.list-toolbar .search` más abajo): en una franja propia tiene que estirarse todo lo que el layout le deje. La lógica vive en `list-toolbar.js` (`ListToolbar`), instanciada una vez por vista con tabla (Clientes/Empresas/Documentos/Productos de POS). Desde 2026-08-20 (refinamiento `search_trigger_optimization`) la búsqueda es 100% SERVER-SIDE: Enter en el buscador (nunca "en vivo" mientras se tipea) dispara un fetch al Stored Procedure correspondiente (`sp_*_listing` con `query`/`page`, ver factuser-listados-toolbar en la memoria del proyecto) y el `` se reemplaza con el HTML que devuelve el servidor — ningún filtrado ni ocultamiento de filas ocurre en el cliente. -------------------------------------------------------------------------- */ .list-toolbar { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 2px; margin-bottom: 14px; background: var(--ft-surface); } .list-toolbar .search { max-width: none; } /* -------------------------------------------------------------------------- Rango de fechas del buscador (2026-08-22, refinamiento `returns_list_and_date_filter`, pasado a Flatpickr en modo rango el mismo día — refinamiento `returns_list_with_flatpickr_range`, UN SOLO input, y sin ícono decorativo + botón "×" propio el mismo día, refinamiento `returns_date_filter_cleanup`) — envuelve `.search` + el input de fecha opcional (ver list-toolbar.php, `$toolbarDateRange`) en un solo contenedor con `flex: 1`, así entre los dos ocupan el espacio libre de la izquierda y `.list-pagination` (que no crece) queda empujada contra el borde derecho — SIN esta envoltura, `.search` solo (con su propio `flex: 1`) se comería todo el espacio y el filtro de fecha terminaría pegado contra la paginación, lejos del buscador. -------------------------------------------------------------------------- */ .list-filters { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; } /* `.input-clearable`/`.clear-date` son el componente GENÉRICO de forms.css (el mismo que ya usan las fechas de timbrado de Empresas) — acá sólo se fija el ANCHO propio (el rango de fechas no tiene que estirarse como el buscador de texto); el posicionamiento del botón "×" y el padding-right del input ya vienen de esa clase compartida, no se repiten acá. */ .list-date-range { flex-shrink: 0; width: 230px; } .list-date-input { width: 100%; height: 38px; padding: 0 10px; font-size: var(--ft-fs-sm); cursor: pointer; } /* Filtro de estado (2026-08-22, refinamiento `pos_cash_sessions_history_and_force_close`) — `