/* ── BIMiLY QuoteBuilder — Premium UI ───────────────────────────────────── */ /* ── LIGHT THEME (default) ───────────────────────────────────────────────── */ :root, [data-theme="light"] { --teal: #1A8A7A; --teal-d: #0D5C52; --teal-lt: #E0F2EF; --teal-mid: #6FAEAA; --orange: #F26522; --orange-d: #D4541A; --orange-lt: #FEF0E9; --gold: #C9A84C; --gold-lt: #FDF6E3; --dark: #0C1918; --ink: #1A2E2C; --grey: #6B7B79; --grey-lt: #EAF0EF; --bg: #F4F7F6; --white: #FFFFFF; --border: #DDE6E4; --red: #DC2626; --red-lt: #FEE2E2; --green: #16A34A; --green-lt: #DCFCE7; --sidebar-bg:#0C1918; --sidebar-w: 220px; --radius: 10px; --shadow: 0 2px 12px rgba(0,0,0,0.08); --shadow-md: 0 4px 24px rgba(0,0,0,0.12); --card-bg: #FFFFFF; --input-bg: #FFFFFF; --table-head:#F0F5F4; --modal-bg: #FFFFFF; } /* ── DARK THEME ───────────────────────────────────────────────────────────── */ [data-theme="dark"] { --teal: #2AADA0; --teal-d: #1A8A7A; --teal-lt: rgba(26,138,122,0.18); --teal-mid: #6FAEAA; --orange: #F26522; --orange-d: #D4541A; --orange-lt: rgba(242,101,34,0.15); --gold: #D4AA5C; --gold-lt: rgba(201,168,76,0.15); --dark: #0C1918; --ink: #D8EDEB; --grey: #7AAAA6; --grey-lt: rgba(111,174,170,0.12); --bg: #0A1614; --white: #132220; --border: rgba(111,174,170,0.18); --red: #F87171; --red-lt: rgba(248,113,113,0.15); --green: #4ADE80; --green-lt: rgba(74,222,128,0.15); --sidebar-bg:#071110; --sidebar-w: 220px; --radius: 10px; --shadow: 0 2px 16px rgba(0,0,0,0.35); --shadow-md: 0 6px 32px rgba(0,0,0,0.45); --card-bg: #132220; --input-bg: #0F1D1C; --table-head:#0F1D1C; --modal-bg: #132220; } /* Theme transition */ body, .sidebar, .card, .modal-card, .data-table, input, select, textarea { transition: background-color .25s, border-color .25s, color .2s; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, 'Segoe UI', Arial, sans-serif; background: var(--bg); color: var(--ink); display: flex; height: 100vh; overflow: hidden; font-size: 14px; } /* ── SIDEBAR ─────────────────────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); background: var(--sidebar-bg); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; } .sidebar-logo { padding: 20px 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 12px; } .logo-img { width: 68px; height: 68px; object-fit: contain; flex-shrink: 0; } .logo-text { display: flex; flex-direction: column; gap: 2px; } .logo-name { font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 800; color: #ffffff; letter-spacing: .4px; line-height: 1; } .logo-sub { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 600; color: var(--teal-mid); letter-spacing: 2px; text-transform: uppercase; line-height: 1; } /* Dark mode — el sidebar siempre es oscuro, pero reforzamos por si acaso */ [data-theme="dark"] .logo-name { color: #ffffff; } [data-theme="dark"] .logo-sub { color: #5ECFB8; } [data-theme="light"] .logo-name { color: #ffffff; } [data-theme="light"] .logo-sub { color: #7DD8CB; } .sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; } .sidebar-bottom{ padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.08); } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 18px; color: var(--teal-mid); text-decoration: none; font-size: 13px; font-weight: 500; border-radius: 0; transition: all .15s; border-left: 3px solid transparent; cursor: pointer; } .nav-item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; } .nav-item:hover { color: var(--white); background: rgba(255,255,255,0.06); } .nav-item.active { color: var(--white); border-left-color: var(--teal); background: rgba(26,138,122,0.15); } /* ── MAIN ────────────────────────────────────────────────────────────────── */ .main { flex: 1; overflow-y: auto; padding: 32px 36px; } .view { display: none; animation: fadeIn .2s; } .view.active { display: block; } @keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } .view-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; } .view-title { font-size: 24px; font-weight: 700; color: var(--ink); } .view-sub { font-size: 13px; color: var(--grey); margin-top: 3px; } .section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--grey); margin: 28px 0 12px; } /* ── CARDS ───────────────────────────────────────────────────────────────── */ .card { background: var(--white); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); margin-bottom: 18px; } .card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .card-header h3 { font-size: 14px; font-weight: 700; color: var(--ink); } .card-num { background: var(--teal); color: var(--white); font-size: 10px; font-weight: 800; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ── STATS ───────────────────────────────────────────────────────────────── */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 8px; } .stat-card { background: var(--white); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); border-top: 3px solid var(--teal); } .stat-card.gold { border-top-color: var(--gold); } .stat-card.green { border-top-color: var(--green); } .stat-card.red { border-top-color: var(--red); } .stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--grey); margin-bottom: 6px; } .stat-value { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; } .stat-sub { font-size: 11px; color: var(--grey); margin-top: 4px; } /* ── TABLES ──────────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); } .data-table { width: 100%; border-collapse: collapse; } .data-table th { padding: 11px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--grey); border-bottom: 2px solid var(--grey-lt); text-align: left; background: var(--white); } .data-table td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid #f0f4f3; vertical-align: middle; } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: #F8FBFA; } /* ── STATUS BADGES ───────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; } .badge-draft { background: #F1F5F9; color: #64748B; } .badge-sent { background: #EFF6FF; color: #1D4ED8; } .badge-accepted { background: var(--green-lt); color: var(--green); } .badge-rejected { background: var(--red-lt); color: var(--red); } .badge-a { background: var(--teal-lt); color: var(--teal-d); } .badge-b { background: var(--gold-lt); color: #92650A; } /* ── BUTTONS ─────────────────────────────────────────────────────────────── */ .btn-primary { background: var(--teal); color: var(--white); border: none; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background .15s; } .btn-primary svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; } .btn-primary:hover { background: var(--teal-d); } .btn-secondary { background: var(--grey-lt); color: var(--ink); border: none; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; } .btn-secondary:hover { background: #D5E5E2; } .btn-ghost { background: none; border: 1px solid var(--teal-lt); color: var(--teal); border-radius: 6px; padding: 5px 10px; font-size: 12px; cursor: pointer; transition: all .15s; } .btn-ghost:hover { background: var(--teal-lt); } .btn-danger { background: var(--red-lt); color: var(--red); border: none; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; } .btn-group { display: flex; gap: 8px; } .btn-icon { background: none; border: none; cursor: pointer; padding: 6px; border-radius: 6px; color: var(--grey); transition: all .15s; } .btn-icon:hover { background: var(--grey-lt); color: var(--teal); } .btn-icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; } .ml-auto { margin-left: auto; } /* ── FORM ────────────────────────────────────────────────────────────────── */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .form-col { display: flex; flex-direction: column; gap: 0; } .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; } .field:last-child { margin-bottom: 0; } .field label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--grey); } .field input, .field select, .field textarea { border: 1.5px solid #DDE8E6; border-radius: 7px; padding: 8px 11px; font-size: 13px; color: var(--ink); background: var(--white); transition: border-color .15s; outline: none; font-family: inherit; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); } .field textarea { resize: vertical; line-height: 1.5; } .field-row { display: flex; gap: 12px; } .field-row.two > .field { flex: 1; } .client-select-wrap { display: flex; gap: 8px; } .client-select-wrap select { flex: 1; } /* ── SERVICES LIST ───────────────────────────────────────────────────────── */ .service-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--grey-lt); } .service-row:last-child { border-bottom: none; } .service-toggle { margin-top: 4px; width: 16px; height: 16px; cursor: pointer; accent-color: var(--teal); flex-shrink: 0; } .service-main { flex: 1; min-width: 0; } .service-name { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .service-cat { font-size: 10px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .5px; } .service-desc { font-size: 11px; color: var(--grey); margin-top: 3px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .service-metrics { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .metric-field { display: flex; flex-direction: column; align-items: center; gap: 2px; } .metric-field label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--grey); } .metric-field input { width: 64px; text-align: center; border: 1.5px solid #DDE8E6; border-radius: 6px; padding: 5px 6px; font-size: 12px; font-weight: 600; color: var(--ink); outline: none; background: var(--bg); transition: border-color .15s; } .metric-field input:focus { border-color: var(--teal); background: var(--white); } .service-amount { font-size: 13px; font-weight: 700; color: var(--teal); min-width: 80px; text-align: right; } .service-remove { color: var(--grey); cursor: pointer; font-size: 16px; padding: 2px 4px; line-height: 1; border-radius: 4px; transition: color .15s; } .service-remove:hover { color: var(--red); } .service-row.disabled .service-name, .service-row.disabled .service-amount { color: var(--grey); } /* ── TOTALS ──────────────────────────────────────────────────────────────── */ .totals-panel { margin-top: 16px; padding: 16px; background: var(--bg); border-radius: 8px; display: flex; flex-direction: column; gap: 8px; } .totals-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; } .discount-row { gap: 8px; } .discount-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); } .discount-row input { width: 50px; padding: 4px 7px; border: 1.5px solid #DDE8E6; border-radius: 5px; font-size: 13px; text-align: center; outline: none; } .discount-row input:focus { border-color: var(--teal); } .discount-val { color: var(--red); font-weight: 600; } .total-row { font-size: 16px; font-weight: 800; color: var(--ink); padding-top: 8px; border-top: 2px solid var(--teal); } /* ── TERMS ───────────────────────────────────────────────────────────────── */ .term-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; } .term-row:last-child { margin-bottom: 0; } .term-label { font-size: 11px; font-weight: 700; color: var(--teal); width: 90px; flex-shrink: 0; padding-top: 9px; } .term-value { flex: 1; border: 1.5px solid #DDE8E6; border-radius: 7px; padding: 7px 10px; font-size: 12px; color: var(--ink); resize: none; outline: none; font-family: inherit; line-height: 1.4; transition: border-color .15s; } .term-value:focus { border-color: var(--teal); } /* ── DESIGN PICKER ───────────────────────────────────────────────────────── */ .design-picker { display: flex; gap: 16px; } .design-option { cursor: pointer; display: flex; flex-direction: column; gap: 8px; align-items: center; } .design-option input[type=radio] { display: none; } .design-preview { width: 120px; height: 80px; border-radius: 8px; overflow: hidden; border: 2.5px solid #DDE8E6; display: flex; transition: border-color .15s; box-shadow: var(--shadow); } .design-option:has(input:checked) .design-preview { border-color: var(--teal); } .design-option span { font-size: 11px; font-weight: 600; color: var(--grey); } .design-a .dp-sidebar { width: 30px; background: var(--dark); flex-shrink: 0; } .design-a .dp-content, .design-b .dp-content { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 5px; justify-content: center; background: var(--white); } .design-b { flex-direction: column; } .design-b .dp-header { height: 24px; background: var(--teal); } .dp-line { height: 5px; background: var(--grey-lt); border-radius: 3px; } .dp-line.long { width: 90%; } .dp-line.med { width: 70%; } .dp-line.short{ width: 50%; } /* ── FILTER BAR ──────────────────────────────────────────────────────────── */ .filter-bar { display: flex; gap: 10px; margin-bottom: 16px; } .search-input { flex: 1; border: 1.5px solid #DDE8E6; border-radius: 8px; padding: 9px 14px; font-size: 13px; outline: none; background: var(--white); transition: border-color .15s; } .search-input:focus { border-color: var(--teal); } .filter-bar select { border: 1.5px solid #DDE8E6; border-radius: 8px; padding: 9px 14px; font-size: 13px; outline: none; background: var(--white); cursor: pointer; } /* ── CLIENTS GRID ────────────────────────────────────────────────────────── */ .clients-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .client-card { background: var(--white); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); border-top: 3px solid var(--teal); display: flex; flex-direction: column; gap: 4px; } .client-card-company { font-size: 14px; font-weight: 700; color: var(--ink); } .client-card-contact { font-size: 12px; color: var(--grey); } .client-card-email { font-size: 11px; color: var(--teal); margin-top: 4px; } .client-card-actions { display: flex; gap: 6px; margin-top: 10px; } /* ── MODALS ──────────────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(2px); } .modal-overlay.open { display: flex; } /* ── Generic modal box (used by new-prospect, followup, etc.) ───────────── */ .modal-box { background: var(--white); border-radius: 14px; width: 100%; max-height: 90vh; box-shadow: var(--shadow-md); display: flex; flex-direction: column; overflow: hidden; } .modal-card { background: var(--white); border-radius: 14px; width: 100%; max-height: 90vh; box-shadow: var(--shadow-md); display: flex; flex-direction: column; overflow: hidden; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px 0; flex-shrink: 0; } .modal-title { font-size: 17px; font-weight: 800; color: var(--ink); } .modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--grey); padding: 4px 8px; border-radius: 6px; line-height: 1; transition: background .12s; } .modal-close:hover { background: var(--grey-lt); } .modal-body { overflow-y: auto; } .modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px 20px; border-top: 1px solid var(--grey-lt); flex-shrink: 0; } /* ── Form primitives ────────────────────────────────────────────────────── */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-group { display: flex; flex-direction: column; gap: 5px; } .form-label { font-size: 11px; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: .04em; } .form-control { border: 1.5px solid var(--grey-lt); border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--ink); font-family: inherit; outline: none; width: 100%; background: var(--white); transition: border-color .15s; } .form-control:focus { border-color: var(--teal); } .form-control::placeholder { color: var(--grey); opacity: .7; } select.form-control { cursor: pointer; } textarea.form-control { resize: vertical; min-height: 72px; } /* Legacy modal (existing quote/client forms) */ .modal { background: var(--white); border-radius: 14px; padding: 28px; width: 520px; max-width: 95vw; box-shadow: var(--shadow-md); max-height: 90vh; overflow-y: auto; } .modal .field { margin-bottom: 14px; } .modal .field-row { margin-bottom: 0; } .modal .field-row .field { margin-bottom: 14px; } .modal-header h2 { font-size: 18px; font-weight: 700; } /* ── QUOTE ACTIONS MODAL ────────────────────────────────────────────────── */ .action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; } .action-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px; border: 1.5px solid #DDE8E6; border-radius: 10px; background: var(--white); cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ink); transition: all .15s; } .action-btn svg { width: 22px; height: 22px; stroke: var(--teal); fill: none; stroke-width: 1.8; } .action-btn:hover { border-color: var(--teal); background: var(--teal-lt); } .status-changer { display: flex; align-items: center; gap: 10px; padding: 14px; background: var(--bg); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink); } .status-changer select { flex: 1; border: 1.5px solid #DDE8E6; border-radius: 7px; padding: 7px 10px; font-size: 13px; outline: none; } /* ── Source selector (new prospect modal) ────────────────────────────────── */ .source-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .source-btn { padding: 7px 14px; border: 1.5px solid var(--grey-lt); border-radius: 20px; background: var(--white); font-size: 12px; font-weight: 600; color: var(--grey); cursor: pointer; transition: all .12s; white-space: nowrap; } .source-btn:hover { border-color: var(--teal-mid); color: var(--teal-d); } .source-btn.active { border-color: var(--teal); background: var(--teal-lt); color: var(--teal-d); } /* Source info in panel */ .panel-source-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .panel-source-badge { font-size: 12px; font-weight: 700; color: var(--teal-d); background: var(--teal-lt); border-radius: 20px; padding: 2px 10px; } .panel-source-link { font-size: 12px; color: var(--teal); text-decoration: none; font-weight: 600; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--teal-mid); transition: background .12s; } .panel-source-link:hover { background: var(--teal-lt); } /* ── TOAST ───────────────────────────────────────────────────────────────── */ .toast { position: fixed; bottom: 24px; right: 24px; background: var(--dark); color: var(--white); padding: 12px 20px; border-radius: 10px; font-size: 13px; font-weight: 500; box-shadow: var(--shadow-md); transform: translateY(80px); opacity: 0; transition: all .3s; z-index: 2000; border-left: 4px solid var(--teal); max-width: 320px; } .toast.show { transform: none; opacity: 1; } .toast.error { border-left-color: var(--red); } .toast.success { border-left-color: var(--green); } /* ── EMPTY STATE ─────────────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 48px 20px; color: var(--grey); } .empty-state svg { width: 48px; height: 48px; stroke: #DDE8E6; fill: none; stroke-width: 1.5; margin-bottom: 12px; } .empty-state p { font-size: 14px; } /* ── USER BADGE (sidebar) ────────────────────────────────────────────────── */ .user-badge { margin: 8px 12px 4px; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .user-badge-info { display: flex; align-items: center; gap: 9px; min-width: 0; } .user-badge-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .user-badge-name { font-size: 12px; font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; } .user-badge-role { font-size: 10px; color: var(--teal-mid); text-transform: uppercase; letter-spacing: .5px; } .user-badge-logout { background: none; border: none; cursor: pointer; padding: 4px; color: var(--grey); flex-shrink: 0; display: flex; align-items: center; transition: color .15s; } .user-badge-logout:hover { color: var(--red); } .user-badge-logout svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; } /* ── LOGIN SCREEN ────────────────────────────────────────────────────────── */ .login-screen { position: fixed; inset: 0; background: rgba(10,22,21,.96); display: flex; align-items: center; justify-content: center; z-index: 9000; opacity: 0; pointer-events: none; transition: opacity .25s; backdrop-filter: blur(4px); } .login-screen.visible { opacity: 1; pointer-events: all; } .login-card { background: #0F2320; border: 1px solid rgba(26,138,122,.35); border-radius: 16px; padding: 40px 36px; width: 360px; box-shadow: 0 24px 60px rgba(0,0,0,.6); } .login-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; } .login-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 22px; } .login-card .field label { color: #94a3b8; font-size: 12px; } .login-card .field input { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: #fff; } .login-card .field input::placeholder { color: rgba(255,255,255,.25); } .login-card .field input:focus { border-color: var(--teal); } .login-error { background: rgba(220,38,38,.15); border: 1px solid var(--red); border-radius: 8px; padding: 10px 14px; color: #fca5a5; font-size: 13px; margin-bottom: 16px; } /* ── CLIENT OWNER BADGE ──────────────────────────────────────────────────── */ .client-card-owner { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--teal); margin: 4px 0 2px; font-weight: 500; } .client-card-owner svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; } /* ── DUPLICATE WARNING ───────────────────────────────────────────────────── */ .duplicate-warning { background: #FFF8E7; border: 1px solid #F0C040; border-left: 4px solid #F0A000; border-radius: 8px; padding: 10px 14px; font-size: 12px; color: #7A5800; } .duplicate-warning strong { color: #5A3E00; } /* ── EXPIRING ALERTS ─────────────────────────────────────────────────────── */ .expiring-section { margin-bottom: 28px; } .expiring-section h3 { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .expiring-section h3 svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; } .expiring-row { display: flex; align-items: center; justify-content: space-between; background: var(--white); border-radius: 8px; padding: 10px 14px; margin-bottom: 6px; border-left: 4px solid transparent; box-shadow: var(--shadow); gap: 12px; cursor: pointer; transition: box-shadow .15s; } .expiring-row:hover { box-shadow: var(--shadow-md); } .expiring-urgent { border-left-color: var(--red); } .expiring-warn { border-left-color: var(--gold); } .expiring-ok { border-left-color: var(--teal); } .expiring-meta { flex: 1; min-width: 0; } .expiring-meta strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .expiring-meta span { font-size: 11px; color: var(--grey); } .expiring-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; } .expiring-amount { font-size: 13px; font-weight: 700; color: var(--teal); } .expiring-days { font-size: 11px; font-weight: 600; } .expiring-urgent .expiring-days { color: var(--red); } .expiring-warn .expiring-days { color: var(--gold); } .expiring-ok .expiring-days { color: var(--teal); } /* ── ACTIVITY LOG ────────────────────────────────────────────────────────── */ .activity-panel { margin-top: 12px; border-top: 1px solid var(--grey-lt); padding-top: 12px; } .activity-row { display: flex; gap: 10px; margin-bottom: 10px; position: relative; } .activity-row:not(:last-child)::before { content: ''; position: absolute; left: 8px; top: 18px; bottom: -10px; width: 1px; background: var(--grey-lt); } .activity-dot { width: 17px; height: 17px; border-radius: 50%; background: var(--teal-lt); border: 2px solid var(--teal); flex-shrink: 0; margin-top: 1px; } .activity-body { flex: 1; min-width: 0; } .activity-action { font-size: 12px; font-weight: 600; color: var(--ink); } .activity-meta { font-size: 11px; color: var(--grey); margin-top: 1px; } .activity-detail { font-size: 11px; color: var(--teal-d); margin-top: 2px; font-style: italic; } /* ── CLIENT NOTES ────────────────────────────────────────────────────────── */ .notes-list { max-height: 300px; overflow-y: auto; margin-bottom: 12px; } .note-row { background: var(--bg); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; position: relative; } .note-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .note-author { font-size: 11px; font-weight: 700; color: var(--teal-d); } .note-date { font-size: 10px; color: var(--grey); } .note-delete { background: none; border: none; cursor: pointer; color: var(--grey); padding: 0 2px; line-height: 1; transition: color .15s; } .note-delete:hover { color: var(--red); } .note-delete svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; display: block; } .note-text { font-size: 12px; color: var(--ink); line-height: 1.5; } .notes-add { display: flex; gap: 8px; align-items: flex-end; } .notes-add textarea { flex: 1; resize: none; border: 1px solid #D1D9D8; border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; color: var(--ink); background: var(--white); outline: none; transition: border-color .15s; } .notes-add textarea:focus { border-color: var(--teal); } /* ── TIME TRACKER ────────────────────────────────────────────────────────── */ .tracker-hero { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 28px; max-width: 680px; margin: 0 auto 24px; } .tracker-display { text-align: center; margin-bottom: 24px; } .tracker-time { font-size: 64px; font-weight: 800; color: var(--teal); letter-spacing: -2px; font-variant-numeric: tabular-nums; line-height: 1; } .tracker-project-label { font-size: 14px; color: var(--grey); margin-top: 6px; } .tracker-controls { display: flex; flex-direction: column; gap: 0; } .btn-tracker-start { background: var(--teal); color: #fff; border: none; border-radius: 12px; padding: 14px 32px; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; justify-content: center; transition: background .15s; } .btn-tracker-start:hover { background: var(--teal-d); } .btn-tracker-start svg { width: 18px; height: 18px; stroke: none; fill: currentColor; } .btn-tracker-stop { background: var(--red); color: #fff; border: none; border-radius: 12px; padding: 14px 32px; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; justify-content: center; transition: background .15s; } .btn-tracker-stop:hover { background: #b91c1c; } .btn-tracker-stop svg { width: 18px; height: 18px; stroke: none; fill: currentColor; } .tracker-or { text-align: center; color: var(--grey); font-size: 12px; margin: 20px 0 14px; position: relative; } .tracker-or::before, .tracker-or::after { content: ''; position: absolute; top: 50%; width: 38%; height: 1px; background: var(--grey-lt); } .tracker-or::before { left: 0; } .tracker-or::after { right: 0; } .tracker-manual { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; } .tracker-manual input, .tracker-manual select { border: 1px solid #D1D9D8; border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--ink); outline: none; background: var(--bg); min-width: 0; } .tracker-manual input:focus, .tracker-manual select:focus { border-color: var(--teal); background: #fff; } .tracker-manual input[type="number"] { width: 80px; } .tracker-manual input[placeholder="Descripción"] { flex: 1; min-width: 120px; } .tracker-week-stats { display: flex; gap: 12px; margin-top: 16px; } /* ── CHARTS ──────────────────────────────────────────────────────────────── */ .charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; } .chart-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; } .chart-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 12px; } /* Fixed-height wrapper — Chart.js fills this container; no infinite-growth loop */ .chart-wrap { position: relative; height: 190px; width: 100%; } .chart-wrap-sm { position: relative; height: 110px; width: 100%; } .chart-wrap canvas, .chart-wrap-sm canvas { position: absolute; top: 0; left: 0; } /* ── INVOICE TABLE STATUS BADGES ─────────────────────────────────────────── */ .badge-draft { background: var(--grey-lt); color: var(--grey); } .badge-sent { background: var(--teal-lt); color: var(--teal-d); } .badge-accepted { background: var(--green-lt); color: var(--green); } .badge-rejected { background: var(--red-lt); color: var(--red); } /* ── MODAL WIDE ──────────────────────────────────────────────────────────── */ .modal-wide { max-width: 760px !important; } /* ── INVOICE ITEMS TABLE ─────────────────────────────────────────────────── */ #invoice-items-table input { border: 1px solid #D1D9D8; border-radius: 6px; padding: 5px 8px; font-size: 12px; color: var(--ink); width: 100%; outline: none; background: var(--bg); } #invoice-items-table input:focus { border-color: var(--teal); background: #fff; } /* ── MI PERFIL ───────────────────────────────────────────────────────────── */ .profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 4px; } .profile-section { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; } .profile-section-full { grid-column: 1 / -1; } .profile-section-title { font-size: 13px; font-weight: 700; color: var(--teal-d); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--grey-lt); } .profile-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .profile-field { display: flex; flex-direction: column; gap: 4px; } .profile-field-full { grid-column: 1 / -1; } .profile-field label { font-size: 11px; font-weight: 600; color: var(--grey); text-transform: uppercase; letter-spacing: .04em; } .profile-field input, .profile-section textarea { border: 1px solid #D1D9D8; border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--ink); outline: none; background: var(--bg); font-family: inherit; width: 100%; box-sizing: border-box; } .profile-field input:focus, .profile-section textarea:focus { border-color: var(--teal); background: #fff; } .profile-section textarea { resize: vertical; } /* ── CV FORM SECTIONS ────────────────────────────────────────────────────── */ .cv-section-title { display: flex; align-items: center; gap: 8px; } .cv-badge { font-size: 9px; font-weight: 700; letter-spacing: .06em; background: var(--teal); color: #fff; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; margin-top: 1px; } .cv-add-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px dashed var(--teal); color: var(--teal); border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer; margin-top: 8px; transition: background .15s; } .cv-add-btn:hover { background: rgba(26,138,122,.06); } .cv-add-btn svg { flex-shrink: 0; stroke: var(--teal); stroke-width: 2; fill: none; } /* CV entry card */ .cv-entry { background: var(--bg); border: 1px solid var(--grey-lt); border-radius: 10px; padding: 14px 16px; margin-bottom: 8px; } .cv-entry-inline { display: flex; align-items: center; gap: 8px; padding: 8px 12px; } .cv-entry-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .cv-entry-num { font-size: 11px; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: .04em; } .cv-remove-btn { background: transparent; border: none; color: var(--grey); font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 4px; line-height: 1; } .cv-remove-btn:hover { background: #fee2e2; color: #b91c1c; } .cv-entry-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .cv-ef { display: flex; flex-direction: column; gap: 4px; } .cv-ef-full { grid-column: 1 / -1; } .cv-ef label { font-size: 11px; font-weight: 600; color: var(--grey); text-transform: uppercase; letter-spacing: .04em; } .cv-ef input, .cv-ef textarea { border: 1px solid #D1D9D8; border-radius: 7px; padding: 7px 10px; font-size: 13px; color: var(--ink); background: #fff; font-family: inherit; width: 100%; box-sizing: border-box; outline: none; } .cv-ef input:focus, .cv-ef textarea:focus { border-color: var(--teal); } .cv-ef textarea { resize: vertical; min-height: 68px; } [data-theme="dark"] .cv-entry { background: var(--card-bg); border-color: var(--border); } [data-theme="dark"] .cv-ef input, [data-theme="dark"] .cv-ef textarea { background: var(--bg); border-color: var(--border); color: var(--ink); } /* ── PERIOD TABS (Mis Horas filter) ─────────────────────────────────────── */ .period-tabs { display: flex; gap: 4px; background: var(--bg); border-radius: 8px; padding: 3px; } .period-tab { border: none; background: transparent; color: var(--grey); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: background .15s, color .15s; } .period-tab.active { background: var(--white); color: var(--teal-d); box-shadow: 0 1px 3px rgba(0,0,0,.10); } .period-tab:hover:not(.active) { color: var(--teal); } /* ── MIS CUENTAS — ACCOUNT CARDS ────────────────────────────────────────── */ .accounts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 4px; } .account-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); cursor: pointer; overflow: hidden; transition: box-shadow .2s, transform .15s; display: flex; flex-direction: column; } .account-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .account-card-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 18px 12px; border-bottom: 1px solid var(--grey-lt); } .account-client { font-size: 15px; font-weight: 700; color: var(--ink); } .account-project { font-size: 12px; color: var(--grey); margin-top: 2px; } .account-value { font-size: 15px; font-weight: 800; color: var(--teal-d); } .account-salesperson { font-size: 11px; color: var(--grey); background: var(--grey-lt); border-radius: 20px; padding: 2px 8px; } .account-card-body { padding: 12px 18px; flex: 1; } .account-next { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--ink); line-height: 1.4; } .account-next-icon { color: var(--teal); font-weight: 700; flex-shrink: 0; } .account-next-date { color: var(--grey); white-space: nowrap; flex-shrink: 0; font-size: 11px; background: var(--grey-lt); border-radius: 20px; padding: 1px 6px; } .account-next-empty { color: var(--grey); font-style: italic; font-size: 12px; } .account-card-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; background: var(--bg); } .account-idle { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--grey); } .account-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .account-dot-green { background: var(--green); } .account-dot-yellow { background: #EAB308; } .account-dot-red { background: var(--red); } /* ── FOLLOW-UP MODAL PANEL ──────────────────────────────────────────────── */ .modal-followup-panel { max-width: 860px !important; width: 95vw !important; max-height: 85vh; display: flex; flex-direction: column; } .followup-layout { display: grid; grid-template-columns: 1fr 340px; gap: 0; flex: 1; overflow: hidden; min-height: 0; } .followup-timeline-col { display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--grey-lt); padding: 20px; } .followup-form-col { padding: 20px; overflow-y: auto; background: var(--bg); } .followup-form-title { font-size: 13px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--grey-lt); } .followup-account-meta { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--grey-lt); } .fu-meta-client { font-size: 16px; font-weight: 700; color: var(--ink); } .fu-meta-project { font-size: 12px; color: var(--grey); margin: 2px 0 4px; } .fu-meta-row { font-size: 12px; color: var(--grey); display: flex; gap: 8px; flex-wrap: wrap; } .fu-meta-val { font-weight: 700; color: var(--teal-d); } .followup-timeline-label { font-size: 11px; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; } #followup-timeline { flex: 1; overflow-y: auto; } .fu-entry { display: flex; gap: 12px; margin-bottom: 16px; position: relative; } .fu-entry::before { content: ''; position: absolute; left: 16px; top: 32px; bottom: -16px; width: 1px; background: var(--grey-lt); } .fu-entry:last-child::before { display: none; } .fu-entry-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--grey-lt); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; z-index: 1; } .fu-entry-body { flex: 1; background: var(--white); border-radius: 8px; padding: 10px 12px; box-shadow: 0 1px 4px rgba(0,0,0,.06); position: relative; } .fu-entry-header { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; } .fu-entry-type { font-size: 11px; font-weight: 700; color: var(--teal-d); background: var(--teal-lt); border-radius: 20px; padding: 1px 8px; } .fu-entry-date { font-size: 11px; color: var(--grey); } .fu-entry-author { font-size: 11px; color: var(--grey); margin-left: auto; } .fu-entry-notes { font-size: 13px; color: var(--ink); line-height: 1.5; white-space: pre-wrap; } .fu-entry-next { font-size: 11px; color: var(--teal); margin-top: 6px; font-style: italic; } .fu-delete-btn { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--grey); font-size: 11px; cursor: pointer; padding: 2px 5px; border-radius: 4px; opacity: 0; transition: opacity .15s; } .fu-entry-body:hover .fu-delete-btn { opacity: 1; } .fu-delete-btn:hover { background: var(--red-lt); color: var(--red); } .fu-empty { text-align: center; padding: 40px 20px; color: var(--grey); font-size: 13px; font-style: italic; } /* ── VENTAS — Sales Metrics ──────────────────────────────────────────────── */ .metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-bottom: 24px; } .metric-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 12px; transition: transform .15s; border: 2px solid transparent; } .metric-card:hover { transform: translateY(-2px); } .metric-done { border-color: var(--green); background: var(--green-lt); } .metric-card-header { display: flex; align-items: center; gap: 10px; } .metric-icon { font-size: 20px; line-height: 1; } .metric-label { font-size: 13px; font-weight: 700; color: var(--ink); flex: 1; line-height: 1.3; } .metric-badge-done { font-size: 10px; font-weight: 700; color: var(--green); background: var(--white); border: 1px solid var(--green); border-radius: 20px; padding: 2px 7px; white-space: nowrap; } .metric-numbers { display: flex; align-items: baseline; gap: 4px; } .metric-val { font-size: 36px; font-weight: 800; line-height: 1; } .metric-sep { font-size: 20px; color: var(--grey); font-weight: 300; } .metric-target { font-size: 16px; color: var(--grey); } .metric-target small { font-size: 10px; display: block; color: var(--grey); margin-top: 1px; } .metric-bar { height: 8px; background: var(--grey-lt); border-radius: 4px; overflow: hidden; } .metric-bar-fill { height: 100%; border-radius: 4px; width: 0; transition: width 0.9s cubic-bezier(.4,0,.2,1); } .metric-desc { font-size: 11px; color: var(--grey); line-height: 1.4; } /* Next goal pipeline strip */ .pipeline-snap { margin-bottom: 24px; } .pipeline-card { background: linear-gradient(135deg, var(--teal-d), var(--teal)); border-radius: var(--radius); padding: 16px 20px; color: var(--white); display: flex; align-items: center; gap: 16px; } .pipeline-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .75; white-space: nowrap; } .pipeline-goal { font-size: 16px; font-weight: 700; white-space: nowrap; } .pipeline-detail { font-size: 13px; opacity: .85; } /* Team performance grid (admin) */ .ventas-team-header { font-size: 13px; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; } .team-perf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 28px; } .team-member-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; } .team-member-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .team-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--teal); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; } .team-name { font-size: 14px; font-weight: 700; color: var(--ink); } .team-status { font-size: 12px; margin-top: 2px; } .team-score { margin-left: auto; font-size: 22px; font-weight: 800; line-height: 1; } .team-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .team-pill { font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 600; white-space: nowrap; } .team-pill-ok { background: var(--green-lt); color: var(--green); } .team-pill-no { background: var(--red-lt); color: var(--red); } .team-bar { height: 6px; background: var(--grey-lt); border-radius: 3px; overflow: hidden; } .team-bar-fill { height: 100%; border-radius: 3px; width: 0; transition: width 0.9s cubic-bezier(.4,0,.2,1); } /* ── Prospect pipeline list ──────────────────────────────────────────────── */ .prospects-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .prospects-header-left { display: flex; align-items: center; gap: 10px; } .prospects-count-badge { background: var(--teal); color: var(--white); border-radius: 20px; font-size: 11px; font-weight: 700; padding: 2px 8px; } .prospects-search { border: 1.5px solid var(--grey-lt); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--ink); outline: none; width: 200px; transition: border-color .15s; } .prospects-search:focus { border-color: var(--teal); } /* ── Stage summary strip ─────────────────────────────────────────────────── */ /* ── Stage summary strip ─────────────────────────────────────────────────── */ .stage-summary { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin-bottom: 18px; } .ss-card { background: var(--white); border-radius: 10px; padding: 12px 14px; cursor: pointer; border: 2px solid transparent; transition: all .18s; box-shadow: var(--shadow); } .ss-card:hover { border-color: var(--ss-border, var(--teal-mid)); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.10); } .ss-card.ss-active { background: var(--ss-bg, var(--teal-lt)); border-color: var(--ss-border, var(--teal)); } .ss-count { font-size: 22px; font-weight: 900; line-height: 1; color: var(--ss-text, var(--ink)); } .ss-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--grey); margin: 4px 0 8px; } .ss-bar-wrap { background: var(--grey-lt); border-radius: 4px; height: 4px; overflow: hidden; } .ss-bar-fill { height: 100%; border-radius: 4px; transition: width .4s ease; } /* ── Admin stage summary — rows per salesperson ───────────────────────────── */ .admin-ss-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; } .admin-ss-username { font-size: 12px; font-weight: 800; color: var(--teal-d); background: var(--teal-lt); border-radius: 8px; padding: 6px 12px; min-width: 110px; max-width: 140px; word-break: break-word; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.3; } .admin-ss-cards { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; flex: 1; } .admin-ss-cards .ss-card { padding: 8px 10px; } .admin-ss-cards .ss-count { font-size: 18px; } .admin-ss-cards .ss-label { font-size: 9px; } /* ── Autocomplete dropdown ────────────────────────────────────────────────── */ .ac-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 9000; background: var(--white); border: 1.5px solid var(--teal-mid); border-radius: 0 0 10px 10px; box-shadow: 0 6px 20px rgba(0,0,0,.12); max-height: 220px; overflow-y: auto; } .ac-item { display: flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer; border-bottom: 1px solid var(--grey-lt); font-size: 13px; } .ac-item:last-child { border-bottom: none; } .ac-item:hover { background: var(--teal-lt); } .ac-company { font-weight: 700; color: var(--ink); flex: 1; } .ac-badge { font-size: 10px; font-weight: 700; border-radius: 20px; padding: 2px 8px; flex-shrink: 0; } .ac-badge-client { background: #DCFCE7; color: #166534; } .ac-badge-prospect{ background: #FEF9C3; color: #854D0E; } .ac-owner { font-size: 11px; color: var(--grey); flex-shrink: 0; } /* ── Client type badges on cards ─────────────────────────────────────────── */ .client-card-top { margin-bottom: 6px; } .client-type-badge { font-size: 10px; font-weight: 700; border-radius: 20px; padding: 2px 10px; display: inline-block; } .badge-client { background: #DCFCE7; color: #166534; } .badge-prospect { background: #FEF9C3; color: #854D0E; } .client-card-prospect { border-left: 3px solid #EAB308; } /* ── Kanban board ────────────────────────────────────────────────────────── */ .kanban-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .kanban-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 20px; min-height: 460px; align-items: flex-start; } .kanban-board::-webkit-scrollbar { height: 6px; } .kanban-board::-webkit-scrollbar-thumb { background: var(--grey-lt); border-radius: 3px; } .kanban-col { flex-shrink: 0; width: 230px; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); transition: opacity .2s; } .kanban-col-dimmed { opacity: 0.4; pointer-events: none; } .kanban-col-header { padding: 12px 14px; flex-shrink: 0; } .kanban-col-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .kanban-col-count { font-size: 11px; color: var(--grey); margin-top: 2px; } .kanban-col-body { flex: 1; background: #F1F5F4; padding: 8px; min-height: 200px; display: flex; flex-direction: column; gap: 8px; transition: background .15s; } .kanban-col-body.drag-over { background: var(--teal-lt); } .kanban-empty { color: var(--grey); font-size: 11px; text-align: center; padding: 20px 8px; font-style: italic; line-height: 1.6; border: 1.5px dashed var(--grey-lt); border-radius: 8px; } .kanban-card { background: var(--white); border-radius: 8px; padding: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); cursor: pointer; transition: box-shadow .15s, transform .1s; border: 1.5px solid transparent; user-select: none; } .kanban-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-2px); border-color: var(--grey-lt); } .kanban-card.dragging { opacity: 0.45; transform: scale(0.96); } .kc-top { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; } .kc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .kc-name { font-size: 13px; font-weight: 700; color: var(--ink); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kc-source { font-size: 13px; flex-shrink: 0; } .kc-company { font-size: 11px; color: var(--grey); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kc-footer { display: flex; justify-content: space-between; align-items: center; } .kc-last { font-size: 10px; color: var(--grey); } .kc-acts { font-size: 10px; color: var(--grey); } /* Admin kanban header */ .admin-kanban-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 14px; flex-wrap: wrap; } /* ── Prospect Panel — centered modal layout ──────────────────────────────── */ .panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 300; display: none; backdrop-filter: blur(2px); } .prospect-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%) scale(0.97); width: min(94vw, 1080px); height: min(88vh, 760px); background: var(--white); border-radius: 18px; box-shadow: 0 28px 80px rgba(0,0,0,0.24); z-index: 401; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; overflow: hidden; } .prospect-panel.open { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) scale(1); } /* Two-column layout */ .pp-layout { display: flex; height: 100%; } /* Left sidebar */ .pp-sidebar { width: 256px; min-width: 256px; display: flex; flex-direction: column; border-right: 1px solid var(--grey-lt); overflow-y: auto; } .pp-sidebar-header { display: flex; align-items: flex-start; gap: 10px; padding: 22px 18px 16px; background: var(--teal-d); border-bottom: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; } .pp-status-dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; box-shadow: 0 0 0 3px rgba(255,255,255,0.25); } .pp-name { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.3; } .pp-company { font-size: 11px; color: rgba(255,255,255,0.65); margin-top: 3px; } .pp-semaphore { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--grey-lt); flex-shrink: 0; } .pp-fields { flex: 1; padding: 4px 0; } .pp-field-group { padding: 9px 16px; border-bottom: 1px solid rgba(0,0,0,0.04); } .pp-field-label { font-size: 10px; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; display: block; } .pp-field-val { font-size: 13px; color: var(--ink); word-break: break-all; display: block; } .pp-sidebar-footer { padding: 12px 14px; border-top: 1px solid var(--grey-lt); flex-shrink: 0; } .pp-delete-btn { color: #EF4444 !important; border: 1px solid #FEE2E2 !important; width: 100%; font-size: 12px; justify-content: center; } .pp-delete-btn:hover { background: #FEF2F2 !important; } /* Right main area */ .pp-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .pp-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 2px solid var(--grey-lt); min-height: 50px; flex-shrink: 0; } .pp-tabs { display: flex; gap: 2px; } .pp-tab { background: none; border: none; border-bottom: 3px solid transparent; padding: 13px 18px 11px; font-size: 13px; font-weight: 600; color: var(--grey); cursor: pointer; transition: color .15s, border-color .15s; white-space: nowrap; } .pp-tab:hover { color: var(--ink); } .pp-tab.active { color: var(--teal-d); border-bottom-color: var(--teal); } .pp-tab-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; } /* Alarm section inside panel */ .pp-alarm-section { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; } .pp-alarm-list { display: flex; flex-direction: column; gap: 8px; } .alarm-datetime-row { display: flex; gap: 10px; flex-wrap: wrap; } .alarm-datetime-row .form-group { flex: 1; min-width: 110px; margin: 0; } /* Shared panel close / select */ .panel-close-btn { background: none; border: none; font-size: 18px; color: var(--grey); cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background .12s; line-height: 1; } .panel-close-btn:hover { background: var(--grey-lt); } .panel-select { border: 1.5px solid var(--grey-lt); border-radius: 7px; padding: 5px 10px; font-size: 12px; color: var(--ink); outline: none; cursor: pointer; background: var(--white); transition: border-color .15s; width: 100%; } .panel-select:focus { border-color: var(--teal); } /* Alarm banner (daily, non-intrusive) */ .alarm-banner { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #FFFBEB; border: 1.5px solid #FCD34D; border-radius: 12px; padding: 12px 20px; display: flex; align-items: center; gap: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.1); z-index: 500; font-size: 13px; color: var(--ink); max-width: 560px; width: calc(100% - 48px); } .alarm-banner-icon { font-size: 18px; flex-shrink: 0; } .alarm-banner-close { background: none; border: none; cursor: pointer; color: var(--grey); font-size: 14px; margin-left: auto; padding: 2px 6px; border-radius: 4px; } .alarm-banner-close:hover { background: rgba(0,0,0,0.06); } /* Semaphore selector */ .semaphore-selector { display: flex; gap: 6px; } .sem-btn { background: none; border: 2px solid transparent; border-radius: 50%; cursor: pointer; font-size: 18px; padding: 2px; line-height: 1; transition: transform .12s, border-color .12s; } .sem-btn:hover { transform: scale(1.2); } .sem-btn.sem-active { border-color: var(--ink); transform: scale(1.1); } .panel-status-label { font-size: 12px; font-weight: 700; margin-left: 4px; } /* Panel timeline */ .panel-section-label { font-size: 12px; font-weight: 800; color: var(--teal-d); background: var(--teal-lt); padding: 8px 20px; flex-shrink: 0; display: flex; align-items: baseline; gap: 8px; } .panel-section-hint { font-size: 10px; font-weight: 400; color: var(--grey); font-style: italic; } .panel-timeline { flex: 1; overflow-y: auto; padding: 0 20px 8px; } .tl-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--grey-lt); } .tl-item:last-child { border-bottom: none; } .tl-dot { font-size: 14px; flex-shrink: 0; padding-top: 1px; } .tl-body { flex: 1; min-width: 0; } .tl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; } .tl-type { font-size: 12px; font-weight: 700; color: var(--teal-d); flex: 1; } .tl-date { font-size: 11px; color: var(--grey); white-space: nowrap; } .tl-del { background: none; border: none; color: var(--grey); font-size: 10px; cursor: pointer; padding: 1px 4px; border-radius: 3px; opacity: 0; transition: opacity .12s; } .tl-item:hover .tl-del { opacity: 1; } .tl-del:hover { background: var(--red-lt); color: var(--red); } .tl-notes { font-size: 12px; color: var(--grey); line-height: 1.4; white-space: pre-wrap; } .tl-empty { text-align: center; padding: 24px 16px; color: var(--grey); font-size: 12px; font-style: italic; } /* Panel inline log form (HubSpot-style) */ .panel-log-form { border-top: 2px solid var(--grey-lt); padding: 14px 16px 16px; background: var(--bg); flex-shrink: 0; } .log-type-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; } .log-tab { padding: 4px 10px; border: 1.5px solid var(--grey-lt); border-radius: 20px; background: var(--white); font-size: 11px; font-weight: 600; color: var(--grey); cursor: pointer; transition: all .12s; white-space: nowrap; } .log-tab:hover { border-color: var(--teal-mid); color: var(--teal-d); } .log-tab.active { border-color: var(--teal); background: var(--teal); color: var(--white); } .log-textarea { width: 100%; border: 1.5px solid var(--grey-lt); border-radius: 8px; padding: 10px 12px; font-size: 13px; font-family: inherit; resize: vertical; outline: none; transition: border-color .15s; background: var(--white); } .log-textarea:focus { border-color: var(--teal); } .log-form-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .log-date-input { border: 1.5px solid var(--grey-lt); border-radius: 7px; padding: 7px 10px; font-size: 12px; color: var(--ink); outline: none; flex-shrink: 0; transition: border-color .15s; } .log-date-input:focus { border-color: var(--teal); } .log-amount-input { width: 120px; border: 1.5px solid var(--grey-lt); border-radius: 7px; padding: 7px 10px; font-size: 12px; color: var(--ink); outline: none; transition: border-color .15s; } .log-amount-input:focus { border-color: var(--teal); } .log-submit-btn { margin-left: auto; } /* ── Activity type selector (modal) ──────────────────────────────────────── */ .act-type-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; } .act-type-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 2px solid var(--grey-lt); border-radius: 10px; background: var(--white); cursor: pointer; font-size: 12px; font-weight: 600; color: var(--grey); transition: all .15s; } .act-type-btn:hover { border-color: var(--teal-mid); color: var(--teal-d); } .act-type-btn.active { border-color: var(--teal); background: var(--teal-lt); color: var(--teal-d); } .act-type-icon { font-size: 22px; line-height: 1; } .act-sub-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .act-sub-btn { padding: 5px 12px; border: 1.5px solid var(--grey-lt); border-radius: 20px; background: var(--white); cursor: pointer; font-size: 12px; font-weight: 500; color: var(--grey); transition: all .12s; } .act-sub-btn:hover { border-color: var(--teal-mid); color: var(--teal-d); } .act-sub-btn.active { border-color: var(--teal); background: var(--teal-lt); color: var(--teal-d); font-weight: 700; } /* ── Activity feed ───────────────────────────────────────────────────────── */ .activity-feed { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; } .act-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--white); border-radius: 10px; box-shadow: var(--shadow); position: relative; transition: box-shadow .15s; } .act-item:hover { box-shadow: var(--shadow-md); } .act-item-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .act-item-body { flex: 1; min-width: 0; } .act-item-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 3px; } .act-item-type { font-size: 12px; font-weight: 700; } .act-item-client{ font-size: 13px; font-weight: 600; color: var(--ink); } .act-item-notes { font-size: 12px; color: var(--grey); line-height: 1.4; white-space: pre-wrap; margin-bottom: 4px; } .act-item-date { font-size: 11px; color: var(--grey); } .act-delete-btn { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--grey); font-size: 11px; cursor: pointer; padding: 3px 6px; border-radius: 4px; opacity: 0; transition: opacity .15s; } .act-item:hover .act-delete-btn { opacity: 1; } .act-delete-btn:hover { background: var(--red-lt); color: var(--red); } .act-empty { text-align: center; padding: 32px 20px; color: var(--grey); font-size: 13px; font-style: italic; } /* ── Admin Ventas charts grid ────────────────────────────────────────────── */ .ventas-charts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px; margin-bottom: 8px; } .ventas-chart-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 18px 14px; } .ventas-chart-title { font-size: 12px; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; } /* Metrics context note */ .metrics-context { font-size: 12px; color: var(--grey); background: var(--gold-lt); border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0; padding: 12px 16px; margin-bottom: 24px; line-height: 1.6; display: flex; gap: 10px; align-items: flex-start; } .metrics-context-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; } .metrics-context strong { color: var(--ink); } /* ── Client alarms ────────────────────────────────────────────────────────── */ /* Bell button on client card */ .client-card-top { display: flex; align-items: center; margin-bottom: 6px; } .alarm-bell-btn { background: none; border: none; cursor: pointer; position: relative; font-size: 16px; padding: 2px 4px; border-radius: 6px; line-height: 1; transition: transform .15s; } .alarm-bell-btn:hover { transform: scale(1.2); } .alarm-bell-btn.no-alarm { opacity: .35; } .alarm-bell-btn.no-alarm:hover { opacity: 1; } .alarm-bell-btn.alarm-overdue { animation: ring .6s ease infinite alternate; } .alarm-bell-btn.alarm-today { color: #F97316; } .alarm-bell-btn.alarm-future { color: #3B82F6; } @keyframes ring { from { transform: rotate(-15deg) scale(1.1); } to { transform: rotate(15deg) scale(1.1); } } .alarm-count-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #fff; border-radius: 50%; font-size: 9px; font-weight: 800; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; line-height: 1; } /* Alarm modal */ .alarm-type-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; } .alarm-type-btn { background: var(--white); border: 1.5px solid var(--grey-lt); border-radius: 10px; padding: 10px 6px; cursor: pointer; font-size: 13px; text-align: center; transition: all .15s; display: flex; flex-direction: column; align-items: center; gap: 4px; } .alarm-type-btn span { font-size: 10px; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: .04em; } .alarm-type-btn:hover { border-color: var(--teal-mid); } .alarm-type-btn.active { border-color: var(--teal); background: var(--teal-lt); box-shadow: 0 0 0 2px var(--teal)22; } .alarm-type-btn.active span { color: var(--teal-d); } /* Alarm list items */ .alarm-item { display: flex; align-items: center; justify-content: space-between; background: var(--white); border: 1px solid var(--grey-lt); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; gap: 10px; } .alarm-item.alarm-done { opacity: .5; } .alarm-item-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .alarm-icon { font-size: 18px; flex-shrink: 0; } .alarm-type-label { font-size: 12px; font-weight: 700; color: var(--ink); } .alarm-note-text { font-size: 11px; color: var(--grey); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .alarm-item-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .alarm-action-btn { background: none; border: none; cursor: pointer; font-size: 14px; padding: 3px 5px; border-radius: 5px; opacity: .6; transition: opacity .12s, background .12s; } .alarm-action-btn:hover { opacity: 1; background: var(--grey-lt); } .alarm-del-btn:hover { background: #FEE2E2; } /* Urgency badges */ .alarm-urgency-badge { font-size: 10px; font-weight: 800; border-radius: 20px; padding: 2px 9px; flex-shrink: 0; } .urgency-overdue { background: #FEE2E2; color: #B91C1C; } .urgency-today { background: #FFEDD5; color: #C2410C; } .urgency-tomorrow { background: #FEF9C3; color: #854D0E; } .urgency-future { background: #EFF6FF; color: #1D4ED8; } /* ── NEW DASHBOARD ─────────────────────────────────────────────────────── */ /* Greeting bar */ .dash-greeting { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, var(--teal-d) 0%, var(--teal) 100%); border-radius: 14px; padding: 20px 28px; margin-bottom: 20px; color: var(--white); gap: 16px; } .dash-greeting-left { display: flex; align-items: center; gap: 16px; } .dash-greeting-emoji { font-size: 36px; line-height: 1; } .dash-greeting-text { font-size: 20px; font-weight: 700; line-height: 1.2; } .dash-greeting-sub { font-size: 13px; opacity: .8; margin-top: 4px; } .dash-greeting .btn-primary { background: rgba(255,255,255,0.18); border: 1.5px solid rgba(255,255,255,0.4); backdrop-filter: blur(8px); color: var(--white); flex-shrink: 0; } .dash-greeting .btn-primary:hover { background: rgba(255,255,255,0.28); } /* Admin header */ .dash-admin-header { display: flex; align-items: center; justify-content: space-between; padding: 0 0 18px; gap: 16px; } /* KPI strip */ .dash-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; } .dash-kpi { display: flex; align-items: center; gap: 12px; background: var(--white); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); } .dash-kpi-icon { font-size: 26px; flex-shrink: 0; line-height: 1; } .dash-kpi-value { font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1; } .dash-kpi-label { font-size: 11px; font-weight: 600; color: var(--grey); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; } .dash-kpi-sub { font-size: 10px; color: var(--teal-mid); margin-top: 1px; } .dash-kpi.kpi-gold { border-left: 3px solid var(--gold); } .dash-kpi.kpi-green { border-left: 3px solid var(--green); } .dash-kpi.kpi-red { border-left: 3px solid var(--red); background: #FFF9F9; } .dash-kpi.kpi-red .dash-kpi-value { color: var(--red); } /* Charts row */ .dash-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; } .dash-chart-card { background: var(--white); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); } .dash-chart-title { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 14px; } .dash-chart-badge { font-size: 11px; font-weight: 600; color: var(--teal); background: var(--teal-lt); border-radius: 20px; padding: 2px 10px; } .dash-chart-wrap { position: relative; } /* Bottom row */ .dash-bottom-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; } .dash-panel { background: var(--white); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); overflow: hidden; } .dash-panel-header{ display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 14px; } .dash-panel-badge { font-size: 11px; font-weight: 600; color: var(--teal); background: var(--teal-lt); border-radius: 20px; padding: 2px 10px; } /* Alarms list in dashboard */ .dash-alarms-list { display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; } .dash-alarms-empty { font-size: 13px; color: var(--grey); text-align: center; padding: 20px 0; } .dash-alarm-item { display: flex; align-items: center; gap: 10px; background: var(--bg); border-radius: 8px; padding: 8px 10px; border-left: 3px solid transparent; } .dash-alarm-item.urgency-overdue { border-color: #EF4444; background: #FFF5F5; } .dash-alarm-item.urgency-today { border-color: #F97316; background: #FFF7ED; } .dash-alarm-item.urgency-tomorrow { border-color: #EAB308; background: #FEFCE8; } .dash-alarm-item.urgency-future { border-color: #3B82F6; } .dash-alarm-icon { font-size: 18px; flex-shrink: 0; } .dash-alarm-body { flex: 1; min-width: 0; } .dash-alarm-client { font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-alarm-note { font-size: 11px; color: var(--grey); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-alarm-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .dash-alarm-time { font-size: 12px; font-weight: 700; color: var(--ink); } /* Team summary in dashboard */ .dash-team-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--grey-lt); } .dash-team-row:last-child { border-bottom: none; } .dash-team-info { flex: 1; min-width: 0; } .dash-team-name { font-size: 13px; font-weight: 700; color: var(--ink); } .dash-team-stats { font-size: 11px; color: var(--grey); margin-top: 1px; } .dash-team-pct { font-size: 16px; font-weight: 800; flex-shrink: 0; } /* Recent quotes wrap */ .dash-recent-wrap { background: var(--white); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); } /* ── ALARM NOTIFICATION (floating corner) ─────────────────────────────── */ .alarm-notif { position: fixed; bottom: 24px; right: 24px; z-index: 900; background: var(--white); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06); width: 320px; padding: 18px 20px; flex-direction: column; gap: 12px; border-left: 4px solid var(--teal); transform: translateX(370px); transition: transform .35s cubic-bezier(.34,1.2,.64,1); } /* display:none is set inline; flex kicks in via JS — the slide uses transform */ .alarm-notif.alarm-notif-in { transform: translateX(0); } .alarm-notif-body { display: flex; gap: 12px; align-items: flex-start; } .alarm-notif-icon { font-size: 28px; line-height: 1; flex-shrink: 0; margin-top: 2px; } .alarm-notif-title { font-size: 12px; font-weight: 800; color: var(--grey); text-transform: uppercase; letter-spacing: .05em; } .alarm-notif-client { font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 2px; } .alarm-notif-note { font-size: 12px; color: var(--grey); margin-top: 3px; } .alarm-notif-actions{ display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; } .alarm-notif-btn { font-size: 12px; font-weight: 700; border: none; border-radius: 8px; padding: 7px 14px; cursor: pointer; transition: opacity .15s; } .alarm-notif-btn:hover { opacity: .8; } .alarm-notif-done { background: var(--green); color: var(--white); } .alarm-notif-snooze { background: var(--gold-lt); color: #92400E; border: 1px solid var(--gold); } .alarm-notif-dismiss{ background: var(--grey-lt); color: var(--grey); } /* ── NEW CLIENTS LIST ──────────────────────────────────────────────────── */ .clients-list { display: flex; flex-direction: column; gap: 0; background: var(--white); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; } .cl-row { display: grid; align-items: center; cursor: pointer; grid-template-columns: 44px 1fr auto auto 100px 36px auto; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--grey-lt); transition: background .12s; } .cl-row:last-child { border-bottom: none; } .cl-row:hover { background: var(--teal-lt); } .cl-avatar { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0; } .cl-avatar-logo { object-fit: contain; background: #fff; border: 1px solid var(--border); padding: 3px; } .cl-main { min-width: 0; } .cl-company { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cl-contact { font-size: 11px; color: var(--grey); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cl-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .cl-quote-count { font-size: 10px; font-weight: 700; background: var(--gold-lt); color: #92400E; border-radius: 20px; padding: 2px 8px; } .cl-owner { font-size: 11px; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } .cl-last-act { font-size: 11px; color: var(--grey); text-align: right; white-space: nowrap; } .cl-bell { display: flex; align-items: center; } .cl-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; } .cl-row:hover .cl-actions { opacity: 1; } /* ── Client Profile — Logo & Enrichment ───────────────────────────────────── */ .cp-sidebar-header { display: flex; align-items: flex-start; gap: 14px; } .cp-logo-wrap { flex-shrink: 0; width: 56px; height: 56px; } .cp-logo-img { width: 56px; height: 56px; border-radius: 12px; object-fit: contain; background: #fff; border: 1px solid var(--border); padding: 4px; } .cp-logo-initials { width: 56px; height: 56px; border-radius: 12px; background: var(--teal); color: #fff; font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .cp-description-wrap { margin: 12px 0 4px; background: rgba(0,150,130,.06); border-radius: 8px; border-left: 3px solid var(--teal); padding: 10px 12px; } .cp-description { font-size: 12px; line-height: 1.55; color: var(--grey); margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .cp-enrich-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } .cp-enrich-title { font-size: 11px; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; } .cp-enrich-fields { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .cp-enrich-input { font-size: 12px; padding: 6px 10px; } .cp-enrich-actions { display: flex; align-items: center; gap: 8px; } .cp-enrich-btn { font-size: 12px; padding: 6px 14px; flex-shrink: 0; } .cp-enrich-clear-btn { font-size: 11px; padding: 5px 10px; color: var(--grey); border-color: var(--border); display: inline-flex; align-items: center; gap: 4px; } /* ── Check-in Card ────────────────────────────────────────────────────────── */ .checkin-card { border-radius: 14px; padding: 18px 22px; margin-bottom: 20px; border: 1.5px solid var(--border); background: var(--surface); } .checkin-card.checkin-state-out { border-color: #F59E0B; background: #FFFBEB; } .checkin-panel { display: flex; align-items: flex-start; gap: 16px; } .checkin-icon { font-size: 26px; line-height: 1; flex-shrink: 0; padding-top: 2px; } .checkin-body { flex: 1; min-width: 0; } .checkin-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 10px; } .checkin-textarea { width: 100%; min-height: 56px; border-radius: 8px; border: 1px solid var(--border); padding: 8px 12px; font-size: 13px; font-family: inherit; resize: vertical; background: #fff; color: var(--ink); box-sizing: border-box; } .checkin-textarea:focus { outline: none; border-color: var(--teal); } .checkin-btn { margin-top: 8px; font-size: 13px; padding: 8px 18px; } .checkin-btn-sm { font-size: 12px; padding: 6px 12px; } .checkin-plan-text { font-size: 12px; color: var(--grey); font-style: italic; margin-bottom: 4px; } /* ── Team Presence Panel ──────────────────────────────────────────────────── */ .presence-panel { border-radius: 14px; border: 1px solid var(--border); background: var(--surface); padding: 16px 20px; margin-bottom: 20px; } .presence-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .presence-list { display: flex; flex-direction: column; gap: 10px; } .presence-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); } .presence-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; } .presence-dot-in { background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.2); } .presence-dot-out { background: #D1D5DB; } .presence-dot-done { background: #6366F1; } .presence-info { flex: 1; min-width: 0; } .presence-name { font-size: 13px; font-weight: 700; color: var(--ink); } .presence-sub { font-size: 11px; color: var(--grey); margin-top: 1px; } .presence-timer { background: rgba(0,150,130,.1); color: var(--teal); border-radius: 20px; padding: 1px 8px; font-size: 10px; font-weight: 700; margin-left: 6px; } .presence-plan { display: block; font-size: 11px; color: var(--grey); margin-top: 3px; font-style: italic; } /* ── Screenshot upload fields (tracker) ─────────────────────────────────── */ @keyframes shotShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .shot-field-shake { animation: shotShake .4s ease; border-color: var(--red) !important; } .shot-upload-field { background: var(--bg); border: 1.5px dashed var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; } .shot-upload-label { display: block; font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 8px; } .shot-hint { font-weight: 400; color: var(--grey); margin-left: 4px; } .shot-input-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .shot-file-btn { display: inline-block; padding: 5px 12px; font-size: 12px; cursor: pointer; background: var(--teal); color: #fff; border-radius: 6px; font-weight: 600; transition: opacity .15s; white-space: nowrap; } .shot-file-btn:hover { opacity: .85; } .shot-filename { font-size: 11px; color: var(--grey); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shot-clear-btn { background: none; border: none; color: var(--grey); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; } .shot-clear-btn:hover { color: var(--red); } .shot-preview { display: block; margin-top: 10px; max-width: 100%; max-height: 160px; border-radius: 8px; object-fit: contain; border: 1px solid var(--border); background: #fff; } /* ── Shot saved banner ───────────────────────────────────────────────────── */ .shot-saved-banner { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: #1A8A7A; color: #fff; border-radius: 10px; padding: 10px 18px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.25); z-index: 600; transition: transform .3s cubic-bezier(.34,1.56,.64,1); white-space: nowrap; } .shot-saved-banner.visible { transform: translateX(-50%) translateY(0); } .shot-saved-banner a { color: #fff; text-decoration: underline; } .shot-saved-banner button { background: none; border: none; color: rgba(255,255,255,.7); cursor: pointer; font-size: 16px; padding: 0; line-height: 1; } .shot-saved-banner button:hover { color: #fff; } /* ── Screenshots gallery ─────────────────────────────────────────────────── */ .shots-filterbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .shots-sel { font-size: 12px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); height: 34px; } .shots-date { font-size: 12px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); height: 34px; } .shots-date-sep { font-size: 12px; color: var(--grey); } .shots-clear { font-size: 12px; padding: 5px 12px; height: 34px; color: var(--grey); } .shots-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .shots-stat { font-size: 11px; font-weight: 600; color: var(--grey); background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; } .shots-stat-size { color: var(--teal); border-color: rgba(0,150,130,.3); } .shots-loading { padding: 40px; text-align: center; color: var(--grey); font-size: 13px; } .shots-empty { padding: 48px; text-align: center; color: var(--grey); font-size: 13px; } /* ── Screenshots — control panel ─────────────────────────────────────────── */ .shots-control-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 0; margin-bottom: 16px; box-shadow: var(--shadow); overflow: hidden; } .shots-control-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); gap: 16px; flex-wrap: wrap; } .shots-control-title { display: flex; flex-direction: column; gap: 3px; } .shots-control-title h2 { font-size: 16px; font-weight: 800; color: var(--ink); } .shots-control-title p { font-size: 12px; color: var(--grey); } .shots-control-bottom { display: flex; align-items: center; gap: 12px; padding: 12px 20px; flex-wrap: wrap; } /* Week nav inside control card */ .shots-week-nav { display: flex; align-items: center; gap: 4px; background: var(--teal-lt); border: 1px solid rgba(26,138,122,.2); border-radius: 8px; padding: 4px 6px; } .shots-week-btn { background: none; border: none; cursor: pointer; padding: 5px 12px; font-size: 13px; font-weight: 700; color: var(--teal); border-radius: 6px; transition: background .15s; } .shots-week-btn:hover { background: rgba(26,138,122,.15); } .shots-week-label { font-size: 13px; font-weight: 700; color: var(--teal-d); white-space: nowrap; min-width: 190px; text-align: center; } /* Info bar (stats + legend) */ .shots-info-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } /* ── Screenshots matrix ───────────────────────────────────────────────────── */ .shots-matrix-legend { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; } .shots-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--grey); } .shots-legend-swatch { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; } .shots-legend-start { background: #059669; } .shots-legend-stop { background: #DC2626; } .shots-legend-empty { background: var(--bg); border: 1.5px dashed #ccc; } .shots-matrix-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 4px 24px rgba(0,0,0,.09); } .shots-matrix { border-collapse: collapse; table-layout: fixed; width: 100%; } /* ── Header ───────────────────────────────────────────────────────────────── */ .shots-matrix thead th { padding: 18px 12px; text-align: center; background: var(--bg); white-space: nowrap; border-bottom: 2px solid var(--border); border-right: 1px solid var(--border); } .shots-matrix thead th:last-child { border-right: none; } .shots-matrix-corner { width: 180px; text-align: left !important; position: sticky; left: 0; z-index: 3; background: var(--bg) !important; border-right: 2px solid var(--border) !important; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--grey); text-transform: uppercase; padding-left: 18px !important; } .shots-matrix-day-hdr { width: calc((100% - 180px) / 5); } .shots-matrix-day-name { font-size: 14px; font-weight: 800; color: var(--ink); display: block; margin-bottom: 4px; } .shots-matrix-day-num { font-size: 10px; font-weight: 600; color: var(--grey); text-transform: uppercase; letter-spacing: .5px; } /* Today header — solid teal */ .shots-matrix-today-hdr { background: var(--teal) !important; border-right-color: var(--teal-d) !important; } .shots-matrix-today-hdr .shots-matrix-day-name { color: #fff; } .shots-matrix-today-hdr .shots-matrix-day-num { color: rgba(255,255,255,.75); } /* ── Body rows ────────────────────────────────────────────────────────────── */ .shots-matrix tbody tr:hover td { filter: brightness(.97); } .shots-matrix tbody tr:hover .shots-matrix-user { filter: none; background: #F0F7F6 !important; } .shots-matrix tbody td { padding: 14px 10px; vertical-align: middle; text-align: center; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); } .shots-matrix tbody td:last-child { border-right: none; } .shots-matrix tbody tr:last-child td { border-bottom: none; } /* Alternating row shade */ .shots-matrix tbody tr:nth-child(even) td { background: #FAFCFC; } .shots-matrix tbody tr:nth-child(odd) td { background: var(--white); } /* User column */ .shots-matrix-user { position: sticky; left: 0; z-index: 2; padding: 14px 18px !important; text-align: left !important; border-right: 2px solid var(--border) !important; } .shots-matrix tbody tr:nth-child(even) .shots-matrix-user { background: #FAFCFC !important; } .shots-matrix tbody tr:nth-child(odd) .shots-matrix-user { background: var(--white) !important; } .shots-matrix-user-inner { display: flex; align-items: center; gap: 10px; } .shots-matrix-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); } .shots-matrix-name { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 115px; } /* Today column cells — soft teal wash */ .shots-matrix-today { background: rgba(26,138,122,.07) !important; } .shots-matrix tbody tr:hover .shots-matrix-today { filter: brightness(.95); } /* ── Session rows within a cell ───────────────────────────────────────────── */ .shots-session { padding: 8px 6px; } .shots-session-sep { border-bottom: 1px dashed var(--border); padding-bottom: 10px; margin-bottom: 2px; } .shots-session-proj { font-size: 10px; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: .4px; background: var(--bg); border-radius: 4px; padding: 2px 7px; margin-bottom: 6px; display: inline-block; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Cell status stripe (top accent bar) ──────────────────────────────────── */ .shots-cell-pair { display: flex; gap: 8px; justify-content: center; align-items: center; } /* Has shots → green top stripe */ .shots-cell-has-shots { box-shadow: inset 0 4px 0 #52BFB0; } .shots-matrix-today.shots-cell-has-shots { box-shadow: inset 0 4px 0 var(--teal); } /* Missing → soft pink background + pink top stripe */ .shots-cell-missing { background: #FEF2F2 !important; box-shadow: inset 0 4px 0 #F4AAAA; } .shots-matrix-today.shots-cell-missing { background: rgba(244,170,170,.12) !important; box-shadow: inset 0 4px 0 #F4AAAA; } /* Thumbnails */ .shots-thumb { width: 80px; height: 68px; border-radius: 8px; overflow: hidden; position: relative; cursor: pointer; flex-shrink: 0; transition: transform .18s, box-shadow .18s; box-shadow: 0 2px 6px rgba(0,0,0,.14); } .shots-thumb:hover { transform: scale(1.12); box-shadow: 0 8px 20px rgba(0,0,0,.28); z-index: 10; } .shots-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .shots-thumb-lbl { position: absolute; bottom: 0; left: 0; right: 0; font-size: 9px; font-weight: 800; color: #fff; background: rgba(0,0,0,.55); padding: 3px 4px; text-align: center; line-height: 1.4; } .shots-thumb-start { border: 3px solid #059669; } .shots-thumb-stop { border: 3px solid #DC2626; } /* Empty slot */ .shots-thumb-empty { width: 80px; height: 68px; border-radius: 8px; flex-shrink: 0; border: 2px dashed #ddd; background: #fafafa; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .shots-thumb-empty .se-icon { font-size: 20px; opacity: .35; } .shots-thumb-empty .se-txt { font-size: 9px; color: #bbb; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; } /* Cards */ .shot-card { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); transition: box-shadow .15s, transform .15s; } .shot-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.1); transform: translateY(-2px); } .shot-card-img-wrap { position: relative; height: 120px; cursor: pointer; background: #e8e8e8; overflow: hidden; } .shot-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; display: block; } .shot-card:hover .shot-card-img { transform: scale(1.06); } /* zoom icon on hover */ .shot-card-img-wrap::after { content: '🔍'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s; } .shot-card:hover .shot-card-img-wrap::after { opacity: 1; } .shot-card-overlay { position: absolute; top: 6px; left: 6px; z-index: 1; } .shot-type-badge { font-size: 9px; font-weight: 800; border-radius: 20px; padding: 2px 7px; display: inline-block; letter-spacing: .3px; } .shot-badge-start { background: #D1FAE5; color: #065F46; } .shot-badge-stop { background: #FEE2E2; color: #991B1B; } .shot-card-body { padding: 7px 10px 4px; } .shot-card-user { font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shot-card-meta { font-size: 10px; color: var(--grey); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shot-card-actions { padding: 2px 6px 6px; display: flex; justify-content: flex-end; } .shot-delete-btn { font-size: 10px; color: var(--grey); padding: 2px 6px; } .shot-delete-btn:hover { color: var(--red); border-color: var(--red); } /* ── Evidence Badge (time entries table) ─────────────────────────────────── */ .evidence-badge { display: inline-block; font-size: 11px; color: var(--teal); background: rgba(0,150,130,.08); border-radius: 6px; padding: 2px 8px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; cursor: default; } /* ── LIGHTBOX (two-panel) ─────────────────────────────────────────────────── */ #lightbox-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.72); display: none; align-items: center; justify-content: center; padding: 24px; } .lb-close { position: fixed; top: 16px; right: 20px; background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 20px; line-height: 1; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .lb-close:hover { background: rgba(255,255,255,.25); } .lb-inner { display: flex; flex-direction: row; background: var(--white); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.4); max-width: 1040px; max-height: 90vh; width: 100%; } /* Left: image panel */ .lb-img-panel { flex: 1 1 0; min-width: 0; background: #0C1918; display: flex; align-items: center; justify-content: center; padding: 16px; max-height: 90vh; overflow: hidden; } .lb-img-panel img { max-width: 100%; max-height: calc(90vh - 32px); object-fit: contain; border-radius: 6px; } /* Right: info panel */ .lb-info-panel { width: 272px; flex-shrink: 0; display: flex; flex-direction: column; padding: 24px; border-left: 1px solid var(--grey-lt); overflow-y: auto; } .lb-info-header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; } .lb-type-badge { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 3px 10px; letter-spacing: .3px; align-self: flex-start; } .lb-badge-start { background: var(--teal-lt); color: var(--teal); } .lb-badge-stop { background: var(--red-lt); color: var(--red); } .lb-user { font-size: 15px; font-weight: 700; color: var(--ink); } .lb-info-row { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; } .lb-info-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--grey); } .lb-info-val { font-size: 13px; color: var(--ink); word-break: break-word; } .lb-note-section { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--grey-lt); } .lb-note-body { margin-top: 8px; font-size: 13px; color: var(--ink); line-height: 1.55; white-space: pre-wrap; word-break: break-word; background: var(--bg); border-radius: 8px; padding: 10px 12px; min-height: 60px; } /* ── TIMER PAUSE BUTTON & BANNER ─────────────────────────────────────────── */ .btn-tracker-pause { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; border: 1.5px solid #F26522; color: #F26522; background: transparent; cursor: pointer; transition: all .15s; } .btn-tracker-pause:hover { background: #FEF0E9; } /* Permiso — tono pizarra para diferenciarlo del naranja de comida */ .btn-tracker-permiso { border-color: #6B7B79 !important; color: #6B7B79 !important; } .btn-tracker-permiso:hover { background: #F0F2F2 !important; } .btn-tracker-resume { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; border: none; background: #1A8A7A; color: #fff; cursor: pointer; transition: all .15s; } .btn-tracker-resume:hover { background: #0D5C52; } .pause-banner { display: flex; align-items: center; gap: 12px; background: #FEF0E9; border: 1.5px dashed #F26522; border-radius: 10px; padding: 10px 16px; margin-bottom: 14px; } .pause-banner-icon { font-size: 20px; } .pause-banner-text { flex: 1; font-size: 13px; line-height: 1.3; } .pause-banner-text strong { display: block; color: #D4541A; } .pause-timer-count { font-size: 16px; font-weight: 700; color: #F26522; font-variant-numeric: tabular-nums; } /* ── HUB / FORO ──────────────────────────────────────────────────────────── */ .hub-header-bar { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; } .hub-new-btn { display: flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; } /* Category filter pills */ .hub-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .hub-filter-btn { font-size: 12px; font-weight: 500; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--white); color: var(--grey); cursor: pointer; transition: all .15s; } .hub-filter-btn:hover { border-color: var(--teal); color: var(--teal); } .hub-filter-btn.active { background: #0C1918; color: var(--white); border-color: #0C1918; } /* Two-column layout */ .hub-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: start; } @media (max-width: 900px) { .hub-layout { grid-template-columns: 1fr; } } /* Feed */ .hub-feed { display: flex; flex-direction: column; gap: 12px; } .hub-loading { text-align: center; color: var(--grey); padding: 40px 0; font-size: 14px; } .hub-empty { text-align: center; color: var(--grey); padding: 48px 0; font-size: 14px; line-height: 1.6; } /* Post card */ .hub-post-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; cursor: pointer; transition: box-shadow .15s, border-color .15s; } .hub-post-card:hover { box-shadow: var(--shadow-md); border-color: var(--teal-mid); } .hub-post-pinned { border-left: 3px solid var(--teal); } .hub-post-vacancy { border: 1.5px solid #1A8A7A; } .hub-post-meta-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .hub-cat-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; } .hub-pinned-badge { font-size: 10px; color: var(--grey); font-weight: 500; } .hub-post-time { font-size: 11px; color: var(--grey); margin-left: auto; } .hub-post-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; line-height: 1.35; } .hub-post-excerpt { font-size: 12px; color: var(--grey); line-height: 1.55; margin-bottom: 12px; } .hub-post-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--grey-lt); padding-top: 10px; gap: 8px; } .hub-post-author { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--grey); } .hub-author-av { width: 24px; height: 24px; border-radius: 50%; background: var(--teal-lt); color: var(--teal-d); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; } .hub-post-actions { display: flex; align-items: center; gap: 8px; } .hub-comment-count { font-size: 11px; color: var(--grey); } .hub-react-btn, .hub-vote-btn { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--grey); cursor: pointer; transition: all .15s; } .hub-react-btn:hover { border-color: #e57; color: #e57; } .hub-react-btn.reacted{ border-color: #e57; color: #e57; background: #fff5f7; } .hub-vote-btn:hover { border-color: var(--teal); color: var(--teal); } .hub-vote-btn.voted { border-color: var(--teal); color: var(--teal); background: var(--teal-lt); } .hub-apply-btn { font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 8px; border: 1.5px solid var(--teal); background: transparent; color: var(--teal); cursor: pointer; transition: all .15s; } .hub-apply-btn:hover { background: var(--teal); color: var(--white); } .hub-apply-btn.applied { border-color: var(--grey); color: var(--grey); cursor: default; } /* Sidebar */ .hub-sidebar { display: flex; flex-direction: column; gap: 14px; } .hub-sb-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .hub-sb-title { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px; color: var(--grey); margin-bottom: 12px; } .hub-sb-title svg { stroke: currentColor; stroke-width: 2; fill: none; flex-shrink: 0; } .hub-sb-empty { font-size: 12px; color: var(--grey); text-align: center; padding: 8px 0; } .hub-sb-item { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--grey-lt); } .hub-sb-item:last-child { border-bottom: none; } .hub-sb-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; } .hub-sb-item-title { font-size: 12px; font-weight: 500; color: var(--ink); line-height: 1.3; } .hub-sb-item-meta { font-size: 10px; color: var(--grey); margin-top: 2px; } .hub-sb-idea { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--grey-lt); cursor: pointer; } .hub-sb-idea:last-child { border-bottom: none; } .hub-sb-idea:hover .hub-sb-idea-title { color: var(--teal); } .hub-sb-vote { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 32px; flex-shrink: 0; } .hub-sb-vote-btn { background: none; border: 1px solid var(--border); border-radius: 4px; font-size: 11px; color: var(--grey); width: 24px; height: 20px; cursor: pointer; transition: all .15s; } .hub-sb-vote-btn:hover, .hub-sb-vote-btn.voted { border-color: var(--teal); color: var(--teal); background: var(--teal-lt); } .hub-sb-vote-count { font-size: 11px; color: var(--grey); font-weight: 600; } .hub-sb-idea-title { font-size: 12px; color: var(--ink); line-height: 1.3; } /* Post detail panel */ .post-panel-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,.45); display: none; align-items: flex-start; justify-content: flex-end; } .post-panel-inner { width: min(680px, 95vw); height: 100vh; background: var(--white); overflow-y: auto; position: relative; display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0,0,0,.18); } .post-panel-close { position: sticky; top: 0; z-index: 2; float: right; margin: 14px 14px 0 0; background: var(--bg); border: 1px solid var(--border); border-radius: 50%; width: 30px; height: 30px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--grey); line-height: 1; } .post-panel-close:hover { background: var(--grey-lt); } .post-panel-header { background: #0C1918; padding: 28px 24px 22px; display: flex; flex-direction: column; gap: 8px; margin-top: -30px; } .pp-title { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.3; } .pp-meta { font-size: 12px; color: #6FAEAA; display: flex; align-items: center; gap: 8px; } .pp-meta .hub-author-av { background: rgba(255,255,255,.12); color: #fff; } .post-panel-body { padding: 20px 24px; flex: 1; } .pp-content { font-size: 14px; line-height: 1.7; color: var(--ink); margin-bottom: 18px; } .pp-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px; color: var(--grey); margin-bottom: 10px; } .pp-vacancy-req { font-size: 13px; line-height: 1.65; color: var(--ink); background: var(--bg); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; } .pp-applied-badge { display: inline-block; font-size: 12px; font-weight: 600; color: var(--teal); background: var(--teal-lt); padding: 6px 14px; border-radius: 8px; } .pp-applicant { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--grey-lt); } .pp-applicant:last-child { border-bottom: none; } .pp-actions-row { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--grey-lt); border-bottom: 1px solid var(--grey-lt); padding: 10px 0; margin: 16px 0; } .pp-react-btn { all: unset; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 5px; } .pp-vote-btn { font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px; border: 1.5px solid var(--border); background: transparent; color: var(--grey); cursor: pointer; } .pp-vote-btn.voted { border-color: var(--teal); color: var(--teal); background: var(--teal-lt); } .pp-views { font-size: 12px; color: var(--grey); margin-left: auto; } .pp-comments-section { margin-top: 4px; } .pp-comments-list { max-height: 300px; overflow-y: auto; margin-bottom: 14px; } .pp-no-comments { font-size: 12px; color: var(--grey); text-align: center; padding: 16px 0; } .pp-comment { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--grey-lt); } .pp-comment:last-child { border-bottom: none; } .pp-comment-body { flex: 1; } .pp-comment-author { font-size: 12px; font-weight: 600; color: var(--ink); } .pp-comment-time { font-size: 11px; color: var(--grey); margin-left: 8px; } .pp-comment-text { font-size: 13px; color: var(--ink); margin-top: 3px; line-height: 1.5; } /* ── DARK MODE GLOBAL OVERRIDES ──────────────────────────────────────────── */ [data-theme="dark"] .card, [data-theme="dark"] .stat-card, [data-theme="dark"] .modal-box, [data-theme="dark"] .modal, [data-theme="dark"] .modal-card, [data-theme="dark"] .client-card, [data-theme="dark"] .hub-post-card, [data-theme="dark"] .hub-sb-card, [data-theme="dark"] .post-panel-inner, [data-theme="dark"] .lb-inner, [data-theme="dark"] .lb-info-panel, [data-theme="dark"] .tracker-hero, [data-theme="dark"] .shots-control-card, [data-theme="dark"] .slide-panel, [data-theme="dark"] .alarm-modal, [data-theme="dark"] .hub-header-card, [data-theme="dark"] .hub-panel-box { background: var(--card-bg); border-color: var(--border); } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--input-bg); color: var(--ink); border-color: var(--border); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--grey); } [data-theme="dark"] .data-table thead th, [data-theme="dark"] .shots-matrix th { background: var(--table-head); color: var(--grey); } [data-theme="dark"] .data-table tbody tr:hover td, [data-theme="dark"] .data-table tbody tr:hover, [data-theme="dark"] .shots-matrix-row:hover { background: rgba(26,138,122,0.06); } [data-theme="dark"] .data-table tbody td, [data-theme="dark"] .data-table tbody tr { border-color: var(--border); } [data-theme="dark"] .table-wrap { background: var(--card-bg); } [data-theme="dark"] .nav-item { color: var(--teal-mid); } [data-theme="dark"] .nav-item:hover, [data-theme="dark"] .nav-item.active { background: rgba(26,138,122,0.2); color: #fff; } [data-theme="dark"] .view-title { color: var(--ink); } [data-theme="dark"] .hub-post-card:hover { border-color: var(--teal); } [data-theme="dark"] .hub-filter-btn { background: var(--card-bg); border-color: var(--border); color: var(--grey); } [data-theme="dark"] .hub-filter-btn.active { background: var(--teal); border-color: var(--teal); } /* ── DARK MODE: Shots Matrix full fix ───────────────────────────────────── */ [data-theme="dark"] .shots-matrix-cell { background: var(--card-bg); } [data-theme="dark"] .shots-cell-has-shots { background: rgba(26,138,122,0.15) !important; } [data-theme="dark"] .shots-cell-missing { background: rgba(220,38,38,0.12) !important; } /* Row stripe colors */ [data-theme="dark"] .shots-matrix tbody tr:nth-child(even) td, [data-theme="dark"] .shots-matrix tbody tr:nth-child(even) .shots-matrix-user { background: var(--bg) !important; } [data-theme="dark"] .shots-matrix tbody tr:nth-child(odd) td, [data-theme="dark"] .shots-matrix tbody tr:nth-child(odd) .shots-matrix-user { background: var(--card-bg) !important; } /* Keep today column tint in dark mode */ [data-theme="dark"] .shots-matrix-today { background: rgba(26,138,122,0.09) !important; } [data-theme="dark"] .shots-matrix-today.shots-cell-has-shots { background: rgba(26,138,122,0.2) !important; } /* Empty slot */ [data-theme="dark"] .shots-thumb-empty { background: var(--input-bg) !important; border-color: var(--border) !important; } [data-theme="dark"] .shots-thumb-empty .se-txt { color: var(--grey); } /* Shot card image background */ [data-theme="dark"] .shot-card-img-wrap { background: var(--bg); } /* Type badges */ [data-theme="dark"] .shot-badge-start { background: rgba(74,222,128,0.12); color: #4ADE80; } [data-theme="dark"] .shot-badge-stop { background: rgba(248,113,113,0.12); color: #F87171; } /* Hover brightness should lighten in dark mode */ [data-theme="dark"] .shots-matrix tbody tr:hover td { filter: brightness(1.15); } [data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.7); } [data-theme="dark"] .post-panel-overlay { background: rgba(0,0,0,0.65); } [data-theme="dark"] .section-title, [data-theme="dark"] .view-sub { color: var(--grey); } [data-theme="dark"] .btn-ghost { border-color: var(--border); color: var(--grey); } [data-theme="dark"] .btn-ghost:hover { background: var(--grey-lt); } [data-theme="dark"] .pause-banner { background: rgba(242,101,34,0.1); } [data-theme="dark"] .hub-post-footer, [data-theme="dark"] .hub-card-footer { border-color: var(--border); } [data-theme="dark"] .hub-filter-btn:hover { border-color: var(--teal); color: var(--teal); } [data-theme="dark"] .hub-action-btn:hover { background: rgba(111,174,170,0.08); color: var(--ink); } [data-theme="dark"] .hub-post-item:hover { background: rgba(26,138,122,0.06); } [data-theme="dark"] .hub-post-item { border-bottom-color: var(--border); } [data-theme="dark"] .hub-item-react:hover { background: rgba(220,0,85,.08); } [data-theme="dark"] .hub-item-vote:hover, [data-theme="dark"] .hub-item-vote.voted { background: rgba(26,138,122,0.12); } [data-theme="dark"] .pp-comments-list::-webkit-scrollbar-track { background: var(--bg); } [data-theme="dark"] .pp-comments-list::-webkit-scrollbar-thumb { background: var(--border); } /* ── THEME TOGGLE BUTTON ─────────────────────────────────────────────────── */ .theme-toggle { display: flex; align-items: center; gap: 8px; padding: 8px 14px; margin: 0 8px 4px; border-radius: 8px; cursor: pointer; background: none; border: none; color: var(--teal-mid); font-size: 12px; font-weight: 500; width: calc(100% - 16px); transition: background .15s; } .theme-toggle:hover { background: rgba(111,174,170,0.12); } .theme-toggle-icon { font-size: 16px; line-height: 1; } /* ── HUB EDITORIAL-STYLE REDESIGN ─────────────────────────────────────── */ /* ── Hub Facebook-style header card ── */ .hub-header-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 14px; } .hub-header-top { display: flex; align-items: center; gap: 14px; padding: 16px 18px 14px; } .hub-header-avatar { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; background: linear-gradient(135deg, var(--teal) 0%, #0D5C52 100%); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; color: #fff; box-shadow: 0 3px 10px rgba(26,138,122,0.35); } .hub-header-info { flex: 1; min-width: 0; } .hub-header-title { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -.4px; line-height: 1.1; } .hub-header-sub { font-size: 11px; color: var(--grey); margin-top: 3px; } .hub-new-btn { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; background: var(--teal); color: #fff; border: none; border-radius: 8px; padding: 9px 16px; font-size: 12px; font-weight: 700; cursor: pointer; transition: opacity .15s; white-space: nowrap; } .hub-new-btn:hover { opacity: .85; } .hub-new-btn svg { stroke: #fff; fill: none; flex-shrink: 0; } /* Category filter tabs inside header card — Facebook tab style */ .hub-filters { display: flex; gap: 0; border-top: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; padding: 0 10px; } .hub-filters::-webkit-scrollbar { display: none; } .hub-filter-btn { font-size: 13px; font-weight: 500; padding: 10px 14px; border: none; background: none; color: var(--grey); cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .12s, border-color .12s; } .hub-filter-btn:hover { color: var(--ink); } .hub-filter-btn.active { color: var(--teal); border-bottom-color: var(--teal); font-weight: 700; } /* ── Hub topbar: branding + channel tabs + compose ── */ .hub-topbar { display: flex; align-items: center; gap: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; margin-bottom: 14px; gap: 12px; } .hub-topbar-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .hub-topbar-av { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; background: linear-gradient(135deg, var(--teal) 0%, #0a5548 100%); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; color: #fff; } .hub-topbar-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.1; } .hub-topbar-sub { font-size: 10px; color: var(--grey); margin-top: 1px; } /* Channel tabs — scrollable horizontal strip */ .hub-topbar-tabs { display: flex; align-items: center; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; padding: 0 4px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); margin: -4px 0; } .hub-topbar-tabs::-webkit-scrollbar { display: none; } .hub-chan-item { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 8px; white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--grey); cursor: pointer; border: none; background: transparent; transition: background .12s, color .12s; flex-shrink: 0; } .hub-chan-item:hover { background: rgba(26,138,122,0.08); color: var(--ink); } .hub-chan-item.active { background: #0C1918; color: #fff; } [data-theme="dark"] .hub-chan-item.active { background: var(--teal); } .hub-chan-icon { font-size: 12px; } .hub-chan-hash { font-size: 13px; color: inherit; opacity: .5; } .hub-chan-item.active .hub-chan-hash { opacity: .7; } .hub-chan-name { } /* Compose button (topbar right) */ .hub-topbar-right { flex-shrink: 0; } .hub-topbar-compose { display: inline-flex; align-items: center; gap: 6px; background: var(--teal); color: #fff; border: none; border-radius: 8px; font-size: 12px; font-weight: 700; padding: 7px 14px; cursor: pointer; transition: opacity .15s; white-space: nowrap; } .hub-topbar-compose:hover { opacity: .85; } .hub-topbar-compose svg { stroke: #fff; fill: none; flex-shrink: 0; } /* ── Two-column layout: feed | right sidebar ── */ .hub-layout { display: grid; grid-template-columns: 1fr 280px; gap: 16px; align-items: start; } /* Feed column */ .hub-feed-col { display: flex; flex-direction: column; min-width: 0; } .hub-feed { display: flex; flex-direction: column; min-width: 0; } /* Right sidebar sticky */ .hub-layout > .hub-sidebar { position: sticky; top: 0; max-height: calc(100vh - 24px); overflow-y: auto; scrollbar-width: none; } .hub-layout > .hub-sidebar::-webkit-scrollbar { display: none; } .hub-loading, .hub-empty { padding: 40px 0; text-align: center; color: var(--grey); font-size: 13px; } /* ── Editorial post item ── */ .hub-post-item { display: flex; align-items: flex-start; gap: 12px; padding: 15px 12px 15px 18px; border-bottom: 1px solid var(--border); cursor: pointer; position: relative; transition: background .12s; } .hub-post-item:hover { background: var(--teal-lt); } /* Left color accent stripe */ .hub-post-accent { position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 2px; background: var(--accent, var(--teal)); opacity: 0; transition: opacity .18s; } .hub-post-item:hover .hub-post-accent { opacity: 1; } .hub-post-item.hub-post-pinned .hub-post-accent { opacity: 1; } /* Post content block */ .hub-post-content { flex: 1; min-width: 0; } .hub-post-type-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-bottom: 6px; letter-spacing: .3px; text-transform: uppercase; } .hub-cat-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-bottom: 6px; white-space: nowrap; letter-spacing: .2px; } .hub-post-item-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.4; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hub-post-item-excerpt { font-size: 12px; color: var(--grey); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px; } /* Meta footer of each item */ .hub-post-item-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .hub-item-av { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background: rgba(26,138,122,0.14); border: 1px solid rgba(26,138,122,0.2); color: var(--teal-d); display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; } [data-theme="dark"] .hub-item-av { border-color: rgba(42,173,160,0.3); color: var(--teal); } .hub-item-author { font-size: 11px; font-weight: 600; color: var(--ink); } .hub-item-dot { font-size: 9px; color: var(--grey); } .hub-item-time { font-size: 11px; color: var(--grey); } .hub-item-comments { font-size: 11px; color: var(--grey); margin-left: auto; display: flex; align-items: center; gap: 3px; } /* Inline interaction buttons (admin-only) */ .hub-item-vote, .hub-item-react { font-size: 11px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border); background: none; color: var(--grey); cursor: pointer; transition: all .12s; display: flex; align-items: center; gap: 3px; } .hub-item-vote:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-lt); } .hub-item-react:hover { border-color: #e05; color: #e05; background: rgba(220,0,85,.06); } .hub-item-vote.voted { border-color: var(--teal); color: var(--teal); background: var(--teal-lt); } .hub-item-react.reacted { border-color: #e05; color: #e05; background: rgba(220,0,85,.07); } /* Optional right-side thumbnail */ .hub-post-thumb { width: 80px; height: 64px; object-fit: cover; border-radius: 7px; flex-shrink: 0; align-self: flex-start; margin-top: 2px; } /* Apply button (vacancy) */ .hub-apply-btn { font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 6px; border: 1.5px solid var(--teal); background: transparent; color: var(--teal); cursor: pointer; transition: all .15s; } .hub-apply-btn:hover { background: var(--teal); color: #fff; } .hub-apply-btn.applied { border-color: var(--grey); color: var(--grey); cursor: default; } /* Legacy card selectors — kept for post-detail panel compatibility */ .hub-post-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; cursor: pointer; padding: 0; transition: box-shadow .18s, border-color .18s; } .hub-post-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.10); border-color: var(--teal-mid); } .hub-card-header { display: flex; align-items: center; gap: 11px; padding: 14px 16px 4px; } .hub-author-av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: rgba(26,138,122,0.14); border: 2px solid rgba(26,138,122,0.22); color: var(--teal-d); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; } [data-theme="dark"] .hub-author-av { border-color: rgba(42,173,160,0.3); color: var(--teal); } .hub-card-meta { flex: 1; min-width: 0; } .hub-card-author{ font-size: 13px; font-weight: 700; color: var(--ink); display: block; } .hub-card-sub { font-size: 11px; color: var(--grey); display: flex; align-items: center; gap: 5px; margin-top: 2px; flex-wrap: wrap; } .hub-card-badges{ display: flex; align-items: center; gap: 4px; margin-left: auto; } .hub-pinned-badge { font-size: 12px; } .hub-card-body { padding: 8px 16px 12px; } .hub-post-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 6px; line-height: 1.35; } .hub-post-excerpt { font-size: 13px; color: var(--grey); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hub-post-image { width: 100%; max-height: 300px; object-fit: cover; display: block; margin-top: 8px; } .hub-card-footer { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--border); padding: 6px 10px; } .hub-action-btn { font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 8px; border: none; background: transparent; color: var(--grey); cursor: pointer; transition: background .12s, color .12s; display: flex; align-items: center; gap: 4px; white-space: nowrap; } .hub-action-btn:hover { background: var(--grey-lt); color: var(--ink); } .hub-react-btn.reacted { color: #e05; background: rgba(220,0,85,0.07); } .hub-vote-btn.voted { color: var(--teal); background: var(--teal-lt); } .hub-action-sep { flex: 1; } .hub-vacancy-header { background: linear-gradient(135deg, #071110 0%, #122E2B 100%); padding: 10px 16px 8px; display: flex; align-items: center; justify-content: space-between; } .hub-vacancy-label { font-size: 11px; font-weight: 700; color: var(--teal-mid); letter-spacing: .8px; text-transform: uppercase; } .hub-new-pill { background: linear-gradient(135deg, #F26522, #D4541A); color: #fff; font-size: 9px; font-weight: 800; padding: 3px 9px; border-radius: 20px; letter-spacing: .5px; } /* ── SIDEBAR ─────────────────────────────────────────────────────────────── */ .hub-sidebar { display: flex; flex-direction: column; gap: 12px; } .hub-sb-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .hub-sb-head { padding: 11px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .hub-sb-head-icon { width: 26px; height: 26px; border-radius: 7px; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } .hub-sb-head-title { font-size: 12px; font-weight: 700; color: var(--ink); flex: 1; min-width: 0; } .hub-sb-body { padding: 10px 14px 12px; } .hub-sb-manage-btn { font-size: 11px; font-weight: 600; color: var(--teal); background: var(--teal-lt); border: none; padding: 3px 9px; border-radius: 6px; cursor: pointer; flex-shrink: 0; transition: all .12s; white-space: nowrap; } .hub-sb-manage-btn:hover { background: var(--teal); color: #fff; } .hub-sb-empty { font-size: 12px; color: var(--grey); text-align: center; padding: 6px 0 2px; } /* ── Sidebar mini-calendar ──────────────────────────────────────────────── */ .sb-cal-wrap { padding: 10px 12px 6px; } .sb-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .sb-cal-title { font-size: 12px; font-weight: 700; color: var(--ink); } .sb-cal-btn { background: none; border: none; cursor: pointer; color: var(--grey); font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 5px; transition: background .12s; } .sb-cal-btn:hover { background: var(--grey-lt); color: var(--ink); } .sb-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .sb-cal-hdr { font-size: 10px; font-weight: 700; color: var(--grey); text-align: center; padding: 2px 0; } .sb-cal-hdr.weekend { color: #6366f1; } .sb-cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 11px; border-radius: 6px; cursor: default; position: relative; color: var(--ink); transition: background .1s; } .sb-cal-day.empty { background: none; } .sb-cal-day.weekend { color: #6366f1; background: rgba(99,102,241,0.06); } .sb-cal-day.day-off { background: rgba(26,138,122,0.14); color: var(--teal-d); font-weight: 700; border-radius: 6px; } .sb-cal-day.day-off.weekend { background: rgba(26,138,122,0.2); } .sb-cal-day.today { background: var(--teal) !important; color: #fff !important; font-weight: 800; border-radius: 50%; } .sb-cal-day.day-off:not(.today)::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--teal); } .sb-cal-day.day-off.admin-edit:hover { cursor: pointer; outline: 2px solid var(--teal); outline-offset: -1px; } .sb-cal-divider { border: none; border-top: 1px solid var(--border); margin: 8px 0 0; } .sb-upcoming-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--grey); padding: 6px 12px 4px; } /* ── Hub panels — centered modal (same pattern as np-modal-card) ── */ .hub-panel-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 20px; } .hub-panel-overlay.open { display: flex; } .hub-panel-box { width: 100%; max-width: 520px; max-height: 88vh; background: var(--card-bg); border-radius: 16px; box-shadow: 0 12px 56px rgba(0,0,0,0.26); display: flex; flex-direction: column; overflow: hidden; animation: npSlideIn .18s ease; } .hub-panel-body { overflow-y: auto; padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 14px; } /* ── Días libres panel — rediseño ──────────────────────────────────────── */ .do-panel { width: 100%; max-width: 460px; max-height: 88vh; background: var(--card-bg); border-radius: 18px; box-shadow: 0 16px 56px rgba(0,0,0,0.22); display: flex; flex-direction: column; overflow: hidden; animation: npSlideIn .16s ease; } .do-panel-header { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .do-panel-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; background: rgba(22,163,74,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .do-panel-title { flex: 1; min-width: 0; } .do-panel-name { font-size: 15px; font-weight: 700; color: var(--ink); } .do-panel-sub { font-size: 12px; color: var(--grey); margin-top: 1px; } .do-panel-year-nav { display: flex; gap: 4px; } .do-year-btn { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; color: var(--grey); font-size: 14px; display: flex; align-items: center; justify-content: center; transition: all .12s; } .do-year-btn:hover { background: var(--grey-lt); color: var(--ink); } /* Add form */ .do-add-section { padding: 14px 18px 12px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; } .do-add-row { display: flex; gap: 8px; align-items: center; } .do-input { height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; font-size: 13px; background: var(--card-bg); color: var(--ink); outline: none; transition: border .12s; } .do-input:focus { border-color: var(--teal); } .do-input-label { flex: 1; } .do-add-btn { height: 36px; padding: 0 14px; border-radius: 8px; border: none; background: var(--teal); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s; flex-shrink: 0; } .do-add-btn:hover { background: var(--teal-d); } .do-import-btn { height: 34px; width: 100%; border: 1px dashed var(--border); border-radius: 8px; background: none; color: var(--grey); font-size: 12px; font-weight: 500; cursor: pointer; transition: all .12s; display: flex; align-items: center; justify-content: center; gap: 6px; } .do-import-btn:hover { border-color: var(--teal); color: var(--teal); background: rgba(26,138,122,0.04); } /* List */ .do-list-wrap { overflow-y: auto; flex: 1; } .do-list { display: flex; flex-direction: column; padding: 8px 0; } .do-item { display: flex; align-items: center; gap: 12px; padding: 10px 18px; transition: background .1s; } .do-item:hover { background: var(--grey-lt); } .do-item-date { width: 46px; text-align: center; flex-shrink: 0; } .do-item-day { font-size: 18px; font-weight: 800; color: var(--teal-d); line-height: 1; } .do-item-mon { font-size: 10px; font-weight: 600; color: var(--grey); text-transform: uppercase; letter-spacing: .05em; } .do-item-info { flex: 1; min-width: 0; } .do-item-label { font-size: 13px; font-weight: 600; color: var(--ink); } .do-item-dow { font-size: 11px; color: var(--grey); margin-top: 1px; } .do-item-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .12s; } .do-item:hover .do-item-actions { opacity: 1; } .do-item-btn { width: 28px; height: 28px; border: none; border-radius: 7px; background: none; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: background .1s; } .do-item-btn:hover { background: var(--grey-lt); } .do-item-btn.del:hover { background: rgba(239,68,68,.08); } .do-month-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--grey); padding: 10px 18px 4px; } [data-theme="dark"] .do-panel { background: var(--card-bg); } [data-theme="dark"] .do-input { background: var(--grey-lt); } /* Panel shared field styles */ .hp-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--grey); margin-bottom: -4px; } .hp-field { display: flex; flex-direction: column; gap: 5px; } .hp-field label { font-size: 12px; font-weight: 600; color: var(--grey); } .hp-field input, .hp-field select { width: 100%; } .hp-field-row { display: flex; gap: 10px; } .hp-textarea { width: 100%; resize: none; padding: 10px 12px; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; background: var(--input-bg); color: var(--ink); transition: border-color .12s; } .hp-textarea:focus { outline: none; border-color: var(--teal); } .hp-btn-primary { width: 100%; padding: 10px; border-radius: 8px; border: none; background: var(--teal); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity .15s; } .hp-btn-primary:hover { opacity: .87; } .hp-btn-ghost { width: 100%; padding: 9px; border-radius: 8px; border: 1px solid var(--border); background: none; color: var(--grey); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .12s; } .hp-btn-ghost:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-lt); } .hub-panel-title { font-size: 16px; font-weight: 700; color: var(--ink); display: flex; align-items: center; justify-content: space-between; } .hub-panel-close { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--grey); } /* Days off calendar grid */ .dayoff-form { display: flex; flex-direction: column; gap: 10px; } .dayoff-form label { font-size: 12px; font-weight: 600; color: var(--grey); } .dayoff-form input[type="date"] { width: 100%; } .dayoff-form input[type="text"] { width: 100%; } .dayoff-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .dayoff-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--teal-lt); border-radius: 8px; font-size: 12px; color: var(--ink); } .dayoff-row-date { font-weight: 700; color: var(--teal); min-width: 80px; } .dayoff-row-label { flex: 1; } .dayoff-del-btn { background: none; border: none; cursor: pointer; color: var(--red); font-size: 14px; flex-shrink: 0; } /* Multi-date year picker */ .year-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .year-nav-btn { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; cursor: pointer; font-size: 13px; color: var(--ink); } .year-label { font-size: 14px; font-weight: 700; color: var(--ink); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .cal-weekday { font-size: 9px; font-weight: 700; text-align: center; color: var(--grey); padding: 3px 0; text-transform: uppercase; } .cal-day { aspect-ratio: 1; border-radius: 6px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; transition: all .12s; background: var(--card-bg); color: var(--ink); } .cal-day:hover { border-color: var(--teal); color: var(--teal); } .cal-day.selected { background: var(--teal); border-color: var(--teal); color: #fff; } .cal-day.is-off { background: rgba(26,138,122,0.18); border-color: var(--teal); color: var(--teal); font-weight: 700; } .cal-day.empty { background: none; border: none; cursor: default; } .cal-month-title { font-size: 12px; font-weight: 700; color: var(--ink); text-align: center; grid-column: 1 / -1; margin: 8px 0 4px; } .cal-year-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 16px; } .cal-month { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px; } .cal-day.cal-off { background: var(--teal); color: #fff; font-weight: 700; border-radius: 50%; cursor: default; } .cal-day.cal-today { outline: 2px solid var(--teal); border-radius: 50%; font-weight: 700; } .cal-day.cal-off.cal-today { outline-color: var(--gold); } /* Days-off list items */ .dayoff-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; } .dayoff-dot { width: 8px; height: 8px; border-radius: 50%; background: #16A34A; flex-shrink: 0; } .dayoff-item-info { flex: 1; } .dayoff-item-label { font-size: 13px; font-weight: 500; color: var(--ink); } .dayoff-item-date { font-size: 11px; color: var(--grey); margin-top: 1px; } .dayoff-del-btn { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--grey); padding: 2px 4px; border-radius: 4px; flex-shrink: 0; } .dayoff-del-btn:hover { color: var(--red); background: rgba(239,68,68,.08); } .dayoff-edit-btn { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--grey); padding: 2px 4px; border-radius: 4px; flex-shrink: 0; } .dayoff-edit-btn:hover { background: rgba(99,102,241,.10); } /* Editable day in calendar */ .cal-day.cal-off.cal-off-editable { cursor: pointer; } .cal-day.cal-off.cal-off-editable:hover { filter: brightness(1.15); box-shadow: 0 0 0 2px var(--teal); } /* Ideas panel */ .idea-form { display: flex; flex-direction: column; gap: 10px; } .ideas-panel-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .idea-panel-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; } .idea-panel-row:hover { border-color: var(--teal); } .idea-panel-vote { display: flex; flex-direction: column; align-items: center; gap: 2px; } .idea-panel-vote-btn { background: none; border: 1px solid var(--border); border-radius: 4px; width: 22px; height: 18px; font-size: 10px; cursor: pointer; color: var(--grey); transition: all .12s; } .idea-panel-vote-btn:hover, .idea-panel-vote-btn.voted { border-color: var(--teal); color: var(--teal); background: var(--teal-lt); } .idea-panel-count { font-size: 11px; font-weight: 700; color: var(--grey); } .idea-panel-title { font-size: 13px; font-weight: 500; color: var(--ink); flex: 1; } /* Kudos panel */ .kudos-form { display: flex; flex-direction: column; gap: 10px; } .kudos-panel-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .kudos-panel-row { display: flex; gap: 10px; padding: 10px 12px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; } .kudos-emoji { font-size: 20px; } .kudos-panel-txt { font-size: 12px; color: var(--ink); flex: 1; line-height: 1.4; } .kudos-panel-name { font-weight: 700; color: var(--teal); } /* ── IMAGE DROPZONE (New post modal) ─────────────────────────────────────── */ .np-image-dropzone { border: 2px dashed var(--border); border-radius: 10px; padding: 20px 16px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; background: var(--input-bg); color: var(--grey); font-size: 13px; user-select: none; } .np-image-dropzone:hover { border-color: var(--teal); background: var(--teal-lt); color: var(--teal); } .np-image-dropzone .np-drop-icon { font-size: 24px; margin-bottom: 6px; } .np-image-dropzone .np-drop-hint { font-size: 11px; margin-top: 4px; opacity: .7; } /* ── HUB POST CARD — Slack message style ──────────────────────────────── */ .hub-fb-card { background: transparent; border: none; border-radius: 0; padding: 8px 14px 6px; margin-bottom: 0; position: relative; transition: background .1s; border-left: 3px solid transparent; } .hub-fb-card:hover { background: rgba(26,138,122,0.04); } .hub-fb-card + .hub-fb-card { border-top: 1px solid var(--border); } [data-theme="dark"] .hub-fb-card:hover { background: rgba(42,173,160,0.05); } .hub-fb-card.hub-post-pinned { border-left-color: var(--teal); background: rgba(26,138,122,0.04); } [data-theme="dark"] .hub-fb-card.hub-post-pinned { background: rgba(26,138,122,0.07); } /* ── Category left accent ── */ .hub-fb-card.cat-kudos { border-left-color: #f59e0b; } .hub-fb-card.cat-kudos .hub-fb-av { background: rgba(234,179,8,0.15); color: #a16207; } [data-theme="dark"] .hub-fb-card.cat-kudos .hub-fb-av { color: #fde047; } .hub-fb-card.cat-dias-libres { border-left-color: #14b8a6; } .hub-fb-card.cat-dias-libres .hub-fb-av { background: rgba(20,184,166,0.14); color: #0f766e; } [data-theme="dark"] .hub-fb-card.cat-dias-libres .hub-fb-av { color: #2dd4bf; } .hub-fb-card.cat-anuncios { border-left-color: #818cf8; } .hub-fb-card.cat-anuncios .hub-fb-av { background: rgba(129,140,248,0.14); color: #4338ca; } [data-theme="dark"] .hub-fb-card.cat-anuncios .hub-fb-av { color: #a5b4fc; } /* Author row */ .hub-fb-top { display: flex; align-items: flex-start; gap: 10px; position: relative; } .hub-fb-av { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; background: rgba(26,138,122,0.12); color: var(--teal-d); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; margin-top: 1px; } [data-theme="dark"] .hub-fb-av { color: var(--teal); background: rgba(42,173,160,0.15); } .hub-fb-meta { flex: 1; min-width: 0; line-height: 1; } .hub-fb-author { font-size: 13px; font-weight: 700; color: var(--ink); } .hub-fb-author .cat-inline { font-size: 11px; font-weight: 500; color: var(--grey); } .hub-fb-sub { display: none; } .hub-cat-chip { display: none; } .hub-fb-time { font-size: 11px; color: var(--grey); margin-top: 1px; display: block; } /* 3-dot menu */ .hub-fb-menu-btn { background: none; border: none; cursor: pointer; padding: 4px 6px; border-radius: 6px; color: var(--grey); font-size: 18px; line-height: 1; transition: background .12s; flex-shrink: 0; margin-top: -2px; } .hub-fb-menu-btn:hover { background: var(--grey-lt); } .hub-fb-dropdown { position: absolute; top: 30px; right: 0; z-index: 100; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,0.13); display: none; flex-direction: column; min-width: 148px; overflow: hidden; } .hub-fb-dropdown.open { display: flex; } .hub-fb-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; border: none; background: none; text-align: left; width: 100%; transition: background .1s; } .hub-fb-dropdown-item:hover { background: var(--grey-lt); } .hub-fb-dropdown-item.danger { color: var(--red); } .hub-fb-dropdown-item.danger:hover { background: rgba(239,68,68,.07); } /* Body */ .hub-fb-body { margin-top: 8px; cursor: pointer; } .hub-fb-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; line-height: 1.35; } .hub-fb-text { font-size: 13px; color: var(--ink); line-height: 1.6; white-space: pre-wrap; word-break: break-word; } .hub-fb-text.collapsed { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hub-fb-readmore { background: none; border: none; cursor: pointer; color: var(--teal); font-size: 12px; font-weight: 600; padding: 2px 0; margin-top: 3px; display: inline-block; } .hub-fb-readmore:hover { text-decoration: underline; } /* Image — con borde y border-radius, margen respecto al texto */ .hub-fb-image-wrap { margin-top: 10px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); } .hub-fb-image { width: 100%; max-height: 400px; object-fit: contain; display: block; cursor: zoom-in; } /* Footer */ .hub-fb-footer { display: flex; align-items: center; gap: 16px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); } .hub-fb-action { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 4px 0; border: none; background: transparent; color: var(--grey); cursor: pointer; transition: color .12s; white-space: nowrap; } .hub-fb-action:hover { color: var(--teal); } .hub-fb-action.reacted { color: #e05; } .hub-fb-action.voted { color: var(--teal); } .hub-fb-action-sep { flex: 1; } [data-theme="dark"] .hub-fb-dropdown { background: var(--card-bg); border-color: var(--border); } [data-theme="dark"] .hub-topbar { background: var(--card-bg); border-color: var(--border); } /* ── POST IMAGE LIGHTBOX ─────────────────────────────────────────────────── */ .pim-card { display: flex; width: 90vw; max-width: 1000px; max-height: 88vh; background: var(--card-bg); border-radius: 16px; overflow: hidden; box-shadow: 0 16px 64px rgba(0,0,0,0.35); animation: npSlideIn .18s ease; position: relative; } .pim-close { position: absolute; top: 12px; right: 14px; z-index: 10; } .pim-img-col { flex: 0 0 62%; background: #000; display: flex; align-items: center; justify-content: center; max-height: 88vh; overflow: hidden; } .pim-img { width: 100%; height: 100%; object-fit: contain; max-height: 88vh; display: block; } .pim-text-col { flex: 1; padding: 24px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; border-left: 1px solid var(--border); } .pim-author-row { display: flex; align-items: center; gap: 10px; } .pim-av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--teal), #0D5C52); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; } .pim-author { font-size: 14px; font-weight: 700; color: var(--ink); } .pim-time { font-size: 11px; color: var(--grey); margin-top: 2px; } .pim-title { font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.3; } .pim-content { font-size: 14px; color: var(--ink); line-height: 1.7; white-space: pre-wrap; } [data-theme="dark"] .pim-card { background: var(--card-bg); } [data-theme="dark"] .pim-text-col { border-left-color: var(--border); } @media (max-width: 720px) { .pim-card { flex-direction: column; } .pim-img-col { flex: 0 0 50vh; } } /* ── HUB COMPOSER BAR ────────────────────────────────────────────────────── */ .hub-composer-bar { background: var(--card-bg); border: 1.5px solid var(--teal-mid); border-radius: 14px; padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; margin-bottom: 10px; transition: border-color .15s, box-shadow .15s; box-shadow: 0 2px 12px rgba(26,138,122,0.08); } .hub-composer-bar:hover { border-color: var(--teal); box-shadow: 0 4px 20px rgba(26,138,122,0.13); } /* Top row: avatar + fake input */ .hub-composer-top { display: flex; align-items: center; gap: 10px; } .hub-composer-av { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--teal), #0D5C52); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; } .hub-composer-input { flex: 1; font-size: 13px; color: var(--grey); background: rgba(26,138,122,0.05); border: 1px solid rgba(26,138,122,0.18); border-radius: 22px; padding: 9px 18px; pointer-events: none; transition: border-color .15s; font-style: italic; } .hub-composer-bar:hover .hub-composer-input { border-color: rgba(26,138,122,0.4); background: rgba(26,138,122,0.08); } /* Bottom row: action buttons separated by a divider */ .hub-composer-actions { display: flex; gap: 0; border-top: 1px solid var(--border); padding-top: 8px; margin: 0 2px; } .hub-composer-action-btn { display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 8px; color: var(--grey); transition: background .12s, color .12s; white-space: nowrap; flex: 1; justify-content: center; } .hub-composer-action-btn + .hub-composer-action-btn { border-left: 1px solid var(--border); } .hub-composer-action-btn:hover { background: rgba(26,138,122,0.07); color: var(--teal-d); } .hub-composer-action-btn svg { flex-shrink: 0; stroke: currentColor; } [data-theme="dark"] .hub-composer-bar { border-color: rgba(42,173,160,0.4); } [data-theme="dark"] .hub-composer-input { background: rgba(42,173,160,0.07); border-color: rgba(42,173,160,0.2); } /* ── NEW POST MODAL — polished Facebook-style ────────────────────────────── */ .np-modal-card { background: var(--card-bg); border-radius: 16px; width: 100%; max-width: 560px; max-height: 92vh; box-shadow: 0 8px 48px rgba(0,0,0,0.22); display: flex; flex-direction: column; overflow: hidden; animation: npSlideIn .18s ease; } @keyframes npSlideIn { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .np-modal-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px 18px 14px; border-bottom: 1px solid var(--border); } .np-modal-title { font-size: 16px; font-weight: 800; color: var(--ink); text-align: center; } .np-modal-close { background: var(--grey-lt); border: none; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ink); justify-self: end; transition: background .12s; } .np-modal-close:hover { background: var(--border); } /* Author row */ .np-author-row { display: flex; align-items: center; gap: 11px; padding: 14px 18px 4px; } .np-author-av { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--teal), #0D5C52); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; } .np-author-info { display: flex; flex-direction: column; gap: 4px; } .np-author-name { font-size: 13px; font-weight: 700; color: var(--ink); } .np-category-sel { font-size: 11px; font-weight: 600; color: var(--teal); background: var(--teal-lt); border: 1px solid rgba(26,138,122,0.2); border-radius: 6px; padding: 3px 8px; cursor: pointer; appearance: none; -webkit-appearance: none; } /* Body */ .np-modal-body { padding: 10px 18px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; flex: 1; } .np-title-input { width: 100%; border: none; outline: none; background: transparent; font-size: 20px; font-weight: 700; color: var(--ink); font-family: inherit; padding: 0; line-height: 1.3; } .np-title-input::placeholder { color: var(--grey); font-weight: 400; } .np-content-area { width: 100%; resize: none; border: none; outline: none; background: transparent; font-size: 15px; color: var(--ink); font-family: inherit; line-height: 1.6; padding: 0; min-height: 80px; } .np-content-area::placeholder { color: var(--grey); } .np-pin-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--grey); font-weight: 500; } .np-pin-label input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--teal); } /* Footer */ .np-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); } .np-cancel-btn { font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 8px; border: 1px solid var(--border); background: none; color: var(--grey); cursor: pointer; transition: all .12s; } .np-cancel-btn:hover { background: var(--grey-lt); color: var(--ink); } .np-submit-btn { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; padding: 9px 22px; border-radius: 8px; border: none; background: var(--teal); color: #fff; cursor: pointer; transition: opacity .15s; } .np-submit-btn:hover { opacity: .88; } /* Dark mode for new modal */ [data-theme="dark"] .np-modal-card { background: var(--card-bg); } [data-theme="dark"] .np-title-input, [data-theme="dark"] .np-content-area { color: var(--ink); } [data-theme="dark"] .hub-composer-bar { background: var(--card-bg); border-color: rgba(42,173,160,0.4); } [data-theme="dark"] .hub-composer-input { background: rgba(42,173,160,0.07); border-color: rgba(42,173,160,0.2); } /* ── SOLICITUDES / LEAVE REQUESTS ────────────────────────────────────────── */ /* Nav badge */ .leave-badge { display: inline-flex; align-items: center; justify-content: center; background: #e53e3e; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; margin-left: 4px; } /* Vacation balance bar */ .leave-balance-bar { display: grid; grid-template-columns: repeat(3,1fr) auto; gap: 12px; align-items: center; margin-bottom: 4px; } .leave-bal-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; text-align: center; } .leave-bal-val { font-size: 28px; font-weight: 700; color: var(--teal); line-height: 1; margin-bottom: 4px; } .leave-bal-used .leave-bal-val { color: #f59e0b; } .leave-bal-avail .leave-bal-val { color: #10b981; } .leave-bal-label { font-size: 12px; color: var(--grey); } .leave-bal-info { font-size: 12px; color: var(--grey); padding: 8px 12px; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); line-height: 1.5; } /* Request modal helpers */ .leave-notice-box { background: #fffbeb; border: 1px solid #f59e0b; border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #92400e; } .leave-days-chip { display: inline-block; background: rgba(26,138,122,.1); border: 1px solid var(--teal); color: var(--teal-d); border-radius: 20px; padding: 4px 14px; font-size: 13px; font-weight: 600; } .leave-upload-area { display: flex; align-items: center; gap: 10px; border: 1.5px dashed var(--teal); border-radius: 10px; padding: 14px 16px; cursor: pointer; font-size: 13px; color: var(--grey); background: rgba(26,138,122,.03); transition: background .15s; } .leave-upload-area:hover { background: rgba(26,138,122,.07); } .leave-doc-link { display: inline-flex; align-items: center; gap: 6px; color: var(--teal); font-size: 13px; font-weight: 500; text-decoration: none; padding: 6px 12px; border: 1px solid var(--teal); border-radius: 8px; } .leave-doc-link:hover { background: rgba(26,138,122,.07); } /* Admin table highlights */ .leave-row-pending td { background: rgba(245,158,11,.04); } /* Review detail rows */ .leave-detail-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border); gap: 12px; font-size: 13px; } .leave-detail-row:last-child { border-bottom: none; } .leave-detail-row > span:first-child { color: var(--grey); flex-shrink: 0; } /* Danger button */ .btn-danger { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; border-radius: 10px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; } .btn-danger:hover { background: #fecaca; } /* ── TEAM CALENDAR ────────────────────────────────────────────────────────── */ .leave-cal-nav { display: flex; gap: 6px; margin-bottom: 10px; } .leave-calendar { overflow-x: auto; } .leave-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(80px,1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; min-width: 560px; } .leave-cal-dh { background: var(--card-bg); padding: 8px 4px; font-size: 11px; font-weight: 700; text-align: center; color: var(--grey); text-transform: uppercase; letter-spacing: .04em; } .leave-cal-cell { background: var(--card-bg); padding: 6px 6px 8px; min-height: 72px; position: relative; } .leave-cal-empty { background: var(--bg); } .leave-cal-weekend { background: rgba(0,0,0,.025); } .leave-cal-today { outline: 2px solid var(--teal); outline-offset: -2px; } .leave-cal-day-num { font-size: 12px; font-weight: 600; color: var(--grey); display: block; margin-bottom: 4px; } .leave-cal-today .leave-cal-day-num { color: var(--teal); } .leave-cal-users { display: flex; flex-direction: column; gap: 2px; } .leave-cal-user { font-size: 10px; font-weight: 600; color: #fff; border-radius: 4px; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme="dark"] .leave-notice-box { background: #2d2000; border-color: #92400e; color: #fde68a; } [data-theme="dark"] .leave-bal-card { background: var(--card-bg); } [data-theme="dark"] .leave-cal-cell { background: var(--card-bg); } [data-theme="dark"] .leave-cal-empty { background: var(--bg); } [data-theme="dark"] .leave-cal-weekend{ background: rgba(255,255,255,.03); } [data-theme="dark"] .btn-danger { background: #3b0f0f; color: #fca5a5; border-color: #7f1d1d; } /* ── LEAVE REQUEST MODAL (rediseño) ──────────────────────────────────────── */ .leave-modal-box { background: var(--white); border-radius: 20px; width: 100%; max-width: 580px; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,.18); } .leave-modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 28px 28px 0; gap: 12px; } .leave-modal-title { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 4px; } .leave-modal-sub { font-size: 13px; color: var(--grey); line-height: 1.4; } .leave-modal-close { background: var(--bg); border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 14px; color: var(--grey); flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .leave-modal-close:hover { background: #fee2e2; color: #b91c1c; } .leave-modal-body { padding: 20px 28px; display: flex; flex-direction: column; gap: 22px; flex: 1; } .leave-modal-footer { padding: 16px 28px 24px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--border); } /* Steps */ .leave-step-label { font-size: 11px; font-weight: 700; color: var(--teal-d); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; } /* Type cards grid */ .leave-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .leave-type-card { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--bg); border: 1.5px solid var(--border); border-radius: 14px; padding: 14px 8px; cursor: pointer; text-align: center; transition: border-color .15s, background .15s, transform .1s; } .leave-type-card:hover { border-color: var(--teal); background: rgba(26,138,122,.04); transform: translateY(-1px); } .leave-type-card.selected { border-color: var(--teal); background: rgba(26,138,122,.08); box-shadow: 0 0 0 3px rgba(26,138,122,.15); } .leave-type-icon { font-size: 26px; line-height: 1; } .leave-type-name { font-size: 13px; font-weight: 600; color: var(--ink); } .leave-type-desc { font-size: 11px; color: var(--grey); line-height: 1.3; } /* Dates row */ .leave-dates-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .leave-date-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 130px; } .leave-date-field label { font-size: 11px; font-weight: 600; color: var(--grey); text-transform: uppercase; letter-spacing: .04em; } .leave-date-field input[type="date"] { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 14px; color: var(--ink); background: var(--bg); font-family: inherit; outline: none; width: 100%; } .leave-date-field input[type="date"]:focus { border-color: var(--teal); background: #fff; } .leave-date-sep { font-size: 18px; color: var(--grey); padding-top: 20px; } .leave-days-bubble { background: var(--teal); color: #fff; font-size: 13px; font-weight: 700; border-radius: 20px; padding: 8px 16px; white-space: nowrap; margin-top: 20px; flex-shrink: 0; } /* Detail fields */ .leave-detail-fields { display: flex; flex-direction: column; gap: 14px; } .leave-detail-field label, .leave-doc-req-label { display: block; font-size: 11px; font-weight: 600; color: var(--grey); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; } .leave-detail-field textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--ink); background: var(--bg); font-family: inherit; resize: vertical; outline: none; box-sizing: border-box; } .leave-detail-field textarea:focus { border-color: var(--teal); background: #fff; } /* Dark mode overrides */ [data-theme="dark"] .leave-modal-box { background: var(--card-bg); } [data-theme="dark"] .leave-type-card { background: var(--bg); border-color: var(--border); } [data-theme="dark"] .leave-type-card.selected { background: rgba(26,138,122,.15); } [data-theme="dark"] .leave-date-field input[type="date"] { background: var(--bg); border-color: var(--border); color: var(--ink); } [data-theme="dark"] .leave-detail-field textarea { background: var(--bg); border-color: var(--border); color: var(--ink); } /* ── DASHBOARD LEAVE ALERT ───────────────────────────────────────────────── */ .dash-leave-alert { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border: 1.5px solid #f59e0b; border-radius: 14px; padding: 14px 20px; margin-bottom: 16px; cursor: pointer; transition: box-shadow .15s, transform .1s; } .dash-leave-alert:hover { box-shadow: 0 4px 16px rgba(245,158,11,.2); transform: translateY(-1px); } .dash-leave-icon { font-size: 26px; flex-shrink: 0; } .dash-leave-body { flex: 1; } .dash-leave-title { font-size: 14px; font-weight: 700; color: #92400e; } .dash-leave-sub { font-size: 12px; color: #b45309; margin-top: 2px; } .dash-leave-count-bubble { background: #f59e0b; color: #fff; font-size: 20px; font-weight: 800; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dash-leave-cta { font-size: 12px; font-weight: 700; color: #92400e; white-space: nowrap; flex-shrink: 0; } [data-theme="dark"] .dash-leave-alert { background: #2d1a00; border-color: #92400e; } [data-theme="dark"] .dash-leave-title { color: #fde68a; } [data-theme="dark"] .dash-leave-sub { color: #fcd34d; } [data-theme="dark"] .dash-leave-cta { color: #fde68a; } /* ── LEAVE TABLE ROW COLORS ──────────────────────────────────────────────── */ .leave-row-approved td { background: rgba(16,185,129,.06); } .leave-row-rejected td { background: rgba(229,62,62,.05); } .leave-row-approved td:first-child { border-left: 3px solid #10b981; } .leave-row-rejected td:first-child { border-left: 3px solid #e53e3e; } /* ── LEAVE STATUS BADGES (override generic ones) ──────────────────────────── */ .status-badge.status-pending { background:#fef3c7;color:#92400e;border:1px solid #f59e0b; } .status-badge.status-active { background:#d1fae5;color:#065f46;border:1px solid #10b981; } .status-badge.status-cancelled{ background:#fee2e2;color:#991b1b;border:1px solid #e53e3e; } /* ── LEAVE REVIEW MODAL ──────────────────────────────────────────────────── */ .leave-review-box { background: var(--white); border-radius: 20px; width: 100%; max-width: 520px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,.2); } .leave-review-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 20px; gap: 14px; border-bottom: 1px solid var(--border); background: var(--bg); } .leave-review-header-left { display: flex; align-items: center; gap: 14px; } .leave-review-icon { font-size: 32px; line-height: 1; } .leave-review-title { font-size: 16px; font-weight: 700; color: var(--ink); } .leave-review-subtitle { font-size: 12px; color: var(--grey); margin-top: 3px; } .leave-review-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 0; } .lrd-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); gap: 12px; font-size: 13px; } .lrd-row:last-child { border-bottom: none; } .lrd-row > span:first-child { color: var(--grey); flex-shrink: 0; min-width: 110px; font-size: 12px; font-weight: 500; } .lrd-row > span:last-child, .lrd-row > strong:last-child { color: var(--ink); text-align: right; } .lrd-reason > span:last-child { font-size:12px; color:var(--grey); max-width:280px; text-align:right; } .lrd-prev-note > span:last-child { font-size:12px; color:var(--grey); font-style:italic; max-width:280px; text-align:right; } .lrd-status-pill { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; } .leave-review-footer { padding: 16px 24px 24px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; } .leave-review-note-wrap {} .leave-review-note-label { display: block; font-size: 12px; font-weight: 600; color: var(--grey); margin-bottom: 8px; } .leave-review-textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 13px; font-family: inherit; color: var(--ink); background: var(--bg); resize: none; outline: none; box-sizing: border-box; } .leave-review-textarea:focus { border-color: var(--teal); } .leave-review-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; } .lr-btn-approve { display: inline-flex; align-items: center; gap: 7px; background: #10b981; color: #fff; border: none; border-radius: 10px; padding: 10px 20px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s, transform .1s; } .lr-btn-approve:hover { background: #059669; transform: translateY(-1px); } .lr-btn-reject { display: inline-flex; align-items: center; gap: 7px; background: #e53e3e; color: #fff; border: none; border-radius: 10px; padding: 10px 20px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s, transform .1s; } .lr-btn-reject:hover { background: #c53030; transform: translateY(-1px); } /* ── CALENDAR ENTRIES (redesign) ─────────────────────────────────────────── */ .leave-cal-entry { display: flex; align-items: center; gap: 4px; border-radius: 6px; padding: 3px 6px; margin-bottom: 2px; font-size: 10px; overflow: hidden; } .leave-cal-avatar { width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: #fff; flex-shrink: 0; } .leave-cal-entry-name { font-weight: 600; font-size: 10px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .leave-cal-entry-icon { font-size: 10px; flex-shrink: 0; } .leave-cal-cell { min-height: 80px; } /* Dark mode */ [data-theme="dark"] .leave-review-box { background: var(--card-bg); } [data-theme="dark"] .leave-review-header { background: var(--bg); } [data-theme="dark"] .leave-review-textarea { background: var(--bg); border-color: var(--border); color: var(--ink); } [data-theme="dark"] .leave-row-approved td { background: rgba(16,185,129,.08); } [data-theme="dark"] .leave-row-rejected td { background: rgba(229,62,62,.08); } /* ══════════════════════════════════════════════════════════════════ PREMIUM TEAM CALENDAR ══════════════════════════════════════════════════════════════════ */ /* Outer card */ .leave-cal-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; } /* Card header */ .leave-cal-card-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; gap: 14px; border-bottom: 1px solid var(--border); background: var(--bg); } .leave-cal-card-left { display: flex; align-items: center; gap: 12px; } .leave-cal-card-icon { font-size: 26px; line-height: 1; } .leave-cal-card-title { font-size: 15px; font-weight: 700; color: var(--ink); } .leave-cal-card-sub { font-size: 12px; color: var(--grey); margin-top: 2px; } /* Month nav */ .leave-cal-card-nav { display: flex; align-items: center; gap: 8px; } .leave-cal-month-label { font-size: 14px; font-weight: 700; color: var(--ink); min-width: 140px; text-align: center; } .leave-cal-nav-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); color: var(--ink); font-size: 20px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .leave-cal-nav-btn:hover { background: var(--teal); color: #fff; border-color: var(--teal); } /* Legend */ .leave-cal-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 22px; border-bottom: 1px solid var(--border); background: var(--card-bg); } .leave-legend-item { display: flex; align-items: center; gap: 7px; } .leave-legend-dot { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: #fff; flex-shrink: 0; } .leave-legend-name { font-size: 12px; font-weight: 500; color: var(--ink); } /* Premium calendar grid */ .pcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; padding: 16px 6px 20px; background: var(--card-bg); } .pcal-dh { text-align: center; font-size: 11px; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: .06em; padding: 0 0 10px; } .pcal-cell { min-height: 116px; padding: 6px 1px 8px; position: relative; border-radius: 10px; transition: background .12s; } .pcal-cell:hover { background: rgba(26,138,122,.04); } .pcal-empty { pointer-events: none; } .pcal-weekend { background: rgba(0,0,0,.018); } .pcal-today { background: rgba(26,138,122,.07); box-shadow: inset 0 0 0 1.5px var(--teal); } .pcal-has-people { z-index: 1; } /* Day number */ .pcal-day-num { display: block; font-size: 12px; font-weight: 500; color: var(--grey); text-align: center; margin-bottom: 5px; line-height: 1; } .pcal-day-today { color: #fff; background: var(--teal); width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 5px; font-weight: 700; font-size: 11px; } /* Bars (range) */ .pcal-bars { display: flex; flex-direction: column; gap: 4px; } .pcal-bar { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 7px; overflow: hidden; cursor: default; box-shadow: 0 2px 8px rgba(0,0,0,.22); margin: 0 1px; } .pcal-bar-av { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 900; color: #fff; flex-shrink: 0; background: rgba(255,255,255,.28) !important; border: 1.5px solid rgba(255,255,255,.45); } .pcal-bar-name { font-size: 11px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; text-shadow: 0 1px 3px rgba(0,0,0,.35); letter-spacing: .01em; } .pcal-bar-icon { font-size: 10px; flex-shrink: 0; } /* Dark mode */ [data-theme="dark"] .leave-cal-card { background: var(--card-bg); border-color: var(--border); } [data-theme="dark"] .leave-cal-card-header { background: var(--bg); } [data-theme="dark"] .leave-cal-nav-btn { background: var(--card-bg); } [data-theme="dark"] .pcal-cell { background: transparent; } [data-theme="dark"] .pcal-weekend { background: rgba(255,255,255,.03); } [data-theme="dark"] .pcal-today { background: rgba(26,138,122,.12); } /* ── GLOBAL SEARCH ───────────────────────────────────────────────────────── */ .global-search-wrap { position: relative; flex: 1; max-width: 340px; margin: 0 12px; } .global-search-box { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 7px 12px; transition: border-color .15s, box-shadow .15s; } .global-search-wrap.focused .global-search-box { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(26,138,122,.12); } .global-search-icon { width: 15px; height: 15px; flex-shrink: 0; stroke: var(--grey); fill: none; stroke-width: 2; } .global-search-input { border: none; background: transparent; outline: none; font-size: 13px; color: var(--ink); width: 100%; font-family: inherit; } .global-search-input::placeholder { color: var(--grey); } .global-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.14); z-index: 9999; overflow: hidden; max-height: 360px; overflow-y: auto; } .gsr-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background .12s; } .gsr-item:hover { background: rgba(26,138,122,.06); } .gsr-item + .gsr-item { border-top: 1px solid var(--border); } .gsr-icon { font-size: 16px; flex-shrink: 0; } .gsr-body { display: flex; flex-direction: column; gap: 1px; overflow: hidden; } .gsr-label { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gsr-sub { font-size: 11px; color: var(--grey); } .gsr-empty { padding: 14px 16px; font-size: 13px; color: var(--grey); text-align: center; } /* ── PENDING TODAY WIDGET ────────────────────────────────────────────────── */ .dash-today-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 16px; overflow: hidden; } .dash-today-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--bg); } .dash-today-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); } .dash-today-icon { font-size: 18px; } .dash-today-count { background: #e53e3e; color: #fff; font-size: 11px; font-weight: 800; min-width: 22px; height: 22px; border-radius: 11px; padding: 0 6px; display: flex; align-items: center; justify-content: center; } .dash-today-body { padding: 4px 0; } .dash-today-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 18px; cursor: pointer; transition: background .12s; border-bottom: 1px solid var(--border); } .dash-today-item:last-child { border-bottom: none; } .dash-today-item:hover { background: rgba(26,138,122,.04); } .dash-today-item-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; } .dash-today-item-body { display: flex; flex-direction: column; gap: 2px; } .dash-today-item-title { font-size: 13px; font-weight: 600; color: var(--ink); } .dash-today-item-meta { font-size: 11px; color: var(--grey); } /* ── TIMESHEET EXPORT BUTTONS ────────────────────────────────────────────── */ /* (uses existing .btn-secondary) */ [data-theme="dark"] .global-search-box { background: var(--bg); border-color: var(--border); } [data-theme="dark"] .global-search-results { background: var(--card-bg); } [data-theme="dark"] .dash-today-card { background: var(--card-bg); } [data-theme="dark"] .dash-today-header { background: var(--bg); } /* ── VENTAS — ANNUAL KPI CARDS ───────────────────────────────────────────── */ .ventas-annual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; } .annual-kpi-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; } .annual-kpi-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .annual-kpi-icon { font-size: 28px; flex-shrink: 0; } .annual-kpi-label { font-size: 14px; font-weight: 700; color: var(--ink); } .annual-kpi-meta { font-size: 12px; color: var(--grey); margin-top: 2px; } .annual-kpi-numbers { margin-left: auto; font-size: 24px; font-weight: 800; white-space: nowrap; flex-shrink: 0; } .annual-kpi-numbers span { font-size: 14px; font-weight: 500; color: var(--grey); } .annual-kpi-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 6px; } .annual-kpi-fill { height: 100%; border-radius: 4px; transition: width .6s cubic-bezier(.4,0,.2,1); } .annual-kpi-pct { font-size: 12px; color: var(--grey); } /* ── VENTAS — chart target badge ─────────────────────────────────────────── */ .vchart-target-badge { display: inline-block; background: #fee2e2; color: #b91c1c; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 20px; margin-left: 6px; } /* ── PROSPECT PANEL — MRR input ──────────────────────────────────────────── */ .panel-input-inline { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 13px; color: var(--ink); background: var(--bg); font-family: inherit; width: 140px; outline: none; } /* ── AVANCE SEMANAL (producción) ─────────────────────────────────────────── */ .progress-row { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; } .progress-row-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .progress-project-name { font-size: 14px; font-weight: 600; color: var(--ink); } .progress-hours-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: #E0F2EF; color: #0D5C52; } .progress-slider-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .progress-slider { flex: 1; accent-color: #1A8A7A; height: 6px; cursor: pointer; } .progress-pct-display { font-size: 16px; font-weight: 700; color: #1A8A7A; min-width: 44px; text-align: right; } .progress-notes-input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--ink); background: var(--bg); font-family: inherit; outline: none; box-sizing: border-box; } .progress-notes-input:focus { border-color: #1A8A7A; } /* ── COHERENCIA HORAS vs AVANCE (admin) ──────────────────────────────────── */ .coherence-row { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; } .coherence-row-warn { border-left: 4px solid #9CA3AF; } .coherence-row-alert { border-left: 4px solid #f59e0b; background: #FFFBEB; } .coherence-row-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .coherence-project { font-size: 14px; font-weight: 600; color: var(--ink); flex: 1; } .coherence-hours { font-size: 12px; color: var(--grey); } .coherence-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; } .coherence-badge-green { background: #D1FAE5; color: #065F46; } .coherence-badge-yellow { background: #FEF3C7; color: #92400E; } .coherence-badge-grey { background: #F3F4F6; color: #6B7280; } .coherence-bar-wrap { position: relative; height: 8px; background: var(--border); border-radius: 4px; margin-bottom: 10px; overflow: hidden; } .coherence-bar { height: 100%; border-radius: 4px; transition: width .5s cubic-bezier(.4,0,.2,1); } .coherence-bar-label { position: absolute; right: 0; top: -18px; font-size: 11px; color: var(--grey); } .coherence-entries { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .coherence-entry { display: flex; align-items: baseline; gap: 8px; font-size: 12px; } .coherence-user { font-weight: 600; color: var(--ink); min-width: 120px; } .coherence-pct { font-weight: 700; color: #1A8A7A; min-width: 36px; } .coherence-note { color: var(--grey); font-style: italic; } .panel-input-inline:focus { border-color: var(--teal); } [data-theme="dark"] .annual-kpi-card { background: var(--card-bg); } [data-theme="dark"] .panel-input-inline { background: var(--bg); border-color: var(--border); color: var(--ink); }