@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
:root {
  --white: #fffffe;
  --teal: #018185;
  --teal-dark: #01686b;
  --orange: #f96705;
  --orange-dark: #d95000;
  --gray: #ececec;
  --gray-border: #cccccc;
  --gray-light: #f5f7fa;
  --shadow: 0 2px 12px 0 #0001;
  --cell-padding-x: 14px;        /* Padding horizontal padrão das células */
  --checkbox-col-width: 30px;    /* Largura da coluna de checkboxes */
  --checkbox-total-width: calc(
    var(--checkbox-col-width) + 2 * var(--cell-padding-x)
  );
  --campo-padding: 7px 10px;
  --campo-border: 1px solid var(--gray-border);
  --campo-radius: 6px;
  --campo-height: 32px;
  --campo-font: 1rem;
  --campo-modal-height: 38px;
}

/* Campos padrão */
.campo-input,
.campo-select,
.filtro-campo,
.rows-per-page {
  padding: var(--campo-padding);
  border: var(--campo-border);
  border-radius: var(--campo-radius);
  height: var(--campo-height);
  font-size: var(--campo-font);
  background: var(--white);
  box-sizing: border-box;
}

/* Campos dentro de modais */
.modal .campo-input,
.modal .campo-select {
  height: var(--campo-modal-height);
}

/* Campo específico: seletor de linhas */
.select-linhas {
  width: 60px;
  padding-right: 30px;
}

/* Campo específico: input de foto */
.campo-foto {
  /* estilos individuais podem ser definidos aqui */
}

body {
  background: var(--white);
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #222;
  margin: 0;
  padding: 0;
}

.menu-lateral {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    background: var(--teal-dark);
    color: var(--white);
    box-shadow: var(--shadow);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-right: 2px solid #f96705;
    overflow-x: visible;
    overflow-y: visible;
    transition: width .25s ease;
}


.menu-lateral .logo {
  display: flex;
  align-items: center;
  justify-content: center;   /* <-- Esta linha centraliza */
  width: 100%;
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--orange);
  padding-bottom: 12px;
  padding-top: 17px;
}

.menu-lateral .logo img {
  height: 36px;
}

.divider-logo-nav {
  width: 85%;
  margin: 0 auto 10px auto;
  height: 3px;
  background: linear-gradient(90deg, #01818522 0%, #fff8 50%, #01818522 100%);
  border-radius: 2px;
  box-shadow: 0 1px 6px #0001;
}

.menu-lateral nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  margin-top: 14px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.menu-lateral nav a {
  display: flex;
  align-items: center;
  width: 100%;
  color: #fff;
  text-decoration: none;
  padding: 10px 24px;
  border-radius: 22px 0 0 22px;
  font-size: 1.16rem;
  transition: background 0.16s, color 0.18s, box-shadow 0.16s, font-weight 0.2s;
  margin: 0;                /* zera margem lateral */
  box-sizing: border-box;   /* <-- ESSENCIAL para padding funcionar bem */
  font-family: 'Righteous', sans-serif;
  font-weight: normal;
  box-shadow: none;
  position: relative;
  justify-content: flex-start;
}
.menu-lateral nav a .label {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  max-width: 160px;
  opacity: 1;
  transition: max-width .25s ease, opacity .25s ease;
}

.menu-lateral nav a.active{
  background: #f96705;
  color: #fff;
  font-weight: normal;
  box-shadow: 0 3px 12px #0002;
}
.menu-lateral nav a:hover {
  background: var(--teal);
  color: #fff;
  font-weight: normal;
  box-shadow: 0 3px 12px #0002;
}

/* Submenus */
.menu-lateral nav .menu-item {
  position: relative;
}

.menu-lateral nav .submenu-toggle {
  position: absolute;
  right: 12px;
  top: 15px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.menu-lateral nav .submenu-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
  transform-origin: center;
  transform: rotate(180deg);
}

.menu-lateral nav .submenu-toggle.open svg {
  transform: rotate(90deg);
}

.menu-lateral nav .submenu {
  display: none;
  flex-direction: column;
  margin-left: 40px;
}

.menu-lateral nav .submenu.open {
  display: flex;
}

.menu-lateral nav .submenu a {
  padding: 6px 16px;
  font-size: 1rem;
}

.menu-lateral nav .submenu a.active {
  background: var(--teal-dark);
  color: #fff;
}

.menu-lateral.collapsed nav .submenu,
.menu-collapsed .menu-lateral nav .submenu {
  display: none;
}

/* Esconde setas do submenu quando o menu está colapsado */
.menu-lateral.collapsed nav .submenu-toggle,
.menu-collapsed .menu-lateral nav .submenu-toggle {
  display: none;
}

/* Evita que submenus abertos apareçam durante a animação de expansão */
.menu-lateral.expanding nav .submenu {
  display: none !important;
}

/* Sinal lateral: uma "barra" vertical suave para o ativo */
.menu-lateral nav a.active::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 6px;
  border-radius: 4px;
  background: #fff;
  opacity: 0.88;
}

/* Remove underline se houver */
.menu-lateral nav a,
.menu-lateral nav a:active,
.menu-lateral nav a:focus,
.menu-lateral nav a:hover {
  text-decoration: none !important;
  outline: none;
}

