/* ── Piel única de modales y cajones ──────────────────────────────────────
   Cargado por core/_motion.html en todas las páginas de producto, justo
   después de motion.css. Estiliza las clases que NumioMotion.modal pone en
   runtime (.t-modal-root, .t-modal-backdrop, .t-modal) y unas clases
   estructurales opt-in (.nu-modal__*) que cada pantalla añade junto a las
   suyas: `class="cf-dialog__head nu-modal__head"`. El CSS de cada pantalla
   ya no pinta la superficie (fondo, radio, sombra, franja, cabecera, X, pie):
   solo la anchura (--modal-w) y la disposición interior con su prefijo.

   Lenguaje: fondo oscurecido con desenfoque; caja de radio 20 con sombra
   profunda y una franja degradada de marca de 3 px que «se dibuja» al abrir;
   cabecera con título y subtítulo, X fantasma de 34 px cuyo icono gira al
   pasar el ratón, pie gris claro; en móvil, hoja inferior. La entrada y la
   salida (asentarse desde 12 px abajo, de borroso a nítido) las lleva
   .t-modal en motion.css. `skin:false` en M.modal (t-modal--bare) deja la
   caja sin piel: los asistentes a pantalla completa traen la suya.

   Inventario: .t-modal-root · .t-modal-backdrop · .t-modal(--bare) ·
   .nu-modal__head · __heading · __title · __sub · __close(--float) · __body ·
   __foot · .t-drawer-root · .t-drawer-scrim · .t-drawer[data-side]. */

/* ── Raíz y fondo ── */
/* :not(.t-modal): en los asistentes a pantalla completa la raíz ES el diálogo
   (skin:false) y trae su propia disposición. */
.t-modal-root:not(.t-modal){
  position:fixed;inset:0;z-index:var(--z-overlay,1200);
  display:grid;place-items:center;padding:24px;
}
.t-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(15,23,42,.45);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
/* La raíz es a la vez el fondo (nu-popup, rev-modal, importar Excel): el
   fondo pinta sobre sí misma, no sobre un hijo. */
.t-modal-root.t-modal-backdrop{position:fixed;}

