/* DMK Prisma · acabamento final do PDV (carrega por último).
   Zoom 100% como padrão: margens confortáveis, botões com volume, sem efeitos decorativos piscando.
   Não muda nenhuma função: só aparência. */

/* ---------- Efeitos antigos que só pesavam (pulsos e anéis decorativos infinitos) ---------- */
.notification-pulse, .dmk-sub-badge::before, .dmk-sub-hero::after,
#providerWorkspace .isp-live-dot, #providerWorkspace .pv-dot { animation: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; } }

/* ---------- Botões com volume (os "achatados" ganham relevo suave) ---------- */
:is(.btn, .chat-round-btn):not(.btn-link):not(.btn-close):not(:disabled) {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 1px 0 rgba(255, 255, 255, .5) inset;
  transition: box-shadow .15s ease, transform .15s ease, filter .15s ease, background-color .15s ease, border-color .15s ease;
}
:is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark):not(:disabled) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .05)) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .14), 0 6px 14px -8px rgba(15, 23, 42, .45), 0 1px 0 rgba(255, 255, 255, .22) inset !important;
}
:is(.btn, .chat-round-btn):not(.btn-link):not(.btn-close):not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(15, 23, 42, .22), 0 1px 0 rgba(255, 255, 255, .25) inset; }
:is(.btn, .chat-round-btn):not(.btn-link):not(.btn-close):not(:disabled):active { transform: none; filter: brightness(.97); box-shadow: 0 1px 2px rgba(15, 23, 42, .12) inset; }
body[data-theme=dark] :is(.btn, .chat-round-btn):not(.btn-link):not(.btn-close):not(:disabled) { box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }

/* ---------- Celular: barra de ações do topo rola de lado com indicação visual ---------- */
@media (max-width: 760px) {
  .top-actions.top-actions-pro {
    overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .top-actions.top-actions-pro::-webkit-scrollbar { display: none; }
  .top-actions.top-actions-pro > * { flex: 0 0 auto; scroll-snap-align: start; }
}

/* =====================================================================
   Campos de texto: UMA borda só ao digitar (antes: borda + contorno afastado = "duas bordas")
   ===================================================================== */
:root { --px-pdv: var(--ws-primary, var(--dmk-primary, var(--primary, var(--brand, #178058)))); }
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]), textarea, select, .form-control, .form-select):is(:focus, :focus-visible):not(:is(.sale-search-input-row, .dmk-login-input, .dmk-dialog-secret, .dmk-smart-control-v11413, .isp-filters > label, .amx164-chat-compose, .chat-input-wrap) *) {
  outline: none !important; outline-offset: 0 !important;
  border-color: var(--px-pdv) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--px-pdv) 16%, transparent) !important;
}
/* campos dentro de uma "caixa" que já ganha o destaque: o campo interno fica limpo */
:is(.sale-search-input-row, .dmk-login-input, .dmk-dialog-secret, .dmk-smart-control-v11413, .isp-filters > label) :is(input, textarea, select):focus { outline: none !important; box-shadow: none !important; }
:is(.sale-search-input-row, .dmk-login-input, .dmk-dialog-secret, .dmk-smart-control-v11413, .isp-filters > label):focus-within { outline: none !important; border-color: var(--px-pdv) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--px-pdv) 16%, transparent) !important; }

/* =====================================================================
   Chat da empresa (Central de Atendimento): balões limpos e padronizados
   ===================================================================== */
.chat-msg-row .chat-bubble-v83 { border-radius: 16px !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .08) !important; }
.chat-msg-row.in .chat-bubble-v83 { border-top-left-radius: 6px !important; }
.chat-msg-row.out .chat-bubble-v83 { border-top-right-radius: 6px !important; }
.chat-msg-row .chat-msg-head { gap: 8px; }
.chat-msg-row .chat-msg-head b { font-size: 12px; letter-spacing: .01em; }
.chat-msg-row .chat-msg-head span { font-size: 11px; opacity: .8; white-space: nowrap; }
/* ferramentas do balão (responder, reagir, fixar...) aparecem ao passar o mouse; no celular ficam discretas */
.chat-msg-row .chat-msg-tools { display: flex; gap: 2px; justify-content: flex-end; margin-top: 4px; }
.chat-msg-row .chat-msg-tools button { width: 28px; height: 26px; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: inherit; opacity: .6; box-shadow: none !important; transform: none !important; }
.chat-msg-row .chat-msg-tools button:hover { opacity: 1; background: color-mix(in srgb, var(--px-pdv) 12%, transparent) !important; color: var(--px-pdv); }
@media (hover: hover) and (pointer: fine) {
  .chat-msg-row .chat-msg-tools { height: 0; margin-top: 0; overflow: hidden; opacity: 0; transition: opacity .15s ease; }
  .chat-msg-row:is(:hover, :focus-within) .chat-msg-tools { height: auto; margin-top: 4px; opacity: 1; }
}
/* "digitando…" com três pontinhos animados */
.chat-presence.typing { color: var(--px-pdv) !important; font-weight: 600; }
.chat-presence.typing::after, .amx164-chat-meta.typing::after { content: ""; display: inline-block; width: 18px; height: 6px; margin-left: 4px; vertical-align: middle;
  background: radial-gradient(circle closest-side, currentColor 92%, transparent) 0 50% / 6px 6px no-repeat, radial-gradient(circle closest-side, currentColor 92%, transparent) 6px 50% / 6px 6px no-repeat, radial-gradient(circle closest-side, currentColor 92%, transparent) 12px 50% / 6px 6px no-repeat;
  animation: px-digitando 1.1s steps(3, end) infinite; }
