/*
    Boot.css

    Objetivos:
    - Limpar estilos padrões do navegador
    - Definir variáveis CSS (cores, tamanhos, etc)
    - Definir estilos base para elementos HTML (h1, p, a, input, etc)
    - Definir classes genéricas (fundos, bordas, fontes, margens, etc)
*/

:root{
    --radius: 8px;
    --speed: .2s;

    --primary:          #387e47;
    --primary-hover:    #216430;
    --secondary:        #929292;
    --secondary-hover:  #7a7a7a;
    --success:          #28a745;
    --success-hover:    #1e7e34;
    --info:             #476581;
    --info-hover:       #658db3;
    --warning:          #ff9c07;
    --warning-hover:    #ca7b04;
    --danger:           #dc3545;
    --danger-hover:     #b02a37;

    --text-color:       #444;
    --text-color-light: #888;
    --text-color-dark:  #111;
    --text-color-white: #eee;

    --light:            #f8f9fa;
    --dark:             #212529;

    --fundo:            #ffe5e5;
    --fundo-light:      #f6f6f6;
    --fundo-dark:       #ffd9d9;

    --black:            #000000;
    --gray:             #cfcece;
    --gray-light:       #edf2f8;
    --gray-dark:        #bbb9b9;
    --white:            #ffffff;

    --blue:             #3c8dbc;
    --blue-light:       #327297;
    --blue-dark:        #4cafe9;
    --green:            #8cd4ab;
    --green-light:      #b4cebf;
    --green-dark:       #69c490;
    --maroon:           #91592c;
    --maroon-light:     #8f6847;
    --maroon-dark:      #6d4220;
    --orange:           #F2920C;
    --orange-light:     #f7ab40;
    --orange-dark:      #c77a0f;
    --pink:             #f179b1;
    --pink-light:       #f399c3;
    --pink-dark:        #f35ba2;
    --red:              #df5462;
    --red-light:        #dd6b76;
    --red-dark:         #ca3342;
    --yellow:           #e9ea68;
    --yellow-light:     #f4f5a6;
    --yellow-dark:      #c7c84f;
}
*, *:before, *:after {
    padding: 0;
    margin: 0;
    border: 0;
    text-decoration: none;
    font-size: 1em;
    box-sizing: border-box;
}

/*
    ------------------
    ELEMENTOS HTML
    (Ordem alfabética)
    ------------------
*/
a {
    text-decoration: none;
    color: var(--primary);
}
a:hover {
    color: var(--primary-hover);
}
a:visited {
    color: var(--primary-hover);
}

.form-list-filters {
    display: flex;
    margin: 20px 0;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-color);
    font-weight: 600;
    margin-bottom: 10px;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.125em; }
h5 { font-size: 1em; }
h6 { font-size: .875em; }

hr {
    border: none;
    border-top: 1px solid var(--gray);
    margin: 10px 0;
}

input {
    padding: 4px 8px;
    margin: 0 0 0 10px;
    width: calc(100% - 10px);
    font-size: 1em;
    color: var(--text-color);
    border: 1px solid var(--gray);
    border-radius: var(--radius);
}
input:focus {
    outline: none;
    outline-offset: 4px;
    border: 1px solid var(--primary);
}
input.is-invalid {
    border: 1px solid var(--danger);
}

/* formatar checkbox e radio para ficar alinhado com o label */
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    margin: 0 5px 0 10px;
    vertical-align: middle;
}

label {
    margin: 0 0 0 15px;
    font-size: .8em;
    font-weight: 600;
    font-style: italic;
    color: var(--text-color);
}

p {
    color: var(--text-color);
    line-height: 1.5em;
    margin-bottom: 10px;
}

select {
    padding: 4px 8px;
    margin: 0 0 0 10px;
    width: calc(100% - 10px);
    font-size: 1em;
    color: var(--text-color);
    border: 1px solid var(--gray);
    border-radius: var(--radius);
}
select:focus {
    outline: none;
    outline-offset: 4px;
    border: 1px solid var(--primary);
}
select.is-invalid {
    border: 1px solid var(--danger);
}

small {
    font-size: .8em;
    color: var(--text-color-light);
}

textarea {
    padding: 4px 8px;
    margin: 0 0 0 10px;
    width: calc(100% - 10px);
    font-size: 1em;
    color: var(--text-color);
    border: 1px solid var(--gray);
    border-radius: var(--radius);
    min-height: 75px;
}
textarea:focus {
    outline: none;
    outline-offset: 4px;
    border: 1px solid var(--primary);
}
textarea.is-invalid {
    border: 1px solid var(--danger);
}

