@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --bg-primary: #121417;
    --bg-secondary: #1E2024;
    --bg-tertiary: #2B2D31;
    --bg-hover: #323539;
    --text-primary: #FFFFFF;
    --text-secondary: #A0A5AD;
    --text-muted: #6B7280;
    --accent: #579BFC;
    --accent-hover: #437DD4;
    --border: #3A3D42;
    --glass-bg: rgba(30, 32, 36, 0.85);
    --glass-border: rgba(255, 255, 255, 0.08);
    --success: #00c875;
    --warning: #fdab3d;
    --danger: #e2445c;
    --purple: #a25ddc;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ==========================================
   SCROLLBAR 
   ========================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ==========================================
   SIDEBAR 
   ========================================== */
.sidebar {
    width: 320px;
    min-width: 160px;
    max-width: 900px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    z-index: 10;
    position: relative;
    overflow: hidden;
}

.sidebar-resizer {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 100;
    transition: background 0.2s ease;
    border-right: 2px solid transparent;
}

.sidebar-resizer:hover, .sidebar-resizer.resizing {
    background: rgba(87, 155, 252, 0.3);
    border-right: 2px solid #579BFC;
}

.sidebar-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--glass-border);
}

.logo {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #579BFC, #a25ddc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.logo-sub {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 1px;
}

.sidebar-section {
    padding: 8px 12px;
    overflow-y: auto;
}

.sidebar-section:last-child {
    flex: 1;
}

.section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.nav-item {
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 2px;
}

.nav-item:hover { background-color: var(--bg-hover); color: var(--text-primary); }
.nav-item.active { background-color: var(--accent); color: white; }
.nav-item .icon { font-size: 16px; width: 20px; text-align: center; }

/* SUB-BOARD SIDEBAR STYLES */
.nav-item.sub-board {
    margin-left: calc(var(--tree-depth, 1) * 16px);
    font-size: 13px;
    padding: 7px 12px;
    border-left: 2px solid var(--border);
    border-radius: 0 6px 6px 0;
}

.nav-item.sub-board:hover {
    border-left-color: var(--accent);
}

.sidebar-tree-toggle,
.sidebar-tree-toggle-spacer {
    width: 18px;
    min-width: 18px;
    height: 20px;
}

.sidebar-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 13px;
}

.sidebar-tree-toggle:hover {
    background: rgba(255,255,255,0.1);
}

.sidebar-tree-toggle-spacer {
    display: inline-block;
}

.sidebar-tree-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-tree-children.is-collapsed {
    display: none;
}

.sidebar-subboard-node {
    position: relative;
}

.sidebar-group-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    margin: 1px 0 1px calc(48px + (var(--tree-depth, 0) * 16px));
    padding: 5px 9px;
    border-left: 1px solid var(--border);
    border-radius: 0 6px 6px 0;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.sidebar-group-item:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
    border-left-color: var(--accent);
}

.sidebar-group-item.active {
    color: var(--accent);
    background: rgba(87, 155, 252, 0.12);
    border-left-color: var(--accent);
}

.sidebar-group-dot {
    width: 8px;
    min-width: 8px;
    height: 8px;
    border-radius: 50%;
}

.group-container.sidebar-target-highlight {
    animation: sidebarTargetPulse 1.2s ease;
}

@keyframes sidebarTargetPulse {
    0%, 100% { box-shadow: none; }
    35% { box-shadow: 0 0 0 2px var(--accent), 0 0 24px rgba(87, 155, 252, 0.3); }
}

.add-subboard-btn {
    margin-left: auto;
    opacity: 0;
    font-size: 14px;
    color: var(--text-muted);
    transition: opacity 0.15s;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-item:hover .add-subboard-btn {
    opacity: 1;
}

.add-subboard-btn:hover {
    color: var(--accent);
}

/* ==========================================
   MAIN CONTENT 
   ========================================== */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Top Bar */
.top-bar {
    padding: 18px 30px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
}

.board-title-area { display: flex; align-items: center; gap: 15px; }

.board-title {
    font-size: 24px;
    font-weight: 700;
}

.board-desc {
    color: var(--text-muted);
    font-size: 13px;
}

/* Toolbar */
.toolbar {
    padding: 12px 30px;
    display: flex;
    gap: 10px;
    border-bottom: 1px solid var(--glass-border);
    flex-wrap: wrap;
}

/* Board Content */
.board-content {
    flex: 1;
    overflow: auto;
    padding: 25px 30px 100px 30px;
}

/* ==========================================
   BUTTONS 
   ========================================== */
.btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #c73549; }
.btn-success { background: var(--success); color: white; }
.btn-success:hover { background: #00a862; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-icon { padding: 6px 8px; background: transparent; color: var(--text-muted); border: none; cursor: pointer; border-radius: 6px; font-size: 14px; }
.btn-icon:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ==========================================
   GROUPS AND DYNAMIC TABLE 
   ========================================== */
.group-container {
    margin-bottom: 30px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: visible;
    box-shadow: var(--shadow);
    animation: slideUp 0.3s ease forwards;
    position: relative;
    z-index: 1;
    width: fit-content;
    min-width: 100%;
    box-sizing: border-box;
}

.group-header {
    padding: 12px 20px;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border);
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    transition: background 0.15s;
}

.group-header:hover { background: rgba(255,255,255,0.02); }

.group-header .group-actions { margin-left: auto; display: flex; gap: 5px; opacity: 0; transition: opacity 0.15s; }
.group-header:hover .group-actions { opacity: 1; }

.color-indicator { width: 14px; height: 14px; border-radius: 4px; }

.group-count {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 5px;
}

.dynamic-table { width: 100%; border-collapse: collapse; }

.dynamic-table th {
    text-align: left;
    padding: 10px 15px;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    white-space: nowrap;
    position: relative;
}

.dynamic-table th:last-child { border-right: none; }

.dynamic-table td {
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    border-right: 1px solid rgba(255,255,255,0.04);
    height: 40px;
    font-size: 14px;
}

.dynamic-table td:last-child { border-right: none; }
.dynamic-table tbody tr { transition: background 0.1s; }
.dynamic-table tbody tr:hover { background: rgba(255,255,255,0.02); }

.column-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 10;
}
.column-resizer:hover, .column-resizer.resizing {
    background-color: var(--accent);
}

