:root{ --bg:#f4f5f7; --surface:#ffffff; --surface-2:#f7f8fa; --surface-3:#eef0f3; --field:#f1f2f4; --text:#1c1c1e; --text-2:#6b7280; --text-3:#9aa0a6; --outline:rgba(16,24,40,.08); --outline-2:rgba(16,24,40,.14); --primary:#e11d2a; --on-primary:#ffffff; --primary-2:#b3141f; --primary-tint:rgba(225,29,42,.10); --header:rgba(255,255,255,.80); --shadow-1:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04); --shadow-2:0 12px 30px rgba(16,24,40,.10),0 4px 10px rgba(16,24,40,.05); --green:#0a9d58; --red:#e11d2a; --c-banco:#e11d2a; --bg-banco:rgba(225,29,42,.10); --bd-banco:rgba(225,29,42,.22); --c-jmap:#1f6feb; --bg-jmap:rgba(31,111,235,.10); --bd-jmap:rgba(31,111,235,.22); --c-dif:#c2680c; --bg-dif:rgba(232,136,12,.14); --bd-dif:rgba(232,136,12,.26); --c-otro:#6b7280; --bg-otro:rgba(142,142,147,.12); --bd-otro:rgba(142,142,147,.22); --r-sm:12px; --r:16px; --r-lg:20px; } *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; background:linear-gradient(180deg,#ffffff 0%,#eef0f3 100%) fixed; color:var(--text); min-height:100%; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif; font-size:15px; line-height:1.45; letter-spacing:-.01em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* Evita que un elemento angosto suelto (input con min-width fijo, etc.) empuje TODA la pagina a scroll horizontal en celular - los que si necesitan scroll propio (.tablebox) lo manejan con su propio overflow. */ overflow-x:hidden; } ::selection{ background:var(--primary-tint); } /* ---------- barra superior translucida ---------- */ header{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 20px; background:var(--header); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--outline); } .hgroup{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; } header h1{ margin:0; font-size:20px; font-weight:650; letter-spacing:-.02em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #upd{ font-size:12px; color:var(--text-2); margin-top:1px; } /* ---------- menu de navegacion del header ---------- En pantalla ancha, .nav-menu es "display:contents": no agrega ningun nivel de layout propio, los botones de adentro se comportan como si estuvieran sueltos en el
(flex row de siempre, sin cambios). En celular (ver media query mas abajo) se convierte en un dropdown propio, anclado al boton hamburguesa - ahi es donde se "esconden" para no ocupar tantas filas arriba de la lista de empresas. Notificaciones y Cerrar sesion quedan A PROPOSITO fuera de .nav-menu (piden acceso rapido segun el usuario), el resto (Tablero/Relacionadas/Validacion SRI/SRI Recibidos/Vehiculos/Usuarios) entra al menu. */ .nav-menu{ display:contents; } .hamburger-btn{ display:none; font-size:18px; line-height:1; padding:9px 13px; } /* "Volver al portal" (link externo, sale de la app entera) se reemplaza por "← Atras" (#btnAtras, usa history.back()) en TODO tamaño de pantalla, no solo celular - la app ya tiene un historial real con pushState/popstate (ver navPush()/popstate mas abajo en el JS) para navegar Reporte -> Empresa -> Empresas sin salir al portal, pero el boton visible seguia mandando afuera incluso en escritorio (18-sep-2026, reportado por Carlos Ponce). */ #btnVolverPortal{ display:none !important; } #btnAtras{ display:inline-flex !important; align-items:center; } @media (max-width: 767px){ .hamburger-btn{ display:inline-block; } /* Limpieza del topbar en celular: el nombre de usuario (ADMIN) se esconde. El logo tambien se esconde - el titulo (#title) ya muestra "Reporte - Empresa" (o el nombre de la empresa solo, en la pantalla de sus reportes), asi que repetirlo junto al logo era duplicar el mismo nombre dos veces en el header. "Cerrar sesion" dejo de flotar fijo arriba a la derecha (chocaba con el nombre de empresa) y paso a vivir dentro del menu hamburguesa (#navMenu, ver HTML) junto con Tablero/Relacionadas/etc. */ #userLabel{ display:none !important; } header img[alt="Pronto!"]{ display:none; } /* El titulo (#title) ya dice reporte+empresa, asi que la migaja de pan (Empresas > empresa > reporte) queda triplicando la misma info - se esconde en movil. */ #crumbs{ display:none; } /* El boton "Actualizar" se reemplaza en movil por el gesto de arrastrar hacia abajo (ver pull-to-refresh en el JS, mas abajo). */ #btnRef{ display:none !important; } .nav-menu{ display:none; position:absolute; top:calc(100% + 6px); right:12px; z-index:70; flex-direction:column; gap:2px; min-width:210px; padding:6px; background:var(--surface); border:1px solid var(--outline); border-radius:var(--r); box-shadow:var(--shadow-2); } .nav-menu.open{ display:flex; } .nav-menu button{ width:100%; text-align:left; border-radius:var(--r-sm); } /* En movil, toggleNotifPanel() ya no abre este #notifPanel anclado - usa un modal centrado (ver toggleNotifModalMovil en el JS), igual que Filtros. Este panel solo se usa en desktop (ver regla base). */ } /* ---------- botones ---------- */ button{ cursor:pointer; border:0; font:inherit; font-size:14px; font-weight:600; border-radius:999px; padding:9px 16px; transition:transform .08s ease, background .15s, box-shadow .15s, opacity .15s; -webkit-user-select:none; user-select:none; } button:active{ transform:scale(.97); } button:disabled{ opacity:.4; cursor:default; transform:none; } button:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; } .triton-date-wrap{position:relative;display:inline-flex;align-items:center;width:125px;height:34px;box-sizing:border-box;background:var(--field);border:1px solid var(--outline-2);border-radius:var(--r-sm);z-index:2;} .triton-date-wrap:hover{border-color:var(--outline);} .triton-date-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint);} .triton-date-text{width:100%;height:100%;box-sizing:border-box;border:0!important;outline:0!important;background:transparent!important;color:var(--text);font:inherit;font-size:13px;padding:6px 30px 6px 8px;min-width:0;} .triton-date-text::placeholder{color:var(--text-2);opacity:.75;} .triton-date-calendar{position:absolute;right:2px;top:2px;width:29px;height:28px;padding:0;border:0;background:transparent;color:var(--text-2);border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none;font-size:15px;z-index:3;} .triton-date-calendar:hover{background:var(--outline-2);color:var(--text);} .triton-date-picker{position:absolute!important;right:2px!important;top:2px!important;width:29px!important;height:28px!important;opacity:0!important;pointer-events:none!important;border:0!important;padding:0!important;} .primary{ background:var(--primary); color:var(--on-primary); box-shadow:var(--shadow-1); } .primary:hover{ box-shadow:var(--shadow-2); } .ghost{ background:var(--surface-3); color:var(--text); } .ghost.has-sel{ background:var(--primary-tint); color:var(--primary); } .ghost:hover{ background:var(--outline-2); } /* ---------- inputs y selects "sueltos" (fuera de .ac-box/.triton-date-wrap/.toolbar, que ya traen su propio estilo mas especifico y ganan por especificidad) - antes no tenian NINGUN estilo base, quedaban con el cuadrado por defecto del navegador en decenas de formularios (Vehiculos, Bitacora, Triton, Abastecimiento...) (17-sep-2026) */ input[type=text], input[type=number], input[type=date], input[type=month], input[type=password], input[type=email], select, textarea{ font:inherit; font-size:13.5px; color:var(--text); background:var(--field); border:1px solid var(--outline-2); border-radius:var(--r-sm); padding:8px 12px; transition:border-color .15s, box-shadow .15s; } input[type=text]:hover, input[type=number]:hover, input[type=date]:hover, input[type=month]:hover, input[type=password]:hover, input[type=email]:hover, select:hover, textarea:hover{ border-color:var(--outline); } input[type=text]:focus, input[type=number]:focus, input[type=date]:focus, input[type=month]:focus, input[type=password]:focus, input[type=email]:focus, select:focus, textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint); } input::placeholder, textarea::placeholder{ color:var(--text-3); opacity:.75; } input:disabled, select:disabled, textarea:disabled{ opacity:.55; cursor:not-allowed; } /* ---------- contenedor ---------- */ .wrap{ padding:20px; max-width:1200px; margin:0 auto; } .crumbs{ font-size:13px; color:var(--text-2); margin-bottom:16px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; } .crumbs a{ color:var(--primary); cursor:pointer; text-decoration:none; font-weight:500; } .crumbs a:hover{ text-decoration:underline; } /* ---------- tarjetas (empresas / reportes) ---------- */ .cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; } .card{ position:relative; background:var(--surface); border:1px solid var(--outline); border-radius:var(--r-lg); padding:20px; cursor:pointer; box-shadow:var(--shadow-1); transition:transform .14s ease, box-shadow .14s ease, border-color .14s; } .card:not(.disabled):hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:transparent; } .card:not(.disabled)::after{ content:"›"; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:26px; line-height:1; color:var(--text-3); font-weight:400; } .card.disabled{ cursor:default; opacity:.55; } .card h3{ margin:0 0 6px; font-size:17px; font-weight:600; letter-spacing:-.01em; padding-right:18px; } .card p{ margin:0; font-size:13px; color:var(--text-2); } /* Inicio (23-oct-2026): mismo estilo que el Inicio de Bitacora - saludo, buscador y tarjetas agrupadas. --rc / --rc-bg = color del grupo (se pasan en linea por grupo). */ .home-hola{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:2px 0 4px; } .home-hola > div:first-child{ flex:1 1 280px; } .home-hola .t{ font-size:22px; font-weight:650; letter-spacing:-.02em; } .home-hola .s{ font-size:14px; color:var(--text-2); margin-top:2px; } .home-buscar{ flex:0 1 320px; position:relative; } .home-buscar::before{ content:"\1F50D"; position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:14px; opacity:.6; pointer-events:none; } .home-buscar input{ width:100%; height:40px; border:1px solid var(--outline-2); border-radius:999px; background:var(--surface); padding:0 16px 0 40px; font:inherit; font-size:14px; color:var(--text); box-shadow:var(--shadow-1); } .home-buscar input:focus{ outline:2px solid var(--primary); outline-offset:1px; } .home-sec{ display:flex; align-items:center; gap:10px; margin:24px 0 10px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2); } .home-sec::before{ content:""; width:4px; height:14px; border-radius:2px; background:var(--rc); } .home-sec span{ font-size:12px; font-weight:500; text-transform:none; letter-spacing:0; color:var(--text-3); } .home-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; } .home-card{ position:relative; display:flex; gap:14px; align-items:flex-start; padding:16px 38px 16px 18px; background:var(--surface); border:1px solid var(--outline); border-radius:var(--r-lg); cursor:pointer; box-shadow:var(--shadow-1); transition:transform .14s ease, box-shadow .14s ease, border-color .14s; } .home-card::after{ content:"\203A"; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:26px; line-height:1; color:var(--text-3); } .home-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:var(--rc); } .home-card:focus-visible{ outline:2px solid var(--rc); outline-offset:2px; } .home-ic{ flex:0 0 44px; height:44px; border-radius:12px; background:var(--rc-bg); display:inline-flex; align-items:center; justify-content:center; font-size:21px; } .home-ic.mono{ font-size:14px; font-weight:750; letter-spacing:.02em; color:var(--rc); } .home-card h3{ margin:0 0 3px; font-size:17px; font-weight:600; letter-spacing:-.01em; } .home-card p{ margin:0; font-size:13px; color:var(--text-2); line-height:1.4; } .home-vacio{ margin:30px 0; text-align:center; color:var(--text-2); } @media (max-width:640px){ .home-cards{ grid-template-columns:1fr; } } .home-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .home-badges:empty{ display:none; } .home-badge{ font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:99px; background:var(--surface-3); color:var(--text-2); } .home-badge.alerta{ background:rgba(232,136,12,.15); color:#b35f00; } /* Abastecimiento (23-oct-2026): panel "Calcular" en tarjeta, con la misma etiqueta de seccion del Inicio. */ .ab-panel{ background:var(--surface); border:1px solid var(--outline); border-radius:var(--r-lg); box-shadow:var(--shadow-1); padding:18px 20px; margin-bottom:18px; max-width:1100px; } .ab-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px 32px; } .ab-label{ display:flex; align-items:center; gap:8px; margin-bottom:9px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2); } .ab-label::before{ content:""; width:4px; height:12px; border-radius:2px; background:var(--primary); } .ab-row, .ab-mini{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:36px; } .ab-mini{ font-size:13px; color:var(--text-2); min-height:34px; } .ab-mini + .ab-mini{ margin-top:4px; } .ab-mini input{ width:64px; } .ab-sep{ color:var(--text-3); } .ab-val{ display:flex; align-items:center; min-height:36px; font-size:15px; font-weight:600; } .ab-tag{ margin-left:8px; padding:2px 9px; border-radius:99px; font-size:11px; font-weight:700; background:var(--primary-tint); color:var(--primary); } .ab-hint{ margin-top:6px; font-size:12.5px; line-height:1.4; color:var(--text-2); } .ab-hint a{ color:var(--primary); font-weight:600; cursor:pointer; text-decoration:none; } .ab-hint a:hover{ text-decoration:underline; } .ab-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid var(--outline); } .ab-check{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-2); cursor:pointer; } /* ---------- mosaicos de estado ---------- */ .stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin-bottom:14px; } .stat{ background:var(--surface); border:1px solid var(--outline); border-radius:var(--r); padding:12px 15px; cursor:pointer; transition:transform .1s, box-shadow .15s, background .15s; box-shadow:var(--shadow-1); container-type:inline-size; } .stat:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2); } .stat.active{ box-shadow:0 0 0 2px var(--c,var(--primary)) inset, var(--shadow-1); background:var(--cbg,var(--surface)); } /* clamp() con unidades cqw: el numero se achica solo cuando la tarjeta es angosta (muchos KPI en una fila), sin depender del ancho de pantalla - asi no se ve desproporcionado en tarjetas chicas (16-sep-2026). */ .stat .n{ font-size:clamp(15px,13cqw,23px); font-weight:750; letter-spacing:-.02em; color:var(--c,var(--text)); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .stat .lbl{ font-size:clamp(10.5px,6.5cqw,12.5px); font-weight:600; color:var(--text-2); margin-top:3px; display:flex; align-items:center; gap:7px; } .stat .lbl::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--c,var(--text-3)); flex:0 0 auto; } .stat .tot{ font-size:clamp(11px,6cqw,13px); color:var(--text); margin-top:4px; font-variant-numeric:tabular-nums; } @media (max-width:640px){ /* Las tarjetas de KPI (Documentos/Saldo total/etc.) en celular pesan demasiado para lo poco que muestran (un numero + una etiqueta) - se comprimen para dejarle mas espacio vertical a la lista real. */ .stat-row{ gap:8px; margin-bottom:10px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); } .stat{ padding:8px 12px; } .stat .n{ font-size:clamp(13px,13cqw,18px); } .stat .lbl{ font-size:clamp(9.5px,6.5cqw,10.5px); margin-top:1px; } .stat .tot{ font-size:clamp(10px,6cqw,11px); margin-top:2px; } /* El cajon de "Fecha de corte" (CxC/Inventario) quedaba muy ancho y alto para lo poco que dice - se comprime y el picker pasa a ocupar todo el ancho para que el dedo lo toque facil. La barra de "Mostrando X de Y..." tambien se achica para no sentirse tan suelta. */ .corte-box{ padding:9px 12px !important; gap:6px !important; } .corte-box .corte-lbl{ font-size:13px !important; } .corte-box input[type=date]{ font-size:14px !important; padding:7px 10px !important; flex:1 1 100%; } .corte-box .corte-msg{ font-size:11.5px !important; } #cartBar > div{ font-size:12px !important; margin:0 2px 6px !important; } } .st-banco{ --c:var(--c-banco); --cbg:var(--bg-banco); --cbd:var(--bd-banco); } .st-jmap { --c:var(--c-jmap); --cbg:var(--bg-jmap); --cbd:var(--bd-jmap); } .st-dif { --c:var(--c-dif); --cbg:var(--bg-dif); --cbd:var(--bd-dif); } .st-otro { --c:var(--c-otro); --cbg:var(--bg-otro); --cbd:var(--bd-otro); } /* ---------- barra de filtros ---------- */ .toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; } .toolbar input[type=text], .toolbar select, .toolbar input[type=date]{ font:inherit; font-size:13.5px; color:var(--text); background:var(--field); border:1px solid transparent; border-radius:var(--r-sm); padding:8px 12px; transition:border-color .15s, box-shadow .15s; } .toolbar input[type=text]{ min-width:230px; } .toolbar input[type=date]{ color-scheme:light dark; } .toolbar input[type=text]:focus, .toolbar select:focus, .toolbar input[type=date]:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint); } .toolbar input[type=text]::placeholder{ color:var(--text-3); } .toolbar label{ font-size:14px; color:var(--text); display:inline-flex; align-items:center; gap:7px; cursor:pointer; } .toolbar input[type=checkbox]{ width:18px; height:18px; accent-color:var(--primary); cursor:pointer; } .rj-no-spin::-webkit-outer-spin-button, .rj-no-spin::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .rj-no-spin{ -moz-appearance:textfield; } /* ---------- filtro con buscador (escribir y ver opciones al instante) ---------- */ .ac-box{ position:relative; display:inline-flex; align-items:center; } .ac-box input[type=text]{ font:inherit; font-size:13.5px; color:var(--text); background:var(--field); border:1px solid transparent; border-radius:var(--r-sm); padding:8px 30px 8px 12px; min-width:220px; transition:border-color .15s, box-shadow .15s; } .ac-box input[type=text]:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint); } .ac-box input[type=text]::placeholder{ color:var(--text-3); } .ac-clear{ position:absolute; right:8px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--text-2); font-size:16px; line-height:1; cursor:pointer; padding:2px 4px; } .ac-clear:hover{ color:var(--text); } .ac-menu{ position:absolute; top:calc(100% + 4px); left:0; min-width:100%; width:max-content; max-width:320px; max-height:260px; overflow:auto; background:var(--surface); border:1px solid var(--outline); border-radius:var(--r); box-shadow:var(--shadow-2, var(--shadow-1)); z-index:30; display:none; } .ac-item{ padding:8px 12px; cursor:pointer; font-size:13.5px; } .ac-item:hover{ background:var(--primary-tint); } .ac-empty{ padding:8px 12px; font-size:13px; color:var(--text-2); } .grow{ flex:1 1 auto; } /* ---------- tabla ---------- */ .tablebox{ background:var(--surface); border:1px solid var(--outline); border-radius:var(--r-lg); overflow:auto; -webkit-overflow-scrolling:touch; max-height:calc(100vh - 340px); box-shadow:var(--shadow-1); } table{ border-collapse:collapse; width:100%; font-size:12.5px; } th,td{ padding:5px 8px; border-bottom:1px solid var(--outline); white-space:nowrap; text-align:left; vertical-align:middle; } /* con table-layout:fixed (activado por JS via bcInitColResize) el ancho de cada columna queda fijo - sin este overflow:hidden el texto que no entra se dibuja encima de la columna vecina en vez de cortarse. */ td{ overflow:hidden; text-overflow:ellipsis; } .col-resizer{ position:absolute; top:0; right:-5px; bottom:0; width:10px; cursor:col-resize; z-index:2; } .col-resizer::after{ content:''; position:absolute; top:20%; bottom:20%; left:50%; width:3px; margin-left:-1.5px; border-radius:3px; background:var(--outline-2); } .col-resizer:hover::after, .col-resizer.active::after{ background:var(--primary); top:10%; bottom:10%; width:4px; margin-left:-2px; } .col-resizer:hover, .col-resizer.active{ background:var(--primary-tint); } tbody tr:last-child td{ border-bottom:0; } /* iOS Safari a veces "fantasmea"/superpone el contenido de celdas con position:sticky (encabezado + primera columna) mientras se hace scroll con inercia - forzar su propia capa de composicion evita ese glitch. */ thead th, tbody td:first-child{ -webkit-transform:translateZ(0); transform:translateZ(0); } thead th{ position:sticky; top:0; z-index:1; background:var(--surface-2); padding:7px 8px; font-size:10.5px; font-weight:650; text-transform:uppercase; letter-spacing:.02em; color:var(--text-2); } /* fila de totales (tfoot) fija abajo mientras se hace scroll en la tabla, igual que el encabezado queda fijo arriba. */ tfoot td{ position:sticky; bottom:0; z-index:1; background:var(--surface-2); border-top:1px solid var(--outline); border-bottom:0; } tbody tr{ transition:background .12s; } tbody td{ background:var(--surface); } tbody tr:nth-child(even) td{ background:var(--surface-2); } tbody tr:hover td{ background:var(--primary-tint); } td.num, th.num{ text-align:right; font-variant-numeric:tabular-nums; } tr.done{ opacity:.5; } tr.done td.desc{ text-decoration:line-through; } .desc{ max-width:180px; overflow:hidden; text-overflow:ellipsis; } td.wrap-desc{ white-space:normal; max-width:260px; line-height:1.35; } /* primera columna fija (como "Inmovilizar paneles" de Excel) - para no perder de vista a que fila corresponde cada dato al desplazarse a la derecha en tablas con muchas columnas */ tbody td:first-child{ position:sticky; left:0; z-index:2; box-shadow:1px 0 0 var(--outline); } thead th:first-child{ position:sticky; left:0; top:0; z-index:3; box-shadow:1px 0 0 var(--outline); } td.card-toggle{ display:none; } /* ---------- Cartera/CxC/CxP/Cierres/Ventas/Compras/Retenciones/Inventario (#tboxC, ver renderCartTabla()) en celular: en vez de tabla ancha con scroll horizontal, cada fila pasa a ser una tarjeta con "Etiqueta: valor" apilado - igual que una app de banco muestra sus movimientos. Con mas de 4 columnas la tarjeta arranca comprimida (solo .card-sum, la primera columna + el monto/cantidad mas relevante) y ".card-more" (el resto) queda oculto detras del boton "Ver mas" hasta que la fila tenga .expanded (toggleCartCard()). Requiere que cada tenga data-label (ya lo hace renderCartTabla()). ---------- */ @media (max-width:640px){ #tboxC{ max-height:none; overflow:visible; border:0; background:transparent; box-shadow:none; } #tboxC table{ width:100%; } #tboxC thead{ display:none; } #tboxC tbody{ display:block; } #tboxC tr{ display:block; margin-bottom:10px; padding:4px 12px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--outline); box-shadow:var(--shadow-1); } #tboxC tr.cierre-row:hover{ background:var(--surface) !important; } #tboxC td{ display:flex; justify-content:space-between; align-items:center; gap:14px; position:static !important; box-shadow:none !important; background:transparent !important; padding:8px 0; border-bottom:1px dashed var(--outline); white-space:normal; text-align:left; } #tboxC tr:nth-child(even) td{ background:transparent; } #tboxC td:last-child{ border-bottom:0; } #tboxC td::before{ content:attr(data-label); font-size:10.5px; font-weight:650; text-transform:uppercase; letter-spacing:.02em; color:var(--text-2); text-align:left; flex:0 0 auto; } #tboxC td.num{ text-align:right; } #tboxC td.card-more{ display:none; } #tboxC tr.expanded td.card-more{ display:flex; } #tboxC td.card-toggle{ display:flex; justify-content:center; padding:6px 0 0; border-bottom:0; } #tboxC td.card-toggle::before{ content:none; } .card-toggle-btn{ background:none; border:0; color:var(--primary); font-size:12.5px; font-weight:650; padding:6px 10px; cursor:pointer; display:flex; align-items:center; gap:4px; } .card-toggle-btn .chev{ transition:transform .15s ease; } #tboxC tr.expanded .card-toggle-btn .chev{ transform:rotate(180deg); } } /* ---------- CxC/CxP agrupado por cliente/proveedor (#tboxC, ver renderCarteraAgrupada()) - una tarjeta por cliente/proveedor con su saldo total, desplegable para ver sus documentos individuales. ---------- */ .cxc-group{ background:var(--surface); border:1px solid var(--outline); border-radius:var(--r); margin-bottom:8px; overflow:hidden; box-shadow:var(--shadow-1); transition:box-shadow .15s ease, border-color .15s ease; } .cxc-group:hover{ border-color:var(--outline-2); box-shadow:var(--shadow-2,0 4px 14px rgba(16,24,40,.08)); } .cxc-group.expanded{ border-color:var(--primary-tint,var(--outline-2)); } /* Alto fijo y consistente sin importar que tan largo sea el nombre: el nombre/codigo se truncan a UNA linea cada uno (nunca se envuelven ni empujan el monto de lugar) y el monto queda en una columna de ancho fijo siempre pegado a la derecha. Avatar circular con la inicial del nombre (color derivado del texto, consistente para el mismo cliente siempre) ayuda a escanear la lista de un vistazo en vez de una pared de texto. */ .cxc-group-head{ display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; } .cxc-group-head:hover{ background:var(--surface-2); } .cxc-avatar{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; } .cxc-group-name{ min-width:0; flex:1 1 auto; } .cxc-group-name .nom{ display:block; font-weight:650; font-size:14px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cxc-group-name .cod{ display:inline-block; margin-top:2px; font-weight:600; font-size:10.5px; letter-spacing:.02em; color:var(--text-2); background:var(--surface-3); border-radius:999px; padding:1px 8px; } .cxc-group-meta{ display:flex; align-items:center; gap:14px; flex:0 0 auto; } .cxc-group-count{ font-size:11px; font-weight:600; color:var(--text-2); white-space:nowrap; background:var(--surface-3); border-radius:999px; padding:3px 9px; } .cxc-group-total{ font-weight:750; font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap; min-width:78px; text-align:right; color:var(--text); } .cxc-group-total.neg{ color:var(--red); } .cxc-group-head .chev{ transition:transform .15s ease; color:var(--text-3); flex-shrink:0; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface-3); font-size:11px; } .cxc-group.expanded .cxc-group-head .chev{ transform:rotate(180deg); background:var(--primary-tint,var(--surface-3)); color:var(--primary); } .cxc-group-body{ display:none; border-top:1px solid var(--outline); padding:10px 16px 14px; background:var(--surface-2); } .cxc-group.expanded .cxc-group-body{ display:block; } .cxc-group-body table{ font-size:12px; background:var(--surface); border-radius:var(--r-sm); overflow:hidden; } @media (max-width:480px){ .cxc-group-count{ display:none; } /* con poco ancho, prioridad al nombre y al monto */ .cxc-avatar{ width:28px; height:28px; font-size:11px; } } /* ---------- pills / chips ---------- */ .pill{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:650; letter-spacing:.01em; border-radius:999px; padding:3px 11px; color:var(--c,var(--text)); background:var(--cbg,var(--surface-3)); white-space:nowrap; } .p-banco{ --c:var(--c-banco); --cbg:var(--bg-banco); } .p-jmap { --c:var(--c-jmap); --cbg:var(--bg-jmap); } .p-dif { --c:var(--c-dif); --cbg:var(--bg-dif); } .p-otro { --c:var(--c-otro); --cbg:var(--bg-otro); } .neg{ color:var(--red); } .pos{ color:var(--green); } /* ---------- control segmentado (reemplaza