﻿/* El <td> se queda como celda pura: sin estilos que rompan la tabla */
td.ms-gb.hslv-spacc-cell,
td.ms-gb2.hslv-spacc-cell {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* La barra real del acordeón es este div interior */
.hslv-spacc-header {
  --hslv-green: var(--primary-color, #2f7d4f);
  --hslv-hover: var(--hover-color,   #5b9e6b);
  --hslv-bg:    var(--neutral-bg,    #ffffff);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  padding: 1rem 1.5rem;
  background-color: var(--hslv-bg);
  border-bottom: 1px solid var(--hslv-green);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.hslv-spacc-header--nested { padding-left: 2.5rem; font-size: .98rem; }

.hslv-spacc-title { color: var(--hslv-green); transition: color .3s ease; }
.hslv-spacc-count { opacity: .6; font-weight: 400; margin-left: 4px; }

.hslv-spacc-chevron {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  background-color: var(--hslv-green);
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition: transform .3s ease, background-color .3s ease;
}

.hslv-spacc-header:hover {
  background-color: var(--hslv-hover);
  transform: scale(1.005);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.hslv-spacc-header:hover .hslv-spacc-title,
.hslv-spacc-header:hover .hslv-spacc-count { color: #fff; }
.hslv-spacc-header:hover .hslv-spacc-chevron { background-color: #fff; }

/* Abierto: verde fijo + texto blanco + chevron rotado */
.hslv-spacc-header.hslv-spacc-is-open { background-color: var(--hslv-green); border-bottom-color: transparent; }
.hslv-spacc-header.hslv-spacc-is-open .hslv-spacc-title,
.hslv-spacc-header.hslv-spacc-is-open .hslv-spacc-count { color: #fff; }
.hslv-spacc-header.hslv-spacc-is-open .hslv-spacc-chevron { background-color: #fff; transform: rotate(180deg); }

/* El +/- y el gif nativos quedan ocultos, pero siguen en el DOM para el toggle */
.hslv-spacc-toggle-native { display: none !important; }