/* Botão para colapsar o menu */
.menu-toggle {
    position: absolute;
    top: 28px;
    right: -14px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px #0003;
    z-index: 60;
}
.menu-toggle svg {
    padding-left: 2px;
    position: fixed;
    width: 13px;
    height: 13px;
    color: var(--orange);
    transform: rotate(180deg);
}
.menu-lateral.collapsed .menu-toggle svg,
.menu-collapsed .menu-lateral .menu-toggle svg {
  transform: rotate(0deg);
}

/* Estilo do menu colapsado */
.menu-lateral.collapsed,
.menu-collapsed .menu-lateral {
  width: 60px;
  align-items: center;
}

.menu-lateral.collapsed .logo-link img,
.menu-collapsed .menu-lateral .logo-link img {
  height: 50px !important;
  margin-top: 10px;
  margin-bottom: 10px;
}
.menu-lateral.collapsed nav a,
.menu-collapsed .menu-lateral nav a {
  padding: 10px;
  text-align: center;
  justify-content: center;
  border-radius: 12px 0px 0px 12px;
}
.menu-lateral.collapsed nav a .label,
.menu-collapsed .menu-lateral nav a .label {
  max-width: 0;
  opacity: 0;
  visibility: hidden;
}
.menu-lateral nav a .icon {
  margin-right: 8px;
  width: 20px;
  height: 20px;
}
.menu-lateral.collapsed nav a .icon,
.menu-collapsed .menu-lateral nav a .icon {
  margin-right: 0;
}

.main-content.collapsed,
.menu-collapsed .main-content {
  margin-left: 61px;
}

.main-content {
  margin-left: 261px;
  padding: 0;
  min-height: 100vh;
  background: var(--white);
  transition: margin-left .25s ease;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--teal-dark);
  color: var(--white);
  padding: 0px 0px 0px 20px;
  font-size: 1.5rem;
  box-shadow: var(--shadow);
  letter-spacing: 1px;
  margin-bottom: 25px;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 40;

}

.header-title {
  font-family: 'Righteous', sans-serif;
  font-size: 1.5rem;
  color: var(--white);
  letter-spacing: -1px;
}

.user-dropdown {
  position: relative;
  margin-right: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.user-dropdown img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.user-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  right: 50px;
  top: 39px;
  background: var(--white);
  color: var(--teal-dark);
  z-index: 100;
}

.user-dropdown.open .dropdown-menu {
  display: block;
}

.user-dropdown .dropdown-menu button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row-reverse;
  gap: 6px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--teal-dark);
  font-family: 'Righteous', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 0;
  text-align: right;
}

.user-dropdown .dropdown-menu button:hover {
  background: var(--teal-dark);
  color: var(--white);  
}

.alertas-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--teal-dark);
  font-family: 'Righteous', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 0;
  transition: background 0.2s;
  justify-content: flex-end;
  text-align: right;
}

.alertas-btn .dropdown-icon {
  order: 3;
}

.alertas-btn .receber-alertas-checkbox {
  order: 2;
}

.alertas-btn input[type="checkbox"] {
  margin: 0;
}

.user-dropdown .dropdown-menu .receber-alertas-checkbox {
  accent-color: var(--teal-dark);
  border: 2px solid var(--white);
  background: var(--teal-dark);
}

.alertas-btn:hover,
.alertas-btn:focus {
  background: var(--teal-dark);
  color: var(--white);
}


.dropdown-icon {
  width: 16px;
  height: 16px;
}

.logout-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  color: #fff;
  font-family: 'Righteous', sans-serif;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 5px 12px 5px 10px;
  border-radius: 16px;
  transition: background 0.2s;
  box-shadow: none;
}

.logout-btn:hover,
.logout-btn:focus {
  background: #fff2;
}

.user-dropdown .dropdown-menu .logout-btn {
  color: var(--teal-dark);
}

.logout-text {
  color: #fff;
  font-family: 'Righteous', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 1px;
  user-select: none;
}

.user-dropdown {
  position: relative;
}

.user-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  color: #fff;
  font-family: 'Righteous', sans-serif;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 16px;
}

.user-arrow {
  transition: transform 0.2s;
  margin-left: 4px;
  width: 20px;
  height: 20px;
  transform: rotate(90deg);
}

.user-dropdown.open .user-arrow {
  transform: rotate(0deg);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  background: var(--white);
  color: var(--teal-dark);
  min-width: 120px;
  z-index: 50;
}

.user-dropdown.open .dropdown-menu {
  display: block;
  width: 190px;
  background: var(--white);
  border: 1px solid var(--teal-dark);
  border-radius: 6px 0px 6px 6px;
}

.sub-aba {
  display: flex;
  gap: 20px;
  padding: 5px 36px 5px 20px;
  margin-top: -20px;
  margin-bottom: 25px;
  border-bottom: 1px solid var(--gray-border);
}

.sub-aba a {
  background: var(--gray-light);
  color: var(--teal-dark);
  text-decoration: none;
  border-radius: 8px 8px 0 0;
  padding: 7px 16px;
  font-weight: normal;
  font-family: 'Righteous', sans-serif;
  font-size: 0.92rem;
  box-shadow: none;
  border: none;
  transition: background .18s, color .18s;
}

.sub-aba a.principal {
  padding: 10px 24px;
  font-size: 1.09rem;
  margin-right: 8px;
}

.sub-aba a.active, .sub-aba a:hover {
  background: var(--orange);
  color: var(--white);
}

