/* Override de tema escuro para o Relógio Modal.
   Este arquivo não altera o bundle React (index-C86XXiid.js) — apenas
   sobrescreve cores via CSS, incluindo os atributos fill/stroke do SVG
   (que têm prioridade mais baixa que qualquer regra de CSS de autor). */

.theme-toggle-relogio{
  position:fixed;top:14px;right:14px;z-index:50;
  width:32px;height:32px;border-radius:50%;
  background:#fff;border:1.5px solid #d8d5e4;color:#3a3550;
  cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;
  transition:background-color .2s,border-color .2s,color .2s;
}
.theme-toggle-relogio:hover{border-color:#1d9e75;}

body.dark{background:#0d1013;}

body.dark .theme-toggle-relogio{
  background:#151a1f;border-color:#263038;color:#e8eef2;
}

body.dark .relogio-modal{color:#e8eef2;}
body.dark .relogio-modal .subtitulo{color:#8a97a1;}

body.dark .seletor-familia button,
body.dark .seletor-modos button,
body.dark .seletor-notacao button{
  color:#e8eef2;background:#151a1f;border-color:#263038;
}
body.dark .seletor-familia button.ativo{color:#fff;background:#1d9e75;border-color:#1d9e75;}
body.dark .seletor-modos button.ativo{color:#fff;background:#3d5a6b;border-color:#3d5a6b;}
body.dark .seletor-modos button.ativo small{color:#c9c5d4;}
body.dark .seletor-notacao button.ativo{color:#fff;background:#1d9e75;border-color:#1d9e75;}

body.dark .painel-formula{background:#151a1f;}
body.dark .notas-da-escala{color:#e8eef2;}
body.dark .notas-da-escala .nota-tonica{color:#1d9e75;}
body.dark .tetrades-da-escala{color:#e8eef2;}
body.dark .tetrades-da-escala span{background:#1c242b;}
body.dark .tetrades-da-escala span small{color:#8a97a1;}
body.dark .tetrades-da-escala .nota-tonica{color:#1d9e75;}
body.dark .legenda{color:#8a97a1;}

/* mostrador (relógio em si): cores fixas de acento (tônica, tom, semitom)
   ficam iguais nos dois temas; só a "tinta" escura do texto/traço muda. */
body.dark [fill="#3a3550"]{fill:#e8eef2 !important;}
body.dark [fill="#5a5570"]{fill:#e8eef2 !important;}
body.dark [stroke="#3a3550"]{stroke:#e8eef2 !important;}
body.dark [stroke="#e8e6f0"]{stroke:#263038 !important;}