/* ==========================================================================
   milspec.css — v4.3 (reorganizado, sem alterações de layout/visual)
   --------------------------------------------------------------------------
   ÍNDICE
   0) Variáveis & Base
   1) Utilitários & Acessibilidade
   2) Layout global
   3) Header / Navegação
   4) Botões
   5) Hero (edge / promo) + Vídeo & Mute
   6) Cartões / Galeria / Álbuns & Carrossel
   7) Metas de Evento (chips) & Ações
   8) Rodapé social
   9) Ajustes Responsivos (por breakpoint)
   ========================================================================== */


/* ========== 0) VARIÁVEIS & BASE ========================================= */

:root{
  /* Cores e tokens */
  --bg:#0b0e10;
  --bg-soft:#0f1317;
  --ink:#e6eaef;
  --muted:#a7b0bb;
  --acc:#8bbf3d;
  --acc-2:#e7c888;
  --line:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.05);
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --radius:16px;
  --maxw:1280px;

  /* Áreas seguras (notch) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

*,
*::before,
*::after{ box-sizing:border-box }

html, body{ overflow-x:hidden }

html[data-theme="dark"], body{
  background:
    radial-gradient(1200px 600px at 25% -10%, #16202a 0%, transparent 60%),
    radial-gradient(800px 400px at 110% 0%, #111924 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-size:17px; line-height:1.6;
}


/* ========== 1) UTILITÁRIOS & ACESSIBILIDADE ============================ */

/* Client portal unread indicator */
.row-item .os-code{display:flex; align-items:center; gap:6px;}
.row-item.has-unread{
  position:relative;
  background:linear-gradient(90deg, rgba(255,204,0,.32), rgba(255,187,0,.12));
  border-radius:14px;
  border-bottom:1px solid rgba(255,204,0,.45) !important;
  box-shadow:0 0 0 1px rgba(255,214,0,.35), 0 12px 24px rgba(255,186,0,.18);
  transition:background .25s ease, box-shadow .25s ease, border-bottom-color .25s ease;
}
.row-item.has-unread .os-code::before{content:"\2709"; color:#ffe082; font-size:1rem;}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0
}

:focus-visible{ outline:2px dashed var(--acc); outline-offset:2px }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
}

/* evitar overflow de textos compridos */
:where(h1,h2,h3,p,.muted,.badge,.wordmark){ overflow-wrap:anywhere; }


/* ========== 2) LAYOUT GLOBAL =========================================== */

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 20px;
  /* notch-safe padding horizontal em telas estreitas */
  padding-left:max(20px,var(--safe-left));
  padding-right:max(20px,var(--safe-right));
}

/* inputs full-width em telas pequenas */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], textarea, select{
  width:100%; max-width:100%; min-width:0; display:block;
}

/* Cartões genéricos */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); backdrop-filter:blur(10px)
}

/* ===== Client > Réplicas: cores dos botões ===== */
#repList .row [data-save].btn{
  /* já é verde pela .btn, mas reforço para ficar igual em todos os temas */
  border-color: var(--acc);
  background: linear-gradient(180deg, var(--acc), #6fa22d);
  color: #0b0e10;
  box-shadow: 0 6px 18px rgba(139,191,61,.25);
}

#repList .row [data-del].btn{
  border: 1px solid #ff5a7a;
  background: linear-gradient(180deg, #ff7b8a, #ff5a7a);
  color: #0b0e10;
  box-shadow: 0 6px 18px rgba(255,90,122,.25);
}
#repList .row [data-del].btn:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}


/* ========== 3) HEADER / NAVEGAÇÃO ===================================== */

.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(to bottom, rgba(12,14,16,.85), rgba(12,14,16,.55));
  border-bottom:1px solid var(--line);
}

.navbar{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; padding:14px 0; min-width:0 }

.brand{ flex-shrink:0; display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); min-width:0 }
.brand .logo{ height:60px; width:auto }
.wordmark{ font:800 20px/1 "Black Ops One", system-ui, sans-serif; letter-spacing:.06em; white-space:nowrap }
.badge{ margin-left:12px; font-size:14px; padding:2px 8px; border:1px solid var(--line); border-radius:999px; color:var(--muted) }

