/* ============================================================
   MinhaCasaFácil — Temas v2 (1:1 com o fonte do Padrão Construtivo)
   Variáveis com os MESMOS nomes do fonte (--t-bg, --t-bg2, --t-primary…)
   para reproduzir o markup das telas verbatim. Aplicado via [data-theme].
   ============================================================ */

/* t1 Aurora (default) */
:root, :root[data-theme="t1"] {
  --t-font: 'Syne', system-ui, -apple-system, sans-serif;
  --t-bg: #0b1628; --t-bg2: #111e36; --t-bg3: #182744;
  --t-primary: #2563eb; --t-primaryl: #3b82f6; --t-accent: #38bdf8;
  --t-text: #f1f5f9; --t-text2: #94a3b8; --t-text3: #64748b;
  --t-border: rgba(255,255,255,0.09); --t-inv: #0b1628;
}
:root[data-theme="t2"] {
  --t-font: 'Nunito', system-ui, -apple-system, sans-serif;
  --t-bg: #fdf6ee; --t-bg2: #ffffff; --t-bg3: #f5ebe0;
  --t-primary: #c45e1c; --t-primaryl: #ee7f3d; --t-accent: #c45e1c;
  --t-text: #331907; --t-text2: #786d65; --t-text3: #a39a92;
  --t-border: #e7d8cb; --t-inv: #fdf6ee;
}
:root[data-theme="t3"] {
  --t-font: 'Fraunces', system-ui, -apple-system, sans-serif;
  --t-bg: #fafaf4; --t-bg2: #ffffff; --t-bg3: #e6f5ec;
  --t-primary: #16a34a; --t-primaryl: #22c55e; --t-accent: #16a34a;
  --t-text: #032e16; --t-text2: #4b5563; --t-text3: #9ca3af;
  --t-border: #e2e8e4; --t-inv: #fafaf4;
}
:root[data-theme="t4"] {
  --t-font: 'Inter', system-ui, -apple-system, sans-serif;
  --t-bg: #0c0c0e; --t-bg2: #161618; --t-bg3: #232327;
  --t-primary: #3b82f6; --t-primaryl: #60a5fa; --t-accent: #60a5fa;
  --t-text: #f4f4f5; --t-text2: #a1a1aa; --t-text3: #71717a;
  --t-border: rgba(255,255,255,0.08); --t-inv: #0c0c0e;
}

/* PONTE: vars legadas (tokens.css) → temas v2, para as telas antigas reskinarem */
:root {
  --bg: var(--t-bg); --bg2: var(--t-bg2); --bg3: var(--t-bg3);
  --primary: var(--t-primary); --primary-light: var(--t-primaryl); --primary-dark: var(--t-primary);
  --accent: var(--t-accent);
  --text: var(--t-text); --text2: var(--t-text2); --text3: var(--t-text3);
  --glass-bg: var(--t-bg2); --glass-border: var(--t-border); --glass-hover: var(--t-bg3);
}
body { font-family: var(--t-font), system-ui, -apple-system, sans-serif; }

/* Painel de contexto à direita (web-desktop) — fiel ao fonte */
.context-panel { display: none; }
@media (min-width: 1200px) {
  .context-panel { display: flex; flex-direction: column; width: 316px; flex-shrink: 0; background: var(--t-bg2); border-left: 1px solid var(--t-border); height: 100vh; height: 100dvh; }
  .main-area { max-width: none; }
}
/* Glass sem backdrop-filter nos temas claros (t2 Terra, t3 Lima):
   no tema escuro o blur cria depth real; no claro o fundo claro+blur
   gera um retangulo fantasma visivelmente deslocado (duplicacao visual). */
:root[data-theme="t2"] .glass,
:root[data-theme="t3"] .glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 4px 24px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.6);
}

.row-i { transition: background .15s; }
.row-i:hover { background: var(--t-bg3) !important; }

/* Sidebar accordion */
.dmenu summary { list-style: none; cursor: pointer; }
.dmenu summary::-webkit-details-marker { display: none; }
.dmenu summary:hover { background: var(--t-bg3); }
.dmenu details[open] > summary .dchev { transform: rotate(180deg); }
.dmenu .dchev { transition: transform 200ms cubic-bezier(.4,0,.2,1); }
.dmenu .leaf { display: flex; align-items: center; gap: 11px; padding: 10px 16px; cursor: pointer; transition: background 120ms, color 120ms; }
.dmenu .leaf:hover { background: var(--t-bg3); color: #ffffff; }

/* ===== Legibilidade do menu lateral =====
   O sidebar tem fundo escuro fixo; as fontes seguiam a cor do tema e ficavam
   escuras demais sobre o escuro. Aqui forcamos branco intenso (em qualquer tema). */
.sidebar #sideLogoText { color: #f8fafc; }
.sidebar #sideExpanded { color: #e9eef7; }
.sidebar .dmenu summary { color: #f1f5fb; font-weight: 600; }
.sidebar .dmenu .leaf { color: #d4dcea; }
.sidebar #sideExpanded > div[style*="uppercase"] { color: #aab6cc !important; }
@keyframes sosp { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.5); } 50% { box-shadow: 0 0 0 7px rgba(220,38,38,0); } }
.dmenu summary:active { opacity: 0.7; }
.nav-i:active { transform: scale(0.99); }
.card-i:active { transform: scale(0.985); }
@keyframes sheetup { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* Desktop: colapsar sidebar via JS (width:60px) */
@media (min-width: 768px) {
  .sidebar { overflow: hidden; transition: width 220ms cubic-bezier(.4,0,.2,1); }
}