/* DG THEME UTILITIES
   Utilidades CSS mínimas y globales para reemplazar inline styles.
   NO crear un Tailwind completo. Solo lo esencial. */

/* Display */
.u-hidden { display: none !important; }
.u-flex { display: flex !important; }
.u-inline-flex { display: inline-flex !important; }
.u-block { display: block !important; }
.u-inline-block { display: inline-block !important; }
.u-grid { display: grid !important; }

/* Flexbox */
.u-flex-col { flex-direction: column !important; }
.u-flex-row { flex-direction: row !important; }
.u-center { align-items: center !important; justify-content: center !important; }
.u-between { justify-content: space-between !important; }
.u-around { justify-content: space-around !important; }
.u-start { justify-content: flex-start !important; }
.u-end { justify-content: flex-end !important; }
.u-align-center { align-items: center !important; }
.u-align-start { align-items: flex-start !important; }
.u-align-end { align-items: flex-end !important; }
.u-wrap { flex-wrap: wrap !important; }
.u-nowrap { flex-wrap: nowrap !important; }
.u-flex-1 { flex: 1 !important; }

/* Cursor */
.u-pointer { cursor: pointer !important; }
.u-not-allowed { cursor: not-allowed !important; }

/* Width / Height */
.u-w-100 { width: 100% !important; }
.u-h-100 { height: 100% !important; }
.u-w-auto { width: auto !important; }
.u-h-auto { height: auto !important; }
.u-min-h-20 { min-height: 20px !important; }
.u-max-w-240 { max-width: 240px !important; }
.u-max-w-520 { max-width: 520px !important; }
.u-min-w-220 { min-width: 220px !important; }

/* Text align */
.u-text-right { text-align: right !important; }
.u-text-left { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-underline-offset-2 { text-underline-offset: 2px !important; }

/* Gaps (en px) */
.u-gap-2 { gap: 2px !important; }
.u-gap-4 { gap: 4px !important; }
.u-gap-6 { gap: 6px !important; }
.u-gap-8 { gap: 8px !important; }
.u-gap-12 { gap: 12px !important; }
.u-gap-16 { gap: 16px !important; }
.u-gap-20 { gap: 20px !important; }
.u-gap-24 { gap: 24px !important; }

/* Margins (en px) */
.u-m-0 { margin: 0 !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-ml-0 { margin-left: 0 !important; }
.u-mr-0 { margin-right: 0 !important; }
.u-mt-4 { margin-top: 4px !important; }
.u-mb-4 { margin-bottom: 4px !important; }
.u-ml-4 { margin-left: 4px !important; }
.u-mr-4 { margin-right: 4px !important; }
.u-mt-8 { margin-top: 8px !important; }
.u-mb-8 { margin-bottom: 8px !important; }
.u-ml-8 { margin-left: 8px !important; }
.u-mr-8 { margin-right: 8px !important; }
.u-mt-12 { margin-top: 12px !important; }
.u-mb-12 { margin-bottom: 12px !important; }
.u-ml-12 { margin-left: 12px !important; }
.u-mr-12 { margin-right: 12px !important; }
.u-mt-16 { margin-top: 16px !important; }
.u-mb-16 { margin-bottom: 16px !important; }
.u-ml-16 { margin-left: 16px !important; }
.u-mr-16 { margin-right: 16px !important; }
.u-mt-20 { margin-top: 20px !important; }
.u-mb-20 { margin-bottom: 20px !important; }
.u-mt-24 { margin-top: 24px !important; }
.u-mb-24 { margin-bottom: 24px !important; }

/* Paddings (en px) */
.u-p-0 { padding: 0 !important; }
.u-pt-0 { padding-top: 0 !important; }
.u-pb-0 { padding-bottom: 0 !important; }
.u-pl-0 { padding-left: 0 !important; }
.u-pr-0 { padding-right: 0 !important; }
.u-pt-4 { padding-top: 4px !important; }
.u-pb-4 { padding-bottom: 4px !important; }
.u-pl-4 { padding-left: 4px !important; }
.u-pr-4 { padding-right: 4px !important; }
.u-pt-8 { padding-top: 8px !important; }
.u-pb-8 { padding-bottom: 8px !important; }
.u-pl-8 { padding-left: 8px !important; }
.u-pr-8 { padding-right: 8px !important; }
.u-pt-12 { padding-top: 12px !important; }
.u-pb-12 { padding-bottom: 12px !important; }
.u-pl-12 { padding-left: 12px !important; }
.u-pr-12 { padding-right: 12px !important; }
.u-pt-16 { padding-top: 16px !important; }
.u-pb-16 { padding-bottom: 16px !important; }
.u-pl-16 { padding-left: 16px !important; }
.u-pr-16 { padding-right: 16px !important; }
.u-pt-20 { padding-top: 20px !important; }
.u-pb-20 { padding-bottom: 20px !important; }
.u-pt-24 { padding-top: 24px !important; }
.u-pb-24 { padding-bottom: 24px !important; }

/* Position */
.u-relative { position: relative !important; }
.u-absolute { position: absolute !important; }
.u-fixed { position: fixed !important; }
.u-static { position: static !important; }

/* Overflow */
.u-overflow-hidden { overflow: hidden !important; }
.u-overflow-auto { overflow: auto !important; }
.u-overflow-scroll { overflow: scroll !important; }

/* Z-index (solo algunos valores comunes) */
.u-z-10 { z-index: 10 !important; }
.u-z-100 { z-index: 100 !important; }
.u-z-1000 { z-index: 1000 !important; }
.u-z-1100 { z-index: 1100 !important; }

/* Opacity */
.u-opacity-70 { opacity: 0.7 !important; }
.u-opacity-80 { opacity: 0.8 !important; }
.u-opacity-100 { opacity: 1 !important; }

/* Font size */
.u-text-xs { font-size: 0.75rem !important; }
.u-text-sm { font-size: 0.875rem !important; }
.u-text-base { font-size: 1rem !important; }
.u-text-11 { font-size: 11px !important; }
.u-text-12 { font-size: 12px !important; }
.u-text-14 { font-size: 14px !important; }
.u-text-07 { font-size: 0.7rem !important; }

/* Transition */
.u-transition-opacity { transition: opacity 0.2s ease !important; }
.u-transition-all { transition: all 0.2s ease !important; }

/* Min/Max Width/Height */
.u-min-w-220 { min-width: 220px !important; }
.u-min-w-240 { min-width: 240px !important; }
.u-min-w-800 { min-width: 800px !important; }
.u-max-h-240 { max-height: 240px !important; }
.u-max-h-400 { max-height: 400px !important; }
.u-max-h-60vh { max-height: 60vh !important; }

/* Width específicos */
.u-w-50 { width: 50px !important; }
.u-w-60 { width: 60px !important; }
.u-w-100px { width: 100px !important; }
.u-w-120px { width: 120px !important; }
.u-w-140px { width: 140px !important; }
.u-w-160px { width: 160px !important; }
.u-w-180px { width: 180px !important; }
.u-w-200px { width: 200px !important; }
.u-w-200px { width: 200px !important; }
.u-w-220px { width: 220px !important; }
.u-w-32 { width: 32px !important; }

/* Height específicos */
.u-h-20 { height: 20px !important; }
.u-h-28 { height: 28px !important; }
.u-h-30 { height: 30px !important; }
.u-h-32 { height: 32px !important; }
.u-h-40 { height: 40px !important; }
.u-h-100px { height: 100px !important; }

/* Padding específicos */
.u-p-4-12 { padding: 4px 12px !important; }
.u-p-0 { padding: 0 !important; }

/* Border radius */
.u-rounded-full { border-radius: 999px !important; }

/* User select */
.u-select-none { user-select: none !important; }

/* ===== TOASTS GLOBALES (migrado desde base.html) ===== */
#dg-toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
  max-width: 90vw;
}
/* Estilos para toasts de Bootstrap para que se ajusten al contenido */
#dg-toast-container .toast {
  min-width: 260px !important;
  max-width: 90vw !important;
  width: auto !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}
