/* =========================================================================
   Naranjo Roses · capa de animación y pulido visual
   Se carga DESPUÉS de los estilos existentes y solo los refina: mismos
   colores, misma tipografía, mismo layout. Nada aquí cambia la lógica.
   Todo el movimiento se desactiva con "reducir movimiento" del sistema.
   ========================================================================= */

:root{
  --nr-brand:#f15f1b;
  --nr-brand-dark:#c94911;
  --nr-blush:#ffe3d3;
  --nr-blush-soft:#fff6f0;
  --nr-ink:#1f1d1b;
  --nr-line:#efe4db;
  --nr-ease:cubic-bezier(.22,.8,.24,1);
  --nr-ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Cabecera: rosa que florece + pétalos que caen ---------- */
.hero,.top{position:relative;overflow:hidden;isolation:isolate}
/* (sin destello sobre el banner: pedido del cliente) */

.nr-petals{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hero-inner,.top-inner{position:relative;z-index:1}
.nr-petal{
  position:absolute;top:-28px;width:var(--s,16px);height:var(--s,16px);
  opacity:0;will-change:transform,opacity;
  animation:nr-fall var(--d,16s) linear var(--delay,0s) infinite;
}
.nr-petal svg{width:100%;height:100%;display:block;animation:nr-sway calc(var(--d,16s)/4) ease-in-out infinite alternate}
@keyframes nr-fall{
  0%{transform:translate3d(0,-10px,0) rotate(0deg);opacity:0}
  8%{opacity:var(--o,.85)}
  85%{opacity:var(--o,.85)}
  100%{transform:translate3d(var(--x,60px),calc(var(--h,260px) + 40px),0) rotate(var(--r,320deg));opacity:0}
}
@keyframes nr-sway{from{transform:translateX(-10px) rotateY(0)}to{transform:translateX(12px) rotateY(160deg)}}

@keyframes nr-breathe{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(-4deg) scale(1.04)}}

/* entrada de la cabecera, una sola vez */
.langs button{transition:background .25s ease,color .25s ease,transform .25s var(--nr-ease-out)}
.langs button:hover{transform:translateY(-2px)}
@keyframes nr-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes nr-fade{from{opacity:0}to{opacity:1}}

/* ---------- Píldoras de color y filtros ---------- */
.pill{transition:transform .25s var(--nr-ease-out),box-shadow .25s ease,border-color .2s ease,background .2s ease,color .2s ease}
.pill .swatch{transition:transform .35s var(--nr-ease-out)}
.pill:hover .swatch{transform:scale(1.35)}
.pill.active{box-shadow:0 6px 18px rgba(241,95,27,.16)}
.pill.active .swatch{animation:nr-pop .45s var(--nr-ease-out)}
@keyframes nr-pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
.field select,.field input,.toolbar select,.toolbar input,.table-search input{transition:border-color .2s ease,box-shadow .25s ease,background .2s ease}
.field select:hover,.field input:hover,.toolbar select:hover,.toolbar input:hover{border-color:#e6b99c}

/* ---------- Títulos de sección: el punto de color late al entrar ---------- */
.section-title{animation:nr-rise .6s var(--nr-ease) backwards}
.section-title:after{transform-origin:left;animation:nr-line 1s var(--nr-ease) .15s backwards}
@keyframes nr-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Tarjetas de variedad ---------- */
main#catalog .card{
  transition:transform .35s var(--nr-ease),box-shadow .35s var(--nr-ease),border-color .25s ease;
  border-color:var(--nr-line);
}
main#catalog .card.nr-pending{opacity:0;transform:translateY(16px) scale(.985)}
main#catalog .card.nr-in{animation:nr-card-in .6s var(--nr-ease) backwards;animation-delay:var(--nr-i,0ms)}
@keyframes nr-card-in{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
main#catalog .card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);box-shadow:0 22px 44px rgba(193,73,17,.14),0 2px 6px rgba(32,21,15,.05);border-color:#f0c9b0}
main#catalog .card:focus-visible{outline:3px solid rgba(241,95,27,.45);outline-offset:3px}
main#catalog .card-img{position:relative;overflow:hidden;background:#fff}
main#catalog .card-img::after{
  /* destello suave que cruza la foto al pasar el mouse */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .9s var(--nr-ease);
}
main#catalog .card:hover .card-img::after{transform:translateX(120%)}
main#catalog .card-img img{transition:transform .7s var(--nr-ease)}
main#catalog .card:hover .card-img img{transform:scale(1.07) rotate(-3deg)}
.pack-value strong{display:inline-block;transition:transform .35s var(--nr-ease-out)}
main#catalog .card:hover .pack-value strong{transform:scale(1.12)}

/* ---------- Panel lateral de detalle ---------- */
.drawer{transition:transform .5s var(--nr-ease)!important}
.drawer-overlay{transition:opacity .35s ease!important;backdrop-filter:blur(0px)}
body.drawer-open .drawer-overlay{backdrop-filter:blur(3px)}
body.drawer-open .drawer-inner>*{animation:nr-rise .5s var(--nr-ease) backwards}
body.drawer-open .drawer-inner>*:nth-child(2){animation-delay:.05s}
body.drawer-open .drawer-inner>*:nth-child(3){animation-delay:.1s}
body.drawer-open .drawer-inner>*:nth-child(4){animation-delay:.15s}
body.drawer-open .drawer-inner>*:nth-child(5){animation-delay:.2s}
body.drawer-open .drawer-inner>*:nth-child(n+6){animation-delay:.25s}
body.drawer-open .drawer-img img{animation:nr-bloom-in .9s var(--nr-ease-out) .1s backwards}
@keyframes nr-bloom-in{from{opacity:0;transform:scale(.6) rotate(-35deg)}to{opacity:1;transform:none}}
.info-card,.calc-card{transition:transform .3s var(--nr-ease),box-shadow .3s ease,border-color .2s ease}
.info-card:hover,.calc-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(193,73,17,.08);border-color:#f0d3c0}
.close-btn{transition:transform .35s var(--nr-ease-out),background .2s ease}
.close-btn:hover{transform:rotate(90deg);background:var(--nr-blush-soft)}
.replacement img{transition:transform .5s var(--nr-ease)}
.replacement:hover img{transform:scale(1.07) rotate(-3deg)}

/* ---------- Tablas sin costuras ---------- */
.table-wrap,.cart-table-wrap,.broker-preview-wrap{
  border:0!important;border-radius:18px!important;background:#fff;
  box-shadow:0 1px 0 rgba(32,21,15,.04),0 14px 34px rgba(35,24,17,.07);
}
.table-wrap table,.cart-table-wrap table,.broker-preview-wrap table{border-collapse:separate;border-spacing:0}
.table-wrap thead th,.cart-table-wrap thead th,.broker-preview-wrap thead th,
.table-wrap th{
  background:rgba(255,250,246,.94)!important;
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--nr-line)!important;
  color:#8a7b70;
}
.table-wrap td,.cart-table-wrap td,.broker-preview-wrap td{border-bottom:1px solid transparent!important;transition:background .25s ease,color .2s ease}
.table-wrap tbody tr,.cart-table-wrap tbody tr,.broker-preview-wrap tbody tr{background:transparent!important}
.table-wrap tbody tr:nth-child(even) td,.cart-table-wrap tbody tr:nth-child(even) td{background:#fffbf8!important}
.table-wrap tbody tr:nth-child(odd) td,.cart-table-wrap tbody tr:nth-child(odd) td{background:#fff!important}
.table-wrap tbody tr td:first-child{box-shadow:inset 0 0 0 0 var(--nr-brand);transition:box-shadow .3s var(--nr-ease),background .25s ease}
.table-wrap tbody tr:hover td{background:var(--nr-blush-soft)!important}
.table-wrap tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 0 var(--nr-brand)}
.table-wrap tbody tr:nth-child(n) td.cell-active,.table-wrap tbody tr:hover td.cell-active{background:var(--nr-brand)!important;color:#fff;animation:nr-cell 1.4s var(--nr-ease) 1}
@keyframes nr-cell{0%{box-shadow:0 0 0 0 rgba(241,95,27,.55)}100%{box-shadow:0 0 0 12px rgba(241,95,27,0)}}
.table-wrap tfoot th,.table-wrap tfoot td{border-top:1px solid var(--nr-line)!important;background:#fff7f1!important}
/* filas que aparecen al filtrar u ordenar la tabla del inventario */
#tbody tr.nr-row-in{animation:nr-row-in .45s var(--nr-ease) backwards;animation-delay:var(--nr-i,0ms)}
@keyframes nr-row-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.table-wrap{scrollbar-width:thin;scrollbar-color:#e9c7b2 transparent}
.table-wrap::-webkit-scrollbar{height:8px;width:8px}
.table-wrap::-webkit-scrollbar-thumb{background:#ecc9b3;border-radius:99px}

/* ---------- Inventario: tarjetas de totales y barra de herramientas ---------- */
.summary .card{
  position:relative;overflow:hidden;border-color:var(--nr-line);
  transition:transform .35s var(--nr-ease),box-shadow .35s ease;
  animation:nr-rise .6s var(--nr-ease) backwards;
}
.summary .card:nth-child(2){animation-delay:.07s}
.summary .card:nth-child(3){animation-delay:.14s}
.summary .card:nth-child(4){animation-delay:.21s}
.summary .card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(193,73,17,.1)}
.summary .card span{display:inline-block;font-variant-numeric:tabular-nums}
.summary .card span.nr-bump{animation:nr-bump .5s var(--nr-ease-out)}
@keyframes nr-bump{0%{transform:scale(1)}40%{transform:scale(1.08);color:var(--nr-brand-dark)}100%{transform:scale(1)}}
.summary .card .nr-icon{position:absolute;right:12px;top:50%;width:34px;height:34px;margin-top:-17px;color:var(--nr-brand);opacity:.18;transition:opacity .3s ease,transform .5s var(--nr-ease-out)}
.summary .card:hover .nr-icon{opacity:.5;transform:rotate(-12deg) scale(1.1)}
.toolbar,.table-search,.mia-mode{animation:nr-rise .55s var(--nr-ease) backwards}
.toolbar{box-shadow:0 10px 28px rgba(35,24,17,.06)}
.status.active{animation:nr-slide .45s var(--nr-ease) backwards}
@keyframes nr-slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mia-tab{transition:background .25s ease,color .25s ease,transform .3s var(--nr-ease-out),box-shadow .3s ease}
.mia-tab:hover{transform:translateY(-1px)}
.mia-tab.active{box-shadow:0 8px 18px rgba(241,95,27,.25)}

/* ---------- Botones ---------- */
.btn,.primary-btn,.secondary-btn,.danger-btn,.catalog-action,.inventory-action,.public-inventory-refresh-btn,.cart-open-btn,.back{
  transition:transform .3s var(--nr-ease-out),box-shadow .3s ease,filter .2s ease,background .2s ease!important;
}
.btn:hover:not(:disabled),.primary-btn:hover,.catalog-action:hover,.inventory-action:hover:not(:disabled),.public-inventory-refresh-btn:hover:not(:disabled),.back:hover{transform:translateY(-2px)}
.btn:active:not(:disabled),.primary-btn:active,.inventory-action:active,.catalog-action:active{transform:translateY(0) scale(.97)}
.btn.primary,.primary-btn{position:relative;overflow:hidden}
.btn.primary::after,.primary-btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-130%);
}
.btn.primary:hover::after,.primary-btn:hover::after{transition:transform .8s var(--nr-ease);transform:translateX(130%)}
.inventory-action:not([hidden]){animation:nr-fab .55s var(--nr-ease-out) backwards}
.dispo-actions .inventory-action:nth-child(2){animation-delay:.05s}
.dispo-actions .inventory-action:nth-child(3){animation-delay:.1s}
.dispo-actions .inventory-action:nth-child(4){animation-delay:.15s}
.dispo-actions .inventory-action:nth-child(5){animation-delay:.2s}
.dispo-actions .inventory-action:nth-child(n+6){animation-delay:.25s}
@keyframes nr-fab{from{opacity:0;transform:translateX(30px) scale(.9)}to{opacity:1;transform:none}}
.inventory-action:hover:not(:disabled){box-shadow:0 18px 38px rgba(0,0,0,.3)}

/* Íconos que se mueven mientras algo carga */
.nr-spin-icon{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:.35em}
.nr-spin-icon svg{width:100%;height:100%;animation:nr-spin 1.1s linear infinite}
@keyframes nr-spin{to{transform:rotate(360deg)}}
.public-inventory-refresh-btn.loading .public-inventory-refresh-icon,
.public-inventory-refresh-btn:disabled .public-inventory-refresh-icon{display:inline-block;animation:nr-spin 1s linear infinite}
.btn.nr-busy,.inventory-action.nr-busy,.public-inventory-refresh-btn.nr-busy{cursor:progress}

/* ---------- Estado de carga: rosa girando ---------- */
.nr-loader{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0;color:#8a7e74;font-weight:800}
.nr-loader svg{width:46px;height:46px;color:var(--nr-brand);animation:nr-spin 2.4s linear infinite}
.nr-loader svg .nr-petal-ring{transform-origin:24px 24px;animation:nr-breathe 1.6s ease-in-out infinite}
.loading-state{border-style:solid!important;border-color:var(--nr-line)!important}

/* Avisos flotantes */
.compact-notice.active,.public-inventory-refresh-status.active{animation:nr-slide .45s var(--nr-ease) backwards}

/* Modales */
.auth-overlay.active .auth-box,.admin-overlay.active .admin-box{animation:nr-modal .55s var(--nr-ease) backwards}
@keyframes nr-modal{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.auth-head{position:relative;overflow:hidden}

/* Foco visible y consistente */
:where(button,a,select,input,textarea):focus-visible{outline:3px solid rgba(241,95,27,.4);outline-offset:2px}



/* ---------- Inventario en celular: cabecera ordenada ----------
   Antes el título quedaba en una columna de una letra de ancho. */
@media (max-width:760px){
  .top-inner{flex-wrap:wrap;align-items:center!important}
  .top .brand{flex:1 1 100%;order:-1;flex-direction:column;align-items:flex-start;gap:8px}
  .top .brand>img{width:118px}
  .top .brand h1{font-size:24px;overflow-wrap:normal}
  .top .brand p{overflow-wrap:normal}
  .top .back{flex:1 1 auto;text-align:center}
  /* botones flotantes más compactos para no tapar la tabla */
  .dispo-actions{right:10px;bottom:10px;gap:6px}
  .inventory-action{padding:9px 12px;font-size:12px}
}


/* =========================================================================
   Nivel 2 · animaciones más intensas
   ========================================================================= */

/* ---------- Intro (una vez por sesión) ---------- */
.nr-intro{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f15f1b 0%,#ff7a32 60%,#f15f1b 100%);
  animation:nr-intro-out .7s cubic-bezier(.7,0,.3,1) 1.15s forwards;
}
.nr-intro img{width:min(240px,55vw);height:auto;animation:nr-intro-logo 1.1s var(--nr-ease) both;filter:drop-shadow(0 10px 30px rgba(120,40,0,.35))}
.nr-intro .nr-intro-line{position:absolute;left:50%;top:calc(50% + 46px);width:min(240px,55vw);height:2px;margin-left:calc(min(240px,55vw)/-2);background:rgba(255,255,255,.85);transform-origin:left;animation:nr-line .8s var(--nr-ease) .25s both}
@keyframes nr-intro-logo{0%{opacity:0;transform:scale(.85);letter-spacing:.2em}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes nr-intro-out{to{transform:translateY(-100%);visibility:hidden}}

/* ---------- Barra de progreso al hacer scroll ---------- */
.nr-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:9998;pointer-events:none;
  background:linear-gradient(90deg,#c94911,#f15f1b,#ffb48d);transform-origin:left;transform:scaleX(0);
  box-shadow:0 0 12px rgba(241,95,27,.55)}

/* ---------- Pétalos con profundidad y paralaje ---------- */
.nr-petals{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.nr-petals.nr-far{filter:blur(1.3px);opacity:.6}

/* ---------- Tarjetas 3D con reflejo ---------- */
main#catalog .card{will-change:transform}
main#catalog .card::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),rgba(255,214,186,.18) 30%,transparent 60%);
  opacity:0;transition:opacity .35s ease;mix-blend-mode:soft-light;
}
main#catalog .card{position:relative}
main#catalog .card:hover::before{opacity:1}
main#catalog .card:hover{transition:transform .12s linear,box-shadow .35s ease,border-color .25s ease}
main#catalog .card:hover .card-img img{transform:scale(1.09) rotate(-3deg)}
/* número de bunches que rebota cuando la tarjeta aparece */
.pack-value strong.nr-count{animation:nr-pop-num .7s var(--nr-ease-out) backwards}
@keyframes nr-pop-num{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}

/* ---------- Títulos de sección: el punto de color emite una onda ---------- */
.section-title .swatch{position:relative}
.section-title.nr-seen .swatch::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid currentColor;color:var(--nr-brand);
  animation:nr-ring 1.6s var(--nr-ease) 2;
}
@keyframes nr-ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(3.2);opacity:0}}
.section-title.nr-wait{opacity:0;transform:translateX(-14px)}
.section-title.nr-seen{animation:nr-title-in .7s var(--nr-ease) backwards}
@keyframes nr-title-in{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

/* ---------- Píldora activa con borde animado ---------- */
.pill.active{
  border-color:transparent!important;
  background:linear-gradient(#fff7f2,#fff7f2) padding-box,
             linear-gradient(90deg,#f15f1b,#ffc29f,#c94911,#f15f1b) border-box!important;
  background-size:100% 100%,300% 100%!important;
  animation:nr-border 4s linear infinite;
}
@keyframes nr-border{to{background-position:0 0,300% 0}}

/* ---------- Pétalos al hacer clic / al terminar bien ---------- */
.nr-burst{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:9997}
.nr-burst span{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px}
.nr-burst svg{width:100%;height:100%;display:block}
.nr-ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.45);transform:scale(0);animation:nr-ripple .65s ease-out forwards}
@keyframes nr-ripple{to{transform:scale(1);opacity:0}}

/* ---------- Tablas: resaltar columna y fila ---------- */
.table-wrap td.nr-col,.table-wrap th.nr-col{background-image:linear-gradient(rgba(241,95,27,.07),rgba(241,95,27,.07))!important}
.table-wrap thead th.nr-col{color:var(--nr-brand-dark)!important}
.table-wrap tbody td{transition:background .25s ease,transform .25s var(--nr-ease)}
.drawer .table-wrap tbody td:not(:first-child):hover{transform:scale(1.12);position:relative;z-index:2;box-shadow:0 6px 16px rgba(193,73,17,.18);border-radius:8px}
/* ordenar: la flecha gira */
.sort-indicator{display:inline-block;transition:transform .35s var(--nr-ease-out)}
th[aria-sort="descending"] .sort-indicator{animation:nr-pop .35s var(--nr-ease-out)}
th[aria-sort="ascending"] .sort-indicator{animation:nr-pop .35s var(--nr-ease-out)}

/* ---------- Botones flotantes magnéticos ---------- */
.inventory-action,.public-inventory-refresh-btn,.cart-open-btn{translate:var(--mx,0) var(--my,0)}
.inventory-action{position:relative;overflow:hidden}
.inventory-action::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-140%);animation:nr-sheen 6s ease-in-out infinite;animation-delay:var(--nr-sheen,0s)}
@keyframes nr-sheen{0%,70%{transform:translateX(-140%)}100%{transform:translateX(140%)}}

/* ---------- Inventario: punto “en vivo” y tarjetas con brillo ---------- */
.updated:not(:empty){display:inline-flex;align-items:center;gap:8px}
.updated:not(:empty)::before{content:"";width:8px;height:8px;border-radius:50%;background:#24a148;box-shadow:0 0 0 0 rgba(36,161,72,.6);animation:nr-live 2s ease-out infinite;flex:0 0 auto}
@keyframes nr-live{0%{box-shadow:0 0 0 0 rgba(36,161,72,.55)}100%{box-shadow:0 0 0 10px rgba(36,161,72,0)}}
.summary .card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 40%,rgba(255,236,224,.7) 50%,transparent 60%);transform:translateX(-120%)}
.summary .card.nr-flash::after{animation:nr-flash 1s var(--nr-ease)}
@keyframes nr-flash{to{transform:translateX(120%)}}
.summary .card .nr-icon svg{width:100%;height:100%}
.summary .card:nth-child(1) .nr-icon{animation:nr-float 4s ease-in-out infinite}
.summary .card:nth-child(2) .nr-icon{animation:nr-float 4s ease-in-out .5s infinite}
.summary .card:nth-child(3) .nr-icon{animation:nr-sway-icon 3.5s ease-in-out infinite;transform-origin:50% 100%}
.summary .card:nth-child(4) .nr-icon{animation:nr-spin 14s linear infinite}
@keyframes nr-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes nr-sway-icon{0%,100%{rotate:-6deg}50%{rotate:6deg}}

