/* KSP Workspace - Global Styles */ /* ============================================ KSP WORKSPACE - DESIGN TOKENS UNIFICADOS Version: 4.0.0 - Primary: Azul Océano Profundo ⚠️ REGLAS ESTRICTAS: 1. SOLO nomenclatura semántica descriptiva 2. PROHIBIDO números en nombres (--space-2, --gray-500) 3. PROHIBIDO duplicar valores hex 4. Cualquier adición requiere autorización explícita ============================================ */ :root { /* ========== COLORES PRINCIPALES ========== */ /* Primary - Azul Océano Profundo */ --primary: #1D6FA4; --primary-hover: #155D8A; --primary-light: #DBEAFE; --primary-dark: #0E4A70; /* Success - Green */ --success: #22C55E; --success-hover: #16A34A; --success-light: #DCFCE7; --success-dark: #15803D; /* Warning - Amber */ --warning: #F59E0B; --warning-hover: #D97706; --warning-light: #FEF3C7; --warning-dark: #B45309; /* Danger - Red */ --danger: #F43F5E; --danger-hover: #E11D48; --danger-light: #FFE4E6; --danger-dark: #BE123C; /* Info - Cyan */ --info: #06B6D4; --info-hover: #0891B2; --info-light: #CFFAFE; --info-dark: #0E7490; /* Secondary - Steel Blue (complementa el océano sin morado) */ --secondary: #0284C7; --secondary-hover: #0369A1; --secondary-light: #E0F2FE; --secondary-dark: #075985; /* Accent - Teal */ --accent: #14B8A6; --accent-hover: #0D9488; --accent-light: #CCFBF1; --accent-dark: #0F766E; /* ========== NEUTRALS (Grises) ========== */ --neutral-white: #FFFFFF; --neutral-lightest: #F8FAFC; --neutral-lighter: #F1F5F9; --neutral-light: #E2E8F0; --neutral-medium-light: #CBD5E1; --neutral-medium: #94A3B8; --neutral: #64748B; --neutral-medium-dark: #475569; --neutral-dark: #334155; --neutral-darker: #1E293B; --neutral-darkest: #0F172A; /* ========== PRIORIDADES (Kanban) ========== */ --priority-critical: var(--danger); --priority-critical-bg: var(--danger-light); --priority-critical-text: var(--danger-dark); --priority-high: var(--warning); --priority-high-bg: var(--warning-light); --priority-high-text: var(--warning-dark); --priority-medium: var(--primary); --priority-medium-bg: var(--primary-light); --priority-medium-text: var(--primary-dark); --priority-low: var(--neutral-medium); --priority-low-bg: var(--neutral-lighter); --priority-low-text: var(--neutral-medium-dark); /* ========== STATUS DE TAREAS (Kanban) ========== */ --status-backlog: var(--neutral-medium); --status-todo: var(--primary); --status-in-progress: var(--warning); --status-in-review: var(--secondary); --status-done: var(--accent); --status-cancelled: var(--danger); /* ========== TIPOS DE ÍTEMS (Projects) ========== */ --item-epic: var(--secondary); --item-feature: var(--primary); --item-story: var(--success); --item-task: var(--neutral-medium); --item-bug: var(--danger); --item-qa: var(--warning); --item-spike: var(--info); --item-chore: var(--neutral-medium-dark); /* ========== BACKGROUNDS ========== */ --bg-primary: var(--neutral-white); --bg-secondary: var(--neutral-lightest); --bg-tertiary: var(--neutral-lighter); --bg-sidebar: var(--neutral-darkest); --bg-sidebar-hover: rgba(255, 255, 255, 0.05); --bg-sidebar-active: rgba(29, 111, 164, 0.18); --bg-header: var(--neutral-white); --bg-card: var(--neutral-white); --bg-hover: var(--neutral-lightest); --bg-active: var(--primary-light); --bg-overlay: rgba(15, 23, 42, 0.5); /* ========== BORDERS ========== */ --border-color: var(--neutral-light); --border-sidebar: rgba(255, 255, 255, 0.1); --border-focus: var(--primary); --border-error: var(--danger); /* Border Radius */ --radius-small: 6px; --radius-medium: 8px; --radius-large: 12px; --radius-xlarge: 16px; --radius-full: 9999px; /* ========== TEXT COLORS ========== */ --text-primary: var(--neutral-darkest); --text-secondary: var(--neutral-medium-dark); --text-tertiary: var(--neutral-medium); --text-disabled: var(--neutral-medium-light); --text-inverse: var(--neutral-white); --text-link: var(--primary); --text-link-hover: var(--primary-hover); /* Sidebar Text */ --text-sidebar: var(--neutral-white); --text-sidebar-secondary: var(--neutral-medium); --text-sidebar-tertiary: var(--neutral-medium-light); /* ========== SHADOWS ========== */ --shadow-small: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-xlarge: 0 20px 25px -5px rgba(0, 0, 0, 0.1); --shadow-xxlarge: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --shadow-dropdown: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05); --shadow-modal: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.05); --shadow-card-hover: 0 1px 3px rgba(0,0,0,0.06); /* Primary Color Shadows (Océano Profundo) */ --shadow-primary: 0 10px 25px -5px rgba(29, 111, 164, 0.4), 0 8px 10px -6px rgba(29, 111, 164, 0.3); --shadow-primary-hover: 0 20px 35px -10px rgba(29, 111, 164, 0.5), 0 12px 15px -8px rgba(29, 111, 164, 0.4); /* ========== SPACING (Grid de 4px) ========== */ --space-xxsmall: 4px; --space-xsmall: 8px; --space-small: 12px; --space-medium: 16px; --space-large: 20px; --space-xlarge: 24px; --space-xxlarge: 32px; --space-huge: 40px; --space-xhuge: 48px; --space-xxhuge: 64px; --space-massive: 80px; /* ========== TYPOGRAPHY ========== */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace; /* Font Sizes */ --font-size-tiny: 11px; --font-size-small: 12px; --font-size-base: 14px; --font-size-medium: 15px; --font-size-large: 18px; --font-size-xlarge: 24px; --font-size-xxlarge: 30px; --font-size-huge: 36px; /* Font Weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Line Heights */ --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* ========== COMPONENT SIZES ========== */ --size-button-height: 36px; --size-input-height: 36px; --size-avatar-small: 24px; --size-avatar-medium: 32px; --size-avatar-large: 40px; --size-table-row: 48px; /* ========== LAYOUT ========== */ --layout-sidebar-width: 240px; --layout-sidebar-collapsed: 64px; --layout-header-height: 64px; --layout-content-max-width: 1400px; --layout-page-max-width: 1600px; /* ========== COMPONENT SPECIFIC ========== */ /* Page Headers */ --page-header-title-size: 32px; --page-header-description-size: var(--font-size-base); /* Badges */ --badge-padding-vertical-small: 2px; --badge-padding-horizontal-small: 6px; --badge-padding-vertical: 6px; --badge-padding-horizontal: 12px; --badge-padding-vertical-large: 10px; --badge-padding-horizontal-large: 20px; --badge-font-size-small: 10px; --badge-font-size: var(--font-size-small); --badge-font-size-large: var(--font-size-medium); --badge-radius: var(--radius-small); /* Badge Success (Active Status) */ --badge-success-bg: #D1FAE5; --badge-success-text: #065F46; /* Badge Warning (Prospect Status) */ --badge-warning-bg: #FEF3C7; --badge-warning-text: #92400E; /* Badge Default (Inactive Status) */ --badge-default-bg: var(--neutral-lighter); --badge-default-text: var(--neutral-medium); /* Badge Info */ --badge-info-bg: var(--info-light); --badge-info-text: var(--info-dark); /* Table */ --table-header-bg: var(--neutral-lightest); --table-header-text: var(--neutral-medium); --table-header-font-size: var(--font-size-tiny); --table-row-hover-bg: var(--neutral-lightest); --table-cell-padding-vertical: var(--space-medium); --table-cell-padding-horizontal: var(--space-xlarge); --table-header-padding-vertical: var(--space-small); /* Avatar */ --avatar-size-default: 40px; --avatar-font-size: var(--font-size-base); --avatar-bg: var(--primary); --avatar-text: var(--text-inverse); /* Action Buttons */ --action-button-size: 32px; --action-button-border: var(--border-color); --action-button-hover-bg: var(--neutral-lighter); --action-button-view-hover-bg: #EFF6FF; --action-button-view-hover-border: #1D6FA4; --action-button-edit-hover-bg: #F0FDF4; --action-button-edit-hover-border: var(--success); --action-button-delete-hover-bg: #FEF2F2; --action-button-delete-hover-border: var(--danger); /* Search Input */ --search-input-bg: var(--neutral-lightest); --search-input-border: var(--border-color); --search-input-focus-border: var(--neutral-medium-light); --search-input-padding-vertical: 14px; --search-input-padding-horizontal: 20px; --search-input-font-size: var(--font-size-medium); --search-input-radius: var(--radius-large); /* Filter Chips */ --chip-bg: var(--neutral-white); --chip-border: var(--border-color); --chip-text: var(--text-secondary); --chip-hover-text: var(--danger); --chip-padding-vertical: 4px; --chip-padding-horizontal: var(--space-small); --chip-font-size: 13px; /* Pagination */ --pagination-padding-vertical: var(--space-medium); --pagination-padding-horizontal: var(--space-xlarge); --pagination-font-size: 13px; --pagination-button-min-width: 85px; /* ========== Z-INDEX ========== */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1100; --z-modal-backdrop: 1200; --z-modal: 1300; --z-toast: 1400; --z-timer: 1500; /* ========== TRANSITIONS ========== */ --transition-fast: 150ms ease-in-out; --transition-base: 200ms ease-in-out; --transition-slow: 300ms ease-in-out; } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: var(--text-base); line-height: var(--line-height-normal); color: var(--text-primary); background-color: var(--bg-primary); overflow-x: hidden; } /* Custom Scrollbar Styling */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 10px; } ::-webkit-scrollbar-thumb { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius: 10px; border: 2px solid var(--bg-secondary); transition: background 0.2s ease; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); } ::-webkit-scrollbar-thumb:active { background: var(--primary-dark); } /* Firefox scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--primary) var(--bg-secondary); } #root { min-height: 100vh; width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; font-size: inherit; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; } ul, ol { list-style: none; padding: 0; margin: 0; } .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xsmall); padding: var(--space-xsmall) var(--space-medium); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: 1.5; border-radius: var(--radius-small); border: 1px solid transparent; cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; user-select: none; } .button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .button:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* ========== Variants ========== */ .button-primary { background-color: var(--primary); color: var(--text-inverse); border-color: var(--primary); } .button-primary:hover:not(:disabled) { background-color: var(--primary-dark); border-color: var(--primary-dark); } .button-secondary { background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border-color); } .button-secondary:hover:not(:disabled) { background-color: var(--bg-hover); border-color: var(--neutral-medium-light); } .button-danger { background-color: var(--danger); color: var(--text-inverse); border-color: var(--danger); } .button-danger:hover:not(:disabled) { background-color: var(--danger-dark); border-color: var(--danger-dark); } .button-ghost { background-color: transparent; color: var(--text-secondary); border-color: transparent; } .button-ghost:hover:not(:disabled) { background-color: var(--bg-hover); color: var(--text-primary); } .button-link { background-color: transparent; color: var(--text-link); border-color: transparent; padding: 0; } .button-link:hover:not(:disabled) { color: var(--text-link-hover); text-decoration: underline; } .button-outline { background-color: transparent; color: var(--primary); border-color: var(--primary); } .button-outline:hover:not(:disabled) { background-color: var(--primary); color: var(--text-inverse); } /* ========== Sizes ========== */ .button-sm { padding: var(--space-xxsmall) var(--space-small); font-size: var(--font-size-small); } .button-md { padding: var(--space-xsmall) var(--space-medium); font-size: var(--font-size-base); } .button-lg { padding: var(--space-small) var(--space-xlarge); font-size: var(--font-size-large); } /* ========== Full Width ========== */ .button-fullWidth { width: 100%; } /* ========== Loading State ========== */ .button-loading { position: relative; pointer-events: none; } .button-text-loading { opacity: 0.4; } .button-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; border-top-color: transparent; animation: button-spin 0.6s linear infinite; } .button-sm .button-spinner { width: 14px; height: 14px; border-width: 1.5px; } .button-lg .button-spinner { width: 18px; height: 18px; border-width: 2.5px; } /* Color variants for spinner */ .button-secondary .button-spinner, .button-ghost .button-spinner, .button-outline .button-spinner { border-color: var(--text-primary); border-top-color: transparent; } .button-link .button-spinner { border-color: var(--text-link); border-top-color: transparent; } @keyframes button-spin { to { transform: rotate(360deg); } } /* ========== Icon Only ========== */ .button-iconOnly { padding: var(--space-xsmall); } .button-iconOnly.sm { padding: var(--space-xxsmall); } .button-iconOnly.lg { padding: var(--space-small); } /* Input Component Styles */ .input-container { display: flex; flex-direction: column; gap: var(--space-small); } .input-full-width { width: 100%; } .input-label { font-size: var(--font-size-small); font-weight: var(--font-weight-medium); color: var(--neutral-dark); line-height: var(--line-height-normal); margin-bottom: var(--space-xxsmall); } .input-required { color: var(--danger); margin-left: 2px; } .input-wrapper { position: relative; display: flex; align-items: center; } .input-field { width: 100%; height: var(--size-input-height); padding: 0 var(--space-small); font-family: var(--font-family); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); color: var(--neutral-darker); background-color: var(--neutral-white); border: 1px solid var(--neutral-medium-light); border-radius: var(--radius-small); transition: all var(--transition-fast); } .input-field::placeholder { color: var(--neutral-medium); } .input-field:hover:not(:disabled) { border-color: var(--neutral-medium); } .input-field:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .input-field:disabled { opacity: 0.85; cursor: not-allowed; background-color: var(--bg-secondary); color: var(--text-secondary); } /* Error state */ .input-wrapper-error .input-field { border-color: var(--danger); background-color: var(--danger-light); } .input-wrapper-error .input-field:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-light); } /* Icon styles */ .input-icon { position: absolute; display: flex; align-items: center; color: var(--neutral-medium); pointer-events: none; } .input-icon svg { width: 16px; height: 16px; } .input-icon-left { left: var(--space-small); } .input-icon-right { right: var(--space-small); } .input-with-left-icon .input-field { padding-left: calc(var(--space-small) + 16px + var(--space-xsmall)); } .input-with-right-icon .input-field { padding-right: calc(var(--space-small) + 16px + var(--space-xsmall)); } /* Messages */ .input-message { font-size: var(--text-xs); line-height: var(--leading-normal); } .input-message-error { color: var(--danger); } .input-message-helper { color: var(--neutral-medium); } .select-container { display: flex; flex-direction: column; gap: var(--space-small); } .select-container.select-full-width { width: 100%; } .select-label { font-size: var(--font-size-small); font-weight: var(--font-weight-medium); color: var(--text-primary); margin: 0 0 var(--space-xxsmall) 0; } .select-required { color: var(--danger); margin-left: var(--space-xxsmall); } .select-wrapper { position: relative; display: inline-block; width: 100%; } .select-input { width: 100%; height: var(--size-input-height); padding: 0 calc(var(--space-xlarge) + var(--space-xsmall)) 0 var(--space-small); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--text-primary); background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-small); transition: all var(--transition-base); appearance: none; cursor: pointer; } .select-input:hover { border-color: var(--neutral-medium); } .select-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .select-wrapper-error .select-input { border-color: var(--danger); } .select-wrapper-error .select-input:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-light); } .select-input:disabled { background-color: var(--bg-secondary); color: var(--text-secondary); cursor: not-allowed; opacity: 0.85; } .select-arrow { position: absolute; right: var(--space-small); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-secondary); display: flex; align-items: center; } .select-input:disabled ~ .select-arrow { opacity: 0.7; } .select-error-text { font-size: var(--font-size-small); color: var(--danger); margin: 0; } .select-helper-text { font-size: var(--font-size-small); color: var(--text-secondary); margin: 0; } .combobox-container { display: flex; flex-direction: column; gap: var(--space-small); position: relative; } .combobox-container.combobox-full-width { width: 100%; } .combobox-label { font-size: var(--font-size-small); font-weight: var(--font-weight-medium); color: var(--text-primary); margin: 0 0 var(--space-xxsmall) 0; } /* Wrapper — the visible "select box" */ .combobox-wrapper { position: relative; display: flex; align-items: center; width: 100%; height: var(--size-input-height); background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-small); cursor: text; transition: border-color 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; } .combobox-wrapper:hover:not(.combobox-wrapper-disabled) { border-color: var(--neutral-medium); } .combobox-wrapper-open, .combobox-wrapper:focus-within:not(.combobox-wrapper-disabled) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); outline: none; } .combobox-wrapper-error { border-color: var(--danger); } .combobox-wrapper-error.combobox-wrapper-open, .combobox-wrapper-error:focus-within { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-light); } .combobox-wrapper-disabled { background: var(--bg-secondary); cursor: not-allowed; opacity: 0.85; } /* Input inside the wrapper */ .combobox-input { flex: 1; height: 100%; padding: 0 0 0 var(--space-small); font-size: var(--font-size-base); color: var(--text-primary); background: transparent; border: none; outline: none; cursor: inherit; min-width: 0; } .combobox-input::placeholder { color: var(--text-secondary); } .combobox-input:disabled { color: var(--text-secondary); cursor: not-allowed; } /* Right-side actions: clear + arrow */ .combobox-actions { display: flex; align-items: center; gap: 2px; padding-right: var(--space-small); flex-shrink: 0; } .combobox-spinner { width: 14px; height: 14px; border: 2px solid var(--border-color); border-top-color: var(--primary); border-radius: 50%; animation: combobox-spin 0.6s linear infinite; flex-shrink: 0; } @keyframes combobox-spin { to { transform: rotate(360deg); } } .combobox-clear { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: transparent; color: var(--text-secondary); border-radius: 4px; cursor: pointer; padding: 0; transition: color 0.15s ease, background 0.15s ease; } .combobox-clear:hover { color: var(--text-primary); background: var(--bg-secondary); } .combobox-arrow { display: flex; align-items: center; color: var(--text-secondary); pointer-events: none; transition: transform 0.2s ease; } .combobox-arrow-up { transform: rotate(180deg); } /* Dropdown list */ .combobox-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1000; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-small); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); max-height: 240px; overflow-y: auto; list-style: none; margin: 0; padding: 4px 0; } .combobox-option { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; font-size: var(--font-size-base); color: var(--text-primary); cursor: pointer; transition: background 0.1s ease; user-select: none; } .combobox-option:hover, .combobox-option-highlighted { background: var(--bg-secondary); } .combobox-option-selected { color: var(--primary); font-weight: var(--font-weight-medium); } .combobox-check { display: flex; align-items: center; color: var(--primary); flex-shrink: 0; margin-left: 8px; } .combobox-no-results { padding: 10px 14px; font-size: var(--font-size-base); color: var(--text-secondary); text-align: center; cursor: default; } /* Error / helper text */ .combobox-error-text { font-size: var(--font-size-small); color: var(--danger); margin: 0; } .combobox-helper-text { font-size: var(--font-size-small); color: var(--text-secondary); margin: 0; } .multiselect-container { display: flex; flex-direction: column; gap: 6px; width: 100%; } .multiselect-full-width { width: 100%; } .multiselect-label { font-size: 14px; font-weight: 500; color: var(--text-primary); display: block; } .multiselect-required { color: var(--danger-500); margin-left: 4px; } .multiselect-wrapper { position: relative; width: 100%; } .multiselect-control { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 8px 12px; background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); gap: 8px; } .multiselect-control:hover { border-color: var(--primary-400); } .multiselect-wrapper-open .multiselect-control { border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .multiselect-wrapper-error .multiselect-control { border-color: var(--danger-500); } .multiselect-wrapper-disabled .multiselect-control { background: var(--slate-50); cursor: not-allowed; opacity: 0.65; } .multiselect-wrapper-disabled .multiselect-placeholder { color: var(--slate-400); } .multiselect-value-container { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 28px; max-height: 120px; overflow-y: auto; } .multiselect-value-container::-webkit-scrollbar { width: 6px; } .multiselect-value-container::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 3px; } .multiselect-value-container::-webkit-scrollbar-track { background: transparent; } .multiselect-placeholder { color: var(--text-tertiary); font-size: 14px; } .multiselect-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .multiselect-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--primary-50); color: var(--primary-700); border: 1px solid var(--primary-200); border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; } .multiselect-tag-remove { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; color: var(--primary-600); transition: color var(--transition-fast); } .multiselect-tag-remove:hover { color: var(--primary-800); } .multiselect-tag-remove:disabled { cursor: not-allowed; opacity: 0.5; } .multiselect-indicators { display: flex; align-items: center; flex-shrink: 0; padding-left: 8px; } .multiselect-arrow { color: var(--text-tertiary); transition: transform var(--transition-fast); } .multiselect-arrow-open { transform: rotate(180deg); } .multiselect-menu { position: abs80px; overflow-y: auto; background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12 background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 1000; animation: slideDown 0.15s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .multiselect-menu::-webkit-scrollbar { width: 8px; } .multiselect-menu::-webkit-scrollbar-track { background: var(--slate-100); border-radius: 4px; } .multiselect-menu::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 4px; } .multiselect-menu::-webkit-scrollbar-thumb:hover { background: var(--slate-400); } .multiselect-option { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; transition: background-color var(--transition-fast); border-bottom: 1px solid var(--slate-100); } .multiselect-option:last-child { border-bottom: none; } .multiselect-option:hover { background: var(--slate-50); } .multiselect-option-selected { background: var(--primary-50); } .multiselect-option-selected:hover { background: var(--primary-100); } .multiselect-checkbox { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary-500); flex-shrink: 0; } line-height: 1.4; word-break: break-word; .multiselect-option-label { flex: 1; font-size: 14px; color: var(--text-primary); } .multiselect-no-options { padding: 24px 16px; text-align: center; color: var(--text-tertiary); font-size: 14px; font-style: italic; } .multiselect-error-text { font-size: 13px; color: var(--danger-600); margin-top: 4px; } .multiselect-helper-text { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; } .textarea-container { display: flex; flex-direction: column; gap: var(--space-small); } .textarea-container.textarea-full-width { width: 100%; } .textarea-label { font-size: var(--font-size-small); font-weight: var(--font-weight-medium); color: var(--text-primary); margin: 0 0 var(--space-xxsmall) 0; } .textarea-required { color: var(--danger); margin-left: var(--space-xxsmall); } .textarea-input { width: 100%; padding: var(--space-xsmall) var(--space-small); font-size: var(--font-size-base); line-height: var(--line-height-normal); font-family: var(--font-family); color: var(--text-primary); background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-medium); transition: all var(--transition-fast); } .textarea-input:hover { border-color: var(--neutral-medium); } .textarea-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .textarea-input-error { border-color: var(--danger); } .textarea-input-error:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-light); } .textarea-input:disabled { background-color: var(--neutral-lightest); color: var(--neutral-medium); cursor: not-allowed; opacity: 0.6; } .textarea-resize-none { resize: none; } .textarea-resize-vertical { resize: vertical; } .textarea-resize-horizontal { resize: horizontal; } .textarea-resize-both { resize: both; } .textarea-error-text { font-size: var(--font-size-tiny); color: var(--danger); margin: 0; } .textarea-helper-text { font-size: var(--font-size-tiny); color: var(--text-secondary); margin: 0; } .badge { display: inline-flex; align-items: center; gap: var(--space-xxsmall); padding: var(--badge-padding-vertical) var(--badge-padding-horizontal); font-size: var(--badge-font-size); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); border-radius: var(--badge-radius); white-space: nowrap; transition: all var(--transition-fast); } /* ========== Variants ========== */ .badge-default { background-color: var(--badge-default-bg); color: var(--badge-default-text); } .badge-primary { background-color: var(--primary-light); color: var(--primary-dark); } .badge-success { background-color: var(--badge-success-bg); color: var(--badge-success-text); } .badge-warning { background-color: var(--badge-warning-bg); color: var(--badge-warning-text); } .badge-danger { background-color: var(--danger-light); color: var(--danger-dark); } .badge-info { background-color: var(--badge-info-bg); color: var(--badge-info-text); } /* ========== Prioridades ========== */ .badge-priorityCritical { background-color: var(--priority-critical-bg); color: var(--priority-critical-text); } .badge-priorityHigh { background-color: var(--priority-high-bg); color: var(--priority-high-text); } .badge-priorityMedium { background-color: var(--priority-medium-bg); color: var(--priority-medium-text); } .badge-priorityLow { background-color: var(--priority-low-bg); color: var(--priority-low-text); } /* ========== Status ========== */ .badge-statusBacklog { background-color: var(--neutral-lighter); color: var(--neutral-dark); } .badge-statusTodo { background-color: var(--priority-medium-bg); color: var(--priority-medium-text); } .badge-statusInProgress { background-color: var(--priority-high-bg); color: var(--priority-high-text); } .badge-statusInReview { background-color: var(--secondary-light); color: var(--secondary-dark); } .badge-statusDone { background-color: var(--accent-light); color: var(--accent-dark); } .badge-statusCancelled { background-color: var(--priority-critical-bg); color: var(--priority-critical-text); } /* ========== Item Types ========== */ .badge-typeEpic { background-color: var(--secondary-light); color: var(--secondary-dark); } .badge-typeFeature { background-color: var(--priority-medium-bg); color: var(--priority-medium-text); } .badge-typeStory { background-color: var(--success-light); color: var(--success-dark); } .badge-typeTask { background-color: var(--neutral-lightest); color: var(--neutral-dark); } .badge-typeBug { background-color: var(--priority-critical-bg); color: var(--priority-critical-text); } .badge-typeQa { background-color: var(--priority-high-bg); color: var(--priority-high-text); } .badge-typeSpike { background-color: var(--info-light); color: var(--info-dark); } .badge-typeChore { background-color: var(--gray-200); color: var(--gray-800); } /* ========== Sizes ========== */ .badge-sm { font-size: var(--badge-font-size-small); padding: var(--badge-padding-vertical-small) var(--badge-padding-horizontal-small); } .badge-md { font-size: var(--badge-font-size); padding: var(--badge-padding-vertical) var(--badge-padding-horizontal); } .badge-lg { font-size: var(--badge-font-size-large); padding: var(--badge-padding-vertical-large) var(--badge-padding-horizontal-large); } /* ========== Dot Indicator ========== */ .badge-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background-color: currentColor; } /* Card Component Styles */ .card { background-color: var(--neutral-white); border: 1px solid var(--neutral-light); border-radius: var(--radius-medium); padding: var(--space-xlarge); transition: all var(--transition-fast); box-sizing: border-box; width: 100%; } .card-clickable { cursor: pointer; width: 100%; text-align: left; font: inherit; } .card-clickable:hover { border-color: var(--neutral-medium-light); box-shadow: var(--shadow-card-hover); } .card-clickable:active { transform: translateY(1px); } /* Modal Component Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-overlay); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal-backdrop); padding: var(--space-medium); animation: modalFadeIn var(--transition-base); } @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-content { background-color: var(--bg-primary); border-radius: var(--radius-large); box-shadow: var(--shadow-xlarge); display: flex; flex-direction: column; max-height: 85vh; width: 100%; animation: modalSlideUp var(--transition-base); z-index: var(--z-modal); } /* Mobile handle for swipe-to-close */ .modal-mobile-handle { display: flex; justify-content: center; padding: var(--space-small) 0; cursor: grab; touch-action: none; } .modal-mobile-handle:active { cursor: grabbing; } .modal-handle-bar { width: 40px; height: 4px; background: var(--border-color); border-radius: var(--radius-full); } /* Hide handle on desktop */ @media (min-width: 641px) { .modal-mobile-handle { display: none; } } @keyframes modalSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Sizes */ .modal-content-sm { max-width: 400px; } .modal-content-md { max-width: 560px; } .modal-content-lg { max-width: 720px; } .modal-content-xl { max-width: 860px; } .modal-content-xxl { max-width: 1200px; width: 95vw; } /* Header */ .modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-xlarge); border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .modal-title { margin: 0; font-size: var(--font-size-xlarge); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: none; border-radius: var(--radius-small); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); } .modal-close:hover { background-color: var(--neutral-lighter); color: var(--text-primary); } .modal-close:active { background-color: var(--neutral-light); } /* Body */ .modal-body { padding: var(--space-xlarge); overflow-y: auto; flex: 1; min-height: 0; /* Custom scrollbar styling */ scrollbar-width: thin; scrollbar-color: var(--neutral-light) var(--neutral-lighter); } /* Webkit scrollbar (Chrome, Safari, Edge) */ .modal-body::-webkit-scrollbar { width: 8px; } .modal-body::-webkit-scrollbar-track { background: var(--neutral-lighter); border-radius: var(--radius-small); } .modal-body::-webkit-scrollbar-thumb { background: var(--neutral-light); border-radius: var(--radius-small); transition: background var(--transition-fast); } .modal-body::-webkit-scrollbar-thumb:hover { background: var(--neutral); } /* Footer */ .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-large); padding: var(--space-xlarge); flex-shrink: 0; background: transparent; border: none; } /* Modal actions (botones en el footer) */ .modal-actions { display: flex; justify-content: flex-end; gap: var(--space-large); } /* Toast Component Styles */ .toast-container { position: fixed; z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-small); max-width: 400px; pointer-events: none; } .toast-container-top-right { top: var(--space-medium); right: var(--space-medium); } .toast-container-top-left { top: var(--space-medium); left: var(--space-medium); } .toast-container-bottom-right { bottom: var(--space-medium); right: var(--space-medium); } .toast-container-bottom-left { bottom: var(--space-medium); left: var(--space-medium); } .toast { display: flex; align-items: center; gap: var(--space-small); padding: var(--space-medium); background-color: var(--neutral-white); border-radius: var(--radius-medium); box-shadow: var(--shadow-dropdown); border-left: 3px solid; pointer-events: auto; animation: toast-slide-in var(--transition-base); min-width: 300px; } @keyframes toast-slide-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .toast-icon { display: flex; align-items: center; flex-shrink: 0; } .toast-message { flex: 1; font-size: var(--font-size-small); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); color: #1E293B; /* Slate 800 - texto oscuro legible */ font-weight: 500; /* Mejorar legibilidad */ } .toast-close { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; background: transparent; border: none; border-radius: var(--radius-small); color: #64748B; /* Slate 500 - visible sobre fondo blanco */ cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; } .toast-close:hover { background-color: #F1F5F9; /* Slate 100 */ color: #334155; /* Slate 700 - más oscuro al hover */ } /* Variants */ .toast-success { border-left-color: var(--success); } .toast-success .toast-icon { color: var(--success-hover); } .toast-error { border-left-color: var(--danger); } .toast-error .toast-icon { color: var(--danger-hover); } .toast-warning { border-left-color: var(--warning); } .toast-warning .toast-icon { color: var(--warning-hover); } .toast-info { border-left-color: var(--info); } .toast-info .toast-icon { color: var(--info-hover); } /* Table Component Styles */ .table-container { width: 100%; overflow-x: auto; border: 1px solid var(--neutral-light); border-radius: var(--radius-medium); } .table { width: 100%; border-collapse: collapse; font-size: var(--font-size-small); } .table thead { background-color: var(--neutral-lightest); border-bottom: 1px solid var(--neutral-light); } .table th { padding: var(--space-small) var(--space-medium); text-align: left; font-weight: var(--font-weight-semibold); color: var(--neutral-dark); white-space: nowrap; user-select: none; } .th-content { display: flex; align-items: center; gap: 4px; width: fit-content; } .table th.th-sortable { cursor: pointer; } .table th.th-sortable:hover { color: var(--primary); background-color: var(--primary-light); } .table th.th-sorted { color: var(--primary); } .th-sort-icon { display: inline-flex; align-items: center; flex-shrink: 0; } .th-sort-neutral { color: var(--neutral-medium, #aaa); } .table tbody tr { border-bottom: 1px solid var(--neutral-light); transition: background-color var(--transition-fast); } .table tbody tr:last-child { border-bottom: none; } .table tbody tr:hover { background-color: var(--neutral-lightest); } .table tbody tr.clickable { cursor: pointer; } .table tbody tr.clickable:hover { background-color: var(--primary-light); } .table td { padding: var(--space-small) var(--space-medium); color: var(--neutral-darkest); } .table-loading, .table-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-xhuge); color: var(--neutral); } .loading-spinner { width: 32px; height: 32px; border: 3px solid var(--neutral-light); border-top-color: var(--primary); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; margin-bottom: var(--space-medium); } @keyframes spin { to { transform: rotate(360deg); } } .table-empty p, .table-loading p { margin: 0; font-size: var(--font-size-small); } /* ========== PAGINATION ========== */ .table-pagination { display: flex; justify-content: space-between; align-items: center; padding: var(--space-medium); border-top: 1px solid var(--neutral-light); gap: var(--space-medium); flex-wrap: wrap; } .table-pagination-info { font-size: var(--font-size-small); color: var(--text-secondary); } .table-pagination-controls { display: flex; gap: var(--space-xlarge); align-items: center; } .table-pagination-size { display: flex; gap: var(--space-xsmall); align-items: center; } .table-pagination-size label { font-size: var(--font-size-small); color: var(--text-secondary); } .table-pagination-select { padding: var(--space-xxsmall) var(--space-xsmall); border: 1px solid var(--border-color); border-radius: var(--radius-small); font-size: var(--font-size-small); background: var(--bg-primary); color: var(--text-primary); cursor: pointer; transition: border-color var(--transition-fast); } .table-pagination-select:hover { border-color: var(--neutral-medium); } .table-pagination-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .table-pagination-buttons { display: flex; gap: var(--space-small); align-items: center; } .table-pagination-pages { font-size: var(--font-size-small); color: var(--text-secondary); min-width: 120px; text-align: center; } .table-pagination-button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border-color); border-radius: var(--radius-small); background: var(--bg-primary); color: var(--text-primary); font-size: var(--font-size-medium); cursor: pointer; transition: all var(--transition-fast); } .table-pagination-button:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--neutral-medium); } .table-pagination-button:disabled { opacity: 0.4; cursor: not-allowed; } /* Tabs Component Styles */ .tabs-container { display: flex; flex-direction: column; width: 100%; } .tabs-header { display: flex; gap: var(--space-xxsmall); border-bottom: 2px solid var(--neutral-light); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabs-header::-webkit-scrollbar { display: none; } .tab-button { display: flex; align-items: center; gap: var(--space-xsmall); padding: var(--space-small) var(--space-medium); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; color: var(--neutral-medium-dark); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; } .tab-button:hover { color: var(--neutral-darkest); background-color: var(--neutral-lightest); } .tab-button.active { color: var(--primary-hover); border-bottom-color: var(--primary); } .tab-icon { display: flex; align-items: center; font-size: 18px; } .tab-label { display: inline-block; } .tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--space-xxsmall); background-color: var(--neutral-light); color: var(--neutral-dark); border-radius: var(--radius-full); font-size: 11px; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; } .tab-button.active .tab-badge { background-color: var(--primary-light); color: var(--primary-dark); } .tabs-content { padding: var(--space-xlarge) 0; } /* ============================================ AVATAR - Componente de avatar con iniciales ============================================ */ .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--text-inverse); font-weight: var(--font-weight-semibold); flex-shrink: 0; user-select: none; overflow: hidden; } /* Tamaños según DESIGN_SYSTEM.md */ .avatar-sm { width: var(--size-avatar-small); /* 24px */ height: var(--size-avatar-small); font-size: 10px; } .avatar-md { width: var(--size-avatar-medium); /* 32px */ height: var(--size-avatar-medium); font-size: var(--font-size-small); /* 12px */ } .avatar-lg { width: var(--size-avatar-large); /* 40px */ height: var(--size-avatar-large); font-size: var(--font-size-base); /* 14px */ } .avatar-xl { width: 64px; height: 64px; font-size: var(--font-size-large); /* 18px */ } .avatar-image { width: 100%; height: 100%; object-fit: cover; } .avatar-initials { line-height: 1; } /* ColorPicker Component Styles */ .colorPicker { display: flex; flex-direction: column; gap: var(--space-2); } .colorPicker.disabled { opacity: 0.6; cursor: not-allowed; } .colorPickerLabel { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--slate-700); } .colorGrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); max-width: 320px; } .colorOption { position: relative; width: 44px; height: 44px; border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; padding: 0; } .colorOption:hover:not(:disabled) { border-color: var(--slate-300); transform: scale(1.05); box-shadow: var(--shadow-md); } .colorOption:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-100); } .colorOption.selected { border-color: var(--slate-400); box-shadow: var(--shadow-lg); transform: scale(1.1); } .colorOption:disabled { cursor: not-allowed; opacity: 0.5; } .checkIcon { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } .colorPickerError { font-size: var(--text-sm); color: var(--red-600); margin-top: var(--space-1); } /* Responsive */ @media (max-width: 640px) { .colorGrid { grid-template-columns: repeat(4, 1fr); gap: var(--space-2); } .colorOption { width: 40px; height: 40px; } } /* SegmentedControl Component Styles */ .segmentedControl { display: flex; flex-direction: column; gap: var(--space-2); } .segmentedControl.fullWidth { width: 100%; } .segmentedLabel { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--slate-700); } .segmentedGroup { display: inline-flex; background-color: var(--slate-100); border-radius: var(--radius-md); padding: var(--space-1); gap: var(--space-1); } .segmentedControl.fullWidth .segmentedGroup { width: 100%; } .segmentedOption { flex: 1; min-width: 60px; padding: var(--space-2) var(--space-4); background-color: transparent; border: none; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--slate-600); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; } .segmentedOption:hover:not(:disabled):not(.selected) { background-color: var(--slate-200); color: var(--slate-700); } .segmentedOption:focus { outline: none; box-shadow: 0 0 0 2px var(--primary-500); } .segmentedOption.selected { background-color: var(--white); color: var(--slate-900); box-shadow: var(--shadow-sm); } .segmentedOption:disabled { cursor: not-allowed; opacity: 0.5; } .segmentedError { font-size: var(--text-sm); color: var(--red-600); margin-top: var(--space-1); } /* Responsive */ @media (max-width: 640px) { .segmentedOption { min-width: 50px; padding: var(--space-2) var(--space-3); font-size: var(--text-xs); } } /* RadioGroup Component Styles */ .radioGroup { display: flex; flex-direction: column; gap: var(--space-3); } .radioGroupLabel { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--slate-700); } .radioOptions { display: flex; gap: var(--space-3); } .radioOptions.vertical { flex-direction: column; } .radioOptions.horizontal { flex-direction: row; flex-wrap: wrap; } .radioOption { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--slate-200); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); background-color: var(--white); } .radioOption:hover:not(.disabled) { border-color: var(--primary-300); background-color: var(--primary-50); } .radioOption.checked { border-color: var(--primary-500); background-color: var(--primary-50); } .radioOption.disabled { cursor: not-allowed; opacity: 0.6; } .radioInput { position: absolute; opacity: 0; width: 0; height: 0; } .radioIndicator { position: relative; flex-shrink: 0; width: 20px; height: 20px; border: 2px solid var(--slate-300); border-radius: var(--radius-full); background-color: var(--white); transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; margin-top: 2px; } .radioOption:hover:not(.disabled) .radioIndicator { border-color: var(--primary-400); } .radioOption.checked .radioIndicator { border-color: var(--primary-500); background-color: var(--white); } .radioInnerDot { width: 10px; height: 10px; border-radius: var(--radius-full); background-color: var(--primary-500); } .radioLabelContent { display: flex; flex-direction: column; gap: var(--space-1); } .radioLabel { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--slate-900); } .radioDescription { font-size: var(--text-xs); color: var(--slate-600); line-height: 1.4; } .radioGroupError { font-size: var(--text-sm); color: var(--red-600); } /* Focus state */ .radioInput:focus + .radioIndicator { box-shadow: 0 0 0 3px var(--primary-100); } .skeleton { background: linear-gradient( 90deg, var(--slate-200) 0%, var(--slate-300) 50%, var(--slate-200) 100% ); background-size: 200% 100%; border-radius: var(--border-radius-md); display: inline-block; } .skeleton-text { height: 1em; width: 100%; border-radius: var(--border-radius-sm); } .skeleton-rect { width: 100%; height: 100%; } .skeleton-circle { width: 40px; height: 40px; border-radius: 50%; } .skeleton-card { width: 100%; height: 200px; border-radius: var(--border-radius-lg); } /* Animations */ .skeleton-pulse { animation: skeleton-pulse 1.5s ease-in-out infinite; } .skeleton-wave { animation: skeleton-wave 1.5s linear infinite; } @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } @keyframes skeleton-wave { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeletonTable { display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); overflow: hidden; background: var(--bg-card); } .skeletonTableRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border-color); } .skeletonTableRow:last-child { border-bottom: none; } .skeletonTableHeader { background: var(--slate-50); font-weight: var(--font-semibold); } .skeletonCard { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); overflow: hidden; transition: all var(--transition-base); } .skeletonCardHeader { height: 4px; margin-bottom: var(--space-4); } .skeletonCardContent { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); } .skeletonCardBadges { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); } .skeletonCardFooter { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-color); } .skeletonCardAvatars { display: flex; gap: var(--space-2); } .skeletonCardMeta { display: flex; gap: var(--space-3); } .header { height: 64px; background: white; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 32px 0 24px; position: sticky; top: 0; z-index: 1000; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); width: 100%; box-sizing: border-box; flex-shrink: 0; min-height: 64px; } .left { display: flex; align-items: center; gap: 24px; flex: 1; height: 100%; } .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #94A3B8; height: 100%; } .breadcrumb a { color: #64748B; text-decoration: none; transition: color 0.15s ease; font-weight: 500; } .breadcrumb a:hover { color: #6366F1; } .breadcrumbChevron { width: 14px; height: 14px; transform: rotate(-90deg); color: #CBD5E1; } .center { flex: 1; display: flex; align-items: center; justify-content: center; max-width: 600px; margin: 0 auto; } .timerCompact { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px; transition: all 0.2s ease; } .timerCompact.running { background: #F0FDF4; border-color: #86EFAC; } .timerIcon { width: 20px; height: 20px; color: #94A3B8; } .timerCompact.running .timerIcon { color: #22C55E; animation: pulse-icon 2s ease-in-out infinite; } @keyframes pulse-icon { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .timerTime { font-size: 15px; font-weight: 600; color: #0F172A; font-variant-numeric: tabular-nums; min-width: 80px; letter-spacing: 0.01em; } .timerTask { font-size: 14px; color: #64748B; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .right { display: flex; align-items: center; gap: 12px; height: 100%; position: relative; } /* Notification Button */ .iconButton { position: relative; width: 40px; height: 40px; border-radius: 10px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; color: #64748B; flex-shrink: 0; } .iconButton:hover { background: #F1F5F9; color: #334155; } .iconButton svg { width: 20px; height: 20px; } .notificationBadge { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; background: #EF4444; color: white; font-size: 11px; font-weight: 700; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid white; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } /* User Menu */ .userMenu { position: relative; display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-radius: 10px; cursor: pointer; transition: all 0.15s ease; border: 1px solid transparent; flex-shrink: 0; height: 48px; box-sizing: border-box; } .userMenu:hover { background: #F8FAFC; border-color: #E2E8F0; } .userAvatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2); flex-shrink: 0; } .userInfo { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; height: 100%; } .userName { font-size: 14px; font-weight: 600; color: #0F172A; line-height: 1.2; letter-spacing: -0.01em; } .userRole { font-size: 12px; color: #94A3B8; line-height: 1.2; font-weight: 500; } .chevron { width: 16px; height: 16px; color: #CBD5E1; transition: transform 0.15s ease; } .userMenu:hover .chevron { transform: translateY(2px); color: #94A3B8; } /* Dropdown Menu */ .dropdown { position: absolute; top: calc(100% + 8px); right: 24px; width: 240px; background: white; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08); overflow: hidden; animation: slideDown 0.2s ease-out; z-index: 1001; } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .dropdownItem { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: none; background: transparent; width: 100%; text-align: left; cursor: pointer; transition: background 0.15s ease; color: #475569; font-size: 14px; font-weight: 500; text-decoration: none; } .dropdownItem:hover { background: #F8FAFC; color: #0F172A; } .dropdownItem svg { width: 18px; height: 18px; color: #94A3B8; } .dropdownItem:hover svg { color: #6366F1; } .dropdownDivider { height: 1px; background: #F1F5F9; margin: 4px 0; } .dropdownItem.danger { color: #EF4444; } .dropdownItem.danger:hover { background: #FEF2F2; color: #DC2626; } .dropdownItem.danger svg { color: #EF4444; } .dropdownItem.danger:hover svg { color: #DC2626; } /* Hamburger button - hidden on desktop, visible below 1024px */ .menuButton { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: none; background: transparent; cursor: pointer; color: #64748B; transition: all 0.15s ease; flex-shrink: 0; } .menuButton:hover { background: #F1F5F9; color: #334155; } .menuButton svg { width: 22px; height: 22px; } /* Responsive */ @media (max-width: 1024px) { .menuButton { display: flex; } .center { display: none; } } @media (max-width: 768px) { .header { padding: 0 16px; } .breadcrumb { display: none; } .userInfo { display: none; } .dropdown { right: 16px; } } /* ============================================ SIDEBAR - Navegación lateral ============================================ */ /* Container */ .sidebar { width: var(--layout-sidebar-width); height: 100vh; background-color: var(--bg-sidebar); border-right: 1px solid var(--border-sidebar); display: flex; flex-direction: column; position: fixed; left: 0; top: 0; z-index: var(--z-sticky); overflow-y: auto; } /* Header */ .sidebar-header { padding: var(--space-xlarge) var(--space-medium); border-bottom: 1px solid var(--border-sidebar); flex-shrink: 0; } .sidebar-logo { display: flex; align-items: center; gap: var(--space-small); color: var(--text-sidebar); text-decoration: none; transition: opacity var(--transition-fast); } .sidebar-logo:hover { opacity: 0.8; } .sidebar-logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius: var(--radius-medium); display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; } .sidebar-logo-text { display: flex; flex-direction: column; gap: 2px; } .sidebar-logo-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-sidebar); line-height: 1.2; } .sidebar-logo-subtitle { font-size: var(--font-size-tiny); color: var(--text-sidebar-secondary); line-height: 1; } /* Navigation */ .sidebar-nav { flex: 1; padding: var(--space-medium) 0; overflow-y: auto; } .sidebar-section { margin-bottom: var(--space-xlarge); } .sidebar-section-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-xsmall) var(--space-medium); background: transparent; border: none; cursor: pointer; border-radius: var(--radius-medium); transition: background-color var(--transition-fast); } .sidebar-section-header:hover { background-color: var(--bg-sidebar-hover); } .sidebar-section-title { font-size: var(--font-size-tiny); font-weight: var(--font-weight-semibold); color: var(--text-sidebar-secondary); text-transform: uppercase; letter-spacing: 0.05em; } .sidebar-section-chevron { color: var(--text-sidebar-secondary); transition: transform var(--transition-fast); flex-shrink: 0; } .sidebar-section-chevron.open { transform: rotate(180deg); } .sidebar-section-content { overflow: hidden; max-height: 0; transition: max-height 0.25s ease; } .sidebar-section-content.open { max-height: 600px; } /* Project Info */ .sidebar-project-info { padding: var(--space-small) var(--space-medium); margin: var(--space-xsmall) var(--space-medium); background-color: rgba(255, 255, 255, 0.03); border-radius: var(--radius-medium); border: 1px solid rgba(255, 255, 255, 0.05); } .sidebar-project-label { font-size: var(--font-size-tiny); color: var(--text-sidebar-secondary); margin-bottom: var(--space-xxsmall); } .sidebar-project-name { font-size: var(--font-size-small); font-weight: var(--font-weight-medium); color: var(--text-sidebar); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Navigation Links */ .sidebar-nav-link { display: flex; align-items: center; gap: var(--space-small); padding: var(--space-small) var(--space-medium); margin: 2px var(--space-xsmall); color: var(--text-sidebar-secondary); text-decoration: none; border-radius: var(--radius-medium); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); transition: all var(--transition-fast); cursor: pointer; border: none; background: transparent; width: calc(100% - var(--space-medium)); text-align: left; } .sidebar-nav-link:hover { background-color: var(--bg-sidebar-hover); color: var(--text-sidebar); } .sidebar-nav-link.active { background-color: var(--bg-sidebar-active); color: var(--primary-light); } .sidebar-nav-link.active svg { color: var(--primary-light); } .sidebar-nav-link.disabled { opacity: 0.5; cursor: not-allowed; } .sidebar-icon { flex-shrink: 0; width: 20px; height: 20px; } .sidebar-nav-link svg { width: 20px; height: 20px; flex-shrink: 0; } .sidebar-nav-link span { flex: 1; } /* Responsive */ @media (max-width: 1024px) { .sidebar { transform: translateX(-100%); transition: transform var(--transition-base); } .sidebar.open { transform: translateX(0); } } @media (max-width: 768px) { .sidebar { width: 100%; } } /* Notifications Panel Styles - Dropdown Style */ .notifications-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: transparent; z-index: 999; } .notifications-panel { position: absolute; top: 52px; right: 0; width: 420px; max-width: calc(100vw - 32px); max-height: calc(100vh - 80px); background: white; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.08); border-radius: 12px; z-index: 1100; display: flex; flex-direction: column; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .notifications-panel.open { opacity: 1; transform: translateY(0); pointer-events: auto; } .notifications-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 16px 20px; border-bottom: 1px solid #E5E7EB; flex-shrink: 0; background: white; border-radius: 12px 12px 0 0; } .notifications-title { display: flex; align-items: center; gap: 12px; } .notifications-title h3 { margin: 0; font-size: 20px; font-weight: 700; color: #111827; letter-spacing: -0.02em; } .notifications-unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 10px; background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); color: white; border-radius: 14px; font-size: 13px; font-weight: 700; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); } .notifications-close-btn { width: 32px; height: 32px; border: none; background: none; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--slate-500); transition: all var(--transition-fast); } .notifications-close-btn:hover { background: var(--slate-100); color: var(--slate-900); } .notifications-actions { display: flex; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #E5E7EB; flex-shrink: 0; background: #F9FAFB; } .notifications-action-btn { display: flex; align-items: center; gap: 5px; background: white; border: 1px solid #D1D5DB; padding: 6px 10px; font-size: 12px; font-weight: 600; color: #374151; border-radius: 6px; cursor: pointer; transition: all 0.15s ease; flex: 1; justify-content: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .notifications-action-btn:hover { background: #F3F4F6; border-color: #9CA3AF; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .notifications-action-btn.primary { background: #3B82F6; border-color: #3B82F6; color: white; } .notifications-action-btn.primary:hover { background: #2563EB; border-color: #2563EB; } .notifications-action-btn.danger { background: white; border-color: #FCA5A5; color: #DC2626; } .notifications-action-btn.danger:hover { background: #FEF2F2; border-color: #F87171; } .notifications-action-btn svg { flex-shrink: 0; width: 14px; height: 14px; } .notifications-list { flex: 1; overflow-y: auto; padding: 0; max-height: 480px; background: white; } .notifications-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; text-align: center; min-height: 300px; } .notifications-empty svg { color: #D1D5DB; margin-bottom: 16px; opacity: 0.6; } .notifications-empty p { margin: 0 0 8px 0; font-size: 16px; font-weight: 600; color: #374151; } .notifications-empty span { font-size: 14px; color: #6B7280; max-width: 280px; } .notification-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #F3F4F6; transition: all 0.15s ease; position: relative; } .notification-item:last-child { border-bottom: none; } .notification-item:hover { background: #F9FAFB; } .notification-item.unread { background: #EFF6FF; border-left: 3px solid #3B82F6; padding-left: 17px; } .notification-item.unread:hover { background: #DBEAFE; } /* Estilo especial para notificaciones con link */ .notification-item[data-has-link="true"]:hover { background: #F0F9FF; } .notification-item[data-has-link="true"]:hover .notification-icon { transform: translateX(2px); transition: transform 0.15s ease; } .notification-main-content { display: flex; gap: 12px; flex: 1; min-width: 0; } .notification-delete-btn { flex-shrink: 0; width: 32px; height: 32px; border: none; background: transparent; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #9CA3AF; transition: all 0.15s ease; opacity: 0; } .notification-item:hover .notification-delete-btn { opacity: 1; } .notification-delete-btn:hover { background: #FEE2E2; color: #DC2626; transform: scale(1.1); } .notification-delete-btn:active { transform: scale(0.95); } .notification-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #F3F4F6; color: #6B7280; } .notification-info .notification-icon { background: #DBEAFE; color: #2563EB; } .notification-success .notification-icon { background: #D1FAE5; color: #059669; } .notification-warning .notification-icon { background: #FEF3C7; color: #D97706; } .notification-error .notification-icon { background: #FEE2E2; color: #DC2626; } .notification-content { flex: 1; min-width: 0; } .notification-header-content { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .notification-title { font-size: 14px; font-weight: 600; color: #111827; flex: 1; line-height: 1.4; } .notification-time { font-size: 12px; color: #6B7280; flex-shrink: 0; white-space: nowrap; font-weight: 500; } .notification-message { margin: 0; font-size: 13px; color: #4B5563; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .notification-unread-dot { position: absolute; top: 18px; right: 20px; width: 10px; height: 10px; background: #3B82F6; border-radius: 50%; box-shadow: 0 0 0 3px #EFF6FF; } /* Responsive */ @media (max-width: 640px) { .notifications-panel { right: 8px; left: 8px; width: auto; max-width: none; } } /* Scrollbar personalizado */ .notifications-list::-webkit-scrollbar { width: 8px; } .notifications-list::-webkit-scrollbar-track { background: #F9FAFB; border-radius: 0 0 12px 0; } .notifications-list::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 4px; border: 2px solid #F9FAFB; } .notifications-list::-webkit-scrollbar-thumb:hover { background: #9CA3AF; } /* FileAttachments Component - Inline Upload Design */ .fileAttachmentsContainer { display: flex; flex-direction: column; gap: 24px; } /* ═══ FILE UPLOAD SECTION (Estilo similar a Avatar) ═══ */ .fileUploadSection { display: flex; flex-direction: column; gap: 20px; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); padding: 24px; border-radius: 16px; border: 1px solid #e2e8f0; } .fileUploadHeader h4 { font-size: 15px; font-weight: 600; color: #1e293b; margin: 0 0 6px 0; letter-spacing: -0.01em; } .fileUploadHint { font-size: 12px; color: #64748b; margin: 0; line-height: 1.5; } /* Dropzone Inline */ .fileUploadDropzone { min-height: 160px; border: 2px dashed #cbd5e1; border-radius: 16px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 32px; } .fileUploadDropzone:hover { border-color: var(--primary); background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15); transform: translateY(-2px); } .fileUploadDropzone.active { border-color: var(--primary); background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25); transform: scale(1.02); } .fileUploadDropzone svg { color: #94a3b8; transition: color 0.3s; } .fileUploadDropzone:hover svg { color: var(--primary); } .dropzoneText { margin: 0; font-size: 15px; font-weight: 500; color: #64748b; } .dropzoneOr { margin: 0; font-size: 13px; color: #94a3b8; } /* ═══ EMPTY STATE ═══ */ .emptyStateFiles { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 32px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-radius: 12px; border: 1px solid #e2e8f0; } .emptyStateFiles svg { color: #cbd5e1; opacity: 0.6; } .emptyStateText { margin: 0; color: #64748b; font-size: 14px; font-weight: 500; } /* ═══ TABLE ═══ */ .tableContainer { border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; background: white; } .filesTable { width: 100%; border-collapse: collapse; font-size: 14px; } .filesTable thead { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-bottom: 2px solid #e2e8f0; } .filesTable thead th { padding: 16px 20px; text-align: left; font-weight: 600; color: #475569; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; } .filesTable thead th.actionsColumn { text-align: right; padding-right: 24px; } .filesTable tbody tr { border-bottom: 1px solid #f1f5f9; transition: all 0.2s ease; } .filesTable tbody tr:last-child { border-bottom: none; } .filesTable tbody tr:hover { background: linear-gradient(90deg, rgba(29, 111, 164, 0.03) 0%, rgba(29, 111, 164, 0.01) 100%); } .filesTable tbody td { padding: 16px 20px; color: #1e293b; } /* ═══ TABLE CELLS ═══ */ .fileNameCell { max-width: 400px; } .fileName { display: flex; flex-direction: column; gap: 4px; } .fileNameText { font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fileUploadedBy { font-size: 12px; color: #64748b; } .fileTypeBadge { display: inline-block; padding: 4px 12px; background: var(--primary-light); color: var(--primary-dark); border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--primary); border-opacity: 0.3; } .fileSizeCell { color: #64748b; font-size: 13px; } .fileDateCell { color: #64748b; font-size: 13px; } .fileActionsCell { text-align: right; padding-right: 24px; } .fileActions { display: flex; gap: 8px; justify-content: flex-end; } .actionButton { width: 32px; height: 32px; border-radius: 6px; border: 1px solid #e2e8f0; background: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; color: #64748b; } .actionButton:hover { background: #f8fafc; border-color: #cbd5e1; transform: translateY(-1px); } .downloadButton:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-light); } .deleteButton:hover { color: #ef4444; border-color: #ef4444; background: #fef2f2; } /* ═══ RESPONSIVE ═══ */ @media (max-width: 768px) { .fileUploadDropzone { min-height: 140px; padding: 24px; } .filesTable { font-size: 13px; } .filesTable thead th, .filesTable tbody td { padding: 12px 16px; } .fileNameCell { max-width: 200px; } } /* ═══ TABLE ═══ */ .tableContainer { border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; background: white; } .filesTable { width: 100%; border-collapse: collapse; font-size: 14px; } .filesTable thead { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-bottom: 2px solid #e2e8f0; } .filesTable thead th { padding: 16px 20px; text-align: left; font-weight: 600; color: #475569; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; } .filesTable thead th.actionsColumn { text-align: right; padding-right: 24px; } .filesTable tbody tr { border-bottom: 1px solid #f1f5f9; transition: all 0.2s ease; } .filesTable tbody tr:last-child { border-bottom: none; } .filesTable tbody tr:hover { background: linear-gradient(90deg, rgba(29, 111, 164, 0.03) 0%, rgba(29, 111, 164, 0.01) 100%); } .filesTable tbody td { padding: 16px 20px; color: #1e293b; } /* ═══ TABLE CELLS ═══ */ .fileNameCell { max-width: 400px; } .fileName { display: flex; flex-direction: column; gap: 4px; } .fileNameText { font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fileUploadedBy { font-size: 12px; color: #64748b; } .fileTypeBadge { display: inline-block; padding: 4px 12px; background: var(--primary-light); color: var(--primary-dark); border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--primary); border-opacity: 0.3; } .fileSizeCell { color: #64748b; font-size: 13px; } .fileDateCell { color: #64748b; font-size: 13px; } .fileActionsCell { text-align: right; padding-right: 24px; } .fileActions { display: flex; gap: 8px; justify-content: flex-end; } .actionButton { width: 32px; height: 32px; border-radius: 6px; border: 1px solid #e2e8f0; background: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; color: #64748b; } .actionButton:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .downloadButton:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); } .deleteButton:hover { background: #fef2f2; border-color: #ef4444; color: #ef4444; } /* ═══ UPLOAD MODAL DROPZONE ═══ */ .uploadDropzone { position: relative; border: 2px dashed #cbd5e1; border-radius: 16px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); padding: 64px 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; min-height: 320px; justify-content: center; } .uploadDropzone::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(29, 111, 164, 0.05) 0%, rgba(20, 184, 166, 0.05) 100%); opacity: 0; transition: opacity 0.3s ease; } .uploadDropzone:hover::before, .uploadDropzone.active::before { opacity: 1; } .uploadDropzone:hover, .uploadDropzone.active { border-color: var(--primary); background: linear-gradient(135deg, var(--primary-light) 0%, #e0f2fe 100%); transform: scale(1.02); box-shadow: 0 8px 24px rgba(29, 111, 164, 0.15); } .uploadDropzone svg { color: #94a3b8; transition: all 0.3s ease; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); } .uploadDropzone:hover svg, .uploadDropzone.active svg { color: var(--primary); transform: scale(1.1) translateY(-4px); } .dropzoneText { font-size: 16px; color: #475569; margin: 0; font-weight: 500; text-align: center; } .dropzoneLink { color: var(--primary); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.2s ease; } .dropzoneLink:hover { text-decoration-color: var(--primary); } .dropzoneHint { font-size: 14px; color: #94a3b8; margin: 0; } /* ═══ RESPONSIVE ═══ */ @media (max-width: 768px) { .fileAttachmentsHeader { flex-direction: column; align-items: flex-start; gap: 16px; } .uploadButton { width: 100%; justify-content: center; } .filesTable { font-size: 13px; } .filesTable thead th, .filesTable tbody td { padding: 12px 16px; } .fileNameCell { max-width: 200px; } .fileSizeCell, .fileDateCell { display: none; } .fileTypeBadge { font-size: 11px; padding: 3px 8px; } } @media (max-width: 640px) { .uploadDropzone { padding: 48px 24px; min-height: 280px; } .dropzoneText { font-size: 14px; } .dropzoneHint { font-size: 12px; } } /* Contact Files Styles */ .contact-files-container { position: relative; min-height: 200px; } .files-loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-medium); background: rgba(255, 255, 255, 0.9); z-index: 10; border-radius: var(--radius-medium); } .files-loading-overlay .spinning { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* MentionTextarea Component Styles */ .mentionTextareaContainer { position: relative; width: 100%; } .mentionTextarea { width: 100%; padding: 16px 20px; border: 2px solid #e5e7eb; border-radius: 12px; font-size: 15px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #1f2937; min-height: 140px; max-height: 400px; overflow-y: auto; transition: all 0.3s ease; line-height: 1.6; background: #fff; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; } /* Placeholder para contenteditable */ .mentionTextarea:empty:before { content: attr(data-placeholder); color: #9ca3af; font-style: italic; pointer-events: none; } .mentionTextarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(29, 111, 164, 0.1); } .mentionTextarea[contenteditable="false"] { background: #f3f4f6; cursor: not-allowed; opacity: 0.6; } /* Estilos para menciones dentro del editor */ .mentionTextarea .mention { display: inline-block; color: var(--primary); background: rgba(29, 111, 164, 0.1); padding: 2px 6px; border-radius: 4px; font-weight: 500; cursor: default; user-select: none; margin: 0 2px; } .mentionTextarea .mention:hover { background: rgba(29, 111, 164, 0.15); } /* Mention Dropdown */ .mentionDropdown { position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 8px; background: white; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); max-height: 280px; overflow-y: auto; z-index: 1000; animation: slideUp 0.2s ease; } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .mentionDropdown::-webkit-scrollbar { width: 6px; } .mentionDropdown::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 0 12px 12px 0; } .mentionDropdown::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } .mentionDropdown::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Dropdown Item */ .mentionDropdownItem { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; transition: all 0.15s ease; border-bottom: 1px solid #f1f5f9; } .mentionDropdownItem:last-child { border-bottom: none; } .mentionDropdownItem:hover, .mentionDropdownItem.selected { background: #f8fafc; } .mentionDropdownItem.selected { background: #eff6ff; border-left: 3px solid var(--primary); } .mentionUserAvatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, #155D8A 100%); color: white; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .mentionUserInfo { flex: 1; min-width: 0; } .mentionUserName { font-size: 14px; font-weight: 600; color: #111827; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mentionUserEmail { font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Loading State */ .mentionDropdownLoading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px; color: #6b7280; font-size: 13px; } .spinning { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Empty State */ .mentionDropdownEmpty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px; color: #9ca3af; font-size: 13px; } /* Responsive */ @media (max-width: 640px) { .mentionDropdown { max-height: 200px; } .mentionDropdownItem { padding: 10px 12px; } .mentionUserAvatar { width: 32px; height: 32px; font-size: 12px; } .mentionUserName { font-size: 13px; } .mentionUserEmail { font-size: 11px; } } /* Comments — Linear/Notion style */ .cm-root { display: flex; flex-direction: column; gap: 0; width: 100%; } /* ── Contador ── */ .cm-count { font-size: 11px; font-weight: 600; color: var(--text-tertiary, #94a3b8); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 0 12px 0; border-bottom: 1px solid var(--border-color, #e5e7eb); margin-bottom: 4px; } /* ── Lista ── */ .cm-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; } /* ── Empty ── */ .cm-empty { padding: 32px 0; text-align: center; font-size: 13px; color: var(--text-tertiary, #94a3b8); } /* ── Avatar ── */ .cm-avatar { border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; letter-spacing: 0.3px; } /* ── Comentario principal ── */ .cm-comment { display: flex; gap: 10px; padding: 8px 10px; border-radius: 8px; transition: background 0.12s ease; } .cm-comment:hover { background: var(--bg-secondary, #f8fafc); } .cm-body { flex: 1; min-width: 0; padding-top: 2px; } /* ── Meta línea: autor + fecha ── */ .cm-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .cm-author { font-size: 13px; font-weight: 600; color: var(--text-primary, #111827); line-height: 1; } .cm-date { font-size: 11px; color: var(--text-tertiary, #94a3b8); font-weight: 400; } .cm-edited { font-size: 11px; color: var(--text-tertiary, #94a3b8); font-style: italic; } /* ── Texto del comentario ── */ .cm-text { margin: 0 0 6px 0; font-size: 13.5px; color: var(--text-secondary, #374151); line-height: 1.6; white-space: pre-wrap; word-break: break-word; } /* ── Menciones ── */ .cm-mention { color: var(--primary, #1d6fa4); font-weight: 600; background: rgba(29, 111, 164, 0.08); padding: 1px 5px; border-radius: 4px; font-size: inherit; } /* ── Acciones (ocultas, visibles en hover del comentario) ── */ .cm-actions { display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity 0.12s ease; min-height: 22px; } .cm-comment:hover .cm-actions { opacity: 1; } .cm-action-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: none; border: none; font-size: 12px; font-weight: 500; color: var(--text-tertiary, #94a3b8); cursor: pointer; border-radius: 5px; transition: color 0.12s, background 0.12s; white-space: nowrap; } .cm-action-btn:hover { color: var(--text-primary, #111827); background: var(--bg-card, #fff); } .cm-action-replies { color: var(--primary, #1d6fa4); font-weight: 600; } .cm-action-replies:hover { color: var(--primary, #1d6fa4); background: rgba(29, 111, 164, 0.06); } /* ── Reply indentado ── */ .cm-reply { margin-left: 40px; padding: 6px 10px; } .cm-reply .cm-text { font-size: 13px; } /* ── Contenedor de replies (con borde izquierdo) ── */ .cm-replies { margin-top: 4px; margin-left: 0; padding-left: 14px; border-left: 2px solid var(--border-color, #e5e7eb); display: flex; flex-direction: column; gap: 0; } /* ── Formulario de respuesta inline ── */ .cm-reply-form { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; animation: cm-slide-in 0.15s ease; } .cm-reply-col { flex: 1; display: flex; flex-direction: column; gap: 6px; } .cm-reply-input-wrap { padding: 8px 12px; background: var(--bg-secondary, #f8fafc); border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px; transition: border-color 0.15s, box-shadow 0.15s; } .cm-reply-input-wrap:focus-within { border-color: var(--primary, #1d6fa4); box-shadow: 0 0 0 3px rgba(29, 111, 164, 0.08); background: #fff; } .cm-reply-input, .cm-compose-input { width: 100%; font-family: inherit; font-size: 13.5px; line-height: 1.5; color: var(--text-primary, #111827); background: transparent; border: none; outline: none; resize: none; padding: 0; } .cm-reply-input::placeholder, .cm-compose-input::placeholder { color: var(--text-tertiary, #94a3b8); } /* ── Acciones reply / compose ── */ .cm-reply-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; } .cm-compose-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; } .cm-cancel-btn { padding: 5px 12px; background: none; border: none; font-size: 12px; font-weight: 500; color: var(--text-tertiary, #94a3b8); cursor: pointer; border-radius: 6px; transition: color 0.12s, background 0.12s; } .cm-cancel-btn:hover { color: var(--text-primary, #111827); background: var(--bg-secondary, #f1f5f9); } .cm-submit-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; background: var(--primary, #1d6fa4); color: white; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.12s, opacity 0.12s; } .cm-submit-btn:hover:not(:disabled) { background: var(--primary-dark, #155f8a); } .cm-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ── Compose (misma estructura que reply-form) ── */ .cm-compose { display: flex; gap: 8px; align-items: flex-start; } .cm-compose-col { flex: 1; display: flex; flex-direction: column; gap: 6px; } .cm-compose-box { padding: 8px 12px; background: var(--bg-secondary, #f8fafc); border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px; transition: border-color 0.15s, box-shadow 0.15s; } .cm-compose-box:focus-within { border-color: var(--primary, #1d6fa4); box-shadow: 0 0 0 3px rgba(29, 111, 164, 0.08); background: #fff; } /* ── Estados (loading / error) ── */ .cm-state { display: flex; align-items: center; gap: 8px; padding: 24px 0; font-size: 13px; color: var(--text-tertiary, #94a3b8); justify-content: center; } .cm-state-error { color: var(--danger, #ef4444); } .cm-state-icon { color: var(--primary, #1d6fa4); } /* ── Spinner ── */ .cm-spin { animation: cm-spin 0.8s linear infinite; flex-shrink: 0; } @keyframes cm-spin { to { transform: rotate(360deg); } } @keyframes cm-slide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ── Overrides MentionTextarea dentro del compose y reply ── className se aplica directamente sobre div.mentionTextarea, por eso el selector es .mentionTextarea.cm-X (mismo elemento, sin espacio) */ .mentionTextarea.cm-compose-input, .mentionTextarea.cm-reply-input { min-height: unset !important; padding: 0 !important; border: none !important; border-radius: 0 !important; font-size: 13.5px !important; font-family: inherit !important; background: transparent !important; box-shadow: none !important; line-height: 1.5 !important; color: var(--text-primary, #111827) !important; } .mentionTextarea.cm-compose-input:focus, .mentionTextarea.cm-reply-input:focus { outline: none !important; border: none !important; box-shadow: none !important; } .mentionTextarea.cm-compose-input:empty:before, .mentionTextarea.cm-reply-input:empty:before { font-style: normal !important; font-size: 13.5px !important; } /* ── Responsive ── */ @media (max-width: 640px) { .cm-comment { padding: 6px 4px; } .cm-reply { margin-left: 28px; } .cm-actions { opacity: 1; /* siempre visible en móvil */ } } /* ContactComments — wrapper mínimo, Comments maneja su propio estilo */ .contact-comments-wrapper { width: 100%; } /* AvatarUpload Component - Diseño Compacto */ .avatar-upload-container { display: flex; flex-direction: column; gap: 20px; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); padding: 24px; border-radius: 16px; border: 1px solid #e2e8f0; } .avatar-upload-header h4 { font-size: 15px; font-weight: 600; color: #1e293b; margin: 0 0 6px 0; letter-spacing: -0.01em; } .avatar-upload-hint { font-size: 12px; color: #64748b; margin: 0; line-height: 1.5; } .avatar-upload-content { display: flex; gap: 32px; align-items: flex-start; } /* Preview Container */ .avatar-preview-container { flex-shrink: 0; } .avatar-preview-wrapper { position: relative; width: 160px; height: 160px; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); background: white; } .avatar-preview-image { width: 100%; height: 100%; object-fit: cover; } .avatar-remove-btn { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); border: none; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; } .avatar-remove-btn:hover { background: rgba(239, 68, 68, 0.9); transform: scale(1.1); } .avatar-placeholder { width: 160px; height: 160px; border-radius: 16px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border: 2px dashed #cbd5e1; display: flex; align-items: center; justify-content: center; color: #94a3b8; } /* Dropzone */ .avatar-dropzone { flex: 1; min-height: 160px; border: 2px dashed #cbd5e1; border-radius: 16px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .avatar-dropzone:hover { border-color: var(--primary); background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15); transform: translateY(-2px); } .avatar-dropzone.active { border-color: var(--primary); background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25); transform: scale(1.02); } .avatar-dropzone svg { color: #94a3b8; transition: color 0.3s; } .avatar-dropzone:hover svg { color: var(--primary); } .dropzone-text { margin: 0; font-size: 15px; font-weight: 500; color: #64748b; } .dropzone-or { margin: 0; font-size: 13px; color: #94a3b8; } .avatar-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--primary); } .avatar-loading p { margin: 0; font-size: 14px; font-weight: 500; } .spinning { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Responsive */ @media (max-width: 768px) { .avatar-upload-content { flex-direction: column; align-items: center; } .avatar-dropzone { width: 100%; } } /* Tags Component Styles */ .tags-component { position: relative; width: 100%; } .tags-component.disabled { opacity: 0.6; pointer-events: none; } .tags-input-container { display: flex; align-items: center; gap: var(--space-3); min-height: 42px; padding: var(--space-2) var(--space-3); background: white; border: 2px solid var(--slate-300); border-radius: var(--radius-lg); cursor: text; transition: all var(--transition-fast); } .tags-input-container:hover { border-color: var(--slate-400); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } .tags-input-container.focused { border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08); } .tags-selected { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; } /* Tag Chips - Estilo píldora redondeada - TAMAÑO REDUCIDO */ .tag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--slate-100); border: 1.5px solid; border-radius: 999px; /* Completamente redondeado (píldora) */ font-size: 12px; font-weight: var(--font-semibold); color: var(--slate-700); max-width: 100%; transition: all var(--transition-fast); position: relative; } .tag-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* Botón de color (punto) - TAMAÑO REDUCIDO */ .tag-color-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; padding: 0; } .tag-color-dot:hover { transform: scale(1.15); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } /* Color Picker Inline - TAMAÑO REDUCIDO */ .tag-color-picker { display: flex; gap: 4px; padding: 3px; background: white; border-radius: 999px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); animation: scaleIn 0.15s ease-out; } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .color-option { width: 20px; height: 20px; border-radius: 50%; border: 2px solid white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); cursor: pointer; transition: all var(--transition-fast); padding: 0; } .color-option:hover { transform: scale(1.2); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); z-index: 1; } .tag-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tag-remove { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; background: rgba(0, 0, 0, 0.05); border: none; border-radius: 50%; cursor: pointer; color: currentColor; opacity: 0.7; transition: all var(--transition-fast); flex-shrink: 0; } .tag-remove:hover { opacity: 1; background: rgba(0, 0, 0, 0.15); transform: scale(1.1); } .tag-remove svg { width: 10px; height: 10px; } .tags-input { flex: 1; min-width: 120px; height: 20px; border: none; outline: none; font-size: 12px; font-family: inherit; color: var(--slate-900); background: transparent; } .tags-input::placeholder { color: var(--slate-400); } .tags-dropdown-icon { flex-shrink: 0; color: var(--slate-400); transition: transform var(--transition-fast); } .tags-input-container.focused .tags-dropdown-icon { transform: rotate(180deg); } .tags-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 320px; overflow-y: auto; background: white; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08); z-index: 10; animation: slideDown 0.2s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .tags-dropdown-item { display: flex; align-items: center; gap: var(--space-3); padding: 10px 16px; cursor: pointer; transition: all var(--transition-fast); font-size: var(--text-sm); color: var(--slate-900); border-left: 3px solid transparent; } .tags-dropdown-item:hover, .tags-dropdown-item.highlighted { background: var(--slate-50); border-left-color: var(--primary-500); padding-left: 18px; } .tags-dropdown-item.create { color: var(--primary-600); font-weight: var(--font-semibold); border-top: 1px solid var(--slate-200); gap: var(--space-2); } .tags-dropdown-item.create:hover, .tags-dropdown-item.create.highlighted { background: var(--primary-50); } /* Preview de tag en dropdown - Muestra la etiqueta completa - TAMAÑO REDUCIDO */ .tag-preview { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; border: 1.5px solid; font-size: 12px; font-weight: var(--font-semibold); transition: all var(--transition-fast); flex: 1; } .tags-dropdown-item:hover .tag-preview, .tags-dropdown-item.highlighted .tag-preview { transform: scale(1.02); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .tag-preview-label { flex: 1; } .tags-empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--slate-500); font-size: var(--text-sm); } .tags-count { position: absolute; top: -10px; right: -10px; padding: 4px 8px; background: white; border: 2px solid var(--primary-500); border-radius: var(--radius-full); font-size: 11px; font-weight: var(--font-bold); color: var(--primary-600); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } /* Scrollbar personalizado */ .tags-dropdown::-webkit-scrollbar { width: 6px; } .tags-dropdown::-webkit-scrollbar-track { background: transparent; } .tags-dropdown::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 3px; } .tags-dropdown::-webkit-scrollbar-thumb:hover { background: var(--slate-400); } /* Responsive */ @media (max-width: 640px) { .tags-input { min-width: 80px; } .tags-dropdown { max-height: 200px; } } /* ContactTags Component - Diseño Horizontal Compacto como Oportunidades */ .contact-tags-container { position: relative; display: flex; align-items: center; gap: 12px; padding: 0; } .contact-tags-header { display: flex; align-items: center; gap: 6px; color: #64748b; font-size: 13px; font-weight: 500; white-space: nowrap; flex-shrink: 0; } .contact-tags-header svg { color: #64748b; flex-shrink: 0; } .tags-label { font-size: 13px; font-weight: 500; } .contact-tags-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; } /* Pills de etiquetas - idéntico a Oportunidades */ .tag-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap; transition: all 0.15s ease; line-height: 1; } .tag-pill:hover { filter: brightness(0.9); transform: translateY(-1px); } .tag-pill-label { line-height: 1; } .tag-pill-remove { display: flex; align-items: center; justify-content: center; padding: 0; background: rgba(255, 255, 255, 0.3); border: none; border-radius: 50%; width: 14px; height: 14px; cursor: pointer; color: white; transition: all 0.15s ease; } .tag-pill-remove:hover { background: rgba(255, 255, 255, 0.5); } .tag-pill-remove:disabled { opacity: 0.5; cursor: not-allowed; } /* Contador +N */ .tag-pill-count { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; background: #e2e8f0; border: none; border-radius: 12px; font-size: 11px; font-weight: 600; color: #64748b; cursor: pointer; transition: all 0.15s ease; line-height: 1; } .tag-pill-count:hover { background: #cbd5e1; } /* Botón agregar */ .tag-add-button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: transparent; border: 1px dashed #cbd5e1; border-radius: 12px; font-size: 11px; font-weight: 500; color: #64748b; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; line-height: 1; } .tag-add-button:hover { border-color: var(--primary); color: var(--primary); background: rgba(99, 102, 241, 0.05); } .tag-add-button:disabled { opacity: 0.5; cursor: not-allowed; } /* Modal selector overlay */ .tag-selector-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 10000; } .tag-selector-modal { position: relative; width: 90%; max-width: 500px; padding: 20px; background: white; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); z-index: 10001; } .tag-selector-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .tag-selector-header h4 { margin: 0; font-size: 16px; font-weight: 600; color: #1e293b; } .close-button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: none; border-radius: 8px; color: #64748b; cursor: pointer; transition: all 0.15s ease; } .close-button:hover { background: #f1f5f9; color: #1e293b; } /* Responsive */ @media (max-width: 768px) { .contact-tags-container { flex-wrap: wrap; } .contact-tags-header { width: 100%; } .tag-selector-modal { width: 95%; padding: 16px; } } /* Contact Form Modal Styles - Scoped para evitar conflictos */ .contact-form-modal { display: flex; flex-direction: column; gap: var(--space-xlarge); } /* ═══════════════════════════════════════════════ HEADER MODULES: Avatar y Tags arriba del formulario ═══════════════════════════════════════════════ */ .contact-form-header-modules { display: flex; flex-direction: column; gap: 32px; margin-bottom: 32px; } .contact-tags-card { padding: var(--space-medium) var(--space-large); background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); } /* ═══════════════════════════════════════════════ TABS SECTION (Solo Archivos y Comentarios) ═══════════════════════════════════════════════ */ .contact-form-tabs-section { margin-top: 32px; } /* Segmented Control (iOS-style) */ .contact-form-tabs-section .segmented-control-wrapper { padding: var(--space-large); background: var(--bg-secondary); border-radius: var(--radius-large); border: 1px solid var(--border-color); } .contact-form-tabs-section .segmented-control { display: inline-flex; background: var(--bg-tertiary); border-radius: var(--radius-large); padding: 4px; gap: 4px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); } .contact-form-tabs-section .segment { display: flex; align-items: center; gap: var(--space-xsmall); padding: var(--space-small) var(--space-medium); background: transparent; border: none; border-radius: var(--radius-medium); color: var(--text-secondary); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; position: relative; } .contact-form-tabs-section .segment:hover:not(.active) { color: var(--text-primary); background: rgba(0, 0, 0, 0.04); } .contact-form-tabs-section .segment.active { background: white; color: var(--primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); } /* Content Area (sin tarjeta, separado) */ .contact-form-tabs-section .contact-content-area { padding-top: var(--space-large); } .contact-form-tabs-section .contact-content-area > div { min-height: 200px; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Secciones del formulario - mejores prácticas UI/UX */ .contact-form-modal .form-section { display: flex; flex-direction: column; gap: var(--space-large); padding: var(--space-xlarge) var(--space-large); background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); transition: all var(--transition-base); } .contact-form-modal .form-section:hover { border-color: var(--primary-light); box-shadow: 0 2px 8px rgba(29, 111, 164, 0.08); } .contact-form-modal .form-section:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } /* Headers de sección */ .contact-form-modal .form-section h3 { margin: 0 0 var(--space-medium) 0; padding: 0 0 var(--space-small) 0; font-size: var(--font-size-large); font-weight: var(--font-weight-semibold); color: var(--primary); border-bottom: 2px solid var(--border-color); } /* Grid de inputs */ .contact-form-modal .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 48px; row-gap: var(--space-xlarge); } /* Checkbox group */ .contact-form-modal .checkbox-group { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-medium); margin-top: var(--space-small); } .contact-form-modal .checkbox-label { display: flex; align-items: center; gap: var(--space-small); cursor: pointer; font-size: var(--font-size-base); color: var(--text-primary); user-select: none; padding: var(--space-small); border-radius: var(--radius-small); transition: background var(--transition-fast); } .contact-form-modal .checkbox-label:hover { background: var(--bg-hover); } .contact-form-modal .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary); } .contact-form-modal .checkbox-label span { font-weight: var(--font-weight-medium); } /* Responsive */ @media (max-width: 768px) { .contact-form-header-modules { gap: 24px; margin-bottom: 24px; padding-bottom: 24px; } .contact-form-tabs-section { margin-top: 24px; padding-top: 24px; } .contact-form-tabs-section .segment { padding: var(--space-xsmall) var(--space-small); font-size: var(--font-size-small); } .contact-form-modal .form-section { padding: var(--space-large); } .contact-form-modal .form-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: var(--space-large); } .contact-form-modal .checkbox-group { grid-template-columns: 1fr; } } /* Negotiations List Styles - Matching FileAttachments Design */ .negotiationsContainer { display: flex; flex-direction: column; gap: 24px; } /* ═══ HEADER ═══ */ .negotiationsHeader { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; } .negotiationsHeaderInfo { display: flex; align-items: center; gap: 12px; } .negotiationsTitle { font-size: 18px; font-weight: 600; color: #1e293b; margin: 0; } .negotiationsCount { font-size: 13px; color: #64748b; background: #f1f5f9; padding: 4px 12px; border-radius: 12px; font-weight: 500; } .uploadButton { display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--primary); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(29, 111, 164, 0.25); } .uploadButton:hover { background: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(29, 111, 164, 0.35); } .uploadButton:active { transform: translateY(0); } /* ═══ LOADING STATE ═══ */ .negotiationsLoading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-xhuge); color: var(--neutral); } .spinner { width: 32px; height: 32px; border: 3px solid var(--neutral-light); border-top-color: var(--primary); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; margin-bottom: var(--space-medium); } @keyframes spin { to { transform: rotate(360deg); } } /* ═══ EMPTY STATE ═══ */ .emptyState { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 64px 32px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-radius: 16px; border: 1px solid #e2e8f0; } .emptyState svg { color: #cbd5e1; opacity: 0.6; } .emptyStateText { margin: 0; color: #64748b; font-size: 15px; font-weight: 500; } .emptyStateButton { margin-top: 8px; padding: 10px 24px; background: var(--primary); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .emptyStateButton:hover { background: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(29, 111, 164, 0.3); } /* ═══ TABLE ═══ */ .tableContainer { border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; background: white; } .negotiationsTable { width: 100%; border-collapse: collapse; font-size: 14px; } .negotiationsTable thead { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-bottom: 2px solid #e2e8f0; } .negotiationsTable thead th { padding: 16px 20px; text-align: left; font-weight: 600; color: #475569; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; } .negotiationsTable thead th.actionsColumn { text-align: right; padding-right: 24px; } .negotiationsTable tbody tr { border-bottom: 1px solid #f1f5f9; transition: all 0.2s ease; } .negotiationsTable tbody tr:last-child { border-bottom: none; } .negotiationsTable tbody tr:hover { background: linear-gradient(90deg, #f8fafc 0%, #ffffff 100%); cursor: pointer; } .negotiationRow td { padding: 16px 20px; vertical-align: middle; } /* Título con descripción */ .negotiationTitleCell { max-width: 300px; } .negotiationTitle { display: flex; flex-direction: column; gap: 4px; } .negotiationTitleText { font-weight: 600; color: #1e293b; font-size: 14px; line-height: 1.4; } .negotiationDescription { font-size: 12px; color: #64748b; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Fechas */ .negotiationDateCell { color: #475569; font-size: 13px; white-space: nowrap; } /* Orden */ .negotiationOrderCell { color: #475569; font-size: 14px; font-weight: 600; text-align: center; } /* Acciones */ .negotiationActionsCell { text-align: right; padding-right: 24px; } .negotiationActions { display: inline-flex; gap: 8px; align-items: center; } .actionButton { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid #e2e8f0; background: white; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; color: #64748b; } .actionButton svg { flex-shrink: 0; } .actionButton:hover { border-color: #cbd5e1; background: #f8fafc; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .editButton:hover { color: var(--primary); border-color: var(--primary); background: rgba(29, 111, 164, 0.05); } .deleteButton:hover { color: #ef4444; border-color: #ef4444; background: rgba(239, 68, 68, 0.05); } .actionButton:active { transform: translateY(0); } /* AccountTags Component - Diseño Horizontal Compacto como Oportunidades */ .account-tags-container { position: relative; display: flex; align-items: center; gap: 12px; padding: 0; } .account-tags-header { display: flex; align-items: center; gap: 6px; color: #64748b; font-size: 13px; font-weight: 500; white-space: nowrap; flex-shrink: 0; } .account-tags-header svg { color: #64748b; flex-shrink: 0; } .tags-label { font-size: 13px; font-weight: 500; } .account-tags-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; } /* Pills de etiquetas - idéntico a Oportunidades */ .tag-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap; transition: all 0.15s ease; line-height: 1; } .tag-pill:hover { filter: brightness(0.9); transform: translateY(-1px); } .tag-pill-label { line-height: 1; } .tag-pill-remove { display: flex; align-items: center; justify-content: center; padding: 0; background: rgba(255, 255, 255, 0.3); border: none; border-radius: 50%; width: 14px; height: 14px; cursor: pointer; color: white; transition: all 0.15s ease; } .tag-pill-remove:hover { background: rgba(255, 255, 255, 0.5); } .tag-pill-remove:disabled { opacity: 0.5; cursor: not-allowed; } /* Contador +N */ .tag-pill-count { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; background: #e2e8f0; border: none; border-radius: 12px; font-size: 11px; font-weight: 600; color: #64748b; cursor: pointer; transition: all 0.15s ease; line-height: 1; } .tag-pill-count:hover { background: #cbd5e1; } /* Botón agregar */ .tag-add-button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: transparent; border: 1px dashed #cbd5e1; border-radius: 12px; font-size: 11px; font-weight: 500; color: #64748b; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; line-height: 1; } .tag-add-button:hover { border-color: var(--primary); color: var(--primary); background: rgba(99, 102, 241, 0.05); } .tag-add-button:disabled { opacity: 0.5; cursor: not-allowed; } /* Modal selector overlay */ .tag-selector-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 10000; } .tag-selector-modal { position: relative; width: 90%; max-width: 500px; padding: 20px; background: white; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); z-index: 10001; } .tag-selector-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .tag-selector-header h4 { margin: 0; font-size: 16px; font-weight: 600; color: #1e293b; } .close-button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: none; border-radius: 8px; color: #64748b; cursor: pointer; transition: all 0.15s ease; } .close-button:hover { background: #f1f5f9; color: #1e293b; } /* Responsive */ @media (max-width: 768px) { .account-tags-container { flex-wrap: wrap; } .account-tags-header { width: 100%; } .tag-selector-modal { width: 95%; padding: 16px; } } /* AccountFiles Component - Sin headers, solo el FileAttachments puro */ .account-files-container { position: relative; } .files-loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 10; border-radius: 12px; min-height: 200px; } .files-loading-overlay span { font-size: 13px; color: #64748b; font-weight: 500; } .files-loading-overlay .spinning { color: var(--primary); animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Negotiation Form Modal — mismos estilos que AccountFormModal */ .negotiation-form-modal { display: flex; flex-direction: column; gap: var(--space-xlarge); } .negotiation-form-modal .form-section { display: flex; flex-direction: column; gap: var(--space-large); padding: var(--space-xlarge) var(--space-large); background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); transition: all var(--transition-base); } .negotiation-form-modal .form-section:hover { border-color: var(--primary-light); box-shadow: 0 2px 8px rgba(29, 111, 164, 0.08); } .negotiation-form-modal .form-section:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .negotiation-form-modal .form-section h3 { margin: 0 0 var(--space-medium) 0; padding: 0 0 var(--space-small) 0; font-size: var(--font-size-large); font-weight: var(--font-weight-semibold); color: var(--primary); border-bottom: 2px solid var(--border-color); } .negotiation-form-modal .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 48px; row-gap: var(--space-xlarge); } /* Header de etiquetas — solo modo edición */ .negotiation-form-header-modules { margin-bottom: 24px; } .negotiation-tags-card { padding: var(--space-medium) var(--space-large); background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); } /* Tabs Archivos / Comentarios */ .negotiation-form-tabs-section { margin-top: 32px; } .negotiation-form-tabs-section .segmented-control-wrapper { padding: var(--space-large); background: var(--bg-secondary); border-radius: var(--radius-large); border: 1px solid var(--border-color); } .negotiation-form-tabs-section .segmented-control { display: inline-flex; background: var(--bg-tertiary); border-radius: var(--radius-large); padding: 4px; gap: 4px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); } .negotiation-form-tabs-section .segment { display: flex; align-items: center; gap: var(--space-xsmall); padding: var(--space-small) var(--space-medium); background: transparent; border: none; border-radius: var(--radius-medium); color: var(--text-secondary); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; } .negotiation-form-tabs-section .segment:hover:not(.active) { color: var(--text-primary); background: rgba(0, 0, 0, 0.04); } .negotiation-form-tabs-section .segment.active { background: white; color: var(--primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); } .negotiation-content-area { padding-top: var(--space-large); min-height: 200px; } /* Responsive */ @media (max-width: 768px) { .negotiation-form-modal .form-section { padding: var(--space-large); } .negotiation-form-modal .form-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: var(--space-large); } .negotiation-form-tabs-section { margin-top: 24px; } .negotiation-form-tabs-section .segment { padding: var(--space-xsmall) var(--space-small); font-size: var(--font-size-small); } } /* Negotiation Detail Modal Styles */ .negotiation-detail-modal { max-width: 900px; } .negotiation-detail-content { display: flex; flex-direction: column; gap: var(--space-xlarge); } /* ═══ HEADER SECTION ═══ */ .negotiation-header-section { padding: var(--space-large); background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-radius: var(--radius-large); border: 1px solid var(--neutral-light); } .negotiation-info-grid { display: flex; gap: var(--space-large); } .negotiation-main-info { display: flex; gap: var(--space-large); align-items: flex-start; width: 100%; } .negotiation-avatar-large { width: 80px; height: 80px; min-width: 80px; border-radius: var(--radius-large); background: linear-gradient(135deg, #1D6FA4 0%, #155D8A 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(29, 111, 164, 0.25); } .negotiation-header-text { flex: 1; display: flex; flex-direction: column; gap: var(--space-small); } .negotiation-title-group { display: flex; flex-direction: column; gap: var(--space-xsmall); } .negotiation-title-with-status { display: flex; align-items: center; gap: var(--space-medium); flex-wrap: wrap; } .negotiation-modal-title { font-size: var(--font-size-xxlarge); font-weight: var(--font-weight-bold); color: var(--neutral-darkest); margin: 0; line-height: 1.2; } .negotiation-meta-info { display: flex; gap: var(--space-large); flex-wrap: wrap; font-size: var(--font-size-small); color: var(--neutral-dark); } .negotiation-meta-info span { display: flex; align-items: center; gap: var(--space-xsmall); } .meta-code { font-weight: var(--font-weight-semibold); color: var(--neutral-darkest); } .meta-opportunity { color: var(--primary); font-weight: var(--font-weight-medium); } /* ═══ INFO SECTIONS ═══ */ .negotiation-info-section { display: flex; flex-direction: column; gap: var(--space-medium); } .section-title { font-size: var(--font-size-large); font-weight: var(--font-weight-semibold); color: var(--neutral-darkest); margin: 0; padding-bottom: var(--space-small); border-bottom: 2px solid var(--neutral-light); } .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-large); } .info-item { display: flex; flex-direction: column; gap: var(--space-xsmall); } .info-item.full-width { grid-column: 1 / -1; } .info-label { display: flex; align-items: center; gap: var(--space-xsmall); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); color: var(--neutral-dark); text-transform: uppercase; letter-spacing: 0.5px; } .info-value { font-size: var(--font-size-base); color: var(--neutral-darkest); line-height: 1.5; white-space: pre-wrap; } /* ═══ FOOTER ACTIONS ═══ */ .modal-footer-actions { display: flex; justify-content: space-between; align-items: center; width: 100%; } .footer-actions-left, .footer-actions-right { display: flex; gap: var(--space-medium); } /* ═══ RESPONSIVE ═══ */ @media (max-width: 768px) { .negotiation-main-info { flex-direction: column; align-items: center; text-align: center; } .negotiation-header-text { align-items: center; } .negotiation-title-with-status { justify-content: center; } .negotiation-meta-info { justify-content: center; } .info-grid { grid-template-columns: 1fr; } .modal-footer-actions { flex-direction: column; gap: var(--space-medium); } .footer-actions-left, .footer-actions-right { width: 100%; justify-content: stretch; } .footer-actions-left button, .footer-actions-right button { flex: 1; } } /* ═══ TAB CONTENT ═══ */ .tab-content-wrapper { display: flex; flex-direction: column; gap: var(--space-xlarge); padding: var(--space-medium) 0; } /* ═══ MEETINGS SECTION ═══ */ .meetings-section { padding: var(--space-medium); } .no-meetings { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-xxlarge); gap: var(--space-medium); color: var(--text-secondary); text-align: center; } .no-meetings svg { color: var(--neutral-medium-light); } .meetings-list { display: flex; flex-direction: column; gap: var(--space-small); } .meeting-row { display: flex; align-items: flex-start; gap: var(--space-medium); padding: var(--space-medium); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-medium); cursor: pointer; transition: all var(--transition-fast); } .meeting-row:hover { border-color: var(--primary); box-shadow: var(--shadow-small); transform: translateY(-1px); } .meeting-row-icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ddf4ff 0%, #b6e3ff 100%); border-radius: var(--radius-medium); color: var(--primary); } .meeting-row-content { flex: 1; display: flex; flex-direction: column; gap: var(--space-xsmall); min-width: 0; } .meeting-row-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-medium); flex-wrap: wrap; } .meeting-row-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .meeting-row-date { font-size: var(--font-size-small); color: var(--text-secondary); flex-shrink: 0; } .meeting-row-meta { display: flex; align-items: center; gap: var(--space-large); flex-wrap: wrap; } .meeting-row-meta .meta-item { display: flex; align-items: center; gap: var(--space-xsmall); font-size: var(--font-size-small); color: var(--text-secondary); } .meeting-row-meta .meta-item svg { color: var(--text-tertiary); } @media (max-width: 768px) { .meeting-row { flex-direction: column; align-items: stretch; } .meeting-row-icon { align-self: flex-start; } .meeting-row-header { flex-direction: column; align-items: flex-start; gap: var(--space-xsmall); } .meeting-row-title { white-space: normal; } .meeting-row-meta { flex-direction: column; align-items: flex-start; gap: var(--space-small); } } /* Opportunity Detail Modal */ .opportunity-detail-modal .modal-body { padding: var(--space-xlarge); } .opportunity-detail-modal .opportunity-detail-content { display: flex; flex-direction: column; gap: var(--space-xlarge); } /* ── Header ───────────────────────────────────────── */ .opportunity-detail-modal .opportunity-header-section { padding-bottom: var(--space-large); border-bottom: 2px solid var(--border-color); } .opportunity-detail-modal .opportunity-info-grid { display: flex; flex-direction: column; gap: var(--space-large); padding: var(--space-xlarge); background: var(--bg-secondary); border-radius: var(--radius-large); border: 1px solid var(--border-color); } .opportunity-detail-modal .opportunity-main-info { display: flex; gap: var(--space-large); } .opportunity-detail-modal .opportunity-avatar-large { width: 80px; height: 80px; border-radius: var(--radius-large); display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; box-shadow: var(--shadow-medium); } .opportunity-detail-modal .opportunity-header-text { display: flex; flex-direction: column; gap: var(--space-medium); flex: 1; min-width: 0; } .opportunity-detail-modal .opportunity-title-with-status { display: flex; align-items: center; justify-content: space-between; gap: var(--space-medium); flex-wrap: wrap; } .opportunity-detail-modal .opportunity-modal-title { font-size: var(--font-size-xxlarge); font-weight: var(--font-weight-bold); color: var(--text-primary); margin: 0; line-height: 1.2; } /* Tags en header */ .opportunity-detail-modal .opportunity-meta-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .opportunity-detail-modal .opportunity-meta-tags .tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.4; letter-spacing: 0.01em; } .opportunity-detail-modal .opp-no-tags { color: var(--text-tertiary); font-size: 13px; font-style: italic; } /* ── Footer ───────────────────────────────────────── */ .opportunity-detail-modal .modal-footer-actions { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: var(--space-xlarge); } .opportunity-detail-modal .footer-actions-left, .opportunity-detail-modal .footer-actions-right { display: flex; gap: var(--space-medium); align-items: center; } /* ── KPIs ─────────────────────────────────────────── */ .opportunity-detail-modal .opportunity-kpis-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-medium); } .opportunity-detail-modal .kpi-card { display: flex; align-items: center; gap: var(--space-small); padding: var(--space-medium); background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); transition: all var(--transition-base); } .opportunity-detail-modal .kpi-card:hover { border-color: var(--primary-light); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transform: translateY(-1px); } .opportunity-detail-modal .kpi-icon { width: 36px; height: 36px; border-radius: var(--radius-small); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .opportunity-detail-modal .kpi-content { display: flex; flex-direction: column; gap: var(--space-xxsmall); min-width: 0; } .opportunity-detail-modal .kpi-label { font-size: var(--font-size-xsmall); color: var(--text-secondary); font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .opportunity-detail-modal .kpi-value { font-size: var(--font-size-large); color: var(--text-primary); font-weight: var(--font-weight-bold); line-height: 1; } /* ── Segmented Control ────────────────────────────── */ .opportunity-detail-modal .segmented-control-wrapper { padding: var(--space-large); background: var(--bg-secondary); border-radius: var(--radius-large); border: 1px solid var(--border-color); } .opportunity-detail-modal .segmented-control { display: inline-flex; background: var(--bg-tertiary); border-radius: var(--radius-large); padding: 4px; gap: 4px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); } .opportunity-detail-modal .segment { display: flex; align-items: center; gap: var(--space-xsmall); padding: var(--space-small) var(--space-medium); background: transparent; border: none; border-radius: var(--radius-medium); color: var(--text-secondary); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; } .opportunity-detail-modal .segment:hover:not(.active) { color: var(--text-primary); background: rgba(0, 0, 0, 0.04); } .opportunity-detail-modal .segment.active { background: white; color: var(--primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); } .opportunity-detail-modal .segment-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--bg-secondary); color: var(--text-secondary); border-radius: var(--radius-full); font-size: 11px; font-weight: var(--font-weight-bold); line-height: 1; } .opportunity-detail-modal .segment.active .segment-badge { background: var(--primary); color: white; } /* ── Content Area ─────────────────────────────────── */ .opportunity-detail-modal .opportunity-content-area { padding-top: var(--space-xxsmall); } .opportunity-detail-modal .opportunity-content-area > div { min-height: 300px; } /* ── Overview ─────────────────────────────────────── */ .opportunity-detail-modal .overview-section { display: flex; flex-direction: column; gap: var(--space-large); } /* Card de información (grid plano) */ .opportunity-detail-modal .opp-info-card { background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); padding: var(--space-large); } .opportunity-detail-modal .opp-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-medium) var(--space-xlarge); } .opportunity-detail-modal .opportunity-info-item { display: flex; flex-direction: column; gap: 4px; } .opportunity-detail-modal .opportunity-info-label { font-size: 12px; color: var(--text-tertiary); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; } .opportunity-detail-modal .opportunity-info-value { font-size: var(--font-size-medium); color: var(--text-primary); font-weight: var(--font-weight-medium); word-break: break-word; } /* Descripción dentro del card de info */ .opportunity-detail-modal .opp-description-inline { margin-top: var(--space-large); padding-top: var(--space-large); border-top: 1px solid var(--border-color); } /* Cards de texto (Notas) */ .opportunity-detail-modal .opp-text-card { background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); padding: var(--space-large); } .opportunity-detail-modal .opp-text-label { font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 8px 0; } .opportunity-detail-modal .opp-text-content { font-size: var(--font-size-medium); color: var(--text-secondary); line-height: 1.6; margin: 0; white-space: pre-wrap; } /* Card de pérdida */ .opportunity-detail-modal .loss-section { padding: var(--space-large); background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-medium); } .opportunity-detail-modal .loss-reason { font-size: var(--font-size-medium); color: #991b1b; font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-xsmall) 0; } .opportunity-detail-modal .loss-notes { font-size: var(--font-size-medium); color: #7f1d1d; line-height: 1.6; margin: 0; } /* ── Table card (Contactos) ───────────────────────── */ .opportunity-detail-modal .table-container-rounded { border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; background: white; } .opportunity-detail-modal .table-container-rounded table { margin: 0; } .opportunity-detail-modal .table-container-rounded thead { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-bottom: 2px solid #e2e8f0; } .opportunity-detail-modal .table-container-rounded tbody tr { border-bottom: 1px solid #f1f5f9; transition: all 0.2s ease; } .opportunity-detail-modal .table-container-rounded tbody tr:last-child { border-bottom: none; } .opportunity-detail-modal .table-container-rounded tbody tr:hover { background: linear-gradient(90deg, rgba(29, 111, 164, 0.03) 0%, rgba(29, 111, 164, 0.01) 100%); } /* ── Contacts Tab ─────────────────────────────────── */ .opportunity-detail-modal .contacts-tab, .opportunity-detail-modal .files-tab, .opportunity-detail-modal .comments-tab { display: flex; flex-direction: column; } .opportunity-detail-modal .contacts-list { display: flex; flex-direction: column; gap: var(--space-medium); } .opportunity-detail-modal .contact-item { background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); padding: var(--space-large); display: flex; justify-content: space-between; align-items: center; gap: var(--space-large); transition: all var(--transition-base); cursor: pointer; } .opportunity-detail-modal .contact-item:hover { border-color: var(--primary-light); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transform: translateY(-1px); } .opportunity-detail-modal .contact-item-left { display: flex; align-items: center; gap: var(--space-medium); flex: 1; } .opportunity-detail-modal .contact-item-avatar { position: relative; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0; } .opportunity-detail-modal .primary-badge { position: absolute; bottom: -2px; right: -2px; width: 20px; height: 20px; background: #f59e0b; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid white; } .opportunity-detail-modal .contact-item-info { display: flex; flex-direction: column; gap: var(--space-xxsmall); } .opportunity-detail-modal .contact-item-name { display: flex; align-items: center; gap: var(--space-small); font-size: var(--font-size-medium); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .opportunity-detail-modal .contact-item-role { font-size: var(--font-size-small); color: var(--text-secondary); } .opportunity-detail-modal .contact-item-right { display: flex; flex-direction: column; gap: var(--space-xsmall); align-items: flex-end; } .opportunity-detail-modal .contact-item-link { display: flex; align-items: center; gap: var(--space-xsmall); font-size: var(--font-size-small); color: var(--primary); text-decoration: none; transition: color var(--transition-base); } .opportunity-detail-modal .contact-item-link:hover { color: var(--primary-dark); text-decoration: underline; } /* ── Responsive ───────────────────────────────────── */ @media (max-width: 768px) { .opportunity-detail-modal .segmented-control-wrapper { padding: var(--space-small); } .opportunity-detail-modal .segmented-control { display: flex; width: 100%; justify-content: space-around; } .opportunity-detail-modal .segment { flex: 1; justify-content: center; padding: var(--space-small) var(--space-xsmall); gap: 0; } .opportunity-detail-modal .segment-text { display: none; } .opportunity-detail-modal .opp-info-grid { grid-template-columns: 1fr; } .opportunity-detail-modal .modal-footer-actions { flex-direction: column-reverse; gap: var(--space-medium); } .opportunity-detail-modal .footer-actions-left, .opportunity-detail-modal .footer-actions-right { width: 100%; } .opportunity-detail-modal .footer-actions-left button, .opportunity-detail-modal .footer-actions-right button { flex: 1; min-width: 0; } .opportunity-detail-modal .contact-item { flex-direction: column; align-items: flex-start; } .opportunity-detail-modal .contact-item-right { align-items: flex-start; } } /* Contact Detail Modal - Scoped styles */ .contact-detail-modal .modal-body { padding: var(--space-xlarge); } .contact-detail-modal .contact-detail-content { display: flex; flex-direction: column; gap: var(--space-xlarge); } /* Header Section */ .contact-detail-modal .contact-header-section { border-bottom: 2px solid var(--border-color); padding-bottom: var(--space-xlarge); } /* Info Grid as Main Container */ .contact-detail-modal .contact-info-grid { display: flex; flex-direction: column; gap: var(--space-large); padding: var(--space-xlarge); background: var(--bg-secondary); border-radius: var(--radius-large); border: 1px solid var(--border-color); } .contact-detail-modal .contact-main-info { grid-column: initial; display: flex; gap: var(--space-large); padding-bottom: 0; margin-bottom: 0; border-bottom: none; } /* Avatar wrapper con medalla de contacto principal */ .contact-detail-modal .contact-avatar-wrapper-detail { position: relative; flex-shrink: 0; } .contact-detail-modal .contact-avatar-large { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; box-shadow: var(--shadow-medium); font-size: 28px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; overflow: hidden; } .contact-detail-modal .contact-avatar-large img { width: 100%; height: 100%; object-fit: cover; } /* Primary badge como medalla */ .contact-detail-modal .primary-badge-detail { position: absolute; bottom: 0px; right: 0px; width: 28px; height: 28px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid var(--bg-secondary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .contact-detail-modal .contact-header-text { display: flex; flex-direction: column; gap: var(--space-medium); flex: 1; min-width: 0; } .contact-detail-modal .contact-title-group { display: flex; flex-direction: column; gap: var(--space-xsmall); } .contact-detail-modal .contact-title-with-status { display: flex; align-items: center; justify-content: space-between; gap: var(--space-medium); flex-wrap: wrap; width: 100%; } .contact-detail-modal .contact-modal-title { font-size: var(--font-size-xxlarge); font-weight: var(--font-weight-bold); color: var(--text-primary); margin: 0; line-height: 1.2; } .contact-detail-modal .contact-job-info { display: flex; gap: var(--space-large); flex-wrap: wrap; align-items: center; font-size: var(--font-size-small); color: var(--text-secondary); } .contact-detail-modal .job-title, .contact-detail-modal .company-name { display: inline-flex; align-items: center; gap: var(--space-xsmall); font-weight: var(--font-weight-medium); } .contact-detail-modal .company-name { color: var(--primary); cursor: pointer; transition: color var(--transition-base); } .contact-detail-modal .company-name.clickable { color: var(--primary); cursor: pointer; transition: all var(--transition-base); } .contact-detail-modal .company-name:hover, .contact-detail-modal .company-name.clickable:hover { color: var(--primary-dark); text-decoration: underline; } /* Tags Section */ .contact-detail-modal .contact-meta-tags { display: flex; flex-wrap: wrap; gap: var(--space-small); margin-top: var(--space-xsmall); } .contact-detail-modal .contact-meta-tags .tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: var(--font-weight-medium); color: white; border: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } /* Segmented Control (iOS-style) - Tarjeta redondeada */ .contact-detail-modal .segmented-control-wrapper { padding: var(--space-large); background: var(--bg-secondary); border-radius: var(--radius-large); border: 1px solid var(--border-color); } .contact-detail-modal .segmented-control { display: inline-flex; background: var(--bg-tertiary); border-radius: var(--radius-large); padding: 4px; gap: 4px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); } .contact-detail-modal .segment { display: flex; align-items: center; gap: var(--space-xsmall); padding: var(--space-small) var(--space-medium); background: transparent; border: none; border-radius: var(--radius-medium); color: var(--text-secondary); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; position: relative; } .contact-detail-modal .segment:hover:not(.active) { color: var(--text-primary); background: rgba(0, 0, 0, 0.04); } .contact-detail-modal .segment.active { background: white; color: var(--primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); } .contact-detail-modal .segment-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--primary); color: white; border-radius: 9px; font-size: 11px; font-weight: var(--font-weight-bold); line-height: 1; } .contact-detail-modal .segment.active .segment-badge { background: var(--primary); } /* Footer Actions */ .contact-detail-modal .modal-footer-actions { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: var(--space-xlarge); } .contact-detail-modal .footer-actions-left, .contact-detail-modal .footer-actions-right { display: flex; gap: var(--space-medium); align-items: center; } /* KPIs Section */ .contact-detail-modal .contact-kpis-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-medium); } .contact-detail-modal .kpi-card { display: flex; align-items: center; gap: var(--space-small); padding: var(--space-medium); background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); transition: all var(--transition-base); } .contact-detail-modal .kpi-card:hover { border-color: var(--primary-light); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transform: translateY(-1px); } .contact-detail-modal .kpi-icon { width: 36px; height: 36px; border-radius: var(--radius-small); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .contact-detail-modal .kpi-content { display: flex; flex-direction: column; gap: var(--space-xxsmall); min-width: 0; } .contact-detail-modal .kpi-label { font-size: var(--font-size-xsmall); color: var(--text-secondary); font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .contact-detail-modal .kpi-value { font-size: var(--font-size-large); color: var(--text-primary); font-weight: var(--font-weight-bold); line-height: 1; } /* Content Area */ .contact-detail-modal .contact-content-area { padding-top: var(--space-xxsmall); } .contact-detail-modal .contact-content-area > div { min-height: 300px; } /* Empty Tab Message */ .contact-detail-modal .empty-tab-message { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-xxlarge); text-align: center; color: var(--text-secondary); } .contact-detail-modal .empty-tab-message h3 { margin: var(--space-medium) 0 var(--space-small) 0; font-size: var(--font-size-large); color: var(--text-primary); } .contact-detail-modal .empty-tab-message p { margin: 0; font-size: var(--font-size-medium); } /* Overview Tab */ .contact-detail-modal .overview-section { display: flex; flex-direction: column; gap: var(--space-xlarge); } /* Contact Info Section in Overview */ .contact-detail-modal .company-info-section { background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); padding: var(--space-large); } .contact-detail-modal .company-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-large) var(--space-massive); } .contact-detail-modal .company-info-item { display: flex; flex-direction: column; gap: var(--space-xsmall); } .contact-detail-modal .company-info-label { font-size: 13px; color: var(--text-secondary); font-weight: var(--font-weight-medium); } .contact-detail-modal .company-info-value { font-size: var(--font-size-medium); color: var(--text-primary); font-weight: var(--font-weight-semibold); word-break: break-word; } .contact-detail-modal .info-link { color: var(--primary); text-decoration: none; transition: all var(--transition-base); } .contact-detail-modal .info-link:hover { color: var(--primary-dark); text-decoration: underline; } .contact-detail-modal .notes-section { background: var(--bg-secondary); border-radius: var(--radius-medium); padding: var(--space-large); border: 1px solid var(--border-color); margin-top: var(--space-large); } .contact-detail-modal .notes-section h3 { margin: 0 0 var(--space-xsmall) 0; font-size: 13px; font-weight: var(--font-weight-medium); color: var(--text-secondary); } .contact-detail-modal .notes-section p { margin: 0; font-size: var(--font-size-medium); color: var(--text-primary); line-height: 1.6; white-space: pre-wrap; } /* Opportunities Tab */ .contact-detail-modal .opportunities-tab { display: flex; flex-direction: column; gap: var(--space-large); } /* Table Container with Rounded Border */ .contact-detail-modal .table-container-rounded { border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; background: white; } .contact-detail-modal .table-container-rounded table { margin: 0; } .contact-detail-modal .table-container-rounded thead { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-bottom: 2px solid #e2e8f0; } .contact-detail-modal .table-container-rounded tbody tr { border-bottom: 1px solid #f1f5f9; transition: all 0.2s ease; } .contact-detail-modal .table-container-rounded tbody tr:last-child { border-bottom: none; } .contact-detail-modal .table-container-rounded tbody tr:hover { background: linear-gradient(90deg, rgba(29, 111, 164, 0.03) 0%, rgba(29, 111, 164, 0.01) 100%); } /* Files Tab */ .contact-detail-modal .files-tab { display: flex; flex-direction: column; gap: var(--space-large); } /* Comments Tab */ .contact-detail-modal .comments-tab { display: flex; flex-direction: column; } /* ========== RESPONSIVE ========== */ @media (max-width: 768px) { .contact-detail-modal .segmented-control-wrapper { padding: var(--space-small); } .contact-detail-modal .segmented-control { display: flex; width: 100%; justify-content: space-around; } .contact-detail-modal .segment { flex: 1; justify-content: center; padding: var(--space-small) var(--space-xsmall); gap: 0; } .contact-detail-modal .segment-text { display: none; } .contact-detail-modal .modal-footer-actions { flex-direction: column-reverse; gap: var(--space-medium); } .contact-detail-modal .footer-actions-left, .contact-detail-modal .footer-actions-right { width: 100%; justify-content: stretch; } .contact-detail-modal .footer-actions-left button, .contact-detail-modal .footer-actions-right button { flex: 1; min-width: 0; } } /* AccountComments — wrapper mínimo, Comments maneja su propio estilo */ .account-comments-wrapper { width: 100%; } /* Account Detail Modal - Scoped styles */ .account-detail-modal .modal-body { padding: var(--space-xlarge); } .account-detail-modal .account-detail-content { display: flex; flex-direction: column; gap: var(--space-xlarge); } /* Header Section */ .account-detail-modal .account-header-section { border-bottom: 2px solid var(--border-color); padding-bottom: var(--space-xlarge); } /* Info Grid as Main Container */ .account-detail-modal .account-info-grid { display: flex; flex-direction: column; gap: var(--space-large); padding: var(--space-xlarge); background: var(--bg-secondary); border-radius: var(--radius-large); border: 1px solid var(--border-color); } .account-detail-modal .account-main-info { grid-column: initial; display: flex; gap: var(--space-large); padding-bottom: 0; margin-bottom: 0; border-bottom: none; } /* Avatar wrapper con medalla de tier */ .account-detail-modal .account-avatar-wrapper-detail { position: relative; flex-shrink: 0; } .account-detail-modal .account-avatar-large { width: 80px; height: 80px; border-radius: var(--radius-large); background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; box-shadow: var(--shadow-medium); overflow: hidden; } .account-detail-modal .account-avatar-large img { width: 100%; height: 100%; object-fit: cover; } /* Tier badge como medalla */ .account-detail-modal .tier-badge-detail { position: absolute; bottom: -4px; right: -4px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid var(--bg-secondary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); color: white; } .account-detail-modal .tier-badge-detail.tier-gold { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } .account-detail-modal .tier-badge-detail.tier-silver { background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%); } .account-detail-modal .tier-badge-detail.tier-bronze { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); } .account-detail-modal .tier-badge-detail.tier-platinum { background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%); } .account-detail-modal .account-header-text { display: flex; flex-direction: column; gap: var(--space-medium); flex: 1; min-width: 0; } .account-detail-modal .account-title-group { display: flex; flex-direction: column; gap: var(--space-xsmall); } .account-detail-modal .account-title-with-status { display: flex; align-items: center; justify-content: space-between; gap: var(--space-medium); flex-wrap: wrap; width: 100%; } .account-detail-modal .account-modal-title { font-size: var(--font-size-xxlarge); font-weight: var(--font-weight-bold); color: var(--text-primary); margin: 0; line-height: 1.2; } .account-detail-modal .account-metadata { font-size: var(--font-size-small); color: var(--text-secondary); font-weight: var(--font-weight-medium); line-height: 1.4; } .account-detail-modal .account-meta-tags { display: flex; gap: var(--space-small); flex-wrap: wrap; align-items: center; } .account-detail-modal .account-meta-tags .tag { display: inline-flex; align-items: center; gap: var(--space-xxsmall); padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: var(--font-weight-medium); transition: all var(--transition-base); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .account-detail-modal .account-meta-tags .tag-blue { background: rgba(59, 130, 246, 0.1); color: #2563eb; border: none; } .account-detail-modal .account-meta-tags .tag-blue:hover { background: rgba(59, 130, 246, 0.2); } .account-detail-modal .account-meta-tags .tag-green { background: rgba(16, 185, 129, 0.1); color: #059669; border: none; } .account-detail-modal .account-meta-tags .tag-green:hover { background: rgba(16, 185, 129, 0.2); } .account-detail-modal .account-meta-tags .tag-purple { background: rgba(139, 92, 246, 0.1); color: #7c3aed; border: none; } .account-detail-modal .account-meta-tags .tag-purple:hover { background: rgba(139, 92, 246, 0.2); } .account-detail-modal .account-meta-tags .tag-add-button { display: inline-flex; align-items: center; gap: var(--space-xxsmall); padding: var(--space-xxsmall) var(--space-small); background: transparent; border: 1px dashed var(--border-color); border-radius: var(--radius-small); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-base); } .account-detail-modal .account-meta-tags .tag-add-button:hover { border-color: var(--primary); color: var(--primary); background: rgba(29, 111, 164, 0.05); } /* Tier Tags with Icons */ .account-detail-modal .tag-tier { font-weight: var(--font-weight-bold); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); border: none; } .account-detail-modal .tag-tier-gold { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); color: #b45309; } .account-detail-modal .tag-tier-gold:hover { background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%); box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3); } .account-detail-modal .tag-tier-silver { background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); color: #4b5563; } .account-detail-modal .tag-tier-silver:hover { background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%); box-shadow: 0 4px 8px rgba(156, 163, 175, 0.3); } .account-detail-modal .tag-tier-bronze { background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%); color: #92400e; } .account-detail-modal .tag-tier-bronze:hover { background: linear-gradient(135deg, #fdba74 0%, #fb923c 100%); box-shadow: 0 4px 8px rgba(234, 88, 12, 0.3); } /* Status Badge with Indicator */ .account-detail-modal .account-status-badge { display: inline-flex; align-items: center; gap: var(--space-xsmall); padding: var(--space-xsmall) var(--space-medium); background: var(--bg-primary); border: 2px solid var(--border-color); border-radius: var(--radius-medium); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .account-detail-modal .status-indicator { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .account-detail-modal .status-indicator.status-active { background: var(--success); box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2); } .account-detail-modal .status-indicator.status-prospect { background: var(--info); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); } .account-detail-modal .status-indicator.status-default { background: var(--text-secondary); box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.2); } .account-detail-modal .info-item { display: flex; flex-direction: column; gap: var(--space-xxsmall); } .account-detail-modal .info-label { font-size: 12px; color: var(--text-secondary); font-weight: var(--font-weight-medium); } .account-detail-modal .info-value { font-size: 13px; color: var(--text-primary); font-weight: var(--font-weight-semibold); word-break: break-word; } .account-detail-modal .info-link { color: var(--primary); text-decoration: none; transition: all var(--transition-base); display: inline-flex; align-items: center; gap: var(--space-xxsmall); } .account-detail-modal .info-link:hover { color: var(--primary-dark); text-decoration: underline; } /* Footer Actions */ .account-detail-modal .modal-footer-actions { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: var(--space-xlarge); } .account-detail-modal .footer-actions-left, .account-detail-modal .footer-actions-right { display: flex; gap: var(--space-medium); align-items: center; } /* KPIs Section */ .account-detail-modal .account-kpis-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-medium); } .account-detail-modal .kpi-card { display: flex; align-items: center; gap: var(--space-small); padding: var(--space-medium); background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); transition: all var(--transition-base); } .account-detail-modal .kpi-card:hover { border-color: var(--primary-light); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transform: translateY(-1px); } .account-detail-modal .kpi-icon { width: 36px; height: 36px; border-radius: var(--radius-small); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .account-detail-modal .kpi-content { display: flex; flex-direction: column; gap: var(--space-xxsmall); min-width: 0; } .account-detail-modal .kpi-label { font-size: var(--font-size-xsmall); color: var(--text-secondary); font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-detail-modal .kpi-value { font-size: var(--font-size-large); color: var(--text-primary); font-weight: var(--font-weight-bold); line-height: 1; } /* Segmented Control (iOS-style) */ .account-detail-modal .segmented-control-wrapper { padding: var(--space-large); background: var(--bg-secondary); border-radius: var(--radius-large); border: 1px solid var(--border-color); } .account-detail-modal .segmented-control { display: inline-flex; background: var(--bg-tertiary); border-radius: var(--radius-large); padding: 4px; gap: 4px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); } .account-detail-modal .segment { display: flex; align-items: center; gap: var(--space-xsmall); padding: var(--space-small) var(--space-medium); background: transparent; border: none; border-radius: var(--radius-medium); color: var(--text-secondary); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; position: relative; } .account-detail-modal .segment:hover:not(.active) { color: var(--text-primary); background: rgba(0, 0, 0, 0.04); } .account-detail-modal .segment.active { background: white; color: var(--primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); } .account-detail-modal .segment-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--bg-secondary); color: var(--text-secondary); border-radius: var(--radius-full); font-size: 11px; font-weight: var(--font-weight-bold); line-height: 1; } .account-detail-modal .segment.active .segment-badge { background: var(--primary); color: white; } /* Content Area */ .account-detail-modal .account-content-area { padding-top: var(--space-xxsmall); } .account-detail-modal .account-content-area > div { min-height: 300px; } /* Tab content padding */ .account-detail-modal .contacts-tab, .account-detail-modal .opportunities-tab { padding: 0; } .account-detail-modal .comments-tab { display: flex; flex-direction: column; } /* Empty Tab Message */ .account-detail-modal .empty-tab-message { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-xxlarge); text-align: center; color: var(--text-secondary); } .account-detail-modal .empty-tab-message h3 { margin: var(--space-medium) 0 var(--space-small) 0; font-size: var(--font-size-large); color: var(--text-primary); } .account-detail-modal .empty-tab-message p { margin: 0; font-size: var(--font-size-medium); } /* Overview Tab */ .account-detail-modal .overview-section { display: flex; flex-direction: column; gap: var(--space-xlarge); } /* Company Info Section in Overview */ .account-detail-modal .company-info-section { background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); padding: var(--space-large); } .account-detail-modal .company-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-large) var(--space-massive); } .account-detail-modal .company-info-item { display: flex; flex-direction: column; gap: var(--space-xsmall); } .account-detail-modal .company-info-label { font-size: 13px; color: var(--text-secondary); font-weight: var(--font-weight-medium); } .account-detail-modal .company-info-value { font-size: var(--font-size-medium); color: var(--text-primary); font-weight: var(--font-weight-semibold); word-break: break-word; } .account-detail-modal .overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-large); } .account-detail-modal .overview-card { background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); overflow: hidden; } .account-detail-modal .overview-card-header { display: flex; align-items: center; gap: var(--space-small); padding: var(--space-medium) var(--space-large); background: var(--bg-primary); border-bottom: 1px solid var(--border-color); } .account-detail-modal .overview-card-header h3 { margin: 0; font-size: var(--font-size-medium); font-weight: var(--font-weight-semibold); color: var(--text-primary); flex: 1; } .account-detail-modal .count-badge { background: var(--primary); color: white; padding: var(--space-xxsmall) var(--space-small); border-radius: var(--radius-full); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); min-width: 24px; text-align: center; } .account-detail-modal .overview-card-body { display: flex; flex-direction: column; gap: var(--space-small); padding: var(--space-large); } .account-detail-modal .overview-item { display: flex; align-items: center; gap: var(--space-medium); padding: var(--space-small); border-radius: var(--radius-small); transition: all var(--transition-base); } .account-detail-modal .overview-item:hover { background: var(--bg-tertiary); } .account-detail-modal .overview-item-avatar { width: 40px; height: 40px; border-radius: var(--radius-medium); background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-semibold); font-size: var(--font-size-small); flex-shrink: 0; } .account-detail-modal .overview-item-info { display: flex; flex-direction: column; gap: var(--space-xxsmall); flex: 1; min-width: 0; } .account-detail-modal .overview-item-name { font-weight: var(--font-weight-semibold); color: var(--text-primary); font-size: var(--font-size-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-detail-modal .overview-item-detail { font-size: var(--font-size-small); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-detail-modal .view-all-link { background: none; border: none; color: var(--primary); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); cursor: pointer; padding: var(--space-small); text-align: left; transition: all var(--transition-base); } .account-detail-modal .view-all-link:hover { color: var(--primary-dark); text-decoration: underline; } .account-detail-modal .empty-text { color: var(--text-secondary); font-size: var(--font-size-small); text-align: center; padding: var(--space-large); margin: 0; } .account-detail-modal .notes-section { background: var(--bg-secondary); border-radius: var(--radius-medium); padding: var(--space-large); border: 1px solid var(--border-color); } .account-detail-modal .notes-section h3 { margin: 0 0 var(--space-xsmall) 0; font-size: 13px; font-weight: var(--font-weight-medium); color: var(--text-secondary); } .account-detail-modal .notes-section p { margin: 0; font-size: var(--font-size-medium); color: var(--text-primary); line-height: 1.6; white-space: pre-wrap; } /* Contacts Tab */ .account-detail-modal .contacts-list { display: flex; flex-direction: column; gap: var(--space-small); } .account-detail-modal .contact-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-medium) var(--space-large); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-medium); transition: all var(--transition-base); } .account-detail-modal .contact-item:hover { border-color: var(--primary-light); box-shadow: var(--shadow-small); } .account-detail-modal .contact-item-left { display: flex; align-items: center; gap: var(--space-medium); flex: 1; min-width: 0; } .account-detail-modal .contact-item-avatar { width: 48px; height: 48px; border-radius: var(--radius-medium); background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); font-size: var(--font-size-medium); flex-shrink: 0; position: relative; } .account-detail-modal .primary-badge { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--warning); color: white; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-primary); } .account-detail-modal .contact-item-info { display: flex; flex-direction: column; gap: var(--space-xxsmall); flex: 1; min-width: 0; } .account-detail-modal .contact-item-name { display: flex; align-items: center; gap: var(--space-small); font-weight: var(--font-weight-semibold); color: var(--text-primary); font-size: var(--font-size-medium); } .account-detail-modal .contact-item-title { font-size: var(--font-size-small); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-detail-modal .contact-item-right { display: flex; flex-direction: column; gap: var(--space-xxsmall); align-items: flex-end; } .account-detail-modal .contact-item-link { display: flex; align-items: center; gap: var(--space-xxsmall); color: var(--text-secondary); text-decoration: none; font-size: var(--font-size-small); transition: all var(--transition-base); } .account-detail-modal .contact-item-link:hover { color: var(--primary); } /* Opportunities Tab */ .account-detail-modal .opportunities-stats { display: flex; gap: var(--space-medium); margin-bottom: var(--space-large); } .account-detail-modal .stat-card { display: flex; flex-direction: column; gap: var(--space-xxsmall); padding: var(--space-medium) var(--space-large); background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); flex: 1; } .account-detail-modal .stat-label { font-size: var(--font-size-small); color: var(--text-secondary); font-weight: var(--font-weight-medium); } .account-detail-modal .stat-value { font-size: var(--font-size-xlarge); color: var(--primary); font-weight: var(--font-weight-bold); } .account-detail-modal .opportunities-list { display: flex; flex-direction: column; gap: var(--space-small); } .account-detail-modal .opportunity-item { padding: var(--space-medium) var(--space-large); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-medium); transition: all var(--transition-base); } .account-detail-modal .opportunity-item:hover { border-color: var(--primary-light); box-shadow: var(--shadow-small); } .account-detail-modal .opportunity-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-small); gap: var(--space-medium); } .account-detail-modal .opportunity-header h4 { margin: 0; font-size: var(--font-size-medium); font-weight: var(--font-weight-semibold); color: var(--text-primary); flex: 1; } .account-detail-modal .opportunity-details { display: flex; justify-content: space-between; align-items: center; gap: var(--space-medium); } .account-detail-modal .opportunity-left { display: flex; gap: var(--space-large); align-items: baseline; } .account-detail-modal .opportunity-amount { font-size: var(--font-size-large); font-weight: var(--font-weight-bold); color: var(--success); } .account-detail-modal .opportunity-probability { font-size: var(--font-size-small); color: var(--text-secondary); } .account-detail-modal .opportunity-date { font-size: var(--font-size-small); color: var(--text-secondary); } /* Responsive */ @media (max-width: 1024px) { .account-detail-modal .account-header-section { flex-direction: column; } .account-detail-modal .modal-footer-actions { flex-direction: column; gap: var(--space-small); } .account-detail-modal .footer-actions-left, .account-detail-modal .footer-actions-right { width: 100%; flex-wrap: wrap; } .account-detail-modal .footer-actions-left button, .account-detail-modal .footer-actions-right button { flex: 1; min-width: 140px; } .account-detail-modal .overview-grid { grid-template-columns: 1fr; } .account-detail-modal .contact-item { flex-direction: column; align-items: flex-start; gap: var(--space-medium); } .account-detail-modal .contact-item-right { width: 100%; align-items: flex-start; } .account-detail-modal .opportunity-details { flex-direction: column; align-items: flex-start; } .account-detail-modal .account-info-grid { grid-template-columns: 1fr; gap: var(--space-medium); } } @media (max-width: 768px) { .account-detail-modal .account-detail-content { padding: var(--space-medium); gap: var(--space-large); } .account-detail-modal .account-main-info { flex-direction: column; align-items: center; text-align: center; } .account-detail-modal .account-header-text { align-items: center; } .account-detail-modal .account-title-group { align-items: center; text-align: center; } .account-detail-modal .account-title-with-status { flex-direction: column; align-items: center; gap: var(--space-small); } .account-detail-modal .account-meta-tags { justify-content: center; } .account-detail-modal .segmented-control-wrapper { padding: var(--space-small); } .account-detail-modal .segmented-control { width: 100%; justify-content: space-around; } .account-detail-modal .segment { flex: 1; justify-content: center; padding: var(--space-small) var(--space-xsmall); gap: 0; } .account-detail-modal .segment-text { display: none; } .account-detail-modal .account-info-grid { grid-template-columns: 1fr; } .account-detail-modal .account-modal-title { font-size: var(--font-size-xlarge); } .account-detail-modal .account-kpis-section { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .account-detail-modal .company-info-grid { grid-template-columns: 1fr; gap: var(--space-medium); } .account-detail-modal .modal-footer-actions { flex-direction: column-reverse; gap: var(--space-medium); } .account-detail-modal .footer-actions-left, .account-detail-modal .footer-actions-right { width: 100%; justify-content: stretch; } .account-detail-modal .footer-actions-left button, .account-detail-modal .footer-actions-right button { flex: 1; min-width: 0; } } /* Table Container with Rounded Border */ .account-detail-modal .table-container-rounded { border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; background: white; } .account-detail-modal .table-container-rounded table { margin: 0; } .account-detail-modal .table-container-rounded thead { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-bottom: 2px solid #e2e8f0; } .account-detail-modal .table-container-rounded tbody tr { border-bottom: 1px solid #f1f5f9; transition: all 0.2s ease; } .account-detail-modal .table-container-rounded tbody tr:last-child { border-bottom: none; } .account-detail-modal .table-container-rounded tbody tr:hover { background: linear-gradient(90deg, rgba(29, 111, 164, 0.03) 0%, rgba(29, 111, 164, 0.01) 100%); } /* ============================================ TIMER WIDGET - Cronómetro flotante hermoso ============================================ */ .timerWidget { position: fixed; bottom: var(--space-xlarge); right: var(--space-xlarge); z-index: var(--z-timer); display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-medium); } /* BOTÓN FLOTANTE PRINCIPAL */ .floatingButton { width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--primary); border: none; box-shadow: var(--shadow-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; } .floatingButton:hover { transform: translateY(-2px) scale(1.05); box-shadow: var(--shadow-primary-hover); } .floatingButton:active { transform: translateY(0) scale(0.98); } .floatingButton-active { background: var(--success); animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7), 0 10px 25px -5px rgba(16, 185, 129, 0.4); } 50% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0), 0 15px 30px -8px rgba(16, 185, 129, 0.5); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0), 0 10px 25px -5px rgba(16, 185, 129, 0.4); } } .floatingButton svg { width: 28px; height: 28px; color: white; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); } .activeBadge { position: absolute; top: -2px; right: -2px; width: 20px; height: 20px; background: var(--danger); border: 3px solid white; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: blink-smooth 2s ease-in-out infinite; box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4); } @keyframes blink-smooth { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.1); } } .activeBadge::after { content: ''; width: 8px; height: 8px; background: white; border-radius: 50%; box-shadow: 0 0 4px rgba(255, 255, 255, 0.8); } /* PANEL EXPANDIDO */ .timerPanel { position: relative; width: 360px; background: var(--bg-primary); border-radius: var(--radius-xlarge); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18); overflow: hidden; animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); border: none; } @keyframes slideUp { from { opacity: 0; transform: translateY(30px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } .panelHeader { padding: var(--space-large) var(--space-xlarge); background: var(--primary); color: white; display: flex; align-items: center; justify-content: space-between; position: relative; border-radius: var(--radius-xlarge) var(--radius-xlarge) 0 0; } .headerTitle { display: flex; align-items: center; gap: var(--space-small); font-size: var(--font-size-medium); font-weight: var(--font-weight-semibold); } .headerTitle svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); } .closeButton { background: rgba(255, 255, 255, 0.2); border: none; color: white; cursor: pointer; padding: var(--space-xsmall); border-radius: var(--radius-medium); transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .closeButton:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); } .closeButton svg { width: 18px; height: 18px; } .panelBody { padding: var(--space-xlarge); } /* DISPLAY DEL TIEMPO */ .timeDisplay { text-align: center; margin-bottom: var(--space-xlarge); padding: var(--space-large) 0; background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%); border-radius: var(--radius-large); } .timeValue { font-size: 56px; font-weight: var(--font-weight-bold); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: var(--space-xsmall); letter-spacing: -0.02em; } .timeLabel { font-size: var(--font-size-small); color: var(--text-tertiary); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.05em; } /* SELECTOR DE TAREA */ .taskSelector { margin-bottom: var(--space-large); } .taskLabel { font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); color: var(--text-secondary); margin-bottom: var(--space-xsmall); display: block; text-transform: uppercase; letter-spacing: 0.03em; } .taskSelect { width: 100%; padding: var(--space-medium); border: 2px solid var(--border-color); border-radius: var(--radius-medium); font-size: var(--font-size-base); color: var(--text-primary); background: var(--bg-primary); cursor: pointer; transition: all 0.2s ease; font-weight: var(--font-weight-medium); } .taskSelect:hover { border-color: var(--primary); } .taskSelect:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); } /* BOTONES DE ACCIÓN */ .actions { display: flex; gap: var(--space-small); margin-bottom: var(--space-large); } .actionButton { flex: 1; padding: var(--space-medium); border-radius: var(--radius-medium); border: none; font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; align-items: center; justify-content: center; gap: var(--space-xsmall); text-transform: uppercase; letter-spacing: 0.02em; } .actionButton svg { width: 18px; height: 18px; } .startButton { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; color: white !important; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important; } .startButton:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4) !important; } .pauseButton { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; color: white !important; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important; } .pauseButton:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4) !important; } .stopButton { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; color: white !important; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important; } .stopButton:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4) !important; } .resumeButton { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: white !important; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important; } .resumeButton:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4) !important; } .actionButton:active { transform: translateY(0) scale(0.98); } /* DESCRIPCIÓN */ .description { margin-bottom: var(--space-large); } .descriptionLabel { font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); color: var(--text-secondary); margin-bottom: var(--space-xsmall); display: block; text-transform: uppercase; letter-spacing: 0.03em; } .descriptionInput { width: 100%; padding: var(--space-medium); border: 2px solid var(--border-color); border-radius: var(--radius-medium); font-size: var(--font-size-base); color: var(--text-primary); background: var(--bg-primary); resize: vertical; min-height: 80px; font-family: var(--font-family); transition: all 0.2s ease; line-height: var(--line-height-relaxed); } .descriptionInput:hover { border-color: var(--primary); } .descriptionInput:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); } .descriptionInput::placeholder { color: var(--text-disabled); font-style: italic; } /* HISTORIAL RECIENTE */ .recentEntries { border-top: 2px solid var(--border-color); padding-top: var(--space-medium); margin-top: var(--space-medium); } .recentTitle { font-size: var(--font-size-tiny); font-weight: var(--font-weight-bold); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-medium); } .entryItem { display: flex; justify-content: space-between; align-items: center; padding: var(--space-small); border-radius: var(--radius-medium); margin-bottom: var(--space-xsmall); gap: var(--space-small); transition: all 0.2s ease; cursor: pointer; } .entryItem:hover { background: var(--bg-hover); transform: translateX(4px); } .entryItem:last-child { margin-bottom: 0; } .entryInfo { display: flex; flex-direction: column; gap: var(--space-xxsmall); flex: 1; min-width: 0; } .entryTask { font-size: var(--font-size-small); color: var(--primary); font-weight: var(--font-weight-bold); font-family: var(--font-mono); letter-spacing: -0.01em; } .entryTaskName { font-size: var(--font-size-tiny); color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .entryTime { font-size: var(--font-size-small); color: var(--text-secondary); font-weight: var(--font-weight-semibold); flex-shrink: 0; font-variant-numeric: tabular-nums; background: var(--neutral-lighter); padding: var(--space-xxsmall) var(--space-small); border-radius: var(--radius-small); } /* RESPONSIVE */ @media (max-width: 768px) { .timerWidget { bottom: var(--space-large); right: var(--space-large); } .timerPanel { width: calc(100vw - var(--space-huge)); max-width: 360px; } .floatingButton { width: 56px; height: 56px; } .floatingButton svg { width: 24px; height: 24px; } .timeValue { font-size: 48px; } .panelBody { padding: var(--space-large); } } /* Global Search Styles */ .globalSearchBackdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; z-index: 9999; animation: fadeIn 0.2s ease; } .globalSearchModal { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); width: 90%; max-width: 640px; max-height: 70vh; display: flex; flex-direction: column; animation: slideDown 0.2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Header */ .globalSearchHeader { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md); border-bottom: 1px solid var(--color-border); } .globalSearchIcon { color: var(--color-text-secondary); flex-shrink: 0; } .globalSearchInput { flex: 1; border: none; outline: none; font-size: var(--font-size-lg); color: var(--color-text-primary); background: transparent; } .globalSearchInput::placeholder { color: var(--color-text-tertiary); } .globalSearchClose { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; color: var(--color-text-secondary); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; } .globalSearchClose:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); } /* Results */ .globalSearchResults { overflow-y: auto; max-height: calc(70vh - 73px); } .globalSearchLoading { padding: var(--spacing-xl); text-align: center; color: var(--color-text-secondary); } .globalSearchEmpty { padding: var(--spacing-xl); text-align: center; color: var(--color-text-secondary); } .globalSearchEmpty svg { color: var(--color-text-tertiary); margin-bottom: var(--spacing-md); } .globalSearchEmpty p { font-size: var(--font-size-md); margin: 0; } .globalSearchHint { padding: var(--spacing-xl); text-align: center; color: var(--color-text-secondary); } .globalSearchHint p { margin: var(--spacing-sm) 0; font-size: var(--font-size-sm); } .globalSearchHint kbd { display: inline-block; padding: 2px 8px; background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-family-mono, 'Courier New', monospace); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } /* Results List */ .globalSearchList { list-style: none; padding: var(--spacing-xs); margin: 0; } .globalSearchItem { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } .globalSearchItem:hover, .globalSearchItem.selected { background: var(--color-bg-secondary); } .globalSearchItemIcon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--color-bg-tertiary); border-radius: var(--radius-md); color: var(--color-primary); flex-shrink: 0; } .globalSearchItem.selected .globalSearchItemIcon { background: var(--color-primary-light); color: var(--color-primary); } .globalSearchItemContent { flex: 1; min-width: 0; } .globalSearchItemTitle { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .globalSearchItemSubtitle { font-size: var(--font-size-sm); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .globalSearchItemBadge { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-tertiary); background: var(--color-bg-tertiary); padding: 2px 8px; border-radius: var(--radius-sm); flex-shrink: 0; } .globalSearchItem.selected .globalSearchItemBadge { background: var(--color-bg-quaternary); color: var(--color-text-secondary); } /* Responsive */ @media (max-width: 768px) { .globalSearchBackdrop { padding-top: 5vh; } .globalSearchModal { width: 95%; max-height: 80vh; } .globalSearchInput { font-size: var(--font-size-md); } } /* MainLayout - Layout principal con Sidebar y Content */ .layout { display: flex; min-height: 100vh; background-color: var(--bg-secondary); position: relative; width: 100%; } /* Wrapper que contiene Header + Main */ .layout-wrapper { flex: 1; margin-left: var(--layout-sidebar-width); display: flex; flex-direction: column; min-height: 100vh; width: calc(100% - var(--layout-sidebar-width)); } .main { flex: 1; padding: var(--space-xlarge); overflow-y: auto; width: 100%; max-width: 100%; box-sizing: border-box; } .sidebar-overlay { display: none; } @media (max-width: 1024px) { .layout-wrapper { margin-left: 0; width: 100%; } .sidebar-overlay { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: calc(var(--z-sticky) - 1); } } @media (max-width: 768px) { .main { padding: var(--space-medium); } } /* Confirm Modal Styles */ .confirmModalContainer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 32px 24px; text-align: center; width: 100%; } .confirmModalIcon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: scaleIn 0.3s ease-out; margin: 0 auto; } @keyframes scaleIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } .confirmModalIcon-danger { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #dc2626; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2); } .confirmModalIcon-warning { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #d97706; box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2); } .confirmModalIcon-info { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #2563eb; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); } .confirmModalIcon svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); } .confirmModalMessage { text-align: center; color: #475569; font-size: 15px; line-height: 1.6; margin: 0 auto; max-width: 380px; font-weight: 500; padding: 0 16px; width: 100%; } .confirmModalActions { display: flex; gap: 12px; width: 100%; max-width: 360px; justify-content: center; margin: 8px auto 0; } .confirmModalActions button { flex: 1; max-width: 140px; padding: 10px 24px; font-weight: 600; } } .discardChangesModal { display: flex; flex-direction: column; gap: var(--space-6); } .discardWarning { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; padding: var(--space-4); } .warningIcon { color: var(--warning-600); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .warningMessage { margin: 0; font-size: var(--text-base); color: var(--text-secondary); line-height: 1.6; } .discardActions { display: flex; gap: var(--space-3); flex-direction: column-reverse; } @media (min-width: 640px) { .discardActions { flex-direction: row; } } /* Error Boundary Component Styles */ /* Page-level error boundary */ .errorBoundary--page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--spacing-xl); background: var(--color-background-primary); } .errorBoundary__content { max-width: 600px; text-align: center; } .errorBoundary__icon { color: var(--color-error-base); margin-bottom: var(--spacing-lg); animation: errorPulse 2s ease-in-out infinite; } @keyframes errorPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } } .errorBoundary__title { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: var(--spacing-md); } .errorBoundary__message { font-size: var(--font-size-lg); color: var(--color-text-secondary); margin-bottom: var(--spacing-xl); line-height: var(--line-height-relaxed); } .errorBoundary__details { text-align: left; margin-bottom: var(--spacing-xl); padding: var(--spacing-md); background: var(--color-background-secondary); border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-md); } .errorBoundary__details summary { cursor: pointer; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); user-select: none; padding: var(--spacing-xs); } .errorBoundary__details summary:hover { color: var(--color-text-primary); } .errorBoundary__errorText { margin-top: var(--spacing-md); padding: var(--spacing-md); background: var(--color-background-tertiary); border-radius: var(--border-radius-sm); font-family: var(--font-family-mono); font-size: var(--font-size-sm); color: var(--color-error-base); overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; } .errorBoundary__actions { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap; } /* Component-level error boundary */ .errorBoundary--component { padding: var(--spacing-md); background: var(--color-background-secondary); border: 1px solid var(--color-error-light); border-radius: var(--border-radius-md); margin: var(--spacing-md) 0; } .errorBoundary__componentContent { display: flex; align-items: center; gap: var(--spacing-md); } .errorBoundary__componentIcon { flex-shrink: 0; color: var(--color-error-base); } .errorBoundary__componentText { flex: 1; min-width: 0; } .errorBoundary__componentTitle { font-weight: var(--font-weight-medium); color: var(--color-text-primary); margin-bottom: var(--spacing-xs); } .errorBoundary__componentMessage { font-size: var(--font-size-sm); color: var(--color-text-secondary); word-break: break-word; } /* Responsive adjustments */ @media (max-width: 768px) { .errorBoundary--page { padding: var(--spacing-md); } .errorBoundary__title { font-size: var(--font-size-2xl); } .errorBoundary__message { font-size: var(--font-size-base); } .errorBoundary__actions { flex-direction: column; width: 100%; } .errorBoundary__actions button { width: 100%; } .errorBoundary__componentContent { flex-direction: column; align-items: flex-start; text-align: left; } } /* Loading Skeletons Styles */ /* Table Skeleton */ .tableSkeleton { padding: var(--spacing-lg); } .tableSkeleton__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg); } .tableSkeleton__actions { display: flex; gap: var(--spacing-md); } .tableSkeleton__filters { display: flex; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); flex-wrap: wrap; } .tableSkeleton__table { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); } .tableSkeleton__row { border-radius: var(--border-radius-md); overflow: hidden; } .tableSkeleton__pagination { display: flex; justify-content: space-between; align-items: center; } /* Form Skeleton */ .formSkeleton { max-width: 800px; margin: 0 auto; padding: var(--spacing-xl); } .formSkeleton__header { margin-bottom: var(--spacing-xl); } .formSkeleton__fields { display: flex; flex-direction: column; gap: var(--spacing-lg); margin-bottom: var(--spacing-xl); } .formSkeleton__field { display: flex; flex-direction: column; gap: var(--spacing-xs); } .formSkeleton__actions { display: flex; justify-content: flex-end; gap: var(--spacing-md); padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border-primary); } /* Detail Skeleton */ .detailSkeleton { padding: var(--spacing-lg); } .detailSkeleton__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-xl); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-border-primary); } .detailSkeleton__title { display: flex; flex-direction: column; gap: var(--spacing-sm); flex: 1; } .detailSkeleton__actions { display: flex; gap: var(--spacing-md); } .detailSkeleton__grid { display: grid; grid-template-columns: 1fr 350px; gap: var(--spacing-xl); } .detailSkeleton__main { display: flex; flex-direction: column; gap: var(--spacing-xl); } .detailSkeleton__section { display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-lg); background: var(--color-background-secondary); border-radius: var(--border-radius-lg); } .detailSkeleton__rows { display: flex; flex-direction: column; gap: var(--spacing-md); } .detailSkeleton__row { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-md); } .detailSkeleton__sidebar { display: flex; flex-direction: column; gap: var(--spacing-lg); } .detailSkeleton__card { padding: var(--spacing-lg); background: var(--color-background-secondary); border-radius: var(--border-radius-lg); display: flex; flex-direction: column; gap: var(--spacing-md); } /* Card Grid Skeleton */ .cardGridSkeleton { padding: var(--spacing-lg); } .cardGridSkeleton__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg); } .cardGridSkeleton__actions { display: flex; gap: var(--spacing-md); } .cardGridSkeleton__filters { display: flex; gap: var(--spacing-md); margin-bottom: var(--spacing-xl); flex-wrap: wrap; } .cardGridSkeleton__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-lg); } .cardGridSkeleton__card { border-radius: var(--border-radius-lg); overflow: hidden; } /* Responsive adjustments */ @media (max-width: 1024px) { .detailSkeleton__grid { grid-template-columns: 1fr; } .tableSkeleton__filters, .cardGridSkeleton__filters { flex-direction: column; } } @media (max-width: 768px) { .tableSkeleton, .formSkeleton, .detailSkeleton, .cardGridSkeleton { padding: var(--spacing-md); } .tableSkeleton__header, .cardGridSkeleton__header { flex-direction: column; gap: var(--spacing-md); align-items: flex-start; } .tableSkeleton__actions, .cardGridSkeleton__actions { width: 100%; justify-content: stretch; } .tableSkeleton__actions > *, .cardGridSkeleton__actions > * { flex: 1; } .detailSkeleton__header { flex-direction: column; gap: var(--spacing-md); } .detailSkeleton__actions { width: 100%; } .cardGridSkeleton__grid { grid-template-columns: 1fr; } } /* Tooltip Component Styles */ .tooltip__wrapper { position: relative; display: inline-flex; align-items: center; } .tooltip { position: absolute; z-index: var(--z-tooltip, 1000); padding: var(--spacing-sm) var(--spacing-md); background: var(--color-background-inverse); color: var(--color-text-inverse); border-radius: var(--border-radius-md); font-size: var(--font-size-sm); line-height: var(--line-height-normal); box-shadow: var(--shadow-lg); pointer-events: none; white-space: normal; word-wrap: break-word; animation: tooltipFadeIn 0.2s ease-out; } @keyframes tooltipFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* Tooltip positions */ .tooltip--top { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); } .tooltip--bottom { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); } .tooltip--left { right: calc(100% + 8px); top: 50%; transform: translateY(-50%); } .tooltip--right { left: calc(100% + 8px); top: 50%; transform: translateY(-50%); } /* Tooltip arrows */ .tooltip__arrow { position: absolute; width: 0; height: 0; border-style: solid; } .tooltip__arrow--top { bottom: -6px; left: 50%; transform: translateX(-50%); border-width: 6px 6px 0 6px; border-color: var(--color-background-inverse) transparent transparent transparent; } .tooltip__arrow--bottom { top: -6px; left: 50%; transform: translateX(-50%); border-width: 0 6px 6px 6px; border-color: transparent transparent var(--color-background-inverse) transparent; } .tooltip__arrow--left { right: -6px; top: 50%; transform: translateY(-50%); border-width: 6px 0 6px 6px; border-color: transparent transparent transparent var(--color-background-inverse); } .tooltip__arrow--right { left: -6px; top: 50%; transform: translateY(-50%); border-width: 6px 6px 6px 0; border-color: transparent var(--color-background-inverse) transparent transparent; } /* Tooltip types */ .tooltip--help { background: var(--color-info-base); } .tooltip--help .tooltip__arrow--top { border-color: var(--color-info-base) transparent transparent transparent; } .tooltip--help .tooltip__arrow--bottom { border-color: transparent transparent var(--color-info-base) transparent; } .tooltip--help .tooltip__arrow--left { border-color: transparent transparent transparent var(--color-info-base); } .tooltip--help .tooltip__arrow--right { border-color: transparent var(--color-info-base) transparent transparent; } .tooltip--warning { background: var(--color-warning-base); color: var(--color-warning-contrast); } .tooltip--warning .tooltip__arrow--top { border-color: var(--color-warning-base) transparent transparent transparent; } .tooltip--warning .tooltip__arrow--bottom { border-color: transparent transparent var(--color-warning-base) transparent; } .tooltip--warning .tooltip__arrow--left { border-color: transparent transparent transparent var(--color-warning-base); } .tooltip--warning .tooltip__arrow--right { border-color: transparent var(--color-warning-base) transparent transparent; } .tooltip__content { position: relative; z-index: 1; } /* Help Tooltip trigger */ .helpTooltip__trigger { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: none; color: var(--color-text-tertiary); cursor: help; transition: color 0.2s ease; } .helpTooltip__trigger:hover { color: var(--color-info-base); } .helpTooltip__trigger:focus { outline: 2px solid var(--color-info-base); outline-offset: 2px; border-radius: var(--border-radius-sm); } /* Info Tooltip trigger */ .infoTooltip__trigger { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: none; color: var(--color-info-base); cursor: help; transition: color 0.2s ease; } .infoTooltip__trigger:hover { color: var(--color-info-dark); } .infoTooltip__trigger:focus { outline: 2px solid var(--color-info-base); outline-offset: 2px; border-radius: var(--border-radius-sm); } /* Field Tooltip (with label) */ .fieldTooltip { display: flex; flex-direction: column; gap: var(--spacing-xs); } .fieldTooltip__labelRow { display: flex; align-items: center; gap: var(--spacing-xs); } .fieldTooltip__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); margin: 0; } .fieldTooltip__required { color: var(--color-error-base); margin-left: 2px; } /* Responsive adjustments */ @media (max-width: 768px) { .tooltip { max-width: 200px !important; font-size: var(--font-size-xs); } .tooltip--left, .tooltip--right { /* On mobile, convert left/right to top/bottom */ left: 50% !important; right: auto !important; transform: translateX(-50%) !important; } .tooltip--left { bottom: calc(100% + 8px); top: auto; } .tooltip--right { top: calc(100% + 8px); bottom: auto; } .tooltip__arrow--left, .tooltip__arrow--right { display: none; } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .tooltip { animation: none; transition: none; } } /* SkipLink Component Styles */ /* Single SkipLink */ .skipLink { position: fixed; top: -100px; left: var(--spacing-md); z-index: var(--z-skip-link, 10000); padding: var(--spacing-sm) var(--spacing-lg); background: var(--color-primary-base); color: var(--color-text-inverse); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); text-decoration: none; border-radius: var(--border-radius-md); box-shadow: var(--shadow-lg); transition: top 0.2s ease; } .skipLink:focus { top: var(--spacing-md); outline: 3px solid var(--color-warning-base); outline-offset: 2px; } .skipLink:hover { background: var(--color-primary-dark); } /* Multiple SkipLinks */ .skipLinks { position: fixed; top: -200px; left: var(--spacing-md); z-index: var(--z-skip-link, 10000); display: flex; flex-direction: column; gap: var(--spacing-xs); transition: top 0.2s ease; } .skipLinks:focus-within { top: var(--spacing-md); } .skipLinks__link { padding: var(--spacing-sm) var(--spacing-lg); background: var(--color-primary-base); color: var(--color-text-inverse); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); text-decoration: none; border-radius: var(--border-radius-md); box-shadow: var(--shadow-md); transition: background 0.2s ease; } .skipLinks__link:focus { outline: 3px solid var(--color-warning-base); outline-offset: 2px; background: var(--color-primary-dark); } .skipLinks__link:hover { background: var(--color-primary-dark); } /* High contrast mode support */ @media (prefers-contrast: high) { .skipLink, .skipLinks__link { border: 2px solid var(--color-text-inverse); } .skipLink:focus, .skipLinks__link:focus { outline-width: 4px; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .skipLink, .skipLinks { transition: none; } } /* Screen reader only text (utility) */ .srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Focusable but visually hidden */ .srOnly:focus { position: static; width: auto; height: auto; padding: var(--spacing-sm) var(--spacing-md); margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--color-warning-base); color: var(--color-text-inverse); border-radius: var(--border-radius-sm); } /* SearchInput Component Styles */ .searchInput { position: relative; display: flex; align-items: center; gap: var(--space-small); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-medium); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .searchInput:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(29, 111, 164, 0.1); outline: none; } /* Sizes */ .searchInput--sm { padding: 8px 12px; gap: 8px; } .searchInput--md { padding: 10px 16px; gap: 12px; } .searchInput--lg { padding: 12px 20px; gap: 12px; } /* Icon */ .searchInput__icon { flex-shrink: 0; color: var(--text-tertiary); transition: color 0.2s ease; } .searchInput:focus-within .searchInput__icon--search { color: var(--primary); } .searchInput__icon--loading { animation: searchInputSpin 1s linear infinite; color: var(--primary); } @keyframes searchInputSpin { to { transform: rotate(360deg); } } /* Input Field */ .searchInput__field { flex: 1; min-width: 0; background: transparent; border: none; outline: none; font-size: var(--font-size-base); font-family: inherit; color: var(--text-primary); } .searchInput--sm .searchInput__field { font-size: var(--font-size-small); } .searchInput--lg .searchInput__field { font-size: var(--font-size-large); } .searchInput__field::placeholder { color: var(--text-secondary); opacity: 0.7; } /* Actions */ .searchInput__actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .searchInput__clear { display: flex; align-items: center; justify-content: center; padding: 4px; background: transparent; border: none; border-radius: var(--radius-small); color: var(--text-tertiary); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .searchInput__clear:hover { background: var(--bg-hover); color: var(--text-secondary); } .searchInput__clear:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* SearchBar - Full width variant */ .searchBar { display: flex; flex-direction: column; gap: var(--space-small); width: 100%; } .searchBar__input { width: 100%; } .searchBar__results { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-small); } .searchBar__count { font-size: var(--font-size-small); color: var(--text-secondary); font-weight: var(--font-weight-medium); } /* Responsive */ @media (max-width: 768px) { .searchInput--lg { padding: 12px 16px; } .searchBar__results { justify-content: flex-start; } } /* High contrast mode */ @media (prefers-contrast: high) { .searchInput { border-width: 2px; } .searchInput:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .searchInput, .searchInput__icon, .searchInput__clear { transition: none; } .searchInput__icon--loading { animation: none; } } .bulkActionsModalBackdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn 0.2s ease; } .bulkActionsModalContent { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); width: 90%; max-width: 480px; animation: slideUp 0.2s ease; } .bulkActionsModalHeader { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-lg); border-bottom: 1px solid var(--color-border); } .bulkActionsModalHeader h2 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0; } .bulkActionsModalClose { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; color: var(--color-text-secondary); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .bulkActionsModalClose:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); } .bulkActionsModalBody { padding: var(--spacing-lg); } .selectedTasksInfo { font-size: var(--font-size-md); color: var(--color-text-secondary); margin: 0 0 var(--spacing-lg) 0; } .selectedTasksInfo strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); } .bulkActionsModalFooter { display: flex; gap: var(--spacing-sm); padding: var(--spacing-lg); border-top: 1px solid var(--color-border); justify-content: flex-end; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (max-width: 640px) { .bulkActionsModalContent { width: 95%; max-width: none; } .bulkActionsModalFooter { flex-direction: column-reverse; } .bulkActionsModalFooter button { width: 100%; } } .bottomSheetBackdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 1000; animation: fadeIn 0.2s ease; } .bottomSheet { position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-white); border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; max-height: 90vh; animation: slideUp 0.3s ease-out; } .bottomSheetHandle { display: flex; justify-content: center; padding: var(--spacing-sm) 0; cursor: grab; touch-action: none; } .bottomSheetHandle:active { cursor: grabbing; } .handleBar { width: 40px; height: 4px; background: var(--color-border); border-radius: var(--radius-full); } .bottomSheetHeader { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--color-border); } .bottomSheetTitle { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0; } .bottomSheetClose { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; color: var(--color-text-secondary); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .bottomSheetClose:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); } .bottomSheetContent { flex: 1; overflow-y: auto; padding: var(--spacing-lg); -webkit-overflow-scrolling: touch; } /* Smooth scrolling for iOS */ .bottomSheetContent::-webkit-scrollbar { display: none; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* Desktop: Hide bottom sheet, use regular modals */ @media (min-width: 1025px) { .bottomSheet { max-width: 500px; left: 50%; transform: translateX(-50%); border-radius: var(--radius-xl); max-height: 80vh; } .bottomSheetHandle { display: none; } } .bottomNav { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: var(--color-white); border-top: 1px solid var(--color-border); display: flex; justify-content: space-around; align-items: center; z-index: 999; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05); padding-bottom: env(safe-area-inset-bottom, 0); } .bottomNavItem { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1; height: 100%; color: var(--color-text-secondary); text-decoration: none; transition: all var(--transition-fast); position: relative; min-width: 56px; padding: var(--spacing-xs) var(--spacing-sm); } .bottomNavItem:hover, .bottomNavItem:focus { color: var(--color-primary); background: var(--color-bg-secondary); } .bottomNavItem.active { color: var(--color-primary); } .bottomNavItem.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 32px; height: 3px; background: var(--color-primary); border-radius: 0 0 var(--radius-full) var(--radius-full); } .bottomNavIcon { position: relative; display: flex; align-items: center; justify-content: center; } .bottomNavBadge { position: absolute; top: -4px; right: -8px; background: var(--color-danger); color: var(--color-white); font-size: 10px; font-weight: var(--font-weight-semibold); min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; line-height: 1; } .bottomNavLabel { font-size: 11px; font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Hide on tablet and desktop */ @media (min-width: 768px) { .bottomNav { display: none; } } /* Adjust main content padding when bottom nav is visible */ @media (max-width: 767px) { .mainContent { padding-bottom: 80px; /* 64px nav + 16px spacing */ } } /* Safe area support for iOS notch */ @supports (padding-bottom: env(safe-area-inset-bottom)) { .bottomNav { height: calc(64px + env(safe-area-inset-bottom)); } } .mobileFormField { display: flex; flex-direction: column; gap: var(--spacing-xs); width: 100%; } .mobileFormLabel { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); display: flex; gap: var(--spacing-2xs); } .mobileFormLabel .required { color: var(--color-danger); } .nativeDateInput { width: 100%; height: 44px; padding: var(--spacing-sm) var(--spacing-md); font-size: 16px; /* Prevents zoom on iOS */ font-family: inherit; color: var(--color-text-primary); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: all var(--transition-fast); -webkit-appearance: none; appearance: none; } .nativeDateInput:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-alpha); } .nativeDateInput:disabled { background: var(--color-bg-tertiary); color: var(--color-text-tertiary); cursor: not-allowed; } .nativeDateInput.error { border-color: var(--color-danger); } .nativeDateInput.error:focus { box-shadow: 0 0 0 3px var(--color-danger-alpha); } .mobileFormError { font-size: var(--font-size-sm); color: var(--color-danger); } /* Date/Time picker group */ .mobileDateTimePickerGroup { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); } /* Mobile specific styles */ @media (max-width: 640px) { .nativeDateInput { /* Ensure native picker opens properly */ min-height: 44px; } .mobileDateTimePickerGroup { grid-template-columns: 1fr; gap: var(--spacing-sm); } } /* Desktop: match regular Input styles */ @media (min-width: 641px) { .nativeDateInput { height: 40px; font-size: var(--font-size-md); } } /* iOS specific styles */ @supports (-webkit-touch-callout: none) { .nativeDateInput::-webkit-datetime-edit-fields-wrapper { padding: 0; } .nativeDateInput::-webkit-calendar-picker-indicator { margin-left: auto; } } /* ActivityTimeline Component Styles */ .container { display: flex; flex-direction: column; } .timeline { display: flex; flex-direction: column; gap: var(--space-xlarge); } .item { display: flex; gap: var(--space-medium); } .lineContainer { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; } .dotGreen { background: var(--success-light); color: var(--success); } .dotIndigo { background: var(--primary-light); color: var(--primary); } .dotRed { background: var(--danger-light); color: var(--danger); } .dotAmber { background: var(--warning-light); color: var(--warning); } .dotTeal { background: var(--info-light); color: var(--info); } .dotPurple { background: var(--bg-secondary); color: var(--primary); } .dotSlate { background: var(--bg-secondary); color: var(--text-secondary); } .line { width: 2px; flex: 1; background: var(--border-color); margin-top: var(--space-xsmall); } .content { flex: 1; padding-bottom: var(--space-xsmall); } .header { display: flex; flex-wrap: wrap; gap: var(--space-xsmall); margin-bottom: var(--space-xsmall); } .action { font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .user { font-size: var(--font-size-small); color: var(--text-secondary); } .description { margin: 0 0 var(--space-2) 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; } .metadata { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--bg-secondary); border-radius: var(--border-radius-md); font-size: var(--text-xs); } .metadataItem { color: var(--text-secondary); } .metadataItem strong { color: var(--text-primary); font-weight: var(--font-semibold); } .timestamp { font-size: var(--text-xs); color: var(--text-tertiary); } .empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-10); color: var(--text-tertiary); } .empty svg { color: var(--text-tertiary); } .empty p { margin: 0; color: var(--text-secondary); font-size: var(--text-base); } @media (max-width: 640px) { .dot { width: 28px; height: 28px; } .item { gap: var(--space-3); } .header { flex-direction: column; gap: var(--space-1); } } /* EmptyState Component Styles */ .emptyState { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-xxhuge); } .emptyState.sm { padding: var(--space-huge); } .emptyState.lg { padding: var(--space-massive); } .emptyStateIcon { color: var(--neutral-medium-light); display: flex; align-items: center; justify-content: center; padding: var(--space-medium); } .emptyState.sm .emptyStateIcon { margin-bottom: var(--space-large); } .emptyState.sm .emptyStateContent { margin-bottom: var(--space-large); } .emptyStateTitle { margin: 0 0 var(--space-xsmall) 0; font-size: var(--font-size-large); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .emptyState.sm .emptyStateTitle { font-size: var(--font-size-base); } .emptyState.lg .emptyStateTitle { font-size: var(--font-size-xlarge); } .emptyStateDescription { margin: 0; font-size: var(--font-size-base); color: var(--text-secondary); line-height: var(--line-height-relaxed); } .emptyState.sm .emptyStateDescription { font-size: var(--font-size-small); } .emptyState.lg .emptyStateDescription { font-size: var(--font-size-large); } .emptyStateActions { display: flex; gap: var(--space-medium); align-items: center; justify-content: center; flex-wrap: wrap; padding: var(--space-medium); } /* Meeting Form Modal Styles */ .meeting-form { display: flex; flex-direction: column; gap: var(--space-xlarge); } .form-section { display: flex; flex-direction: column; gap: var(--space-large); } .section-title { font-size: 16px; font-weight: var(--font-weight-semibold); color: var(--text-primary); margin: 0; padding-bottom: var(--space-small); border-bottom: 1px solid var(--border-color); } .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-large); } .form-group { display: flex; flex-direction: column; gap: var(--space-small); } .form-group.full-width { grid-column: 1 / -1; } .modal-footer { display: flex; justify-content: flex-end; gap: var(--space-medium); padding: var(--space-large) var(--space-xlarge); border-top: 1px solid var(--border-color); background: var(--bg-secondary); } /* Responsive */ @media (max-width: 768px) { .meeting-form { gap: var(--space-large); } .form-row { grid-template-columns: 1fr; gap: var(--space-medium); } .modal-footer { padding: var(--space-medium); gap: var(--space-small); } .modal-footer button { flex: 1; } } /* Meeting Detail Modal Styles */ .meeting-detail-modal { max-width: 900px; } .meeting-detail-content { display: flex; flex-direction: column; gap: var(--space-xlarge); } /* ═══ HEADER SECTION ═══ */ .meeting-header-section { padding: var(--space-large); background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-radius: var(--radius-large); border: 1px solid var(--neutral-light); } .meeting-info-grid { display: flex; gap: var(--space-large); } .meeting-main-info { display: flex; gap: var(--space-large); align-items: flex-start; width: 100%; } .meeting-avatar-large { width: 80px; height: 80px; min-width: 80px; border-radius: var(--radius-large); background: linear-gradient(135deg, #1D6FA4 0%, #155D8A 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(29, 111, 164, 0.25); } .meeting-header-text { flex: 1; display: flex; flex-direction: column; gap: var(--space-small); } .meeting-title-group { display: flex; flex-direction: column; gap: var(--space-xsmall); } .meeting-title-with-status { display: flex; align-items: center; gap: var(--space-medium); flex-wrap: wrap; } .meeting-modal-title { font-size: var(--font-size-xxlarge); font-weight: var(--font-weight-bold); color: var(--neutral-darkest); margin: 0; line-height: 1.2; } .meeting-meta-info { display: flex; gap: var(--space-large); flex-wrap: wrap; font-size: var(--font-size-small); color: var(--neutral-dark); } .meeting-meta-info span { display: flex; align-items: center; gap: var(--space-xsmall); } .meta-date { font-weight: var(--font-weight-semibold); color: var(--neutral-darkest); } .meta-time { color: var(--primary); font-weight: var(--font-weight-medium); } .meta-location { color: var(--neutral-dark); font-weight: var(--font-weight-medium); } /* ═══ INFO SECTIONS ═══ */ .meeting-info-section { display: flex; flex-direction: column; gap: var(--space-medium); } .section-title { font-size: var(--font-size-large); font-weight: var(--font-weight-semibold); color: var(--neutral-darkest); margin: 0; padding-bottom: var(--space-small); border-bottom: 2px solid var(--neutral-light); } .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-large); } .info-item { display: flex; flex-direction: column; gap: var(--space-xsmall); } .info-item.full-width { grid-column: 1 / -1; } .info-label { display: flex; align-items: center; gap: var(--space-xsmall); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); color: var(--neutral-dark); text-transform: uppercase; letter-spacing: 0.5px; } .info-value { font-size: var(--font-size-base); color: var(--neutral-darkest); line-height: 1.5; white-space: pre-wrap; } /* ═══ FOOTER ACTIONS ═══ */ .modal-footer-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-medium); width: 100%; } .footer-actions-left, .footer-actions-right { display: flex; gap: var(--space-medium); } /* ═══ RESPONSIVE ═══ */ @media (max-width: 768px) { .meeting-header-section { padding: var(--space-medium); } .meeting-main-info { flex-direction: column; align-items: center; text-align: center; } .meeting-avatar-large { width: 64px; height: 64px; min-width: 64px; } .meeting-modal-title { font-size: var(--font-size-xlarge); } .meeting-meta-info { flex-direction: column; gap: var(--space-small); align-items: center; } .info-grid { grid-template-columns: 1fr; } .modal-footer-actions { flex-direction: column; gap: var(--space-small); } .footer-actions-left, .footer-actions-right { width: 100%; justify-content: center; } } .taskDetailModalBackdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: var(--space-4); backdrop-filter: blur(4px); animation: fadeIn 0.2s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .taskDetailModalContent { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-2xl); width: 100%; max-width: 860px; max-height: 90vh; display: flex; flex-direction: column; animation: slideUp 0.3s ease-out; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .taskDetailHeader { display: flex; justify-content: space-between; align-items: center; padding: var(--space-6); border-bottom: 1px solid var(--border-color); } .taskDetailHeaderLeft { display: flex; align-items: center; gap: var(--space-3); } .taskDetailId { font-size: var(--text-sm); color: var(--slate-500); font-weight: var(--font-medium); font-variant-numeric: tabular-nums; } .taskDetailCloseBtn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: none; color: var(--slate-500); cursor: pointer; border-radius: var(--radius-md); transition: all var(--transition-fast); } .taskDetailCloseBtn:hover { background: var(--slate-100); color: var(--slate-900); } .taskDetailBody { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-6); padding: var(--space-6); overflow-y: auto; flex: 1; } /* Left Column */ .taskDetailLeft { display: flex; flex-direction: column; gap: var(--space-6); } .taskDetailTitleSection { margin-bottom: var(--space-2); } .taskDetailTitle { font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--text-primary); cursor: pointer; padding: var(--space-2); margin: calc(var(--space-2) * -1); border-radius: var(--radius-sm); transition: background var(--transition-fast); } .taskDetailTitle:hover { background: var(--slate-50); } .taskDetailTitleEdit { margin-bottom: var(--space-4); } .taskDetailSection { display: flex; flex-direction: column; gap: var(--space-3); } .taskDetailSectionHeader { display: flex; justify-content: space-between; align-items: center; } .taskDetailSectionTitle { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--text-primary); } .taskDetailDescription { font-size: var(--text-sm); color: var(--slate-700); line-height: 1.6; white-space: pre-wrap; } .taskDetailDescription p { margin: 0 0 var(--space-2) 0; } .taskDetailProgress { font-size: var(--text-sm); color: var(--slate-600); font-weight: var(--font-medium); font-variant-numeric: tabular-nums; } .taskDetailSubtasks { display: flex; flex-direction: column; gap: var(--space-2); } .taskDetailSubtask { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--slate-50); border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast); } .taskDetailSubtask:hover { background: var(--slate-100); } .taskDetailSubtask input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; } .taskDetailSubtask span { font-size: var(--text-sm); color: var(--slate-700); flex: 1; } .taskDetailSubtask span.completed { text-decoration: line-through; color: var(--slate-400); } .taskDetailDependencies { display: flex; flex-direction: column; gap: var(--space-2); } .taskDetailDependency { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); background: var(--slate-50); border-radius: var(--radius-md); font-size: var(--text-sm); } .taskDetailDependency svg { color: var(--slate-400); flex-shrink: 0; } .depType { color: var(--slate-500); font-weight: var(--font-medium); } .depTitle { color: var(--slate-700); } /* Right Column */ .taskDetailRight { display: flex; flex-direction: column; gap: var(--space-4); } .taskDetailTimerCard { padding: var(--space-4); background: var(--primary-50); border: 1px solid var(--primary-200); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-3); } .taskDetailTimerTitle { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--primary-900); text-transform: uppercase; letter-spacing: 0.05em; } .taskDetailTimerDisplay { display: flex; align-items: center; gap: var(--space-3); justify-content: center; padding: var(--space-4) 0; } .taskDetailTimerDisplay svg { color: var(--primary-600); } .taskDetailTimerValue { font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--primary-900); font-variant-numeric: tabular-nums; } .taskDetailMetric { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--slate-50); border-radius: var(--radius-md); } .taskDetailLabel { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--slate-600); text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: var(--space-2); } .taskDetailLabel svg { color: var(--slate-400); } .taskDetailAccuracyBar { width: 100%; height: 8px; background: var(--slate-200); border-radius: var(--radius-full); overflow: hidden; } .taskDetailAccuracyFill { height: 100%; background: linear-gradient(90deg, var(--success-400), var(--success-600)); border-radius: var(--radius-full); transition: width var(--transition-base); } .taskDetailAccuracyText { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--success-700); text-align: center; font-variant-numeric: tabular-nums; } .taskDetailFields { display: flex; flex-direction: column; gap: var(--space-3); } .taskDetailField { display: flex; flex-direction: column; gap: var(--space-2); } .taskDetailTags { display: flex; flex-direction: column; gap: var(--space-2); } .taskDetailTagList { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* Responsive */ @media (max-width: 1024px) { .taskDetailBody { grid-template-columns: 1fr; } .taskDetailRight { order: -1; } } @media (max-width: 768px) { .taskDetailModalBackdrop { padding: 0; } .taskDetailModalContent { max-height: 100vh; border-radius: 0; } .taskDetailHeader, .taskDetailBody { padding: var(--space-4); } } .taskFormModalBackdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: var(--space-4); backdrop-filter: blur(4px); animation: fadeIn 0.2s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .taskFormModalContent { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-2xl); width: 100%; max-width: 720px; max-height: 90vh; display: flex; flex-direction: column; animation: slideUp 0.3s ease-out; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .taskFormHeader { display: flex; justify-content: space-between; align-items: center; padding: var(--space-6); border-bottom: 1px solid var(--border-color); } .taskFormTitle { font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--text-primary); } .taskFormCloseBtn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: none; color: var(--slate-500); cursor: pointer; border-radius: var(--radius-md); transition: all var(--transition-fast); } .taskFormCloseBtn:hover { background: var(--slate-100); color: var(--slate-900); } .taskFormBody { overflow-y: auto; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); } .taskFormSection { display: flex; flex-direction: column; gap: var(--space-2); } .taskFormLabel { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); } .taskFormRow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .taskFormError { font-size: var(--text-sm); color: var(--danger); margin-top: var(--space-1); } .taskFormHint { font-size: var(--text-sm); color: var(--slate-500); margin: 0; } /* Task Type Grid */ .taskTypeGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .taskTypeCard { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4); background: var(--white); border: 2px solid var(--slate-200); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } .taskTypeCard:hover { border-color: var(--primary-300); background: var(--primary-50); transform: translateY(-2px); box-shadow: var(--shadow-md); } .taskTypeCard.active { border-color: var(--primary-500); background: var(--primary-50); box-shadow: 0 0 0 3px var(--primary-100); } .taskTypeIcon { font-size: var(--text-2xl); } .taskTypeLabel { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--slate-700); } .taskTypeCard.active .taskTypeLabel { color: var(--primary-700); font-weight: var(--font-semibold); } /* Tags */ .taskFormTagsInput { display: flex; gap: var(--space-2); } .taskFormTagsList { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .taskFormTagRemove { display: inline-flex; align-items: center; justify-content: center; margin-left: var(--space-1); padding: 0; background: none; border: none; color: currentColor; opacity: 0.6; cursor: pointer; transition: opacity var(--transition-fast); } .taskFormTagRemove:hover { opacity: 1; } /* Footer */ .taskFormFooter { display: flex; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-color); margin-top: var(--space-2); } /* Responsive */ @media (max-width: 768px) { .taskFormModalBackdrop { padding: var(--space-2); } .taskFormModalContent { max-height: 95vh; } .taskFormHeader, .taskFormBody { padding: var(--space-4); } .taskTypeGrid { grid-template-columns: repeat(2, 1fr); } .taskFormRow { grid-template-columns: 1fr; } .taskFormFooter { flex-direction: column-reverse; } .taskFormFooter button { width: 100%; } } .closeSprintModalBackdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.75); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: var(--space-4); backdrop-filter: blur(4px); animation: fadeIn 0.2s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .closeSprintModalContent { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-2xl); width: 100%; max-width: 620px; max-height: 90vh; display: flex; flex-direction: column; animation: slideUp 0.3s ease-out; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .closeSprintHeader { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-6); border-bottom: 1px solid var(--border-color); background: var(--danger-50); } .closeSprintHeaderIcon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--danger-100); color: var(--danger-600); border-radius: var(--radius-full); flex-shrink: 0; } .closeSprintTitle { font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0; } .closeSprintSubtitle { font-size: var(--text-sm); color: var(--slate-600); margin: var(--space-1) 0 0 0; } .closeSprintCloseBtn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: none; color: var(--slate-500); cursor: pointer; border-radius: var(--radius-md); transition: all var(--transition-fast); margin-left: auto; } .closeSprintCloseBtn:hover { background: var(--slate-100); color: var(--slate-900); } .closeSprintBody { overflow-y: auto; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); } .closeSprintSection { display: flex; flex-direction: column; gap: var(--space-3); } .closeSprintSectionTitle { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0; } .closeSprintHint { font-size: var(--text-sm); color: var(--slate-500); margin: var(--space-1) 0 0 0; } /* Summary Cards */ .closeSprintSummary { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } .summaryCard { padding: var(--space-4); background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-2); } .summaryLabel { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--slate-600); text-transform: uppercase; letter-spacing: 0.05em; } .summaryValue { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--slate-900); font-variant-numeric: tabular-nums; } .summaryValue.success { color: var(--success-600); } .summaryValue.warning { color: var(--amber-600); } /* Incomplete Tasks List */ .incompleteTasksList { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--amber-50); border: 1px solid var(--amber-200); border-radius: var(--radius-md); max-height: 200px; overflow-y: auto; } .incompleteTaskItem { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-2); background: var(--white); border-radius: var(--radius-sm); font-size: var(--text-sm); } .taskType { padding: var(--space-1) var(--space-2); background: var(--slate-100); color: var(--slate-700); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--font-medium); text-transform: uppercase; } .taskTitle { color: var(--slate-900); font-weight: var(--font-medium); } .taskPoints { color: var(--slate-600); font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; } .incompleteTasksMore { padding: var(--space-2); text-align: center; color: var(--slate-600); font-size: var(--text-sm); font-style: italic; } /* Warning Box */ .closeSprintWarning { display: flex; gap: var(--space-3); padding: var(--space-4); background: var(--amber-50); border: 1px solid var(--amber-200); border-radius: var(--radius-md); } .closeSprintWarning svg { color: var(--amber-600); flex-shrink: 0; margin-top: 2px; } .closeSprintWarning strong { display: block; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--amber-900); margin-bottom: var(--space-1); } .closeSprintWarning p { font-size: var(--text-sm); color: var(--amber-800); margin: 0; line-height: 1.5; } /* Footer */ .closeSprintFooter { display: flex; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-color); } /* Responsive */ @media (max-width: 768px) { .closeSprintModalBackdrop { padding: var(--space-2); } .closeSprintModalContent { max-height: 95vh; } .closeSprintHeader, .closeSprintBody { padding: var(--space-4); } .closeSprintSummary { grid-template-columns: 1fr; } .closeSprintFooter { flex-direction: column-reverse; } .closeSprintFooter button { width: 100%; } } .opp-tags-container { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .opp-tags-header { display: flex; align-items: center; gap: 6px; color: #64748b; font-size: 13px; font-weight: 500; white-space: nowrap; flex-shrink: 0; } .opp-tags-label { font-size: 13px; font-weight: 500; } .opp-tags-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; } .opp-tag-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap; transition: all 0.15s ease; line-height: 1; } .opp-tag-pill:hover { filter: brightness(0.9); transform: translateY(-1px); } .opp-tag-pill-label { line-height: 1; } .opp-tag-pill-remove { display: flex; align-items: center; justify-content: center; padding: 0; background: rgba(255, 255, 255, 0.3); border: none; border-radius: 50%; width: 14px; height: 14px; cursor: pointer; color: white; transition: all 0.15s ease; } .opp-tag-pill-remove:hover { background: rgba(255, 255, 255, 0.5); } .opp-tag-pill-remove:disabled { opacity: 0.5; cursor: not-allowed; } .opp-tag-add-button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: transparent; border: 1px dashed #cbd5e1; border-radius: 12px; font-size: 11px; font-weight: 500; color: #64748b; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; line-height: 1; } .opp-tag-add-button:hover { border-color: var(--primary); color: var(--primary); background: rgba(99, 102, 241, 0.05); } .opp-tag-add-button:disabled { opacity: 0.5; cursor: not-allowed; } /* Selector overlay */ .opp-tag-selector-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 10000; } .opp-tag-selector-modal { width: 90%; max-width: 500px; padding: 20px; background: white; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); z-index: 10001; } .opp-tag-selector-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .opp-tag-selector-header h4 { margin: 0; font-size: 16px; font-weight: 600; color: #1e293b; } .opp-tag-close-button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: none; border-radius: 8px; color: #64748b; cursor: pointer; transition: all 0.15s ease; } .opp-tag-close-button:hover { background: #f1f5f9; color: #1e293b; } @media (max-width: 768px) { .opp-tag-selector-modal { width: 95%; padding: 16px; } } .opp-files-container { min-height: 200px; } .opp-files-loading { display: flex; align-items: center; gap: 10px; color: var(--text-tertiary); font-size: var(--font-size-small); padding: 16px 0; } .opp-files-loading .spinning { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* OpportunityComments — wrapper mínimo, Comments maneja su propio estilo */ .opp-comments-wrapper { width: 100%; } /* Opportunity Form Modal Styles */ .opportunity-form-modal { display: flex; flex-direction: column; gap: var(--space-xlarge); } /* Secciones */ .opportunity-form-modal .form-section { display: flex; flex-direction: column; gap: var(--space-large); padding: var(--space-xlarge) var(--space-large); background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); transition: all var(--transition-base); } .opportunity-form-modal .form-section:hover { border-color: var(--primary-light); box-shadow: 0 2px 8px rgba(29, 111, 164, 0.08); } .opportunity-form-modal .form-section:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .opportunity-form-modal .form-section h3 { margin: 0 0 var(--space-medium) 0; padding: 0 0 var(--space-small) 0; font-size: var(--font-size-large); font-weight: var(--font-weight-semibold); color: var(--primary); border-bottom: 2px solid var(--border-color); } /* Grid */ .opportunity-form-modal .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 48px; row-gap: var(--space-xlarge); } /* ═══════════════════════════════════ COLOR PICKER ═══════════════════════════════════ */ .opp-color-field { display: flex; flex-direction: column; gap: 6px; } .opp-color-label { font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); color: var(--text-secondary); display: block; } .opp-color-palette { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg-primary, #fff); border: 1px solid var(--border-color); border-radius: var(--radius-medium); min-height: 42px; } .opp-color-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; flex-shrink: 0; outline: none; } .opp-color-swatch:hover { transform: scale(1.18); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .opp-color-swatch.is-selected { border-color: var(--text-primary); box-shadow: 0 0 0 2px white inset, 0 2px 8px rgba(0, 0, 0, 0.15); } /* Swatch "personalizado" con gradiente arco iris */ .opp-color-custom { background: conic-gradient( hsl(0, 100%, 55%), hsl(60, 100%, 55%), hsl(120, 100%, 40%), hsl(180, 100%, 40%), hsl(240, 100%, 60%), hsl(300, 100%, 55%), hsl(0, 100%, 55%) ); position: relative; display: inline-flex; align-items: center; justify-content: center; } .opp-color-custom.is-selected { border-color: var(--text-primary); box-shadow: 0 0 0 2px white inset, 0 2px 8px rgba(0, 0, 0, 0.2); } /* El input nativo queda invisible pero ocupa toda el área para que el label lo active */ .opp-color-input-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; } /* ═══════════════════════════════════ CONTACT CHIP SELECTOR ═══════════════════════════════════ */ .opp-contact-selector { border: 1px solid var(--border-color); border-radius: var(--radius-medium); padding: 14px 16px; background: var(--bg-primary, #fff); min-height: 60px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s; } .opp-contact-selector:not(.is-disabled):hover { border-color: var(--primary-light); } .opp-contact-selector.is-disabled { background: var(--bg-secondary); opacity: 0.85; } .opp-contact-hint { display: flex; align-items: center; gap: 8px; color: var(--text-tertiary); font-size: var(--font-size-small); padding: 2px 0; } .opp-contact-empty { color: var(--text-tertiary); font-size: var(--font-size-small); font-style: italic; margin: 0; padding: 2px 0; } .opp-contact-instruction { font-size: 12px; color: var(--text-tertiary); margin: 0; line-height: 1.4; } .opp-contact-count { font-weight: 600; color: var(--primary); } .opp-contacts-chips { display: flex; flex-wrap: wrap; gap: 8px; } /* Chip individual */ .opp-contact-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 20px; font-size: 13px; cursor: pointer; transition: all 0.15s ease; border: 1.5px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); white-space: nowrap; outline: none; line-height: 1; } .opp-contact-chip:hover { border-color: var(--primary); background: rgba(0, 102, 255, 0.05); color: var(--primary); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 102, 255, 0.12); } .opp-contact-chip.is-selected { background: rgba(0, 102, 255, 0.1); border-color: var(--primary); color: var(--primary); font-weight: 500; } .opp-contact-chip.is-selected:hover { background: rgba(0, 102, 255, 0.16); } /* Avatar de iniciales */ .chip-initials { width: 22px; height: 22px; border-radius: 50%; background: var(--border-color); color: var(--text-secondary); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-transform: uppercase; transition: background 0.15s, color 0.15s; } .opp-contact-chip.is-selected .chip-initials { background: var(--primary); color: white; } .chip-name { font-weight: 500; } .chip-role { font-size: 11px; color: var(--text-tertiary); font-weight: 400; } .opp-contact-chip.is-selected .chip-role { color: var(--primary); opacity: 0.75; } .chip-check { color: var(--primary); flex-shrink: 0; margin-left: 2px; } /* ═══════════════════════════════════ PROBABILIDAD ICON ═══════════════════════════════════ */ .opp-pct-icon { font-size: 13px; color: var(--text-tertiary); font-weight: 600; user-select: none; line-height: 1; } /* ═══════════════════════════════════ HEADER MODULE (Tags — edit mode) ═══════════════════════════════════ */ .opp-form-header-module { padding: var(--space-medium) var(--space-large); background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); margin-bottom: var(--space-large); } /* ═══════════════════════════════════ TABS SECTION (Archivos / Comentarios — edit mode) ═══════════════════════════════════ */ .opp-form-tabs-section { margin-top: var(--space-xlarge); } .opp-form-tabs-section .segmented-control-wrapper { padding: var(--space-large); background: var(--bg-secondary); border-radius: var(--radius-large); border: 1px solid var(--border-color); } .opp-form-tabs-section .segmented-control { display: inline-flex; background: var(--bg-tertiary); border-radius: var(--radius-large); padding: 4px; gap: 4px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); } .opp-form-tabs-section .segment { display: flex; align-items: center; gap: var(--space-xsmall); padding: var(--space-small) var(--space-medium); background: transparent; border: none; border-radius: var(--radius-medium); color: var(--text-secondary); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; } .opp-form-tabs-section .segment:hover:not(.active) { color: var(--text-primary); background: rgba(0, 0, 0, 0.04); } .opp-form-tabs-section .segment.active { background: white; color: var(--primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); } .opp-tab-content { padding-top: var(--space-large); min-height: 200px; } /* ═══════════════════════════════════ RESPONSIVE ═══════════════════════════════════ */ @media (max-width: 768px) { .opportunity-form-modal .form-section { padding: var(--space-large); } .opportunity-form-modal .form-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: var(--space-large); } .opp-contacts-chips { gap: 6px; } .opp-contact-chip { font-size: 12px; } .chip-role { display: none; } } .modalBackdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); animation: fadeIn 0.2s ease-out; padding: var(--space-4); } .modalContainer { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-2xl); width: 100%; max-height: 90vh; display: flex; flex-direction: column; animation: slideUp 0.3s ease-out; } .modalMd { max-width: 680px; } .modalHeader { display: flex; justify-content: space-between; align-items: center; padding: var(--space-6); border-bottom: 1px solid var(--border-color); } .modalHeader h2 { font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0; } .modalCloseButton { background: none; border: none; color: var(--slate-400); cursor: pointer; padding: var(--space-2); border-radius: var(--radius-md); transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; } .modalCloseButton:hover { background: var(--slate-100); color: var(--slate-600); } .modalBody { padding: var(--space-6); overflow-y: auto; flex: 1; } .formGroup { margin-bottom: var(--space-4); } .formLabel { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--slate-700); margin-bottom: var(--space-2); } .formLabel.required::after { content: '*'; color: var(--danger-500); margin-left: var(--space-1); } .formLabel svg { color: var(--slate-400); } .formRow { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); } .formRow:has(.formGroup:nth-child(3)) { grid-template-columns: repeat(3, 1fr); } .skillInput { display: flex; gap: var(--space-2); } .skillInput input { flex: 1; } .skillsList { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } .skillChip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--font-medium); } .skillChip.required { background: var(--primary-50); border: 1px solid var(--primary-200); color: var(--primary-700); } .skillChip.preferred { background: var(--slate-100); border: 1px solid var(--slate-200); color: var(--slate-700); } .skillChip button { background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); transition: color var(--transition-fast); } .skillChip.required button { color: var(--primary-500); } .skillChip.required button:hover { color: var(--primary-700); } .skillChip.preferred button { color: var(--slate-400); } .skillChip.preferred button:hover { color: var(--slate-600); } .errorMessage { display: block; font-size: var(--text-sm); color: var(--danger-600); margin-top: var(--space-2); } .modalFooter { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-6); border-top: 1px solid var(--border-color); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { .modalBackdrop { padding: 0; } .modalContainer { max-width: 100%; max-height: 100vh; border-radius: 0; } .modalHeader, .modalBody, .modalFooter { padding: var(--space-4); } .formRow { grid-template-columns: 1fr; } .modalFooter { flex-direction: column; } .modalFooter button { width: 100%; } } /* Account Form Modal Styles - Scoped para evitar conflictos */ .account-form-modal { display: flex; flex-direction: column; gap: var(--space-xlarge); } /* Secciones del formulario - mejores prácticas UI/UX */ .account-form-modal .form-section { display: flex; flex-direction: column; gap: var(--space-large); padding: var(--space-xlarge) var(--space-large); background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); transition: all var(--transition-base); } .account-form-modal .form-section:hover { border-color: var(--primary-light); box-shadow: 0 2px 8px rgba(29, 111, 164, 0.08); } .account-form-modal .form-section:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } /* Headers de sección */ .account-form-modal .form-section h3 { margin: 0 0 var(--space-medium) 0; padding: 0 0 var(--space-small) 0; font-size: var(--font-size-large); font-weight: var(--font-weight-semibold); color: var(--primary); border-bottom: 2px solid var(--border-color); } /* Grid de inputs */ .account-form-modal .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 48px; row-gap: var(--space-xlarge); } /* Acciones del modal */ .account-form-modal .modal-actions { display: flex; justify-content: flex-end; gap: var(--space-large); margin-top: var(--space-large); } /* Responsive */ @media (max-width: 768px) { .account-form-modal .form-section { padding: var(--space-large); } .account-form-modal .form-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: var(--space-large); } } /* ═══════════════════════════════════════════════ NUEVA ESTRUCTURA: Logo y Tags arriba del formulario ═══════════════════════════════════════════════ */ .account-form-header-modules { display: flex; flex-direction: column; gap: 32px; margin-bottom: 32px; } .account-tags-card { padding: var(--space-medium) var(--space-large); background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); } /* ═══════════════════════════════════════════════ TABS SECTION (Solo Archivos y Comentarios) ═══════════════════════════════════════════════ */ .account-form-tabs-section { margin-top: 32px; } /* Segmented Control (iOS-style) - igual que AccountDetailModal */ .account-form-tabs-section .segmented-control-wrapper { padding: var(--space-large); background: var(--bg-secondary); border-radius: var(--radius-large); border: 1px solid var(--border-color); } .account-form-tabs-section .segmented-control { display: inline-flex; background: var(--bg-tertiary); border-radius: var(--radius-large); padding: 4px; gap: 4px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); } .account-form-tabs-section .segment { display: flex; align-items: center; gap: var(--space-xsmall); padding: var(--space-small) var(--space-medium); background: transparent; border: none; border-radius: var(--radius-medium); color: var(--text-secondary); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; position: relative; } .account-form-tabs-section .segment:hover:not(.active) { color: var(--text-primary); background: rgba(0, 0, 0, 0.04); } .account-form-tabs-section .segment.active { background: white; color: var(--primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); } /* Content Area (sin tarjeta, separado) */ .account-form-tabs-section .account-content-area { padding-top: var(--space-large); } .account-form-tabs-section .account-content-area > div { min-height: 200px; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Responsive */ @media (max-width: 768px) { .account-form-header-modules { gap: 24px; margin-bottom: 24px; padding-bottom: 24px; } .account-form-tabs-section { margin-top: 24px; padding-top: 24px; } .account-form-tabs-section .segment { padding: var(--space-xsmall) var(--space-small); font-size: var(--font-size-small); } } .project-form-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 3rem 1rem; color: var(--text-secondary); } .project-form-loading-spinner { width: 32px; height: 32px; border: 3px solid var(--border-color); border-top-color: var(--primary); border-radius: 50%; animation: project-form-spin 0.7s linear infinite; } .project-form-loading-text { font-size: 0.875rem; } @keyframes project-form-spin { to { transform: rotate(360deg); } } .project-form { display: flex; flex-direction: column; gap: 1.5rem; } .form-section { display: flex; flex-direction: column; gap: 1rem; } .form-section-title { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.5rem 0; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .modal-footer-actions { display: flex; gap: 0.75rem; justify-content: flex-end; width: 100%; } /* ═══════════════════════════════════ COLOR PICKER (estilo Oportunidades) ═══════════════════════════════════ */ .project-color-field { display: flex; flex-direction: column; gap: 6px; } .project-color-label { font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); color: var(--text-secondary); display: block; } .project-color-palette { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg-primary, #fff); border: 1px solid var(--border-color); border-radius: var(--radius-medium); min-height: 42px; } .project-color-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; flex-shrink: 0; outline: none; } .project-color-swatch:hover { transform: scale(1.18); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .project-color-swatch.is-selected { border-color: var(--text-primary); box-shadow: 0 0 0 2px white inset, 0 2px 8px rgba(0, 0, 0, 0.15); } /* Swatch "personalizado" con gradiente arco iris */ .project-color-custom { background: conic-gradient( hsl(0, 100%, 55%), hsl(60, 100%, 55%), hsl(120, 100%, 40%), hsl(180, 100%, 40%), hsl(240, 100%, 60%), hsl(300, 100%, 55%), hsl(0, 100%, 55%) ); position: relative; display: inline-flex; align-items: center; justify-content: center; } .project-color-custom.is-selected { border-color: var(--text-primary); box-shadow: 0 0 0 2px white inset, 0 2px 8px rgba(0, 0, 0, 0.2); } /* El input nativo queda invisible pero ocupa toda el área para que el label lo active */ .project-color-input-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; } /* Responsive */ @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } } /* ═══════════════════════════════════ TABS SECTION (Archivos y Comentarios) ═══════════════════════════════════ */ .project-form-tabs-section { margin-top: 32px; } /* Segmented Control (iOS-style) - igual que AccountFormModal */ .project-form-tabs-section .segmented-control-wrapper { padding: var(--space-large); background: var(--bg-secondary); border-radius: var(--radius-large); border: 1px solid var(--border-color); } .project-form-tabs-section .segmented-control { display: flex; width: 100%; background: var(--bg-tertiary); border-radius: var(--radius-large); padding: 4px; gap: 4px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); } .project-form-tabs-section .segment { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-xsmall); padding: var(--space-small) var(--space-medium); background: transparent; border: none; border-radius: var(--radius-medium); color: var(--text-secondary); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; position: relative; } .project-form-tabs-section .segment:hover:not(.active) { color: var(--text-primary); background: rgba(0, 0, 0, 0.04); } .project-form-tabs-section .segment.active { background: white; color: var(--primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); } .project-form-tabs-section .segment svg { flex-shrink: 0; } /* Content Area (sin tarjeta, separado) */ .project-form-tabs-section .project-content-area { padding-top: var(--space-large); } .project-form-tabs-section .project-content-area > div { min-height: 200px; } .project-files-container, .project-comments-container { min-height: 200px; } .files-loading-overlay { display: flex; align-items: center; gap: var(--space-small); padding: var(--space-medium); color: var(--text-secondary); font-size: var(--font-size-small); } .spinning { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Responsive */ @media (max-width: 768px) { .project-form-tabs-section { margin-top: 24px; } .project-form-tabs-section .segment { padding: var(--space-xsmall) var(--space-small); font-size: var(--font-size-small); } } .project-sprint-form { display: flex; flex-direction: column; gap: var(--space-medium); } .project-sprint-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-medium); } .project-sprint-form-footer { width: 100%; display: flex; justify-content: flex-end; gap: var(--space-small); } .project-sprint-form-error { margin: 0; color: var(--error); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); } @media (max-width: 768px) { .project-sprint-form-grid { grid-template-columns: 1fr; } } .project-sprints-tab { display: flex; flex-direction: column; gap: var(--space-medium); } .project-sprints-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-medium); } .project-sprints-toolbar-info h3 { margin: 0; font-size: var(--font-size-large); color: var(--text-primary); } .project-sprints-toolbar-info p { margin: var(--space-xxsmall) 0 0; color: var(--text-secondary); font-size: var(--font-size-small); } .project-sprints-state { border: 1px solid var(--border-color); border-radius: var(--radius-medium); background: var(--bg-card); padding: var(--space-large); text-align: center; } .project-sprints-state p { margin: 0; color: var(--text-primary); } .project-sprints-state-error { display: flex; flex-direction: column; gap: var(--space-small); align-items: center; } .project-sprints-state-empty { display: flex; flex-direction: column; gap: var(--space-small); align-items: center; } .project-sprints-state-empty span { color: var(--text-secondary); font-size: var(--font-size-small); } .project-sprints-table-wrapper { border: 1px solid var(--border-color); border-radius: var(--radius-medium); overflow: hidden; } .project-sprints-table { width: 100%; border-collapse: collapse; background: var(--bg-card); } .project-sprints-table th, .project-sprints-table td { text-align: left; padding: var(--space-medium); border-bottom: 1px solid var(--border-color); } .project-sprints-table th { background: var(--bg-secondary); color: var(--text-secondary); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); } .project-sprints-table tr:last-child td { border-bottom: none; } .project-sprints-row-clickable { cursor: pointer; transition: background-color var(--transition-fast); } .project-sprints-row-clickable:hover { background-color: var(--table-row-hover-bg); } .project-sprints-name-cell { display: flex; flex-direction: column; gap: var(--space-xxsmall); } .project-sprints-name-cell strong { color: var(--text-primary); } .project-sprints-name-cell span { color: var(--text-tertiary); font-size: var(--font-size-small); font-family: var(--font-mono); } .project-sprints-date-cell, .project-sprints-capacity-cell { display: inline-flex; align-items: center; gap: var(--space-xsmall); color: var(--text-secondary); } .project-sprint-status { display: inline-flex; align-items: center; border-radius: var(--radius-full); padding: 4px 10px; font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); } .project-sprint-status.status-active { background: rgba(16, 185, 129, 0.15); color: #047857; } .project-sprint-status.status-planning { background: rgba(59, 130, 246, 0.15); color: #1d4ed8; } .project-sprint-status.status-completed { background: rgba(107, 114, 128, 0.18); color: #374151; } .project-sprint-status.status-cancelled { background: rgba(239, 68, 68, 0.15); color: #b91c1c; } .project-sprint-status.status-default { background: rgba(107, 114, 128, 0.14); color: #4b5563; } .project-sprints-pagination { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-small); } .project-sprints-pagination span { color: var(--text-secondary); font-size: var(--font-size-small); } .project-sprints-actions { display: inline-flex; align-items: center; gap: var(--space-xsmall); } .project-sprint-action-btn { width: 30px; height: 30px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); border-radius: var(--radius-small); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-fast); } .project-sprint-action-btn:hover { color: var(--text-primary); border-color: var(--text-tertiary); } .project-sprint-action-btn-danger:hover { color: #b91c1c; border-color: #ef4444; background: rgba(239, 68, 68, 0.08); } @media (max-width: 900px) { .project-sprints-toolbar { flex-direction: column; align-items: flex-start; } .project-sprints-table-wrapper { overflow-x: auto; } .project-sprints-table { min-width: 680px; } } /* Project Detail Modal - Scoped styles */ .project-detail-modal .modal-body { padding: var(--space-xlarge); } .project-detail-modal .project-detail-content { display: flex; flex-direction: column; gap: var(--space-xlarge); } /* Header Section */ .project-detail-modal .project-header-section { border-bottom: 2px solid var(--border-color); padding-bottom: var(--space-xlarge); } /* Info Grid as Main Container */ .project-detail-modal .project-info-grid { display: flex; flex-direction: column; gap: var(--space-large); padding: var(--space-xlarge); background: var(--bg-secondary); border-radius: var(--radius-large); border: 1px solid var(--border-color); } .project-detail-modal .project-main-info { display: flex; gap: var(--space-large); align-items: center; } /* Project Color Badge */ .project-detail-modal .project-avatar-wrapper { flex-shrink: 0; } .project-detail-modal .project-color-badge { width: 80px; height: 80px; border-radius: var(--radius-large); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; box-shadow: var(--shadow-medium); border: 3px solid white; } .project-detail-modal .project-name-wrapper { flex: 1; display: flex; flex-direction: column; gap: var(--space-small); } .project-detail-modal .project-name-title { font-size: var(--font-size-xxlarge); font-weight: var(--font-weight-bold); color: var(--text-primary); margin: 0; line-height: 1.2; } .project-detail-modal .project-code-badge { display: inline-block; padding: var(--space-xxsmall) var(--space-small); background: var(--bg-tertiary); color: var(--text-secondary); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); border-radius: var(--radius-small); font-family: var(--font-mono); margin-right: var(--space-small); } /* Tags */ .project-detail-modal .account-meta-tags { display: flex; gap: var(--space-small); flex-wrap: wrap; align-items: center; } .project-detail-modal .account-meta-tags .tag { display: inline-flex; align-items: center; gap: var(--space-xxsmall); padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: var(--font-weight-medium); transition: all var(--transition-base); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } /* Key Information */ .project-detail-modal .project-key-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-medium); padding: var(--space-medium); background: white; border-radius: var(--radius-medium); } .project-detail-modal .info-item { display: flex; gap: var(--space-small); align-items: flex-start; } .project-detail-modal .info-icon { color: var(--text-secondary); flex-shrink: 0; margin-top: 2px; } .project-detail-modal .info-content { display: flex; flex-direction: column; gap: var(--space-xxsmall); } .project-detail-modal .info-label { font-size: var(--font-size-small); color: var(--text-secondary); font-weight: var(--font-weight-medium); } .project-detail-modal .info-value { font-size: var(--font-size-medium); color: var(--text-primary); font-weight: var(--font-weight-semibold); } /* Progress Section */ .project-detail-modal .project-progress-section { padding: var(--space-medium); background: white; border-radius: var(--radius-medium); } .project-detail-modal .progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-small); } .project-detail-modal .progress-label { font-size: var(--font-size-medium); font-weight: var(--font-weight-semibold); color: var(--text-primary); } .project-detail-modal .progress-percentage { font-size: var(--font-size-large); font-weight: var(--font-weight-bold); color: var(--primary); } .project-detail-modal .progress-bar-large { width: 100%; height: 12px; background: var(--bg-secondary); border-radius: var(--radius-full); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); } .project-detail-modal .progress-fill-large { height: 100%; background: var(--primary); border-radius: var(--radius-full); transition: width 0.3s ease; } /* Segmented Control (iOS-style) */ .project-detail-modal .segmented-control-wrapper { padding: var(--space-large); background: var(--bg-secondary); border-radius: var(--radius-large); border: 1px solid var(--border-color); } .project-detail-modal .segmented-control { display: inline-flex; background: var(--bg-tertiary); border-radius: var(--radius-large); padding: 4px; gap: 4px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); } .project-detail-modal .segment { display: flex; align-items: center; gap: var(--space-xsmall); padding: var(--space-small) var(--space-medium); background: transparent; border: none; border-radius: var(--radius-medium); color: var(--text-secondary); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; position: relative; } .project-detail-modal .segment:hover:not(.active) { color: var(--text-primary); background: rgba(0, 0, 0, 0.04); } .project-detail-modal .segment.active { background: white; color: var(--primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); } /* Tab content area */ .project-detail-modal .project-tab-content { min-height: 300px; } /* Overview Tab */ .project-detail-modal .overview-tab { display: flex; flex-direction: column; gap: var(--space-large); } .project-detail-modal .overview-section { padding: var(--space-large); background: var(--bg-card); border-radius: var(--radius-medium); border: 1px solid var(--border-color); } .project-detail-modal .section-title { font-size: var(--font-size-large); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin: 0 0 var(--space-medium) 0; } .project-detail-modal .section-text { font-size: var(--font-size-medium); color: var(--text-secondary); line-height: 1.6; margin: 0; white-space: pre-wrap; } /* Audit Info */ .project-detail-modal .audit-info { display: flex; flex-direction: column; gap: var(--space-medium); } .project-detail-modal .audit-item { display: flex; gap: var(--space-small); align-items: center; font-size: var(--font-size-small); } .project-detail-modal .audit-label { font-weight: var(--font-weight-medium); color: var(--text-secondary); min-width: 120px; } .project-detail-modal .audit-value { font-weight: var(--font-weight-semibold); color: var(--text-primary); } .project-detail-modal .audit-date { color: var(--text-tertiary); font-size: var(--font-size-small); margin-left: auto; } /* Files & Comments Tabs */ .project-detail-modal .files-tab, .project-detail-modal .sprints-tab, .project-detail-modal .comments-tab { padding-top: var(--space-medium); min-height: 400px; } /* Responsive segmented control */ @media (max-width: 768px) { .project-detail-modal .segmented-control-wrapper { padding: var(--space-small); } .project-detail-modal .segmented-control { width: 100%; justify-content: space-around; } .project-detail-modal .segment { flex: 1; justify-content: center; padding: var(--space-small) var(--space-xsmall); gap: 0; } .project-detail-modal .segment-text { display: none; } } /* Modal Footer */ .project-detail-modal .modal-footer-actions { display: flex; justify-content: space-between; gap: var(--space-medium); width: 100%; } .project-detail-modal .footer-actions-left, .project-detail-modal .footer-actions-right { display: flex; gap: var(--space-small); } /* Responsive */ @media (max-width: 768px) { .project-detail-modal .project-main-info { flex-direction: column; align-items: flex-start; } .project-detail-modal .project-key-info { grid-template-columns: 1fr; } .project-detail-modal .modal-footer-actions { flex-direction: column; } .project-detail-modal .footer-actions-left, .project-detail-modal .footer-actions-right { width: 100%; } } /* ============================================ LOGIN PAGE - Usando Design Tokens Azul Océano Profundo como color primario ============================================ */ .loginPage { min-height: 100vh; display: grid; grid-template-columns: 45% 55%; } /* Left Column: Branding */ .loginBranding { background-color: var(--neutral-darkest); color: var(--text-inverse); display: flex; align-items: center; justify-content: center; padding: var(--space-xlarge); position: relative; overflow: hidden; } .loginBranding::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 50%, rgba(29, 111, 164, 0.2) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(20, 184, 166, 0.15) 0%, transparent 50%); pointer-events: none; } .brandingContent { position: relative; z-index: 1; max-width: 520px; text-align: center; } .brandingLogo { margin-bottom: var(--space-xlarge); display: flex; justify-content: center; } .logoImage { width: 180px; height: auto; filter: drop-shadow(var(--shadow-medium)); } .brandingTitle { font-size: 42px; font-weight: 800; margin: 0 0 var(--space-small) 0; color: var(--text-inverse); letter-spacing: -0.03em; text-shadow: var(--shadow-small); } .brandingTagline { font-size: 18px; color: var(--text-sidebar-secondary); margin: 0 0 var(--space-huge) 0; line-height: 1.6; font-weight: 400; } .brandingFeatures { display: flex; flex-direction: column; gap: var(--space-medium); text-align: left; margin-top: var(--space-xlarge); } .feature { display: flex; align-items: flex-start; gap: var(--space-medium); padding: var(--space-xsmall) 0; transition: all 0.3s ease; } .feature:hover { transform: translateX(4px); } .featureIcon { width: 28px; height: 28px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-inverse); box-shadow: var(--shadow-small); } .featureContent h3 { font-size: 16px; font-weight: 600; color: var(--text-inverse); margin: 0 0 var(--space-xxsmall) 0; } .featureContent p { font-size: 14px; color: var(--text-sidebar-secondary); margin: 0; line-height: 1.5; } /* Right Column: Login Form */ .loginFormSection { display: flex; align-items: center; justify-content: center; padding: var(--space-huge); background: var(--bg-secondary); } .loginCard { width: 100%; max-width: 440px; padding: var(--space-xhuge); background: var(--bg-card); box-shadow: var(--shadow-large); border-radius: var(--radius-large); border: 1px solid var(--border-color); } .loginHeader { margin-bottom: var(--space-xxlarge); text-align: left; } .loginHeader h2 { margin: 0 0 var(--space-xsmall) 0; font-size: 28px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; } .loginHeader p { margin: 0; font-size: 14px; color: var(--text-secondary); font-weight: 400; } .loginForm { display: flex; flex-direction: column; gap: var(--space-large); } .formGroup { display: flex; flex-direction: column; gap: var(--space-xsmall); } /* Inputs optimizados con tokens */ .loginForm .input-field { height: 48px; font-size: 15px; padding: 0 var(--space-medium); border: 1.5px solid var(--border-color); background-color: var(--bg-secondary); transition: all 0.2s ease; border-radius: var(--radius-medium); color: var(--text-primary); } .loginForm .input-field::placeholder { color: var(--text-tertiary); } .loginForm .input-field:hover:not(:disabled) { border-color: var(--neutral-medium-light); background-color: var(--bg-primary); } .loginForm .input-field:focus { border-color: var(--border-focus); background-color: var(--bg-primary); box-shadow: 0 0 0 3px var(--primary-light); outline: none; } /* Botón primario con azul océano */ .loginForm .button-primary { height: 48px; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; background: var(--primary); color: var(--text-inverse); border: none; border-radius: var(--radius-medium); box-shadow: var(--shadow-primary); transition: all 0.2s ease; margin-top: var(--space-xsmall); cursor: pointer; } .loginForm .button-primary:hover:not(:disabled) { background: var(--primary-hover); box-shadow: var(--shadow-primary-hover); transform: translateY(-1px); } .loginForm .button-primary:active:not(:disabled) { transform: scale(0.98); } .loginForm .button-primary:disabled { background: var(--neutral-medium-light); box-shadow: none; cursor: not-allowed; opacity: 0.6; } .loginForm .button-primary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .inputLabel { font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-bottom: 0; } .passwordInputWrapper { position: relative; display: flex; align-items: center; } /* Padding derecho al input de contraseña para el botón de toggle */ .passwordInputWrapper .input-field { padding-right: 44px !important; } .passwordToggle { position: absolute; right: var(--space-xsmall); top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: var(--space-xsmall); color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-small); transition: all 0.2s ease; z-index: 10; min-width: 36px; min-height: 36px; } .passwordToggle:hover { color: var(--text-secondary); background-color: var(--bg-hover); } .passwordToggle:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .passwordToggle:active { transform: translateY(-50%) scale(0.95); } /* Error message optimizado */ .loginError { padding: var(--space-small); background-color: var(--danger-light); border-left: 3px solid var(--danger); border-radius: var(--radius-small); color: var(--danger-dark); font-size: 13px; line-height: 1.5; font-weight: 500; display: flex; align-items: flex-start; gap: var(--space-xsmall); } .forgotPasswordLink { text-align: center; margin-top: var(--space-medium); } .linkButton { background: none; border: none; color: var(--text-link); font-size: 14px; font-weight: 500; cursor: pointer; padding: var(--space-xxsmall) var(--space-xsmall); border-radius: var(--radius-small); transition: all 0.2s ease; } .linkButton:hover { color: var(--text-link-hover); background-color: var(--primary-light); } .linkButton:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .loginFooter { margin-top: var(--space-xlarge); padding-top: 0; border-top: none; text-align: center; } .loginFooter p { margin: 0; font-size: 14px; color: var(--text-secondary); font-weight: 400; } /* Suspended Account State */ .suspendedMessage { text-align: center; padding: var(--space-xlarge); } .suspendedIcon { font-size: 48px; margin-bottom: var(--space-medium); color: var(--danger); } .suspendedMessage h2 { margin: 0 0 var(--space-small) 0; font-size: 24px; font-weight: 700; color: var(--danger-dark); } .suspendedMessage p { margin: 0 0 var(--space-xsmall) 0; color: var(--text-secondary); line-height: 1.6; } .suspendedHelp { font-size: 14px; color: var(--text-tertiary); margin-top: var(--space-medium); } /* Responsive: Tablet */ @media (max-width: 1024px) { .loginPage { grid-template-columns: 40% 60%; } .brandingContent { max-width: 400px; } .logoImage { width: 160px; } .brandingTitle { font-size: 36px; } } /* Responsive: Mobile (single column) */ @media (max-width: 968px) { .loginPage { grid-template-columns: 1fr; } .loginBranding { min-height: 280px; padding: var(--space-xlarge) var(--space-medium); } .brandingContent { max-width: 100%; } .logoImage { width: 140px; } .brandingTitle { font-size: 32px; } .brandingTagline { font-size: 16px; } .brandingFeatures { display: none; } .loginFormSection { padding: var(--space-large); min-height: calc(100vh - 280px); } .loginCard { max-width: 100%; padding: var(--space-xlarge); box-shadow: var(--shadow-medium); } .loginHeader h2 { font-size: 24px; } } /* Responsive: Extra small mobile */ @media (max-width: 480px) { .loginBranding { min-height: 240px; padding: var(--space-medium); } .logoImage { width: 120px; } .brandingTitle { font-size: 28px; } .loginFormSection { padding: var(--space-medium); } .loginCard { padding: var(--space-large); } .loginForm .input-field, .loginForm .button-primary { height: 44px; font-size: 14px; } } /* Loading state animation */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .loginForm .button-primary:disabled { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Focus visible para mejor accesibilidad */ *:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } /* Mejorar contraste en modo de alto contraste */ @media (prefers-contrast: high) { .loginForm .input-field { border-width: 2px; } .loginError { border-left-width: 4px; } } /* ============================================ FORGOT PASSWORD PAGE - Usando Design Tokens Consistente con LoginPage - Azul Océano Profundo ============================================ */ .forgotPasswordPage { min-height: 100vh; display: grid; grid-template-columns: 45% 55%; } /* Left Column: Branding (same as LoginPage) */ .forgotPasswordBranding { background-color: var(--neutral-darkest); color: var(--text-inverse); display: flex; align-items: center; justify-content: center; padding: var(--space-xlarge); position: relative; overflow: hidden; } .forgotPasswordBranding::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 50%, rgba(29, 111, 164, 0.2) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(20, 184, 166, 0.15) 0%, transparent 50%); pointer-events: none; } /* Right Column: Form */ .forgotPasswordFormSection { display: flex; align-items: center; justify-content: center; padding: var(--space-xlarge); background-color: var(--bg-secondary); } .forgotPasswordCard { width: 100%; max-width: 460px; padding: var(--space-xhuge); position: relative; background: var(--bg-card); box-shadow: var(--shadow-large); border-radius: var(--radius-large); border: 1px solid var(--border-color); } .backButton { display: inline-flex; align-items: center; gap: var(--space-xsmall); background: none; border: none; color: var(--text-secondary); font-size: 14px; font-weight: 500; cursor: pointer; padding: var(--space-xsmall) var(--space-small); border-radius: var(--radius-small); transition: all 0.2s ease; margin-bottom: var(--space-xlarge); } .backButton:hover { color: var(--text-link); background-color: var(--primary-light); } .backButton:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .backButton:active { transform: translateX(-2px); } .forgotPasswordHeader { text-align: center; margin-bottom: var(--space-xxlarge); } .forgotPasswordHeader .headerIcon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); border-radius: var(--radius-large); margin-bottom: var(--space-medium); box-shadow: var(--shadow-primary); color: #FFFFFF; } .forgotPasswordHeader .headerIcon svg, .forgotPasswordHeader .headerIcon svg path, .forgotPasswordHeader .headerIcon svg line, .forgotPasswordHeader .headerIcon svg polyline, .forgotPasswordHeader .headerIcon svg rect, .forgotPasswordHeader .headerIcon svg circle { stroke: #FFFFFF !important; fill: none !important; } .forgotPasswordHeader h2 { font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-small) 0; } .forgotPasswordHeader p { font-size: 14px; color: var(--text-secondary); margin: 0; line-height: 1.6; } .forgotPasswordForm { display: flex; flex-direction: column; gap: var(--space-large); } .formGroup { display: flex; flex-direction: column; gap: var(--space-xsmall); } /* Inputs optimizados */ .forgotPasswordForm .input-field { height: 48px; font-size: 15px; padding: 0 var(--space-medium); border: 1.5px solid var(--border-color); background-color: var(--bg-secondary); transition: all 0.2s ease; border-radius: var(--radius-medium); color: var(--text-primary); } .forgotPasswordForm .input-field::placeholder { color: var(--text-tertiary); } .forgotPasswordForm .input-field:hover:not(:disabled) { border-color: var(--neutral-medium-light); background-color: var(--bg-primary); } .forgotPasswordForm .input-field:focus { border-color: var(--border-focus); background-color: var(--bg-primary); box-shadow: 0 0 0 3px var(--primary-light); outline: none; } /* Botón primario con azul océano */ .forgotPasswordForm .button-primary { height: 48px; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; background: var(--primary); color: var(--text-inverse); border: none; border-radius: var(--radius-medium); box-shadow: var(--shadow-primary); transition: all 0.2s ease; cursor: pointer; } .forgotPasswordForm .button-primary:hover:not(:disabled) { background: var(--primary-hover); box-shadow: var(--shadow-primary-hover); transform: translateY(-1px); } .forgotPasswordForm .button-primary:active:not(:disabled) { transform: scale(0.98); } .forgotPasswordForm .button-primary:disabled { background: var(--neutral-medium-light); box-shadow: none; cursor: not-allowed; opacity: 0.6; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .forgotPasswordForm .button-primary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .forgotPasswordError { padding: var(--space-small); background-color: var(--danger-light); border-left: 3px solid var(--danger); border-radius: var(--radius-small); color: var(--danger-dark); font-size: 13px; line-height: 1.5; font-weight: 500; display: flex; align-items: flex-start; gap: var(--space-xsmall); } .forgotPasswordFooter { margin-top: var(--space-xlarge); text-align: center; font-size: 14px; color: var(--text-secondary); } .forgotPasswordFooter p { margin: 0; } .linkButton { background: none; border: none; color: var(--text-link); font-weight: 600; cursor: pointer; padding: var(--space-xxsmall) var(--space-xxsmall); font-size: inherit; transition: all 0.2s ease; border-radius: var(--radius-small); } .linkButton:hover { color: var(--text-link-hover); text-decoration: underline; } .linkButton:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } /* Success State */ .successState { text-align: center; padding: var(--space-xlarge) 0; } .successIcon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: linear-gradient(135deg, var(--success), var(--success-hover)); border-radius: var(--radius-full); margin-bottom: var(--space-xlarge); box-shadow: var(--shadow-large); animation: successPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); color: #FFFFFF; } .successIcon svg, .successIcon svg path, .successIcon svg line, .successIcon svg polyline, .successIcon svg rect, .successIcon svg circle { stroke: #FFFFFF !important; fill: none !important; } @keyframes successPop { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } .successState h2 { font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-medium) 0; } .successMessage { font-size: 15px; color: var(--text-secondary); margin: 0 0 var(--space-small) 0; line-height: 1.6; } .successNote { font-size: 13px; color: var(--text-tertiary); margin: 0 0 var(--space-xxlarge) 0; padding: var(--space-small); background-color: var(--info-light); border-radius: var(--radius-medium); border-left: 3px solid var(--info); } .successActions { display: flex; flex-direction: column; gap: var(--space-small); } .successActions .linkButton { margin-top: var(--space-xsmall); } /* Loading state animation */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* Responsive: Tablet */ @media (max-width: 1024px) { .forgotPasswordPage { grid-template-columns: 40% 60%; } } /* Responsive: Mobile */ @media (max-width: 968px) { .forgotPasswordPage { grid-template-columns: 1fr; } .forgotPasswordBranding { display: none; } .forgotPasswordFormSection { padding: var(--space-large); min-height: 100vh; } .forgotPasswordCard { padding: var(--space-xlarge); box-shadow: var(--shadow-medium); } } /* Responsive: Extra small mobile */ @media (max-width: 480px) { .forgotPasswordFormSection { padding: var(--space-medium); } .forgotPasswordCard { padding: var(--space-large); } .forgotPasswordHeader h2 { font-size: 20px; } .forgotPasswordHeader .headerIcon { width: 56px; height: 56px; } .successIcon { width: 64px; height: 64px; } .successState h2 { font-size: 20px; } .forgotPasswordForm .input-field, .forgotPasswordForm .button-primary { height: 44px; font-size: 14px; } } /* Focus visible para mejor accesibilidad */ *:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } /* Mejorar contraste en modo de alto contraste */ @media (prefers-contrast: high) { .forgotPasswordForm .input-field { border-width: 2px; } .forgotPasswordError { border-left-width: 4px; } .successNote { border-left-width: 4px; } } /* ============================================ RESET PASSWORD PAGE - Usando Design Tokens Consistente con LoginPage - Azul Océano Profundo ============================================ */ .resetPasswordPage { min-height: 100vh; display: grid; grid-template-columns: 45% 55%; } /* Left Column: Branding */ .resetPasswordBranding { background-color: var(--neutral-darkest); color: var(--text-inverse); display: flex; align-items: center; justify-content: center; padding: var(--space-xlarge); position: relative; overflow: hidden; } .resetPasswordBranding::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 50%, rgba(29, 111, 164, 0.2) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(20, 184, 166, 0.15) 0%, transparent 50%); pointer-events: none; } /* Right Column: Form */ .resetPasswordFormSection { display: flex; align-items: center; justify-content: center; padding: var(--space-xlarge); background-color: var(--bg-secondary); } .resetPasswordCard { width: 100%; max-width: 460px; padding: var(--space-xhuge); background: var(--bg-card); box-shadow: var(--shadow-large); border-radius: var(--radius-large); border: 1px solid var(--border-color); } .resetPasswordHeader { text-align: center; margin-bottom: var(--space-xxlarge); } .resetPasswordHeader .headerIcon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); border-radius: var(--radius-large); margin-bottom: var(--space-medium); box-shadow: var(--shadow-primary); color: #FFFFFF; } .resetPasswordHeader .headerIcon svg, .resetPasswordHeader .headerIcon svg path, .resetPasswordHeader .headerIcon svg line, .resetPasswordHeader .headerIcon svg polyline, .resetPasswordHeader .headerIcon svg rect, .resetPasswordHeader .headerIcon svg circle { stroke: #FFFFFF !important; fill: none !important; } .resetPasswordHeader h2 { font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-small) 0; } .resetPasswordHeader p { font-size: 14px; color: var(--text-secondary); margin: 0; line-height: 1.6; } .resetPasswordForm { display: flex; flex-direction: column; gap: var(--space-large); } .formGroup { display: flex; flex-direction: column; gap: var(--space-xsmall); } .inputLabel { font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-bottom: 0; } .passwordInputWrapper { position: relative; width: 100%; } .passwordInputWrapper .input-field { padding-right: 44px !important; } .passwordToggle { position: absolute; right: var(--space-xsmall); top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: var(--space-xsmall); color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-small); transition: all 0.2s ease; z-index: 10; min-width: 36px; min-height: 36px; } .passwordToggle:hover { color: var(--text-secondary); background-color: var(--bg-hover); } .passwordToggle:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .passwordToggle:active { transform: translateY(-50%) scale(0.95); } /* Inputs optimizados */ .resetPasswordForm .input-field { height: 48px; font-size: 15px; padding: 0 var(--space-medium); border: 1.5px solid var(--border-color); background-color: var(--bg-secondary); transition: all 0.2s ease; border-radius: var(--radius-medium); color: var(--text-primary); } .resetPasswordForm .input-field::placeholder { color: var(--text-tertiary); } .resetPasswordForm .input-field:hover:not(:disabled) { border-color: var(--neutral-medium-light); background-color: var(--bg-primary); } .resetPasswordForm .input-field:focus { border-color: var(--border-focus); background-color: var(--bg-primary); box-shadow: 0 0 0 3px var(--primary-light); outline: none; } /* Botón primario con azul océano */ .resetPasswordForm .button-primary { height: 48px; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; background: var(--primary); color: var(--text-inverse); border: none; border-radius: var(--radius-medium); box-shadow: var(--shadow-primary); transition: all 0.2s ease; cursor: pointer; } .resetPasswordForm .button-primary:hover:not(:disabled) { background: var(--primary-hover); box-shadow: var(--shadow-primary-hover); transform: translateY(-1px); } .resetPasswordForm .button-primary:active:not(:disabled) { transform: scale(0.98); } .resetPasswordForm .button-primary:disabled { background: var(--neutral-medium-light); box-shadow: none; cursor: not-allowed; opacity: 0.6; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .resetPasswordForm .button-primary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .resetPasswordError { padding: var(--space-small); background-color: var(--danger-light); border-left: 3px solid var(--danger); border-radius: var(--radius-small); color: var(--danger-dark); font-size: 13px; line-height: 1.5; font-weight: 500; display: flex; align-items: flex-start; gap: var(--space-xsmall); } .resetPasswordFooter { margin-top: var(--space-xlarge); text-align: center; font-size: 14px; color: var(--text-secondary); } .resetPasswordFooter p { margin: 0; } .linkButton { background: none; border: none; color: var(--text-link); font-weight: 600; cursor: pointer; padding: var(--space-xxsmall) var(--space-xxsmall); font-size: inherit; transition: all 0.2s ease; border-radius: var(--radius-small); } .linkButton:hover { color: var(--text-link-hover); text-decoration: underline; } .linkButton:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } /* Success State */ .successState { text-align: center; padding: var(--space-xlarge) 0; } .successIcon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: linear-gradient(135deg, var(--success), var(--success-hover)); border-radius: var(--radius-full); margin-bottom: var(--space-xlarge); box-shadow: var(--shadow-large); animation: successPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); color: #FFFFFF; } .successIcon svg, .successIcon svg path, .successIcon svg line, .successIcon svg polyline, .successIcon svg rect, .successIcon svg circle { stroke: #FFFFFF !important; fill: none !important; } @keyframes successPop { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } .successState h2 { font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-medium) 0; } .successMessage { font-size: 15px; color: var(--text-secondary); margin: 0 0 var(--space-xxlarge) 0; line-height: 1.6; } .successActions { display: flex; flex-direction: column; gap: var(--space-small); } /* Error State */ .errorState { text-align: center; padding: var(--space-xlarge) 0; } .errorIcon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: linear-gradient(135deg, var(--danger), var(--danger-hover)); border-radius: var(--radius-full); margin-bottom: var(--space-xlarge); box-shadow: var(--shadow-large); color: #FFFFFF; } .errorIcon svg, .errorIcon svg path, .errorIcon svg line, .errorIcon svg polyline, .errorIcon svg rect, .errorIcon svg circle { stroke: #FFFFFF !important; fill: none !important; } .errorState h2 { font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-medium) 0; } .errorMessage { font-size: 15px; color: var(--text-secondary); margin: 0 0 var(--space-xxlarge) 0; line-height: 1.6; } .errorActions { display: flex; flex-direction: column; gap: var(--space-small); } /* Loading state animation */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* Responsive: Tablet */ @media (max-width: 1024px) { .resetPasswordPage { grid-template-columns: 40% 60%; } } /* Responsive: Mobile */ @media (max-width: 968px) { .resetPasswordPage { grid-template-columns: 1fr; } .resetPasswordBranding { display: none; } .resetPasswordFormSection { padding: var(--space-large); min-height: 100vh; } .resetPasswordCard { padding: var(--space-xlarge); box-shadow: var(--shadow-medium); } } /* Responsive: Extra small mobile */ @media (max-width: 480px) { .resetPasswordFormSection { padding: var(--space-medium); } .resetPasswordCard { padding: var(--space-large); } .resetPasswordHeader h2 { font-size: 20px; } .resetPasswordHeader .headerIcon { width: 56px; height: 56px; } .successIcon, .errorIcon { width: 64px; height: 64px; } .successState h2, .errorState h2 { font-size: 20px; } .resetPasswordForm .input-field, .resetPasswordForm .button-primary { height: 44px; font-size: 14px; } } /* Focus visible para mejor accesibilidad */ *:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } /* Mejorar contraste en modo de alto contraste */ @media (prefers-contrast: high) { .resetPasswordForm .input-field { border-width: 2px; } .resetPasswordError { border-left-width: 4px; } } /* ============================================ UNAUTHORIZED PAGE - Usando Design Tokens Página de acceso denegado por permisos ============================================ */ .unauthorizedPage { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-xlarge); background: linear-gradient( 135deg, var(--bg-secondary) 0%, var(--bg-primary) 100% ); } .unauthorizedContent { max-width: 560px; width: 100%; text-align: center; background: var(--bg-card); padding: var(--space-xhuge); border-radius: var(--radius-large); box-shadow: var(--shadow-xlarge); border: 1px solid var(--border-color); } .unauthorizedIcon { display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 120px; background: linear-gradient(135deg, var(--warning), var(--warning-hover)); border-radius: var(--radius-full); color: var(--text-inverse); margin: 0 auto var(--space-xlarge); box-shadow: var(--shadow-large); animation: iconPulse 2s ease-in-out infinite; } .unauthorizedIcon svg { stroke: var(--text-inverse); fill: none; } @keyframes iconPulse { 0%, 100% { transform: scale(1); box-shadow: var(--shadow-large); } 50% { transform: scale(1.05); box-shadow: 0 20px 40px -10px rgba(245, 158, 11, 0.4); } } .unauthorizedContent h1 { font-size: 32px; font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-medium) 0; letter-spacing: -0.02em; } .unauthorizedMessage { font-size: 18px; color: var(--text-secondary); margin: 0 0 var(--space-small) 0; line-height: 1.6; } .unauthorizedSubtext { font-size: 14px; color: var(--text-tertiary); margin: 0 0 var(--space-xxlarge) 0; line-height: 1.6; max-width: 460px; margin-left: auto; margin-right: auto; } .unauthorizedActions { display: flex; flex-direction: column; gap: var(--space-small); margin-bottom: var(--space-xlarge); } .unauthorizedActions .button-primary, .unauthorizedActions .button-secondary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xsmall); width: 100%; } .unauthorizedHelp { padding-top: var(--space-large); border-top: 1px solid var(--border-color); } .unauthorizedHelp p { font-size: 14px; color: var(--text-secondary); margin: 0 0 var(--space-xsmall) 0; } .helpLink { font-size: 14px; font-weight: 600; color: var(--text-link); text-decoration: none; transition: all 0.2s ease; } .helpLink:hover { color: var(--text-link-hover); text-decoration: underline; } .helpLink:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-small); } /* Responsive: Tablet */ @media (max-width: 768px) { .unauthorizedContent { padding: var(--space-xlarge); } .unauthorizedIcon { width: 100px; height: 100px; } .unauthorizedIcon svg { width: 56px; height: 56px; } .unauthorizedContent h1 { font-size: 28px; } .unauthorizedMessage { font-size: 16px; } } /* Responsive: Mobile */ @media (max-width: 480px) { .unauthorizedPage { padding: var(--space-medium); } .unauthorizedContent { padding: var(--space-large); } .unauthorizedIcon { width: 80px; height: 80px; } .unauthorizedIcon svg { width: 48px; height: 48px; } .unauthorizedContent h1 { font-size: 24px; } .unauthorizedMessage { font-size: 15px; } .unauthorizedActions { gap: var(--space-xsmall); } } /* Focus visible para mejor accesibilidad */ *:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } /* DashboardPage.css */ .dashboard-page { padding: 32px 40px; max-width: 1600px; margin: 0 auto; } /* Header */ .dashboard-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; gap: 24px; flex-wrap: wrap; } .dashboard-header h1 { font-size: 32px; font-weight: 700; color: #0F172A; margin: 0 0 6px 0; letter-spacing: -0.02em; } .dashboard-header p { font-size: 15px; color: #64748B; margin: 0; font-weight: 400; } /* Dashboard Actions */ .dashboard-actions { display: flex; align-items: center; gap: 12px; } /* View Toggle */ .view-toggle { display: flex; align-items: center; gap: var(--space-xsmall); background: transparent; padding: 0; border-radius: 0; border: none; height: 50px; } .toggle-button { display: flex; align-items: center; gap: 6px; padding: 7px 20px; border: none; background: transparent; color: #64748B; font-size: 14px; font-weight: 500; border-radius: 6px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; position: relative; min-width: 90px; justify-content: center; } .toggle-button svg { width: 16px; height: 16px; display: none; /* Ocultar iconos */ } .toggle-button:hover:not(.active) { color: #475569; } .toggle-button.active { background: #6366F1; color: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); font-weight: 600; } .toggle-button.active svg { color: white; } /* Stats Grid */ .dashboard-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px; } .stat-card { display: flex; align-items: flex-start; gap: 16px; padding: 4px; } .stat-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background-color: #F8FAFC; flex-shrink: 0; border: 1px solid #E2E8F0; } .stat-content { flex: 1; min-width: 0; padding-top: 4px; } .stat-label { font-size: 13px; color: #64748B; margin-bottom: 6px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; } .stat-value { font-size: 28px; font-weight: 700; color: #0F172A; margin-bottom: 4px; letter-spacing: -0.02em; } /* Dashboard Grid */ .dashboard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } /* Widget Header */ .widget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .widget-header h2 { font-size: 18px; font-weight: 600; color: #0F172A; margin: 0; letter-spacing: -0.01em; } .widget-header button { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #6366F1; font-weight: 500; } /* Activity List */ .activity-list { display: flex; flex-direction: column; gap: 20px; } .activity-item { display: flex; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid #F1F5F9; } .activity-item:last-child { border-bottom: none; padding-bottom: 0; } .activity-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: #F8FAFC; border: 1px solid #E2E8F0; } .activity-content { flex: 1; min-width: 0; padding-top: 2px; } .activity-title { font-size: 15px; font-weight: 600; color: #0F172A; margin-bottom: 4px; line-height: 1.4; } .activity-description { font-size: 14px; color: #64748B; margin-bottom: 6px; line-height: 1.5; } .activity-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #94A3B8; } /* Quick Links */ .quick-links { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .quick-link-button { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #E2E8F0; border-radius: 10px; background-color: white; color: #475569; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; width: 100%; text-align: left; } .quick-link-button:hover { border-color: #C7D2FE; background-color: #F5F7FF; color: #4F46E5; transform: translateX(4px); } .quick-link-button span { flex: 1; } .quick-link-button svg:first-child { flex-shrink: 0; color: #64748B; } .quick-link-button svg:last-child { flex-shrink: 0; color: #CBD5E1; } .quick-link-button:hover svg:first-child { color: #6366F1; } .quick-link-button:hover svg:last-child { color: #6366F1; } /* Empty States */ .empty-state { text-align: center; color: #94A3B8; font-size: 14px; padding: 48px 20px; font-weight: 400; } /* Responsive Design */ @media (max-width: 1200px) { .dashboard-stats { grid-template-columns: repeat(2, 1fr); } .dashboard-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .dashboard-page { padding: 20px; } .dashboard-header { flex-direction: column; align-items: flex-start; margin-bottom: 24px; } .dashboard-actions { width: 100%; flex-direction: column; align-items: stretch; } .toggle-button { flex: 1; justify-content: center; } .dashboard-stats { grid-template-columns: 1fr; gap: 16px; } .quick-links { gap: 12px; } } /* Pull-to-Refresh Styles */ .pullToRefreshContainer { position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch; height: 100%; } .pullToRefreshIndicator { position: absolute; top: -60px; left: 0; right: 0; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-xs); color: var(--color-text-secondary); z-index: 10; } .refreshIcon { transition: transform 0.2s ease; } .refreshSpinner { width: 24px; height: 24px; border: 2px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .refreshText { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } .pullToRefreshContent { will-change: transform; } /* Desktop: hide pull-to-refresh */ @media (min-width: 1025px) { .pullToRefreshIndicator { display: none; } } /* ======================================== ACCOUNTS PAGE - Diseño con Tokens Semánticos ======================================== */ .accounts-page { padding: var(--space-xlarge); max-width: var(--layout-page-max-width); margin: 0 auto; background: var(--bg-secondary); min-height: 100vh; } /* ========== HEADER ========== */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-large); margin-bottom: var(--space-large); padding: 0 var(--space-medium); } .accounts-page .page-header h1 { margin: 0; font-size: var(--page-header-title-size); font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: var(--line-height-tight); } .page-description { margin: var(--space-xsmall) 0 0 0; font-size: var(--page-header-description-size); color: var(--text-secondary); font-weight: var(--font-weight-regular); } /* ========== CARD ========== */ .accounts-page > .card { background: var(--bg-card); border-radius: var(--radius-large); box-shadow: var(--shadow-small); border: 1px solid var(--border-color); overflow: hidden; padding: 0 !important; } /* ========== TOOLBAR ========== */ .accounts-toolbar { display: flex; align-items: center; gap: var(--space-medium); padding: var(--space-xlarge) var(--space-xlarge) var(--space-large) var(--space-xlarge); background: var(--bg-card); } .accounts-toolbar > div:first-child { width: 360px; flex-shrink: 0; margin: 0; } /* Account Manager Filter - empuja el grupo de controles a la derecha */ .account-manager-filter { min-width: 220px; flex-shrink: 0; } .account-manager-filter .select-container { margin: 0; } .account-manager-filter .select-wrapper { height: 50px !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; background: #ffffff !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .account-manager-filter .select-wrapper:hover { border-color: #d1d5db !important; } .account-manager-filter .select-wrapper:focus-within { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important; outline: none !important; } .account-manager-filter .select-input { height: 48px !important; padding: 12px 40px 12px 16px !important; font-size: 14px !important; border: none !important; border-radius: 8px !important; background: transparent !important; line-height: 1.5 !important; } .account-manager-filter .select-input:focus { outline: none !important; box-shadow: none !important; } @media (max-width: 768px) { .account-manager-filter { min-width: 150px; } } /* Search Input Overrides */ .accounts-toolbar .searchInput { border: 1px solid var(--search-input-border); background: var(--search-input-bg); padding: var(--search-input-padding-vertical) var(--search-input-padding-horizontal); border-radius: var(--search-input-radius); font-size: var(--search-input-font-size); } .accounts-toolbar .searchInput:focus-within { border-color: var(--search-input-focus-border); box-shadow: 0 0 0 3px rgba(209, 213, 219, 0.1); } .accounts-toolbar .searchInput__icon { margin-right: var(--space-small); } .accounts-toolbar .searchInput__field { font-size: var(--search-input-font-size); } /* ========== VIEW TOGGLE ========== */ .view-toggle { display: flex; align-items: center; gap: var(--space-xsmall); background: transparent; margin-left: auto; padding: 0; border-radius: 0; border: none; height: 50px; } .view-toggle .toggle-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 20px; height: 50px; border: 1px solid var(--border-color); background: white; color: var(--text-secondary); border-radius: var(--radius-medium); cursor: pointer; font-size: var(--font-size-small); font-weight: var(--font-weight-medium); transition: all 0.2s ease; white-space: nowrap; } .view-toggle .toggle-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--neutral-medium); } .view-toggle .toggle-btn.active { background: var(--primary); color: white; font-weight: var(--font-weight-semibold); border-color: var(--primary); } .view-toggle .toggle-btn svg { flex-shrink: 0; } .view-toggle .toggle-btn span { display: inline; } /* Responsive: Hide text on smaller screens */ @media (max-width: 768px) { .view-toggle .toggle-btn span { display: none; } .view-toggle .toggle-btn { padding: 6px 10px; } } /* ========== FILTER CHIPS ========== */ .activeFiltersChips { display: flex; align-items: center; gap: var(--space-small); padding: var(--space-small) var(--space-xlarge); border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); flex-wrap: wrap; margin: 0; } .filterChip { display: flex; align-items: center; gap: var(--space-xsmall); padding: var(--chip-padding-vertical) var(--chip-padding-horizontal); background: var(--chip-bg); border: 1px solid var(--chip-border); border-radius: var(--radius-small); font-size: var(--chip-font-size); color: var(--chip-text); } .chipRemove { display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: none; color: var(--text-tertiary); cursor: pointer; transition: color var(--transition-fast); } .chipRemove:hover { color: var(--chip-hover-text); } .clearAllFilters { padding: var(--chip-padding-vertical) var(--chip-padding-horizontal); background: none; border: none; color: var(--primary); font-size: var(--chip-font-size); font-weight: var(--font-weight-medium); cursor: pointer; transition: color var(--transition-fast); } .clearAllFilters:hover { color: var(--primary-hover); } /* ========== TABLE ========== */ .accounts-page .table-container { border: none; border-radius: 0; overflow-x: auto; margin: 0; } .accounts-page table { width: 100%; border-collapse: collapse; margin: 0; } /* Pull-to-refresh wrappers */ .accounts-page .pullToRefreshContainer, .accounts-page .pullToRefreshContent, .accounts-page [class*="pull-to-refresh"] { margin: 0; padding: 0; } /* Table Header */ .accounts-page thead { background: var(--table-header-bg); border-bottom: 1px solid var(--border-color); border-top: 1px solid var(--border-color); } .accounts-page thead th { padding: var(--table-header-padding-vertical) var(--table-cell-padding-horizontal); text-align: left; font-size: var(--table-header-font-size); font-weight: var(--font-weight-semibold); color: var(--table-header-text); text-transform: uppercase; letter-spacing: 0.05em; } .accounts-page thead th:first-child { padding-left: var(--table-cell-padding-horizontal); } .accounts-page thead th:last-child { padding-right: var(--table-cell-padding-horizontal); } /* Table Body */ .accounts-page tbody tr { border-bottom: 1px solid var(--border-color); transition: background-color var(--transition-fast); cursor: pointer; } .accounts-page tbody tr:hover { background-color: var(--table-row-hover-bg); } .accounts-page tbody tr:last-child { border-bottom: 1px solid var(--border-color); } .accounts-page tbody td { padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal); font-size: var(--font-size-base); color: var(--text-secondary); vertical-align: middle; } .accounts-page tbody td:first-child { padding-left: var(--table-cell-padding-horizontal); } .accounts-page tbody td:last-child { padding-right: var(--table-cell-padding-horizontal); } /* ========== AVATAR ========== */ .account-name-cell { display: flex; align-items: center; gap: var(--space-small); } .account-avatar-wrapper { position: relative; flex-shrink: 0; } .account-avatar { width: var(--avatar-size-default); height: var(--avatar-size-default); border-radius: var(--radius-full); background: var(--primary); color: var(--text-inverse); display: flex; align-items: center; justify-content: center; font-size: var(--avatar-font-size); font-weight: var(--font-weight-semibold); flex-shrink: 0; text-transform: uppercase; overflow: hidden; } .account-avatar img { width: 100%; height: 100%; object-fit: cover; } .tier-badge { position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); z-index: 1; } .tier-badge svg { width: 10px; height: 10px; } .tier-gold { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color: white; } .tier-silver { background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%); color: #374151; } .tier-bronze { background: linear-gradient(135deg, #fdba74 0%, #ea580c 100%); color: white; } .tier-platinum { background: linear-gradient(135deg, #e0e7ff 0%, #818cf8 100%); color: white; } .account-name { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: 2px; line-height: var(--line-height-tight); } .account-industry { font-size: var(--font-size-small); color: var(--text-tertiary); line-height: var(--line-height-normal); } /* ========== PAGINATION ========== */ .pagination { display: flex; justify-content: space-between; align-items: center; padding: var(--pagination-padding-vertical) var(--pagination-padding-horizontal); border-top: none; background: var(--bg-card); margin: 0; } .pagination-stats { display: flex; align-items: center; gap: var(--space-medium); font-size: var(--pagination-font-size); color: var(--text-secondary); } .pagination-stats strong { font-weight: var(--font-weight-semibold); color: var(--text-primary); } .pagination-controls { display: flex; align-items: center; gap: var(--space-small); } .pagination-info { font-size: var(--pagination-font-size); color: var(--text-secondary); font-weight: var(--font-weight-medium); } .pagination button { min-width: var(--pagination-button-min-width); font-size: var(--pagination-font-size); } /* ========== PRIMARY BUTTON ========== */ .page-header button[class*="primary"] { background: var(--primary); color: var(--text-inverse); border: none; padding: 10px var(--space-large); border-radius: var(--radius-medium); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; gap: var(--space-xsmall); box-shadow: var(--shadow-small); } .page-header button[class*="primary"]:hover { background: var(--primary-hover); box-shadow: var(--shadow-medium); } /* ========== ACTION BUTTONS ========== */ .action-buttons { display: flex; align-items: center; gap: var(--space-xsmall); justify-content: flex-end; } .action-btn { display: flex; align-items: center; justify-content: center; width: var(--action-button-size); height: var(--action-button-size); padding: 0; background: transparent; border: 1px solid var(--action-button-border); border-radius: var(--radius-small); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); } .action-btn:hover { background: var(--action-button-hover-bg); border-color: var(--neutral-medium-light); color: var(--text-primary); } .action-btn-view:hover { background: var(--action-button-view-hover-bg); border-color: var(--action-button-view-hover-border); color: var(--action-button-view-hover-border); } .action-btn-edit:hover { background: var(--action-button-edit-hover-bg); border-color: var(--action-button-edit-hover-border); color: var(--action-button-edit-hover-border); } .accounts-page .action-btn-delete { color: var(--danger) !important; border-color: var(--danger-light) !important; } .accounts-page .action-btn-delete:hover { background: var(--danger) !important; border-color: var(--danger) !important; color: var(--neutral-white) !important; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(244, 63, 94, 0.3); } /* ========== EMPTY STATES ========== */ .accounts-page [class*="NoAccountsState"], .accounts-page [class*="NoResultsState"], .accounts-page [class*="ErrorState"], .accounts-page [class*="TableSkeleton"] { padding: var(--space-massive) var(--space-xlarge); margin: 0; } .accounts-page [class*="TableSkeleton"], .accounts-page .skeletonTable { padding: 0; margin: 0; border: none; border-radius: 0; } /* ========== RESPONSIVE ========== */ /* Tablet: 641–1024px — sidebar hamburguesa, contenido a pantalla completa */ @media (max-width: 1024px) { .accounts-toolbar { flex-wrap: wrap; gap: var(--space-small); } .accounts-toolbar > div:first-child { min-width: 200px; } .account-manager-filter { min-width: 180px; } } /* Mobile: ≤768px */ @media (max-width: 768px) { .accounts-page { padding: var(--space-medium) var(--space-small); } .page-header { flex-direction: column; align-items: stretch; gap: var(--space-small); padding: 0; margin-bottom: var(--space-medium); } .page-header > div:first-child { flex: 1; } .page-header button { width: 100%; justify-content: center; } .accounts-toolbar { flex-direction: column; align-items: stretch; padding: var(--space-medium); gap: var(--space-small); } .accounts-toolbar > div:first-child { flex: unset; width: 100%; } .account-manager-filter { min-width: unset; width: 100%; } .account-manager-filter .select-input { height: 44px !important; } .account-manager-filter .select-wrapper { height: 44px !important; } .view-toggle { width: 100%; justify-content: stretch; } .view-toggle .toggle-btn { flex: 1; height: 44px; justify-content: center; } .pagination { flex-direction: column; align-items: center; gap: var(--space-small); padding: var(--space-medium); } .accounts-page thead th, .accounts-page tbody td { padding: var(--space-small) var(--space-medium); } /* Columna nombre ocupa más espacio al tener menos columnas */ .accounts-page thead th:first-child, .accounts-page tbody td:first-child { min-width: 160px; } } /* Mobile pequeño: ≤480px */ @media (max-width: 480px) { .accounts-page { padding: var(--space-small); } .account-name { font-size: var(--font-size-small); } .account-industry { display: none; } .action-buttons { gap: 4px; } .action-btn { width: 32px; height: 32px; } } /* ======================================== CONTACTS PAGE - Diseño con Tokens Semánticos ======================================== */ .contacts-page { padding: var(--space-xlarge); max-width: var(--layout-page-max-width); margin: 0 auto; background: var(--bg-secondary); min-height: 100vh; } /* ========== HEADER ========== */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-large); margin-bottom: var(--space-large); padding: 0 var(--space-medium); } .contacts-page .page-header h1 { margin: 0; font-size: var(--page-header-title-size); font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: var(--line-height-tight); } .page-description { margin: var(--space-xsmall) 0 0 0; font-size: var(--page-header-description-size); color: var(--text-secondary); font-weight: var(--font-weight-regular); } /* ========== CARD ========== */ .contacts-page > .card { background: var(--bg-card); border-radius: var(--radius-large); box-shadow: var(--shadow-small); border: 1px solid var(--border-color); overflow: hidden; padding: 0 !important; } /* ========== TOOLBAR ========== */ .contacts-toolbar { display: flex; align-items: center; gap: var(--space-medium); padding: var(--space-xlarge) var(--space-xlarge) var(--space-large) var(--space-xlarge); background: var(--bg-card); } .contacts-toolbar > div:first-child { width: 360px; flex-shrink: 0; margin: 0; } /* Account Filter — Combobox */ .account-filter { min-width: 220px; flex-shrink: 0; } .account-filter .combobox-wrapper { height: 50px; } .account-filter .combobox-input { font-size: 14px; } /* Contact Manager Filter - Igualar tamaño con SearchInput */ .contact-manager-filter { min-width: 220px; flex-shrink: 0; } .contact-manager-filter .select-container { margin: 0; } .contact-manager-filter .select-wrapper { height: 50px !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; background: #ffffff !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .contact-manager-filter .select-wrapper:hover { border-color: #d1d5db !important; } .contact-manager-filter .select-wrapper:focus-within { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important; outline: none !important; } .contact-manager-filter .select-input { height: 48px !important; padding: 12px 40px 12px 16px !important; font-size: 14px !important; border: none !important; border-radius: 8px !important; background: transparent !important; line-height: 1.5 !important; } .contact-manager-filter .select-input:focus { outline: none !important; box-shadow: none !important; } @media (max-width: 768px) { .account-filter, .contact-manager-filter { min-width: 150px; } } /* Search Input Overrides */ .contacts-toolbar .searchInput { border: 1px solid var(--search-input-border); background: var(--search-input-bg); padding: var(--search-input-padding-vertical) var(--search-input-padding-horizontal); border-radius: var(--search-input-radius); font-size: var(--search-input-font-size); } .contacts-toolbar .searchInput:focus-within { border-color: var(--search-input-focus-border); box-shadow: 0 0 0 3px rgba(209, 213, 219, 0.1); } .contacts-toolbar .searchInput__icon { margin-right: var(--space-small); } .contacts-toolbar .searchInput__field { font-size: var(--search-input-font-size); } /* ========== FILTERS ========== */ .toolbar-filters { display: flex; gap: var(--space-medium); align-items: center; } .filter-select { padding: var(--space-small) var(--space-medium); border: 1px solid var(--border-color); border-radius: var(--radius-small); background-color: var(--bg-primary); color: var(--text-primary); font-size: var(--font-size-base); font-family: inherit; cursor: pointer; transition: all var(--transition-fast); min-width: 180px; height: var(--size-input-height); } .filter-select:hover { border-color: var(--neutral-medium); } .filter-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } /* ========== FILTER CHIPS ========== */ .activeFiltersChips { display: flex; align-items: center; gap: var(--space-small); padding: var(--space-small) var(--space-xlarge); border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); flex-wrap: wrap; margin: 0; } .filterChip { display: flex; align-items: center; gap: var(--space-xsmall); padding: var(--chip-padding-vertical) var(--chip-padding-horizontal); background: var(--chip-bg); border: 1px solid var(--chip-border); border-radius: var(--radius-full); font-size: var(--chip-font-size); color: var(--chip-text); font-weight: var(--font-weight-medium); transition: all var(--transition-fast); } .chipRemove { display: flex; align-items: center; justify-content: center; padding: 2px; background: none; border: none; cursor: pointer; color: var(--chip-text); border-radius: var(--radius-full); transition: all var(--transition-fast); margin: 0; line-height: 1; } .chipRemove:hover { color: var(--chip-hover-text); background-color: rgba(0, 0, 0, 0.05); } .clearAllFilters { background: none; border: none; cursor: pointer; color: var(--text-secondary); font-size: var(--chip-font-size); text-decoration: underline; padding: var(--space-xxsmall) var(--space-small); border-radius: var(--radius-small); transition: all var(--transition-fast); font-weight: var(--font-weight-medium); } .clearAllFilters:hover { color: var(--text-primary); background-color: var(--bg-hover); } /* ========== TOOLBAR STATS ========== */ .toolbar-stats { display: flex; gap: var(--space-medium); align-items: center; } .stat { font-size: var(--font-size-small); color: var(--text-secondary); } .stat strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); } /* ========== TABLE ========== */ .contacts-page .table-container { border: none; border-radius: 0; overflow-x: auto; margin: 0; } .contacts-page table { width: 100%; border-collapse: collapse; margin: 0; } /* Table Header */ .contacts-page thead { background: var(--table-header-bg); border-bottom: 1px solid var(--border-color); border-top: 1px solid var(--border-color); } .contacts-page thead th { padding: var(--table-header-padding-vertical) var(--table-cell-padding-horizontal); text-align: left; font-size: var(--table-header-font-size); font-weight: var(--font-weight-semibold); color: var(--table-header-text); text-transform: uppercase; letter-spacing: 0.05em; } .contacts-page thead th:first-child { padding-left: var(--table-cell-padding-horizontal); } .contacts-page thead th:last-child { padding-right: var(--table-cell-padding-horizontal); } /* Table Body */ .contacts-page tbody tr { border-bottom: 1px solid var(--border-color); transition: background-color var(--transition-fast); cursor: pointer; } .contacts-page tbody tr:hover { background-color: var(--table-row-hover-bg); } .contacts-page tbody tr:last-child { border-bottom: 1px solid var(--border-color); } .contacts-page tbody td { padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal); font-size: var(--font-size-base); color: var(--text-secondary); vertical-align: middle; } .contacts-page tbody td:first-child { padding-left: var(--table-cell-padding-horizontal); } .contacts-page tbody td:last-child { padding-right: var(--table-cell-padding-horizontal); } /* ========== CONTACT CELLS ========== */ .contact-name-cell { display: flex; align-items: center; gap: var(--space-small); } .contact-avatar-wrapper { position: relative; flex-shrink: 0; } .contact-avatar { width: var(--avatar-size-default); height: var(--avatar-size-default); border-radius: var(--radius-full); background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: var(--text-inverse); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-semibold); font-size: var(--avatar-font-size); flex-shrink: 0; letter-spacing: 0.5px; overflow: hidden; } .contact-avatar img { width: 100%; height: 100%; object-fit: cover; } .primary-badge { position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color: white; z-index: 1; } .primary-badge svg { width: 10px; height: 10px; } .contact-name { font-weight: var(--font-weight-semibold); color: var(--text-primary); font-size: var(--font-size-base); line-height: var(--line-height-tight); } .contact-title { font-size: var(--font-size-small); color: var(--text-secondary); margin-top: 2px; } .contact-account-sub { font-size: var(--font-size-small); color: var(--text-tertiary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } .contact-info-cell { display: flex; flex-direction: column; gap: 4px; } .contact-info-item { display: flex; align-items: center; gap: 6px; font-size: 0.85em; color: var(--text-secondary); } .contact-info-item svg { flex-shrink: 0; } .account-link { color: var(--primary); text-decoration: none; font-weight: var(--font-weight-medium); transition: color var(--transition-fast); } .account-link:hover { color: var(--primary-dark); text-decoration: underline; } .status-cell { display: flex; gap: var(--space-xsmall); align-items: center; flex-wrap: wrap; } /* ========== ACTION BUTTONS ========== */ .action-buttons { display: flex; align-items: center; gap: var(--space-xsmall); justify-content: flex-end; } .action-btn { display: flex; align-items: center; justify-content: center; width: var(--action-button-size); height: var(--action-button-size); padding: 0; background: transparent; border: 1px solid var(--action-button-border); border-radius: var(--radius-small); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); } .action-btn:hover { background: var(--action-button-hover-bg); border-color: var(--neutral-medium-light); color: var(--text-primary); } .action-btn-view:hover { background: var(--action-button-view-hover-bg); border-color: var(--action-button-view-hover-border); color: var(--action-button-view-hover-border); } .action-btn-edit:hover { background: var(--action-button-edit-hover-bg); border-color: var(--action-button-edit-hover-border); color: var(--action-button-edit-hover-border); } .contacts-page .action-btn-delete { color: var(--danger) !important; border-color: var(--danger-light) !important; } .contacts-page .action-btn-delete:hover { background: var(--danger) !important; border-color: var(--danger) !important; color: var(--neutral-white) !important; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(244, 63, 94, 0.3); } /* ========== PAGINATION ========== */ .pagination { display: flex; justify-content: space-between; align-items: center; padding: var(--pagination-padding-vertical) var(--pagination-padding-horizontal); border-top: none; background: var(--bg-card); margin: 0; } .pagination-stats { display: flex; align-items: center; gap: var(--space-medium); font-size: var(--pagination-font-size); color: var(--text-secondary); } .pagination-stats strong { font-weight: var(--font-weight-semibold); color: var(--text-primary); } .pagination-controls { display: flex; align-items: center; gap: var(--space-small); } .pagination-info { font-size: var(--pagination-font-size); color: var(--text-secondary); font-weight: var(--font-weight-medium); } .pagination button { min-width: var(--pagination-button-min-width); font-size: var(--pagination-font-size); } /* ========== PRIMARY BUTTON ========== */ .page-header button[class*="primary"] { background: var(--primary); color: var(--text-inverse); border: none; padding: 10px var(--space-large); border-radius: var(--radius-medium); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; gap: var(--space-xsmall); box-shadow: var(--shadow-small); } .page-header button[class*="primary"]:hover { background: var(--primary-hover); box-shadow: var(--shadow-medium); } /* ========== EMPTY STATES ========== */ .contacts-page [class*="NoContactsState"], .contacts-page [class*="NoResultsState"], .contacts-page [class*="ErrorState"], .contacts-page [class*="TableSkeleton"] { padding: var(--space-massive) var(--space-xlarge); margin: 0; } .contacts-page [class*="TableSkeleton"], .contacts-page .skeletonTable { padding: 0; margin: 0; border: none; border-radius: 0; } /* ========== RESPONSIVE ========== */ @media (max-width: 1024px) { .contacts-toolbar { flex-wrap: wrap; gap: var(--space-small); } .account-filter, .contact-manager-filter { min-width: 180px; } } @media (max-width: 768px) { .contacts-page { padding: var(--space-medium) var(--space-small); } .page-header { flex-direction: column; align-items: stretch; gap: var(--space-small); padding: 0; margin-bottom: var(--space-medium); } .page-header button { width: 100%; justify-content: center; } .contacts-toolbar { flex-direction: column; align-items: stretch; padding: var(--space-medium); gap: var(--space-small); } .contacts-toolbar > div:first-child { flex: unset; width: 100%; } .account-filter, .contact-manager-filter { min-width: unset; width: 100%; } .pagination { flex-direction: column; align-items: center; gap: var(--space-small); padding: var(--space-medium); } .contacts-page thead th, .contacts-page tbody td { padding: var(--space-small) var(--space-medium); } } @media (max-width: 480px) { .contacts-page { padding: var(--space-small); } } /* ==================== CONTACT DETAIL PAGE - NUEVO DISEÑO ==================== */ .contactDetailPage { display: flex; flex-direction: column; gap: 32px; padding: 32px; max-width: 1400px; margin: 0 auto; } /* ==================== BREADCRUMB ==================== */ .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; } .breadcrumbLink { color: var(--text-link); text-decoration: none; transition: color 0.2s; } .breadcrumbLink:hover { color: var(--text-link-hover); text-decoration: underline; } .breadcrumbSeparator { color: var(--text-tertiary); } /* ==================== HEADER SECTION ==================== */ .contactHeader { padding: 0 !important; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .contactHeaderContent { display: flex; justify-content: space-between; align-items: flex-start; padding: 40px; gap: 40px; background: linear-gradient(to bottom, #ffffff, #f8fafc); } .contactHeaderLeft { display: flex; gap: 24px; flex: 1; } .contactAvatar { position: relative; width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #1e40af); color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 36px; flex-shrink: 0; letter-spacing: 1px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); text-transform: uppercase; } .primaryBadge { position: absolute; top: -4px; right: -4px; width: 28px; height: 28px; background: #f59e0b; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); border: 3px solid white; } .contactHeaderInfo { flex: 1; display: flex; flex-direction: column; gap: 20px; } .contactName { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .contactName h1 { font-size: 28px; font-weight: 700; color: var(--text-primary); margin: 0; line-height: 1.2; } .contactMeta { display: flex; flex-wrap: wrap; gap: 24px; } .metaItem { display: flex; align-items: center; gap: 8px; color: #64748b; font-size: 14px; } .metaItem svg { color: #94a3b8; flex-shrink: 0; } .metaLink { color: var(--text-link); text-decoration: none; transition: color 0.2s; font-weight: 500; } .metaLink:hover { color: var(--text-link-hover); text-decoration: underline; } .contactActions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } .actionLink { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; color: #475569; text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.2s; } .actionLink:hover { background: white; border-color: #cbd5e1; color: #1e293b; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .actionLink svg { color: #64748b; flex-shrink: 0; } .contactHeaderRight { display: flex; gap: 16px; flex-shrink: 0; align-items: flex-start; } .quickLinks { display: flex; flex-direction: column; gap: 12px; padding-right: 24px; margin-right: 24px; border-right: 1px solid #e2e8f0; } /* ==================== INFO GRID ==================== */ .contactInfoGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding: 32px 40px; border-top: 1px solid #e2e8f0; background: #f8fafc; } .infoItem { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: white; border-radius: 12px; border: 1px solid #e2e8f0; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .infoItem:hover { border-color: var(--primary-300); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .infoLabel { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 8px; } .infoLabel svg { color: var(--primary-500); flex-shrink: 0; } .infoValue { font-size: 18px; color: #0f172a; font-weight: 600; line-height: 1.4; word-break: break-word; } /* ==================== TABS CONTAINER ==================== */ .tabsContainer { margin-top: 8px; } /* ==================== OVERVIEW SECTION ==================== */ .overviewSection { padding: 40px; } .overviewGrid { display: flex; flex-direction: column; gap: 32px; } .overviewCard { padding: 32px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .overviewCard:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); border-color: #cbd5e1; } .overviewCard h3 { font-size: 20px; font-weight: 700; color: #0f172a; margin: 0 0 24px 0; padding-bottom: 16px; border-bottom: 2px solid #e2e8f0; display: flex; align-items: center; gap: 12px; } .overviewCard h3 svg { color: var(--primary-600); flex-shrink: 0; } .overviewDetails { display: grid; grid-template-columns: 1fr; gap: 16px; } .detailRow { display: flex; align-items: flex-start; gap: 16px; padding: 20px; background: #f8fafc; border-radius: 10px; border: 1px solid #f1f5f9; transition: all 0.2s; } .detailRow:hover { background: white; border-color: #e2e8f0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .detailRow svg { color: var(--primary-600); flex-shrink: 0; margin-top: 2px; width: 20px; height: 20px; } .detailRow > div { flex: 1; display: flex; flex-direction: column; gap: 8px; } .detailLabel { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.1em; } .detailValue { font-size: 16px; color: #0f172a; font-weight: 500; word-break: break-word; line-height: 1.5; } .detailValue a { color: var(--primary-600); text-decoration: none; transition: color 0.2s; font-weight: 600; } .detailValue a:hover { color: var(--primary-700); text-decoration: underline; } .notesText { font-size: 15px; color: #475569; line-height: 1.8; white-space: pre-wrap; margin: 0; padding: 24px; background: #f8fafc; border-radius: 10px; border: 1px solid #f1f5f9; border-left: 4px solid var(--primary-500); } /* ==================== OPPORTUNITIES SECTION ==================== */ .opportunitiesSection { padding: 40px; } .sectionTitle { font-size: 22px; font-weight: 700; color: #0f172a; margin: 0 0 24px 0; padding-bottom: 16px; border-bottom: 2px solid #e2e8f0; display: flex; align-items: center; gap: 12px; } .sectionTitle svg { color: var(--primary-600); flex-shrink: 0; } .opportunitiesList { display: flex; flex-direction: column; gap: 20px; } .opportunityCard { padding: 28px; background: white; border: 1px solid #e2e8f0; border-radius: 12px; cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .opportunityCard:hover { border-color: var(--primary-300); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } .oppHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 16px; } .oppHeader h4 { font-size: 18px; font-weight: 700; color: #0f172a; margin: 0; } .oppDetails { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; margin-top: 16px; border-top: 1px solid #f1f5f9; } .oppAmount { font-size: 24px; font-weight: 700; color: #10b981; font-variant-numeric: tabular-nums; } .oppMeta { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #64748b; font-weight: 500; } .oppMeta span { display: flex; align-items: center; gap: 6px; } .oppMeta svg { color: #94a3b8; } /* ==================== RESPONSIVE ==================== */ @media (max-width: 1024px) { .contactDetailPage { padding: 24px; gap: 24px; } .contactHeaderContent { flex-direction: column; gap: 32px; padding: 32px; } .contactHeaderRight { width: 100%; flex-direction: column; } .quickLinks { border-right: none; border-bottom: 1px solid #e2e8f0; padding-bottom: 16px; margin-bottom: 16px; padding-right: 0; margin-right: 0; } .contactInfoGrid { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 24px 32px; } .overviewSection, .opportunitiesSection { padding: 32px; } } @media (max-width: 768px) { .contactDetailPage { padding: 16px; gap: 20px; } .contactHeaderContent { padding: 24px; gap: 24px; } .contactHeaderLeft { flex-direction: column; align-items: center; text-align: center; gap: 20px; } .contactName { flex-direction: column; align-items: center; } .contactName h1 { font-size: 24px; } .contactMeta, .contactActions { flex-direction: column; align-items: center; width: 100%; gap: 12px; } .actionLink { width: 100%; justify-content: center; } .quickLinks { flex-direction: column; width: 100%; border-bottom: none; padding-bottom: 0; margin-bottom: 0; gap: 12px; } .quickLinks button, .contactActions button { width: 100%; } .contactInfoGrid { grid-template-columns: 1fr; gap: 12px; padding: 20px; } .infoItem { padding: 20px; } .overviewSection, .opportunitiesSection { padding: 24px; } .overviewCard { padding: 24px; } .overviewCard h3 { font-size: 18px; } .detailRow { padding: 16px; } .oppHeader { flex-direction: column; align-items: flex-start; gap: 12px; } .oppDetails { flex-direction: column; align-items: flex-start; gap: 16px; } .opportunityCard { padding: 20px; } } /* ==================== LOADING STATES ==================== */ .loading { display: flex; justify-content: center; align-items: center; min-height: 400px; } .skeleton { animation: pulse 1.5s ease-in-out infinite; background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; } @keyframes pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Contact Form Page Styles */ .contact-form-page { display: flex; flex-direction: column; gap: var(--space-6); max-width: 900px; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; } .header-left { display: flex; align-items: center; gap: var(--space-4); } .header-left h1 { margin: 0; font-size: var(--text-2xl); } .contact-form { display: flex; flex-direction: column; gap: var(--space-6); } .contact-form h2 { margin: 0 0 var(--space-6) 0; font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--slate-900); padding-bottom: var(--space-4); border-bottom: 1px solid var(--slate-200); } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } .form-field { display: flex; flex-direction: column; } .form-field-full { grid-column: 1 / -1; } .form-label { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--slate-700); } .form-select { height: 40px; padding: 0 var(--space-3); border: 1px solid var(--slate-300); border-radius: var(--radius-sm); background-color: white; font-size: var(--text-sm); color: var(--slate-900); transition: all var(--transition-fast); cursor: pointer; } .form-select:hover { border-color: var(--slate-400); } .form-select:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-100); } .form-select:disabled { background-color: var(--slate-50); color: var(--slate-500); cursor: not-allowed; } .form-checkbox { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; user-select: none; } .form-checkbox input[type="checkbox"] { width: 18px; height: 18px; border: 2px solid var(--slate-300); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .form-checkbox input[type="checkbox"]:checked { background-color: var(--primary-500); border-color: var(--primary-500); } .form-checkbox input[type="checkbox"]:focus { outline: none; box-shadow: 0 0 0 3px var(--primary-100); } .form-checkbox span { font-size: var(--text-sm); color: var(--slate-700); } .form-error { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--red-500); } .form-actions { display: flex; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--slate-200); } .loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12); color: var(--slate-500); } .loading-container .loading-spinner { width: 48px; height: 48px; border: 4px solid var(--slate-200); border-top-color: var(--teal-500); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; margin-bottom: var(--space-4); } @keyframes spin { to { transform: rotate(360deg); } } .loading-container p { margin: 0; font-size: var(--text-base); } /* Responsive */ @media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; } .form-field-full { grid-column: 1; } .form-actions { flex-direction: column-reverse; } .form-actions button { width: 100%; } } /* Opportunities Page Styles - Professional Design */ .opportunities-page { display: flex; flex-direction: column; gap: 0; min-height: 100vh; background: var(--bg-secondary); padding: var(--space-xlarge); max-width: var(--layout-page-max-width); margin: 0 auto; } /* ========== HEADER ========== */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-large); margin-bottom: var(--space-large); padding: 0 var(--space-medium); } .page-header > div { flex: 1; } .opportunities-page .page-header h1 { margin: 0; font-size: var(--page-header-title-size); font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: var(--line-height-tight); } .page-description { margin: var(--space-xsmall) 0 0 0; font-size: var(--page-header-description-size); color: var(--text-secondary); font-weight: var(--font-weight-regular); } /* Card Container */ .opportunities-page > .card { background: var(--bg-card); border-radius: var(--radius-large); box-shadow: var(--shadow-small); border: 1px solid var(--border-color); overflow: hidden; padding: 0 !important; } /* KPIs Section - Exactly like AccountDetailModal */ .opportunities-kpis-section { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-medium); padding: var(--space-xlarge); margin-bottom: var(--space-large); background: var(--bg-card); } .opp-kpi-card { display: flex; align-items: center; gap: var(--space-small); padding: var(--space-medium); background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); transition: all var(--transition-base); } .opp-kpi-card:hover { border-color: var(--primary-light); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transform: translateY(-1px); } .opp-kpi-icon { width: 36px; height: 36px; border-radius: var(--radius-small); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .opp-kpi-content { display: flex; flex-direction: column; gap: var(--space-xxsmall); min-width: 0; } .opp-kpi-label { font-size: var(--font-size-xsmall); color: var(--text-secondary); font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .opp-kpi-value { font-size: var(--font-size-large); color: var(--text-primary); font-weight: var(--font-weight-bold); line-height: 1; } @media (max-width: 1200px) { .opportunities-kpis-section { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .opportunities-kpis-section { grid-template-columns: 1fr; } } .opportunities-toolbar { display: flex; align-items: center; gap: var(--space-medium); padding: var(--space-xlarge) var(--space-xlarge) var(--space-large) var(--space-xlarge); background: var(--bg-card); } .opportunities-toolbar > div:first-child { width: 360px; flex-shrink: 0; margin: 0; } /* Active Filters */ .active-filters { display: flex; align-items: center; gap: var(--space-small); padding: var(--space-medium) var(--space-xlarge); background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); flex-wrap: wrap; } .filter-chip { display: flex; align-items: center; gap: var(--space-small); padding: var(--space-xsmall) var(--space-medium); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-medium); font-size: var(--font-size-small); color: var(--text-primary); transition: all var(--transition-fast); } .filter-chip:hover { border-color: var(--neutral-medium-light); box-shadow: var(--shadow-small); } .filter-chip span { font-weight: var(--font-weight-medium); } .filter-chip button { display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: none; color: var(--text-secondary); cursor: pointer; transition: color var(--transition-fast); } .filter-chip button:hover { color: var(--text-primary); } /* Account Manager Filter - Igualar tamaño con SearchInput */ .account-manager-filter { min-width: 220px; flex-shrink: 0; } .account-manager-filter .select-container { margin: 0; } .account-manager-filter .select-wrapper { height: 50px !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; background: #ffffff !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .account-manager-filter .select-wrapper:hover { border-color: #d1d5db !important; } .account-manager-filter .select-wrapper:focus-within { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important; outline: none !important; } .account-manager-filter .select-input { height: 48px !important; padding: 12px 40px 12px 16px !important; font-size: 14px !important; border: none !important; border-radius: 8px !important; background: transparent !important; line-height: 1.5 !important; } .account-manager-filter .select-input:focus { outline: none !important; box-shadow: none !important; } /* Account Filter - Igualar tamaño con SearchInput */ .account-filter { min-width: 220px; flex-shrink: 0; } .account-filter .select-container { margin: 0; } .account-filter .select-wrapper { height: 50px !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; background: #ffffff !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .account-filter .select-wrapper:hover { border-color: #d1d5db !important; } .account-filter .select-wrapper:focus-within { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important; outline: none !important; } .account-filter .select-input { height: 48px !important; padding: 12px 40px 12px 16px !important; font-size: 14px !important; border: none !important; border-radius: 8px !important; background: transparent !important; line-height: 1.5 !important; } .account-filter .select-input:focus { outline: none !important; box-shadow: none !important; } @media (max-width: 768px) { .account-manager-filter, .account-filter { min-width: 150px; } } /* Search Input Overrides */ .opportunities-toolbar .searchInput { border: 1px solid var(--search-input-border); background: var(--search-input-bg); padding: var(--search-input-padding-vertical) var(--search-input-padding-horizontal); border-radius: var(--search-input-radius); font-size: var(--search-input-font-size); } .opportunities-toolbar .searchInput:focus-within { border-color: var(--search-input-focus-border); box-shadow: 0 0 0 3px rgba(209, 213, 219, 0.1); } .opportunities-toolbar .searchInput__icon { margin-right: var(--space-small); } .opportunities-toolbar .searchInput__field { font-size: var(--search-input-font-size); } .view-toggle { display: flex; align-items: center; gap: var(--space-xsmall); background: transparent; padding: 0; border-radius: 0; border: none; height: 50px; margin-left: auto; } .opportunities-toolbar .toggle-btn { display: flex; align-items: center; justify-content: center; padding: 8px 14px !important; background: white !important; border: 1px solid #d0d7de !important; border-radius: 6px !important; color: #57606a !important; cursor: pointer; transition: all 0.15s ease; font-size: 13px; font-weight: 500; min-width: 44px; height: 38px; } .opportunities-toolbar .toggle-btn:hover:not(.active) { background: #f6f8fa !important; border-color: #8c959f !important; color: #24292e !important; } .opportunities-toolbar .toggle-btn.active { background: #1D6FA4 !important; border-color: #1D6FA4 !important; color: white !important; box-shadow: 0 0 0 3px rgba(29, 111, 164, 0.12) !important; } .opportunities-toolbar .toggle-btn.active:hover { background: #0E4A70 !important; border-color: #0E4A70 !important; } .loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px var(--space-xlarge); color: var(--text-secondary); } .loading-spinner { width: 48px; height: 48px; border: 3px solid var(--neutral-light); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: var(--space-large); } @keyframes spin { to { transform: rotate(360deg); } } /* Kanban Board - Professional Design */ .kanban-board { display: flex; gap: 14px; padding: var(--space-large) var(--space-xlarge); overflow-x: auto; min-height: 400px; background: var(--bg-secondary); flex: 1; } .kanban-column { flex: 0 0 255px; display: flex; flex-direction: column; background-color: var(--bg-card); border-radius: var(--radius-medium); border: 1px solid var(--border-color); max-height: 600px; overflow: hidden; box-shadow: var(--shadow-small); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Compact columns for Won/Lost */ .kanban-column.compact-column { flex: 0 0 70px; min-width: 70px; cursor: pointer; } .kanban-column.closed-column { opacity: 0.85; } .kanban-column.closed-column:hover { opacity: 1; border-color: var(--primary-light); transform: translateY(-2px); } .column-header { padding: 14px 16px; border-bottom: 1px solid var(--border-color); border-radius: var(--radius-medium) var(--radius-medium) 0 0; position: relative; transition: background 0.2s ease; } /* Stage-specific colors - modern gradient backgrounds */ .column-header.stage-slate { background: linear-gradient(135deg, rgba(87, 96, 106, 0.08) 0%, var(--bg-secondary) 100%); } .column-header.stage-amber { background: linear-gradient(135deg, rgba(251, 133, 0, 0.08) 0%, var(--bg-secondary) 100%); } .column-header.stage-primary { background: linear-gradient(135deg, rgba(9, 105, 218, 0.08) 0%, var(--bg-secondary) 100%); } .column-header.stage-teal { background: linear-gradient(135deg, rgba(31, 136, 61, 0.08) 0%, var(--bg-secondary) 100%); } .column-header.stage-green { background: linear-gradient(135deg, rgba(26, 127, 55, 0.08) 0%, var(--bg-secondary) 100%); } .column-header.stage-red { background: linear-gradient(135deg, rgba(209, 36, 47, 0.08) 0%, var(--bg-secondary) 100%); } .column-header h3 { margin: 0 0 var(--space-small) 0; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); letter-spacing: 0; color: var(--text-primary); display: flex; align-items: center; justify-content: space-between; } .column-stats { display: flex; align-items: center; gap: var(--space-small); font-size: var(--font-size-small); } .column-count { padding: 3px 10px; background: var(--bg-card); color: var(--text-primary); border-radius: 12px; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; font-size: var(--font-size-xsmall); border: 1px solid var(--border-color); } .column-amount { color: var(--text-secondary); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; font-size: var(--font-size-small); } /* Compact header styles for closed columns */ .column-header.compact-header { padding: 12px 8px; cursor: pointer; transition: all 0.2s ease; position: relative; } .column-header.compact-header:hover { background: var(--bg-tertiary); } .column-header.compact-header::after { content: '⋮'; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 16px; color: var(--text-tertiary); opacity: 0.5; } .column-header.compact-header:hover::after { opacity: 1; color: var(--text-secondary); } .compact-header-content { display: flex; flex-direction: column; align-items: center; gap: var(--space-small); width: 100%; } .compact-title { font-size: 20px; font-weight: var(--font-weight-bold); color: var(--text-primary); writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 0.05em; } .compact-stats { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; } .compact-count { padding: 4px 8px; background: var(--bg-card); color: var(--text-primary); border-radius: 8px; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; font-size: 11px; border: 1px solid var(--border-color); min-width: 28px; text-align: center; } .compact-amount { color: var(--text-secondary); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; font-size: 10px; writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 0.02em; } .column-cards { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--bg-card); } /* Hide cards in compact columns */ .compact-column .column-cards { display: none; } .empty-column { padding: 48px 16px; text-align: center; color: var(--text-tertiary); font-size: var(--font-size-small); font-weight: var(--font-weight-regular); } /* Kanban Cards - Improved UX Design */ .kanban-card { position: relative; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-medium); padding: 12px; cursor: pointer; transition: all var(--transition-base); box-shadow: var(--shadow-small); overflow: visible; } .kanban-card:hover { border-color: var(--primary); box-shadow: var(--shadow-medium), 0 0 0 1px var(--primary); transform: translateY(-2px); } /* Subtle background gradient based on probability */ .kanban-card.probability-bg-high { background: linear-gradient(to bottom, var(--bg-card) 0%, rgba(34, 197, 94, 0.03) 100%); } .kanban-card.probability-bg-medium { background: linear-gradient(to bottom, var(--bg-card) 0%, rgba(251, 191, 36, 0.03) 100%); } .kanban-card.probability-bg-low { background: linear-gradient(to bottom, var(--bg-card) 0%, rgba(239, 68, 68, 0.03) 100%); } /* Date badge - in top right corner */ .card-date-badge-corner { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 6px; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; flex-shrink: 0; border: 1px solid; background: var(--bg-secondary); font-size: 10px; transition: all 0.2s ease; } .card-date-badge-corner svg { flex-shrink: 0; } /* Date urgency colors for corner badge */ .card-date-badge-corner.date-overdue { background: rgba(239, 68, 68, 0.12); color: #dc2626; border-color: rgba(239, 68, 68, 0.4); } .card-date-badge-corner.date-urgent { background: rgba(251, 191, 36, 0.12); color: #d97706; border-color: rgba(251, 191, 36, 0.4); } .card-date-badge-corner.date-upcoming { background: rgba(59, 130, 246, 0.12); color: #2563eb; border-color: rgba(59, 130, 246, 0.4); } .card-date-badge-corner.date-future { color: var(--text-secondary); border-color: var(--border-color); opacity: 0.7; } .kanban-card:hover .card-date-badge-corner { opacity: 1; transform: scale(1.05); } .card-title { font-weight: var(--font-weight-semibold); color: var(--text-primary); font-size: 14px; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: var(--space-small); padding-right: 65px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-account { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; font-weight: var(--font-weight-regular); display: flex; align-items: center; gap: 6px; } .card-account svg { color: var(--neutral-medium); flex-shrink: 0; } .card-account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Value section - prominent display */ .card-value-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: var(--space-small); } .card-amount { font-size: 18px; font-weight: var(--font-weight-bold); color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .card-probability-badge { font-size: 11px; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; padding: 4px 8px; border-radius: 8px; border: 1px solid; display: flex; align-items: center; gap: 4px; } .card-probability-badge.probability-high { background: rgba(34, 197, 94, 0.1); color: #16a34a; border-color: rgba(34, 197, 94, 0.3); } .card-probability-badge.probability-medium { background: rgba(251, 191, 36, 0.1); color: #d97706; border-color: rgba(251, 191, 36, 0.3); } .card-probability-badge.probability-low { background: rgba(239, 68, 68, 0.1); color: #dc2626; border-color: rgba(239, 68, 68, 0.3); } /* Subtle divider */ .card-divider { height: 1px; background: var(--border-color); margin: 10px 0; opacity: 0.5; } .card-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-small); font-size: 11px; } .card-owner { color: var(--text-secondary); font-weight: var(--font-weight-medium); display: flex; align-items: center; gap: 5px; flex: 1; overflow: hidden; min-width: 0; } .card-owner svg { flex-shrink: 0; opacity: 0.7; } .card-owner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Dragging state */ .kanban-card.dragging { opacity: 0.5; cursor: grabbing; } /* Nombre de oportunidad en tabla */ .opp-title { font-weight: var(--font-weight-semibold); color: var(--text-primary); font-size: var(--font-size-base); line-height: var(--line-height-tight); } .opp-account-sub { font-size: var(--font-size-small); color: var(--text-tertiary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } /* ========== TABLE STYLES (Same as AccountsPage) ========== */ .opportunities-page .table-container { border: none; border-radius: 0; overflow-x: auto; margin: 0; } .opportunities-page table { width: 100%; border-collapse: collapse; margin: 0; } /* Table Header */ .opportunities-page thead { background: var(--table-header-bg); border-bottom: 1px solid var(--border-color); border-top: 1px solid var(--border-color); } .opportunities-page thead th { padding: var(--table-header-padding-vertical) var(--table-cell-padding-horizontal); text-align: left; font-size: var(--table-header-font-size); font-weight: var(--font-weight-semibold); color: var(--table-header-text); text-transform: uppercase; letter-spacing: 0.05em; } .opportunities-page thead th:first-child { padding-left: var(--table-cell-padding-horizontal); } .opportunities-page thead th:last-child { padding-right: var(--table-cell-padding-horizontal); } /* Table Body */ .opportunities-page tbody tr { border-bottom: 1px solid var(--border-color); transition: background-color var(--transition-fast); cursor: pointer; } .opportunities-page tbody tr:hover { background-color: var(--table-row-hover-bg); } .opportunities-page tbody tr:last-child { border-bottom: 1px solid var(--border-color); } .opportunities-page tbody td { padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal); font-size: var(--font-size-base); color: var(--text-secondary); vertical-align: middle; } .opportunities-page tbody td:first-child { padding-left: var(--table-cell-padding-horizontal); } .opportunities-page tbody td:last-child { padding-right: var(--table-cell-padding-horizontal); } /* Center align probability column */ .opportunities-page thead th:nth-child(4), .opportunities-page tbody td:nth-child(4) { text-align: center; } .probability-cell { display: flex; align-items: center; gap: 4px; flex: 1; } .probability-bar { flex: 1; min-width: 40px; height: 8px; background-color: var(--slate-200); border-radius: var(--radius-full); overflow: hidden; } .probability-fill { height: 100%; background: linear-gradient(90deg, var(--green-400), var(--green-600)); border-radius: var(--radius-full); transition: width var(--transition-base); } .probability-cell > span { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--slate-700); font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; } /* Date color coding */ .opp-date { font-variant-numeric: tabular-nums; font-weight: var(--font-medium); display: inline-block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-sm); } .date-normal { color: var(--slate-700); background-color: transparent; } .date-warning { color: var(--amber-800); background-color: var(--amber-100); } .date-overdue { color: var(--red-800); background-color: var(--red-100); font-weight: var(--font-semibold); } /* ========== RESPONSIVE ========== */ @media (max-width: 1024px) { .opportunities-page { padding: var(--space-large); } .opportunities-toolbar { flex-wrap: wrap; gap: var(--space-small); padding: var(--space-medium) var(--space-large); } .opportunities-kpis-section { padding: var(--space-large); } } @media (max-width: 768px) { .opportunities-page { padding: var(--space-medium) var(--space-small); } .page-header { flex-direction: column; align-items: stretch; gap: var(--space-small); padding: 0; margin-bottom: var(--space-medium); } .page-header button { width: 100%; justify-content: center; } .opportunities-toolbar { flex-direction: column; align-items: stretch; gap: var(--space-small); padding: var(--space-medium); } .opportunities-toolbar > div:first-child { flex: unset; width: 100%; max-width: none; } .account-manager-filter, .account-filter { min-width: unset; width: 100%; } .view-toggle { width: 100%; } .opportunities-toolbar .toggle-btn { flex: 1; justify-content: center; } .kanban-board { flex-direction: column; padding: var(--space-medium); } .kanban-column { flex: 1 1 auto; max-height: 500px; } .pagination { flex-direction: column; align-items: center; gap: var(--space-small); padding: var(--space-medium); } .opportunities-page thead th, .opportunities-page tbody td { padding: var(--space-small) var(--space-medium); } } @media (max-width: 480px) { .opportunities-page { padding: var(--space-small); } } /* ========== DRAG AND DROP STYLES ========== */ /* Tarjeta siendo arrastrada */ .kanban-card.dragging { opacity: 0.5; cursor: grabbing; } /* Overlay de drag (la tarjeta que sigue al cursor) */ .dragging-overlay { cursor: grabbing; transform: rotate(3deg); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1); } /* Columna cuando se está arrastrando sobre ella */ .column-cards.drag-over { background: var(--primary-light); border: 2px dashed var(--primary); border-radius: var(--radius-medium); } /* Tarjeta lista para arrastrar */ .kanban-card { cursor: grab; } .kanban-card:active { cursor: grabbing; } /* Animación suave cuando las tarjetas se reorganizan */ .kanban-card { transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease; } /* Estilo adicional para indicar que la tarjeta es arrastrable */ .kanban-card::after { content: ''; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h10M3 10h10'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; opacity: 0; transition: opacity 0.2s ease; } .kanban-card:hover::after { opacity: 0.5; } /* Custom Scrollbar */ .column-cards::-webkit-scrollbar { width: 8px; } .column-cards::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 0 0 var(--radius-medium) 0; } .column-cards::-webkit-scrollbar-thumb { background: var(--neutral-medium); border-radius: var(--radius-small); transition: background var(--transition-fast); } .column-cards::-webkit-scrollbar-thumb:hover { background: var(--neutral-medium-light); } /* Custom Scrollbar for Kanban board */ .kanban-board::-webkit-scrollbar { height: 10px; } .kanban-board::-webkit-scrollbar-track { background: var(--neutral-light); border-radius: var(--radius-small); margin: 0 var(--space-xlarge); } .kanban-board::-webkit-scrollbar-thumb { background: var(--neutral-medium); border-radius: var(--radius-small); transition: background var(--transition-fast); } .kanban-board::-webkit-scrollbar-thumb:hover { background: var(--neutral-medium-light); } /* ========== ACTION BUTTONS ========== */ .action-buttons { display: flex; align-items: center; gap: var(--space-xsmall); justify-content: flex-end; } .action-btn { display: flex; align-items: center; justify-content: center; width: var(--action-button-size); height: var(--action-button-size); padding: 0; background: transparent; border: 1px solid var(--action-button-border); border-radius: var(--radius-small); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); } .action-btn:hover { background: var(--action-button-hover-bg); border-color: var(--neutral-medium-light); color: var(--text-primary); } .action-btn-view:hover { background: var(--action-button-view-hover-bg); border-color: var(--action-button-view-hover-border); color: var(--action-button-view-hover-border); } .action-btn-edit:hover { background: var(--action-button-edit-hover-bg); border-color: var(--action-button-edit-hover-border); color: var(--action-button-edit-hover-border); } .opportunities-page .action-btn-delete { color: var(--danger) !important; border-color: var(--danger-light) !important; } .opportunities-page .action-btn-delete:hover { background: var(--danger) !important; border-color: var(--danger) !important; color: var(--neutral-white) !important; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(244, 63, 94, 0.3); } /* ========== PAGINATION ========== */ .pagination { display: flex; justify-content: space-between; align-items: center; padding: var(--pagination-padding-vertical) var(--pagination-padding-horizontal); border-top: none; background: var(--bg-card); margin: 0; } .pagination-stats { display: flex; align-items: center; gap: var(--space-medium); font-size: var(--pagination-font-size); color: var(--text-secondary); } .pagination-stats strong { font-weight: var(--font-weight-semibold); color: var(--text-primary); } .pagination-controls { display: flex; align-items: center; gap: var(--space-small); } .pagination-info { font-size: var(--pagination-font-size); color: var(--text-secondary); font-weight: var(--font-weight-medium); } .pagination button { min-width: var(--pagination-button-min-width); font-size: var(--pagination-font-size); } /* Opportunity Detail Page - Professional GitHub Style */ .opp-detail-page { display: flex; flex-direction: column; gap: 0; background: #fafbfc; min-height: 100vh; } /* Breadcrumb */ .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #57606a; padding: 16px 24px 0; background: #fafbfc; } .breadcrumbLink { color: #0969da; text-decoration: none; transition: color 0.2s; } .breadcrumbLink:hover { color: #0550ae; text-decoration: underline; } .breadcrumbSeparator { color: #8c959f; } /* Loading & Error States */ .opp-detail-loading, .opp-detail-error { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; gap: 16px; color: #57606a; } .loading-spinner-detail { width: 40px; height: 40px; border: 4px solid #f6f8fa; border-top-color: #0969da; border-radius: 50%; animation: spin-detail 0.6s linear infinite; } @keyframes spin-detail { to { transform: rotate(360deg); } } .opp-detail-error h2 { color: #24292e; font-size: 20px; font-weight: 600; margin: 0; } .opp-detail-error p { color: #57606a; font-size: 14px; margin: 0 0 16px 0; } /* Header */ .opp-detail-header { background: white; border-bottom: 1px solid #d0d7de; padding: 16px 24px; } .opp-detail-header-content { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 16px; } .opp-detail-title-section { display: flex; align-items: flex-start; gap: 16px; flex: 1; } .opp-detail-icon { width: 48px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; } .opp-detail-title { margin: 0 0 6px 0; font-size: 24px; font-weight: 700; color: #24292e; letter-spacing: -0.02em; line-height: 1.3; } .opp-detail-meta { display: flex; align-items: center; gap: 6px; color: #57606a; font-size: 14px; font-weight: 500; } .opp-detail-actions { display: flex; gap: 8px; flex-shrink: 0; } .opp-detail-stage { display: flex; gap: 8px; } .opp-stage-badge { display: inline-flex; align-items: center; padding: 4px 12px; font-size: 12px; font-weight: 600; border-radius: 12px; white-space: nowrap; } /* Stats Grid */ .opp-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 24px; background: #fafbfc; } .opp-stat-card { background: white; border: 1px solid #d0d7de; border-radius: 8px; padding: 16px; display: flex; align-items: center; gap: 12px; transition: all 0.12s ease; } .opp-stat-card:hover { border-color: #8c959f; box-shadow: 0 3px 8px rgba(27, 31, 35, 0.08); } .opp-stat-icon { width: 40px; height: 40px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .opp-stat-content { flex: 1; } .opp-stat-label { font-size: 12px; color: #57606a; font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; } .opp-stat-value { font-size: 24px; color: #24292e; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .opp-stat-value-date, .opp-stat-value-text { font-size: 15px; color: #24292e; font-weight: 600; line-height: 1.3; } /* Sections */ .opp-detail-section { background: white; border: 1px solid #d0d7de; border-radius: 8px; margin: 0 24px 16px 24px; overflow: hidden; } .opp-section-title { font-size: 16px; font-weight: 600; color: #24292e; margin: 0; padding: 16px 20px; border-bottom: 1px solid #d0d7de; background: #f6f8fa; } .opp-section-content { padding: 20px; } .opp-description { margin: 0; font-size: 14px; color: #24292e; line-height: 1.6; } /* Details Grid */ .opp-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 20px; } .opp-detail-item { display: flex; flex-direction: column; gap: 6px; } .opp-detail-item-label { font-size: 12px; color: #57606a; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .opp-detail-item-value { font-size: 14px; color: #24292e; font-weight: 600; } /* VoBos List */ .opp-vobos-list { padding: 20px; display: flex; flex-direction: column; gap: 12px; } .opp-vobo-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 6px; transition: all 0.12s ease; } .opp-vobo-item:hover { background: #e1e4e8; border-color: #8c959f; } .opp-vobo-info { display: flex; flex-direction: column; gap: 4px; } .opp-vobo-name { font-size: 14px; color: #24292e; font-weight: 600; } .opp-vobo-role { font-size: 12px; color: #57606a; font-weight: 500; } /* Responsive */ @media (max-width: 768px) { .opp-detail-header-content { flex-direction: column; } .opp-detail-stats { grid-template-columns: 1fr; } .opp-detail-grid { grid-template-columns: 1fr; } } align-items: center; } .quickLinks { display: flex; gap: var(--space-2); padding-right: var(--space-3); margin-right: var(--space-3); border-right: 1px solid var(--slate-200); } .opportunityActions { display: flex; gap: var(--space-2); } @media (max-width: 768px) { .opportunityHeaderRight { flex-direction: column; width: 100%; } .quickLinks, .opportunityActions { width: 100%; border: none; padding: 0; margin: 0; } .quickLinks button, .opportunityActions button { flex: 1; } } .opportunityInfoGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); padding: var(--space-6); border-top: 1px solid var(--border-color); background: var(--slate-50); } .infoItem { display: flex; flex-direction: column; gap: var(--space-1); } .infoLabel { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.05em; } .infoValue { font-size: var(--text-sm); color: var(--slate-900); font-weight: var(--font-medium); } .infoValue.amount { font-size: var(--text-xl); color: var(--success-600); font-weight: var(--font-bold); font-variant-numeric: tabular-nums; } .tabContent { margin-top: var(--space-4); } /* Overview Grid */ .overviewGrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); } .vobosSummaryCard { padding: var(--space-6); } .vobosSummaryHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); } .vobosSummaryHeader h3 { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0; } .vobosSummaryStats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-4); } .vobosStat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); background: var(--slate-50); border-radius: var(--radius-md); } .vobosStatLabel { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--slate-600); text-transform: uppercase; } .vobosStatValue { font-size: var(--text-2xl); font-weight: var(--font-bold); font-variant-numeric: tabular-nums; } .vobosStatValue.approved { color: var(--success-600); } .vobosStatValue.pending { color: var(--warning-600); } .vobosQuickList { display: flex; flex-direction: column; gap: var(--space-2); } .voboQuickItem { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3); background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius-md); } .voboQuickLeft { display: flex; align-items: center; gap: var(--space-3); } .voboQuickIcon { width: 36px; height: 36px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; } .voboQuickIcon.approved { background: var(--success-50); color: var(--success-600); } .voboQuickIcon.rejected { background: var(--danger-50); color: var(--danger-600); } .voboQuickIcon.pending { background: var(--warning-50); color: var(--warning-600); } .voboQuickName { font-weight: var(--font-semibold); color: var(--slate-900); font-size: var(--text-sm); } .voboQuickRole { font-size: var(--text-xs); color: var(--slate-600); } .cardTitle { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0 0 var(--space-4) 0; } .financialDetails { display: flex; flex-direction: column; gap: var(--space-4); } .financialItem { display: flex; gap: var(--space-3); padding: var(--space-4); background: var(--slate-50); border-radius: var(--radius-md); } .financialIcon { color: var(--primary-500); flex-shrink: 0; } .financialLabel { font-size: var(--text-sm); color: var(--slate-600); margin-bottom: var(--space-1); } .financialValue { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--slate-900); font-variant-numeric: tabular-nums; } /* VoBos Section */ .vobosSection { padding: var(--space-6); } .sectionHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); } .sectionTitle { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0; } .vobosList { display: flex; flex-direction: column; gap: var(--space-3); } .voboCard { padding: var(--space-4); background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius-md); } .voboCardHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); } .voboCardLeft { display: flex; align-items: center; gap: var(--space-3); } .voboIcon { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; } .voboIcon.approved { background: var(--success-50); color: var(--success-600); } .voboIcon.rejected { background: var(--danger-50); color: var(--danger-600); } .voboIcon.pending { background: var(--warning-50); color: var(--warning-600); } .voboName { font-weight: var(--font-semibold); color: var(--slate-900); } .voboRole { font-size: var(--text-sm); color: var(--slate-600); } .voboDate { font-size: var(--text-sm); color: var(--slate-600); margin-bottom: var(--space-2); } .voboComments { font-size: var(--text-sm); color: var(--slate-700); background: var(--white); padding: var(--space-3); border-radius: var(--radius-sm); border-left: 3px solid var(--primary-500); } /* Negotiations Section */ .negotiationsSection { padding: var(--space-6); } .negotiationsList { display: flex; flex-direction: column; gap: var(--space-3); } .negotiationCard { padding: var(--space-4); background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius-md); } .negotiationHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); } .negotiationHeader h4 { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--slate-900); margin: 0; } .negotiationDate { font-size: var(--text-sm); color: var(--slate-600); margin-bottom: var(--space-3); } .negotiationParticipants { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); } .participant { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--slate-700); } .participant svg { color: var(--slate-400); } .negotiationNotes { font-size: var(--text-sm); color: var(--slate-700); line-height: 1.5; } .emptyState { padding: var(--space-12); text-align: center; color: var(--slate-500); } .emptyState p { margin: 0; font-size: var(--text-sm); } .loading { display: flex; justify-content: center; align-items: center; min-height: 400px; } .loadingSpinner { width: 48px; height: 48px; border: 4px solid var(--slate-200); border-top-color: var(--primary-500); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 1024px) { .opportunityInfoGrid { grid-template-columns: repeat(3, 1fr); } .overviewGrid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .opportunityDetailPage { padding: var(--space-4); } .opportunityHeaderContent { flex-direction: column; } .opportunityHeaderRight { width: 100%; } .opportunityHeaderRight button { flex: 1; } .opportunityInfoGrid { grid-template-columns: 1fr; } .vobosSummaryStats { grid-template-columns: 1fr; } .sectionHeader { flex-direction: column; align-items: stretch; gap: var(--space-3); } .voboCardHeader { flex-direction: column; align-items: flex-start; gap: var(--space-2); } .negotiationHeader { flex-direction: column; align-items: flex-start; gap: var(--space-2); } } /* Negotiations Page Styles */ .negotiations-page { display: flex; flex-direction: column; gap: 0; min-height: 100vh; background: var(--bg-secondary); padding: var(--space-xlarge); max-width: var(--layout-page-max-width); margin: 0 auto; } /* ========== HEADER ========== */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-large); margin-bottom: var(--space-large); padding: 0 var(--space-medium); } .page-header > div { flex: 1; } .negotiations-page .page-header h1 { margin: 0; font-size: var(--page-header-title-size); font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: var(--line-height-tight); } .page-description { margin: var(--space-xsmall) 0 0 0; font-size: var(--page-header-description-size); color: var(--text-secondary); font-weight: var(--font-weight-regular); } /* Card Container */ .negotiations-page > .card { background: var(--bg-card); border-radius: var(--radius-large); box-shadow: var(--shadow-small); border: 1px solid var(--border-color); overflow: hidden; padding: 0 !important; } /* KPIs Section — mismos estilos que OpportunitiesPage */ .negotiations-kpis-section { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-medium); padding: var(--space-xlarge); margin-bottom: var(--space-large); background: var(--bg-card); } @media (max-width: 768px) { .negotiations-kpis-section { grid-template-columns: 1fr; padding: var(--space-medium); } } /* Toolbar */ .negotiations-toolbar { display: flex; align-items: center; gap: var(--space-medium); padding: var(--space-large) var(--space-xlarge); border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .negotiations-toolbar .searchInput { flex: 1; max-width: 600px; border: 1px solid var(--search-input-border); background: var(--search-input-bg); padding: var(--search-input-padding-vertical) var(--search-input-padding-horizontal); border-radius: var(--search-input-radius); font-size: var(--search-input-font-size); } .negotiations-toolbar .searchInput:focus-within { border-color: var(--search-input-focus-border); box-shadow: 0 0 0 3px rgba(209, 213, 219, 0.1); } .negotiations-toolbar .searchInput__icon { margin-right: var(--space-small); } .negotiations-toolbar .searchInput__field { font-size: var(--search-input-font-size); } /* Opportunity Filter - mismo alto que SearchInput */ .opportunity-filter { min-width: 220px; flex-shrink: 0; } .opportunity-filter .select-container { margin: 0; } .opportunity-filter .select-wrapper { height: 50px !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; background: #ffffff !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .opportunity-filter .select-wrapper:hover { border-color: #d1d5db !important; } .opportunity-filter .select-wrapper:focus-within { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important; outline: none !important; } .opportunity-filter .select-input { height: 48px !important; padding: 12px 40px 12px 16px !important; font-size: 14px !important; border: none !important; border-radius: 8px !important; background: transparent !important; line-height: 1.5 !important; } .opportunity-filter .select-input:focus { outline: none !important; box-shadow: none !important; } @media (max-width: 768px) { .opportunity-filter { min-width: 150px; } } /* Filter Chips */ .activeFiltersChips { display: flex; align-items: center; gap: var(--space-small); padding: var(--space-small) var(--space-large); border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); flex-wrap: wrap; margin: 0; } .filterChip { display: flex; align-items: center; gap: var(--space-xsmall); padding: var(--chip-padding-vertical) var(--chip-padding-horizontal); background: var(--chip-bg); border: 1px solid var(--chip-border); border-radius: var(--radius-small); font-size: var(--chip-font-size); color: var(--chip-text); } .chipRemove { display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: none; color: var(--text-tertiary); cursor: pointer; transition: color var(--transition-fast); } .chipRemove:hover { color: var(--chip-hover-text); } .clearAllFilters { padding: var(--chip-padding-vertical) var(--chip-padding-horizontal); background: none; border: none; color: var(--primary); font-size: var(--chip-font-size); font-weight: var(--font-weight-medium); cursor: pointer; transition: color var(--transition-fast); } .clearAllFilters:hover { color: var(--primary-hover); } /* ========== TABLE ========== */ .negotiations-page .table-container { border: none; border-radius: 0; overflow-x: auto; margin: 0; } .negotiations-page table { width: 100%; border-collapse: collapse; margin: 0; } /* Table Header */ .negotiations-page thead { background: var(--table-header-bg); border-bottom: 1px solid var(--border-color); border-top: 1px solid var(--border-color); } .negotiations-page thead th { padding: var(--table-header-padding-vertical) var(--table-cell-padding-horizontal); text-align: left; font-size: var(--table-header-font-size); font-weight: var(--font-weight-semibold); color: var(--table-header-text); text-transform: uppercase; letter-spacing: 0.05em; } .negotiations-page thead th:first-child { padding-left: var(--table-cell-padding-horizontal); } .negotiations-page thead th:last-child { padding-right: var(--table-cell-padding-horizontal); } /* Table Body */ .negotiations-page tbody tr { border-bottom: 1px solid var(--border-color); transition: background-color var(--transition-fast); cursor: pointer; } .negotiations-page tbody tr:hover { background-color: var(--table-row-hover-bg); } .negotiations-page tbody tr:last-child { border-bottom: 1px solid var(--border-color); } .negotiations-page tbody td { padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal); font-size: var(--table-cell-font-size); color: var(--table-cell-text); vertical-align: middle; } .negotiations-page tbody td:first-child { padding-left: var(--table-cell-padding-horizontal); } .negotiations-page tbody td:last-child { padding-right: var(--table-cell-padding-horizontal); } /* Table Customizations */ .neg-title { font-weight: var(--font-weight-semibold); color: var(--text-primary); font-size: 14px; margin-bottom: 2px; } .neg-description { font-size: 12px; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .neg-opportunity { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; font-family: var(--font-mono); } .neg-date { font-size: 13px; color: var(--text-secondary); } /* Action Buttons */ .action-buttons { display: flex; gap: var(--space-xsmall); align-items: center; justify-content: flex-end; } .action-btn { display: flex; align-items: center; justify-content: center; width: var(--action-button-size); height: var(--action-button-size); padding: 0; background: transparent; border: 1px solid var(--action-button-border); border-radius: var(--radius-small); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); } .action-btn:hover { background: var(--action-button-hover-bg); border-color: var(--neutral-medium-light); color: var(--text-primary); } .action-btn-view:hover { background: var(--action-button-view-hover-bg); border-color: var(--action-button-view-hover-border); color: var(--action-button-view-hover-border); } .action-btn-edit:hover { background: var(--action-button-edit-hover-bg); border-color: var(--action-button-edit-hover-border); color: var(--action-button-edit-hover-border); } .negotiations-page .action-btn-delete { color: var(--danger) !important; border-color: var(--danger-light) !important; } .negotiations-page .action-btn-delete:hover { background: var(--danger) !important; border-color: var(--danger) !important; color: var(--neutral-white) !important; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(244, 63, 94, 0.3); } .action-btn svg { flex-shrink: 0; } /* Pagination/Stats Footer */ .pagination { display: flex; align-items: center; justify-content: space-between; padding: var(--space-medium) var(--space-large); border-top: 1px solid var(--border-color); background: var(--bg-card); } .pagination-stats { font-size: 13px; color: var(--text-secondary); } .pagination-stats strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); } .pagination-controls { display: flex; align-items: center; gap: var(--space-medium); } .pagination-info { font-size: 13px; color: var(--text-secondary); font-weight: var(--font-weight-medium); min-width: 120px; text-align: center; } /* Responsive */ @media (max-width: 768px) { .negotiations-page { padding: var(--space-medium); } .negotiations-toolbar { flex-direction: column; align-items: stretch; } .negotiations-toolbar .search-input-wrapper { max-width: none; } .pagination { flex-direction: column; gap: var(--space-medium); align-items: stretch; } .pagination-stats { text-align: center; } .pagination-controls { justify-content: center; } } .negotiationDetailPage { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6); } .breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); } .breadcrumbLink { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); } .breadcrumbLink:hover { color: var(--text-link-hover); text-decoration: underline; } .breadcrumbSeparator { color: var(--text-tertiary); } .negotiationHeader { padding: 0 !important; } .negotiationHeaderContent { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--space-6); gap: var(--space-6); } .negotiationHeaderLeft { display: flex; gap: var(--space-4); flex: 1; } .negotiationHeaderInfo { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); } .negotiationName { display: flex; align-items: center; gap: var(--space-3); } .negotiationName h1 { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary); margin: 0; } .negotiationOpportunity { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-link); text-decoration: none; font-weight: var(--font-medium); transition: color var(--transition-fast); } .negotiationOpportunity:hover { color: var(--text-link-hover); text-decoration: underline; } .negotiationMeta { display: flex; flex-wrap: wrap; gap: var(--space-4); } .metaItem { display: flex; align-items: center; gap: var(--space-2); color: var(--slate-600); font-size: var(--text-sm); } .metaItem svg { color: var(--slate-400); } .negotiationHeaderRight { display: flex; gap: var(--space-2); flex-shrink: 0; } .negotiationInfoGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); padding: var(--space-6); border-top: 1px solid var(--border-color); background: var(--slate-50); } .infoItem { display: flex; flex-direction: column; gap: var(--space-1); } .infoLabel { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.05em; } .infoValue { font-size: var(--text-sm); color: var(--slate-900); font-weight: var(--font-medium); } .infoValue.amount { font-size: var(--text-lg); color: var(--success-600); font-weight: var(--font-bold); font-variant-numeric: tabular-nums; } .tabContent { margin-top: var(--space-4); } .overviewGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } .overviewGrid > .outcomesCard { grid-column: 1 / -1; } .cardTitle { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0 0 var(--space-4) 0; } .cardTitle svg { color: var(--primary-500); } .textContent { font-size: var(--text-sm); color: var(--slate-700); line-height: 1.6; margin: 0; } .textContent.whitespace { white-space: pre-line; } .textContent.success { color: var(--success-700); background: var(--success-50); padding: var(--space-4); border-radius: var(--radius-md); border-left: 3px solid var(--success-500); } .participantsList { display: flex; flex-direction: column; gap: var(--space-3); } .participantItem { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--slate-50); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--slate-700); font-weight: var(--font-medium); } .participantAvatar { width: 36px; height: 36px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--primary-500), var(--primary-700)); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: var(--font-bold); font-size: var(--text-xs); flex-shrink: 0; } .meetingsSection { padding: var(--space-6); } .sectionHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); } .sectionTitle { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0; } .meetingsList { display: flex; flex-direction: column; gap: var(--space-3); } .meetingCard { padding: var(--space-4); background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } .meetingCard:hover { background: var(--white); border-color: var(--primary-300); box-shadow: var(--shadow-md); transform: translateY(-2px); } .meetingHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); } .meetingHeader h4 { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--slate-900); margin: 0; } .meetingDate { font-size: var(--text-sm); color: var(--slate-600); font-weight: var(--font-medium); } .meetingParticipants { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); } .participant { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--slate-700); } .participant svg { color: var(--slate-400); } .meetingSummary { font-size: var(--text-sm); color: var(--slate-600); line-height: 1.5; margin: 0; } .emptyState { padding: var(--space-12); text-align: center; color: var(--slate-500); } .emptyState p { margin: 0; font-size: var(--text-sm); } .loading { display: flex; justify-content: center; align-items: center; min-height: 400px; } .loadingSpinner { width: 48px; height: 48px; border: 4px solid var(--slate-200); border-top-color: var(--primary-500); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 1024px) { .negotiationInfoGrid { grid-template-columns: repeat(3, 1fr); } .overviewGrid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .negotiationDetailPage { padding: var(--space-4); } .negotiationHeaderContent { flex-direction: column; } .negotiationHeaderRight { width: 100%; } .negotiationHeaderRight button { flex: 1; } .negotiationInfoGrid { grid-template-columns: 1fr; } .sectionHeader { flex-direction: column; align-items: stretch; gap: var(--space-3); } .meetingHeader { flex-direction: column; align-items: flex-start; gap: var(--space-2); } } /* Negotiation Form Page Styles */ .negotiation-form-page { display: flex; flex-direction: column; gap: var(--space-6); } .page-header { display: flex; justify-content: space-between; align-items: center; } .form-container { background: white; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); overflow: hidden; } .form-header { padding: var(--space-6); background: var(--slate-50); border-bottom: 1px solid var(--slate-200); } .form-header h1 { margin: 0 0 var(--space-2) 0; font-size: var(--text-2xl); color: var(--slate-900); font-weight: var(--font-bold); } .form-header p { margin: 0; color: var(--slate-600); font-size: var(--text-sm); } form { display: flex; flex-direction: column; } .form-section { display: flex; flex-direction: column; gap: var(--space-xlarge); padding: var(--space-medium); background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); transition: all var(--transition-base); font-size: var(--font-size-large); font-weight: var(--font-weight-semibold); color: var(--text-primary); border-bottom: 2px solid var(--border-color); } .form-section:last-of-type { border-bottom: none; } .form-section h2 { margin: 0 0 var(--space-4) 0; font-size: var(--text-lg); color: var(--slate-900); font-weight: var(--font-semibold); } .form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-4); } .form-row:last-child { margin-bottom: 0; } .form-row:has(.form-field:nth-child(2)) { grid-template-columns: 1fr 1fr; } .form-row:has(.form-field:nth-child(3)) { grid-template-columns: 1fr 1fr 1fr; } .form-field { display: flex; flex-direction: column; gap: var(--space-2); } .form-field label { font-size: var(--text-sm); color: var(--slate-700); font-weight: var(--font-medium); display: flex; align-items: center; gap: var(--space-2); } .required { color: var(--red-500); } .field-hint { font-size: var(--text-xs); color: var(--slate-500); font-weight: var(--font-normal); } .form-field select { width: 100%; padding: var(--space-3); border: 1px solid var(--slate-300); border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-sm); color: var(--slate-900); background-color: white; cursor: pointer; transition: all var(--transition-fast); } .form-field select:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-100); } .form-field select.error { border-color: var(--red-500); } .form-field select.error:focus { box-shadow: 0 0 0 3px var(--red-100); } .form-field textarea { width: 100%; padding: var(--space-3); border: 1px solid var(--slate-300); border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-sm); color: var(--slate-900); resize: vertical; transition: all var(--transition-fast); } .form-field textarea:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-100); } .form-field textarea.error { border-color: var(--red-500); } .form-field textarea.error:focus { box-shadow: 0 0 0 3px var(--red-100); } .error-message { font-size: var(--text-xs); color: var(--red-600); font-weight: var(--font-medium); } .form-actions { padding: var(--space-6); background: var(--slate-50); border-top: 1px solid var(--slate-200); display: flex; justify-content: flex-end; gap: var(--space-3); } .loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12); color: var(--slate-500); } .loading-spinner { width: 48px; height: 48px; border: 4px solid var(--slate-200); border-top-color: var(--primary-500); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; margin-bottom: var(--space-4); } @keyframes spin { to { transform: rotate(360deg); } } /* Responsive */ @media (max-width: 768px) { .form-row:has(.form-field:nth-child(2)), .form-row:has(.form-field:nth-child(3)) { grid-template-columns: 1fr; } .form-actions { flex-direction: column-reverse; } .form-actions button { width: 100%; } } /* Meetings Page - Professional Design */ .meetings-page { display: flex; flex-direction: column; gap: 0; min-height: 100vh; background: var(--bg-secondary); padding: var(--space-xlarge); max-width: var(--layout-page-max-width); margin: 0 auto; } /* ========== HEADER ========== */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-large); margin-bottom: var(--space-large); padding: 0 var(--space-medium); } .meetings-page .page-header h1 { margin: 0; font-size: var(--page-header-title-size); font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: var(--line-height-tight); } .page-description { margin: var(--space-xsmall) 0 0 0; font-size: var(--page-header-description-size); color: var(--text-secondary); font-weight: var(--font-weight-regular); } /* ========== KPIs ========== */ .kpis-section { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: var(--space-xlarge); background: var(--bg-card); margin-bottom: var(--space-medium); border-radius: var(--radius-large); } .kpi-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-medium); transition: all var(--transition-fast); } .kpi-card:hover { border-color: var(--neutral-medium-light); box-shadow: var(--shadow-medium); transform: translateY(-1px); } .kpi-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-medium); font-size: 20px; font-weight: var(--font-weight-bold); flex-shrink: 0; } .kpi-content { display: flex; flex-direction: column; gap: 4px; } .kpi-label { font-size: 13px; color: var(--text-secondary); font-weight: var(--font-weight-regular); } .kpi-value { font-size: 28px; font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; } /* ========== TOOLBAR ========== */ .meetings-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-medium); padding: var(--space-large) var(--space-xlarge); border-bottom: 1px solid var(--border-color); } .meetings-toolbar .searchInput { flex: 1; max-width: 600px; height: 50px !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; background: #ffffff !important; padding: 0 16px !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .meetings-toolbar .searchInput:hover { border-color: #d1d5db !important; } .meetings-toolbar .searchInput:focus-within { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important; } .meetings-toolbar .searchInput__field { font-size: 14px !important; } .view-toggle { display: flex; align-items: center; gap: var(--space-xsmall); background: transparent; padding: 0; border-radius: 0; border: none; height: 50px; } .toggle-btn { display: flex; align-items: center; justify-content: center; padding: 8px 12px; background: transparent; border: none; border-radius: var(--radius-small); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); } .toggle-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .toggle-btn.active { background: var(--bg-card); color: var(--primary); box-shadow: var(--shadow-small); } /* ========== CALENDAR VIEW ========== */ .calendar-view { padding: var(--space-xlarge); } .calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-large); } .calendar-nav { display: flex; align-items: center; gap: var(--space-medium); } .nav-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-medium); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); } .nav-btn:hover { background: var(--bg-hover); border-color: var(--neutral-medium-light); color: var(--text-primary); } .month-year { font-size: 20px; font-weight: var(--font-weight-semibold); color: var(--text-primary); margin: 0; min-width: 200px; text-align: center; text-transform: capitalize; } /* Calendar Grid */ .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; border-radius: var(--radius-large); overflow: hidden; border: 1px solid var(--border-color); } .calendar-weekday { background: var(--bg-secondary); padding: 12px; text-align: center; font-size: 13px; font-weight: var(--font-weight-semibold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-right: 1px solid var(--border-color); border-bottom: 2px solid var(--border-color); } .calendar-weekday:nth-child(7) { border-right: none; } .calendar-day { background: var(--bg-card); aspect-ratio: 1 / 1; padding: 8px; cursor: pointer; transition: all var(--transition-fast); position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } /* Eliminar borde derecho de la última columna (sábados) */ .calendar-day:nth-child(7n + 14) { border-right: none; } .calendar-day.empty { background: transparent; cursor: default; pointer-events: none; border: none; padding: 0; aspect-ratio: auto; min-height: 0; height: 0; overflow: hidden; } .calendar-day:not(.empty):hover { background: var(--bg-hover); box-shadow: inset 0 0 0 2px var(--primary-light); transform: scale(1.02); z-index: 1; } .calendar-day.today { background: #e6f2ff; } .calendar-day.today .day-number { background: var(--primary); color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .day-number { font-size: 14px; font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: 4px; flex-shrink: 0; } .day-meetings { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; flex: 1; overflow-y: auto; min-height: 0; } .meeting-dot { background: var(--primary-light); border-left: 3px solid var(--primary); padding: 4px 6px; border-radius: 3px; font-size: 11px; overflow: hidden; cursor: pointer; transition: all var(--transition-fast); } .meeting-dot:hover { background: var(--primary); color: white; transform: translateX(2px); } .meeting-time { font-weight: var(--font-weight-semibold); color: var(--text-primary); display: block; font-size: 10px; margin-bottom: 2px; } .meeting-title { color: var(--text-secondary); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .meeting-dot:hover .meeting-time, .meeting-dot:hover .meeting-title { color: white; } .more-meetings { font-size: 11px; color: var(--text-tertiary); padding: 2px 6px; text-align: center; } /* ========== LIST VIEW ========== */ .list-view { padding: var(--space-xlarge); } .loading { text-align: center; padding: 80px; color: var(--text-secondary); font-size: var(--font-size-base); } .meetings-list { display: flex; flex-direction: column; gap: 12px; } .meeting-card { display: flex; align-items: center; gap: var(--space-large); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-large); padding: var(--space-large); cursor: pointer; transition: all var(--transition-base); } .meeting-card:hover { border-color: var(--primary); box-shadow: var(--shadow-medium); transform: translateY(-2px); } .meeting-card.past { opacity: 0.7; } .meeting-date-badge { flex-shrink: 0; width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius: var(--radius-medium); display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; box-shadow: var(--shadow-small); } .date-day { font-size: 24px; font-weight: var(--font-weight-bold); line-height: 1; } .date-month { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; } .meeting-content { flex: 1; min-width: 0; } .meeting-title { font-size: 16px; font-weight: var(--font-weight-semibold); color: var(--text-primary); margin: 0 0 8px 0; } .meeting-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; } .meta-item { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-secondary); } .meta-item svg { color: var(--text-tertiary); } .meeting-status { flex-shrink: 0; } /* ========== RESPONSIVE ========== */ @media (max-width: 1024px) { .kpis-section { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .meetings-page { padding: var(--space-medium); } .page-header { flex-direction: column; align-items: stretch; gap: 16px; padding: 0; } .kpis-section { grid-template-columns: 1fr; padding: var(--space-medium); } .meetings-toolbar { flex-direction: column; align-items: stretch; gap: 12px; padding: var(--space-medium); } .toggle-btn { flex: 1; } .calendar-view, .list-view { padding: var(--space-medium); } .calendar-grid { font-size: 12px; } .calendar-day { min-height: 80px; aspect-ratio: 1 / 1; padding: 4px; } .day-meetings { display: none; } .calendar-day.has-meetings::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background: var(--primary); border-radius: 50%; } .meeting-card { flex-direction: column; align-items: flex-start; gap: var(--space-medium); } .meeting-date-badge { align-self: flex-start; } .meeting-meta { flex-direction: column; gap: 8px; align-items: flex-start; } } .meetingDetailPage { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6); } .breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); } .breadcrumbLink { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); } .breadcrumbLink:hover { color: var(--text-link-hover); text-decoration: underline; } .breadcrumbSeparator { color: var(--text-tertiary); } .meetingHeader { padding: 0 !important; } .meetingHeaderContent { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--space-6); gap: var(--space-6); } .meetingHeaderLeft { display: flex; gap: var(--space-4); flex: 1; } .meetingHeaderInfo { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); } .meetingName { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .meetingName h1 { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary); margin: 0; } .meetingRelated { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-link); text-decoration: none; font-weight: var(--font-medium); transition: color var(--transition-fast); } .meetingRelated:hover { color: var(--text-link-hover); text-decoration: underline; } .meetingMeta { display: flex; flex-wrap: wrap; gap: var(--space-4); } .metaItem { display: flex; align-items: center; gap: var(--space-2); color: var(--slate-600); font-size: var(--text-sm); } .metaItem svg { color: var(--slate-400); } .metaItem a { color: var(--primary-600); text-decoration: none; font-weight: var(--font-medium); } .metaItem a:hover { color: var(--primary-700); text-decoration: underline; } .meetingHeaderRight { display: flex; gap: var(--space-2); flex-shrink: 0; } .meetingInfoGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); padding: var(--space-6); border-top: 1px solid var(--border-color); background: var(--slate-50); } .infoItem { display: flex; flex-direction: column; gap: var(--space-1); } .infoLabel { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.05em; } .infoValue { font-size: var(--text-sm); color: var(--slate-900); font-weight: var(--font-medium); } .tabContent { margin-top: var(--space-4); } .overviewGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } .overviewGrid > .postMeetingCard { grid-column: 1 / -1; } .cardTitle { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0 0 var(--space-4) 0; } .cardTitle svg { color: var(--primary-500); } .textContent { font-size: var(--text-sm); color: var(--slate-700); line-height: 1.6; margin: 0; } .textContent.whitespace { white-space: pre-line; } .textContent.muted { color: var(--slate-500); font-style: italic; } .participantsList { display: flex; flex-direction: column; gap: var(--space-3); } .participantItem { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--slate-50); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--slate-700); font-weight: var(--font-medium); } .participantAvatar { width: 36px; height: 36px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--primary-500), var(--primary-700)); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: var(--font-bold); font-size: var(--text-xs); flex-shrink: 0; } .postMeetingCard { background: var(--success-50) !important; border: 1px solid var(--success-200) !important; } .postMeetingHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); } .postMeetingHeader .cardTitle { margin: 0; } .postMeetingEdit { display: flex; flex-direction: column; gap: var(--space-3); } .postMeetingTextarea { width: 100%; padding: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: var(--text-sm); font-family: inherit; line-height: 1.6; resize: vertical; transition: border-color var(--transition-fast); } .postMeetingTextarea:focus { outline: none; border-color: var(--primary-500); } .postMeetingActions { display: flex; justify-content: flex-end; gap: var(--space-2); } .emptyState { padding: var(--space-12); text-align: center; color: var(--slate-500); } .emptyState p { margin: 0; font-size: var(--text-sm); } .loading { display: flex; justify-content: center; align-items: center; min-height: 400px; } .loadingSpinner { width: 48px; height: 48px; border: 4px solid var(--slate-200); border-top-color: var(--primary-500); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 1024px) { .meetingInfoGrid { grid-template-columns: repeat(3, 1fr); } .overviewGrid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .meetingDetailPage { padding: var(--space-4); } .meetingHeaderContent { flex-direction: column; } .meetingHeaderRight { width: 100%; } .meetingHeaderRight button { flex: 1; } .meetingInfoGrid { grid-template-columns: 1fr; } .postMeetingHeader { flex-direction: column; align-items: stretch; gap: var(--space-3); } } /* Meeting Form Page Styles - Reuses negotiation form styles */ .meeting-form-page { display: flex; flex-direction: column; gap: var(--space-6); } .page-header { display: flex; justify-content: space-between; align-items: center; } .form-container { background: white; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); overflow: hidden; } .form-header { padding: var(--space-6); background: var(--slate-50); border-bottom: 1px solid var(--slate-200); } .form-header h1 { margin: 0 0 var(--space-2) 0; font-size: var(--text-2xl); color: var(--slate-900); font-weight: var(--font-bold); } .form-header p { margin: 0; color: var(--slate-600); font-size: var(--text-sm); } form { display: flex; flex-direction: column; } .form-section { display: flex; flex-direction: column; gap: var(--space-xlarge); padding: var(--space-medium); background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border-color); transition: all var(--transition-base); font-size: var(--font-size-large); font-weight: var(--font-weight-semibold); color: var(--text-primary); border-bottom: 2px solid var(--border-color); } .form-section:last-of-type { border-bottom: none; } .form-section h2 { margin: 0 0 var(--space-4) 0; font-size: var(--text-lg); color: var(--slate-900); font-weight: var(--font-semibold); } .form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-4); } .form-row:last-child { margin-bottom: 0; } .form-row:has(.form-field:nth-child(2)) { grid-template-columns: 1fr 1fr; } .form-row:has(.form-field:nth-child(3)) { grid-template-columns: 1fr 1fr 1fr; } .form-field { display: flex; flex-direction: column; gap: var(--space-2); } .form-field label { font-size: var(--text-sm); color: var(--slate-700); font-weight: var(--font-medium); display: flex; align-items: center; gap: var(--space-2); } .required { color: var(--red-500); } .field-hint { font-size: var(--text-xs); color: var(--slate-500); font-weight: var(--font-normal); } .form-field select { width: 100%; padding: var(--space-3); border: 1px solid var(--slate-300); border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-sm); color: var(--slate-900); background-color: white; cursor: pointer; transition: all var(--transition-fast); } .form-field select:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-100); } .form-field select.error { border-color: var(--red-500); } .form-field select.error:focus { box-shadow: 0 0 0 3px var(--red-100); } .form-field textarea { width: 100%; padding: var(--space-3); border: 1px solid var(--slate-300); border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-sm); color: var(--slate-900); resize: vertical; transition: all var(--transition-fast); } .form-field textarea:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-100); } .form-field textarea.error { border-color: var(--red-500); } .form-field textarea.error:focus { box-shadow: 0 0 0 3px var(--red-100); } .error-message { font-size: var(--text-xs); color: var(--red-600); font-weight: var(--font-medium); } .form-actions { padding: var(--space-6); background: var(--slate-50); border-top: 1px solid var(--slate-200); display: flex; justify-content: flex-end; gap: var(--space-3); } .loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12); color: var(--slate-500); } .loading-spinner { width: 48px; height: 48px; border: 4px solid var(--slate-200); border-top-color: var(--primary-500); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; margin-bottom: var(--space-4); } @keyframes spin { to { transform: rotate(360deg); } } /* Responsive */ @media (max-width: 768px) { .form-row:has(.form-field:nth-child(2)), .form-row:has(.form-field:nth-child(3)) { grid-template-columns: 1fr; } .form-actions { flex-direction: column-reverse; } .form-actions button { width: 100%; } } /* Positions Page Styles */ .positions-page { display: flex; flex-direction: column; gap: var(--space-6); } .page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); } .header-content h1 { margin: 0 0 var(--space-2) 0; font-size: var(--text-3xl); color: var(--slate-900); font-weight: var(--font-bold); } .header-content p { margin: 0; color: var(--slate-600); font-size: var(--text-base); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); } .stat-card { background: white; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .stat-label { font-size: var(--text-sm); color: var(--slate-500); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.05em; } .stat-value { font-size: var(--text-3xl); color: var(--slate-900); font-weight: var(--font-bold); font-variant-numeric: tabular-nums; } .stat-value.open { color: var(--green-600); } .stat-value.openings { color: var(--primary-600); } .stat-value.applicants { color: var(--teal-600); } .filters-section { background: white; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); } .filter-groups { display: flex; flex-direction: column; gap: var(--space-4); } .filter-group { display: flex; flex-direction: column; gap: var(--space-2); } .filter-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--slate-700); } .filter-buttons { display: flex; gap: var(--space-2); flex-wrap: wrap; } .filter-button { padding: var(--space-2) var(--space-4); border: 1px solid var(--slate-200); border-radius: var(--radius-md); background-color: var(--white); color: var(--slate-600); font-size: var(--text-sm); font-weight: var(--font-medium); cursor: pointer; transition: all 0.2s ease; } .filter-button:hover { background-color: var(--slate-50); border-color: var(--slate-300); } .filter-button.active { background-color: var(--primary-600); border-color: var(--primary-600); color: var(--white); } .filter-button.active:hover { background-color: var(--primary-700); } .table-container { background: white; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); overflow: hidden; } .position-title-cell { display: flex; flex-direction: column; gap: var(--space-1); } .position-title-cell .title { font-weight: var(--font-medium); color: var(--slate-900); } .position-title-cell .department { font-size: var(--text-xs); color: var(--slate-500); } .applicants-count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 2px var(--space-2); background: var(--teal-100); color: var(--teal-700); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--font-semibold); } .loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12); color: var(--slate-500); } .loading-spinner { width: 48px; height: 48px; border: 4px solid var(--slate-200); border-top-color: var(--primary-500); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; margin-bottom: var(--space-4); } @keyframes spin { to { transform: rotate(360deg); } } /* Responsive */ @media (max-width: 768px) { .page-header { flex-direction: column; } .page-header button { width: 100%; } .stats-grid { grid-template-columns: repeat(2, 1fr); } } .positionDetailPage { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6); } .breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); } .breadcrumbLink { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); } .breadcrumbLink:hover { color: var(--text-link-hover); text-decoration: underline; } .breadcrumbSeparator { color: var(--text-tertiary); } .positionHeader { padding: 0 !important; } .positionHeaderContent { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--space-6); gap: var(--space-6); } .positionHeaderLeft { display: flex; gap: var(--space-4); flex: 1; } .positionIcon { width: 64px; height: 64px; border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--indigo-500), var(--indigo-700)); color: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-lg); } .positionHeaderInfo { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); } .positionName { display: flex; align-items: center; gap: var(--space-3); } .positionName h1 { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary); margin: 0; } .positionMeta { display: flex; flex-wrap: wrap; gap: var(--space-4); } .metaItem { display: flex; align-items: center; gap: var(--space-2); color: var(--slate-600); font-size: var(--text-sm); font-weight: var(--font-medium); } .metaItem svg { color: var(--slate-400); } .positionHeaderRight { display: flex; gap: var(--space-2); flex-shrink: 0; } .positionInfoGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); padding: var(--space-6); border-top: 1px solid var(--border-color); background: var(--slate-50); } .infoItem { display: flex; flex-direction: column; gap: var(--space-1); } .infoLabel { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.05em; } .infoValue { font-size: var(--text-sm); color: var(--slate-900); font-weight: var(--font-medium); } .tabContent { margin-top: var(--space-4); } .overviewGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } .cardTitle { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0 0 var(--space-4) 0; } .textContent { font-size: var(--text-sm); color: var(--slate-700); line-height: 1.6; margin: 0; } .textContent.whitespace { white-space: pre-line; } .skillsList { display: flex; flex-wrap: wrap; gap: var(--space-2); } .skillChip { padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--font-medium); } .skillChip.required { background: var(--primary-50); border: 1px solid var(--primary-200); color: var(--primary-700); } .skillChip.preferred { background: var(--slate-100); border: 1px solid var(--slate-200); color: var(--slate-700); } .applicantsSection { padding: var(--space-6); } .sectionHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); } .sectionTitle { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0; } .sectionActions { display: flex; gap: var(--space-2); align-items: center; } .applicantsList { display: flex; flex-direction: column; gap: var(--space-3); } .applicantCard { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4); background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius-md); transition: all var(--transition-fast); } .applicantCard:hover { background: var(--white); border-color: var(--primary-300); box-shadow: var(--shadow-md); } .applicantCardLeft { display: flex; align-items: center; gap: var(--space-3); flex: 1; } .applicantAvatar { width: 48px; height: 48px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--primary-500), var(--primary-700)); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: var(--font-bold); font-size: var(--text-sm); flex-shrink: 0; } .applicantInfo { display: flex; flex-direction: column; gap: var(--space-1); } .applicantName { font-weight: var(--font-semibold); color: var(--slate-900); font-size: var(--text-base); } .applicantContact { font-size: var(--text-sm); color: var(--slate-600); } .applicantMeta { display: flex; gap: var(--space-2); font-size: var(--text-xs); color: var(--slate-500); } .matchScore { color: var(--success-600); font-weight: var(--font-semibold); } .applicantCardRight { display: flex; gap: var(--space-2); align-items: center; flex-shrink: 0; } .emptyState { padding: var(--space-12); text-align: center; color: var(--slate-500); } .emptyState p { margin: 0; font-size: var(--text-sm); } .loading { display: flex; justify-content: center; align-items: center; min-height: 400px; } .loadingSpinner { width: 48px; height: 48px; border: 4px solid var(--slate-200); border-top-color: var(--primary-500); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 1024px) { .positionInfoGrid { grid-template-columns: repeat(3, 1fr); } .overviewGrid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .positionDetailPage { padding: var(--space-4); } .positionHeaderContent { flex-direction: column; } .positionHeaderLeft { flex-direction: column; align-items: center; text-align: center; } .positionMeta { justify-content: center; } .positionHeaderRight { width: 100%; } .positionHeaderRight button { flex: 1; } .positionInfoGrid { grid-template-columns: 1fr; } .sectionHeader { flex-direction: column; align-items: stretch; gap: var(--space-3); } .applicantCard { flex-direction: column; align-items: flex-start; gap: var(--space-3); } .applicantCardRight { width: 100%; justify-content: space-between; } } /* UserProfilePage.css */ .user-profile-page { padding: var(--spacing-6); max-width: 1000px; margin: 0 auto; } /* Header */ .page-header { margin-bottom: var(--spacing-8); } .page-header h1 { font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--slate-900); margin: 0 0 var(--spacing-1) 0; } .page-header p { font-size: var(--text-base); color: var(--slate-600); margin: 0; } /* Profile Container */ .profile-container { display: flex; flex-direction: column; gap: var(--spacing-6); } /* Avatar Section */ .avatar-section { display: flex; align-items: center; gap: var(--spacing-6); padding: var(--spacing-2) 0; } .avatar-large { width: 120px; height: 120px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--primary-500), var(--primary-600)); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: var(--text-4xl); font-weight: var(--font-bold); flex-shrink: 0; box-shadow: var(--shadow-md); } .avatar-info { flex: 1; } .avatar-info h2 { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--slate-900); margin: 0 0 var(--spacing-1) 0; } .user-role { font-size: var(--text-lg); font-weight: var(--font-medium); color: var(--slate-700); margin: 0 0 var(--spacing-1) 0; } .user-department { display: flex; align-items: center; gap: var(--spacing-1); font-size: var(--text-sm); color: var(--slate-600); margin: 0 0 var(--spacing-4) 0; } /* Card Header */ .card-header { margin-bottom: var(--spacing-6); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--slate-200); } .card-title { display: flex; align-items: center; gap: var(--spacing-2); } .card-title h3 { font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--slate-900); margin: 0; } .card-title svg { color: var(--primary-600); } /* Form Grid */ .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-4); margin-bottom: var(--spacing-6); } .form-field { display: flex; flex-direction: column; gap: var(--spacing-2); } .form-field-full { grid-column: 1 / -1; } .form-field label { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--slate-700); } .required { color: var(--error-600); } /* Input with Icon */ .input-with-icon { position: relative; display: flex; align-items: center; } .input-icon { position: absolute; left: var(--spacing-3); color: var(--slate-400); pointer-events: none; } .input-with-icon input { padding-left: var(--spacing-10); } /* Field Hint */ .field-hint { font-size: var(--text-xs); color: var(--slate-500); margin-top: calc(var(--spacing-2) * -1); } /* Textarea */ .form-textarea { width: 100%; padding: var(--spacing-3); border: 1px solid var(--slate-300); border-radius: var(--radius-md); font-size: var(--text-sm); font-family: inherit; color: var(--slate-900); resize: vertical; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-textarea:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-100); } .form-textarea.error { border-color: var(--error-500); } .form-textarea::placeholder { color: var(--slate-400); } /* Error Message */ .error-message { font-size: var(--text-xs); color: var(--error-600); margin-top: calc(var(--spacing-2) * -1); } /* Form Actions */ .form-actions { display: flex; justify-content: flex-end; gap: var(--spacing-3); } /* Permissions Section */ .permissions-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0; border: none; background: transparent; cursor: pointer; margin-bottom: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--slate-200); transition: opacity 0.2s ease; } .permissions-toggle:hover { opacity: 0.8; } .permissions-toggle svg:last-child { color: var(--slate-400); } .permissions-content { animation: slideDown 0.2s ease; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .permissions-description { font-size: var(--text-sm); color: var(--slate-600); margin-bottom: var(--spacing-4); } .permissions-description strong { color: var(--slate-900); text-transform: capitalize; } /* Permissions Grid */ .permissions-grid { display: flex; flex-direction: column; gap: var(--spacing-4); margin-bottom: var(--spacing-4); } .permission-item { padding: var(--spacing-4); border: 1px solid var(--slate-200); border-radius: var(--radius-md); background-color: var(--slate-50); } .permission-module { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--slate-900); margin-bottom: var(--spacing-3); } .permission-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-2); } .permission-badge { display: inline-flex; align-items: center; gap: var(--spacing-1); padding: var(--spacing-1) var(--spacing-3); background-color: var(--success-50); color: var(--success-700); border: 1px solid var(--success-200); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-medium); } .permission-badge svg { color: var(--success-600); } .permissions-footer { font-size: var(--text-sm); color: var(--slate-500); font-style: italic; margin: 0; padding-top: var(--spacing-4); border-top: 1px solid var(--slate-200); } /* Loading Spinner */ .loading-spinner { display: flex; justify-content: center; align-items: center; min-height: 400px; font-size: var(--text-lg); color: var(--slate-600); } /* Responsive Design */ @media (max-width: 768px) { .user-profile-page { padding: var(--spacing-4); } .avatar-section { flex-direction: column; text-align: center; } .avatar-large { width: 100px; height: 100px; font-size: var(--text-3xl); } .form-grid { grid-template-columns: 1fr; } .form-field-full { grid-column: 1; } .form-actions { flex-direction: column; } .form-actions button { width: 100%; } .permission-actions { flex-direction: column; } .permission-badge { justify-content: center; } } /* Settings Page Styles */ .settings-page { display: flex; flex-direction: column; gap: var(--space-6); max-width: 1200px; margin: 0 auto; } .page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); } .header-content h1 { margin: 0 0 var(--space-2) 0; font-size: var(--text-3xl); color: var(--slate-900); font-weight: var(--font-bold); } .header-content p { margin: 0; color: var(--slate-600); font-size: var(--text-base); } .header-actions { display: flex; gap: var(--space-3); } .settings-container { display: flex; flex-direction: column; gap: var(--space-6); } .settings-card { background: white; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); overflow: hidden; } .settings-table-header { display: grid; grid-template-columns: 1fr repeat(3, 140px); gap: var(--space-4); padding: var(--space-4) var(--space-6); background: var(--slate-50); border-bottom: 1px solid var(--slate-200); } .header-cell { font-size: var(--text-sm); color: var(--slate-700); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; } .header-cell.channel-cell { display: flex; align-items: center; justify-content: center; gap: var(--space-2); } .header-cell.channel-cell svg { color: var(--slate-500); } .settings-row { display: grid; grid-template-columns: 1fr repeat(3, 140px); gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--slate-200); align-items: center; transition: background-color var(--transition-fast); } .settings-row:last-child { border-bottom: none; } .settings-row:hover { background: var(--slate-50); } .setting-info h3 { margin: 0 0 var(--space-1) 0; font-size: var(--text-base); color: var(--slate-900); font-weight: var(--font-semibold); } .setting-info p { margin: 0; font-size: var(--text-sm); color: var(--slate-600); line-height: 1.5; } .setting-toggle { display: flex; justify-content: center; } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 28px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--slate-300); transition: background-color var(--transition-fast); border-radius: 28px; } .toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: transform var(--transition-fast); border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .toggle-switch input:checked + .toggle-slider { background-color: var(--primary-500); } .toggle-switch input:focus + .toggle-slider { box-shadow: 0 0 0 3px var(--primary-100); } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); } .toggle-switch input:disabled + .toggle-slider { opacity: 0.5; cursor: not-allowed; } .settings-actions { display: flex; justify-content: center; padding: var(--space-6); background: white; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); } /* Responsive */ @media (max-width: 1024px) { .settings-table-header, .settings-row { grid-template-columns: 1fr repeat(3, 100px); } .header-cell.channel-cell span { display: none; } } @media (max-width: 768px) { .page-header { flex-direction: column; } .header-actions { width: 100%; } .header-actions button { flex: 1; } .settings-table-header { display: none; } .settings-row { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-5) var(--space-4); } .setting-info { margin-bottom: var(--space-3); } .setting-toggle { justify-content: space-between; align-items: center; } .setting-toggle::before { content: attr(data-label); font-size: var(--text-sm); color: var(--slate-600); font-weight: var(--font-medium); } .setting-toggle:nth-of-type(1)::before { content: "Email"; } .setting-toggle:nth-of-type(2)::before { content: "Push"; } .setting-toggle:nth-of-type(3)::before { content: "In-App"; } .settings-actions button { width: 100%; } } /* ProjectsDashboardPage.css */ .projects-dashboard-page { padding: var(--spacing-6); max-width: 1400px; margin: 0 auto; } /* Header */ .dashboard-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-8); gap: var(--spacing-4); } .dashboard-header h1 { font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--slate-900); margin: 0 0 var(--spacing-1) 0; } .dashboard-header p { font-size: var(--text-base); color: var(--slate-600); margin: 0; } /* KPIs Grid */ .kpis-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-4); margin-bottom: var(--spacing-6); } .kpi-card { display: flex; align-items: center; gap: var(--spacing-4); } .kpi-icon { width: 56px; height: 56px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .kpi-icon[data-variant="primary"] { background: linear-gradient(135deg, var(--primary-500), var(--primary-600)); color: var(--white); } .kpi-icon[data-variant="success"] { background: linear-gradient(135deg, var(--success-500), var(--success-600)); color: var(--white); } .kpi-icon[data-variant="info"] { background: linear-gradient(135deg, var(--info-500), var(--info-600)); color: var(--white); } .kpi-icon[data-variant="warning"] { background: linear-gradient(135deg, var(--warning-500), var(--warning-600)); color: var(--white); } .kpi-content { flex: 1; min-width: 0; } .kpi-label { font-size: var(--text-sm); color: var(--slate-600); margin-bottom: var(--spacing-1); } .kpi-value { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--slate-900); margin-bottom: var(--spacing-1); } .kpi-trend { font-size: var(--text-xs); color: var(--slate-500); } /* Dashboard Content Grid */ .dashboard-content-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-6); } .widget-large { grid-column: 1 / -1; } .widget-medium { grid-column: span 1; } /* Widget Header */ .widget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-4); } .widget-header h2 { font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--slate-900); margin: 0; } .widget-header button { display: flex; align-items: center; gap: var(--spacing-1); } /* Projects List */ .projects-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-4); } .project-card { padding: var(--spacing-4); border: 1px solid var(--slate-200); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; } .project-card:hover { border-color: var(--primary-300); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .project-header { margin-bottom: var(--spacing-3); } .project-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacing-2); margin-bottom: var(--spacing-2); } .project-card h3 { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--slate-900); margin: 0; } .project-meta { display: flex; flex-wrap: wrap; gap: var(--spacing-3); font-size: var(--text-sm); color: var(--slate-600); } .meta-item { display: flex; align-items: center; gap: var(--spacing-1); } /* Progress Section */ .progress-section { margin-top: var(--spacing-3); } .progress-label { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); color: var(--slate-700); margin-bottom: var(--spacing-2); } .progress-percent { font-weight: var(--font-semibold); color: var(--primary-600); } .progress-bar { height: 8px; background-color: var(--slate-100); border-radius: var(--radius-full); overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary-500), var(--primary-600)); border-radius: var(--radius-full); transition: width 0.3s ease; } /* Sprints List */ .sprints-list { display: flex; flex-direction: column; gap: var(--spacing-3); } .sprint-card { padding: var(--spacing-3); border: 1px solid var(--slate-200); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; } .sprint-card:hover { border-color: var(--info-300); background-color: var(--info-50); } .sprint-name { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--slate-900); margin-bottom: var(--spacing-1); } .sprint-project { font-size: var(--text-sm); color: var(--slate-600); margin-bottom: var(--spacing-2); } .sprint-dates { display: flex; align-items: center; gap: var(--spacing-1); font-size: var(--text-xs); color: var(--slate-500); margin-bottom: var(--spacing-2); } .sprint-progress { display: flex; flex-direction: column; gap: var(--spacing-1); } .progress-text { font-size: var(--text-xs); color: var(--slate-600); } .progress-mini-bar { height: 4px; background-color: var(--slate-100); border-radius: var(--radius-full); overflow: hidden; } .progress-mini-fill { height: 100%; background: linear-gradient(90deg, var(--info-500), var(--info-600)); border-radius: var(--radius-full); transition: width 0.3s ease; } /* Milestones List */ .milestones-list { display: flex; flex-direction: column; gap: var(--spacing-3); } .milestone-card { padding: var(--spacing-3); border-left: 3px solid var(--primary-500); background-color: var(--primary-50); border-radius: var(--radius-md); } .milestone-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-2); } .milestone-date { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--slate-600); } .milestone-title { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--slate-900); margin-bottom: var(--spacing-1); } .milestone-project { font-size: var(--text-sm); color: var(--slate-600); } /* Empty States */ .empty-state { text-align: center; color: var(--slate-500); font-size: var(--text-sm); padding: var(--spacing-8) var(--spacing-4); } /* Loading Spinner */ .loading-spinner { display: flex; justify-content: center; align-items: center; min-height: 400px; font-size: var(--text-lg); color: var(--slate-600); } /* Responsive Design */ @media (max-width: 1200px) { .kpis-grid { grid-template-columns: repeat(2, 1fr); } .dashboard-content-grid { grid-template-columns: 1fr; } .widget-medium { grid-column: span 1; } } @media (max-width: 768px) { .projects-dashboard-page { padding: var(--spacing-4); } .dashboard-header { flex-direction: column; align-items: flex-start; } .kpis-grid { grid-template-columns: 1fr; } .projects-list { grid-template-columns: 1fr; } .project-meta { flex-direction: column; gap: var(--spacing-1); } .widget-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-2); } } /* ======================================== PROJECTS PAGE - Diseño con Tokens Semánticos ======================================== */ .projects-page { padding: var(--space-xlarge); max-width: var(--layout-page-max-width); margin: 0 auto; background: var(--bg-secondary); min-height: 100vh; } /* ========== HEADER ========== */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-large); margin-bottom: var(--space-large); padding: 0 var(--space-medium); } .projects-page .page-header h1 { margin: 0; font-size: var(--page-header-title-size); font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: var(--line-height-tight); } .page-description { margin: var(--space-xsmall) 0 0 0; font-size: var(--page-header-description-size); color: var(--text-secondary); font-weight: var(--font-weight-regular); } /* ========== CARD ========== */ .projects-page > .card { background: var(--bg-card); border-radius: var(--radius-large); box-shadow: var(--shadow-small); border: 1px solid var(--border-color); overflow: hidden; padding: 0 !important; } /* ========== TOOLBAR ========== */ .projects-toolbar { display: flex; align-items: center; gap: var(--space-medium); padding: var(--space-xlarge) var(--space-xlarge) var(--space-large) var(--space-xlarge); background: var(--bg-card); } .projects-toolbar > div:first-child { flex: 1; margin: 0; } /* SearchInput igual que los Selects */ .projects-toolbar .searchInput { height: 50px !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; background: #ffffff !important; padding: 0 16px !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .projects-toolbar .searchInput:hover { border-color: #d1d5db !important; } .projects-toolbar .searchInput:focus-within { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important; } .projects-toolbar .searchInput__field { font-size: 14px !important; } .toolbar-filters { display: flex; gap: var(--space-medium); align-items: center; } .status-filter, .project-manager-filter { min-width: 220px; flex-shrink: 0; } .status-filter .select-container, .project-manager-filter .select-container { margin: 0; } .status-filter .select-wrapper, .project-manager-filter .select-wrapper { height: 50px !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; background: #ffffff !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .status-filter .select-wrapper:hover, .project-manager-filter .select-wrapper:hover { border-color: #d1d5db !important; } .status-filter .select-wrapper:focus-within, .project-manager-filter .select-wrapper:focus-within { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important; outline: none !important; } .status-filter .select-input, .project-manager-filter .select-input { height: 48px !important; padding: 12px 40px 12px 16px !important; font-size: 14px !important; border: none !important; border-radius: 8px !important; background: transparent !important; line-height: 1.5 !important; } /* ========== TABLE CELLS ========== */ .project-name-cell { display: flex; align-items: center; gap: 12px; } .project-color-indicator { width: 4px; height: 40px; border-radius: 2px; flex-shrink: 0; } .project-name { font-weight: var(--font-weight-semibold); color: var(--text-primary); font-size: var(--font-size-medium); } .project-code { font-size: var(--font-size-small); color: var(--text-secondary); font-family: var(--font-mono); } .project-account, .project-manager, .project-dates { display: flex; align-items: center; gap: 6px; font-size: 0.9em; color: var(--text-primary); } .date-item { display: flex; align-items: center; gap: 4px; font-size: 0.85em; } .progress-cell { display: flex; align-items: center; gap: 12px; } .progress-bar-mini { flex: 1; height: 8px; background: var(--bg-secondary); border-radius: 4px; overflow: hidden; } .progress-fill-mini { height: 100%; background: var(--primary); transition: width 0.3s ease; border-radius: 4px; } .progress-value { font-weight: var(--font-weight-semibold); font-size: var(--font-size-small); color: var(--text-secondary); min-width: 40px; text-align: left; } /* ========== TABLE HEADER ========== */ .projects-page thead { background: var(--table-header-bg); border-bottom: 1px solid var(--border-color); border-top: 1px solid var(--border-color); } .projects-page thead th { padding: var(--table-header-padding-vertical) var(--table-cell-padding-horizontal); text-align: left; font-size: var(--table-header-font-size); font-weight: var(--font-weight-semibold); color: var(--table-header-text); text-transform: uppercase; letter-spacing: 0.05em; } .projects-page thead th:first-child { padding-left: var(--table-cell-padding-horizontal); } .projects-page thead th:last-child { padding-right: var(--table-cell-padding-horizontal); } /* ========== TABLE BODY ========== */ .projects-page tbody tr { border-bottom: 1px solid var(--border-color); transition: background-color var(--transition-fast); cursor: pointer; } .projects-page tbody tr:hover { background-color: var(--table-row-hover-bg); } .projects-page tbody tr:last-child { border-bottom: 1px solid var(--border-color); } .projects-page tbody td { padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal); vertical-align: middle; } .projects-page tbody td:first-child { padding-left: var(--table-cell-padding-horizontal); } .projects-page tbody td:last-child { padding-right: var(--table-cell-padding-horizontal); } /* ========== TABLE ACTIONS ========== */ .projects-page .action-btn-delete { color: var(--danger) !important; border-color: var(--danger-light) !important; } .projects-page .action-btn-delete:hover { background: var(--danger) !important; border-color: var(--danger) !important; color: var(--neutral-white) !important; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(244, 63, 94, 0.3); } /* ========== PAGINATION ========== */ .pagination { display: flex; justify-content: space-between; align-items: center; padding: var(--pagination-padding-vertical) var(--pagination-padding-horizontal); border-top: none; background: var(--bg-card); margin: 0; } .pagination-stats { display: flex; align-items: center; gap: var(--space-medium); font-size: var(--pagination-font-size); color: var(--text-secondary); } .pagination-stats strong { font-weight: var(--font-weight-semibold); color: var(--text-primary); } .pagination-controls { display: flex; align-items: center; gap: var(--space-small); } .pagination-info { font-size: var(--pagination-font-size); color: var(--text-secondary); font-weight: var(--font-weight-medium); } .pagination button { min-width: var(--pagination-button-min-width); font-size: var(--pagination-font-size); } /* ========== RESPONSIVE ========== */ @media (max-width: 1024px) { .toolbar-filters { flex-direction: column; align-items: stretch; } .status-filter, .project-manager-filter { min-width: auto; } } @media (max-width: 768px) { .projects-page { padding: var(--space-medium); } .page-header { flex-direction: column; align-items: flex-start; gap: var(--space-medium); } .projects-toolbar { flex-direction: column; align-items: stretch; } .projects-toolbar > div:first-child { width: 100%; } .pagination { flex-direction: column; align-items: center; gap: var(--space-small); padding: var(--space-medium); } .projects-page thead th, .projects-page tbody td { padding: var(--space-small) var(--space-medium); } .projects-page thead th:first-child, .projects-page tbody td:first-child { min-width: 160px; } } .featureErrorState { margin: 16px 0; } .featureErrorStateBody { min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; } .featureErrorStateTitle { margin: 0; font-size: 1.05rem; color: var(--text-primary); } .featureErrorStateMessage { margin: 0; color: var(--text-secondary); max-width: 560px; } .projectDetailPage { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6); } .breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); } .breadcrumbLink { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); } .breadcrumbLink:hover { color: var(--text-link-hover); text-decoration: underline; } .breadcrumbSeparator { color: var(--text-tertiary); } .projectHeader { padding: 0 !important; } .projectHeaderContent { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--space-6); gap: var(--space-6); } .projectHeaderLeft { display: flex; gap: var(--space-4); flex: 1; } .projectColor { width: 8px; border-radius: var(--radius-full); flex-shrink: 0; } .projectHeaderInfo { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); } .projectName { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .projectName h1 { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary); margin: 0; } .projectDescription { font-size: var(--text-sm); color: var(--slate-600); line-height: 1.6; margin: 0; } .projectMeta { display: flex; flex-wrap: wrap; gap: var(--space-4); } .metaItem { display: flex; align-items: center; gap: var(--space-2); color: var(--slate-600); font-size: var(--text-sm); } .metaItem svg { color: var(--slate-400); } .projectHeaderRight { display: flex; flex-direction: column; gap: var(--space-3); flex-shrink: 0; } .quickLinks { display: flex; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--slate-200); } .projectActions { display: flex; gap: var(--space-2); } .projectInfoGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); padding: var(--space-6); border-top: 1px solid var(--border-color); background: var(--slate-50); } .infoItem { display: flex; flex-direction: column; gap: var(--space-1); } .infoLabel { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.05em; } .infoValue { font-size: var(--text-sm); color: var(--slate-900); font-weight: var(--font-medium); } .tabContent { margin-top: var(--space-4); } /* Overview Grid */ .overviewGrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); } .cardTitle { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0 0 var(--space-4) 0; } .metricsGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .metricCard { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius-md); } .metricIcon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .metricContent { display: flex; flex-direction: column; gap: var(--space-1); } .metricLabel { font-size: var(--text-sm); color: var(--slate-600); font-weight: var(--font-medium); } .metricValue { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--slate-900); font-variant-numeric: tabular-nums; } .progressSection { display: flex; flex-direction: column; gap: var(--space-4); } .progressBar { height: 32px; background: var(--slate-100); border-radius: var(--radius-full); overflow: hidden; position: relative; } .progressFill { height: 100%; background: linear-gradient(90deg, var(--primary-500), var(--primary-600)); transition: width var(--transition-base); display: flex; align-items: center; justify-content: flex-end; padding-right: var(--space-3); color: var(--white); font-weight: var(--font-bold); font-size: var(--text-sm); } .progressStats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .progressStat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); background: var(--slate-50); border-radius: var(--radius-md); text-align: center; } .progressStatLabel { font-size: var(--text-xs); color: var(--slate-600); text-transform: uppercase; font-weight: var(--font-medium); } .progressStatValue { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--slate-900); font-variant-numeric: tabular-nums; } /* Sprints Section */ .sprintsSection { padding: var(--space-6); } .sectionHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); } .sectionTitle { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0; } .sprintsList { display: flex; flex-direction: column; gap: var(--space-3); } .sprintCard { padding: var(--space-4); background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } .sprintCard:hover { background: var(--white); border-color: var(--primary-300); box-shadow: var(--shadow-md); transform: translateY(-2px); } .sprintCardHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); } .sprintCardLeft { display: flex; align-items: center; gap: var(--space-3); } .sprintCardLeft h4 { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--slate-900); margin: 0; } .sprintPoints { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--slate-700); font-variant-numeric: tabular-nums; } .sprintDates { font-size: var(--text-sm); color: var(--slate-600); margin-bottom: var(--space-3); } .sprintProgress { display: flex; align-items: center; gap: var(--space-3); } .sprintProgressBar { flex: 1; height: 8px; background: var(--slate-200); border-radius: var(--radius-full); overflow: hidden; } .sprintProgressFill { height: 100%; background: linear-gradient(90deg, var(--success-500), var(--success-600)); transition: width var(--transition-base); } .sprintProgressText { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--slate-700); min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; } /* Team Section */ .teamSection { padding: var(--space-6); } .teamGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); } .teamCard { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius-md); transition: all var(--transition-fast); } .teamCard:hover { background: var(--white); border-color: var(--primary-300); box-shadow: var(--shadow-md); } .teamCardAvatar { width: 56px; height: 56px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--primary-500), var(--primary-700)); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: var(--font-bold); font-size: var(--text-lg); flex-shrink: 0; } .teamCardInfo { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .teamCardName { font-weight: var(--font-semibold); color: var(--slate-900); font-size: var(--text-sm); } .teamCardRole { font-size: var(--text-xs); color: var(--slate-600); font-weight: var(--font-medium); } .teamCardEmail { font-size: var(--text-xs); color: var(--text-link); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .teamCardEmail:hover { color: var(--text-link-hover); text-decoration: underline; } .emptyState { padding: var(--space-12); text-align: center; color: var(--slate-500); } .emptyState p { margin: 0; font-size: var(--text-sm); } .loading { display: flex; justify-content: center; align-items: center; min-height: 400px; } .loadingSpinner { width: 48px; height: 48px; border: 4px solid var(--slate-200); border-top-color: var(--primary-500); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 1024px) { .projectInfoGrid { grid-template-columns: repeat(3, 1fr); } .overviewGrid { grid-template-columns: 1fr; } .metricsGrid { grid-template-columns: 1fr; } .teamGrid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .projectDetailPage { padding: var(--space-4); } .projectHeaderContent { flex-direction: column; } .projectHeaderRight { width: 100%; } .projectHeaderRight button { flex: 1; } .projectInfoGrid { grid-template-columns: 1fr; } .progressStats { grid-template-columns: 1fr; } .sectionHeader { flex-direction: column; align-items: stretch; gap: var(--space-3); } .sprintCardHeader { flex-direction: column; align-items: flex-start; gap: var(--space-2); } } .projectFormPage { padding: var(--space-6); max-width: 900px; margin: 0 auto; } .header { margin-bottom: var(--space-6); } .breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-4); } .breadcrumbLink { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); } .breadcrumbLink:hover { color: var(--text-link-hover); text-decoration: underline; } .breadcrumbSeparator { color: var(--text-tertiary); } .title { font-size: var(--text-4xl); font-weight: var(--font-bold); color: var(--text-primary); margin-bottom: var(--space-2); } .subtitle { font-size: var(--text-base); color: var(--text-secondary); } .formCard { background-color: var(--bg-card); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); padding: var(--space-6); } .formSection { margin-bottom: var(--space-8); } .formSection:last-child { margin-bottom: 0; } .sectionTitle { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-color); } .formRow { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); } .formRow-single { grid-template-columns: 1fr; } .formActions { display: flex; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--border-color); } .loading { display: flex; justify-content: center; align-items: center; padding: var(--space-12); } .loadingSpinner { width: 48px; height: 48px; border: 4px solid var(--slate-200); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 768px) { .formRow { grid-template-columns: 1fr; } .formActions { flex-direction: column-reverse; } .formActions button { width: 100%; } } /* ============================================= TASK CARD — ClickUp-inspired ============================================= */ .tc-card { background: var(--bg-card); border: 1px solid var(--border-color); border-left: 3px solid var(--border-color); border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; transition: box-shadow 0.15s ease, border-color 0.15s ease; position: relative; } .tc-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border-color: var(--primary); border-left-color: inherit; /* keep priority color */ } .tc-card--dragging { opacity: 0.55; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); cursor: grabbing; } /* ── Top row ──────────────────────────────── */ .tc-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; min-height: 14px; } .tc-type-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .tc-parent { font-size: 0.6875rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; opacity: 0.7; } /* ── Title ────────────────────────────────── */ .tc-title { font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); line-height: 1.45; margin: 0 0 8px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Subtasks progress bar ────────────────── */ .tc-subtasks-bar { width: 100%; height: 3px; background: var(--border-color); border-radius: 2px; overflow: hidden; margin-bottom: 8px; } .tc-subtasks-fill { height: 100%; background: #22c55e; border-radius: 2px; transition: width 0.3s ease; } /* ── Footer ───────────────────────────────── */ .tc-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .tc-footer-left { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow: hidden; min-width: 0; } .tc-footer-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* Date */ .tc-date { display: flex; align-items: center; gap: 3px; font-size: 0.6875rem; color: var(--text-secondary); white-space: nowrap; } .tc-date svg { flex-shrink: 0; opacity: 0.7; } .tc-date--overdue { color: #ef4444; font-weight: 600; } .tc-date--soon { color: #f97316; font-weight: 500; } /* Points */ .tc-pts { font-size: 0.6875rem; font-weight: 600; color: var(--primary); background: rgba(99, 102, 241, 0.08); border-radius: 4px; padding: 1px 5px; white-space: nowrap; } /* Chips (comments, attachments, subtasks) */ .tc-chip { display: flex; align-items: center; gap: 3px; font-size: 0.6875rem; color: var(--text-secondary); white-space: nowrap; } .tc-chip svg { opacity: 0.6; } /* Priority flag */ .tc-priority { display: flex; align-items: center; } /* Assignee avatar */ .tc-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: 700; flex-shrink: 0; cursor: default; } /* ============================================= KANBAN BOARD — ClickUp-inspired board view ============================================= */ .kanbanBoard { display: flex; gap: 12px; height: 100%; overflow-x: auto; padding: 16px; background: var(--bg-secondary); align-items: flex-start; } /* ── Column ──────────────────────────────────── */ .column { flex: 0 0 272px; min-width: 272px; background: var(--bg-secondary); border-radius: 10px; display: flex; flex-direction: column; max-height: 100%; border: 1px solid var(--border-color); transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* Columna cuando una tarjeta está encima */ .column--over { background: rgba(99, 102, 241, 0.03); } /* ── Column Header ───────────────────────────── */ .columnHeader { padding: 10px 12px 8px 12px; display: flex; justify-content: space-between; align-items: center; background: transparent; } .columnTitle { display: flex; align-items: center; gap: 7px; } .columnStatusDot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .columnTitleText { font-size: 0.6875rem; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.06em; } .columnCount { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; background: rgba(0, 0, 0, 0.07); border-radius: 10px; font-size: 0.6875rem; font-weight: 700; color: var(--text-secondary); } .wipLimit { font-size: 0.6875rem; color: var(--text-tertiary); display: flex; align-items: center; gap: 4px; } .wipLimit.exceeded { color: var(--danger); font-weight: 600; } /* ── Column Body ─────────────────────────────── */ .columnBody { flex: 1; overflow-y: auto; padding: 4px 8px 8px 8px; min-height: 80px; transition: background-color 0.15s; } .columnBody--over { background: rgba(99, 102, 241, 0.04); border-radius: 0 0 8px 8px; } .columnBody::-webkit-scrollbar { width: 4px; } .columnBody::-webkit-scrollbar-track { background: transparent; } .columnBody::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } .columnBody::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); } .dropzone { min-height: 60px; border-radius: 6px; transition: background-color 0.15s; } .dropzone-over { background-color: rgba(99, 102, 241, 0.06); border: 2px dashed rgba(99, 102, 241, 0.3); } /* ── Empty state ─────────────────────────────── */ .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; color: var(--text-secondary); text-align: center; min-height: 160px; } .empty svg { width: 40px; height: 40px; margin-bottom: 10px; opacity: 0.3; } .emptyText { font-size: 0.8125rem; color: var(--text-secondary); opacity: 0.6; } /* Drop hint en columna vacía */ .dropHint { width: 100%; padding: 16px; border: 2px dashed currentColor; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; text-align: center; opacity: 0.7; animation: dropHintPulse 1s ease-in-out infinite alternate; } @keyframes dropHintPulse { from { opacity: 0.5; } to { opacity: 0.9; } } /* Drop hint al final de columnas con tareas */ .dropHintBottom { height: 4px; border-radius: 4px; border: 2px dashed currentColor; margin: 4px 0; opacity: 0.6; } /* Drag overlay — card que sigue al cursor */ .dragOverlayCard { transform: rotate(2deg) scale(1.03); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); border-radius: 8px; opacity: 0.96; pointer-events: none; } /* ── Add task button ─────────────────────────── */ .columnAddTask { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: none; border: none; border-radius: 0 0 10px 10px; color: var(--text-secondary); font-size: 0.8125rem; cursor: pointer; width: 100%; text-align: left; transition: color 0.12s, background-color 0.12s; flex-shrink: 0; } .columnAddTask:hover { color: var(--primary); background: rgba(99, 102, 241, 0.05); } /* ── Loading / Error ─────────────────────────── */ .loading { display: flex; justify-content: center; align-items: center; flex: 1; min-height: 400px; } .loadingSpinner { width: 40px; height: 40px; border: 3px solid var(--border-color); border-top-color: var(--primary); border-radius: 50%; animation: kb-spin 0.7s linear infinite; } @keyframes kb-spin { to { transform: rotate(360deg); } } .error { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; color: var(--danger); text-align: center; } .error svg { width: 40px; height: 40px; margin-bottom: 12px; } /* ── Sortable wrapper & placeholder ──────────── */ .sortable-wrapper { touch-action: none; cursor: grab; } .sortable-wrapper:active { cursor: grabbing; } /* Hueco que queda en la columna origen mientras se arrastra */ .sortable-placeholder { height: 72px; border-radius: 8px; border: 2px dashed var(--border-color); background: rgba(99, 102, 241, 0.04); margin-bottom: 6px; opacity: 0.6; } /* Mobile */ @media (max-width: 768px) { .kanbanBoard { flex-direction: column; height: auto; align-items: stretch; } .column { flex: 1; min-width: 100%; max-height: 55vh; } } /* ============================================= SPRINT LIST VIEW — ClickUp-inspired ============================================= */ .sprintListView { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-secondary); } /* Loading */ .slv-loading { flex: 1; display: flex; align-items: center; justify-content: center; } .slv-spinner { width: 36px; height: 36px; border: 3px solid var(--border-color); border-top-color: var(--primary); border-radius: 50%; animation: slv-spin 0.7s linear infinite; } @keyframes slv-spin { to { transform: rotate(360deg); } } /* ── Stats bar ─────────────────────────────── */ .slv-statsBar { display: flex; background: var(--bg-card); border-bottom: 1px solid var(--border-color); overflow-x: auto; flex-shrink: 0; } .slv-stat { display: flex; align-items: center; gap: 10px; padding: 12px 24px; border-right: 1px solid var(--border-color); min-width: 185px; flex-shrink: 0; } .slv-stat:last-child { border-right: none; } .slv-stat-icon { width: 34px; height: 34px; border-radius: var(--radius-medium); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; font-weight: 700; } .slv-stat-icon--blue { background: #dbeafe; color: #2563eb; } .slv-stat-icon--green { background: #dcfce7; color: #16a34a; } .slv-stat-icon--amber { background: #fef3c7; color: #d97706; } .slv-stat-icon--purple { background: #f3e8ff; color: #7c3aed; } .slv-stat-title { font-size: 0.6875rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 2px 0; text-transform: uppercase; letter-spacing: 0.05em; } .slv-stat-sub { font-size: 0.8125rem; color: var(--text-primary); margin: 0; font-weight: 500; } /* ── Table ─────────────────────────────────── */ .slv-tableWrapper { flex: 1; overflow-y: auto; } /* Sticky header */ .slv-tableHeader { display: grid; grid-template-columns: 1fr 120px 120px 110px 70px 80px; padding: 0 16px 0 48px; background: var(--bg-card); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 5; } .slv-col { display: flex; align-items: center; padding: 8px 8px; font-size: 0.6875rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; border-right: 1px solid var(--border-color); } .slv-col:last-child { border-right: none; } /* ── Group ─────────────────────────────────── */ .slv-group { border-bottom: 2px solid var(--border-color); } .slv-groupHeader { display: flex; align-items: center; gap: 8px; padding: 8px 16px; cursor: pointer; user-select: none; background: var(--bg-card); border-bottom: 1px solid var(--border-color); transition: background-color 0.12s; position: sticky; top: 37px; z-index: 4; } .slv-groupHeader:hover { background: var(--bg-secondary); } .slv-chevronBtn { background: none; border: none; cursor: pointer; display: flex; align-items: center; color: var(--text-secondary); padding: 2px; border-radius: 4px; flex-shrink: 0; transition: background-color 0.12s; } .slv-chevronBtn:hover { background: var(--border-color); } .slv-statusDot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; } .slv-statusName { font-size: 0.75rem; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.06em; flex: 1; } .slv-statusCount { font-size: 0.6875rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; padding: 1px 7px; min-width: 22px; text-align: center; } /* ── Task row ──────────────────────────────── */ .slv-taskRow { display: grid; grid-template-columns: 1fr 120px 120px 110px 70px 80px; padding: 0 16px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background-color 0.1s; align-items: center; min-height: 36px; background: var(--bg-card); } .slv-taskRow:hover { background: var(--bg-secondary); } /* Name column */ .slv-col-name { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 0; } .slv-taskBar { width: 3px; height: 18px; border-radius: 2px; flex-shrink: 0; } .slv-taskTitle { font-size: 0.8125rem; color: var(--text-primary); font-weight: 400; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; } .slv-subtasks { display: flex; align-items: center; gap: 3px; font-size: 0.6875rem; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 4px; padding: 1px 5px; white-space: nowrap; flex-shrink: 0; } /* Assignee */ .slv-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: 700; flex-shrink: 0; } /* Date */ .slv-date { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; } .slv-date svg { opacity: 0.55; } /* Priority */ .slv-priority { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 500; text-transform: capitalize; } .slv-priority svg { flex-shrink: 0; } /* Points */ .slv-points { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 4px; padding: 2px 6px; text-align: center; } /* Meta chips */ .slv-col-meta { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; } .slv-metaChip { display: flex; align-items: center; gap: 3px; font-size: 0.6875rem; color: var(--text-secondary); } .slv-empty { font-size: 0.8125rem; color: var(--text-secondary); opacity: 0.35; } /* Add task */ .slv-addTask { display: flex; align-items: center; gap: 6px; padding: 8px 16px 8px 48px; background: var(--bg-card); border: none; color: var(--text-secondary); font-size: 0.8125rem; cursor: pointer; width: 100%; text-align: left; transition: color 0.12s, background-color 0.12s; border-top: 1px solid var(--border-color); } .slv-addTask:hover { color: var(--primary); background: var(--bg-secondary); } /* ── Responsive ───────────────────────────── */ @media (max-width: 900px) { .slv-tableHeader, .slv-taskRow { grid-template-columns: 1fr 90px 90px 80px; } .slv-col-points, .slv-col-meta { display: none; } } @media (max-width: 640px) { .slv-statsBar { flex-direction: column; } .slv-stat { border-right: none; border-bottom: 1px solid var(--border-color); min-width: auto; } .slv-tableHeader { display: none; } .slv-taskRow { grid-template-columns: 1fr auto; } .slv-col-assignee, .slv-col-date, .slv-col-priority { display: none; } } .tfm-form { display: flex; flex-direction: column; gap: 0; } .tfm-section { padding: 20px 0; border-bottom: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 14px; } .tfm-section--last { border-bottom: none; padding-bottom: 4px; } .tfm-section-title { font-size: 0.8125rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin: 0; } .tfm-field { display: flex; flex-direction: column; gap: 6px; } .tfm-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); } .tfm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .tfm-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-medium); font-size: 0.875rem; font-family: inherit; color: var(--text-primary); background: var(--bg-card); resize: vertical; transition: border-color 0.2s ease, box-shadow 0.2s ease; line-height: 1.5; min-height: 80px; } .tfm-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08); } .tfm-textarea::placeholder { color: var(--text-secondary); opacity: 0.6; } .tfm-textarea--error { border-color: var(--danger); } .tfm-footer { display: flex; justify-content: flex-end; gap: 10px; width: 100%; } @media (max-width: 640px) { .tfm-row { grid-template-columns: 1fr; } } /* ============================================= TASK DETAIL MODAL — ClickUp layout ============================================= */ .tdm-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 32px 20px 20px; overflow-y: auto; animation: tdm-fade 0.15s ease; } @keyframes tdm-fade { from { opacity: 0; } to { opacity: 1; } } .tdm-panel { width: 100%; max-width: 820px; background: var(--bg-card); border-radius: 12px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22); display: flex; flex-direction: column; max-height: calc(100vh - 52px); animation: tdm-slide 0.18s ease; } @keyframes tdm-slide { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ── Breadcrumb bar ─────────────────────────── */ .tdm-topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .tdm-breadcrumb { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--text-secondary); overflow: hidden; } .tdm-breadcrumb svg { opacity: 0.4; flex-shrink: 0; } .tdm-breadcrumb > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } .tdm-bc-current { color: var(--text-primary); font-weight: 500; } .tdm-close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 6px; color: var(--text-secondary); cursor: pointer; flex-shrink: 0; transition: background 0.12s, color 0.12s; } .tdm-close:hover { background: var(--bg-secondary); color: var(--text-primary); } /* ── Scroll area ────────────────────────────── */ .tdm-scroll { flex: 1; overflow-y: auto; } .tdm-scroll::-webkit-scrollbar { width: 5px; } .tdm-scroll::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } /* ── Loading ────────────────────────────────── */ .tdm-loading { display: flex; align-items: center; justify-content: center; padding: 80px; } .tdm-spinner { width: 36px; height: 36px; border: 3px solid var(--border-color); border-top-color: var(--primary); border-radius: 50%; animation: tdm-spin 0.7s linear infinite; } @keyframes tdm-spin { to { transform: rotate(360deg); } } /* ── Title row ──────────────────────────────── */ .tdm-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 28px 16px; } .tdm-title-left { flex: 1; min-width: 0; } .tdm-type-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 5px; background: var(--bg-secondary); border: 1px solid var(--border-color); font-size: 0.6875rem; color: var(--text-secondary); font-weight: 500; margin-bottom: 8px; } .tdm-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; margin: 0; } .tdm-title-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding-top: 4px; } /* Timer buttons */ .tdm-btn-timer { display: flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.12s; white-space: nowrap; } .tdm-btn-timer:hover:not(:disabled) { background: var(--bg-secondary); color: var(--primary); border-color: var(--primary); } .tdm-btn-timer--stop { color: #ef4444; border-color: #fca5a5; } .tdm-btn-timer--stop:hover { background: #fef2f2; } .tdm-btn-timer:disabled { opacity: 0.35; cursor: not-allowed; } /* Icon buttons */ .tdm-btn-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background 0.12s, color 0.12s; } .tdm-btn-icon:hover { background: var(--bg-secondary); color: var(--text-primary); } .tdm-btn-icon--danger:hover { background: #fef2f2; color: #ef4444; } /* ── Properties — 2-column grid like ClickUp ── */ .tdm-props-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border-color); } .tdm-prop { display: flex; align-items: center; min-height: 44px; padding: 8px 28px; border-bottom: 1px solid var(--border-color); gap: 0; } /* Odd items (left column) get right border */ .tdm-prop:nth-child(odd) { border-right: 1px solid var(--border-color); } .tdm-prop-key { display: flex; align-items: center; gap: 6px; width: 130px; flex-shrink: 0; font-size: 0.6875rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } .tdm-prop-key svg { opacity: 0.55; flex-shrink: 0; } .tdm-prop-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .tdm-prop-val { flex: 1; font-size: 0.8125rem; color: var(--text-primary); min-width: 0; } /* Status chip */ .tdm-status-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; border: 1px solid; font-size: 0.75rem; font-weight: 600; } /* Assignee */ .tdm-assignee { display: flex; align-items: center; gap: 7px; } .tdm-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: 700; flex-shrink: 0; } /* Dates */ .tdm-dates { display: flex; align-items: center; gap: 3px; font-size: 0.8125rem; } .tdm-dates svg { opacity: 0.4; } .tdm-due { font-weight: 500; } /* Priority */ .tdm-priority { display: flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 500; text-transform: capitalize; } /* Metric (numbers) */ .tdm-metric { font-size: 0.8125rem; font-weight: 600; color: var(--primary); } /* Sprint */ .tdm-sprint { font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } /* Empty */ .tdm-empty { font-size: 0.8125rem; color: var(--text-secondary); opacity: 0.4; } /* ── Content blocks ──────────────────────────── */ .tdm-divider { height: 1px; background: var(--border-color); } .tdm-block { padding: 18px 28px; border-bottom: 1px solid var(--border-color); } .tdm-block-header { display: flex; align-items: center; gap: 7px; font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; } .tdm-block-header svg { opacity: 0.6; } .tdm-desc-text { font-size: 0.875rem; color: var(--text-primary); line-height: 1.65; margin: 0; white-space: pre-wrap; } .tdm-desc-placeholder { font-size: 0.875rem; color: var(--text-secondary); opacity: 0.4; margin: 0; font-style: italic; } /* ── Subtasks ────────────────────────────────── */ .tdm-subtask-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; } .tdm-subtask-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; background: none; border: none; cursor: pointer; text-align: left; width: 100%; transition: background 0.12s; } .tdm-subtask-row:hover { background: var(--bg-secondary); } .tdm-subtask-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .tdm-subtask-title { flex: 1; font-size: 0.8125rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tdm-subtask-status { font-size: 0.6875rem; color: var(--text-secondary); white-space: nowrap; } .tdm-add-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; background: none; border: none; color: var(--text-secondary); font-size: 0.8125rem; cursor: pointer; width: 100%; text-align: left; transition: color 0.12s; } .tdm-add-row:hover { color: var(--primary); } /* ── Time entries ────────────────────────────── */ .tdm-time-list { display: flex; flex-direction: column; gap: 6px; } .tdm-time-row { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--text-secondary); padding: 4px 0; } .tdm-time-range { flex: 1; } .tdm-time-dur { font-weight: 600; color: var(--text-primary); } .tdm-time-type { font-size: 0.6875rem; padding: 1px 6px; border-radius: 4px; background: var(--bg-secondary); border: 1px solid var(--border-color); } .tdm-bottom-space { height: 24px; } /* ── Save indicator ──────────────────────────── */ .tdm-topbar-right { display: flex; align-items: center; gap: 8px; } .tdm-save-indicator { display: flex; align-items: center; gap: 4px; font-size: 0.6875rem; color: var(--text-secondary); animation: tdm-fade 0.2s ease; } .tdm-save-indicator--saved { color: #22c55e; } /* ── Title input ─────────────────────────────── */ .tdm-title-input { width: 100%; font-size: 1.5rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; background: transparent; border: none; outline: none; border-radius: 6px; padding: 2px 4px; margin: 0 -4px; transition: background 0.12s; } .tdm-title-input:hover { background: var(--bg-secondary); } .tdm-title-input:focus { background: var(--bg-secondary); } /* ── Editable prop hover ─────────────────────── */ .tdm-prop--editable { cursor: default; } .tdm-prop--editable:hover { background: var(--bg-secondary); } /* ── Dropdown trigger ────────────────────────── */ .tdm-field-trigger { display: flex; align-items: center; background: none; border: none; cursor: pointer; padding: 2px 4px; margin: 0 -4px; border-radius: 5px; transition: background 0.12s; text-align: left; } .tdm-field-trigger:hover { background: var(--bg-secondary); } .tdm-dropdown-wrap { position: relative; } /* ── Dropdown menu (position: fixed set inline) ── */ .tdm-dropdown { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.16); padding: 4px; max-height: 260px; overflow-y: auto; animation: tdm-fade 0.1s ease; } .tdm-dropdown::-webkit-scrollbar { width: 4px; } .tdm-dropdown::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } .tdm-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border-radius: 5px; background: none; border: none; cursor: pointer; font-size: 0.8125rem; color: var(--text-primary); text-align: left; transition: background 0.1s; } .tdm-dropdown-item:hover { background: var(--bg-secondary); } .tdm-dropdown-item--active { background: var(--bg-secondary); } .tdm-dropdown-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .tdm-dropdown-check { margin-left: auto; color: var(--primary); flex-shrink: 0; } /* ── Date input ──────────────────────────────── */ .tdm-date-input { background: transparent; border: none; outline: none; font-size: 0.8125rem; color: var(--text-primary); cursor: pointer; border-radius: 4px; padding: 2px 4px; margin: 0 -4px; transition: background 0.12s; } .tdm-date-input:hover { background: var(--bg-secondary); } .tdm-date-input:focus { background: var(--bg-secondary); } /* ── Number field ────────────────────────────── */ .tdm-number-field { display: flex; align-items: center; gap: 2px; } .tdm-number-input { width: 4ch; background: transparent; border: none; outline: none; font-size: 0.8125rem; font-weight: 600; color: var(--primary); border-radius: 4px; padding: 2px 4px; margin: 0 -4px; transition: background 0.12s; -moz-appearance: textfield; } .tdm-number-input::-webkit-outer-spin-button, .tdm-number-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .tdm-number-input:hover { background: var(--bg-secondary); } .tdm-number-input:focus { background: var(--bg-secondary); } .tdm-number-unit { font-size: 0.75rem; color: var(--text-secondary); } /* ── Smaller avatar (dropdown) ───────────────── */ .tdm-avatar--sm { width: 18px !important; height: 18px !important; font-size: 0.5rem !important; flex-shrink: 0; } /* ── Textarea inline ─────────────────────────── */ .tdm-textarea { width: 100%; box-sizing: border-box; background: transparent; border: 1px solid transparent; outline: none; resize: vertical; font-size: 0.875rem; color: var(--text-primary); line-height: 1.65; border-radius: 6px; padding: 8px; margin: 0 -8px; font-family: inherit; transition: border-color 0.12s, background 0.12s; } .tdm-textarea:hover { border-color: var(--border-color); background: var(--bg-secondary); } .tdm-textarea:focus { border-color: var(--primary); background: var(--bg-secondary); } .tdm-textarea::placeholder { color: var(--text-secondary); opacity: 0.4; font-style: italic; } /* ── Responsive ──────────────────────────────── */ @media (max-width: 640px) { .tdm-overlay { padding: 0; } .tdm-panel { border-radius: 0; max-height: 100vh; } .tdm-props-grid { grid-template-columns: 1fr; } .tdm-prop:nth-child(odd) { border-right: none; } .tdm-prop, .tdm-title-row, .tdm-block { padding-left: 16px; padding-right: 16px; } } .sprintBoardPage { height: 100vh; display: flex; flex-direction: column; background: var(--bg-secondary); overflow: hidden; } /* ══════════════════════════════════════════════ HEADER — breadcrumb + stats + botones ══════════════════════════════════════════════ */ .header { background: var(--bg-card); border-bottom: 1px solid var(--border-color); padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; min-height: 44px; } .headerLeft { flex: 1; min-width: 0; } .breadcrumb { display: flex; align-items: center; gap: 5px; font-size: 0.8125rem; color: var(--text-secondary); } .breadcrumbLink { color: var(--primary); text-decoration: none; transition: opacity 0.15s; white-space: nowrap; } .breadcrumbLink:hover { opacity: 0.7; } .breadcrumbSeparator { color: var(--text-secondary); opacity: 0.4; flex-shrink: 0; } .headerRight { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Stats group */ .stats { display: flex; gap: 18px; padding-right: 18px; border-right: 1px solid var(--border-color); } .stat { display: flex; flex-direction: column; gap: 2px; align-items: center; } .statLabel { font-size: 0.5625rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; white-space: nowrap; } .statValue { font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); line-height: 1; } .progress { width: 48px; height: 3px; background: var(--border-color); border-radius: 4px; overflow: hidden; margin-top: 2px; } .progressBar { height: 100%; background: #22c55e; border-radius: 4px; transition: width 0.3s ease; } /* ══════════════════════════════════════════════ SUB-HEADER — nombre del sprint + badge + goal ══════════════════════════════════════════════ */ .sprintSubHeader { background: var(--bg-card); border-bottom: 1px solid var(--border-color); padding: 10px 20px; display: flex; align-items: center; flex-shrink: 0; } .sprintSubHeaderLeft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; } .title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0; white-space: nowrap; } .sprintBadge { font-size: 0.6875rem; padding: 3px 10px; border-radius: 20px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; flex-shrink: 0; } .sprint-badge-active { background: #dcfce7; color: #166534; } .sprint-badge-planning, .sprint-badge-planificación { background: #dbeafe; color: #1d4ed8; } .sprint-badge-completed { background: #f3e8ff; color: #6b21a8; } .sprint-badge-cancelled { background: #fee2e2; color: #991b1b; } .sprint-badge-unknown { background: var(--bg-secondary); color: var(--text-secondary); } .sprintGoalInline { font-size: 0.8125rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 400px; } /* ══════════════════════════════════════════════ VIEW TOOLBAR — tabs + filtros ══════════════════════════════════════════════ */ .viewToolbar { display: flex; align-items: center; justify-content: space-between; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); padding: 0 20px; flex-shrink: 0; height: 40px; } .viewTabs { display: flex; align-items: center; height: 100%; } .viewTab { display: flex; align-items: center; gap: 6px; padding: 0 14px; height: 100%; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: color 0.15s, border-color 0.15s; white-space: nowrap; } .viewTab:hover { color: var(--text-primary); } .viewTab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } .viewTab svg { flex-shrink: 0; } .viewToolbarRight { display: flex; align-items: center; gap: 8px; } .filterBadge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; background: white; color: var(--primary); border-radius: 10px; font-size: 0.5625rem; font-weight: 700; margin-left: 4px; } /* ══════════════════════════════════════════════ FILTERS PANEL ══════════════════════════════════════════════ */ .filtersPanel { display: flex; flex-direction: column; gap: 10px; padding: 12px 20px; background: var(--bg-card); border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .filtersGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .clearFiltersBtn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: none; border: none; color: var(--text-secondary); font-size: 0.8125rem; cursor: pointer; border-radius: 6px; transition: all 0.15s; align-self: flex-start; } .clearFiltersBtn:hover { background: var(--border-color); color: var(--text-primary); } /* ══════════════════════════════════════════════ CONTENT AREA ══════════════════════════════════════════════ */ .contentArea { flex: 1; overflow: hidden; display: flex; flex-direction: column; } /* ══════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════ */ @media (max-width: 1024px) { .stats { display: none; } .filtersGrid { grid-template-columns: 1fr 1fr; } .sprintGoalInline { max-width: 200px; } } @media (max-width: 768px) { .header { flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 14px; } .headerRight { width: 100%; justify-content: flex-end; flex-wrap: wrap; } .filtersGrid { grid-template-columns: 1fr; } .viewTab { padding: 0 10px; font-size: 0.75rem; } .sprintGoalInline { display: none; } } .burndownChart { width: 100%; height: 100%; min-height: 300px; } .chartTitle { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: var(--space-4); } .chartContainer { width: 100%; height: 100%; } .loading { display: flex; justify-content: center; align-items: center; min-height: 300px; } .loadingSpinner { width: 40px; height: 40px; border: 3px solid var(--slate-200); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; color: var(--text-tertiary); } .empty svg { width: 48px; height: 48px; margin-bottom: var(--space-3); opacity: 0.5; } .velocityChart { width: 100%; height: 100%; min-height: 300px; } .chartTitle { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: var(--space-4); } .chartContainer { width: 100%; height: 100%; } .loading { display: flex; justify-content: center; align-items: center; min-height: 300px; } .loadingSpinner { width: 40px; height: 40px; border: 3px solid var(--slate-200); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; color: var(--text-tertiary); } .empty svg { width: 48px; height: 48px; margin-bottom: var(--space-3); opacity: 0.5; } .occupancyChart { width: 100%; height: 100%; min-height: 300px; } .chartTitle { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: var(--space-4); } .chartContainer { width: 100%; height: 100%; } .loading { display: flex; justify-content: center; align-items: center; min-height: 300px; } .loadingSpinner { width: 40px; height: 40px; border: 3px solid var(--slate-200); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; color: var(--text-tertiary); } .empty svg { width: 48px; height: 48px; margin-bottom: var(--space-3); opacity: 0.5; } /* SprintMetricsPage.css */ .sprint-metrics-page { padding: var(--spacing-6); max-width: 1400px; margin: 0 auto; } /* Breadcrumb */ .breadcrumb { display: flex; align-items: center; gap: var(--spacing-2); margin-bottom: var(--spacing-4); font-size: var(--text-sm); color: var(--slate-600); } .breadcrumb-link { color: var(--slate-600); text-decoration: none; transition: color 0.2s ease; } .breadcrumb-link:hover { color: var(--primary-600); } .breadcrumb-current { color: var(--slate-900); font-weight: var(--font-medium); } /* Header */ .page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-8); gap: var(--spacing-4); } .page-header h1 { font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--slate-900); margin: 0 0 var(--spacing-1) 0; } .page-header p { font-size: var(--text-base); color: var(--slate-600); margin: 0; } .header-actions { display: flex; gap: var(--spacing-3); } /* Summary Cards */ .summary-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-4); margin-bottom: var(--spacing-6); } .summary-card { display: flex; align-items: center; gap: var(--spacing-4); } .summary-icon { width: 56px; height: 56px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; background-color: var(--slate-100); flex-shrink: 0; } .summary-content { flex: 1; min-width: 0; } .summary-label { font-size: var(--text-sm); color: var(--slate-600); margin-bottom: var(--spacing-1); } .summary-value { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--slate-900); margin-bottom: var(--spacing-1); } /* Charts Grid */ .charts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-6); margin-bottom: var(--spacing-6); } .chart-container { grid-column: span 1; } .chart-full-width { grid-column: 1 / -1; } .chart-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--slate-200); } .chart-title { display: flex; align-items: center; gap: var(--spacing-2); } .chart-title h2 { font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--slate-900); margin: 0; } .chart-title svg { color: var(--primary-600); } .chart-description { font-size: var(--text-sm); color: var(--slate-500); } .chart-content { padding: var(--spacing-4) 0; } /* Estimation Accuracy Table */ .accuracy-table { overflow-x: auto; } .accuracy-table table { width: 100%; border-collapse: collapse; } .accuracy-table thead { background-color: var(--slate-50); } .accuracy-table th { padding: var(--spacing-3) var(--spacing-4); text-align: left; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--slate-700); border-bottom: 2px solid var(--slate-200); } .accuracy-table tbody tr { border-bottom: 1px solid var(--slate-100); transition: background-color 0.2s ease; } .accuracy-table tbody tr:hover { background-color: var(--slate-50); } .accuracy-table td { padding: var(--spacing-3) var(--spacing-4); font-size: var(--text-sm); color: var(--slate-700); } .task-type { font-weight: var(--font-medium); color: var(--slate-900); } .diff-over { color: var(--error-600); font-weight: var(--font-medium); } .diff-under { color: var(--success-600); font-weight: var(--font-medium); } .diff-exact { color: var(--slate-500); } .accuracy-cell { display: flex; align-items: center; gap: var(--spacing-3); } .accuracy-value { font-weight: var(--font-semibold); color: var(--slate-900); min-width: 50px; } .accuracy-bar { flex: 1; height: 8px; background-color: var(--slate-100); border-radius: var(--radius-full); overflow: hidden; } .accuracy-fill { height: 100%; background: linear-gradient(90deg, var(--success-500), var(--success-600)); border-radius: var(--radius-full); transition: width 0.3s ease; } /* Loading Spinner */ .loading-spinner { display: flex; justify-content: center; align-items: center; min-height: 400px; font-size: var(--text-lg); color: var(--slate-600); } /* Responsive Design */ @media (max-width: 1200px) { .summary-cards { grid-template-columns: repeat(2, 1fr); } .charts-grid { grid-template-columns: 1fr; } .chart-container { grid-column: 1; } } @media (max-width: 768px) { .sprint-metrics-page { padding: var(--spacing-4); } .page-header { flex-direction: column; align-items: flex-start; } .header-actions { width: 100%; } .header-actions button { flex: 1; } .summary-cards { grid-template-columns: 1fr; } .chart-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-2); } .accuracy-table { font-size: var(--text-xs); } .accuracy-table th, .accuracy-table td { padding: var(--spacing-2); } .accuracy-cell { flex-direction: column; align-items: flex-start; gap: var(--spacing-2); } .accuracy-bar { width: 100%; } } /* SprintCapacityPage.css */ .sprint-capacity-page { padding: var(--spacing-6); max-width: 1400px; margin: 0 auto; } /* Breadcrumb */ .breadcrumb { display: flex; align-items: center; gap: var(--spacing-2); margin-bottom: var(--spacing-4); font-size: var(--text-sm); color: var(--slate-600); } .breadcrumb-link { color: var(--slate-600); text-decoration: none; transition: color 0.2s ease; } .breadcrumb-link:hover { color: var(--primary-600); } .breadcrumb-current { color: var(--slate-900); font-weight: var(--font-medium); } /* Header */ .page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-8); gap: var(--spacing-4); } .page-header h1 { font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--slate-900); margin: 0 0 var(--spacing-1) 0; } .page-header p { font-size: var(--text-base); color: var(--slate-600); margin: 0; } .header-actions { display: flex; gap: var(--spacing-3); } /* Summary Cards */ .summary-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-4); margin-bottom: var(--spacing-6); } .summary-card { display: flex; align-items: center; gap: var(--spacing-4); } .summary-icon { width: 56px; height: 56px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; background-color: var(--slate-100); flex-shrink: 0; } .summary-content { flex: 1; min-width: 0; } .summary-label { font-size: var(--text-sm); color: var(--slate-600); margin-bottom: var(--spacing-1); } .summary-value { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--slate-900); margin-bottom: var(--spacing-1); } .summary-subtext { font-size: var(--text-xs); color: var(--slate-500); } /* Capacity Table */ .capacity-table { overflow-x: auto; } .capacity-table table { width: 100%; border-collapse: collapse; } .capacity-table thead { background-color: var(--slate-50); } .capacity-table th { padding: var(--spacing-3) var(--spacing-4); text-align: left; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--slate-700); border-bottom: 2px solid var(--slate-200); } .capacity-table tbody tr { border-bottom: 1px solid var(--slate-100); transition: background-color 0.2s ease; } .capacity-table tbody tr:hover { background-color: var(--slate-50); } .capacity-table td { padding: var(--spacing-3) var(--spacing-4); font-size: var(--text-sm); color: var(--slate-700); vertical-align: middle; } /* Member Info */ .member-info { display: flex; align-items: center; gap: var(--spacing-3); } .member-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--primary-500), var(--primary-600)); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: var(--font-semibold); flex-shrink: 0; } .member-details { flex: 1; min-width: 0; } .member-name { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--slate-900); margin-bottom: var(--spacing-1); } .member-role { font-size: var(--text-xs); color: var(--slate-500); } /* Inline Edit */ .capacity-cell { display: flex; align-items: center; gap: var(--spacing-2); } .capacity-value { font-weight: var(--font-medium); color: var(--slate-900); } .edit-icon-button { padding: var(--spacing-1); border: none; background: transparent; color: var(--slate-400); cursor: pointer; border-radius: var(--radius-sm); transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .edit-icon-button:hover { background-color: var(--primary-50); color: var(--primary-600); } .inline-edit { display: flex; align-items: center; gap: var(--spacing-2); } .edit-input { width: 80px; padding: var(--spacing-2); border: 1px solid var(--primary-300); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--slate-900); background-color: var(--primary-50); transition: all 0.2s ease; } .edit-input:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-100); } .edit-actions { display: flex; gap: var(--spacing-1); } .edit-button { padding: var(--spacing-1); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .edit-button.save { background-color: var(--success-50); color: var(--success-600); border-color: var(--success-200); } .edit-button.save:hover { background-color: var(--success-100); border-color: var(--success-300); } .edit-button.save:disabled { opacity: 0.5; cursor: not-allowed; } .edit-button.cancel { background-color: var(--slate-100); color: var(--slate-600); border-color: var(--slate-200); } .edit-button.cancel:hover { background-color: var(--slate-200); border-color: var(--slate-300); } /* Utilization Cell */ .utilization-cell { display: flex; align-items: center; gap: var(--spacing-3); } .progress-bar { flex: 1; height: 8px; background-color: var(--slate-100); border-radius: var(--radius-full); overflow: hidden; } .progress-fill { height: 100%; border-radius: var(--radius-full); transition: width 0.3s ease; } .progress-fill.success { background: linear-gradient(90deg, var(--success-500), var(--success-600)); } .progress-fill.warning { background: linear-gradient(90deg, var(--warning-500), var(--warning-600)); } .progress-fill.error { background: linear-gradient(90deg, var(--error-500), var(--error-600)); } .utilization-percent { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--slate-700); min-width: 45px; text-align: right; } /* Info Footer */ .info-footer { margin-top: var(--spacing-6); padding: var(--spacing-4); background-color: var(--info-50); border: 1px solid var(--info-200); border-radius: var(--radius-md); } .info-footer p { font-size: var(--text-sm); color: var(--info-700); margin: 0 0 var(--spacing-2) 0; } .info-footer p:last-child { margin-bottom: 0; } .info-footer strong { font-weight: var(--font-semibold); } /* Loading Spinner */ .loading-spinner { display: flex; justify-content: center; align-items: center; min-height: 400px; font-size: var(--text-lg); color: var(--slate-600); } /* Responsive Design */ @media (max-width: 1200px) { .summary-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .sprint-capacity-page { padding: var(--spacing-4); } .page-header { flex-direction: column; align-items: flex-start; } .header-actions { width: 100%; } .header-actions button { flex: 1; } .summary-cards { grid-template-columns: 1fr; } .capacity-table { font-size: var(--text-xs); } .capacity-table th, .capacity-table td { padding: var(--spacing-2); } .member-info { flex-direction: column; align-items: flex-start; gap: var(--spacing-2); } .member-avatar { width: 32px; height: 32px; font-size: var(--text-xs); } .edit-input { width: 60px; } .utilization-cell { flex-direction: column; align-items: flex-start; gap: var(--spacing-1); } .progress-bar { width: 100%; } } .backlogPage { padding: var(--space-6); max-width: 1400px; margin: 0 auto; } .header { margin-bottom: var(--space-6); } .breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-4); } .breadcrumbLink { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); } .breadcrumbLink:hover { color: var(--text-link-hover); text-decoration: underline; } .breadcrumbSeparator { color: var(--text-tertiary); } .headerTop { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-4); } .titleSection { flex: 1; } .title { font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--text-primary); margin-bottom: var(--space-2); } .subtitle { font-size: var(--text-base); color: var(--text-secondary); } .actions { display: flex; gap: var(--space-3); align-items: center; } .viewToggle { display: flex; gap: 0; border: 1px solid var(--border-color); border-radius: var(--border-radius-md); overflow: hidden; } .viewToggle button { border-radius: 0; border: none; } .viewToggle button:not(:last-child) { border-right: 1px solid var(--border-color); } .filters { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; } .filterGroup { display: flex; gap: var(--space-3); align-items: center; } .tasksContainer { background: var(--bg-card); border-radius: var(--border-radius-lg); border: 1px solid var(--border-color); overflow: hidden; } .tasksList { display: flex; flex-direction: column; } .taskRow { display: grid; grid-template-columns: 2fr 1fr 1fr 0.6fr 0.9fr; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border-color); align-items: center; cursor: pointer; transition: background-color var(--transition-fast); } .searchInput { width: 100%; min-width: 280px; border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--text-primary); background: var(--bg-primary); } .taskRow:hover { background-color: var(--bg-hover); } .taskRow:last-child { border-bottom: none; } .checkbox { width: 20px; height: 20px; cursor: pointer; accent-color: var(--primary); } .code { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-tertiary); text-transform: uppercase; } .taskTitle { display: flex; flex-direction: column; gap: var(--space-1); } .taskName { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); } .taskTags { display: flex; gap: var(--space-1); flex-wrap: wrap; } .tag { font-size: var(--text-xs); padding: 2px 6px; border-radius: var(--border-radius-sm); background: var(--slate-100); color: var(--slate-700); } .assignee { display: flex; align-items: center; gap: var(--space-2); } .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .avatarPlaceholder { width: 32px; height: 32px; border-radius: 50%; background: var(--slate-200); display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--slate-600); } .estimate { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--primary-600); } /* Grouped View */ .taskGroup { border-bottom: 1px solid var(--border-color); } .groupHeader { display: grid; grid-template-columns: 24px 120px 1fr 100px 120px; gap: var(--space-3); padding: var(--space-4); background: var(--slate-50); font-weight: var(--font-semibold); align-items: center; transition: background-color var(--transition-fast); } .groupHeader:hover { background: var(--slate-100); } .groupChevron { color: var(--slate-500); transition: transform var(--transition-fast); } .groupTitle { font-size: var(--text-base); color: var(--text-primary); } .groupCount { font-size: var(--text-sm); color: var(--slate-600); font-weight: var(--font-normal); } .groupTasks { background: var(--bg-card); } .taskRowIndented { padding-left: var(--space-12); background: var(--bg-card); } .taskRowIndented:hover { background: var(--bg-hover); } .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12); color: var(--text-tertiary); } .empty svg { width: 64px; height: 64px; margin-bottom: var(--space-4); opacity: 0.5; } .emptyText { font-size: var(--text-lg); font-weight: var(--font-medium); color: var(--text-secondary); margin-bottom: var(--space-2); } .emptyDescription { font-size: var(--text-sm); color: var(--text-tertiary); } .loading { display: flex; justify-content: center; align-items: center; padding: var(--space-12); } .loadingSpinner { width: 48px; height: 48px; border: 4px solid var(--slate-200); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .bulkActions { display: flex; gap: var(--space-3); padding: var(--space-4); background: var(--primary-50); border-bottom: 1px solid var(--primary-200); align-items: center; } .selectedCount { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); margin-right: var(--space-4); } @media (max-width: 1200px) { .taskRow { grid-template-columns: 1.7fr 1fr 1fr 0.7fr 0.9fr; } } @media (max-width: 768px) { .filters { flex-direction: column; } .filterGroup { width: 100%; } .taskRow { grid-template-columns: 1fr; gap: var(--space-2); } .actions { flex-direction: column; width: 100%; } .actions button { width: 100%; } } .taskDetailPage { padding: var(--space-6); max-width: 1200px; margin: 0 auto; } .breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-4); } .breadcrumbLink { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); } .breadcrumbLink:hover { color: var(--text-link-hover); text-decoration: underline; } .breadcrumbSeparator { color: var(--text-tertiary); } .header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-6); } .titleSection { flex: 1; } .codeAndType { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); } .code { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-tertiary); text-transform: uppercase; } .title { font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--text-primary); margin-bottom: var(--space-3); } .metaInfo { display: flex; gap: var(--space-4); flex-wrap: wrap; } .metaItem { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); } .metaItem svg { color: var(--text-tertiary); } .actions { display: flex; gap: var(--space-3); } .content { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-6); } .mainColumn { display: flex; flex-direction: column; gap: var(--space-6); } .sidebar { display: flex; flex-direction: column; gap: var(--space-4); } .section { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); padding: var(--space-5); } .sectionTitle { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); } .description { font-size: var(--text-base); line-height: 1.6; color: var(--text-primary); white-space: pre-wrap; } .empty { font-size: var(--text-sm); color: var(--text-tertiary); font-style: italic; } .infoGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .infoItem { display: flex; flex-direction: column; gap: var(--space-1); } .infoLabel { font-size: var(--text-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .infoValue { font-size: var(--text-sm); color: var(--text-primary); font-weight: var(--font-medium); } .quickFormGrid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-3); } .quickField { display: flex; flex-direction: column; gap: var(--space-1); } .quickField select, .quickField input { width: 100%; border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--text-primary); background: var(--bg-primary); } .listBlock { display: flex; flex-direction: column; gap: var(--space-2); } .listRow, .listRowButton { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); background: var(--bg-primary); } .listRowButton { width: 100%; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); } .listRowButton:hover { border-color: var(--primary-400); background: var(--primary-50); } .listRowTitle { font-size: var(--text-sm); color: var(--text-primary); font-weight: var(--font-medium); } .listRowMeta { font-size: var(--text-xs); color: var(--text-secondary); } .dependencyGroups { display: flex; flex-direction: column; gap: var(--space-3); } .dependencyHeaderActions { display: flex; justify-content: flex-end; margin-bottom: var(--space-3); } .dependencyGroup { display: flex; flex-direction: column; gap: var(--space-2); } .dependencyItem { padding: var(--space-2) var(--space-3); border-radius: var(--border-radius-md); border: 1px solid var(--border-color); font-size: var(--text-sm); color: var(--text-primary); background: var(--bg-primary); } .dependencyItemRow { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: var(--space-2) var(--space-3); background: var(--bg-primary); } .dependencyItemText { display: flex; flex-direction: column; gap: 2px; } .dependencyItemText span { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); } .dependencyItemText small { font-size: var(--text-xs); color: var(--text-secondary); } .dependencyItemActions { display: flex; gap: var(--space-2); } .dependencyItemActions button { border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); border-radius: var(--border-radius-sm); padding: 4px 8px; font-size: var(--text-xs); cursor: pointer; } .dependencyItemActions button.danger { color: var(--danger-700); border-color: var(--danger-300); background: var(--danger-50); } .time-entry-modal-form { display: flex; flex-direction: column; gap: var(--space-4); } .time-entry-modal-footer { display: flex; justify-content: flex-end; gap: var(--space-3); } .assigneeInfo { display: flex; align-items: center; gap: var(--space-3); } .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .avatarPlaceholder { width: 48px; height: 48px; border-radius: 50%; background: var(--slate-200); display: flex; align-items: center; justify-content: center; font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--slate-600); } .assigneeName { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--text-primary); } .tags { display: flex; flex-wrap: wrap; gap: var(--space-2); } .tag { font-size: var(--text-sm); padding: var(--space-1) var(--space-3); border-radius: var(--border-radius-full); background: var(--slate-100); color: var(--slate-700); } .priorityIndicator { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--border-radius-md); font-size: var(--text-sm); font-weight: var(--font-medium); } .priorityIndicator-critical { background: var(--danger-100); color: var(--danger-700); } .priorityIndicator-high { background: var(--warning-100); color: var(--warning-700); } .priorityIndicator-medium { background: var(--info-100); color: var(--info-700); } .priorityIndicator-low { background: var(--slate-100); color: var(--slate-700); } .loading { display: flex; justify-content: center; align-items: center; padding: var(--space-12); } .loadingSpinner { width: 48px; height: 48px; border: 4px solid var(--slate-200); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 968px) { .content { grid-template-columns: 1fr; } .sidebar { order: -1; } } @media (max-width: 768px) { .header { flex-direction: column; gap: var(--space-4); } .actions { width: 100%; flex-direction: column; } .actions button { width: 100%; } .infoGrid { grid-template-columns: 1fr; } } .taskFormPage { padding: var(--space-6); max-width: 900px; margin: 0 auto; } .header { margin-bottom: var(--space-6); } .breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-4); } .breadcrumbLink { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); } .breadcrumbLink:hover { color: var(--text-link-hover); text-decoration: underline; } .breadcrumbSeparator { color: var(--text-tertiary); } .title { font-size: var(--text-4xl); font-weight: var(--font-bold); color: var(--text-primary); margin-bottom: var(--space-2); } .subtitle { font-size: var(--text-base); color: var(--text-secondary); } .formCard { background-color: var(--bg-card); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); padding: var(--space-6); } .formSection { margin-bottom: var(--space-8); } .formSection:last-child { margin-bottom: 0; } .sectionTitle { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-color); } .formRow { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); } .formRow-single { grid-template-columns: 1fr; } .formRow-triple { grid-template-columns: repeat(3, 1fr); } .formActions { display: flex; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--border-color); } .loading { display: flex; justify-content: center; align-items: center; padding: var(--space-12); } .loadingSpinner { width: 48px; height: 48px; border: 4px solid var(--slate-200); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .textarea { width: 100%; min-height: 120px; padding: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); font-size: var(--text-sm); font-family: inherit; line-height: 1.5; resize: vertical; transition: border-color var(--transition-fast); } .textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .textarea-error { border-color: var(--danger); } .label { display: block; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); margin-bottom: var(--space-2); } .label-required::after { content: '*'; color: var(--danger); margin-left: var(--space-1); } .errorMessage { font-size: var(--text-xs); color: var(--danger); margin-top: var(--space-1); } @media (max-width: 768px) { .formRow, .formRow-triple { grid-template-columns: 1fr; } .formActions { flex-direction: column-reverse; } .formActions button { width: 100%; } } /* TimeEntriesPage.css */ .time-entries-page { padding: var(--spacing-6); max-width: 1200px; margin: 0 auto; } /* Breadcrumb */ .breadcrumb { display: flex; align-items: center; gap: var(--spacing-2); margin-bottom: var(--spacing-4); font-size: var(--text-sm); color: var(--slate-600); } .breadcrumb-link { color: var(--slate-600); text-decoration: none; transition: color 0.2s ease; } .breadcrumb-link:hover { color: var(--primary-600); } .breadcrumb-current { color: var(--slate-900); font-weight: var(--font-medium); } /* Header */ .page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-6); gap: var(--spacing-4); } .page-header h1 { font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--slate-900); margin: 0 0 var(--spacing-1) 0; } .page-header p { font-size: var(--text-base); color: var(--slate-600); margin: 0; } .time-entries-header-actions { display: flex; gap: var(--spacing-3); } /* Week Selector */ .week-selector { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); padding: var(--spacing-2) 0; } .week-nav-button { padding: var(--spacing-2); border: 1px solid var(--slate-200); border-radius: var(--radius-md); background-color: var(--white); color: var(--slate-600); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .week-nav-button:hover { background-color: var(--slate-50); border-color: var(--slate-300); color: var(--slate-900); } .week-info { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--spacing-2); } .week-label { font-size: var(--text-sm); color: var(--slate-600); font-weight: var(--font-medium); } .week-range { font-size: var(--text-lg); color: var(--slate-900); font-weight: var(--font-semibold); } .week-today-button { padding: var(--spacing-1) var(--spacing-3); border: 1px solid var(--primary-200); border-radius: var(--radius-md); background-color: var(--primary-50); color: var(--primary-700); font-size: var(--text-sm); font-weight: var(--font-medium); cursor: pointer; transition: all 0.2s ease; } .week-today-button:hover { background-color: var(--primary-100); border-color: var(--primary-300); } .week-total { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-4); background-color: var(--success-50); border: 1px solid var(--success-200); border-radius: var(--radius-md); } .week-total svg { color: var(--success-600); } .week-total-hours { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--success-700); } .week-total-label { font-size: var(--text-sm); color: var(--success-600); } /* Active Timer Card */ .active-timer-card { padding: var(--spacing-4); background: linear-gradient(135deg, var(--primary-50), var(--primary-100)); border: 2px solid var(--primary-300); border-radius: var(--radius-lg); } .active-timer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-4); } .active-timer-badge { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3); background-color: var(--primary-600); color: var(--white); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--font-semibold); } .timer-icon-pulse { animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .timer-toggle-button { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-4); border: 1px solid var(--error-300); border-radius: var(--radius-md); background-color: var(--error-50); color: var(--error-700); font-size: var(--text-sm); font-weight: var(--font-medium); cursor: pointer; transition: all 0.2s ease; } .timer-toggle-button:hover { background-color: var(--error-100); border-color: var(--error-400); } .active-timer-content { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-4); margin-bottom: var(--spacing-3); } .timer-task { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-2); } .timer-task h3 { font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--slate-900); margin: 0; } .timer-display { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); background-color: var(--white); border: 1px solid var(--primary-200); border-radius: var(--radius-md); } .timer-display svg { color: var(--primary-600); } .timer-hours { font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--primary-700); } .active-timer-description { font-size: var(--text-sm); color: var(--slate-600); line-height: 1.5; } /* Entries by Day */ .entries-by-day { display: flex; flex-direction: column; gap: var(--spacing-4); margin-top: var(--spacing-6); } .day-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--spacing-3); border-bottom: 2px solid var(--slate-200); margin-bottom: var(--spacing-3); } .day-title { display: flex; align-items: center; gap: var(--spacing-2); } .day-title svg { color: var(--primary-600); } .day-title h3 { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--slate-900); margin: 0; text-transform: capitalize; } .day-title h3.today { color: var(--primary-700); } .day-total { display: flex; align-items: center; gap: var(--spacing-2); } .day-total-hours { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--slate-900); } /* Day Entries */ .day-entries { display: flex; flex-direction: column; gap: var(--spacing-3); } .entry-item { display: flex; align-items: flex-start; gap: var(--spacing-3); padding: var(--spacing-3); background-color: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius-md); transition: all 0.2s ease; } .entry-item:hover { background-color: var(--white); box-shadow: var(--shadow-sm); } .entry-type-icon { width: 32px; height: 32px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .timer-icon { color: var(--info-600); background-color: var(--info-100); padding: var(--spacing-2); border-radius: var(--radius-md); } .manual-icon { color: var(--warning-600); background-color: var(--warning-100); padding: var(--spacing-2); border-radius: var(--radius-md); } .entry-content { flex: 1; min-width: 0; } .entry-header { display: flex; align-items: center; gap: var(--spacing-2); margin-bottom: var(--spacing-1); } .entry-header h4 { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--slate-900); margin: 0; } .entry-description { font-size: var(--text-sm); color: var(--slate-600); margin: 0; line-height: 1.5; } .entry-hours { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--slate-900); min-width: 60px; text-align: right; } .entry-actions { display: flex; gap: var(--spacing-1); } .entry-action-button { padding: var(--spacing-1); border: 1px solid var(--slate-200); border-radius: var(--radius-sm); background-color: var(--white); color: var(--slate-600); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .entry-action-button:hover { background-color: var(--primary-50); border-color: var(--primary-300); color: var(--primary-600); } .entry-action-button.delete:hover { background-color: var(--error-50); border-color: var(--error-300); color: var(--error-600); } /* Empty Day */ .empty-day { padding: var(--spacing-8) var(--spacing-4); text-align: center; } .empty-day p { font-size: var(--text-sm); color: var(--slate-500); margin: 0; } .time-entry-modal-form { display: flex; flex-direction: column; gap: var(--spacing-4); } .time-entry-modal-footer { display: flex; justify-content: flex-end; gap: var(--spacing-3); } /* Loading Spinner */ .loading-spinner { display: flex; justify-content: center; align-items: center; min-height: 400px; font-size: var(--text-lg); color: var(--slate-600); } /* Responsive Design */ @media (max-width: 768px) { .time-entries-page { padding: var(--spacing-4); } .page-header { flex-direction: column; align-items: flex-start; } .page-header button { width: 100%; } .week-selector { flex-wrap: wrap; } .week-info { flex-basis: 100%; order: -1; margin-bottom: var(--spacing-2); } .week-total { flex-basis: 100%; justify-content: center; } .active-timer-content { flex-direction: column; align-items: flex-start; } .timer-display { width: 100%; justify-content: center; } .entry-item { flex-wrap: wrap; } .entry-hours { flex-basis: 100%; text-align: left; margin-top: var(--spacing-2); } .entry-actions { flex-basis: 100%; justify-content: flex-end; } } /* Global Time Entries Page Styles */ .global-time-entries-page { padding: 32px 40px; max-width: 1600px; margin: 0 auto; background: #F8FAFC; min-height: 100vh; } /* Breadcrumb */ .breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 14px; color: #64748B; } .breadcrumb-link { color: #64748B; text-decoration: none; transition: color 0.2s; } .breadcrumb-link:hover { color: #6366F1; } .breadcrumb-current { color: #0F172A; font-weight: 500; } /* Page Header */ .page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; } .header-content { display: flex; gap: 16px; align-items: flex-start; } .header-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; } .page-title { font-size: 32px; font-weight: 700; color: #0F172A; margin: 0 0 4px 0; line-height: 1.2; } .page-description { font-size: 15px; color: #64748B; margin: 0; } .header-actions { display: flex; gap: 12px; } /* Statistics Grid */ .time-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px; } .stat-card { padding: 24px; } .stat-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .stat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 8px; } .stat-icon-primary { background: #EEF2FF; color: #6366F1; } .stat-icon-success { background: #DCFCE7; color: #16A34A; } .stat-icon-purple { background: #F3E8FF; color: #8B5CF6; } .stat-icon-info { background: #E0F2FE; color: #0EA5E9; } .stat-label { font-size: 14px; font-weight: 500; color: #64748B; } .stat-value { font-size: 32px; font-weight: 700; color: #0F172A; margin-bottom: 4px; } .stat-detail { font-size: 13px; color: #64748B; } /* Filters Card */ .filters-card { padding: 24px; margin-bottom: 24px; } .filters-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; color: #0F172A; } .filters-header h3 { font-size: 16px; font-weight: 600; margin: 0; } .filters-content { display: flex; flex-direction: column; gap: 20px; } .filter-group { display: flex; flex-direction: column; gap: 8px; } .filter-group label { font-size: 14px; font-weight: 500; color: #475569; } .date-range-selector { display: flex; gap: 8px; background: #F1F5F9; padding: 4px; border-radius: 8px; width: fit-content; } .time-type-selector { margin-top: 12px; } .range-button { padding: 8px 16px; border: none; background: transparent; color: #64748B; font-size: 14px; font-weight: 500; border-radius: 6px; cursor: pointer; transition: all 0.2s; } .range-button:hover { background: #E2E8F0; } .range-button.active { background: #6366F1; color: white; } .custom-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .date-input-group { display: flex; flex-direction: column; gap: 8px; } .date-input { padding: 10px 14px; border: 1px solid #E2E8F0; border-radius: 8px; font-size: 14px; color: #0F172A; background: white; transition: all 0.2s; } .date-input:focus { outline: none; border-color: #6366F1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } .filter-info { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #F8FAFC; border-radius: 8px; font-size: 14px; color: #475569; } /* Time Entries List */ .time-entries-list { display: flex; flex-direction: column; gap: 20px; } /* Empty State */ .empty-state { padding: 64px 32px; text-align: center; } .empty-icon { color: #CBD5E1; margin-bottom: 16px; } .empty-state h3 { font-size: 20px; font-weight: 600; color: #0F172A; margin: 0 0 8px 0; } .empty-state p { font-size: 15px; color: #64748B; margin: 0 0 24px 0; } /* Date Group Card */ .date-group-card { padding: 0; overflow: hidden; } .date-group-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; background: #F8FAFC; border-bottom: 1px solid #E2E8F0; } .date-info { display: flex; flex-direction: column; gap: 2px; } .date-title { font-size: 18px; font-weight: 600; color: #0F172A; margin: 0; text-transform: capitalize; } .date-subtitle { font-size: 13px; color: #64748B; text-transform: capitalize; } .date-total { display: flex; align-items: baseline; gap: 8px; } .total-label { font-size: 13px; color: #64748B; } .total-value { font-size: 20px; font-weight: 700; color: #6366F1; } /* Entries List */ .entries-list { display: flex; flex-direction: column; } .entry-item { border-bottom: 1px solid #E2E8F0; } .entry-item:last-child { border-bottom: none; } .entry-main { display: grid; grid-template-columns: 4px 1fr auto auto auto; gap: 16px; align-items: center; padding: 20px 24px; transition: background-color 0.2s; } .entry-main:hover { background-color: #F8FAFC; } .entry-indicator { width: 4px; height: 48px; border-radius: 2px; align-self: stretch; } .entry-content { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .entry-task { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .task-code { font-size: 13px; font-weight: 600; color: #6366F1; text-decoration: none; padding: 4px 8px; background: #EEF2FF; border-radius: 6px; transition: all 0.2s; flex-shrink: 0; } .task-code:hover { background: #6366F1; color: white; } .task-title { font-size: 15px; font-weight: 500; color: #0F172A; } .entry-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: #64748B; } .project-name { font-weight: 500; color: #475569; } .meta-separator { color: #CBD5E1; } .entry-time { color: #64748B; } .entry-description { color: #64748B; font-style: italic; } .entry-badges { display: flex; gap: 8px; flex-wrap: wrap; } .entry-duration { font-size: 18px; font-weight: 700; color: #0F172A; min-width: 80px; text-align: right; } .entry-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.2s; } .entry-main:hover .entry-actions { opacity: 1; } .action-button { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: #64748B; border-radius: 6px; cursor: pointer; transition: all 0.2s; } .action-button:hover { background: #F1F5F9; color: #0F172A; } .action-button-danger:hover { background: #FEE2E2; color: #DC2626; } /* Loading Spinner */ .loading-spinner { display: flex; justify-content: center; align-items: center; min-height: 400px; font-size: 16px; color: #64748B; } .time-entry-modal-form { display: flex; flex-direction: column; gap: 16px; } .time-entry-modal-footer { display: flex; justify-content: flex-end; gap: 12px; } /* Responsive */ @media (max-width: 1200px) { .time-stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .global-time-entries-page { padding: 20px 16px; } .page-header { flex-direction: column; gap: 20px; } .header-actions { width: 100%; } .header-actions button { flex: 1; } .time-stats-grid { grid-template-columns: 1fr; } .custom-dates { grid-template-columns: 1fr; } .entry-main { grid-template-columns: 4px 1fr; gap: 12px; } .entry-badges, .entry-duration { grid-column: 2; } .entry-actions { grid-column: 2; opacity: 1; justify-content: flex-end; } } .task-statuses-page { padding: var(--spacing-6); max-width: 1200px; margin: 0 auto; } .breadcrumb { display: flex; align-items: center; gap: var(--spacing-2); margin-bottom: var(--spacing-4); font-size: var(--text-sm); color: var(--slate-600); } .breadcrumb-link { color: var(--slate-600); text-decoration: none; } .breadcrumb-current { color: var(--slate-900); font-weight: var(--font-medium); } .task-statuses-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacing-4); margin-bottom: var(--spacing-6); } .task-statuses-header h1 { margin: 0 0 var(--spacing-1) 0; } .task-statuses-header p { margin: 0; color: var(--slate-600); } .task-statuses-filters { padding: var(--spacing-2) 0; } .task-statuses-loading, .task-statuses-empty { padding: var(--spacing-8); text-align: center; color: var(--slate-600); } .task-statuses-table-wrapper { overflow-x: auto; } .task-statuses-table { width: 100%; border-collapse: collapse; } .task-statuses-table th, .task-statuses-table td { padding: var(--spacing-3) var(--spacing-2); border-bottom: 1px solid var(--slate-200); text-align: left; } .color-cell { display: inline-flex; align-items: center; gap: var(--spacing-2); } .color-dot { width: 12px; height: 12px; border-radius: 999px; border: 1px solid var(--slate-300); } .row-actions { display: flex; gap: var(--spacing-2); } .row-actions button { border: 1px solid var(--slate-300); border-radius: var(--radius-sm); background: var(--white); color: var(--slate-700); padding: 6px; cursor: pointer; } .row-actions button.danger { border-color: var(--error-300); color: var(--error-700); background: var(--error-50); } .task-statuses-modal-form { display: flex; flex-direction: column; gap: var(--spacing-4); } .task-statuses-modal-footer { display: flex; justify-content: flex-end; gap: var(--spacing-3); } /* ======================================== SPRINTS PAGE ======================================== */ .sprints-page { padding: var(--space-xlarge); max-width: var(--layout-page-max-width); margin: 0 auto; background: var(--bg-secondary); min-height: 100vh; } /* ========== HEADER ========== */ .sprints-page .page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-large); margin-bottom: var(--space-large); padding: 0 var(--space-medium); } .sprints-page .page-header h1 { margin: 0; font-size: var(--page-header-title-size); font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: var(--line-height-tight); } /* ========== CARD ========== */ .sprints-page > .card { background: var(--bg-card); border-radius: var(--radius-large); box-shadow: var(--shadow-small); border: 1px solid var(--border-color); overflow: hidden; padding: 0 !important; } /* ========== TOOLBAR ========== */ .sprints-toolbar { display: flex; align-items: center; gap: var(--space-medium); padding: var(--space-xlarge) var(--space-xlarge) var(--space-large) var(--space-xlarge); background: var(--bg-card); } .sprints-toolbar > div:first-child { flex: 1; margin: 0; } /* SearchInput igual que los Selects */ .sprints-toolbar .searchInput { height: 50px !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; background: #ffffff !important; padding: 0 16px !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .sprints-toolbar .searchInput:hover { border-color: #d1d5db !important; } .sprints-toolbar .searchInput:focus-within { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important; } .sprints-toolbar .searchInput__field { font-size: 14px !important; } .sprint-project-filter, .sprint-status-filter { min-width: 220px; flex-shrink: 0; } .sprint-project-filter .select-container, .sprint-status-filter .select-container { margin: 0; } .sprint-project-filter .select-wrapper, .sprint-status-filter .select-wrapper { height: 50px !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; background: #ffffff !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .sprint-project-filter .select-wrapper:hover, .sprint-status-filter .select-wrapper:hover { border-color: #d1d5db !important; } .sprint-project-filter .select-wrapper:focus-within, .sprint-status-filter .select-wrapper:focus-within { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important; outline: none !important; } .sprint-project-filter .select-input, .sprint-status-filter .select-input { height: 48px !important; padding: 12px 40px 12px 16px !important; font-size: 14px !important; border: none !important; border-radius: 8px !important; background: transparent !important; line-height: 1.5 !important; } /* ========== TABLE CELLS ========== */ .sprint-name-cell { display: flex; align-items: center; gap: 10px; } .sprint-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-medium); background: var(--primary-light, #ede9fe); color: var(--primary); flex-shrink: 0; } .sprint-name { font-weight: var(--font-weight-semibold); color: var(--text-primary); font-size: var(--font-size-medium); } .sprint-project-name { font-size: 0.9em; color: var(--text-primary); } .sprint-empty { color: var(--text-secondary); opacity: 0.5; } .sprint-dates { display: flex; flex-direction: column; gap: 4px; } .sprint-date-item { display: flex; align-items: center; gap: 5px; font-size: 0.85em; color: var(--text-secondary); } .sprint-date-item svg { opacity: 0.5; flex-shrink: 0; } .sprint-capacity, .sprint-velocity { display: flex; align-items: center; gap: 5px; font-size: 0.9em; color: var(--text-primary); } .sprint-capacity svg, .sprint-velocity svg { opacity: 0.5; } /* ========== EMPTY STATE ========== */ .sprints-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-small); padding: 5rem 2rem; color: var(--text-secondary); text-align: center; } .sprints-empty-icon { opacity: 0.25; color: var(--text-secondary); margin-bottom: var(--space-small); } .sprints-empty-state h3 { margin: 0; font-size: 1.1rem; font-weight: var(--font-weight-semibold); color: var(--text-primary); } .sprints-empty-state p { margin: 0; font-size: var(--font-size-small); color: var(--text-secondary); } /* ========== TABLE HEADER ========== */ .sprints-page thead { background: var(--table-header-bg); border-bottom: 1px solid var(--border-color); border-top: 1px solid var(--border-color); } .sprints-page thead th { padding: var(--table-header-padding-vertical) var(--table-cell-padding-horizontal); text-align: left; font-size: var(--table-header-font-size); font-weight: var(--font-weight-semibold); color: var(--table-header-text); text-transform: uppercase; letter-spacing: 0.05em; } /* ========== TABLE BODY ========== */ .sprints-page tbody tr { border-bottom: 1px solid var(--border-color); transition: background-color var(--transition-fast); cursor: pointer; } .sprints-page tbody tr:hover { background-color: var(--table-row-hover-bg); } .sprints-page tbody td { padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal); vertical-align: middle; } /* ========== PAGINATION ========== */ .sprints-page .pagination { display: flex; justify-content: space-between; align-items: center; padding: var(--pagination-padding-vertical) var(--pagination-padding-horizontal); background: var(--bg-card); } /* ========== RESPONSIVE ========== */ @media (max-width: 1024px) { .sprints-toolbar { flex-wrap: wrap; } .sprint-project-filter, .sprint-status-filter { min-width: 180px; } } @media (max-width: 768px) { .sprints-page { padding: var(--space-medium); } .sprints-page .page-header { flex-direction: column; align-items: flex-start; } .sprints-toolbar { flex-direction: column; align-items: stretch; } .sprint-project-filter, .sprint-status-filter { min-width: auto; } .sprints-page .pagination { flex-direction: column; gap: var(--space-small); padding: var(--space-medium); } }