/* ============ PERIL — Variáveis e utilitários base ============
   Todas as variáveis e classes escopadas sob #customware-root
   para evitar conflito com o tema WordPress. */

/* Variáveis de design — escopadas no root da app, não no :root global */
#customware-root {
  --primaria:     #08344c;
  --destaque:     #FEBD0D;
  --success:      #22c55e;
  --text-1:       #f0f4f8;
  --text-2:       #b8c9d9;
  --text-3:       #6b8fa8;
  --border:       rgba(255,255,255,0.10);
  --surface-2:    rgba(255,255,255,0.05);
  --grad-amarelo: linear-gradient(135deg, #FEBD0D, #f59e0b);
  --spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Keyframes são globais — não vazam estilos por si só */
@keyframes peril-fade-slide-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes peril-spin { to { transform: rotate(360deg); } }

/* ---- Animação de entrada ---- */
#customware-root .fade-slide-in {
  animation: peril-fade-slide-in 260ms var(--ease-out);
}

/* ---- Wrapper de página ---- */
/* Não define overflow-y nem height: scroll fica por conta do .cw-content-area,
   cujo scrollbar aparece na borda direita real da tela. */
#customware-root .page {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 28px 32px 72px;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Card — definido globalmente em assets/css/global.css */
#customware-root .profile-tab-card { margin-top: 0; }

/* Botões — definidos globalmente em assets/css/global.css */

/* ---- Campo de formulário ---- */
#customware-root .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
#customware-root .field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.02em;
}
/* Estilos visuais de input/select/textarea definidos globalmente em assets/css/global.css */

/* ---- Seção de editor ---- */
#customware-root .editor-section {
  margin-bottom: 28px;
}
#customware-root .editor-section:last-of-type { margin-bottom: 0; }
#customware-root .editor-section h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* ---- Grids de formulário ---- */
#customware-root .form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#customware-root .form-grid-cep {
  display: grid;
  grid-template-columns: 140px 1fr 100px;
  gap: 12px;
}
#customware-root .form-grid-cidade {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 12px;
}
@media (max-width: 640px) {
  #customware-root .form-grid-2,
  #customware-root .form-grid-cep,
  #customware-root .form-grid-cidade { grid-template-columns: 1fr; }
}

/* ---- Tab intro (cabeçalho de cada aba) ---- */
#customware-root .tab-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
#customware-root .tab-intro h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
}
#customware-root .tab-intro p {
  margin: 0;
  font-size: 13px;
  color: var(--text-3);
}

/* ---- Abas de navegação do perfil ---- */
#customware-root .tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
#customware-root .tabs::-webkit-scrollbar { display: none; }
#customware-root .tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 180ms, background 180ms;
  font-family: inherit;
  position: relative;
}
#customware-root .tab:hover { color: var(--text-1); background: rgba(255,255,255,0.04); }
#customware-root .tab.active {
  color: var(--destaque);
  background: rgba(254,189,13,0.08);
  border-color: rgba(254,189,13,0.18);
}
#customware-root .tab .indicator {
  display: none;
}

/* ---- Linha de info (Segurança) ---- */
#customware-root .sec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
}
#customware-root .sec-row-title { font-size: 14px; font-weight: 600; color: var(--text-1); }
#customware-root .sec-row-sub   { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* ---- Campo Dunorte (read-only) ---- */
#customware-root .dn-field { display: flex; flex-direction: column; gap: 4px; }
#customware-root .dn-label { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; }
#customware-root .dn-value { font-size: 14px; font-weight: 500; color: var(--text-1); }
#customware-root .dn-mono  { font-family: 'Courier New', monospace; letter-spacing: 0.05em; }

/* ---- Dados Criativos — accordion ---- */
#customware-root .cd-list-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
  transition: border-color 180ms;
}
#customware-root .cd-list-item:hover { border-color: rgba(255,255,255,0.18); }
#customware-root .cd-list-item.active { border-color: var(--destaque); box-shadow: 0 0 0 3px rgba(254,189,13,0.08); }
#customware-root .cd-list-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  background: rgba(255,255,255,0.03);
}
#customware-root .cd-list-header:hover { background: rgba(255,255,255,0.05); }
#customware-root .cd-list-body {
  padding: 16px;
  border-top: 1px solid var(--border);
}
#customware-root .cd-list-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--destaque);
  color: var(--primaria);
}
#customware-root .cd-drag-handle {
  color: var(--text-3);
  cursor: grab;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}
#customware-root .cd-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
#customware-root .cd-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
}
#customware-root .cd-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--destaque);
  background: rgba(254,189,13,0.08);
  border: 1px solid rgba(254,189,13,0.20);
  border-radius: 8px;
  padding: 5px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 160ms;
}
#customware-root .cd-add-btn:hover { background: rgba(254,189,13,0.14); }
#customware-root .cd-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: 12px;
}

/* ---- Layout principal da área de conteúdo ---- */
#customware-root .cw-content-area {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

/* ---- Backdrop do drawer mobile ---- */
#customware-root .cw-mobile-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 99;
}

/* ---- Botão hamburger — visível apenas em mobile ---- */
#customware-root .cw-hamburger {
  display: none;
}
@media (max-width: 768px) {
  #customware-root .cw-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 10;
    width: 40px;
    height: 40px;
    margin: 12px 0 0 12px;
    background: rgba(8, 52, 76, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(247, 245, 238, 0.85);
    flex-shrink: 0;
    transition: background 160ms;
  }
  #customware-root .cw-hamburger:hover {
    background: rgba(8, 52, 76, 1);
  }
  /* Reduz padding do .page no mobile para não duplicar com o hamburger */
  #customware-root .page {
    padding-top: 12px;
    padding-left: 16px;
    padding-right: 16px;
  }
  #customware-root .profile-tab-card {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  #customware-root .page {
    padding-left: 12px;
    padding-right: 12px;
  }
  #customware-root .profile-tab-card {
    padding: 16px 14px;
  }
  #customware-root .editor-section h3 {
    font-size: 11px;
  }
}

/* ---- Grids de informações (Dados Dunorte) ---- */
#customware-root .dn-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
#customware-root .dn-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  #customware-root .dn-row-3,
  #customware-root .dn-row-2 { grid-template-columns: 1fr; }
}

/* ---- Erro de salvamento ---- */
#customware-root .tab-save-error {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  color: #FCA5A5;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 8px;
  margin-bottom: 12px;
}