/* Estilos da Área Administrativa - Layout Full-Width */

:root {
  --admin-sidebar-width: 260px;
  --admin-sidebar-collapsed-width: 70px;
  --admin-header-height: 64px;
  --admin-bg: #f7fafc;
  --admin-sidebar-bg: #1a202c;
  --admin-sidebar-text: #e2e8f0;
  --admin-sidebar-hover: #2d3748;
  --admin-border: #e2e8f0;
  --admin-text: #2d3748;
  --admin-text-light: #718096;
  --admin-primary: #667eea;
  --admin-primary-hover: #5568d3;
  --admin-success: #48bb78;
  --admin-danger: #f56565;
  --admin-warning: #ed8936;
}

/* Reset e Base */
.admin-body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--admin-bg);
  color: var(--admin-text, #2d3748);
  overflow-x: hidden;
}

/* Layout Principal */
.admin-main {
  margin-left: var(--admin-sidebar-width);
  min-height: 100vh;
  transition: margin-left 0.3s ease;
}

.admin-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--admin-sidebar-width);
  height: 100vh;
  background: var(--admin-sidebar-bg);
  color: var(--admin-sidebar-text);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: width 0.3s ease, transform 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Header do Sidebar */
.sidebar-header {
  padding: 1.5rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-header h2 {
  margin: 0 0 0.25rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
}

.sidebar-subtitle-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.sidebar-subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--admin-sidebar-text);
  opacity: 0.7;
}

.btn-go-to-site {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--admin-sidebar-text);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-go-to-site:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

/* Navegação do Sidebar */
.sidebar-nav {
  flex: 1;
  padding: 1rem 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  color: var(--admin-sidebar-text);
  text-decoration: none;
  transition: background 0.2s;
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background: var(--admin-sidebar-hover);
}

.nav-item.active {
  background: var(--admin-sidebar-hover);
  border-left-color: var(--admin-primary);
  color: white;
}

.nav-icon {
  font-size: 1.25rem;
  margin-right: 0.75rem;
  width: 24px;
  text-align: center;
}

.nav-text {
  font-weight: 500;
}

/* Seção de Configurações fixa acima da linha */
.sidebar-config-section {
  padding: 0.5rem 0;
  margin-top: auto;
}

.sidebar-config-section .nav-item {
  margin: 0;
}

/* Footer do Sidebar - linha divisória aqui */
.sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.user-info {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--admin-sidebar-text);
  opacity: 0.8;
  word-break: break-all;
}

.btn-logout {
  width: 100%;
  padding: 0.5rem;
  background: rgba(245, 101, 101, 0.2);
  color: var(--admin-danger);
  border: 1px solid var(--admin-danger);
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-logout:hover {
  background: var(--admin-danger);
  color: white;
}

/* Header Principal */
.admin-header {
  height: var(--admin-header-height);
  background: var(--admin-bg-secondary, white);
  border-bottom: 1px solid var(--admin-border);
  display: flex;
  align-items: center;
  padding: 0 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.sidebar-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-right: 1rem;
}

.sidebar-toggle span {
  width: 24px;
  height: 2px;
  background: var(--admin-text);
  transition: all 0.3s;
}

.page-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--admin-text, #2d3748);
}