.nav{
  display:inline-flex; align-items:center; gap:6px; flex:1 1 auto; min-width:0; overflow:visible;
}
.nav::-webkit-scrollbar{ display:none }
.nav a{ display:inline-flex; font-size:1.06rem; margin:0; padding:8px 12px; white-space:nowrap }
.nav a:hover{ opacity:1 }
.nav a:not(.btn):hover{ background:rgba(255,255,255,.06) }

.nav-toggle{
  display:none; margin-left:auto;
  width:42px; height:42px; border-radius:10px; background:transparent;
  border:1px solid var(--line); color:var(--ink);
}

/* botão login na nav */
.header .nav .btn{ color:#0b0e10; white-space:nowrap }
.header .nav .btn:hover{
  filter:brightness(1.1); transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(139,191,61,.35)
}
.btn.btn--login{
  border:1px solid var(--acc); color:#0b0e10;
  background:linear-gradient(180deg, var(--acc), #6fa22d);
  border-radius:999px; padding:10px 16px; font-weight:700; margin-left:6px;
}

/* evitar corte dos itens da nav e do Logout */
.header .nav > * { flex:0 0 auto; min-width:0 }
.header .nav #logoutBtn { white-space:nowrap }
.header .nav #logoutBtn.btn--danger{
  border-color:#ff5a7a;
  background:linear-gradient(180deg, #ff7b8a, #ff5a7a);
  color:#0b0e10;
}


/* ========== 4) BOTÕES ================================================== */

.btn, .btn--ghost{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:10px 16px;
  font-weight:700; letter-spacing:.02em;
  text-decoration:none; cursor:pointer;
}
.btn{
  border:1px solid var(--acc);
  background:linear-gradient(180deg, var(--acc), #6fa22d);
  color:#0b0e10;
  box-shadow:0 6px 18px rgba(139,191,61,.25);
}
.btn:hover{ filter:brightness(1.05); transform:translateY(-1px) }

.btn--ghost{
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
}
.btn--ghost:hover{ background:rgba(255,255,255,.06) }

/* danger/logout */
.btn--danger{
  border:1px solid #ff5a7a;
  background:linear-gradient(180deg, #ff7b8a, #ff5a7a);
  color:#0b0e10;
  box-shadow:0 6px 18px rgba(255,90,122,.25);
}
.btn--danger:hover{ filter:brightness(1.05); transform:translateY(-1px) }

/* variantes adicionais */
.btn--blue{
  border:1px solid #4da3ff;
  background:linear-gradient(180deg, #5ab1ff, #3c90e6);
  color:#0b0e10;
  box-shadow:0 6px 18px rgba(90,177,255,.25);
}
.btn--blue:hover{ filter:brightness(1.05); transform:translateY(-1px) }

.btn--sm{ padding:6px 10px; font-size:.92rem }

/* toggles para cliente (aprovado/recusado/pendente) */
.btn--green{
  border:1px solid #2ecc71;
  background:linear-gradient(180deg, #2ecc71, #25b866);
  color:#0b0e10;
  box-shadow:0 6px 18px rgba(46,204,113,.22);
}
.btn--red{
  border:1px solid #ff7675;
  background:linear-gradient(180deg, #ff7675, #ff5a5f);
  color:#0b0e10;
  box-shadow:0 6px 18px rgba(255,118,117,.22);
}
.btn--neutral{
  border:1px solid #c7d0da;
  background:linear-gradient(180deg, #e6ebf2, #dbe3ec);
  color:#0b0e10;
  box-shadow:none;
}

/* badges de estado com texto preto */
.badge--ok{ background:#2ecc71; color:#0b0e10 }
.badge--bad{ background:#ff7675; color:#0b0e10 }
.badge--light{ background:#e0e6ed; color:#0b0e10 }

/* ===================== Client: Réplicas (cards) ===================== */
#repList .row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px;
  margin-bottom:10px;
}
#repList .row .input{ flex:1 1 160px; min-width:140px }
#repList .row .rNotes{ flex:2 1 240px; min-width:220px }
#repList .row .rFps,
#repList .row .rBBg,
#repList .row .rEJ{ flex:0 0 120px; max-width:120px }
#repList .row [data-save]{ margin-left:auto }


/* ========== 5) HERO (EDGE/PROMO) + VÍDEO & MUTE ======================== */

.hero--edge{ position:relative; min-height:85vh; display:grid; align-items:center }
.hero__bg{ position:absolute; inset:0; overflow:hidden; z-index:0 }
.hero__bg img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.05) brightness(.9) }
.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,14,16,.75) 0%, rgba(11,14,16,.35) 45%, rgba(11,14,16,.85) 100%),
    radial-gradient(80vw 40vh at 20% 40%, rgba(139,191,61,.15), transparent 60%);
}
.hero__content{ position:relative; z-index:1; max-width:820px; padding:48px 0 }
.kicker{ color:var(--acc); font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin-bottom:10px }
.hero__title{ font:800 56px/1 "Black Ops One", system-ui, sans-serif; margin:0 0 10px; letter-spacing:.03em }
.hero__subtitle{ color:var(--muted); font-size:1.15rem; margin:0 0 22px }

/* variante promo */
.hero--promo .hero__bg img{ filter:none !important }
.hero--promo .hero__overlay{ background:none }
.hero--promo .hero__content{
  position:absolute;
  left:clamp(12px, 4vw, 48px);
  bottom:clamp(12px, 8vh, 96px);
  max-width:min(560px, 92vw);
  padding:0; z-index:2;
}
.hero--promo .hero__card{
  background:linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.55));
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  padding:16px 18px;
}
.hero--promo .kicker{ font-size:.72rem; margin-bottom:6px }
.hero--promo .hero__title{ font-size:clamp(28px, 4.2vw, 40px); margin:0 0 8px }
.hero--promo .hero__subtitle{ font-size:clamp(14px, 2.2vw, 18px); margin:0 0 14px }

/* vídeo e botão mute (notch-safe) */
.hero__bg video{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Home: grid dos 3 cards abaixo do hero */
.home-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.mute-btn{
  position:absolute;
  top:calc(60px + var(--safe-top));
  right:max(180px, var(--safe-right));
  background:rgba(0,0,0,0.6);
  color:#fff; border:none; border-radius:50%;
  font-size:40px; padding:14px; cursor:pointer; z-index:10;
  transition:background .3s;
}
.mute-btn:hover{ background:rgba(0,0,0,0.8) }

/* Hero promo: topo-esquerda + tipografia menor em telas < 2K (fora do mobile) */
@media (min-width: 601px) and (max-width: 2048px){
  .hero--promo .hero__content{
    position: absolute;
    top:  calc(var(--safe-top) + clamp(16px, 6vh, 96px)) !important;
    bottom: auto !important;
    left:  max(80px, var(--safe-left)) !important;
    right: auto !important;
    max-width: min(480px, 40vw);
    z-index: 2;
  }

  /* Tipografia mais contida */
  .hero--promo .kicker{
    font-size: clamp(10px, 0.9vw, 12px);
    letter-spacing: .12em;
    margin-bottom: 6px;
  }
  .hero--promo .hero__title{
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.1;
    margin: 0 0 6px;
  }
  .hero--promo .hero__subtitle{
    font-size: clamp(13px, 1.2vw, 16px);
    line-height: 1.35;
    margin: 0 0 10px;
  }
  .hero--promo .hero__card{
    padding: 12px 14px;
    border-radius: 14px;
  }
}



/* ========== 6) GALERIA / ÁLBUNS & CARROSSEL ============================ */

.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media (max-width:900px){ .gallery-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .gallery-grid{ grid-template-columns:1fr } }

.gallery-grid .gallery-item{
  display:block; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:rgba(255,255,255,.03)
}
.gallery-grid img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s }
.gallery-grid .gallery-item:hover img{ transform:scale(1.03) }

/* Álbuns / carrossel */
.albums-grid{ display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)) }
.album-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:16px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,.2) }
.album-card__header{ padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.06) }
.album-card__title{ font:600 1.1rem/1.2 "Inter",system-ui,sans-serif; margin:0 }

