/* Speed Dial del topbar — botón "+" expandible
 * El "+" se ve igual que siempre (icono nav-link).
 * En reposo, las opciones secundarias quedan colapsadas (max-width:0)
 * para que la burbuja del topbar no las muestre. Al hover el contenedor
 * se expande, empujando suavemente al resto de iconos y "estirando" la
 * burbuja como respuesta natural del layout.
 */

.sd-wrap {
    position:relative;
    display:inline-flex;
    align-items:center;
}

/* Botón principal: idéntico al icono nav-link original */
.sd-main.nav-link {
    position:relative;
    z-index:2;
    cursor:pointer;
}
.sd-main.expanded i { transform:rotate(45deg); }
.sd-main i { transition:transform .25s cubic-bezier(.4,0,.2,1); display:inline-block; }

/* Contenedor de opciones — colapsa con max-width para que la burbuja
   del topbar se estire animadamente al abrirse. */
.sd-secondary {
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    overflow:hidden;
    max-width:0;
    opacity:0;
    transform:translateX(12px);
    margin-right:0;
    transition: max-width .35s cubic-bezier(.4,0,.2,1),
                opacity   .25s ease,
                transform .25s ease,
                margin-right .35s cubic-bezier(.4,0,.2,1);
}
.sd-wrap.open .sd-secondary {
    max-width:520px;
    opacity:1;
    transform:translateX(0);
    margin-right:8px;
}

/* Cada opción: solo texto, sin icono, look limpio */
.sd-btn-sec {
    display:inline-flex;
    align-items:center;
    background:var(--jd-bg-card);
    border:1.5px solid var(--jd-border-color);
    border-radius:10px;
    padding:6px 12px;
    font-family:inherit;
    font-size:.82rem;
    font-weight:600;
    color:var(--jd-text-primary);
    cursor:pointer;
    text-decoration:none;
    box-shadow:var(--jd-shadow-sm);
    transition:border-color .15s, transform .15s, background .15s, color .15s;
}
.sd-btn-sec:hover {
    border-color:var(--jd-crimson);
    color:var(--jd-text-primary);
    transform:translateY(-1px);
    text-decoration:none;
}
.sd-btn-sec.sd-orden {
    background:rgba(255,77,109,.10);
    border-color:var(--jd-crimson);
}
.sd-btn-sec.sd-orden:hover {
    background:var(--jd-crimson);
    color:#fff;
}

/* Modal "Nuevo proceso" — selección de tipo de nota con tiene_proceso=1 */
.sd-proc-overlay {
    position:fixed; inset:0; z-index:1080; background:rgba(0,0,0,.55);
    display:flex; align-items:center; justify-content:center; padding:20px;
    opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.sd-proc-overlay.open { opacity:1; pointer-events:auto; }
.sd-proc-modal {
    background:var(--jd-bg-card); border:1px solid var(--jd-border-color);
    border-radius:var(--jd-radius-xl); width:100%; max-width:480px; overflow:hidden;
    box-shadow:var(--jd-shadow-lg);
}
.sd-proc-header {
    padding:14px 18px; border-bottom:1px solid var(--jd-border-color); background:var(--jd-bg-header);
    display:flex; align-items:center; justify-content:space-between;
}
.sd-proc-header h4 { margin:0; font-size:1rem; color:var(--jd-text-primary); display:flex; align-items:center; gap:8px; }
.sd-proc-header h4 i { color:var(--jd-crimson); }
.sd-proc-body { padding:14px 18px; max-height:60vh; overflow:auto; }
.sd-proc-tipo {
    display:flex; align-items:center; gap:10px;
    padding:12px 14px; border:1px solid var(--jd-border-color); border-radius:var(--jd-radius-md);
    margin-bottom:8px; cursor:pointer;
    transition:var(--jd-transition); color:var(--jd-text-primary);
    text-decoration:none;
}
.sd-proc-tipo:hover { border-color:var(--jd-crimson); background:var(--jd-bg-card-hover); }
.sd-proc-tipo i { font-size:1.4rem; color:var(--jd-crimson); }