/* Área de Conteúdo */
.admin-content {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.admin-section {
  display: none;
}

.admin-section.active {
  display: block;
}

.section-header {
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem 2rem;
  background: var(--admin-bg-secondary, white);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-header h2 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--admin-text, #2d3748);
}

.section-subtitle {
  margin: 0.5rem 0 0 0;
  font-size: 1rem;
  color: var(--admin-text-light, #718096);
  font-weight: 400;
}

/* Grid de Configurações */
.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
}

.config-card {
  background: var(--admin-bg-secondary, white);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.config-card h3 {
  margin: 0 0 1rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--admin-text, #2d3748);
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--admin-text, #2d3748);
  font-size: 0.875rem;
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  font-size: 0.9375rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  background: var(--admin-bg-secondary, white);
  color: var(--admin-text, #2d3748);
}

/* Garantir que o texto do input tenha cor escura quando há valor */
.input:not(:placeholder-shown),
.textarea:not(:placeholder-shown) {
  color: var(--admin-text, #2d3748);
  font-weight: 400;
}

/* Placeholder com cor mais clara */
.input::placeholder,
.textarea::placeholder {
  color: var(--admin-text-light, #a0aec0);
  opacity: 1;
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.textarea {
  resize: vertical;
  min-height: 80px;
}

/* Labels Container */
.labels-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.label-item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.label-item input {
  flex: 1;
}

.label-item .label-key {
  min-width: 100px;
  font-weight: 500;
  color: var(--admin-text-light, #718096);
  font-size: 0.875rem;
}

/* Radio Buttons de Tema */
.theme-radio-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.theme-radio-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.theme-radio-option:hover {
  background: var(--admin-bg);
  border-color: var(--admin-primary);
}

.theme-radio-option input[type="radio"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--admin-primary);
}

.theme-radio-option input[type="radio"]:checked + span {
  font-weight: 600;
  color: var(--admin-primary);
}

.theme-radio-option span {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--admin-text, #2d3748);
}

/* Botões */
.btn-save,
.btn-primary,
.btn-secondary,
.btn-danger {
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-save {
  background: var(--admin-primary);
  color: white;
}

.btn-save:hover {
  background: var(--admin-primary-hover);
}

.btn-primary {
  background: var(--admin-primary);
  color: white;
}

.btn-primary:hover {
  background: var(--admin-primary-hover);
}

.btn-secondary {
  background: var(--admin-border);
  color: var(--admin-text, #2d3748);
}

.btn-secondary:hover {
  background: #cbd5e0;
}

.btn-danger {
  background: var(--admin-danger);
  color: white;
}

.btn-danger:hover {
  background: #e53e3e;
}

/* Filtros */
.filters-bar {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.filters-bar .input,
.filters-bar .select {
  flex: 1;
  min-width: 200px;
}

/* Tabela de Produtos */
.table-container {
  background: var(--admin-bg-secondary, white);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  overflow-x: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.products-table {
  width: 100%;
  border-collapse: collapse;
}

.products-table thead {
  background: var(--admin-bg);
}

.products-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--admin-text, #2d3748);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--admin-border);
}

.products-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--admin-border);
  vertical-align: middle;
  color: var(--admin-text, #2d3748);
}

.products-table tbody tr:hover {
  background: var(--admin-bg);
}

.products-table tbody tr:last-child td {
  border-bottom: none;
}

.product-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

/* Estilos para container de destaques */
.highlights-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.highlight-item .input {
  flex: 1;
  margin-bottom: 0;
}

.highlight-item .btn-danger {
  flex-shrink: 0;
  padding: 0.5rem 0.75rem;
  min-width: auto;
  font-size: 1.25rem;
  line-height: 1;
  height: auto;
}

/* Estilos para tabela admin-table (FAQ e outras) */
.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table thead {
  background: var(--admin-bg);
}

.admin-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--admin-text, #2d3748);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--admin-border);
}

.admin-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--admin-border);
  vertical-align: middle;
  color: var(--admin-text, #2d3748);
}

.admin-table tbody tr:hover {
  background: var(--admin-bg);
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

/* Estilos específicos para tabela de FAQ - colunas mais espaçosas */
#faq-section .admin-table {
  table-layout: fixed;
}

#faq-section .admin-table th:first-child,
#faq-section .admin-table td:first-child {
  width: 50%;
  min-width: 300px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

#faq-section .admin-table th:nth-child(2),
#faq-section .admin-table td:nth-child(2) {
  width: 10%;
  min-width: 80px;
  text-align: center;
}

#faq-section .admin-table th:nth-child(3),
#faq-section .admin-table td:nth-child(3) {
  width: 15%;
  min-width: 100px;
  text-align: center;
}

#faq-section .admin-table th:nth-child(4),
#faq-section .admin-table td:nth-child(4) {
  width: 25%;
  min-width: 200px;
  text-align: left;
  padding-right: 1.5rem;
}

#faq-section .admin-table td:first-child {
  word-wrap: break-word;
  word-break: break-word;
  line-height: 1.5;
}

/* Estilos para Passos do Processo */
.process-step-item {
  background: var(--admin-bg-secondary, white);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.process-step-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}

.process-step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--admin-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.process-step-content {
  flex: 1;
  min-width: 0;
}

.process-step-content .input,
.process-step-content .textarea {
  width: 100%;
  margin-bottom: 0.5rem;
}

.process-step-actions {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-left: calc(40px + 1rem); /* Alinhar com o conteúdo (número + gap) */
}

.process-step-actions .input {
  width: 80px;
}

.process-step-actions label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-size: 0.875rem;
}

@media (max-width: 768px) {
  .process-step-header {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .process-step-actions {
    width: 100%;
    align-items: stretch;
  }
}

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}

.status-badge.active {
  background: #c6f6d5;
  color: #22543d;
}

.status-badge.inactive {
  background: #fed7d7;
  color: #c53030;
}

.table-actions {
  display: flex;
  gap: 0.5rem;
}

.table-actions button {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
}

.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: var(--admin-bg-secondary, white);
  border-radius: 12px;
  padding: 2rem;
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-content-large {
  max-width: 900px;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--admin-text-light, #718096);
  padding: 0.5rem;
  transition: color 0.2s;
}

.modal-close:hover {
  color: var(--admin-text, #2d3748);
}

.product-form {
  display: grid;
  gap: 1.5rem;
}

.product-form .form-group {
  margin-bottom: 0;
}

/* Loading Overlay */
.loading-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 3000;
  align-items: center;
  justify-content: center;
}

.loading-overlay.active {
  display: flex;
}

 .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--admin-border);
  border-top-color: var(--admin-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Grid de posts do Instagram no admin */
.instagram-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  max-height: 420px;
  overflow: auto;
}

