/* =========================================================
   DOMENJÓ THEME (light/dark) — base global
   Fitxer: public/css/theme.css
   ========================================================= */

/* Evita subratllat al logo (ara és <a>) */
.app-logo{
  text-decoration: none;
}

/* ─────────────────────────────────────────────
   Switch Clar/Fosc (header)
   ───────────────────────────────────────────── */

.theme-control{
  display:flex;
  align-items:center;
  gap: 8px;
}

.theme-caption{
  font-size: 0.75rem;
  user-select: none;
  color: rgba(255,255,255,.78); /* header és negre */
}

html[data-theme="light"] .theme-caption-light{
  color: var(--gold-light, #B29A66);
  font-weight: 700;
}
html[data-theme="light"] .theme-caption-dark{ opacity: .55; }

html[data-theme="dark"] .theme-caption-dark{
  color: var(--gold-light, #B29A66);
  font-weight: 700;
}
html[data-theme="dark"] .theme-caption-light{ opacity: .55; }

.theme-switch{
  position: relative;
  width: 44px;
  height: 24px;
  display: inline-block;
}

.theme-switch input{
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-slider{
  position:absolute;
  inset:0;
  cursor:pointer;
  background:#111;
  border: 1px solid #444;
  border-radius: 999px;
  transition: background .18s ease, border-color .18s ease;
}

.theme-slider::before{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  left:3px;
  top:50%;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-light, #B29A66), var(--gold, #926F25));
  transition: left .18s ease;
}

.theme-switch input:checked + .theme-slider::before{
  left: calc(100% - 21px);
}

.theme-switch input:focus-visible + .theme-slider{
  box-shadow: 0 0 0 3px rgba(146,111,37,.25);
}

@media (max-width: 640px){
  .theme-caption{ display:none; }
}

/* ─────────────────────────────────────────────
   Tema FOSC (mínim, només overrides globals)
   ───────────────────────────────────────────── */

html[data-theme="dark"] body{
  background: #070707;
  color: rgba(242,242,242,.92);
}

html[data-theme="dark"] .app-main{
  background:
    radial-gradient(1100px 520px at 20% -10%, rgba(146,111,37,.25), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(146,111,37,.18), transparent 55%),
    linear-gradient(#070707, #0b0b0b);
  min-height: calc(100vh - 72px);
}

html[data-theme="dark"] .card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  color: rgba(242,242,242,.92);
}

html[data-theme="dark"] .card-header{
  border-bottom-color: rgba(255,255,255,.10);
}

html[data-theme="dark"] .page-title{ color: rgba(242,242,242,.92); }
html[data-theme="dark"] .page-subtitle{ color: rgba(242,242,242,.70); }