/* ============================================================
   TuCelebración · tc-editor-ui.css  (v2.0.1)
   ------------------------------------------------------------
   EL CONFIGURADOR

   Cambio principal: "Efecto animado" y "Stickers decorativos"
   dejan de ser dos <select> de texto. Elegir entre "Luciérnagas"
   y "Polvo estelar" leyendo dos palabras obliga a probar uno por
   uno; con miniaturas animadas se elige de un vistazo.

   El resto son ajustes de comodidad del panel: campos más
   grandes, secciones mejor separadas y la barra de acciones
   siempre a mano.
   ============================================================ */


/* ============================================================
   1 · PICKER VISUAL (efectos y stickers)
   ============================================================ */

.jcl-picker{
  margin: 6px 0 4px;
}

.jcl-picker-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.jcl-picker-head b{
  font-size:12.5px;
  font-weight:800;
  color:#172033;
}

.jcl-picker-current{
  font-size:11.5px;
  font-weight:700;
  color:#5f6877;
}

/* Agrupación por familia (Luz, Naturaleza, Celebración…).
   Sin los rótulos, 16 miniaturas seguidas se leen como ruido. */
.jcl-picker-group{
  margin-top:10px;
}
.jcl-picker-group > span{
  display:block;
  margin:0 0 6px 2px;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8490a3;
}

.jcl-picker-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap:8px;
}

/* --- Miniatura --- */
.jcl-tile{
  position:relative;
  display:block;
  padding:0;
  border:1px solid #dfe6ee;
  border-radius:13px;
  background:#0f1420;
  cursor:pointer;
  overflow:hidden;
  text-align:left;
  transition:
    border-color .2s ease,
    box-shadow .25s ease,
    transform .25s cubic-bezier(.34,1.4,.5,1);
  -webkit-tap-highlight-color: transparent;
}

.jcl-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15,23,42,.16);
}

.jcl-tile:focus-visible{
  outline:none;
  border-color:#86bfa3;
  box-shadow: 0 0 0 3px rgba(134,191,163,.28);
}

/* Lienzo donde corre el efecto o se dibuja el sticker.
   Fondo oscuro fijo: la mayoría de los efectos son luminosos y
   sobre blanco no se verían. */