.menu-superior {
  display: flex;
  gap: 5px;
  margin-top: -20px;
  margin-bottom: 10px;
}

.menu-superior a {
  background: var(--orange);
  color: var(--white);
  text-decoration: none;
  border-radius: 6px 6px 0 0;
  padding: 10px 24px;
  font-weight: normal;
  font-family: 'Righteous', sans-serif;
  font-size: 1.09rem;
  box-shadow: none;
  border: none;
  transition: background .18s, color .18s;
}

.menu-superior a.active, .menu-superior a {
  background: var(--orange);
  color: var(--white);
}

.menu-superior a:hover{
  background: var(--orange-dark);
  color: var(--white);
}

/* reduce size for secondary tabs inside sub-aba menus */
.menu-superior.sub-aba a:not(.principal) {
  background: var(--gray-light);
  color: var(--teal-dark);
  padding: 7px 16px;
  font-size: 0.92rem;
  height: 15px;
  margin-top: 12px;
}

.menu-superior.sub-aba a:not(.principal):hover {
  padding: 7px 16px;
  font-size: 0.92rem;
  height: 15px;
  margin-top: 12px;
  background: var(--teal-dark);
  color: var(--white);
}

.menu-superior.sub-aba a:not(.principal).active {
  padding: 7px 16px;
  font-size: 0.92rem;
  height: 15px;
  margin-top: 12px;
  background: var(--teal-dark);
  color: var(--white);
}

h1, h2 {
  margin-left: 32px;
  margin-bottom: 10px;
  color: var(--teal-dark);
  margin-top: 0;
  font-family: 'Righteous', sans-serif;
  font-weight: normal;
}

form {
  background: var(--gray-light);
  padding: 10px 10px 10px 10px;
  margin: 10px 20px 12px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  align-items: flex-end;
  border: 1px solid var(--teal);
}

form label {
  font-weight: 500;
  color: var(--teal-dark);
  margin-bottom: 2px;
  display: block;
}

form select {
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid var(--gray-border);
  background: var(--white);
  margin-bottom: 2px;
  transition: border .2s;
  color: black;
}

form input {
  height: 20px;
  margin: 0;
  padding: 7px 5px 5px 5px;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid var(--gray-border);
  background: var(--white);
  transition: border .2s;
  color: black;
}
form input:focus, form select:focus, .table-controls select:focus {
  outline: none;
  border: 1.5px solid var(--orange);
}

form input.invalid,
form select.invalid,
form textarea.invalid,
.table-controls select.invalid {
  border: 1.5px solid var(--orange);
}

form button, .button {
  background: var(--orange);
  color: var(--white);
  height: 32px;
  min-width: 0;
  font-size: 1em;
  font-family: 'Righteous', sans-serif;
  padding: 0 13px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 7px #0002;
  margin-left: 0;
  border: none;
  margin-right: 10px;
  cursor: pointer;
  transition: background .2s, transform .1s;
}
form button:hover, .button:hover {
  background: var(--orange-dark);
  transform: translateY(-2px) scale(1.04);
}

/* Botões específicos de Movimentações */

.form-botoes-movimentacoes {
  gap: 10px;
  border: none;
  background-color: transparent;
  box-shadow: none;
}

.mov-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 0;
}

.mov-btn-icon {
  display: inline-flex;
}

.mov-btn-icon .icon {
  width: 24px;
  height: 24px;
}

/* Estilos individuais */
.mov-btn-entrada {
  background-color: #00a65a;
  padding: 5px 7px 5px 5px;
}
.mov-btn-baixa {
  background-color: #e4372c;
  padding: 5px 7px 5px 5px;
}
.mov-btn-transferencia {
  padding: 5px 7px 5px 5px;
}
.mov-btn-ajuste {
  background-color: var(--teal);
  padding: 5px 7px 5px 5px;
}

.mov-btn-entrada:hover {
  background-color: #008f4d;
}

.mov-btn-baixa:hover {
  background-color: #c32d24;
}

.mov-btn-ajuste:hover {
  background-color: var(--teal-dark);
  padding: 5px 7px 5px 5px;
}

.button.secondary {
  background: var(--teal);
  margin-left: 0;
  text-decoration: none;
}
.button.secondary:hover {
  background: var(--teal-dark);
  color: var(--white);
}

/* NOVO: Botões de ação na tabela, inclusive "Apagar" e "Editar" */
.button-action, .acoes a, .acoes button {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--teal-dark);
  border-radius: 7px;
  padding: 4px 10px;
  border: none;
  font-size: .98rem;
  font-weight: 500;
  transition: background .2s;
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 0;
  margin-top: 0;
  box-shadow: none;
  outline: none;
  vertical-align: middle;
  font-family: Righteous;
}

.button-action .icon, .acoes button .icon, .acoes a .icon, .button-action-alerta .icon {
  width: 20px;
  height: 20px;
}

.button-action-alerta {
  display: inline-block;
  background: var(--teal);
  color: var(--white);
  border-radius: 7px;
  padding: 6px 14px;
  border: none;
  font-size: .98rem;
  font-weight: 500;
  transition: background .2s;
  cursor: pointer;
  text-decoration: none;
  margin-right: 8px;
  margin-bottom: 0;
  margin-top: 0;
  box-shadow: none;
  outline: none;
  vertical-align: middle;
}

