/* ============================================================
   O-KIVA · CSS v2 additions — shows, storage, uploads
   Incluir en header.php DESPUÉS de main.css
   ============================================================ */

/* ── Show cards (explorar y espectáculo) ─────────────────── */
.show-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  border: 1px solid var(--card-border);
  transition: transform .35s var(--transition), border-color .3s, box-shadow .35s var(--transition);
  text-decoration: none;
  display: block;
  background: var(--bg-3);
}
.show-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 169, 97, .4);
  box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 0 30px rgba(201,169,97,.1);
}
.show-card__photo { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--transition); }
.show-card:hover .show-card__photo { transform: scale(1.04); }
.show-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,8,5,.97) 0%, rgba(10,8,5,.4) 55%, transparent 100%);
}
.show-card__body    { position:absolute; bottom:0; left:0; right:0; padding:1.4rem; }
.show-card__cat     { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:.4rem; }
.show-card__name    { font-family:'Cormorant Garamond',serif; font-size:1.25rem; margin-bottom:.2rem; color:var(--cream); line-height:1.2; }
.show-card__artist  { font-size:.75rem; color:var(--cream-3); margin-bottom:.35rem; }
.show-card__price   { font-size:.78rem; color:var(--gold-light); }
.show-card__city    { font-size:.72rem; color:var(--cream-3); margin-top:.2rem; }
.show-card__demo {
  position:absolute; top:.85rem; right:.85rem;
  background:rgba(201,169,97,.15); border:1px solid rgba(201,169,97,.4);
  color:var(--gold); font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.12em; text-transform:uppercase; padding:.2rem .55rem;
  border-radius:var(--radius-sm);
}

