/* ─── PichForge — forge.css ─────────────────────────────────────────────────
   Tema oscuro con acentos naranja/rojo.
   Vincula en tu index.html:
     <link rel="stylesheet" href="/static/css/forge.css">
   ────────────────────────────────────────────────────────────────────────── */

/* ─── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-base   : #0f0f13;
  --bg-card   : #18181f;
  --bg-input  : #1e1e28;
  --bg-hover  : rgba(255,255,255,0.04);
  --accent    : #ff6a00;
  --accent2   : #ff8c00;
  --accent-glow: rgba(255,106,0,0.18);
  --border    : rgba(255,255,255,0.08);
  --border-acc: rgba(255,106,0,0.3);
  --text-1    : #f0eff5;
  --text-2    : #a09fb5;
  --text-3    : #5a5970;
  --radius-sm : 8px;
  --radius-md : 12px;
  --radius-lg : 16px;
  --radius-xl : 20px;
  --shadow    : 0 4px 24px rgba(0,0,0,0.4);
}

html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; }

body {
  background-color : var(--bg-base);
  background-image :
    radial-gradient(ellipse 120% 500px at 50% 180px, rgba(255,106,0,0.08) 0%, transparent 100%),
    radial-gradient(ellipse 80%  350px at 50% 700px, rgba(255,100,0,0.05) 0%, transparent 100%),
    radial-gradient(ellipse 60%  250px at 50% 1150px,rgba(255,100,0,0.03) 0%, transparent 100%);
  color      : var(--text-1);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
  min-height : 100vh;
  overflow-x : hidden;
}

/* ─── Header / Nav ─────────────────────────────────────────────────────────── */
.pf-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 16px 32px;
  background     : rgba(15,15,19,0.92);
  border-bottom  : 1px solid var(--border);
  backdrop-filter: blur(12px);
  position       : sticky;
  top            : 0;
  z-index        : 100;
  flex-wrap      : wrap;
  gap            : 12px;
}

.pf-logo {
  font-size  : 20px;
  font-weight: 700;
  color      : var(--text-1);
  letter-spacing: -0.5px;
}
.pf-logo span { color: var(--accent); }

.pf-nav-right {
  display    : flex;
  align-items: center;
  gap        : 12px;
}

/* ─── Lang select ───────────────────────────────────────────────────────────── */
.pf-lang-select,
select[data-pf="lang-select"] {
  background  : var(--bg-card);
  color       : var(--text-2);
  border      : 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding     : 6px 12px;
  font-size   : 13px;
  cursor      : pointer;
  outline     : none;
  transition  : border-color .2s;
}
.pf-lang-select:hover,
select[data-pf="lang-select"]:hover { border-color: var(--accent); color: var(--text-1); }

/* ─── Credits pill ─────────────────────────────────────────────────────────── */
.pf-credits-pill {
  display    : flex;
  align-items: center;
  gap        : 6px;
  background : rgba(255,106,0,0.1);
  border     : 1px solid var(--border-acc);
  border-radius: 999px;
  padding    : 5px 14px;
  font-size  : 13px;
  font-weight: 500;
  color      : var(--accent2);
}
.pf-credits-pill::before { content: "◆"; font-size: 10px; }

/* ─── Botón recargar ────────────────────────────────────────────────────────── */
.pf-btn-reload {
  background   : var(--accent);
  color        : #fff;
  border       : none;
  border-radius: var(--radius-sm);
  padding      : 7px 18px;
  font-size    : 13px;
  font-weight  : 600;
  cursor       : pointer;
  transition   : opacity .2s, transform .1s;
}
.pf-btn-reload:hover { opacity: .88; transform: translateY(-1px); }

