/* ============================================================
   SISBARBE — SISTEMA DE DESIGN
   ------------------------------------------------------------
   Identidade: alfaiataria digital. Tinta profunda + latão
   envelhecido, tipografia editorial no letreiro (masthead) e
   uma grotesca limpa nos dados. Pensado para barbearias de
   padrão alto que querem um sistema de gestão à altura da loja.

   Este arquivo é a ÚNICA fonte de estilo visual do sistema.
   Cada página deve importar este arquivo e, no máximo, adicionar
   pequenos ajustes pontuais — nunca recriar tokens do zero.
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,900&family=Manrope:wght@500;600;700;800&display=swap');

:root{
    /* ---- Superfícies (tinta = cor primária do cliente) ---- */
    --tinta:        #0d0f14;   /* preto quente, base do chrome */
    --tinta-alta:    #171a22;  /* painéis escuros elevados */
    --tinta-linha:   #262a35;  /* bordas sobre tinta */
    --papel:         #1a1c22;  /* grafite fosco, fundo geral (mais leve que preto puro) */
    --papel-cartao:  #22242b;  /* cartões de conteúdo, um tom acima do fundo */
    --papel-linha:   #34373f;  /* bordas sobre os cartões */

    /* ---- Acento (latão = cor secundária do cliente) ---- */
    --latao:         #29b6f6;
    --latao-claro:   #58c6f8;
    --latao-escuro:  #208ec0;
    --latao-fundo:   rgba(41,182,246,.10);

    /* ---- Semânticas (tingidas para a paleta, ajustadas para contraste sobre fundo escuro) ---- */
    --pinho:         #3fae7f;   /* sucesso */
    --pinho-fundo:   rgba(63,174,127,.10);
    --vinho:         #d16a5c;   /* alerta / perigo */
    --vinho-fundo:   rgba(209,106,92,.10);
    --ambar:         #dba24a;  /* atenção */
    --ambar-fundo:   rgba(219,162,74,.10);
    --azul-info:     #6ba3dd;
    --azul-fundo:    rgba(107,163,221,.10);

    /* ---- Texto ---- */
    --texto-forte:   #f3f0ea;
    --texto:         #c6c9d1;
    --texto-suave:   #90939d;
    --texto-invertido: #f4f1ea;

    /* ---- Forma ---- */
    --raio:      14px;
    --raio-lg:   20px;
    --raio-sm:   9px;
    --sombra:    0 1px 2px rgba(0,0,0,.25), 0 10px 30px -8px rgba(0,0,0,.45);
    --sombra-lg: 0 20px 60px -12px rgba(0,0,0,.6);

    /* ---- Tipografia ---- */
    --fonte-editorial: 'Fraunces', Georgia, serif;
    --fonte-base: 'Manrope', 'Segoe UI', Arial, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
    font-family:var(--fonte-base);
    background:
        radial-gradient(circle at 100% 0%, rgba(41,182,246,.05), transparent 40%),
        var(--papel);
    background-attachment:fixed;
    color:var(--texto);
    -webkit-font-smoothing:antialiased;
}

/* Textura muito sutil de linho/grão sobre superfícies de tinta */
.textura-tinta{
    background-image:
        radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:3px 3px;
}

/* ============================================================
   MASTHEAD — cabeçalho de identidade (letreiro da barbearia)
============================================================ */
.masthead{
    background:
        radial-gradient(circle at 50% 0%, rgba(41,182,246,.10), transparent 55%),
        repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0px, rgba(255,255,255,.018) 1px, transparent 1px, transparent 3px),
        var(--tinta);
    padding:22px 20px 20px;
    text-align:center;
    position:relative;
    box-shadow: inset 0 -1px 0 rgba(41,182,246,.15);
}

.masthead::after{
    content:"";
    display:block;
    width:56px;
    height:7px;
    margin:14px auto 0;
    border-radius:4px;
    background:repeating-linear-gradient(
        45deg,
        var(--latao) 0px, var(--latao) 5px,
        var(--texto-invertido) 5px, var(--texto-invertido) 10px,
        #7a2331 10px, #7a2331 15px
    );
    box-shadow:0 2px 8px rgba(0,0,0,.35);
}

.masthead .logo{
    height:84px;
    width:auto;
    max-width:280px;
    object-fit:contain;
    margin-bottom:12px;
    filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));
}

.masthead .nome{
    font-family:var(--fonte-editorial);
    font-weight:700;
    font-size:22px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--texto-invertido);
}

