/* Estilos globales y transiciones para un look más moderno */

/* Transiciones suaves para botones e inputs */
button, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"] {
    transition: all 0.2s ease-in-out;
}

/* Estilos para botones de acción con hover */
button {
    @apply focus:ring-opacity-50;
}

/* Transiciones para filas de tabla */
tbody tr {
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.2s ease-in-out;
    @apply border-b border-slate-100 last:border-b-0;
}

tbody tr:hover {
    transform: scale(1.005);
    @apply shadow-md bg-slate-50;
}

/* Ajustes sutiles para inputs/selects */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    @apply focus:border-indigo-400 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
}

/* Fondo del body con Tailwind (ej: slate-100 o gray-50) */
body {
    @apply bg-slate-100;
}

/* --- Estilos específicos de componentes --- */

/* Login Screen */
#loginScreen .flex.w-full {
    @apply max-w-4xl rounded-xl shadow-2xl;
}

#loginScreen .bg-gradient-to-br {
    @apply from-indigo-700 to-blue-600;
}

#loginScreen .text-indigo-800 {
    @apply text-indigo-700;
}

#loginScreen input {
    @apply border-slate-300 rounded-lg;
}

#loginScreen button[type="submit"] {
    @apply bg-indigo-600 hover:bg-indigo-700 shadow-md hover:shadow-xl;
}

/* Navbar */
nav.bg-white {
    @apply shadow-sm border-b border-slate-200;
}

nav a.text-indigo-700 {
    @apply flex items-center font-bold;
}

nav button {
    @apply rounded-lg font-semibold;
}

#btnCambiarContrasena {
    @apply text-slate-600 hover:text-indigo-700 px-3 py-2;
}

#btnNuevoCliente {
    @apply bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 shadow-md;
}

#btnLogout {
    @apply text-rose-600 hover:text-rose-800 px-3 py-2;
}

/* Stat Cards (Placeholders) */
main .grid > div {
    @apply bg-white rounded-xl shadow-sm border border-slate-200 p-6;
}

/* Filter Bar */
#filter-bar {
    @apply bg-white rounded-xl shadow-sm border border-slate-200 p-5;
}

#filter-bar .filter-button {
    @apply bg-slate-200 text-slate-700 rounded-lg hover:bg-slate-300 text-sm font-medium;
}

#filter-bar .filter-button.active {
    @apply bg-indigo-500 text-white hover:bg-indigo-600;
}

#filter-bar input[type="number"] {
    @apply border-slate-300 rounded-lg;
}

#filter-bar button#filterByDays {
    @apply bg-indigo-600 hover:bg-indigo-700 text-white shadow-sm;
}

/* Table */
table {
    @apply min-w-full leading-normal;
}

table thead tr {
    @apply bg-slate-50 border-b border-slate-200 text-slate-600 uppercase text-xs font-semibold tracking-wider;
}

table tbody tr td {
    @apply py-3 px-6;
}

table tbody tr td div.text-xs {
    @apply text-slate-600;
}

tbody button.text-indigo-600 {
    @apply text-indigo-500 hover:text-indigo-700;
}

tbody button.text-red-600 {
    @apply text-rose-500 hover:text-rose-700;
}

/* Modales */
.modal-container {
    @apply rounded-xl shadow-lg border border-slate-200;
}

.modal-content p.font-bold {
    @apply text-indigo-700;
}

.modal-content label {
    @apply text-slate-700 font-semibold;
}

.modal-content input {
    @apply border-slate-300 rounded-lg;
}

.modal-content button[type="submit"] {
    @apply bg-indigo-600 hover:bg-indigo-700 shadow-md;
}
.modal-content button.bg-emerald-600 {
    @apply bg-emerald-600 hover:bg-emerald-700;
}

.modal-content button.bg-slate-200 {
    @apply text-slate-700 hover:bg-slate-300;
}