/* ========================================================= WhatsApp CRM Multiagente — styles.css Tokens (claro/oscuro) · componentes · layout Tema: automático por prefers-color-scheme; forzar con . Sin dependencias. ========================================================= */ /* ---------- 1. Tokens: claro ---------- */ :root, [data-theme="light"] { color-scheme: light; --bg: #F3F5F4; --surface: #FFFFFF; --surface-2: #F7F9F8; --surface-3: #EDF1EF; --border: #E0E6E3; --border-strong: #C9D3CE; --text: #111B17; --text-2: #45544E; --text-3: #66756F; --link: #0B7A45; --brand: #25D366; --brand-600: #0F9D58; --brand-700: #0B7A45; --on-brand: #04281A; --brand-soft: #E0F6E9; --side-bg: #0D1A15; --side-bg-2: #13241D; --side-text: #C8D6CF; --side-text-2: #8CA298; --side-active: rgba(37,211,102,.14); --blue-fg: #1C5CCB; --blue-bg: #E5EDFD; --violet-fg: #6A3CD4; --violet-bg: #EEE8FC; --amber-fg: #8F5400; --amber-bg: #FCEFD7; --red-fg: #C22530; --red-bg: #FDE7E7; --green-fg: #0B7A45; --green-bg: #DFF5E8; --gray-fg: #53605A; --gray-bg: #ECEFED; --danger: #D92D37; --on-danger: #FFFFFF; --chat-bg: #ECE7DF; --bub-in: #FFFFFF; --bub-agent: #D9FDD3; --bub-ai: #E3EBFF; --bub-ai-edge: #B9CBF7; --bub-sys: #FFFFFF; --note-bg: #FFF7DD; --note-border: #E8CF84; --tick-read: #1C8CE3; --focus: #1C8CE3; --overlay: rgba(10,18,15,.48); --shadow-1: 0 1px 2px rgba(16,24,20,.06), 0 1px 1px rgba(16,24,20,.04); --shadow-2: 0 4px 14px rgba(16,24,20,.08), 0 1px 3px rgba(16,24,20,.06); --shadow-3: 0 18px 48px rgba(16,24,20,.18), 0 4px 12px rgba(16,24,20,.08); } /* ---------- 1b. Tokens: oscuro ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]), [data-theme="auto"] { color-scheme: dark; --bg: #0A1210; --surface: #111A17; --surface-2: #16211D; --surface-3: #1C2925; --border: #25332E; --border-strong: #34463F; --text: #E6EEEA; --text-2: #A8B7B0; --text-3: #85958E; --link: #5FE39A; --brand-soft: #123826; --on-brand: #04281A; --side-bg: #070D0B; --side-bg-2: #0F1B16; --side-text: #C8D6CF; --side-text-2: #859A91; --blue-fg: #8DB4FF; --blue-bg: #19294A; --violet-fg: #C1A8FF; --violet-bg: #2A2147; --amber-fg: #F3C067; --amber-bg: #392A0F; --red-fg: #FF8C8C; --red-bg: #431C1F; --green-fg: #6EE7A0; --green-bg: #113725; --gray-fg: #AEBBB5; --gray-bg: #22302A; --danger: #E5484D; --chat-bg: #0B141A; --bub-in: #1F2C33; --bub-agent: #144D37; --bub-ai: #1D2F4F; --bub-ai-edge: #2E4A7C; --bub-sys: #182229; --note-bg: #2E2712; --note-border: #6B5A22; --tick-read: #53BDEB; --focus: #53BDEB; --overlay: rgba(0,0,0,.6); --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 6px 18px rgba(0,0,0,.45); --shadow-3: 0 20px 50px rgba(0,0,0,.6); } } [data-theme="dark"] { color-scheme: dark; --bg: #0A1210; --surface: #111A17; --surface-2: #16211D; --surface-3: #1C2925; --border: #25332E; --border-strong: #34463F; --text: #E6EEEA; --text-2: #A8B7B0; --text-3: #85958E; --link: #5FE39A; --brand-soft: #123826; --on-brand: #04281A; --side-bg: #070D0B; --side-bg-2: #0F1B16; --side-text: #C8D6CF; --side-text-2: #859A91; --blue-fg: #8DB4FF; --blue-bg: #19294A; --violet-fg: #C1A8FF; --violet-bg: #2A2147; --amber-fg: #F3C067; --amber-bg: #392A0F; --red-fg: #FF8C8C; --red-bg: #431C1F; --green-fg: #6EE7A0; --green-bg: #113725; --gray-fg: #AEBBB5; --gray-bg: #22302A; --danger: #E5484D; --chat-bg: #0B141A; --bub-in: #1F2C33; --bub-agent: #144D37; --bub-ai: #1D2F4F; --bub-ai-edge: #2E4A7C; --bub-sys: #182229; --note-bg: #2E2712; --note-border: #6B5A22; --tick-read: #53BDEB; --focus: #53BDEB; --overlay: rgba(0,0,0,.6); --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 6px 18px rgba(0,0,0,.45); --shadow-3: 0 20px 50px rgba(0,0,0,.6); } /* ---------- 1c. Escalas (no cambian con el tema) ---------- */ :root { --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13.5px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --lh: 1.45; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; --side-w: 232px; --list-w: 340px; --panel-w: 320px; --ctl-h: 34px; --ctl-h-sm: 28px; --t-fast: 120ms ease; --t: 180ms cubic-bezier(.2,.7,.2,1); } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { font: var(--fs-base)/var(--lh) var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); } h1, h2, h3, h4, p { margin: 0; } .num { font-variant-numeric: tabular-nums; } .muted { color: var(--text-3); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ic-sm { width: 14px; height: 14px; } .ic-lg { width: 20px; height: 20px; } .row { display: flex; align-items: center; gap: var(--s-2); } .stack { display: flex; flex-direction: column; gap: var(--s-3); } .grow { flex: 1; min-width: 0; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- 3. Botones ---------- */ .btn { --_bg: var(--surface); --_fg: var(--text); --_bd: var(--border-strong); display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ctl-h); padding: 0 var(--s-3); border-radius: var(--r); background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd); font-weight: 560; font-size: var(--fs-base); white-space: nowrap; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); } .btn:hover { background: var(--surface-3); } .btn:active { transform: translateY(.5px); } .btn-primary { --_bg: var(--brand); --_fg: var(--on-brand); --_bd: transparent; } .btn-primary:hover { background: #1FC45D; } .btn-secondary { --_bg: var(--surface); } .btn-danger { --_bg: var(--danger); --_fg: var(--on-danger); --_bd: transparent; } .btn-danger:hover { background: #BF222B; } .btn-danger-ghost { --_bg: transparent; --_fg: var(--red-fg); --_bd: transparent; } .btn-danger-ghost:hover { background: var(--red-bg); } .btn-ghost { --_bg: transparent; --_bd: transparent; --_fg: var(--text-2); } .btn-ghost:hover { background: var(--surface-3); color: var(--text); } .btn-sm { height: var(--ctl-h-sm); padding: 0 10px; font-size: var(--fs-sm); border-radius: var(--r-sm); } .btn-icon { width: var(--ctl-h); padding: 0; } .btn-icon.btn-sm { width: var(--ctl-h-sm); } .btn-block { width: 100%; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; } .btn.is-loading { color: transparent !important; position: relative; pointer-events: none; } .btn.is-loading::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--_fg); border-right-color: transparent; animation: spin .7s linear infinite; } .btn-group { display: inline-flex; gap: var(--s-2); flex-wrap: wrap; } /* ---------- 4. Formularios ---------- */ .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); } .label .req { color: var(--red-fg); margin-left: 2px; } .hint { font-size: var(--fs-xs); color: var(--text-3); } .field-error { font-size: var(--fs-xs); color: var(--red-fg); display: flex; gap: 4px; align-items: center; } .input, .select, .textarea { width: 100%; height: var(--ctl-h); padding: 0 10px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .textarea { height: auto; min-height: 84px; padding: 8px 10px; resize: vertical; line-height: 1.5; } .textarea.mono { font-family: var(--mono); font-size: 12.5px; } .input::placeholder, .textarea::placeholder { color: var(--text-3); } .input:hover, .select:hover, .textarea:hover { border-color: var(--text-3); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 22%, transparent); } .input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--red-fg); } .input[disabled], .select[disabled], .textarea[disabled] { background: var(--surface-3); color: var(--text-3); cursor: not-allowed; } .input-sm, .select-sm { height: var(--ctl-h-sm); font-size: var(--fs-sm); border-radius: var(--r-sm); } .select { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .input-group { position: relative; display: flex; align-items: center; } .input-group > .ic { position: absolute; left: 10px; color: var(--text-3); pointer-events: none; } .input-group > .input { padding-left: 32px; } .secret { display: flex; align-items: center; gap: var(--s-2); height: var(--ctl-h); padding: 0 10px; border: 1px dashed var(--border-strong); border-radius: var(--r); background: var(--surface-2); font-family: var(--mono); font-size: 12.5px; } .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3) var(--s-4); } .form-grid .span-all { grid-column: 1 / -1; } .form-section { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--s-6); padding: var(--s-5) 0; border-top: 1px solid var(--border); } .form-section:first-child { border-top: 0; padding-top: 0; } .form-section-title { font-weight: 650; font-size: var(--fs-md); } .form-section-desc { color: var(--text-3); font-size: var(--fs-sm); margin-top: 4px; } .check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-base); } .check input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-600); } .checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px var(--s-4); } .checklist .check { font-family: var(--mono); font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); } .range { width: 100%; accent-color: var(--brand-600); } .range-row { display: flex; align-items: center; gap: var(--s-3); } .range-val { min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } /* ---------- 5. Pills, badges, avatar ---------- */ .pill { --_fg: var(--gray-fg); --_bg: var(--gray-bg); display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--r-pill); background: var(--_bg); color: var(--_fg); font-size: var(--fs-xs); font-weight: 600; line-height: 1; white-space: nowrap; } .pill .ic { width: 12px; height: 12px; } .pill-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-2); } .pill-blue { --_fg: var(--blue-fg); --_bg: var(--blue-bg); } .pill-violet { --_fg: var(--violet-fg); --_bg: var(--violet-bg); } .pill-amber { --_fg: var(--amber-fg); --_bg: var(--amber-bg); } .pill-red { --_fg: var(--red-fg); --_bg: var(--red-bg); } .pill-green { --_fg: var(--green-fg); --_bg: var(--green-bg); } .pill-gray { --_fg: var(--gray-fg); --_bg: var(--gray-bg); } .pill-lg { height: 24px; padding: 0 9px; font-size: var(--fs-sm); } .badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .badge-brand { background: var(--brand); color: var(--on-brand); } .tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 4px 0 8px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 560; color: var(--text); background: color-mix(in oklab, var(--tag, #888) 16%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tag, #888) 45%, transparent); } .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tag, #888); } .tag button { display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; } .tag button:hover { background: var(--surface-3); color: var(--text); } .avatar { --_c: #5B7A6D; display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: color-mix(in oklab, var(--_c) 22%, var(--surface)); color: color-mix(in oklab, var(--_c) 70%, var(--text)); font-weight: 650; font-size: 13px; letter-spacing: .02em; position: relative; } .avatar-sm { width: 28px; height: 28px; font-size: 11px; } .avatar-lg { width: 48px; height: 48px; font-size: 16px; } .avatar-c1 { --_c: #1FA855; } .avatar-c2 { --_c: #2F6FE0; } .avatar-c3 { --_c: #8A4FE0; } .avatar-c4 { --_c: #D9861A; } .avatar-c5 { --_c: #D6455A; } .avatar-c6 { --_c: #148F95; } .avatar-ai { --_c: #3B6FE3; } .status-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--gray-fg); } .status-dot.on { background: var(--brand); } .status-dot.away { background: #F0B429; } .status-dot.off { background: #8C9A94; } .avatar .status-dot { position: absolute; right: -1px; bottom: -1px; box-shadow: 0 0 0 2px var(--surface); } /* ---------- 6. Tarjeta, tabla, tabs, seg ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .card-body { padding: var(--s-4); } .card-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); } .card-title { font-weight: 650; font-size: var(--fs-base); } .card-foot { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border); flex-wrap: wrap; } .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .table th { text-align: left; font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); padding: 9px var(--s-3); border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; position: sticky; top: 0; } .table td { padding: 10px var(--s-3); border-bottom: 1px solid var(--border); vertical-align: middle; } .table tbody tr:hover { background: var(--surface-2); } .table tbody tr.is-clickable { cursor: pointer; } .table .ta-r { text-align: right; font-variant-numeric: tabular-nums; } .table .cell-sub { font-size: var(--fs-sm); color: var(--text-3); } .pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); color: var(--text-3); font-size: var(--fs-sm); } .tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--border); overflow-x: auto; } .tab { height: 38px; padding: 0 var(--s-3); border: 0; background: none; color: var(--text-2); font-weight: 560; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .tab:hover { color: var(--text); } .tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--brand-600); } .seg { display: flex; gap: 6px; flex-wrap: wrap; } .seg-item { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); font-weight: 560; cursor: pointer; } .seg-item:hover { color: var(--text); border-color: var(--text-3); } .seg-item[aria-pressed="true"] { background: var(--text); color: var(--surface); border-color: var(--text); } .seg-item .count { font-variant-numeric: tabular-nums; opacity: .7; } .seg-item[aria-pressed="true"] .badge { box-shadow: 0 0 0 1.5px var(--text); } .segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r); background: var(--surface-3); } .segmented button { height: 28px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-weight: 560; cursor: pointer; } .segmented button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); } /* ---------- 7. Modal, toast, estados ---------- */ .modal-backdrop { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--s-4); background: var(--overlay); animation: fade .15s ease; } .modal { width: min(480px, 100%); max-height: calc(100% - 32px); display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-3); animation: pop .18s cubic-bezier(.2,.7,.2,1); } .modal-wide { width: min(880px, 100%); } .modal-head { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); } .modal-title { font-size: var(--fs-lg); font-weight: 680; } .modal-sub { color: var(--text-3); font-size: var(--fs-sm); margin-top: 2px; } .modal-body { padding: var(--s-5); overflow: auto; } .modal-foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-xl) var(--r-xl); flex-wrap: wrap; } .toasts { position: absolute; right: var(--s-4); bottom: var(--s-4); z-index: 60; display: flex; flex-direction: column; gap: var(--s-2); pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: center; gap: var(--s-2); min-width: 260px; max-width: 380px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--text); color: var(--surface); box-shadow: var(--shadow-3); font-weight: 520; animation: slide-up .22s cubic-bezier(.2,.7,.2,1); } .toast .ic { color: var(--brand); } .toast-error .ic { color: #FF8C8C; } .empty { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-10) var(--s-4); text-align: center; color: var(--text-3); } .empty-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); } .empty-title { color: var(--text); font-weight: 650; font-size: var(--fs-md); } .alert { display: flex; gap: var(--s-2); align-items: flex-start; padding: 10px 12px; border-radius: var(--r); font-size: var(--fs-sm); } .alert-error { background: var(--red-bg); color: var(--red-fg); } .alert-info { background: var(--blue-bg); color: var(--blue-fg); } .alert-success { background: var(--green-bg); color: var(--green-fg); } .alert-warn { background: var(--amber-bg); color: var(--amber-fg); } .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--brand-600); animation: spin .7s linear infinite; } .skeleton { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-3) 0, var(--surface-2) 50%, var(--surface-3) 100%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes fade { from { opacity: 0; } } @keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.98); } } @keyframes slide-up { from { opacity: 0; transform: translateY(8px); } } @keyframes shimmer { to { background-position: -200% 0; } } @keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } } @keyframes flash { from { background: var(--brand-soft); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ---------- 8. App shell ---------- */ .app { container: app / inline-size; position: relative; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); height: 100vh; overflow: hidden; background: var(--bg); color: var(--text); font: var(--fs-base)/var(--lh) var(--font); } .side { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); background: var(--side-bg); color: var(--side-text); min-height: 0; overflow-y: auto; overflow-x: hidden; } .side-logo { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; color: #fff; font-weight: 700; font-size: 15px; letter-spacing: -.01em; } .side-logo-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--brand); color: var(--on-brand); } .side-logo small { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--side-text-2); letter-spacing: 0; } .side-group { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--side-text-2); padding: 12px 10px 4px; } .side-nav { display: flex; flex-direction: column; gap: 2px; } .side-item { position: relative; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border: 0; border-radius: var(--r); background: transparent; color: var(--side-text); font-weight: 520; cursor: pointer; text-align: left; width: 100%; } .side-item:hover { background: var(--side-bg-2); color: #fff; } .side-item[aria-current="page"] { background: var(--side-active); color: #fff; } .side-item[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); } .side-item .badge { margin-left: auto; } .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,.08); } .side-me { display: flex; align-items: center; gap: 10px; padding: 6px 4px; } .side-me .avatar { box-shadow: none; } .side-me .avatar .status-dot { box-shadow: 0 0 0 2px var(--side-bg); } .side-me-name { color: #fff; font-weight: 600; font-size: var(--fs-sm); } .side-me-role { color: var(--side-text-2); font-size: var(--fs-xs); } .side-status { display: flex; gap: 2px; padding: 3px; border-radius: var(--r); background: var(--side-bg-2); } .side-status button { flex: 1; min-width: 0; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 26px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--side-text-2); font-size: 10.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .side-status button[aria-pressed="true"] { background: rgba(255,255,255,.1); color: #fff; } .side-status .status-dot { width: 7px; height: 7px; } .side .btn-ghost { --_fg: var(--side-text-2); } .side .btn-ghost:hover { background: var(--side-bg-2); color: #fff; } .main { min-width: 0; min-height: 0; overflow-y: auto; } .page { padding: var(--s-6); max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-5); } .page-head { display: flex; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; } .page-title { font-size: var(--fs-xl); font-weight: 720; letter-spacing: -.015em; } .page-sub { color: var(--text-3); margin-top: 2px; } .page-head .btn-group { margin-left: auto; } .toolbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .toolbar .input-group { width: min(320px, 100%); } /* ---------- 9. Dashboard ---------- */ .kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s-3); } .kpi { padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: 4px; } .kpi-label { font-size: var(--fs-sm); color: var(--text-3); display: flex; align-items: center; gap: 6px; } .kpi-value { font-size: 26px; font-weight: 720; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; } .kpi-value small { font-size: 14px; font-weight: 560; color: var(--text-3); letter-spacing: 0; } .kpi-alert .kpi-value { color: var(--red-fg); } .dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-3); } .col-8 { grid-column: span 8; } .col-6 { grid-column: span 6; } .col-4 { grid-column: span 4; } .col-12 { grid-column: 1 / -1; } .bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-3); align-items: end; height: 180px; padding-top: var(--s-2); } .bars-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; } .bars-pair { flex: 1; width: 100%; display: flex; gap: 3px; align-items: flex-end; justify-content: center; } .bars-pair span { width: min(18px, 40%); border-radius: 4px 4px 0 0; } .bar-in { background: var(--blue-fg); } .bar-out { background: var(--brand-600); } .bars-x { font-size: var(--fs-xs); color: var(--text-3); } .legend { display: flex; gap: var(--s-3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-2); } .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; } .hbar { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) 42px; gap: var(--s-2); align-items: center; font-size: var(--fs-sm); } .hbar-track { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; } .hbar-fill { height: 100%; border-radius: inherit; background: var(--brand-600); } .stackbar { display: flex; height: 12px; border-radius: var(--r-pill); overflow: hidden; gap: 2px; } .queue-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); } .queue-row:last-child { border-bottom: 0; } /* ---------- 10. Conversaciones (inbox) ---------- */ .inbox { display: grid; grid-template-columns: var(--list-w) minmax(0, 1fr) var(--panel-w); height: 100%; min-height: 0; } .inbox-list { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-right: 1px solid var(--border); } .inbox-list-head { padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); border-bottom: 1px solid var(--border); } .inbox-list-title { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: var(--fs-md); } .conv-scroll { overflow-y: auto; min-height: 0; flex: 1; } .conv-group { position: sticky; top: 0; z-index: 1; padding: 6px var(--s-3); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); background: var(--surface-2); border-bottom: 1px solid var(--border); } .conv-group.is-queue { color: var(--red-fg); background: color-mix(in oklab, var(--red-bg) 55%, var(--surface)); } .conv { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px var(--s-3); width: 100%; padding: 10px var(--s-3); border: 0; border-bottom: 1px solid var(--border); background: var(--surface); text-align: left; cursor: pointer; } .conv:hover { background: var(--surface-2); } .conv.is-active { background: var(--brand-soft); } .conv.is-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand-600); } .conv.is-new { animation: flash 1.4s ease; } .conv .avatar { grid-row: span 3; width: 40px; height: 40px; } .conv-top { display: flex; align-items: baseline; gap: var(--s-2); } .conv-name { flex: 1; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv.is-unread .conv-name { font-weight: 750; } .conv-time { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; } .conv.is-unread .conv-time { color: var(--brand-700); font-weight: 650; } .conv-mid { display: flex; align-items: center; gap: var(--s-2); } .conv-preview { flex: 1; min-width: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); display: flex; align-items: center; gap: 4px; } .conv.is-unread .conv-preview { color: var(--text); } .conv-pills { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; } .conv-wa { font-size: var(--fs-xs); color: var(--text-3); display: inline-flex; align-items: center; gap: 3px; height: 20px; } .load-more { display: flex; justify-content: center; padding: var(--s-3); } .chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--chat-bg); } .chat-head { background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px var(--s-4) 8px; display: flex; flex-direction: column; gap: 8px; } .chat-id { display: flex; align-items: center; gap: var(--s-3); min-width: 0; } .chat-name { font-weight: 700; font-size: var(--fs-md); line-height: 1.2; } .chat-meta { font-size: var(--fs-sm); color: var(--text-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .chat-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto; justify-content: flex-end; } .chat-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .chat-actions .select { width: auto; } .chat-actions .spacer { flex: 1; } .chat-back, .chat-info-btn { display: none; } .msgs { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-4) max(var(--s-4), 5%); display: flex; flex-direction: column; gap: 6px; } .msgs-older { align-self: center; display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-3); padding: 4px 0 8px; } .msg { position: relative; max-width: min(520px, 78%); padding: 6px 9px 5px; border-radius: 10px; background: var(--bub-in); color: var(--text); box-shadow: 0 1px .5px rgba(11,20,26,.13); align-self: flex-start; display: flex; flex-direction: column; gap: 4px; } .msg-in { border-top-left-radius: 3px; } .msg-agent, .msg-ai { align-self: flex-end; border-top-right-radius: 3px; } .msg-agent { background: var(--bub-agent); } .msg-ai { background: var(--bub-ai); box-shadow: inset 0 0 0 1px var(--bub-ai-edge); } .msg + .msg-in, .msg-sys + .msg { margin-top: 4px; } .msg-sender { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 700; } .msg-ai .msg-sender { color: var(--blue-fg); } .msg-agent .msg-sender { color: var(--green-fg); } .msg-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.42; } .msg-meta { align-self: flex-end; display: flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; margin-top: -2px; } .tick { width: 15px; height: 15px; stroke-width: 2; } .tick-read { color: var(--tick-read); } .tick-failed { color: var(--red-fg); } .msg-failed { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--red-fg); font-weight: 600; } .msg-failed button { border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; padding: 0; font: inherit; } .msg-sys { align-self: center; max-width: 86%; padding: 4px 10px; border-radius: 8px; background: var(--bub-sys); color: var(--text-2); font-size: var(--fs-xs); font-weight: 560; text-align: center; box-shadow: 0 1px .5px rgba(11,20,26,.1); display: inline-flex; align-items: center; gap: 5px; margin: 6px 0; } .msg-day { align-self: center; font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); background: var(--bub-sys); padding: 3px 10px; border-radius: 8px; box-shadow: 0 1px .5px rgba(11,20,26,.1); } .msg-img { display: grid; place-items: end start; width: 280px; max-width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 7px; padding: 8px; cursor: zoom-in; color: var(--text-2); font-size: var(--fs-xs); background: repeating-linear-gradient(135deg, var(--surface-3) 0 10px, var(--surface-2) 10px 20px); } .msg-img span { background: var(--surface); padding: 2px 6px; border-radius: 4px; font-family: var(--mono); } .msg-ai-note { display: flex; gap: 6px; padding: 6px 8px; border-radius: 6px; background: color-mix(in oklab, var(--blue-bg) 70%, transparent); color: var(--text); font-size: var(--fs-sm); line-height: 1.4; } .msg-ai-note .ic { color: var(--blue-fg); margin-top: 1px; } .msg-ai-note b { color: var(--blue-fg); font-weight: 650; } .audio { display: flex; align-items: center; gap: 10px; width: 260px; max-width: 100%; } .audio-play { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 0; background: var(--brand-600); color: #fff; cursor: pointer; } .audio-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 28px; } .audio-wave i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--border-strong); } .audio-wave i.on { background: var(--brand-600); } .audio-dur { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; } .doc { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 7px; background: color-mix(in oklab, var(--surface) 55%, transparent); min-width: 240px; } .doc-ic { display: grid; place-items: center; width: 34px; height: 40px; border-radius: 5px; background: var(--red-fg); color: #fff; font-size: 10px; font-weight: 800; flex: none; } .doc-name { font-weight: 600; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .doc-meta { font-size: var(--fs-xs); color: var(--text-3); } .typing { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 10px; background: var(--bub-ai); box-shadow: inset 0 0 0 1px var(--bub-ai-edge); color: var(--blue-fg); font-size: var(--fs-sm); font-weight: 600; } .typing-dots { display: inline-flex; gap: 3px; } .typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: blink 1.2s infinite; } .typing-dots i:nth-child(2) { animation-delay: .15s; } .typing-dots i:nth-child(3) { animation-delay: .3s; } .composer { display: flex; align-items: flex-end; gap: var(--s-2); padding: 10px var(--s-3); background: var(--surface); border-top: 1px solid var(--border); } .composer-box { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--border-strong); border-radius: 20px; background: var(--surface-2); padding: 0 6px 0 14px; } .composer-box:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 20%, transparent); } .composer textarea { width: 100%; min-height: 38px; max-height: 140px; padding: 9px 0; border: 0; background: transparent; resize: none; outline: none; line-height: 1.4; font-size: 14px; } .composer-hint { font-size: 10.5px; color: var(--text-3); padding: 0 0 5px; } .composer .btn-icon { border-radius: 50%; width: 38px; height: 38px; } .composer-mode { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); padding: 6px var(--s-4) 0; background: var(--surface); } .composer-locked { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: 12px; background: var(--surface); border-top: 1px solid var(--border); color: var(--text-3); flex-wrap: wrap; } .rec { display: flex; align-items: center; gap: 8px; color: var(--red-fg); font-weight: 600; font-variant-numeric: tabular-nums; height: 38px; } .rec::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red-fg); animation: blink 1s infinite; } .panel { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: var(--surface); border-left: 1px solid var(--border); } .panel-sec { padding: var(--s-4); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--s-3); } .panel-sec-head { display: flex; align-items: center; gap: var(--s-2); } .panel-sec-title { flex: 1; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); display: flex; align-items: center; gap: 6px; } .panel-close { display: none; } .kv { display: grid; grid-template-columns: minmax(80px, auto) minmax(0, 1fr); gap: 6px var(--s-3); font-size: var(--fs-sm); } .kv dt { color: var(--text-3); } .kv dd { margin: 0; font-weight: 560; } .memory { padding: var(--s-3); border-radius: var(--r); background: var(--blue-bg); color: var(--text); font-size: var(--fs-sm); line-height: 1.5; } .memory .kv { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid color-mix(in oklab, var(--blue-fg) 22%, transparent); } .memory .kv dt { color: var(--blue-fg); } .mini-list { display: flex; flex-direction: column; } .mini-row { display: flex; align-items: center; gap: var(--s-2); padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-sm); } .mini-row:last-child { border-bottom: 0; } .note { padding: 8px 10px; border-radius: var(--r); background: var(--note-bg); border: 1px solid var(--note-border); font-size: var(--fs-sm); } .note-meta { font-size: var(--fs-xs); color: var(--text-3); margin-top: 4px; display: flex; align-items: center; gap: 4px; } .note-input { background: var(--note-bg); border: 1px dashed var(--note-border); } .timeline { display: flex; flex-direction: column; gap: 0; } .tl-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: var(--fs-sm); position: relative; padding-bottom: 12px; } .tl-item::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 1px; background: var(--border-strong); } .tl-item:last-child::before { display: none; } .tl-dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); } .tl-dot.ai { background: var(--violet-bg); color: var(--violet-fg); } .tl-dot.human { background: var(--green-bg); color: var(--green-fg); } .tl-dot.queue { background: var(--red-bg); color: var(--red-fg); } .tl-time { font-size: var(--fs-xs); color: var(--text-3); } /* ---------- 11. WhatsApp, agentes IA, QR ---------- */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-3); } .wa-card .card-body { display: flex; flex-direction: column; gap: var(--s-3); } .wa-card.is-down { border-color: color-mix(in oklab, var(--red-fg) 40%, var(--border)); } .wa-head { display: flex; align-items: center; gap: var(--s-3); } .wa-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--brand-soft); color: var(--brand-700); flex: none; } .wa-card.is-down .wa-ic { background: var(--red-bg); color: var(--red-fg); } .wa-card.is-wait .wa-ic { background: var(--amber-bg); color: var(--amber-fg); } .qr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: var(--s-6); align-items: center; } .qr-box { position: relative; padding: 12px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--border); aspect-ratio: 1; } .qr-grid { display: grid; width: 100%; height: 100%; } .qr-grid i { background: #fff; } .qr-grid i.on { background: #111B17; } .qr-logo { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 10px; background: #fff; display: grid; place-items: center; } .qr-logo span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--brand); color: var(--on-brand); } .qr-timer { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--s-2); } .steps { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; padding: 0; list-style: none; counter-reset: s; } .steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; counter-increment: s; } .steps li::before { content: counter(s); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-700); font-weight: 700; font-size: var(--fs-sm); } .success { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-8) var(--s-4); text-align: center; } .success-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--brand); color: var(--on-brand); animation: pop .3s cubic-bezier(.2,.7,.2,1); } .success-ic .ic { width: 32px; height: 32px; stroke-width: 2.4; } .ai-card .card-body { display: flex; flex-direction: column; gap: var(--s-3); } .prompt-peek { font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .test-chat { display: flex; flex-direction: column; gap: 6px; padding: var(--s-3); border-radius: var(--r); background: var(--chat-bg); min-height: 150px; } .swatch { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs); } .swatch i { display: block; height: 44px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--border); } .swatch code { font-family: var(--mono); color: var(--text-3); } /* ---------- 12. Login ---------- */ .login { container: app / inline-size; position: relative; min-height: 100vh; display: grid; place-items: center; padding: var(--s-6); background: radial-gradient(1200px 600px at 50% -10%, var(--brand-soft), transparent 60%), var(--bg); color: var(--text); font: var(--fs-base)/var(--lh) var(--font); } .login-card { width: min(380px, 100%); padding: var(--s-8); display: flex; flex-direction: column; gap: var(--s-4); } .login-logo { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--brand); color: var(--on-brand); } .login-foot { text-align: center; font-size: var(--fs-xs); color: var(--text-3); } /* ---------- 13. Responsivo (container queries sobre .app) ---------- */ @container app (max-width: 1180px) { .inbox { grid-template-columns: 300px minmax(0, 1fr); } .inbox .panel { display: none; } .inbox[data-pane="info"] .panel { display: flex; position: absolute; right: 0; top: 0; bottom: 0; width: min(360px, 100%); z-index: 20; box-shadow: var(--shadow-3); } .panel-close, .chat-info-btn { display: inline-flex; } .chat-id { flex-wrap: wrap; } .chat-id > .grow { min-width: 140px; } .chat-pills { order: 5; width: 100%; margin-left: 0; justify-content: flex-start; } .col-8, .col-6, .col-4 { grid-column: 1 / -1; } .qr-layout { grid-template-columns: 1fr; } .qr-layout .qr-wrap { max-width: 260px; margin: 0 auto; width: 100%; } } @container app (max-width: 760px) { .app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } .side { flex-direction: row; align-items: center; gap: var(--s-1); padding: 6px 8px; overflow-x: auto; overflow-y: hidden; } .side-logo { padding: 0 6px 0 0; } .side-logo-text, .side-group, .side-foot .side-me-text, .side-status span, .side-item .side-label { display: none; } .side-nav { flex-direction: row; gap: 2px; } .side-item { width: 38px; height: 38px; justify-content: center; padding: 0; } .side-item .badge { position: absolute; top: 1px; right: 0; margin: 0; min-width: 16px; height: 16px; font-size: 9.5px; } .side-item[aria-current="page"]::before { left: 8px; right: 8px; top: auto; bottom: -6px; width: auto; height: 3px; border-radius: 3px 3px 0 0; } .side-foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; border: 0; padding: 0; } .side-status { display: none; } .inbox { grid-template-columns: 1fr; position: relative; } .inbox[data-pane="list"] .chat, .inbox[data-pane="chat"] .inbox-list, .inbox[data-pane="info"] .inbox-list { display: none; } .inbox[data-pane="info"] .panel { width: 100%; } .chat-back { display: inline-flex; } .msg { max-width: 88%; } .page { padding: var(--s-4); } .form-section { grid-template-columns: 1fr; gap: var(--s-3); } .modal-backdrop { padding: 0; align-items: end; } .modal { width: 100%; max-height: 92%; border-radius: var(--r-xl) var(--r-xl) 0 0; } .modal-foot { border-radius: 0; } .toasts { left: var(--s-3); right: var(--s-3); } .toast { max-width: none; } .kpi-value { font-size: 22px; } } @media (max-width: 760px) { .app { height: 100dvh; } }