/* Estilos da área Meu dia, Desafios, Spinning e Evolução (dono: agente 1). */
/* a11y.css carrega depois deste arquivo: regras que disputam com ele usam seletor mais específico. */

/* Meu dia: voltar para hoje, legenda da semana e textos de apoio */
.back-today{margin:-12px 0 16px;color:var(--coral);font-weight:600;gap:6px}
.back-today svg{width:16px;height:16px}
.strip-legend{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:-12px 0 24px;line-height:1.5}
.legend-done{display:inline-block;width:18px;height:3px;border-radius:2px;background:var(--teal);flex-shrink:0}
.section .section-head .text-button[data-action="settings"]{font-weight:600;gap:6px;padding:7px 4px}
.quick-log .quick-hint{margin:6px 0 4px;text-align:center}
.section-hint{margin:-8px 0 16px}
.section-hint strong{color:var(--ink);font-weight:600}
.day-focus .focus-row p{line-height:1.45}

/* Agenda da semana: coluna do lápis com 44px (antes 38px e o botão vazava da linha) */
.schedule-row{grid-template-columns:120px minmax(0,1fr) 135px 44px}
.schedule-row>.tag{justify-self:start}

/* Janela de jejum: botão alinhado e texto sem espremer */
.fasting-section>div{flex:1;min-width:0}

/* Minha alimentação */
.diet-howto{display:flex;align-items:flex-start;gap:8px;margin:0 0 6px;padding:12px 14px;background:var(--teal-light);border-radius:6px;color:var(--ink);max-width:none}
.diet-howto svg{width:17px;height:17px;color:var(--teal);margin-top:2px;flex-shrink:0}
.diet-howto strong{color:var(--teal)}

/* Evolução: gráfico vazio vira um convite, sem eixos de 0 a 1 */
.chart-area .chart-empty{pointer-events:auto;gap:8px;justify-items:center;padding:12px;border:1px dashed var(--field-border);border-radius:8px;background:var(--white)}
.chart-empty .focus-icon{margin-bottom:4px}
.chart-empty p{max-width:360px}
.chart-empty .btn{margin-top:8px}
.history-title{align-items:flex-end}
.history-title .hint{margin:4px 0 0}
.empty svg{color:var(--muted)}

/* Modais: grupos do check-in e ações sempre visíveis na edição da dieta */
.form-grid .form-separator.first{border-top:0;padding-top:0;margin-top:0}
.form-grid .field-hint{margin:-4px 0 0}
dialog .modal-actions.sticky-actions{position:sticky;bottom:-27px;background:var(--white);padding:14px 0 4px;margin-top:8px;border-top:1px solid var(--line)}
.plan-minutes[hidden]{display:none}

/* Meus desafios */
.calendar-legend{justify-content:flex-start;gap:8px 18px;align-items:center}
.calendar-legend>span{display:inline-flex;align-items:center}
.calendar-legend>span:last-child{flex-basis:100%}
.calendar-legend i.legend-open{background:var(--paper);border:1px solid var(--field-border)}
.challenge-detail .btn[data-action="challenge-check"]{margin-top:4px}

/* Tablet e celular: "Próximos passos" continua visível (antes sumia abaixo de 1150px) */
@media(max-width:1150px){
  .today-top .day-focus{display:flex;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:16px 18px 4px}
}

@media(max-width:820px){
  .diet-layout>.diet-side{order:-1;margin:0 0 8px}
  .schedule-row{grid-template-columns:100px minmax(0,1fr) 90px 44px}
}

@media(max-width:560px){
  .back-today{margin:-8px 0 14px}
  .strip-legend{margin:-10px 0 22px}
  /* Agenda: lápis dentro da tela e situação do dia visível no celular */
  .schedule-row{grid-template-columns:58px minmax(0,1fr) 44px;row-gap:6px}
  .schedule-row>.schedule-date{grid-row:1/3}
  .schedule-row>.schedule-activity{grid-column:2;grid-row:1}
  .schedule .schedule-row>.tag{display:inline-flex;grid-column:2;grid-row:2;margin-left:38px}
  .schedule-row>.icon-button{grid-column:3;grid-row:1/3}
  .schedule-date{flex-direction:column;align-items:flex-start;gap:0}
  /* Jejum: texto em largura total e botão embaixo */
  .fasting-section{flex-wrap:wrap;align-items:flex-start}
  .fasting-section>div{min-width:calc(100% - 60px)}
  .fasting-section .btn{margin-left:57px;width:calc(100% - 57px)}
  /* Histórico de pedaladas: a coluna "Registrado" é sempre igual, some no celular */
  .table-wrap .status-cell{display:none}
  /* Histórico da evolução: cada dia vira um cartão (a tabela de 7 colunas alargava a tela) */
  .history-table thead{display:none}
  .history-table,.history-table tbody{display:block}
  .history-table tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 44px;gap:6px 10px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
  .history-table td{display:flex;flex-direction:column;padding:0;border:0;white-space:normal;min-width:0;font-size:13px}
  .history-table td::before{content:attr(data-label);font-size:12px;color:var(--muted)}
  .history-table td[data-label="Data"]{grid-column:1/4;font-weight:700;font-size:14px}
  .history-table td[data-label="Data"]::before{content:none}
  .history-table td.row-edit{grid-column:4;grid-row:1/4;align-self:center}
  .history-title{flex-wrap:wrap;align-items:flex-start}
  /* Evolução e alimentação no celular */
  .chart-area .chart-empty{padding:16px}
  .diet-howto{padding:10px 12px}
  .today-top .day-focus{padding:12px 14px 2px}
  /* Resumo da dieta compacto no topo do celular */
  .diet-side{padding:14px 0 4px}
  .diet-side>.tag,.diet-side>h3+p{display:none}
  .diet-side>h3{margin-top:0!important}
  .diet-side p{margin:8px 0}
}

/* Nome do mês: só a primeira letra maiúscula ("Setembro de 2026", não "Setembro De 2026") */
.challenge-calendar header h3{text-transform:none}
.challenge-calendar header h3::first-letter{text-transform:uppercase}

/* Aviso (toast) acima da barra da pedalada, sem cobrir o botão de voltar à sessão */
body:has(#timerDock:not([hidden])) .toast{bottom:92px}
@media(max-width:560px){body:has(#timerDock:not([hidden])) .toast{bottom:calc(150px + env(safe-area-inset-bottom))}}

/* Calendário do desafio no celular: dias com pelo menos 44x44 (antes 41px) */
@media(max-width:560px){
  .challenge-calendar{padding:14px 8px}
  .challenge-calendar>header{padding:0 6px}
  .calendar-legend{padding:0 6px}
  .calendar-week,.challenge-days{gap:4px}
  .challenge-days button{min-width:44px;min-height:44px}
}

/* Revisão final (integração): alvos de toque de 44px no campo de data e no resumo das refeições */
.date-control{min-height:44px}
.date-control input{min-height:28px}
.meal-row summary{min-height:44px;display:flex;align-items:center;gap:8px}