.instagram-post-card {
  position: relative;
  border: 1px solid var(--admin-border, #e2e8f0);
  border-radius: 8px;
  padding: 0;
  background: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.instagram-post-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.instagram-post-meta {
  padding: 0.5rem 0.6rem 0.6rem;
  font-size: 0.75rem;
  color: var(--admin-text, #2d3748);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.instagram-post-meta p {
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.instagram-post-badge {
  align-self: flex-start;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  font-size: 0.7rem;
  background: #edf2ff;
  color: #4c51bf;
}

.instagram-post-check {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: rgba(15, 118, 110, 0.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.instagram-post-card.selected .instagram-post-check {
  opacity: 1;
  transform: scale(1);
}

.instagram-post-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.instagram-post-card.selected {
  border-color: #0f766e;
  box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.4);
}

/* Modal de Confirmação de Deleção */
.delete-modal-content {
  max-width: 480px;
  text-align: center;
}

.delete-modal-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

.delete-modal-title {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--admin-text, #2d3748);
}

.delete-modal-message {
  margin: 0 0 1.5rem 0;
  color: var(--admin-text-light, #718096);
  line-height: 1.6;
}

.delete-modal-message strong {
  color: var(--admin-danger);
  font-weight: 600;
}

.delete-confirm-input {
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.delete-confirm-input:focus {
  border-color: var(--admin-danger);
  box-shadow: 0 0 0 3px rgba(245, 101, 101, 0.2);
}

.delete-confirm-hint {
  display: block;
  margin-top: 0.5rem;
  color: var(--admin-text-light, #718096);
  font-size: 0.875rem;
}

.delete-confirm-hint.error {
  color: var(--admin-danger);
}

.delete-confirm-hint.success {
  color: var(--admin-success);
}

.delete-modal-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.delete-modal-actions button {
  flex: 1;
}

#deleteConfirmSubmit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.loading {
  text-align: center;
  padding: 2rem;
  color: var(--admin-text-light, #718096);
}

.no-image {
  color: var(--admin-text-light, #718096);
  font-size: 0.875rem;
  font-style: italic;
}

.admin-message {
  position: fixed;
  top: 80px;
  right: 2rem;
  z-index: 1500;
  min-width: 300px;
  max-width: 500px;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Upload de Imagens */
.image-upload-area {
  border: 2px dashed var(--admin-border);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  background: var(--admin-bg);
}

.image-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  min-height: 100px;
}

.image-preview-item {
  position: relative;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  overflow: hidden;
  background: white;
}

.image-preview-item img {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.image-preview-item button {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 1.25rem;
  line-height: 1;
  border-radius: 4px;
}

/* Mensagens de Feedback */
.message {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.message.success {
  background: #c6f6d5;
  color: #22543d;
}

.message.error {
  background: #fed7d7;
  color: #c53030;
}

.message.info {
  background: #bee3f8;
  color: #2c5282;
}

/* Responsive */
@media (max-width: 1024px) {
  .admin-main {
    margin-left: 0;
  }

  .admin-sidebar {
    transform: translateX(-100%);
  }

  .admin-sidebar.active {
    transform: translateX(0);
  }

  .sidebar-toggle {
    display: flex;
  }

  .config-grid {
    grid-template-columns: 1fr;
  }

  .admin-content {
    padding: 1rem;
  }
}

@media (max-width: 768px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.5rem;
  }
  
  .section-header h2 {
    width: 100%;
    margin-bottom: 1rem;
  }

  .filters-bar {
    flex-direction: column;
  }

  .filters-bar .input,
  .filters-bar .select {
    width: 100%;
  }

  .table-container {
    overflow-x: auto;
  }

  .products-table {
    min-width: 800px;
  }

  .modal-content {
    width: 95%;
    padding: 1.5rem;
  }
}

.no-image {
  color: var(--admin-text-light, #718096);
  font-size: 0.875rem;
  font-style: italic;
}

.admin-message {
  position: fixed;
  top: 80px;
  right: 2rem;
  z-index: 1500;
  min-width: 300px;
  max-width: 500px;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}


/* ============================================
   ESTILOS DA SEÇÃO DE PROGRESSO
   ============================================ */

/* Grid de Estatísticas */
.progress-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.progress-stat-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
  border-left: 4px solid var(--stat-color, #667eea);
}

.progress-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.progress-stat-icon {
  font-size: 2.5rem;
  line-height: 1;
}

.progress-stat-content {
  flex: 1;
}

.progress-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--admin-text, #2d3748);
  margin-bottom: 0.25rem;
}

.progress-stat-title {
  font-size: 0.875rem;
  color: var(--admin-text-light, #718096);
  font-weight: 500;
}

/* Títulos de Seção */
.progress-section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--admin-text, #2d3748);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--admin-border, #e2e8f0);
}

/* Timeline */
.progress-timeline-container {
  margin-bottom: 3rem;
}

.progress-timeline {
  position: relative;
  padding-left: 2rem;
}

.progress-timeline::before {
  content: '''';
  position: absolute;
  left: 0.75rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--admin-border, #e2e8f0);
}

.progress-timeline-item {
  position: relative;
  margin-bottom: 2rem;
  padding-left: 2rem;
}

.progress-timeline-item.is-last {
  margin-bottom: 0;
}

.progress-timeline-marker {
  position: absolute;
  left: -1.5rem;
  top: 0;
  width: 2.5rem;
  height: 2.5rem;
  background: white;
  border: 3px solid var(--admin-primary, #667eea);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.progress-timeline-number {
  font-weight: 700;
  color: var(--admin-primary, #667eea);
  font-size: 0.875rem;
}

.progress-timeline-content {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.progress-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.progress-timeline-header h4 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--admin-text, #2d3748);
}

.progress-timeline-period {
  font-size: 0.875rem;
  color: var(--admin-text-light, #718096);
  font-weight: 500;
  background: var(--admin-bg, #f7fafc);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
}

.progress-timeline-content p {
  margin: 0;
  color: var(--admin-text-light, #718096);
  line-height: 1.6;
}

/* Funcionalidades Prontas */
.progress-features-container {
  margin-bottom: 3rem;
}

.progress-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.progress-feature-category {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.progress-feature-category-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--admin-text, #2d3748);
  margin: 0 0 1rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--admin-border, #e2e8f0);
}

.progress-feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.progress-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #f0fdf4;
  border-radius: 8px;
  border-left: 3px solid var(--admin-success, #48bb78);
  transition: all 0.2s ease;
}

.progress-feature-item:hover {
  background: #dcfce7;
  transform: translateX(4px);
}

.progress-feature-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.progress-feature-name {
  flex: 1;
  color: var(--admin-text, #2d3748);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.progress-feature-check {
  font-size: 1.125rem;
  flex-shrink: 0;
}

/* Pendências */
.progress-pending-container {
  margin-bottom: 3rem;
}

.progress-pending-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.progress-pending-group {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.progress-pending-group-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--admin-border, #e2e8f0);
}

.progress-pending-group-title.priority-high {
  color: #dc2626;
}

.progress-pending-group-title.priority-medium {
  color: #d97706;
}

.progress-pending-group-title.priority-low {
  color: #2563eb;
}

.progress-pending-group-title.priority-paused {
  color: #6b7280;
}

.progress-pending-item {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  border-radius: 8px;
  border-left: 4px solid;
  transition: all 0.2s ease;
}

.progress-pending-item:last-child {
  margin-bottom: 0;
}

.progress-pending-item.priority-high {
  background: #fef2f2;
  border-left-color: #dc2626;
}

.progress-pending-item.priority-medium {
  background: #fffbeb;
  border-left-color: #d97706;
}

.progress-pending-item.priority-low {
  background: #eff6ff;
  border-left-color: #2563eb;
}

.progress-pending-item.priority-paused {
  background: #f9fafb;
  border-left-color: #6b7280;
}

.progress-pending-item:hover {
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.progress-pending-header h5 {
  margin: 0 0 0.75rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--admin-text, #2d3748);
}

.progress-pending-list-items {
  margin: 0;
  padding-left: 1.5rem;
  color: var(--admin-text-light, #718096);
}

.progress-pending-list-items li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.progress-pending-list-items li:last-child {
  margin-bottom: 0;
}

.progress-pending-reason {
  margin: 0.5rem 0 0 0;
  color: var(--admin-text-light, #718096);
  font-style: italic;
  font-size: 0.875rem;
}

/* Histórico */
.progress-history-container {
  margin-bottom: 2rem;
}

.progress-history-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.progress-history-item {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  border-left: 4px solid var(--admin-primary, #667eea);
}

.progress-history-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.progress-history-item.is-first {
  border-left-color: var(--admin-success, #48bb78);
}

.progress-history-item.is-last {
  border-left-color: var(--admin-warning, #ed8936);
}

.progress-history-date {
  flex-shrink: 0;
  width: 140px;
  font-weight: 600;
  color: var(--admin-primary, #667eea);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.progress-history-content {
  flex: 1;
}

.progress-history-content h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--admin-text, #2d3748);
}

.progress-history-content p {
  margin: 0;
  color: var(--admin-text-light, #718096);
  line-height: 1.6;
}

/* Responsividade */
@media (max-width: 768px) {
  .progress-stats-grid {
    grid-template-columns: 1fr;
  }

  .progress-features-grid {
    grid-template-columns: 1fr;
  }

  .progress-timeline {
    padding-left: 1.5rem;
  }

  .progress-timeline-marker {
    left: -1.25rem;
    width: 2rem;
    height: 2rem;
  }

  .progress-history-item {
    flex-direction: column;
    gap: 0.75rem;
  }

  .progress-history-date {
    width: 100%;
  }

  .progress-timeline-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================
   ESTILOS DO UPLOAD EM LOTE
   ============================================ */

.upload-lote-container {
  max-width: 1200px;
}

/* Área de Dropzone */
.upload-lote-dropzone {
  border: 3px dashed var(--admin-border, #e2e8f0);
  border-radius: 12px;
  padding: 3rem 2rem;
  text-align: center;
  background: var(--admin-bg, #f7fafc);
  transition: all 0.3s ease;
  cursor: pointer;
  margin-bottom: 2rem;
}

.upload-lote-dropzone:hover {
  border-color: var(--admin-primary, #667eea);
  background: rgba(102, 126, 234, 0.05);
}

.upload-lote-dropzone.is-dragging {
  border-color: var(--admin-primary, #667eea);
  background: rgba(102, 126, 234, 0.1);
  transform: scale(1.02);
}

.upload-lote-dropzone-content {
  pointer-events: none;
}

.upload-lote-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.upload-lote-dropzone h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  color: var(--admin-text, #2d3748);
}

.upload-lote-dropzone p {
  margin: 0.5rem 0;
  color: var(--admin-text-light, #718096);
}

.upload-lote-hint {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--admin-text-light, #718096);
}

/* Preview Container */
.upload-lote-preview-container {
  margin-bottom: 2rem;
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.upload-lote-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--admin-border, #e2e8f0);
}

.upload-lote-preview-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--admin-text, #2d3748);
}

/* Grid de Preview */
.upload-lote-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

.upload-lote-preview-item {
  position: relative;
  background: white;
  border: 2px solid var(--admin-border, #e2e8f0);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.upload-lote-preview-item:hover {
  border-color: var(--admin-primary, #667eea);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.upload-lote-preview-item.status-success {
  border-color: var(--admin-success, #48bb78);
}

.upload-lote-preview-item.status-error {
  border-color: var(--admin-danger, #f56565);
}

.upload-lote-preview-item.status-uploading {
  border-color: var(--admin-primary, #667eea);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.upload-lote-preview-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 100%; /* Aspect ratio 1:1 */
  background: var(--admin-bg, #f7fafc);
  overflow: hidden;
}

.upload-lote-preview-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-lote-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.upload-lote-preview-item:hover .upload-lote-preview-overlay {
  opacity: 1;
}

.upload-lote-preview-remove {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--admin-danger, #f56565);
  color: white;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.upload-lote-preview-remove:hover {
  background: #e53e3e;
  transform: scale(1.1);
}

.upload-lote-preview-status {
  font-size: 2rem;
}

.upload-lote-preview-info {
  padding: 0.75rem;
}

.upload-lote-preview-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--admin-text, #2d3748);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}

.upload-lote-preview-size {
  font-size: 0.75rem;
  color: var(--admin-text-light, #718096);
}

.upload-lote-preview-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--admin-danger, #f56565);
  font-weight: 600;
}

.upload-lote-preview-error-text {
  font-size: 0.75rem;
  color: var(--admin-danger, #f56565);
  margin-top: 0.25rem;
}

/* Seletor de Modo */
.upload-lote-association-container {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 2rem;
}

.upload-lote-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--admin-text, #2d3748);
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--admin-border, #e2e8f0);
}

.upload-lote-mode-selector {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.upload-lote-radio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 2px solid var(--admin-border, #e2e8f0);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.upload-lote-radio:hover {
  border-color: var(--admin-primary, #667eea);
  background: rgba(102, 126, 234, 0.05);
}

.upload-lote-radio input[type=" radio\] {
 width: 1.25rem;
 height: 1.25rem;
 cursor: pointer;
}

.upload-lote-radio input[type=\radio\]:checked + span {
 font-weight: 600;
 color: var(--admin-primary, #667eea);
}

.upload-lote-radio:has(input:checked) {
 border-color: var(--admin-primary, #667eea);
 background: rgba(102, 126, 234, 0.1);
}

.upload-lote-mode-panel {
 margin-top: 1.5rem;
 padding: 1.5rem;
 background: var(--admin-bg, #f7fafc);
 border-radius: 8px;
}

/* Múltiplos Produtos */
.upload-lote-multiple-instructions {
 margin-bottom: 1.5rem;
 padding: 1rem;
 background: rgba(102, 126, 234, 0.1);
 border-radius: 8px;
 color: var(--admin-text, #2d3748);
}

.upload-lote-multiple-groups {
 display: flex;
 flex-direction: column;
 gap: 1.5rem;
 margin-bottom: 1rem;
}

.upload-lote-multiple-group {
 background: white;
 padding: 1.5rem;
 border-radius: 8px;
 border: 2px solid var(--admin-border, #e2e8f0);
}

.upload-lote-group-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 1rem;
 padding-bottom: 0.75rem;
 border-bottom: 2px solid var(--admin-border, #e2e8f0);
}

.upload-lote-group-header h4 {
 margin: 0;
 font-size: 1.125rem;
 color: var(--admin-text, #2d3748);
}

.upload-lote-group-remove {
 padding: 0.375rem 0.75rem;
 background: var(--admin-danger, #f56565);
 color: white;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 font-size: 0.875rem;
 transition: all 0.2s ease;
}

.upload-lote-group-remove:hover {
 background: #e53e3e;
}

.upload-lote-group-images {
 margin-top: 1rem;
}

.upload-lote-group-images-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
 gap: 0.75rem;
 margin-top: 0.75rem;
}

.upload-lote-group-image-item {
 position: relative;
 border: 2px solid var(--admin-border, #e2e8f0);
 border-radius: 8px;
 overflow: hidden;
 cursor: pointer;
 transition: all 0.2s ease;
}

.upload-lote-group-image-item:hover {
 border-color: var(--admin-primary, #667eea);
}

.upload-lote-group-image-item:has(input:checked) {
 border-color: var(--admin-primary, #667eea);
 box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.upload-lote-group-image-item input[type=\checkbox\] {
 position: absolute;
 top: 0.5rem;
 left: 0.5rem;
 width: 1.25rem;
 height: 1.25rem;
 z-index: 1;
 cursor: pointer;
}

.upload-lote-group-image-item img {
 width: 100%;
 height: 100px;
 object-fit: cover;
 display: block;
}

.upload-lote-group-image-name {
 display: block;
 padding: 0.5rem;
 font-size: 0.75rem;
 color: var(--admin-text, #2d3748);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

/* Barra de Progresso */
.upload-lote-progress-container {
 background: white;
 padding: 1.5rem;
 border-radius: 12px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 margin-bottom: 2rem;
}

.upload-lote-progress-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 1rem;
}

.upload-lote-progress-text {
 font-weight: 600;
 color: var(--admin-text, #2d3748);
}

.upload-lote-cancel-link {
 color: var(--admin-danger, #f56565);
 cursor: pointer;
 text-decoration: underline;
 font-size: 0.875rem;
}

.upload-lote-cancel-link:hover {
 color: #e53e3e;
}

.upload-lote-progress-bar {
 width: 100%;
 height: 8px;
 background: var(--admin-bg, #f7fafc);
 border-radius: 4px;
 overflow: hidden;
 margin-bottom: 0.75rem;
}

.upload-lote-progress-fill {
 height: 100%;
 background: var(--admin-primary, #667eea);
 width: 0%;
 transition: width 0.3s ease;
 border-radius: 4px;
}

.upload-lote-progress-details {
 font-size: 0.875rem;
 color: var(--admin-text-light, #718096);
}

/* Relatório */
.upload-lote-report-container {
 background: white;
 padding: 1.5rem;
 border-radius: 12px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 margin-bottom: 2rem;
}

.upload-lote-report-summary {
 display: flex;
 gap: 2rem;
 margin-bottom: 1.5rem;
 flex-wrap: wrap;
}

.upload-lote-report-summary-item {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 padding: 1rem;
 border-radius: 8px;
 background: var(--admin-bg, #f7fafc);
}

.upload-lote-report-summary-item.success {
 background: #f0fdf4;
 border-left: 4px solid var(--admin-success, #48bb78);
}

.upload-lote-report-summary-item.error {
 background: #fef2f2;
 border-left: 4px solid var(--admin-danger, #f56565);
}

.report-icon {
 font-size: 1.5rem;
}

.report-label {
 font-weight: 600;
 color: var(--admin-text, #2d3748);
}

.report-value {
 font-weight: 700;
 color: var(--admin-text, #2d3748);
}

.upload-lote-report-details {
 margin-bottom: 1.5rem;
}

.upload-lote-report-details h4 {
 margin: 0 0 0.75rem 0;
 font-size: 1.125rem;
 color: var(--admin-text, #2d3748);
}

.upload-lote-report-error-list {
 margin: 0;
 padding-left: 1.5rem;
 color: var(--admin-text-light, #718096);
}

.upload-lote-report-error-list li {
 margin-bottom: 0.5rem;
 line-height: 1.6;
}

.upload-lote-report-actions {
 display: flex;
 gap: 1rem;
 flex-wrap: wrap;
}

/* Ações */
.upload-lote-actions {
 text-align: center;
 margin-top: 2rem;
}

/* Responsividade */
@media (max-width: 768px) {
 .upload-lote-preview-grid {
 grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
 }

 .upload-lote-group-images-grid {
 grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
 }

 .upload-lote-mode-selector {
 gap: 0.75rem;
 }

 .upload-lote-report-summary {
 flex-direction: column;
 gap: 1rem;
 }

 .upload-lote-report-actions {
 flex-direction: column;
 }

 .upload-lote-report-actions button {
 width: 100%;
 }
}