/* ════════════════════════════════════════════════════════════════════
   NV Streaming · Ventanas 5.6 (nv-modales-560.css)
   Sistema común de ventanas: X de cierre, botones, tamaños, animación
   de apertura y cierre, confirmaciones y los editores de Editar cliente
   y Editar cuenta. Todo por tokens del tema bajo html.nv-on.
   Clases públicas para otras capas:
     .nv6-x  .nv6-btn  .nv6-btn--pri  .nv6-btn--ghost  .nv6-btn--danger
     estados .is-loading  .is-done      tokens --nv6-radius  --nv6-dur
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────── */
html.nv-on body {
  --nv6-radius: 18px;
  --nv6-radius-sm: 12px;
  --nv6-radius-btn: 11px;
  --nv6-dur: 180ms;
  --nv6-dur-in: 240ms;
  --nv6-ease: cubic-bezier(.2,.8,.2,1);
  --nv6-spring: cubic-bezier(.34,1.45,.64,1);
  --nv6-out: cubic-bezier(.4,0,1,1);
  --nv6-danger: var(--red, #f0616d);
  --nv6-danger-soft: color-mix(in srgb, var(--nv6-danger) 16%, transparent);
  --nv6-danger-line: color-mix(in srgb, var(--nv6-danger) 38%, transparent);
  --nv6-ok: var(--green, #3ddc97);
  --nv6-warn: var(--amber, #f7b955);
  --nv6-on-accent: var(--nv54-on-accent, #fff);
  --nv6-w: 520px;
  --nv6-w-wide: 760px;
}
@media (prefers-reduced-motion: reduce) {
  html.nv-on body { --nv6-dur: 1ms; --nv6-dur-in: 1ms; }
}

/* ── 2. Botón X de cierre (todas las ventanas, avisos y paneles) ───── */
html.nv-on :is(.nv6-x, .mc-close, .bk-close, .rv-close, .nvp-md-x, .nvn-m-x, .nvu-x, .nveq-x,
  .nvcj-x, .nvav-close, .nv-cfg-x, .nvrp-x, .nvcl-ix[aria-label^="Cerrar"], .nvh-ib[aria-label^="Cerrar"],
  .modal-overlay button[aria-label="Cerrar"]):not([data-nv6="off"]) {
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--text) 5%, transparent) !important;
  border: 1px solid var(--border) !important;
  color: var(--text3) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background var(--nv6-dur) var(--nv6-ease), color var(--nv6-dur) var(--nv6-ease),
    border-color var(--nv6-dur) var(--nv6-ease), transform var(--nv6-dur) var(--nv6-spring),
    box-shadow var(--nv6-dur) var(--nv6-ease) !important;
}
html.nv-on .nv6-x:not([data-nv6="off"]) { width: 30px; height: 30px; min-width: 30px; padding: 0 !important; display: inline-grid !important; place-items: center; flex-shrink: 0; }
html.nv-on :is(.nv6-x, .mc-close, .bk-close, .rv-close, .nvp-md-x, .nvn-m-x, .nvu-x, .nveq-x,
  .nvcj-x, .nvav-close, .nv-cfg-x, .nvrp-x, .nvcl-ix[aria-label^="Cerrar"], .nvh-ib[aria-label^="Cerrar"],
  .modal-overlay button[aria-label="Cerrar"]):not([data-nv6="off"]) svg {
  transition: transform .26s var(--nv6-spring);
}
html.nv-on :is(.nv6-x, .mc-close, .bk-close, .rv-close, .nvp-md-x, .nvn-m-x, .nvu-x, .nveq-x,
  .nvcj-x, .nvav-close, .nv-cfg-x, .nvrp-x, .nvcl-ix[aria-label^="Cerrar"], .nvh-ib[aria-label^="Cerrar"],
  .modal-overlay button[aria-label="Cerrar"]):not([data-nv6="off"]):is(:hover, :focus-visible) {
  background: var(--nv6-danger-soft) !important;
  border-color: var(--nv6-danger-line) !important;
  color: var(--nv6-danger) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nv6-danger) 9%, transparent) !important;
  outline: none !important;
}
html.nv-on :is(.nv6-x, .mc-close, .bk-close, .rv-close, .nvp-md-x, .nvn-m-x, .nvu-x, .nveq-x,
  .nvcj-x, .nvav-close, .nv-cfg-x, .nvrp-x, .nvcl-ix[aria-label^="Cerrar"], .nvh-ib[aria-label^="Cerrar"],
  .modal-overlay button[aria-label="Cerrar"]):not([data-nv6="off"]):is(:hover, :focus-visible) svg { transform: rotate(90deg); }
html.nv-on :is(.nv6-x, .mc-close, .bk-close, .rv-close, .nvp-md-x, .nvn-m-x, .nvu-x, .nveq-x,
  .nvcj-x, .nvav-close, .nv-cfg-x, .nvrp-x, .nvcl-ix[aria-label^="Cerrar"], .nvh-ib[aria-label^="Cerrar"],
  .modal-overlay button[aria-label="Cerrar"]):not([data-nv6="off"]):active { transform: scale(.9) !important; }
