* { 
    margin:0; 
    padding:0; 
    box-sizing:border-box; 
}
:root {
  font-size:62.5%;
  --bg-color:#fff;
  --bg-header:#d9dadb;
  --primary:#293487;
  --secondary:#4a5fab;
  --edit:#38a05b;
  --delete:#b54746;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* --- modais com animação --- */
.modal {
  position:fixed; top:50%; left:50%;
  transform:translate(-50%, -50%) scale(0.9);
  opacity:0;
  transition:opacity 00.3s ease, transform 0.3s ease;
  z-index:1000;
  background:var(--bg-header);
  border-radius:1.6rem;
  padding:2rem;
  min-width: 350px;
  display: flex;
  flex-direction: column;align-items: center;
  animation: upOnCenter 1.2s ease-in-out forwards;
}

.modal.show {
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}

/* --- resto do estilo (igual ao teu) --- */
.btn{ 
    transition:transform .4s ease-in-out; 
    padding:.8rem; 
    color:var(--bg-color); 
    border-radius:.8rem; 
    outline:none; 
    border:none; 
    cursor:pointer; 
}
.btn:hover{ transform:scale(1.1); }

body{ 
    width:100%; 
    height:100vh; 
    background:var(--bg-color); 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    overflow: hidden;
}

.container{ 
    width:100%; 
    height:100%; 
    /* padding:1.5rem;  */
    display:flex; 
    flex-direction:column; 
}
.container .header{ 
    width:100%; 
    background:var(--bg-header); 
    display:flex; 
    justify-content:space-between; 
    padding:1.5rem; 
    margin-bottom:1rem; 
}
.container .header #title-primary{ 
    color:var(--primary); 
    cursor:pointer; 
    letter-spacing:.3rem; 
    border-bottom:.1rem 
    solid var(--secondary); 
}
#new-task{ 
    background:var(--secondary); 
    padding:.8rem; 
}

/* main */
.container .main{ 
    width:100%; 
    padding:1rem; 
    display:flex; 
    flex-direction:column; 
    gap:2rem; 
}
.container .controls-Tasks{ 
    display:flex; 
    width:50%; 
    font-size:1.5rem; 
    gap:1rem; 
    margin-left:2rem; 
}
.container .controls-Tasks .item-control-task{ 
    min-width:80px; 
    text-align:center; 
    color:var(--bg-color); 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    gap:1rem; 
}
.container .controls-Tasks .item-control-task .option-page{ 
    /* display: inline-block;  */
    min-width:80px; 
    border-radius:2rem; 
    background:var(--secondary); 
    padding:.5rem .8rem;
}
.container .controls-Tasks .item-control-task h2{ 
    font-weight:600; 
    border-radius:50%; 
    background:#4a5fab; 
    width:3rem; 
    height:3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.active{ background:var(--primary); }

.tasks-container-main{ 
    display:flex; 
    height: 500px !important;
    flex-direction:column; 
    gap:1rem; 
    max-height:60vh; 
    overflow-y:auto; 
}
/* tarefas */
.container .main .tasks-container .task{
  min-width:360px;
  max-width:760px;
  padding:1rem; 
  display:flex;
  justify-content:space-between;
  align-items:center; 
  font-size:1.5rem; 
  border-bottom:.1rem 
  solid var(--primary);
    overflow-y: auto;

  
}

/* switch – mantido */
.state-task { display:none; }
.switch { 
    position:relative; 
    display:inline-block; 
    width:4.4rem; 
    height:2.4rem; 
    background:#ddd; 
    border-radius:1.2rem; 
    cursor:pointer; 
    transition:background 0.3s; 
}
.switch::after { 
    content:""; 
    position:absolute; 
    width:2rem; 
    height:2rem; 
    background:var(--primary); 
    border-radius:50%; 
    top:.2rem; 
    left:.2rem; 
    transition:transform 00.3s; 
}
.state-task:checked + .switch { 
    background:var(--primary); 
}
.state-task:checked + .switch::after {
    transform:translateX(2rem); 
    background:var(--bg-color); 
}
.state-task:checked ~ .title-task { 
    text-decoration:line-through; 
    color:#888; 
}

/* controles da tarefa */
.container .main .tasks-container .task .control-task{ 
    display:flex; 
    width:40%; 
    gap:1.5rem; 
    color:var(--bg-color); 
}
.container .main .tasks-container .task .control-task button{ 
    width:60%; 
    padding:.5rem; 
    border-radius:.8rem; 
    border:none; 
    color:var(--bg-color); 
    cursor:pointer; 
}
.edit-btn{
    background:var(--edit);
}
.delete-btn{
    background:var(--delete);
}
.detail-btn{
    background:var(--secondary);
}

/* footer */
.container .footer{ 
    position:fixed; 
    bottom:0; 
    text-align:center; 
    width:100%; 
    margin-bottom:.5rem; 
}
.container .footer span{ 
    color:var(--primary); 
}

/* modais */
.form-new-task .input-area,
.form-edit-task .input-area{ 
    width:80%; 
    display:flex; 
    flex-direction:column; 
    gap:2rem; 
}
.form-new-task input[type="text"],
.form-edit-task input[type="text"],
.form-new-task textarea,
.form-edit-task textarea{ 
    padding:.8rem; 
    width:80%; 
    margin:auto; 
    border-radius:.8rem; 
    border:none; 
    outline:none; 
}
.form-new-task h1,
.form-edit-task h1{ 
    color:var(--primary); 
    margin:2rem; 
}
.form-new-task input[type="submit"],
.form-edit-task input[type="submit"]{ 
    width:40%; 
    margin:auto; 
    padding:1rem; 
    border-radius:.8rem; 
    border:none; 
    font-size:1.6rem; 
    font-weight:600; 
    background:var(--primary); 
    color:var(--bg-color); 
    cursor:pointer; 
}
.cancel-btn{ 
    width:32%; 
    margin:1rem auto; 
    padding:1rem; 
    border-radius:.8rem; 
    border:none; 
    font-size:1.6rem; 
    font-weight:600; 
    background:var(--delete); 
    color:var(--bg-color); 
    cursor:pointer; 
}

.modal-delete{ 
    display:flex; 
    flex-direction:column; 
    justify-content:center; 
    align-items:center; 
    gap:2rem; 
}
.modal-delete h1{ 
    color:var(--primary);
}
.modal-delete .btns{ 
    width:40%; 
    display:flex; 
    gap:1rem; 
    justify-content:space-between; 
}
.modal-delete button:nth-child(1){ 
    background:var(--delete); 
    width:80%; 
}
.modal-delete button:nth-child(2){ 
    background:var(--primary); 
    width:80%; 
}

.close-modal{ display:none; }