/* LCM · CASAMANTICA — design tokens + global styles
* Translated from claude design tokens.jsx
* Source of truth: this file, plus per-component scoped CSS where useful.
*/
/* ── Lightbox (image zoom overlay) ─────────────────────────────────── */
.lcm-lightbox {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
cursor: zoom-out;
animation: lcm-lightbox-fade 0.18s ease-out;
}
@keyframes lcm-lightbox-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.lcm-lightbox-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 8px;
cursor: default;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
animation: lcm-lightbox-zoom 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes lcm-lightbox-zoom {
from { transform: scale(0.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.lcm-lightbox-close {
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
border: none;
background: rgba(255, 255, 255, 0.15);
color: #fff;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background 0.15s ease;
}
.lcm-lightbox-close:hover {
background: rgba(255, 255, 255, 0.28);
}
.lcm-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: none;
background: rgba(255, 255, 255, 0.15);
color: #fff;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background 0.15s ease;
z-index: 1;
}
.lcm-lightbox-nav:hover {
background: rgba(255, 255, 255, 0.28);
}
.lcm-lightbox-prev { left: 12px; }
.lcm-lightbox-next { right: 12px; }
.lcm-lightbox-counter {
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
padding: 4px 12px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
font-variant-numeric: tabular-nums;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Schibsted Grotesk is loaded via in wwwroot/index.html (preconnect + early
* discovery). Keeping it there rather than @import here avoids a render-blocking
* import chain and lets the splash/install prompt use the typeface too. */
:root {
/* Surfaces */
--lcm-page-bg: #f8fafc;
--lcm-inset: #f1f5f9;
--lcm-card: #ffffff;
--lcm-border: #e2e8f0;
--lcm-border-muted: #f1f5f9;
/* Text */
--lcm-text: #0f172a;
--lcm-text-2: #1e293b;
--lcm-muted: #64748b;
--lcm-muted-2: #94a3b8;
/* Brand (sage-green primary, NOT the brand-guideline red) */
--lcm-primary: #3f5d4a;
--lcm-primary-dark: #2f4838;
--lcm-primary-bg: #eaf0ea;
--lcm-primary-bg-2: #dde6dd;
--lcm-primary-border: #d3ddd3;
--lcm-navy: #0f172a;
--lcm-slate: #1e293b;
/* Semantic */
--lcm-green: #16a34a;
--lcm-green-bg: #dcfce7;
--lcm-green-border: #bbf7d0;
--lcm-blue: #2563eb;
--lcm-blue-bg: #eff6ff;
--lcm-blue-border: #bfdbfe;
--lcm-amber: #f59e0b;
--lcm-amber-bg: #fef3c7;
--lcm-amber-border: #fde68a;
--lcm-red: #dc2626;
--lcm-red-bg: #fee2e2;
--lcm-red-border: #fecaca;
--lcm-indigo: #4f46e5;
--lcm-indigo-bg: #eef2ff;
/* Typography — Schibsted Grotesk for both body and display (editorial-minimal,
* per the La Colonia brand handoff). Mono stays monospace for OT numbers/codes. */
--lcm-font: 'Schibsted Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--lcm-display-font: 'Schibsted Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--lcm-mono-font: ui-monospace, Menlo, Monaco, 'Cascadia Mono', monospace;
/* Radius */
--lcm-radius-sm: 8px;
--lcm-radius-md: 10px;
--lcm-radius-lg: 12px;
--lcm-radius-xl: 14px;
--lcm-radius-2xl: 18px;
--lcm-radius-pill: 999px;
/* Shadow */
--lcm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
--lcm-shadow-md: 0 6px 20px rgba(15, 23, 42, 0.05);
--lcm-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12);
--lcm-shadow-xl: 0 30px 80px rgba(15, 23, 42, 0.18);
/* Motion — shared easings so every animation in the app speaks the same
* language. "out" for entrances, "spring" for playful icon/FAB pops,
* "sheet" for the iOS-style bottom-sheet glide. */
--lcm-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--lcm-ease-spring: cubic-bezier(0.34, 1.40, 0.64, 1);
--lcm-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
}
/* Base reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--lcm-font);
background: var(--lcm-page-bg);
color: var(--lcm-text);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
button { font-family: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
/* Display serif for screen titles */
.lcm-display {
font-family: var(--lcm-display-font);
font-weight: 600;
letter-spacing: -0.01em;
}
/* Mono — for OT numbers, codes */
.lcm-mono {
font-family: var(--lcm-mono-font);
font-size: 11px;
font-weight: 700;
color: #475569;
letter-spacing: 0.2px;
}
/* Tabular numerics — KPIs, prices, counts */
.lcm-tnum { font-variant-numeric: tabular-nums; }
/* ── Layout ─────────────────────────────────────────────────────── */
/* App frame: the shell is viewport-height and .lcm-body is THE scroll
container (not the document). Sticky headers, the scroll-shrink
listener and pull-to-refresh all key off .lcm-body.scrollTop. */
.lcm-app {
height: 100vh;
height: 100dvh; /* tracks the mobile URL bar / keyboard */
background: var(--lcm-page-bg);
display: flex;
flex-direction: column;
}
.lcm-mobile-shell {
flex: 1;
display: flex;
flex-direction: column;
background: var(--lcm-page-bg);
max-width: 480px;
margin: 0 auto;
width: 100%;
min-height: 0; /* let .lcm-body shrink below content height and scroll */
position: relative;
}
.lcm-header {
padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 12px;
background: var(--lcm-page-bg);
flex-shrink: 0;
}
.lcm-header-back {
display: flex;
align-items: center;
gap: 4px;
}
.lcm-header-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.lcm-header-title {
font-size: 30px;
color: var(--lcm-text);
letter-spacing: -0.4px;
line-height: 1.05;
font-family: var(--lcm-display-font);
font-weight: 600;
}
.lcm-header-subtitle {
font-size: 12px;
color: var(--lcm-muted);
font-weight: 500;
margin-top: 4px;
}
.lcm-body {
flex: 1;
min-height: 0; /* flex children otherwise refuse to shrink (min-height:auto) */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
position: relative;
padding-bottom: 80px; /* room for bottom tabs */
}
/* ── Bottom tabs ─────────────────────────────────────────────────── */
.lcm-tabs {
position: fixed;
bottom: 0;
left: 0;
right: 0;
max-width: 480px;
margin: 0 auto;
/* Frosted glass — content scrolls underneath with an iOS-style blur. */
background: rgba(255, 255, 255, 0.86);
backdrop-filter: blur(16px) saturate(1.6);
-webkit-backdrop-filter: blur(16px) saturate(1.6);
border-top: 1px solid rgba(15, 23, 42, 0.07);
display: grid;
padding-bottom: 8px;
z-index: 50;
}
.lcm-tab {
background: transparent;
border: none;
padding: 12px 4px 4px;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
color: var(--lcm-muted);
cursor: pointer;
text-decoration: none;
position: relative;
transition: color 0.18s ease;
}
.lcm-tab-indicator {
position: absolute;
top: 0;
left: 50%;
width: 28px;
height: 3px;
border-radius: 0 0 3px 3px;
background: var(--lcm-primary);
transform: translateX(-50%) scaleX(0);
transform-origin: center;
transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.lcm-tab.active { color: var(--lcm-primary); }
.lcm-tab.active .lcm-tab-indicator { transform: translateX(-50%) scaleX(1); }
.lcm-tab.active .lcm-tab-label { font-weight: 900; }
.lcm-tab-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2px;
transition: font-weight 0.18s ease;
}
/* ── Card ────────────────────────────────────────────────────────── */
.lcm-card {
background: var(--lcm-card);
border: 1px solid var(--lcm-border);
border-radius: var(--lcm-radius-xl);
box-shadow: var(--lcm-shadow-sm);
transition: border-color 120ms, transform 120ms;
}
.lcm-card.interactive {
cursor: pointer;
text-align: left;
width: 100%;
font-family: inherit;
color: inherit;
}
.lcm-card.interactive:hover { border-color: var(--lcm-muted-2); }
.lcm-card.interactive:active { transform: scale(0.99); }
/* ── Section header ──────────────────────────────────────────────── */
.lcm-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
padding-inline: 2px;
}
.lcm-section-header-title {
margin: 0;
font-size: 15px;
font-weight: 900;
color: var(--lcm-text);
letter-spacing: -0.2px;
}
.lcm-section-header-count {
font-size: 11px;
font-weight: 700;
color: var(--lcm-muted-2);
margin-left: 8px;
font-variant-numeric: tabular-nums;
}
/* ── Status chip ─────────────────────────────────────────────────── */
.lcm-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--lcm-radius-pill);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1px;
white-space: nowrap;
}
.lcm-chip.sm { padding: 3px 8px; font-size: 10px; gap: 5px; }
.lcm-chip-dot { width: 6px; height: 6px; border-radius: var(--lcm-radius-pill); flex-shrink: 0; }
/* Status — colors per state */
.lcm-status-abierta { background: #f1f5f9; color: #475569; }
.lcm-status-abierta .lcm-chip-dot { background: #64748b; }
.lcm-status-pendiente-cotiz { background: #fef3c7; color: #a16207; }
.lcm-status-pendiente-cotiz .lcm-chip-dot { background: #d97706; }
.lcm-status-en-proceso { background: #dbeafe; color: #1d4ed8; }
.lcm-status-en-proceso .lcm-chip-dot { background: #2563eb; }
.lcm-status-pendiente-aprob { background: #fef3c7; color: #92400e; }
.lcm-status-pendiente-aprob .lcm-chip-dot { background: #d97706; }
.lcm-status-en-evaluacion { background: #cffafe; color: #0e7490; }
.lcm-status-en-evaluacion .lcm-chip-dot { background: #06b6d4; }
.lcm-status-atendida { background: #e0e7ff; color: #4338ca; }
.lcm-status-atendida .lcm-chip-dot { background: #4f46e5; }
.lcm-status-completada { background: #dcfce7; color: #15803d; }
.lcm-status-completada .lcm-chip-dot { background: #16a34a; }
.lcm-status-facturada { background: #bbf7d0; color: #14532d; }
.lcm-status-facturada .lcm-chip-dot { background: #15803d; }
.lcm-status-rechazada { background: #fee2e2; color: #b91c1c; }
.lcm-status-rechazada .lcm-chip-dot { background: #dc2626; }
.lcm-status-cancelada { background: #e2e8f0; color: #334155; }
.lcm-status-cancelada .lcm-chip-dot { background: #475569; }
/* Status chips render as a colored dot + colored text only — no pill background. */
.lcm-chip[class*="lcm-status-"] {
background: none;
padding-left: 0;
padding-right: 0;
}
/* Priority — colored icon + text only, no pill background (matches status chips). */
.lcm-priority { font-weight: 800; letter-spacing: 0.2px; }
.lcm-chip.lcm-priority { background: none; padding-left: 0; padding-right: 0; }
.lcm-priority-baja { color: #475569; }
.lcm-priority-media { color: #1d4ed8; }
.lcm-priority-alta { color: #c2410c; }
.lcm-priority-emergencia{ color: #b91c1c; }
/* ── Due-date pill ───────────────────────────────────────────────── */
.lcm-due {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
}
.lcm-due.sm { font-size: 10px; }
.lcm-due-overdue { color: #b91c1c; }
.lcm-due-soon { color: #a16207; }
.lcm-due-future { color: #475569; }
/* ── Buttons ─────────────────────────────────────────────────────── */
.lcm-btn {
height: 40px;
padding: 0 16px;
border-radius: var(--lcm-radius-md);
border: 1px solid transparent;
font-size: 14px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
transition: transform 120ms, filter 120ms;
-webkit-tap-highlight-color: transparent;
font-family: inherit;
}
.lcm-btn:active { transform: scale(0.98); }
.lcm-btn:disabled { background: var(--lcm-border) !important; color: var(--lcm-muted-2) !important; cursor: not-allowed; }
.lcm-btn-sm { height: 32px; padding: 0 12px; font-size: 12px; }
.lcm-btn-lg { height: 48px; padding: 0 20px; font-size: 15px; }
.lcm-btn-primary { background: var(--lcm-primary); color: #fff; }
.lcm-btn-primary:hover:not(:disabled) { background: var(--lcm-primary-dark); }
.lcm-btn-dark { background: var(--lcm-navy); color: #fff; }
.lcm-btn-ghost { background: transparent; color: var(--lcm-text-2); border-color: var(--lcm-border); }
.lcm-btn-subtle { background: var(--lcm-inset); color: var(--lcm-text-2); }
.lcm-btn-danger-ghost { background: transparent; color: #b91c1c; border-color: #fecaca; }
/* ── Hero card (the dark "Pendientes" card on Inicio) ────────────── */
.lcm-hero-card {
background: linear-gradient(140deg, #1c2a47 0%, var(--lcm-navy) 55%, #0b1120 100%);
color: #fff;
border-radius: var(--lcm-radius-2xl);
padding: 20px 22px;
border: none;
cursor: pointer;
text-align: left;
font-family: inherit;
width: 100%;
display: flex;
align-items: center;
gap: 18px;
box-shadow: var(--lcm-shadow-lg);
transition: transform 120ms;
}
.lcm-hero-card:active { transform: scale(0.99); }
.lcm-hero-card .label {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.8px;
color: var(--lcm-muted-2);
text-transform: uppercase;
}
.lcm-hero-card .value {
font-size: 56px;
font-weight: 900;
line-height: 1;
margin-top: 6px;
font-variant-numeric: tabular-nums;
letter-spacing: -1.5px;
}
.lcm-hero-card .sublabel {
font-size: 12px;
font-weight: 700;
color: #cbd5e1;
margin-top: 8px;
}
.lcm-hero-card .icon-bubble {
width: 56px;
height: 56px;
border-radius: var(--lcm-radius-pill);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
display: flex;
align-items: center;
justify-content: center;
color: #cbd5e1;
flex-shrink: 0;
}
/* ── Store row (per-store breakdown) ─────────────────────────────── */
.lcm-store-row {
background: var(--lcm-card);
border: 1px solid var(--lcm-border);
border-radius: var(--lcm-radius-xl);
padding: 12px 14px;
cursor: pointer;
font-family: inherit;
text-align: left;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
color: inherit;
transition: border-color 120ms;
}
.lcm-store-row:hover { border-color: var(--lcm-muted-2); }
.lcm-store-row .icon-box {
width: 40px;
height: 40px;
border-radius: var(--lcm-radius-md);
background: var(--lcm-inset);
color: #475569;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.lcm-store-row .name {
font-size: 14px;
font-weight: 800;
color: var(--lcm-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lcm-store-row .code {
font-size: 10px;
font-family: var(--lcm-mono-font);
color: var(--lcm-muted-2);
font-weight: 700;
margin-top: 2px;
}
.lcm-store-row .count-pill {
background: var(--lcm-primary-bg);
color: var(--lcm-primary);
padding: 4px 12px;
border-radius: var(--lcm-radius-pill);
font-size: 12px;
font-weight: 900;
font-variant-numeric: tabular-nums;
}
/* ── Empty state ─────────────────────────────────────────────────── */
.lcm-empty {
padding: 30px;
text-align: center;
background: var(--lcm-card);
border: 1px dashed var(--lcm-border);
border-radius: var(--lcm-radius-xl);
color: var(--lcm-muted);
}
.lcm-empty-title { font-size: 14px; font-weight: 700; color: var(--lcm-text); }
.lcm-empty-sub { font-size: 12px; color: var(--lcm-muted-2); margin-top: 4px; }
/* Scrollbar polish */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; }
/* Page-enter animation — replayed on every navigation (layouts key the
body div by URI), so screens glide in rather than snapping. */
@keyframes lcmFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.lcm-fade-in { animation: lcmFadeIn 320ms var(--lcm-ease-out); }
/* ── Tab pill bar (segmented control inside a page) ───────────────── */
.lcm-tab-bar {
display: flex;
gap: 4px;
background: var(--lcm-inset);
border-radius: var(--lcm-radius-lg);
padding: 4px;
margin: 0 16px 12px;
}
.lcm-tab-pill {
flex: 1;
padding: 9px 10px;
border-radius: var(--lcm-radius-md);
background: transparent;
border: none;
cursor: pointer;
font-family: inherit;
font-size: 12px;
font-weight: 800;
color: var(--lcm-muted);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.lcm-tab-pill.active {
background: var(--lcm-card);
color: var(--lcm-text);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.lcm-tab-count {
font-size: 10px;
background: #cbd5e1;
color: #fff;
padding: 2px 7px;
border-radius: var(--lcm-radius-pill);
min-width: 18px;
text-align: center;
font-weight: 800;
}
.lcm-tab-pill.active .lcm-tab-count {
background: var(--lcm-primary);
}
/* ── Work Order list card (with left photo) ───────────────────────── */
.lcm-wo-card {
padding: 0;
overflow: hidden;
cursor: pointer;
text-align: left;
width: 100%;
font-family: inherit;
color: inherit;
background: var(--lcm-card);
border: 1px solid var(--lcm-border);
border-radius: var(--lcm-radius-xl);
transition: border-color 120ms;
display: block;
}
.lcm-wo-card:hover { border-color: var(--lcm-muted-2); }
.lcm-wo-card-row { display: flex; }
.lcm-wo-card-photo {
width: 88px;
height: 108px;
flex-shrink: 0;
background: repeating-linear-gradient(135deg, #eef2f6 0 10px, #e2e8f0 10px 20px);
border-right: 1px solid var(--lcm-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--lcm-mono-font);
font-size: 10px;
font-weight: 600;
color: var(--lcm-muted);
text-transform: uppercase;
letter-spacing: 0.6px;
}
.lcm-wo-card-content {
flex: 1;
padding: 12px;
min-width: 0;
}
.lcm-wo-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
}
.lcm-wo-card-mono {
font-family: var(--lcm-mono-font);
font-size: 11px;
font-weight: 700;
color: #475569;
letter-spacing: 0.2px;
}
.lcm-wo-card-name {
font-size: 14px;
font-weight: 800;
color: var(--lcm-text);
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lcm-wo-card-desc {
font-size: 12px;
color: var(--lcm-muted);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lcm-wo-card-meta {
display: flex;
gap: 14px;
margin-top: 8px;
flex-wrap: wrap;
}
/* ── Empty state with icon bubble ─────────────────────────────────── */
.lcm-empty-with-icon {
margin-top: 24px;
padding: 40px 16px;
text-align: center;
background: var(--lcm-card);
border: 1px dashed var(--lcm-border);
border-radius: var(--lcm-radius-xl);
}
.lcm-empty-icon {
width: 56px;
height: 56px;
border-radius: var(--lcm-radius-pill);
background: var(--lcm-green-bg);
color: var(--lcm-green);
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
}
.lcm-empty-icon-title {
font-size: 15px;
font-weight: 900;
color: var(--lcm-text);
margin-bottom: 4px;
}
.lcm-empty-icon-sub {
font-size: 12px;
color: var(--lcm-muted);
}
/* ── Back-bar header for sub-pages ────────────────────────────────── */
.lcm-back-bar {
display: flex;
align-items: center;
gap: 4px;
padding: calc(8px + env(safe-area-inset-top)) 16px 12px;
}
.lcm-back-bar-button {
background: transparent;
border: none;
padding: 8px;
border-radius: var(--lcm-radius-pill);
color: var(--lcm-text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.lcm-back-bar-title {
flex: 1;
font-size: 15px;
font-weight: 700;
color: var(--lcm-text);
}
/* ── Meta row (label + value, used on detail screens) ─────────────── */
.lcm-meta-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid var(--lcm-border-muted);
}
.lcm-meta-row:last-child { border-bottom: none; }
.lcm-meta-label {
font-size: 11px;
font-weight: 700;
color: var(--lcm-muted);
flex-shrink: 0;
}
.lcm-meta-value {
font-size: 13px;
font-weight: 700;
color: var(--lcm-text);
text-align: right;
word-break: break-word;
}
.lcm-meta-value.empty {
color: var(--lcm-muted-2);
font-style: italic;
font-weight: 600;
}
.lcm-meta-sub {
font-size: 11px;
color: var(--lcm-muted);
margin-top: 1px;
text-align: right;
}
/* ── Inline quote selection (in WO Detail for coord) ─────────────── */
.lcm-quote-row {
display: block;
width: 100%;
text-align: left;
background: var(--lcm-card);
border: 1px solid var(--lcm-border);
border-radius: var(--lcm-radius-xl);
padding: 12px;
cursor: pointer;
font-family: inherit;
color: inherit;
text-decoration: none;
position: relative;
}
.lcm-quote-row.active {
border: 2px solid var(--lcm-primary);
padding: 11px;
}
.lcm-quote-row .quote-badges {
position: absolute;
top: -8px;
right: 10px;
display: flex;
gap: 6px;
}
.lcm-quote-row .best-badge,
.lcm-quote-row .fast-badge {
color: #fff;
font-size: 9px;
font-weight: 900;
letter-spacing: 0.6px;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
}
.lcm-quote-row .best-badge { background: var(--lcm-green); }
.lcm-quote-row .fast-badge { background: var(--lcm-blue); }
.lcm-quote-radio {
width: 20px;
height: 20px;
border-radius: 999px;
border: 2px solid var(--lcm-muted-2);
background: var(--lcm-card);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.lcm-quote-radio.active {
background: var(--lcm-primary);
border-color: var(--lcm-primary);
}
/* Video play overlay for image gallery */
.lcm-video-tile {
position: relative;
width: 92px;
height: 92px;
background: repeating-linear-gradient(135deg, #eef2f6 0 10px, #e2e8f0 10px 20px);
border: 1px solid var(--lcm-border);
border-radius: 12px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.lcm-video-tile-button {
width: 44px;
height: 44px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.8);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
/* ── Form fields ──────────────────────────────────────────────────── */
.lcm-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 16px;
}
.lcm-field-label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--lcm-muted-2);
}
.lcm-field-hint {
font-size: 11px;
color: var(--lcm-muted-2);
margin-top: 4px;
}
.lcm-input,
.lcm-textarea {
width: 100%;
box-sizing: border-box;
padding: 12px;
border: 1px solid var(--lcm-border);
border-radius: var(--lcm-radius-md);
font-size: 13px;
font-family: inherit;
color: var(--lcm-text);
outline: none;
transition: border-color 120ms;
background: var(--lcm-card);
}
.lcm-input:focus,
.lcm-textarea:focus {
border-color: var(--lcm-primary);
}
.lcm-input { height: 40px; padding: 0 12px; }
.lcm-textarea { min-height: 140px; line-height: 1.5; resize: vertical; }
.lcm-input-mini {
height: 36px;
box-sizing: border-box;
padding: 0 10px;
border: 1px solid var(--lcm-border);
border-radius: var(--lcm-radius-sm);
font-size: 13px;
font-family: inherit;
outline: none;
text-align: right;
font-variant-numeric: tabular-nums;
}
.lcm-char-count {
font-size: 10px;
color: var(--lcm-muted-2);
text-align: right;
font-weight: 600;
margin-top: 2px;
}
/* ── Photo button (the dashed "Tomar foto" placeholder) ──────────── */
.lcm-photo-button {
width: 100%;
aspect-ratio: 4 / 3;
background: var(--lcm-card);
border: 1.5px dashed #cbd5e1;
border-radius: var(--lcm-radius-lg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--lcm-muted);
cursor: pointer;
font-family: inherit;
transition: border-color 120ms;
}
.lcm-photo-button:hover { border-color: var(--lcm-primary); }
.lcm-photo-button-label { font-size: 13px; font-weight: 700; }
.lcm-photo-button-hint { font-size: 11px; color: var(--lcm-muted-2); }
.lcm-hidden-file {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* ── Filter builder ───────────────────────────────────────────────── */
.lcm-filter-builder {
display: flex;
flex-direction: column;
gap: 8px;
}
.lcm-filter-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.lcm-filter-chip {
display: inline-flex;
align-items: stretch;
background: var(--lcm-card);
border: 1px solid var(--lcm-muted-2);
border-radius: var(--lcm-radius-pill);
overflow: hidden;
font-size: 11px;
font-weight: 700;
height: 28px;
}
.lcm-filter-chip-label {
padding: 0 10px;
color: var(--lcm-muted);
background: var(--lcm-page-bg);
border-right: 1px solid var(--lcm-border);
display: flex;
align-items: center;
flex-shrink: 0;
}
.lcm-filter-chip-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
border: none;
outline: none;
padding: 0 22px 0 10px;
font-size: 11px;
font-weight: 800;
color: var(--lcm-text);
font-family: inherit;
cursor: pointer;
max-width: 200px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
}
.lcm-filter-chip-select:invalid,
.lcm-filter-chip-select option[value=""] { color: #b91c1c; }
.lcm-filter-chip-x {
background: transparent;
border: none;
border-left: 1px solid var(--lcm-border);
padding: 0 8px;
color: var(--lcm-muted-2);
cursor: pointer;
display: flex;
align-items: center;
}
.lcm-filter-chip-x:hover { color: var(--lcm-text); }
.lcm-filter-clear {
background: transparent;
border: none;
color: var(--lcm-muted);
font-size: 11px;
font-weight: 700;
cursor: pointer;
padding: 4px 8px;
font-family: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.lcm-add-filter-wrap {
align-self: flex-start;
position: relative;
display: inline-block;
}
.lcm-add-filter-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--lcm-card);
color: var(--lcm-text);
border: 1px solid var(--lcm-border);
padding: 8px 14px;
border-radius: var(--lcm-radius-pill);
font-size: 12px;
font-weight: 700;
}
.lcm-add-filter-pill svg { color: var(--lcm-muted); }
.lcm-add-filter-select {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
font-family: inherit;
width: 100%;
height: 100%;
border: 0;
background: transparent;
}
/* ── Sign-in screen ───────────────────────────────────────────────── */
.lcm-signin-root {
flex: 1;
display: flex;
flex-direction: column;
background: var(--lcm-navy);
overflow: auto;
min-height: 100vh;
}
.lcm-signin-brand {
padding: 36px 24px 20px;
color: #fff;
}
.lcm-signin-eyebrow {
font-size: 10px;
font-weight: 900;
letter-spacing: 3px;
color: var(--lcm-primary);
text-transform: uppercase;
margin-bottom: 12px;
}
.lcm-signin-logo {
font-size: 36px;
color: #fff;
line-height: 1;
}
.lcm-signin-tagline {
font-size: 13px;
color: var(--lcm-muted-2);
margin-top: 4px;
font-weight: 500;
}
.lcm-signin-card {
flex: 1;
background: var(--lcm-page-bg);
border-top-left-radius: 28px;
border-top-right-radius: 28px;
padding: 26px 20px 30px;
margin-top: 8px;
}
.lcm-signin-title {
font-size: 18px;
font-weight: 900;
color: var(--lcm-text);
letter-spacing: -0.3px;
}
.lcm-signin-sub {
font-size: 12px;
color: var(--lcm-muted);
margin-top: 4px;
margin-bottom: 20px;
}
.lcm-signin-error {
margin-top: 10px;
padding: 9px 12px;
background: var(--lcm-red-bg);
border: 1px solid var(--lcm-red-border);
border-radius: var(--lcm-radius-md);
font-size: 12px;
color: #991b1b;
display: flex;
gap: 8px;
align-items: center;
}
.lcm-signin-demo-divider {
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid var(--lcm-border);
}
.lcm-signin-demo-label {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.8px;
color: var(--lcm-muted-2);
text-transform: uppercase;
margin-bottom: 10px;
text-align: center;
}
.lcm-signin-demo-row {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 12px;
background: var(--lcm-card);
border: 1px solid var(--lcm-border);
border-radius: var(--lcm-radius-lg);
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
color: inherit;
transition: border-color 120ms, background 120ms;
}
.lcm-signin-demo-row:hover {
border-color: var(--lcm-navy);
background: var(--lcm-page-bg);
}
.lcm-signin-demo-avatar {
width: 36px; height: 36px;
border-radius: 999px;
background: var(--lcm-navy);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 11px;
flex-shrink: 0;
letter-spacing: 0.2px;
}
.lcm-signin-demo-name {
font-size: 13px;
font-weight: 800;
color: var(--lcm-text);
}
.lcm-signin-demo-label2 {
font-size: 11px;
color: var(--lcm-muted);
margin-top: 1px;
}
.lcm-signin-footer {
font-size: 10px;
color: var(--lcm-muted-2);
margin-top: 24px;
text-align: center;
line-height: 1.5;
font-weight: 500;
}
/* ── Profile (matching design's items list) ──────────────────────── */
.lcm-perfil-item {
padding: 14px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--lcm-border-muted);
cursor: pointer;
text-decoration: none;
color: inherit;
}
.lcm-perfil-item.last { border-bottom: none; }
.lcm-perfil-item:hover { background: var(--lcm-page-bg); }
.lcm-perfil-item-icon { color: #475569; flex-shrink: 0; }
.lcm-perfil-item-label {
font-size: 13px;
font-weight: 700;
color: var(--lcm-text);
}
.lcm-perfil-item-sub {
font-size: 11px;
color: var(--lcm-muted);
margin-top: 1px;
}
/* Cerrar sesión as a plain row inside the perfil settings card:
red label + icon, no pill background. */
.lcm-perfil-logout {
width: 100%;
border: none;
background: transparent;
text-align: left;
font-family: inherit;
}
.lcm-perfil-logout .lcm-perfil-item-label,
.lcm-perfil-logout .lcm-perfil-item-icon { color: #dc2626; }
.lcm-perfil-logout:hover { background: #fef2f2; }
/* ── WO Detail hero header (display title + chips) ───────────────── */
.lcm-wo-hero {
display: flex;
flex-direction: column;
gap: 6px;
}
.lcm-wo-hero-meta {
display: flex;
gap: 6px;
align-items: center;
margin-bottom: 6px;
}
.lcm-wo-hero-title {
margin: 0;
font-size: 24px;
color: var(--lcm-text);
line-height: 1.2;
font-family: var(--lcm-display-font);
font-weight: 600;
letter-spacing: -0.01em;
}
.lcm-wo-hero-chips {
display: flex;
gap: 6px;
margin-top: 8px;
flex-wrap: wrap;
}
.lcm-wo-meta-chip {
font-size: 10px;
font-weight: 700;
color: var(--lcm-muted);
background: var(--lcm-inset);
padding: 3px 8px;
border-radius: var(--lcm-radius-pill);
letter-spacing: 0.2px;
text-transform: uppercase;
}
/* ── Bottom-sheet confirmation modal ─────────────────────────────── */
.lcm-sheet-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.5);
z-index: 100;
display: flex;
align-items: flex-end;
justify-content: center;
animation: lcmFadeBackdrop 200ms ease-out;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
@keyframes lcmFadeBackdrop {
from { background: rgba(15, 23, 42, 0); }
to { background: rgba(15, 23, 42, 0.5); }
}
.lcm-sheet {
background: var(--lcm-card);
border-top-left-radius: 22px;
border-top-right-radius: 22px;
width: 100%;
max-width: 480px;
padding: 18px 18px 24px;
animation: lcmSlideUp 340ms var(--lcm-ease-sheet);
box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.18);
}
@keyframes lcmSlideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.lcm-sheet-handle {
width: 44px;
height: 4px;
background: var(--lcm-muted-2);
border-radius: 999px;
margin: 0 auto 14px;
}
.lcm-sheet-title {
font-size: 18px;
font-weight: 900;
color: var(--lcm-text);
letter-spacing: -0.3px;
}
.lcm-sheet-message {
font-size: 13px;
color: var(--lcm-muted);
margin-top: 6px;
line-height: 1.5;
}
/* ── Overflow menu (...) ─────────────────────────────────────────── */
.lcm-overflow-wrap { position: relative; }
.lcm-overflow-button {
background: transparent;
border: none;
padding: 8px;
border-radius: var(--lcm-radius-pill);
color: var(--lcm-text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.lcm-overflow-button:hover { background: var(--lcm-inset); }
.lcm-overflow-shade {
position: fixed;
inset: 0;
z-index: 60;
}
.lcm-overflow-menu {
position: absolute;
top: 36px;
right: 0;
z-index: 61;
background: var(--lcm-card);
border: 1px solid var(--lcm-border);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
min-width: 200px;
padding: 6px;
}
.lcm-overflow-item {
display: block;
width: 100%;
text-align: left;
padding: 10px 12px;
border: none;
background: transparent;
color: var(--lcm-text);
font-size: 13px;
font-weight: 700;
font-family: inherit;
border-radius: 8px;
cursor: pointer;
text-decoration: none;
}
.lcm-overflow-item:hover { background: var(--lcm-inset); }
.lcm-overflow-item.danger { color: #b91c1c; }
/* Coord cotization line label */
.lcm-coord-line-label {
font-size: 10px;
font-weight: 800;
color: var(--lcm-muted-2);
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: 4px;
}
/* ── Timeline ────────────────────────────────────────────────────── */
.lcm-timeline {
padding: 12px 14px;
}
.lcm-timeline-row {
display: flex;
gap: 10px;
}
.lcm-timeline-dot-col {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 3px;
}
.lcm-timeline-dot {
width: 10px; height: 10px;
border-radius: 999px;
background: var(--lcm-muted-2);
flex-shrink: 0;
}
.lcm-timeline-dot.active {
background: var(--lcm-navy);
border: 2px solid #fff;
box-shadow: 0 0 0 2px var(--lcm-navy);
}
.lcm-timeline-dot.accent { background: var(--lcm-primary); }
.lcm-timeline-line {
width: 2px;
flex: 1;
background: var(--lcm-border);
margin-top: 2px;
}
.lcm-timeline-content {
flex: 1;
padding-bottom: 8px;
}
.lcm-timeline-content.last { padding-bottom: 0; }
.lcm-timeline-label {
font-size: 12px;
font-weight: 800;
color: var(--lcm-text);
}
.lcm-timeline-when {
font-size: 11px;
color: var(--lcm-muted);
margin-top: 1px;
}
.lcm-timeline-note {
font-size: 11px;
color: #475569;
margin-top: 4px;
font-style: italic;
}
.lcm-photo-frame { position: relative; }
.lcm-photo-tile {
background: repeating-linear-gradient(135deg, #eef2f6 0 10px, #e2e8f0 10px 20px);
border: 1px solid var(--lcm-border);
border-radius: var(--lcm-radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--lcm-muted);
font-family: var(--lcm-mono-font);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.lcm-photo-remove {
position: absolute;
top: 8px; right: 8px;
background: rgba(15, 23, 42, 0.7);
border: none;
color: #fff;
width: 28px;
height: 28px;
border-radius: var(--lcm-radius-pill);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
/* ── Sticky bottom action bar (used on form pages) ──────────────── */
.lcm-action-bar {
position: sticky;
bottom: 0;
left: 0;
right: 0;
background: var(--lcm-card);
border-top: 1px solid var(--lcm-border);
padding: 10px 14px 14px;
display: flex;
gap: 8px;
z-index: 40;
}
/* ── Info card (blue informational banner) ──────────────────────── */
.lcm-info-card {
padding: 14px;
background: var(--lcm-blue-bg);
border: 1px solid var(--lcm-blue-border);
border-radius: var(--lcm-radius-xl);
display: flex;
gap: 10px;
align-items: flex-start;
}
.lcm-info-card-icon { color: var(--lcm-blue); flex-shrink: 0; }
.lcm-info-card-text { font-size: 12px; color: #1e3a8a; line-height: 1.5; }
/* ── Action button list (vertical buttons on detail screens) ────── */
.lcm-action-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.lcm-action-list .lcm-btn { width: 100%; height: 48px; font-size: 14px; }
/* ── Quote line item card ───────────────────────────────────────── */
.lcm-line-grid {
display: grid;
grid-template-columns: 70px 1fr 110px;
gap: 6px;
align-items: center;
}
.lcm-line-amount {
background: var(--lcm-inset);
border-radius: var(--lcm-radius-sm);
padding: 0 10px;
height: 36px;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 13px;
font-weight: 800;
color: var(--lcm-text);
font-variant-numeric: tabular-nums;
}
.lcm-line-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.lcm-line-num {
font-size: 11px;
font-weight: 800;
color: var(--lcm-muted-2);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.lcm-line-remove {
background: transparent;
border: none;
color: #dc2626;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
}
.lcm-link-button {
background: transparent;
border: none;
color: var(--lcm-primary);
font-size: 12px;
font-weight: 700;
cursor: pointer;
padding: 0;
font-family: inherit;
}
/* ── Sticky total bar (Cargar Cotización) ───────────────────────── */
.lcm-total-bar {
position: sticky;
bottom: 0;
background: var(--lcm-card);
border-top: 1px solid var(--lcm-border);
padding: 12px 16px 14px;
display: flex;
gap: 10px;
align-items: center;
z-index: 40;
}
.lcm-total-bar-label {
font-size: 10px;
font-weight: 800;
color: var(--lcm-muted-2);
letter-spacing: 0.4px;
text-transform: uppercase;
}
.lcm-total-bar-value {
font-size: 20px;
font-weight: 900;
color: var(--lcm-text);
font-variant-numeric: tabular-nums;
}
/* Offline banner */
.lcm-offline-banner {
margin: 0 16px 8px;
padding: 10px 12px;
background: var(--lcm-amber-bg);
border: 1px solid var(--lcm-amber-border);
border-radius: var(--lcm-radius-md);
display: flex;
gap: 10px;
align-items: center;
color: #92400e;
font-size: 12px;
font-weight: 700;
}
.lcm-offline-banner-tag {
font-size: 10px;
font-weight: 800;
background: var(--lcm-card);
padding: 3px 8px;
border-radius: var(--lcm-radius-pill);
}
/* ── KPI tile grid (Manager / Coord home) ────────────────────────── */
.lcm-kpi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.lcm-kpi-tile {
background: var(--lcm-card);
border: 1px solid var(--lcm-border);
border-radius: var(--lcm-radius-lg);
padding: 10px 10px 12px;
text-align: left;
cursor: pointer;
font-family: inherit;
display: flex;
flex-direction: column;
min-width: 0;
color: inherit;
text-decoration: none;
transition: border-color 120ms;
}
.lcm-kpi-tile:hover { border-color: var(--lcm-muted-2); }
.lcm-kpi-tile.accent {
background: var(--lcm-primary-bg);
border-color: var(--lcm-primary-border);
color: var(--lcm-primary-dark);
}
.lcm-kpi-tile-label {
font-size: 8.5px;
font-weight: 800;
letter-spacing: 0.5px;
color: var(--lcm-muted-2);
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
margin-bottom: 10px;
}
.lcm-kpi-tile.accent .lcm-kpi-tile-label { color: var(--lcm-primary); }
.lcm-kpi-tile-row {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.lcm-kpi-tile-icon {
width: 26px;
height: 26px;
border-radius: 7px;
background: var(--lcm-inset);
color: var(--lcm-muted);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.lcm-kpi-tile.accent .lcm-kpi-tile-icon {
background: var(--lcm-primary-bg-2);
color: var(--lcm-primary);
}
.lcm-kpi-tile-value {
font-size: 22px;
font-weight: 900;
color: var(--lcm-text);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.lcm-kpi-tile.accent .lcm-kpi-tile-value { color: var(--lcm-primary-dark); }
/* ── Tech / generic row (avatar + label + count) ─────────────────── */
.lcm-listrow {
background: var(--lcm-card);
border: 1px solid var(--lcm-border);
border-radius: var(--lcm-radius-xl);
padding: 12px;
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
color: inherit;
text-decoration: none;
display: flex;
align-items: center;
gap: 12px;
transition: border-color 120ms;
}
.lcm-listrow:hover { border-color: var(--lcm-muted-2); }
.lcm-listrow-avatar {
width: 40px;
height: 40px;
border-radius: var(--lcm-radius-pill);
background: var(--lcm-inset);
color: #475569;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
flex-shrink: 0;
font-size: 13px;
}
.lcm-listrow-avatar.unassigned {
background: var(--lcm-primary-bg);
color: var(--lcm-primary);
}
.lcm-listrow-name {
font-size: 13px;
font-weight: 900;
color: var(--lcm-text);
}
.lcm-listrow-sub {
font-size: 10px;
color: var(--lcm-muted-2);
margin-top: 1px;
font-weight: 700;
font-family: var(--lcm-mono-font);
}
.lcm-listrow-count {
background: var(--lcm-primary-bg);
color: var(--lcm-primary);
padding: 4px 10px;
border-radius: var(--lcm-radius-pill);
font-size: 11px;
font-weight: 900;
font-variant-numeric: tabular-nums;
}
/* ── Search bar ──────────────────────────────────────────────────── */
.lcm-search-wrap { position: relative; }
.lcm-search-wrap .lcm-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--lcm-muted-2);
pointer-events: none;
}
.lcm-search-input {
width: 100%;
height: 42px;
background: #f1f5f9;
border: 1px solid transparent;
border-radius: var(--lcm-radius-md);
padding-left: 36px;
padding-right: 12px;
font-size: 13px;
color: var(--lcm-text);
outline: none;
font-family: inherit;
box-sizing: border-box;
transition: background 120ms, border-color 120ms;
}
.lcm-search-input:focus { background: var(--lcm-card); border-color: var(--lcm-border); }
/* Search row — flat search field + compact filter/sort button */
.lcm-search-row { display: flex; align-items: center; gap: 10px; }
.lcm-search-row .lcm-search-wrap { flex: 1; min-width: 0; }
.lcm-tools-btn {
position: relative;
flex-shrink: 0;
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--lcm-card);
border: 1px solid var(--lcm-border);
border-radius: var(--lcm-radius-md);
color: var(--lcm-muted);
cursor: pointer;
transition: background 120ms, border-color 120ms, color 120ms, transform 120ms;
}
.lcm-tools-btn:active { transform: scale(0.96); }
.lcm-tools-btn.active { background: #f1f5f9; color: var(--lcm-text); }
.lcm-tools-dot {
position: absolute;
top: 7px;
right: 7px;
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--lcm-primary);
border: 1.5px solid var(--lcm-card);
}
.lcm-tools-panel {
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px;
background: var(--lcm-card);
border: 1px solid var(--lcm-border);
border-radius: var(--lcm-radius-md);
}
/* ── Fixed-asset searchable picker (Nueva OT) ────────────────────── */
.lcm-fapicker { position: relative; }
/* Collapsed selected-asset chip */
.lcm-fapicker-selected {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--lcm-card);
border: 1px solid var(--lcm-border);
border-radius: var(--lcm-radius-md);
cursor: pointer;
text-align: left;
font-family: inherit;
}
.lcm-fapicker-selected-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.lcm-fapicker-selected-desc {
font-size: 13px;
font-weight: 700;
color: var(--lcm-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lcm-fapicker-change {
font-size: 12px;
font-weight: 700;
color: var(--lcm-primary);
flex-shrink: 0;
}
/* Results panel */
.lcm-fapicker-panel {
margin-top: 6px;
background: var(--lcm-card);
border: 1px solid var(--lcm-border);
border-radius: var(--lcm-radius-md);
max-height: 280px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.lcm-fapicker-empty {
padding: 14px 12px;
font-size: 12px;
color: var(--lcm-muted);
text-align: center;
}
.lcm-fapicker-option {
width: 100%;
display: flex;
align-items: baseline;
gap: 8px;
padding: 10px 12px;
background: transparent;
border: none;
border-bottom: 1px solid var(--lcm-border);
cursor: pointer;
text-align: left;
font-family: inherit;
}
.lcm-fapicker-option:last-child { border-bottom: none; }
.lcm-fapicker-option:hover,
.lcm-fapicker-option.active { background: var(--lcm-bg, #f8fafc); }
.lcm-fapicker-option-no {
flex-shrink: 0;
font-size: 12px;
font-weight: 700;
color: var(--lcm-muted-2);
}
.lcm-fapicker-option-desc {
flex: 1;
min-width: 0;
font-size: 13px;
color: var(--lcm-text);
line-height: 1.35;
}
.lcm-fapicker-more {
padding: 8px 12px;
font-size: 11px;
color: var(--lcm-muted-2);
text-align: center;
background: var(--lcm-bg, #f8fafc);
}
/* Barcode scan — button in the search bar + full-screen camera overlay */
.lcm-search-input--scan { padding-right: 44px; }
.lcm-fapicker-scan {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 8px;
color: var(--lcm-primary);
cursor: pointer;
}
.lcm-fapicker-scan:active { background: var(--lcm-bg, #f8fafc); }
.lcm-scan-overlay {
position: fixed;
inset: 0;
z-index: 1400; /* above everything, incl. the 1300 modals */
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
.lcm-scan-video {
width: 100%;
height: 100%;
object-fit: cover;
}
.lcm-scan-frame {
position: absolute;
width: min(78vw, 340px);
height: min(30vh, 200px);
border: 2px solid rgba(255, 255, 255, .9);
border-radius: 14px;
/* dim everything outside the guide box */
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45);
pointer-events: none;
}
.lcm-scan-hint {
position: absolute;
left: 16px;
right: 16px;
bottom: calc(36px + env(safe-area-inset-bottom));
text-align: center;
color: #fff;
font-size: 13px;
font-weight: 600;
text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.lcm-scan-hint.error { color: #fca5a5; }
.lcm-scan-close {
position: absolute;
top: calc(14px + env(safe-area-inset-top));
right: 14px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .5);
border: none;
border-radius: 50%;
color: #fff;
cursor: pointer;
}
/* ── Compact WO row (icon avatar variant — used on shared OT list) ─ */
.lcm-wo-row-compact {
background: var(--lcm-card);
border: 1px solid var(--lcm-border);
border-radius: var(--lcm-radius-xl);
padding: 14px;
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
color: inherit;
text-decoration: none;
display: flex;
align-items: center;
gap: 14px;
transition: border-color 120ms;
}
.lcm-wo-row-compact:hover { border-color: var(--lcm-muted-2); }
.lcm-wo-row-compact-avatar {
width: 48px;
height: 48px;
border-radius: var(--lcm-radius-pill);
background: var(--lcm-inset);
display: flex;
align-items: center;
justify-content: center;
color: var(--lcm-muted);
flex-shrink: 0;
font-family: var(--lcm-mono-font);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.4px;
}
.lcm-wo-row-compact-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--lcm-muted-2);
font-family: var(--lcm-mono-font);
font-weight: 700;
}
.lcm-wo-row-compact-store {
font-family: var(--lcm-font);
color: var(--lcm-muted);
}
.lcm-wo-row-compact-title {
font-size: 15px;
font-weight: 800;
color: var(--lcm-text);
margin-top: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.1px;
}
.lcm-wo-row-compact-chips {
display: flex;
gap: 14px;
margin-top: 8px;
flex-wrap: wrap;
}
/* ── FAB (floating "+ OT" button) ────────────────────────────────── */
/* Stays inside the centered 480px mobile shell, even on wide viewports.
Math: shell half-width is 240px, FAB sits 14px in from the shell's right edge,
so right-distance from viewport = 50% - (240 - 14) = 50% - 226px. */
.lcm-fab {
position: fixed;
bottom: 84px; /* above bottom tabs */
right: max(14px, calc(50% - 226px));
z-index: 45;
background: var(--lcm-primary);
color: #fff;
border: none;
height: 56px;
width: 56px;
border-radius: 50%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.20), 0 2px 4px rgba(15, 23, 42, 0.12);
cursor: pointer;
font-family: inherit;
text-decoration: none;
}
.lcm-fab:hover { background: var(--lcm-primary-dark); }
/* Disabled state — used while master data (categories + coordinators) is
still loading. Same footprint as the enabled FAB so layout doesn't shift
when it flips. pointer-events: none also stops the cursor changing. */
.lcm-fab--disabled {
background: var(--lcm-border);
color: #94a3b8;
cursor: progress;
box-shadow: none;
pointer-events: none;
}
.lcm-fab--disabled:hover { background: var(--lcm-border); }
/* ── Notification Bell ──────────────────────────────────────────────── */
/* Wrapper anchors the dropdown panel — the page header row is the natural
container, but the panel itself is fixed-position so it overlays the page
shell on small viewports. */
.lcm-bell-wrap {
position: relative;
display: inline-flex;
}
.lcm-bell-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
background: transparent;
border: none;
color: var(--lcm-text, #0f172a);
cursor: pointer;
padding: 0;
}
.lcm-bell-btn:hover { background: var(--lcm-surface-2, rgba(0,0,0,0.04)); }
.lcm-bell-btn.is-open { background: var(--lcm-surface-2, rgba(0,0,0,0.06)); }
.lcm-bell-badge {
position: absolute;
top: 4px;
right: 4px;
min-width: 18px;
height: 18px;
border-radius: 9px;
background: var(--lcm-danger, #d92d20);
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 18px;
padding: 0 5px;
text-align: center;
box-shadow: 0 0 0 2px var(--lcm-surface, #fff);
}
/* Scrim sits behind the panel — tap to dismiss. Sized to the entire
viewport so any tap outside the panel closes it. */
.lcm-bell-scrim {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.18);
z-index: 50;
}
.lcm-bell-panel {
position: fixed;
top: 56px; /* below the topbar */
right: max(8px, calc(50% - 232px));
left: max(8px, calc(50% - 232px));
z-index: 51;
background: var(--lcm-surface, #fff);
border-radius: 14px;
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08);
overflow: hidden;
/* Cap the popover so it stays a compact dropdown even with many unread
items — the inner .lcm-bell-list already has overflow-y: auto so it
scrolls inside. min(…) keeps it sensible on both phones (65vh dominates)
and tall desktop windows (520px absolute cap). The earlier
calc(100dvh - 80px) let the panel grow to nearly the full screen, which
made the popover feel heavy and hard to dismiss on mobile. */
max-height: min(65vh, 520px);
display: flex;
flex-direction: column;
}
.lcm-bell-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid var(--lcm-border, #e2e8f0);
}
.lcm-bell-panel-title {
font-size: 15px;
font-weight: 800;
}
.lcm-bell-mark-all {
background: none;
border: none;
color: var(--lcm-primary, #3f5d4a);
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.lcm-bell-mark-all:disabled { opacity: 0.5; cursor: progress; }
.lcm-bell-list {
overflow-y: auto;
flex: 1;
-webkit-overflow-scrolling: touch;
}
.lcm-bell-row {
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
padding: 12px 16px;
border: none;
background: transparent;
text-align: left;
cursor: pointer;
border-bottom: 1px solid var(--lcm-border, #f1f5f9);
}
.lcm-bell-row:last-child { border-bottom: none; }
.lcm-bell-row:hover { background: var(--lcm-surface-2, rgba(0,0,0,0.03)); }
.lcm-bell-row.is-read { opacity: 0.7; }
.lcm-bell-row-dot {
flex: 0 0 8px;
width: 8px;
height: 8px;
border-radius: 4px;
background: var(--lcm-primary, #3f5d4a);
margin-top: 6px;
}
.lcm-bell-row-dot.is-read { background: transparent; }
.lcm-bell-row-body {
flex: 1;
min-width: 0;
}
.lcm-bell-row-title {
font-size: 13px;
font-weight: 700;
color: var(--lcm-text, #0f172a);
line-height: 1.3;
}
.lcm-bell-row-meta {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 4px;
font-size: 12px;
color: var(--lcm-text-muted, #64748b);
}
.lcm-bell-row-msg {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lcm-bell-row-time { flex-shrink: 0; font-size: 11px; }
.lcm-bell-empty {
padding: 40px 24px;
text-align: center;
color: var(--lcm-text-muted, #64748b);
font-size: 13px;
}
.lcm-bell-empty-icon {
width: 48px;
height: 48px;
margin: 0 auto 12px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 24px;
background: var(--lcm-surface-2, rgba(0,0,0,0.04));
color: var(--lcm-text-muted, #94a3b8);
}
.lcm-bell-empty-title {
font-weight: 700;
color: var(--lcm-text, #0f172a);
font-size: 14px;
margin-bottom: 4px;
}
.lcm-bell-empty-sub { font-size: 12px; line-height: 1.4; }
/* ── iOS-style switch ───────────────────────────────────────────────── */
/* Used on Perfil for the "Notificaciones push" toggle. Hidden checkbox
drives a CSS-animated track; pseudo-element on the track acts as the
knob. No JS needed — the change event lives on the underlying input. */
.lcm-switch {
position: relative;
display: inline-block;
width: 44px;
height: 26px;
flex-shrink: 0;
}
.lcm-switch input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.lcm-switch-track {
position: absolute;
inset: 0;
background: #cbd5e1;
border-radius: 999px;
transition: background-color 180ms;
cursor: pointer;
}
.lcm-switch-track::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
transition: transform 300ms var(--lcm-ease-spring);
}
.lcm-switch input:checked + .lcm-switch-track {
background: var(--lcm-primary, #3f5d4a);
}
.lcm-switch input:checked + .lcm-switch-track::before {
transform: translateX(18px);
}
.lcm-switch input:disabled + .lcm-switch-track {
opacity: 0.55;
cursor: progress;
}
/* ── Push onboarding banner ─────────────────────────────────────────── */
/* Shown above the dashboard content on first authenticated load when push
permission is "default". Once dismissed (Activar or Más tarde), the
localStorage flag keeps it from reappearing on this device. */
.lcm-push-banner {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 14px 14px 12px;
margin: 12px 16px 6px;
background: linear-gradient(135deg, #eef5f0 0%, #f7faf8 100%);
border: 1px solid #d4e2da;
border-radius: 12px;
}
.lcm-push-banner-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 10px;
background: var(--lcm-primary, #3f5d4a);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.lcm-push-banner-body {
flex: 1;
min-width: 0;
}
.lcm-push-banner-title {
font-size: 14px;
font-weight: 800;
color: var(--lcm-text, #0f172a);
line-height: 1.2;
}
.lcm-push-banner-sub {
font-size: 12px;
color: var(--lcm-text-muted, #64748b);
line-height: 1.4;
margin-top: 3px;
}
.lcm-push-banner-error {
margin-top: 8px;
font-size: 12px;
color: #a4262c;
background: #fde7e9;
border-left: 3px solid #d13438;
padding: 6px 8px;
border-radius: 4px;
}
.lcm-push-banner-actions {
display: flex;
gap: 8px;
margin-top: 10px;
}
/* ── Wizard ───────────────────────────────────────────────────────── */
.lcm-wizard-progress {
display: flex;
gap: 6px;
padding: 0 16px 8px;
}
.lcm-wizard-progress-bar {
flex: 1;
height: 4px;
border-radius: 2px;
background: var(--lcm-border);
transition: background 200ms;
}
.lcm-wizard-progress-bar.active { background: var(--lcm-primary); }
.lcm-wizard-title {
margin: 0;
font-size: 26px;
color: var(--lcm-text);
line-height: 1.15;
font-family: var(--lcm-display-font);
font-weight: 600;
letter-spacing: -0.01em;
}
.lcm-wizard-sub {
margin: 6px 0 0;
font-size: 13px;
color: var(--lcm-muted);
line-height: 1.5;
}
/* Segmented choice (2-option pill bar) */
.lcm-segchoice {
display: flex;
background: var(--lcm-inset);
border-radius: var(--lcm-radius-md);
padding: 3px;
gap: 2px;
}
.lcm-segchoice-button {
flex: 1;
padding: 9px 10px;
border-radius: var(--lcm-radius-sm);
background: transparent;
color: var(--lcm-muted);
border: none;
font-size: 12px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
}
.lcm-segchoice-button.active {
background: var(--lcm-card);
color: var(--lcm-text);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* Chip-style select (multi-line wrap) */
.lcm-chipselect {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.lcm-chipselect-button {
padding: 8px 12px;
border-radius: var(--lcm-radius-pill);
background: var(--lcm-card);
color: #475569;
border: 1px solid var(--lcm-border);
font-size: 12px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
}
.lcm-chipselect-button.active {
background: var(--lcm-navy);
color: #fff;
border-color: var(--lcm-navy);
}
/* Priority radio cards */
.lcm-priority-card {
text-align: left;
padding: 14px;
border-radius: var(--lcm-radius-lg);
background: var(--lcm-card);
border: 1.5px solid var(--lcm-border);
cursor: pointer;
font-family: inherit;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
}
.lcm-priority-card.active { background: #f1f5f9; border-color: #cbd5e1; }
.lcm-priority-card.active.media { background: #dbeafe; border-color: #93c5fd; }
.lcm-priority-card.active.alta { background: #ffedd5; border-color: #fdba74; }
.lcm-priority-card.active.emergencia { background: #fee2e2; border-color: #fca5a5; }
.lcm-priority-card-radio {
width: 20px; height: 20px; border-radius: 999px;
border: 2px solid var(--lcm-muted-2);
background: var(--lcm-card);
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.lcm-priority-card.active .lcm-priority-card-radio {
border-color: #475569;
background: #475569;
color: #fff;
}
.lcm-priority-card.active.media .lcm-priority-card-radio { background: #1d4ed8; border-color: #1d4ed8; }
.lcm-priority-card.active.alta .lcm-priority-card-radio { background: #c2410c; border-color: #c2410c; }
.lcm-priority-card.active.emergencia .lcm-priority-card-radio { background: #b91c1c; border-color: #b91c1c; }
/* Read-only field display */
.lcm-readonly-field {
padding: 10px 12px;
border-radius: var(--lcm-radius-md);
background: var(--lcm-inset);
font-size: 13px;
font-weight: 600;
color: #475569;
display: flex;
align-items: center;
gap: 8px;
}
/* Native select restyled */
.lcm-select {
width: 100%;
height: 42px;
padding: 0 12px;
border: 1px solid var(--lcm-border);
border-radius: var(--lcm-radius-md);
font-size: 13px;
font-family: inherit;
color: var(--lcm-text);
background: var(--lcm-card);
outline: none;
transition: border-color 120ms;
}
.lcm-select:focus { border-color: var(--lcm-primary); }
/* Criticidad questionnaire */
.lcm-criticidad { display: flex; flex-direction: column; gap: 10px; }
.lcm-criticidad-q { padding: 12px; }
.lcm-criticidad-q-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lcm-criticidad-q-code { font-size: 12px; font-weight: 800; color: var(--lcm-text); }
.lcm-criticidad-q-weight {
font-size: 10px; font-weight: 800; color: var(--lcm-primary);
background: var(--lcm-primary-bg); border-radius: 999px; padding: 2px 8px;
}
.lcm-criticidad-q-text { font-size: 12px; color: var(--lcm-muted); margin: 6px 0 10px; line-height: 1.4; }
.lcm-criticidad-q-hint { font-size: 11px; color: var(--lcm-muted-2); margin-top: 8px; min-height: 28px; line-height: 1.35; }
.lcm-criticidad-score {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px; border-radius: var(--lcm-radius-md);
background: var(--lcm-inset); font-size: 12px; color: var(--lcm-muted);
}
.lcm-criticidad-score strong { font-size: 14px; color: var(--lcm-text); font-variant-numeric: tabular-nums; }
.lcm-scale { display: flex; gap: 6px; }
.lcm-scale-btn {
flex: 1; height: 40px; border-radius: var(--lcm-radius-sm);
border: 1.5px solid var(--lcm-border); background: var(--lcm-card);
color: var(--lcm-text); font-size: 15px; font-weight: 800;
cursor: pointer; font-family: inherit; transition: all 140ms ease;
}
.lcm-scale-btn.active {
background: var(--lcm-primary); color: #fff; border-color: var(--lcm-primary);
}
.lcm-scale-btn:active { transform: scale(0.94); }
/* Fixed-asset picker — cascading Familia / SubFamilia filter row */
.lcm-fapicker-filters {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.lcm-fapicker-filters .lcm-select {
flex: 1;
min-width: 0;
}
/* Photo upload tile (3-up grid) */
.lcm-upload-tile {
aspect-ratio: 1 / 1;
background: var(--lcm-card);
border: 1.5px dashed #cbd5e1;
border-radius: var(--lcm-radius-lg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: var(--lcm-muted);
cursor: pointer;
font-family: inherit;
}
.lcm-upload-tile.filled {
background: repeating-linear-gradient(135deg, #eef2f6 0 10px, #e2e8f0 10px 20px);
border-style: solid;
border-color: var(--lcm-border);
color: var(--lcm-muted);
font-family: var(--lcm-mono-font);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
/* ── Evidence grid (Nueva OT step 3 — N photos) ─────────────────── */
.lcm-evidence-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-top: 4px;
}
.lcm-evidence-counter {
flex-shrink: 0;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.3px;
color: var(--lcm-primary);
background: var(--lcm-primary-bg);
border: 1px solid var(--lcm-primary-border);
padding: 4px 10px;
border-radius: var(--lcm-radius-pill);
font-variant-numeric: tabular-nums;
margin-top: 4px;
}
.lcm-evidence-counter.full {
color: #b45309;
background: #fef3c7;
border-color: #fde68a;
}
.lcm-evidence-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 14px;
}
.lcm-evidence-tile {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--lcm-radius-lg);
overflow: hidden;
background: var(--lcm-card);
border: 1px solid var(--lcm-border);
}
.lcm-evidence-tile.filled {
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.lcm-evidence-tile.filled img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lcm-evidence-num {
position: absolute;
top: 8px;
left: 8px;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: var(--lcm-radius-pill);
background: rgba(15, 23, 42, 0.72);
color: #fff;
font-size: 11px;
font-weight: 800;
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.lcm-evidence-add {
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
background: var(--lcm-primary-bg);
border: 1.5px dashed var(--lcm-primary-border);
color: var(--lcm-primary);
transition: background 0.15s ease, border-color 0.15s ease;
}
.lcm-evidence-add:hover {
background: var(--lcm-primary-bg-2);
border-color: var(--lcm-primary);
}
.lcm-evidence-add.uploading {
cursor: progress;
opacity: 0.75;
}
.lcm-evidence-add-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--lcm-card);
border: 1px solid var(--lcm-primary-border);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--lcm-primary);
margin-bottom: 2px;
}
.lcm-evidence-add-label {
font-size: 12px;
font-weight: 800;
color: var(--lcm-primary-dark);
letter-spacing: 0.1px;
}
.lcm-evidence-add-hint {
font-size: 10px;
font-weight: 700;
color: var(--lcm-muted);
font-variant-numeric: tabular-nums;
}
.lcm-evidence-empty-hint {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
padding: 10px 12px;
background: var(--lcm-card);
border: 1px dashed var(--lcm-border);
border-radius: var(--lcm-radius-lg);
font-size: 12px;
color: var(--lcm-muted);
}
.lcm-evidence-empty-hint > :first-child {
color: var(--lcm-muted-2);
flex-shrink: 0;
}
/* ── Role-switcher buttons (in Perfil) ───────────────────────────── */
.lcm-role-switcher {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.lcm-role-button {
background: var(--lcm-card);
border: 1px solid var(--lcm-border);
border-radius: var(--lcm-radius-lg);
padding: 12px 8px;
cursor: pointer;
font-family: inherit;
color: var(--lcm-text-2);
font-size: 12px;
font-weight: 800;
transition: border-color 120ms, background 120ms;
}
.lcm-role-button.active {
background: var(--lcm-primary);
color: #fff;
border-color: var(--lcm-primary);
}
/* ── Uploading overlay (blocks input + shows a spinner during photo PUTs) ── */
.lcm-uploading-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
z-index: 1300;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
animation: lcm-uploading-fade 0.18s ease-out;
}
@keyframes lcm-uploading-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.lcm-uploading-card {
background: #fff;
border-radius: 16px;
padding: 22px 28px;
min-width: 200px;
max-width: 280px;
text-align: center;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.lcm-uploading-spinner {
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid #e2e8f0;
border-top-color: var(--lcm-primary);
animation: lcm-uploading-spin 0.8s linear infinite;
}
@keyframes lcm-uploading-spin {
to { transform: rotate(360deg); }
}
.lcm-uploading-label {
font-size: 14px;
font-weight: 700;
color: var(--lcm-text);
}
.lcm-uploading-sub {
font-size: 12px;
color: var(--lcm-muted);
line-height: 1.4;
}
/* ── Photo strip skeleton (pre-hydration placeholder tiles) ───────── */
.lcm-photo-skeleton {
width: 92px;
height: 92px;
border-radius: 12px;
border: 1px solid var(--lcm-border);
background: linear-gradient(90deg,
var(--lcm-inset) 0%,
#eef2f7 50%,
var(--lcm-inset) 100%);
background-size: 200% 100%;
animation: lcm-photo-skeleton-shimmer 1.4s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes lcm-photo-skeleton-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ── Locations modal (Perfil → Mis Ubicaciones) ────────────────────── */
.lcm-locations-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
z-index: 1300;
display: flex;
align-items: flex-end;
justify-content: center;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
animation: lcm-uploading-fade 0.18s ease-out;
}
@media (min-width: 600px) {
.lcm-locations-modal-backdrop { align-items: center; }
}
.lcm-locations-modal {
background: #fff;
width: 100%;
max-width: 520px;
max-height: 80vh;
border-radius: 16px 16px 0 0;
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
animation: lcmSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 600px) {
.lcm-locations-modal { border-radius: 16px; max-height: 70vh; }
}
.lcm-locations-modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
border-bottom: 1px solid var(--lcm-border);
}
.lcm-locations-modal-title {
font-size: 16px;
font-weight: 900;
color: var(--lcm-text);
}
.lcm-locations-modal-sub {
font-size: 12px;
color: var(--lcm-muted);
margin-top: 2px;
}
.lcm-locations-modal-close {
background: var(--lcm-inset);
color: var(--lcm-text-2);
border: none;
width: 32px;
height: 32px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}
.lcm-locations-modal-close:active { background: #e2e8f0; }
.lcm-locations-modal-body {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.lcm-locations-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.lcm-locations-table th {
text-align: left;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.4px;
font-weight: 800;
color: var(--lcm-muted-2);
padding: 10px 18px;
background: var(--lcm-page-bg);
position: sticky;
top: 0;
}
.lcm-locations-table td {
padding: 12px 18px;
border-top: 1px solid var(--lcm-border);
color: var(--lcm-text);
}
.lcm-locations-table td.lcm-mono {
color: var(--lcm-text-2);
font-size: 12px;
white-space: nowrap;
}
/* ── Comprobante / Orden de Trabajo printout (Finalizar e Imprimir) ─ */
.lcm-comprobante-scroll {
padding: 12px 12px 96px;
background: var(--lcm-inset);
}
.ot-doc {
background: #fff;
border: 1px solid var(--lcm-border);
border-radius: var(--lcm-radius-md);
overflow: hidden;
color: var(--lcm-text);
font-size: 12px;
}
.ot-header {
background: var(--lcm-navy);
color: #fff;
padding: 16px 18px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 3px solid var(--lcm-red);
}
.ot-header-title { font-size: 17px; font-weight: 900; letter-spacing: 0.5px; }
.ot-header-brand { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #cbd5e1; }
.ot-topline {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 14px 18px 6px;
}
.ot-number { font-size: 24px; font-weight: 900; line-height: 1.1; }
.ot-status { font-size: 16px; font-weight: 800; color: var(--lcm-primary); }
.ot-rule { height: 1px; background: var(--lcm-border); margin: 8px 18px 0; }
.ot-label {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.6px;
color: var(--lcm-blue);
text-transform: uppercase;
}
.ot-section-head {
display: flex;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.4px;
color: var(--lcm-text);
padding: 14px 18px 8px;
}
.ot-tick {
width: 4px; height: 14px;
background: var(--lcm-red);
border-radius: 1px;
display: inline-block;
}
.ot-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
padding: 0 18px;
}
.ot-cell { min-width: 0; }
.ot-cell-value {
font-size: 13px;
font-weight: 800;
color: var(--lcm-text);
margin-top: 2px;
word-break: break-word;
}
.ot-box {
margin: 0 18px;
padding: 12px 14px;
background: var(--lcm-inset);
border-radius: var(--lcm-radius-sm);
font-size: 12px;
line-height: 1.55;
color: var(--lcm-text-2);
}
.ot-total {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 18px 18px 0;
padding: 16px 18px;
border-left: 4px solid var(--lcm-red);
background: var(--lcm-inset);
border-radius: 0 var(--lcm-radius-sm) var(--lcm-radius-sm) 0;
}
.ot-total-label { font-size: 11px; font-weight: 900; letter-spacing: 0.4px; }
.ot-total-value { font-size: 26px; font-weight: 900; color: var(--lcm-text); }
/* Monto factura row — secondary emphasis under the quoted total (S000047) */
.ot-total-factura {
margin-top: 8px;
border-left-color: var(--lcm-navy);
}
.ot-total-factura .ot-total-value { font-size: 20px; }
/* "Válido para emisión de pago" strip under the header (S000047) */
.ot-payment-banner {
padding: 8px 18px;
background: var(--lcm-inset);
border-bottom: 1px solid var(--lcm-border);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--lcm-text);
text-align: center;
}
/* Desglose de cotización + flujo de aprobación tables (S000047) */
.ot-lines {
width: calc(100% - 36px);
margin: 0 18px;
border-collapse: collapse;
font-size: 11px;
color: var(--lcm-text-2);
}
.ot-lines th {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.6px;
color: var(--lcm-blue);
text-transform: uppercase;
text-align: left;
padding: 6px 8px;
border-bottom: 1px solid var(--lcm-border);
}
.ot-lines td {
padding: 6px 8px;
border-bottom: 1px solid var(--lcm-border);
vertical-align: top;
word-break: break-word;
}
.ot-lines tfoot td {
font-weight: 900;
color: var(--lcm-text);
border-bottom: none;
border-top: 2px solid var(--lcm-text);
}
.ot-num { text-align: right; white-space: nowrap; }
.ot-signatures {
display: flex;
gap: 28px;
padding: 40px 18px 18px;
}
.ot-sign { flex: 1; }
.ot-sign-role { font-size: 12px; font-weight: 800; margin-bottom: 36px; }
.ot-sign-line { border-top: 1px solid var(--lcm-text); }
.ot-sign-cap {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.5px;
color: var(--lcm-muted);
text-align: center;
margin-top: 6px;
}
/* Firmas táctiles (S000084/S000085): la imagen PNG transparente se apoya
sobre la línea; sin firma capturada queda el espacio en blanco clásico. */
.ot-signature { flex: 1; }
.ot-signature-img {
display: block;
width: 100%;
height: 64px;
object-fit: contain;
margin-bottom: -2px;
}
.ot-signature-space { height: 64px; }
.ot-signature-line { border-top: 1px solid var(--lcm-text); }
.ot-signature-label {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.5px;
color: var(--lcm-muted);
text-align: center;
margin-top: 6px;
}
.ot-footer {
border-top: 1px solid var(--lcm-border);
padding: 10px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 10px;
font-weight: 700;
color: var(--lcm-muted-2);
}
.ot-footer-center { text-align: center; flex: 1; color: var(--lcm-muted); }
.ot-footer-side { flex: 0 0 auto; }
.ot-footer-right { text-align: right; }
/* On a narrow phone the 3-part footer would crowd — show only the center
brand line on screen; the side stamps are for the printed page. */
@media (max-width: 560px) {
.ot-footer-side { display: none; }
}
/* Print: drop the app chrome and render the document as a clean A4/Letter
page. The on-screen layout adapts to a phone (2-col grid, tight gutters);
for print we FORCE the full desktop layout — fixed-width margins, 4-column
grid, exact colors — so the printout is identical regardless of the device
it was triggered from. Only #ot-doc survives. */
@page {
size: A4;
margin: 14mm 12mm;
}
@media print {
/* Preserve the navy header band, red accents and grey boxes — browsers
strip backgrounds on print by default without this. */
html, body {
background: #fff !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
body * { visibility: hidden !important; }
#ot-doc, #ot-doc * { visibility: visible !important; }
/* CRITICAL: the app wraps every page in `.lcm-mobile-shell` which is
`max-width: 480px; margin: 0 auto` (a phone-width frame). On paper that
capped the comprobante at 480px and centered it — the narrow column with
big side margins. Neutralize the shell and every ancestor's width caps
in print so the document can fill the full printable page width. */
.lcm-mobile-shell,
.lcm-comprobante-scroll,
.lcm-body,
#app, .lcm-app, .lcm-page {
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
/* The on-screen app frame caps heights and scrolls internally —
on paper everything must expand and flow across pages. */
height: auto !important;
overflow: visible !important;
background: #fff !important;
}
/* Pin the document to the full printable page width (inside @page margins),
independent of the mobile viewport. */
#ot-doc {
position: static !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
font-size: 10.5pt;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
#ot-doc * {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.lcm-comprobante-bar,
.lcm-comprobante-actions { display: none !important; }
.lcm-comprobante-scroll { padding: 0 !important; background: #fff !important; }
/* Header band keeps its fill on paper. */
#ot-doc .ot-header {
background: var(--lcm-navy) !important;
color: #fff !important;
border-bottom: 3px solid var(--lcm-red) !important;
padding: 18px 24px !important;
}
#ot-doc .ot-header-brand { color: #cbd5e1 !important; }
/* Force the wide 4-column grid (screen uses 2) and roomier page gutters. */
#ot-doc .ot-grid {
grid-template-columns: repeat(4, 1fr) !important;
gap: 14px 20px !important;
padding: 0 24px !important;
}
#ot-doc .ot-topline,
#ot-doc .ot-section-head,
#ot-doc .ot-box,
#ot-doc .ot-total,
#ot-doc .ot-signatures,
#ot-doc .ot-payment-banner,
#ot-doc .ot-footer { padding-left: 24px !important; padding-right: 24px !important; }
#ot-doc .ot-rule,
#ot-doc .ot-box,
#ot-doc .ot-total { margin-left: 24px !important; margin-right: 24px !important; }
#ot-doc .ot-lines {
width: calc(100% - 48px) !important;
margin-left: 24px !important;
margin-right: 24px !important;
font-size: 9.5pt !important;
}
#ot-doc .ot-lines { break-inside: avoid; page-break-inside: avoid; }
#ot-doc .ot-payment-banner {
background: #f8fafc !important;
font-size: 9.5pt !important;
}
/* Keep the header on one line — no wrapping like the cramped mobile print. */
#ot-doc .ot-header-title { white-space: nowrap !important; }
/* Don't split a section across a page break. */
#ot-doc .ot-section-head,
#ot-doc .ot-total,
#ot-doc .ot-signatures { break-inside: avoid; page-break-inside: avoid; }
#ot-doc .ot-section-head { break-after: avoid; page-break-after: avoid; }
/* ── Polish to match the BC desktop comprobante ────────────────────── */
/* Tighter section headers — BC sits them snug above their grids. */
#ot-doc .ot-section-head {
font-size: 9.5pt !important;
letter-spacing: 0.3px !important;
padding-top: 13px !important;
padding-bottom: 5px !important;
color: #0f172a !important;
}
#ot-doc .ot-tick { height: 12px !important; }
/* Denser grid + a subtle separator under each row so the rhythm reads
like BC's ruled rows rather than a loose 2-line stack. */
#ot-doc .ot-grid {
gap: 0 20px !important;
row-gap: 0 !important;
}
#ot-doc .ot-cell {
padding: 7px 0 8px !important;
border-bottom: 1px solid #eef2f6 !important;
}
#ot-doc .ot-label {
font-size: 7.5pt !important;
letter-spacing: 0.5px !important;
color: #64748b !important; /* BC uses muted-grey labels, not blue */
font-weight: 700 !important;
}
#ot-doc .ot-cell-value {
font-size: 10pt !important;
font-weight: 700 !important;
margin-top: 1px !important;
line-height: 1.2 !important;
}
/* Top number/status line: slightly smaller, tighter rule under it. */
#ot-doc .ot-topline { padding-top: 12px !important; padding-bottom: 2px !important; }
#ot-doc .ot-number { font-size: 20pt !important; }
#ot-doc .ot-status { font-size: 14pt !important; }
#ot-doc .ot-rule { margin-top: 6px !important; background: #e2e8f0 !important; }
/* Lighter content boxes — less padding, softer fill, like BC. */
#ot-doc .ot-box {
padding: 10px 14px !important;
background: #f8fafc !important;
font-size: 9.5pt !important;
line-height: 1.5 !important;
color: #334155 !important;
}
/* Total row: tighter, BC-weight. */
#ot-doc .ot-total { padding: 14px 18px !important; background: #f8fafc !important; }
#ot-doc .ot-total-value { font-size: 20pt !important; }
/* Signatures: pull up a touch so they don't float to the page bottom. */
#ot-doc .ot-signatures { padding-top: 34px !important; padding-bottom: 14px !important; }
/* In-document footer (print date · brand · page) shows on paper. */
#ot-doc .ot-footer { display: flex !important; font-size: 8pt !important; }
#ot-doc .ot-footer-side { display: inline !important; }
}
/* ════════════════════════════════════════════════════════════════════
* Motion & polish layer
* Appended last on purpose: same-specificity rules here win the cascade,
* upgrading the older flat transitions without touching every component.
* All entrance animations use `backwards` fill so delayed items stay
* invisible until their turn.
* ════════════════════════════════════════════════════════════════════ */
/* ── List-item entrance with stagger ──────────────────────────────────
Plays when the DOM nodes are created (page navigation, list hydration,
newly appended infinite-scroll rows). Re-renders that reuse nodes don't
replay it. Delays cap at the 8th sibling — below the fold anyway. */
@keyframes lcmItemIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.lcm-wo-card,
.lcm-wo-row-compact,
.lcm-listrow,
.lcm-store-row,
.lcm-kpi-tile,
.lcm-quote-row {
animation: lcmItemIn 360ms var(--lcm-ease-out) backwards;
}
.lcm-wo-card:nth-child(2), .lcm-wo-row-compact:nth-child(2), .lcm-listrow:nth-child(2), .lcm-store-row:nth-child(2), .lcm-kpi-tile:nth-child(2), .lcm-quote-row:nth-child(2) { animation-delay: 40ms; }
.lcm-wo-card:nth-child(3), .lcm-wo-row-compact:nth-child(3), .lcm-listrow:nth-child(3), .lcm-store-row:nth-child(3), .lcm-kpi-tile:nth-child(3), .lcm-quote-row:nth-child(3) { animation-delay: 80ms; }
.lcm-wo-card:nth-child(4), .lcm-wo-row-compact:nth-child(4), .lcm-listrow:nth-child(4), .lcm-store-row:nth-child(4), .lcm-kpi-tile:nth-child(4), .lcm-quote-row:nth-child(4) { animation-delay: 120ms; }
.lcm-wo-card:nth-child(5), .lcm-wo-row-compact:nth-child(5), .lcm-listrow:nth-child(5), .lcm-store-row:nth-child(5), .lcm-kpi-tile:nth-child(5), .lcm-quote-row:nth-child(5) { animation-delay: 160ms; }
.lcm-wo-card:nth-child(6), .lcm-wo-row-compact:nth-child(6), .lcm-listrow:nth-child(6), .lcm-store-row:nth-child(6), .lcm-kpi-tile:nth-child(6), .lcm-quote-row:nth-child(6) { animation-delay: 200ms; }
.lcm-wo-card:nth-child(7), .lcm-wo-row-compact:nth-child(7), .lcm-listrow:nth-child(7), .lcm-store-row:nth-child(7), .lcm-kpi-tile:nth-child(7), .lcm-quote-row:nth-child(7) { animation-delay: 240ms; }
.lcm-wo-card:nth-child(8), .lcm-wo-row-compact:nth-child(8), .lcm-listrow:nth-child(8), .lcm-store-row:nth-child(8), .lcm-kpi-tile:nth-child(8), .lcm-quote-row:nth-child(8) { animation-delay: 280ms; }
/* ── Tactile press + hover elevation on every tappable surface ──────── */
.lcm-card.interactive,
.lcm-wo-card,
.lcm-wo-row-compact,
.lcm-listrow,
.lcm-store-row,
.lcm-kpi-tile,
.lcm-quote-row,
.lcm-signin-demo-row,
.lcm-priority-card,
.lcm-chipselect-button,
.lcm-role-button {
transition: border-color 180ms ease, box-shadow 250ms ease, transform 180ms var(--lcm-ease-out), background-color 180ms ease;
}
.lcm-wo-card:hover,
.lcm-wo-row-compact:hover,
.lcm-listrow:hover,
.lcm-store-row:hover,
.lcm-kpi-tile:hover,
.lcm-card.interactive:hover {
border-color: var(--lcm-muted-2);
box-shadow: var(--lcm-shadow-md);
}
.lcm-card.interactive:active,
.lcm-wo-card:active,
.lcm-wo-row-compact:active,
.lcm-listrow:active,
.lcm-store-row:active,
.lcm-kpi-tile:active,
.lcm-quote-row:active,
.lcm-signin-demo-row:active,
.lcm-priority-card:active,
.lcm-chipselect-button:active,
.lcm-role-button:active {
transform: scale(0.975);
}
.lcm-hero-card {
transition: transform 180ms var(--lcm-ease-out), box-shadow 250ms ease;
}
.lcm-hero-card:active { transform: scale(0.98); }
/* ── Buttons — deeper press, smoother color, visible focus ──────────── */
.lcm-btn {
transition: transform 150ms var(--lcm-ease-out), filter 150ms ease, background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.lcm-btn:active:not(:disabled) { transform: scale(0.96); }
.lcm-btn-primary { box-shadow: 0 2px 8px rgba(63, 93, 74, 0.28); }
.lcm-btn-primary:active:not(:disabled) { box-shadow: 0 1px 3px rgba(63, 93, 74, 0.25); }
.lcm-btn-dark { box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25); }
.lcm-btn:focus-visible,
.lcm-input:focus-visible,
.lcm-select:focus-visible {
outline: 2px solid var(--lcm-primary);
outline-offset: 2px;
}
/* ── Inputs — soft focus ring instead of a bare border flip ─────────── */
.lcm-input,
.lcm-textarea,
.lcm-select,
.lcm-search-input {
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.lcm-input:focus,
.lcm-textarea:focus,
.lcm-select:focus,
.lcm-search-input:focus {
border-color: var(--lcm-primary);
box-shadow: 0 0 0 3px rgba(63, 93, 74, 0.13);
}
/* ── Bottom tabs — springy icon, soft press ─────────────────────────── */
.lcm-tab svg { transition: transform 280ms var(--lcm-ease-spring); }
.lcm-tab.active svg { transform: translateY(-1px) scale(1.12); }
.lcm-tab:active svg { transform: scale(0.88); }
/* ── Segmented controls — the active pill fades in instead of popping ─ */
.lcm-tab-pill,
.lcm-segchoice-button {
transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.lcm-tab-pill:active,
.lcm-segchoice-button:active { transform: scale(0.97); }
/* ── Popovers — scale in from their anchor ──────────────────────────── */
@keyframes lcmPopIn {
from { opacity: 0; transform: scale(0.92) translateY(-4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.lcm-overflow-menu {
animation: lcmPopIn 200ms var(--lcm-ease-out);
transform-origin: top right;
}
.lcm-bell-panel {
animation: lcmPopIn 240ms var(--lcm-ease-out);
transform-origin: top center;
}
@keyframes lcmScrimIn { from { opacity: 0; } to { opacity: 1; } }
.lcm-bell-scrim { animation: lcmScrimIn 200ms ease-out; }
/* ── FAB — pops in after the page settles, squishes on press ────────── */
@keyframes lcmFabIn {
from { opacity: 0; transform: scale(0.5); }
to { opacity: 1; transform: scale(1); }
}
.lcm-fab {
animation: lcmFabIn 380ms var(--lcm-ease-spring) 200ms backwards;
transition: transform 180ms var(--lcm-ease-spring), box-shadow 200ms ease, background-color 200ms ease;
}
.lcm-fab:active { transform: scale(0.92); }
/* ── Live status — "En proceso" dot breathes ────────────────────────── */
@keyframes lcmDotPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35); }
60% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0); }
}
.lcm-status-en-proceso .lcm-chip-dot { animation: lcmDotPulse 2.4s ease-in-out infinite; }
/* ── Notification badge pops when it appears ────────────────────────── */
@keyframes lcmBadgeIn {
from { transform: scale(0); }
to { transform: scale(1); }
}
.lcm-bell-badge { animation: lcmBadgeIn 320ms var(--lcm-ease-spring) backwards; }
/* ── Sign-in choreography — brand settles, card rises to meet it ────── */
@keyframes lcmSignInCard {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
.lcm-signin-brand { animation: lcmFadeIn 420ms var(--lcm-ease-out) backwards; }
.lcm-signin-card { animation: lcmSignInCard 460ms var(--lcm-ease-out) 90ms backwards; }
/* ── Empty states — icon pops gently ────────────────────────────────── */
.lcm-empty-icon { animation: lcmFabIn 400ms var(--lcm-ease-spring) 120ms backwards; }
/* ── Pull-to-refresh indicator ──────────────────────────────────────── */
/* Floating disc that rides the pull gesture (js/pull-to-refresh.js moves
it via inline transform; the resting -52px offset hides it above the
shell). The ring winds up with the pull, then spins while refreshing. */
.lcm-ptr {
position: absolute;
top: calc(env(safe-area-inset-top, 0px) + 6px);
left: 50%;
transform: translateX(-50%) translateY(-52px);
width: 42px;
height: 42px;
background: var(--lcm-card);
border-radius: var(--lcm-radius-pill);
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.04);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
z-index: 70;
pointer-events: none;
}
.lcm-ptr-disc {
width: 22px;
height: 22px;
border-radius: var(--lcm-radius-pill);
border: 2.5px solid var(--lcm-primary-bg-2);
border-top-color: var(--lcm-primary);
}
.lcm-ptr.is-refreshing .lcm-ptr-disc { animation: lcmPtrSpin 0.8s linear infinite; }
@keyframes lcmPtrSpin { to { transform: rotate(360deg); } }
/* Our gesture replaces the browser's native pull-to-refresh. */
.lcm-body { overscroll-behavior-y: contain; }
/* ── Scroll-aware headers ───────────────────────────────────────────── */
/* index.html toggles .is-scrolled on .lcm-body (with hysteresis); the big
page title shrinks into a compact frosted bar that stays pinned. */
.lcm-header {
position: sticky;
top: 0;
z-index: 30;
transition: padding 280ms var(--lcm-ease-out), box-shadow 280ms ease, background-color 280ms ease;
}
.lcm-header-title {
transition: font-size 280ms var(--lcm-ease-out);
}
.lcm-header-subtitle {
max-height: 20px;
overflow: hidden;
transition: opacity 200ms ease, max-height 280ms var(--lcm-ease-out), margin-top 280ms var(--lcm-ease-out);
}
.lcm-body.is-scrolled .lcm-header {
padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
padding-bottom: 10px;
background: rgba(248, 250, 252, 0.88);
backdrop-filter: blur(14px) saturate(1.5);
-webkit-backdrop-filter: blur(14px) saturate(1.5);
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.07);
}
.lcm-body.is-scrolled .lcm-header-title { font-size: 19px; }
.lcm-body.is-scrolled .lcm-header-subtitle {
opacity: 0;
max-height: 0;
margin-top: 0;
}
/* ── Reduced motion — collapse all of the above to instant ──────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
/* Spinners must keep turning or loading states look frozen. */
.lcm-uploading-spinner {
animation-duration: 0.8s !important;
animation-iteration-count: infinite !important;
}
}