/* ==========================================================================
   Cartas TCG: pestaña del generador (estudio oscuro, como el artefacto) y
   baraja lateral durante la partida.
   ========================================================================== */

/* ---------- pestañas de la pantalla de selección ---------- */
.tabs{display:flex;gap:8px;justify-content:center;margin:0 0 16px}
.tab{
  font:inherit;font-size:14px;font-weight:600;padding:9px 20px;cursor:pointer;
  background:var(--panel);border:2px solid var(--line);border-radius:10px;color:var(--ink-soft);
}
.tab:hover{border-color:var(--green)}
.tab.sel{background:var(--green);border-color:var(--green-d);color:#fff}

/* ---------- estudio del generador ---------- */
:root{
  --cr-bg:#0c1310; --cr-panel:#121b15; --cr-input:#0f1712;
  --cr-border:#253326; --cr-border2:#2e402f;
  --cr-text:#edf1e8; --cr-dim:#9caf98; --cr-faint:#6f8270;
  --cr-gold:#d9c164; --cr-gold-str:#e8cf7d;
  --cr-gold-line:rgba(217,193,100,.35); --cr-gold-bg:rgba(217,193,100,.1);
}

.creador{
  display:grid;grid-template-columns:180px minmax(300px,380px) 1fr;gap:0;
  background:var(--cr-bg);color:var(--cr-text);
  border:2px solid var(--cr-border);border-radius:14px;overflow:hidden;
  font-family:"Inter",-apple-system,"Segoe UI",sans-serif;
}
.creador-lista{
  background:var(--cr-panel);border-right:1px solid var(--cr-border);
  padding:16px 12px;max-height:78vh;overflow-y:auto;
}
.creador-lista h3{
  margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--cr-gold);
}
.cartaitem{
  display:flex;justify-content:space-between;align-items:center;gap:6px;width:100%;
  background:transparent;border:1px solid transparent;border-radius:7px;
  color:var(--cr-dim);font-size:12.5px;text-align:left;padding:7px 9px;cursor:pointer;margin-bottom:2px;
}
.cartaitem:hover{background:var(--cr-input);color:var(--cr-text);border-color:var(--cr-border2)}
.cartaitem.sel{background:var(--cr-gold-bg);border-color:var(--cr-gold-line);color:var(--cr-gold-str);font-weight:600}
.cartaitem b{font-size:13px}
.cartaitem b.hay{color:#7ec97e}
.cartaitem b.no{color:var(--cr-faint)}

.creador-form{
  background:var(--cr-panel);border-right:1px solid var(--cr-border);
  padding:22px 20px 28px;max-height:78vh;overflow-y:auto;
}
.creador-previa{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:26px 20px;
  background:radial-gradient(ellipse 70% 55% at 50% 42%, rgba(217,193,100,.14) 0%, rgba(217,193,100,0) 65%), var(--cr-bg);
  max-height:78vh;overflow-y:auto;
}
#cartaPrevia{
  width:100%;max-width:360px;border-radius:12px;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.75),0 12px 28px -10px rgba(0,0,0,.55);
  touch-action:none;cursor:grab;
}
#cartaPrevia:active{cursor:grabbing}

.editor-section{margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--cr-border)}
.editor-section:last-of-type{border-bottom:none}
.section-title{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  color:var(--cr-gold);margin:0 0 12px;
}
.section-body{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:5px}
.field-label{font-size:12.5px;color:var(--cr-dim);font-weight:500}
.field-hint{font-size:11px;color:var(--cr-faint)}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.creador input[type="text"],
.creador input[type="number"],
.creador select,
.creador textarea{
  background:var(--cr-input);border:1px solid var(--cr-border2);border-radius:7px;
  color:var(--cr-text);padding:8px 10px;font-size:13.5px;width:100%;font-family:inherit;
}
.creador textarea{resize:vertical;min-height:60px;line-height:1.45}
.creador .italic-input{font-style:italic}
.creador input:focus,.creador select:focus,.creador textarea:focus{
  outline:none;border-color:var(--cr-gold);box-shadow:0 0 0 3px var(--cr-gold-bg);
}
.creador select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--cr-dim) 50%),
                   linear-gradient(135deg,var(--cr-dim) 50%,transparent 50%);
  background-position:calc(100% - 16px) center,calc(100% - 11px) center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px;
}

.file-input{font-size:12.5px;color:var(--cr-dim);padding:6px 0}
.file-input::file-selector-button{
  background:var(--cr-gold-bg);border:1px solid var(--cr-gold-line);color:var(--cr-gold-str);
  border-radius:6px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;margin-right:10px;
}

