/* ============================================================
   HELPDESK PRO - Estilos personalizados
   ============================================================ */

:root {
  --sidebar-width: 240px;
  --sidebar-bg: #0f172a;
  --sidebar-text: #94a3b8;
  --sidebar-active-bg: #1e293b;
  --sidebar-active-text: #f1f5f9;
  --sidebar-hover-bg: #1e293b;
  --topbar-height: 56px;
}

/* ── Layout ──────────────────────────────────── */
body {
  background-color: #f8fafc;
  font-size: 0.875rem;
}

#wrapper { min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────── */
#sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
  transition: width 0.2s ease;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  flex-shrink: 0;
}

.sidebar-brand {
  color: #f1f5f9;
  border-bottom: 1px solid #1e293b;
  min-height: var(--topbar-height);
}

.sidebar-user {
  background-color: #1e293b;
  border-bottom: 1px solid #334155;
}

.sidebar-section-label {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #475569;
  padding: 0.25rem 0.5rem;
  margin-top: 0.5rem;
}

.sidebar-link {
  color: var(--sidebar-text) !important;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: background 0.15s, color 0.15s;
}

.sidebar-link:hover {
  background-color: var(--sidebar-hover-bg);
  color: var(--sidebar-active-text) !important;
}

.sidebar-link.active {
  background-color: #3b82f6 !important;
  color: #fff !important;
}

.sidebar-link i { font-size: 1rem; width: 20px; text-align: center; }
.sidebar-hr { border-color: #1e293b; }

/* ── Page content ────────────────────────────── */
#page-content-wrapper {
  min-width: 0;
  overflow-x: hidden;
}

.topbar {
  min-height: var(--topbar-height);
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248,250,252,0.9);
  backdrop-filter: blur(8px);
}

/* ── Avatars ─────────────────────────────────── */
.avatar-xs { width: 32px; height: 32px; }
.avatar-sm { width: 36px; height: 36px; }
.avatar-lg { width: 72px; height: 72px; }

.avatar-initials, .avatar-initials-sm, .avatar-initials-lg {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; background-color: #3b82f6; color: white;
  text-transform: uppercase;
}
.avatar-initials    { width:36px; height:36px; font-size:0.9rem; }
.avatar-initials-sm { width:32px; height:32px; font-size:0.8rem; }
.avatar-initials-lg { width:72px; height:72px; font-size:1.6rem; }

/* ── Stat cards (dashboard) ──────────────────── */
.stat-card {
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: transform 0.15s, box-shadow 0.15s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

.stat-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin: 0 auto;
}

.stat-number { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.stat-label  { font-size: 0.7rem; color: #64748b; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Cards ───────────────────────────────────── */
.card {
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ── Tables ──────────────────────────────────── */
.table > thead > tr > th { font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; }
.table-hover tbody tr:hover { cursor: pointer; }

/* ── Badges extra ────────────────────────────── */
.fw-mono { font-family: 'Courier New', monospace; }
.x-small { font-size: 0.7rem; }

/* ── Button xs ───────────────────────────────── */
.btn-xs { padding: 0.2rem 0.45rem; font-size: 0.75rem; border-radius: 6px; }

/* ── Comments ────────────────────────────────── */
.comment-internal { background-color: #fffbeb; border-left: 3px solid #fbbf24; }
.comment-body { white-space: pre-wrap; line-height: 1.5; }

/* ── Notifications dropdown ──────────────────── */
.notif-unread { background-color: #eff6ff; }
.notif-dropdown a:hover { background-color: #f1f5f9; }

/* ── Report cards ────────────────────────────── */
.report-card { transition: transform 0.15s, box-shadow 0.15s; }
.report-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important; }
.report-icon { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }

/* ── SLA boxes ───────────────────────────────── */
.sla-box { border-radius: 8px; }

/* ── Auth page ───────────────────────────────── */
.auth-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}

.auth-container { width: 100%; max-width: 460px; }

.auth-card { border-radius: 16px !important; border: none; }

.auth-icon {
  width: 64px; height: 64px; border-radius: 16px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white; display: flex; align-items: center;
  justify-content: center; font-size: 1.8rem; margin: 0 auto;
}

/* ── Responsive sidebar ──────────────────────── */
@media (max-width: 991.98px) {
  #sidebar {
    display: flex;
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    z-index: 1055;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    width: 260px;
  }
  #sidebar.show {
    transform: translateX(0);
  }
  #page-content-wrapper {
    width: 100%;
  }
}

/* Overlay oscuro detrás del sidebar en móvil */
#sidebarOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1054;
  backdrop-filter: blur(2px);
}
#sidebarOverlay.show {
  display: block;
}

/* ── Ticket description ──────────────────────── */
.ticket-description { line-height: 1.7; white-space: pre-wrap; }

/* ── Footer ──────────────────────────────────── */
.footer { font-size: 0.75rem; }

/* ── Scrollbar ───────────────────────────────── */
#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-thumb { background-color: #334155; border-radius: 4px; }

/* ================================================================
   MULTIMEDIA — Drop zone, previews, editor, lightbox
   ================================================================ */

/* Drop zone */
#dropZone {
  border: 2px dashed #ced4da !important;
  border-radius: 12px;
  transition: background .2s, border-color .2s;
  user-select: none;
}
#dropZone:hover, #dropZone.bg-primary-subtle {
  border-color: #0d6efd !important;
  background: #f0f7ff !important;
}

/* Thumbnails del preview */
#filePreview .position-relative { display: inline-block; }
#filePreview img, #filePreview video {
  transition: box-shadow .15s;
}
#filePreview img:hover { box-shadow: 0 0 0 3px #0d6efd55; }

/* Botón tiny extra-pequeño */
.btn-xs {
  padding: 1px 5px;
  font-size: 0.65rem;
  line-height: 1.3;
  border-radius: 4px;
}

/* Thumbnails en comentarios guardados */
.attach-thumb img { transition: transform .15s, box-shadow .15s; }
.attach-thumb img:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

/* Lightbox */
#lightbox {
  backdrop-filter: blur(4px);
}
#lbImg {
  transition: transform .2s ease;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}

/* Editor modal — dark toolbar */
#imgEditorModal .modal-body { background: #1a1a2e; }
#annCanvas { cursor: crosshair; touch-action: none; }

/* Tool buttons active state */
.tool-btn.active { box-shadow: 0 0 0 2px #fff inset; }

/* Cropper overrides */
.cropper-view-box,
.cropper-face { border-radius: 0; }

/* Separador entre comentarios internos */
.comment-internal {
  background: #fffbea;
  border-left: 3px solid #ffc107 !important;
}

/* Badge adjuntos en comentarios */
.comment-attachments {
  padding-top: 4px;
}
.comment-attachments video {
  border-radius: 8px;
  background: #000;
}

/* Animación de carga al enviar */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-border-sm {
  display: inline-block;
  width: 1em; height: 1em;
  border: .15em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .75s linear infinite;
  vertical-align: -0.125em;
}