/* ==========================================================================
   PEPEHOOT — Premium Icon System v3.0
   ─────────────────────────────────────────────────────────────────────────
   Design philosophy:
   · Lucide-inspired BUT distinct — slightly more character, not a clone
   · Visual hierarchy enforced via stroke-weight:
       nav icons    → stroke-width 2.2  (readable, never heavy)
       action icons → stroke-width 2.4  (confident, directive)
       status icons → stroke-width 2.6  (assertive, immediate feedback)
   · Mixed stroke-linecap: "round" for organic, "square" for precise
   · Subtle asymmetries where they add character without breaking legibility

   Usage:
     {% load icons %}
     {% icon "timer" %}
     {% icon "correct" size="lg" cls="icon--correct" label="Correcto" %}

   Icon categories and their stroke contracts:
     nav      → 2.2 / round
     action   → 2.4 / round
     status   → 2.6 / butt (square)
     brand    → 2.0 / round (owl — geometric, precious)
   ========================================================================== */


/* ─────────────────────────────────────────────────────────────────────────
   DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Icon sizing */
  --icon-duration:    180ms;
  --icon-easing:      cubic-bezier(0.34, 1.46, 0.64, 1);
  --icon-easing-out:  cubic-bezier(0.16, 1, 0.3, 1);

  /* Semantic palette — inherits from quiz-theme.css when available */
  --ic-primary:   var(--brand,       #7C3AED);
  --ic-primary-l: var(--brand-light, #9B6DFF);
  --ic-success:   var(--correct,     #10B981);
  --ic-danger:    var(--incorrect,   #EF4444);
  --ic-warning:   var(--gold,        #F59E0B);
  --ic-info:      var(--accent,      #06B6D4);
  --ic-muted:     var(--text-muted,  #5C6480);
  --ic-white:     #ffffff;
  --ic-glow-r:    rgba(239, 68,  68,  0.4);
  --ic-glow-g:    rgba(16,  185, 129, 0.4);
  --ic-glow-v:    rgba(124, 58,  237, 0.45);
}


/* ─────────────────────────────────────────────────────────────────────────
   1. BASE WRAPPER
   ───────────────────────────────────────────────────────────────────────── */

.icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  line-height:     1;
  vertical-align:  middle;
  /* Inherit color from parent — never set color here */
}

.icon svg {
  display:          block;
  width:            var(--icon-size, 1.25rem);
  height:           var(--icon-size, 1.25rem);
  shape-rendering:  geometricPrecision;
  /* default transition — overridden in interactive contexts */
  transition:
    transform var(--icon-duration) var(--icon-easing),
    opacity   var(--icon-duration) ease,
    filter    var(--icon-duration) ease;
}


/* ─────────────────────────────────────────────────────────────────────────
   2. SIZE SCALE
   Driven by font-size scaling so icons are relative to their context.
   ───────────────────────────────────────────────────────────────────────── */

.icon--xs  { --icon-size: 0.75rem;  }   /*  12 px */
.icon--sm  { --icon-size: 1rem;     }   /*  16 px */
.icon--md  { --icon-size: 1.25rem;  }   /*  20 px  ← default */
.icon--lg  { --icon-size: 1.5rem;   }   /*  24 px */
.icon--xl  { --icon-size: 2rem;     }   /*  32 px */
.icon--2xl { --icon-size: 2.5rem;   }   /*  40 px */
.icon--3xl { --icon-size: 3rem;     }   /*  48 px */
.icon--4xl { --icon-size: 4rem;     }   /*  64 px */


/* ─────────────────────────────────────────────────────────────────────────
   3. SEMANTIC COLOR MODIFIERS
   ───────────────────────────────────────────────────────────────────────── */

.icon--primary              { color: var(--ic-primary);  }
.icon--success,
.icon--correct              { color: var(--ic-success);  }
.icon--danger,
.icon--incorrect            { color: var(--ic-danger);   }
.icon--warning              { color: var(--ic-warning);  }
.icon--info                 { color: var(--ic-info);     }
.icon--muted                { color: var(--ic-muted); opacity: 0.72; }
.icon--white                { color: var(--ic-white);    }


/* ─────────────────────────────────────────────────────────────────────────
   4. GLOW VARIANTS (dark-mode power-ups)
   Subtle filter-based glow. Only activates inside .dark or [data-theme="dark"]
   surfaces — no glow on light themes unless explicitly applied.
   ───────────────────────────────────────────────────────────────────────── */

.icon--glow-primary svg { filter: drop-shadow(0 0 6px var(--ic-glow-v)); }
.icon--glow-success svg { filter: drop-shadow(0 0 6px var(--ic-glow-g)); }
.icon--glow-danger  svg { filter: drop-shadow(0 0 6px var(--ic-glow-r)); }

/* Only apply glow naturally in dark contexts */
.qa-app .icon--correct  svg,
.dark   .icon--correct  svg { filter: drop-shadow(0 0 5px var(--ic-glow-g)); }
.qa-app .icon--incorrect svg,
.dark   .icon--incorrect svg { filter: drop-shadow(0 0 5px var(--ic-glow-r)); }


/* ─────────────────────────────────────────────────────────────────────────
   5. INTERACTIVE STATES
   Scale cap at 1.08 — perceptible but never startling.
   Directional icons translate instead of scale (feels natural).
   ───────────────────────────────────────────────────────────────────────── */

/* Inside interactive elements */
a       .icon svg,
button  .icon svg,
[role="button"] .icon svg,
.icon--interactive svg {
  transition:
    transform var(--icon-duration) var(--icon-easing),
    opacity   var(--icon-duration) ease,
    filter    200ms ease;
}

a:hover       .icon svg,
a:focus-visible .icon svg,
button:hover  .icon svg,
button:focus-visible .icon svg,
[role="button"]:hover .icon svg,
.icon--interactive:hover svg,
.icon--interactive:focus-visible svg {
  transform: scale(1.08);
  opacity: 0.92;
}

/* Directional override */
.icon--next svg,
.icon--previous svg   { transition: transform var(--icon-duration) var(--icon-easing-out); }

button:hover .icon--next svg,
a:hover .icon--next svg         { transform: translateX(3px); }

button:hover .icon--previous svg,
a:hover .icon--previous svg     { transform: translateX(-3px); }

/* Submit — nudge upward */
button:hover .icon--submit svg  { transform: translateY(-2px) scale(1.05); }

/* Play — scale outward */
button:hover .icon--play svg    { transform: scale(1.12); }

/* Settings — slow rotate */
button:hover .icon--settings svg {
  transform: rotate(22deg);
  transition-duration: 300ms;
}


/* ─────────────────────────────────────────────────────────────────────────
   6. ANIMATION HELPERS
   ───────────────────────────────────────────────────────────────────────── */

.icon--spin svg      { animation: icon-spin   0.9s linear infinite; }
.icon--pulse svg     { animation: icon-pulse  1.8s ease-in-out infinite; }
.icon--beat svg      { animation: icon-beat   1.2s ease-in-out infinite; }
.icon--bounce svg    { animation: icon-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

@keyframes icon-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.5; transform: scale(0.88); }
}

@keyframes icon-beat {
  0%, 100% { transform: scale(1);    }
  40%       { transform: scale(1.14); }
  60%       { transform: scale(0.96); }
}

@keyframes icon-bounce {
  0%   { transform: translateY(0);    }
  45%  { transform: translateY(-5px); }
  75%  { transform: translateY(1px);  }
  100% { transform: translateY(0);    }
}


/* ─────────────────────────────────────────────────────────────────────────
   7. BADGE CONTAINER
   A pill-shaped background that frames the icon. Used in nav, cards, etc.
   ───────────────────────────────────────────────────────────────────────── */

.icon-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  border-radius:   12px;
  flex-shrink:     0;
  transition:
    transform    200ms ease,
    box-shadow   200ms ease,
    background   200ms ease;
}

.icon-badge--primary {
  background: rgba(124, 58, 237, 0.13);
  color: var(--ic-primary);
}
.icon-badge--primary:hover {
  background: rgba(124, 58, 237, 0.22);
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.3);
}

.icon-badge--success {
  background: rgba(16, 185, 129, 0.12);
  color: var(--ic-success);
}
.icon-badge--success:hover {
  background: rgba(16, 185, 129, 0.2);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.3);
}

.icon-badge--danger {
  background: rgba(239, 68, 68, 0.12);
  color: var(--ic-danger);
}
.icon-badge--danger:hover {
  background: rgba(239, 68, 68, 0.2);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3);
}

