@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');

:root{
  --azul:#000525; --amarelo:#ffc420; --branco:#fff; --cinza:#dddddd;
  --fundo:#0a1e3c; --fundo-claro:#101d35; --fundo-inter:#162a48; --azul-claro:#1a2c4e;
  --highlight:#ff1d50; --shadow:rgba(0,0,0,.3);
  --radius:14px; --t-fast:.2s ease; --t-med:.3s ease;
  --font-display:'League Gothic',sans-serif; --font-body:'Poppins',sans-serif;
}

*{ box-sizing:border-box }
body{ margin:0; background:var(--azul); color:var(--branco); font-family:var(--font-body) }
main{ padding: clamp(16px, 3vw, 24px); }

/* Header */
.eng-container{ max-width:min(1200px, 96vw); margin: clamp(72px, 10vw, 110px) auto clamp(32px, 6vw, 60px); }
.eng-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.eng-header h1{
  margin:0; font-family:var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  color:var(--amarelo); letter-spacing:.5px;
}
.eng-tools{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.eng-tools input[type="search"]{
  width: clamp(220px, 40vw, 360px); max-width: 100%;
  padding:10px 12px; border-radius:10px; border:1px solid #32406e;
  background:#0c1540; color:#fff; outline:none; transition:border var(--t-fast), box-shadow var(--t-fast);
}
.eng-tools input::placeholder{ color:#9fb0e0 }
.eng-tools input:focus{ border-color:var(--amarelo); box-shadow:0 0 0 3px rgba(255,196,32,.25) }
#addEngBtn{
  background:var(--amarelo); color:var(--azul); border:0; border-radius:999px;
  padding:10px 16px; font-weight:800; cursor:pointer;
  transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-med);
  box-shadow:0 8px 20px rgba(0,0,0,.35); font-size: clamp(.9rem, 2.2vw, 1rem);
}
#addEngBtn:hover{ transform:translateY(-2px); background:#ffd34d }

/* Lista de cards */
.eng-list{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 2vw, 16px);
}

/* Grid fluido por colunas (3→2→1) */
@media (min-width:1101px){
  .eng-list > *{ grid-column: span 4; }   /* 3 colunas */
}
@media (max-width:1100px) and (min-width:701px){
  .eng-list > *{ grid-column: span 6; }   /* 2 colunas */
}
@media (max-width:700px){
  .eng-list > *{ grid-column: 1 / -1; }   /* 1 coluna */
}

.loading{ opacity:.9 }

.eng-card{
  background:#0b1030; border:1px solid #2a3669; border-radius:16px;
  padding: clamp(12px, 2.5vw, 14px);
  box-shadow:0 6px 22px rgba(0,0,0,.25);
  display:flex; flex-direction:column; gap:10px;
  transition:transform var(--t-fast), box-shadow var(--t-med);
}
.eng-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.45) }

.eng-card-head{
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
}
.eng-name{ font-family:var(--font-display); font-size: clamp(1.3rem, 2.8vw, 1.9rem); }
.eng-area{
  background:#12205a; border:1px solid #2a3669; padding:4px 10px; border-radius:999px;
  font-weight:700; font-size: clamp(.75rem, 1.8vw, .9rem);
}