.carousel{ position:relative; overflow:hidden }
.carousel__track{ display:flex; transition:transform .4s ease; will-change:transform }
.carousel__slide{ min-width:100%; margin:0 }
.carousel__img{ width:100%; height:360px; object-fit:cover; display:block }
.carousel__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.35);
  color:#fff; font-size:26px; line-height:42px; text-align:center; cursor:pointer; user-select:none
}
.carousel__prev{ left:10px } .carousel__next{ right:10px }
.carousel__nav:hover{ background:rgba(0,0,0,.55) }

.thumbs{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(72px,1fr);
  gap:8px; overflow-x:auto; padding:10px; border-top:1px solid rgba(255,255,255,.06)
}
.thumbs__item{
  padding:0; border:0; background:transparent; cursor:pointer;
  outline-offset:2px; border-radius:8px; overflow:hidden; position:relative
}
.thumbs__img{ width:100%; height:56px; object-fit:cover; display:block; filter:saturate(.9) }
.thumbs__item.is-active::after{
  content:""; position:absolute; inset:0; border:2px solid var(--acc); border-radius:8px; pointer-events:none
}


/* ========== 7) METAS DE EVENTO & AÇÕES ================================= */

.event-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 10px }
.chip{
  display:inline-flex; gap:6px; align-items:center;
  padding:6px 10px; border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.04); font-size:.95rem
}
.event-includes{ margin-top:8px }
.event-includes .includes{ margin:6px 0 0 0; padding-left:18px }

