/* ============================================================
   JupiterDesk — Design Tokens & Global Styles
   ============================================================ */

/* ── 1. BRAND TOKENS ───────────────────────────────────────── */
:root {
  /* Brand – Warm */
  --brand-orange-500: #F25C2A;
  --brand-orange-400: #FF7A1A;
  --brand-yellow-500: #F6B73C;
  --brand-yellow-300: #FFD36E;

  /* Brand – Cool */
  --brand-blue-600: #1F6FA8;
  --brand-blue-500: #2F8CCF;
  --brand-cyan-500: #2DB6D6;

  /* Neutral – Dark */
  --neutral-950: #0D0F12;
  --neutral-900: #13161B;
  --neutral-850: #191D24;
  --neutral-800: #1F242E;
  --neutral-700: #2A3140;
  --neutral-500: #5A6478;
  --neutral-400: #8A93A4;
  --neutral-200: #C8CDD7;
  --neutral-50:  #F0F2F5;

  /* Neutral – Light */
  --neutral-lt-bg:      #F5F7FA;
  --neutral-lt-surface: #FFFFFF;
  --neutral-lt-border:  #E2E6EE;
  --neutral-lt-text:    #1A1D23;
  --neutral-lt-subtle:  #6B7280;

  /* States */
  --success-500: #22C55E;
  --success-900: #052E16;
  --warning-500: #F6B73C;
  --warning-900: #2D1C02;
  --error-500:   #EF4444;
  --error-900:   #2D0707;
  --info-500:    #2DB6D6;
  --info-900:    #042028;

  /* Ticket status */
  --ticket-open:         #2DB6D6;
  --ticket-pending:      #F6B73C;
  --ticket-resolved:     #22C55E;
  --ticket-closed:       #5A6478;
  --ticket-sla-ok:       #22C55E;
  --ticket-sla-warning:  #F6B73C;
  --ticket-sla-breached: #EF4444;

  /* Priority */
  --priority-urgent: #EF4444;
  --priority-high:   #F25C2A;
  --priority-medium: #F6B73C;
  --priority-low:    #5A6478;

  /* Spacing (4px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Shadows (light theme only) */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* ── 2. BASE ────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1:focus {
  outline: none;
}

/* ── 3. SIDEBAR NAVIGATION ──────────────────────────────────── */
.jd-nav-item {
  border-radius: var(--radius-md);
  transition: background 150ms ease;
}

.jd-nav-item:hover {
  background: var(--neutral-800);
}

.jd-nav-item--active {
  background: rgba(242, 92, 42, 0.12) !important;
  border-left: 3px solid var(--brand-orange-500);
  color: #FFFFFF !important;
}

.jd-nav-item--active .mud-nav-link-text {
  color: #FFFFFF !important;
}

/* ── 4. TABLES ──────────────────────────────────────────────── */
.jd-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

.jd-table tr.jd-row--selected td {
  background: rgba(242, 92, 42, 0.08);
  border-left: 3px solid var(--brand-orange-500);
}

/* ── 5. BADGES / CHIPS ──────────────────────────────────────── */
.jd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  white-space: nowrap;
}

.jd-badge--open     { background: var(--info-900);    color: var(--info-500);    border-color: var(--info-500); }
.jd-badge--pending  { background: var(--warning-900); color: var(--warning-500); border-color: var(--warning-500); }
.jd-badge--resolved { background: var(--success-900); color: var(--success-500); border-color: var(--success-500); }
.jd-badge--closed   { background: var(--neutral-800); color: var(--neutral-400); border-color: var(--neutral-700); }

.jd-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.jd-priority--urgent .jd-badge__dot { background: var(--priority-urgent); }
.jd-priority--high   .jd-badge__dot { background: var(--priority-high); }
.jd-priority--medium .jd-badge__dot { background: var(--priority-medium); }
.jd-priority--low    .jd-badge__dot { background: var(--priority-low); }

/* ── 6. SLA INDICATOR ───────────────────────────────────────── */
.jd-sla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.jd-sla__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.jd-sla--ok      .jd-sla__dot { background: var(--ticket-sla-ok); }
.jd-sla--warning .jd-sla__dot { background: var(--ticket-sla-warning); }
.jd-sla--breached .jd-sla__dot { background: var(--ticket-sla-breached); }
.jd-sla--met     .jd-sla__dot { background: var(--ticket-sla-ok); }

.jd-sla--ok       { color: var(--ticket-sla-ok); }
.jd-sla--warning  { color: var(--ticket-sla-warning); }
.jd-sla--breached { color: var(--ticket-sla-breached); }
.jd-sla--met      { color: var(--ticket-sla-ok); }

/* Detalle de ticket: filas de objetivos SLA */
.jd-sla-row { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:6px; }
.jd-sla-row__label { font-size:0.75rem; opacity:0.6; }
.jd-sla-row__value { font-size:0.8125rem; font-weight:500; text-align:right; }
.jd-sla-row__value--met      { color: var(--ticket-sla-ok); }
.jd-sla-row__value--breached { color: var(--ticket-sla-breached); }
.jd-sla-row__value--warning  { color: var(--ticket-sla-warning); }

/* ── 7. AVATAR ──────────────────────────────────────────────── */
.jd-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--brand-blue-600);
  color: #fff;
}

.jd-avatar--sm { width: 32px; height: 32px; font-size: 11px; }
.jd-avatar--md { width: 40px; height: 40px; font-size: 13px; }
.jd-avatar--lg { width: 56px; height: 56px; font-size: 18px; }

.jd-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jd-avatar__status {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success-500);
  border: 2px solid var(--neutral-900);
}

/* ── 8. EMPTY STATE ─────────────────────────────────────────── */
.jd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
  gap: var(--space-3);
}

.jd-empty__icon {
  font-size: 48px;
  opacity: 0.35;
  color: var(--brand-orange-500);
}

.jd-empty__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.jd-empty__description {
  font-size: 0.875rem;
  opacity: 0.65;
  margin: 0;
  max-width: 320px;
}

/* ── 9. PAGE HEADER ─────────────────────────────────────────── */
.jd-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
}

.jd-page-header__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.jd-page-header__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.jd-page-header__breadcrumb {
  font-size: 0.75rem;
  opacity: 0.6;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── 10. TOPBAR ─────────────────────────────────────────────── */
.jd-topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.jd-topbar-brand span {
  color: var(--brand-orange-500);
}

/* ── 11. SPLASH LOADER ──────────────────────────────────────── */
.jd-splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #0D0F12;
}

.jd-splash__ring {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
}

.jd-splash__ring circle {
  fill: none;
  stroke: #1F242E;
  stroke-width: 6;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

.jd-splash__ring .jd-splash__progress {
  stroke: #F25C2A;
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.72), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}

.jd-splash__text::after {
  content: var(--blazor-load-percentage-text, "Cargando");
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: #5A6478;
}

/* ── 12. ERROR UI ───────────────────────────────────────────── */
#blazor-error-ui {
  background: var(--error-900);
  border-top: 1px solid var(--error-500);
  color: #F0F2F5;
  bottom: 0;
  display: none;
  left: 0;
  padding: 12px 20px;
  position: fixed;
  width: 100%;
  z-index: 9999;
  font-size: 0.875rem;
}

#blazor-error-ui .reload {
  color: var(--brand-orange-400);
  margin-left: 8px;
}

#blazor-error-ui .dismiss {
  background: none;
  border: none;
  color: var(--neutral-400);
  cursor: pointer;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.blazor-error-boundary {
  background: var(--error-900);
  border: 1px solid var(--error-500);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-4) var(--space-4) 56px;
  color: #F0F2F5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23EF4444' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 16px center;
  background-size: 24px;
}

.blazor-error-boundary::after {
  content: "Ocurrió un error en la aplicación.";
}

/* ── 13. FOCUS VISIBLE (accesibilidad) ──────────────────────── */
:focus-visible {
  outline: 2px solid var(--brand-orange-500);
  outline-offset: 2px;
}

/* ── 14. SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--neutral-700); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--neutral-500); }

/* ── 15. ANIMATIONS ─────────────────────────────────────────── */
@keyframes jd-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.jd-fade-in {
  animation: jd-fade-in 200ms ease-out both;
}

/* ── 16. MONOSPACE ──────────────────────────────────────────── */
.jd-mono {
  font-family: 'Consolas', 'Menlo', monospace;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

/* ============================================================
   D1 — Component Styles
   ============================================================ */

/* ── BULK ACTIONS BAR ───────────────────────────────────────── */
.jd-bulk-bar {
  position: sticky;
  top: 56px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: rgba(242, 92, 42, 0.08);
  border: 1px solid rgba(242, 92, 42, 0.25);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  animation: jd-fade-in 150ms ease-out both;
}

.jd-bulk-bar__count {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-orange-500);
  flex-shrink: 0;
}

/* ── REFRESH CONTROL ────────────────────────────────────────── */
.jd-refresh-block {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.jd-refresh-block__label {
  font-size: 0.75rem;
  opacity: 0.55;
  white-space: nowrap;
}

.jd-spin {
  animation: jd-spin-rotate 0.8s linear infinite;
}

@keyframes jd-spin-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── FILTER BAR ─────────────────────────────────────────────── */
.jd-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  min-height: 32px;
}

.jd-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 10px;
  border-radius: var(--radius-full);
  background: rgba(242, 92, 42, 0.10);
  border: 1px solid rgba(242, 92, 42, 0.30);
  color: var(--brand-orange-500);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.jd-filter-chip__remove {
  cursor: pointer;
  opacity: 0.7;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  border: none;
  background: none;
  color: inherit;
}

.jd-filter-chip__remove:hover { opacity: 1; }

/* ── SEARCH INPUT ───────────────────────────────────────────── */
.jd-search-input {
  position: relative;
  display: flex;
  align-items: center;
}

/* ── LOADING OVERLAY ────────────────────────────────────────── */
.jd-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 15, 18, 0.65);
  border-radius: inherit;
  z-index: 50;
  backdrop-filter: blur(2px);
}

/* ── SKELETON ───────────────────────────────────────────────── */
.jd-skeleton-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: var(--space-4);
  background: var(--neutral-900);
  border: 1px solid var(--neutral-800);
}

.jd-skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--neutral-800);
}

/* ── CONTEXT MENU TRIGGER ───────────────────────────────────── */
.jd-context-trigger {
  opacity: 0;
  transition: opacity 120ms;
}

tr:hover .jd-context-trigger,
.jd-card:hover .jd-context-trigger {
  opacity: 1;
}

/* ── COMMAND PALETTE ────────────────────────────────────────── */
.jd-palette-dialog .mud-dialog {
  max-width: 600px;
  width: 95vw;
  margin-top: 10vh;
}

.jd-palette-search {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--neutral-800);
}

.jd-palette-results {
  max-height: 400px;
  overflow-y: auto;
}

