/* V14_9 UI Patch — category actions (solo UI) */
.icon-16 { width: 16px; height: 16px; display: inline-block; }

.cat-item { display: flex; align-items: center; gap: 8px; }
.cat-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cat-actions {
  display: inline-flex;
  gap: 6px;
  margin-left: 8px;
  vertical-align: middle;
  transition: opacity .15s ease;
}

.cat-action {
  border: 0;
  background: transparent;
  padding: 2px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: transform .15s ease, opacity .15s ease;
}

.cat-action:hover,
.cat-action:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  outline: none;
}

/* Desktop: mostrar acciones solo con intención del usuario */
@media (hover:hover) and (pointer:fine) {
  .cat-actions { opacity: 0; pointer-events: none; }
  .cat-item:hover .cat-actions,
  .cat-item:focus-within .cat-actions {
    opacity: 1; pointer-events: auto;
  }
}

/* Mobile: visibles siempre */
@media (hover:none) and (pointer:coarse) {
  .cat-actions { opacity: 1; pointer-events: auto; }
}

/* Robust placement for .topic buttons */
#categoriasBox .topic {
  position: relative; /* allow absolute positioning for actions without breaking layout */
}
#categoriasBox .topic .cat-actions {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
#categoriasBox .topic .cat-name {
  display: inline-block;
  max-width: calc(100% - 56px); /* leave room for two icons */
  vertical-align: middle;
}


/* Ensure icons visible and clickable */
.cat-actions svg { display: inline-block; vertical-align: middle; }
.cat-action { z-index: 2; }
#categoriasBox .topic .cat-actions { z-index: 2; }
#categoriasBox .topic { overflow: visible; } /* avoid clipping */


/* ===== V14_9_fix4: Sidebar categories styling (safe & clean) ===== */
#categoriasBox .topic {
  position: relative;
  overflow: hidden;           /* evita desbordes hacia el contenido derecho */
  white-space: nowrap;        /* una sola línea para truncar */
  text-overflow: ellipsis;    /* agrega "..." cuando corresponde */
  padding-right: 56px;        /* reserva espacio para 2 iconos + margen */
}
#categoriasBox .topic .cat-name {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}
#categoriasBox .topic .cat-actions {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  gap: 6px;
  pointer-events: auto;
}
.cat-action { z-index: 2; }
.cat-actions .icon-16 { display: inline-block; vertical-align: middle; }


/* fix5: spans inside BUTTON (decorative) */
#categoriasBox .topic .cat-actions .cat-action { display: inline-flex; align-items: center; justify-content: center; }


/* ===== V14_9_fix6: Garantizar visibilidad y contraste en sidebar ===== */
#categoriasBox .topic { position: relative; padding-right: 64px; overflow: hidden; }
#categoriasBox .topic .cat-actions {
  position: absolute;
  right: 10px; top: 50%; transform: translateY(-50%);
  display: inline-flex; gap: 8px;
  opacity: 1 !important;           /* siempre visibles */
  pointer-events: auto !important;
  z-index: 5;                       /* por sobre pseudo-elementos */
  color: inherit;                   /* mismo color que el texto */
}
#categoriasBox .topic .cat-actions .icon-16 { width: 16px; height: 16px; }
#categoriasBox .topic .cat-actions .cat-action { display: inline-flex; align-items: center; justify-content: center; }
#categoriasBox .topic .cat-name {
  display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Anula reglas genéricas de ocultar en hover */
@media (hover:hover) and (pointer:fine) {
  #categoriasBox .topic .cat-actions { opacity: 1; pointer-events: auto; }
}

/* Asegura que los paths se vean con el color del texto */
#categoriasBox .topic .cat-actions svg path { fill: currentColor; }


/* V14_9_1: Inline rename input */
#categoriasBox .topic .cat-rename-input,
li.cat-item .cat-rename-input {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px;
  padding: 2px 6px;
  max-width: calc(100% - 72px);
  outline: none;
}
#categoriasBox .topic.cat-deleting,
li.cat-item.cat-deleting {
  opacity: .6;
}