/* =========================================================

RESET

========================================================= */

*{

margin: 0;

padding: 0;

box-sizing: border-box;


}

/* =========================================================

BODY

========================================================= */

body {

font-family: Arial, Helvetica, sans-serif;

min-height: 100vh;



background:

    linear-gradient(

        135deg,

        #24211e,

        #3b2c22

    );



color: #29251f;



display: flex;

align-items: center;

justify-content: center;



padding: 25px;

}

/* =========================================================

ELEMENTOS DECORATIVOS DO FUNDO

========================================================= */

body::before {

content: "";



position: fixed;



width: 450px;

height: 450px;



border-radius: 50%;



background: rgba(

    208,

    113,

    42,

    0.08

);



top: -180px;

left: -150px;



filter: blur(10px);

}

body::after {

content: "";



position: fixed;



width: 400px;

height: 400px;



border-radius: 50%;



background: rgba(

    208,

    113,

    42,

    0.07

);



bottom: -180px;

right: -120px;



filter: blur(10px);

}

/* =========================================================

CONTAINER DO LOGIN

========================================================= */

.login-container {

width: 100%;

max-width: 1050px;



min-height: 620px;



display: grid;



grid-template-columns: 1fr 1fr;



background: #f8f3eb;



border-radius: 24px;



overflow: hidden;



box-shadow:

    0 30px 80px

    rgba(0, 0, 0, 0.40);



position: relative;



z-index: 2;

}

/* =========================================================

CONTAINER DO CADASTRO

========================================================= */

.cadastro-container {

width: 100%;

max-width: 1050px;



margin: auto;



background: #f8f3eb;



border-radius: 24px;



overflow: hidden;



display: grid;



grid-template-columns:

    0.75fr

    1.25fr;



box-shadow:

    0 30px 80px

    rgba(0, 0, 0, 0.40);



position: relative;



z-index: 2;

}

/* =========================================================

PAINEL ESQUERDO

USADO NAS DUAS PÁGINAS

========================================================= */

.login-info,

.painel-info {

position: relative;



padding: 60px;



display: flex;



flex-direction: column;



justify-content: space-between;



color: #ffffff;



background:

    linear-gradient(

        145deg,

        #24211e,

        #3b2c22

    );



overflow: hidden;

}

.login-info::after,

.painel-info::after {

content: "";



position: absolute;



width: 320px;

height: 320px;



border-radius: 50%;



background:

    rgba(

        208,

        113,

        42,

        0.10

    );



right: -150px;

bottom: -130px;

}

/* =========================================================

LOGO

========================================================= */

.logo {

display: flex;



align-items: center;



gap: 12px;



font-size: 23px;



font-weight: 700;

}

.logo-icon {

width: 46px;

height: 46px;



border-radius: 13px;



display: flex;



align-items: center;



justify-content: center;



background: #d0712a;



font-size: 22px;



box-shadow:

    0 8px 20px

    rgba(

        208,

        113,

        42,

        0.25

    );

}

/* =========================================================

TEXTOS DO PAINEL

========================================================= */

.info-content,

.painel-texto {

max-width: 420px;

}

.info-content h1,

.painel-texto h1 {

font-size: 42px;



line-height: 1.1;



margin-bottom: 22px;



letter-spacing: -1px;

}

.painel-texto h1 {

font-size: 38px;

}

.info-content h1 span,

.painel-texto h1 span {

color: #e38a47;

}

.info-content p,

.painel-texto p {

color: #d5cec6;



font-size: 16px;



line-height: 1.7;

}

.painel-texto p {

font-size: 15px;

}

/* =========================================================

BENEFÍCIOS / FEATURES

========================================================= */

.features,

.beneficios {

display: flex;



flex-direction: column;



gap: 12px;



margin-top: 35px;

}

.beneficios {

margin-top: 30px;



gap: 14px;

}

.feature,

.beneficio {

display: flex;



align-items: center;



gap: 10px;



color: #e4ddd6;



font-size: 14px;

}

.feature span,

.beneficio-icon {

width: 25px;

height: 25px;



border-radius: 50%;



display: flex;



align-items: center;



justify-content: center;



background:

    rgba(

        208,

        113,

        42,

        0.18

    );



color: #e38a47;



font-size: 12px;

}

/* =========================================================

RODAPÉ DO PAINEL

========================================================= */

.info-footer,

.painel-footer {

font-size: 13px;



color: #9f958c;

}

/* =========================================================

ÁREA DO LOGIN

========================================================= */

.login-form-area {

padding: 60px;



display: flex;



align-items: center;



justify-content: center;



background: #f8f3eb;

}

.login-form {

width: 100%;



max-width: 390px;

}

