/* =============================================================
   utilities.css — Atomicas .uio-*
   Sprint 35 fix-1
   ============================================================= */

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

/* ── Flex direction / alignment ── */
.uio-row     { flex-direction: row !important; }
.uio-col     { flex-direction: column !important; }
.uio-center  { align-items: center !important; justify-content: center !important; }
.uio-between { justify-content: space-between !important; }
.uio-end     { justify-content: flex-end !important; }
.uio-start   { justify-content: flex-start !important; }
.uio-items-center { align-items: center !important; }
.uio-items-start  { align-items: flex-start !important; }
.uio-items-end    { align-items: flex-end !important; }
.uio-wrap    { flex-wrap: wrap !important; }
.uio-nowrap  { flex-wrap: nowrap !important; }
.uio-grow    { flex-grow: 1 !important; }
.uio-shrink-0 { flex-shrink: 0 !important; }

/* ── Gap ── */
.uio-gap-1 { gap: var(--sp-1) !important; }
.uio-gap-2 { gap: var(--sp-2) !important; }
.uio-gap-3 { gap: var(--sp-3) !important; }
.uio-gap-4 { gap: var(--sp-4) !important; }
.uio-gap-5 { gap: var(--sp-5) !important; }
.uio-gap-6 { gap: var(--sp-6) !important; }
.uio-gap-7 { gap: var(--sp-7) !important; }
.uio-gap-8 { gap: var(--sp-8) !important; }
.uio-gap-9 { gap: var(--sp-9) !important; }

/* ── Padding ── */
.uio-p-1  { padding: var(--sp-1) !important; }
.uio-p-2  { padding: var(--sp-2) !important; }
.uio-p-3  { padding: var(--sp-3) !important; }
.uio-p-4  { padding: var(--sp-4) !important; }
.uio-p-5  { padding: var(--sp-5) !important; }
.uio-p-6  { padding: var(--sp-6) !important; }
.uio-p-7  { padding: var(--sp-7) !important; }
.uio-p-8  { padding: var(--sp-8) !important; }
.uio-p-9  { padding: var(--sp-9) !important; }

.uio-px-1 { padding-left: var(--sp-1) !important; padding-right: var(--sp-1) !important; }
.uio-px-2 { padding-left: var(--sp-2) !important; padding-right: var(--sp-2) !important; }
.uio-px-3 { padding-left: var(--sp-3) !important; padding-right: var(--sp-3) !important; }
.uio-px-4 { padding-left: var(--sp-4) !important; padding-right: var(--sp-4) !important; }
.uio-px-5 { padding-left: var(--sp-5) !important; padding-right: var(--sp-5) !important; }
.uio-px-6 { padding-left: var(--sp-6) !important; padding-right: var(--sp-6) !important; }
.uio-px-7 { padding-left: var(--sp-7) !important; padding-right: var(--sp-7) !important; }
.uio-px-8 { padding-left: var(--sp-8) !important; padding-right: var(--sp-8) !important; }
.uio-px-9 { padding-left: var(--sp-9) !important; padding-right: var(--sp-9) !important; }

.uio-py-1 { padding-top: var(--sp-1) !important; padding-bottom: var(--sp-1) !important; }
.uio-py-2 { padding-top: var(--sp-2) !important; padding-bottom: var(--sp-2) !important; }
.uio-py-3 { padding-top: var(--sp-3) !important; padding-bottom: var(--sp-3) !important; }
.uio-py-4 { padding-top: var(--sp-4) !important; padding-bottom: var(--sp-4) !important; }
.uio-py-5 { padding-top: var(--sp-5) !important; padding-bottom: var(--sp-5) !important; }
.uio-py-6 { padding-top: var(--sp-6) !important; padding-bottom: var(--sp-6) !important; }
.uio-py-7 { padding-top: var(--sp-7) !important; padding-bottom: var(--sp-7) !important; }
.uio-py-8 { padding-top: var(--sp-8) !important; padding-bottom: var(--sp-8) !important; }
.uio-py-9 { padding-top: var(--sp-9) !important; padding-bottom: var(--sp-9) !important; }

/* ── Margin ── */
.uio-m-1  { margin: var(--sp-1) !important; }
.uio-m-2  { margin: var(--sp-2) !important; }
.uio-m-3  { margin: var(--sp-3) !important; }
.uio-m-4  { margin: var(--sp-4) !important; }
.uio-m-5  { margin: var(--sp-5) !important; }
.uio-m-6  { margin: var(--sp-6) !important; }
.uio-m-7  { margin: var(--sp-7) !important; }
.uio-m-8  { margin: var(--sp-8) !important; }
.uio-m-9  { margin: var(--sp-9) !important; }