.masthead .subtitulo{
    margin-top:4px;
    font-size:11px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--latao-claro);
    font-weight:600;
}

/* ============================================================
   NAVEGAÇÃO
============================================================ */
.nav-topo{
    display:flex;
    align-items:center;
    gap:4px;
    padding:10px 24px;
    background:
        repeating-linear-gradient(115deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, transparent 1px, transparent 3px),
        var(--tinta-alta);
    border-bottom:1px solid var(--tinta-linha);
    box-shadow:0 1px 0 rgba(41,182,246,.08);
    width:100%;
    box-sizing:border-box;
    position:sticky;
    top:0;
    z-index:500;
}

.nav-item{
    position:relative;
    color:rgba(244,241,234,.75);
    text-decoration:none;
    font-weight:600;
    font-size:13px;
    padding:9px 14px;
    border-radius:var(--raio-sm);
    transition:.15s;
    white-space:nowrap;
    letter-spacing:.2px;
}

.nav-item:hover{
    background:rgba(41,182,246,.14);
    color:var(--latao-claro);
}

.nav-item.ativo{
    background:rgba(41,182,246,.16);
    color:var(--latao-claro);
}

.nav-item.ativo::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:2px;
    height:2px;
    border-radius:2px;
    background:var(--latao);
}

.nav-item.sair{
    margin-left:auto;
    background:var(--vinho);
    color:#fff;
}
.nav-item.sair:hover{ background:#5e1a25; color:#fff; }

/* ============================================================
   CARTÕES
============================================================ */
.cartao{
    background:var(--papel-cartao);
    border-radius:var(--raio-lg);
    box-shadow:var(--sombra);
    padding:26px;
    margin-bottom:22px;
    border:1px solid var(--papel-linha);
}

.cartao > h2, .cartao > h3{
    font-family:var(--fonte-editorial);
    font-weight:700;
    font-size:19px;
    color:var(--texto-forte);
    margin-bottom:18px;
    letter-spacing:.2px;
    display:flex;
    align-items:center;
    gap:10px;
}

.cartao-titulo-eyebrow{
    display:block;
    font-family:var(--fonte-base);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--latao-escuro);
    margin-bottom:4px;
}

/* ============================================================
   BOTÕES
============================================================ */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:11px 18px;
    border-radius:var(--raio-sm);
    border:none;
    font-family:var(--fonte-base);
    font-weight:700;
    font-size:13.5px;
    cursor:pointer;
    transition:.15s;
    text-decoration:none;
    letter-spacing:.1px;
    position:relative;
}
.btn:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.btn:active{ transform:translateY(1px); filter:brightness(.95); }
.btn-largo{ width:100%; }