/* =========================================================

ÁREA DO CADASTRO

========================================================= */

.form-area {

padding: 55px 60px;



background: #f8f3eb;

}

/* =========================================================

CABEÇALHOS

========================================================= */

.form-header {

margin-bottom: 35px;

}

.form-area .form-header {

margin-bottom: 30px;

}

.form-header h2 {

font-size: 30px;



color: #29251f;



margin-bottom: 9px;

}

.form-header p {

color: #7d746b;



font-size: 14px;

}

/* =========================================================

GRUPOS DO LOGIN

========================================================= */

.input-group {

margin-bottom: 20px;

}

.input-group label {

display: block;



margin-bottom: 8px;



font-size: 14px;



font-weight: 600;



color: #443d36;

}

/* =========================================================

INPUT DO LOGIN

========================================================= */

.input-wrapper {

position: relative;

}

.input-wrapper .icon {

position: absolute;



left: 16px;



top: 50%;



transform:

    translateY(-50%);



color: #9b9187;



font-size: 16px;

}

.input-wrapper input {

width: 100%;



height: 52px;



border: 1px solid #ded5ca;



border-radius: 12px;



background: #fffdf9;



padding:

    0 16px 0 46px;



outline: none;



font-size: 15px;



color: #29251f;



transition: 0.2s;

}

/* =========================================================

INPUTS DO CADASTRO

========================================================= */

.campo {

display: flex;



flex-direction: column;

}

.campo label {

margin-bottom: 7px;



font-size: 13px;



font-weight: 600;



color: #443d36;

}

.campo input,

.campo select {

width: 100%;



height: 48px;



border: 1px solid #ded5ca;



border-radius: 10px;



background: #fffdf9;



padding: 0 14px;



outline: none;



font-size: 14px;



color: #29251f;



transition: 0.2s;

}

/* =========================================================

FOCO DOS CAMPOS

========================================================= */

.input-wrapper input:focus,

.campo input:focus,

.campo select:focus {

border-color: #d0712a;



box-shadow:

    0 0 0 4px

    rgba(

        208,

        113,

        42,

        0.10

    );

}

/* =========================================================

OPÇÕES DO LOGIN

========================================================= */

.form-options {

display: flex;



align-items: center;



justify-content: space-between;



margin:

    4px 0 26px;



font-size: 13px;

}

.remember {

display: flex;



align-items: center;



gap: 8px;



color: #70675e;

}

.remember input,

.termos input {

accent-color: #d0712a;

}

.forgot-password {

color: #c46122;



text-decoration: none;



font-weight: 600;

}

.forgot-password:hover {

text-decoration: underline;

}

/* =========================================================

SEÇÕES DO CADASTRO

========================================================= */

.section-title {

display: flex;



align-items: center;



gap: 10px;



margin:

    25px 0 17px;

}

.section-title:first-of-type {

margin-top: 0;

}

.section-number {

width: 27px;

height: 27px;



border-radius: 50%;



background: #d0712a;



color: white;



display: flex;



align-items: center;



justify-content: center;



font-size: 12px;



font-weight: bold;

}

.section-title h3 {

font-size: 15px;



color: #443d36;

}

/* =========================================================

GRID DO CADASTRO

========================================================= */

.form-grid {

display: grid;



grid-template-columns:

    1fr

    1fr;



gap: 17px;

}

.campo-completo {

grid-column:

    1 / -1;

}

/* =========================================================

INFORMAÇÃO DA SENHA

========================================================= */

.senha-info {

font-size: 11px;



color: #8c837a;



margin-top: 6px;

}

/* =========================================================

TERMOS

========================================================= */

.termos {

display: flex;



align-items: flex-start;



gap: 9px;



margin-top: 25px;



font-size: 12px;



line-height: 1.5;



color: #756d65;

}

.termos input {

margin-top: 2px;

}

.termos a {

color: #c46122;



font-weight: 600;



text-decoration: none;

}

/* =========================================================

BOTÕES

========================================================= */

.btn-login,

.btn-cadastrar {

width: 100%;



height: 54px;



border: none;



border-radius: 12px;



background:

    linear-gradient(

        135deg,

        #d0712a,

        #b95718

    );



color: #ffffff;



font-size: 15px;



font-weight: 700;



cursor: pointer;



box-shadow:

    0 10px 25px

    rgba(

        185,

        87,

        24,

        0.22

    );



transition: 0.2s;

}

.btn-cadastrar {

height: 53px;



border-radius: 11px;



margin-top: 22px;

}

.btn-login:hover,

.btn-cadastrar:hover {

transform:

    translateY(-2px);



box-shadow:

    0 14px 30px

    rgba(

        185,

        87,

        24,

        0.30

    );

}