.framing-controls{display:flex;flex-direction:column;gap:8px}
.zoom-slider{width:100%;accent-color:var(--cr-gold);cursor:pointer}
.framing-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.reset-framing-btn{
  background:transparent;border:1px solid var(--cr-border2);color:var(--cr-dim);
  border-radius:6px;padding:5px 10px;font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.reset-framing-btn:hover{border-color:var(--cr-gold-line);color:var(--cr-gold-str)}

.toggle-row{display:flex;gap:20px;margin-bottom:2px}
.toggle{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--cr-text);cursor:pointer}
.toggle input{accent-color:var(--cr-gold);width:16px;height:16px;cursor:pointer}

.stat-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.terrain-inputs{display:flex;flex-direction:column;gap:10px}

.export-actions{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.print-btn,.download-btn{
  width:100%;padding:12px 14px;border-radius:8px;font-weight:700;font-size:13.5px;cursor:pointer;
  font-family:inherit;
}
.print-btn{
  background:linear-gradient(155deg,#e8cf7d 0%,#c9a63d 55%,#96762a 100%);
  color:#241c0f;border:none;box-shadow:0 6px 18px rgba(201,166,61,.25);
}
.download-btn{background:#17221b;border:1px solid var(--cr-gold-line);color:var(--cr-gold-str)}
.download-btn:hover{border-color:var(--cr-gold);background:var(--cr-gold-bg)}
.export-status{margin:2px 0 0;font-size:12px;color:var(--cr-dim);text-align:center;min-height:16px}
.export-status.ok{color:var(--cr-gold-str)}
.export-status.error{color:#e08a7c}

@media (max-width:1100px){
  .creador{grid-template-columns:150px 1fr}
  .creador-previa{grid-column:1 / -1;border-top:1px solid var(--cr-border)}
}

/* ---------- baraja durante la partida ---------- */
.baraja{
  background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:8px 10px 10px;
}
.baraja h3{
  margin:2px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-soft);
}
.barajagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.minicarta{
  position:relative;padding:0;border:2px solid var(--line);border-radius:7px;overflow:hidden;
  background:#fff;cursor:pointer;line-height:0;
}
.minicarta:hover{border-color:var(--green);transform:translateY(-2px)}
.minicarta img{width:100%;display:block}
.minicarta.muerta{filter:grayscale(1);opacity:.45}
.minicarta .quien{
  position:absolute;left:3px;bottom:3px;display:flex;gap:3px;line-height:0;
}
.minicarta .quien i{
  width:9px;height:9px;border-radius:50%;display:block;border:1px solid #fff;
  box-shadow:0 0 2px rgba(0,0,0,.6);
}
.minicarta .quien i.p0{background:var(--p0)}
.minicarta .quien i.p1{background:var(--p1)}
.minicarta .quien i.out{opacity:.35}
.sincartas{margin:4px 0 0;font-size:11px;color:var(--ink-soft);line-height:1.4}

#cartaZoomOverlay{cursor:zoom-out}
.cartazoom{display:flex;flex-direction:column;align-items:center;gap:12px}
.cartazoom img{
  max-height:86vh;max-width:92vw;border-radius:14px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.8);
}
.cartazoom .cerrar{
  font:inherit;font-size:13px;padding:8px 18px;border-radius:8px;cursor:pointer;
  background:var(--panel);border:2px solid var(--line);color:var(--ink);
}

/* ---------- cartas enlazadas a un animal ---------- */
.enlaces{width:100%;max-width:360px;margin:14px auto 0}
.enlaces h3{
  margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--cr-gold);
}
.enlacegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;margin-bottom:10px}
.enlace{
  position:relative;background:var(--cr-input);border:1px solid var(--cr-border2);
  border-radius:8px;overflow:hidden;padding-bottom:2px;
}
.enlace img{width:100%;display:block;cursor:zoom-in}
.enlace.falta{border-color:#7a4a3a}
.enlace .nohay{
  display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:6.3/8.8;font-size:9.5px;color:#e08a7c;padding:4px;
}
.enlacenom{
  display:block;font-size:8.5px;color:var(--cr-faint);padding:2px 4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.enlace .quitar{
  position:absolute;top:3px;right:3px;width:20px;height:20px;padding:0;line-height:1;
  border-radius:50%;border:1px solid var(--cr-border2);background:rgba(12,19,16,.85);
  color:var(--cr-dim);font-size:11px;cursor:pointer;
}
.enlace .quitar:hover{border-color:#e08a7c;color:#e08a7c;background:rgba(40,16,12,.95)}
.enlaceaviso{margin:6px 0 0;font-size:11px;color:var(--cr-dim);line-height:1.4;min-height:14px}
.enlaceaviso.ok{color:var(--cr-gold-str)}
.enlaceaviso.mal{color:#e08a7c}

.zoomnav{display:flex;align-items:center;gap:14px;color:#fff;font-size:13px}
.zoomnav button{
  font:inherit;font-size:20px;line-height:1;padding:2px 14px;border-radius:8px;cursor:pointer;
  background:var(--panel);border:2px solid var(--line);color:var(--ink);
}