tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

/* Desabilita animações para acessibilidade */
@media screen and (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
  }
}

/* Variáveis */
:root {
  animation: none !important;
  --primary: 5 77 165;
  --dark-primary: 3 31 72;
  --text: 68 70 80;
  --light: 240 240 240;
  --accent: 2 182 108;
  --dark-accent: 0 99 28;
  --bg-primary-shadow-filter: drop-shadow(2px 2px 2px rgba(4, 49, 103, 0.08))
    drop-shadow(4.5px 4.5px 4.5px rgba(4, 49, 103, 0.061))
    drop-shadow(7.9px 7.9px 7.9px rgba(4, 49, 103, 0.052))
    drop-shadow(12.5px 12.5px 12.5px rgba(4, 49, 103, 0.046))
    drop-shadow(19.3px 19.3px 19.3px rgba(4, 49, 103, 0.04))
    drop-shadow(30.1px 30.1px 30.1px rgba(4, 49, 103, 0.034))
    drop-shadow(50px 50px 50px rgba(4, 49, 103, 0.028))
    drop-shadow(100px 100px 100px rgba(4, 49, 103, 0.019));
  --bg-gray-50-shadow-filter: drop-shadow(2px 2px 2px rgba(94, 94, 94, 0.08))
    drop-shadow(4.5px 4.5px 4.5px rgba(94, 94, 94, 0.061))
    drop-shadow(7.9px 7.9px 7.9px rgba(94, 94, 94, 0.052))
    drop-shadow(12.5px 12.5px 12.5px rgba(94, 94, 94, 0.046))
    drop-shadow(19.3px 19.3px 19.3px rgba(94, 94, 94, 0.04))
    drop-shadow(30.1px 30.1px 30.1px rgba(94, 94, 94, 0.034))
    drop-shadow(50px 50px 50px rgba(94, 94, 94, 0.028))
    drop-shadow(100px 100px 100px rgba(94, 94, 94, 0.019));
  --bg-gray-50-shadow-box: 2px 2px 2px rgba(94, 94, 94, 0.08),
    4.5px 4.5px 4.5px rgba(94, 94, 94, 0.061),
    7.9px 7.9px 7.9px rgba(94, 94, 94, 0.052),
    12.5px 12.5px 12.5px rgba(94, 94, 94, 0.046),
    19.3px 19.3px 19.3px rgba(94, 94, 94, 0.04),
    30.1px 30.1px 30.1px rgba(94, 94, 94, 0.034),
    50px 50px 50px rgba(94, 94, 94, 0.028),
    100px 100px 100px rgba(94, 94, 94, 0.019);
}

/* Propriedades especiais */
::selection {
  @apply bg-primary text-light;
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(var(--primary));
}

/* Propriedades gerais do documento */
*:focus {
  @apply outline-none ring-1 ring-offset-1 ring-primary;
}

html {
  @apply text-text scroll-smooth h-full;
  font-family: "Jost", sans-serif;
  background-color: #e0e0e0;
}

/* Seções */
header {
  @apply flex flex-col justify-center content-center p-4 mt-6 mb-8 mx-auto w-5/6 min-w-[340px] select-none sm:h-40;
}

header a {
  @apply flex flex-col;
}

main {
  @apply w-full;
}

footer {
  @apply flex flex-col justify-center items-center text-center w-5/6 min-w-[340px] py-6 px-4 mx-auto rounded-xl;
}

footer img {
  /* filter: var(--bg-gray-50-shadow-filter); */
}

dialog[open] {
  animation: show 0.5s ease normal;
}

dialog[open]::backdrop {
  animation: show 0.5s ease normal;
}

dialog.hide {
  animation: hide 0.5s ease normal;
}

dialog.hide::backdrop {
  animation: hide 0.5s ease normal;
}

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

@keyframes hide {
  to {
    opacity: 0;
  }
}

.card {
  @apply flex justify-center mb-8 mx-auto p-4 rounded-xl;
  box-shadow: 16px 16px 32px #b5b5b5, -16px -16px 32px #ffffff;
}

.success {
  @apply absolute top-[15%] left-0 right-0 w-[300px] mx-auto text-green-900 bg-green-200/50 border border-green-300 rounded-md p-4 mb-4 backdrop-blur-sm z-50;
  @apply sm:w-[340px] sm:bg-green-300/50;
  box-shadow: 16px 16px 32px #b5b5b5;
}

.error {
  @apply absolute top-[15%] left-0 right-0 w-[300px] mx-auto text-red-900 bg-red-200/50 border border-red-300 rounded-md p-4 mb-4 backdrop-blur-sm z-50;
  @apply sm:w-[340px] sm:bg-red-300/50;
  box-shadow: 16px 16px 32px #b5b5b5;
}

