/* packages.css - Visual unificado, sem abas e com expansão inline */

/* Grid de Pacotes */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.package-card {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  cursor: pointer;
}

.package-card:hover {
  transform: translateY(-2px);
  border-color: var(--purple);
  box-shadow: 0 8px 24px rgba(118, 87, 197, 0.12);
}

.package-card.is-active {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(118, 87, 197, 0.25);
  background: #fbf9ff;
}

.package-card.is-published {
  border-color: #a3e0c7;
  background: linear-gradient(180deg, #f7fdfa, #fff);
}

.package-card.is-published.is-active {
  border-color: #27ae60;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.25);
  background: #f4fbf7;
}

.package-card.is-draft {
  border-color: #ffe08a;
  background: linear-gradient(180deg, #fffdf2, #fff);
}

.pkg-badge {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.pkg-badge.draft {
  background: #fff3c4;
  color: #8c6800;
}

.pkg-badge.published {
  background: #d4f7e7;
  color: #127547;
}

.package-card h3 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 900;
  color: var(--ink);
}

.package-card p {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
  flex: 1;
}

.pkg-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pkg-tag {
  background: var(--soft);
  color: var(--purple);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}

/* Barra de Progresso */
.progress-box {
  margin-bottom: 14px;
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 5px;
  color: var(--ink);
}

.progress-track {
  height: 9px;
  background: #e9e5f5;
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f5a623, #ff7e47);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.progress-fill.completed {
  background: linear-gradient(90deg, #2ecc71, #27ae60);
}

.package-card .btn-manage {
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  background: var(--purple);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.package-card.is-published .btn-manage {
  background: #27ae60;
}

.package-card .btn-manage:hover {
  filter: brightness(1.1);
}

/* ======================================================== */
/* PAINEL DE EXPANSÃO INLINE (ACCORDION ABAIXO DO CARD)     */
/* ======================================================== */
.inline-expanded-panel {
  margin-top: 20px;
  border: 2px solid var(--purple);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(118, 87, 197, 0.12);
  overflow: hidden;
  animation: slideDown 0.25s ease-out;
}

.inline-expanded-panel.production-style {
  border-color: #27ae60;
  box-shadow: 0 16px 40px rgba(46, 204, 113, 0.15);
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.inline-panel-header {
  padding: 18px 24px;
  background: #faf8ff;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.inline-expanded-panel.production-style .inline-panel-header {
  background: #f4fbf7;
}

.inline-panel-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-collapse {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-collapse:hover {
  background: var(--line);
  color: var(--ink);
}

.inline-panel-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.inline-panel-footer {
  padding: 18px 24px;
  background: #faf8ff;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Dropzone interna */
.pkg-dropzone {
  border: 2px dashed #b9aee6;
  border-radius: 16px;
  padding: 22px;
  text-align: center;
  background: #fdfcff;
  cursor: pointer;
  transition: all 0.2s;
}

.pkg-dropzone:hover {
  border-color: var(--purple);
  background: #f6f3ff;
}

.pkg-dropzone strong {
  display: block;
  font-size: 16px;
  color: var(--purple);
  margin-bottom: 4px;
}

.pkg-dropzone span {
  font-size: 13px;
  color: var(--muted);
}

/* Linha de Faixa de Áudio */
.pkg-item-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fdfcff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 20px;
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.pkg-item-row:hover {
  background: #fff;
  border-color: #d1c4f8;
  box-shadow: 0 4px 16px rgba(110, 68, 255, 0.06);
}

.pkg-item-header-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;
}

.pkg-item-badge-index {
  font-size: 12px;
  font-weight: 900;
  background: #ede8ff;
  color: var(--purple);
  padding: 6px 12px;
  border-radius: 10px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
}

.pkg-item-inputs-group {
  display: flex;
  flex: 1;
  gap: 14px;
  align-items: flex-start;
  min-width: 300px;
  flex-wrap: wrap;
}

.pkg-input-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 2;
  min-width: 200px;
}

.pkg-input-field.fefo-file {
  flex: 1.2;
  min-width: 180px;
}

.pkg-field-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pkg-item-title-input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}
.pkg-item-title-input:focus {
  border-color: var(--purple);
  outline: none;
  box-shadow: 0 0 0 3px rgba(110, 68, 255, 0.12);
}

.fefo-file-box {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.pkg-item-fefo-input {
  border: 1px solid #c9bcf0;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13.5px;
  font-weight: 800;
  color: #4a27a8;
  background: #fbf9ff;
  width: 100%;
  box-sizing: border-box;
}
.pkg-item-fefo-input:focus {
  border-color: #5c27cc;
  outline: none;
  box-shadow: 0 0 0 3px rgba(92, 39, 204, 0.15);
}

.btn-suggest-name {
  border: 1px solid #d2c5f8;
  background: #f5f0ff;
  color: #5c27cc;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.btn-suggest-name:hover {
  background: #ebdfff;
  border-color: #baa4f2;
}

.header-status-and-delete {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

/* CONTROLES DE ÁUDIO: PLAY, PAUSE, STOP E PROGRESSO */
.custom-audio-controller {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8f6fd;
  border: 1px solid #e7e0fa;
  border-radius: 12px;
  padding: 8px 14px;
  flex: 1;
  min-width: 280px;
  box-sizing: border-box;
}

.audio-ctrl-buttons {
  display: flex;
  gap: 6px;
  align-items: center;
}

.btn-audio-ctrl {
  border: 0;
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.btn-audio-ctrl.btn-play {
  background: #2ecc71;
  color: #fff;
}
.btn-audio-ctrl.btn-play:hover {
  background: #27ae60;
}
.btn-audio-ctrl.btn-play.active {
  background: #1e824c;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.35);
}

.btn-audio-ctrl.btn-pause {
  background: #f39c12;
  color: #fff;
}
.btn-audio-ctrl.btn-pause:hover {
  background: #d68910;
}
.btn-audio-ctrl.btn-pause.active {
  background: #b9770e;
  box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.35);
}

.btn-audio-ctrl.btn-stop {
  background: #e74c3c;
  color: #fff;
}
.btn-audio-ctrl.btn-stop:hover {
  background: #c0392b;
}

.audio-time-slider-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.time-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  min-width: 32px;
  font-variant-numeric: tabular-nums;
  font-family: monospace;
}

.audio-seek-slider {
  flex: 1;
  accent-color: var(--purple);
  cursor: pointer;
  height: 6px;
}

.pkg-item-row:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pkg-item-number {
  font-size: 13px;
  font-weight: 900;
  color: var(--purple);
  text-align: center;
}

.pkg-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pkg-item-title-input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  width: 100%;
}

.pkg-item-title-input:focus {
  border-color: var(--purple);
  outline: none;
}

.pkg-item-orig {
  font-size: 11px;
  color: var(--muted);
}

.pkg-item-player audio {
  height: 32px;
  width: 100%;
}

/* Botão de Corte (Ferramenta de corte de onda) */
.btn-trim-audio {
  background: #eef7ff;
  color: #1a73e8;
  border: 1px solid #c8e1fd;
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: all 0.15s;
}

.btn-trim-audio:hover {
  background: #1a73e8;
  color: #fff;
}

.pkg-item-delete {
  background: none;
  border: 0;
  color: #c93b48;
  cursor: pointer;
  font-size: 16px;
  padding: 6px 10px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}

.pkg-item-delete:hover {
  background: #ffebee;
}

/* Botão de Publicação Dourado / Foguete */
.btn-publish-pkg {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font: inherit;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(46, 204, 113, 0.35);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn-publish-pkg:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(46, 204, 113, 0.45);
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ======================================================== */
/* MODAL DO AUDIO TRIMMER (WAVEFORM VISUAL)                 */
/* ======================================================== */
.audio-trimmer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(5px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.audio-trimmer-container {
  background: #0f274a;
  color: #fff;
  border-radius: 24px;
  width: min(850px, 100%);
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid #1e3a63;
}

.trimmer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trimmer-badge {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #2ecc71;
}

.trimmer-canvas-box {
  background: #071731;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #1d3f70;
}

#trimmer-waveform {
  width: 100%;
  height: 160px;
  display: block;
  cursor: ew-resize;
}

.trimmer-controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  background: #14325a;
  padding: 12px 16px;
  border-radius: 14px;
}

.trimmer-controls-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #a4c2e6;
}

.trimmer-controls-grid input[type="range"] {
  accent-color: #2ecc71;
  cursor: pointer;
}

.trimmer-bottom-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.editor-play {
  background: #1e4579 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 0 20px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font: inherit !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: 140px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: background 0.15s, transform 0.1s;
}

.editor-play:hover {
  background: #25589c !important;
}

.editor-play:active {
  transform: scale(0.98);
}

.editor-play.playing {
  background: #0d6f75 !important;
}

/* ======================================================== */
/* FERRAMENTA DE CORTE HARMONIZADA AO NOVO BOX DA FAIXA    */
/* ======================================================== */
.pkg-accordion-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.package-drawer-wrapper {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 20px;
  animation: drawerSlideDown 0.2s ease-out;
}

@keyframes drawerSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.inline-trimmer-card {
  width: 100% !important;
  max-width: 100% !important;
  background: #ffffff !important;
  color: #1e293b !important;
  border-radius: 18px !important;
  padding: 14px 18px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
  border: none !important; /* Sem borda da box */
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  margin-top: 4px !important;
}

.inline-trimmer-card .trimmer-header {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

.inline-trimmer-card .trimmer-script-box {
  background: #f5f3ff !important;
  border: 1.5px solid #ddd6fe !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  margin: 0 !important;
}

.inline-trimmer-card .trimmer-script-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 4px !important;
}

.inline-trimmer-card .trimmer-script-badge {
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  color: #6d28d9 !important;
}

.inline-trimmer-card .trimmer-script-text {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #3b0764 !important;
  font-style: italic !important;
}

.inline-trimmer-card .trimmer-canvas-box {
  background: #0b1f3a !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1.5px solid #8be4aa !important;
}

.inline-trimmer-card .trimmer-waveform {
  width: 100% !important;
  height: 140px !important;
  display: block !important;
  cursor: ew-resize !important;
}

.inline-trimmer-card .trimmer-controls-grid {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: #f0fdf4 !important;
  border: 1.5px solid #bbf7d0 !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  flex-wrap: nowrap !important;
}

.inline-trimmer-card .trimmer-controls-grid label {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #166534 !important;
}

.inline-trimmer-card .trimmer-controls-grid label span {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  white-space: nowrap !important;
  font-size: 11px !important;
}

.inline-trimmer-card .trimmer-controls-grid label output {
  font-weight: 900 !important;
  color: #0f172a !important;
  font-size: 11px !important;
}

.inline-trimmer-card .trimmer-controls-grid input[type="range"] {
  width: 100% !important;
  accent-color: #22c55e !important;
  cursor: pointer !important;
}

.inline-trimmer-card .trimmer-bottom-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 2px !important;
}

.inline-trimmer-card .editor-play {
  background: #7c3aed !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 0 20px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font: inherit !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: 140px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.2) !important;
  transition: all 0.15s ease !important;
}

.inline-trimmer-card .editor-play:hover {
  background: #6d28d9 !important;
  box-shadow: 0 6px 14px rgba(124, 58, 237, 0.3) !important;
  transform: translateY(-1px);
}

.inline-trimmer-card .editor-play.playing {
  background: #0d9488 !important;
}

.inline-trimmer-card .editor-reset {
  background: none !important;
  border: 0 !important;
  color: #64748b !important;
  font: inherit !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.inline-trimmer-card .editor-reset:hover {
  color: #0f172a !important;
}

.inline-trimmer-card .editor-status {
  margin: 0 !important;
  flex: 1 !important;
  color: #15803d !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

.inline-trimmer-card .editor-save {
  background: #22c55e !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 10px 24px !important;
  font: inherit !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
  transition: all 0.15s ease !important;
}

.inline-trimmer-card .editor-save:hover {
  background: #16a34a !important;
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4) !important;
  transform: translateY(-1px);
}

.inline-trimmer-mount {
  margin-top: 6px;
  width: 100%;
}

.editor-reset {
  background: none;
  border: 0;
  color: #a4c2e6;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.editor-reset:hover {
  color: #fff;
}

.editor-save {
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  font: inherit;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
}

.editor-close {
  background: #1e3a63;
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 16px;
  display: grid;
  place-items: center;
}

.editor-close:hover {
  background: #e74c3c;
}

@media (max-width: 768px) {
  .pkg-item-row {
    grid-template-columns: 1fr;
  }
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}


/* === NOVO: MATRIZ PEDAGÓGICA, KPI BANNER E ROTEIROS DO FEFO === */
.pkg-kpi-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.pkg-kpi-card {
  background: #fdfcff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pkg-kpi-card.highlight {
  background: linear-gradient(135deg, #f7f3ff, #efe9fc);
  border-color: #d8c8f8;
}
.pkg-kpi-num {
  font-size: 26px;
  font-weight: 900;
  color: var(--purple);
  line-height: 1;
}
.pkg-kpi-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.pkg-filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  background: #f8f7fd;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 18px;
}
.pkg-filter-input {
  flex: 2;
  min-width: 200px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  font: inherit;
  font-size: 13px;
}
.pkg-filter-select {
  flex: 1;
  min-width: 160px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  font: inherit;
  font-size: 13px;
  background: #fff;
}

.item-script-callout {
  background: #f4f2ff;
  border-left: 3px solid var(--purple);
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #2b2b3a;
  margin: 8px 0;
}
.item-script-label {
  font-weight: 800;
  color: var(--purple);
  margin-bottom: 2px;
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.item-script-content {
  font-style: italic;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.status-pill.status-ready {
  background: #e6f9f0;
  color: #0b8a4f;
  border: 1px solid #b7eed4;
}
.status-pill.status-trim {
  background: #fff8e6;
  color: #996500;
  border: 1px solid #ffe199;
}
.status-pill.status-pending {
  background: #fde8e8;
  color: #c5221f;
  border: 1px solid #f8b4b4;
}

.pkg-item-header-line {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pkg-item-badge-code {
  font-size: 11px;
  font-weight: 900;
  background: #ebe6fa;
  color: var(--purple);
  padding: 3px 7px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}
.pkg-item-actions-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}
.btn-trim-audio.highlight-trim {
  background: linear-gradient(135deg, #f39c12, #e67e22) !important;
  color: #fff !important;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(230, 126, 34, 0.3);
}
.hint-missing-audio {
  font-size: 12px;
  color: #c5221f;
  font-style: italic;
}

.trimmer-script-box {
  background: #14325a;
  border: 1px solid #1f4a80;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 4px;
}
.trimmer-script-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.trimmer-script-badge {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #ffd166;
}
.trimmer-script-code {
  font-size: 11px;
  font-weight: 800;
  background: #0b1f3a;
  padding: 2px 8px;
  border-radius: 6px;
  color: #a4c2e6;
}
.trimmer-script-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: #f0f6fc;
  font-style: italic;
}


/* ========================================================== */
/* CUSTOM AUDIO REPLACEMENT, EDITABLE SCRIPTS & UNPUBLISH    */
/* ========================================================== */

.pkg-item-script-box {
  margin: 8px 0 10px;
  background: #fbfaff;
  border: 1px solid #e2ddf5;
  border-radius: 12px;
  padding: 10px 14px;
}

.pkg-item-script-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--purple);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pkg-item-script-textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #d4cdec;
  border-radius: 8px;
  padding: 8px 12px;
  resize: vertical;
  min-height: 52px;
  transition: all 0.15s ease;
}

.pkg-item-script-textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(118, 87, 197, 0.15);
  background: #fff;
}

.btn-replace-audio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f0f4ff;
  color: #2b569a;
  border: 1px solid #c7d8f8;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-replace-audio:hover {
  background: #2b569a;
  color: #ffffff;
  border-color: #1e3f73;
  transform: translateY(-1px);
}

.btn-replace-audio.btn-add-audio {
  background: #eefbee;
  color: #1c7430;
  border-color: #bce3c5;
}

.btn-replace-audio.btn-add-audio:hover {
  background: #1c7430;
  color: #ffffff;
}

.btn-unpublish {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff8eb;
  color: #b25e00;
  border: 1px solid #fed89b;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-unpublish:hover {
  background: #e67e22;
  color: #ffffff;
  border-color: #d35400;
  transform: translateY(-1px);
}

.save-status-badge {
  font-size: 10px;
  font-weight: 700;
  color: #27ae60;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.save-status-badge.visible {
  opacity: 1;
}


/* ========================================================== */
/* FORMULÁRIO DE METADADOS ALINHADO (LADO A LADO)             */
/* ========================================================== */
.pkg-meta-form {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
  background: #faf8ff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
}

.pkg-meta-form.production-meta {
  background: #f4fbf7;
  border-color: #b7eed4;
}

.pkg-meta-form .field-full {
  grid-column: 1 / -1;
}

.pkg-field-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pkg-field-box label {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pkg-field-box input[type="text"],
.pkg-field-box input[type="number"],
.pkg-field-box textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #d9d1ed;
  border-radius: 10px;
  padding: 10px 14px;
  transition: all 0.15s ease;
}

.pkg-field-box input:focus,
.pkg-field-box textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(118, 87, 197, 0.18);
}

