/* Nota pegada en la orden de venta (js/modules/nota-orden.js). El papel recuerda al
   tablero del Inicio; la ventana sigue el vidrio de las demás. */
.no-contenedor:empty { display: none; }
.no-contenedor { margin: 0 0 10px; padding-top: 7px; }
.dia-lista-row .no-contenedor, .dia-compact-row .no-contenedor { margin: 6px 0 0; }

.no-papel {
    position: relative; display: block; width: 100%; padding: 12px 11px 8px; text-align: left;
    border: 0; border-radius: 3px 3px 12px 3px; cursor: pointer; color: #451a03; font: inherit;
    background: linear-gradient(180deg, #fef3a8 0%, #fde68a 100%);
    box-shadow: 0 7px 14px -8px rgba(120, 53, 15, .45), 0 1px 2px rgba(120, 53, 15, .16);
    transform: rotate(-.5deg);
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s cubic-bezier(.22, 1, .36, 1);
}
.no-papel:hover:not(:disabled) { transform: rotate(0) translateY(-1px); box-shadow: 0 11px 18px -9px rgba(120, 53, 15, .55); }
.no-papel:disabled { cursor: default; opacity: .75; }
.no-chincheta {
    position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fca5a5, #dc2626 65%, #991b1b);
    box-shadow: 0 3px 4px rgba(69, 26, 3, .4);
}
.no-texto { display: block; font-size: .84rem; font-weight: 600; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.no-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin-top: 7px; font-size: .66rem; color: #92400e; }
.no-impresion { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.no-impresion .material-symbols-outlined { font-size: 13px; }
.no-impresion.is-imprime { color: #166534; }

.btn-mini.no-boton .material-symbols-outlined { font-size: 18px; }
.btn-mini.no-boton.tiene-nota { color: #b45309; border-color: #fcd34d; background: #fffbeb; }

#modal-nota-orden {
    --no-spring: cubic-bezier(.22, 1, .36, 1);
    position: fixed; inset: 0; z-index: 1000001; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px);
}
#modal-nota-orden .modal-content {
    position: relative; display: block; transform: none; width: 100%; max-width: 440px; max-height: 92vh; overflow: hidden auto; padding: 22px; box-sizing: border-box;
    border-radius: 20px; border: 1px solid rgba(255, 255, 255, .6); color: #1e293b;
    background: linear-gradient(155deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .58));
    backdrop-filter: blur(26px) saturate(1.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 30px 60px -24px rgba(15, 23, 42, .45), 0 10px 24px -12px rgba(15, 23, 42, .22);
}
#modal-nota-orden .modal-content::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(55% 45% at 8% 0%, rgba(245, 158, 11, .34), transparent 70%),
                radial-gradient(48% 40% at 100% 6%, rgba(56, 189, 248, .26), transparent 70%);
}
#modal-nota-orden .modal-content::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 46%, transparent 62%);
}
#modal-nota-orden .modal-content > * { position: relative; z-index: 1; }
.no-cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.no-cabecera > .material-symbols-outlined { color: #dc2626; font-size: 26px; }
.no-cabecera h3 { margin: 0; font-size: 1.05rem; }
.no-cabecera small { color: #64748b; font-size: .78rem; }
.no-campo > span { display: block; margin-bottom: 5px; font-size: .78rem; font-weight: 700; }
.no-campo textarea {
    display: block; width: 100%; box-sizing: border-box; padding: 11px 12px; resize: vertical; font: inherit; font-size: .92rem; color: inherit;
    border: 1px solid rgba(148, 163, 184, .45); border-radius: 12px; background: rgba(255, 255, 255, .5);
}
.no-interruptor {
    display: flex; align-items: center; gap: 11px; width: 100%; margin: 12px 0 16px; padding: 10px 12px; text-align: left; cursor: pointer; font: inherit; color: inherit;
    border: 1px solid rgba(148, 163, 184, .35); border-radius: 12px; background: rgba(255, 255, 255, .4);
}
.no-interruptor strong { display: block; font-size: .86rem; }
.no-interruptor small { display: block; color: #64748b; font-size: .72rem; line-height: 1.3; }
.no-perilla { position: relative; flex: 0 0 38px; height: 22px; border-radius: 999px; background: #cbd5e1; transition: background .22s var(--no-spring); }
.no-perilla::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .3); transition: transform .22s var(--no-spring); }
.no-interruptor[aria-checked="true"] .no-perilla { background: #16a34a; }
.no-interruptor[aria-checked="true"] .no-perilla::after { transform: translateX(16px); }
.no-pie-modal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.no-pie-modal button { display: inline-flex; align-items: center; gap: 5px; padding: 9px 14px; border-radius: 10px; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; transition: transform .22s var(--no-spring); }
.no-pie-modal button:hover:not(:disabled) { transform: translateY(-1px); }
.no-pie-modal button:disabled { opacity: .6; cursor: wait; }
.no-pie-modal .material-symbols-outlined { font-size: 17px; }
.no-quitar { margin-right: auto; border: 0; background: transparent; color: #dc2626; }
.no-cancelar { border: 1px solid rgba(148, 163, 184, .45); background: rgba(255, 255, 255, .45); color: #475569; }
.no-guardar { border: 0; background: #b45309; color: #fff; }

[data-theme="dark"] #modal-nota-orden .modal-content {
    color: #e2e8f0; border-color: rgba(255, 255, 255, .12);
    background: linear-gradient(155deg, rgba(30, 41, 59, .78), rgba(15, 23, 42, .66));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -24px rgba(0, 0, 0, .7);
}
[data-theme="dark"] .no-campo textarea, [data-theme="dark"] .no-interruptor, [data-theme="dark"] .no-cancelar { background: rgba(15, 23, 42, .45); color: #e2e8f0; }
[data-theme="dark"] .no-interruptor small, [data-theme="dark"] .no-cabecera small { color: #94a3b8; }
@media (prefers-reduced-motion: reduce) {
    #modal-nota-orden, #modal-nota-orden .modal-content { backdrop-filter: none !important; }
    .no-papel, .no-perilla, .no-perilla::after, .no-pie-modal button { transition: none !important; }
}