.jd-palette-group {
  padding: var(--space-2) var(--space-4) var(--space-1);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.5;
}

.jd-palette-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background 100ms;
  font-size: 0.875rem;
}

.jd-palette-item:hover,
.jd-palette-item--active {
  background: rgba(242, 92, 42, 0.08);
}

.jd-palette-item__icon {
  flex-shrink: 0;
  opacity: 0.6;
}

.jd-palette-item__label { flex: 1; }

.jd-palette-item__meta {
  font-size: 0.75rem;
  opacity: 0.5;
  flex-shrink: 0;
}

.jd-palette-empty {
  padding: var(--space-8) var(--space-6);
  text-align: center;
  opacity: 0.5;
  font-size: 0.875rem;
}

/* ── AUTH LAYOUT ────────────────────────────────────────────── */
.jd-auth {
  min-height: 100vh;
  background: var(--neutral-950);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.jd-auth-card {
  width: 100%;
  max-width: 420px;
}

.jd-auth-logo {
  text-align: center;
  margin-bottom: var(--space-6);
}

.jd-auth-logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.jd-auth-logo-text span {
  color: var(--brand-orange-500);
}

.jd-auth-subtitle {
  font-size: 0.9375rem;
  text-align: center;
  opacity: 0.7;
  margin-top: var(--space-2);
  margin-bottom: var(--space-6);
}

.jd-auth-footer {
  text-align: center;
  margin-top: var(--space-4);
  font-size: 0.875rem;
  opacity: 0.6;
}

.jd-auth-footer a {
  color: var(--brand-orange-500);
  text-decoration: none;
}

/* ── FILE UPLOAD ────────────────────────────────────────────── */
.jd-dropzone {
  border: 2px dashed var(--neutral-700);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
  position: relative;
}

.jd-dropzone:hover,
.jd-dropzone--drag-over {
  border-color: var(--brand-orange-500);
  background: rgba(242, 92, 42, 0.04);
}

.jd-dropzone__icon {
  font-size: 40px;
  opacity: 0.4;
  margin-bottom: var(--space-2);
}

.jd-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.jd-file-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.jd-file-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--neutral-900);
  border: 1px solid var(--neutral-800);
  border-radius: var(--radius-md);
}

.jd-file-item__thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.jd-file-item__info { flex: 1; overflow: hidden; }

.jd-file-item__name {
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jd-file-item__size {
  font-size: 0.75rem;
  opacity: 0.5;
}

/* ── TABS NAV ───────────────────────────────────────────────── */
.jd-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--neutral-800);
  margin-bottom: var(--space-4);
}

.jd-tab {
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  background: none;
  color: inherit;
  opacity: 0.6;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: opacity 150ms, border-color 150ms, color 150ms;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.jd-tab:hover { opacity: 1; }

.jd-tab--active {
  opacity: 1;
  color: var(--brand-orange-500);
  border-bottom-color: var(--brand-orange-500);
}

/* ── FORM TOGGLE ────────────────────────────────────────────── */
.jd-toggle-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.jd-toggle-label { flex: 1; }

.jd-toggle-title {
  font-size: 0.9375rem;
  font-weight: 500;
}

.jd-toggle-description {
  font-size: 0.8125rem;
  opacity: 0.6;
  margin-top: 2px;
}

/* ============================================================
   D2 — Pantallas Core
   ============================================================ */

/* ── STATUS BADGE EXTENSIONS ─────────────────────────────────── */
.jd-badge--new         { background: var(--neutral-800);           color: var(--neutral-200);      border-color: var(--neutral-700); }
.jd-badge--in_progress { background: rgba(45,182,214,.10);         color: var(--brand-cyan-500);   border-color: var(--brand-cyan-500); }
.jd-badge--on_hold     { background: var(--warning-900);           color: var(--warning-500);      border-color: var(--warning-500); }

/* ── ONBOARDING WIZARD ──────────────────────────────────────── */
.jd-wizard { max-width: 560px; margin: 0 auto; padding: var(--space-8) var(--space-4); }

.jd-wizard-stepper { display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-8); }

.jd-wizard-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }

.jd-wizard-step__dot {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; font-weight: 700;
  border: 2px solid var(--neutral-700);
  background: var(--neutral-900); color: var(--neutral-400);
  transition: all 220ms ease;
}
.jd-wizard-step--active .jd-wizard-step__dot {
  border-color: var(--brand-orange-500); background: var(--brand-orange-500); color: #fff;
  box-shadow: 0 0 0 4px rgba(242,92,42,.18);
}
.jd-wizard-step--done .jd-wizard-step__dot {
  border-color: var(--success-500); background: var(--success-900); color: var(--success-500);
}
.jd-wizard-step__label { font-size: 0.6875rem; font-weight: 500; color: var(--neutral-400); white-space: nowrap; }
.jd-wizard-step--active .jd-wizard-step__label { color: var(--brand-orange-500); font-weight: 600; }

.jd-wizard-connector { height: 2px; flex: 1; min-width: 40px; max-width: 72px; background: var(--neutral-800); transition: background 300ms; }
.jd-wizard-connector--done { background: var(--success-500); }

.jd-wizard-card {
  border: 1px solid var(--neutral-800); border-radius: var(--radius-xl);
  padding: var(--space-8); background: var(--neutral-900);
  animation: jd-slide-in 200ms ease-out both;
}
@keyframes jd-slide-in { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:translateX(0); } }

.jd-wizard-done { display:flex; flex-direction:column; align-items:center; gap:var(--space-4); text-align:center; padding:var(--space-6) 0; }
.jd-wizard-done__check {
  width:72px; height:72px; border-radius:50%;
  background:var(--success-900); border:2px solid var(--success-500);
  display:flex; align-items:center; justify-content:center;
  animation: jd-pop-in 400ms cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes jd-pop-in { from { opacity:0; transform:scale(0.5); } to { opacity:1; transform:scale(1); } }

/* ── TICKET LIST — LAYOUT ─────────────────────────────────────── */
.jd-tickets-layout { display:grid; grid-template-columns:228px 1fr; gap:var(--space-4); align-items:start; }
.jd-tickets-layout--no-panel { display:block; }

/* ── FILTER PANEL ────────────────────────────────────────────── */
.jd-filter-panel {
  background:var(--neutral-900); border:1px solid var(--neutral-800);
  border-radius:var(--radius-lg); padding:var(--space-4);
  position:sticky; top:72px;
}
.jd-filter-panel__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4); }
.jd-filter-panel__title { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; opacity:0.5; }
.jd-filter-section { margin-bottom:var(--space-5); }
.jd-filter-section__title { font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; opacity:0.45; margin-bottom:var(--space-2); }
.jd-filter-check { display:flex; align-items:center; gap:var(--space-2); padding:3px 0; font-size:0.875rem; cursor:pointer; user-select:none; }
.jd-filter-check input[type="checkbox"] { accent-color:var(--brand-orange-500); cursor:pointer; flex-shrink:0; }
.jd-filter-section__scroll { max-height:180px; overflow-y:auto; padding-right:2px; }

/* ── TICKET THREAD ───────────────────────────────────────────── */
.jd-thread { display:flex; flex-direction:column; gap:var(--space-3); }
.jd-message { border-radius:var(--radius-lg); padding:var(--space-3) var(--space-4); border:1px solid transparent; }
.jd-message--contact  { background:var(--neutral-850); border-color:var(--neutral-800); border-left:3px solid var(--neutral-700); margin-right:var(--space-8); }
.jd-message--agent    { background:var(--neutral-900); border-color:var(--neutral-800); border-left:3px solid var(--brand-cyan-500); margin-left:var(--space-8); }
.jd-message--internal { background:rgba(246,183,60,.06); border-color:rgba(246,183,60,.25); border-left:3px solid var(--brand-yellow-500); }
.jd-message--system   { text-align:center; font-size:0.8125rem; color:var(--neutral-500); padding:var(--space-1) 0; background:none; border:none; }
.jd-message__header   { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-2); flex-wrap:wrap; }
.jd-message__author   { font-weight:600; font-size:0.8125rem; }
.jd-message__time     { font-size:0.75rem; opacity:0.5; margin-left:auto; }
.jd-message__body     { font-size:0.9375rem; line-height:1.65; overflow-wrap:break-word; word-break:break-word; }
.jd-message__body p   { margin:0 0 var(--space-2); }
.jd-message__body p:last-child { margin-bottom:0; }
.jd-internal-badge {
  display:inline-flex; align-items:center; gap:3px;
  padding:1px 8px; background:rgba(246,183,60,.15); border:1px solid rgba(246,183,60,.4);
  border-radius:var(--radius-full); font-size:0.6875rem; font-weight:700;
  color:var(--brand-yellow-500); text-transform:uppercase; letter-spacing:0.04em;
}

/* ── TICKET DETAIL HEADER ────────────────────────────────────── */
.jd-ticket-header { padding:var(--space-4) var(--space-5); border:1px solid var(--neutral-800); background:var(--neutral-900); border-radius:var(--radius-md); margin-bottom:var(--space-4); }
.jd-ticket-ref { font-family:'Consolas','Menlo',monospace; font-size:0.75rem; color:var(--neutral-400); letter-spacing:0.04em; }
.jd-ticket-title { font-size:1.0625rem; font-weight:600; margin:var(--space-1) 0 0; line-height:1.35; overflow-wrap:break-word; word-break:break-word; }

/* ── TICKET DETAIL LAYOUT ────────────────────────────────────── */
/* minmax(0,1fr) evita que un texto largo sin espacios (URL, adjunto, etc.)
   empuje la columna del hilo más allá del ancho disponible y desalinee el panel lateral. */
.jd-ticket-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:var(--space-4); align-items:start; }

/* ── TICKET SIDE PANEL ───────────────────────────────────────── */
.jd-ticket-panel { background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-md); position:sticky; top:72px; }
.jd-ticket-panel__section { padding:var(--space-4); border-bottom:1px solid var(--neutral-800); }
.jd-ticket-panel__section:last-child { border-bottom:none; }
.jd-ticket-panel__label { font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--neutral-500); margin-bottom:var(--space-2); }
.jd-ticket-panel__value { font-size:0.875rem; font-weight:500; }

/* ── SLA PROGRESS BAR ────────────────────────────────────────── */
.jd-sla-bar { margin-top:var(--space-2); }
.jd-sla-bar__track { height:6px; background:var(--neutral-800); border-radius:var(--radius-full); overflow:hidden; }
.jd-sla-bar__fill  { height:100%; border-radius:var(--radius-full); transition:width 500ms ease; }
.jd-sla-bar__fill--ok       { background:var(--success-500); }
.jd-sla-bar__fill--warning  { background:var(--warning-500); }
.jd-sla-bar__fill--breached { background:var(--error-500); }
.jd-sla-bar__meta { display:flex; justify-content:space-between; font-size:0.6875rem; margin-top:4px; opacity:0.55; }