.btn-login:active,

.btn-cadastrar:active {

transform:

    translateY(0);

}

/* =========================================================

LINKS INFERIORES

========================================================= */

.register,

.login-link {

text-align: center;



margin-top: 28px;



font-size: 14px;



color: #756d65;

}

.login-link {

margin-top: 20px;



font-size: 13px;

}

.register a,

.login-link a {

color: #c46122;



font-weight: 700;



text-decoration: none;

}

.register a:hover,

.login-link a:hover {

text-decoration: underline;

}

/* =========================================================

CADASTRO DE ITENS DO MENU

========================================================= */

.menu-container {

width: 100%;

max-width: 1100px;



margin: auto;



background: #f8f3eb;



border-radius: 24px;



overflow: hidden;



box-shadow:

    0 30px 80px

    rgba(0, 0, 0, 0.40);



position: relative;



z-index: 2;

}

/* =========================================================

CABEÇALHO DO MENU

========================================================= */

.menu-header {

padding: 35px 45px;



background:

    linear-gradient(

        145deg,

        #24211e,

        #3b2c22

    );



color: #ffffff;



display: flex;



align-items: center;



justify-content: space-between;



gap: 20px;

}

.menu-header-text h1 {

font-size: 30px;



margin-bottom: 8px;



letter-spacing: -0.5px;

}

.menu-header-text p {

color: #d5cec6;



font-size: 14px;

}

/* =========================================================

BOTÃO VOLTAR

========================================================= */

.menu-voltar {

display: inline-flex;



align-items: center;



justify-content: center;



padding: 11px 18px;



border-radius: 10px;



border:

    1px solid

    rgba(

        255,

        255,

        255,

        0.15

    );



background:

    rgba(

        255,

        255,

        255,

        0.06

    );



color: #ffffff;



text-decoration: none;



font-size: 13px;



transition: 0.2s;

}

.menu-voltar:hover {

background:

    rgba(

        255,

        255,

        255,

        0.12

    );

}

/* =========================================================

ÁREA DO FORMULÁRIO

========================================================= */

.menu-form-area {

padding: 40px 45px;

}

.menu-form-header {

margin-bottom: 28px;

}

.menu-form-header h2 {

font-size: 23px;



color: #29251f;



margin-bottom: 7px;

}

.menu-form-header p {

color: #7d746b;



font-size: 14px;

}

/* =========================================================

GRID DO FORMULÁRIO

========================================================= */

.menu-form-grid {

display: grid;



grid-template-columns:

    1fr

    1fr;



gap: 20px;

}

.menu-campo-completo {

grid-column: 1 / -1;

}

/* =========================================================

DESCRIÇÃO

========================================================= */

.menu-campo textarea {

width: 100%;



min-height: 120px;



resize: vertical;



border:

    1px solid

    #ded5ca;



border-radius: 10px;



background: #fffdf9;



padding: 13px 14px;



outline: none;



font-family:

    Arial,

    Helvetica,

    sans-serif;



font-size: 14px;



color: #29251f;



transition: 0.2s;

}

.menu-campo textarea:focus {

border-color: #d0712a;



box-shadow:

    0 0 0 4px

    rgba(

        208,

        113,

        42,

        0.10

    );

}

/* =========================================================

FOTO

========================================================= */

.menu-foto-area {

border:

    1px dashed

    #d5cabe;



border-radius: 12px;



padding: 22px;



background: #fffdf9;



text-align: center;

}

.menu-foto-area input[type="file"] {

width: 100%;



font-size: 13px;



color: #756d65;

}

.menu-foto-info {

margin-top: 8px;



color: #9a9087;



font-size: 11px;

}

/* =========================================================

RODAPÉ DO FORMULÁRIO

========================================================= */

.menu-form-footer {

display: flex;



align-items: center;



justify-content: flex-end;



gap: 12px;



margin-top: 30px;



padding-top: 25px;



border-top:

    1px solid

    #e4ddd5;

}

/* =========================================================
   BOTÕES DE AÇÃO
========================================================= */

.btn-menu-cancelar {

    height: 46px;

    padding: 0 20px;

    border: 1px solid #d8cec4;

    border-radius: 9px;

    background: #ffffff;

    color: #6f665e;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition:
        background 0.2s,
        border-color 0.2s,
        color 0.2s,
        transform 0.2s;

}


.btn-menu-cancelar:hover {

    background: #f1ebe4;

    border-color: #c9bdb1;

    color: #443d36;

}


.btn-menu-cancelar:active {

    transform: scale(0.97);

}


/* =========================================================
   BOTÃO SALVAR / CONFIRMAR
========================================================= */

