/* ======================================================================
   Custom CSS — Chatwoot Mundo Digital
   - Logo de login + branding
   - Ícone WhatsApp p/ canais Channel::Api (Evolution) — visual oficial
   - SLA com tiers de cor por tempo restante
   ====================================================================== */

/* ---------- Login page ---------- */
main > section:first-child img {
  height: 4rem !important;
  max-height: 4rem !important;
}
main > section:first-child h2 { display: none !important; }
main > section:first-child p { display: none !important; }
a[href="/app/login/sso"] { display: none !important; }


/* ---------- WhatsApp icon for Channel::Api (Evolution) ----------
   Override `cloudy` (fill) e `api` (line) p/ desenhar logo do WhatsApp.
   Nas accounts da Mundo Digital, todos Channel::Api são WhatsApp Evolution.
*/
.i-ri-cloudy-fill,
.i-ri-cloudy-fill[data-v-ec869068] {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.95 9.95 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.95 9.95 0 0 1 2.001 12c0-5.523 4.477-10 10-10M8.593 7.3l-.2.008a1 1 0 0 0-.372.1a1.3 1.3 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413c.409.902 1.082 1.857 1.97 2.742c.214.213.424.427.65.626a9.45 9.45 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a2 2 0 0 0 .833-.231a5 5 0 0 0 .383-.22q.001.002.125-.09c.135-.1.218-.171.33-.288q.126-.13.21-.302c.078-.163.156-.474.188-.733c.024-.198.017-.306.014-.373c-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.5.5 0 0 0-.176-.041a.48.48 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13a1.4 1.4 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6 6 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.3 6.3 0 0 1-1.02-1.268l-.059-.095a1 1 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373c.118-.19.155-.385.093-.536q-.42-1.026-.868-2.041c-.059-.134-.234-.23-.393-.249q-.081-.01-.162-.016a3 3 0 0 0-.403.004z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: var(--svg) !important;
  mask-image: var(--svg) !important;
}

.i-woot-api {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.95 9.95 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.95 9.95 0 0 1 2.001 12c0-5.523 4.477-10 10-10M8.593 7.3l-.2.008a1 1 0 0 0-.372.1a1.3 1.3 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413c.409.902 1.082 1.857 1.97 2.742c.214.213.424.427.65.626a9.45 9.45 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a2 2 0 0 0 .833-.231a5 5 0 0 0 .383-.22q.001.002.125-.09c.135-.1.218-.171.33-.288q.126-.13.21-.302c.078-.163.156-.474.188-.733c.024-.198.017-.306.014-.373c-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.5.5 0 0 0-.176-.041a.48.48 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13a1.4 1.4 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6 6 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.3 6.3 0 0 1-1.02-1.268l-.059-.095a1 1 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373c.118-.19.155-.385.093-.536q-.42-1.026-.868-2.041c-.059-.134-.234-.23-.393-.249q-.081-.01-.162-.016a3 3 0 0 0-.403.004z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: var(--svg) !important;
  mask-image: var(--svg) !important;
}


/* ---------- SLA color tiers (set via sla-color.js) ----------
   Vermelho (missed) já é tratado pelo Chatwoot via fill-n-ruby-10.
   Tiers adicionados pelo JS:
     .sla-tier-ok        (>2h restante)   verde
     .sla-tier-warn      (30m–2h)         âmbar
     .sla-tier-urgent    (<30m)           laranja + pulso
*/

.sla-tier-ok svg path,
.sla-tier-ok svg {
  fill: #16a34a !important;
}
.sla-tier-ok span {
  color: #16a34a !important;
}

.sla-tier-warn svg path,
.sla-tier-warn svg {
  fill: #f59e0b !important;
}
.sla-tier-warn span {
  color: #d97706 !important;
  font-weight: 500 !important;
}

.sla-tier-urgent svg path,
.sla-tier-urgent svg {
  fill: #ea580c !important;
  animation: sla-pulse 1.6s ease-in-out infinite;
}
.sla-tier-urgent span {
  color: #ea580c !important;
  font-weight: 600 !important;
}

@keyframes sla-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .sla-tier-urgent svg path,
  .sla-tier-urgent svg {
    animation: none !important;
  }
}