/* ── REPLY EDITOR ────────────────────────────────────────────── */
.jd-editor { background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-md); margin-top:var(--space-3); overflow:hidden; }
.jd-editor-tabs { display:flex; border-bottom:1px solid var(--neutral-800); }
.jd-editor-tab {
  padding:var(--space-2) var(--space-5); font-size:0.8125rem; font-weight:500;
  cursor:pointer; border:none; border-bottom:2px solid transparent; margin-bottom:-1px;
  color:var(--neutral-400); background:none; transition:color 150ms,border-color 150ms;
}
.jd-editor-tab--public-active   { color:var(--brand-cyan-500); border-bottom-color:var(--brand-cyan-500); }
.jd-editor-tab--internal-active { color:var(--brand-yellow-500); border-bottom-color:var(--brand-yellow-500); }
.jd-editor-area { padding:var(--space-3) var(--space-4); }
.jd-editor-send { display:flex; align-items:center; justify-content:flex-end; gap:var(--space-3); padding:var(--space-2) var(--space-4) var(--space-3); }

/* ── CONTACT / COMPANY DRAWER ────────────────────────────────── */
.jd-drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200; animation:jd-fade-in 150ms ease-out both; }
.jd-drawer {
  position:fixed; top:0; right:0; bottom:0; width:480px;
  background:var(--neutral-900); border-left:1px solid var(--neutral-800);
  z-index:201; display:flex; flex-direction:column; overflow:hidden;
  animation:jd-drawer-in 220ms cubic-bezier(0.32,0.72,0,1) both;
}
@keyframes jd-drawer-in { from { transform:translateX(100%); } to { transform:translateX(0); } }
.jd-drawer-header { display:flex; align-items:center; justify-content:space-between; padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--neutral-800); flex-shrink:0; }
.jd-drawer-title { font-size:1rem; font-weight:600; }
.jd-drawer-body { flex:1; overflow-y:auto; padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-4); }
.jd-drawer-footer { display:flex; justify-content:flex-end; gap:var(--space-3); padding:var(--space-4) var(--space-5); border-top:1px solid var(--neutral-800); flex-shrink:0; }

/* ── CONTACT / COMPANY DETAIL HEADER ─────────────────────────── */
.jd-detail-header { padding:var(--space-5) var(--space-6); background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-lg); display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-4); }
.jd-detail-header__info { flex:1; overflow:hidden; }
.jd-detail-header__name { font-size:1.125rem; font-weight:700; margin:0 0 var(--space-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jd-detail-header__meta { font-size:0.875rem; opacity:0.65; }
.jd-detail-header__actions { display:flex; gap:var(--space-2); flex-shrink:0; }

/* ============================================================
   D3 — Settings: Agents, Teams, SLA, Automations, Notifications
   ============================================================ */

/* ── ROLE BADGES ─────────────────────────────────────────────── */
.jd-role-badge {
  display:inline-flex; align-items:center;
  padding:2px 10px; border-radius:var(--radius-sm);
  font-size:0.6875rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.05em;
  border:1px solid transparent;
  white-space:nowrap;
}
.jd-role-badge--owner      { background:rgba(242,92,42,.12); color:var(--brand-orange-500); border-color:rgba(242,92,42,.3); }
.jd-role-badge--admin      { background:rgba(47,140,207,.12); color:var(--brand-blue-500);  border-color:rgba(47,140,207,.3); }
.jd-role-badge--supervisor { background:rgba(45,182,214,.12); color:var(--brand-cyan-500);  border-color:rgba(45,182,214,.3); }
.jd-role-badge--agent      { background:var(--neutral-800);  color:var(--neutral-400);      border-color:var(--neutral-700); }

/* ── STAT CARDS ──────────────────────────────────────────────── */
.jd-stat-card {
  padding:var(--space-4);
  background:var(--neutral-850);
  border:1px solid var(--neutral-800);
  border-radius:var(--radius-md);
  text-align:center;
  height:100%;
}
.jd-stat-card__value {
  font-size:1.75rem; font-weight:700;
  color:var(--brand-orange-500); line-height:1.1;
}
.jd-stat-card__label {
  font-size:0.75rem; color:var(--neutral-400); margin-top:var(--space-1);
}

/* ── DATA TABLE ──────────────────────────────────────────────── */
.jd-data-table { border:1px solid var(--neutral-800); border-radius:var(--radius-md); overflow:hidden; }

/* ── TEAM CARDS ──────────────────────────────────────────────── */
.jd-team-card {
  background:var(--neutral-900);
  border:1px solid var(--neutral-800);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  transition:border-color 150ms;
  height:100%;
}
.jd-team-card:hover { border-color:var(--neutral-700); }
.jd-team-card__name { font-size:1rem; font-weight:600; margin:0 0 var(--space-1); }
.jd-team-card__meta { font-size:0.8125rem; color:var(--neutral-400); }
.jd-team-card__avatars { display:flex; margin-top:var(--space-3); min-height:32px; }
.jd-stacked-avatar {
  width:28px; height:28px; border-radius:50%;
  border:2px solid var(--neutral-900);
  display:flex; align-items:center; justify-content:center;
  font-size:0.625rem; font-weight:700; color:#fff;
  margin-left:-8px; flex-shrink:0; text-transform:uppercase;
}
.jd-stacked-avatar:first-child { margin-left:0; }
.jd-stacked-avatar--more { background:var(--neutral-800); color:var(--neutral-400); }

/* ── SCHEDULE EDITOR ─────────────────────────────────────────── */
.jd-schedule-row {
  display:grid;
  grid-template-columns:110px 48px 130px 18px 130px;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-2) 0;
  border-bottom:1px solid var(--neutral-800);
}
.jd-schedule-row:last-child { border-bottom:none; }
.jd-schedule-day { font-size:0.875rem; font-weight:500; }
.jd-schedule-sep { font-size:0.75rem; color:var(--neutral-500); text-align:center; }

/* ── SLA POLICY CARDS ────────────────────────────────────────── */
.jd-sla-policy-card {
  background:var(--neutral-900);
  border:1px solid var(--neutral-800);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  position:relative;
  transition:border-color 150ms;
  height:100%;
}
.jd-sla-policy-card--default { border-color:rgba(242,92,42,.35); }
.jd-sla-policy-card__badge { position:absolute; top:var(--space-3); right:var(--space-3); }
.jd-sla-policy-card__name { font-size:1rem; font-weight:600; margin:0 0 var(--space-1); }
.jd-sla-policy-card__schedule { font-size:0.8125rem; color:var(--neutral-400); margin-bottom:var(--space-3); }
.jd-sla-targets { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); }
.jd-sla-target__priority { font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; opacity:0.55; }
.jd-sla-target__values { font-size:0.8125rem; margin-top:2px; color:var(--neutral-200); }

/* ── AUTOMATION RULE LIST ────────────────────────────────────── */
.jd-automation-rule {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-3);
  background:var(--neutral-900);
  border:1px solid var(--neutral-800);
  border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);
  transition:border-color 150ms;
}
.jd-automation-rule:hover { border-color:var(--neutral-700); }
.jd-automation-rule--inactive { opacity:0.55; }
.jd-automation-rule__name { font-size:0.9375rem; font-weight:500; margin-bottom:var(--space-1); }
.jd-automation-rule__meta { display:flex; align-items:center; gap:var(--space-2); font-size:0.8125rem; color:var(--neutral-400); flex-wrap:wrap; }
.jd-rule-pill {
  display:inline-block; padding:1px 8px;
  background:var(--neutral-800); border-radius:var(--radius-full);
  font-size:0.6875rem; font-weight:500;
}
.jd-rule-pill--action {
  background:rgba(45,182,214,.12); color:var(--brand-cyan-500);
}

/* ── AUTOMATION BUILDER ──────────────────────────────────────── */
.jd-builder { max-width:800px; padding:var(--space-4) 0; }
.jd-builder__section {
  background:var(--neutral-900);
  border:1px solid var(--neutral-800);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  margin-bottom:var(--space-4);
}
.jd-builder__section-title {
  font-size:0.6875rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--neutral-500); margin-bottom:var(--space-4);
  display:block;
}
.jd-cond-row {
  display:grid;
  grid-template-columns:175px 140px 1fr 36px;
  gap:var(--space-2);
  align-items:center;
  margin-bottom:var(--space-2);
  animation:jd-fade-in 150ms ease-out both;
}
.jd-act-row {
  display:grid;
  grid-template-columns:185px 1fr 36px;
  gap:var(--space-2);
  align-items:center;
  margin-bottom:var(--space-2);
  animation:jd-fade-in 150ms ease-out both;
}
.jd-match-toggle {
  display:inline-flex;
  border:1px solid var(--neutral-700);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.jd-match-btn {
  padding:5px 14px; font-size:0.8125rem; font-weight:500;
  cursor:pointer; border:none; background:none; color:var(--neutral-400);
  transition:background 150ms, color 150ms;
}
.jd-match-btn:hover { color:var(--neutral-200); }
.jd-match-btn--active { background:var(--brand-orange-500); color:#fff; }

/* ── NOTIFICATION BELL ───────────────────────────────────────── */
.jd-notif-list { min-width:340px; max-height:440px; overflow-y:auto; }
.jd-notif-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--neutral-800);
  font-size:0.875rem; font-weight:600;
  position:sticky; top:0;
  background:var(--neutral-900);
  z-index:1;
}
.jd-notif-item {
  display:flex; align-items:flex-start; gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--neutral-800);
  cursor:pointer; transition:background 120ms;
  user-select:none;
}
.jd-notif-item:hover { background:var(--neutral-850); }
.jd-notif-item--unread { background:rgba(242,92,42,.04); }
.jd-notif-item:last-child { border-bottom:none; }
.jd-notif-icon {
  flex-shrink:0; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-top:2px;
}
.jd-notif-icon--assigned { background:rgba(47,140,207,.15); color:var(--brand-blue-500); }
.jd-notif-icon--message  { background:rgba(45,182,214,.15); color:var(--brand-cyan-500); }
.jd-notif-icon--status   { background:rgba(34,197,94,.12);  color:var(--success-500); }
.jd-notif-icon--sla      { background:rgba(246,183,60,.12); color:var(--warning-500); }
.jd-notif-icon--breach   { background:rgba(239,68,68,.12);  color:var(--error-500); }
.jd-notif-body { flex:1; min-width:0; }
.jd-notif-title { font-size:0.875rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jd-notif-title--unread { font-weight:700; }
.jd-notif-msg  { font-size:0.8125rem; color:var(--neutral-400); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jd-notif-time { font-size:0.6875rem; color:var(--neutral-500); margin-top:3px; }
.jd-notif-dot  { width:8px; height:8px; border-radius:50%; background:var(--brand-orange-500); flex-shrink:0; margin-top:6px; }
.jd-notif-footer {
  display:flex; justify-content:center;
  padding:var(--space-2) var(--space-4);
  border-top:1px solid var(--neutral-800);
  position:sticky; bottom:0;
  background:var(--neutral-900);
}

/* ============================================================
   D4 — Portal, KB agent, Upload, Email Settings
   ============================================================ */

/* ── PORTAL LAYOUT SHELL ─────────────────────────────────────── */
.jd-portal-layout { min-height:100vh; background:var(--neutral-950); display:flex; flex-direction:column; }
.jd-portal-topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 var(--space-5); height:52px; flex-shrink:0;
    background:rgba(10,10,10,.92); backdrop-filter:blur(12px) saturate(160%);
    border-bottom:1px solid rgba(242,92,42,.14);
    position:sticky; top:0; z-index:100;
}
.jd-portal-topbar__brand {
    display:flex; align-items:center; gap:var(--space-2);
    text-decoration:none; color:var(--neutral-100);
    font-weight:700; letter-spacing:-0.01em; font-size:0.9375rem;
}
.jd-portal-topbar__brand-mark {
    width:30px; height:30px; border-radius:var(--radius-sm);
    background:var(--brand-orange-500); color:#fff;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.jd-portal-topbar__chip {
    display:inline-flex; align-items:center; gap:4px;
    font-size:0.6875rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--brand-orange-400);
    background:rgba(242,92,42,.08); border:1px solid rgba(242,92,42,.2);
    border-radius:var(--radius-full); padding:3px 10px;
}
.jd-portal-layout__main { flex:1; }

