/* ════════════════════════════════════════════════════════════════════
   NV Streaming — Rediseño de ventanas v4.1 (nv-modales.css)
   Enviar datos · Editar cliente · Renovar cliente
   ────────────────────────────────────────────────────────────────────
   Todas las reglas dependen de una clase que pone js/nv-modales.js
   (.nv-snd, .nv-qe, .nv-rv, .nv-rfx). Si el JS no carga, las ventanas
   se ven exactamente como antes.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --nvm-ease: cubic-bezier(.2,.8,.2,1);
  --nvm-spring: cubic-bezier(.34,1.56,.64,1);
  --nvm-ok: #3ddc97;
  --nvm-wa: #25d366;
  --nvm-tg: #2aabee;
  --nvm-mail: #8b93ff;
}

/* ── Piezas comunes ─────────────────────────────────────────────────── */
.nvm-seg {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 4px; padding: 4px; border-radius: 12px;
  background: var(--bg3); border: 1px solid var(--border);
}
.nvm-seg button {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 10px; border: 0; border-radius: 9px; background: transparent;
  color: var(--text3); font: 700 12.5px/1 inherit; cursor: pointer;
  transition: color .18s var(--nvm-ease);
}
.nvm-seg button:hover { color: var(--text); }
.nvm-seg button[aria-pressed="true"] { color: var(--text); }
.nvm-seg button svg { flex-shrink: 0; }
.nvm-seg .nvm-thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px;
  border-radius: 9px; background: var(--bg2);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 4px 14px rgba(0,0,0,.35);
  border: 1px solid var(--border2);
  transition: transform .32s var(--nvm-spring), width .32s var(--nvm-ease), border-color .2s;
}
.nvm-lbl {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text3);
}
.nvm-lbl em { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .75; }
.nvm-kv {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 9px 12px; border-radius: 11px; background: var(--bg3); border: 1px solid var(--border);
  font-size: 12.5px; color: var(--text2);
}
.nvm-kv small { color: var(--text3); font-weight: 700; font-size: 11px; flex-shrink: 0; }
.nvm-kv span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--nv-font-num, ui-monospace, monospace); }
.nvm-kv.nvm-warn span { color: #f7b955; font-family: inherit; white-space: normal; }
.nvm-mini {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: auto; flex-shrink: 0;
  border-radius: 8px; border: 1px solid var(--border2); background: var(--bg2); color: var(--text2); cursor: pointer;
  transition: color .15s, border-color .15s, transform .12s;
}
.nvm-mini:hover { color: var(--text); border-color: var(--text3); }
.nvm-mini:active { transform: scale(.92); }
.nvm-mini.ok { color: var(--nvm-ok); border-color: rgba(61,220,151,.5); }

@keyframes nvmIn     { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nvmPop    { 0% { opacity: 0; transform: translateY(10px) scale(.94); } 60% { opacity: 1; transform: translateY(-2px) scale(1.01); } 100% { transform: none; } }
@keyframes nvmShake  { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes nvmPulse  { 0% { box-shadow: 0 0 0 0 rgba(var(--nv-accent-rgb, 139,147,255), .45); } 100% { box-shadow: 0 0 0 10px rgba(var(--nv-accent-rgb, 139,147,255), 0); } }
@keyframes nvmBlink  { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes nvmFly    { 0% { transform: none; } 40% { transform: translate(3px,-3px) rotate(-8deg); } 70% { transform: translate(26px,-18px) rotate(-18deg); opacity: 0; } 71% { transform: translate(-18px,12px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes nvmDraw   { to { stroke-dashoffset: 0; } }
@keyframes nvmRing   { from { transform: scale(.6); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
@keyframes nvmSpark  { from { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } to { transform: rotate(var(--a)) translateY(-44px) scale(.4); opacity: 0; } }

/* ══ 1. ENVIAR DATOS ════════════════════════════════════════════════ */
#modal-send.nv-snd .modal { max-width: 800px !important; width: 96%; }
#modal-send.nv-snd .modal-body {
  display: grid !important; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: 18px;
  padding: 16px 18px !important;
}
#modal-send.nv-snd .nvs-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#modal-send.nv-snd .nvs-left > * { animation: nvmIn .34s var(--nvm-ease) both; }
#modal-send.nv-snd .nvs-left > *:nth-child(2) { animation-delay: .04s; }
#modal-send.nv-snd .nvs-left > *:nth-child(3) { animation-delay: .08s; }
#modal-send.nv-snd .nvs-left > *:nth-child(4) { animation-delay: .12s; }
#modal-send.nv-snd .nvs-left > *:nth-child(5) { animation-delay: .16s; }
#modal-send.nv-snd #send-message-preview {
  min-height: 250px; resize: vertical !important; font-size: 12.5px !important; line-height: 1.7 !important;
  font-family: var(--nv-font-num, 'Courier New', monospace) !important;
  color: var(--text) !important; border-radius: 12px !important; padding: 14px !important;
  transition: border-color .15s, box-shadow .15s;
}
#modal-send.nv-snd #send-message-preview:focus { border-color: rgba(var(--nv-accent-rgb, 139,147,255), .6) !important; box-shadow: 0 0 0 3px rgba(var(--nv-accent-rgb, 139,147,255), .18); }
#modal-send.nv-snd .nvs-count { align-self: flex-end; margin-top: -6px; font-size: 11px; color: var(--text3); font-variant-numeric: tabular-nums; }
#modal-send.nv-snd .nvm-seg[data-ch="whatsapp"] .nvm-thumb { border-color: rgba(37,211,102,.45); }
#modal-send.nv-snd .nvm-seg[data-ch="telegram"] .nvm-thumb { border-color: rgba(42,171,238,.45); }
#modal-send.nv-snd .nvm-seg[data-ch="email"]    .nvm-thumb { border-color: rgba(139,147,255,.45); }
#modal-send.nv-snd .nvm-seg button[data-ch="whatsapp"][aria-pressed="true"] svg { color: var(--nvm-wa); }
#modal-send.nv-snd .nvm-seg button[data-ch="telegram"][aria-pressed="true"] svg { color: var(--nvm-tg); }
#modal-send.nv-snd .nvm-seg button[data-ch="email"][aria-pressed="true"] svg { color: var(--nvm-mail); }

/* Teléfono con la vista previa */
.nvs-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; animation: nvmIn .4s var(--nvm-ease) .06s both; }
.nvs-phone {
  --chat-bg: #0b141a; --bub: #005c4b; --bub-text: #e9edef; --bar: #1f2c34;
  flex: 1; min-height: 330px; display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden; border: 1px solid var(--border2);
  background: var(--chat-bg);
  box-shadow: 0 18px 44px rgba(0,0,0,.4);
  transition: background .35s var(--nvm-ease);
}
.nvs-phone[data-ch="telegram"] { --chat-bg: #0e1621; --bub: #2b5278; --bub-text: #f5f5f5; --bar: #17212b; }
.nvs-phone[data-ch="email"]    { --chat-bg: #111218; --bub: #1d1f2b; --bub-text: #e8e9f3; --bar: #181a24; }
.nvs-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--bar); transition: background .35s var(--nvm-ease);
}
.nvs-av {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font: 800 12px/1 inherit; color: #fff;
}
.nvs-who { min-width: 0; line-height: 1.2; }
.nvs-who b { display: block; color: #e9edef; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nvs-who small { color: #8696a0; font-size: 11px; }
.nvs-chat {
  flex: 1; padding: 14px 12px 16px; overflow-y: auto; max-height: 360px;
  background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 16px 16px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.nvs-phone[data-ch="email"] .nvs-chat { align-items: stretch; background-image: none; }
.nvs-bubble {
  position: relative; max-width: 92%;
  padding: 8px 10px 18px; border-radius: 10px 2px 10px 10px;
  background: var(--bub); color: var(--bub-text);
  font-size: 12.8px; line-height: 1.45; word-wrap: break-word; white-space: normal;
  box-shadow: 0 1px 1px rgba(0,0,0,.25);
  transform-origin: top right;
  transition: background .35s var(--nvm-ease);
}
.nvs-phone[data-ch="email"] .nvs-bubble { max-width: none; border-radius: 12px; padding: 14px 14px 22px; border: 1px solid var(--border); }
.nvs-bubble.nvm-new { animation: nvmPop .42s var(--nvm-spring) both; }
.nvs-bubble i.nvs-time { position: absolute; right: 8px; bottom: 4px; font-style: normal; font-size: 10.5px; opacity: .6; }
.nvs-bubble code { font-family: var(--nv-font-num, monospace); font-size: 12px; }
.nvs-typing {
  display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 12px;
  background: var(--bub); animation: nvmIn .2s var(--nvm-ease) both;
}
.nvs-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--bub-text); animation: nvmBlink 1s infinite; }
.nvs-typing i:nth-child(2) { animation-delay: .15s; }
.nvs-typing i:nth-child(3) { animation-delay: .3s; }
#modal-send.nv-snd #modal-send-btn.nvm-fly svg { animation: nvmFly .7s var(--nvm-ease); }
@media (max-width: 760px) {
  #modal-send.nv-snd .modal-body { grid-template-columns: 1fr; }
  .nvs-phone { min-height: 220px; }
  #modal-send.nv-snd #send-message-preview { min-height: 150px; }
}

/* ══ 2. EDITAR CLIENTE: desde 5.6 en css/nv-modales-560.css ════════ */

/* ══ 3. RENOVAR CLIENTE ═════════════════════════════════════════════ */
#modal-renovar.nv-rv .rv-modal { max-width: 500px; }
#modal-renovar.nv-rv .rv-opt { position: relative; transition: transform .18s var(--nvm-spring), border-color .18s, background .18s, box-shadow .18s; }
#modal-renovar.nv-rv .rv-opt:hover { transform: translateY(-2px); }
#modal-renovar.nv-rv .rv-opt:active { transform: scale(.97); }
#modal-renovar.nv-rv .rv-opt.active { box-shadow: 0 10px 26px -14px var(--nvm-ok); }
#modal-renovar.nv-rv .rv-opt.active::after {
  content: ''; position: absolute; top: 7px; right: 7px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--nvm-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306140e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
  animation: nvmPop .3s var(--nvm-spring);
}
.nvr-price { display: block; margin-top: 4px; font: 700 11.5px/1 var(--nv-font-num, monospace); color: var(--text3); transition: color .18s; }
#modal-renovar.nv-rv .rv-opt.active .nvr-price { color: var(--nvm-ok); }
#modal-renovar.nv-rv #renovar-preview { display: none !important; }
.nvr-flow {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 10px;
  padding: 14px; border-radius: 14px; background: var(--bg3); border: 1px solid var(--border);
  animation: nvmIn .3s var(--nvm-ease) both;
}
.nvr-flow[hidden] { display: none; }
.nvr-flow small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); margin-bottom: 4px; }
.nvr-flow b { font: 700 16px/1.2 var(--nv-font-display, inherit); color: var(--text); }
.nvr-flow .nvr-new { color: var(--nvm-ok); display: inline-block; }
.nvr-flow .nvr-new.flip { animation: nvmPop .4s var(--nvm-spring); }
.nvr-flow .nvr-arrow { color: var(--nvm-ok); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(61,220,151,.1); }
.nvr-flow .nvr-arrow svg { animation: nvmIn .4s var(--nvm-ease); }
.nvr-flow > div:last-child { text-align: right; }
.nvr-total { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 0; }
.nvr-total[hidden] { display: none; }
.nvr-total span { font-size: 12.5px; color: var(--text3); }
.nvr-total b { font: 800 26px/1 var(--nv-font-num, monospace); color: var(--text); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
/* #renovar-confirm-btn: desde 5.6 lo pinta nv-renovar-560 con el acento del tema. */

/* Renovación exitosa */
.nvr-ok { position: relative; display: grid; place-items: center; padding: 6px 0 2px; }
.nvr-ok svg { width: 74px; height: 74px; overflow: visible; }
.nvr-ok .c { stroke-dasharray: 152; stroke-dashoffset: 152; animation: nvmDraw .55s var(--nvm-ease) .05s forwards; }
.nvr-ok .k { stroke-dasharray: 40; stroke-dashoffset: 40; animation: nvmDraw .35s var(--nvm-ease) .5s forwards; }
.nvr-ok .ring { position: absolute; width: 74px; height: 74px; border-radius: 50%; border: 2px solid var(--nvm-ok); animation: nvmRing .9s var(--nvm-ease) .45s both; }
.nvr-ok .sp { position: absolute; width: 6px; height: 6px; border-radius: 50%; top: calc(50% - 3px); left: calc(50% - 3px); opacity: 0; animation: nvmSpark .7s var(--nvm-ease) .55s both; }

@media (prefers-reduced-motion: reduce) {
  .nvm-seg .nvm-thumb, .nvs-bubble, .nvs-typing, .nvr-flow, .nvr-ok *,
  #modal-send.nv-snd .nvs-left > * {
    animation: none !important; transition: none !important;
  }
  .nvr-ok .c, .nvr-ok .k { stroke-dashoffset: 0; }
}