/* === GOOEY EFFECT DEL SNIPPET === */
.tags-outer-wrapper { position: relative; width: 100%; height: 52px; background-color: #000000; overflow: hidden; }
.tags-gooey-layer { position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; background-color: #000000; filter: blur(8px) contrast(20); z-index: 1; pointer-events: none; }
.tags-gooey-scroll { position: absolute; top: 20px; left: 20px; height: 100%; width: 3000px; }
.gooey-anchor { position: absolute; top: 18px; width: 16px; height: 16px; background-color: #ffffff; border-radius: 50%; }
.liquid-blob { position: absolute; top: 10px; height: 32px; background-color: #ffffff; border-radius: 16px; }

.tags-bar-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; padding: 0 20px; gap: 8px; overflow-x: auto; scrollbar-width: none; z-index: 2; }
.tags-bar-container::-webkit-scrollbar { display: none; }
.chip-text { position: relative; flex-shrink: 0; height: 32px; line-height: 32px; padding: 0 16px; font-size: 13px; font-weight: 600; color: #ffffff; cursor: pointer; user-select: none; transition: color 0.3s ease-in-out; }
.chip-text:active { transform: scale(0.95); }
.chip-text.active { color: #000000; transition: color 0.3s ease-in-out 0.2s; }

/* TARJETAS Y DEMÁS */
.note-card { background: rgba(255, 255, 255, 0.05); border: 2px solid transparent; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); cursor: pointer; position: relative; transition: background 0.2s, border-color 0.2s; width: 100%; display: inline-block; margin-bottom: 10px; break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid; overflow: hidden; }
.note-card:active:not(.jiggling) { transform: scale(0.98); background: rgba(255, 255, 255, 0.08); }
.note-title { font-size: 15px; font-weight: 600; width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-wrap: break-word; white-space: pre-wrap; }
.note-img { width: 100%; height: 140px; object-fit: cover; border-radius: 8px; }
.note-text { font-size: 13px; line-height: 1.4; opacity: 0.8; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; word-wrap: break-word; white-space: pre-wrap; }
.tags-container { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.tag-badge { background: rgba(255,255,255,0.1); padding: 3px 8px; border-radius: 12px; font-size: 10px; border: 1px solid rgba(255,255,255,0.2); }

@keyframes jiggle { 0% { transform: rotate(-1deg); } 50% { transform: rotate(1.5deg); } 100% { transform: rotate(-1deg); } }
.note-card.jiggling { animation: jiggle 0.3s infinite; }
.note-card.selected { border-color: #ffffff; background: rgba(255, 255, 255, 0.15); box-shadow: 0 0 15px rgba(255,255,255,0.1); }


/* === BOTÓN LIQUID GLASS === */
#btn-add { 
    position: fixed; 
    bottom: 25px; 
    right: 25px; 
    width: 64px; 
    height: 64px; 
    border-radius: 9999px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    cursor: pointer; 
    z-index: 20; 
    color: #ffffff; /* Icono blanco por defecto */
    background: transparent; /* Fondo transparente requerido para el glass */
    border: none; 
    outline: none;
    transition: transform 0.2s, background-color 0.3s; 
}

/* El span (icono) debe estar al frente del cristal */
#btn-add span {
    position: relative;
    z-index: 2;
    font-size: 30px;
}

#btn-add:active {
    transform: scale(0.9);
}

/* Sombra interior para darle volumen al cristal */
#btn-add::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 9999px;
    box-shadow: inset 2px 2px 0px -2px rgba(255, 255, 255, 0.8), inset 0 0 3px 1px rgba(255, 255, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.05);
}

/* El filtro de refracción líquida + Blur */
#btn-add::after {
    content: '';
    position: absolute;
    z-index: -2;
    inset: 0;
    border-radius: 9999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    filter: url(#btn-glass);
    -webkit-filter: url(#btn-glass);
    overflow: hidden;
    isolation: isolate;
}


.toast { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); background: #ffffff; color: #000000; padding: 12px 20px; border-radius: 30px; display: none; align-items: center; justify-content: space-between; gap: 15px; z-index: 80; box-shadow: 0 5px 20px rgba(0,0,0,0.5); font-weight: 500; font-size: 14px; max-width: 90%; width: max-content; }
#toast-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
.btn-undo { flex-shrink: 0; background: none; border: none; color: #0055ff; font-weight: 600; font-size: 14px; cursor: pointer; text-transform: uppercase; padding: 0; margin: 0; }