/*
 * Platónico - Componentes UI Reutilizables
 * Sistema de Diseño Moderno para POS de Restaurantes
 * 
 * Paleta de colores Platónico (comida casera, calidez, elegancia rústica):
 * - Primary: #7A1E2C (rojo vino)
 * - Secondary: #A67C52 (marrón claro)  
 * - Background: #F2E8D5 (beige claro)
 * - Text: #5C3A21 (marrón oscuro)
 * - Accent: #D9BBAE
 * - Dark: #2B2B2B
 12:  */

/* ========== BOTONES ========== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-primary {
    background-color: var(--color-primary-500);
    color: white;
}

.btn-primary:hover {
    background-color: var(--color-primary-600);
}

.btn-secondary {
    background-color: var(--color-secondary-500);
    color: white;
}

.btn-secondary:hover {
    background-color: var(--color-secondary-600);
}

.btn-outline {
    border: 2px solid var(--color-primary-500);
    color: var(--color-primary-500);
    background-color: transparent;
}

.btn-outline:hover {
    background-color: var(--bg-main);
}

.btn-ghost {
    background-color: transparent;
    color: var(--text-primary);
}

.btn-ghost:hover {
    background-color: rgba(166, 124, 82, 0.1);
}

.btn-danger {
    background-color: #B84A4A;
    color: white;
}

.btn-danger:hover {
    background-color: #8a3a3a;
}

.btn-sm {
    @apply px-3 py-1.5 text-sm rounded-md;
}

.btn-lg {
    @apply px-6 py-3 text-lg rounded-xl;
}

.btn-icon {
    @apply p-2 rounded-lg;
}

/* Variantes de tamaño de botón */
.btn-xs {
    @apply px-2 py-1 text-xs rounded;
}

/* ========== CARDS ========== */

.card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100;
    @apply transition-all duration-200;
}

.card-hover:hover {
    @apply shadow-md border-gray-200 -translate-y-0.5;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-100;
}

.card-body {
    @apply px-6 py-4;
}

.card-footer {
    @apply px-6 py-4 border-t border-gray-100 bg-gray-50 rounded-b-xl;
}

/* Card de estadísticas */
.stat-card {
    @apply bg-white rounded-xl p-6 shadow-sm border border-gray-100;
    @apply transition-all duration-300;
}

.stat-card:hover {
    @apply shadow-lg -translate-y-1;
}

.stat-card-primary {
    @apply bg-gradient-to-br from-emerald-500 to-emerald-600 text-white;
}

.stat-card-secondary {
    @apply bg-gradient-to-br from-orange-400 to-orange-500 text-white;
}

.stat-card-info {
    @apply bg-gradient-to-br from-blue-500 to-blue-600 text-white;
}

.stat-card-dark {
    @apply bg-gradient-to-br from-gray-700 to-gray-800 text-white;
}

/* ========== FORMULARIOS ========== */

.form-group {
    @apply mb-4;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1.5;
}

.form-input {
    @apply w-full px-4 py-2.5 rounded-lg border border-gray-300;
    @apply focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500;
    @apply transition-all duration-200;
    @apply placeholder-gray-400;
}

.form-input-error {
    @apply border-red-500 focus:ring-red-500 focus:border-red-500;
}

.form-select {
    @apply w-full px-4 py-2.5 rounded-lg border border-gray-300 bg-white;
    @apply focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500;
    @apply transition-all duration-200;
}

.form-checkbox {
    @apply h-4 w-4 text-emerald-600 rounded border-gray-300;
    @apply focus:ring-emerald-500;
}

.form-error {
    @apply mt-1 text-sm text-red-500;
}

.form-hint {
    @apply mt-1 text-sm text-gray-500;
}

/* ========== TABLAS ========== */

.table-container {
    @apply overflow-x-auto rounded-xl border border-gray-200;
}

.table {
    @apply w-full text-sm text-left;
}

.table thead {
    @apply bg-gray-50 text-gray-600 uppercase text-xs tracking-wider;
}

.table th {
    @apply px-6 py-3 font-semibold;
}

.table td {
    @apply px-6 py-4;
}

.table tbody tr {
    @apply border-b border-gray-100 last:border-b-0;
    @apply hover:bg-gray-50 transition-colors duration-150;
}

.table tbody tr:last-child {
    @apply border-b-0;
}

/* Tabla compact */
.table-compact th,
.table-compact td {
    @apply px-3 py-2;
}

/* ========== BADGES ========== */

