/* Fundo escuro semitransparente */
.bg-black-50 {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Efeito de desfoque no fundo */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* COR TEAL */
.text-white {
  color: #ffffff;
}

.text-teal {
  color: #0d9488;
}

.text-teal-900 {
  color: #134e4a;
}

.bg-teal-100 {
  background-color: #ccfbf1;
}

.bg-teal-500 {
  background-color: #14b8a6;
}

.bg-teal-600 {
  background-color: #0d9488;
}

.bg-teal-700 {
  background-color: #0f766e;
}

.hover\:bg-teal-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(15, 118, 110);
}

.border-teal {
  border-color: #38b2ac;
}

/* teal 500 */

/* COR CYAN */
.bg-cyan-100 {
  background-color: #cffafe;
}

.bg-cyan-600 {
  background-color: #0891b2;
}

.text-cyan-600 {
  color: #0891b2
}

/* ESMERALD */
.bg-esmerald-500 {
  background-color: #10b981;
}

.text-esmerald-500 {
  color: #10b981;
}

.bg-esmerald-600 {
  background-color: #059669;
}

.text-esmerald-600 {
  color: #059669;
}

/* Esconde o checkbox real */
.toggle-input {
  display: none;
}

/* Corpo do switch */
.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background-color: #d1d5db;
  /* gray-300 */
  border-radius: 9999px;
  transition: background-color 0.3s ease;
}

/* Bolinha */
.toggle-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Quando estiver marcado (ativo) */
.toggle-input:checked+.toggle-switch {
  background-color: #0d9488;
  /* teal-600 */
}

/* Move a bolinha para a direita */
.toggle-input:checked+.toggle-switch::before {
  transform: translateX(20px);
}

/* Remove o contorno padrão do navegador */
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Cria o anel (ring) em volta do elemento focado */
.focus\:ring-2:focus {
  box-shadow: 0 0 0 2px var(--tw-ring-color, rgb(16 185 129));
  /* default emerald-500 */
}

/* Define a cor do anel */
.focus\:ring-emerald-500:focus {
  --tw-ring-color: rgb(16 185 129);
  /* emerald-500 */
}

.rounded-r-xl {
  border-top-right-radius: 0.75rem
    /* 12px */
  ;
  border-bottom-right-radius: 0.75rem
    /* 12px */
  ;
}

.rounded-l-xl {
  border-top-left-radius: 0.75rem
    /* 12px */
  ;
  border-bottom-left-radius: 0.75rem
    /* 12px */
  ;
}

/* ===========================
   PLACEHOLDER SIZE CLASSES
   =========================== */

.placeholder\:text-xs::placeholder {
  font-size: 0.75rem;
  /* text-xs */
  line-height: 1rem;
}

.placeholder\:text-sm::placeholder {
  font-size: 0.875rem;
  /* text-sm */
  line-height: 1.25rem;
}

.placeholder\:text-base::placeholder {
  font-size: 1rem;
  /* text-base */
  line-height: 1.5rem;
}

.placeholder\:text-lg::placeholder {
  font-size: 1.125rem;
  /* text-lg */
  line-height: 1.75rem;
}

.placeholder\:text-xl::placeholder {
  font-size: 1.25rem;
  /* text-xl */
  line-height: 1.75rem;
}

/* ===========================
   PLACEHOLDER COLOR CLASSES
   =========================== */

.placeholder\:text-gray-400::placeholder {
  color: rgb(156 163 175);
  /* gray-400 */
}

.placeholder\:text-gray-500::placeholder {
  color: rgb(107 114 128);
  /* gray-500 */
}

.placeholder\:text-gray-600::placeholder {
  color: rgb(75 85 99);
  /* gray-600 */
}

/* ===========================
   PLACEHOLDER STYLE CLASSES
   =========================== */

.placeholder\:italic::placeholder {
  font-style: italic;
}

.placeholder\:font-medium::placeholder {
  font-weight: 500;
}

.placeholder\:uppercase::placeholder {
  text-transform: uppercase;
}

.space-y-5> :not([hidden])~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem
      /* 20px */
      * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem
      /* 20px */
      * var(--tw-space-y-reverse));
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:shadow-none:focus {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.text-yellow-400 {
  color: #fbbf24;
}

.bg-amber-500 {
  background-color: #f59e0b;
}

.text-amber-600 {
  color: #d97706;
}

.text-amber-400 {
  color: #fbbf24;
}

.max-h-\[80vh\] {
    max-height: 80vh;
}

.max-w-3xl {
    max-width: 48rem /* 768px */;
}