.btn-menu-salvar {

    height: 46px;

    padding: 0 23px;

    border: none;

    border-radius: 9px;

    background: #d0712a;

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition:
        background 0.2s,
        transform 0.2s,
        box-shadow 0.2s;

    box-shadow:
        0 5px 14px
        rgba(
            185,
            87,
            24,
            0.20
        );

}


.btn-menu-salvar:hover {

    background: #b95718;

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(
            185,
            87,
            24,
            0.27
        );

}


.btn-menu-salvar:active {

    transform: scale(0.97);

}


/* =========================================================
   BOTÃO ALTERAR — LISTA DE PRODUTOS
========================================================= */

.btn-item-alterar {

    height: 38px;

    padding: 0 15px;

    border: 1px solid #d8cec4;

    border-radius: 8px;

    background: #ffffff;

    color: #8c4d20;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s,
        border-color 0.2s,
        color 0.2s,
        transform 0.2s;

}


.btn-item-alterar:hover {

    background: #fff4e9;

    border-color: #d0712a;

    color: #b95718;

    transform: translateY(-1px);

}


.btn-item-alterar:active {

    transform: scale(0.96);

}


/* =========================================================
   BOTÃO EXCLUIR — LISTA DE PRODUTOS
========================================================= */

.btn-item-excluir {

    height: 38px;

    padding: 0 15px;

    border: 1px solid #e0c5c0;

    border-radius: 8px;

    background: #ffffff;

    color: #a63d2f;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s,
        border-color 0.2s,
        color 0.2s,
        transform 0.2s;

}


.btn-item-excluir:hover {

    background: #fff1ef;

    border-color: #c96b5d;

    color: #8f2f24;

    transform: translateY(-1px);

}


.btn-item-excluir:active {

    transform: scale(0.96);

}


/* =========================================================
   BOTÃO EXCLUIR ITEM — MODAL DE CONFIRMAÇÃO
========================================================= */

.btn-item-excluir-confirmar {

    height: 46px;

    padding: 0 21px;

    border: none;

    border-radius: 9px;

    background: #a63d2f;

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition:
        background 0.2s,
        transform 0.2s,
        box-shadow 0.2s;

    box-shadow:
        0 5px 14px
        rgba(
            166,
            61,
            47,
            0.20
        );

}


.btn-item-excluir-confirmar:hover {

    background: #8f2f24;

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(
            166,
            61,
            47,
            0.27
        );

}


.btn-item-excluir-confirmar:active {

    transform: scale(0.97);

}/* =========================================================
   MODAIS DOS ITENS
========================================================= */

/* FUNDO DO MODAL */

.modal-overlay {

    display: none;

    position: fixed;

    inset: 0;

    z-index: 9999;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background: rgba(
        0,
        0,
        0,
        0.60
    );

}


.modal-overlay.aberto {

    display: flex;

}


/* =========================================================
   CONTEÚDO DO MODAL DE ALTERAÇÃO
========================================================= */

.modal-item {

    width: 100%;

    max-width: 650px;

    max-height: 90vh;

    overflow-y: auto;

    background: #f8f3eb;

    border-radius: 18px;

    padding: 30px;

    box-shadow:
        0 25px 70px
        rgba(
            0,
            0,
            0,
            0.40
        );

}


/* =========================================================
   CABEÇALHO DO MODAL
========================================================= */

.modal-item-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;

}


.modal-item-header h2 {

    margin: 0;

    color: #29251f;

    font-size: 23px;

}


.modal-item-header p {

    margin-top: 6px;

    color: #7d746b;

    font-size: 13px;

}


/* =========================================================
   BOTÃO FECHAR
========================================================= */

.modal-fechar {

    width: 35px;

    height: 35px;

    flex-shrink: 0;

    border: none;

    border-radius: 50%;

    background: #eee8e0;

    color: #6f665e;

    font-size: 24px;

    line-height: 1;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: 0.2s;

}


.modal-fechar:hover {

    background: #ded5ca;

    color: #29251f;

}


/* =========================================================
   CAMPOS DO MODAL
========================================================= */

.menu-campo {

    display: flex;

    flex-direction: column;

}


.menu-campo label {

    margin-bottom: 7px;

    font-size: 13px;

    font-weight: 600;

    color: #443d36;

}


.menu-campo input,

.menu-campo select,

.menu-campo textarea {

    width: 100%;

    border:
        1px solid
        #ded5ca;

    border-radius: 10px;

    background: #fffdf9;

    outline: none;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    color: #29251f;

    transition: 0.2s;

}


.menu-campo input,

.menu-campo select {

    height: 48px;

    padding:
        0 14px;

}


.menu-campo textarea {

    min-height: 120px;

    padding:
        13px 14px;

    resize: vertical;

}


