/* Componentes das telas — cartões, listas, chat. */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cartao-clicavel { text-align: left; width: 100%; transition: border-color var(--transicao); }
.cartao-clicavel:active { border-color: var(--laranja); }

.cartao-titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

.secao { display: flex; flex-direction: column; gap: 10px; }
.secao-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.secao-topo h2 { display: flex; align-items: center; gap: 8px; }

.contador {
  font-size: 14px;
  color: var(--apoio);
  background: var(--superficie-alta);
  border-radius: 20px;
  padding: 1px 9px;
}

/* Números do painel */
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.numero { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 13px 14px; }
.numero b { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; }
.numero span { font-size: 14px; color: var(--apoio); }
.numero.alerta b { color: var(--laranja); }

@media (min-width: 560px) {
  .numeros { grid-template-columns: repeat(4, 1fr); }
}

/* Etiquetas */
.etiqueta {
  display: inline-block;
  font-size: 14px;
  border-radius: 20px;
  padding: 2px 10px;
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  color: var(--apoio);
  white-space: nowrap;
}
.etiqueta.laranja { background: rgba(226, 87, 31, 0.16); border-color: rgba(226, 87, 31, 0.42); color: var(--branco); }
.etiqueta.cheia { background: var(--laranja); border-color: var(--laranja); color: var(--branco); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }

/* Barra de progresso */
.progresso { height: 6px; border-radius: 3px; background: var(--superficie-alta); overflow: hidden; }
.progresso > i { display: block; height: 100%; background: var(--laranja); transition: width var(--transicao); }

/* Lista de itens com marcador à esquerda */
.item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 13px 14px;
}
.item-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.item-corpo p { overflow-wrap: anywhere; }
.item.feito .item-titulo { color: var(--tenue); text-decoration: line-through; }
.item-titulo { font-size: 15px; font-weight: 560; }

.marcador {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 7px;
  border: 1.5px solid var(--borda);
  background: var(--superficie-alta);
  display: grid;
  place-items: center;
  font-size: 14px;
  color: transparent;
  transition: background var(--transicao), border-color var(--transicao);
}
.marcador.marcado { background: var(--laranja); border-color: var(--laranja); color: var(--branco); }

.item-acoes { display: flex; gap: 4px; align-items: center; }
.acao-mini {
  font-size: 14px;
  color: var(--apoio);
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  white-space: nowrap;
}
.acao-mini:active { border-color: var(--laranja); }

/* Vazio */
.vazio {
  text-align: center;
  color: var(--apoio);
  font-size: 14px;
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

/* Cabeçalho de aula/curso aberto */
.migalha { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--apoio); }
.migalha button { color: var(--laranja); font-size: 14px; }

.blocos-texto {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 15px;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 320px;
  overflow-y: auto;
}

/* Chat com a Isaura */
.chat { display: flex; flex-direction: column; gap: 12px; }
.fala { max-width: 88%; border-radius: 14px; padding: 12px 14px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.fala.minha { align-self: flex-end; background: var(--laranja); border-bottom-right-radius: 5px; }
.fala.dela { align-self: flex-start; background: var(--superficie); border: 1px solid var(--borda); border-bottom-left-radius: 5px; white-space: pre-wrap; }
.fala-fontes { margin-top: 8px; font-size: 14px; color: var(--apoio); }

.chat-envio { display: flex; gap: 10px; align-items: flex-end; }
.chat-envio textarea { min-height: 48px; max-height: 140px; }
.chat-envio .botao-principal { flex: 0 0 auto; padding: 13px 18px; }

/* Captura rápida */
.captura-caixa textarea { min-height: 96px; font-size: 16px; }
.captura-item { border-left: 3px solid var(--laranja); }

.lista-exemplos { margin: 4px 0 0; padding-left: 20px; color: var(--tenue); font-size: 14px; }
.lista-exemplos li { margin-bottom: 3px; }

#btn-voz.gravando { border-color: var(--laranja); color: var(--laranja); }

/* "Já assisti isso?" — a caixa do topo da tela inicial */
.destaque-verificar { border-color: rgba(226, 87, 31, 0.45); }
.destaque-verificar form { display: flex; flex-direction: column; gap: 10px; }
.destaque-verificar textarea { min-height: 62px; }

.resposta {
  margin-top: 12px;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda);
  background: var(--superficie-alta);
  padding: 14px 15px;
}
.resposta-titulo { font-size: 17px; font-weight: 650; margin-bottom: 4px; }
.resposta-sim { border-left-color: var(--laranja); }
.resposta-sim .resposta-titulo { color: var(--laranja); }
.resposta-nao { border-left-color: rgba(255, 255, 255, 0.5); }
.resposta-nova { border-left-color: var(--borda); }

.lista-anotacoes { margin: 6px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.55; }
.lista-anotacoes li { margin-bottom: 6px; overflow-wrap: anywhere; }

/* Botões de escolha entre dois modos */
.escolha.ativa { border-color: var(--laranja); color: var(--laranja); }

.erro-grave { border-left: 3px solid var(--laranja); }

/* Bloco dobrado de campos opcionais */
.dobra { border-top: 1px solid var(--borda); padding-top: 10px; }
.dobra > summary {
  cursor: pointer;
  color: var(--laranja);
  font-size: 14px;
  padding: 4px 0;
  list-style: none;
}
.dobra > summary::-webkit-details-marker { display: none; }
.dobra > summary::before { content: '+ '; }
.dobra[open] > summary::before { content: '− '; }
.dobra-corpo { display: flex; flex-direction: column; gap: var(--gap); padding-top: 12px; }

/* Ajustes */
.opcao { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }
.opcao > span { font-size: 15px; }

.interruptor {
  flex: 0 0 48px;
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  position: relative;
  transition: background var(--transicao);
}
.interruptor::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--apoio);
  transition: transform var(--transicao), background var(--transicao);
}
.interruptor.ligado { background: rgba(226, 87, 31, 0.3); border-color: var(--laranja); }
.interruptor.ligado::after { transform: translateX(20px); background: var(--laranja); }

/* Girando — indicador de processamento */
.girando {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid var(--borda);
  border-top-color: var(--laranja);
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes girar { to { transform: rotate(360deg); } }