/* ============================================================
   ZARYX MAIL — Estilos Adicionales de Refinamiento
   ============================================================ */

/* Mejorar scrollbar en todas las áreas */
#layout-sidebar .scroller::-webkit-scrollbar,
#layout-list .scroller::-webkit-scrollbar,
#layout-content .scroller::-webkit-scrollbar {
  width: 8px !important;
}

#layout-sidebar .scroller::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: 4px !important;
}

#layout-sidebar .scroller::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff703a, #ff6a00) !important;
  border-radius: 4px !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

#layout-sidebar .scroller::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff8a37, #ff8033) !important;
}

/* Transiciones suaves en todo */
#layout,
#layout > div,
.toolbar a,
.toolbar button,
.popupmenu,
.ui-dialog {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Eliminar selección de texto en elementos UI */
.toolbar,
.pagenav,
.menu {
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Focus visible para accesibilidad */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #ff6a00 !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* Animación de entrada para dialogs */
.ui-dialog {
  animation: dialogFadeIn 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes dialogFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Efecto hover en folders con flechita */
.folderlist li.mailbox:has(> a:hover) {
  padding-left: 4px !important;
  transition: padding-left 0.2s ease !important;
}

/* Badge de no leídos más visible */
.unreadcount {
  font-weight: 700 !important;
  min-width: 22px !important;
  text-align: center !important;
}