* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --preto: #111111;
  --preto-suave: #1c1c1c;
  --rosa: #e6007e;
  --rosa-escuro: #9c0055;
  --rosa-claro: #ff4fb3;
  --branco: #ffffff;
  --cinza: #f5f5f5;
  --cinza-texto: #555555;
  --prata: #d9d9d9;
  --prata-claro: #f3f3f3;
  --dourado: #d4af37;
  --dourado-claro: #f3d37a;
  --sombra: rgba(0, 0, 0, 0.25);
}

html,
body {
  min-height: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: var(--preto);
  color: var(--branco);
  line-height: 1.6;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: min(1180px, 92%);
  margin: 0 auto;
}

/* TOPO */

.topo {
  background: rgba(17, 17, 17, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  z-index: 99;
  backdrop-filter: blur(10px);
}

.topo-conteudo {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 18px;
}

.logo {
  width: 55px;
  border-radius: 12px;
  flex-shrink: 0;
}

.marca-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}

.marca-texto strong {
  color: var(--branco);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.marca-texto span {
  color: #fc69a0;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 4px;
  white-space: nowrap;
}

/* MENU */

.menu ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
}

.menu>ul>li {
  position: relative;
}

.menu>ul>li>a {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  color: var(--branco);
  font-weight: 700;
  font-size: 0.95rem;
  transition: 0.3s ease;
}

.menu>ul>li>a:hover {
  background: var(--rosa);
  color: var(--branco);
  box-shadow: 0 8px 20px rgba(230, 0, 126, 0.35);
}

/* SUBMENU */

.dropdown {
  position: relative;
}

/* Ponte invisível entre o botão e o submenu */
.dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 42px;
  height: 18px;
  background: transparent;
}

.submenu {
  position: absolute;
  top: 50px;
  right: 0;
  min-width: 230px;

  background: linear-gradient(135deg, #151515, #2a0b1b);
  color: var(--branco);

  border: 1px solid rgba(230, 0, 126, 0.45);
  border-radius: 18px;
  padding: 10px;

  display: none !important;
  flex-direction: column;
  gap: 6px;

  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45);
  z-index: 999;
}

.submenu li a {
  display: block;
  padding: 12px 16px;
  border-radius: 12px;

  color: var(--branco);
  font-weight: 700;
  text-align: left;

  transition: 0.3s ease;
}

.submenu li a:hover {
  background: linear-gradient(135deg, var(--rosa), var(--rosa-escuro));
  color: var(--branco);
  padding-left: 22px;
}

.dropdown:hover .submenu {
  display: flex !important;
}

/* HERO */

.hero {
  min-height: calc(100vh - 92px);
  background:
    radial-gradient(circle at top left, rgba(230, 0, 126, 0.28), transparent 34%),
    radial-gradient(circle at bottom right, rgba(230, 0, 126, 0.18), transparent 32%),
    linear-gradient(135deg, #111111, #1d1d1d);
  display: flex;
  align-items: center;
  padding: 70px 0;
}

.hero-conteudo {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 50px;
}

.etiqueta {
  display: inline-block;
  background: rgba(230, 0, 126, 0.14);
  border: 1px solid rgba(230, 0, 126, 0.5);
  color: var(--rosa-claro);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.hero-texto h1 {
  font-size: clamp(2.3rem, 5vw, 4.8rem);
  line-height: 1.05;
  margin-bottom: 22px;
  letter-spacing: -1px;
}

.hero-texto p {
  max-width: 620px;
  color: #e7e7e7;
  font-size: 1.15rem;
  margin-bottom: 32px;
}

.botoes-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 800;
  transition: 0.3s ease;
}

.botao-principal {
  background: linear-gradient(135deg, var(--rosa), var(--rosa-escuro));
  color: var(--branco);
  box-shadow: 0 12px 28px rgba(230, 0, 126, 0.35);
}

.botao-principal:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(230, 0, 126, 0.48);
}

.botao-secundario {
  background: transparent;
  color: var(--branco);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.botao-secundario:hover {
  border-color: var(--rosa);
  color: var(--rosa-claro);
}

.hero-logo-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 30px;
  padding: 28px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.logo-hero {
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  margin-bottom: 22px;
}

.hero-logo-card p {
  color: var(--prata);
  font-size: 1.05rem;
}

/* SOBRE */

.sobre {
  background: var(--branco);
  color: var(--preto);
  padding: 85px 0;
}

.titulo-secao {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 45px;
}

.titulo-secao span {
  color: var(--rosa);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
}

.titulo-secao h2 {
  margin-top: 8px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
}

.sobre-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sobre-card {
  background: var(--cinza);
  padding: 30px;
  border-radius: 24px;
  border: 1px solid #eeeeee;
  transition: 0.3s ease;
}

.sobre-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.10);
}

.sobre-card h3 {
  color: var(--rosa-escuro);
  margin-bottom: 12px;
  font-size: 1.35rem;
}

.sobre-card p {
  color: var(--cinza-texto);
}

/* SERVIÇOS */

