/* BluHertz — Lembra Aí: estilo PRÓPRIO do formulário de rotinas. Complementa
   ../assets/estilo.css (que não é editado por este app). Tudo aqui usa as
   variáveis do estilo compartilhado, então o tema claro/escuro vem de graça.

   O que é genérico e faltou em assets/estilo.css foi replicado aqui (marcado
   com "genérico"): input[type=date], input[type=time], textarea curta de
   texto corrido, interruptor (checkbox) e grupo de botões de alternar. */

/* cor do app (teal) na página inteira: a --primaria do estilo compartilhado é
   azul, então ela é redefinida aqui (só dentro de body.lembra) para o botão
   "+ Adicionar rotina", "+ Adicionar usuário", dias marcados, links e chips
   ficarem da mesma cor do cabeçalho, dos números de passo e do botão Baixar. */
.lembra { --primaria: #0F766E; --primaria-escura: #115E59; --primaria-clara: #CCFBF1; --primaria-texto: #ffffff; --foco: 0 0 0 3px rgba(15, 118, 110, .4); }
@media (prefers-color-scheme: dark) {
  .lembra { --primaria: #14B8A6; --primaria-escura: #2DD4BF; --primaria-clara: #0f2f2b; --primaria-texto: #04211d; --foco: 0 0 0 3px rgba(20, 184, 166, .5); }
}
.lembra .topo { --topo-fundo: #0F766E; background: #0F766E; }
.lembra .logo { color: #0F766E; }
.lembra .passo { background: #0D9488; color: #fff; }

/* ---------- genérico: campos que o estilo compartilhado não cobre ---------- */
.lembra input[type="date"], .lembra input[type="time"] {
  width: 100%; background: var(--cartao); border: 1px solid var(--linha-forte); color: var(--texto);
  border-radius: var(--raio-p); padding: 8px 10px; min-height: 40px; font-size: 14px; min-width: 0;
}
.lembra input[type="date"]:disabled, .lembra input[type="time"]:disabled { opacity: .45; background: var(--cartao-2); }
.lembra textarea.texto-corrido {
  min-height: 64px; font-family: inherit; font-size: 14px; line-height: 1.4; resize: vertical; padding: 8px 10px;
}
/* genérico: interruptor "Ativa / Pausada" */
.alternar { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; font-size: 14px; user-select: none; }
.campo > label.alternar { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--texto); font-weight: 500; }
.alternar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.alternar .trilho { width: 40px; height: 22px; border-radius: 999px; background: var(--linha-forte); position: relative; transition: background .15s; flex: none; }
.alternar .trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.alternar input:checked + .trilho { background: var(--verde); }
.alternar input:checked + .trilho::after { left: 21px; }
.alternar input:focus-visible + .trilho { box-shadow: var(--foco); }
/* genérico: grupo de botões de alternar (dias da semana) */
.alternaveis { display: flex; flex-wrap: wrap; gap: 6px; }
.alternaveis .btn.alt { background: var(--cartao); color: var(--texto); border-color: var(--linha-forte); padding: 6px 10px; min-width: 44px; min-height: 40px; font-weight: 600; }
.alternaveis .btn.alt[aria-checked="true"] { background: var(--primaria); color: var(--primaria-texto); border-color: var(--primaria); }
.alternaveis .btn.alt[aria-checked="true"]:hover { background: var(--primaria-escura); }

/* ---------- lista de rotinas (cartões) ---------- */
.rotinas { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .rotinas { grid-template-columns: 1fr 1fr; } }
.rotina { border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; background: var(--cartao); display: flex; flex-direction: column; gap: 12px; border-left: 6px solid var(--cor-rotina, var(--linha-forte)); }
.rotina.com-erro { border-color: var(--vermelho); }
.rotina.pausada { opacity: .8; }
.rotina .rotina-cab { display: flex; align-items: center; gap: 8px; }
.rotina .rotina-cab .num { font-size: 12px; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; flex: 1; }
.rotina .rotina-cab .previa-emoji { font-size: 20px; line-height: 1; }
.rotina .rotina-cab .botoes { display: flex; gap: 4px; }
.rotina-grade { display: grid; gap: 10px 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rotina-grade .campo.largo, .rotina-grade .largo { grid-column: 1 / -1; }
.rotina .problema { color: var(--vermelho); font-size: 12.5px; }
.rotina .problema:empty { display: none; }

/* título com o emoji ao lado */
.titulo-com-emoji { display: flex; gap: 8px; align-items: flex-end; }
.titulo-com-emoji .campo { flex: 1; }

/* seletor de emoji */
.emoji-botao { width: 48px; height: 40px; min-height: 40px; padding: 0; font-size: 20px; line-height: 1; background: var(--cartao); color: var(--texto); border: 1px solid var(--linha-forte); border-radius: var(--raio-p); cursor: pointer; flex: none; }
.emoji-botao:hover, .emoji-botao[aria-expanded="true"] { background: var(--cartao-2); border-color: var(--primaria); }
.emoji-painel { grid-column: 1 / -1; border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 10px; background: var(--cartao-2); display: flex; flex-direction: column; gap: 8px; }
.emoji-painel .grade-emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; }
.emoji-painel .emoji-opcao { width: 100%; height: 40px; min-height: 40px; padding: 0; font-size: 20px; line-height: 1; background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.emoji-painel .emoji-opcao:hover { background: var(--cartao); border-color: var(--linha-forte); }
.emoji-painel .emoji-opcao[aria-pressed="true"] { background: var(--primaria-clara); border-color: var(--primaria); }
.emoji-painel .proprio { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.emoji-painel .proprio .campo { flex: 1 1 200px; }

/* bolinhas de cor */
/* alvo de toque de 40px (como os botões e campos): a bolinha pintada tem 30px
   e a borda da cor do cartão (5px) é área clicável. O fundo vem inline (hex da
   paleta), por isso o ring de marcada é box-shadow interno, não borda. */
.cores { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 40px; }
.cores .cor { width: 40px; height: 40px; min-height: 40px; border-radius: 50%; border: 5px solid var(--cartao); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 800; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); transition: border-width .12s; }
.cores .cor[aria-checked="true"] { border-width: 2px; box-shadow: inset 0 0 0 3px var(--texto), inset 0 0 0 5px rgba(255,255,255,.5); }
.cores .cor:hover { border-width: 3px; }
.cores .cor:focus-visible { box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), var(--foco); }
.cores .cor[aria-checked="true"]:focus-visible { box-shadow: inset 0 0 0 3px var(--texto), inset 0 0 0 5px rgba(255,255,255,.5), var(--foco); }
.cores .nome-cor { font-size: 12px; color: var(--suave); margin-left: 4px; }

/* horários (chips + adicionar) */
.horarios { display: flex; flex-direction: column; gap: 6px; }
.horarios .chips { margin: 0; min-height: 0; }
.horarios .chip { min-height: 36px; padding: 2px 10px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; }
.horarios .chip .x { width: 36px; height: 36px; margin: -2px -10px -2px -4px; }
.horarios .add { display: flex; gap: 6px; align-items: center; }
.horarios .add input[type="time"] { flex: 1 1 120px; max-width: 170px; }

/* resumo */
.resumo-usuario .lista-rotinas { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--suave); }
.resumo-usuario .lista-rotinas li { margin: 2px 0; }
.resumo-usuario .lista-rotinas .pausada { text-decoration: line-through; }
.resumo-usuario .cor-ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }

/* etiquetas dos usuários (opcional) */
.etiquetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }

/* tema escuro: cabeçalho e números de passo (os botões já vêm da --primaria acima) */
@media (prefers-color-scheme: dark) {
  .lembra .topo { --topo-fundo: #115E59; background: #115E59; }
  .lembra .passo { background: #14B8A6; color: #04211d; }
}