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: 31 33 36;
  --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));
}

/* Tables Scrollbar Styling Start */
div::-webkit-scrollbar {
  height: 0.75em;
  width: 0.75rem;
}
/* Track */
div::-webkit-scrollbar-track {
  @apply bg-primary/10;
  border-radius: 5px;
}
/* Handle */
div::-webkit-scrollbar-thumb {
  @apply bg-primary/40;
  border-radius: 5px;
}
/* Handle on hover */
div::-webkit-scrollbar-thumb:hover {
  @apply bg-primary/50;
}

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

html {
  @apply bg-gray-50 text-text scroll-smooth h-full;
  font-family: "Jost", sans-serif;
}

/* Seções */
header {
  @apply flex flex-col items-center justify-center bg-primary h-[250px] p-4 select-none md:h-[300px];
}

main {
  @apply w-full;
}

footer {
  @apply flex flex-col justify-center items-center text-center w-full h-[300px] p-4 mx-auto border-t-2 border-t-gray-300 md:w-11/12;
}

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

.card {
  @apply flex justify-center mx-auto py-8;
}

.success {
  @apply text-green-900 bg-green-100 border border-green-300 rounded-md p-4 mb-4;
}

.error {
  @apply text-red-900 bg-red-100 border border-red-500 rounded-md p-4 mb-4;
}

.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-light text-4xl font-bold sm:text-6xl;
}

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

h2 {
  @apply text-2xl mt-2 mb-6 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 text-gray-300 md:text-base lg:text-lg;
}

/* Links */
.reset-password {
  @apply relative font-semibold text-primary tracking-wider px-3 overflow-hidden transition-colors duration-300 z-[1];
}

.reset-password:hover,
.reset-password:active {
  @apply text-light transition-colors duration-300 no-underline;
}

.reset-password::before {
  content: "";
  @apply absolute left-0 top-0 w-full h-full bg-primary rounded-sm z-[-1] translate-x-[-101%] transition-transform duration-300 ease-in-out;
}

.reset-password:hover::before,
.reset-password:active::before {
  @apply translate-x-0 transition-transform duration-300 ease-in-out;
}

.reset-password:focus {
  @apply ring-0;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select {
  @apply text-primary bg-gray-100 border border-gray-300 rounded-md px-3 py-1 w-full focus:bg-gray-50 focus:border-primary focus:ring-offset-0 focus:ring-opacity-0 focus:outline-none 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;
}

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

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

.validation-error {
  @apply text-sm text-red-900 font-semibold tracking-wide bg-red-50 border border-red-200 -mt-1 pt-2 px-3 rounded-b-md transition-all duration-300;
}

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

/* Tables */
table {
  @apply table-auto border-collapse text-xs md:text-base;
}

td,
th {
  @apply bg-clip-padding;
}

th {
  @apply font-medium tracking-wider;
}

td {
  @apply bg-gray-100;
}

thead tr:first-child th:not(:first-child):not(:last-child) {
  @apply border-x border-x-gray-300;
}

thead tr:nth-child(2n) th {
  @apply border-t border-x border-gray-300;
}

tbody tr td:not(:first-child):not(:last-child) {
  @apply border border-gray-300;
}

tbody tr td:first-child,
tbody tr td:last-child {
  @apply border-y border-gray-300;
}

tbody tr:first-child td {
  @apply border-t-0 !important;
}

thead tr th {
  @apply bg-primary text-light p-4 lg:py-3 lg:px-4;
}

tbody tr td {
  @apply p-1 sm:py-2 sm:px-3;
}

.zebrado {
  background-color: rgb(231, 239, 248);
}

.inativa td {
  @apply bg-gray-400 text-gray-300 line-through;
}

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 rounded-md transition-all duration-300;
}

.button-primary {
  @apply text-light bg-accent;
}

.button-primary:hover {
  @apply bg-darkAccent;
}

.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:hover {
  @apply transition-all duration-300 -translate-y-1;
}

.button:active {
  @apply transform scale-95;
}

.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-8 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 select {
  @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 td {
  @apply bg-gray-800;
}

html.dark thead tr:first-child th:not(:first-child):not(:last-child) {
  @apply border-x border-x-gray-600;
}

html.dark thead tr:nth-child(2n) th {
  @apply border-gray-600;
}

html.dark tbody tr td:not(:first-child):not(:last-child) {
  @apply border-gray-600;
}

html.dark tbody tr td:first-child,
html.dark tbody tr td:last-child {
  @apply border-gray-600;
}

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

html.dark .inativa td {
  @apply bg-gray-500;
}

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

html.dark .auditado {
  @apply bg-accent/20;
}

/* 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;
}