@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

body {
    font-family: 'Inter', sans-serif;
    background-color: #f7fafc;
    color: #2d3748;
    line-height: 1.6;
}

.titulo-principal {
    @apply text-3xl font-bold mb-6 text-center;
}

.boton-abrir {
    @apply flex justify-end mb-6;
}

.btn-abrir {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300;
}

.modal {
    @apply hidden fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50;
    animation: fadeIn 0.3s ease-in-out;
}

.modal-content {
    @apply bg-white rounded-lg shadow-lg p-8 relative max-w-lg w-full;
    animation: slideIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close {
    @apply text-gray-500 hover:text-gray-800 absolute top-2 right-2 cursor-pointer;
    font-size: 1.5rem;
    font-weight: bold;
}

.grid-formulario {
    @apply grid grid-cols-1 gap-4 md:grid-cols-2;
}

.label-campo {
    @apply font-semibold mb-2 block;
}

.input-campo {
    @apply shadow-sm rounded border border-gray-300 p-2 w-full focus:ring-indigo-500 focus:border-indigo-500;
}

.boton-guardar {
    @apply flex justify-end mt-4;
}

.btn-guardar {
    @apply bg-green-500 text-white font-bold py-2 px-4 rounded shadow-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300;
}

.titulo-secundario {
    @apply text-2xl font-bold mb-4 mt-6;
}

.tabla-movimientos {
    @apply w-full border-collapse bg-white shadow-sm;
}

.encabezado-tabla {
    @apply bg-gray-200 font-semibold p-4 border-b-2 border-gray-300 text-left;
}

.celda-tabla {
    @apply p-4 border-b border-gray-300;
}

.btn-eliminar {
    @apply bg-red-500 text-white font-bold py-1 px-2 rounded hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300;
}

/* Estilos para el menú contextual */
.context-menu {
    @apply hidden absolute z-50 bg-white shadow-lg rounded-lg p-2;
}

.context-menu button {
    @apply block w-full px-4 py-2 text-left text-red-500 hover:bg-gray-100 focus:outline-none;
}