/* =====================================================================
   Sistema de Filas - Aribé/Itabaiana Motos (Honda)
   Paleta e tipografia com identidade própria - ver notas de design.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600;700&display=swap');

:root {
    --honda-red:      #E4002B;
    --honda-red-dark: #b40021;
    --asfalto:        #14171a;
    --asfalto-claro:  #1f242b;
    --asfalto-borda:  #2c333c;
    --creme:          #f6f4f1;
    --tinta:          #1a1a1a;
    --aco:            #3d4652;
    --ambar:          #ffb020;
    --sucesso:        #2f9e44;
    --erro:           #c62828;
    --muted:          #7b8794;
    --muted-claro:    #9aa5b1;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Barlow', Arial, sans-serif;
    color: var(--tinta);
    background: var(--creme);
}

h1, h2, .fonte-display {
    font-family: 'Barlow Condensed', 'Barlow', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

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

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

@keyframes destaqueNumero {
    0%   { opacity: 0; transform: scale(0.92); }
    60%  { opacity: 1; transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}

/* ---------- Cabeçalho com logos (compartilhado) ---------- */
.cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 40px;
    position: relative;
    overflow: hidden;
    animation: surgir 0.6s ease both;
}

.cabecalho::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    background: url('assets/speed-stripes.svg') no-repeat right center;
    background-size: 160px auto;
    opacity: 0.16;
    pointer-events: none;
}

.cabecalho img { display: block; }
.logo-loja { height: 42px; width: auto; }
.logo-honda { height: 40px; width: auto; }

