/* Componente OdsQuadrants: asignación de ODS por arrastre (formato Claude Design).
   Estructura anidada: bloque de Fortaleza (Fuerte/Débil) → dentro, dos zonas de Impacto
   (Positivo/Negativo). En edición, pool de "No asignados" a la derecha.
   El ítem es SOLO la imagen del ODS y la imagen es el asa de arrastre. */

.odsq {
    --ods-pos: #2E9E5B;
    --ods-neg: #E24C5B;
    --ods-line: #E7E9ED;
    --ods-ink: #2A2E37;
    --ods-muted: #6B7280;
    font-size: .875rem;
}

/* ---- Barra superior: leyenda + contador de asignados ---- */
.odsq-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.odsq-legend {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--ods-muted);
    font-size: .8rem;
}

.odsq-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.odsq-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ods-muted);
    display: inline-block;
    flex: 0 0 auto;
}

.odsq-dot.pos {
    background: var(--ods-pos);
}

.odsq-dot.neg {
    background: var(--ods-neg);
}

/* Grupo derecho de la barra: contador de asignados + acciones (toggle ver/editar). */
.odsq-topbar-end {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.odsq-assigned {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    padding: .3rem .7rem;
    border: 1px solid var(--ods-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.odsq-assigned-num {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ods-ink);
    font-variant-numeric: tabular-nums;
}

.odsq-assigned-text {
    color: var(--ods-muted);
    font-size: .8rem;
}

/* ---- Cuerpo: área principal + pool ---- */
.odsq-body {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.odsq-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ---- Bloque de Fortaleza ---- */
.odsq-group {
    border: 1px solid var(--ods-line);
    border-radius: 16px;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.odsq-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}

.odsq-group-head-left {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.odsq-group-eyebrow {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ods-muted);
    font-weight: 600;
}

.odsq-group-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ods-ink);
    line-height: 1.2;
}

.odsq-group-count {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ods-muted);
    background: #F4F5F7;
    border-radius: 999px;
    padding: .2rem .6rem;
    white-space: nowrap;
}

/* Iconito de barras de señal (fuerte = todas oscuras, débil = solo la primera). */
.odsq-signal {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 16px;
    flex: 0 0 auto;
}

.odsq-signal span {
    width: 4px;
    border-radius: 1px;
    background: var(--ods-ink);
}

.odsq-signal span:nth-child(1) { height: 7px; }
.odsq-signal span:nth-child(2) { height: 11px; }
.odsq-signal span:nth-child(3) { height: 16px; }

.odsq-signal.weak span:nth-child(2),
.odsq-signal.weak span:nth-child(3) {
    background: #D3D6DC;
}

/* ---- Zonas de Impacto (2 columnas) ---- */
.odsq-zones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.odsq-zone {
    border: 1px solid var(--ods-line);
    border-radius: 12px;
    padding: .7rem;
}

.odsq-zone.pos {
    background: color-mix(in srgb, var(--ods-pos) 6%, #fff);
    border-color: color-mix(in srgb, var(--ods-pos) 20%, var(--ods-line));
}

.odsq-zone.neg {
    background: color-mix(in srgb, var(--ods-neg) 6%, #fff);
    border-color: color-mix(in srgb, var(--ods-neg) 20%, var(--ods-line));
}

.odsq-zone-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .55rem;
}

.odsq-zone-name {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ods-ink);
}

.odsq-zone.pos .odsq-zone-name .odsq-dot { background: var(--ods-pos); }
.odsq-zone.neg .odsq-zone-name .odsq-dot { background: var(--ods-neg); }

.odsq-zone-count {
    font-size: .72rem;
    font-weight: 600;
    border-radius: 999px;
    padding: .1rem .5rem;
    font-variant-numeric: tabular-nums;
}

.odsq-zone.pos .odsq-zone-count {
    color: var(--ods-pos);
    background: color-mix(in srgb, var(--ods-pos) 14%, #fff);
}

.odsq-zone.neg .odsq-zone-count {
    color: var(--ods-neg);
    background: color-mix(in srgb, var(--ods-neg) 14%, #fff);
}

/* ---- Listas droppables ---- */
.odsq-list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    /* Padding = hueco inferior que dejaba el min-height, para que el item arrastrado
       quede con el mismo margen por los cuatro lados respecto a la linea dashed del
       placeholder (que sigue en inset:0, sin moverse). */
    padding: .5rem;
    min-height: 64px;
    align-content: flex-start;
}

/* Placeholder de zona vacía: se saca del flujo (absolute) y no captura eventos de
   puntero, así es solo un fondo. Al arrastrar un ODS, el ítem cae en la posición 0
   ENCIMA del placeholder en vez de empujarse debajo (que agrandaba la zona). */
.odsq-empty {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed color-mix(in srgb, var(--ods-muted) 40%, #fff);
    border-radius: 10px;
    color: var(--ods-muted);
    font-size: .78rem;
    text-align: center;
    padding: .4rem;
}

/* ---- Pool de "No asignados" (solo edición) ---- */
.odsq-pool {
    flex: 0 0 300px;
    border: 1px solid var(--ods-line);
    border-radius: 16px;
    background: #FBFBFC;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.odsq-pool-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .8rem;
}

.odsq-pool-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--ods-ink);
}

.odsq-pool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #EEF0F3;
    color: var(--ods-muted);
}

.odsq-pool-count {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ods-muted);
    background: #EEF0F3;
    border-radius: 999px;
    padding: .2rem .6rem;
}

.odsq-pool-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    min-height: 140px;
}

.odsq-pool-hint {
    margin-top: .8rem;
    font-size: .74rem;
    color: var(--ods-muted);
    line-height: 1.4;
}

/* ---- Ítem: SOLO la imagen del ODS ---- */
.odsq-item {
    display: inline-flex;
}

.odsq-pool-list .odsq-item {
    width: 100%;
}

.odsq-img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: contain;
    cursor: grab;
    -webkit-user-drag: none;
    user-select: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
    transition: transform .12s ease, box-shadow .12s ease;
}

.odsq-pool-list .odsq-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

.odsq-img:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(16, 24, 40, .14);
}

.odsq-view .odsq-img {
    cursor: default;
}

.odsq-view .odsq-img:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.odsq-img:active {
    cursor: grabbing;
}

.odsq-ghost {
    opacity: .4;
}

.odsq-dragging {
    opacity: .9;
}

/* Responsive: pool debajo del área principal en pantallas pequeñas. */
@media (max-width: 991.98px) {
    .odsq-body {
        flex-direction: column;
    }

    .odsq-pool {
        flex-basis: auto;
        width: 100%;
    }

    .odsq-pool-list {
        grid-template-columns: repeat(6, 1fr);
    }
}