.button-action-alerta:hover {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  border-radius: 7px;
  padding: 6px 14px;
  border: none;
  font-size: .98rem;
  font-weight: 500;
  transition: background .2s;
  cursor: pointer;
  text-decoration: none;
  margin-right: 8px;
  margin-bottom: 0;
  margin-top: 0;
  box-shadow: none;
  outline: none;
  vertical-align: middle;
}

.button-action.close-colunas {
  background: var(--teal);
  color: var(--white);
  padding: 6px 14px;
}

.button-action.close-colunas:hover {
  background: var(--teal-dark);
  color: var(--white);
}

.button-action.delete, .acoes button.delete {
  background: transparent;
  color: black; !important;
  font-weight: normal;
  padding: 4px 8px;
  margin-right: 0;
}
.button-action.delete:hover, .acoes button.delete:hover {
  background: transparent;
  color: #e4372c !important;
}

.acoes a:hover, .acoes button:hover, .button-action:hover {
  color: var(--orange);
}

/* Tabelas */
.tabela-wrapper {
  margin: 20px 20px 32px 20px;
  width: 100%
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--teal);
  display: flex;
}
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--white);
  box-shadow: var(--shadow);
  /* Permite que a primeira coluna com checkbox permaneça visível
     ao arrastar horizontalmente a tabela */
  overflow: visible;
  font-size: 1.05rem;
}

.tabela-wrapper table {
  width: max-content;
}

.tabela-listagem {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
}

.tabela-wrapper tbody {
  cursor: grab;
}

.tabela-wrapper.dragging tbody {
  cursor: grabbing;
}

.tabela-wrapper.dragging,
.tabela-wrapper.dragging * {
  user-select: none;
}

.no-select,
.no-select * {
  user-select: none !important;
}

