/**

 * Tokens Óticas Indaiá — identidade portal

 */

:root {

    --brand-primary: #FFC300;

    --brand-secondary: #e6af00;

    --brand-cta: #FFC300;

    --brand-cta-hover: #e0ad00;

    --brand-texto: #000000;

    --brand-texto-suave: #2d2d2d;

    --brand-branco: #ffffff;

    --brand-cinza: #d1d3d4;

    --brand-accent: #FFD54F;

    --brand-on-primary: #000000;

    --brand-surface-soft: #fff8e0;

    --brand-surface-muted: #fff1c2;

    --brand-danger: #c62828;

    --brand-danger-hover: #b71c1c;

}



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    height: 100%;

}



body {

    min-height: 100%;

    font-family: 'Titillium Web', sans-serif;

    color: var(--brand-texto);

    background-color: var(--brand-branco);

}



#loading {

    display: none;

    background-color: rgba(255, 255, 255, 0.7);

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 100000;

}



.loader {

    border: 5px solid rgba(255, 255, 255, 0);

    border-radius: 50%;

    border-top: 5px solid var(--brand-secondary);

    width: 40px;

    height: 40px;

    animation: spin 0.7s linear infinite;

    margin: 0 auto;

}



@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



#snackbar,

#snackbarError {

    visibility: hidden;

    z-index: 300000;

    display: flex;

    width: 100%;

    justify-content: center;

    position: fixed;

    bottom: 30px;

}



#snackbar p {

    background-color: var(--brand-secondary);

    color: var(--brand-texto);

    border-radius: 2px;

    padding: 16px;

    font-size: 17px;

    width: 350px;

    margin: 0 auto;

}



#snackbarError p {

    background-color: #c4141a;

    color: var(--brand-branco);

    border-radius: 2px;

    padding: 16px;

    font-size: 17px;

    width: 350px;

    margin: 0 auto;

}



#snackbar.show,

#snackbarError.show {

    visibility: visible;

    animation: fadein 0.5s, fadeout 0.5s 2.5s;

}



@keyframes fadein {

    from { bottom: 0; opacity: 0; }

    to { bottom: 30px; opacity: 1; }

}



@keyframes fadeout {

    from { bottom: 30px; opacity: 1; }

    to { bottom: 0; opacity: 0; }

}



.btn-brand,

#sendLogin,

button[style*="#2cc461"],

input[style*="#2cc461"] {

    background-color: var(--brand-cta) !important;

    border-color: var(--brand-cta) !important;

    color: var(--brand-texto) !important;

    font-weight: bold;

}



.btn-brand:hover,

#sendLogin:hover {

    background-color: var(--brand-cta-hover) !important;

    border-color: var(--brand-cta-hover) !important;

}