.eng-meta{ font-size: clamp(.8rem, 1.8vw, .95rem); opacity:.9 }
.eng-material{ color:#dfe7ff }
.eng-date{ color:#ffc420; font-weight:700 }

.eng-photos{
  display:grid; gap:8px;
  grid-template-columns: repeat(3, 1fr);
}
.eng-photos img{
  width:100%; height: clamp(110px, 14vw, 130px);
  object-fit:cover; border-radius:10px; border:1px solid #26346a; background:#0c1540;
}

/* Blocos de texto */
.eng-block{ background:#0e1744; border:1px solid #27346a; border-radius:12px; padding: clamp(8px, 2vw, 10px) 12px }
.eng-block h4{ margin:0 0 6px; font-size: clamp(.85rem, 1.8vw, .95rem); color:#bcd0ff }
.eng-block p{ margin:0; color:#e9ecff; line-height:1.55; white-space:pre-wrap; font-size: clamp(.9rem, 2.2vw, 1rem); }

/* Ações */
.eng-actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap }
.btn{
  border:1px solid #37447a; background:#141f4f; color:#fff;
  padding:8px 12px; border-radius:10px; cursor:pointer;
  transition:background var(--t-fast), transform var(--t-fast);
  font-size: clamp(.85rem, 2vw, .95rem);
}
.btn:hover{ background:#1a2a6b; transform:translateY(-1px) }
.btn-danger{ background:var(--highlight); border-color:#e43a62 }
.btn-danger:hover{ background:#ff4d70 }

/* Modais */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; z-index:1000; padding: clamp(12px, 3vw, 18px) }
.hidden{ display:none }
.modal-content{
  background:#0f1b3f; color:#fff; border-radius:16px;
  width: min(900px, 96vw); max-height: 85vh; overflow-y:auto;
  padding: clamp(14px, 3vw, 18px);
  box-shadow:0 10px 26px rgba(0,0,0,.55); position:relative;
}
.modal-close{ position:absolute; top:8px; right:10px; border:0; background:transparent; color:#fff; font-size:20px; cursor:pointer }
#modalTitle{ margin:6px 0 12px; font-family:var(--font-display); font-size: clamp(1.4rem, 3.6vw, 2rem); color:var(--amarelo) }

/* Formulário */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px }
.form-field{ display:flex; flex-direction:column; gap:6px }
.form-field.full{ grid-column:1 / -1 }
.form-field.half{ grid-column:auto }

label{ font-weight:700; font-size: clamp(.85rem, 1.8vw, .95rem); }
.hint{ color:#bcd0ff; font-weight:500; font-size: clamp(.78rem, 1.6vw, .85rem); }

input[type="text"], input[type="date"], textarea{
  background:#0c1540; color:#fff; border:1px solid #334278; border-radius:10px; padding:10px 12px; outline:none;
  transition:border var(--t-fast), box-shadow var(--t-fast); font-family:var(--font-body);
  min-width: 0; /* evita overflow em grids no mobile */
}
textarea{ resize:vertical; min-height: 96px; }

input:focus, textarea:focus{ border-color:var(--amarelo); box-shadow:0 0 0 3px rgba(255,196,32,.25) }

.file-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.file-row > div{ background:#0c1540; border:1px dashed #334278; border-radius:10px; padding:8px 10px }
.file-row span{ display:block; font-weight:700; margin-bottom:6px; color:#bcd0ff; font-size:.9rem }

/* Ações do form */
.form-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:10px; flex-wrap:wrap }
.btn-primary{ background:var(--amarelo); color:var(--azul); border:0; font-weight:800; padding:10px 16px; border-radius:10px; cursor:pointer }
.btn-secondary{ background:#141f4f; color:#fff; border:1px solid #37447a; border-radius:10px; padding:10px 16px; cursor:pointer }
.btn-primary:hover{ filter:brightness(1.05) }
.btn-secondary:hover{ background:#1a2a6b }

/* Modal de visualização */
.modal-content.view{ width: min(820px, 96vw); }
#viewBody h3{ margin:6px 0 12px; font-family:var(--font-display); font-size: clamp(1.4rem, 3.6vw, 2rem); color:var(--amarelo) }
#viewBody .row{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
#viewBody .row p{ margin:.2rem 0 }
#viewBody .photos{
  display:grid; gap:10px;
  grid-template-columns: repeat(3, 1fr);
}
#viewBody img{
  width:100%; height: clamp(140px, 18vw, 180px);
  object-fit:cover; border-radius:10px; border:1px solid #26346a; background:#0c1540
}

/* ====== Breakpoints ====== */
@media (max-width: 900px){
  /* Cards um pouco mais altos e títulos menores */
  .eng-name{ font-size: clamp(1.2rem, 3.2vw, 1.7rem); }
}

@media (max-width: 760px){
  .form-grid{ grid-template-columns:1fr }
  .file-row{ grid-template-columns:1fr }
  .modal-content.view{ width:96vw }
  #viewBody .row{ grid-template-columns:1fr }
  .eng-photos{ grid-template-columns: repeat(2, 1fr); }
  #viewBody .photos{ grid-template-columns: repeat(2, 1fr); }
  .eng-tools{ justify-content: space-between; }
}

@media (max-width: 520px){
  .eng-photos{ grid-template-columns: 1fr; }
  #viewBody .photos{ grid-template-columns: 1fr; }
  .eng-actions{ justify-content: stretch }
  .eng-actions .btn{ flex:1 1 auto; text-align:center }
  .eng-tools input[type="search"]{ width: 100%; }
}

/* Menos animação para quem prefere */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
  .eng-card:hover{ transform:none; }
}