/* Everglow Eternize · telas do sistema: login, galeria do cliente e painel administrativo */

.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- fundo de luz (login) ---------- */
.tela-login {
  min-height: 100svh;
  background:
    radial-gradient(60% 50% at 50% 18%, #fff6ea, #fff6ea00 70%),
    radial-gradient(40% 30% at 85% 80%, #f2cdb0aa, #f2cdb000 70%),
    linear-gradient(180deg, #f0c9a2, #f6dcc3 40%, #f1ebe3);
  display: grid;
}
.tela-login:before, .tela-login:after {
  content: "";
  position: fixed;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fffaf2e6, #ffe2bd88 55%, #ffe2bd00);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: flutua 14s var(--ease-io) infinite alternate;
}
.tela-login:before { width: 220px; height: 220px; left: 8%; top: 14%; }
.tela-login:after { width: 140px; height: 140px; right: 10%; top: 58%; animation-delay: -6s; }
@keyframes flutua {
  0% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  to { transform: translate(24px, -34px) scale(1.12); opacity: 0.7; }
}

.login { display: grid; place-items: center; padding: 24px 16px; position: relative; z-index: 1; }
.login__card {
  width: min(440px, 100%);
  border-radius: var(--r-card);
  background: #ffffffc7;
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: inset 0 0 0 1px #ffffffd9, 0 30px 70px -30px #5a301a66;
  padding: clamp(28px, 5vw, 44px);
  animation: sobe 1.1s var(--ease) both;
}
@keyframes sobe { from { opacity: 0; transform: translateY(26px); } }
.login__marca { display: inline-flex; align-items: center; gap: 10px; font-size: 24px; }
.login__marca .marca { width: 32px; height: 32px; }
.login__titulo { font-size: clamp(32px, 6vw, 42px); margin-top: 28px; letter-spacing: -0.035em; }
.login__sub { color: var(--tinta-2); margin-top: 10px; font-size: 15px; }
.login__form { display: grid; gap: 14px; margin-top: 26px; }
.login__btn { --alt: 52px; width: 100%; margin-top: 6px; }
.login__msg { min-height: 22px; font-size: 14px; color: var(--verm-600); }
.login__form.is-erro .campo input { box-shadow: inset 0 0 0 1.5px var(--verm-600), 0 0 0 5px #b8443a26; }
.login__form.is-erro { animation: treme 0.42s var(--ease-io); }
.login__rodape { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--fio); font-size: 13.5px; color: var(--tinta-2); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.login__rodape a { color: var(--glow-700); font-weight: 500; }
.senha { position: relative; }
.senha input { padding-right: 52px; }
.senha__ver { position: absolute; right: 6px; bottom: 6px; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--tinta-3); transition: color 0.3s, background-color 0.3s; }
.senha__ver:hover { background: var(--papel); color: var(--tinta); }

/* ---------- barra de topo do sistema ---------- */
.topo {
  position: sticky;
  top: var(--margem);
  z-index: 40;
  margin: var(--margem);
  border-radius: var(--r-card);
  height: 68px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px 0 22px;
  background: #f8f4eed1;
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 0 0 1px #1d17140f, 0 12px 32px -18px #1d171447;
}
.topo__marca { display: flex; align-items: center; gap: 10px; font-family: var(--serifa); font-size: 23px; letter-spacing: -0.03em; }
.topo__marca .marca { width: 30px; height: 30px; }
.topo__selo { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--glow-700); background: var(--glow-100); border-radius: var(--r-pilula); padding: 4px 10px; }
.topo__acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topo__quem { font-size: 14px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
@media (max-width: 640px) {
  .topo { height: 60px; padding: 0 8px 0 16px; gap: 10px; }
  .topo__quem, .topo__selo { display: none; }
}

/* ---------- galeria do cliente ---------- */
.galeria { max-width: 1480px; margin: 0 auto; padding: clamp(28px, 6vh, 64px) var(--gutter) 80px; }
.galeria__cabeca { display: flex; align-items: end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.galeria__ola { color: var(--tinta-2); font-size: 15px; }
.galeria__titulo { font-size: clamp(36px, 5vw, 72px); margin-top: 6px; }
.galeria__resumo { color: var(--tinta-2); margin-top: 10px; font-size: 15px; }
.galeria__acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.albuns { display: flex; gap: 8px; margin-top: clamp(28px, 4vh, 44px); overflow-x: auto; scrollbar-width: none; padding: 2px; }
.albuns::-webkit-scrollbar { display: none; }
.albuns button {
  height: 40px;
  border-radius: var(--r-pilula);
  padding: 0 16px;
  background: #fff;
  box-shadow: 0 1px 2px #1d17140f;
  font-size: 14px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), transform var(--t-micro) var(--ease);
}
.albuns button small { color: var(--tinta-3); font-size: 12.5px; }
.albuns button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.albuns button[aria-pressed="true"] small { color: #ffffffa8; }
.albuns button:active { transform: scale(0.96); }

.mosaico { margin-top: 22px; columns: 4 260px; column-gap: 12px; }
.mosaico__item { break-inside: avoid; margin-bottom: 12px; position: relative; }
.mosaico__foto {
  display: block;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #e5d6c6;
  position: relative;
  aspect-ratio: var(--ar, 4 / 5);
}
.mosaico__foto img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s var(--ease), transform 1.2s var(--ease); }
.mosaico__foto img.is-carregada { opacity: 1; }
.mosaico__foto .mosaico__sem {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: var(--tinta-2);
  font-size: 12.5px;
  padding: 12px;
  text-align: center;
  word-break: break-word;
}
.mosaico__foto .mosaico__sem .ico { width: 28px; height: 28px; }
.js .mosaico__item { opacity: 0; transform: translateY(24px); }
.js .mosaico__item.is-in { opacity: 1; transform: none; transition: opacity 0.8s var(--ease), transform 1s var(--ease); }
@media (hover: hover) { .mosaico__foto:hover img { transform: scale(1.04); } }
.mosaico__play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; background: #ffffffe0; color: var(--tinta); display: grid; place-items: center; box-shadow: 0 8px 24px -10px #0006; }
.mosaico__play .ico { width: 20px; height: 20px; fill: currentColor; stroke: none; margin-left: 3px; }
.mosaico__baixar {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffffe6;
  color: var(--tinta);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease);
  box-shadow: 0 6px 18px -8px #0005;
}
.mosaico__item:hover .mosaico__baixar, .mosaico__baixar:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .mosaico__baixar { opacity: 1; transform: none; } }
@media (max-width: 640px) { .mosaico { columns: 2; column-gap: 8px; } .mosaico__item { margin-bottom: 8px; } }

.vazio { text-align: center; padding: clamp(60px, 14vh, 140px) 20px; color: var(--tinta-2); }
.vazio h2 { font-size: clamp(28px, 4vw, 44px); color: var(--tinta); margin-bottom: 10px; }

/* visualizador */
.visor {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #120b08f5;
  display: grid;
  grid-template-rows: auto 1fr;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.visor.is-aberto { opacity: 1; }
.visor__barra { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; }
.visor__nome { font-size: 14px; color: #ffffffc7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.visor__barra .btn--vidro { --alt: 40px; }
.visor__fecha { width: 42px; height: 42px; border-radius: 50%; background: #ffffff1f; color: #fff; display: grid; place-items: center; font-size: 22px; }
.visor__palco { display: grid; place-items: center; padding: 0 64px 20px; min-height: 0; }
.visor__palco img, .visor__palco video { max-width: 100%; max-height: calc(100svh - 90px); border-radius: 10px; object-fit: contain; }
.visor__nav { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 50%; background: #ffffff1f; color: #fff; display: grid; place-items: center; transition: background-color 0.3s; }
.visor__nav:hover { background: #ffffff33; }
.visor__nav--esq { left: 12px; }
.visor__nav--esq .ico { transform: scaleX(-1); }
.visor__nav--dir { right: 12px; }
.visor__sem { color: #fff; text-align: center; display: grid; gap: 14px; justify-items: center; }
@media (max-width: 640px) {
  .visor__palco { padding: 0 8px 70px; }
  .visor__nav { top: auto; bottom: 12px; translate: none; }
}

/* ---------- painel administrativo ---------- */
.painel { max-width: 1240px; margin: 0 auto; padding: clamp(24px, 4vh, 44px) var(--gutter) 80px; }
.painel__cabeca { display: flex; align-items: end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; }
.painel__titulo { font-size: clamp(34px, 4.4vw, 60px); }
.painel__numeros { display: flex; gap: 8px; flex-wrap: wrap; }
.numero { background: #fff; border-radius: 16px; padding: 12px 16px; box-shadow: 0 1px 2px #1d17140f; min-width: 128px; }
.numero span { display: block; font-size: 12px; color: var(--tinta-3); }
.numero b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }

.abas { margin-top: 28px; border-radius: var(--r-pilula); background: #fff; box-shadow: 0 1px 2px #1d17140f; padding: 4px; display: inline-flex; position: relative; isolation: isolate; }
.abas button { height: 42px; padding: 0 20px; border-radius: var(--r-pilula); font-size: 14.5px; font-weight: 500; color: var(--tinta-2); display: inline-flex; align-items: center; gap: 8px; transition: color 0.4s var(--ease); }
.abas button[aria-selected="true"] { color: #fff; }
.abas__fundo { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--r-pilula); background: var(--tinta); transition: transform 0.55s var(--ease), width 0.55s var(--ease); }
.aba { margin-top: 22px; animation: aparece 0.6s var(--ease) both; }
@keyframes aparece { from { opacity: 0; transform: translateY(12px); } }

.bloco { background: #fff; border-radius: var(--r-card); box-shadow: 0 1px 2px #1d17140f, 0 20px 50px -34px #3a221640; padding: clamp(18px, 2.6vw, 30px); }
.bloco + .bloco { margin-top: 14px; }
.bloco__titulo { font-family: var(--serifa); font-size: 26px; letter-spacing: -0.025em; font-weight: 400; }
.bloco__sub { color: var(--tinta-2); font-size: 14px; margin-top: 4px; }
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }

.solta {
  margin-top: 16px;
  border-radius: 20px;
  border: 1.5px dashed #c9b19a;
  background: var(--papel);
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
  padding: 28px;
  cursor: pointer;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.5s var(--ease);
}
.solta:hover, .solta.is-sobre { background: var(--glow-100); border-color: var(--glow-500); }
.solta.is-sobre { transform: scale(1.01); }
.solta__ico { width: 54px; height: 54px; border-radius: 16px; background: #fff; color: var(--glow-700); display: grid; place-items: center; box-shadow: 0 6px 18px -10px #3a221666; }
.solta__ico .ico { width: 24px; height: 24px; }
.solta b { font-size: 17px; font-weight: 500; }
.solta span { color: var(--tinta-2); font-size: 14px; }

.fila { margin-top: 16px; display: grid; gap: 8px; }
.fila__item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--papel); }
.fila__ico { width: 40px; height: 40px; border-radius: 11px; background: #fff; color: var(--glow-700); display: grid; place-items: center; overflow: hidden; }
.fila__ico img { width: 100%; height: 100%; object-fit: cover; }
.fila__nome { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila__info { font-size: 12.5px; color: var(--tinta-3); display: flex; gap: 8px; flex-wrap: wrap; }
.fila__barra { grid-column: 2 / -1; height: 4px; border-radius: 4px; background: #1d171414; overflow: hidden; position: relative; }
.fila__barra i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--glow-500), var(--glow-700)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform 0.25s linear; }
.fila__item.is-ok .fila__barra i { background: var(--ok-600); }
.fila__item.is-erro .fila__barra i { background: var(--verm-600); }
.fila__item.is-erro .fila__info { color: var(--verm-600); }
.fila__acao { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--tinta-2); transition: background-color 0.3s; }
.fila__acao:hover { background: #fff; }
.fila__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.fila__total { font-size: 14px; color: var(--tinta-2); }

.clientes { display: grid; gap: 8px; margin-top: 16px; }
.cliente { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--papel); transition: background-color 0.3s; }
.cliente.is-inativo { opacity: 0.62; }
.cliente__ini { width: 44px; height: 44px; border-radius: 13px; background: var(--rosa-100); color: #8b4a3b; font-weight: 600; font-size: 14px; display: grid; place-items: center; }
.cliente__nome { font-weight: 500; }
.cliente__info { font-size: 13px; color: var(--tinta-3); display: flex; gap: 6px 12px; flex-wrap: wrap; }
.cliente__acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: end; }
.etiqueta { font-size: 11.5px; font-weight: 500; border-radius: var(--r-pilula); padding: 2px 9px; background: var(--ok-100); color: var(--ok-600); }
.etiqueta--off { background: #1d171412; color: var(--tinta-2); }
@media (max-width: 760px) {
  .cliente { grid-template-columns: 44px minmax(0, 1fr); }
  .cliente__acoes { grid-column: 1 / -1; justify-content: start; }
}

.busca-clientes { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-top: 16px; }
.busca-clientes .campo { flex: 1; min-width: 220px; }

.miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 16px; }
.mini { position: relative; border-radius: 12px; overflow: hidden; background: var(--papel); aspect-ratio: 1; }
.mini img { width: 100%; height: 100%; object-fit: cover; }
.mini__sem { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4px; padding: 8px; font-size: 11.5px; color: var(--tinta-2); text-align: center; word-break: break-word; }
.mini__tipo { position: absolute; left: 6px; top: 6px; font-size: 10.5px; background: #1d1714a6; color: #fff; border-radius: 6px; padding: 1px 6px; }
.mini__apaga { position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; border-radius: 50%; background: #ffffffe6; color: var(--verm-600); display: grid; place-items: center; opacity: 0; transition: opacity 0.3s; }
.mini:hover .mini__apaga, .mini__apaga:focus-visible { opacity: 1; }
@media (hover: none) { .mini__apaga { opacity: 1; } }
.mini__album { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; font-size: 11px; color: #fff; background: linear-gradient(#0000, #000a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* diálogo */
.dialogo { border: 0; padding: 0; border-radius: var(--r-card); width: min(480px, calc(100% - 24px)); background: var(--papel); color: var(--tinta); box-shadow: 0 40px 90px -30px #1d171488; }
.dialogo::backdrop { background: #1d171466; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dialogo[open] { animation: sobe 0.5s var(--ease) both; }
.dialogo--largo { width: min(1040px, calc(100% - 24px)); }
.dialogo form, .dialogo__in { padding: clamp(20px, 3vw, 30px); display: grid; gap: 14px; }
.dialogo h2 { font-family: var(--serifa); font-weight: 400; font-size: 28px; letter-spacing: -0.03em; }
.dialogo p { color: var(--tinta-2); font-size: 14.5px; }
.dialogo__acoes { display: flex; justify-content: end; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.dialogo__erro { color: var(--verm-600); font-size: 14px; min-height: 20px; }
.dialogo__topo { display: flex; justify-content: space-between; align-items: start; gap: 12px; }

/* avisos rápidos */
.toasts { position: fixed; left: 50%; bottom: 18px; translate: -50% 0; z-index: 200; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { background: var(--tinta); color: #fff; border-radius: var(--r-pilula); padding: 11px 18px; font-size: 14px; box-shadow: 0 16px 40px -16px #0008; animation: sobe 0.5s var(--ease) both; }
.toast--erro { background: var(--verm-600); }
.toast.is-saindo { opacity: 0; transform: translateY(10px); transition: opacity 0.4s, transform 0.4s; }

.carregando { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira 0.8s linear infinite; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .tela-login:before, .tela-login:after { animation: none; }
  .login__card, .aba, .toast, .dialogo[open] { animation: none; }
  .js .mosaico__item { opacity: 1; transform: none; }
}