/* HUB do Grupo ITIBAN: Kiara, numeros da equipe (T-0994). Usa os tokens de app.css; sem estilo inline (CSP).
   Computador: coluna de leitura de ate 860 px. Celular (ate 700 px): alvos de 48 px, campos com 16 px, botoes em coluna e
   historico em cartoes (table.rsp do app.css), sem rolagem lateral. */
.ke-tela{max-width:860px}
.ke-tela>.rule{margin-bottom:12px}
.ke-tela .card{margin-bottom:14px}
.ke-tela .card h3{margin:0 0 6px}
.ke-lista{list-style:none;margin:0;padding:0}
.ke-it{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ke-lista>li:last-child{border-bottom:0}
.ke-tx{flex:1 1 14rem;min-width:0;display:flex;flex-direction:column;gap:3px}
.ke-tx b{font-weight:650;overflow-wrap:anywhere}
.ke-it .ac{display:flex;gap:6px;align-items:center;flex-wrap:wrap;flex:none}
.ke-it .btn{min-height:44px}
.ke-form{max-width:520px}
.ke-form input[type=text],.ke-form input[type=tel]{width:100%;font:inherit;font-size:16px;padding:10px 12px;min-height:44px;border:1px solid var(--bc,#8a8678);border-radius:9px;background:var(--surf);color:var(--txt)}
.ke-form input[type=text]:focus,.ke-form input[type=tel]:focus{outline:none;border-color:#142e4f;box-shadow:0 0 0 3px rgba(20,46,79,.25)}
.ke-form .btn{min-height:44px}
@media(max-width:700px){
  .ke-tela .card{padding:16px}
  .ke-form input[type=text],.ke-form input[type=tel]{min-height:48px}
  .ke-form .btns .btn{width:100%;min-height:48px}
  .ke-it .ac{width:100%;display:grid;grid-template-columns:minmax(0,1fr)}
  .ke-it .ac .btn{width:100%;min-height:48px}
}
/* volta 1 (Afrodite): historico no computador nao quebra "O que", telefone e data no meio; o Nome recebe a sobra. No celular segue o cartao. */
@media(min-width:701px){
  .ke-tela table.rsp td{overflow-wrap:normal;word-break:normal}
  .ke-tela table.rsp td[data-l="O que"],.ke-tela table.rsp td[data-l="Telefone"],.ke-tela table.rsp td[data-l="Quando"]{white-space:nowrap}
}