@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

body {
  margin: 0;
  font-family: 'Noto Sans', sans-serif;
}

body * {
  box-sizing: border-box;
}

.main-login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left-login {
  width: 50vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.left-login > h1 {
  color: #c077ff;
  font-size: 2.5vw;
}

.left-login-image {
  width: 35vw;
}

.center-login {
  width: 50vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-login {
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 30px 35px;
  background: #2f2841;
  border-radius: 20px;
  box-shadow: 0px 10px 40px #00000056;
}

.card-login > h1 {
  color: #673AB7;
  font-weight: 800;
  margin: 0;
}

.textfield {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 10px 0px;
}

.textfield > input {
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 15px;
  background: #514869;
  color: #f0ffffde;
  font-size: 12pt;
  box-shadow: 0px 10px 40px #00000056;
  outline: none;
  box-sizing: border-box;
}

.textfield > label {
  color: #f0ffffde;
  margin-bottom: 10px;
}

.textfield > input::placeholder {
  color: #f0ffff94;
}

.btn-login {
  width: 100%;
  padding: 16px 0;
  margin: 25px;
  border: none;
  border-radius: 8px;
  outline: none;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 3px;
  color: #2b134b;
  background: #673AB7;
  cursor: pointer;
  box-shadow: 0px 10px 40px -12px #d400ff52;
}

@media only screen and (max-width: 950px){
  .card-login{
    width: 85%;
  }
}

@media only screen and (max-width: 600px){
  .main-login{
    flex-direction: column;
  }

  .left-login > h1 {
    display: none;
  }

  .left-login {
    width: 100%;
    height: auto;
  }

  .center-login {
    width: 100%;
    height: auto;
  }

  .left-login-image {
    width: 40vh;
  }

  .card-login {
    width: 90%;
  }
}

/*ALERTS*/
.alert-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  max-width: 300px;
}

.alert {
  padding: 20px 30px;
  border-radius: 5px;
  box-shadow: 0 0 15px 5px #ccc;
  position: relative;
  color: #333;
}

.close {
  position: absolute;
  width: 30px;
  height: 30px;
  opacity: 0.5;
  border-width: 1px;
  border-style: solid;
  border-radius: 50%;
  right: 10px;
  top: 10px;
  text-align: center;
  font-size: 1.2em;
  cursor: pointer;
  line-height: 28px;
}

.success-alert {
  background-color: #a8f0c6;
  border-left: 5px solid #2e8b57;
}
.danger-alert {
  background-color: #f7a7a3;
  border-left: 5px solid #cc0000;
}
.warning-alert {
  background-color: #ffd48a;
  border-left: 5px solid #cc9900;
}
.simple-alert {
  background-color: #ebebeb;
  border-left: 5px solid #999;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;500;600&display=swap');

body {
  font-family: 'Poppins', sans-serif;
  display: flex;
  justify-content: center;
  color: #111827;
  flex-direction: column;
}

nav {
  padding: 15px 20px;
  border-radius: 100px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #2f2841;
  border-radius: 20px;
  box-shadow: 0px 10px 40px #00000056;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  justify-content: space-between;
  margin-left: 25px;
}

nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

nav .submenu {
  display: none;
}

.wrap-table {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow-x: auto;
  width: 95%;
  container-type: inline-size;
  container-name: table;
}

.menu-toggle {
  display: none;
  font-size: 28px;
  cursor: pointer;
  color: #fff;
}

/* =========================
   RESPONSIVO
========================= */
@media (max-width: 760px) {
  nav {
    flex-wrap: wrap;
  }

  .menu-toggle {
    display: block;
  }

  .menu {
    display: none;
    flex-direction: column;
    position: relative;
    width: 100%;
    background: #2f2841;
    border-radius: 10px;
    padding: 10px 0 60px 0; /* espaço extra pro botão sair */
    margin-top: 10px;
  }

  .menu.active {
    display: flex;
  }

  .menu li {
    text-align: center;
    padding: 10px 0;
  }

  .menu-sair {
    position: absolute;
    bottom: 10px;
    right: 15px;
    width: 100%;
    text-align: right;
  }

  .logo {
    order: -1; /* sempre no topo */
  }
}


table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

th {
  font-weight: 700;
  color: #374151;
  font-size: 14px;
  padding: 12px 14px;
  text-align: left;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

td {
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}

.user__photo {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 100px;
}

.user__info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user__name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.user__email {
  font-size: 12px;
  color: #4b5563;
}

.user__badge {
  width: max-content;
  background: #dcfce7;
  border-radius: 6px;
  border: 1px solid #15803d;
  color: #15803d;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
}

.user__badge:before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 100px;
  background: #15803d;
  display: block;
}

.user__badge_pending {
  background: #fefce8;
  color: #8a551c;
  border-color: #f4e7c5;
}

.user__badge_pending:before {
  background: #8a551c;
}

.user__badge_unpaid {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fbe0e0;
}

.user__badge_unpaid:before {
  background: #b91c1c;
}

.user__edit {
  display: block;
  padding: 4px 12px;
  text-decoration: none;
}

.user__edit {
  padding: 8px 12px;
  border-radius: 6px;
  background: #6366f1;
  color: #fff;
  text-align: center;
  font-weight: 500;
}

@container table (min-width: 400px) {
    .sticky-col {
     position: sticky;
     left: 0;
  }
  
  .sticky-col-right {
    right: 0;
  }
}

@container table (max-width: 400px) {
  td::before {
      content: attr(data-label);
      font-weight: 700;
      color: #374151;
      font-size: 14px;  
  }
  
  label {
    display: none;
  }
  
  td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: none;
  }
  
  td:first-child {
    background: #f9fafb;
  }
  
  th {
    display: none;
  }
}

#right_panel {
  position:relative;
  margin-top: 15px;
    display: flex;
    justify-content: center;
}