.event-photos{ display:flex; gap:8px; margin-top:10px }
.event-photos .photo{
  display:block; width:110px; height:74px;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:rgba(255,255,255,.03)
}
.event-photos img{ width:100%; height:100%; object-fit:cover }

.event-actions{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap }


/* ========== 8) RODAPÉ SOCIAL ========================================== */

.footer-social{ border-top:1px solid var(--line); margin-top:28px }
.footer-social__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:16px 20px;
}
.footer-social__copy{ margin:0; color:var(--muted); font:600 0.95rem/1.2 "Inter", system-ui, sans-serif }

.social{ display:flex; gap:10px }
.social__link{
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.06);
}
.social__link svg{ width:20px; height:20px; fill:#000; filter:drop-shadow(0 0 6px var(--acc)) }
.social__link:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(139,191,61,.25) }


/* ========== 9) AJUSTES RESPONSIVOS ===================================== */

/* 9.1) Desktop “médio” (densidade) */
@media (min-width:1025px) and (max-width:1240px){
  .navbar{ flex-wrap:wrap; align-items:flex-start }
  .brand{ margin-bottom:6px }
  .nav{ flex-basis:100%; order:2; flex-wrap:wrap; row-gap:6px }
  .nav a, .header .nav .btn{ padding:8px 10px }
  .brand .logo{ height:54px }
  .wordmark{ font-size:19px }
  .lang{ margin-left:auto }
}