html.nv-on .nv6-x:not([data-nv6="off"]) svg { width: 12px; height: 12px; }

/* ── 3. Botones ────────────────────────────────────────────────────── */
/* Solo movimiento (botones de pie de ventana con estilo propio) */
html.nv-on .nv6-bm {
  position: relative;
  transition: transform var(--nv6-dur) var(--nv6-spring), box-shadow var(--nv6-dur) var(--nv6-ease),
    background-color var(--nv6-dur) var(--nv6-ease), border-color var(--nv6-dur) var(--nv6-ease), color var(--nv6-dur) var(--nv6-ease), opacity .2s;
}
html.nv-on .nv6-bm:not(:disabled):hover { transform: translateY(-1px); }
html.nv-on .nv6-bm:not(:disabled):active { transform: translateY(0) scale(.96); transition-duration: 90ms; }
html.nv-on .nv6-bm:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(var(--nv-accent-rgb, 139,147,255), .35) !important; }

/* Botón completo */
html.nv-on .nv6-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 0 16px !important;
  border-radius: var(--nv6-radius-btn) !important;
  font: 650 13px/1 var(--nv-font-ui, inherit) !important; letter-spacing: -.005em;
  white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--nv6-dur) var(--nv6-spring), box-shadow .22s var(--nv6-ease),
    background .2s var(--nv6-ease), border-color .2s var(--nv6-ease), color .2s var(--nv6-ease), filter .2s !important;
}
html.nv-on .nv6-btn svg { flex-shrink: 0; }
html.nv-on .nv6-btn:not(:disabled):hover { transform: translateY(-1px); }
html.nv-on .nv6-btn:not(:disabled):active { transform: translateY(0) scale(.96); transition-duration: 90ms !important; }
html.nv-on .nv6-btn:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(var(--nv-accent-rgb, 139,147,255), .38) !important; }
html.nv-on .nv6-btn:disabled { opacity: .5; cursor: not-allowed; }

