/* ============================================
   ECOVISION IA — Documentos CSS
   Estilos exclusivos da biblioteca de documentos
   ============================================ */

/* ============================================
   HEADER DA PÁGINA
   ============================================ */
.docs-header {
  margin-bottom: var(--espaco-4);
}

.docs-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--espaco-3);
}

.docs-titulo h2 {
  font-size: var(--tamanho-xl);
  font-weight: var(--peso-bold);
  color: var(--cor-texto);
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-bottom: 0;
}

.docs-titulo h2 i {
  color: var(--cor-primaria);
}

/* Busca */
.docs-busca {
  margin-bottom: var(--espaco-3);
}

/* ============================================
   GRADE DE DOCUMENTOS
   ============================================ */
.docs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-3);
}

@media (min-width: 600px) {
  .docs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .docs-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card de documento */
.doc-card {
  background: var(--cor-branca);
  border: 1px solid var(--cor-borda-clara);
  border-radius: var(--raio-lg);
  overflow: hidden;
  transition: all var(--transicao-media);
  cursor: pointer;
}

.doc-card:hover {
  box-shadow: var(--sombra-md);
  border-color: var(--cor-borda);
  transform: translateY(-2px);
}

/* Thumbnail do documento */
.doc-thumb {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.doc-thumb.pdf {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
}

.doc-thumb.imagem {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}

.doc-thumb-icone {
  font-size: 3rem;
  opacity: 0.8;
}

.doc-thumb.pdf .doc-thumb-icone {
  color: #dc2626;
}

.doc-thumb.imagem .doc-thumb-icone {
  color: #2563eb;
}

.doc-thumb-status {
  position: absolute;
  top: var(--espaco-2);
  right: var(--espaco-2);
}

/* Corpo do card */
.doc-body {
  padding: var(--espaco-3);
}

.doc-nome {
  font-weight: var(--peso-semibold);
  font-size: var(--tamanho-sm);
  color: var(--cor-texto);
  margin-bottom: var(--espaco-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.doc-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--tamanho-xs);
  color: var(--cor-texto-terciario);
}

.doc-tamanho {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
}

.doc-data {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
}

/* ============================================
   DETALHES DO DOCUMENTO (MODAL)
   ============================================ */
.doc-detalhe-header {
  display: flex;
  gap: var(--espaco-4);
  margin-bottom: var(--espaco-4);
  padding-bottom: var(--espaco-4);
  border-bottom: 1px solid var(--cor-borda-clara);
}

.doc-detalhe-icone {
  width: 64px;
  height: 64px;
  border-radius: var(--raio-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}

.doc-detalhe-icone.pdf {
  background: var(--cor-perigo-fundo);
  color: var(--cor-perigo);
}

.doc-detalhe-icone.imagem {
  background: var(--cor-info-fundo);
  color: var(--cor-info);
}

.doc-detalhe-info {
  flex: 1;
}

.doc-detalhe-info h4 {
  margin-bottom: var(--espaco-1);
}

.doc-detalhe-meta {
  display: flex;
  gap: var(--espaco-3);
  flex-wrap: wrap;
  font-size: var(--tamanho-xs);
  color: var(--cor-texto-terciario);
}

.doc-detalhe-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-4);
}

.doc-detalhe-item {
  padding: var(--espaco-3);
  background: var(--cor-fundo);
  border-radius: var(--raio-md);
}

.doc-detalhe-item .item-label {
  font-size: var(--tamanho-xs);
  color: var(--cor-texto-terciario);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--espaco-1);
}

.doc-detalhe-item .item-valor {
  font-weight: var(--peso-semibold);
  color: var(--cor-texto);
  font-size: var(--tamanho-sm);
  word-break: break-all;
}

.doc-texto-extraido {
  background: var(--cor-fundo);
  border-radius: var(--raio-md);
  padding: var(--espaco-4);
  max-height: 200px;
  overflow-y: auto;
  font-size: var(--tamanho-sm);
  color: var(--cor-texto-secundario);
  line-height: 1.6;
  white-space: pre-wrap;
  font-family: var(--fonte-mono);
}

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 767px) {
  .doc-detalhe-grid {
    grid-template-columns: 1fr;
  }

  .doc-detalhe-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}