/* ============================================================================= FAENA - Control de Proyectos - Design Tokens Copiar a ProjectTracking.Web/Content/faena.css y cargar DESPUES de Bootstrap 5. Modo claro/oscuro mediante [data-theme] en . Tipografia: IBM Plex Sans (texto) - IBM Plex Mono (codigos/datos). ============================================================================= */ :root, [data-theme="light"] { --bg:#EBEEF2; --surface:#FFFFFF; --surface-2:#F5F7F9; --surface-3:#EAEEF2; --border:#DCE1E7; --border-2:#C7CFD8; --text:#19222C; --text-2:#586471; --text-3:#8A94A0; --primary:#1A4C86; --primary-2:#143C6B; --primary-100:#E6EDF6; --primary-50:#F1F5FA; --accent:#B7791F; --success:#1E8A5B; --warning:#C8881A; --danger:#C0392B; --info:#2D6CB5; --shadow:0 1px 2px rgba(20,38,61,.05), 0 4px 14px rgba(20,38,61,.05); --shadow-lg:0 12px 38px rgba(20,38,61,.16); --bar-track:#E4E8ED; --grid:#ECEFF3; } [data-theme="dark"] { --bg:#0E141C; --surface:#161E28; --surface-2:#1B2531; --surface-3:#212D3B; --border:#28333F; --border-2:#3A4757; --text:#E7ECF2; --text-2:#9DAAB8; --text-3:#6A7886; --primary:#4E92DE; --primary-2:#3C7AC0; --primary-100:#16273A; --primary-50:#121C28; --accent:#D6A042; --success:#34A877; --warning:#D69E2E; --danger:#E0655A; --info:#5B9BE0; --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.35); --shadow-lg:0 14px 40px rgba(0,0,0,.55); --bar-track:#26313E; --grid:#1C2631; } /* Estado de proyecto/tarea (texto sobre fondo translucido del mismo tono) */ :root { --status-draft:#6B7B8A; --status-planned:#2D6CB5; --status-active:#1E8A5B; --status-paused:#7C8896; --status-risk:#D9822B; --status-done:#1B6E8C; --status-cancelled:#C0392B; --prio-critical:#A4262C; --prio-high:#C0392B; --prio-medium:#B7791F; --prio-low:#5B7385; } /* Radios y espaciado base */ :root { --radius-sm:6px; --radius:9px; --radius-md:11px; --radius-lg:13px; --radius-xl:18px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; } body { font-family:'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; } .mono, .code { font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* Escala tipografica Display 30/700 - H1 19/700 - H2 17/600 - H3 14.5/600 Body 13.5/400 - Small 12/500 - Caption 11/600 (uppercase, tracking .04em) */ /* ============================================================================= Gantt (Bloque 7) - render propio sobre HTML/CSS/JS ============================================================================= */ .gantt { border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--surface); } .gantt-scroll { overflow:auto; max-height:70vh; position:relative; -webkit-overflow-scrolling:touch; } .gantt-grid { display:grid; } .gantt-row { display:flex; align-items:stretch; border-bottom:1px solid var(--grid); min-height:32px; } .gantt-row:hover { background:var(--surface-2); } .gantt-left { flex:0 0 var(--gleft, 320px); width:var(--gleft, 320px); position:sticky; left:0; z-index:3; background:var(--surface); border-right:1px solid var(--border); display:flex; align-items:center; padding:2px 8px; gap:6px; } .gantt-left .wbs { font-family:'IBM Plex Mono',monospace; color:var(--text-3); font-size:11px; min-width:42px; } .gantt-left .nm { font-size:12.5px; color:var(--text); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gantt-left .nm:hover { text-decoration:underline; } .gantt-left.phase .nm { font-weight:600; } .gantt-timeline { position:relative; flex:1 1 auto; } .gantt-head .gantt-left { font-weight:600; font-size:12px; color:var(--text-2); z-index:5; } .gantt-head { position:sticky; top:0; z-index:4; background:var(--surface); border-bottom:1px solid var(--border); } .gantt-head .gantt-timeline { background:var(--surface); } .g-month { position:absolute; top:0; height:20px; border-left:1px solid var(--border); font-size:11px; color:var(--text-2); padding:2px 4px; white-space:nowrap; overflow:hidden; } .g-day { position:absolute; top:20px; height:18px; width:1px; border-left:1px solid var(--grid); } .g-day .lbl { position:absolute; left:2px; top:1px; font-size:9px; color:var(--text-3); } .g-weekend { position:absolute; top:0; bottom:0; background:rgba(120,130,140,.06); } /* Cabecera adaptable */ .g-sub { position:absolute; top:0; height:19px; border-left:1px solid var(--border); font-size:11px; font-weight:600; color:var(--text-2); padding:2px 5px; white-space:nowrap; overflow:hidden; } .g-tick { position:absolute; top:20px; height:18px; font-size:9px; color:var(--text-3); padding-left:2px; border-left:1px solid var(--grid); line-height:16px; white-space:nowrap; } .g-night { position:absolute; top:0; bottom:0; background:rgba(60,80,110,.10); } .g-daysep { position:absolute; top:0; bottom:0; width:1px; background:var(--border); } .g-today { position:absolute; top:0; bottom:0; width:2px; background:var(--danger); opacity:.6; z-index:2; } .g-bar { position:absolute; height:16px; top:7px; border-radius:4px; background:var(--info); box-shadow:var(--shadow); overflow:hidden; cursor:default; } .g-bar .fill { position:absolute; left:0; top:0; bottom:0; background:rgba(0,0,0,.28); } .g-bar.phase { height:10px; top:10px; border-radius:3px; background:var(--primary); } .g-bar.task { background:var(--info); } .g-milestone { position:absolute; width:14px; height:14px; top:8px; background:var(--accent); transform:rotate(45deg); border-radius:2px; box-shadow:var(--shadow); } .g-bar .cap { position:absolute; font-size:10px; color:var(--text-2); white-space:nowrap; } /* Edicion visual del Gantt */ .g-bar.editable { cursor:grab; } .g-bar.editable.dragging { cursor:grabbing; opacity:.8; box-shadow:0 0 0 2px var(--primary); } .g-bar .g-handle { position:absolute; top:0; bottom:0; width:7px; z-index:2; cursor:ew-resize; } .g-bar .g-handle-l { left:0; } .g-bar .g-handle-r { right:0; } .g-milestone.editable { cursor:grab; } .g-milestone.editable.dragging { opacity:.8; } body.gantt-dragging, body.gantt-dragging * { user-select:none !important; } .gantt-saving { position:absolute; top:8px; right:12px; z-index:5; background:var(--primary); color:#fff; font-size:11px; padding:3px 10px; border-radius:999px; box-shadow:var(--shadow); } .g-bar.just-moved, .g-milestone.just-moved { animation:ganttFlash 1.6s ease; } @keyframes ganttFlash { 0% { box-shadow:0 0 0 3px var(--primary); } 70% { box-shadow:0 0 0 3px var(--primary); } 100% { box-shadow:var(--shadow); } } /* Tooltip de fechas en vivo */ .gantt-tip { position:absolute; z-index:9999; background:#0f172a; color:#f8fafc; font-size:11px; font-weight:600; padding:4px 9px; border-radius:5px; pointer-events:none; white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.15); } /* Barra fantasma al crear una tarea */ .g-ghost { position:absolute; height:16px; top:7px; border-radius:4px; z-index:3; background:rgba(26,76,134,.35); border:1.5px dashed var(--primary); } /* Modos de edicion */ .gantt-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .gantt-toolbar .btn.active { background:var(--primary); color:#fff; border-color:var(--primary); } .mode-add .gantt-row:not(.gantt-head) .gantt-timeline { cursor:crosshair; } .mode-split .g-bar.task { cursor:col-resize; } .mode-link .g-bar.task { cursor:alias; } .g-bar.link-source { box-shadow:0 0 0 3px var(--accent); } /* Calendario */ .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:8px; overflow:hidden; } .cal-head { background:var(--surface-2); color:var(--text-2); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; text-align:center; padding:6px 0; } .cal-cell { background:var(--surface); min-height:96px; min-width:0; padding:4px 5px; display:flex; flex-direction:column; gap:3px; } .cal-cell.cal-out { background:var(--surface-2); } .cal-cell.cal-out .cal-day { color:var(--text-3); } .cal-cell.cal-today { box-shadow:inset 0 0 0 2px var(--primary); } .cal-day { font-size:12px; font-weight:600; color:var(--text-2); } .cal-chip, .content-scroll a.cal-chip { display:block; font-size:10.5px; font-weight:600; padding:1px 6px; border-radius:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; color:#fff; } .content-scroll a.cal-chip:hover { color:#fff; opacity:.9; } .cal-legend .cal-chip { display:inline-block; margin-right:6px; } .cal-chip.cal-inicio { background:var(--info); } .cal-chip.cal-fin { background:var(--primary); } .cal-chip.cal-hito { background:var(--accent); } /* Notificaciones */ .tb-icon-btn { position:relative; } .tb-badge { position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 4px; background:var(--danger,#d9534f); color:#fff; font-size:10px; font-weight:700; line-height:16px; text-align:center; border-radius:999px; } .list-group-item.faena-unread { background:var(--primary-100, rgba(26,76,134,.06)); } .tb-dot-inline { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--primary); margin-right:4px; vertical-align:middle; } .g-nofecha { font-size:11px; color:var(--text-3); padding-left:6px; align-self:center; } .gantt-links { position:absolute; top:0; left:0; pointer-events:none; z-index:1; overflow:visible; } .gantt-legend { display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--text-2); margin:10px 2px; } .gantt-legend .sw { display:inline-block; width:14px; height:10px; border-radius:2px; margin-right:5px; vertical-align:middle; } /* ===== Kanban (Bloque 8) ===== */ .kanban { display:flex; gap:14px; overflow-x:auto; padding:4px 2px 14px; align-items:flex-start; } .kb-col { flex:0 0 280px; max-width:280px; background:var(--surface-2,#f4f6f8); border:1px solid var(--border); border-radius:8px; display:flex; flex-direction:column; min-height:120px; } .kb-col-head { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-top:3px solid var(--primary); border-top-left-radius:8px; border-top-right-radius:8px; background:var(--surface); font-weight:600; font-size:13px; color:var(--text-1,#1c2733); } .kb-col-count { background:var(--border); color:var(--text-2); border-radius:10px; padding:0 8px; font-size:11px; font-weight:600; } .kb-col-body { padding:8px; display:flex; flex-direction:column; gap:8px; min-height:60px; flex:1; } .kb-col-body.kb-over { background:rgba(64,120,200,.10); outline:2px dashed rgba(64,120,200,.45); outline-offset:-4px; } .kb-card { background:var(--surface,#fff); border:1px solid var(--border); border-radius:6px; padding:8px 10px; box-shadow:var(--shadow); cursor:grab; } .kb-card.dragging { opacity:.5; } .kb-card-title { font-size:13px; font-weight:600; color:var(--text-1,#1c2733); line-height:1.25; } .kb-card-meta { font-size:11px; color:var(--text-3,#8a94a0); margin-top:2px; } .kb-milestone { color:var(--accent); } .kb-prog { height:5px; background:var(--border); border-radius:3px; margin:7px 0 5px; overflow:hidden; } .kb-prog > span { display:block; height:100%; background:var(--info); } .kb-card-foot { display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--text-2); gap:6px; } .kb-assignee { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .kb-prio { background:var(--border); border-radius:10px; padding:0 7px; color:var(--text-2); white-space:nowrap; } /* ============================================================================= Shell / Chrome (layout) - barra lateral + barra superior + tema ============================================================================= */ html, body { height:100%; margin:0; } .faena-app { background:var(--bg); } .faena-shell { display:flex; height:100vh; width:100%; overflow:hidden; background:var(--bg); color:var(--text); } .ico { width:17px; height:17px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } /* ----- Sidebar ----- */ aside.fsb { display:flex; flex-direction:column; width:248px; flex:0 0 248px; height:100%; background:var(--surface); border-right:1px solid var(--border); z-index:30; transition:width .16s ease; } aside.fsb[data-collapsed="1"] { width:72px; flex-basis:72px; } .fsb-brand { display:flex; align-items:center; gap:11px; height:60px; flex:0 0 60px; padding:0 16px; border-bottom:1px solid var(--border); } .fsb-logo { width:34px; height:34px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:9px; background:var(--primary); color:#fff; text-decoration:none; } .fsb-brand-text { display:flex; flex-direction:column; line-height:1.15; min-width:0; } .fsb-brand-name { font-weight:700; letter-spacing:.06em; font-size:15px; color:var(--text); } .fsb-brand-sub { font-size:10.5px; color:var(--text-3); white-space:nowrap; } .fsb-nav { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding:10px 10px 6px; } .fsb-group { margin-bottom:10px; } .fsb-group-label { font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); padding:6px 10px 4px; } .fsb-item { display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:8px; color:var(--text-2); text-decoration:none; font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap; border:0; background:transparent; width:100%; text-align:left; margin-bottom:1px; } .fsb-item:hover { background:var(--surface-2); color:var(--text); } .fsb-item.active { background:var(--primary-100); color:var(--primary); font-weight:600; } .fsb-item.active .ico { stroke:var(--primary); } .fsb-item.disabled { color:var(--text-3); cursor:default; opacity:.75; } .fsb-item.disabled:hover { background:transparent; color:var(--text-3); } .fsb-label { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; } .fsb-soon { font-size:9px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); background:var(--surface-3); border-radius:6px; padding:1px 5px; } .fsb-foot { display:flex; align-items:center; gap:11px; padding:11px 16px; border:0; border-top:1px solid var(--border); background:transparent; color:var(--text-2); font-size:12.5px; font-weight:500; cursor:pointer; width:100%; text-align:left; } .fsb-foot:hover { background:var(--surface-2); color:var(--text); } /* colapsado */ aside.fsb[data-collapsed="1"] .fsb-label, aside.fsb[data-collapsed="1"] .fsb-soon, aside.fsb[data-collapsed="1"] .fsb-group-label, aside.fsb[data-collapsed="1"] .fsb-brand-text { display:none; } aside.fsb[data-collapsed="1"] .fsb-item, aside.fsb[data-collapsed="1"] .fsb-foot { justify-content:center; gap:0; } aside.fsb[data-collapsed="1"] .fsb-brand { justify-content:center; padding:0; } /* ----- Main + Topbar ----- */ .faena-main { flex:1 1 auto; display:flex; flex-direction:column; min-width:0; } .topbar { height:60px; flex:0 0 60px; display:flex; align-items:center; gap:12px; padding:0 16px; background:var(--surface); border-bottom:1px solid var(--border); position:relative; z-index:30; } .tb-heading { display:flex; flex-direction:column; line-height:1.2; min-width:0; } .tb-crumb { font-size:11px; font-weight:500; color:var(--text-3); } .tb-title { font-size:16px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tb-spacer { flex:1 1 auto; } .tb-proj { display:flex; align-items:center; gap:10px; height:40px; padding:0 12px; max-width:330px; border:1px solid var(--border-2); border-radius:9px; background:var(--surface-2); color:var(--text); cursor:pointer; } .tb-proj:hover { border-color:var(--primary); } .tb-proj-dot { width:9px; height:9px; border-radius:3px; flex:0 0 auto; } .tb-proj-text { display:flex; flex-direction:column; line-height:1.2; text-align:left; min-width:0; } .tb-proj-code { font-size:10.5px; color:var(--text-3); font-family:'IBM Plex Mono',monospace; } .tb-proj-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px; } .tb-divider { width:1px; height:30px; background:var(--border); } .tb-icon-btn { position:relative; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); color:var(--text-2); cursor:pointer; } .tb-icon-btn:hover { color:var(--text); border-color:var(--border-2); } .tb-dot { position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--danger); border:1.5px solid var(--surface-2); } .theme-sun, .theme-moon { display:inline-flex; } .theme-moon { display:none; } [data-theme="dark"] .theme-sun { display:none; } [data-theme="dark"] .theme-moon { display:inline-flex; } .tb-user { display:flex; align-items:center; gap:10px; padding:4px 6px 4px 4px; background:transparent; border:1px solid transparent; border-radius:10px; cursor:pointer; color:var(--text); } .tb-user:hover { background:var(--surface-2); border-color:var(--border); } .tb-avatar { width:36px; height:36px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; flex:0 0 auto; } .tb-user-text { display:flex; flex-direction:column; line-height:1.2; text-align:left; } .tb-user-name { font-size:12.5px; font-weight:600; white-space:nowrap; } .tb-user-role { font-size:10.5px; color:var(--text-3); white-space:nowrap; } /* Boton hamburguesa (solo movil) y fondo del menu lateral */ .tb-burger { display:none; width:40px; height:40px; flex:0 0 auto; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); color:var(--text-2); cursor:pointer; } .tb-burger:hover { color:var(--text); } .fsb-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:29; } .fsb-backdrop.show { display:block; } /* Boton de ayuda de graficos */ .chart-help { width:22px; height:22px; flex:0 0 auto; border-radius:50%; border:1px solid var(--border-2,var(--border)); background:var(--surface-2); color:var(--text-2); font-size:12px; font-weight:700; line-height:18px; padding:0; cursor:pointer; } .chart-help:hover { background:var(--primary); color:#fff; border-color:var(--primary); } @media (max-width:860px) { .tb-user-text { display:none; } .tb-proj-name { display:none; } /* en movil mostramos solo el codigo */ .tb-proj { max-width:160px; padding:0 8px; } /* Menus desplegables del topbar como hoja a ancho casi completo */ .topbar .dd-menu { position:fixed; top:62px; left:8px; right:8px; min-width:0; max-width:none; width:auto; max-height:74vh; } .tb-burger { display:inline-flex; } /* Menu lateral fuera de pantalla, entra al abrir */ aside.fsb { position:fixed; top:0; left:0; height:100%; width:264px !important; flex-basis:264px !important; transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow-lg); } aside.fsb.open { transform:translateX(0); } aside.fsb[data-collapsed="1"] .fsb-label, aside.fsb[data-collapsed="1"] .fsb-soon, aside.fsb[data-collapsed="1"] .fsb-group-label, aside.fsb[data-collapsed="1"] .fsb-brand-text { display:block; } aside.fsb[data-collapsed="1"] .fsb-item, aside.fsb[data-collapsed="1"] .fsb-foot { justify-content:flex-start; gap:11px; } .fsb-foot { display:none; } /* el colapso no aplica en movil */ .content-scroll { padding:14px 12px; } .topbar { padding:0 10px; gap:8px; } .tb-title { font-size:14px; max-width:46vw; } .tb-divider { display:none; } .dd-menu-wide { min-width:260px; max-width:88vw; } /* Calendario compacto: que entren los 7 dias */ .cal-cell { min-height:62px; padding:2px 3px; } .cal-head { font-size:9px; padding:4px 0; } .cal-day { font-size:11px; } .cal-chip, .content-scroll a.cal-chip { font-size:9px; padding:1px 3px; } /* Gantt: alto util mayor en movil */ .gantt-scroll { max-height:78vh; } .gantt-left .wbs { display:none; } } @media (max-width:480px) { .tb-heading { display:none; } .content-scroll { padding:12px 10px; } } /* ----- Dropdowns ----- */ .dropdown { position:relative; } .dd-menu { position:absolute; top:calc(100% + 8px); right:0; min-width:240px; background:var(--surface); border:1px solid var(--border); border-radius:11px; box-shadow:var(--shadow-lg); padding:6px; z-index:40; display:none; animation:fsbFade .12s ease; } .dropdown.open .dd-menu { display:block; } .dd-menu-wide { min-width:330px; max-height:60vh; overflow-y:auto; } .dd-head { font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); padding:6px 10px 8px; } .dd-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; color:var(--text); text-decoration:none; border:0; background:transparent; width:100%; text-align:left; font-size:13px; } .dd-item:hover { background:var(--surface-2); } .dd-item.active { background:var(--primary-100); } .dd-item-text { display:flex; flex-direction:column; line-height:1.25; min-width:0; } .dd-item-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; } .dd-userhead { display:flex; align-items:center; gap:10px; padding:8px 10px; } .dd-sep { height:1px; background:var(--border); margin:6px 2px; } .dd-logout-form { margin:0; } .dd-logout { color:var(--danger); font-weight:500; } .dd-logout:hover { background:rgba(192,57,43,.10); } .dd-backdrop { position:fixed; inset:0; z-index:20; display:none; } body.dd-active .dd-backdrop { display:block; } @keyframes fsbFade { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } } /* ----- Content area + toasts ----- */ .content-scroll { flex:1 1 auto; overflow:auto; padding:22px 26px; position:relative; z-index:1; } .faena-toast { padding:10px 14px; border-radius:9px; margin-bottom:16px; font-size:13px; font-weight:500; border:1px solid var(--border); } .faena-toast.ok { background:rgba(30,138,91,.12); border-color:rgba(30,138,91,.35); color:var(--success); } .faena-toast.err { background:rgba(192,57,43,.12); border-color:rgba(192,57,43,.35); color:var(--danger); } /* ============================================================================= Componentes (override Bootstrap a tokens, claro/oscuro) ============================================================================= */ .content-scroll h1, .content-scroll h2, .content-scroll h3, .content-scroll h4, .content-scroll h5, .content-scroll h6 { color:var(--text); } .content-scroll a { color:var(--primary); } .text-muted { color:var(--text-3) !important; } code { color:var(--accent); } .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow); color:var(--text); } .card-header, .card-footer { background:var(--surface-2); border-color:var(--border); color:var(--text); } .btn-primary { background:var(--primary); border-color:var(--primary); } .btn-primary:hover, .btn-primary:focus { background:var(--primary-2); border-color:var(--primary-2); } .btn-outline-primary { color:var(--primary); border-color:var(--primary); } .btn-outline-primary:hover { background:var(--primary); border-color:var(--primary); color:#fff; } .btn-outline-secondary { color:var(--text-2); border-color:var(--border-2); } .btn-outline-secondary:hover { background:var(--surface-2); color:var(--text); border-color:var(--border-2); } .btn-outline-danger { color:var(--danger); border-color:var(--danger); } .btn-outline-danger:hover { background:var(--danger); border-color:var(--danger); color:#fff; } .table { color:var(--text); border-color:var(--border); --bs-table-bg:transparent; } .table > :not(caption) > * > * { background-color:transparent; border-bottom-color:var(--border); color:var(--text); } .table > thead th { color:var(--text-2); font-size:11px; text-transform:uppercase; letter-spacing:.04em; font-weight:600; border-bottom:1px solid var(--border); } .table-hover > tbody > tr:hover > * { background-color:var(--surface-2); } .form-control, .form-select { background:var(--surface); border-color:var(--border-2); color:var(--text); } .form-control:focus, .form-select:focus { background:var(--surface); color:var(--text); border-color:var(--primary); box-shadow:0 0 0 .2rem var(--primary-100); } .form-control::placeholder { color:var(--text-3); } .form-label { color:var(--text-2); font-weight:500; font-size:13px; } .input-group-text { background:var(--surface-2); border-color:var(--border-2); color:var(--text-2); } .page-link { background:var(--surface); border-color:var(--border); color:var(--primary); } .page-item.active .page-link { background:var(--primary); border-color:var(--primary); color:#fff; } .page-link:hover { background:var(--surface-2); } .faena-chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:20px; background:var(--surface-3); color:var(--text-2); } .faena-prog { height:6px; border-radius:4px; background:var(--bar-track); overflow:hidden; } .faena-prog > span { display:block; height:100%; background:var(--primary); }