/* ── PORTAL LAYOUT ───────────────────────────────────────────── */
.jd-portal-bg { min-height:calc(100vh - 52px); background:var(--neutral-950, #0a0a0a); }
.jd-portal-header { text-align:center; padding:var(--space-8) 0 var(--space-6); }
.jd-portal-header__logo { height:64px; object-fit:contain; margin:0 auto; display:block; margin-bottom:var(--space-4); }
.jd-portal-header__icon { width:72px; height:72px; border-radius:50%; background:rgba(242,92,42,.12); border:2px solid rgba(242,92,42,.3); display:flex; align-items:center; justify-content:center; margin:0 auto var(--space-4); font-size:2rem; color:var(--brand-orange-500); }
.jd-portal-topnav { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-5); }
.jd-portal-footer { display:flex; align-items:center; justify-content:center; gap:var(--space-1); margin-top:var(--space-8); font-size:0.8125rem; color:var(--neutral-400); }
.jd-portal-footer__link { color:var(--brand-orange-500); text-decoration:none; }
.jd-portal-footer__link:hover { text-decoration:underline; }
.jd-portal-error { text-align:center; padding:var(--space-12) var(--space-4); }
.jd-portal-empty { text-align:center; padding:var(--space-8) var(--space-4); }
.jd-portal-success { text-align:center; background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-lg); padding:var(--space-8); }
.jd-portal-skeleton-row { height:60px; background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-md); margin-bottom:var(--space-2); animation:jd-pulse 1.4s ease-in-out infinite; }

/* ── PORTAL AUTH CARD ────────────────────────────────────────── */
.jd-portal-auth-card { background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-lg); padding:var(--space-5); margin-bottom:var(--space-4); }
.jd-portal-auth-card__body { }
.jd-portal-auth-card__row { display:flex; gap:var(--space-3); align-items:flex-end; }
.jd-portal-auth-card__success { padding:var(--space-2); }

/* ── PORTAL ACTION CARDS ─────────────────────────────────────── */
.jd-portal-action-card { background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-lg); padding:var(--space-5); text-align:center; cursor:pointer; transition:border-color 150ms, transform 150ms, box-shadow 150ms; height:100%; }
.jd-portal-action-card:hover { border-color:var(--brand-orange-500); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.jd-portal-action-card__icon { width:56px; height:56px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; margin:0 auto var(--space-3); font-size:1.5rem; }
.jd-portal-action-card__icon--primary { background:rgba(242,92,42,.12); color:var(--brand-orange-500); }
.jd-portal-action-card__icon--blue    { background:rgba(47,140,207,.12); color:var(--brand-blue-500); }
.jd-portal-action-card__icon--green   { background:rgba(34,197,94,.1);   color:var(--success-500); }
.jd-portal-action-card__title { font-size:1rem; font-weight:700; margin-bottom:var(--space-1); }
.jd-portal-action-card__desc  { font-size:0.8125rem; color:var(--neutral-400); }

/* ── PORTAL TICKET LIST ──────────────────────────────────────── */
.jd-portal-ticket-list { display:flex; flex-direction:column; gap:var(--space-2); }
.jd-portal-ticket-row { display:flex; align-items:center; gap:var(--space-3); background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); cursor:pointer; transition:border-color 120ms; }
.jd-portal-ticket-row:hover { border-color:var(--neutral-600); }
.jd-portal-ticket-row__ref { font-size:0.6875rem; font-weight:700; color:var(--neutral-500); white-space:nowrap; font-family:monospace; }
.jd-portal-ticket-row__body { flex:1; min-width:0; }
.jd-portal-ticket-row__title { font-size:0.9375rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jd-portal-ticket-row__meta { display:flex; align-items:center; gap:var(--space-2); margin-top:2px; }
.jd-portal-ticket-row__sep  { color:var(--neutral-600); }
.jd-portal-ticket-row__date { font-size:0.75rem; color:var(--neutral-400); }

/* ── PORTAL STATUS BADGES ────────────────────────────────────── */
.jd-portal-status { display:inline-block; padding:2px 8px; border-radius:var(--radius-full); font-size:0.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
.jd-portal-status--new         { background:rgba(156,163,175,.1); color:var(--neutral-400); }
.jd-portal-status--open        { background:rgba(47,140,207,.12); color:var(--brand-blue-500); }
.jd-portal-status--in_progress { background:rgba(242,92,42,.12);  color:var(--brand-orange-500); }
.jd-portal-status--on_hold     { background:rgba(246,183,60,.12); color:var(--warning-500); }
.jd-portal-status--resolved    { background:rgba(34,197,94,.1);   color:var(--success-500); }
.jd-portal-status--closed      { background:var(--neutral-800);   color:var(--neutral-400); }

/* ── PORTAL TICKET DETAIL ────────────────────────────────────── */
.jd-portal-ticket-header { background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-lg); padding:var(--space-5); margin-bottom:var(--space-5); }
.jd-portal-ticket-header__ref { font-size:0.75rem; font-weight:700; color:var(--neutral-500); font-family:monospace; }
.jd-portal-thread { display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-5); }
.jd-portal-msg { display:flex; gap:var(--space-3); }
.jd-portal-msg__avatar { width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-top:4px; }
.jd-portal-msg--contact .jd-portal-msg__avatar { background:rgba(242,92,42,.12); color:var(--brand-orange-500); }
.jd-portal-msg--agent   .jd-portal-msg__avatar { background:rgba(47,140,207,.12); color:var(--brand-blue-500); }
.jd-portal-msg__body { flex:1; background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:0 var(--radius-md) var(--radius-md) var(--radius-md); padding:var(--space-3) var(--space-4); }
.jd-portal-msg--contact .jd-portal-msg__body { background:rgba(242,92,42,.05); border-color:rgba(242,92,42,.2); }
.jd-portal-msg__meta { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-2); }
.jd-portal-msg__author { font-size:0.8125rem; font-weight:700; }
.jd-portal-msg__time   { font-size:0.75rem; color:var(--neutral-400); }
.jd-portal-msg__content { font-size:0.9375rem; line-height:1.6; }
.jd-portal-reply { background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-lg); padding:var(--space-5); }

/* ── PORTAL FORM CARD ────────────────────────────────────────── */
.jd-portal-form-card { background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-lg); padding:var(--space-6); }

/* ── PORTAL KB ────────────────────────────────────────────────── */
.jd-portal-search { margin-bottom:var(--space-4); }
.jd-portal-kb-card { background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:border-color 150ms; height:100%; }
.jd-portal-kb-card:hover { border-color:var(--neutral-700); }
.jd-portal-kb-card__header { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4); }
.jd-portal-kb-card__icon { width:40px; height:40px; border-radius:var(--radius-md); background:rgba(242,92,42,.1); color:var(--brand-orange-500); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.jd-portal-kb-card__info { flex:1; min-width:0; }
.jd-portal-kb-card__name { font-size:0.9375rem; font-weight:600; }
.jd-portal-kb-card__count { font-size:0.75rem; color:var(--neutral-400); }
.jd-portal-kb-card__desc { font-size:0.8125rem; color:var(--neutral-400); padding:0 var(--space-4) var(--space-3); }
.jd-portal-kb-card__articles { border-top:1px solid var(--neutral-800); }
.jd-portal-kb-card__article-row { display:flex; align-items:center; padding:var(--space-2) var(--space-4); font-size:0.875rem; cursor:pointer; transition:background 120ms; }
.jd-portal-kb-card__article-row:hover { background:var(--neutral-850); }
.jd-portal-kb-card__article-row--sub { padding-left:calc(var(--space-4) + 12px); }
.jd-portal-kb-card__sub-cat { font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--neutral-500); padding:var(--space-2) var(--space-4) var(--space-1); }
.jd-portal-kb-results { display:flex; flex-direction:column; gap:var(--space-2); }
.jd-portal-kb-result-row { display:flex; align-items:center; background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); cursor:pointer; transition:border-color 120ms; }
.jd-portal-kb-result-row:hover { border-color:var(--neutral-700); }
.jd-portal-kb-result-row__title { font-size:0.9375rem; font-weight:500; }
.jd-portal-kb-result-row__meta { font-size:0.75rem; color:var(--neutral-400); }

/* ── PORTAL BREADCRUMB ───────────────────────────────────────── */
.jd-portal-breadcrumb { display:flex; align-items:center; gap:var(--space-1); font-size:0.8125rem; color:var(--neutral-400); margin-bottom:var(--space-5); flex-wrap:wrap; }
.jd-portal-breadcrumb__link { color:var(--neutral-400); text-decoration:none; }
.jd-portal-breadcrumb__link:hover { color:var(--neutral-200); }
.jd-portal-breadcrumb__current { color:var(--neutral-300); }