.visualizar {
    color:#6366f1;
}

.editar {
    color: #15803d;
}

.excluir {
    color: #cc0000;
}

.center-cadastro {
  width: 50vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-cadastro {
  width: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 30px 35px;
  background: #e5e7eb;
  border-radius: 20px;
}

.card-cadastro > h2 {
  color: #2f2841;
  font-weight: 800;
  margin: 0;
}

.textfield-cadastro {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 10px 0px 0px 10px;
}

.textfield-cadastro > input {
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 15px;
  background: #fff;
  color: #2f2841;
  font-size: 12pt;
  box-shadow: 0px 10px 40px #00000056;
  outline: none;
  box-sizing: border-box;
}

.textfield-cadastro > textarea {
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 15px;
  background: #fff;
  color: #2f2841;
  font-size: 12pt;
  box-shadow: 0px 10px 40px #00000056;
  outline: none;
  box-sizing: border-box;
}

.textfield-cadastro > label {
  color: #2f2841;
  margin-bottom: 10px;
}

.textfield-cadastro input[type="file"] {
  padding: 10px;
  border: 2px dashed #673AB7;
  border-radius: 8px;
  background-color: #f8f6fc;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
}

.textfield-cadastro input[type="file"]:hover {
  background-color: #ede7f6;
  border-color: #5e35b1;
}

.btn-cadastro{
  background-color: #5e35b1 !important;
  color: #fff !important;
}

.cadastro-pri, .cadastro-linha{
  display: flex;
}

.cadstro-esquerda {
  margin-left: 15px;
}

@media (max-width: 760px) {
  .cadastro-pri,
  .cadastro-linha {
    flex-direction: column;
  }
}

#blocosSelecionados{
  width: 100%;
  padding: 5px;
}
.btnx{
  position: absolute;
  top: 5px;
  right: 5px;
  margin: 5px;
  border: none;
  background-color: #5e35b1 !important;
  color: #fff !important;
  border-radius: 20px;
}