/* ══════════════════════════════════════════════════════════════════
   ALYX v2.24 — POLISH PASS
   ─────────────────────────────────────────────────────────────────
   Tres frentes: densidad, jerarquía visual, paridad con Simple Mode.

   Densidad
     · .em-btn2 (emotion buttons) — 36px → 54px, gap 3→8px, padding
       4→9px, icono 14→18px, label 10.5→11px con tracking .8px.
     · .ctx-tfm-btn (transform buttons) — un poco más de aire.
     · .gp-rec-card / .genre-item — confirmados en clarity, aquí solo
       un retoque de gap.

   Jerarquía
     · .ls-group-hdr — los dos cabeceros nuevos del sidebar.
       Estilo: caps pequeñas, color de acento, hairline debajo,
       margen vertical más generoso para que el grupo se lea como
       unidad.
     · .alyx-collapsible / .alyx-collapsed — visual del collapse.
       El chevron, la animación, ocultar el contenido.

   Simple Mode
     · .sr-card-title estaba en letter-spacing 2.2px sobre 11px —
       el mismo problema que tratamos en v2.22 para Normal Mode.
       Bajamos a 1.2px.
     · .sr-step-title igual.
     · Botones de Simple Mode con tracking razonable.

   Carga LAST en el HTML, después de clarity y typography.
══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   1. DENSIDAD — emotion buttons del sidebar
   atp-redesign.css los puso en grid 2×3 con min-height 32px. Subimos
   altura, padding, icono y nombre. !important porque atp-redesign
   los marcó así.
══════════════════════════════════════════════════════════════════ */

.em-grid {
  gap: 8px !important;
}

.em-btn2 {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 11px 6px !important;
  min-height: 60px !important;
  border-radius: 6px !important;
  border-color: var(--clarity-edge, rgba(255,255,255,.14)) !important;
  transition: background .15s, border-color .15s, transform .12s !important;
}
.em-btn2:hover {
  border-color: var(--clarity-edge-strong, rgba(255,255,255,.22)) !important;
  transform: translateY(-1px);
}
.em-btn2.active {
  border-color: var(--gold) !important;
  background: rgba(232,184,75,.12) !important;
}

.em-btn2-icon {
  font-size: 18px !important;
  line-height: 1 !important;
}
.em-btn2-name {
  font-size: 11px !important;
  letter-spacing: .8px !important;
  font-weight: 500 !important;
  margin-top: 1px !important;
}


/* ══════════════════════════════════════════════════════════════════
   2. DENSIDAD — transform buttons del inspector
   También con emoji y muy apretados. Mismo tratamiento más suave.
══════════════════════════════════════════════════════════════════ */

.ctx-transform-grid {
  gap: 6px !important;
}
.ctx-tfm-btn {
  padding: 9px 6px !important;
  min-height: 56px !important;
  gap: 4px !important;
  border-color: var(--clarity-edge, rgba(255,255,255,.14)) !important;
}
.ctx-tfm-btn:hover {
  border-color: var(--clarity-edge-strong, rgba(255,255,255,.22)) !important;
  transform: translateY(-1px);
}
.ctx-tfm-icon { font-size: 17px !important; }
.ctx-tfm-label {
  font-size: 10px !important;
  letter-spacing: .5px !important;
}


/* ══════════════════════════════════════════════════════════════════
   3. JERARQUÍA — sidebar group headers
   Los dos cabeceros nuevos (WHAT YOU FEEL, TECHNICAL). Estilo
   tipográfico discreto pero claro, acento de color por grupo,
   hairline debajo.
══════════════════════════════════════════════════════════════════ */

