/* ==========================================================================
   HELPERS.CSS - Utilidades ligeras personalizadas
   Inspiradas en Tailwind, sin duplicar utilidades de Bootstrap
   ========================================================================== */

/* Variables de colores personalizados */
:root {
  --clr-primary: #0D3B66;
  --clr-secondary: #7A001C;
  --clr-accent: #FFD166;
  --clr-light: #F2F2F2;
  --clr-text: #222222;
  --clr-white: #FFFFFF;
}

/* ==========================================================================
   SPACING UTILITIES (escala rem: 0, .25, .5, 1, 1.5, 2, 3)
   ========================================================================== */

/* Margin */
.u-m-0 { margin: 0; }
.u-m-1 { margin: 0.25rem; }
.u-m-2 { margin: 0.5rem; }
.u-m-4 { margin: 1rem; }
.u-m-6 { margin: 1.5rem; }
.u-m-8 { margin: 2rem; }
.u-m-12 { margin: 3rem; }

/* Padding */
.u-p-0 { padding: 0; }
.u-p-1 { padding: 0.25rem; }
.u-p-2 { padding: 0.5rem; }
.u-p-4 { padding: 1rem; }
.u-p-6 { padding: 1.5rem; }
.u-p-8 { padding: 2rem; }
.u-p-12 { padding: 3rem; }

/* Margin X (horizontal) */
.u-mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.u-mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.u-mx-4 { margin-left: 1rem; margin-right: 1rem; }
.u-mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; }
.u-mx-8 { margin-left: 2rem; margin-right: 2rem; }
.u-mx-auto { margin-left: auto; margin-right: auto; }

/* Margin Y (vertical) */
.u-my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.u-my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.u-my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.u-my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.u-my-8 { margin-top: 2rem; margin-bottom: 2rem; }

/* Padding X (horizontal) */
.u-px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.u-px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.u-px-4 { padding-left: 1rem; padding-right: 1rem; }
.u-px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.u-px-8 { padding-left: 2rem; padding-right: 2rem; }

/* Padding Y (vertical) */
.u-py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.u-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.u-py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.u-py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.u-py-8 { padding-top: 2rem; padding-bottom: 2rem; }

/* ==========================================================================
   FLEXBOX UTILITIES
   ========================================================================== */

.u-flex { display: flex; }
.u-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.u-flex-col {
  display: flex;
  flex-direction: column;
}
.u-flex-wrap { flex-wrap: wrap; }

/* Gap */
.u-gap-1 { gap: 0.25rem; }
.u-gap-2 { gap: 0.5rem; }
.u-gap-4 { gap: 1rem; }
.u-gap-6 { gap: 1.5rem; }
.u-gap-8 { gap: 2rem; }

/* ==========================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================== */

/* Font sizes */
.u-text-xs { font-size: 0.75rem; }
.u-text-sm { font-size: 0.875rem; }
.u-text-md { font-size: 1rem; }
.u-text-lg { font-size: 1.25rem; }
.u-text-xl { font-size: 1.5rem; }
.u-text-2xl { font-size: 2rem; }

/* Font weights */
.u-weight-400 { font-weight: 400; }
.u-weight-500 { font-weight: 500; }
.u-weight-600 { font-weight: 600; }
.u-weight-700 { font-weight: 700; }

/* Text transforms */
.u-uppercase { text-transform: uppercase; }
.u-capitalize { text-transform: capitalize; }

/* Letter spacing */
.u-tracking-tight { letter-spacing: -0.025em; }
.u-tracking-normal { letter-spacing: 0; }
.u-tracking-wide { letter-spacing: 0.025em; }
.u-tracking-wider { letter-spacing: 0.06em; }

/* ==========================================================================
   COLOR UTILITIES (custom palette)
   ========================================================================== */

/* Background colors */
.u-bg-primary { background-color: var(--clr-primary) !important; }
.u-bg-secondary { background-color: var(--clr-secondary) !important; }
.u-bg-accent { background-color: var(--clr-accent) !important; }
.u-bg-light { background-color: var(--clr-light) !important; }
.u-bg-white { background-color: var(--clr-white) !important; }

/* Text colors */
.u-text-primary { color: var(--clr-primary) !important; }
.u-text-secondary { color: var(--clr-secondary) !important; }
.u-text-accent { color: var(--clr-accent) !important; }
.u-text-dark { color: var(--clr-text) !important; }
.u-text-white { color: var(--clr-white) !important; }
.u-text-muted { color: #6b7280 !important; }

/* ==========================================================================
   BORDER RADIUS UTILITIES
   ========================================================================== */

.u-radius-sm { border-radius: 6px; }
.u-radius-md { border-radius: 10px; }
.u-radius-lg { border-radius: 16px; }
.u-radius-full { border-radius: 9999px; }

/* ==========================================================================
   SHADOW UTILITIES
   ========================================================================== */

.u-shadow { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }
.u-shadow-sm { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.u-shadow-md { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); }
.u-shadow-lg { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); }
.u-shadow-none { box-shadow: none; }

/* ==========================================================================
   DISPLAY UTILITIES
   ========================================================================== */

.u-hidden { display: none; }
.u-block { display: block; }
.u-inline-block { display: inline-block; }

/* ==========================================================================
   POSITION UTILITIES
   ========================================================================== */

.u-relative { position: relative; }
.u-absolute { position: absolute; }
.u-fixed { position: fixed; }
.u-sticky { position: sticky; }

/* ==========================================================================
   OVERFLOW UTILITIES
   ========================================================================== */

.u-overflow-hidden { overflow: hidden; }
.u-overflow-auto { overflow: auto; }
.u-overflow-x-auto { overflow-x: auto; }
.u-overflow-y-auto { overflow-y: auto; }

/* ==========================================================================
   OPACITY UTILITIES
   ========================================================================== */

.u-opacity-0 { opacity: 0; }
.u-opacity-50 { opacity: 0.5; }
.u-opacity-75 { opacity: 0.75; }
.u-opacity-100 { opacity: 1; }

/* ==========================================================================
   TRANSITION UTILITIES
   ========================================================================== */

.u-transition { transition: all 0.3s ease; }
.u-transition-fast { transition: all 0.15s ease; }
.u-transition-slow { transition: all 0.5s ease; }

/* ==========================================================================
   AD SLOT STYLES (placeholders para publicidad)
   ========================================================================== */

.ad-slot {
  background: #f6f7f9;
  border: 1px dashed #c8cbd1;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}

.ad-slot .label {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Leaderboard ad */
.ad-leaderboard {
  min-height: 100px;
  max-height: 100px;
}

/* Right rail sticky ad */
.ad-rail-sticky {
  min-height: 280px;
  position: sticky;
  top: 1rem;
}

/* Billboard ad before footer */
.ad-before-footer {
  min-height: 250px;
  margin: 3rem 0 2rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ad-leaderboard {
    min-height: 100px;
  }

  .ad-rail-sticky {
    position: static;
    margin-bottom: 2rem;
  }

  .ad-before-footer {
    min-height: 100px;
  }
}

/* ==========================================================================
   MISCELLANEOUS UTILITIES
   ========================================================================== */

.u-pointer { cursor: pointer; }
.u-disabled { cursor: not-allowed; opacity: 0.6; }
.u-select-none { user-select: none; }

/* Aspect ratio utilities */
.u-aspect-video {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.u-aspect-square {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Object fit */
.u-object-cover { object-fit: cover; }
.u-object-contain { object-fit: contain; }