/* static/css/custom.css */

body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}

/* Estilos para mensajes de Django */
.messages { list-style: none; padding: 0; margin: 1rem 0; }
.messages li { padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.375rem; font-size: 0.9rem; }
.messages .success { background-color: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.messages .info { background-color: #e0f2fe; color: #1e40af; border-color: #bfdbfe; }
.messages .warning { background-color: #fffbeb; color: #b45309; border-color: #fcd34d; }
.messages .error { background-color: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* Estilos para botones personalizados */
.btn-primary, .btn-secondary, .btn-light, .btn-action { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; transition: all 0.2s ease-in-out; text-decoration: none; }
.btn-primary { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); background-color: #4f46e5; color: white; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); background-color: #4338ca; }
.btn-secondary { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); background-color: #f3f4f6; color: #374151; }
.btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1); background-color: #e5e7eb; }
.btn-light { padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 500; border: 1px solid #d1d5db; background-color: #f9fafb; color: #374151; }
.btn-light:hover { background-color: #e5e7eb; transform: translateY(-1px); }

/* Estilos para botones de acción en tablas/detalles */
.btn-action { padding: 0.75rem 1rem; font-size: 0.95rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); width: 100%; color: white; }
.btn-action:hover { transform: translateY(-2px); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); }

/* Estilos para tarjetas de métodos de pago */
.payment-method-card:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); }