:root {
    font-size: 62.5%; /* torna 1rem = 10px */
    /* Cores */
    --fundo:#3A5311;
    --botao:#E98D2F
}
* {
  margin: 0;  
}

/* ===== FORMULÁRIO LOGIN===== */
.form {
  height: 100vh;
  background: linear-gradient(135deg,black);
  display: flex;            
  justify-content: center;  
  align-items: center;
  /* border: 2px solid yellow; */
}
.formulario-field {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: auto;
  /* border: 2px solid yellow; */
}
.formulario-legend {
  color: aquamarine;
  font-size: 2.5rem;
}
.formulario-label {
  color: aquamarine;
  font-size: 1.8rem;
}
.formulario-input {
  font-size: 1.8rem;
}
.textArea {
  box-sizing: border-box;
  width: 100%;
  height: 12rem;
  font-size: 1.8rem;
  resize: vertical;
  display: block;
}
.formulario-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}
.formulario-nav {
  display: flex;
  margin-top: 1rem;
  justify-content: space-between;
  /* border: 2px solid yellow;     */
}
.formulario-submit {
  font-size: 1.8rem;
  padding: 5px;
  border-radius: 5px;
  background-color: var(--botao);  
}
.formulario-div {
  width: 70%;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  color: white;
  /* border: 2px solid rgb(213, 213, 124);  */
}
.formulario-div p {  
  font-size: 1.5rem;
  padding-right: 5px;
}
.formulario-div a {
  text-decoration: none;
  color: white; 
  font-size: 1.5rem;
}
.formulario-fotos:hover {
  transform: scale(1.1);
}
.formulario-submit:hover {
  transform: scale(1.1);
}
.jaPossuiCadastro-login:hover {
  transform: scale(1.1);
}


/* ------------------------------------------- */
/* --------PAINEL GESTOR ----------------------*/


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --verde: #639922;
  --verde-bg: green;
  --verde-txt: white;
  --vermelho: #e24b4a;
  --vermelho-bg: red;
  --vermelho-txt: white;
  --amarelo: #ba7517;
  --amarelo-bg: yellow;
  --amarelo-txt: rgb(169, 65, 65);
  --borda: #e4e4e0;
  --texto: #1a1a18;
  --texto-sec: #6b6b67;
  --texto-ter: #9e9e9a;
  --bg: #ffffff;
  --bg-sec: #f7f7f5;
  --radius: 8px;
  --radius-lg: 12px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-sec);
  color: var(--texto);
  min-height: 100vh;
}

/* ── Cabeçalho ── */
.header {
  background: var(--bg);
  border-bottom: 1px solid var(--borda);
  padding: 0 2rem;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-titulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--texto);
}
.btn-sair {
  font-size: 13px;
  color: var(--texto-sec);
  background: none;
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  padding: 5px 12px;
  cursor: pointer;
}
.btn-sair:hover { background: var(--bg-sec); }

.btn-acao {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    transition: opacity 0.2s;
}
.btn-acao.pdf { background-color: #e74c3c; color: white; }
.btn-acao.excel { background-color: #27ae60; color: white; }
.btn-acao:hover { opacity: 0.8; }

/* ── Container principal ── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem;
}

/* ── Barra de filtros + gauge ── */
.top-bar {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}
.filters select {
  font-size: 13px;
  padding: 6px 10px;
  height: 34px;
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--texto);
  cursor: pointer;
  appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b67' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.filters select:focus { outline: none; border-color: #888; }

/* ── Gauge ── */
.gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 120px;
}
.gauge-pct {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
  text-align: center;
}

/* ── Painel (card) ── */
.painel {
  background: var(--bg);
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ── Cabeçalho da lista ── */
.list-header {
  display: grid;
  grid-template-columns: 50px 35px 1fr 150px 130px 72px;
  gap: 12px;
  padding: 8px 16px;
  font-size: 11px;
  color: var(--texto-ter);
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--borda);
  background: var(--bg-sec);
  align-items: center;
}

/* ── Linha de propriedade ── */
.prop-row {
  display: grid;
  grid-template-columns: 50px 35px 1fr 150px 130px 72px;
  gap: 12px;
  padding: 11px 16px;
  align-items: center;
  border-bottom: 1px solid var(--borda);
  cursor: pointer;
  transition: background .1s;
  position: relative;
}

.row-marcadores {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
}

.btn-star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 2.1rem;
  color: #ccc; /* Cor desativada */
  transition: color 0.2s;
  padding: 0;
}

.btn-star.active {
  color: #ffca28; /* Amarelo ouro */
}

.prop-checkbox {
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.list-header div:last-child {
  text-align: left;       /* Alinha o texto à esquerda dentro da célula */
  justify-self: start;  /* Alinha a própria div no início da coluna do grid */
  padding-left: 10px;    /* Adiciona um pequeno respiro à esquerda, se necessário */
}

.prop-row:last-child { border-bottom: none; }
.prop-row:hover { background: var(--bg-sec); }

/* ── Dot de status ── */
.dot {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}
.dot-verde  { background: var(--verde-bg);    color: var(--verde-txt); }
.dot-vermelho { background: var(--vermelho-bg); color: var(--vermelho-txt); }
.dot-amarelo  { background: var(--amarelo-bg);  color: var(--amarelo-txt); }

/* ── Dados da propriedade ── */
.prop-main { min-width: 0; }
.prop-nome {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prop-sub {
  font-size: 12px;
  color: var(--texto-sec);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.func-col {
  font-size: 13px;
  color: var(--texto-sec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.data-col { font-size: 12px; color: var(--texto-ter); }

/* ── Miniatura de foto ── */
.foto-wrap {
  position: relative;
  width: 56px;
  height: 42px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-sec);
  cursor: pointer;
}
.foto-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.foto-badge {
  position: absolute;
  bottom: 3px;
  right: 3px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
}
.sem-foto {
  width: 56px;
  height: 42px;
  background: var(--bg-sec);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--borda);
}

/* ── Overlay de descrição ── */
.overlay {
  display: none;
  position: absolute;
  z-index: 20;
  background: var(--bg);
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  width: 280px;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  font-size: 13px;
  line-height: 1.6;
  pointer-events: none;
}
.overlay.visivel { display: block; }
.overlay-titulo {
  font-weight: 600;
  font-size: 12px;
  color: var(--texto-ter);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.overlay-desc { color: var(--texto-sec); }

/* ── Modal de fotos ── */
.modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.modal-bg.aberto { display: flex; }
.modal {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  max-width: 520px;
  width: 92%;
  max-height: 85vh;
  overflow-y: auto;
}
.modal-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.modal-titulo { font-size: 15px; font-weight: 600; }
.modal-fechar {
  cursor: pointer;
  font-size: 20px;
  color: var(--texto-sec);
  background: none;
  border: none;
  line-height: 1;
  padding: 2px 8px;
}
.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.modal-grid img {
  width: 100%;
  border-radius: 6px;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--bg-sec);
}

/* ── Estados ── */
.estado {
  padding: 3rem;
  text-align: center;
  color: var(--texto-sec);
  font-size: 14px;
}
.estado-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--borda);
  border-top-color: var(--texto-sec);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }