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

:root{
    --black:#050303;
    --black-2:#0d0908;
    --card:#120d0c;
    --card-2:#1a1110;
    --wine:#3b0d0d;
    --wine-2:#5a1515;
    --wine-3:#7a1d1d;
    --wine-soft:rgba(90,21,21,.22);
    --white:#f7f2ee;
    --muted:#b8aaa3;
    --line:rgba(255,255,255,.10);
    --glass:rgba(255,255,255,.045);
    --green:#38d174;
    --yellow:#ffd36b;
    --blue:#8bc4ff;
    --red-soft:#ff8a8a;

    /* SPEC_DASHBOARD_GRAFICOS_E_REDESIGN, Correção 6 - "dourado" é o mesmo
       --yellow já existente, só com um nome que deixa a intenção clara nos
       gradientes do Dashboard (nenhuma cor nova, só um alias). Os gradientes
       "dourado -> vinho" do Dashboard combinam --gold com --wine/--wine-3,
       já existentes - sem precisar de um segundo tom de dourado inventado.
    */
    --gold:#ffd36b;
}

html{
    scroll-behavior:smooth;
}

body{
    background:
        radial-gradient(circle at top left, rgba(90,21,21,.22), transparent 32%),
        radial-gradient(circle at bottom right, rgba(59,13,13,.32), transparent 38%),
        var(--black);
    color:var(--white);
    overflow-x:hidden;
    font-family:Arial, Helvetica, sans-serif;
}

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

button,
input,
select{
    font-family:inherit;
}

button{
    cursor:pointer;
}

.empty-state{
    min-height:150px;
    padding:28px;
    border-radius:28px;
    background:rgba(255,255,255,.035);
    border:1px dashed rgba(255,255,255,.16);
    color:var(--muted);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    grid-column:1 / -1;
}

.client-empty-appointments{
    flex-direction:column;
    gap:10px;
}

.client-empty-appointments strong{
    color:#fff;
    font-size:16px;
}

.client-empty-appointments p{
    max-width:280px;
    color:rgba(255,255,255,.60);
    line-height:1.45;
}

.client-empty-appointments button{
    margin-top:6px;
    border:0;
    border-radius:999px;
    padding:10px 18px;
    background:linear-gradient(135deg,var(--wine-3),var(--wine));
    color:#fff;
    font-weight:900;
    transition:transform .2s ease, filter .2s ease;
}

.client-empty-appointments button:hover{
    transform:translateY(-1px);
    filter:brightness(1.05);
}

.notifications-widget{
    position:relative;
    z-index:20;
}

/* SPEC_DASHBOARD_REDESIGN + SPEC_CLIENTE_TOPO_COMPACTO - sino compacto (ícone
   + badge sobreposto), mesmo padrão em toda a aplicação: Dashboard do admin
   e topo do cliente. */
.notification-bell{
    position:relative;
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#fff;
    transition:transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.notification-bell:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.24);
}

.notification-bell-icon{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.notification-bell strong{
    position:absolute;
    top:-3px;
    right:-3px;
    min-width:20px;
    height:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:var(--wine);
    color:#fff;
    font-size:11px;
    box-shadow:0 0 0 2px rgba(0,0,0,.55);
}

.notification-bell strong:empty,
.notification-bell strong.is-empty{
    background:rgba(255,255,255,.16);
}

/* SPEC_DASHBOARD_REDESIGN, Correção 2 - só o Dashboard do admin/barbeiro
   precisa do sino fixo e flutuante (a página não tem mais cabeçalho). O
   cliente mantém o sino dentro da própria navbar (fluxo normal, ver
   .navbar-actions em SPEC_CLIENTE_TOPO_COMPACTO). */
.notifications-widget.admin-notifications-widget{
    position:fixed;
    top:18px;
    right:18px;
    z-index:1000;
}

.dashboard-simple-list{
    margin-top:16px;
}

.dashboard-simple-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:12px 14px;
    background:rgba(255,255,255,.04);
    margin-bottom:8px;
}

.dashboard-simple-item strong{
    color:#fff;
    font-weight:800;
}

.dashboard-simple-item span{
    color:var(--muted);
    font-size:13px;
}

.notifications-panel{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    width:min(340px, calc(100vw - 32px));
    max-height:420px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    background:rgba(18,12,12,.96);
    box-shadow:0 22px 60px rgba(0,0,0,.34);
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
}

.notifications-panel.active{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

.notifications-panel header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    padding:14px 14px 10px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

/* SPEC_PUSH_CORRECAO_DESTINATARIOS, Correção 4 - botão discreto de ativar
   notificações push, direto no cabeçalho do painel (cliente e admin) -
   substitui o antigo item "Ativar Notificações" do menu "Mais". */

/* SPEC_PUSH_BOTAO_ATIVAR_SEM_RESPOSTA, Correção 1 - mesmo bug do
   .search-box[hidden] e do .schedule-clean-actions[hidden]: display:flex sem
   !important não respeita o atributo [hidden]. Era a causa raiz do "botão
   vazio" relatado - o JS mandava esconder (sem suporte a push, ou já
   inscrito), o CSS continuava pintando o botão, e o clique caía num botão
   que nem listener tinha. */
.notifications-activate-push-btn[hidden]{
    display:none !important;
}

.notifications-activate-push-btn{
    display:flex;
    align-items:center;
    gap:5px;
    flex-shrink:0;
    padding:6px 10px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
    transition:background-color .2s ease, border-color .2s ease;
}

.notifications-activate-push-btn:hover{
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.26);
}

.notifications-activate-push-btn svg{
    width:15px;
    height:15px;
    fill:none;
    stroke:currentColor;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.notifications-panel header strong,
.notification-item strong{
    display:block;
    color:#fff;
}

.notifications-panel header span,
.notification-item span{
    display:block;
    margin-top:3px;
    color:rgba(255,255,255,.58);
    font-size:12px;
    line-height:1.35;
}

.notifications-list{
    max-height:340px;
    overflow:auto;
    padding:8px;
}

.notification-item{
    width:100%;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:12px;
    background:rgba(255,255,255,.04);
    text-align:left;
    color:#fff;
    margin-bottom:8px;
}

.notification-item.unread{
    border-color:rgba(122,29,29,.48);
    background:rgba(122,29,29,.18);
}

.notification-item small{
    display:block;
    margin-top:8px;
    color:rgba(255,255,255,.42);
    font-size:11px;
}

/* SPEC_OFFLINE_E_BADGE_ICONE, Correção 1 - some sozinha assim que
   navigator.onLine voltar a true (ver app.js).
   SPEC_AVISO_OFFLINE_ANIMADO, Correção 1 - reaproveita esgotadoPiscar
   (@keyframes definido junto de .product-esgotado-badge, mais abaixo neste
   arquivo) em vez de duplicar a animação - acessibilidade (prefers-reduced-
   motion) também reaproveita a mesma media query já existente lá.
   SPEC_AVISO_OFFLINE_CENTRO_E_MODAL_SEM_FLICKER, Correção 2 - redesenho:
   nasce centralizado piscando (chama atenção de verdade) e, depois de um
   tempo (ver iniciarAvisoOffline em app.js), encolhe pro canto inferior
   direito e para de piscar, continuando visível enquanto offline.
   top:0/left:0 fixos de propósito - todo o movimento/encolhimento é feito
   só via transform (calc com vw/vh), porque animar entre left/top e
   right/bottom (ou "auto") não interpola suavemente; calc() com comprimentos
   concretos sim. */
.offline-banner{
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
    max-width:min(320px, calc(100vw - 32px));
    padding:16px 26px;
    border-radius:20px;
    background:var(--wine-2);
    color:#fff;
    font-size:14px;
    font-weight:800;
    text-align:center;
    box-shadow:0 12px 40px rgba(0,0,0,.4);
    transform:translate(calc(50vw - 50%), calc(50vh - 50%));
    transition:transform .6s cubic-bezier(.22,1,.36,1), padding .6s ease, font-size .6s ease, border-radius .6s ease;
    animation:esgotadoPiscar 1.6s ease-in-out infinite;
}

/* Estado "canto" - aplicado por iniciarAvisoOffline() um tempo depois de
   aparecer. Continua fixed/top:0/left:0; só o transform muda (mesmo motivo
   acima), levando o canto superior-esquerdo do elemento até 18px de
   distância do canto inferior-direito da viewport. */
.offline-banner.offline-banner--canto{
    padding:9px 14px;
    font-size:11px;
    border-radius:14px;
    animation:none;
    transform:translate(calc(100vw - 100% - 18px), calc(100vh - 100% - 18px));
}

.notification-toast{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:9998;
    width:min(320px, calc(100vw - 36px));
    border:1px solid rgba(255,255,255,.14);
    border-radius:16px;
    padding:14px;
    background:rgba(18,12,12,.96);
    color:#fff;
    box-shadow:0 18px 50px rgba(0,0,0,.32);
    opacity:0;
    transform:translateY(10px);
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
}

.notification-toast.active{
    opacity:1;
    transform:translateY(0);
}

.notification-toast strong{
    display:block;
    margin-bottom:4px;
}

.notification-toast span{
    color:rgba(255,255,255,.64);
    font-size:13px;
    line-height:1.4;
}

#loader{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(rgba(5,3,3,.88), rgba(5,3,3,.97)),
        radial-gradient(circle at center, rgba(90,21,21,.45), transparent 45%);
    transition:.7s;
}

#loader.hide{
    opacity:0;
    visibility:hidden;
}

.loader-content{
    text-align:center;
    animation:fadeUp .8s ease;
}

.loader-logo{
    width:130px;
    height:130px;
    object-fit:cover;
    border-radius:50%;
    margin-bottom:22px;
    border:3px solid rgba(255,255,255,.18);
    box-shadow:0 0 45px rgba(90,21,21,.55);
}

.loader-content h1{
    font-size:32px;
    letter-spacing:5px;
    margin-bottom:10px;
}

.loader-content p{
    color:var(--muted);
    font-size:14px;
}

.auth-wrapper{
    min-height:100vh;
    position:relative;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    overflow:hidden;
}

.auth-wrapper.show{
    display:flex;
    animation:fadeIn .7s ease;
}

.auth-background{
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(5,3,3,.78), rgba(5,3,3,.96)),
        url("https://images.unsplash.com/photo-1599351431202-1e0f0137899a?q=80&w=1600&auto=format&fit=crop");
    background-size:cover;
    background-position:center;
    transform:scale(1.04);
}

.auth-overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top left, rgba(122,29,29,.32), transparent 34%),
        radial-gradient(circle at bottom right, rgba(255,255,255,.08), transparent 28%);
}

.auth-container{
    width:100%;
    max-width:1040px;
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:.9fr .8fr;
    gap:22px;
    align-items:center;
}

.auth-brand{
    min-height:540px;
    padding:34px;
    border-radius:28px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(14px);
    box-shadow:0 30px 80px rgba(0,0,0,.45);
}

.brand-logo{
    width:132px;
    height:132px;
    object-fit:cover;
    border-radius:50%;
    margin-bottom:22px;
    border:3px solid rgba(255,255,255,.18);
    box-shadow:0 0 55px rgba(90,21,21,.55);
}

.brand-badge,
.auth-mini-title,
.badge,
.title-area span{
    width:fit-content;
    color:var(--white);
    background:rgba(90,21,21,.75);
    border:1px solid rgba(255,255,255,.14);
    padding:10px 14px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    letter-spacing:3px;
}

.auth-brand h1{
    max-width:620px;
    font-size:48px;
    line-height:.95;
    margin:20px 0;
}

.auth-brand p{
    max-width:540px;
    color:var(--muted);
    font-size:17px;
    line-height:1.7;
}

.auth-card{
    width:100%;
    padding:26px;
    border-radius:28px;
    background:rgba(9,6,5,.82);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(18px);
    box-shadow:
        0 30px 80px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 0 1px rgba(90,21,21,.18);
}

.auth-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:6px;
    border-radius:18px;
    background:rgba(255,255,255,.055);
    margin-bottom:22px;
}

.auth-tab{
    height:48px;
    border:none;
    border-radius:14px;
    background:transparent;
    color:var(--muted);
    font-weight:900;
    transition:.3s;
}

.auth-tab.active{
    background:linear-gradient(135deg,var(--wine-3),var(--wine));
    color:#fff;
    box-shadow:0 14px 34px rgba(90,21,21,.35);
}

.auth-panel{
    display:none;
}

.auth-panel.active{
    display:block;
    animation:fadeUp .45s ease;
}

.auth-panel h2{
    font-size:34px;
    margin-bottom:8px;
}

.auth-description{
    color:var(--muted);
    line-height:1.5;
    margin-bottom:20px;
}

.input-group{
    display:grid;
    gap:8px;
    margin-bottom:14px;
}

.input-group label{
    color:var(--white);
    font-size:13px;
    font-weight:800;
}

.input-group input,
.input-group select{
    width:100%;
    height:52px;
    border:none;
    outline:none;
    border-radius:18px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    padding:0 18px;
    font-size:15px;
}

.password-field{
    position:relative;
}

.password-field input{
    padding-right:54px;
}

.password-toggle{
    width:38px;
    height:38px;
    position:absolute;
    top:50%;
    right:8px;
    transform:translateY(-50%);
    border:none;
    border-radius:13px;
    background:rgba(255,255,255,.055);
    color:var(--muted);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.25s;
}

.password-toggle svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.password-toggle:hover,
.password-toggle.active{
    background:rgba(90,21,21,.58);
    color:var(--white);
}

.input-group select option{
    background:#120909;
    color:#fff;
}

.input-group input:focus,
.input-group select:focus{
    border-color:rgba(122,29,29,.95);
    box-shadow:0 0 0 4px rgba(122,29,29,.18);
}

.permission-toggle-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:8px;
    margin-bottom:10px;
}

.permission-toggle{
    display:flex;
    align-items:center;
    gap:10px;
    padding:clamp(8px,2vw,12px) clamp(10px,3vw,14px);
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.045);
    color:rgba(255,255,255,.72);
    font-weight:700;
    font-size:clamp(12px,3vw,14px);
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease;
}

.permission-toggle-icon{
    width:18px;
    height:18px;
    border-radius:6px;
    border:1.5px solid rgba(255,255,255,.35);
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.permission-toggle[aria-pressed="true"]{
    background:linear-gradient(135deg,var(--wine-3),var(--wine));
    border-color:transparent;
    color:#fff;
}

.permission-toggle[aria-pressed="true"] .permission-toggle-icon{
    border-color:#fff;
    background:#fff;
}

.permission-toggle[aria-pressed="true"] .permission-toggle-icon::after{
    content:"";
    width:10px;
    height:10px;
    border-radius:3px;
    background:var(--wine);
}

.barber-permissions-actions{
    display:flex;
    gap:10px;
    margin-bottom:10px;
}

.barber-permissions-actions .booking-back-btn{
    min-height:44px;
    font-size:13px;
}

.auth-btn,
.booking-confirm-btn{
    width:100%;
    min-height:54px;
    border:none;
    border-radius:20px;
    background:linear-gradient(135deg,var(--wine-3),var(--wine));
    color:#fff;
    font-size:16px;
    font-weight:900;
    box-shadow:0 18px 45px rgba(90,21,21,.32);
    transition:.3s;
}

.auth-btn:hover,
.booking-confirm-btn:hover{
    transform:translateY(-2px);
}

.login-password-group[hidden]{
    display:none;
}

/* SPEC_LOGIN_TRANSICAO_DIRETA_SENHA - mesma transição já usada pra trocar
   de painel em .auth-panel.active, reaproveitada aqui pra entrada do campo
   de senha (criado dinamicamente por mostrarCampoSenhaEquipe). */
.login-password-group{
    animation:fadeUp .45s ease;
}

#systemContent{
    display:none;
}

#systemContent.show{
    display:block;
}

.hero{
    position:relative;
    padding:22px;
    background:#0a0505;
}

/* SPEC_HERO_CARROSSEL_ABAIXO_TEXTO, Correção 1 - o carrossel deixou de ser
   o fundo atrás do texto (Sprint XX-XXII) e virou um bloco próprio, logo
   abaixo do .hero. Cantos arredondados consistentes com .admin-panel/cards;
   altura própria (não estica pra tela cheia como o .hero antigo). */
.hero-carousel-block{
    position:relative;
    height:clamp(220px, 42vw, 340px);
    margin:0 22px 28px;
    border-radius:28px;
    overflow:hidden;
    background:#0a0505;
    /* SPEC_HERO_CARROSSEL_SWIPE_E_ENQUADRAMENTO, Correção 1 - sem isso, o
       navegador decide sozinho (em geral nos primeiros pixels do toque) que
       um arrasto horizontal é rolagem e passa a consumir o gesto por conta
       própria, disparando "pointercancel" em vez de "pointerup" no nosso
       listener - o swipe nunca chega a rodar, mesmo com Pointer Events
       (que já cobrem touch) implementado corretamente. "pan-y" mantém a
       rolagem vertical nativa da página funcionando normalmente (Risco da
       spec) e deixa o gesto horizontal por conta do JS.
    */
    touch-action:pan-y;
}

/* Camada que recebe os slides do carrossel (fotos/vídeos cadastrados no
   admin). O fundo Unsplash original vira o próprio background desta camada:
   enquanto não houver nenhuma mídia cadastrada (ou antes do JS carregar),
   ele continua visível sem nenhum tratamento extra - é o fallback exigido
   pela spec original do carrossel. */
.hero-media-layer{
    position:absolute;
    inset:0;
    overflow:hidden;
    background:
        url("https://images.unsplash.com/photo-1621605815971-fbc98d665033?q=80&w=1600&auto=format&fit=crop");
    background-size:cover;
    background-position:center;
}

.hero-media-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity 1.2s ease;
}

.hero-media-slide.active{
    opacity:1;
}

.hero-media-slide img,
.hero-media-slide video{
    /* SPEC_HERO_CARROSSEL_SWIPE_E_ENQUADRAMENTO, Correção 2 - width/height:100%
       já existiam mas dependem do valor percentual resolver corretamente
       através de duas camadas de ancestrais absolutamente posicionados
       (.hero-media-slide dentro de .hero-media-layer); posicionar o próprio
       img/video com inset:0 fixa o tamanho direto contra o pai imediato,
       sem depender dessa cadeia de resolução - forma mais robusta de
       garantir que a mídia preencha o bloco por completo, sem bordas. */
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    /* SPEC_HERO_CARROSSEL_SWIPE_TEMPO, Correção 4 - reforça o
       img.draggable=false do JS (arrasto nativo da imagem quebraria o
       gesto de swipe customizado). */
    -webkit-user-drag:none;
    user-select:none;
}

/* SPEC_HERO_CARROSSEL_ABAIXO_TEXTO, Correção 1 - antes precisava escurecer
   bastante pra garantir legibilidade do texto por cima (Sprint XX). Agora
   que o carrossel é um bloco próprio sem texto sobreposto, sobra só um
   escurecimento leve na base, por estética/profundidade. */
.hero-media-scrim{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(5,3,3,0) 55%, rgba(5,3,3,.55) 100%);
    pointer-events:none;
}

.overlay{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top, rgba(90,21,21,.35), transparent 35%);
}

.navbar{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    color:#fff;
    font-size:22px;
    font-weight:900;
    letter-spacing:1px;
}

.logo::before{
    content:"";
    display:inline-block;
    width:42px;
    height:42px;
    background:url("../img/logo.jpeg");
    background-size:cover;
    background-position:center;
    border-radius:50%;
    vertical-align:middle;
    margin-right:10px;
    border:1px solid rgba(255,255,255,.22);
}

/* SPEC_CLIENTE_TOPO_COMPACTO - agrupa as ações do canto da navbar, no lugar
   do antigo menu hambúrguer (removido, os links que ele abria já existem nos
   cards de atalho e na barra de navegação inferior). SPEC_NOTIFICACOES_
   FUNCIONAIS moveu "Sair" pro menu "Mais" - só o sino fica aqui agora. */
.navbar-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.navbar-logout-btn svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.hero-content{
    position:relative;
    z-index:2;
    padding:28px 0 4px;
}

.hero-content h1{
    max-width:680px;
    font-size:72px;
    line-height:.95;
    margin:20px 0;
}

.hero-content h1 span{
    display:block;
}

.hero-content p{
    max-width:560px;
    color:var(--muted);
    font-size:17px;
    line-height:1.7;
}

/* SPEC_TELA_INICIAL_ENDERECO_E_SAUDACAO, Correção 3 - resumo clicável do
   próximo agendamento, junto do texto do Hero (acima do carrossel). */
.next-appointment-banner{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:4px;
    width:100%;
    max-width:420px;
    margin-top:20px;
    padding:14px 18px;
    border:none;
    border-radius:18px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16);
    color:#fff;
    text-align:left;
    cursor:pointer;
    transition:.25s;
}

.next-appointment-banner:hover{
    background:rgba(255,255,255,.13);
}

.next-appointment-banner[hidden]{
    display:none;
}

.next-appointment-banner-label{
    color:var(--muted);
    font-size:11px;
    font-weight:900;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.next-appointment-banner-text{
    font-size:15px;
    font-weight:800;
}

/* SPEC_TELA_INICIAL_ENDERECO_E_SAUDACAO, Correção 2 - endereço/horário/
   "Aberto agora", logo abaixo do carrossel. */
.store-info-block{
    display:grid;
    gap:6px;
    margin:0 22px 28px;
    padding:16px 18px;
    border-radius:22px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.10);
    /* SPEC_ENDERECO_ABRE_APP_DE_MAPAS - virou <a>, neutraliza o estilo
       nativo de link (cor/sublinhado) e reforça a affordance de clique. */
    color:inherit;
    text-decoration:none;
    cursor:pointer;
    transition:.25s;
}

.store-info-block:hover{
    background:rgba(255,255,255,.075);
}

.store-info-block[hidden]{
    display:none;
}

.store-info-main{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.store-info-address{
    color:#fff;
    font-size:14px;
    font-weight:700;
}

.store-status-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:28px;
    padding:0 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.5px;
    text-transform:uppercase;
    white-space:nowrap;
}

.store-status-badge::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:currentColor;
}

.store-status-badge.open{
    color:var(--green);
    background:rgba(56,209,116,.14);
}

.store-status-badge.closed{
    color:var(--red-soft);
    background:rgba(255,138,138,.14);
}

.store-info-hours{
    color:var(--muted);
    font-size:13px;
}

.pwa-install-section[hidden]{
    display:none !important;
}

.pwa-install-section{
    display:flex;
    justify-content:center;
}

.pwa-install-card[hidden]{
    display:none !important;
}

.pwa-install-card{
    width:min(560px,100%);
    margin-top:8px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:20px;
    padding:16px;
    background:
        linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025)),
        rgba(12,8,8,.76);
    color:#fff;
    display:flex;
    flex-direction:column;
    gap:14px;
    box-shadow:0 24px 54px rgba(0,0,0,.34);
    backdrop-filter:blur(18px);
}

.pwa-install-header{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:4px;
}

.pwa-install-header strong{
    font-size:21px;
    line-height:1.08;
}

.pwa-install-header p{
    max-width:650px;
    margin:0;
    color:rgba(255,255,255,.68);
    font-size:13px;
    line-height:1.55;
}

.pwa-install-option strong{
    font-size:15px;
    font-weight:800;
    text-align:center;
}

.pwa-install-option span{
    color:rgba(255,255,255,.62);
    font-size:12px;
    line-height:1.35;
    text-align:center;
}

.pwa-install-option span[hidden]{
    display:none !important;
}

.pwa-install-options{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.pwa-install-option{
    min-width:0;
    min-height:178px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    padding:15px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)),
        rgba(255,255,255,.035);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    position:relative;
    overflow:hidden;
    transition:transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.pwa-install-option::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 42%);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
}

.pwa-install-option:hover{
    transform:translateY(-3px);
    border-color:rgba(255,255,255,.20);
    background:
        linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035)),
        rgba(255,255,255,.045);
    box-shadow:0 18px 36px rgba(0,0,0,.28);
}

.pwa-install-option:hover::before{
    opacity:1;
}

.pwa-install-option > div:last-child{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:9px;
}

.pwa-install-option ul,
.pwa-install-option ol{
    margin:2px 0 0;
    padding:0;
    list-style:none;
    display:grid;
    gap:7px;
}

.pwa-install-option li{
    color:rgba(255,255,255,.72);
    font-size:12px;
    line-height:1.35;
}

.pwa-install-option ul li::before{
    content:"✓";
    display:inline-flex;
    width:18px;
    color:#3DDC84;
    font-weight:900;
}

.pwa-install-option ol{
    counter-reset:pwaIosStep;
}

.pwa-install-option ol li{
    counter-increment:pwaIosStep;
}

.pwa-install-option ol li::before{
    content:counter(pwaIosStep) ".";
    display:inline-flex;
    width:18px;
    color:rgba(255,255,255,.82);
    font-weight:900;
}