/* ── Storage bar ─────────────────────────────────────────── */
.storage-bar { height:6px; background:rgba(255,255,255,.07); border-radius:3px; overflow:hidden; }
.storage-bar__fill {
  height:100%; border-radius:3px; transition:width .6s ease;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
}
.storage-bar__fill--warn   { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.storage-bar__fill--danger { background: linear-gradient(90deg, var(--danger), #f87171); }

/* ── Upload zones ─────────────────────────────────────────── */
.upload-zone {
  border: 2px dashed rgba(201,169,97,.25);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all .25s;
  position: relative;
}
.upload-zone:hover, .upload-zone.dragging {
  border-color: var(--gold);
  background: rgba(201,169,97,.04);
}
.upload-zone input[type=file] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width:100%; height:100%;
}
.upload-progress {
  height: 3px; background: rgba(255,255,255,.08);
  border-radius: 2px; overflow: hidden; margin-top: .75rem; display: none;
}
.upload-progress-bar {
  height: 100%; width: 0; background: var(--gold); transition: width .3s;
}

/* ── Performers form ─────────────────────────────────────── */
.perf-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 38px;
  gap: .6rem;
  align-items: end;
  margin-bottom: .6rem;
}
.btn-add-perf {
  background: rgba(201,169,97,.1);
  border: 1px dashed rgba(201,169,97,.4);
  border-radius: var(--radius-md);
  color: var(--gold);
  padding: .6rem 1rem;
  cursor: pointer;
  font-size: .82rem;
  width: 100%;
  text-align: center;
  margin-top: .5rem;
  transition: all .2s;
}
.btn-add-perf:hover { background: rgba(201,169,97,.15); border-color: var(--gold); }
.btn-del-perf {
  background: rgba(224,91,91,.1);
  border: 1px solid rgba(224,91,91,.3);
  border-radius: var(--radius-md);
  color: #e05b5b; width:38px; height:38px;
  cursor: pointer; font-size:.9rem;
  display: flex; align-items:center; justify-content:center; flex-shrink: 0;
}

/* ── Travel options radio ────────────────────────────────── */
.travel-options { display:flex; gap:.75rem; flex-wrap:wrap; }
.travel-opt { flex:1; min-width:130px; }
.travel-opt input[type=radio] { display: none; }
.travel-opt label {
  display: flex; flex-direction: column; gap: .3rem;
  border: 1px solid rgba(201,169,97,.2);
  border-radius: var(--radius-md);
  padding: .8rem 1rem;
  cursor: pointer; transition: all .2s;
  font-size: .82rem; color: var(--cream-2);
}
.travel-opt label strong { font-size:.84rem; color:var(--cream); }
.travel-opt input:checked + label {
  border-color: var(--gold);
  background: rgba(201,169,97,.07);
  color: var(--gold);
}
.travel-opt label:hover { border-color: rgba(201,169,97,.4); }

/* ── Photo grid (show editor) ────────────────────────────── */
.photo-grid-show {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  margin-top: .75rem;
}
.photo-thumb-show {
  position: relative; aspect-ratio:1;
  border-radius: var(--radius-md); overflow:hidden;
  border: 2px solid transparent; transition:border-color .2s;
}
.photo-thumb-show.primary { border-color: var(--gold); }
.photo-thumb-show img { width:100%; height:100%; object-fit:cover; }
.photo-actions {
  position:absolute; bottom:0; left:0; right:0;
  background: rgba(0,0,0,.78);
  display: flex; gap:.25rem; padding:.3rem;
  opacity:0; transition:opacity .2s;
}
.photo-thumb-show:hover .photo-actions { opacity:1; }
.photo-actions button {
  flex:1; background:none; border:none;
  color:#fff; font-size:.6rem; cursor:pointer;
  padding:.2rem; border-radius:3px; font-family:var(--font-mono);
}
.photo-actions button:hover { background:rgba(255,255,255,.15); }

/* ── Video embed ─────────────────────────────────────────── */
.video-wrap {
  position: relative; padding-bottom:56.25%;
  border-radius: var(--radius-lg); overflow:hidden;
  background:var(--bg-3); border:1px solid var(--card-border);
}
.video-wrap video, .video-wrap iframe {
  position:absolute; top:0; left:0; width:100%; height:100%;
}

/* ── Show status badges ──────────────────────────────────── */
.badge--pending  { background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.3); color:#f59e0b; }
.badge--approved { background:rgba(74,222,128,.1);  border:1px solid rgba(74,222,128,.3); color:#4ade80; }
.badge--rejected { background:rgba(224,91,91,.1);   border:1px solid rgba(224,91,91,.3);  color:#e05b5b; }
.badge--draft    { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);color:var(--cream-3); }

/* ── Currency switcher ───────────────────────────────────── */
.currency-switcher {
  display:flex; align-items:center; gap:.6rem;
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius: var(--radius-md); padding:.4rem .75rem;
}
.currency-switcher select {
  background:transparent; border:none;
  color:var(--cream-2); font-size:.8rem;
  outline:none; cursor:pointer; font-family:var(--font-mono);
}

/* ── Artist chip ─────────────────────────────────────────── */
.artist-chip {
  display:flex; align-items:center; gap:.85rem;
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius-lg); padding:1rem;
  text-decoration:none; transition:border-color .2s;
}
.artist-chip:hover { border-color:rgba(201,169,97,.4); }
.artist-chip__photo {
  width:46px; height:46px; border-radius:50%;
  object-fit:cover; border:1px solid rgba(201,169,97,.3); flex-shrink:0;
}

/* ── Step indicator v2 ───────────────────────────────────── */
.steps-v2 { display:flex; align-items:center; margin-bottom:2.5rem; }
.step-v2  { flex:1; display:flex; flex-direction:column; align-items:center; gap:.45rem; position:relative; }
.step-v2:not(:last-child)::after {
  content:''; position:absolute; top:20px; left:50%; width:100%;
  height:1px; background:rgba(201,169,97,.15);
}
.step-v2--active:not(:last-child)::after,
.step-v2--done:not(:last-child)::after  { background:var(--gold); }
.step-v2__dot {
  width:40px; height:40px; border-radius:50%;
  border:1.5px solid rgba(201,169,97,.3);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.85rem;
  color:var(--cream-3); background:var(--bg);
  position:relative; z-index:1; transition:all .3s; font-weight:500;
}
.step-v2--active .step-v2__dot { background:var(--gold); color:var(--bg); border-color:var(--gold); }
.step-v2--done   .step-v2__dot { background:var(--gold-dark); color:var(--bg); border-color:var(--gold-dark); }
.step-v2__label {
  font-size:.72rem; font-family:var(--font-mono);
  letter-spacing:.08em; color:var(--cream-3); text-transform:uppercase;
}
.step-v2--active .step-v2__label { color:var(--gold); }

/* ── Country select ──────────────────────────────────────── */
.country-select {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(201,169,97,.2);
  border-radius:var(--radius-md);
  color:var(--cream); font-size:.95rem;
  padding:.75rem 1rem; width:100%;
  outline:none; cursor:pointer; transition:border-color .2s;
}
.country-select:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,169,97,.1); }
.currency-chip {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(201,169,97,.1); border:1px solid rgba(201,169,97,.3);
  border-radius:100px; padding:.3rem .9rem;
  font-family:var(--font-mono); font-size:.75rem; color:var(--gold);
  margin-top:.5rem;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:640px) {
  .perf-row              { grid-template-columns:1fr; }
  .photo-grid-show       { grid-template-columns:repeat(2,1fr); }
  .travel-options        { flex-direction:column; }
  .travel-opt            { min-width:100%; }
  .show-card__name       { font-size:1.05rem; }
}
