/* ============================================================
   theme.css · Portal CPCV (DEV) · CSS GLOBAL ÚNICO
   ------------------------------------------------------------
   Este ficheiro é o ÚNICO ponto onde mora:
   - Tokens light/dark (cores, bordas)
   - Mobile transversal (inputs ≥16px, slider topbar, swipe hint)
   - Overrides para hard-codes específicos por página
   - Estilo do banner DEV e widgets temporários

   PLAYBOOK · adicionar novo HTML ao /dev/:
   ────────────────────────────────────────
   1. Copiar HTML para /dev/<nome>.html
   2. No <head>, antes do <style> existente, meter:

      <!-- Tema + font size (acessibilidade) · anti-flash inline -->
      <script>(function(){try{
        var t = localStorage.getItem('cpcv_ui_theme') || 'auto';
        var resolved = t;
        if (t === 'auto') {
          resolved = (window.matchMedia && matchMedia('(prefers-color-scheme: light)').matches) ? 'light' : 'dark';
        }
        document.documentElement.setAttribute('data-theme', resolved);
        document.documentElement.setAttribute('data-theme-pref', t);
        var step = parseInt(localStorage.getItem('cpcv_ui_font_step') || '0', 10);
        if (isNaN(step) || step < 0) step = 0;
        if (step > 3) step = 3;
        if (step > 0) document.documentElement.setAttribute('data-font-step', String(step));
      }catch(e){}})();</script>
      <link rel="stylesheet" href="theme.css">

   3. Apontar shared para SHAs novos:
      auth-check @e3edd93  · topbar @97a1f36

   4. No <body>, logo a seguir à abertura:

      <div id="cpcv-swipe-hint" class="cpcv-swipe-hint" style="display:none">›</div>

   5. No fim do <body>, antes de </body>:

      <div class="cpcv-dev-banner">🛠 Versão DEV · /dev/ · alterações de acessibilidade em teste</div>
      <script src="dev-bootstrap.js" defer></script>

   6. Onde chamares CPCVTopbar.setAvatar(nome), passa também a foto:
      CPCVTopbar.setAvatar(m.nome, m.foto_url);

   7. Hash routing (opcional · se a página tiver tabs/views):
      ver padrão em /dev/portal.html (applyRouteFromHash) ou
      /dev/perfil.html (showTab + _perfilApplyRoute).

   Activação do tema: <html data-theme="light"> ou data-theme="dark"
   Sem data-theme = dark (default actual do portal).

   ALIASES curtos (definidos abaixo · ambos os temas):
   ─────────────────────────────────────────────────
   --bh    → --border-hover    --muted → --text-muted
   --faint → --text-faint      --ok    → --success
   --bad   → --danger          --warn  → --warning
   --adim  → --accent-dim      --adim2 → --accent-dim2
   --ok-d/--bad-d/--warn-d → rgba dim das respectivas cores
   --bg4   → degrau abaixo de bg3 (escurecido em dark / mais saturado em light)

   Exercícios podem usar nomes curtos OU longos · ambos funcionam.
   ============================================================ */


/* ─── DARK · contraste reforçado WCAG AA ──────────────────── */
:root[data-theme="dark"] {
  --bg: #0c0c0b;
  --bg2: #141413;
  --bg3: #1c1c1a;
  --bg4: #222220;                            /* nova: alias usado por vários exercícios */
  --border: rgba(255,255,255,0.14);          /* era 0.07 */
  --border-hover: rgba(255,255,255,0.24);    /* era 0.14 */
  --text: #f0ede8;
  --text-muted: #9a9890;                     /* era #8a8880 */
  --text-faint: #7a7770;                     /* era #4a4845 (AA fail) */
  --accent: #c9a96e;
  --accent-dim: rgba(201,169,110,0.16);
  --accent-dim2: rgba(201,169,110,0.08);
  --success: #5cb280;                        /* era #4a9e6b */
  --danger: #ef7a7a;                         /* era #e06060 */
  --warning: #d4924a;
  --placeholder: #7a7770;
}


/* ─── LIGHT · paleta validada (off-white quente) ──────────── */
:root[data-theme="light"] {
  --bg: #fafaf6;
  --bg2: #f1eee5;
  --bg3: #e6e2d6;
  --bg4: #d8d3c2;                            /* degrau mais escuro que bg3 · ainda claro */
  --border: rgba(0,0,0,0.12);
  --border-hover: rgba(0,0,0,0.22);
  --text: #1a1816;
  --text-muted: #54514a;
  --text-faint: #7a7770;
  --accent: #8a6a35;                          /* dourado escuro AA sobre branco */
  --accent-dim: rgba(138,106,53,0.10);
  --accent-dim2: rgba(138,106,53,0.05);
  --success: #2d7a4a;
  --danger: #a83838;
  --warning: #a66425;
  --placeholder: #7a7770;
}