.pwa-install-icon{
    width:68px;
    height:68px;
    border-radius:20px;
    background:rgba(122,29,29,.20);
    color:#f1d8d8;
    display:flex;
    align-items:center;
    justify-content:center;
    animation:pwaIconFade .45s ease both;
}

.pwa-install-icon.android{
    background:rgba(61,220,132,.14);
    color:rgba(255,255,255,.9);
}

.pwa-install-icon.iphone{
    background:rgba(255,255,255,.10);
    color:rgba(255,255,255,.90);
}

.pwa-install-icon svg{
    width:42px;
    height:42px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.pwa-install-option button{
    width:auto;
    min-width:112px;
    margin-top:0;
    border:1px solid rgba(255,255,255,.14);
    border-radius:14px;
    padding:9px 14px;
    background:rgba(122,29,29,.72);
    color:#fff;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

.pwa-install-option button[hidden]{
    display:none !important;
}

.pwa-install-option button:hover{
    background:rgba(142,34,34,.82);
    border-color:rgba(255,255,255,.22);
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(0,0,0,.22);
}

.pwa-install-option button:active{
    transform:scale(.98);
}

.pwa-ios-modal{
    position:fixed;
    inset:0;
    /* SPEC_CLIENTE_PWA_SECOES_SOB_DEMANDA - o botão que abre este modal agora
       normalmente vive dentro do HollyModal.conteudo() (z-index 9999) de
       "Instalar o App"; precisa ficar acima dele pra não abrir escondido
       atrás (mesma categoria do Bug A da SPEC_CLIENTE_SECOES_SOB_DEMANDA). */
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
}

.pwa-ios-modal.active{
    opacity:1;
    pointer-events:auto;
}

.pwa-ios-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.66);
    backdrop-filter:blur(8px);
}

.pwa-ios-modal-content{
    position:relative;
    z-index:1;
    width:min(420px,100%);
    border:1px solid rgba(255,255,255,.13);
    border-radius:22px;
    padding:20px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.03)),
        rgba(14,9,9,.98);
    color:#fff;
    box-shadow:0 28px 80px rgba(0,0,0,.48);
    transform:translateY(12px) scale(.98);
    transition:transform .25s ease;
}

.pwa-ios-modal.active .pwa-ios-modal-content{
    transform:translateY(0) scale(1);
}

.pwa-ios-modal-close{
    position:absolute;
    top:12px;
    right:12px;
    width:34px;
    height:34px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:20px;
    cursor:pointer;
}

.pwa-ios-modal-head{
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
    gap:13px;
    align-items:center;
    padding-right:30px;
}

.pwa-ios-modal-icon{
    width:56px;
    height:56px;
    border-radius:18px;
    background:rgba(255,255,255,.10);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

.pwa-ios-modal-icon svg{
    width:32px;
    height:32px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.1;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.pwa-ios-modal-head span{
    color:rgba(255,255,255,.48);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.pwa-ios-modal-head h2{
    margin:3px 0;
    font-size:24px;
}

.pwa-ios-modal-head p{
    margin:0;
    color:rgba(255,255,255,.64);
    font-size:13px;
    line-height:1.45;
}

.pwa-ios-steps{
    margin:18px 0;
    padding:0;
    list-style:none;
    display:grid;
    gap:9px;
}

.pwa-ios-steps li{
    display:grid;
    grid-template-columns:32px minmax(0,1fr);
    gap:10px;
    align-items:center;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:10px;
    background:rgba(255,255,255,.045);
}

.pwa-ios-steps span{
    width:32px;
    height:32px;
    border-radius:11px;
    background:rgba(122,29,29,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
}

.pwa-ios-steps strong{
    font-size:13px;
}

.pwa-ios-modal-action{
    width:100%;
    border:0;
    border-radius:14px;
    padding:12px;
    background:linear-gradient(135deg,rgba(122,29,29,.96),rgba(82,15,18,.96));
    color:#fff;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.pwa-ios-modal-action:hover{
    filter:brightness(1.08);
    transform:translateY(-1px);
    box-shadow:0 12px 28px rgba(0,0,0,.26);
}

.pwa-ios-modal-action:active{
    transform:scale(.98);
}

@keyframes pwaIconFade{
    from{
        opacity:0;
        transform:translateY(6px) scale(.96);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.section{
    padding:44px 22px;
}

.title-area{
    margin-bottom:24px;
}

.title-area h2{
    font-size:36px;
    margin-top:16px;
}

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

/* Grids do admin: colunas fluidas, sem breakpoint dedicado (SPEC_ADMIN_LAYOUT_FLUIDO) */
.clients-grid,
.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:18px;
}

.card,
.client-card-premium,
.service-card,
.appointment-card,
.admin-panel,
.product-showcase-card{
    position:relative;
    overflow:hidden;
    padding:1.5rem;
    border-radius:30px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 20px 48px rgba(0,0,0,.25);
    /* SPEC_PRODUTOS_GALERIA_E_ESGOTADO, Correção 3 - virou <button> (abre o
       detalhe com carrossel), então precisa desfazer o alinhamento centralizado
       e a caixa inline que <button> tem por padrão. */
    display:block;
    width:100%;
    text-align:left;
}

/* SPEC_NOTIFICACOES_FUNCIONAIS - destaque temporário do agendamento aberto
   a partir de uma notificação, some sozinho depois de ~2s (ver
   destacarAgendamentoAdmin em app.js). */
.appointment-card-highlight{
    animation:appointmentHighlightPulse 2s ease-out;
}

@keyframes appointmentHighlightPulse{
    0%{
        border-color:var(--wine-3);
        box-shadow:0 0 0 3px var(--wine-soft),0 20px 48px rgba(0,0,0,.25);
    }
    100%{
        border-color:rgba(255,255,255,.10);
        box-shadow:0 20px 48px rgba(0,0,0,.25);
    }
}

.card h3,
.service-card h3,
.client-card-premium h3,
.product-showcase-card h3{
    color:#fff;
    font-size:clamp(17px,2.2vw,21px);
    margin-bottom:8px;
}

.card p,
.service-card p,
.client-card-premium p,
.product-showcase-card p{
    color:var(--muted);
    line-height:1.6;
    margin-bottom:14px;
}

.card strong,
.service-price{
    color:#fff;
    font-size:30px;
    font-weight:900;
    display:block;
    margin-bottom:18px;
}

/* SPEC_CLIENTE_PRODUTOS_E_BOTTOM_NAV, Correção 2 - miniatura opcional no
   card de produto da lista do admin (services-grid reaproveitado) */
.product-card-image{
    width:100%;
    height:140px;
    object-fit:cover;
    border-radius:20px;
    margin-bottom:14px;
}

/* Correção 3 - vitrine de produtos do cliente (dentro do HollyModal.conteudo) */
.product-showcase-list{
    display:grid;
    gap:16px;
    margin-top:16px;
}

.product-showcase-image{
    width:100%;
    height:160px;
    border-radius:20px;
    overflow:hidden;
    margin-bottom:14px;
    background:rgba(255,255,255,.05);
}

.product-showcase-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.product-showcase-image.placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
}

.product-showcase-image.placeholder svg{
    width:40px;
    height:40px;
    fill:none;
    stroke:rgba(255,255,255,.35);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.product-showcase-price{
    color:#fff;
    font-size:22px;
    font-weight:900;
    margin-bottom:10px;
}

/* SPEC_PRODUTOS_GALERIA_E_ESGOTADO, Correção 4 - marcação simples (sem
   animação - piscar é só pra vitrine do cliente, ver .product-esgotado-badge
   abaixo) usada inline no título da lista de produtos do admin. */
.product-esgotado-tag{
    display:inline-block;
    padding:2px 10px;
    margin-left:6px;
    border-radius:999px;
    background:var(--wine);
    color:#fff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.03em;
    text-transform:uppercase;
    vertical-align:middle;
}

/* SPEC_PRODUTOS_GALERIA_E_ESGOTADO, Correção 4 - selo "Esgotado" piscante.
   Acessibilidade: quem tem prefers-reduced-motion não recebe a animação de
   repetir pra sempre (media query abaixo), boa prática básica pra
   sensibilidade a movimento - a opacidade fica fixa em 1, o selo continua
   visível e legível, só não pisca. */
.product-esgotado-badge{
    position:absolute;
    top:14px;
    right:14px;
    z-index:2;
    padding:6px 14px;
    border-radius:999px;
    background:var(--wine);
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    box-shadow:0 8px 20px rgba(0,0,0,.35);
    animation:esgotadoPiscar 1.6s ease-in-out infinite;
}

@keyframes esgotadoPiscar{
    0%, 100%{ opacity:1; }
    50%{ opacity:.35; }
}

@media (prefers-reduced-motion: reduce){
    .product-esgotado-badge,
    .offline-banner{
        animation:none;
    }

    .offline-banner{
        transition:none;
    }
}

/* SPEC_PRODUTOS_GALERIA_E_ESGOTADO, Correção 3 - carrossel de detalhes do
   produto, dentro do modal de conteúdo. Mesmo padrão de posicionamento
   absoluto do carrossel do Hero (.hero-media-slide, ver Sprint XXIV),
   adaptado pra um bloco de altura fixa em vez de tela cheia. */
.product-detail-carousel{
    position:relative;
    height:clamp(220px, 60vw, 340px);
    margin-bottom:16px;
    border-radius:24px;
    overflow:hidden;
    background:#0a0505;
    /* Mesmo motivo do .hero-carousel-block - sem isso o navegador assume
       rolagem no primeiro toque e o swipe nunca dispara. */
    touch-action:pan-y;
}

.product-detail-slides{
    position:absolute;
    inset:0;
}

.product-detail-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .4s ease;
}

.product-detail-slide.active{
    opacity:1;
}

.product-detail-slide img,
.product-detail-slide video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.product-detail-slide.placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:1;
}

.product-detail-slide.placeholder svg{
    width:48px;
    height:48px;
    fill:none;
    stroke:rgba(255,255,255,.35);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.product-detail-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    border-radius:999px;
    background:rgba(0,0,0,.45);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    font-size:22px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
}

.product-detail-nav.prev{
    left:12px;
}

.product-detail-nav.next{
    right:12px;
}

.product-detail-dots{
    position:absolute;
    bottom:12px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:6px;
    z-index:2;
}

.product-detail-dot{
    width:7px;
    height:7px;
    border-radius:999px;
    background:rgba(255,255,255,.35);
    padding:0;
}

.product-detail-dot.active{
    background:#fff;
}

.admin-dashboard{
    min-height:100vh;
    padding:1.375rem;
    display:none;
    gap:22px;
    background:
        radial-gradient(circle at top left, rgba(90,21,21,.25), transparent 30%),
        linear-gradient(135deg,#050303,#100808,#050303);
}

.admin-dashboard.show{
    display:flex;
}

.admin-sidebar{
    width:280px;
    min-width:280px;
    border-radius:32px;
    padding:1.5rem;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(18px);
    box-shadow:0 22px 55px rgba(0,0,0,.35);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.sidebar-logo{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:30px;
}

.sidebar-icon{
    width:62px;
    height:62px;
    border-radius:50%;
    background:url("../img/logo.jpeg");
    background-size:cover;
    background-position:center;
    border:2px solid rgba(255,255,255,.18);
    font-size:0;
}

.sidebar-logo strong{
    display:block;
    font-size:clamp(16px,1.6vw,19px);
}

.sidebar-logo span{
    color:var(--muted);
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.sidebar-menu{
    display:grid;
    gap:10px;
}

.sidebar-link{
    display:flex;
    align-items:center;
    gap:14px;
    color:#ddd;
    padding:16px;
    border-radius:18px;
    background:rgba(255,255,255,.035);
    border:1px solid transparent;
    font-weight:800;
    transition:.3s;
}

/* SPEC_ADMIN_BARRA_INFERIOR_E_ICONES_SVG, Correção 2 - substitui os antigos
   emojis do menu lateral, mesmo padrão de traço já usado em
   .notification-bell-icon/.admin-bottom-nav-icon. */
.sidebar-link-icon{
    width:22px;
    height:22px;
    flex-shrink:0;
    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.sidebar-link:hover{
    border-color:rgba(122,29,29,.45);
    background:rgba(122,29,29,.14);
}

.sidebar-link.active{
    background:linear-gradient(135deg,var(--wine-3),var(--wine));
    color:#fff;
    box-shadow:0 16px 36px rgba(90,21,21,.35);
}

.sidebar-logout{
    height:54px;
    border:none;
    border-radius:18px;
    background:rgba(255,255,255,.055);
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
    font-weight:900;
}

.admin-main{
    flex:1;
}

.admin-bottom-nav{
    display:none;
}

.client-bottom-nav{
    display:none;
}

.admin-page{
    display:none;
}

.admin-page.active{
    display:block;
    animation:fadeUp .45s ease;
}

.admin-header{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:1.75rem;
    border-radius:30px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 22px 55px rgba(0,0,0,.30);
    margin-bottom:22px;
}

.admin-header span{
    color:#fff;
    background:rgba(90,21,21,.75);
    padding:8px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    letter-spacing:3px;
}

.admin-header h1{
    font-size:clamp(24px,4.5vw,46px);
    line-height:1;
    margin:14px 0;
}

.admin-header p{
    color:var(--muted);
}

/* SPEC_DASHBOARD_GRAFICOS_E_REDESIGN, Correção 1/6 - cabeçalho com a
   saudação em destaque, texto com gradiente dourado -> vinho (mesmas
   variáveis do resto do projeto). */
.dashboard-welcome-header{
    margin-bottom:26px;
}

.dashboard-welcome-header h1{
    background:linear-gradient(135deg,var(--gold),var(--wine-3));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

/* SPEC_DASHBOARD_REDESIGN_PARTE_2 - .admin-kpis/.kpi-card* foram removidos
   junto com o layout antigo do Dashboard (único lugar que os usava). Os três
   cartões viraram .dashboard-mini-card, e "Receita" virou
   .dashboard-receita-card. */

/* Correção 3 - mini-cards. Continuam <button> de verdade (acessíveis por
   teclado) porque são os KPIs clicáveis que abrem os modais. */
.dashboard-mini-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:18px;
    margin-bottom:24px;
}

.dashboard-mini-card{
    display:grid;
    gap:8px;
    align-content:start;
    padding:1.35rem;
    border:none;
    border-radius:26px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 20px 48px rgba(0,0,0,.25);
    color:inherit;
    font:inherit;
    text-align:left;
    cursor:pointer;
    transition:transform .2s ease, border-color .2s ease;
}

.dashboard-mini-card:hover{
    transform:translateY(-2px);
    border-color:rgba(255,255,255,.22);
}

.dashboard-mini-card:focus-visible{
    outline:2px solid rgba(255,255,255,.86);
    outline-offset:3px;
}

.dashboard-mini-card-topo{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-size:clamp(11px,1.6vw,13px);
    font-weight:800;
}

.dashboard-mini-card-icone{
    width:18px;
    height:18px;
    flex-shrink:0;
    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.dashboard-mini-card strong{
    color:#fff;
    font-size:clamp(28px,5.5vw,40px);
    font-weight:900;
    line-height:1;
}

.dashboard-mini-card-nota{
    color:var(--muted);
    font-size:11px;
}

.dashboard-sparkline{
    display:block;
    width:100%;
    height:40px;
    margin-top:4px;
}

/* Cor por métrica: dourado nas duas positivas, vermelho em Cancelamentos
   (mesmo sinal semântico de "negativo" já usado em .status-cancelado). */
.dashboard-mini-card--clientes .dashboard-mini-card-topo,
.dashboard-mini-card--cortes .dashboard-mini-card-topo{
    color:var(--gold);
}

.dashboard-mini-card--cancelados .dashboard-mini-card-topo{
    color:var(--red-soft);
}

.dashboard-mini-card--cancelados .dashboard-area-chart-line{
    stroke:var(--red-soft);
}

.dashboard-mini-card--cancelados .dashboard-area-chart-stop-start,
.dashboard-mini-card--cancelados .dashboard-area-chart-stop-end{
    stop-color:var(--red-soft);
}

/* Correção 2 - "Barbeiros de hoje" */
.dashboard-ver-todos-btn{
    padding:8px 16px;
    border:none;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    color:var(--gold);
    font-size:12px;
    font-weight:900;
    cursor:pointer;
    transition:.25s;
}

.dashboard-ver-todos-btn:hover{
    background:rgba(255,211,107,.14);
}

.dashboard-barbeiros-lista{
    display:grid;
    gap:14px;
}

.dashboard-barbeiro-card{
    display:flex;
    align-items:center;
    gap:16px;
    width:100%;
    padding:16px;
    border:none;
    border-radius:22px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    color:inherit;
    font:inherit;
    text-align:left;
    cursor:pointer;
    transition:.25s;
}

.dashboard-barbeiro-card:hover{
    background:rgba(255,211,107,.08);
    border-color:rgba(255,211,107,.28);
}

.dashboard-barbeiro-card:focus-visible{
    outline:2px solid rgba(255,255,255,.86);
    outline-offset:3px;
}

/* Avatar: a <img> fica por cima das iniciais. Sem foto (ou se o arquivo
   sumiu do Storage e o onerror removeu a <img>), as iniciais que já estavam
   embaixo aparecem sozinhas - fallback sem JS extra. */
.dashboard-barbeiro-avatar{
    position:relative;
    width:54px;
    height:54px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,var(--wine-3),var(--wine));
    border:1px solid rgba(255,211,107,.35);
    color:#fff;
    font-size:16px;
    font-weight:900;
    overflow:hidden;
}

.dashboard-barbeiro-avatar img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.dashboard-barbeiro-dados{
    display:grid;
    gap:6px;
    min-width:0;
    flex:1;
}

.dashboard-barbeiro-nome{
    color:#fff;
    font-size:16px;
    font-weight:900;
}

.dashboard-barbeiro-faturado{
    color:var(--gold);
    font-size:18px;
    font-weight:900;
}

.dashboard-barbeiro-faturado small{
    color:var(--muted);
    font-size:11px;
    font-weight:700;
}

.dashboard-barbeiro-metricas{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:2px;
}

.dashboard-barbeiro-metrica{
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
}

.dashboard-barbeiro-metrica svg{
    width:15px;
    height:15px;
    flex-shrink:0;
    fill:none;
    stroke:currentColor;
    stroke-width:2.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.dashboard-barbeiro-chevron{
    width:18px;
    height:18px;
    flex-shrink:0;
    fill:none;
    stroke:var(--muted);
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Correção 4 - gauge de ocupação + ticket médio */
.dashboard-duo-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:18px;
    margin-bottom:24px;
}

.dashboard-gauge-card,
.dashboard-ticket-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.dashboard-gauge-info span,
.dashboard-ticket-info span{
    display:block;
    color:var(--muted);
    font-size:clamp(11px,1.6vw,13px);
    font-weight:800;
    margin-bottom:10px;
}

.dashboard-gauge-info strong,
.dashboard-ticket-info strong{
    display:block;
    background:linear-gradient(135deg,var(--gold),var(--wine-3));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-size:clamp(28px,5.5vw,40px);
    font-weight:900;
    margin-bottom:8px;
}

.dashboard-gauge-info small{
    color:var(--muted);
    font-size:12px;
}

.dashboard-gauge-grafico{
    width:clamp(84px,18vw,104px);
    flex-shrink:0;
}

.dashboard-gauge-svg{
    width:100%;
    height:auto;
    display:block;
}

.dashboard-gauge-trilho{
    fill:none;
    stroke:rgba(255,255,255,.09);
    stroke-width:9;
}

.dashboard-gauge-preenchimento{
    fill:none;
    stroke:var(--gold);
    stroke-width:9;
    stroke-linecap:round;
    transition:stroke-dasharray .5s ease;
}

.dashboard-ticket-icone{
    width:clamp(52px,11vw,64px);
    height:clamp(52px,11vw,64px);
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,211,107,.1);
    border:1px solid rgba(255,211,107,.28);
}

.dashboard-ticket-icone svg{
    width:55%;
    height:55%;
    fill:none;
    stroke:var(--gold);
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Correção 1 - foto de perfil no formulário de barbeiro */
.barber-foto-linha{
    display:flex;
    align-items:center;
    gap:14px;
}

.barber-foto-preview{
    position:relative;
    width:62px;
    height:62px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,var(--wine-3),var(--wine));
    border:1px solid rgba(255,211,107,.35);
    color:#fff;
    font-size:17px;
    font-weight:900;
    overflow:hidden;
}

.barber-foto-preview img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.barber-foto-acoes{
    display:grid;
    gap:8px;
    min-width:0;
    flex:1;
}

.barber-foto-acoes input[type="file"]{
    height:auto;
    padding:10px 12px;
    font-size:13px;
}

/* SPEC_ENQUADRAMENTO_FOTO_BARBEIRO - componente genérico de enquadramento
   (recorte/zoom), construído inteiramente via JS (abrirEnquadramentoFoto em
   supabase-db.js) - nenhum HTML estático depende dele, então estas classes
   só existem aqui pra dar estilo ao que a função monta. Reaproveitável por
   qualquer upload de foto de pessoa no futuro, não só barbeiros. */
.photo-crop{
    display:grid;
    gap:18px;
    justify-items:center;
}

.photo-crop-canvas-wrap{
    position:relative;
    width:100%;
    max-width:320px;
    aspect-ratio:1;
    border-radius:24px;
    overflow:hidden;
    background:#0a0505;
    /* Sem isso, um arrasto de verdade no celular também tenta rolar a
       página por baixo do modal - mesmo cuidado de touch-action já
       documentado no carrossel do Hero, só que aqui a intenção é o oposto
       (bloquear a rolagem nativa de propósito, o gesto inteiro pertence ao
       canvas, não existe conteúdo por trás pra rolar). */
    touch-action:none;
    cursor:grab;
}

.photo-crop-canvas-wrap:active{
    cursor:grabbing;
}

.photo-crop-canvas-wrap canvas{
    display:block;
    width:100%;
    height:100%;
}

.photo-crop-help{
    margin:0;
    color:var(--muted);
    font-size:13px;
    text-align:center;
}

.photo-crop-zoom{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    max-width:320px;
}

.photo-crop-zoom-icone{
    width:18px;
    height:18px;
    flex-shrink:0;
    fill:none;
    stroke:var(--muted);
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.photo-crop-zoom input[type="range"]{
    flex:1;
    accent-color:var(--gold);
}

.photo-crop-acoes{
    display:flex;
    gap:12px;
    width:100%;
    max-width:320px;
}

.photo-crop-cancelar-btn{
    flex:1;
    height:54px;
    border:none;
    border-radius:20px;
    background:rgba(255,255,255,.055);
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
    font-weight:900;
    cursor:pointer;
}

.photo-crop-acoes .auth-btn{
    flex:1;
}

/* SPEC_DASHBOARD_GRAFICOS_E_REDESIGN, Correção 2/6 - cartão "Receita
   Estimada" saiu da grade compacta (não tem espaço pra gráfico + meta ali) e
   virou um painel próprio, acentos dourado/vinho. */
.dashboard-receita-card{
    display:grid;
    gap:20px;
}

.dashboard-receita-head span{
    display:block;
    color:var(--muted);
    font-size:clamp(11px,1.6vw,13px);
    font-weight:800;
    margin-bottom:12px;
}

.dashboard-receita-head strong{
    background:linear-gradient(135deg,var(--gold),var(--wine-3));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-size:clamp(34px,7vw,52px);
    font-weight:900;
    display:block;
    margin-bottom:10px;
}

.dashboard-receita-chart{
    width:100%;
    height:clamp(90px,18vw,140px);
}

.dashboard-area-chart{
    width:100%;
    height:100%;
    display:block;
    overflow:visible;
}

.dashboard-area-chart-stop-start{
    stop-color:var(--gold);
    stop-opacity:.5;
}

.dashboard-area-chart-stop-end{
    stop-color:var(--gold);
    stop-opacity:0;
}

.dashboard-area-chart-line{
    fill:none;
    stroke:var(--gold);
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.dashboard-meta-bloco[hidden]{
    display:none;
}

.dashboard-meta-bloco{
    display:grid;
    gap:10px;
}

.dashboard-meta-legenda{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.dashboard-meta-legenda span{
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
}

.dashboard-meta-legenda strong{
    color:var(--gold);
    font-size:15px;
    font-weight:900;
}

.dashboard-meta-barra{
    height:12px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    overflow:hidden;
}

.dashboard-meta-barra-preenchimento{
    height:100%;
    width:0%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--wine-3),var(--gold));
    transition:width .4s ease;
}

.dashboard-meta-bloco small{
    color:var(--muted);
}

.kpi-comparison{
    display:block;
    margin-top:6px;
    font-weight:800;
}

.kpi-comparison.positive{
    color:#7dffad;
}

.kpi-comparison.negative{
    color:var(--red-soft);
}

.appointments-layout{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:18px;
}

/* Só os 2 cartões-resumo ficam visíveis aqui agora (o conteúdo dos modais
   fica hidden até ser aberto) — colunas fluidas, não fixas
   (SPEC_DISPONIBILIDADE_CARDS_E_CORRECAO_NUMERO, Correção 2) */
.availability-dashboard .booking-summary-cards{
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}

.panel-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px;
}

.panel-title h2{
    font-size:clamp(19px,2.8vw,26px);
}

.panel-title span{
    color:var(--muted);
    font-size:11px;
    font-weight:900;
    letter-spacing:3px;
}

.clients-toolbar{
    display:grid;
    grid-template-columns:1fr auto;
    gap:16px;
    margin-bottom:22px;
}

/* SPEC_CLIENTE_HERO_LIMPEZA_FINAL, Correção 3 - mesmo bug do
   .pwa-install-section: display:flex sem !important não respeita [hidden].
   Achado na auditoria, afeta #scheduleBarberSelectWrap/#availabilityBarberSelectWrap
   (some quando só há 1 barbeiro cadastrado). */
.search-box[hidden]{
    display:none !important;
}

.search-box{
    height:58px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 18px;
    border-radius:22px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.10);
}

/* SPEC_ADMIN_BARRA_INFERIOR_E_ICONES_SVG, Correção 2 - substitui os emojis
   de busca/seletor de barbeiro (mesmo padrão de traço das outras svg-icon). */
.search-box-icon{
    width:20px;
    height:20px;
    flex-shrink:0;
    color:var(--muted);
    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.search-box input{
    width:100%;
    height:100%;
    background:transparent;
    border:none;
    outline:none;
    color:#fff;
}

.search-box select{
    width:100%;
    height:100%;
    background:transparent;
    border:none;
    outline:none;
    color:#fff;
    font-weight:800;
}

.availability-barber-select{
    margin-bottom:16px;
}

/* SPEC_AGENDAMENTOS_REORGANIZACAO_E_FILTRO_BARBEIRO, Correção 4 - botão
   customizado no lugar do <select> nativo, dentro do mesmo .search-box de
   sempre. Avatar com a paleta dourado/vinho já usada no card de barbeiro do
   Dashboard (.dashboard-barbeiro-avatar), não uma cor nova. */
.schedule-barber-filter-btn{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    gap:12px;
    background:transparent;
    border:none;
    color:#fff;
    font-weight:800;
    text-align:left;
}

.schedule-barber-filter-avatar{
    position:relative;
    width:34px;
    height:34px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    overflow:hidden;
    background:linear-gradient(135deg,var(--wine-3),var(--wine));
    border:1px solid rgba(255,211,107,.35);
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.schedule-barber-filter-avatar img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.schedule-barber-filter-nome{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.schedule-barber-filter-chevron{
    width:16px;
    height:16px;
    flex-shrink:0;
    color:var(--muted);
    fill:none;
    stroke:currentColor;
    stroke-width:2.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.clients-counter{
    min-width:150px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:22px;
    background:linear-gradient(135deg,var(--wine-3),var(--wine));
    font-weight:900;
}

.client-avatar{
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--wine-3),var(--wine));
    color:#fff;
    font-weight:900;
    margin-bottom:18px;
}

.client-card-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.client-card-head .client-avatar{
    flex:0 0 auto;
    margin-bottom:0;
}

.client-card-head h3{
    margin-bottom:4px;
}

.client-card-head p{
    margin-bottom:0;
}

.client-meta-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:18px;
}

.client-meta-grid div{
    padding:12px;
    border-radius:16px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.08);
}

.client-meta-grid span{
    display:block;
    color:rgba(255,255,255,.48);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:1.5px;
    margin-bottom:6px;
}

.client-meta-grid strong{
    display:block;
    color:var(--white);
    font-size:13px;
    line-height:1.35;
    word-break:break-word;
}

.client-duplicates-alert{
    grid-column:1 / -1;
    padding:18px;
    border-radius:22px;
    background:rgba(255,211,107,.08);
    border:1px solid rgba(255,211,107,.22);
    display:grid;
    gap:12px;
}

.client-duplicates-alert strong{
    color:#fff;
}

.client-duplicates-alert p,
.client-duplicates-alert span{
    color:var(--muted);
    line-height:1.5;
}

.client-duplicates-alert ul{
    display:grid;
    gap:8px;
    list-style:none;
}

.client-duplicates-alert li{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    align-items:center;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(255,255,255,.045);
}

.client-actions,
.service-actions,
.appointment-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.client-action,
.service-action,
.appointment-action{
    flex:1;
    min-height:40px;
    border:none;
    border-radius:14px;
    font-weight:900;
    background:rgba(255,255,255,.06);
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}

.client-action svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.danger,
.appointment-action.danger,
.service-action.danger,
.client-action.danger{
    color:#ff9b9b;
    border-color:rgba(255,130,130,.25);
}

.appointment-action.success{
    color:#97ffbd;
    border-color:rgba(100,255,160,.25);
}

.appointment-action.info{
    color:#9ccaff;
    border-color:rgba(100,170,255,.25);
}

.client-admin-modal{
    position:fixed;
    inset:0;
    z-index:9998;
    display:none;
}

.client-admin-modal.active{
    display:block;
}

.client-admin-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(8px);
}

.client-admin-modal-content{
    position:absolute;
    left:50%;
    top:50%;
    width:min(520px, calc(100% - 28px));
    max-height:calc(100vh - 36px);
    overflow:auto;
    transform:translate(-50%, -50%);
    padding:24px;
    border-radius:28px;
    background:rgba(9,6,5,.94);
    border:1px solid rgba(255,255,255,.13);
    box-shadow:0 30px 90px rgba(0,0,0,.62);
}

.client-admin-modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px;
}

.client-admin-modal-header span{
    display:inline-block;
    color:var(--muted);
    font-size:11px;
    font-weight:900;
    letter-spacing:2px;
    margin-bottom:8px;
}

.client-admin-modal-header h3{
    font-size:25px;
}

.client-admin-modal-close{
    width:42px;
    height:42px;
    border:none;
    border-radius:14px;
    background:rgba(255,255,255,.07);
    color:#fff;
    font-size:24px;
}

.client-form-grid{
    display:grid;
    gap:2px;
}

.client-modal-save{
    margin-top:4px;
}

.client-modal-note{
    color:var(--muted);
    line-height:1.6;
    margin-bottom:18px;
}

.appointment-form{
    display:grid;
    gap:16px;
}

.appointments-list{
    display:grid;
    gap:14px;
    margin-top:16px;
}

.appointment-top{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.appointment-status{
    min-width:96px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    flex-shrink:0;
    white-space:nowrap;
}

.status-pendente{
    color:var(--yellow);
    background:rgba(255,193,7,.12);
}

.status-confirmado{
    color:#7dffad;
    background:rgba(80,200,120,.12);
}

.status-concluido{
    color:var(--blue);
    background:rgba(80,160,255,.12);
}

.status-cancelado{
    color:var(--red-soft);
    background:rgba(255,100,100,.12);
}

.appointment-info{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-bottom:14px;
}

.appointment-info div{
    padding:12px;
    border-radius:16px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.06);
}

/* SPEC_MEUS_AGENDAMENTOS_CARTAO_COMPACTO - cartão pequeno (data + horário +
   status) só na lista "Meus Agendamentos" do cliente; abre o modal de
   detalhes ao tocar. Transição rápida (90ms) pra :active/:focus-visible
   darem retorno instantâneo ao toque (SPEC_CARTAO_COMPACTO_FEEDBACK_E_HORARIO,
   Correção 1) - :hover não é suficiente em telas de toque. */
.appointment-card-compact{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    width:100%;
    max-width:100%;
    /* Item de grid (.schedule-clean-list) - sem isso, o grid usa o
       min-content do card (não a versão já quebrada por flex-wrap) como
       largura mínima automática da coluna, estourando a tela mesmo com o
       flex-wrap acima. Mesmo princípio de min-width:0 em item de flex. */
    min-width:0;
    padding:16px 20px;
    border-radius:20px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    font:inherit;
    text-align:left;
    cursor:pointer;
    transition:background-color 90ms ease, border-color 90ms ease, transform 90ms ease;
}

.appointment-card-compact:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.18);
    transform:translateY(-1px);
}

.appointment-card-compact:active{
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.24);
    transform:scale(.98);
}

.appointment-card-compact:focus-visible{
    outline:2px solid rgba(255,255,255,.86);
    outline-offset:2px;
}

.appointment-card-compact-datetime{
    display:flex;
    flex-direction:column;
    gap:2px;
    flex-shrink:0;
}

.appointment-card-compact strong{
    font-size:clamp(15px,2vw,17px);
    font-weight:900;
}

.appointment-card-compact small{
    color:var(--muted);
    font-size:12px;
    font-weight:600;
}

/* SPEC_AGENDAMENTOS_REORGANIZACAO_E_FILTRO_BARBEIRO, Correção 3 - variante
   admin do cartão compacto (nome do cliente + serviço, além de data/horário
   - o admin olha vários clientes na mesma lista, precisa dessa informação
   extra pra escanear rápido). Mesma base visual de .appointment-card-compact,
   só acrescenta o bloco do cliente à esquerda. */
.appointment-card-compact--admin{
    gap:16px;
}

.appointment-card-compact-cliente{
    display:flex;
    flex-direction:column;
    gap:2px;
    flex:1;
    min-width:0;
}

.appointment-card-compact-cliente strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.work-hours-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(80px,1fr));
    gap:12px;
}

