/* ============================================================
   GUAPTEL FIBRA - Brand Color Override v3
   ============================================================ */

/* CSS custom properties - bg-n-blue-*, text-n-blue-* etc. */
:root {
  --blue-1: 255 252 250; --blue-2: 255 248 241; --blue-3: 255 238 220;
  --blue-4: 255 224 192; --blue-5: 255 208 163; --blue-6: 253 190 130;
  --blue-7: 248 166 88;  --blue-8: 247 147 55;  --blue-9: 245 128 31;
  --blue-10: 230 110 18; --blue-11: 175 72 5;   --blue-12: 80 32 5;
  --iris-1: 253 253 253; --iris-2: 250 250 250; --iris-3: 244 244 244;
  --iris-4: 236 236 236; --iris-5: 224 224 224; --iris-6: 210 210 210;
  --iris-7: 192 192 192; --iris-8: 160 160 160; --iris-9: 128 128 128;
  --iris-10: 110 110 110; --iris-11: 77 77 77;  --iris-12: 30 30 30;
  --solid-blue: 255 238 220; --solid-blue-2: 255 252 250;
  --solid-iris: 232 232 232; --solid-purple: 232 232 232;
  --text-blue: 80 32 5; --border-blue-strong: 120 60 10;
  --border-blue: 245, 128, 31, 0.5;
}
.dark {
  --blue-1: 28 18 10; --blue-2: 36 23 13; --blue-3: 58 36 18;
  --blue-4: 76 47 20; --blue-5: 95 60 25; --blue-6: 118 75 32;
  --blue-7: 148 96 42; --blue-8: 188 120 52; --blue-9: 245 128 31;
  --blue-10: 255 145 50; --blue-11: 255 175 90; --blue-12: 255 220 170;
  --iris-1: 19 19 20; --iris-2: 24 24 25; --iris-3: 33 33 35;
  --iris-4: 42 42 44; --iris-5: 52 52 55; --iris-6: 63 63 67;
  --iris-7: 78 78 83; --iris-8: 100 100 107; --iris-9: 128 128 136;
  --iris-10: 145 145 152; --iris-11: 180 180 186; --iris-12: 230 230 234;
  --solid-blue: 76 47 20; --solid-blue-2: 36 23 13;
  --solid-iris: 52 52 55; --solid-purple: 52 52 55;
  --text-blue: 255 220 170; --border-blue-strong: 255 220 170;
  --border-blue: 245, 128, 31, 0.5;
}

/* ============================================================
   FIX GLOBAL: bg-n-brand hardcoded no CSS compilado (cache busting)
   Garante laranja mesmo com browser cacheando o v3app CSS antigo
   ============================================================ */
.bg-n-brand,
button.bg-n-brand,
a.bg-n-brand {
  background-color: #F5801F !important;
}
.hover\:bg-n-blue-10:hover,
.hover\:bg-n-brand\/90:hover {
  background-color: #E06810 !important;
}
.bg-n-brand\/5  { background-color: rgba(245,128,31,0.05) !important; }
.bg-n-brand\/10 { background-color: rgba(245,128,31,0.10) !important; }
.bg-n-brand\/30 { background-color: rgba(245,128,31,0.30) !important; }
.text-n-brand, .text-n-blue-11 { color: #E06810 !important; }
.ring-n-brand, .outline-n-brand { outline-color: #F5801F !important; }
.border-n-brand { border-color: #F5801F !important; }

/* ============================================================
   SIDEBAR: ocultar itens (filho direto - nao afeta Times/Conversas)
   ============================================================ */
nav li:has(> *[title="Capitao"]),
nav li:has(> *[title="Capitão"]) { display: none !important; }
nav li:has(> *[title="Contatos"]) { display: none !important; }
nav li:has(> *[title="Mencoes"]),
nav li:has(> *[title="Menções"]) { display: none !important; }
nav li:has(> *[title="Nao atendidas"]),
nav li:has(> *[title="Não atendidas"]) { display: none !important; }

/* ============================================================
   LOGIN - SMARTCHAT
   Design: fundo escuro navy, card branco centralizado
   ============================================================ */

/* Fundo escuro */
main:has(section.max-w-5xl) {
  background: #161D2E !important;
  background-image:
    radial-gradient(ellipse at 15% 50%, rgba(245,128,31,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 30%, rgba(245,128,31,0.04) 0%, transparent 50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 16px !important;
  min-height: 100vh !important;
}

/* Secao do logo: topo do card */
main:has(section.max-w-5xl) section.max-w-5xl {
  background: #ffffff !important;
  border-radius: 20px 20px 0 0 !important;
  padding: 36px 44px 24px !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  text-align: center !important;
  box-shadow: 0 -4px 0 rgba(245,128,31,0.6),
              -24px 0 50px rgba(0,0,0,0.25),
               24px 0 50px rgba(0,0,0,0.25) !important;
}

/* Logo: somente o primeiro (light mode) - SEM display:block para nao duplicar */
main:has(section.max-w-5xl) section.max-w-5xl img:first-of-type {
  height: 68px !important;
  width: auto !important;
  max-width: 300px !important;
}

/* Esconder segundo logo (dark mode) em qualquer condicao */
main:has(section.max-w-5xl) section.max-w-5xl img ~ img {
  display: none !important;
}

/* Titulo "SmartChat" */
main:has(section.max-w-5xl) h2 {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #9CA3AF !important;
  margin-top: 14px !important;
}

/* Card do formulario: base do card */
main:has(section.max-w-5xl) section.mt-11 {
  background: #ffffff !important;
  border-radius: 0 0 20px 20px !important;
  border: none !important;
  margin-top: 0 !important;
  padding: 8px 44px 36px !important;
  max-width: 440px !important;
  width: 100% !important;
  box-shadow: -24px 30px 50px rgba(0,0,0,0.25),
               24px 30px 50px rgba(0,0,0,0.25),
                0  30px 50px rgba(0,0,0,0.25) !important;
}

/* Separador visual entre logo e form */
main:has(section.max-w-5xl) section.mt-11::before {
  content: "";
  display: block !important;
  width: 48px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #F5801F, #FFB870) !important;
  border-radius: 4px !important;
  margin: 0 auto 24px !important;
}

/* Rodape dentro do card */
main:has(section.max-w-5xl) section.mt-11::after {
  content: "Guaptel Fibra \00A9 2026" !important;
  display: block !important;
  text-align: center !important;
  font-size: 0.72rem !important;
  color: #C0C8D8 !important;
  margin-top: 20px !important;
  letter-spacing: 0.04em !important;
}

/* Botao Entrar - laranja */
main:has(section.max-w-5xl) button[type="submit"],
main:has(section.max-w-5xl) .bg-n-brand {
  background: linear-gradient(135deg, #F5801F 0%, #E87010 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 4px 16px rgba(245,128,31,0.40) !important;
  transition: all 0.18s ease !important;
}
main:has(section.max-w-5xl) button[type="submit"]:hover:not(:disabled),
main:has(section.max-w-5xl) .bg-n-brand:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(245,128,31,0.55) !important;
}

/* Link esqueceu senha */
main:has(section.max-w-5xl) a {
  color: #F5801F !important;
}