/* ── ARTICLE READING ─────────────────────────────────────────── */
.jd-article-header { margin-bottom:var(--space-5); }
.jd-article-meta { display:flex; align-items:center; gap:var(--space-2); font-size:0.8125rem; color:var(--neutral-400); margin-top:var(--space-2); }
.jd-article-meta__sep { opacity:0.4; }
.jd-article-body { font-size:1.0625rem; line-height:1.75; color:var(--neutral-100); margin-bottom:var(--space-8); }
.jd-article-body h1, .jd-article-body h2, .jd-article-body h3 { font-weight:700; margin:var(--space-6) 0 var(--space-3); }
.jd-article-body p { margin:0 0 var(--space-4); }
.jd-article-body ul, .jd-article-body ol { padding-left:1.5rem; margin:0 0 var(--space-4); }
.jd-article-body li { margin-bottom:var(--space-1); }
.jd-article-body code { background:var(--neutral-800); padding:2px 6px; border-radius:var(--radius-sm); font-size:0.875em; }
.jd-article-body pre  { background:var(--neutral-850); padding:var(--space-4); border-radius:var(--radius-md); overflow-x:auto; margin-bottom:var(--space-4); }
.jd-article-body blockquote { border-left:3px solid var(--brand-orange-500); padding-left:var(--space-4); color:var(--neutral-400); margin:var(--space-4) 0; }
.jd-article-votes { border-top:1px solid var(--neutral-800); padding-top:var(--space-6); margin-bottom:var(--space-6); }
.jd-article-cta { background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-lg); padding:var(--space-5); text-align:center; }

/* ── KB AGENT PANEL ──────────────────────────────────────────── */
.jd-kb-sidebar { padding-right:var(--space-3); }
.jd-kb-nav-item { display:flex; align-items:center; padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); cursor:pointer; font-size:0.875rem; color:var(--neutral-300); transition:background 120ms, color 120ms; margin-bottom:2px; }
.jd-kb-nav-item:hover { background:var(--neutral-800); }
.jd-kb-nav-item--active { background:rgba(242,92,42,.1); color:var(--brand-orange-500); font-weight:600; }
.jd-kb-nav-item--sub { padding-left:var(--space-5); font-size:0.8125rem; }
.jd-kb-nav-count { font-size:0.75rem; font-weight:600; opacity:0.5; margin-left:auto; }
.jd-kb-status { display:inline-block; padding:2px 8px; border-radius:var(--radius-full); font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }
.jd-kb-status--published { background:rgba(34,197,94,.1);   color:var(--success-500); }
.jd-kb-status--draft     { background:rgba(246,183,60,.12); color:var(--warning-500); }
.jd-kb-status--archived  { background:var(--neutral-800);   color:var(--neutral-400); }

/* ── EMAIL SETTINGS ──────────────────────────────────────────── */
.jd-settings-section { background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-lg); padding:var(--space-5); }
.jd-settings-section__title { font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--neutral-500); margin-bottom:var(--space-3); display:block; }
.jd-email-preview { background:var(--neutral-850); border:1px solid var(--neutral-800); border-radius:var(--radius-md); padding:var(--space-4); font-family:monospace; font-size:0.875rem; }
.jd-email-preview__from, .jd-email-preview__subject { display:flex; gap:var(--space-2); margin-bottom:var(--space-2); }
.jd-email-preview__label { color:var(--neutral-500); white-space:nowrap; }
.jd-email-preview__value { color:var(--neutral-200); word-break:break-all; }
.jd-email-preview__body { border-top:1px solid var(--neutral-800); margin-top:var(--space-3); padding-top:var(--space-3); font-family:system-ui, sans-serif; font-size:0.875rem; color:var(--neutral-300); line-height:1.6; }
.jd-email-preview__body p { margin:0 0 var(--space-2); }

/* ── EMAIL PROVIDER CARDS ────────────────────────────────────── */
.jd-provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.jd-provider-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--neutral-850);
  border: 1px solid var(--neutral-800);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.jd-provider-card:hover {
  border-color: var(--neutral-600);
  transform: translateY(-1px);
}

.jd-provider-card:focus-visible {
  outline: 2px solid var(--brand-orange-500);
  outline-offset: 2px;
}

.jd-provider-card--active {
  border-color: var(--brand-orange-500);
  background: rgba(242, 92, 42, 0.06);
}

.jd-provider-card__icon {
  color: var(--neutral-400);
  margin-bottom: var(--space-1);
}

.jd-provider-card--active .jd-provider-card__icon {
  color: var(--brand-orange-500);
}

.jd-provider-card__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--neutral-100);
}

.jd-provider-card__desc {
  font-size: 0.8125rem;
  color: var(--neutral-400);
  line-height: 1.5;
}

.jd-provider-card__tag {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--neutral-800);
  color: var(--neutral-400);
}

.jd-provider-card--active .jd-provider-card__tag {
  background: rgba(242, 92, 42, 0.15);
  color: var(--brand-orange-500);
}

.jd-provider-config {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--neutral-800);
  animation: jd-fade-in 150ms ease-out both;
}

/* ── ATTACHMENT LIST ─────────────────────────────────────────── */
.jd-attachment-list { display:flex; flex-direction:column; gap:var(--space-2); }
.jd-attachment-item { display:flex; align-items:center; gap:var(--space-3); background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); text-decoration:none; color:inherit; transition:border-color 120ms; }
.jd-attachment-item:hover { border-color:var(--neutral-600); }
.jd-attachment-item__icon { color:var(--brand-orange-500); flex-shrink:0; }
.jd-attachment-item__info { flex:1; min-width:0; }
.jd-attachment-item__name { font-size:0.875rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jd-attachment-item__size { font-size:0.75rem; color:var(--neutral-400); }
.jd-attachment-item__dl { color:var(--neutral-400); flex-shrink:0; opacity:0; transition:opacity 150ms; }
.jd-attachment-item:hover .jd-attachment-item__dl { opacity:1; }

/* ── FILE UPLOAD PROGRESS ────────────────────────────────────── */
.jd-file-item__uploaded { display:flex; align-items:center; font-size:0.75rem; color:var(--success-500); margin-top:2px; }
.jd-file-item__error    { font-size:0.75rem; color:var(--error-500); margin-top:2px; }

/* ── PRIORITY DOTS ───────────────────────────────────────────── */
.jd-priority-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.jd-priority-dot--urgent { background:var(--error-500); }
.jd-priority-dot--high   { background:var(--brand-orange-500); }
.jd-priority-dot--medium { background:var(--warning-500); }

/* ============================================================
   D5 — Reportes, CSAT, Respuestas Predefinidas, Workspace, Perfil
   ============================================================ */

/* ── DATE PRESET BAR ─────────────────────────────────────────── */
.jd-date-preset-bar { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); }
.jd-date-preset-bar__presets { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.jd-date-preset-btn {
  padding:6px 14px; border-radius:var(--radius-full);
  border:1px solid var(--neutral-700); background:transparent;
  color:var(--neutral-400); font-size:0.8125rem; font-weight:500;
  cursor:pointer; transition:all 120ms;
}
.jd-date-preset-btn:hover { border-color:var(--neutral-500); color:var(--neutral-200); }
.jd-date-preset-btn--active { background:rgba(242,92,42,.12); border-color:var(--brand-orange-500); color:var(--brand-orange-500); }
.jd-date-preset-bar__custom { display:flex; align-items:center; gap:var(--space-3); }
.jd-date-picker-compact { max-width:160px; }

/* ── KPI CARDS (reports) ─────────────────────────────────────── */
.jd-kpi-row {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:var(--space-3);
}
.jd-kpi-card {
  background:var(--neutral-900);
  border:1px solid var(--neutral-800);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  display:flex; align-items:center; gap:var(--space-3);
  transition:border-color 120ms;
}
.jd-kpi-card:hover { border-color:var(--neutral-700); }
.jd-kpi-card__icon {
  width:40px; height:40px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.jd-kpi-card__icon--warning { background:rgba(246,183,60,.1);  color:var(--warning-500); }
.jd-kpi-card__icon--success { background:rgba(34,197,94,.1);   color:var(--success-500); }
.jd-kpi-card__icon--info    { background:rgba(45,182,214,.1);  color:var(--info-500); }
.jd-kpi-card__icon--csat    { background:rgba(246,183,60,.12); color:var(--brand-yellow-500); }
.jd-kpi-card__icon--error   { background:rgba(239,68,68,.1);   color:var(--error-500); }
.jd-kpi-card__icon--neutral { background:var(--neutral-800);   color:var(--neutral-400); }
.jd-kpi-card__content { flex:1; min-width:0; }
.jd-kpi-card__value { font-size:1.625rem; font-weight:700; line-height:1.15; }
.jd-kpi-card__label { font-size:0.75rem; color:var(--neutral-400); margin-top:2px; }

/* ── REPORT TABS / SECTIONS ──────────────────────────────────── */
.jd-report-tabs .mud-tab { font-size:0.875rem; }
.jd-report-section-title {
  font-size:0.6875rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--neutral-500);
}

/* ── VOLUME CHART ────────────────────────────────────────────── */
.jd-volume-chart { display:flex; flex-direction:column; gap:4px; }
.jd-volume-row { display:grid; grid-template-columns:50px 1fr 64px; align-items:center; gap:var(--space-3); padding:4px 0; }
.jd-volume-date { font-size:0.75rem; color:var(--neutral-500); text-align:right; }
.jd-volume-bars { display:flex; flex-direction:column; gap:3px; }
.jd-volume-bar-track { background:var(--neutral-800); border-radius:var(--radius-full); height:7px; overflow:hidden; }
.jd-volume-bar { height:100%; border-radius:var(--radius-full); transition:width 400ms ease; }
.jd-volume-bar--created  { background:var(--info-500); }
.jd-volume-bar--resolved { background:var(--success-500); }
.jd-volume-counts { display:flex; gap:var(--space-2); justify-content:flex-end; }
.jd-volume-count--created  { font-size:0.75rem; color:var(--info-500); font-weight:600; }
.jd-volume-count--resolved { font-size:0.75rem; color:var(--success-500); font-weight:600; }
.jd-volume-legend { font-size:0.75rem; color:var(--neutral-400); display:flex; align-items:center; gap:var(--space-2); }
.jd-legend-dot { display:inline-block; width:10px; height:10px; border-radius:50%; }
.jd-legend-dot--created  { background:var(--info-500); }
.jd-legend-dot--resolved { background:var(--success-500); }
.ml-4 { margin-left:1rem; }

/* ── AGENT STATS ─────────────────────────────────────────────── */
.jd-agent-stat { display:inline-flex; align-items:center; justify-content:center;
  padding:2px 10px; border-radius:var(--radius-full); font-size:0.8125rem; font-weight:700; }
.jd-agent-stat--resolved { background:rgba(34,197,94,.12); color:var(--success-500); }

/* ── MINI PROGRESS BAR ───────────────────────────────────────── */
.jd-mini-progress { width:80px; height:6px; background:var(--neutral-800); border-radius:var(--radius-full); overflow:hidden; }
.jd-mini-progress__fill { height:100%; background:var(--brand-orange-500); border-radius:var(--radius-full); transition:width 400ms ease; }

/* ── DISTRIBUTION BARS ───────────────────────────────────────── */
.jd-dist-card { background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-lg); padding:var(--space-5); height:100%; }
.jd-dist-row { display:grid; grid-template-columns:110px 1fr 80px; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3); }
.jd-dist-row:last-child { margin-bottom:0; }
.jd-dist-label { display:flex; align-items:center; gap:var(--space-2); font-size:0.875rem; color:var(--neutral-300); }
.jd-dist-bar-track { background:var(--neutral-800); border-radius:var(--radius-full); height:8px; overflow:hidden; }
.jd-dist-bar { height:100%; border-radius:var(--radius-full); transition:width 500ms ease; background:var(--brand-cyan-500); }
.jd-dist-bar--channel { background:var(--brand-cyan-500); }
.jd-dist-count { font-size:0.75rem; color:var(--neutral-400); text-align:right; }
.jd-dist-pct { font-weight:600; color:var(--neutral-300); margin-left:4px; }