th, td {
  border-bottom: 1px solid var(--teal);
  padding: 10px var(--cell-padding-x);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
th {
  background: var(--gray);
  color: var(--teal-dark);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: left;
}
td {
  text-align: left;
  height: 20px;
}

th.select-col, td.select-col {
    width: var(--checkbox-col-width);
    min-width: var(--checkbox-col-width);
    max-width: var(--checkbox-col-width);
    text-align: center;
    position: sticky !important;
    left: 0;
    z-index: 5;
    padding: 5px;
}

th.select-col {
  background: var(--teal-dark);
  border-bottom: 1px solid var(--teal);
}

td.select-col {
  background: transparent;
  background-color: inherit !important;
}

/* A cor de fundo das linhas pares é herdada do <tr> */
tr:nth-child(even) td.select-col {
  background: transparent;
}

/* ---- Colunas redimensionáveis ---- */
.tabela-listagem th {
  position: relative;
}

.tabela-listagem th .th-sort-link {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
}

.tabela-listagem th .th-sort-link::after {
  margin-top: 2px;
  content: '▲\A▼';
  margin-left: 4px;
  font-size: 0.50em;
  display: inline-block;
  line-height: 1;
  white-space: pre;
  vertical-align: middle;
}

.tabela-listagem th.sort-asc .th-sort-link::after {
  content: '▲';
}

.tabela-listagem th.sort-desc .th-sort-link::after {
  content: '▼';
}

.tabela-listagem th:not(:first-child):not(.no-resize) {
  border-right: 1px solid var(--teal);
  border-bottom: 1px solid var(--teal);
  background: var(--teal-dark);
  color: var(--white);
}

th[data-col="0"], td[data-col="0"] {
    width: 150px;
    position: sticky;
    left: 30px;
    z-index: 4;
    border-right: 1px solid var(--teal);
    box-shadow: var(--shadow);
}

th[data-col="0"] {
  background: var(--gray);
}

td[data-col="0"] {
  background: transparent;
  background-color: inherit !important;
}

/* Herda a cor de fundo definida no <tr> */
tr:nth-child(even) td[data-col="0"] {
  background: transparent;
}
tr:nth-child(odd) td[data-col="0"] {
  background: var(--white);
}

th[data-col="0"]:first-child,
td[data-col="0"]:first-child {
  left: 0;
}

.tabela-listagem .col-moving {
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.tabela-listagem .col-placeholder {
  transition: transform 0.2s ease;
}


.row-checkbox, .select-all {
  cursor: pointer;
}

.tabela-wrapper .row-checkbox,
.tabela-wrapper .select-all {
  transform: scale(1.2);
}

.select-all {
  accent-color: var(--white) !important;
}

.tabela-left th[data-col="0"] .column-resizer-left {
  display: none;
}

.column-resizer {
  position: absolute;
  top: 0;
  bottom: -1px;
  width: 5px;
  cursor: col-resize;
  user-select: none;
  background: transparent;
}

.column-resizer-right {
  right: -2px;
}

.column-resizer-left {
  left: -2px;
}

th:hover .column-resizer {
  background: rgba(0, 0, 0, 0.3);
}

tr.row-selected {
  /* Destaque em laranja suave para linhas selecionadas */
  background: #ffcfab !important;
}

tr.row-selected td.select-col,
tr.row-selected td[data-col="0"] {
  /* Aplica o destaque também às primeiras colunas */
  background: #fcebe1;
}

/* --- INÍCIO DO NOVO BLOCO --- */
th a,
th a:visited,
th a:active,
th a:hover,
th a:focus {
  color: var(--teal-dark) !important;
  text-decoration: none !important;
  font-weight: 600;
  transition: color .15s;
  cursor: pointer;
}
/* --- FIM DO NOVO BLOCO --- */
tr:nth-child(even) {
  background: var(--gray-light);
}
tr:nth-child(odd) {
  background: var(--white);
}
tr:last-child td {
  border-bottom: none;
}

th.acoes {
  width: 100%;
  background: var(--teal-dark);
  border-bottom: 1px solid var(--teal);
  color: var(--white);
}

td.acoes {
  padding: 11px var(--cell-padding-x);
  white-space: nowrap;
  vertical-align: middle;
  display: flex;
  align-items: center;
}

td.acoes:has(button, a) {
  padding: 11px var(--cell-padding-x);
}
.acoes form { 
  display: inline;
  margin: 0;
  padding: 0;
}
.acoes button, .acoes a {
  margin-bottom: 0;
  margin-top: 0;
  vertical-align: middle;
  font-family: 'Righteous', sans-serif;
  font-weight: normal;
}
/* Remove style antigo do [style*="color:red"] */
.acoes button[style*="color:red"] {
  background: #fff0ef;
  color: #e4372c !important;
  border: 1px solid #fbb;
  font-weight: 600;
  padding: 4px 8px;
  margin-right: 0;
}
.acoes button[style*="color:red"]:hover {
  background: #e4372c;
  color: #fff !important;
}

/* Destaque para linhas vencidas e quase vencendo */
tr[style*="background: #f8d7da;"] {
  background: #ffe6e4 !important;
}
tr[style*="background: #fff3cd;"] {
  background: #fffbe6 !important;
}

td.acoes form,
.acoes form {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline !important;
}


.filtros-bloco {
  padding: 22px 18px;
}

.filtros-titulo {
  font-size: 1.20rem;
  font-weight: 700;
  color: var(--teal-dark);
  margin-bottom: 12px;
  margin-top: 0;
  font-weight: normal;
}

.form-filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  font-size: 0.97em;
}

.filtro-campo {
  margin: 0;
  padding: 5px 5px 5px 5px;
  font-size: 0.97em;
  min-width: 95px;
  max-width: 150px;
}

  .filtro-campo.curto {
    width: 55px;
    min-width: 40px;
    max-width: 65px;
  }

  .quantidade-wrapper,
  .preco-wrapper ,
  .peso-volume-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .quantidade-wrapper .quantidade-campo,
  .preco-wrapper .preco-campo {
    flex: 1;
  }
  .quantidade-wrapper .unidade-medida-campo,
  .preco-wrapper .unidade-preco-campo {
    flex: 0;
  }
  .unidade-medida-select,
  .unidade-preco-select {
  }
  .quantidade-wrapper .quantidade-campo input {
    margin: 0;
  }

  .input-quantidade-produtos {
    width: 80px;
    padding: 7px 5px 5px 5px;
  }

  .preco-wrapper input {
    margin: 0;
  }

  .input-preco-produtos {
    width: 80px;
    padding: 7px 5px 5px 5px;
  }
  .preco-wrapper select:not(.metade) {
    width: 100%;
  }
  .linha-conector {
    flex: 0 0 16px;
    border-bottom: 1px solid var(--gray-border);
    margin-top: 22px;
    margin-right: -10px;
    margin-left: -10px;
  }

  .filtro-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.filtro-label {
  color: #444;
  font-size: 0.97em;
  font-weight: 500;
  margin-right: 2px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  min-width: unset;
}

.filtro-ate {
  font-size: 0.96em;
  margin: 0 2px;
  color: #888;
}

.button-filtrar {
  height: 32px;
  min-width: 0;
  font-size: 1em;
  font-family: 'Righteous', sans-serif;
  padding: 0 13px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 7px #0002;
  margin-left: 0;
  margin-right: 0;
  border: none;
  transition: background .2s, transform .1s;
}

.button-filtrar {
  background: #f96705;
  color: #fff;
}

.button-filtrar:hover {
  background: #d95701;
}

form button + .button.secondary {
  margin-left: -24px;
}

.campo-senha {
  position: relative;
  width: 100%;
  max-width: 350px;
  display: inline-block;
}

.campo-senha .input {
  width: 100%;
  padding-right: 42px !important; /* Espaço pro olho */
  box-sizing: border-box;
}

.toggle-senha {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-senha .icone-olho {
  width: 26px;
  height: 26px;
  display: inline-block;
  background: none;
}

.toggle-senha .icone-olho.fechado {
  background: url('data:image/svg+xml;utf8,<svg ... SEU SVG OLHO FECHADO ...>') center/contain no-repeat;
  /* SVG Olho Fechado abaixo (exemplo) */
  background-image: url('data:image/svg+xml;utf8,<svg fill="gray" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12zm11-5c-4.418 0-8 5-8 5s3.582 5 8 5 8-5 8-5-3.582-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z"/></svg>');
}

.toggle-senha .icone-olho.aberto {
  background-image: url('data:image/svg+xml;utf8,<svg fill="orange" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 5c-7 0-11 7-11 7s4 7 11 7 11-7 11-7-4-7-11-7zm0 12c-2.761 0-5-2.239-5-5s2.239-5 5-5 5 2.239 5 5-2.239 5-5 5z"/></svg>');
}

.toggle-senha:hover .icone-olho {
  filter: brightness(0.7);
}

.senha-campo {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.senha-campo input[type="password"],
.senha-campo input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding-right: 40px; /* espaço pro olho */
}

.senha-campo .senha-olho {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  width: 40px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 0px 0px;
}

.senha-campo .senha-olho svg {
  width: 22px;
  height: 22px;
  fill: #999;
  transition: fill 0.2s;
}

.senha-campo .senha-olho.aberto svg {
  fill: #f96705;
}

.senha-campo .senha-olho:focus { outline: none; }
/*.senha-campo .senha-olho:hover svg { fill: #018185; } */

/* Alinhamento fino do campo de senha só no usuarios.ejs */
.senha-campo input[type="password"],
.senha-campo input[type="text"] {
  min-height: 30px;        /* Ajuste fino: igual ao login */
  padding-right: 42px !important;
  /* Se preferir, ajuste min-height para igualar a altura do login (normalmente 40px) */
}

.senha-campo .senha-olho {
  right: 0px;
  top: 49%;
  transform: translateY(-50%);
}

.senha-campo .senha-olho svg {
  vertical-align: middle;
}

.spinner-alerta {
  display: inline-block;
  width: 23px;
  height: 23px;
  border: 3px solid #fff6;
  border-radius: 50%;
  border-top: 3px solid var(--orange);
  animation: spin 1s linear infinite;
  vertical-align: middle;
  margin-left: 2px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.checkbox-item {
  font-size: 0.7em;
  width: fit-content;
  cursor: pointer;
}

input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--orange);
  width: fit-content;
  min-width: 0;
  transform: scale(0.9)
}

.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

.perm-label {
  display: inline-block;
  background: var(--gray-light);
  color: var(--teal-dark);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 4px;
  margin-bottom: 10px;
}

.perm-subgroup {
  margin-bottom: 6px;
}

.perm-item {
  display: flex;
  align-items: center;
  gap: 6px;              /* Espaço entre checkbox e texto */
  margin-bottom: 4px;    /* Espaço entre os itens */
  cursor: pointer;
  width: fit-content;
}

.perm-tree {
  position: relative;
  margin-left: 16px; /* espaço da linha vertical */
  padding-left: 16px;
  border-left: 2px solid #ccc; /* LINHA VERTICAL */
}

.perm-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-left: 8px;
}

