#mat-root { position: fixed; z-index: 9998; }

.mat-fab {
    position: fixed; right: 24px; bottom: 160px;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
}

.mat-overlay {
    position: fixed; inset: 0; background: rgba(2,6,23,.75);
    display: none; align-items: center; justify-content: center; padding: 1rem;
}
.mat-overlay.open { display: flex; }

.mat-card {
    background: #0f172a; color: #e2e8f0; border-radius: 16px;
    width: min(760px, 100%); max-height: 86vh; overflow-y: auto; padding: 1.5rem;
    border: 1px solid #1e293b;
}

.mat-slots { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0 1.5rem; }

.mat-slot {
    width: 92px; height: 92px; border-radius: 12px;
    border: 2px dashed #334155; background: #111c33;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: .72rem; text-align: center; cursor: pointer; padding: .25rem;
}
.mat-slot.filled { border-style: solid; border-color: #14b8a6; }
.mat-slot.linked { border-color: #3b82f6; }
/* El hueco bloqueado lleva texto ("Hueco 6 · Nivel 8"), no solo un candado:
   la opacidad atenúa sin volverlo ilegible. */
.mat-slot.locked { opacity: .65; cursor: not-allowed; }

.mat-pair { display: flex; gap: .25rem; padding: .25rem; border: 1px solid #1e40af; border-radius: 14px; }

.mat-collection { display: flex; flex-wrap: wrap; gap: .5rem; }

.mat-orb {
    padding: .4rem .7rem; border-radius: 999px; font-size: .78rem;
    background: #1e293b; border: 1px solid #334155; cursor: pointer;
}
.mat-orb[data-tipo="tecnica"]     { border-color: #22c55e; }
.mat-orb[data-tipo="metodologia"] { border-color: #3b82f6; }
.mat-orb[data-tipo="habito"]      { border-color: #a855f7; }
.mat-orb[data-tipo="herramienta"] { border-color: #eab308; }
.mat-orb[data-tipo="proyecto"]    { border-color: #ef4444; }
.mat-orb.equipped { opacity: .4; }

.mat-error { color: #fca5a5; font-size: .8rem; margin-top: .75rem; min-height: 1.2em; }

.mat-intro { color: #cbd5e1; font-size: .82rem; margin: .35rem 0 0; }

.mat-leyenda { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 .2rem; }
.mat-ley { font-size: .72rem; padding: .25rem .55rem; border-radius: 999px;
    background: #111c33; border: 1px solid #334155; color: #cbd5e1; }
.mat-ley[data-tipo="tecnica"]     { border-color: #22c55e; }
.mat-ley[data-tipo="metodologia"] { border-color: #3b82f6; }
.mat-ley[data-tipo="habito"]      { border-color: #a855f7; }
.mat-ley[data-tipo="herramienta"] { border-color: #eab308; }
.mat-ley[data-tipo="proyecto"]    { border-color: #ef4444; }

.mat-ficha:empty { display: none; }
.mat-ficha { background: #111c33; border: 1px solid #334155; border-radius: 12px;
    padding: .7rem .9rem; margin-bottom: 1rem; }
.mat-ficha-cab { font-size: .9rem; font-weight: 500; margin-bottom: .35rem; }
.mat-regla { font-size: .78rem; color: #cbd5e1; margin: .15rem 0; }
.mat-regla.cumplida { color: #14b8a6; }
.mat-nota { font-size: .78rem; color: #94a3b8; margin: .15rem 0; font-style: italic; }

.mat-slot.locked { font-size: .68rem; }
.mat-slot.linked { position: relative; }
.mat-slot.linked::after { content: ''; position: absolute; right: -.78rem; top: 50%;
    width: .75rem; height: 2px; background: #3b82f6; }
/* El conector se pinta solo en el hueco IZQUIERDO de cada par. Depende de que
   PARES (gamification-backend/src/utils/loadout.js) sean pares [impar, par]
   consecutivos — hoy [[1,2],[5,6]]. Si eso cambia, este selector falla en
   silencio. Conocido y diferido: si los huecos envuelven a 5 por fila, el
   conector del hueco 5 queda colgando al final de la fila. */
.mat-slot.linked:nth-of-type(even)::after { display: none; }