.icon-badge--warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--ic-warning);
}

.icon-badge--info {
  background: rgba(6, 182, 212, 0.12);
  color: var(--ic-info);
}

.icon-badge--muted {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ic-muted);
}


/* ─────────────────────────────────────────────────────────────────────────
   8. BUTTON + ICON COMPOSITION
   ───────────────────────────────────────────────────────────────────────── */

/* Label + icon in a row */
.btn-icon {
  display:     inline-flex;
  align-items: center;
  gap:         0.45em;
}

/* Icon-only pill button */
.btn-icon-only {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  aspect-ratio:    1;
  padding:         0.5rem;
  border-radius:   10px;
}

/* Positional helpers */
.btn-icon--leading  > .icon { margin-right: 0.3em; }
.btn-icon--trailing > .icon { margin-left:  0.3em; }


/* ─────────────────────────────────────────────────────────────────────────
   9. CARD ICON HEADER ROW
   ───────────────────────────────────────────────────────────────────────── */

.card-icon-header {
  display:       flex;
  align-items:   center;
  gap:           0.875rem;
  margin-bottom: 1.25rem;
}

.card-icon-header h2,
.card-icon-header h3 {
  margin:      0;
  line-height: 1.2;
}


/* ─────────────────────────────────────────────────────────────────────────
   10. NAVBAR ICON SPECIFICS
   Icon tweaks that only apply inside .ph-navbar
   ───────────────────────────────────────────────────────────────────────── */