/* Linha horizontal ligando o item à linha vertical */
.perm-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -16px; /* conecta com a linha vertical */
  width: 16px;
  height: 2px;
  background-color: #ccc;
}

.metade {
}

.unidade-medida-select.metade,
.unidade-preco-select.metade {
}

/* Responsividade */
@media (max-width: 950px) {
  .main-content { margin-left: 0 !important; }
  .main-content { padding-left: 0; }
  .tabela-wrapper {
    
  }
  table {
    
  }
  form { margin: 14px 20px 20px 20px; }
}

@media (max-width: 600px) {
  .header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .main-content { padding: 0 0 15px; }
  .main-content > * {}
  .main-content > .header { padding: 8px 15px; width: 100%; margin-bottom: 10px; }
  .menu-superior-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
  }
  .main-content .menu-superior {
    padding: 0 16px 18px 16px;
    margin-top: 0;
  }
  .main-content .menu-superior.sub-aba {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
  }
  .form-filtro .filtro-group {
    flex-wrap: wrap;
    margin-left: 0;
    width: 100%;
  }
}

::-webkit-scrollbar-thumb { background: var(--teal); }
::-webkit-scrollbar { width: 7px; background: var(--gray-light); }
/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: var(--white);
  padding: 24px 28px;
  box-shadow: var(--shadow);
  max-width: 320px;
  text-align: center;
  border: 1px solid var(--teal-dark);
}

.modal-number-input {
    margin-top: 10px;
    margin-bottom: 20px;
    /* width: 100%; */
    padding: 7px 5px 5px 5px;
    /* text-align: center; */
    box-sizing: border-box;
    border: 1px solid darkgray;
    border-radius: 6px;
    background: var(--white);
    transition: border .2s;
    color: black;
    font-size: 1em;
}

.modal-number-input:focus {
  outline: none;
  border: 1.5px solid var(--orange);
}

/* Overlay for column selection modal */
.modal-colunas {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-colunas.show {
  display: flex;
}

.modal-colunas .modal-content {
  background: var(--white);
  padding: 24px 28px;
  box-shadow: var(--shadow);
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--teal-dark);
}

.modal-colunas .modal-content h2 {
  margin-bottom: 8px;
  margin-left: 0;
}

/* Overlay for product logs modal */
.modal-log {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-log.show {
  display: flex;
}

.modal-log .modal-content {
  background: var(--white);
  padding: 24px 28px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-log .modal-content h2 {
  margin-bottom: 8px;
  margin-left: 0;
}

.log-list table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: none;
}

.log-list th,
.log-list td {
  border: 1px solid var(--gray-border);
  padding: 8px;
  text-align: left;
  word-break: break-word;
}

.log-list th {
  background: var(--gray);
  color: var(--teal-dark);
}

.log-list td ul {
  padding-left: 20px;
  margin: 0;
}

.modal-coluna-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  cursor: pointer;
}

.modal-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 14px;
}

.modal-actions .modal-button {
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: 7px;
  padding: 6px 14px;
  font-size: .98rem;
  font-weight: 500;
  transition: background .2s;
  cursor: pointer;
  font-family: Righteous;
}

