/* ============================================================================ SISSS — Estilos del panel de administración ============================================================================ */ :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; --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-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-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: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial; background: var(--a-bg); color: var(--a-ink); line-height: 1.45; font-size: 14px; } 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: 20px 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .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(184,51,47,.18), rgba(184,51,47,.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: 0 10px; } .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(184,51,47,.95), rgba(184,51,47,.70)); color: #fff; border-left: 4px solid var(--a-accent); padding-left: 10px; box-shadow: 0 1px 8px rgba(184,51,47,.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: 28px 32px; overflow-x: hidden; } .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(184,51,47,.6); color: #fff; } .btn.primary:hover { box-shadow: 0 10px 30px rgba(184,51,47,.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; } .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(184,51,47,.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(184,51,47,.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(184,51,47,.25); } .adm-login__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(184,51,47,.32); } .adm-login__cta:active { transform: translateY(0); } .adm-login__cta:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(184,51,47,.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(184,51,47,.08); color: #B8332F; border: 1px solid rgba(184,51,47,.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(184,51,47,.15); color: #f28c88; text-transform: uppercase; letter-spacing: .04em; } .slide-row.sortable-ghost { opacity: .4; } /* ============================================================================ Módulo de gestión de contratos (PM) ============================================================================ */ /* ---------- Sidebar: grupos colapsables + role pill + theme toggle ---------- */ .nav-group { display: flex; flex-direction: column; } .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(184,51,47,.15); color: var(--a-accent); border: 1px solid rgba(184,51,47,.25); } .role-pill.role-member { background: rgba(198,162,90,.15); color: var(--a-gold); border-color: rgba(198,162,90,.3); } .role-pill.role-editor { background: rgba(43,138,95,.15); color: var(--a-ok); border-color: rgba(43,138,95,.3); } .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; } /* ---------- 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; } /* ---------- KPI tiles (dashboard operativo) ---------- */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; } .kpi { position: relative; overflow: hidden; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: 18px 18px 16px; box-shadow: var(--a-shadow-sm); } .kpi .kpi-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--a-ink-muted); } .kpi .kpi-value { font-size: 34px; font-weight: 900; letter-spacing: -.02em; line-height: 1.05; margin-top: 6px; } .kpi .kpi-sub { font-size: 11px; color: var(--a-ink-muted); margin-top: 2px; font-weight: 700; } .kpi .kpi-ico { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; opacity: .7; color: var(--a-accent); } .kpi .kpi-ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; } .kpi.accent::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(184,51,47,.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); } /* ---------- 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 (contratos / 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(184,51,47,.12); color: var(--a-accent); border-color: rgba(184,51,47,.3); } .pm-status.st-review { background: rgba(198,162,90,.15); color: var(--a-gold); border-color: rgba(198,162,90,.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); } .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(198,162,90,.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(184,51,47,.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(184,51,47,.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; } /* ---------- Comentarios ---------- */ .comments { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 14px; } .comment-item { display: flex; gap: 10px; align-items: flex-start; } .comment-item .avatar { width: 30px; height: 30px; 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-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(184,51,47,.1); } /* ---------- 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(184,51,47,.12); color: var(--a-accent); border: 1px solid rgba(184,51,47,.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(184,51,47,.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(184,51,47,.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 contratos 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; } .kpi-grid.kpi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1100px) { .kpi-grid.kpi-5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .kpi-grid.kpi-5 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .kpi-grid.kpi-5 { grid-template-columns: 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: 900px) { .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 contrato (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(184,51,47,.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(184,51,47,.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; } /* ---------- 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; } /* ---------- 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; } } /* ---------- 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 contrato (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-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-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: 28px; /* alineado con padding-top de .main (centros coinciden con botones del topbar) */ right: 32px; /* alineado con padding-right de .main; 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; background: var(--a-panel-bg, rgba(255,255,255,.06)); border: 1px solid var(--a-line); color: var(--a-ink); 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: var(--a-ink); } .pm-notif-bell:hover { background: rgba(255,255,255,.12); } .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) { .pm-notif-bell-wrap { top: 10px; right: 60px; } /* no tapar el hamburger */ .pm-notif-dropdown { top: 44px; } } /* 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: 56px; } @media (max-width: 900px) { /* En mobile la campanita se movió a right:60px (evitando el hamburger), así que necesita aún más espacio libre */ .topbar, .breadcrumb { padding-right: 104px; } } /* 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 */ } /* ========================================================================== */ /* 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; } }