/* ============================================================================ inteliadmin.com — Estilos del panel de administración ============================================================================ */ /* Inter Variable (self-hosted) — tipografía premium del panel. Eje de peso 100–900. */ @font-face { font-family: 'Inter Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-variable.woff2') format('woff2'); } :root, :root[data-theme="dark"] { --a-bg: #0E1016; --a-surface: #141824; --a-surface-2: #1A1F2E; --a-ink: #F4F6FB; --a-ink-muted: #8A92A6; --a-line: rgba(255,255,255,.08); --a-line-strong: rgba(255,255,255,.14); --a-accent: #B8332F; --a-accent-2: #8F2322; --a-gold: #C6A25A; /* admin_theme_style() (includes/theme-loader.php) reemplaza estos tres y sus componentes RGB con la paleta de cada instalación. */ --a-accent-rgb: 184,51,47; --a-gold-rgb: 198,162,90; --a-ok: #2b8a5f; --a-warn: #D9A400; --a-err: #CC3B34; --a-radius: 12px; --a-shadow-lg: 0 30px 80px rgba(0,0,0,.5); --a-shadow-sm: 0 4px 14px rgba(0,0,0,.35); --a-shadow-1: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); --a-shadow-2: 0 4px 12px -2px rgba(0,0,0,.5), 0 2px 6px -2px rgba(0,0,0,.35); --a-shadow-3: 0 16px 40px -12px rgba(0,0,0,.6), 0 6px 16px -8px rgba(0,0,0,.4); --a-ease: cubic-bezier(.32,.72,0,1); --a-input-bg: var(--a-bg); --a-hover: rgba(255,255,255,.04); --a-hover-strong: rgba(255,255,255,.08); color-scheme: dark; } :root[data-theme="light"] { --a-bg: #F5F5F8; --a-surface: #FFFFFF; --a-surface-2: #FAFAFC; --a-ink: #12151D; --a-ink-muted: #6A7181; --a-line: rgba(18,21,29,.10); --a-line-strong: rgba(18,21,29,.18); --a-accent: #B8332F; --a-accent-2: #8F2322; --a-gold: #A7853A; --a-ok: #1b6f48; --a-warn: #B98300; --a-err: #B8332F; --a-radius: 12px; --a-shadow-lg: 0 24px 60px rgba(18,21,29,.14); --a-shadow-sm: 0 2px 10px rgba(18,21,29,.08); --a-shadow-1: 0 1px 3px rgba(18,21,29,.05), 0 1px 2px rgba(18,21,29,.03); --a-shadow-2: 0 4px 12px -2px rgba(18,21,29,.07), 0 2px 6px -2px rgba(18,21,29,.05); --a-shadow-3: 0 16px 40px -12px rgba(18,21,29,.12), 0 6px 16px -8px rgba(18,21,29,.07); --a-ease: cubic-bezier(.32,.72,0,1); --a-input-bg: #FFFFFF; --a-hover: rgba(18,21,29,.04); --a-hover-strong: rgba(18,21,29,.08); color-scheme: light; } * { box-sizing: border-box; } html { /* Reserva siempre el espacio del scrollbar para que el contenido fixed (ej. la campanita de notificaciones) no quede tapado al aparecer/desaparecer la scrollbar entre páginas. */ scrollbar-gutter: stable; } body { margin: 0; font-family: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial; font-optical-sizing: auto; font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.006em; background: var(--a-bg); color: var(--a-ink); line-height: 1.45; font-size: 14px; } /* Números tabulares para cifras alineadas (estilo Apple). */ .kpi-value, .tabular { font-variant-numeric: tabular-nums; } a { color: var(--a-accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- Layout ---------- */ .admin-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } .sidebar { /* La sidebar siempre se renderiza en tema dark, sin importar el tema global. Redefinimos las CSS vars en su scope para que todos los descendientes resuelvan a valores dark aunque . */ --a-bg: #0E1016; --a-surface: #141824; --a-surface-2: #1A1F2E; --a-ink: #F4F6FB; --a-ink-muted: #8A92A6; --a-line: rgba(255,255,255,.08); --a-line-strong: rgba(255,255,255,.14); --a-gold: #C6A25A; --a-input-bg: #0E1016; --a-hover: rgba(255,255,255,.04); --a-hover-strong: rgba(255,255,255,.08); --a-shadow-sm: 0 4px 14px rgba(0,0,0,.35); color-scheme: dark; background: linear-gradient(180deg, var(--a-surface), var(--a-bg)); color: var(--a-ink); border-right: 1px solid var(--a-line); padding: 0; position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; } .sidebar-top { flex-shrink: 0; padding: 20px 0 0; } /* Disparador de búsqueda (abre la paleta ⌘K) */ .sidebar-search { display: flex; align-items: center; gap: 8px; width: calc(100% - 28px); margin: 10px 14px 4px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--a-line-strong); background: var(--a-input-bg); color: var(--a-ink-muted); cursor: pointer; font-size: 13px; font-family: inherit; } .sidebar-search:hover { border-color: var(--a-accent); color: var(--a-ink); } .sidebar-search svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; } .sidebar-search span { flex: 1; text-align: left; } .sidebar-search kbd { font-size: 10px; font-weight: 800; padding: 2px 5px; border-radius: 5px; border: 1px solid var(--a-line-strong); background: var(--a-surface); color: var(--a-ink-muted); } /* Paleta de comandos ⌘K (vive sobre el área principal: usa el tema global) */ .cmdk { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; } .cmdk[hidden] { display: none; } .cmdk-backdrop { position: absolute; inset: 0; background: rgba(8,10,16,.55); } .cmdk-panel { position: relative; width: min(560px, 92vw); max-height: 70vh; display: flex; flex-direction: column; background: var(--a-surface); color: var(--a-ink); border: 1px solid var(--a-line-strong); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.4); overflow: hidden; } .cmdk-input-wrap { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--a-line); flex-shrink: 0; } .cmdk-input-wrap svg { width: 18px; height: 18px; stroke: var(--a-ink-muted); fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; } .cmdk-input-wrap kbd { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--a-line-strong); color: var(--a-ink-muted); } #adminCmdkInput { flex: 1; border: 0; background: transparent; color: var(--a-ink); font-size: 15px; outline: none; font-family: inherit; } .cmdk-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; } .cmdk-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; } .cmdk-item.is-active { background: var(--a-hover-strong); } .cmdk-item-label { font-size: 14px; font-weight: 700; color: var(--a-ink); } .cmdk-item-group { font-size: 11px; color: var(--a-ink-muted); font-weight: 700; white-space: nowrap; } .cmdk-empty { padding: 28px; text-align: center; color: var(--a-ink-muted); font-size: 13px; } .cmdk-empty[hidden] { display: none; } .sidebar-brand { padding: 0 14px 20px; border-bottom: 1px solid var(--a-line); margin-bottom: 12px; } .sidebar-brand strong { display: block; font-size: 14px; letter-spacing: -.01em; } .sidebar-brand small { color: var(--a-ink-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .sidebar-brand .brand-logo-wrap { margin-bottom: 10px; } .sidebar-brand .brand-logo { width: 100% !important; height: auto !important; max-width: 100%; max-height: 110px; object-fit: contain; object-position: left center; display: block; } /* La sidebar siempre va en dark → muestra siempre la variante dark del logo. */ .sidebar-brand .brand-logo--light { display: none; } /* Login premium (.adm-login*) — el card de login tiene su propio scope para los logos. Ver bloque "Login premium" más abajo. */ .adm-login__brand .brand-logo-wrap { margin-bottom: 0; display: flex; justify-content: flex-start; } .adm-login__brand .brand-logo { width: auto !important; height: auto !important; max-width: 220px; max-height: 56px; object-fit: contain; display: block; } /* Login forzado a light → mostrar siempre la variante light del logo. */ .adm-login__brand .brand-logo--dark { display: none; } .sidebar-user { display: block; padding: 10px 16px; margin: 0 10px 16px; font-size: 12px; color: var(--a-ink-muted); text-decoration: none; border-radius: 8px; border: 1px solid transparent; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; } .sidebar-user:hover { background: var(--a-hover); color: var(--a-ink-muted); text-decoration: none; border-color: var(--a-line); } .sidebar-user.is-active { background: linear-gradient(135deg, rgba(var(--a-accent-rgb), .18), rgba(var(--a-accent-rgb), .08)); border-color: transparent; } .sidebar-user .name { color: var(--a-ink); font-weight: 800; font-size: 13px; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; flex: 1 1 auto; overflow-y: auto; min-height: 0; } .sidebar-nav a { color: var(--a-ink-muted); padding: 10px 14px; border-radius: 8px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; transition: all 180ms ease; } .sidebar-nav a:hover { background: var(--a-hover); color: var(--a-ink); text-decoration: none; } .sidebar-nav a.active { background: linear-gradient(135deg, rgba(var(--a-accent-rgb), .95), rgba(var(--a-accent-rgb), .70)); color: #fff; border-left: 4px solid var(--a-accent); padding-left: 10px; box-shadow: 0 1px 8px rgba(var(--a-accent-rgb), .35); } .sidebar-nav svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .sidebar-footer { margin-top: auto; padding: 16px 20px; border-top: 1px solid var(--a-line); } .main { padding: 80px 32px 28px; overflow-x: hidden; } /* padding-top deja sitio a la app bar fija (56px) */ .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 20px; flex-wrap: wrap; } .topbar h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; } .topbar .actions { display: flex; gap: 8px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 8px; background: var(--a-surface-2); color: var(--a-ink); border: 1px solid var(--a-line); font-size: 13px; font-weight: 800; cursor: pointer; transition: all 160ms ease; font-family: inherit; } .btn:hover { background: var(--a-hover-strong); border-color: var(--a-line-strong); } .btn.primary { background: linear-gradient(135deg, var(--a-accent), var(--a-accent-2)); border-color: rgba(var(--a-accent-rgb), .6); color: #fff; } .btn.primary:hover { box-shadow: 0 10px 30px rgba(var(--a-accent-rgb), .3); } .btn.danger { background: transparent; border-color: rgba(204,59,52,.4); color: var(--a-err); } .btn.danger:hover { background: rgba(204,59,52,.1); } .btn.sm { padding: 6px 10px; font-size: 12px; } .btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---------- Cards / panels ---------- */ .panel { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--a-shadow-1); } .panel h2 { margin: 0 0 14px; font-size: 16px; letter-spacing: -.01em; } .panel h3 { margin: 0 0 10px; font-size: 14px; letter-spacing: -.01em; } .panel-row { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .panel-row > * { min-width: 0; } /* ---------- Forms ---------- */ .field { margin-bottom: 14px; } .field label { display: block; font-size: 12px; font-weight: 800; color: var(--a-ink-muted); margin-bottom: 6px; letter-spacing: .03em; text-transform: uppercase; } .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="url"], .field input[type="number"], .field input[type="date"], .field select, .field textarea { width: 100%; padding: 10px 12px; background: var(--a-input-bg); border: 1px solid var(--a-line); border-radius: 8px; color: var(--a-ink); font-size: 14px; font-family: inherit; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--a-accent); box-shadow: 0 0 0 3px rgba(var(--a-accent-rgb), .12); } .field textarea { min-height: 90px; resize: vertical; } .field .help { font-size: 11px; color: var(--a-ink-muted); margin-top: 4px; } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 720px) { .row-2 { grid-template-columns: 1fr; } } /* ---------- Table ---------- */ .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--a-line); } .table th { font-weight: 800; color: var(--a-ink-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; } .table tr:hover td { background: var(--a-hover); } .table tr.is-clickable { cursor: pointer; transition: box-shadow 140ms ease; } .table tr.is-clickable:hover td { background: color-mix(in srgb, var(--a-accent) 4%, var(--a-hover)); } .table .drag-handle { cursor: grab; color: var(--a-ink-muted); user-select: none; } .table .drag-handle:active { cursor: grabbing; } .table .row-actions { display: flex; gap: 6px; } .badge-pill { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; } .badge-pill.ok { background: rgba(43,138,95,.15); color: #4fd390; } .badge-pill.draft { background: rgba(217,164,0,.15); color: #f0bf40; } .badge-pill.off { background: rgba(204,59,52,.15); color: #f07070; } /* ---------- Flash ---------- */ .flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; font-weight: 700; } .flash.ok { background: rgba(43,138,95,.12); color: #4fd390; border: 1px solid rgba(43,138,95,.3); } .flash.error { background: rgba(204,59,52,.12); color: #f07070; border: 1px solid rgba(204,59,52,.3); } .flash.warn { background: rgba(217,164,0,.12); color: #f0bf40; border: 1px solid rgba(217,164,0,.3); } /* ---------- Login premium ---------- Layout 2-col en desktop (≥1024px), stack en mobile. Imagen lateral configurable desde Ajustes → Pantalla de inicio de sesión. El login fuerza tema light desde la vista (data-theme="light"), por lo que los tokens de paleta resuelven a la variante clara automáticamente. */ .adm-login { --adm-login-bg: #F5F5F8; --adm-login-pane-grad: linear-gradient(135deg, #1a1f2e 0%, var(--a-accent) 60%, #2a3144 100%); --adm-login-card-bg: #FFFFFF; --adm-login-ink: #12151D; --adm-login-ink-muted: #6A7181; --adm-login-input-bg: #F1F2F6; --adm-login-input-bg-hover: #E9EAF0; --adm-login-line: rgba(18,21,29,.10); --adm-login-radius: 16px; --adm-login-radius-sm: 10px; --adm-login-shadow: 0 30px 80px rgba(18,21,29,.10), 0 8px 24px rgba(18,21,29,.06); min-height: 100vh; margin: 0; background: var(--adm-login-bg); color: var(--adm-login-ink); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .adm-login__shell { min-height: 100vh; display: grid; grid-template-columns: 1fr; overflow: hidden; } @media (min-width: 1024px) { .adm-login__shell { grid-template-columns: 7fr 5fr; } } /* Pane izquierdo: imagen / fallback decorativo */ .adm-login__pane { position: relative; display: none; overflow: hidden; background: var(--adm-login-pane-grad); } @media (min-width: 1024px) { .adm-login__pane { display: block; } } .adm-login__pane-image { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.05); opacity: 0; animation: admLoginFadeScale 600ms cubic-bezier(.22,.61,.36,1) forwards; } .adm-login__pane-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,26,.20) 0%, rgba(10,14,26,.65) 100%); } .adm-login__pane--fallback { background: radial-gradient(1200px 800px at 30% 20%, rgba(255,255,255,.10), transparent 60%), radial-gradient(900px 600px at 80% 80%, rgba(255,255,255,.06), transparent 60%), var(--adm-login-pane-grad); } .adm-login__pane--fallback::before, .adm-login__pane--fallback::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; } .adm-login__pane--fallback::before { width: 480px; height: 480px; bottom: -120px; right: -120px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%); filter: blur(20px); } .adm-login__pane--fallback::after { width: 320px; height: 320px; top: -80px; left: -80px; background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%); filter: blur(40px); } .adm-login__pane-content { position: absolute; inset: 0; padding: 56px 56px; z-index: 2; display: flex; flex-direction: column; justify-content: center; color: rgba(255,255,255,.94); opacity: 0; animation: admLoginFadeUp 480ms cubic-bezier(.22,.61,.36,1) 320ms forwards; } .adm-login__pane-content-inner { width: 100%; max-width: 520px; } .adm-login__pane-logo { display: block; max-width: 180px; max-height: 56px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; margin-bottom: 32px; } .adm-login__quote-block { margin-bottom: 18px; } .adm-login__quote-block:last-of-type { margin-bottom: 14px; } .adm-login__quote-label { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 6px; } .adm-login__quote-text { margin: 0; font-size: 14px; line-height: 1.55; font-weight: 400; letter-spacing: -.003em; color: rgba(255,255,255,.94); } .adm-login__quote-attr { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.65); } /* Pane derecho: form */ .adm-login__form-pane { display: flex; align-items: center; justify-content: center; padding: 32px; background: var(--adm-login-bg); } .adm-login__card { width: 100%; max-width: 420px; background: var(--adm-login-card-bg); color: var(--adm-login-ink); border-radius: var(--adm-login-radius); padding: 44px 40px 32px; box-shadow: var(--adm-login-shadow); opacity: 0; transform: translateY(16px); animation: admLoginFadeUp 360ms cubic-bezier(.22,.61,.36,1) 80ms forwards; } .adm-login__brand { margin-bottom: 28px; } .adm-login__brand-fallback { margin: 0 0 28px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--adm-login-ink); } .adm-login__title { margin: 0 0 8px; font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--adm-login-ink); } .adm-login__subtitle { margin: 0 0 28px; font-size: 14px; line-height: 1.5; color: var(--adm-login-ink-muted); } .adm-login__form { display: flex; flex-direction: column; gap: 14px; } /* Floating label inputs */ .adm-login__field { position: relative; } .adm-login__field input { width: 100%; padding: 22px 14px 10px; background: var(--adm-login-input-bg); border: 1px solid transparent; border-radius: var(--adm-login-radius-sm); font-family: inherit; font-size: 14px; color: var(--adm-login-ink); line-height: 1.4; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .adm-login__field input:hover { background: var(--adm-login-input-bg-hover); } .adm-login__field input:focus { outline: none; background: #FFFFFF; border-color: var(--a-accent); box-shadow: 0 0 0 4px rgba(var(--a-accent-rgb), .12); } .adm-login__field label { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: var(--adm-login-ink-muted); font-size: 14px; pointer-events: none; transition: top 140ms ease, font-size 140ms ease, color 140ms ease, transform 140ms ease; } .adm-login__field input:focus + label, .adm-login__field input:not(:placeholder-shown) + label { top: 12px; transform: translateY(-50%); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--a-accent); } .adm-login__cta { width: 100%; padding: 14px 18px; background: linear-gradient(135deg, var(--a-accent), var(--a-accent-2)); color: #FFFFFF; border: none; border-radius: var(--adm-login-radius-sm); font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: .01em; cursor: pointer; transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease; margin-top: 6px; box-shadow: 0 6px 16px rgba(var(--a-accent-rgb), .25); } .adm-login__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(var(--a-accent-rgb), .32); } .adm-login__cta:active { transform: translateY(0); } .adm-login__cta:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(var(--a-accent-rgb), .22); } .adm-login__cta[disabled] { opacity: .65; cursor: not-allowed; transform: none; filter: saturate(.8); } .adm-login__alert { padding: 12px 14px; border-radius: var(--adm-login-radius-sm); font-size: 13px; line-height: 1.5; margin-bottom: 18px; background: rgba(var(--a-accent-rgb), .08); color: var(--a-accent); border: 1px solid rgba(var(--a-accent-rgb), .20); } .adm-login__footer { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--adm-login-line); font-size: 12px; color: var(--adm-login-ink-muted); text-align: center; } .adm-login__footer a { color: var(--a-accent); text-decoration: none; font-weight: 600; } .adm-login__footer a:hover { text-decoration: underline; } .adm-login__footer-sep { margin: 0 8px; opacity: .5; } @keyframes admLoginFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes admLoginFadeScale { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .adm-login__card, .adm-login__pane-image, .adm-login__pane-content { animation: none !important; opacity: 1 !important; transform: none !important; } } @media (max-width: 1023px) { .adm-login__form-pane { padding: 24px 18px; } .adm-login__card { padding: 32px 24px 24px; border-radius: 14px; } .adm-login__title { font-size: 22px; } } /* ---------- Theme editor ---------- */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .theme-var { padding: 14px; background: var(--a-surface-2); border: 1px solid var(--a-line); border-radius: 10px; } .theme-var code { color: var(--a-gold); font-size: 12px; font-weight: 700; display: block; margin-bottom: 10px; } .theme-var input[type="color"] { width: 60px; height: 40px; border: 1px solid var(--a-line); border-radius: 6px; background: transparent; cursor: pointer; padding: 2px; } .theme-var input[type="text"] { width: calc(100% - 70px); display: inline-block; margin-left: 8px; vertical-align: middle; padding: 10px; background: var(--a-bg); border: 1px solid var(--a-line); border-radius: 6px; color: var(--a-ink); font-family: ui-monospace, Menlo, monospace; font-size: 12px; } .theme-toolbar { position: sticky; bottom: 20px; display: flex; gap: 10px; padding: 12px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 10px; justify-content: space-between; align-items: center; box-shadow: 0 20px 50px rgba(0,0,0,.4); } .theme-preview { position: fixed; bottom: 24px; right: 24px; width: 320px; z-index: 50; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.5); } .theme-preview-head { padding: 8px 12px; font-size: 11px; font-weight: 800; color: var(--a-ink-muted); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--a-line); display:flex; justify-content:space-between; align-items:center;} .theme-preview iframe { width: 100%; height: 240px; border: 0; display: block; background: #000; } /* ---------- Media grid ---------- */ .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .media-item { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--a-line); background: var(--a-bg); aspect-ratio: 4/3; cursor: pointer; transition: all 180ms ease; } .media-item:hover { border-color: var(--a-accent); transform: translateY(-2px); } .media-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .media-item .meta { position: absolute; bottom: 0; left: 0; right: 0; padding: 6px 8px; background: linear-gradient(0deg, rgba(0,0,0,.8), transparent); font-size: 10px; color: #fff; } /* ---------- Slides editor ---------- */ .slides-list .slide-row { display: flex; gap: 14px; align-items: center; padding: 14px; background: var(--a-surface-2); border: 1px solid var(--a-line); border-radius: 10px; margin-bottom: 10px; } .slide-row .order { width: 24px; text-align: center; color: var(--a-ink-muted); font-weight: 900; } .slide-row .info { flex: 1; min-width: 0; } .slide-row .info h4 { margin: 0 0 2px; font-size: 14px; } .slide-row .info small { color: var(--a-ink-muted); font-size: 11px; } .slide-row .meta-pill { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(var(--a-accent-rgb), .15); color: #f28c88; text-transform: uppercase; letter-spacing: .04em; } .slide-row.sortable-ghost { opacity: .4; } /* ============================================================================ Módulo de gestión de proyectos (PM) ============================================================================ */ /* ---------- Sidebar: grupos colapsables + role pill + theme toggle ---------- */ .nav-group { display: flex; flex-direction: column; } .nav-group--flat { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--a-line); } .nav-group-label { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; padding: 14px 14px 6px; font-size: 10px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; user-select: none; transition: color 140ms ease, opacity 140ms ease; } .nav-group:first-child .nav-group-label { padding-top: 4px; } .nav-group-label:hover { opacity: .82; } .nav-group-label .chev { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 180ms ease; flex-shrink: 0; } .nav-group.is-collapsed .nav-group-label .chev { transform: rotate(-90deg); } .nav-group-items { display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .nav-group.is-collapsed .nav-group-items { display: none; } .role-pill { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: rgba(var(--a-accent-rgb), .15); color: var(--a-accent); border: 1px solid rgba(var(--a-accent-rgb), .25); } .role-pill.role-member { background: rgba(var(--a-gold-rgb), .15); color: var(--a-gold); border-color: rgba(var(--a-gold-rgb), .3); } .role-pill.role-editor { background: rgba(43,138,95,.15); color: var(--a-ok); border-color: rgba(43,138,95,.3); } /* Lista de equipo: nombre + cargo bajo el avatar */ .member-id { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .sidebar-footer .btn { width: 100%; justify-content: center; margin-top: 8px; } .theme-toggle-btn svg { width: 14px; height: 14px; } :root[data-theme="dark"] .theme-toggle-btn .ico-light { display: none; } :root[data-theme="light"] .theme-toggle-btn .ico-dark { display: none; } /* ----- Menú de cuenta (footer fijo del sidebar) ------------------------- */ .sidebar-account { flex-shrink: 0; position: relative; padding: 10px; border-top: 1px solid var(--a-line); } .account-trigger { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--a-ink); cursor: pointer; text-align: left; font-family: inherit; } .account-trigger:hover { background: var(--a-hover); border-color: var(--a-line); } .account-trigger.is-active { background: linear-gradient(135deg, rgba(var(--a-accent-rgb), .18), rgba(var(--a-accent-rgb), .08)); } .account-avatar { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: linear-gradient(135deg, var(--a-accent), #8f2a26); color: #fff; } .account-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .account-id .account-name { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-id .role-pill { align-self: flex-start; } .account-chev { width: 16px; height: 16px; stroke: var(--a-ink-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; flex-shrink: 0; } .sidebar-account.is-open .account-chev { transform: rotate(180deg); } .account-menu { position: absolute; left: 10px; right: 10px; bottom: calc(100% - 4px); background: var(--a-surface-2); border: 1px solid var(--a-line-strong); border-radius: 12px; box-shadow: 0 -10px 34px rgba(0,0,0,.5); padding: 6px; z-index: 50; } .account-menu[hidden] { display: none; } .account-menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--a-line); margin-bottom: 4px; } .account-menu-head .account-name { font-size: 13px; font-weight: 800; } .account-menu-head .account-email { font-size: 11px; color: var(--a-ink-muted); font-weight: 700; word-break: break-all; } .account-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; border: 0; background: transparent; color: var(--a-ink); font-size: 13px; font-weight: 700; cursor: pointer; text-align: left; font-family: inherit; } .account-item:hover { background: var(--a-hover); color: var(--a-ink); text-decoration: none; } .account-item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .account-item--danger { color: #f3a39f; } .account-item--danger:hover { background: rgba(var(--a-accent-rgb), .18); color: #ffb4af; } /* ---------- Topbar breadcrumb ---------- */ .breadcrumb { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--a-ink-muted); margin-bottom: 6px; font-weight: 700; } .breadcrumb a { color: var(--a-ink-muted); } .breadcrumb a:hover { color: var(--a-ink); text-decoration: none; } .breadcrumb span.sep { opacity: .5; } /* ---------- Banda superior oscura del dashboard (palette del sidebar) ---- */ .dash-topband { --a-bg: #0E1016; --a-surface: #141824; --a-surface-2: #1A1F2E; --a-ink: #F4F6FB; --a-ink-muted: #8A92A6; --a-line: rgba(255,255,255,.08); --a-line-strong: rgba(255,255,255,.16); --a-input-bg: #0E1016; color-scheme: dark; background: linear-gradient(180deg, var(--a-surface), var(--a-bg)); color: var(--a-ink); border: 1px solid var(--a-line); border-radius: 18px; padding: 22px 22px 8px; margin-bottom: 22px; box-shadow: var(--a-shadow-1); } .dash-topband .dash-hero { margin-bottom: 18px; } .dash-topband .kpi-grid { margin-bottom: 14px; } /* Las tarjetas resaltan sobre la banda con un tono ligeramente más claro. */ .dash-topband .kpi { background: var(--a-surface-2); } /* ---------- KPI tiles (dashboard operativo) ---------- */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; } /* Tarjetas KPI como enlaces: sin subrayado, color heredado, foco accesible. */ a.kpi { text-decoration: none; color: inherit; display: block; } a.kpi:hover { text-decoration: none; } a.kpi:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; } /* KPI clicable seleccionado (filtro activo): anillo de acento + leve realce. */ a.kpi.is-active { border-color: var(--a-accent); box-shadow: var(--a-shadow-2), inset 0 0 0 1px var(--a-accent); } a.kpi.is-active::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--a-accent); border-radius: 16px 0 0 16px; } .kpi { position: relative; overflow: hidden; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 18px 18px 16px; box-shadow: var(--a-shadow-1); transition: transform 220ms var(--a-ease), box-shadow 220ms var(--a-ease), border-color 220ms var(--a-ease); } .kpi:hover { transform: translateY(-2px); box-shadow: var(--a-shadow-2); border-color: var(--a-line-strong); } .kpi .kpi-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--a-ink-muted); } .kpi .kpi-value { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin-top: 6px; font-variant-numeric: tabular-nums; } .kpi .kpi-sub { font-size: 11px; color: var(--a-ink-muted); margin-top: 3px; font-weight: 600; } .kpi .kpi-ico { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 10px; background: color-mix(in srgb, var(--a-accent) 12%, transparent); color: var(--a-accent); } .kpi .kpi-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; } .kpi.urgent .kpi-ico { background: color-mix(in srgb, var(--a-err) 14%, transparent); color: var(--a-err); } .kpi.warn .kpi-ico { background: color-mix(in srgb, var(--a-warn) 16%, transparent); color: var(--a-warn); } .kpi .kpi-spark { margin-top: 10px; height: 26px; } .kpi.accent::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(var(--a-accent-rgb), .10), transparent 55%); } .kpi.urgent .kpi-value { color: var(--a-err); } .kpi.warn .kpi-value { color: var(--a-warn); } .kpi.ok .kpi-value { color: var(--a-ok); } .kpi.ok .kpi-ico { background: color-mix(in srgb, var(--a-ok) 14%, transparent); color: var(--a-ok); } /* Variante para montos: valores más largos que un contador → tipografía menor y tarjetas algo más anchas */ .kpi-grid.kpi-money { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .kpi-grid.kpi-money .kpi-value { font-size: 24px; } /* ---------- Tabs ---------- */ .tabs { display: flex; gap: 2px; padding: 4px; background: var(--a-surface-2); border: 1px solid var(--a-line); border-radius: 10px; margin-bottom: 18px; width: fit-content; } .tabs a { padding: 8px 14px; font-size: 12px; font-weight: 800; border-radius: 7px; color: var(--a-ink-muted); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: all 160ms ease; } .tabs a:hover { color: var(--a-ink); background: var(--a-hover); text-decoration: none; } .tabs a.active { background: var(--a-surface); color: var(--a-ink); box-shadow: var(--a-shadow-sm); border: 1px solid var(--a-line-strong); } /* ---------- Status badges (proyectos / etapas / tareas) ---------- */ .pm-status { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border: 1px solid transparent; } .pm-status.st-planning, .pm-status.st-pending { background: rgba(154,163,178,.12); color: var(--a-ink-muted); border-color: rgba(154,163,178,.25); } .pm-status.st-active, .pm-status.st-in_progress, .pm-status.st-todo { background: rgba(var(--a-accent-rgb), .12); color: var(--a-accent); border-color: rgba(var(--a-accent-rgb), .3); } .pm-status.st-review { background: rgba(var(--a-gold-rgb), .15); color: var(--a-gold); border-color: rgba(var(--a-gold-rgb), .3); } .pm-status.st-on_hold { background: rgba(217,164,0,.12); color: var(--a-warn); border-color: rgba(217,164,0,.28); } .pm-status.st-done, .pm-status.st-completed { background: rgba(43,138,95,.15); color: var(--a-ok); border-color: rgba(43,138,95,.3); } .pm-status.st-cancelled, .pm-status.st-blocked { background: rgba(204,59,52,.12); color: var(--a-err); border-color: rgba(204,59,52,.3); } /* ---------- Health badge (6 reglas heurísticas) ---------- */ .pm-health { display: inline-block; line-height: 1; font-size: 14px; cursor: help; width: 18px; height: 18px; border-radius: 50%; text-align: center; padding-top: 2px; box-sizing: border-box; } .pm-health.st-ok { color: var(--a-ok); background: rgba(43,138,95,.18); } .pm-health.st-warning { color: var(--a-warn); background: rgba(217,164,0,.18); } .pm-health.st-critical { color: var(--a-err); background: rgba(204,59,52,.22); } .pm-health.st-unknown { color: var(--a-ink-muted); background: rgba(154,163,178,.18); } .col-health { width: 60px; text-align: center; } /* Widget "Proyectos con alertas" en dashboard */ .dashboard-health .health-list { display: grid; gap: 10px; } .dashboard-health .health-item { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; background: var(--a-hover); border: 1px solid var(--a-line); color: var(--a-ink); transition: background 150ms; } .dashboard-health .health-item:hover { background: var(--a-hover-strong); } .dashboard-health .health-item.is-critical { border-left: 3px solid var(--a-err); } .dashboard-health .health-item.is-warning { border-left: 3px solid var(--a-warn); } .dashboard-health .health-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .dashboard-health .health-name { flex: 1; font-weight: 700; font-size: 13px; } .dashboard-health .health-issues { list-style: none; padding: 0; margin: 0 0 0 26px; font-size: 12px; color: var(--a-ink-muted); } .dashboard-health .health-issues li { margin: 2px 0; } .dashboard-health .health-issues li:before { content: "• "; color: var(--a-ink-muted); } .pm-priority { display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .pm-priority.pr-low { background: rgba(154,163,178,.12); color: var(--a-ink-muted); } .pm-priority.pr-normal { background: var(--a-hover-strong); color: var(--a-ink); } .pm-priority.pr-high { background: rgba(var(--a-gold-rgb), .18); color: var(--a-gold); } .pm-priority.pr-urgent { background: rgba(204,59,52,.15); color: var(--a-err); } /* ---------- Progress bar ---------- */ .pm-progress { position: relative; height: 6px; background: var(--a-hover-strong); border-radius: 999px; overflow: hidden; } .pm-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--a-accent), var(--a-accent-2)); border-radius: 999px; transition: width 400ms ease; } .pm-progress.gold > span { background: linear-gradient(90deg, var(--a-gold), #8b6a2f); } /* ---------- Task detail modal ---------- */ dialog.pm-task-dialog { width: min(95vw, 960px); max-height: 90vh; padding: 0; border: 1px solid var(--a-line-strong); border-radius: 14px; background: var(--a-surface); color: var(--a-ink); box-shadow: var(--a-shadow-lg); overflow: hidden; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial; } dialog.pm-task-dialog::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(2px); } /* ---------- Visor de adjuntos (PDF/imagen/TXT) ---------- */ dialog.pm-attachment-viewer { width: min(95vw, 1100px); height: 90vh; padding: 0; border: 1px solid var(--a-line-strong); border-radius: 12px; background: var(--a-surface); color: var(--a-ink); box-shadow: var(--a-shadow-lg); overflow: hidden; } dialog.pm-attachment-viewer[open] { display: flex; flex-direction: column; } dialog.pm-attachment-viewer::backdrop { background: rgba(0,0,0,.7); } dialog.pm-attachment-viewer .pm-av-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--a-line); background: var(--a-surface-2); flex-shrink: 0; } dialog.pm-attachment-viewer .pm-av-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } dialog.pm-attachment-viewer .pm-av-actions { display: flex; gap: 6px; flex-shrink: 0; } dialog.pm-attachment-viewer .pm-av-body { flex: 1; display: flex; min-height: 0; background: #1a1a1a; } dialog.pm-attachment-viewer iframe { flex: 1; width: 100%; border: 0; background: #1a1a1a; /* fondo oscuro que combina con el visor PDF nativo */ } dialog.pm-attachment-viewer iframe[hidden] { display: none; } dialog.pm-attachment-viewer img[data-av-image] { flex: 1; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; display: block; margin: auto; background: #1a1a1a; } dialog.pm-attachment-viewer img[data-av-image][hidden] { display: none; } .pm-task-loading { padding: 40px; text-align: center; color: var(--a-ink-muted); font-weight: 700; font-size: 13px; } /* Contenido de la tarea (usado tanto en modal como en página completa) */ .task-detail { display: flex; flex-direction: column; max-height: 90vh; overflow-y: auto; } .task-detail-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px 16px; border-bottom: 1px solid var(--a-line); background: linear-gradient(180deg, var(--a-surface-2), var(--a-surface)); } .task-detail-path { font-size: 11px; color: var(--a-ink-muted); font-weight: 700; margin-bottom: 4px; } .task-detail-path a { color: var(--a-ink-muted); } .task-detail-path a:hover { color: var(--a-ink); text-decoration: none; } .task-detail-path .sep { margin: 0 4px; opacity: .5; } .task-detail-title { margin: 0; font-size: 20px; letter-spacing: -.015em; line-height: 1.3; } .task-detail-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; } .task-detail-head-actions { display: flex; gap: 6px; flex-shrink: 0; } .task-detail-head-actions .btn { padding: 4px 8px; font-size: 13px; } .task-detail-panel { padding: 16px 22px; border-bottom: 1px solid var(--a-line); } .task-detail-panel:last-child { border-bottom: 0; } .task-detail-panel.task-quick-row { background: color-mix(in srgb, var(--a-accent) 4%, var(--a-surface)); display: flex; gap: 20px; flex-wrap: wrap; } .task-quick-row .task-quick { flex: 1 1 240px; min-width: 0; margin: 0; } .task-quick label { display: block; font-size: 11px; font-weight: 800; color: var(--a-ink-muted); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 6px; } .task-quick > div { display: flex; gap: 8px; align-items: center; } .task-quick > div select { flex: 1; min-width: 0; } .task-detail-foot { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--a-ink-muted); background: var(--a-surface-2); } .task-detail-foot strong { color: var(--a-ink); font-weight: 800; margin-right: 4px; } /* ---- Layout 2-col (modo vista) ---- */ .task-detail-head-main { min-width: 0; flex: 1; } .task-detail-body { display: grid; grid-template-columns: 1fr 300px; align-items: stretch; /* Stripe de fondo pintado en el container para que el gris de la ficha siempre llegue al pie, aunque la columna izquierda sea más corta. */ background: linear-gradient(to right, transparent calc(100% - 300px), var(--a-surface-2) calc(100% - 300px)); } .task-detail-body[hidden] { display: none; } .task-detail-main { min-width: 0; border-right: 1px solid var(--a-line); } .task-detail-aside { min-width: 0; } .task-aside-section { padding: 16px 18px; border-bottom: 1px solid var(--a-line); } .task-aside-section:last-child { border-bottom: 0; } .task-aside-heading { font-size: 10px; font-weight: 800; color: var(--a-ink-muted); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; } .task-aside-dl { margin: 0; display: flex; flex-direction: column; gap: 8px; } .task-aside-row { display: grid; grid-template-columns: 72px 1fr; gap: 10px; font-size: 12px; align-items: baseline; } .task-aside-row dt { font-size: 10px; color: var(--a-ink-muted); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .task-aside-row dd { margin: 0; font-weight: 700; color: var(--a-ink); min-width: 0; word-break: break-word; } .task-aside-row dd.is-overdue { color: var(--a-err); font-weight: 800; } .task-aside-row dd a { color: var(--a-accent); } .task-aside-row .avatar-inline { font-size: 12px; } .task-aside-status form { display: flex; flex-direction: column; gap: 8px; } .task-aside-status select { width: 100%; } .task-aside-status button { align-self: flex-end; } .task-aside-note { margin: 8px 0 0; font-style: italic; } .task-section-head { font-size: 11px; font-weight: 800; color: var(--a-ink-muted); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; } .task-description-view { white-space: pre-wrap; font-size: 16px; line-height: 1.6; } .task-description-empty { color: var(--a-ink-muted); font-size: 12px; font-style: italic; } .task-edit-collabs { padding: 16px 22px; border-top: 1px solid var(--a-line); } /* ---- Modo edición: el grid colapsa a 1 col y la aside se oculta ---- */ .task-detail.is-editing .task-detail-body { grid-template-columns: 1fr; background: none; } .task-detail.is-editing .task-detail-main { border-right: 0; } /* ---- Footer de acciones ---- */ .task-footer-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; gap: 10px; border-top: 1px solid var(--a-line); background: var(--a-surface-2); } .task-footer-bar[hidden] { display: none; } .task-footer-left { min-width: 0; } .task-footer-left form { margin: 0; } .task-footer-right { display: flex; gap: 8px; } /* ---- Mobile: apilar (aside arriba, main abajo) ---- */ @media (max-width: 820px) { .task-detail-body { grid-template-columns: 1fr; background: none; } .task-detail-main { border-right: 0; order: 2; } .task-detail-aside { order: 1; background: var(--a-surface-2); border-bottom: 1px solid var(--a-line); } .task-aside-row { grid-template-columns: 90px 1fr; } .task-footer-bar { flex-wrap: wrap; } } .task-modal-error { padding: 30px; text-align: center; color: var(--a-err); font-weight: 800; font-size: 14px; } .task-modal-error--inline { padding: 10px 16px; text-align: left; font-size: 12px; background: rgba(204,59,52,.08); border-left: 3px solid var(--a-err); margin: 0 0 8px; word-break: break-word; } /* ---------- Checklist ---------- */ .task-checklist h3 { display: flex; align-items: center; } .checklist { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; } .checklist-item { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; background: var(--a-surface-2); border: 1px solid var(--a-line); border-radius: 7px; transition: background 140ms ease, border-color 140ms ease; } .checklist-item:hover { border-color: var(--a-line-strong); } .checklist-item.is-done { background: color-mix(in srgb, var(--a-ok) 6%, var(--a-surface-2)); border-color: color-mix(in srgb, var(--a-ok) 25%, var(--a-line)); } .checklist-item.is-done .checklist-text { text-decoration: line-through; color: var(--a-ink-muted); } .checklist-toggle { display: flex; margin: 0; padding: 0; } .checklist-checkbox { width: 20px; height: 20px; border: 1.5px solid var(--a-line-strong); background: var(--a-surface); border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #fff; line-height: 1; transition: all 140ms ease; padding: 0; } .checklist-checkbox:hover { border-color: var(--a-accent); } .checklist-item.is-done .checklist-checkbox { background: var(--a-ok); border-color: var(--a-ok); } .checklist-text-form { margin: 0; padding: 0; } .checklist-text { width: 100%; background: transparent !important; border: 1px solid transparent !important; padding: 4px 8px !important; border-radius: 5px; font-size: 13px; color: var(--a-ink); transition: all 120ms ease; } .checklist-text:hover { background: var(--a-hover) !important; } .checklist-text:focus { background: var(--a-input-bg) !important; border-color: var(--a-accent) !important; outline: none; box-shadow: 0 0 0 3px rgba(var(--a-accent-rgb), .1); } .checklist-delete { margin: 0; padding: 0; } .checklist-delete .btn { background: transparent; border-color: transparent; color: var(--a-ink-muted); padding: 4px 8px; font-size: 14px; line-height: 1; opacity: .5; } .checklist-item:hover .checklist-delete .btn { opacity: 1; } .checklist-delete .btn:hover { background: rgba(204,59,52,.1); color: var(--a-err); border-color: transparent; } .checklist-add { display: flex; gap: 8px; margin: 0; padding-top: 10px; border-top: 1px dashed var(--a-line); } .checklist-add input[type="text"] { flex: 1; padding: 8px 12px; background: var(--a-input-bg); border: 1px solid var(--a-line); border-radius: 6px; color: var(--a-ink); font-size: 13px; } .checklist-add input[type="text"]:focus { outline: none; border-color: var(--a-accent); box-shadow: 0 0 0 3px rgba(var(--a-accent-rgb), .12); } /* ---------- Task edit form (oculto por defecto cuando admin) ---------- */ .task-edit-form[hidden] { display: none; } .collab-remove-form[hidden] { display: none; } .collab-edit-zone[hidden] { display: none; } /* ---------- Avatar (base + foto) ---------- */ /* Base del monograma circular; cada contexto ajusta tamaño/font-size. */ .avatar { border-radius: 50%; background: linear-gradient(135deg, var(--a-accent), var(--a-accent-2)); color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Con foto: la imagen llena el círculo y reemplaza el degradado. */ .avatar.has-photo, .account-avatar.has-photo { background: none; overflow: hidden; } .avatar.has-photo img, .account-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Avatar grande del perfil */ .avatar-xl { width: 96px; height: 96px; font-size: 30px; } .avatar-edit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .avatar-edit-actions { display: flex; gap: 8px; align-items: center; } /* Recortador de avatar (modal) */ .avatar-cropper { border: 0; border-radius: 12px; padding: 0; background: var(--a-surface); color: var(--a-ink); width: 90vw; max-width: 332px; box-shadow: 0 24px 60px rgba(0,0,0,.4); } .avatar-cropper::backdrop { background: rgba(0,0,0,.6); } .avatar-cropper .ac-head { padding: 14px 16px; font-weight: 800; border-bottom: 1px solid var(--a-line); } .avatar-cropper .ac-stage { position: relative; width: 280px; height: 280px; margin: 16px auto; overflow: hidden; background: #000; border-radius: 8px; touch-action: none; cursor: grab; user-select: none; } .avatar-cropper .ac-stage.dragging { cursor: grabbing; } .avatar-cropper .ac-stage img { position: absolute; top: 0; left: 0; max-width: none; pointer-events: none; } .avatar-cropper .ac-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 9999px rgba(0,0,0,.45); pointer-events: none; } .avatar-cropper .ac-controls { display: flex; align-items: center; gap: 10px; padding: 0 16px 12px; } .avatar-cropper .ac-controls input[type=range] { flex: 1; accent-color: var(--a-accent); } .avatar-cropper .ac-zoom-ico { font-weight: 900; color: var(--a-ink-muted); width: 12px; text-align: center; } .avatar-cropper .ac-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--a-line); } /* ---------- Comentarios ---------- */ .comments { list-style: none; padding: 0; margin: 0; } .comments > .comment-item { margin-top: 16px; } .comments > .comment-item:first-child { margin-top: 0; } .comment-item { display: flex; gap: 10px; align-items: flex-start; } .comment-item .avatar { width: 40px; height: 40px; font-size: 15px; flex-shrink: 0; } .comment-body { flex: 1; min-width: 0; } .comment-head { display: flex; align-items: center; gap: 8px; font-size: 12px; } .comment-head strong { font-weight: 800; color: var(--a-ink); } .comment-head time { font-size: 10.5px; color: var(--a-ink-muted); font-weight: 700; } .comment-head .comment-edited { font-size: 10px; color: var(--a-ink-muted); font-style: italic; } .comment-head .comment-replyto { font-size: 10.5px; color: var(--a-accent); font-weight: 700; } .comment-head .comment-cargo, .member-id .member-cargo { display: inline-block; font-size: 10px; font-weight: 800; line-height: 1.4; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; /* color por defecto; las clases cargo-cN lo sobrescriben */ background: rgba(var(--a-gold-rgb), .15); color: var(--a-gold); border: 1px solid rgba(var(--a-gold-rgb), .3); } /* Paleta determinística por cargo (pm_cargo_class) — mismo cargo, mismo color. */ .comment-cargo.cargo-c0, .member-cargo.cargo-c0 { background: rgba(47,111,176,.15); color: #3f82c8; border-color: rgba(47,111,176,.35); } .comment-cargo.cargo-c1, .member-cargo.cargo-c1 { background: rgba(43,138,95,.15); color: #2f9d6c; border-color: rgba(43,138,95,.35); } .comment-cargo.cargo-c2, .member-cargo.cargo-c2 { background: rgba(122,92,192,.16); color: #8a6fd0; border-color: rgba(122,92,192,.35); } .comment-cargo.cargo-c3, .member-cargo.cargo-c3 { background: rgba(var(--a-gold-rgb), .16); color: var(--a-gold); border-color: rgba(var(--a-gold-rgb), .35); } .comment-cargo.cargo-c4, .member-cargo.cargo-c4 { background: rgba(31,138,138,.15); color: #1f9d9d; border-color: rgba(31,138,138,.35); } .comment-cargo.cargo-c5, .member-cargo.cargo-c5 { background: rgba(184,69,111,.16); color: #c85583; border-color: rgba(184,69,111,.35); } .comment-cargo.cargo-c6, .member-cargo.cargo-c6 { background: rgba(192,122,42,.16); color: #cd8b3a; border-color: rgba(192,122,42,.35); } .comment-cargo.cargo-c7, .member-cargo.cargo-c7 { background: rgba(85,102,170,.16); color: #6f80c0; border-color: rgba(85,102,170,.35); } /* Menciones @ */ .mention { color: var(--a-accent); font-weight: 700; } .mention-box { z-index: 4000; background: var(--a-surface); color: var(--a-ink); border: 1px solid var(--a-line-strong); border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.28); overflow: hidden; padding: 4px; max-height: 260px; overflow-y: auto; } .mention-box[hidden] { display: none; } .mention-item { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; } .mention-item.is-active, .mention-item:hover { background: var(--a-surface-2); } .mention-item-name { font-size: 13px; font-weight: 700; color: var(--a-ink); } .mention-item-handle { font-size: 11px; color: var(--a-ink-muted); font-weight: 700; } .comment-view { margin-top: 4px; font-size: 13px; line-height: 1.55; white-space: normal; word-break: break-word; color: var(--a-ink); } .comment-view[hidden] { display: none; } .comment-edit[hidden] { display: none; } .comment-edit { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; } .comment-edit textarea { width: 100%; padding: 8px 10px; background: var(--a-input-bg); border: 1px solid var(--a-accent); border-radius: 6px; color: var(--a-ink); font-size: 13px; font-family: inherit; line-height: 1.5; resize: vertical; } .comment-edit-actions { display: flex; gap: 6px; justify-content: flex-end; } .comment-actions { margin-top: 4px; font-size: 11px; display: flex; gap: 6px; align-items: center; } .comment-actions[hidden] { display: none; } .comment-actions form { margin: 0; padding: 0; display: inline; } .comment-action-link { background: none; border: 0; padding: 0; font-size: 11px; font-weight: 700; color: var(--a-ink-muted); cursor: pointer; font-family: inherit; } .comment-action-link:hover { color: var(--a-ink); text-decoration: underline; } .comment-action-danger:hover { color: var(--a-err); } .comment-add textarea { width: 100%; padding: 10px 12px; background: var(--a-input-bg); border: 1px solid var(--a-line); border-radius: 8px; color: var(--a-ink); font-size: 13px; font-family: inherit; line-height: 1.5; resize: vertical; } .comment-add textarea:focus { outline: none; border-color: var(--a-accent); box-shadow: 0 0 0 3px rgba(var(--a-accent-rgb), .1); } .comment-add { margin-bottom: 16px; } .comment-add-bar { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .comment-image-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--a-ink-muted); cursor: pointer; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--a-line); background: var(--a-surface-2); } .comment-image-btn:hover { color: var(--a-ink); border-color: var(--a-line-strong); } .comment-image-name { font-size: 11px; color: var(--a-ink-muted); font-weight: 700; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Etiqueta "nuevo" */ .comment-new-badge { display: inline-block; font-size: 9.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--a-accent); padding: 1px 6px; border-radius: 999px; line-height: 1.5; } .comment-new > .comment-body { position: relative; } .comment-new > .comment-body::before { content: ''; position: absolute; left: -10px; top: 2px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--a-accent); opacity: .65; } /* Imágenes dentro de un comentario */ .comment-images { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .comment-thumb { display: block; width: 84px; height: 84px; border-radius: 6px; overflow: hidden; background: var(--a-surface); border: 1px solid var(--a-line); cursor: zoom-in; } .comment-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Botón Me gusta */ .comment-actions .comment-like { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700; color: var(--a-ink-muted); } .comment-like .comment-like-icon { display: block; width: 14px; height: 14px; } .comment-like:hover { color: var(--a-ink); } .comment-like.is-liked { color: var(--a-accent); } .comment-dot { opacity: .4; } /* Respuestas (1 nivel) */ .comment-thread, .comment-reply-box { display: block; } .comment-replies { list-style: none; margin: 10px 0 0; padding: 0 0 0 18px; border-left: 2px solid var(--a-line); display: flex; flex-direction: column; gap: 12px; } .comment-reply .avatar { width: 32px; height: 32px; font-size: 12px; } .comment-reply-box .comment-reply-form { margin: 8px 0 0 18px; } .comment-reply-form[hidden] { display: none; } /* ---------- Adjuntos ---------- */ .attachments { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; } .attachment-item { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; background: var(--a-surface-2); border: 1px solid var(--a-line); border-radius: 7px; transition: border-color 140ms ease; } .attachment-item:hover { border-color: var(--a-line-strong); } .attachment-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 6px; background: linear-gradient(135deg, var(--a-surface), var(--a-surface-2)); border: 1px solid var(--a-line); font-size: 10px; font-weight: 900; letter-spacing: .02em; color: var(--a-ink-muted); } .attachment-icon[data-mime="pdf"] { background: linear-gradient(135deg, #c53833, #8a2420); color: #fff; border-color: #8a2420; } .attachment-icon[data-mime="doc"], .attachment-icon[data-mime="docx"] { background: linear-gradient(135deg, #2b5fad, #1c4078); color: #fff; border-color: #1c4078; } .attachment-icon[data-mime="xls"], .attachment-icon[data-mime="xlsx"] { background: linear-gradient(135deg, #1e8f4f, #125a30); color: #fff; border-color: #125a30; } .attachment-icon[data-mime="ppt"], .attachment-icon[data-mime="pptx"] { background: linear-gradient(135deg, #d46a1f, #8a3e0e); color: #fff; border-color: #8a3e0e; } .attachment-icon[data-mime="jpg"], .attachment-icon[data-mime="png"], .attachment-icon[data-mime="webp"], .attachment-icon[data-mime="gif"] { background: linear-gradient(135deg, var(--a-gold), #8b6a2f); color: #fff; border-color: #8b6a2f; } .attachment-body { min-width: 0; } .attachment-name { display: block; font-size: 13px; font-weight: 700; color: var(--a-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .attachment-name:hover { color: var(--a-accent); text-decoration: none; } .attachment-meta { font-size: 11px; color: var(--a-ink-muted); font-weight: 700; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .attachment-actions { display: flex; gap: 4px; flex-shrink: 0; } .attachment-item.attachment-item-image { grid-template-columns: 96px 1fr auto; align-items: flex-start; } .attachment-thumb { display: block; width: 96px; height: 96px; border-radius: 6px; overflow: hidden; background: var(--a-surface); border: 1px solid var(--a-line); cursor: zoom-in; } .attachment-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .attachment-actions form { margin: 0; padding: 0; } .attachment-actions .btn { padding: 5px 9px; font-size: 13px; line-height: 1; } .attachment-upload { display: flex; gap: 10px; align-items: center; padding-top: 10px; border-top: 1px dashed var(--a-line); } .attachment-upload-label { flex: 1; display: flex; flex-direction: column; gap: 4px; } .attachment-upload input[type="file"] { font-size: 12px; color: var(--a-ink-muted); } .attachment-upload-hint { font-size: 10.5px; color: var(--a-ink-muted); font-weight: 700; } /* ---------- Recursos (documentos, formatos, plantillas) ---------- */ .resource-category { margin-bottom: 24px; } .resource-category-head { display: flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: -.01em; margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--a-line); } .resource-category-head .count { font-size: 11px; font-weight: 700; color: var(--a-ink-muted); background: var(--a-surface-2); border: 1px solid var(--a-line); padding: 1px 8px; border-radius: 999px; } .resource-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .resource-card { position: relative; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--a-shadow-sm); transition: border-color 180ms ease, transform 180ms ease; } .resource-card:hover { border-color: var(--a-line-strong); transform: translateY(-1px); } .resource-card.is-inactive { opacity: .6; } .resource-badge-inactive { position: absolute; top: 10px; right: 10px; padding: 2px 8px; background: rgba(217,164,0,.9); color: #fff; border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } .resource-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .resource-version { font-size: 10px; font-weight: 900; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: rgba(var(--a-accent-rgb), .12); color: var(--a-accent); border: 1px solid rgba(var(--a-accent-rgb), .25); } .resource-name { margin: 2px 0 0; font-size: 14px; letter-spacing: -.01em; line-height: 1.3; } .resource-desc { margin: 0; font-size: 12px; color: var(--a-ink-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .resource-changelog { font-size: 11px; background: var(--a-surface-2); border: 1px solid var(--a-line); border-radius: 6px; padding: 6px 10px; } .resource-changelog > summary { cursor: pointer; font-weight: 700; color: var(--a-ink-muted); list-style: none; } .resource-changelog > summary::-webkit-details-marker { display: none; } .resource-changelog > summary::before { content: '▸ '; color: var(--a-accent); } .resource-changelog[open] > summary::before { content: '▾ '; } .resource-changelog > div { margin-top: 6px; font-size: 11px; color: var(--a-ink); line-height: 1.5; } .resource-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 10.5px; color: var(--a-ink-muted); font-weight: 700; margin-top: auto; padding-top: 4px; } .resource-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--a-line); margin-top: 4px; } .resource-actions form { margin: 0; display: inline; } .resource-actions .btn { padding: 5px 10px; font-size: 11px; } /* ---------- Agenda / Calendario ---------- */ .calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius) var(--a-radius) 0 0; border-bottom: 0; flex-wrap: wrap; } .calendar-nav { display: flex; gap: 4px; } .calendar-title { margin: 0; font-size: 16px; letter-spacing: -.01em; text-transform: capitalize; } .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--a-line); border: 1px solid var(--a-line); border-radius: 0 0 var(--a-radius) var(--a-radius); overflow: hidden; margin-bottom: 20px; max-width: 100%; } .calendar-dow { background: var(--a-surface-2); padding: 6px 10px; font-size: 10px; font-weight: 800; color: var(--a-ink-muted); text-transform: uppercase; letter-spacing: .08em; text-align: center; } .calendar-cell { background: var(--a-surface); min-height: 108px; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; position: relative; min-width: 0; overflow: hidden; } .calendar-cell.is-other-month { background: var(--a-surface-2); opacity: .55; } .calendar-cell.is-today { background: color-mix(in srgb, var(--a-accent) 8%, var(--a-surface)); } .calendar-cell.is-today .calendar-daynum { background: var(--a-accent); color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; } .calendar-daynum { font-size: 12px; font-weight: 800; color: var(--a-ink-muted); line-height: 1; } .calendar-cell.has-events .calendar-daynum { color: var(--a-ink); } .calendar-events { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .calendar-event { display: flex; align-items: center; gap: 4px; padding: 2px 6px; background: linear-gradient(135deg, var(--a-accent), var(--a-accent-2)); color: #fff; border-radius: 4px; font-size: 10.5px; font-weight: 700; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; min-width: 0; } .calendar-event:hover { opacity: .9; text-decoration: none; } .calendar-event.all-day { background: linear-gradient(135deg, var(--a-gold), #8b6a2f); } /* Tareas del módulo PM en agenda */ .calendar-event.kind-task { background: linear-gradient(135deg, var(--a-gold), #8b6a2f); border-left: 2px solid #6a4d1f; } .calendar-event.kind-task.st-done { background: linear-gradient(135deg, #2b8a5f, #1b6f48); text-decoration: line-through; opacity: .85; } .calendar-event.kind-task.st-blocked { background: linear-gradient(135deg, #CC3B34, #8a2420); } .calendar-event.kind-task.pr-urgent { box-shadow: 0 0 0 1px var(--a-err); } .calendar-event .e-icon { font-weight: 900; flex-shrink: 0; } .calendar-event .e-time { font-weight: 900; font-size: 9.5px; letter-spacing: .02em; flex-shrink: 0; } .calendar-event .e-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; } .calendar-event-more { font-size: 10px; font-weight: 700; color: var(--a-ink-muted); padding: 2px 6px; } /* Panel de detalle de evento */ .event-detail-panel { background: var(--a-surface); border: 1px solid var(--a-accent); border-radius: var(--a-radius); box-shadow: var(--a-shadow-sm); margin-bottom: 20px; overflow: hidden; } .event-detail-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: linear-gradient(180deg, var(--a-surface-2), var(--a-surface)); border-bottom: 1px solid var(--a-line); } .event-detail-head h3 { margin: 0; font-size: 16px; letter-spacing: -.01em; } .event-detail-body { padding: 14px 16px; } .event-detail-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--a-ink-muted); font-weight: 700; margin-bottom: 12px; } .event-detail-meta span { color: var(--a-ink); } .event-detail-desc { font-size: 13px; line-height: 1.55; color: var(--a-ink2, var(--a-ink)); padding-top: 8px; border-top: 1px solid var(--a-line); } /* Agenda list */ .agenda-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .agenda-date-head { font-size: 11px; font-weight: 800; color: var(--a-ink-muted); text-transform: uppercase; letter-spacing: .06em; padding: 10px 0 4px; margin-top: 4px; border-top: 1px solid var(--a-line); } .agenda-date-head:first-child { border-top: 0; padding-top: 0; margin-top: 0; } .agenda-date-head.is-today { color: var(--a-accent); } .agenda-item { display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; background: var(--a-surface-2); border: 1px solid var(--a-line); border-radius: 7px; } .agenda-item.is-recurring::before { content: '⟳'; color: var(--a-gold); margin-right: -8px; } .agenda-item.kind-task { border-left: 3px solid var(--a-gold); padding-left: 8px; } .agenda-item.kind-task.st-done { opacity: .6; border-left-color: var(--a-ok); } .agenda-item.kind-task.st-done .agenda-title { text-decoration: line-through; } .agenda-item.kind-task.st-blocked { border-left-color: var(--a-err); } .agenda-item.kind-task .agenda-time { color: var(--a-gold); } .agenda-time { font-size: 11.5px; font-weight: 800; color: var(--a-ink-muted); font-variant-numeric: tabular-nums; } .agenda-title { font-size: 13px; font-weight: 700; color: var(--a-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .agenda-title:hover { color: var(--a-accent); text-decoration: none; } .agenda-loc { font-size: 11px; color: var(--a-ink-muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Laptops 13-14": compactar celdas para que el grid completo quepa en pantalla */ @media (max-width: 1280px) { .calendar-cell { min-height: 92px; padding: 5px 6px; } .calendar-event { padding: 2px 5px; font-size: 10px; gap: 3px; } .calendar-event .e-time { font-size: 9px; } .calendar-event-more { font-size: 9.5px; padding: 1px 5px; } } @media (max-width: 1024px) { .calendar-cell { min-height: 82px; padding: 4px 5px; } .calendar-event .e-time { display: none; } /* prioriza título */ .calendar-daynum { font-size: 11px; } } @media (max-width: 720px) { .calendar-cell { min-height: 70px; padding: 3px 4px; } .calendar-event .e-title { display: none; } .calendar-event .e-time { display: block; font-size: 9px; } .calendar-event .e-icon { display: inline-block; } .agenda-item { grid-template-columns: 70px 1fr; } .agenda-item .agenda-loc { display: none; } } .activity-log { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .activity-log li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; } .activity-log .avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--a-accent), var(--a-accent-2)); color: #fff; font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .activity-log .activity-body { flex: 1; min-width: 0; } .activity-log .activity-body strong { color: var(--a-ink); font-weight: 800; } .activity-log .activity-body em { color: var(--a-accent); font-style: normal; font-weight: 700; } .activity-log .activity-delete { background: transparent; border: 0; color: var(--a-ink-muted); font-size: 14px; line-height: 1; padding: 0 4px; margin-left: 4px; cursor: pointer; border-radius: 4px; opacity: 0; transition: opacity 140ms ease, color 140ms ease, background 140ms ease; vertical-align: baseline; font-family: inherit; } .activity-log li:hover .activity-delete { opacity: .7; } .activity-log .activity-delete:hover { opacity: 1; color: var(--a-err); background: rgba(204,59,52,.1); } .activity-log .activity-body time { display: block; font-size: 10.5px; color: var(--a-ink-muted); font-weight: 700; margin-top: 2px; } .activity-diff { margin-top: 8px; font-size: 11px; } .activity-diff > summary { cursor: pointer; color: var(--a-accent); font-weight: 700; font-size: 11px; list-style: none; user-select: none; } .activity-diff > summary::-webkit-details-marker { display: none; } .activity-diff > summary::before { content: '▸ '; color: var(--a-accent); transition: transform 160ms ease; display: inline-block; } .activity-diff[open] > summary::before { content: '▾ '; } .activity-diff .diff-block { margin-top: 6px; background: var(--a-surface-2); border: 1px solid var(--a-line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .activity-diff .diff-row { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; } .activity-diff .diff-label { flex-shrink: 0; width: 60px; font-size: 10px; font-weight: 800; color: var(--a-ink-muted); text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; } .activity-diff .diff-old { flex: 1; min-width: 0; color: var(--a-ink-muted); text-decoration: line-through; text-decoration-color: rgba(204,59,52,.5); white-space: pre-wrap; word-break: break-word; } .activity-diff .diff-new { flex: 1; min-width: 0; color: var(--a-ink); background: color-mix(in srgb, var(--a-ok) 10%, transparent); padding: 2px 6px; border-radius: 4px; white-space: pre-wrap; word-break: break-word; } /* ---------- App card (launchpad) ---------- */ .app-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 320px)); justify-content: start; } .app-card { position: relative; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius); overflow: hidden; box-shadow: var(--a-shadow-sm); transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease; } .app-card:hover { transform: translateY(-3px); border-color: var(--a-accent); box-shadow: 0 16px 36px rgba(var(--a-accent-rgb), .18), 0 2px 8px rgba(0,0,0,.08); } .app-card.is-inactive { opacity: .55; } .app-card-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; height: 100%; } .app-card-link:hover { text-decoration: none; } .app-card-image { position: relative; aspect-ratio: 16 / 10; background: var(--a-surface-2); overflow: hidden; border-bottom: 1px solid var(--a-line); } .app-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; } .app-card:hover .app-card-image img { transform: scale(1.04); } .app-card-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, var(--a-surface-2), var(--a-surface)); color: var(--a-ink-muted); } .app-card-placeholder svg { width: 42px; height: 42px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .35; } .app-card-placeholder span { font-size: 22px; font-weight: 900; letter-spacing: .04em; color: var(--a-accent); } .app-card-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, rgba(var(--a-accent-rgb), .9), rgba(143,35,34,.92)); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; opacity: 0; transition: opacity 200ms ease; } .app-card:hover .app-card-overlay { opacity: 1; } .app-card-overlay svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .app-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .app-card-body h3 { margin: 0; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-card-body p { margin: 2px 0 0; font-size: 12px; color: var(--a-ink-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .app-card-url { margin-top: auto; padding-top: 8px; font-size: 11px; color: var(--a-ink-muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-card-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; opacity: 0; transition: opacity 160ms ease; z-index: 2; } .app-card:hover .app-card-actions { opacity: 1; } .app-card-actions .btn { background: rgba(20, 24, 36, .85); backdrop-filter: blur(6px); border-color: rgba(255,255,255,.15); color: #fff; } .app-card-actions .btn.danger { background: rgba(204,59,52,.9); border-color: rgba(204,59,52,.55); color: #fff; } .app-card-badge { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 3px 8px; background: rgba(217,164,0,.9); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } /* ---------- Project card (listado) ---------- */ /* ---------- Secciones en tasks.php (Asignadas a mí / Donde colaboro) ---------- */ .tasks-section-title { font-size: 13px; font-weight: 800; letter-spacing: -.01em; color: var(--a-ink); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } .tasks-section-title .count { font-size: 11px; font-weight: 700; color: var(--a-ink-muted); } /* ---------- Toggle grid/lista en projects ---------- */ .view-toggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--a-hover); border-radius: 8px; } .view-toggle a { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; padding: 6px 10px; border-radius: 6px; color: var(--a-ink-muted); text-decoration: none; transition: all 140ms ease; } .view-toggle a:hover { color: var(--a-ink); text-decoration: none; } .view-toggle a.active { background: var(--a-surface); color: var(--a-ink); box-shadow: var(--a-shadow-sm); } .view-toggle a svg { flex-shrink: 0; opacity: .85; } /* ---------- Listado de proyectos en modo tabla ---------- */ .project-list { font-size: 13px; } .project-list th .sort-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .project-list th .sort-link:hover { color: var(--a-ink); text-decoration: none; } .project-list th .sort-link.is-active { color: var(--a-ink); } .project-list th .sort-link .arrow { font-size: 10px; color: var(--a-accent); } .project-list td.col-name strong { font-weight: 800; letter-spacing: -.01em; } .project-list td.col-name .desc { font-size: 11.5px; color: var(--a-ink-muted); font-weight: 600; margin-top: 2px; line-height: 1.4; } .project-list td.col-progress { width: 28%; min-width: 180px; } .project-list-progress { display: flex; align-items: center; gap: 10px; } .project-list-progress .pm-progress { flex: 1; } .project-list-progress .pct { font-size: 11px; font-weight: 800; color: var(--a-ink-muted); min-width: 36px; text-align: right; } @media (max-width: 720px) { .project-list td.col-client, .project-list th.col-client { display: none; } } @media (max-width: 540px) { .project-list td.col-lead, .project-list th.col-lead { display: none; } .project-list td.col-progress { min-width: 110px; } .project-list-progress .pct { min-width: 30px; } } .project-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .project-card { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--a-shadow-sm); transition: transform 180ms ease, border-color 180ms ease; } .project-card:hover { transform: translateY(-2px); border-color: var(--a-line-strong); } .project-card h3 { margin: 0; font-size: 15px; letter-spacing: -.01em; } .project-card .client { font-size: 12px; color: var(--a-ink-muted); font-weight: 700; } .project-card .meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--a-ink-muted); } .project-card a { color: inherit; } .project-card a:hover { text-decoration: none; } /* ---------- Dashboard (inicio) ---------- */ .topbar.topbar-actions-only { justify-content: flex-end; margin-bottom: 14px; } /* KPIs fluidos: reflujo natural (5→4→3→2→1) según ancho disponible, sin breakpoints rígidos. */ .kpi-grid.kpi-5 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .dashboard-split { display: grid; gap: 16px; align-items: stretch; grid-template-columns: 1fr 1fr; margin-bottom: 20px; } .dashboard-split > .panel { margin: 0; display: flex; flex-direction: column; } .dashboard-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .dashboard-panel-head h2 { margin: 0; } .dashboard-panel-head a { font-size: 12px; font-weight: 800; } @media (max-width: 1024px) { .dashboard-split { grid-template-columns: 1fr; } } .pm-prio-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 8px; flex-shrink: 0; } .pm-prio-dot.pr-low { background: rgba(154,163,178,.55); } .pm-prio-dot.pr-normal { background: var(--a-ink-muted); } .pm-prio-dot.pr-high { background: var(--a-gold); } .pm-prio-dot.pr-urgent { background: var(--a-err); } /* Semáforo avance vs tiempo */ .semaforo-list { display: flex; flex-direction: column; gap: 10px; flex: 1; } .semaforo-item { display: block; padding: 10px 12px; border-radius: 8px; background: var(--a-surface-2); border: 1px solid var(--a-line); border-left-width: 3px; text-decoration: none; color: inherit; transition: border-color 140ms ease, transform 140ms ease; } .semaforo-item:hover { border-color: var(--a-line-strong); text-decoration: none; transform: translateX(2px); } .semaforo-item.is-behind { border-left-color: var(--a-err); } .semaforo-item.is-on_track { border-left-color: var(--a-gold); } .semaforo-item.is-ahead { border-left-color: var(--a-ok); } .semaforo-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 8px; } .semaforo-name { font-size: 13px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .semaforo-meta { font-size: 10px; font-weight: 800; color: var(--a-ink-muted); flex-shrink: 0; text-transform: uppercase; letter-spacing: .04em; } .semaforo-row { display: grid; grid-template-columns: 52px 1fr 38px; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; color: var(--a-ink-muted); margin-top: 3px; } .semaforo-row-label { text-transform: uppercase; letter-spacing: .06em; } .semaforo-bar { height: 5px; background: var(--a-hover); border-radius: 3px; overflow: hidden; } .semaforo-fill { height: 100%; background: var(--a-accent); border-radius: 3px; transition: width 300ms ease; } .semaforo-item.is-behind .semaforo-row:not(.is-time) .semaforo-fill { background: var(--a-err); } .semaforo-item.is-on_track .semaforo-row:not(.is-time) .semaforo-fill { background: var(--a-gold); } .semaforo-item.is-ahead .semaforo-row:not(.is-time) .semaforo-fill { background: var(--a-ok); } .semaforo-row.is-time .semaforo-fill { background: var(--a-ink-muted); opacity: .5; } .semaforo-row-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--a-ink); } .semaforo-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 10px; font-weight: 700; } .semaforo-legend-item.is-behind { color: var(--a-err); } .semaforo-legend-item.is-on_track { color: var(--a-gold); } .semaforo-legend-item.is-ahead { color: var(--a-ok); } /* Mi semana (calendario compacto 7 días + atrasadas) */ .dashboard-week { margin-bottom: 20px; } .week-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; } .week-day { background: var(--a-surface-2); border: 1px solid var(--a-line); border-radius: 8px; padding: 10px 8px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; } .week-day.is-overdue { background: rgba(204,59,52,.06); border-color: rgba(204,59,52,.25); } .week-day.is-today { background: var(--a-surface); border-color: var(--a-accent); box-shadow: 0 0 0 1px var(--a-accent) inset; } .week-day-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; } .week-day-label { font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--a-ink-muted); } .week-day.is-today .week-day-label { color: var(--a-accent); } .week-day.is-overdue .week-day-label { color: var(--a-err); } .week-day-chip { font-size: 8px; font-weight: 900; padding: 2px 6px; border-radius: 999px; background: var(--a-accent); color: #fff; letter-spacing: .05em; text-transform: uppercase; } .week-day-tasks { display: flex; flex-direction: column; gap: 4px; } .week-day-empty { font-size: 11px; color: var(--a-ink-muted); text-align: center; opacity: .45; padding: 10px 0; } .week-task { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 6px; background: var(--a-surface); border: 1px solid var(--a-line); text-align: left; cursor: pointer; width: 100%; font: inherit; transition: border-color 140ms ease; } .week-task:hover { border-color: var(--a-line-strong); } .week-task-row { display: flex; align-items: flex-start; gap: 6px; min-width: 0; } .week-task-row .pm-prio-dot { margin: 5px 0 0; flex-shrink: 0; } .week-task-title { font-size: 11px; font-weight: 700; color: var(--a-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; min-width: 0; } .week-task-project { font-size: 10px; color: var(--a-ink-muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 14px; } .week-task-more { font-size: 10px; font-weight: 800; color: var(--a-accent); text-align: center; padding: 4px; text-decoration: none; } .week-task-more:hover { text-decoration: underline; } @media (max-width: 1100px) { .week-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 640px) { .week-grid { grid-template-columns: repeat(2, 1fr); } .week-day { min-height: auto; } } @media (max-width: 420px) { .week-grid { grid-template-columns: 1fr; } } /* ============================================================================ Gantt — la joya de la corona ============================================================================ */ .gantt { position: relative; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius); box-shadow: var(--a-shadow-sm); margin-bottom: 20px; isolation: isolate; --gantt-row: 40px; --gantt-col: 32px; --gantt-left: 320px; --gantt-header-top: 28px; --gantt-header-mid: 22px; --gantt-header-bot: 30px; } /* Zoom-specific tweaks */ .gantt.zoom-month { --gantt-row: 36px; } .gantt.zoom-year { --gantt-row: 32px; } /* Toolbar */ .gantt-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--a-line); background: linear-gradient(180deg, var(--a-surface-2), var(--a-surface)); gap: 12px; flex-wrap: wrap; border-radius: var(--a-radius) var(--a-radius) 0 0; } .gantt-toolbar .title { font-size: 14px; font-weight: 800; letter-spacing: -.01em; } .gantt-toolbar .legend { display: flex; gap: 12px; font-size: 11px; color: var(--a-ink-muted); font-weight: 700; flex-wrap: wrap; } .gantt-toolbar .legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; } .gantt-toolbar .legend .dot.project { background: linear-gradient(135deg, var(--a-accent), var(--a-accent-2)); } .gantt-toolbar .legend .dot.stage { background: linear-gradient(135deg, #6A7181, #3A3F4B); } :root[data-theme="dark"] .gantt-toolbar .legend .dot.stage { background: linear-gradient(135deg, #9AA3B2, #5A6072); } .gantt-toolbar .legend .dot.task { background: linear-gradient(135deg, var(--a-gold), #8b6a2f); } .gantt-toolbar .legend .dot.today { background: var(--a-err); } .gantt-today-btn { background: var(--a-err) !important; color: #fff !important; border-color: rgba(204,59,52,.55) !important; padding: 6px 12px !important; font-size: 11px !important; box-shadow: 0 2px 10px rgba(204,59,52,.35); } .gantt-today-btn:hover { background: #b83530 !important; box-shadow: 0 4px 14px rgba(204,59,52,.5); } .gantt-today-btn svg { color: #fff; } .gantt-toolbar .scale { display: inline-flex; gap: 2px; padding: 3px; background: var(--a-hover); border-radius: 8px; } .gantt-toolbar .scale a { background: transparent; border: 0; color: var(--a-ink-muted); font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-family: inherit; text-decoration: none; transition: all 140ms ease; } .gantt-toolbar .scale a:hover { color: var(--a-ink); text-decoration: none; } .gantt-toolbar .scale a.active { background: var(--a-surface); color: var(--a-ink); box-shadow: var(--a-shadow-sm); } /* Scroll container — el overflow que habilita el sticky de la columna izquierda */ .gantt-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--a-line-strong) transparent; border-radius: 0 0 var(--a-radius) var(--a-radius); } .gantt-scroll::-webkit-scrollbar { height: 10px; } .gantt-scroll::-webkit-scrollbar-thumb { background: var(--a-line-strong); border-radius: 5px; } .gantt-scroll::-webkit-scrollbar-track { background: transparent; } .gantt-grid { position: relative; display: flex; align-items: stretch; min-width: 100%; width: max-content; } /* ---------- Panel izquierdo ---------- */ .gantt-left { position: sticky; left: 0; z-index: 10; flex: 0 0 var(--gantt-left); width: var(--gantt-left); background: var(--a-surface); border-right: 1px solid var(--a-line-strong); box-shadow: 4px 0 12px rgba(0,0,0,.12); } .gantt-left .hdr { height: calc(var(--gantt-header-top) + var(--gantt-header-bot)); padding: 0 16px; display: flex; align-items: center; border-bottom: 1px solid var(--a-line); font-size: 10px; font-weight: 800; color: var(--a-ink-muted); text-transform: uppercase; letter-spacing: .08em; background: var(--a-surface-2); } .gantt.zoom-week .gantt-left .hdr { height: calc(var(--gantt-header-top) + var(--gantt-header-mid) + var(--gantt-header-bot)); } .gantt.zoom-month .gantt-left .hdr, .gantt.zoom-year .gantt-left .hdr { height: var(--gantt-header-top); } .gantt-left .row { position: relative; height: var(--gantt-row); padding: 0 14px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--a-line); font-size: 12.5px; overflow: hidden; } .gantt-left .row .chev { font-size: 10px; color: var(--a-ink-muted); transition: transform 180ms ease; display: inline-block; width: 10px; flex-shrink: 0; } .gantt-left .row.is-collapsed .chev { transform: rotate(-90deg); } .gantt-left .row .text { flex: 1; min-width: 0; } .gantt-left .row .text .name { font-weight: 700; color: var(--a-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .gantt-left .row .text .meta { font-size: 10px; color: var(--a-ink-muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; letter-spacing: .01em; } /* 2da línea cuando es responsable (tareas/series): color más suave, peso medio. */ .gantt-left .row .text .assignee { font-size: 10.5px; color: var(--a-gold); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; letter-spacing: .01em; opacity: .85; } .gantt-left .row.task .text .assignee::before { content: '👤 '; opacity: .7; } .gantt-left .row.series .text .assignee::before { content: '👤 '; opacity: .7; } .gantt-left .row.project { background: color-mix(in srgb, var(--a-accent) 8%, var(--a-surface-2)); border-top: 2px solid var(--a-accent); border-bottom: 1px solid var(--a-line-strong); height: calc(var(--gantt-row) + 8px); box-shadow: inset 3px 0 0 var(--a-accent); padding-left: 14px; } .gantt-left .row.project:first-of-type { border-top: none; } .gantt-left .row.project .text .name { font-weight: 900; font-size: 13px; letter-spacing: -.01em; color: var(--a-ink); } .gantt-left .row.project .chev { color: var(--a-accent); font-weight: 900; } .gantt-left .row.stage { background: var(--a-surface-2); padding-left: 34px; box-shadow: inset 3px 0 0 #6A7181; } :root[data-theme="dark"] .gantt-left .row.stage { box-shadow: inset 3px 0 0 #5A6072; } .gantt-left .row.stage .text .name { font-weight: 800; } .gantt-left .row.task { padding-left: 58px; background: var(--a-surface); } .gantt-left .row.task .text .name { color: var(--a-ink-muted); font-weight: 600; font-size: 11.5px; } .gantt-left .row.task::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--a-gold); flex-shrink: 0; margin-right: 2px; } /* Ajustar fila del panel derecho para proyecto (altura mayor) */ .gantt-rows .row.project { height: calc(var(--gantt-row) + 8px); border-top: 2px solid var(--a-accent); background-color: color-mix(in srgb, var(--a-accent) 6%, var(--a-surface-2)); } .gantt-rows .row.project:first-of-type { border-top: none; } .gantt-left .row.togglable { cursor: pointer; user-select: none; } .gantt-left .row.togglable:hover { background: var(--a-hover); } .gantt-left .row.is-draggable { cursor: grab; } .gantt-left .row.is-draggable:active { cursor: grabbing; } /* Drag handle flota absolute a la izquierda — no empuja el contenido */ .gantt-left .row .drag-handle { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 12px; height: 14px; font-size: 11px; line-height: 1; color: var(--a-ink-muted); letter-spacing: -1px; opacity: .4; transition: opacity 140ms ease; cursor: grab; z-index: 2; display: flex; align-items: center; justify-content: center; } .gantt-left .row.is-draggable:hover .drag-handle { opacity: 1; color: var(--a-accent); } .gantt-left .row.project.dragging { opacity: .45; background: color-mix(in srgb, var(--a-accent) 18%, var(--a-surface-2)); } .gantt-left .row.project.drag-over { border-top: 3px solid var(--a-accent) !important; padding-top: 0; } /* ---------- Panel derecho ---------- */ .gantt-right { position: relative; flex: 1 0 auto; } /* La línea HOY vive dentro de gantt-right y abarca toda la altura (headers + filas) */ .gantt-right > .gantt-today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--a-err); box-shadow: 0 0 14px rgba(204,59,52,.55); pointer-events: none; z-index: 6; transform: translateX(-1px); } .gantt-right > .gantt-today-line::before { content: 'HOY'; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); padding: 2px 6px; border-radius: 4px; background: var(--a-err); color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .08em; white-space: nowrap; box-shadow: 0 2px 8px rgba(204,59,52,.4); } .gantt-head-top, .gantt-head-mid, .gantt-head-bot { display: grid; grid-auto-flow: column; grid-auto-columns: var(--gantt-col); border-bottom: 1px solid var(--a-line); background: var(--a-surface-2); } .gantt-head-top { height: var(--gantt-header-top); } .gantt-head-mid { height: var(--gantt-header-mid); background: var(--a-surface); } .gantt-head-bot { height: var(--gantt-header-bot); background: var(--a-surface); } .gantt-head-top .span, .gantt-head-mid .span { grid-column: span var(--span); display: flex; align-items: center; padding: 0 10px; font-size: 10px; font-weight: 800; color: var(--a-ink-muted); text-transform: uppercase; letter-spacing: .08em; border-right: 1px solid var(--a-line); white-space: nowrap; overflow: hidden; } .gantt-head-mid .span { font-size: 9.5px; color: var(--a-ink-muted); background: transparent; } .gantt-head-bot .day { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: var(--a-ink-muted); font-weight: 700; border-right: 1px solid var(--a-line); background: var(--a-surface); line-height: 1.1; } .gantt-head-bot .day .num { font-size: 11px; } .gantt-head-bot .day .dow { font-size: 9px; opacity: .6; } .gantt-head-bot .day.weekend { background: var(--a-hover); } .gantt-head-bot .day.today { background: rgba(var(--a-accent-rgb), .14); color: var(--a-accent); font-weight: 900; } .gantt-head-bot .day.today .dow { color: var(--a-accent); opacity: 1; } /* Zoom=week: días compactos */ .gantt.zoom-week .gantt-head-bot .day .num { font-size: 9px; font-weight: 800; } .gantt.zoom-week .gantt-head-bot .day .dow { display: none; } /* ---------- Filas ---------- */ .gantt-rows { position: relative; } .gantt-rows .row { height: var(--gantt-row); position: relative; border-bottom: 1px solid var(--a-line); background-image: linear-gradient(to right, var(--a-line) 1px, transparent 1px); background-size: var(--gantt-col) 100%; } .gantt-rows .row.stage { background-color: var(--a-surface-2); } .gantt-rows .row.project { background-color: color-mix(in srgb, var(--a-surface-2) 50%, var(--a-surface)); border-bottom: 1px solid var(--a-line-strong); } /* Overlays fin de semana */ .gantt-weekend-overlay { position: absolute; top: 0; bottom: 0; background: var(--a-hover); pointer-events: none; } /* ---------- Barras ---------- */ .gantt-bar { position: absolute; top: 7px; height: calc(var(--gantt-row) - 14px); border-radius: 7px; display: flex; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: -.01em; color: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12); transition: transform 180ms ease, box-shadow 180ms ease; cursor: pointer; overflow: visible; /* Permite que el label sobresalga cuando la barra es angosta */ z-index: 1; } .gantt-bar:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.18); z-index: 5; } /* Progreso interno (fill) */ .gantt-bar .fill { position: absolute; top: 0; left: 0; bottom: 0; background: rgba(255,255,255,.22); pointer-events: none; border-radius: 7px 0 0 7px; } /* Label — sobresale a la derecha cuando la barra es angosta */ .gantt-bar .label { position: relative; z-index: 2; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Label sticky: se pega al borde izquierdo del área del calendario mientras la barra esté atravesando el viewport, para que el nombre sea legible sin scroll cuando la barra empieza antes del viewport visible (típico al cargar con "Hoy"). */ .gantt-bar:not(.narrow) .label { position: sticky; left: var(--gantt-left); } .gantt-bar.narrow .label { overflow: visible; color: var(--a-ink); padding-left: calc(100% + 6px); text-shadow: 0 1px 0 var(--a-surface); } .gantt-bar.narrow.project .label { color: var(--a-accent); font-weight: 900; } .gantt-bar.narrow.stage .label { color: var(--a-ink); font-weight: 800; } .gantt-bar.narrow.task .label { color: var(--a-gold); } /* Estilos por tipo */ .gantt-bar.project { top: 10px; height: calc(var(--gantt-row) - 10px); background: linear-gradient(135deg, var(--a-accent), var(--a-accent-2)); border: 1px solid rgba(143, 35, 34, .5); } .gantt-bar.stage { background: linear-gradient(135deg, #6A7181, #3A3F4B); } :root[data-theme="dark"] .gantt-bar.stage { background: linear-gradient(135deg, #5A6272, #2A2F3A); } .gantt-bar.task { top: 10px; height: calc(var(--gantt-row) - 20px); background: linear-gradient(135deg, var(--a-gold), #8b6a2f); font-size: 10.5px; } /* Estados modificadores */ .gantt-bar.done { background: linear-gradient(135deg, #2b8a5f, #1b6f48) !important; } .gantt-bar.blocked { background: linear-gradient(135deg, #CC3B34, #8a2420) !important; } .gantt-bar.hold { background: linear-gradient(135deg, #D9A400, #8c6b00) !important; } /* Collapse handled via JS (toggle display:none en filas cuyo data-ancestors incluye un id colapsado) */ /* ---------- Project picker (timeline filter) ---------- */ .project-picker { background: var(--a-surface-2); border: 1px solid var(--a-line); border-radius: 10px; padding: 0; overflow: hidden; } .project-picker > summary { list-style: none; cursor: pointer; padding: 10px 14px; display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 800; user-select: none; } .project-picker > summary::-webkit-details-marker { display: none; } .project-picker > summary::before { content: '▸'; color: var(--a-ink-muted); font-size: 10px; transition: transform 180ms ease; display: inline-block; } .project-picker[open] > summary::before { transform: rotate(90deg); } .project-picker > summary .label { color: var(--a-ink); letter-spacing: -.01em; } .project-picker > summary .count { color: var(--a-ink-muted); font-weight: 700; font-size: 11px; margin-left: auto; } .project-picker .picker-actions { display: flex; gap: 6px; padding: 0 14px 10px; border-bottom: 1px solid var(--a-line); } .project-picker .picker-grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); padding: 12px 14px; max-height: 300px; overflow-y: auto; } .picker-chip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 140ms ease; } .picker-chip:hover { border-color: var(--a-line-strong); background: var(--a-hover); } .picker-chip input[type="checkbox"] { accent-color: var(--a-accent); margin: 0; flex-shrink: 0; } .picker-chip strong { color: var(--a-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .picker-chip em { color: var(--a-ink-muted); font-weight: 600; font-style: normal; font-size: 11px; } .picker-chip:has(input:checked) { background: rgba(var(--a-accent-rgb), .06); border-color: var(--a-accent); } /* Empty state */ .gantt-empty { padding: 48px 24px; text-align: center; color: var(--a-ink-muted); } .gantt-empty h3 { color: var(--a-ink); margin: 0 0 6px; } /* ---------- Gantt responsive (tablet / móvil) ---------- La columna izquierda fija de 320px es demasiado ancha en pantallas chicas: se reduce progresivamente y se compactan tipografías, sangrías y toolbar. pm_gantt.php fija --gantt-left INLINE (≈340px), así que aquí va con !important para poder reducirla. NO se toca --gantt-col: las barras y el encabezado de días se calculan en PHP con ese ancho y desalinearían. Las barras usan var(--gantt-left) para su label sticky, así que el resto escala. */ @media (max-width: 1024px) { .gantt { --gantt-left: 230px !important; } } @media (max-width: 768px) { .gantt { --gantt-left: 190px !important; --gantt-row: 42px; } .gantt-toolbar { padding: 10px 12px; } .gantt-toolbar .legend { display: none; } /* la leyenda satura en móvil */ } @media (max-width: 540px) { .gantt { --gantt-left: 44vw !important; /* deja ~56% del ancho para la línea de tiempo */ } .gantt-left .row { padding: 0 10px; font-size: 12px; } .gantt-left .row.stage { padding-left: 24px; } .gantt-left .row.task { padding-left: 36px; } .gantt-left .row .text .name { font-size: 12px; } .gantt-left .row.task .text .name { font-size: 11px; } .gantt-left .row .text .assignee { display: none; } /* ahorra alto vertical */ .gantt-left .hdr { padding: 0 10px; } .gantt-toolbar { gap: 8px; } .gantt-toolbar .scale a { padding: 5px 10px; } } /* Filtros del Timeline y selector de proyectos en móvil */ @media (max-width: 640px) { .timeline-filters { padding: 12px !important; } .timeline-filters .field { flex: 1 1 100% !important; } .project-picker .picker-grid { grid-template-columns: 1fr !important; } } /* ---------- Miembros chip list ---------- */ .member-chips { display: flex; flex-wrap: wrap; gap: 8px; } .member-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 999px; background: var(--a-surface-2); border: 1px solid var(--a-line); font-size: 12px; font-weight: 700; } .member-chip .avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--a-accent), var(--a-accent-2)); color: #fff; font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; } .member-chip .role { font-size: 10px; color: var(--a-ink-muted); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } /* ---------- Avatar inline (tabla) ---------- */ .avatar-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; } .avatar-inline .avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--a-accent), var(--a-accent-2)); color: #fff; font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Miniatura grande (tablas de reportes/proyectos) */ .avatar-inline.av-lg .avatar { width: 32px; height: 32px; font-size: 13px; } /* ---------- Stage/task editor inline ---------- */ .task-list { display: flex; flex-direction: column; gap: 8px; } .task-row { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 10px; align-items: center; padding: 10px 12px; background: var(--a-surface-2); border: 1px solid var(--a-line); border-radius: 8px; font-size: 12.5px; transition: border-color 140ms ease, background 140ms ease; } .task-row:hover { border-color: var(--a-line-strong); } .task-row-clickable { cursor: pointer; } .task-row-clickable:hover { background: var(--a-hover); border-color: var(--a-accent); } .task-row .t-title { font-weight: 700; color: var(--a-ink); } .task-row .t-meta { font-size: 11px; color: var(--a-ink-muted); font-weight: 700; } /* ---------- Empty state genérico ---------- */ .empty-state { padding: 48px 24px; text-align: center; color: var(--a-ink-muted); background: var(--a-surface); border: 1px dashed var(--a-line-strong); border-radius: var(--a-radius); } .empty-state h3 { color: var(--a-ink); margin: 0 0 6px; font-size: 16px; } .empty-state p { margin: 0 0 14px; font-size: 13px; } /* ---------- Stages/tasks editor dentro del project-view ---------- */ .stage-card { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius); margin-bottom: 14px; overflow: hidden; } .stage-card .stage-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--a-surface-2); border-bottom: 1px solid var(--a-line); } .stage-card .stage-head .stage-num { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--a-accent), var(--a-accent-2)); color: #fff; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; } .stage-card .stage-head h3 { margin: 0; font-size: 14px; flex: 1; } .stage-card .stage-body { padding: 12px 16px; } /* ---------- Stage card: variante "Sin etapa" (tareas sueltas) ---------- */ .stage-card.stage-card-loose { border-left: 3px dashed var(--a-line-strong); } .stage-card.stage-card-loose .stage-head h3 { font-style: italic; color: var(--a-ink-muted); } /* ---------- Badge de tarea recurrente (instancia de serie) ---------- */ .pm-rec-badge { display: inline-block; font-size: 11px; font-weight: 900; color: var(--a-accent); margin-right: 4px; vertical-align: baseline; cursor: help; } /* ---------- Modal: visibilidad condicional por modo (task vs series) ---------- */ .pm-task-modal[data-mode="task"] .pm-field-series-only { display: none; } .pm-task-modal[data-mode="series"] .pm-field-task-only { display: none; } .pm-task-modal .pm-field-series-only { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--a-line); } .pm-task-modal .pm-field-series-only .field-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .pm-task-modal .pm-field-series-only .field-row > label { font-size: 11px; font-weight: 800; color: var(--a-ink-muted); text-transform: uppercase; letter-spacing: .04em; min-width: 110px; } .pm-task-modal .pm-field-series-only .inline-group { display: flex; gap: 6px; align-items: center; } /* Subtitle visual dentro del modal en modo serie */ .pm-task-modal[data-mode="series"] .pm-field-series-only::before { content: '↻ Patrón de repetición'; display: block; font-size: 11px; font-weight: 800; color: var(--a-accent); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; } .pm-task-modal .pm-weekday-picker { display: flex; gap: 4px; flex-wrap: wrap; } .pm-task-modal .pm-weekday { display: inline-flex; } .pm-task-modal .pm-weekday input { position: absolute; opacity: 0; pointer-events: none; } .pm-task-modal .pm-weekday span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--a-input-bg); border: 1px solid var(--a-line); font-size: 12px; font-weight: 800; color: var(--a-ink-muted); cursor: pointer; user-select: none; transition: all 120ms ease; } .pm-task-modal .pm-weekday input:checked + span { background: linear-gradient(135deg, var(--a-accent), var(--a-accent-2)); border-color: var(--a-accent); color: #fff; } /* ---------- Picker de colaboradores (lista de checkboxes) ---------- */ .pm-task-modal .pm-collab-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; background: var(--a-input-bg); border: 1px solid var(--a-line); border-radius: 8px; padding: 4px; } .pm-task-modal .pm-collab-item { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--a-ink); user-select: none; transition: background 100ms ease; } .pm-task-modal .pm-collab-item:hover { background: var(--a-hover); } .pm-task-modal .pm-collab-item input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; accent-color: var(--a-accent); } .pm-task-modal .pm-collab-item:has(input:checked) { background: color-mix(in oklab, var(--a-accent) 10%, transparent); } .pm-task-modal .pm-collab-empty { padding: 12px 10px; font-size: 13px; color: var(--a-ink-muted); text-align: center; } /* ---------- Card de serie colapsible en el listado de tareas ---------- */ .pm-series-card { background: var(--a-surface-2); border: 1px solid var(--a-line); border-left: 3px solid var(--a-accent); border-radius: 8px; margin: 8px 0; overflow: hidden; } .pm-series-card > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; user-select: none; font-size: 13px; list-style: none; /* quita el marcador default */ } .pm-series-card > summary::-webkit-details-marker { display: none; } .pm-series-card > summary::before { content: '▸'; font-size: 10px; color: var(--a-ink-muted); flex-shrink: 0; transition: transform 120ms ease; } .pm-series-card[open] > summary::before { transform: rotate(90deg); } .pm-series-card .pm-rec-badge { font-size: 14px; } .pm-series-card .series-rule { font-size: 11px; color: var(--a-ink-muted); font-weight: 700; } .pm-series-card .series-next { font-size: 11px; color: var(--a-accent); font-weight: 800; text-decoration: none; padding: 2px 6px; border-radius: 4px; } .pm-series-card .series-next:hover { background: color-mix(in srgb, var(--a-accent) 15%, transparent); text-decoration: none; } .pm-series-card .series-count { margin-left: auto; font-size: 11px; color: var(--a-ink-muted); font-weight: 700; } .pm-series-card .series-body { border-top: 1px solid var(--a-line); padding: 8px 10px; } /* ---------- Barra "serie" en el Gantt (distintiva) ---------- */ .gantt-bar.series { background: repeating-linear-gradient( 45deg, color-mix(in srgb, var(--a-accent) 60%, transparent), color-mix(in srgb, var(--a-accent) 60%, transparent) 6px, color-mix(in srgb, var(--a-accent) 35%, transparent) 6px, color-mix(in srgb, var(--a-accent) 35%, transparent) 12px ); border: 1px dashed rgba(255,255,255,.25); cursor: pointer; /* abre la próxima instancia */ } .gantt-bar.series.hold { opacity: .5; } /* ---------- Tareas atrasadas: highlight + badge en la toolbar ---------- */ .gantt-bar.overdue { box-shadow: 0 0 0 2px var(--a-err), 0 2px 8px rgba(204,59,52,.3); } .gantt-bar.overdue::before { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--a-err); box-shadow: 0 0 0 2px var(--a-surface); } .gantt-overdue-count { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--a-err); background: rgba(204,59,52,.12); padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(204,59,52,.3); } .gantt-overdue-count .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--a-err); } /* ---------- Botón colapsar/expandir todos ---------- */ .gantt-toggle-all { padding: 5px 11px !important; font-size: 11px !important; } /* ---------- Tooltip custom del Gantt ---------- */ .gantt { position: relative; } .gantt-tip { position: absolute; z-index: 100; max-width: 300px; background: var(--a-surface); color: var(--a-ink); border: 1px solid var(--a-line-strong); border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 500; line-height: 1.45; letter-spacing: 0; box-shadow: 0 8px 24px rgba(0,0,0,.28); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 140ms ease, transform 140ms ease; white-space: normal; word-break: break-word; } .gantt-tip.visible { opacity: 1; transform: translateY(0); } /* ---------- Gantt en mobile: panel izquierdo angosto, toolbar apilada ---------- */ @media (max-width: 640px) { .gantt { --gantt-left: 180px; } .gantt-toolbar { flex-direction: column; align-items: stretch; padding: 10px 12px; } .gantt-toolbar > div:last-child { justify-content: flex-start; flex-wrap: wrap; } .gantt-toolbar .legend { display: none; } .gantt-left .row { padding: 0 8px; } .gantt-left .row .text .meta { display: none; } .gantt-left .row.project .text .name { font-size: 12px; } /* En mobile mantenemos el responsable visible — es el dato crítico de la tarea. */ .gantt-left .row .text .assignee { font-size: 10px; opacity: .95; } .gantt-left .row .text .name { font-size: 12.5px; line-height: 1.15; } /* Tooltip a prueba de pantallas chicas */ .gantt-tip { max-width: calc(100vw - 32px); font-size: 11.5px; } /* Form de filtros del timeline: apilado, sin min-widths */ .timeline-filters { flex-direction: column !important; align-items: stretch !important; } .timeline-filters .field { flex: 1 1 100% !important; min-width: 0 !important; } .timeline-filters .picker-grid { grid-template-columns: 1fr !important; } } /* ---------- Listado de series recurrentes en project-view ---------- */ .pm-recurrence-list h2 { margin: 0 0 12px; } .pm-recurrence-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .pm-recurrence-items li { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 8px; background: var(--a-surface-2); border: 1px solid var(--a-line); } .pm-recurrence-items li.is-paused { opacity: .6; } .pm-recurrence-items .rec-main { flex: 1; min-width: 0; } .pm-recurrence-items .rec-title { font-size: 13px; font-weight: 800; } .pm-recurrence-items .rec-meta { font-size: 11px; color: var(--a-ink-muted); font-weight: 700; margin-top: 3px; } .pm-recurrence-items .rec-actions { display: flex; gap: 6px; flex-shrink: 0; } /* ---------- Modal de nueva tarea (reusable) ---------- */ .pm-task-modal { border: none; padding: 0; border-radius: 12px; background: var(--a-surface); color: var(--a-ink); max-width: 640px; width: calc(100% - 32px); box-shadow: 0 30px 80px rgba(0,0,0,.35); } .pm-task-modal::backdrop { background: rgba(0,0,0,.5); backdrop-filter: blur(2px); } .pm-task-modal .pm-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--a-line); } .pm-task-modal .pm-modal-head h3 { margin: 0; font-size: 15px; letter-spacing: -.01em; } .pm-task-modal .pm-modal-close { background: transparent; border: 0; color: var(--a-ink-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 6px; } .pm-task-modal .pm-modal-close:hover { background: var(--a-hover); color: var(--a-ink); } .pm-task-modal .pm-modal-body { padding: 16px 18px; } .pm-task-modal .pm-modal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; } .pm-task-modal .pm-modal-body .field { margin-bottom: 12px; } .pm-task-modal .pm-modal-body .pm-modal-grid .field { margin-bottom: 0; } .pm-task-modal .pm-modal-body .field-hint { font-size: 11px; color: var(--a-ink-muted); margin-top: 4px; font-weight: 600; } .pm-task-modal .pm-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--a-line); background: var(--a-bg); } /* ---------- Hamburguesa mobile + sidebar off-canvas ---------- */ .admin-hamburger { display: none; position: fixed; top: 12px; left: 12px; z-index: 1001; width: 40px; height: 40px; padding: 0; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 8px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 4px; } .admin-hamburger span { display: block; width: 20px; height: 2px; background: var(--a-ink); border-radius: 2px; transition: transform 200ms ease, opacity 150ms ease; } body.sidebar-open .admin-hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.sidebar-open .admin-hamburger span:nth-child(2) { opacity: 0; } body.sidebar-open .admin-hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .admin-sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.5); } @media (max-width: 900px) { .admin-layout { grid-template-columns: 1fr; } .admin-hamburger { display: flex; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; z-index: 1000; transform: translateX(-100%); transition: transform 220ms ease; box-shadow: 0 0 40px rgba(0,0,0,.4); } body.sidebar-open .sidebar { transform: translateX(0); } body.sidebar-open .admin-sidebar-backdrop { display: block; } .main { padding: 64px 16px 24px; } /* padding-top deja espacio al hamburger */ .topbar { margin-bottom: 16px; } .topbar h1 { font-size: 18px; } } /* Tablets y mobile: modal, tabla y KPIs compactos */ @media (max-width: 640px) { .pm-task-modal .pm-modal-grid { grid-template-columns: 1fr; } .pm-task-modal { max-width: none; width: 100%; height: 100%; max-height: 100%; border-radius: 0; } .kpi-grid { grid-template-columns: 1fr; } .table { font-size: 12px; } .table th, .table td { padding: 8px 10px; } } /* Tablas anchas en pantallas chicas: que el panel que las contiene haga scroll horizontal en lugar de recortarse contra el overflow-x:hidden de .main (mismo enfoque que projects.php hace inline). Aplica a cualquier .panel con una tabla como hija directa. */ @media (max-width: 900px) { .panel:has(> table.table) { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Pestañas tipo píldora (.tabs) sin wrap: que se deslicen en vez de desbordarse cuando hay varias en una pantalla angosta. */ .tabs { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* sin barra visible; el deslizamiento es por gesto */ } .tabs::-webkit-scrollbar { display: none; } .tabs a { white-space: nowrap; flex-shrink: 0; } /* Paneles-fila (tiras de totales, toolbars) con display:flex inline y sin flex-wrap: que envuelvan en móvil en vez de cortarse (p.ej. Ingresos / Egresos / Neto en Movimientos). */ .panel[style*="display:flex"], .panel[style*="display: flex"] { flex-wrap: wrap; } /* Imágenes (previews de logo en Ajustes, etc.) que no rebasen su contenedor. */ .main img { max-width: 100%; } } /* ---------- Mi perfil (admin/profile.php) ---------- */ .profile-grid { max-width: 720px; } .profile-panel-head { margin-bottom: 14px; } .profile-panel-head h2 { margin: 0 0 4px; } .profile-panel-head .help { margin: 0; font-size: 12px; color: var(--a-ink-muted); } .profile-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; } .profile-meta .profile-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0; font-size: 13px; } .profile-meta dt { color: var(--a-ink-muted); font-weight: 700; } .profile-meta dd { margin: 0; color: var(--a-ink); } .profile-grid .field input[disabled] { opacity: .65; cursor: not-allowed; } .profile-grid .field-hint { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--a-ink-muted); } /* ---------- Preferencias de notificación ---------- */ .notif-prefs-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; } .notif-prefs-table th { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--a-ink-muted); padding: 8px 10px; border-bottom: 1px solid var(--a-line); text-align: center; } .notif-prefs-table tbody td { padding: 10px; border-bottom: 1px solid var(--a-line); vertical-align: middle; } .notif-prefs-table tbody tr:last-child td { border-bottom: 0; } .notif-switch { display: inline-block; position: relative; width: 36px; height: 20px; cursor: pointer; } .notif-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .notif-switch span { position: absolute; inset: 0; background: var(--a-line-strong); border-radius: 999px; transition: background .15s ease; } .notif-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform .15s ease; } .notif-switch input:checked + span { background: var(--a-accent); } .notif-switch input:checked + span::after { transform: translateX(16px); } .notif-switch input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-accent) 35%, transparent); } /* ---------- Bitácora del proyecto (tab en project-view) ---------- */ .bitacora { display: flex; flex-direction: column; gap: 16px; } .bitacora-filters { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: 12px 14px; box-shadow: var(--a-shadow-sm); } .bitacora-filters-row { display: grid; grid-template-columns: 140px 180px 140px 140px 1fr auto; gap: 10px; align-items: end; } .bitacora-filters .field { margin: 0; } .bitacora-filters .field label { display: block; font-size: 10px; color: var(--a-ink-muted); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; } .bitacora-filters-actions { display: flex; gap: 6px; } .bitacora-search input { width: 100%; } .bitacora-day { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: 14px 16px; box-shadow: var(--a-shadow-sm); } .bitacora-day-head { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--a-ink-muted); text-transform: uppercase; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--a-line); } .bitacora-event { display: grid; grid-template-columns: 44px 20px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--a-line); font-size: 13px; line-height: 1.35; } .bitacora-event:last-child { border-bottom: none; } .bitacora-time { color: var(--a-ink-muted); font-weight: 700; font-size: 11.5px; font-variant-numeric: tabular-nums; padding-top: 2px; } .bitacora-icon { font-size: 14px; line-height: 1; padding-top: 2px; } .bitacora-body { min-width: 0; } .bitacora-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; } .bitacora-line strong { color: var(--a-ink); font-weight: 800; } .bitacora-verb { color: var(--a-ink-muted); } .bitacora-task-ref { color: var(--a-accent); font-weight: 700; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .bitacora-task-ref:hover { text-decoration: underline; } .bitacora-details { margin-top: 3px; font-size: 12px; color: var(--a-ink-muted); word-break: break-word; } .bitacora-old { text-decoration: line-through; opacity: .75; } .bitacora-new { color: var(--a-ink); font-weight: 700; } .bitacora-note { font-style: italic; } /* Plegado de item_toggled */ .bitacora-toggle-fold { margin-top: 6px; } .bitacora-toggle-fold > summary { cursor: pointer; user-select: none; padding: 6px 8px; border-radius: 6px; font-size: 12px; color: var(--a-ink-muted); font-weight: 700; display: flex; align-items: center; gap: 6px; background: var(--a-hover); } .bitacora-toggle-fold > summary:hover { color: var(--a-ink); } .bitacora-toggle-fold[open] > summary { margin-bottom: 6px; } .bitacora-toggle-list { padding-left: 8px; border-left: 2px solid var(--a-line); } .bitacora-more { text-align: center; padding: 6px 0 2px; } /* Color sutil por grupo de evento (borde izquierdo del evento) */ .bitacora-event.bitacora-g-project { box-shadow: inset 3px 0 0 var(--a-accent); padding-left: 10px; } .bitacora-event.bitacora-g-stage { box-shadow: inset 3px 0 0 #6a7181; padding-left: 10px; } .bitacora-event.bitacora-g-member { box-shadow: inset 3px 0 0 #2b8a5f; padding-left: 10px; } .bitacora-event.bitacora-g-collaborator { box-shadow: inset 3px 0 0 #2b8a5f; padding-left: 10px; } .bitacora-event.bitacora-g-comment { box-shadow: inset 3px 0 0 #d9a400; padding-left: 10px; } .bitacora-event.bitacora-g-attachment { box-shadow: inset 3px 0 0 #d9a400; padding-left: 10px; } .bitacora-event.bitacora-g-checklist { box-shadow: inset 3px 0 0 var(--a-ink-muted); padding-left: 10px; } /* Mobile */ @media (max-width: 720px) { .bitacora-filters-row { grid-template-columns: 1fr 1fr; gap: 8px; } .bitacora-search, .bitacora-filters-actions { grid-column: 1 / -1; } .bitacora-filters-actions { justify-content: flex-end; } .bitacora-event { grid-template-columns: 40px 18px 1fr; font-size: 12.5px; } .bitacora-day { padding: 12px; } } /* ============================================================================ Módulo Reportes — scopeado a .reports-* y selectores propios. ============================================================================ */ .reports-filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 14px 16px; } .reports-filterbar .field { flex: 1; min-width: 140px; margin: 0; } .reports-filterbar .field-actions { display: flex; gap: 8px; align-items: flex-end; } .reports-table .reports-type-pill, .reports-detail .reports-type-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; } .reports-status, .reports-prio { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .reports-status.st-open { background: rgba(59,130,246,.18); color: #93c5fd; } .reports-status.st-in_progress { background: rgba(245,158,11,.18); color: #fcd34d; } .reports-status.st-resolved { background: rgba(16,185,129,.18); color: #6ee7b7; } .reports-status.st-closed { background: rgba(107,114,128,.18); color: #d1d5db; } .reports-status.st-cancel { background: rgba(204,59,52,.14); color: #fca5a5; } /* Barra de pestañas de familia (Finanzas / RH) */ .subtabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 18px; border-bottom: 1px solid var(--a-line, #e5e7eb); } .subtabs a { padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--a-ink-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .subtabs a:hover { color: var(--a-ink); } .subtabs a.active { color: var(--a-accent, #3b82f6); border-bottom-color: var(--a-accent, #3b82f6); } /* Barra de contexto: pestañas (izq) + selector de entidad contable (der, solo Finanzas) */ .context-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 18px; } .context-bar .subtabs { margin: 0; flex: 1 1 auto; } .context-spacer { flex: 1 1 auto; } .entity-chip { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 5px 8px 5px 10px; border: 1px solid var(--a-line); border-radius: 9px; background: var(--a-surface); } .entity-chip svg { width: 15px; height: 15px; stroke: var(--a-ink-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .entity-chip select { border: 0; background: transparent; color: var(--a-ink); font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; outline: none; } .reports-prio.pr-low { background: rgba(107,114,128,.16); color: #9ca3af; } .reports-prio.pr-normal { background: rgba(59,130,246,.16); color: #93c5fd; } .reports-prio.pr-high { background: rgba(239,68,68,.18); color: #fca5a5; } [data-theme="light"] .reports-status.st-open { color: #1d4ed8; } [data-theme="light"] .reports-status.st-in_progress { color: #92400e; } [data-theme="light"] .reports-status.st-resolved { color: #047857; } [data-theme="light"] .reports-status.st-closed { color: #374151; } [data-theme="light"] .reports-status.st-cancel { color: #b91c1c; } [data-theme="light"] .reports-prio.pr-low { color: #4b5563; } [data-theme="light"] .reports-prio.pr-normal { color: #1d4ed8; } [data-theme="light"] .reports-prio.pr-high { color: #b91c1c; } .reports-detail { display: flex; flex-direction: column; gap: 14px; } .reports-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 12px; } .reports-meta-grid .meta-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--a-ink-muted); margin-bottom: 4px; } .reports-status-actions { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--a-line); padding-top: 10px; } .reports-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 10px; } .reports-att-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .reports-att-item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 8px; border: 1px solid var(--a-line); border-radius: 6px; background: var(--a-input-bg); } .reports-att-icon { font-size: 14px; } .reports-att-item.reports-att-image { align-items: flex-start; gap: 12px; } .reports-att-thumb { flex: 0 0 auto; display: block; width: 96px; height: 96px; border-radius: 6px; overflow: hidden; background: var(--a-bg); border: 1px solid var(--a-line); cursor: zoom-in; } .reports-att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .reports-att-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .reports-att-info > a { font-weight: 600; word-break: break-all; } .reports-att-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid var(--a-line); padding-top: 12px; margin-top: 4px; } .reports-att-form { display: flex; flex-direction: column; gap: 6px; font-size: 12px; } .reports-att-form label { font-weight: 700; color: var(--a-ink-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; } .reports-comments { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .reports-comment { border-left: 2px solid var(--a-line); padding: 6px 10px; font-size: 13px; } .reports-comment-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; } .reports-comment-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .reports-comment-form textarea { width: 100%; } .reports-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; } .reports-timeline li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: baseline; } .reports-timeline-icon { text-align: center; color: var(--a-ink-muted); } .reports-dialog { border: 1px solid var(--a-line); border-radius: 10px; background: var(--a-bg); color: var(--a-ink); padding: 0; width: min(640px, 92vw); max-height: 90vh; } .reports-dialog::backdrop { background: rgba(0,0,0,.55); } .reports-new-form { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; } .reports-new-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .reports-new-head h2 { margin: 0; font-size: 16px; } .reports-new-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .reports-new-foot { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--a-line); padding-top: 12px; margin-top: 4px; } @media (max-width: 720px) { .reports-filterbar .field { min-width: 100%; } .reports-att-forms { grid-template-columns: 1fr; } .reports-meta-grid { grid-template-columns: 1fr 1fr; } } /* ============================================================================ Notificaciones (Fase 4a) — campanita, dropdown, historial. ============================================================================ */ .pm-notif-bell-wrap { position: fixed; top: 8px; /* centrada dentro de la app bar oscura (56px de alto) */ right: 24px; /* alineada al borde derecho de la app bar; el gutter del html evita el choque con la scrollbar */ z-index: 9999; /* arriba de todo, incluido sidebar mobile (1001) e iframes BI */ pointer-events: auto; } .pm-notif-bell-wrap * { pointer-events: auto; } .pm-notif-bell { position: relative; width: 40px; height: 40px; border-radius: 10px; /* Siempre oscura: vive sobre la app bar oscura, congruente con el sidebar (no depende del tema claro/oscuro global). */ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #F4F6FB; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; text-decoration: none; /* el elemento ahora es , no underline */ } .pm-notif-bell:visited { color: #F4F6FB; } .pm-notif-bell:hover { background: rgba(255,255,255,.16); } .pm-notif-bell svg { width: 20px; height: 20px; fill: currentColor; } .pm-notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--a-bg); } .pm-notif-badge[hidden] { display: none; } .pm-notif-dropdown { position: absolute; top: 48px; right: 0; width: min(380px, 92vw); max-height: min(520px, 80vh); overflow: hidden; background: var(--a-bg); border: 1px solid var(--a-line); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.45); display: flex; flex-direction: column; } .pm-notif-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--a-line); } .pm-notif-head strong { font-size: 13px; } .pm-notif-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; } .pm-notif-item { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--a-line); cursor: pointer; transition: background .12s ease; } .pm-notif-item:last-child { border-bottom: 0; } .pm-notif-item:hover { background: rgba(255,255,255,.04); } .pm-notif-item.is-unread { background: rgba(59,130,246,.08); } .pm-notif-item.is-unread:hover { background: rgba(59,130,246,.14); } .pm-notif-item.is-unclickable { cursor: default; } .pm-notif-snippet { font-size: 12px; color: var(--a-ink-muted); line-height: 1.4; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pm-notif-history-item.is-unclickable .pm-notif-history-link { cursor: default; } .pm-notif-icon { font-size: 14px; color: var(--a-ink-muted); line-height: 1.6; } .pm-notif-title { font-size: 13px; font-weight: 600; line-height: 1.35; margin-bottom: 3px; color: var(--a-ink); } .pm-notif-meta { font-size: 11px; color: var(--a-ink-muted); } .pm-notif-empty { padding: 28px 14px; text-align: center; font-size: 12px; color: var(--a-ink-muted); } .pm-notif-foot { padding: 8px 14px; text-align: center; border-top: 1px solid var(--a-line); } .pm-notif-foot a { font-size: 12px; font-weight: 700; text-decoration: none; color: var(--a-accent, #3b82f6); } /* Historial completo */ .pm-notif-history { list-style: none; margin: 0; padding: 0; } .pm-notif-history-item { border-bottom: 1px solid var(--a-line); } .pm-notif-history-item:last-child { border-bottom: 0; } .pm-notif-history-item.is-unread { background: rgba(59,130,246,.08); } .pm-notif-history-link { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 12px 16px; text-decoration: none; color: inherit; } .pm-notif-history-link:hover { background: rgba(255,255,255,.04); } [data-theme="light"] .pm-notif-bell { background: rgba(0,0,0,.04); } [data-theme="light"] .pm-notif-bell:hover { background: rgba(0,0,0,.09); } [data-theme="light"] .pm-notif-item.is-unread, [data-theme="light"] .pm-notif-history-item.is-unread { background: rgba(59,130,246,.12); } @media (max-width: 900px) { /* En móvil la campanita va en la esquina sup. der. (el hamburger está a la izquierda); centrada dentro de la app bar oscura. */ .pm-notif-bell-wrap { top: 8px; right: 14px; } .pm-notif-dropdown { top: 44px; right: 0; max-width: calc(100vw - 24px); } } /* Fix bug: el hidden del atributo se sobreescribe por display:flex del dropdown */ .pm-notif-dropdown[hidden] { display: none !important; } /* Fix bug: reservar espacio para la campanita fija en el topbar y breadcrumb. Sin esto, los h1 y los breadcrumbs de cada página quedan tapados por la campana. */ .topbar, .breadcrumb { padding-right: 116px; /* campanita (56) + botón de pendientes a su izquierda */ } @media (max-width: 900px) { /* En mobile, campanita + pendientes en la esquina sup. der. (evitando el hamburger), así que necesita aún más espacio libre */ .topbar, .breadcrumb { padding-right: 156px; } } /* Animación "nueva notificación": shake de la campanita + pulse del badge. Se dispara agregando .has-new al botón cuando el polling detecta count > prevCount. */ @keyframes pmNotifShake { 0% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } 100% { transform: rotate(0); } } @keyframes pmNotifPulse { 0% { transform: scale(1); box-shadow: 0 0 0 2px var(--a-bg); } 50% { transform: scale(1.25); box-shadow: 0 0 0 2px var(--a-bg), 0 0 0 6px rgba(239,68,68,.35); } 100% { transform: scale(1); box-shadow: 0 0 0 2px var(--a-bg); } } .pm-notif-bell.has-new svg { animation: pmNotifShake 0.9s cubic-bezier(.36,.07,.19,.97) both; transform-origin: 50% 25%; /* bisagra arriba, como una campana real */ color: #ef4444; } .pm-notif-bell.has-new .pm-notif-badge { animation: pmNotifPulse 0.9s ease-in-out 2; /* dos pulsos mientras shakea */ } /* ===== Inbox de pendientes (botón a la izquierda de la campanita) ===== */ .pm-inbox-wrap { position: fixed; top: 8px; right: 76px; /* 24 (bell right) + 40 (bell width) + 12 (gap) */ z-index: 9999; pointer-events: auto; } .pm-inbox-wrap * { pointer-events: auto; } .pm-inbox-wrap--inline { position: static; } .pm-inbox-btn { position: relative; width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.08); /* siempre oscura, sobre la app bar */ border: 1px solid rgba(255,255,255,.16); color: #F4F6FB; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; } .pm-inbox-btn:hover { background: rgba(255,255,255,.16); } .pm-inbox-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } [data-theme="light"] .pm-inbox-btn { background: rgba(0,0,0,.04); } [data-theme="light"] .pm-inbox-btn:hover { background: rgba(0,0,0,.09); } .pm-inbox-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #3b82f6; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--a-bg); } .pm-inbox-badge[hidden] { display: none; } .pm-inbox-dropdown { position: absolute; top: 48px; right: 0; width: min(360px, 92vw); max-height: min(520px, 80vh); overflow: hidden; background: var(--a-bg); border: 1px solid var(--a-line); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.45); display: flex; flex-direction: column; } .pm-inbox-dropdown[hidden] { display: none !important; } .pm-inbox-head { padding: 10px 14px; border-bottom: 1px solid var(--a-line); } .pm-inbox-head strong { font-size: 13px; } .pm-inbox-add { padding: 10px 14px; border-bottom: 1px solid var(--a-line); } .pm-inbox-add input { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--a-line); background: var(--a-surface-2); color: var(--a-ink); font-size: 13px; } .pm-inbox-add input:focus { outline: none; border-color: var(--a-accent, #3b82f6); } .pm-inbox-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; } .pm-inbox-item { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--a-line); } .pm-inbox-item:last-child { border-bottom: 0; } .pm-inbox-body { flex: 1; font-size: 13px; color: var(--a-ink); line-height: 1.35; word-break: break-word; } .pm-inbox-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .pm-inbox-act { font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--a-line); background: transparent; color: var(--a-ink-muted); cursor: pointer; text-decoration: none; line-height: 1.4; white-space: nowrap; } .pm-inbox-act:hover { background: rgba(127,127,127,.12); color: var(--a-ink); } .pm-inbox-act.danger:hover { color: #ef4444; border-color: #ef4444; } .pm-inbox-empty { padding: 24px 14px; text-align: center; font-size: 12px; color: var(--a-ink-muted); } .pm-inbox-foot { padding: 8px 14px; text-align: center; font-size: 11px; color: var(--a-ink-muted); border-top: 1px solid var(--a-line); } @media (max-width: 900px) { .pm-inbox-wrap { top: 8px; right: 64px; } /* a la izquierda de la campanita (right:14) */ .pm-inbox-dropdown { top: 44px; right: 0; max-width: calc(100vw - 24px); } } /* ===== Modal de novedades (anuncio de bienvenida) ===== */ .pm-ann { border: 0; padding: 0; background: transparent; max-width: 540px; width: min(540px, 92vw); color: var(--a-ink); } .pm-ann::backdrop { background: rgba(10,14,25,.58); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .pm-ann[open] { animation: pmAnnIn .22s var(--a-ease, ease) both; } @keyframes pmAnnIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } .pm-ann-card { background: var(--a-bg); border: 1px solid var(--a-line); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.5); padding: 24px 26px 22px; overflow: hidden; } .pm-ann-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #3b82f6, #6366f1); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; } .pm-ann-title { margin: 0 0 12px; font-size: 21px; font-weight: 800; line-height: 1.25; color: var(--a-ink); } .pm-ann-body { font-size: 14px; line-height: 1.55; color: var(--a-ink); max-height: 56vh; overflow-y: auto; } .pm-ann-body p { margin: 0 0 12px; color: var(--a-ink-muted); } .pm-ann-body h4 { margin: 16px 0 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--a-ink); } .pm-ann-body ul { margin: 0 0 8px; padding-left: 20px; } .pm-ann-body li { margin-bottom: 6px; color: var(--a-ink-muted); } .pm-ann-body strong { color: var(--a-ink); font-weight: 700; } .pm-ann-foot { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--a-line); } /* ========================================================================== */ /* Módulo BI (Tableros) — Fase 2 */ /* ========================================================================== */ /* Pill de categoría (reutilizada en bi-categories y bi-pages) */ .bi-cat-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; } .bi-ext-pill { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 600; background: rgba(245, 158, 11, .15); color: #d97706; } /* Form de acceso en bi-pages */ .bi-access-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; max-height: 360px; overflow-y: auto; padding: 4px; border: 1px solid var(--a-line); border-radius: 8px; } .bi-access-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; transition: background .12s ease; } .bi-access-row:hover { background: rgba(0, 0, 0, .03); } .bi-access-row > div { flex: 1; min-width: 0; } .bi-access-row > div > div:first-child { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Vista usuario: agrupación por categoría */ .bi-group { margin-bottom: 28px; } .bi-group-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin: 0 0 12px 0; } .bi-group-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } /* Grid de tarjetas con miniatura */ .bi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .bi-card { display: flex; flex-direction: column; background: var(--a-bg-elev); border: 1px solid var(--a-line); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .bi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .10); border-color: var(--a-accent, #3b82f6); } .bi-card-thumb { aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: rgba(0, 0, 0, .04); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--a-line); } .bi-card-thumb-placeholder { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; opacity: .85; } .bi-card-thumb-placeholder svg { width: 28px; height: 28px; } .bi-card-text { padding: 12px 14px 14px; } .bi-card-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--a-ink); } .bi-card-desc { font-size: 12px; color: var(--a-ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Form: preview de miniatura existente */ .bi-thumb-current { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 10px; background: rgba(0, 0, 0, .03); border-radius: 8px; } .bi-thumb-preview { max-width: 200px; max-height: 120px; border-radius: 6px; border: 1px solid var(--a-line); display: block; } .bi-thumb-remove { font-size: 13px; color: var(--a-ink-muted); cursor: pointer; display: flex; align-items: center; gap: 6px; } /* Vista de tablero: full-bleed (rompe padding del .main) */ .main[data-page="dashboard-view"] { padding: 0; } /* Header minimal del embed. position:fixed lo saca del flow normal y lo pone en una capa de overlay del browser, garantizadamente arriba del iframe del tablero (que en algunos navegadores captura clicks en su capa de compositor pese al z-index del DOM). El .main agrega padding-top para no comerlo. */ .bi-view-header { position: fixed; top: 0; left: 240px; /* después del sidebar fijo */ right: 0; z-index: 100; display: flex; align-items: center; gap: 14px; padding: 0 24px; min-height: 68px; border-bottom: 1px solid var(--a-line); background: var(--a-bg-elev); isolation: isolate; } .main[data-page="dashboard-view"] { padding-top: 68px; } @media (max-width: 720px) { .bi-view-header { left: 0; padding: 0 16px; min-height: 56px; } .main[data-page="dashboard-view"] { padding-top: 56px; } } @media (max-width: 720px) { .bi-view-header { padding: 0 16px; min-height: 56px; } } /* Campanita en modo inline (dentro del header, no fixed). */ .pm-notif-bell-wrap--inline { position: relative !important; top: auto !important; right: auto !important; z-index: auto; margin-left: 4px; } .pm-notif-bell-wrap--inline .pm-notif-dropdown { /* El dropdown sigue absolute al wrap, pero el wrap ahora está en el header. */ top: 48px; right: 0; } .bi-back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--a-ink-muted); text-decoration: none; padding: 6px 10px; border-radius: 6px; transition: background .12s ease, color .12s ease; } .bi-back-link:hover { background: rgba(0, 0, 0, .05); color: var(--a-ink); } .bi-view-title { flex: 1; margin: 0; font-size: 15px; font-weight: 600; color: var(--a-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bi-view-edit { font-size: 12px; color: var(--a-ink-muted); text-decoration: none; padding: 4px 10px; border: 1px solid var(--a-line); border-radius: 6px; transition: border-color .12s ease, color .12s ease; } .bi-view-edit:hover { color: var(--a-accent, #3b82f6); border-color: currentColor; } /* Embed wrap — sin borde, sin radius, full bleed. isolation:isolate + z-index:0 crean stacking context bajo para que la campanita fixed (z-index:200) y el dropdown queden siempre por encima del iframe (que en algunos casos captura el cursor). */ .bi-embed-wrap { isolation: isolate; z-index: 0; margin: 0; background: transparent; border-radius: 0; overflow: hidden; border: 0; width: 100%; position: relative; } .bi-embed { width: 100%; height: 100%; border: 0; display: block; } /* Modo responsive: aspect-ratio inline en el wrap; el iframe llena el wrap. El min-height evita iframes liliputienses en pantallas chicas. */ .bi-embed-mode-responsive { min-height: 360px; } /* Modo fixed: el wrap tiene height inline (style="height: Npx"); iframe lo llena. */ /* Modo viewport (default) y fallback: usa todo el alto disponible (header minimal ~50px). */ .bi-embed-mode-viewport, .bi-embed-fallback-viewport { height: calc(100vh - 50px); min-height: 480px; } @media (max-width: 720px) { .bi-embed-mode-viewport, .bi-embed-fallback-viewport { height: calc(100vh - 50px); min-height: 360px; } } /* ============================================================================ Dashboard premium (Inicio) — hero, KPIs, gráficas Chart.js ============================================================================ */ .dash-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .dash-hero-greet { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 0; } .dash-hero-greet .dash-hero-name { color: var(--a-accent); } .dash-hero-sub { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--a-ink-muted); } .dash-hero-sub b { color: var(--a-ink); font-weight: 700; font-variant-numeric: tabular-nums; } .dash-hero-sub .sep { opacity: .4; margin: 0 8px; } /* Grid de gráficas */ .dash-charts { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-bottom: 20px; } .dash-charts-wide { grid-column: 1 / -1; } @media (max-width: 1024px) { .dash-charts { grid-template-columns: 1fr; } } @media (max-width: 540px) { .chart-box { min-height: 220px; } .chart-box.is-tall { min-height: 250px; } .dash-card { padding: 16px 14px 12px; } } .dash-card { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; padding: 18px 18px 14px; box-shadow: var(--a-shadow-1); display: flex; flex-direction: column; } .dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .dash-card-title { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -.01em; } .dash-card-hint { font-size: 11px; font-weight: 600; color: var(--a-ink-muted); } .dash-card-sub { font-size: 11.5px; color: var(--a-ink-muted); margin: 2px 0 0; } .chart-box { position: relative; flex: 1; min-height: 240px; margin-top: 10px; } .chart-box.is-tall { min-height: 300px; } /* Leyenda de chips reutilizable */ .chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; } .chart-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--a-ink-muted); } .chart-legend-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; } /* Donut con total al centro */ .donut-center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .donut-center-num { font-size: 30px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; } .donut-center-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--a-ink-muted); margin-top: 3px; } /* ---- Responsive dashboard + campanita (evitar colisión con la campanita fija) ---- */ /* La campanita es position:fixed en la esquina sup. der. del contenido; en desktop reservamos su huella para que los botones de la fila superior (hero / topbar) no queden debajo de ella. */ @media (min-width: 901px) { /* Fila superior del contenido: reservar la huella de la campanita fija para que no tape los controles de la derecha (CTA del hero, acciones del topbar, chip de entidad en la barra de contexto de Finanzas). El context-bar solo necesita el espacio cuando muestra el chip de entidad (a la derecha). */ .dash-hero, .topbar { padding-right: 56px; } .context-bar:has(.entity-chip) { padding-right: 56px; } } @media (max-width: 540px) { .dash-hero-greet { font-size: 21px; } .dash-hero { gap: 10px; margin-bottom: 18px; } .dash-hero-sub { font-size: 12px; } } /* ============================================================================ Barra superior oscura (app bar) — congruente con el sidebar. Primer hijo de .main; ocupa todo el ancho del contenido (full-bleed, cancelando el padding lateral de .main) y es sticky en el tope. Usa la paleta dark del sidebar. La campanita fija se alinea visualmente dentro de ella; el título de cada pantalla (antes en su .topbar h1) ahora vive aquí. ============================================================================ */ .app-topbar { --a-ink: #F4F6FB; --a-ink-muted: #8A92A6; color-scheme: dark; /* Fija junto al sidebar (no sticky: .main tiene overflow-x:hidden, que lo convierte en contenedor de scroll y rompería position:sticky). */ position: fixed; top: 0; left: 240px; right: 0; z-index: 30; height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 64px 0 32px; /* derecha holgada para la campanita fija */ background: linear-gradient(180deg, #1A1F2E, #141824); border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 4px 14px rgba(0,0,0,.18); color: var(--a-ink); } .app-topbar-title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--a-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* El título de la página ya se muestra en la app bar: ocultar el h1 duplicado que cada pantalla renderiza dentro de su .topbar (esta queda como fila de acciones/meta debajo de la barra). */ .main .topbar h1 { display: none; } /* Si la .topbar solo contenía el título (sin acciones ni meta), colapsarla para no dejar un hueco vacío bajo la barra. */ .main .topbar:has(> h1:only-child) { display: none; } @media (max-width: 900px) { .app-topbar { left: 0; /* sidebar fuera de pantalla en móvil */ padding-left: 60px; /* deja sitio al botón hamburguesa fijo */ padding-right: 56px; } .app-topbar-title { font-size: 16px; } }