.ph-navbar .icon svg {
  /* Nav icons get the lightest stroke contract — 2.2, set in Python */
  /* Subtle opacity hierarchy: inactive nav items are dimmer */
  opacity: 0.8;
  transition:
    transform var(--icon-duration) var(--icon-easing),
    opacity   var(--icon-duration) ease;
}

.ph-navbar a:hover .icon svg,
.ph-navbar a[aria-current="page"] .icon svg {
  opacity: 1;
  transform: scale(1.06);
}

/* The brand owl — never scales, just softly glows on hover */
.ph-navbar__brand:hover .icon--owl svg {
  transform: none;
  filter: drop-shadow(0 0 8px rgba(155, 109, 255, 0.55));
}


/* ─────────────────────────────────────────────────────────────────────────
   11. STATUS ICON PAIRS (correct / incorrect)
   Applied in answer feedback contexts
   ───────────────────────────────────────────────────────────────────────── */

.icon-result {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           2.5rem;
  height:          2.5rem;
  border-radius:   50%;
  flex-shrink:     0;
}

.icon-result--correct {
  background: var(--correct-bg, rgba(16, 185, 129, 0.15));
  color:      var(--ic-success);
  box-shadow: 0 0 0 1px var(--correct-border, rgba(16, 185, 129, 0.4)),
              0 0 12px  var(--correct-glow,   rgba(16, 185, 129, 0.25));
}

.icon-result--incorrect {
  background: var(--incorrect-bg, rgba(239, 68, 68, 0.15));
  color:      var(--ic-danger);
  box-shadow: 0 0 0 1px var(--incorrect-border, rgba(239, 68, 68, 0.4)),
              0 0 12px  var(--incorrect-glow,   rgba(239, 68, 68, 0.25));
}