/* 9.2) Mobile / tablets – navbar com GRID (brand à esquerda, burger à direita) */
@media (max-width:1024px){
  /* Navbar vira uma grade 2x2:
     ┌ brand ───────┬ burger ┐
     └────── nav (abre na 2ª linha) ┘ */
  .navbar{
    display:grid;
    grid-template-columns: 1fr auto;  /* brand | burger */
    grid-template-rows: auto auto;    /* linha 1 | linha 2 (menu) */
    align-items:center;
    column-gap:10px;
    row-gap:6px;
  }

  /* Brand ocupa a coluna 1 da 1ª linha; permite badge embaixo */
  .brand{
    grid-column:1; grid-row:1;
    display:flex; align-items:center; gap:10px;
    flex-wrap:wrap;       /* badge vai pra baixo */
    min-width:0;          /* permite truncar o wordmark */
  }
  .brand .wordmark{
    min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .brand .badge{
    flex:0 0 100%;        /* badge abaixo do brand */
    margin-top:4px;
    white-space:nowrap;
  }

  /* Burger preso na coluna 2 da 1ª linha, à direita */
  .nav-toggle{
    grid-column:2; grid-row:1;
    display:grid; place-items:center;
    justify-self:end;     /* cola na direita */
  }

  /* Menu abre ocupando a 2ª linha inteira */
  .nav{
    grid-column:1 / -1; grid-row:2;
    display:none;                   /* fechado por padrão */
    width:100%;
    flex-direction:column; align-items:stretch; gap:4px;
    padding:10px 0;

    /* rolagem interna quando crescer */
    max-height:calc(100dvh - 72px - var(--safe-top));
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .nav.open{ display:flex }

  /* Links ocupam a largura toda dentro do menu */
  .nav a, .btn.btn--login{ width:100%; padding:12px 14px; text-align:left }
  .lang{ width:100% } .lang select{ width:100% }
}

/* Micro-ajustes phone */
@media (max-width:600px){
  .brand .logo{ height:44px; }
  .wordmark{ font-size:18px; }
  .brand .badge{ font-size:12px; padding:2px 6px; }
}


/* 9.3) Phones menores: header mais flexível */
@media (max-width:860px){
  .navbar{ flex-wrap:wrap; gap:10px }
  .brand .logo{ height:48px }
  .wordmark{ font-size:18px; white-space:nowrap }
}

/* 9.4) Footer: empilha no mobile “médio” */
@media (max-width:680px){
  .footer-social__row{ flex-direction:column; align-items:flex-start }
}

/* 9.5) Ajustes gerais para <=600px */
@media (max-width:600px){
  .container{ padding:0 14px }

  .hero--edge{ min-height:70vh }
  .hero__title{ font-size:clamp(28px, 8vw, 40px) }
  .hero__subtitle{ font-size:clamp(14px, 4vw, 16px) }
  .hero__content{ padding:28px 0 }

  .gallery-grid{ grid-template-columns:1fr; gap:12px }
  .carousel__img{ height:220px }
  .thumbs{ gap:6px; padding:8px }
  .thumbs__img{ height:48px }

  .event-meta{ gap:6px }
  .chip{ font-size:.9rem; padding:6px 8px; max-width:100% }

  .btn, .btn--ghost, .btn--danger{ padding:12px 16px; width:100% }
  .event-actions{ flex-direction:column }

  .mute-btn{ font-size:28px; padding:10px }
}

/* 9.6) Modais e formulários empilhados */
@media (max-width:560px){
  #regModal .row{ flex-direction:column; align-items:stretch }
  #regModal .actions{ flex-direction:column }
  #regModal input, #regModal select, #regModal textarea{ width:100%; min-height:44px }
}

/* 9.7) Hero com dvh (quando suportado) */
@supports (height:100dvh){
  .hero--edge{ min-height:85dvh }
}

/* 9.8) Sem hover (touch) */
@media (hover:none){
  .btn:hover, .btn--ghost:hover, .btn--danger:hover{ transform:none; filter:none }
  .social__link:hover{ transform:none; box-shadow:0 0 0 1px rgba(0,0,0,.06) }
}

/* Esconde o card do hero apenas em telas pequenas */
@media (max-width:600px){
  .hero--promo .hero__card{ display:none !important; }
  /* Opcional: solta um pouco o conteúdo para não ficar “vazio” demais */
  .hero--promo .hero__content{
    left:16px; right:16px; bottom:20px; /* já está assim no teu CSS mobile */
    max-width:unset;
    padding:0; /* mantém o visual mais limpo */
  }
}

/* Hero menor APENAS na home (promo) */
@media (max-width:600px){
  .hero--promo.hero--edge{ min-height: 52vh; } /* mais enxuto na home */
}
@supports (height: 100dvh){
  @media (max-width:600px){
    .hero--promo.hero--edge{ min-height: 52dvh; }
  }
}



/* Tablet: opcionalmente cair para 2 colunas antes do mobile */
@media (max-width: 860px){
  .home-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: 1 coluna (empilhar) */
@media (max-width: 600px){
  .home-cards{
    grid-template-columns: 1fr;
    gap: 12px; /* um respiro menor no phone */
  }
}

/* =========================
   CLIENT PORTAL — Mobile UX (consolidado)
   ========================= */

/* Layout base (desktop) — documentação das classes */
.client-layout{ display:flex; gap:16px; align-items:flex-start; }
.client-aside{ width:260px; flex:0 0 260px; position:sticky; top:16px; }
.client-main{ flex:1; min-width:280px; display:flex; flex-direction:column; gap:16px; }

/* Tablet/Mobile: empilhar; menu vira bloco full-width NÃO-sticky e vertical */
@media (max-width: 860px){
  .client-layout{ flex-direction: column; align-items: stretch; }

  .client-aside{
    position: static !important;
    top: auto !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  .client-aside .vnav{
    display: flex !important;
    flex-direction: column !important; /* menu vertical (sem scroll lateral) */
    gap: 8px !important;
    overflow: visible !important;
    margin-top: 8px !important;
  }

  .client-aside .vnav .btn{
    width: 100%;            /* pílulas de largura total */
    min-height: 44px;
  }
}

/* Formularios em coluna no phone */
@media (max-width: 600px){
  #repForm .row,
  #acctForm .row,
  #acctPwdForm .row{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #accCc{ max-width: 100% !important; }
  #repForm .row .btn,
  #acctForm .row .btn,
  #acctPwdForm .row .btn{ width: 100%; }
}


/* ======================================================
   CLIENT > ORDRES DE SERVICE — Legibilidade (desktop/mobile)
   ====================================================== */

/* Lista de OS como grid de cartões */
#cPaneOrders #clientList{
  display: grid;
  gap: 12px;
}

/* Cada OS vira “cartão leve” */
#cPaneOrders #clientList > *{
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
}

/* Título (se houver) */
#cPaneOrders #clientList h4,
#cPaneOrders #clientList .title{
  margin: 0 0 6px 0;
  font: 600 1rem/1.2 "Inter", system-ui, sans-serif;
}

/* Status (chips) */
#cPaneOrders #clientList .pill,
#cPaneOrders #clientList .status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  font-size: .9rem;
  white-space: nowrap;
}
/* (opcional) cores por status */
#cPaneOrders #clientList .status[data-status="PENDING"]{    background:rgba(231,200,136,.14); color:#e7c888; }
#cPaneOrders #clientList .status[data-status="IN_PROGRESS"]{background:rgba(139,191,61,.14);  color:#8bbf3d; }
#cPaneOrders #clientList .status[data-status="DONE"]{       background:rgba(85,239,196,.16);  color:#55efc4; }
#cPaneOrders #clientList .status[data-status="CANCELLED"]{  background:rgba(255,90,122,.16);  color:#ff7b8a; }

