/* ============================================================ REDES.LAB ON · Instrumentos ("O que a Rede pergunta") Gaveta de detalhe colada em cada card + conforto de toque e de leitura no celular. Carregada pelo módulo screens_on (injeção no ); o index.html também pode linkar. ============================================================ */ .inst-item{display:flex;flex-direction:column;min-width:0;} /* o card inteiro é área de toque, com resposta visual clara */ .inst-row{min-height:64px;cursor:pointer;} .inst-row:focus-visible{outline:2.5px solid var(--primary);outline-offset:2px;} .inst-row.aberta{border-color:var(--primary);box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 12%,transparent);} .inst-row.aberta:hover{transform:none;} .inst-row.futura{opacity:.74;} .inst-row.futura:hover,.inst-row.futura:focus-visible{opacity:1;} /* seta que gira: fechado aponta para o lado, aberto aponta para baixo */ .inst-chev{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:var(--body-soft);transition:transform .28s ease,background .15s ease,color .15s ease;} .inst-row:hover .inst-chev,.inst-row:focus-visible .inst-chev{color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent);} .inst-row.aberta .inst-chev{transform:rotate(90deg);color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent);} /* gaveta: expande logo abaixo do card clicado, com transição suave */ .inst-gaveta{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease;} .inst-gaveta.aberta{grid-template-rows:1fr;} .inst-gaveta-inner{overflow:hidden;min-height:0;} /* painel de detalhe dentro da gaveta */ .inst-detalhe{margin:8px 2px 6px;padding:20px 22px;border-color:var(--rule);opacity:0;transform:translateY(-6px);transition:opacity .26s ease .06s,transform .26s ease .06s;} .inst-gaveta.aberta .inst-detalhe{opacity:1;transform:none;} /* celular: painel confortável em 390px, nada cortado */ @media (max-width:560px){ .inst-row{padding:16px 52px 16px 16px;} .inst-chev{position:absolute;right:10px;top:50%;margin-top:-15px;} .inst-detalhe{margin:6px 0 4px;padding:16px 14px;} .inst-detalhe .bal-grid{grid-template-columns:1fr 1fr;} .inst-detalhe .icon-btn{width:36px;height:36px;flex:0 0 auto;} } @media (max-width:400px){ .inst-detalhe .bal-grid{grid-template-columns:1fr;} } /* respeita quem prefere menos movimento */ @media (prefers-reduced-motion:reduce){ .inst-gaveta,.inst-chev,.inst-detalhe{transition:none;} }