/* * components.css — UI Kit Velandra * Fuente única de verdad para todos los componentes visuales del sistema. * * REGLA: * Usa clases de este archivo. No inventes estilos propios. * Claude añade nuevos componentes aquí cuando la pantalla lo requiere. * Si necesitas un componente que no existe → reportar, no improvisar. * * Depende de: design-tokens.css (debe cargarse antes que este archivo) * Uso: * * */ /* ─── Fuente base ───────────────────────────────────────────────────────── * Inter NO se importa aquí (viola GOV-NEW-28 + Camino A regla §7). * Cada layout debe cargar Inter via en el : * * * * El fallback `system-ui` mantiene legibilidad si falla la red. */ @import url('./components-utilities.css'); /* ─── Velandra wordmark · utility classes (v3 Bespoke + optical sizing) ─── * Tipografía de marca grade Linear/Stripe. Inter Tight para hero (autoridad * + tracking compacto); Inter regular para tamaños chicos (respira mejor). * * .wm-hero · 40-64 px · Inter Tight 800 · -0.042em + ss01/ss02/cv11 * .wm-mid · 22-32 px · Inter Tight 700 · -0.025em * .wm-small · 14-18 px · Inter 700 · -0.008em * * Lockup horizontal: (flex row + gap 14) * --------------------------------------------------------------------- */ .wm-hero { font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif; font-weight: 600; letter-spacing: -0.042em; font-feature-settings: "ss01", "ss02", "cv11"; line-height: 1; } .wm-mid { font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; } .wm-small { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 600; letter-spacing: -0.008em; line-height: 1.1; } .brand-lockup { display: inline-flex; align-items: center; gap: 12px; } .brand-lockup--compact { gap: 8px; } .brand-lockup--tight { gap: 6px; } *, *::before, *::after { box-sizing: border-box; } /* ─── Foco de teclado accesible ─────────────────────────────────────────── */ *:focus-visible { outline: 2px solid var(--input-focus); outline-offset: 2px; } /* ─── Scrollbars (Sensación Nativa macOS) ───────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-md); } ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); } /* TYPE-SCALE-ROOT-16PX-FIX-2026-06-02-01 — el rem base debe ser 16px para que la escala ADR-29 {11,12,13,15,17,20,24} rinda su px DOCUMENTADO. `font-size: var(--text-base)` (0.9375rem) aplicado a `html` fijaba el root en 15px y encogía TODA la escala ~6.25% (body 15→14.06px · --text-sm 13→12.19px, medido vía getComputedStyle). Separado: html = rem base (16px) · body = --text-base (15px copy). */ html { font-size: 16px; } body { font-size: var(--text-base); } html, body { margin: 0; padding: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; line-height: 1.5; background: var(--bg-page); color: var(--text-primary); -webkit-font-smoothing: antialiased; scrollbar-gutter: stable; } /* ─── Tipografía ────────────────────────────────────────────────────────── */ .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .text-3xl { font-size: 2rem; } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold{ font-weight: 600; } .font-bold { font-weight: 600; } .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-tertiary); } .text-danger { color: var(--danger); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-accent { color: var(--accent-light); } /* ─── Botones ───────────────────────────────────────────────────────────── * Camino A · Linear-grade · 3 canónicos + aliases legacy. * Sólo `.btn-primary`, `.btn-secondary`, `.btn-ghost` son de uso nuevo. * Aliases (sign/clinical/gold/success/danger) sobreviven por compat * y todos colapsan visualmente a .btn-primary salvo .btn-danger semántico. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); /* 6px Linear */ font-size: var(--text-sm); font-weight: 500; /* Linear weight, no 600 */ font-family: inherit; cursor: pointer; border: 1px solid transparent; transition: background var(--transition), border-color var(--transition), color var(--transition); text-decoration: none; white-space: nowrap; user-select: none; min-height: 32px; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } /* Primario — acción primaria. Accent fill. */ .btn-primary { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); } .btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); } /* Secundario — acción alternativa. Border + bg-elevated. */ .btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-strong); } .btn-secondary:hover:not(:disabled) { background: var(--bg-hover); } /* Ghost — sin fondo, hover sutil. */ .btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; } .btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); } /* Modificador semántico — danger. * Uso: */ .velandra-live-lane-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); min-width: 0; } .velandra-live-lane { --velandra-live-lane-accent: var(--accent); --velandra-live-lane-soft: var(--accent-subtle); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-width: 0; min-height: 4rem; padding: var(--card-padding-compact); border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface); color: var(--text-primary); text-align: start; box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition); } .velandra-live-lane[hidden] { display: none; } .velandra-live-lane:hover { border-color: color-mix(in srgb, var(--velandra-live-lane-accent) 48%, var(--border)); background: var(--bg-hover); transform: translateY(-1px); } .velandra-live-lane:focus-visible { outline: 2px solid var(--velandra-live-lane-accent); outline-offset: 2px; } .velandra-live-lane__icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-pill); background: var(--velandra-live-lane-soft); color: var(--velandra-live-lane-accent); } .velandra-live-lane__icon svg { width: 1rem; height: 1rem; stroke: currentColor; } .velandra-live-lane__body { display: grid; gap: var(--space-1); min-width: 0; } .velandra-live-lane__title { color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 1.25; } .velandra-live-lane__preview { min-width: 0; overflow: hidden; color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .velandra-live-lane__alert-dot { display: inline-flex; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--border-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-strong) 14%, transparent); } .velandra-live-lane[data-lane='transcript'] { --velandra-live-lane-accent: var(--accent); --velandra-live-lane-soft: var(--accent-subtle); } .velandra-live-lane[data-lane='diagnosis'] { --velandra-live-lane-accent: var(--success); --velandra-live-lane-soft: var(--success-subtle); } .velandra-live-lane[data-lane='cds'] { --velandra-live-lane-accent: var(--warning); --velandra-live-lane-soft: var(--warning-subtle); } .velandra-live-lane[data-priority='warning'] { --velandra-live-lane-accent: var(--warning); --velandra-live-lane-soft: var(--warning-subtle); } .velandra-live-lane[data-priority='critical'] { --velandra-live-lane-accent: var(--danger); --velandra-live-lane-soft: var(--danger-subtle); } .velandra-live-lane[data-state='active'] { border-color: color-mix(in srgb, var(--velandra-live-lane-accent) 62%, var(--border)); background: color-mix(in srgb, var(--velandra-live-lane-soft) 64%, var(--bg-surface)); box-shadow: var(--shadow-sm), inset 3px 0 0 var(--velandra-live-lane-accent); } .velandra-live-lane[data-state='active'] .velandra-live-lane__alert-dot { background: var(--velandra-live-lane-accent); animation: velandra-live-lane-pulse 1.4s ease-in-out infinite; } .velandra-live-lane[data-state='done'] .velandra-live-lane__alert-dot { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 16%, transparent); } .velandra-live-lane[data-state='idle'] .velandra-live-lane__preview { color: var(--text-tertiary); } @keyframes velandra-live-lane-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--velandra-live-lane-accent) 16%, transparent); transform: scale(1); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--velandra-live-lane-accent) 0%, transparent); transform: scale(1.12); } } @media (prefers-reduced-motion: reduce) { .velandra-live-lane, .velandra-live-lane__alert-dot { animation: none; transition: none; } .velandra-live-lane:hover { transform: none; } } @media (max-width: 900px) { .velandra-live-lane-group { grid-template-columns: 1fr; } } /* ─── Sugerencias IA (panel copiloto) ───────────────────────────────────── */ .suggestion-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 12px; transition: border-color var(--transition); } .suggestion-card + .suggestion-card { margin-top: 8px; } .suggestion-card:hover { border-color: var(--border-strong); } .suggestion-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .suggestion-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); flex: 1; } .suggestion-source { display: none; font-size: var(--text-xs); color: var(--text-tertiary); font-style: italic; border-left: 2px solid var(--border-strong); padding-left: 8px; margin-bottom: 10px; } .suggestion-card:hover .suggestion-source { display: block; } .suggestion-actions { display: flex; gap: 8px; } .btn-ai-accept { flex: 1; padding: 4px 12px; background: var(--clinical-subtle); color: var(--clinical); border: 1px solid var(--clinical); border-radius: 6px; font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background var(--transition), color var(--transition); } .btn-ai-accept:hover { background: var(--clinical); color: var(--text-on-accent); } .btn-ai-ignore { padding: 4px 10px; background: transparent; color: var(--text-tertiary); border: 1px solid var(--border); border-radius: 6px; font-size: var(--text-sm); cursor: pointer; transition: color var(--transition), border-color var(--transition); } .btn-ai-ignore:hover { color: var(--danger); border-color: var(--danger); } /* ─── Layouts de página ─────────────────────────────────────────────────── */ /* * Uso estándar: *
* *
*
...
*
*
* * page-content se ajusta automáticamente según el sidebar width. */ .page-layout { display: block; min-height: 100vh; } /* Wrapper del contenido — se mueve cuando sidebar colapsa */ .page-content { display: flex; flex-direction: column; margin-left: 240px; /* G5: igualar al ancho real del rail .sidebar (240px); antes 128px → el contenido quedaba bajo el sidebar fijo */ transition: margin-left var(--transition-base); min-height: 100vh; min-width: 0; } /* Sidebar colapsado */ .page-content.sidebar-open { margin-left: 240px; } .page-content.sidebar-small { margin-left: 64px; } .sidebar-collapsed ~ .page-content, .sidebar-collapsed + .page-content { margin-left: 64px; } .page-main { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 28px 32px; position: relative; } .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; gap: 16px; } .page-title { font-family: var(--font-display); /* Inter Display · ADR-30 (paridad Linear: headings display) */ font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; /* tracking display Linear-grade */ color: var(--text-primary); margin: 0; } /* Headings grandes bare → Inter Display (ADR-30). Body/small se quedan en Inter. */ h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; } .page-title small { display: block; font-size: var(--text-sm); color: var(--text-secondary); font-weight: 400; margin-top: 4px; } .page-subtitle { font-size: var(--text-sm); color: var(--text-secondary); margin: 4px 0 0; } /* ─── Estados vacíos ────────────────────────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; color: var(--text-secondary); } .empty-state-icon { font-size: var(--text-4xl); margin-bottom: 12px; opacity: 0.6; } .empty-state-title { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .empty-state-body { font-size: var(--text-sm); color: var(--text-secondary); max-width: 320px; } /* ─── Separadores ───────────────────────────────────────────────────────── */ .divider { height: 1px; background: var(--divider); border: none; margin: 16px 0; } /* ─── Toasts / Notificaciones ───────────────────────────────────────────── */ .toast-container { position: fixed; bottom: 20px; right: 20px; z-index: var(--z-max); display: flex; flex-direction: column; gap: 8px; } .toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; background: var(--bg-elevated); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); min-width: 280px; animation: slideInRight 0.3s var(--ease-out); } .toast-success { border-left: 4px solid var(--success); } .toast-error { border-left: 4px solid var(--danger); } .toast-warning { border-left: 4px solid var(--warning); } .toast-info { border-left: 4px solid var(--info); } /* ─── Animaciones ───────────────────────────────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes pulse-rec { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } } /* ─── Velandra Motion Taxonomy · v4 ───────────────────────────────────────── * Sistema vivo del mark F-punto: 6 estados con cadencia áurea. * * Tokens temporales — todos múltiplos / potencias de φ: * --phi-duration-instant = 0.382s · 1/φ² * --phi-duration-quick = 0.618s · 1/φ * --phi-duration-medium = 1.2s * --phi-duration-natural = 1.382s * --phi-duration-heart = 1.618s · φ ← latido del sistema * --phi-duration-rest = 8s * * Curva canónica: cubic-bezier(0.382, 0, 0.618, 1) — control points 1/φ² y 1/φ. * * Estados disponibles (clases CSS): * .velandra-loading · heartbeat · IA pensando (default, upgrade v4 in-place) * .v4-idle · respiración 8s · mark vivo en reposo * .v4-pulse · ripple expansivo · notificación entrante * .v4-bloom · scale + glow · éxito / confirmación * .v4-enter · stroke-draw · primer render / page load * .v4-hover · scale sutil · interactive feedback * * El mark F-punto trae los handles: .arc-outer (los 2 trazos), .velandra-dot * (el punto). Hermano de marca: velandra-ai-mark.svg (alma de IA, ya φ puro: * radios 13/8/5, opacidades 1/0.618/0.382). F-punto en v4 se sibling-alinea * con su hermana via translate(0 -2) → dot @ y=22 = baseline velandra. * * Para spinner standalone: * Reduced motion fallback abajo (prefers-reduced-motion: reduce). * ──────────────────────────────────────────────────────────────────────────── */ :root { --phi-duration-instant: 0.382s; --phi-duration-quick: 0.618s; --phi-duration-medium: 1.2s; --phi-duration-natural: 1.382s; --phi-duration-heart: 1.618s; --phi-duration-rest: 8s; --phi-ease: cubic-bezier(0.382, 0, 0.618, 1); } /* ── 1 · Loading · heartbeat (default) ──────────────────────────────────── */ @keyframes velandra-heartbeat { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes velandra-dot-breathe { 0%, 100% { r: 2.5; opacity: 1; } 50% { r: 3.5; opacity: 0.55; } } .velandra-loading .arc-outer { animation: velandra-heartbeat var(--phi-duration-heart) var(--phi-ease) infinite; } .velandra-loading .velandra-dot { animation: velandra-dot-breathe var(--phi-duration-heart) 1s var(--phi-ease) infinite; } /* ── 2 · Idle · respiración (mark vivo en reposo) ───────────────────────── */ @keyframes v4-idle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.018); opacity: 0.95; } } .v4-idle { animation: v4-idle var(--phi-duration-rest) ease-in-out infinite; transform-origin: center; transform-box: fill-box; } /* ── 3 · Pulse · ripple expansivo (notificación) ────────────────────────── */ @keyframes v4-pulse-ring { 0% { r: 2.5; opacity: 0.9; } 100% { r: 13; opacity: 0; } } .v4-pulse .pulse-ring { animation: v4-pulse-ring var(--phi-duration-medium) var(--phi-ease) infinite; } /* ── 4 · Bloom · scale + glow (éxito) ───────────────────────────────────── */ @keyframes v4-bloom { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.12); } } @keyframes v4-bloom-glow { 0%, 100% { stroke-opacity: 0; } 40% { stroke-opacity: 0.45; } } .v4-bloom { animation: v4-bloom var(--phi-duration-quick) var(--phi-ease); transform-origin: center; transform-box: fill-box; } .v4-bloom .glow { animation: v4-bloom-glow var(--phi-duration-quick) var(--phi-ease); } /* ── 5 · Enter · stroke-draw (page load) ────────────────────────────────── */ @keyframes v4-enter-arc { 0% { stroke-dashoffset: 50; opacity: 0; } 30% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } @keyframes v4-enter-dot { 0%, 70% { r: 0; opacity: 0; } 100% { r: 2.5; opacity: 1; } } .v4-enter .arc-outer { stroke-dasharray: 50; animation: v4-enter-arc var(--phi-duration-natural) var(--phi-ease) forwards; } .v4-enter .velandra-dot { animation: v4-enter-dot var(--phi-duration-natural) var(--phi-ease) forwards; } /* ── 6 · Hover · scale sutil (interactive feedback) ─────────────────────── */ @keyframes v4-hover-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } } .v4-hover:hover { animation: v4-hover-pulse var(--phi-duration-instant) var(--phi-ease); transform-origin: center; transform-box: fill-box; } /* ── Reduced motion fallback (accesibilidad WCAG) ───────────────────────── */ @media (prefers-reduced-motion: reduce) { .v4-idle, .v4-bloom, .v4-hover:hover { animation: none; } .velandra-loading .arc-outer { animation: velandra-heartbeat 2.4s ease-in-out infinite; } .velandra-loading .velandra-dot { animation: none; } .v4-pulse .pulse-ring { animation: none; opacity: 0; } .v4-enter .arc-outer { animation: none; stroke-dashoffset: 0; opacity: 1; } .v4-enter .velandra-dot { animation: none; opacity: 1; } } /* Spinner standalone — F-punto como indicador de carga */ .velandra-spinner { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); } .velandra-spinner svg { display: block; width: 100%; height: 100%; } /* Tamaños del spinner — F-punto es cuadrado */ .velandra-spinner-sm { width: 22px; height: 22px; } .velandra-spinner-md { width: 36px; height: 36px; } .velandra-spinner-lg { width: 60px; height: 60px; } /* Squircle de login con animación */ .brand-squircle { display: flex; align-items: center; justify-content: center; background: var(--text-primary); border-radius: 22%; box-shadow: var(--shadow-lg); transition: box-shadow var(--transition); } .brand-squircle.velandra-loading { box-shadow: var(--shadow-md); } .brand-squircle-lg { width: 96px; height: 96px; } .brand-squircle-md { width: 68px; height: 68px; } .brand-squircle-sm { width: 44px; height: 44px; } /* ─── Bottom Tab Nav (móvil) ─────────────────────────────────────────────── */ .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: color-mix(in srgb, var(--bg-surface) 96%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--border); z-index: var(--z-shell); /* iPhone home-indicator safe area — sin esto el indicador tapa los ítems */ padding-bottom: env(safe-area-inset-bottom, 0px); } :where([hidden]) { display: none !important; } .bottom-nav-items { display: flex; width: 100%; /* FIX: sin esto el contenedor era ancho-contenido → ítems pegados a la izquierda */ height: 58px; padding: 4px 8px 6px; gap: 2px; } .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 0.6875rem; font-weight: 500; color: var(--text-tertiary); cursor: pointer; border: none; background: none; min-width: 0; padding: 5px 2px 4px; position: relative; transition: color var(--transition); text-decoration: none; -webkit-tap-highlight-color: transparent; } .bottom-nav-item.active { color: var(--accent); } .bottom-nav-item.active svg { color: var(--accent); } .bottom-nav-item:hover, .bottom-nav-item:focus-visible { color: var(--accent); text-decoration: none; } /* contenido (ícono + label) por encima del pill */ .bottom-nav-item > svg { position: relative; z-index: 1; width: 22px; height: 22px; flex-shrink: 0; } .bottom-nav-item > span { position: relative; z-index: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Active = icono/label accent; no dibujar barras ni pills que se leen como artefactos en iOS. */ .bottom-nav-item.active::before { content: none; } .bottom-nav-badge { position: absolute; top: 6px; right: calc(50% - 18px); background: var(--danger); color: var(--text-on-accent); font-size: 0.6875rem; font-weight: 600; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } /* ─── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .sidebar { width: 200px; } .page-content { margin-left: 200px; } /* G5: match al rail de 200px en ≤1024px */ .sidebar-collapsed ~ .page-content, .sidebar-collapsed + .page-content { margin-left: 64px; } .page-main { padding: 16px 20px; } .modal { padding: 20px; } } @media (max-width: 640px) { .sidebar { transform: translateX(-100%); transition: transform var(--transition-base); } .sidebar.sidebar-open { transform: translateX(0); } .sidebar-collapsed { transform: translateX(-100%); } .page-content { margin-left: 0; } html.sidebar-pref-collapsed .page-content, .sidebar-collapsed ~ .page-content, .sidebar-collapsed + .page-content { margin-left: 0; } .bottom-nav { display: flex; } .page-main { padding: 12px; padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } .modal { border-radius: var(--radius-md) var(--radius-md) 0 0; margin-bottom: 0; align-self: flex-end; max-width: 100%; } .modal-overlay, .modal-backdrop { align-items: flex-end; padding: 0; } .btn-lg { padding: 12px 20px; } .card { padding: 16px; } /* Mobile hamburger toggle (sidebar) */ .mobile-nav-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; } } @media (min-width: 641px) { .bottom-nav { display: none !important; } .mobile-nav-toggle { display: none; } } /* Configuración vive dentro del menú de usuario para evitar duplicados en sidebar */ #nav-settings { display: none !important; } /* ── Role-based FOUC Prevention ─────────────────────── */ html[data-role="doctor"] #nav-dashboard, html[data-role="doctor"] #nav-doctores, html[data-role="doctor"] #nav-cola, html[data-role="doctor"] #nav-intelligence, html[data-role="doctor"] a[href*="queue-operator"], html[data-role="doctor"] a[href*="kiosk"], html[data-role="doctor"] a[href*="display"], html[data-role="doctor"] a[href*="/queue.html"], html[data-role="doctor"] a[href*="/doctors.html"], html[data-role="operador"] #nav-dashboard, html[data-role="operador"] #nav-day, html[data-role="operador"] #nav-doctores, html[data-role="operador"] #nav-intelligence, html[data-role="operador"] #nav-kiosco, html[data-role="operador"] #nav-display, html[data-role="operador"] #nav-portal, html[data-role="operador"] #nav-settings, html[data-role="operador"] a.bottom-nav-item[href="/admin/"], html[data-role="paciente"] #nav-intelligence { display: none !important; } /* removed */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; margin-bottom: 1rem; } .table-responsive table { min-width: 800px; } .doctor-list { display: flex; flex-direction: row; gap: 8px; padding: 12px 20px; overflow-x: auto; background: var(--bg-surface); border-bottom: 1px solid var(--border); } /* ─── UI Standardization (Violet Constitution) overrides ─── */ .main-title, .tb-title { font-size: var(--text-2xl) !important; font-weight: 600 !important; color: var(--text-primary) !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; margin: 0 !important; } .main-subtitle, .tb-subtitle, #tb-subtitle { font-size: var(--text-sm) !important; color: var(--text-secondary) !important; margin-top: 4px !important; font-weight: 400 !important; display: block !important; } .btn { font-size: var(--text-sm) !important; padding: 10px 20px !important; } .btn-sm { font-size: var(--text-sm) !important; padding: 6px 12px !important; } /* Force view-tab to look like uniform segmented controls */ .view-tab { font-size: var(--text-sm) !important; padding: 8px 16px !important; font-weight: 500 !important; border: 1px solid var(--border) !important; background: var(--bg-surface) !important; color: var(--text-secondary) !important; border-radius: 8px !important; cursor: pointer !important; transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition), transform var(--transition) !important; } .view-tab.active { background: var(--accent-subtle) !important; color: var(--accent-light) !important; border-color: var(--text-primary) !important; font-weight: 600 !important; } .view-tab:hover:not(.active) { background: var(--bg-hover) !important; color: var(--text-primary) !important; } html[data-role="doctor"] button[data-view="agenda"] { display: none !important; } /* ─── Typography overrides for Homogeneity (Violet Constitution) ─── */ .table-row, .table-row * { font-size: var(--text-sm) !important; } .table-header, .table-header * { font-size: var(--text-xs) !important; font-weight: 600 !important; } .stat-card-title { font-size: var(--text-sm) !important; font-weight: 500 !important; } .stat-card-value { font-family: var(--font-display) !important; /* Inter Display · ADR-30 (números grandes Linear-grade) */ font-size: var(--text-2xl) !important; font-weight: 600 !important; letter-spacing: -0.02em !important; } .search-input { font-size: var(--text-sm) !important; } .btn { font-size: var(--text-sm) !important; font-weight: 600 !important; } /* ── Sidebar Search & Recent Patients (UX-UI-02 / UX-UI-04) ── */ .sidebar-search-container { padding: 0 16px 12px 16px; position: relative; } .sidebar-search-wrapper { position: relative; display: flex; align-items: center; } .sidebar-search-icon { position: absolute; left: 10px; color: var(--text-tertiary); pointer-events: none; } .search-clear-btn { position: absolute; right: 8px; background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: var(--text-base); line-height: 1; padding: 0 4px; display: none; } .search-clear-btn:hover { color: var(--text-primary); } .sidebar-search-input { width: 100%; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius-md); padding: 8px 32px 8px 32px; font-size: var(--text-sm); transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition), transform var(--transition); } .sidebar-search-input:focus { outline: none; border-color: var(--border-strong); box-shadow: none; } .sidebar-search-input::placeholder { color: var(--text-muted); } .sidebar-collapsed .sidebar-search-input { display: none; } .sidebar-collapsed .sidebar-search-icon { position: static; margin: 0 auto; cursor: pointer; padding: 8px; border-radius: var(--radius-md); color: var(--text-secondary); } .sidebar-collapsed .sidebar-search-icon:hover { background: var(--bg-hover); } @keyframes searchDropdownIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .sidebar-search-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: auto; min-width: 300px; max-width: 360px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border, var(--border-strong)); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); display: none; flex-direction: column; overflow: hidden; max-height: 300px; overflow-y: auto; } .sidebar-search-dropdown.show { display: flex; animation: searchDropdownIn 0.12s ease forwards; } .search-dropdown-item { padding: 8px 12px; display: flex; flex-direction: row; align-items: center; gap: 8px; text-decoration: none; color: var(--text-primary); border-bottom: 1px solid var(--border); cursor: pointer; } .search-dropdown-item:last-child { border-bottom: none; } .search-dropdown-item:hover, .search-dropdown-item.keyboard-active { background: var(--bg-hover); } .search-dropdown-name { font-size: var(--text-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .search-dropdown-meta { font-size: var(--text-tiny); flex-shrink: 0; margin-left: auto; color: var(--text-tertiary); } .search-result-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary); font-size: var(--text-micro); font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-transform: uppercase; } .search-dropdown-icon { width: 14px; height: 14px; color: var(--text-tertiary); flex-shrink: 0; } .search-dropdown-allergy { font-size: var(--text-micro); color: var(--danger); flex-shrink: 0; margin-right: 4px; cursor: help; } .search-dropdown-footer { padding: 8px 12px; border-top: 1px solid var(--divider); font-size: var(--text-tiny); color: var(--text-tertiary); text-align: center; text-decoration: none; display: block; } .search-dropdown-footer:hover { color: var(--text-secondary); } .search-empty-state { padding: 12px; font-size: var(--text-xs); color: var(--text-tertiary); text-align: center; } /* deprecated UX-UI-08 — 2026-04-07 */ .quick-actions-wrapper { position: relative; display: flex; justify-content: center; } .sidebar-collapsed .quick-actions-wrapper { margin: 0 auto; } /* Stat Card Icon added per DSIGN-11 */ .stat-card-icon { background: var(--bg-elevated); color: var(--text-secondary); border-radius: var(--radius-md); padding: 10px; display: flex; align-items: center; } /* Sistema de Glassmorphism & Borders (Regla de la Luz) */ .glass-header { background: var(--bg-surface); opacity: 0.95; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } /* .search-fields-hint — eliminado (UX-UI-08 rev2): info de campos buscables vive solo en el dropdown, no como texto permanente bajo el input. Patrón GitHub/Linear. */ .search-hint-in-dropdown { font-size: var(--text-micro); color: var(--text-muted); padding: 4px 12px 8px; border-top: 1px solid var(--divider); margin: 0; text-align: center; } /* ── Layout: Topbar (NAV-04) ─────────────────────────────────────────── */ .topbar { height: 48px; display: flex; align-items: center; padding: 0 var(--space-8); border-bottom: 1px solid var(--border); background: var(--bg-surface); position: sticky; top: 0; z-index: var(--z-shell); flex-shrink: 0; gap: var(--space-4); } .topbar-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); flex: 0 0 auto; white-space: nowrap; } .topbar-actions { display: flex; align-items: center; gap: var(--space-3); } @media (max-width: 1024px) { .topbar { padding: 0 var(--space-6); } } @media (max-width: 640px) { .topbar-actions .btn-label { display: none; } } /* NAV-05: Topbar User, Bell, Breadcrumbs */ .topbar-avatar-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-primary); flex-shrink: 0; transition: background var(--transition); } .topbar-avatar-btn:hover { background: var(--bg-hover); } .topbar-user-menu.show { display: block; } .bell-badge { position: absolute; top: 6px; right: 6px; background: var(--danger); color: var(--text-on-accent); border-radius: 50%; font-size: 11px; font-weight: 600; width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; padding: 0; pointer-events: none; border: 1.5px solid var(--bg-surface); line-height: 1; letter-spacing: -0.5px; } /* BADGE-01 — Topbar: el badge de la campana/bandeja es un PIN DOT semántico Patrón: Epic EHR / Canvas Medical / Linear El número solo vive en el sidebar InBasket. El topbar solo avisa de urgencia. Pin dot 8×8px = "hay algo urgente" — el doctor sabe dónde ir (sidebar). */ #bell-badge { width: 8px !important; height: 8px !important; min-width: 8px !important; padding: 0 !important; border-radius: 50% !important; font-size: 0 !important; /* texto invisible — solo color */ top: 5px !important; right: 5px !important; border-width: 2px !important; } .bell-menu.show { display: block; } .topbar-breadcrumb { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; } .topbar-breadcrumb > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; flex: 0 1 auto; } .topbar-breadcrumb > span.topbar-title { display: inline-block; flex-shrink: 0; overflow: visible; text-overflow: clip; } .topbar-back { display: flex; align-items: center; gap: 4px; color: var(--text-secondary); font-size: var(--text-sm); text-decoration: none; transition: color var(--transition); flex-shrink: 0; } .topbar-back:hover { color: var(--text-primary); } .topbar-sep { color: var(--text-muted); font-size: var(--text-sm); flex-shrink: 0; } /* UX-05: Skeleton Loading (Shimmers) */ .skeleton { background: var(--bg-elevated); border-radius: 4px; animation: skeleton-shimmer 1.5s ease-in-out infinite; } @keyframes skeleton-shimmer { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } } .skeleton-text { height: 14px; margin-bottom: 6px; } .skeleton-title { height: 20px; width: 55%; } .skeleton-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; } .skeleton-row { height: 44px; border-radius: 6px; margin-bottom: 4px; } .skeleton-card { height: 80px; border-radius: 8px; } .skeleton-badge { width: 60px; height: 22px; border-radius: 999px; } /* SHELL-01 Topbar Additions */ .topbar-user-btn { display:flex;align-items:center;gap: 8px;padding: 4px 10px;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;color:var(--text-primary);font-family:var(--font-body);transition:background var(--transition), border-color var(--transition); } .topbar-user-btn:hover { background:var(--bg-hover);border-color:var(--border); } .topbar-user-initials { width:28px;height:28px;border-radius:50%;background:var(--bg-elevated);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size: var(--text-tiny);font-weight:600;color:var(--text-primary);flex-shrink:0; } .topbar-user-name { font-size:var(--text-sm);font-weight:500;color:var(--text-primary);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .topbar-icon-btn { position:relative;width:34px;height:34px;border-radius:var(--radius-md);background:transparent;border:1px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);transition:background var(--transition), color var(--transition); } .topbar-icon-btn:hover { background:var(--bg-hover);color:var(--text-primary); } .topbar-dropdown { display:none; } .topbar-dropdown.show { display:flex !important; flex-direction:column; } @media (max-width:1024px) { .topbar-user-name { display:none; } } /* ── InBasket (YA NO: bell-menu dropdown) ─────────────────────────────────── */ /* El dropdown #bell-menu está reemplazado por el panel #velandra-inbox-panel */ /* inbox.js lo oculta vía JS; esta regla es la capa de seguridad CSS */ #bell-menu { display: none !important; pointer-events: none !important; } #bell-menu.show { display: flex !important; pointer-events: auto !important; } /* Bell topbar = semáforo de urgencia: solo el badge rojo cuando hay críticos */ .topbar-bell-wrapper { position: relative; margin-left: 8px; } /* Global CTA (CTA-01) COMMIT 8/100 · Linear-grade · dropdown items con radius propio + margin. Antes: padding 9px 14px sin radius → hover bg cubría las esquinas del popover container, anulando su radius visible. Ahora: padding compact, margin 4px lateral, radius 6px propio → hover queda inset y respeta el container. Linear pattern (UI refresh blog): "smaller icon-only pills, rounded corners". */ .quick-action-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 4px; width: calc(100% - 8px); background: none; border: none; border-radius: 6px; cursor: pointer !important; color: var(--text-primary); font-size: var(--text-sm); font-family: var(--font-body); text-decoration: none; transition: background var(--transition); } .quick-action-item:hover { background: var(--bg-hover); } .quick-action-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; } .quick-action-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: var(--bg-elevated); color: var(--text-secondary); flex-shrink: 0; } /* Método de pago activo en modal cobro */ .cobro-metodo-btn.active-metodo { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); } .cobro-metodo-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ─── Q7 Ronda 10 — Badge informativo (no urgente) ─── */ /* Diferente al nav-badge rojo — este es contextual e informativo */ .nav-badge-info { font-size: var(--text-xs); /* mismo tamaño que nav-badge */ font-weight: 500; color: var(--text-muted); /* gris — no urgente */ margin-left: auto; /* empuja al borde derecho */ flex-shrink: 0; /* Sin background — solo texto plano */ line-height: 1; transition: opacity var(--transition-fast); } /* En collapsed: el count informativo desaparece — no tiene espacio en 64px */ .sidebar-collapsed .nav-badge-info { display: none !important; } /* El badge NO aparece si el valor es 0 — el JS lo oculta vía display:none */ /* Topbar search base: start at 280px (overriding inline if necessary) */ #topbar-search-input-box { width: 280px !important; max-width: 100%; /* prevents overflow on tiny screens */ height: 36px !important; border-radius: 8px !important; background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.08) !important; } /* Topbar search focus state: expand cleanly and apply border */ #topbar-search-input-box:focus-within, #topbar-search-wrapper.search-open #topbar-search-input-box { width: 480px !important; border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent) !important; } /* Toggle aptitud activo — mismo estilo que cobro-metodo-btn */ .aptitud-btn.active-metodo { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); } /* ── Command Center v2 (Ronda 13) ───────────────────────────────── */ @keyframes cmdDropdownIn { from { opacity: 0; transform: scale(0.97); transform-origin: top center; } to { opacity: 1; transform: scale(1); } } #topbar-search-dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 0; width: 520px; max-height: 440px; overflow-y: auto; background: var(--bg-surface); border: 1px solid rgba(255,255,255,0.10); /* D-MV3 overrides var(--border) */ border-radius: var(--radius-md); /* D-MV3: 12px dropdown */ box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 8px 16px rgba(0,0,0,0.4); z-index: var(--z-modal); animation: cmdDropdownIn 100ms var(--ease-out) forwards; } .cmd-section { padding: 4px 0; } .cmd-section + .cmd-section { border-top: 1px solid var(--divider); } .cmd-section-header { font-size: var(--text-tiny); font-weight: 500; /* D-MV4 muted */ text-transform: uppercase; letter-spacing: 0.08em; /* D-MV4 increased */ color: var(--text-muted); padding: 10px 12px 4px; } .cmd-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-decoration: none; color: var(--text-primary); cursor: pointer !important; transition: background var(--transition); font-size: var(--text-sm); border: none; background: none; width: 100%; text-align: left; } .cmd-item:hover { background: var(--bg-hover); border-radius: 4px; /* var(--radius-sm) */ } .cmd-item.keyboard-active { background: rgba(122, 74, 212, 0.15) !important; /* fallback a var(--accent-subtle) si no existe token */ border-radius: 4px; /* var(--radius-sm) */ } .cmd-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-elevated); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-size: var(--text-tiny); font-weight: 600; flex-shrink: 0; } .cmd-avatar-doctor { font-size: var(--text-sm); } .cmd-avatar-cita { font-size: var(--text-sm); } .cmd-avatar-patient { border: none; } .cmd-avatar-tone-0 { background: var(--bg-hover); color: var(--text-secondary); } .cmd-avatar-tone-1 { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); } .cmd-avatar-tone-2 { background: var(--success-subtle); color: var(--success); } .cmd-avatar-tone-3 { background: var(--warning-subtle); color: var(--warning); } .cmd-avatar-tone-4 { background: var(--info-subtle); color: var(--info); } .cmd-avatar-tone-5 { background: var(--danger-subtle); color: var(--danger); } .cmd-avatar-dx, .cmd-avatar-nota { background: var(--accent-subtle); color: var(--accent); } .cmd-item-inline-meta { color: var(--text-muted); font-size: 0.85em; font-weight: 400; } .cmd-highlight { color: var(--text-primary); font-weight: 600; } .cmd-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--text-primary); } .cmd-item-meta { font-size: var(--text-tiny); color: var(--text-tertiary); white-space: nowrap; flex-shrink: 0; } .cmd-action-item { color: var(--text-secondary); font-size: var(--text-sm); cursor: pointer !important; } .cmd-action-item:hover { color: var(--text-primary); } .cmd-context-section { padding: 4px 0; } .cmd-context-item { color: var(--accent); font-size: var(--text-sm); font-weight: 500; cursor: pointer !important; } .cmd-context-hint { font-size: var(--text-tiny); color: var(--text-muted); padding: 8px 12px; font-style: italic; } .cmd-skeleton-item { height: 36px; margin: 4px 12px; border-radius: 4px; background: var(--bg-hover); animation: skeleton-shimmer 1.5s ease-in-out infinite; } .cmd-ver-todos { display: block; padding: 6px 12px; font-size: var(--text-tiny); font-weight: 600; color: var(--accent); text-decoration: none; text-align: right; } .cmd-ver-todos:hover { text-decoration: underline; } .cmd-footer-link { border-top: 1px solid var(--divider); padding: 8px 12px; } .cmd-footer-link a { font-size: var(--text-tiny); color: var(--accent); text-decoration: none; font-weight: 500; } .cmd-footer-link a:hover { text-decoration: underline; } .cmd-empty { padding: 20px 16px; font-size: var(--text-sm); color: var(--text-secondary); text-align: center; } .cmd-search-hint { padding: 10px 12px; font-size: var(--text-tiny); color: var(--text-muted); text-align: center; border-top: 1px solid var(--divider); } /* SEARCH-07 Light/Dark Mode Fixes SEARCH-FIX-2026-05-17: founder reportó "search duplicado en el medio". 3 root causes: (a) `--bg-overlay` !important dejaba la página totalmente legible detrás del modal → no parecía modal, parecía segundo input. (b) trigger del sidebar quedaba visible cuando overlay abría → 2 elementos de búsqueda simultáneos visualmente. (c) input box sin shadow modal → se mimetizaba con el contenido. Linear/Stripe/Notion cmd-K pattern: backdrop dim sólido, modal con shadow significativa, trigger del sidebar oculto/inactivo cuando abierto. */ #topbar-search-backdrop { background: rgba(15, 23, 42, 0.55) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } [data-theme="dark"] #topbar-search-backdrop { background: rgba(0, 0, 0, 0.65) !important; } #topbar-search-wrapper.search-open #topbar-search-input-box { box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.35), 0 8px 24px -8px rgba(0, 0, 0, 0.2) !important; border-radius: var(--radius-md) !important; z-index: var(--z-modal) !important; } [data-theme="light"] #topbar-search-wrapper.search-open #topbar-search-input-box { box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.25), 0 8px 24px -8px rgba(15, 23, 42, 0.12) !important; } body:has(#topbar-search-wrapper.search-open) #topbar-search-trigger { visibility: hidden !important; } /* SEARCH-FIX-2026-05-17 (modal positioning): cuando .search-open, el wrapper se promueve de inline-topbar a modal flotante centrado (Linear cmd-K pattern). Override inline `position:relative` con !important para que el modal flote a 18vh del top, 640px de ancho (sweet spot Linear=640, Stripe=620, Notion=640). */ #topbar-search-wrapper.search-open { position: fixed !important; top: 18vh !important; left: 50% !important; transform: translateX(-50%) !important; width: 640px !important; max-width: 92vw !important; margin: 0 !important; z-index: var(--z-modal) !important; } #topbar-search-wrapper.search-open #topbar-search-input-box { width: 100% !important; max-width: 100% !important; height: 56px !important; padding: 0 16px !important; background: var(--bg-elevated) !important; border-color: var(--border-strong) !important; } [data-theme="light"] #topbar-search-wrapper.search-open #topbar-search-input-box { background: #ffffff !important; } [data-theme="dark"] #topbar-search-wrapper.search-open #topbar-search-input-box { background: #1a1a1a !important; } #topbar-search-wrapper.search-open #topbar-search-input { font-size: 15px !important; padding: 12px 8px !important; } #topbar-search-wrapper.search-open #topbar-search-hint { font-size: 12px !important; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-surface); } [data-theme="light"] #topbar-search-dropdown { box-shadow: 0 16px 48px rgba(0,0,0,0.12); } [data-theme="light"] .cmd-avatar { background: var(--bg-surface); border: 1px solid var(--border-strong); } [data-theme="light"] .cmd-skeleton-item { background: var(--bg-hover); } @media (max-width: 1024px) { #topbar-search-input-box { width: 36px !important; overflow: hidden; cursor: pointer; transition: width var(--transition); } #topbar-search-input-box.cmd-tablet-expanded { position: absolute; top: 6px; left: 48px; right: 16px; width: auto !important; max-width: calc(100vw - 80px); z-index: var(--z-modal); } #topbar-search-input, #topbar-search-hint, #topbar-search-clear { display: none; } #topbar-search-input-box.cmd-tablet-expanded #topbar-search-input, #topbar-search-input-box.cmd-tablet-expanded #topbar-search-hint { display: flex; } #topbar-search-dropdown { width: calc(100vw - 32px); left: auto; right: 0; max-width: 480px; } } @media (max-width: 640px) { #topbar-search-dropdown { width: calc(100vw - 16px); right: -8px; } } /* ── FIN Command Center v2 ───────────────────────────────────── */ /* ── Tablas Admin (Premium) ── */ .table-wrap { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: visible; } .table-admin { width: 100%; border-collapse: collapse; } .table-th { padding: 12px 20px; text-align: left; font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); background: linear-gradient(to right, transparent, var(--bg-page)); } .table-td { padding: 12px 20px; font-size: var(--text-sm); border-bottom: 1px solid var(--divider); vertical-align: middle; transition: background var(--transition); } .table-admin tr:last-child .table-td { border-bottom: none; } .table-admin tr:hover .table-td { background: var(--bg-hover); } /* ── Pills & Slots ── */ .pill-btn { padding: 6px 12px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition), transform var(--transition); white-space: nowrap; } .pill-btn:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-hover); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .pill-btn.active { background: var(--text-primary); color: var(--bg-surface); border-color: var(--text-primary); } .pill-btn:disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--border); color: var(--text-muted); background: transparent; transform: none; box-shadow: none; } .slot-btn { padding: 6px 10px; border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition), transform var(--transition); } .slot-btn:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-hover); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .slot-btn.selected { background: var(--border-strong); color: var(--text-primary); border-color: var(--text-primary); } .slot-btn.occupied { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; background: transparent; transform: none; box-shadow: none; } /* ── Toggle Switches ── */ .toggle-switch { display: inline-block; width: 42px; height: 24px; border-radius: var(--radius-md); background: var(--border-strong); transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition), transform var(--transition); position: relative; cursor: pointer; box-shadow: var(--toggle-shadow); } input:checked + .toggle-switch { background: var(--accent); } .toggle-handle { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-surface); transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition), transform var(--transition); box-shadow: var(--toggle-dot-shadow); } input:checked + .toggle-switch .toggle-handle { transform: translateX(18px); } /* ─── Empty States Clínicos Universales (M-HC-EMPTY-01) ─── */ .empty-confirmed { font-size: 11px; color: var(--success); font-weight: 500; display: flex; align-items: center; gap: 4px; } .empty-undocumented { font-size: 11px; color: var(--text-tertiary); font-style: italic; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .empty-undocumented .btn-add-cta { font-size: 11px; color: var(--accent); background: none; border: none; cursor: pointer; padding: 0; font-style: normal; font-weight: 600; } .empty-undocumented .btn-add-cta:hover { text-decoration: underline; } /* --- Migrated from inbox.js --- */ /* Overlay */ #velandra-inbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(2px); z-index: var(--z-inbox-overlay); opacity: 0; pointer-events: none; transition: opacity var(--transition); } #velandra-inbox-overlay.visible { opacity: 1; pointer-events: auto; } /* Panel principal · hide vía transform (alineado con inbox.css canónico). Antes ocultaba por right:-400 y inbox.css (async) lo sobrescribía a right:0 + transform:translateX(108%) con transición → el panel saltaba on-screen y se deslizaba afuera en CADA carga de página. Mismo mecanismo = sin salto. */ #velandra-inbox-panel { position: fixed; top: 0; right: 0; width: 380px; height: 100vh; z-index: var(--z-inbox-panel); background: var(--bg-surface); border-left: 1px solid var(--border); box-shadow: -4px 0 32px rgba(0,0,0,0.18); display: flex; flex-direction: column; transform: translateX(108%); transition: transform var(--transition); } #velandra-inbox-panel.open { transform: translateX(0); } /* Header */ .inb-header { padding: 0 20px; height: 56px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .inb-header-left { display: flex; align-items: center; gap: 10px; } .inb-title { font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; } .inb-count { font-size: 11px; font-weight: 600; background: var(--danger); color: var(--text-on-accent); border-radius: var(--radius-md); padding: 4px 6px; min-width: 18px; text-align: center; display: none; } .inb-count.visible { display: inline-block; } .inb-header-actions { display: flex; align-items: center; gap: 4px; } .inb-btn-icon { background: transparent; border: none; cursor: pointer; color: var(--text-tertiary); border-radius: 6px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: background var(--transition), color var(--transition); } .inb-btn-icon:hover { background: var(--bg-hover); color: var(--text-primary); } .inb-btn-icon svg { width: 16px; height: 16px; } /* Tabs */ .inb-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 20px; gap: 0; flex-shrink: 0; } .inb-tab { font-size: 12px; font-weight: 600; color: var(--text-tertiary); padding: 10px 12px; cursor: pointer; border: none; background: transparent; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--transition), border-color var(--transition); } .inb-tab:hover { color: var(--text-secondary); } .inb-tab.active { color: var(--text-primary); border-bottom-color: var(--text-primary); } /* Body scrollable */ .inb-body { flex: 1; overflow-y: auto; padding: 12px 0; scroll-behavior: smooth; } .inb-body::-webkit-scrollbar { width: 4px; } .inb-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } /* Section labels + Mark All */ .inb-section-row { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 4px; margin-top: 16px; } .inb-section-row:first-child { margin-top: 0; } .inb-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); } .inb-mark-all { font-size: 11px; font-weight: 600; color: var(--text-tertiary); background: none; border: none; cursor: pointer; padding: 4px 6px; border-radius: 4px; transition: background var(--transition), color var(--transition); } .inb-mark-all:hover { background: var(--bg-hover); color: var(--text-secondary); } /* Temporal group divider */ .inb-time-group { padding: 6px 20px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-top: 4px; } /* Item */ .inb-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 20px; text-decoration: none; color: inherit; cursor: pointer; border-left: 3px solid transparent; transition: background var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition), max-height var(--transition); position: relative; max-height: 200px; overflow: hidden; } .inb-item:hover { background: var(--bg-hover); } .inb-item:hover .inb-done-btn { opacity: 1; } /* Animación de salida al marcar Done */ .inb-item--dismissing { opacity: 0; transform: translateX(60px); max-height: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; } /* Urgencia */ .inb-item--urgent { border-left-color: var(--warning); } .inb-item--danger { border-left-color: var(--danger); } .inb-item--info { border-left-color: var(--info); } .inb-item--success { border-left-color: var(--success); } /* Punto no leído */ .inb-unread-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--info); flex-shrink: 0; margin-top: 4px; } .inb-item--urgent .inb-unread-dot { background: var(--warning); } .inb-item--danger .inb-unread-dot { background: var(--danger); } /* Ícono tipo */ .inb-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .inb-icon--warning { background: var(--warning-subtle); color: var(--warning); } .inb-icon--danger { background: var(--danger-subtle); color: var(--danger); } .inb-icon--info { background: var(--info-subtle); color: var(--info); } .inb-icon--success { background: var(--success-subtle); color: var(--success); } .inb-icon--muted { background: var(--bg-elevated); color: var(--text-tertiary); } .inb-icon svg { width: 16px; height: 16px; } /* Contenido */ .inb-content { flex: 1; min-width: 0; } .inb-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .inb-patient { font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .inb-time { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; flex-shrink: 0; margin-top: 4px; cursor: help; } .inb-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; margin-bottom: 6px; } .inb-actions-row { display: flex; align-items: center; gap: 6px; } .inb-action { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; transition: background var(--transition), color var(--transition), border-color var(--transition); text-decoration: none; cursor: pointer; } .inb-action:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); } /* Botón Done (✓) por ítem */ .inb-done-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--success); background: var(--success-subtle); border: 1px solid transparent; border-radius: 6px; padding: 4px 8px; cursor: pointer; transition: background var(--transition), opacity var(--transition); opacity: 0; /* visible solo en hover del ítem */ } .inb-done-btn:hover { background: var(--success); color: var(--text-on-accent); } .inb-done-btn svg { width: 11px; height: 11px; } /* Empty state */ .inb-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 56px 32px; text-align: center; } .inb-empty svg { color: var(--text-muted); opacity: 0.5; } .inb-empty-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); } .inb-empty-sub { font-size: 12px; color: var(--text-tertiary); } /* Empty state por sección */ .inb-section-empty { padding: 10px 20px 4px; font-size: 12px; color: var(--text-muted); font-style: italic; } /* Footer — última actualización */ .inb-footer { border-top: 1px solid var(--border); padding: 8px 20px; font-size: 11px; color: var(--text-muted); text-align: center; flex-shrink: 0; } /* Sidebar trigger */ #inbox-main-trigger { margin-top: auto; } #inbox-main-trigger .nav-label { font-size: 12px; } /* Sprint 3 — Urgency icon: sidebar InBasket icon turns danger when há críticos */ #inbox-main-trigger.inb--urgent .nav-icon { color: var(--danger); transition: color var(--transition); } #inbox-main-trigger.inb--urgent .nav-label { color: var(--danger); } /* Bell topbar SVG override — reemplazamos la campana por bandeja */ #bell-btn svg.bell-icon-original { display: none !important; } #bell-btn svg.inb-tray-icon { display: flex; } /* Bell topbar badge semáforo urgencia */ #bell-btn .bell-badge-urgent { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 2px solid var(--bg-surface); display: none; } #bell-btn .bell-badge-urgent.visible { display: block; } /* Sprint 3 — Keyboard hint bar */ .inb-kbd-hint { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 6px 20px; border-top: 1px solid var(--border); flex-shrink: 0; } .inb-kbd-hint span { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; } .inb-kbd { font-size: 11px; font-weight: 600; background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border); border-radius: 4px; padding: 4px 4px; font-family: monospace; } /* Sprint 3 — item focused via keyboard */ .inb-item--focused { background: var(--bg-hover); outline: 2px solid var(--accent); outline-offset: -2px; } .inb-item--focused .inb-done-btn { opacity: 1; } /* Responsive */ @media (max-width: 640px) { #velandra-inbox-panel { width: 100vw; } .inb-kbd-hint { display: none; } } /* --- Migrated from feedback.js --- */ #fb-drawer-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.35); z-index: var(--z-max); opacity: 0; transition: opacity var(--transition); } #fb-drawer-overlay.open { display: block; opacity: 1; } #fb-drawer { position: fixed; top: 0; right: 0; width: 420px; max-width: 100%; height: 100vh; background: var(--bg-surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform var(--transition); z-index: var(--z-max); display: flex; flex-direction: column; font-family: var(--font-body); } #fb-drawer.open { transform: translateX(0); } .fb-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); } .fb-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0; } .fb-close-btn { background: transparent; border: 1px solid transparent; color: var(--text-secondary); cursor: pointer; width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; } .fb-close-btn:hover { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); } .fb-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; } .fb-field-group { display: flex; flex-direction: column; gap: 8px; } .fb-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.02em; } .fb-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .fb-chip { background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius-md); padding: 10px 12px; font-size: var(--text-sm); font-family: var(--font-body); cursor: pointer; text-align: left; display: flex; align-items: center; gap: 6px; transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition), transform var(--transition); } .fb-chip:hover { border-color: var(--text-secondary); } .fb-chip.selected { background: var(--text-primary); color: var(--bg-surface); border-color: var(--text-primary); } .fb-input, .fb-textarea { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-primary); border-radius: var(--radius-md); padding: 10px 12px; font-family: var(--font-body); font-size: var(--text-sm); transition: border-color var(--transition); outline: none; width: 100%; box-sizing: border-box; } .fb-input:focus, .fb-textarea:focus { border-color: var(--text-primary); box-shadow: none; } .fb-textarea { resize: vertical; min-height: 80px; } .fb-textarea.steps { min-height: 100px; } #fb-steps-wrapper { display: none; overflow: hidden; transition: height var(--transition); } #fb-steps-wrapper.show { display: flex; } .fb-file-upload { background: var(--bg-elevated); border: 1px dashed var(--border-strong); color: var(--text-secondary); border-radius: var(--radius-md); padding: 12px; text-align: center; cursor: pointer; font-size: var(--text-sm); display: flex; align-items: center; justify-content: center; gap: 6px; } .fb-file-upload:hover { border-color: var(--text-primary); color: var(--text-primary); } .fb-file-input { display: none; } .fb-checkbox-wrapper { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-primary); cursor: pointer; } #fb-logs-wrapper { display: none; } #fb-logs-wrapper.fb-logs-visible { display: flex; } .fb-footer { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; } .fb-footer-meta { font-size: var(--text-xs); color: var(--text-muted); display: flex; justify-content: space-between; } .fb-meta-url { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fb-footer-actions { display: flex; gap: 8px; justify-content: flex-end; } .fb-btn-cancel { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); padding: 8px 16px; border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-sm); cursor: pointer; transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition), transform var(--transition); } .fb-btn-cancel:hover { background: var(--bg-elevated); color: var(--text-primary); } .fb-btn-submit { background: var(--text-primary); color: var(--bg-surface); border: none; padding: 8px 16px; border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: filter var(--transition); display: flex; align-items: center; gap: 6px; } .fb-btn-submit:hover { filter: brightness(0.85); } .fb-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; } .fb-toast { position: fixed; bottom: 24px; left: 50%; z-index: var(--z-max); padding: 8px 16px; border-radius: 100px; background: var(--success); color: var(--text-on-accent); box-shadow: var(--shadow-md); font-family: var(--font-body); font-size: 13px; transform: translateX(-50%); } /* Util */ .hidden { display: none !important; } /* ── Kebab Menu Velandra (M-ATN-04) ─────────────────────────────── */ .velandra-kebab { position: fixed; z-index: var(--z-dropdown); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); min-width: 190px; padding: 4px 0; animation: cmdDropdownIn 120ms ease; } .kebab-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; background: none; border: none; cursor: pointer; font-size: var(--text-sm); color: var(--text-primary); text-align: left; transition: background var(--transition-fast), color var(--transition-fast); } .kebab-item:hover { background: var(--bg-hover); } .kebab-item.kebab-danger { color: var(--danger); } .kebab-item.kebab-danger:hover { background: var(--danger-subtle); color: var(--danger); } .kebab-icon, .kebab-icon svg { width: 14px; height: 14px; color: inherit; } .velandra-doctor-insights-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--card-padding-default); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-sm); } .velandra-doctor-insights-card--dashboard { margin-block-start: var(--space-2); } .velandra-doctor-insights-card__header { display: flex; flex-direction: column; gap: var(--space-1); } .velandra-doctor-insights-card__eyebrow, .velandra-doctor-insights-card__metric-label, .velandra-doctor-insights-card__meta { margin: 0; color: var(--text-secondary); font-size: var(--text-xs); } .velandra-doctor-insights-card__eyebrow, .velandra-doctor-insights-card__metric-label { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .velandra-doctor-insights-card__title { margin: 0; color: var(--text-primary); font-size: var(--text-lg); line-height: 1.25; } .velandra-doctor-insights-card__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); } .velandra-doctor-insights-card__metric { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--card-padding-compact); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); } .velandra-doctor-insights-card__metric-head { display: flex; justify-content: space-between; gap: var(--space-2); } .velandra-doctor-insights-card__metric-value { color: var(--text-primary); font-size: var(--text-xl); font-weight: 600; line-height: 1.1; } .velandra-doctor-insights-card__metric-hint, .velandra-doctor-insights-card__empty { color: var(--text-secondary); font-size: var(--text-sm); } .velandra-doctor-insights-card__sparkline { width: 100%; height: 2rem; color: var(--accent); } .velandra-doctor-insights-card__sparkline path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .velandra-doctor-insights-card__sparkline circle { fill: currentColor; } .velandra-doctor-insights-card__trend { align-self: flex-start; white-space: nowrap; border-radius: var(--radius-pill); padding: 0.125rem 0.5rem; background: var(--bg-card); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 600; } .velandra-doctor-insights-card__trend[data-tone='positive'] { color: var(--success); background: var(--success-subtle); } .velandra-doctor-insights-card__trend[data-tone='negative'] { color: var(--danger); background: var(--danger-subtle); } .velandra-doctor-insights-card__diagnoses { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-2); } .velandra-doctor-insights-card__chip { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.25rem 0.625rem; background: var(--bg-elevated); color: var(--text-secondary); font-size: var(--text-xs); } .velandra-doctor-insights-card__chip-code { color: var(--text-primary); font-weight: 600; } .velandra-doctor-insights-card__period { width: auto; min-width: 7rem; } /** * VelandraSkeletons.createStack({ label: 'Cargando resultados' }) * * API visual: * - velandra-skeleton--line: linea de texto * - velandra-skeleton--block: bloque rectangular * - velandra-skeleton--circle: avatar/icono circular * - velandra-skeleton--bar: barra de progreso * - velandra-skeleton--card / velandra-skeleton-card: composicion de tarjeta * - velandra-skeleton-stack / velandra-skeleton-row: composiciones densas */ @keyframes velandra-skeleton-shimmer { 0% { background-position: -120% 0; } 100% { background-position: 220% 0; } } .velandra-skeleton { display: block; inline-size: 100%; min-inline-size: var(--space-4, 1rem); min-block-size: var(--space-2, 0.5rem); border-radius: 8px; background: var(--bg-elevated); background-image: linear-gradient( 90deg, color-mix(in srgb, var(--text-tertiary) 5%, transparent) 0%, color-mix(in srgb, var(--text-tertiary) 17%, transparent) 45%, color-mix(in srgb, var(--text-tertiary) 5%, transparent) 90% ); background-size: 220% 100%; animation: velandra-skeleton-shimmer 1200ms linear infinite; } .velandra-skeleton--line { block-size: 0.75rem; } .velandra-skeleton--block { block-size: 3.5rem; } .velandra-skeleton--circle { inline-size: 2rem; block-size: 2rem; min-inline-size: 2rem; border-radius: var(--radius-pill, 999px); } .velandra-skeleton--bar { block-size: 0.5rem; border-radius: var(--radius-pill, 999px); } .velandra-skeleton--card, .velandra-skeleton-card { display: grid; gap: var(--space-3, 0.75rem); inline-size: 100%; padding: var(--card-padding-default, var(--space-4, 1rem)); border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--bg-elevated, var(--bg-surface)) 92%, transparent); background-image: none; animation: none; } .velandra-skeleton-stack { display: grid; gap: var(--space-2, 0.5rem); inline-size: 100%; min-width: 0; } .velandra-skeleton-stack--compact { gap: 0.375rem; } .velandra-skeleton-row { display: flex; align-items: center; gap: var(--space-3, 0.75rem); min-width: 0; } .velandra-skeleton--w-full { inline-size: 100%; } .velandra-skeleton--w-85 { inline-size: 85%; } .velandra-skeleton--w-80 { inline-size: 80%; } .velandra-skeleton--w-70 { inline-size: 70%; } .velandra-skeleton--w-65 { inline-size: 65%; } .velandra-skeleton--w-55 { inline-size: 55%; } .velandra-skeleton--w-45 { inline-size: 45%; } .velandra-skeleton--w-35 { inline-size: 35%; } /** * VelandraEmptyStates.create('labs_empty', { compact: true }) * * API visual: * - key: una de las claves de `window.VelandraEmptyStates.keys` * - compact: reduce padding para sidebars y dropdowns * - inline: transforma el estado en chip textual para listas densas * - cta: { label, action, target } para una accion contextual opcional */ .velandra-empty-state { display: flex; align-items: flex-start; gap: var(--space-3, 12px); width: 100%; min-width: 0; padding: var(--space-4, 16px); border: 1px dashed var(--border); border-radius: 8px; background: color-mix(in srgb, var(--bg-elevated, var(--bg-surface)) 82%, transparent); color: var(--text-secondary); } .velandra-empty-state--compact { padding: var(--space-3, 12px); gap: var(--space-2, 8px); } .velandra-empty-state--inline { display: inline-flex; align-items: center; width: auto; padding: 0; border: 0; background: transparent; } .velandra-empty-state__illustration { flex: 0 0 auto; width: 2.35rem; height: 2.35rem; padding: 0.45rem; border-radius: 8px; background: var(--bg-surface); color: var(--accent); box-shadow: inset 0 0 0 1px var(--border); } .velandra-empty-state__copy { display: grid; min-width: 0; gap: 0.35rem; } .velandra-empty-state__title { color: var(--text-primary); font-size: var(--text-sm); font-weight: 750; line-height: 1.25; } .velandra-empty-state__body { margin: 0; color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.45; } .velandra-empty-state__cta { justify-self: flex-start; display: inline-flex; align-items: center; min-height: 2rem; padding: 0.35rem 0.65rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface); color: var(--accent-light); font-size: var(--text-xs); font-weight: 750; text-decoration: none; cursor: pointer; } .velandra-empty-state__cta:hover { background: var(--bg-hover); color: var(--accent-light); } .velandra-empty-state--inline .velandra-empty-state__copy { display: inline-flex; align-items: center; gap: 0.35rem; } .velandra-empty-state--inline .velandra-empty-state__title { color: var(--text-tertiary); font-size: var(--text-xs); font-weight: 650; } .velandra-empty-state--inline .velandra-empty-state__body { display: none; } .photo-gallery > .velandra-empty-state, .consultation-typeahead-dropdown .velandra-empty-state, .recent-encounters-list .velandra-empty-state, #copilot-chat-thread > .velandra-empty-state { margin: var(--space-2, 8px) 0; } @media (prefers-reduced-motion: reduce) { .velandra-skeleton, .skeleton, .shimmer, .copilot-shimmer-row, .encounter-version-history-skeleton { animation: none !important; background-image: none; } .velandra-empty-state, .velandra-empty-state__cta { transition: none; } } @media (max-width: 640px) { .velandra-doctor-insights-card__grid { grid-template-columns: 1fr; } .velandra-doctor-insights-card__metric-head { align-items: flex-start; } .velandra-empty-state { align-items: stretch; flex-direction: column; } .velandra-empty-state__cta { width: 100%; justify-content: center; } } /* ───────────────────────────────────────────────────────────────── * .dev-preview-banner — WIP "VISTA PREVIA" pill banner * QA-10 baseline cleanup 2026-05-15: extraído de inline styles * en consultation.html, patients.html, settings.html * ─────────────────────────────────────────────────────────────── */ .dev-preview-banner { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: var(--z-max); background: var(--accent); color: var(--text-on-accent); padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; font-family: var(--font-sans); box-shadow: 0 2px 8px var(--shadow-strong, rgba(0, 0, 0, 0.18)); pointer-events: none; letter-spacing: 0.02em; } /* ───────────────────────────────────────────────────────────────── * QA-12 utility classes — DEUDA-LINT-1200-WARNINGS-01 * 2026-05-16: extracción de patrones repetidos en style= de template * literals JS para satisfacer regla aurora/no-template-string-style * (solo `display:` permitido inline; resto via class). * ─────────────────────────────────────────────────────────────── */ .u-txt-tertiary { color: var(--text-tertiary); } .u-txt-secondary { color: var(--text-secondary); } .u-txt-muted { color: var(--text-muted); } .u-txt-primary { color: var(--text-primary); } .u-text-xs { font-size: var(--text-xs); } .u-text-micro { font-size: var(--text-micro); } .u-fw-bold { font-weight: 600; } .u-fw-semibold { font-weight: 600; } .u-text-capitalize { text-transform: capitalize; } .u-flex-col-center { display: flex; flex-direction: column; align-items: center; } .u-flex-row-center { display: flex; align-items: center; } .u-flex-row-center-4 { display: flex; align-items: center; gap: 4px; } .u-flex-row-center-8 { display: flex; align-items: center; gap: 8px; } .u-empty-state-center { padding: 40px; text-align: center; color: var(--text-muted); } .u-txt-xs-tertiary { font-size: var(--text-xs); color: var(--text-tertiary); } .u-link-inherit { color: inherit; text-decoration: none; } /* Atomic spacing utilities (Tailwind-style) */ .u-mt-1 { margin-top: 4px; } .u-mt-2 { margin-top: 4px; } .u-mt-4 { margin-top: 4px; } .u-mt-8 { margin-top: 8px; } .u-mt-16 { margin-top: 1rem; } .u-mb-4 { margin-bottom: 4px; } .u-mb-8 { margin-bottom: 8px; } .u-mb-12 { margin-bottom: 12px; } .u-ml-6 { margin-left: 6px; } .u-cursor-pointer { cursor: pointer; } .u-text-right { text-align: right; } .u-inline-flex { display: inline-flex; } /* Specific compound classes for repeated patterns */ .u-text-24-bold { font-size: 24px; font-weight: 600; } .u-text-12-bold-primary { font-size: 12px; font-weight: 600; color: var(--text-primary); } .u-text-11-secondary { font-size: 11px; color: var(--text-secondary); font-weight: 400; } .u-text-10-tertiary { font-size: 11px; font-weight: 400; color: var(--text-tertiary); } .u-text-xs-secondary { color: var(--text-secondary); font-size: var(--text-xs); } .u-text-micro-muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-micro); color: var(--text-muted); margin-top: 4px; } .u-text-sm-warning { font-size: var(--text-sm); font-weight: 600; color: var(--warning); } .u-text-primary-medium { color: var(--text-primary); font-weight: 500; } .u-text-primary-semibold { font-weight: 600; color: var(--text-primary); } .u-text-accent-bold { font-weight: 600; font-size: 12px; color: var(--accent); } .u-flex-col-center-text { display: flex; flex-direction: column; align-items: center; text-align: center; } .u-row-justify-between { display: flex; justify-content: space-between; align-items: center; } .u-row-justify-between-bordered { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--border); } .u-empty-overlay-watermark { position: absolute; top: 40px; left: 0; width: 100%; text-align: center; color: var(--text-muted); font-size: 11px; opacity: 0.5; pointer-events: none; } .u-badge-compact-secondary { background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary); font-size: 0.6875rem; text-transform: capitalize; } .u-min-h-500-center { min-height: 500px; display: flex; align-items: center; justify-content: center; } .u-pad-8-12-12 { padding: 8px 12px; font-size: 12px; } /* COMMIT 26/100 · SHELL-DS-02-WIRE-2026-05-15 · sr-only utility canónica. WCAG 2.1.1 A · WebAIM technique para esconder visualmente preservando semántica para screen readers. Antes definida 3 veces (patients.css, consultation.css, consultation-editor.css). Ahora cross-page. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }