/* ============================================================
   Contatos (tela nativa do painel) - estilos escopados
   ------------------------------------------------------------
   A antiga aba Contatos vinha por iframe e usava Tailwind + FontAwesome.
   Ao trazer para dentro do painel, reproduzimos aqui SO as classes que
   aquele HTML usa, todas presas dentro de ".ct-nativo" para nao vazarem
   para o resto do painel (nem sofrerem interferencia do Quasar/ds.css).
   Visual identico ao de antes: laranja #FF3200, cinzas neutros, cartoes.
   ============================================================ */

.ct-nativo{
  --brand:#FF3200; --ink:#2b2b2b; --line:#ebebeb;
  /* Ocupa a moldura (que tem position:relative) por completo. Assim a altura
     fica "presa" sem depender da cadeia de height:100% (que o q-page do Quasar
     nem sempre resolve), e as areas internas com rolagem funcionam de verdade. */
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  color:var(--ink);
  font-family:"AmsiProNarw","Archivo Narrow","Segoe UI",system-ui,-apple-system,sans-serif;
  background:#f5f5f5;
}
.ct-nativo *{box-sizing:border-box}

/* ---- componentes proprios da tela ---- */
.ct-nativo .card{background:#fff;border:1px solid var(--line);border-radius:16px}
.ct-nativo .chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;line-height:1.6;white-space:nowrap}
.ct-nativo .row-item{transition:background .12s}
.ct-nativo .row-item:hover{background:#f7f9fd}
.ct-nativo .row-item.ativo{background:#eef3ff}
.ct-nativo .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:600;border-radius:12px;cursor:pointer;border:0}
.ct-nativo .btn:disabled{opacity:.6;cursor:default}
.ct-nativo .fchip{cursor:pointer;user-select:none;border:1px solid #e2e8f0;background:#fff;color:#475569}
.ct-nativo .fchip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.ct-nativo .avatar{display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;border-radius:50%}
.ct-nativo .scroll::-webkit-scrollbar{width:8px;height:8px}
.ct-nativo .scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}

/* ---- layout / flex ----
   display com !important: o Quasar define ".hidden{display:none!important}"
   globalmente; sem o !important aqui, o "md:block" nunca venceria e a lista
   sumiria no desktop quando uma ficha estivesse aberta. */
.ct-nativo .flex{display:flex !important}
.ct-nativo .grid{display:grid !important}
.ct-nativo .block{display:block !important}
.ct-nativo .hidden{display:none !important}
.ct-nativo .flex-col{flex-direction:column}
.ct-nativo .flex-wrap{flex-wrap:wrap}
.ct-nativo .items-center{align-items:center}
.ct-nativo .items-start{align-items:flex-start}
.ct-nativo .justify-center{justify-content:center}
.ct-nativo .justify-between{justify-content:space-between}
.ct-nativo .flex-1{flex:1 1 0%}
.ct-nativo .shrink-0{flex-shrink:0}
.ct-nativo .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ct-nativo .relative{position:relative}
.ct-nativo .absolute{position:absolute}
.ct-nativo .fixed{position:fixed}
.ct-nativo .inset-0{top:0;right:0;bottom:0;left:0}
.ct-nativo .z-50{z-index:50}
.ct-nativo .overflow-hidden{overflow:hidden}
.ct-nativo .overflow-y-auto{overflow-y:auto}
.ct-nativo .min-h-0{min-height:0}
.ct-nativo .min-w-0{min-width:0}
.ct-nativo .h-full{height:100%}
.ct-nativo .left-3{left:12px}
.ct-nativo .top-1\/2{top:50%}
.ct-nativo .-translate-y-1\/2{transform:translateY(-50%)}

/* ---- tamanhos ---- */
.ct-nativo .w-8{width:32px}   .ct-nativo .h-8{height:32px}
.ct-nativo .w-10{width:40px}  .ct-nativo .h-10{height:40px}
.ct-nativo .w-14{width:56px}  .ct-nativo .h-14{height:56px}
.ct-nativo .w-64{width:256px}
.ct-nativo .w-full{width:100%}
.ct-nativo .max-w-sm{max-width:384px}
.ct-nativo .max-w-\[60vw\]{max-width:60vw}

/* ---- espacamentos ---- */
.ct-nativo .p-3{padding:12px}  .ct-nativo .p-4{padding:16px}  .ct-nativo .p-5{padding:20px}
.ct-nativo .px-2{padding-left:8px;padding-right:8px}
.ct-nativo .px-2\.5{padding-left:10px;padding-right:10px}
.ct-nativo .px-3{padding-left:12px;padding-right:12px}
.ct-nativo .px-4{padding-left:16px;padding-right:16px}
.ct-nativo .py-1{padding-top:4px;padding-bottom:4px}
.ct-nativo .py-1\.5{padding-top:6px;padding-bottom:6px}
.ct-nativo .py-2{padding-top:8px;padding-bottom:8px}
.ct-nativo .py-2\.5{padding-top:10px;padding-bottom:10px}
.ct-nativo .py-3{padding-top:12px;padding-bottom:12px}
.ct-nativo .py-4{padding-top:16px;padding-bottom:16px}
.ct-nativo .py-6{padding-top:24px;padding-bottom:24px}
.ct-nativo .py-16{padding-top:64px;padding-bottom:64px}
.ct-nativo .pt-4{padding-top:16px}
.ct-nativo .pb-3{padding-bottom:12px}
.ct-nativo .pl-9{padding-left:36px}
.ct-nativo .pr-3{padding-right:12px}
.ct-nativo .py-2\.5{padding-top:10px;padding-bottom:10px}
.ct-nativo .mt-0\.5{margin-top:2px}
.ct-nativo .mt-1{margin-top:4px}
.ct-nativo .mt-2{margin-top:8px}
.ct-nativo .mt-3{margin-top:12px}
.ct-nativo .mt-4{margin-top:16px}
.ct-nativo .mt-5{margin-top:20px}
.ct-nativo .mb-1{margin-bottom:4px}
.ct-nativo .mb-2{margin-bottom:8px}
.ct-nativo .mb-3{margin-bottom:12px}
.ct-nativo .ml-1{margin-left:4px}
.ct-nativo .gap-1\.5{gap:6px}
.ct-nativo .gap-2{gap:8px}
.ct-nativo .gap-3{gap:12px}

/* ---- texto ---- */
.ct-nativo .text-center{text-align:center}
.ct-nativo .text-right{text-align:right}
.ct-nativo .text-\[9px\]{font-size:9px}
.ct-nativo .text-\[10px\]{font-size:10px}
.ct-nativo .text-\[11px\]{font-size:11px}
.ct-nativo .text-xs{font-size:12px;line-height:1.4}
.ct-nativo .text-sm{font-size:14px;line-height:1.45}
.ct-nativo .text-base{font-size:16px}
.ct-nativo .text-lg{font-size:18px}
.ct-nativo .text-xl{font-size:20px}
.ct-nativo .text-2xl{font-size:24px}
.ct-nativo .text-3xl{font-size:30px}
.ct-nativo .font-semibold{font-weight:600}
.ct-nativo .font-bold{font-weight:700}
.ct-nativo .uppercase{text-transform:uppercase}
.ct-nativo .tracking-wide{letter-spacing:.025em}
.ct-nativo .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-nativo .opacity-60{opacity:.6}
.ct-nativo .opacity-70{opacity:.7}

/* ---- cores ---- */
.ct-nativo .bg-white{background:#fff}
.ct-nativo .bg-slate-100{background:#f1f5f9}
.ct-nativo .bg-red-50{background:#fef2f2}
.ct-nativo .text-white{color:#fff}
.ct-nativo .text-slate-400{color:#94a3b8}
.ct-nativo .text-slate-500{color:#64748b}
.ct-nativo .text-slate-600{color:#475569}
.ct-nativo .text-slate-700{color:#334155}
.ct-nativo .text-red-600{color:#dc2626}
.ct-nativo .text-red-700{color:#b91c1c}
.ct-nativo .hover\:text-slate-600:hover{color:#475569}

/* ---- bordas / raio ---- */
.ct-nativo .border{border:1px solid #e2e8f0}
.ct-nativo .border-b{border-bottom:1px solid #e2e8f0}
.ct-nativo .border-t{border-top:1px solid #e2e8f0}
.ct-nativo .border-l{border-left:1px solid #e2e8f0}
.ct-nativo .border-0{border:0}
.ct-nativo .last\:border-0:last-child{border-bottom:0}
.ct-nativo .border-\[\#e7ebf3\]{border-color:#e7ebf3}
.ct-nativo .border-\[\#eef1f6\]{border-color:#eef1f6}
.ct-nativo .border-\[\#f1f4f9\]{border-color:#f1f4f9}
.ct-nativo .border-\[\#e2e8f0\]{border-color:#e2e8f0}
.ct-nativo .rounded-lg{border-radius:8px}
.ct-nativo .rounded-xl{border-radius:12px}

/* ---- formularios ---- */
.ct-nativo input,.ct-nativo select,.ct-nativo textarea{font-family:inherit;color:inherit;background:#fff}
.ct-nativo .outline-none{outline:none}
.ct-nativo .focus\:border-\[var\(--brand\)\]:focus{border-color:var(--brand)}

/* ---- grids especificos da tabela ---- */
.ct-nativo .grid-cols-\[1fr_120px_120px_150px_140px\]{grid-template-columns:1fr 120px 120px 150px 140px}

/* ---- responsivo (>= 768px) ---- */
@media (min-width:768px){
  .ct-nativo .md\:px-6{padding-left:24px;padding-right:24px}
  .ct-nativo .md\:p-4{padding:16px}
  .ct-nativo .md\:p-5{padding:20px}
  .ct-nativo .md\:inline{display:inline !important}
  .ct-nativo .md\:block{display:block !important}
  .ct-nativo .md\:grid{display:grid !important}
  .ct-nativo .md\:flex{display:flex !important}
  .ct-nativo .md\:hidden{display:none !important}
  .ct-nativo .md\:items-center{align-items:center}
  .ct-nativo .md\:gap-3{gap:12px}
  .ct-nativo .md\:w-\[400px\]{width:400px}
  .ct-nativo .md\:grid-cols-\[1fr_120px_120px_150px_140px\]{grid-template-columns:1fr 120px 120px 150px 140px}
}

/* ============================================================
   Blindagem do layout de ROLAGEM (prioridade total)
   ------------------------------------------------------------
   Fixa a estrutura sem depender de height:100% e sem sofrer
   interferencia de utilitarios globais (Quasar). A .ct-nativo ja
   preenche a moldura (position:absolute; inset:0). Aqui garantimos:
     - .ct-nativo = coluna flexivel;
     - .h-full (miolo) ocupa o espaco que sobra e nao "quebra" (nowrap);
     - o corpo (cabecalho + lista/ficha) e a linha que sobra, com min-height:0
       para poder encolher e deixar a lista/ficha rolarem;
     - lista e ficha rolam de verdade (overflow-y:auto + min-height:0).
   ============================================================ */
.ct-nativo > .h-full{
  flex:1 1 auto !important;
  height:auto !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
}
.ct-nativo > .h-full > .flex-1{
  flex:1 1 0% !important;
  min-height:0 !important;
  display:flex !important;
  flex-wrap:nowrap !important;
}
.ct-nativo > .h-full > .flex-1 > *{ min-height:0; }
.ct-nativo .overflow-y-auto{ overflow-y:auto !important; min-height:0; }