:root{
  --primary-color: #4a90e2;
  --primary-dark: #3a7bc8;
  --secondary-color: #f39c12;
  --text-color: #333;
  --bg-color: #f8f9fa;
  --modal-bg: rgba(0,0,0,0.5);
  --error-color: #dc3545;
  --success-color: #28a745;
  --card-shadow: 0 4px 6px rgba(0,0,0,0.1);
  --card-hover-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* ===== MODAL ===== */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--modal-bg);
  overflow: auto;
  padding: 20px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}

/* centraliza verticalmente no flex quando for exibido */
.modal[style*="display:flex"] {
  display: flex;
}

/* Conteúdo do modal */
.modal-content {
  background-color: #fff;
  margin: auto;
  padding: 2rem;
  border-radius: 12px;
  max-width: 550px;
  width: 100%;
  max-height: 90vh;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow-y: auto;
  box-sizing: border-box;
}

/* título e parágrafo */
.modal-content h2 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  margin-top: 0;
  padding-right: 30px; /* espaço para o botão fechar */
  font-size: 1.4rem;
}

/* botão fechar */
.close-modal {
  position: absolute;
  right: 1rem;
  top: 1rem;
  font-size: 1.8rem;
  cursor: pointer;
  color: #aaa;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}
.close-modal:hover {
  color: var(--text-color);
  background-color: #f0f0f0;
}

/* ===== INPUT GROUP ===== */
.input-group {
  display: flex;
  margin: 1.5rem 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.25s ease;
  background: #fff;
}

.input-group:focus-within {
  box-shadow: 0 6px 18px rgba(74,144,226,0.12);
  transform: translateY(-2px);
}

.input-group input {
  flex: 1;
  padding: 1rem;
  border: 2px solid #e9e9e9;
  border-right: none;
  border-radius: 8px 0 0 8px;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  outline: none;
  transition: border-color 0.2s ease;
  background: transparent;
}

.input-group input:focus {
  border-color: var(--primary-color);
}

.protocolo-input::placeholder {
  color: #aaa;
  font-weight: 400;
}

/* botão da pesquisa */
.input-group button {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: white;
  border: 2px solid var(--primary-color);
  border-left: none;
  padding: 0 1.4rem;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}

/* brilho animado no hover */
.input-group button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transition: left 0.45s;
}
.input-group button:hover::before {
  left: 100%;
}
.input-group button:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(58,123,200,0.12);
}
.input-group button:active { transform: scale(0.99); }

/* spinner dentro do botão */
.input-group button .fa-spinner { animation: spin 1s linear infinite; }
@keyframes spin { 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }

/* ===== RESULTADO ===== */
#resultado-consulta { margin-top: 1.2rem; }

.resultado-container {
  margin-top: 1rem;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid #eaeaea;
}

/* versão com novo layout (cartão branco e sombra) */
.resultado-container.novo-layout {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background-color: white;
  padding: 1.2rem;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: none;
}

/* cabeçalho do protocolo (número + status) */
.protocolo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.2rem;
}

.protocolo-numero {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--primary-color);
  letter-spacing: 0.3px;
}

.protocolo-tipo {
  font-weight: 600;
  color: #444;
  text-align: center;
  margin: 0.3rem 0;
  padding: 0.45rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #eef1f3 100%);
  border-radius: 8px;
  font-size: 1.03rem;
  border: 1px solid #ececec;
}

/* datas (Abertura / Previsão) */
.protocolo-datas.novo-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.3rem;
}

.data-item {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 0.45rem;
  background: linear-gradient(135deg, #fbfcfc 0%, #f1f3f5 100%);
  border-radius: 8px;
  border: 1px solid #ececec;
}

.data-label {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0.35rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.data-value {
  font-weight: 600;
  color: #333;
  font-size: 1.05rem;
}

/* botão ver solicitação */
.btn-ver-solicitacao {
  display: block;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: white;
  padding: 0.9rem 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  margin-top: 1rem;
  transition: all 0.25s ease;
  font-weight: 600;
  font-size: 1rem;
  position: relative;
  overflow: hidden;
}
.btn-ver-solicitacao::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transition: left 0.45s;
}
.btn-ver-solicitacao:hover::before { left: 100%; }
.btn-ver-solicitacao:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 26px rgba(58,123,200,0.16);
}

/* ===== STATUS ===== */
.protocolo-status {
  padding: 0.65rem 1.2rem;
  border-radius: 25px;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  transition: all 0.25s ease;
}

