85 lines
1.9 KiB
CSS
85 lines
1.9 KiB
CSS
|
@import "tailwindcss";
|
||
|
|
|
||
|
|
@theme {
|
||
|
|
--color-primary-50: #f0f9ff;
|
||
|
|
--color-primary-100: #e0f2fe;
|
||
|
|
--color-primary-200: #bae6fd;
|
||
|
|
--color-primary-300: #7dd3fc;
|
||
|
|
--color-primary-400: #38bdf8;
|
||
|
|
--color-primary-500: #0ea5e9;
|
||
|
|
--color-primary-600: #0284c7;
|
||
|
|
--color-primary-700: #0369a1;
|
||
|
|
--color-primary-800: #075985;
|
||
|
|
--color-primary-900: #0c4a6e;
|
||
|
|
}
|
||
|
|
|
||
|
|
:root {
|
||
|
|
font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||
|
|
line-height: 1.5;
|
||
|
|
font-weight: 400;
|
||
|
|
|
||
|
|
color-scheme: light;
|
||
|
|
color: #1f2937;
|
||
|
|
/* text-gray-800 - oscuro para fondos claros */
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
|
||
|
|
font-synthesis: none;
|
||
|
|
text-rendering: optimizeLegibility;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
display: flex;
|
||
|
|
min-width: 320px;
|
||
|
|
min-height: 100vh;
|
||
|
|
color: #1f2937;
|
||
|
|
}
|
||
|
|
|
||
|
|
#root {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
@layer components {
|
||
|
|
.card {
|
||
|
|
@apply bg-white rounded-lg shadow-md p-6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary {
|
||
|
|
@apply bg-primary-600 hover:bg-primary-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-secondary {
|
||
|
|
@apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg transition-colors duration-200;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input-field {
|
||
|
|
@apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent text-gray-900 bg-white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.label-text {
|
||
|
|
@apply block text-sm font-medium text-gray-700 mb-1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Estilos adicionales para inputs, selects y textareas */
|
||
|
|
input,
|
||
|
|
select,
|
||
|
|
textarea {
|
||
|
|
color: #111827 !important;
|
||
|
|
/* text-gray-900 - texto oscuro */
|
||
|
|
background-color: white !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
input::placeholder,
|
||
|
|
textarea::placeholder {
|
||
|
|
color: #9ca3af;
|
||
|
|
/* text-gray-400 - placeholder gris claro */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Asegurar que los options en select sean legibles */
|
||
|
|
select option {
|
||
|
|
color: #111827;
|
||
|
|
background-color: white;
|
||
|
|
}
|