:root { --bg: #f5f8f6; --panel: #ffffff; --border: #e2e6ee; --text: #0d1117; --muted: #6b7280; /* Paleta de marca Kowski: negro, blanco y verde vivo (bateria + hojas del logo) */ --brand-black: #0a0a0a; --brand-green: #06f73f; --brand-green-soft: #eafbf0; --on-brand-green: #04220f; --primary: #0a8a3d; --primary-dark: #076b2f; --radius: 10px; --c-pendiente: #9ca3af; --c-asignado: #3b82f6; --c-recogido: #6366f1; --c-en_transito: #8b5cf6; --c-entregado: #06f73f; --c-incidencia: #dc2626; --c-cancelado: #262626; --table-head-bg: #f8f9fc; --surface-2: white; } /* Aspecto oscuro: se activa agregando data-theme="dark" al (ver Configuración de cuenta). Redefine las mismas variables intercambiando los colores del sitio. */ html[data-theme="dark"] { --bg: #101217; --panel: #1a1d24; --border: #2c303a; --text: #e8eaed; --muted: #9aa1ac; --brand-green-soft: rgba(6, 247, 63, 0.14); --primary: #2fe86a; --primary-dark: #06f73f; --table-head-bg: #20232c; --surface-2: #20232c; } html[data-theme="dark"] .urg-badge.urgente { background: rgba(220, 38, 38, .22); color: #f87171; } html[data-theme="dark"] .urg-badge.normal { background: rgba(217, 119, 6, .22); color: #fbbf24; } html[data-theme="dark"] .urg-badge.a-tiempo { background: rgba(21, 128, 61, .22); color: #4ade80; } html[data-theme="dark"] .badge.perm-off { background: rgba(255, 255, 255, .12); } html[data-theme="dark"] .timeline li::before { box-shadow: 0 0 0 2px var(--panel); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); } header.topbar { background: var(--panel); border-top: 3px solid var(--brand-green); border-bottom: 1px solid var(--border); padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; } header.topbar .brand { display: flex; align-items: center; gap: 12px; } header.topbar .brand-logo { height: 30px; width: auto; display: block; } header.topbar .brand-divider { width: 1px; height: 24px; background: var(--border); } .brand-subtitle { font-family: 'Poppins', 'Segoe UI', sans-serif; font-size: 15px; color: var(--brand-black); font-weight: 700; letter-spacing: .2px; } /* En aspecto oscuro "Last Mile" pasa a blanco (ver también el logo, que cambia de imagen). */ html[data-theme="dark"] .brand-subtitle { color: #ffffff; } /* Logo de la cuenta de cliente autenticada, junto a "Last Mile" (ver Mi Marca). Fondo claro fijo (independiente del aspecto oscuro/claro del panel): el logo lo sube el cliente pensado para verse sobre fondo claro, igual que en el correo de notificacion. */ /* Caja de tamaño FIJO (no max-height/max-width) para mostrar el logo de cualquier cuenta de cliente: cada cliente sube un logo con proporciones distintas (ancho, cuadrado, etc.), y con solo un tope maximo cada uno terminaba ocupando un espacio visual distinto (uno mas angosto, otro mas alto) aunque ninguno se viera deformado. Con width/height fijos + object-fit:contain, el logo se escala dentro de esa caja sin deformarse (como antes) pero TODOS los clientes quedan exactamente en las mismas medidas -- el que no llena la caja entera queda centrado ("letterboxed"), en vez de estirado. Se reusa esta misma clase en el header, en la previsualización del modal de Usuarios y en "Mi marca" para que las tres se vean consistentes entre si. Ver tambien el mismo criterio aplicado al logo del cliente en el PDF de reportes (generatePdfReport en app.js), donde no se puede usar CSS. */ .client-logo-box { width: 150px; height: 40px; object-fit: contain; background: #ffffff; border-radius: 5px; padding: 3px 6px; box-sizing: content-box; /* Sin esto, dentro de ".brand" (display:flex) el navegador podia achicar la caja para hacerle espacio a otros elementos del header si la ventana quedaba angosta -- distintos clientes terminaban viendose en tamaños distintos igual, segun cuanto espacio les tocara en ese momento en vez de la medida fija definida arriba. */ flex-shrink: 0; } .header-client-logo { margin-left: 2px; } /* Misma idea que .client-logo-box, pero mas grande: se usa en las previsualizaciones de logo (modal de Usuarios y "Mi marca"), donde conviene verlo con mas detalle que en el header. */ .client-logo-box-lg { width: 220px; height: 70px; object-fit: contain; background: #f4f4f4; border-radius: 6px; padding: 8px; border: 1px solid var(--border); box-sizing: content-box; } nav.tabs { display: flex; gap: 4px; padding: 0 24px; background: var(--panel); border-bottom: 1px solid var(--border); } nav.tabs button { border: none; background: none; padding: 12px 16px; font-size: 14px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; } nav.tabs button.active { color: var(--primary); border-bottom-color: var(--brand-green); font-weight: 600; } main { padding: 20px 24px 60px; max-width: 1300px; margin: 0 auto; } .tab-panel { display: none; } .tab-panel.active { display: block; } .toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .toolbar select, .toolbar input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; } button.btn { background: var(--brand-green); color: var(--on-brand-green); border: none; padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; } button.btn:hover { background: #05d636; } button.btn.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); font-weight: 400; } button.btn.secondary:hover { background: var(--brand-green-soft); } /* Rojo pastel (fondo claro + texto/borde saturado) en vez de rojo solido: mismo criterio que .urg-badge.urgente mas abajo, para que las acciones destructivas se noten sin ser tan agresivas visualmente. */ button.btn.danger { background: #fde2e1; color: #dc2626; } button.btn.danger:hover { background: #fbc9c7; } button.btn:disabled { opacity: .5; cursor: not-allowed; } button.btn.btn-sm { padding: 4px 9px; font-size: 11.5px; border-radius: 5px; line-height: 1.5; } /* flex-wrap: nowrap a proposito: ahora que las acciones son iconos chicos (no botones de texto largo), conviene que el grupo (badge + iconos) siempre quede en una sola linea aunque la columna quede angosta, en vez de partirse a una segunda linea dentro de la celda -- si la tabla no entra completa, el contenedor que la envuelve ya tiene scroll horizontal (ver #couriers-table-wrap) en vez de romper cada fila. */ .action-buttons { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; } /* Las etiquetas (Habilitado, En ruta, etc.) que aparecen mezcladas con estos botones bajan a la misma escala, para que toda la fila se vea pareja en vez de con piezas de distinto tamaño. */ .action-buttons .badge { font-size: 11px; padding: 3px 8px; } /* Botones de accion (icono + tooltip via title/aria-label) usados en filas de tabla (Usuarios, Repartidores) en vez de botones de texto largo, para que cada fila quepa en pocas lineas. El significado de cada icono se explica al pasar el mouse por encima. */ .icon-btn-table { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; padding: 0; flex-shrink: 0; } .icon-btn-table:hover { background: var(--brand-green-soft); color: var(--primary); border-color: var(--primary); } .icon-btn-table.danger { color: #dc2626; } .icon-btn-table.danger:hover { background: #fde2e1; border-color: #f5a9a6; } .icon-btn-table:disabled { opacity: .5; cursor: not-allowed; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; } .kpi .label { font-size: 13px; color: var(--muted); margin-bottom: 6px; } .kpi .value { font-size: 26px; font-weight: 700; } table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } thead { background: var(--table-head-bg); } th, td { text-align: left; padding: 10px 14px; font-size: 13.5px; border-bottom: 1px solid var(--border); } tr:last-child td { border-bottom: none; } tr.clickable { cursor: pointer; } tr.clickable:hover { background: var(--table-head-bg); } td.nowrap { white-space: nowrap; } #couriers-table-wrap, #users-table-wrap { overflow-x: auto; } .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: white; white-space: nowrap; } .badge.pendiente { background: var(--c-pendiente); } .badge.asignado { background: var(--c-asignado); } .badge.recogido { background: var(--c-recogido); } .badge.en_transito { background: var(--c-en_transito); } .badge.entregado { background: var(--c-entregado); color: var(--on-brand-green); } .badge.incidencia { background: var(--c-incidencia); } .badge.cancelado { background: var(--c-cancelado); } .badge.service-sameday { background: #0891b2; } .badge.service-express { background: #ea580c; } .badge.service-flex { background: #7c3aed; } .badge.service-programado { background: #4b5563; } .grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; } #map-live, #map-detail, #map-tracking { width: 100%; height: 420px; border-radius: var(--radius); border: 1px solid var(--border); } #map-detail { height: 260px; } .legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--muted); } .legend span.sw { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; } .timeline { list-style: none; margin: 0; padding: 0; } .timeline li { padding: 10px 0 10px 20px; border-left: 2px solid var(--border); position: relative; font-size: 13.5px; } .timeline li::before { content: ''; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 0 2px white; } .timeline li .t-time { color: var(--muted); font-size: 12px; } .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 20, 30, .45); align-items: center; justify-content: center; z-index: 100; } .modal-overlay.open { display: flex; } /* "Asignar repartidor" se abre desde ARRIBA del modal de detalle del pedido (#modal-detail), que sigue abierto detras -- sin esto, como ambos comparten el mismo z-index, el que aparece despues en el HTML (#modal-detail) tapa al que se abrio despues en el tiempo. */ #modal-assign { z-index: 110; } .modal { background: var(--panel); border-radius: var(--radius); width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; padding: 22px 24px; } .modal.wide { max-width: 820px; } .modal h2 { margin-top: 0; font-size: 17px; } .modal .close { float: right; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; } .form-row { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; } .form-row label { font-size: 13px; color: var(--muted); } .form-row input, .form-row select, .form-row textarea { padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; } .form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } .hint { font-size: 12px; color: var(--muted); } .order-client-tag { font-size: 11px; font-weight: 600; color: var(--primary); margin-top: 2px; } .error-msg { color: var(--c-incidencia); font-size: 13px; margin-top: 6px; min-height: 16px; } .empty-state { text-align: center; color: var(--muted); padding: 40px 0; } .pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .notif-item { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .notif-item:last-child { border-bottom: none; } .notif-item .chan { display: inline-block; font-size: 11px; text-transform: uppercase; background: var(--brand-green-soft); color: var(--primary); padding: 2px 8px; border-radius: 6px; margin-right: 8px; } input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); } a { color: var(--primary); } /* Sub-pestañas dentro de una pestaña principal (ej. Rutas) */ nav.subtabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .subtab-btn, .pedidos-group-btn { border: none; background: none; padding: 8px 14px; font-size: 13.5px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; } .subtab-btn.active, .pedidos-group-btn.active { color: var(--primary); border-bottom-color: var(--brand-green); font-weight: 600; background: var(--brand-green-soft); } .subtab-panel { display: none; } .subtab-panel.active { display: block; } /* Tablero de asignacion on-demand (arrastrar y soltar) */ .dnd-list { display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow-y: auto; } .dnd-card { border: 1.5px solid var(--primary); border-radius: 8px; padding: 10px 12px; background: var(--surface-2); cursor: grab; font-size: 13.5px; } .dnd-card:active { cursor: grabbing; } .dnd-card.dragging { opacity: .4; } .dnd-card .dnd-code { font-weight: 700; } .dnd-card .dnd-sub { color: var(--muted); font-size: 12px; margin-top: 2px; } .dnd-board { display: flex; flex-direction: column; gap: 10px; max-height: 480px; overflow-y: auto; } .dnd-drop-zone { border: 2px dashed var(--border); border-radius: 10px; padding: 12px; transition: background .15s, border-color .15s; } .dnd-drop-zone.drag-over { border-color: var(--brand-green); background: var(--brand-green-soft); } .dnd-drop-zone .courier-name { font-weight: 600; } .dnd-drop-zone .courier-meta { color: var(--muted); font-size: 12px; margin-top: 2px; } .dnd-drop-zone .drop-hint { font-size: 12px; color: var(--muted); margin-top: 8px; font-style: italic; } .dnd-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; background: var(--brand-green); } /* Pedidos en cola dentro de un repartidor, a la espera de confirmar la asignacion */ .dnd-staged-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .dnd-staged-chip { display: flex; align-items: center; gap: 6px; background: var(--brand-green-soft); color: var(--primary); border: 1px solid var(--brand-green); border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 12px; font-weight: 600; } .dnd-staged-chip .dnd-unstage { border: none; background: none; color: var(--primary); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; } .dnd-staged-chip .dnd-unstage:hover { color: var(--c-incidencia); } .dnd-confirm-btn { display: block; width: 100%; margin-top: 10px; } /* Pantalla de login */ #app-shell.hidden { display: none; } .login-overlay { display: none; position: fixed; inset: 0; background: var(--brand-black); align-items: center; justify-content: center; z-index: 200; } .login-overlay.open { display: flex; } .login-box { background: var(--panel); border-radius: var(--radius); width: 100%; max-width: 360px; padding: 28px 26px; border-top: 3px solid var(--brand-green); } .login-logo { display: block; height: 34px; width: auto; margin: 0 auto 6px; } .topbar-icons { display: flex; align-items: center; gap: 8px; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: none; background: none; color: var(--muted); cursor: pointer; } .icon-btn:hover { background: var(--brand-green-soft); color: var(--primary); } .icon-btn.icon-btn-avatar { background: var(--brand-green-soft); color: var(--primary); } .icon-btn.icon-btn-avatar:hover { background: var(--brand-green); color: var(--on-brand-green); } .profile-menu-wrap { position: relative; } .profile-dropdown { display: none; position: absolute; top: 42px; right: 0; min-width: 220px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 6px; z-index: 150; } .profile-dropdown.open { display: block; } .profile-dropdown-email { padding: 10px 12px 8px; font-size: 12px; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--border); margin-bottom: 4px; word-break: break-all; } .profile-dropdown-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 9px 12px; font-size: 13.5px; color: var(--text); border-radius: 6px; cursor: pointer; } .profile-dropdown-item:hover { background: var(--brand-green-soft); color: var(--primary); } /* Rangos de urgencia (Configuración de cuenta) */ .urg-badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .2px; } .urg-badge.urgente { background: #fde2e1; color: #dc2626; } .urg-badge.normal { background: #fef3d6; color: #b45309; } .urg-badge.a-tiempo { background: #dcfce7; color: #15803d; } /* Badge numerico con el conteo de pedidos en cada sub-pestaña de Pedidos */ .count-badge { display: inline-block; background: var(--muted); color: white; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 6px; } .pedidos-group-btn.active .count-badge { background: var(--primary); } /* Columna "Tiempo Restante" (minutos), con el mismo color que la etiqueta de urgencia */ .time-remaining { line-height: 1.15; } .time-remaining .tr-value { font-size: 18px; font-weight: 700; display: inline-block; animation: tr-blink 2.4s ease-in-out infinite; } .time-remaining .tr-unit { font-size: 11px; color: var(--muted); display: block; } .time-remaining.urgente .tr-value { color: #dc2626; } .time-remaining.normal .tr-value { color: #b45309; } .time-remaining.a-tiempo .tr-value { color: #15803d; } /* Parpadeo lento y suave (no una alarma frenetica) para llamar la atencion sobre el tiempo restante sin resultar molesto. */ @keyframes tr-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .time-remaining .tr-value { animation: none; } } .urg-range-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); } .urg-range-row:last-child { border-bottom: none; } .urg-range-label { display: flex; align-items: center; gap: 8px; font-size: 14px; } .urg-range-input { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; } .urg-range-unit { font-size: 11px; color: var(--muted); } .urg-range-input input { border: none; font-size: 16px; width: 70px; background: none; color: var(--text); padding: 0; } .urg-range-input input:focus { outline: none; } /* Interruptor "Aspecto oscuro" */ .theme-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 999px; transition: background .15s; } .switch .slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: transform .15s; } .switch input:checked + .slider { background: var(--brand-green); } .switch input:checked + .slider::before { transform: translateX(18px); } /* Ocultar elementos segun el permiso del usuario autenticado, o segun si la cuenta es una cuenta de cliente (ver public/js/app.js applyPermissionGating) */ [data-permission].perm-hidden, [data-hide-for-client].perm-hidden, [data-client-only].perm-hidden { display: none !important; } /* Checkboxes de permisos en el modal de usuarios */ .perm-checks { display: flex; flex-direction: column; gap: 8px; } .perm-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text) !important; } /* Verde pastel (no el verde oscuro de marca) para que la lista de permisos de cada cuenta no se vea tan cargada visualmente; mismo criterio de "pastel" que button.btn.danger arriba. */ .badge.perm-on { background: #dcfce7; color: #15803d; } .badge.perm-off { background: #d1d5db; color: var(--muted); } .badge.perm-more { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); } /* Contenedor de badges de "Permisos" en la tabla de Usuarios: se limita su alto a ~2 lineas (ver MAX_PERM_BADGES en renderUsersTable, que ademas limita cuantos badges se generan) para que ninguna fila crezca demasiado, sin importar cuantos permisos tenga la cuenta. */ .perm-badges-cell { display: flex; flex-wrap: wrap; gap: 4px; max-width: 480px; } /* --------------------------------------------------------------------------- Busqueda avanzada: seccion desplegable dentro de la pestaña Pedidos (se abre con el boton "Búsqueda avanzada" de la barra de arriba). Empuja el contenido hacia abajo en vez de flotar encima; los resultados se ven en la tabla de pedidos de siempre, asi que se pueden exportar con el boton "Exportar". --------------------------------------------------------------------------- */ #advanced-search-panel { display: none; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; } #advanced-search-panel.open { display: block; } .adv-search-header { margin-bottom: 14px; position: relative; padding-right: 26px; } .adv-search-header h3 { margin: 0 0 4px; font-size: 16px; } .adv-search-close { position: absolute; top: -4px; right: -4px; width: 28px; height: 28px; border: none; background: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--muted); border-radius: 50%; } .adv-search-close:hover { background: var(--bg); color: var(--text); } .adv-search-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 16px; align-items: end; } .adv-search-fields .form-row { margin-bottom: 0; } .adv-search-clear-row .btn { width: 100%; } /* Mientras hay algun filtro de busqueda avanzada activo, se atenuan las pestañas y los filtros normales (quedan sin efecto mientras tanto, ver getFilteredOrders) para que quede claro de un vistazo que estan en pausa. */ #tab-pedidos.adv-mode-active #pedidos-subtabs, #tab-pedidos.adv-mode-active > .toolbar > select, #tab-pedidos.adv-mode-active > .toolbar > #orders-search { opacity: .45; pointer-events: none; } /* Selector de cuenta de cliente (staff, o cliente con permiso view_all_orders). */ .order-context-bar { display: flex; align-items: center; gap: 10px; background: var(--brand-green-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; } .order-context-bar label { font-size: 13px; font-weight: 700; color: var(--text); } .order-context-bar select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; } .order-context-bar .hint { margin-left: auto; text-align: right; }