/* cores por status */
.protocolo-status.novo {
  background: linear-gradient(135deg, #e2f0fd 0%, #c9e6ff 100%);
  color: #004085;
  border: 1px solid #b8daff;
  animation: pulse-proto 1.8s infinite;
}
.protocolo-status.em-atendimento {
  background: linear-gradient(135deg, #c7ffda 0%, #a8f5c4 100%);
  color: #0a5c25;
  border: 1px solid #93e8ac;
  animation: pulse-proto 1.8s infinite;
}
.protocolo-status.pendente {
  background: linear-gradient(135deg, #ffdf7e 0%, #ffd24c 100%);
  color: #724d00;
  border: 1px solid #ffda6a;
  animation: pulse-proto 1.8s infinite;
}
.protocolo-status.solucionado {
  background: linear-gradient(135deg, #d4edda 0%, #b8e6c5 100%);
  color: #155724;
  border: 1px solid #a3d9b1;
}
.protocolo-status.fechado {
  background: linear-gradient(135deg, #d1ecf1 0%, #b6e2e8 100%);
  color: #0c5460;
  border: 1px solid #a6d9e2;
}

/* pulso */
@keyframes pulse-proto {
  0% { box-shadow: 0 0 0 0 rgba(74,144,226,0.45); }
  70% { box-shadow: 0 0 0 12px rgba(74,144,226,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,144,226,0); }
}

/* ===== MENSAGENS ===== */
.success-message {
  color: var(--success-color);
  background: linear-gradient(135deg, #e8f5e9 0%, #d4edda 100%);
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
  border: 1px solid #c3e6cb;
}
.error-message {
  color: var(--error-color);
  background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
  text-align: center;
  border: 1px solid #f1b0b7;
}

/* REMOVER BARRA CINZA NÃO UTILIZADA */
.resultado-container:not(.novo-layout) {
  background-color: transparent; /* Remove o fundo cinza */
  border: none; /* Remove a borda */
  padding: 0; /* Remove o padding */
  box-shadow: none; /* Remove a sombra */
}

/* ===== RESPONSIVO ===== */
@media (max-width: 768px) {
  .modal { padding: 10px; }
  .modal-content {
    margin: 10px auto;
    padding: 1.5rem;
    max-height: calc(100vh - 20px);
  }
  .protocolo-datas.novo-layout { grid-template-columns: 1fr 1fr; }
  .input-group { margin: 1rem 0; }
  .protocolo-header {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }
}

@media (max-width: 600px) {
  .input-group { 
    flex-direction: row;
    border-radius: 8px;
  }
  .input-group input {
    border-radius: 8px 0 0 8px;
    border-right: none;
    border-bottom: 2px solid #e9e9e9;
    margin-bottom: 0;
    flex: 1;
  }
  .input-group button {
    border-radius: 0 8px 8px 0;
    padding: 0 1.2rem;
    border-left: none;
    border-top: 2px solid var(--primary-color);
    min-width: 60px;
    width: auto;
  }
  .protocolo-datas.novo-layout { grid-template-columns: 1fr; gap: 0.8rem; }
  .modal-content h2 { font-size: 1.3rem; padding-right: 25px; }
  .protocolo-header {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .protocolo-numero {
    font-size: 1.1rem;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .protocolo-status {
    flex-shrink: 0;
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .protocolo-numero { font-size: 1.1rem; }
  .data-item { padding: 0.6rem; }
  .btn-ver-solicitacao { margin-top: 1rem; padding: 0.8rem; font-size: 0.95rem; }
  .resultado-container.novo-layout { padding: 1rem; gap: 0.6rem; }
  .protocolo-tipo { margin: 0.6rem 0; padding: 0.6rem; font-size: 1rem; }
   .protocolo-header {
    gap: 0.5rem;
  }
  
  .protocolo-numero {
    font-size: 1rem;
    word-break: break-all;
  }
}

@media (max-height: 600px) {
  .modal-content { margin: 5px auto; max-height: calc(100vh - 10px); }
}

@media (max-width: 380px) {
  .modal-content { padding: 0.8rem; }
  .modal-content h2 { font-size: 1.2rem; }
  .close-modal { right: 0.5rem; top: 0.5rem; font-size: 1.4rem; width: 28px; height: 28px; }
  .input-group input { padding: 0.7rem; font-size: 0.95rem; }
  .protocolo-header {
    gap: 0.3rem;
  }  
  .protocolo-numero {
    font-size: 0.9rem;
  }
  .protocolo-status {
    padding: 0.4rem 0.7rem;
    font-size: 0.75rem;
  }
}