/* ═══════════════════════════════════════════════════════════════ HelpDesk Command Center — CSS global ═══════════════════════════════════════════════════════════════ */ /* ── Variables ─────────────────────────────────────────────────── */ :root { --hd-primary: #6366F1; --hd-primary-alpha: rgba(99,102,241,0.12); --hd-primary-border: rgba(99,102,241,0.35); --hd-secondary: #EC4899; --hd-accent: #F59E0B; --hd-success: #34D399; --hd-danger: #F87171; --hd-info: #60A5FA; /* Tema oscuro (default) */ --hd-surface: #111827; --hd-surface-raised: #1F2937; --hd-surface-overlay: #374151; --hd-surface-low: #0D1520; --hd-text: #F9FAFB; --hd-muted: #9CA3AF; --hd-border: #374151; /* Estados de ticket (chips) — tema oscuro (default) */ --chip-nuevo-bg: #1D4ED8; --chip-nuevo-tx: #BFDBFE; --chip-asignado-bg: #065F46; --chip-asignado-tx: #6EE7B7; --chip-proceso-bg: #92400E; --chip-proceso-tx: #FDE68A; --chip-espera-bg: #581C87; --chip-espera-tx: #E9D5FF; --chip-resuelto-bg: #1F2937; --chip-resuelto-tx: #9CA3AF; --chip-cerrado-bg: #111827; --chip-cerrado-tx: #6B7280; --chip-reabierto-bg: #7C2D12; --chip-reabierto-tx:#FED7AA; } /* Tema claro — activo con data-theme="light" en (lo pone hdHelpers.setTheme desde MainLayout). Al vivir en , las variables cascada a TODA la pantalla (body, overlays, popovers de MudBlazor). */ :root[data-theme="light"] { --hd-surface: #F3F4F6; --hd-surface-raised: #FFFFFF; --hd-surface-overlay: #E5E7EB; --hd-surface-low: #EEF2FF; --hd-text: #111827; --hd-muted: #6B7280; --hd-border: #D1D5DB; /* chips neutrales legibles en claro */ --chip-resuelto-bg: #E5E7EB; --chip-resuelto-tx: #374151; --chip-cerrado-bg: #E5E7EB; --chip-cerrado-tx: #4B5563; } /* ── Reset + base ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; font-size: 14px; height: 100%; background: var(--hd-surface); color: var(--hd-text); } h1:focus { outline: none; } /* ── Scrollbar dark ──────────────────────────────────────────── */ * { scrollbar-width: thin; scrollbar-color: var(--hd-border) transparent; } *::-webkit-scrollbar { width: 5px; height: 5px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--hd-border); border-radius: 3px; } *::-webkit-scrollbar-thumb:hover { background: var(--hd-surface-overlay); } /* ── Tipografía util ─────────────────────────────────────────── */ .font-mono { font-family: 'JetBrains Mono', monospace !important; } .text-muted { color: var(--hd-muted) !important; } .text-xs { font-size: 0.72rem; } .text-sm { font-size: 0.8125rem; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } /* ── Chips de estado de ticket ───────────────────────────────── */ .chip-estado { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; font-family: 'Inter', sans-serif; } .chip-nuevo { background: var(--chip-nuevo-bg); color: var(--chip-nuevo-tx); } .chip-asignado { background: var(--chip-asignado-bg); color: var(--chip-asignado-tx); } .chip-proceso { background: var(--chip-proceso-bg); color: var(--chip-proceso-tx); } .chip-espera { background: var(--chip-espera-bg); color: var(--chip-espera-tx); } .chip-resuelto { background: var(--chip-resuelto-bg); color: var(--chip-resuelto-tx); } .chip-cerrado { background: var(--chip-cerrado-bg); color: var(--chip-cerrado-tx); border: 1px solid var(--hd-border); } .chip-reabierto { background: var(--chip-reabierto-bg); color: var(--chip-reabierto-tx); } /* ── Chips SLA ───────────────────────────────────────────────── */ .chip-sla { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px; font-size: 0.65rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.01em; } .chip-sla-en-riesgo { background:rgba(245,158,11,0.18); color:#F59E0B; border:1px solid rgba(245,158,11,0.35); } .chip-sla-incumplida { background:rgba(248,113,113,0.18); color:#F87171; border:1px solid rgba(248,113,113,0.35); } .chip-sla-cumplida { background:rgba(52,211,153,0.12); color:#34D399; border:1px solid rgba(52,211,153,0.25); } .chip-sla-pendiente { background:rgba(96,165,250,0.12); color:#60A5FA; border:1px solid rgba(96,165,250,0.25); } /* ── Canal (H6) ──────────────────────────────────────────────── */ .chip-canal-wa { display:inline-flex;align-items:center;font-size:0.62rem;font-weight:700; padding:1px 5px;border-radius:999px;letter-spacing:0.03em; background:rgba(37,211,102,0.18);color:#25D366;border:1px solid rgba(37,211,102,0.35); } .chip-canal-email { display:inline-flex;align-items:center;font-size:0.62rem;font-weight:700; padding:1px 5px;border-radius:999px;letter-spacing:0.03em; background:rgba(96,165,250,0.12);color:#60A5FA;border:1px solid rgba(96,165,250,0.25); } .chip-canal-portal { display:inline-flex;align-items:center;font-size:0.62rem;font-weight:700; padding:1px 5px;border-radius:999px;letter-spacing:0.03em; background:rgba(167,139,250,0.14);color:#A78BFA;border:1px solid rgba(167,139,250,0.3); } /* ── Prioridad dot ───────────────────────────────────────────── */ .prio-critica { color: #F87171; } .prio-alta { color: #FB923C; } .prio-media { color: #FBBF24; } .prio-baja { color: #60A5FA; } /* ── Badge contador (sidebar) ────────────────────────────────── */ .hd-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 4px; font-size: 0.67rem; font-weight: 700; background: rgba(99,102,241,0.22); color: #A5B4FC; font-family: 'JetBrains Mono', monospace; letter-spacing: 0; } .hd-badge.urgent { background: rgba(248,113,113,0.22); color: #F87171; } /* ── Dot estado agente ───────────────────────────────────────── */ .agent-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .dot-disponible { background: var(--hd-success); } .dot-ocupado { background: var(--hd-accent); } .dot-ausente { background: var(--hd-muted); } /* ── KPI cards ───────────────────────────────────────────────── */ .kpi-card { background: var(--hd-surface-raised); border: 1px solid var(--hd-border); border-radius: 8px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.4); } .kpi-value { font-size: 1.8rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; line-height: 1.1; } .kpi-label { font-size: 0.7rem; color: var(--hd-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.07em; } .kpi-sub { font-size: 0.7rem; margin-top: 4px; } /* ── Hilo de mensajes ────────────────────────────────────────── */ .msg-agente { background: var(--hd-surface-raised); border: 1px solid var(--hd-border); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; } .msg-contacto { background: rgba(99,102,241,0.07); border: 1px solid rgba(99,102,241,0.2); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; } .msg-nota { background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.22); border-left: 3px solid var(--hd-accent); border-radius: 0 8px 8px 0; padding: 10px 14px; margin-bottom: 8px; } .msg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } .msg-nombre { font-weight: 600; font-size: 0.8125rem; } .msg-fecha { font-size: 0.7rem; color: var(--hd-muted); font-family: 'JetBrains Mono', monospace; } .msg-cuerpo { font-size: 0.875rem; line-height: 1.55; white-space: pre-wrap; } /* ── Panel info del ticket ───────────────────────────────────── */ .info-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 5px 0; border-bottom: 1px solid var(--hd-border); font-size: 0.8125rem; } .info-row:last-child { border-bottom: none; } .info-label { font-size: 0.68rem; color: var(--hd-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; min-width: 90px; padding-top: 2px; } .info-value { text-align: right; flex: 1; word-break: break-word; } /* ── 3-panel tickets layout ──────────────────────────────────── */ .hd-tickets-layout { display: grid; grid-template-columns: 320px 1fr 280px; height: calc(100vh - 48px); overflow: hidden; } .hd-panel { overflow-y: auto; border-right: 1px solid var(--hd-border); display: flex; flex-direction: column; } .hd-panel:last-child { border-right: none; } /* Panel lista: items */ .ticket-item { padding: 10px 14px; border-bottom: 1px solid var(--hd-border); cursor: pointer; transition: background 0.1s; user-select: none; } .ticket-item:hover { background: var(--hd-surface-overlay); } .ticket-item.selected { background: var(--hd-primary-alpha); border-left: 2px solid var(--hd-primary); padding-left: 12px; } .ticket-item-id { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--hd-muted); } .ticket-item-asunto { font-size: 0.8125rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 2px 0; } .ticket-item-meta { font-size: 0.72rem; color: var(--hd-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } /* ── Placeholder "selecciona un ticket" ──────────────────────── */ .hd-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: var(--hd-muted); text-align: center; padding: 32px; } /* ── Ticket ID display ───────────────────────────────────────── */ .ticket-id { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--hd-muted); } .ticket-id-lg { font-family: 'JetBrains Mono', monospace; font-size: 1.05rem; color: var(--hd-primary); font-weight: 700; } /* ── SLA timer colors ────────────────────────────────────────── */ .sla-en-riesgo { color: var(--hd-accent); font-weight: 700; } .sla-incumplida { color: var(--hd-danger); font-weight: 700; } .sla-cumplida { color: var(--hd-success); } .sla-pendiente { color: var(--hd-info); } /* ── Filtros bar ─────────────────────────────────────────────── */ .hd-filters { padding: 10px 14px; border-bottom: 1px solid var(--hd-border); background: var(--hd-surface); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; } /* ── NavLink MudBlazor overrides ─────────────────────────────── */ .mud-nav-link { border-radius: 0 !important; border-left: 2px solid transparent !important; } .mud-nav-link.active, .mud-nav-link:hover { background: var(--hd-primary-alpha) !important; border-left-color: var(--hd-primary) !important; } .mud-nav-link.active span { color: #A5B4FC !important; } /* ── AppBar override ─────────────────────────────────────────── */ .mud-appbar { box-shadow: none !important; border-bottom: 1px solid var(--hd-border) !important; } /* ── DataGrid compacto ───────────────────────────────────────── */ .mud-table-cell { font-size: 0.8125rem !important; padding: 5px 10px !important; } .mud-table-head .mud-table-cell { font-size: 0.7rem !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hd-muted) !important; font-weight: 500 !important; } /* ── Blazor error UI (rebrandeado: tarjeta con marca, no barra "rota") ── */ #blazor-error-ui { display: none; position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); width: 440px; max-width: 92%; box-sizing: border-box; align-items: center; gap: 12px; background: #1F2937; color: #F9FAFB; border: 1px solid #374151; border-left: 4px solid #F87171; border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,0.45); padding: 14px 16px; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.35; z-index: 13000; } /* Cuando Blazor lo muestra (display:block inline), forzamos el layout flex del contenido. */ #blazor-error-ui[style*="display: block"], #blazor-error-ui[style*="display:block"] { display: flex !important; } #blazor-error-ui .hd-err-icon { font-size: 22px; line-height: 1; } #blazor-error-ui .hd-err-texto { flex: 1 1 auto; min-width: 0; } #blazor-error-ui .hd-err-titulo { font-weight: 600; font-size: 15px; margin-bottom: 2px; } #blazor-error-ui .hd-err-cuerpo { color: #9CA3AF; } #blazor-error-ui .reload { flex: 0 0 auto; background: #6366F1; color: #fff; text-decoration: none; font-weight: 600; padding: 8px 14px; border-radius: 8px; white-space: nowrap; cursor: pointer; } #blazor-error-ui .reload:hover { filter: brightness(1.08); } #blazor-error-ui .dismiss { flex: 0 0 auto; cursor: pointer; color: #9CA3AF; font-size: 16px; line-height: 1; padding: 2px 4px; } .blazor-error-boundary { background: #7C2D12; padding: 0.75rem 1rem; color: #FED7AA; border-radius: 6px; } .blazor-error-boundary::after { content: "Ocurrió un error en este componente." } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 1200px) { .hd-tickets-layout { grid-template-columns: 300px 1fr; } .hd-panel-info { display: none; } } @media (max-width: 768px) { .hd-tickets-layout { grid-template-columns: 1fr; } .hd-panel-list { display: none; } }