/* Product-level layout overrides. Keep this separate from the base component styles. */ [hidden] { display: none !important; } .login-shell { position: relative; display: grid; min-height: 100vh; place-items: center; overflow: hidden; padding: 32px; background: #f5f7fb; } .login-shell::before, .login-shell::after { position: absolute; width: 540px; height: 540px; border-radius: 50%; content: ""; filter: blur(3px); } .login-shell::before { top: -300px; right: -150px; background: #dfe8ff; } .login-shell::after { bottom: -360px; left: -170px; background: #e3f4ee; } .login-card { position: relative; z-index: 1; width: min(450px, 100%); padding: 42px; border: 1px solid rgba(223, 229, 239, .95); border-radius: 20px; background: rgba(255, 255, 255, .94); box-shadow: 0 24px 70px rgba(28, 49, 79, .12); } .login-card .brand { margin: 0 0 34px; } .login-logo { display: block; width: 190px; height: 126px; margin: -14px auto 12px; object-fit: contain; } .login-card h1 { margin: 8px 0 10px; color: #1b2d43; font: 800 29px/1.18 Manrope, sans-serif; letter-spacing: -.8px; } .login-card > p:not(.eyebrow):not(.login-error) { margin: 0 0 26px; color: #708096; line-height: 1.55; } .login-card label { display: grid; gap: 7px; margin-top: 17px; color: #46566c; font-size: 12px; font-weight: 700; } .login-card input { width: 100%; padding: 12px 13px; border: 1px solid #dbe2ed; border-radius: 9px; outline: none; background: #fff; color: #203249; font: 14px "DM Sans", sans-serif; transition: border .2s, box-shadow .2s; } .login-card input:focus { border-color: #5278de; box-shadow: 0 0 0 3px #dfe8ff; } .login-card .primary { width: 100%; margin-top: 21px; padding: 13px; } .login-error { min-height: 18px; margin: 13px 0 0; color: #c64353; font-size: 12px; line-height: 1.45; } .login-card .link-button { display: block; width: 100%; margin-top: 14px; padding: 4px; background: transparent; color: #315fd4; font-size: 12px; font-weight: 700; text-align: center; } .login-card .link-button:hover { text-decoration: underline; } .user-chip .chip-link { display: block; margin: 2px 0 0; padding: 0; background: none; color: #315fd4; font-size: 11px; font-weight: 700; text-align: left; } .user-chip .chip-link:hover { text-decoration: underline; } .danger { padding: 10px 15px; border-radius: 8px; background: #fff0f1; color: #c64353; font-weight: 700; border: 1px solid #f3c9ce; } .danger:hover { background: #ffe3e6; } .danger:disabled { opacity: .6; cursor: default; } .calendar-toolbar { flex-wrap: wrap; gap: 12px; } .cal-nav { display: flex; align-items: center; gap: 8px; } .cal-nav .ghost { padding: 6px 11px; border-radius: 8px; font-weight: 700; } .cal-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: -6px 0 14px; color: #68758a; font-size: 12px; } .cal-legend span { display: inline-flex; align-items: center; gap: 6px; } .cal-legend i { width: 10px; height: 10px; border-radius: 3px; } .cal-legend .ev-impuesto { background: #c94354; } .cal-legend .ev-reunion { background: #315fd4; } .cal-legend .ev-otro { background: #7c8999; } .cal-legend .ev-task { background: #d5a026; } .calendar-card.ev-impuesto { border-color: #c94354; background: #ffeaec; color: #8f2937; } .calendar-card.ev-reunion { border-color: #315fd4; background: #e9efff; color: #22439a; } .calendar-card.ev-otro { border-color: #7c8999; background: #eef1f5; color: #46566c; } .calendar-day.is-today { background: #f3f7ff; } .calendar-day.is-today .day-number { color: #315fd4; } .agenda { padding: 6px 0; } .agenda-day { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 14px 20px; border-bottom: 1px solid #eff1f4; } .agenda-day:last-child { border-bottom: 0; } .agenda-date strong { display: block; font: 800 15px Manrope, sans-serif; text-transform: capitalize; } .agenda-date small { color: #8a9bb2; text-transform: capitalize; } .agenda-items { display: grid; gap: 8px; } .agenda-item { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 2px 12px; width: 100%; padding: 10px 12px; border-left: 3px solid; border-radius: 8px; background: #f7f9fc; color: #27364a; text-align: left; } .agenda-item b { font-size: 12px; } .agenda-item span { font-weight: 700; } .agenda-item small { grid-column: 2; color: #728096; font-size: 11px; } .agenda-item.ev-impuesto { border-color: #c94354; background: #fff5f6; } .agenda-item.ev-reunion { border-color: #315fd4; background: #f2f6ff; } .agenda-item.ev-otro { border-color: #7c8999; } .agenda-item.ev-task { border-color: #d5a026; background: #fffbee; } @media (max-width: 620px) { .agenda-day { grid-template-columns: 56px 1fr; padding: 12px 14px; } .agenda-item { grid-template-columns: 1fr; } .agenda-item small { grid-column: 1; } } .content { background: linear-gradient(180deg, #fbfcfe 0%, #f6f8fb 100%); } .welcome-brand { display: flex; align-items: center; justify-content: center; min-height: 108px; margin: -10px 0 24px; padding: 10px 20px; border: 1px solid #e3eaf5; border-radius: 14px; background: linear-gradient(100deg, #fff, #f1f6ff); } .welcome-brand img { width: 155px; height: 90px; object-fit: contain; mix-blend-mode: multiply; } .page-heading { margin-bottom: 30px; } .panel { box-shadow: 0 8px 30px rgba(26, 45, 73, .035); } .empty { padding: 74px 25px; } .empty h2 { margin: 0 0 9px; color: #25364e; font: 700 19px Manrope, sans-serif; } .empty p { max-width: 360px; margin: 0 auto; line-height: 1.55; } .empty .primary { margin-top: 18px; } .help-dialog { padding: 26px; } .help-steps { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; counter-reset: step; } .help-steps li { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; } .help-steps li::before { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #eaf0ff; color: #315fd4; content: counter(step); counter-increment: step; font-size: 12px; font-weight: 800; } .help-steps strong, .help-steps span { display: block; } .help-steps strong { color: #273950; font-size: 13px; } .help-steps span { grid-column: 2; margin-top: -5px; color: #718097; font-size: 12px; line-height: 1.45; } .help-intro { max-width: 440px; margin: 8px 0 20px; color: #718097; font-size: 13px; line-height: 1.5; } .completion-note { display: grid; gap: 7px; color: #59677a; font-size: 12px; font-weight: 700; } .completion-note textarea { width: 100%; padding: 11px; border: 1px solid #dce2ea; border-radius: 8px; outline-color: #315fd4; color: #233247; font: 14px "DM Sans", sans-serif; resize: vertical; } .completion-note small { color: #718097; font-weight: 400; line-height: 1.4; } .completion-decl { margin: 16px 0 0; padding: 12px 14px; border: 1px solid #dce2ea; border-radius: 10px; } .completion-decl legend { padding: 0 6px; color: #315fd4; font-size: 11px; font-weight: 800; letter-spacing: .06em; } .completion-opt { display: flex; gap: 10px; align-items: flex-start; padding: 7px 4px; cursor: pointer; } .completion-opt input { margin-top: 3px; } .completion-opt strong { display: block; color: #27364a; font-size: 13px; } .completion-opt small { color: #718097; font-size: 12px; line-height: 1.4; } .user-sees-all { display: flex !important; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px dashed #dce2ea; border-radius: 10px; cursor: pointer; } .user-sees-all input { width: auto !important; flex: 0 0 auto; margin: 3px 0 0; } .user-sees-all span { flex: 1; } .user-sees-all strong { display: block; font-size: 13px; color: #27364a; } .user-sees-all small { color: #718097; font-size: 12px; line-height: 1.4; } :root[data-theme="dark"] .user-sees-all { border-color: #2a3446; } :root[data-theme="dark"] .user-sees-all strong { color: #e6ebf3; } .completion-client { display: grid; gap: 6px; margin-top: 6px; color: #59677a; font-size: 12px; font-weight: 700; } .completion-client select { padding: 9px; border: 1px solid #dce2ea; border-radius: 8px; font: 14px "DM Sans", sans-serif; } :root[data-theme="dark"] .completion-decl { border-color: #2a3446; } :root[data-theme="dark"] .completion-opt strong { color: #e6ebf3; } .task-detail { margin-top: 14px; padding: 12px 14px; border: 1px solid #dfe8f5; border-left: 3px solid var(--nexo-blue); border-radius: 7px; background: #f7faff; } .task-detail h3 { margin: 0 0 7px; color: #273950; font: 700 12px Manrope, sans-serif; } .task-detail ul { display: grid; gap: 5px; margin: 0; padding-left: 16px; color: #60728b; font-size: 11px; line-height: 1.4; } dialog { max-height: calc(100dvh - 28px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } #task-dialog, #user-dialog, #completion-dialog { height: min(760px, calc(100dvh - 24px)); } #task-dialog form, #user-dialog form, #completion-dialog form { height: 100%; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; } /* More expressive product visual language. */ :root { --nexo-blue: #0877f9; --nexo-blue-deep: #005ce7; --nexo-ink: #102130; --nexo-pale: #eaf3ff; } .content { background: linear-gradient(180deg, #fbfdff 0%, #f1f6ff 100%); } .topbar { border-bottom-color: #dfe8f5; } .sidebar { background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%); box-shadow: 12px 0 34px rgba(35, 67, 125, .05); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .sidebar .sidebar-footer { flex-shrink: 0; } .sidebar-logo { display: flex; align-items: center; justify-content: center; height: 118px; margin: -12px 3px 16px; border-bottom: 1px solid #e7edf6; } .sidebar-logo img { display: block; width: 172px; height: 104px; object-fit: contain; mix-blend-mode: multiply; } .brand-mark { box-shadow: 0 7px 16px rgba(49, 95, 212, .28); } .new-task, .primary { background: linear-gradient(135deg, var(--nexo-blue), var(--nexo-blue-deep)); box-shadow: 0 6px 14px rgba(0, 92, 231, .23); } .new-task { transition: transform .18s, box-shadow .18s; } .new-task:hover, .primary:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0, 92, 231, .28); } .nav-item { transition: background .18s, color .18s, transform .18s; } .nav-item:hover { transform: translateX(3px); background: var(--nexo-pale); color: var(--nexo-blue-deep); } .nav-item span { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 7px; background: #f0f3f8; color: #58708d; font-size: 14px; } .nav-item.active span { background: #d9ebff; color: var(--nexo-blue-deep); } .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .nav-item span svg, .footer-link svg, .search svg, .top-actions svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .nav-item span svg { width: 15px; height: 15px; fill: currentColor; stroke: none; } .nav-item[data-view="inicio"] span { color: #3c9a78; background: #e5f6ee; } .nav-item[data-view="asistente"] span { color: #6b63c7; background: #eeecff; } .nav-item[data-view="mis-tareas"] span { color: #3b6ee0; background: #e8efff; } .nav-item[data-view="solicitadas"] span { color: #e08739; background: #fff0e5; } .nav-item[data-view="dashboard"] span { color: #5b77a0; background: #edf2f8; } .nav-label { margin: 10px 12px 2px; color: #93a0b3; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .nav-label:first-child { margin-top: 0; } :root[data-theme="dark"] .nav-label { color: #6f7d94; } .nav-item.active { color: var(--nexo-blue-deep); background: var(--nexo-pale); } .nav-item.active span { color: var(--nexo-blue-deep); background: #d9ebff; box-shadow: 0 3px 8px rgba(0,92,231,.16); } .footer-link { display: flex; align-items: center; gap: 8px; } .footer-link svg { width: 15px; height: 15px; } .search span { display: grid; place-items: center; } .top-actions button { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; transition: background .18s, color .18s; } .top-actions button:hover { background: var(--nexo-pale); color: var(--nexo-blue-deep); } .stat { position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; } .stat::after { position: absolute; right: -20px; bottom: -25px; width: 85px; height: 85px; border-radius: 50%; content: ""; opacity: .55; } .stat:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(31, 57, 97, .09); } .stat.red::after { background: #ffe1e5; }.stat.orange::after { background: #ffeadc; }.stat.blue::after { background: #e0e9ff; }.stat.green::after { background: #d8f3e8; } .stat-icon { border: 1px solid rgba(255,255,255,.8); box-shadow: 0 4px 10px rgba(33, 52, 91, .08); } .panel { border-color: #dfe8f5; } .panel-head { background: linear-gradient(90deg, #fff, #f6faff); } .calendar-card { transition: transform .16s, box-shadow .16s; }.calendar-card:hover { transform: translateX(2px); box-shadow: 0 4px 9px rgba(34, 55, 90, .12); } /* Nexo: una interfaz operativa, sobria y pensada para uso diario. */ .content { max-width: none; margin: 0; width: 100%; box-sizing: border-box; } .page-heading { padding-bottom: 17px; border-bottom: 1px solid #dfe8f5; } .page-heading h1 { color: var(--nexo-ink); letter-spacing: -1px; } .page-heading p { max-width: 640px; line-height: 1.5; } .new-task, .primary { border-radius: 7px; background: var(--nexo-blue-deep); box-shadow: none; } .new-task:hover, .primary:hover { background: #004fc8; box-shadow: none; } .sidebar { border-right-color: #dce6f2; box-shadow: none; } .sidebar-logo { border-bottom-color: #dce6f2; } .nav-list { gap: 3px; } .nav-item { border-radius: 7px; } .nav-item.active { box-shadow: inset 3px 0 0 var(--nexo-blue-deep); } .panel { overflow: hidden; border-radius: 10px; box-shadow: none; } .panel-head { min-height: 58px; } .stats { gap: 12px; } .stat { min-height: 108px; border-radius: 10px; box-shadow: none; } .stat::after { display: none; } .stat.red { border-top: 3px solid #d84a5d; } .stat.orange { border-top: 3px solid #ed8a35; } .stat.blue { border-top: 3px solid var(--nexo-blue); } .stat.green { border-top: 3px solid #2b9a77; } .stat:hover { transform: none; box-shadow: none; } .stat .stat-top { font-size: 10px; letter-spacing: .06em; } .stat strong { color: var(--nexo-ink); } .task-table th { background: #f5f8fc; color: #60748d; white-space: nowrap; } .task-table td { padding: 16px 18px; vertical-align: top; } .task-table td:first-child { min-width: 240px; } .task-title { align-items: flex-start; line-height: 1.35; } .task-title .status-dot { margin-top: 6px; } .task-title + small { display: block; margin-top: 6px; } .assignee { align-items: flex-start; gap: 9px; } .assignee .avatar { flex: 0 0 auto; margin-top: 1px; } .assignee > span { display: grid; gap: 3px; min-width: 0; line-height: 1.3; } .assignee > span small { display: block; line-height: 1.35; } .deadline { white-space: nowrap; line-height: 1.4; } .deadline strong { margin-top: 4px; } .task-table .badge { white-space: nowrap; } .task-table tr:hover td { background: #fbfdff; } .filter.active { border-color: #b9d5ff; background: #eef6ff; color: var(--nexo-blue-deep); } .chat-compose .panel-head { background: #f5f9ff; } /* The sidebar is fixed, so reserve its exact width for the workspace. */ .app-shell { display: block; } .app-shell > main { width: calc(100vw - 255px); min-width: 0; margin-left: 255px; } .nav-backdrop { display: none; } .access-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 22px; } .access-summary > div { min-height: 115px; padding: 18px 19px; border: 1px solid #e4eaf2; border-radius: 14px; background: linear-gradient(145deg, #fff, #f7faff); box-shadow: 0 8px 25px rgba(26, 45, 73, .035); } .access-summary small, .access-summary strong, .access-summary span { display: block; } .access-summary small { color: #73839a; font-size: 10px; font-weight: 800; letter-spacing: .06em; } .access-summary strong { margin: 7px 0 3px; color: #213650; font: 800 27px Manrope, sans-serif; } .access-summary span { color: #718097; font-size: 11px; line-height: 1.35; } .dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; } .dash-head h1 { margin: 4px 0 0; color: #1b2d43; font: 800 30px Manrope; letter-spacing: -.8px; } .dash-head .muted { margin: 6px 0 0; font-size: 13px; } .dash-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dash-pills { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: #eaeef3; } .dash-pills button { padding: 7px 12px; border-radius: 7px; background: transparent; color: #6d7a8e; font-size: 12px; font-weight: 700; } .dash-pills button.active { background: #fff; color: #2c57c5; box-shadow: 0 1px 3px #263f6920; } .dash-controls select { padding: 8px 10px; border: 1px solid #dce2ea; border-radius: 8px; background: #fff; color: #233247; font: 600 12px "DM Sans", sans-serif; } .dash-controls .ghost { padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; } .kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; } .kpi { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 1px solid #e8ecf1; border-radius: 12px; background: #fff; min-width: 0; } .kpi > div { min-width: 0; } .kpi-icon { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; font-size: 18px; font-weight: 800; } .kpi-label { display: block; color: #778398; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi strong { display: block; margin-top: 6px; color: #1b2d43; font: 800 30px/1 Manrope; letter-spacing: -.5px; } .kpi small { display: block; margin-top: 6px; color: #8691a3; font-size: 11px; } .kpi.blue .kpi-icon { color: #2a5fd0; background: #e9efff; } .kpi.blue strong { color: #2a5fd0; } .kpi.red .kpi-icon { color: #c84453; background: #ffebed; } .kpi.red strong { color: #c84453; } .kpi.orange .kpi-icon { color: #bd6924; background: #fff0e5; } .kpi.orange strong { color: #bd6924; } .kpi.green .kpi-icon { color: #287b63; background: #e6f6ef; } .kpi.green strong { color: #287b63; } .kpi.navy .kpi-icon { color: #18314c; background: #e6ebf2; } .viz-donut { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 18px; } .viz-donut svg { width: 150px; height: 150px; } .donut-value { font: 800 26px Manrope; fill: #1b2d43; } .donut-label { font: 600 11px "DM Sans", sans-serif; fill: #8691a3; } .donut-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .donut-legend li { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 8px; font-size: 12px; color: #34455c; } .donut-legend i { width: 10px; height: 10px; border-radius: 3px; } .donut-legend b { font-variant-numeric: tabular-nums; } .donut-legend small { min-width: 34px; color: #8691a3; text-align: right; font-variant-numeric: tabular-nums; } .risk-count { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; background: #ffebed; color: #c84453; font-size: 12px; font-weight: 800; } .dash-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash-grid.cols-3 .panel.wide { grid-column: span 2; } .dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; } .dash-grid .panel.wide { grid-column: 1 / -1; } .viz-body { padding: 14px 20px 18px; } .viz-label { font: 600 12px "DM Sans", sans-serif; fill: #34455c; } .viz-value { font: 700 12px "DM Sans", sans-serif; fill: #34455c; } .viz-tick { font: 11px "DM Sans", sans-serif; fill: #898781; } .viz-grid { stroke: #e8ecf1; stroke-width: 1; } .viz-axis { stroke: #c3c2b7; stroke-width: 1; } .viz-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; color: #56657a; font-size: 12px; } .viz-legend span { display: inline-flex; align-items: center; gap: 6px; } .viz-legend i { width: 10px; height: 10px; border-radius: 3px; } .viz-empty { padding: 30px; color: #718097; font-size: 13px; text-align: center; } .panel-head .viz-toggle { padding: 5px 10px; border-radius: 7px; background: #f1f3f6; color: #546174; font-size: 11px; font-weight: 700; } .dash-table { width: 100%; border-collapse: collapse; font-size: 12px; } .dash-table th { padding: 8px 14px; text-align: left; color: #8b96a7; background: #fbfcfd; border-bottom: 1px solid #e8ecf1; font-size: 10px; letter-spacing: .05em; } .dash-table td { padding: 10px 14px; border-bottom: 1px solid #eff1f4; color: #34455c; font-variant-numeric: tabular-nums; vertical-align: top; } .dash-table tr:last-child td { border-bottom: 0; } .dash-table .late { color: #c64353; font-weight: 700; } .dash-table .soon { color: #bf6a27; font-weight: 700; } .dash-table .link-cell { padding: 0; background: transparent; color: #27364a; font: inherit; font-weight: 700; text-align: left; } .dash-table .link-cell:hover { color: #315fd4; } @media (max-width: 1240px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 980px) { .dash-grid, .dash-grid.cols-3 { grid-template-columns: 1fr; } .dash-grid.cols-3 .panel.wide { grid-column: auto; } .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .viz-donut { grid-template-columns: 1fr; justify-items: center; } } @media (max-width: 620px) { .kpi-grid { grid-template-columns: 1fr; } } .history-search { flex: 1; max-width: 460px; padding: 9px 12px; border: 1px solid #dce2ea; border-radius: 8px; outline-color: #315fd4; color: #233247; font: 13px "DM Sans", sans-serif; } .history-item { border-top: 1px solid #eff1f4; } .history-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) 24px; align-items: center; gap: 14px; width: 100%; padding: 16px 21px; background: #fff; color: #27364a; text-align: left; } .history-head:hover { background: #fbfdff; } .history-main strong { display: block; font-size: 14px; line-height: 1.35; } .history-main small { display: block; margin-top: 4px; } .history-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: #56657a; font-size: 12px; } .history-meta > span { display: inline-flex; align-items: center; gap: 6px; } .history-meta .avatar { width: 24px; height: 24px; font-size: 9px; } .history-when { flex-direction: column; align-items: flex-start !important; gap: 2px !important; } .history-when small { color: #278b6e; font-weight: 700; } .history-chevron { color: #98a6b8; font-size: 22px; transition: transform .2s; } .history-item.open .history-chevron { transform: rotate(90deg); } .history-body { display: grid; gap: 14px; padding: 0 21px 20px; } .history-note, .history-desc { padding: 12px 14px; border-radius: 10px; background: #f6f9fc; } .history-note { background: #eaf7f1; } .history-note small, .history-desc small { display: block; margin-bottom: 4px; color: #60748d; font-size: 10px; font-weight: 800; letter-spacing: .06em; } .history-note p, .history-desc p { margin: 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; } .history-timeline { display: grid; gap: 10px; margin: 4px 0 0 6px; padding: 0 0 0 16px; border-left: 2px solid #dfe7f0; list-style: none; } .history-timeline li { position: relative; display: grid; gap: 2px; font-size: 12px; color: #34455c; } .history-timeline li::before { content: ''; position: absolute; left: -21px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: #315fd4; } .history-timeline time { color: #8a9bb2; font-size: 11px; } @media (max-width: 620px) { .history-head { grid-template-columns: 1fr 24px; } .history-meta { grid-column: 1; } } .chat-app { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: calc(100vh - 235px); min-height: 520px; overflow: hidden; } .chat-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #e8ecf1; } .chat-conv-list { flex: 1; overflow-y: auto; } .chat-conv { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 16px; background: #fff; text-align: left; border-bottom: 1px solid #f0f3f7; } .chat-conv:hover { background: #f7f9fc; } .chat-conv.active { background: #edf3ff; } .chat-conv .avatar { width: 38px; height: 38px; font-size: 12px; flex: 0 0 auto; } .avatar-dept { background: #ffe9d6; color: #9a4f1c; } .chat-conv-body { flex: 1; min-width: 0; display: grid; } .chat-conv-body strong { font-size: 13px; color: #223349; } .chat-conv-body small { color: #75849a; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-conv time { align-self: flex-start; color: #98a6b8; font-size: 10px; white-space: nowrap; } .chat-thread { display: flex; flex-direction: column; min-height: 0; background: #f0f4f8; } .chat-thread-head { display: flex; align-items: center; gap: 11px; padding: 12px 18px; background: #fff; border-bottom: 1px solid #e8ecf1; } .chat-thread-head .avatar { width: 36px; height: 36px; font-size: 12px; } .chat-thread-head strong { display: block; font-size: 14px; color: #223349; } .chat-thread-head small { color: #75849a; font-size: 11px; } .chat-back { display: none; padding: 2px 10px; font-size: 22px; line-height: 1; } .chat-thread .chat-empty { flex: 1; } .chat-day { align-self: center; margin: 6px 0; padding: 3px 10px; border-radius: 10px; background: #dfe7f0; color: #55677e; font-size: 10px; font-weight: 700; text-transform: capitalize; } .chat-composer { display: flex; align-items: flex-end; gap: 10px; padding: 12px 16px; background: #fff; border-top: 1px solid #e8ecf1; } .chat-composer textarea { flex: 1; max-height: 140px; padding: 10px 14px; border: 1px solid #dce2ea; border-radius: 18px; outline-color: #315fd4; color: #233247; font: 14px "DM Sans", sans-serif; line-height: 1.4; resize: none; } .chat-composer .primary { padding: 10px 18px; border-radius: 18px; } .chat-messages { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; overflow-y: auto; padding: 18px; background: #f0f4f8; border-radius: 0; } .chat-bubble-wrap { display: flex; flex-direction: column; max-width: 78%; } .chat-bubble-wrap.mine { align-self: flex-end; align-items: flex-end; } .chat-bubble-wrap.theirs { align-self: flex-start; align-items: flex-start; } .bubble-sender { margin-bottom: 3px; padding: 0 4px; color: #5a6a82; font-size: 11px; font-weight: 700; } .chat-bubble { padding: 9px 13px 7px; border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.08); } .chat-bubble-wrap.mine .chat-bubble { background: #005ce7; color: #fff; border-bottom-right-radius: 4px; } .chat-bubble-wrap.theirs .chat-bubble { background: #fff; border: 1px solid #e2eaf3; color: #263950; border-bottom-left-radius: 4px; } .bubble-to { display: block; margin-bottom: 3px; font-size: 10px; font-weight: 700; opacity: .75; letter-spacing: .03em; } .chat-bubble p { margin: 0 0 4px; line-height: 1.5; font-size: 13px; white-space: pre-wrap; word-break: break-word; } .chat-bubble time { display: block; font-size: 10px; text-align: right; } .chat-bubble-wrap.mine .chat-bubble time { color: #a8c8ff; } .chat-bubble-wrap.theirs .chat-bubble time { color: #8a9bb2; } .chat-empty { display: grid; place-content: center; min-height: 300px; color: #718097; text-align: center; } .chat-empty span { margin-top: 6px; font-size: 12px; } .chat-compose form { display: grid; gap: 15px; padding: 20px; } .chat-compose label { display: grid; gap: 7px; color: #59677a; font-size: 12px; font-weight: 700; } .chat-compose select, .chat-compose textarea { width: 100%; padding: 10px; border: 1px solid #dce2ea; border-radius: 8px; outline-color: #315fd4; color: #233247; font: 14px "DM Sans", sans-serif; resize: vertical; } @media (max-width: 980px) { body.mobile-menu-open { overflow: hidden; overscroll-behavior: none; touch-action: none; } body.mobile-menu-open .sidebar { touch-action: pan-y; } .app-shell > main { width: 100%; margin-left: 0; } .chat-app { grid-template-columns: 1fr; height: calc(100dvh - 150px); } .chat-app .chat-thread { display: none; } .chat-app.has-active .chat-list { display: none; } .chat-app.has-active .chat-thread { display: flex; } .chat-back { display: inline-block; } .sidebar { display: flex; position: fixed; inset: 0 auto 0 0; width: min(82vw, 320px); height: 100dvh; max-height: 100dvh; z-index: 10; overflow-y: scroll !important; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; transform: translateX(-105%); transition: transform .24s ease; box-shadow: 12px 0 36px rgba(26, 45, 73, .18); } .sidebar-footer { flex-shrink: 0; margin-top: 28px; } .app-shell.mobile-nav .sidebar { transform: translateX(0); } .nav-backdrop { display: none; } .app-shell.mobile-nav .nav-backdrop { position: fixed; z-index: 9; display: block; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(20, 32, 51, .32); } .topbar { padding: 0 22px; } .menu-button { display: block; } .content { padding: 30px 28px 56px; } .workspace { grid-template-columns: 1fr; } .task-table { min-width: 680px; } .calendar { overflow-x: auto; } .calendar-grid { min-width: 650px; } } @media (max-width: 620px) { body { font-size: 13px; } .login-shell { padding: 18px; } .login-card { padding: 30px 24px; } .app-shell > main { width: 100%; margin-left: 0; } .topbar { height: 62px; padding: 0 16px; } .search { flex: 1; min-width: 0; } .search input { width: 100%; min-width: 0; } .content { padding: 24px 16px 42px; } .page-heading { gap: 12px; margin-bottom: 20px; } .page-heading h1 { font-size: 23px; } .page-heading p { font-size: 13px; line-height: 1.45; } .view-toolbar { align-items: flex-start; gap: 12px; } .view-toolbar .primary { white-space: nowrap; } .access-summary { grid-template-columns: 1fr; } .login-logo { width: 165px; height: 110px; } .welcome-brand { min-height: 78px; margin-bottom: 18px; padding: 8px 12px; } .welcome-brand img { width: 112px; height: 62px; } .access-summary > div { min-height: auto; padding: 15px 16px; } .panel-head { align-items: flex-start; gap: 8px; padding: 16px; } .panel-head .muted { max-width: 160px; text-align: right; font-size: 11px; line-height: 1.35; } .task-table { min-width: 600px; } .task-table th, .task-table td { padding-left: 15px; padding-right: 15px; } .stats { grid-template-columns: repeat(2, 1fr); } .stat { min-height: 100px; padding: 14px; } .stat strong { font-size: 24px; } .form-grid { grid-template-columns: 1fr; } dialog { width: calc(100% - 20px); max-height: calc(100vh - 20px); overflow-y: auto; } #task-dialog, #user-dialog, #completion-dialog { height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); } dialog form, .help-dialog { padding: 20px; } #task-dialog form, #user-dialog form, #completion-dialog form { padding-bottom: 92px; } .dialog-actions { position: sticky; bottom: -20px; padding: 14px 0 0; background: #fff; } } .task-detail ul { max-height: none; overflow: visible; } .comment-box { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; margin-top: 10px; padding-top: 10px; border-top: 1px solid #dfe8f5; } .comment-box textarea { width: 100%; padding: 8px 10px; border: 1px solid #dce2ea; border-radius: 7px; font: 13px "DM Sans", sans-serif; resize: vertical; } .comment-box .primary { padding: 8px 12px; font-size: 12px; } .dialog-actions .warn { margin-right: auto; background: #fff0e5; color: #bd6924; } .history-actions { margin-top: 12px; } .history-actions .ghost { padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; } .topbar { position: sticky; } .bell { position: relative; } .bell i { display: none; } .bell b { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #dc5361; color: #fff; font-size: 10px; font-weight: 800; line-height: 18px; text-align: center; } .bell.has-late b { animation: bell-pulse 1.6s ease-in-out infinite; } @keyframes bell-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 83, 97, .45); } 50% { box-shadow: 0 0 0 6px rgba(220, 83, 97, 0); } } .reminder-panel { position: absolute; top: 60px; right: 28px; z-index: 5; width: min(380px, calc(100vw - 32px)); border: 1px solid #dfe8f5; border-radius: 12px; background: #fff; box-shadow: 0 18px 40px rgba(16, 33, 60, .18); } .reminder-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid #eef2f7; } .reminder-head strong { font: 700 14px Manrope, sans-serif; color: #1b2d43; } .reminder-list { max-height: 360px; overflow-y: auto; } .reminder-item { display: flex; gap: 10px; width: 100%; padding: 10px 16px; background: transparent; text-align: left; border-bottom: 1px solid #f1f4f8; } .reminder-item:hover { background: #f6f8fb; } .reminder-item strong { display: block; color: #27364a; font-size: 13px; } .reminder-item small { display: block; margin-top: 2px; color: #728096; font-size: 11px; } .reminder-dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: #3d977b; } .reminder-item.late .reminder-dot { background: #d83e52; box-shadow: 0 0 0 3px #ffebed; } .reminder-item.late small { color: #c64353; font-weight: 700; } .reminder-item.today .reminder-dot { background: #e8863a; } .reminder-item.today small { color: #bd6924; font-weight: 700; } .reminder-empty { margin: 0; padding: 22px 16px; color: #728096; font-size: 13px; text-align: center; } .reminder-foot { padding: 10px 16px; border-top: 1px solid #eef2f7; font-size: 12px; } .reminder-foot .ghost { padding: 7px 10px; border-radius: 7px; font-size: 12px; font-weight: 700; } @media (max-width: 620px) { .reminder-panel { right: 12px; top: 56px; } } @media (max-width: 620px) { .top-actions { display: flex; gap: 8px; } .top-actions [data-action="help"] { display: none; } } /* ---- Módulo Plantillas ---- */ .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; } .tpl-card { background: #fff; border: 1px solid #e6e8ef; border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 2px rgba(16,24,40,.04); } .tpl-card-head { display: flex; gap: 12px; align-items: flex-start; } .tpl-card-head h3 { margin: 0 0 2px; font-size: 15px; } .tpl-icon { flex: none; width: 38px; height: 38px; border-radius: 10px; background: #eef2ff; color: #3b4fd8; font-weight: 800; display: grid; place-items: center; font-size: 15px; } .tpl-card-actions { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; } .tpl-card p { margin: 0; font-size: 13px; } dialog.tpl-dialog { border: 0; border-radius: 16px; padding: 22px; width: min(720px, 94vw); max-height: 92vh; overflow: auto; box-shadow: 0 24px 60px rgba(16,24,40,.25); } dialog.tpl-dialog.wide { width: min(900px, 96vw); } dialog.tpl-dialog.xl { width: min(1240px, 97vw); padding: 0; max-height: 94vh; } dialog.tpl-dialog::backdrop { background: rgba(16,24,40,.45); } .tpl-dialog .dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .tpl-dialog .dialog-heading h2 { margin: 0; } .tpl-dialog .close { border: 0; background: #f1f3f8; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; cursor: pointer; } .tpl-dialog .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .tpl-dialog .form-grid .full { grid-column: 1 / -1; } .tpl-dialog label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: #4b5563; } .tpl-dialog input, .tpl-dialog select, .tpl-dialog textarea { font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid #d9dce5; border-radius: 9px; background: #fff; } .tpl-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } .tpl-tabs button { border: 1px solid #d9dce5; background: #fff; padding: 7px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; margin-right: 6px; } .tpl-tabs button.active { background: #1f2a5a; color: #fff; border-color: #1f2a5a; } .tpl-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border: 1px solid #d9dce5; border-bottom: 0; border-radius: 9px 9px 0 0; background: #f7f8fb; align-items: center; } .tpl-toolbar button { border: 1px solid transparent; background: transparent; padding: 5px 9px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px; } .tpl-toolbar button:hover { background: #e9ecf5; } .tpl-toolbar button.primary { background: #1f2a5a; color: #fff; } .tpl-editor { min-height: 260px; max-height: 45vh; overflow: auto; border: 1px solid #d9dce5; border-radius: 0 0 9px 9px; padding: 22px 26px; font: 14px/1.6 "Times New Roman", Georgia, serif; background: #fff; outline: none; } .tpl-editor:focus { border-color: #3b4fd8; } .tpl-field-table input, .tpl-field-table select { width: 100%; padding: 6px 8px; font-size: 13px; } .tpl-field-table td, .tpl-field-table th { padding: 6px 8px; vertical-align: middle; } .tpl-field-table code { background: #fff3a3; padding: 2px 6px; border-radius: 5px; font-size: 12px; white-space: nowrap; } .tpl-gen { display: grid; grid-template-columns: 340px 1fr; min-height: 70vh; max-height: 94vh; } .tpl-gen-form { padding: 20px; border-right: 1px solid #e6e8ef; overflow: auto; background: #fbfbfd; display: flex; flex-direction: column; } .tpl-gen-form form { display: flex; flex-direction: column; gap: 10px; } .tpl-gen-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .tpl-gen-actions button { width: 100%; } .tpl-gen-preview { background: #e9ebf2; padding: 24px; overflow: auto; display: flex; justify-content: center; align-items: flex-start; } .tpl-paper { background: #fff; width: 100%; max-width: 760px; min-height: 900px; padding: 60px 64px; box-shadow: 0 6px 30px rgba(16,24,40,.18); font: 14px/1.65 "Times New Roman", Georgia, serif; color: #111; } .tpl-paper h1, .tpl-paper h2, .tpl-paper h3 { font-family: Arial, Helvetica, sans-serif; margin: 0 0 10px; } .tpl-paper p { margin: 0 0 10px; white-space: pre-wrap; } .tpl-paper table { border-collapse: collapse; } .tpl-paper td, .tpl-paper th { border: 1px solid #999; padding: 4px 8px; } mark.tpl-blank { background: #fff3a3; border-bottom: 2px dashed #d4a800; padding: 1px 6px; border-radius: 3px; font-family: Arial, sans-serif; font-size: 12px; color: #6b5300; text-transform: uppercase; letter-spacing: .3px; } .tpl-val { background: #e8f5e9; border-radius: 3px; padding: 0 2px; } .tpl-form .login-error:empty { display: none; } .tpl-dialog .ghost.danger { color: #b42318; } @media (max-width: 860px) { .tpl-gen { grid-template-columns: 1fr; max-height: none; } .tpl-gen-form { border-right: 0; border-bottom: 1px solid #e6e8ef; } .tpl-gen-preview { padding: 12px; } .tpl-paper { padding: 28px 22px; min-height: 0; } .tpl-dialog .form-grid { grid-template-columns: 1fr; } dialog.tpl-dialog { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 0; margin: 0; } } .tpl-dialog form { padding: 0; } .tpl-dialog .login-error { color: #b42318; font-size: 13px; margin: 10px 0 0; } .tpl-gen-actions .ghost, .tpl-card-actions button { padding: 9px 14px; border-radius: 8px; font-weight: 700; } .tpl-import { display: inline-block; margin-left: 6px; padding: 3px 10px; border: 1px solid #d9dce5; border-radius: 999px; background: #fff; color: #1f2a5a; font-weight: 700; cursor: pointer; } .tpl-import:hover { background: #eef2ff; } .tpl-editor table { border-collapse: collapse; margin: 8px 0; } .tpl-editor td, .tpl-editor th { border: 1px solid #999; padding: 4px 8px; } .tpl-editor img { max-width: 100%; } .tpl-dialog label.tpl-import { display: inline-flex; flex-direction: row; width: auto; font-size: 12px; } /* ---- Tablero ---- */ .board-list { display: grid; gap: 14px; max-width: 860px; } .board-post { background: #fff; border: 1px solid #e6e8ef; border-radius: 14px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(16,24,40,.04); } .board-post.unread { border-left: 4px solid #315fd4; } .board-post.pinned { background: #fffdf2; } .board-post-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; } .board-post-head .assignee { font-size: 13px; } .board-tags { display: flex; gap: 6px; flex-wrap: wrap; } .board-post h3 { margin: 10px 0 6px; font: 700 17px Manrope; color: #1b2d43; } .board-event { margin: 0 0 6px; color: #315fd4; font-weight: 700; font-size: 13px; } .board-body { color: #34435a; line-height: 1.55; font-size: 14px; word-break: break-word; } .board-body a { color: #315fd4; } .board-post-foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } .board-post-foot .ghost { padding: 7px 11px; border-radius: 8px; font-size: 12px; font-weight: 700; } .board-comments { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eff1f4; display: grid; gap: 10px; } .board-comment { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; } .board-comment .assignee { align-items: flex-start; flex: 1; min-width: 0; } .board-check { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 4px; border-radius: 50%; border: 2px solid #1f9d7a; background: transparent; color: #fff; font-size: 12px; line-height: 1; padding: 0; cursor: pointer; } .board-check:hover { background: #e6f7f1; } .board-comment.done .board-check { background: #1f9d7a; } .board-comment.done .board-comment-body { text-decoration: line-through; color: #7c8999; } .board-done { display: block; margin-top: 2px; color: #1f9d7a; font-size: 11px; font-weight: 700; } .board-checklist { margin-top: 12px; padding: 12px 14px; border: 1px solid #d7efe6; border-radius: 12px; background: #f4fbf8; } .board-checklist header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; } .board-items { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; } .board-item { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; border-radius: 8px; background: #fff; font-size: 14px; } .board-item .board-check { margin-top: 1px; } .board-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .board-item-text small { font-size: 11px; } .board-item.done span { text-decoration: line-through; color: #7c8999; } .board-item .ghost.tiny { padding: 2px 8px; font-size: 14px; background: transparent; } .board-item-form { display: flex; gap: 8px; align-items: flex-end; } .board-item-form textarea { flex: 1; font: inherit; font-size: 14px; padding: 8px 11px; border: 1px solid #cfe3da; border-radius: 9px; resize: vertical; background: #fff; } .board-item-form button { padding: 8px 14px; border-radius: 8px; } :root[data-theme="dark"] .board-checklist { background: #15241f; border-color: #234237; } :root[data-theme="dark"] .board-item, :root[data-theme="dark"] .board-item-form textarea { background: #1a2130; border-color: #2a3446; color: #d5dcea; } :root[data-theme="dark"] .board-item.done span { color: #8a96a6; } :root[data-theme="dark"] .board-check:hover { background: #15302a; } :root[data-theme="dark"] .board-comment.done .board-comment-body { color: #8a96a6; } .board-comment .ghost.tiny { padding: 2px 8px; font-size: 14px; background: transparent; } .board-comment-form { display: flex; gap: 8px; align-items: flex-end; } .board-comment-form textarea { flex: 1; font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid #d9dce5; border-radius: 9px; resize: vertical; } .board-comment-form button { padding: 9px 14px; border-radius: 8px; } .nav-item b:empty { display: none; } @media (max-width: 860px) { .view-toolbar { flex-wrap: wrap; gap: 10px; } .board-post { padding: 14px; } } .board-filters { flex-wrap: wrap; } .board-alerts { margin: 0 0 22px; padding: 14px 16px; border: 1px solid #f3d98b; border-radius: 14px; background: linear-gradient(135deg, #fffbe8, #fff6d6); } .board-alerts-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .board-alerts-head h2 { margin: 0; font: 800 15px Manrope; color: #6b4f00; } .board-alerts-head a { color: #315fd4; font-size: 12px; font-weight: 700; text-decoration: none; } .board-alerts-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .board-alert { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #efe3b8; text-decoration: none; color: #1b2d43; } .board-alert strong { font-size: 14px; } .board-alert small { font-size: 11px; } .board-alert.urgente { border-left: 4px solid #dc5361; } .board-alert.unread { box-shadow: 0 0 0 2px #315fd422; } .board-alert .badge { align-self: flex-start; } .clickable { cursor: pointer; } .viz-row.clickable:hover rect:not([fill="transparent"]) { filter: brightness(1.12); } .viz-row.clickable:hover .viz-label { fill: #315fd4; font-weight: 700; } .donut-legend li.clickable:hover, .dash-table tr.clickable:hover td { background: #f0f4ff; } circle.clickable:hover { filter: brightness(1.12); } .kpi.clickable { transition: transform .12s, box-shadow .12s; } .kpi.clickable:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,24,40,.1); } .link-cell { background: transparent; padding: 0; color: #1b2d43; font: inherit; font-weight: 700; text-align: left; cursor: pointer; } .link-cell:hover { color: #315fd4; text-decoration: underline; } .tpl-paper img.tpl-img-firma { max-height: 80px; display: inline-block; } .tpl-paper img.tpl-img-sello { max-height: 120px; display: inline-block; } .tpl-paper img.tpl-img-membrete { width: 100%; display: block; } .asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .asset-card { border: 1px solid #e6e8ef; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .asset-img { height: 90px; display: grid; place-items: center; background: repeating-conic-gradient(#f3f4f7 0 25%, #fff 0 50%) 0 0 / 16px 16px; border-radius: 8px; overflow: hidden; } .asset-img img { max-width: 100%; max-height: 100%; } .asset-card .ghost { margin-top: 4px; padding: 6px 10px; border-radius: 8px; font-size: 12px; } .tpl-paper .tpl-arial, .tpl-paper .tpl-arial * { font-family: Arial, Helvetica, sans-serif; } .tpl-paper th { background: #bfbfbf; text-align: center; } .tpl-paper td { text-align: center; } .gen-field.gen-hidden { display: none; } #gen-more { margin-top: 6px; padding: 8px 12px; border-radius: 8px; font-weight: 700; } /* Enviar documento por correo */ .send-list { max-height: 260px; overflow: auto; border: 1px solid #e3e6ee; border-radius: 10px; padding: 8px 10px; display: grid; gap: 8px; } .send-group { display: grid; gap: 4px; } .send-group > strong { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #728096; margin: 4px 0 2px; } .send-user { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; color: #1e2938; cursor: pointer; } .send-user input { width: 16px; height: 16px; margin: 0; } .send-user small { display: block; font-weight: 400; } .send-details { margin-top: 10px; } .send-details > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: #4b5563; margin-bottom: 6px; } .send-format { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; font-size: 12px; font-weight: 600; color: #4b5563; } .send-format .send-user { font-weight: 500; } .send-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; } .send-recent .chip { border: 1px solid #d9dce5; background: #f6f7fb; border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; } .send-recent .chip:hover { background: #e9ecf5; } /* Clientes y calendario fiscal */ .cl-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: -10px 0 16px; } .cl-search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #d9dce5; border-radius: 10px; background: #fff; } .cl-search svg { width: 16px; height: 16px; fill: none; stroke: #8691a3; stroke-width: 2; } .cl-search input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 14px; background: transparent; } .cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .cl-card { background: #fff; border: 1px solid #e6e8ef; border-radius: 14px; padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 12px; transition: box-shadow .15s, transform .15s; } .cl-card:hover { box-shadow: 0 10px 26px rgba(26,45,73,.08); transform: translateY(-1px); } .cl-card.cl-inactive { opacity: .6; } .cl-card-head { display: flex; gap: 12px; align-items: center; } .cl-card-head h3 { margin: 0; font-size: 15px; } .cl-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #e9efff; color: #2a5fd0; font: 800 14px Manrope, sans-serif; flex: 0 0 auto; } .cl-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: #60748d; } .cl-stats b { color: #1b2d43; font-weight: 800; } .cl-stats .cl-late, .cl-stats .cl-late b { color: #c84453; } .cl-badge { padding: 2px 8px; border-radius: 999px; background: #f1f3f8; font-size: 11px; font-weight: 700; } .cl-actions { display: flex; gap: 8px; flex-wrap: wrap; } .cl-detail { display: grid; gap: 16px; } .cl-detail .panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #e8ecf1; } .cl-detail .panel-head h2 { margin: 0 0 4px; font-size: 16px; } .cl-detail .panel-head p { margin: 0; font-size: 12px; } .cl-table td, .cl-table th { padding: 10px 14px; font-size: 13px; } .cl-row-off td { opacity: .55; } .cl-status { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; } .cl-s-ok { background: #e3f6ea; color: #1f7a3f; } .cl-s-open { background: #e9efff; color: #2a5fd0; } .cl-s-wait { background: #fff5e0; color: #9a6a12; } .cl-s-late { background: #ffebed; color: #c84453; } .cl-s-off { background: #f1f3f8; color: #8691a3; } .cl-mini { padding: 3px 9px !important; font-size: 12px !important; border-radius: 6px !important; } .cl-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: #1b2d43; cursor: pointer; text-align: left; } .cl-link:hover { color: #2a5fd0; } .cl-notes { padding: 14px 18px; margin: 0; font-size: 13px; line-height: 1.5; } .cl-ob input[type=checkbox] { width: 16px; height: 16px; } .cl-ob select { max-width: 200px; } @media (max-width: 720px) { .cl-table thead { display: none; } .cl-table tr { display: grid; gap: 4px; padding: 10px 14px; border-bottom: 1px solid #e8ecf1; } .cl-table td { display: block; padding: 0; border: 0; } } /* Tabla de tareas: columnas más compactas, nombres en una línea y botón de acción siempre visible */ .task-table td { padding: 14px 12px; } .task-table th { padding: 10px 12px; } .task-table td:first-child, .task-table th:first-child { padding-left: 20px; min-width: 220px; } .task-table td:last-child, .task-table th:last-child { padding-right: 20px; white-space: nowrap; } .task-table .assignee span { white-space: nowrap; } .task-table .assignee small { white-space: normal; max-width: 120px; } .task-table td:nth-child(4) .assignee small { display: none; } .task-table .deadline { white-space: nowrap; } .task-table td:nth-child(6) { white-space: nowrap; } .task-table td:last-child .ghost { padding: 7px 12px; } .panel .table-wrap { overflow-x: auto; } @media (max-width: 1400px) { .task-table td:nth-child(4) .assignee .avatar { display: none; } } .task-table td:nth-child(4) .assignee .avatar { display: none; } .task-table td:nth-child(4) .assignee { font-size: 12px; } .task-table td:first-child, .task-table th:first-child { min-width: 200px; } /* Modo oscuro */ :root[data-theme="dark"] { color-scheme: dark; --ink: #e6ebf3; --muted: #9aa7ba; --line: #2a3446; --surface: #161c27; --page: #0f141c; --navy: #dbe6ff; --blue: #6b93ff; --blue-pale: #1d2a46; --nexo-ink: #e6ebf3; } :root[data-theme="dark"] body { background: #0f141c; color: #e6ebf3; } :root[data-theme="dark"] .sidebar { background: #121823; border-right-color: #232c3b; } :root[data-theme="dark"] .sidebar-logo { border-bottom-color: #232c3b; background: transparent; } :root[data-theme="dark"] .sidebar-logo img { mix-blend-mode: normal; content: url("./assets/nexo-logo-dark.png?v=3"); } :root[data-theme="dark"] .nav-item { color: #a9b5c8; } :root[data-theme="dark"] .nav-item.active { color: #9db5ff; background: #1d2a46; } :root[data-theme="dark"] .nav-item b { background: #2a3446; color: #c3cde0; } :root[data-theme="dark"] .topbar { background: #121823; border-bottom-color: #232c3b; } :root[data-theme="dark"] .search input, :root[data-theme="dark"] .search { background: transparent; color: #e6ebf3; } :root[data-theme="dark"] .top-actions button, :root[data-theme="dark"] .menu-button, :root[data-theme="dark"] .footer-link, :root[data-theme="dark"] .user-chip button { color: #a9b5c8; } :root[data-theme="dark"] .page-heading { border-bottom-color: #232c3b; } :root[data-theme="dark"] .page-heading h1, :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3 { color: #eef2f8; } :root[data-theme="dark"] .panel, :root[data-theme="dark"] .stat, :root[data-theme="dark"] .kpi, :root[data-theme="dark"] .tpl-card, :root[data-theme="dark"] .cl-card, :root[data-theme="dark"] .cl-search, :root[data-theme="dark"] .history-search, :root[data-theme="dark"] .filter, :root[data-theme="dark"] .send-list, :root[data-theme="dark"] .tabs button.active, :root[data-theme="dark"] .calendar-weekday, :root[data-theme="dark"] .calendar-day { background: #161c27; border-color: #2a3446; color: #e6ebf3; } :root[data-theme="dark"] .panel-head, :root[data-theme="dark"] .task-table th, :root[data-theme="dark"] .cl-detail .panel-head { background: #1a2130; border-color: #2a3446; color: #c3cde0; } :root[data-theme="dark"] .task-table td { border-bottom-color: #232c3b; } :root[data-theme="dark"] .task-table tr:hover td { background: #1a2130; } :root[data-theme="dark"] .task-title, :root[data-theme="dark"] .task-title button, :root[data-theme="dark"] .cl-link, :root[data-theme="dark"] .stat strong, :root[data-theme="dark"] .kpi strong, :root[data-theme="dark"] .cl-stats b, :root[data-theme="dark"] .send-user, :root[data-theme="dark"] .focus-item strong { color: #eef2f8; } :root[data-theme="dark"] .assignee, :root[data-theme="dark"] .deadline, :root[data-theme="dark"] .muted, :root[data-theme="dark"] .stat small, :root[data-theme="dark"] .kpi small, :root[data-theme="dark"] .kpi-label, :root[data-theme="dark"] .cl-stats, :root[data-theme="dark"] .tpl-dialog label, :root[data-theme="dark"] .form-grid label, :root[data-theme="dark"] small { color: #9aa7ba; } :root[data-theme="dark"] .filter.active { background: #1d2a46; border-color: #3a4d7a; color: #9db5ff; } :root[data-theme="dark"] .tabs { background: #1a2130; } :root[data-theme="dark"] .ghost { background: #232c3b; color: #d5dcea; } :root[data-theme="dark"] .ghost:hover { background: #2a3446; } :root[data-theme="dark"] dialog, :root[data-theme="dark"] dialog.tpl-dialog { background: #161c27; color: #e6ebf3; } :root[data-theme="dark"] .tpl-dialog .close { background: #232c3b; color: #d5dcea; } :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea, :root[data-theme="dark"] .form-grid input, :root[data-theme="dark"] .form-grid select, :root[data-theme="dark"] .form-grid textarea, :root[data-theme="dark"] .tpl-dialog input, :root[data-theme="dark"] .tpl-dialog select, :root[data-theme="dark"] .tpl-dialog textarea { background: #0f141c; border-color: #2a3446; color: #e6ebf3; } :root[data-theme="dark"] .notice { background: #1d2a46; } :root[data-theme="dark"] .notice strong { color: #9db5ff; } :root[data-theme="dark"] .notice p { color: #b5c4e8; } :root[data-theme="dark"] .focus-item { border-bottom-color: #232c3b; } :root[data-theme="dark"] .cl-avatar, :root[data-theme="dark"] .kpi.blue .kpi-icon { background: #1d2a46; color: #9db5ff; } :root[data-theme="dark"] .cl-badge, :root[data-theme="dark"] .cl-s-off, :root[data-theme="dark"] .send-recent .chip { background: #232c3b; color: #c3cde0; } :root[data-theme="dark"] .calendar-day.muted { background: #121823; color: #6c7a90; } :root[data-theme="dark"] .calendar-card { background: #1a2130; color: #d5dcea; } :root[data-theme="dark"] .tpl-paper { background: #fff; color: #000; } :root[data-theme="dark"] #reminder-panel, :root[data-theme="dark"] .reminder-item { background: #161c27; border-color: #2a3446; color: #e6ebf3; } :root[data-theme="dark"] .board-alert, :root[data-theme="dark"] .home-alert { background: #2a2614; border-color: #4a4120; } :root[data-theme="dark"] .empty { color: #9aa7ba; } :root[data-theme="dark"] .empty h2 { color: #d5dcea; } :root[data-theme="dark"] .user-chip { border-top-color: #232c3b; } :root[data-theme="dark"] .user-chip strong { color: #e6ebf3; } :root[data-theme="dark"] .login-shell, :root[data-theme="dark"] .login-card { background: #161c27; color: #e6ebf3; } .reminder-mini { padding: 4px 10px !important; font-size: 11px !important; margin-left: 6px; } :root[data-theme="dark"] .dash-head h1, :root[data-theme="dark"] .page-heading h1, :root[data-theme="dark"] #content h1, :root[data-theme="dark"] #content h2, :root[data-theme="dark"] #content h3 { color: #eef2f8 !important; } :root[data-theme="dark"] .board-alerts { background: #2a2614; border-color: #4a4120; } :root[data-theme="dark"] .board-alerts-head h2 { color: #f1d98a !important; } :root[data-theme="dark"] .board-alert { background: #1a2130; border-color: #3a3620; color: #e6ebf3; } :root[data-theme="dark"] .board-alert strong, :root[data-theme="dark"] .board-alert span:not(.badge) { color: #e6ebf3; } :root[data-theme="dark"] .dash-head p, :root[data-theme="dark"] .dash-head small { color: #9aa7ba; } :root[data-theme="dark"] .viz-table td, :root[data-theme="dark"] .viz-table th { border-color: #2a3446; color: #d5dcea; } :root[data-theme="dark"] .tabs button.active { background: #2a3446; color: #9db5ff; } :root[data-theme="dark"] .tabs button { color: #9aa7ba; } :root[data-theme="dark"] .agenda-day, :root[data-theme="dark"] .agenda-item, :root[data-theme="dark"] .history-head, :root[data-theme="dark"] .history-body, :root[data-theme="dark"] .chat-bubble, :root[data-theme="dark"] .reminder-item { background: #161c27; color: #e6ebf3; border-color: #2a3446; } :root[data-theme="dark"] .content, :root[data-theme="dark"] .app-shell > main { background: #0f141c; } :root[data-theme="dark"] .board-post { background: #161c27; border-color: #2a3446; color: #e6ebf3; box-shadow: none; } :root[data-theme="dark"] .board-post.pinned { background: #1a1f2c; } :root[data-theme="dark"] .board-post h3, :root[data-theme="dark"] .board-post strong, :root[data-theme="dark"] .board-post p { color: #e6ebf3; } :root[data-theme="dark"] .chat-list, :root[data-theme="dark"] .chat-conv, :root[data-theme="dark"] .chat-thread-head, :root[data-theme="dark"] .chat-composer { background: #161c27; border-color: #2a3446; color: #e6ebf3; } :root[data-theme="dark"] .chat-conv:hover { background: #1a2130; } :root[data-theme="dark"] .chat-conv.active { background: #1d2a46; } :root[data-theme="dark"] .chat-conv strong, :root[data-theme="dark"] .chat-thread-head strong { color: #e6ebf3; } :root[data-theme="dark"] .chat-thread { background: #121823; } :root[data-theme="dark"] .chat-empty strong { color: #d5dcea; } :root[data-theme="dark"] .chat-bubble { background: #232c3b; color: #e6ebf3; } :root[data-theme="dark"] .chat-bubble-wrap.mine .chat-bubble { background: #2a4a9a; } :root[data-theme="dark"] .history-note, :root[data-theme="dark"] .history-desc { background: #1a2130; color: #e6ebf3; } :root[data-theme="dark"] .history-note { background: #15302a; } :root[data-theme="dark"] .history-item { border-top-color: #232c3b; } :root[data-theme="dark"] .calendar-grid, :root[data-theme="dark"] .calendar { background: #161c27; border-color: #2a3446; } :root[data-theme="dark"] .cal-nav h2, :root[data-theme="dark"] .cal-nav strong { color: #eef2f8 !important; } :root[data-theme="dark"] .day-number { color: #d5dcea; } :root[data-theme="dark"] .stat.blue { border-top-color: #6b93ff; } :root[data-theme="dark"] .login-shell { background: #0f141c; } /* En modo oscuro el logo usa una variante clara (navy -> blanco, azul intacto) con fondo transparente, para que no salga la caja blanca ni se pierda sobre la tarjeta oscura del login. */ :root[data-theme="dark"] .login-logo { content: url("./assets/nexo-logo-dark.png?v=3"); } :root[data-theme="dark"] .access-summary > div { background: #161c27; border-color: #2a3446; color: #e6ebf3; } :root[data-theme="dark"] .access-summary strong { color: #eef2f8; } :root[data-theme="dark"] .access-summary small, :root[data-theme="dark"] .access-summary span { color: #9aa7ba; } /* Asistente */ .ai-app { display: flex; flex-direction: column; height: calc(100vh - 235px); min-height: 420px; border: 1px solid #e6e8ef; border-radius: 14px; background: #fff; overflow: hidden; } .ai-thread { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; } .ai-welcome { margin: auto; width: 100%; max-width: 760px; padding: 10px 4px; } .ai-hero { text-align: center; max-width: 560px; margin: 0 auto 18px; } .ai-hero-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(145deg, #466ee0, #2748a5); color: #fff; font-size: 20px; box-shadow: 0 8px 20px rgba(49,95,212,.3); margin-bottom: 10px; } .ai-welcome h3 { margin: 0 0 6px; font: 800 22px Manrope, sans-serif; letter-spacing: -.3px; } .ai-hero p { margin: 0; font-size: 13.5px; line-height: 1.5; } .ai-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ai-group { padding: 12px 12px 8px; border: 1px solid #e3e7ef; border-radius: 14px; background: #fff; } .ai-group h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px 4px; font: 800 11px Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6d7a8e; } .ai-group h4 span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #eef2fb; font-size: 13px; } .ai-sug { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 10px; margin: 2px 0; border-radius: 9px; background: transparent; color: #27364a; font: 500 13.5px "DM Sans", sans-serif; text-align: left; cursor: pointer; transition: background .15s; } .ai-sug i { font-style: normal; color: #a4afc0; transition: transform .15s, color .15s; } .ai-sug:hover { background: #f0f4ff; color: #2751bb; } .ai-sug:hover i { transform: translateX(3px); color: #315fd4; } :root[data-theme="dark"] .ai-group { background: #1a2130; border-color: #2a3446; } :root[data-theme="dark"] .ai-group h4 span { background: #243049; } :root[data-theme="dark"] .ai-sug { color: #e6ebf3; } :root[data-theme="dark"] .ai-sug:hover { background: #243049; color: #9db5ff; } @media (max-width: 720px) { .ai-groups { grid-template-columns: 1fr; } } .ai-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; } .ai-chips .chip, .send-recent .chip { border: 1px solid #d9dce5; background: #f6f7fb; border-radius: 999px; padding: 7px 12px; font-size: 13px; cursor: pointer; } .ai-chips .chip:hover { background: #e9ecf5; } .ai-msg { display: flex; gap: 10px; max-width: 86%; } .ai-user { align-self: flex-end; } .ai-user .ai-bubble { background: #315fd4; color: #fff; border-radius: 14px 14px 4px 14px; } .ai-bot .ai-bubble { background: #f3f5fa; border-radius: 4px 14px 14px 14px; } .ai-bubble { padding: 10px 14px; font-size: 14px; line-height: 1.5; } .ai-bubble p { margin: 0 0 6px; } .ai-bubble p:last-child { margin-bottom: 0; } .ai-bubble ul { margin: 4px 0 6px; padding-left: 18px; } .ai-bubble li { margin: 2px 0; } .ai-bubble code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; } .ai-bubble.ai-error { background: #ffebed; color: #c84453; } .ai-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; background: #1d2a46; color: #9db5ff; display: grid; place-items: center; font: 800 13px Manrope, sans-serif; } .ai-drafts { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; } .ai-draft { font-size: 12px !important; padding: 7px 10px !important; } .ai-chart { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid #e3e7ef; border-radius: 10px; background: #fff; } .ai-chart figcaption { margin: 0 0 6px; font: 700 13px Manrope, sans-serif; color: #27364a; } .ai-chart svg { width: 100%; display: block; } .ai-chart .ai-lbl { font: 600 11px "DM Sans", sans-serif; fill: #56657a; } .ai-chart .ai-val { font: 700 10.5px "DM Sans", sans-serif; fill: #27364a; } .ai-donut { display: flex; align-items: center; gap: 14px; } .ai-donut svg { width: 120px; flex: 0 0 auto; } .ai-donut-total { font: 800 20px Manrope, sans-serif; fill: #27364a; } .ai-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; color: #56657a; } .ai-legend li { display: flex; align-items: center; gap: 6px; } .ai-legend i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; } .ai-legend b { color: #27364a; } .ai-legend-row { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 6px; } :root[data-theme="dark"] .ai-chart { background: #161c27; border-color: #2a3446; } :root[data-theme="dark"] .ai-chart figcaption, :root[data-theme="dark"] .ai-chart .ai-val, :root[data-theme="dark"] .ai-donut-total, :root[data-theme="dark"] .ai-legend b { color: #e6ebf3; fill: #e6ebf3; } :root[data-theme="dark"] .ai-chart .ai-lbl, :root[data-theme="dark"] .ai-legend { fill: #a9b5c8; color: #a9b5c8; } .ai-composer { display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px; border-top: 1px solid #e6e8ef; background: #fbfcfe; } .ai-composer textarea { flex: 1; resize: none; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid #d9dce5; border-radius: 12px; outline-color: #315fd4; max-height: 160px; } .ai-dots { display: inline-flex; gap: 4px; } .ai-dots i { width: 6px; height: 6px; border-radius: 50%; background: #8691a3; animation: aiDot 1s infinite; } .ai-dots i:nth-child(2) { animation-delay: .15s; } .ai-dots i:nth-child(3) { animation-delay: .3s; } @keyframes aiDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } :root[data-theme="dark"] .ai-app, :root[data-theme="dark"] .ai-composer { background: #161c27; border-color: #2a3446; } :root[data-theme="dark"] .ai-bot .ai-bubble { background: #1f2735; color: #e6ebf3; } :root[data-theme="dark"] .ai-chips .chip { background: #232c3b; border-color: #2a3446; color: #d5dcea; } @media (max-width: 720px) { .ai-app { height: calc(100vh - 190px); } .ai-msg { max-width: 96%; } } /* Calendario: leyenda como filtros + filtro de tareas */ .cal-filterbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: -6px 0 14px; } .cal-legend button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #68758a; font: inherit; font-size: 12px; cursor: pointer; } .cal-legend button:hover { background: #f0f3f8; } .cal-legend button.off { opacity: .45; text-decoration: line-through; } .cal-legend .ev-envio { background: #1f9d7a; } .cal-legend .ev-recordatorio { background: #c68d16; } .calendar-card.ev-envio { border-color: #1f9d7a; background: #e6f7f1; color: #176b53; } .calendar-card.ev-recordatorio { border-color: #c68d16; background: #fff6e0; color: #7a5407; } .agenda-item.ev-envio { border-color: #1f9d7a; background: #f1fbf7; } .agenda-item.ev-recordatorio { border-color: #c68d16; background: #fffaf0; } .cal-taskfilter { display: flex; align-items: center; gap: 8px; font-size: 12px; } .cal-taskfilter .filters { display: flex; gap: 6px; } .reminder-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #eef2f7; } .reminder-filters .filter { padding: 4px 9px; font-size: 11px; } .reminder-item.rt-reunion .reminder-dot { background: #315fd4; } .reminder-item.rt-envio .reminder-dot { background: #1f9d7a; } .reminder-item.rt-impuesto .reminder-dot { background: #c94354; } /* Modo oscuro: partes que seguían claras o sin contraste */ :root[data-theme="dark"] .reminder-head, :root[data-theme="dark"] .reminder-foot, :root[data-theme="dark"] .reminder-filters { border-color: #2a3446; } :root[data-theme="dark"] .reminder-head strong, :root[data-theme="dark"] .reminder-item strong { color: #eef2f8; } :root[data-theme="dark"] .reminder-item small { color: #9aa7ba; } :root[data-theme="dark"] .reminder-item.late small { color: #ff8a97; } :root[data-theme="dark"] .reminder-item.today small { color: #f4a86a; } :root[data-theme="dark"] .reminder-item:hover { background: #1a2130; } :root[data-theme="dark"] .reminder-empty { color: #9aa7ba; } :root[data-theme="dark"] .task-detail { background: #1a2130; border-color: #2a3446; } :root[data-theme="dark"] .task-detail h3 { color: #eef2f8; } :root[data-theme="dark"] .task-detail ul, :root[data-theme="dark"] .task-detail li, :root[data-theme="dark"] #task-requester { color: #c3cde0; } :root[data-theme="dark"] .comment-box { border-top-color: #2a3446; } :root[data-theme="dark"] .dash-table th { background: #1a2130; border-color: #2a3446; color: #9aa7ba; } :root[data-theme="dark"] .dash-table td { border-color: #232c3b; color: #d5dcea; } :root[data-theme="dark"] .dash-table .link-cell { color: #eef2f8; } :root[data-theme="dark"] .dash-table .link-cell:hover { color: #9db5ff; } :root[data-theme="dark"] .dash-table .late { color: #ff8a97; } :root[data-theme="dark"] .dash-table .soon { color: #f4a86a; } :root[data-theme="dark"] .dash-table tr.clickable:hover td, :root[data-theme="dark"] .donut-legend li.clickable:hover { background: #1d2a46; } :root[data-theme="dark"] .risk-count { background: #3a1f25; color: #ff8a97; } :root[data-theme="dark"] .cal-legend button { color: #9aa7ba; } :root[data-theme="dark"] .cal-legend button:hover { background: #1a2130; } :root[data-theme="dark"] .calendar-card.ev-impuesto { background: #3a1f25; color: #ffb3bc; } :root[data-theme="dark"] .calendar-card.ev-reunion { background: #1d2a46; color: #b9cbff; } :root[data-theme="dark"] .calendar-card.ev-envio { background: #15302a; color: #9fe3cb; } :root[data-theme="dark"] .calendar-card.ev-recordatorio { background: #3a3014; color: #f1d98a; } :root[data-theme="dark"] .calendar-card.ev-otro { background: #232c3b; color: #d5dcea; } :root[data-theme="dark"] .agenda-item.ev-impuesto, :root[data-theme="dark"] .agenda-item.ev-reunion, :root[data-theme="dark"] .agenda-item.ev-envio, :root[data-theme="dark"] .agenda-item.ev-recordatorio, :root[data-theme="dark"] .agenda-item.ev-otro, :root[data-theme="dark"] .agenda-item.ev-task { background: #1a2130; } :root[data-theme="dark"] .filter { background: #1a2130; border-color: #2a3446; color: #c3cde0; } :root[data-theme="dark"] .filter.active { background: #1d2a46; border-color: #3a4d7a; color: #9db5ff; } :root[data-theme="dark"] .calendar-weekday { color: #9aa7ba; } :root[data-theme="dark"] .calendar-day { border-color: #232c3b; } :root[data-theme="dark"] .calendar-day.is-today { background: #1d2a46; } :root[data-theme="dark"] .focus-item strong, :root[data-theme="dark"] .history-item strong, :root[data-theme="dark"] .history-title { color: #eef2f8; } :root[data-theme="dark"] .tip, :root[data-theme="dark"] .productivity-tip { background: #1d2a46; color: #b5c4e8; } :root[data-theme="dark"] .cl-detail .page-heading h1, :root[data-theme="dark"] .cl-detail h1 { color: #eef2f8 !important; } :root[data-theme="dark"] .badge, :root[data-theme="dark"] .status-pill { filter: brightness(1.15); } :root[data-theme="dark"] .toast { background: #232c3b; color: #e6ebf3; } /* ---------- Mi espacio (tareas y notas personales) ---------- */ .pe-app { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; } .pe-app.has-detail { grid-template-columns: 220px 1fr 320px; } .pe-side { background: var(--surface, #fff); border: 1px solid var(--line, #dfe8f5); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 12px; } .pe-nav { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: var(--ink, #1a2d49); padding: 9px 10px; border-radius: 9px; text-align: left; font: inherit; cursor: pointer; } .pe-nav span { width: 20px; text-align: center; } .pe-nav b { margin-left: auto; font-weight: 600; font-size: .8rem; color: var(--muted, #6b7a90); } .pe-nav:hover { background: var(--blue-pale, #eef4ff); } .pe-nav.active { background: var(--blue-pale, #eef4ff); color: var(--blue, #2457d6); font-weight: 600; } .pe-sep { height: 1px; background: var(--line, #dfe8f5); margin: 6px 4px; } .pe-newlist input { width: 100%; border: 0; background: transparent; padding: 9px 10px; font: inherit; color: var(--muted, #6b7a90); } .pe-newlist input:focus { outline: none; color: var(--ink, #1a2d49); background: var(--blue-pale, #eef4ff); border-radius: 9px; } .pe-main { background: var(--surface, #fff); border: 1px solid var(--line, #dfe8f5); border-radius: 14px; padding: 18px 20px; min-height: 60vh; } .pe-main.pe-myday { background: linear-gradient(160deg, #fff7e6, var(--surface, #fff) 45%); } .pe-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .pe-head h2 { margin: 0; font-size: 1.35rem; } .pe-head p { margin: 2px 0 0; color: var(--muted, #6b7a90); } .pe-head p::first-letter { text-transform: uppercase; } .pe-listactions { display: flex; gap: 6px; } .pe-add { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line, #dfe8f5); border-radius: 10px; padding: 4px 12px; background: var(--surface, #fff); margin-bottom: 14px; } .pe-add span { color: var(--blue, #2457d6); font-size: 1.2rem; } .pe-add input { flex: 1; border: 0; background: transparent; padding: 10px 0; font: inherit; color: var(--ink, #1a2d49); } .pe-add input:focus { outline: none; } .pe-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .pe-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line, #dfe8f5); border-radius: 10px; padding: 6px 10px; background: var(--surface, #fff); transition: box-shadow .15s; } .pe-item:hover { box-shadow: 0 4px 14px rgba(26, 45, 73, .06); } .pe-item.selected { border-color: var(--blue, #2457d6); } .pe-item.done .pe-title { text-decoration: line-through; color: var(--muted, #6b7a90); } .pe-check { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; border: 2px solid var(--blue, #2457d6); background: transparent; color: #fff; font-size: .8rem; line-height: 1; cursor: pointer; padding: 0; } .pe-item.done .pe-check, .pe-check.on { background: var(--blue, #2457d6); } .pe-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 0; background: transparent; padding: 6px 0; font: inherit; color: var(--ink, #1a2d49); text-align: left; cursor: pointer; } .pe-body small { color: var(--muted, #6b7a90); font-size: .78rem; } .pe-late { color: #c0392b; font-weight: 600; } .pe-star { border: 0; background: transparent; font-size: 1.15rem; color: var(--muted, #9aa7ba); cursor: pointer; padding: 4px; } .pe-star.on { color: #e0a81e; } .pe-group { font-size: .85rem; color: var(--muted, #6b7a90); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .04em; } .pe-group b { font-weight: 600; } .pe-empty { color: var(--muted, #6b7a90); padding: 30px 10px; text-align: center; } .pe-donetoggle { border: 0; background: transparent; color: var(--muted, #6b7a90); font: inherit; cursor: pointer; padding: 8px 4px; } .pe-donetoggle b { font-weight: 600; } .pe-detail { background: var(--surface, #fff); border: 1px solid var(--line, #dfe8f5); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 12px; } .pe-detail-head { display: flex; align-items: center; gap: 8px; } .pe-detail-head .close { margin-left: auto; } .pe-detail-title { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid transparent; background: transparent; font: inherit; font-weight: 600; font-size: 1.05rem; color: var(--ink, #1a2d49); padding: 6px 2px; } .pe-detail-title:focus { outline: none; border-bottom-color: var(--blue, #2457d6); } .pe-opt { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid var(--line, #dfe8f5); border-radius: 10px; padding: 9px 12px; background: transparent; color: var(--ink, #1a2d49); font: inherit; text-align: left; cursor: pointer; } .pe-opt.on { background: var(--blue-pale, #eef4ff); color: var(--blue, #2457d6); } .pe-opt input, .pe-opt select { margin-left: auto; border: 1px solid var(--line, #dfe8f5); border-radius: 8px; padding: 4px 6px; font: inherit; background: var(--surface, #fff); color: var(--ink, #1a2d49); max-width: 150px; } .pe-x { border: 0; background: transparent; color: var(--muted, #6b7a90); cursor: pointer; font-size: 1rem; padding: 0 4px; } .pe-notes { width: 100%; border: 1px solid var(--line, #dfe8f5); border-radius: 10px; padding: 10px 12px; font: inherit; background: transparent; color: var(--ink, #1a2d49); resize: vertical; } .pe-detail-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; } .pe-del { color: #c0392b; } .pe-notes-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .pe-note { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line, #dfe8f5); border-radius: 12px; padding: 12px 14px; background: #fffbe8; color: var(--ink, #1a2d49); text-align: left; font: inherit; cursor: pointer; min-height: 110px; } .pe-note strong { font-weight: 600; } .pe-note small { color: var(--muted, #6b7a90); flex: 1; } .pe-note em { font-style: normal; color: var(--muted, #9aa7ba); font-size: .75rem; } .pe-note.selected { border-color: var(--blue, #2457d6); box-shadow: 0 0 0 2px var(--blue-pale, #eef4ff); } .pe-note-editor .pe-note-body { min-height: 50vh; } .pe-app.has-detail .pe-note-editor { position: static; } @media (max-width: 1100px) { .pe-app.has-detail { grid-template-columns: 220px 1fr; } .pe-detail { grid-column: 1 / -1; position: static; } } @media (max-width: 760px) { .pe-app, .pe-app.has-detail { grid-template-columns: 1fr; } .pe-side { position: static; flex-direction: row; flex-wrap: wrap; } .pe-nav { width: auto; } .pe-sep { display: none; } .pe-newlist { flex: 1 0 100%; } .pe-main { padding: 14px; min-height: auto; } } :root[data-theme="dark"] .pe-side, :root[data-theme="dark"] .pe-main, :root[data-theme="dark"] .pe-detail, :root[data-theme="dark"] .pe-item, :root[data-theme="dark"] .pe-add { background: #161c27; border-color: #2a3446; } :root[data-theme="dark"] .pe-main.pe-myday { background: linear-gradient(160deg, #2a2415, #161c27 45%); } :root[data-theme="dark"] .pe-nav:hover, :root[data-theme="dark"] .pe-nav.active, :root[data-theme="dark"] .pe-opt.on, :root[data-theme="dark"] .pe-newlist input:focus { background: #1d2a46; } :root[data-theme="dark"] .pe-item:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .35); } :root[data-theme="dark"] .pe-note { background: #2a2615; border-color: #3a3520; } :root[data-theme="dark"] .pe-opt input, :root[data-theme="dark"] .pe-opt select, :root[data-theme="dark"] .pe-notes { background: #0f141c; border-color: #2a3446; color: #e6ebf3; } :root[data-theme="dark"] .pe-late { color: #ff7b6b; } /* ---------- Calendario: estado de las tareas y tareas personales ---------- */ .cal-legend .ev-task { background: #1f9d7a; } .cal-legend .ev-task-late { background: #c94354; } .cal-legend .ev-task-done { background: #8a96a6; } .cal-legend .ev-personal { background: #7c4dff; } .calendar-card.task { border-color: #1f9d7a; background: #e6f7f1; color: #176b53; } .calendar-card.task-late { border-color: #c94354; background: #ffeaec; color: #8f2937; } .calendar-card.task-done { border-color: #b7c0cc; background: #f1f3f6; color: #6b7686; text-decoration: line-through; opacity: .85; } .calendar-card.task-done::before { content: '✓ '; text-decoration: none; display: inline-block; } .calendar-card.ev-personal { border-color: #7c4dff; background: #f0ebff; color: #4b2bb0; } .agenda-item.ev-task.task { border-color: #1f9d7a; background: #f1fbf7; } .agenda-item.ev-task.task-late { border-color: #c94354; background: #fff5f6; } .agenda-item.ev-task.task-done { border-color: #b7c0cc; background: #f5f7f9; color: #6b7686; } .agenda-item.ev-task.task-done span { text-decoration: line-through; } .agenda-item.ev-personal { border-color: #7c4dff; background: #f6f2ff; } .pe-hint { display: block; margin: -4px 0 0 4px; font-size: .78rem; } :root[data-theme="dark"] .calendar-card.task { background: #15302a; color: #9fe3cb; } :root[data-theme="dark"] .calendar-card.task-late { background: #3a1f25; color: #ffb3bc; } :root[data-theme="dark"] .calendar-card.task-done { background: #1e2531; color: #8a96a6; border-color: #3a4454; } :root[data-theme="dark"] .calendar-card.ev-personal { background: #261d45; color: #c9b8ff; } :root[data-theme="dark"] .agenda-item.ev-task.task, :root[data-theme="dark"] .agenda-item.ev-task.task-late, :root[data-theme="dark"] .agenda-item.ev-task.task-done, :root[data-theme="dark"] .agenda-item.ev-personal { background: #1a2130; } /* ---------- Clientes: resumen, filtros, vista de lista e historial ---------- */ .cl-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; } .cl-kpis > div { padding: 14px 16px; border: 1px solid #e4eaf2; border-radius: 12px; background: linear-gradient(145deg, #fff, #f8fafd); cursor: pointer; transition: box-shadow .15s, transform .15s; } .cl-kpis > div:hover { box-shadow: 0 8px 22px rgba(26, 45, 73, .08); transform: translateY(-1px); } .cl-kpis-detail > div { cursor: default; } .cl-kpis-detail > div:hover { box-shadow: none; transform: none; } .cl-kpis small { display: block; color: #73839a; font-size: 10px; font-weight: 800; letter-spacing: .06em; } .cl-kpis strong { display: block; margin: 5px 0 2px; color: #213650; font: 800 24px Manrope, sans-serif; } .cl-kpis span { display: block; color: #718097; font-size: 11px; line-height: 1.35; } .cl-kpis .cl-kpi-late strong { color: #c84453; } .cl-kpis .cl-kpi-warn strong { color: #b7791f; } .cl-filters { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin: 0 0 10px; } .cl-filters .filters { display: flex; flex-wrap: wrap; gap: 6px; } .cl-filters .filter b { margin-left: 4px; font-weight: 700; opacity: .7; } .cl-selects { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .cl-selects select { padding: 7px 10px; border: 1px solid #d9dce5; border-radius: 9px; font: inherit; font-size: 13px; background: #fff; color: #233247; max-width: 220px; } .cl-view button { padding: 6px 12px; font-size: 12px; } .cl-count { margin: 0 0 10px; font-size: 12px; } .cl-list tbody tr { cursor: pointer; } .cl-list tbody tr:hover td { background: #f7faff; } .cl-list tr.cl-inactive td { opacity: .55; } .cl-cell { display: flex; align-items: center; gap: 10px; } .cl-avatar-sm { width: 32px; height: 32px; border-radius: 9px; font-size: 12px; flex: 0 0 32px; } .cl-num { text-align: center; font-variant-numeric: tabular-nums; } .cl-warn { color: #b7791f; font-weight: 700; } .cl-closed summary { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; cursor: pointer; list-style: none; } .cl-closed summary::-webkit-details-marker { display: none; } .cl-closed summary h2 { margin: 0; font-size: 16px; } .cl-closed summary h2::before { content: '▸ '; color: #8691a3; } .cl-closed[open] summary h2::before { content: '▾ '; } .cl-closed summary p { margin: 0; font-size: 12px; } @media (max-width: 1100px) { .cl-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .cl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl-selects select { max-width: none; flex: 1 1 45%; } .cl-list .cl-num { text-align: left; } .cl-list thead { display: none; } } :root[data-theme="dark"] .cl-kpis > div { background: #1a2130; border-color: #2a3446; } :root[data-theme="dark"] .cl-kpis strong { color: #eef2f8; } :root[data-theme="dark"] .cl-selects select { background: #1a2130; border-color: #2a3446; color: #d5dcea; } :root[data-theme="dark"] .cl-list tbody tr:hover td { background: #1f2838; } :root[data-theme="dark"] .cl-kpis .cl-kpi-late strong { color: #ff8a95; } /* ---------- Inicio ---------- */ .home-hero .eyebrow { text-transform: capitalize; margin-bottom: 2px; } .home-hero p b { color: #1b2d43; font-weight: 800; } .home-hero p b.home-late { color: #c84453; } .stat[data-filter] { cursor: pointer; } .stat.stat-active { box-shadow: 0 0 0 2px #315fd4 inset; } .home-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: -14px 0 22px; } .home-shortcuts a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #e4eaf2; border-radius: 12px; background: #fff; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; } .home-shortcuts a:hover { box-shadow: 0 8px 22px rgba(26, 45, 73, .08); transform: translateY(-1px); } .home-shortcuts span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #eef3ff; font-size: 18px; flex: 0 0 38px; } .home-shortcuts strong { display: block; font-size: 13px; color: #1b2d43; } .home-shortcuts small { display: block; color: #718097; font-size: 11px; white-space: normal; } .home-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .home-side { display: grid; gap: 16px; } .home-agenda-item, .home-activity-item, .home-focus { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid #eff1f4; background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; } .home-agenda-item:last-child, .home-activity-item:last-child, .home-focus:last-child { border-bottom: 0; } .home-agenda-item > b { flex: 0 0 64px; padding: 3px 8px; border-left: 3px solid #7c8999; border-radius: 4px; background: #f3f6fc; font-size: 11px; font-weight: 800; color: #36465b; text-align: center; } .home-agenda-item.ev-impuesto > b { border-color: #c94354; background: #ffeaec; color: #8f2937; } .home-agenda-item.ev-reunion > b { border-color: #315fd4; background: #e9efff; color: #22439a; } .home-agenda-item.ev-envio > b { border-color: #1f9d7a; background: #e6f7f1; color: #176b53; } .home-agenda-item.ev-recordatorio > b { border-color: #c68d16; background: #fff6e0; color: #7a5407; } .home-agenda-item.task > b { border-color: #1f9d7a; background: #e6f7f1; color: #176b53; } .home-agenda-item.task-late > b { border-color: #c94354; background: #ffeaec; color: #8f2937; } .home-agenda-item strong, .home-activity-item strong, .home-focus strong { display: block; font-size: 13px; color: #1b2d43; } .home-agenda-item small, .home-activity-item small, .home-focus small { display: block; color: #718097; font-size: 11px; white-space: normal; } .home-activity-item span { font-size: 13px; color: #34435a; } .home-activity-item .avatar { flex: 0 0 auto; } .home-sub { margin: 10px 0 2px; color: #73839a; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .home-empty { padding: 8px 0; font-size: 13px; } @media (max-width: 1240px) { .home-grid { grid-template-columns: 1fr; } .home-side { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } } @media (max-width: 860px) { .home-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } :root[data-theme="dark"] .home-shortcuts a { background: #1a2130; border-color: #2a3446; } :root[data-theme="dark"] .home-shortcuts span { background: #1d2a46; } :root[data-theme="dark"] .home-shortcuts strong, :root[data-theme="dark"] .home-agenda-item strong, :root[data-theme="dark"] .home-activity-item strong, :root[data-theme="dark"] .home-hero p b { color: #eef2f8; } :root[data-theme="dark"] .home-agenda-item, :root[data-theme="dark"] .home-activity-item, :root[data-theme="dark"] .home-focus { border-bottom-color: #232c3b; } :root[data-theme="dark"] .home-agenda-item > b { background: #232c3b; color: #d5dcea; } :root[data-theme="dark"] .home-activity-item span { color: #c3cde0; } :root[data-theme="dark"] .home-hero p b.home-late { color: #ff8a95; } /* ---------- Dashboard: clientes y calendario fiscal ---------- */ .dash-health { display: grid; gap: 6px; padding: 12px 16px 16px; } .dash-health-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border: 1px solid #e4eaf2; border-radius: 10px; color: inherit; text-decoration: none; background: #f8fafd; } .dash-health-row strong { font: 800 20px Manrope, sans-serif; color: #213650; min-width: 36px; } .dash-health-row span { color: #60748d; font-size: 13px; } .dash-health-row.warn { border-color: #f1dfb4; background: #fff8e6; } .dash-health-row.warn strong { color: #b7791f; } :root[data-theme="dark"] .dash-health-row { background: #1f2838; border-color: #2a3446; } :root[data-theme="dark"] .dash-health-row strong { color: #eef2f8; } :root[data-theme="dark"] .dash-health-row.warn { background: #2a2615; border-color: #3a3520; } :root[data-theme="dark"] .donut-value { fill: #eef2f8; } :root[data-theme="dark"] .donut-legend li { color: #c3cde0; } /* Recordatorios fiscales (obligaciones en modo recordatorio): calendario, agenda, inicio y panel en Clientes. */ .cal-legend .ev-fiscal { background: #0e7c86; } .calendar-card.ev-fiscal { border-color: #0e7c86; background: #e3f6f8; color: #0b5c63; } .calendar-card.ev-fiscal.late { border-color: #c94354; background: #ffeaec; color: #8f2937; } .calendar-card.ev-fiscal.done { border-color: #b7c0cc; background: #f5f7f9; color: #6b7686; text-decoration: line-through; } .agenda-item.ev-fiscal { border-color: #0e7c86; background: #eefafb; } .agenda-item.ev-fiscal.done span { text-decoration: line-through; color: #6b7686; } .home-agenda-item.ev-fiscal > b { border-color: #0e7c86; background: #e3f6f8; color: #0b5c63; } .cl-rem .panel-head { align-items: flex-start; gap: 12px; flex-wrap: wrap; } .cl-rem-table td:first-child { width: 36px; } .cl-rem-check { width: 24px; height: 24px; border-radius: 7px; border: 2px solid #9aa7ba; background: #fff; color: #fff; font-weight: 800; cursor: pointer; padding: 0; line-height: 1; } .cl-rem-check:hover { border-color: #0e7c86; } .cl-rem-check.on { background: #1f9d7a; border-color: #1f9d7a; } .cl-rem-done td { color: #6b7686; } .cl-rem-late td:nth-child(2) strong { color: #c84453; } .cl-rem-empty { padding: 18px; } :root[data-theme="dark"] .calendar-card.ev-fiscal { background: #11343a; color: #9fe0e8; } :root[data-theme="dark"] .calendar-card.ev-fiscal.late { background: #3a1f25; color: #ffb3bc; } :root[data-theme="dark"] .calendar-card.ev-fiscal.done { background: #232c3b; color: #8a96a6; } :root[data-theme="dark"] .agenda-item.ev-fiscal { background: #1a2130; } :root[data-theme="dark"] .home-agenda-item.ev-fiscal > b { background: #11343a; color: #9fe0e8; } :root[data-theme="dark"] .cl-rem-check { background: #1a2130; border-color: #4b5668; } /* Importar clientes desde Excel */ .cl-imp-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; } .cl-imp-file { display: inline-flex; align-items: center; cursor: pointer; padding: 9px 16px; border-radius: 10px; font-weight: 700; color: #fff; font-size: 14px; } .cl-imp-summary { margin: 6px 0 8px; font-size: 13px; } .cl-imp-table { max-height: 46vh; overflow: auto; border: 1px solid #e5eaf1; border-radius: 10px; } .cl-imp-table table { margin: 0; } .cl-imp-bad td { background: #fff7f7; } .cl-imp-err { color: #c84453; font-size: 12px; max-width: 320px; } :root[data-theme="dark"] .cl-imp-table { border-color: #2a3444; } :root[data-theme="dark"] .cl-imp-bad td { background: #2b1d22; } /* Declaraciones a pagar */ .task-attachment { margin: 6px 0 0; padding: 8px 12px; border-radius: 10px; background: #eefafb; border: 1px solid #bfe3e7; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .cl-decl td { vertical-align: top; } :root[data-theme="dark"] .task-attachment { background: #11343a; border-color: #1f5c64; } /* Cronograma (Gantt) de declaraciones por enviar */ .cl-decl-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .gantt { display: grid; grid-template-columns: 240px 1fr; border: 1px solid #e5eaf1; border-radius: 12px; overflow: hidden; background: #fff; } .gantt-corner { grid-column: 1; grid-row: 1; padding: 10px 12px; border-bottom: 1px solid #eef1f5; font-size: 11px; color: #708096; display: flex; align-items: flex-end; } .gantt-legend i { display: inline-block; width: 12px; height: 8px; border-radius: 3px; margin: 0 4px 0 6px; vertical-align: middle; } .gantt-legend .b { background: #1f9d7a; } .gantt-legend .d { background: #c68d16; transform: rotate(45deg); width: 8px; } .gantt-legend .t { background: #c94354; width: 2px; height: 12px; } .gantt-scroll { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; position: relative; } .gantt-head { position: sticky; top: 0; z-index: 2; background: #fbfcfd; border-bottom: 1px solid #eef1f5; margin-left: 240px; } .gantt-months { display: flex; font-size: 11px; font-weight: 700; color: #708096; text-transform: capitalize; } .gantt-months span { padding: 6px 0 2px 8px; border-left: 1px solid #e5eaf1; white-space: nowrap; overflow: hidden; } .gantt-days { display: flex; } .gantt-days span { width: 30px; text-align: center; font-size: 11px; padding: 2px 0 6px; color: #4b5668; } .gantt-days span.weekend { color: #a3adbd; } .gantt-days span.today { color: #fff; } .gantt-days span.today { background: #c94354; border-radius: 6px 6px 0 0; } .gantt-row { display: flex; align-items: stretch; border-bottom: 1px solid #f1f3f8; min-height: 48px; } .gantt-row:last-child { border-bottom: 0; } .gantt-label { width: 240px; flex: 0 0 240px; padding: 8px 12px; position: sticky; left: 0; background: #fff; z-index: 1; border-right: 1px solid #eef1f5; display: flex; flex-direction: column; justify-content: center; gap: 2px; } .gantt-label strong { font-size: 13px; line-height: 1.25; } .gantt-label small { color: #708096; font-size: 11px; } .gantt-track { position: relative; display: flex; } .gantt-track i { width: 30px; flex: 0 0 30px; border-left: 1px solid #f1f3f8; } .gantt-track i.weekend { background: #fafbfd; } .gantt-track i.today { background: #fff1f3; border-left: 2px solid #c94354; } .gantt-bar { position: absolute; top: 10px; height: 28px; left: 0; border-radius: 8px; background: #1f9d7a; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; padding: 0 8px; white-space: nowrap; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.12); user-select: none; touch-action: none; } .gantt-bar.late { background: #c94354; } .gantt-bar.movable { cursor: grab; } .gantt-bar.dragging { cursor: grabbing; opacity: .85; z-index: 3; } .gantt-bar.saving { opacity: .5; } .gantt-due { position: absolute; top: 18px; width: 12px; height: 12px; margin-left: -6px; background: #c68d16; transform: rotate(45deg); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); z-index: 2; touch-action: none; } .gantt-due.movable { cursor: grab; } .gantt-due.dragging { cursor: grabbing; z-index: 4; } :root[data-theme="dark"] .gantt, :root[data-theme="dark"] .gantt-label { background: #141a26; border-color: #2a3444; } :root[data-theme="dark"] .gantt-head { background: #1a2130; border-color: #2a3444; } :root[data-theme="dark"] .gantt-row, :root[data-theme="dark"] .gantt-track i { border-color: #222b3a; } :root[data-theme="dark"] .gantt-track i.weekend { background: #171e2b; } :root[data-theme="dark"] .gantt-track i.today { background: #3a1f25; } :root[data-theme="dark"] .gantt-days span { color: #c3cde0; } :root[data-theme="dark"] .gantt-corner { border-color: #2a3444; } @media (max-width: 720px) { .gantt { grid-template-columns: 150px 1fr; } .gantt-label { width: 150px; flex-basis: 150px; } .gantt-head { margin-left: 150px; } } /* Repetir tarea cada mes */ .task-repeat { background: #f6f8fb; border: 1px dashed #cfd8e4; border-radius: 10px; padding: 10px 12px; } .task-repeat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; } .task-repeat-row input[type="number"] { padding: 4px 6px; } .task-repeat small { display: block; margin-top: 4px; } :root[data-theme="dark"] .task-repeat { background: #1a2130; border-color: #2a3444; } /* Tablero de Inicio (kanban) */ .home-view { display: flex; align-items: center; gap: 10px; margin-left: auto; } .kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; align-items: stretch; } .kb-col { background: #f4f6fa; border-radius: 14px; padding: 10px; min-height: 160px; border: 2px solid transparent; transition: border-color .15s, background .15s; display: flex; flex-direction: column; } .kb-col .kb-list { flex: 1; } .kb-col header { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; } .kb-col h3 { margin: 0; font: 700 12px/1.2 "DM Sans", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #5b6778; } .kb-count { background: #e3e8f0; color: #4b5668; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 2px 8px; } .kb-col[data-status="Vencidas"] { background: #fff3f4; } .kb-col[data-status="Vencidas"] h3 { color: #c84453; } .kb-col[data-status="Vencidas"] .kb-count { background: #ffd9dd; color: #b3303f; } .kb-state { display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 700; color: #5b6778; background: #e9edf4; border-radius: 5px; padding: 2px 6px; } :root[data-theme="dark"] .kb-col[data-status="Vencidas"] { background: #2a1d22; } :root[data-theme="dark"] .kb-state { background: #2a3446; color: #c3cde0; } .kb-col[data-status="En proceso"] h3 { color: #2a5fd0; } .kb-col[data-status="En espera"] h3 { color: #9a6a12; } .kb-col[data-status="Finalizada"] h3 { color: #1f7a3f; } .kb-col.kb-over { border-color: #315fd4; background: #e9efff; } .kb-list { display: flex; flex-direction: column; gap: 8px; min-height: 60px; } .kb-card { background: #fff; border: 1px solid #e3e8f0; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); cursor: pointer; user-select: none; } .kb-card.movable { cursor: grab; touch-action: none; } .kb-card.kb-dragging { opacity: .35; } body.kb-grabbing, body.kb-grabbing * { cursor: grabbing !important; } .kb-card { min-width: 0; } .kb-card strong, .kb-card small { min-width: 0; overflow-wrap: anywhere; } .kb-card strong { font-size: 13px; line-height: 1.3; } .kb-card .kb-meta { color: #708096; font-size: 11px; } .kb-card .kb-due { font-size: 11px; color: #4b5668; } .kb-card.late { border-left: 4px solid #c94354; } .kb-card.late .kb-due { color: #c84453; font-weight: 700; } .kb-card.done { opacity: .8; } .kb-card.done strong { text-decoration: line-through; color: #6b7686; } .kb-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 6px; } .kb-prio { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: #eef1f5; color: #5b6778; } .kb-prio.p-Alta { background: #fff1e6; color: #b15300; } .kb-prio.p-Urgente { background: #ffebed; color: #c84453; } .kb-prio.p-Baja { background: #eefaf2; color: #1f7a3f; } .kb-num { max-width: 100%; overflow: hidden; color: #9aa4b2; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .kb-empty { margin: 14px 6px; font-size: 12px; color: #9aa4b2; text-align: center; border: 1px dashed #cfd8e4; border-radius: 10px; padding: 14px 8px; } .kb-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: rotate(2deg); box-shadow: 0 12px 28px rgba(16, 24, 40, .25); opacity: .95; } @media (max-width: 620px) { .kanban { grid-template-columns: 1fr; } } :root[data-theme="dark"] .kb-col { background: #171e2b; } :root[data-theme="dark"] .kb-col.kb-over { background: #1d2a46; } :root[data-theme="dark"] .kb-card { background: #1f2735; border-color: #2a3444; } :root[data-theme="dark"] .kb-count { background: #2a3444; color: #c3cde0; } :root[data-theme="dark"] .kb-prio { background: #2a3444; color: #c3cde0; } :root[data-theme="dark"] .kb-empty { border-color: #2a3444; } /* ========================================================================== Rediseño 2026-10: tokens centralizados, menú lateral compacto, barra superior con perfil, tarjetas uniformes, KPI destacado y movimiento discreto. ========================================================================== */ :root { --card-radius: 18px; --control-radius: 10px; --card-border: #e3e9f1; --card-bg: #fff; --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(26, 45, 73, .05); --shadow-hover: 0 14px 30px rgba(26, 45, 73, .11); --focus-ring: 0 0 0 3px rgba(8, 119, 249, .18); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --motion: 200ms; --ease: cubic-bezier(.2, .7, .2, 1); --nav-w: 255px; --nav-w-compact: 76px; } :root[data-theme="dark"] { --card-border: #2a3446; --card-bg: #161c27; --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .28); --shadow-hover: 0 14px 30px rgba(0, 0, 0, .45); --focus-ring: 0 0 0 3px rgba(107, 147, 255, .35); } /* Foco visible con teclado en todos los controles */ :focus-visible { outline: 2px solid var(--nexo-blue); outline-offset: 2px; } .nav-item:focus-visible, .primary:focus-visible, .new-task:focus-visible, .kpi.clickable:focus-visible, .stat:focus-visible, .home-shortcuts a:focus-visible, .cl-card:focus-visible { outline-offset: 3px; } .search input:focus { outline: none; } /* Tarjetas: radio 18 px, borde discreto y sombra suave */ .panel, .stat, .kpi, .tpl-card, .cl-card, .ai-app, .access-summary > div, .home-shortcuts a, .ai-group, .reminder-panel { border-radius: var(--card-radius); border-color: var(--card-border); box-shadow: var(--shadow-card); } .kb-col { border-radius: 16px; padding: 12px; } .panel-head { padding: 18px 24px; } .panel-head h2 { font-size: 15.5px; } .filter-row { padding: 14px 24px; } .summary { padding: 4px 24px 16px; } .viz-body { padding: 16px 24px 20px; } .stat, .kpi, .cl-card, .tpl-card, .home-shortcuts a, .access-summary > div { transition: transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease), border-color var(--motion) var(--ease); } .stat:hover, .kpi.clickable:hover, .cl-card:hover, .home-shortcuts a:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } .stat { min-height: 116px; padding: 20px 22px; cursor: pointer; } .stat.red, .stat.orange, .stat.blue, .stat.green { border-top: 1px solid var(--card-border); } .stat .stat-top { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } .stat-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; } .stat strong { margin-top: 10px; font-size: 30px; letter-spacing: -.5px; } .stat.stat-active { border-color: var(--nexo-blue); box-shadow: var(--focus-ring); } .access-summary { gap: 16px; } .cl-grid, .tpl-grid { gap: 16px; } .home-shortcuts { gap: 14px; } /* Encabezados de pantalla: título, descripción corta y acciones alineadas */ .page-heading { align-items: center; padding-bottom: 20px; margin-bottom: 24px; } .page-heading h1 { font-size: 26px; letter-spacing: -.8px; } .page-heading p { font-size: 13.5px; } .dash-head { align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--card-border); } .dash-head h1 { font-size: 26px; } /* Botones, filtros, pestañas y campos con el mismo radio y movimiento */ .primary, .new-task, .ghost, .dialog-actions button, .dash-controls .ghost, .history-actions .ghost, .reminder-foot .ghost { border-radius: var(--control-radius); transition: background var(--motion) var(--ease), color var(--motion) var(--ease), box-shadow var(--motion) var(--ease), transform var(--motion) var(--ease), border-color var(--motion) var(--ease); } .primary { min-height: 40px; padding: 10px 16px; } .primary:active, .new-task:active { transform: translateY(1px); } .ghost { padding: 9px 14px; font-weight: 700; } .ghost:hover { background: #e6eaf0; } .filter { padding: 8px 13px; border-radius: 999px; font-weight: 600; transition: background var(--motion) var(--ease), color var(--motion) var(--ease), border-color var(--motion) var(--ease); } .filter:hover { border-color: #b9d5ff; color: var(--nexo-blue-deep); } .tabs, .dash-pills { border-radius: 12px; } .tabs button, .dash-pills button { border-radius: 9px; transition: background var(--motion) var(--ease), color var(--motion) var(--ease); } .form-grid input, .form-grid select, .form-grid textarea, .completion-note textarea, .completion-client select, .dash-controls select, .comment-box textarea { border-radius: var(--control-radius); padding: 10px 12px; border-color: #d8dfe8; transition: border-color var(--motion) var(--ease), box-shadow var(--motion) var(--ease); } .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .completion-note textarea:focus, .completion-client select:focus, .dash-controls select:focus, .comment-box textarea:focus { border-color: var(--nexo-blue); box-shadow: var(--focus-ring); outline: none; } .form-grid label { font-size: 12px; } /* Diálogos: entrada suave, fondo difuminado y acciones siempre visibles */ dialog { border-radius: 20px; } dialog[open] { animation: dialog-in var(--motion) var(--ease); } dialog::backdrop { background: rgba(16, 33, 60, .45); backdrop-filter: blur(2px); } @keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } } .dialog-heading h2 { font-size: 21px; } .dialog-actions { position: sticky; bottom: 0; z-index: 1; margin: 22px -4px 0; padding: 14px 4px 4px; border-top: 1px solid var(--card-border); background: var(--card-bg); } .dialog-actions .ghost { background: #f1f3f6; } .close { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-size: 22px; line-height: 1; transition: background var(--motion) var(--ease), color var(--motion) var(--ease); } .close:hover { background: #f1f3f6; color: var(--nexo-ink); } /* Tablas: cabecera clara y filas con hover */ .task-table th { padding: 12px 20px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .task-table td { padding: 15px 20px; transition: background var(--motion) var(--ease); } .dash-table th { text-transform: uppercase; font-weight: 800; } /* Barra superior: contraer menú, búsqueda, recordatorios y perfil */ .topbar { height: 68px; padding: 0 28px; gap: 14px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .nav-toggle { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border-radius: var(--control-radius); background: transparent; color: #647288; transition: background var(--motion) var(--ease), color var(--motion) var(--ease); } .nav-toggle:hover { background: var(--nexo-pale); color: var(--nexo-blue-deep); } .nav-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--motion) var(--ease); } :root[data-nav="collapsed"] .nav-toggle svg { transform: scaleX(-1); } .search { flex: 1; min-width: 0; max-width: 520px; height: 40px; padding: 0 12px; border: 1px solid var(--card-border); border-radius: 12px; background: #f6f8fb; transition: border-color var(--motion) var(--ease), box-shadow var(--motion) var(--ease), background var(--motion) var(--ease); } .search:focus-within { border-color: var(--nexo-blue); background: #fff; box-shadow: var(--focus-ring); } .search input { width: 100%; min-width: 0; background: transparent; color: var(--nexo-ink); } .top-actions { align-items: center; gap: 4px; margin-left: auto; } .top-actions button { width: 38px; height: 38px; border-radius: var(--control-radius); } .top-actions .top-profile { display: flex; align-items: center; gap: 10px; width: auto; height: 42px; margin-left: 6px; padding: 0 10px 0 5px; border-radius: 12px; color: inherit; font-size: inherit; } .top-profile:hover, .top-profile[aria-expanded="true"] { background: var(--nexo-pale); } .top-profile .avatar { width: 32px; height: 32px; background: linear-gradient(135deg, var(--nexo-blue), var(--nexo-blue-deep)); color: #fff; font-size: 11px; } .top-profile-text { display: grid; text-align: left; line-height: 1.15; } .top-profile-text strong { color: var(--nexo-ink); font-size: 13px; } .top-profile-text small { max-width: 160px; overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; } .profile-menu { position: absolute; top: 62px; right: 24px; z-index: 6; width: 268px; padding: 8px; border: 1px solid var(--card-border); border-radius: 16px; background: var(--card-bg); box-shadow: 0 18px 40px rgba(16, 33, 60, .18); animation: pop-in var(--motion) var(--ease); } @keyframes pop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .profile-menu-head { margin-bottom: 6px; padding: 10px 12px 12px; border-bottom: 1px solid var(--card-border); } .profile-menu-head strong, .profile-menu-head small { display: block; } .profile-menu-head strong { color: var(--nexo-ink); font: 700 14px Manrope, sans-serif; } .profile-menu-head small { margin-top: 2px; color: var(--muted); font-size: 11.5px; } .profile-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; background: transparent; color: #27364a; font: 600 13px "DM Sans", sans-serif; text-align: left; text-decoration: none; transition: background var(--motion) var(--ease), color var(--motion) var(--ease); } .profile-menu-item svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; color: #647288; } .profile-menu-item:hover { background: var(--nexo-pale); color: var(--nexo-blue-deep); } .profile-menu-item:hover svg { color: inherit; } .profile-menu-item.danger { color: #c84453; } .profile-menu-item.danger svg { color: #c84453; } .profile-menu-item.danger:hover { background: #ffebed; color: #b3303f; } /* Menú lateral */ .sidebar { padding: 20px 14px 16px; transition: width var(--motion) var(--ease), padding var(--motion) var(--ease); } .sidebar-logo, .sidebar .new-task { flex-shrink: 0; } .app-shell > main { transition: margin-left var(--motion) var(--ease), width var(--motion) var(--ease); } .nav-list { gap: 3px; margin-top: 18px; } .nav-item { position: relative; gap: 12px; padding: 10px 12px; border-radius: var(--control-radius); transition: background var(--motion) var(--ease), color var(--motion) var(--ease), box-shadow var(--motion) var(--ease); } .nav-item:hover { transform: none; } .nav-item span { width: 28px; height: 28px; border-radius: 8px; transition: background var(--motion) var(--ease), color var(--motion) var(--ease); } .nav-item.active, .nav-item.active:hover { color: #fff; background: var(--nexo-blue-deep); box-shadow: 0 6px 14px rgba(0, 92, 231, .24); } .nav-item.active span { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: none; } .nav-item.active b { background: rgba(255, 255, 255, .22); color: #fff; } .nav-text { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .new-task { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 10px 13px; border-radius: var(--control-radius); } .new-task span { margin: 0; } .footer-link { border-radius: var(--control-radius); transition: background var(--motion) var(--ease), color var(--motion) var(--ease); } .footer-link:hover { background: var(--nexo-pale); color: var(--nexo-blue-deep); } .nav-tip { position: fixed; z-index: 40; padding: 6px 10px; border-radius: 8px; background: #102130; color: #fff; font: 600 12px "DM Sans", sans-serif; white-space: nowrap; pointer-events: none; transform: translateY(-50%); box-shadow: 0 8px 20px rgba(16, 33, 60, .25); animation: tip-in 150ms var(--ease); } .nav-tip::before { content: ""; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; background: inherit; transform: translateY(-50%) rotate(45deg); border-radius: 2px; } @keyframes tip-in { from { opacity: 0; transform: translate(-4px, -50%); } to { opacity: 1; transform: translateY(-50%); } } @media (min-width: 981px) { :root[data-nav="collapsed"] .sidebar { width: var(--nav-w-compact); padding: 14px 10px 12px; } :root[data-nav="collapsed"] .app-shell > main { width: calc(100vw - var(--nav-w-compact)); margin-left: var(--nav-w-compact); } :root[data-nav="collapsed"] .nav-text, :root[data-nav="collapsed"] .user-chip > span, :root[data-nav="collapsed"] .user-chip > button { display: none; } :root[data-nav="collapsed"] .nav-label { height: 1px; margin: 8px 10px 6px; padding: 0; background: var(--card-border); color: transparent; font-size: 0; overflow: hidden; } :root[data-nav="collapsed"] .nav-label:first-child, :root[data-nav="collapsed"] .nav-label[hidden] { display: none; } :root[data-nav="collapsed"] .nav-item { justify-content: center; gap: 0; padding: 9px 0; } :root[data-nav="collapsed"] .nav-item.active { box-shadow: 0 6px 14px rgba(0, 92, 231, .24); } :root[data-nav="collapsed"] .nav-item b { position: absolute; top: 3px; right: 5px; min-width: 16px; padding: 0 4px; font-size: 9px; line-height: 16px; } :root[data-nav="collapsed"] .new-task { justify-content: center; padding: 10px 0; } :root[data-nav="collapsed"] .footer-link { justify-content: center; padding: 10px 0; } :root[data-nav="collapsed"] .user-chip { justify-content: center; margin: 10px 0 0; padding: 12px 0 0; } :root[data-nav="collapsed"] .sidebar-logo { display: block; width: 52px; height: 52px; margin: 0 auto 14px; overflow: hidden; border-bottom: 0; border-radius: 14px; } :root[data-nav="collapsed"] .sidebar-logo img { width: 88px; height: 67px; max-width: none; margin: 5px 0 0 -17px; } } @media (max-width: 980px) { .nav-toggle { display: none; } .nav-tip { display: none; } } /* KPI principal del Dashboard en el color primario */ .kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; } .kpi { padding: 20px; } .kpi-label { white-space: normal; line-height: 1.3; } .kpi:not(.hero) { flex-direction: column; gap: 14px; } .kpi:not(.hero) > div { width: 100%; } .kpi:not(.hero) strong { margin-top: 4px; } .kpi.clickable { cursor: pointer; } .kpi.hero { position: relative; grid-column: span 2; overflow: hidden; border-color: transparent; background: linear-gradient(135deg, var(--nexo-blue-deep) 0%, #1d7bff 100%); color: #fff; box-shadow: 0 12px 30px rgba(0, 92, 231, .28); } .kpi.hero::after { content: ""; position: absolute; right: -50px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .1); pointer-events: none; } .kpi.hero .kpi-icon { background: rgba(255, 255, 255, .18); color: #fff; } .kpi.hero .kpi-label { color: rgba(255, 255, 255, .8); } .kpi.hero strong { color: #fff; font-size: 40px; } .kpi.hero small { color: rgba(255, 255, 255, .82); } .kpi.hero:hover { box-shadow: 0 16px 36px rgba(0, 92, 231, .36); } .kpi-hero-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .24); color: rgba(255, 255, 255, .86); font-size: 12px; } .kpi-hero-meta b { color: #fff; font-weight: 800; } .dash-grid { gap: 20px; } @media (max-width: 1240px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpi.hero { grid-column: 1 / -1; } } @media (max-width: 760px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .kpi-grid { grid-template-columns: 1fr; } .kpi.hero strong { font-size: 34px; } .kpi:not(.hero) { flex-direction: row; } .kpi:not(.hero) > div { width: auto; } } /* Cambio de vista con una transición breve */ .content.view-in > * { animation: view-in var(--motion) var(--ease) both; } @keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Móvil: la barra lateral es un cajón y la barra superior se compacta */ @media (max-width: 980px) { .sidebar { width: min(84vw, 300px); padding: 20px 14px 16px; border-radius: 0 20px 20px 0; } .menu-button { display: grid; width: 38px; height: 38px; place-items: center; border-radius: var(--control-radius); } .topbar { padding: 0 16px; gap: 10px; } .search { max-width: none; } } @media (max-width: 620px) { .topbar { height: 62px; } .top-actions { gap: 2px; } .top-actions .top-profile { margin-left: 2px; padding: 0 3px; } .top-profile-text { display: none; } .profile-menu { top: 56px; right: 10px; width: min(268px, calc(100vw - 20px)); } .page-heading { padding-bottom: 16px; } .panel-head { padding: 16px; } .filter-row { padding: 12px 16px; } .summary { padding: 4px 16px 14px; } .viz-body { padding: 14px 16px 16px; } .dialog-actions { margin: 18px -20px 0; padding: 12px 20px 12px; } .stat { min-height: 104px; padding: 16px; } .kpi { padding: 18px; } } /* Modo oscuro para los elementos nuevos */ :root[data-theme="dark"] .nav-item.active, :root[data-theme="dark"] .nav-item.active:hover { color: #fff; background: #2f63d6; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); } :root[data-theme="dark"] .nav-item.active span { background: rgba(255, 255, 255, .18); color: #fff; } :root[data-theme="dark"] .nav-item.active b { background: rgba(255, 255, 255, .22); color: #fff; } :root[data-theme="dark"] .nav-item:hover, :root[data-theme="dark"] .footer-link:hover, :root[data-theme="dark"] .nav-toggle:hover, :root[data-theme="dark"] .top-profile:hover, :root[data-theme="dark"] .top-profile[aria-expanded="true"], :root[data-theme="dark"] .profile-menu-item:hover { background: #1d2a46; color: #9db5ff; } :root[data-theme="dark"] .topbar { background: rgba(18, 24, 35, .92); } :root[data-theme="dark"] .nav-toggle, :root[data-theme="dark"] .profile-menu-item, :root[data-theme="dark"] .profile-menu-item svg { color: #c3cde0; } :root[data-theme="dark"] .profile-menu-item.danger, :root[data-theme="dark"] .profile-menu-item.danger svg { color: #ff8a96; } :root[data-theme="dark"] .profile-menu-item.danger:hover { background: #3a1f25; } :root[data-theme="dark"] .search { background: #0f141c; border-color: #2a3446; } :root[data-theme="dark"] .search:focus-within { background: #0f141c; border-color: #6b93ff; } :root[data-theme="dark"] .top-profile-text strong, :root[data-theme="dark"] .profile-menu-head strong { color: #eef2f8; } :root[data-theme="dark"] .nav-tip { background: #e6ebf3; color: #102130; } :root[data-theme="dark"] .kpi.hero { border-color: transparent; background: linear-gradient(135deg, #2457c9 0%, #3b82f6 100%); color: #fff; } :root[data-theme="dark"] .kpi.hero strong, :root[data-theme="dark"] .kpi.hero .kpi-icon { color: #fff; } :root[data-theme="dark"] .kpi.hero .kpi-label, :root[data-theme="dark"] .kpi.hero small { color: rgba(255, 255, 255, .82); } :root[data-theme="dark"] .kpi.hero .kpi-icon { background: rgba(255, 255, 255, .18); } :root[data-theme="dark"] .stat.red, :root[data-theme="dark"] .stat.orange, :root[data-theme="dark"] .stat.blue, :root[data-theme="dark"] .stat.green { border-top-color: #2a3446; } :root[data-theme="dark"] .dialog-actions { border-top-color: #2a3446; background: #161c27; } :root[data-theme="dark"] .dialog-actions .ghost, :root[data-theme="dark"] .close:hover { background: #232c3b; color: #d5dcea; } :root[data-theme="dark"] .ghost:hover { background: #2a3446; } :root[data-theme="dark"] .filter:hover { border-color: #3a4d7a; color: #9db5ff; } :root[data-theme="dark"] .dash-head { border-bottom-color: #232c3b; } :root[data-theme="dark"] .sidebar-logo { background: transparent; } /* Respeta la preferencia de menos movimiento */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ---- Iconos de línea (un solo set, trazo 2) ---- */ .ico { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .nav-item span svg, .menu-button svg, .footer-link svg, .search svg, .top-actions svg, .nav-toggle svg, .profile-menu-item svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .nav-item span svg { width: 16px; height: 16px; } .menu-button svg { width: 22px; height: 22px; } .stat-icon .ico, .kpi-icon .ico { width: 18px; height: 18px; } .kpi.hero .kpi-icon .ico { width: 20px; height: 20px; } .home-shortcuts span .ico { width: 20px; height: 20px; color: var(--nexo-blue-deep); } .home-agenda-item > b .ico { width: 15px; height: 15px; vertical-align: -3px; } .ai-hero-icon .ico { width: 22px; height: 22px; } .ai-group h4 span .ico { width: 14px; height: 14px; color: var(--nexo-blue-deep); } .pe-nav span, .pe-opt span { display: inline-grid; place-items: center; } .pe-nav span .ico, .pe-opt span .ico { width: 17px; height: 17px; color: #647288; } .pe-nav.active span .ico { color: inherit; } .pe-star .ico { width: 18px; height: 18px; } .pe-star.on .ico { fill: currentColor; } .pe-check .ico, .board-check .ico { width: 12px; height: 12px; stroke-width: 3; } .pe-donetoggle .ico { width: 14px; height: 14px; } .board-alerts-head h2 .ico, .board-checklist header strong .ico { color: var(--nexo-blue-deep); } .cl-badge .ico { vertical-align: -2px; } :root[data-theme="dark"] .pe-nav span .ico, :root[data-theme="dark"] .pe-opt span .ico { color: #a9b5c8; } /* ---- Tooltip de gráficas ---- */ .viz-tip { position: fixed; z-index: 40; max-width: 260px; padding: 7px 10px; border-radius: 8px; background: #102130; color: #fff; font: 600 12px/1.4 "DM Sans", sans-serif; white-space: pre-line; pointer-events: none; box-shadow: 0 8px 20px rgba(16, 33, 60, .25); animation: tip-in 150ms var(--ease); } :root[data-theme="dark"] .viz-tip { background: #e6ebf3; color: #102130; } .viz-body svg rect[data-tip], .viz-body svg circle[data-tip], .ai-chart svg rect[data-tip], .ai-chart svg circle[data-tip] { transition: opacity var(--motion) var(--ease); } .viz-body svg:hover rect[data-tip]:not(:hover), .ai-chart svg:hover rect[data-tip]:not(:hover) { opacity: .75; } .viz-row:focus-visible { outline: none; } .viz-row:focus-visible > rect:first-child { fill: rgba(8, 119, 249, .08); } /* ---- Estado de carga ---- */ .loading-state { display: grid; place-items: center; gap: 12px; padding: 64px 20px; color: var(--muted); text-align: center; } .loading-state p { margin: 0; font-size: 13px; } .spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--card-border); border-top-color: var(--nexo-blue); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .content[aria-busy="true"] .loading-state { min-height: 50vh; } @media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-top-color: var(--card-border); border-color: var(--nexo-blue); border-right-color: var(--card-border); } } /* ---- Tablas en móvil: cada fila se vuelve una tarjeta ---- */ @media (max-width: 620px) { .panel .table-wrap { overflow-x: visible; } .task-table { min-width: 0; } .task-table thead { display: none; } .task-table, .task-table tbody, .task-table tr, .task-table td { display: block; } .task-table tr { padding: 14px 16px; border-bottom: 1px solid var(--card-border); } .task-table tr:last-child { border-bottom: 0; } .task-table td, .task-table td:first-child, .task-table td:last-child, .task-table th:nth-child(3), .task-table td:nth-child(3), .task-table th:nth-child(6), .task-table td:nth-child(6) { display: block; min-width: 0; padding: 4px 0; border: 0; white-space: normal; } .task-table td:first-child { padding-bottom: 8px; } .task-table td:last-child { padding-top: 10px; } .task-table tr:hover td { background: transparent; } .task-table td:empty { display: none; } .task-table .deadline { display: flex; gap: 8px; align-items: baseline; } .task-table .deadline strong { margin: 0; } .task-table .assignee { align-items: center; } .task-table .empty { padding: 40px 10px; } } /* Plataforma (CaSa Labs) */ .access-summary.plat-summary { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .access-summary.plat-summary { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .access-summary.plat-summary { grid-template-columns: 1fr; } } /* Mi empresa */ .panel .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .panel .form-grid .full { grid-column: 1 / -1; } @media (max-width: 620px) { .panel .form-grid { grid-template-columns: 1fr; } }