para mobile. */ body { background: var(--bg); padding-left: var(--sidebar-w); } /* Controles canónicos — baseline real de PhosFlow (styles.css:832-853): height 34px, border 1.5px, radius var(--radius-sm), font-size 12.5px, focus ring con --accent. Una app puede ampliar un control por necesidad funcional, pero no redefinir el tamaño base del sistema. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea, .form-control { height: 34px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 12.5px; color: var(--ink); background: var(--panel); transition: border-color .15s, box-shadow .15s; } textarea { height: auto; min-height: 34px; resize: vertical; } input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus, .form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } /* Colapso en desktop = rail de iconos (no se oculta). Ancho del rail: */ :root { --sidebar-w-rail: 64px; } body.sidebar-collapsed { padding-left: var(--sidebar-w-rail); } /* ── Sidebar ─────────────────────────────────────── */ .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--sb-bg); display: flex; flex-direction: column; z-index: 30; transform: translateX(0); transition: transform .25s cubic-bezier(.4,0,.2,1), background .25s ease; border-right: 1px solid var(--sb-line); } /* Toggle circular en el borde del sidebar: "<" contrae, ">" expande. Vive fuera del

(el transform del sidebar rompería position:fixed). */ .sidebar-toggle { position: fixed; top: 22px; left: calc(var(--sidebar-w) - 10px); width: 20px; height: 20px; padding: 0; border: 1.5px solid var(--muted); border-radius: 50%; background: var(--panel); color: var(--ink); cursor: pointer; display: grid; place-items: center; z-index: 31; box-shadow: var(--shadow-sm); transition: left .25s cubic-bezier(.4,0,.2,1), background .15s; } .sidebar-toggle:hover { background: var(--surface); } .sidebar-toggle [data-lucide] { width: 12px; height: 12px; stroke-width: 2.5; display: block; transition: transform .25s; } body.sidebar-collapsed .sidebar-toggle { left: calc(var(--sidebar-w-rail) - 10px); } body.sidebar-collapsed .sidebar-toggle [data-lucide] { transform: rotate(180deg); } /* Rail de iconos (solo desktop; en mobile el colapso sigue siendo drawer) */ @media (min-width: 901px) { body.sidebar-collapsed .sidebar { width: var(--sidebar-w-rail); } body.sidebar-collapsed .brand-text, body.sidebar-collapsed .nav-item span:not(.nav-count), body.sidebar-collapsed .nav-count, body.sidebar-collapsed .help-link span, body.sidebar-collapsed .user-info { display: none; } body.sidebar-collapsed .sidebar-brand { justify-content: center; padding-left: 8px; padding-right: 8px; } body.sidebar-collapsed .nav-item, body.sidebar-collapsed .help-link { justify-content: center; padding-left: 0; padding-right: 0; } body.sidebar-collapsed .help-link { margin-left: 10px; margin-right: 10px; } /* Los labels de grupo se vuelven separadores */ body.sidebar-collapsed .nav-group-label { font-size: 0; padding: 8px 12px 4px; } body.sidebar-collapsed .nav-group-label::after { content: ""; display: block; height: 1px; background: var(--sb-line); } body.sidebar-collapsed .sidebar-footer { grid-template-columns: 1fr; justify-items: center; } body.sidebar-collapsed .user-chip { flex: 0 0 auto; } } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--sb-line); } .brand-mark { flex: 0 0 36px; width: 36px; height: 36px; border-radius: var(--radius-panel); background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 13px; letter-spacing: .04em; display: grid; place-items: center; box-shadow: var(--shadow-xs); text-decoration: none; } .brand-text { display: flex; flex-direction: column; gap: 2px; } .brand-name { color: var(--sb-text); font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: -.01em; } .brand-name strong { font-weight: 700; } .brand-tagline { color: var(--sb-text-dim); font-size: 11px; line-height: 14px; letter-spacing: .03em; text-transform: uppercase; } .sidebar-nav { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; } .nav-group-label { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--sb-text-dim); user-select: none; } .nav-group-label:first-child { padding-top: 2px; } .nav-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: none; border-radius: var(--radius-panel); background: transparent; color: var(--sb-text); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-align: left; text-decoration: none; transition: background .15s, color .15s; } .nav-item [data-lucide] { width: 17px; height: 17px; stroke-width: 2; flex: 0 0 auto; opacity: .85; transition: opacity .15s; } .nav-item span:not(.nav-count) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-item:hover { background: var(--sb-hover); color: var(--sb-active-text); } .nav-item:hover [data-lucide] { opacity: 1; } .nav-item.active { background: var(--sb-active-bg); color: var(--sb-active-text); font-weight: 600; } .nav-item.active [data-lucide] { opacity: 1; } .nav-count { flex: 0 0 auto; margin-left: auto; font-size: 12px; font-weight: 500; color: var(--sb-text-dim); font-variant-numeric: tabular-nums; } .nav-item.active .nav-count { color: var(--sb-active-text); } .sidebar-footer { padding: 8px 8px; border-top: 1px solid var(--sb-line); display: grid; grid-template-columns: 1fr auto; gap: 6px; } .help-link { margin: 2px 10px 6px; display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 7px 10px; border-radius: var(--radius-panel); color: var(--sb-text); text-decoration: none; font-size: 14px; font-weight: 500; } .help-link:hover { background: var(--sb-hover); color: var(--sb-active-text); } .help-link [data-lucide] { width: 17px; height: 17px; opacity: .85; } .user-chip { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; color: inherit; text-decoration: none; } .user-avatar { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--sb-avatar-bg); color: var(--sb-avatar-color); font-size: 12px; font-weight: 700; display: grid; place-items: center; } .user-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .user-email, .user-info strong { color: var(--sb-text); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role, .user-info small { color: var(--sb-text-dim); font-size: 11px; text-transform: capitalize; } .btn-sidebar-logout { flex: 0 0 30px; width: 30px; height: 30px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--sb-text-dim); cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s; } .btn-sidebar-logout:hover { background: rgba(220, 38, 38, .18); color: #ff6b6b; } .btn-sidebar-logout [data-lucide] { width: 15px; height: 15px; } /* Sidebar overlay (mobile) */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.50); z-index: 29; opacity: 0; transition: opacity .25s; } body.sidebar-open .sidebar-overlay { display: block; opacity: 1; } /* ── Topbar ─────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); } .topbar-start { display: flex; align-items: center; gap: 10px; min-width: 0; } .topbar-end { display: flex; align-items: center; gap: 6px; } /* ── Buscador del topbar (abre el command palette) ─────────── */ .cmdk-trigger { display: inline-flex; align-items: center; gap: 8px; width: 260px; height: 34px; padding: 0 10px; margin-left: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s; } .cmdk-trigger:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--surface); } .cmdk-trigger [data-lucide] { width: 15px; height: 15px; flex: 0 0 auto; } .cmdk-trigger span { flex: 1; text-align: left; } .cmdk-trigger kbd { font: inherit; font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); } @media (max-width: 900px) { .cmdk-trigger span, .cmdk-trigger kbd { display: none; } .cmdk-trigger { width: auto; } } .cmdk-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(0, 0, 0, .5); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; } .cmdk-overlay.hidden { display: none; } .cmdk-panel { width: min(560px, 92vw); max-height: 60vh; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-modal); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); display: flex; flex-direction: column; overflow: hidden; } .cmdk-input-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); } .cmdk-input-row [data-lucide] { width: 16px; height: 16px; color: var(--muted); } .cmdk-input-row input { flex: 1; height: auto; border: none; padding: 0; background: transparent; font-size: 14px; } .cmdk-input-row input:focus { outline: none; } .cmdk-list { overflow-y: auto; padding: 6px; } .cmdk-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .cmdk-item [data-lucide] { width: 15px; height: 15px; color: var(--muted); flex: 0 0 auto; } .cmdk-item.active { background: var(--surface); } .cmdk-item.active [data-lucide] { color: var(--accent); } .breadcrumb { margin-left: 12px; font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; } /* Íconos del topbar (tema, notificaciones): sin caja de botón, solo el ícono. Especificidad igual a la de :root[data-theme="dark"] body .theme-toggle (theme-dark.css) para poder ganarle por orden de carga. */ .topbar .theme-toggle, .topbar .notif-bell, .topbar .notif-bell > .btn-icon, :root[data-theme="dark"] .topbar .theme-toggle { background: transparent; border-color: transparent; box-shadow: none; } .topbar .theme-toggle:hover, .topbar .notif-bell:hover, .topbar .notif-bell > .btn-icon:hover, :root[data-theme="dark"] .topbar .theme-toggle:hover { background: transparent; color: var(--accent); } .topbar .theme-toggle [data-lucide], .topbar .notif-bell [data-lucide] { width: 18px; height: 18px; } /* ── Buttons ─────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 16px; height: 36px; border: 1px solid transparent; border-radius: var(--radius-sm); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s, transform .07s; white-space: nowrap; text-decoration: none; } .btn:active { transform: scale(.98); } .btn [data-lucide] { width: 15px; height: 15px; stroke-width: 2.2; flex: 0 0 auto; } .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 1px 2px rgba(24,24,27,.18), 0 1px 0 rgba(255,255,255,.08) inset; } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: 0 2px 8px rgba(24,24,27,.22); } .btn-secondary { background: var(--panel); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-xs); } .btn-secondary:hover { background: #f4f6f9; } .btn-ghost { background: transparent; color: var(--muted); border-color: var(--line); } .btn-ghost:hover { background: var(--bg); color: var(--ink); } .btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; } .btn-full { width: 100%; } .btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } .btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); } .btn-danger:hover { background: #b91c1c; } .btn-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); border: 1px solid var(--line); cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s; } .btn-icon:hover { background: var(--surface); color: var(--accent); } .btn-icon [data-lucide] { width: 15px; height: 15px; } .theme-toggle { width: 36px; height: 36px; } @media (max-width: 900px) { body, body.sidebar-collapsed { padding-left: 0; } .sidebar, body.sidebar-collapsed .sidebar { width: var(--sidebar-w); transform: translateX(calc(-1 * var(--sidebar-w))); } body.sidebar-open .sidebar { transform: translateX(0); } /* El mismo toggle abre/cierra el drawer: pegado al borde izquierdo cuando está cerrado */ .sidebar-toggle, body.sidebar-collapsed .sidebar-toggle { top: 17px; left: 10px; } body.sidebar-open .sidebar-toggle { left: calc(var(--sidebar-w) - 10px); } .sidebar-toggle [data-lucide] { transform: rotate(180deg); } body.sidebar-open .sidebar-toggle [data-lucide] { transform: none; } .topbar { padding-left: 40px; } } /* ── CRUD components ────────────────────────────────── Patrones de CRUD compartidos por toda la suite (referencia: PhosFlow "procesos"). Selectores de componente que antes vivían solo en el css local de PhosFlow. Las apps siguen definiendo sus propios .data-table / .form-card / .form-actions base; acá solo lo que faltaba uniformar: acciones de fila, chips de valor, headers de form-card y grids de formulario. */ /* Acciones de fila (iconos) */ .tbl-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; } .tbl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; } .tbl-btn:hover { background: var(--surface); color: var(--ink); } .tbl-btn.danger:hover { background: var(--danger-dim); color: var(--danger); border-color: #fecdd3; } .tbl-btn.primary { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-dim); } .tbl-btn.primary:hover { background: var(--accent); color: var(--accent-ink); } .tbl-btn.success { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .tbl-btn.success:hover { background: var(--accent-hover); } .tbl-btn.warning { background: var(--surface); color: var(--ink); border-color: var(--ink); } .tbl-btn.warning:hover { background: var(--accent-dim); } .tbl-btn[disabled] { opacity: .4; pointer-events: none; } .tbl-btn [data-lucide] { width: 14px; height: 14px; } /* Badges de estado en grilla */ .tbl-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; } .tbl-badge.ok { background: var(--accent-dim); color: var(--accent); } .tbl-badge.danger { background: var(--danger-dim); color: var(--danger); } .tbl-badge.neutral { background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); } /* Valor en celda */ .op-code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink); } .op-chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; background: var(--accent-dim); color: var(--accent); } .op-muted { color: var(--muted); font-size: 12px; line-height: 1.4; } .empty-cell { text-align: center; color: var(--muted); padding: 22px 12px; font-size: 12.5px; } /* Formulario en grilla (dentro de .form-card colapsable) */ .field-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 9px; } .field-group label { font-size: 12px; font-weight: 600; color: var(--ink); } .field-group--wide { grid-column: 1 / -1; } .req { color: var(--accent); } .form-card-header { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--surface); } .form-card-header h3 { font-size: 13.5px; font-weight: 700; color: var(--ink); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px; } /* Scoped: sólo afecta a .form-actions cuando vive dentro de un .form-grid */ .form-grid .form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 6px; margin-top: 2px; padding-top: 9px; border-top: 1px solid var(--line); } /* Contenedor de tabla con borde propio (alterna a .archivos-table-wrap) */ .data-section { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs); overflow: hidden; } /* Select con flecha (utility: opt-in con class="select-input") */ .select-input { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364707d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } /* ── Login de suite ────────────────────────────────── Pantalla de login uniforme para toda la suite. El color lo pone el theme-accent.css de cada producto: mismo layout, acento propio. Markup:

con .login-brand (brand-mark + nombre) arriba del form. */ .login-fallback { position: fixed; inset: 0; z-index: 700; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(600px 420px at 12% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(700px 520px at 92% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), var(--bg); } .login-fallback[hidden] { display: none; } .login-fallback-card { position: relative; width: min(384px, 100%); padding: 32px 30px 26px; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: var(--radius-modal); box-shadow: 0 24px 60px -18px color-mix(in srgb, var(--accent) 35%, rgba(0,0,0,.35)), var(--shadow); animation: login-card-in .45s cubic-bezier(.22,1,.36,1) both; } .login-fallback-card::before { content: ""; position: absolute; inset: -1px -1px auto -1px; height: 3px; border-radius: var(--radius-modal) var(--radius-modal) 0 0; background: linear-gradient(90deg, transparent, var(--accent), transparent); } @keyframes login-card-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } .login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; } .login-brand .brand-mark { box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 60%, transparent); } .login-brand .brand-name { color: var(--ink); font-size: 17px; } .login-brand .brand-tagline { color: var(--muted); } .login-fallback-card h1 { margin: 0 0 2px; font-size: 18px; letter-spacing: -.01em; } .login-fallback-card .login-sub { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.5; } .login-fallback-card form { display: flex; flex-direction: column; gap: 13px; } .login-fallback-card label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; } .login-fallback-card input { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; transition: border-color .15s, box-shadow .15s; } .login-fallback-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .login-fallback-card button[type="submit"] { margin-top: 4px; height: 40px; border: none; border-radius: var(--radius-panel); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff), var(--accent)); color: var(--accent-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 70%, transparent); transition: filter .15s, transform .07s, box-shadow .15s; } .login-fallback-card button[type="submit"]:hover { filter: brightness(1.06); box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--accent) 80%, transparent); } .login-fallback-card button[type="submit"]:active { transform: scale(.985); } .login-fallback-error { color: var(--danger, #dc2626); font-size: 13px; min-height: 1em; margin: 0 0 8px; } .login-fallback-hint { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; } .login-fallback-hint a { color: var(--accent); font-weight: 600; text-decoration: none; } .login-fallback-hint a:hover { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .login-fallback-card { animation: none; } } /* Loading / Actualizar compartido. */ @keyframes ui-spin { to { transform: rotate(360deg); } } .tbl-btn.is-loading svg, .btn.is-loading svg { animation: ui-spin .65s linear infinite; } .spinner-xs { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: ui-spin .65s linear infinite; vertical-align: middle; } .tbl-btn.is-loading, .btn.is-loading { opacity: .6; pointer-events: none; } .panel-loading-bar { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 200; display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--surface2); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: 0 4px 16px rgba(0,0,0,.18); pointer-events: none; font-size: 13px; color: var(--text2); white-space: nowrap; } .panel-loading-gear { font-size: 16px; display: inline-block; animation: gear-spin 1.4s linear infinite; line-height: 1; } @keyframes gear-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── Skeleton (carga inicial de pantalla/panel sin contenido previo) ── Uso: renderSkeleton(el, { lines, title }) en phos-loading.js rellena `el` con este markup mientras espera la primera respuesta real (ej. dashboard con fetches en cascada). Portado desde el patrón "panel/modal que carga" de PhosFlow Studio (fase 100) a estándar de suite. */ .phos-skeleton-block { display: flex; flex-direction: column; gap: 10px; } .phos-skeleton { border-radius: 6px; background: linear-gradient( 90deg, var(--surface2) 25%, var(--surface) 50%, var(--surface2) 75% ); background-size: 200% 100%; animation: phos-skeleton-shimmer 1.4s ease-in-out infinite; } .phos-skeleton-line { height: 14px; } .phos-skeleton-line:nth-child(3n+1) { width: 92%; } .phos-skeleton-line:nth-child(3n+2) { width: 78%; } .phos-skeleton-line:nth-child(3n) { width: 60%; } .phos-skeleton-title { height: 18px; width: 45%; margin-bottom: 4px; } @keyframes phos-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .phos-skeleton { animation: none; background: var(--surface2); } } /* ── Toasts + confirm/prompt modal (reemplazan toasts propios y confirm()/alert() nativos) ── Portado desde PhosFlow (js/toast.js + js/modal.js) a estándar de suite: phos-toast.js. */ .toast-container { position: fixed; right: 18px; bottom: 18px; z-index: 1100; display: flex; width: min(380px, calc(100vw - 32px)); flex-direction: column; gap: 10px; pointer-events: none; } .toast-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) 28px; gap: 10px; align-items: start; min-height: 48px; padding: 12px 10px 12px 13px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); background: color-mix(in srgb, var(--panel) 94%, white); color: var(--ink); box-shadow: var(--shadow-lg); pointer-events: auto; animation: toast-in .18s ease-out; } :root[data-theme="dark"] .toast-item { background: color-mix(in srgb, var(--panel) 92%, black); } .toast-item--closing { animation: toast-out .18s ease-in forwards; } .toast-item--success { border-left-color: var(--success); } .toast-item--warning { border-left-color: #d69e2e; } .toast-item--error { border-left-color: var(--danger); } .toast-icon { width: 19px; height: 19px; margin-top: 1px; color: var(--accent); } .toast-item--success .toast-icon { color: var(--success); } .toast-item--warning .toast-icon { color: #b7791f; } .toast-item--error .toast-icon { color: var(--danger); } .toast-message { margin: 0; font-size: 13px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; } .toast-close { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; } .toast-close:hover { background: var(--surface); color: var(--ink); } .toast-close svg { width: 16px; height: 16px; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } } @media (max-width: 640px) { .toast-container { right: 12px; bottom: 12px; width: calc(100vw - 24px); } } @media (prefers-reduced-motion: reduce) { .toast-item, .toast-item--closing { animation: none; } } .confirm-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 1200; opacity: 0; transition: opacity .2s ease; } .confirm-modal-overlay.visible { opacity: 1; } .confirm-modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; max-width: 400px; width: 90%; box-shadow: var(--shadow-lg); transform: scale(.94) translateY(8px); transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .2s ease; opacity: 0; } .confirm-modal-box.visible { transform: scale(1) translateY(0); opacity: 1; } .confirm-modal-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .confirm-modal-header [data-lucide], .confirm-modal-header svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--accent2); } .confirm-modal-header h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); } .confirm-modal-box p { color: var(--text2); font-size: 13px; line-height: 1.55; margin-bottom: 20px; } .confirm-modal-label { display: block; font-size: 12px; color: var(--text2); margin-bottom: 6px; } .confirm-modal-input { width: 100%; margin-bottom: 20px; } .confirm-modal-actions { display: flex; gap: 8px; justify-content: flex-end; } .confirm-modal-actions .btn { padding: 6px 18px; font-size: 13px; height: 36px; } @media (prefers-reduced-motion: reduce) { .confirm-modal-overlay, .confirm-modal-box { transition: none; } } /* Fase 73: banner de "hay una actualización disponible" (version-check.js). No bloquea la UI: barra fija en el borde inferior, informativa, con botón opcional. */ .phos-update-banner { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 700; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); font-size: 13px; color: var(--ink); } .phos-update-banner button { padding: 4px 12px; border: none; border-radius: var(--radius-sm); background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; } /* Suite: ayuda, centro operativo, historiales y notificaciones. */ .help-link{margin:2px 10px 6px;display:flex;align-items:center;gap:10px;min-height:32px;padding:7px 10px;border-radius: var(--radius-panel);color:var(--sb-text);text-decoration:none;font-size:13px;font-weight:500}.help-link:hover{background:var(--sb-hover);color:var(--sb-active-text)}.help-link svg{width:17px;height:17px}.notif-bell{position:relative}.notif-badge{position:absolute;right:-3px;top:-4px;min-width:16px;height:16px;padding:0 4px;border-radius: var(--radius-panel);background:#ef4444;color:#fff;font-size:10px;line-height:16px}.ops-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}.ops-metric{min-width:0;padding:10px 14px 9px;border:1px solid var(--line);border-top: 1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow-sm)}.ops-metric--blue{border-top-color:#3b82f6}.ops-metric--red{border-top-color:#ef4444}.ops-metric--purple{border-top-color:#8b5cf6}.ops-metric--amber{border-top-color:#f59e0b}.ops-metric-head{display:flex;align-items:center;gap:6px;margin-bottom:6px}.ops-metric-head svg{width:15px;height:15px}.ops-metric-head span,.ops-metric small{display:block;color:var(--muted);font-size:11px}.ops-metric-head span{font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ops-metric strong{display:block;margin:0 0 2px;font-size:26px;line-height:1;font-weight:800}.notif-overlay{position:fixed;inset:0;z-index:599;background:rgba(0,0,0,.25)}.notif-drawer{position:fixed;z-index:600;right:0;top:0;width:min(420px,100%);height:100vh;padding:18px;background:var(--panel);border-left:1px solid var(--line);box-shadow:var(--shadow-lg)}.notif-drawer-header{display:flex;align-items:center;justify-content:space-between}.notif-drawer-header h3{display:flex;gap:8px;align-items:center}.notif-list{display:grid;gap:8px;margin-top:16px} /* V2: superficies precisas, controles compactos y rail operativo. */ body { transition-duration: .18s; } body, button, input, select, textarea { font-family: var(--font-ui); } h1, h2, h3, .breadcrumb, .panel-title h2, .page-header h1, .studio-title { font-family: var(--font-display); letter-spacing: -.015em; } code, pre, .mono, .var-nombre, .var-valor { font-family: var(--font-mono); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sidebar { width: var(--sidebar-w); } .sidebar-brand { min-height: var(--topbar-h); padding: 10px 12px; } .brand-mark { border-radius: var(--radius-control); box-shadow: none; } .sidebar-toggle { border-radius: var(--radius-control); width: 24px; height: 24px; top: 18px; left: calc(var(--sidebar-w) - 12px); box-shadow: var(--shadow-xs); } .nav-item, .help-link { min-height: 32px; border-radius: var(--radius-control); } .nav-item { padding: 6px 9px; font-size: 13px; } .nav-group-label { font-size: 10px; letter-spacing: .08em; } .topbar { height: var(--topbar-h); background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0 16px; } .btn { height: var(--control-h); border-radius: var(--radius-control); box-shadow: none; } .btn-sm, .btn-icon { height: var(--control-h-compact); min-height: var(--control-h-compact); border-radius: var(--radius-control); } .btn-icon { width: var(--control-h-compact); } .btn-primary { box-shadow: none; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea, .form-control { height: var(--control-h); border-width: 1px; border-radius: var(--radius-control); } .data-panel, .ops-metric, .form-card, .modal, .drawer, .cmdk-panel, .notif-drawer { border-radius: var(--radius-panel); box-shadow: none; } .ops-metrics { gap: 12px; } .ops-metric { padding: 12px; border-top-width: 2px; } .ops-metric strong { font-family: var(--font-display); font-size: 30px; } .ops-metric-head span { font-size: 10px; } .cmdk-trigger { height: var(--control-h); border-radius: var(--radius-control); } .cmdk-panel { border-radius: var(--radius-modal); } .panel-loading-bar, .phos-update-banner { border-radius: var(--radius-modal); } @media (max-width: 900px) { .topbar { min-height: var(--topbar-h); } } /* ── Cabecera de página: idéntica en toda la suite ────────────────────────── El contenedor de cualquier pantalla es .page-shell (ancho completo del área de contenido, mismo aire lateral en todos los productos). El encabezado cierra con una línea que separa del contenido. El contador de registros vive SOLO en el pie de la grilla: el label bajo el título se oculta acá para no duplicar el dato en cada producto. */ /* El área de contenido no pone aire lateral: lo pone .page-shell (o el .panel). Si ambos lo ponen, el margen queda al doble — que es lo que pasaba en PhosSigna. */ .main-content { min-height: calc(100vh - var(--topbar-h)); } .page-shell { padding: 20px 24px 32px; } /* Mismo aire lateral en toda la suite, use el producto .page-shell (PhosCore, PhosScribe) o cuelgue el contenido directo del panel (PhosFlow, PhosSigna). Sin esto, cada app tenía su propio margen entre el menú y la grilla. */ .panel:not(:has(> .page-shell)) { padding: 20px 24px 32px; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .page-header h1 { margin: 0 0 2px; font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; } .page-header p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 13px; } .panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .panel-title-group { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .panel-title { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); } .panel-meta { display: none; } .panel-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ── Fila del centro de notificaciones ────────────────────────────────────── Cada producto genera la lista con su propio JS y quedaron dos convenciones vivas (.history-card en PhosCore/Signa/Insight/Echo/Monitor, .notif-item en PhosFlow). Ambas se definen acá con el MISMO aspecto: así el drawer se ve idéntico en toda la suite sin tener que reescribir cinco archivos JS. Al unificar el render, dejar solo .notif-item. */ .history-list, .notif-list { display: grid; gap: 6px; } .history-card, .notif-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--panel); font-size: 13px; } .history-card > small:first-child, .notif-item-meta { color: var(--muted); font-family: var(--font-mono); font-size: 11px; white-space: nowrap; } .history-card strong, .notif-item-title { display: block; font-size: 13px; font-weight: 600; color: var(--ink); } .history-card small, .notif-item-detail { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; } .history-card--no-leido, .notif-item.no-leido { border-left: 2px solid var(--accent); } .notif-item-icon { display: grid; place-items: center; width: 20px; height: 20px; } .notif-item-icon [data-lucide] { width: 17px; height: 17px; } .notif-item.sev-error .notif-item-icon [data-lucide] { color: var(--danger); } .notif-item.sev-warning .notif-item-icon [data-lucide] { color: var(--warning); } .notif-item.sev-info .notif-item-icon [data-lucide] { color: var(--accent); } .status-pill { padding: 2px 8px; border-radius: var(--radius-control); background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 600; } .notif-empty { padding: 18px 4px; color: var(--muted); font-size: 13px; text-align: center; } /* Responsive de la cabecera de página: mismo comportamiento en toda la suite. */ @media (max-width: 900px) { .page-shell { padding: 14px 14px 24px; } .panel:not(:has(> .page-shell)) { padding: 14px 14px 24px; } .page-header, .panel-header { flex-direction: column; align-items: flex-start; gap: 10px; } .panel-title { font-size: 19px; } }