/* === Metadados/topo da OS ===================================== */
/* ATENÇÃO: só os .row DIRETOS dentro do cartão (evita pegar sublistas!) */
#cPaneOrders #clientList > * > .row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#cPaneOrders #clientList .field{
  display: flex;
  gap: 6px;
  min-width: 240px;
  flex: 1 1 260px;
}
#cPaneOrders #clientList .label{ color: var(--muted); min-width: 110px; }
#cPaneOrders #clientList .value{ flex: 1 1 auto; overflow-wrap: anywhere; }

/* Ações (botões) */
#cPaneOrders #clientList .actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
#cPaneOrders #clientList .actions .btn{ min-height: 40px; }

/* Tablet: campos respiram melhor */
@media (max-width: 860px){
  #cPaneOrders #clientList .field{ flex: 1 1 100%; }
}

/* Mobile: empilha e ações em 2 colunas */
@media (max-width: 600px){
  #cPaneOrders #clientList > * > .row{
    flex-direction: column;
    gap: 6px;
  }
  #cPaneOrders #clientList .actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #cPaneOrders #clientList .actions .btn{
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-size: .95rem;
  }
  #cPaneOrders #clientList input,
  #cPaneOrders #clientList textarea,
  #cPaneOrders #clientList select{
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }
}

/* === Peças/itens dentro da OS (compatível com lista OU tabela) ====== */

/* TABELA de peças: mantém tabela, mas com scroll horizontal no phone */
#cPaneOrders #clientList table{
  width: 100%;
  border-collapse: collapse;
}
#cPaneOrders #clientList table th,
#cPaneOrders #clientList table td{
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 600px){
  #cPaneOrders #clientList table{ display:block; overflow-x:auto; }
}

/* LISTA de peças (ex.: <div class="list"><div class="row">…</div>…</div>) */
#cPaneOrders #clientList .list{
  display: grid;
  gap: 8px;
}
/* cada item da lista vira grid com colunas típicas: nome | qnt | preço | ações */
#cPaneOrders #clientList .list > .row,
#cPaneOrders #clientList .list > .item,
#cPaneOrders #clientList .list > li{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
}
#cPaneOrders #clientList .list > * > *{ min-width: 0; }

@media (max-width: 860px){
  /* no tablet, 3 colunas e ações embaixo */
  #cPaneOrders #clientList .list > .row,
  #cPaneOrders #clientList .list > .item,
  #cPaneOrders #clientList .list > li{
    grid-template-columns: 2fr 1fr 1fr; /* nome | qnt | preço */
  }
  #cPaneOrders #clientList .list > * .actions{
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
  }
  #cPaneOrders #clientList .list > * .actions .btn{
    flex: 1 1 160px;
    min-height: 40px;
  }
}