/* ── SLA COMPLIANCE CARD ─────────────────────────────────────── */
.jd-sla-compliance-grid { display:grid; grid-template-columns:1fr repeat(3, 120px); gap:var(--space-4); align-items:start; }
@media (max-width:900px) { .jd-sla-compliance-grid { grid-template-columns:1fr 1fr; } }
.jd-sla-big-card { background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-lg); padding:var(--space-5); }
.jd-sla-big-card__value { font-size:3rem; font-weight:800; line-height:1; }
.jd-sla-big-card__label { font-size:0.875rem; color:var(--neutral-400); margin-top:var(--space-2); }
.jd-sla-progress-track { background:var(--neutral-800); border-radius:var(--radius-full); height:10px; overflow:hidden; }
.jd-sla-progress-fill { height:100%; border-radius:var(--radius-full); transition:width 600ms ease; }
.jd-sla-stat-mini { background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-lg); padding:var(--space-4); text-align:center; }
.jd-sla-stat-mini__value { font-size:1.75rem; font-weight:700; }
.jd-sla-stat-mini__label { font-size:0.75rem; color:var(--neutral-400); margin-top:var(--space-1); }

/* ── CSAT COMMENTS ───────────────────────────────────────────── */
.jd-csat-comments { display:flex; flex-direction:column; gap:var(--space-3); }
.jd-csat-comment-card { background:var(--neutral-900); border:1px solid var(--neutral-800); border-radius:var(--radius-md); padding:var(--space-4); }
.jd-csat-comment-card__header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-2); }
.jd-csat-comment-card__date { font-size:0.75rem; color:var(--neutral-500); }
.jd-csat-comment-card__body { font-size:0.875rem; color:var(--neutral-300); line-height:1.55; }
.jd-ticket-ref-chip { padding:2px 8px; background:var(--neutral-800); border:1px solid var(--neutral-700); border-radius:var(--radius-sm); font-size:0.75rem; font-weight:600; color:var(--neutral-300); }

/* ── CSAT SURVEY PAGE ────────────────────────────────────────── */
.jd-csat-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--neutral-950); padding:var(--space-6) var(--space-4);
}
.jd-csat-container {
  background:var(--neutral-900);
  border:1px solid var(--neutral-800);
  border-radius:var(--radius-xl);
  padding:var(--space-8) var(--space-8);
  max-width:480px; width:100%;
  text-align:center;
}
.jd-csat-container--error { padding:var(--space-8); }
.jd-csat-container--thanks { }
.jd-csat-brand { display:flex; align-items:center; justify-content:center; }
.jd-csat-brand__name { font-size:0.9375rem; font-weight:700; color:var(--neutral-400); }
.jd-csat-title { font-size:1.375rem; font-weight:700; color:var(--neutral-50); margin-bottom:var(--space-2); }
.jd-csat-subtitle { font-size:0.9375rem; color:var(--neutral-400); line-height:1.6; margin-top:var(--space-2); }
.jd-csat-ticket-ref { font-size:0.8125rem; color:var(--neutral-500); display:flex; align-items:center; justify-content:center; gap:var(--space-1); }
.jd-csat-stars { display:flex; justify-content:center; gap:var(--space-2); }
.jd-csat-star-btn {
  background:none; border:none; cursor:pointer; padding:4px;
  border-radius:var(--radius-md); transition:transform 120ms, color 120ms;
  color:var(--neutral-600);
}
.jd-csat-star-btn:hover { transform:scale(1.15); color:var(--brand-yellow-500); }
.jd-csat-star-btn--active { color:var(--brand-yellow-500); }
.jd-csat-star-btn--hover { color:var(--brand-yellow-500); }
.jd-csat-score-label { font-size:1rem; color:var(--neutral-400); min-height:1.5rem; transition:all 200ms; }
.jd-csat-score-label--visible { color:var(--neutral-200); font-weight:500; }
.jd-csat-comment-field { text-align:left; }
.jd-csat-submit-btn { font-weight:600 !important; }
.jd-csat-score-recap { display:flex; justify-content:center; gap:var(--space-1); }
.jd-csat-check-circle { margin-bottom:var(--space-4); }
@keyframes jd-csat-fade-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.jd-csat-thanks-animate { animation:jd-csat-fade-in 350ms ease-out; }

/* ── CANNED RESPONSES ────────────────────────────────────────── */
.jd-settings-toolbar { display:flex; align-items:center; gap:var(--space-4); }
.jd-canned-list { display:flex; flex-direction:column; border:1px solid var(--neutral-800); border-radius:var(--radius-lg); overflow:hidden; }
.jd-canned-row {
  display:grid; grid-template-columns:1fr 100px 80px;
  align-items:center; gap:var(--space-4); padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--neutral-800); transition:background 120ms;
}
.jd-canned-row:last-child { border-bottom:none; }
.jd-canned-row:hover { background:var(--neutral-850); }
.jd-canned-row__main { min-width:0; }
.jd-canned-row__name { font-size:0.9375rem; font-weight:600; color:var(--neutral-100); }
.jd-canned-row__category {
  display:inline-block; padding:1px 8px; margin-top:var(--space-1);
  background:var(--neutral-800); border-radius:var(--radius-full);
  font-size:0.6875rem; font-weight:600; color:var(--neutral-400);
  text-transform:uppercase; letter-spacing:0.05em;
}
.jd-canned-row__preview { font-size:0.8125rem; color:var(--neutral-500); margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jd-canned-row__meta { }
.jd-canned-row__date { font-size:0.75rem; color:var(--neutral-500); }
.jd-canned-row__actions { display:flex; gap:var(--space-1); justify-content:flex-end; }
.jd-variables-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--space-2); margin-top:var(--space-3); }
.jd-variable-item {
  display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3);
  background:var(--neutral-850); border:1px solid var(--neutral-800);
  border-radius:var(--radius-md); cursor:pointer; transition:border-color 120ms;
}
.jd-variable-item:hover { border-color:var(--brand-cyan-500); }
.jd-variable-chip {
  font-size:0.8125rem; padding:2px 8px; background:rgba(45,182,214,.1);
  border:1px solid rgba(45,182,214,.25); border-radius:var(--radius-sm);
  color:var(--brand-cyan-500); white-space:nowrap; flex-shrink:0;
}
.jd-variable-desc { font-size:0.8125rem; color:var(--neutral-400); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jd-canned-preview-box { background:var(--neutral-850); border:1px solid rgba(45,182,214,.2); border-radius:var(--radius-md); padding:var(--space-4); }
.jd-canned-preview-box__label { font-size:0.75rem; font-weight:600; color:var(--brand-cyan-500); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:var(--space-2); }
.jd-canned-preview-box__content { font-size:0.875rem; color:var(--neutral-300); line-height:1.6; }
.jd-variables-inline { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); padding:var(--space-3); background:var(--neutral-850); border-radius:var(--radius-md); border:1px solid var(--neutral-800); }
.jd-variables-inline__label { font-size:0.75rem; color:var(--neutral-500); white-space:nowrap; }
.jd-var-chip-btn {
  padding:3px 10px; background:var(--neutral-800); border:1px solid var(--neutral-700);
  border-radius:var(--radius-full); font-size:0.75rem; color:var(--neutral-300);
  cursor:pointer; transition:all 120ms; font-family:monospace;
}
.jd-var-chip-btn:hover { background:rgba(45,182,214,.1); border-color:var(--brand-cyan-500); color:var(--brand-cyan-500); }

/* ── WORKSPACE SETTINGS ──────────────────────────────────────── */
.jd-settings-tabs .mud-tab { font-size:0.875rem; }
.jd-settings-tab-content { padding:var(--space-5) 0; max-width:700px; }
.jd-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-3) var(--space-4); background:var(--neutral-850); border:1px solid var(--neutral-800); border-radius:var(--radius-md); }
.jd-toggle-row__content { flex:1; }
.jd-toggle-row__title { font-size:0.9375rem; font-weight:500; }
.jd-toggle-row__desc { font-size:0.8125rem; color:var(--neutral-400); margin-top:2px; }
.jd-plan-info { display:flex; flex-direction:column; gap:var(--space-3); }
.jd-plan-info__item { display:flex; align-items:center; gap:var(--space-3); }
.jd-plan-info__label { font-size:0.8125rem; color:var(--neutral-500); width:140px; flex-shrink:0; }
.jd-plan-info__value { font-size:0.875rem; color:var(--neutral-300); }
.jd-plan-badge { display:inline-flex; padding:3px 12px; background:rgba(242,92,42,.1); border:1px solid rgba(242,92,42,.25); border-radius:var(--radius-full); font-size:0.8125rem; font-weight:700; color:var(--brand-orange-500); text-transform:uppercase; letter-spacing:0.04em; }
.jd-logo-preview { }
.jd-logo-preview__img-wrap { display:inline-flex; padding:var(--space-3) var(--space-4); background:var(--neutral-850); border:1px solid var(--neutral-800); border-radius:var(--radius-md); }
.jd-logo-preview__img { max-height:60px; max-width:200px; object-fit:contain; }
.jd-typology-list { display:flex; flex-direction:column; border:1px solid var(--neutral-800); border-radius:var(--radius-lg); overflow:hidden; }
.jd-typology-row { display:grid; grid-template-columns:20px 1fr 90px 80px 72px; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--neutral-800); transition:background 120ms; }
.jd-typology-row:last-child { border-bottom:none; }
.jd-typology-row:hover { background:var(--neutral-850); }
.jd-typology-row__swatch { width:20px; height:20px; border-radius:var(--radius-sm); flex-shrink:0; }
.jd-typology-row__name { font-size:0.9375rem; font-weight:500; }
.jd-typology-row__color { font-size:0.75rem; color:var(--neutral-500); font-family:monospace; }
.jd-typology-row__order { font-size:0.75rem; color:var(--neutral-500); }
.jd-typology-row__actions { display:flex; gap:4px; justify-content:flex-end; }
.jd-color-presets { display:flex; align-items:center; gap:6px; }
.jd-color-preset-btn { width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform 120ms, border-color 120ms; flex-shrink:0; }
.jd-color-preset-btn:hover { transform:scale(1.2); border-color:rgba(255,255,255,.3); }

