/* Tarea: formulario, calendario chico y confirmación. */

.pc-tarea .form {
  left: 0;
  top: 0;
  width: 396px;
  height: 182px;
  padding: 20px;
}

.pc-tarea .cab {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 20px;
  color: var(--tinta-2);
}

.pc-tarea .cab b {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
}

.pc-tarea .cab .t-mini {
  margin-left: auto;
}

.pc-tarea .rot {
  margin: 12px 0 6px;
}

.pc-tarea .slot {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--fundo);
  box-shadow: 0 0 0 1px var(--linha-2) inset;
  transition:
    box-shadow 0.3s,
    background-color 0.3s;
}

.pc-tarea .slot.foco {
  background: var(--papel);
  box-shadow: 0 0 0 1.5px var(--tinta) inset, 0 0 0 4px rgba(16, 54, 80, 0.08);
}

.pc-tarea .slot .chip {
  display: none;
  height: 30px;
  padding: 0 12px 0 10px;
  color: var(--tinta);
  background: var(--papel);
  box-shadow: 0 0 0 1px var(--linha-2) inset, 0 1px 2px rgba(10, 30, 46, 0.06);
}

.pc-tarea .slot .chip.on {
  display: inline-flex;
  animation: pct-chip 0.45s var(--mola);
}

@keyframes pct-chip {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

.pc-tarea .slot .chip .ic {
  color: var(--tinta-2);
}

.pc-tarea .mais {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--texto-3);
  font-size: 13px;
  transition: transform 0.16s var(--saida);
}

.pc-tarea .slot.tem .mais .ph {
  display: none;
}

.pc-tarea .fila {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.pc-tarea .data {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 196px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--texto-3);
  background: var(--papel);
  box-shadow: 0 0 0 1px var(--linha-2) inset;
  transition:
    box-shadow 0.3s,
    transform 0.16s var(--saida);
}

.pc-tarea .data .ic {
  color: var(--tinta-2);
}

.pc-tarea .data.foco {
  box-shadow: 0 0 0 1.5px var(--tinta) inset, 0 0 0 4px rgba(16, 54, 80, 0.08);
}

.pc-tarea .data .val {
  display: none;
  font-weight: 600;
  color: var(--texto);
}

.pc-tarea .data.tem .ph {
  display: none;
}

.pc-tarea .data.tem .val {
  display: inline;
  animation: pct-val 0.4s var(--saida);
}

@keyframes pct-val {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.pc-tarea .asignar {
  margin-left: auto;
  background: var(--neblina);
  color: var(--texto-3);
  box-shadow: none;
}

.pc-tarea .asignar.pronto {
  background: var(--tinta);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 1px 2px rgba(10, 30, 46, 0.25);
}

.pc-tarea .asignar .a,
.pc-tarea .asignar .b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pc-tarea .asignar .b,
.pc-tarea .asignar.feito .a {
  display: none;
}

.pc-tarea .asignar.feito .b {
  display: inline-flex;
}

.pc-tarea .asignar.feito {
  background: var(--certo-claro);
  color: var(--certo);
  box-shadow: none;
}

/* ---------- calendario ---------- */

.pc-tarea .cal {
  left: 20px;
  top: 168px;
  width: 220px;
  padding: 12px;
  border-radius: 12px;
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  transform-origin: 30px 0;
  transition:
    opacity 0.2s,
    transform 0.35s var(--saida);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 2px 6px rgba(10, 30, 46, 0.1),
    0 18px 40px -14px rgba(10, 30, 46, 0.5),
    0 40px 80px -36px rgba(0, 0, 0, 0.6);
}

.pc-tarea .cal.on {
  opacity: 1;
  transform: none;
}

.pc-tarea .cal-topo {
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 4px;
}

.pc-tarea .cal-topo b {
  font-size: 13px;
  font-weight: 600;
}

.pc-tarea .setas {
  margin-left: auto;
  display: flex;
  gap: 8px;
  color: var(--texto-3);
}

.pc-tarea .grade {
  display: grid;
  grid-template-columns: repeat(7, 28px);
  grid-template-rows: 20px 28px 28px;
  margin-top: 6px;
}

.pc-tarea .sem {
  display: grid;
  place-items: center;
  height: 20px;
  font-size: 12px;
  color: var(--texto-3);
}

.pc-tarea .grade .sem {
  align-self: start;
}

.pc-tarea .d {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 13px;
  color: var(--texto);
  transition:
    background-color 0.2s,
    color 0.2s,
    transform 0.16s var(--saida);
}

.pc-tarea .d.fds {
  color: var(--texto-3);
}

.pc-tarea .d.hoje::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--ouro);
}

.pc-tarea .d.hover {
  background: var(--neblina);
}

.pc-tarea .d.sel {
  background: var(--tinta);
  color: #fff;
  font-weight: 600;
}

/* ---------- confirmación ---------- */

.pc-tarea .envio {
  left: 132px;
  top: 170px;
  width: 288px;
  height: 84px;
  padding: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 2px 6px rgba(10, 30, 46, 0.1),
    0 18px 40px -14px rgba(10, 30, 46, 0.5),
    0 40px 80px -36px rgba(0, 0, 0, 0.6);
}

.pc-tarea .env-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 18px;
}

.pc-tarea .env-topo b {
  font-size: 13px;
  font-weight: 600;
}

.pc-tarea .selo {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--certo-claro);
  color: var(--certo);
}

.pc-tarea .env-rodape {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.pc-tarea .env-rodape .t-mini {
  white-space: nowrap;
}

.pc-tarea .pilha {
  display: flex;
  padding-left: 4px;
}

.pc-tarea .av {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: -4px;
  border-radius: 50%;
  font: 700 12px/1 var(--sans);
  color: var(--tinta);
  background: #dce6ee;
  box-shadow: 0 0 0 1.5px var(--papel);
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 0.3s,
    transform 0.5s var(--saida);
}

.pc-tarea .av.on {
  opacity: 1;
  transform: none;
}

.pc-tarea .av.b {
  background: #cbd8e3;
}

.pc-tarea .av.c {
  background: #e6ecf1;
}

.pc-tarea .av.d {
  background: #d3dfe9;
}

.pc-tarea .av.e {
  background: #c1d0dc;
}

.pc-tarea .av.mais43 {
  width: auto;
  padding: 0 6px 0 7px;
  border-radius: 999px;
  background: var(--tinta);
  color: #fff;
  letter-spacing: 0;
}