.btn-tinta{ background:var(--tinta-alta); color:var(--texto-invertido); border:1px solid var(--tinta-linha); }
.btn-latao{ background:var(--latao); color:#1a1408; }
.btn-pinho{ background:var(--pinho); color:#08150f; }
.btn-vinho{ background:var(--vinho); color:#1c0906; }
.btn-azul{ background:var(--azul-info); color:#071726; }
.btn-ambar{ background:var(--ambar); color:#1c1206; }
.btn-fantasma{ background:transparent; color:var(--texto); border:1.5px solid var(--papel-linha); }
.btn-fantasma:hover{ background:var(--papel-linha); }

/* ============================================================
   FORMULÁRIOS
============================================================ */
label{
    display:block;
    font-size:12px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:var(--texto-suave);
    margin-bottom:5px;
}

input[type=text], input[type=number], input[type=time],
input[type=password], input[type=date], input[type=tel],
select, textarea{
    width:100%;
    padding:10px 12px;
    border-radius:var(--raio-sm);
    border:1.5px solid var(--papel-linha);
    background:var(--papel);
    font-family:var(--fonte-base);
    font-size:13.5px;
    color:var(--texto-forte);
}
input:focus, select:focus, textarea:focus{
    outline:none;
    border-color:var(--latao);
    box-shadow:0 0 0 3px rgba(41,182,246,.18);
    background:var(--papel-cartao);
}

/* O campo de data no iOS às vezes ignora a largura do elemento pai
   e estoura a margem da tela — essa trava garante que nunca passe. */
input[type=date]{
    max-width:100%;
    min-width:0;
    -webkit-appearance:none;
    appearance:none;
}

/* ============================================================
   TABELAS
============================================================ */
.tabela-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:var(--raio);
    border:1px solid var(--papel-linha);
}

table{
    width:100%;
    min-width:720px;
    border-collapse:collapse;
    font-size:13.5px;
}

thead tr{ background:var(--tinta); }

th{
    color:var(--texto-invertido);
    padding:13px 14px;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    text-align:left;
    white-space:nowrap;
}

td{
    padding:14px;
    border-bottom:1px solid var(--papel-linha);
    vertical-align:middle;
    color:var(--texto-forte);
}

tbody tr{ background:var(--papel-cartao); transition:.15s; }
tbody tr:nth-child(even){ background:var(--papel); }
tbody tr:hover{ background:var(--latao-fundo) !important; }

.linha-vazia{
    text-align:center;
    padding:34px 0;
    color:var(--texto-suave);
    font-size:14px;
}

/* Medalhão numerado — assento na coluna de posição da fila */
.medalhao{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--tinta);
    color:var(--latao-claro);
    font-weight:800;
    font-size:13px;
    border:2px solid var(--latao);
}

/* ============================================================
   BADGES / STATUS
============================================================ */
.badge{
    display:inline-block;
    padding:4px 11px;
    border-radius:20px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.2px;
}
.badge-pinho{ background:var(--pinho-fundo); color:var(--pinho); }
.badge-vinho{ background:var(--vinho-fundo); color:var(--vinho); }
.badge-ambar{ background:var(--ambar-fundo); color:var(--ambar); }
.badge-azul{ background:var(--azul-fundo); color:var(--azul-info); }
.badge-neutro{ background:var(--papel-linha); color:var(--texto); }

/* ============================================================
   RESPONSIVO — BASE
============================================================ */
@media(max-width:768px){
    .nav-topo{ flex-wrap:wrap; justify-content:center; gap:4px; padding:10px; position:relative; }
    .cartao{ padding:18px; border-radius:16px; }
    table{ font-size:12.5px; min-width:640px; }
    th, td{ padding:10px 8px; }
    .masthead .nome{ font-size:18px; letter-spacing:1px; }

    /* Campos de formulário com pelo menos 16px no celular — abaixo
       disso, iOS e alguns Android dão zoom automático ao focar. */
    input, select, textarea{ font-size:16px !important; }
}

/* ============================================================
   TOPO DE MÓDULO — substitui o antigo menu de abas.
   Cada página de módulo mostra só um botão de voltar ao Início,
   o título da própria página e o usuário logado.
============================================================ */
.topo-app{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 22px;
    background:var(--tinta-alta);
    border-bottom:1px solid var(--tinta-linha);
    position:sticky;
    top:0;
    z-index:500;
}
.topo-app-esq{ display:flex; align-items:center; gap:14px; min-width:0; }
.topo-relogio{
    display:flex; align-items:center; gap:6px;
    color:var(--latao-claro); font-size:13px; font-weight:700;
    font-variant-numeric:tabular-nums; letter-spacing:.5px;
    flex:none; padding:0 8px;
}
.topo-relogio svg{ width:15px; height:15px; flex:none; }
.btn-voltar{
    display:flex;
    align-items:center;
    gap:6px;
    flex:none;
    padding:8px 14px 8px 10px;
    border-radius:20px;
    background:rgba(255,255,255,.06);
    border:1px solid var(--tinta-linha);
    color:var(--texto-invertido);
    text-decoration:none;
    font-weight:600;
    font-size:13px;
    transition:.15s;
}
.btn-voltar:hover{ background:rgba(41,182,246,.16); border-color:var(--latao); color:var(--latao-claro); }
.btn-voltar svg{ width:16px; height:16px; color:var(--latao-claro); flex:none; }
.topo-titulo{ min-width:0; }
.topo-titulo h1{
    font-family:var(--fonte-editorial);
    font-size:19px;
    font-weight:700;
    color:var(--texto-invertido);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.topo-desc{
    font-size:12px;
    color:rgba(244,241,234,.55);
    margin-top:1px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.topo-usuario{ display:flex; align-items:center; gap:10px; flex:none; }
.topo-avatar{
    width:30px; height:30px; border-radius:50%;
    background:var(--latao); color:var(--tinta);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:12px; flex:none;
}
.topo-usuario span{ font-size:13px; color:var(--texto-invertido); font-weight:600; white-space:nowrap; }
.topo-sair{
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:50%;
    color:rgba(244,241,234,.55); text-decoration:none;
}
.topo-sair:hover{ background:rgba(122,35,49,.25); color:#f2b9c0; }
.topo-sair svg{ width:17px; height:17px; }

@media(max-width:640px){
    .topo-app{ padding:12px 14px; }
    .topo-titulo h1{ font-size:16px; }
    .topo-usuario span{ display:none; }
    .btn-voltar span{ display:none; }
    .btn-voltar{ padding:9px; }
    .topo-relogio{ font-size:11.5px; padding:0 4px; gap:4px; }
    .topo-relogio svg{ width:13px; height:13px; }
}

/* ============================================================
   INÍCIO — grade de módulos (cartões coloridos)
============================================================ */
.saudacao{ padding:22px 22px 4px; max-width:1180px; margin:0 auto; }
.saudacao h1{ font-family:var(--fonte-editorial); font-size:23px; color:var(--texto-forte); }
.saudacao p{ font-size:13.5px; color:var(--texto-suave); margin-top:2px; }

.hub-wrap{ max-width:1180px; margin:0 auto; padding:14px 22px 50px; }

.aviso-topo-home{
    background:var(--vinho-fundo); color:var(--vinho);
    border:1px solid rgba(209,106,92,.3);
    padding:12px 18px; border-radius:var(--raio-sm);
    font-size:13px; font-weight:600; margin-bottom:4px;
}
.aviso-topo-home a{ color:inherit; text-decoration:underline; font-weight:700; }

.hub-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}
@media(max-width:980px){ .hub-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:680px){ .hub-grid{ grid-template-columns:repeat(2,1fr); } }

.hub-tile{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:150px;
    padding:18px;
    border-radius:16px;
    color:#fff;
    text-decoration:none;
    overflow:hidden;
    box-shadow:0 10px 24px -14px rgba(13,15,20,.5);
    transition:transform .15s ease, box-shadow .15s ease;
}
.hub-tile:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -14px rgba(13,15,20,.55); }
.hub-tile:active{ transform:translateY(-1px) scale(.99); }
.hub-tile .hub-icone{ width:30px; height:30px; opacity:.95; }
.hub-tile .hub-icone svg{ width:100%; height:100%; }
.hub-tile .hub-contagem{
    position:absolute; top:12px; right:12px;
    background:rgba(0,0,0,.32);
    color:#fff; font-size:12px; font-weight:700;
    min-width:26px; height:24px; padding:0 8px;
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    white-space:nowrap;
}
.hub-tile .hub-rotulo{
    font-family:var(--fonte-base);
    font-weight:800;
    font-size:13px;
    letter-spacing:.4px;
    text-transform:uppercase;
}

/* Cada módulo tem uma cor própria, tingida a partir da mesma paleta do sistema */
.hub-fila{        background:linear-gradient(155deg,#1a8f8a,#0d635f); }
.hub-clientes{    background:linear-gradient(155deg,#3f83c9,#245685); }
.hub-financeiro{  background:linear-gradient(155deg,var(--latao-claro),var(--latao-escuro)); }
.hub-produtos{    background:linear-gradient(155deg,#8064c9,#54389f); }
.hub-cadastro{    background:linear-gradient(155deg,#4c9a67,#2f6f45); }
.hub-usuarios{    background:linear-gradient(155deg,#6b7482,#454c58); }
.hub-avisos{      background:linear-gradient(155deg,#d1487e,#8f2f52); }
.hub-tv{          background:linear-gradient(155deg,#c9793f,#985320); }
.hub-perfil{      background:linear-gradient(155deg,#6b7482,#454c58); }
.hub-controle{    background:linear-gradient(155deg,#4a5a8c,#2d3960); }
.hub-permissoes{  background:linear-gradient(155deg,#8064c9,#4f3c8f); }
.hub-relatorio-fin{    background:linear-gradient(155deg,#2596a3,#155e68); }
.hub-relatorio-atend{  background:linear-gradient(155deg,#c9527a,#8f2f52); }
.hub-mov-cliente{      background:linear-gradient(155deg,#d98a3f,#95511c); }

.hub-secundarios{
    display:flex; gap:10px; flex-wrap:wrap; margin-top:26px;
}
.hub-secundarios a{
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 16px; border-radius:20px;
    border:1.5px solid var(--papel-linha);
    color:var(--texto); text-decoration:none;
    font-size:13px; font-weight:600;
    background:var(--papel-cartao);
}
.hub-secundarios a:hover{ border-color:var(--latao); color:var(--latao-escuro); }
.hub-secundarios svg{ width:15px; height:15px; }