/* Central: dot (fix/central-ui-bento, 2026-11-02). Carregado depois de styles.css: as regras daqui sobrepõem as de lá. */

/* Ficha do DOT (#dot/<id>): herói e grade bento de 12 colunas. Cada bloco é um cartão
   (.dot-cartao, o mesmo .panel do protótipo); o título mora dentro dele. */
.dot-heroi{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;background:var(--cartao);border:1px solid var(--borda);border-radius:22px;padding:22px 24px;margin-top:12px}
.dot-heroi-txt{min-width:0}
.dot-heroi .eyebrow{margin:0 0 4px}
.dot-heroi h1.t{font-size:30px;margin:0 0 2px;overflow-wrap:anywhere}

.dot-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:16px}
.dot-bento>*{min-width:0}
.dot-s12{grid-column:span 12}
.dot-s7{grid-column:span 7}
.dot-s5{grid-column:span 5}
.dot-bloco{min-width:0}
.dot-bloco>.dot-cartao{height:100%;margin:0}
.dot-cartao{margin:0;min-width:0;background:var(--cartao);border:1px solid var(--borda);border-radius:20px;padding:18px 20px}
.dot-cartao-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.dot-cartao-h h2.s{margin:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dot-cartao-sub{margin:0 0 12px}
.dot-cartao ul{margin:0;padding-left:18px;color:var(--texto-2)}
.dot-cartao li{margin:6px 0}
.dot-gerenciar{min-height:34px;padding:6px 14px;gap:8px}
.dot-gerenciar svg{flex:none}
.dot-fim{margin-top:24px}
.dot-fim .btn.q:hover{color:var(--perigo)}

/* a rotina ocupa a largura da ficha: os campos viram duas colunas */
.rotinas-painel .rot-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.rotinas-painel .rot-campos>label:first-child,.rotinas-painel .rot-campos>.nd-erro{grid-column:1/-1}

@media (max-width:1100px){
  .dot-s7,.dot-s5{grid-column:span 12}
}
@media (max-width:700px){
  .rotinas-painel .rot-campos{grid-template-columns:minmax(0,1fr)}
}
/* os switches da ficha: no celular, uma área de toque de 40px de altura (o desenho segue 44x26) */
@media (max-width:639px){
  .sw::before{content:"";position:absolute;inset:-7px 0}
  /* o "mostrar" do prompt montado: 40px de toque, com a margem negativa para o cabeçalho não crescer */
  .dot-cartao-h .linkbtn{padding:12px 6px;margin:-12px -6px}
}
@media (max-width:520px){
  .dot-heroi{grid-template-columns:minmax(0,1fr);justify-items:start;gap:16px;padding:18px 16px;border-radius:20px}
  .dot-heroi .dot{--s:64px !important}
  .dot-heroi .btn{width:100%;justify-content:center}
  .dot-cartao{padding:16px}
}

/* o título da lista de rotinas no formulário "Nova rotina" (antes, estilo inline) */
.rotinas-painel .rot-nova-h{font-size:15px;margin:16px 0 0}
/* o texto de estado do prompt montado: 12px acima, dentro do cartão */
.dot-cartao .dot-topo12{margin-top:12px}
/* (rodada 8) a lista de memórias não tem marcador (o li é flex, e o flex tira o disco): zera o recuo de 18px
   que a lista herdava de .dot-cartao ul, e o texto fica alinhado à margem do rótulo "O que lembra da empresa" */
.dot-cartao .mem-lista{list-style:none;padding-left:0}
/* (cui7) cada memória é uma linha: o texto e o × lado a lado (o × não cai sob o texto); toque de 40px, com a margem negativa */
.dot-cartao .mem-lista li{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.dot-cartao .mem-texto{flex:1;min-width:0;overflow-wrap:anywhere}
.dot-cartao .mem-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-10px -10px -10px 0;padding:0;font-size:20px}
.dot-cartao .mem-x:focus-visible{outline:2px solid var(--destaque);outline-offset:-2px;border-radius:50%}