/* Modo ADM: ferramenta do Caio por cima do site. Cores próprias, fixas, para
   não mudarem quando ele mexe nas cores do site. */
.adm-chave {
  position: fixed; left: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); z-index: 50;
  border: 0; border-radius: 8px; padding: 4px 8px; background: transparent;
  font: 600 .66rem/1 system-ui, sans-serif; letter-spacing: .14em; color: #6E879B; opacity: .45;
}
.adm-chave:hover { opacity: 1; }
body.adm .adm-chave { opacity: 1; background: #14324A; color: #fff; letter-spacing: .02em; }

.adm-porta { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(10, 30, 45, .45); padding: 16px; }
.adm-porta form { display: grid; gap: 12px; width: min(320px, 100%); padding: 22px; border-radius: 16px; background: #fff; color: #14324A; font-family: system-ui, sans-serif; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5); }
.adm-porta input { padding: 12px; border-radius: 10px; border: 1px solid #C9D6E0; font-size: 1.1rem; letter-spacing: .3em; text-align: center; }
.adm-porta div { display: flex; gap: 8px; justify-content: flex-end; }
.adm-erro { margin: 0; min-height: 1.2em; color: #C24E3A; font-size: .9rem; }

.adm-b { border: 0; border-radius: 9px; padding: 8px 12px; background: #008BCE; color: #fff; font: 600 .82rem system-ui, sans-serif; cursor: pointer; }
.adm-b.leve { background: #EEF4F8; color: #14324A; }

.adm-barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; align-items: center; gap: 6px; padding: calc(env(safe-area-inset-top, 0px) + 6px) 10px 6px;
  background: #14324A; color: #fff; font: 500 .8rem system-ui, sans-serif; box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}
.adm-barra::-webkit-scrollbar { display: none; }
.adm-barra > * { flex: none; }
.adm-barra button, .adm-barra select { white-space: nowrap; border: 0; border-radius: 8px; padding: 7px 10px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; cursor: pointer; }
.adm-barra select option { color: #14324A; }
.adm-barra button:disabled { opacity: .4; cursor: default; }
.adm-barra .adm-publicar { background: #74BE47; color: #0E2A12; font-weight: 700; }
.adm-barra .adm-original { background: #fff; color: #14324A; }
.adm-estado { padding: 0 6px; opacity: .8; }
.adm-estado.pendente { color: #BFE6A6; opacity: 1; }
.adm-mola { flex: 1 0 4px; }
body.adm .topo { top: 44px; }
body.adm .tela, body.adm .portas { padding-top: calc(env(safe-area-inset-top, 0px) + 140px); }

body.adm [data-ed] { outline: 1px dashed rgba(0, 139, 206, .55); outline-offset: 2px; border-radius: 3px; cursor: text; }
body.adm [data-ed]:hover { outline-color: #008BCE; background-color: rgba(0, 139, 206, .06); }
body.adm [data-ed]:focus { outline: 2px solid #008BCE; background-color: rgba(0, 139, 206, .08); }

.adm-aviso { position: fixed; left: 50%; bottom: 20px; z-index: 70; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 10px 16px; border-radius: 12px; background: #14324A; color: #fff; font: 500 .9rem system-ui, sans-serif; transition: .25s; }
.adm-aviso.mostra { opacity: 1; transform: translate(-50%, 0); }
.adm-aviso.ruim { background: #C24E3A; }

.adm-gaveta {
  position: fixed; top: 44px; right: 0; bottom: 0; z-index: 45; width: min(400px, 100%);
  overflow-y: auto; padding: 14px 16px 40px; background: #fff; color: #14324A;
  font: 400 .9rem/1.45 system-ui, sans-serif; box-shadow: -10px 0 30px rgba(0, 0, 0, .18);
  display: flex; flex-direction: column; gap: 12px;
}
.adm-gaveta header { display: flex; justify-content: space-between; align-items: center; }
.adm-gaveta header b { font-size: 1.05rem; }
.adm-gaveta h4 { margin: 10px 0 0; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #3F7652; }
.adm-img { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #E4ECF1; }
.adm-img img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; background: #EEF4F8; }
.adm-img div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.adm-img b { width: 100%; font-weight: 600; }
.adm-cor { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; }
.adm-cor input { width: 52px; height: 36px; padding: 0; border: 1px solid #C9D6E0; border-radius: 8px; background: none; }
.adm-campo { display: grid; gap: 4px; }
.adm-campo span { font-size: .78rem; color: #5B7387; }
.adm-campo input, .adm-campo textarea { width: 100%; padding: 8px 10px; border: 1px solid #C9D6E0; border-radius: 8px; font: inherit; color: inherit; background: #fff; }
.adm-bloco { border: 1px solid #E4ECF1; border-radius: 10px; padding: 8px 10px; display: grid; gap: 8px; }
.adm-bloco[open] { gap: 10px; }
.adm-bloco summary { cursor: pointer; font-weight: 600; }
.adm-nota { margin: 0; font-size: .78rem; color: #5B7387; }
.adm-acoes { position: sticky; bottom: -40px; display: flex; gap: 8px; padding: 12px 0; background: #fff; }