.menu-campo input:focus,

.menu-campo select:focus,

.menu-campo textarea:focus {

    border-color: #d0712a;

    box-shadow:
        0 0 0 4px
        rgba(
            208,
            113,
            42,
            0.10
        );

}


/* =========================================================
   FOTO DO MODAL
========================================================= */

.menu-foto-area {

    border:
        1px dashed
        #d5cabe;

    border-radius: 12px;

    padding: 22px;

    background: #fffdf9;

    text-align: center;

}


.modal-foto-preview {

    display: none;

    width: 100%;

    max-width: 300px;

    max-height: 220px;

    object-fit: cover;

    border-radius: 12px;

    margin: 0 auto 15px;

}


.menu-foto-area input[type="file"] {

    width: 100%;

    font-size: 13px;

    color: #756d65;

}


.menu-foto-info {

    margin-top: 8px;

    color: #9a9087;

    font-size: 11px;

}


/* =========================================================
   MODAL DE CONFIRMAÇÃO DE EXCLUSÃO
========================================================= */

.modal-confirmacao {

    width: 100%;

    max-width: 450px;

    background: #f8f3eb;

    border-radius: 18px;

    padding: 30px;

    box-shadow:
        0 25px 70px
        rgba(
            0,
            0,
            0,
            0.40
        );

}


.modal-confirmacao .modal-fechar {

    margin-left: auto;

}


.modal-confirmacao h2 {

    margin-top: 20px;

    margin-bottom: 12px;

    color: #29251f;

    font-size: 23px;

}


.modal-confirmacao p {

    color: #6f665e;

    font-size: 14px;

    line-height: 1.6;

}


.modal-confirmacao p strong {

    color: #29251f;

}


.modal-aviso {

    margin-top: 10px;

    color: #a63d2f !important;

    font-weight: 600;

}


/* =========================================================
   RESPONSIVIDADE DOS MODAIS
========================================================= */

@media (max-width: 700px) {

    .modal-overlay {

        padding: 12px;

    }


    .modal-item,

    .modal-confirmacao {

        max-height: 94vh;

        padding: 22px;

        border-radius: 15px;

    }


    .modal-item .menu-form-grid {

        grid-template-columns: 1fr;

    }


    .modal-item .menu-campo-completo {

        grid-column: auto;

    }


    .modal-item .menu-form-footer {

        flex-direction: column-reverse;

        align-items: stretch;

    }


    .modal-item .btn-menu-cancelar,

    .modal-item .btn-menu-salvar {

        width: 100%;

    }

}

/* =========================================================
   CADASTRO DE GARÇONS
========================================================= */

.form-garcom {

    width: 100%;

}


.form-grid-garcom {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    width: 100%;

}


.campo-garcom {

    display: flex;

    flex-direction: column;

    width: 100%;

}


.campo-garcom label {

    display: block;

    margin-bottom: 7px;

    font-size: 13px;

    font-weight: 600;

    color: #443d36;

}


.campo-garcom input {

    display: block;

    width: 100%;

    height: 48px;

    padding: 0 14px;

    border: 1px solid #ded5ca;

    border-radius: 10px;

    background: #fffdf9;

    outline: none;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    color: #29251f;

    transition: 0.2s;

}


.campo-garcom input:focus {

    border-color: #d0712a;

    box-shadow:
        0 0 0 4px
        rgba(
            208,
            113,
            42,
            0.10
        );

}


/* =========================================================
   MENSAGENS
========================================================= */

.mensagem-garcom {

    width: 100%;

    padding: 13px 16px;

    margin-bottom: 22px;

    border-radius: 10px;

    font-size: 13px;

    box-sizing: border-box;

}


.mensagem-garcom.erro {

    background:
        rgba(
            166,
            61,
            47,
            0.08
        );

    border:
        1px solid
        rgba(
            166,
            61,
            47,
            0.20
        );

    color: #a63d2f;

}


.mensagem-garcom.sucesso {

    background:
        rgba(
            67,
            168,
            107,
            0.10
        );

    border:
        1px solid
        rgba(
            67,
            168,
            107,
            0.20
        );

    color: #328052;

}
/* =========================================================
   LISTA DE ITENS DO MENU
========================================================= */

.itens-menu-lista {

    display: flex;

    flex-direction: column;

    gap: 14px;

}


/* =========================================================
   CARD DO ITEM
========================================================= */

.item-menu-card {

    display: grid;

    grid-template-columns:
        90px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 20px;

    padding: 18px;

    background: #f8f3eb;

    border:
        1px solid
        #e2d9cf;

    border-radius: 15px;

    box-shadow:
        0 8px 25px
        rgba(
            50,
            40,
            30,
            0.05
        );

    transition:
        transform 0.2s,
        border-color 0.2s,
        box-shadow 0.2s;

}