/* Item Name Cell */
.item-name-cell {
    padding: 0 10px !important;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
}

.parent-item-row.has-subitems .item-name-cell {
    cursor: pointer;
}

.subitem-toggle,
.subitem-toggle-spacer {
    width: 24px;
    min-width: 24px;
    height: 24px;
}

.subitem-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.subitem-toggle:hover {
    color: var(--accent);
    background: rgba(87, 155, 252, 0.12);
    border-color: rgba(87, 155, 252, 0.25);
}

.subitem-toggle-spacer {
    display: inline-block;
}

.subitems-container-row.is-collapsed {
    display: none;
}

.parent-item-row.subitems-collapsed td {
    border-bottom-color: rgba(87, 155, 252, 0.18);
}

.subitems-container-row > td {
    padding: 0 16px 12px 42px;
    background: rgba(0, 0, 0, 0.12);
}

.subitems-panel {
    overflow: visible;
    border: 1px solid rgba(87, 155, 252, 0.2);
    border-radius: 9px;
    background: var(--bg-secondary);
}

.subitems-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    background: rgba(87, 155, 252, 0.08);
    border-bottom: 1px solid rgba(87, 155, 252, 0.16);
}

.subitems-table-scroll {
    overflow: visible;
}

.subitems-table {
    margin: 0;
    background: rgba(255, 255, 255, 0.01);
}

.subitems-table th {
    background: rgba(255, 255, 255, 0.025);
}

.subitems-table .item-name-cell {
    padding-left: 12px !important;
}

.item-name-input {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    padding: 4px 8px;
    flex: 1;
    outline: none;
    transition: all 0.15s ease;
}

.item-name-input:hover {
    border-color: var(--border);
    background: rgba(255,255,255,0.03);
}

.item-name-input:focus {
    border-color: var(--accent);
    background: var(--bg-secondary);
}

/* Drag & Drop Styles */
.drag-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: 16px;
    padding: 0 4px;
    user-select: none;
    opacity: 0.4;
    transition: opacity 0.15s;
}

.drag-handle:hover, tr:hover .drag-handle, .group-header:hover .drag-handle {
    opacity: 1;
    color: var(--accent);
}

.drag-handle:active {
    cursor: grabbing;
}

tr.dragging, .group-container.dragging {
    opacity: 0.4;
    border: 2px dashed var(--accent) !important;
}

.group-container.drag-over-group {
    border: 2px dashed var(--accent) !important;
    background: rgba(87, 155, 252, 0.05);
}

.row-actions { opacity: 0; transition: opacity 0.1s; display: flex; gap: 2px; }
tr:hover .row-actions { opacity: 1; }

/* Add Item Row */
.add-item-row {
    padding: 8px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.add-item-input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    padding: 6px 0;
    outline: none;
    flex: 1;
}

.add-item-input::placeholder { color: var(--text-muted); }

/* ==========================================
   CELL COMPONENTS (Component Factory CSS) 
   ========================================== */
.cell-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
}

/* Status */
.status-cell {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: filter 0.15s;
    position: relative;
    z-index: 1;
}

.status-cell-active {
    z-index: 9999 !important;
}

td:has(.status-cell-active) {
    z-index: 9999 !important;
    position: relative;
}

.status-cell:hover { filter: brightness(1.15); }

/* Status Dropdown */
.status-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 99999;
    overflow: hidden;
    padding: 4px;
}

.status-dropdown.open-upward {
    top: auto;
    bottom: calc(100% + 4px);
}

.status-option {
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    transition: background 0.1s;
}

.status-option:hover { background: var(--bg-hover); }
.status-color-dot { width: 10px; height: 10px; border-radius: 50%; }

/* Number */
.number-cell { justify-content: flex-end; font-variant-numeric: tabular-nums; }

/* Text */
.text-cell-input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    width: 100%;
    height: 100%;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    padding: 0 12px;
}

.text-cell-input::placeholder { color: var(--text-muted); }

/* Date */
.date-cell-input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    width: 100%;
    height: 100%;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    padding: 0 12px;
    color-scheme: dark;
}

