/* Sistema visual central. Referencia: catálogo de componentes compartido por el usuario. Cambiar aquí los tokens y patrones; las vistas conservan sus eventos y datos. */ :root { /* Marca H&S: ámbar #f9a400 + grafito #333333 sobre neutros (#e2e2e2, blanco). El ámbar NUNCA va como texto sobre blanco (contraste 2:1): para texto se usa --ui-accent-ink y, sobre fondo ámbar, --ui-on-accent. */ --ui-brand: #333333; /* Reparto: grafito = acciones principales; azul H&S (el del logo) = selección, enlaces y datos; ámbar = SOLO acento (activo del menú, pestañas, destacados). */ --ui-primary: #262626; --ui-primary-hover: #000000; --ui-on-primary: #ffffff; --ui-secondary: #10243d; --ui-secondary-soft: #eaf0f7; --ui-secondary-ink: #1b3a60; --ui-accent: #f9a400; --ui-accent-hover: #e89800; --ui-accent-soft: #fff5dc; --ui-accent-ink: #9a6700; --ui-on-accent: #1f1f1f; --ui-focus: #1b3a60; /* Colores de intención (fondos, íconos, bordes). */ --ui-blue: #1d4ed8; --ui-green: #16a34a; --ui-red: #dc2626; --ui-orange: #f97316; --ui-purple: #9333ea; --ui-indigo: #4f46e5; --ui-teal: #0d9488; /* Tintas: el mismo color, más oscuro, para TEXTO sobre fondos claros (contraste AA). */ --ui-blue-ink: #1e40af; --ui-green-ink: #15803d; --ui-red-ink: #b91c1c; --ui-orange-ink: #c2410c; --ui-purple-ink: #7e22ce; --ui-bg: #eef0f3; --ui-surface: #ffffff; --ui-subtle: #f7f7f7; --ui-text: #262626; --ui-muted: #6b6b6b; --ui-border: #e2e2e2; --ui-border-strong: #d4d4d4; --ui-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04); --ui-shadow-hover: 0 10px 28px rgba(0,0,0,.09), 0 3px 8px rgba(0,0,0,.05); --ui-shadow-modal: 0 24px 56px rgba(0,0,0,.18); } /* Paginación Segura del Sistema Visual */ .ui-pagination svg, nav[role="navigation"] svg { width: 14px !important; height: 14px !important; max-width: 14px !important; max-height: 14px !important; min-width: 14px !important; min-height: 14px !important; display: inline-block !important; vertical-align: middle !important; } .ui-pagination a, .ui-pagination span { box-sizing: border-box !important; } .dark { --ui-primary: #f2f2f2; --ui-primary-hover: #ffffff; --ui-on-primary: #151515; --ui-secondary: #8db8e8; --ui-secondary-soft: rgba(141,184,232,.14); --ui-secondary-ink: #a9cbf0; --ui-accent-soft: rgba(249,164,0,.16); --ui-accent-ink: #ffc24d; --ui-focus: #8db8e8; --ui-blue: #3b82f6; --ui-green: #22c55e; --ui-red: #ef4444; --ui-orange: #fb923c; --ui-purple: #a855f7; --ui-indigo: #818cf8; --ui-teal: #2dd4bf; --ui-blue-ink: #93c5fd; --ui-green-ink: #86efac; --ui-red-ink: #fca5a5; --ui-orange-ink: #fdba74; --ui-purple-ink: #d8b4fe; --ui-bg: #0e0e10; --ui-surface: #1a1a1d; --ui-subtle: #242428; --ui-text: #ededed; --ui-muted: #a8a8ad; --ui-border: rgba(255,255,255,.1); --ui-border-strong: rgba(255,255,255,.2); --ui-shadow: 0 1px 2px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.35); --ui-shadow-hover: 0 14px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); --ui-shadow-modal: 0 20px 50px rgba(0,0,0,.6); } /* Superficies y tarjetas: las variantes compacta, fila y mini usan el mismo patrón. */ .admin-table-shell, .admin-kpi-card, .admin-mobile-card, .ui-card { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: var(--ui-shadow); color: var(--ui-text); transition: border-color .22s, box-shadow .22s, transform .22s; } .admin-table-shell { border-radius: 14px; } .admin-kpi-card, .admin-mobile-card, .ui-card { position: relative; overflow: hidden; } .admin-kpi-card:hover, .admin-mobile-card:hover, .ui-card:hover { border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-hover); transform: translateY(-2px); } .admin-kpi-card::before, .ui-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--ui-accent); opacity: 0; transition: opacity .22s; } .admin-kpi-card:hover::before, .ui-card:hover::before { opacity: 1; } .ui-card--compact { padding: 8px 10px; border-radius: 10px; } .ui-card--default { padding: 12px; } .ui-card--row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; } .ui-card--mini { padding: 10px 12px; border-radius: 11px; } .admin-kpi-card-icon { color: var(--ui-accent-ink); } .admin-kpi-card-value b, .admin-header-title { color: var(--ui-text); } .admin-kpi-card-head, .admin-header-subtitle { color: var(--ui-muted); } .admin-toolbar, .admin-table-head { background: var(--ui-subtle); border-color: var(--ui-border); } .admin-table-row:hover { background: var(--ui-subtle); } /* Puente para pantallas existentes que todavía expresan la tarjeta con Tailwind. */ .ui-app-content :is(section,article,form,div)[class~="bg-white"][class~="rounded-2xl"][class*="border"], .ui-app-content :is(section,article,form,div)[class~="bg-white"][class~="rounded-xl"][class*="shadow"] { background: var(--ui-surface); border-color: var(--ui-border); box-shadow: var(--ui-shadow); } .ui-app-content :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]) { border-radius: 10px; } .ui-app-content :is(input,select,textarea):focus-visible { outline-color: var(--ui-focus); } .ui-app-content :is(button,a)[class~="bg-blue-600"], .ui-app-content :is(button,a)[class~="bg-emerald-600"] { background: var(--ui-primary); border-radius: 11px; box-shadow: 0 2px 6px rgba(20,25,40,.06); transition: background .22s, box-shadow .22s, transform .22s; } .ui-app-content :is(button,a)[class~="bg-blue-600"] { color: var(--ui-on-primary); } .ui-app-content :is(button,a)[class~="bg-blue-600"]:hover, .ui-app-content :is(button,a)[class~="bg-emerald-600"]:hover { box-shadow: 0 6px 16px rgba(0,0,0,.18); transform: translateY(-1px); } .ui-app-content :is(button,a)[class~="bg-blue-600"]:hover { background: var(--ui-primary-hover); } .ui-app-content :is(button,a)[class~="bg-emerald-600"] { background: var(--ui-green); } .ui-app-content :is(button,a)[class~="bg-emerald-600"]:hover { background: color-mix(in srgb,var(--ui-green) 86%,#000); } /* Botones principales heredados en otros tonos (índigo, esmeralda claro): ámbar de marca. */ .ui-app-content :is(button,a):is([class~="bg-indigo-600"],[class~="bg-emerald-500"]) { background: var(--ui-primary); border-color: var(--ui-primary); color: var(--ui-on-primary); box-shadow: 0 2px 6px rgba(0,0,0,.12); } .ui-app-content :is(button,a):is([class~="bg-indigo-600"],[class~="bg-emerald-500"]):hover { background: var(--ui-primary-hover); } /* Botones: el color distingue la intención, con la misma forma y respuesta. */ .ui-btn { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; font-size: 13.5px; cursor: pointer; } .ui-btn:disabled { cursor: not-allowed; opacity: .5; } :is(.admin-btn-primary,.admin-btn-secondary,.admin-btn-warning,.admin-btn-icon,.admin-refresh-button,.admin-clear-filters,.admin-pagination-btn,.admin-mobile-action-btn,.ui-btn) { border-radius: 11px; font-weight: 600; box-shadow: 0 2px 6px rgba(20,25,40,.06), 0 1px 2px rgba(20,25,40,.04); transition: background .22s, border-color .22s, color .22s, box-shadow .22s, transform .22s; } :is(.admin-btn-primary,.ui-btn--primary) { background: var(--ui-primary); border: 1px solid var(--ui-primary); color: var(--ui-on-primary); } :is(.admin-btn-primary,.ui-btn--primary):hover:not(:disabled) { background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); box-shadow: 0 6px 16px rgba(0,0,0,.18); transform: translateY(-1px); } :is(.admin-btn-secondary,.admin-btn-icon,.admin-refresh-button,.admin-clear-filters,.admin-pagination-btn,.ui-btn--secondary) { background: var(--ui-surface); border: 1px solid var(--ui-border-strong); color: var(--ui-text); } :is(.admin-btn-secondary,.admin-btn-icon,.admin-refresh-button,.admin-clear-filters,.admin-pagination-btn,.ui-btn--secondary):hover:not(:disabled) { background: var(--ui-subtle); box-shadow: var(--ui-shadow); transform: translateY(-1px); } .admin-btn-warning, .ui-btn--warning { background: color-mix(in srgb,var(--ui-orange) 12%,var(--ui-surface)); border: 1px solid color-mix(in srgb,var(--ui-orange) 32%,var(--ui-border)); color: var(--ui-orange-ink); } .ui-btn--danger { background: color-mix(in srgb,var(--ui-red) 10%,var(--ui-surface)); border: 1px solid color-mix(in srgb,var(--ui-red) 28%,var(--ui-border)); color: var(--ui-red-ink); } :is(.admin-btn-primary,.admin-btn-secondary,.admin-btn-warning,.admin-btn-icon,.ui-btn):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; } /* Variantes de acción por fila (ver/editar/activar/desactivar/eliminar/más): definidas en «Botones de acción en tablas», al final del archivo. */ /* Formularios y menús de acciones. La lógica permanece en Alpine/JS. */ .admin-search-input, .admin-select, .ui-field { background: var(--ui-surface); border: 1px solid var(--ui-border-strong); border-radius: 10px; color: var(--ui-text); } .admin-search-input:focus, .admin-select:focus, .ui-field:focus { border-color: var(--ui-secondary); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb,var(--ui-secondary) 18%,transparent); } .admin-menu-item, .ui-menu-item { color: var(--ui-text); border-radius: 7px; font-size: 13px; font-weight: 500; } .admin-menu-item:hover, .ui-menu-item:hover { background: var(--ui-subtle); } .ui-menu-item--danger { color: var(--ui-red); } .ui-menu-item--danger:hover { background: color-mix(in srgb,var(--ui-red) 10%,var(--ui-surface)); } .ui-action-menu { min-width: 190px; padding: 6px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: var(--ui-shadow-hover); } /* Modales: Ocultamiento riguroso cuando están inactivos, con x-cloak o display:none */ [x-cloak], [x-cloak] *, [hidden], .ui-form-modal[x-cloak], .admin-modal-overlay[x-cloak], .pos-modal-overlay[x-cloak], .modal-overlay[x-cloak], .modal-backdrop[x-cloak], .ui-form-modal[hidden], .admin-modal-overlay[hidden], .pos-modal-overlay[hidden], .modal-overlay[hidden], .modal-backdrop[hidden], .ui-form-modal[style*="display: none"], .admin-modal-overlay[style*="display: none"], .pos-modal-overlay[style*="display: none"], .modal-overlay[style*="display: none"], .modal-backdrop[style*="display: none"], .ui-form-modal[style*="display:none"], .admin-modal-overlay[style*="display:none"], .pos-modal-overlay[style*="display:none"], .modal-overlay[style*="display:none"], .modal-backdrop[style*="display:none"] { display: none !important; } /* Modales activos: Centrados perfectamente en pantalla completa con backdrop oscuro */ .ui-form-modal:not([x-cloak]):not([hidden]):not([style*="display: none"]):not([style*="display:none"]), .admin-modal-overlay:not([x-cloak]):not([hidden]):not([style*="display: none"]):not([style*="display:none"]), .pos-modal-overlay:not([x-cloak]):not([hidden]):not([style*="display: none"]):not([style*="display:none"]), .modal-overlay:not([x-cloak]):not([hidden]):not([style*="display: none"]):not([style*="display:none"]), .modal-backdrop:not([x-cloak]):not([hidden]):not([style*="display: none"]):not([style*="display:none"]) { position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 100000 !important; background: rgba(9, 15, 29, 0.72) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; padding: 16px !important; box-sizing: border-box !important; overflow-y: auto !important; margin: 0 !important; } .ui-form-modal > .fixed.inset-0, .ui-form-modal > .fixed[class*="inset-0"], .admin-modal-overlay > .fixed.inset-0, .pos-modal-overlay > .fixed.inset-0, .modal-backdrop > .fixed.inset-0 { position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: transparent !important; z-index: 100001 !important; pointer-events: auto !important; } .ui-modal-panel, .admin-modal-panel, .pos-modal-card, .modal-content-centered { position: relative !important; margin: auto !important; z-index: 100002 !important; background: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; border-radius: 18px !important; box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.06) !important; max-height: calc(100vh - 36px) !important; overflow-y: auto !important; color: var(--ui-text) !important; box-sizing: border-box !important; scrollbar-gutter: stable; } /* Clases de ancho estándar para paneles de modales */ .max-w-sm { max-width: 384px !important; width: 100% !important; } .max-w-md { max-width: 460px !important; width: 100% !important; } .max-w-lg { max-width: 560px !important; width: 100% !important; } .max-w-xl { max-width: 660px !important; width: 100% !important; } .max-w-2xl { max-width: 780px !important; width: 100% !important; } .max-w-3xl { max-width: 900px !important; width: 100% !important; } .max-w-4xl { max-width: 1040px !important; width: 100% !important; } .ui-modal-panel.flex { min-height: 0; overflow-x: hidden; overflow-y: auto; } .ui-modal-panel.flex > :is(form,section,main,div).overflow-y-auto { min-height: 0; } .ui-modal-panel :is(header,footer) { flex-shrink: 0; } .ui-modal-panel.ui-modal-panel--scroll-interno { overflow: hidden; overflow: clip; scrollbar-gutter: auto; } .ui-zona-soltar--activa, [data-soltar="activa"] { border-color: var(--ui-blue) !important; background: color-mix(in srgb, var(--ui-blue) 10%, var(--ui-surface)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-blue) 25%, transparent); } .ui-modal-panel.ui-modal-panel--alto-fijo { height: min(var(--ui-modal-alto, 760px), calc(100dvh - 32px)); max-height: calc(100dvh - 32px); } @media (max-width: 640px) { .ui-modal-panel.ui-modal-panel--alto-fijo { height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); } } @media (max-width: 640px) { .ui-modal-panel { max-height: calc(100dvh - 16px); } } .ui-form-modal :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { border-radius: 10px; } .ui-form-modal :is(input,select,textarea):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; } /* Verificación de ubicación: mapa protagonista, inspector compacto y acciones siempre visibles. */ .ui-map-overlay { display: grid; place-items: center; padding: 16px; isolation: isolate; } .ui-map-backdrop { position: absolute; inset: 0; background: rgba(9,16,31,.66); backdrop-filter: blur(7px); } .ui-map-modal.ui-modal-panel { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(100%,1020px); max-width: 1020px; height: min(720px,calc(100dvh - 32px)); padding: 0; overflow: hidden; border-radius: 20px; } .ui-map-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 22px; border-bottom: 1px solid var(--ui-border); } .ui-map-modal__heading, .ui-map-modal__header-actions, .ui-map-modal__section-head { display: flex; align-items: center; gap: 12px; min-width: 0; } .ui-map-modal__symbol, .ui-map-modal__section-icon { display: grid; flex: none; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb,var(--ui-blue) 11%,var(--ui-surface)); color: var(--ui-blue); font-size: 21px; } .ui-map-modal__eyebrow { margin: 0 0 2px; color: var(--ui-muted); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; } .ui-map-modal__title { overflow: hidden; margin: 0; color: var(--ui-text); font-size: 18px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .ui-map-modal__status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; } .ui-map-modal__status--active { background: color-mix(in srgb,var(--ui-blue) 10%,var(--ui-surface)); color: var(--ui-blue); } .ui-map-modal__status--muted { background: var(--ui-subtle); color: var(--ui-muted); } .ui-map-modal__status--error { background: color-mix(in srgb,var(--ui-orange) 13%,var(--ui-surface)); color: var(--ui-orange); } .ui-map-modal__status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .ui-map-modal__close { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); color: var(--ui-muted); cursor: pointer; } .ui-map-modal__close:hover { background: var(--ui-subtle); color: var(--ui-text); } .ui-map-modal__body { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(260px,1fr); flex: 1; min-height: 0; } .ui-map-modal__map-column { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 18px; background: var(--ui-subtle); } .ui-map-modal__map-frame { position: relative; flex: 1; min-height: 260px; overflow: hidden; border: 1px solid var(--ui-border); border-radius: 14px; background: color-mix(in srgb,var(--ui-blue) 5%,var(--ui-surface)); } .ui-map-modal__canvas, .ui-map-modal__map-state { position: absolute; inset: 0; width: 100%; height: 100%; } .ui-map-modal__map-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 26px; color: var(--ui-muted); text-align: center; } .ui-map-modal__map-state b { color: var(--ui-text); font-size: 15px; } .ui-map-modal__map-state span { max-width: 310px; font-size: 12px; line-height: 1.5; } .ui-map-modal__map-state--error { background: color-mix(in srgb,var(--ui-orange) 9%,var(--ui-surface)); } .ui-map-modal__map-state--error > i { color: var(--ui-orange); font-size: 34px; } .ui-map-modal__map-state small { color: var(--ui-muted); font-size: 11px; } .ui-map-modal__map-tip { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.7); border-radius: 9px; background: rgba(255,255,255,.92); box-shadow: var(--ui-shadow); color: #263346; font-size: 11px; font-weight: 700; pointer-events: none; } .ui-map-modal__map-caption { display: flex; align-items: center; gap: 7px; margin: 11px 2px 0; color: var(--ui-muted); font-size: 11px; } .ui-map-modal__details { min-width: 0; overflow-y: auto; padding: 22px; border-left: 1px solid var(--ui-border); } .ui-map-modal__section-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 18px; } .ui-map-modal__section-head h3, .ui-map-modal__editor-heading h3 { margin: 0; color: var(--ui-text); font-size: 13px; font-weight: 800; } .ui-map-modal__section-head p { margin: 2px 0 0; color: var(--ui-muted); font-size: 11px; } .ui-map-modal__coordinate-readout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 19px 0; } .ui-map-modal__coordinate-readout > div { min-width: 0; padding: 11px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-subtle); } .ui-map-modal__coordinate-readout span { display: block; margin-bottom: 5px; color: var(--ui-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; } .ui-map-modal__coordinate-readout strong { color: var(--ui-text); font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 12px; } .ui-map-modal__editor { padding-top: 17px; border-top: 1px solid var(--ui-border); } .ui-map-modal__editor-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; } .ui-map-modal__editor-heading span { color: var(--ui-muted); font-size: 10px; } .ui-map-modal__editor label { display: block; margin-top: 10px; color: var(--ui-muted); font-size: 11px; font-weight: 700; } .ui-map-modal__editor input { display: block; width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--ui-border-strong); border-radius: 9px; background: var(--ui-surface); color: var(--ui-text); font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 12px; } .ui-map-modal__editor input:focus-visible, .ui-map-modal__close:focus-visible, .ui-map-modal__apply:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; } .ui-map-modal__apply { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 14px; padding: 9px 12px; border: 1px solid var(--ui-border-strong); border-radius: 9px; background: var(--ui-subtle); color: var(--ui-text); font-size: 11px; font-weight: 800; cursor: pointer; } .ui-map-modal__apply:hover { background: color-mix(in srgb,var(--ui-blue) 10%,var(--ui-surface)); color: var(--ui-blue); } .ui-map-modal__hint, .ui-map-modal__pending { display: flex; align-items: center; gap: 8px; padding: 11px; border-radius: 10px; font-size: 11px; line-height: 1.4; } .ui-map-modal__hint { background: var(--ui-subtle); color: var(--ui-muted); } .ui-map-modal__hint button { margin-left: auto; border: 0; background: none; color: var(--ui-blue); font-weight: 800; cursor: pointer; } .ui-map-modal__pending { background: color-mix(in srgb,var(--ui-blue) 10%,var(--ui-surface)); color: var(--ui-blue); margin-top: 14px; } .ui-map-modal__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-top: 1px solid var(--ui-border); background: var(--ui-surface); } .ui-map-modal__footer-note { display: flex; align-items: center; gap: 7px; color: var(--ui-muted); font-size: 11px; } .ui-map-modal__footer-note i { color: var(--ui-green); font-size: 16px; } .ui-map-modal__footer-actions { display: flex; align-items: center; gap: 9px; } @media (max-width: 760px) { .ui-map-overlay { padding: 8px; } .ui-map-modal.ui-modal-panel { width: 100%; max-height: calc(100dvh - 16px); height: auto; } .ui-map-modal__header { padding: 13px 15px; } .ui-map-modal__status { display: none; } .ui-map-modal__body { display: block; overflow-y: auto; } .ui-map-modal__map-column { padding: 12px; } .ui-map-modal__map-frame { height: min(42dvh,340px); min-height: 230px; flex: none; } .ui-map-modal__details { overflow: visible; padding: 15px; border-left: 0; border-top: 1px solid var(--ui-border); } .ui-map-modal__coordinate-readout { margin: 12px 0; } .ui-map-modal__editor { padding-top: 12px; } .ui-map-modal__editor label { display: inline-block; width: calc(50% - 5px); vertical-align: top; } .ui-map-modal__editor label + label { margin-left: 6px; } .ui-map-modal__footer { padding: 12px 15px; } .ui-map-modal__footer-note { display: none; } .ui-map-modal__footer-actions { width: 100%; justify-content: flex-end; } } @media (max-width: 420px) { .ui-map-modal__title { font-size: 15px; } .ui-map-modal__symbol { width: 36px; height: 36px; } .ui-map-modal__footer-actions > button { flex: 1; } } /* Confirmaciones SweetAlert2: solo presentación; se conservan promesas y callbacks. */ .swal2-container .swal2-popup { width: min(92vw,390px); padding: 0; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow-modal); } .swal2-container .swal2-title { margin: 0; padding: 22px 20px 4px; color: var(--ui-text); font-size: 17px; font-weight: 700; } .swal2-container .swal2-html-container { margin: 0; padding: 0 20px 18px; color: var(--ui-muted); font-size: 13px; line-height: 1.45; } .swal2-container .swal2-actions { width: 100%; margin: 0; border-top: 1px solid var(--ui-border); gap: 0; } .swal2-container .swal2-styled { flex: 1; min-height: 46px; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--ui-secondary-ink); font-size: 14px; font-weight: 700; box-shadow: none; } .swal2-container .swal2-styled + .swal2-styled { border-left: 1px solid var(--ui-border); } .swal2-container .swal2-cancel { color: var(--ui-muted); } .swal2-container .swal2-confirm:hover { background: var(--ui-secondary-soft); } .swal2-container .swal2-icon { transform: scale(.75); margin: 10px auto 0; } .swal2-container .swal2-icon.swal2-error { border-color: var(--ui-red); color: var(--ui-red); } .swal2-container .swal2-icon.swal2-success { border-color: var(--ui-green); color: var(--ui-green); } /* Toast del HTML de referencia: un único stack abajo a la derecha. */ .hs-toast-stack { top: auto; right: 20px; bottom: 20px; bottom: max(20px,env(safe-area-inset-bottom)); left: auto; max-height: calc(100dvh - 40px); overflow: visible; } .hs-toast { min-width: min(320px,calc(100vw - 24px)); max-width: 380px; padding: 14px 16px; gap: 12px; background: color-mix(in srgb,var(--ui-surface) 95%,transparent); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--ui-border); border-radius: 14px; box-shadow: var(--ui-shadow-hover); animation: hs-toast-in .4s cubic-bezier(.32,.72,0,1) both; } .hs-toast::before { content: ''; position: absolute; top: 20%; bottom: 20%; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--toast-accent); } .hs-toast--success { --toast-accent: var(--ui-green); } .hs-toast--error { --toast-accent: var(--ui-red); } .hs-toast--warning { --toast-accent: var(--ui-orange); } .hs-toast--info { --toast-accent: var(--ui-blue); } .hs-toast__icon { margin-left: 4px; background: color-mix(in srgb,var(--toast-accent) 15%,transparent); color: var(--toast-accent); } .hs-toast__progress { left: 3px; height: 2px; background: color-mix(in srgb,var(--ui-text) 5%,transparent); } .hs-toast__progress-bar { background: var(--toast-accent); opacity: .7; } .hs-toast__title { color: var(--ui-text); font-size: 13.5px; } .hs-toast__message { color: var(--ui-muted); font-size: 12.5px; } .hs-toast__action { color: var(--ui-blue); border: 1px solid var(--ui-border); padding: 5px 9px; } .hs-toast__close { border-radius: 50%; } @media (max-width: 480px) { .hs-toast-stack { top: auto; right: 12px; bottom: 12px; bottom: max(12px,env(safe-area-inset-bottom)); left: 12px; } .hs-toast { width: 100%; max-width: none; } } @media (prefers-reduced-motion: reduce) { :is(.admin-kpi-card,.admin-mobile-card,.ui-card,.admin-btn-primary,.admin-btn-secondary,.ui-btn):hover { transform: none; } } /* Filtros y tablas: estructura única para listados actuales y futuros. */ .ui-filter-panel, .ui-table-shell { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 16px; box-shadow: var(--ui-shadow); } .ui-filter-panel__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--ui-border); } .ui-filter-panel__title { margin: 0; color: var(--ui-text); font-size: 14px; font-weight: 700; } .ui-filter-panel__toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 11px; border: 1px solid var(--ui-border); border-radius: 9px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 700; cursor: pointer; } .ui-filter-panel__toggle:hover { color: var(--ui-text); border-color: var(--ui-secondary); } .ui-filter-panel__toggle:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; } .ui-filter-panel__chevron { transition: transform .2s; } .ui-filter-panel__chevron.is-open { transform: rotate(180deg); } .ui-filter-panel__body { padding: 20px; } .ui-filter-panel__body label { color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; } .ui-filter-panel__body :is(input,select) { min-height: 42px; border: 1px solid var(--ui-border-strong); border-radius: 10px; background: var(--ui-surface); color: var(--ui-text); } .ui-filter-panel__body :is(input,select):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; } .ui-filter-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; } .ui-filter-grid > label { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ui-filter-grid :is(input,select) { width: 100%; } .ui-filter-grid__actions { display: flex; align-items: end; justify-content: flex-end; grid-column: 1 / -1; } .ui-table-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; min-height: 70px; padding: 14px 18px; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); } .ui-table-header__title, .ui-table-header__tools, .ui-table-header__exports, .ui-table-header__actions { display: flex; align-items: center; gap: 8px; } .ui-table-header__title h2 { margin: 0; color: var(--ui-text); font-size: 15px; font-weight: 700; } .ui-table-header__count { padding: 3px 9px; border-radius: 999px; background: var(--ui-brand); color: #fff; font-size: 11px; font-weight: 700; } .ui-table-header__search { position: relative; width: min(100%,288px); } .ui-table-header__search input { width: 100%; min-height: 38px; padding: 8px 11px 8px 35px; border: 1px solid var(--ui-border-strong); border-radius: 9px; background: var(--ui-surface); color: var(--ui-text); font-size: 13px; } .ui-table-header__search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ui-muted); pointer-events: none; } .ui-table-header__search input:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; } /* Variante con buscador protagonista (listado de Cotizaciones): las herramientas ocupan el espacio libre y el buscador crece hasta 520px. */ .ui-table-header--busqueda-ancha .ui-table-header__tools { flex: 1 1 auto; justify-content: flex-end; } .ui-table-header--busqueda-ancha .ui-table-header__search { flex: 1 1 auto; width: auto; max-width: 520px; min-width: 240px; } .ui-table-shell, .admin-table-shell { overflow: hidden; } :is(.ui-table-shell,.admin-table-shell) table { width: 100%; border-collapse: collapse; } :is(.ui-table-shell,.admin-table-shell) thead { background: color-mix(in srgb,var(--ui-brand) 5%,var(--ui-surface)); color: var(--ui-brand); font-size: 12px; font-weight: 700; letter-spacing: .01em; text-transform: none; } :is(.ui-table-shell,.admin-table-shell) th { border-bottom: 1px solid var(--ui-border); } :is(.ui-table-shell,.admin-table-shell) tbody tr { border-bottom: 1px solid var(--ui-border); transition: background .18s; } :is(.ui-table-shell,.admin-table-shell) tbody tr:hover { background: var(--ui-subtle); } :is(.ui-table-shell,.admin-table-shell) tbody tr:last-child { border-bottom: 0; } .admin-toolbar { min-height: 70px; padding: 14px 18px; background: var(--ui-surface); border-bottom: 1px solid var(--ui-border); } /* Base visual de cualquier tabla del layout autenticado, incluso pantallas heredadas. */ .ui-app-content table { border-collapse: collapse; } .ui-app-content table thead { background: color-mix(in srgb,var(--ui-brand) 5%,var(--ui-surface)); color: var(--ui-brand); } .dark .ui-app-content table thead, .dark :is(.ui-table-shell,.admin-table-shell) thead { color: var(--ui-muted); } .ui-app-content table th { font-size: 12px; font-weight: 700; letter-spacing: .01em; text-transform: none; border-bottom: 1px solid var(--ui-border); } .ui-app-content table tbody tr { border-bottom: 1px solid var(--ui-border); } .ui-app-content table tbody tr:hover { background: var(--ui-subtle); } /* Exportación: efectos visuales del prototipo sin progreso ni éxito simulados. */ .ui-export-btn { --export-color: #217346; --export-tint: #2e9b5f; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; min-height: 38px; overflow: hidden; padding: 8px 10px; border: 1px solid color-mix(in srgb,var(--export-color) 25%,var(--ui-border)); border-radius: 9px; background: color-mix(in srgb,var(--export-color) 5%,var(--ui-surface)); color: var(--export-color); box-shadow: 0 1px 3px rgba(20,25,40,.06); font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s, background .3s; } .ui-export-btn--pdf { --export-color: #e5252a; --export-tint: #f04b50; } .ui-export-btn:hover:not(:disabled) { transform: translateY(-2px); border-color: color-mix(in srgb,var(--export-color) 45%,var(--ui-border)); background: color-mix(in srgb,var(--export-color) 9%,var(--ui-surface)); box-shadow: 0 12px 28px rgba(20,25,40,.12), 0 4px 8px rgba(20,25,40,.06); } .ui-export-btn:active:not(:disabled) { transform: scale(.97); } .ui-export-btn:disabled { opacity: .45; cursor: not-allowed; } .ui-export-btn:focus-visible { outline: 2px solid var(--export-color); outline-offset: 2px; } .ui-export-btn > :not(.ui-export-btn__glow):not(.ui-export-btn__ripple) { position: relative; z-index: 2; } .ui-export-btn__glow { position: absolute; z-index: 1; left: var(--glow-x,50%); top: var(--glow-y,50%); width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle,color-mix(in srgb,var(--export-tint) 22%,transparent),transparent 70%); transform: translate(-50%,-50%); opacity: 0; pointer-events: none; transition: opacity .2s; } .ui-export-btn:hover .ui-export-btn__glow { opacity: 1; } .ui-export-btn__ripple { position: absolute; z-index: 1; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle,color-mix(in srgb,var(--export-tint) 42%,transparent),transparent 70%); transform: translate(-50%,-50%) scale(0); pointer-events: none; animation: ui-export-ripple .85s ease-out forwards; } @keyframes ui-export-ripple { to { transform: translate(-50%,-50%) scale(2.5); opacity: 0; } } @media (max-width: 640px) { .ui-table-header__tools, .ui-table-header__search { width: 100%; } .ui-table-header__tools { flex-wrap: wrap; } .ui-table-header__exports { margin-left: auto; } } @media (max-width: 900px) { .ui-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 640px) { .ui-filter-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .ui-export-btn, .ui-export-btn__glow, .ui-export-btn__ripple { transition: none; animation: none; } .ui-export-btn:hover:not(:disabled) { transform: none; } } /* Modal "Ver cotización" (SweetAlert2, ver cotizacion-demo-manager.js: verCotizacion()): secciones con encabezado + filas etiqueta/valor, mismos tokens que el resto del sistema visual -- nunca colores ni tamaños sueltos. */ .ver-cot { text-align: left; display: flex; flex-direction: column; gap: 14px; max-height: 62vh; overflow-y: auto; padding-right: 2px; } /* Dentro de un modal que ya tiene su propio scroll: sin segundo scroll. */ .ver-cot.ver-cot--sin-scroll { max-height: none; overflow: visible; padding-right: 0; } .ver-cot-seccion { flex-shrink: 0; border: 1px solid var(--ui-border); border-radius: 10px; overflow: hidden; } .ver-cot-seccion__titulo { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; background: var(--ui-subtle); color: var(--ui-text); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .ver-cot-seccion__titulo i { color: var(--ui-blue); font-size: 14px; } .ver-cot-seccion__cuerpo { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .ver-cot-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; } .ver-cot-fila__etiqueta { color: var(--ui-muted); flex-shrink: 0; } .ver-cot-fila__valor { color: var(--ui-text); text-align: right; } .ver-cot-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--ui-subtle); border: 1px solid var(--ui-border); font-size: 11px; font-weight: 700; } .ver-cot-badge--rojo { background: color-mix(in srgb, var(--ui-red) 12%, var(--ui-surface)); border-color: color-mix(in srgb, var(--ui-red) 35%, var(--ui-border)); color: var(--ui-red); } .ver-cot-badge--ambar { background: color-mix(in srgb, var(--ui-orange) 12%, var(--ui-surface)); border-color: color-mix(in srgb, var(--ui-orange) 35%, var(--ui-border)); color: var(--ui-orange); } .ver-cot-pendiente { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--ui-orange); font-size: 13px; font-weight: 600; } .ver-cot-terminos { font-size: 12px; color: var(--ui-text); max-height: 160px; overflow-y: auto; } .ver-cot-terminos :is(h3,h4) { font-weight: 700; margin: 6px 0 2px; } .ver-cot-terminos ul { padding-left: 18px; list-style: disc; } /* Estados de Operaciones (órdenes de servicio, requerimientos y vigencia documental): una sola definición semántica que usan Registro de órdenes, Requerimientos y el modal "Ver cotización". */ .ver-cot-badge--verde, .ui-estado--verde { background: #15803d; border-color: transparent; color: #fff; } .ver-cot-badge--azul, .ui-estado--azul { background: #1d4ed8; border-color: transparent; color: #fff; } .ver-cot-badge--morado, .ui-estado--morado { background: #6d28d9; border-color: transparent; color: #fff; } /* Coincidencia de una búsqueda dentro de un texto. */ .ui-resalte { background: #fde68a; color: #1e293b; border-radius: 3px; padding: 0 2px; font-weight: 700; } .ui-estado { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--ui-border); background: var(--ui-subtle); color: var(--ui-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; } .ui-estado--rojo { background: #b91c1c; border-color: transparent; color: #fff; } .ui-estado--ambar { background: #c2410c; border-color: transparent; color: #fff; } .ui-doc-lista { display: flex; flex-direction: column; gap: 4px; } .ui-doc-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid var(--ui-border); border-radius: 8px; font-size: 12px; color: var(--ui-text); } .ui-doc-item__detalle { color: var(--ui-muted); font-size: 11px; } .ui-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--ui-border); } .ui-tabs__tab { padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--ui-muted); border-bottom: 2px solid transparent; white-space: nowrap; } .ui-tabs__tab { display: inline-flex; align-items: center; gap: 6px; transition: color .18s, border-color .18s; } .ui-tabs__tab:hover { color: var(--ui-text); } .ui-tabs__tab[aria-selected="true"] { color: var(--ui-text); border-bottom-color: var(--ui-accent); } .ui-tabs__tab[aria-selected="true"] > i { color: var(--ui-accent-ink); } .ui-tabs__tab:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; } /* Etiquetas de estado SÓLIDAS (Órdenes, Requerimientos y "Estado operativo" de Cotizaciones): color pleno, sin fondos pálidos, transparencias ni sombras. Texto blanco sobre tonos oscuros y negro sobre el amarillo, todos con contraste AA (>= 4.5:1) para texto pequeño en negrita. */ .ui-estado[class*="ui-estado--solido-"] { border-color: transparent; box-shadow: none; } .ui-estado--solido-naranja { background: #c2410c; color: #fff; } .ui-estado--solido-azul { background: #1d4ed8; color: #fff; } .ui-estado--solido-verde { background: #15803d; color: #fff; } /* Documento o recurso EN REGLA: verde vivo (se distingue de un vistazo de lo que falta). */ .ui-estado--vigente { background: #16a34a; border-color: #16a34a; color: #fff; } /* «Qué sigue» en listados: una frase con el siguiente paso, coloreada según la situación. */ .ui-siguiente { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--ui-text); } .ui-siguiente > i { margin-top: 1px; flex-shrink: 0; font-size: 15px; } .ui-siguiente__texto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ui-siguiente--verde > i { color: #16a34a; } .ui-siguiente--ambar > i { color: #d97706; } .ui-siguiente--rojo > i { color: #dc2626; } .ui-siguiente--azul > i { color: var(--ui-blue); } .ui-siguiente--gris { color: var(--ui-muted); } .ui-estado--solido-rojo { background: #b91c1c; color: #fff; } .ui-estado--solido-amarillo { background: #ca8a04; color: #111827; } .ui-estado--solido-gris { background: #374151; color: #fff; } .ui-estado--solido-gris-claro { background: #6b7280; color: #fff; } /* Motivo de anulación bajo la etiqueta de estado (x-ui.motivo-anulacion): una línea, recortada con puntos suspensivos; el texto completo va en el tooltip. --ancho ocupa todo el ancho disponible (tarjetas móviles). */ .ui-motivo-anulacion { margin-top: 4px; line-height: 1.3; } .ui-motivo-anulacion__texto { display: inline-block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; padding: 1px 6px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--ui-red) 22%, var(--ui-border)); background: color-mix(in srgb, var(--ui-red) 6%, var(--ui-surface)); color: var(--ui-text); font-size: 10.5px; font-weight: 500; } .ui-motivo-anulacion--ancho .ui-motivo-anulacion__texto { max-width: 100%; } /* Asistente paso a paso (Operaciones → "Preparar orden"): una barra de avance con los pasos y UNA tarjeta con el paso actual. Solo tokens del sistema (claro y oscuro). La vista aporta textos y acciones. */ .ui-asistente__pasos { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; } .ui-asistente__paso { flex: 1 1 0; min-width: 0; } .ui-asistente__boton { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 10px; color: var(--ui-muted); font-size: 11px; font-weight: 700; text-align: center; } .ui-asistente__boton:hover { background: var(--ui-subtle); } .ui-asistente__boton:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; } .ui-asistente__circulo { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; border: 2px solid var(--ui-border-strong); background: var(--ui-surface); color: var(--ui-muted); font-size: 13px; font-weight: 800; } .ui-asistente__paso.is-ok .ui-asistente__circulo { border-color: var(--ui-green); background: var(--ui-green); color: #fff; } .ui-asistente__paso.is-falta .ui-asistente__circulo { border-color: var(--ui-orange); color: var(--ui-orange); } .ui-asistente__paso.is-actual .ui-asistente__circulo { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-secondary) 25%, transparent); } .ui-asistente__paso.is-actual .ui-asistente__boton { color: var(--ui-text); } .ui-asistente__etiqueta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-asistente__barra { height: 4px; margin-top: 6px; border-radius: 999px; background: var(--ui-subtle); overflow: hidden; } .ui-asistente__barra > span { display: block; height: 100%; background: var(--ui-secondary); transition: width .25s; } .ui-asistente__titulo { margin: 0; color: var(--ui-text); font-size: 18px; font-weight: 800; } .ui-asistente__indicacion { margin: 4px 0 0; color: var(--ui-muted); font-size: 13px; line-height: 1.5; } /* Estado del paso en una frase: verde = listo, naranja = falta algo. */ .ui-asistente__estado { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ui-border); font-size: 13px; line-height: 1.5; color: var(--ui-text); } .ui-asistente__estado > i { flex-shrink: 0; font-size: 22px; line-height: 1; } .ui-asistente__estado--ok { border-color: color-mix(in srgb, var(--ui-green) 40%, var(--ui-border)); background: color-mix(in srgb, var(--ui-green) 10%, var(--ui-surface)); } .ui-asistente__estado--ok > i { color: var(--ui-green); } .ui-asistente__estado--falta { border-color: color-mix(in srgb, var(--ui-orange) 45%, var(--ui-border)); background: color-mix(in srgb, var(--ui-orange) 9%, var(--ui-surface)); } .ui-asistente__estado--falta > i { color: var(--ui-orange); } .ui-asistente__estado ul { margin: 4px 0 0; padding-left: 18px; list-style: disc; } /* Tarjeta de un recurso o documento (placa, conductor, archivo). */ .ui-asistente__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); } .ui-asistente__item-nombre { font-size: 14px; font-weight: 700; color: var(--ui-text); } .ui-asistente__item-detalle { font-size: 12px; color: var(--ui-muted); } .ui-asistente__secundaria { display: inline-flex; align-items: center; gap: 4px; color: var(--ui-blue); font-size: 12px; font-weight: 700; } .ui-asistente__secundaria:hover { text-decoration: underline; } @media (max-width: 640px) { .ui-asistente__etiqueta { display: none; } .ui-asistente__paso.is-actual .ui-asistente__etiqueta { display: block; } } /* Accesos rápidos sobre un listado ("Por preparar (3)", "Listas para enviar (1)"...): filtran con un clic. Activo = azul; el número es el conteo. */ .ui-filtros-rapidos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); } .ui-filtro-rapido { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border: 1px solid var(--ui-border-strong); border-radius: 999px; background: var(--ui-surface); color: var(--ui-text); font-size: 12px; font-weight: 700; transition: background .15s, border-color .15s; } .ui-filtro-rapido:hover { background: var(--ui-subtle); } .ui-filtro-rapido:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; } .ui-filtro-rapido[aria-pressed="true"], .ui-filtro-rapido[aria-selected="true"] { border-color: var(--ui-secondary); background: var(--ui-secondary-soft); color: var(--ui-secondary-ink); } .ui-filtro-rapido__conteo { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 11px; text-align: center; } :is(.ui-filtro-rapido[aria-pressed="true"],.ui-filtro-rapido[aria-selected="true"]) .ui-filtro-rapido__conteo { background: var(--ui-secondary); color: var(--ui-surface); } .ui-filtros-rapidos__aplicados { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; color: var(--ui-muted); font-size: 12px; } @media (max-width: 640px) { .ui-filtros-rapidos { flex-wrap: nowrap; overflow-x: auto; padding: 10px 12px; scrollbar-width: none; } .ui-filtro-rapido { flex-shrink: 0; } .ui-filtros-rapidos__aplicados { flex-shrink: 0; margin-left: 0; } } /* Marco de la aplicación (layouts/app): sidebar CLARO, textos en grafito, íconos en gris y el ámbar H&S para lo activo (grupo abierto, ítem actual, logo y contadores). Colores del menú en variables --sb-* (claro/oscuro). Solo presentación: el menú conserva sus permisos, rutas y Alpine. */ .ui-sidebar { --sb-bg: #ffffff; --sb-text: #525252; --sb-strong: #262626; --sb-muted: #a3a3a3; --sb-icon: #8f8f8f; --sb-hover: #f4f4f5; --sb-line: #ececec; --sb-foot: #fafafa; background: var(--sb-bg); border-color: var(--sb-line); color: var(--sb-text); } .dark .ui-sidebar { --sb-bg: #1a1a1d; --sb-text: #c4c4c8; --sb-strong: #ffffff; --sb-muted: #7c7c82; --sb-icon: #9a9aa0; --sb-hover: rgba(255,255,255,.08); --sb-line: rgba(255,255,255,.09); --sb-foot: #161618; } .ui-sidebar :is(.border-slate-200,.border-slate-100,[class*="dark:border-slate-800"]) { border-color: var(--sb-line); } .ui-sidebar :is(.text-slate-500,.text-slate-600,.text-slate-800) { color: var(--sb-text); } .ui-sidebar :is(p.text-slate-400,.uppercase.tracking-widest) { color: var(--sb-muted); letter-spacing: .14em; } .ui-sidebar a > span.text-xl, .ui-sidebar .text-blue-700 { color: var(--sb-strong); } .ui-sidebar .text-blue-700 { font-weight: 600; } .ui-sidebar .text-orange-500 { color: var(--ui-accent); } /* Íconos: gris en reposo; el grupo abierto se enciende en ámbar. */ .ui-sidebar nav i.ph-fill { color: var(--sb-icon); transition: color .2s; } .ui-sidebar nav i.ph-fill:is(.text-blue-600,.text-red-600,.text-amber-600) { color: var(--ui-accent); } .ui-sidebar nav :is(a,button):hover i.ph-fill { color: var(--ui-accent); } /* Ítems y submenús */ .ui-sidebar nav :is(a,button):hover { background: var(--sb-hover); color: var(--sb-strong); } .ui-sidebar nav .pl-11 a { color: var(--sb-text); } .ui-sidebar nav .pl-11 a:hover { background: transparent; color: var(--sb-strong); } .ui-sidebar nav .pl-11 a::before { background: var(--sb-line); } /* Logo: sello ámbar con el camión en grafito. */ /* Marca: logo de la empresa + palabra «Logistic». En oscuro el logo va sobre una placa clara (su azul no se lee sobre negro). */ .ui-sidebar__logo { display: grid; flex: none; place-items: center; width: 52px; height: 42px; border-radius: 10px; transition: transform .2s; } .ui-sidebar__logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } .dark .ui-sidebar__logo { padding: 4px 6px; background: #f5f5f5; } .ui-sidebar__marca:hover .ui-sidebar__logo { transform: scale(1.04); } .ui-sidebar__nombre { color: var(--ui-secondary); font-size: 21px; font-weight: 800; letter-spacing: -.02em; } .dark .ui-sidebar__nombre { color: #ffffff; } /* Pie: cerrar sesión */ .ui-sidebar > div:last-child { background: var(--sb-foot); border-color: var(--sb-line); } .ui-sidebar > div:last-child button { color: var(--sb-text); } .ui-sidebar > div:last-child button:hover { background: color-mix(in srgb,var(--ui-red) 8%,transparent); color: var(--ui-red-ink); } .ui-sidebar .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--sb-line); } /* Área de trabajo y barra superior: neutras, con un filo ámbar de marca. */ .ui-main { background: var(--ui-bg); } .ui-topbar { background: color-mix(in srgb,var(--ui-surface) 92%,transparent); border-bottom-color: var(--ui-border); } .ui-topbar::after { content: none; } .admin-header-title { color: var(--ui-brand); } .dark .admin-header-title { color: var(--ui-text); } /* Botones de acción en tablas (todas las listas): una sola familia. En reposo son neutros (superficie + borde) y el color de la intención va en el ícono; al pasar el cursor se tiñe suavemente. Eliminar/anular conserva el rojo también en reposo para no confundirse. */ :is(.admin-btn-icon,.ui-row-action) { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; gap: 6px; border-radius: 9px; background: var(--ui-surface); border: 1px solid var(--ui-border-strong); color: var(--ui-muted); box-shadow: 0 1px 2px rgba(0,0,0,.06); font-size: 12px; font-weight: 600; } :is(.admin-btn-icon,.ui-row-action) > i { font-size: 15px; } :is(.admin-btn-icon,.ui-row-action):hover:not(:disabled) { background: var(--ui-subtle); border-color: color-mix(in srgb,var(--ui-brand) 30%,var(--ui-border)); color: var(--ui-text); transform: translateY(-1px); } :is(.admin-btn-icon,.ui-row-action):disabled { opacity: .45; cursor: not-allowed; } :is(.admin-btn-icon--view,.ui-row-action--view) { background: var(--ui-surface); border-color: var(--ui-border-strong); color: var(--ui-blue-ink); } :is(.admin-btn-icon--view,.ui-row-action--view):hover:not(:disabled) { background: color-mix(in srgb,var(--ui-blue) 9%,var(--ui-surface)); border-color: color-mix(in srgb,var(--ui-blue) 35%,var(--ui-border)); color: var(--ui-blue-ink); } :is(.admin-btn-icon--edit,.ui-row-action--edit) { background: var(--ui-surface); border-color: var(--ui-border-strong); color: var(--ui-brand); } .dark :is(.admin-btn-icon--edit,.ui-row-action--edit) { color: var(--ui-blue-ink); } :is(.admin-btn-icon--edit,.ui-row-action--edit):hover:not(:disabled) { background: color-mix(in srgb,var(--ui-brand) 8%,var(--ui-surface)); border-color: color-mix(in srgb,var(--ui-brand) 35%,var(--ui-border)); } :is(.admin-btn-icon--activate,.ui-row-action--activate) { background: var(--ui-surface); border-color: var(--ui-border-strong); color: var(--ui-green-ink); } :is(.admin-btn-icon--activate,.ui-row-action--activate):hover:not(:disabled) { background: color-mix(in srgb,var(--ui-green) 9%,var(--ui-surface)); border-color: color-mix(in srgb,var(--ui-green) 35%,var(--ui-border)); } :is(.admin-btn-icon--deactivate,.ui-row-action--deactivate) { background: var(--ui-surface); border-color: var(--ui-border-strong); color: var(--ui-orange-ink); } :is(.admin-btn-icon--deactivate,.ui-row-action--deactivate):hover:not(:disabled) { background: color-mix(in srgb,var(--ui-orange) 9%,var(--ui-surface)); border-color: color-mix(in srgb,var(--ui-orange) 35%,var(--ui-border)); } :is(.admin-btn-icon--delete,.ui-row-action--delete) { background: color-mix(in srgb,var(--ui-red) 4%,var(--ui-surface)); border-color: color-mix(in srgb,var(--ui-red) 25%,var(--ui-border)); color: var(--ui-red-ink); } :is(.admin-btn-icon--delete,.ui-row-action--delete):hover:not(:disabled) { background: color-mix(in srgb,var(--ui-red) 10%,var(--ui-surface)); border-color: color-mix(in srgb,var(--ui-red) 45%,var(--ui-border)); } :is(.admin-btn-icon--more,.ui-row-action--more) { background: var(--ui-surface); border-color: var(--ui-border-strong); color: var(--ui-text); } :is(.admin-btn-icon--more,.ui-row-action--more):hover:not(:disabled) { background: var(--ui-subtle); } :is(.admin-btn-icon,.ui-row-action):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; } /* Acciones con texto en filas (Aprobar, Facturar, PDF...): misma forma. */ :is(td,.admin-mobile-card) :is(.admin-btn-primary,.admin-btn-secondary)[class*="!h-8"] { border-radius: 9px; box-shadow: 0 1px 2px rgba(0,0,0,.08); } /* Tarjetas móviles para listados y tablas (ERP Taller & POS) */ .admin-mobile-card { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 14px; padding: 15px; box-shadow: var(--ui-shadow); display: flex; flex-direction: column; gap: 10px; position: relative; transition: border-color .2s, box-shadow .2s; } .admin-mobile-card:hover { border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-hover); } .admin-mobile-card__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--ui-border); padding-bottom: 9px; } .admin-mobile-card__body { display: flex; flex-direction: column; gap: 7px; } .admin-mobile-card__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; } .admin-mobile-card__label { color: var(--ui-muted); font-size: 11.5px; font-weight: 600; } .admin-mobile-card__value { font-weight: 700; color: var(--ui-text); text-align: right; } .admin-mobile-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--ui-border); padding-top: 10px; margin-top: 2px; } .admin-mobile-action-btn { background: var(--ui-surface); border: 1px solid var(--ui-border-strong); } .admin-mobile-action-btn:hover { background: var(--ui-subtle); } /* Opciones de menú de fila con intención (Confirmar / Anular). */ .admin-menu-item.text-emerald-600 { color: var(--ui-green-ink); } .admin-menu-item.text-rose-600 { color: var(--ui-red-ink); } /* Accesos de la barra superior (Consultas, Reportes): neutros, sin tintes. */ .ui-topbar .ui-topbar-action { background: var(--ui-surface); border-color: var(--ui-border-strong); color: var(--ui-brand); box-shadow: 0 1px 2px rgba(0,0,0,.06); } .ui-topbar .ui-topbar-action:hover { background: var(--ui-subtle); border-color: color-mix(in srgb,var(--ui-brand) 30%,var(--ui-border)); } .dark .ui-topbar .ui-topbar-action { color: var(--ui-text); } /* Listados anchos con desplazamiento: la última columna (Acciones) queda fija a la derecha para no tener que desplazarse a buscarla. */ .ui-app-content :is(.overflow-x-auto,.overflow-auto) > table :is(th,td):last-child { position: sticky; right: 0; z-index: 1; background: var(--ui-surface); box-shadow: -10px 0 12px -12px rgba(0,0,0,.35); } .ui-app-content :is(.overflow-x-auto,.overflow-auto) > table thead th:last-child { top: 0; z-index: 2; background: color-mix(in srgb,var(--ui-brand) 8%,var(--ui-surface)); } .dark .ui-app-content :is(.overflow-x-auto,.overflow-auto) > table thead th:last-child { background: var(--ui-subtle); } .ui-app-content :is(.overflow-x-auto,.overflow-auto) > table tbody tr:hover > td:last-child { background: var(--ui-subtle); } .dark .ui-app-content :is(.overflow-x-auto,.overflow-auto) > table :is(th,td):last-child { box-shadow: -10px 0 12px -12px rgba(0,0,0,.8); } /* Tipografía de datos: cifras de ancho fijo en tablas (montos y cantidades alineados). */ .ui-app-content table td { font-variant-numeric: tabular-nums; } /* Etiquetas de formulario y de filtros heredadas en MAYÚSCULAS: tipo oración. */ .ui-app-content :is(label,th)[class~="uppercase"] { text-transform: none; letter-spacing: .01em; } /* Ruta de navegación de la barra superior: Sección › Página. */ .ui-breadcrumb { align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; overflow: hidden; padding-left: 16px; margin-left: 8px; border-left: 1px solid var(--ui-border-strong); font-size: 14px; } .ui-breadcrumb__seccion { flex: none; color: var(--ui-muted); font-weight: 500; white-space: nowrap; } .ui-breadcrumb__sep { color: var(--ui-muted); font-size: 11px; opacity: .7; } .ui-breadcrumb__actual { overflow: hidden; color: var(--ui-text); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } /* Usuario: acceso compacto en el header; la identidad vive dentro de su menú. */ .ui-avatar { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--ui-secondary); color: var(--ui-surface); font-size: 18px; font-weight: 700; } .ui-usuario__nombre { overflow: hidden; margin: 0; color: var(--ui-text); font-size: 13.5px; font-weight: 700; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .ui-usuario__detalle { overflow: hidden; margin: 3px 0 0; color: var(--ui-muted); font-size: 11.5px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .ui-topbar-icon-btn { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border: 1px solid transparent; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-text); cursor: pointer; transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .ui-topbar-icon-btn:hover { border-color: color-mix(in srgb,var(--ui-brand) 18%,var(--ui-border)); background: var(--ui-surface); color: var(--ui-secondary-ink); box-shadow: 0 6px 18px rgba(0,0,0,.1); transform: translateY(-1px); } .ui-topbar-icon-btn:active { box-shadow: 0 2px 6px rgba(0,0,0,.1); transform: scale(.94); } .ui-topbar-icon-btn:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; } .ui-topbar-icon-btn[aria-expanded="true"] { border-color: var(--ui-secondary); background: var(--ui-secondary-soft); color: var(--ui-secondary-ink); box-shadow: 0 0 0 4px color-mix(in srgb,var(--ui-secondary) 12%,transparent); } .ui-profile-trigger { position: relative; background: var(--ui-secondary); color: var(--ui-surface); } .ui-profile-trigger:hover, .ui-profile-trigger[aria-expanded="true"] { background: color-mix(in srgb,var(--ui-secondary) 85%,var(--ui-surface)); color: var(--ui-surface); } .ui-profile-trigger__status { position: absolute; right: 0; bottom: 1px; width: 10px; height: 10px; border: 2px solid var(--ui-surface); border-radius: 999px; background: var(--ui-green); } .ui-profile-menu { border: 1px solid var(--ui-border); border-radius: 16px; background: color-mix(in srgb,var(--ui-surface) 96%,transparent); box-shadow: var(--ui-shadow-modal); backdrop-filter: blur(18px); } .ui-profile-menu::before { content: ''; position: absolute; top: -5px; right: 15px; width: 10px; height: 10px; border-top: 1px solid var(--ui-border); border-left: 1px solid var(--ui-border); background: var(--ui-surface); transform: rotate(45deg); } .ui-profile-summary { display: flex; align-items: center; gap: 11px; padding: 11px 18px 13px; border-bottom: 1px solid var(--ui-border); } .ui-profile-menu__item { display: flex; width: 100%; align-items: center; gap: 12px; min-height: 40px; padding: 9px 18px; color: var(--ui-muted); font-size: 14px; font-weight: 600; text-align: left; transition: color .16s ease, background .16s ease, padding-left .16s ease; } .ui-profile-menu__item:hover { padding-left: 21px; background: var(--ui-subtle); color: var(--ui-text); } .ui-profile-menu__item:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; background: var(--ui-subtle); } .ui-profile-menu__item--danger { color: var(--ui-red-ink); } .ui-profile-menu__item--danger:hover { background: color-mix(in srgb,var(--ui-red) 9%,var(--ui-surface)); color: var(--ui-red-ink); } /* Entorno SUNAT de la facturación de órdenes, siempre visible para Facturación. */ .ui-entorno { align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; border: 1px solid; font-size: 12px; font-weight: 700; white-space: nowrap; } .ui-entorno__punto { width: 8px; height: 8px; border-radius: 999px; background: currentColor; } .ui-entorno--pruebas { background: color-mix(in srgb,var(--ui-orange) 10%,var(--ui-surface)); border-color: color-mix(in srgb,var(--ui-orange) 40%,var(--ui-border)); color: var(--ui-orange-ink); } .ui-entorno--produccion { background: color-mix(in srgb,var(--ui-green) 10%,var(--ui-surface)); border-color: color-mix(in srgb,var(--ui-green) 40%,var(--ui-border)); color: var(--ui-green-ink); } /* Contadores de pendientes en el menú lateral. */ .ui-sidebar nav .pl-11 a:has(.ui-menu-count) { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ui-menu-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ui-accent); color: var(--ui-on-accent); font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .ui-menu-count--grupo { margin-left: 2px; } /* Carga: filas-esqueleto animadas (x-admin.table-state-row type="loading"). */ .ui-skeleton-cell { padding: 6px 16px !important; } .ui-skeleton-line { display: flex; gap: 24px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--ui-border); } .ui-skeleton-line:last-child { border-bottom: 0; } .ui-skeleton-line > span { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--ui-subtle) 0%, color-mix(in srgb,var(--ui-brand) 9%,var(--ui-subtle)) 50%, var(--ui-subtle) 100%); background-size: 200% 100%; animation: ui-skeleton 1.3s ease-in-out infinite; } @keyframes ui-skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { .ui-skeleton-line > span { animation: none; } } /* Estados vacíos: ícono en un círculo suave, mensaje y acción. */ .admin-state-empty { gap: 10px !important; padding: 48px 16px !important; color: var(--ui-muted) !important; } /* Como celda de tabla (x-admin.table-state-row) conserva el ancho de todas las columnas y se centra. */ td.admin-state-empty, td.admin-state-error { display: table-cell !important; text-align: center; } td:is(.admin-state-empty,.admin-state-error) > :is(i,p,div) { margin: 0 auto; } td:is(.admin-state-empty,.admin-state-error) > * + * { margin-top: 10px; } .admin-state-empty > i:first-child { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 999px; background: var(--ui-subtle); color: color-mix(in srgb,var(--ui-brand) 55%,var(--ui-muted)) !important; font-size: 30px !important; } .admin-state-empty > p { max-width: 460px; margin: 0; color: var(--ui-text); font-size: 14px; font-weight: 600; } /* Contraer / expandir el menú lateral desde su cabecera. Expandido: botón discreto a la derecha del logo. Contraído: el logo queda centrado y, al pasar el cursor (o con el foco de teclado), el botón toma su lugar para expandir. El ancho del menú se anima con el propio