.close-toast {
  @apply absolute right-0 top-0 font-semibold py-1 px-2 rounded-tl-md cursor-pointer;
}

.show-toast {
  animation: showToast 0.75s ease-out normal;
}

.hide-toast {
  @apply -top-[15%];
  animation: hideToast .75s ease-out normal;
}

@keyframes showToast {
  from {
    top: -15%;
  }
  to {
    top: 15%;
  }
}

@keyframes hideToast {
  from {
    top: 15%;
  }
  to {
    top: -15%;
  }
}

.error > ul,
.success > ul {
  @apply list-disc px-4;
}

/* Itens */
/* Títulos */
h1,
h2,
h3,
h4 {
  font-family: "Poppins", sans-serif;
  @apply text-center tracking-wide;
}

h1 {
  @apply text-4xl font-bold sm:text-6xl;
}

h2,
h3,
h4 {
  @apply font-semibold;
}

h2 {
  @apply text-2xl mb-3 sm:text-4xl;
}

h3 {
  @apply text-xl my-2 sm:text-2xl;
}

h4 {
  @apply text-lg my-2 sm:text-xl;
}

h1 + small {
  @apply text-sm text-center md:text-base lg:text-lg;
}

/* Links */
.link {
  @apply font-semibold tracking-wider py-1 px-3 rounded-md duration-300 transition-shadow;
}

.link:hover,
.link:active {
  box-shadow: inset 6px 6px 12px #b5b5b5, inset -6px -6px 12px #ffffff;
}

.link:focus {
  @apply ring-0;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  @apply text-primary rounded-md px-3 py-2 w-full focus:ring-offset-0 focus:ring-opacity-0 focus:outline-none invalid:text-red-900 invalid:bg-red-100 invalid:focus:text-red-900;
  background-color: #e0e0e0;
  box-shadow: inset 6px 6px 12px #b5b5b5, inset -6px -6px 12px #ffffff;
}

.form-line {
  @apply mb-2;
}

.form-line label {
  @apply mb-1 inline-block;
}

.required {
  @apply text-red-600 font-semibold align-middle ml-1;
}

.validation-error {
  @apply block text-sm text-red-900 font-semibold tracking-wide bg-red-50 w-full mt-1 py-1 px-3 rounded-md transition-all duration-300 invisible;
  box-shadow: inset 6px 6px 12px #b5b5b5, inset -6px -6px 12px #ffffff;
}

.intercalado {
  @apply bg-gray-200 rounded-md;
}

/* Tables */
table {
  @apply table-auto border-separate tracking-wide text-xs md:text-base;
  border-spacing: 0;
}

.tabulator {
  @apply w-full tracking-wide text-xs md:text-base select-none border border-primary !important;
}

th {
  @apply font-medium tracking-wider;
  @apply border-r border-b border-gray-300;
  @apply bg-primary text-light p-4 lg:py-3 lg:px-4;
}

.tabulator-col {
  @apply font-medium tracking-wider border-gray-300 bg-primary text-light capitalize !important;
}

td {
  @apply bg-gray-100;
  @apply border-r border-b border-gray-300;
  @apply p-1 md:py-2 md:px-3;
}

.tabulator-row-odd {
  @apply bg-gray-100 !important;
}

.tabulator-cell {
  @apply border-b border-r border-gray-300 py-1 md:py-2 !important;
}

thead tr:first-child th:last-child {
  @apply border-r-0;
}

tbody tr td:last-child {
  @apply border-r-0;
}

.tabulator-row-even {
  background-color: rgb(231, 239, 248) !important;
}

.inativa > .tabulator-cell,
.inativa td {
  @apply text-gray-600 line-through !important;
}

th.auditado {
  @apply bg-darkAccent;
}