/* ── PROFILE PAGE ────────────────────────────────────────────── */
.jd-profile-card {
  background:var(--neutral-900);
  border:1px solid var(--neutral-800);
  border-radius:var(--radius-xl);
  padding:var(--space-6);
  text-align:center;
  position:sticky; top:80px;
}
.jd-profile-card__avatar-wrap { display:flex; justify-content:center; margin-bottom:var(--space-4); }
.jd-profile-card__name { font-size:1.125rem; font-weight:700; }
.jd-profile-card__email { font-size:0.875rem; color:var(--neutral-400); margin-top:var(--space-1); word-break:break-all; }
.jd-profile-card__role { margin-top:var(--space-3); }
.jd-profile-card__meta { display:flex; flex-direction:column; gap:var(--space-2); }
.jd-profile-card__meta-item { display:flex; align-items:center; justify-content:center; gap:var(--space-2); font-size:0.8125rem; color:var(--neutral-500); }
.jd-security-info { display:flex; align-items:flex-start; gap:var(--space-4); padding:var(--space-4); background:var(--neutral-850); border:1px solid var(--neutral-800); border-radius:var(--radius-md); }
.jd-priority-dot--low    { background:var(--neutral-400); }

/* ============================================================
   D6 — Pulido Final: Micro-interacciones, Accesibilidad,
        Responsive, Tema Claro, Performance, Error Pages
   ============================================================ */

/* ── SKIP TO CONTENT (accesibilidad) ────────────────────────── */
.jd-skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background: var(--brand-orange-500);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
}
.jd-skip-link:focus { left: var(--space-2); outline: 2px solid #fff; outline-offset: 2px; }

/* ── FOCUS RING (mejorado WCAG AA) ──────────────────────────── */
:focus-visible {
  outline: 2px solid var(--brand-orange-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible { border-radius: var(--radius-md); }

/* ── PAGE TRANSITION ─────────────────────────────────────────── */
@keyframes jd-page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.jd-page-transition { animation: jd-page-enter 220ms cubic-bezier(.16,1,.3,1) both; }

/* ── MICRO-INTERACCIONES — BOTONES ──────────────────────────── */
.mud-button { transition: transform 80ms ease, box-shadow 120ms ease !important; }
.mud-button:active:not([disabled]) { transform: scale(0.97) !important; }
.mud-icon-button { transition: background 120ms ease, transform 80ms ease !important; }
.mud-icon-button:active:not([disabled]) { transform: scale(0.90) !important; }

/* ── MICRO-INTERACCIONES — TABLA ROWS ───────────────────────── */
.mud-table-row { transition: background 100ms ease !important; }
.jd-canned-row, .jd-typology-row { transition: background 100ms ease; }

/* ── MICRO-INTERACCIONES — CARDS ────────────────────────────── */
.jd-kpi-card    { transition: border-color 150ms, box-shadow 150ms; }
.jd-team-card   { transition: border-color 150ms, transform 150ms; }
.jd-team-card:hover { transform: translateY(-1px); }
.jd-sla-policy-card { transition: border-color 150ms; }

/* ── MICRO-INTERACCIONES — BADGE STATE ──────────────────────── */
@keyframes jd-badge-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.jd-badge--pop { animation: jd-badge-pop 250ms cubic-bezier(.36,.07,.19,.97); }

/* ── MICRO-INTERACCIONES — NOTIF BELL ──────────────────────── */
@keyframes jd-bell-ring {
  0%,100% { transform: rotate(0deg); }
  15%     { transform: rotate(14deg); }
  30%     { transform: rotate(-12deg); }
  45%     { transform: rotate(10deg); }
  60%     { transform: rotate(-8deg); }
  75%     { transform: rotate(5deg); }
}
.jd-bell--ring { animation: jd-bell-ring 600ms ease; }

/* ── SIDEBAR RESPONSIVE ─────────────────────────────────────── */
/* Tablet (960–1280px): sidebar visible pero más angosto */
@media (min-width: 960px) and (max-width: 1280px) {
  .mud-drawer-content { overflow-x: hidden; }
  /* Oculta labels de texto en nav items cuando hay poco espacio */
  .mud-nav-link-text { font-size: 0.8125rem; }
}

/* Mobile (<960px): el drawer Responsive de MudBlazor maneja el comportamiento */
@media (max-width: 959px) {
  /* Content area ocupa todo el ancho */
  .mud-main-content { padding-left: 0 !important; }
  /* Reduce padding del contenedor en móvil */
  .mud-container { padding: var(--space-4) !important; }
  /* Page header en una columna */
  .jd-page-header { flex-direction: column; gap: var(--space-3); }
  /* KPI row en 2 columnas en móvil */
  .jd-kpi-row { grid-template-columns: repeat(2, 1fr); }
  /* Tablas scroll horizontal en móvil */
  .jd-data-table { overflow-x: auto; }
  /* Ocultar columnas secundarias en tablas móvil */
  .jd-col-hide-mobile { display: none; }
  /* Volume chart sin fecha en móvil */
  .jd-volume-row { grid-template-columns: 1fr 48px; }
  .jd-volume-date { display: none; }
  /* Distribution en una columna */
  .jd-sla-compliance-grid { grid-template-columns: 1fr 1fr; }
}

/* ── TICKET DETAIL — RESPONSIVE ─────────────────────────────── */
@media (max-width: 1024px) {
  /* Panel lateral de ticket pasa a ser tabs en tablet */
  .jd-ticket-sidebar { display: none; }
  .jd-ticket-sidebar--as-tabs { display: block; }
}

/* ── ERROR PAGES ─────────────────────────────────────────────── */
.jd-error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-6);
  min-height: 60vh;
  gap: var(--space-4);
}
.jd-error-page__code {
  font-size: 6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  opacity: 0.12;
  user-select: none;
  position: relative;
  margin-bottom: -var(--space-6);
}
.jd-error-page__code--404 { color: var(--brand-cyan-500); }
.jd-error-page__code--403 { color: var(--warning-500); }
.jd-error-page__code--500 { color: var(--error-500); }
.jd-error-page__icon { margin-top: -2rem; }
.jd-error-page__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}
.jd-error-page__desc {
  font-size: 0.9375rem;
  color: var(--neutral-400);
  max-width: 420px;
  line-height: 1.65;
  margin: 0;
}
.jd-error-page__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.jd-error-page__tip {
  font-size: 0.8125rem;
  color: var(--neutral-500);
  margin-top: var(--space-4);
}
.jd-error-page__tip code {
  background: var(--neutral-800);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: monospace;
  font-size: 0.875em;
}

/* ── LIGHT THEME OVERRIDES ──────────────────────────────────── */
html.jd-light {
  --neutral-950: #F5F7FA;
  --neutral-900: #FFFFFF;
  --neutral-850: #F0F2F5;
  --neutral-800: #E2E6EE;
  --neutral-700: #CDD4E0;
  --neutral-500: #9AA3B2;
  --neutral-400: #6B7280;
  --neutral-200: #374151;
  --neutral-50:  #111827;

  /* Badge backgrounds in light theme */
  --info-900:    #EFF9FC;
  --warning-900: #FFFBEB;
  --success-900: #F0FDF4;
  --error-900:   #FEF2F2;
}

html.jd-light .jd-splash { background: var(--neutral-lt-bg); }

/* Light theme: sombras en cards */
html.jd-light .jd-kpi-card,
html.jd-light .jd-team-card,
html.jd-light .jd-sla-policy-card,
html.jd-light .jd-csat-container,
html.jd-light .jd-settings-section { box-shadow: var(--shadow-sm); }

html.jd-light .jd-kpi-card:hover,
html.jd-light .jd-team-card:hover { box-shadow: var(--shadow-md); }

/* Light theme: ajustar texto de sidebar */
html.jd-light .jd-topbar-brand { color: var(--neutral-50); }

/* Light theme: portal topbar */
html.jd-light .jd-portal-topbar { background:rgba(245,247,250,.95); border-bottom-color:rgba(242,92,42,.18); }
html.jd-light .jd-portal-topbar__brand { color:var(--neutral-50); }
html.jd-light .jd-portal-layout { background:var(--neutral-950); }

/* ── LAZY LOADING DE IMÁGENES ────────────────────────────────── */
img:not([loading]) { loading: lazy; }
img[loading="lazy"] { content-visibility: auto; }

/* ── AVOID LAYOUT SHIFT ──────────────────────────────────────── */
.jd-avatar img { aspect-ratio: 1 / 1; }
.jd-logo-preview__img { aspect-ratio: auto; min-height: 32px; }

/* ── PRINT STYLES ────────────────────────────────────────────── */
@media print {
  .mud-appbar, .mud-drawer, .jd-skip-link,
  .jd-bulk-bar, .jd-page-header .mud-button { display: none !important; }
  .mud-main-content { padding: 0 !important; }
  .jd-page-header__title { font-size: 1.5rem; }
  body { background: #fff; color: #000; }
}

/* ── ARIA-LIVE REGION ────────────────────────────────────────── */
.jd-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .jd-page-transition, .jd-fade-in { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   PORTAL — Rediseño UX
   ══════════════════════════════════════════════════════════════ */

/* ── Portal Home wrapper ─────────────────────────────────────── */
.jd-portal-home {
  min-height: calc(100vh - 52px);
  display: flex; flex-direction: column;
  background: var(--neutral-950);
}
.jd-portal-progress { border-radius: 0; }
.jd-portal-unavailable {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; flex: 1;
  padding: var(--space-16) var(--space-4);
}

/* ── Hero ───────────────────────────────────────────────────── */
.jd-ph-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 72px var(--space-6) 56px;
  flex-shrink: 0;
}
.jd-ph-hero__glow {
  position: absolute; top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 860px; height: 560px;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(242,92,42,.18) 0%,
    rgba(242,92,42,.06) 40%,
    transparent 68%);
  pointer-events: none; z-index: 0;
}
.jd-ph-hero__inner {
  position: relative; z-index: 1;
  max-width: 520px; margin: 0 auto;
}
.jd-ph-hero__logo {
  height: 60px; object-fit: contain;
  display: block; margin: 0 auto var(--space-6);
}
.jd-ph-hero__emblem {
  width: 76px; height: 76px; border-radius: var(--radius-xl);
  background: rgba(242,92,42,.1);
  border: 1px solid rgba(242,92,42,.22);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-6);
  font-size: 2rem; color: var(--brand-orange-500);
}
.jd-ph-hero__title {
  font-size: 2.25rem; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.15;
  color: var(--neutral-50); margin: 0 0 var(--space-3);
}
.jd-ph-hero__subtitle {
  font-size: 1rem; line-height: 1.65; color: var(--neutral-400);
  margin: 0 auto var(--space-8); max-width: 380px;
}
.jd-ph-hero__cta {
  display: flex; gap: var(--space-3);
  justify-content: center; flex-wrap: wrap;
}

