/* ====== BODY ====== */
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #3d3d3d;
      margin: 0;
      padding-top: 70px; /* espaço para nav bar */
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      scrollbar-gutter: stable;
    }

    /* ====== NAVBAR ====== */
    .navbar {
      width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #59595a;
      position: fixed;
      top: 0;
      color: blue;
      z-index: 999;
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

    .navbar-title{
      width: 70px; 
      height: 70px;
      justify-content: center;
      align-items: center;
    }

    .nav-butons {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      gap: 10px;
      margin-left: 25vw;
  }

    .nav-butons .btn{
      padding: 10px;
      border-radius: 10px;
      text-align: center;
      transition: 0.3s;
      background-color: #888888;
      border: 1px solid #cbd5e1;
    }

    .nav-butons .btn:hover{
      background-color: #10b981;
      transform: translateY(-2px);
      box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }

    .nav-butons .btn > a{
      text-decoration: none;
      color: white;
      cursor: pointer;
    }

    .user{
      width: auto;
      height: 50px;
      padding: 10px;
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: center;
      color: white;
    }

    .user:hover img, .user:focus img{
      border-color: #3b82f6;
      box-shadow: 0 0 5px rgba(59,130,246,0.3);
    }

    .user img{
      border: 1px solid;
      border-color: transparent;
      width: 50px;
      height: 50px;
      border-radius: 100%;
    }

    /* ====== WRAPPER ====== */
    .wrapper {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;       /* --> deixa empilhável no celular */
      justify-content: center;
      width: 100%;
      overflow-x: auto;       /* scroll lateral */
      overflow-y: hidden; 
    }

    /* ====== CONTAINER PRINCIPAL ====== */
    .container {
      background: #ffffff;
      padding: 30px;
      margin: 20px 0;
      border-radius: 15px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      width: 380px;
      min-height: 300px;
      animation: fadeInUp 0.4s ease forwards;
      order: 2;
    }

    .horas-container { 
      order: 1; 
    }

    .calculadora { 
      order: 3; 
    }

    .pessoas {
      order: 4;
    }

    .hidden { 
      display: none;
    }

    /* ====== RESPONSIVIDADE ====== */
    @media (max-width: 900px) {
      body {
        overflow-y: auto;
      }

      .container {
        width: 90%;
      }

      .weapper {
        display: flex;
        flex-wrap: wrap;
      }
    }

    @media (max-width: 500px) {
      body {
        overflow-y: auto;
      }

      .weapper {
        display: flex;
        flex-wrap: wrap;
      }

      .container {
        width: 95%;
        padding: 20px;
      }

      .navbar {
        padding-left: 10px;
      }

      .nav-title {
        font-size: 18px;
      }
    }

    /* ====== SCROLL AREA ====== */
    .scroll-area { 
      max-height: 300px; /* ajuste a altura visível */ 
      overflow-y: auto; /* ativa scroll vertical */ 
      padding-right: 5px; 
      margin-bottom: 15px; 
      margin-top: 15px;
    }

    .scroll-area::-webkit-scrollbar {
      width: 4px;
    }

    .scroll-area::-webkit-scrollbar-thumb {
      background: #94a3b8;
      border-radius: 10px;
    }

    /* ====== TEXTOS E TÍTULOS ====== */
    h2 {
      text-align: center;
      color: #1e3a8a;
      margin-bottom: 25px;
    }

    label {
      font-weight: 600;
      color: #1f2937;
      display: block;
      margin-top: 15px;
      margin-bottom: 5px;
    }

    /* ====== INPUTS ====== */
    input, select { 
      width: 100%; 
      padding: 10px; 
      border-radius: 8px; 
      border: 1px solid #cbd5e1; 
      box-sizing: border-box; 
      font-size: 14px; 
      outline: none; 
      transition: 0.3s; 
    }

    .dias-grid .text { 
      width: 100%; 
      background-color: transparent; 
      border: none; 
    } 
    
    .dias-grid .text::-webkit-input-placeholder { 
      color: green; 
    }
    
    #resultadoHoras { 
      width: 100%; 
      font-size: 15px; 
      background-color: transparent; 
      border: none; 
    }

    input:focus, select:focus {
      border-color: #3b82f6;
      box-shadow: 0 0 5px rgba(59,130,246,0.3);
    }

    /* ====== BOTÕES ====== */
    .btn-group {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      gap: 10px;
    }

    button {
      flex: 1;
      padding: 12px;
      border: none;
      border-radius: 10px;
      font-weight: bold;
      cursor: pointer;
      color: white;
      transition: 0.3s;
      font-size: 14px;
    }

    button:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }

    .btn-cadastrar { background: #3b82f6; }
    .btn-alterar { background: #f59e0b; }
    .btn-remover { background: #ef4444; }
    .btn-somar { background: #3b82f6; }
    .btn-clear { background: #f59e0b; }

    /* ====== BOTÃO DE BUSCA ====== */
    .search-group {
      display: flex;
      gap: 10px;
      margin-top: 15px;
    }

    .search-group button {
      flex: 0 0 100px;
      background: #10b981;
    }

    .search-group button:hover {
      background: #059669;
    }

    /* ====== GRID DOS DIAS ====== */
    .dias-grid {
      margin-top: 20px;
      margin-bottom: 20px;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .dias-grid input {
      text-align: center;
    }

    /* ====== ANIMAÇÃO ====== */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(15px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }