/* ============================================================
   CloudFly · Sistema de Plantillas — estilos
   Subfase [2.5]: biblioteca + editor Konva.
   ============================================================ */

/* El boton .btn-templates hereda .add-btn del dock; no necesita reglas propias. */

/* ── MODAL FULL-SCREEN ── */
#cf-templates-modal-root[hidden]{ display:none; }

.cf-tpl-modal-backdrop{
  position:fixed; inset:0; z-index:9999;
  background:rgba(10,10,18,0.78);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:0;
  animation:cfTplFadeIn .18s ease;
}
@keyframes cfTplFadeIn{ from{opacity:0;} to{opacity:1;} }

.cf-tpl-modal{
  position:relative;
  width:100%; height:100%;
  max-width:100vw; max-height:100vh;
  background:linear-gradient(165deg,#12101c 0%,var(--dark) 52%,#0d1018 100%);
  display:flex; flex-direction:column;
  overflow:hidden;
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
  color:#fff;
}

.cf-tpl-header{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
}
.cf-tpl-title{
  display:flex; align-items:center; gap:10px;
  font-size:18px; font-weight:800; letter-spacing:-0.02em;
}
.cf-tpl-title i{
  font-size:18px;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.cf-tpl-close{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:12px; border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04); color:#fff;
  font-size:18px; cursor:pointer;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.cf-tpl-close:hover{ background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.2); transform:translateY(-1px); }
.cf-tpl-close:active{ transform:translateY(0); }

.cf-tpl-body{
  flex:1; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:24px 20px 40px;
}
.cf-tpl-loading, .cf-tpl-error{
  text-align:center; color:rgba(255,255,255,0.5);
  font-size:15px; font-weight:500; padding:60px 20px;
}
.cf-tpl-library{
  max-width:1100px; margin:0 auto;
}
.cf-tpl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:18px;
}
.cf-tpl-card{
  display:flex; flex-direction:column;
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.cf-tpl-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,0.22);
  box-shadow:0 12px 30px rgba(0,0,0,0.4);
}
.cf-tpl-card-preview{
  width:100%; aspect-ratio:1/1;
  background:#0d0d14;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.cf-tpl-card-preview img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.cf-tpl-card-meta{
  padding:12px 14px;
}
.cf-tpl-card-name{
  font-size:15px; font-weight:700; color:#fff; margin-bottom:2px;
}
.cf-tpl-card-cat{
  font-size:12px; font-weight:500; color:rgba(255,255,255,0.45);
}

/* ── EDITOR ── */
.cf-tpl-body.cf-tpl-body--editor{
  padding:0; overflow:hidden; display:flex; flex-direction:column;
}
.cf-tpl-editor{ display:flex; flex-direction:column; height:100%; flex:1; min-height:0; }
.cf-tpl-editor-bar{
  flex-shrink:0; display:flex; align-items:center; gap:14px;
  padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
}
.cf-tpl-back{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:10px;
  border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04);
  color:#fff; font-size:14px; font-weight:600; cursor:pointer;
  transition:background .16s ease, border-color .16s ease;
}
.cf-tpl-back:hover{ background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.22); }
.cf-tpl-editor-name{ font-size:15px; font-weight:700; color:#fff; }
.cf-tpl-editor-spacer{ flex:1; }
.cf-tpl-editor-stage{
  flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  padding:24px; background:#0a0a12; overflow:hidden;
}
#cf-tpl-canvas-host{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.cf-tpl-editor-controls{
  flex-shrink:0; display:flex; align-items:center; gap:16px;
  padding:14px 16px; border-top:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
}
.cf-tpl-control{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:rgba(255,255,255,0.7); }
.cf-tpl-control input[type=color]{
  width:40px; height:32px; border:1px solid rgba(255,255,255,0.15);
  border-radius:8px; background:none; cursor:pointer; padding:2px;
}
.cf-tpl-hint{ font-size:12px; color:rgba(255,255,255,0.4); }