.ls-group-hdr {
  padding: 14px 14px 6px;
  font-family: var(--ff-cinzel, Cinzel, serif);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  margin: 6px 0 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.ls-group-hdr::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 1px;
}
.ls-group-feel {
  color: rgba(167,139,250,.85);
}
.ls-group-feel::after {
  background: linear-gradient(to right,
              rgba(167,139,250,.5) 0%,
              rgba(167,139,250,0) 100%);
}
.ls-group-tech {
  color: rgba(232,184,75,.85);
}
.ls-group-tech::after {
  background: linear-gradient(to right,
              rgba(232,184,75,.4) 0%,
              rgba(232,184,75,0) 100%);
}

/* Los .ls-section dentro de un grupo recibe menos border-bottom para
   que el cabecero del grupo lleve la jerarquía visual primaria, no
   las separaciones internas. */
.ls-group-hdr + .ls-section { border-top: none; }


/* ══════════════════════════════════════════════════════════════════
   4. JERARQUÍA — inspector section collapse
   Estilo del chevron y del estado colapsado. El JS de
   alyx-v2.24-collapse.js maneja la lógica; aquí sólo la pintura.
══════════════════════════════════════════════════════════════════ */

.ctx-section.alyx-collapsible .ctx-section-lbl {
  user-select: none;
  padding: 4px 0;
  margin: -4px 0 4px;
  border-radius: 4px;
  transition: background .12s, color .12s;
}
.ctx-section.alyx-collapsible .ctx-section-lbl:hover {
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.75) !important;
}

.alyx-chev {
  display: inline-block;
  font-size: 9px;
  margin-right: 4px;
  opacity: .55;
  transition: transform .15s, opacity .15s;
  width: 9px;
  text-align: center;
}
.ctx-section.alyx-collapsible:hover .alyx-chev { opacity: 1; }

/* Cuando está colapsada, todo lo que NO sea el label se oculta.
   Padding inferior reducido. */
.ctx-section.alyx-collapsed > *:not(.ctx-section-lbl) {
  display: none;
}
.ctx-section.alyx-collapsed {
  padding-bottom: 4px !important;
}
.ctx-section.alyx-collapsed .ctx-section-lbl {
  margin-bottom: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════
   5. SIMPLE MODE — typography polish equivalente a v2.22
   v2.22 solo tocó selectores de Normal Mode. Aquí extendemos a
   .sr-card-title (era 2.2px tracking) y a otros sr-* que tienen
   el mismo problema de "small caps con tracking salvaje".
══════════════════════════════════════════════════════════════════ */

.sr-card-title {
  font-size: 12px !important;
  letter-spacing: 1.2px !important;
  font-weight: 600 !important;
  color: var(--clarity-label-color, rgba(255,255,255,.85)) !important;
}

/* Resto de small caps de Simple Mode al mismo nivel — mismo problema
   que .sr-card-title: 11px en 700 peso con tracking 2.2px hace que
   las letras dejen de leerse como palabra. */
.sr-logo-sub,
.sr-preview-hdr,
.sr-prompt-lbl,
.sr-export-lbl {
  letter-spacing: 1.2px !important;
  font-weight: 600 !important;
}

.sr-step-title {
  letter-spacing: .5px !important;
}
.sr-step-desc {
  letter-spacing: .3px !important;
}

/* Los botones de Simple Mode con caps */
.sr-icon-btn,
.sr-generate-btn {
  letter-spacing: 1.2px !important;
}

/* Labels secundarios (sr-card-info, etc.) — bajar tracking */
.sr-card-info,
.sr-card-sub,
.sr-genre-tag,
.sr-em-tag {
  letter-spacing: .5px !important;
}


/* ══════════════════════════════════════════════════════════════════
   6. SIMPLE MODE — paridad con la pasada de iconos
   v2.24 sustituyó emojis del topbar en Normal Mode. Simple Mode
   tiene su propio topbar; el botón SAVE usa 💾. Lo dejamos por
   ahora (es una acción primaria, no un icono de chrome). Si lo
   quieres uniforme también, dilo.
══════════════════════════════════════════════════════════════════ */

/* Espacio para futuras paridades. Por ahora vacío intencionalmente. */


/* fin v2.24 — polish */