u {
    text-decoration: underline;
}

ul {
    list-style-type: none;
}

/* Acessibilidade: realce adicional para foco por teclado/assistivo */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none; /* mantém seu padrão sem outline nativo */
    box-shadow: 0 0 0 3px rgba(56, 126, 71, 0.2); /* usa o tom do --primary (#387e47) */
}
.hoverable:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 126, 71, 0.2);
    border-radius: var(--radius);
}

/* ===== Scrollbar Global ===== */

/* Navegadores baseados em WebKit (Chrome, Edge, Safari, Opera) */
* {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--secondary) transparent; /* thumb | track */
}

/* largura e altura */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* trilho (track) */
*::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--radius);
}

/* thumb (a barrinha) */
*::-webkit-scrollbar-thumb {
  background-color: var(--secondary);
  border-radius: var(--radius);
  border: 2px solid transparent; /* cria "folga" pro radius aparecer */
  background-clip: content-box;
  transition: background-color var(--speed);
}

/* hover */
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--secondary-hover);
}


/*
    -----------------
    CLASSES GENÉRICAS
    -----------------
*/

/* --- Backgrounds --- */
.bg-fundo { background: var(--fundo); }
.bg-fundo-light { background: var(--fundo-light); }
.bg-fundo-dark { background: var(--fundo-dark); }
.bg-primary {background: var(--primary);}
.bg-secondary {background: var(--secondary);}
.bg-success {background: var(--success);}
.bg-info {background: var(--info);}
.bg-warning {background: var(--warning);}
.bg-danger {background: var(--danger);}

.hoverable.bg-primary:hover   { background: var(--primary-hover); }
.hoverable.bg-secondary:hover { background: var(--secondary-hover); }
.hoverable.bg-success:hover   { background: var(--success-hover); }
.hoverable.bg-info:hover      { background: var(--info-hover); }
.hoverable.bg-warning:hover   { background: var(--warning-hover); }
.hoverable.bg-danger:hover    { background: var(--danger-hover); }

.bg-black {background-color: var(--black);}
.bg-gray {background-color: var(--gray);}
.bg-gray-light {background-color: var(--gray-light);}
.bg-gray-dark {background-color: var(--gray-dark);}
.bg-white {background-color: var(--white);}

.bg-blue {background-color: var(--blue);}
.bg-blue-light {background-color: var(--blue-light);}
.bg-blue-dark {background-color: var(--blue-dark);}
.bg-green {background-color: var(--green);}
.bg-green-light {background-color: var(--green-light);}
.bg-green-dark {background-color: var(--green-dark);}
.bg-maroon {background-color: var(--maroon);}
.bg-maroon-light {background-color: var(--maroon-light);}
.bg-maroon-dark {background-color: var(--maroon-dark);}
.bg-orange {background-color: var(--orange);}
.bg-orange-light {background-color: var(--orange-light);}
.bg-orange-dark {background-color: var(--orange-dark);}
.bg-pink {background-color: var(--pink);}
.bg-pink-light {background-color: var(--pink-light);}
.bg-pink-dark {background-color: var(--pink-dark);}
.bg-red {background-color: var(--red);}
.bg-red-light {background-color: var(--red-light);}
.bg-red-dark {background-color: var(--red-dark);}
.bg-yellow {background-color: var(--yellow);}
.bg-yellow-light {background-color: var(--yellow-light);}
.bg-yellow-dark {background-color: var(--yellow-dark);}


/* --- Borders --- */
.border {border: 1px solid;}
.border-bottom { border-bottom: 1px solid; }

.border-primary {border-color: var(--primary);}
.border-secondary {border-color: var(--secondary);}
.border-success {border-color: var(--success);}
.border-info {border-color: var(--info);}
.border-warning {border-color: var(--warning);}
.border-danger {border-color: var(--danger);}

.border-black {border-color: var(--black);}
.border-gray {border-color: var(--gray);}
.border-white {border-color: var(--white);}

.border-blue {border-color: var(--blue);}
.border-green {border-color: var(--green);}
.border-maroon {border-color: var(--maroon);}
.border-orange {border-color: var(--orange);}
.border-pink {border-color: var(--pink);}
.border-red {border-color: var(--red);}
.border-yellow {border-color: var(--yellow);}


/* --- Floats --- */
.float-left { float: left; }
.float-right { float: right; }
.float-none { float: none; }

/* --- Fonts --- */