.modal-actions .modal-button:hover {
  background: var(--orange-dark);
}

.modal-actions .modal-button.cancel {
  background: var(--teal);
  color: var(--white);
}

.modal-actions .modal-button.cancel:hover {
  background: var(--teal-dark);
}

.file-input-wrapper {
  margin-bottom: 16px;
}
.file-input-wrapper input[type='file'] {
  display: none;
}

.acoes-container {
  position: fixed;
  bottom: 20px;
  left: calc(50% + 130px);
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 5px;
  z-index: 1000;
}

.menu-collapsed .acoes-container {
  left: calc(50% + 25px);
}

.acoes-container.show {
  display: flex;
}

.acoes-modal {
  background: var(--white);
  border: 1px solid var(--teal-dark);
  box-shadow: var(--shadow);
  padding: 10px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
}

.acoes-modal .acoes-titulo {
  font-weight: 600;
  margin-bottom: 8px;
}

.acoes-modal .acoes-opcoes {
  display: flex;
  gap: 12px;
}

.acoes-modal .acao-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.acoes-modal .acao-btn .icon {
  width: 32px;
  height: 32px;
}

/* Bulk uncheck action uses the same icon sizing pattern */
.acoes-modal .acao-btn.bulk-uncheck .icon {
  width: 32px;
  height: 32px;
}

.acoes-modal .acao-btn:hover {
  color: var(--orange);
}

.acoes-contador {
    width: 90px;
    height: 108px;
    background: var(--white);
    border: 1px solid var(--gray-border);
    box-shadow: var(--shadow);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 55px;
    font-weight: bold;
    font-family: 'Righteous';
}

.perm-group {
  margin-bottom: 8px;
}

.toggle-btn {
  margin-right: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--gray-border);
  background: var(--teal-dark);
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.toggle-btn:hover {
  margin-right: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--gray-border);
  background: var(--orange);
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.perm-items {
  display: none;
}

.perm-group.open .perm-items {
  display: block;
  margin-bottom: 15px;
  margin-left: 35px;
}

/* Custom layout for permissões page */
.permissoes-form {
  display: block;
}

.permissoes-form-header {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  align-items: center;
  margin-bottom: 20px;
}

.permissoes-form select {
  min-width: unset;
  width: auto;
}

/* Modal de listagem para ações em lote */
.bulk-page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  overflow-y: auto;
  padding: 20px 0;
}

.bulk-page {
  background: var(--white);
  padding: 24px;
  box-shadow: var(--shadow);
  width: 90%;
  max-width: 600px;
  overflow-y: auto;
  position: relative;
  border: 1px solid var(--teal-dark);
}

.bulk-page-title {
  margin-left: 20px;
}

.bulk-form-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bulk-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-border);
}

.bulk-item:last-child {
  border-bottom: none;
}

.bulk-item h3 {
  margin: 0 0 8px 0;
  font-weight: 100;
}

.bulk-item form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.produto-info {
  padding: 0 20px;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.produto-info p {
  margin: 2px 0;
}

.bulk-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  font-family: Righteous;
}
.bulk-item-header-buttons {
  display: flex;
}

.bulk-item-header-buttons .button-action {
  margin-right: 0;
}

.bulk-item-remove,
.bulk-item-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bulk-item-remove .icon,
.bulk-item-add .icon {
  width: 20px;
  height: 20px;
}

.bulk-item-save {
  display: block;
  margin-left: auto;
  margin-right: 20px;
}

.bulk-actions {
  display: flex;
  justify-content: flex-start;
  gap: 15px;
}

.bulk-actions .bulk-item-save,
.bulk-actions .bulk-close {
  margin: 0;
}

.bulk-close-top {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  z-index: 1001;
}

.bulk-scroll-bottom {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: var(--teal);
  color: var(--white);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
  z-index: 1001;
}

.bulk-scroll-bottom .icon {
  width: 24px;
  height: 24px;
}

/* Mobile menu */
.mobile-topbar {
  display: none;
}
.mobile-menu-btn {
  background: transparent;
  border: none;
  color: var(--white);
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu-btn svg {
  width: 28px;
  height: 28px;
}
.desktop-only {
  display: flex;
}
.mobile-only {
  display: none;
}
@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: flex;
  }
  .mobile-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: var(--teal-dark);
    color: var(--white);
    z-index: 60;
    padding: 8px 16px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--white);
  }
  .mobile-topbar .user-dropdown {
    margin-right: 0;
  }
  .mobile-topbar .user-dropdown .dropdown-menu {
    position: fixed;
    top: 43px;
    right: 0;
    width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0px;
    border-bottom: 2px solid;
  }
.mobile-topbar .user-dropdown .dropdown-menu button {
    width: 100%;
    border-top: 1px solid var(--gray-border);
  }
  .main-content {
    margin-left: 0 !important;
    margin-top: 47px;
  }
  .header {
    justify-content: center;
  }
  .menu-lateral {
    display: none;
    position: fixed;
    top: 29px;
    left: 0;
    height: auto;
    flex-direction: column;
    z-index: 50;
    border-right: none;
    border-bottom: 2px solid var(--orange);
  }
  .menu-lateral.open {
    display: flex;
  }
  .menu-lateral .menu-toggle,
  .menu-lateral .logo {
    display: none;
  }
  .menu-lateral nav {
    flex-direction: column;
    margin-top: 17px;
  }
  .menu-lateral nav a {
    width: 100%;
    padding: 12px 16px;
    border-radius: 0;
  }
  .menu-lateral .divider-logo-nav {
    display: none;
  }
  .acoes-container,
  .menu-collapsed .acoes-container {
    left: 50%;
  }
}

