/* ===== Página Pomodoro ===== */

:root{
  /* ajuste a altura do header se precisar */
  --header-h: 72px;
}

/* Plano de fundo SEM corte */
body{
  background-image: url("../img/FundoPomodoro.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: contain;      /* mostra a imagem inteira */
  background-color: #E9F2FD;     /* cor de preenchimento nas bordas */
  min-height: 100svh;
}

/* Container principal */
.container{
  max-width: 600px;
  /* deixa espaço para o header fixo e centraliza verticalmente sem estourar o footer */
  margin: clamp(1rem, 2vw, 2rem) auto 3rem;
  padding: 2rem;
  background-color: rgba(255,255,255,0.9);
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  text-align: center;

  /* empurra para baixo caso o header seja fixo */
  transform: translateY(calc(var(--header-h) / 2));
}

/* Título */
.container h1{
  color:#8B5E3C;
  margin-bottom:1rem;
  font-size:2rem;
}

/* Card do Pomodoro */
.card{
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:center;
}

.card label{
  font-weight:500;
  color:#333;
}

.card input{
  width:60px;
  padding:4px;
  margin-left:6px;
  border-radius:6px;
  border:1px solid #ccc;
  text-align:center;
}

/* Timer */
#p-timer{
  font-size:2.5rem;
  color:#D29B32;
  letter-spacing:2px;
}

/* Botões */
.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.actions button{
  background:#D29B32;
  border:none;
  padding:.6rem 1.2rem;
  border-radius:10px;
  font-weight:bold;
  color:#fff;
  transition:.3s;
}
.actions button:hover{ background:#b8862f; }

/* Responsivo */
@media (max-width: 600px){
  .container{
    margin: 1.5rem 1rem 2rem;
    padding: 1rem;
    transform: translateY(calc(var(--header-h) / 3));
  }
  #p-timer{ font-size:2rem; }
}

/* Se quiser que em telas MUITO largas a imagem preencha,
   remova este bloco; ele tenta evitar cortes em celulares. */
@media (min-aspect-ratio: 16/9){
  body{ background-size: cover; } /* opcional */
}