.auditado {
  @apply font-bold bg-[#C7ECDF];
}

/* Toggle */
input[type="checkbox"].toggle {
  @apply opacity-0 absolute left-[-9000px];
}

input[type="checkbox"].toggle + label {
  @apply relative flex items-center cursor-pointer;
}

input[type="checkbox"].toggle + label::before {
  @apply bg-gray-500 mr-2 transition ease-in-out;
  content: "";
  width: 2rem;
  height: 0.7rem;
  border-radius: 1rem;
}

input[type="checkbox"].toggle + label::after {
  @apply absolute left-0 bg-gray-200 transition ease-in-out;
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 1rem;
}

input[type="checkbox"].toggle + label:focus {
  @apply outline-none ring-2 ring-accent;
}

input[type="checkbox"].toggle:checked + label::before {
  @apply bg-darkAccent;
}

input[type="checkbox"].toggle:checked + label::after {
  @apply bg-accent;
  transform: translateX(1rem);
}

/* Buttons */
.button {
  @apply font-semibold tracking-wider px-4 py-2 border border-transparent rounded-md transition-colors duration-300;
  box-shadow: 6px 6px 12px #b5b5b5, -6px -6px 12px #ffffff;
}

.button-primary {
  @apply text-light;
  background: linear-gradient(145deg, #054595, #0552b1);
  box-shadow: 8px 8px 16px #b5b5b5, -8px -8px 16px #ffffff;
}

.button-primary:hover {
  @apply text-light transition-colors duration-100;
  background: linear-gradient(145deg, #0552b1, #054595);
}

.button-primary:active {
  @apply text-primary;
  background: #e0e0e0;
  box-shadow: inset 6px 6px 12px #b5b5b5, inset -6px -6px 12px #ffffff;
}

.button-secondary {
  @apply text-primary border-solid border border-primary;
}

.button-secondary:hover {
  @apply border-darkPrimary text-darkPrimary;
}

.button-tertiary {
  @apply text-primary;
}

.button-tertiary:hover {
  @apply text-darkPrimary;
}

.button:disabled,
.button:disabled:hover {
  @apply bg-gray-300 border-gray-700 text-gray-400 filter-none shadow-none cursor-not-allowed;
}

.limpa-busca {
  @apply absolute top-0 right-0 w-12 h-full rounded-md transition-all duration-300;
  background: url("../img/delete.svg") no-repeat center;
}

.limpa-busca:hover {
  background: url("../img/delete-hover.svg") no-repeat center;
}

.limpa-busca:active,
.limpa-busca:focus,
.limpa-busca:focus-within,
.limpa-busca:focus-visible {
  @apply ring-offset-0 scale-95;
}

.senha-olho {
  @apply absolute top-0 right-0 w-12 h-10 box-content border border-transparent rounded-md transition-all duration-300;
  background: url("../img/eye.svg") no-repeat center;
}

.senha-olho:hover {
  background: url("../img/eye-hover.svg") no-repeat center;
}

.senha-olho:active,
.senha-olho:focus,
.senha-olho:focus-within,
.senha-olho:focus-visible {
  @apply ring-offset-0 scale-95;
}

.senha-olho-riscado {
  background: url("../img/eye-off.svg") no-repeat center;
}

.senha-olho-riscado:hover {
  background: url("../img/eye-off-hover.svg") no-repeat center;
}
/* Images */
img {
  @apply h-fit;
  /* background-color: #d1d5db */
}

.img-filter {
  filter: var(--bg-gray-50-shadow-filter);
}

/* Page Load animation */
.loader-wrapper {
  @apply flex justify-center items-center fixed top-[-50vh] left-[-50vw] bg-gray-100 w-[200vw] h-[200vh] rounded-[50%] filter backdrop-blur-[2px] z-[1000];
}

.loader {
  animation: ping 1.3s ease-in-out infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-3-11 10:1:15
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation ping
 * ----------------------------------------
 */
@keyframes ping {
  0% {
    transform: scale(0.2);
    opacity: 0.8;
  }
  80% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* Modal de saída */
.logout-modal {
  @apply w-[50ch] bg-gray-100 py-4 px-8 rounded-md;
  box-shadow: var(--bg-gray-50-shadow-box);
}

.logout-modal::backdrop {
  @apply bg-gray-600/90 backdrop-blur-sm;
}

.logout-modal-buttons {
  @apply flex justify-end items-center gap-4 mt-8 pb-4;
}

/* Gráfico do dashboard */
#dashboardChart {
  filter: var(--bg-gray-50-shadow-filter);
}

/* Floating Menu */
.menu {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 6rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  color: rgb(var(--light));
}

.menu-open-button,
.menu-item {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: rgb(var(--accent));
  cursor: pointer;
  justify-content: center;
  align-items: center;
  box-shadow: var(--bg-gray-50-shadow-box);
}

#menu-open:checked + .menu-open-button,
.menu-item:hover,
.menu-item:focus {
  background-color: rgb(var(--dark-accent));
  outline: 0;
}

.menu-open-button {
  display: flex;
  z-index: 2;
}

.menu-open-button::before {
  content: "";
  animation: ring-1 5s linear infinite forwards;
  position: fixed;
  bottom: 1rem;
  right: 2rem;
  width: 4rem;
  height: 4rem;
  background-color: rgb(var(--accent));
  border-radius: 50%;
  z-index: -10;
}

.menu-open-button::after {
  content: "";
  animation: ring-2 5s linear infinite both;
  position: fixed;
  bottom: 1rem;
  right: 2rem;
  width: 4rem;
  height: 4rem;
  background-color: rgb(var(--accent));
  border-radius: 50%;
  z-index: -10;
}

#menu-open:checked + .menu-open-button::before {
  background-color: rgb(var(--dark-accent));
}

#menu-open:checked + .menu-open-button::after {
  background-color: rgb(var(--dark-accent));
}

.menu-item {
  position: absolute;
  bottom: 0;
  z-index: 1;
}

.icon {
  width: 24px;
  height: 24px;
}

.icon svg {
  display: unset;
}

.hamburger {
  width: 32px;
  height: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hamburger-line {
  width: 32px;
  height: 3px;
  background-color: rgb(var(--light));
  border-radius: 4px;
  transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
}

.hamburger-line:nth-child(1) {
  transform: translateY(-7px);
}

.hamburger-line:nth-child(3) {
  transform: translateY(7px);
}

#menu-open:checked + .menu-open-button .hamburger-line:nth-child(1) {
  transform: translateY(3px) rotate(45deg);
}

#menu-open:checked + .menu-open-button .hamburger-line:nth-child(2) {
  opacity: 0;
}

#menu-open:checked + .menu-open-button .hamburger-line:nth-child(3) {
  transform: translateY(-3px) rotate(-45deg);
}