.uio-mt-1 { margin-top: var(--sp-1) !important; }
.uio-mt-2 { margin-top: var(--sp-2) !important; }
.uio-mt-3 { margin-top: var(--sp-3) !important; }
.uio-mt-4 { margin-top: var(--sp-4) !important; }
.uio-mt-5 { margin-top: var(--sp-5) !important; }
.uio-mt-6 { margin-top: var(--sp-6) !important; }
.uio-mt-7 { margin-top: var(--sp-7) !important; }
.uio-mt-8 { margin-top: var(--sp-8) !important; }

.uio-mb-1 { margin-bottom: var(--sp-1) !important; }
.uio-mb-2 { margin-bottom: var(--sp-2) !important; }
.uio-mb-3 { margin-bottom: var(--sp-3) !important; }
.uio-mb-4 { margin-bottom: var(--sp-4) !important; }
.uio-mb-5 { margin-bottom: var(--sp-5) !important; }
.uio-mb-6 { margin-bottom: var(--sp-6) !important; }
.uio-mb-7 { margin-bottom: var(--sp-7) !important; }
.uio-mb-8 { margin-bottom: var(--sp-8) !important; }

.uio-ml-1 { margin-left: var(--sp-1) !important; }
.uio-ml-2 { margin-left: var(--sp-2) !important; }
.uio-ml-3 { margin-left: var(--sp-3) !important; }
.uio-ml-4 { margin-left: var(--sp-4) !important; }
.uio-ml-auto { margin-left: auto !important; }

.uio-mr-1 { margin-right: var(--sp-1) !important; }
.uio-mr-2 { margin-right: var(--sp-2) !important; }
.uio-mr-3 { margin-right: var(--sp-3) !important; }
.uio-mr-4 { margin-right: var(--sp-4) !important; }
.uio-mr-auto { margin-right: auto !important; }

/* ── Texto color ── */
.uio-text-2       { color: var(--text-2) !important; }
.uio-text-3       { color: var(--text-3) !important; }
.uio-text-4       { color: var(--text-4) !important; }
.uio-text-ac      { color: var(--ac) !important; }
.uio-text-success { color: var(--success) !important; }
.uio-text-warning { color: var(--warning) !important; }
.uio-text-danger  { color: var(--danger) !important; }
.uio-text-gold    { color: var(--gold) !important; }
.uio-text-center  { text-align: center !important; }
.uio-text-right   { text-align: right !important; }
.uio-truncate     { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

/* ── Font size ── */
.uio-fs-xs   { font-size: var(--fs-xs) !important; }
.uio-fs-sm   { font-size: var(--fs-sm) !important; }
.uio-fs-base { font-size: var(--fs-base) !important; }
.uio-fs-md   { font-size: var(--fs-md) !important; }
.uio-fs-lg   { font-size: var(--fs-lg) !important; }
.uio-fs-xl   { font-size: var(--fs-xl) !important; }
.uio-fs-2xl  { font-size: var(--fs-2xl) !important; }

/* ── Font weight ── */
.uio-fw-500 { font-weight: 500 !important; }
.uio-fw-600 { font-weight: 600 !important; }
.uio-fw-700 { font-weight: 700 !important; }
.uio-fw-800 { font-weight: 800 !important; }

/* ── Layout containers ── */
.uio-container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
.uio-container.uio-narrow { max-width: var(--maxw-narrow); }
.uio-container.uio-wide   { max-width: var(--maxw-wide); }

/* ── Glass utilities ── */
.uio-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}
.uio-glass-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-2);
}
.uio-glass-soft {
  background: var(--glass-bg-soft);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border: 1px solid var(--glass-border);
}

/* ── Visibility responsive ── */
.uio-only-mobile  { display: none !important; }
.uio-only-tablet  { display: none !important; }
.uio-only-desktop { display: none !important; }

@media (max-width: 767px) {
  .uio-only-mobile  { display: revert !important; }
  .uio-not-mobile   { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .uio-only-tablet  { display: revert !important; }
}
@media (min-width: 1024px) {
  .uio-only-desktop { display: revert !important; }
  .uio-not-desktop  { display: none !important; }
}

/* ── Accessibility ── */
.uio-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Misc ── */
.uio-w-full   { width: 100% !important; }
.uio-h-full   { height: 100% !important; }
.uio-relative { position: relative !important; }
.uio-absolute { position: absolute !important; }
.uio-overflow-hidden { overflow: hidden !important; }
.uio-rounded-full { border-radius: var(--r-pill) !important; }

/* ── Notification badge pop animation ── */
@keyframes uioNotifPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4); }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.uio-notif-pop {
  animation: uioNotifPop 480ms ease-out;
}