.work-hour-btn{
    min-height:58px;
    border:none;
    border-radius:18px;
    color:var(--muted);
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.10);
    font-size:clamp(13px,2vw,16px);
    font-weight:900;
    transition:.25s;
}

.work-hour-btn.active{
    color:#fff;
    background:linear-gradient(135deg,var(--wine-3),var(--wine));
    border-color:rgba(255,255,255,.18);
    box-shadow:0 14px 34px rgba(90,21,21,.35);
}

.availability-help{
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
    margin-bottom:20px;
}

/* SPEC_TELA_INICIAL_ENDERECO_E_SAUDACAO, Correção 1 - "Horário de
   Funcionamento" (admin, Configurações). Mesmas cores/interação de
   .work-hour-btn/.active, mas em linhas (dia + toggle + par de horários)
   em vez de uma grade compacta - cada dia precisa de espaço pros dois
   campos de horário quando está Aberto. */
.store-hours-grid{
    display:grid;
    gap:12px;
    margin-bottom:20px;
}

.store-hours-day{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-radius:18px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.10);
}

.store-hours-day-name{
    flex:1 1 90px;
    color:#fff;
    font-size:14px;
    font-weight:800;
}

.store-hours-toggle{
    min-width:92px;
    height:40px;
    padding:0 16px;
    border:none;
    border-radius:14px;
    color:var(--muted);
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    font-size:12px;
    font-weight:900;
    letter-spacing:.5px;
    text-transform:uppercase;
    transition:.25s;
}

.store-hours-toggle.active{
    color:#fff;
    background:linear-gradient(135deg,var(--wine-3),var(--wine));
    border-color:rgba(255,255,255,.18);
}

.store-hours-times{
    display:flex;
    align-items:center;
    gap:8px;
}

.store-hours-times span{
    color:var(--muted);
    font-size:13px;
}

.store-hours-times input[type="time"]{
    height:40px;
    border:none;
    border-radius:12px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    padding:0 10px;
    font-size:14px;
    color-scheme:dark;
}

.store-hours-day.closed .store-hours-times{
    display:none;
}

.availability-calendar-head{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
    margin-bottom:18px;
}

.availability-calendar-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.calendar-btn{
    min-width:44px;
    height:44px;
    padding:0 14px;
    border:none;
    border-radius:15px;
    background:rgba(255,255,255,.055);
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
    font-weight:900;
}

.calendar-btn.today{
    background:linear-gradient(135deg,var(--wine-3),var(--wine));
}

.availability-month-title{
    font-size:26px;
    margin-bottom:18px;
}

.availability-weekdays,
.availability-calendar-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:8px;
}

.availability-weekdays span{
    text-align:center;
    color:var(--muted);
    font-size:clamp(10px,2.6vw,12px);
    font-weight:900;
}

/* 7 colunas continuam fixas (é um calendário, coluna = dia da semana) —
   o que se ajusta é o tamanho da célula (SPEC_DISPONIBILIDADE_FLUIDO, Correção 2) */
.availability-day{
    min-width:0;
    min-height:clamp(44px,12vw,78px);
    border:none;
    border-radius:18px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    padding:clamp(4px,2vw,10px);
    text-align:left;
}

