/* Oudai — JS Component Styles (Tailwind handles layout)
   Solo estilos para componentes específicos no cubiertos por Tailwind
   ================================================================ */

* { box-sizing:border-box; }

/* Product card styles for admin pages / fallbacks */
.product-card { }
.product-body { }
.product-body .badge-row { display:flex; gap:4px; margin-bottom:6px; }
.product-body h3 { font-size:0.95rem; font-weight:600; }
.product-body .muted { font-size:0.8rem; color:#64748b; }
.product-body .price { font-size:1.1rem; font-weight:700; color:#d97706; }
.product-body .stock { font-size:0.75rem; color:#64748b; }
.product-body .stock.out { color:#ef4444; }
.product-body .hero-actions { display:flex; gap:8px; margin-top:8px; }

/* Flash messages */
.flash { padding:12px 16px; border-radius:12px; font-size:0.875rem; font-weight:500; }
.flash.success { background:rgba(16,185,129,0.1); color:#34d399; border:1px solid rgba(16,185,129,0.2); }
.flash.error { background:rgba(239,68,68,0.1); color:#f87171; border:1px solid rgba(239,68,68,0.2); }
.flash.info { background:rgba(59,130,246,0.1); color:#60a5fa; border:1px solid rgba(59,130,246,0.2); }

/* Empty states */
.empty { padding:2rem; text-align:center; color:#64748b; font-size:0.875rem; border-radius:12px; background:rgba(30,41,59,0.3); border:1px dashed rgba(100,116,139,0.3); }

/* Category grid fallback */
.category-card { }

/* Action buttons in forms */
.button { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 20px; border-radius:9999px; font-family:inherit; font-size:0.875rem; font-weight:600; border:1px solid transparent; cursor:pointer; transition:all .2s; text-align:center; line-height:1.2; }
.button.primary { background:#d97706; color:#fff; border-color:#d97706; }
.button.primary:hover { background:#b45309; border-color:#b45309; }
.button.secondary { background:rgba(30,41,59,0.5); color:#94a3b8; border-color:rgba(100,116,139,0.3); }
.button.secondary:hover { background:rgba(30,41,59,0.8); color:#e2e8f0; }
.button.small { padding:8px 14px; font-size:0.8rem; }

/* Safe area for bottom nav */
@supports (padding-bottom:env(safe-area-inset-bottom)) {
    .safe-area-bottom { padding-bottom:env(safe-area-inset-bottom); }
}

/* Line clamp fallback */
.line-clamp-1 { display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; }