@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

.dark {
  --background: #0f172a;
  --foreground: #f8fafc;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Estilos para placeholders más visibles */
::placeholder {
  color: #6b7280 !important; /* text-gray-500 */
  opacity: 1 !important;
}

/* Estilos específicos para inputs en modales */
input::placeholder,
textarea::placeholder,
select::placeholder {
  color: #374151 !important; /* text-gray-700 - más oscuro */
  font-weight: 400;
}

/* Estilos para inputs con focus */
input:focus::placeholder,
textarea:focus::placeholder,
select:focus::placeholder {
  color: #9ca3af !important; /* text-gray-400 - más claro cuando está enfocado */
}

/* Estilos para inputs deshabilitados */
input:disabled::placeholder,
textarea:disabled::placeholder,
select:disabled::placeholder {
  color: #d1d5db !important; /* text-gray-300 */
}

/* Estilos para modo oscuro */
.dark ::placeholder {
  color: #9ca3af !important; /* text-gray-400 */
}

.dark input::placeholder,
.dark textarea::placeholder,
.dark select::placeholder {
  color: #d1d5db !important; /* text-gray-300 - más claro en modo oscuro */
}

.dark input:focus::placeholder,
.dark textarea:focus::placeholder,
.dark select:focus::placeholder {
  color: #9ca3af !important; /* text-gray-400 */
}

.dark input:disabled::placeholder,
.dark textarea:disabled::placeholder,
.dark select:disabled::placeholder {
  color: #6b7280 !important; /* text-gray-500 */
}