html.nv-on .nv6-btn--pri {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)) !important;
  color: var(--nv6-on-accent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 80%, #000) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px -10px rgba(var(--nv-accent-rgb, 139,147,255), .75) !important;
}
html.nv-on .nv6-btn--pri:not(:disabled):hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 12px 28px -10px rgba(var(--nv-accent-rgb, 139,147,255), .9) !important;
  filter: saturate(1.08) brightness(1.04);
}
html.nv-on .nv6-btn--ghost {
  background: transparent !important;
  color: var(--text2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
html.nv-on .nv6-btn--ghost:not(:disabled):hover {
  background: color-mix(in srgb, var(--text) 6%, transparent) !important;
  border-color: var(--border2) !important;
  color: var(--text) !important;
}
html.nv-on .nv6-btn--danger {
  background: linear-gradient(180deg, color-mix(in srgb, var(--nv6-danger) 90%, #fff), var(--nv6-danger)) !important;
  color: #fff !important;
  border: 1px solid color-mix(in srgb, var(--nv6-danger) 78%, #000) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px -10px color-mix(in srgb, var(--nv6-danger) 80%, transparent) !important;
}
html.nv-on .nv6-btn--danger:not(:disabled):hover { box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 12px 28px -10px var(--nv6-danger) !important; filter: brightness(1.05); }
/* Destructivo suave (acciones rojas secundarias como Cortar) */
html.nv-on .nv6-btn--danger-soft {
  background: var(--nv6-danger-soft) !important; color: var(--nv6-danger) !important;
  border: 1px solid var(--nv6-danger-line) !important; box-shadow: none !important;
}
html.nv-on .nv6-btn--danger-soft:not(:disabled):hover { background: color-mix(in srgb, var(--nv6-danger) 24%, transparent) !important; }

/* Onda al pulsar */
html.nv-on .nv6-rip {
  position: absolute; z-index: -1; left: var(--x, 50%); top: var(--y, 50%);
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: currentColor; opacity: .28; pointer-events: none;
  animation: nv6Rip .5s var(--nv6-ease) forwards;
}
@keyframes nv6Rip { to { transform: scale(var(--s, 22)); opacity: 0; } }

/* Cargando */
html.nv-on .nv6-btn.is-loading, html.nv-on .nv6-bm.is-loading { color: transparent !important; pointer-events: none; }
html.nv-on .nv6-btn.is-loading > *, html.nv-on .nv6-bm.is-loading > * { visibility: hidden; }
html.nv-on :is(.nv6-btn, .nv6-bm).is-loading::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; border: 2px solid var(--nv6-spin, var(--text2)); border-right-color: transparent;
  animation: nv6Spin .7s linear infinite; visibility: visible;
}
html.nv-on .nv6-btn--pri.is-loading::before { --nv6-spin: var(--nv6-on-accent); }
html.nv-on .nv6-btn--danger.is-loading::before { --nv6-spin: #fff; }
@keyframes nv6Spin { to { transform: rotate(360deg); } }

/* Hecho: check que se dibuja */
html.nv-on .nv6-chk { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; visibility: visible !important; pointer-events: none; }
html.nv-on .nv6-chk path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: nv6Draw .34s var(--nv6-ease) .04s forwards; }
html.nv-on :is(.nv6-btn, .nv6-bm).is-done { pointer-events: none; color: transparent !important; }
html.nv-on :is(.nv6-btn, .nv6-bm).is-done > :not(.nv6-chk) { visibility: hidden; }
html.nv-on .nv6-chk { color: var(--nv6-ok); }
html.nv-on .nv6-btn--pri .nv6-chk { color: var(--nv6-on-accent); }
html.nv-on .nv6-btn--danger .nv6-chk { color: #fff; }
@keyframes nv6Draw { to { stroke-dashoffset: 0; } }

/* ── 3b. Toque propio de cada tema en el botón principal ───────────── */
html.nv-on .nv6-btn--pri::after, html.nv-on .nv6-btn--danger::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 64%);
  transform: translateX(-120%); transition: none;
}
html.nv-on .nv6-btn--pri:not(:disabled):hover::after, html.nv-on .nv6-btn--danger:not(:disabled):hover::after {
  transform: translateX(120%); transition: transform .6s var(--nv6-ease);
}
/* Estreno: destello cálido de proyector */
html.nv-on[data-nv-estilo="estreno"] .nv6-btn--pri::after { background: linear-gradient(105deg, transparent 30%, rgba(255,214,170,.36) 48%, transparent 64%); }
/* Océano: brillo que sube como una ola */
html.nv-on[data-nv-estilo="oceano"] .nv6-btn--pri::after { background: radial-gradient(120% 70% at 50% 120%, rgba(160,240,255,.42), transparent 60%); transform: translateY(70%); }
html.nv-on[data-nv-estilo="oceano"] .nv6-btn--pri:not(:disabled):hover::after { transform: translateY(0); transition: transform .45s var(--nv6-ease); }
/* Púrpura: resplandor que florece */
html.nv-on[data-nv-estilo="purpura"] .nv6-btn--pri:not(:disabled):hover { box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 0 0 4px rgba(var(--nv-accent-rgb), .16), 0 14px 32px -10px rgba(var(--nv-accent-rgb), .95) !important; }
/* Aurora: el degradado se desplaza entre los dos acentos */
html.nv-on[data-nv-estilo="aurora"] .nv6-btn--pri { background: linear-gradient(110deg, var(--accent), var(--accent2), var(--accent)) !important; background-size: 220% 100% !important; background-position: 0% 50% !important; transition: background-position .6s var(--nv6-ease), transform var(--nv6-dur) var(--nv6-spring), box-shadow .22s !important; }
html.nv-on[data-nv-estilo="aurora"] .nv6-btn--pri:not(:disabled):hover { background-position: 100% 50% !important; }
/* Gala: barrido dorado lento */
html.nv-on[data-nv-estilo="gala"] .nv6-btn--pri::after { background: linear-gradient(105deg, transparent 28%, rgba(255,246,214,.5) 47%, transparent 62%); }
html.nv-on[data-nv-estilo="gala"] .nv6-btn--pri:not(:disabled):hover::after { transition-duration: .9s; }
/* Constelación: chispas que titilan */
html.nv-on[data-nv-estilo="constelacion"] .nv6-btn--pri::after {
  transform: none; opacity: 0;
  background: radial-gradient(1.5px 1.5px at 18% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 72% 24%, #fff, transparent),
    radial-gradient(1px 1px at 44% 74%, #fff, transparent), radial-gradient(1.5px 1.5px at 88% 68%, #fff, transparent), radial-gradient(1px 1px at 30% 60%, #fff, transparent);
}
html.nv-on[data-nv-estilo="constelacion"] .nv6-btn--pri:not(:disabled):hover::after { transform: none; animation: nv6Twinkle 1.1s ease-in-out infinite; }
@keyframes nv6Twinkle { 0%, 100% { opacity: .15; } 50% { opacity: .95; } }
/* Órbita: anillo que gira por el borde */
@property --nv6-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
html.nv-on[data-nv-estilo="orbita"] .nv6-btn--pri::after {
  inset: 0; transform: none; opacity: 0; padding: 1.5px;
  background: conic-gradient(from var(--nv6-a, 0deg), transparent 0 68%, rgba(255,255,255,.9) 84%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
html.nv-on[data-nv-estilo="orbita"] .nv6-btn--pri:not(:disabled):hover::after { opacity: 1; transform: none; animation: nv6Orbit 1.4s linear infinite; }
@keyframes nv6Orbit { to { --nv6-a: 360deg; } }
/* Lanzamiento: despega un poco más, con estela */
html.nv-on[data-nv-estilo="lanzamiento"] .nv6-btn--pri:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 16px 26px -12px rgba(var(--nv-accent-rgb), 1), 0 4px 0 -2px rgba(var(--nv-accent-rgb), .35) !important; }
/* Estación: barrido de monitor */
html.nv-on[data-nv-estilo="estacion"] .nv6-btn--pri::after { background: linear-gradient(180deg, transparent 40%, rgba(255,255,255,.32) 50%, transparent 60%); transform: translateY(-110%); }
html.nv-on[data-nv-estilo="estacion"] .nv6-btn--pri:not(:disabled):hover::after { transform: translateY(110%); transition: transform .55s linear; }
/* Nebulosa: nube suave de color */
html.nv-on[data-nv-estilo="nebulosa"] .nv6-btn--pri::after { transform: none; opacity: 0; background: radial-gradient(60% 90% at 25% 30%, rgba(255,255,255,.3), transparent 70%), radial-gradient(60% 90% at 80% 80%, color-mix(in srgb, var(--accent2) 60%, transparent), transparent 70%); transition: opacity .35s var(--nv6-ease); }
html.nv-on[data-nv-estilo="nebulosa"] .nv6-btn--pri:not(:disabled):hover::after { opacity: 1; transform: none; }

/* ── 4. Ventanas: marco común ──────────────────────────────────────── */
html.nv-on .modal-overlay:is(.show, [style*="flex"]) > :is(.modal, .mc-modal, .adm-modal, .rv-modal, .bk-modal) {
  border-radius: var(--nv6-radius) !important;
}
html.nv-on .modal-overlay.show:not(.closing) > :is(.modal, .mc-modal, .rv-modal, .bk-modal) {
  animation: nv6In var(--nv6-dur-in) var(--nv6-spring) both !important;
}
/* Cierre: se funde, baja 8 px y se achica a .96 */
html.nv-on .modal-overlay.closing { animation: nv6OvOut var(--nv6-dur) ease forwards !important; pointer-events: none !important; }
html.nv-on .modal-overlay.closing > :is(.modal, .mc-modal, .rv-modal, .bk-modal, .adm-modal) { animation: nv6Out var(--nv6-dur) var(--nv6-out) forwards !important; }
@keyframes nv6In { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes nv6Out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes nv6OvIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes nv6OvOut { from { opacity: 1; } to { opacity: 0; } }

/* Copia visual que se despide cuando una ventana se oculta de golpe */
.nv6-ghost { pointer-events: none !important; animation: nv6OvOut var(--nv6-dur, 180ms) ease forwards !important; }
.nv6-ghost[data-nv6-d="flex"] { display: flex !important; }
.nv6-ghost[data-nv6-d="grid"] { display: grid !important; }
.nv6-ghost[data-nv6-d="block"] { display: block !important; }
.nv6-ghost > * { animation: nv6Out var(--nv6-dur, 180ms) var(--nv6-out, ease-in) forwards !important; }
.nv6-ghost * { transition: none !important; }

/* Las capas con su propia salida usan el mismo gesto */
html.nv-on .nvp-ov.out .nvp-md { animation: nv6Out .16s var(--nv6-out) forwards !important; }

/* ── 5. Tamaños compactos ──────────────────────────────────────────── */
@media (min-width: 761px) {
  html.nv-on #modal-send.nv-snd .modal { max-width: var(--nv6-w-wide) !important; }
  html.nv-on #modal-send.nv-snd .modal-body { gap: 14px !important; }
  html.nv-on #modal-send.nv-snd #send-message-preview { min-height: 220px !important; }
  html.nv-on #modal-send .nvs-phone { min-height: 280px; }
  html.nv-on #modal-account.nv-acc .modal { max-width: var(--nv6-w-wide) !important; }
  html.nv-on #modal-account.nv-acc-ind .modal { max-width: 720px !important; }
  html.nv-on #modal-account .nva-grid { grid-template-columns: minmax(0,1fr) 264px !important; }
  html.nv-on #modal-account .nva-side { padding: 16px !important; gap: 12px !important; }
}
html.nv-on #nvh-calc .nvh-sheet { max-height: 88vh; max-height: 88dvh; }
html.nv-on #nvcl-modal > * { max-height: 88vh; max-height: 88dvh; overflow-y: auto; }

/* ── 6. Confirmaciones (confirmDialog, adminConfirm, confirmar escribiendo) ─ */
html.nv-on .nv6-cfm-ov {
  background: rgba(4,4,10,.58) !important;
  backdrop-filter: blur(8px) saturate(120%) !important; -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
}
html.nv-on .nv6-cfm {
  position: relative;
  width: 100% !important; max-width: 348px !important;
  background: var(--bg2) !important; border: 1px solid var(--border2) !important;
  border-radius: 20px !important; overflow: hidden !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.6) !important;
  animation: nv6In var(--nv6-dur-in) var(--nv6-spring) both !important;
  font-family: var(--nv-font-ui, inherit);
}
html.nv-on .nv6-cfm-h { background: transparent !important; border: 0 !important; padding: 22px 22px 6px !important; gap: 12px !important; }
html.nv-on .nv6-cfm-h > .nv6-x { position: absolute !important; top: 12px !important; right: 12px !important; width: 28px !important; height: 28px !important; min-width: 28px; }
html.nv-on .nv6-cfm-ic {
  --tone: var(--accent);
  width: 48px !important; height: 48px !important; border-radius: 15px !important;
  background: color-mix(in srgb, var(--tone) 14%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--tone) 32%, transparent) !important;
  color: var(--tone) !important; box-shadow: 0 10px 26px -12px var(--tone) !important;
  animation: nv6IcIn .42s var(--nv6-spring) .04s both;
}
html.nv-on .nv6-cfm[data-tone="danger"] .nv6-cfm-ic { --tone: var(--nv6-danger); }
html.nv-on .nv6-cfm[data-tone="warning"] .nv6-cfm-ic { --tone: var(--nv6-warn); }
html.nv-on .nv6-cfm[data-tone="success"] .nv6-cfm-ic { --tone: var(--nv6-ok); }
html.nv-on .nv6-cfm[data-tone="danger"] .nv6-cfm-ic svg { animation: nv6Wobble .5s ease .25s both; transform-origin: 50% 20%; }
@keyframes nv6IcIn { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes nv6Wobble { 0%, 100% { transform: none; } 30% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } }
html.nv-on .nv6-cfm-t { color: var(--text) !important; font: 700 16px/1.25 var(--nv-font-display, inherit) !important; letter-spacing: -.01em !important; }
html.nv-on .nv6-cfm-b { padding: 4px 22px 16px !important; }
html.nv-on .nv6-cfm-m { color: var(--text2) !important; font-size: 13px !important; line-height: 1.55 !important; }
html.nv-on .nv6-cfm-f { padding: 4px 16px 16px !important; gap: 8px !important; }
html.nv-on .nv6-cfm-f > button { flex: 1 1 0 !important; min-height: 40px; }
/* Qué se va a borrar */
.nv6-who {
  display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 10px;
  margin: 12px 0 0; padding: 9px 11px; border-radius: 13px; text-align: left;
  background: var(--bg3); border: 1px solid var(--border);
  animation: nv6Up .3s var(--nv6-ease) .08s both;
}
.nv6-who-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; font: 800 12px/1 var(--nv-font-display, inherit); flex-shrink: 0; }
.nv6-who-ic > :is(svg, img, span) { width: 32px !important; height: 32px !important; }
.nv6-who b { display: block; color: var(--text); font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv6-who small { display: block; color: var(--text3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
@keyframes nv6Up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Confirmar escribiendo una palabra (nv-mejoras) */
html.nv-on .nv-cfm-ov .nv-cfm { border-radius: 20px !important; max-width: 360px !important; background: var(--bg2) !important; border: 1px solid var(--border2) !important; box-shadow: 0 30px 70px rgba(0,0,0,.6) !important; animation: nv6In var(--nv6-dur-in) var(--nv6-spring) both !important; }
html.nv-on .nv-cfm-ov .nv-cfm input { border-radius: 11px !important; }
html.nv-on .nv-cfm-ov .nv-cfm-b { gap: 8px !important; }
html.nv-on .nv-cfm-ov .nv-cfm-b > button { flex: 1 1 0; }

@media (max-width: 600px) {
  html.nv-on .nv6-cfm { max-width: 100% !important; }
  html.nv-on .nv6-cfm-ov { padding: 16px !important; }
  html.nv-on .nv6-cfm-f > button { min-height: 44px; }
}

/* ══ 7. Editores: Editar cliente y Editar cuenta ═══════════════════ */
/* Cabecera de identidad */
.nv6-id { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.nv6-id-tile { position: relative; width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: var(--bg3); border: 1px solid var(--border); }
.nv6-id-tile > :is(svg, span, img) { width: 40px !important; height: 40px !important; border-radius: 12px !important; overflow: hidden; }
.nv6-id-tile > span svg, .nv6-id-tile > span img { width: 40px !important; height: 40px !important; }
.nv6-id-tile i { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--nv6-ok); box-shadow: 0 0 0 2.5px var(--bg2); }
.nv6-id-tile i.warn { background: var(--nv6-warn); }
.nv6-id-tile i.bad { background: var(--nv6-danger); }
.nv6-id-txt { min-width: 0; flex: 1; line-height: 1.2; }
.nv6-id-txt small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text3); margin-bottom: 2px; }
.nv6-id-txt b { display: block; font: 700 15.5px/1.2 var(--nv-font-display, inherit); color: var(--text); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv6-id-txt span { display: block; font-size: 11.5px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.nv6-pill { flex-shrink: 0; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 750; white-space: nowrap;
  color: var(--nv6-ok); background: color-mix(in srgb, var(--nv6-ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--nv6-ok) 30%, transparent); transition: color .2s, background .2s, border-color .2s; }
.nv6-pill.warn { color: var(--nv6-warn); background: color-mix(in srgb, var(--nv6-warn) 12%, transparent); border-color: color-mix(in srgb, var(--nv6-warn) 30%, transparent); }
.nv6-pill.bad { color: var(--nv6-danger); background: var(--nv6-danger-soft); border-color: var(--nv6-danger-line); }
.nv6-pill.flip { animation: nv6Pop .34s var(--nv6-spring); }
@keyframes nv6Pop { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: none; } }

/* Secciones */
.nv6-sec { border-radius: 14px; border: 1px solid var(--border); background: var(--bg3); padding: 10px 12px 12px; display: grid; gap: 8px; transition: border-color .2s; animation: nv6Up .3s var(--nv6-ease) both; min-width: 0; }
.nv6-sec:nth-child(2) { animation-delay: .03s; } .nv6-sec:nth-child(3) { animation-delay: .06s; } .nv6-sec:nth-child(4) { animation-delay: .09s; } .nv6-sec:nth-child(5) { animation-delay: .12s; }
.nv6-sec:focus-within { border-color: rgba(var(--nv-accent-rgb, 139,147,255), .45); }
.nv6-sec-h { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); }
.nv6-sec-h svg { color: var(--accent2); }
.nv6-sec-h em { margin-left: auto; font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text3); font-size: 11px; }
.nv6-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; align-items: start; }
.nv6-row > *, .nv6-row3 > * { min-width: 0; }
.nv6-row3 { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr); gap: 10px; }

/* Acceso (solo lectura, con mostrar y copiar) */
.nv6-acc { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) minmax(0,.8fr); gap: 8px; }
.nv6-kv { position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; padding: 5px 5px 5px 10px; border-radius: 11px; background: var(--bg2); border: 1px solid var(--border); }
.nv6-kv > div { min-width: 0; flex: 1; }
.nv6-kv small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.nv6-kv span { display: block; margin-top: 2px; font: 600 12.5px/1.25 var(--nv-font-num, ui-monospace, monospace); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv6-kv span.nv6-mask { letter-spacing: .16em; }
.nv6-kv.full { grid-column: 1 / -1; }
.nv6-ib { display: inline-grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text3); cursor: pointer; padding: 0; transition: color .15s, background .15s, border-color .15s, transform .15s var(--nv6-spring); }
.nv6-ib:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); border-color: var(--border); }
.nv6-ib:active { transform: scale(.9); }
.nv6-ib.ok { color: var(--nv6-ok); border-color: color-mix(in srgb, var(--nv6-ok) 45%, transparent); }
.nv6-ib.ok svg { animation: nv6Pop .3s var(--nv6-spring); }

/* Plazo: fecha legible y atajos de meses */
.nv6-when { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text2); min-height: 18px; }
.nv6-when b { color: var(--text); font-weight: 700; }
.nv6-when s { color: var(--text3); }
.nv6-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nv6-chip { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg2); color: var(--text2); font: 650 11.5px/1 var(--nv-font-ui, inherit); cursor: pointer; transition: color .15s, background .15s, border-color .15s, transform .18s var(--nv6-spring); }
.nv6-chip:hover { color: var(--text); border-color: rgba(var(--nv-accent-rgb, 139,147,255), .5); transform: translateY(-1px); }
.nv6-chip:active { transform: scale(.94); }
.nv6-chip.on { color: var(--accent2); border-color: rgba(var(--nv-accent-rgb, 139,147,255), .6); background: rgba(var(--nv-accent-rgb, 139,147,255), .12); }
.nv6-chip.undo { border-style: dashed; }
.nv6-chip[hidden] { display: none; }

/* Resumen de cambios (franja sobre el pie, solo si hay cambios) */
.nv6-sum {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  max-height: 0; opacity: 0; overflow: hidden; padding: 0 16px;
  font-size: 12px; color: var(--text2);
  background: linear-gradient(90deg, rgba(var(--nv-accent-rgb, 139,147,255), .10), transparent 70%);
  border-top: 1px solid transparent;
  transition: max-height .26s var(--nv6-ease), opacity .2s var(--nv6-ease), padding .26s var(--nv6-ease), border-color .2s;
  flex-shrink: 0;
}
.nv6-sum > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nv6-sum::before { content: ''; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--nv-accent-rgb, 139,147,255), .2); }
.nv6-sum.on { max-height: 40px; opacity: 1; padding: 9px 16px; border-top-color: var(--border); }
.nv6-sum b { color: var(--text); font-weight: 700; }
.nv6-sum i { font-style: normal; color: var(--accent2); font-weight: 700; }
.nv6-dirty > :is(.mcf-label, label)::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; vertical-align: middle; border-radius: 50%; background: var(--accent); animation: nv6Pop .3s var(--nv6-spring); }

/* Aviso de cambios sin guardar */
.nv6-guard {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 20;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 12px 11px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--bg2) 90%, var(--nv6-warn)); border: 1px solid color-mix(in srgb, var(--nv6-warn) 40%, transparent);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  animation: nv6Up .24s var(--nv6-spring) both;
}
.nv6-guard p { margin: 0; flex: 1 1 170px; font-size: 12.5px; color: var(--text); font-weight: 650; }
.nv6-guard p small { display: block; color: var(--text3); font-size: 11.5px; margin-top: 2px; font-weight: 500; }
html.nv-on .nv6-guard .nv6-btn { min-height: 32px; padding: 0 12px !important; font-size: 12.5px !important; }

/* Aviso pequeño propio */
.nv6-toast { position: fixed; left: 50%; bottom: 24px; z-index: 30000; transform: translateX(-50%); padding: 9px 14px; border-radius: 12px; background: var(--bg3); color: var(--text); border: 1px solid var(--border2); font: 600 12.5px/1.2 var(--nv-font-ui, inherit); box-shadow: 0 16px 36px rgba(0,0,0,.5); animation: nv6Up .22s var(--nv6-spring) both; pointer-events: none; }

/* ── 7a. Editar cliente (#modal-quick-edit en modo editar) ─────────── */
.nv6-secs { display: grid; gap: 8px; }
.nv6-secs .nv6-acc { margin-top: 2px; }
.nv6-ctc { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: end; }
html.nv-on #modal-quick-edit.nv6-qe .nv6-exp { margin-top: 2px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
html.nv-on #modal-quick-edit.nv6-qe #qe-fila-add-contacto button { padding: 0 !important; }
html.nv-on #modal-quick-edit.nv6-qe > .modal { max-width: 560px !important; width: 94% !important; max-height: 88vh; max-height: 88dvh; display: flex !important; flex-direction: column; }
html.nv-on #modal-quick-edit.nv6-qe #qe-tab-editar { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; position: relative; }
html.nv-on #modal-quick-edit.nv6-qe #qe-tab-editar > .modal-body { overflow-y: auto !important; min-height: 0; flex: 1 1 auto; padding: 12px 14px !important; gap: 8px !important; }
html.nv-on #modal-quick-edit.nv6-qe .modal-header { padding: 14px 16px !important; gap: 12px; }
html.nv-on #modal-quick-edit.nv6-qe .modal-header > div:first-child:not(.nv6-id) { display: none !important; }
html.nv-on #modal-quick-edit:not(.nv6-qe) .modal-header > .nv6-id { display: none !important; }
html.nv-on #modal-quick-edit.nv6-qe .nvq-id,
html.nv-on #modal-quick-edit.nv6-qe .nvq-changes,
html.nv-on #modal-quick-edit.nv6-qe #qe-tab-editar > .modal-body > .mcf-block { display: none !important; }
html.nv-on #modal-quick-edit.nv6-qe #qe-tab-editar > .modal-footer { padding: 10px 14px !important; gap: 8px !important; flex-wrap: nowrap; align-items: center; justify-content: flex-end; }
html.nv-on #modal-quick-edit.nv6-qe .mcf-field { min-width: 0; display: grid; gap: 5px; }
html.nv-on #modal-quick-edit.nv6-qe .mcf-label { margin: 0 !important; }
html.nv-on #modal-quick-edit.nv6-qe :is(.mcf-input, .mcf-select) { height: 38px; border-radius: 10px !important; }
html.nv-on #modal-quick-edit.nv6-qe .nv6-canal { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
html.nv-on #modal-quick-edit.nv6-qe .nv6-canal > label { padding: 8px 4px !important; border-radius: 10px !important; transition: transform .18s var(--nv6-spring), background .15s, border-color .15s, color .15s !important; }
html.nv-on #modal-quick-edit.nv6-qe .nv6-canal > label:active { transform: scale(.95) !important; }
html.nv-on #modal-quick-edit.nv6-qe #qe-resp-dropdown { background: var(--bg2) !important; border-color: var(--border2) !important; }

html.nv-on .nv6-copy { margin-right: auto; }

/* ── 7b. Editar cliente completo (#modal-client en modo editar) ───── */
html.nv-on #modal-client.nv6-ed:not(.nv-cli) .mc-modal { max-width: 560px !important; max-height: 88vh; max-height: 88dvh; }
html.nv-on #modal-client.nv6-ed:not(.nv-cli) .nv510-steps { display: none !important; }
html.nv-on #modal-client.nv6-ed:not(.nv-cli) .mc-footer { gap: 8px; align-items: center; }
html.nv-on #modal-client.nv6-ed:not(.nv-cli) .mcf-row-datos2 { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,.7fr) !important; }
html.nv-on #modal-client.nv6-ed:not(.nv-cli) .mc-header > .nv6-pill { margin-left: auto; margin-right: 10px; }
html.nv-on #modal-client.nv6-ed:not(.nv-cli) .mc-header-left { min-width: 0; flex: 1; }
html.nv-on #modal-client.nv6-ed:not(.nv-cli) .mc-header-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 7c. Editar cuenta (#modal-account en modo editar) ─────────────── */
html.nv-on #modal-account.nv6-ed .nv510-steps { display: none !important; }
html.nv-on #modal-account.nv6-ed .modal-header { gap: 12px; padding: 14px 18px !important; }
html.nv-on #modal-account.nv6-ed .modal-header > span:first-child,
html.nv-on #modal-account.nv6-ed #modal-account-title { display: none !important; }
html.nv-on #modal-account:not(.nv6-ed) .modal-header > .nv6-id { display: none !important; }
html.nv-on #modal-account.nv6-ed .modal-footer { gap: 8px; align-items: center; }
html.nv-on #modal-account.nv6-ed > .modal { max-height: 88vh; max-height: 88dvh; }
html.nv-on #modal-account.nv6-ed .mc-section { padding: 12px 14px !important; }
.nv6-id-txt .nv6-occ, .nv6-occ { display: inline-flex !important; overflow: visible !important; gap: 3px; vertical-align: middle; margin-left: 6px; }
.nv6-occ i { width: 12px; height: 4px; border-radius: 3px; background: var(--border2); }
.nv6-occ i.on { background: var(--accent); }
.nv6-exp { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 8px; grid-column: 1 / -1; }

/* ── 8. Teléfono: hojas desde abajo para los editores ──────────────── */
@media (max-width: 600px) {
  html.nv-on :is(#modal-quick-edit.nv6-qe, #modal-client.nv6-ed:not(.nv-cli), #modal-account.nv6-ed) { align-items: flex-end !important; padding: 0 !important; }
  html.nv-on #modal-quick-edit.nv6-qe > .modal,
  html.nv-on #modal-client.nv6-ed:not(.nv-cli) > .mc-modal,
  html.nv-on #modal-account.nv6-ed > .modal {
    width: 100% !important; max-width: 100% !important; margin: 0 !important;
    max-height: 92vh !important; max-height: 92dvh !important; height: auto !important;
    border-radius: 22px 22px 0 0 !important; padding-bottom: env(safe-area-inset-bottom);
  }
  html.nv-on :is(#modal-quick-edit.nv6-qe, #modal-client.nv6-ed:not(.nv-cli), #modal-account.nv6-ed).show:not(.closing) > .modal { animation: nv6Sheet .3s var(--nv6-spring) both !important; }
  html.nv-on :is(#modal-quick-edit.nv6-qe, #modal-client.nv6-ed:not(.nv-cli), #modal-account.nv6-ed).closing > .modal { animation: nv6SheetOut var(--nv6-dur) var(--nv6-out) forwards !important; }
  .nv6-row3 { grid-template-columns: minmax(0,1fr); }
  .nv6-row { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); }
  .nv6-acc { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .nv6-acc .nv6-kv:first-child { grid-column: 1 / -1; }
  html.nv-on #modal-client.nv6-ed:not(.nv-cli) .mcf-row-datos2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  html.nv-on #modal-client.nv6-ed:not(.nv-cli) .mcf-row-datos2 > :first-child { grid-column: 1 / -1; }
  .nv6-sum.on { max-height: 60px; }
  .nv6-sum > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .nv6-ctc { grid-template-columns: minmax(0,1fr); }
  html.nv-on :is(#modal-quick-edit.nv6-qe #qe-tab-editar > .modal-footer, #modal-client.nv6-ed .mc-footer, #modal-account.nv6-ed .modal-footer) { flex-wrap: nowrap !important; gap: 6px !important; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important; }
  html.nv-on :is(#modal-quick-edit.nv6-qe, #modal-client.nv6-ed, #modal-account.nv6-ed) :is(.modal-footer, .mc-footer) .nv6-btn { min-height: 44px; flex: 1 1 auto; padding: 0 10px !important; min-width: 0; }
  html.nv-on :is(#modal-quick-edit.nv6-qe, #modal-client.nv6-ed, #modal-account.nv6-ed) :is(.modal-footer, .mc-footer) .nv6-copy { flex: 0 0 44px; padding: 0 !important; }
  html.nv-on .nv6-copy span { display: none; }
}
@keyframes nv6Sheet { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes nv6SheetOut { to { transform: translateY(48px); opacity: 0; } }

/* ── 9. Menos movimiento ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.nv-on :is(.nv6-btn, .nv6-bm, .nv6-x, .nv6-chip, .nv6-ib, .nv6-sec, .nv6-who, .nv6-guard, .nv6-cfm, .nv6-cfm-ic, .nv6-pill, .nv6-toast),
  html.nv-on :is(.nv6-btn, .nv6-x)::after, html.nv-on .nv6-x svg {
    animation: none !important; transition: none !important;
  }
  html.nv-on .nv6-chk path { animation: none; stroke-dashoffset: 0; }
  html.nv-on .modal-overlay.show > :is(.modal, .mc-modal, .rv-modal, .bk-modal),
  html.nv-on .modal-overlay.closing, html.nv-on .modal-overlay.closing > *, .nv6-ghost, .nv6-ghost > * { animation: none !important; }
}
html.nv-on :is(#modal-quick-edit.nv6-qe, #modal-client.nv6-ed, #modal-account.nv6-ed) [data-nv6-cancel] { margin: 0 !important; }
@media (max-width: 440px) {
  .nv6-id { flex-wrap: wrap; row-gap: 6px; }
  .nv6-id .nv6-id-txt { flex-basis: calc(100% - 56px); }
  .nv6-id .nv6-pill { margin-left: 52px; font-size: 11px; padding: 4px 9px; }
}
html.nv-on #modal-quick-edit.nv6-qe #qe-tab-editar > .modal-footer > .nv6-btn:not(.nv6-copy) { margin-left: 0 !important; margin-right: 0 !important; }