@keyframes px-digitando { 0% { clip-path: inset(0 12px 0 0); } 100% { clip-path: inset(0 -1px 0 0); } }

/* =====================================================================
   Chat do site da empresa: campos e cabeçalho no padrão
   ===================================================================== */
.amx164-chat-panel :is(input, textarea, select) { border-radius: 12px !important; }
.amx164-chat-panel :is(input, textarea, select):focus { outline: none !important; border-color: var(--px-pdv) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--px-pdv) 16%, transparent) !important; }
.amx164-chat-compose:focus-within { outline: none !important; }
.amx164-message { border-radius: 16px !important; }

/* =====================================================================
   VPN de acesso (provedor): situação clara, trava da Central e botões organizados
   ===================================================================== */
.pvpn-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px !important; border-radius: 999px !important; font-weight: 700; font-size: 12px; letter-spacing: .01em; }
.pvpn-status-ok { background: color-mix(in srgb, #16a34a 14%, transparent) !important; color: #15803d !important; }
.pvpn-status-lock { background: color-mix(in srgb, #dc2626 12%, transparent) !important; color: #b91c1c !important; }
.pvpn-status-pending { background: color-mix(in srgb, #d97706 14%, transparent) !important; color: #b45309 !important; }
.pvpn-status-off { background: color-mix(in srgb, #64748b 14%, transparent) !important; color: #475569 !important; }
.pvpn-connection.pvpn-tone-ok { border-left: 4px solid #16a34a; }
.pvpn-connection.pvpn-tone-lock { border-left: 4px solid #dc2626; }
.pvpn-connection.pvpn-tone-pending { border-left: 4px solid #d97706; }
.pvpn-connection .isp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pvpn-actions-sep { flex: 1 1 12px; min-width: 12px; }
:is(.isp-actions, .pvpn-connection) .btn[data-pvpn="delete"] { color: #b91c1c !important; border-color: color-mix(in srgb, #dc2626 35%, transparent) !important; background: transparent !important; }
:is(.isp-actions, .pvpn-connection) .btn[data-pvpn="delete"]:hover { background: color-mix(in srgb, #dc2626 8%, transparent) !important; }
.pvpn-locked-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; border: 1px dashed color-mix(in srgb, #dc2626 45%, transparent); color: #b91c1c; font-weight: 600; font-size: 14px; background: color-mix(in srgb, #dc2626 6%, transparent); cursor: not-allowed; }
.pvpn-lock { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; margin: 0 0 16px; padding: 18px 20px; border-radius: 16px; border: 1px solid color-mix(in srgb, #dc2626 28%, transparent); background: linear-gradient(180deg, color-mix(in srgb, #dc2626 7%, transparent), color-mix(in srgb, #dc2626 3%, transparent)); }
.pvpn-lock-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, #dc2626 14%, transparent); color: #b91c1c; font-size: 22px; }
.pvpn-lock h2 { margin: 0 0 4px; font-size: 17px; }
.pvpn-lock p { margin: 0 0 8px; opacity: .85; }
.pvpn-lock ol { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
body[data-theme=dark] .pvpn-status-ok { color: #4ade80 !important; }
body[data-theme=dark] :is(.pvpn-status-lock, .pvpn-lock-icon, .pvpn-locked-btn, [data-pvpn="delete"]) { color: #f87171 !important; }
body[data-theme=dark] .pvpn-status-pending { color: #fbbf24 !important; }
body[data-theme=dark] .pvpn-status-off { color: #cbd5e1 !important; }
@media (max-width: 640px) { .pvpn-lock { grid-template-columns: 1fr; } .pvpn-actions-sep { display: none; } }

/* =====================================================================
   Diálogos do PDV (confirmar, informar, avisos) no padrão DMK Prisma
   ===================================================================== */
.dmk-dialog-queue-backdrop { background: rgba(15, 23, 42, .45) !important; backdrop-filter: blur(3px); }
.dmk-dialog-queue-card { border-radius: 18px !important; border: 0 !important; padding: 22px !important; box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .55), 0 2px 6px rgba(15, 23, 42, .12) !important; animation: px-dialogo .18s ease-out; max-width: min(480px, calc(100vw - 32px)) !important; }
@keyframes px-dialogo { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.dmk-dialog-queue-head { gap: 14px !important; align-items: flex-start !important; }
.dmk-dialog-queue-icon { width: 44px !important; height: 44px !important; border-radius: 12px !important; display: grid !important; place-items: center !important; background: color-mix(in srgb, var(--px-pdv) 14%, transparent) !important; color: var(--px-pdv) !important; font-size: 22px !important; flex: 0 0 auto; }
.dmk-dialog-copy h3 { font-size: 18px !important; margin: 2px 0 6px !important; }
.dmk-dialog-copy p { font-size: 14px !important; line-height: 1.5 !important; opacity: .85; }
.dmk-dialog-queue-foot { gap: 10px !important; justify-content: flex-end !important; }
.dmk-dialog-queue-foot .btn { min-height: 40px; padding: 0 18px !important; border-radius: 11px !important; font-weight: 700 !important; }
.dmk-dialog-queue-foot [data-dialog-no] { background: transparent !important; border: 1px solid color-mix(in srgb, currentColor 18%, transparent) !important; }
.dmk-dialog-queue-meta { opacity: .6; font-size: 12px; }
@media (max-width: 520px) { .dmk-dialog-queue-foot { flex-direction: column-reverse; } .dmk-dialog-queue-foot .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .dmk-dialog-queue-card { animation: none; } }
.dmk-dialog-queue-card .dmk-dialog-queue-foot [data-dialog-yes] { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.05)), var(--px-pdv) !important; color: #fff !important; border: 0 !important; box-shadow: 0 1px 2px rgba(15,23,42,.14), 0 8px 18px -10px var(--px-pdv) !important; }
.dmk-dialog-queue-card .dmk-dialog-queue-head .dmk-dialog-queue-icon { background: color-mix(in srgb, var(--px-pdv) 14%, transparent) !important; color: var(--px-pdv) !important; }

/* =====================================================================
   PPPoE: troca de faixa/capacidade da RB
   ===================================================================== */
.pppoe-faixa-card { margin: 0 0 18px; padding: 18px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--px-pdv) 28%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--px-pdv) 7%, transparent), transparent); }
.pppoe-faixa-card header { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: flex-start; }
.pppoe-faixa-card small { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 700; opacity: .7; }
.pppoe-faixa-card h4 { margin: 2px 0 4px; font-size: 22px; font-variant-numeric: tabular-nums; }
.pppoe-faixa-card header p { margin: 0; opacity: .8; font-size: 13px; }
.pppoe-faixa-numeros { display: flex; gap: 8px; flex-wrap: wrap; }
.pppoe-faixa-numeros span { display: grid; min-width: 92px; padding: 8px 12px; border-radius: 12px; background: var(--card, #fff); border: 1px solid color-mix(in srgb, currentColor 10%, transparent); font-size: 12px; opacity: .9; text-align: center; }
.pppoe-faixa-numeros b { font-size: 20px; line-height: 1.1; }
.pppoe-faixa-numeros .aviso { border-color: color-mix(in srgb, #d97706 40%, transparent); color: #b45309; }
.pppoe-faixa-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 14px; }
.pppoe-faixa-form label { display: grid; gap: 4px; font-weight: 600; min-width: 240px; }
.pppoe-faixa-ajuda { margin: 10px 0 0; font-size: 12.5px; opacity: .75; }
.pppoe-faixa-antiga { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #d97706 8%, transparent); }
.pppoe-faixa-antiga p { margin: 0; }
.pppoe-faixa-previa { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--card, #fff); border: 1px solid color-mix(in srgb, currentColor 10%, transparent); display: grid; gap: 10px; }
.pppoe-faixa-de-para { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pppoe-faixa-de-para span { display: grid; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, currentColor 5%, transparent); font-size: 12.5px; }
.pppoe-faixa-de-para span b { font-size: 17px; }
.pppoe-faixa-de-para .nova { background: color-mix(in srgb, var(--px-pdv) 12%, transparent); color: var(--px-pdv); }
.pppoe-faixa-de-para i { font-style: normal; font-size: 20px; opacity: .6; }
.pppoe-faixa-previa label { display: grid; gap: 4px; max-width: 360px; }