/* Table header and pagination controls */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-left: 32px;
  margin-right: 20px;
}

.table-header h2 {
  flex: 1;
  margin: 0;
}

.table-controls {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 8px;
}

.rows-per-page {
  margin: 0;
}

.table-controls .gear-btn {
  margin: 0;
}

.total-registros {
  font-size: 0.8rem;
  color: #666;
}

/* Icon-only gear button for column settings */
.gear-btn {
  background: none;
  border: none;
  color: var(--orange);
  cursor: pointer;
  padding: 4px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gear-btn svg {
  stroke: currentColor;
  width: 100%;
  height: 100%;
  margin-left: 0;
}

.gear-btn:hover,
.gear-btn:focus {
  color: var(--orange-dark);
}

/* Estilo para seletor de contagem de linhas */
.table-controls select {
  cursor: pointer;
  padding-right: 5px;
  padding-left: 5px;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid var(--gray-border);
  background: var(--white);
  min-width: fit-content;
  height: 32px;
  min-height: 32px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .table-header {
    align-items: flex-start;
    flex-wrap: nowrap;
  }

  .table-controls {
    flex-direction: column;
    align-items: flex-end;
  }

  .table-controls .gear-btn {
    order: 1;
  }

  .table-controls select,
  .table-controls .rows-per-page {
    order: 2;
  }

  .table-controls .total-registros {
    order: 3;
  }
}

.table-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 12px 0;
}

.table-pagination button {
  background: var(--teal);
  color: var(--white);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background .2s;
}

.table-pagination button.active {
  background: var(--orange);
}

.table-pagination button:disabled {
  opacity: .5;
  cursor: default;
}

@media (max-width: 768px) {
  .table-pagination {
    flex-wrap: wrap;
  }
}
.erro-validacao {
  color: #dc3545;
  margin-top: 4px;
}


/* Select com busca */
.select-busca {
  position: relative;
  display: block;
}

.select-busca-input {
  width: max-content;
  padding: 7px 48px 5px 5px;
  height: 20px;
  margin: 0;
}

.select-busca-btn {
  position: absolute;
  top: 2px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #666;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

.select-busca-btn:hover {
  color: var(--teal-dark);
  background: transparent;
  transform: none;
}

.select-busca-btn svg {
  width: 16px;
  height: 16px;
  transition: transform .14s ease;
}

.select-busca-clear { right: 22px; }
.select-busca-toggle { right: 0; }
.select-busca-toggle.open svg { transform: rotate(180deg); }
.select-busca-clear[hidden] { display: none; }

.form-filtro .select-busca-input {
  height: var(--campo-height);
}

.select-busca-panel {
  width: max-content;
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 4px;
  display: none;
  background: var(--white);
  border: 1px solid var(--orange);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 5px 5px 5px 5px;
  z-index: 10;
}

.select-busca.open .select-busca-panel {
  display: block;
}

.select-busca-list {
  width: 100%;
  border: 0;
  padding: 0px 5px 0px 0px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.select-busca-list:hover {
  border: 0;
}

.select-busca-list option {
  padding: 10px 10px 5px 10px;
  align-content: center;
  color: darkslategray;
}

.select-busca-list option:hover {
  background-color: var(--teal);
  color: var(--white);
}
.select-busca-list option:checked {
  background-color: transparent;
}
.select-busca-sem {
  color: #666; cursor: default;
}
.select-busca-list option:disabled {
  background-color: transparent !important;
}

.input-validade-produtos {
  font-family: 'Segoe UI', Arial, sans-serif;
  height: 20px;
  margin: 0;
  padding: 5px 5px 7px 5px;
}

.select-busca-input-unidade_medida_id-produtos {
  width: 50px;
  padding: 7px 28px 5px 5px;
}

.select-busca-input-unidade_preco_id-produtos {
  width: 50px;
  padding: 7px 28px 5px 5px;
}

.input-codigo_barra-produtos {
  height: 20px;
  margin: 0;
  padding: 7px 5px 5px 5px;
}

.filtro-campo-validade_fim-produtos {
  font-family: 'Segoe UI', Arial, sans-serif;
  margin-left: -15px;
}

.filtro-campo-validade_inicio-produtos {
  font-family: 'Segoe UI', Arial, sans-serif;
}

.input-nome-permissoes {
  height: 20px;
  margin: 0;
  padding: 7px 5px 5px 5px;  
}

.select-busca-input-unidade_peso_volume_id-produtos {
  width: 50px;
  padding: 7px 28px 5px 5px;
}

.input-peso_volume-produtos {
  width: 110px;
  padding: 7px 5px 5px 5px;
}

.input-nome-usuarios {
  height: 20px;
  margin: 0;
  padding: 7px 5px 5px 5px;
}

.input-sobrenome-usuarios {
  height: 20px;
  margin: 0;
  padding: 7px 5px 5px 5px;
}

.input-email-usuarios {
  height: 20px;
  margin: 0;
  padding: 7px 5px 5px 5px;
}

.input-senha-usuarios {
  height: 33px;
  margin: 0;
  padding: 7px 42px 5px 5px;
}