@media (max-width: 600px){
  /* no phone, 2 colunas ou 1 col dependendo do espaço */
  #cPaneOrders #clientList .list > .row,
  #cPaneOrders #clientList .list > .item,
  #cPaneOrders #clientList .list > li{
    grid-template-columns: 1fr 1fr;
  }
  /* ações ocupam a linha toda */
  #cPaneOrders #clientList .list > * .actions{
    grid-column: 1 / -1;
  }
  #cPaneOrders #clientList .list > * .actions .btn{
    flex: 1 1 48%;
    min-width: 140px;
    min-height: 44px;
  }
}


/* =========================================
   CLIENT > RÉPLICAS — Mobile refinements
   ========================================= */
@media (max-width: 600px){
  /* inputs 100% e sem overflow em aninhamentos */
  #repList, #repList *{ min-width: 0; }
  #repList input[type="text"],
  #repList input[type="number"],
  #repList input[type="email"],
  #repList input[type="tel"],
  #repList textarea,
  #repList select{
    width: 100%;
    box-sizing: border-box;
  }

  /* grupos de botões: 2 colunas com gap */
  #repList :is(.actions, .btn-group, .row){
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }
  #repList :is(.actions, .btn-group, .row) .btn{
    width: 100% !important;
    min-height: 44px;
    padding: 10px 12px;
    font-size: .95rem;
  }

  /* fallback para botões “soltos” */
  #repList .btn{
    flex: 1 1 48%;
    width: auto;
    min-width: 140px;
  }
  #repList .btn + .btn{ margin-left: 0; }
  #repList .row{ flex-wrap: wrap; gap: 8px; }
}

/* ======================================================
   FIX — Client > OS: quebras de palavra e chips
   ====================================================== */

/* 0) Segurança: células podem encolher sem quebrar layout */
#cPaneOrders #clientList, 
#cPaneOrders #clientList *{
  min-width: 0;
}

/* 1) Dentro do painel de OS, volta a quebra "normal" para textos
      (evita "PA | RT", "Ap | pr | ouv | é" etc.) */
#cPaneOrders :is(h1,h2,h3,h4,p,.muted,.title,.label,.value){
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;  /* francês/pt quebram bonito quando necessário */
}

/* 2) Chips/pills/status NUNCA quebram no meio; ficam numa peça só */
#cPaneOrders :is(.pill,.status,.badge){
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* 3) Lista de peças: colunas com minmax(0,…) para não “apertar” o texto */
#cPaneOrders #clientList .list > .row,
#cPaneOrders #clientList .list > .item,
#cPaneOrders #clientList .list > li{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; /* nome | qnt | preço | ações */
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
}

/* garante que cada célula possa encolher sem empurrar as vizinhas */
#cPaneOrders #clientList .list > * > *{ min-width: 0; }

/* 4) Tablet: 3 colunas (ações descem) */
@media (max-width: 860px){
  #cPaneOrders #clientList .list > .row,
  #cPaneOrders #clientList .list > .item,
  #cPaneOrders #clientList .list > li{
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  #cPaneOrders #clientList .list > * .actions{
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
  }
  #cPaneOrders #clientList .list > * .actions .btn{
    flex: 1 1 160px;
    min-height: 40px;
  }
}

/* 5) Mobile: 2 colunas simples; ações ocupam a linha toda */
@media (max-width: 600px){
  #cPaneOrders #clientList .list > .row,
  #cPaneOrders #clientList .list > .item,
  #cPaneOrders #clientList .list > li{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #cPaneOrders #clientList .list > * .actions{
    grid-column: 1 / -1;
  }
  #cPaneOrders #clientList .list > * .actions .btn{
    flex: 1 1 48%;
    min-width: 140px;
    min-height: 44px;
  }
}


/* =========================================
   LANG SELECT — largura segura e responsiva
   ========================================= */

/* Regra base: evita que o select force overflow */
.lang{ max-width: 100%; min-width: 0; }
.lang select{
  max-width: 100%;
  min-width: 0;
  display: block;          /* garante cálculo de largura correto */
  white-space: nowrap;     /* tenta impedir quebra de opção longa */
  text-overflow: ellipsis; /* pode não aplicar em todos os browsers, mas ajuda */
  overflow: hidden;
}

/* Desktop / tablet: seletor compacto (clamp) */
@media (min-width: 1024px){
  .lang{ margin-left: auto; } /* já existia em telas médias; reforça no desktop */
  .lang select{
    width: clamp(110px, 12vw, 160px); /* ajustável: mínimo 110px, máx 160px */
  }
}