.availability-day.blocked{
    background:linear-gradient(135deg,rgba(122,29,29,.85),rgba(59,13,13,.85));
}

/* SPEC_FOLGA_SEMANAL_VISIVEL_NO_CALENDARIO - tom âmbar (var(--yellow), já
   usado em .status-pendente) de propósito, bem diferente do vinho de
   .blocked - só informativo, não pode parecer a mesma coisa que um
   bloqueio pontual editável. */
.availability-day.weekly-off{
    background:linear-gradient(135deg,rgba(255,211,107,.28),rgba(122,90,20,.5));
    border-color:rgba(255,211,107,.35);
}

.availability-day.weekly-off .availability-day-label{
    color:var(--yellow);
}

.availability-day-number{
    display:block;
    font-size:clamp(14px,4vw,20px);
    font-weight:900;
}

/* Só o rótulo trunca — números têm no máximo 2 dígitos e nunca devem cortar
   (SPEC_DISPONIBILIDADE_CARDS_E_CORRECAO_NUMERO, Correção 1) */
.availability-day-label{
    display:block;
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:clamp(9px,2.4vw,11px);
    color:rgba(255,255,255,.62);
}

.clean-schedule-panel{
    padding:28px;
}

.schedule-clean-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:24px;
}

.schedule-view-tabs{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.schedule-view-btn{
    border:none;
    height:46px;
    padding:0 24px;
    border-radius:16px;
    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.75);
    font-weight:700;
    transition:.25s;
}

.schedule-view-btn.active{
    background:linear-gradient(135deg,var(--wine-3),var(--wine));
    color:#fff;
    box-shadow:0 12px 30px rgba(90,21,21,.35);
}

/* Mesmo bug do .search-box[hidden] (SPEC_CLIENTE_HERO_LIMPEZA_FINAL,
   Correção 3): display:flex sem !important não respeita [hidden]. Afeta
   #scheduleCleanActions, escondido por padrão no viewMode "all". */
.schedule-clean-actions[hidden]{
    display:none !important;
}

.schedule-clean-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
    margin-bottom:24px;
}

.schedule-clean-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:18px;
}

.clean-appointment-card{
    position:relative;
    border-radius:28px;
    padding:24px;
    overflow:hidden;
    background:linear-gradient(145deg,rgba(28,21,20,.95),rgba(10,8,8,.96));
    border:1px solid rgba(255,255,255,.08);
    transition:.28s;
}

.clean-appointment-card:hover{
    transform:translateY(-4px);
    border-color:rgba(122,29,29,.40);
    box-shadow:0 18px 40px rgba(0,0,0,.35);
}

.clean-appointment-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,var(--wine),var(--wine-3));
}

.clean-appointment-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.clean-client{
    display:flex;
    align-items:center;
    gap:14px;
}

.clean-avatar{
    width:58px;
    height:58px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    background:linear-gradient(135deg,var(--wine-3),var(--wine));
    color:#fff;
    box-shadow:0 12px 24px rgba(90,21,21,.30);
}

.clean-client strong{
    display:block;
    color:#fff;
    font-size:18px;
}

.clean-client span{
    color:rgba(255,255,255,.55);
    font-size:13px;
}

.clean-status{
    padding:8px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    background:rgba(46,204,113,.12);
    color:#2ecc71;
}

.clean-info-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin-bottom:18px;
}

.clean-info-card{
    border-radius:18px;
    padding:14px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.04);
}

.clean-info-card small{
    display:block;
    color:rgba(255,255,255,.45);
    font-size:11px;
    margin-bottom:6px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.clean-info-card strong{
    color:#fff;
    font-size:15px;
}

.clean-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.clean-actions button{
    flex:1;
    border:none;
    height:48px;
    border-radius:16px;
    font-weight:700;
    transition:.25s;
}

.clean-confirm{
    background:linear-gradient(135deg,#0f8f4c,#16b762);
    color:#fff;
}

.clean-cancel{
    background:rgba(255,255,255,.06);
    color:#fff;
}

.booking-premium-card,
.booking-mobile-card{
    background:rgba(10,8,8,.92);
    border:1px solid rgba(255,255,255,.08);
    border-radius:28px;
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:18px;
    box-shadow:0 0 40px rgba(0,0,0,.45);
}

.booking-entry-card{
    background:rgba(10,8,8,.86);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    box-shadow:0 24px 52px rgba(0,0,0,.34);
}

.booking-entry-card strong,
.booking-entry-card span{
    display:block;
}

.booking-entry-card strong{
    color:#fff;
    font-size:18px;
}

.booking-entry-card span{
    margin-top:5px;
    color:rgba(255,255,255,.62);
    line-height:1.45;
}

.booking-entry-btn{
    min-height:50px;
    border:0;
    border-radius:16px;
    padding:0 22px;
    background:linear-gradient(135deg,var(--wine-3),var(--wine));
    color:#fff;
    font-weight:900;
    white-space:nowrap;
}

.booking-flow{
    position:fixed;
    inset:0;
    z-index:200;
    width:100%;
    height:100vh;
    height:100dvh;
    max-height:100vh;
    max-height:100dvh;
    display:flex;
    justify-content:center;
    background:rgba(4,3,3,.84);
    backdrop-filter:blur(18px);
    opacity:0;
    pointer-events:none;
    transform:scale(.985);
    transition:opacity .24s ease, transform .24s ease;
    overflow:hidden;
    overscroll-behavior:contain;
}

.booking-flow,
.booking-flow *{
    box-sizing:border-box;
}

.booking-flow *{
    max-width:100%;
}

.booking-flow.active{
    opacity:1;
    pointer-events:auto;
    transform:scale(1);
}

.booking-flow-open{
    overflow:hidden;
}

.booking-flow-panel{
    width:min(760px,100%);
    height:100vh;
    height:100dvh;
    max-height:100vh;
    max-height:100dvh;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:
        calc(14px + env(safe-area-inset-top))
        14px
        calc(14px + env(safe-area-inset-bottom));
    background:
        radial-gradient(circle at top,rgba(122,29,29,.22),transparent 38%),
        #060404;
    overflow:hidden;
}

.booking-flow-header{
    flex:0 0 auto;
    display:grid;
    grid-template-columns:76px minmax(0,1fr) 48px;
    align-items:center;
    gap:10px;
    min-width:0;
}

.booking-flow-header h2{
    color:#fff;
    font-size:19px;
    text-align:center;
}

.booking-flow-header span{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.58);
    font-size:12px;
    font-weight:900;
    text-align:center;
}

.booking-flow-icon-btn{
    min-height:42px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    background:rgba(255,255,255,.055);
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.booking-flow-icon-btn:disabled{
    opacity:.35;
}

.booking-flow .booking-mobile-card{
    min-height:0;
    flex:1;
    height:auto;
    overflow:hidden;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    gap:12px;
}

.booking-flow .booking-step-header{
    flex:0 0 auto;
    padding:4px 0 0;
}

.booking-flow .booking-step.active{
    min-height:0;
    flex:1 1 auto;
    height:auto;
    overflow-y:auto;
    overflow-x:hidden;
    padding:0 1px 12px;
    -webkit-overflow-scrolling:touch;
}

.booking-flow .booking-summary-box{
    display:none;
}

.booking-flow .booking-step-actions{
    display:none;
}

.booking-flow.confirming .booking-summary-box{
    display:block;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:12px;
    -webkit-overflow-scrolling:touch;
}

.booking-flow.confirming .booking-summary-box > span,
.booking-flow.confirming .booking-summary-compact{
    display:none;
}

.booking-flow.confirming .booking-mobile-card{
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr) auto;
    min-height:0;
}

.booking-flow.confirming .booking-step[data-booking-step="5"].active{
    min-height:auto;
    flex:0 0 auto;
    overflow:visible;
    padding:0;
}

.booking-flow.confirming .booking-confirm-panel{
    padding:12px;
    border-radius:18px;
}

.booking-flow.confirming .booking-summary-list{
    grid-template-columns:1fr;
    gap:8px;
}

.booking-flow.confirming .booking-summary-list div{
    min-height:auto;
    padding:9px 10px;
}

.booking-flow.confirming .booking-summary-list small{
    margin-bottom:3px;
    font-size:10px;
}

.booking-flow.confirming .booking-summary-list strong{
    font-size:13px;
}

.booking-flow.confirming .booking-summary-list button{
    margin-top:7px;
    padding:7px 9px;
}

.booking-flow.success .booking-step-header,
.booking-flow.success .booking-summary-box,
.booking-flow.success .booking-step-actions{
    display:none;
}

.booking-flow.success .booking-mobile-card{
    display:flex;
    justify-content:center;
}

.booking-flow.confirming .booking-step-actions{
    display:grid;
    flex:0 0 auto;
    padding-top:10px;
    padding-bottom:max(0px,env(safe-area-inset-bottom));
    background:
        linear-gradient(180deg,rgba(6,4,4,0),#060404 26%);
}

.booking-flow.success .booking-flow-header{
    display:none;
}

.booking-summary-list button{
    margin-top:10px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    padding:8px 10px;
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.booking-success-screen{
    min-height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    text-align:center;
    padding:24px;
}

.booking-success-icon{
    width:92px;
    height:92px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(23,167,101,.14);
    box-shadow:0 0 34px rgba(23,167,101,.26);
}

.booking-success-icon svg{
    width:66px;
    height:66px;
    fill:none;
}

.booking-success-icon circle{
    stroke:#17a765;
    stroke-width:3;
}

.booking-success-icon path{
    stroke:#fff;
    stroke-width:5;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.booking-success-screen h3{
    color:#fff;
    font-size:24px;
}

.booking-success-screen p{
    max-width:360px;
    color:rgba(255,255,255,.66);
    line-height:1.5;
}

.booking-step-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.booking-step-header span,
.booking-step-header strong{
    color:rgba(255,255,255,.58);
    font-size:12px;
    font-weight:900;
}

.booking-step-header h3{
    margin-top:6px;
    font-size:22px;
}

.booking-step-header p{
    margin-top:6px;
    color:rgba(255,255,255,.58);
    font-size:13px;
    font-weight:500;
    line-height:1.4;
}

.booking-microcopy{
    display:block;
    min-height:18px;
    margin-top:8px;
    color:rgba(255,255,255,.68);
    font-size:12px;
    font-weight:700;
    opacity:0;
    transform:translateY(3px);
    transition:opacity .22s ease, transform .22s ease;
}

.booking-microcopy.active{
    opacity:1;
    transform:translateY(0);
}

.booking-progress{
    height:7px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(255,255,255,.08);
}

.booking-progress span{
    display:block;
    width:20%;
    height:100%;
    border-radius:999px;
    background:linear-gradient(135deg,var(--wine-3),var(--wine));
    transition:width .25s ease;
}

.booking-step{
    display:none;
}

.booking-step.active{
    display:block;
    animation:fadeUp .22s ease both;
}

.booking-service-options,
.booking-barber-options{
    display:grid;
    gap:12px;
}

.booking-service-card,
.booking-choice-card{
    width:100%;
    min-height:86px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:20px;
    padding:16px;
    background:rgba(255,255,255,.045);
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    text-align:left;
    transition:.2s;
}

.booking-service-card.active,
.booking-choice-card.active{
    border-color:rgba(255,255,255,.22);
    background:linear-gradient(135deg,rgba(122,29,29,.85),rgba(70,12,15,.88));
    box-shadow:0 16px 32px rgba(90,21,21,.24);
}

/* Pedido do Product Owner (teste em celular real) - card do barbeiro maior
   que o de serviço pra caber um avatar mais visível; sobrescreve só
   min-height/padding aqui (depois da regra compartilhada acima), sem
   duplicar o resto (borda, fundo, layout) nem alterar .booking-service-card. */
.booking-choice-card{
    min-height:100px;
    padding:18px;
}

.booking-service-card strong,
.booking-choice-card strong{
    font-size:16px;
}

.booking-service-card p{
    color:rgba(255,255,255,.64);
    font-size:13px;
    line-height:1.35;
}

.booking-service-card small{
    color:#fff;
    font-weight:900;
}

/* SPEC_AGENDAMENTO_BARBEIRO_PRIMEIRO, Correção 2 - ícone ao lado do nome no
   cartão de barbeiro, mesmo peso visual do cartão de serviço */
.booking-choice-head{
    display:flex;
    align-items:center;
    gap:12px;
}

/* SPEC_FOTO_BARBEIRO_SELECAO_CLIENTE, Correção 1 - mesmo padrão visual do
   avatar já usado no Dashboard/filtro de Agendamentos do admin
   (.dashboard-barbeiro-avatar/.schedule-barber-filter-avatar): círculo com
   gradiente vinho + borda dourada, <img> por cima cobrindo, iniciais como
   fallback embaixo (sem JS extra, onerror da <img> cobre o caso do arquivo
   ter sumido do Storage). Tamanho próprio (entre os outros dois) porque o
   cartão de escolha de barbeiro tem uma proporção diferente do dropdown/
   card do Dashboard - mesmo estilo, não um componente novo.
   Aumentado (40px -> 52px) a pedido do Product Owner depois de testar no
   celular - a foto ficava pequena demais; o card acima cresceu junto
   (min-height/padding) pra caber o avatar maior sem apertar. */
.booking-choice-avatar{
    position:relative;
    width:52px;
    height:52px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    overflow:hidden;
    background:linear-gradient(135deg,var(--wine-3),var(--wine));
    border:1px solid rgba(255,211,107,.35);
    color:#fff;
    font-size:17px;
    font-weight:900;
}

.booking-choice-avatar img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Cartões-resumo Data/Horário: mesmo vocabulário de .booking-service-card/.client-date-card */
.booking-summary-cards{
    display:grid;
    gap:12px;
}

.booking-summary-card{
    width:100%;
    min-height:78px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:20px;
    padding:16px;
    background:rgba(255,255,255,.045);
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    text-align:left;
    transition:transform .2s ease, border-color .2s ease, background-color .2s ease, opacity .2s ease;
}

.booking-summary-card:not(:disabled):hover{
    transform:translateY(-1px);
    border-color:rgba(255,255,255,.18);
}

.booking-summary-label{
    color:rgba(255,255,255,.55);
    font-size:11px;
    font-weight:900;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.booking-summary-card strong{
    font-size:17px;
    font-weight:800;
}

/* Mesmo padrão de opacidade apagada usado em .client-date-card.blocked */
.booking-summary-card:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.booking-step-note{
    margin-bottom:14px;
    color:rgba(255,255,255,.62);
    font-size:14px;
    line-height:1.45;
}

.booking-step-note strong{
    display:block;
    color:#fff;
    font-size:18px;
    font-weight:900;
    line-height:1.2;
}

.booking-step-note span{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.56);
    font-size:13px;
    font-weight:500;
    line-height:1.35;
}

.booking-summary-box{
    border-radius:20px;
    padding:16px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
}

.booking-summary-box span{
    display:block;
    color:rgba(255,255,255,.55);
    font-size:11px;
    letter-spacing:2px;
    font-weight:900;
    margin-bottom:6px;
}

.booking-summary-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.booking-summary-list div{
    min-height:62px;
    border-radius:15px;
    padding:10px;
    background:rgba(255,255,255,.04);
}

.booking-summary-list small{
    display:block;
    margin-bottom:5px;
    color:rgba(255,255,255,.48);
    font-size:11px;
    font-weight:800;
}

.booking-summary-list strong{
    color:#fff;
    font-size:13px;
    line-height:1.3;
    overflow-wrap:anywhere;
}

.booking-summary-compact{
    display:block;
    margin-top:12px;
    color:rgba(255,255,255,.72);
    font-size:13px;
    line-height:1.4;
}

.booking-step-actions{
    display:grid;
    grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
    gap:10px;
}

.booking-back-btn{
    min-height:54px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:15px;
    font-weight:900;
}

.booking-back-btn:disabled{
    opacity:.35;
}

.booking-confirm-panel{
    border-radius:20px;
    padding:18px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
}

.booking-confirm-panel h3{
    font-size:20px;
    margin-bottom:8px;
}

.booking-confirm-panel p{
    color:rgba(255,255,255,.62);
    line-height:1.5;
}

.booking-modal{
    position:fixed;
    inset:0;
    z-index:9998;
    display:none;
}

.booking-modal.active{
    display:block;
}

.booking-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(8px);
}

.booking-modal-content{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    max-height:85vh;
    overflow:auto;
    padding:20px;
    border-radius:26px 26px 0 0;
    background:#080606;
    border-top:1px solid rgba(255,255,255,.12);
}

.booking-modal-header{
    display:flex;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
}

.booking-modal-close{
    width:44px;
    height:44px;
    border:none;
    border-radius:14px;
    background:rgba(255,255,255,.07);
    color:#fff;
    font-size:26px;
}

.client-month-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.client-month-nav button{
    width:46px;
    height:46px;
    border:none;
    border-radius:14px;
    background:rgba(255,255,255,.07);
    color:#fff;
    font-size:26px;
    font-weight:900;
}

.client-weekdays,
.client-date-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:6px;
}

.client-weekdays span{
    text-align:center;
    color:rgba(255,255,255,.55);
    font-size:11px;
    font-weight:900;
}

.client-date-card,
.client-time-card{
    border-radius:14px;
    padding:8px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease,
        background-color .2s ease,
        opacity .2s ease;
}

/* Tamanho acompanha a largura da coluna (já fluida via 1fr), em vez de
   min-height fixo — o card se ajusta ao espaço real do modal (SPEC_AGENDAMENTO_DATA_HORARIO_MODAL, Correção 3) */
.client-date-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    min-width:0;
    aspect-ratio:1;
    padding:8px 6px 12px;
    border-radius:14px;
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.10);
    color:#fff;
}

/* Preventivo: mesmo padrão de .availability-day-number/-label, caso o
   conteúdo cresça (SPEC_DISPONIBILIDADE_OVERFLOW_LARGURA, Correção 3) */
.client-date-card small,
.client-date-card strong{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.client-date-card small{
    order:2;
    color:rgba(255,255,255,.60);
    font-size:10px;
    font-weight:900;
}

.client-date-card strong{
    order:1;
    font-size:18px;
}

.client-date-card span{
    display:none;
}

.client-date-card.active{
    background:rgba(122,29,29,.20);
    border-color:rgba(122,29,29,.72);
    box-shadow:0 10px 22px rgba(0,0,0,.18), 0 0 0 3px rgba(122,29,29,.14);
    transform:scale(1.015);
    opacity:1;
}

.client-date-card.blocked{
    background:rgba(122,29,29,.22);
    border-color:rgba(122,29,29,.34);
    color:rgba(255,255,255,.48);
}

.client-date-card.past{
    background:rgba(255,255,255,.025);
    border-color:rgba(255,255,255,.08);
    color:rgba(255,255,255,.28);
}

.client-date-card.blocked,
.client-date-card.past,
.client-date-card.empty{
    opacity:.25;
    pointer-events:none;
}

.client-date-card:not(:disabled):not(.blocked):not(.past):not(.empty):hover{
    transform:translateY(-1px);
    border-color:rgba(255,255,255,.18);
    box-shadow:0 8px 18px rgba(0,0,0,.16);
}

.client-date-card:not(:disabled):not(.blocked):not(.past):not(.empty):active{
    transform:scale(.98);
}

.client-date-card.occupancy-lotado{
    cursor:not-allowed;
}

.client-date-card::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:5px;
    width:5px;
    height:5px;
    border-radius:999px;
    transform:translateX(-50%);
    opacity:0;
}

.client-date-card.occupancy-livre::after{
    background:#43c878;
    opacity:1;
}

.client-date-card.occupancy-parcial::after{
    background:#d9b84f;
    opacity:1;
}

.client-date-card.occupancy-lotado::after{
    background:#8f2f3b;
    opacity:1;
}

.client-date-card.blocked::after{
    background:#8f2f3b;
    opacity:1;
}

/* Colunas fluidas: mais espaço no modal (tablet/desktop) cabe mais horários por linha */
.client-time-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
    gap:10px;
}

.client-time-card{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:4px;
    min-height:66px;
    padding:8px 10px 8px 28px;
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.10);
    color:#fff;
    box-shadow:none;
}

.client-time-card::before{
    content:"";
    position:absolute;
    left:10px;
    top:50%;
    width:7px;
    height:7px;
    border-radius:999px;
    background:rgba(255,255,255,.28);
    transform:translateY(-50%);
}

.client-time-card.available::before{
    background:#43c878;
}

.client-time-card.limited::before{
    background:#d9b84f;
}

.client-time-card.full{
    background:rgba(255,255,255,.025);
    border-color:rgba(255,255,255,.08);
    color:rgba(255,255,255,.42);
    cursor:not-allowed;
    opacity:.56;
}

.client-time-card.full::before{
    background:#8f2f3b;
}

.client-time-card.booked{
    background:rgba(255,255,255,.025);
    border-color:rgba(255,255,255,.08);
    color:rgba(255,255,255,.34);
    cursor:not-allowed;
    opacity:.42;
}

.client-time-card.booked::before{
    background:rgba(255,255,255,.34);
}

/* SPEC_HORARIO_PASSADO_NAO_E_VAGA, Correção 1 - horário do dia corrente que
   já venceu. Mais apagado que .booked de propósito: não é uma hora disputada,
   é uma hora que não existe mais. */
.client-time-card.past{
    background:rgba(255,255,255,.02);
    border-color:rgba(255,255,255,.06);
    color:rgba(255,255,255,.28);
    cursor:not-allowed;
    opacity:.34;
}

.client-time-card.past::before{
    background:rgba(255,255,255,.20);
}

.client-time-card.past span{
    color:rgba(255,255,255,.32);
}

.client-time-card.active{
    background:rgba(122,29,29,.20);
    border-color:rgba(122,29,29,.72);
    box-shadow:0 10px 22px rgba(0,0,0,.18), 0 0 0 3px rgba(122,29,29,.14);
    transform:scale(1.012);
}

.client-time-card:not(:disabled):hover{
    transform:translateY(-1px);
    border-color:rgba(255,255,255,.18);
    background:rgba(255,255,255,.065);
    box-shadow:0 8px 18px rgba(0,0,0,.16);
}

.client-time-card:not(:disabled):active{
    transform:scale(.985);
}

.client-time-card:disabled{
    transform:none;
}

.client-time-card span{
    color:rgba(255,255,255,.58);
    font-size:12px;
    font-weight:500;
}

.client-time-card.full span,
.client-time-card.booked span{
    color:rgba(255,255,255,.40);
}

.booking-legend{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-top:14px;
}

.booking-legend span{
    display:flex;
    align-items:center;
    gap:7px;
    color:rgba(255,255,255,.58);
    font-size:11px;
}

.booking-legend i{
    width:10px;
    height:10px;
    border-radius:50%;
    background:rgba(255,255,255,.22);
}

.booking-legend .good{background:#43c878;}
.booking-legend .limited{background:#d9b84f;}
.booking-legend .full{background:#8f2f3b;}

@media(max-width:430px){
    .booking-legend{
        grid-template-columns:1fr;
    }
}

.client-about-card{
    border-radius:24px;
    padding:22px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
}

.client-about-card strong{
    color:#fff;
    font-size:18px;
}

.client-about-card p{
    margin-top:10px;
    color:rgba(255,255,255,.64);
    line-height:1.6;
}

/* SPEC_MUSICA_AMBIENTE_CLIENTE, Correção 3 - mesmo visual de card já usado
   em .client-about-card, reaproveitado pra tela de Configurações. */
.client-settings-card{
    border-radius:24px;
    padding:22px;
    background:var(--glass);
    border:1px solid rgba(255,255,255,.08);
}

.client-settings-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.client-settings-row-text strong{
    color:#fff;
    font-size:16px;
}

.client-settings-row-text p{
    margin-top:6px;
    color:rgba(255,255,255,.64);
    line-height:1.5;
    font-size:14px;
}

.settings-toggle{
    flex-shrink:0;
    width:52px;
    height:30px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.08);
    position:relative;
    cursor:pointer;
    transition:background .25s ease, border-color .25s ease;
}

.settings-toggle-thumb{
    position:absolute;
    top:3px;
    left:3px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    transition:transform .25s ease;
}

.settings-toggle[aria-checked="true"]{
    background:linear-gradient(135deg,var(--wine-3),var(--wine));
    border-color:transparent;
}

.settings-toggle[aria-checked="true"] .settings-toggle-thumb{
    transform:translateX(22px);
}

@keyframes fadeUp{
    from{opacity:0;transform:translateY(26px);}
    to{opacity:1;transform:translateY(0);}
}

@keyframes fadeIn{
    from{opacity:0;}
    to{opacity:1;}
}

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

    .admin-dashboard{
        flex-direction:column;
    }

    .admin-sidebar{
        width:100%;
        min-width:100%;
    }

    .plans{
        grid-template-columns:1fr 1fr;
    }

    .pwa-install-options{
        grid-template-columns:1fr;
    }

    .pwa-install-option{
        min-height:auto;
    }
}

@media(max-width:720px){
    .auth-wrapper{
        min-height:100dvh;
        align-items:stretch;
        padding:0;
        overflow-y:auto;
    }

    .auth-wrapper.show{
        display:block;
    }

    .auth-background{
        position:fixed;
        transform:none;
    }

    .pwa-install-card{
        border-radius:18px;
        padding:14px;
    }

    .pwa-install-header strong{
        font-size:20px;
    }

    .pwa-install-option{
        padding:14px;
    }

    .pwa-ios-modal{
        align-items:flex-end;
        padding:12px;
    }

    .pwa-ios-modal-content{
        border-radius:20px;
        padding:18px;
    }

    .auth-overlay{
        position:fixed;
        background:
            linear-gradient(rgba(5,3,3,.58), rgba(5,3,3,.94)),
            radial-gradient(circle at top, rgba(122,29,29,.36), transparent 34%);
    }

    .auth-container{
        min-height:100dvh;
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:0;
        padding:18px 16px;
    }

    .auth-brand{
        width:100%;
        min-height:auto;
        align-items:center;
        justify-content:flex-start;
        padding:0 0 18px;
        border:none;
        border-radius:0;
        background:transparent;
        box-shadow:none;
        backdrop-filter:none;
        text-align:center;
    }

    .brand-logo{
        width:122px;
        height:122px;
        margin-bottom:14px;
        border-width:2px;
        box-shadow:
            0 0 0 6px rgba(255,255,255,.045),
            0 0 42px rgba(90,21,21,.66),
            0 18px 42px rgba(0,0,0,.38);
    }

    .brand-badge{
        max-width:100%;
        padding:8px 12px;
        font-size:9px;
        letter-spacing:2px;
    }

    .auth-brand h1,
    .auth-brand p{
        display:none;
    }

    .auth-card{
        width:100%;
        max-width:430px;
        margin:0 auto;
        flex:none;
        display:flex;
        flex-direction:column;
        justify-content:center;
        padding:22px;
        border-radius:24px;
        background:rgba(9,6,5,.80);
        border-color:rgba(255,255,255,.15);
        box-shadow:
            0 22px 62px rgba(0,0,0,.56),
            inset 0 1px 0 rgba(255,255,255,.09),
            0 0 0 1px rgba(122,29,29,.20);
    }

    .auth-tabs{
        gap:6px;
        padding:5px;
        margin-bottom:20px;
        border-radius:16px;
    }

    .auth-tab{
        height:44px;
        border-radius:12px;
    }

    .auth-mini-title{
        padding:8px 11px;
        font-size:9px;
        letter-spacing:2px;
    }

    .auth-panel h2{
        font-size:28px;
        margin-top:12px;
    }

    .auth-description{
        font-size:14px;
        margin-bottom:18px;
    }

    .input-group{
        gap:6px;
        margin-bottom:12px;
    }

    .input-group label{
        font-size:12px;
    }

    .input-group input,
    .input-group select{
        height:48px;
        border-radius:15px;
        padding:0 15px;
        font-size:14px;
    }

    .password-field input{
        padding-right:52px;
    }

    .password-toggle{
        width:36px;
        height:36px;
        right:7px;
        border-radius:12px;
    }

    .auth-btn{
        min-height:50px;
        border-radius:16px;
        font-size:15px;
    }

    .auth-brand h1,
    .hero-content h1{
        font-size:42px;
    }

    .hero{
        padding:18px;
    }

    .hero-content{
        padding:20px 0 8px;
    }

    .hero-content h1{
        margin:14px 0;
        line-height:1;
    }

    .hero-content p{
        font-size:15px;
        line-height:1.55;
    }

    .pwa-install-card{
        gap:12px;
    }

    .pwa-install-options{
        grid-template-columns:1fr;
    }

    .admin-header{
        flex-wrap:wrap;
        padding:1.25rem;
    }

    .plans,
    .clients-toolbar,
    .appointment-info,
    .clean-info-grid{
        grid-template-columns:1fr;
    }

    .admin-sidebar{
        display:none;
    }

    .admin-main{
        padding-bottom:92px;
    }

    .admin-bottom-nav{
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        gap:4px;
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:40;
        padding:10px 10px calc(10px + env(safe-area-inset-bottom));
        background:rgba(10,6,6,.92);
        border-top:1px solid rgba(255,255,255,.10);
        backdrop-filter:blur(18px);
    }

    .admin-bottom-nav-link{
        flex:1;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        min-width:0;
        padding:8px 4px;
        border:none;
        border-radius:16px;
        background:transparent;
        color:rgba(255,255,255,.6);
        font-size:clamp(9px,2.2vw,10px);
        font-weight:700;
        text-align:center;
    }

    .admin-bottom-nav-link span{
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    /* Ícone pequeno: fluidez leve basta, não precisa de vw agressivo (SPEC_ADMIN_LAYOUT_FLUIDO, Correção 4) */
    .admin-bottom-nav-icon{
        width:clamp(18px,5vw,24px);
        height:clamp(18px,5vw,24px);
        fill:none;
        stroke:currentColor;
        stroke-width:2.4;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    .admin-bottom-nav-link.active{
        color:#fff;
    }

    /* Selo circular de destaque: tamanho fixo por design (não é texto nem grid de conteúdo) */
    .admin-bottom-nav-link.admin-bottom-nav-dashboard{
        flex:0 0 auto;
        width:60px;
        height:60px;
        margin-top:-22px;
        border-radius:50%;
        background:rgba(255,255,255,.06);
        border:1px solid rgba(255,255,255,.14);
        box-shadow:0 14px 30px rgba(0,0,0,.3);
        gap:2px;
    }

    .admin-bottom-nav-link.admin-bottom-nav-dashboard span{
        font-size:clamp(8px,2vw,9px);
    }

    .admin-bottom-nav-link.admin-bottom-nav-dashboard .admin-bottom-nav-icon{
        width:clamp(20px,5.5vw,26px);
        height:clamp(20px,5.5vw,26px);
    }

    .admin-bottom-nav-link.admin-bottom-nav-dashboard.active{
        background:linear-gradient(135deg,var(--wine-3),var(--wine));
        border-color:transparent;
        box-shadow:0 16px 34px rgba(90,21,21,.5);
        color:#fff;
    }

    /* SPEC_CLIENTE_PRODUTOS_E_BOTTOM_NAV, Correção 4 - mesmo padrão da barra
       inferior do admin (Sprint V), com "Agendar" sempre em destaque (não
       precisa de toggle .active, o cliente não tem conceito de página atual) */
    #systemContent{
        padding-bottom:92px;
    }

    .client-bottom-nav{
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        gap:4px;
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:40;
        padding:10px 10px calc(10px + env(safe-area-inset-bottom));
        background:rgba(10,6,6,.92);
        border-top:1px solid rgba(255,255,255,.10);
        backdrop-filter:blur(18px);
    }

    .client-bottom-nav-link{
        flex:1;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        min-width:0;
        padding:8px 4px;
        border:none;
        border-radius:16px;
        background:transparent;
        color:rgba(255,255,255,.6);
        font-size:clamp(9px,2.2vw,10px);
        font-weight:700;
        text-align:center;
    }

    .client-bottom-nav-link span{
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .client-bottom-nav-icon{
        width:clamp(18px,5vw,24px);
        height:clamp(18px,5vw,24px);
        fill:none;
        stroke:currentColor;
        stroke-width:2.4;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    .client-bottom-nav-agendar{
        flex:0 0 auto;
        width:60px;
        height:60px;
        margin-top:-22px;
        border-radius:50%;
        gap:2px;
        background:linear-gradient(135deg,var(--wine-3),var(--wine));
        border:1px solid transparent;
        box-shadow:0 16px 34px rgba(90,21,21,.5);
        color:#fff;
    }

    .client-bottom-nav-agendar span{
        font-size:clamp(8px,2vw,9px);
    }

    .client-bottom-nav-agendar .client-bottom-nav-icon{
        width:clamp(20px,5.5vw,26px);
        height:clamp(20px,5.5vw,26px);
    }

    .schedule-clean-top{
        flex-direction:column;
    }

    .schedule-view-tabs{
        width:100%;
    }

    .schedule-view-btn{
        flex:1;
    }

    .schedule-clean-list{
        grid-template-columns:1fr;
    }

    /* Bug de overflow (selo de status cortado no card compacto do admin) -
       o cartão original tem só 2 blocos (data/horário + status), que cabem
       numa linha; a variante admin (Correção 3) soma um 3º bloco (cliente),
       apertado demais em telas pequenas. flex-wrap (regra base) já evita o
       corte, mas aqui o bloco do cliente vira linha inteira própria - layout
       previsível de 2 linhas em vez de deixar o navegador decidir onde
       quebrar no meio dos 3 blocos. */
    .appointment-card-compact--admin .appointment-card-compact-cliente{
        flex-basis:100%;
    }

    .booking-premium-card,
    .booking-mobile-card{
        padding:18px;
        border-radius:24px;
        gap:16px;
    }

    .booking-step-header h3{
        font-size:20px;
    }

    .booking-summary-list,
    .booking-step-actions{
        grid-template-columns:1fr;
    }

    .booking-back-btn,
    .booking-confirm-btn{
        min-height:52px;
    }

    .booking-entry-card{
        flex-direction:column;
        align-items:stretch;
    }

    .booking-entry-btn{
        width:100%;
    }

    .booking-flow-panel{
        width:100%;
        padding:
            calc(12px + env(safe-area-inset-top))
            12px
            calc(12px + env(safe-area-inset-bottom));
        gap:10px;
    }

    .booking-flow-header{
        grid-template-columns:64px minmax(0,1fr) 44px;
    }

    .booking-flow-header h2{
        font-size:17px;
    }

    .booking-flow-header span{
        font-size:11px;
    }

    .booking-flow-icon-btn{
        min-height:40px;
        padding:0 8px;
    }

    .client-date-grid{
        gap:5px;
    }

    .client-date-card{
        padding:6px 3px 10px;
    }
}

@media(max-width:430px){
    .booking-flow-panel{
        padding:
            calc(10px + env(safe-area-inset-top))
            10px
            calc(10px + env(safe-area-inset-bottom));
    }

    .booking-flow-header{
        grid-template-columns:58px minmax(0,1fr) 40px;
        gap:7px;
    }

    .booking-flow-icon-btn{
        min-height:38px;
        border-radius:12px;
        font-size:11px;
    }

    .booking-flow .booking-step-header h3{
        font-size:18px;
    }

    .booking-service-card,
    .booking-choice-card{
        min-height:72px;
        border-radius:16px;
        padding:12px;
    }

    /* Mesmo pedido do Product Owner (celular real) - card do barbeiro maior
       que o de serviço nesta faixa também, sobrescrevendo só min-height/
       padding da regra compartilhada acima. */
    .booking-choice-card{
        min-height:88px;
        padding:14px;
    }

    .booking-service-card strong,
    .booking-choice-card strong{
        font-size:15px;
    }

    .booking-service-card p{
        font-size:12px;
    }

    .booking-choice-avatar{
        width:46px;
        height:46px;
        font-size:15px;
    }

    .booking-flow.confirming .booking-confirm-panel h3{
        font-size:18px;
    }

    .booking-flow.confirming .booking-confirm-panel p{
        font-size:12px;
    }

    .booking-flow.confirming .booking-step-actions{
        grid-template-columns:.82fr 1.18fr;
        gap:8px;
    }

    .booking-flow.confirming .booking-back-btn,
    .booking-flow.confirming .booking-confirm-btn{
        min-height:50px;
        border-radius:15px;
        font-size:13px;
    }

    .booking-success-screen{
        padding:18px;
    }
}

@media(max-width:360px){
    .booking-flow-panel{
        padding:
            calc(8px + env(safe-area-inset-top))
            8px
            calc(8px + env(safe-area-inset-bottom));
        gap:8px;
    }

    .booking-flow-header{
        grid-template-columns:52px minmax(0,1fr) 38px;
    }

    .booking-flow-header h2{
        font-size:16px;
    }

    .booking-flow-icon-btn{
        min-height:36px;
        padding:0 6px;
    }

    .booking-flow.confirming .booking-summary-list{
        gap:6px;
    }

    .booking-flow.confirming .booking-summary-list div{
        padding:8px;
    }

    .booking-flow.confirming .booking-summary-list button{
        margin-top:5px;
    }
}

/* ESCONDER SELECTS ANTIGOS DE DATA E HORÁRIO */

#clientAppointmentDate,
#clientAppointmentTime,
#clientAppointmentService,
#clientAppointmentBarber,
#clientAppointmentBarberId{
    display:none !important;
}