/* ─── Hero ──────────────────────────────────────────────────────────────────── */
.pf-hero {
  text-align: center;
  padding   : 56px 24px 32px;
  background: radial-gradient(ellipse 70% 60% at 50% 105%, rgba(255,106,0,0.18) 0%, rgba(255,140,0,0.07) 45%, transparent 70%);
}
.pf-hero-sub {
  font-size  : 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color      : var(--accent2);
  margin-bottom: 14px;
}
.pf-hero h1 {
  font-size  : clamp(32px, 6vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 16px;
  background : linear-gradient(135deg, #fff 30%, var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pf-hero p {
  color    : var(--text-2);
  font-size: 16px;
  max-width: 540px;
  margin   : 0 auto;
}

/* ─── Main card (generador) ─────────────────────────────────────────────────── */
.pf-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding      : 28px;
  max-width    : 760px;
  margin       : 0 auto 40px;
  box-shadow   : var(--shadow);
}

/* ─── Tabs ──────────────────────────────────────────────────────────────────── */
.pf-tabs {
  display      : flex;
  background   : var(--bg-input);
  border-radius: var(--radius-md);
  padding      : 4px;
  gap          : 4px;
  margin-bottom: 22px;
  overflow-x   : auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tab {
  flex        : none;
  padding     : 9px 12px;
  border      : none;
  border-radius: var(--radius-sm);
  background  : transparent;
  color       : var(--text-2);
  font-size   : 14px;
  font-weight : 500;
  cursor      : pointer;
  transition  : background .2s, color .2s;
  white-space : nowrap;
}
.pf-tab.active,
.pf-tab:focus-visible {
  background  : var(--accent);
  color       : #fff;
  outline     : none;
}
.pf-tab:not(.active):hover { background: var(--bg-hover); color: var(--text-1); }

/* ─── Tab panels ────────────────────────────────────────────────────────────── */
.pf-panel { display: none; }
.pf-panel.active { display: block; }

/* ─── Textarea prompt ───────────────────────────────────────────────────────── */
.pf-prompt {
  width        : 100%;
  min-height   : 110px;
  background   : var(--bg-input);
  border       : 1px solid var(--border);
  border-radius: var(--radius-md);
  color        : var(--text-1);
  font-size    : 15px;
  line-height  : 1.6;
  padding      : 14px 16px;
  resize       : vertical;
  outline      : none;
  transition   : border-color .2s;
  font-family  : inherit;
}
.pf-prompt::placeholder { color: var(--text-3); }
.pf-prompt:focus { border-color: var(--accent); }

/* ─── Formatos row ──────────────────────────────────────────────────────────── */
.pf-formats-row {
  display    : flex;
  align-items: center;
  gap        : 10px;
  flex-wrap  : wrap;
  margin-top : 16px;
}
.pf-formats-label {
  font-size  : 13px;
  color      : var(--text-2);
  font-weight: 500;
}
.pf-fmt-btn {
  padding      : 5px 14px;
  border       : 1px solid var(--border);
  border-radius: 999px;
  background   : transparent;
  color        : var(--text-2);
  font-size    : 12px;
  font-weight  : 600;
  cursor       : pointer;
  transition   : all .2s;
  letter-spacing: 0.5px;
}
.pf-fmt-btn.active,
.pf-fmt-btn:focus-visible {
  background  : rgba(255,106,0,0.15);
  border-color: var(--accent);
  color       : var(--accent2);
  outline     : none;
}
.pf-fmt-btn:not(.active):hover { border-color: var(--text-2); color: var(--text-1); }

/* ─── Checkbox formatos (si usas checkboxes) ────────────────────────────────── */
.pf-formats-check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.pf-formats-check input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.pf-formats-check span { font-size: 12px; font-weight: 600; color: var(--text-2); }

/* ─── Botón principal generar ───────────────────────────────────────────────── */
.pf-btn-generate,
button[data-pf="btn-generate"] {
  background   : linear-gradient(135deg, var(--accent), #d04800);
  color        : #fff;
  border       : none;
  border-radius: var(--radius-md);
  padding      : 12px 28px;
  font-size    : 15px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : transform .15s, box-shadow .2s, opacity .2s;
  box-shadow   : 0 4px 20px rgba(255,106,0,0.35);
  white-space  : nowrap;
}
.pf-btn-generate:hover,
button[data-pf="btn-generate"]:hover {
  transform : translateY(-2px);
  box-shadow: 0 6px 28px rgba(255,106,0,0.5);
}
.pf-btn-generate:active,
button[data-pf="btn-generate"]:active { transform: translateY(0); }
.pf-btn-generate:disabled,
button[data-pf="btn-generate"]:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.pf-action-row {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  margin-top     : 18px;
  flex-wrap      : wrap;
  gap            : 12px;
}

/* ─── Upload area (imagen) ──────────────────────────────────────────────────── */
.pf-upload-area {
  border       : 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding      : 36px 24px;
  text-align   : center;
  cursor       : pointer;
  transition   : border-color .2s, background .2s;
  position     : relative;
}
.pf-upload-area:hover,
.pf-upload-area.dragover {
  border-color: var(--accent);
  background  : var(--accent-glow);
}
.pf-upload-area input[type="file"] {
  position: absolute;
  inset   : 0;
  opacity : 0;
  cursor  : pointer;
  width   : 100%;
  height  : 100%;
}
.pf-upload-icon { font-size: 32px; margin-bottom: 10px; }
.pf-upload-title { font-size: 15px; font-weight: 600; color: var(--text-1); margin-bottom: 6px; }
.pf-upload-sub   { font-size: 13px; color: var(--text-3); }
.pf-upload-preview { max-width: 100%; max-height: 200px; border-radius: var(--radius-sm); margin-top: 14px; object-fit: contain; }

.pf-extra-prompt {
  width        : 100%;
  background   : var(--bg-input);
  border       : 1px solid var(--border);
  border-radius: var(--radius-sm);
  color        : var(--text-1);
  font-size    : 14px;
  padding      : 10px 14px;
  margin-top   : 12px;
  outline      : none;
  font-family  : inherit;
  transition   : border-color .2s;
}
.pf-extra-prompt:focus { border-color: var(--accent); }
.pf-extra-prompt::placeholder { color: var(--text-3); }

/* ─── Vista selector (2 imágenes) ──────────────────────────────────────────── */
.pf-vista-label { font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.pf-vista-select {
  background   : var(--bg-input);
  border       : 1px solid var(--border);
  border-radius: var(--radius-sm);
  color        : var(--text-1);
  padding      : 7px 12px;
  font-size    : 13px;
  outline      : none;
  cursor       : pointer;
  width        : 100%;
}

/* ─── Progress bar ──────────────────────────────────────────────────────────── */
[data-pf="progress-area"] {
  margin       : 20px auto;
  max-width    : 760px;
  padding      : 20px 24px;
  background   : var(--bg-card);
  border-radius: var(--radius-md);
  border       : 1px solid var(--border-acc);
}
.pf-progress-msg  { color: var(--text-2); font-size: 14px; margin-bottom: 12px; }
.pf-progress-track {
  background   : var(--bg-input);
  border-radius: 999px;
  height       : 6px;
  overflow     : hidden;
}
.pf-progress-bar {
  height     : 100%;
  background : linear-gradient(90deg, var(--accent2), var(--accent));
  border-radius: 999px;
  transition : width .4s ease;
}
.pf-progress-sub { color: var(--text-3); font-size: 12px; margin-top: 8px; }

/* ─── Result / Visor ────────────────────────────────────────────────────────── */
[data-pf="result-area"] {
  margin   : 24px auto;
  max-width: 900px;
}
.pf-result-card {
  border       : 1px solid var(--border-acc);
  border-radius: var(--radius-lg);
  overflow     : hidden;
  background   : #0d0d14;
}
.pf-result-header {
  padding        : 14px 20px;
  background     : rgba(255,106,0,0.08);
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  flex-wrap      : wrap;
  gap            : 10px;
  border-bottom  : 1px solid var(--border-acc);
}
.pf-result-title { color: var(--accent2); font-weight: 600; font-size: 15px; }
.pf-btn-viewer {
  background   : var(--accent);
  color        : #fff;
  border       : none;
  border-radius: var(--radius-sm);
  padding      : 8px 20px;
  font-size    : 13px;
  font-weight  : 600;
  cursor       : pointer;
  text-decoration: none;
  transition   : opacity .2s;
}
.pf-btn-viewer:hover { opacity: .85; }
.pf-downloads {
  padding    : 14px 20px;
  display    : flex;
  align-items: center;
  gap        : 10px;
  flex-wrap  : wrap;
  border-top : 1px solid var(--border);
}
.pf-downloads-label { color: var(--text-3); font-size: 12px; }
.pf-dl-btn {
  padding      : 7px 16px;
  background   : var(--bg-hover);
  border       : 1px solid var(--border);
  border-radius: var(--radius-sm);
  color        : var(--text-2);
  font-size    : 13px;
  cursor       : pointer;
  text-decoration: none;
  transition   : all .2s;
  display      : inline-block;
}
.pf-dl-btn:hover { border-color: var(--accent); color: var(--accent2); background: var(--accent-glow); }

/* ─── Catálogo / Diseños base ───────────────────────────────────────────────── */
.pf-section { max-width: 1100px; margin: 0 auto; padding: 0 24px 60px; }
.pf-section-title { font-size: 26px; font-weight: 700; margin-bottom: 6px; }
.pf-section-sub   { color: var(--text-2); font-size: 14px; margin-bottom: 24px; }

.pf-filters {
  display    : flex;
  gap        : 8px;
  flex-wrap  : wrap;
  margin-bottom: 24px;
}
.pf-filter-btn {
  padding      : 6px 18px;
  border       : 1px solid var(--border);
  border-radius: 999px;
  background   : transparent;
  color        : var(--text-2);
  font-size    : 13px;
  cursor       : pointer;
  transition   : all .2s;
}
.pf-filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pf-filter-btn:not(.active):hover { border-color: var(--text-2); color: var(--text-1); }

.pf-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap                  : 16px;
}

.pf-design-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--radius-md);
  padding      : 20px;
  cursor       : pointer;
  transition   : border-color .2s, transform .2s, box-shadow .2s;
  position     : relative;
}
.pf-design-card:hover {
  border-color: var(--border-acc);
  transform   : translateY(-3px);
  box-shadow  : 0 8px 24px rgba(0,0,0,0.4);
}
.pf-design-icon {
  font-size    : 28px;
  margin-bottom: 12px;
  display      : block;
}
.pf-design-name    { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.pf-design-desc    { color: var(--text-2); font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
.pf-design-meta    { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pf-design-tag {
  font-size    : 11px;
  font-weight  : 600;
  padding      : 3px 8px;
  border-radius: 999px;
  background   : var(--bg-input);
  color        : var(--text-3);
  letter-spacing: 0.3px;
}
.pf-design-price   { font-size: 18px; font-weight: 700; color: var(--accent2); }
.pf-badge-top {
  position     : absolute;
  top          : 14px;
  right        : 14px;
  font-size    : 10px;
  font-weight  : 700;
  padding      : 3px 8px;
  border-radius: 999px;
  background   : rgba(255,106,0,0.2);
  color        : var(--accent2);
  letter-spacing: 0.5px;
}

/* ─── Divider ───────────────────────────────────────────────────────────────── */
.pf-divider {
  border     : none;
  border-top : 1px solid var(--border);
  margin     : 40px auto;
  max-width  : 1100px;
}

/* ─── Main wrapper / container ──────────────────────────────────────────────── */
.pf-main { padding: 0 24px; }
.pf-container { max-width: 760px; margin: 0 auto; }

/* ─── Spinner / loading ─────────────────────────────────────────────────────── */
.pf-spinner {
  width       : 18px;
  height      : 18px;
  border      : 2px solid rgba(255,255,255,0.2);
  border-top  : 2px solid #fff;
  border-radius: 50%;
  display     : inline-block;
  animation   : pf-spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }

/* ─── Toast ─────────────────────────────────────────────────────────────────── */
.pf-toast {
  position     : fixed;
  bottom       : 24px;
  right        : 24px;
  background   : var(--bg-card);
  border       : 1px solid var(--border-acc);
  border-radius: var(--radius-md);
  padding      : 14px 20px;
  font-size    : 14px;
  color        : var(--text-1);
  box-shadow   : 0 8px 32px rgba(0,0,0,0.5);
  z-index      : 999;
  animation    : pf-toast-in .3s ease;
  max-width    : 320px;
}
@keyframes pf-toast-in { from { opacity: 0; transform: translateY(12px); } }

/* ─── Utilities ─────────────────────────────────────────────────────────────── */
.pf-mt-16 { margin-top: 16px; }
.pf-mt-24 { margin-top: 24px; }
.pf-text-2 { color: var(--text-2); }
.pf-text-3 { color: var(--text-3); }
.pf-text-sm { font-size: 13px; }
.pf-hidden { display: none !important; }
.pf-flex { display: flex; align-items: center; gap: 10px; }
.pf-flex-wrap { flex-wrap: wrap; }

/* ─── Product picker ────────────────────────────────────────────────────────── */
@keyframes wz-spin { to { transform: rotate(360deg); } }

.pf-products {
  max-width: 900px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.pf-products-label {
  width: 100%;
  text-align: center;
  font-family: ui-monospace, 'Cascadia Code', 'SF Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #2e2e36;
  margin-bottom: 0.125rem;
}

.pf-product-card {
  background: #111116;
  border: 1px solid #1f1f26;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
}
.pf-product-card:active { transform: scale(0.988); }
.pf-product-card:hover {
  border-color: rgba(255,106,0,0.45);
  box-shadow: 0 0 0 1px rgba(255,106,0,0.12), 0 6px 28px rgba(255,106,0,0.06);
}
.pf-product-card--featured { border-color: rgba(255,106,0,0.3); }
.pf-product-card--featured::after {
  content: 'MÁS POPULAR';
  position: absolute;
  top: 0; right: 0;
  font-family: ui-monospace, 'Cascadia Code', 'SF Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  background: var(--accent);
  color: #fff;
  z-index: 2;
}

.pf-product-mv {
  width: 100%;
  height: 200px;
  background: #070709;
  display: block;
}

.pf-product-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.pf-product-tag {
  font-family: ui-monospace, 'Cascadia Code', 'SF Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff6a00;
  margin-bottom: 4px;
  opacity: 0.85;
}
.pf-product-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f0eff5;
  line-height: 1.2;
}
.pf-product-price {
  font-family: ui-monospace, 'Cascadia Code', 'SF Mono', monospace;
  font-size: 12px;
  color: #3a3948;
  margin: 3px 0;
}
.pf-price-val { color: #8a8a9a; font-weight: 600; }
.pf-price-gratis { color: #ff6a00; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; }
.pf-product-desc {
  font-size: 12.5px;
  color: #454553;
  line-height: 1.5;
  margin: 3px 0 6px;
}
.pf-product-manual {
  font-family: ui-monospace, 'Cascadia Code', 'SF Mono', monospace;
  font-size: 10px;
  color: #ff6a00;
  text-decoration: none;
  letter-spacing: 0.04em;
  opacity: 0.6;
  transition: opacity 0.14s;
  display: inline-block;
  margin-top: 2px;
  align-self: flex-start;
}
.pf-product-manual:hover { opacity: 1; }

@media (min-width: 660px) {
  .pf-products { flex-direction: row; gap: 0.75rem; }
  .pf-products-label { flex-basis: 100%; }
  .pf-product-card { flex: 1; min-width: 0; }
  .pf-product-mv { height: 240px; }
}

/* ─── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .pf-header { padding: 12px 16px; }
  .pf-hero   { padding: 36px 16px 24px; }
  .pf-card   { padding: 18px 16px; border-radius: var(--radius-lg); margin-bottom: 24px; }
  .pf-main   { padding: 0 12px; }
  .pf-section{ padding: 0 12px 40px; }
  .pf-hero h1{ font-size: 32px; }
  .pf-tabs   { gap: 2px; }
  .pf-tab    { font-size: 12px; padding: 8px 8px; }
}