/* Mobile (menu aberto): ocupar a largura, sem estourar */
@media (max-width: 600px){
  .lang{ width: 100%; }
  .lang select{
    width: 50%;
    max-width: 100%;
    min-width: 0;
    font-size: 16px;           /* levemente menor pra caber bem */
    padding: 6px 8px;          /* já era o teu padrão; reforço aqui */
    box-sizing: border-box;
  }
}

/* Centraliza o badge sob o brand e limita comprimento */
@media (max-width:1024px){
  .brand .badge{
    text-align:center;
    max-width: 80%;
    margin-left:auto; margin-right:auto;
  }
}

/* Dá um pouco mais de respiro vertical entre badge e o conteúdo */
@media (max-width:1024px){
  .navbar{ row-gap: 10px; }
}

/* Aumenta levemente a área de toque do burger sem aumentar o ícone */
@media (max-width:1024px){
  .nav-toggle{
    padding: 4px;            /* hit area maior */
    border-radius: 12px;     /* mais “toque-friendly” */
  }
}


/* 9.9) Âncoras — compensar header sticky */
:target{ scroll-margin-top:80px }

/* =========================
   Lightbox / Gallery controls
   ========================= */

#imgLightbox .lightbox-modal{
  position:relative;
  max-width:92vw; width:92vw;
  background:transparent; border:none; box-shadow:none;
}

.lightbox-img{
  display:block; max-width:100%; max-height:86vh;
  margin:auto; border-radius:8px;
}

.lightbox-btn{
  position:absolute; display:grid; place-items:center;
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line);
  background:rgba(0,0,0,.6); color:#fff;
  cursor:pointer; user-select:none;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.lightbox-btn:hover{ background:rgba(0,0,0,.75) }

.lightbox-btn--prev{ left:6px; top:50%; transform:translateY(-50%); font-size:26px; line-height:1 }
.lightbox-btn--next{ right:6px; top:50%; transform:translateY(-50%); font-size:26px; line-height:1 }
.lightbox-btn--close{ top:8px; right:8px; width:40px; height:40px; font-size:22px; line-height:1 }
.lightbox-btn--close.btn--danger{
  border-color:#ff5a7a;
  background:linear-gradient(180deg, #ff7b8a, #ff5a7a);
  color:#0b0e10;
  box-shadow:0 6px 18px rgba(255,90,122,.25);
}
.lightbox-btn--close.btn--danger:hover{
  filter:brightness(1.05);
}


/* Linha única do bloco de adicionar item (OS detail) */
#wdControlsEnhanced{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:nowrap;
  overflow:auto;      /* rolagem horizontal se faltar espaço */
}
#wdControlsEnhanced :is(input, select, button){
  width:100%;
}
/* Garante que padding/borda não quebrem a largura fixa */
#wdControlsEnhanced > div { box-sizing: border-box; }

/* Se algum input/select ainda sobrar, ele se ajusta ao wrapper */
#wdControlsEnhanced :is(input, select, button) { width: 100%; }

.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1050;
}
.lightbox.is-open {
  display: flex;
}
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(2px);
}
.lightbox__figure {
  position: relative;
  z-index: 1;
  max-width: min(96vw, 1080px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.lightbox__img {
  max-height: 75vh;
  width: auto;
  max-width: min(96vw, 1080px);
  height: auto;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 18px 48px rgba(0,0,0,.3);
  background: #000;
  cursor: zoom-in;
}
.lightbox__img.is-zoomed {
  cursor: zoom-out;
}
.lightbox__caption {
  color: #f1f1f1;
  font-size: .95rem;
  text-align: center;
  min-height: 1.4em;
}
.lightbox__nav,
.lightbox__close {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 26px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s;
}
.lightbox__nav:hover,
.lightbox__close:hover {
  background: rgba(0,0,0,.8);
}
.lightbox__prev {
  left: -64px;
}
.lightbox__next {
  right: -64px;
}
.lightbox__close {
  top: -56px;
  right: 0;
  transform: none;
}
@media (max-width: 900px) {
  .lightbox__prev { left: 12px; }
  .lightbox__next { right: 12px; }
  .lightbox__close { top: 8px; right: 12px; }
}
body.lightbox-open {
  overflow: hidden;
}

.lightbox__nav:disabled {
  opacity: .35;
  cursor: default;
}