.item-menu-card:hover {

    transform:
        translateY(-2px);

    border-color:
        #d8c9bb;

    box-shadow:
        0 12px 30px
        rgba(
            50,
            40,
            30,
            0.08
        );

}


/* =========================================================
   FOTO
========================================================= */

.item-menu-foto {

    width: 90px;

    height: 90px;

    border-radius: 12px;

    overflow: hidden;

    background: #eee7df;

    flex-shrink: 0;

}


.item-menu-foto img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}


.item-menu-sem-foto {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #9a9087;

    font-size: 27px;

}


/* =========================================================
   INFORMAÇÕES
========================================================= */

.item-menu-info {

    min-width: 0;

}


.item-menu-categoria {

    display: inline-flex;

    align-items: center;

    padding:
        4px
        9px;

    margin-bottom: 7px;

    border-radius: 6px;

    background:
        rgba(
            208,
            113,
            42,
            0.10
        );

    color: #a85c27;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}


.item-menu-info h3 {

    margin: 0 0 6px;

    color: #332d27;

    font-size: 16px;

}


.item-menu-info p {

    margin: 0 0 8px;

    color: #81776e;

    font-size: 12px;

    line-height: 1.5;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}
.tabela-garcons-container {
    width: 100%;
    overflow-x: auto;
}

.tabela-garcons {
    width: 100%;
    border-collapse: collapse;
}

.tabela-garcons th,
.tabela-garcons td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.tabela-garcons th {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    background: #f8fafc;
}

.tabela-garcons td {
    font-size: 14px;
    color: #1f2937;
}

.tabela-garcons tbody tr:hover {
    background: #f8fafc;
}

.btn-garcom-alterar,
.btn-garcom-excluir {
    border: none;
    padding: 7px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    margin-right: 6px;
}

.btn-garcom-alterar {
    background: #e8f1ff;
    color: #2563eb;
}

.btn-garcom-excluir {
    background: #fee2e2;
    color: #dc2626;
}

.item-menu-valor {

    display: block;

    color: #c46122;

    font-size: 15px;

}


/* =========================================================
   AÇÕES
========================================================= */

.item-menu-acoes {

    display: flex;

    align-items: center;

    gap: 8px;

}


/* =========================================================
   RESPONSIVIDADE
========================================================= */

@media (max-width: 700px) {

    .item-menu-card {

        grid-template-columns:
            70px
            minmax(0, 1fr);

        gap: 14px;

    }


    .item-menu-foto {

        width: 70px;

        height: 70px;

    }


    .item-menu-acoes {

        grid-column:
            1 / -1;

        width: 100%;

        display: grid;

        grid-template-columns:
            1fr
            1fr;

    }


    .item-menu-acoes button {

        width: 100%;

    }

}


@media (max-width: 420px) {

    .item-menu-card {

        padding: 14px;

    }


    .item-menu-info h3 {

        font-size: 14px;

    }


    .item-menu-info p {

        font-size: 11px;

    }

}

/* =========================================================
   RESPONSIVIDADE
========================================================= */

@media (max-width: 700px) {

    .form-grid-garcom {

        grid-template-columns: 1fr;

    }

}
/* =========================================================

MENSAGEM

========================================================= */

.menu-mensagem {

padding: 13px 16px;



border-radius: 10px;



background:

    rgba(

        208,

        113,

        42,

        0.08

    );



border:

    1px solid

    rgba(

        208,

        113,

        42,

        0.20

    );



color: #8c4d20;



font-size: 13px;



margin-bottom: 25px;

}

/* =========================================================

DASHBOARD

========================================================= */

.dashboard-body {

display: block;



padding: 0;



background:

    #f1ece5;

}

/* =========================================================

CONTAINER

========================================================= */

.dashboard-container {

min-height: 100vh;



display: flex;



background: #f1ece5;

}

/* =========================================================

MENU LATERAL

========================================================= */

.dashboard-sidebar {

width: 270px;



min-height: 100vh;



background:

    linear-gradient(

        145deg,

        #24211e,

        #30251f

    );



color: #ffffff;



padding: 25px 18px;



position: fixed;



left: 0;

top: 0;

bottom: 0;



overflow-y: auto;

}

/* =========================================================

LOGO

========================================================= */

.dashboard-logo {

display: flex;



align-items: center;



gap: 11px;



font-size: 20px;



font-weight: 700;



padding:

    0 10px 25px;



border-bottom:

    1px solid

    rgba(

        255,

        255,

        255,

        0.08

    );

}

/* =========================================================

ESTABELECIMENTO

========================================================= */

.dashboard-estabelecimento {

display: flex;



flex-direction: column;



gap: 5px;



padding:

    22px 10px;



border-bottom:

    1px solid

    rgba(

        255,

        255,

        255,

        0.08

    );

}

.dashboard-estabelecimento span {

color: #9f958c;



font-size: 11px;



text-transform: uppercase;



letter-spacing: 1px;

}

.dashboard-estabelecimento strong {

color: #ffffff;



font-size: 14px;



overflow: hidden;



text-overflow: ellipsis;



white-space: nowrap;

}

/* =========================================================

MENU

========================================================= */

.dashboard-menu {

padding-top: 18px;

}

.dashboard-menu-section {

margin-top: 22px;

}

.dashboard-menu-title {

color: #82776d;



font-size: 10px;



font-weight: 700;



text-transform: uppercase;



letter-spacing: 1.5px;



padding:

    0 12px 8px;

}

.dashboard-menu-item {

display: flex;



align-items: center;



gap: 12px;



min-height: 43px;



padding:

    0 12px;



margin-bottom: 4px;



border-radius: 9px;



color: #cfc7c0;



text-decoration: none;



font-size: 13px;



transition: 0.2s;

}

.dashboard-menu-item:hover {

background:

    rgba(

        255,

        255,

        255,

        0.06

    );



color: #ffffff;

}

.dashboard-menu-item.ativo {

background:

    rgba(

        208,

        113,

        42,

        0.16

    );



color: #e38a47;

}

.dashboard-menu-icon {

width: 25px;



text-align: center;



font-size: 16px;

}

.dashboard-sair {

color: #bdb3aa;

}

/* =========================================================

ÁREA PRINCIPAL

========================================================= */

.dashboard-main {

width: calc(100% - 270px);



margin-left: 270px;



min-height: 100vh;



padding: 35px 45px;

}

/* =========================================================

CABEÇALHO

========================================================= */

.dashboard-header {

display: flex;



align-items: center;



justify-content: space-between;



margin-bottom: 35px;

}

.dashboard-header h1 {

color: #29251f;



font-size: 30px;



margin-bottom: 7px;

}

.dashboard-header p {

color: #7d746b;



font-size: 14px;

}

.dashboard-header-user {

display: flex;



align-items: center;

}

.dashboard-user-icon {

width: 43px;

height: 43px;



border-radius: 50%;



display: flex;



align-items: center;



justify-content: center;



background: #d0712a;



color: #ffffff;



font-weight: 700;



box-shadow:

    0 6px 18px

    rgba(

        208,

        113,

        42,

        0.25

    );

}

/* =========================================================

CARDS

========================================================= */

.dashboard-cards {

display: grid;



grid-template-columns:

    repeat(

        4,

        1fr

    );



gap: 16px;



margin-bottom: 35px;

}

.dashboard-card {

background: #f8f3eb;



border:

    1px solid

    #e2d9cf;



border-radius: 15px;



padding: 22px;



display: flex;



align-items: center;



gap: 15px;



box-shadow:

    0 8px 25px

    rgba(

        50,

        40,

        30,

        0.05

    );

}

.dashboard-card-icon {

width: 45px;

height: 45px;



border-radius: 11px;



display: flex;



align-items: center;



justify-content: center;



background:

    rgba(

        208,

        113,

        42,

        0.10

    );



color: #c46122;



font-size: 18px;

}

.dashboard-card span {

display: block;



color: #81776e;



font-size: 11px;



margin-bottom: 5px;

}

.dashboard-card strong {

display: block;



color: #29251f;



font-size: 21px;

}

/* =========================================================

SEÇÕES

========================================================= */

.dashboard-section {

margin-bottom: 30px;

}

.dashboard-section-header {

margin-bottom: 18px;

}

.dashboard-section-header h2 {

color: #29251f;



font-size: 21px;



margin-bottom: 5px;

}

.dashboard-section-header p {

color: #81776e;



font-size: 13px;

}

/* =========================================================

ACESSO RÁPIDO

========================================================= */

.dashboard-actions {

display: grid;



grid-template-columns:

    repeat(

        4,

        1fr

    );



gap: 15px;

}

.dashboard-action {

display: flex;



flex-direction: column;



padding: 22px;



min-height: 165px;



background: #f8f3eb;



border:

    1px solid

    #e2d9cf;



border-radius: 15px;



text-decoration: none;



transition: 0.2s;

}

.dashboard-action:hover {

transform:

    translateY(-3px);



border-color: #d0712a;



box-shadow:

    0 12px 30px

    rgba(

        50,

        40,

        30,

        0.08

    );

}

.dashboard-action-icon {

width: 42px;

height: 42px;



border-radius: 10px;



display: flex;



align-items: center;



justify-content: center;



background:

    rgba(

        208,

        113,

        42,

        0.10

    );



color: #c46122;



font-size: 17px;



margin-bottom: 18px;

}

.dashboard-action strong {

color: #332d27;



font-size: 14px;



margin-bottom: 7px;

}

.dashboard-action span {

color: #837970;



font-size: 12px;



line-height: 1.5;

}

/* =========================================================

STATUS

========================================================= */

.dashboard-status {

background: #f8f3eb;



border:

    1px solid

    #e2d9cf;



border-radius: 15px;



padding: 5px 22px;

}

.status-item {

display: flex;



align-items: center;



gap: 14px;



padding: 18px 0;



border-bottom:

    1px solid

    #e7dfd7;

}

.status-item:last-child {

border-bottom: none;

}

.status-indicator {

width: 9px;

height: 9px;



border-radius: 50%;



background: #aaa097;

}

.status-indicator.ativo {

background: #43a86b;



box-shadow:

    0 0 0 4px

    rgba(

        67,

        168,

        107,

        0.12

    );

}

.status-item strong {

display: block;



color: #403830;



font-size: 13px;



margin-bottom: 3px;

}

.status-item span:not(.status-indicator) {

display: block;



color: #8a8077;



font-size: 12px;

}

/* =========================================================

RESPONSIVIDADE

========================================================= */

@media (max-width: 1100px) {

.dashboard-cards {

    grid-template-columns:

        repeat(

            2,

            1fr

        );

}





.dashboard-actions {

    grid-template-columns:

        repeat(

            2,

            1fr

        );

}

}

@media (max-width: 800px) {

.dashboard-sidebar {

    width: 220px;

}





.dashboard-main {

    width: calc(100% - 220px);



    margin-left: 220px;



    padding:

        30px 25px;

}

}

@media (max-width: 650px) {

.dashboard-container {

    display: block;

}





.dashboard-sidebar {

    position: relative;



    width: 100%;



    min-height: auto;

}





.dashboard-main {

    width: 100%;



    margin-left: 0;



    padding:

        25px 18px;

}





.dashboard-cards {

    grid-template-columns: 1fr;

}





.dashboard-actions {

    grid-template-columns: 1fr;

}





.dashboard-header h1 {

    font-size: 25px;

}

}

/* =========================================================

RESPONSIVIDADE

========================================================= */

@media (max-width: 700px) {

.menu-header {

    padding: 30px 25px;



    flex-direction: column;



    align-items: flex-start;

}





.menu-form-area {

    padding: 30px 25px;

}





.menu-form-grid {

    grid-template-columns: 1fr;

}





.menu-campo-completo {

    grid-column: auto;

}





.menu-form-footer {

    flex-direction: column-reverse;



    align-items: stretch;

}





.btn-menu-cancelar,

.btn-menu-salvar {

    width: 100%;

}

}

@media (max-width: 520px) {

body {

    padding: 12px;

}





.menu-container {

    border-radius: 18px;

}





.menu-header-text h1 {

    font-size: 26px;

}





.menu-form-header h2 {

    font-size: 21px;

}

}

/* =========================================================

RESPONSIVIDADE — LOGIN

========================================================= */

@media (max-width: 800px) {

.login-container {

    grid-template-columns: 1fr;



    max-width: 500px;



    min-height: auto;

}





.login-info {

    padding: 40px;



    min-height: 300px;

}





.info-content h1 {

    font-size: 32px;

}





.login-info .features {

    display: none;

}





.info-footer {

    margin-top: 30px;

}





.login-form-area {

    padding: 40px 30px;

}

}

/* =========================================================

RESPONSIVIDADE — CADASTRO

========================================================= */

@media (max-width: 850px) {

.cadastro-container {

    grid-template-columns: 1fr;



    max-width: 600px;

}





.painel-info {

    padding: 40px;



    min-height: 320px;

}





.painel-texto h1 {

    font-size: 32px;

}





.painel-info .beneficios {

    display: none;

}





.form-area {

    padding: 40px 35px;

}

}

/* =========================================================

RESPONSIVIDADE — CELULAR

========================================================= */

@media (max-width: 520px) {

body {

    padding: 12px;

}





.login-container,

.cadastro-container {

    border-radius: 18px;

}





.login-info,

.painel-info {

    padding: 30px 25px;

}





.login-form-area,

.form-area {

    padding: 35px 22px;

}





.info-content h1,

.painel-texto h1 {

    font-size: 29px;

}





.form-header h2 {

    font-size: 26px;

}





.form-grid {

    grid-template-columns: 1fr;

}





.campo-completo {

    grid-column: auto;

}

}