.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
    @apply bg-emerald-100 text-emerald-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

.badge-info {
    @apply bg-blue-100 text-blue-800;
}

.badge-gray {
    @apply bg-gray-100 text-gray-800;
}

.badge-outline {
    @apply bg-transparent border;
}

.badge-outline-success {
    @apply border-emerald-500 text-emerald-600;
}

.badge-outline-warning {
    @apply border-yellow-500 text-yellow-600;
}

.badge-outline-danger {
    @apply border-red-500 text-red-600;
}

/* ========== ALERTAS ========== */

.alert {
    @apply px-4 py-3 rounded-lg border;
}

.alert-success {
    @apply bg-emerald-50 border-emerald-200 text-emerald-800;
}

.alert-warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-800;
}

.alert-danger {
    @apply bg-red-50 border-red-200 text-red-800;
}

.alert-info {
    @apply bg-blue-50 border-blue-200 text-blue-800;
}

/* ========== MODALES ========== */

.modal-backdrop {
    @apply fixed inset-0 bg-black/50 backdrop-blur-sm z-40;
}

.modal {
    @apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
    @apply w-full max-w-lg max-h-[90vh] overflow-y-auto;
    @apply bg-white rounded-2xl shadow-2xl z-50;
    @apply transition-all duration-300;
}

.modal-header {
    @apply px-6 py-4 border-b border-gray-100 flex items-center justify-between;
}

.modal-body {
    @apply px-6 py-4;
}

.modal-footer {
    @apply px-6 py-4 border-t border-gray-100 flex items-center justify-end gap-3;
}

/* ========== NAVEGACIÓN ========== */

.sidebar {
    @apply fixed left-0 top-0 h-full w-64 bg-white border-r border-gray-200;
    @apply flex flex-col z-30;
}

.sidebar-header {
    @apply px-6 py-5 border-b border-gray-100;
}

.sidebar-nav {
    @apply flex-1 px-3 py-4 overflow-y-auto;
}

.sidebar-link {
    @apply flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-600;
    @apply hover:bg-gray-50 hover:text-emerald-600 transition-colors duration-150;
}

.sidebar-link.active {
    @apply bg-emerald-50 text-emerald-600 font-medium;
}

.sidebar-link i {
    @apply text-lg;
}

/* ========== HEADER ========== */

.header {
    @apply fixed top-0 left-0 right-0 h-16 bg-white border-b border-gray-200;
    @apply flex items-center justify-between px-6 z-20;
}

.header-left {
    @apply flex items-center gap-4;
}

.header-right {
    @apply flex items-center gap-4;
}

/* ========== ESTADOS DE MESA ========== */

.table-status {
    @apply inline-flex items-center gap-2 px-3 py-1 rounded-full text-sm font-medium;
}

.table-available {
    @apply bg-emerald-100 text-emerald-700;
}

.table-occupied {
    @apply bg-orange-100 text-orange-700;
}

.table-reserved {
    @apply bg-blue-100 text-blue-700;
}

.table-cleaning {
    @apply bg-yellow-100 text-yellow-700;
}

/* ========== PEDIDOS ========== */

.order-card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 p-4;
    @apply transition-all duration-200;
}

.order-card:hover {
    @apply shadow-md;
}

.order-item {
    @apply flex items-center justify-between py-2 border-b border-gray-50 last:border-b-0;
}

.order-total {
    @apply flex items-center justify-between py-3 font-bold text-lg border-t-2 border-gray-100;
}

/* ========== PRODUCTOS ========== */

.product-card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden;
    @apply transition-all duration-200 cursor-pointer;
}

.product-card:hover {
    @apply shadow-md -translate-y-1 border-emerald-200;
}

.product-image {
    @apply w-full h-32 object-cover bg-gray-100;
}

.product-info {
    @apply p-4;
}

.product-price {
    @apply text-xl font-bold text-emerald-600;
}

/* ========== DASHBOARD ========== */

.dashboard-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6;
}

.dashboard-card {
    @apply bg-white rounded-2xl p-6 shadow-sm border border-gray-100;
}

/* ========== ANIMACIONES ========== */

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

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

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

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-slide-up {
    animation: slideUp 0.3s ease-out;
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ========== UTILIDADES ========== */

.text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-emerald-500 to-teal-500;
}

.bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f4f6' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Focus visible para accesibilidad */
.focus-visible:focus-visible {
    @apply outline-none ring-2 ring-emerald-500 ring-offset-2;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded-full;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full hover:bg-gray-400;
}