:root { --bs-primary: #0d9488; --bs-primary-rgb: 13, 148, 136; --bs-primary-bg-subtle: #ccfbf1; --bs-primary-border-subtle: #99f6e4; } body { background-color: #f6f7f9; } /* Botón flotante "Volver arriba" (ver setupBackToTop() en app.js) — mismo estilo circular que ya usan otros botones flotantes del sistema, para que se sienta consistente. */ #back-to-top-btn { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 1040; width: 46px; height: 46px; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; } /* Tema oscuro — se activa con data-bs-theme="dark" en (mismo mecanismo nativo de Bootstrap 5.3, así sus propios componentes también cambian de color automáticamente). Los matices de marca se mantienen, solo un poco más claros para que resalten sobre fondos oscuros. */ [data-bs-theme="dark"] { --bs-primary: #14b8a6; --bs-primary-rgb: 20, 184, 166; --bs-primary-bg-subtle: #0f3d38; --bs-primary-border-subtle: #1a544c; } [data-bs-theme="dark"] body { background-color: #12151c; } [data-bs-theme="dark"] .card { border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } [data-bs-theme="dark"] .insight-bubble { background: #1b1f28; } /* Bootstrap no adapta ".bg-white"/".bg-light"/".text-bg-light" al tema oscuro (a propósito, "blanco"/"claro" no cambian de significado por diseño), pero aquí se usan como fondo "neutro" para íconos de moneda y badges informativos — por eso sí necesitan su propia variante oscura. */ [data-bs-theme="dark"] .bg-white { background-color: var(--bs-tertiary-bg) !important; } [data-bs-theme="dark"] .bg-light, [data-bs-theme="dark"] .text-bg-light { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-body-color) !important; } [data-bs-theme="dark"] .section-heading { color: #14b8a6; border-bottom-color: rgba(20, 184, 166, 0.25); } [data-bs-theme="dark"] .btn-primary { --bs-btn-bg: #14b8a6; --bs-btn-border-color: #14b8a6; --bs-btn-hover-bg: #2dd4bf; --bs-btn-hover-border-color: #2dd4bf; --bs-btn-active-bg: #2dd4bf; --bs-btn-active-border-color: #2dd4bf; --bs-btn-disabled-bg: #14b8a6; --bs-btn-disabled-border-color: #14b8a6; --bs-btn-focus-shadow-rgb: 20, 184, 166; --bs-btn-color: #06211d; --bs-btn-hover-color: #06211d; --bs-btn-active-color: #06211d; } [data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #14b8a6; --bs-btn-border-color: #14b8a6; --bs-btn-hover-bg: #14b8a6; --bs-btn-hover-border-color: #14b8a6; --bs-btn-active-bg: #14b8a6; --bs-btn-active-border-color: #14b8a6; --bs-btn-disabled-color: #14b8a6; --bs-btn-disabled-border-color: #14b8a6; --bs-btn-focus-shadow-rgb: 20, 184, 166; --bs-btn-hover-color: #06211d; --bs-btn-active-color: #06211d; } [data-bs-theme="dark"] .nav-link.active { color: #14b8a6 !important; } .btn-primary { --bs-btn-bg: #0d9488; --bs-btn-border-color: #0d9488; --bs-btn-hover-bg: #0f766e; --bs-btn-hover-border-color: #0f766e; --bs-btn-active-bg: #0f766e; --bs-btn-active-border-color: #0f766e; --bs-btn-disabled-bg: #0d9488; --bs-btn-disabled-border-color: #0d9488; --bs-btn-focus-shadow-rgb: 13, 148, 136; } .btn-outline-primary { --bs-btn-color: #0d9488; --bs-btn-border-color: #0d9488; --bs-btn-hover-bg: #0d9488; --bs-btn-hover-border-color: #0d9488; --bs-btn-active-bg: #0d9488; --bs-btn-active-border-color: #0d9488; --bs-btn-disabled-color: #0d9488; --bs-btn-disabled-border-color: #0d9488; --bs-btn-focus-shadow-rgb: 13, 148, 136; } .card { border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); } .navbar { box-shadow: 0 2px 6px rgba(10, 30, 66, 0.25); } .bg-navbar-gradient { background: linear-gradient(135deg, #0a1e42 0%, #16305e 60%, #1b3a73 100%); } .navbar-brand { font-weight: 600; min-width: 0; flex-shrink: 1; } .navbar-brand .text-truncate { min-width: 0; } .navbar > .container { flex-wrap: nowrap; } .navbar-toggler { flex-shrink: 0; } .navbar-logo { width: 28px; height: 28px; object-fit: cover; border-radius: 50%; background: #fff; } .nav-link.active { color: #0d9488 !important; font-weight: 600; } .navbar-dark .nav-link { color: rgba(255, 255, 255, 0.9) !important; } .navbar-dark .nav-link:hover, .navbar-dark .nav-link:focus { color: #ffffff !important; } .navbar-dark .nav-link.active { color: #ffffff !important; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; } .insight-bubble { background: #ffffff; border: 1px solid var(--bs-primary-border-subtle); border-radius: 0.9rem; padding: 1rem 1.1rem; margin-top: 1rem; box-shadow: 0 4px 14px rgba(13, 148, 136, 0.1); opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease; } .insight-bubble.show { opacity: 1; transform: translateY(0); } .insight-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--bs-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; } #insight-result { white-space: pre-line; line-height: 1.6; } @media (max-width: 576px) { html { font-size: 17.5px; } } .movement-action-btn { font-size: 1.15rem; padding: 0.25rem 0.4rem; line-height: 1; } @media (max-width: 576px) { .movement-action-btn { font-size: 1.4rem; padding: 0.4rem 0.5rem; } } .debt-bulk-checkbox { width: 1.2em; height: 1.2em; cursor: pointer; } .section-heading { text-transform: uppercase; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color: #0d9488; margin: 1.75rem 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 2px solid rgba(13, 148, 136, 0.15); } .section-heading.mt-0 { margin-top: 0; } @media (max-width: 767.98px) { .navbar-collapse .nav-link { display: block; padding: 0.9rem 1rem; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.08); } .navbar-collapse .nav-link.active { background: rgba(255, 255, 255, 0.16); } .navbar-collapse form { width: 100%; } .navbar-collapse .btn { width: 100%; padding: 0.75rem 1rem; font-size: 1rem; } /* El menú "Ventas" agrupa Inventario/Pedidos/Cotizaciones; en móvil el dropdown de Bootstrap flota por defecto (position: absolute), lo que se ve raro dentro de un menú ya desplegado a pantalla completa — aquí se fuerza a que empuje el contenido hacia abajo como un acordeón normal. */ .navbar-collapse .dropdown-menu { position: static; background: rgba(255, 255, 255, 0.06); border: none; box-shadow: none; margin: 0.25rem 0 0.5rem; padding: 0.25rem; } .navbar-collapse .dropdown-item { display: block; padding: 0.75rem 1rem; border-radius: 0.5rem; color: rgba(255, 255, 255, 0.85); } .navbar-collapse .dropdown-item:hover, .navbar-collapse .dropdown-item:focus { background: rgba(255, 255, 255, 0.12); color: #fff; } .navbar-collapse .dropdown-item.active { background: rgba(255, 255, 255, 0.18); color: #fff; font-weight: 600; } } /* "Avisos" (fiado vencido, por pagar, stock bajo) va primero en el HTML del Panel — es lo primero que conviene revisar — seguido del título "Registrar y consultar" y recién después las columnas de registrar/consultar. En móvil (flexbox por defecto en `.dashboard-row`, un `.row` de Bootstrap) esto ya alcanza para el orden correcto sin necesidad de `order`. En escritorio, el grid de abajo reacomoda el título para que quede arriba de ambas columnas y "Avisos" para que rellene el espacio que deja la columna izquierda (más corta que la derecha) en vez de aparecer como franja aparte al final. */ @media (min-width: 992px) { .dashboard-row { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "heading heading" "left right" "avisos right"; column-gap: 1.5rem; row-gap: 1.5rem; align-items: start; } .dashboard-row > .dashboard-heading-registrar, .dashboard-row > .dashboard-col-left, .dashboard-row > .dashboard-col-right, .dashboard-row > .dashboard-col-avisos { width: auto; max-width: none; } .dashboard-row > .dashboard-heading-registrar { grid-area: heading; margin: 1.75rem 0 0; } .dashboard-row > .dashboard-col-left { grid-area: left; } .dashboard-row > .dashboard-col-right { grid-area: right; } .dashboard-row > .dashboard-col-avisos { grid-area: avisos; } } /* Resalta la fila (cliente/proveedor/producto) bajo el cursor en escritorio, para no perder de vista cuál se estaba viendo al volver de un botón. Se limita a dispositivos con mouse real (hover:hover) para no dejar un fondo "pegado" al tocar en celular. */ @media (hover: hover) { .entity-row:hover, #inventory-list > li:hover { background-color: rgba(13, 148, 136, 0.06); } } /* Widget flotante de Ayuda (burbuja + panel de chat de 2 niveles). */ .help-widget { position: fixed; left: 16px; bottom: 16px; z-index: 1050; } .help-widget-bubble { width: 56px; height: 56px; border-radius: 50%; background: var(--bs-primary); color: #fff; border: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); font-size: 1.4rem; display: flex; align-items: center; justify-content: center; } .help-widget-bubble.help-widget-attention { animation: help-widget-pulse 1.6s ease-out 3; } @keyframes help-widget-pulse { 0% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(13, 148, 136, 0.6); } 70% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 0 16px rgba(13, 148, 136, 0); } 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(13, 148, 136, 0); } } .help-widget-panel { position: absolute; bottom: 68px; left: 0; width: 340px; max-width: calc(100vw - 24px); max-height: 70vh; background: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); border-radius: 0.75rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; overflow: hidden; } .help-widget-header { background: var(--bs-primary); color: #fff; padding: 0.6rem 0.85rem; display: flex; justify-content: space-between; align-items: center; font-weight: 600; } .help-widget-minimize { background: transparent; border: none; color: #fff; font-size: 1.25rem; line-height: 1; padding: 0 0.25rem; } .help-widget-body { flex: 1; overflow-y: auto; padding: 0.75rem; font-size: 0.9rem; min-height: 160px; } .help-widget-msg { margin-bottom: 0.65rem; display: flex; } .help-widget-msg-user { justify-content: flex-end; } .help-widget-bubble-text { max-width: 85%; padding: 0.5rem 0.75rem; border-radius: 0.75rem; background: var(--bs-tertiary-bg, var(--bs-secondary-bg)); } .help-widget-msg-user .help-widget-bubble-text { background: var(--bs-primary); color: #fff; } .help-widget-typing span { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; animation: help-widget-typing-blink 1s infinite ease-in-out; } .help-widget-typing span:nth-child(2) { animation-delay: 0.15s; } .help-widget-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes help-widget-typing-blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } } .help-widget-form { display: flex; gap: 0.5rem; padding: 0.6rem 0.75rem; border-top: 1px solid var(--bs-border-color); } .help-widget-form input { flex: 1; } @media (max-width: 480px) { .help-widget-bubble { width: 48px; height: 48px; font-size: 1.2rem; } .help-widget-panel { width: calc(100vw - 24px); } } /* La burbuja de Ayuda es fija abajo-izquierda en todas las páginas; sin este espacio, al hacer scroll hasta el final quedaba encima de botones o texto de la última tarjeta de cada página. */ main.container { padding-bottom: calc(1.5rem + 96px); } @media (max-width: 480px) { main.container { padding-bottom: calc(1.5rem + 88px); } } /* Franjas suaves alternadas en la lista de Inventario: con varios productos seguidos, cada uno con su propio bloque de precio/existencia, era fácil perder de vista dónde terminaba uno y empezaba el siguiente — esto marca la separación sin agregar bordes ni recuadros nuevos. */ #inventory-list > li:nth-child(even) { background-color: rgba(13, 148, 136, .16); } [data-bs-theme="dark"] #inventory-list > li:nth-child(even) { background-color: rgba(20, 184, 166, .22); } /* ============================================================ Pasada visual general: transiciones suaves, sombras con más profundidad y radios más consistentes con las tarjetas (0.75rem). Deliberadamente NO toca paddings, márgenes ni anchos — todas las pantallas del sistema ya se probaron una por una contra desbordamiento en móvil, y cambiar tamaños hubiera obligado a reprobarlas todas de nuevo. Esto solo se ve/siente más pulido, sin mover nada de lugar. ============================================================ */ .btn, .form-control, .form-select, .nav-link, .dropdown-item, .card, .list-group-item, .badge { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease; } .btn { border-radius: 0.5rem; } .btn-sm { border-radius: 0.4rem; } .form-control, .form-select { border-radius: 0.5rem; } .badge { border-radius: 0.4rem; font-weight: 600; } .card { box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07); } [data-bs-theme="dark"] .card { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } /* Insignia del banner "Instalar app" en el login — un pulso suave (3 veces, no infinito, para no distraer todo el tiempo) que llama la atención hacia la opción de instalar la app sin competir visualmente con "Entrar". */ #pwa-icon-badge { animation: pwa-badge-pulse 1.8s ease-out 3; } @keyframes pwa-badge-pulse { 0% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.5); } 70% { box-shadow: 0 0 0 14px rgba(13, 148, 136, 0); } 100% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0); } }