.menu-item-1 {
  width: 3rem;
  height: 3rem;
  opacity: 0;
  transform: translateY(-810%) scale(0);
  transition: all 100ms ease-in-out;
}

.menu-item-2 {
  width: 3rem;
  height: 3rem;
  opacity: 0;
  transform: translateY(-680%) scale(0);
  transition: all 100ms ease-in-out;
}

.menu-item-3 {
  width: 3rem;
  height: 3rem;
  opacity: 0;
  transform: translateY(-550%) scale(0);
  transition: all 100ms 100ms ease-in-out;
}

.menu-item-4 {
  width: 3rem;
  height: 3rem;
  opacity: 0;
  transform: translateY(-420%) scale(0);
  transition: all 100ms 200ms ease-in-out;
}

.menu-item-5 {
  width: 3rem;
  height: 3rem;
  opacity: 0;
  transform: translateY(-290%) scale(0);
  transition: all 100ms 300ms ease-in-out;
}

.menu-item-6 {
  width: 3rem;
  height: 3rem;
  opacity: 0;
  transform: translateY(-160%) scale(0);
  transition: all 100ms 300ms ease-in-out;
}

#menu-open:checked ~ .menu-item-1,
.menu-open-button:focus .menu-item-1 {
  opacity: 1;
  transform: translateY(-810%) scale(1);
  transition: all 100ms 400ms ease-in-out;
}

#menu-open:checked ~ .menu-item-2,
.menu-open-button:focus .menu-item-2 {
  opacity: 1;
  transform: translateY(-680%) scale(1);
  transition: all 100ms 300ms ease-in-out;
}

#menu-open:checked ~ .menu-item-3,
.menu-open-button:focus .menu-item-3 {
  opacity: 1;
  transform: translateY(-550%) scale(1);
  transition: all 100ms 200ms ease-in-out;
}

#menu-open:checked ~ .menu-item-4,
.menu-open-button:focus .menu-item-4 {
  opacity: 1;
  transform: translateY(-420%) scale(1);
  transition: all 100ms 100ms ease-in-out;
}

#menu-open:checked ~ .menu-item-5,
.menu-open-button:focus .menu-item-5 {
  opacity: 1;
  transform: translateY(-290%) scale(1);
  transition: all 100ms ease-in-out;
}

#menu-open:checked ~ .menu-item-6,
.menu-open-button:focus .menu-item-6 {
  opacity: 1;
  transform: translateY(-160%) scale(1);
  transition: all 100ms ease-in-out;
}

.menu-item[class*="hint--"] {
  @apply absolute;
}

@media (min-width: 768px) {
  .menu {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
  }

  .menu-open-button::before {
    position: fixed;
    bottom: 2rem;
    right: 3rem;
  }

  .menu-open-button::after {
    position: fixed;
    bottom: 2rem;
    right: 3rem;
  }
}