/* ─────────────────────────────────────────────────────────────────────────
   12. UTILITY
   ───────────────────────────────────────────────────────────────────────── */

/* Force non-scaling for decorative marks */
.icon--static svg { transition: none !important; }

/* Flip for RTL or mirrored usage */
.icon--flip-h svg { transform: scaleX(-1); }
.icon--flip-v svg { transform: scaleY(-1); }

.icon-badge--gold {
  background: rgba(255, 192, 0, 0.15);
  color: #c8960c;
}

/* Hover lift on icon badges inside clickable elements */
a:hover .icon-badge,
button:hover .icon-badge {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Dark-mode adjustments */
[data-theme="dark"]  .icon-badge--primary { background: rgba(108, 40, 220, 0.20); color: #a78bfa; }
[data-theme="dark"]  .icon-badge--success { background: rgba(52, 211, 153, 0.15); color: #34d399; }
[data-theme="dark"]  .icon-badge--danger  { background: rgba(248, 113, 113, 0.15); color: #f87171; }
[data-theme="dark"]  .icon-badge--warning { background: rgba(251, 191, 36, 0.15);  color: #fbbf24; }
[data-theme="dark"]  .icon-badge--info    { background: rgba(96, 165, 250, 0.15);  color: #60a5fa; }

/* Dark Neon theme */
[data-qa-theme="dark-neon"] .icon-badge--primary { background: rgba(0, 245, 255, 0.12); color: #00f5ff; }
[data-qa-theme="dark-neon"] .icon-badge--success { background: rgba(57, 255, 20, 0.12);  color: #39ff14; }

/* --------------------------------------------------------------------------
   8. Navbar icon utilities
   -------------------------------------------------------------------------- */

.nav-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-icon .icon {
  opacity: 0.85;
  transition: opacity 150ms ease;
}

.nav-icon:hover .icon {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   9. Status / feedback icons in messages
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   10. Twemoji — normaliza los emoji SVG a tamaño de línea
       Twemoji convierte Text Emoji → <img class="emoji"> con SVG de Twitter.
       Sin este reset quedan a 72px (tamaño por defecto del CDN).
   -------------------------------------------------------------------------- */

img.emoji {
  display: inline-block;
  height: 1em;
  width: 1em;
  vertical-align: -0.15em;       /* alinea igual que texto */
  margin: 0 0.05em 0 0.1em;
  object-fit: contain;
  image-rendering: auto;         /* suaviza el escalado en pantallas HiDPI */
  pointer-events: none;
  user-select: none;
}

.message-icon {
  flex-shrink: 0;
}

.message .icon--correct svg,
.message .icon--success  svg { stroke: var(--success,  #26890d); }
.message .icon--incorrect svg,
.message .icon--danger   svg { stroke: var(--danger,   #e21b3c); }
.message .icon--warning  svg { stroke: var(--warning,  #ffa602); }
.message .icon--info     svg { stroke: var(--info,     #1368ce); }

/* --------------------------------------------------------------------------
   10. Dark-mode global icon stroke softening
   -------------------------------------------------------------------------- */

[data-theme="dark"] .icon svg,
[data-qa-theme="dark-neon"] .icon svg {
  /* Slightly softer stroke on dark backgrounds — feels more premium */
  stroke-opacity: 0.92;
}

/* --------------------------------------------------------------------------
   11. Reduced-motion respect
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .icon svg,
  .icon--spin svg,
  .icon--pulse svg,
  .icon--bounce-up:hover svg,
  a:hover .icon svg,
  button:hover .icon svg {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   12. Print — match text colour, no animations
   -------------------------------------------------------------------------- */

@media print {
  .icon svg {
    stroke: currentColor !important;
    animation: none !important;
  }
}