/* ===== Nova Obra – layout em blocos responsivo ===== */
.obra-container { max-width: 1200px; }
.obras-title { font-size: 1.6rem; margin-bottom: 14px; }

/* Grid 2 colunas (desktop) / 1 no mobile */
.obra-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}
.block {
  background: #12131A;
  border: 1px solid #1C1D26;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.block-title { font-size: 1.05rem; margin-bottom: 8px; letter-spacing: .2px; }

.block-full{
  grid-column: 1 / -1;
}

.logo-link { display: inline-flex; align-items: center; padding: 14px 16px 8px; }
.logo { width: 100px; height: auto; display: block; }

/* Campos / labels */
.obra-form .col { display: flex; flex-direction: column; gap: 10px; }
.label { font-size: .95rem; margin-top: 6px; }
.textarea { resize: vertical; min-height: 180px; }
.field-group { display: grid; gap: 8px; }

/* Rádio – marcador #FF344E */
.choice-group {
  border: 1px solid #1C1D26; background: #0E0F12;
  border-radius: 12px; padding: 12px; margin-top: 6px;
}
.radio-line { display: flex; gap: 14px; flex-wrap: wrap; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.radio input[type="radio"] { width: 18px; height: 18px; accent-color: #FF344E; }
.radio span { font-weight: 600; }

/* Uploads */
.upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 6px;
}

/* container da área + preview, para permitir sobreposição */
.upload-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative; /* necessário para posicionar o preview por cima */
}

.upload-area {
  display: grid; place-items: center; gap: 6px; width: 100%; aspect-ratio: 1/1;
  background: #0E0F12; border: 1px dashed #2A2C35; border-radius: 12px;
  text-align: center; padding: 16px; cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .08s ease;
}
.upload-area:hover, .upload-area:focus-visible {
  border-color: #FF344E; box-shadow: 0 0 0 2px rgba(255, 52, 78, .15); outline: none;
}
.upload-area:active { transform: scale(.99); }

.upload-icon { width: 82px; height: 82px; opacity: .9; }
.upload-title { font-size: 1.05rem; }
.upload-sub { font-size: .85rem; color: #D1D5DB; }

/* Preview por cima da descrição */
.upload-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 1px solid #1C1D26;
  background: #17181D;
  object-fit: cover;
  display: none;          /* padrão: invisível */
  pointer-events: none;   /* não bloqueia o clique na área de upload */
}

/* quando JS remover o atributo hidden, mostramos o preview */
.upload-preview:not([hidden]) {
  display: block;
}

/* ===== Redes sociais (inputs com ícone) ===== */
.social-links-block{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.social-row{
  display:flex;
  align-items:center;
  gap:8px;
}

.social-row .social-icon{
  width:22px;
  height:22px;
  flex-shrink:0;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.4));
}

.social-row .input{
  flex:1;
}

/* Botão publicar – só fica vermelho quando pronto */
.btn-disabled {
  background: #2A2C35; color: #9CA3AF;
  pointer-events: none;
}
.btn-ready {
  background: #FF344E; color: #0E0F12;
  box-shadow: 0 6px 18px rgba(255, 52, 78, .25);
}
.btn-ready:hover, .btn-ready:focus-visible { box-shadow: 0 8px 22px rgba(255, 52, 78, .35); }

/* ===== Classificação + termos ===== */
.terms-block{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* faixa etária */
.age-group{
  margin-top: 4px;
}
.age-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.age-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#0E0F12;
  border:1px solid #1C1D26;
  cursor:pointer;
  font-size:.85rem;
}
.age-pill input[type="radio"]{
  width:16px;
  height:16px;
  accent-color: currentColor;
}
.age-pill span{
  font-weight:600;
}

