/* CELDAS INTERACTIVAS DE COLOR */
.color-cell {
  background-clip: padding-box; /* Asegura que el fondo no se desborde */
  border-radius: 4px;           /* Bordes redondeados suaves */
  transition: background 0.2s ease; /* Suaviza el cambio de color */
}

/* FONDO NEGRO EN LA TABLA     */
.ssf-tabla {
  background-color: #111; /* Fondo negro elegante */
  color: #eee;            /* Texto claro para contraste */
}

/* Asegura que las celdas tengan buen contraste */
.ssf-tabla th,
.ssf-tabla td {
  color: #ddd;
  border: 1px solid #444; /* Líneas sutiles */
}

/* Paleta flotante encima del fondo negro */
.color-palette {
  display: flex;           /* Asegura flexbox */
  flex-direction: row !important;     /* Horizontal, sí o sí */
  flex-wrap: nowrap !important;       /* ❌ Sin saltos de línea */
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: #222;
  border-radius: 6px;
  z-index: 10;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
  white-space: nowrap;                /* Evita cualquier salto */
  min-width: fit-content;             /* Para que no se encoja */
}

.color-dot {
  display: inline-block !important;  /* ✅ Esto lo corrige */
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #ccc;
  cursor: pointer;
}

.color-dot[data-color="transparent"] {
  background: transparent;
  border: 1px solid white;
}

/* Estilo base de las celdas   */
.color-cell {
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  outline: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  padding: 0;
  overflow: visible;
  background-color: transparent !important; /* ¡Evita que se pinte la celda! */
}

/* Hover con efecto flotante */
.color-cell:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Solo si la celda es transparente de verdad */
.color-cell.transparente {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.color-inner {
  width: 70%;
  height: 70%;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.color-inner.transparente {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  transform: scale(0.001); /* 🧙‍♂️ ¡casi invisible! */
  opacity: 0;
}

/* FIJAR PRIMERA COLUMNA (PJs) */
.ssf-tabla th.pj-col,
.ssf-tabla td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background-color: #111; /* mismo fondo que la tabla */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2); /* leve sombra al borde */
}

/* Aumentar z-index para la cabecera fija */
.ssf-tabla thead th.pj-col {
  z-index: 4;
}

/* Fondo global oscuro 
body, html {
  background-color: #efefef !important;
  color: #efefef;
}*/
.ssf-wrapper {
  background-color: #111; /* fondo solo dentro del plugin */
  color: #eee;
  padding: 20px;
  border-radius: 12px;
}

/* Leyenda */
.ssf-leyenda {
  margin-top: 16px;
  padding: 8px 12px;
  background: #111;
  border-radius: 6px;
  color: #eee;
  font-size: 14px;
}

.leyenda-item {
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
  margin-top: 4px;
}

.color-box {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  margin-right: 6px;
  display: inline-block;
  border: 1px solid #444;
}

.color-box.transparente {
  background: transparent;
  border: 1px solid white;
}

.color-cell.solo-lectura {
    pointer-events: none !important;
    touch-action: none !important;
    cursor: default;
}