/* ─── ALIASES curtos (usados pelos exercícios) ─────────────
   Permite que CSS inline com nomes curtos funcione em ambos os temas
   sem precisar de tocar nos exercícios. Calculados a partir dos longos. */
:root[data-theme="dark"],
:root[data-theme="light"] {
  --bh: var(--border-hover);
  --muted: var(--text-muted);
  --faint: var(--text-faint);
  --ok: var(--success);
  --bad: var(--danger);
  --warn: var(--warning);
  --adim: var(--accent-dim);
  --adim2: var(--accent-dim2);
}

:root[data-theme="dark"] {
  --ok-d: rgba(92,178,128,0.15);
  --bad-d: rgba(239,122,122,0.13);
  --warn-d: rgba(212,146,74,0.14);
}
:root[data-theme="light"] {
  --ok-d: rgba(45,122,74,0.12);
  --bad-d: rgba(168,56,56,0.10);
  --warn-d: rgba(166,100,37,0.12);
}


/* ============================================================
   Overrides para hard-codes conhecidos do portal.html
   ============================================================ */


/* ─── Module cards (linha 408-444 do portal.html) ─────────── */
:root[data-theme="light"] .module-card {
  background: rgba(255,255,255,0.65);
}
:root[data-theme="light"] .module-card:hover {
  background: rgba(255,255,255,0.92);
}
:root[data-theme="light"] .module-card.current {
  background: rgba(255,255,255,0.85);
  border-color: rgba(138,106,53,0.35);
}
:root[data-theme="light"] .module-card::before {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent);
}
:root[data-theme="light"] .module-card.current::before {
  background: linear-gradient(90deg, transparent, rgba(138,106,53,0.20), transparent);
}


/* ─── Wallpaper overlay (linha 326-333 do portal.html) ────── */
:root[data-theme="light"] #view-home.has-wallpaper::after {
  background: linear-gradient(
    90deg,
    var(--bg) 0%,
    var(--bg) 22%,
    rgba(250,250,246,0.55) 55%,
    rgba(250,250,246,0.18) 80%,
    transparent 100%
  );
}


/* ─── Avisos (linha 384-389 do portal.html) ───────────────── */
:root[data-theme="light"] .aviso.info {
  background: rgba(60,110,200,0.10);
  border-color: rgba(60,110,200,0.30);
}
:root[data-theme="light"] .aviso.promo {
  background: rgba(138,106,53,0.10);
  border-color: rgba(138,106,53,0.35);
}
:root[data-theme="light"] .aviso.alerta {
  background: rgba(168,56,56,0.10);
  border-color: rgba(168,56,56,0.35);
}


/* ─── Progress bars + listras decorativas ─────────────────── */
:root[data-theme="light"] .prog-track {
  background: rgba(0,0,0,0.08);
}


/* ─── Tags (linhas 601-603) ───────────────────────────────── */
:root[data-theme="light"] .tag-ex {
  background: rgba(45,122,74,0.12);
  color: var(--success);
}
:root[data-theme="light"] .tag-vid {
  background: rgba(0,0,0,0.06);
  color: var(--text-muted);
}


/* ─── Tooltips e overlays ─────────────────────────────────── */
:root[data-theme="light"] .resource-lock-msg {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
:root[data-theme="light"] .tutorial-overlay {
  background: rgba(0,0,0,0.45);
}


/* ─── Botão dourado: texto deve ficar legível ─────────────── */
:root[data-theme="light"] .topbar-creditos-btn,
:root[data-theme="light"] .btn-primary {
  color: #fafaf6;
}


/* ─── Footer tags com rgba hard-coded ─────────────────────── */
:root[data-theme="light"] .df-tag {
  border-color: rgba(138,106,53,0.25);
}


/* ============================================================
   Overrides específicos do perfil.html
   ============================================================ */

/* ─── Toggle wallpaper M1/M2 (linha 143-146 do perfil) ────── */
/* Original: switch rgba(255,255,255,.12) + knob #f0ede8 (off) / #0c0c0b (on) */
:root[data-theme="light"] .wp-tg-switch {
  background: rgba(0,0,0,0.12);
  border-color: rgba(0,0,0,0.06);
}
:root[data-theme="light"] .wp-tg-switch::after {
  background: #1a1816;
}
:root[data-theme="light"] .wp-tg-item.on .wp-tg-switch::after {
  background: #fafaf6;
}

/* ─── Botão remover foto (.fia-slot .rm) ───────────────────── */
/* Original: background rgba(0,0,0,.7) color:#fff — overlay sobre imagem, fica OK em ambos */

/* ─── Modal overlays — escuros em ambos os temas ───────────── */
/* .intg-modal-ov e .crop-overlay têm rgba(0,0,0,.78/.88) — overlays
   modais devem ficar escuros mesmo em light, então sem override. */

/* ─── Crop area mantém-se preta (área de trabalho da imagem) ──*/
/* .crop-area background:#000 fica OK em ambos */

/* ─── Histórico de créditos (zebra) ───────────────────────── */
:root[data-theme="light"] .hist-row:nth-child(even) {
  background: rgba(0,0,0,0.02);
}

/* ─── Sub-tabs scroll ─────────────────────────────────────── */
/* .pf-subtabs e .pf-subtab usam var(--text-faint) — já cobertos */

/* ─── Intg card hover ─────────────────────────────────────── */
/* .intg-card e .intg-btn usam var() — OK */

/* ─── Pf-input focus border (linha 31) ────────────────────── */
/* rgba(201,169,110,0.4) é dourado — funciona em ambos */


/* ============================================================
   Font size scaling
   ------------------------------------------------------------
   Implementado em JS no portal_dev.html — itera os elementos
   e ajusta font-size individualmente. CSS sem trabalho aqui;
   ficou esta seccao como anchor doc.
   Multiplicadores: 0 = 1.00 · 1 = 1.08 · 2 = 1.16 · 3 = 1.24
   ============================================================ */


/* ============================================================
   Toggles visuais provisórios (DEV)
   ============================================================ */

.cpcv-theme-toggle-dev,
.cpcv-fontsize-dev {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 30px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  flex-shrink: 0;
}
.cpcv-theme-toggle-dev button,
.cpcv-fontsize-dev button {
  width: 28px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
  padding: 0;
}
.cpcv-theme-toggle-dev button:hover:not(:disabled),
.cpcv-fontsize-dev button:hover:not(:disabled) {
  color: var(--text);
}
.cpcv-theme-toggle-dev button.active {
  background: var(--accent-dim);
  color: var(--accent);
}
.cpcv-fontsize-dev button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.cpcv-fontsize-dev .fs-step {
  min-width: 22px;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--text-faint);
  pointer-events: none;
  user-select: none;
}


