/* Componente NestableQuadrants — cuadrantes anidables con arrastre.
   Estilo portado del diseño "componente DAFO". El acento de cada cuadrante se
   controla con la variable --nq-accent (inline desde el QuadrantModel.Accent);
   de ahí derivan la barra, el chip del icono y el contador con color-mix. */

.nq-quadrant {
    --nq-accent: #94a3b8;
    border: 1px solid #e7e9ef;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -22px rgba(16, 24, 40, .28);
}

/* ---- Barra de acento superior ---- */
.nq-accent {
    height: 4px;
    flex: none;
    background: var(--nq-accent);
}

/* ---- Cabecera: chip de icono + título + contador + subtítulo ---- */
.nq-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 12px;
    background: transparent;
    border: 0;
}

.nq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    flex: none;
    font-size: 1.25rem;
    background: color-mix(in srgb, var(--nq-accent) 14%, #fff);
    color: var(--nq-accent);
}

.nq-titles {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.nq-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.nq-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #1c2434;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nq-count {
    font-size: 11.5px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    flex: none;
    background: color-mix(in srgb, var(--nq-accent) 14%, #fff);
    color: var(--nq-accent);
}

.nq-subtitle {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #98a1b1;
}

/* ---- Cuerpo y listas ---- */
.nq-body {
    padding: 2px 12px 12px;
}

.nq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    min-height: 8px; /* permite soltar en cuadrantes/listas vacías */
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* La lista raíz del cuadrante deja una zona de "soltar" al final para poder
   sacar un elemento del anidamiento y dejarlo en la raíz con facilidad. */
.nq-list[data-quadrant] {
    min-height: 2.5rem;
}

.nq-children {
    padding-left: 1.5rem;
}

/* ---- Fila de elemento ---- */
.nq-item {
    border-radius: 10px;
}

.nq-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background .12s, border-color .12s;
}

.nq-row:hover {
    background: #f6f7f9;
    border-color: #eceef3;
}

.nq-handle {
    display: flex;
    align-items: center;
    color: #cdd2dc;
    cursor: grab;
    flex: none;
}

.nq-handle:active {
    cursor: grabbing;
}

/* Nombre del elemento (lo aporta el consumidor; clase compartida para look idéntico). */
.nq-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #323a4b;
    overflow-wrap: anywhere;
}

/* Botones de acción de la fila (info / editar / borrar): cuadrados 28px.
   Ocultos por defecto; se revelan al posicionarse sobre la fila (o al enfocar un
   elemento de ella con teclado). La estrella (.nq-star) queda siempre visible. */
.nq-itembtn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #9aa2b1;
    cursor: pointer;
    flex: none;
    transition: background .12s, color .12s;
}

/* COLAPSADOS por defecto (display:none, NO reservan espacio); se revelan al hacer
   hover/`:focus-within` sobre la fila. Como la estrella (.nq-star) va siempre visible
   y a la derecha, al aparecer el resto el grupo crece y la estrella se desplaza a la
   izquierda, igual que en el diseño. */
.nq-row:hover .nq-itembtn,
.nq-row:focus-within .nq-itembtn {
    display: flex;
}

.nq-itembtn:hover {
    background: #f1f3f6;
}

/* El icono de información es algo mayor para que destaque. */
.nq-itembtn-info {
    font-size: 1.2rem;
}

.nq-itembtn-info:hover {
    background: #eef2f7;
    color: #475467;
}

.nq-itembtn-edit:hover {
    background: #eaf1fd;
    color: #2f6fdb;
}

.nq-itembtn-delete:hover {
    background: #fdebef;
    color: #d6455d;
}

/* Estrella de favorito (botón en edición, indicador fijo en lectura). */
.nq-star {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    flex: none;
    font-size: 1rem;
    color: #f0b429;
    transition: background .12s;
}

.nq-star:hover {
    background: #f1f3f6;
}

.nq-star .ti-star {
    color: #b6bdc9;
}

/* En lectura la estrella es un indicador fijo, sin afordancia de pulsado. */
.nq-star-static {
    cursor: default;
}

.nq-star-static:hover {
    background: transparent;
}

/* ---- Botón de añadir (al pie del cuadrante) ---- */
.nq-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 3px;
    padding: 9px;
    border-radius: 10px;
    border: 1.5px dashed #d8dce4;
    background: transparent;
    color: #8a93a3;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
}

.nq-add:hover {
    border-color: #c3cad6;
    color: #5a6475;
    background: #fafbfc;
}

/* ---- Cuadrante vacío ---- */
.nq-empty {
    padding: 22px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #aab1bf;
}

/* ---- Arrastre (SortableJS) ---- */
.nq-ghost {
    opacity: 1;
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
    border: 1px dashed var(--bs-primary, #0d6efd);
    border-radius: 10px;
}

.nq-ghost > * {
    visibility: hidden;
}

.nq-dragging {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15);
}