.servicos-destaque {
  background:
    linear-gradient(135deg, #151515, #242424);
  padding: 90px 0;
}

.cards-servicos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Cards normais: prata suave */

.card-servico {
  background:
    linear-gradient(135deg, rgba(220, 220, 220, 0.10), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(210, 210, 210, 0.28);
  border-radius: 26px;
  padding: 30px;
  transition: 0.35s ease;
  min-height: 270px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.card-servico:hover {
  transform: translateY(-8px);
  background:
    linear-gradient(135deg, rgba(230, 0, 126, 0.20), rgba(156, 0, 85, 0.14));
  border-color: rgba(230, 0, 126, 0.58);
  box-shadow: 0 18px 42px rgba(230, 0, 126, 0.22);
}

/* Ícones normais: prata */

.icone-servico {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, #cfcfcf, #f7f7f7);
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  margin-bottom: 18px;
  transition: 0.35s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 10px 22px rgba(0, 0, 0, 0.22);
}

.card-servico:hover .icone-servico {
  background:
    linear-gradient(135deg, var(--rosa), var(--rosa-escuro));
  color: var(--branco);
  box-shadow: 0 10px 26px rgba(230, 0, 126, 0.35);
}

.card-servico h3 {
  font-size: 1.45rem;
  margin-bottom: 12px;
}

.card-servico p {
  color: #dddddd;
  margin-bottom: 20px;
}

.card-servico a {
  margin-top: auto;
  color: var(--rosa-claro);
  font-weight: 800;
  transition: 0.3s ease;
}

.card-servico a:hover {
  color: var(--branco);
}

/* Card Galeria: dourado suave */

.card-galeria {
  background:
    linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(212, 175, 55, 0.38);
}

.card-galeria .icone-servico {
  background: #ffffff;
  color: #111111;
  border: 1px solid rgba(212, 175, 55, 0.55);
  box-shadow: 0 10px 26px rgba(255, 255, 255, 0.12);
}

.card-galeria:hover {
  transform: translateY(-8px);
  background:
    linear-gradient(135deg, rgba(230, 0, 126, 0.28), rgba(156, 0, 85, 0.18));
  border-color: rgba(230, 0, 126, 0.65);
  box-shadow: 0 18px 46px rgba(230, 0, 126, 0.25);
}

.card-galeria:hover .icone-servico {
  background:
    linear-gradient(135deg, var(--rosa), var(--rosa-escuro));
  color: var(--branco);
}

/* CHAMADA FINAL */

.chamada-final {
  background: var(--branco);
  color: var(--preto);
  padding: 70px 0;
}

.chamada-box {
  background:
    radial-gradient(circle at top left, rgba(230, 0, 126, 0.22), transparent 34%),
    linear-gradient(135deg, #f7f7f7, #ffffff);
  border: 1px solid #eeeeee;
  border-radius: 30px;
  padding: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.chamada-box span {
  color: var(--rosa);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.chamada-box h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin: 6px 0 8px;
}

.chamada-box p {
  color: var(--cinza-texto);
}

/* RODAPÉ */

.rodape {
  background: #0b0b0b;
  color: var(--prata);
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: auto;
}

.rodape-conteudo {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 0.95rem;
}

/* RESPONSIVO */

@media (max-width: 900px) {
  .topo-conteudo {
    flex-direction: column;
    padding: 18px 0;
  }

  .menu ul {
    flex-wrap: wrap;
    justify-content: center;
  }

  .submenu {
    right: auto;
    left: 0;
  }

  .hero-conteudo {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-texto p {
    margin-left: auto;
    margin-right: auto;
  }

  .botoes-hero {
    justify-content: center;
  }

  .sobre-grid,
  .cards-servicos {
    grid-template-columns: 1fr;
  }

  .chamada-box {
    flex-direction: column;
    text-align: center;
  }

  .rodape-conteudo {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 520px) {
  .logo {
    width: 52px;
  }

  .marca-texto strong {
    font-size: 1rem;
  }

  .marca-texto span {
    font-size: 0.7rem;
  }

  .menu>ul>li>a {
    padding: 10px 14px;
    font-size: 0.88rem;
  }

  .hero {
    padding: 50px 0;
  }

  .hero-logo-card {
    padding: 18px;
  }

  .sobre,
  .servicos-destaque {
    padding: 65px 0;
  }

  .chamada-box {
    padding: 28px;
  }
}

/* PÁGINAS INTERNAS */

.pagina-hero {
  background:
    radial-gradient(circle at top left, rgba(230, 0, 126, 0.22), transparent 34%),
    linear-gradient(135deg, #111111, #1d1d1d);
  padding: 80px 0 70px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pagina-hero h1 {
  max-width: 850px;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 1.05;
  margin: 16px 0 20px;
}

.pagina-hero p {
  max-width: 720px;
  color: #e0e0e0;
  font-size: 1.12rem;
}

/* SERVIÇOS DETALHADOS */

.servicos-detalhados {
  background: linear-gradient(135deg, #151515, #242424);
  padding: 80px 0;
}

.servico-linha {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  align-items: stretch;
  margin-bottom: 28px;
}

.servico-linha.invertido {
  grid-template-columns: 0.8fr 1.2fr;
}

.servico-linha.invertido .servico-texto {
  order: 2;
}

.servico-linha.invertido .servico-caixa {
  order: 1;
}

.servico-texto,
.servico-caixa {
  background:
    linear-gradient(135deg, rgba(220, 220, 220, 0.10), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(210, 210, 210, 0.28);
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.servico-texto span {
  color: var(--rosa-claro);
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 2px;
}

.servico-texto h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin: 8px 0 16px;
}

.servico-texto p {
  color: #dddddd;
  margin-bottom: 24px;
  max-width: 760px;
}

.servico-caixa h3 {
  color: var(--rosa-claro);
  margin-bottom: 16px;
  font-size: 1.4rem;
}

.servico-caixa ul {
  list-style: none;
}

.servico-caixa li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #eeeeee;
}

.servico-caixa li::before {
  content: "✦ ";
  color: var(--rosa-claro);
}

/* FILTROS GALERIA */

.filtros-galeria {
  background: #151515;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.filtros-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.filtros-lista a {
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(210, 210, 210, 0.28);
  color: var(--branco);
  font-weight: 800;
  background: rgba(255, 255, 255, 0.04);
  transition: 0.3s ease;
}

.filtros-lista a:hover,
.filtros-lista a.ativo {
  background: linear-gradient(135deg, var(--rosa), var(--rosa-escuro));
  border-color: rgba(230, 0, 126, 0.65);
  box-shadow: 0 12px 28px rgba(230, 0, 126, 0.25);
}

/* GALERIA */

.galeria-area {
  background: linear-gradient(135deg, #151515, #242424);
  padding: 70px 0;
}

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.foto-card {
  background:
    linear-gradient(135deg, rgba(220, 220, 220, 0.10), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(210, 210, 210, 0.28);
  border-radius: 26px;
  overflow: hidden;
  transition: 0.35s ease;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.foto-card:hover {
  transform: translateY(-8px);
  border-color: rgba(230, 0, 126, 0.58);
  box-shadow: 0 18px 42px rgba(230, 0, 126, 0.22);
}

.foto-card img {
  width: 100%;
  height: 310px;
  object-fit: cover;
}

.foto-info {
  padding: 24px;
}

.foto-info span {
  display: inline-block;
  color: var(--rosa-claro);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.foto-info h2 {
  font-size: 1.35rem;
  margin-bottom: 10px;
}

.foto-info p {
  color: #dddddd;
}

.galeria-vazia {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 28px;
  padding: 44px;
}

.galeria-vazia h2 {
  font-size: 2rem;
  margin-bottom: 14px;
}

.galeria-vazia p {
  color: #dddddd;
  margin-bottom: 26px;
}

/* CONTATO */

.contato-area {
  background: linear-gradient(135deg, #151515, #242424);
  padding: 80px 0;
}

.contato-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 30px;
  align-items: start;
}

.contato-info,
.formulario-box {
  background:
    linear-gradient(135deg, rgba(220, 220, 220, 0.10), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(210, 210, 210, 0.28);
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.contato-info h2 {
  font-size: 2.2rem;
  margin-bottom: 14px;
}

.contato-info p {
  color: #dddddd;
  margin-bottom: 22px;
}

.contato-card {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
}

.contato-card strong {
  display: block;
  color: var(--rosa-claro);
  margin-bottom: 4px;
}

.contato-card span {
  color: #eeeeee;
}

.formulario-box form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.formulario-box label {
  font-weight: 800;
  color: var(--branco);
}

.formulario-box input,
.formulario-box select,
.formulario-box textarea {
  width: 100%;
  border: 1px solid rgba(210, 210, 210, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: var(--branco);
  border-radius: 14px;
  padding: 14px;
  font-size: 1rem;
  outline: none;
}

.formulario-box input:focus,
.formulario-box select:focus,
.formulario-box textarea:focus {
  border-color: rgba(230, 0, 126, 0.65);
  box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.18);
}

.formulario-box select option {
  color: #111111;
}

.formulario-box textarea {
  resize: vertical;
}

.formulario-box button {
  border: none;
  cursor: pointer;
  margin-top: 10px;
}

.alerta {
  padding: 14px 16px;
  border-radius: 14px;
  font-weight: 800;
  margin-bottom: 18px;
}

.alerta.sucesso {
  background: rgba(45, 180, 95, 0.16);
  color: #9dffbf;
  border: 1px solid rgba(45, 180, 95, 0.45);
}

.alerta.erro {
  background: rgba(230, 0, 80, 0.14);
  color: #ff9fbd;
  border: 1px solid rgba(230, 0, 80, 0.42);
}

/* RESPONSIVO DAS PÁGINAS INTERNAS */

@media (max-width: 900px) {

  .servico-linha,
  .servico-linha.invertido,
  .contato-grid,
  .galeria-grid {
    grid-template-columns: 1fr;
  }

  .servico-linha.invertido .servico-texto,
  .servico-linha.invertido .servico-caixa {
    order: initial;
  }

  .filtros-lista {
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .pagina-hero {
    padding: 58px 0 50px;
  }

  .servico-texto,
  .servico-caixa,
  .contato-info,
  .formulario-box,
  .galeria-vazia {
    padding: 24px;
  }

  .foto-card img {
    height: 250px;
  }
}

/* CONTATO */

.contato-area {
  background: linear-gradient(135deg, #151515, #242424);
  padding: 80px 0;
  min-height: 520px;
}

.contato-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 30px;
  align-items: start;
}

.contato-info,
.formulario-box {
  background:
    linear-gradient(135deg, rgba(220, 220, 220, 0.10), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(210, 210, 210, 0.28);
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.contato-info h2 {
  font-size: 2.2rem;
  margin-bottom: 14px;
}

.contato-info p {
  color: #dddddd;
  margin-bottom: 22px;
}

.contato-card {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
}

.contato-card strong {
  display: block;
  color: var(--rosa-claro);
  margin-bottom: 4px;
}

.contato-card span {
  color: #eeeeee;
}

.formulario-box form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.formulario-box label {
  font-weight: 800;
  color: var(--branco);
}

.formulario-box input,
.formulario-box select,
.formulario-box textarea {
  width: 100%;
  border: 1px solid rgba(210, 210, 210, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: var(--branco);
  border-radius: 14px;
  padding: 14px;
  font-size: 1rem;
  outline: none;
}

.formulario-box input:focus,
.formulario-box select:focus,
.formulario-box textarea:focus {
  border-color: rgba(230, 0, 126, 0.65);
  box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.18);
}

.formulario-box select option {
  color: #111111;
}

.formulario-box textarea {
  resize: vertical;
}

.formulario-box button {
  border: none;
  cursor: pointer;
  margin-top: 10px;
}

@media (max-width: 900px) {

  .contato-grid,
  .galeria-grid {
    grid-template-columns: 1fr;
  }
}

/* ÁREA ADMINISTRATIVA */

.admin-login-area {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(230, 0, 126, 0.30), transparent 34%),
    linear-gradient(135deg, #111111, #1d1d1d);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.admin-login-box {
  width: min(430px, 100%);
  background:
    linear-gradient(135deg, rgba(220, 220, 220, 0.10), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(210, 210, 210, 0.28);
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.35);
}

.admin-login-logo {
  text-align: center;
  margin-bottom: 26px;
}

.admin-login-logo img {
  width: 86px;
  border-radius: 18px;
  margin: 0 auto 14px;
}

.admin-login-logo h1 {
  font-size: 1.8rem;
}

.admin-login-logo p {
  color: var(--rosa-claro);
  font-weight: 800;
}

.admin-login-box form,
.admin-form-box form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-login-box label,
.admin-form-box label {
  font-weight: 800;
  color: var(--branco);
}

.admin-login-box input,
.admin-form-box input,
.admin-form-box select,
.admin-form-box textarea {
  width: 100%;
  border: 1px solid rgba(210, 210, 210, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: var(--branco);
  border-radius: 14px;
  padding: 14px;
  font-size: 1rem;
  outline: none;
}

.admin-login-box input:focus,
.admin-form-box input:focus,
.admin-form-box select:focus,
.admin-form-box textarea:focus {
  border-color: rgba(230, 0, 126, 0.65);
  box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.18);
}

.admin-form-box select option {
  color: #111111;
}

.admin-login-box button,
.admin-form-box button {
  border: none;
  cursor: pointer;
  margin-top: 10px;
}

.admin-voltar {
  display: block;
  text-align: center;
  color: var(--rosa-claro);
  font-weight: 800;
  margin-top: 20px;
}

.admin-topo {
  background: rgba(17, 17, 17, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  z-index: 99;
  backdrop-filter: blur(10px);
}

.admin-topo-conteudo {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.admin-menu {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.admin-menu a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.98rem;
  padding: 10px 14px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.admin-menu a:hover,
.admin-menu a.ativo {
  background: linear-gradient(135deg, #ff008c, #ff4fb2);
  box-shadow: 0 6px 18px rgba(255, 0, 140, 0.28);
}

.admin-menu a.sair {
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: transparent;
}

.admin-hero {
  background:
    radial-gradient(circle at top left, rgba(230, 0, 126, 0.22), transparent 34%),
    linear-gradient(135deg, #111111, #1d1d1d);
  padding: 70px 0 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-hero h1 {
  max-width: 850px;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.05;
  margin: 16px 0 20px;
}

.admin-hero p {
  max-width: 720px;
  color: #e0e0e0;
  font-size: 1.12rem;
}

.admin-area {
  background: linear-gradient(135deg, #151515, #242424);
  padding: 70px 0;
  min-height: 520px;
}

.admin-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 28px;
}

.admin-card {
  background:
    linear-gradient(135deg, rgba(220, 220, 220, 0.10), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(210, 210, 210, 0.28);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.admin-card span {
  display: block;
  color: var(--rosa-claro);
  font-weight: 900;
  margin-bottom: 8px;
}

.admin-card strong {
  font-size: 2.6rem;
}

.admin-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 32px;
}

.admin-lista-box,
.admin-form-box {
  background:
    linear-gradient(135deg, rgba(220, 220, 220, 0.10), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(210, 210, 210, 0.28);
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.admin-lista-box h2 {
  font-size: 2rem;
  margin-bottom: 22px;
}

.admin-fotos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.admin-foto-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
}

.admin-foto-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.admin-foto-card div {
  padding: 16px;
}

.admin-foto-card h3 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.admin-foto-card p {
  color: var(--rosa-claro);
  font-weight: 800;
}

.admin-foto-card small {
  color: #dddddd;
}

.admin-vazio {
  color: #dddddd;
}

@media (max-width: 900px) {
  .admin-topo-conteudo {
    flex-direction: column;
    padding: 18px 0;
  }

  .admin-menu {
    flex-wrap: wrap;
    justify-content: center;
  }

  .admin-cards,
  .admin-fotos-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ÁREA ADMINISTRATIVA - FIOS COM FORMAS
========================================================= */

.admin-login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(230, 0, 126, 0.22), transparent 34%),
    linear-gradient(135deg, #fbf4ee, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.admin-login-card {
  width: min(500px, 100%);
  background: #ffffff;
  color: #111111;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 22px;
  padding: 34px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.15);
}

.admin-login-logo {
  text-align: left;
  margin-bottom: 26px;
}

.admin-login-logo img {
  width: 78px;
  height: 78px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 18px;
}

.admin-login-logo h1 {
  font-size: 2rem;
  color: #111111;
  margin-bottom: 4px;
}

.admin-login-logo p {
  color: #444444;
  font-size: 0.95rem;
}

.admin-login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-login-form label {
  color: #111111;
  font-weight: 700;
}

.admin-login-form input {
  width: 100%;
  border: 1px solid #d7dde7;
  background: #eaf1ff;
  color: #111111;
  border-radius: 8px;
  padding: 13px 14px;
  font-size: 1rem;
  outline: none;
}

.admin-login-form input:focus {
  border-color: var(--rosa);
  box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.15);
}

.captcha-linha {
  display: flex;
  align-items: center;
  gap: 10px;
}

.captcha-conta {
  background: #1f252d;
  color: #ffffff;
  padding: 13px 18px;
  border-radius: 8px;
  font-weight: 900;
  min-width: 86px;
  text-align: center;
}

.captcha-linha input {
  flex: 1;
  background: #ffffff;
}

.captcha-ajuda {
  color: #555555;
  margin-top: -6px;
}

.admin-btn-full {
  width: 100%;
  border: none;
  cursor: pointer;
  margin-top: 8px;
  border-radius: 8px;
  padding: 14px;
}

.admin-voltar {
  display: block;
  text-align: center;
  color: #444444;
  font-weight: 600;
  margin-top: 22px;
}

.admin-voltar:hover {
  color: var(--rosa);
}

/* TOPO ADMIN */

.admin-topo {
  background: rgba(17, 17, 17, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  z-index: 99;
  backdrop-filter: blur(10px);
}

.admin-topo-conteudo {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.admin-menu {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-menu a {
  display: inline-block;
  padding: 11px 16px;
  border-radius: 999px;
  color: var(--branco);
  font-weight: 800;
  transition: 0.3s ease;
}

.admin-menu a:hover {
  background: var(--rosa);
  box-shadow: 0 8px 20px rgba(230, 0, 126, 0.35);
}

.admin-menu .sair {
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ADMIN HERO */

.admin-hero {
  background:
    radial-gradient(circle at top left, rgba(230, 0, 126, 0.22), transparent 34%),
    linear-gradient(135deg, #111111, #1d1d1d);
  padding: 70px 0 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-hero h1 {
  max-width: 850px;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.05;
  margin: 16px 0 20px;
}

.admin-hero p {
  max-width: 720px;
  color: #e0e0e0;
  font-size: 1.12rem;
}

/* ÁREA ADMIN */

.admin-area {
  background: linear-gradient(135deg, #151515, #242424);
  padding: 70px 0;
  min-height: 520px;
}

.admin-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 28px;
}

.admin-card {
  background:
    linear-gradient(135deg, rgba(220, 220, 220, 0.10), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(210, 210, 210, 0.28);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.admin-card span {
  display: block;
  color: var(--rosa-claro);
  font-weight: 900;
  margin-bottom: 8px;
}

.admin-card strong {
  font-size: 2.6rem;
}

.admin-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 32px;
}

.admin-lista-box,
.admin-form-box {
  background:
    linear-gradient(135deg, rgba(220, 220, 220, 0.10), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(210, 210, 210, 0.28);
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.admin-lista-box h2 {
  font-size: 2rem;
  margin-bottom: 22px;
}

.admin-fotos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.admin-foto-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
}

.admin-foto-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.admin-foto-card div {
  padding: 16px;
}

.admin-foto-card h3 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.admin-foto-card p {
  color: var(--rosa-claro);
  font-weight: 800;
}

.admin-foto-card small {
  color: #dddddd;
}

.admin-vazio {
  color: #dddddd;
}

/* FORM ADMIN */

.admin-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.campo-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.campo-form label {
  font-weight: 800;
  color: var(--branco);
}

.admin-form input,
.admin-form select,
.admin-form textarea {
  width: 100%;
  border: 1px solid rgba(210, 210, 210, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: var(--branco);
  border-radius: 14px;
  padding: 14px;
  font-size: 1rem;
  outline: none;
}

.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
  border-color: rgba(230, 0, 126, 0.65);
  box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.18);
}

.admin-form select option {
  color: #111111;
}

.admin-form textarea {
  resize: vertical;
}

.admin-form-duplo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.upload-box {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.upload-box input[type="file"] {
  display: none;
}

.upload-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--rosa), var(--rosa-escuro));
  color: #ffffff !important;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(230, 0, 126, 0.30);
  transition: 0.3s ease;
}

.upload-botao:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(230, 0, 126, 0.42);
}

.upload-nome {
  color: #dddddd;
  font-weight: 600;
}

.upload-ajuda {
  color: #bdbdbd;
}

/* RESPONSIVO ADMIN */

@media (max-width: 900px) {
  .admin-topo-conteudo {
    flex-direction: column;
    padding: 18px 0;
  }

  .admin-menu {
    flex-wrap: wrap;
    justify-content: center;
  }

  .admin-cards,
  .admin-fotos-grid,
  .admin-form-duplo {
    grid-template-columns: 1fr;
  }

  .captcha-linha {
    flex-direction: column;
    align-items: stretch;
  }

  .captcha-conta {
    width: 100%;
  }
}

/* PÁGINA INDIVIDUAL DA FOTO */

.foto-detalhe-area {
  background: linear-gradient(135deg, #151515, #242424);
  padding: 70px 0;
  min-height: 680px;
}

.botao-voltar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(210, 210, 210, 0.28);
  color: var(--branco);
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 800;
  margin-bottom: 28px;
  transition: 0.3s ease;
}

.botao-voltar:hover {
  background: linear-gradient(135deg, var(--rosa), var(--rosa-escuro));
  border-color: rgba(230, 0, 126, 0.65);
  box-shadow: 0 12px 28px rgba(230, 0, 126, 0.25);
}

.foto-detalhe-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 34px;
  align-items: start;
}

.foto-detalhe-imagem {
  background:
    linear-gradient(135deg, rgba(220, 220, 220, 0.10), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(210, 210, 210, 0.28);
  border-radius: 28px;
  padding: 18px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.25);
}

.foto-detalhe-imagem img {
  width: 100%;
  max-height: 780px;
  object-fit: contain;
  border-radius: 22px;
  background: #111111;
}

.foto-detalhe-info {
  background:
    linear-gradient(135deg, rgba(220, 220, 220, 0.10), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(210, 210, 210, 0.28);
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.foto-categoria {
  display: inline-block;
  color: var(--rosa-claro);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.foto-detalhe-info h1 {
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  line-height: 1.05;
  margin-bottom: 20px;
}

.foto-detalhe-info p {
  color: #dddddd;
  font-size: 1.08rem;
  margin-bottom: 24px;
}

.termo-publico {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(210, 210, 210, 0.20);
  border-radius: 18px;
  padding: 18px;
  margin-top: 24px;
}

.termo-publico strong {
  display: block;
  color: var(--rosa-claro);
  margin-bottom: 6px;
}

.termo-publico span {
  color: #dddddd;
}

.redes-cliente {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.redes-cliente h2 {
  font-size: 1.4rem;
  margin-bottom: 14px;
}

.redes-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.rede-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(210, 210, 210, 0.28);
  color: var(--branco);
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 800;
  transition: 0.3s ease;
}

.rede-link:hover {
  background: linear-gradient(135deg, var(--rosa), var(--rosa-escuro));
  border-color: rgba(230, 0, 126, 0.65);
  box-shadow: 0 12px 28px rgba(230, 0, 126, 0.25);
}

.foto-detalhe-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.foto-card-link {
  display: block;
  overflow: hidden;
}

.foto-card-link img {
  transition: 0.35s ease;
}

.foto-card:hover .foto-card-link img {
  transform: scale(1.03);
}

.link-ver-foto {
  display: inline-block;
  margin-top: 16px;
  color: var(--rosa-claro);
  font-weight: 900;
}

.link-ver-foto:hover {
  color: var(--branco);
}

/* TERMO NO ADMIN */

.termo-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(210, 210, 210, 0.20);
  border-radius: 22px;
  padding: 22px;
}

.termo-box h2 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.termo-box p {
  color: #dddddd;
  margin-bottom: 16px;
}

.termo-box textarea {
  margin-bottom: 18px;
}

.redes-campos {
  transition: 0.3s ease;
}

@media (max-width: 900px) {
  .foto-detalhe-grid {
    grid-template-columns: 1fr;
  }

  .foto-detalhe-info {
    padding: 26px;
  }
}

/* GERENCIAMENTO DE FOTOS */

.admin-tabela-wrap {
  width: 100%;
  overflow-x: auto;
}

.admin-tabela {
  width: 100%;
  border-collapse: collapse;
  min-width: 850px;
}

.admin-tabela th,
.admin-tabela td {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  text-align: left;
  vertical-align: middle;
}

.admin-tabela th {
  color: var(--rosa-claro);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-tabela td {
  color: #eeeeee;
}

.admin-tabela td strong {
  display: block;
  margin-bottom: 4px;
}

.admin-tabela td small {
  display: block;
  color: #cccccc;
}

.thumb-admin {
  width: 82px;
  height: 82px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.badge {
  display: inline-block;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
  margin: 2px 3px 2px 0;
}

.badge.sucesso {
  background: rgba(45, 180, 95, 0.16);
  color: #9dffbf;
  border: 1px solid rgba(45, 180, 95, 0.45);
}

.badge.alerta {
  background: rgba(230, 0, 80, 0.14);
  color: #ff9fbd;
  border: 1px solid rgba(230, 0, 80, 0.42);
}

.badge.info {
  background: rgba(212, 175, 55, 0.16);
  color: #ffe7a0;
  border: 1px solid rgba(212, 175, 55, 0.45);
}

.acoes-tabela {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-tabela {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
  transition: 0.3s ease;
}

.btn-tabela.editar {
  background: rgba(212, 175, 55, 0.16);
  color: #ffe7a0;
  border: 1px solid rgba(212, 175, 55, 0.45);
}

.btn-tabela.editar:hover {
  background: linear-gradient(135deg, #d4af37, #f3d37a);
  color: #111111;
}

.btn-tabela.excluir {
  background: rgba(230, 0, 80, 0.14);
  color: #ff9fbd;
  border: 1px solid rgba(230, 0, 80, 0.42);
}

.btn-tabela.excluir:hover {
  background: linear-gradient(135deg, #e60050, #9c0033);
  color: #ffffff;
}

.foto-atual-box {
  margin-bottom: 28px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.foto-atual-box h2 {
  margin-bottom: 16px;
  font-size: 1.4rem;
}

.foto-atual-box img {
  width: 100%;
  max-width: 420px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.foto-sem-imagem {
  width: 100%;
  height: 180px;
  background: rgba(255, 255, 255, 0.06);
  color: #dddddd;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
}

.status-ok {
  color: #9dffbf !important;
  font-weight: 800;
}

.status-alerta {
  color: #ff9fbd !important;
  font-weight: 800;
}

.admin-mini-acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.admin-mini-acoes a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  transition: 0.3s ease;
}

.admin-mini-acoes a:hover {
  background: linear-gradient(135deg, var(--rosa), var(--rosa-escuro));
  border-color: rgba(230, 0, 126, 0.65);
}

.admin-acoes-termo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 14px 0 22px;
}

.mensagem-copiado {
  display: none;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(45, 180, 95, 0.16);
  color: #9dffbf;
  border: 1px solid rgba(45, 180, 95, 0.45);
  font-weight: 900;
}

.campo-comprovante {
  margin-top: 18px;
}

.foto-card-link {
  display: block;
  overflow: hidden;
}

.foto-card-link img {
  cursor: pointer;
  transition: 0.35s ease;
}

.foto-card:hover .foto-card-link img {
  transform: scale(1.03);
}

.foto-info h2 a {
  color: var(--branco);
  transition: 0.3s ease;
}

.foto-info h2 a:hover {
  color: var(--rosa-claro);
}

.link-ver-foto {
  display: inline-block;
  margin-top: 16px;
  color: var(--rosa-claro);
  font-weight: 900;
  transition: 0.3s ease;
}

.link-ver-foto:hover {
  color: var(--branco);
}

/* AGENDA ADMINISTRATIVA */

.agenda-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 26px;
  align-items: start;
}

.agenda-lateral {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.agenda-box {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.agenda-box h2,
.admin-form-box h2,
.agenda-lista-dia h2 {
  margin-bottom: 16px;
}

.form-data-agenda {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-data-agenda input {
  width: 100%;
}

.agenda-data-atual {
  margin-top: 14px;
  color: #dddddd;
}

.aniversariantes-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aniversariante-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(230, 0, 126, 0.10);
  border: 1px solid rgba(230, 0, 126, 0.24);
  padding: 10px 12px;
  border-radius: 14px;
}

.aniversariante-item strong {
  color: var(--rosa-claro);
}

.texto-suave {
  color: #dddddd;
}

.agenda-principal {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.agenda-bloco {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;
  padding: 22px;
  margin-bottom: 20px;
}

.agenda-bloco h3 {
  color: var(--rosa-claro);
  margin-bottom: 18px;
}

.valor-final-box {
  background: rgba(45, 180, 95, 0.08);
  border: 1px solid rgba(45, 180, 95, 0.25);
  border-radius: 18px;
  padding: 16px;
}

.valor-final-box input {
  margin-bottom: 10px;
}

.valor-final-box strong {
  color: #9dffbf;
  font-size: 1.4rem;
}

.agenda-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.agenda-card {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  padding: 18px;
}

.agenda-card-hora {
  background: linear-gradient(135deg, var(--rosa), var(--rosa-escuro));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 900;
  font-size: 1.1rem;
  min-height: 70px;
}

.agenda-card-info h3 {
  margin-bottom: 6px;
}

.agenda-card-info p {
  color: #ffffff;
  margin-bottom: 6px;
}

.agenda-card-info small {
  display: block;
  color: #dddddd;
  margin-bottom: 10px;
}

.agenda-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.agenda-card-meta span {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
}

/* ======================================================
   AGENDA EM FORMATO DE FOLHA DIÁRIA
====================================================== */

.agenda-folha-hero {
  padding: 62px 0 32px;
  background:
    radial-gradient(circle at top left, rgba(230, 0, 126, 0.22), transparent 34%),
    linear-gradient(135deg, #111111, #181818);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.agenda-topo-folha {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.agenda-topo-folha h1 {
  font-size: clamp(2rem, 5vw, 4.2rem);
  margin: 18px 0 8px;
  line-height: 1.05;
}

.agenda-topo-folha p {
  color: #dddddd;
  font-weight: 700;
}

.agenda-misticas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.agenda-misticas span {
  display: inline-flex;
  padding: 10px 15px;
  border-radius: 999px;
  background: rgba(230, 0, 126, 0.13);
  border: 1px solid rgba(230, 0, 126, 0.32);
  color: var(--rosa-claro);
  font-weight: 900;
}

.agenda-navegacao-data {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.agenda-form-data {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.agenda-form-data input {
  min-width: 180px;
}

.agenda-extra-horas {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.agenda-extra-horas span {
  color: #ffffff;
  font-weight: 800;
}

.botao-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-weight: 900;
  transition: 0.3s ease;
}

.botao-mini:hover {
  background: var(--rosa);
  border-color: var(--rosa);
}

.agenda-folha-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 26px;
  align-items: start;
}

.agenda-folha {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
}

.agenda-folha-cabecalho,
.agenda-linha {
  display: grid;
  grid-template-columns: 90px 1.2fr 1.5fr 1fr 110px;
  gap: 12px;
  align-items: stretch;
}

.agenda-folha-cabecalho {
  background: rgba(230, 0, 126, 0.18);
  border-bottom: 1px solid rgba(230, 0, 126, 0.32);
}

.agenda-folha-cabecalho span {
  padding: 16px;
  color: var(--rosa-claro);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
}

.agenda-linha {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  min-height: 92px;
}

.agenda-linha:last-child {
  border-bottom: none;
}

.agenda-linha > div {
  padding: 16px;
}

.agenda-linha.livre {
  background: rgba(255, 255, 255, 0.025);
}

.agenda-linha.ocupado {
  background:
    linear-gradient(135deg, rgba(230, 0, 126, 0.13), rgba(255, 255, 255, 0.035));
}

.agenda-hora {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 900;
}

.agenda-cliente {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.agenda-cliente strong {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.3;
}

.agenda-cliente small {
  display: block;
  color: #dddddd;
  margin-top: 4px;
  line-height: 1.4;
}

.agenda-servico {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.agenda-servico strong {
  color: #ffffff;
  line-height: 1.35;
}

.agenda-servico span,
.agenda-servico small {
  color: #cccccc;
}

.agenda-valor {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.agenda-valor strong {
  color: #ffffff;
  font-size: 1rem;
}

.agenda-valor span,
.agenda-valor small {
  color: #dddddd;
  line-height: 1.35;
}

.agenda-acao {
  display: flex;
  align-items: center;
  justify-content: center;
}

.botao-agenda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.85rem;
  transition: 0.3s ease;
  white-space: nowrap;
}

.botao-agenda.agendar {
  background: linear-gradient(135deg, var(--rosa), var(--rosa-escuro));
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(230, 0, 126, 0.28);
}

.botao-agenda.editar {
  background: rgba(212, 175, 55, 0.16);
  color: #ffe7a0;
  border: 1px solid rgba(212, 175, 55, 0.45);
}

.botao-agenda:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(230, 0, 126, 0.35);
}

.procedimento-detalhe {
  margin-top: 8px;
}

.procedimento-detalhe summary {
  color: var(--rosa-claro);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 900;
}

.procedimento-detalhe p {
  color: #dddddd;
  margin-top: 8px;
  font-size: 0.86rem;
  line-height: 1.5;
}

.agenda-painel-lateral {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* RESUMO DO DIA */

.resumo-dia-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resumo-dia-lista div {
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.resumo-dia-lista span {
  color: #eeeeee;
}

.resumo-dia-lista strong {
  color: #ffffff;
  font-weight: 900;
}

.resumo-dia-lista .total {
  background: rgba(230, 0, 126, 0.14);
  border-color: rgba(230, 0, 126, 0.32);
}

.resumo-dia-lista .total strong {
  color: var(--rosa-claro);
}

/* MINI CALENDÁRIO */

.mini-calendario {
  width: 100%;
}

.mini-calendario-semana,
.mini-calendario-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
}

.mini-calendario-semana span {
  text-align: center;
  color: var(--rosa-claro);
  font-weight: 900;
  font-size: 0.82rem;
}

.mini-calendario-dias {
  margin-top: 8px;
}

.mini-calendario-dias a,
.mini-calendario-dias span {
  min-height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-calendario-dias a {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-weight: 800;
  transition: 0.3s ease;
}

.mini-calendario-dias a:hover,
.mini-calendario-dias a.ativo {
  background: var(--rosa);
  border-color: var(--rosa);
}

.mini-calendario-dias .vazio {
  opacity: 0;
}

/* ======================================================
   LIMITADOR DE HORÁRIOS DA AGENDA
====================================================== */

.bloco-manha {
  display: grid;
}

.bloco-meio,
.bloco-tarde,
.bloco-extra {
  display: none;
}

.bloco-meio.visivel,
.bloco-tarde.visivel,
.bloco-extra.visivel {
  display: grid;
}

.agenda-limitadores {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(255, 255, 255, 0.025);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.limitador-horario {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 13px 18px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
  transition: 0.3s ease;
}

.limitador-horario:hover,
.limitador-horario.aguardando {
  background: linear-gradient(135deg, var(--rosa), var(--rosa-escuro));
  box-shadow: 0 12px 28px rgba(230, 0, 126, 0.28);
}

.limitador-horario.oculto {
  display: none;
}

/* ======================================================
   BOXES RECOLHÍVEIS DA AGENDA
====================================================== */

.agenda-box-toggle {
  display: none;
}

.agenda-box-conteudo {
  display: block;
}

/* ======================================================
   RESPONSIVO DA AGENDA
====================================================== */

@media (max-width: 1100px) {
  .agenda-folha-grid {
    grid-template-columns: 1fr;
  }

  .agenda-painel-lateral {
    order: -1;
  }
}

@media (max-width: 900px) {
  .agenda-layout {
    grid-template-columns: 1fr;
  }

  .agenda-card {
    grid-template-columns: 1fr;
  }

  .agenda-card-hora {
    min-height: auto;
    padding: 12px;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  main {
    width: 100%;
    overflow-x: hidden;
  }

  .agenda-folha-hero {
    padding: 24px 0 18px;
  }

  .agenda-topo-folha {
    flex-direction: column;
    gap: 16px;
  }

  .agenda-topo-folha h1 {
    font-size: 2rem;
    line-height: 1.08;
    margin-top: 18px;
  }

  .agenda-topo-folha p {
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .agenda-misticas {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .agenda-misticas span {
    font-size: 0.86rem;
    padding: 9px 14px;
  }

  .agenda-navegacao-data {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 18px;
  }

  .agenda-navegacao-data .botao,
  .agenda-form-data,
  .agenda-form-data input,
  .agenda-form-data button {
    width: 100%;
  }

  .agenda-form-data {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .agenda-extra-horas {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
    margin-top: 16px;
  }

  .agenda-extra-horas span {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .agenda-extra-horas > div {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .agenda-extra-horas .botao-mini {
    flex: 1;
    justify-content: center;
  }

  .agenda-folha-area {
    padding-top: 22px;
  }

  .agenda-folha-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .agenda-painel-lateral {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .agenda-folha {
    width: 100%;
    overflow: visible;
    border-radius: 20px;
  }

  .agenda-folha-cabecalho {
    display: none;
  }

  .agenda-linha {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 8px;
    align-items: center;
    min-height: auto;
    margin: 10px;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  .agenda-linha > div {
    padding: 9px 10px;
  }

  .agenda-hora {
    font-size: 0.98rem;
    font-weight: 900;
    align-self: stretch;
    justify-content: center;
    background: rgba(230, 0, 126, 0.18);
  }

  .agenda-cliente {
    min-width: 0;
  }

  .agenda-cliente strong {
    font-size: 0.94rem;
    line-height: 1.2;
  }

  .agenda-cliente small {
    font-size: 0.74rem;
    line-height: 1.25;
    margin-top: 2px;
  }

  .agenda-servico,
  .agenda-valor {
    grid-column: 2 / 4;
    font-size: 0.82rem;
    line-height: 1.35;
    padding-top: 2px;
  }

  .agenda-servico strong,
  .agenda-valor strong {
    font-size: 0.88rem;
  }

  .agenda-servico small,
  .agenda-valor small {
    font-size: 0.74rem;
  }

  .agenda-linha.livre .agenda-servico,
  .agenda-linha.livre .agenda-valor {
    display: none;
  }

  .agenda-acao {
    align-self: center;
  }

  .botao-agenda {
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.8rem;
    border-radius: 999px;
    white-space: nowrap;
  }

  .procedimento-detalhe summary {
    font-size: 0.78rem;
  }

  .procedimento-detalhe p {
    font-size: 0.78rem;
    line-height: 1.4;
  }

  .agenda-limitadores {
    margin-top: 12px;
    padding: 14px;
  }

  .limitador-horario {
    width: 100%;
    min-height: 44px;
    font-size: 0.86rem;
    padding: 10px 12px;
  }

  .agenda-box {
    padding: 12px;
    border-radius: 18px;
  }

  .agenda-box > h2 {
    display: none;
  }

  .agenda-box-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(135deg, rgba(255, 0, 132, 0.14), rgba(255, 255, 255, 0.045));
    color: #ffffff;
    border-radius: 16px;
    padding: 13px 14px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
  }

  .agenda-box-toggle span {
    text-align: left;
  }

  .agenda-box-toggle strong {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 0, 132, 0.22);
    color: #ff78c0;
    font-size: 1.1rem;
    line-height: 1;
  }

  .agenda-box-conteudo {
    display: none;
    padding-top: 12px;
  }

  .agenda-box.aberto .agenda-box-conteudo {
    display: block;
  }

  .agenda-box.aberto .agenda-box-toggle strong {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
  }

  .resumo-dia-lista {
    gap: 8px;
  }

  .resumo-dia-lista div {
    min-height: 42px;
    padding: 9px 11px;
    border-radius: 12px;
  }

  .resumo-dia-lista span,
  .resumo-dia-lista strong {
    font-size: 0.88rem;
  }

  .aniversariante-item {
    padding: 9px 10px;
    border-radius: 12px;
  }

  .mini-calendario {
    transform: scale(0.96);
    transform-origin: top center;
  }
}

@media (max-width: 430px) {
  .agenda-topo-folha h1 {
    font-size: 1.72rem;
  }

  .agenda-linha {
    grid-template-columns: 58px 1fr 78px;
    padding: 0;
    gap: 6px;
    margin: 8px;
  }

  .agenda-linha > div {
    padding: 8px;
  }

  .agenda-hora {
    font-size: 0.9rem;
  }

  .agenda-cliente strong {
    font-size: 0.86rem;
  }

  .agenda-cliente small {
    display: none;
  }

  .agenda-linha.ocupado {
    grid-template-columns: 58px 1fr;
  }

  .agenda-linha.ocupado .agenda-acao {
    grid-column: 1 / 3;
  }

  .agenda-linha.ocupado .botao-agenda {
    width: 100%;
    justify-content: center;
  }

  .agenda-servico,
  .agenda-valor {
    grid-column: 1 / 3;
  }

  .agenda-linha.livre .botao-agenda {
    width: auto;
    min-height: 34px;
    padding: 0 9px;
    font-size: 0.74rem;
  }
}

/* ======================================================
   AJUSTE DA PÁGINA EDITAR AGENDAMENTO
   Deixa a tela mais equilibrada para celular e desktop
====================================================== */

.editar-agendamento-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.editar-agendamento-layout .agenda-principal {
  width: 100%;
}

.editar-agendamento-layout .admin-form-box {
  width: 100%;
  max-width: 100%;
}

.editar-agendamento-layout .agenda-form {
  width: 100%;
}

.editar-agendamento-layout .agenda-bloco {
  width: 100%;
}

.editar-agendamento-layout .admin-form-duplo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.editar-agendamento-layout .campo-form input,
.editar-agendamento-layout .campo-form select,
.editar-agendamento-layout .campo-form textarea {
  width: 100%;
  min-width: 0;
}

.editar-agendamento-layout .agenda-lateral,
.editar-agendamento-lateral {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  width: 100%;
}

.editar-agendamento-lateral .agenda-box {
  width: 100%;
}

.editar-agendamento-layout .pagamento-resumo-box {
  margin-top: 20px;
}

/* Deixa blocos grandes mais confortáveis */
.editar-agendamento-layout .agenda-bloco:nth-of-type(4),
.editar-agendamento-layout .agenda-bloco:nth-of-type(5) {
  margin-top: 26px;
}

/* Botões finais mais organizados */
.editar-agendamento-layout .admin-acoes {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Celular: tudo em uma coluna limpa */
@media (max-width: 800px) {
  .editar-agendamento-layout .admin-form-duplo {
    grid-template-columns: 1fr;
  }

  .editar-agendamento-layout .agenda-lateral,
  .editar-agendamento-lateral {
    grid-template-columns: 1fr;
  }

  .editar-agendamento-layout .agenda-bloco {
    padding: 20px;
  }

  .editar-agendamento-layout .admin-acoes .botao {
    width: 100%;
    justify-content: center;
  }
}

/* ======================================================
   FINANCEIRO ADMINISTRATIVO
====================================================== */

.financeiro-filtro-box {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  padding: 22px;
  margin-bottom: 26px;
}

.financeiro-filtro-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 18px;
  align-items: end;
}

.financeiro-periodo {
  margin-bottom: 24px;
}

.financeiro-periodo h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  margin-bottom: 6px;
}

.financeiro-periodo p {
  color: #dddddd;
}

.financeiro-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.financeiro-card {
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.20);
}

.financeiro-card span {
  display: block;
  color: #dddddd;
  font-weight: 800;
  margin-bottom: 12px;
}

.financeiro-card strong {
  display: block;
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 900;
}

.financeiro-card.entrada {
  border-color: rgba(45, 180, 95, 0.35);
}

.financeiro-card.entrada strong {
  color: #9dffbf;
}

.financeiro-card.receber {
  border-color: rgba(255, 196, 0, 0.35);
}

.financeiro-card.receber strong {
  color: #ffd86b;
}

.financeiro-card.saida {
  border-color: rgba(255, 80, 120, 0.35);
}

.financeiro-card.saida strong {
  color: #ff8fab;
}

.financeiro-card.investimento {
  border-color: rgba(120, 180, 255, 0.35);
}

.financeiro-card.investimento strong {
  color: #9dc7ff;
}

.financeiro-card.resultado.positivo {
  border-color: rgba(45, 180, 95, 0.45);
  background: linear-gradient(135deg, rgba(45, 180, 95, 0.16), rgba(255, 255, 255, 0.035));
}

.financeiro-card.resultado.positivo strong {
  color: #9dffbf;
}

.financeiro-card.resultado.negativo {
  border-color: rgba(255, 80, 120, 0.45);
  background: linear-gradient(135deg, rgba(255, 80, 120, 0.16), rgba(255, 255, 255, 0.035));
}

.financeiro-card.resultado.negativo strong {
  color: #ff8fab;
}

.financeiro-formas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.financeiro-formas article {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.financeiro-formas span {
  color: #dddddd;
  display: block;
  margin-bottom: 8px;
  font-weight: 800;
}

.financeiro-formas strong {
  color: var(--rosa-claro);
  font-size: 1.2rem;
}

.financeiro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.financeiro-bloco {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 26px;
  padding: 24px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.financeiro-bloco-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.financeiro-bloco-topo h2 {
  margin: 0;
}

.financeiro-bloco-topo span {
  color: var(--rosa-claro);
  font-weight: 900;
}

.financeiro-tabela {
  display: flex;
  flex-direction: column;
}

.financeiro-tabela-cabecalho,
.financeiro-linha {
  display: grid;
  grid-template-columns: 100px 90px 130px 1fr 90px 110px 70px 80px;
  gap: 12px;
  align-items: center;
}

.financeiro-tabela-cabecalho {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.financeiro-tabela-cabecalho span {
  color: var(--rosa-claro);
  font-size: 0.78rem;
  text-transform: uppercase;
  font-weight: 900;
}

.financeiro-linha {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.financeiro-linha:last-child {
  border-bottom: none;
}

.financeiro-linha span {
  color: #dddddd;
}

.financeiro-linha strong {
  color: #ffffff;
  text-align: right;
}

.financeiro-linha.tipo-entrada strong {
  color: #9dffbf;
}

.financeiro-linha.tipo-saida strong {
  color: #ff8fab;
}

.financeiro-linha.tipo-investimento strong {
  color: #9dc7ff;
}

.financeiro-a-receber-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.financeiro-a-receber-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 196, 0, 0.08);
  border: 1px solid rgba(255, 196, 0, 0.22);
}

.financeiro-a-receber-item strong {
  display: block;
  color: #ffffff;
  margin-bottom: 5px;
}

.financeiro-a-receber-item span,
.financeiro-a-receber-item small {
  display: block;
  color: #dddddd;
  margin-bottom: 4px;
}

.financeiro-a-receber-item .valor-pendente {
  color: #ffd86b;
  white-space: nowrap;
  text-align: right;
}

.financeiro-a-receber-item a {
  display: inline-flex;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--rosa);
  font-weight: 900;
  font-size: 0.85rem;
}

@media (max-width: 1180px) {
  .financeiro-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .financeiro-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .financeiro-filtro-form {
    grid-template-columns: 1fr;
  }

  .financeiro-cards,
  .financeiro-formas {
    grid-template-columns: 1fr;
  }

  .financeiro-tabela-cabecalho {
    display: none;
  }

  .financeiro-linha {
    display: block;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
  }

  .financeiro-linha span,
  .financeiro-linha strong {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    text-align: right;
    padding: 5px 0;
  }

  .financeiro-linha span::before,
  .financeiro-linha strong::before {
    content: attr(data-label);
    color: var(--rosa-claro);
    font-weight: 900;
    text-align: left;
  }

  .financeiro-a-receber-item {
    flex-direction: column;
  }

  .financeiro-a-receber-item .valor-pendente {
    text-align: left;
  }
}

/* ======================================================
   AJUSTE VISUAL DO FILTRO FINANCEIRO
====================================================== */

.financeiro-filtro-box {
  background:
    radial-gradient(circle at top right, rgba(230, 0, 126, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 28px;
  padding: 26px;
  margin-bottom: 30px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

.financeiro-filtro-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 18px;
  align-items: end;
}

.financeiro-filtro-form .campo-form {
  margin: 0;
}

.financeiro-filtro-form label {
  display: block;
  color: #ffffff;
  font-weight: 900;
  margin-bottom: 10px;
  font-size: 1rem;
}

.financeiro-filtro-form select {
  width: 100%;
  height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.045));
  color: #ffffff;
  padding: 0 16px;
  font-size: 1rem;
  font-weight: 800;
  outline: none;
  appearance: none;
  cursor: pointer;
}

.financeiro-filtro-form select:focus {
  border-color: rgba(230, 0, 126, 0.75);
  box-shadow: 0 0 0 4px rgba(230, 0, 126, 0.16);
}

.financeiro-filtro-form select option {
  background: #181818;
  color: #ffffff;
}

.financeiro-filtro-form .botao {
  height: 54px;
  padding: 0 30px;
  white-space: nowrap;
  align-self: end;
}

/* Um título opcional dentro do filtro, caso queira colocar depois */
.financeiro-filtro-titulo {
  margin-bottom: 18px;
}

.financeiro-filtro-titulo span {
  display: inline-flex;
  color: var(--rosa-claro);
  font-weight: 900;
  margin-bottom: 6px;
}

.financeiro-filtro-titulo h2 {
  color: #ffffff;
  font-size: 1.7rem;
  margin: 0;
}

/* Celular */
@media (max-width: 760px) {
  .financeiro-filtro-box {
    padding: 22px;
  }

  .financeiro-filtro-form {
    grid-template-columns: 1fr;
  }

  .financeiro-filtro-form .botao {
    width: 100%;
    justify-content: center;
  }
}

/* ======================================================
   AJUSTE VISUAL DA DATA NA AGENDA
====================================================== */

.agenda-form-data input[type="date"] {
  height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.045));
  color: #ffffff;
  padding: 0 16px;
  font-size: 1rem;
  font-weight: 800;
  outline: none;
}

.agenda-form-data input[type="date"]:focus {
  border-color: rgba(230, 0, 126, 0.75);
  box-shadow: 0 0 0 4px rgba(230, 0, 126, 0.16);
}

.agenda-form-data input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

/* ======================================================
   COMPROVANTE NO FINANCEIRO
====================================================== */

.link-comprovante-financeiro {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(230, 0, 126, 0.15);
  border: 1px solid rgba(230, 0, 126, 0.35);
  color: var(--rosa-claro);
  font-weight: 900;
  font-size: 0.82rem;
}

.link-comprovante-financeiro:hover {
  background: var(--rosa);
  color: #ffffff;
}

/* ======================================================
   CLIENTES ADMINISTRATIVO
====================================================== */

.clientes-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.clientes-filtro-box {
  background:
    radial-gradient(circle at top right, rgba(230, 0, 126, 0.14), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 26px;
  padding: 22px;
  margin-bottom: 24px;
}

.clientes-filtro-form {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: end;
}

.clientes-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cliente-card-admin {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.cliente-card-info strong {
  display: block;
  color: #ffffff;
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.cliente-card-info span,
.cliente-card-info small {
  display: block;
  color: #dddddd;
  margin-bottom: 4px;
}

.cliente-card-metricas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.cliente-card-metricas div {
  padding: 12px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.cliente-card-metricas span {
  display: block;
  color: var(--rosa-claro);
  font-size: 0.78rem;
  font-weight: 900;
  margin-bottom: 5px;
}

.cliente-card-metricas strong {
  color: #ffffff;
  font-size: 0.95rem;
}

.cliente-card-acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.aniversariantes-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aniversariante-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(230, 0, 126, 0.08);
  border: 1px solid rgba(230, 0, 126, 0.24);
}

.aniversariante-item strong {
  display: block;
  color: #ffffff;
  margin-bottom: 5px;
}

.aniversariante-item span {
  display: block;
  color: var(--rosa-claro);
  font-weight: 900;
  margin-bottom: 4px;
}

.aniversariante-item small {
  display: block;
  color: #dddddd;
}

.aniversariante-item a {
  align-self: center;
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-weight: 900;
}

.aniversariante-item a:hover {
  background: var(--rosa);
}

.texto-suave {
  color: #dddddd;
  line-height: 1.7;
}

@media (max-width: 1100px) {
  .clientes-layout {
    grid-template-columns: 1fr;
  }

  .cliente-card-admin {
    grid-template-columns: 1fr;
  }

  .cliente-card-acoes {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .clientes-filtro-form {
    grid-template-columns: 1fr;
  }

  .clientes-filtro-form .botao {
    width: 100%;
    justify-content: center;
  }

  .cliente-card-metricas {
    grid-template-columns: 1fr;
  }

  .cliente-card-acoes .botao {
    width: 100%;
    justify-content: center;
  }
}

/* ======================================================
   MENU ADMIN CENTRALIZADO COM DROPDOWN
====================================================== */

.admin-dropdown {
  position: relative;
  display: inline-flex;
}

.admin-dropbtn {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: 0.25s ease;
}

.admin-dropbtn:hover,
.admin-dropbtn.ativo {
  background: var(--rosa);
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(230, 0, 126, 0.35);
}

.admin-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 240px;
  padding: 12px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
  display: none;
  z-index: 1000;
}

.admin-dropdown:hover .admin-dropdown-menu,
.admin-dropdown:focus-within .admin-dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-dropdown {
  position: relative;
  display: inline-flex;
  padding-bottom: 12px;
  margin-bottom: -12px;
}

.admin-dropdown-menu a {
  display: block;
  padding: 13px 14px;
  border-radius: 14px;
  color: #191919;
  font-weight: 900;
  text-decoration: none;
  transition: 0.2s ease;
}

.admin-dropdown-menu a:hover {
  background: rgba(230, 0, 126, 0.12);
  color: var(--rosa);
}

/* Evita que o menu fique gigante demais com os grupos */
.admin-menu {
  gap: 10px;
}

/* Responsivo do dropdown administrativo */
@media (max-width: 980px) {
  .admin-dropdown-menu {
    left: 0;
    right: auto;
  }

  .admin-dropbtn {
    min-height: 44px;
    padding: 0 16px;
    font-size: 0.92rem;
  }
}

@media (max-width: 640px) {
  .admin-dropdown {
    width: 100%;
  }

  .admin-dropbtn {
    width: 100%;
    justify-content: center;
  }

  .admin-dropdown-menu {
    width: 100%;
    min-width: 100%;
  }
}

/* ======================================================
   BUSCA DE CLIENTES - PAINEL ADMIN
====================================================== */

.clientes-filtro-box {
  background:
    radial-gradient(circle at top right, rgba(230, 0, 126, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035));
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 28px;
  padding: 26px;
  margin-bottom: 28px;
  box-shadow: 0 22px 55px rgba(0,0,0,0.28);
}

.clientes-filtro-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
  align-items: end;
}

.clientes-filtro-form .campo-form {
  margin: 0;
}

.clientes-filtro-form label {
  display: block;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 900;
  margin-bottom: 10px;
}

.clientes-filtro-form input[type="text"] {
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(0,0,0,0.28);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  outline: none;
  transition: 0.25s ease;
}

.clientes-filtro-form input[type="text"]::placeholder {
  color: rgba(255,255,255,0.55);
}

.clientes-filtro-form input[type="text"]:focus {
  border-color: var(--rosa);
  box-shadow: 0 0 0 4px rgba(230, 0, 126, 0.18);
  background: rgba(0,0,0,0.38);
}

.clientes-filtro-form .botao {
  min-height: 54px;
  padding-inline: 28px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .clientes-filtro-form {
    grid-template-columns: 1fr;
  }

  .clientes-filtro-form .botao {
    width: 100%;
    justify-content: center;
  }
}

/* ======================================================
   PÁGINA INDIVIDUAL DA CLIENTE
====================================================== */

.cliente-detalhe-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.cliente-detalhe-lateral {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.cliente-detalhe-principal {
  min-width: 0;
}

.cliente-perfil-box {
  text-align: center;
}

.cliente-avatar-admin {
  width: 88px;
  height: 88px;
  margin: 0 auto 18px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--rosa), #7a1748);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 2.8rem;
  font-weight: 900;
  box-shadow: 0 18px 40px rgba(230, 0, 126, 0.35);
}

.cliente-perfil-box h2 {
  color: #ffffff;
  font-size: 1.6rem;
  margin-bottom: 22px;
}

.cliente-info-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cliente-info-lista div {
  padding: 14px;
  border-radius: 18px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.10);
  text-align: left;
}

.cliente-info-lista span {
  display: block;
  color: var(--rosa-claro);
  font-size: 0.8rem;
  font-weight: 900;
  margin-bottom: 5px;
}

.cliente-info-lista strong {
  color: #ffffff;
  font-size: 0.95rem;
}

.cliente-resumo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cliente-resumo-grid article {
  padding: 16px;
  border-radius: 18px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.10);
}

.cliente-resumo-grid span {
  display: block;
  color: var(--rosa-claro);
  font-size: 0.78rem;
  font-weight: 900;
  margin-bottom: 8px;
}

.cliente-resumo-grid strong {
  color: #ffffff;
  font-size: 1.4rem;
}

.cliente-historico-lista {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cliente-historico-card {
  padding: 22px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(230, 0, 126, 0.12), transparent 34%),
    rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.12);
}

.cliente-historico-topo {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.cliente-historico-data {
  display: inline-flex;
  color: var(--rosa-claro);
  font-weight: 900;
  margin-bottom: 8px;
}

.cliente-historico-card h3 {
  color: #ffffff;
  font-size: 1.35rem;
  margin-bottom: 6px;
}

.cliente-historico-card p {
  color: #dddddd;
  line-height: 1.6;
}

.cliente-historico-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.status-atendimento,
.status-pagamento {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
  color: #ffffff;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
}

.status-concluido,
.status-pagamento-pago {
  background: rgba(33, 150, 83, 0.22);
  border-color: rgba(33, 150, 83, 0.45);
  color: #b8ffd3;
}

.status-agendado,
.status-confirmado,
.status-pagamento-parcial {
  background: rgba(255, 193, 7, 0.15);
  border-color: rgba(255, 193, 7, 0.38);
  color: #ffe18a;
}

.status-cancelado,
.status-faltou,
.status-pagamento-cancelado,
.status-pagamento-pendente {
  background: rgba(230, 0, 126, 0.14);
  border-color: rgba(230, 0, 126, 0.36);
  color: var(--rosa-claro);
}

.cliente-historico-valores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.cliente-historico-valores div {
  padding: 13px;
  border-radius: 16px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.10);
}

.cliente-historico-valores span {
  display: block;
  color: var(--rosa-claro);
  font-size: 0.76rem;
  font-weight: 900;
  margin-bottom: 5px;
}

.cliente-historico-valores strong {
  color: #ffffff;
  font-size: 0.95rem;
}

.cliente-procedimento-box {
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.12);
}

.cliente-procedimento-box span {
  display: block;
  color: var(--rosa-claro);
  font-weight: 900;
  margin-bottom: 8px;
}

.cliente-observacao-box {
  background: rgba(255, 193, 7, 0.08);
  border-color: rgba(255, 193, 7, 0.20);
}

.cliente-comprovante-box {
  margin-top: 16px;
}

.valor-pendente {
  color: #ff8bc5 !important;
}

@media (max-width: 1050px) {
  .cliente-detalhe-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .cliente-historico-topo {
    flex-direction: column;
  }

  .cliente-historico-status {
    align-items: flex-start;
  }

  .cliente-historico-valores {
    grid-template-columns: 1fr;
  }

  .cliente-resumo-grid {
    grid-template-columns: 1fr;
  }

  .cliente-historico-card .cliente-card-acoes .botao {
    width: 100%;
    justify-content: center;
  }
}

/* ======================================================
   MENSAGENS RECEBIDAS - ADMIN
====================================================== */

.mensagens-lista {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mensagem-card-admin {
  padding: 24px;
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(230, 0, 126, 0.13), transparent 34%),
    rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: 0 20px 45px rgba(0,0,0,0.22);
}

.mensagem-card-topo {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.mensagem-id {
  display: inline-flex;
  color: var(--rosa-claro);
  font-weight: 900;
  margin-bottom: 6px;
}

.mensagem-card-topo h3 {
  color: #ffffff;
  font-size: 1.35rem;
  margin-bottom: 6px;
}

.mensagem-card-topo p {
  color: #dddddd;
}

.mensagem-servico {
  display: inline-flex;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(230, 0, 126, 0.14);
  border: 1px solid rgba(230, 0, 126, 0.35);
  color: var(--rosa-claro);
  font-weight: 900;
  white-space: nowrap;
}

.mensagem-contatos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.mensagem-contatos div {
  padding: 15px;
  border-radius: 18px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
}

.mensagem-contatos span,
.mensagem-texto span {
  display: block;
  color: var(--rosa-claro);
  font-weight: 900;
  font-size: 0.82rem;
  margin-bottom: 7px;
}

.mensagem-contatos strong {
  color: #ffffff;
}

.mensagem-texto {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 18px;
}

.mensagem-texto p {
  color: #eeeeee;
  line-height: 1.7;
}

@media (max-width: 760px) {
  .mensagem-card-topo {
    flex-direction: column;
  }

  .mensagem-contatos {
    grid-template-columns: 1fr;
  }

  .mensagem-servico {
    white-space: normal;
  }

  .mensagem-card-admin .cliente-card-acoes .botao {
    width: 100%;
    justify-content: center;
  }
}

/* ======================================================
   RELATÓRIO FINANCEIRO MENSAL
====================================================== */

.relatorio-folha {
  background: #ffffff;
  color: #222222;
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.30);
}

.relatorio-cabecalho {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding-bottom: 22px;
  border-bottom: 2px solid #eeeeee;
  margin-bottom: 24px;
}

.relatorio-cabecalho span {
  color: #df0c64;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.relatorio-cabecalho h2 {
  color: #111111;
  font-size: 2rem;
  margin: 8px 0;
}

.relatorio-cabecalho p {
  color: #555555;
}

.relatorio-logo img {
  width: 86px;
  height: 86px;
  object-fit: cover;
  border-radius: 22px;
}

.relatorio-periodo {
  margin-bottom: 24px;
}

.relatorio-periodo h3 {
  color: #111111;
  font-size: 1.7rem;
  margin-bottom: 6px;
}

.relatorio-periodo p {
  color: #666666;
}

.relatorio-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.relatorio-cards article,
.relatorio-mini-grid article {
  padding: 18px;
  border-radius: 18px;
  background: #f7f7f7;
  border: 1px solid #e7e7e7;
}

.relatorio-cards span,
.relatorio-mini-grid span {
  display: block;
  color: #666666;
  font-size: 0.82rem;
  font-weight: 900;
  margin-bottom: 8px;
}

.relatorio-cards strong,
.relatorio-mini-grid strong {
  display: block;
  color: #111111;
  font-size: 1.15rem;
}

.relatorio-positivo {
  background: #eaf8ef !important;
  border-color: #b8e8c5 !important;
}

.relatorio-positivo strong {
  color: #1f7a3d !important;
}

.relatorio-negativo {
  background: #ffeaf1 !important;
  border-color: #ffc4d8 !important;
}

.relatorio-negativo strong {
  color: #b00045 !important;
}

.relatorio-secao {
  margin-top: 30px;
}

.relatorio-secao h3 {
  color: #111111;
  font-size: 1.3rem;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eeeeee;
}

.relatorio-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.relatorio-tabela {
  border: 1px solid #eeeeee;
  border-radius: 18px;
  overflow: hidden;
}

.relatorio-tabela-head,
.relatorio-tabela-linha {
  display: grid;
  grid-template-columns: 110px 150px 1fr 100px 120px;
  gap: 12px;
  align-items: center;
}

.relatorio-tabela-head {
  background: #f2f2f2;
  padding: 12px 16px;
}

.relatorio-tabela-head span {
  color: #333333;
  font-weight: 900;
  font-size: 0.82rem;
  text-transform: uppercase;
}

.relatorio-tabela-linha {
  padding: 13px 16px;
  border-top: 1px solid #eeeeee;
}

.relatorio-tabela-linha span {
  color: #444444;
}

.relatorio-tabela-linha strong {
  color: #111111;
  text-align: right;
}

.relatorio-vazio {
  color: #666666;
  background: #f7f7f7;
  border: 1px solid #eeeeee;
  padding: 16px;
  border-radius: 16px;
}

.relatorio-assinatura {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 42px;
  padding-top: 24px;
  border-top: 2px solid #eeeeee;
}

.relatorio-assinatura div {
  padding: 16px;
  border-radius: 16px;
  background: #f7f7f7;
}

.relatorio-assinatura span {
  display: block;
  color: #666666;
  font-weight: 900;
  margin-bottom: 10px;
}

.relatorio-assinatura strong {
  color: #111111;
}

@media (max-width: 1100px) {
  .relatorio-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .relatorio-mini-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .relatorio-tabela-head,
  .relatorio-tabela-linha {
    grid-template-columns: 1fr;
  }

  .relatorio-tabela-head {
    display: none;
  }

  .relatorio-tabela-linha strong {
    text-align: left;
  }
}

@media (max-width: 720px) {
  .relatorio-folha {
    padding: 22px;
  }

  .relatorio-cabecalho {
    flex-direction: column;
    align-items: flex-start;
  }

  .relatorio-cards,
  .relatorio-mini-grid,
  .relatorio-assinatura {
    grid-template-columns: 1fr;
  }
}

/* Impressão / salvar PDF */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .admin-topo,
  .relatorio-nao-imprimir,
  .rodape {
    display: none !important;
  }

  .admin-area {
    padding: 0 !important;
  }

  .container {
    width: 100% !important;
    max-width: none !important;
  }

  .relatorio-folha {
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  .relatorio-secao {
    page-break-inside: avoid;
  }
}

/* ======================================================
   CORREÇÃO ALERTAS DO LOGIN ADMIN
====================================================== */

.admin-login-card .alerta.sucesso {
  background: #dff7e8;
  border: 1px solid #7ed9a2;
  color: #145c32;
  font-weight: 800;
}

.admin-login-card .alerta.erro {
  background: #ffe2e8;
  border: 1px solid #ff8ca9;
  color: #8a1230;
  font-weight: 800;
}

/* ======================================================
   CORREÇÃO FINANCEIRO - COLUNA AÇÃO VAZANDO
====================================================== */

.financeiro-grid,
.financeiro-layout,
.financeiro-conteudo {
  align-items: flex-start;
}

/* Garante que o card de lançamentos não jogue conteúdo para fora */
.financeiro-lancamentos,
.financeiro-lista-box,
.lancamentos-mes-box {
  overflow: hidden;
}

/* Se a tabela for larga demais, ela rola dentro do próprio card */
.financeiro-tabela-wrapper,
.financeiro-tabela-area {
  width: 100%;
  overflow-x: auto;
}

/* Estrutura da tabela de lançamentos */
.financeiro-tabela {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

/* Cabeçalho e linhas com a coluna Ação dentro do card */
.financeiro-tabela-head,
.financeiro-tabela-linha {
  display: grid;
  grid-template-columns:
    minmax(78px, 0.8fr)
    minmax(78px, 0.8fr)
    minmax(115px, 1fr)
    minmax(150px, 1.4fr)
    minmax(80px, 0.8fr)
    minmax(95px, 0.9fr)
    minmax(55px, 0.5fr)
    minmax(82px, 0.7fr);
  gap: 12px;
  align-items: center;
}

/* Evita que textos grandes arrebentem a grade */
.financeiro-tabela-head span,
.financeiro-tabela-linha span,
.financeiro-tabela-linha strong {
  min-width: 0;
  word-break: break-word;
}

/* Coluna de valor alinhada */
.financeiro-tabela-linha strong {
  white-space: nowrap;
}

/* Botão Editar dentro da própria coluna */
.financeiro-tabela-linha .botao,
.financeiro-tabela-linha .botao-mini,
.financeiro-tabela-linha a[href*="editar-lancamento"] {
  justify-self: start;
  white-space: nowrap;
}

/* Garante que o card A receber não receba conteúdo vazado */
.financeiro-a-receber,
.a-receber-box {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* Ajuste específico para telas menores */
@media (max-width: 1100px) {
  .financeiro-tabela {
    overflow-x: auto;
  }

  .financeiro-tabela-head,
  .financeiro-tabela-linha {
    min-width: 850px;
  }
}

@media (max-width: 768px) {
  .financeiro-tabela-head,
  .financeiro-tabela-linha {
    min-width: 820px;
  }
}

/* ======================================================
   CORREÇÃO MOBILE - MENU ADMINISTRATIVO
   Fios com Formas
====================================================== */

.admin-menu-toggle {
  display: none;
  border: none;
  background: linear-gradient(135deg, #e6007e, #ff4fb2);
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 900;
  padding: 12px 20px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(230, 0, 126, 0.35);
}

@media (max-width: 768px) {

  .admin-topo {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .admin-topo-conteudo {
    min-height: auto;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px !important;
  }

  .admin-topo .logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .admin-topo .logo {
    width: 58px;
    height: 58px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .admin-topo .marca-texto strong {
    font-size: 1.05rem;
    line-height: 1.1;
  }

  .admin-topo .marca-texto span {
    font-size: 0.82rem;
  }

  .admin-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .admin-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 12px;
    right: 12px;
    background: rgba(17, 17, 17, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  .admin-menu.aberto {
    display: flex !important;
  }

  .admin-menu a,
  .admin-dropbtn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    text-align: center;
    border-radius: 16px;
    font-size: 1rem;
  }

  .admin-dropdown {
    width: 100%;
    display: block;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .admin-dropdown-menu {
    position: static !important;
    display: none !important;
    width: 100%;
    min-width: 100%;
    margin-top: 8px;
    padding: 8px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: none;
  }

  .admin-dropdown.aberto .admin-dropdown-menu {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
  }

  .admin-dropdown:hover .admin-dropdown-menu {
    display: none;
  }

  .admin-dropdown.aberto:hover .admin-dropdown-menu {
    display: flex;
  }

  .admin-dropdown-menu a {
    color: #191919;
    background: #f7f7f7;
    border-radius: 12px;
  }

  .admin-menu a.sair {
    margin-top: 4px;
    border-color: rgba(255, 255, 255, 0.25);
  }
}

@media (max-width: 420px) {
  .admin-topo-conteudo {
    padding: 12px 10px !important;
  }

  .admin-topo .logo {
    width: 50px;
    height: 50px;
  }

  .admin-topo .marca-texto strong {
    font-size: 0.95rem;
  }

  .admin-topo .marca-texto span {
    font-size: 0.75rem;
  }

  .admin-menu-toggle {
    padding: 10px 14px;
    font-size: 0.9rem;
  }
}