/* ============================================================
   Tipografia base · Montserrat
   ------------------------------------------------------------
   Montserrat é a font base do portal (Regular/Medium/Bold).
   Cada HTML em /dev/ carrega Montserrat no <link> Google Fonts.
   Estas regras servem como fallback/garante para páginas novas.
   Excepções mantêm-se onde já estão definidas inline:
   - Instrument Serif (welcome h1, perfil-title, module-header h2)
   - DM Mono (códigos, df-tag, df-item, area-num, etc.)
   ============================================================ */

body {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}
button, input, textarea, select {
  font-family: inherit;
}


/* ============================================================
   Mobile · regras transversais
   ============================================================ */

/* Anti tap-highlight cinzento no Safari iOS */
* { -webkit-tap-highlight-color: transparent; }

/* Inputs ≥16px em mobile · senão iOS Safari faz auto-zoom ao focus */
@media (max-width: 600px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input[type="url"],
  input:not([type]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Evitar overflow horizontal acidental — usar `clip` que permite
   scroll horizontal em children (ex.: topbar slider em mobile) */
html, body { overflow-x: clip; }


/* ============================================================
   Topbar slider · mobile/tablet
   ------------------------------------------------------------
   Em <=900px a topbar tem scroll horizontal · ninguém é
   escondido · scrollbar invisível mas swipe nativo no telemóvel
   ============================================================ */

@media (max-width: 900px) {
  /* Wrapper sticky para conter o slider e os hints visuais */
  .topbar, .cpcv-topbar {
    position: relative !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    /* Fade à direita indica scroll horizontal disponível */
    -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
    padding-right: 32px !important;
  }
  .topbar::-webkit-scrollbar,
  .cpcv-topbar::-webkit-scrollbar { display: none; }

  .topbar > *,
  .cpcv-topbar > * { flex-shrink: 0 !important; }

  /* O .topbar-nav tem margin-left:auto em desktop — anular */
  .topbar-nav, .cpcv-tb-nav { margin-left: 0 !important; }

  /* Chip "→" sticky à direita: pista visual constante de swipe */
  .cpcv-swipe-hint {
    position: fixed;
    top: 18px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    z-index: 200;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    animation: cpcvSwipePulse 1.6s ease-in-out 3;
  }
  @keyframes cpcvSwipePulse {
    0%, 100% { transform: translateX(0); opacity: 0.85; }
    50%      { transform: translateX(-5px); opacity: 1; }
  }
}
@media (min-width: 901px) {
  .cpcv-swipe-hint { display: none; }
}


/* ============================================================
   Banner DEV · sinaliza que esta versão é de testes
   ============================================================ */

.cpcv-dev-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #c79a4f;
  color: #0c0c0b;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 12px;
  z-index: 9998;
  pointer-events: none;
  border-top: 1px solid rgba(0,0,0,0.15);
}

/* Animação partilhada (consolidada — antes inline em vários exercícios) */
@keyframes spin{to{transform:rotate(360deg)}}

/* Codex (página /codex + widget por exercício): negrito do markdown era #fff →
   invisível em tema light. Segue o texto. (Dark mantém o branco por especificidade.) */
:root[data-theme="light"] .bubble strong,
:root[data-theme="light"] .cdxw-m .b strong{ color: var(--text); }