.production-meta .pkg-field-box input:focus,
.production-meta .pkg-field-box textarea:focus {
  border-color: #27ae60;
  box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2);
}

/* Linha de Licenças Lado a Lado (Pill Buttons) */
.pkg-licenses-container {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.pkg-licenses-container .pkg-licenses-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pkg-licenses-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.pkg-license-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 18px !important;
  background: #ffffff !important;
  border: 2px solid #e1d9f4 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
  width: auto !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.pkg-license-pill:hover {
  border-color: var(--purple) !important;
  background: #faf8ff !important;
  transform: translateY(-1px);
}

.pkg-license-pill input[type="checkbox"] {
  width: 17px !important;
  height: 17px !important;
  accent-color: var(--purple) !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.pkg-license-pill:has(input:checked) {
  background: #f1ecff !important;
  border-color: var(--purple) !important;
  color: var(--purple) !important;
  box-shadow: 0 3px 10px rgba(118, 87, 197, 0.18) !important;
}

.pkg-license-pill.premium:has(input:checked) {
  background: #fff9e6 !important;
  border-color: #f1c40f !important;
  color: #8c6800 !important;
  box-shadow: 0 3px 10px rgba(241, 196, 15, 0.22) !important;
}

.production-meta .pkg-license-pill:hover {
  border-color: #27ae60 !important;
  background: #f4fbf7 !important;
}

.production-meta .pkg-license-pill input[type="checkbox"] {
  accent-color: #27ae60 !important;
}

.production-meta .pkg-license-pill:has(input:checked) {
  background: #e8f8f0 !important;
  border-color: #27ae60 !important;
  color: #127547 !important;
  box-shadow: 0 3px 10px rgba(39, 174, 96, 0.18) !important;
}

/* ========================================================== */
/* PACOTES EM PRODUÇÃO (MESMO LAYOUT, COR VERDE/ESMERALDA)    */
/* ========================================================== */
.inline-expanded-panel.production-style {
  border-color: #27ae60 !important;
  background: #ffffff !important;
}

.inline-expanded-panel.production-style .inline-panel-header {
  border-bottom-color: #d1f2e1 !important;
}

.inline-expanded-panel.production-style .inline-panel-header h3 {
  color: #127547 !important;
}

.inline-expanded-panel.production-style .pkg-dropzone {
  border-color: #27ae60 !important;
  background: #f4fbf7 !important;
}

.inline-expanded-panel.production-style .pkg-dropzone:hover {
  background: #e8f8f0 !important;
}

.inline-expanded-panel.production-style .pkg-item-number {
  background: #e8f8f0 !important;
  color: #127547 !important;
  font-weight: 900;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}


/* Botão de Geração de Voz com IA */
.btn-generate-ai-voice {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #7657c5, #5333a5);
  color: #ffffff !important;
  border: none;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(118, 87, 197, 0.25);
  white-space: nowrap;
}

.btn-generate-ai-voice:hover {
  background: linear-gradient(135deg, #8767db, #6441bf);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(118, 87, 197, 0.35);
}

.btn-generate-ai-voice.loading {
  background: #a29bb6 !important;
  cursor: wait;
  transform: none;
  opacity: 0.8;
}

.production-meta .btn-generate-ai-voice {
  background: linear-gradient(135deg, #27ae60, #1e8449);
  box-shadow: 0 2px 8px rgba(39, 174, 96, 0.25);
}

.production-meta .btn-generate-ai-voice:hover {
  background: linear-gradient(135deg, #2ecc71, #229954);
}


/* ========================================================== */
/* LISTA DE BOXES DE PACOTES (VISUAL COMPACTO EM LISTA)       */
/* Destaque para: Nome, Contagem de Áudios e Licenças         */
/* ========================================================== */

.packages-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 14px;
}

.package-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 16px !important;
  border-radius: 14px !important;
  min-height: auto !important;
  gap: 12px !important;
  background: #ffffff !important;
  border: 1.5px solid var(--line) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
}

.package-card:hover {
  transform: translateY(-1px);
  border-color: #bfa8fa !important;
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.08) !important;
}

.package-card.is-active {
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.16) !important;
  background: #faf8ff !important;
}

.package-card.is-published {
  border-color: #d1f2e2 !important;
  background: #ffffff !important;
}

.package-card.is-published:hover {
  border-color: #27ae60 !important;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.1) !important;
}

.package-card.is-published.is-active {
  border-color: #27ae60 !important;
  box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.18) !important;
  background: #f4fbf7 !important;
}

