/*
  Viral Studio - Nueva Implementación
  ====================================
  Siguiendo CSS_ARCHITECTURE_GUIDE.md
  SOLO usa variables var(--ax-*) - NO hardcodear valores
*/

/* ========================================
   0. FIX PARA STICKY (main tiene overflow-y: auto que rompe sticky)
   ======================================== */

/* El sticky solo funciona si el contenedor padre NO tiene overflow */
body:has(.header--sticky) main {
  overflow-y: visible !important;
}

/* ========================================
   1. HEADER STICKY
   ======================================== */

.header--sticky {
  position: sticky !important;  /* Override shared-header.css static */
  top: 0;
  z-index: 100;
  background: var(--ax-color-white, #ffffff) !important;
  /* Solo sombra inferior para separar del contenido */
  box-shadow: 0 1px 0 0 var(--ax-color-border, #e2e8f0);
}

/* ========================================
   2. FILTROS STICKY (debajo del header)
   ======================================== */

.filters-bar {
  display: flex;
  align-items: center;
  gap: var(--ax-space-6, 1.5rem);
  padding: var(--ax-space-4, 1rem) 0;
  margin-bottom: var(--ax-space-6, 1.5rem);
  flex-wrap: wrap;
  position: sticky;
  /* Altura aproximada del header: 48px (top) + 30px (h1) + 8px (margin) + 27px (p) + 32px (bottom) ≈ 145px */
  top: 145px;
  z-index: 99;
  background: var(--ax-color-white, #ffffff);
  /* Solo borde inferior */
  border-bottom: 1px solid var(--ax-color-border, #e2e8f0);
}

.filters-group {
  display: flex;
  align-items: center;
  gap: var(--ax-space-3, 0.75rem);
}

.filters-group--end {
  margin-left: auto;
}

.filter-label {
  font-size: var(--ax-font-size-sm, 0.875rem);
  font-weight: var(--ax-font-weight-medium, 500);
  color: var(--ax-color-gray-700, #374151);
  margin: 0;
}

.filter-pills {
  display: flex;
  gap: var(--ax-space-2, 0.5rem);
  flex-wrap: wrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-space-2, 0.5rem);
  padding: var(--ax-space-2, 0.5rem) var(--ax-space-3, 0.75rem);
  border: 1px solid var(--ax-color-gray-300, #d1d5db);
  border-radius: var(--ax-radius-full, 9999px);
  background: var(--ax-color-white, #ffffff);
  color: var(--ax-color-gray-700, #374151);
  font-size: var(--ax-font-size-sm, 0.875rem);
  font-weight: var(--ax-font-weight-medium, 500);
  cursor: pointer;
  transition: all 150ms ease;
}

.pill:hover {
  background: var(--ax-color-gray-50, #f9fafb);
  border-color: var(--ax-color-gray-400, #9ca3af);
}

.pill--active {
  background: var(--ax-color-primary, #3b82f6);
  color: var(--ax-color-white, #ffffff);
  border-color: var(--ax-color-primary, #3b82f6);
}

.pill--active:hover {
  background: var(--ax-color-primary-600, #2563eb);
  border-color: var(--ax-color-primary-600, #2563eb);
}

/* ========================================
   3. ESTADO VACÍO
   ======================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ax-space-12, 3rem) var(--ax-space-6, 1.5rem);
  text-align: center;
  min-height: 400px;
}

.empty-state__icon {
  margin-bottom: var(--ax-space-6, 1.5rem);
  color: var(--ax-color-gray-400, #9ca3af);
}

.empty-state__title {
  font-size: var(--ax-font-size-xl, 1.5rem);
  font-weight: var(--ax-font-weight-bold, 700);
  color: var(--ax-color-gray-900, #111827);
  margin: 0 0 var(--ax-space-3, 0.75rem);
}

.empty-state__description {
  font-size: var(--ax-font-size-base, 1rem);
  color: var(--ax-color-gray-600, #4b5563);
  margin: 0 0 var(--ax-space-6, 1.5rem);
  max-width: 500px;
}

/* ========================================
   4. GRID DE RESULTADOS
   ======================================== */

.results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 videos por fila */
  gap: var(--ax-space-6, 1.5rem);
  margin-bottom: var(--ax-space-12, 3rem);
}

/* ========================================
   5. CARD DE CONTENIDO VIRAL
   ======================================== */

.viral-card {
  background: var(--ax-color-white, #ffffff);
  border: 1px solid var(--ax-color-border, #e2e8f0);
  border-radius: var(--ax-radius-lg, 0.5rem);
  overflow: hidden;
  transition: all 200ms ease;
  display: flex;
  flex-direction: column;
}

.viral-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--ax-color-gray-400, #9ca3af);
}

/* Thumbnail */
.viral-card__thumbnail {
  position: relative;
  width: 100%;
  padding-top: 177.78%; /* 9:16 aspect ratio (vertical TikTok style) */
  background: var(--ax-color-gray-100, #f3f4f6);
  overflow: hidden;
}

/* Checkbox de selección en thumbnail */
.viral-card__select {
  position: absolute;
  top: var(--ax-space-3, 0.75rem);
  right: var(--ax-space-3, 0.75rem);
  width: 24px;
  height: 24px;
  cursor: pointer;
  z-index: 10;
  accent-color: var(--ax-color-primary, #3b82f6);
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--ax-radius-sm, 0.25rem);
}

/* Card seleccionada */
.viral-card--selected {
  border-color: var(--ax-color-primary, #3b82f6);
  box-shadow: 0 0 0 2px var(--ax-color-primary-200, #bfdbfe);
}

.viral-card__thumbnail img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.viral-card__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.viral-card__thumbnail-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ax-color-gray-400, #9ca3af);
}

/* Badge de fuente (TikTok/Facebook) */
.viral-card__source-badge {
  position: absolute;
  top: var(--ax-space-3, 0.75rem);
  left: var(--ax-space-3, 0.75rem);
  display: inline-flex;
  align-items: center;
  gap: var(--ax-space-1, 0.25rem);
  padding: var(--ax-space-1, 0.25rem) var(--ax-space-2, 0.5rem);
  background: rgba(0, 0, 0, 0.75);
  color: var(--ax-color-white, #ffffff);
  border-radius: var(--ax-radius-md, 0.375rem);
  font-size: var(--ax-font-size-xs, 0.75rem);
  font-weight: var(--ax-font-weight-semibold, 600);
  backdrop-filter: blur(4px);
}

/* Badge de viralidad */
.viral-card__virality-badge {
  position: absolute;
  top: var(--ax-space-3, 0.75rem);
  left: var(--ax-space-3, 0.75rem);
  padding: var(--ax-space-1, 0.25rem) var(--ax-space-2, 0.5rem);
  border-radius: var(--ax-radius-md, 0.375rem);
  font-size: var(--ax-font-size-xs, 0.75rem);
  font-weight: var(--ax-font-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.viral-card__virality-badge--very-viral {
  background: var(--ax-color-danger, #ef4444);
  color: var(--ax-color-white, #ffffff);
}

.viral-card__virality-badge--viral {
  background: var(--ax-color-warning, #f59e0b);
  color: var(--ax-color-white, #ffffff);
}

.viral-card__virality-badge--normal {
  background: var(--ax-color-gray-500, #6b7280);
  color: var(--ax-color-white, #ffffff);
}

/* Contenido de la card */
.viral-card__content {
  padding: var(--ax-space-4, 1rem);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.viral-card__title {
  font-size: var(--ax-font-size-base, 1rem);
  font-weight: var(--ax-font-weight-semibold, 600);
  color: var(--ax-color-gray-900, #111827);
  margin: 0 0 var(--ax-space-2, 0.5rem);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

/* ✅ STATUS BADGES (debajo del título) */
.viral-card__status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-space-2, 0.5rem);
  margin-top: var(--ax-space-2, 0.5rem);
  margin-bottom: var(--ax-space-3, 0.75rem);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-space-1, 0.25rem);
  padding: var(--ax-space-1, 0.25rem) var(--ax-space-2, 0.5rem);
  border-radius: var(--ax-border-radius-full, 9999px);
  font-size: var(--ax-font-size-xs, 0.75rem);
  font-weight: var(--ax-font-weight-medium, 500);
  line-height: 1;
  transition: all 0.2s ease;
}

.status-badge i {
  width: 14px;
  height: 14px;
}

/* Badge: Transcribed (Verde) */
.status-badge--transcribed {
  background: #d1fae5;
  color: #065f46;
}

/* Badge: Adapted (Azul) */
.status-badge--adapted {
  background: #dbeafe;
  color: #1e40af;
}

/* Badge: Avatar Copied (Naranja) */
.status-badge--avatar-copied {
  background: #fed7aa;
  color: #9a3412;
}

/* Badge: In Studio (Púrpura) */
.status-badge--in-studio {
  background: #ede9fe;
  color: #5b21b6;
}

/* Badge: Image Adapted (Teal) */
.status-badge--image-adapted {
  background: #ccfbf1;
  color: #0f766e;
}

.viral-card__description {
  font-size: var(--ax-font-size-sm, 0.875rem);
  color: var(--ax-color-gray-600, #4b5563);
  margin: 0 0 var(--ax-space-4, 1rem);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  flex: 1;
}

/* Métricas */
.viral-card__metrics {
  display: flex;
  gap: var(--ax-space-4, 1rem);
  margin-bottom: var(--ax-space-4, 1rem);
  padding-top: var(--ax-space-3, 0.75rem);
  border-top: 1px solid var(--ax-color-gray-200, #e5e7eb);
}

.viral-card__metric {
  display: flex;
  align-items: center;
  gap: var(--ax-space-1, 0.25rem);
  font-size: var(--ax-font-size-xs, 0.75rem);
  color: var(--ax-color-gray-600, #4b5563);
}

.viral-card__metric-icon {
  color: var(--ax-color-gray-400, #9ca3af);
}

.viral-card__metric-value {
  font-weight: var(--ax-font-weight-semibold, 600);
  color: var(--ax-color-gray-900, #111827);
}

/* Acciones */
.viral-card__actions {
  display: flex;
  gap: var(--ax-space-2, 0.5rem);
}

.viral-card__actions .btn {
  flex: 1;
}

/* Disabled button styles - for image ads without video */
.viral-card__actions .btn:disabled,
.viral-card__actions .btn[disabled] {
  background: var(--ax-color-gray-300, #d1d5db);
  border-color: var(--ax-color-gray-300, #d1d5db);
  color: var(--ax-color-gray-500, #6b7280);
  cursor: not-allowed;
  opacity: 0.6;
}

.viral-card__actions .btn:disabled:hover,
.viral-card__actions .btn[disabled]:hover {
  background: var(--ax-color-gray-300, #d1d5db);
  border-color: var(--ax-color-gray-300, #d1d5db);
  transform: none;
  box-shadow: none;
}

/* ========================================
   6. ESTADO DE CARGA
   ======================================== */

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ax-space-12, 3rem);
  min-height: 400px;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--ax-color-gray-200, #e5e7eb);
  border-top-color: var(--ax-color-primary, #3b82f6);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--ax-space-4, 1rem);
}

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

.loading-text {
  font-size: var(--ax-font-size-base, 1rem);
  color: var(--ax-color-gray-600, #4b5563);
  margin: 0;
}

/* ========================================
   7. MODAL DE BÚSQUEDA
   ======================================== */

/* Modal container - JavaScript maneja el display */
.modal {
  /* Display manejado por JS inline styles */
  /* ✅ Position relative to main content area, not full viewport */
  position: fixed;
  top: 0;
  left: 280px; /* ✅ Offset by sidebar width */
  right: 0;
  bottom: 0;
  width: calc(100vw - 280px); /* ✅ Account for sidebar */
  height: 100vh;
}

.modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  cursor: pointer;
}

.modal__content {
  position: relative;
  background: white;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  width: 90%;
  max-width: 550px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Modal Header */
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ax-space-6, 1.5rem);
  border-bottom: 1px solid var(--ax-color-border, #e2e8f0);
  /* ✅ Prevent header from growing too tall */
  min-height: 72px;
  max-height: 100px;
}

.modal__title-wrapper {
  display: flex;
  align-items: center;
  gap: var(--ax-space-3, 0.75rem);
}

.modal__title {
  font-size: var(--ax-font-size-base, 1rem); /* ✅ Smaller title font */
  font-weight: var(--ax-font-weight-semibold, 600); /* ✅ Less bold */
  color: var(--ax-color-gray-900, #111827);
  margin: 0;
  /* ✅ Truncate long titles to avoid covering content */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--ax-color-gray-500, #6b7280);
  cursor: pointer;
  border-radius: var(--ax-radius-md, 0.375rem);
  transition: all 150ms ease;
  flex-shrink: 0; /* ✅ Prevent close button from disappearing */
  z-index: 10; /* ✅ Ensure it's above other content */
}

.modal__close:hover {
  background: var(--ax-color-gray-100, #f3f4f6);
  color: var(--ax-color-gray-700, #374151);
}

/* Modal Body */
.modal__body {
  padding: var(--ax-space-6, 1.5rem);
  overflow-y: auto;
  flex: 1;
}

.modal__field {
  margin-bottom: var(--ax-space-5, 1.25rem);
}

.modal__field:last-child {
  margin-bottom: 0;
}

.modal__label {
  display: block;
  font-size: var(--ax-font-size-sm, 0.875rem);
  font-weight: var(--ax-font-weight-semibold, 600);
  color: var(--ax-color-gray-700, #374151);
  margin-bottom: var(--ax-space-2, 0.5rem);
}

/* Platform Tabs */
.modal__platform-tabs {
  display: flex;
  gap: var(--ax-space-3, 0.75rem);
}

.platform-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ax-space-2, 0.5rem);
  padding: var(--ax-space-3, 0.75rem) var(--ax-space-4, 1rem);
  border: 2px solid var(--ax-color-gray-300, #d1d5db);
  border-radius: var(--ax-radius-md, 0.375rem);
  background: var(--ax-color-white, #ffffff);
  color: var(--ax-color-gray-700, #374151);
  font-size: var(--ax-font-size-base, 1rem);
  font-weight: var(--ax-font-weight-medium, 500);
  cursor: pointer;
  transition: all 150ms ease;
}

.platform-tab:hover {
  border-color: var(--ax-color-gray-400, #9ca3af);
  background: var(--ax-color-gray-50, #f9fafb);
}

.platform-tab--active {
  border-color: var(--ax-color-primary, #3b82f6);
  background: var(--ax-color-primary-50, #eff6ff);
  color: var(--ax-color-primary, #3b82f6);
}

.platform-tab--active:hover {
  border-color: var(--ax-color-primary-600, #2563eb);
  background: var(--ax-color-primary-100, #dbeafe);
}

/* Input and Select */
.modal__input,
.modal__select {
  width: 100%;
  padding: var(--ax-space-2, 0.5rem) var(--ax-space-3, 0.75rem); /* ✅ Less padding */
  border: 1px solid var(--ax-color-gray-300, #d1d5db);
  border-radius: var(--ax-radius-md, 0.375rem);
  font-size: var(--ax-font-size-sm, 0.875rem); /* ✅ Smaller font */
  color: var(--ax-color-gray-900, #111827);
  background: var(--ax-color-white, #ffffff);
  transition: all 150ms ease;
}

.modal__input:focus,
.modal__select:focus {
  outline: none;
  border-color: var(--ax-color-primary, #3b82f6);
  box-shadow: 0 0 0 3px var(--ax-color-primary-100, #dbeafe);
}

.modal__input::placeholder {
  color: var(--ax-color-gray-400, #9ca3af);
}

.modal__hint {
  font-size: var(--ax-font-size-xs, 0.75rem);
  color: var(--ax-color-gray-500, #6b7280);
  margin: var(--ax-space-2, 0.5rem) 0 0;
}

/* Modal Footer */
.modal__footer {
  display: flex;
  gap: var(--ax-space-3, 0.75rem);
  padding: var(--ax-space-6, 1.5rem);
  border-top: 1px solid var(--ax-color-border, #e2e8f0);
  background: var(--ax-color-gray-50, #f9fafb);
}

.modal__footer .btn {
  flex: 1;
}

/* ========================================
   7.1. MODAL DE EDICIÓN (WIDE)
   ======================================== */

.modal__content--wide {
  max-width: 1000px; /* ✅ Narrower modal */
  width: 90%; /* ✅ Less width */
}

.modal__body--grid {
  display: grid;
  grid-template-columns: 240px 1fr 1fr; /* ✅ Even smaller video column for narrower modal */
  gap: var(--ax-space-4, 1rem); /* ✅ Less gap */
  padding: var(--ax-space-8, 2rem) var(--ax-space-10, 2.5rem); /* ✅ MUCH more padding all around */
  min-height: 650px; /* ✅ Taller modal */
  max-height: calc(90vh - 120px); /* ✅ Taller - use more vertical space */
  align-items: start; /* ✅ Align columns to top */
}

/* Edit Section */
.edit-section {
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-3, 0.75rem); /* ✅ Less gap for compactness */
  height: 100%; /* ✅ Use full height available */
}

.edit-section__title {
  font-size: var(--ax-font-size-sm, 0.875rem); /* ✅ Smaller title */
  font-weight: var(--ax-font-weight-semibold, 600);
  color: var(--ax-color-gray-900, #111827);
  margin: 0;
}

/* Video Player */
.video-player {
  position: relative;
  width: 100%;
  padding-top: 177.78%; /* ✅ Original 9:16 aspect ratio */
  background: var(--ax-color-gray-900, #111827);
  border-radius: var(--ax-radius-lg, 0.5rem);
  overflow: hidden;
}

.video-player video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video Info */
.video-info {
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-2, 0.5rem);
  margin-top: var(--ax-space-2, 0.5rem); /* ✅ Smaller gap after video */
}

.video-info__title {
  font-size: var(--ax-font-size-base, 1rem); /* ✅ Smaller title */
  font-weight: var(--ax-font-weight-semibold, 600);
  color: var(--ax-color-gray-900, #111827);
  margin: 0;
  line-height: 1.3;
  /* ✅ Limit to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-info__badge .virality-badge {
  display: inline-block;
  padding: var(--ax-space-1, 0.25rem) var(--ax-space-2, 0.5rem);
  border-radius: var(--ax-radius-md, 0.375rem);
  font-size: var(--ax-font-size-xs, 0.75rem);
  font-weight: var(--ax-font-weight-bold, 700);
  text-transform: uppercase;
  background: var(--ax-color-gray-200, #e5e7eb);
  color: var(--ax-color-gray-700, #374151);
}

.video-stats {
  display: flex;
  gap: var(--ax-space-4, 1rem);
  padding-top: var(--ax-space-3, 0.75rem);
  border-top: 1px solid var(--ax-color-gray-200, #e5e7eb);
}

/* ✅ Match exact styling from card metrics */
.video-stats .stat {
  display: flex;
  align-items: center;
  gap: var(--ax-space-1, 0.25rem);
  font-size: var(--ax-font-size-xs, 0.75rem); /* Same as card: xs not sm */
  color: var(--ax-color-gray-600, #4b5563);
}

/* ✅ Style icons same as card */
.video-stats .stat i {
  color: var(--ax-color-gray-400, #9ca3af);
  width: 14px !important;
  height: 14px !important;
}

/* ✅ Style values same as card */
.video-stats .stat span {
  font-weight: var(--ax-font-weight-semibold, 600);
  color: var(--ax-color-gray-900, #111827);
}

.score-label {
  font-size: var(--ax-font-size-sm, 0.875rem);
  color: var(--ax-color-gray-700, #374151);
  margin: 0;
}

/* Edit Textarea */
.edit-textarea {
  width: 100%;
  min-height: 200px; /* ✅ Smaller min-height */
  padding: var(--ax-space-3, 0.75rem); /* ✅ Less padding */
  border: 1px solid var(--ax-color-gray-300, #d1d5db);
  border-radius: var(--ax-radius-md, 0.375rem);
  font-size: var(--ax-font-size-sm, 0.875rem);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ax-color-gray-900, #111827);
  background: var(--ax-color-white, #ffffff);
  resize: vertical;
  transition: all 150ms ease;
  flex: 1; /* ✅ Grow to fill available space */
}

.edit-textarea:focus {
  outline: none;
  border-color: var(--ax-color-primary, #3b82f6);
  box-shadow: 0 0 0 3px var(--ax-color-primary-100, #dbeafe);
}

.edit-textarea::placeholder {
  color: var(--ax-color-gray-400, #9ca3af);
}

/* Edit Actions */
.edit-actions {
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-2, 0.5rem); /* ✅ Less gap */
  margin-top: auto; /* ✅ Push to bottom */
}

.edit-label {
  font-size: var(--ax-font-size-xs, 0.75rem); /* ✅ Smaller labels */
  font-weight: var(--ax-font-weight-semibold, 600);
  color: var(--ax-color-gray-700, #374151);
  margin: 0;
}

.btn--full {
  width: 100%;
}

/* ========================================
   8. RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
  .filters-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ax-space-4, 1rem);
  }

  .filters-group--end {
    margin-left: 0;
    width: 100%;
  }

  .filters-group--end .btn {
    width: 100%;
    justify-content: center;
  }

  .results-grid {
    grid-template-columns: 1fr;
    gap: var(--ax-space-4, 1rem);
  }

  .empty-state {
    min-height: 300px;
    padding: var(--ax-space-8, 2rem) var(--ax-space-4, 1rem);
  }

  .empty-state__title {
    font-size: var(--ax-font-size-lg, 1.125rem);
  }

  .empty-state__description {
    font-size: var(--ax-font-size-sm, 0.875rem);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .results-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 videos en tablet */
  }
}

@media (min-width: 1025px) and (max-width: 1400px) {
  .results-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 videos en desktop estándar */
  }
}

@media (min-width: 1401px) {
  .results-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 videos en pantallas grandes */
  }
}

/* ========================================
   IMAGE EDIT MODAL - STUDIO LAYOUT
   ======================================== */

/* Fullscreen Modal */
.modal__content--fullscreen {
  width: 95vw;
  max-width: 1400px;
  height: 90vh;
  max-height: 900px;
  display: flex;
  flex-direction: column;
}

.modal__content--fullscreen .modal__header {
  flex-shrink: 0;
  padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
  border-bottom: 1px solid var(--border-light, #e5e7eb);
}

.modal__content--fullscreen .modal__title {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 600;
}

/* Studio Layout - Sidebar + Canvas */
.modal__body--studio {
  display: flex;
  flex: 1;
  overflow: hidden;
  padding: 0;
}

/* Left Sidebar */
.studio-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--bg-secondary, #f9fafb);
  border-right: 1px solid var(--border-light, #e5e7eb);
  padding: var(--spacing-md, 1rem);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 1rem);
  overflow-y: auto;
}

/* Sidebar Sections */
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 0.5rem);
}

.sidebar-section__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sidebar-icon {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

/* Reference Thumbnail */
.reference-thumb {
  position: relative;
  max-height: 180px;
  border-radius: var(--radius-md, 0.375rem);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--bg-secondary, #f9fafb);
  border: 1px solid var(--border-light, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: center;
}

.reference-thumb img {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
}

.reference-thumb__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 150ms ease;
  color: white;
}

.reference-thumb__overlay i {
  width: 20px;
  height: 20px;
}

.reference-thumb:hover .reference-thumb__overlay {
  opacity: 1;
}

/* Sidebar Select */
.sidebar-select {
  width: 100%;
  padding: var(--spacing-sm, 0.5rem);
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: var(--radius-md, 0.375rem);
  font-size: var(--font-size-sm, 0.875rem);
  background: var(--bg-primary, #ffffff);
  color: var(--text-primary, #1f2937);
}

.sidebar-select:focus {
  outline: none;
  border-color: var(--primary-blue, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* Compact Upload */
.upload-compact {
  aspect-ratio: 1;
  border: 2px dashed var(--border-medium, #d1d5db);
  border-radius: var(--radius-md, 0.375rem);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms ease;
  background: var(--bg-primary, #ffffff);
  overflow: hidden;
}

.upload-compact:hover {
  border-color: var(--primary-blue, #3b82f6);
  background: var(--primary-blue-light, #dbeafe);
}

.upload-compact__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text-muted, #9ca3af);
}

.upload-compact__placeholder i {
  width: 24px;
  height: 24px;
}

.upload-compact__placeholder span {
  font-size: var(--font-size-xs, 0.75rem);
}

.upload-compact__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product Images Grid (2x2 for 4 images) */
.product-images-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.upload-slot {
  position: relative;
  aspect-ratio: 1;
  min-height: 60px;
}

.upload-slot.has-image .upload-compact__placeholder {
  display: none;
}

.upload-slot.has-image .upload-compact__preview {
  display: block !important;
}

.upload-slot.has-image .upload-slot__remove {
  display: flex !important;
}

.upload-slot__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.9);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: white;
  padding: 0;
  z-index: 5;
  transition: background 150ms ease;
}

.upload-slot__remove:hover {
  background: #dc2626;
}

.upload-slot__remove i {
  width: 12px;
  height: 12px;
}

/* Sidebar Hint Text */
.sidebar-hint {
  margin: 6px 0 0 0;
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
  line-height: 1.3;
}

/* Sidebar Textarea for Custom Prompt */
.sidebar-textarea {
  width: 100%;
  min-height: 80px;
  padding: 8px 10px;
  border: 1px solid var(--border-medium, #d1d5db);
  border-radius: var(--radius-md, 0.375rem);
  font-size: var(--font-size-xs, 0.75rem);
  font-family: inherit;
  resize: vertical;
  background: var(--bg-primary, #ffffff);
  color: var(--text-primary, #111827);
  transition: border-color 150ms ease;
}

.sidebar-textarea:focus {
  outline: none;
  border-color: var(--primary-blue, #3b82f6);
  box-shadow: 0 0 0 2px var(--primary-blue-light, #dbeafe);
}

.sidebar-textarea::placeholder {
  color: var(--text-muted, #9ca3af);
  font-size: 11px;
}

/* Refine Row Layout */
.refine-row {
  display: flex;
  gap: 12px;
  width: 100%;
  align-items: center;
}

.refine-row .refine-input {
  flex: 1;
  min-width: 300px;
}

/* Refine Reference Images */
.refine-images {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.refine-images__slots {
  display: flex;
  gap: 8px;
}

.refine-image-slot {
  position: relative;
  width: 48px;
  height: 48px;
  border: 2px dashed var(--border-medium, #d1d5db);
  border-radius: var(--radius-md, 0.375rem);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms ease;
  background: var(--bg-primary, #ffffff);
  overflow: hidden;
}

.refine-image-slot:hover {
  border-color: var(--primary-blue, #3b82f6);
  background: var(--primary-blue-light, #dbeafe);
}

.refine-image-slot__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #9ca3af);
}

.refine-image-slot__placeholder i {
  width: 18px;
  height: 18px;
}

.refine-image-slot__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.refine-image-slot.has-image .refine-image-slot__placeholder {
  display: none;
}

.refine-image-slot.has-image .refine-image-slot__preview {
  display: block !important;
}

.refine-image-slot.has-image .refine-image-slot__remove {
  display: flex !important;
}

.refine-image-slot__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.9);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: white;
  padding: 0;
  z-index: 5;
}

.refine-image-slot__remove:hover {
  background: #dc2626;
}

.refine-image-slot__remove i {
  width: 10px;
  height: 10px;
}

.refine-images__hint {
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
  white-space: nowrap;
}

/* Action Buttons Container */
.sidebar-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Generate Button */
.btn-generate {
  width: 100%;
  padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
  background: var(--primary-blue, #3b82f6);
  color: white;
  border: none;
  border-radius: var(--radius-md, 0.375rem);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm, 0.5rem);
  transition: background 150ms ease;
}

.btn-generate:hover {
  background: var(--primary-blue-dark, #1e40af);
}

.btn-generate i {
  width: 16px;
  height: 16px;
}

/* Download Button in Sidebar */
.btn-download {
  width: 100%;
  padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
  background: var(--primary-blue, #2563eb);
  color: white;
  border: none;
  border-radius: var(--radius-md, 0.375rem);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm, 0.5rem);
  transition: all 150ms ease;
}

.btn-download:hover {
  background: var(--primary-blue-dark, #1e40af);
}

.btn-download i {
  width: 16px;
  height: 16px;
}

/* Main Canvas Area */
.studio-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg, 1.5rem);
  background: var(--bg-primary, #ffffff);
  position: relative;
  overflow: hidden;
  min-height: 0; /* Important for flex children */
}

/* Empty State */
.canvas-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--text-muted, #9ca3af);
  max-width: 300px;
}

.canvas-empty__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--spacing-md, 1rem);
  background: var(--bg-secondary, #f9fafb);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.canvas-empty__icon i {
  width: 28px;
  height: 28px;
  color: var(--text-muted, #9ca3af);
}

.canvas-empty h3 {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  margin: 0 0 var(--spacing-xs, 0.25rem);
}

.canvas-empty p {
  font-size: var(--font-size-sm, 0.875rem);
  margin: 0;
}

/* Canvas Result */
.canvas-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: var(--spacing-md, 1rem);
  overflow: hidden;
}

.canvas-result__image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
  min-height: 0;
  max-height: calc(100% - 160px); /* Leave space for controls below */
  width: 100%;
}

.canvas-result__image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-lg, 0.5rem);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
}

/* Canvas Loading */
.canvas-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none; /* Hidden by default, JS sets to flex */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md, 1rem);
  color: var(--text-muted, #9ca3af);
  background: var(--bg-primary, #ffffff);
  z-index: 10;
}

.canvas-loading__spinner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.canvas-loading__spinner i {
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  color: var(--primary-blue, #3b82f6);
}

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

.canvas-loading p {
  font-size: var(--font-size-base, 1rem);
  margin: 0;
  color: var(--text-secondary, #6b7280);
}

/* Version Thumbnails - Horizontal Strip */
.canvas-versions {
  display: flex;
  gap: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-sm, 0.5rem);
  background: var(--bg-secondary, #f9fafb);
  border-radius: var(--radius-md, 0.375rem);
  max-width: 100%;
  overflow-x: auto;
}

.canvas-versions:empty {
  display: none;
}

.version-thumbnail {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm, 0.25rem);
  overflow: hidden;
  cursor: pointer;
  transition: all 150ms ease;
}

.version-thumbnail:hover {
  border-color: var(--border-dark, #9ca3af);
}

.version-thumbnail.selected {
  border-color: var(--primary-blue, #3b82f6);
}

.version-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Refinement Row */
.canvas-refine {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 1rem);
  width: 100%;
  max-width: 600px;
  margin-top: var(--spacing-md, 1rem);
}

.refine-input {
  flex: 1;
  min-width: 280px;
  padding: var(--spacing-md, 1rem);
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: var(--radius-md, 0.375rem);
  font-size: var(--font-size-sm, 0.875rem);
}

.refine-input:focus {
  outline: none;
  border-color: var(--primary-blue, #3b82f6);
}

.btn-refine {
  padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);
  background: var(--primary-blue, #3b82f6);
  border: none;
  border-radius: var(--radius-md, 0.375rem);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 150ms ease;
}

.btn-refine:hover {
  background: var(--primary-blue-dark, #2563eb);
}

.btn-refine i {
  width: 16px;
  height: 16px;
}

/* Action Buttons */
.canvas-actions {
  display: flex;
  gap: var(--spacing-sm, 0.5rem);
}

.btn-action {
  padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
  border-radius: var(--radius-md, 0.375rem);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 150ms ease;
}

.btn-action i {
  width: 16px;
  height: 16px;
}

.btn-action--primary {
  background: var(--primary-blue, #3b82f6);
  color: white;
  border: none;
}

.btn-action--primary:hover {
  background: var(--primary-blue-dark, #1e40af);
}

.btn-action--secondary {
  background: var(--bg-primary, #ffffff);
  color: var(--text-primary, #1f2937);
  border: 1px solid var(--border-light, #e5e7eb);
}

.btn-action--secondary:hover {
  background: var(--bg-secondary, #f9fafb);
}

/* Loading State */
.canvas-loading {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md, 1rem);
  z-index: 10;
}

.canvas-loading__spinner {
  animation: spin 1s linear infinite;
  color: var(--primary-blue, #3b82f6);
}

.canvas-loading__spinner i {
  width: 40px;
  height: 40px;
}

.canvas-loading p {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--text-secondary, #6b7280);
  margin: 0;
}

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

/* Responsive */
@media (max-width: 768px) {
  .modal__content--fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }

  .modal__body--studio {
    flex-direction: column;
  }

  .studio-sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-sm, 0.5rem);
    padding: var(--spacing-sm, 0.5rem);
    border-right: none;
    border-bottom: 1px solid var(--border-light, #e5e7eb);
  }

  .sidebar-section {
    flex: 1;
    min-width: 120px;
  }

  .reference-thumb {
    aspect-ratio: 1;
    max-height: 80px;
  }

  .btn-generate {
    margin-top: 0;
  }
}

/* ========================================
   IMAGE LIGHTBOX MODAL
   ======================================== */

.modal--lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  cursor: zoom-out;
}

.modal--lightbox.active {
  display: flex;
}

.lightbox__content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  cursor: default;
}

.lightbox__content img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--ax-radius-lg, 0.5rem);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.lightbox__close {
  position: absolute;
  top: -40px;
  right: 0;
  background: transparent;
  border: none;
  color: var(--ax-color-white, #ffffff);
  cursor: pointer;
  padding: var(--ax-space-2, 0.5rem);
  opacity: 0.8;
  transition: opacity 0.2s;
}

.lightbox__close:hover {
  opacity: 1;
}

.lightbox__close i {
  width: 24px;
  height: 24px;
}

/* Make thumbnails clickable with zoom cursor */
.version-thumbnail {
  cursor: zoom-in;
}

/* ========================================
   CREDITS BADGE & SUMMARY (Search Modal)
   ======================================== */

.credits-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--ax-radius-full, 9999px);
  font-size: var(--ax-font-size-xs, 0.75rem);
  font-weight: 500;
  color: inherit;
  white-space: nowrap;
  margin-left: var(--ax-space-2, 0.5rem);
}

.credits-badge__icon {
  width: 12px;
  height: 12px;
  color: var(--ax-color-warning, #f59e0b);
}

.btn--primary .credits-badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.btn--primary .credits-badge__icon {
  color: white;
}

.credits-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ax-space-4, 16px);
  margin-top: var(--ax-space-4, 16px);
  background: var(--ax-color-bg-secondary, #f9fafb);
  border: 1px solid var(--ax-color-border, #e5e7eb);
  border-radius: var(--ax-radius-md, 8px);
}

.credits-summary__info {
  display: flex;
  align-items: center;
  gap: var(--ax-space-2, 8px);
}

.credits-summary__label {
  font-size: var(--ax-font-size-sm, 0.875rem);
  color: var(--ax-color-text-secondary, #6b7280);
}

.credits-summary__cost {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-space-2, 8px);
  font-size: var(--ax-font-size-base, 1rem);
  font-weight: var(--ax-font-weight-semibold, 600);
  color: var(--ax-color-text-primary, #111827);
}

.credits-summary__balance {
  display: flex;
  align-items: center;
  gap: var(--ax-space-2, 8px);
  font-size: var(--ax-font-size-sm, 0.875rem);
  color: var(--ax-color-text-secondary, #6b7280);
}

.credits-summary__balance span:last-child {
  font-weight: var(--ax-font-weight-semibold, 600);
  color: var(--ax-color-text-primary, #111827);
}

/* Insufficient credits warning */
.credits-summary--insufficient {
  background: var(--ax-color-danger-light, #fef2f2);
  border-color: var(--ax-color-danger, #ef4444);
}

.credits-summary--insufficient .credits-summary__cost {
  color: var(--ax-color-danger, #ef4444);
}