:root { /* Paleta EON real (12-ago rediseño): marca sacada de expresooronegro.com y "Paleta EON.png" — azul + rojo de la flota sobre carbón oscuro, no el navy/rojo apagado del diseño anterior. Los NOMBRES de variable se mantienen (--navy/--violet/etc.) a propósito para no tener que renombrar ~40 usos en este archivo — son alias de rol de color, no literalmente "navy" ni "violeta" ya. --violet ahora es el celeste de acento de marca. */ --navy: #0b53a2; --navy-dark: #062f5c; --navy-mid: #1668c4; --red: #e30613; --red-soft: #fdeaea; --ink: #1a1d24; --ink-soft: #5b6270; --paper: #f4f5f9; --card: #ffffff; --line: #e7e9ee; --good: #16a34a; --good-soft: #eafaf0; --warn: #d97706; --warn-soft: #fef6e9; --crit: #e30613; --crit-soft: #fdeaea; --violet: #0891a8; --violet-soft: #e3f6fa; --navy-soft: #e8f1fb; --sidebar-bg: #34373f; --sidebar-ink: #c9ccd3; --sidebar-ink-dim: #83868f; --sidebar-active: var(--navy); /* Identidad por empresa del grupo (topbar, "Empresas del grupo", filas con company) — familia separada de los colores de módulo/estado de arriba. Giampaoletti reusa el navy de marca (matriz); Expreso Oro Negro reusa el rojo (le da nombre al proyecto, EON); Deseado y Ruta Paq tienen color propio, no inventado al azar: teal oceánico para Deseado (costa patagónica), rosa/berenjena para Ruta Paq. */ --emp-gg: var(--navy); --emp-gg-soft: var(--navy-soft); --emp-eon: var(--red); --emp-eon-soft: var(--crit-soft); --emp-de: #0e7490; --emp-de-soft: #e6f5f7; --emp-rp: #9d174d; --emp-rp-soft: #fbe7ef; /* 18px (antes 12px) — cards más redondeadas, look "El Carrito". Botones e inputs usan su propio radio más chico (10px), ver más abajo. */ --radius: 18px; --radius-sm: 10px; --shadow: 0 2px 10px rgba(20,20,24,0.06); } /* Tema explícito elegido a mano (selector en la topbar, ver app.js aplicarTema()) — dos opciones nomás, sin "Sistema": en la práctica no se distinguía de "Claro" salvo que la usuaria cambiara el modo oscuro de Windows, y eso nunca pasa (decisión de la usuaria, 22 jul 2026). */ [data-theme="oscuro"] { --ink: #e7ebf0; --ink-soft: #a7b3c2; --paper: #14161b; --card: #1c1f26; --line: #2b2e36; --good-soft: #10281c; --warn-soft: #2e2210; --crit-soft: #33161a; --violet-soft: #123138; --navy-soft: #10233d; --emp-de-soft: #0d2a30; --emp-rp-soft: #35111f; --sidebar-bg: #0f1114; --sidebar-active: var(--navy-mid); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Plus Jakarta Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--paper); color: var(--ink); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } .oculto { display: none !important; } .vista { min-height: 100vh; } /* ---------- Wordmark GRUPO GIAMPAOLETTI ---------- */ .logo-mark { font-size: 0.95rem; font-weight: 900; letter-spacing: -0.3px; color: var(--navy); } .logo-mark span { color: var(--red); } /* ---------- Login (13-ago: estilo "El Carrito" — orbe + glass card sobre fondo oscuro con mesh/grid — portado de el-carrito/frontend/Login.tsx, paleta propia de EON en vez de la violeta de la referencia). ---------- */ .lg { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--ink); position: relative; overflow: hidden; padding: 32px 20px; } .lg-mesh { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 55% at 50% 30%, rgba(11,83,162,.28) 0%, transparent 60%), radial-gradient(ellipse 45% 40% at 85% 80%, rgba(8,145,168,.14) 0%, transparent 55%), radial-gradient(ellipse 40% 35% at 10% 70%, rgba(227,6,19,.12) 0%, transparent 50%); } .lg-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 30%, transparent 100%); } .lg-col { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; animation: lgIn .5s ease both; } @keyframes lgIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes lgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes lgPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(227,6,19,.5); } 50% { box-shadow: 0 0 0 12px rgba(227,6,19,0); } } @keyframes lgHalo { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .15; transform: scale(1.3); } } .lg-orb-wrap { position: relative; margin-bottom: 28px; animation: lgFloat 5s ease-in-out infinite; } .lg-orb-halo { position: absolute; inset: -22px; border-radius: 50%; background: conic-gradient(from 0deg, var(--navy), var(--red), var(--violet), var(--navy)); opacity: .5; filter: blur(20px); animation: lgHalo 4s ease-in-out infinite; } .lg-orb { width: 96px; height: 96px; border-radius: 26px; position: relative; background: conic-gradient(from 0deg, var(--navy), var(--red), var(--violet), var(--navy)); display: flex; align-items: center; justify-content: center; animation: eon-orb-spin 9s linear infinite; box-shadow: 0 0 60px rgba(11,83,162,.4), 0 0 120px rgba(11,83,162,.15), 0 20px 48px rgba(0,0,0,.6); } .lg-orb::before { content: ''; position: absolute; inset: 5px; border-radius: 21px; background: var(--ink); } .lg-orb-inner { position: relative; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle, var(--red) 0%, var(--navy) 100%); box-shadow: 0 0 22px rgba(227,6,19,.8), 0 0 44px rgba(11,83,162,.5); animation: lgPulse 2.4s ease-in-out infinite; } .lg-live { position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; background: #1d6b52; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; border: 2px solid var(--ink); white-space: nowrap; } .lg-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #7fffd4; box-shadow: 0 0 0 2px rgba(127,255,212,.3); } .lg-brand { text-align: center; margin-bottom: 32px; } .lg-brand-name { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -.05em; line-height: 1.15; margin-bottom: 5px; } .lg-brand-sep { color: var(--red); } .lg-brand-sub { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.35); letter-spacing: .04em; } .lg-card { width: 100%; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 32px 30px 28px; backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); } .lg-hd { margin-bottom: 24px; } .lg-hd-eyebrow { display: flex; align-items: center; gap: 7px; font-size: 9.5px; font-weight: 800; color: var(--violet); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 7px; } .lg-hd-eyebrow-line { width: 16px; height: 2px; background: var(--violet); border-radius: 1px; opacity: .8; } .lg-hd-title { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.04em; line-height: 1.2; margin-bottom: 4px; } .lg-hd-sub { font-size: 12.5px; color: rgba(255,255,255,.35); font-weight: 500; } .lg-form { display: flex; flex-direction: column; gap: 14px; } .lg-field { display: flex; flex-direction: column; gap: 5px; } .lg-lbl { font-size: 10px; font-weight: 800; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .1em; } .lg-inp-wrap { position: relative; } .lg-inp-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.25); display: flex; align-items: center; pointer-events: none; } .lg-inp { width: 100%; padding: 11px 38px 11px 37px; border-radius: 11px; font-size: 13px; outline: none; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); font-family: inherit; box-sizing: border-box; color: #fff; caret-color: var(--violet); transition: border-color .12s, background .12s, box-shadow .12s; } .lg-inp:focus { border-color: rgba(8,145,168,.6); background: rgba(255,255,255,.1); box-shadow: 0 0 0 3px rgba(8,145,168,.15); } .lg-inp::placeholder { color: rgba(255,255,255,.2); } .lg-inp:-webkit-autofill, .lg-inp:-webkit-autofill:focus { -webkit-text-fill-color: #fff; caret-color: var(--violet); transition: background-color 9999s ease-in-out 0s; box-shadow: 0 0 0 1000px rgba(255,255,255,.07) inset, 0 0 0 1px rgba(255,255,255,.1) inset; } .lg-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 4px; margin: 0; color: rgba(255,255,255,.4); display: flex; align-items: center; font-size: 1rem; line-height: 1; transition: color .12s; } .lg-eye:hover, .lg-eye.mostrando { color: rgba(255,255,255,.9); } .error { color: #ff9594; font-size: 12.5px; font-weight: 600; margin: 0; min-height: 0; } .error:not(:empty) { padding: 10px 14px; border-radius: 11px; background: rgba(226,75,74,.15); border: 1px solid rgba(226,75,74,.3); } .lg-btn { width: 100%; padding: 13px; border-radius: 12px; font-size: 14px; font-weight: 800; color: #fff; border: none; cursor: pointer; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); display: flex; align-items: center; justify-content: center; gap: 8px; transition: all .15s; font-family: inherit; letter-spacing: -.01em; box-shadow: 0 4px 20px rgba(11,83,162,.45), inset 0 1px 0 rgba(255,255,255,.15); margin-top: 4px; } .lg-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(11,83,162,.6), inset 0 1px 0 rgba(255,255,255,.15); } .lg-btn:active { transform: translateY(0); } .lg-footer { margin-top: 20px; font-size: 10.5px; color: rgba(255,255,255,.25); font-weight: 500; letter-spacing: .03em; text-align: center; } @media (max-width: 480px) { .lg-orb { width: 76px; height: 76px; border-radius: 20px; } .lg-orb::before { inset: 4px; border-radius: 16px; } .lg-orb-inner { width: 28px; height: 28px; } .lg-brand-name { font-size: 22px; } .lg-card { padding: 26px 22px 22px; } } /* ---------- App shell ---------- */ .app { display: grid; grid-template-columns: 248px 1fr 56px; min-height: 100vh; } .app.sidebar-colapsado { grid-template-columns: 0 1fr 56px; } .app.sidebar-colapsado .sidebar { display: none; } /* Con el menú oculto, el contenido usa todo el ancho liberado en vez de quedar centrado con el mismo límite de siempre — "pantalla completa" de verdad, no solo más aire vacío a los costados. */ .app.sidebar-colapsado .topbar-global, .app.sidebar-colapsado .main-content { max-width: none; } /* position:sticky + altura de viewport + scroll propio (3 sep 2026, reporte de Leila: "el menú debería poder scrollearse sin que se scrollee la página") — antes .sidebar era un ítem de grid sin altura propia, se estiraba junto con .main-content y se desplazaba entero al scrollear la página en vez de quedar fijo con su propia barra de scroll. */ .sidebar { background: var(--sidebar-bg); color: var(--sidebar-ink); display: flex; flex-direction: column; padding: 20px 14px; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .brand { display: flex; flex-direction: column; padding: 6px 10px 20px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); } .brand-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .brand .logo-mark { color: #fff; font-size: 0.92rem; } .brand .logo-mark span { color: #ef5750; } .brand .sub { font-size: 0.72rem; color: var(--sidebar-ink-dim); margin-top: 3px; letter-spacing: 0.2px; } .sidebar-toggle { background: none; border: none; color: var(--sidebar-ink-dim); cursor: pointer; padding: 5px; border-radius: 6px; flex-shrink: 0; } .sidebar-toggle svg { width: 18px; height: 18px; display: block; } .sidebar-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; } /* Botón "Mostrar menú": vive DENTRO del flujo de .main (no fixed) para que nunca quede desconectado del contenido, en cualquier ancho de pantalla. */ .main-topbar-menu { display: none; margin-bottom: 16px; } .app.sidebar-colapsado .main-topbar-menu { display: block; } #btn-abrir-sidebar { display: inline-flex; align-items: center; gap: 8px; background: var(--navy); color: #fff; border: none; border-radius: 8px; padding: 8px 14px; font-size: 0.82rem; font-weight: 700; font-family: inherit; cursor: pointer; } #btn-abrir-sidebar svg { width: 16px; height: 16px; } #btn-abrir-sidebar:hover { background: var(--navy-mid); } .sidebar-backdrop { display: none; } .sidebar-backdrop.oculto { display: none; } .nav-group { margin-top: 14px; } .nav-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sidebar-ink-dim); padding: 0 10px 6px; display: flex; align-items: center; justify-content: space-between; gap: 6px; cursor: pointer; user-select: none; } .nav-label:hover { color: #fff; } .nav-label .grupo-ico { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.9; margin-right: 6px; color: var(--grp-c, var(--sidebar-ink-dim)); } .nav-label .grupo-titulo { display: flex; align-items: center; flex: 1; min-width: 0; } .nav-label .chevron { width: 13px; height: 13px; flex-shrink: 0; transition: transform 0.15s ease; opacity: 0.75; } .nav-group.colapsado .nav-label .chevron { transform: rotate(-90deg); } .nav-group.colapsado .nav-item { display: none; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 0.86rem; font-weight: 600; cursor: pointer; color: var(--sidebar-ink); text-decoration: none; position: relative; background: none; border: none; width: 100%; text-align: left; font-family: inherit; } .nav-item .ico { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; } .nav-item:hover { background: rgba(255,255,255,0.07); color: #fff; } .nav-item.activo { background: var(--sidebar-active); color: #fff; } .nav-item.activo .ico { opacity: 1; } .nav-item .contador { margin-left: auto; background: rgba(255,255,255,0.12); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 1px 6px; border-radius: 20px; } .nav-item.activo .contador { background: var(--red); } .sidebar-footer { margin-top: auto; padding: 12px 10px 4px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--navy-mid); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; } .sidebar-footer .quien { font-size: 0.8rem; color: #fff; font-weight: 600; } .sidebar-footer .rol { font-size: 0.7rem; color: var(--sidebar-ink-dim); } /* grid-column fijo a propósito: cuando .sidebar pasa a display:none (menú oculto), deja de "ocupar" la 1ra columna del grid — sin esto, .main cae por auto-placement en esa columna ahora vacía (0px) en vez de en la de 1fr, y el contenido queda invisible aunque el HTML esté ahí. */ .main { display: flex; flex-direction: column; min-width: 0; grid-column: 2; } .page.oculto { display: none; } /* ---------- Barra lateral derecha (orbe IA, estilo "El Carrito") ---------- */ .rail { grid-column: 3; background: var(--sidebar-bg); display: flex; flex-direction: column; align-items: center; padding: 16px 0; gap: 10px; position: relative; z-index: 45; } .rail-label { font-size: 0.6rem; font-weight: 800; color: rgba(255,255,255,0.35); letter-spacing: 0.12em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; } .rail-divider { width: 18px; height: 1px; background: rgba(255,255,255,0.1); } /* ---------- Barra inferior mobile: atajos + orbe (estilo "El Carrito", 13-ago) — reemplaza al .rail en pantallas angostas, donde no hay lugar para una columna lateral. Los 4 slots son los mismos accesos rápidos que ya se eligen en Mi Perfil (misma fuente de datos, HOME_QUICK_CATALOG) — mantener presionado un slot lo abre para elegir otra página, igual que "El Carrito". ---------- */ /* z-index bajo (20) a propósito: tiene que quedar SIEMPRE por debajo de cualquier modal/drawer (30+) — si no, en mobile la barra tapa los botones del pie (Cancelar/Guardar) de todo modal abierto. Sigue por encima del contenido normal de página (sin z-index propio). */ .bn-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: var(--sidebar-bg); border-top: 1px solid rgba(255,255,255,0.08); padding-bottom: env(safe-area-inset-bottom, 0px); } .bn-inner { display: flex; align-items: stretch; height: 58px; } .bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: none; background: none; cursor: pointer; font-family: inherit; color: var(--sidebar-ink-dim); transition: color 0.12s; padding: 0; position: relative; -webkit-tap-highlight-color: transparent; } .bn-item.activo { color: #fff; } .bn-item svg { width: 20px; height: 20px; } .bn-item-lbl { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.01em; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bn-item-orb { justify-content: center; } .bn-item.bn-editing::after { content: ''; position: absolute; inset: 6px 10px; border-radius: 8px; border: 1.5px dashed rgba(255,255,255,0.4); animation: bn-pulse 1.2s ease-in-out infinite; } @keyframes bn-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @media (max-width: 880px) { .bn-bar { display: block; } .main-content { padding-bottom: 78px; } } /* Picker (bottom sheet) para elegir qué página va en un slot */ .bn-picker-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(10,18,28,0.5); display: flex; align-items: flex-end; } .bn-picker-overlay.oculto { display: none; } .bn-picker-sheet { width: 100%; background: var(--card); border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); max-height: 70vh; overflow-y: auto; } .bn-picker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .bn-picker-title { font-size: 0.9rem; font-weight: 800; } .bn-picker-hint { font-size: 0.72rem; color: var(--ink-soft); font-weight: 600; } .bn-picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .bn-picker-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 10px; border: none; cursor: pointer; background: var(--paper); color: var(--ink-soft); font-family: inherit; transition: background 0.12s, color 0.12s; } .bn-picker-item.activa { background: var(--navy-soft); color: var(--navy); } .bn-picker-item svg { width: 20px; height: 20px; } .bn-picker-item-lbl { font-size: 0.6rem; font-weight: 700; text-align: center; line-height: 1.2; } /* ---------- Topbar global (persistente en todas las páginas) ---------- */ .topbar-global { flex-shrink: 0; display: flex; align-items: center; gap: 14px; max-width: 1180px; width: 100%; margin: 0 auto; padding: 12px 34px; border-bottom: 1px solid var(--line); background: var(--card); } .tg-search { flex: 1; max-width: 340px; position: relative; } .tg-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-soft); pointer-events: none; } .tg-search input { width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px 8px 34px; font-size: 0.8rem; font-family: inherit; color: var(--ink); } .tg-search input:focus { outline: none; border-color: var(--navy); background: var(--card); box-shadow: 0 0 0 3px rgba(26,58,92,0.12); } .tg-search input::placeholder { color: var(--ink-soft); } .tg-kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--ink-soft); background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-family: ui-monospace, "SF Mono", Consolas, monospace; } /* Camión — carril largo con horizonte de montañas en paralaje (capa lejana más lenta y tenue) y sombra de contacto; recorre todo el ancho libre entre el buscador y la campana, no una cajita fija. */ .truck-lane { flex: 1; min-width: 160px; height: 42px; position: relative; overflow: hidden; border-radius: 9px; background: linear-gradient(var(--paper), var(--card)); border: 1px solid var(--line); } .truck-hills { position: absolute; left: 0; right: 0; bottom: 10px; height: 20px; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 16'%3E%3Cpath d='M0 16 L9 5 L16 10 L25 2 L33 11 L43 6 L52 13 L60 7 L70 14 L79 9 L90 16 Z' fill='%237e94ac'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 100px 20px; animation: eon-hills 46s linear infinite; } .truck-hills.back { bottom: 11px; height: 15px; opacity: 0.28; background-size: 145px 15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 12'%3E%3Cpath d='M0 12 L14 3 L27 9 L40 1 L55 8 L70 2 L85 10 L100 4 L115 9 L130 12 Z' fill='%237e94ac'/%3E%3C/svg%3E"); animation-duration: 70s; } .truck-road { position: absolute; left: 8px; right: 8px; bottom: 11px; height: 1px; background: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 11px); } .truck-drive { position: absolute; bottom: 5px; left: -92px; animation: eon-drive 24s linear infinite; cursor: default; } .truck-shadow { position: absolute; left: 6px; width: 68px; bottom: -2px; height: 4px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,0.18), transparent 72%); } .truck-bounce { display: block; animation: eon-bounce 0.42s ease-in-out infinite; } @keyframes eon-drive { 0% { left: -92px; } 100% { left: calc(100% + 12px); } } @keyframes eon-hills { from { background-position-x: 0; } to { background-position-x: -90px; } } @keyframes eon-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } } @media (prefers-reduced-motion: reduce) { .truck-drive { animation: none; left: 16px; } .truck-bounce { animation: none; } .truck-hills { animation: none; } } .tg-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Selector global de empresa (afecta Home/Asientos/Estado de Resultados/ Libro IVA Compras/Gasto por Centro de Costo/Retenciones) — reemplaza el toggle local que tenía cada pantalla, mismo criterio de altura/forma que .bell para que quede a tono en la topbar. .select-pill (3 sep 2026, reporte de Leila) generaliza este mismo look a cualquier otro select "de barra/filtro" del sistema (ej. sucursales en Solicitudes) — antes solo el de empresa tenía este estilo y el resto quedaba con el select nativo del navegador, sin el diseño del sistema. */ .tg-empresa-global select, .select-pill { height: 34px; max-width: 170px; border-radius: 9px; background: var(--paper); border: 1px solid var(--line); padding: 0 10px; font-size: 0.8rem; font-family: inherit; color: var(--ink); cursor: pointer; } .tg-empresa-global select:focus, .select-pill:focus { outline: none; border-color: var(--navy); } .tg-empresa-global select:hover, .select-pill:hover { border-color: var(--navy); } .bell-wrap { position: relative; } .bell { width: 34px; height: 34px; border-radius: 9px; background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-soft); position: relative; } .bell:hover { border-color: var(--navy); color: var(--navy); } .bell svg { width: 16px; height: 16px; } .bell .dot { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 2px solid var(--card); } .bell-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 340px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 64px rgba(10,18,28,0.22); display: none; overflow: hidden; z-index: 60; } .bell-wrap.open .bell-panel { display: block; } /* Anclado al ícono (right:0 relativo a .bell-wrap), un panel de 340px se sale de pantalla por izquierda en cualquier mobile angosto — el ícono nunca tiene 340px libres a su izquierda. En vez de perseguir la posición del ícono, en mobile el panel pasa a fixed con márgenes fijos al viewport, así queda completo sin importar qué campana (Tema o Notificaciones) lo abrió. */ @media (max-width: 640px) { .bell-panel { position: fixed; top: 60px; left: 12px; right: 12px; width: auto; max-height: calc(100vh - 84px); overflow-y: auto; } } .bell-hd { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 0.78rem; font-weight: 700; display: flex; justify-content: space-between; align-items: center; } .bell-hd span { font-weight: 700; color: var(--red); font-size: 0.72rem; } .bell-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; } .bell-item:last-child { border-bottom: none; } .bell-item:hover { background: var(--paper); } .bell-ic { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .bell-ic svg { width: 13px; height: 13px; } .bell-t { font-size: 0.78rem; font-weight: 600; line-height: 1.4; } .bell-s { font-size: 0.7rem; color: var(--ink-soft); margin-top: 1px; } .bell-foot { padding: 9px 14px; text-align: center; font-size: 0.76rem; font-weight: 700; color: var(--navy); cursor: pointer; border-top: 1px solid var(--line); } .bell-vacio { padding: 20px 14px; text-align: center; font-size: 0.78rem; color: var(--ink-soft); } .tg-user { display: flex; align-items: center; gap: 8px; padding: 5px 11px 5px 5px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); flex-shrink: 0; cursor: pointer; } .tg-user:hover { border-color: var(--red); } .tg-av { width: 25px; height: 25px; border-radius: 50%; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tg-user-name { font-size: 0.76rem; font-weight: 600; white-space: nowrap; } .main-content { flex: 1; padding: 26px 34px 60px; max-width: 1180px; margin: 0 auto; width: 100%; } /* El camión animado (.truck-lane, min-width:160px) no se achica — sumado a los 2 íconos + tg-user, desbordaba el topbar ~60px en mobile (confirmado: body.scrollWidth 451 vs. 390 de viewport en un iPhone 13 mini). Se oculta igual que .tg-search, y el nombre del usuario también (deja solo el avatar) para no seguir empujando el ancho. */ @media (max-width: 640px) { .tg-search, .truck-lane, .tg-user-name { display: none; } .topbar-global { justify-content: flex-end; padding-left: 16px; padding-right: 16px; } .tg-empresa-global select { max-width: 108px; font-size: 0.72rem; padding: 0 6px; } } .topbar { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; } .topbar h1 { font-size: 1.35rem; font-weight: 800; margin: 0; letter-spacing: -0.2px; } .topbar .fecha { font-size: 0.82rem; color: var(--ink-soft); margin-top: 2px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; } .page-head .titulos h1 { margin: 0 0 4px; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.2px; } .page-head .titulos p { margin: 0; font-size: 0.84rem; color: var(--ink-soft); } /* ---------- KPI / empresa cards ---------- */ .kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 28px; } .kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 13px; transition: border-color 0.15s; } .kpi .kpi-ic { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: var(--paper); color: var(--ink-soft); margin-bottom: 9px; } .kpi .kpi-ic svg { width: 14px; height: 14px; } .kpi.acento-red .kpi-ic { background: var(--crit-soft); color: var(--red); } .kpi.acento-warn .kpi-ic { background: var(--warn-soft); color: var(--warn); } .kpi .etiqueta { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); line-height: 1.25; } .kpi .valor { font-size: 1.35rem; font-weight: 800; margin-top: 6px; letter-spacing: -0.4px; } .kpi .detalle { font-size: 0.7rem; color: var(--ink-soft); margin-top: 3px; line-height: 1.3; } .kpi .detalle b { color: var(--ink); } .kpi.acento-red .valor { color: var(--red); } .kpi.acento-warn .valor { color: var(--warn); } .kpi.acento-good .kpi-ic { background: var(--good-soft); color: var(--good); } .kpi.acento-good .valor { color: var(--good); } /* Chequeo Interbanking — cards de Salidas sin explicar/Salidas/Entradas, con drill-down banco → movimientos (pedido de Leila, 2 sep 2026: "algo bien visual", "que al clickear te separe por banco"). Reusa el token --crit (rojo) solo para "Salidas sin explicar" porque es lo que Tesorería controla puntualmente (ver comentario en el JS) — Salidas/Entradas (los totales) quedan con el tono neutro, son el dato secundario. En las cards de banco (nivel drill-down) el borde izquierdo usa el color de marca real de cada banco (CHI_COLOR_BANCO en el JS). */ .chi-sinexp-root, .chi-sinexp-bancos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .chi-sinexp-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; text-align: left; } .chi-sinexp-card:hover { border-color: var(--navy-mid); box-shadow: 0 2px 10px rgba(10,18,28,0.08); } .chi-sinexp-card .etiqueta { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); } .chi-sinexp-card .valor { font-size: 1.5rem; font-weight: 800; margin-top: 6px; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; } .chi-sinexp-card .detalle { font-size: 0.72rem; color: var(--ink-soft); margin-top: 4px; } .chi-sinexp-card.acento-red .valor { color: var(--red); } .chi-sinexp-card.chico { padding: 11px 13px; border-left-width: 4px; } .chi-sinexp-card.chico .valor { font-size: 1.15rem; } .seccion { margin-bottom: 18px; } .seccion-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .seccion-head h2 { font-size: 0.86rem; font-weight: 700; margin: 0; letter-spacing: -0.1px; } .seccion-head .ver-todo { font-size: 0.78rem; color: var(--navy); font-weight: 600; text-decoration: none; } /* Agrupa una acción real (ej. "+ Agregar...") junto al chevron de colapsar, para que `.seccion-head` con justify-content:space-between siga viendo solo 2 bloques (título / acciones) en vez de repartir 3 hijos parejo por todo el ancho. */ .seccion-head-acciones { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Sección que se puede plegar/desplegar clickeando el título (Chequeo Interbanking, 2 sep 2026: "que ni bien entras esté colapsado [si ya está hecho] y cuando terminás lo puedas volver a colapsar" — colapsada de entrada mientras esa parte ya quedó resuelta, así la pantalla queda limpia para el Resultado; el toggle de acá es manual siempre, para el lado que lo abre/cierra automático según el estado ver JS). */ .seccion-colapsable-head { cursor: pointer; user-select: none; } .seccion-colapsable-head .chevron { width: 15px; height: 15px; color: var(--ink-soft); transition: transform 0.15s ease; flex-shrink: 0; } .seccion-colapsable.colapsada .seccion-colapsable-head .chevron { transform: rotate(-90deg); } .seccion-colapsable.colapsada .seccion-colapsable-body { display: none; } .dos-columnas { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; align-items: start; } /* ---------- Home: widgets personalizables ---------- */ .pill-info { background: var(--navy-soft); color: var(--navy); display: inline-block; margin-top: 6px; } .widget-atenuado { opacity: 0.4; } .widget-editbar { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 10px; font-size: 0.78rem; } .widget-editbar label { display: flex; align-items: center; gap: 6px; font-weight: 600; flex: 1; } .widget-editbar button { border: 1px solid var(--line); background: var(--card); border-radius: 6px; width: 24px; height: 24px; cursor: pointer; font-size: 0.8rem; line-height: 1; } .widget-editbar button:hover { border-color: var(--navy); color: var(--navy); } .kpis > .widget-editbar { grid-column: 1 / -1; } /* ---------- Home: hero (rediseño estilo "El Carrito", 13-ago) ---------- Misma lógica de datos que antes (renderHomeKpis/Empresas/Agenda/etc, sin tocar) — lo que cambia es la forma: tarjeta hero con panel de stats sobre degradé de marca, accesos rápidos a color, y "Esperando tu acción" agrupado por tipo en vez de lista plana, calcado del Home de "El Carrito" pero con la paleta e íconos propios de EON. */ .home-hero { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); display: grid; grid-template-columns: 1.3fr 1fr; overflow: hidden; margin-bottom: 20px; } .home-hero-l { padding: 26px 30px; display: flex; flex-direction: column; justify-content: center; gap: 2px; } .home-hero-eyebrow { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); text-transform: capitalize; } .home-hero-l h1 { margin: 2px 0 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.5px; } .home-hero-wave { display: inline-block; animation: home-hero-wave 1.6s ease-in-out infinite; transform-origin: 70% 70%; font-size: 0.85em; } @keyframes home-hero-wave { 0%, 60%, 100% { transform: rotate(0); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 30% { transform: rotate(14deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } } .home-hero-nombre { background: linear-gradient(135deg, var(--navy) 0%, var(--red) 55%, var(--violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .home-hero-sub { font-size: 0.85rem; color: var(--ink-soft); margin-top: 8px; line-height: 1.5; max-width: 420px; } .home-hero-sub b { color: var(--ink); font-weight: 700; } .home-hero-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; } /* Panel claro con "manchas" de marca en vez de un bloque sólido oscuro — el sólido navy→rojo (intento anterior) quedaba pegado al resto de la tarjeta blanca, Leila lo pidió "hermanado" con el resto del diseño claro. */ .home-hero-r { position: relative; min-height: 180px; padding: 22px; overflow: hidden; background: radial-gradient(circle at 82% 18%, rgba(11,83,162,0.14) 0, rgba(11,83,162,0.14) 58px, transparent 59px), radial-gradient(circle at 22% 68%, rgba(227,6,19,0.12) 0, rgba(227,6,19,0.12) 82px, transparent 83px), radial-gradient(circle at 68% 88%, rgba(8,145,168,0.14) 0, rgba(8,145,168,0.14) 42px, transparent 43px), linear-gradient(135deg, var(--paper) 0%, #eef1f7 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center; } .home-hero-stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .home-hero-stat .l { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); } .home-hero-stat .v { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.3px; margin-top: 3px; color: var(--ink); } .home-hero-stat .t { font-size: 0.68rem; font-weight: 700; margin-top: 2px; } /* ---------- Home: accesos rápidos ---------- */ .home-quicks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .home-q { border: none; border-radius: 14px; padding: 14px 15px 12px; cursor: pointer; color: #fff; font-family: inherit; text-align: left; display: flex; flex-direction: column; gap: 10px; min-height: 92px; transition: transform 0.15s, box-shadow 0.15s; } .home-q:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20,20,24,0.16); } .home-q-ic { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; } .home-q-ic svg { width: 14px; height: 14px; } .home-q-name { font-size: 0.84rem; font-weight: 800; letter-spacing: -0.1px; } .home-q-meta { font-size: 0.7rem; font-weight: 600; margin-top: auto; opacity: 0.92; } /* ---------- Home: fila inferior — pendientes agrupados + agenda ---------- */ .home-bottom-row { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; } .home-rev-grupo { margin-bottom: 12px; } .home-rev-grupo:last-child { margin-bottom: 0; } .home-rev-grupo-h { display: flex; align-items: center; gap: 8px; padding: 0 2px 7px; } .home-rev-tag { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 5px; } .home-rev-count { font-size: 0.74rem; color: var(--ink-soft); font-weight: 600; } .home-rev-lista { display: flex; flex-direction: column; gap: 6px; } .home-rev { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; } .home-rev:hover { box-shadow: 0 5px 14px rgba(20,20,24,0.07); } .home-rev-ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; } .home-rev-ic svg { width: 15px; height: 15px; } .home-rev-body { flex: 1; min-width: 0; } .home-rev-titulo { font-size: 0.85rem; font-weight: 700; } .home-rev-meta { font-size: 0.72rem; color: var(--ink-soft); margin-top: 1px; } .home-rev-monto { font-size: 0.85rem; font-weight: 800; white-space: nowrap; } /* ---------- Mi Perfil: atajos rápidos (13-ago) — filas colapsadas tipo "Atajo 1", click despliega la lista completa de páginas elegibles para cambiar cuál va ahí. ---------- */ .atajo-row { background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; position: relative; overflow: hidden; } .atajo-row.abierto { border-color: var(--navy); } .atajo-row-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 40px 10px 12px; border: none; background: none; cursor: pointer; font-family: inherit; text-align: left; } .atajo-num { font-size: 0.72rem; font-weight: 800; color: var(--ink-soft); width: 16px; flex-shrink: 0; } .atajo-ic { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .atajo-ic svg { width: 15px; height: 15px; } .atajo-nombre { flex: 1; font-size: 0.86rem; font-weight: 700; } .atajo-row-head .chevron { width: 14px; height: 14px; flex-shrink: 0; color: var(--ink-soft); transition: transform 0.15s ease; } .atajo-row.abierto .atajo-row-head .chevron { transform: rotate(180deg); } .atajo-quitar { position: absolute; top: 9px; right: 10px; width: 22px; height: 22px; border-radius: 6px; border: none; background: none; color: var(--ink-soft); font-size: 1rem; line-height: 1; cursor: pointer; } .atajo-quitar:hover { color: var(--red); background: var(--red-soft); } .atajo-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; padding: 4px 12px 12px; border-top: 1px solid var(--line); margin-top: 2px; padding-top: 10px; } .atajo-opcion { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; font-family: inherit; font-size: 0.78rem; font-weight: 600; text-align: left; } .atajo-opcion:hover { border-color: var(--navy); } .atajo-opcion.activa { border-color: var(--navy); background: var(--navy-soft); color: var(--navy); font-weight: 800; } .atajo-opcion-ic { width: 16px; height: 16px; flex-shrink: 0; display: flex; } .atajo-opcion-ic svg { width: 16px; height: 16px; } /* ---------- Agenda: grilla mensual ---------- */ .calendario-head { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 16px; } .calendario-head h2 { font-size: 1rem; font-weight: 700; margin: 0; min-width: 160px; text-align: center; } .calendario-head button { width: 34px; height: 34px; padding: 0; } .calendario-layout { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; } /* La columna lateral es angosta — las 3-5 acciones por fila no entran al lado del título como en la lista ancha, se van abajo en su propia línea. */ #agenda-cal-panel-lista .fila-item { flex-wrap: wrap; } #agenda-cal-panel-lista .fila-item .acciones-fila { width: 100%; flex-wrap: wrap; padding-left: 42px; margin-top: 2px; } .calendario-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .calendario-diahead { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); text-align: center; padding-bottom: 4px; } .calendario-celda { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px; min-height: 84px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; } .calendario-celda:hover { border-color: var(--navy); } .calendario-celda.fuera-de-mes { opacity: 0.35; } .calendario-celda.hoy { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); } .calendario-celda.seleccionado { background: var(--navy-soft); border-color: var(--navy); } .calendario-celda .num { font-size: 0.76rem; font-weight: 700; } .calendario-chip { font-size: 0.66rem; padding: 1px 5px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; } .calendario-mas { font-size: 0.66rem; color: var(--ink-soft); font-weight: 600; } .calendario-panel { position: sticky; top: 0; } .lista-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .fila-item { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 0.83rem; border-left: 3px solid var(--ec, transparent); } .fila-item:last-child { border-bottom: none; } .fila-item .quien-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--ec, var(--navy)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.66rem; font-weight: 700; flex-shrink: 0; } .fila-item .cuerpo { flex: 1; min-width: 0; } .fila-item .titulo { font-weight: 600; } .fila-item .meta { color: var(--ink-soft); font-size: 0.76rem; margin-top: 1px; } .fila-item .monto { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .fila-item .sub { font-size: 0.72rem; color: var(--ink-soft); margin-top: 2px; } .dotc { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ec, var(--ink-soft)); margin-right: 5px; vertical-align: middle; flex-shrink: 0; } .fila-item .acciones-fila { display: flex; gap: 8px; flex-shrink: 0; } .fila-item .acciones-fila .btn { padding: 6px 12px; font-size: 0.78rem; } .fila-item.fila-clickeable { cursor: pointer; } .fila-item.fila-clickeable:hover { background: var(--paper); } /* ---------- Mis Aprobaciones: tarjetas por tipo, agrupadas por urgencia ---------- */ .aprob-seccion-titulo { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); padding: 12px 16px 6px; } .aprob-seccion-titulo.aprob-seccion-vencido { color: var(--crit); } .aprob-seccion-titulo.aprob-seccion-atencion { color: var(--warn); } .aprob-card { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; cursor: pointer; } .aprob-card:last-child { border-bottom: none; } .aprob-card:hover { background: var(--paper); } .aprob-card.tipo-solicitud { border-left-color: var(--navy); } .aprob-card.tipo-oc { border-left-color: var(--violet); } .aprob-card.tipo-op { border-left-color: var(--good); } .aprob-card.tipo-gf { border-left-color: var(--warn); } /* Envuelve monto+acciones rápidas — en desktop se "disuelve" (display:contents) así los 2 siguen siendo hijos flex directos de .aprob-card, igual que antes; en mobile (ver media query abajo) pasa a ser una fila propia de ancho completo, en vez de forzar el wrap del row entero. */ .aprob-footer { display: contents; } .aprob-icono { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .aprob-icono svg { width: 16px; height: 16px; } .tipo-solicitud .aprob-icono { background: var(--navy-soft); color: var(--navy); } .tipo-oc .aprob-icono { background: var(--violet-soft); color: var(--violet); } .tipo-op .aprob-icono { background: var(--good-soft); color: var(--good); } .tipo-gf .aprob-icono { background: var(--warn-soft); color: var(--warn); } .aprob-cuerpo { flex: 1; min-width: 0; } .aprob-titulo { font-weight: 700; font-size: 0.88rem; margin-bottom: 4px; } .aprob-chips { display: flex; flex-wrap: wrap; gap: 6px; } .aprob-chip { font-size: 0.72rem; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 2px 9px; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; } .aprob-chip.aprob-urgencia-vencido { color: var(--crit); background: var(--crit-soft); border-color: transparent; font-weight: 700; } .aprob-chip.aprob-urgencia-atencion { color: var(--warn); background: var(--warn-soft); border-color: transparent; font-weight: 700; } .aprob-monto { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.92rem; } .aprob-acciones-rapidas { display: flex; gap: 6px; flex-shrink: 0; } .aprob-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-soft); padding: 0; } .aprob-btn svg { width: 15px; height: 15px; } .aprob-btn-ok:hover { background: var(--good-soft); border-color: var(--good); color: var(--good); } .aprob-btn-no:hover { background: var(--crit-soft); border-color: var(--crit); color: var(--crit); } /* Rediseño mobile (pedido de Leila, 23-ago-2026: "quedan cortados los textos" — la pantalla más usada por gerencia). El intento anterior (flex-wrap + margin-left a mano) rompía apenas el título ocupaba 2 líneas: el ícono y los chips terminaban compitiendo por una fila angosta y cada chip se veía truncado a 1-2 caracteres, apilados en columna. Estructura nueva en 3 filas apiladas, sin ese conflicto: ícono+título arriba, chips en su propia fila (wrap normal), monto+acciones abajo del todo con un divisor — cada .aprob-card pasa a ser una tarjeta propia con separación y sombra, en vez de una fila más de una lista densa difícil de escanear. */ @media (max-width: 640px) { #page-mis-aprobaciones .lista-card { background: transparent; border: none; border-radius: 0; overflow: visible; } #page-mis-aprobaciones .aprob-seccion-titulo { padding: 18px 2px 8px; } .aprob-card { flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; padding: 14px 14px 12px; margin-bottom: 10px; background: var(--card); border-radius: 14px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-left-width: 3px; border-left-style: solid; box-shadow: 0 1px 3px rgba(15,23,42,0.06); } .aprob-card:last-child { margin-bottom: 0; } .aprob-icono { width: 34px; height: 34px; } .aprob-icono svg { width: 17px; height: 17px; } .aprob-cuerpo { flex: 1 1 calc(100% - 46px); } .aprob-titulo { font-size: 0.94rem; } /* .aprob-footer envuelve monto+acciones en las tarjetas activas (Mis Aprobaciones) — acá SÍ se renderiza, como fila propia de ancho completo. El Historial no tiene acciones rápidas: su .aprob-monto queda como hijo directo de .aprob-card (sin .aprob-footer, ver tarjetaHistorial en app.js), así que recibe el mismo tratamiento de "fila propia con divisor" por selector, sin necesitar el wrapper. */ .aprob-footer { display: flex; flex-basis: 100%; align-items: center; justify-content: space-between; padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--line); } .aprob-card > .aprob-monto { flex-basis: 100%; text-align: right; padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--line); } .aprob-monto { font-size: 1.02rem; } .aprob-acciones-rapidas { gap: 8px; } .aprob-btn { width: 38px; height: 38px; } .aprob-btn svg { width: 17px; height: 17px; } } tr.fila-elegida { background: var(--good-soft); } tr.fila-elegida td:first-child { font-weight: 700; color: var(--good); } .pill { font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; } .pill-pendiente, .pill-pendiente_aprobacion, .pill-devuelta { background: var(--warn-soft); color: var(--warn); } .pill-aprobada, .pill-aprobado, .pill-ejecutada, .pill-conciliada { background: var(--good-soft); color: var(--good); } .pill-rechazada, .pill-rechazado, .pill-critico { background: var(--crit-soft); color: var(--crit); } .pill-cerrada, .pill-unificada, .pill-borrador { background: var(--line); color: var(--ink-soft); } .pill-bajo-minimo { background: var(--crit-soft); color: var(--crit); } .actividad-item { padding: 7px 16px; border-bottom: 1px solid var(--line); font-size: 0.8rem; display: flex; gap: 10px; } .actividad-item:last-child { border-bottom: none; } .actividad-item .punto { width: 6px; height: 6px; border-radius: 50%; background: var(--navy); margin-top: 6px; flex-shrink: 0; } .actividad-item .texto b { font-weight: 700; } .actividad-item .cuando { color: var(--ink-soft); font-size: 0.72rem; margin-top: 1px; } /* ---------- Buttons ---------- */ .btn { font-family: inherit; font-size: 0.8rem; font-weight: 700; border-radius: var(--radius-sm); padding: 8px 14px; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 6px; transition: background 0.12s, opacity 0.12s, color 0.12s; } .btn-primario { background: var(--ink); color: #fff; } .btn-primario:hover { opacity: 0.85; } .btn-secundario { background: var(--paper); border-color: transparent; color: var(--ink); } .btn-secundario:hover { background: var(--line); color: var(--ink); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-texto { background: none; border: none; color: var(--navy); font-weight: 700; font-size: 0.8rem; cursor: pointer; font-family: inherit; padding: 4px 2px; } /* Botones de acción sobre documento (Descargar PDF / Compartir) — mismo patrón que el-carrito (.doc-dl / botón "Compartir" de DocDownloadModal): ícono SVG outline + texto, radio 10px, siempre