/* Align */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Color */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-success { color: var(--success) !important; }
.text-info { color: var(--info) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-light { color: var(--light) !important; }
.text-dark { color: var(--dark) !important; }

.text-black { color: var(--black) !important; }
.text-gray { color: var(--gray) !important; }
.text-white { color: var(--white) !important; }

.text-blue { color: var(--blue) !important; }
.text-green { color: var(--green) !important; }
.text-maroon { color: var(--maroon) !important; }
.text-orange { color: var(--orange) !important; }
.text-pink { color: var(--pink) !important; }
.text-red { color: var(--red) !important; }
.text-yellow { color: var(--yellow) !important; }
.text-yellow-dark { color: var(--yellow-dark) !important; }

.text-muted {
  color: #6b7280;
}

/* Size */
.text-very-small { font-size: .6em; }
.text-small { font-size: .8em; }
.text-normal { font-size: 1em; }
.text-large { font-size: 1.5em; }
.text-very-large { font-size: 2em; }

/* --- Margin --- */
.m-0 { margin: 0 !important;}
.m-1 { margin: 4px !important;}
.m-2 { margin: 8px !important;}
.m-3 { margin: 12px !important;}
.m-4 { margin: 16px !important;}
.m-5 { margin: 20px !important;}

.ml-0 { margin-left: 0 !important;}
.ml-1 { margin-left: 4px !important;}
.ml-2 { margin-left: 8px !important;}
.ml-3 { margin-left: 12px !important;}
.ml-4 { margin-left: 16px !important;}
.ml-5 { margin-left: 20px !important;}

.mr-0 { margin-right: 0 !important;}
.mr-1 { margin-right: 4px !important;}
.mr-2 { margin-right: 8px !important;}
.mr-3 { margin-right: 12px !important;}
.mr-4 { margin-right: 16px !important;}
.mr-5 { margin-right: 20px !important;}

.mt-0 { margin-top: 0 !important;}
.mt-1 { margin-top: 4px !important;}
.mt-2 { margin-top: 8px !important;}
.mt-3 { margin-top: 12px !important;}
.mt-4 { margin-top: 16px !important;}
.mt-5 { margin-top: 20px !important;}

.mb-0 { margin-bottom: 0 !important;}
.mb-1 { margin-bottom: 4px !important;}
.mb-2 { margin-bottom: 8px !important;}
.mb-3 { margin-bottom: 12px !important;}
.mb-4 { margin-bottom: 16px !important;}
.mb-5 { margin-bottom: 20px !important;}

/* --- Padding --- */
.p-0 { padding: 0}
.p-1 { padding: 4px}
.p-2 { padding: 8px}
.p-3 { padding: 12px}
.p-4 { padding: 16px}
.p-5 { padding: 20px}

.pl-0 { padding-left: 0}
.pl-1 { padding-left: 4px}
.pl-2 { padding-left: 8px}
.pl-3 { padding-left: 12px}
.pl-4 { padding-left: 16px}
.pl-5 { padding-left: 20px}

.pr-0 { padding-right: 0}
.pr-1 { padding-right: 4px}
.pr-2 { padding-right: 8px}
.pr-3 { padding-right: 12px}
.pr-4 { padding-right: 16px}
.pr-5 { padding-right: 20px}

.pt-0 { padding-top: 0}
.pt-1 { padding-top: 4px}
.pt-2 { padding-top: 8px}
.pt-3 { padding-top: 12px}
.pt-4 { padding-top: 16px}
.pt-5 { padding-top: 20px}

.pb-0 { padding-bottom: 0}
.pb-1 { padding-bottom: 4px}
.pb-2 { padding-bottom: 8px}
.pb-3 { padding-bottom: 12px}
.pb-4 { padding-bottom: 16px}
.pb-5 { padding-bottom: 20px}

/* --- Radius --- */
.rad { border-radius: var(--radius); }
.rad-top { border-radius: var(--radius) var(--radius) 0 0; }
.rad-bottom { border-radius: 0 0 var(--radius) var(--radius); }
.rad-left { border-radius: var(--radius) 0 0 var(--radius); }
.rad-right { border-radius: 0 var(--radius) var(--radius) 0; }
.rad-top-left {border-radius: var(--radius) 0 0 0;}
.rad-top-right { border-radius: 0 var(--radius) 0 0; }
.rad-bottom-left { border-radius: 0 0 var(--radius) 0; }
.rad-bottom-right { border-radius: 0 0 0 var(--radius); }

/* --- Acessibilidade --- */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}