.file-cell { display:flex; align-items:center; gap:6px; width:100%; min-width:0; }
.attachment-list { display:flex; align-items:center; gap:4px; min-width:0; overflow-x:auto; scrollbar-width:thin; }
.attachment-chip { display:inline-flex; align-items:center; gap:3px; flex:0 0 auto; max-width:180px; padding:3px 6px; border:1px solid var(--border); border-radius:12px; background:var(--bg-secondary); font-size:11px; }
.attachment-chip a { color:var(--accent); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attachment-chip button { border:0; background:transparent; color:var(--text-muted); cursor:pointer; padding:0 2px; font-size:14px; line-height:1; }
.attachment-chip button:hover { color:#e2445c; }
.attachment-empty { color:var(--text-muted); font-size:11px; white-space:nowrap; }
.attachment-add { flex:0 0 auto; width:24px; height:24px; display:grid; place-items:center; color:var(--accent); border:1px dashed var(--accent); border-radius:6px; cursor:pointer; }
.attachment-add:hover { background:color-mix(in srgb, var(--accent) 14%, transparent); }
.attachment-add input { display:none; }
.form-help { display:block; color:var(--text-muted); margin-top:5px; font-size:11px; }
.btn-icon.suite-active { background:rgba(0,200,117,.16); color:#00c875; box-shadow:inset 0 0 0 1px rgba(0,200,117,.3); }
.btn-icon.suite-inactive { opacity:.55; filter:grayscale(.8); }

/* Módulo independiente osTicket */
.readonly-pill { margin-left:auto; padding:2px 6px; border-radius:10px; font-size:9px; color:#9ca3af; background:rgba(156,163,175,.12); border:1px solid rgba(156,163,175,.2); }
.osticket-module-nav.active { background:rgba(87,155,252,.15); color:var(--accent); }
.osticket-loading { padding:70px; text-align:center; color:var(--text-muted); }
.osticket-module { position:relative; padding:18px; min-width:0; }
.osticket-banner,.osticket-admin-intro { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:14px 16px; border:1px solid rgba(87,155,252,.25); background:rgba(87,155,252,.08); border-radius:10px; margin-bottom:14px; }
.osticket-banner div,.osticket-admin-intro div { display:flex; flex-direction:column; gap:4px; }
.osticket-banner span:not(.readonly-badge),.osticket-admin-intro p { color:var(--text-secondary); font-size:12px; margin:0; }
.readonly-badge { flex:0 0 auto; padding:6px 9px; border-radius:7px; background:rgba(156,163,175,.13); border:1px solid rgba(156,163,175,.3); color:#c5cad3; font-size:10px; font-weight:700; letter-spacing:.4px; }
.osticket-controls { display:grid; grid-template-columns:minmax(220px,1.6fr) repeat(4,minmax(145px,1fr)); gap:8px; margin-bottom:10px; }
.osticket-controls .form-input,.osticket-controls .form-select,.osticket-actions .form-select { padding:8px 10px; min-height:35px; font-size:12px; }
.osticket-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 0 13px; color:var(--text-secondary); font-size:12px; }
.osticket-actions>span { margin-right:auto; }
.osticket-actions label { display:flex; align-items:center; gap:6px; }
.osticket-table-wrap { overflow:auto; max-height:calc(100vh - 310px); border:1px solid var(--glass-border); border-radius:10px; background:var(--bg-secondary); }
.osticket-table { width:max-content; min-width:100%; border-collapse:separate; border-spacing:0; font-size:12px; }
.osticket-table th { position:sticky; top:0; z-index:3; text-align:left; padding:10px 12px; background:#22252b; color:var(--text-muted); border-bottom:1px solid var(--glass-border); border-right:1px solid rgba(255,255,255,.035); white-space:nowrap; cursor:pointer; }
.osticket-table td { max-width:260px; padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.045); border-right:1px solid rgba(255,255,255,.025); color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.osticket-table tr:hover td { background:rgba(87,155,252,.055); }
.osticket-name-col { position:sticky; left:0; z-index:2; min-width:210px; max-width:260px; background:#202329; color:var(--text-primary)!important; font-weight:600; }
.osticket-table th.osticket-name-col { z-index:4; background:#22252b; }
.osticket-status { display:inline-block; min-width:84px; padding:4px 8px; text-align:center; border-radius:12px; color:#fff; background:color-mix(in srgb,var(--status-color) 76%,#202329); border:1px solid var(--status-color); font-size:10px; }
.osticket-link { color:var(--accent); text-decoration:none; font-weight:600; }
.osticket-empty { text-align:center; padding:32px!important; color:var(--text-muted)!important; }
.osticket-columns-panel { position:absolute; right:26px; z-index:20; width:350px; max-height:65vh; overflow:hidden; background:var(--bg-card); border:1px solid var(--glass-border); border-radius:12px; box-shadow:var(--shadow-lg); }
.osticket-columns-head,.osticket-columns-footer { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--glass-border); }
.osticket-columns-head div { display:flex; flex-direction:column; gap:2px; }.osticket-columns-head small { color:var(--text-muted); font-size:10px; }
.osticket-column-list { max-height:45vh; overflow:auto; padding:7px; }
.osticket-column-list>div { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 8px; border-radius:6px; }
.osticket-column-list>div:hover { background:var(--bg-hover); }.osticket-column-list label { flex:1; font-size:12px; cursor:pointer; }.osticket-column-list button { border:0; background:var(--bg-tertiary); color:var(--text-secondary); border-radius:5px; cursor:pointer; margin-left:3px; }
.osticket-columns-footer { border-top:1px solid var(--glass-border); border-bottom:0; justify-content:flex-end; }
.osticket-admin-grid { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(440px,1.2fr); gap:16px; align-items:start; }
.osticket-access-card { border:1px solid var(--glass-border); border-radius:12px; background:var(--bg-secondary); padding:16px; }
.osticket-access-card h3 { margin:0 0 5px; font-size:15px; }.osticket-access-card>p { margin:0 0 13px; color:var(--text-muted); font-size:11px; line-height:1.45; }
.osticket-access-list,.osticket-user-access-list { display:flex; flex-direction:column; gap:5px; max-height:52vh; overflow:auto; }
.osticket-access-list label { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px; border-radius:7px; background:var(--bg-tertiary); font-size:12px; cursor:pointer; }
.osticket-user-access-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px; border-bottom:1px solid rgba(255,255,255,.05); }
.osticket-user-access-row>div { min-width:0; display:flex; flex-direction:column; gap:2px; }.osticket-user-access-row strong { font-size:12px; }.osticket-user-access-row small { color:var(--text-muted); font-size:10px; }.osticket-user-access-row .access-source { color:var(--text-secondary); }
@media(max-width:1100px){.osticket-controls{grid-template-columns:repeat(2,minmax(180px,1fr))}.osticket-search{grid-column:1/-1}.osticket-admin-grid{grid-template-columns:1fr}}

/* ==========================================
   MODALS 
   ========================================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease;
}

.modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    width: 90%;
    max-width: 500px;
    animation: scaleIn 0.2s ease;
}

.modal-large { max-width: 700px; }

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 { font-size: 18px; font-weight: 600; }

.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* Form */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }

.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}

.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-select { cursor: pointer; }
.form-select option { background: var(--bg-secondary); }

/* ==========================================
   SIDE PANEL (Updates/Comments) 
   ========================================== */
.side-panel {
    position: fixed;
    top: 0; right: -500px; bottom: 0;
    width: 450px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    box-shadow: -10px 0 40px rgba(0,0,0,0.3);
    z-index: 500;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.side-panel.open { right: 0; }

.panel-header {
    padding: 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h3 { font-size: 16px; }

.panel-body { flex: 1; overflow-y: auto; padding: 20px; }

.panel-footer { padding: 15px 20px; border-top: 1px solid var(--border); }

.update-item {
    padding: 15px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    margin-bottom: 12px;
}

.update-meta { display: flex; justify-content: space-between; margin-bottom: 8px; }
.update-user { font-weight: 600; font-size: 13px; color: var(--accent); }
.update-date { font-size: 11px; color: var(--text-muted); }
.update-content { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }

.comment-input-area { display: flex; gap: 10px; }
.comment-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
}
.comment-input:focus { border-color: var(--accent); }

/* ==========================================
   TOAST NOTIFICATIONS 
   ========================================== */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 12px 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    font-size: 14px;
    animation: slideInRight 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.toast.success { border-left: 4px solid var(--success); }
.toast.error { border-left: 4px solid var(--danger); }

/* ==========================================
   USER BADGE & TOP BAR USER AREA
   ========================================== */
.top-bar-user-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* AUTH MODAL STYLES */
.auth-card {
    width: 400px !important;
    max-width: 90vw;
}

.auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.auth-tab {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.auth-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.btn-block {
    width: 100%;
}

.auth-error {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(226, 68, 92, 0.15);
    border: 1px solid var(--danger);
    color: #ff6b81;
    border-radius: 6px;
    font-size: 13px;
}

/* PERMISSIONS MODAL STYLES */
.permissions-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 8px;
}

.perm-checkbox-group {
    display: flex;
    gap: 15px;
    align-items: center;
}

.perm-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
}

/* ==========================================
   EMPTY STATE
   ========================================== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state .icon { font-size: 48px; margin-bottom: 15px; }
.empty-state h3 { font-size: 18px; color: var(--text-secondary); margin-bottom: 8px; }
.empty-state p { font-size: 14px; margin-bottom: 20px; }

/* ==========================================
   ANIMATIONS 
   ========================================== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }

/* ==========================================
   WORKSPACE OVERVIEW / DASHBOARD STYLES
   ========================================== */
.overview-container {
    animation: fadeIn 0.3s ease forwards;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.kpi-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.kpi-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent);
}

.kpi-card.kpi-success::before { background: var(--success); }
.kpi-card.kpi-warning::before { background: var(--warning); }
.kpi-card.kpi-purple::before { background: #a25ddc; }

.kpi-icon { font-size: 24px; margin-bottom: 10px; display: block; }
.kpi-title { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.kpi-value { font-size: 28px; font-weight: 700; color: var(--text-primary); }
.kpi-sub { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }

.overview-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 30px 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.board-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.board-quick-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 15px;
}

.board-quick-card:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.board-quick-icon {
    font-size: 32px;
    width: 48px;
    height: 48px;
    background: rgba(87, 155, 252, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.board-quick-info h4 { font-size: 15px; color: var(--text-primary); margin-bottom: 4px; }
.board-quick-info p { font-size: 12px; color: var(--text-muted); }

/* SEARCH BAR & NOTIFICATIONS */
.search-bar-container {
    position: relative;
    width: 260px;
    margin: 0 15px;
}

.search-input {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 7px 15px 7px 34px;
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
    transition: all 0.2s ease;
}

.search-input:focus {
    border-color: var(--accent);
    background: var(--bg-secondary);
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--text-muted);
    pointer-events: none;
}

/* Notification Badge & Dropdown */
.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notifications-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 99999;
    overflow: hidden;
    animation: slideUp 0.2s ease;
}

.notifications-header {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.notifications-list {
    max-height: 300px;
    overflow-y: auto;
}

.notification-item {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 12px;
    transition: background 0.15s;
}

.notification-item:hover { background: var(--bg-hover); }
.notification-item.unread { background: rgba(87, 155, 252, 0.08); font-weight: 500; }
.notification-item small { color: var(--text-muted); display: block; margin-top: 4px; }

/* VIEW SWITCHER & KANBAN */
.view-switcher {
    display: flex;
    gap: 4px;
    background: var(--bg-tertiary);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-right: 10px;
}

.view-btn {
    border: none !important;
    background: transparent !important;
    color: var(--text-muted) !important;
}

.view-btn.active {
    background: var(--accent) !important;
    color: white !important;
    border-radius: 6px !important;
}

.kanban-board-container {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 30px;
    min-height: 500px;
}

.kanban-column {
    flex: 1;
    min-width: 280px;
    max-width: 320px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    max-height: 75vh;
}

.kanban-column-header {
    padding: 14px 16px;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 12px 12px 0 0;
}

.kanban-cards-list {
    padding: 12px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100px;
}

.kanban-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: grab;
    transition: transform 0.15s, border-color 0.15s;
}

.kanban-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.kanban-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.kanban-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--text-muted);
}

/* Quick Action Badges (WhatsApp & Email) */
.cell-action-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    margin-left: 6px;
    transition: opacity 0.15s;
}

.cell-action-wa { background: #25D366; color: white; }
.cell-action-wa:hover { opacity: 0.85; }
.cell-action-email { background: #579BFC; color: white; }
.cell-action-email:hover { opacity: 0.85; }

/* Custom Context Menu */
.context-menu { position: fixed; z-index: 10000; width: 220px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); padding: 8px 0; font-size: 14px; }
.context-menu-item { padding: 10px 16px; cursor: pointer; display: flex; align-items: center; gap: 10px; color: var(--text-primary); transition: background 0.2s; }
.context-menu-item:hover { background: var(--bg-hover); }
.context-menu-item.danger { color: #e2445c; }
.context-menu-item.danger:hover { background: rgba(226, 68, 92, 0.1); }
.context-menu-divider { height: 1px; background: var(--border-color); margin: 6px 0; }

.board-icon-input {
    font-size: 22px;
    text-align: center;
}

.board-icon-picker {
    display: grid;
    grid-template-columns: repeat(10, minmax(34px, 1fr));
    gap: 7px;
    margin-top: 14px;
}

.board-icon-picker.compact {
    grid-template-columns: repeat(10, 34px);
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.board-icon-option {
    width: 100%;
    min-width: 34px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 19px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.board-icon-option:hover,
.board-icon-option.selected {
    border-color: var(--accent);
    background: rgba(87, 155, 252, 0.14);
    transform: translateY(-1px);
}


/* ==========================================
   PANEL DE ADMINISTRACIÓN - ÁREAS Y USUARIOS
   ========================================== */
.admin-panel-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px); z-index: 5000;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.admin-panel {
    background: var(--bg-secondary); border: 1px solid var(--glass-border);
    border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,0.5);
    width: 100%; max-width: 1100px; max-height: 88vh;
    display: flex; flex-direction: column; overflow: hidden;
}
.admin-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 16px; border-bottom: 1px solid var(--glass-border); flex-shrink: 0;
}
.admin-panel-header h2 { font-size: 20px; font-weight: 700; background: linear-gradient(135deg,#579BFC,#a25ddc); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.admin-tabs { display: flex; gap: 4px; padding: 12px 24px 0; border-bottom: 1px solid var(--glass-border); flex-shrink: 0; }
.admin-tab { padding: 9px 18px; border-radius: 8px 8px 0 0; border: none; background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.admin-tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.admin-tab.active { color: var(--accent); background: rgba(87,155,252,0.12); border-bottom: 2px solid var(--accent); }
.admin-panel-body { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.dept-card { background: var(--bg-tertiary); border: 1px solid var(--glass-border); border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; gap: 8px; }
.dept-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(87,155,252,0.15); }
.dept-card.selected { border-color: var(--accent); background: rgba(87,155,252,0.08); }
.dept-card-icon { font-size: 28px; }
.dept-card-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.dept-card-meta { font-size: 11px; color: var(--text-muted); }
.dept-card-actions { display: flex; gap: 4px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--glass-border); }
.admin-users-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-users-table th { padding: 10px 14px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); border-bottom: 1px solid var(--glass-border); font-weight: 600; }
.admin-users-table td { padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; }
.admin-users-table tr:hover td { background: var(--bg-hover); }
.user-dept-badge { display: inline-block; background: rgba(87,155,252,0.15); border: 1px solid rgba(87,155,252,0.3); color: var(--accent); border-radius: 20px; padding: 2px 9px; font-size: 11px; font-weight: 500; margin: 2px; }
.user-dept-badge { cursor:context-menu; user-select:none; display:inline-flex; align-items:center; gap:5px; }
.user-dept-badge.role-viewer{border-color:rgba(145,153,169,.35);background:rgba(145,153,169,.1)}.user-dept-badge.role-supervisor{border-color:rgba(253,171,61,.4);background:rgba(253,171,61,.1)}.user-dept-badge.role-manager{border-color:rgba(162,93,220,.45);background:rgba(162,93,220,.12)}
.department-role-badge{display:inline-flex;align-items:center;padding:1px 5px;border-radius:12px;font-size:8px;font-weight:700;background:rgba(255,255,255,.08);color:var(--text-secondary)}
.department-role-guide{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:8px}.department-role-guide>div{display:flex;align-items:flex-start;gap:8px;padding:10px;border:1px solid var(--glass-border);border-radius:9px;background:var(--bg-tertiary)}.department-role-icon{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:7px;background:rgba(87,155,252,.13)}.department-role-guide p{display:flex;flex-direction:column;margin:0}.department-role-guide strong{font-size:11px}.department-role-guide small{font-size:9px;color:var(--text-muted);line-height:1.35;margin-top:2px}
.department-role-select{max-width:135px}.department-access-menu{z-index:16000}
.dept-detail-panel { background: var(--bg-tertiary); border: 1px solid var(--glass-border); border-radius: 12px; padding: 18px; }
.dept-detail-panel h4 { font-size: 15px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.dept-member-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.dept-member-row:last-child { border-bottom: none; }
.dept-member-name { font-size: 13px; font-weight: 500; }
.dept-member-email { font-size: 11px; color: var(--text-muted); }
.admin-btn-sm { padding: 5px 12px; border-radius: 6px; border: none; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.admin-search { background: var(--bg-tertiary); border: 1px solid var(--glass-border); border-radius: 8px; padding: 9px 14px; color: var(--text-primary); font-size: 13px; width: 100%; max-width: 320px; outline: none; transition: border-color 0.2s; }
.admin-search:focus { border-color: var(--accent); }
.admin-select { background: var(--bg-tertiary); border: 1px solid var(--glass-border); border-radius: 6px; padding: 6px 10px; color: var(--text-primary); font-size: 12px; outline: none; cursor: pointer; max-width: 200px; }
.admin-badge-admin { background: rgba(226,68,92,0.15); border: 1px solid rgba(226,68,92,0.3); color: #e2445c; border-radius: 20px; padding: 2px 8px; font-size: 10px; font-weight: 700; }
.sidebar-dept-header { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); padding: 12px 14px 4px; display: flex; align-items: center; gap: 6px; font-weight: 600; margin-top: 4px; }
.btn-admin-panel { background: rgba(162,93,220,0.15); color: #a25ddc; border: 1px solid rgba(162,93,220,0.3); border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s; }
.btn-admin-panel:hover { background: rgba(162,93,220,0.25); }
@media(max-width:850px){.department-role-guide{grid-template-columns:1fr 1fr}}

.share-departments-section { border:1px solid var(--border); border-radius:12px; background:var(--bg-tertiary); padding:15px; margin-bottom:18px; }
.share-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.share-section-heading h3,.share-users-heading h3 { margin:0; font-size:14px; color:var(--text-primary); }
.share-section-heading p,.share-users-heading p { margin:3px 0 0; font-size:10px; color:var(--text-muted); }
.share-department-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; }
.share-department-option { display:flex; align-items:center; gap:9px; padding:9px; border:1px solid var(--border); border-radius:8px; background:var(--bg-secondary); cursor:pointer; transition:.15s; }
.share-department-option.selected { border-color:var(--accent); background:rgba(87,155,252,.12); }
.share-department-option input { accent-color:var(--accent); }.share-department-icon{font-size:18px}.share-department-option>span:last-child{display:flex;flex-direction:column;min-width:0}.share-department-option strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.share-department-option small{font-size:9px;color:var(--text-muted)}
.share-area-permissions { display:flex; flex-wrap:wrap; gap:12px; padding-top:12px; margin-top:12px; border-top:1px solid var(--border); }
.share-area-permissions label { font-size:10px; color:var(--text-secondary); display:flex; align-items:center; gap:4px; }
.share-users-heading { margin:18px 0 9px; }

/* CRM comercial nativo */
.crm-navigation { margin-bottom: 18px; }
.crm-navigation .nav-item { padding: 8px 12px; margin: 2px 8px; border-radius: 7px; }
.crm-navigation .nav-item.active { color: var(--accent); background: rgba(87,155,252,.14); box-shadow: inset 3px 0 var(--accent); }
.crm-page { padding: 24px; min-width: 0; }
.crm-page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }.crm-page-heading h2{font-size:18px;margin:0;color:var(--text-primary)}.crm-page-heading p{font-size:11px;color:var(--text-muted);margin:3px 0 0}
.crm-loading { padding: 80px 20px; color: var(--text-muted); text-align: center; }
.crm-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:18px; }
.crm-kpi { display:flex; gap:14px; align-items:flex-start; background:var(--bg-secondary); border:1px solid var(--border); border-radius:12px; padding:17px; box-shadow:0 3px 14px rgba(0,0,0,.08); }
.crm-kpi-icon { display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:10px; font-size:20px; background:rgba(87,155,252,.13); }
.crm-kpi div { min-width:0; }
.crm-kpi small { display:block; color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.45px; }
.crm-kpi strong { display:block; color:var(--text-primary); font-size:22px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crm-kpi p { color:var(--text-muted); font-size:11px; margin:2px 0 0; }
.crm-dashboard-grid { display:grid; grid-template-columns:minmax(420px,1.4fr) minmax(310px,1fr); gap:18px; }
.crm-card { background:var(--bg-secondary); border:1px solid var(--border); border-radius:12px; padding:18px; min-width:0; }
.crm-card-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; }
.crm-card-header h3, .crm-detail-body h3 { font-size:15px; color:var(--text-primary); margin:0; }
.crm-funnel { display:flex; flex-direction:column; gap:12px; }
.crm-funnel-row { display:grid; grid-template-columns:100px 1fr 110px; align-items:center; gap:10px; font-size:12px; }
.crm-funnel-row > span { color:var(--text-secondary); }
.crm-funnel-row > div { height:9px; background:var(--bg-tertiary); border-radius:20px; overflow:hidden; }
.crm-funnel-row i { display:block; height:100%; border-radius:20px; background:linear-gradient(90deg,#579bfc,#a25ddc); }
.crm-funnel-row b { font-size:11px; text-align:right; }
.crm-activity-list { display:flex; flex-direction:column; gap:8px; }
.crm-activity { display:flex; gap:10px; align-items:center; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--bg-tertiary); }
.crm-activity.overdue { border-left:3px solid #e2445c; }
.crm-activity div { display:flex; flex-direction:column; min-width:0; }
.crm-activity b { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crm-activity small { font-size:10px; color:var(--text-muted); margin-top:2px; }
.crm-list-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.crm-search { display:flex; align-items:center; gap:8px; min-width:260px; flex:1; max-width:480px; padding:0 11px; height:38px; border:1px solid var(--border); border-radius:8px; background:var(--bg-secondary); }
.crm-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(87,155,252,.1); }
.crm-search input { min-width:0; width:100%; border:0; outline:0; background:transparent; color:var(--text-primary); }
.crm-count { margin-right:auto; font-size:12px; color:var(--text-muted); }
.crm-table-wrap { background:var(--bg-secondary); border:1px solid var(--border); border-radius:10px; overflow:auto; }
.crm-table { width:100%; border-collapse:collapse; font-size:12px; }
.crm-table th { position:sticky; top:0; z-index:1; padding:11px 13px; text-align:left; color:var(--text-muted); background:var(--bg-tertiary); border-bottom:1px solid var(--border); text-transform:uppercase; letter-spacing:.4px; font-size:10px; }
.crm-table td { padding:12px 13px; color:var(--text-secondary); border-bottom:1px solid var(--border); white-space:nowrap; }
.crm-table tbody tr { cursor:pointer; transition:background .15s; }
.crm-table tbody tr:hover td { background:var(--bg-hover); color:var(--text-primary); }
.crm-table a { color:var(--accent); text-decoration:none; }
.crm-row-open { border:0; background:transparent; color:var(--text-muted); font-size:22px; cursor:pointer; }
.crm-pill { display:inline-flex; padding:3px 8px; border:1px solid rgba(87,155,252,.28); background:rgba(87,155,252,.12); color:#75adff; border-radius:20px; font-size:10px; font-weight:600; }
.crm-pill-ganada,.crm-pill-activo,.crm-pill-completada { color:#2ed49b; background:rgba(46,212,155,.12); border-color:rgba(46,212,155,.28); }
.crm-pill-perdida,.crm-pill-inactivo,.crm-pill-cancelada { color:#f16b7d; background:rgba(226,68,92,.12); border-color:rgba(226,68,92,.28); }
.crm-pill-alta { color:#ffb84d; background:rgba(255,184,77,.12); border-color:rgba(255,184,77,.28); }
.crm-muted { color:var(--text-muted); }
.crm-empty { display:flex; min-height:380px; flex-direction:column; align-items:center; justify-content:center; border:1px dashed var(--border); border-radius:12px; color:var(--text-muted); text-align:center; }
.crm-empty > span { font-size:42px; opacity:.7; }.crm-empty h3{color:var(--text-primary);margin:10px 0 4px}.crm-empty p{margin:0 0 16px}
.crm-empty-small { color:var(--text-muted); text-align:center; padding:25px 10px; font-size:12px; }
.crm-pipeline { display:grid; grid-template-columns:repeat(6,minmax(230px,1fr)); gap:12px; overflow:auto; padding-bottom:12px; }
.crm-pipeline-column { min-height:470px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.crm-pipeline-column > header { padding:12px; background:var(--bg-tertiary); border-top:3px solid var(--accent); }
.crm-pipeline-column > header div { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.crm-pipeline-column > header b { font-size:12px; }.crm-pipeline-column > header span{display:grid;place-items:center;min-width:20px;height:20px;border-radius:20px;background:rgba(87,155,252,.15);color:var(--accent);font-size:10px}
.crm-pipeline-column > header small { display:block; color:var(--text-muted); margin-top:4px; }
.crm-pipeline-cards { display:flex; flex-direction:column; gap:8px; padding:9px; }
.crm-deal-card { display:flex; flex-direction:column; gap:5px; padding:11px; border:1px solid var(--border); border-radius:8px; background:var(--bg-tertiary); cursor:pointer; transition:transform .15s,border-color .15s; }
.crm-deal-card:hover { transform:translateY(-1px); border-color:var(--accent); }
.crm-deal-card b { font-size:12px; }.crm-deal-card p{font-size:10px;color:var(--text-muted);margin:0}.crm-deal-card strong{font-size:14px}
.crm-deal-card div { display:flex; align-items:center; justify-content:space-between; gap:5px; margin-top:4px; }.crm-deal-card div span{color:var(--text-muted);font-size:10px}
.crm-deal-card select { max-width:125px; border:1px solid var(--border); border-radius:5px; padding:4px; background:var(--bg-secondary); color:var(--text-secondary); font-size:9px; }
.crm-stage-empty { padding:35px 5px; text-align:center; color:var(--text-muted); font-size:11px; }
.crm-modal-overlay { z-index:12000; }
.crm-form-modal { width:min(760px,94vw); max-width:760px; max-height:90vh; overflow:auto; }
.crm-form-modal .modal-header small,.crm-detail-modal .modal-header small { display:block; color:var(--text-muted); font-size:10px; text-transform:uppercase; letter-spacing:.6px; }
.crm-form-modal .modal-header h2,.crm-detail-modal .modal-header h2 { margin:3px 0 0; font-size:20px; }
.crm-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.crm-form-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.crm-form-field.wide { grid-column:1/-1; }.crm-form-field>span{font-size:11px;color:var(--text-secondary);font-weight:600}
.crm-detail-modal { width:min(1000px,96vw); max-width:1000px; max-height:92vh; overflow:auto; }
.crm-detail-actions { display:flex; gap:8px; flex-wrap:wrap; padding:12px 20px; border-bottom:1px solid var(--border); background:var(--bg-tertiary); }
.crm-detail-actions .btn-danger { margin-left:auto; color:#f16b7d; border-color:rgba(226,68,92,.3); background:rgba(226,68,92,.1); }
.crm-detail-body { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:22px; }
.crm-detail-body section { min-width:0; }.crm-detail-body h3{padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:13px}
.crm-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0; }.crm-detail-grid>div{min-width:0}.crm-detail-grid>div.wide{grid-column:1/-1}
.crm-detail-grid dt { color:var(--text-muted); font-size:10px; text-transform:uppercase; letter-spacing:.4px; margin-bottom:3px; }.crm-detail-grid dd{margin:0;color:var(--text-primary);font-size:12px;overflow-wrap:anywhere}
.crm-tabs-content { display:flex; flex-direction:column; gap:7px; }
.crm-history { display:flex; gap:8px; padding:8px 4px; border-bottom:1px solid var(--border); }.crm-history>span{color:var(--accent)}.crm-history div{display:flex;flex-direction:column}.crm-history b{font-size:11px;text-transform:capitalize}.crm-history small{font-size:9px;color:var(--text-muted)}
.crm-automation-modal{width:min(980px,96vw);max-width:980px;max-height:90vh;overflow:auto}.crm-automation-layout{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(340px,1.2fr);gap:22px}.crm-automation-layout h3{font-size:14px;margin:0 0 14px}.crm-automation-form{display:flex;flex-direction:column;gap:11px;padding-right:20px;border-right:1px solid var(--border)}.crm-condition-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.crm-rules-list{min-width:0}.crm-rule{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--border);border-radius:8px;background:var(--bg-tertiary);margin-bottom:8px}.crm-rule>div{display:flex;flex:1;min-width:0;flex-direction:column}.crm-rule b{font-size:12px}.crm-rule small{font-size:9px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crm-switch input{display:none}.crm-switch span{display:block;position:relative;width:34px;height:18px;border-radius:20px;background:#59606c;cursor:pointer}.crm-switch span:after{content:'';position:absolute;width:14px;height:14px;left:2px;top:2px;border-radius:50%;background:white;transition:.15s}.crm-switch input:checked+span{background:#2ed49b}.crm-switch input:checked+span:after{left:18px}
@media(max-width:900px){.crm-dashboard-grid,.crm-detail-body{grid-template-columns:1fr}.crm-form-grid{grid-template-columns:1fr}.crm-form-field.wide{grid-column:auto}.crm-page{padding:14px}.crm-kpi-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.crm-automation-layout{grid-template-columns:1fr}.crm-automation-form{padding-right:0;border-right:0;border-bottom:1px solid var(--border);padding-bottom:18px}}
@media(max-width:580px){.crm-kpi-grid{grid-template-columns:1fr}.crm-list-toolbar .btn{flex:1}.crm-search{max-width:none;flex-basis:100%}.crm-detail-grid{grid-template-columns:1fr}.crm-detail-actions .btn-danger{margin-left:0}}