.age-pill--livre{ color:#16a34a; }
.age-pill--10{ color:#2563eb; }
.age-pill--12{ color:#eab308; }
.age-pill--14{ color:#f97316; }
.age-pill--16{ color:#dc2626; }

/* checkboxes de aceite */
.terms-check{
  margin-top:6px;
}
.terms-label{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:.9rem;
  color:#E5E7EB;
}
.terms-label input[type="checkbox"]{
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color:#FF344E;
}
.terms-link{
  color:#FF344E;
  text-decoration:none;
  border-bottom:1px dashed rgba(255,52,78,.55);
}
.terms-link:hover,
.terms-link:focus-visible{
  color:#ff6e83;
  border-bottom-color: currentColor;
  outline:none;
}

/* Ações (Publicar + Apagar + status) */
.form-actions{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
}

/* Botão de apagar obra (fora do modal) */
.btn-delete-obra{
  background:#7f1d1d;
  color:#fee2e2;
  border:1px solid #b91c1c;
  border-radius:10px;
  padding:8px 12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  cursor:pointer;
  transition: transform .06s ease, filter .18s ease, opacity .2s ease;
}
.btn-delete-obra:hover,
.btn-delete-obra:focus-visible{
  filter:brightness(1.08);
  outline:none;
}
.btn-delete-obra:active{
  transform: translateY(1px) scale(.99);
}
.btn-delete-obra:disabled{
  opacity:.6;
  cursor:default;
}
.btn-delete-obra .material-symbols-outlined{
  font-size:18px;
}

/* Mensagem de status / erro perto do botão */
.mensagem-status{
  margin-top: 8px;
  font-size: .9rem;
  min-height: 1.2em;
  color: #E5E7EB;
}

.mensagem-status.is-error{
  color: #fca5a5;
}

/* ===== MODAL DE CONFIRMAÇÃO DE EXCLUSÃO ===== */
.delete-modal{
  border:0;
  padding:0;
  margin:0;
  background:transparent;
}

/* ocupa a tela quando aberto */
.delete-modal[open]{
  position:fixed;
  inset:0;
}

/* backdrop escurecido */
.delete-modal::backdrop{
  background:rgba(0,0,0,.55);
}

/* card centralizado */
.delete-card{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:min(420px, 92vw);
  max-height:90vh;
  background:#1f2026;
  border:1px solid #2a2c35;
  border-radius:16px;
  padding:20px;
  color:#fff;
  box-shadow:0 18px 48px rgba(0,0,0,.45);
  overflow:auto;
}
.delete-card h3{
  font-size:1.1rem;
  margin-bottom:8px;
}
.delete-text{
  font-size:.95rem;
  color:#e5e7eb;
  margin-top:4px;
}

/* ações no rodapé do modal */
.delete-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}

.delete-actions button{
  border-radius:10px;
  padding:8px 14px;
  font-weight:600;
  border:0;
  cursor:pointer;
  transition: transform .06s ease, filter .18s ease, opacity .2s ease;
}
.delete-actions button:active{
  transform: translateY(1px) scale(.99);
}

/* Cancelar (cinza) */
.btn-delete-cancel{
  background:#374151;
  color:#E5E7EB;
}
.btn-delete-cancel:hover,
.btn-delete-cancel:focus-visible{
  filter:brightness(1.05);
  outline:none;
}

/* Apagar (vermelho) */
.btn-delete-confirm{
  background:#dc2626;
  color:#fee2e2;
}
.btn-delete-confirm:hover,
.btn-delete-confirm:focus-visible{
  filter:brightness(1.07);
  outline:none;
}
.btn-delete-confirm:disabled{
  opacity:.7;
  cursor:default;
}

/* ===== TOAST FIXO NO TOPO ===== */
.toast{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  background: #1f2933;
  color: #E5E7EB;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  font-size: .9rem;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  max-width: min(420px, 90vw);
  text-align: center;
  transition: transform .28s ease-out, opacity .28s ease-out;
}

.toast--visible{
  transform: translate(-50%, 16px);
  opacity: 1;
}

.toast--error{
  background: #b91c1c;
  color: #fee2e2;
}

.toast--info{
  background: #374151;
  color: #E5E7EB;
}

/* utilidade */
.is-hidden{
  display:none !important;
}

/* Responsivo */
@media (max-width: 960px) {
  .obra-form { grid-template-columns: 1fr; }
  .upload-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .upload-grid { grid-template-columns: 1fr; }
  .obras-title { font-size: 1.35rem; }
}