/* Solo lo que Bootstrap no puede hacer: viewport, canvas infinito, posicionamiento absoluto de tarjetas */

html, body { height: 100%; overflow: hidden; }

#nt-viewport {
    position: fixed;
    top: 50px;
    left: 0; right: 0; bottom: 0;
    overflow: hidden;
    cursor: grab;
    background: #f5f4f1;
}
#nt-viewport.panning { cursor: grabbing; }
#nt-viewport.placing { cursor: crosshair; }

#nt-canvas {
    position: absolute;
    width: 6000px; height: 6000px;
    background-image: radial-gradient(circle, #bbb 1.5px, transparent 0);
    background-size: 24px 24px;
    background-color: #f5f4f1;
    transform-origin: 0 0;
}

/* Tarjetas posicionadas en el canvas */
.nt-card {
    position: absolute;
    min-width: 200px;
    user-select: none;
}
.nt-card-handle {
    cursor: move;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
}
.nt-card-actions { display: none; gap: 4px; }
.nt-card:hover .nt-card-actions { display: flex; }

/* Nota de texto */
.nt-card.tipo-texto .nt-card-handle { background: #fff9db; }
.nt-text-body { padding: 8px 12px; min-height: 60px; outline: none; font-size: 13px; line-height: 1.6; }
.nt-text-body:empty::before { content: 'Escribe aquí...'; color: #aaa; }

/* Imagen */
.nt-card.tipo-imagen .nt-card-handle { background: #e8f4fd; }
.nt-img-body { padding: 8px; }
.nt-img-body img { max-width: 100%; border-radius: 4px; display: block; margin-bottom: 6px; }

/* Lista */
.nt-card.tipo-lista .nt-card-handle { background: #e8fdf0; }
.nt-list-body { padding: 6px 10px 10px; }
.nt-list-item { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid #f5f5f5; }
.nt-list-item:last-of-type { border-bottom: none; }
.nt-item-text { flex: 1; border: none; background: none; font-size: 13px; outline: none; }
.nt-list-item.done .nt-item-text { text-decoration: line-through; color: #aaa; }

/* Color block */
.nt-card.tipo-color { min-width: 80px; min-height: 80px; border: none !important; }
.nt-card.tipo-color .nt-card-handle { background: transparent; }

/* Sub-tablero */
.nt-card.tipo-tablero { min-width: 220px; min-height: 160px; cursor: pointer; }
.nt-card.tipo-tablero .nt-card-handle { background: #f0ede8; }
.nt-tablero-body { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; height: calc(100% - 38px); color: #666; font-size: 14px; font-weight: 600; }

/* Paleta */
#nt-palette {
    position: fixed; z-index: 1050;
    background: #fff; border: 1px solid #dee2e6; border-radius: 8px;
    padding: 10px; display: none; flex-wrap: wrap; gap: 6px; width: 172px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.nt-swatch { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: .1s; }
.nt-swatch:hover { transform: scale(1.2); border-color: #333; }