.pkg-list-col {
  display: flex;
  align-items: center;
}

.pkg-list-main {
  flex: 1 1 35%;
  min-width: 200px;
  gap: 10px;
}

.pkg-list-main .pkg-badge {
  margin: 0 !important;
  flex-shrink: 0;
  font-size: 11px;
  padding: 3px 8px;
}

.pkg-list-title {
  margin: 0 !important;
  font-size: 15.5px !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
  line-height: 1.25 !important;
}

.pkg-list-lic {
  flex: 1 1 35%;
  justify-content: flex-start;
}

.pkg-list-actions {
  flex: 0 0 auto;
  gap: 8px;
  justify-content: flex-end;
}

.pkg-list-actions .btn-manage {
  margin: 0 !important;
  padding: 7px 13px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

.pkg-list-actions .btn-unpublish {
  margin: 0 !important;
  padding: 7px 11px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

.pkg-audio-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
  color: var(--purple);
  background: #f4f1fd;
  border: 1px solid #e1d9f4;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

.package-card.is-published .pkg-audio-count-pill {
  background: #e8f8f0;
  border-color: #b7eed4;
  color: #127547;
}

.pkg-tags.compact-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: 0 !important;
}

.pkg-tags.compact-tags .pkg-tag {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}

@media (max-width: 820px) {
  .package-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .pkg-list-main, .pkg-list-lic, .pkg-list-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* ======================================================== */
/* BOX DE FAIXA DE ÁUDIO (DESIGN MOCKUP FAIXA VERDE)        */
/* ======================================================== */

.track-card-box {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  background: #cbf6d8 !important; /* Verde pastel suave do print */
  border: 2px solid #8be4aa !important;
  border-radius: 24px !important;
  padding: 18px 20px !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 14px rgba(74, 222, 128, 0.12) !important;
  position: relative !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.track-card-box:hover {
  box-shadow: 0 6px 18px rgba(74, 222, 128, 0.2) !important;
  border-color: #5cdb88 !important;
}

/* Badge vertical FAIXA 01 */
.track-vertical-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #0f172a;
  text-transform: uppercase;
  padding: 0 4px;
  user-select: none;
  min-width: 32px;
}

/* Corpo principal do card */
.track-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Linhas Superior e Inferior */
.track-row-top,
.track-row-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.track-field-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.track-label {
  font-size: 13.5px;
  font-weight: 900;
  color: #0f172a;
  margin: 0;
}

/* Inputs brancos e limpos */
.track-input-clean {
  background: #ffffff !important;
  border: 1px solid #9ee2b7 !important;
  border-radius: 10px !important;
  padding: 9px 14px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
  outline: none !important;
}

.track-input-clean:focus {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
}

/* Botões verdes preenchidos com cantos arredondados */
.btn-track-action {
  background: #52c41a !important; /* Verde sólido vibrante do print */
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  padding: 10px 22px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 6px rgba(82, 196, 26, 0.3) !important;
  transition: all 0.15s ease !important;
}

.btn-track-action:hover {
  background: #47ad16 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(82, 196, 26, 0.4) !important;
}

.btn-track-save {
  padding: 10px 28px !important;
}

/* Player nativo estilizado com botão de conversão MP3 */
.track-row-player {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.track-row-player audio {
  flex: 1;
  min-width: 0;
  height: 42px;
  border-radius: 30px;
  outline: none;
}

.btn-mp3-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  height: 40px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.btn-mp3-download:hover {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.btn-mp3-download:active {
  transform: translateY(0);
}

.btn-mp3-download.loading {
  opacity: 0.7;
  pointer-events: none;
  background: #e2e8f0;
  color: #64748b;
}

/* Linhas divisórias acordeon (Gerar com IA e Cortar) */
.track-accordion-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  padding: 6px 0;
  margin: 2px 0;
}

.track-accordion-toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1;
}

.track-accordion-toggle.green::before {
  background: #48bb78; /* Linha verde do print */
}

.track-accordion-toggle.purple::before {
  background: #8b5cf6; /* Linha roxa do print */
}

.track-accordion-toggle .acc-text {
  position: relative;
  z-index: 2;
  background: #cbf6d8; /* Mesma cor de fundo do card para cobrir a linha */
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.track-accordion-toggle.green .acc-text {
  color: #1b4332;
}

.track-accordion-toggle.purple .acc-text {
  color: #4c1d95;
}

.track-accordion-toggle .acc-arrow {
  display: inline-block;
  font-size: 10px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.track-accordion-toggle.is-open .acc-arrow {
  transform: rotate(180deg);
}

.track-accordion-panel {
  display: none;
  background: #ffffff;
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid #b7eed4;
  margin-top: 2px;
  animation: fadeIn 0.2s ease;
}

.track-accordion-panel.is-open {
  display: block;
}

@media (max-width: 768px) {
  .track-card-box {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  .track-vertical-badge {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    justify-content: flex-start !important;
    font-size: 16px !important;
  }
  .track-row-top,
  .track-row-bottom {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* ======================================================== */
/* LAYOUT DE PACOTES FIEL AO PRINT MODELO                   */
/* ======================================================== */

/* Cabeçalhos de Seção com Alfinete */
.pkg-section-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.pkg-section-header .pkg-pin {
  font-size: 26px !important;
  line-height: 1 !important;
}

.pkg-section-header h3 {
  margin: 0 !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  color: #111111 !important;
  letter-spacing: 0.2px !important;
  text-transform: uppercase !important;
}

/* 1. Itens Recolhidos (Pills em Barra com Gradiente) */
.pkg-collapsed-bar {
  border-radius: 12px !important;
  padding: 11px 20px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #000000 !important;
  cursor: pointer !important;
  margin-bottom: 10px !important;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease !important;
  user-select: none !important;
  display: flex !important;
  align-items: center !important;
}

.pkg-collapsed-bar:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.02) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.pkg-collapsed-bar.draft-bar {
  background: linear-gradient(180deg, #fff7d1 0%, #fed878 100%) !important;
  box-shadow: 0 2px 5px rgba(220, 160, 20, 0.18) !important;
}

.pkg-collapsed-bar.published-bar {
  background: linear-gradient(180deg, #e4f9ea 0%, #9be5aa 100%) !important;
  box-shadow: 0 2px 5px rgba(34, 197, 94, 0.18) !important;
}

/* 2. Card de Pacote Expandido */
.pkg-expanded-card {
  border-radius: 16px !important;
  padding: 22px 26px !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.pkg-expanded-card.draft-card {
  background: #fff0bd !important; /* Pastel amarelo suave do print */
  box-shadow: 0 4px 16px rgba(210, 160, 20, 0.1) !important;
}

.pkg-expanded-card.published-card {
  background: #dcf5e4 !important; /* Pastel verde fresco do print */
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.1) !important;
}

.pkg-expanded-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

.pkg-expanded-left {
  flex: 1 !important;
  min-width: 280px !important;
  display: flex !important;
  flex-direction: column !important;
}

.pkg-expanded-num {
  font-size: 16.5px !important;
  font-weight: 900 !important;
  color: #000000 !important;
  margin-bottom: 8px !important;
}

.pkg-expanded-label {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #000000 !important;
  margin-bottom: 6px !important;
}

.pkg-input-pill {
  background: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-family: inherit !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  width: 100% !important;
  max-width: 480px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  box-sizing: border-box !important;
  margin-bottom: 12px !important;
}

.pkg-input-pill:focus {
  outline: 2px solid #5cdb88 !important;
}

/* 3 Botões de Ação diretamente abaixo do input */
.pkg-action-pills-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.btn-pkg-action {
  border: none !important;
  border-radius: 10px !important;
  padding: 8px 26px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: transform 0.15s, filter 0.15s !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

.btn-pkg-action:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.08) !important;
}

.btn-pkg-action.blue {
  background: #4f6ff6 !important;
}

.btn-pkg-action.red {
  background: #e25752 !important;
}

.btn-pkg-action.green {
  background: #62d689 !important;
}

/* Caixa de Licenças (Lilás / Azul Claro do Print) */
.pkg-lic-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.pkg-lic-title {
  font-size: 14.5px !important;
  font-weight: 900 !important;
  color: #000000 !important;
  margin-bottom: 6px !important;
  text-align: center !important;
}

.pkg-lic-box {
  background: #bfd0fe !important; /* Caixa lilás-azulada do print */
  border-radius: 14px !important;
  padding: 12px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 155px !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 8px rgba(100, 130, 240, 0.15) !important;
}

.pkg-lic-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #000000 !important;
  user-select: none !important;
}

/* Checkbox circular com check verde */
.pkg-lic-item input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  background: #ffffff !important;
  border-radius: 50% !important; /* Circular como no print! */
  display: grid !important;
  place-content: center !important;
  cursor: pointer !important;
  margin: 0 !important;
  border: none !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
}

.pkg-lic-item input[type="checkbox"]::before {
  content: "✔" !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #22c55e !important;
  transform: scale(0) !important;
  transition: transform 0.15s ease !important;
  line-height: 1 !important;
}

.pkg-lic-item input[type="checkbox"]:checked::before {
  transform: scale(1) !important;
}

.pkg-lic-item .lic-icon {
  font-size: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.pkg-lic-item .lic-name {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #000000 !important;
}

/* Faixas dentro do Pacote */
.pkg-tracks-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

.pkg-track-toggle-row {
  cursor: pointer !important;
  padding: 2px 0 !important;
}

.pkg-track-name {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #000000 !important;
  margin-bottom: 2px !important;
  text-transform: uppercase !important;
}

/* Linha com seta central */
.track-line-toggle {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 4px 0 !important;
  width: 100% !important;
}

.track-line-toggle hr {
  width: 100% !important;
  border: 0 !important;
  margin: 0 !important;
}

.track-line-toggle.gold hr {
  border-top: 2.5px solid #d49f17 !important;
}

.track-line-toggle.green hr {
  border-top: 2.5px solid #38be6a !important;
}

.track-line-toggle .track-arrow {
  position: absolute !important;
  font-size: 12px !important;
  line-height: 1 !important;
  pointer-events: none !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.track-line-toggle.gold .track-arrow {
  color: #b38308 !important;
}

.track-line-toggle.green .track-arrow {
  color: #1b7a3e !important;
}

.btn-add-track-pill {
  background: #ffffff !important;
  border: 1.5px dashed #d49f17 !important;
  color: #8c6700 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 8px 20px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-add-track-pill:hover {
  background: #fffdf5 !important;
  transform: translateY(-1px) !important;
}

/* Seta central de recolhimento no fundo do card */
.pkg-collapse-arrow-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  margin-top: 8px !important;
  line-height: 1 !important;
  user-select: none !important;
  transition: transform 0.15s ease !important;
}

.pkg-collapse-arrow-btn:hover {
  transform: translateY(-2px) !important;
}

.pkg-collapse-arrow-btn.gold {
  color: #b58900 !important;
}

.pkg-collapse-arrow-btn.green {
  color: #15803d !important;
}


/* ======================================================== */
/* HARMONIZAÇÃO DOS CARDS DE FAIXA DENTRO DE RASCUNHOS      */
/* Cores em tonalidades de amarelo/âmbar suave              */
/* ======================================================== */

.draft-card .track-card-box {
  background: #fffdf5 !important; /* Amarelo/creme suave */
  border: 2px solid #ecd18a !important; /* Borda dourada sutil */
  box-shadow: 0 4px 14px rgba(220, 160, 20, 0.08) !important;
}

.draft-card .track-card-box:hover {
  border-color: #d49f17 !important;
  box-shadow: 0 6px 18px rgba(220, 160, 20, 0.15) !important;
}

.draft-card .track-vertical-badge {
  color: #5c4300 !important;
}

.draft-card .track-input-clean {
  background: #ffffff !important;
  border: 1.5px solid #ecd18a !important;
  color: #2b1f00 !important;
}

.draft-card .track-input-clean:focus {
  border-color: #d49f17 !important;
  box-shadow: 0 0 0 3px rgba(212, 159, 23, 0.2) !important;
}

.draft-card .btn-track-action {
  background: #d49f17 !important; /* Âmbar dourado elegante */
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(212, 159, 23, 0.28) !important;
}

.draft-card .btn-track-action:hover {
  background: #b8860b !important;
  box-shadow: 0 4px 10px rgba(184, 134, 11, 0.35) !important;
}

.draft-card .btn-track-action.save {
  background: #d49f17 !important;
}

.draft-card .track-accordion-toggle::before {
  background: #ecd18a !important;
}

.draft-card .track-accordion-toggle .acc-text {
  background: #fffdf5 !important;
  color: #6d4f00 !important;
}

.draft-card .track-accordion-toggle:hover .acc-text {
  color: #b8860b !important;
}

.draft-card .track-accordion-panel {
  background: #ffffff !important;
  border: 1.5px solid #ecd18a !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(212, 159, 23, 0.06) !important;
}

.draft-card .btn-generate-ai-voice {
  background: #d49f17 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  border: none !important;
  padding: 6px 14px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

.draft-card .btn-generate-ai-voice:hover {
  background: #b8860b !important;
}

.draft-card .inline-trimmer-mount {
  width: 100% !important;
  box-sizing: border-box !important;
}


/* ======================================================== */
/* HARMONIZAÇÃO DOS BOTÕES DA FERRAMENTA DE CORTE           */
/* Cores integradas com a paleta âmbar/dourado e verde      */
/* ======================================================== */

.inline-trimmer-card {
  background: #fffdf7 !important;
  border: 1.5px solid #ecd18a !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(212, 159, 23, 0.08) !important;
}

.inline-trimmer-card .trimmer-canvas-box {
  border: 1.5px solid #ecd18a !important;
  border-radius: 12px !important;
}

.inline-trimmer-card .editor-play {
  background: #d49f17 !important; /* Âmbar dourado do tema */
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  padding: 10px 22px !important;
  cursor: pointer !important;
  box-shadow: 0 3px 8px rgba(212, 159, 23, 0.3) !important;
  transition: all 0.15s ease !important;
}

.inline-trimmer-card .editor-play:hover {
  background: #b8860b !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 12px rgba(184, 134, 11, 0.38) !important;
}

.inline-trimmer-card .editor-play.playing {
  background: #e25752 !important; /* Vermelho suave quando pausar */
}

.inline-trimmer-card .editor-reset {
  color: #8c6700 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}

.inline-trimmer-card .editor-reset:hover {
  color: #5c4300 !important;
  text-decoration: underline !important;
}

.inline-trimmer-card .editor-save {
  background: #62d689 !important; /* Verde padrão do botão Salvar */
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  padding: 10px 24px !important;
  cursor: pointer !important;
  box-shadow: 0 3px 8px rgba(98, 214, 137, 0.35) !important;
  transition: all 0.15s ease !important;
}

.inline-trimmer-card .editor-save:hover {
  background: #4ec275 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 12px rgba(78, 194, 117, 0.45) !important;
}

.inline-trimmer-card .trimmer-badge {
  background: #ecd18a !important;
  color: #5c4300 !important;
  font-weight: 900 !important;
}

.inline-trimmer-card .trimmer-time-pill {
  background: #fffdf5 !important;
  border: 1px solid #ecd18a !important;
  color: #5c4300 !important;
}