.cabecalho-claro { background: #fff; border-bottom: 1px solid #e7e3dd; }
.cabecalho-escuro {
    background: var(--asfalto-claro);
    border-bottom: 1px solid var(--asfalto-borda);
}

/* ---------- Tablet: gerar senha ---------- */
.tela-tablet {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.tablet-corpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 44px;
    padding: 20px;
    text-align: center;
    animation: entrada 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.tablet-corpo h1 {
    font-size: 2.6rem;
    margin: 0;
    color: var(--tinta);
}
.tablet-intro {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tablet-corpo .subtitulo {
    font-family: 'Barlow', sans-serif;
    font-weight: 500;
    color: var(--muted);
    font-size: 1.15rem;
    margin: 0;
}

.botoes-senha {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-senha {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    padding: 46px 56px;
    border: none;
    border-radius: 18px;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.16);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    min-width: 260px;
}
.btn-senha:hover  { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.2); }
.btn-senha:active { transform: translateY(0) scale(0.97); }

.btn-normal        { background: var(--aco); }
.btn-preferencial  { background: var(--honda-red); }

.resultado-senha {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ticket {
    background: #fff;
    border: 1px solid #e7e3dd;
    border-left: 6px solid var(--honda-red);
    border-radius: 14px;
    padding: 18px 34px;
    font-size: 2.2rem;
    font-weight: 700;
    font-family: 'Barlow Condensed', sans-serif;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    animation: destaqueNumero 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ticket.preferencial { border-left-color: var(--honda-red); }
.ticket.normal { border-left-color: var(--aco); }
.ticket .rotulo-ticket {
    font-family: 'Barlow', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--muted);
    display: block;
}
.mensagem-erro-tablet {
    color: var(--erro);
    font-family: 'Barlow', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
}

.tablet-rodape {
    text-align: center;
    padding: 14px;
    font-size: 0.85rem;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.status-impressora {
    font-size: 0.78rem;
    color: var(--muted);
}

.link-config-impressora {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.75rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px;
}

/* ---------- Painel / TV ---------- */
.tela-painel {
    min-height: 100vh;
    background: var(--asfalto);
    color: #fff;
    display: flex;
    flex-direction: column;
}

.painel-corpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 30px 40px;
    animation: entrada 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.painel-atual {
    text-align: center;
    padding: 36px;
    background: var(--asfalto-claro);
    border: 1px solid var(--asfalto-borda);
    border-radius: 20px;
    margin-bottom: 28px;
    position: relative;
}

.painel-atual .rotulo {
    font-family: 'Barlow', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--muted-claro);
}
.painel-atual .numero {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 7rem;
    font-weight: 800;
    line-height: 1.05;
    animation: destaqueNumero 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.painel-atual .guiche {
    font-family: 'Barlow', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ambar);
}
.tipo-preferencial { color: var(--honda-red); }
.tipo-normal { color: #64b5f6; }

.painel-colunas {
    display: flex;
    gap: 26px;
    flex: 1;
}

.painel-coluna {
    flex: 1;
    background: var(--asfalto-claro);
    border: 1px solid var(--asfalto-borda);
    border-radius: 20px;
    padding: 22px 30px;
}

.painel-coluna h2 {
    font-size: 1.4rem;
    color: var(--muted-claro);
    margin-top: 0;
    font-weight: 600;
}

.lista-senhas { list-style: none; margin: 0; padding: 0; }
.lista-senhas li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    padding: 11px 0;
    border-bottom: 1px solid var(--asfalto-borda);
}
.lista-senhas li:last-child { border-bottom: none; }
.lista-senhas .tag {
    font-family: 'Barlow', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
}
.tag-preferencial { background: var(--honda-red); color: #fff; }
.tag-normal { background: #2b4a68; color: #cfe6ff; }

.painel-vazio {
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
}

.aviso-som {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ambar);
    color: #14171a;
    border: none;
    border-radius: 30px;
    padding: 14px 26px;
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
    animation: surgir 0.3s ease both;
    z-index: 10;
}

/* ---------- Recepcionista / Login ---------- */
.tela-recepcionista {
    min-height: 100vh;
    background: var(--creme);
    display: flex;
    flex-direction: column;
}

.recepcao-corpo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.cartao-recepcao {
    max-width: 460px;
    width: 100%;
    background: #fff;
    padding: 44px 40px;
    border-radius: 20px;
    box-shadow: 0 10px 34px rgba(20,23,26,0.08);
    text-align: center;
    animation: entrada 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

.cartao-recepcao h1 { font-size: 2rem; margin: 0 0 8px; }
.cartao-recepcao .subtitulo {
    font-family: 'Barlow', sans-serif;
    color: var(--muted);
    font-size: 1rem;
    margin-bottom: 26px;
}

.tela-recepcionista input[type="text"],
.tela-recepcionista input[type="password"] {
    width: 100%;
    padding: 14px 16px;
    font-family: 'Barlow', sans-serif;
    font-size: 1.15rem;
    border: 1.5px solid #ddd6cc;
    border-radius: 12px;
    margin: 0 0 20px;
    transition: border-color 0.15s ease;
}
.tela-recepcionista input:focus {
    outline: none;
    border-color: var(--honda-red);
}

.btn-primario {
    background: var(--honda-red);
    color: #fff;
    border: none;
    padding: 16px 30px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    width: 100%;
    transition: background 0.15s ease, transform 0.1s ease;
}
.btn-primario:hover:not(:disabled) { background: var(--honda-red-dark); }
.btn-primario:active:not(:disabled) { transform: scale(0.98); }
.btn-primario:disabled { background: #c9ccd1; cursor: not-allowed; }

.mensagem {
    margin-top: 20px;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    min-height: 24px;
}
.mensagem.visivel { animation: surgir 0.25s ease both; }
.mensagem.sucesso { color: var(--sucesso); }
.mensagem.erro { color: var(--erro); }

.fila-info {
    color: var(--muted);
    margin-bottom: 22px;
    font-family: 'Barlow', sans-serif;
    font-weight: 500;
    font-size: 1rem;
}

.link-sair {
    display: inline-block;
    margin-top: 22px;
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: underline;
}

/* ---------- Responsivo ---------- */
@media (max-width: 720px) {
    .cabecalho { padding: 16px 20px; }
    .logo-loja { height: 32px; }
    .logo-honda { height: 30px; }
    .botoes-senha { gap: 18px; }
    .btn-senha { padding: 34px 30px; font-size: 1.4rem; min-width: 200px; }
    .painel-atual .numero { font-size: 4.2rem; }
    .painel-colunas { flex-direction: column; }
}