/***********************************************************
  CSS com classes para serem utilizadas em outros projetos.
  versão: 3-2025 - Diógenes de Oliveira
  Estilo modernizado em tons de cinza
***********************************************************/

/* RESET BÁSICO */

* {
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #222222;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    text-align: left;
    line-height: 150%;
    color: #333333;
    background-color: #f2f2f2; /* fundo mais claro em tom de cinza */
}


/* LINKS */

a {
    color: #555555;
    text-decoration: none;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
    border-bottom: 1px solid transparent;
}

a:hover {
    color: #111111;
    border-bottom: 1px solid #111111;
}

/* HR */

hr {
    height: 1px;
    border-width: 0;
    border-top: 1px solid #cccccc;
    width: 100%;
    display: inline-block;
}

/**************************************** 
 RECURSOS PARA LAYOUT EM COLUNAS 
*****************************************/

.row {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
}

/* Colunas fluidas */
.col-12 { width: 100%; }
.col-11 { width: 91.66666666%; }
.col-10 { width: 83.3333333%; }
.col-9  { width: 75%; }
.col-8  { width: 66.66666667%; }
.col-7  { width: 58.33333333%; }
.col-6  { width: 50%; }
.col-5  { width: 41.66666667%; }
.col-4  { width: 33.33333333%; }
.col-3  { width: 25%; }
.col-2  { width: 16.66666667%; }
.col-1  { width: 8.33333333%; }

[class^="col-"] {
    margin-bottom: 16px;
}

/**************************************** 
  box
*****************************************/

.box {
    height: 100%;
    position: relative;
    background: #ffffff;
    border-radius: 8px;
    padding: 16px;
}

.box-shadow {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.box-footer {
    position: absolute;
    bottom: 14px;
}

.box-hover:hover {
    background-color: #fafafa;
}

.padding-14 {
    padding: 14px;
}

.min-height-300px {
    min-height: 300px;
}

.border {
    border: 1px solid #c0c0c0;
    border-radius: 5px;
    background-color: #ffffff; /* fundo branco nas caixas */
}

.box-shadow {
    box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* sombra suave */
}


.margin-right-20 {
    margin-right: 20px;
}

.margin-top-60 {
    margin-top: 60px;
}

.margin-top-120 {
    margin-top: 120px;
}

.margin-bottom-120 {
    margin-bottom: 120px;
}

.text-align-right {
    text-align: right;
}

/**************************************************************
CONTROLES DE FORMULÁRIOS
***************************************************************/

label {
    margin-top: 18px;
    display: block;
    max-width: 100%;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #555555;
}

/* inputs, textarea, select */

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    background: #fdfdfd;
    color: #333333;
    font-size: 15px;
    padding: 10px 12px;
    width: 100%;
    resize: none;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
    border-color: #777777;
    box-shadow: 0 0 0 2px rgba(119, 119, 119, 0.15);
    background-color: #ffffff;
}

/* BOTÕES */

input[type="submit"],
input[type="button"],
button {
    margin-top: 24px;
    border: 1px solid #444444;
    border-radius: 6px;
    color: #ffffff;
    background-color: #444444;
    font-size: 15px;
    padding: 10px 24px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.08s ease;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
    background-color: #222222;
    border-color: #222222;
    color: #ffffff;
    transform: translateY(-1px);
}

/* botões utilitários com cores em tons de cinza/quente */

.botao {
    margin-top: 20px;
    background-color: #555555 !important;
    border: 1px solid #bbbbbb;
    border-radius: 6px;
    height: 40px;
    padding: 8px 16px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.botao:hover {
    background-color: #333333 !important;
    color: #ffffff;
}

/* Botão delete com tom mais quente, mas ainda neutro */
.botao-delete {
    background-color: #b4533a !important;
}

.botao-delete:hover {
    background-color: #93351f !important;
}

/* Botão editar */
.botao-editar {
    background-color: #4b7c4b !important;
}

.botao-editar:hover {
    background-color: #356435 !important;
}

/* Botão inserir */
.botao-inserir {
    background-color: #555555 !important;
}

.botao-inserir:hover {
    background-color: #333333 !important;
}

/**************************************************************
LAYOUT DE MÍDIAS (RESPONSIVO)
**************************************************************/

@media only screen and (max-width: 768px) {

    body {
        margin-left: 18px;
        margin-right: 18px;
    }

    .margin-right-20 {
        margin: 0;
    }

    .border {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .box-shadow {
        box-shadow: 0 0 0;
    }

    [class^="col-"] {
        width: 100%;
    }

    .content-wrapper,
    content-wrapper {
        padding: 0px;
        margin: 6px;
    }

    .box-border {
        border: 0px;
        padding: 0px;
    }

    .padding-14 {
        border: 0px;
        padding: 0px;
    }

    .dp-hr {
        display: inline-block;
    }

    /* FORMS EM MOBILE */

    .form-input {
        border: 0px;
        padding: 0px;
        padding-top: 20px;
    }

    .form-view {
        border: 0px;
        padding: 0px;
        padding-top: 1px;
    }

    .form-view .ht {
        display: none;
    }

    .side-panel {
        padding-left: 0 !important;
    }

    /* MENU RESPONSIVO (escondido, pois o menu principal está no Projeto.css) */

    .menu {
        display: none;
    }

    .logotype {
        float: right;
    }

    [class=logotype-img] {
        max-width: 240px;
    }
}

/* CONFIGURAÇÃO DA IMPRESSÃO */

@media print {
    body * {
        visibility: hidden;
    }

    #Printable * {
        visibility: visible;
    }
}

/* Slider ocupando toda a largura do container */
.flexslider {
    width: 100%;
    max-width: 1024px;
    margin: 10px auto 0 auto !important;
    border-radius: 8px;
    overflow: hidden;
}

.flexslider .slides li img,
.flexslider img {
    width: 100%;
    height: 360px;          /* altura fixa opcional */
    object-fit: cover;      /* corta para preencher */
    display: block;
}


/* Remove margens/paddings da lista do slider */
.flexslider .slides {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Imagens ocupando 100% da largura da área do slider */
.flexslider .slides li img,
.flexslider img {
    width: 100%;
    height: auto;
    display: block;
}

/* Alinhar o slider com o cabeçalho (mesma largura e centralizado) */
.flexslider {
    max-width: 1024px;   /* mesmo valor do .content-wrap */
    margin: 0 auto;      /* centraliza na tela */
}