:root{
    --fs-sm: clamp(0.85rem, 1.1vw, 0.95rem);
    --fs-base: clamp(0.95rem, 1.2vw, 1rem);
    --fs-lg: clamp(1.05rem, 1.6vw, 1.2rem);
    --rad: 8px;
    --gap-1: clamp(.5rem, 1.5vw, .75rem);
    --gap-2: clamp(.75rem, 2vw, 1rem);
    --gap-3: clamp(1rem, 3vw, 1.5rem);
  }
  
  /* =========================================================
     ESTILOS GERAIS
  ========================================================= */
  .card-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    margin-bottom: 1rem;
  }
  .empty-state i { color: #ced4da; }
  .helper-text {
    font-size: .85rem;
    color: var(--light-text);
    margin-top: .25rem;
  }
  
  /* =========================================================
     FILTROS DE BUSCA
  ========================================================= */
  .filter-grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: var(--gap-3);
  }
  .filter-grid .form-group {
    display: flex; flex-direction: column; gap: .5rem;
  }
  .filter-grid .form-group label {
    font-weight: 500; font-size: .95rem; color: var(--dark-text);
  }
  .filter-grid input[type="text"],
  .filter-grid select {
    width: 100%;
    padding: .75rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: var(--fs-base);
    background-color: #fff;
    transition: border-color .2s, box-shadow .2s;
  }
  .filter-grid select{
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat:no-repeat; background-position:right .75rem center;
    background-size:16px 12px; padding-right:2.5rem;
  }
  .filter-grid .search-input-container{ position: relative; }
  .filter-grid .search-input-container .fa-search{
    position:absolute; left:1rem; top:50%; transform:translateY(-50%);
    color:#6c757d; font-size:.9rem;
  }
  .filter-grid .search-input-container input{ padding-left:2.8rem; }
  
  /* ===== Breakpoints filtros ===== */
  @media (max-width: 768px){
    .filter-grid{
      grid-template-columns: 1fr; /* empilha */
      gap: var(--gap-2);
    }
  }
  
  /* =========================================================
     MODAL DE CRIAÇÃO DE CAMPANHA
  ========================================================= */
  #create-campaign-modal .modal-content{
    max-width: min(800px, 96vw) !important;
  }
  #create-campaign-modal .form-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--gap-3);
    align-items: start;
    margin-bottom: 1rem;
  }
  @media (max-width: 768px){
    #create-campaign-modal .form-grid{
      grid-template-columns: 1fr; /* 1 col no mobile */
      gap: var(--gap-2);
    }
  }
  
  #create-campaign-modal .form-group{ display:flex; flex-direction:column; gap:.5rem; }
  #create-campaign-modal .form-group label{ font-weight:500; color:var(--dark-text); }
  #create-campaign-modal input[type="text"],
  #create-campaign-modal input[type="datetime-local"],
  #create-campaign-modal select,
  #create-campaign-modal textarea{
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    background-color:var(--white);
    border:1px solid var(--border-color);
    border-radius:6px;
    padding:.75rem;
    font-size:var(--fs-base);
    width:100%;
    font-family:'Poppins', sans-serif;
    transition:border-color .2s, box-shadow .2s;
  }
  #create-campaign-modal select{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat:no-repeat; background-position:right .75rem center;
    background-size:16px 12px; padding-right:2.5rem;
  }
  #create-campaign-modal input:focus,
  #create-campaign-modal select:focus,
  #create-campaign-modal textarea:focus{
    outline:none; border-color:var(--primary-blue);
    box-shadow:0 0 0 3px rgba(26,44,78,.1);
  }
  #create-campaign-modal .modal-footer{ justify-content:flex-end; }
  
  /* Componentes */
  .checkbox-list-container{
    border:1px solid var(--border-color);
    border-radius:6px; padding:1rem; max-height: 180px;
    overflow:auto; display:flex; flex-direction:column; gap:.75rem;
  }
  .checkbox-item{ display:flex; align-items:center; gap:.75rem; }
  .checkbox-item input[type="checkbox"]{ width:1rem; height:1rem; margin:0; }
  .checkbox-item label{ font-weight:400; white-space:nowrap; }
  
  #selected-article-container{ margin-top:.5rem; }
  .selected-article-pill{
    display:inline-flex; align-items:center; gap:.75rem;
    background-color:#eef2f9; color:var(--secondary-blue);
    padding:.5rem 1rem; border-radius:6px; font-weight:500;
    border:1px solid var(--border-color);
  }
  .remove-article-btn{ font-size:1.2rem; font-weight:bold; cursor:pointer; line-height:1; }
  
  .multi-select-container{ position:relative; }
  .selected-pills-container{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.5rem; }
  .pill{
    display:inline-flex; align-items:center; gap:.5rem;
    background-color:#e0e7f1; color:var(--secondary-blue);
    padding:.25rem .75rem; border-radius:15px; font-size:.9rem; font-weight:500;
  }
  .remove-pill-btn{ cursor:pointer; font-weight:bold; }
  
  .search-results-container{
    position:absolute; width:100%; background:var(--white);
    border:1px solid var(--border-color); border-top:none; border-radius:0 0 6px 6px;
    max-height:220px; overflow:auto; z-index:10;
    box-shadow:0 4px 6px rgba(0,0,0,.1);
  }
  .search-result-item{ padding:.75rem 1rem; cursor:pointer; }
  .search-result-item:hover{ background:#f8f9fa; }
  
  /* =========================================================
     LISTA DE CAMPANHAS
  ========================================================= */
  .campaign-list-header,
  .campaign-item{
    display:grid;
    grid-template-columns: 3fr 1fr 1fr 1fr; /* Nome | Status | Enviados | Ações */
    align-items:center;
    padding: 1rem 1.5rem;
    gap: var(--gap-3);
    border-bottom:1px solid var(--border-color);
  }
  .campaign-list-header{
    border-bottom-width:2px;
    color:var(--light-text);
    font-weight:600;
    font-size:.95rem;
    padding-top:0;
  }
  .campaign-item:last-child{ border-bottom:none; }
  
  .campaign-name{ font-weight:600; color:var(--dark-text); }
  .campaign-stats{ font-size:.9rem; color:var(--light-text); white-space:nowrap; }
  .campaign-stats strong{ color:var(--dark-text); }
  .campaign-actions{ text-align:right; }
  
  /* Status tags */
  .campaign-status .status-tag{
    padding:.3rem .8rem; border-radius:15px; font-size:.8rem; font-weight:600; white-space:nowrap;
  }
  .status-draft{ background:#e9ecef; color:#495057; }
  .status-scheduled{ background:#d1ecf1; color:#0c5460; }
  .status-sent, .status-completed{ background:#d4edda; color:#155724; }
  .status-sending{ background:#fff3cd; color:#856404; }
  .status-canceled{ background:#f8d7da; color:#721c24; }
  
  /* ===== Breakpoints lista ===== */
  @media (max-width: 992px){
    .campaign-list-header,
    .campaign-item{
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: var(--gap-2);
    }
  }
  @media (max-width: 768px){
    /* Empilha: Nome + (Status/Enviados/Ações) em 2 linhas */
    .campaign-list-header{
      display:none; /* some o header para mobile */
    }
    .campaign-item{
      grid-template-columns: 1fr;
      gap: .5rem;
      padding: 1rem;
    }
    .campaign-name{ order: 1; }
    .campaign-status{ order: 2; }
    .campaign-stats{ order: 3; }
    .campaign-actions{
      order: 4; text-align: left; display:flex; flex-wrap:wrap; gap:.5rem;
    }
  }
  
  /* =========================================================
     MODAL DE ANÁLISE (GRÁFICO)
  ========================================================= */
  #analytics-modal .modal-content{
    max-width: min(800px, 96vw);
    height: auto;
  }
  #analytics-body .analytics-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items:center;
  }
  #analytics-body .chart-container{
    max-width: 320px; margin: 0 auto;
  }
  #analytics-body .stats-container .stat-item{ margin-bottom:1rem; }
  #analytics-body .stats-container .stat-item strong{
    font-size:.9rem; color:var(--light-text); display:block; margin-bottom:.25rem;
  }
  #analytics-body .stats-container .stat-item span{
    font-size:1.2rem; font-weight:600; color:var(--dark-text);
  }
  #analytics-body .stat-group{ margin-top:1.5rem; }
  #analytics-body .stat-group h3{
    font-size:.9rem; font-weight:600; color:var(--light-text); margin-bottom:.5rem;
  }
  #analytics-body .stat-group p{ font-size:1rem; color:var(--dark-text); }
  #analytics-body ul{
    list-style:none; padding:0; max-height:140px; overflow:auto;
    background:#f8f9fa; border-radius:6px; padding:.5rem;
  }
  #analytics-body li{ padding:.5rem; }
  
  @media (max-width: 768px){
    #analytics-body .analytics-grid{
      grid-template-columns: 1fr; /* 1 coluna no mobile */
      gap: 1.25rem;
    }
    #analytics-body .chart-container{ max-width: 100%; }
  }
  
  /* Link de visualização de PDF */
  .view-pdf-link{
    color:#c0392b; text-decoration:none; margin:0 10px; font-size:1.1rem;
  }
  .view-pdf-link:hover{ opacity:.7; }
  
  /* =========================================================
     PREVIEW DE EMAIL
  ========================================================= */
  .preview-controls-container{
    display:flex; flex-wrap:wrap; gap:20px;
    margin-bottom:10px; background:#f8f9fa; padding:10px;
    border-radius:6px; align-items:center;
  }
  .preview-selector-item{
    display:flex; align-items:center; gap:8px; font-size:.9rem; min-width: 200px;
  }
  .preview-selector-item label{ font-weight:500; white-space:nowrap; }
  #preview-company-select, #preview-contact-select{
    padding:4px 8px; border-radius:4px; border:1px solid #ddd; background:#fff; flex-grow:1;
  }
  
  .email-preview{
    margin-top:.75rem; border:1px solid var(--border-color);
    border-radius:8px; padding:12px; background:#fff;
    max-height: 45dvh; overflow:auto; white-space:normal;
  }
  .email-preview .email-footer img{
    max-width:100%; height:auto; display:block; margin-top:12px;
  }
  
  /* =========================================================
     AJUSTES DE VIEWPORT & ACESSIBILIDADE
  ========================================================= */

  .modal-overlay{
    max-height: 100dvh;
  }
  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; }
  }