/* ── Quick-access section ────────────────────────────────────── */
.jd-ph-quick { padding: 0 0 var(--space-10); flex: 1; }
.jd-ph-quick__eyebrow {
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--neutral-500); margin: 0 0 var(--space-4);
}
.jd-ph-quick__grid {
  display: flex; flex-direction: column; gap: var(--space-3);
}

/* ── Quick-access cards ──────────────────────────────────────── */
.jd-ph-qcard {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--neutral-900); border: 1px solid var(--neutral-800);
  border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5);
  cursor: pointer; position: relative; overflow: hidden;
  transition: border-color 180ms, transform 180ms ease, box-shadow 200ms;
}
.jd-ph-qcard::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; opacity: 0;
  transition: opacity 180ms;
}
.jd-ph-qcard--orange::before { background: rgba(242,92,42,.04); }
.jd-ph-qcard--blue::before   { background: rgba(47,140,207,.04); }
.jd-ph-qcard--teal::before   { background: rgba(34,197,94,.03); }

.jd-ph-qcard:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.jd-ph-qcard:hover::before    { opacity: 1; }
.jd-ph-qcard--orange:hover    { border-color: rgba(242,92,42,.35); }
.jd-ph-qcard--blue:hover      { border-color: rgba(47,140,207,.35); }
.jd-ph-qcard--teal:hover      { border-color: rgba(34,197,94,.35); }
.jd-ph-qcard:focus-visible    { outline: 2px solid var(--brand-orange-500); outline-offset: 2px; }
.jd-ph-qcard:active           { transform: scale(0.99); }

.jd-ph-qcard__icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1.25rem; position: relative;
}
.jd-ph-qcard--orange .jd-ph-qcard__icon { background: rgba(242,92,42,.12); color: var(--brand-orange-500); }
.jd-ph-qcard--blue   .jd-ph-qcard__icon { background: rgba(47,140,207,.12); color: var(--brand-blue-500); }
.jd-ph-qcard--teal   .jd-ph-qcard__icon { background: rgba(34,197,94,.1);  color: var(--success-500); }

.jd-ph-qcard__body    { flex: 1; min-width: 0; position: relative; }
.jd-ph-qcard__title   { font-size: 0.9375rem; font-weight: 700; color: var(--neutral-100); margin-bottom: 2px; }
.jd-ph-qcard__desc    { font-size: 0.8125rem; color: var(--neutral-400); }
.jd-ph-qcard__arrow   { color: var(--neutral-600); flex-shrink: 0; position: relative; }

/* ── Portal Home footer ──────────────────────────────────────── */
.jd-ph-footer {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-5) var(--space-4);
  font-size: 0.8125rem; color: var(--neutral-500);
  border-top: 1px solid var(--neutral-800);
  margin-top: auto;
}
.jd-ph-footer__link { color: var(--brand-orange-500); text-decoration: none; }
.jd-ph-footer__link:hover { text-decoration: underline; }

/* ── Auth page — Login / Register ────────────────────────────── */
.jd-portal-auth-page {
  min-height: calc(100vh - 52px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-8) var(--space-4);
  background: var(--neutral-950);
}
.jd-portal-auth-box {
  width: 100%; max-width: 420px;
  background: var(--neutral-900); border: 1px solid var(--neutral-800);
  border-radius: var(--radius-xl); padding: var(--space-7);
  animation: jd-page-enter 220ms cubic-bezier(.16,1,.3,1) both;
}

/* Icon pill at top of auth card */
.jd-portal-auth-box__icon {
  width: 48px; height: 48px; border-radius: var(--radius-lg);
  background: rgba(242,92,42,.1); border: 1px solid rgba(242,92,42,.2);
  color: var(--brand-orange-500);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.jd-portal-auth-box__head { margin-bottom: var(--space-5); }
.jd-portal-auth-box__title {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--neutral-50); margin: 0 0 var(--space-1);
}
.jd-portal-auth-box__sub { font-size: 0.875rem; color: var(--neutral-400); margin: 0; }
.jd-portal-auth-box__body { margin-bottom: var(--space-5); }
.jd-portal-auth-box__foot {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-2); flex-wrap: wrap;
  font-size: 0.8125rem; color: var(--neutral-400);
  border-top: 1px solid var(--neutral-800); padding-top: var(--space-4);
}

/* ── Step indicator (Register) ───────────────────────────────── */
.jd-portal-auth-step { margin-bottom: var(--space-5); }
.jd-portal-auth-step__indicator {
  display: flex; align-items: center; gap: 0; margin-bottom: var(--space-2);
}
.jd-portal-auth-step__dot {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; font-weight: 700;
  background: var(--neutral-800); color: var(--neutral-400);
}
.jd-portal-auth-step__dot--active {
  background: var(--brand-orange-500); color: #fff;
}
.jd-portal-auth-step__dot--done {
  background: var(--success-500); color: #fff;
}
.jd-portal-auth-step__line {
  flex: 1; height: 2px; background: var(--neutral-800);
}
.jd-portal-auth-step__line--done { background: var(--success-500); }
.jd-portal-auth-step__label {
  font-size: 0.8125rem; font-weight: 600; color: var(--neutral-300);
  margin: 0;
}

/* ── Portal responsive ───────────────────────────────────────── */
@media (max-width: 600px) {
  .jd-ph-hero { padding: 48px var(--space-4) 40px; }
  .jd-ph-hero__title { font-size: 1.75rem; }
  .jd-ph-qcard { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .jd-portal-auth-box { padding: var(--space-5); border-radius: var(--radius-lg); }
}

/* ============================================================
   ONBOARDING — guía de inicio (tour + checklist + launcher)
   Los tokens --neutral-* se invierten solos en html.jd-light,
   así que estos estilos sirven para tema claro y oscuro.
   ============================================================ */

/* ── Capas ───────────────────────────────────────────────────
   MudAppBar 200 · drawer ~1100 · popovers MudBlazor 1300+
   overlay del tour 1400 · objetivo resaltado 1401 · tarjeta 1402 */

/* ── Bienvenida ─────────────────────────────────────────────── */
.jd-onb-welcome__backdrop {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(0, 0, 0, .6);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  animation: jd-onb-fade 180ms ease-out;
}
.jd-onb-welcome {
  background: var(--neutral-900);
  border: 1px solid var(--neutral-800);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8) var(--space-6) var(--space-6);
  max-width: 460px; width: 100%;
  text-align: center;
  animation: jd-onb-pop 200ms cubic-bezier(.2, .9, .3, 1.2);
}
.jd-onb-welcome__icon {
  width: 64px; height: 64px; margin: 0 auto var(--space-4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-orange-500), var(--brand-yellow-500));
  color: #fff;
}
.jd-onb-welcome__body { color: var(--neutral-400); }
.jd-onb-welcome__actions {
  display: flex; gap: var(--space-2); justify-content: center;
  flex-wrap: wrap; margin-top: var(--space-6);
}

/* ── Overlay del tour: cuatro paneles, hueco central clicable ── */
.jd-tour-overlay__pane {
  position: fixed; z-index: 1400;
  background: rgba(0, 0, 0, .55);
  transition: all 160ms ease-out;
}
.jd-tour-overlay__pane--full { inset: 0; }

.jd-tour-target {
  position: relative; z-index: 1401;
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 0 0 3px var(--brand-orange-500);
  transition: box-shadow 160ms ease-out;
}

/* ── Tarjeta del paso ───────────────────────────────────────── */
.jd-tour-card {
  position: fixed; z-index: 1402;
  background: var(--neutral-900);
  border: 1px solid var(--neutral-800);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--space-5) var(--space-4);
  animation: jd-onb-pop 180ms cubic-bezier(.2, .9, .3, 1.2);
}
.jd-tour-card:focus { outline: none; }
.jd-tour-card--centered {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px));
}
.jd-tour-card__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-2);
}
.jd-tour-card__actions { display: flex; align-items: center; gap: var(--space-2); }

/* Chip "Continuar guía" cuando el usuario navega por su cuenta */
.jd-tour-resume {
  position: fixed; z-index: 1402; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--space-1);
  background: var(--neutral-900);
  border: 1px solid var(--neutral-800);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  padding: 4px 8px 4px 12px;
}

/* ── Botón flotante de ayuda ────────────────────────────────── */
.jd-onb-fab { position: fixed; z-index: 1200; right: 24px; bottom: 24px; }

/* ── Panel de primeros pasos ────────────────────────────────── */
.jd-onb-checklist {
  position: fixed; z-index: 1201; right: 24px; bottom: 88px;
  width: min(380px, calc(100vw - 32px));
  max-height: min(60vh, 560px); overflow-y: auto;
  background: var(--neutral-900);
  border: 1px solid var(--neutral-800);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: jd-onb-slide-up 200ms ease-out;
}
.jd-onb-checklist__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--neutral-800);
  position: sticky; top: 0; background: var(--neutral-900); z-index: 1;
}
.jd-onb-checklist__items { padding: var(--space-2); }
.jd-onb-checklist__empty,
.jd-onb-checklist__done { padding: var(--space-5); text-align: center; }

.jd-onb-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md, 8px);
  transition: background-color 150ms;
}
.jd-onb-item:hover { background: var(--neutral-850); }
.jd-onb-item__text { flex: 1; min-width: 0; }
.jd-onb-item--done .jd-onb-item__text { opacity: .55; text-decoration: line-through; }

@keyframes jd-onb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jd-onb-pop {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes jd-onb-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .jd-onb-fab { right: 16px; bottom: 16px; }
  .jd-onb-checklist {
    right: 8px; left: 8px; bottom: 80px;
    width: auto; max-height: 65vh;
  }
  /* En móvil la tarjeta del paso ocupa el ancho y se ancla abajo:
     posicionarla junto al objetivo deja demasiado poco espacio. */
  .jd-tour-card {
    top: auto !important; bottom: 16px;
    left: 8px !important; right: 8px; width: auto !important;
  }
  .jd-tour-card--centered { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jd-onb-welcome, .jd-tour-card, .jd-onb-checklist,
  .jd-onb-welcome__backdrop { animation: none; }
  .jd-tour-overlay__pane { transition: none; }
}

/* ── Guía de reenvío de correo (email → ticket) ─────────────── */
.jd-fwd-guide__address {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--neutral-850);
  border: 1px solid var(--neutral-800);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-2) var(--space-3);
  max-width: fit-content;
}
.jd-fwd-guide__address code {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 0.9rem;
  color: var(--brand-orange-400);
}
.jd-fwd-guide__steps {
  margin: 0; padding-left: 1.25rem;
  display: flex; flex-direction: column; gap: var(--space-2);
  font-size: 0.875rem; color: var(--neutral-200);
}
.jd-fwd-guide__steps code {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 0.85em;
  background: var(--neutral-850);
  padding: 1px 5px; border-radius: 4px;
}