#dg-toast-container .toast-body {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-width: none !important;
}
.dg-toast {
  min-width: 260px;
  max-width: 90vw;
  width: auto;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  font-size: 0.85rem;
  line-height: 1.4;
  color: #ffffff;
  background: var(--surface, #111827);
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.22s ease-out, transform 0.22s ease-out;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.dg-toast-show {
  opacity: 1;
  transform: translateY(0);
}
.dg-toast-success {
  background: rgba(16, 185, 129, 0.92);
  border-color: rgba(16, 185, 129, 0.9);
}
.dg-toast-error {
  background: rgba(239, 68, 68, 0.92);
  border-color: rgba(239, 68, 68, 0.9);
}
.dg-toast-info {
  background: rgba(59, 130, 246, 0.92);
  border-color: rgba(59, 130, 246, 0.9);
}
.dg-toast-icon {
  margin-top: 1px;
  flex-shrink: 0;
}
.dg-toast-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.8;
}
.dg-toast-close:hover {
  opacity: 1;
}

/* ===== SIDEBAR VISIBILITY (migrado desde base.html) ===== */
.portal-host #btn-sidebar { display: none !important; }
.portal-host #sidebar-overlay { display: none !important; }
.portal-host #topbarThemeToggle { display: none !important; }
.gest-host.no-menu #btn-sidebar { display: none !important; }
.gest-host.no-menu #sidebar-overlay { display: none !important; }
.gest-host.no-menu #topbarThemeToggle { display: none !important; }

/* ===== PORTAL HOST SPECIFIC STYLES (migrado desde base.html) ===== */
.portal-host #btn-sidebar { display: none !important; }
.portal-host #sidebar-overlay { display: none !important; }
.portal-host .navbar .navbar-brand .ms-2 { margin-left: 0 !important; }
.portal-host .navbar .navbar-nav { flex-direction: row !important; }
.portal-host .navbar .navbar-nav .nav-link { padding-left: 0.5rem; padding-right: 0.5rem; }

/* Feedback de click en portal (para que se note la pulsación) */
.portal-host .bd-btn,
.portal-host .dg-chip-admin-unified,
.portal-host .fichaje-icon-card,
.portal-host a.bd-btn,
.portal-host a.dg-chip-admin-unified,
.portal-host [role="button"] {
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease, opacity 0.08s ease;
}
.portal-host .bd-btn[disabled],
.portal-host .bd-btn[aria-disabled="true"],
.portal-host [data-disabled="1"] {
  transition: none;
}
.portal-host .bd-btn:not([disabled]):not([aria-disabled="true"]):active,
.portal-host .dg-chip-admin-unified:active,
.portal-host .fichaje-icon-card:not([data-disabled="1"]):active,
.portal-host a.bd-btn:active,
.portal-host a.dg-chip-admin-unified:active,
.portal-host [role="button"]:not([aria-disabled="true"]):active,
.portal-host .dg-pressed {
  transform: scale(0.98);
  filter: brightness(1.05);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14), 0 10px 22px rgba(0, 0, 0, 0.38);
}