.jcl-tile-canvas{
  position:relative;
  aspect-ratio: 1 / 1;
  overflow:hidden;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(155deg, #131826 0%, #0a0d15 100%);
  --tc-primary: var(--jcl-tile-accent, #d4af37);
}

.jcl-tile-name{
  display:block;
  padding:6px 7px 7px;
  background:#fff;
  color:#172033;
  font-size:10.5px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.005em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* --- Seleccionada --- */
.jcl-tile.is-selected{
  border-color:#172033;
  box-shadow: 0 0 0 2px #172033;
}
.jcl-tile.is-selected .jcl-tile-name{
  background:#172033;
  color:#fff;
}
.jcl-tile.is-selected::after{
  content:"✓";
  position:absolute;
  top:6px; right:6px;
  z-index:6;
  display:grid;
  place-items:center;
  width:18px; height:18px;
  border-radius:50%;
  background:#86bfa3;
  color:#0b1220;
  font-size:11px;
  font-weight:900;
  line-height:1;
}

/* La opción "sin efecto" no tiene nada que animar: se marca con
   una diagonal para que no parezca una miniatura rota. */
.jcl-tile[data-slug="ninguno"] .jcl-tile-canvas::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    rgba(255,255,255,.22) 50%,
    transparent calc(50% + 1px));
}

/* --- Intensidad --- */
.jcl-intensity{
  display:flex;
  gap:6px;
  margin-top:11px;
  padding:4px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
}
.jcl-intensity button{
  flex:1;
  min-height:32px;
  padding:0 8px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#5f6877;
  font-size:11.5px;
  font-weight:800;
  cursor:pointer;
  transition: background-color .2s ease, color .2s ease;
}
.jcl-intensity button:hover{ background:#eef2f7; }
.jcl-intensity button.is-active{
  background:#172033;
  color:#fff;
}

/* --- Aviso cuando el motor recorta partículas --- */
.jcl-picker-note{
  margin:9px 2px 0;
  font-size:10.5px;
  line-height:1.45;
  color:#8490a3;
}

/* El select original queda en el DOM (algún script del plugin
   principal puede leerlo), pero fuera de la vista. */
.jcl-select-hidden{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}


/* ============================================================
   2 · PANEL DEL CONFIGURADOR
   Ajustes de comodidad, sin tocar la estructura.
   ============================================================ */

body.page-id-2987 .tc-editor-panel,
body.page-id-3020 .tc-editor-panel,
body.page-id-2987 .tc-editor-sidebar,
body.page-id-3020 .tc-editor-sidebar{
  scroll-behavior:smooth;
}

/* Campos: 44px de alto mínimo es el umbral cómodo para tocar con
   el pulgar sin errar. */
body.page-id-2987 .tc-editor-panel input:not([type="checkbox"]):not([type="range"]),
body.page-id-3020 .tc-editor-panel input:not([type="checkbox"]):not([type="range"]),
body.page-id-2987 .tc-editor-panel select,
body.page-id-3020 .tc-editor-panel select,
body.page-id-2987 .tc-editor-panel textarea,
body.page-id-3020 .tc-editor-panel textarea{
  min-height:44px;
  border-radius:12px;
  border:1px solid #d9e1ea;
  background:#fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}

body.page-id-2987 .tc-editor-panel input:focus,
body.page-id-3020 .tc-editor-panel input:focus,
body.page-id-2987 .tc-editor-panel select:focus,
body.page-id-3020 .tc-editor-panel select:focus,
body.page-id-2987 .tc-editor-panel textarea:focus,
body.page-id-3020 .tc-editor-panel textarea:focus{
  outline:none;
  border-color:#86bfa3;
  box-shadow:0 0 0 3px rgba(134,191,163,.20);
}

/* Barra de progreso de la invitación (3/5): degradado y
   transición, para que se sienta un avance y no un salto. */
body.page-id-2987 .tc-progress-bar span,
body.page-id-3020 .tc-progress-bar span,
body.page-id-2987 .tc-editor-progress-fill,
body.page-id-3020 .tc-editor-progress-fill{
  background: linear-gradient(90deg, #86bfa3, #3f9e78) !important;
  border-radius:999px;
  transition: width .5s cubic-bezier(.22,1,.36,1);
}

/* Miniaturas de template: marco de selección más claro. */
body.page-id-2987 .tc-template-option.is-active,
body.page-id-3020 .tc-template-option.is-active,
body.page-id-2987 .tc-template-card.is-selected,
body.page-id-3020 .tc-template-card.is-selected{
  box-shadow:0 0 0 2px #172033;
}


/* ============================================================
   3 · MODO OSCURO DEL PANEL
   Cuando el template elegido es oscuro, el panel blanco al lado
   de una invitación negra encandila. Se atenúa el picker para
   que acompañe.
   ============================================================ */
body.jcl-tc-editor-theme-dark .jcl-picker-head b{ color:#f1f5f9; }
body.jcl-tc-editor-theme-dark .jcl-picker-current,
body.jcl-tc-editor-theme-dark .jcl-picker-note{ color:rgba(241,245,249,.6); }
body.jcl-tc-editor-theme-dark .jcl-picker-group > span{ color:rgba(241,245,249,.45); }
body.jcl-tc-editor-theme-dark .jcl-tile{ border-color:rgba(255,255,255,.14); }
body.jcl-tc-editor-theme-dark .jcl-tile-name{ background:rgba(255,255,255,.06); color:#e7edf5; }
body.jcl-tc-editor-theme-dark .jcl-tile.is-selected{ border-color:#86bfa3; box-shadow:0 0 0 2px #86bfa3; }
body.jcl-tc-editor-theme-dark .jcl-tile.is-selected .jcl-tile-name{ background:#86bfa3; color:#0b1220; }
body.jcl-tc-editor-theme-dark .jcl-intensity{ border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.04); }
body.jcl-tc-editor-theme-dark .jcl-intensity button{ color:rgba(241,245,249,.7); }
body.jcl-tc-editor-theme-dark .jcl-intensity button:hover{ background:rgba(255,255,255,.08); }
body.jcl-tc-editor-theme-dark .jcl-intensity button.is-active{ background:#86bfa3; color:#0b1220; }


@media (prefers-reduced-motion: reduce){
  .jcl-tile{ transition:none; }
  .jcl-tile:hover{ transform:none; }
}

/* ============================================================
   4 · INTEGRACIÓN DENTRO DE “ESTILO VISUAL” (v2.0.1)
   Los dos catálogos viven dentro del acordeón del panel, no como
   elementos hermanos de .tc-panel dentro de la grilla principal.
   ============================================================ */

.jcl-visual-decor{
  width:100%;
  min-width:0;
  margin:14px 0 2px;
  box-sizing:border-box;
}

.jcl-visual-decor .jcl-picker{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}

.jcl-visual-decor .jcl-picker + .jcl-picker{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #e2e8f0;
}

.tc-panel .jcl-picker-head,
.tc-edit-form .jcl-picker-head{
  min-width:0;
}

.tc-panel .jcl-picker-current,
.tc-edit-form .jcl-picker-current{
  min-width:0;
  max-width:48%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:right;
}

.tc-panel .jcl-picker-grid,
.tc-edit-form .jcl-picker-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.tc-panel .jcl-tile,
.tc-edit-form .jcl-tile{
  width:100%;
  min-width:0;
}

.tc-panel .jcl-tile-name,
.tc-edit-form .jcl-tile-name{
  padding-inline:5px;
  font-size:10px;
}

.jcl-native-label-hidden{
  display:none!important;
}

/* El fondo exterior puede ser oscuro según el template, pero el panel
   continúa siendo claro. Estos overrides evitan texto blanco sobre el
   acordeón blanco sin alterar las miniaturas del nuevo diseño. */
body.jcl-tc-editor-theme-dark .tc-panel .jcl-picker-head b,
body.jcl-tc-editor-theme-dark .tc-edit-form .jcl-picker-head b{
  color:#172033;
}
body.jcl-tc-editor-theme-dark .tc-panel .jcl-picker-current,
body.jcl-tc-editor-theme-dark .tc-edit-form .jcl-picker-current,
body.jcl-tc-editor-theme-dark .tc-panel .jcl-picker-note,
body.jcl-tc-editor-theme-dark .tc-edit-form .jcl-picker-note{
  color:#5f6877;
}
body.jcl-tc-editor-theme-dark .tc-panel .jcl-picker-group > span,
body.jcl-tc-editor-theme-dark .tc-edit-form .jcl-picker-group > span{
  color:#8490a3;
}
body.jcl-tc-editor-theme-dark .tc-panel .jcl-intensity,
body.jcl-tc-editor-theme-dark .tc-edit-form .jcl-intensity{
  border-color:#e2e8f0;
  background:#f8fafc;
}
body.jcl-tc-editor-theme-dark .tc-panel .jcl-intensity button,
body.jcl-tc-editor-theme-dark .tc-edit-form .jcl-intensity button{
  color:#5f6877;
}
body.jcl-tc-editor-theme-dark .tc-panel .jcl-intensity button:hover,
body.jcl-tc-editor-theme-dark .tc-edit-form .jcl-intensity button:hover{
  background:#eef2f7;
}
body.jcl-tc-editor-theme-dark .tc-panel .jcl-intensity button.is-active,
body.jcl-tc-editor-theme-dark .tc-edit-form .jcl-intensity button.is-active{
  background:#172033;
  color:#fff;
}

@media (max-width:420px){
  .tc-panel .jcl-picker-grid,
  .tc-edit-form .jcl-picker-grid{
    gap:7px;
  }
  .tc-panel .jcl-tile-name,
  .tc-edit-form .jcl-tile-name{
    font-size:9.5px;
  }
}

/* ============================================================
   Loader de guardado · solo lo activa tc-editor-ui.js en el editor
   posterior a la compra.
   ============================================================ */
body.jcl-editor-is-saving{
  overflow:hidden!important;
}

.jcl-save-loader{
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(8,12,20,.76);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease;
}

.jcl-save-loader.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.jcl-save-loader-card{
  display:grid;
  justify-items:center;
  width:min(100%,360px);
  padding:30px 26px 27px;
  border:1px solid rgba(212,175,55,.35);
  border-radius:22px;
  color:#f8fafc;
  background:linear-gradient(160deg,rgba(28,34,46,.98),rgba(13,18,28,.98));
  box-shadow:0 26px 70px rgba(0,0,0,.38);
  text-align:center;
}

.jcl-save-loader-spinner{
  width:48px;
  height:48px;
  margin-bottom:18px;
  border:3px solid rgba(255,255,255,.16);
  border-top-color:#d4af37;
  border-right-color:#f6d989;
  border-radius:50%;
  animation:jclSaveSpin .78s linear infinite;
}

.jcl-save-loader-card strong{
  color:#fff!important;
  font:800 19px/1.25 Inter,system-ui,sans-serif!important;
}

.jcl-save-loader-card small{
  max-width:280px;
  margin-top:9px;
  color:#cbd5e1!important;
  font:500 13px/1.55 Inter,system-ui,sans-serif!important;
}

@keyframes jclSaveSpin{
  to{transform:rotate(360deg)}
}

@media (prefers-reduced-motion:reduce){
  .jcl-save-loader{transition:none}
  .jcl-save-loader-spinner{animation-duration:1.8s}
}