/* =====================================================================
   Bertoldi Gestão Jurídica · identidade visual própria (30/10/2026)
   Camada exclusivamente visual, carregada depois de app.css.
   Não altera dados, rotas nem funcionalidades. Para voltar ao visual
   anterior basta remover o <link> de assets/tema.css no layout.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap');

:root{
  --navy:#0A2463; --navy2:#1440A8;
  --ouro:#38BDF8; --ouro2:#0EA5E9;          /* destaque passa a ser azul-ciano */
  --creme:#EEF4FF;
  --fundo:#F3F6FC; --card:#FFFFFF; --borda:#DDE6F3; --texto:#0F1B33; --mudo:#64748B;
  --azul:#1D5BFF;
  --eletrico:#1D5BFF; --ciano:#38BDF8; --abismo:#061A44;
  --grad-az:linear-gradient(135deg,#1D5BFF 0%,#0B3FD1 100%);
  --grad-linha:linear-gradient(90deg,#1D5BFF 0%,#38BDF8 100%);
  --raio:16px;
  --sombra:0 1px 2px rgba(10,36,99,.05),0 10px 28px -16px rgba(10,36,99,.22);
  --fonte-tit:'Sora',Inter,system-ui,sans-serif;
}

body{
  background:
    radial-gradient(1200px 500px at 100% -10%,rgba(56,189,248,.10),transparent 60%),
    radial-gradient(900px 420px at 20% 0%,rgba(29,91,255,.07),transparent 60%),
    var(--fundo);
  background-attachment:fixed;
}
h1,h2,h3{font-family:var(--fonte-tit);letter-spacing:-.2px}
h2{font-size:17px;font-weight:600}
h3{font-size:14.5px;font-weight:600}

/* ---------- Menu lateral ---------- */
.sidebar{
  background:
    radial-gradient(260px 180px at 0% 0%,rgba(56,189,248,.18),transparent 70%),
    linear-gradient(180deg,#061A44 0%,#0A2463 55%,#0D2F80 100%);
  color:#C7D5F0;
  box-shadow:1px 0 0 rgba(255,255,255,.04),6px 0 24px -12px rgba(6,26,68,.6);
}
.sidebar:after{ /* trama de pontos discreta */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:14px 14px;
}
.sidebar>*{position:relative;z-index:1}
.marca{border-bottom:1px solid rgba(255,255,255,.07)}
.sidebar nav{padding:6px 10px 14px}
.sidebar nav a,.sidebar-rodape a{border-radius:10px;padding:8px 12px;color:#C7D5F0;font-size:13.5px;transition:background .15s,color .15s}
.sidebar nav a .mi,.sidebar-rodape a .mi{font-size:19px;color:#8FB3F5}
.sidebar nav a:hover,.sidebar-rodape a:hover{background:rgba(56,189,248,.10);color:#fff}
.sidebar nav a:hover .mi{color:#BFE6FF}
.sidebar nav a.ativo{background:linear-gradient(90deg,rgba(56,189,248,.24),rgba(56,189,248,.04));color:#fff;font-weight:600}
.sidebar nav a.ativo:before{content:"";position:absolute;left:-10px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--ciano);box-shadow:0 0 12px var(--ciano)}
.sidebar nav a.ativo .mi{color:var(--ciano)}
.sidebar .badge{background:#F43F5E}
.sidebar-rodape{border-top:1px solid rgba(255,255,255,.07)}
.sidebar nav::-webkit-scrollbar{width:6px}.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:6px}

/* Seções do menu lateral (31/10/2026): o título vem do atributo data-grupo gerado no app/layout.php e respeita as permissões de cada usuário */
.sidebar nav a.grupo-ini{margin-top:26px}
.sidebar nav a.grupo-ini:after{content:attr(data-grupo);position:absolute;left:12px;top:-19px;font-size:10px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:#6F8FC9;pointer-events:none;white-space:nowrap}
.menu-mini .sidebar nav a:after{content:none!important}
.menu-mini .sidebar nav a.grupo-ini{margin-top:14px;box-shadow:0 -7px 0 -6px rgba(255,255,255,.12)}
@media (max-width:760px){.menu-mini .sidebar nav a.grupo-ini:after{content:attr(data-grupo)!important}.menu-mini .sidebar nav a.grupo-ini{margin-top:26px;box-shadow:none}}

/* ---------- Barra superior ---------- */
.topo{height:62px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(221,230,243,.9);box-shadow:0 6px 20px -18px rgba(10,36,99,.5)}
.busca-global{background:#fff;border:1px solid var(--borda);border-radius:12px;box-shadow:inset 0 1px 2px rgba(10,36,99,.04);transition:border-color .15s,box-shadow .15s}
.busca-global:focus-within{border-color:#9DBBFF;box-shadow:0 0 0 4px rgba(29,91,255,.10)}
.busca-global .mi{color:var(--eletrico)}
.ico:hover{background:#EEF4FF;color:var(--eletrico)}
.usuario-btn{padding:4px 10px 4px 4px;border:1px solid var(--borda);border-radius:999px;background:#fff}
.usuario-btn:hover{border-color:#B9CCF2}
.drop-menu{border-radius:14px;border-color:var(--borda);box-shadow:0 18px 40px -12px rgba(10,36,99,.28)}
.drop-menu a:hover{background:#EEF4FF;color:var(--eletrico)}

/* ---------- Botões ---------- */
.btn{background:var(--grad-az);border-radius:10px;box-shadow:0 6px 16px -8px rgba(29,91,255,.65);transition:transform .12s,box-shadow .15s,filter .15s}
.btn:hover{background:var(--grad-az);filter:brightness(1.08);box-shadow:0 10px 22px -10px rgba(29,91,255,.8)}
.btn:active{transform:translateY(1px)}
.btn.sec{background:#fff;color:var(--navy);border:1px solid var(--borda);box-shadow:none}
.btn.sec:hover{background:#F2F6FF;border-color:#B9CCF2;filter:none}
.btn.ouro{background:linear-gradient(135deg,#38BDF8,#0EA5E9);color:#06224F}
.btn.verde{background:var(--verde);box-shadow:none} .btn.vermelho{background:var(--vermelho);box-shadow:none}

/* ---------- Cartões e indicadores ---------- */
.card,.kpi,.tabela-wrap{border-color:#E3EAF5;border-radius:var(--raio);box-shadow:var(--sombra)}
.card{position:relative}
.card:before{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;border-radius:0 0 3px 3px;background:var(--grad-linha);opacity:.9}
.kpi{position:relative;overflow:hidden;padding:16px 18px 16px 20px;background:linear-gradient(160deg,#FFFFFF 55%,#F2F7FF 100%)}
.kpi:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--grad-linha)}
.kpi:after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.16),transparent 70%)}
.kpi span{font-size:12px;text-transform:uppercase;letter-spacing:.6px;font-weight:600;color:#6B7FA3}
.kpi strong{font-family:var(--fonte-tit);font-size:28px;font-weight:600;color:var(--navy);letter-spacing:-.5px}
.kpi strong a{color:inherit}
.kpi.neg strong{color:var(--vermelho)} .kpi.pos strong{color:var(--verde)}

/* ---------- Abas, chips, tabelas ---------- */
.abas{border-bottom-color:var(--borda)}
.abas a.ativo{color:var(--eletrico);border-color:var(--eletrico)}
.abas a em{background:#E8F0FF;color:var(--navy)}
.chip{border-color:var(--borda);border-radius:999px}
.chip:hover{border-color:#B9CCF2;color:var(--navy)}
.chip.ativo{background:var(--grad-az);border-color:transparent;color:#fff;box-shadow:0 4px 12px -6px rgba(29,91,255,.7)}
.t th{background:#F5F8FE;color:#5B6F94;letter-spacing:.7px;border-bottom-color:#E3EAF5}
.t td{border-bottom-color:#EEF2F9}
.t tr:hover td{background:#F2F7FF}
.tag.nova,.tag.receita{background:#E3EDFF;color:var(--eletrico)}
.paginacao a{border-radius:8px}
.paginacao a:hover{border-color:#9DBBFF;color:var(--eletrico)}
input,select,textarea{border-radius:10px;background:#FAFCFF}
input:focus,select:focus,textarea:focus{border-color:#7FA5FF;box-shadow:0 0 0 4px rgba(29,91,255,.12)}
.barra input,.barra select{border-radius:10px}
.seg{background:#E9F0FC;border-radius:10px}
.alerta{border-radius:12px;border-color:#C9D8F2;background:#F5F9FF;color:#0F2B5F}
.alerta.aviso{background:#FFF8E6}
.modal-caixa{border-radius:18px}
.modal-cab{background:linear-gradient(180deg,#F6F9FF,#fff)}
.secao-tit h2{font-size:18px}

/* ---------- Mini calendário e agenda ---------- */
.minical td a:hover{background:#E8F0FF}
.minical td.hoje a{background:var(--grad-az);box-shadow:0 0 0 3px rgba(56,189,248,.25),0 6px 14px -6px rgba(29,91,255,.8)}
.minical td.sel a{outline-color:var(--ciano)}
.minical td i{background:#F43F5E}
.cal-grade{border-radius:var(--raio);border-color:#E3EAF5}
.cal-grade .cab{background:#F5F8FE;color:#5B6F94;font-weight:600;letter-spacing:.4px;text-transform:uppercase;font-size:11px}
.cal-dia.hoje{background:linear-gradient(180deg,#EEF5FF,#fff)}
.cal-dia.hoje .n{background:var(--grad-az)}
.ev{border-radius:7px}
.semana .col{border-radius:14px}
.semana .col.hoje{border-color:var(--eletrico);box-shadow:0 0 0 3px rgba(29,91,255,.08)}
/* Agenda: painel de filtros passa para a direita do calendário */
.pg-agenda .agenda{grid-template-columns:minmax(0,1fr) 250px}
.pg-agenda .agenda>div:first-child{order:2}

/* ---------- Processos e tarefas: lista em primeiro, gráficos ao final ---------- */
.pg-processos .conteudo,.pg-tarefas .conteudo{display:flex;flex-direction:column}
.pg-processos .conteudo>.grade.g3+.card{order:10;margin-top:18px}
.pg-tarefas .conteudo>.grade.g2.mb{order:10;margin-top:18px}

/* ---------- Kanban, ficha e trilha ---------- */
.kcol{background:#EAF0FA;border-radius:14px}
.kcard{border-radius:12px}
.kcard:hover{border-color:#9DBBFF;box-shadow:0 8px 18px -12px rgba(29,91,255,.6)}
.klista.sobre{background:rgba(56,189,248,.16)}
.etapas-trilha span{border-radius:999px}
.etapas-trilha span.ok{background:#DCEBFF;color:#123A8F}
.etapas-trilha span.atual{background:var(--grad-az)}
.timeline{border-left-color:#D6E3F7}
.timeline .it:before{background:var(--eletrico);box-shadow:0 0 0 3px rgba(56,189,248,.25)}
.barras .b div i{background:var(--grad-linha)}

/* ---------- Tela inicial (Início) ---------- */
.pn-hero{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 26px;margin-bottom:18px;border-radius:20px;color:#fff;
  background:radial-gradient(420px 220px at 92% 0%,rgba(56,189,248,.45),transparent 70%),linear-gradient(120deg,#061A44 0%,#0A2463 45%,#1440A8 100%);
  box-shadow:0 18px 40px -24px rgba(6,26,68,.9)}
.pn-hero:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%)}
.pn-hero>*{position:relative;z-index:1}
.pn-hero small{display:block;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:#9CC9FF;margin-bottom:6px}
.pn-hero h1{font-size:24px;margin:0 0 4px;color:#fff}
.pn-hero p{margin:0;color:#BFD3F5;font-size:13.5px}
.pn-acoes{display:flex;gap:10px;flex-wrap:wrap}
.pn-acao{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;color:#fff!important;font-weight:500;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .15s,transform .12s}
.pn-acao:hover{background:rgba(255,255,255,.2)}
.pn-acao.forte{background:#fff;color:var(--navy)!important;border-color:#fff}
.pn-acao.forte .mi{color:var(--eletrico)}
.pn-kpis{margin-bottom:18px}
.pn-kpis .kpi{padding-left:66px;min-height:96px;justify-content:center}
.pn-kpis .kpi:nth-child(1):before,.pn-kpis .kpi:nth-child(2):before,.pn-kpis .kpi:nth-child(3):before,.pn-kpis .kpi:nth-child(4):before{
  left:16px;top:50%;bottom:auto;width:36px;height:36px;margin-top:-18px;border-radius:11px;
  font-family:'Material Symbols Outlined';font-size:20px;line-height:36px;text-align:center;color:#fff;background:var(--grad-az);box-shadow:0 6px 14px -6px rgba(29,91,255,.8)}
.pn-kpis .kpi:nth-child(1):before{content:"task_alt"}
.pn-kpis .kpi:nth-child(2):before{content:"bolt";background:linear-gradient(135deg,#38BDF8,#1D5BFF)}
.pn-kpis .kpi:nth-child(3):before{content:"pending_actions";background:linear-gradient(135deg,#0A2463,#1440A8)}
.pn-kpis .kpi:nth-child(4):before{content:"mark_email_unread";background:linear-gradient(135deg,#0EA5E9,#0369A1)}
.pn-corpo{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.pn-corpo .secao-tit{margin-top:0}
.pn-lateral{display:flex;flex-direction:column;gap:16px}
.pn-lateral .card h3 span{font-family:Inter,sans-serif;font-weight:400}
.pn-lateral .lista-simples li{font-size:13px}
@media (max-width:1100px){.pn-corpo{grid-template-columns:1fr}}
@media (max-width:760px){.pn-hero{padding:18px}.pn-hero h1{font-size:20px}.pn-kpis .kpi{padding-left:62px}}

/* ---------- Login ---------- */
.tela-login{background:#EEF4FF}
.login-lado{background:radial-gradient(520px 320px at 100% 0%,rgba(56,189,248,.35),transparent 70%),linear-gradient(150deg,#061A44 0%,#0A2463 50%,#1440A8 100%)}
.login-lado h1{color:#fff}
.login-lado p{color:#BFD3F5}
.login-form .card{border-radius:20px}

/* ---------- Lista de tarefas em cartões (redesenho 30/10/2026) ---------- */
.tabela-wrap:has(> .t-tarefas){background:transparent;border:0;box-shadow:none;overflow:visible;border-radius:0}
table.t-tarefas,.t-tarefas>tbody{display:block;width:100%}
.t-tarefas>thead{display:none}
.t-tarefas>tbody>tr{
  display:grid;grid-template-columns:76px minmax(0,1fr) 170px 150px 92px 108px;
  grid-template-areas:"mk tit ag pz eq ac" "mk pt ag pz eq ac";
  align-items:center;column-gap:16px;row-gap:3px;position:relative;
  background:#fff;border:1px solid #E3EAF5;border-left:4px solid #BFD4FF;border-radius:14px;
  padding:12px 16px 12px 12px;margin-bottom:8px;box-shadow:0 1px 2px rgba(10,36,99,.04);
  transition:border-color .15s,box-shadow .15s,transform .12s}
.t-tarefas.sem-partes>tbody>tr{grid-template-areas:"mk tit ag pz eq ac"}
.t-tarefas>tbody>tr:hover{border-color:#9DBBFF;border-left-color:var(--eletrico);box-shadow:0 10px 24px -16px rgba(29,91,255,.55);transform:translateY(-1px)}
.t-tarefas>tbody>tr:has(.dt.hoje){border-left-color:#F59E0B}
.t-tarefas>tbody>tr:has(.dt.atrasado){border-left-color:#EF4444;background:linear-gradient(90deg,#FFF6F6,#fff 30%)}
.t-tarefas>tbody>tr.concluida{border-left-color:#22C55E;background:#FAFCFF}
.t-tarefas>tbody>tr>td{padding:0;border:0;background:transparent!important;min-width:0}
.t-tarefas>tbody>tr>td:nth-child(1){grid-area:mk;display:flex;align-items:center;gap:6px}
.t-tarefas>tbody>tr>td:nth-child(2){grid-area:tit}
.t-tarefas:not(.sem-partes)>tbody>tr>td:nth-child(3){grid-area:pt;color:var(--mudo)}
.t-tarefas:not(.sem-partes)>tbody>tr>td:nth-child(4),.t-tarefas.sem-partes>tbody>tr>td:nth-child(3){grid-area:ag}
.t-tarefas:not(.sem-partes)>tbody>tr>td:nth-child(5),.t-tarefas.sem-partes>tbody>tr>td:nth-child(4){grid-area:pz}
.t-tarefas:not(.sem-partes)>tbody>tr>td:nth-child(6),.t-tarefas.sem-partes>tbody>tr>td:nth-child(5){grid-area:eq;display:flex;justify-content:flex-end}
.t-tarefas>tbody>tr>td.acoes{grid-area:ac;display:flex;justify-content:flex-end;gap:2px;opacity:.45}
.t-tarefas>tbody>tr:hover>td.acoes{opacity:1}
.t-tarefas .tit-tarefa{font-size:14px;letter-spacing:.1px;color:var(--navy)}
.t-tarefas>tbody>tr>td:nth-child(1) input[type=checkbox]{width:19px;height:19px;margin:0;accent-color:var(--eletrico);cursor:pointer;flex:none}
.t-tarefas .estrela,.t-tarefas .exc{width:24px;height:24px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.t-tarefas .estrela:hover,.t-tarefas .exc:hover{background:#EEF4FF}
/* datas em etiquetas com rótulo */
.t-tarefas td:has(> .dt){display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.t-tarefas:not(.sem-partes)>tbody>tr>td:nth-child(4):before,.t-tarefas.sem-partes>tbody>tr>td:nth-child(3):before{content:"Agendado para"}
.t-tarefas:not(.sem-partes)>tbody>tr>td:nth-child(5):before,.t-tarefas.sem-partes>tbody>tr>td:nth-child(4):before{content:"Prazo fatal"}
.t-tarefas td:has(> .dt):before{font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:#8A9BBB}
.t-tarefas td:has(> .dt:empty):before{content:none!important}
.t-tarefas .dt{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:#EEF4FF;color:var(--navy);font-size:12.5px;font-weight:600;white-space:nowrap}
.t-tarefas .dt:before{font-family:'Material Symbols Outlined';font-size:15px;font-weight:normal;line-height:1;content:"event"}
.t-tarefas:not(.sem-partes)>tbody>tr>td:nth-child(5) .dt:before,.t-tarefas.sem-partes>tbody>tr>td:nth-child(4) .dt:before{content:"flag"}
.t-tarefas .dt:empty{display:none}
.t-tarefas .dt.hoje{background:#FEF3C7;color:#B45309}
.t-tarefas .dt.atrasado{background:#FEE2E2;color:#B91C1C}
.t-tarefas tr.concluida .dt{background:#ECFDF3;color:#15803D}
.t-tarefas>tbody>tr:has(td.vazio),.t-tarefas>tbody>tr:has(td[colspan]){display:block;border-left-width:1px}
.t-tarefas td.vazio,.t-tarefas td[colspan]{display:block!important}
@media (max-width:1100px){
  .t-tarefas>tbody>tr,.t-tarefas.sem-partes>tbody>tr{grid-template-columns:70px minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"mk tit tit" "mk pt pt" "mk ag pz" "mk eq ac";row-gap:8px}
  .t-tarefas.sem-partes>tbody>tr{grid-template-areas:"mk tit tit" "mk ag pz" "mk eq ac"}
  .t-tarefas>tbody>tr>td.acoes{opacity:1}
  .t-tarefas>tbody>tr>td:nth-child(n){justify-content:flex-start}
  .t-tarefas>tbody>tr>td.acoes{justify-content:flex-end}
}


/* ---------- Barra superior, lado direito: identidade própria (01/11/2026) ----------
   Ícones reunidos numa cápsula única, contadores dentro da cápsula (não em bolhas no canto),
   botão Criar em degradê com ícone emoldurado e usuário com avatar quadrado em anel ciano.
   Só aparência: nenhum item, link ou função foi retirado. */
.topo-dir{gap:0}
.topo-dir > a.ico,
.topo-dir > .drop > button.ico{
  height:40px;min-width:46px;padding:0 12px;gap:6px;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#FFFFFF 0%,#F3F7FF 100%);border:1px solid #D6E2F7;border-radius:0;margin-left:-1px;
  color:#1E3A7B;transition:background .15s,color .15s,box-shadow .15s
}
.topo-dir > a.ico:first-child{border-radius:12px 0 0 12px;margin-left:0}
.topo-dir > .drop > button.ico{border-radius:0 12px 12px 0}
.topo-dir > a.ico:hover,
.topo-dir > .drop > button.ico:hover{background:#EAF2FF;color:#1D5BFF;box-shadow:inset 0 -2px 0 #22D3EE}
.topo-dir > a.ico .mi,
.topo-dir > .drop > button.ico .mi{font-size:21px}
.topo-dir .ico .badge{position:static;min-width:0;padding:2px 7px;border-radius:7px;font-size:11px;font-weight:700;line-height:1.25;box-shadow:none}
.topo-dir > .drop > button.ico .badge{background:#FFE4EA!important;color:#E11D48!important}
#presencaTopo .badge{background:#DCFCE7!important;color:#15803D!important}
#presencaTopo .badge::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#22C55E;margin-right:4px;vertical-align:1px;box-shadow:0 0 0 2px rgba(34,197,94,.25)}
.topo-dir > .drop:has(> button.btn){margin-left:14px}
.topo-dir > .drop > button.btn{
  height:40px;padding:0 10px 0 7px;border-radius:12px;border:0;gap:7px;font-weight:600;letter-spacing:.2px;
  background:linear-gradient(135deg,#0A2463 0%,#1D5BFF 62%,#22D3EE 135%);
  box-shadow:0 10px 20px -12px rgba(29,91,255,.9),inset 0 1px 0 rgba(255,255,255,.22)
}
.topo-dir > .drop > button.btn:hover{filter:brightness(1.08)}
.topo-dir > .drop > button.btn .mi:first-child{background:rgba(255,255,255,.18);border-radius:8px;padding:3px;font-size:18px}
.topo-dir > .drop > button.btn .mi:last-child{font-size:18px;opacity:.85;border-left:1px solid rgba(255,255,255,.28);padding-left:6px}
.topo-dir > .drop:has(> .usuario-btn){margin-left:12px;padding-left:12px;border-left:1px solid #DDE6F3}
.topo-dir .usuario-btn{border:0;background:transparent;padding:3px 4px 3px 3px;border-radius:12px;gap:10px}
.topo-dir .usuario-btn:hover{background:#EEF4FF}
.topo-dir .usuario-btn .avatar{width:36px;height:36px;border-radius:11px;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 4px #22D3EE}
.topo-dir .usuario-btn > span:not(.mi){font-weight:600;color:#0A2463}
.topo-dir .usuario-btn > .mi{width:24px;height:24px;border-radius:8px;background:#EEF4FF;color:#1D5BFF;font-size:18px;display:inline-flex;align-items:center;justify-content:center}