/* ── Caja ── */
.t-modal-root .t-modal:not(.t-modal--bare){
  position:relative;
  width:min(var(--modal-w,560px),100%);
  max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;
  overflow:hidden;
  background:var(--color-surface,#fff);
  color:var(--color-text,#0f172a);
  border-radius:20px;
  box-shadow:0 24px 64px rgba(15,23,42,.24),0 0 0 1px rgba(15,23,42,.04);
}
/* Franja de acento: se dibuja de izquierda a derecha cuando la caja ya se ha
   asentado (80 ms de retardo). */
.t-modal-root .t-modal:not(.t-modal--bare)::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;z-index:1;pointer-events:none;
  background:var(--brand,#6B5BFF);
  transform-origin:left center;transform:scaleX(0);
  transition:transform var(--duration-slow,400ms) var(--ease-smooth-out) 80ms;
}
.t-modal-root .t-modal.is-open:not(.t-modal--bare)::before{transform:none;}
.t-modal-root .t-modal.is-closing::before{transition:none;}

/* ── Cabecera ── */
.nu-modal__head{
  display:flex;align-items:flex-start;gap:12px;
  padding:20px 24px 14px;
  border-bottom:1px solid var(--color-border,#eef1f6);
  flex:0 0 auto;
}
.nu-modal__heading{flex:1 1 auto;min-width:0;}
.nu-modal__title{
  margin:0;font-size:1.05rem;font-weight:800;letter-spacing:-.01em;line-height:1.25;
  color:var(--color-text,#0f172a);
}
.nu-modal__sub{margin:4px 0 0;font-size:.82rem;line-height:1.5;color:var(--color-text-soft,#64748b);}

/* X fantasma: el icono gira 90° al pasar el ratón. */
.nu-modal__close{
  appearance:none;width:34px;height:34px;flex:0 0 auto;margin-left:auto;
  border:0;border-radius:10px;background:transparent;
  color:var(--color-text-soft,#64748b);
  display:inline-grid;place-items:center;
  font:inherit;font-size:1.05rem;line-height:1;cursor:pointer;
  transition:background var(--duration-quick,150ms) var(--ease-out),color var(--duration-quick,150ms) var(--ease-out);
}
.nu-modal__close:hover{background:#f1f5f9;color:var(--color-text,#0f172a);}
.nu-modal__close:focus-visible{outline:none;box-shadow:var(--ring,0 0 0 3px rgba(107,91,255,.25));}
.nu-modal__close>i,.nu-modal__close>svg{
  display:block;transition:transform var(--duration-fast,250ms) var(--ease-smooth-out);
}
.nu-modal__close>svg{width:18px;height:18px;}
.nu-modal__close:hover>i,.nu-modal__close:hover>svg{transform:rotate(90deg);}
/* Sin cabecera (popups de ERP): la X flota en la esquina. */
.nu-modal__close--float{position:absolute;top:14px;right:14px;z-index:2;margin:0;}

/* ── Cuerpo y pie ── */
.nu-modal__body{padding:18px 24px;overflow:auto;flex:1 1 auto;min-height:0;}
.nu-modal__foot{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:14px 24px;border-top:1px solid var(--color-border,#eef1f6);
  background:#fcfcfe;flex:0 0 auto;
}

/* ── Móvil: hoja inferior ── */
@media (max-width:560px){
  .t-modal-root:not(.t-modal){padding:0;place-items:end center;}
  .t-modal-root .t-modal:not(.t-modal--bare){
    width:100%;max-height:92vh;
    border-radius:20px 20px 0 0;
    --modal-y:24px;--modal-scale:1;
  }
  .nu-modal__head{padding:18px 18px 12px;}
  .nu-modal__body{padding:16px 18px;}
  .nu-modal__foot{padding:12px 18px;}
}

/* ── Cajones laterales (NumioMotion.drawer) ─────────────────────────────
   Las clases de estado van en la raíz (.t-drawer-root.is-open / .is-closing).
   El panel entra desde 24 px con opacidad y sale rápido; comparte cabecera,
   X y cuerpo con los modales (nu-modal__*). */
.t-drawer-root{position:fixed;inset:0;z-index:var(--z-overlay,1200);}
.t-drawer-scrim{
  position:absolute;inset:0;background:rgba(15,23,42,.38);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity var(--drawer-open-dur,250ms) var(--ease-out);
}
.t-drawer{
  position:absolute;top:0;bottom:0;right:0;
  width:min(var(--drawer-w,540px),100vw);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--color-surface,#fff);color:var(--color-text,#0f172a);
  border-radius:16px 0 0 16px;
  box-shadow:-18px 0 44px rgba(15,23,42,.16);
  transform:translateX(var(--drawer-x,24px));opacity:.4;
  transition:transform var(--drawer-open-dur,250ms) var(--ease-smooth-out),opacity var(--drawer-open-dur,250ms) var(--ease-smooth-out);
}
.t-drawer[data-side="left"]{right:auto;left:0;border-radius:0 16px 16px 0;box-shadow:18px 0 44px rgba(15,23,42,.16);transform:translateX(calc(-1 * var(--drawer-x,24px)));}
.t-drawer:focus{outline:none;}
.t-drawer-root.is-open .t-drawer-scrim{opacity:1;}
.t-drawer-root.is-open .t-drawer{transform:none;opacity:1;}
.t-drawer-root.is-closing .t-drawer-scrim{transition-duration:var(--drawer-close-dur,150ms);}
.t-drawer-root.is-closing .t-drawer{transition-duration:var(--drawer-close-dur,150ms);transition-timing-function:var(--ease-in-out);}
@media (max-width:560px){
  .t-drawer{width:100vw;border-radius:0;}
}

@media (prefers-reduced-motion: reduce){
  .t-modal-root .t-modal::before,.nu-modal__close,.nu-modal__close>i,.nu-modal__close>svg,.t-drawer,.t-drawer-scrim{transition:none!important;}
  .t-modal-root .t-modal:not(.t-modal--bare)::before{transform:none;}
  .t-drawer{transform:none;}
}