@keyframes ring-1 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  60% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes ring-2 {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  80% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* Modal de ajuda */
/* modal open|close controller */
.help-modal {
  @apply w-11/12 bg-gray-100 p-0 rounded-md md:w-3/4 xl:w-1/2;
  box-shadow: var(--bg-gray-50-shadow-box);
}

.help-modal::backdrop {
  @apply bg-gray-600/90 backdrop-blur-sm;
}

.help-modal-close {
  @apply text-[2rem] leading-none px-2 cursor-pointer md:text-5xl md:px-4;
}

.help-modal-nav {
  @apply flex justify-between my-2 px-4 md:px-8;
}

[class*="-slide"] {
  @apply bg-accent text-light text-[2rem] leading-none pb-1 px-3 rounded-md cursor-pointer md:text-5xl md:pb-2 md:px-5;
}

.help-modal-nav > .disabled {
  @apply bg-gray-300 text-gray-400 cursor-not-allowed;
}

.help-modal-content {
  @apply w-full pb-8 px-4 md:pb-12 md:px-8;
}

.help-modal-buttons {
  @apply flex justify-end items-center gap-4 mt-8 pb-4;
}

/* Dark Mode */
html.dark {
  /* Variáveis */
  --primary: 0 127 206;
  --background: 13 13 13;
  --text: 249 250 251;
  --light: 240 240 240;
  --accent: 2 182 108;
  --dark-accent: 0 99 28;
  --error: 178 41 41;
  --success: 28 116 63;
  background-color: rgb(var(--background));
}

html.dark * {
  box-shadow: unset;
  filter: unset;
}

/* Propriedades especiais */
/* Change Autocomplete styles in Chrome*/
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus,
html.dark textarea:-webkit-autofill,
html.dark textarea:-webkit-autofill:hover,
html.dark textarea:-webkit-autofill:focus,
html.dark select:-webkit-autofill,
html.dark select:-webkit-autofill:hover,
html.dark select:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(var(--text));
  transition: background-color 5000s ease-in-out 0s;
}

html.dark ::selection {
  @apply bg-light text-primary;
}

/* Seções */
html.dark header {
  background-color: rgb(5, 77, 165);
}

html.dark footer {
  @apply border-t-gray-700;
}

html.dark .success {
  @apply bg-green-100;
  color: rgb(var(--success));
  border: 1px solid rgb(var(--success));
}

html.dark .error {
  @apply bg-red-200;
  color: rgb(var(--error));
  border: 1px solid rgb(var(--error));
}

/* Itens */
/* Títulos */
html.dark h1 + small {
  @apply text-gray-400;
}

/* Forms */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="search"],
html.dark select,
html.dark textarea {
  @apply text-primary bg-gray-900 border border-gray-700 focus:bg-gray-700 focus:text-text focus:border-primary invalid:text-red-900 invalid:bg-red-100 invalid:border invalid:border-red-500 invalid:focus:text-red-900 invalid:focus:bg-red-100 invalid:focus:border invalid:focus:border-red-500;
}

html.dark .required {
  color: rgb(var(--error));
}

html.dark .validation-error {
  @apply bg-red-200;
  color: rgb(var(--error));
  border: 1px solid rgb(var(--error));
}

html.dark .intercalado {
  @apply bg-gray-700;
}

/* Tables */
html.dark .tabulator-table {
  color: rgb(var(--text)) !important;
}

html.dark .tabulator-row-odd {
  @apply bg-gray-800 !important;
}

html.dark .tabulator-cell {
  @apply border-gray-600 !important;
}

html.dark .tabulator-row-even {
  @apply bg-gray-700 !important;
}

html.dark .inativa > .tabulator-cell {
  @apply text-gray-400 line-through !important;
}

html.dark th.auditado {
  @apply bg-darkAccent;
}

html.dark .auditado {
  @apply bg-[#0A2E20];
}

/* Buttons */
html.dark .button-secondary:hover {
  @apply border-primary text-primary;
}

html.dark .button-tertiary:hover {
  @apply text-primary;
}

html.dark .limpa-busca:hover {
  background: url("../img/delete-dark-hover.svg") no-repeat center;
}

html.dark .senha-olho:hover {
  background: url("../img/eye-dark-hover.svg") no-repeat center;
}

html.dark .senha-olho-riscado:hover {
  background: url("../img/eye-off-dark-hover.svg") no-repeat center;
}

/* Page Load animation */
html.dark .loader-wrapper {
  @apply bg-gray-900;
}

/* Modal de saída e de ajuda */
html.dark .logout-modal,
html.dark .help-modal {
  background-color: rgb(var(--background));
  color: rgb(var(--text));
}

html.dark .logout-modal::backdrop,
html.dark .help-modal::backdrop {
  @apply bg-gray-600/90 backdrop-blur-sm;
}