/* ---------- Íconos emoji de los botones: pequeño saludo al pasar el mouse ---------- */
.catalog-action:hover,.inventory-action:hover{letter-spacing:.01em}
.nr-emoji{display:inline-block;transition:transform .45s var(--nr-ease-out)}
button:hover>.nr-emoji{transform:rotate(-14deg) scale(1.25)}

/* =========================================================================
   Nivel 3 · distribución, selectores y tablas profesionales
   ========================================================================= */
:root{
  --nr-field-h:42px;
  --nr-radius-sm:10px;
  --nr-radius:14px;
  --nr-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23c94911' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --nr-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3958a' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}

/* ---------- Selectores y campos ---------- */
.field select,.toolbar select,.mia-aging select,.broker-controls select,
.cart-order-data select,.fixed-order-field select{
  -webkit-appearance:none;appearance:none;
  height:var(--nr-field-h)!important;
  padding:0 34px 0 13px!important;
  border:1px solid #e3d5ca!important;border-radius:var(--nr-radius-sm)!important;
  background:#fff var(--nr-chevron) no-repeat right 13px center!important;
  color:#2b2622;font-weight:600;font-size:13.5px;
  text-overflow:ellipsis;white-space:nowrap;cursor:pointer;
  box-shadow:0 1px 2px rgba(35,24,17,.04),inset 0 -1px 0 rgba(35,24,17,.03);
  transition:border-color .2s ease,box-shadow .25s ease,background-color .2s ease,transform .25s var(--nr-ease)!important;
}
.field select:hover,.toolbar select:hover,.mia-aging select:hover{border-color:#e7b394!important;background-color:#fffdfb!important}
.field select:focus,.toolbar select:focus,.mia-aging select:focus,
.field input:focus,.toolbar input:focus,.table-search input:focus{
  border-color:var(--nr-brand)!important;
  box-shadow:0 0 0 4px rgba(241,95,27,.12),0 1px 2px rgba(35,24,17,.04)!important;
}
.field input,.toolbar input,.table-search input{
  height:var(--nr-field-h)!important;border:1px solid #e3d5ca!important;border-radius:var(--nr-radius-sm)!important;
  padding:0 14px!important;font-size:14px;font-weight:600;color:#2b2622;
  box-shadow:0 1px 2px rgba(35,24,17,.04);
}
.field input[type=search],.field input#searchInput,.toolbar input[type=search],.table-search input[type=search]{
  padding-left:40px!important;background:#fff var(--nr-search) no-repeat 14px center!important;
}
.field input::placeholder,.toolbar input::placeholder,.table-search input::placeholder{color:#b2a59b;font-weight:500}
.field label,.toolbar label,.table-search label,.mia-aging label{
  font-size:10.5px!important;letter-spacing:.09em!important;color:#9a8d83!important;margin-bottom:7px!important;
}
/* el selector que cambió late una vez */
select.nr-changed{animation:nr-select-pulse .7s var(--nr-ease)}
@keyframes nr-select-pulse{0%{box-shadow:0 0 0 0 rgba(241,95,27,.45)}100%{box-shadow:0 0 0 10px rgba(241,95,27,0)}}

/* ---------- Catálogo: barra de filtros mejor repartida ---------- */
.controls-inner{padding-top:18px!important;padding-bottom:20px!important}
.filter-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1.35fr) minmax(0,.85fr) minmax(0,1fr) minmax(220px,1.35fr)!important;gap:14px 16px!important;margin-top:18px!important}
@media(max-width:1100px){.filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:560px){.filter-grid{grid-template-columns:1fr 1fr!important}.filter-grid .field:last-child{grid-column:1/-1}}
.tone-pills{gap:8px 10px!important}
main{padding-top:30px!important}
.tone-section{margin-bottom:42px!important}
.section-title{margin-bottom:20px!important}
.grid{gap:18px!important}
.catalog-actions{padding:12px 16px!important;border-color:#eee2d8!important;box-shadow:0 10px 30px rgba(35,24,17,.06)!important}
.catalog-action{min-height:42px!important;border-radius:var(--nr-radius-sm)!important}

/* ---------- Inventario: barra de herramientas ---------- */
.page{padding-top:26px!important}
.toolbar{
  grid-template-columns:120px minmax(200px,1.6fr) repeat(5,minmax(108px,1fr)) max-content!important;
  gap:14px!important;padding:18px 20px!important;border-color:#eee2d8!important;border-radius:18px!important;
}
.toolbar-actions{display:flex!important;gap:10px!important;width:auto!important}
.toolbar-actions .btn{flex:0 0 auto;min-width:max-content;height:var(--nr-field-h)!important;width:auto!important;padding:0 18px!important;white-space:nowrap;border-radius:var(--nr-radius-sm)!important}
.btn.secondary{background:#fff!important;border:1px solid #e3d5ca!important;color:#5f564e!important}
.btn.secondary:hover{border-color:#e7b394!important;color:var(--nr-brand-dark)!important}
@media(max-width:1280px){
  .toolbar{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .toolbar .wide{grid-column:span 2}
  .toolbar .toolbar-actions{grid-column:span 1;justify-content:flex-end;align-self:end}
}
@media(max-width:760px){
  .toolbar{grid-template-columns:1fr 1fr!important;padding:14px!important}
  .toolbar .wide{grid-column:1/-1}
  .toolbar .toolbar-actions{grid-column:1/-1}
  .toolbar-actions .btn{flex:1}
}
.inventory-updates-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 4px}
.inventory-updates-row .updated{margin:0!important;box-shadow:none!important;background:#f1f9f2!important}
.summary{gap:14px!important;margin:18px 0 18px!important}
.summary .card{padding:16px 18px!important;border-radius:16px!important}
.summary .card b{font-size:10.5px!important;letter-spacing:.09em!important;color:#9a8d83!important;margin-bottom:8px!important}
.summary .card span{font-size:28px!important;letter-spacing:-.03em;line-height:1}
.table-search{padding:14px 18px!important;gap:16px!important;border-color:#eee2d8!important;border-radius:16px!important;margin:0 0 16px!important;align-items:flex-end!important}
.table-search small{flex-basis:100%;order:3;padding:0!important;margin-top:-6px;color:#a3968c!important;font-weight:600!important}

/* ---------- Pestañas Actual / Futura: interruptor deslizante ---------- */
.mia-mode{padding:12px 16px!important;border-color:#eee2d8!important;border-radius:16px!important;margin-top:0!important;margin-bottom:16px!important}
.mia-tabs{position:relative;display:inline-grid!important;grid-template-columns:1fr 1fr;gap:0!important;padding:4px;border-radius:999px;background:#f6efe9;border:1px solid #eee2d8}
.mia-tabs::before{
  content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;
  background:var(--nr-brand);box-shadow:0 6px 16px rgba(241,95,27,.3);
  transition:transform .45s var(--nr-ease-out);
}
.mia-tabs:has(#miaFutureTab.active)::before{transform:translateX(100%)}
.mia-tab{position:relative;z-index:1;border:0!important;background:transparent!important;box-shadow:none!important;min-width:110px;padding:9px 20px!important;color:#7a6e65!important;transition:color .3s ease!important}
.mia-tab.active{color:#fff!important}
.mia-tab:hover{transform:none!important}

/* ---------- Tabla de inventario profesional ---------- */
.page .table-wrap{border-radius:18px!important}
.page .table-wrap table{font-size:13px}
.page .table-wrap thead th{
  height:44px;padding:0 16px!important;font-size:10.5px!important;letter-spacing:.08em!important;
  color:#9a8d83!important;font-weight:800!important;white-space:nowrap;
}
.page .table-wrap tbody td{height:48px;padding:0 16px!important;border-bottom:1px solid #f6efe9!important;color:#3d3631}
.page .table-wrap tbody tr:nth-child(n) td{background:#fff!important}
.page .table-wrap tbody tr:hover td{background:#fff8f3!important}
.page .table-wrap tbody tr:last-child td{border-bottom:0!important}
.page .table-wrap td.nr-num,.page .table-wrap th.nr-num{text-align:right!important;font-variant-numeric:tabular-nums}
.page .table-wrap th.nr-num .sort-button{flex-direction:row-reverse}
.page .table-wrap td.nr-strong{font-weight:800;color:var(--nr-ink)}
.page .table-wrap td.nr-muted{color:#8a7e74;font-size:12px}
.nr-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.03em;white-space:nowrap}
.nr-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.nr-chip.d-uio{background:#fff1e8;color:#c94911}
.nr-chip.d-mia{background:#eaf3fb;color:#2f5f8f}
.nr-chip.d-other{background:#f3eee9;color:#6d625a}
.nr-box{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:24px;padding:0 8px;border-radius:7px;border:1px solid #eadfd6;background:#fbf8f5;color:#4e4640;font-size:11px;font-weight:850;letter-spacing:.04em}
.nr-box.b-hb{border-color:#f3cdb6;background:#fff6f0;color:#b04510}
.nr-box.b-qb{border-color:#d7e5f3;background:#f4f8fc;color:#2f5f8f}
.nr-box.b-eb{border-color:#d8ecd9;background:#f3faf3;color:#2f6b3c}
/* barra de datos en la columna de cajas: riel + relleno a la izquierda del número */
.page .table-wrap td.nr-bar{position:relative;font-weight:850;color:var(--nr-ink);padding-left:110px!important}
.page .table-wrap td.nr-bar::before,.page .table-wrap td.nr-bar::after{
  content:"";position:absolute;left:16px;top:50%;height:6px;margin-top:-3px;border-radius:99px;pointer-events:none}
.page .table-wrap td.nr-bar::before{width:76px;background:#f5ece5}
.page .table-wrap td.nr-bar::after{
  width:max(6px,calc(76px * var(--nr-w,0)));
  background:linear-gradient(90deg,#ffb48d,#f15f1b);
  transform-origin:left;animation:nr-bar-grow .9s var(--nr-ease) backwards;animation-delay:var(--nr-i,0ms)}
@keyframes nr-bar-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Botones de dispo: abanico desplegable ---------- */
.dispo-actions.nr-dial{gap:10px!important}
.dispo-actions.nr-dial>.inventory-action:not(.nr-dial-toggle){
  opacity:0;transform:translateY(14px) scale(.92);pointer-events:none;
  transition:opacity .25s ease,transform .4s var(--nr-ease-out);
  transition-delay:calc((var(--nr-k,0)) * 25ms);
  animation:none!important;
}
.dispo-actions.nr-dial.open>.inventory-action:not(.nr-dial-toggle),
.dispo-actions.nr-dial:has(.nr-busy)>.inventory-action:not(.nr-dial-toggle){
  opacity:1;transform:none;pointer-events:auto;transition-delay:calc(var(--nr-k,0) * 40ms);
}
.nr-dial-toggle{display:inline-flex!important;align-items:center;gap:10px;background:var(--nr-ink)!important;padding:13px 18px!important}
.nr-dial-toggle .nr-dial-plus{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--nr-brand);align-items:center;justify-content:center;transition:transform .45s var(--nr-ease-out)}
.nr-dial-toggle .nr-dial-plus svg{width:12px;height:12px}
.dispo-actions.nr-dial.open .nr-dial-plus{transform:rotate(135deg)}
.nr-dial-count{display:inline-flex;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.16);font-size:11px;align-items:center;justify-content:center}

/* ---------- Transición entre páginas ---------- */
.nr-curtain{position:fixed;inset:0;z-index:10000;pointer-events:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f15f1b 0%,#ff7a32 60%,#f15f1b 100%);transform:translateY(100%)}
.nr-curtain img{width:min(200px,50vw);opacity:0}
.nr-curtain.in{animation:nr-curtain-in .5s cubic-bezier(.7,0,.3,1) forwards}
.nr-curtain.in img{animation:nr-fade .3s ease .25s forwards}
.nr-curtain.out{transform:none;animation:nr-curtain-out .65s cubic-bezier(.7,0,.3,1) .1s forwards}
.nr-curtain.out img{opacity:1}
@keyframes nr-curtain-in{from{transform:translateY(100%)}to{transform:none}}
@keyframes nr-curtain-out{from{transform:none}to{transform:translateY(-100%)}}

/* ---------- Panel de detalle: tabla de cajas más limpia ---------- */
.drawer .table-wrap thead th{height:38px;font-size:10.5px!important;letter-spacing:.06em;color:#9a8d83!important}
.drawer .table-wrap tbody td{height:46px}
.drawer h3{letter-spacing:.09em!important;color:#9a8d83!important;font-size:11px!important;margin-top:28px!important}
.info-grid{gap:10px!important}
.calc{gap:12px!important}

/* ---------- Broker ---------- */
.broker-mode textarea{border:1px solid #e3d5ca;border-radius:var(--nr-radius);padding:14px 16px;font-size:14px;line-height:1.5;box-shadow:0 1px 2px rgba(35,24,17,.04);transition:border-color .2s ease,box-shadow .25s ease}
.broker-mode textarea:focus{outline:none;border-color:var(--nr-brand);box-shadow:0 0 0 4px rgba(241,95,27,.12)}

.mia-aging select{width:132px!important}
.mia-aging label{white-space:nowrap}

/* =========================================================================
   Nivel 4 · gráficos-slicer, transiciones cinematográficas, pétalos en canvas
   ========================================================================= */

/* ---------- Pétalos en canvas (cabecera) ---------- */
.nr-petal-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ---------- Gráficos que filtran (slicers) ---------- */
.nr-charts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.35fr);gap:14px;margin:0 0 18px}
.nr-charts[hidden]{display:none}
.nr-chart{position:relative;background:#fff;border:1px solid #eee2d8;border-radius:16px;padding:16px 18px 14px;min-width:0;
  transition:opacity .3s ease,box-shadow .3s ease;animation:nr-rise .5s var(--nr-ease) backwards}
.nr-chart:nth-child(2){animation-delay:.06s}.nr-chart:nth-child(3){animation-delay:.12s}
.nr-chart:hover{box-shadow:0 12px 30px rgba(193,73,17,.08)}
.nr-chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.nr-chart h3{margin:0;font-size:13.5px;font-weight:800;color:var(--nr-ink);letter-spacing:-.01em}
.nr-chart-sub{font-size:12px;color:#8a7e74;font-weight:600;font-variant-numeric:tabular-nums}
.nr-chart-reset{border:0;background:none;padding:2px 4px;color:var(--nr-brand-dark);font-size:12px;font-weight:700;cursor:pointer;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s ease}
.nr-chart.nr-has-sel .nr-chart-reset{opacity:1;pointer-events:auto}
.nr-chart-reset:hover{background:var(--nr-blush-soft)}
/* barras horizontales */
.nr-hbars{display:flex;flex-direction:column;gap:2px}
.nr-hbar{display:grid;grid-template-columns:minmax(52px,var(--nr-label,64px)) minmax(0,1fr) 44px;align-items:center;gap:10px;width:100%;
  border:0;background:none;padding:6px 6px;border-radius:9px;cursor:pointer;text-align:left;font:inherit;color:#4e4640;
  transition:background .2s ease,opacity .3s ease}
.nr-hbar:hover{background:#fff6f0}
.nr-hbar:focus-visible{outline:2px solid rgba(241,95,27,.5);outline-offset:1px}
.nr-hbar-label{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nr-hbar-val{font-size:12.5px;font-weight:800;color:var(--nr-ink);text-align:right;font-variant-numeric:tabular-nums}
.nr-track{position:relative;height:12px}
.nr-fill{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;transition:width .6s var(--nr-ease)}
.nr-fill.total{background:#fbdcca}
.nr-fill.cur{background:linear-gradient(90deg,#f8874f,#f15f1b)}
.nr-chart.nr-has-sel .nr-hbar:not([aria-pressed="true"]),.nr-chart.nr-has-sel .nr-col:not([aria-pressed="true"]){opacity:.42}
.nr-hbar[aria-pressed="true"] .nr-hbar-label{color:var(--nr-brand-dark)}
/* columnas verticales (largo) */
.nr-cols{display:flex;align-items:flex-end;gap:8px;height:132px;padding-top:18px}
.nr-col{position:relative;flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;
  border:0;background:none;padding:0;cursor:pointer;font:inherit;transition:opacity .3s ease}
.nr-col-bars{position:relative;flex:1 1 auto;display:flex;align-items:flex-end;justify-content:center}
.nr-col-bars .nr-fill{left:12%;right:12%;top:auto;bottom:0;border-radius:4px 4px 0 0;transition:height .6s var(--nr-ease)}
.nr-col-label{margin-top:7px;font-size:11.5px;font-weight:700;color:#7a6e65;text-align:center;white-space:nowrap}
.nr-col-val{position:absolute;left:0;right:0;text-align:center;font-size:11px;font-weight:800;color:var(--nr-ink);font-variant-numeric:tabular-nums;transform:translateY(-16px)}
.nr-col:hover .nr-col-bars{filter:brightness(1.04)}
.nr-col:hover .nr-col-label,.nr-col[aria-pressed="true"] .nr-col-label{color:var(--nr-brand-dark)}
.nr-col:focus-visible{outline:2px solid rgba(241,95,27,.5);outline-offset:2px;border-radius:6px}
.nr-chart-empty{padding:26px 0;text-align:center;color:#9a8d83;font-size:12.5px;font-weight:600}
/* tooltip */
.nr-tip{position:fixed;z-index:9990;pointer-events:none;background:#1f1d1b;color:#fff;border-radius:10px;padding:8px 11px;font-size:12px;line-height:1.35;
  box-shadow:0 10px 26px rgba(0,0,0,.22);opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease;max-width:260px}
.nr-tip.on{opacity:1;transform:none}
.nr-tip b{display:block;font-size:15px;font-variant-numeric:tabular-nums}
.nr-tip span{color:#d9cdc4}
@media(max-width:1100px){.nr-charts{grid-template-columns:1fr 1fr}.nr-charts .nr-chart:last-child{grid-column:1/-1}}
@media(max-width:680px){.nr-charts{grid-template-columns:1fr}.nr-charts .nr-chart:last-child{grid-column:auto}}

/* ---------- Transiciones cinematográficas (View Transitions) ---------- */
::view-transition-group(*){animation-duration:.42s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
::view-transition-group(nr-hero){animation-duration:.6s;z-index:60}
::view-transition-group(nr-drawer){animation-duration:.55s;z-index:50}
::view-transition-image-pair(nr-hero){isolation:auto}
::view-transition-old(nr-hero),::view-transition-new(nr-hero){animation:none;mix-blend-mode:normal;height:100%;object-fit:contain}
.nr-vt-drawer .drawer,.nr-vt-drawer .drawer-overlay{transition:none!important}
.nr-vt-drawer .drawer-img img,.nr-vt-drawer body.drawer-open .drawer-img img{animation:none!important}
.nr-vt-table #tbody tr.nr-row-in{animation:none!important}
/* encabezado de gráfico: título y acción arriba, total debajo */
.nr-chart{display:flex;flex-direction:column}
.nr-chart-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title reset" "sub sub";row-gap:2px;align-items:center!important}
.nr-chart h3{grid-area:title;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nr-chart-sub{grid-area:sub}
.nr-chart-reset{grid-area:reset}
.nr-chart-body{flex:1 1 auto;display:flex;flex-direction:column}
.nr-chart-body>.nr-hbars,.nr-chart-body>.nr-cols{flex:1 1 auto}
#nrChartBox .nr-hbars{justify-content:space-evenly}
#nrChartBox .nr-track{height:16px}
@media(max-width:680px){
  .table-search{display:grid!important;grid-template-columns:minmax(0,1fr);gap:12px!important}
  .table-search>div,.table-search #amsFreightControl{width:100%;flex:none!important}
  .table-search small{margin-top:0}
}
.nr-intro.nr-from-pre img{animation:none}
.nr-curtain img{width:min(240px,55vw)}

/* =========================================================================
   Nivel 5 · 3D y detalles finos
   ========================================================================= */
@property --nr-h{syntax:'<length>';inherits:true;initial-value:0px}
@property --nr-gh{syntax:'<length>';inherits:true;initial-value:0px}

/* ---------- Detalles del navegador con la marca ---------- */
::selection{background:#ffd9c4;color:#1f1d1b}
input,textarea{caret-color:#f15f1b}
html{scrollbar-color:#e8b89c #f6efe9;scrollbar-width:thin}
html::-webkit-scrollbar{width:11px;height:11px}
html::-webkit-scrollbar-track{background:#f6efe9}
html::-webkit-scrollbar-thumb{background:#e8b89c;border-radius:99px;border:3px solid #f6efe9}
html::-webkit-scrollbar-thumb:hover{background:#f15f1b}
a{text-underline-offset:3px}
.nr-tip::after{content:"";position:absolute;left:18px;bottom:-5px;width:10px;height:10px;background:#1f1d1b;transform:rotate(45deg);border-radius:2px}

/* ---------- Cabecera con inclinación 3D ---------- */
.hero,.top{perspective:1100px}

/* ---------- Tarjetas del catálogo: entran abatiéndose en 3D ---------- */
main#catalog .grid{perspective:1200px}
@keyframes nr-card-in{
  from{opacity:0;transform:perspective(900px) rotateX(-32deg) translateY(30px) scale(.96);transform-origin:50% 0}
  to{opacity:1;transform:none}
}
main#catalog .card.nr-pending{transform:perspective(900px) rotateX(-32deg) translateY(30px) scale(.96)}

/* ---------- Luz que sigue al cursor en tarjetas de datos ---------- */
.summary .card,.nr-chart{--mx:50%;--my:50%}
.summary .card::before,.nr-chart::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(241,95,27,.09),transparent 65%)}
.summary .card:hover::before,.nr-chart:hover::before{opacity:1}

/* ---------- Totales tipo odómetro ---------- */
.summary .card.nr-has-odo>span[id]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nr-odo{display:inline-flex;font-size:28px;font-weight:950;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--nr-ink);height:1em;overflow:hidden}
.nr-odo-d{display:inline-block;height:1em;overflow:hidden;position:relative}
.nr-odo-strip{display:flex;flex-direction:column;transition:transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:var(--nr-dd,0ms)}
.nr-odo-strip>span{height:1em;line-height:1}
.nr-odo-sep{display:inline-block}
@media(max-width:680px){.nr-odo{font-size:20px}}

/* ---------- Cubo 3D en la tarjeta de cajas ---------- */
.nr-cube-wrap{position:absolute;right:16px;top:50%;width:30px;height:30px;margin-top:-15px;perspective:300px;opacity:.55;transition:opacity .3s ease}
.summary .card:hover .nr-cube-wrap{opacity:1}
.nr-cube{position:relative;width:30px;height:30px;transform-style:preserve-3d;animation:nr-cube-spin 18s linear infinite}
.nr-cube i{position:absolute;inset:0;border:1.5px solid #f15f1b;background:rgba(255,236,224,.75);border-radius:3px}
.nr-cube i:nth-child(1){transform:translateZ(15px)}
.nr-cube i:nth-child(2){transform:rotateY(180deg) translateZ(15px)}
.nr-cube i:nth-child(3){transform:rotateY(90deg) translateZ(15px);background:rgba(251,200,170,.8)}
.nr-cube i:nth-child(4){transform:rotateY(-90deg) translateZ(15px);background:rgba(251,200,170,.8)}
.nr-cube i:nth-child(5){transform:rotateX(90deg) translateZ(15px);background:rgba(255,248,243,.9)}
.nr-cube i:nth-child(6){transform:rotateX(-90deg) translateZ(15px)}
.nr-cube i:nth-child(5)::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:rgba(241,95,27,.55)}
@keyframes nr-cube-spin{from{transform:rotateX(-24deg) rotateY(0)}to{transform:rotateX(-24deg) rotateY(360deg)}}
.summary .card.nr-flash .nr-cube{animation-duration:5s}

/* columnas de 'Cajas por largo': planas, con esquinas superiores redondeadas */
.nr-col-bars .nr-fill{border-radius:6px 6px 0 0!important}

/* ---------- Esqueletos de carga del catálogo ---------- */
.loading-state.nr-skel-host{border:0!important;background:none!important;padding:0!important;text-align:left!important}
.nr-skel-label{display:flex;align-items:center;gap:10px;margin:0 0 16px;color:#8a7e74;font-weight:700;font-size:13px}
.nr-skel-label i{width:8px;height:8px;border-radius:50%;background:#f15f1b;animation:nr-live 1.6s ease-out infinite}
.nr-skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:18px}
.nr-skel{border:1px solid #f1e6dd;border-radius:16px;background:#fff;overflow:hidden;animation:nr-rise .5s var(--nr-ease) backwards;animation-delay:var(--nr-i,0ms)}
.nr-skel b,.nr-skel em,.nr-skel u{display:block;border-radius:8px;background:linear-gradient(100deg,#f6eee8 30%,#fff8f3 50%,#f6eee8 70%) 0 0/300% 100%;animation:nr-shimmer 1.3s linear infinite}
.nr-skel b{height:150px;border-radius:0}
.nr-skel em{height:14px;width:70%;margin:14px 13px 10px}
.nr-skel u{height:10px;width:45%;margin:0 13px 16px}
@keyframes nr-shimmer{to{background-position:-300% 0}}
/* el odómetro no hereda el estilo genérico de los números de las tarjetas */
.summary .card .nr-odo{display:inline-flex!important;font-size:28px!important;line-height:1!important;height:1em}
.summary .card .nr-odo span{font-size:inherit!important;line-height:1!important;letter-spacing:inherit}
.summary .card .nr-odo .nr-odo-d{display:inline-block!important;height:1em;overflow:hidden}
.summary .card .nr-odo .nr-odo-strip{display:flex!important;flex-direction:column}
.summary .card .nr-odo .nr-odo-strip>span{display:block!important;height:1em}
@media(max-width:680px){.summary .card .nr-odo{font-size:20px!important}}



/* =========================================================================
   Nivel 7 · Tarjetas boutique, selectores propios y slicers
   ========================================================================= */

/* ---------- Tarjetas boutique: la rosa recortada flota sobre su color ---------- */
main#catalog .grid{gap:22px!important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important}
main#catalog .card{--tone:#f15f1b;overflow:visible!important;border-radius:22px!important;border:1px solid #f1e7df!important;background:#fff;
  box-shadow:0 1px 2px rgba(35,24,17,.04),0 10px 26px rgba(35,24,17,.05)!important}
main#catalog .card:hover{box-shadow:0 28px 50px color-mix(in srgb,var(--tone) 22%,transparent),0 2px 6px rgba(32,21,15,.05)!important;border-color:color-mix(in srgb,var(--tone) 30%,#f1e7df)!important}
main#catalog .card-img{position:relative;height:196px!important;overflow:visible!important;border-bottom:0!important;border-radius:21px 21px 0 0;
  background:
    radial-gradient(58% 52% at 50% 46%,color-mix(in srgb,var(--tone) 30%,#fff) 0%,color-mix(in srgb,var(--tone) 9%,#fff) 58%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,color-mix(in srgb,var(--tone) 6%,#fff),#fff)!important}
main#catalog .card-img::after{display:none!important}
main#catalog .card-img::before{content:"";position:absolute;left:50%;bottom:14px;width:118px;height:16px;margin-left:-59px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--tone) 40%,rgba(60,20,5,.35)),transparent);filter:blur(3px);opacity:.55;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s ease}
main#catalog .card-img img{position:relative;z-index:1;width:150px!important;height:150px!important;background:transparent!important;
  filter:drop-shadow(0 14px 14px rgba(70,25,8,.18));transition:transform .6s cubic-bezier(.16,1,.3,1),filter .6s ease!important}
main#catalog .card-img img:not(.nr-cut){mix-blend-mode:multiply}
main#catalog .card:hover .card-img img{transform:translateY(-26px) scale(1.2) rotate(-6deg)!important;filter:drop-shadow(0 30px 24px rgba(70,25,8,.24))}
main#catalog .card:hover .card-img::before{transform:scale(1.25);opacity:.32}
main#catalog .card-body{padding:16px 18px 18px!important}
main#catalog .card h3{font-size:16.5px!important;letter-spacing:-.015em;line-height:1.15}
main#catalog .card .meta-line{margin-top:2px}
main#catalog .card .meta-line .swatch{box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 18%,transparent)}
main#catalog .card .pack-value{margin-top:12px;padding-top:12px;border-top:1px dashed #f0e4da}
main#catalog .card .pack-value strong{font-size:30px!important;color:color-mix(in srgb,var(--tone) 55%,#a33d0c)!important}
main#catalog .card .tag{background:#faf5f1!important;border:1px solid #f1e6dd}
main#catalog .card .new-product-badge,main#catalog .card .import-badge{z-index:3}
/* el encabezado del grupo toma el color del grupo */
main#catalog .section-title{--tone:#f15f1b}
main#catalog .section-title h2{font-size:26px!important;letter-spacing:-.03em}
main#catalog .section-title:after{background:linear-gradient(90deg,color-mix(in srgb,var(--tone) 55%,transparent),#eadfd6 40%,transparent)!important;height:2px!important}
main#catalog .section-title .swatch{width:14px;height:14px;box-shadow:0 0 0 4px color-mix(in srgb,var(--tone) 18%,transparent)}

/* ---------- Píldoras de color como slicers ---------- */
.tone-pills{gap:8px!important}
.tone-pills .pill{--tone:#f15f1b;height:38px;padding:0 6px 0 12px!important;gap:9px!important;border:1px solid #ece1d8!important;background:#fff!important;
  font-size:12.5px!important;color:#4e4640!important;box-shadow:0 1px 2px rgba(35,24,17,.04);animation:none!important}
.tone-pills .pill .swatch{width:12px;height:12px;border:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 16%,transparent)}
.tone-pills .pill>span:last-child{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#f6efe9;color:#7a6e65;font-size:11.5px;font-weight:850;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;transition:background .25s ease,color .25s ease}
.tone-pills .pill:hover{border-color:color-mix(in srgb,var(--tone) 45%,#ece1d8)!important;transform:translateY(-1px)}
.tone-pills .pill.active{background:color-mix(in srgb,var(--tone) 12%,#fff)!important;border-color:color-mix(in srgb,var(--tone) 60%,#fff)!important;color:#1f1d1b!important;
  box-shadow:0 8px 20px color-mix(in srgb,var(--tone) 22%,transparent)!important}
.tone-pills .pill.active>span:last-child{background:var(--tone);color:#fff}
.tone-pills .pill.nr-light.active>span:last-child{color:#1f1d1b}

/* ---------- Selectores propios ---------- */
.nr-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;clip:rect(0 0 0 0)}
.nr-has-sel>label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nr-has-sel{position:relative}
.nr-sel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 18px;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;
  width:100%;height:54px;padding:8px 14px 8px 15px;border:1px solid #e6d9ce;border-radius:14px;background:#fff;cursor:pointer;font:inherit;color:#1f1d1b;
  box-shadow:0 1px 2px rgba(35,24,17,.04);transition:border-color .2s ease,box-shadow .25s ease,background .2s ease}
.nr-sel:hover{border-color:#e7b394;background:#fffdfb}
.nr-sel:focus-visible,.nr-sel[aria-expanded="true"]{outline:none;border-color:var(--nr-brand);box-shadow:0 0 0 4px rgba(241,95,27,.12)}
.nr-sel-lbl{grid-column:1;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#a0938a;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nr-sel-val{grid-column:1;font-size:14px;font-weight:750;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.nr-sel.is-set .nr-sel-val{color:var(--nr-brand-dark)}
.nr-sel-chev{grid-column:2;grid-row:1/3;width:18px;height:18px;color:#c94911;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.nr-sel[aria-expanded="true"] .nr-sel-chev{transform:rotate(180deg)}
.nr-sel:disabled{opacity:.5;cursor:not-allowed}
/* lista desplegable */
.nr-pop{position:fixed;z-index:9995;min-width:220px;max-height:min(360px,60vh);display:flex;flex-direction:column;background:#fff;border:1px solid #eadfd6;border-radius:16px;
  box-shadow:0 24px 60px rgba(35,24,17,.18),0 2px 8px rgba(35,24,17,.06);padding:6px;transform-origin:top center;
  animation:nr-pop-in .18s cubic-bezier(.16,1,.3,1)}
.nr-pop.up{transform-origin:bottom center}
@keyframes nr-pop-in{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.nr-pop-search{position:relative;margin:2px 2px 6px}
.nr-pop-search input{width:100%;height:38px;border:1px solid #eadfd6;border-radius:10px;padding:0 12px 0 34px;font:inherit;font-size:13px;outline:none;
  background:#fffaf6 var(--nr-search) no-repeat 11px center}
.nr-pop-search input:focus{border-color:var(--nr-brand);box-shadow:0 0 0 3px rgba(241,95,27,.12)}
.nr-pop-list{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.nr-opt{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:8px;padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:650;color:#3d3631;cursor:pointer;user-select:none}
.nr-opt svg{width:16px;height:16px;color:var(--nr-brand);opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.nr-opt[aria-selected="true"]{color:#1f1d1b;font-weight:800;background:#fff5ef}
.nr-opt[aria-selected="true"] svg{opacity:1;transform:none}
.nr-opt.hl{background:#fbf3ed}
.nr-opt[aria-selected="true"].hl{background:#ffeadd}
.nr-opt[aria-disabled="true"]{opacity:.42;cursor:not-allowed}
.nr-opt-empty{padding:14px;text-align:center;color:#9a8d83;font-size:13px}

/* filtros del catálogo con la etiqueta dentro de la caja */
.filter-grid .field input{height:54px!important;border-radius:14px!important}
.filter-grid{align-items:stretch!important}

/* ---------- Inventario: Destino como interruptor deslizante ---------- */
.nr-seg-row{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:4px;margin-bottom:2px;border-bottom:1px solid #f3eae2}
.nr-seg-title{font-size:13px;font-weight:800;color:#6f655d}
.nr-seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:999px;background:#f6efe9;border:1px solid #eee2d8}
.nr-seg-thumb{position:absolute;top:4px;bottom:4px;left:4px;border-radius:999px;background:var(--nr-brand);box-shadow:0 8px 18px rgba(241,95,27,.3);transition:transform .45s cubic-bezier(.16,1,.3,1),width .45s cubic-bezier(.16,1,.3,1)}
.nr-seg button{position:relative;z-index:1;border:0;background:none;padding:9px 18px;min-width:84px;font:inherit;font-size:13px;font-weight:800;color:#6f655d;cursor:pointer;border-radius:999px;white-space:nowrap;transition:color .3s ease}
.nr-seg button[aria-pressed="true"]{color:#fff}
.nr-seg button:disabled{opacity:.4;cursor:not-allowed}
.nr-seg button:focus-visible{outline:2px solid rgba(241,95,27,.5);outline-offset:2px}
.toolbar .nr-hidden-field{display:none!important}
.toolbar{grid-template-columns:minmax(220px,1.7fr) repeat(5,minmax(118px,1fr)) max-content!important}
.toolbar input{height:54px!important;border-radius:14px!important}
.toolbar-actions .btn{height:54px!important;border-radius:14px!important}
@media(max-width:1280px){.toolbar{grid-template-columns:repeat(3,minmax(0,1fr))!important}.toolbar .wide{grid-column:span 2}.toolbar .toolbar-actions{grid-column:span 1}}
@media(max-width:760px){.toolbar{grid-template-columns:1fr 1fr!important}.toolbar .wide,.toolbar .toolbar-actions{grid-column:1/-1}.nr-seg{width:100%}.nr-seg button{min-width:0;padding:9px 8px}}
.mia-aging .nr-sel{width:150px;height:46px;padding-top:5px;padding-bottom:5px}
/* ajustes de alineación */
.nr-sel-lbl{letter-spacing:.05em!important;font-size:10px!important}
.filter-grid .field.nr-has-search>label,.toolbar .nr-has-search>label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.filter-grid .field.nr-has-search,.toolbar .nr-has-search{align-self:end}
.toolbar{grid-template-columns:minmax(200px,1.35fr) repeat(5,minmax(134px,1fr)) max-content!important;align-items:end!important}
.toolbar>.nr-seg-row{grid-column:1/-1!important;width:100%!important}
@media(max-width:1280px){.toolbar{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:760px){.toolbar{grid-template-columns:1fr 1fr!important}.nr-seg-row .nr-seg{width:100%}.nr-seg-row{flex-direction:column;align-items:stretch;gap:8px}}
.mia-aging .nr-sel{width:190px}
.filter-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.05fr) minmax(0,1fr) minmax(200px,1.25fr)!important}
@media(max-width:1100px){.filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:560px){.filter-grid{grid-template-columns:1fr 1fr!important}}
.nr-sel{grid-template-columns:minmax(0,1fr) 16px;padding-right:12px;column-gap:8px}
.toolbar{grid-template-columns:minmax(190px,1.25fr) repeat(5,minmax(140px,1fr)) max-content!important}
@media(max-width:1280px){.toolbar{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:760px){.toolbar{grid-template-columns:1fr 1fr!important}}
.mia-aging .nr-sel{width:214px}
.toolbar .nr-sel-lbl{letter-spacing:.02em!important}

/* =========================================================================
   Ajustes 01/10 · móvil, cabecera del inventario
   ========================================================================= */
/* el abanico solo se abre por el botón: el contenedor no intercepta el mouse */
.dispo-actions.nr-dial{pointer-events:none}
.dispo-actions.nr-dial>.nr-dial-toggle,.dispo-actions.nr-dial.open>.inventory-action:not(.nr-dial-toggle),.dispo-actions.nr-dial:has(.nr-busy)>.inventory-action{pointer-events:auto}

/* cabecera del inventario: logo como enlace y acciones agrupadas a la derecha */
.brand-home{display:inline-flex;border-radius:10px;transition:opacity .2s ease}
.brand-home:hover{opacity:.85}
.brand-home:focus-visible{outline:2px solid #fff;outline-offset:4px}
.top-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:760px){.top-actions{width:100%;margin-left:0}.top-actions .back{flex:1 1 auto;text-align:center}}

/* variedades en el celular: dos columnas compactas y con más color */
@media(max-width:560px){
  main#catalog .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  main#catalog .card{border-radius:18px!important}
  main#catalog .card-img{height:138px!important;border-radius:17px 17px 0 0}
  main#catalog .card-img img{width:112px!important;height:112px!important}
  main#catalog .card-img::before{width:84px;margin-left:-42px;bottom:10px}
  main#catalog .card-body{padding:11px 11px 13px!important;background:linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--tone) 5%,#fff) 100%);border-radius:0 0 17px 17px}
  main#catalog .card h3{font-size:14px!important;min-height:0!important}
  main#catalog .card .card-head{row-gap:5px!important;margin-bottom:6px!important}
  main#catalog .card .product-badges .species-badge,main#catalog .card .product-badges .source-badge{padding:4px 7px;font-size:9px}
  main#catalog .card .meta-line{font-size:11px;gap:6px}
  main#catalog .card .pack-value{margin-top:8px;padding-top:8px}
  main#catalog .card .pack-value strong{font-size:24px!important}
  main#catalog .card .pack-value span{font-size:11px}
  main#catalog .card .stems-mini{font-size:10.5px}
  main#catalog .card .tag{font-size:10px;padding:3px 6px}
  main#catalog .card:hover .card-img img{transform:translateY(-14px) scale(1.12) rotate(-5deg)!important}
  main#catalog .section-title h2{font-size:22px!important}
}


/* =========================================================================
   Ajustes 01/10 · v20
   ========================================================================= */

/* Tarjetas y títulos que ya se vieron no repiten su entrada al volver a pintarse */
main#catalog .card.nr-in.nr-still,.section-title.nr-seen.nr-still{animation:none!important}
main#catalog .card.nr-still .pack-value strong{animation:none!important}

/* Panel de detalle: la rosa recortada sobre el color de su grupo */
.drawer-img.nr-cut-box{
  background:radial-gradient(62% 58% at 50% 46%,color-mix(in srgb,var(--tone,#f15f1b) 26%,#fff),color-mix(in srgb,var(--tone,#f15f1b) 6%,#fff) 70%)!important;
  border-color:color-mix(in srgb,var(--tone,#f15f1b) 22%,#eaded4)!important}
.drawer-img img.nr-cut{background:transparent!important;filter:drop-shadow(0 8px 8px rgba(70,25,8,.18))!important}
/* al re-pintar el panel (cambio de largo, etc.) la foto no vuelve a entrar */
body.drawer-open .drawer-img img{animation:none}

/* Información logística de cajas: datos estables, sin movimiento */
#boxGuideOverlay,#boxGuideOverlay *,#boxGuideOverlay *::before,#boxGuideOverlay *::after{
  animation:none!important;transition:none!important}
#boxGuideOverlay .table-wrap td,#boxGuideOverlay .table-wrap th,
#boxGuideOverlay .table-wrap tr,#boxGuideOverlay .table-wrap tbody td:hover,
#boxGuideOverlay .table-wrap tbody tr:hover td{transform:none!important;scale:none!important}
#boxGuideOverlay .nr-col{background:inherit!important;box-shadow:none!important}

/* ---------- Foto de perfil ---------- */
.nr-sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;padding:0!important;margin:-1px!important;border:0!important}
.nr-av-wrap{position:relative;display:inline-flex;align-items:center;flex:none}
.nr-av-wrap[hidden]{display:none}
.nr-av-wrap .nr-av,.nr-av{--av:40px;position:relative;flex:none;width:var(--av);height:var(--av);padding:0!important;border:0!important;border-radius:50%!important;cursor:pointer;
  background:#fff;box-shadow:0 0 0 3.5px #f15f1b,0 0 0 5px #fff,0 6px 16px rgba(60,20,5,.22);
  display:inline-flex;align-items:center;justify-content:center;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease}
.nr-av-wrap .nr-av-face,.nr-av-face{padding:0!important;white-space:normal;position:absolute;inset:3px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#fff1e8,#ffd9c2);color:#c94911;font:900 14px/1 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.02em}
.nr-av-face img{width:100%;height:100%;object-fit:cover;display:block}
.nr-av-wrap .nr-av-cam{padding:0!important;position:absolute;right:-5px;bottom:-5px;width:19px;height:19px;border-radius:50%;background:#1f1d1b;color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff;opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.nr-av-cam svg{width:11px;height:11px}
.nr-av:not(.has-photo) .nr-av-cam,.nr-av:hover .nr-av-cam,.nr-av:focus-visible .nr-av-cam{opacity:1;transform:none}
.nr-av-wrap .nr-av:hover{transform:translateY(-1px) scale(1.05)}
.nr-av-wrap .nr-av:focus-visible{outline:none;box-shadow:0 0 0 3.5px #f15f1b,0 0 0 5px #fff,0 0 0 8px rgba(255,255,255,.55)}
.nr-av-wrap.is-busy .nr-av-face::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.6) }
.nr-av-wrap.is-busy .nr-av{cursor:progress}
  border:1px solid #eaded4;box-shadow:0 18px 40px rgba(35,24,17,.18);display:flex;flex-direction:column;gap:2px;color:#1f1d1b}
.nr-av-mini{--av:34px;cursor:default;margin-right:4px;box-shadow:0 0 0 3px #f15f1b,0 0 0 4.5px #fff}
.nr-av-mini .nr-av-face{inset:2.5px;font-size:11px}
.admin-row .nr-av-set{white-space:nowrap}
.nr-av-toast{position:fixed;left:50%;bottom:24px;z-index:2147483001;transform:translateX(-50%);padding:11px 16px;border-radius:12px;
  background:#1f1d1b;color:#fff;font:800 13px/1.3 Inter,ui-sans-serif,system-ui,sans-serif;box-shadow:0 14px 34px rgba(0,0,0,.25);
  animation:nr-rise .35s cubic-bezier(.16,1,.3,1) backwards;transition:opacity .4s ease}
.nr-av-toast.is-bad{background:#a51e1e}
.nr-av-toast.is-out{opacity:0}
/* en el inventario el avatar va antes de «Volver al catálogo» */
header.top .top-actions{align-items:center}
header.top .top-actions .nr-av-wrap{margin-right:6px}
@media(max-width:760px){.nr-av-wrap .nr-av{--av:32px}.nr-av-wrap .nr-av-face{font-size:11px}.nr-av-wrap{margin:0 4px}}
/* el panel flotante oculta sus <span> en móvil; la foto debe seguir visible */
.nr-av-wrap .nr-av-face,.nr-av-wrap .nr-av-cam{display:flex!important;font-size:inherit}
.nr-av-wrap .nr-av-face{font-size:14px!important}
@media(max-width:760px){.nr-av-wrap .nr-av-face{font-size:11px!important}}

/* =========================================================================
   v21 · Píldoras de color: cada una en su color, la activa con textura viva
   ========================================================================= */
.tone-pills .pill.nr-fill{--ink:var(--tone-ink,var(--tone));position:relative;overflow:hidden;isolation:isolate;
  background:var(--ink)!important;border:0!important;color:#fff!important;font-weight:850!important;letter-spacing:.03em;
  text-shadow:0 1px 1px rgba(0,0,0,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 6px color-mix(in srgb,var(--ink) 25%,transparent)!important;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,opacity .3s ease,filter .3s ease!important}
.tone-pills .pill.nr-fill.nr-all{--ink:#f15f1b;background:linear-gradient(100deg,#e2571a,#b8233c 30%,#c2378f 55%,#8a5fb8 78%,#e0a21a)!important}
.tone-pills .pill.nr-fill .swatch{background:#fff!important;width:8px;height:8px;box-shadow:0 0 0 3px rgba(255,255,255,.28)!important}
.tone-pills .pill.nr-fill>span:last-child{background:rgba(255,255,255,.22)!important;color:#fff!important}
.tone-pills .pill.nr-fill:hover{transform:translateY(-2px)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 20px color-mix(in srgb,var(--ink) 35%,transparent)!important}
.tone-pills .pill.nr-fill:focus-visible{outline:3px solid color-mix(in srgb,var(--ink) 45%,#fff);outline-offset:2px}
/* textura: franjas de seda que avanzan + brillo que cruza (solo en la activa) */
.tone-pills .pill.nr-fill::before,.tone-pills .pill.nr-fill::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s ease}
.tone-pills .pill.nr-fill::before{
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.16) 0 7px,rgba(255,255,255,0) 7px 16px);
  background-size:200% 100%;animation:nr-silk 2.6s linear infinite}
.tone-pills .pill.nr-fill::after{
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%) no-repeat;
  background-size:60% 100%;animation:nr-sweep 3.2s cubic-bezier(.45,0,.2,1) infinite}
.tone-pills .pill.nr-fill.active::before,.tone-pills .pill.nr-fill.active::after{opacity:1}
@keyframes nr-silk{from{background-position:0 0}to{background-position:-35px 0}}
@keyframes nr-sweep{0%{background-position:-160% 0}55%,100%{background-position:260% 0}}
.tone-pills .pill.nr-fill.active{transform:translateY(-2px) scale(1.06)!important;z-index:1;
  box-shadow:0 0 0 2.5px #fff,0 0 0 5px var(--ink),0 12px 26px color-mix(in srgb,var(--ink) 45%,transparent)!important}
.tone-pills .pill.nr-fill.active>span:last-child{background:#fff!important;color:var(--ink)!important}
.tone-pills .pill.nr-fill.active .swatch{animation:nr-pop .45s cubic-bezier(.16,1,.3,1)}
/* al elegir un grupo, el resto se apaga un poco para que la activa resalte */
.tone-pills:has(.pill.nr-fill.active:not(.nr-all)) .pill.nr-fill:not(.active){opacity:.5;filter:saturate(.7)}
.tone-pills:has(.pill.nr-fill.active:not(.nr-all)) .pill.nr-fill:not(.active):hover{opacity:1;filter:none}

/* ---------- Menú de la foto de perfil (fijo, fuera de la cabecera) ---------- */
.nr-av-shade{position:fixed;inset:0;z-index:2147482990;background:rgba(31,29,27,.42);backdrop-filter:blur(2px)}
.nr-av-shade[hidden]{display:none}
.nr-av-menu{position:fixed;z-index:2147482995;width:240px;padding:8px;border-radius:18px;background:#fff;color:#1f1d1b;
  border:1px solid #eaded4;box-shadow:0 24px 60px rgba(35,24,17,.28),0 2px 6px rgba(35,24,17,.08);display:flex;flex-direction:column;gap:2px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}
.nr-av-menu[hidden]{display:none}
.nr-av-menu::before{content:"";position:absolute;top:-7px;left:var(--arrow,200px);width:13px;height:13px;margin-left:-6.5px;background:#fff;
  border-left:1px solid #eaded4;border-top:1px solid #eaded4;transform:rotate(45deg);border-radius:3px 0 0 0}
.nr-av-menu.is-in{animation:nr-av-pop .28s cubic-bezier(.16,1,.3,1) backwards}
@keyframes nr-av-pop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.nr-av-menu .nr-av-who{display:flex;align-items:center;gap:12px;padding:10px 10px 14px;margin-bottom:4px;border-bottom:1px solid #f1e6dd;text-align:left}
.nr-av-menu .nr-av-who>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.nr-av-menu .nr-av-who b{font-size:14px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nr-av-menu .nr-av-who small{font-size:11.5px;color:#756c64;font-weight:700}
.nr-av-menu .nr-av-big{--av:48px;cursor:default;box-shadow:0 0 0 3.5px #f15f1b,0 0 0 5px #fff,0 6px 14px rgba(60,20,5,.18)}
.nr-av-menu .nr-av-big .nr-av-face{display:flex;font-size:15px}
.nr-av-menu button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;cursor:pointer;padding:11px 12px;border-radius:11px;font-size:13.5px;font-weight:800;color:#1f1d1b}
.nr-av-menu button[hidden]{display:none}
.nr-av-menu button svg{width:18px;height:18px;flex:none;color:#f15f1b}
.nr-av-menu button:hover,.nr-av-menu button:focus-visible{background:#fff4ed;color:#c94911}
.nr-av-menu button[data-av="remove"]{color:#6f665e}
.nr-av-menu button[data-av="remove"] svg{color:#a8998d}
.nr-av-menu .nr-av-cancel{display:none}
/* móvil: hoja inferior, grande y fácil de tocar */
.nr-av-menu.is-sheet{left:10px!important;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));top:auto!important;width:auto;padding:10px 10px 8px;border-radius:22px}
.nr-av-menu.is-sheet::before{display:none}
.nr-av-menu.is-sheet.is-in{animation:nr-av-sheet .34s cubic-bezier(.16,1,.3,1) backwards}
@keyframes nr-av-sheet{from{transform:translateY(110%)}to{transform:none}}
.nr-av-menu.is-sheet .nr-av-who{padding:8px 8px 14px}
.nr-av-menu.is-sheet .nr-av-big{--av:56px}
.nr-av-menu.is-sheet button{padding:15px 14px;font-size:15px}
.nr-av-menu.is-sheet .nr-av-cancel{display:flex;justify-content:center;margin-top:6px;background:#f6efe9;color:#4e4640}
.tone-pills .pill.nr-fill,.tone-pills .pill.nr-fill::before,.tone-pills .pill.nr-fill::after{border-radius:999px!important}
.tone-pills .pill.nr-fill{padding:0 6px 0 13px!important}
.tone-pills:has(.pill.nr-fill.active:not(.nr-all)) .pill.nr-fill:not(.active){opacity:.62;filter:saturate(.75)}

/* =========================================================================
   v22 · «Todos los grupos» sobrio y banderas de idioma
   ========================================================================= */
.tone-pills .pill.nr-fill.nr-all{--ink:#2b2420;background:linear-gradient(135deg,#3a2f29,#1f1a17)!important}
.tone-pills .pill.nr-fill.nr-all .swatch{width:10px;height:10px;box-shadow:0 0 0 2px rgba(255,255,255,.85)!important;
  background:conic-gradient(#f15f1b,#c8102e,#d6338a,#8a63b8,#e8b92b,#7aa33a,#f15f1b)!important}
.tone-pills .pill.nr-fill.nr-all::before{background:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 7px,rgba(255,255,255,0) 7px 16px);background-size:200% 100%}
.tone-pills .pill.nr-fill.nr-all::after{background:linear-gradient(105deg,transparent 30%,rgba(241,95,27,.35) 48%,transparent 66%) no-repeat;background-size:60% 100%}
.tone-pills .pill.nr-fill.nr-all.active{box-shadow:0 0 0 2.5px #fff,0 0 0 5px #f15f1b,0 12px 26px rgba(31,26,23,.35)!important}
.tone-pills .pill.nr-fill.nr-all.active>span:last-child{color:#c94911!important}

.langs button.nr-flag-btn{min-width:0!important;width:32px;height:32px;padding:0!important;border-radius:50%!important;overflow:hidden;
  border:0!important;background:transparent!important;box-shadow:0 0 0 2px rgba(255,255,255,.55),0 3px 8px rgba(80,25,5,.2);
  opacity:.72;filter:saturate(.85);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .25s cubic-bezier(.16,1,.3,1),opacity .25s ease,box-shadow .25s ease,filter .25s ease!important}
.langs button.nr-flag-btn .nr-flag{width:100%;height:100%;display:block}
.langs button.nr-flag-btn:hover{opacity:1;filter:none;transform:translateY(-2px)}
.langs button.nr-flag-btn.active{opacity:1;filter:none;transform:scale(1.12);box-shadow:0 0 0 3px #fff,0 6px 14px rgba(80,25,5,.3)}
.langs button.nr-flag-btn:focus-visible{outline:2px solid #fff;outline-offset:4px}
.langs:has(.nr-flag-btn){gap:10px!important;align-items:center}
@media(max-width:760px){.langs button.nr-flag-btn{width:30px;height:30px}}
/* banderas siempre a todo color; la activa se distingue por el aro blanco y el tamaño */
.langs button.nr-flag-btn{opacity:1;filter:none;box-shadow:0 0 0 1.5px rgba(255,255,255,.7),0 3px 8px rgba(80,25,5,.22)}
.langs button.nr-flag-btn:not(.active){transform:scale(.9)}
.langs button.nr-flag-btn:not(.active):hover{transform:scale(.98) translateY(-2px)}

/* =========================================================================
   v23 · Animación sobria para el grupo activo y banderas bajo «Salir»
   ========================================================================= */
/* Sin franjas: un satinado suave que respira y un destello lento que cruza */
.tone-pills .pill.nr-fill::before{
  background:linear-gradient(115deg,rgba(255,255,255,0) 25%,rgba(255,255,255,.2) 45%,rgba(255,255,255,0) 65%) no-repeat!important;
  background-size:220% 100%!important;animation:nr-satin 6s ease-in-out infinite alternate!important}
.tone-pills .pill.nr-fill::after{
  background:radial-gradient(120% 140% at 50% 120%,rgba(255,255,255,.22),rgba(255,255,255,0) 60%)!important;
  background-size:100% 100%!important;animation:nr-breathe 3.6s ease-in-out infinite!important}
@keyframes nr-satin{from{background-position:100% 0}to{background-position:0 0}}
@keyframes nr-breathe{0%,100%{opacity:.35}50%{opacity:1}}
.tone-pills .pill.nr-fill:not(.active)::after{animation:none!important}
.tone-pills .pill.nr-fill.nr-all::before{background:linear-gradient(115deg,rgba(255,255,255,0) 25%,rgba(255,214,190,.16) 45%,rgba(255,255,255,0) 65%) no-repeat!important;background-size:220% 100%!important}
.tone-pills .pill.nr-fill.nr-all::after{background:radial-gradient(120% 140% at 50% 120%,rgba(241,95,27,.32),rgba(241,95,27,0) 62%)!important}
.tone-pills .pill.nr-fill.nr-all.active .swatch{animation:nr-swatch-turn 8s linear infinite}
@keyframes nr-swatch-turn{to{transform:rotate(360deg)}}

/* Banderas: pequeñas, arriba a la derecha, debajo del panel de sesión */
header.hero{position:relative}
header.hero .langs:has(.nr-flag-btn){position:absolute!important;top:18px;right:24px;left:auto!important;margin:0!important;
  z-index:998;gap:5px!important;flex-wrap:nowrap;padding:3px 5px;border-radius:999px;background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
header.hero:has(.admin-floating.active) .langs:has(.nr-flag-btn){top:72px;right:22px}
header.hero .langs button.nr-flag-btn{width:20px;height:20px;box-shadow:0 0 0 1px rgba(255,255,255,.6)}
header.hero .langs button.nr-flag-btn:not(.active){transform:scale(.92)}
header.hero .langs button.nr-flag-btn.active{transform:none;box-shadow:0 0 0 2px #fff,0 3px 8px rgba(80,25,5,.3)}
@media(max-width:760px){
  header.hero .langs:has(.nr-flag-btn){top:12px;right:12px;padding:4px 6px}
  header.hero:has(.admin-floating.active) .langs:has(.nr-flag-btn){top:60px;right:12px}
  header.hero .langs button.nr-flag-btn{width:19px;height:19px}
}
/* guía de cajas: separador del bloque de peonías */
#boxGuideOverlay tr.box-guide-group td{background:#fff4ed!important;color:#c94911;font-weight:900;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding-top:12px;padding-bottom:10px}
.peony-pack-table table{min-width:0!important;width:100%}

/* =========================================================================
   v25 · Botón MY SALES! junto a la foto de perfil
   ========================================================================= */
.admin-floating .my-sales-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex!important;align-items:center;gap:7px;height:36px;padding:0 16px 0 12px;border-radius:999px;
  text-decoration:none;color:#fff!important;font:950 13px/1 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.06em;white-space:nowrap;
  background:linear-gradient(110deg,#ff3d6e,#f15f1b 35%,#ffb21a 65%,#f15f1b 85%,#ff3d6e);background-size:250% 100%;
  box-shadow:0 0 0 2px #fff,0 8px 20px rgba(241,95,27,.45);animation:nr-ms-flow 4s linear infinite,nr-ms-glow 2.4s ease-in-out infinite;
  transition:transform .25s cubic-bezier(.16,1,.3,1)}
.admin-floating .my-sales-btn[hidden]{display:none!important}
.admin-floating .my-sales-btn:hover{transform:translateY(-2px) scale(1.04)}
.admin-floating .my-sales-btn:active{transform:scale(.97)}
.admin-floating .my-sales-btn span{display:inline-flex!important;padding:0!important;font-size:inherit!important;color:inherit!important;font-weight:inherit!important}
.admin-floating .my-sales-btn .msb-ic{font-size:15px!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.admin-floating .my-sales-btn .msb-tx{text-shadow:0 1px 2px rgba(120,30,0,.35)}
.admin-floating .my-sales-btn .msb-spark{position:absolute!important;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%) no-repeat;background-size:60% 100%;animation:nr-ms-shine 2.8s cubic-bezier(.45,0,.2,1) infinite}
@keyframes nr-ms-flow{to{background-position:-250% 0}}
@keyframes nr-ms-glow{0%,100%{box-shadow:0 0 0 2px #fff,0 8px 20px rgba(241,95,27,.40)}50%{box-shadow:0 0 0 2px #fff,0 10px 30px rgba(255,61,110,.55)}}
@keyframes nr-ms-shine{0%{background-position:-160% 0}60%,100%{background-position:260% 0}}
@media(max-width:760px){.admin-floating .my-sales-btn{height:30px;padding:0 11px 0 9px;font-size:11px!important;gap:5px}.admin-floating .my-sales-btn .msb-ic{font-size:12px!important}}
@media(prefers-reduced-motion:reduce){.admin-floating .my-sales-btn,.admin-floating .my-sales-btn .msb-spark{animation:none}}