/* ==========================================
   VENTANA DE AJUSTES: categorías a la izquierda, contenido a la derecha
   Reemplaza el panel vertical lateral. Mantiene los mismos IDs de controles.
   ========================================== */

.sp-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: spFade .2s ease both;
}
.sp-overlay.hidden { display: none; }

.params-panel {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%);
  width: min(900px, 94vw);
  height: min(640px, 86vh);
  max-height: 86vh;
  z-index: 1000;
  display: grid !important;
  grid-template-columns: 220px 1fr;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--border, rgba(255, 255, 255, .1));
  background: var(--panel-bg, #111113);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9);
  animation: spIn .28s cubic-bezier(.2, .8, .2, 1) both;
}
.params-panel.hidden { display: none !important; }

@keyframes spFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spIn {
  from { opacity: 0; transform: translate(-50%, -48%) scale(.98); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* Columna de categorías */
.sp-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 12px;
  border-right: 1px solid var(--border, rgba(255, 255, 255, .08));
  background: rgba(0, 0, 0, .18);
  overflow-y: auto;
}
.sp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 14px;
}
.sp-head h3 { margin: 0; font-size: 16px; }
.sp-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary, #9aa3b8);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.sp-tab .material-symbols-outlined { font-size: 19px; }
.sp-tab:hover { background: rgba(255, 255, 255, .05); color: var(--text-primary, #e5e7eb); }
.sp-tab.active {
  background: var(--accent-bg, rgba(129, 140, 248, .14));
  color: var(--text-primary, #e5e7eb);
  box-shadow: inset 2px 0 0 var(--accent, #818cf8);
}

/* Contenido */
.sp-content {
  overflow-y: auto;
  padding: 24px 26px 28px;
}
.sp-pane { display: none; }
.sp-pane.active { display: block; animation: spPane .25s ease both; }
@keyframes spPane { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sp-h { margin: 0 0 4px; font-size: 18px; letter-spacing: -.01em; }
.sp-sub { margin: 0 0 18px; font-size: 13px; color: var(--text-secondary, #9aa3b8); line-height: 1.5; }

/* Tarjetas de cada ajuste */
.sp-content .param-group {
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--border, rgba(255, 255, 255, .08));
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
}
.sp-content .divider { display: none; }

.sp-card {
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--border, rgba(255, 255, 255, .08));
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
}
.sp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
/* El interruptor nunca se encoge: el texto ocupa el resto de la fila (en móvil se aplastaba) */
.sp-row > div:first-child { flex: 1 1 auto; min-width: 0; }
.sp-row > .switch { flex: 0 0 42px; width: 42px; height: 24px; }
.sp-row > .switch .slider-switch { inset: 0; }
.sp-row b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.sp-row small { display: block; font-size: 12.5px; color: var(--text-secondary, #9aa3b8); line-height: 1.45; }
.sp-row .btn-secondary,
.sp-row .btn-danger,
.sp-row .sp-file { display: inline-flex; align-items: center; gap: 6px; flex: none; cursor: pointer; }
.sp-row .sp-file { border: 1px solid var(--border, rgba(255, 255, 255, .12)); border-radius: 10px; padding: 9px 14px; background: transparent; color: var(--text-primary, #e5e7eb); font-size: 14px; }
.sp-danger { border-color: rgba(239, 68, 68, .25) !important; }

/* Móvil: categorías arriba, contenido abajo */
@media (max-width: 720px) {
  .params-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: 88vh;
    max-height: 88vh;
  }
  .sp-nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, .08));
    padding: 10px;
  }
  .sp-head { width: 100%; padding: 0 0 6px; }
  .sp-tab { width: auto; font-size: 13px; padding: 8px 10px; }
  .sp-tab span:last-child { display: none; }
}

/* ---------- Opciones premium ---------- */
.sp-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sp-sw {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid transparent;
  background: var(--c, #818cf8);
  cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25);
  transition: transform .15s, box-shadow .2s;
}
.sp-sw:hover { transform: scale(1.12); }
.sp-sw.on { box-shadow: 0 0 0 2px var(--panel-bg, #111113), 0 0 0 4px var(--c, #818cf8); }
.sp-sw.sp-auto {
  width: auto; height: auto; border-radius: 999px; padding: 6px 14px;
  background: transparent; color: var(--text-secondary, #9aa3b8);
  border: 1px solid var(--border, rgba(255, 255, 255, .15));
  font: inherit; font-size: 13px;
  box-shadow: none;
}
.sp-sw.sp-auto.on { color: var(--text-primary, #e5e7eb); border-color: var(--accent, #818cf8); box-shadow: none; }

/* Desenfoque apagado: sin backdrop-filter en toda la app */
html.yzg-noblur *,
html.yzg-noblur *::before,
html.yzg-noblur *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Movimiento reducido: sin animaciones ni transiciones decorativas */
html.yzg-reduce-motion *,
html.yzg-reduce-motion *::before,
html.yzg-reduce-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* ---------- Animaciones por categoría (se apagan una a una) ---------- */

/* Entrada de tarjetas y listas */
@keyframes spCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html:not(.yzg-no-anim-cards) .app-card,
html:not(.yzg-no-anim-cards) .gallery-card,
html:not(.yzg-no-anim-cards) .card-app,
html:not(.yzg-no-anim-cards) .app-item {
  animation: spCardIn .35s cubic-bezier(.2, .8, .2, 1) both;
}

/* Abrir y cerrar menús y ventanas */
html.yzg-no-anim-modal .modal,
html.yzg-no-anim-modal .params-panel {
  animation: none !important;
}

/* Cambio de pestañas y secciones */
html.yzg-no-anim-tabs .sp-pane.active {
  animation: none !important;
}

/* Respuesta al pulsar */
html.yzg-no-anim-press button:active,
html.yzg-no-anim-press .btn-primary:active,
html.yzg-no-anim-press .btn-secondary:active,
html.yzg-no-anim-press .btn-ghost:active,
html.yzg-no-anim-press .icon-btn:active {
  transform: none !important;
}

/* Elevación al pasar el cursor */
html.yzg-no-anim-hover .app-card:hover,
html.yzg-no-anim-hover .gallery-card:hover,
html.yzg-no-anim-hover .card-app:hover,
html.yzg-no-anim-hover .app-item:hover {
  transform: none !important;
}

/* Fondos y desvanecidos */
html.yzg-no-anim-overlay .modal-overlay,
html.yzg-no-anim-overlay .sp-overlay {
  animation: none !important;
}

/* ---------- Conexiones ---------- */
.conn-group-title {
  margin: 18px 2px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent, #818cf8);
}
.conn-group-title:first-of-type { margin-top: 0; }
.conn-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.conn-ico {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; font-size: 20px;
  background: rgba(129, 140, 248, .12); color: var(--accent, #818cf8);
}
.conn-right { display: flex; align-items: center; gap: 12px; flex: none; }
.conn-status {
  font-size: 12px; color: var(--text-secondary, #9aa3b8);
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border, rgba(255, 255, 255, .1));
  white-space: nowrap;
}
.conn-status.ok { color: #34d399; border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .08); }
.conn-btn { cursor: pointer; white-space: nowrap; }
@media (max-width: 720px) {
  .conn-right { flex-direction: column; align-items: flex-end; gap: 6px; }
}